/* style.css - the ARGUS control-room look: dark shell, sidebar, top bar, stat cards, tables, forms.
   Colours, spacing and fonts are the design's values; every page shares this one file.
   Fonts: IBM Plex Sans / Mono served locally from static/fonts/ (client sites are offline). */
@import url('/static/fonts/fonts.css');   /* IBM Plex, local files - see fonts/fonts.css */

:root {
  --bg:#0a0e12; --side:#0d1218; --panel:#11181f; --panel2:#0e151c; --input:#0c1218;
  --line:#1b232d; --line2:#1e2733; --line3:#222d38; --line4:#24303c; --line5:#19212b;
  --text:#e6edf3; --text2:#cfd9e3; --text3:#8b98a8; --muted:#5d6b7a; --muted2:#4d5a68; --dim:#2b3642;
  --accent:#3fd6cf; --accent-dark:#04252a; --accent2:#8bd8d2; --accent-line:#26404a;
  --ok:#3fbf6a; --warn:#e3a33b; --bad:#f0625f; --off:#6b7a89;
  --sans:'IBM Plex Sans', system-ui, sans-serif; --mono:'IBM Plex Mono', Consolas, monospace;
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:#77e6e0; }
input::placeholder { color:var(--muted2); }
button { font:inherit; }
@keyframes argusPulse { 0%,100% { opacity:1; } 50% { opacity:.25; } }
@keyframes argusSweep { 0% { transform:translateX(-100%); } 100% { transform:translateX(220%); } }
.hidden { display:none !important; }
.mono { font-family:var(--mono); }

/* ---------- shell: sidebar + header + main ---------- */
.shell { display:flex; min-height:100vh; }
.side { width:280px; flex:0 0 280px; background:var(--side); border-right:1px solid var(--line); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:11px; padding:20px 18px 18px; border-bottom:1px solid var(--line); }
.brand .mark { width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:#101922; border:1px solid var(--accent-line); display:flex; align-items:center; justify-content:center; }
.brand .ring { width:17px; height:17px; border-radius:50%; border:1.5px solid var(--accent); display:flex; align-items:center; justify-content:center; }
.brand .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.brand-text { display:flex; flex-direction:column; gap:7px; }
.brand-logo { height:30px; width:auto; display:block; }   /* the owner's logo (27 Sep 2026) */
.brand .name { font-size:21px; font-weight:600; letter-spacing:.22em; color:#f2f7fa; line-height:1; }
.brand .sub { font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--muted); line-height:1; margin-top:3px; }
.nav { display:flex; flex-direction:column; gap:2px; padding:16px 10px; overflow-y:auto; flex:1; }
.nav .group { font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--muted2); padding:8px 10px 6px; }
.nav .group + .group, .nav .item + .group { padding-top:18px; }
.nav .item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:7px; font-size:16px; color:var(--text2); position:relative; cursor:pointer; }
.nav .item:hover { background:#141c25; color:#f2f7fa; }
.nav .item.off { color:var(--muted2); cursor:not-allowed; }
.nav .item.off:hover { background:transparent; color:var(--muted2); }
.nav .item .sq { width:6px; height:6px; border-radius:2px; background:var(--dim); flex:0 0 6px; }
.nav .item.active { color:#f2f7fa; }
.nav .item.active .sq { background:var(--accent); }
.nav .item.active::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; border-radius:2px; background:var(--accent); }
.nav .item .lbl { flex:1; }
.nav .item .badge { font-family:var(--mono); font-size:12px; color:#3f4b58; border:1px solid #232e3a; border-radius:4px; padding:2px 5px; }
.nav .item .badge.dev { color:var(--warn); border-color:#3d3221; }
.nav .item .count { font-family:var(--mono); font-size:13px; color:var(--muted); }
.side .foot { padding:14px 16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.side .foot .row { display:flex; justify-content:space-between; align-items:center; }
.side .foot .k { font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--muted); }
.side .foot .v { font-family:var(--mono); font-size:13px; color:var(--text2); }
.meter { height:3px; border-radius:3px; background:var(--line); overflow:hidden; }
.meter > div { height:100%; background:var(--accent); }
.side .foot .line { font-size:14px; color:var(--muted); line-height:1.45; }

.body { flex:1; min-width:0; display:flex; flex-direction:column; }
.top { height:64px; flex:0 0 64px; border-bottom:1px solid var(--line); background:var(--side); display:flex; align-items:center; gap:20px; padding:0 24px; position:sticky; top:0; z-index:5; }
.top .crumb { display:flex; align-items:center; gap:9px; font-size:15px; color:var(--muted); flex:1; font-family:var(--mono); }
.top .crumb .a { letter-spacing:.1em; }
.top .crumb .slash { color:var(--dim); }
.top .crumb .b { color:var(--text); letter-spacing:.06em; }
.top .stat { display:flex; align-items:center; gap:8px; }
.top .stat .k { font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--muted); }
.top .stat .meter { width:56px; }
.top .stat .meter > div { background:var(--ok); }
.top .stat .v { font-family:var(--mono); font-size:13px; color:var(--text2); width:30px; }
.top .sep { width:1px; height:24px; background:var(--line); }
.top .clock { display:flex; align-items:center; gap:8px; }
.top .clock .pulse { width:6px; height:6px; border-radius:50%; background:var(--ok); animation:argusPulse 2.4s ease-in-out infinite; }
.top .clock span { font-family:var(--mono); font-size:14px; color:var(--text3); }
.top .user { display:flex; align-items:center; gap:9px; padding-left:6px; }
.top .user .av { width:26px; height:26px; border-radius:50%; background:#182430; border:1px solid #26333f; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:var(--accent2); font-family:var(--mono); }
.top .user span { font-size:15px; color:var(--text2); }
main.page { flex:1; padding:26px 24px 40px; max-width:1560px; width:100%; }

/* ---------- page pieces ---------- */
.screen { display:flex; flex-direction:column; gap:20px; }
.head { display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.head .titles { display:flex; flex-direction:column; gap:7px; flex:1; min-width:260px; }
.eyebrow { font-family:var(--mono); font-size:13px; letter-spacing:.18em; color:var(--accent); }
.eyebrow.warn { color:var(--warn); }
h1.title { margin:0; font-size:34px; font-weight:600; letter-spacing:-.01em; color:#f2f7fa; }
p.lead { margin:0; font-size:16px; color:var(--text3); max-width:64ch; text-wrap:pretty; }
p.lead b { color:var(--text2); font-weight:600; }
.actions { display:flex; gap:10px; }
.btn { display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:500; border:1px solid var(--line4); border-radius:7px; padding:10px 16px; cursor:pointer; white-space:nowrap; color:var(--text2); background:transparent; text-decoration:none; }
.btn:hover { background:#141c25; border-color:#3a4854; color:var(--text2); }
.btn .plus { font-family:var(--mono); }
.btn.primary { background:var(--accent); color:var(--accent-dark); font-weight:600; border-color:var(--accent); }
.btn.primary:hover { background:#63e2dc; color:var(--accent-dark); }
.btn.warn { background:var(--warn); color:#181206; font-weight:600; border-color:var(--warn); }
.btn.warn:hover { background:#f0b558; }
.btn.danger { color:var(--bad); border-color:#33242a; }
.btn.danger:hover { background:#241a1d; border-color:#5a3237; }
.btn.locked { background:#141c25; color:var(--muted2); border-color:var(--line3); cursor:not-allowed; }
.btn.small { font-size:15px; padding:5px 10px; border-radius:6px; }
.btn.small.muted { color:var(--text3); }
.btn.small.muted:hover { color:var(--text); }

.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; }
.stat-card { background:var(--panel); border:1px solid var(--line2); border-radius:10px; padding:15px 16px; display:flex; flex-direction:column; gap:9px; }
.stat-card .k { font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--muted); }
.stat-card .v { display:flex; align-items:baseline; gap:7px; }
.stat-card .n { font-size:38px; font-weight:600; color:#f2f7fa; line-height:1; }
.stat-card .n.ok { color:var(--ok); }
.stat-card .n.bad { color:var(--bad); }
.stat-card .u { font-size:15px; color:var(--muted); }

.panel { background:var(--panel); border:1px solid var(--line2); border-radius:12px; overflow:hidden; }
.panel .bar { display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.panel .bar .grow { flex:1; }
.panel .bar .info { font-family:var(--mono); font-size:14px; color:var(--text3); }
.panel .bar .live { display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--muted); }
.panel .bar .live .pulse { width:5px; height:5px; border-radius:50%; background:var(--accent); animation:argusPulse 2s ease-in-out infinite; }
.panel .bar .live .pulse.warn { background:var(--warn); }
.panel .step { display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid var(--line); }
.panel .step .n { font-family:var(--mono); font-size:13px; color:var(--accent-dark); background:var(--accent); border-radius:4px; width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-weight:600; }
.panel .step .t { font-size:16px; font-weight:600; color:#f2f7fa; }
.panel .step .d { font-size:15px; color:var(--muted); }
.panel .inner { padding:18px; display:flex; flex-direction:column; gap:16px; }
.filter { display:flex; align-items:center; gap:8px; background:var(--input); border:1px solid var(--line3); border-radius:7px; padding:7px 11px; min-width:250px; }
.filter:focus-within { border-color:var(--accent); }
.filter .slash { font-family:var(--mono); font-size:14px; color:var(--muted2); }
.filter input { flex:1; background:transparent; border:none; outline:none; color:var(--text); font-family:var(--sans); font-size:16px; }

table.tbl { width:100%; border-collapse:collapse; font-size:16px; }
table.tbl thead tr { background:var(--panel2); }
table.tbl th { text-align:left; padding:12px 16px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--muted); font-weight:500; white-space:nowrap; }
table.tbl th.r, table.tbl td.r { text-align:right; }
table.tbl tbody tr { border-top:1px solid var(--line5); }
table.tbl tbody tr:hover { background:#141c25; }
table.tbl td { padding:14px 16px; }
table.tbl td.id { font-family:var(--mono); font-size:15px; color:#f2f7fa; white-space:nowrap; }
table.tbl td .nm { color:var(--text); font-weight:500; display:block; }
table.tbl td .addr { font-family:var(--mono); font-size:14px; color:var(--muted); display:block; margin-top:3px; }
table.tbl td.num { font-family:var(--mono); font-size:15px; color:var(--text2); white-space:nowrap; }
table.tbl td.dim { font-family:var(--mono); font-size:15px; color:var(--text3); white-space:nowrap; }
table.tbl td.err { font-size:15px; color:var(--text3); max-width:260px; text-wrap:pretty; }
table.tbl td.err.bad { color:var(--bad); }
table.tbl td .acts { display:inline-flex; gap:6px; }
.pill { display:inline-flex; align-items:center; gap:6px; border-radius:20px; padding:4px 10px; font-family:var(--mono); font-size:13px; letter-spacing:.08em; border:1px solid; white-space:nowrap; }
.pill .d { width:5px; height:5px; border-radius:50%; background:currentColor; }
.pill.ok { color:var(--ok); background:rgba(63,191,106,.12); border-color:rgba(63,191,106,.34); }
.pill.warn { color:var(--warn); background:rgba(227,163,59,.12); border-color:rgba(227,163,59,.34); }
.pill.bad { color:var(--bad); background:rgba(240,98,95,.12); border-color:rgba(240,98,95,.34); }
.pill.off { color:var(--off); background:rgba(107,122,137,.12); border-color:rgba(107,122,137,.34); }
.tag { font-family:var(--mono); font-size:13px; letter-spacing:.08em; border:1px solid #232e3a; border-radius:5px; padding:3px 7px; color:var(--muted); white-space:nowrap; }
.tag.on { color:var(--accent2); border-color:var(--accent-line); }
.empty { padding:44px 20px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.empty .ring { width:38px; height:38px; border-radius:50%; border:1.5px dashed var(--dim); display:flex; align-items:center; justify-content:center; }
.empty .ring div { width:8px; height:8px; border-radius:50%; background:var(--dim); }
.empty .a { font-size:17px; color:var(--text2); }
.empty .b { font-size:15px; color:var(--muted); }

/* forms */
.fgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; }
.frow { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; }
label.f { display:flex; flex-direction:column; gap:7px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--text3); white-space:nowrap; }
label.f.grow { flex:1; min-width:200px; }
label.f.w120 { width:120px; }
label.f.w150 { width:150px; }
label.f input, label.f select { background:var(--input); border:1px solid var(--line3); border-radius:7px; padding:10px 12px; color:var(--text); font-family:var(--mono); font-size:16px; outline:none; width:100%; min-width:0; text-overflow:ellipsis; }
label.f input.sans, label.f select { font-family:var(--sans); }
label.f input:focus, label.f select:focus { border-color:var(--accent); }
label.f select option { background:#0c1218; }
.msg { font-size:15px; color:var(--text3); text-wrap:pretty; }
.msg.ok { color:var(--ok); }
.msg.bad { color:var(--bad); }
.sweep { height:3px; border-radius:3px; background:var(--line); overflow:hidden; position:relative; }
.sweep > div { position:absolute; inset:0; width:35%; background:linear-gradient(90deg, transparent, var(--accent), transparent); animation:argusSweep 1.1s linear infinite; }
.chip { display:flex; align-items:center; gap:9px; border:1px solid var(--accent-line); background:#0f1a20; border-radius:7px; padding:10px 13px; }
.chip.off { border-color:var(--line4); background:transparent; opacity:.7; }
.chip .box { width:15px; height:15px; border-radius:4px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--accent-dark); font-weight:700; }
.chip.off .box { background:transparent; border:1px solid var(--dim); }
.chip .a { font-size:15px; color:var(--text); font-weight:500; display:block; }
.chip .b { font-family:var(--mono); font-size:13px; color:var(--muted); display:block; margin-top:2px; }

/* add-one-camera right column */
.two { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.two .left { flex:1; min-width:420px; display:flex; flex-direction:column; gap:18px; }
.two .right { width:420px; flex:0 0 420px; display:flex; flex-direction:column; gap:14px; position:sticky; top:84px; }
.shot { height:214px; background:repeating-linear-gradient(45deg, #131c24, #131c24 8px, #0f1720 8px, #0f1720 16px); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.shot .ph { font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--muted); text-align:center; padding:0 22px; line-height:1.6; white-space:pre-line; }
.shot .stamp { position:absolute; left:10px; bottom:10px; font-family:var(--mono); font-size:12px; color:var(--text); background:rgba(6,10,14,.72); border-radius:3px; padding:3px 7px; }
.facts { padding:14px 15px; display:flex; flex-direction:column; gap:9px; }
.facts .r { display:flex; justify-content:space-between; font-family:var(--mono); font-size:14px; }
.facts .r .k { color:var(--muted); }
.facts .r .v { color:var(--text); }
.facts hr { border:0; height:1px; background:var(--line5); margin:0; }
.note-box { background:#0f1720; border:1px solid var(--line2); border-radius:12px; padding:14px 15px; display:flex; flex-direction:column; gap:8px; }
.note-box .k { font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--warn); }
.note-box p { margin:0; font-size:15px; color:var(--text3); line-height:1.55; text-wrap:pretty; }
.testbar { display:flex; align-items:center; gap:9px; padding:12px 15px; border-bottom:1px solid var(--line); }
.testbar .d { width:6px; height:6px; border-radius:50%; background:var(--off); }
.testbar .d.ok { background:var(--ok); }
.testbar .d.bad { background:var(--bad); }
.testbar .k { font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--text3); }
.testbar .s { font-family:var(--mono); font-size:13px; color:var(--off); }
.testbar .s.ok { color:var(--ok); }
.testbar .s.bad { color:var(--bad); }

/* scan cards */
.cards { padding:18px; display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:14px; }
.card { border:1px solid var(--accent-line); border-radius:10px; background:var(--panel2); overflow:hidden; }
.card.off { border-color:#232e3a; opacity:.55; }
.card .ch { display:flex; align-items:center; gap:9px; padding:11px 13px; border-bottom:1px solid var(--line); }
.card .ch .box { width:15px; height:15px; border-radius:4px; border:1px solid var(--accent); background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--accent-dark); font-weight:700; cursor:pointer; }
.card.off .ch .box, .card .ch .box.unticked { background:transparent; border-color:var(--dim); }
.card .ch .t { font-family:var(--mono); font-size:15px; color:#f2f7fa; letter-spacing:.06em; }
.card .ch .time { font-family:var(--mono); font-size:13px; color:var(--muted); }
.card.off .ch .time { color:var(--bad); }
.card .pic { height:150px; background:repeating-linear-gradient(45deg, #131c24, #131c24 8px, #0f1720 8px, #0f1720 16px); display:flex; align-items:center; justify-content:center; position:relative; border-bottom:1px solid var(--line); overflow:hidden; }
.card .pic img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card .pic .ph { font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--muted); text-align:center; padding:0 16px; }
.card.off .pic .ph { color:var(--bad); }
.card .pic .stamp { position:absolute; left:9px; bottom:9px; font-family:var(--mono); font-size:12px; color:var(--text3); background:rgba(6,10,14,.7); border-radius:3px; padding:2px 6px; }
.card .body { padding:12px 13px; display:flex; flex-direction:column; gap:11px; }
.card .facts-line { font-family:var(--mono); font-size:14px; color:var(--text3); line-height:1.5; }
.card .idn { display:flex; gap:9px; }
.card .idn label.f { font-size:12px; letter-spacing:.12em; color:var(--muted); }
.card .idn label.f input { padding:8px 10px; border-radius:6px; font-size:15px; }
.card .idn label.f.id { width:74px; }
.card .idn label.f.nm { flex:1; }
.dev-banner { display:flex; align-items:center; gap:12px; background:#1a1509; border:1px solid #3d3221; border-radius:10px; padding:12px 16px; }
.dev-banner .b { font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:#0f1218; background:var(--warn); border-radius:4px; padding:3px 7px; font-weight:600; }
.dev-banner span { font-size:15px; color:#d9c49a; text-wrap:pretty; }
code.k { font-family:var(--mono); font-size:15px; background:var(--input); border:1px solid var(--line3); border-radius:5px; padding:2px 6px; color:var(--accent2); }

/* live grid (kept from before, restyled) */
.live-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(480px, 1fr)); gap:10px; }
.tile { background:var(--panel2); border:1px solid var(--line2); border-radius:8px; overflow:hidden; cursor:pointer; user-select:none; touch-action:none; }
.tile.dragging { position:fixed; z-index:50; pointer-events:none; opacity:.92; outline:2px solid var(--accent);
  box-shadow:0 18px 40px rgba(0,0,0,.6); transform:scale(1.04); transition:transform .12s ease; }
.tile-slot { border:2px dashed var(--accent); border-radius:8px; opacity:.5; background:rgba(43,208,196,.05); }

/* full-screen single camera (double-click a tile). Just the video + a slim top bar. */
.full { position:fixed; inset:0; z-index:100; background:#05080c; display:flex; flex-direction:column; }
.full.hidden { display:none; }
.full-bar { display:flex; align-items:center; gap:10px; padding:10px 16px; color:var(--text);
  background:rgba(6,10,14,.85); border-bottom:1px solid var(--line2); }
.full-bar b { font-family:var(--mono); }
.full-bar .small { font-family:var(--mono); font-size:12px; color:var(--muted); }
.full video { flex:1; min-height:0; width:100%; object-fit:contain; background:#000; }
.tile .box { position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; }
.tile video { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block; background:#000; }  /* fill = stretch to the 16:9 tile. CCTV sub-streams (704x576) carry a 16:9 picture squeezed into 4:3, so stretching RESTORES the true shape - no bars, no crop; a native 16:9 main is unchanged */
.tile .cap { color:var(--text); padding:7px 10px; font-size:14px; display:flex; gap:8px; align-items:center; }
.tile .cap b { font-family:var(--mono); }
.tile .cap .small { font-family:var(--mono); font-size:12px; color:var(--muted); }
.tile .note { padding:0 10px 7px; min-height:16px; font-family:var(--mono); font-size:12px; color:var(--muted); }
label.inline { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--muted); }
label.inline select { background:var(--input); border:1px solid var(--line3); border-radius:6px; color:var(--text); padding:5px 8px; font:inherit; }

/* OWNER-START - the mask editor (the owner's pages only; removed from a client build) */
/* ---------- mask editor (week 4): a still picture with a drawing canvas on top ---------- */
/* The stage's height follows the image's own shape (img is in normal flow, width 100%);
   the canvas sits exactly over it, so a click's fraction of the canvas IS the fraction of
   the picture - the normalized 0-1 coordinates the masks column stores. */
.mask-stage { position:relative; background:#000; border:1px solid var(--line3); border-radius:8px; overflow:hidden; min-height:120px; }
.mask-stage img { display:block; width:100%; height:auto; }
.mask-stage img:not([src]) { display:none; }              /* no picture yet: the .ph shows instead */
.mask-stage canvas { position:absolute; left:0; top:0; width:100%; height:100%; cursor:crosshair; }
.mask-stage .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--muted); text-align:center; padding:0 22px; line-height:1.6; white-space:pre-line; }
.btn.tool.on { border-color:var(--accent); color:var(--accent); }
.mask-chip { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--text2); background:var(--panel2); border:1px solid var(--line3); border-radius:6px; padding:5px 9px; }
.mask-chip button { background:none; border:none; color:var(--bad); cursor:pointer; font-size:14px; line-height:1; padding:0; }
/* OWNER-END */

/* ---------- search / crop-and-search (week 9) ---------- */
.search { padding:18px; }
.search-head { margin-bottom:14px; }
.search .page-title { font-size:22px; font-weight:600; color:var(--text); margin:0 0 6px; letter-spacing:.01em; }
.search .hint { font-size:14px; color:var(--text3); max-width:820px; line-height:1.6; margin:0; }
.search .hint b { color:var(--text2); font-weight:600; }
.search-cols { display:grid; grid-template-columns:1fr 1.4fr; gap:16px; align-items:start; }
@media (max-width:1100px) { .search-cols { grid-template-columns:1fr; } }
.search-pane { border:1px solid var(--line3); border-radius:10px; background:var(--panel2); overflow:hidden; }
.pane-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:11px 13px; border-bottom:1px solid var(--line); }
.pane-title { font-family:var(--mono); font-size:14px; letter-spacing:.06em; color:var(--text2); }
.filters { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.sel { font:inherit; font-size:14px; color:var(--text2); background:var(--input); border:1px solid var(--line4); border-radius:6px; padding:6px 9px; }
.sel:focus { outline:none; border-color:var(--accent-line); }
.crop-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:10px; padding:13px; }
.crop { position:relative; margin:0; border:1px solid var(--line3); border-radius:8px; overflow:hidden; background:#0b1219; cursor:pointer; }
.crop:hover { border-color:var(--accent-line); }
.crop.sel { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.crop img { display:block; width:100%; height:210px; object-fit:contain; background:#0b1219; }
.crop figcaption { font-family:var(--mono); font-size:11px; line-height:1.4; color:var(--text3); padding:5px 7px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:1px; }
.crop figcaption .cnum { color:var(--accent2); }
.crop figcaption .cls { color:var(--text3); text-transform:uppercase; letter-spacing:.06em; font-size:10px; }
.crop figcaption .t { color:var(--muted); }
.crop .conf { position:absolute; top:6px; right:6px; font-family:var(--mono); font-size:12px; font-weight:600; border-radius:4px; padding:2px 6px; background:rgba(6,10,14,.78); border:1px solid; }
.crop .conf.ok { color:var(--ok); border-color:rgba(63,191,106,.4); }
.crop .conf.warn { color:var(--warn); border-color:rgba(227,163,59,.4); }
.crop .conf.off { color:var(--off); border-color:rgba(107,122,137,.4); }
.results-note { font-size:13px; color:var(--warn); background:rgba(227,163,59,.08); border-bottom:1px solid var(--line); padding:9px 13px; }
.search .empty { font-size:14px; color:var(--muted); padding:22px 13px; }
.search .empty.bad { color:var(--bad); }

/* week 10: the clip lane - REC while a camera is being recorded, and a clip-lane fault beside the state */
.tag.rec { color: #ff5d5d; border-color: #5a2323; background: #2a1414; }
.tag.bad { color: #ffb15d; border-color: #5a4323; }

/* week 10: the Recordings page - one block per recording, and the player overlay */
.crop .nopic { display:flex; flex-direction:column; align-items:center; justify-content:center; height:210px; color:var(--muted); font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.crop .nopic span { text-transform:none; letter-spacing:0; font-size:11px; }
.empty.small { padding:18px; }
.player { position:fixed; inset:0; background:rgba(4,8,12,.82); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; }
.player-box { width:min(1100px, 100%); max-height:100%; overflow:auto; border:1px solid var(--line3); border-radius:12px; background:var(--panel2); }
.player-head { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line); }
.player-head .info { flex:1; }
.player-body { background:#000; }
.player-body video { display:block; width:100%; max-height:62vh; background:#000; }
.player-controls { display:flex; align-items:center; gap:12px; padding:8px 12px; background:var(--panel2); border-top:1px solid var(--line); }
.player-controls .btn { width:38px; justify-content:center; padding:6px 0; font-size:13px; }
.player-controls input[type=range] { flex:1; accent-color:var(--accent); cursor:pointer; }
.player-controls .info { font-family:var(--mono); font-size:12px; color:var(--text3); white-space:nowrap; }
.player-body video { cursor:pointer; }

.crop figcaption .tag.rec { align-self:flex-start; margin-top:3px; }
.crop figcaption .t.inview { color:#ff5c5c; font-weight:700; }   /* an open subject: easy to spot (owner, 16 Sep 2026) */
/* week 10 step 7: the search page's tabs (People / Vehicles), plain words, the open one underlined */
.tabs { display:inline-flex; gap:4px; margin-left:12px; }
.tabs .tab { font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); background:transparent; border:1px solid var(--line3); border-radius:6px; padding:5px 10px; cursor:pointer; }
.tabs .tab:hover { color:var(--text2); border-color:var(--line4); }
.tabs .tab.on { color:var(--text); border-color:var(--accent-line); box-shadow:inset 0 -2px 0 var(--accent); }
.player-head .now { flex:0 0 auto; font-family:var(--mono); color:#ff5c5c; font-weight:700; letter-spacing:.04em; }

/* ---- Face search (weeks 17-18): a photo on the left, one list per face on the right ---- */
.fs-upload { padding:13px; display:flex; flex-direction:column; gap:12px; }
.fs-drop { display:flex; align-items:center; justify-content:center; min-height:90px; border:1.5px dashed var(--line4); border-radius:8px; color:var(--text3); font-size:14px; text-align:center; padding:12px; cursor:pointer; }
.fs-drop.over, .fs-drop:hover { border-color:var(--accent-line); color:var(--text2); }
.fs-drop input { display:none; }
.fs-preview canvas { display:block; max-width:100%; border-radius:6px; border:1px solid var(--line3); }
.fs-filters { justify-content:flex-start; }
.fs-status { font-size:13px; color:var(--text3); min-height:18px; }
.fs-status.bad { color:var(--bad); }
.fs-face { border-bottom:1px solid var(--line); padding-bottom:10px; }
.fs-face-head { display:flex; align-items:center; gap:12px; padding:13px 13px 0; }
.fs-face-head img { width:64px; border-radius:6px; border:1px solid var(--accent-line); }
.fs-face-title { font-family:var(--mono); font-size:14px; color:var(--accent2); letter-spacing:.06em; }
.fs-face-facts { font-size:13px; color:var(--text3); }
.fs-more { margin:0 13px; }
.fs-nopic { height:210px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; }
.fs-tabs { display:flex; gap:8px; flex-wrap:wrap; padding:12px 13px 0; }
.fs-tab { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px; color:var(--text3); background:var(--input); border:1px solid var(--line4); border-radius:7px; padding:5px 10px 5px 5px; cursor:pointer; }
.fs-tab img { width:30px; height:30px; object-fit:cover; border-radius:4px; }
.fs-tab.on { color:var(--accent2); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
#fs-canvas { cursor:pointer; }

/* ---- Playback (weeks 23-24): choose cameras, a grid on one clock, a scroller under it ---- */
.playback { padding:18px; }
.pb-bar { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.pb-cams { display:flex; flex-wrap:wrap; gap:8px; }
.pb-cam { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--text2); background:var(--panel2); border:1px solid var(--line3); border-radius:7px; padding:6px 10px; cursor:pointer; }
.pb-cam.off { opacity:.45; cursor:not-allowed; }
.pb-cam .cnum { font-family:var(--mono); color:var(--accent2); }
.pb-when { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pb-count { font-family:var(--mono); font-size:13px; color:var(--text3); }
.pb-grid { display:grid; gap:6px; }
.pb-grid.g1 { grid-template-columns:1fr; }
.pb-grid.g2 { grid-template-columns:1fr 1fr; }
.pb-grid.g4 { grid-template-columns:1fr 1fr; }
.pb-grid.g6 { grid-template-columns:1fr 1fr 1fr; }
.pb-grid.g9 { grid-template-columns:1fr 1fr 1fr; }
.pb-grid.one-big { grid-template-columns:1fr; }
.pb-grid.one-big .pb-panel:not(.big) { display:none; }
.pb-panel { position:relative; background:#05080b; border:1px solid var(--line3); border-radius:8px; overflow:hidden; aspect-ratio:16/9; }
.pb-panel video, .pb-panel .pb-freeze { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#05080b; }
.pb-tag, .pb-time { position:absolute; font-family:var(--mono); font-size:12px; color:var(--text2); background:rgba(6,10,14,.72); border-radius:4px; padding:2px 7px; }
.pb-tag { left:8px; top:8px; }
.pb-tag .cnum { color:var(--accent2); }
.pb-time { right:8px; top:8px; }
.pb-note { position:absolute; left:0; right:0; bottom:10px; text-align:center; font-size:13px; color:var(--warn); }
.pb-controls { display:flex; flex-direction:column; gap:10px; margin-top:12px; padding:12px; border:1px solid var(--line3); border-radius:10px; background:var(--panel2); }
.pb-clock { font-family:var(--mono); font-size:18px; color:var(--text); text-align:center; }
#pb-scroll { width:100%; accent-color:var(--accent); }
.pb-buttons { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.pb-status { text-align:center; font-size:13px; color:var(--warn); min-height:16px; }
/* the scroller's track: recorded stretches coloured (painted by playback.js into --pb-bands) */
#pb-scroll { -webkit-appearance:none; appearance:none; height:14px; border-radius:4px; background:var(--pb-bands, var(--line3)); }
#pb-scroll::-webkit-slider-thumb { -webkit-appearance:none; width:6px; height:22px; border-radius:2px; background:var(--text); cursor:pointer; }
#pb-scroll::-moz-range-thumb { width:6px; height:22px; border-radius:2px; background:var(--text); border:none; cursor:pointer; }
.pb-hours { display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--text3); margin-top:-4px; }
/* Playback search (part b): the chosen one on the left, "Play" on every match */
.ts-query { padding:13px; }
.ts-query .crop { max-width:220px; }
.ts-filters { padding:0 13px; }
#ts-status { padding:0 13px 12px; }
.ts-play { position:absolute; left:6px; top:6px; font-size:12px; font-family:var(--mono); color:var(--text); background:rgba(6,10,14,.78); border:1px solid var(--accent-line); border-radius:5px; padding:2px 7px; text-decoration:none; }
.ts-play:hover { border-color:var(--accent); color:var(--accent2); }
/* Playback part b: the grid on the left, who is in view on the right */
.pb-main { display:flex; gap:12px; align-items:flex-start; }
.pb-left { flex:1; min-width:0; }
.pb-side { width:300px; flex:none; border:1px solid var(--line3); border-radius:10px; background:var(--panel2); max-height:calc(100vh - 140px); overflow:auto; position:sticky; top:12px; }
.pb-side-head { font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--text3); text-transform:uppercase; padding:10px 12px; border-bottom:1px solid var(--line); }
.pb-side-cam { border-bottom:1px solid var(--line); padding:8px 10px; }
.pb-side-title { font-size:13px; color:var(--text2); display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.pb-side-title .cnum { font-family:var(--mono); color:var(--accent2); }
.pb-side-n { margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--text3); }
.pb-side-none { font-size:12px; color:var(--muted); padding:2px 0 4px; }
.pb-side-foot { font-size:11px; color:var(--muted); padding:8px 12px; }
.pb-item { display:flex; gap:8px; padding:6px 0; }
.pb-item img, .pb-item-nopic { width:56px; height:72px; object-fit:contain; background:#0b1219; border:1px solid var(--line3); border-radius:5px; flex:none; }
.pb-item-txt { display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--text3); min-width:0; }
.pb-item-txt b { color:var(--text); font-weight:600; }
.pb-item-id { font-family:var(--mono); color:var(--muted); }
.pb-item-btns { display:flex; gap:5px; flex-wrap:wrap; margin-top:3px; }
.pb-item-btns .btn { font-size:12px; padding:3px 8px; }
@media (max-width: 900px) { .pb-main { flex-direction:column; } .pb-side { width:100%; position:static; max-height:none; } }
.pb-cutoff { text-align:center; font-size:12px; color:var(--text3); }
/* weeks 23-24 part c: the red count on "Alerts", the Watch box, the Alerts page */
.nav .item .alert-count { font-family:var(--mono); font-size:12px; color:#fff; background:var(--bad); border-radius:9px; padding:0 7px; min-width:18px; text-align:center; }
.pb-modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:50; }
.pb-modal-box { width:min(420px, calc(100vw - 32px)); background:var(--panel2); border:1px solid var(--line3); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.pb-modal-box h3 { margin:0; font-size:16px; color:var(--text); }
.pb-modal-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; color:var(--text2); }
.pb-modal-row label { display:inline-flex; align-items:center; gap:5px; }
.pb-modal-row input[type=number] { width:80px; }
.pb-modal-pic { display:flex; gap:10px; align-items:center; font-size:13px; color:var(--text3); }
.pb-modal-pic img { width:64px; height:84px; object-fit:contain; background:#0b1219; border:1px solid var(--line3); border-radius:5px; }
.pb-modal-msg { font-size:13px; min-height:18px; color:var(--text3); }
.pb-modal-msg.bad { color:var(--bad); }
.pb-modal-btns { display:flex; justify-content:flex-end; gap:8px; }
.al-watches { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; padding:13px; }
.al-watch { display:flex; gap:10px; border:1px solid var(--line3); border-radius:8px; padding:8px; background:var(--panel2); }
.al-watch.ended { opacity:.55; }
.al-watch img, .al-nopic { width:64px; height:84px; object-fit:contain; background:#0b1219; border:1px solid var(--line3); border-radius:5px; flex:none; }
.al-watch-txt { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--text3); min-width:0; flex:1; }
.al-watch-txt b { color:var(--text); font-size:13px; }
.al-watch-txt .left { font-family:var(--mono); color:var(--accent2); }
.al-hits .crop.new { box-shadow:0 0 0 2px var(--bad); }
/* the watch's own picture, small, in the corner of each alert (".crop img" must not stretch it) */
.crop img.al-watchpic { position:absolute; right:6px; top:34px; width:38px; height:50px; object-fit:contain; background:#0b1219; border:1px solid var(--accent-line); border-radius:4px; }
.al-sound { font-size:12px; color:var(--text3); display:inline-flex; gap:6px; align-items:center; }
/* weeks 29-32: the plate on the Playback list, and the Plate search page */
.pb-plate { font-family:var(--mono); font-size:12px; color:var(--text); background:#1a2330; border:1px solid var(--accent-line); border-radius:4px; padding:0 6px; align-self:flex-start; }
.ps-bar { justify-content:flex-start; flex-wrap:wrap; gap:8px; }
.ps-plate { font-family:var(--mono); font-size:16px; letter-spacing:.08em; text-transform:uppercase; width:170px; }
#ps-status { padding:8px 13px 0; }
.ps-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; padding:13px; }
.ps-card { border:1px solid var(--line3); border-radius:8px; overflow:hidden; background:#0b1219; display:flex; flex-direction:column; }
.ps-plate-pic { height:70px; display:flex; align-items:center; justify-content:center; background:#05080b; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; }
.ps-plate-pic img { max-height:66px; max-width:100%; object-fit:contain; }
.ps-head { display:flex; align-items:center; gap:8px; padding:7px 9px; }
.ps-head .conf { font-family:var(--mono); font-size:12px; font-weight:600; border-radius:4px; padding:2px 6px; border:1px solid; }
.ps-head .conf.ok { color:var(--ok); border-color:rgba(63,191,106,.4); }
.ps-head .conf.warn { color:var(--warn); border-color:rgba(227,163,59,.4); }
.ps-head .conf.off { color:var(--off); border-color:rgba(107,122,137,.4); }
.ps-text { font-family:var(--mono); font-size:16px; color:var(--text); letter-spacing:.06em; }
.ps-match { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--text3); border:1px solid var(--line4); border-radius:4px; padding:0 5px; }
.ps-match.exact { color:var(--accent2); border-color:var(--accent-line); }
.ps-car { position:relative; }
.ps-car img { display:block; width:100%; height:170px; object-fit:contain; background:#0b1219; }
.ps-facts { font-family:var(--mono); font-size:11px; color:var(--text3); padding:6px 9px 8px; display:flex; flex-direction:column; gap:2px; }
.ps-facts .cnum { color:var(--accent2); }
.wk-plate { font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; width:130px; }
.pb-modal-row .hint { font-size:12px; color:var(--text3); }
.al-x { position:absolute; right:6px; bottom:64px; width:24px; height:24px; border-radius:5px; border:1px solid var(--line4); background:rgba(6,10,14,.78); color:var(--text3); cursor:pointer; font-size:12px; line-height:1; }
.al-x:hover { color:var(--bad); border-color:var(--bad); }
/* ▶ Clip: our own saved clip, played in a box on the same page (owner, 24 Sep 2026) */
.ts-clip { position:absolute; left:6px; top:36px; font-size:12px; font-family:var(--mono); color:var(--text); background:rgba(6,10,14,.78); border:1px solid var(--line4); border-radius:5px; padding:2px 7px; cursor:pointer; }
.ts-clip:hover { border-color:var(--accent); color:var(--accent2); }
.clip-box { width:min(960px, calc(100vw - 32px)); }
.clip-video { width:100%; max-height:70vh; background:#000; border-radius:6px; }
.clip-note { font-size:13px; color:var(--text3); min-height:18px; }
.clip-note.bad { color:var(--bad); }
/* the Watch list's Add box: by plate, by face photo (owner, 24 Sep 2026) */
.wl-add { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px; padding:13px; }
.wl-form { display:flex; flex-direction:column; gap:9px; border:1px solid var(--line3); border-radius:8px; padding:12px; background:var(--panel2); }
.wl-title { font-size:14px; color:var(--text); font-weight:600; }
.wl-title .hint { font-weight:400; font-size:12px; color:var(--text3); }
.wl-drop { min-height:56px; }
.wl-preview canvas { display:block; max-width:100%; max-height:300px; border-radius:6px; border:1px solid var(--line3); cursor:pointer; }
.wl-form .wk-plate { width:100%; font-size:18px; }
/* a picture whose file is gone (common.js): its space kept, no broken-picture icon */
img.img-missing { visibility:hidden; }
/* Face search - DEEP SEARCH (owner, 25 Sep 2026): picking mode, the picks, NEW, the scanning moment */
#fs-results { position:relative; }
.fs-tools { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.crop.selectable img { transition:filter .15s; }
.crop.selectable:not(.picked) img { filter:brightness(.72); }
.crop.selectable:hover img { filter:none; }
.crop.picked { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent), 0 0 18px rgba(63,214,207,.35); }
.crop .fs-check { position:absolute; right:8px; top:176px; width:26px; height:26px; border-radius:50%; border:2px solid #fff; background:rgba(6,10,14,.55); display:flex; align-items:center; justify-content:center; font:700 13px var(--mono); color:var(--accent-dark); pointer-events:none; }
.crop.picked .fs-check { background:var(--accent); border-color:var(--accent); box-shadow:0 0 10px var(--accent); }
.crop .fs-badge { position:absolute; right:6px; top:34px; font:600 11px var(--mono); letter-spacing:.05em; border-radius:4px; padding:2px 6px; text-transform:uppercase; }
.crop .fs-badge.pick { color:var(--accent-dark); background:var(--accent); }
.crop .fs-badge.new { color:#1b1204; background:linear-gradient(90deg, #ffd36b, #ffb347); box-shadow:0 0 10px rgba(255,190,80,.45); }
.crop.your-pick { border-color:var(--accent-line); background:linear-gradient(180deg, rgba(63,214,207,.10), #0b1219 40%); }
.crop figcaption .fs-near { color:var(--accent2); font-size:10px; }
.fs-deep-banner { margin:12px 13px 0; padding:9px 12px; border-radius:8px; font-size:13px; color:var(--text2); border:1px solid var(--accent-line); background:linear-gradient(90deg, rgba(63,214,207,.14), rgba(139,120,255,.10) 60%, rgba(63,214,207,.04)); }
.fs-deep-banner b { color:var(--accent2); }
.fs-deep-banner .fs-found { color:#ffd36b; font-weight:600; }
.fs-selbar { position:sticky; bottom:0; z-index:5; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 13px; border-top:1px solid var(--accent-line); background:rgba(10,16,22,.96); backdrop-filter:blur(4px); font-size:14px; color:var(--text2); }
.fs-selbar b { color:var(--accent2); font-family:var(--mono); font-size:16px; }
.fs-selbar .fs-cancel { margin-left:auto; }
.fs-selmsg { font-size:13px; }
.fs-selmsg.bad { color:var(--bad); }
.fs-deep-overlay { position:absolute; inset:0; z-index:10; display:flex; align-items:flex-start; justify-content:center; padding-top:70px; background:rgba(6,10,14,.82); backdrop-filter:blur(3px); animation:fsFade .25s ease-out; }
.fs-deep-box { text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.fs-deep-title { font:600 20px var(--mono); color:var(--accent2); letter-spacing:.04em; }
.fs-deep-text { font-size:14px; color:var(--text3); }
.fs-deep-thumbs { display:flex; gap:6px; margin-top:6px; }
.fs-deep-thumbs img { width:38px; height:52px; object-fit:cover; border-radius:5px; border:1px solid var(--accent); animation:fsPulse 1.2s ease-in-out infinite; }
.fs-deep-thumbs img:nth-child(2n) { animation-delay:.3s; }
.fs-deep-thumbs img:nth-child(3n) { animation-delay:.6s; }
.fs-orbit { position:relative; width:74px; height:74px; }
.fs-orbit span { position:absolute; inset:0; border-radius:50%; border:2px solid transparent; border-top-color:var(--accent); animation:fsSpin 1s linear infinite; }
.fs-orbit span:nth-child(2) { inset:10px; border-top-color:#8b78ff; animation-duration:1.4s; animation-direction:reverse; }
.fs-orbit span:nth-child(3) { inset:21px; border-top-color:#ffd36b; animation-duration:.8s; }
@keyframes fsSpin { to { transform:rotate(360deg); } }
@keyframes fsPulse { 0%,100% { opacity:.55; transform:scale(.94); } 50% { opacity:1; transform:scale(1.04); } }
@keyframes fsFade { from { opacity:0; } to { opacity:1; } }
/* date / time boxes (owner, 25 Sep 2026): the browser's own icons and pickers drawn for a DARK page - they were
   black on black, so the time box looked like it had no picker. Clicking the box opens it (common.js). */
input[type=date], input[type=time], input[type=datetime-local] { color-scheme:dark; cursor:pointer; }
/* deep face search (owner, 25 Sep 2026): Select shows a box on every picture, a click anywhere selects it */
.fs-deeper-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:8px 0 12px; padding:8px 10px; border:1px solid var(--line3); border-radius:8px; background:rgba(11,18,25,.6); }
.fs-bar-left { font-size:13px; color:var(--text3); }
.fs-bar-left b { color:var(--text2); font-weight:600; }
.fs-bar-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.fs-tick-count { font-family:var(--mono); font-size:12px; color:var(--text2); padding:3px 8px; border:1px solid var(--line3); border-radius:12px; }
.fs-tick-count.at-limit { color:var(--warn); border-color:rgba(227,163,59,.45); }
.fs-tick-count.flash { animation:fs-shake .35s; color:var(--bad); border-color:rgba(240,98,95,.5); }
@keyframes fs-shake { 20%, 60% { transform:translateX(-3px); } 40%, 80% { transform:translateX(3px); } }
.fs-select.on { color:var(--accent); border-color:var(--accent); }
.fs-check { display:none; position:absolute; top:180px; right:8px; width:22px; height:22px; border:2px solid rgba(230,238,245,.85); border-radius:6px; background:rgba(6,10,14,.55); box-shadow:0 1px 3px rgba(0,0,0,.5); }
.fs-selecting .fs-check { display:block; }
.fs-selecting .crop { cursor:pointer; user-select:none; }
.fs-selecting .crop:hover { border-color:var(--accent-line); }
.crop.fs-picked { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.crop.fs-picked .fs-check { background:var(--accent); border-color:var(--accent); }
.crop.fs-picked .fs-check::after { content:""; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid #04252a; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
/* the "Searched with" panel: the pictures a deep search used, out of the results grid - easy to find
   (owner, 25 Sep 2026): an accent edge, larger words, and the pictures themselves visible even folded */
.fs-used { margin:0 0 14px; border:1px solid var(--accent-line); border-left:4px solid var(--accent); border-radius:10px; background:linear-gradient(90deg, rgba(63,214,207,.09), rgba(11,18,25,.7) 60%); overflow:hidden; }
.fs-used-head { display:flex; align-items:center; gap:16px; padding:12px 14px; }
.fs-used-words { display:flex; flex-direction:column; gap:3px; min-width:170px; }
.fs-used-title { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.fs-used-sum { font-size:15px; color:var(--text); }
.fs-used-sum b { color:var(--accent); }
.fs-used-peek { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.fs-used-peek img { width:40px; height:54px; object-fit:cover; border-radius:5px; border:1px solid var(--line3); background:#0b1219; }
.fs-used-peek img.you { border:2px solid var(--accent); }
.fs-used-plus { font-family:var(--mono); font-size:12px; color:var(--text2); padding:0 4px; }
.fs-used-toggle { margin-left:auto; }
.fs-used-toggle::after { content:" \25BE"; }
.fs-used.open .fs-used-toggle::after { content:" \25B4"; }
.fs-used-list { display:none; flex-wrap:wrap; gap:8px; padding:10px 12px 12px; border-top:1px solid var(--line3); }
.fs-used.open .fs-used-list { display:flex; }
.fs-used-item { position:relative; width:78px; display:flex; flex-direction:column; gap:3px; }
.fs-used-item img, .fs-used-item .fs-nopic { width:78px; height:104px; object-fit:contain; background:#0b1219; border:1px solid var(--line3); border-radius:6px; }
.fs-used-item.you img { border-color:var(--accent); }
.fs-used-item span { font-family:var(--mono); font-size:9.5px; line-height:1.25; color:var(--text3); }
.fs-used-x { position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; border:1px solid var(--line3); background:rgba(6,10,14,.85); color:var(--text2); font-size:13px; line-height:15px; padding:0; cursor:pointer; }
.fs-used-x:hover { color:var(--bad); border-color:var(--bad); }
.fs-new { position:absolute; top:32px; right:6px; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.06em; color:#0b1219; background:var(--accent); border-radius:4px; padding:1px 5px; }
.fs-new .fs-was { font-weight:600; opacity:.8; }
/* a face result that is one person's several pieces joined (routes/face_visits.py) */
.fs-pieces { position:absolute; top:182px; left:6px; font-family:var(--mono); font-size:10px; color:var(--text2); background:rgba(6,10,14,.8); border:1px solid var(--line3); border-radius:4px; padding:1px 6px; }
/* the sign-in page (weeks 27-28): centred, the site's own look */
.signin-body { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg, #05080c); margin:0; padding:32px 16px; box-sizing:border-box; }
/* the standalone account pages (weeks 27-28; made bigger 26 Sep 2026 - owner: "boxes, text bigger"):
   Sign in, Owner sign-in, My account */
.signin { width:min(480px, 100%); display:flex; flex-direction:column; gap:22px; }
.signin-brand { display:flex; flex-direction:column; align-items:center; gap:8px; }
.signin-logo { height:52px; width:auto; display:block; }   /* the owner's logo (27 Sep 2026) */
.signin-mark { width:52px; height:52px; border-radius:12px; border:1px solid var(--accent-line); background:#101922; color:var(--accent); font-family:var(--mono); font-weight:700; font-size:26px; display:flex; align-items:center; justify-content:center; }
.signin-name { font-family:var(--mono); font-size:26px; letter-spacing:.3em; color:var(--text); }
.signin-sub { font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--text3); margin-top:2px; }
.signin-box { display:flex; flex-direction:column; gap:16px; padding:30px 32px; border:1px solid var(--line3); border-radius:14px; background:var(--panel2); }
.signin-box h1 { margin:0 0 2px; font-size:24px; color:var(--text); }
.signin-box h2 { margin:0; font-size:19px; color:var(--text); }
.signin-box label { display:flex; flex-direction:column; gap:7px; font-size:15px; color:var(--text2); }
.signin-box .sel { width:100%; box-sizing:border-box; padding:12px 14px; font-size:16px; border-radius:8px; }
.signin-box .btn { width:100%; padding:13px; font-size:16px; border-radius:8px; }
.signin-msg { min-height:20px; font-size:15px; color:var(--bad); }
.signin-ok { min-height:20px; font-size:15px; color:var(--ok); }
.signin-note { margin:0; font-size:15px; line-height:1.55; color:var(--text2); }
.signin-hint { font-size:14px; color:var(--text3); }
.signin-back { font-size:15px; color:var(--text2); text-align:center; }
.user .user-role { font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--text3); border:1px solid var(--line3); border-radius:4px; padding:1px 5px; }
.user .btn.small { margin-left:4px; }
/* OWNER-START - the Users page and the owner's sign-in page (removed from a client build) */
/* the Users page (weeks 27-28 Step 4) */
.users-form { display:flex; align-items:flex-end; flex-wrap:wrap; gap:14px; padding:16px 18px; }
.users-form label { display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--text2); }
.users-form .sel { padding:10px 12px; font-size:15px; min-width:220px; }
.users-form .btn { padding:10px 18px; font-size:15px; }
.users-msg { font-size:14px; color:var(--text2); }
.users-page tr.off td { opacity:.55; }
.users-page #u-limit { margin-left:10px; align-self:center; }
/* the owner sign-in page (weeks 27-28 Step 5): the code on its own full-width line, Copy under it */
.signin.owner { width:min(600px, 100%); }
.owner-code { display:flex; flex-direction:column; align-items:center; gap:12px; padding:18px 16px; border:1px solid var(--accent-line); border-radius:10px; background:#0b1219; }
.owner-code code { font-family:var(--mono); font-size:22px; line-height:1.6; letter-spacing:.08em; color:var(--accent); text-align:center; overflow-wrap:anywhere; user-select:all; }
.signin-box .owner-code .btn { width:auto; padding:8px 26px; font-size:15px; }
.owner-answer { width:100%; box-sizing:border-box; font-family:var(--mono); font-size:15px; line-height:1.5; resize:vertical; }
.owner-steps { padding-left:22px; }
.owner-steps li { margin:2px 0; }
.owner-new { font-size:15px; color:var(--text3); text-align:center; }
/* OWNER-END */
/* My account (weeks 27-28; redone 26 Sep 2026 - owner: "this screen is so bad"): a normal page, two cards */
.account-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:20px; max-width:1000px; }
.account-card { display:flex; flex-direction:column; }
.account-card-head { padding:18px 22px 14px; border-bottom:1px solid var(--line); }
.account-card-head h2 { margin:0 0 6px; font-size:19px; color:var(--text); }
.account-card-head p { margin:0; font-size:14px; color:var(--text3); line-height:1.5; }
.account-card-body { display:flex; flex-direction:column; gap:16px; padding:20px 22px; flex:1; }
.account-card-body label { display:flex; flex-direction:column; gap:7px; font-size:14px; color:var(--text2); }
.account-card-body .sel { width:100%; box-sizing:border-box; padding:11px 13px; font-size:15px; border-radius:8px; }
.account-card-foot { display:flex; align-items:center; justify-content:flex-end; gap:14px; padding:14px 22px;
  border-top:1px solid var(--line); background:rgba(255,255,255,.015); }
.account-card-foot .btn { padding:10px 20px; font-size:15px; }
.account-msg { flex:1; font-size:14px; color:var(--text3); }
.account-msg.ok { color:var(--ok); }
.account-msg.bad { color:var(--bad); }

/* weeks 39-40 Step 7: the licence ends within 5 days - a red bar on every page (templates/base.html) */
.licence-ends { display:flex; align-items:center; gap:12px; background:rgba(240,98,95,.12); border:1px solid rgba(240,98,95,.45);
  border-radius:10px; padding:12px 16px; margin-bottom:18px; }
.licence-ends b { font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:#1a0a0a; background:var(--bad); border-radius:4px; padding:3px 7px; }
.licence-ends span { font-size:16px; color:#f7c7c5; }

/* weeks 39-40 Step 8: the Licence page (templates/licence.html) and the sidebar footer that opens it */
a.foot { color:inherit; text-decoration:none; }
a.foot:hover { background:#141c25; }
.licence-bought { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px; padding:14px 16px; }
.licence-feature { display:flex; flex-direction:column; gap:6px; padding:12px 14px; border:1px solid var(--line3); border-radius:10px; opacity:.6; }
.licence-feature.on { opacity:1; border-color:var(--accent-line); }
.licence-feature b { font-size:16px; color:#f2f7fa; }
.licence-feature .dim { font-size:13px; color:var(--muted); }
.licence-feature .pill { align-self:flex-start; }
.stat-card .n.licence-date { font-size:26px; }
.stat-card .n.licence-date.bad { color:var(--bad); }