:root{
  --bg:#eaead8;--surface:#f7f7ec;--surface2:#efeedd;--line:#d3d1bf;--line2:#c9c7b4;
  --text:#14110f;--muted:#4d4a40;--accent:#f37321;--accent-ink:#9a4510;--on-accent:#14110f;
  --ok-bg:#d6eedd;--ok:#16603b;--warn-bg:#f6e3c4;--warn:#6e4205;--bad-bg:#f7d9d3;--bad:#8f2416;
  --info-bg:#dbe6f3;--info:#1f4e8c;--bar:#8fa9c7;--chrome:#14110f;--chrome-text:#eaead8;
  color-scheme:light;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#14110f;--surface:#221e1b;--surface2:#1c1815;--line:#332d28;--line2:#4a423b;
  --text:#eaead8;--muted:#b8b6a6;--accent:#f37321;--accent-ink:#f59a5c;--on-accent:#14110f;
  --ok-bg:#1d3a2c;--ok:#86e3b4;--warn-bg:#3d321a;--warn:#f2c25a;--bad-bg:#3a1d18;--bad:#ff9f8f;
  --info-bg:#1e2c3d;--info:#9cc3ef;--bar:#4f6f94;--chrome:#0c0a09;--chrome-text:#eaead8;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#14110f;--surface:#221e1b;--surface2:#1c1815;--line:#332d28;--line2:#4a423b;
  --text:#eaead8;--muted:#b8b6a6;--accent:#f37321;--accent-ink:#f59a5c;--on-accent:#14110f;
  --ok-bg:#1d3a2c;--ok:#86e3b4;--warn-bg:#3d321a;--warn:#f2c25a;--bad-bg:#3a1d18;--bad:#ff9f8f;
  --info-bg:#1e2c3d;--info:#9cc3ef;--bar:#4f6f94;--chrome:#0c0a09;--chrome-text:#eaead8;color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 Barlow,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--chrome)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{margin:0;line-height:1.2}
.brand{font-family:"Barlow Condensed",Arial,sans-serif;font-weight:700;letter-spacing:.04em}
.brand b{color:var(--accent)}
.num{font-family:"Barlow Condensed",Arial,sans-serif;font-weight:700;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}.small{font-size:13px}
/* app shell */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.top .brand{font-size:22px}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs button{background:transparent;border:0;border-radius:10px;min-height:44px;padding:0 12px;font-weight:600;color:var(--muted);cursor:pointer}
.tabs button[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
.wrap{max-width:1280px;margin:0 auto;padding:16px}
.narrow{max-width:560px;margin:0 auto;padding:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--line2);background:transparent;font-weight:600;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.btn.dark{background:var(--text);border-color:var(--text);color:var(--bg)}
.btn.big{min-height:56px;font-size:18px;width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{min-height:36px;padding:0 10px;font-size:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.pad{padding:14px 16px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.p-ok{background:var(--ok-bg);color:var(--ok)}.p-warn{background:var(--warn-bg);color:var(--warn)}.p-bad{background:var(--bad-bg);color:var(--bad)}.p-info{background:var(--info-bg);color:var(--info)}.p-mute{background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
label.f{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
input[type=text],input[type=search],input[type=password],input[type=number],select,textarea{min-height:46px;border-radius:10px;border:1px solid var(--line2);background:var(--surface);padding:0 12px;font-size:16px;width:100%}
textarea{padding:10px 12px;min-height:160px;font-size:13px}
input[type=checkbox]{width:20px;height:20px;accent-color:#f37321}
.list{border:1px solid var(--line);border-radius:12px;overflow:hidden;max-height:300px;overflow-y:auto;background:var(--surface)}
.opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:52px;padding:8px 14px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer}
.opt[aria-pressed="true"],.opt.sel{background:var(--warn-bg)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);font-weight:600;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.timer{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.timer .el{font-size:28px}
.sect{font-size:14px;font-weight:700;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:13px;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.tbl{overflow-x:auto}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi .v{font-size:40px;line-height:1.05}
.cols{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.cols>.main{flex:999 1 560px;min-width:0}.cols>.side{flex:1 1 300px;min-width:0}
.rng{position:relative;height:26px;background:var(--surface2);border-radius:6px;flex:1;min-width:120px}
.rng .b{position:absolute;top:8px;height:10px;border-radius:5px;background:var(--bar)}
.rng .d{position:absolute;top:4px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--info);border:2px solid var(--surface)}
.hbar{height:8px;border-radius:4px;background:var(--surface2)}.hbar>i{display:block;height:8px;border-radius:4px;background:var(--accent)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:16px}
.sheet{background:var(--surface);border-radius:18px;max-width:560px;width:100%;padding:18px;display:flex;flex-direction:column;gap:12px;max-height:90vh;overflow:auto}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cam{align-self:flex-start;cursor:pointer}
.phpair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ph{margin:0;display:flex;flex-direction:column;gap:4px}
.ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;cursor:zoom-in;background:var(--line);display:block}
.ph.none div{aspect-ratio:4/3;border:1px dashed var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;text-align:center;padding:8px}
.ph figcaption{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.thumb{width:72px;height:54px;object-fit:cover;border-radius:8px;cursor:zoom-in;flex:none}
.phprev{width:100%;max-width:280px;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.rwgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.note{background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:10px 12px;font-size:14px}
.side-nav{display:flex;flex-direction:column;gap:4px}
.side-nav button{text-align:left;background:transparent;border:0;border-radius:10px;min-height:44px;padding:0 12px;font-weight:600;color:var(--muted);cursor:pointer}
.side-nav button[aria-current="page"]{background:var(--text);color:var(--bg)}
.switch{width:46px;height:26px;border-radius:13px;border:0;padding:3px;display:inline-flex;cursor:pointer;background:var(--line2)}
.switch>span{width:20px;height:20px;border-radius:50%;background:#fff}
.switch[aria-checked="true"]{background:#1f7a4d;justify-content:flex-end}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;z-index:60;font-weight:600}

.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;align-items:start}
.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
body.m .sgrid,body.m .tgrid{grid-template-columns:minmax(0,1fr)}
body.m main{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
body.m.forced #app{max-width:430px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line);min-height:100vh}
body.m.forced{--appw:430px}
.clockd>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;min-height:36px}
.clockd>summary::-webkit-details-marker{display:none}
.shiftchip{font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--info-bg);color:var(--info)}
.hchips{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.hchips button{white-space:nowrap}
@media (max-width:600px){.hide-sm{display:none}.top .brand{font-size:20px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* v1 additions */
.banner{background:var(--warn-bg);color:var(--warn);padding:8px 16px;font-size:14px;font-weight:600;text-align:center}
.banner.bad{background:var(--bad-bg);color:var(--bad)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;z-index:60;max-width:90vw}
body.m .wrap{padding:12px}
body.m .desk{display:none}
body:not(.m) .mob{display:none}
.chrome{background:var(--chrome);color:var(--chrome-text);border-bottom:2px solid var(--accent)}
.chrome .tabs button{color:#b8b6a6}
.chrome .tabs button[aria-current="page"]{color:var(--on-accent)}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.err{color:var(--bad);font-weight:600;font-size:14px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px}

/* phones: menu at the top, sticky, scrolls sideways */
.chrome{padding-top:env(safe-area-inset-top,0px)}
body.m .chrome{position:sticky;top:0;z-index:30}
body.m .top{display:grid;grid-template-columns:1fr auto;gap:6px 8px;padding:8px 12px;border-bottom:0}
body.m .top>.brand{grid-row:1;grid-column:1;font-size:20px}
body.m .top>.who{grid-row:1;grid-column:2}
body.m .top>.tabs{grid-row:2;grid-column:1/-1;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -12px;padding:0 12px 4px}
body.m .top>.tabs::-webkit-scrollbar{display:none}
body.m .tabs button{flex:none;white-space:nowrap;min-height:40px}
body.m .uname{display:none}
/* phones: admin sections as a sideways strip above the content */
body.m .cols{display:block}
body.m .side-nav{flex-direction:row;overflow-x:auto;flex-wrap:nowrap;gap:6px;margin:0 -12px 12px;padding:0 12px 4px;scrollbar-width:none}
body.m .side-nav::-webkit-scrollbar{display:none}
body.m .side-nav button{flex:none;white-space:nowrap;border:1px solid var(--line);min-height:40px}
/* phones: every table row becomes a card */
body.m .tbl{overflow:visible}
body.m .tbl thead{display:none}
body.m .tbl table,body.m .tbl tbody,body.m .tbl tr,body.m .tbl td{display:block;width:100%;box-sizing:border-box}
body.m .tbl tr{padding:10px 14px;border-bottom:1px solid var(--line)}
body.m .tbl tr:last-child{border-bottom:0}
body.m .tbl td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 0;border:0;text-align:right;min-height:0}
body.m .tbl td::before{content:attr(data-label);font-size:13px;font-weight:600;color:var(--muted);text-align:left;flex:none}
body.m .tbl td[data-label=""]::before,body.m .tbl td:not([data-label])::before{content:none}
body.m .tbl td:first-child{font-size:16px}
body.m .tbl td select,body.m .tbl td input[type=text]{max-width:60%}
/* phones: forms in one column, full-width buttons in dialogs */
body.m .grid2{grid-template-columns:minmax(0,1fr)}
body.m .sheet{max-height:85vh;padding:16px}
body.m .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
body.m h1{font-size:24px}
body.m .spread,body.m .row{flex-wrap:wrap}

.brand .ver{font-family:Barlow,Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0;color:#9a978a;margin-left:8px;vertical-align:middle}

/* footer stays at the bottom on short pages, follows the content on long ones */
#app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
#app>main{flex:1 0 auto;width:100%}
.appfoot{flex:none;text-align:center;font-size:12px;color:var(--muted);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}