:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f3f5f7;--panel:#fff;--panel-soft:#f8fafc;--line:#d9e1e8;--line-strong:#c7d2dd;--text:#17212b;--muted:#617181;--accent:#0f6dce;--accent-soft:#e8f1fd;--success:#1f8f66;--success-soft:#eaf8f2;--warning:#c7821d;--warning-soft:#fdf2df;--danger:#c65555;--danger-soft:#fceded;--shadow:0 14px 32px #0f172a14}*{box-sizing:border-box}html,body,#root{min-height:100%}body{color:var(--text);background:radial-gradient(circle at top right, #0f6dce14, transparent 24%), linear-gradient(180deg, #f8fafc 0%, var(--bg) 100%);margin:0;font-family:Tajawal,sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.6}.app-shell{min-height:100vh;padding:1.2rem}.app-frame{width:min(1180px,100%);margin:0 auto}.glass-card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px}.eyebrow{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:0 0 .4rem;font-size:.78rem;font-weight:700}.top-bar{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;padding:1.2rem 1.3rem;display:flex}.top-bar-copy{min-width:0}.page-title{margin:0;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.05}.page-copy{max-width:40rem;color:var(--muted);margin:.75rem 0 0;line-height:1.7}.top-bar-meta{flex-wrap:wrap;justify-content:flex-end;gap:.55rem;display:flex}.meta-chip{min-height:2.35rem;color:var(--text);background:var(--panel-soft);border:1px solid var(--line);white-space:nowrap;border-radius:999px;align-items:center;padding:.55rem .85rem;display:inline-flex}.meta-chip[data-tone=connected]{color:var(--success);background:var(--success-soft);border-color:#1f8f6638}.meta-chip[data-tone=connecting]{color:var(--warning);background:var(--warning-soft);border-color:#c7821d38}.meta-chip[data-tone=offline],.meta-chip[data-tone=error]{color:var(--danger);background:var(--danger-soft);border-color:#c6555538}.content-grid{grid-template-columns:minmax(0,1.35fr) minmax(19rem,.95fr);align-items:start;gap:1rem;display:grid}.media-panel,.control-panel{min-width:0}.media-panel{padding:.9rem}.media-stage{background:#0f1720;border-radius:20px;min-height:clamp(18rem,48vw,34rem);position:relative;overflow:hidden}.cover-stage,.video-stage,.fallback-panel{transition:opacity .18s,transform .18s;position:absolute;inset:0}.stage-hidden{opacity:0;pointer-events:none;transform:scale(.985)}.cover-image{object-fit:cover;width:100%;height:100%}.cover-scrim{background:linear-gradient(#080c121a,#080c12b8);position:absolute;inset:0}.stage-caption{inset-inline:1rem;color:#f8fafc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#080c128c;border-radius:16px;padding:.85rem 1rem;position:absolute;bottom:1rem}.video-stage iframe,.video-placeholder{border:0;width:100%;height:100%}.video-placeholder{color:#f8fafcd1;text-align:center;place-items:center;padding:1.5rem;display:grid}.fallback-panel{opacity:0;pointer-events:none;background:#080c1252;place-items:center;padding:1rem;display:grid}.fallback-panel.is-visible{opacity:1}.fallback-card{width:min(100%,24rem);color:var(--text);background:#fffffff5;border-radius:18px;padding:1.2rem}.fallback-card h2,.state-card h3{margin:0 0 .45rem}.fallback-card p,.state-card p{color:var(--muted);margin:0;line-height:1.7}.stage-footer{inset-inline:1rem;justify-content:space-between;align-items:center;gap:.75rem;display:flex;position:absolute;top:1rem}.track-line,.stage-mode{color:#f8fafc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#080c1273;border-radius:999px;align-items:center;gap:.5rem;padding:.55rem .8rem;display:inline-flex}.live-pulse{background:#ffffff73;border-radius:999px;width:.7rem;height:.7rem}.live-pulse.is-live{background:#54d19d;animation:1.8s infinite pulse-ring}.progress-card{background:var(--panel-soft);border:1px solid var(--line);border-radius:18px;margin-top:.9rem;padding:.95rem 1rem}.progress-times,.progress-meta,.action-row,.panel-head,.search-header,.search-form,.link-actions{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.progress-times,.progress-meta{color:var(--muted);font-size:.92rem}.progress-slider{appearance:none;background:0 0;width:100%;margin:.85rem 0}.progress-slider::-webkit-slider-runnable-track{background:linear-gradient(90deg,#1270cf,#8bc0ff);border-radius:999px;height:.45rem}.progress-slider::-moz-range-track{background:linear-gradient(90deg,#1270cf,#8bc0ff);border-radius:999px;height:.45rem}.progress-slider::-webkit-slider-thumb{appearance:none;background:#fff;border:0;border-radius:999px;width:.95rem;height:.95rem;margin-top:-.25rem;box-shadow:0 0 0 .2rem #0f6dce2e}.progress-slider::-moz-range-thumb{background:#fff;border:0;border-radius:999px;width:.95rem;height:.95rem;box-shadow:0 0 0 .2rem #0f6dce2e}.control-panel{gap:.9rem;display:grid}.launcher-panel,.track-panel,.fold-card{padding:1.1rem}.launcher-panel h2,.track-title{margin:0}.launcher-panel p:not(.eyebrow),.track-description,.helper-note,.fold-text{color:var(--muted);margin:.7rem 0 0;line-height:1.7}.panel-head{align-items:flex-start}.track-title{font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.15}.track-artist{color:#425466;margin:.45rem 0 0;font-size:1rem}.primary-button,.secondary-button,.ghost-button{border:1px solid #0000;border-radius:16px;min-height:2.85rem;padding:.8rem 1rem;transition:transform .15s,background .15s,border-color .15s}.primary-button:hover,.secondary-button:hover,.ghost-button:hover{transform:translateY(-1px)}.primary-button{color:#fff;background:var(--accent)}.secondary-button{color:var(--text);background:var(--panel-soft);border-color:var(--line)}.ghost-button{color:var(--muted);border-color:var(--line);background:0 0}.compact-button{min-width:5.5rem}.launcher-panel .primary-button,.action-row .primary-button,.action-row .secondary-button,.search-form .search-input{width:100%}.inline-error{color:var(--danger);margin:.8rem 0 0}.fold-card{padding:0;overflow:hidden}.fold-card summary{cursor:pointer;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.1rem;list-style:none;display:flex}.fold-card summary::-webkit-details-marker{display:none}.fold-hint{min-height:2rem;color:var(--muted);background:var(--panel-soft);border:1px solid var(--line);border-radius:999px;align-items:center;padding:.35rem .7rem;display:inline-flex}.fold-content{border-top:1px solid var(--line);gap:.8rem;padding:0 1.1rem 1rem;display:grid}.mini-list{color:var(--muted);gap:.45rem;margin:0;padding:0;list-style:none;display:grid}.link-card{background:var(--panel-soft);border:1px solid var(--line);border-radius:18px;gap:.65rem;padding:.9rem;display:grid}.link-card label{font-weight:700}.link-card code{white-space:nowrap;color:#11457a;background:#eef5fb;border:1px solid #d8e5f3;border-radius:14px;padding:.75rem .85rem;display:block;overflow:auto}.as-link{justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.search-overlay{z-index:30;opacity:0;pointer-events:none;background:#0f172a38;place-items:center;padding:1rem;transition:opacity .18s;display:grid;position:fixed;inset:0}.search-overlay.is-open{opacity:1;pointer-events:auto}.search-sheet{width:min(100%,44rem);max-height:min(86vh,48rem);padding:1rem;overflow:auto}.search-form{margin:1rem 0}.search-input{border:1px solid var(--line-strong);color:var(--text);background:var(--panel-soft);border-radius:16px;outline:none;padding:.85rem .95rem}.search-input:focus{border-color:#0f6dce5c;box-shadow:0 0 0 .2rem #0f6dce1f}.state-card{background:var(--panel-soft);border:1px solid var(--line);border-radius:18px;margin-bottom:.85rem;padding:1rem}.error-card{background:var(--danger-soft);border-color:#c6555538}.loading-card{align-items:center;gap:.75rem;display:flex}.spinner{border:2px solid #0f6dce2e;border-top-color:var(--accent);border-radius:999px;width:1.1rem;height:1.1rem;animation:.85s linear infinite spin}.results-grid{gap:.7rem;display:grid}.result-card{width:100%;color:inherit;text-align:start;background:var(--panel-soft);border:1px solid var(--line);border-radius:18px;grid-template-columns:5.7rem minmax(0,1fr);gap:.8rem;padding:.7rem;display:grid}.result-card:hover{background:#f3f8fd;border-color:#bdd4ee}.result-thumb{object-fit:cover;border-radius:14px;width:100%;height:100%}.result-body{min-width:0}.result-head{justify-content:space-between;align-items:start;gap:.6rem;display:flex}.result-head h3{margin:0;font-size:1rem;line-height:1.45}.result-body p,.result-body small{color:var(--muted);margin:.3rem 0 0;display:block}.result-chip{color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:.25rem .5rem;font-size:.72rem}@keyframes pulse-ring{0%{box-shadow:0 0 #54d19d59}70%{box-shadow:0 0 0 .5rem #54d19d00}to{box-shadow:0 0 #54d19d00}}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=980px){.content-grid{grid-template-columns:1fr}.top-bar{flex-direction:column}.top-bar-meta{justify-content:flex-start}}@media (width<=720px){.app-shell{padding:.75rem}.top-bar,.media-panel,.launcher-panel,.track-panel,.search-sheet{border-radius:20px}.panel-head,.action-row,.progress-times,.progress-meta,.search-header,.search-form,.link-actions{flex-direction:column;align-items:stretch}.stage-footer{inset-inline:.75rem;flex-direction:column;align-items:flex-start;top:.75rem}.stage-caption{inset-inline:.75rem;bottom:.75rem}.result-card{grid-template-columns:1fr}.result-thumb{aspect-ratio:16/9}}