@import "https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=IBM+Plex+Mono:wght@300;400;600&display=swap";:root{--bg:#080c0f;--surface:#0d1318;--surface-2:#121a20;--border:#63e6be1a;--border-hover:#63e6be40;--text:#d4e8e0;--text-muted:#4e7068;--text-dim:#2a4040;--accent-green:#63e6be;--accent-amber:#fac850;--accent-blue:#50c8ff;--accent-purple:#b478ff;--accent-pink:#ff7896;--accent:var(--accent-green);--radius:6px;--font-mono:"IBM Plex Mono", monospace;--font-display:"DM Serif Display", serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg);height:100%;color:var(--text);font-family:var(--font-mono);-webkit-font-smoothing:antialiased;font-size:13px}.auth-gate{background:var(--bg);background-image:radial-gradient(60% 40% at 50% 0,#63e6be0f 0%,#0000 70%);justify-content:center;align-items:center;min-height:100vh;display:flex}.auth-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:14px;width:380px;padding:40px 36px;display:flex}.auth-logo{font-family:var(--font-display);color:var(--accent-green);letter-spacing:.06em;font-size:28px}.auth-sub{color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-top:-8px;margin-bottom:8px;font-size:11px}.auth-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-size:10px}.auth-input{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-mono);outline:none;padding:10px 12px;font-size:12px;transition:border-color .15s}.auth-input:focus{border-color:var(--accent-green)}.auth-btn{background:var(--accent-green);color:#080c0f;border-radius:var(--radius);font-family:var(--font-mono);cursor:pointer;letter-spacing:.04em;border:none;padding:10px;font-size:12px;font-weight:600;transition:opacity .15s}.auth-btn:hover{opacity:.85}.auth-btn:disabled{opacity:.3;cursor:default}.auth-hint{color:var(--text-dim);font-size:10px;line-height:1.6}.auth-hint a{color:var(--text-muted);text-decoration:underline}.auth-hint code{font-family:var(--font-mono);border:1px solid var(--border);color:var(--accent-green);background:#63e6be14;border-radius:3px;padding:1px 5px;font-size:10px}.app-shell{flex-direction:column;height:100vh;display:flex;overflow:hidden}.topbar{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:20px;height:48px;padding:0 20px;display:flex}.topbar-brand{flex-shrink:0;align-items:center;gap:8px;display:flex}.brand-mark{color:var(--accent-green);font-size:18px}.brand-name{font-family:var(--font-display);color:var(--text);letter-spacing:.02em;font-size:17px}.tab-nav{flex:1;gap:2px;display:flex}.tab-btn{font-family:var(--font-mono);color:var(--text-muted);border-radius:var(--radius);cursor:pointer;letter-spacing:.04em;text-transform:uppercase;background:0 0;border:1px solid #0000;padding:5px 14px;font-size:11px;transition:all .15s}.tab-btn:hover{color:var(--text);border-color:var(--border)}.tab-btn.active{color:var(--accent-green);border-color:var(--border-hover);background:#63e6be0d}.signout-btn{font-family:var(--font-mono);color:var(--text-dim);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;text-transform:uppercase;letter-spacing:.06em;background:0 0;flex-shrink:0;padding:4px 10px;font-size:10px;transition:all .15s}.signout-btn:hover{color:var(--text-muted);border-color:var(--border-hover)}.main-content{flex-direction:column;flex:1;display:flex;overflow:hidden}.view-panel{flex-direction:column;gap:20px;height:100%;padding:24px;display:flex;overflow-y:auto}.lookup-bar{gap:10px;max-width:560px;display:flex}.id-input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-mono);outline:none;flex:1;padding:10px 14px;font-size:12px;transition:border-color .15s}.id-input:focus{border-color:var(--accent-green)}.id-input::placeholder{color:var(--text-dim)}.fetch-btn{color:var(--accent-green);border:1px solid var(--border-hover);border-radius:var(--radius);font-family:var(--font-mono);cursor:pointer;letter-spacing:.04em;white-space:nowrap;background:#63e6be1a;padding:10px 20px;font-size:12px;font-weight:600;transition:all .15s}.fetch-btn:hover{background:#63e6be29}.fetch-btn:disabled{opacity:.35;cursor:default}.library-layout{flex:1;display:flex;overflow:hidden}.track-list-panel{border-right:1px solid var(--border);background:var(--surface);flex-direction:column;flex-shrink:0;width:280px;display:flex}.list-header{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);border-bottom:1px solid var(--border);flex-shrink:0;padding:14px 16px 10px;font-size:10px}.track-list{flex:1;padding:8px 0;overflow-y:auto}.track-list::-webkit-scrollbar{width:4px}.track-list::-webkit-scrollbar-track{background:0 0}.track-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.track-list-item{cursor:pointer;text-align:left;background:0 0;border:none;border-left:2px solid #0000;flex-direction:column;gap:2px;width:100%;padding:10px 16px;transition:all .12s;display:flex}.track-list-item:hover{background:#63e6be0a}.track-list-item.active{border-left-color:var(--accent-green);background:#63e6be12}.tli-title{font-family:var(--font-mono);color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.tli-id{color:var(--text-dim);font-size:9px;font-family:var(--font-mono)}.track-detail-panel{flex:1;padding:24px;overflow-y:auto}.load-more-btn{border:none;border-top:1px solid var(--border);width:100%;font-family:var(--font-mono);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;background:0 0;flex-shrink:0;padding:12px;font-size:10px;transition:color .15s}.load-more-btn:hover{color:var(--accent-green)}.list-loading{color:var(--text-dim);text-align:center;padding:12px 16px;font-size:11px;animation:1.2s ease-in-out infinite pulse}.track-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}.track-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:baseline;gap:16px;padding:18px 22px 16px;display:flex}.track-title{font-family:var(--font-display);color:var(--text);letter-spacing:.01em;font-size:22px}.track-id{color:var(--text-dim);letter-spacing:.06em;white-space:nowrap;flex-shrink:0;font-size:10px}.analysis-grid{grid-template-columns:380px 1fr;min-height:300px;display:grid}.analysis-col-left{border-right:1px solid var(--border);flex-direction:column;gap:24px;padding:20px;display:flex}.analysis-col-right{padding:20px;overflow-y:auto}.section-label{text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);border-bottom:1px solid var(--border);margin-bottom:12px;padding-bottom:6px;font-size:9px}.mood-radar{width:100%}.radar-tooltip{background:var(--surface-2);border:1px solid var(--border);font-family:var(--font-mono);border-radius:4px;align-items:center;gap:8px;padding:6px 10px;font-size:11px;display:flex}.rt-label{color:var(--text-muted)}.rt-value{color:var(--accent-green);font-weight:600}.score-panel{flex-direction:column;gap:10px;display:flex}.score-bar-row{align-items:center;gap:10px;display:flex}.score-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;width:130px;font-size:10px}.score-track{background:var(--surface-2);border-radius:2px;flex:1;height:3px;overflow:hidden}.score-fill{border-radius:2px;height:100%;transition:width .6s cubic-bezier(.4,0,.2,1)}.score-value{color:var(--text-muted);text-align:right;flex-shrink:0;width:52px;font-size:10px}.tag-badges{flex-direction:column;gap:16px;display:flex}.tag-group{flex-direction:column;gap:8px;display:flex}.tag-group-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);font-size:9px}.tag-list{flex-wrap:wrap;gap:6px;display:flex}.tag{font-size:10px;font-family:var(--font-mono);letter-spacing:.04em;border-radius:3px;padding:3px 8px;transition:opacity .12s}.tag:hover{opacity:.8}.error-msg{color:var(--accent-pink);border-radius:var(--radius);background:#ff789614;border:1px solid #ff789633;max-width:560px;padding:10px 14px;font-size:12px}.error-msg.small{margin:8px 16px;font-size:10px}.loading-spinner{height:100%;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:14px;font-size:11px;display:flex}.spinner-ring{border:2px solid var(--border);border-top-color:var(--accent-green);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}.empty-state{height:100%;color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:11px;display:flex}.empty-icon{color:var(--border);font-size:36px}.analysis-pending{color:var(--text-muted);align-items:center;gap:14px;padding:40px;display:flex}.pending-icon{color:var(--accent-amber);font-size:22px;animation:1.5s ease-in-out infinite pulse}.pending-text{letter-spacing:.06em;text-transform:uppercase;font-size:12px}.track-detail-panel::-webkit-scrollbar{width:4px}.analysis-col-right::-webkit-scrollbar{width:4px}.view-panel::-webkit-scrollbar{width:4px}.track-detail-panel::-webkit-scrollbar-track{background:0 0}.analysis-col-right::-webkit-scrollbar-track{background:0 0}.view-panel::-webkit-scrollbar-track{background:0 0}.track-detail-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.analysis-col-right::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.view-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}@media (width<=900px){.analysis-grid{grid-template-columns:1fr}.analysis-col-left{border-right:none;border-bottom:1px solid var(--border)}.library-layout{flex-direction:column}.track-list-panel{border-right:none;border-bottom:1px solid var(--border);width:100%;max-height:200px}}