:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f4f5f7;background:#07080b;font-synthesis:none;--glass:rgba(20,22,28,.72);--line:rgba(255,255,255,.10);--muted:#9da3af}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#050608}body{min-height:100dvh;overflow:hidden}.app-shell{height:100dvh;display:flex;flex-direction:column;background:radial-gradient(circle at 50% -10%,#18202d 0,#0a0c10 38%,#050608 75%)}
.topbar{height:72px;flex:0 0 72px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line);background:rgba(7,8,11,.72);backdrop-filter:blur(24px);z-index:10}.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.035em;font-size:22px}.play-mark{display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(220,232,255,.45);border-radius:8px;font-size:10px;color:#dce8ff;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.025));box-shadow:0 0 22px rgba(155,190,255,.09)}.top-actions{display:flex;gap:8px}.icon-button,.control,.panel-header button{border:1px solid var(--line);background:rgba(255,255,255,.045);color:#f4f5f7;border-radius:11px;cursor:pointer}.icon-button{width:40px;height:40px;font-size:20px}
.player-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#030405;overflow:hidden}.media-host{position:absolute;inset:0;display:grid;place-items:center}.active-media{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;display:block}.media-host audio{width:min(620px,82%);height:56px}.empty-state{text-align:center;color:#fff;z-index:2;padding:24px}.empty-mark{margin:auto;width:74px;height:74px;border-radius:23px;display:grid;place-items:center;font-size:25px;background:linear-gradient(145deg,#eef3ff,#8c9ab0);color:#0b0d11;box-shadow:0 20px 60px rgba(160,190,240,.18)}.empty-state h1{font-size:31px;margin:20px 0 7px;letter-spacing:-.04em}.empty-state p{color:var(--muted);margin:0 0 20px}.primary-button{border:0;border-radius:13px;padding:12px 18px;font-weight:650;background:#eef3ff;color:#0a0b0e;cursor:pointer}.hint{font-size:11px;color:#656d79;max-width:440px;margin:15px auto 0;line-height:1.5}.drop-overlay{position:absolute;inset:24px;border:1px dashed rgba(220,232,255,.35);border-radius:22px;display:none;place-items:center;background:rgba(150,180,230,.06);backdrop-filter:blur(4px);font-weight:650;font-size:18px;z-index:8}.drop-overlay.show{display:grid}.media-badge{position:absolute;left:18px;top:18px;padding:6px 9px;border:1px solid var(--line);border-radius:9px;background:rgba(7,8,11,.55);font-size:9px;letter-spacing:.12em;color:#9da3af;z-index:5}.foldra-button{position:absolute;right:25px;top:18px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(220,232,255,.3);background:rgba(12,14,19,.7);color:#e6edf9;font-size:19px;cursor:pointer;backdrop-filter:blur(15px);z-index:6}.controls{position:absolute;left:0;right:0;bottom:0;padding:46px 28px 22px;background:linear-gradient(transparent,rgba(0,0,0,.88));opacity:0;transition:.2s;z-index:4}.player-stage:hover .controls,.controls:focus-within{opacity:1}.timeline-row,.control-row{display:flex;align-items:center;gap:12px}.timeline-row{font-size:12px;color:#c5cad3}.timeline-row input{flex:1}.control{height:34px;padding:0 10px;font-size:12px}.control:disabled{opacity:.35}.volume{width:90px}.spacer{flex:1}input[type=range]{accent-color:#e6edf9;cursor:pointer}
.media-strip{height:54px;flex:0 0 54px;display:flex;align-items:center;gap:5px;padding:0 24px;border-top:1px solid var(--line);background:rgba(8,9,12,.88)}.tab{height:34px;padding:0 13px;border:0;background:transparent;color:#858c99;border-radius:9px;cursor:pointer}.tab.active{color:#fff;background:rgba(255,255,255,.08)}.strip-spacer{flex:1}.capability{font-size:11px;color:#737a86}.foldra-panel{position:absolute;right:18px;top:82px;bottom:72px;width:min(380px,calc(100vw - 36px));padding:18px;border:1px solid var(--line);border-radius:20px;background:rgba(13,15,20,.91);backdrop-filter:blur(28px);box-shadow:0 25px 80px rgba(0,0,0,.55);transform:translateX(120%);transition:.3s;z-index:20;display:flex;flex-direction:column}.foldra-panel.open{transform:translateX(0)}.panel-header{display:flex;justify-content:space-between;align-items:center}.panel-header strong{display:block;font-size:17px}.panel-header span{display:block;font-size:11px;color:#858c99;margin-top:2px}.panel-header button{width:32px;height:32px;font-size:20px}.foldra-prompts{display:grid;gap:9px;margin-top:22px}.foldra-prompts button{padding:12px 13px;text-align:left;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035);color:#d9dde5;cursor:pointer}.foldra-input{display:flex;gap:8px;margin-top:auto}.foldra-input input{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;background:#090b0f;color:#fff;padding:12px}.foldra-input button{width:42px;border:0;border-radius:12px;background:#eef3ff;color:#080a0e;font-weight:700}.toast{position:fixed;left:50%;bottom:78px;transform:translate(-50%,18px);opacity:0;pointer-events:none;padding:11px 15px;border:1px solid var(--line);border-radius:12px;background:rgba(16,18,23,.92);backdrop-filter:blur(20px);color:#e9edf5;font-size:12px;z-index:50;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:650px){.topbar{height:60px;flex-basis:60px;padding:0 14px}.brand{font-size:19px}.icon-button{width:38px;height:38px}.controls{padding:44px 12px 12px;opacity:1}.volume{display:none}.media-strip{height:48px;flex-basis:48px;padding:0 9px;overflow:auto}.tab{padding:0 10px;font-size:11px}.capability{display:none}.foldra-button{right:13px;top:13px}.media-badge{left:12px;top:13px}.empty-state h1{font-size:26px}.empty-state p{font-size:13px}.hint{font-size:10px}.foldra-panel{top:68px;bottom:56px;right:9px;width:calc(100vw - 18px)}}
@media(hover:none){.controls{opacity:1}}