:root { color-scheme: dark; --ink:#e8eef0; --muted:#829398; --panel:#11191c; --panel2:#172226; --line:#29373b; --teal:#2dd4bf; --teal2:#0f766e; --red:#fb5b5b; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:radial-gradient(circle at 25% 0%, #162b2e 0, #0b1113 34%, #080c0e 100%); }
button, input, label { font:inherit; }
button, .file-button { cursor:pointer; }
.topbar { height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 3vw; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(7,12,14,.78); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:11px; font-weight:750; letter-spacing:-.02em; }
.brand-mark { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:var(--teal); color:#062d2a; box-shadow:0 0 25px rgba(45,212,191,.25); }
.session-state { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.875rem; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px var(--teal); }
.session-divider { color:#415257; }
.gate-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(4,8,9,.86); backdrop-filter:blur(14px); }
.gate-backdrop.hidden { display:none; }
.gate-card { width:min(100%,500px); padding:32px; border:1px solid rgba(255,255,255,.1); border-radius:20px; background:#111a1d; box-shadow:0 30px 100px rgba(0,0,0,.55); }
.gate-brand { margin-bottom:30px; }
.gate-card h1 { margin-bottom:10px; }
.gate-copy { margin:0 0 24px; color:#a7b5b8; line-height:1.55; }
.field-label { display:block; margin-bottom:8px; font-weight:700; font-size:.875rem; }
.email-input { width:100%; min-height:48px; padding:0 13px; border:1px solid #35464a; border-radius:9px; outline:none; color:var(--ink); background:#0b1214; }
.email-input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(45,212,191,.12); }
.consent-row { display:grid; grid-template-columns:20px 1fr; gap:10px; margin:20px 0; color:#b7c4c6; font-size:.86rem; line-height:1.5; cursor:pointer; }
.consent-row input { width:17px; height:17px; margin-top:2px; accent-color:var(--teal); }
.gate-button { width:100%; min-height:48px; border-radius:9px; font-weight:750; }
.privacy-note { margin:16px 0 0; color:#718287; font-size:.75rem; line-height:1.5; }
main { padding:30px 3vw 44px; }
.workspace { max-width:1540px; margin:auto; display:grid; grid-template-columns:minmax(0, 1fr) 350px; gap:22px; }
.stage-card, .side-panel { border:1px solid rgba(255,255,255,.08); background:rgba(17,25,28,.9); box-shadow:0 24px 70px rgba(0,0,0,.28); }
.stage-card { border-radius:18px; overflow:hidden; }
.stage-heading { min-height:96px; padding:20px 22px; display:flex; align-items:center; gap:18px; }
.stage-heading > div { flex:1; }
.eyebrow { margin:0 0 4px; color:var(--teal); font-weight:750; font-size:.72rem; letter-spacing:.14em; }
h1 { margin:0; font-size:clamp(1.35rem,2.2vw,2rem); letter-spacing:-.04em; }
.video-select-label { display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.video-select { min-width:230px; padding:9px 34px 9px 11px; border:1px solid var(--line); border-radius:9px; color:#dbe7e8; background:#1a272b; font-size:.82rem; text-transform:none; letter-spacing:0; }
.video-stage { position:relative; background:#020304; aspect-ratio:16/9; overflow:hidden; cursor:crosshair; }
video { width:100%; height:100%; object-fit:contain; display:block; }
#overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.empty-state { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:#b9c6c9; background:linear-gradient(145deg,#101a1d,#080d0f); }
.empty-state span { color:var(--muted); font-size:.9rem; }
.play-glyph { width:58px; height:58px; display:grid; place-items:center; padding-left:4px; border-radius:50%; color:#062d2a; background:var(--teal); margin-bottom:8px; box-shadow:0 0 0 10px rgba(45,212,191,.08); }
.click-flash { position:absolute; width:30px; height:30px; margin:-15px; border:2px solid white; border-radius:50%; opacity:0; pointer-events:none; }
.click-flash.active { animation:ping .45s ease-out; }
@keyframes ping { from { opacity:1; transform:scale(.4); } to { opacity:0; transform:scale(2); } }
.controls { height:62px; padding:0 18px; display:flex; align-items:center; gap:12px; background:#0e1619; border-top:1px solid rgba(255,255,255,.06); }
.icon-button { width:38px; height:38px; border:0; border-radius:8px; color:var(--ink); background:transparent; font-size:1rem; }
.icon-button:hover { background:#1b292d; }
.time { font-variant-numeric:tabular-nums; font-size:.78rem; color:#cbd5d7; }
.muted { color:var(--muted); }
.timeline { position:relative; flex:1; height:24px; display:flex; align-items:center; }
.timeline::before { content:""; position:absolute; left:0; right:0; height:4px; border-radius:4px; background:#304044; }
.timeline-progress { position:absolute; left:0; width:0; height:4px; border-radius:4px; background:var(--teal); }
.timeline input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.timeline-marks { position:absolute; inset:0; pointer-events:none; }
.timeline-mark { position:absolute; top:7px; width:3px; height:10px; border-radius:2px; background:var(--red); transform:translateX(-1px); }
.hint { margin:0; padding:13px 20px 16px; color:var(--muted); font-size:.84rem; border-top:1px solid rgba(255,255,255,.04); }
.side-panel { border-radius:18px; min-height:650px; display:flex; flex-direction:column; overflow:hidden; }
.stat-row { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.stat-row > div { padding:20px; display:flex; flex-direction:column; gap:4px; }
.stat-row > div + div { border-left:1px solid var(--line); }
.stat { font-size:1.5rem; font-weight:750; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.stat-label { color:var(--muted); font-size:.67rem; letter-spacing:.13em; font-weight:700; }
.panel-heading { padding:18px 18px 12px; display:flex; align-items:center; justify-content:space-between; }
h2 { margin:0; font-size:1rem; }
.text-button,.delete-button,.download-one,.timestamp-button { color:var(--muted); background:none; border:0; padding:4px; }
.text-button:hover,.delete-button:hover,.download-one:hover { color:white; }
.findings { padding:0 13px; overflow:auto; max-height:540px; flex:1; }
.no-findings { margin:14px 5px; padding:38px 20px; text-align:center; color:var(--muted); border:1px dashed #324246; border-radius:12px; font-size:.875rem; }
.finding-card { display:grid; grid-template-columns:118px 1fr; gap:12px; padding:10px; margin-bottom:10px; border:1px solid var(--line); border-radius:12px; background:#131e21; }
.finding-thumb { width:118px; height:78px; object-fit:cover; border-radius:7px; background:#050809; }
.finding-body { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.finding-top { width:100%; display:flex; align-items:center; justify-content:space-between; }
.finding-number { font-size:.8rem; }
.delete-button { font-size:1.1rem; line-height:1; }
.timestamp-button { padding:0; color:var(--teal); font-weight:750; font-variant-numeric:tabular-nums; }
.coordinates { color:var(--muted); font-size:.72rem; }
.download-one { padding:4px 0 0; font-size:.72rem; text-decoration:underline; text-underline-offset:3px; }
.panel-actions { padding:14px; display:grid; grid-template-columns:1fr 1.2fr; gap:9px; border-top:1px solid var(--line); }
.panel-actions button { min-height:42px; border-radius:9px; font-weight:700; font-size:.82rem; }
.secondary-button { border:1px solid var(--line); color:var(--ink); background:#182428; }
.primary-button { border:0; color:#052c29; background:var(--teal); }
.panel-actions button:disabled { opacity:.4; cursor:not-allowed; }
@media (max-width:960px) { .workspace { grid-template-columns:1fr; } .side-panel { min-height:420px; } .findings { max-height:420px; } }
@media (max-width:600px) { main { padding:14px; } .topbar { padding:0 16px; } .stage-heading { align-items:flex-start; flex-wrap:wrap; } .stage-heading > div { flex-basis:100%; } .controls { padding:0 8px; gap:7px; } .time { font-size:.7rem; } .hint { font-size:.78rem; } .finding-card { grid-template-columns:104px 1fr; } .finding-thumb { width:104px; height:70px; } }
@media (max-width:600px) { .gate-card { padding:24px 20px; } #saveState,.session-divider { display:none; } }