:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f1eee6;background:#0f1110;color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;--bg: #0f1110;--surface: #171a18;--surface-2: #1d221f;--surface-3: #242b26;--border: #343b35;--border-strong: #4c554d;--text: #f1eee6;--muted: #a5aa9f;--accent: #ff5a4c;--accent-dark: #b42318;--green: #78d79d;--green-dark: #2f8d57;--warm: #d6a66d;--danger-bg: #2d1716;--danger-border: #7d342d;--success-bg: #132419;--success-border: #326b46}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg)}button,input,select{font:inherit}button,a{color:inherit}.app-shell{min-height:100vh;background:var(--bg)}.topbar{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;min-height:56px;padding:8px clamp(12px,3vw,28px);border-bottom:1px solid var(--border);background:#0f1110f0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.topbar-nav,.topbar-account{display:flex;align-items:center;gap:8px}.topbar-account{justify-content:flex-end;min-width:0}.topbar-nav a,.icon-text-button,.primary-action,.danger-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid transparent;border-radius:8px;text-decoration:none;background:transparent;cursor:pointer;white-space:nowrap}.topbar-nav a.active{border-color:var(--border-strong);background:var(--surface-2)}.brand-logo{width:38px;height:38px;border:1px solid var(--text);image-rendering:pixelated;box-shadow:3px 3px 0 var(--accent)}.icon-text-button{max-width:min(260px,42vw);overflow:hidden;border-color:var(--border-strong);background:var(--surface-2)}.icon-text-button span{min-width:0;overflow:hidden;text-overflow:ellipsis}.practice-layout,.admin-layout{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:calc(100vh - 56px)}.song-library,.admin-sidebar{border-right:1px solid var(--border);background:var(--surface)}.song-library{display:flex;flex-direction:column}.library-search{display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface-2)}.library-search input{width:100%;min-width:0;border:0;outline:0;background:transparent}.song-list,.admin-song-list{display:flex;flex-direction:column;overflow:auto}.song-row{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:10px;width:100%;min-height:58px;padding:10px 14px;border:0;border-bottom:1px solid var(--border);background:transparent;text-align:left;cursor:pointer}.admin-song-list .song-row{grid-template-columns:minmax(0,1fr)}.song-row:hover,.song-row.selected{background:var(--surface-2)}.song-row.selected{box-shadow:inset 4px 0 0 var(--accent)}.song-row span,.marker-row span{display:grid;gap:2px;min-width:0}.song-row strong,.marker-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}small,.muted{color:var(--muted)}.padded{padding:16px}.practice-stage,.admin-workspace{min-width:0;padding:clamp(14px,2vw,26px)}.practice-stage{overflow-x:hidden}.practice-panel{display:grid;gap:18px;width:100%;min-width:0;max-width:1180px;margin:0 auto}.practice-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.eyebrow{margin:0 0 4px;color:var(--warm);font-size:.82rem;text-transform:uppercase}h1,h2{margin:0;letter-spacing:0}h1{font-size:clamp(1.8rem,4vw,3.2rem);line-height:1.04}h2{font-size:1rem}.random-key{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 0 0 16px;border-left:3px solid var(--green);white-space:nowrap}.random-key strong{color:var(--green)}.icon-button,.transport-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-2);cursor:pointer}.icon-button:hover,.transport-button:hover,.primary-action:hover,.danger-action:hover{transform:translateY(-1px)}.player-bar{display:flex;flex-wrap:wrap;align-items:end;gap:10px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.time-readout{min-width:116px;min-height:36px;display:inline-flex;align-items:center;color:var(--text)}.compact-field{display:grid;gap:4px}.compact-field span,.repeat-toggle span,.admin-form label span{color:var(--muted);font-size:.78rem}.compact-field input,.compact-field select,.admin-form input{min-height:36px;border:1px solid var(--border-strong);border-radius:8px;padding:0 10px;color:var(--text);background:var(--surface-2)}.compact-field input{width:82px}.repeat-toggle{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 8px}.song-map{display:grid;gap:8px;padding:10px 0 2px}.song-map-meta,.song-map-scale{display:flex;align-items:center;justify-content:space-between;gap:12px}.song-map-meta span,.song-map-scale{color:var(--muted);font-size:.78rem}.song-map-meta strong{color:var(--green);font-size:.9rem}.song-map-track{position:relative;height:40px;overflow:hidden;border:1px solid var(--border-strong);border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0 / 8.333% 100%,var(--surface-2);cursor:pointer;touch-action:none}.song-map-section,.song-map-selected,.song-map-playhead{position:absolute;pointer-events:none}.song-map-section{top:9px;bottom:9px;border-radius:4px;background:#d6a66d5c}.song-map-selected{top:0;bottom:0;border-inline:1px solid rgba(255,90,76,.92);background:#ff5a4c38}.song-map-playhead{top:4px;bottom:4px;width:2px;background:var(--green);box-shadow:0 0 0 1px #0f111080}.song-map-handle{position:absolute;top:50%;z-index:2;width:18px;height:30px;padding:0;border:1px solid #ffb3aa;border-radius:6px;background:var(--accent);box-shadow:0 0 0 2px #0f1110b8;cursor:ew-resize;transform:translate(-50%,-50%)}.song-map-handle:focus-visible{outline:2px solid var(--green);outline-offset:2px}.section-strip{display:flex;flex-wrap:wrap;gap:8px}.section-chip{display:grid;gap:2px;min-width:108px;min-height:48px;padding:8px 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-2);cursor:pointer;text-align:left}.section-chip.active{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}.tab-viewer{width:100%;min-width:0;max-width:100%;min-height:340px;overflow:hidden}.active-marker-strip,.tab-sync-strip{display:flex;justify-content:space-between;gap:12px;padding:8px 0;color:var(--warm);border-bottom:1px solid var(--border)}.tab-sync-strip .sync-badge{color:var(--green)}.tab-viewport{width:100%;min-width:0;max-width:100%;max-height:62vh;min-height:340px;overflow:auto;background:#f7f5ee;color:#181a17;border:1px solid var(--border);border-radius:8px}.alphatab-host{width:100%;min-width:0;max-width:100%;min-height:320px;padding:12px}.alphatab-host svg{display:block;max-width:100%;height:auto;cursor:pointer}.alphatab-host .at-cursor-bar{border:1px solid rgba(180,35,24,.25);border-radius:4px;background:#ff5a4c1f}.alphatab-host .at-cursor-beat{border-radius:999px;background:var(--accent);box-shadow:0 0 0 2px #ff5a4c38}.alphatab-host .at-highlight{fill:var(--accent-dark);stroke:var(--accent-dark)}.tab-loading,.tab-error,.tab-empty,.tab-fallback,.no-audio,.empty-state,.admin-gate{padding:20px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}.tab-fallback{display:flex;gap:12px;align-items:center}.tab-error small{display:block;margin-top:6px}.tab-fallback a{display:inline-flex;align-items:center;gap:5px;margin-top:4px;color:var(--accent)}.error-banner,.success-banner{margin-bottom:12px;padding:10px 12px;border-radius:8px}.error-banner{border:1px solid var(--danger-border);background:var(--danger-bg);color:#ffb3aa}.success-banner{border:1px solid var(--success-border);background:var(--success-bg);color:#a8efc1}.admin-sidebar{padding:18px 0}.admin-sidebar h1{padding:0 16px 14px;font-size:1.6rem}.admin-workspace{display:grid;align-content:start;gap:18px;max-width:1120px}.admin-form{display:grid;gap:14px;padding:16px 0 20px;border-bottom:1px solid var(--border)}.form-heading{display:flex;align-items:center;gap:8px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.admin-form label{display:grid;gap:5px;min-width:0}.admin-form input{width:100%;min-width:0}.admin-form .checkbox-label{display:flex;align-items:center;gap:8px;min-height:36px;padding-top:18px}.admin-form .checkbox-label input{width:16px;min-width:16px;height:16px}.form-actions{display:flex;flex-wrap:wrap;gap:10px}.primary-action{width:fit-content;border-color:var(--accent);background:var(--accent);color:#190908}.danger-action,.icon-button.danger{border-color:var(--danger-border);background:var(--danger-bg);color:#ffb3aa}.marker-form{display:grid;grid-template-columns:1.4fr repeat(5,minmax(84px,1fr)) auto;gap:8px}.marker-list{display:grid;gap:8px}.marker-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:8px 0;border-bottom:1px solid var(--border)}@media (max-width: 860px){.topbar{grid-template-columns:1fr auto 1fr}.topbar-nav a,.icon-text-button{padding:0 9px}.practice-layout,.admin-layout{grid-template-columns:1fr}.song-library,.admin-sidebar{max-height:42vh;border-right:0;border-bottom:1px solid var(--border)}.practice-heading{display:grid}.random-key{padding-left:10px}.form-grid,.marker-form{grid-template-columns:1fr}}@media (max-width: 560px){.topbar{padding-inline:8px}.brand-logo{width:34px;height:34px}.topbar-account span{display:none}.practice-stage,.admin-workspace{padding:12px}.player-bar{align-items:stretch}}