/* VKS Inspector Head — iOS-aligned dark UI
 * Design language: Apple HIG / iOS dark system colors.
 * Single Action Blue accent · semantic status colors · no decorative gradients ·
 * no chrome shadows · no idle ambient motion · 44pt minimum tap targets ·
 * scale(0.95) press · pill-radius for actions · Noto Sans / Noto Sans Lao
 * (loaded from Google Fonts) as the universal font family.
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* iOS dark surface system (matches UIKit systemBackground tiers) */
  --bg-0:#000000;
  --bg-1:#1c1c1e;
  --bg-2:#2c2c2e;
  --bg-3:#3a3a3c;

  /* iOS labels (resolved against pure black for legibility) */
  --fg:#ffffff;
  --muted:#8e8e93;
  --dim:#8a8a8e;

  /* iOS systemBlue (dark) — the single interaction accent */
  --accent:#0a84ff;
  --info:#0a84ff;

  /* iOS semantic status colors (dark variants) — used for state, not chrome */
  --ok:#30d158;
  --warn:#ff9f0a;
  --danger:#ff453a;
  --purple:#bf5af2;
  --pink:#ff375f;

  --vks:#f6821f;

  /* Hairlines — iOS uses subtle separators, never decorative borders */
  --line:rgba(var(--ov),.08);
  --line-2:rgba(var(--ov),.14);

  --surface:#1c1c1e; --surface-2:#2c2c2e;
  --brand-soft:rgba(10,132,255,.18); --brand-deep:#9cc7ff;
  --ok-soft:rgba(48,209,88,.16); --warn-soft:rgba(255,159,10,.16); --danger-soft:rgba(255,69,58,.16); --purple-soft:rgba(191,90,242,.16);
  --sb:264px; --ov:255,255,255; --chrome:0,0,0;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  margin:0; padding:0;
  background:var(--bg-0);
  color:var(--fg);
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:17px; line-height:1.47; letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overscroll-behavior-y:none;
  width:100%;
  /* DO NOT set overflow-x:hidden on html/body — it breaks iOS Safari
     momentum scrolling (scroll just stops working). Clip is applied to
     #app-shell instead, which contains all screens. */
}

body { background:var(--bg-0); width:100%; }

/* utilities */
.lao { font-family:'Noto Sans Lao','Noto Sans','Noto Sans Lao',sans-serif; }
.mono { font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-variant-numeric:tabular-nums; }
.num { font-variant-numeric:tabular-nums; }
.grad { color:var(--accent); }
.hidden { display:none !important; }
button { font-family:inherit; cursor:pointer; }
input, select, textarea { font-family:inherit; }

/* ============ BOOT ============ */
.boot-screen {
  position:fixed; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px;
  background:var(--bg-0); z-index:1000;
}
.boot-logo {
  width:64px; height:64px; border-radius:14px;
  background:var(--vks);
  display:grid; place-items:center;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:700; font-size:22px; color:#fff;
  letter-spacing:-0.02em;
}
.boot-name {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:600; font-size:17px; letter-spacing:-0.022em;
  color:var(--fg);
}
.boot-spinner {
  width:24px; height:24px; border-radius:99px;
  border:2px solid rgba(var(--ov),.12); border-top-color:var(--accent);
  animation:rot 1s linear infinite;
}
@keyframes rot { to { transform:rotate(360deg); } }

/* ============ AUTH (login + change-pin) ============ */
.screen-auth {
  min-height:100vh;
  padding-top:calc(40px + var(--safe-top));
  padding-bottom:calc(20px + var(--safe-bottom));
}
.auth-wrap {
  max-width:380px; margin:0 auto; padding:0 22px;
}
.auth-brand {
  text-align:center; margin-bottom:30px;
}
.auth-logo {
  width:56px; height:56px; border-radius:14px; margin:0 auto 16px;
  background:var(--vks);
  display:grid; place-items:center;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:700; font-size:18px; color:#fff;
  letter-spacing:-0.02em;
}
.auth-logo.small {
  background:var(--accent);
  font-size:24px; color:#fff;
}
.auth-brand h1 {
  margin:0; font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:600; font-size:32px;
  letter-spacing:-0.022em; line-height:1.1; color:var(--fg);
}
.auth-tag {
  margin:8px 0 0; color:var(--muted); font-size:14px; letter-spacing:-0.016em;
}
.auth-card {
  background:var(--bg-1);
  border:1px solid var(--line); border-radius:18px; padding:18px;
  display:flex; flex-direction:column; gap:14px;
}
.field { display:flex; flex-direction:column; gap:6px; }
.field-l {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:13px; color:var(--muted);
  letter-spacing:-0.016em; font-weight:400;
}
.field input, .field select {
  appearance:none; -webkit-appearance:none;
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  padding:13px 14px; color:var(--fg); font-size:17px; letter-spacing:-0.022em;
  outline:none; transition:border-color .15s, background .15s;
}
.field input:focus, .field select:focus {
  border-color:var(--accent); background:var(--bg-2);
  outline:2px solid var(--accent); outline-offset:-1px;
}
.field input::placeholder { color:var(--dim); }

.btn {
  appearance:none; border:0; padding:14px 22px;
  border-radius:9999px;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:17px; font-weight:600; letter-spacing:-0.022em; text-transform:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .15s ease, opacity .15s ease;
}
.btn:active { transform:scale(0.95); }
.btn-primary {
  background:var(--accent); color:#fff;
}
.btn-primary:disabled { opacity:.45; }
.btn-ghost {
  background:transparent; color:var(--accent); border:0;
  font-weight:400;
}
.btn-link {
  appearance:none; background:none; border:0; color:var(--accent);
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:15px; padding:8px;
  text-transform:none; letter-spacing:-0.02em; font-weight:400;
  transition:transform .15s ease;
}
.btn-link:active { transform:scale(0.95); }
.btn-spin {
  width:16px; height:16px; border-radius:99px;
  border:2px solid rgba(var(--ov),.3); border-top-color:#fff;
  animation:rot 1s linear infinite;
}

.error {
  padding:11px 14px;
  background:rgba(255,69,58,.12); border:1px solid rgba(255,69,58,.28);
  border-radius:11px;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:14px; letter-spacing:-0.016em;
  color:var(--danger); font-weight:500;
}

.auth-foot {
  text-align:center; color:var(--muted); font-size:13px; margin:18px 0 0; letter-spacing:-0.016em;
}

/* ============ APP SHELL ============ */
#app-shell {
  min-height:100vh;
  padding-bottom:62px; padding-bottom:calc(62px + var(--safe-bottom));
  overflow-x:clip;       /* clip horizontal overflow without creating a
                            scroll container (preserves iOS scroll). */
}

.screen { min-height:100vh; display:flex; flex-direction:column; }
.scroll { flex:1; overflow-y:auto; padding-bottom:14px; }

/* topbar — iOS large-title navigation bar (compact variant).
   3-column grid (auto / 1fr / auto) so avatar stays pinned left and bell
   stays pinned right even when the greeting is empty during initial
   load. min-width:0 on the middle cell lets long greetings ellipse. */
.topbar {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:12px;
  padding:calc(10px + var(--safe-top)) 16px 10px;
  background:rgba(0,0,0,.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5;
}
.tb-av {
  appearance:none; border:none; padding:0; margin:0; cursor:pointer;
  width:36px; height:36px; border-radius:9999px;
  background:var(--accent);
  display:grid; place-items:center;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:600; color:#fff; font-size:15px;
  letter-spacing:-0.022em;
  flex-shrink:0;
  transition:transform .15s ease, opacity .15s ease;
}
.tb-av:active { transform:scale(.95); }
.tb-greet { min-width:0; }
.tb-l1 {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:17px; font-weight:600; letter-spacing:-0.022em;
  color:var(--fg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tb-l2 {
  font-size:12px; color:var(--muted); margin-top:1px;
  letter-spacing:-0.012em; font-weight:400;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;  /* keep on one line, ellipse if narrow */
  max-width:100%;
}
/* iOS-style top-bar icon button: 44×44, borderless, SF symbol on bare surface */
.tb-icon {
  width:44px; height:44px; border-radius:9999px;
  background:transparent; border:0;
  display:flex; align-items:center; justify-content:center; color:var(--accent);
  position:relative; flex-shrink:0; padding:0; margin:-4px;
  transition:transform .15s ease, opacity .15s ease;
  cursor:pointer;
}
.tb-icon:active { transform:scale(.95); opacity:.6; }
.tb-icon.alert { color:var(--accent); background:transparent; border:0; }
.tb-icon.accent { color:var(--accent); background:transparent; border:0; }
.tb-icon.disabled { visibility:hidden; }
.tb-icon .material-symbols-outlined {
  font-size:24px;
  line-height:1;
  display:block;
  font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
#tb-bell.has-alerts .material-symbols-outlined {
  font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  color:var(--accent);
}
/* iOS notification badge: red disc, white Noto Sans number, no glow */
.tb-bell-badge {
  position:absolute; top:6px; right:6px;
  min-width:18px; height:18px; padding:0 5px; border-radius:9999px;
  background:var(--danger); color:#fff;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:11px; font-weight:600; letter-spacing:-0.02em;
  display:grid; place-items:center;
  box-shadow:0 0 0 2px var(--bg-0);
  z-index:1;
}

/* hero v2: compact strip - numeral inline left, 3 stats right */
.hero-card {
  margin:10px 14px 8px; padding:11px 12px;
  border-radius:14px;
  background:var(--bg-1);
  border:0;
  position:relative;
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
}
.hero-num {
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding-right:12px; border-right:1px solid var(--line); min-width:60px;
}
.hero-big {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-weight:700; font-size:32px; line-height:1;
  letter-spacing:-0.028em; color:var(--fg);
  font-variant-numeric:tabular-nums;
  min-width:2.4ch; text-align:left;
}
.hero-l {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:10.5px; color:var(--muted); margin-top:3px;
  text-transform:none; letter-spacing:-0.012em; font-weight:500;
}
.hero-sub {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace;
  font-size:9px; color:var(--dim, #5b6890); margin-top:3px; font-weight:500; letter-spacing:.02em;
}
.hero-pills {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  background:transparent; border-radius:0; overflow:visible;
}
.hero-pill {
  flex:initial; padding:0; border-radius:0;
  background:transparent; border:0; text-align:left;
}
.hero-pill .v {
  font-family:'Noto Sans Mono','Noto Sans','Noto Sans Lao',sans-serif;
  font-weight:700; font-size:16px;
  line-height:1; letter-spacing:-0.022em; color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.hero-pill .l {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:10px; color:var(--muted); text-transform:none; letter-spacing:-0.012em;
  margin-top:3px; font-weight:500;
}

/* Conditional alert strip: coral wash when on-duty ratio is bad */
.h-alert {
  display:flex; align-items:center; gap:8px;
  margin:0 14px 10px; padding:8px 11px;
  background:linear-gradient(90deg,rgba(255,107,107,.1),rgba(255,107,107,.02));
  border:1px solid rgba(255,107,107,.28); border-radius:10px;
  appearance:none; color:inherit; font:inherit; cursor:pointer;
  width:calc(100% - 28px); text-align:left;
  transition:background .12s ease;
}
.h-alert:active { background:rgba(255,107,107,.18); }
.h-alert.hidden { display:none; }
.h-alert .h-alert-ic {
  width:22px; height:22px; border-radius:6px;
  background:rgba(255,107,107,.18); color:var(--danger, #ff6b6b);
  display:grid; place-items:center; flex-shrink:0;
}
.h-alert .h-alert-ic .material-symbols-outlined { font-size:16px; }
.h-alert .h-alert-tx {
  flex:1; font-size:11px; color:var(--fg); letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.h-alert .h-alert-tx b { color:var(--danger, #ff6b6b); font-weight:700; }
.h-alert .h-alert-ch { color:var(--dim, #5b6890); font-size:13px; flex-shrink:0; }

/* section heading — iOS grouped-list style */
.sec-head {
  display:flex; align-items:center; gap:10px;
  padding:0 16px 8px; margin-top:14px;
}
.sec-head h4 {
  margin:0; font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:22px; font-weight:700; letter-spacing:-0.026em; color:var(--fg);
}
.sec-head .tag {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:13px; padding:2px 8px; border-radius:6px;
  background:var(--bg-2); border:0; color:var(--muted); font-weight:400; letter-spacing:-0.012em;
}
.sec-head .more {
  margin-left:auto; appearance:none; background:none; border:0;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:15px; color:var(--accent); font-weight:400;
  text-transform:none; letter-spacing:-0.02em; padding:4px 6px;
  transition:opacity .15s ease;
  cursor:pointer;
}
.sec-head .more:active { opacity:.5; }

/* skeletons — quieter shimmer on grouped surface */
.skeleton-card {
  height:64px; margin:0 16px 8px; border-radius:12px;
  background:var(--bg-1);
  border:0;
  position:relative; overflow:hidden;
}
.skeleton-card::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(var(--ov),.04), transparent);
  background-size:200% 100%;
  animation:skele 1.6s ease-in-out infinite;
}
@keyframes skele { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* special duty home preview v2: 48px row, inline pill, right-aligned timestamp */
.h-sp-list { padding:0 14px 4px; display:flex; flex-direction:column; gap:0; }
.h-sp-row {
  display:grid; grid-template-columns:3px 28px minmax(0,1fr) auto; gap:9px;
  padding:7px 10px; border-radius:0;
  background:transparent; border:0;
  border-bottom:1px solid var(--line);
  align-items:center; cursor:pointer; width:100%; text-align:left;
  min-height:48px;
  transition:background .12s ease;
}
.h-sp-row:active { background:var(--bg-2); }
.h-sp-row[data-st=done] .h-sp-stripe   { background:var(--accent); }
.h-sp-row[data-st=active] .h-sp-stripe { background:var(--warn); }
.h-sp-row[data-st=cancel] .h-sp-stripe { background:var(--danger, #ff6b6b); }
.h-sp-row[data-st=other] .h-sp-stripe  { background:var(--info); }
.h-sp-stripe { width:3px; height:30px; border-radius:2px; background:var(--info); }
.h-sp-thumb {
  width:28px; height:28px; border-radius:6px; overflow:hidden;
  border:1px solid var(--line); flex-shrink:0; position:relative;
  background:var(--bg-2);
}
.h-sp-thumb img { width:28px; height:28px; object-fit:cover; display:block; }
.h-sp-icn {
  width:28px; height:28px; border-radius:6px;
  background:rgba(116,255,138,.1); color:var(--accent);
  display:grid; place-items:center; font-size:14px; flex-shrink:0;
}
.h-sp-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.h-sp-name {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:12.5px; font-weight:700; color:var(--fg); line-height:1.2;
  display:flex; align-items:center; gap:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.h-sp-name > span:first-of-type {
  flex:1; overflow:hidden; text-overflow:ellipsis;
}
.h-sp-meta {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace;
  font-size:9.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:.02em;
}
.h-sp-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.h-sp-tm {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace;
  font-size:9.5px; color:var(--muted); font-weight:600;
  font-variant-numeric:tabular-nums;
}
.h-sp-ch { color:var(--dim, #5b6890); font-size:13px; }
.h-sp-badge {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace;
  font-size:8px; padding:2px 5px; border-radius:4px; font-weight:700;
  white-space:nowrap; letter-spacing:.08em; text-transform:uppercase;
  flex-shrink:0;
}
.h-sp-badge.ok  { background:rgba(116,255,138,.15); color:var(--accent); border:1px solid rgba(116,255,138,.25); }
.h-sp-badge.pnd { background:rgba(255,179,71,.12);  color:var(--warn);   border:1px solid rgba(255,179,71,.22); }
.h-sp-badge.rej { background:rgba(255,107,107,.12); color:var(--danger); border:1px solid rgba(255,107,107,.22); }

/* alert list — iOS grouped tiles, tappable rows with chevron affordance */
.alerts-list { padding:0 16px; display:flex; flex-direction:column; gap:8px; }
.alert {
  display:grid; grid-template-columns:26px minmax(0,minmax(0,1fr)) auto auto; gap:10px;
  padding:9px 12px; border-radius:11px;
  background:var(--bg-1); border:0;
  align-items:center;
  width:100%; text-align:left; box-sizing:border-box;
  appearance:none; color:inherit; font:inherit;
  transition:transform .12s ease, background-color .15s ease;
  cursor:pointer;
}
button.alert { cursor:pointer; }
button.alert:active { transform:scale(.98); background-color:var(--bg-2); }
div.alert { cursor:default; }
.alert.warn, .alert.info, .alert.log { background:var(--bg-1); }
.alert .ic {
  width:26px; height:26px; border-radius:9999px;
  display:grid; place-items:center;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-weight:600; font-size:12px;
  background:transparent;
  align-self:start;
}
.alert.warn .ic { background:rgba(255,159,10,.18); color:var(--warn); }
.alert.info .ic { background:rgba(191,90,242,.18); color:var(--purple); }
.alert.log  .ic { background:rgba(10,132,255,.18); color:var(--accent); }
.alert .alert-body { min-width:0; }
.alert .tt {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:13px; font-weight:600; letter-spacing:-0.02em; line-height:1.3; color:var(--fg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.alert .ds {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:11px;
  color:var(--muted); margin-top:1px; line-height:1.35; letter-spacing:-0.012em; font-weight:400;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.alert .tm {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:11px;
  color:var(--muted); white-space:nowrap; font-weight:400; letter-spacing:-0.012em;
  align-self:start;
}
.alert .alert-chev {
  font-size:16px; color:var(--dim);
  align-self:center;
  font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* iOS-style empty state — centered, generous breathing room, muted label.
   Use .empty for plain text, .empty.icon-empty (with optional inner span)
   for icon+label combo. */
.empty {
  padding:42px 24px 36px; text-align:center;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:15px; color:var(--muted); letter-spacing:-0.018em; font-weight:400;
  line-height:1.45;
}
.empty .empty-icon {
  display:grid; place-items:center;
  width:56px; height:56px; border-radius:9999px;
  background:rgba(118,118,128,.14);
  margin:0 auto 14px;
  color:var(--muted);
}
.empty .empty-icon .material-symbols-outlined { font-size:28px; }
.empty .empty-title {
  display:block;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:17px; font-weight:600; letter-spacing:-0.022em;
  color:var(--fg);
  margin-bottom:4px;
}

/* roster — iOS grouped list rows: flat, separator hairline */
.roster-list {
  padding:0 16px; display:flex; flex-direction:column; gap:0;
  background:var(--bg-1); border-radius:12px; margin:0 16px;
  overflow:hidden;
}
/* v2 dense roster row: 3px stripe + 26px avatar + name/meta + inline score chip */
.r-row {
  display:grid; grid-template-columns:3px 30px minmax(0,1fr) auto; gap:10px;
  padding:9px 12px; border-radius:0;
  background:transparent; border:0;
  border-bottom:1px solid var(--line);
  align-items:center;
  appearance:none; text-align:left; color:inherit; font:inherit;
  width:100%; box-sizing:border-box;
  transition:background-color .12s ease;
  cursor:pointer; min-height:56px;
}
.r-row:active { background-color:var(--bg-2); }
.r-row[data-st=off] { opacity:.55; }
.r-row[data-st=alert] { background:linear-gradient(90deg,rgba(255,107,107,.06),transparent); }
.r-row .stripe {
  width:3px; height:34px; border-radius:2px; background:var(--info);
}
.r-row[data-st=on] .stripe   { background:var(--ok); }
.r-row[data-st=idle] .stripe { background:var(--info); }
.r-row[data-st=off] .stripe  { background:var(--muted); }
.r-row[data-st=alert] .stripe{ background:var(--danger, #ff6b6b); }
.r-row .av {
  width:30px; height:30px; border-radius:9999px;
  display:grid; place-items:center;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-weight:700; font-size:12px; color:#fff;
  letter-spacing:-0.022em;
}
.r-row .body { min-width:0; }
.r-row .nm {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:14.5px; font-weight:600; letter-spacing:-0.02em; color:var(--fg);
  line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.r-row .mt {
  font-size:11px; color:var(--muted);
  margin-top:3px; display:flex; align-items:center; gap:5px;
  white-space:nowrap; overflow:hidden;
  font-variant-numeric:tabular-nums;
}
.r-row .mt .sep { color:var(--dim, #5b6890); }
.r-row .mt .st-on    { color:var(--ok); font-weight:700; }
.r-row .mt .st-idle  { color:var(--info); font-weight:700; }
.r-row .mt .st-off   { color:var(--muted); font-weight:700; }
.r-row .mt .st-alert { color:var(--danger, #ff6b6b); font-weight:700; }
.r-row .right { display:flex; align-items:center; gap:6px; }
.r-row .right .sc {
  font-family:'Noto Sans Mono','Noto Sans','Noto Sans Lao',monospace;
  font-weight:700; font-size:15px; line-height:1; letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
.r-row .right .sc small { font-size:9.5px; margin-left:1px; opacity:.8; }
.r-row .right .sc.g   { color:var(--ok); }
.r-row .right .sc.k   { color:var(--accent); }
.r-row .right .sc.w   { color:var(--warn, #ffb347); }
.r-row .right .sc.r   { color:var(--danger, #ff6b6b); }
.r-row .right .sc.dim { color:var(--muted); }
.r-row .right .chev { color:var(--dim, #5b6890); font-size:14px; margin-left:2px; }

/* iOS dot-status pill (online green / blue / gray) */
.stp {
  display:inline-flex; align-items:center; gap:4px;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:13px; font-weight:400; text-transform:none; letter-spacing:-0.012em;
}
.stp .d { width:7px; height:7px; border-radius:99px; background:currentColor; }
.stp.on { color:var(--ok); }
.stp.idle { color:var(--accent); }
.stp.inactive { color:var(--muted); }

/* iOS search field */
.search-wrap {
  margin:8px 16px 12px; padding:8px 12px;
  background:var(--bg-2); border:0; border-radius:10px;
  display:flex; align-items:center; gap:8px;
}
.search-wrap .search-ic { color:var(--muted); font-size:17px; }
.search-wrap input {
  flex:1; appearance:none; border:0; background:transparent;
  color:var(--fg); font-size:17px; outline:none; padding:0;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; letter-spacing:-0.022em;
}
.search-wrap input::placeholder { color:var(--muted); }

/* iOS segmented filter chips */
.filter-strip {
  display:flex; gap:8px; padding:0 16px 12px;
  overflow-x:auto; scrollbar-width:none;
}
.filter-strip::-webkit-scrollbar { display:none; }
.filt {
  appearance:none; flex-shrink:0;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-size:14px;
  padding:7px 14px; border-radius:9999px;
  background:var(--bg-2); border:0; color:var(--fg);
  white-space:nowrap; font-weight:500; text-transform:none; letter-spacing:-0.016em;
  transition:transform .12s ease, background-color .15s ease;
  cursor:pointer;
}
.filt:active { transform:scale(.96); }
.filt.on { background:var(--accent); color:#fff; border:0; }

/* USERS list — iOS grouped table */
.users-list { padding:0 16px; display:flex; flex-direction:column; gap:8px; }
.u-row {
  padding:14px 16px; border-radius:12px;
  background:var(--bg-1); border:0;
}
.u-row.inactive { opacity:.5; }
.u-row .top {
  display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:12px; align-items:center;
}
.u-row .av {
  width:36px; height:36px; border-radius:9999px;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-weight:600; font-size:14px; color:#fff;
  letter-spacing:-0.022em;
  display:grid; place-items:center;
}
.u-row .nm {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:15px; font-weight:600; letter-spacing:-0.02em; color:var(--fg);
}
.u-row .em {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:13px; color:var(--muted); margin-top:2px; letter-spacing:-0.012em; font-weight:400;
}
.u-row .role-tag {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:11px; padding:3px 9px; border-radius:9999px;
  text-transform:none; letter-spacing:-0.012em; font-weight:600;
}
.u-row .role-tag.admin { color:var(--vks); background:rgba(246,130,31,.16); border:0; }
.u-row .role-tag.head  { color:var(--accent); background:rgba(10,132,255,.16); border:0; }
.u-row .meta {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:13px; color:var(--muted);
  margin-top:8px; line-height:1.45; letter-spacing:-0.012em; font-weight:400;
}
.u-row .actions {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:12px;
}
.u-row .actions button {
  appearance:none; padding:9px 8px; border-radius:9999px;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-size:13px;
  font-weight:500; text-transform:none; letter-spacing:-0.012em;
  border:0;
  transition:transform .12s ease, opacity .15s ease;
  cursor:pointer;
}
.u-row .actions button:active { transform:scale(.96); opacity:.7; }
.u-row .actions .b-act   { background:rgba(48,209,88,.18);  color:var(--ok); }
.u-row .actions .b-deact { background:rgba(255,159,10,.18); color:var(--warn); }
.u-row .actions .b-reset { background:rgba(10,132,255,.18); color:var(--accent); }

/* ME — iOS profile screen: large avatar atop grouped lists */
.me-hero {
  position:relative; margin:24px 16px 24px; padding:24px 20px 20px;
  border-radius:18px; overflow:hidden;
  border:0;
  background:var(--bg-1);
  text-align:center;
}
.me-hero-bg { display:none; }
.me-hero > * { position:relative; z-index:1; }
.me-av {
  width:80px; height:80px; border-radius:9999px; margin:0 auto 14px;
  background:var(--accent);
  display:grid; place-items:center;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-weight:600; color:#fff; font-size:32px; letter-spacing:-0.025em;
}
.me-name {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:22px; font-weight:600; letter-spacing:-0.026em; color:var(--fg);
}
.me-email {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:14px; color:var(--muted); margin-top:4px; letter-spacing:-0.016em; font-weight:400;
}
.me-role {
  display:inline-block; margin-top:12px;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-size:12px;
  padding:4px 11px; border-radius:9999px;
  background:rgba(48,209,88,.18); border:0; color:var(--ok);
  font-weight:600; text-transform:none; letter-spacing:-0.012em;
}
.me-role.admin { background:rgba(246,130,31,.18); border:0; color:var(--vks); }
.me-hero-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line);
}
.me-hs-cell { text-align:center; }
.me-hs-cell .k {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:12px; color:var(--muted); text-transform:none;
  letter-spacing:-0.012em; font-weight:400; margin-bottom:3px;
}
.me-hs-cell .v {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:17px; font-weight:600; color:var(--fg); letter-spacing:-0.022em;
  font-variant-numeric:tabular-nums;
}

/* iOS settings-row: borderless, separator hairlines, chevron */
.me-row {
  appearance:none; width:calc(100% - 32px); margin:0 16px 0;
  padding:14px 16px; border-radius:0;
  background:var(--bg-1); border:0;
  border-top:1px solid var(--line);
  color:var(--fg); display:flex; align-items:center; gap:14px;
  text-align:left; font-size:17px; font-weight:400; letter-spacing:-0.022em;
  cursor:pointer;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  transition:background-color .12s ease;
}
.me-row:active { background:var(--bg-2); }
.me-row:first-of-type { border-top:0; border-radius:12px 12px 0 0; }
.me-row:last-of-type  { border-radius:0 0 12px 12px; }
.me-row .material-symbols-outlined { font-size:22px; color:var(--accent); flex-shrink:0; }
.me-row .me-row-l { flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.me-row .me-row-l .row-t {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-size:17px;
  font-weight:400; color:var(--fg); letter-spacing:-0.022em;
}
.me-row .me-row-l .row-s {
  font-size:13px; font-weight:400;
  color:var(--muted); text-transform:none; letter-spacing:-0.012em;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
}
.me-row .chev { color:var(--dim); font-size:17px; }
.me-row.danger { color:var(--danger); }
.me-row.danger .material-symbols-outlined { color:var(--danger); }

/* iOS grouped session card */
.me-session-card {
  margin:0 16px 24px; padding:0;
  border-radius:12px;
  background:var(--bg-1);
  border:0;
  overflow:hidden;
}
.me-ss-row {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
}
.me-ss-row > .material-symbols-outlined {
  font-size:22px; color:var(--accent); flex-shrink:0;
}
.me-ss-body { flex:1; min-width:0; }
.me-ss-l {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:13px; color:var(--muted); text-transform:none;
  letter-spacing:-0.012em; font-weight:400; margin-bottom:2px;
}
.me-ss-v {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:15px; font-weight:400; color:var(--fg); letter-spacing:-0.02em;
  word-break:break-all;
}
.me-ss-divider {
  height:1px; background:var(--line); margin:0 0 0 52px;
}
.me-ss-pill {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:12px; font-weight:600; letter-spacing:-0.012em;
  padding:3px 10px; border-radius:9999px; text-transform:none;
  flex-shrink:0;
}
.me-ss-pill.on {
  background:rgba(48,209,88,.18); color:var(--ok); border:0;
}

/* iOS destructive action button — full-width pill, system red */
.me-signout-btn {
  appearance:none; width:calc(100% - 32px); margin:24px 16px 12px;
  padding:14px 20px; border-radius:9999px;
  background:rgba(255,69,58,.16);
  border:0;
  color:var(--danger);
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-size:17px; font-weight:600;
  cursor:pointer;
  letter-spacing:-0.022em;
  transition:transform .15s ease, opacity .15s ease;
}
.me-signout-btn:active {
  transform:scale(.98); opacity:.7;
}
.me-signout-btn .material-symbols-outlined {
  font-size:20px;
  font-variation-settings:'FILL' 0,'wght' 500;
}
.me-pill {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:12px; font-weight:600; letter-spacing:-0.012em;
  padding:3px 10px; border-radius:9999px; text-transform:none;
  background:var(--bg-2); border:0; color:var(--muted);
}
.me-pill.on          { background:rgba(48,209,88,.18);  border:0; color:var(--ok); }
.me-pill.off         { background:var(--bg-2);          border:0; color:var(--muted); }
.me-pill.denied      { background:rgba(255,69,58,.16);  border:0; color:var(--danger); }
.me-pill.unsupported { background:var(--bg-2);          border:0; color:var(--dim); }
.me-version {
  text-align:center; color:var(--dim); font-size:13px; margin:24px 0 0; letter-spacing:-0.012em; font-weight:400;
}

/* ============ INSPECTOR PROFILE (P2) ============ */
.ip-hero {
  margin:14px 16px 12px; padding:16px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(196,168,255,.12), rgba(122,184,255,.06));
  border:1px solid rgba(196,168,255,.22);
  position:relative; overflow:hidden;
}
.ip-hero::before {
  content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px;
  border-radius:99px; background:radial-gradient(circle, rgba(196,168,255,.18), transparent 70%);
}
.ip-hero-top { display:flex; gap:11px; align-items:center; position:relative; }
.ip-av {
  width:54px; height:54px; border-radius:14px;
  background:linear-gradient(135deg, var(--purple), var(--info));
  display:grid; place-items:center;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:800; color:#0a0a0a; font-size:20px;
  flex-shrink:0;
}
.ip-info { flex:1; min-width:0; }
.ip-name-big { font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-size:16px; font-weight:700; letter-spacing:-0.01em; }
.ip-meta { font-size:9.5px; color:var(--muted); margin-top:3px; text-transform:uppercase; letter-spacing:.06em; }
.ip-status {
  margin-top:7px; display:inline-flex; align-items:center; gap:5px;
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9px;
  padding:4px 9px; border-radius:99px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
}
.ip-status.on { background:rgba(116,255,138,.12); border:1px solid rgba(116,255,138,.25); color:var(--accent); }
.ip-status.idle { background:rgba(122,184,255,.1); border:1px solid rgba(122,184,255,.22); color:var(--info); }
.ip-status.inactive { background:rgba(var(--ov),.04); border:1px solid var(--line); color:var(--muted); }
.ip-status .d { width:5px; height:5px; border-radius:99px; background:currentColor; box-shadow:0 0 6px currentColor; }

.ip-stats {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:5px;
  margin-top:13px; position:relative;
}
.ip-stat {
  padding:9px 4px; background:var(--bg-1); border:1px solid var(--line);
  border-radius:9px; text-align:center;
}
.ip-stat .v {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:800;
  font-size:16px; line-height:1; letter-spacing:-0.02em;
}
.ip-stat:nth-child(1) .v { color:var(--accent); }
.ip-stat:nth-child(2) .v { color:var(--info); }
.ip-stat:nth-child(3) .v { color:var(--purple); }
.ip-stat:nth-child(4) .v { color:var(--warn); }
.ip-stat .l {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:8px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.07em;
  margin-top:4px; font-weight:600;
}

.ip-quick {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;
  padding:0 16px 12px;
}
.ip-qa {
  appearance:none;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:11px 6px; border-radius:11px;
  background:var(--bg-1); border:1px solid var(--line); color:var(--fg);
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9.5px;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
.ip-qa .material-symbols-outlined { font-size:18px; }
.ip-qa.g .material-symbols-outlined { color:var(--accent); }
.ip-qa.b .material-symbols-outlined { color:var(--info); }
.ip-qa.p .material-symbols-outlined { color:var(--purple); }
.ip-qa:disabled { opacity:.5; }
.ip-qa .ipq-l { color:var(--muted); }

.ip-tabs {
  display:flex; padding:0 16px;
  border-bottom:1px solid var(--line);
  position:sticky; top:54px; background:var(--bg-0); z-index:4;
  overflow-x:auto; scrollbar-width:none;
}
.ip-tabs::-webkit-scrollbar { display:none; }
.ip-tab {
  appearance:none; background:none; border:0;
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:10px;
  padding:10px 12px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em; font-weight:700;
  position:relative; flex-shrink:0; white-space:nowrap;
}
.ip-tab .b {
  display:inline-block; min-width:14px; padding:0 4px; height:14px; line-height:14px;
  border-radius:7px; background:rgba(var(--ov),.08); color:var(--fg);
  font-size:8px; margin-left:4px;
}
.ip-tab.on { color:var(--accent); }
.ip-tab.on::after {
  content:""; position:absolute; bottom:-1px; left:12px; right:12px;
  height:2px; background:var(--accent); border-radius:99px; box-shadow:0 0 8px var(--accent);
}
.ip-tab.on .b { background:var(--accent); color:#0a0a0a; }
.ip-pane { padding-top:6px; }

.timeline-list { padding:0 16px; display:flex; flex-direction:column; gap:6px; }
.tl-row {
  display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:10px;
  padding:10px 12px; border-radius:11px;
  background:var(--bg-1); border:1px solid var(--line);
  align-items:center;
  appearance:none; text-align:left; color:inherit; font:inherit; width:100%;
}
.tl-row .t {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9.5px;
  color:var(--muted); font-weight:600;
}
.tl-row .e { font-size:11.5px; font-weight:700; line-height:1.3; }
.tl-row .e small {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9px;
  color:var(--muted); display:block; font-weight:500; margin-top:2px;
}
.tl-row .sc {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:800; font-size:13px;
}
.tl-row .sc.g { color:var(--accent); }
.tl-row .sc.k { color:var(--info); }
.tl-row .sc.w { color:var(--warn); }
.tl-row .sc.r { color:var(--danger); }

.ip-topsites { padding:0 16px; display:flex; flex-direction:column; gap:6px; }
.ts-row {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px;
  padding:9px 12px; border-radius:10px;
  background:var(--bg-1); border:1px solid var(--line); align-items:center;
}
.ts-row .nm { font-size:11.5px; font-weight:600; }
.ts-row .ct {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:11px; font-weight:700;
  color:var(--accent);
}

.logs-list { padding:0 14px 4px; display:flex; flex-direction:column; gap:0; }
.logs-list .log-row {
  display:grid; grid-template-columns:28px minmax(0,1fr) auto auto; gap:9px;
  padding:7px 10px; border-radius:0;
  background:transparent; border:0;
  border-bottom:1px solid var(--line);
  align-items:center; min-height:48px;
  appearance:none; text-align:left; color:inherit; font:inherit; width:100%;
  transition:background .12s ease;
}
.logs-list .log-row:active { background:var(--bg-2); }
.logs-list .log-row .ic {
  width:28px; height:28px; border-radius:6px;
  background:rgba(122,184,255,.12); color:var(--info);
  display:grid; place-items:center;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:800; font-size:11px;
  flex-shrink:0;
}
.logs-list .log-row .log-row-body { min-width:0; display:flex; flex-direction:column; gap:2px; }
.logs-list .log-row .nm {
  font-size:12.5px; font-weight:700; color:var(--fg); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.logs-list .log-row .sb {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9.5px;
  color:var(--muted); letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.logs-list .log-row .log-photo {
  width:28px; height:28px; border-radius:6px; flex-shrink:0;
}
.logs-list .log-row .log-photo img { width:28px; height:28px; }
.logs-list .log-row .log-photo-count {
  right:2px; bottom:2px; padding:1px 3px; font-size:7.5px;
}
.logs-list .log-row .sc {
  font-family:'Noto Sans Mono','Noto Sans','Noto Sans Lao',sans-serif;
  font-weight:700; font-size:13px; line-height:1; text-align:right;
  font-variant-numeric:tabular-nums;
}
.logs-list .log-row .sc small { display:none; }

.log-day-head {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; margin:8px 0 4px; padding-left:4px;
}
.log-day-head .pill {
  display:inline-block; padding:2px 7px;
  background:rgba(116,255,138,.1); color:var(--accent);
  border:1px solid rgba(116,255,138,.22); border-radius:5px;
  margin-right:5px;
}
.log-row {
  display:grid; grid-template-columns:36px minmax(0,1fr) 56px auto; gap:10px;
  padding:10px 12px; border-radius:11px;
  background:var(--bg-1); border:1px solid var(--line);
  align-items:center;
  appearance:none; text-align:left; color:inherit; font:inherit; width:100%;
}
.log-photo {
  width:56px; height:56px; border-radius:9px; overflow:hidden;
  background:rgba(0,0,0,.3); border:1px solid rgba(var(--ov),.08);
  position:relative; cursor:zoom-in; padding:0;
}
.log-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.log-photo.empty {
  background:rgba(var(--ov),.02); border-style:dashed;
  border-color:rgba(var(--ov),.06); cursor:default;
}
.log-photo-count {
  position:absolute; right:3px; bottom:3px;
  padding:2px 5px; border-radius:4px; background:rgba(0,0,0,.72); color:#fff;
  font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:700;
  letter-spacing:.02em; pointer-events:none;
}
.log-photo.photo-broken {
  background:rgba(var(--ov),.02); border-style:dashed;
  border-color:rgba(var(--ov),.06); cursor:default;
  display:grid; place-items:center;
}
.log-photo .photo-broken-msg {
  font-size:9px; color:var(--dim); text-align:center; line-height:1.15;
  padding:2px; display:flex; flex-direction:column; align-items:center; gap:2px;
}
.log-photo .photo-broken-msg .material-symbols-outlined { font-size:16px; }
.log-row .ic {
  width:36px; height:36px; border-radius:10px;
  background:rgba(122,184,255,.12); color:var(--info);
  display:grid; place-items:center;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:800; font-size:14px;
}
.log-row .nm { font-size:12.5px; font-weight:700; }
.log-row .sb {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9.5px;
  color:var(--muted); margin-top:2px;
}
.log-row .sc {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:800;
  font-size:14px; text-align:right; line-height:1;
}
.log-row .sc.g { color:var(--accent); }
.log-row .sc.k { color:var(--info); }
.log-row .sc.w { color:var(--warn); }
.log-row .sc.r { color:var(--danger); }
.log-row .sc small {
  display:block; font-family:'Noto Sans Mono','Noto Sans Lao',monospace;
  font-size:8px; color:var(--muted); font-weight:600; margin-top:2px;
}

/* ---- Activity / Week Kanban (ກິດຈະກຳ tab) ---- */
.act-week-nav {
  display:flex; align-items:center; padding:8px 10px 4px;
  gap:4px;
}
.awn-btn {
  appearance:none; background:rgba(var(--ov),.07); border:1px solid rgba(var(--ov),.1);
  color:var(--fg); border-radius:8px; width:32px; height:32px; font-size:20px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.awn-btn:active { background:rgba(var(--ov),.14); }
.week-strip {
  flex:1; display:flex; gap:3px; overflow-x:auto; scrollbar-width:none;
}
.week-strip::-webkit-scrollbar { display:none; }
.day-cell {
  flex:1; min-width:36px; display:flex; flex-direction:column; align-items:center;
  padding:5px 3px; border-radius:10px; cursor:pointer; background:transparent;
  border:1.5px solid transparent; transition:all .15s;
}
.day-cell.today .dc-date { color:var(--accent); font-weight:800; }
.day-cell.sel { background:rgba(116,255,138,.1); border-color:rgba(116,255,138,.35); }
.day-cell:active { background:rgba(var(--ov),.07); }
.dc-day {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9px;
  color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.dc-date {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-size:14px; font-weight:700;
  color:var(--fg); margin:2px 0;
}
.dc-dots { display:flex; gap:2px; height:5px; align-items:center; min-height:5px; }
.dc-dot { width:4px; height:4px; border-radius:50%; display:block; }
.dc-dot.insp { background:var(--info); }
.dc-dot.spec { background:var(--purple); }

.act-filters { display:flex; padding:6px 16px; gap:6px; }
.act-day-head {
  padding:4px 16px 2px;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-size:11.5px;
  font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;
}
.act-list { padding:0 16px; display:flex; flex-direction:column; gap:6px; }

/* === Day timeline (replaces flat act-row list inside ກິດຈະກຳ pane) === */
.tl-list { padding:4px 16px 8px; position:relative; }
.tl-hour { display:grid; grid-template-columns:38px 1fr; gap:10px; align-items:flex-start; min-height:42px; padding:2px 0; position:relative; }
.tl-hour .tl-hr {
  font-size:10.5px; font-weight:700; color:var(--muted); text-align:right; padding-top:9px;
  letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.tl-hour.current .tl-hr { color:var(--accent); }
.tl-hour .tl-evs {
  position:relative; padding-left:16px; display:flex; flex-direction:column; gap:5px; min-height:38px;
  border-left:1.5px solid var(--hairline, rgba(var(--ov),.07));
}
.tl-hour .tl-evs::before {
  content:''; position:absolute; left:-6px; top:11px;
  width:10px; height:10px; border-radius:50%; background:var(--bg-0); border:2px solid var(--muted); box-sizing:border-box;
}
.tl-hour.has-events .tl-evs::before { border-color:var(--info); background:var(--info); box-shadow:0 0 0 3px rgba(122,184,255,.15); }
.tl-hour.has-special .tl-evs::before { border-color:var(--purple); background:var(--purple); box-shadow:0 0 0 3px rgba(196,168,255,.15); }
.tl-hour.current .tl-evs::before { border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 4px rgba(116,255,138,.25); }

.tl-ev {
  display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center;
  padding:8px 10px; background:rgba(var(--ov),.025);
  border:1px solid var(--hairline, rgba(var(--ov),.07));
  border-left:3px solid var(--info);
  border-radius:10px;
  appearance:none; text-align:left; color:inherit; font:inherit;
  cursor:pointer; width:100%; box-sizing:border-box;
  transition:background-color .12s ease, transform .12s ease;
}
.tl-ev:active { background:var(--bg-2); transform:translateX(1px); }
.tl-ev.spec { border-left-color:var(--purple); }
.tl-ev .tl-tm {
  font-size:10.5px; font-weight:700; color:var(--fg); min-width:36px;
  font-variant-numeric:tabular-nums;
}
.tl-ev .tl-body { min-width:0; display:flex; flex-direction:column; gap:2px; }
.tl-ev .tl-nm {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:13px; font-weight:600; color:var(--fg); letter-spacing:-0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2;
}
.tl-ev .tl-sb {
  font-size:10px; color:var(--muted); letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tl-ev .tl-sc {
  font-weight:700; font-size:14px; line-height:1; color:var(--ok);
  font-variant-numeric:tabular-nums; letter-spacing:-0.01em;
}
.tl-ev .tl-sc small { font-size:9px; margin-left:1px; opacity:.8; }
.tl-ev .tl-sc.g { color:var(--ok); }
.tl-ev .tl-sc.k { color:var(--accent); }
.tl-ev .tl-sc.w { color:var(--warn, #ffb347); }
.tl-ev .tl-sc.r { color:var(--danger, #ff6b6b); }
.tl-ev .tl-sc.p { color:var(--purple); font-size:10px; letter-spacing:.08em; }

.tl-gap {
  font-size:10px; color:var(--dim, #5b6890); font-style:italic;
  padding:9px 0 0 2px;
}

.act-row {
  display:flex; align-items:stretch; border-radius:11px;
  background:rgba(0,0,0,.28); border:1px solid rgba(var(--ov),.07);
  appearance:none; text-align:left; color:inherit; font:inherit; width:100%;
  overflow:hidden; cursor:pointer;
}
.act-row:active { background:rgba(var(--ov),.05); }
.act-bar { width:4px; flex-shrink:0; }
.act-bar.insp { background:var(--info); }
.act-bar.spec { background:var(--purple); }
.act-body { flex:1; padding:9px 10px; min-width:0; }
.act-top { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.act-badge {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:8.5px; font-weight:700;
  padding:2px 6px; border-radius:4px; text-transform:uppercase; letter-spacing:.06em; flex-shrink:0;
}
.act-badge.insp { background:rgba(122,184,255,.15); color:var(--info); border:1px solid rgba(122,184,255,.22); }
.act-badge.spec { background:rgba(196,168,255,.15); color:var(--purple); border:1px solid rgba(196,168,255,.22); }
.act-site { font-size:12px; font-weight:700; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act-time { font-size:10px; color:var(--muted); font-weight:600; flex-shrink:0; }
.act-note {
  font-size:10.5px; color:var(--muted); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.act-score {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:800; font-size:13px;
  padding:0 12px; display:flex; align-items:center; flex-shrink:0;
}
.act-score.g { color:var(--accent); }
.act-score.k { color:var(--info); }
.act-score.w { color:var(--warn); }
.act-score.r { color:var(--danger); }
.act-score.dim { color:var(--muted); }
.act-status-pill {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:8px; font-weight:700;
  padding:2px 7px; border-radius:4px; margin:0 10px;
  background:rgba(116,255,138,.1); color:var(--accent); border:1px solid rgba(116,255,138,.2);
  align-self:center; flex-shrink:0;
}

/* ---- Weekly Summary (ສະຫຼຸບ tab) ---- */
.sum-kpis {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px 16px 8px;
}
.sum-kpi {
  background:rgba(0,0,0,.3); border:1px solid rgba(var(--ov),.07); border-radius:11px;
  padding:10px 8px; display:flex; flex-direction:column; align-items:center; gap:3px;
}
.sum-kpi .v { font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-size:22px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
.sum-kpi .l { font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:8.5px; color:var(--muted); text-align:center; letter-spacing:.04em; }
.sum-card {
  margin:6px 16px; background:rgba(0,0,0,.25); border:1px solid rgba(var(--ov),.07);
  border-radius:13px; padding:12px;
}
.sum-card-head {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9px; font-weight:700;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px;
}
.bar-grid { display:flex; flex-direction:column; gap:7px; }
.bar-row { display:grid; grid-template-columns:22px 1fr 28px; gap:8px; align-items:center; }
.bar-row.today .bar-lbl { color:var(--accent); }
.bar-lbl { font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9.5px; font-weight:700; color:var(--muted); display:flex; gap:3px; align-items:baseline; }
.bar-date { font-size:8px; color:var(--dim); }
.bar-track { position:relative; height:8px; background:rgba(var(--ov),.05); border-radius:4px; overflow:hidden; display:flex; }
.bar-insp { display:block; height:100%; background:var(--info); border-radius:4px 0 0 4px; min-width:0; }
.bar-spec { display:block; height:100%; background:var(--purple); border-radius:0 4px 4px 0; min-width:0; }
.bar-score { font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9.5px; font-weight:700; color:var(--fg); text-align:right; }
.sum-sites { display:flex; flex-direction:column; gap:5px; }
.sum-site-row {
  display:grid; grid-template-columns:minmax(0,1fr) 28px 36px; gap:8px; align-items:center;
  padding:7px 9px; background:rgba(0,0,0,.2); border-radius:8px; border:1px solid rgba(var(--ov),.05);
}
.sum-site-row .nm { font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sum-site-row .ct { font-size:10.5px; color:var(--muted); text-align:center; font-variant-numeric:tabular-nums; }
.sum-site-row .sc { font-size:10.5px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.sum-site-row .sc.g { color:var(--accent); }
.sum-site-row .sc.k { color:var(--info); }
.sum-site-row .sc.w { color:var(--warn); }
.sum-site-row .sc.r { color:var(--danger); }
.sum-site-row .sc.dim { color:var(--muted); }

.special-list { padding:0 16px; display:flex; flex-direction:column; gap:7px; }
.sp-row {
  padding:11px 12px; border-radius:12px;
  background:rgba(196,168,255,.05); border:1px solid rgba(196,168,255,.22);
  display:flex; flex-direction:column; gap:6px;
  appearance:none; text-align:left; color:inherit; font:inherit; width:100%;
}
.sp-row .top {
  display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:9px; align-items:center;
}
.sp-row .ic {
  width:30px; height:30px; border-radius:9px;
  background:rgba(196,168,255,.15); color:var(--purple);
  display:grid; place-items:center; font-size:14px;
}
.sp-row .nm { font-size:12px; font-weight:700; line-height:1.3; }
.sp-row .sb {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9px;
  color:var(--muted); margin-top:1px;
}
.sp-row .meta {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9.5px;
  color:var(--muted); line-height:1.5;
}
.sp-row .stp {
  font-size:8.5px;
}

/* perf cards */
.perf-rank-card {
  margin:0 16px 10px; padding:12px 14px; border-radius:13px;
  background:linear-gradient(180deg, rgba(116,255,138,.06), rgba(0,0,0,.3));
  border:1px solid rgba(116,255,138,.22);
}
.prc-l {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; margin-bottom:8px;
}
.prc-row { display:flex; align-items:center; gap:11px; }
.prc-pos {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:800;
  font-size:36px; line-height:1; letter-spacing:-0.04em;
  background:linear-gradient(135deg, var(--accent), var(--info));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.prc-info { flex:1; }
.prc-of {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:-0.01em;
}
.prc-by {
  font-size:10px; color:var(--accent); margin-top:3px; font-weight:600;
}
.perf-card {
  margin:0 16px 10px; padding:12px 14px; border-radius:13px;
  background:var(--bg-1); border:1px solid var(--line);
}
.pc-h {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.pc-l {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600;
}
.pc-v {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:800; font-size:14px;
  color:var(--accent);
}
.pc-svg { width:100%; height:100px; display:block; }

.perf-breakdown { display:flex; flex-direction:column; gap:7px; }
.pb-row { display:flex; align-items:center; gap:8px; }
.pb-row .l {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9.5px;
  width:90px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.06em; font-weight:600;
}
.pb-row .b {
  flex:1; height:8px; background:rgba(0,0,0,.4); border-radius:99px;
  overflow:hidden;
}
.pb-row .b > span {
  display:block; height:100%; border-radius:99px;
}
.pb-row .v {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:700;
  font-size:11.5px; width:36px; text-align:right;
}

.perf-sites { display:flex; flex-direction:column; gap:6px; }
.ps-row { display:flex; align-items:center; gap:8px; }
.ps-row .nm {
  font-size:11px; font-weight:600; flex-shrink:0;
  width:auto; max-width:60%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ps-row .b {
  flex:1; height:7px; background:rgba(0,0,0,.4); border-radius:99px;
  overflow:hidden;
}
.ps-row .b > span {
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--info));
}
.ps-row .v {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:10px;
  color:var(--fg); font-weight:700; width:24px; text-align:right;
}

/* LOG DETAIL */
.ld-banner {
  margin:14px 16px 12px; padding:14px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(122,184,255,.12), rgba(116,255,138,.06));
  border:1px solid rgba(122,184,255,.22);
  display:flex; align-items:center; gap:11px;
  position:relative; overflow:hidden;
}
.ld-banner .lic {
  width:38px; height:38px; border-radius:11px;
  background:rgba(122,184,255,.2); color:var(--info);
  display:grid; place-items:center; font-size:18px;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:800; flex-shrink:0;
}
.ld-banner .info { flex:1; min-width:0; }
.ld-banner .info .nm {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-size:14px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ld-banner .info .ad {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9.5px;
  color:var(--muted); margin-top:2px;
}
.ld-score-pill {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:800; font-size:18px;
  padding:6px 11px; border-radius:9px;
  background:var(--bg-1); border:1px solid var(--line);
  color:var(--accent);
}

.ld-meta {
  margin:0 16px 12px;
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
}
.ld-meta-cell {
  padding:10px 12px; background:rgba(0,0,0,.3);
  border:1px solid var(--line); border-radius:10px;
}
.ld-meta-cell .k {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:8.5px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em;
  font-weight:600;
}
.ld-meta-cell .v {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-size:12px; font-weight:700;
  margin-top:3px;
}

.ld-scores {
  margin:0 16px 12px; padding:14px;
  border-radius:13px;
  background:linear-gradient(180deg, rgba(255,179,71,.06), rgba(0,0,0,.3));
  border:1px solid rgba(255,179,71,.22);
}
.ld-scores .h {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.ld-scores .h .l {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:10px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em;
  font-weight:600;
}
.ld-scores .h .v {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:800; font-size:20px;
  color:var(--accent);
}

.ld-notes, .ld-gps {
  margin:0 16px 12px; padding:12px 14px;
  border-radius:11px; background:rgba(0,0,0,.3);
  border:1px solid var(--line);
}
.ld-notes .l, .ld-gps .l {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; margin-bottom:6px;
}
.ld-notes p { margin:0; font-size:12px; line-height:1.5; }
.ld-gps {
  background:linear-gradient(180deg, rgba(116,255,138,.04), rgba(0,0,0,.3));
  border-color:rgba(116,255,138,.2);
  display:flex; align-items:center; gap:10px;
}
.ld-gps .ic {
  width:28px; height:28px; border-radius:8px;
  background:rgba(116,255,138,.1); color:var(--accent);
  display:grid; place-items:center; flex-shrink:0;
}
.ld-gps .body { flex:1; }
.ld-gps a {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:11px;
  color:var(--accent); text-decoration:none; font-weight:600;
}
.ld-gps a:hover { text-decoration:underline; }
.ld-notes-warn {
  background:linear-gradient(180deg, rgba(255,179,71,.06), rgba(0,0,0,.3));
  border-color:rgba(255,179,71,.25);
}
.ld-notes-warn .l { color:var(--warn); }

/* Log detail — section / map / checks / fields */
.ld-section {
  margin:0 16px 12px; padding:14px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(var(--ov),.025), rgba(var(--ov),.005));
  border:1px solid rgba(var(--ov),.07);
}
.ld-sec-h {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:10px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; margin-bottom:10px;
}
.ld-map {
  width:100%; height:200px;
  border-radius:11px; overflow:hidden;
  background:#0a0f1c; border:1px solid var(--line);
  /* Contain Leaflet's internal high z-index panes/controls so they don't
     paint over later content (photos) or the photo lightbox. */
  position:relative; z-index:0; isolation:isolate;
}
.ld-map .leaflet-tile-pane { filter:brightness(.92) saturate(1.05); }
.ld-map-empty {
  height:100%; display:grid; place-items:center;
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:11px;
  color:var(--muted);
}
.ld-dist {
  margin-top:10px;
  display:flex; align-items:center; gap:8px;
  padding:9px 11px; border-radius:9px;
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:11.5px;
  font-weight:600;
}
.ld-dist .material-symbols-outlined { font-size:16px; }
.ld-dist .lbl { flex:1; }
.ld-dist .num { font-weight:700; }
.ld-dist.ok {
  background:rgba(116,255,138,.08); color:var(--accent);
  border:1px solid rgba(116,255,138,.22);
}
.ld-dist.warn {
  background:rgba(255,179,71,.08); color:var(--warn);
  border:1px solid rgba(255,179,71,.25);
}
.ld-dist.info {
  background:rgba(122,184,255,.06); color:var(--info);
  border:1px solid rgba(122,184,255,.2);
}
.ld-map-legend {
  display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
}
.ld-map-legend .lg {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9.5px;
  font-weight:600; padding:4px 8px; border-radius:5px;
  text-transform:uppercase; letter-spacing:.06em;
  display:inline-flex; align-items:center; gap:6px;
}
.ld-map-legend .lg::before {
  content:''; width:8px; height:8px; border-radius:50%;
}
.ld-map-legend .lg-blue { background:rgba(122,184,255,.1); color:#7ab8ff; border:1px solid rgba(122,184,255,.25); }
.ld-map-legend .lg-blue::before { background:#7ab8ff; }
.ld-map-legend .lg-red { background:rgba(255,107,107,.1); color:#ff6b6b; border:1px solid rgba(255,107,107,.25); }
.ld-map-legend .lg-red::before { background:#ff6b6b; }
.ld-map-legend .lg-green { background:rgba(116,255,138,.1); color:var(--accent); border:1px solid rgba(116,255,138,.25); }
.ld-map-legend .lg-green::before { background:#74ff8a; }
.ld-map-links {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.ld-map-links a {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 11px; border-radius:8px;
  background:rgba(122,184,255,.08); color:var(--info);
  border:1px solid rgba(122,184,255,.2);
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:10.5px;
  font-weight:600; text-decoration:none;
}
.ld-map-links a:hover { background:rgba(122,184,255,.14); }
.ld-map-links .material-symbols-outlined { font-size:14px; }

.ld-check-row {
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:10px;
  padding:8px 11px; border-radius:9px;
  margin-top:6px;
  background:var(--bg-1); border:1px solid var(--line);
}
.ld-check-row .l {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:11px;
  color:var(--fg); font-weight:600;
}
.ld-check-row .v {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-size:11.5px;
  color:var(--muted); text-align:right; font-weight:600;
}
.ld-check-row.tone-ok { border-color:rgba(116,255,138,.25); }
.ld-check-row.tone-ok .v { color:var(--accent); }
.ld-check-row.tone-warn { border-color:rgba(255,179,71,.22); }
.ld-check-row.tone-warn .v { color:var(--warn); }
.ld-check-row.tone-bad { border-color:rgba(255,107,107,.25); }
.ld-check-row.tone-bad .v { color:var(--danger); }

.ld-photo-link {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:11.5px;
  font-weight:600; color:var(--info); text-decoration:none;
  padding:8px 12px; border-radius:8px;
  background:rgba(122,184,255,.08); border:1px solid rgba(122,184,255,.22);
}
.ld-photo-link:hover { background:rgba(122,184,255,.14); }

.ld-field-row {
  display:grid; grid-template-columns:140px 1fr;
  gap:10px; padding:7px 0;
  border-bottom:1px solid rgba(var(--ov),.04);
}
.ld-field-row:last-child { border-bottom:none; }
.ld-field-row .k {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:10.5px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
  font-weight:600; word-break:break-word;
}
.ld-field-row .v {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-size:12px;
  color:var(--fg); word-break:break-word;
}

/* iOS bottom tab bar — 60px with labels, translucent material header */
.tabbar {
  position:fixed; left:0; right:0; bottom:0;
  height:60px; padding-bottom:var(--safe-bottom);
  background:rgba(0,0,0,.78); backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(5, 1fr);
  align-items:stretch;
  overflow:visible;
  z-index:50;
}
.tabbar .tb {
  appearance:none; background:none; border:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--muted); position:relative; padding:6px 2px 6px;
  min-width:0;                    /* allow grid cell to shrink, prevents overflow */
  transition:opacity .12s ease, color .15s ease;
  cursor:pointer;
}
.tabbar .tb:not(.tb-compose-fab):active { opacity:.5; }
.tabbar .tb .material-symbols-outlined { font-size:24px; line-height:1; }
.tabbar .tb .lb {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-size:10.5px;
  text-transform:none; letter-spacing:-0.005em; font-weight:500;
  line-height:1.1;
  max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tabbar .tb.on { color:var(--accent); }
.tabbar .tb.on .material-symbols-outlined {
  font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.tabbar .tb .nb {
  position:absolute; top:4px; right:50%; margin-right:-20px;
  min-width:18px; height:18px; padding:0 5px; border-radius:9999px;
  background:var(--danger); color:#fff;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:-0.012em;
  display:grid; place-items:center; box-shadow:0 0 0 2px rgba(0,0,0,.78);
}
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}

/* hide admin-only when not admin */
body:not(.is-admin) .admin-only { display:none !important; }
/* Tabbar is always 5 columns — every role gets the Me tab so they can sign out. */

/* iOS-style modal scrim + bottom sheet */
.modal {
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.5); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  display:flex; align-items:flex-end; justify-content:center;
  animation:fadeIn .22s ease-out;
}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.sheet {
  width:100%; max-width:480px;
  background:var(--bg-1);
  border:0;
  border-radius:14px 14px 0 0;
  padding:10px 16px calc(20px + var(--safe-bottom));
  animation:slideUp .28s cubic-bezier(.2,.9,.25,1);
  max-height:88vh; overflow-y:auto;
  box-shadow:0 -10px 30px rgba(0,0,0,.4);
}
@keyframes slideUp { from{transform:translateY(24px); opacity:0;} to{transform:translateY(0); opacity:1;} }
.sheet-grab {
  width:36px; height:5px; background:rgba(235,235,245,.3);
  border-radius:9999px; margin:0 auto 12px;
}
.sheet h3 {
  margin:0 0 6px;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:20px; font-weight:600; letter-spacing:-0.024em;
  color:var(--fg);
}
.sheet-desc {
  color:var(--muted); font-size:14px; line-height:1.45;
  margin:0 0 14px; letter-spacing:-0.016em; font-weight:400;
}
.sheet form { display:flex; flex-direction:column; gap:14px; }
.sheet-actions {
  display:flex; gap:10px; margin-top:8px;
}
.sheet-actions .btn { flex:1; }

/* PIN reveal — iOS keypad-feel digits in a tinted accent panel */
.pin-reveal {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:38px; font-weight:600; letter-spacing:0.16em;
  text-align:center; padding:22px;
  background:rgba(10,132,255,.14);
  border:0;
  border-radius:14px;
  color:var(--accent);
  margin:14px 0;
  font-variant-numeric:tabular-nums;
}

/* Confirm dialog — iOS centered dialog within bottom sheet */
.sheet-confirm { text-align:center; padding-top:18px; }
.sheet-confirm h3 {
  margin:6px 0 4px;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:18px; font-weight:600; letter-spacing:-0.022em;
}
.sheet-confirm .sheet-desc {
  text-align:center; font-size:14px; line-height:1.5; font-weight:400;
  margin:0 auto 18px; max-width:34ch; color:var(--muted);
  letter-spacing:-0.016em;
}
.cf-icon {
  width:60px; height:60px; border-radius:9999px;
  display:grid; place-items:center;
  margin:6px auto 14px;
  background:rgba(10,132,255,.18);
  border:0;
  color:var(--accent);
}
.cf-icon .material-symbols-outlined {
  font-size:30px;
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;
}
.modal-confirm-danger .cf-icon {
  background:rgba(255,69,58,.18);
  color:var(--danger);
}
.modal-confirm-danger #cf-confirm {
  background:var(--danger) !important;
  color:#fff !important;
}
.modal-confirm-warn .cf-icon {
  background:rgba(255,159,10,.18);
  color:var(--warn);
}
.sheet-confirm .sheet-actions { margin-top:4px; gap:10px; }
.sheet-confirm .btn {
  padding:13px 16px; font-size:17px; font-weight:600;
  letter-spacing:-0.022em;
}

/* iOS-style toast — pill capsule with backdrop blur, sentence-case label */
.toast {
  position:fixed; bottom:calc(80px + var(--safe-bottom)); left:50%; transform:translateX(-50%);
  padding:11px 18px; border-radius:9999px;
  background:rgba(28,28,30,.92);
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  color:var(--fg);
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:14px; font-weight:500; letter-spacing:-0.016em;
  border:0;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  z-index:200; animation:toastIn .25s cubic-bezier(.2,.9,.25,1);
  max-width:calc(100vw - 32px);
}
.toast.ok  { color:var(--ok); }
.toast.err { color:var(--danger); }
@keyframes toastIn { from{opacity:0; transform:translate(-50%, 10px);} to{opacity:1; transform:translate(-50%, 0);} }

/* Cache-warming visibility pill - floats above the tabbar on cold start
   so we can SEE how long the boot prefetches actually take. */
.cache-pill {
  position:fixed; left:50%; bottom:calc(80px + var(--safe-bottom)); transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:9999px;
  background:rgba(28,28,30,.86);
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(var(--ov),.07);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:12.5px; letter-spacing:-0.014em; color:var(--fg);
  z-index:180; pointer-events:none; white-space:nowrap;
  max-width:calc(100vw - 32px);
  animation:cpIn .28s cubic-bezier(.2,.9,.25,1);
  transition:opacity .35s ease, transform .35s ease;
}
.cache-pill .cp-dot {
  width:7px; height:7px; border-radius:99px; background:var(--accent);
  animation:cpPulse 1s ease-in-out infinite;
  flex:0 0 auto;
}
.cache-pill .cp-check {
  width:14px; height:14px; line-height:14px; text-align:center;
  border-radius:99px; background:var(--ok); color:#fff;
  font-size:10px; font-weight:700;
  flex:0 0 auto;
}
.cache-pill .cp-l { font-weight:600; }
.cache-pill .cp-t {
  color:var(--muted); font-size:11px;
  font-family:'Noto Sans Mono','SF Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
}
.cache-pill .cp-c {
  color:var(--dim); font-size:10.5px;
  font-family:'Noto Sans Mono','SF Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
}
.cache-pill.is-done .cp-l { color:var(--ok); }
.cache-pill.is-fade { opacity:0; transform:translate(-50%, 8px); }
@keyframes cpIn { from{opacity:0; transform:translate(-50%, 12px);} to{opacity:1; transform:translate(-50%, 0);} }
@keyframes cpPulse { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.5; transform:scale(.78);} }
@media (prefers-reduced-motion: reduce) {
  .cache-pill, .cache-pill .cp-dot { animation:none !important; transition:none !important; }
}

.bottom-pad { height:14px; }

/* ============================================================
   MAP SCREEN (P3.1)
   ============================================================ */

/* Map screen — full-bleed canvas; chips + actions float as glass overlays.
   No topbar (this is a map; the canvas IS the screen).
   padding-bottom reserves space for the fixed tabbar so the sheet doesn't
   slide under it. */
.screen-map {
  position:relative; display:block;
  height:100%; overflow:hidden;
  padding-bottom:calc(62px + var(--safe-bottom));
}

/* Floating control bar: chips left, action FABs right */
.map-ctrl {
  position:absolute; left:10px; right:10px;
  top:calc(10px + var(--safe-top)); z-index:600;
  display:flex; align-items:center; gap:8px;
  pointer-events:none;  /* let the bar transmit gestures, but its children grab them */
}
.map-chips-scroll {
  flex:1 1 auto; min-width:0;
  display:flex; gap:6px; padding:6px;
  background:rgba(7,11,20,.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(var(--ov),.08);
  border-radius:99px;
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  pointer-events:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.map-chips-scroll::-webkit-scrollbar { display:none; }
.map-ctrl-actions {
  flex-shrink:0;
  display:flex; gap:6px;
  pointer-events:auto;
}
.map-fab {
  appearance:none; cursor:pointer;
  width:38px; height:38px; border-radius:50%;
  background:rgba(7,11,20,.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(var(--ov),.08);
  color:var(--fg);
  display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .15s ease, background .15s ease;
}
.map-fab:hover { background:rgba(21,29,46,.92); border-color:rgba(var(--ov),.16); }
.map-fab:active { transform:scale(.94); }
.map-fab .material-symbols-outlined { font-size:20px; }
/* "My location" toggle on-state — accent ring + filled icon */
.map-fab.on {
  background:rgba(122,184,255,.18);
  border-color:rgba(122,184,255,.45);
  color:var(--info);
  box-shadow:0 0 0 3px rgba(122,184,255,.12), 0 8px 24px rgba(0,0,0,.4);
}
.map-fab.on .material-symbols-outlined {
  font-variation-settings:'FILL' 1,'wght' 600;
}

/* Self-marker — pulsing blue dot with accuracy ring (drawn separately as
   L.circle in JS). Pulse uses a synced ring + dot. */
.self-marker {
  position:relative; width:22px; height:22px;
}
.self-marker .ring {
  position:absolute; inset:-6px; border-radius:50%;
  background:radial-gradient(circle, rgba(122,184,255,.45), rgba(122,184,255,0) 70%);
  animation:selfPulse 1.6s ease-out infinite;
}
.self-marker .dot {
  position:absolute; inset:0; border-radius:50%;
  background:#7ab8ff;
  border:2.5px solid #fff;
  box-shadow:0 0 0 1.5px rgba(7,11,20,.6), 0 6px 14px rgba(0,0,0,.5);
}
@keyframes selfPulse {
  0%   { transform:scale(.6); opacity:.8; }
  80%  { transform:scale(1.6); opacity:0; }
  100% { transform:scale(1.6); opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  .self-marker .ring { animation:none; opacity:.4; transform:scale(1.2); }
}

/* Distance badge — sits inline next to the row name when self-loc is on */
.dist-badge {
  display:inline-block; margin-left:8px;
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace;
  font-size:9.5px; font-weight:700; letter-spacing:.06em;
  padding:2px 7px; border-radius:5px;
  background:rgba(122,184,255,.12); color:var(--info);
  border:1px solid rgba(122,184,255,.22);
  vertical-align:middle;
}

.map-chip {
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px; border-radius:99px;
  background:transparent;
  border:1px solid transparent;
  color:var(--muted);
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace;
  font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap;
  transition:all .15s ease;
}
.map-chip .material-symbols-outlined { font-size:14px; }
.map-chip .dot {
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--info));
}
.map-chip .cnt {
  font-size:9.5px; padding:2px 6px; border-radius:5px;
  background:rgba(var(--ov),.06); color:var(--muted);
  font-weight:700;
}
.map-chip:hover { color:var(--fg); }
.map-chip.on {
  background:rgba(116,255,138,.14); color:var(--accent);
  border-color:rgba(116,255,138,.28);
}
.map-chip.on .cnt {
  background:rgba(116,255,138,.18); color:var(--accent);
}

/* Tiny summary pill — shows live counts at top-right under the controls */
.map-summary {
  position:absolute; right:14px; z-index:550;
  top:calc(60px + var(--safe-top));
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace;
  font-size:9.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding:5px 10px; border-radius:99px;
  background:rgba(7,11,20,.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(var(--ov),.06);
  pointer-events:none;
}

.map-canvas {
  position:absolute; inset:0; bottom:calc(62px + var(--safe-bottom));
  background:
    radial-gradient(800px 600px at 50% 40%, rgba(122,184,255,.05), transparent 60%),
    var(--bg-0);
}
.map-canvas .leaflet-container {
  width:100%; height:100%;
  background:var(--bg-0);
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
}
.map-canvas .leaflet-control-attribution {
  background:rgba(7,11,20,.7); color:var(--dim);
  font-size:9px; padding:2px 6px;
}
.map-canvas .leaflet-control-attribution a { color:var(--muted); }
.map-canvas .leaflet-control-zoom a {
  background:rgba(21,29,46,.92); color:var(--fg);
  border-color:rgba(var(--ov),.08);
  width:34px; height:34px; line-height:34px;
}
.map-canvas .leaflet-control-zoom a:hover { background:rgba(29,39,64,.96); }
.map-canvas .leaflet-bar { border:0; box-shadow:0 4px 20px rgba(0,0,0,.5); }

/* Marker — round avatar pin with status ring */
.pin-marker {
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:700; font-size:15px;
  color:#0a0a0a;
  border:2px solid rgba(7,11,20,.85);
  box-shadow:0 0 0 3px var(--accent), 0 6px 18px rgba(0,0,0,.55);
  transform:translate(-50%, -100%);
  cursor:pointer;
}
.pin-marker.warn { box-shadow:0 0 0 3px var(--warn), 0 6px 18px rgba(0,0,0,.55); }
.pin-marker.info { box-shadow:0 0 0 3px var(--info), 0 6px 18px rgba(0,0,0,.55); }
.pin-marker.purple { box-shadow:0 0 0 3px var(--purple), 0 6px 18px rgba(0,0,0,.55); }

/* Leaflet popup — dashboard glass card */
.leaflet-popup-content-wrapper {
  background:linear-gradient(180deg, rgba(21,29,46,.96), rgba(14,20,34,.96));
  color:var(--fg);
  border:1px solid rgba(var(--ov),.1);
  border-radius:14px;
  box-shadow:0 16px 48px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.4);
  padding:0;
}
.leaflet-popup-tip {
  background:linear-gradient(180deg, rgba(21,29,46,.96), rgba(14,20,34,.96));
  border:1px solid rgba(var(--ov),.1);
}
.leaflet-popup-content {
  margin:0; padding:14px 16px 12px;
  font-size:12.5px; line-height:1.45;
  min-width:200px; max-width:260px;
}
.leaflet-popup-close-button {
  color:var(--muted) !important;
  width:24px !important; height:24px !important;
  font-size:16px !important; padding:2px 0 0 !important;
  top:6px !important; right:6px !important;
}
.leaflet-popup-close-button:hover { color:var(--fg) !important; }

/* Popup header row: status chip + title */
.leaflet-popup-content .pp-head {
  display:flex; align-items:center; gap:7px;
  margin-bottom:6px;
}
.leaflet-popup-content .pp-status {
  display:inline-flex; align-items:center; gap:5px;
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace;
  font-size:9px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase;
  padding:3px 8px; border-radius:5px;
  background:rgba(116,255,138,.12); color:var(--accent);
  border:1px solid rgba(116,255,138,.25);
}
.leaflet-popup-content .pp-status::before {
  content:''; width:6px; height:6px; border-radius:50%; background:currentColor;
}
.leaflet-popup-content .pp-status.s-info {
  background:rgba(122,184,255,.12); color:var(--info); border-color:rgba(122,184,255,.25);
}
.leaflet-popup-content .pp-status.s-warn {
  background:rgba(255,179,71,.14); color:var(--warn); border-color:rgba(255,179,71,.28);
}
.leaflet-popup-content .pp-status.s-danger {
  background:rgba(255,107,107,.14); color:var(--danger); border-color:rgba(255,107,107,.3);
}
.leaflet-popup-content .pp-status.s-dim {
  background:rgba(91,104,144,.18); color:var(--dim); border-color:rgba(91,104,144,.32);
}

.leaflet-popup-content .pp-name {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-weight:700; font-size:14.5px; letter-spacing:-0.01em;
  color:var(--fg);
  display:block;
  word-break:break-word;
  padding-right:22px;  /* room for close button */
}
.leaflet-popup-content .pp-meta {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace;
  font-size:10.5px; color:var(--muted); margin-top:3px;
  display:flex; align-items:center; gap:5px;
}
.leaflet-popup-content .pp-meta .material-symbols-outlined {
  font-size:13px; color:var(--dim);
}

/* Popup mini stats grid */
.leaflet-popup-content .pp-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  margin:9px 0 4px;
}
.leaflet-popup-content .pp-stat {
  padding:7px 9px; border-radius:8px;
  background:var(--bg-1); border:1px solid var(--line);
}
.leaflet-popup-content .pp-stat .pn {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:15px; font-weight:800; letter-spacing:-0.02em;
  color:var(--fg); font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.leaflet-popup-content .pp-stat .pl {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace;
  font-size:8.5px; font-weight:700; letter-spacing:.1em;
  color:var(--muted); text-transform:uppercase; margin-top:1px;
}

/* Popup CTA button */
.leaflet-popup-content .pp-link {
  display:flex; align-items:center; justify-content:center; gap:5px;
  margin-top:9px; padding:8px 10px;
  border-radius:9px;
  background:linear-gradient(180deg, rgba(116,255,138,.14), rgba(116,255,138,.06));
  color:var(--accent);
  border:1px solid rgba(116,255,138,.28);
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace;
  font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .15s ease;
}
.leaflet-popup-content .pp-link:hover {
  background:linear-gradient(180deg, rgba(116,255,138,.2), rgba(116,255,138,.1));
}
.leaflet-popup-content .pp-link .material-symbols-outlined { font-size:14px; }

/* Bottom sheet listing inspectors */
/* Bottom sheet — drag-snap with min/peek/half/full points (QC Dashboard pattern).
   Sits above the fixed tabbar. Sheet height is driven by --m-snap, which is
   updated by JS during drag and snapped to one of four points on release.
   At 'full', tabbar + control bar slide out so the sheet truly takes over. */
:root {
  --m-snap-min:  80px;
  --m-snap-peek: 34dvh;
  --m-snap-half: 60dvh;
  --m-snap-full: 88dvh;
}
.map-sheet {
  position:absolute; left:0; right:0;
  bottom:calc(62px + var(--safe-bottom));
  z-index:520;
  height:var(--m-snap, var(--m-snap-peek));
  background:linear-gradient(180deg, rgba(20,28,46,.97), rgba(14,20,34,.99));
  border-top:1px solid rgba(var(--ov),.08);
  border-radius:22px 22px 0 0;
  display:flex; flex-direction:column;
  box-shadow:0 -16px 40px rgba(0,0,0,.55), 0 -1px 0 rgba(var(--ov),.04);
  transition:
    height .28s cubic-bezier(.2,.9,.25,1),
    bottom .28s cubic-bezier(.2,.9,.25,1);
  touch-action:none;  /* drag gestures handled by JS */
}
.map-sheet.is-dragging {
  transition:none;  /* follow finger 1:1 during drag */
}
/* When the sheet is at 'full', hide the tabbar and control bar so it really
   takes over. Toggled by JS adding data-snap='full' to the screen. */
#screen-map[data-snap="full"] .map-sheet {
  bottom:0;
  border-radius:0;
}
#screen-map[data-snap="full"] ~ .tabbar {
  transform:translateY(100%);
  pointer-events:none;
}
#screen-map[data-snap="full"] .map-ctrl,
#screen-map[data-snap="full"] .map-summary {
  opacity:0; pointer-events:none;
  transform:translateY(-12px);
}
.tabbar {
  transition:transform .28s cubic-bezier(.2,.9,.25,1);
}
.map-ctrl, .map-summary {
  transition:opacity .2s ease, transform .25s cubic-bezier(.2,.9,.25,1);
}

/* Drag handle — 26px hit area, visible 38×4 grab bar */
.map-sheet-grab {
  appearance:none; background:none; border:0; cursor:grab;
  width:100%; padding:10px 0 6px;
  display:grid; place-items:center;
  flex-shrink:0;
  touch-action:none;
}
.map-sheet-grab:active { cursor:grabbing; }
.map-sheet-grab::before {
  content:''; display:block;
  width:38px; height:4px; border-radius:99px;
  background:rgba(var(--ov),.22);
  transition:background .15s ease, width .15s ease;
}
.map-sheet-grab:hover::before,
.map-sheet.is-dragging .map-sheet-grab::before { background:rgba(var(--ov),.36); width:52px; }

/* Tiny attribution pill in the bottom-left corner (replaces the chunky bar) */
.map-attr {
  position:absolute; left:8px; bottom:calc(72px + var(--safe-bottom));
  z-index:510;
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace;
  font-size:8.5px; font-weight:500;
  color:var(--dim);
  padding:3px 7px; border-radius:5px;
  background:rgba(7,11,20,.6);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(var(--ov),.05);
  pointer-events:auto; opacity:.7;
}
.map-attr a { color:var(--muted); text-decoration:none; }
.map-attr a:hover { color:var(--fg); }
#screen-map[data-snap="full"] .map-attr { opacity:0; pointer-events:none; }
.map-sheet-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:2px 16px 8px;
}
.map-sheet-head .msh-l {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:10px;
  color:var(--muted); letter-spacing:.1em; font-weight:600;
}
.map-sheet-head .msh-r {
  font-size:10.5px; color:var(--info); font-weight:700;
}
.map-list {
  flex:1 1 auto; min-height:0;
  overflow-y:auto;
  padding:0 12px 12px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;  /* don't pass scroll to the page underneath */
  touch-action:pan-y;            /* allow vertical scroll, not horizontal swipe */
}
.map-row {
  display:grid; grid-template-columns:36px minmax(0,1fr) auto;
  gap:10px; align-items:center;
  padding:10px 10px;
  background:rgba(var(--ov),.025);
  border:1px solid rgba(var(--ov),.05);
  border-radius:11px;
  margin-bottom:8px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.map-row:hover, .map-row.active {
  background:rgba(122,184,255,.06);
  border-color:rgba(122,184,255,.28);
}
.map-row .av {
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:700; font-size:13px;
  color:#0a0a0a;
}
.map-row .body { min-width:0; }
.map-row .nm {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:700; font-size:13.5px;
  color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.map-row .meta {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:10px;
  color:var(--muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.map-row .pill {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9px;
  text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  padding:4px 8px; border-radius:999px;
  color:var(--accent);
  background:rgba(116,255,138,.08);
  border:1px solid rgba(116,255,138,.22);
}

/* Site-row variant uses a colored dot instead of an avatar */
.map-row .site-dot {
  width:34px; height:34px; border-radius:11px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  flex-shrink:0;
}
.map-row .site-dot .d {
  width:10px; height:10px; border-radius:50%;
  box-shadow:0 0 0 4px rgba(var(--ov),.04);
}

/* Section header inside the bottom-sheet list (used on layer=ALL) */
.map-list-h {
  display:flex; align-items:center; gap:8px;
  padding:10px 4px 6px;
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:10px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.1em;
  font-weight:700;
}
.map-list-h .material-symbols-outlined { font-size:14px; }
.map-list-h:not(:first-child) {
  margin-top:8px; border-top:1px solid var(--line);
}

.map-empty {
  text-align:center; color:var(--muted); padding:18px 12px;
  font-size:12.5px;
}
.map-empty .ic {
  font-size:38px; color:var(--dim); display:block; margin-bottom:6px;
}

/* ============================================================
   SITES SCREEN (P4)
   ============================================================ */
.s-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  margin:14px 16px 12px;
}
.s-stat {
  padding:12px 10px; border-radius:12px;
  background:var(--bg-1); border:1px solid var(--line);
  text-align:center;
}
.s-stat-v {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:800; font-size:24px;
  letter-spacing:-.02em; line-height:1;
  font-variant-numeric: tabular-nums;
}
.s-stat-l {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin-top:6px;
}
.s-stat.ok   { border-color:rgba(116,255,138,.22); background:rgba(116,255,138,.04); }
.s-stat.ok   .s-stat-v { color:var(--accent); }
.s-stat.warn { border-color:rgba(255,179,71,.25); background:rgba(255,179,71,.04); }
.s-stat.warn .s-stat-v { color:var(--warn); }
.s-stat.dim  .s-stat-v { color:var(--muted); }

.s-search {
  display:flex; align-items:center; gap:8px;
  margin:0 16px 10px; padding:9px 12px;
  border-radius:11px;
  background:var(--bg-1); border:1px solid var(--line);
}
.s-search .material-symbols-outlined { font-size:18px; color:var(--muted); }
.s-search input {
  flex:1; background:transparent; border:0; outline:0;
  color:var(--fg); font-size:13px; font-family:inherit;
}
.s-search input::placeholder { color:var(--dim); }

.s-filters {
  display:flex; gap:6px; margin:0 16px 12px; overflow-x:auto;
  scrollbar-width:none;
}
.s-filters::-webkit-scrollbar { display:none; }
.s-filters .filt {
  flex-shrink:0;
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:10px;
  text-transform:uppercase; letter-spacing:.07em; font-weight:700;
  padding:7px 12px; border-radius:8px;
  background:var(--bg-1); border:1px solid var(--line); color:var(--muted);
}
.s-filters .filt.on {
  background:rgba(122,184,255,.12); border-color:rgba(122,184,255,.28); color:var(--info);
}

.s-list { padding:0 16px; }
.s-row {
  display:flex; align-items:center; gap:12px;
  padding:13px 14px; margin-bottom:8px; border-radius:12px;
  background:var(--bg-1); border:1px solid var(--line);
}
.s-row.overdue { border-left:3px solid var(--warn); }
.s-row.never   { border-left:3px solid var(--dim); }
.s-row.today   { border-left:3px solid var(--accent); }

.s-row-l { flex:1; min-width:0; }
.s-row-name {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:700; font-size:14px;
  color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.s-row-meta {
  font-size:10.5px; color:var(--muted); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.s-row-r {
  display:flex; flex-direction:column; align-items:flex-end; gap:5px;
  flex-shrink:0;
}
.s-score {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:11.5px; font-weight:700;
  letter-spacing:.02em;
}
.s-score.ok  { color:var(--accent); }
.s-score.mid { color:var(--info); }
.s-score.low { color:var(--danger); }
.s-score.dim { color:var(--dim); }

.s-status {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  padding:3px 7px; border-radius:5px;
}
.s-status.today   { background:rgba(116,255,138,.14); border:1px solid rgba(116,255,138,.28); color:var(--accent); }
.s-status.ok      { background:rgba(116,255,138,.08); border:1px solid rgba(116,255,138,.18); color:var(--accent); }
.s-status.due     { background:rgba(122,184,255,.12); border:1px solid rgba(122,184,255,.25); color:var(--info); }
.s-status.overdue { background:rgba(255,179,71,.14);  border:1px solid rgba(255,179,71,.30);  color:var(--warn); }
.s-status.never   { background:rgba(139,151,173,.10); border:1px solid rgba(139,151,173,.20); color:var(--muted); }

/* ============================================================
   AUDIT LOG SCREEN (P5)
   ============================================================ */
.al-filters {
  display:flex; gap:6px; margin:14px 16px 10px;
}
.al-filters .filt {
  flex:1; font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.07em; font-weight:700;
  padding:8px 0; border-radius:8px;
  background:var(--bg-1); border:1px solid var(--line); color:var(--muted);
}
.al-filters .filt.on {
  background:rgba(122,184,255,.12); border-color:rgba(122,184,255,.28); color:var(--info);
}

.al-action-pills {
  display:flex; flex-wrap:wrap; gap:6px; margin:0 16px 12px;
}
.al-action-pill {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.07em; font-weight:700;
  padding:4px 8px; border-radius:5px;
  background:rgba(var(--ov),.04); border:1px solid rgba(var(--ov),.08); color:var(--muted);
}
.al-action-pill.ok   { background:rgba(116,255,138,.10); border-color:rgba(116,255,138,.22); color:var(--accent); }
.al-action-pill.warn { background:rgba(255,179,71,.10); border-color:rgba(255,179,71,.25); color:var(--warn); }
.al-action-pill.err  { background:rgba(255,107,107,.10); border-color:rgba(255,107,107,.25); color:var(--danger); }
.al-action-pill.info { background:rgba(122,184,255,.08); border-color:rgba(122,184,255,.18); color:var(--info); }

.al-list { padding:0 16px; }
.al-row {
  padding:11px 13px; margin-bottom:7px; border-radius:11px;
  background:var(--bg-1); border:1px solid var(--line);
}
.al-row.ok   { border-left:3px solid var(--accent); }
.al-row.warn { border-left:3px solid var(--warn); }
.al-row.err  { border-left:3px solid var(--danger); }
.al-row.info { border-left:3px solid var(--info); }

.al-row-head {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  margin-bottom:4px;
}
.al-action {
  font-size:11px; font-weight:700; color:var(--fg);
  text-transform:uppercase; letter-spacing:.04em;
}
.al-time {
  font-size:10px; color:var(--dim);
}
.al-actor {
  font-size:12px; color:var(--muted); margin-bottom:3px;
}
.al-details {
  font-size:10.5px; color:var(--dim);
  word-break:break-all; white-space:pre-wrap;
}

/* ============================================================
   TEAM PERFORMANCE (P6)
   ============================================================ */
.h-team-cta {
  appearance:none; width:calc(100% - 32px); margin:14px 16px 6px;
  padding:14px; border-radius:14px;
  background:linear-gradient(135deg, rgba(196,168,255,.10), rgba(122,184,255,.05));
  border:1px solid rgba(196,168,255,.22);
  display:flex; align-items:center; gap:12px;
  text-align:left;
}
.h-team-cta .material-symbols-outlined { font-size:22px; color:var(--purple); }
.h-team-cta-l { flex:1; }
.h-team-cta-t {
  display:block; font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:700;
  font-size:14px; color:var(--fg);
}
.h-team-cta-s {
  display:block; font-size:10.5px; color:var(--muted); margin-top:2px;
}
.h-team-cta .chev { color:var(--dim); }

.tp-filters {
  display:flex; gap:6px; margin:14px 16px 12px;
}
.tp-filters .filt {
  flex:1; font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.07em; font-weight:700;
  padding:8px 0; border-radius:8px;
  background:var(--bg-1); border:1px solid var(--line); color:var(--muted);
}
.tp-filters .filt.on {
  background:rgba(196,168,255,.12); border-color:rgba(196,168,255,.28); color:var(--purple);
}

.tp-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  margin:0 16px 14px;
}
.tp-stat {
  padding:12px 10px; border-radius:12px;
  background:var(--bg-1); border:1px solid var(--line);
  text-align:center;
}
.tp-stat-v {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:800; font-size:24px;
  letter-spacing:-.02em; line-height:1; color:var(--fg);
  font-variant-numeric: tabular-nums;
}
.tp-stat-l {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin-top:6px;
}

.tp-list { padding:0 16px; }
.tp-row {
  display:flex; align-items:center; gap:11px;
  padding:11px 12px; margin-bottom:7px; border-radius:11px;
  background:var(--bg-1); border:1px solid var(--line);
}
.tp-row.inactive { opacity:.55; }

.tp-rank {
  width:38px; flex-shrink:0; text-align:center;
  font-size:13px; font-weight:700; color:var(--muted);
  font-variant-numeric: tabular-nums;
}
.tp-rank.gold   { color:#ffd479; }
.tp-rank.silver { color:#cfd5e3; }
.tp-rank.bronze { color:#e6a87a; }

.tp-row-body { flex:1; min-width:0; }
.tp-row-name {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:700; font-size:13.5px;
  color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tp-row-meta {
  font-size:10.5px; color:var(--muted); margin-top:2px;
}
.tp-row-r {
  display:flex; flex-direction:column; align-items:flex-end; gap:3px;
  flex-shrink:0;
}
.tp-score {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:12px; font-weight:700;
}
.tp-score.ok  { color:var(--accent); }
.tp-score.mid { color:var(--info); }
.tp-score.low { color:var(--danger); }
.tp-score.dim { color:var(--dim); }

.tp-trend {
  font-family:'Noto Sans Mono','Noto Sans Lao',monospace; font-size:9.5px; font-weight:700;
}
.tp-trend.up   { color:var(--accent); }
.tp-trend.down { color:var(--danger); }
.tp-trend.flat { color:var(--dim); }

/* ============================================================
   COMPOSE CENTER FAB (tabbar slot 3) — iOS app-icon language:
   squircle, subtle vertical shading, soft ambient glow, inner top
   highlight so it reads as a tactile, tappable surface (not flat).
   Selector wins over `.tabbar .tb { background:none }` because it
   matches BOTH classes (specificity 0,2,0) and comes later.
   ============================================================ */
/* FAB sized as a peer to the tab icons (not a giant). Lifted modestly,
   shadow tightened so it doesn't bleed into the neighbour tab columns. */
.tabbar .tb.tb-compose-fab {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:9999px;
  background:
    linear-gradient(180deg, #3a9eff 0%, #0a84ff 60%, #0a78e6 100%) !important;
  box-shadow:
    0 3px 8px rgba(10,132,255,.32),
    inset 0 1px 0 rgba(var(--ov),.22);
  margin-top:-10px;
  margin-bottom:0;
  align-self:start;
  justify-self:center;
  border:0;
  color:#fff;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, filter .15s ease;
  padding:0;
  z-index:2;
}
.tabbar .tb.tb-compose-fab:active {
  transform:scale(.92);
  box-shadow:
    0 2px 5px rgba(10,132,255,.28),
    inset 0 1px 0 rgba(var(--ov),.18);
  filter:brightness(.92);
}
.tabbar .tb.tb-compose-fab .material-symbols-outlined {
  font-size:24px; line-height:1; color:#fff;
  font-variation-settings:'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
.tabbar .tb.tb-compose-fab .lb { display:none; }
.tabbar .tb.tb-compose-fab.on .material-symbols-outlined {
  font-variation-settings:'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

/* ============================================================
   COMPOSE ACTION SHEET
   ============================================================ */
.sheet-compose {
  padding-bottom:calc(24px + var(--safe-bottom));
}
.compose-head {
  display:flex; align-items:center; gap:14px;
  padding:4px 0 18px;
}
.compose-head-icon {
  font-size:28px; color:var(--info);
  background:rgba(122,184,255,.12); border-radius:12px;
  padding:10px; line-height:1;
}
.compose-head-title { font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:700; font-size:18px; }
.compose-head-sub { font-size:11px; color:var(--muted); }
.compose-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-bottom:16px;
}
.compose-tile {
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  background:rgba(var(--ov),.04); border:1px solid var(--line);
  border-radius:14px; padding:16px 14px;
  cursor:pointer; text-align:left;
  transition:background .15s, border-color .15s, transform .12s;
}
.compose-tile:active { transform:scale(.96); background:rgba(var(--ov),.08); }
.ct-icon { font-size:24px; margin-bottom:4px; }
.ct-label { font-family:'Noto Sans','Noto Sans Lao',sans-serif; font-weight:600; font-size:13.5px; color:var(--fg); }
.ct-sub { font-size:10.5px; color:var(--muted); font-family:'Noto Sans Mono','Noto Sans Lao',monospace; }
.compose-coming {
  text-align:center; color:var(--dim); font-size:10.5px;
  padding-top:6px;
}

/* ============================================================
   ALERTS POPUP SHEET (bell icon)
   ============================================================ */
.sheet-alerts { min-height:60vh; padding-bottom:calc(20px + var(--safe-bottom)); }
.sheet-toprow {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:2px 0 14px;
}
.sheet-toprow h3 {
  margin:0; flex:1;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-weight:600; font-size:22px; letter-spacing:-0.026em;
  color:var(--fg);
}
/* Small variant of the topbar icon button — used for sheet "close" buttons.
   Borderless, 36×36, system-blue tint, iOS press feedback. */
.tb-icon.sm {
  width:36px; height:36px; border-radius:9999px;
  background:rgba(118,118,128,.24);
  border:0; color:var(--fg);
  flex-shrink:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, opacity .15s ease;
  cursor:pointer;
}
.tb-icon.sm:active { transform:scale(.92); opacity:.7; }
.tb-icon.sm .material-symbols-outlined { font-size:18px; color:var(--fg); }

/* ============================================================
   PULL-TO-REFRESH
   ============================================================ */
.ptr-indicator {
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:0; overflow:hidden; opacity:0;
  transition:height .2s ease, opacity .2s ease;
  pointer-events:none;
  color:var(--muted);
}
.ptr-indicator.ptr-visible {
  height:52px; opacity:1;
}
.ptr-indicator.ptr-releasing .ptr-arrow { transform:rotate(180deg); }
.ptr-indicator.ptr-loading .ptr-arrow { display:none; }
.ptr-indicator.ptr-loading .ptr-spin { display:block !important; }
.ptr-arrow {
  font-size:18px; transition:transform .2s ease;
}
.ptr-spin {
  width:18px; height:18px;
  border:2.5px solid var(--line); border-top-color:var(--info);
  border-radius:50%; animation:spin .7s linear infinite;
}
.ptr-label { font-size:11px; font-family:'Noto Sans Mono','Noto Sans Lao',monospace; }

@keyframes spin { to { transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* ============================================================
   LOG DETAIL — photo preview, compliance card, chip grid, lightbox
   ============================================================ */

/* Inline photo preview tile - taps open lightbox */
.ld-photo-preview {
  appearance:none; border:0; padding:0; cursor:pointer;
  display:block; width:100%; margin:8px 0 0;
  border-radius:14px; overflow:hidden;
  background:var(--bg-2);
  position:relative;
  transition:transform .15s ease, opacity .15s ease;
}

/* SP-05: 2-column grid for special-detail when there are 2+ photos.
   Resets per-tile margin so the grid gap controls spacing. */
.sd-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.sd-photo-grid .ld-photo-preview { margin: 0; }
.sd-photo-grid .ld-photo-preview img { max-height: 220px; }

/* SP-04: sentinel state shown when photos were attempted but failed. */
.sd-photo-sentinel {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px; align-items: center;
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,179,71,.08);
  border: 1px dashed rgba(255,179,71,.35);
  color: var(--fg, #e7ecf6);
}
.sd-photo-sentinel .material-symbols-outlined {
  font-size: 28px; color: var(--warn, #ffb347);
}
.sd-photo-sentinel .m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sd-photo-sentinel .m b {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--warn, #ffb347);
}
.sd-photo-sentinel .m span { font-size: 12px; color: var(--muted, #8893ad); }
.ld-photo-preview:active { transform:scale(.98); opacity:.85; }
.ld-photo-preview img {
  display:block; width:100%; height:auto; max-height:360px; object-fit:cover;
  background:var(--bg-2);
}
.ld-photo-overlay {
  position:absolute; left:10px; bottom:10px;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:9999px;
  background:rgba(0,0,0,.55); backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  color:#fff;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:12px; font-weight:500; letter-spacing:-0.012em;
}
.ld-photo-overlay .material-symbols-outlined { font-size:16px; }

/* Broken-photo placeholder, shown when the Drive thumbnail / lh3 proxy
   fails to load (file not shared, hot-link blocked). Replaces the empty
   button shell with an explicit "Photo unavailable" indicator. */
.ld-photo-preview.photo-broken,
.sl-photo.photo-broken {
  background: rgba(255,107,107,.06);
  border: 1px dashed rgba(255,107,107,.30);
}
.ld-photo-preview.photo-broken { min-height: 96px; }
.ld-photo-preview.photo-broken .ld-photo-overlay { display: none; }
.photo-broken-msg {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:'JetBrains Mono','Noto Sans Lao',monospace;
  font-size:12px; color:var(--danger, #ff6b6b);
  letter-spacing:.02em;
}
.sl-photo.photo-broken {
  position:relative; min-height: 64px;
}
.sl-photo .photo-broken-msg { font-size:11px; }
.photo-broken-msg .material-symbols-outlined { font-size:18px; }

/* Compliance summary card */
.ld-compliance {
  margin:12px 16px 8px; padding:16px;
  border-radius:14px; background:var(--bg-1); border:0;
  display:grid; grid-template-columns:1fr; gap:12px;
}
.ld-compliance.tone-ok   .ld-comp-num { color:var(--ok); }
.ld-compliance.tone-warn .ld-comp-num { color:var(--warn); }
.ld-compliance.tone-bad  .ld-comp-num { color:var(--danger); }
.ld-compliance.tone-ok   .ld-comp-bar span { background:var(--ok); }
.ld-compliance.tone-warn .ld-comp-bar span { background:var(--warn); }
.ld-compliance.tone-bad  .ld-comp-bar span { background:var(--danger); }
.ld-comp-cap {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:13px; color:var(--muted); font-weight:500; letter-spacing:-0.012em;
  text-transform:none;
}
.ld-comp-num {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:34px; font-weight:700; letter-spacing:-0.026em; line-height:1;
  margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.ld-comp-den {
  font-size:18px; font-weight:500; color:var(--muted); letter-spacing:-0.018em;
}
.ld-comp-sub {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:13px; color:var(--muted); font-weight:400; letter-spacing:-0.012em;
  margin-top:3px;
}
.ld-comp-bar {
  height:6px; border-radius:9999px; background:var(--bg-3); overflow:hidden;
}
.ld-comp-bar span {
  display:block; height:100%; border-radius:9999px;
  transition:width .35s cubic-bezier(.25,.9,.3,1);
}

/* Field group section header */
.ld-grp .ld-sec-h {
  margin:14px 16px 8px;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:13px; font-weight:500; letter-spacing:-0.012em;
  text-transform:none; color:var(--muted);
}

/* Yes/No chip grid — 2 columns mobile, semantic tinted tiles */
.ld-chip-grid {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:8px;
  padding:0 16px 4px;
}
.ld-chip {
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:12px;
  background:var(--bg-1); border:0;
}
.ld-chip .material-symbols-outlined {
  font-size:20px; flex-shrink:0;
  font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.ld-chip-l {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:14px; font-weight:500; letter-spacing:-0.016em;
  color:var(--fg); line-height:1.25;
}
.ld-chip-yes { background:rgba(48,209,88,.14); }
.ld-chip-yes .material-symbols-outlined { color:var(--ok); }
.ld-chip-no  { background:rgba(255,69,58,.14); }
.ld-chip-no  .material-symbols-outlined { color:var(--danger); }
.ld-chip-info { background:rgba(10,132,255,.14); }
.ld-chip-info .material-symbols-outlined { color:var(--accent); }

/* Rating row — label + bar + numeric value, semantic tone */
.ld-rating-row {
  display:grid; grid-template-columns:minmax(0,1fr) 110px auto; gap:14px;
  align-items:center;
  margin:0 16px 8px;
  padding:12px 14px; border-radius:12px;
  background:var(--bg-1) !important;
}
.ld-rr-l {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:15px; font-weight:500; letter-spacing:-0.018em;
  color:var(--fg);
}
.ld-rr-bar {
  height:6px; border-radius:9999px; background:var(--bg-3); overflow:hidden;
}
.ld-rr-bar span {
  display:block; height:100%; border-radius:9999px;
  transition:width .35s cubic-bezier(.25,.9,.3,1);
}
.ld-rr-v {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:17px; font-weight:600; letter-spacing:-0.022em; line-height:1;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.ld-rr-v span {
  font-size:13px; font-weight:400; color:var(--muted); letter-spacing:-0.012em;
  margin-left:1px;
}
.ld-rating-row.tone-ok   .ld-rr-bar span { background:var(--ok); }
.ld-rating-row.tone-ok   .ld-rr-v       { color:var(--ok); }
.ld-rating-row.tone-info .ld-rr-bar span { background:var(--accent); }
.ld-rating-row.tone-info .ld-rr-v       { color:var(--accent); }
.ld-rating-row.tone-warn .ld-rr-bar span { background:var(--warn); }
.ld-rating-row.tone-warn .ld-rr-v       { color:var(--warn); }
.ld-rating-row.tone-bad  .ld-rr-bar span { background:var(--danger); }
.ld-rating-row.tone-bad  .ld-rr-v       { color:var(--danger); }

/* Link tile — for URL fields that aren't images */
.ld-link-tile {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 16px 8px;
  padding:14px 14px; border-radius:12px;
  background:var(--bg-1); color:var(--fg);
  text-decoration:none;
  transition:transform .12s ease, opacity .15s ease;
}
.ld-link-tile:active { transform:scale(.98); opacity:.7; }
.ld-lt-l {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif;
  font-size:15px; font-weight:500; letter-spacing:-0.018em;
  color:var(--fg);
  flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ld-lt-r {
  display:grid; place-items:center;
  width:32px; height:32px; border-radius:9999px;
  background:rgba(10,132,255,.18);
  color:var(--accent);
  flex-shrink:0;
}
.ld-lt-r .material-symbols-outlined { font-size:18px; }

/* Photo lightbox — fullscreen modal */
.photo-lightbox {
  position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:calc(60px + var(--safe-top)) 20px calc(20px + var(--safe-bottom));
  box-sizing:border-box;
}
/* Carousel nav (shown only for multi-photo galleries) */
.photo-lightbox .pl-prev,
.photo-lightbox .pl-next {
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(var(--ov),.14); color:#fff; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:2;
}
.photo-lightbox .pl-prev { left:14px; }
.photo-lightbox .pl-next { right:14px; }
.photo-lightbox .pl-prev:active,
.photo-lightbox .pl-next:active { transform:translateY(-50%) scale(.92); background:rgba(var(--ov),.26); }
.photo-lightbox .pl-counter {
  position:absolute; top:calc(18px + var(--safe-top)); left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono','Noto Sans Lao',monospace; font-size:13px; font-weight:700; color:#fff;
  background:rgba(0,0,0,.45); border:1px solid rgba(var(--ov),.16); padding:5px 12px; border-radius:999px; z-index:2;
}
.photo-lightbox.hidden { display:none; }
.photo-lightbox .pl-img {
  display:block;
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:8px;
  flex-shrink:1;
  opacity:1; transition:opacity .22s ease;
}
.photo-lightbox:not(.hidden) .pl-img { animation:pl-pop .25s ease; }
@keyframes pl-pop { from { transform:scale(.97); } to { transform:scale(1); } }
@media (prefers-reduced-motion:reduce){
  .photo-lightbox .pl-img { transition:none; animation:none; }
}
.photo-lightbox .pl-close,
.photo-lightbox .pl-open {
  position:absolute;
  width:44px; height:44px; border-radius:9999px;
  background:rgba(var(--ov),.16); backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border:0; color:#fff; cursor:pointer; text-decoration:none;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, background .2s ease;
}
.photo-lightbox .pl-close { top:calc(16px + var(--safe-top)); right:16px; }
.photo-lightbox .pl-open  { top:calc(16px + var(--safe-top)); left:16px; }
.photo-lightbox .pl-close:active,
.photo-lightbox .pl-open:active { transform:scale(.92); background:rgba(var(--ov),.24); }
.photo-lightbox .material-symbols-outlined { font-size:22px; }

/* ============================================================
   iOS OVERRIDES — bulk conformance for screens not individually rewritten.
   Applies Apple HIG dark-mode rules to inspector profile, log detail,
   compose sheet, map, sites, audit, team perf, alerts popup, PTR, toasts.
   Strips decorative gradients/borders/glow, normalizes typography,
   restores 44pt taps and pill-radius for actions.
   ============================================================ */

/* Strip all decorative ::before atmosphere glows on cards we didn't refactor */
.ip-hero::before,
.alerts-popup-head::before,
.tp-hero::before { display:none !important; }

/* INSPECTOR PROFILE — flat surface tile */
.ip-hero {
  background:var(--bg-1) !important;
  border:0 !important;
  border-radius:18px !important;
  margin:14px 16px 14px !important;
}
.ip-av {
  background:var(--accent) !important;
  border-radius:9999px !important;
  color:#fff !important;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-weight:600 !important; letter-spacing:-0.022em !important;
  box-shadow:none !important;
}
.ip-name-big {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:17px !important; font-weight:600 !important; letter-spacing:-0.022em !important;
}
.ip-meta {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:13px !important; text-transform:none !important; letter-spacing:-0.012em !important;
  font-weight:400 !important; color:var(--muted) !important;
}
.ip-status {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:12px !important; font-weight:600 !important;
  text-transform:none !important; letter-spacing:-0.012em !important;
  border-radius:9999px !important;
  padding:3px 10px !important;
}
.ip-status.on       { background:rgba(48,209,88,.18) !important;  color:var(--ok) !important;     border:0 !important; }
.ip-status.idle     { background:rgba(10,132,255,.18) !important; color:var(--accent) !important; border:0 !important; }
.ip-status.inactive { background:var(--bg-2) !important;          color:var(--muted) !important;  border:0 !important; }
.ip-status .d { box-shadow:none !important; width:6px !important; height:6px !important; }
.ip-stat {
  background:var(--bg-2) !important; border:0 !important; border-radius:10px !important;
  padding:11px 6px !important;
}
.ip-stat .v {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-weight:600 !important; font-size:18px !important; letter-spacing:-0.022em !important;
  color:var(--fg) !important;
}
.ip-stat:nth-child(1) .v,
.ip-stat:nth-child(2) .v,
.ip-stat:nth-child(3) .v,
.ip-stat:nth-child(4) .v { color:var(--fg) !important; }
.ip-stat .l {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:11px !important; text-transform:none !important; letter-spacing:-0.012em !important;
  font-weight:400 !important; color:var(--muted) !important;
}
.ip-quick { gap:8px !important; }
.ip-qa {
  background:var(--bg-2) !important; border:0 !important; border-radius:10px !important;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:12px !important; font-weight:500 !important;
  text-transform:none !important; letter-spacing:-0.012em !important;
  padding:12px 6px !important;
  transition:transform .12s ease, opacity .15s ease !important;
}
.ip-qa:active { transform:scale(.96) !important; opacity:.7 !important; }
.ip-qa .ipq-l { color:var(--muted) !important; }
.ip-qa.g .material-symbols-outlined,
.ip-qa.b .material-symbols-outlined,
.ip-qa.p .material-symbols-outlined { color:var(--accent) !important; }
.ip-tabs {
  background:rgba(0,0,0,.72) !important;
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
}
.ip-tab {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:15px !important; font-weight:400 !important;
  text-transform:none !important; letter-spacing:-0.02em !important;
  padding:12px 14px !important;
}
.ip-tab.on { color:var(--accent) !important; font-weight:600 !important; }
.ip-tab.on::after {
  background:var(--accent) !important; box-shadow:none !important;
  height:2px !important; border-radius:0 !important;
}
.ip-tab .b {
  background:var(--bg-2) !important; color:var(--fg) !important;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:11px !important; font-weight:600 !important;
  border-radius:9999px !important;
}
.ip-tab.on .b { background:var(--accent) !important; color:#fff !important; }

/* TIMELINE / TOP SITES / LOGS / SPECIAL */
.tl-row, .ts-row, .log-row, .sp-row {
  background:var(--bg-1) !important; border:0 !important; border-radius:12px !important;
  padding:12px 14px !important;
}
.tl-row .t, .log-row .sb, .ts-row .nm {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:13px !important; letter-spacing:-0.012em !important; font-weight:400 !important;
}
.tl-row .e, .log-row .nm {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:15px !important; font-weight:600 !important; letter-spacing:-0.02em !important;
}
.tl-row .e small, .log-row .sb {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:13px !important; color:var(--muted) !important; letter-spacing:-0.012em !important;
}
.tl-row .sc, .log-row .sc {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-weight:600 !important; font-size:17px !important; letter-spacing:-0.022em !important;
}
.tl-row .sc.g, .log-row .sc.g { color:var(--ok) !important; }
.tl-row .sc.k, .log-row .sc.k { color:var(--accent) !important; }
.log-row .ic {
  background:rgba(10,132,255,.18) !important; color:var(--accent) !important;
  border-radius:9999px !important; width:36px !important; height:36px !important;
}
.log-day-head {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:13px !important; text-transform:none !important; letter-spacing:-0.012em !important;
  font-weight:400 !important; color:var(--muted) !important;
}
.log-day-head .pill {
  background:var(--bg-2) !important; color:var(--accent) !important; border:0 !important;
  border-radius:9999px !important; padding:2px 9px !important;
  font-weight:600 !important;
}
.special-list .sp-row { background:var(--bg-1) !important; border:0 !important; }

/* LD (log detail) — flat tiles, no chrome borders */
.ld-check-row, .ld-field-row {
  background:var(--bg-1) !important; border:0 !important;
}
.ld-check-row { border-radius:12px !important; padding:11px 14px !important; }
.ld-check-row .l, .ld-field-row .k {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:13px !important; font-weight:400 !important;
  text-transform:none !important; letter-spacing:-0.012em !important; color:var(--muted) !important;
}
.ld-check-row .v, .ld-field-row .v {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:15px !important; letter-spacing:-0.02em !important; font-weight:400 !important;
}
.ld-check-row.tone-ok   { background:rgba(48,209,88,.10) !important; }
.ld-check-row.tone-warn { background:rgba(255,159,10,.10) !important; }
.ld-check-row.tone-bad  { background:rgba(255,69,58,.10) !important; }
.ld-check-row.tone-ok   .v { color:var(--ok) !important; }
.ld-check-row.tone-warn .v { color:var(--warn) !important; }
.ld-check-row.tone-bad  .v { color:var(--danger) !important; }
.ld-photo-link, .ld-map-links a {
  background:var(--bg-2) !important; border:0 !important; color:var(--accent) !important;
  border-radius:9999px !important; padding:8px 14px !important;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:14px !important; font-weight:500 !important; letter-spacing:-0.016em !important;
}

/* COMPOSE SHEET */
.compose-head-icon {
  background:rgba(10,132,255,.18) !important; color:var(--accent) !important;
  border-radius:9999px !important; padding:11px !important;
}
.compose-head-title {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:22px !important; font-weight:600 !important; letter-spacing:-0.026em !important;
}
.compose-head-sub {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:13px !important; letter-spacing:-0.012em !important; font-weight:400 !important;
}
.compose-tile {
  background:var(--bg-1) !important; border:0 !important; border-radius:12px !important;
  padding:14px 16px !important;
}
.compose-tile:active { background:var(--bg-2) !important; transform:scale(.97) !important; }
.ct-label {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-weight:600 !important; font-size:15px !important; letter-spacing:-0.02em !important;
}
.ct-sub {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:13px !important; letter-spacing:-0.012em !important; color:var(--muted) !important;
}
.ct-icon {
  background:rgba(10,132,255,.18); color:var(--accent) !important;
  width:32px; height:32px; border-radius:9999px;
  display:grid; place-items:center; padding:0;
  font-size:18px !important; margin-bottom:6px !important;
}
.compose-tile .ct-icon[style*="--accent"],
.compose-tile .ct-icon[style*="--info"],
.compose-tile .ct-icon[style*="--purple"],
.compose-tile .ct-icon[style*="--warn"] { color:var(--accent) !important; }
.compose-coming {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:13px !important; letter-spacing:-0.012em !important; color:var(--dim) !important;
}

/* MODAL / SHEET / TOAST / CONFIRM — iOS sheets are flat dark surfaces */
.sheet {
  background:var(--bg-1) !important;
  border:0 !important;
  border-radius:14px 14px 0 0 !important;
}
.sheet h3 {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:20px !important; font-weight:600 !important; letter-spacing:-0.026em !important;
}
.sheet-desc {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:14px !important; letter-spacing:-0.016em !important; font-weight:400 !important;
}

/* TEAM PERFORMANCE */
.tp-hero, .tp-card, .tp-row, .tp-bar-row {
  background:var(--bg-1) !important; border:0 !important; border-radius:12px !important;
}
.tp-trend {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:13px !important; font-weight:600 !important; letter-spacing:-0.012em !important;
}
.tp-trend.up { color:var(--ok) !important; }

/* MAP CHIPS / FAB / POPUP */
.map-ctrl-chip, .map-ctrl .fab, .leaflet-popup-content-wrapper {
  background:var(--bg-1) !important; border:0 !important;
}
.leaflet-popup-content {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
}

/* SITES */
.site-row { background:var(--bg-1) !important; border:0 !important; border-radius:12px !important; }

/* AUDIT */
.au-row { background:var(--bg-1) !important; border:0 !important; border-radius:12px !important; }

/* PTR (pull-to-refresh) — quieter iOS spinner */
.ptr-arrow { color:var(--muted) !important; }
.ptr-spin {
  border-color:var(--bg-2) !important; border-top-color:var(--accent) !important;
}
.ptr-label {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-size:13px !important; letter-spacing:-0.012em !important; color:var(--muted) !important;
}

/* ALERTS POPUP (bell-tap sheet) */
.alerts-popup, .alerts-popup-row {
  background:var(--bg-1) !important; border:0 !important; border-radius:12px !important;
}
.alerts-popup-head {
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-weight:600 !important; letter-spacing:-0.026em !important;
}

/* GENERIC: any remaining .btn-primary / .btn-ghost variants get pill + flat */
button.btn-primary, .btn-primary {
  background:var(--accent) !important; color:#fff !important;
  border-radius:9999px !important; box-shadow:none !important;
  text-transform:none !important; letter-spacing:-0.022em !important;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-weight:600 !important;
}
button.btn-ghost, .btn-ghost {
  background:transparent !important; color:var(--accent) !important;
  border:0 !important; box-shadow:none !important;
  text-transform:none !important; letter-spacing:-0.022em !important;
  font-family:'Noto Sans','Noto Sans Lao',sans-serif !important;
  font-weight:400 !important;
}

/* Universal: any chip/pill that still uses the green accent token reads correctly */
.alert .ic, .ip-stat, .me-pill { box-shadow:none !important; }

/* Strip remaining glowing dot indicators */
.stp .d, .ip-status .d { box-shadow:none !important; }

/* Strip remaining text-uppercase + monospace patterns to iOS sentence case */
.hero-l, .hero-pill .l,
.sec-head .more,
.r-row .meta .l, .r-row .sub,
.search-wrap input, .filt,
.u-row .em, .u-row .meta, .u-row .role-tag,
.me-hs-cell .k,
.me-row .me-row-l .row-s,
.me-ss-l, .me-ss-pill,
.me-pill, .me-version,
.ip-meta, .ip-status, .ip-stat .l, .ip-qa, .ip-tab,
.tl-row .t, .tl-row .e small,
.log-row .sb, .log-row .sc small,
.log-day-head, .log-day-head .pill,
.tp-trend,
.ld-check-row .l, .ld-field-row .k,
.compose-head-sub, .ct-sub, .compose-coming,
.ptr-label,
.alerts-popup-head,
.alert .ds, .alert .tm {
  text-transform:none !important;
}

/* ============================================================
   PHASE 2 - Notification fabric: composers, picker, sent detail
   ============================================================ */

/* Compose grid switches from 2x2 to single row of 3 */
.compose-grid-3 { grid-template-columns:repeat(3, 1fr) !important; }
@media (max-width:480px) {
  .compose-grid-3 { grid-template-columns:1fr 1fr !important; }
  .compose-grid-3 .compose-tile:nth-child(3) { grid-column:span 2; }
}

/* Composer screens - reuse .topbar pattern; add header SEND button */
.tb-send {
  appearance:none; border:0; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:13px; letter-spacing:.06em;
  padding:8px 14px; border-radius:10px;
  background:var(--accent); color:#fff;
  transition:opacity .15s ease, transform .12s ease;
}
.tb-send:active { transform:scale(.96); opacity:.8; }
.tb-send:disabled { opacity:.5; }
.tb-send.blue { background:var(--info); }
.tb-send.amber { background:var(--warn); color:#1c1c1e; }
.tb-send.loading { opacity:.6; }

/* Composer pane padding */
.cmp-pane { padding:12px 16px 80px; display:flex; flex-direction:column; gap:14px; }

/* Composer field cells */
.cmp-field {
  position:relative; display:flex; flex-direction:column; gap:6px;
  padding:12px 14px; border-radius:14px;
  background:var(--bg-1); border:1px solid var(--line);
}
.cmp-field-static { gap:10px; }
.cmp-l {
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.cmp-field input[type="text"],
.cmp-field textarea {
  appearance:none; border:0; background:transparent; color:var(--fg);
  font-family:inherit; font-size:15px; line-height:1.45; padding:2px 0;
  resize:vertical; min-height:24px;
  outline:none;
}
.cmp-field textarea { min-height:80px; resize:vertical; }
.cmp-field input::placeholder, .cmp-field textarea::placeholder { color:var(--dim); }
.cmp-cnt {
  position:absolute; right:12px; bottom:8px;
  font-size:10.5px; color:var(--dim); pointer-events:none;
}

/* Segmented control */
.seg {
  display:flex; gap:4px; padding:3px; border-radius:10px;
  background:rgba(var(--ov),.04);
  border:1px solid var(--line);
}
.seg-b {
  flex:1; appearance:none; border:0; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:500;
  padding:8px 10px; border-radius:7px;
  background:transparent; color:var(--muted);
  transition:background .15s ease, color .15s ease;
}
.seg-b.on { background:var(--bg-3); color:var(--fg); }
.seg-b:active { transform:scale(.97); }

/* Recipient picker open button (full-width row inside a field) */
.cmp-recip-btn {
  display:flex; align-items:center; gap:10px;
  appearance:none; border:1px solid var(--line); cursor:pointer;
  background:var(--bg-2); color:var(--fg);
  padding:11px 12px; border-radius:11px;
  font-family:inherit; font-size:14px; text-align:left;
  width:100%;
}
.cmp-recip-btn:active { background:var(--bg-3); }
.cmp-recip-btn .material-symbols-outlined { font-size:20px; color:var(--muted); }
.cmp-recip-btn .cmp-recip-l { flex:1; }
.cmp-recip-btn .chev { font-size:18px; color:var(--dim); }

.cmp-aud-count {
  font-size:11px; letter-spacing:.12em; color:var(--dim); margin-top:2px;
  text-transform:uppercase;
}

/* Selected chip rows */
.cmp-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.cmp-chip {
  font-size:12px; padding:4px 9px; border-radius:7px;
  background:rgba(10,132,255,.12); color:var(--info);
  border:1px solid rgba(10,132,255,.3);
  font-family:'Noto Sans Mono',monospace;
  letter-spacing:.02em;
}

/* Notification tab strip in alerts modal */
.ntab-strip {
  display:flex; gap:6px; padding:8px 14px 4px;
  border-bottom:1px solid var(--line);
}
.ntab {
  appearance:none; border:0; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:13px;
  padding:8px 14px; border-radius:8px;
  background:transparent; color:var(--muted);
  transition:background .15s ease, color .15s ease;
}
.ntab.on { color:var(--fg); background:var(--bg-3); }
.ntab:active { transform:scale(.97); }

/* Picker modal sheet */
.sheet-picker { display:flex; flex-direction:column; max-height:88vh; }
.sheet-picker .filter-strip { padding:8px 14px; border-bottom:1px solid var(--line); }
.sheet-picker .search-wrap { padding:6px 14px 8px; }
.sheet-picker .sheet-actions { padding:10px 14px 14px; border-top:1px solid var(--line); }

.picker-list { display:flex; flex-direction:column; padding:6px 14px; gap:4px; }
.pk-row {
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  padding:10px 12px; border-radius:11px;
  background:var(--bg-2); border:1px solid var(--line);
  appearance:none; cursor:pointer; text-align:left;
  font-family:inherit; color:var(--fg);
  transition:background .15s ease, border-color .15s ease;
}
.pk-row.on { border-color:var(--accent); background:rgba(10,132,255,.08); }
.pk-row:active { transform:scale(.99); }
.pk-av {
  width:34px; height:34px; border-radius:99px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; color:#fff;
}
.pk-ic {
  width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-3); color:var(--muted);
}
.pk-name { font-size:14px; font-weight:500; }
.pk-meta { font-size:10.5px; color:var(--dim); margin-top:2px; letter-spacing:.04em; }
.pk-check { font-size:22px; color:var(--dim); }
.pk-row.on .pk-check { color:var(--accent); }

/* Receipt status pills (used in inbox unread badge + sent detail rows) */
.rcp-status {
  display:inline-block;
  font-family:'Noto Sans Mono',monospace;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:3px 7px; border-radius:6px; font-weight:600;
  border:1px solid var(--line);
}
.rcp-status.read {
  color:var(--ok); border-color:rgba(48,209,88,.35);
  background:rgba(48,209,88,.08);
}
.rcp-status.delv {
  color:var(--info); border-color:rgba(10,132,255,.35);
  background:rgba(10,132,255,.08);
}
.rcp-status.pend {
  color:var(--dim); border-color:rgba(84,84,88,.4);
  background:rgba(84,84,88,.06);
}

/* Inbox unread state */
.alert.unread { border-color:rgba(10,132,255,.25); background:rgba(10,132,255,.05); }

/* ===== SENT DETAIL screen ===== */
.sd2-hero {
  margin:14px 16px 0; padding:18px 16px;
  border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-1), var(--bg-1));
}
.sd2-hero.warn {
  background:linear-gradient(180deg, rgba(255,159,10,.08), var(--bg-1));
  border-color:rgba(255,159,10,.25);
}
.sd2-hero.info {
  background:linear-gradient(180deg, rgba(10,132,255,.07), var(--bg-1));
  border-color:rgba(10,132,255,.22);
}
.sd2-type {
  font-size:10.5px; letter-spacing:.18em; color:var(--muted);
  margin-bottom:6px;
}
.sd2-title {
  font-size:18px; font-weight:700; line-height:1.3;
  letter-spacing:-0.012em;
}
.sd2-body {
  margin-top:8px; font-size:14px; color:var(--fg);
  white-space:pre-wrap; line-height:1.5;
}
.sd2-meta {
  margin-top:12px; font-size:11px; letter-spacing:.08em;
  color:var(--muted);
}
.sd2-stats {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:8px; margin:14px 16px 0;
}
.sd2-stat {
  padding:14px; border-radius:14px;
  background:var(--bg-1); border:1px solid var(--line);
  text-align:center;
}
.sd2-stat .v {
  font-size:26px; font-weight:800; letter-spacing:-0.03em;
}
.sd2-stat .l {
  font-family:'Noto Sans Mono',monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-top:4px;
}
.sd2-stat.ok .v { color:var(--ok); }
.sd2-stat.info .v { color:var(--info); }
.sd2-stat.dim .v { color:var(--dim); }

.sd2-list { display:flex; flex-direction:column; gap:6px; padding:14px 16px 0; }
.sd2-list .rcp {
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  padding:11px 14px; border-radius:11px;
  background:var(--bg-1); border:1px solid var(--line);
}
.sd2-list .rcp .av {
  width:32px; height:32px; border-radius:99px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; color:#fff;
}
.sd2-list .rcp-name {
  font-size:14px; font-weight:500; color:var(--fg);
}
.sd2-list .rcp-meta {
  font-family:'Noto Sans Mono',monospace;
  font-size:10.5px; letter-spacing:.06em;
  color:var(--dim); margin-top:2px;
  text-transform:none;
}

/* No-uppercase for the new content classes (matches existing pattern) */
.sd2-title, .sd2-body,
.cmp-recip-l, .cmp-chip,
.pk-name, .ntab,
.alert.unread .tt, .alert.unread .ds {
  text-transform:none !important;
}

/* ===== TOAST WITH ACTION BUTTON (post-send "View") ===== */
.toast.toast-action {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px;
}
.toast.toast-action .toast-msg { flex: 1; }
.toast.toast-action .toast-btn {
  background: rgba(var(--ov),0.18);
  border: 1px solid rgba(var(--ov),0.28);
  color: #fff;
  font-family: inherit; font-weight: 700;
  padding: 6px 12px; border-radius: 8px;
  cursor: pointer; font-size: 13px;
  letter-spacing: 0.02em;
}
.toast.toast-action .toast-btn:hover { background: rgba(var(--ov),0.26); }
.toast.toast-action .toast-btn:active { transform: scale(0.96); }

/* ===== SENT-DETAIL: response strip + pills ===== */
.sd2-resp-strip {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sd2-resp-l {
  font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--p-muted, #64748b); text-transform: uppercase;
}
.sd2-resp-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.resp-pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 5px; font-weight: 700;
}
.resp-pill.mini { font-size: 9px; padding: 2px 6px; }
.resp-pill.onit { background: rgba(46, 160, 67, 0.14); color: #1f7a3a; border: 1px solid rgba(46, 160, 67, 0.28); }
.resp-pill.need { background: rgba(255, 165, 0, 0.14); color: #b56700; border: 1px solid rgba(255, 165, 0, 0.30); }
.resp-pill.cant { background: rgba(220, 53, 69, 0.12); color: #b02a37; border: 1px solid rgba(220, 53, 69, 0.30); }

/* ===== SW UPDATE BANNER (replaces silent auto-reload) ===== */
.sw-update-banner {
  position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top, 12px));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 16px;
  background: #0f172a; color: #fff;
  border: 1px solid rgba(var(--ov),0.10);
  border-radius: 12px;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
  z-index: 9000;
  animation: ubSlideIn 0.25s ease both;
  max-width: calc(100vw - 24px);
}
.sw-update-banner.hiding {
  animation: ubSlideOut 0.22s ease both;
}
@keyframes ubSlideIn { from { transform: translate(-50%, -120%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes ubSlideOut { to { transform: translate(-50%, -120%); opacity: 0; } }
.sw-update-banner .ub-btn {
  background: #74ff8a; color: #042a0d;
  border: 0; border-radius: 8px;
  padding: 6px 12px;
  font-family: inherit; font-weight: 800; font-size: 12.5px;
  cursor: pointer;
}
.sw-update-banner .ub-btn:hover { filter: brightness(1.05); }
.sw-update-banner .ub-x {
  background: transparent; border: 0; color: #94a3b8;
  font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px;
}
.sw-update-banner .ub-x:hover { color: #fff; }

/* ============================================================
   SPECIAL DUTY LIST (90d, cache-first)
   ============================================================ */
.sl-list { padding: 6px 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.sl-day-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px 4px; margin-top: 4px;
}
.sl-day-d {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.sl-day-c {
  font-size: 10px; color: var(--dim);
  background: rgba(var(--ov),.04); padding: 2px 7px; border-radius: 999px;
}
.sl-card {
  appearance: none; width: 100%;
  display: flex; align-items: stretch; gap: 12px; text-align: left;
  padding: 12px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(var(--ov),.025), rgba(var(--ov),.005));
  border: 1px solid rgba(196,168,255,.18);
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease;
}
.sl-card:active { transform: scale(.99); border-color: rgba(196,168,255,.35); }
.sl-card-l { display: flex; align-items: flex-start; padding-top: 2px; }
.sl-icn {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(196,168,255,.14); color: var(--purple);
  display: grid; place-items: center; font-size: 18px;
}
.sl-card-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sl-card-r1 {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sl-type {
  font-family: 'Noto Sans','Noto Sans Lao',sans-serif; font-weight: 700;
  font-size: 14px; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-st {
  font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(var(--ov),.08); flex-shrink: 0;
}
.sl-st-active { color: #74ff8a; background: rgba(116,255,138,.10); border-color: rgba(116,255,138,.30); }
.sl-st-done   { color: #7ab8ff; background: rgba(122,184,255,.10); border-color: rgba(122,184,255,.30); }
.sl-st-cancel { color: #ff6b6b; background: rgba(255,107,107,.10); border-color: rgba(255,107,107,.30); }
.sl-st-other  { color: var(--muted); background: rgba(var(--ov),.04); }
.sl-card-r2 {
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-times {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  background: rgba(0,0,0,.22); border-radius: 10px; padding: 8px 10px;
  font-variant-numeric: tabular-nums;
}
.sl-t-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sl-t-k { font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.sl-t-v { font-size: 13px; color: var(--fg); font-weight: 700; }
.sl-target { font-size: 10.5px; color: var(--muted); }
.sl-photo {
  margin-top: 4px; border-radius: 10px; overflow: hidden;
  background: rgba(0,0,0,.3);
  position: relative;
}
.sl-photo img {
  display: block; width: 100%; max-height: 220px;
  object-fit: cover; cursor: zoom-in;
}
/* SP-03: +N badge for specials with multiple photos */
.sl-photo-count {
  position: absolute; right: 8px; bottom: 8px;
  display: inline-flex; align-items: center;
  padding: 4px 9px; border-radius: 9999px;
  background: rgba(0,0,0,.65);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: .02em;
  pointer-events: none;
}
.empty-state {
  text-align: center; padding: 40px 24px;
}
.empty-state .es-i { font-size: 36px; opacity: .5; margin-bottom: 10px; }
.empty-state .es-t { font-size: 15px; font-weight: 700; color: var(--fg); margin-bottom: 4px; }
.empty-state .es-s { font-size: 12px; color: var(--muted); }

/* ============ REST DAYS (Head, read-only) ============ */
.rh-seg { display: flex; background: var(--bg-2); border-radius: 9px; padding: 2px; margin: 12px 16px; }
.rh-segb { flex: 1; border: 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; padding: 8px; border-radius: 7px; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 5px; }
.rh-segb .material-symbols-outlined { font-size: 17px; }
.rh-segb.on { background: var(--bg-3); color: var(--fg); }
.rh-body { padding: 0 0 90px; }
.rh-empty { padding: 44px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.rh-hero { margin: 4px 16px 8px; padding: 14px; border-radius: 14px; background: var(--bg-1); }
.rh-hrow { display: flex; align-items: center; gap: 14px; }
.rh-hnum { display: flex; flex-direction: column; padding-right: 14px; border-right: 1px solid var(--line); min-width: 78px; }
.rh-hbig { font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.028em; font-variant-numeric: tabular-nums; }
.rh-hbig.bad { color: var(--danger); } .rh-hbig.good { color: var(--ok); }
.rh-hl { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.rh-hp { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; flex: 1; }
.rh-hp .v { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.rh-hp .v.b { color: var(--accent); } .rh-hp .v.w { color: var(--warn); } .rh-hp .v.o { color: var(--ok); }
.rh-hp .l { font-size: 10px; color: var(--muted); margin-top: 4px; }
.rh-warn { margin-top: 12px; display: flex; align-items: center; gap: 9px; background: rgba(255,69,58,.12); border: 1px solid rgba(255,69,58,.3); border-radius: 10px; padding: 9px 11px; cursor: pointer; }
.rh-warn .material-symbols-outlined { font-size: 18px; color: var(--danger); }
.rh-warn .x { flex: 1; font-size: 12.5px; color: #ff8077; font-weight: 500; } .rh-warn .x b { color: #fff; }
.rh-sec { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.rh-sec .dim { color: var(--dim); font-weight: 500; }
.rh-cal-card { margin: 0 16px 12px; background: var(--bg-1); border-radius: 14px; padding: 14px; }
.rh-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rh-cal-h .mo { font-size: 16px; font-weight: 600; }
.rh-cal-nav { display: flex; gap: 6px; }
.rh-cal-nav button { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-3); color: var(--accent); border: 0; display: grid; place-items: center; cursor: pointer; }
.rh-dow { display: grid; grid-template-columns: repeat(7,1fr); margin-bottom: 4px; }
.rh-dow span { text-align: center; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.rh-cal { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.rh-cell { aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center; font-size: 14px; font-weight: 500; color: var(--fg); position: relative; font-variant-numeric: tabular-nums; }
.rh-cell.pad { visibility: hidden; }
.rh-cell.has { cursor: pointer; background: var(--bg-2); }
.rh-cell.has:active { transform: scale(.92); }
.rh-cell.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.rh-cell .cnt { position: absolute; top: 2px; right: 3px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; font-size: 9px; font-weight: 700; display: grid; place-items: center; background: rgba(48,209,88,.2); border: 1px solid rgba(48,209,88,.4); color: #5be07e; }
.rh-cell.warnU .cnt { background: rgba(255,159,10,.2); border-color: rgba(255,159,10,.45); color: #ffc266; }
.rh-cell.breach .cnt { background: rgba(255,69,58,.24); border-color: rgba(255,69,58,.5); color: #ff8077; }
.rh-legend { display: flex; gap: 14px; justify-content: center; margin-top: 12px; font-size: 11px; color: var(--muted); }
.rh-legend span { display: flex; align-items: center; gap: 5px; }
.rh-legend i { width: 9px; height: 9px; border-radius: 3px; }
.rh-legend i.ok { background: var(--ok); } .rh-legend i.u { background: var(--warn); } .rh-legend i.b { background: var(--danger); }
.rh-card { margin: 0 16px 12px; background: var(--bg-1); border-radius: 14px; overflow: hidden; }
.rh-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.rh-row:last-child { border-bottom: 0; }
.rh-row[onclick] { cursor: pointer; } .rh-row[onclick]:active { background: var(--bg-2); }
.rh-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.rh-ic .material-symbols-outlined { font-size: 19px; }
.rh-ic.set, .rh-ic.normal { background: rgba(48,209,88,.16); color: var(--ok); }
.rh-ic.move { background: rgba(10,132,255,.16); color: var(--accent); }
.rh-ic.cancel { background: rgba(255,69,58,.16); color: var(--danger); }
.rh-ic.urgent { background: rgba(255,159,10,.18); color: var(--warn); }
.rh-av { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; flex: none; font-weight: 600; font-size: 15px; }
.rh-mid { flex: 1; min-width: 0; }
.rh-mid .t { font-size: 14.5px; font-weight: 500; } .rh-mid .t b { font-weight: 700; }
.rh-mid .s { font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-tm { font-size: 11px; color: var(--dim); white-space: nowrap; }
.rh-pill { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg-2); padding: 3px 9px; border-radius: 99px; white-space: nowrap; font-variant-numeric: tabular-nums; } .rh-pill b { color: var(--fg); }
.rh-chev { color: var(--dim); font-size: 20px; }
.rh-tag { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 9999px; white-space: nowrap; }
.rh-tag.normal { background: rgba(48,209,88,.16); color: var(--ok); }
.rh-tag.urgent { background: rgba(255,159,10,.18); color: var(--warn); }
.rh-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 90; }
.rh-scrim.open { opacity: 1; pointer-events: auto; }
.rh-sheet { position: fixed; left: 50%; transform: translate(-50%, 100%); bottom: 0; width: 100%; max-width: 480px; background: var(--bg-1); border-radius: 14px 14px 0 0; transition: transform .3s cubic-bezier(.2,.9,.25,1); z-index: 91; padding: 10px 16px calc(22px + var(--safe-bottom)); max-height: 80%; overflow-y: auto; }
.rh-sheet.open { transform: translate(-50%, 0); }
.rh-sheet h3 { font-size: 20px; font-weight: 600; letter-spacing: -.024em; margin: 0 0 2px; }
.rh-sheet-sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; } .rh-sheet-sub b { color: var(--fg); }
.rh-cov { display: flex; gap: 8px; margin-bottom: 14px; }
.rh-cov div { flex: 1; background: var(--bg-2); border-radius: 10px; padding: 10px 12px; }
.rh-cov .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .rh-cov .v.off { color: var(--warn); } .rh-cov .v.on { color: var(--ok); }
.rh-cov .l { font-size: 11px; color: var(--muted); margin-top: 2px; }
.rh-dl { background: var(--bg-2); border-radius: 12px; overflow: hidden; }
.rh-dr { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.rh-dr:last-child { border-bottom: 0; }
.rh-dr .rh-date { text-align: center; min-width: 42px; padding: 5px 4px; border-radius: 9px; background: var(--bg-3); flex: none; }
.rh-dr .rh-date .d { font-weight: 700; font-size: 16px; line-height: 1; font-variant-numeric: tabular-nums; }
.rh-dr .rh-date .m { font-size: 9px; color: var(--muted); margin-top: 2px; }

/* ---- v2: assign FAB, request badge, unseen dots ---- */
.rh-fab { position: fixed; right: 18px; bottom: calc(78px + var(--safe-bottom)); z-index: 60; display: flex; align-items: center; gap: 7px; padding: 13px 18px; border: 0; border-radius: 99px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; font-family: inherit; box-shadow: 0 6px 18px rgba(10,132,255,.4); cursor: pointer; }
.rh-fab:active { transform: scale(.95); }
.rh-fab .material-symbols-outlined { font-size: 20px; }
.rh-badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; margin-left: 5px; border-radius: 9px; background: var(--warn); color: #1a1205; font-size: 10px; font-weight: 800; }
.rh-badge.hidden { display: none; }
.rh-undot { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--warn); color: #1a1205; font-size: 9px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg-1); }
.rh-av { position: relative; }
.rh-pend-dot { display: inline-grid; place-items: center; min-width: 15px; height: 15px; padding: 0 4px; margin-left: 6px; border-radius: 8px; background: rgba(10,132,255,.2); border: 1px solid rgba(10,132,255,.45); color: #6db4ff; font-size: 9px; font-weight: 700; vertical-align: middle; }

/* ---- v2: approval queue ---- */
.rh-qrow { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.rh-qrow:last-child { border-bottom: 0; }
.rh-qtop { display: flex; align-items: center; gap: 11px; }
.rh-qreason { margin: 8px 0 0 45px; font-size: 12.5px; color: var(--muted); font-style: italic; }
.rh-qacts { display: flex; gap: 8px; margin: 11px 0 0 45px; }
.rh-qacts button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px; border: 0; border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rh-qacts button .material-symbols-outlined { font-size: 17px; }
.rh-qacts .rh-app { background: rgba(48,209,88,.16); color: var(--ok); }
.rh-qacts .rh-rej { background: rgba(255,69,58,.14); color: var(--danger); }
.rh-qacts button:active { transform: scale(.96); }
.rh-tm { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ---- v2: assign form ---- */
.rh-form { display: flex; flex-direction: column; }
.rh-fl { font-size: 12px; color: var(--muted); font-weight: 600; margin: 12px 0 6px; }
.rh-input { width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; color: var(--fg); font-size: 14px; font-family: inherit; }
textarea.rh-input { resize: none; }
.rh-typ { display: flex; gap: 8px; }
.rh-typb { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rh-typb .material-symbols-outlined { font-size: 18px; }
.rh-typb.on { border-color: var(--accent); background: rgba(10,132,255,.12); color: var(--accent); }
.rh-typb[data-t=urgent].on { border-color: var(--warn); background: rgba(255,159,10,.14); color: var(--warn); }
.rh-fwarn { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 500; }
.rh-fwarn .material-symbols-outlined { font-size: 17px; }
.rh-fwarn.ok { background: rgba(48,209,88,.12); color: #5be07e; }
.rh-fwarn.bad { background: rgba(255,69,58,.12); color: #ff8077; }
.rh-submit { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; padding: 14px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.rh-submit:disabled { opacity: .5; }
.rh-submit .material-symbols-outlined { font-size: 19px; }

/* ---- v2: origin tags on detail rows ---- */
.rh-otag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 9.5px; font-weight: 700; vertical-align: middle; }
.rh-otag.a { background: rgba(10,132,255,.16); color: #6db4ff; }
.rh-otag.s { background: rgba(48,209,88,.14); color: #5be07e; }
.rh-otag.p { background: rgba(255,159,10,.16); color: #ffc266; }

/* ---- v2: inspector detail heatmap (Option A) ---- */
.rh-hcard { background: var(--bg-2); border-radius: 12px; padding: 13px; margin-bottom: 12px; }
.rh-heat { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.rh-hc { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; font-size: 12.5px; font-weight: 500; color: var(--muted); background: var(--bg-1); position: relative; font-variant-numeric: tabular-nums; }
.rh-hc.pad { visibility: hidden; background: transparent; }
.rh-hc.on { color: #fff; font-weight: 700; }
.rh-hc.on.s { background: rgba(48,209,88,.32); }
.rh-hc.on.a { background: rgba(10,132,255,.4); }
.rh-hc.on.u { background: rgba(255,159,10,.42); }
.rh-hc.pr { box-shadow: inset 0 0 0 1.5px var(--warn); }
.rh-hc.td { outline: 1.5px solid var(--fg); outline-offset: -1.5px; }
.rh-heat + .rh-legend i.s { background: rgba(48,209,88,.6); } .rh-heat + .rh-legend i.a { background: rgba(10,132,255,.7); } .rh-heat + .rh-legend i.pr { background: transparent; box-shadow: inset 0 0 0 2px var(--warn); }
.rh-assignbtn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-bottom: 12px; padding: 12px; border: 1px dashed rgba(10,132,255,.4); border-radius: 11px; background: rgba(10,132,255,.07); color: var(--accent); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.rh-assignbtn .material-symbols-outlined { font-size: 18px; }

/* ---- coverage breach alert strip ---- */
.rh-alerts { display: flex; flex-direction: column; gap: 9px; margin: 0 16px 12px; }
.rh-alert { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 13px; background: rgba(255,69,58,.1); border: 1px solid rgba(255,69,58,.34); cursor: pointer; }
.rh-alert:active { transform: scale(.99); }
.rh-alert .ic { color: var(--danger); font-size: 22px; flex: none; }
.rh-alert .x { flex: 1; }
.rh-alert .x b { font-size: 13px; color: #ffd1cf; font-weight: 700; }
.rh-alert .x .s { font-size: 11.5px; color: #ff9a96; margin-top: 2px; }
.rh-alert .chev { color: #ff9a96; font-size: 18px; }
.rh-movebtn { display: flex; align-items: center; gap: 4px; flex: none; padding: 7px 11px; border: 0; border-radius: 9px; background: rgba(10,132,255,.14); color: #6db4ff; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.rh-movebtn .material-symbols-outlined { font-size: 15px; }
.rh-movebtn:active { transform: scale(.95); }

/* ---- vks-kit dropdown (dark) ---- */
.rhk-field { position: relative; margin-bottom: 2px; }
.rhk-trig { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg-2); color: var(--fg); font-size: 15px; font-family: inherit; cursor: pointer; text-align: left; }
.rhk-trig.open { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,.18); }
.rhk-trig .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rhk-trig .ph { color: var(--dim); }
.rhk-trig .arr { font-size: 20px; color: var(--muted); transition: transform .2s; flex: none; }
.rhk-trig.open .arr { transform: rotate(180deg); }
.rhk-panel { margin-top: 6px; background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 13px; overflow: hidden; }
.rhk-search { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.rhk-search .material-symbols-outlined { font-size: 18px; color: var(--muted); }
.rhk-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--fg); font-family: inherit; font-size: 14px; }
.rhk-scroll { max-height: 228px; overflow-y: auto; padding: 5px; }
.rhk-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 11px; border-radius: 9px; border: 0; background: transparent; color: var(--fg); font-size: 14px; font-family: inherit; cursor: pointer; text-align: left; }
.rhk-opt:active { background: var(--bg-3); }
.rhk-opt.sel { background: rgba(10,132,255,.14); font-weight: 600; }
.rhk-opt .ck { margin-left: auto; color: var(--accent); font-size: 19px; }
.rhk-av { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.rhk-av.sm { width: 26px; height: 26px; font-size: 11px; }
.rhk-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }
.rh-area { width: 100%; background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; color: var(--fg); font-family: inherit; font-size: 14px; resize: none; }
.rh-area:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,.18); }

/* ---- date-tile grid (assign + move) ---- */
.rht-dow { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; margin-bottom: 6px; }
.rht-dow span { text-align: center; font-size: 10px; color: var(--dim); font-family: 'JetBrains Mono', monospace; }
.rht-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; }
.rht { position: relative; min-width: 0; aspect-ratio: 1; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--bg-1); color: var(--fg); }
.rht.past { background: transparent; color: var(--dim); font-weight: 500; }
.rht.free { background: rgba(48,209,88,.14); color: #bfffce; cursor: pointer; transition: transform .1s, background .1s; }
.rht.free:active { transform: scale(.9); background: rgba(48,209,88,.32); }
.rht.full { background: rgba(255,69,58,.1); color: #ff9a96; }
.rht.cur { background: var(--accent); color: #fff; font-weight: 800; box-shadow: 0 4px 12px rgba(10,132,255,.45); }
.rht.pick { background: var(--accent); color: #fff; font-weight: 800; box-shadow: 0 4px 12px rgba(10,132,255,.4); }
.rht.pick::after { content: ''; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.rh-legend i.pk { background: var(--accent); }
/* Multi-day assign: selected-date chips + count badge */
.rh-asg-count { font-weight: 700; color: var(--accent); font-size: 11px; }
.rh-asg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.rh-asg-chips.empty { font-size: 12px; color: var(--muted); padding: 4px 0; }
.rh-asg-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 9px; background: rgba(10,132,255,.12); color: var(--accent); border: 1px solid rgba(10,132,255,.28); }
.rh-asg-chip .x { cursor: pointer; display: grid; place-items: center; opacity: .65; }
.rh-asg-chip .x:hover { opacity: 1; color: var(--danger); }
.rh-asg-chip .x .material-symbols-outlined { font-size: 14px; }
.rht .ct { position: absolute; top: 3px; right: 5px; font-size: 8px; font-weight: 800; line-height: 1; opacity: .85; }
.rht .fl { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 7.5px; font-weight: 700; line-height: 1; }
.rht .mt { position: absolute; top: 3px; left: 5px; font-size: 7.5px; font-weight: 700; color: var(--muted); }

/* ---- head-move current banner + confirm ---- */
.rhm-cur { display: flex; align-items: center; gap: 11px; background: rgba(10,132,255,.1); border: 1px solid rgba(10,132,255,.3); border-radius: 13px; padding: 11px 13px; margin-bottom: 4px; }
.rhm-cur .dt { width: 42px; height: 42px; border-radius: 11px; background: var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; color: #fff; }
.rhm-cur .dt .d { font-family: 'Space Grotesk'; font-weight: 800; font-size: 18px; line-height: 1; }
.rhm-cur .dt .m { font-size: 8px; letter-spacing: .04em; }
.rhm-cur .tx .t1 { font-size: 13px; font-weight: 600; color: #9cc7ff; }
.rhm-cur .tx .t2 { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.rhc-row { display: flex; align-items: center; justify-content: center; gap: 18px; background: var(--bg-2); border-radius: 13px; padding: 18px; margin-bottom: 4px; }
.rhc-row .leg { text-align: center; } .rhc-row .leg .d { font-family: 'Space Grotesk'; font-weight: 800; font-size: 27px; } .rhc-row .leg.to .d { color: #6db4ff; }
.rhc-row .leg .t { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.rhc-row .arrm { color: var(--muted); font-size: 24px; }
.rhc-acts { display: flex; gap: 10px; margin-top: 16px; }
.rhc-ghost { flex: none; padding: 0 18px; height: 50px; border: 0; border-radius: 12px; background: var(--bg-3); color: var(--fg); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

/* ===== DESKTOP THEME OVERRIDE (>768px): light vks-kit ===== */
@media (min-width:769px){
  :root{
    --bg-0:#f3f4f6; --bg-1:#ffffff; --bg-2:#f5f6f8; --bg-3:#e9ebef;
    --fg:#2b2f38; --muted:#5c6470; --dim:#6b7280;
    --accent:#2f6bd8; --info:#2f6bd8;
    --ok:#1f9d57; --warn:#c2790f; --danger:#d6352b; --purple:#7c3aed; --pink:#db2777;
    --line:rgba(0,0,0,.10); --line-2:rgba(0,0,0,.16);
    --surface:#ffffff; --surface-2:#f5f6f8;
    --brand-soft:#e8f0fc; --brand-deep:#1e447f;
    --ok-soft:#e6f6ec; --warn-soft:#fbf0dd; --danger-soft:#fae6e4; --purple-soft:#f0eafe;
    --ov:0,0,0; --chrome:255,255,255;
  }
}

/* ============================================================
   DESKTOP SHELL (vks-kit) - additive, >768px only.
   Mobile-first base above is untouched; this layers the sidebar
   rail + dashboard layouts on top for wide viewports.
   ============================================================ */
.rail { display:none; }

@media (min-width:769px) {
  .rail {
    display:flex; flex-direction:column;
    position:fixed; left:0; top:0; bottom:0; width:var(--sb);
    background:var(--surface); border-right:1px solid var(--line);
    padding:18px 14px; gap:4px; z-index:60;
  }
  .rail-brand { display:flex; align-items:center; gap:10px; padding:6px 8px 16px; border-bottom:1px solid var(--line); margin-bottom:10px; }
  .rail-logo { width:38px; height:38px; border-radius:11px; background:var(--vks); display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px; letter-spacing:-.02em; flex:none; }
  .rail-brand-tx b { font-size:14px; display:block; color:var(--fg); line-height:1.2; }
  .rail-brand-tx small { color:var(--dim); font-size:11px; }
  .rail-nav { display:flex; flex-direction:column; gap:3px; }
  .nav-i { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:var(--muted); font-weight:500; font-size:14px; position:relative; background:none; border:0; cursor:pointer; text-align:left; width:100%; transition:background .15s ease, color .15s ease; }
  .nav-i .material-symbols-outlined { font-size:22px; }
  .nav-i:hover { background:var(--bg-2); color:var(--fg); }
  .nav-i.on { background:var(--brand-soft); color:var(--brand-deep); font-weight:600; }
  .nav-i.on::before { content:''; position:absolute; left:-14px; top:50%; transform:translateY(-50%); width:4px; height:22px; background:var(--accent); border-radius:0 4px 4px 0; }
  .nav-badge { margin-left:auto; background:var(--danger); color:#fff; font-size:10px; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:grid; place-items:center; padding:0 5px; }
  .rail-compose { margin-top:12px; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; border-radius:12px; background:var(--accent); color:#fff; font-weight:600; font-size:13.5px; border:0; cursor:pointer; transition:filter .15s ease; }
  .rail-compose:hover { filter:brightness(1.06); }
  .rail-foot { margin-top:auto; border-top:1px solid var(--line); padding-top:10px; }

  /* shift app content right of the rail; drop the mobile bottom padding */
  #app-shell { padding-left:var(--sb); padding-bottom:0; }
  .tabbar { display:none !important; }

  /* center each screen's content column */
  .scroll { padding-bottom:48px; }
  .screen > .scroll > * { /* hooks below set max-width per page */ }

  /* ---- HOME dashboard v2 ---- */
  #screen-home .scroll { max-width:1280px; margin:0 auto; width:100%; padding:22px 28px 56px; }
  #screen-home .hk-row { grid-template-columns:repeat(4,1fr); }
  #screen-home .home-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:20px; align-items:start; }
}

/* ============================================================
   DESKTOP: TEAM / LEADERBOARD (>768px) - paneled ranked table.
   Reuses the existing .tp-row markup; restyles for wide view.
   ============================================================ */
@media (min-width:769px) {
  #screen-team .scroll { max-width:1180px; margin:0 auto; width:100%; padding:24px 30px 60px; }

  /* segmented filter */
  #screen-team .tp-filters { display:inline-flex; gap:3px; background:var(--bg-2); border:1px solid var(--line); border-radius:11px; padding:3px; margin-bottom:18px; }
  #screen-team .tp-filters .filt { border-radius:8px; padding:7px 16px; }

  /* stat KPI cards */
  #screen-team .tp-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
  #screen-team .tp-stat { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px 20px; box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); }
  #screen-team .tp-stat-v { font-size:30px; }

  /* logs CTA: constrained, inline */
  #screen-team #tp-logs-cta { margin-bottom:18px; }

  /* leaderboard as a panel of table rows */
  #screen-team .tp-list { padding:0; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); overflow:hidden; }
  #screen-team .tp-row { display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:18px; padding:13px 22px; border-top:1px solid var(--line); border-radius:0; background:none; transition:background .15s ease; }
  #screen-team .tp-row:first-child { border-top:0; }
  #screen-team .tp-row:hover { background:var(--bg-2); }
  #screen-team .tp-rank { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:var(--bg-2); color:var(--muted); font-weight:700; font-size:15px; }
  #screen-team .tp-rank.gold   { background:#fbf1d6; color:#b8860b; }
  #screen-team .tp-rank.silver { background:#eef0f3; color:#7d8693; }
  #screen-team .tp-rank.bronze { background:#f6e6d8; color:#a9682f; }
  #screen-team .tp-row-name { font-size:14px; }
  #screen-team .tp-row-meta { font-size:12px; color:var(--dim); }
  #screen-team .tp-row-r { display:flex; align-items:center; gap:16px; }
  #screen-team .tp-score { font-size:16px; font-weight:700; }
  #screen-team .tp-score.ok  { color:var(--ok); }
  #screen-team .tp-score.mid { color:var(--warn); }
}

/* ============================================================
   INSPECTION LOGS - true data table (QC-dashboard style) with
   inline photo thumbnails. Desktop = table; mobile = stacked cards.
   ============================================================ */
/* shared photo thumbnail (44x30, +N badge, click->lightbox) */
.il-table .tbl-photo { display:inline-block; position:relative; width:46px; height:32px; border-radius:7px; overflow:hidden; background:var(--bg-2); border:1px solid var(--line); cursor:pointer; vertical-align:middle; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.il-table .tbl-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.il-table .tbl-photo:hover { transform:scale(1.08); border-color:var(--accent); box-shadow:0 2px 8px rgba(47,107,216,.25); }
.il-table .tbl-photo.empty { background-image:repeating-linear-gradient(45deg,var(--bg-2) 0,var(--bg-2) 4px,transparent 4px,transparent 8px); border-style:dashed; cursor:default; }
.il-table .tbl-photo.empty:hover { transform:none; border-color:var(--line); box-shadow:none; }
.il-table .tbl-photo-cnt { position:absolute; right:2px; bottom:2px; font-family:var(--mono,'Noto Sans Mono'); font-size:9px; font-weight:700; color:#fff; background:rgba(0,0,0,.7); padding:1px 4px; border-radius:3px; line-height:1.1; }
.il-table .sc { font-family:var(--mono,'Noto Sans Mono'); font-weight:700; }
.il-table .sc.g { color:var(--ok); } .il-table .sc.k { color:var(--accent); } .il-table .sc.w { color:var(--warn); } .il-table .sc.r { color:var(--danger); } .il-table .sc.dim { color:var(--dim); }
/* star rating */
.il-table .il-stars { display:inline-flex; flex-wrap:nowrap; vertical-align:middle; }
/* Star spans use collision-proof classes (il-son/il-soff). The previous
   .fill/.empty names inherited the global .empty rule (padding:42px + Noto font),
   which made empty stars huge text boxes that wrapped and inflated row height. */
.il-table .il-stars .material-symbols-outlined { font-family:'Material Symbols Outlined' !important; font-size:15px; padding:0 !important; line-height:1; }
.il-table .il-stars .il-son { color:#e0a92e; font-variation-settings:'FILL' 1; }
.il-table .il-stars .il-soff { color:var(--line-2); font-variation-settings:'FILL' 0; }
/* route badge */
.il-rb { display:inline-grid; place-items:center; min-width:26px; height:24px; padding:0 7px; border-radius:7px; font-family:var(--mono,'Noto Sans Mono'); font-weight:700; font-size:12px; background:var(--brand-soft); color:var(--brand-deep); }
.il-rb-b { background:var(--ok-soft); color:#0f6b3a; }
.il-rb-c { background:var(--warn-soft); color:#8a5409; }
.il-na { color:var(--dim); }
/* status pill */
.il-st { display:inline-flex; align-items:center; gap:6px; font-family:var(--lao,'Noto Sans Lao'); font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:99px; white-space:nowrap; }
.il-st .dt { width:7px; height:7px; border-radius:99px; }
.il-st-normal { background:var(--ok-soft); color:var(--ok); } .il-st-normal .dt { background:var(--ok); }
.il-st-warn { background:var(--warn-soft); color:var(--warn); } .il-st-warn .dt { background:var(--warn); }
.il-st-issues { background:var(--danger-soft); color:var(--danger); } .il-st-issues .dt { background:var(--danger); }
.il-st-pending { background:var(--bg-3); color:var(--muted); border:1px dashed var(--line-2); } .il-st-pending .dt { background:var(--dim); }

@media (min-width:769px) {
  #screen-logs .il-kpis { max-width:1180px; margin:18px auto 0; }
  #screen-logs .il-toolbar { max-width:1180px; margin:14px auto 16px; width:100%; display:flex; align-items:center; gap:12px; }
  #screen-logs .il-toolbar .search-wrap { margin:0; flex:0 1 320px; background:var(--bg-2); border:1px solid var(--line); border-radius:11px; }
  #screen-logs .il-toolbar #tl-insp-dd { margin:0; min-width:200px; }
  #screen-logs .il-toolbar #tl-date-dd { margin:0 0 0 auto; min-width:170px; }
  #screen-logs .il-toolbar .filter-strip { margin:0 0 0 auto; width:auto; display:inline-flex; gap:3px; background:var(--bg-2); border:1px solid var(--line); border-radius:11px; padding:3px; }
  #screen-logs .il-toolbar .filter-strip .filt { border-radius:8px; }
  #screen-logs .scroll { max-width:1180px; margin:0 auto; width:100%; padding:0 0 60px; }
  #screen-logs .logs-list { padding:0; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); overflow:hidden; }

  .il-table { width:100%; border-collapse:collapse; }
  .il-table thead th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--dim); font-weight:600; padding:11px 16px; background:var(--bg-2); border-bottom:1px solid var(--line); white-space:nowrap; }
  .il-table th.il-route, .il-table td.il-route { text-align:center; }
  .il-table th.il-photo, .il-table td.il-photo { text-align:center; width:62px; }
  .il-table th.il-date, .il-table td.il-date { width:74px; }
  .il-table td { padding:10px 16px; border-top:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
  .il-table tbody tr.il-r:hover td { background:var(--bg-2); cursor:pointer; }
  .il-table .il-date b { display:block; font-weight:600; font-size:12.5px; }
  .il-table .il-date span { font-family:var(--mono,'Noto Sans Mono'); font-size:11.5px; color:var(--dim); }
  .il-table .il-site { font-weight:600; }
  .il-table .il-pin { font-size:16px; color:var(--danger); vertical-align:-3px; margin-right:5px; }
  .il-table .il-insp, .il-table .il-guard { font-family:var(--mono,'Noto Sans Mono'); font-size:12px; color:var(--muted); }
  .il-table th.il-score, .il-table td.il-score { white-space:nowrap; min-width:138px; }
  .il-table td.il-score { line-height:1; }
  .il-table .il-score .sc { font-size:14px; margin-right:6px; vertical-align:middle; }
  .il-table tr.il-day td { background:var(--bg-2); padding:9px 16px; border-top:1px solid var(--line); font-family:var(--mono,'Noto Sans Mono'); font-size:11.5px; color:var(--dim); }
  .il-table tr.il-day:first-child td { border-top:0; }
  .il-table tr.il-day .pill { display:inline-block; background:var(--brand-soft); color:var(--brand-deep); font-weight:700; font-size:10.5px; padding:3px 9px; border-radius:99px; margin-right:6px; }
}

/* mobile: collapse the table into stacked cards (v2 grid layout).
   Photo anchored top-left, site title + route badge share head row,
   score+stars+status share one bottom flex line. */
@media (max-width:768px) {
  #screen-logs .logs-list { padding:0 12px; }
  .il-table, .il-table tbody, .il-table tr, .il-table td { display:block; width:100%; }
  .il-table thead { display:none; }
  .il-table tr.il-day { margin:14px 0 8px; padding:4px 4px 6px; border-bottom:1px solid var(--line); }
  .il-table tr.il-day td { padding:0; border:0; font-family:var(--mono,'Noto Sans Mono'); font-size:11px; color:var(--dim); display:flex; align-items:center; gap:8px; }
  .il-table tr.il-day .pill { display:inline-block; background:var(--brand-soft); color:var(--brand-deep); font-weight:700; font-size:10.5px; padding:3px 9px; border-radius:99px; margin-right:0; }

  /* card shell v5: 3-col body grid + full-width hero photo as a 4th row.
     Names wrap freely (no ellipsis on site / insp / guard). */
  .il-table tr.il-r {
    display:grid;
    grid-template-columns: 30px 1fr auto;
    grid-template-areas:
      "route site  date"
      "route insp  insp"
      "route guard guard"
      "route score status"
      "photo photo photo";
    column-gap: 9px;
    row-gap: 4px;
    background:var(--bg-1);
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px 12px 0;
    margin-bottom:12px;
    overflow:hidden;
  }
  .il-table tr.il-r td { border:0; padding:0; font-size:12.5px; }

  /* col 1: route badge */
  .il-table tr.il-r td.il-route { grid-area:route; align-self:start; margin-top:2px; }
  .il-table tr.il-r td.il-route .il-rb { width:28px; height:28px; border-radius:8px; min-width:0; font-size:13px; padding:0; display:grid; place-items:center; }

  /* site title: wraps fully */
  .il-table tr.il-r td.il-site { grid-area:site; display:flex; align-items:flex-start; gap:5px; font-weight:700; font-size:13px; line-height:1.35; color:var(--fg); min-width:0; word-break:break-word; }
  .il-table tr.il-r td.il-site .il-pin { font-size:14px; color:var(--danger); flex:none; margin-top:1px; }

  /* timestamp top-right */
  .il-table tr.il-r td.il-date { grid-area:date; justify-self:end; align-self:start; font-family:var(--mono,'Noto Sans Mono'); font-size:10px; color:var(--dim); display:flex; align-items:center; gap:3px; white-space:nowrap; margin-top:2px; }
  .il-table tr.il-r td.il-date b { font-weight:600; }

  /* inspector + guard: own row each, full width, wrap */
  .il-table tr.il-r td.il-insp { grid-area:insp; font-family:var(--lao,'Noto Sans Lao'); font-size:11px; color:var(--muted); line-height:1.4; }
  .il-table tr.il-r td.il-insp::before { content:'INS '; font-family:var(--mono,'Noto Sans Mono'); font-size:8.5px; font-weight:700; letter-spacing:.06em; color:var(--dim); background:rgba(0,0,0,.18); padding:1px 5px; border-radius:3px; margin-right:5px; }
  .il-table tr.il-r td.il-guard { grid-area:guard; font-family:var(--lao,'Noto Sans Lao'); font-size:11px; color:var(--muted); line-height:1.4; }
  .il-table tr.il-r td.il-guard::before { content:'GRD '; font-family:var(--mono,'Noto Sans Mono'); font-size:8.5px; font-weight:700; letter-spacing:.06em; color:var(--dim); background:rgba(0,0,0,.18); padding:1px 5px; border-radius:3px; margin-right:5px; }

  /* score + status row */
  .il-table tr.il-r td.il-score { grid-area:score; display:flex; align-items:center; gap:5px; margin-top:4px; }
  .il-table tr.il-r td.il-score .sc { font-size:13px; font-weight:800; }
  .il-table tr.il-r td.il-score .il-stars .material-symbols-outlined { font-size:13px; }
  .il-table tr.il-r td.il-status { grid-area:status; justify-self:end; align-self:center; margin-top:4px; }
  .il-table tr.il-r td.il-status .il-st { padding:2px 9px; font-size:10.5px; }

  /* HERO PHOTO: full-width row, edge to edge, 180px tall */
  .il-table tr.il-r td.il-photo { grid-area:photo; margin:10px -12px 0; padding:0; }
  .il-table tr.il-r td.il-photo .tbl-photo { width:100%; height:180px; border-radius:0; border:0; border-top:1px solid var(--line); display:block; }
  .il-table tr.il-r td.il-photo .tbl-photo img { width:100%; height:100%; object-fit:cover; display:block; }
  .il-table tr.il-r td.il-photo .tbl-photo.empty { height:0; border-top:0; }
  .il-table tr.il-r td.il-photo .tbl-photo-cnt { font-size:11px; padding:3px 7px; right:8px; bottom:8px; }

  .il-table tr.il-r td.il-site::before,
  .il-table tr.il-r td.il-status::before,
  .il-table tr.il-r td.il-score::before,
  .il-table tr.il-r td.il-date::before,
  .il-table tr.il-r td.il-route::before { content:none; }
}

/* ============================================================
   DESKTOP: ROSTER (>768px) - search/filter toolbar + paneled
   rows; live status rendered as soft pills. Reuses .r-row markup.
   ============================================================ */
@media (min-width:769px) {
  #screen-roster .search-wrap { max-width:1180px; margin:18px auto 12px; width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; }
  #screen-roster .filter-strip { max-width:1180px; margin:0 auto 16px; width:100%; display:inline-flex; gap:3px; background:var(--bg-2); border:1px solid var(--line); border-radius:11px; padding:3px; }
  #screen-roster .filter-strip .filt { border-radius:8px; }
  #screen-roster .scroll { max-width:1180px; margin:0 auto; width:100%; padding:0 0 60px; }
  #screen-roster .ptr-indicator { display:none; }

  #screen-roster .roster-list { padding:0; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); overflow:hidden; }
  #screen-roster .r-row { display:grid; grid-template-columns:4px 44px 1fr auto; align-items:center; gap:16px; width:100%; padding:13px 22px 13px 0; border-top:1px solid var(--line); border-radius:0; background:none; text-align:left; transition:background .15s ease; }
  #screen-roster .roster-list > :first-child.r-row { border-top:0; }
  #screen-roster .r-row:hover { background:var(--bg-2); }
  #screen-roster .r-row .stripe { width:4px; height:100%; border-radius:0; align-self:stretch; }
  #screen-roster .r-row .av { width:38px; height:38px; border-radius:10px; font-size:13px; }
  #screen-roster .r-row .nm { font-size:14px; }
  #screen-roster .r-row .mt { font-size:12px; color:var(--dim); display:flex; align-items:center; gap:7px; margin-top:3px; }
  /* status word -> soft pill */
  #screen-roster .r-row .mt .st { padding:3px 10px; border-radius:99px; font-weight:600; }
  #screen-roster .r-row .mt .st-on    { background:var(--ok-soft); color:var(--ok); }
  #screen-roster .r-row .mt .st-idle  { background:var(--warn-soft); color:var(--warn); }
  #screen-roster .r-row .mt .st-off   { background:var(--bg-3); color:var(--muted); }
  #screen-roster .r-row .mt .st-alert { background:var(--danger-soft); color:var(--danger); }
  #screen-roster .r-row .right { gap:14px; padding-right:0; }
  #screen-roster .r-row .right .sc { font-size:16px; font-weight:700; }
  #screen-roster .r-row .right .chev { font-size:18px; }
}

/* ============================================================
   DESKTOP: ALERTS (>768px) - filter toolbar + flat inbox panel.
   Reuses .alert markup + existing severity colors (warn/info/log).
   ============================================================ */
@media (min-width:769px) {
  #screen-alerts .filter-strip { max-width:920px; margin:18px auto 16px; width:100%; display:inline-flex; gap:3px; background:var(--bg-2); border:1px solid var(--line); border-radius:11px; padding:3px; }
  #screen-alerts .filter-strip .filt { border-radius:8px; }
  #screen-alerts .scroll { max-width:920px; margin:0 auto; width:100%; padding:0 0 60px; }

  #screen-alerts .alerts-list { gap:0; padding:0; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); overflow:hidden; }
  #screen-alerts .alert { grid-template-columns:42px minmax(0,1fr) auto auto; gap:15px; padding:15px 22px; border-radius:0; border-top:1px solid var(--line); }
  #screen-alerts .alerts-list > :first-child.alert { border-top:0; }
  #screen-alerts .alert:hover { background:var(--bg-2); }
  #screen-alerts .alert .ic { width:38px; height:38px; border-radius:11px; font-size:16px; font-weight:800; align-self:center; }
  #screen-alerts .alert .tt { font-size:14px; white-space:normal; }
  #screen-alerts .alert .ds { font-size:12.5px; white-space:normal; }
  #screen-alerts .alert .tm { font-size:11.5px; align-self:center; color:var(--dim); }
  #screen-alerts .alert .alert-chev { font-size:18px; }
}

/* ============================================================
   DESKTOP: SITES (>768px) - 3 KPI cards + search/filter toolbar
   + paneled rows. Reuses .s-row markup + status model.
   ============================================================ */
@media (min-width:769px) {
  #screen-sites .scroll { max-width:1180px; margin:0 auto; width:100%; padding:24px 0 60px; }
  #screen-sites .s-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
  #screen-sites .s-stat { border-radius:16px; padding:16px 20px; border-left-width:4px; box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); }
  #screen-sites .s-stat-v { font-size:28px; }

  #screen-sites .s-search { max-width:1180px; margin:0 auto 12px; width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; }
  #screen-sites .s-filters { max-width:1180px; margin:0 auto 16px; width:100%; display:inline-flex; gap:3px; background:var(--bg-2); border:1px solid var(--line); border-radius:11px; padding:3px; }
  #screen-sites .s-filters .filt { border-radius:8px; }

  #screen-sites .s-list { padding:0; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); overflow:hidden; }
  #screen-sites .s-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:18px; padding:14px 22px; margin:0; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; transition:background .15s ease; }
  #screen-sites .s-row.today { border-left:3px solid var(--ok); }
  #screen-sites .s-row.overdue { border-left:3px solid var(--danger); }
  #screen-sites .s-row.never { border-left:3px solid var(--dim); }
  #screen-sites .s-list > :first-child.s-row { border-top:0; }
  #screen-sites .s-row:hover { background:var(--bg-2); }
  #screen-sites .s-row-name { font-size:14px; }
  #screen-sites .s-row-meta { font-size:12px; color:var(--dim); margin-top:3px; }
  #screen-sites .s-row-r { display:flex; align-items:center; gap:16px; }
  #screen-sites .s-score { font-size:15px; font-weight:700; }
  #screen-sites .s-score.mid { color:var(--warn); }
}

/* ============================================================
   DESKTOP: REST DAYS (>768px) - centered panels, wide calendar
   with readable solid count badges + tinted day cells.
   ============================================================ */
@media (min-width:769px) {
  #screen-rest { align-items:stretch; }
  #screen-rest .rh-seg { width:100%; max-width:860px; margin:18px auto 6px; }
  #screen-rest .rh-body { width:100%; max-width:860px; margin:0 auto; padding:0 0 60px; }
  #screen-rest .rh-hero,
  #screen-rest .rh-cal-card,
  #screen-rest .rh-card { margin:12px 0; border:1px solid var(--line); box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); }
  #screen-rest .rh-sec { padding:8px 2px 6px; }

  /* bigger, friendlier calendar */
  #screen-rest .rh-cal { gap:6px; }
  #screen-rest .rh-cell { border-radius:11px; font-size:15px; border:1px solid var(--line); }
  #screen-rest .rh-cell.pad { border:0; }
  #screen-rest .rh-cell.has { background:var(--ok-soft); border-color:transparent; }
  #screen-rest .rh-cell.warnU { background:var(--warn-soft); border-color:transparent; }
  #screen-rest .rh-cell.breach { background:var(--danger-soft); border-color:transparent; }
  #screen-rest .rh-cell .cnt { top:4px; right:5px; min-width:18px; height:18px; font-size:10px; background:var(--ok); border:0; color:#fff; }
  #screen-rest .rh-cell.warnU .cnt { background:var(--warn); color:#fff; }
  #screen-rest .rh-cell.breach .cnt { background:var(--danger); color:#fff; }
  #screen-rest .rh-cell.today { box-shadow:inset 0 0 0 2px var(--accent); font-weight:700; }

  /* FAB: no bottom nav on desktop, lift it to the corner */
  #screen-rest .rh-fab { bottom:28px; right:28px; box-shadow:0 6px 18px rgba(47,107,216,.35); }
}

/* ============================================================
   DESKTOP POLISH (>768px) - audit fixes
   ============================================================ */
/* the desktop-only home refresh button is hidden on mobile (pull-to-refresh covers it) */
.tb-refresh-desktop { display:none; }

@media (min-width:769px) {
  /* topbar: sidebar owns nav, so drop the redundant back-arrow + home avatar.
     Collapse to [title | actions]. */
  .topbar { grid-template-columns:minmax(0,1fr) auto; }
  .topbar > .tb-icon:first-child { display:none; }
  #screen-home .tb-av { display:none; }
  #screen-home .topbar { grid-template-columns:minmax(0,1fr) auto auto; }
  .tb-refresh-desktop { display:grid; }


  /* Logs: show an icon in the empty-photo cell instead of a blank box */
  #screen-logs .log-photo.empty { background:var(--bg-2); display:grid; place-items:center; }
  #screen-logs .log-photo.empty::after { content:'no_photography'; font-family:'Material Symbols Outlined'; font-size:20px; color:var(--dim); }

  /* Rest: cap calendar cell height so cells aren't huge at full width */
  #screen-rest .rh-cell { aspect-ratio:auto; min-height:74px; height:84px; }
}

/* ============================================================
   HOME v2 - KPI cards, paneled sections, CTA row.
   Base styles work mobile + desktop; grid columns set per-width.
   ============================================================ */
/* v4 hero buttons: two giant primary CTAs (Inspection Logs + Special Duty).
   Mobile-only. Desktop keeps the .hpanel previews. */
.hhero { display:none; grid-template-columns:1fr 1fr; gap:10px; margin:14px 16px 14px; }
.hhero-btn { position:relative; border-radius:16px; padding:14px 13px 13px; cursor:pointer; overflow:hidden; border:1.5px solid; text-align:left; font-family:inherit; color:inherit; transition:transform .15s ease; }
.hhero-btn:active { transform:scale(.98); }
.hhero-btn.logs { background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 4%, transparent) 100%); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.hhero-btn.spec { background:linear-gradient(160deg, color-mix(in srgb, var(--purple) 20%, transparent) 0%, color-mix(in srgb, var(--purple) 4%, transparent) 100%); border-color:color-mix(in srgb, var(--purple) 45%, transparent); }
.hhero-btn::after { content:''; position:absolute; top:-30px; right:-30px; width:90px; height:90px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.08), transparent 70%); pointer-events:none; }
.hhero-arr { position:absolute; right:11px; top:12px; width:22px; height:22px; border-radius:6px; background:rgba(255,255,255,.08); display:grid; place-items:center; font-size:14px !important; color:var(--fg); font-family:'Material Symbols Outlined' !important; }
.hhero-icb { width:34px !important; height:34px; border-radius:10px; display:grid; place-items:center; font-size:18px !important; margin-bottom:10px; font-family:'Material Symbols Outlined' !important; }
.hhero-btn.logs .hhero-icb { background:color-mix(in srgb, var(--accent) 25%, transparent); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.hhero-btn.spec .hhero-icb { background:color-mix(in srgb, var(--purple) 25%, transparent); color:var(--purple); border:1px solid color-mix(in srgb, var(--purple) 40%, transparent); }
.hhero-ttl { display:block; font-family:var(--lao,'Noto Sans Lao'); font-weight:700; font-size:13px; color:var(--fg); line-height:1.2; margin-bottom:2px; }
.hhero-sub { display:block; font-family:var(--mono,'Noto Sans Mono'); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.hhero-foot { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.hhero-n { font-family:'Space Grotesk', var(--display,'DM Sans'); font-weight:800; font-size:24px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1; }
.hhero-btn.logs .hhero-n { color:var(--accent); }
.hhero-btn.spec .hhero-n { color:var(--purple); }
.hhero-d { font-family:var(--mono,'Noto Sans Mono'); font-size:8px; color:var(--dim); text-align:right; line-height:1.25; letter-spacing:.06em; }
.hhero-d-l { display:block; }
.hhero-d b { display:block; font-size:10px; font-weight:800; color:var(--ok); }
.hhero-btn.spec .hhero-d b { color:var(--purple); }
@media (max-width:768px) { .hhero { display:grid; } }

.hk-row { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:12px 16px 16px; }
.hk { background:var(--bg-1); border:1px solid var(--line); border-radius:16px; padding:15px 16px; box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); display:flex; flex-direction:column; gap:8px; min-height:100px; }
.hk-top { display:flex; align-items:center; justify-content:space-between; }
.hk-ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:19px; }
.hk.a .hk-ic { background:var(--brand-soft); color:var(--accent); }
.hk.b .hk-ic { background:var(--ok-soft); color:var(--ok); }
.hk.c .hk-ic { background:var(--warn-soft); color:var(--warn); }
.hk.d .hk-ic { background:var(--purple-soft, #f0eafe); color:var(--purple); }
.hk-v { font-size:27px; font-weight:800; line-height:1; letter-spacing:-.02em; }
.hk.a .hk-v { color:var(--accent); } .hk.b .hk-v { color:var(--ok); } .hk.c .hk-v { color:var(--warn); } .hk.d .hk-v { color:var(--purple); }
.hk-k { color:var(--dim); font-size:12px; }
.hk-sub { color:var(--dim); font-size:10.5px; }

.hpanel { background:var(--bg-1); border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); overflow:hidden; margin:0 16px 14px; }
.hph { display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid var(--line); }
.hph-ic { font-size:19px; color:var(--accent); }
.hph h4 { font-size:14px; font-weight:700; letter-spacing:-.01em; }
.hph .tag { font-family:var(--mono,'Noto Sans Mono'); font-size:11px; color:var(--dim); background:var(--bg-2); padding:2px 8px; border-radius:99px; }
.hph .more { margin-left:auto; color:var(--accent); font-size:12px; font-weight:600; background:none; border:0; cursor:pointer; }
.hpanel .logs-list, .hpanel .alerts-list, .hpanel .roster-list, .hpanel .h-sp-list { padding:6px; }

.hcta-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 16px 14px; }
.hcta { display:flex; align-items:center; gap:11px; padding:13px 14px; border-radius:14px; background:var(--bg-1); border:1px solid var(--line); box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); cursor:pointer; text-align:left; width:100%; }
.hcta-ic { width:36px; height:36px; border-radius:10px; background:var(--brand-soft); color:var(--accent); display:grid; place-items:center; flex:none; font-size:20px; }
.hcta-l { display:flex; flex-direction:column; min-width:0; }
.hcta-t { font-size:13px; font-weight:700; }
.hcta-s { font-size:11px; color:var(--dim); }
.hcta .chev { margin-left:auto; color:var(--dim); font-size:18px; }

@media (min-width:769px) {
  .hk-row, .hpanel, .hcta-row { margin-left:0; margin-right:0; }
  .hk-row { gap:14px; margin-bottom:18px; }
  .home-col { gap:16px; }
}

/* ============================================================
   LOGS: KPI strip + inspector select
   ============================================================ */
.il-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:14px 16px 0; }
.il-kpi { display:flex; align-items:center; gap:12px; background:var(--bg-1); border:1px solid var(--line); border-radius:14px; padding:12px 15px; box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); }
.il-kpi-ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:19px; flex:none; }
.il-kpi.a .il-kpi-ic { background:var(--brand-soft); color:var(--accent); }
.il-kpi.b .il-kpi-ic { background:var(--ok-soft); color:var(--ok); }
.il-kpi.d .il-kpi-ic { background:var(--purple-soft,#f0eafe); color:var(--purple); }
.il-kpi.r .il-kpi-ic { background:var(--danger-soft); color:var(--danger); }
.il-kpi .v { font-size:22px; font-weight:800; line-height:1; letter-spacing:-.02em; }
.il-kpi.a .v { color:var(--accent); } .il-kpi.b .v { color:var(--ok); } .il-kpi.d .v { color:var(--purple); } .il-kpi.r .v { color:var(--danger); }
.il-kpi .k { color:var(--dim); font-size:11.5px; margin-top:3px; }

/* vks-kit jt-select dropdown (mapped to app tokens) */
.jt-select { position:relative; }
.jt-select-trigger { display:flex; align-items:center; gap:8px; width:100%; height:42px; padding:0 12px; border-radius:11px; border:1px solid var(--line); background:var(--bg-2); font-size:13.5px; font-family:inherit; color:var(--fg); cursor:pointer; transition:border-color .15s, box-shadow .15s; text-align:left; }
.jt-select-trigger:hover { border-color:var(--line-2); }
.jt-select-trigger.is-open, .jt-select-trigger:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,107,216,.14); outline:none; }
.jt-select-trigger .jt-sel-lead { font-size:18px; color:var(--dim); flex-shrink:0; }
.jt-select-trigger .jt-sel-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jt-select-trigger .jt-sel-arrow { font-size:18px; color:var(--dim); transition:transform .2s ease; flex-shrink:0; }
.jt-select-trigger.is-open .jt-sel-arrow { transform:rotate(180deg); }
.jt-select-panel { position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--bg-1); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(20,30,55,.14), 0 2px 6px rgba(20,30,55,.06); z-index:9999; overflow:hidden; animation:jt-drop-in .15s ease-out; }
.jt-select-panel[hidden] { display:none; }
@keyframes jt-drop-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.jt-select-search-wrap { display:flex; align-items:center; gap:6px; padding:8px 10px; border-bottom:1px solid var(--line); }
.jt-select-search-wrap .material-symbols-outlined { font-size:18px; color:var(--dim); }
.jt-select-search { flex:1; border:none; outline:none; font-size:13px; font-family:inherit; color:var(--fg); background:transparent; }
.jt-select-scroll { max-height:260px; overflow-y:auto; padding:4px; }
.jt-select-option { display:flex; align-items:center; gap:8px; width:100%; padding:9px 10px; border-radius:8px; border:none; background:transparent; font-size:13px; font-family:inherit; color:var(--fg); cursor:pointer; text-align:left; transition:background .1s; }
.jt-select-option:hover { background:var(--bg-2); }
.jt-select-option.is-selected { background:var(--brand-soft); font-weight:600; }
.jt-select-option .jt-sel-check { margin-left:auto; font-size:18px; color:var(--accent); font-variation-settings:'FILL' 1; }
.jt-select.is-compact .jt-select-trigger { height:40px; font-size:13px; }
.jt-select.is-compact .jt-select-panel { min-width:230px; }

@media (max-width:768px) {
  .il-kpis { grid-template-columns:repeat(2,1fr); }
  #screen-logs .jt-select { margin:0 16px 10px; }
}

/* ── date-range calendar popover (inside jt-select panel) ── */
/* right-anchored so the panel opens leftward and never overflows the screen */
#tl-date-panel { left:auto; right:0; width:300px; }
.jt-daterange { padding:12px; }
.dr-presets { display:flex; gap:6px; }
.dr-preset { flex:1; padding:8px 6px; border-radius:9px; border:1px solid var(--line); background:var(--bg-2); color:var(--muted); font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:all .15s; }
.dr-preset:hover { border-color:var(--line-2); }
.dr-preset.on { background:var(--brand-soft); border-color:var(--accent); color:var(--brand-deep); }
.dr-sep { display:flex; align-items:center; gap:10px; margin:12px 0 8px; font-size:11px; color:var(--dim); }
.dr-sep::before, .dr-sep::after { content:''; flex:1; height:1px; background:var(--line); }
/* calendar */
.dr-calhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.dr-mo { font-weight:700; font-size:13.5px; } .dr-mo .num { color:var(--dim); font-family:var(--mono,'Noto Sans Mono'); }
.dr-nav { display:flex; gap:4px; }
.dr-nav button { width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--bg-1); display:grid; place-items:center; color:var(--muted); cursor:pointer; }
.dr-nav button:hover { background:var(--bg-2); }
.dr-nav .material-symbols-outlined { font-size:18px; }
.dr-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.dr-dow span { text-align:center; font-family:var(--mono,'Noto Sans Mono'); font-size:10.5px; color:var(--dim); padding:4px 0; }
.dr-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.dr-d { aspect-ratio:1; display:grid; place-items:center; font-family:var(--mono,'Noto Sans Mono'); font-size:12.5px; color:var(--fg); cursor:pointer; border-radius:9px; position:relative; }
.dr-d:hover { background:var(--bg-2); }
.dr-d.pad { visibility:hidden; cursor:default; }
.dr-d.muted { color:var(--bg-3); cursor:default; }
.dr-d.muted:hover { background:transparent; }
.dr-d.inrange { background:var(--brand-soft); border-radius:0; color:var(--brand-deep); }
.dr-d.start, .dr-d.end { background:var(--accent); color:#fff; font-weight:700; }
.dr-d.start { border-radius:9px 0 0 9px; } .dr-d.end { border-radius:0 9px 9px 0; } .dr-d.start.end { border-radius:9px; }
.dr-d.today::after { content:''; position:absolute; bottom:3px; width:4px; height:4px; border-radius:50%; background:var(--accent); }
.dr-d.start.today::after, .dr-d.end.today::after { background:#fff; }
.dr-foot { display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.dr-sel { flex:1; font-family:var(--mono,'Noto Sans Mono'); font-size:12px; color:var(--muted); }
.dr-clear, .dr-apply { padding:8px 14px; border-radius:9px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; border:1px solid var(--line); }
.dr-clear { background:var(--bg-2); color:var(--muted); }
.dr-clear:hover { border-color:var(--line-2); color:var(--fg); }
.dr-apply { background:var(--accent); border-color:var(--accent); color:#fff; }
.dr-apply:hover { filter:brightness(1.05); }
@media (max-width:768px) {
  #screen-logs #tl-date-dd { margin:0 16px 10px; }
  #tl-date-panel { width:auto; }
}

/* ============================================================
   MOBILE BOTTOM-SHEET DROPDOWNS (jt-select + jt-daterange)
   Reuses the Marketing V2 pattern: dropdown panels slide up from the
   bottom on phones, with grabber, backdrop, safe-area inset, internal
   scroll. Triggers stay where they are. Inline dropdown on desktop. */
@media (max-width:768px) {
  /* full-screen backdrop when ANY jt-select panel is open */
  .jt-select:has(.jt-select-panel:not([hidden]))::before {
    content:''; position:fixed; inset:0; background:rgba(0,0,0,.42);
    z-index:9998; pointer-events:none; animation:jt-sheet-bd .22s ease;
  }
  /* panel becomes a bottom sheet */
  .jt-select-panel:not([hidden]) {
    position:fixed !important;
    left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; max-width:100% !important; max-height:82vh !important;
    border-radius:18px 18px 0 0 !important;
    border:0 !important; border-top:1px solid var(--line-2) !important;
    padding:24px 14px calc(14px + env(safe-area-inset-bottom, 12px)) !important;
    box-shadow:0 -10px 32px rgba(0,0,0,.5) !important;
    overflow-y:auto !important;
    animation:jt-sheet-up .38s cubic-bezier(.34,1.56,.64,1) !important;
    z-index:9999 !important;
  }
  /* grabber */
  .jt-select-panel:not([hidden])::before {
    content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:40px; height:4px; border-radius:2px; background:var(--line-2);
    pointer-events:none; z-index:2;
  }

  /* search box inside dropdown sticks under grabber */
  .jt-select-panel .jt-select-search,
  .jt-select-panel .dd-search,
  .jt-select-panel .jt-search { position:sticky; top:0; background:var(--bg-1); padding-top:6px; z-index:1; }

  /* iOS zoom guard: any input >= 16px */
  .jt-select-panel input,
  .jt-search input,
  .search-wrap input { font-size:16px !important; }

  /* daterange specifics: roomier touch targets */
  .jt-daterange { padding:6px 2px 2px !important; }
  .dr-presets { gap:8px; }
  .dr-preset { padding:11px 8px; font-size:14px; }
  .dr-cal { gap:4px; }
  .dr-d { font-size:14px; min-height:38px; }
  .dr-nav button { width:36px; height:36px; }
  .dr-nav .material-symbols-outlined { font-size:20px; }
  .dr-foot { gap:10px; padding-top:14px; }
  .dr-clear, .dr-apply { padding:11px 16px; font-size:14px; min-height:42px; }

  /* inspector list items in sheet get full tap area */
  .jt-select-panel .jt-option,
  .jt-select-panel .dd-opt,
  .jt-select-scroll > * { min-height:44px; }
}
@keyframes jt-sheet-up { from { transform:translateY(100%); opacity:.6; } to { transform:translateY(0); opacity:1; } }
@keyframes jt-sheet-bd { from { opacity:0; } to { opacity:1; } }


/* ===== Frosted chrome follows theme via --chrome ===== */
.topbar { background:rgba(var(--chrome),.78) !important; }
.ip-tabs { background:rgba(var(--chrome),.72) !important; }
.tabbar { background:rgba(var(--chrome),.82) !important; }

/* ===== Manual theme override (Settings) - wins over the viewport default ===== */
html[data-theme="dark"] {
  --bg-0:#000000; --bg-1:#1c1c1e; --bg-2:#2c2c2e; --bg-3:#3a3a3c;
  --fg:#ffffff; --muted:#8e8e93; --dim:#8a8a8e;
  --accent:#0a84ff; --info:#0a84ff;
  --ok:#30d158; --warn:#ff9f0a; --danger:#ff453a; --purple:#bf5af2; --pink:#ff375f;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --surface:#1c1c1e; --surface-2:#2c2c2e;
  --brand-soft:rgba(10,132,255,.18); --brand-deep:#9cc7ff;
  --ok-soft:rgba(48,209,88,.16); --warn-soft:rgba(255,159,10,.16); --danger-soft:rgba(255,69,58,.16); --purple-soft:rgba(191,90,242,.16);
  --ov:255,255,255; --chrome:0,0,0;
}
html[data-theme="light"] {
  --bg-0:#f3f4f6; --bg-1:#ffffff; --bg-2:#f5f6f8; --bg-3:#e9ebef;
  --fg:#2b2f38; --muted:#5c6470; --dim:#6b7280;
  --accent:#2f6bd8; --info:#2f6bd8;
  --ok:#1f9d57; --warn:#c2790f; --danger:#d6352b; --purple:#7c3aed; --pink:#db2777;
  --line:rgba(0,0,0,.10); --line-2:rgba(0,0,0,.16);
  --surface:#ffffff; --surface-2:#f5f6f8;
  --brand-soft:#e8f0fc; --brand-deep:#1e447f;
  --ok-soft:#e6f6ec; --warn-soft:#fbf0dd; --danger-soft:#fae6e4; --purple-soft:#f0eafe;
  --ov:0,0,0; --chrome:255,255,255;
}

/* ============================================================
   DESKTOP: center composer + settings/admin screens (>768px)
   (previously full-bleed mobile stretch)
   ============================================================ */
@media (min-width:769px) {
  #screen-compose-broadcast .scroll,
  #screen-compose-assign .scroll,
  #screen-compose-incident .scroll,
  #screen-me .scroll { max-width:760px; margin:0 auto; width:100%; padding:24px 28px 60px; }
  #screen-users .scroll,
  #screen-audit .scroll { max-width:1040px; margin:0 auto; width:100%; padding:20px 28px 60px; }
  /* auth screens already center via .auth-wrap; just give a touch more top room */
  #screen-login.screen-auth, #screen-change-pin.screen-auth { display:flex; flex-direction:column; justify-content:center; }
}

/* ============================================================
   ROSTER as a table (desktop) / cards (mobile)
   ============================================================ */
.il-kpi.g .il-kpi-ic { background:var(--bg-3); color:var(--muted); }
.il-kpi.g .v { color:var(--muted); }
/* status pill (shared) */
.rt-st { display:inline-flex; align-items:center; gap:6px; font-family:var(--lao,'Noto Sans Lao'); font-size:12px; font-weight:600; padding:4px 11px; border-radius:99px; white-space:nowrap; }
.rt-st .dt { width:7px; height:7px; border-radius:99px; flex:none; }
.rt-st.st-on { background:var(--ok-soft); color:var(--ok); } .rt-st.st-on .dt { background:var(--ok); }
.rt-st.st-idle { background:var(--warn-soft); color:var(--warn); } .rt-st.st-idle .dt { background:var(--warn); }
.rt-st.st-off { background:var(--bg-3); color:var(--muted); } .rt-st.st-off .dt { background:var(--dim); }
.rt-table .sc { font-family:var(--mono,'Noto Sans Mono'); font-weight:700; }
.rt-table .sc.g { color:var(--ok); } .rt-table .sc.k { color:var(--accent); } .rt-table .sc.w { color:var(--warn); } .rt-table .sc.r { color:var(--danger); } .rt-table .sc.dim { color:var(--dim); }
.rt-table .rt-who .av { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px; font-family:var(--mono,'Noto Sans Mono'); flex:none; }

@media (min-width:769px) {
  #screen-roster .r-kpis { max-width:1080px; margin:18px auto 0; }
  #screen-roster .il-toolbar { max-width:1080px; margin:14px auto 16px; width:100%; display:flex; align-items:center; gap:12px; }
  #screen-roster .il-toolbar .search-wrap { margin:0; flex:0 1 340px; background:var(--bg-2); border:1px solid var(--line); border-radius:11px; }
  #screen-roster .il-toolbar .filter-strip { margin:0 0 0 auto; width:auto; display:inline-flex; gap:3px; background:var(--bg-2); border:1px solid var(--line); border-radius:11px; padding:3px; }
  #screen-roster .il-toolbar .filter-strip .filt { border-radius:8px; }
  #screen-roster .scroll { max-width:1080px; margin:0 auto; width:100%; padding:0 0 60px; }
  #screen-roster .ptr-indicator { display:none; }
  #screen-roster .roster-list { padding:0; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); overflow:hidden; }

  .rt-table { width:100%; border-collapse:collapse; }
  .rt-table thead th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--dim); font-weight:600; padding:11px 22px; background:var(--bg-2); border-bottom:1px solid var(--line); white-space:nowrap; }
  .rt-table th.rt-num, .rt-table td.rt-num, .rt-table th.rt-last, .rt-table td.rt-last, .rt-table th.rt-score, .rt-table td.rt-score { text-align:right; }
  .rt-table td { padding:12px 22px; border-top:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
  .rt-table tbody tr.rt-r:hover td { background:var(--bg-2); cursor:pointer; }
  .rt-table .rt-who { display:flex; align-items:center; gap:12px; }
  .rt-table .rt-who b { font-size:13.5px; font-weight:600; }
  .rt-table .rt-num, .rt-table .rt-last { font-family:var(--mono,'Noto Sans Mono'); color:var(--muted); }
  .rt-table .rt-score .sc { font-size:14.5px; }
}

/* mobile: collapse roster table to cards (v2 grid layout).
   Avatar + name on row 1, status pill on row 2 (indented past avatar),
   today count + last-seen inline on row 3, score anchored top-right. */
@media (max-width:768px) {
  #screen-roster .roster-list { padding:0 12px; }
  .rt-table, .rt-table tbody, .rt-table tr, .rt-table td { display:block; width:100%; }
  .rt-table thead { display:none; }

  .rt-table tr.rt-r { position:relative; background:var(--bg-1); border:1px solid var(--line); border-radius:14px; padding:11px 70px 11px 13px; margin-bottom:10px; }
  .rt-table tr.rt-r td { border:0; padding:0; font-size:12.5px; color:var(--muted); }

  /* row 1: avatar + name horizontal (force flex inside the td) */
  .rt-table tr.rt-r td.rt-who { display:flex; align-items:center; gap:11px; margin-bottom:5px; font-size:13.5px; }
  .rt-table tr.rt-r td.rt-who .av { width:36px; height:36px; flex:none; border-radius:10px; }
  .rt-table tr.rt-r td.rt-who b { font-weight:700; font-size:13.5px; color:var(--fg); line-height:1.2; }

  /* row 2: status pill, indented past the avatar gutter */
  .rt-table tr.rt-r td:nth-child(2) { padding-left:47px; margin-bottom:4px; }

  /* row 3: count + last seen sit on one inline line */
  .rt-table tr.rt-r td.rt-num { display:inline-block; padding-left:47px; font-family:var(--mono,'Noto Sans Mono'); font-size:11px; color:var(--dim); }
  .rt-table tr.rt-r td.rt-last { display:inline-block; padding-left:10px; font-family:var(--mono,'Noto Sans Mono'); font-size:11px; color:var(--dim); }
  .rt-table tr.rt-r td.rt-num::before { content:attr(data-label) ': '; color:var(--dim); }
  .rt-table tr.rt-r td.rt-last::before { content:'\00b7 ' attr(data-label) ': '; color:var(--dim); }
  .rt-table tr.rt-r td[data-label]:not(.rt-num):not(.rt-last):not(.rt-score)::before { content:none; }

  /* score: anchored top-right, big mono numeral */
  .rt-table tr.rt-r td.rt-score { position:absolute; top:14px; right:14px; padding:0; text-align:right; }
  .rt-table tr.rt-r td.rt-score .sc { font-size:17px; font-weight:800; }
  .rt-table tr.rt-r td.rt-score .sc small { font-size:11px; margin-left:1px; }
}

/* ============================================================
   DESKTOP: center detail screens (>768px) - previously full-bleed
   ============================================================ */
@media (min-width:769px) {
  #screen-log-detail .scroll,
  #screen-special-detail .scroll,
  #screen-special-list .scroll,
  #screen-sent-detail .scroll { max-width:820px; margin:0 auto; width:100%; padding:24px 28px 60px; }
  /* inspector profile: center each stacked block */
  #screen-inspector .ip-hero,
  #screen-inspector .ip-quick,
  #screen-inspector .ip-tabs,
  #screen-inspector .scroll { max-width:860px; margin-left:auto; margin-right:auto; width:100%; }
  #screen-inspector .scroll { padding:0 28px 60px; }
  #screen-inspector .ip-hero { margin-top:18px; border-radius:18px; }
}

/* ============================================================
   SITES as a table + live count + status dropdown
   ============================================================ */
.il-kpi.w .il-kpi-ic { background:var(--warn-soft); color:var(--warn); } .il-kpi.w .v { color:var(--warn); }
.il-count { font-family:var(--mono,'Noto Sans Mono'); font-size:11.5px; color:var(--dim); padding:10px 4px; text-align:right; }
.st-dot { width:9px; height:9px; border-radius:99px; flex:none; display:inline-block; }
.st-d-today { background:var(--ok); } .st-d-ok { background:var(--accent); } .st-d-due { background:var(--warn); } .st-d-overdue { background:var(--danger); } .st-d-never { background:var(--dim); }
@media (min-width:769px) {
  #screen-sites .s-kpis { max-width:1120px; margin:18px auto 0; }
  #screen-sites .il-toolbar { max-width:1120px; margin:14px auto 16px; width:100%; display:flex; align-items:center; gap:12px; }
  #screen-sites .il-toolbar .search-wrap { margin:0; flex:0 1 340px; background:var(--bg-2); border:1px solid var(--line); border-radius:11px; }
  #screen-sites .il-toolbar #s-filter-dd { margin-left:auto; min-width:200px; }
  #screen-sites .scroll { max-width:1120px; margin:0 auto; width:100%; padding:0 0 50px; }
  #screen-sites .s-list { padding:0; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); overflow:hidden; }
  .st-table { width:100%; border-collapse:collapse; }
  .st-table thead th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--dim); font-weight:600; padding:11px 22px; background:var(--bg-2); border-bottom:1px solid var(--line); white-space:nowrap; }
  .st-table th.st-num, .st-table td.st-num, .st-table th.st-score, .st-table td.st-score, .st-table th.st-last, .st-table td.st-last, .st-table th.st-stcell, .st-table td.st-stcell { text-align:right; }
  .st-table td { padding:13px 22px; border-top:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
  .st-table tbody tr.st-r:hover td { background:var(--bg-2); cursor:pointer; }
  .st-table .st-site { display:flex; align-items:center; gap:11px; } .st-table .st-site b { font-size:13.5px; }
  .st-table .st-last, .st-table .st-num { font-family:var(--mono,'Noto Sans Mono'); color:var(--muted); }
}
@media (max-width:768px) {
  #screen-sites .s-list { padding:0 12px; }
  .st-table, .st-table tbody, .st-table tr, .st-table td { display:block; width:100%; }
  .st-table thead { display:none; }
  .st-table tr.st-r { position:relative; background:var(--bg-1); border:1px solid var(--line); border-radius:13px; padding:12px 14px; margin-bottom:10px; padding-right:84px; }
  .st-table tr.st-r td { border:0; padding:2px 0; font-size:12.5px; color:var(--muted); }
  .st-table tr.st-r td.st-site { font-size:14px; font-weight:700; }
  .st-table tr.st-r td.st-num::before, .st-table tr.st-r td.st-last::before { content:attr(data-label) ': '; color:var(--dim); }
  .st-table tr.st-r td.st-score { position:absolute; top:12px; right:14px; padding:0; }
  .st-table tr.st-r td.st-stcell { position:absolute; bottom:12px; right:14px; padding:0; }
}
/* ===== SITE DETAIL ===== */
#screen-site-detail .scroll { padding-bottom:50px; }
.sd-hero { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; background:linear-gradient(120deg,var(--bg-1),var(--brand-soft)); border:1px solid var(--line); border-radius:20px; padding:20px 22px; margin:16px; }
.sd-hero-l { display:flex; align-items:center; gap:15px; }
.sd-hero-ic { width:54px; height:54px; border-radius:15px; background:var(--accent); color:#fff; display:grid; place-items:center; flex:none; }
.sd-hero-ic .material-symbols-outlined { font-size:27px; }
.sd-hero h2 { font-size:20px; } .sd-meta { display:flex; gap:8px; margin-top:7px; flex-wrap:wrap; align-items:center; }
.sd-meta .chip { font-family:var(--mono,'Noto Sans Mono'); font-size:11px; color:var(--muted); background:var(--bg-1); border:1px solid var(--line); padding:3px 9px; border-radius:99px; }
.sd-hero-r { display:flex; align-items:center; gap:20px; }
.sd-spark { display:flex; align-items:flex-end; gap:4px; height:50px; }
.sd-spark .b { width:8px; border-radius:3px 3px 0 0; background:var(--ok); } .sd-spark .b.w { background:var(--warn); } .sd-spark .b.r { background:var(--danger); }
.sd-spark-empty { color:var(--dim); font-size:11px; align-self:center; }
.sd-hscore { text-align:right; } .sd-hscore .v { font-size:32px; font-weight:800; font-family:var(--mono,'Noto Sans Mono'); line-height:1; }
.sd-hscore .v.g { color:var(--ok); } .sd-hscore .v.k { color:var(--accent); } .sd-hscore .v.w { color:var(--warn); } .sd-hscore .v.r { color:var(--danger); } .sd-hscore .v.dim { color:var(--dim); }
.sd-hscore .stars { color:#e0a92e; font-size:14px; } .sd-hscore .stars .o { color:var(--bg-3); } .sd-hscore .stars .hf { opacity:.6; }
.sd-kpis { margin:0 16px 16px; } .sd-cols { margin:0 16px; }
.sd-seg { margin-left:auto; display:inline-flex; background:var(--bg-2); border:1px solid var(--line); border-radius:9px; padding:3px; }
.sd-seg button { border:0; background:none; font-family:var(--lao,'Noto Sans Lao'); font-size:12px; font-weight:600; color:var(--muted); padding:5px 11px; border-radius:6px; cursor:pointer; }
.sd-seg button.on { background:var(--bg-1); color:var(--accent); }
.sd-empty { color:var(--dim); font-size:12.5px; padding:14px 18px; text-align:center; }
.sd-tl { padding:8px 18px 16px; }
.sdtl-day { font-family:var(--mono,'Noto Sans Mono'); font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.05em; margin:12px 0 8px; }
.sdtl-item { position:relative; display:grid; grid-template-columns:34px 1fr; gap:13px; padding-bottom:16px; cursor:pointer; }
.sdtl-item::before { content:''; position:absolute; left:16px; top:32px; bottom:-2px; width:2px; background:var(--line); }
.sdtl-item:last-child::before { display:none; }
.sdtl-node { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; z-index:1; }
.sdtl-node .material-symbols-outlined { font-size:18px; }
.sdtl-node.insp { background:var(--brand-soft); color:var(--accent); } .sdtl-node.special { background:var(--purple-soft); color:var(--purple); } .sdtl-node.issue { background:var(--danger-soft); color:var(--danger); }
.sdtl-card { background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:10px 13px; }
.sdtl-card .top { display:flex; align-items:center; gap:8px; } .sdtl-card .ttl { font-weight:600; font-size:13px; flex:1; } .sdtl-card .tm { font-family:var(--mono,'Noto Sans Mono'); font-size:11px; color:var(--dim); }
.sdtl-card .sub { font-size:11.5px; color:var(--muted); margin-top:2px; font-family:var(--mono,'Noto Sans Mono'); }
.sdtl-tag { font-family:var(--mono,'Noto Sans Mono'); font-size:9px; font-weight:700; text-transform:uppercase; padding:2px 6px; border-radius:5px; }
.sdtl-tag.insp { background:var(--brand-soft); color:var(--brand-deep); } .sdtl-tag.special { background:var(--purple-soft); color:var(--purple); } .sdtl-tag.issue { background:var(--danger-soft); color:var(--danger); }
.sdtl-foot { display:flex; align-items:center; gap:9px; margin-top:8px; }
.sdtl-foot .tbl-photo { width:40px; height:28px; border-radius:6px; overflow:hidden; background:var(--bg-3); border:1px solid var(--line); cursor:pointer; flex:none; }
.sdtl-foot .tbl-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.sdtl-foot .tl-sc { font-family:var(--mono,'Noto Sans Mono'); font-weight:700; font-size:12.5px; } .sdtl-foot .tl-sc.g { color:var(--ok); } .sdtl-foot .tl-sc.k { color:var(--accent); } .sdtl-foot .tl-sc.w { color:var(--warn); } .sdtl-foot .tl-sc.r { color:var(--danger); }
.sdtl-stars { color:#e0a92e; font-size:12px; } .sdtl-stars .o { color:var(--bg-3); } .sdtl-stars .hf { opacity:.6; }
.sd-att { display:flex; align-items:center; gap:11px; padding:12px 18px; border-top:1px solid var(--line); }
.sd-att:first-child { border-top:0; }
.sd-att-ic { width:30px; height:30px; border-radius:9px; background:var(--warn-soft); color:var(--warn); display:grid; place-items:center; flex:none; }
.sd-att-ic.r { background:var(--danger-soft); color:var(--danger); }
.sd-att .t { font-size:12.5px; flex:1; } .sd-att .t small { display:block; color:var(--dim); font-family:var(--mono,'Noto Sans Mono'); font-size:10.5px; margin-top:1px; }
.sd-att-sc { font-family:var(--mono,'Noto Sans Mono'); font-weight:700; font-size:13px; color:var(--warn); } .sd-att-sc.r { color:var(--danger); }
#screen-site-detail .insp-row { display:flex; align-items:center; gap:11px; padding:11px 18px; border-top:1px solid var(--line); }
#screen-site-detail .insp-row:first-child { border-top:0; }
#screen-site-detail .insp-row .av { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:12px; font-family:var(--mono,'Noto Sans Mono'); flex:none; }
#screen-site-detail .insp-row .nm { flex:1; } #screen-site-detail .insp-row .nm b { font-size:13px; display:block; } #screen-site-detail .insp-row .nm small { font-family:var(--mono,'Noto Sans Mono'); font-size:11px; color:var(--dim); }
#screen-site-detail .insp-row .sc { font-family:var(--mono,'Noto Sans Mono'); font-size:13px; font-weight:700; color:var(--ok); }
#screen-site-detail .info-row { display:flex; align-items:center; gap:10px; padding:11px 18px; border-top:1px solid var(--line); font-size:13px; }
#screen-site-detail .info-row:first-child { border-top:0; }
#screen-site-detail .info-row .material-symbols-outlined { font-size:18px; color:var(--dim); } #screen-site-detail .info-row .k { color:var(--dim); flex:1; } #screen-site-detail .info-row .v { font-weight:600; font-family:var(--mono,'Noto Sans Mono'); }
@media (min-width:769px) {
  #screen-site-detail .scroll { max-width:1120px; margin:0 auto; width:100%; padding:0 28px 50px; }
  .sd-hero, .sd-kpis, .sd-cols { margin-left:0; margin-right:0; }
  .sd-hero { margin-top:20px; }
  .sd-cols { display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start; }
  .sd-side { display:flex; flex-direction:column; gap:20px; }
  .sd-panel { margin:0; }
}
@media (max-width:768px) {
  .sd-cols { display:flex; flex-direction:column; gap:16px; }
  .sd-side { display:flex; flex-direction:column; gap:16px; }
  .sd-hero-r { flex-direction:column-reverse; align-items:flex-end; gap:8px; }
}

/* ============================================================
   DESKTOP: inspector screen polish (CSS-only, panes unchanged)
   ============================================================ */
@media (min-width:769px) {
  #screen-inspector .ip-hero { background:linear-gradient(120deg,var(--bg-1),var(--brand-soft)); border:1px solid var(--line); border-radius:20px; padding:20px 22px; box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); }
  #screen-inspector .ip-hero-top { gap:16px; }
  #screen-inspector .ip-av { width:58px; height:58px; border-radius:16px; font-size:19px; }
  #screen-inspector .ip-name-big { font-size:20px; }
  /* stats -> 4 KPI cards */
  #screen-inspector .ip-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-top:18px; }
  #screen-inspector .ip-stat { background:var(--bg-1); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); }
  #screen-inspector .ip-stat .v { font-size:22px; font-weight:800; }
  #screen-inspector .ip-stat .l { font-size:11px; color:var(--dim); margin-top:3px; }
  /* quick actions -> cards */
  #screen-inspector .ip-quick { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
  #screen-inspector .ip-qa { background:var(--bg-1); border:1px solid var(--line); border-radius:14px; padding:13px; box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); }
  #screen-inspector .ip-qa .ipq-l { color:inherit; }
  /* tabs -> segmented control */
  #screen-inspector .ip-tabs { display:inline-flex; gap:3px; background:var(--bg-2); border:1px solid var(--line); border-radius:11px; padding:3px; margin-top:16px; }
  #screen-inspector .ip-tab { border-radius:8px; padding:8px 16px; font-weight:600; font-size:13px; color:var(--muted); background:none; }
  #screen-inspector .ip-tab.on { background:var(--bg-1); color:var(--accent); box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.05)); }
}