:root{--base: #111114;--base-1: #1a1a1f;--base-2: #222228;--base-3: #2e2e36;--border: #333340;--violet: #7F77DD;--violet-light: #CECBF6;--violet-deep: #534AB7;--violet-dim: rgba(127, 119, 221, .12);--violet-glow: rgba(127, 119, 221, .25);--text: #F0F0F5;--text-2: #9898aa;--text-3: #5e5e72;--spotify: #1DB954;--apple: #FC3C44;--youtube: #FF0000;--tidal: #00FFFF;--amazon: #00A8E1;--deezer: #A238FF;--soundcloud: #FF5500;--pandora: #3668FF;--font-ui: -apple-system, "Inter", sans-serif;--font-display: -apple-system, "Inter", sans-serif;--text-xs: 11px;--text-sm: 13px;--text-base: 15px;--text-md: 17px;--text-lg: 20px;--text-xl: 24px;--text-2xl: 30px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--r-sm: 8px;--r-md: 12px;--r-lg: 16px;--r-xl: 20px;--r-pill: 100px;--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-out: cubic-bezier(.16, 1, .3, 1);--dur-fast: .15s;--dur-base: .22s;--dur-slow: .38s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--base);color:var(--text);font-family:var(--font-ui);font-size:var(--text-base);-webkit-font-smoothing:antialiased;overscroll-behavior:none}#app{display:flex;flex-direction:column;height:100dvh;max-width:430px;margin:0 auto;position:relative;overflow:hidden}.screen{flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:80px}.tab-bar{position:absolute;bottom:0;left:0;right:0;height:72px;background:#111114eb;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);display:flex;align-items:flex-start;padding-top:var(--sp-2);z-index:100}.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:var(--sp-2) 0;cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out);-webkit-tap-highlight-color:transparent}.tab i{font-size:22px;color:var(--text-3);transition:color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-spring)}.tab span{font-size:var(--text-xs);font-weight:500;color:var(--text-3);letter-spacing:.01em;transition:color var(--dur-base) var(--ease-out)}.tab.active i{color:var(--violet);transform:scale(1.1)}.tab.active span{color:var(--violet)}.screen-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5) var(--sp-5) var(--sp-4);position:sticky;top:0;background:#111114f2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:50;border-bottom:1px solid transparent}.wordmark{font-size:var(--text-xl);font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,var(--violet-light),var(--violet));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.convert-screen{padding:0 var(--sp-5)}.mode-toggle{display:flex;background:var(--base-2);border-radius:var(--r-pill);padding:3px;margin:var(--sp-5) 0 var(--sp-5);position:relative}.mode-toggle__track{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);background:var(--violet);border-radius:var(--r-pill);transition:transform var(--dur-base) var(--ease-spring);box-shadow:0 2px 12px var(--violet-glow)}.mode-toggle__track.share{transform:translate(100%)}.mode-toggle__btn{flex:1;position:relative;z-index:1;border:none;background:none;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;letter-spacing:.01em;color:var(--text-3);padding:var(--sp-2) 0;border-radius:var(--r-pill);cursor:pointer;transition:color var(--dur-base) var(--ease-out);-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;gap:var(--sp-1)}.mode-toggle__btn i{font-size:14px}.mode-toggle__btn.active{color:#fff}.type-selector{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-5)}.type-btn{flex:1;border:1.5px solid var(--border);background:none;color:var(--text-2);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;padding:var(--sp-2) 0;border-radius:var(--r-md);cursor:pointer;transition:border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;gap:5px}.type-btn i{font-size:14px}.type-btn.active{border-color:var(--violet);color:var(--violet);background:var(--violet-dim)}.input-group{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-4)}.input-wrap{position:relative}.input-wrap i.input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:18px;pointer-events:none;transition:color var(--dur-base)}.input-wrap:focus-within i.input-icon{color:var(--violet)}.search-input{width:100%;background:var(--base-2);border:1.5px solid var(--border);border-radius:var(--r-lg);color:var(--text);font-family:var(--font-ui);font-size:var(--text-base);padding:14px 14px 14px 44px;outline:none;transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base);-webkit-appearance:none}.search-input::placeholder{color:var(--text-3)}.search-input:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-dim)}.input-divider{display:flex;align-items:center;gap:var(--sp-3)}.input-divider:before,.input-divider:after{content:"";flex:1;height:1px;background:var(--border)}.input-divider span{font-size:var(--text-xs);font-weight:600;color:var(--text-3);letter-spacing:.08em;text-transform:uppercase}.cta-btn{width:100%;background:var(--violet);border:none;border-radius:var(--r-lg);color:#fff;font-family:var(--font-ui);font-size:var(--text-md);font-weight:700;padding:16px;cursor:pointer;letter-spacing:-.01em;margin-top:var(--sp-2);transition:background var(--dur-fast),transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur-fast);-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;gap:var(--sp-2)}.cta-btn:active{transform:scale(.97);background:var(--violet-deep)}.cta-btn i{font-size:18px}.results-area{margin-top:var(--sp-6)}.results-label{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-4)}.track-meta{display:flex;gap:var(--sp-3);background:var(--base-1);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-4);margin-bottom:var(--sp-5)}.track-art{width:64px;height:64px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--violet-deep),var(--violet));flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.track-art i{font-size:28px;color:#fff9}.track-art img{width:100%;height:100%;object-fit:cover}.track-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}.track-title{font-size:var(--text-md);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.02em}.track-subtitle{font-size:var(--text-sm);color:var(--text-2)}.platform-list{display:flex;flex-direction:column;gap:var(--sp-2)}.platform-row{display:flex;align-items:center;gap:var(--sp-3);background:var(--base-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast);-webkit-tap-highlight-color:transparent;text-decoration:none}.platform-row:hover,.platform-row:active{background:var(--base-2)}.platform-row.detected{border-color:var(--violet);background:var(--violet-dim)}.platform-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.platform-logo{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;font-weight:800;color:#fff}.platform-name{flex:1;font-size:var(--text-base);font-weight:600;letter-spacing:-.01em}.platform-badge{font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--violet-light);background:var(--violet-dim);padding:3px 8px;border-radius:var(--r-pill)}.platform-action{color:var(--text-3);font-size:18px}.share-result{background:var(--base-1);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;margin-bottom:var(--sp-5)}.share-link-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--border)}.share-link-text{flex:1;font-size:var(--text-sm);font-weight:600;color:var(--violet-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}.copy-btn{background:var(--violet-dim);border:1.5px solid var(--violet);border-radius:var(--r-sm);color:var(--violet-light);font-family:var(--font-ui);font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--dur-fast);white-space:nowrap}.copy-btn:active{background:#7f77dd4d}.copy-btn.copied{color:#fff;background:var(--violet);border-color:var(--violet)}.confidence-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4)}.confidence-bar-wrap{flex:1;height:4px;background:var(--base-3);border-radius:2px;overflow:hidden}.confidence-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--violet-deep),var(--violet));transition:width .6s var(--ease-out)}.confidence-label{font-size:var(--text-xs);font-weight:700;color:var(--violet-light);white-space:nowrap}.confidence-detail{font-size:var(--text-xs);color:var(--text-3);white-space:nowrap}.missing-warning{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border);background:#ff643c0f}.missing-warning i{color:#ff6440;font-size:15px;margin-top:1px}.missing-warning span{font-size:var(--text-xs);color:#ff9070;line-height:1.5}.qr-row{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4);border-top:1px solid var(--border)}.qr-box{width:64px;height:64px;background:#fff;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}.qr-box i{font-size:40px;color:var(--base)}.qr-copy-col{flex:1}.qr-copy-col p{font-size:var(--text-sm);color:var(--text-2);line-height:1.5}.share-btn{display:flex;align-items:center;gap:var(--sp-2);background:none;border:1.5px solid var(--border);border-radius:var(--r-md);color:var(--text-2);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;padding:8px 12px;cursor:pointer;margin-top:var(--sp-2);-webkit-tap-highlight-color:transparent;transition:border-color var(--dur-fast),color var(--dur-fast)}.share-btn:hover{border-color:var(--violet);color:var(--violet-light)}.share-btn i{font-size:16px}.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-10) var(--sp-5);text-align:center;opacity:0;transform:translateY(8px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}.empty-state.visible{opacity:1;transform:none}.empty-icon{width:72px;height:72px;border-radius:var(--r-xl);background:var(--base-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}.empty-icon i{font-size:32px;color:var(--text-3)}.empty-title{font-size:var(--text-md);font-weight:700;color:var(--text-2)}.empty-body{font-size:var(--text-sm);color:var(--text-3);max-width:220px;line-height:1.6}.loading-state{display:none;flex-direction:column;align-items:center;gap:var(--sp-4);padding:var(--sp-10) 0}.loading-state.visible{display:flex}.spinner{width:32px;height:32px;border:2.5px solid var(--border);border-top-color:var(--violet);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-label{font-size:var(--text-sm);color:var(--text-3)}