/* =========================================================================
   Pardil design refresh — exemplar stylesheet (ticket 04: B1, B3, A1)
   Standalone on purpose: the original style.css + the other prototype screens
   are left untouched so the "before" survives for the scope talk (ticket 09).
   The rollout (ticket 05) promotes this file to the canonical style.css.
   Tokens: design-language-foundations.md §3.6  ·  icons: iconography-spec.md §3
   ========================================================================= */

/* Plus Jakarta Sans — self-hosted variable woff2 (foundations §3.1, SIL OFL).
   One file spans the 200–800 weight axis; swap so text is readable immediately. */
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("fonts/PlusJakartaSans.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}

:root{
  /* ---- Brand blue (Pardil's own; single-tier, white-text-safe 5.71:1) ---- */
  --primary-50:#ECF4FF;  --primary-100:#D1E5FF; --primary-200:#A2CAFF;
  --primary-300:#60A7FF; --primary-400:#3589ED; --primary-500:#1974D9;
  --primary-600:#0065C6; /* DEFAULT brand blue */
  --primary-700:#0050A1; --primary-800:#003E80; --primary-900:#002C60;
  --primary:var(--primary-600);
  --primary-ink:#FFFFFF;
  --primary-tint:var(--primary-50);
  --focus-ring:var(--primary-700);

  /* ---- Neutrals / text / surfaces ---- */
  --ink:#0F172A; --muted:#556170; --bg:#F4F7FB; --card:#FFFFFF; --line:#E2E8F0;

  /* ---- Semantic ---- */
  --success:#15803D; --success-bg:#DCFCE7; --success-ink:#FFFFFF;
  --warning:#B45309; --warning-bg:#FEF3C7; --warning-ink:#FFFFFF;
  --danger:#C81E1E;  --danger-bg:#FEE2E2;  --danger-ink:#FFFFFF;
  --info:var(--primary-600); --info-bg:var(--primary-50);

  /* ---- Typography ---- */
  --font-sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,monospace;
  --text-xs:12px; --text-sm:14px; --text-base:16px; --text-lg:18px;
  --text-xl:22px; --text-2xl:26px; --text-3xl:32px; --text-4xl:40px;
  --lh-xs:16px; --lh-sm:20px; --lh-base:24px; --lh-lg:26px;
  --lh-xl:28px; --lh-2xl:32px; --lh-3xl:38px; --lh-4xl:46px;
  --fw-body:400; --fw-medium:600; --fw-bold:700; --fw-hero:800;

  /* ---- Spacing (4px base) ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px;

  /* ---- Radius ---- */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-full:999px;

  /* ---- Elevation ---- */
  --shadow-1:0 1px 2px rgba(15,23,42,.06);
  --shadow-2:0 4px 12px rgba(15,23,42,.08);
  --shadow-3:0 12px 32px rgba(15,23,42,.12);

  /* ---- Layout ---- */
  --owner-max:460px; --tap-min:48px; --gutter:16px;

  /* ---- Motion ---- */
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:280ms;

  /* ---- Icon sizing (iconography-spec §3) ---- */
  --icon-sm:16px; --icon-md:20px; --icon-lg:24px; --icon-xl:32px; --icon-2xl:40px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:#E7EDF5; color:var(--ink);
  font-size:var(--text-base); line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
a{color:inherit;text-decoration:none}

/* Focus is non-negotiable (foundations §5) */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Inline icon helper — every Phosphor path is fill=currentColor */
.ic{width:var(--icon-md);height:var(--icon-md);flex:none;display:inline-block;vertical-align:-.18em}
.ic-sm{width:var(--icon-sm);height:var(--icon-sm)}
.ic-lg{width:var(--icon-lg);height:var(--icon-lg)}
.ic-xl{width:var(--icon-xl);height:var(--icon-xl)}

/* ---- Scaffold: centred phone column (deployment out of scope) ---- */
.backlink{display:flex;align-items:center;gap:6px;max-width:var(--owner-max);
  margin:0 auto;padding:10px 16px;color:var(--muted);font-size:var(--text-sm);font-weight:var(--fw-medium)}
.backlink:hover{color:var(--primary-600)}
.wrap{max-width:var(--owner-max);margin:0 auto;min-height:100vh;
  background:var(--bg);display:flex;flex-direction:column;
  box-shadow:0 0 60px rgba(15,23,42,.10)}
.screen{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}
.sbody{flex:1;overflow:auto;padding:var(--space-4) var(--space-4) var(--space-8);
  display:flex;flex-direction:column;gap:var(--space-4)}

/* ---- App bar ---- */
.appbar{display:flex;align-items:center;gap:var(--space-3);
  padding:14px var(--space-4);position:sticky;top:0;z-index:20}
.appbar.util{background:var(--card);border-bottom:1px solid var(--line)}
.appbar.util .title{color:var(--ink)}
.appbar.brand{background:var(--primary-600);color:#fff}
.appbar .title{font-size:var(--text-lg);font-weight:var(--fw-bold);line-height:1.1}
.appbar .logo{width:30px;height:30px;border-radius:var(--radius-sm);
  background:var(--primary-600);color:#fff;display:grid;place-items:center;
  font-weight:var(--fw-hero);font-size:16px;flex:none}
.appbar.brand .back{color:#fff}
.appbar .back{display:grid;place-items:center;width:40px;height:40px;margin:-8px 0 -8px -8px;
  border-radius:var(--radius-full);color:var(--ink)}
.appbar .back:hover{background:rgba(15,23,42,.06)}
.appbar.brand .back:hover{background:rgba(255,255,255,.16)}
.appbar .spacer{margin-left:auto}
.appbar .switch{display:inline-flex;align-items:center;gap:4px;
  background:var(--primary-50);color:var(--primary-700);
  font-size:var(--text-sm);font-weight:var(--fw-medium);
  padding:6px 10px;border-radius:var(--radius-full);min-height:36px}
.appbar .switch:hover{background:var(--primary-100)}
.appbar .iconbtn{display:grid;place-items:center;width:40px;height:40px;
  border-radius:var(--radius-full);color:var(--muted)}
.appbar .iconbtn:hover{background:var(--bg);color:var(--ink)}

/* ---- Progress stepper (3 steps) ---- */
.progress{display:flex;gap:6px;padding:14px var(--space-4) 4px}
.progress .bar{flex:1;height:6px;border-radius:var(--radius-full);background:var(--line)}
.progress .bar.on{background:var(--primary-600)}
.step-label{color:var(--muted);font-size:var(--text-sm);font-weight:var(--fw-medium)}

/* ---- Section heading ---- */
.h-screen{font-size:var(--text-2xl);font-weight:var(--fw-bold);line-height:var(--lh-2xl)}
.lead{color:var(--muted);font-size:var(--text-base);line-height:var(--lh-base)}

/* ---- Cards ---- */
.card{background:var(--card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);padding:var(--space-4)}
.card .ttl{font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--muted);
  display:flex;align-items:center;gap:6px}

/* ---- Home header band (Flip pattern: coloured band, balance floats over it) ---- */
/* header lives inside the scroll flow (Flip pattern) and bleeds to the wrap edges */
.home-head{background:linear-gradient(155deg,var(--primary-500),var(--primary-700));
  color:#fff;margin:0 calc(-1 * var(--space-4));padding:18px var(--space-4) 64px}
.hh-top{display:flex;align-items:flex-start;gap:var(--space-3)}
.hh-greet{font-size:var(--text-xl);line-height:var(--lh-xl);font-weight:var(--fw-bold)}
.hh-loc{display:inline-flex;align-items:center;gap:4px;margin-top:8px;
  background:rgba(255,255,255,.16);color:#fff;padding:6px 12px;border-radius:var(--radius-full);
  font-size:var(--text-sm);font-weight:var(--fw-medium)}
.hh-loc:hover{background:rgba(255,255,255,.26)}
.hh-bell{margin-left:auto;display:grid;place-items:center;width:42px;height:42px;flex:none;
  background:rgba(255,255,255,.16);border-radius:var(--radius-full);color:#fff;position:relative}
.hh-bell:hover{background:rgba(255,255,255,.26)}
.hh-bell::after{content:"";position:absolute;top:9px;right:10px;width:9px;height:9px;
  border-radius:50%;background:var(--warning);border:2px solid var(--primary-600)}

.screen.home .sbody{padding-top:0}
.screen.home .balance{margin-top:-56px}

/* Balance card — white, floats over the coloured header (Flip pattern) */
.balance{background:var(--card);border-radius:var(--radius-xl);box-shadow:var(--shadow-2);
  padding:var(--space-5);position:relative;z-index:1}
.balance .ttl{color:var(--muted)}
.balance .big{font-size:var(--text-3xl);line-height:var(--lh-3xl);font-weight:var(--fw-hero);
  color:var(--ink);margin:var(--space-1) 0 var(--space-3);font-feature-settings:'tnum' 1}
.balance .note{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--text-sm);
  padding-top:var(--space-3);border-top:1px dashed var(--line);margin-bottom:var(--space-4)}
.balance .note .ic{color:var(--primary-600)}

/* ---- Quick actions — tinted round chips, Pardil's real actions only ---- */
.qa{display:flex;gap:var(--space-2);background:var(--card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);padding:var(--space-4) var(--space-2)}
.qa-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  min-height:var(--tap-min);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--ink)}
.qa-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-full);
  background:var(--primary-50);color:var(--primary-600)}
.qa-ic svg{width:24px;height:24px}
.qa-item:hover .qa-ic{background:var(--primary-100)}
/* WhatsApp help — brand green + white glyph (trademark: never Pardil blue) */
.qa-ic.wa{background:#25D366;color:#fff}
.qa-item:hover .qa-ic.wa{background:#1FB959}

/* ---- Stat tiles ---- */
.row2{display:flex;gap:var(--space-3)}.row2>*{flex:1;min-width:0}
.stat .num{font-size:var(--text-2xl);line-height:var(--lh-2xl);font-weight:var(--fw-bold);
  margin-top:var(--space-1);font-feature-settings:'tnum' 1}
.stat .sub{color:var(--muted);font-size:var(--text-sm)}

/* ---- Buttons (all states — foundations §2 model) ---- */
.btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  width:100%;min-height:var(--tap-min);padding:0 var(--space-4);
  border:none;border-radius:var(--radius-md);cursor:pointer;
  font-family:inherit;font-size:var(--text-base);font-weight:var(--fw-bold);
  transition:background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.btn.primary{background:var(--primary-600);color:var(--primary-ink);box-shadow:var(--shadow-2)}
.btn.primary:hover{background:var(--primary-700)}
.btn.primary:active{background:var(--primary-800);box-shadow:var(--shadow-1)}
.btn.primary[aria-disabled="true"],.btn.primary.is-disabled{
  background:var(--line);color:var(--muted);box-shadow:none;cursor:not-allowed;pointer-events:none}
.btn.outline{background:var(--card);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow-1)}
.btn.outline:hover{border-color:var(--primary-600);background:var(--primary-50)}
.btn.outline:active{background:var(--primary-100)}
.btn.ghost{background:transparent;color:var(--muted);box-shadow:none;min-height:44px}
.btn.ghost:hover{background:var(--bg);color:var(--ink)}
.btn.ghost.act{color:var(--primary-600)}
.btn.ghost.act:hover{background:var(--primary-50)}

/* ---- Forms ---- */
.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--ink)}
.input{width:100%;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:13px var(--space-3);
  font-family:inherit;font-size:var(--text-base);color:var(--ink);min-height:var(--tap-min)}
.input::placeholder{color:var(--muted)}
.input:focus{outline:none;border-color:var(--primary-600);
  box-shadow:0 0 0 3px rgba(0,101,198,.18)}
.input[readonly]{background:var(--bg);cursor:default}
.help{font-size:var(--text-sm);color:var(--muted);line-height:var(--lh-sm)}

/* Read-only value row w/ leading icon (rekening) */
.field-value{display:flex;align-items:center;gap:var(--space-3);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:13px var(--space-3);min-height:var(--tap-min)}
.field-value .ic{color:var(--muted)}
.field-value .v{font-weight:var(--fw-medium)}
.link{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  color:var(--primary-600);font-size:var(--text-sm);font-weight:var(--fw-medium);
  min-height:44px}
.link:hover{color:var(--primary-700);text-decoration:underline}

/* ---- Key-value summary ---- */
.summary{background:var(--card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);padding:var(--space-2) var(--space-4)}
.kv{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
  padding:var(--space-3) 0;border-bottom:1px dashed var(--line);font-size:var(--text-base)}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.kv .v{font-weight:var(--fw-bold);font-feature-settings:'tnum' 1}
.kv .v.free{color:var(--success)}

/* ---- Transaction rows ---- */
.txn-list .row-ttl{font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--muted);
  margin-bottom:var(--space-1)}
.txn{display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.txn:last-of-type{border-bottom:none}
.txn-ic{display:grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:var(--radius-full);background:var(--primary-50);color:var(--primary-600)}
.txn-ic svg{width:20px;height:20px}
.txn-main{flex:1;min-width:0}
.txn .amt{font-weight:var(--fw-bold);font-size:var(--text-base);font-feature-settings:'tnum' 1}
.txn .meta{color:var(--muted);font-size:var(--text-sm);margin-top:2px}
.seeall{display:flex;align-items:center;justify-content:center;gap:4px;
  color:var(--primary-600);font-weight:var(--fw-bold);font-size:var(--text-sm);
  padding:var(--space-3);min-height:44px}
.seeall:hover{color:var(--primary-700)}

/* ---- Status badge (colour + icon + label; never colour-only, foundations §5) ---- */
.badge{display:inline-flex;align-items:center;gap:4px;flex:none;
  padding:4px 10px;border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:var(--fw-bold);line-height:1.4}
.badge .ic{width:14px;height:14px}
.badge.ok{background:var(--success-bg);color:var(--success)}
.badge.wait{background:var(--warning-bg);color:var(--warning)}
.badge.bad{background:var(--danger-bg);color:var(--danger)}

/* ---- Bottom tab nav (de-emoji; line→fill active swap) ---- */
.tabbar{display:flex;background:var(--card);border-top:1px solid var(--line);
  position:sticky;bottom:0;padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 0 11px;min-height:var(--tap-min);
  color:var(--muted);font-size:var(--text-xs);font-weight:var(--fw-medium)}
.tabbar a.on{color:var(--primary-600);font-weight:var(--fw-bold)}
.tabbar a .ic{width:var(--icon-lg);height:var(--icon-lg)}

/* =========================================================================
   DESKTOP-ADMIN REGISTER  (ticket 06: E1–E5)
   Same tokens, blue and font as the Owner register above — only density and
   layout change, and only under `.admin`, so no Owner rule is touched.
   Benchmark: a Gojek-family merchant dashboard (GoBiz). foundations §8,
   component-system-spec §3.15. The rollout (05) folds this into style.css.
   ========================================================================= */

/* Density scope (foundations §8 code block) — compress, don't fork tokens */
.admin{
  --radius-lg:var(--radius-sm);   /* cards tighten 16→8 */
  --space-6:var(--space-4);       /* section gaps compress 24→16 */
  --admin-max:1280px;
  --sidebar-w:240px;
  background:var(--bg);color:var(--ink);
  font-size:var(--text-sm);       /* denser base; Owner stays 16px */
}
.admin .card{background:var(--card);border-radius:var(--radius-sm);
  border:1px solid var(--line);box-shadow:none;padding:var(--space-3)}

/* ---- Shell: persistent left sidebar + main column ---- */
.admin-shell{display:flex;min-height:100vh;align-items:stretch}

/* Sidebar nav (#25) — dark brand chrome, current item aria-current=page */
.sidebar{width:var(--sidebar-w);flex:none;
  background:var(--primary-900);color:#fff;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar .brand{display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-5) var(--space-4);font-weight:var(--fw-bold);font-size:var(--text-lg)}
.sidebar .brand .logo{width:32px;height:32px;border-radius:var(--radius-sm);
  background:#fff;color:var(--primary-700);display:grid;place-items:center;
  font-weight:var(--fw-hero);font-size:18px;flex:none}
.sidebar .brand small{display:block;font-size:var(--text-xs);font-weight:var(--fw-medium);
  color:rgba(255,255,255,.6);line-height:1.2}
.sidebar nav{display:flex;flex-direction:column;gap:2px;padding:var(--space-2) var(--space-3)}
.sidebar .sect{padding:var(--space-4) var(--space-2) var(--space-1);font-size:var(--text-xs);
  font-weight:var(--fw-bold);letter-spacing:.04em;color:rgba(255,255,255,.45);text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:var(--space-3);
  padding:10px var(--space-3);border-radius:var(--radius-sm);min-height:44px;
  color:rgba(255,255,255,.78);font-weight:var(--fw-medium)}
.nav-item .ic{width:var(--icon-md);height:var(--icon-md);flex:none}
.nav-item .count{margin-left:auto;background:rgba(255,255,255,.16);color:#fff;
  min-width:22px;height:20px;padding:0 6px;border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:var(--fw-bold);display:grid;place-items:center}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item[aria-current="page"]{background:var(--primary-600);color:#fff;font-weight:var(--fw-bold)}
.nav-item[aria-current="page"] .count{background:rgba(255,255,255,.24)}
.sidebar .foot{margin-top:auto;padding:var(--space-3);border-top:1px solid rgba(255,255,255,.12)}

.admin-main{flex:1;min-width:0;display:flex;flex-direction:column}

/* Desktop top bar (#26) — white, flat mark + title left, identity + Keluar right */
.dtop{display:flex;align-items:center;gap:var(--space-3);
  background:var(--card);border-bottom:1px solid var(--line);
  padding:var(--space-3) var(--space-6);position:sticky;top:0;z-index:10;min-height:60px}
.dtop .h{font-size:var(--text-lg);font-weight:var(--fw-bold);color:var(--ink)}
.dtop .crumb{color:var(--muted);font-weight:var(--fw-medium)}
.dtop .who{margin-left:auto;display:flex;align-items:center;gap:var(--space-4);color:var(--muted)}
.dtop .who .id{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--fw-medium);color:var(--ink)}
.dtop .who .avatar{width:30px;height:30px;border-radius:var(--radius-full);
  background:var(--primary-50);color:var(--primary-600);display:grid;place-items:center;font-weight:var(--fw-bold)}
.dtop .logout{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:var(--fw-medium);min-height:40px}
.dtop .logout:hover{color:var(--danger)}

.admin-content{flex:1;overflow:auto;padding:var(--space-6);width:100%;
  max-width:var(--admin-max);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-5)}
.admin-content.narrow{max-width:960px}

/* Page head inside content */
.page-head{display:flex;align-items:flex-end;gap:var(--space-3);flex-wrap:wrap}
.page-head h1{font-size:var(--text-xl);font-weight:var(--fw-bold);line-height:1.15}
.page-head .sub{color:var(--muted)}
.page-head .right{margin-left:auto;display:flex;align-items:center;gap:var(--space-3)}

/* ---- Queue tabs (#13-pattern, E2) — underline active + count badge ---- */
.qtabs{display:flex;gap:var(--space-2);border-bottom:1px solid var(--line)}
.qtab{display:inline-flex;align-items:center;gap:var(--space-2);
  padding:12px var(--space-3);min-height:44px;color:var(--muted);font-weight:var(--fw-medium);
  border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;background:none;
  font-family:inherit;font-size:var(--text-sm)}
.qtab:hover{color:var(--ink)}
.qtab .count{background:var(--bg);color:var(--muted);min-width:22px;height:20px;padding:0 6px;
  border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--fw-bold);
  display:grid;place-items:center}
.qtab[aria-selected="true"]{color:var(--primary-600);font-weight:var(--fw-bold);border-bottom-color:var(--primary-600)}
.qtab[aria-selected="true"] .count{background:var(--primary-50);color:var(--primary-700)}
.tabpanel[hidden]{display:none}

/* Table toolbar (search / filter / toggle) */
.tbar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.searchbox{display:flex;align-items:center;gap:var(--space-2);background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 var(--space-3);min-height:40px;max-width:320px;flex:1}
.searchbox .ic{color:var(--muted)}
.searchbox input{border:none;outline:none;background:none;font-family:inherit;font-size:var(--text-sm);
  color:var(--ink);width:100%;padding:9px 0}
.tbar .spacer{margin-left:auto}

/* Hide-inactive toggle (#11) */
.toggle{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--muted);
  font-weight:var(--fw-medium);cursor:pointer;min-height:40px;white-space:nowrap}
.toggle .track{width:40px;height:24px;border-radius:var(--radius-full);background:var(--line);
  position:relative;transition:background var(--dur-base) var(--ease);flex:none}
.toggle .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:var(--shadow-1);transition:transform var(--dur-base) var(--ease)}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle input:checked + .track{background:var(--primary-600)}
.toggle input:checked + .track::after{transform:translateX(16px)}
.toggle input:focus-visible + .track{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---- Data table (#33) — sticky header, hairlines, hover row, sentence-case th ---- */
.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm)}
.dtable{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:640px}
.dtable th{position:sticky;top:0;background:var(--bg);z-index:1;
  text-align:left;font-weight:var(--fw-bold);color:var(--muted);
  padding:var(--space-3);border-bottom:1px solid var(--line);white-space:nowrap}
.dtable td{padding:var(--space-3);border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink)}
.dtable tbody tr:last-child td{border-bottom:none}
.dtable tbody tr:hover{background:var(--primary-50)}
.dtable tbody tr:focus-within{outline:2px solid var(--focus-ring);outline-offset:-2px}
.dtable .strong{font-weight:var(--fw-bold)}
.dtable .dim{color:var(--muted)}
.dtable .code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted)}
.dtable .num{font-feature-settings:'tnum' 1;text-align:right}
.rowlink{display:inline-flex;align-items:center;gap:4px;color:var(--primary-600);
  font-weight:var(--fw-bold);min-height:40px}
.rowlink:hover{color:var(--primary-700);text-decoration:underline}

/* Per-tab empty state (§4) */
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  text-align:center;padding:var(--space-12) var(--space-6);color:var(--muted)}
.empty .disc{width:64px;height:64px;border-radius:var(--radius-full);background:var(--primary-50);
  color:var(--primary-300);display:grid;place-items:center;margin-bottom:var(--space-2)}
.empty .disc .ic{width:32px;height:32px}
.empty b{color:var(--ink);font-size:var(--text-base)}

/* ---- Admin detail layout (E3/E4/E5) — two halves ---- */
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5);align-items:start}
@media (max-width:900px){.detail-grid{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.panel > h2{font-size:var(--text-base);font-weight:var(--fw-bold);color:var(--ink);
  display:flex;align-items:center;gap:var(--space-2)}
.panel > h2 .ic{color:var(--primary-600)}
.kva{display:flex;flex-direction:column;gap:2px}
.kva .k{font-size:var(--text-xs);font-weight:var(--fw-bold);color:var(--muted);text-transform:none}
.kva .v{font-size:var(--text-sm);color:var(--ink);font-weight:var(--fw-medium)}
.kva .v.mono{font-family:var(--font-mono);font-size:var(--text-xs)}

/* Evidence media placeholders — displayed, not adjudicated */
.media{border:1px dashed var(--line);border-radius:var(--radius-sm);background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);
  color:var(--muted);text-align:center;padding:var(--space-6);min-height:150px}
.media .ic{width:32px;height:32px;color:var(--primary-300)}
.media.wide{min-height:120px}
.zoom{color:var(--primary-600);font-weight:var(--fw-medium)}
/* Signature evidence — the signed text scrolls above a ruled pad */
.sig-doc{max-height:120px;overflow:auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:var(--space-3);font-size:var(--text-xs);color:var(--muted);line-height:1.6}
.sig-pad{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;
  min-height:90px;display:grid;place-items:center;color:var(--ink);position:relative}
.sig-pad .name{font-family:"Segoe Script","Comic Sans MS",cursive;font-size:26px;
  transform:rotate(-4deg);color:var(--primary-800)}
.sig-pad::after{content:"";position:absolute;left:16px;right:16px;bottom:26px;border-bottom:1px solid var(--line)}

/* Tenant Name — the approved string, shown as it lands in the bank app */
.tenant{font-family:var(--font-mono);font-size:var(--text-sm);background:var(--primary-50);
  color:var(--primary-800);border:1px solid var(--primary-100);border-radius:var(--radius-sm);
  padding:var(--space-3);font-weight:var(--fw-bold);letter-spacing:.01em}

/* ---- Multi-stage flow (#12, E4) — vertical, progressive disclosure ---- */
.stages{display:flex;flex-direction:column;gap:var(--space-3)}
.stage{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);
  padding:var(--space-4);display:flex;gap:var(--space-3);align-items:flex-start}
.stage .marker{width:30px;height:30px;flex:none;border-radius:var(--radius-full);
  display:grid;place-items:center;font-weight:var(--fw-bold);font-size:var(--text-sm);
  background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.stage .marker .ic{width:18px;height:18px}
.stage .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-3)}
.stage .body .st-h{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--fw-bold);color:var(--ink)}
.stage .body .st-h .after{margin-left:auto}
.stage .hint{color:var(--muted);font-size:var(--text-sm)}
.stage .btn-row{display:flex;gap:var(--space-2);flex-wrap:wrap}
/* done */
.stage.done{border-color:var(--success)}
.stage.done .marker{background:var(--success-bg);color:var(--success);border-color:transparent}
/* active */
.stage.active{border-color:var(--primary-600);box-shadow:0 0 0 3px var(--primary-50)}
.stage.active .marker{background:var(--primary-600);color:#fff;border-color:transparent}
/* locked */
.stage.locked{opacity:.55}
.stage.locked .marker{background:var(--bg)}
.stage.locked .st-h,.stage.locked .hint{color:var(--muted)}

/* Inline field row (stage inputs) */
.inline-field{display:flex;gap:var(--space-2);align-items:stretch;flex-wrap:wrap}
.inline-field .input{flex:1;min-width:200px}

/* Async verify note */
.verified-note{display:inline-flex;align-items:center;gap:6px;color:var(--success);font-weight:var(--fw-medium)}
.verified-note .ic{color:var(--success)}

/* ---- Buttons: admin sizing + destructive ---- */
.admin .btn{width:auto;min-height:44px;padding:0 var(--space-5);font-size:var(--text-sm)}
.btn.danger{background:var(--danger);color:var(--danger-ink);box-shadow:var(--shadow-1)}
.btn.danger:hover{background:#a81818}
.btn.danger:active{background:#8f1414}
.btn.danger[aria-disabled="true"],.btn.danger.is-disabled{
  background:var(--line);color:var(--muted);box-shadow:none;cursor:not-allowed;pointer-events:none}
.btn.sm{min-height:38px;padding:0 var(--space-4);font-size:var(--text-sm)}
.btn-block{width:100%!important}

/* Disabled-with-reason (E5 gates) */
.gate{display:flex;flex-direction:column;gap:var(--space-2)}
.gate .reason{display:flex;align-items:flex-start;gap:var(--space-2);color:var(--muted);
  font-size:var(--text-sm);background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:var(--space-3)}
.gate .reason .ic{color:var(--warning);flex:none;margin-top:1px}
.gate .reason.met{color:var(--success)}
.gate .reason.met .ic{color:var(--success)}

/* ---- Badges: admin adds info(blue)/neutral(grey) beside ok/wait/bad ---- */
.badge.info{background:var(--primary-50);color:var(--primary-700)}
.badge.neutral{background:#EEF1F5;color:var(--muted)}

/* ---- Radio group (#7, E3 reject reasons) ---- */
.radiogroup{display:flex;flex-direction:column;gap:var(--space-2)}
.radio{display:flex;align-items:center;gap:var(--space-3);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:12px var(--space-3);min-height:48px;cursor:pointer}
.radio:hover{border-color:var(--primary-300)}
.radio .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--primary-200);flex:none;
  display:grid;place-items:center}
.radio .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--primary-600);transform:scale(0)}
.radio input{position:absolute;opacity:0}
.radio input:checked ~ .dot{border-color:var(--primary-600)}
.radio input:checked ~ .dot::after{transform:scale(1)}
.radio input:checked ~ span{font-weight:var(--fw-medium)}
.radio:has(input:checked){border-color:var(--primary-600);background:var(--primary-50)}
.radio input:focus-visible ~ .dot{outline:2px solid var(--focus-ring);outline-offset:2px}
.textarea{width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--space-3);font-family:inherit;font-size:var(--text-sm);color:var(--ink);min-height:88px;resize:vertical}
.textarea:focus{outline:none;border-color:var(--primary-600);box-shadow:0 0 0 3px rgba(0,101,198,.18)}

/* ---- Modal (#34 desktop) — centred, scrim; Alert Dialog for destructive ---- */
.scrim{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:var(--space-6)}
.scrim[hidden]{display:none}
.modal{background:var(--card);border-radius:var(--radius-md);box-shadow:var(--shadow-3);
  width:100%;max-width:440px;max-height:90vh;overflow:auto;
  padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);font-size:var(--text-sm)}
.modal h2{font-size:var(--text-lg);font-weight:var(--fw-bold);color:var(--ink);
  display:flex;align-items:center;gap:var(--space-2)}
.modal h2 .disc{width:36px;height:36px;border-radius:var(--radius-full);display:grid;place-items:center;flex:none}
.modal h2 .disc.warn{background:var(--danger-bg);color:var(--danger)}
.modal h2 .disc.ask{background:var(--primary-50);color:var(--primary-600)}
.modal p{color:var(--muted);line-height:var(--lh-sm)}
.modal .confirm-facts{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}
.modal .confirm-facts .kv{padding:0;border:none;font-size:var(--text-sm)}
.modal .actions{display:flex;gap:var(--space-2);justify-content:flex-end;margin-top:var(--space-1)}
.modal label.fld{display:flex;flex-direction:column;gap:6px;font-weight:var(--fw-medium);color:var(--ink)}

/* Login (E1) — centred, no sidebar */
.admin-login{min-height:100vh;display:grid;place-items:center;padding:var(--space-6);
  background:linear-gradient(155deg,var(--primary-800),var(--primary-900))}
.login-card{background:var(--card);border-radius:var(--radius-md);box-shadow:var(--shadow-3);
  width:100%;max-width:400px;padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}
.login-card .brand{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-align:center;margin-bottom:var(--space-2)}
.login-card .brand .logo{width:48px;height:48px;border-radius:var(--radius-md);background:var(--primary-600);
  color:#fff;display:grid;place-items:center;font-weight:var(--fw-hero);font-size:26px}
.login-card .brand .t{font-size:var(--text-lg);font-weight:var(--fw-bold)}
.login-card .brand .s{color:var(--muted);font-size:var(--text-sm)}
.login-card .btn{width:100%}

/* =========================================================================
   ROLLOUT ADDITIONS (ticket 05) — appended below the exemplar block.
   Everything above is untouched so B1/B3/A1 render exactly as approved.
   ========================================================================= */

/* ---- Status hero (A3/A4/A5/A7 outcome screens) ---- */
.status-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:var(--space-3);padding:var(--space-6) var(--space-2)}
.sh-ic{width:76px;height:76px;display:grid;place-items:center;border-radius:var(--radius-full)}
.sh-ic svg{width:44px;height:44px}
.sh-ic.ok{background:var(--success-bg);color:var(--success)}
.sh-ic.wait{background:var(--warning-bg);color:var(--warning)}
.sh-ic.bad{background:var(--danger-bg);color:var(--danger)}
.status-hero .h-screen{margin-top:var(--space-1)}
.status-hero .lead{max-width:34ch}
.status-hero .btn,.status-hero .summary,.status-hero .card{width:100%}
.status-hero .foot{margin-top:auto;width:100%}

/* ---- Upload dropzone (A2/A6) ---- */
.dropzone{display:flex;align-items:center;gap:var(--space-3);
  background:var(--card);border:1.5px dashed var(--line);border-radius:var(--radius-md);
  padding:var(--space-4);min-height:64px;color:var(--muted);font-size:var(--text-sm);
  font-weight:var(--fw-medium)}
.dropzone .dz-ic{display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:var(--radius-md);background:var(--primary-50);color:var(--primary-600)}
.dropzone.done{border-style:solid;border-color:var(--success);background:var(--success-bg);color:var(--success)}
.dropzone.done .dz-ic{background:#fff;color:var(--success)}
.dz-tall{flex-direction:column;justify-content:center;text-align:center;min-height:104px;gap:var(--space-2)}

/* ---- Radio option rows (A6) ---- */
.radio-opt{display:flex;align-items:center;gap:var(--space-3);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:14px var(--space-4);min-height:var(--tap-min);font-size:var(--text-base);font-weight:var(--fw-medium)}
.radio-opt .dot{width:22px;height:22px;flex:none;border-radius:var(--radius-full);
  border:2px solid var(--line);position:relative}
.radio-opt.on{border-color:var(--primary-600);background:var(--primary-50)}
.radio-opt.on .dot{border-color:var(--primary-600)}
.radio-opt.on .dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--primary-600)}

/* ---- Filter chips (B2) ---- */
.chips{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-1);-webkit-overflow-scrolling:touch}
.chip{flex:none;padding:8px 14px;border-radius:var(--radius-full);
  background:var(--card);border:1px solid var(--line);color:var(--muted);
  font-size:var(--text-sm);font-weight:var(--fw-medium);min-height:38px;display:inline-flex;align-items:center}
.chip.on{background:var(--primary-600);border-color:var(--primary-600);color:#fff}

/* ---- Toggle switch (B5/B6; on = primary-600, component-spec §5) ---- */
.toggle{width:46px;height:28px;flex:none;border-radius:var(--radius-full);
  background:var(--line);position:relative;transition:background var(--dur-base) var(--ease);cursor:pointer}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow-1);transition:transform var(--dur-base) var(--ease)}
.toggle.on{background:var(--primary-600)}
.toggle.on::after{transform:translateX(18px)}

/* ---- Person row (B5 Kang Parkir) ---- */
.person{display:flex;align-items:center;gap:var(--space-3);
  background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:var(--space-4)}
.person-av{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:var(--radius-full);
  background:var(--primary-50);color:var(--primary-600)}
.person-main{flex:1;min-width:0}
.person-nm{font-weight:var(--fw-bold)}
.person-sub{color:var(--muted);font-size:var(--text-sm);margin-top:2px}
.person-actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-1)}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);font-weight:var(--fw-bold);
  padding:3px 9px;border-radius:var(--radius-full)}
.tag.untested{background:var(--warning-bg);color:var(--warning)}
.tag.tested{background:var(--success-bg);color:var(--success)}
.chip-btn{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:5px 12px;
  border-radius:var(--radius-full);background:var(--primary-50);color:var(--primary-700);
  font-size:var(--text-sm);font-weight:var(--fw-medium)}
.chip-btn:hover{background:var(--primary-100)}
.chip-btn.wa{background:#25D366;color:#fff}
.chip-btn.wa:hover{background:#1FB959}

/* ---- Settings sections (B6) ---- */
.setting{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);
  padding:var(--space-4);display:flex;flex-direction:column;gap:6px}
.setting .k{font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--muted)}
.setting .v{font-weight:var(--fw-medium);word-break:break-word}
.setting .row{display:flex;align-items:center;gap:var(--space-4)}
.setting .row .v{flex:1}

/* ---- OTP boxes (Owner login) ---- */
.otp{display:flex;gap:var(--space-2);justify-content:space-between}
.otp .box{flex:1;aspect-ratio:1/1.15;max-width:52px;display:grid;place-items:center;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font-size:var(--text-2xl);font-weight:var(--fw-bold);font-feature-settings:'tnum' 1;color:var(--ink)}
.otp .box.filled{border-color:var(--primary-600)}
.otp .box.caret{border-color:var(--primary-600);box-shadow:0 0 0 3px rgba(0,101,198,.18)}

/* ---- Legal document body + signature pad (A9) ---- */
.legaldoc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:var(--space-4);max-height:300px;overflow:auto;
  font-size:var(--text-sm);line-height:var(--lh-base);color:var(--ink)}
.legaldoc h4{font-size:var(--text-base);font-weight:var(--fw-bold);text-align:center;margin-bottom:var(--space-2)}
.legaldoc p{margin-bottom:var(--space-3)}
.legaldoc .party{background:var(--bg);border-radius:var(--radius-sm);padding:var(--space-3);margin-bottom:var(--space-3)}
.legaldoc .party .kv{padding:var(--space-1) 0;border:none;font-size:var(--text-sm)}
.legaldoc .fine{color:var(--muted);font-size:var(--text-xs);line-height:var(--lh-sm)}
.sigpad{position:relative;height:150px;background:var(--bg);
  border:1.5px dashed var(--primary-300);border-radius:var(--radius-md);
  display:grid;place-items:center;overflow:hidden}
.sigpad .baseline{position:absolute;left:16px;right:16px;bottom:44px;border-bottom:1px solid var(--line)}
.sigpad .hint{color:var(--muted);font-size:var(--text-sm);z-index:1}
.sigpad .ink{position:absolute;left:32px;bottom:40px;color:var(--ink);z-index:2;
  font-size:34px;font-style:italic;transform:rotate(-4deg)}
.sig-row{display:flex;justify-content:flex-end}

/* ---- Digital receipt (D2) ---- */
.receipt{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);
  overflow:hidden;position:relative}
.receipt .rhead{background:var(--primary-600);color:#fff;padding:var(--space-5);text-align:center}
.receipt .rhead .brand{font-size:var(--text-2xl);font-weight:var(--fw-hero);letter-spacing:.5px}
.receipt .rhead .sub{font-size:var(--text-sm);opacity:.85;margin-top:2px}
.receipt .rbody{padding:var(--space-2) var(--space-5) var(--space-5)}
.receipt .r-row{display:flex;justify-content:space-between;gap:var(--space-4);align-items:flex-start;
  padding:var(--space-3) 0;border-bottom:1px dashed var(--line)}
.receipt .r-row:last-child{border-bottom:none}
.receipt .rk{color:var(--muted);font-size:var(--text-sm);flex:none}
.receipt .rv{font-weight:var(--fw-bold);text-align:right;font-feature-settings:'tnum' 1}
.receipt .rv.paid{color:var(--success);display:inline-flex;align-items:center;gap:5px}
.receipt .notch-l,.receipt .notch-r{position:absolute;width:20px;height:20px;border-radius:50%;
  background:#E7EDF5;top:96px}
.receipt .notch-l{left:-10px}.receipt .notch-r{right:-10px}

/* ---- Result-state cards (B4 confirmation, three outcomes) ---- */
.result{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);
  padding:var(--space-5);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  border:1px solid var(--line)}
.result .r-ic{width:60px;height:60px;display:grid;place-items:center;border-radius:var(--radius-full);margin-bottom:var(--space-1)}
.result .r-ic svg{width:34px;height:34px}
.result.ok{border-color:var(--success)}
.result.ok .r-ic{background:var(--success-bg);color:var(--success)}
.result.bad{border-color:var(--danger)}
.result.bad .r-ic{background:var(--danger-bg);color:var(--danger)}
.result .r-ttl{font-size:var(--text-lg);font-weight:var(--fw-bold)}
.result .spinner{width:46px;height:46px;border-radius:50%;border:4px solid var(--line);
  border-top-color:var(--primary-600);animation:spin .8s linear infinite;margin-bottom:var(--space-1)}
@keyframes spin{to{transform:rotate(360deg)}}
.state-label{color:var(--muted);font-size:var(--text-sm);font-weight:var(--fw-medium);
  text-align:center;text-transform:none}

/* ---- Detail sheet (B2 tap-through, rendered inline as a mock bottom sheet) ---- */
.sheet{background:var(--card);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-3);
  padding:var(--space-2) var(--space-4) var(--space-4);border-top:1px solid var(--line)}
.sheet .grip{width:40px;height:4px;border-radius:var(--radius-full);background:var(--line);margin:var(--space-2) auto var(--space-4)}
.sheet .sheet-ttl{font-size:var(--text-lg);font-weight:var(--fw-bold);margin-bottom:var(--space-2)}

/* ---- Alert banner (D1 error, B5 hint) ---- */
.alert{display:flex;gap:var(--space-3);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);
  font-size:var(--text-sm);line-height:var(--lh-sm)}
.alert .ic{flex:none;margin-top:1px}
.alert.error{background:var(--danger-bg);color:var(--danger)}
.alert.info{background:var(--primary-50);color:var(--primary-700)}

/* ---- Section divider inside a long form (A6) ---- */
.section-head{font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.4px;
  text-transform:uppercase;color:var(--muted);margin-top:var(--space-2);
  padding-top:var(--space-3);border-top:1px solid var(--line)}

/* =========================================================================
   WhatsApp mockup chrome (C-series). Deliberately NOT Pardil-skinned:
   the scope boundary keeps these WhatsApp-styled — only the wording changes.
   ========================================================================= */
.wa-screen{flex:1;display:flex;flex-direction:column;background:#EFE7DE;
  background-image:linear-gradient(rgba(229,221,213,.55),rgba(229,221,213,.55))}
.wa-bar{display:flex;align-items:center;gap:var(--space-3);background:#075E54;color:#fff;
  padding:12px var(--space-4);position:sticky;top:0;z-index:10}
.wa-bar .back{color:#fff;display:grid;place-items:center;width:32px;height:32px;margin-left:-6px}
.wa-av{width:38px;height:38px;flex:none;border-radius:50%;background:#25D366;color:#fff;
  display:grid;place-items:center;font-weight:var(--fw-hero)}
.wa-name{font-weight:var(--fw-bold);line-height:1.15}
.wa-name .st{font-size:var(--text-xs);font-weight:var(--fw-body);opacity:.85}
.wa-body{flex:1;overflow:auto;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.bub{max-width:82%;padding:8px 10px 6px;border-radius:10px;font-size:var(--text-sm);line-height:1.42;
  white-space:pre-wrap;box-shadow:0 1px .5px rgba(0,0,0,.13);position:relative}
.bub b{font-weight:var(--fw-bold)}
.bub.in{background:#fff;color:#111B21;align-self:flex-start;border-top-left-radius:2px}
.bub.out{background:#D9FDD3;color:#111B21;align-self:flex-end;border-top-right-radius:2px}
.bub .t{display:block;text-align:right;font-size:11px;color:#667781;margin-top:2px}
.bub.out .t{color:#4A7C59}
.wa-input{display:flex;align-items:center;gap:var(--space-2);padding:8px var(--space-3);background:#EFE7DE}
.wa-input .box{flex:1;background:#fff;border-radius:var(--radius-full);padding:10px var(--space-4);
  color:var(--muted);font-size:var(--text-sm);min-height:var(--tap-min);display:flex;align-items:center}
.wa-input .send{width:46px;height:46px;flex:none;border-radius:50%;background:#25D366;color:#fff;
  display:grid;place-items:center}
.wa-input .send svg{width:22px;height:22px}
.wa-note{max-width:var(--owner-max);margin:0 auto;padding:8px 16px 14px;
  color:var(--muted);font-size:var(--text-xs);line-height:var(--lh-sm)}