: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,.28);--text: #F0F0F5;--text-2: #9898aa;--text-3: #5e5e72;--green: #1DB954;--red: #FC3C44;--font: "Inter", -apple-system, sans-serif;--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: .14s;--dur-base: .22s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--base);color:var(--text);font-family:var(--font);font-size:15px;-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;-webkit-overflow-scrolling:touch;padding-bottom:80px}.app-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;background:#111114f2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-shrink:0}.wordmark{font-size:22px;font-weight:700;letter-spacing:-.04em;background:linear-gradient(135deg,var(--violet-light),var(--violet));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-gear{background:none;border:none;color:var(--text-3);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}.tab-bar{height:72px;background:var(--base-1);border-top:1px solid var(--border);display:flex;align-items:flex-start;padding-top:8px;flex-shrink:0}.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;cursor:pointer;-webkit-tap-highlight-color:transparent;background:none;border:none}.tab .icon svg{transition:color var(--dur-base) var(--ease-out)}.tab .icon{color:var(--text-3)}.tab .tab-label{font-size:11px;font-weight:500;color:var(--text-3);transition:color var(--dur-base)}.tab.active .icon,.tab.active .tab-label{color:var(--violet)}.convert-screen{padding:0 20px}.mode-toggle{display:flex;background:var(--base-2);border-radius:var(--r-pill);padding:3px;margin:20px 0;position:relative}.toggle-track{position:absolute;inset:3px auto 3px 3px;width:calc(50% - 3px);background:var(--violet);border-radius:var(--r-pill);box-shadow:0 2px 12px var(--violet-glow);transition:transform var(--dur-base) var(--ease-spring);pointer-events:none}.toggle-track.share{transform:translate(100%)}.toggle-btn{flex:1;position:relative;z-index:1;border:none;background:none;font-family:var(--font);font-size:13px;font-weight:600;color:var(--text-3);padding:9px 0;border-radius:var(--r-pill);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:color var(--dur-base);-webkit-tap-highlight-color:transparent}.toggle-btn.active{color:#fff}.toggle-btn .icon{color:inherit}.type-selector{display:flex;gap:8px;margin-bottom:20px}.type-btn{flex:1;border:1.5px solid var(--border);background:none;color:var(--text-2);font-family:var(--font);font-size:13px;font-weight:600;padding:9px 0;border-radius:var(--r-md);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:border-color var(--dur-base),color var(--dur-base),background var(--dur-base);-webkit-tap-highlight-color:transparent}.type-btn .icon{color:inherit}.type-btn.active{border-color:var(--violet);color:var(--violet);background:var(--violet-dim)}.input-stack{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}.input-row{display:flex;align-items:center;gap:10px;background:var(--base-2);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:0 14px;transition:border-color var(--dur-base),box-shadow var(--dur-base)}.input-row:focus-within{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-dim)}.input-row .icon{color:var(--text-3);flex-shrink:0}.input-row:focus-within .icon{color:var(--violet)}.input-row input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--font);font-size:15px;padding:14px 0;-webkit-appearance:none}.input-row input::placeholder{color:var(--text-3)}.or-divider{display:flex;align-items:center;gap:12px;color:var(--text-3);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.or-divider:before,.or-divider:after{content:"";flex:1;height:1px;background:var(--border)}.cta-btn{width:100%;background:var(--violet);border:none;border-radius:var(--r-lg);color:#fff;font-family:var(--font);font-size:16px;font-weight:700;padding:16px;cursor:pointer;letter-spacing:-.01em;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px;transition:background var(--dur-fast),transform var(--dur-fast) var(--ease-spring);-webkit-tap-highlight-color:transparent}.cta-btn:active{transform:scale(.97);background:var(--violet-deep)}.cta-btn .icon{color:#fff}.results{margin-top:32px}.results-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px}.track-card{display:flex;gap:12px;background:var(--base-1);border:1px solid var(--border);border-radius:var(--r-xl);padding:16px;margin-bottom:20px}.track-art{width:64px;height:64px;border-radius:var(--r-md);flex-shrink:0;display:flex;align-items:center;justify-content:center}.track-art .icon{color:#ffffff80}.track-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}.track-title{font-size:17px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-sub{font-size:13px;color:var(--text-2)}.platform-list{display:flex;flex-direction:column;gap:8px}.platform-row{display:flex;align-items:center;gap:12px;background:var(--base-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--dur-fast),border-color var(--dur-fast)}.platform-row:active{background:var(--base-2)}.platform-row.detected{border-color:var(--violet);background:var(--violet-dim)}.platform-row.unavailable{opacity:.45;cursor:default}.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:11px;font-weight:800;color:#fff;letter-spacing:-.02em}.platform-name{flex:1;font-size:15px;font-weight:600;letter-spacing:-.01em}.platform-badge{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violet-light);background:var(--violet-dim);padding:3px 8px;border-radius:var(--r-pill)}.platform-unavail{font-size:11px;color:var(--text-3)}.platform-arrow .icon{color:var(--text-3)}.share-card{background:var(--base-1);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;margin-bottom:20px}.share-link-row{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--border)}.share-link-text{flex:1;font-size:13px;font-weight:600;color:var(--violet-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;cursor:pointer;white-space:nowrap;transition:background var(--dur-fast);-webkit-tap-highlight-color:transparent}.copy-btn.copied{background:var(--violet);color:#fff;border-color:var(--violet)}.confidence-row{display:flex;align-items:center;gap:12px;padding:12px 16px}.conf-bar-wrap{flex:1;height:4px;background:var(--base-3);border-radius:2px;overflow:hidden}.conf-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--violet-deep),var(--violet));width:0%;transition:width .6s var(--ease-out)}.conf-pct{font-size:12px;font-weight:700;color:var(--violet-light);white-space:nowrap}.conf-detail{font-size:11px;color:var(--text-3);white-space:nowrap}.missing-row{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;border-top:1px solid var(--border);background:#ff643c0d}.missing-row .icon{color:#ff6440;margin-top:1px}.missing-row span{font-size:12px;color:#ff9070;line-height:1.5}.qr-row{display:flex;align-items:center;gap:16px;padding:16px;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 .icon{color:var(--base)}.qr-copy{flex:1}.qr-copy p{font-size:13px;color:var(--text-2);line-height:1.5}.share-sheet-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1.5px solid var(--border);border-radius:var(--r-md);color:var(--text-2);font-family:var(--font);font-size:13px;font-weight:600;padding:7px 12px;cursor:pointer;margin-top:8px;-webkit-tap-highlight-color:transparent;transition:border-color var(--dur-fast),color var(--dur-fast)}.share-sheet-btn:hover{border-color:var(--violet);color:var(--violet-light)}.share-sheet-btn .icon{color:inherit}.empty-state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 20px;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}.empty-state.show{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 .icon{color:var(--text-3)}.empty-title{font-size:17px;font-weight:700;color:var(--text-2)}.empty-body{font-size:13px;color:var(--text-3);max-width:220px;line-height:1.6}.loading-state{display:none;flex-direction:column;align-items:center;gap:16px;padding:48px 0}.loading-state.show{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:13px;color:var(--text-3)}