/* App-like, neutral styling (keep existing tokens). */
:root {
	--border: #e5e7eb;
	--muted: #6b7280;
	--bg: #ffffff;
	--bg2: #f9fafb;
	--text: #111827;
	--radius: 12px;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg2); color:var(--text); }
a{ color:inherit; text-decoration:none; }
.container{ max-width:1200px; margin:0 auto; padding:16px; }

.app{ min-height:100vh; }
.app-header{ position:sticky; top:0; z-index:50; background:var(--bg2); border-bottom:1px solid var(--border); }
.header-inner{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; }
.brand{ display:flex; flex-direction:column; line-height:1.1; }
.brand-title{ font-size:16px; font-weight:700; letter-spacing:0.2px; }
.brand-sub{ font-size:12px; }
.status{ font-size:12px; white-space:nowrap; }

.tabs{ display:flex; gap:6px; align-items:center; border:1px solid var(--border); background:var(--bg); border-radius:999px; padding:4px; }
.tab{ display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:999px; font-size:13px; border:1px solid transparent; }
.tab.is-active{ background:var(--text); color:var(--bg); }
.tab:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }

.app-main{ padding-top:16px; }

h2{ margin:0 0 8px 0; font-size:18px; }
h3{ margin:0 0 8px 0; font-size:15px; }
p{ margin:8px 0; }
label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }

.card{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }

.card-head{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }
.card-head .toolbar{ justify-content:flex-end; }

.workspace{ display:grid; gap:12px; grid-template-columns:1fr; }
.workspace-main{ min-width:0; }
.workspace-side{ display:grid; gap:12px; }
@media (min-width: 1100px){
	.workspace{ grid-template-columns:minmax(0, 1fr) 380px; align-items:start; }
	.workspace-side{ position:sticky; top:84px; }
}

.btn{ display:inline-flex; gap:8px; align-items:center; border:1px solid var(--border); background:var(--bg); padding:9px 12px; border-radius:10px; cursor:pointer; font-weight:600; font-size:13px; }
.btn:hover{ background:var(--bg2); }
.btn:active{ transform:translateY(0.5px); }
.btn:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }
.btn.primary{ background:var(--text); color:var(--bg); border-color:var(--text); }
.btn.primary:hover{ background:var(--text); }
.btn.danger{ background:#b91c1c; color:#fff; border-color:#b91c1c; }

.input, select{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); font-size:14px; }
.input:focus, select:focus{ outline:2px solid var(--text); outline-offset:1px; }

.grid{ display:grid; gap:12px; }
.grid.cols-2{ grid-template-columns:1fr; }
@media (min-width: 900px){ .grid.cols-2{ grid-template-columns:1fr 1fr; } }
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--border); vertical-align:top; }
.muted{ color:var(--muted); }
.error{ color:#b91c1c; }
.toolbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.stage{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.stage--pro{ aspect-ratio:16/9; background:#0b0b0b; }
.stage video, .stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.stage canvas{ position:absolute; inset:0; width:100%; height:100%; }
.small{ font-size:12px; }

/* View switching (SPA-like) */
.view{ display:none; }
.view.is-active{ display:block; }

/* Step screens */
.screen{ display:block; }

/* Fullscreen player */
.player{ display:none; position:fixed; inset:0; background:#000; z-index:100; }
.player.is-active{ display:block; }
.player-topbar{ position:absolute; left:0; right:0; top:0; z-index:30; display:flex; gap:10px; align-items:center; justify-content:space-between; padding:10px; background:rgba(255,255,255,0.10); backdrop-filter: blur(10px); }
.player-title{ color:#fff; font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:45vw; }
.player-actions{ display:flex; gap:8px; }

.player-stage{ position:absolute; inset:0; z-index:1; }
.player-stage video, .player-stage img, .player-stage canvas{ position:absolute; inset:0; width:100%; height:100%; }
.player-stage video, .player-stage img{ object-fit:contain; }
.player-stage canvas{ z-index:5; }

/* Side drawer (80% width, almost transparent, overlays video) */
.drawer{ position:absolute; top:0; bottom:0; right:0; z-index:20; width:80vw; max-width:520px; transform:translateX(100%); transition:transform 160ms ease-out; background:rgba(255,255,255,0.18); backdrop-filter: blur(12px); border-left:1px solid rgba(229,231,235,0.35); padding:12px; overflow:auto; }
.drawer.is-open{ transform:translateX(0); }
.drawer-head{ display:flex; gap:10px; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }
.drawer-title{ font-weight:800; font-size:14px; }
.drawer-body{ display:grid; gap:12px; }
.drawer-section{ border:1px solid rgba(229,231,235,0.35); border-radius:12px; background:rgba(255,255,255,0.12); padding:12px; }
.drawer-section-title{ font-weight:700; font-size:12px; margin-bottom:8px; color:var(--text); }

/* Bottom sheet timeline (almost transparent, overlays video) */
.bottom-sheet{ position:absolute; left:0; right:0; bottom:0; z-index:25; transform:translateY(calc(100% - 38px)); transition:transform 160ms ease-out; background:rgba(255,255,255,0.18); backdrop-filter: blur(12px); border-top:1px solid rgba(229,231,235,0.35); }
.bottom-sheet.is-open{ transform:translateY(0); }
.sheet-handle{ width:100%; border:0; background:transparent; padding:10px 0; cursor:pointer; }
.sheet-pill{ display:block; width:46px; height:5px; border-radius:999px; background:rgba(17,24,39,0.35); margin:0 auto; }
.sheet-body{ padding:0 12px 12px 12px; }
.sheet-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sheet-time{ font-variant-numeric: tabular-nums; font-weight:700; }
.range{ width:100%; }

/* When player is active, hide only the header and prevent scrolling.
	Do NOT hide .app-main because the full-screen player lives inside it. */
body.player-mode{ overflow:hidden; }
body.player-mode .app-header{ display:none; }
body.player-mode .app-main{ padding-top:0; }