/* GNEXT Remote Audit — design system v3 "Field Instrument" (approved 5 Nov 2026)
   Ink and quiet greys carry the interface; GNEXT red marks only the primary action.
   Numbers/times/IDs in Geist Mono. Hairlines over shadows (shadow only for floating
   things). 4-point spacing, radii 10/16/24, 48 px minimum touch targets.
   Motion only for state changes and off with prefers-reduced-motion. */

:root {
  --red: #D71920; --red-press: #B5141A; --red-ring: rgba(215, 25, 32, .25);
  --ink: #0A0A0B; --ink-2: #18181B;
  --g800: #27272A; --g700: #3F3F46; --g600: #52525B; --g500: #71717A; --g400: #A1A1AA;
  --g300: #D4D4D8; --line: #E4E4E7; --canvas: #F4F4F5; --soft: #FAFAFA; --surface: #FFFFFF;
  --done: #15803D; --done-bg: #F0FDF4; --done-line: #BBF7D0;
  --attn: #B45309; --attn-bg: #FFFBEB; --attn-line: #FDE68A;
  --bad: #9F1239; --bad-bg: #FFF1F2; --bad-line: #FECDD3;
  --prog: #1D4ED8; --prog-bg: #EFF6FF; --prog-line: #BFDBFE;
  --font: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-s: 10px; --r-m: 16px; --r-l: 24px;
  --float: 0 12px 32px -12px rgba(10, 10, 11, .35);
  --ease: 180ms cubic-bezier(.2, .7, .2, 1);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font: 400 16px/1.5 var(--font); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; font-feature-settings: "ss01" 1; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--ink); text-underline-offset: 3px; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--red-ring); outline-offset: 2px; }

/* ---------- Type ---------- */
.display { font-size: 28px; line-height: 1.12; letter-spacing: -.03em; font-weight: 600; }
.h1 { font-size: 24px; line-height: 1.2; letter-spacing: -.025em; font-weight: 600; }
.h2 { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; font-weight: 600; }
.h3 { font-size: 15px; line-height: 1.35; font-weight: 600; }
.mono { font-family: var(--mono); font-feature-settings: normal; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--g500); text-transform: uppercase; }
.muted { color: var(--g600); }
.faint { color: var(--g500); }
.small { font-size: 14px; } .xsmall { font-size: 12px; }
.strong { font-weight: 600; }
.wrap-any { overflow-wrap: anywhere; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Layout ---------- */
.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.screen { width: 100%; max-width: 560px; margin: 0 auto; padding: calc(12px + var(--safe-t)) 16px calc(128px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 12px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ---------- Icons ---------- */
.ic { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.ic-s { width: 16px; height: 16px; } .ic-l { width: 28px; height: 28px; }

/* ---------- Buttons ---------- */
.btn { min-height: 56px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--r-m); font-size: 17px; font-weight: 600; letter-spacing: -.01em; width: 100%; line-height: 1.2; text-align: center; text-decoration: none; transition: background var(--ease), transform 90ms ease, opacity var(--ease); }
.btn:active:not(:disabled) { transform: scale(.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:active:not(:disabled) { background: var(--red-press); }
.btn-primary:disabled { background: var(--line); color: var(--g500); opacity: 1; }
.btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:active:not(:disabled) { background: var(--canvas); }
.btn-quiet { background: var(--canvas); color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-ghost { background: transparent; color: var(--g600); min-height: 48px; width: auto; padding: 0 12px; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.btn-s { min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: var(--r-s); width: auto; gap: 8px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--ink); flex: 0 0 auto; }
.icon-btn:active { background: var(--canvas); }

/* ---------- Pills / status ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 500; white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.done { color: var(--done); background: var(--done-bg); }
.status.attn { color: var(--attn); background: var(--attn-bg); }
.status.bad { color: var(--bad); background: var(--bad-bg); }
.status.prog { color: var(--prog); background: var(--prog-bg); }
.status.neutral { color: var(--g600); background: var(--canvas); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--g400); }
.dot.done { background: var(--done); } .dot.attn { background: var(--attn); } .dot.bad { background: var(--bad); } .dot.prog { background: var(--prog); }

/* ---------- Surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px; }
.card.tight { border-radius: var(--r-m); padding: 14px 16px; }
.list { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.list-row { width: 100%; min-height: 64px; padding: 12px 16px; display: flex; align-items: center; gap: 14px; text-align: left; border-bottom: 1px solid var(--canvas); background: var(--surface); }
.list-row:last-child { border-bottom: 0; }
button.list-row:active { background: var(--soft); }
.tile-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: var(--canvas); color: var(--g600); }
.tile-ic.bad { background: var(--bad-bg); color: var(--bad); } .tile-ic.prog { background: var(--prog-bg); color: var(--prog); } .tile-ic.done { background: var(--done-bg); color: var(--done); } .tile-ic.attn { background: var(--attn-bg); color: var(--attn); }
.chev { color: var(--g400); }

/* ---------- Top bars ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.topbar-title { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; text-align: center; }
.topbar-title .t { font-size: 15px; font-weight: 600; max-width: 220px; }
.topbar-title .s { font-size: 12px; color: var(--g500); }
.segs { display: flex; gap: 4px; }
.segs span { flex: 1; height: 4px; border-radius: 2px; background: var(--g300); transition: background var(--ease); }
.segs span.on { background: var(--ink); } .segs span.ok { background: var(--done); }
.bar { height: 4px; border-radius: 2px; background: var(--g300); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--ink); border-radius: 2px; transition: width 240ms ease; }
.bar.indet > span { width: 35%; background: var(--prog); animation: indet 1.1s ease-in-out infinite; }
@keyframes indet { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* ---------- Home ---------- */
.home-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px 2px; }
.next { background: var(--ink); color: #fff; border-radius: var(--r-l); padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.next .meta { font-size: 14px; color: var(--g400); }
.next .tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .1); color: #E4E4E7; }
.next .tag.due { background: rgba(251, 191, 36, .14); color: #FCD34D; }
.next .tag.over { background: rgba(251, 113, 133, .16); color: #FDA4AF; }
.next .tag { white-space: nowrap; }
@media (max-width: 379px) { .next-label { display: none; } }
.next .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.next .kv3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.next .kv3 .v { font-family: var(--mono); font-size: 17px; }
.next .kv3 .k { font-size: 12px; color: var(--g400); }
.next .btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .22); min-height: 48px; font-size: 15px; }

/* ---------- Question ---------- */
.q-done { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); width: 100%; text-align: left; min-height: 48px; }
.q-done .ans { font-size: 13px; font-weight: 600; }
.q-tick { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--done); color: #fff; }
.q-tick .ic { width: 14px; height: 14px; }
.q-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px 18px 18px; display: flex; flex-direction: column; gap: 20px; animation: qin 220ms var(--ease); }
@keyframes qin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.q-title { font-size: 25px; line-height: 1.2; letter-spacing: -.025em; font-weight: 600; }
.req { font-size: 12px; font-weight: 600; color: var(--bad); }
.q-next { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed var(--g300); border-radius: var(--r-m); color: var(--g400); font-size: 14px; }
.q-next .ring { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--g300); flex: 0 0 auto; }
.answers { display: flex; flex-direction: column; gap: 10px; }
.answer { min-height: 64px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 14px; padding: 8px 18px; text-align: left; transition: background var(--ease), border-color var(--ease), color var(--ease); }
.answer:active { background: var(--soft); }
.answer .mk { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--g300); display: grid; place-items: center; color: var(--g600); flex: 0 0 auto; transition: background var(--ease), border-color var(--ease), color var(--ease); }
.answer .mk .ic { width: 16px; height: 16px; }
.answer[aria-pressed="true"] { border: 2px solid var(--ink); padding: 7px 17px; }
.answer[aria-pressed="true"] .mk { background: var(--ink); border-color: var(--ink); color: #fff; }
.answer[data-val="yes"][aria-pressed="true"] { border-color: var(--done); background: var(--done-bg); color: #14532D; }
.answer[data-val="yes"][aria-pressed="true"] .mk { background: var(--done); border-color: var(--done); }
.answer[data-val="no"][aria-pressed="true"] { border-color: var(--bad); background: var(--bad-bg); color: #881337; }
.answer[data-val="no"][aria-pressed="true"] .mk { background: var(--bad); border-color: var(--bad); }
.ratings { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ratings .answer { justify-content: center; padding: 0; font-family: var(--mono); font-size: 20px; }
.ratings .answer[aria-pressed="true"] { background: var(--ink); color: #fff; padding: 0; }
.opt { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); font-weight: 600; cursor: pointer; transition: border-color var(--ease), background var(--ease); }
.opt input { width: 22px; height: 22px; accent-color: var(--ink); flex: 0 0 auto; }
.opt:has(input:checked) { border: 2px solid var(--ink); padding: 9px 15px; background: var(--soft); }
.input, .field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--g300); border-radius: 12px; background: var(--surface); font-size: 16px; transition: border-color var(--ease), box-shadow var(--ease); }
textarea.input, .field textarea { min-height: 112px; resize: vertical; line-height: 1.45; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 10, 11, .1); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .label { font-size: 13px; font-weight: 500; color: var(--g700); }

/* ---------- Evidence ---------- */
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.feature-img { position: relative; aspect-ratio: 3 / 2; background: var(--ink-2); }
.feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.over-tag { position: absolute; left: 12px; top: 12px; height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(10, 10, 11, .72); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; }
.over-btn { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%; background: rgba(10, 10, 11, .72); color: #fff; display: grid; place-items: center; }
.over-btn .ic { width: 18px; height: 18px; }
.ptile { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); text-align: left; display: flex; flex-direction: column; width: 100%; padding: 0; transition: border-color var(--ease); }
.ptile:active { border-color: var(--g300); }
.ptile-img { position: relative; aspect-ratio: 4 / 3; flex: 0 0 auto; background: var(--ink-2); display: block; }
.ptile-img { overflow: hidden; }
.ptile-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ptile-img .ex { opacity: .62; }
.ptile-img .cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; }
.ptile-img .tick { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--done); color: #fff; display: grid; place-items: center; }
.ptile-img .tick .ic { width: 14px; height: 14px; }
.ptile-img .small-tag { position: absolute; left: 8px; top: 8px; height: 22px; padding: 0 8px; border-radius: 999px; background: rgba(10, 10, 11, .72); color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
.ptile-img .busy { position: absolute; inset: 0; background: rgba(10, 10, 11, .45); display: grid; place-items: center; color: #fff; }
.ptile-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.ptile-body .n { font-size: 14px; font-weight: 600; }
.ptile-body .s { font-size: 12px; color: var(--g600); display: flex; align-items: center; gap: 4px; }
.ptile.is-done .s { color: var(--done); }
.ptile.is-busy .s { color: var(--prog); }
.ptile.is-error { border-color: var(--bad-line); background: var(--bad-bg); }
.ptile.is-error .s { color: var(--bad); }
.ptile.is-error .ptile-img::after { content: ""; position: absolute; inset: 0; background: rgba(159, 18, 57, .28); }
.ptile .s .ic { width: 12px; height: 12px; }

/* ---------- Dock (bottom actions) ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--surface); border-top: 1px solid var(--line); padding: 12px 16px calc(14px + var(--safe-b)); }
.dock-in { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.dock-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--g500); min-height: 16px; }
.dock-meta .count { font-family: var(--mono); color: var(--ink); }
.dock-actions { display: flex; gap: 10px; }
.dock-actions > .btn-secondary, .dock-actions > .btn-quiet { flex: 0 0 auto; width: auto; min-width: 108px; }
.saved::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--done); margin-right: 6px; vertical-align: 1px; }

/* ---------- Review / receipt ---------- */
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--canvas); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--g600); flex: 0 0 auto; }
.kv .v { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.fix { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 0; text-align: left; border-bottom: 1px solid var(--bad-line); color: var(--bad); font-size: 15px; font-weight: 600; }
.fix:last-child { border-bottom: 0; }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-m); border: 1px solid; font-size: 14px; line-height: 1.5; }
.alert .t { font-weight: 600; }
.alert.info { color: var(--g700); background: var(--surface); border-color: var(--line); }
.alert.done { color: #14532D; background: var(--done-bg); border-color: var(--done-line); }
.alert.attn { color: #78350F; background: var(--attn-bg); border-color: var(--attn-line); }
.alert.bad { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-line); }
.alert.prog { color: var(--prog); background: var(--prog-bg); border-color: var(--prog-line); }
.success-mark { width: 72px; height: 72px; border-radius: 50%; background: var(--done); color: #fff; display: grid; place-items: center; margin: 24px auto 4px; animation: pop 360ms cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Toast, banner, spinner, skeleton ---------- */
#toast-container { position: fixed; left: 16px; right: 16px; bottom: calc(150px + var(--safe-b)); z-index: 1000; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { max-width: 440px; width: 100%; padding: 12px 16px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; box-shadow: var(--float); display: flex; gap: 10px; align-items: flex-start; animation: rise 180ms var(--ease); transition: opacity 200ms; }
.toast.error { background: var(--surface); color: var(--bad); border: 1px solid var(--bad-line); }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.vbanner { position: fixed; left: 12px; right: 12px; top: calc(12px + var(--safe-t)); z-index: 950; max-width: 520px; margin: 0 auto; background: var(--ink); color: #fff; border-radius: 16px; padding: 10px 10px 10px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--float); font-size: 14px; font-weight: 500; animation: rise 180ms var(--ease); }
.vbanner button { min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--red); color: #fff; font-weight: 600; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 800ms linear infinite; display: inline-block; flex: 0 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.skel { background: #E9E9EC; border-radius: var(--r-m); position: relative; overflow: hidden; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.empty { text-align: center; padding: 32px 16px; color: var(--g600); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; }
.empty .ic { width: 28px; height: 28px; color: var(--g300); }

/* ---------- Login & gate ---------- */
.login { min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; background: var(--ink); color: #fff; padding: calc(56px + var(--safe-t)) 24px calc(24px + var(--safe-b)); }
.login-brand { display: flex; flex-direction: column; gap: 22px; max-width: 420px; }
.login-brand .logo img { height: 40px; }
.login-panel { background: var(--surface); color: var(--ink); border-radius: 28px; padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 14px; max-width: 440px; width: 100%; margin: 0 auto; }
.logo { display: inline-flex; background: #000; border-radius: 8px; overflow: hidden; line-height: 0; flex: 0 0 auto; }
.logo img { height: 28px; width: auto; display: block; }
.gate { min-height: 70dvh; max-width: 420px; margin: 0 auto; padding: 48px 8px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.gate-ic { width: 64px; height: 64px; border-radius: 20px; background: var(--ink); color: #fff; display: grid; place-items: center; }

/* ---------- Bottom sheet ---------- */
.sheet-back { position: fixed; inset: 0; z-index: 700; background: rgba(10, 10, 11, .5); display: flex; align-items: flex-end; justify-content: center; animation: fade 160ms ease; }
.sheet { width: 100%; max-width: 520px; background: var(--surface); border-radius: 24px 24px 0 0; padding: 22px 16px calc(16px + var(--safe-b)); display: flex; flex-direction: column; gap: 12px; animation: rise 200ms var(--ease); }
@media (min-width: 720px) { .sheet-back { align-items: center; } .sheet { border-radius: 24px; } }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 900; background: rgba(10, 10, 11, .96); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b)); animation: fade 160ms ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox-bar { width: 100%; max-width: 900px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 180px); object-fit: contain; border-radius: 14px; }
.lightbox-cap { max-width: 640px; color: #D4D4D8; font-size: 14px; text-align: center; }
.pill-btn { min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ---------- Camera ---------- */
.cam { position: fixed; inset: 0; z-index: 800; background: #000; color: #fff; overflow: hidden; animation: fade 160ms ease; }
.cam-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.cam-stage video, .cam-stage img.shot { width: 100%; height: 100%; object-fit: cover; background: #000; }
.cam-stage img.shot { object-fit: contain; }
.cam-frame { position: absolute; left: 24px; right: 24px; top: calc(170px + var(--safe-t)); bottom: calc(232px + var(--safe-b)); pointer-events: none; }
.cam-frame span { position: absolute; width: 28px; height: 28px; border: 0 solid #fff; }
.cam-frame span:nth-child(1) { left: 0; top: 0; border-left-width: 3px; border-top-width: 3px; border-top-left-radius: 10px; }
.cam-frame span:nth-child(2) { right: 0; top: 0; border-right-width: 3px; border-top-width: 3px; border-top-right-radius: 10px; }
.cam-frame span:nth-child(3) { left: 0; bottom: 0; border-left-width: 3px; border-bottom-width: 3px; border-bottom-left-radius: 10px; }
.cam-frame span:nth-child(4) { right: 0; bottom: 0; border-right-width: 3px; border-bottom-width: 3px; border-bottom-right-radius: 10px; }
.cam-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; padding: calc(12px + var(--safe-t)) 16px 16px; background: rgba(0, 0, 0, .55); display: flex; flex-direction: column; gap: 12px; }
.cam-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cam-title { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.cam-title .t { font-weight: 600; font-size: 16px; }
.cam-title .c { font-family: var(--mono); font-size: 12px; color: #D4D4D8; }
.cam-tip { margin: 0 auto; max-width: 320px; text-align: center; font-size: 14px; line-height: 1.45; color: #E4E4E7; }
.cam-spacer { width: 44px; flex: 0 0 auto; }
.cam-msg { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cam-msg .box { max-width: 380px; background: #18181B; border: 1px solid #27272A; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.5; }
.cam-msg .box .h3 { color: #fff; font-size: 17px; }
.cam-msg .box ol { padding-left: 18px; color: #D4D4D8; }
.cam-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 16px 20px calc(22px + var(--safe-b)); background: rgba(0, 0, 0, .6); display: flex; flex-direction: column; gap: 16px; }
.cam-hint { align-self: center; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 13px; font-weight: 500; }
.cam-controls { display: flex; align-items: center; justify-content: space-between; }
.cam-ex { width: 112px; height: 84px; padding: 0; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .9); overflow: hidden; position: relative; background: #18181B; flex: 0 0 auto; }
.cam-ex img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-ex span { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: rgba(0, 0, 0, .7); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.cam-side { width: 112px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cam-res { font-family: var(--mono); font-size: 11px; color: #D4D4D8; min-height: 14px; }
.shutter { width: 84px; height: 84px; border-radius: 50%; border: 4px solid #fff; background: transparent; display: grid; place-items: center; flex: 0 0 auto; }
.shutter::after { content: ""; width: 66px; height: 66px; border-radius: 50%; background: #fff; transition: transform 90ms ease; }
.shutter:active::after { transform: scale(.9); }
.shutter:disabled { opacity: .4; }
.cam-dots { display: flex; justify-content: center; gap: 6px; }
.cam-dots span { width: 22px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.cam-dots span.ok { background: #22C55E; } .cam-dots span.on { background: #fff; }
.cam-review { display: flex; gap: 10px; }
.cam-review .btn { flex: 1; }
.cam-review .btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 4; }
.cam-flash.on { animation: camflash 220ms ease; }
@keyframes camflash { 0% { opacity: .85; } 100% { opacity: 0; } }

/* ---------- Video card ---------- */
.vid-panel { margin-top: 4px; background: var(--ink-2); border-radius: var(--r-m); padding: 12px; color: #fff; display: flex; flex-direction: column; gap: 12px; }
.vid-panel video { width: 100%; aspect-ratio: 16 / 9; max-height: 58vh; object-fit: contain; border-radius: 12px; background: #000; display: block; }
.vid-status { font-size: 14px; color: #E4E4E7; }
.vid-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vid-actions .btn { flex: 1 1 140px; min-height: 48px; font-size: 15px; }
.vid-panel .btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }

details.ref { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
details.ref > summary { list-style: none; min-height: 52px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; cursor: pointer; }
details.ref > summary::-webkit-details-marker { display: none; }
details.ref > summary .chev { margin-left: auto; transition: transform var(--ease); }
details.ref[open] > summary .chev { transform: rotate(90deg); }
details.ref .ref-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; }
details.ref .ref-body img { width: 100%; border-radius: 12px; border: 1px solid var(--line); min-height: 120px; background: var(--canvas); cursor: zoom-in; }

/* ---------- Manager workspace ---------- */
.ws { min-height: 100dvh; display: flex; flex-wrap: wrap; background: var(--soft); }
.ws-nav { flex: 1 1 236px; max-width: 236px; background: var(--surface); border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100dvh; }
.ws-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px; font-size: 13px; font-weight: 600; color: var(--g600); }
.ws-brand .logo img { height: 24px; }
.ws-links { display: flex; flex-direction: column; gap: 2px; }
.ws-link { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--r-s); font-size: 14px; color: var(--g700); text-align: left; width: 100%; }
.ws-link:hover { background: var(--soft); }
.ws-link[aria-current="page"] { background: var(--canvas); color: var(--ink); font-weight: 600; }
.ws-link .ic { width: 18px; height: 18px; }
.ws-user .who { display: flex; flex-direction: column; min-width: 0; }
.ws-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--canvas); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.ws-main { flex: 999 1 600px; min-width: 0; padding: 26px 36px 48px; display: flex; flex-direction: column; gap: 22px; max-width: 1280px; }
.ws-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ws-search { display: flex; align-items: center; gap: 8px; height: 40px; width: 280px; max-width: 100%; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--g500); }
.ws-search input { border: 0; outline: none; flex: 1; font-size: 14px; background: transparent; color: var(--ink); min-width: 0; }
.headline { font-size: 28px; line-height: 1.25; letter-spacing: -.025em; font-weight: 500; max-width: 760px; }
.headline b { font-weight: 600; }
.headline .bad { color: var(--bad); }
.kpis { display: flex; gap: 28px; flex-wrap: wrap; }
.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi .k { font-size: 12px; color: var(--g500); }
.kpi .v { font-family: var(--mono); font-size: 22px; }
.ws-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--canvas); }
.panel-h h2 { font-size: 15px; font-weight: 600; }
.prow { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--canvas); }
.prow:last-child { border-bottom: 0; }
.cover { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 14px 18px 18px; }
.cover-t { min-height: 48px; border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; border: 1px solid var(--line); background: var(--soft); text-align: left; }
.cover-t .n { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover-t .b { height: 3px; border-radius: 2px; background: var(--g500); }
.cover-t.done { background: var(--done-bg); border-color: var(--done-line); } .cover-t.done .b { background: var(--done); }
.cover-t.prog { background: var(--prog-bg); border-color: var(--prog-line); } .cover-t.prog .b { background: var(--prog); }
.cover-t.over { background: var(--bad-bg); border-color: var(--bad-line); } .cover-t.over .b { background: var(--bad); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--g600); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 500; color: var(--g500); padding: 10px 12px; border-bottom: 1px solid var(--canvas); }
.tbl td { padding: 12px; border-bottom: 1px solid var(--canvas); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th:first-child, .tbl td:first-child { padding-left: 18px; }
.tbl td.mono { font-family: var(--mono); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.tiles .kpi { padding: 14px 18px; border-right: 1px solid var(--canvas); }
.tiles .kpi:last-child { border-right: 0; }

@media (max-width: 899px) {
  .ws-nav { max-width: none; flex-basis: 100%; height: auto; position: static; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; padding: calc(10px + var(--safe-t)) 12px 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ws-links { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; order: 3; }
  .ws-link { width: auto; }
  .ws-user { margin: 0 0 0 auto; border: 0; padding: 0; }
  .ws-user .who { display: none; }
  .ws-main { padding: 18px 16px 48px; }
  .ws-grid { grid-template-columns: 1fr; }
  .headline { font-size: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles .kpi:nth-child(3) { border-right: 0; }
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tr { padding: 10px 16px; border-bottom: 1px solid var(--canvas); }
  .tbl td { border: 0; padding: 2px 0 !important; display: flex; justify-content: space-between; gap: 12px; }
  .tbl td::before { content: attr(data-th); color: var(--g500); font-size: 12px; }
  .tbl td:first-child { font-weight: 600; }
  .tbl td:first-child::before { content: none; }
}

@media (min-width: 900px) {
  body.ws-body { background: var(--soft); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- staging.4 visual QA fixes ---------- */
.login-brand .logo { align-self: flex-start; }
.logo img { max-width: none; }
.tbl .btn-s { white-space: nowrap; }
@media (min-width: 900px) {
  .login { justify-content: center; align-items: center; gap: 48px; }
  .login-brand { width: 100%; max-width: 440px; }
  .login-panel { margin: 0; }
}
@media (max-width: 899px) {
  .ws-top > .row { width: 100%; flex-wrap: nowrap !important; }
  .ws-search { flex: 1 1 auto; width: auto; min-width: 0; height: 44px; }
  .ws-search input { width: 100%; }
  .ws-top .btn-s { min-height: 44px; white-space: nowrap; }
}