/* ============================================================
   MAXX COFFEE · Checklist & Monitoring — browser runtime CSS
   Design system ported verbatim from `7. Maxx_Coffee_Checklist_Mockup_v2.0.html`
   (SOMAP standalone grammar · Maxx amber skin · PRD v1.3 Wave A scope).
   Token-driven: every color used by a component below comes from a custom
   property in :root / [data-theme="dark"] — never a hardcoded hex.
   ============================================================ */
:root{
  --font-ui:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --bg:#efece6;
  --panel:#ffffff;
  --panel-2:#f7f5f1;
  --panel-3:#f0ede7;
  --rail:#16130e;
  --rail-2:#201b13;
  --rail-fg:#a89f8f;
  --rail-fg-strong:#ffffff;
  --rail-line:rgba(255,255,255,.07);
  --ink:#181410;
  --ink-2:#5a5245;
  --ink-3:#948a79;
  --line:#e6e1d7;
  --line-2:#efece5;
  --accent:#a86e0f;
  --accent-2:#8a5a0b;
  --accent-fg:#ffffff;
  --accent-soft:rgba(168,110,15,.10);
  --accent-line:rgba(168,110,15,.30);

  --good:#15976a;   --good-soft:rgba(21,151,106,.12);
  --watch:#c0901c;  --watch-soft:rgba(192,144,28,.14);
  --risk:#d67429;   --risk-soft:rgba(214,116,41,.14);
  --critical:#d23f43; --critical-soft:rgba(210,63,67,.12);
  --info:#3a6fd8;   --info-soft:rgba(58,111,216,.10);
  --low:#8a8172;
  --neutral:#948a79;

  --shadow-sm:0 1px 2px rgba(24,18,8,.05);
  --shadow-md:0 6px 22px rgba(24,18,8,.09);
  --shadow-lg:0 20px 50px rgba(24,18,8,.18);

  --r:12px;
  --r-sm:3px;
  --r-lg:14px;
  --pad:20px;
  --fs:14px;
  --maxw:1280px;
}
[data-theme="dark"]{
  --bg:#101216;
  --panel:#181b21;
  --panel-2:#1e222a;
  --panel-3:#242933;
  --rail:#0b0d11;
  --rail-2:#14171d;
  --rail-fg:#8f96a5;
  --rail-fg-strong:#ffffff;
  --rail-line:rgba(255,255,255,.06);
  --ink:#eceef2;
  --ink-2:#a5abb8;
  --ink-3:#6f7686;
  --line:#2a2f3a;
  --line-2:#232833;
  --accent:#d99a33;
  --accent-2:#e8ae4d;
  --accent-fg:#1a1204;
  --accent-soft:rgba(217,154,51,.13);
  --accent-line:rgba(217,154,51,.35);
  --good:#3fb98a; --good-soft:rgba(63,185,138,.14);
  --watch:#d9ac3e; --watch-soft:rgba(217,172,62,.15);
  --risk:#e08a48; --risk-soft:rgba(224,138,72,.15);
  --critical:#e46468; --critical-soft:rgba(228,100,104,.14);
  --info:#6d97e8; --info-soft:rgba(109,151,232,.13);
  --low:#7d8494;
  --neutral:#6f7686;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 22px rgba(0,0,0,.35);
  --shadow-lg:0 20px 50px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{font-family:var(--font-ui);font-size:var(--fs);color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit;color:inherit}
a{color:var(--accent)}
svg.ic{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.ic.sm{width:13px;height:13px}
.mono{font-family:var(--font-mono)}
.tnum{font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--font-mono);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3)}
/* Loading / inline status text + form field errors (used throughout the runtime
   for "Memuat…" placeholders and inline API error messages). */
.note{font-size:12.5px;color:var(--ink-3)}
.note.critical{color:var(--critical)}
.note.warn{color:var(--watch)}
.field.err{color:var(--critical);font-size:11.5px;margin-bottom:12px}
.c-good{color:var(--good)}.c-watch{color:var(--watch)}.c-risk{color:var(--risk)}.c-critical{color:var(--critical)}.c-accent{color:var(--accent)}.c-2{color:var(--ink-2)}.c-3{color:var(--ink-3)}.c-info{color:var(--info)}
.hidden{display:none !important}

/* ---------- buttons / badges / chips ---------- */
.btn{font-family:var(--font-ui);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;transition:all .14s cubic-bezier(.4,0,.2,1);white-space:nowrap}
.btn:hover{background:var(--panel-2);border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--panel-2);color:var(--ink)}
.btn.sm{padding:5px 9px;font-size:12px}
.btn.danger{background:var(--critical);color:#fff;border-color:var(--critical)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn:disabled:hover{background:var(--accent);border-color:var(--accent)}
.btn:not(.primary):disabled:hover{background:var(--panel);border-color:var(--line)}
.linklike{background:0;border:0;color:var(--accent);cursor:pointer;font:inherit;padding:0;text-decoration:underline;text-underline-offset:2px}
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.07em;padding:3px 7px;border-radius:var(--r-sm);border:1px solid transparent;white-space:nowrap}
.badge.good{background:var(--good-soft);color:var(--good);border-color:color-mix(in srgb,var(--good) 30%,transparent)}
.badge.watch{background:var(--watch-soft);color:var(--watch);border-color:color-mix(in srgb,var(--watch) 32%,transparent)}
.badge.risk{background:var(--risk-soft);color:var(--risk);border-color:color-mix(in srgb,var(--risk) 32%,transparent)}
.badge.critical{background:var(--critical-soft);color:var(--critical);border-color:color-mix(in srgb,var(--critical) 30%,transparent)}
.badge.info{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.badge.accent{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.badge.neutral{background:var(--panel-2);color:var(--ink-2);border-color:var(--line)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--line);border-radius:99px;font-size:12px;color:var(--ink-2);background:var(--panel);cursor:default}
.chip.click{cursor:pointer}
.chip.click:hover{border-color:var(--ink-3);color:var(--ink)}
.chip.warn{border-color:color-mix(in srgb,var(--critical) 35%,transparent);background:var(--critical-soft);color:var(--critical)}
.dot{width:7px;height:7px;border-radius:99px;background:currentColor;flex:none}

/* ---------- segmented control / tabs ---------- */
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px;gap:2px}
.seg button{font-family:var(--font-ui);font-size:12.5px;font-weight:500;padding:6px 12px;border:none;background:transparent;color:var(--ink-2);border-radius:2px;cursor:pointer;transition:all .14s;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-sm)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{font-family:var(--font-ui);font-size:13px;font-weight:500;padding:9px 14px;border:none;background:transparent;color:var(--ink-2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- cards / KPI ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden}
.card .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px var(--pad);border-bottom:1px solid var(--line-2)}
.card .bd{padding:var(--pad)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow-sm)}
.kpi .v{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:6px}
.kpi .s{font-size:12px;color:var(--ink-3);margin-top:3px}
.spark{display:flex;align-items:flex-end;gap:2px;height:26px;margin-top:8px}
.spark i{flex:1;background:var(--accent-soft);border-radius:1px;min-height:2px}
.spark i.hi{background:var(--accent)}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-family:var(--font-mono);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr.click{cursor:pointer}
.tbl tbody tr.click:hover{background:var(--panel-2)}
.bar{height:6px;background:var(--panel-3);border-radius:99px;overflow:hidden;min-width:64px}
.bar i{display:block;height:100%;border-radius:99px;background:var(--accent)}

/* ---------- shell ---------- */
#app{display:none;min-height:100vh}
#app.on{display:block}
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
#railovl{display:none}
.rail{background:var(--rail);color:var(--rail-fg);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px;border-bottom:1px solid var(--rail-line)}
.brandwrap{display:flex;flex-direction:column;gap:5px}
.brandlogo{height:24px;width:auto;max-width:176px;display:block}
.brand .logo{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#c98a1e,#8a5a0b);display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.brand .t{color:var(--rail-fg-strong);font-weight:700;font-size:14.5px;letter-spacing:.02em;line-height:1.2}
.brand .s{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--rail-fg)}
.railsec{padding:14px 10px 4px}
.railsec .eyebrow{color:#6b6353;padding:0 8px;margin-bottom:6px}
[data-theme="dark"] .railsec .eyebrow{color:#5c6270}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;background:transparent;color:var(--rail-fg);font-size:13px;font-weight:500;border-radius:var(--r-sm);cursor:pointer;text-align:left;transition:all .13s;margin-bottom:1px}
.nav-item:hover{color:var(--rail-fg-strong);background:var(--rail-2)}
.nav-item.on{color:var(--rail-fg-strong);background:var(--rail-2);box-shadow:inset 2px 0 0 var(--accent)}
.nav-item .badge{margin-left:auto}
.railfoot{margin-top:auto;padding:12px 16px;border-top:1px solid var(--rail-line);font-family:var(--font-mono);font-size:10px;color:#6b6353;line-height:1.6}
[data-theme="dark"] .railfoot{color:#5c6270}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:10px var(--pad)}
.topbar .ctx{display:flex;flex-direction:column;min-width:0}
.topbar .ctx .t{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .ctx .s{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.iconbtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--panel);border-radius:var(--r-sm);cursor:pointer;color:var(--ink-2);position:relative;transition:all .14s}
.iconbtn:hover{color:var(--ink);border-color:var(--ink-3)}
.iconbtn .ping{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:99px;background:var(--critical);border:2px solid var(--panel)}
.userchip{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 6px;border:1px solid var(--line);border-radius:99px;background:var(--panel);cursor:pointer;transition:all .14s}
.userchip:hover{border-color:var(--ink-3)}
.avatar{width:26px;height:26px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;font-family:var(--font-mono);background:var(--accent-soft);color:var(--accent);flex:none;border:1px solid var(--accent-line)}
.userchip .n{font-size:12.5px;font-weight:600;line-height:1.1}
.userchip .r{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}

.content{padding:var(--pad);max-width:var(--maxw);width:100%;margin:0 auto;flex:1}
.pagehead{margin-bottom:16px}
.pagehead h1{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-top:2px}
.pagehead .sub{font-size:13px;color:var(--ink-2);margin-top:3px;max-width:70ch}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* ---------- dropdown / menu ---------- */
.menu{position:absolute;z-index:80;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);min-width:270px;overflow:hidden;animation:pop .13s ease}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.menu .mhd{padding:10px 14px;border-bottom:1px solid var(--line-2)}
.menu .mitem{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;border:none;background:transparent;text-align:left;cursor:pointer;font-size:13px}
.menu .mitem:hover{background:var(--panel-2)}
.menu .mitem .sc{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);letter-spacing:.04em}
.menu .mfoot{border-top:1px solid var(--line-2);display:flex;justify-content:space-between;padding:8px 10px;gap:8px}

/* ---------- forms ---------- */
.inp,select.inp,textarea.inp{font-family:var(--font-ui);font-size:13px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;width:100%;transition:border-color .14s}
.inp:focus{outline:none;border-color:var(--accent)}
textarea.inp{resize:vertical;min-height:64px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field>label{font-size:12px;font-weight:600;color:var(--ink-2)}
.field .err{font-size:11.5px;color:var(--critical)}
.switch{position:relative;width:34px;height:19px;background:var(--panel-3);border:1px solid var(--line);border-radius:99px;cursor:pointer;transition:all .15s;flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:99px;background:var(--ink-3);transition:all .15s}
.switch.on{background:var(--accent);border-color:var(--accent)}
.switch.on::after{left:17px;background:#fff}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.filters select.inp,.filters input.inp{width:auto;min-width:120px}
/* iOS Safari force-zooms the whole page when a focused field's font-size is < 16px.
   Bump form controls to 16px on touch devices / small screens so tapping an input
   never zooms the layout (desktop keeps the compact 13px). */
@media (pointer:coarse){.inp,select.inp,textarea.inp{font-size:16px}}
@media (max-width:920px){.inp,select.inp,textarea.inp{font-size:16px}}

/* ---------- D-25: numeric / group answer + sub-question builder ---------- */
.numgroup{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.numrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.numrow>label{font-size:13px;color:var(--ink-2);flex:1;min-width:130px}
.numrow.sumrow{border-top:1px dashed var(--line);margin-top:2px;padding-top:9px}
.numrow.sumrow>label{color:var(--ink)}
.numinput{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 10px;background:var(--panel);min-width:150px}
.numinput.ro{background:var(--panel-2);border-style:dashed}
.numinput .unit{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.numinput input{border:none;text-align:right;padding:8px 0;width:118px;background:transparent;font-family:var(--font-mono);font-size:13px;color:var(--ink)}
.numinput input:focus{outline:none}
.numinput input:disabled{color:var(--ink-3)}
.numinput b{font-family:var(--font-mono);font-size:13px;text-align:right;min-width:100px}
.subedit .sube{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.subedit .sube:last-child{border-bottom:none}
.subedit .kidbox{margin-left:16px;border-left:2px solid var(--line);padding-left:10px}
.reftog{display:inline-flex;padding:3px 8px;border:1px solid var(--line);border-radius:99px;font-size:11px;cursor:pointer;color:var(--ink-3)}
.reftog.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}

/* ---------- login ---------- */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:
  radial-gradient(1000px 500px at 85% -10%,var(--accent-soft),transparent),var(--bg)}
.loginbox{width:100%;max-width:840px;display:grid;grid-template-columns:1.05fr 1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--panel)}
.loginhero{background:var(--rail);color:var(--rail-fg);padding:34px 30px;display:flex;flex-direction:column;gap:14px}
.loginhero .t{color:#fff;font-size:21px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.loginhero ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:12.5px}
.loginhero li{display:flex;gap:9px;align-items:flex-start}
.loginhero li svg{margin-top:2px;color:var(--accent)}
[data-theme="dark"] .loginhero li svg{color:var(--accent)}
.loginform{padding:34px 30px}

/* ---------- checklist ---------- */
.segcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.segcard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px;transition:all .14s}
.segcard.aktif{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-sm)}
.segcard.terkunci,.segcard.terlewat{opacity:.85}
.segcard h3{font-size:15.5px;font-weight:700}
.segcard .win{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.geo{display:flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);font-size:12.5px;margin-bottom:14px}
.catblock{margin-bottom:14px}
.cathd{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r) var(--r) 0 0}
.cathd .ic{color:var(--accent)}
.cathd .t{font-weight:600;font-size:13px;flex:1}
.cathd .p{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3)}
.catbd{border:1px solid var(--line);border-top:none;border-radius:0 0 var(--r) var(--r);background:var(--panel)}
.item{padding:13px 14px;border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:9px}
.item:last-child{border-bottom:none}
.item.err-hl{background:var(--critical-soft);animation:flash 1.2s ease}
@keyframes flash{0%{background:color-mix(in srgb,var(--critical) 22%,transparent)}100%{background:var(--critical-soft)}}
.item .q{font-size:13px;line-height:1.5;display:flex;gap:9px}
.item .q .no{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);flex:none;padding-top:1px;min-width:20px}
.item.ovr{background:var(--panel-2);opacity:.72}
.item.greyed{background:var(--panel-2);opacity:.6}
.item .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-left:29px}
.ansrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-left:29px}
.ans{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);font-size:12.5px;font-weight:500;cursor:pointer;transition:all .12s;user-select:none}
.ans:hover{border-color:var(--ink-3)}
.ans.on-ya{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.ans.on-tidak{background:var(--critical-soft);border-color:var(--critical);color:var(--critical)}
.ans.on-na{background:var(--panel-3);border-color:var(--ink-3);color:var(--ink-2)}
.opt{display:flex;align-items:flex-start;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:12.5px;cursor:pointer;transition:all .12s}
.opt:hover{border-color:var(--ink-3)}
.opt.on{background:var(--good-soft);border-color:var(--good)}
.opt .box{width:15px;height:15px;border:1.5px solid var(--ink-3);border-radius:3px;flex:none;margin-top:1px;display:flex;align-items:center;justify-content:center;color:#fff}
.opt.on .box{background:var(--good);border-color:var(--good)}
.evi{padding-left:29px;display:flex;flex-direction:column;gap:8px}
.phrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.phthumb{position:relative;width:64px;height:64px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);cursor:pointer;flex:none;background:var(--panel-2)}
.phthumb img,.phthumb svg{width:100%;height:100%;display:block;object-fit:cover}
.phthumb .del{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:99px;background:rgba(0,0,0,.55);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1}
.phadd{width:64px;height:64px;border:1.5px dashed var(--line);border-radius:var(--r-sm);background:var(--panel-2);color:var(--ink-3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;font-size:9.5px;font-family:var(--font-mono);transition:all .13s}
.phadd:hover{border-color:var(--accent);color:var(--accent)}

#footslot{position:sticky;bottom:0;z-index:30}
.stickyfoot{background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px var(--pad);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stickyfoot .prog{flex:1;min-width:180px}
.stickyfoot .prog .t{font-size:12px;color:var(--ink-2);margin-bottom:4px;display:flex;justify-content:space-between}

/* ---------- modal / drawer / toast ---------- */
.ovl{position:fixed;inset:0;background:rgba(15,12,6,.5);z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .15s ease}
[data-theme="dark"] .ovl{background:rgba(0,0,0,.62)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);width:100%;max-width:560px;max-height:88vh;overflow-y:auto;animation:pop .16s ease}
.modal.lg{max-width:860px}
.modal .mh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-2);position:sticky;top:0;background:var(--panel);z-index:2}
.modal .mb{padding:18px}
.modal .mf{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line-2);position:sticky;bottom:0;background:var(--panel)}
/* Circular icon badge for alert/confirm modals (never show a bare error code). */
.errmark{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--critical) 12%,transparent);color:var(--critical)}
.errmark svg{width:28px;height:28px}
.errmark.pin{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,92vw);background:var(--panel);border-left:1px solid var(--line);box-shadow:var(--shadow-lg);z-index:95;display:flex;flex-direction:column;animation:slide .18s ease}
@keyframes slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.drawer .dh{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.drawer .db{flex:1;overflow-y:auto;padding:14px 16px}
#toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:9px;background:var(--rail);color:#fff;font-size:13px;padding:10px 16px;border-radius:var(--r);box-shadow:var(--shadow-lg);animation:pop .18s ease;max-width:90vw}
.toast .ic{color:var(--accent)}
[data-theme="dark"] .toast{background:var(--panel-3);border:1px solid var(--line)}
.tip{position:fixed;z-index:200;display:none;background:var(--rail);color:#fff;font-size:11.5px;line-height:1.4;font-weight:500;padding:5px 9px;border-radius:var(--r-sm);box-shadow:var(--shadow-lg);pointer-events:none;max-width:280px;white-space:normal}
[data-theme="dark"] .tip{background:var(--panel-3);border:1px solid var(--line)}

/* ---------- misc ---------- */
.alertstrip{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.alertline{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:var(--r);font-size:12.5px;border:1px solid}
.alertline.critical{background:var(--critical-soft);border-color:color-mix(in srgb,var(--critical) 25%,transparent);color:var(--critical)}
.alertline.risk{background:var(--risk-soft);border-color:color-mix(in srgb,var(--risk) 25%,transparent);color:var(--risk)}
.alertline.watch{background:var(--watch-soft);border-color:color-mix(in srgb,var(--watch) 28%,transparent);color:var(--watch)}
.empty{padding:34px 20px;text-align:center;color:var(--ink-3);font-size:13px}
.empty svg{width:26px;height:26px;margin-bottom:8px;opacity:.6}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:13px}
.kv dt{color:var(--ink-3);font-size:12px}
.kv dd{font-weight:500}
.phview{max-width:640px}
.phview .big{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin-bottom:12px;background:var(--panel-2)}
.phview .big img{width:100%;height:auto;display:block}
.subitem{padding:11px 0;border-bottom:1px solid var(--line-2)}
.subitem:last-child{border-bottom:none}
/* ---------- qcard: paper card per submission-detail question (read-only) ---------- */
.qcard{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.qcard:last-child{margin-bottom:0}
/* Multi-criteria question text → a readable bulleted list (not a run-on blob). */
.qlead{font-weight:600;color:var(--ink)}
.qbul{list-style:disc;margin:6px 0 0;padding-left:20px}
.qbul li{margin:3px 0;color:var(--ink-2);line-height:1.45}
.qbul li::marker{color:var(--accent)}
/* ---------- pager: reusable client-side pagination control ---------- */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:14px 0 2px}
.pager .btn{gap:5px}
.pager .pgnfo{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em;padding:0 4px;white-space:nowrap}
/* ---------- view-switch transition ---------- */
@keyframes viewfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.viewfade{animation:viewfade .22s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.viewfade{animation:none}}
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink-3) 42%,transparent);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- dashboard lite (mobile, C6.10 v1.4) ---------- */
.kpis.lite{grid-template-columns:1fr 1fr;gap:8px}
.kpis.lite .kpi{padding:10px 12px}
.kpis.lite .kpi .v{font-size:19px;margin-top:4px}
.kpis.lite .kpi .s{font-size:10.5px}
.kpis.lite .spark{display:none}
.srow{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--line-2);cursor:pointer}
.srow:last-child{border-bottom:none}
.srow:active{background:var(--panel-2)}
.srow .nm{flex:1;min-width:0}
.srow .nm b{font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .nm span{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-3)}
.segmini{display:inline-flex;gap:7px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.04em}

/* ---------- camera viewfinder ---------- */
.viewfinder{position:fixed;inset:0;background:#000;z-index:300}
.viewfinder video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.viewfinder .vf-controls{position:absolute;left:0;right:0;bottom:0;display:flex;gap:14px;justify-content:center;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,0));z-index:2}
.viewfinder .vf-controls .btn{font-size:15px;padding:12px 24px;min-width:120px;justify-content:center}

/* ---------- responsive ---------- */
#hamb{display:none}
@media (max-width:920px){
  .shell{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:100;transform:translateX(-100%);transition:transform .2s ease;height:100vh}
  .rail.open{transform:none;box-shadow:var(--shadow-lg)}
  #railovl.on{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99}
  #hamb{display:inline-flex}
  .grid2,.grid3{grid-template-columns:1fr}
  .loginbox{grid-template-columns:1fr}
  .loginhero{display:none}
  .userchip .meta-txt{display:none}
  .kv{grid-template-columns:120px 1fr}
  .content{padding:14px}
  .pagehead h1{font-size:17px}
  /* geo bar: susun vertikal, toggle simulasi selebar layar */
  .geo{flex-direction:column;align-items:stretch;gap:8px}
  .geo .seg{display:flex}
  .geo .seg button{flex:1}
  /* wizard footer: progress di baris atas, tombol Kembali/Lanjut di bawahnya */
  .stickyfoot{padding:10px 12px;gap:8px;justify-content:space-between}
  .stickyfoot .prog{flex-basis:100%;order:-1;min-width:0}
  .stickyfoot .btn{flex:1;justify-content:center}
  .stickyfoot .chip{flex-basis:100%;justify-content:center}
  /* modal & kartu wizard rapat ke tepi, tombol jawaban penuh-lebar (Part G) */
  .ovl{padding:10px}
  .modal .mb{padding:14px}
  .ansrow .ans{flex:1;justify-content:center}
  .phthumb,.phadd{width:76px !important;height:76px !important}
  .tabs{margin-left:-14px;margin-right:-14px;padding:0 14px}
  /* multi-button seg controls (Daftar user / Wilayah DM & OM / Master SDM) scroll
     horizontally within their own box instead of overflowing the page (Part G) */
  .seg{max-width:100%;overflow-x:auto}
  .kpi .v{overflow-wrap:break-word}
}
@media (max-width:360px){
  .kpis.lite{grid-template-columns:1fr}
  .srow{padding:10px 8px}
}