/* Version: 0.2.0 */
/** Docstring: Version 0.2.0. Dark multi-page evidence-console visual system. */
:root { color-scheme: dark; --bg:#090c10; --panel:#11171e; --panel2:#151d26; --line:#26313d; --text:#e9eef4; --muted:#8693a1; --green:#55e6a5; --amber:#f5bd55; --red:#ff6b78; --blue:#60a5fa; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 80% 0,#152331 0,transparent 35%),var(--bg); color:var(--text); font:14px/1.5 "Segoe UI",system-ui,sans-serif; min-height:100vh; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:0 28px; background:rgba(9,12,16,.9); position:sticky; top:0; z-index:3; backdrop-filter:blur(10px); }
.topbar strong { letter-spacing:.16em; font-size:16px; }
.topbar small { color:var(--muted); margin-left:12px; letter-spacing:.12em; }
.brand-mark { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 16px var(--green); margin-right:10px; }
.layout { display:grid; grid-template-columns:230px minmax(0,1fr); min-height:calc(100vh - 64px); }
nav { padding:28px 18px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
nav a,nav span { color:var(--muted); text-decoration:none; padding:10px 12px; border-radius:6px; font-size:12px; letter-spacing:.06em; }
nav .active { color:var(--text); background:var(--panel2); border-left:2px solid var(--green); }
nav em { display:block; font-style:normal; font-size:9px; color:#596572; margin-top:3px; }
main { width:min(1120px,calc(100% - 40px)); margin:32px auto 80px; }
.panel { background:linear-gradient(145deg,rgba(21,29,38,.95),rgba(14,19,25,.98)); border:1px solid var(--line); border-radius:10px; padding:24px; margin-bottom:18px; box-shadow:0 12px 40px rgba(0,0,0,.18); }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
h1,h2,h3,p { margin-top:0; } h1 { font-size:26px; margin-bottom:20px; } h2 { font-size:20px; }
.eyebrow { color:var(--green); letter-spacing:.16em; font-size:10px; font-weight:700; margin-bottom:4px; }
.badge { border:1px solid #2d5c4a; color:var(--green); background:#10231d; padding:5px 9px; border-radius:999px; font-size:10px; letter-spacing:.08em; white-space:nowrap; }
.badge.warn { color:var(--amber); border-color:#604c26; background:#241d10; }.badge.error { color:var(--red); border-color:#61313a; background:#291318; }.badge.muted { color:var(--muted); border-color:var(--line); background:var(--panel); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label { color:#aeb8c3; display:flex; flex-direction:column; gap:7px; font-size:12px; }
input,select,textarea { width:100%; background:#0a0f14; border:1px solid var(--line); border-radius:6px; padding:11px 12px; color:var(--text); font:inherit; }
input[type="checkbox"] { width:20px; height:20px; accent-color:var(--green); }
input:focus,select:focus,textarea:focus { outline:none; border-color:#3a8065; box-shadow:0 0 0 3px rgba(85,230,165,.08); }
.file-card { border:1px dashed #3a4755; border-radius:7px; padding:12px; background:#0c1218; }.file-card input { padding:5px 0; border:0; background:none; }.file-name { color:var(--muted); }
button { border:0; border-radius:6px; padding:11px 16px; background:var(--green); color:#07120d; font-weight:800; letter-spacing:.06em; cursor:pointer; margin-top:14px; } button:hover { filter:brightness(1.08); } button:disabled { opacity:.5; cursor:wait; }
button.secondary { margin:0; background:transparent; color:var(--muted); border:1px solid var(--line); }
.hint,.muted { color:var(--muted); }.hint { margin:14px 0; font-size:12px; }.message { margin:12px 0 0; min-height:20px; }.message.error { color:var(--red); }
.sessions { display:grid; gap:10px; }.session-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:14px; padding:14px; border:1px solid var(--line); border-radius:7px; background:#0d1319; cursor:pointer; }.session-row:hover { border-color:#3b4b5b; }.session-row h3 { margin:0 0 3px; font-size:14px; }.session-row p { margin:0; font-size:11px; color:var(--muted); }
.status { font-size:10px; letter-spacing:.08em; color:var(--blue); text-transform:uppercase; }.metric { color:var(--muted); font-variant-numeric:tabular-nums; }
.progress { height:8px; background:#080b0f; border-radius:99px; overflow:hidden; margin:15px 0; }.progress div { height:100%; width:0; background:linear-gradient(90deg,var(--green),#4ab2e8); transition:width .3s; }
.diagnostics { max-height:270px; overflow:auto; background:#080c10; border:1px solid var(--line); padding:12px; border-radius:6px; font:11px/1.6 Consolas,monospace; }.diagnostics div { color:#aab5c1; }.diagnostics .error { color:var(--red); }.diagnostics .warning { color:var(--amber); }
.media-grid,.stage-grid,.system-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.media-card,.stage-card,.system-card { border:1px solid var(--line); background:#0c1218; border-radius:7px; padding:13px; }.media-card p,.stage-card p,.system-card p { margin:5px 0 0; color:var(--muted); font-size:11px; word-break:break-word; }.stage-card strong { font-size:12px; }.not-implemented { color:var(--amber); font-size:9px; letter-spacing:.08em; }
.stack { display:grid; gap:12px; margin-top:18px; }.camera-card,.list-card { border:1px solid var(--line); background:#0c1218; border-radius:8px; padding:18px; }.camera-config-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:16px; }.button-row { display:flex; gap:10px; flex-wrap:wrap; }.button-row button.secondary { margin-top:14px; }.warn-text { color:var(--amber) !important; }.list-card p { color:var(--muted); margin:6px 0 0; }.page-view { min-width:0; }
.hidden { display:none !important; }
@media (max-width:900px) { .camera-config-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .layout { grid-template-columns:1fr; } nav { display:none; } main { width:calc(100% - 24px); margin-top:16px; }.form-grid,.media-grid,.stage-grid,.system-grid,.camera-config-grid { grid-template-columns:1fr; }.topbar { padding:0 14px; }.topbar small { display:none; }.session-row { grid-template-columns:1fr; } }