@import url("fonts.css");

/* ============================================================================
   Chomkar — production design system. Khmer-first (Kantumruy Pro) + Inter Latin,
   self-hosted/offline. ONE token table, one enforced type scale, mobile-first
   30rem canvas. Plain CSS, zero network.
   ========================================================================== */
:root{
  /* surfaces & ink */
  --bg:#f4f1ea; --surface:#ffffff; --surface-2:#f7f3ea;     /* warm paper base — unified with the marketing site */
  --ink:#241f1a; --ink-2:#574e44; --muted:#6d6354;          /* muted darkened for WCAG AA on white (>=4.5:1) */
  /* brand & semantic colour. RULE: green=brand + confirmed/ready ONLY; amber=pending/price-not-agreed; never green for raw counts */
  --accent:#1f7a4d; --accent-d:#176040; --accent-soft:#e7f1ea; --accent-tint:#f1f8f3;
  --confirm:#1f7a4d;                                          /* = success; "go / confirmed" state */
  --line:#e9e2d4; --line-2:#f0ebe0;
  --success:#1f7a4d; --success-soft:#e7f1ea;  /* confirmed/ready = GREEN always, independent of per-portal --accent */
  --warn:#b4661f; --warn-soft:#fbf0e2; --warn-ink:#8a4a15; /* warn-ink = AA on warn-soft/white */
  --error:#bf3b30; --error-soft:#fbe9e6;
  --locked:#6a786f; --available:#1f7a4d; --pending:#b4661f;
  /* gold — the brand "seed" accent, shared with the marketing site (use sparingly, for warmth/highlights) */
  --gold:#f6c544; --gold-d:#9a6b0e; --gold-soft:#fcefc6;
  /* 8pt spacing scale — use these instead of arbitrary px (this is what kills the cramped, busy feel) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px;
  /* radius ladder */
  --r-lg:20px; --r:16px; --r-md:13px; --r-sm:10px; --r-xs:6px; --r-pill:999px;
  /* elevation ladder: page(none) -> card -> raised -> modal */
  --sh-1:0 1px 2px rgba(38,33,27,.05),0 1px 3px rgba(38,33,27,.04);
  --sh-2:0 8px 26px rgba(38,33,27,.10);
  --sh-card:0 1px 2px rgba(38,33,27,.04),0 10px 28px rgba(38,33,27,.07);
  --sh-raised:0 14px 34px rgba(38,33,27,.12);
  --sh-emboss:0 8px 20px rgba(38,33,27,.18);
  /* identity avatar size (one chip across topbar / operator-match / buyer-review) */
  --av:40px;
  /* fonts. --en carries a Khmer fallback so mixed "Latin · ខ្មែរ" tags never tofu */
  --font:"Kantumruy Pro","Inter",system-ui,-apple-system,"Segoe UI","Khmer OS",sans-serif;
  --en-font:"Inter","Kantumruy Pro",ui-sans-serif,sans-serif;
  --mono:"Inter",ui-monospace,"SF Mono",Menlo,monospace;
  /* type scale (px). Khmer headings keep line-height >=1.45 so diacritics never clip */
  --t-display:30px; --t-h1:24px; --t-h2:20px; --t-h3:16px;
  --t-title:15.5px; --t-body:15px; --t-label:13px; --t-cap:12.5px; --t-micro:11.5px;
}
/* ---- per-persona accent themes (chrome only; brand green + semantic green are protected).
   --accent is the button-bg with white text, so each is the AA-passing DARK shade
   (white-on-accent >=4.5:1: farmer 5.32 / operator 7.42 / buyer 5.33). The brighter
   persona hues (#2196a6 teal, #dca233 gold) are used for icons/soft-bg only.
   Set via document.body.dataset.portal on login + portal screens; cleared on splash/home. */
body[data-portal="farmer"]{ --accent:#1f7a4d; --accent-d:#135e3a; --accent-soft:#e3efe7; --accent-tint:#f1f8f3; }
body[data-portal="op"]{     --accent:#125e69; --accent-d:#0d4a53; --accent-soft:#e0f2f4; --accent-tint:#eef8f9; }
body[data-portal="buyer"]{  --accent:#946012; --accent-d:#73490a; --accent-soft:#fbf0d9; --accent-tint:#fdf8ee; }

*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:var(--font);color:var(--ink);
  font-size:var(--t-body);line-height:1.72;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:
    radial-gradient(820px 460px at 102% -4%, #eef4e4 0%, transparent 56%),
    radial-gradient(720px 520px at -14% 8%, #fbf1d6 0%, transparent 54%),
    var(--bg);}
/* Khmer needs vertical room for sub/superscripts — never clip diacritics */
h1,h2,h3{line-height:1.5;margin:0;font-weight:700;letter-spacing:-.01em;}
p{margin:0;}
button{font-family:inherit;}

/* ---- enforced type scale (use classes; no inline font-sizes) ---- */
.t-display{font-size:var(--t-display);line-height:1.25;font-weight:800;letter-spacing:-.015em;}
.t-h1{font-size:var(--t-h1);line-height:1.35;font-weight:800;letter-spacing:-.01em;}
.t-h2{font-size:var(--t-h2);line-height:1.5;font-weight:700;}
.t-h3{font-size:var(--t-h3);line-height:1.5;font-weight:700;}
.t-title{font-size:var(--t-title);line-height:1.5;font-weight:700;}
.t-label{font-size:var(--t-label);line-height:1.5;font-weight:600;}
.t-cap{font-size:var(--t-cap);line-height:1.4;font-weight:500;}

#app{max-width:30rem;min-height:100dvh;margin:0 auto;background:transparent;
  display:flex;flex-direction:column;position:relative;box-shadow:0 0 60px rgba(18,38,28,.05);}
.screen{flex:1;padding:20px 20px 132px;animation:fade .3s ease both;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* icons */
.ic{display:inline-block;vertical-align:-.18em;flex:none;}
.ic.spin{animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* secondary English — subtle, never competes with Khmer */
.en{font-family:var(--en-font);color:var(--muted);font-weight:500;}
.sub{font-family:var(--en-font);color:var(--muted);font-size:var(--t-cap);font-weight:500;letter-spacing:.01em;line-height:1.4;display:block;margin-top:1px;}
.muted{color:var(--muted);} .small{font-size:var(--t-label);} .center{text-align:center;}
.mono{font-family:var(--mono);font-feature-settings:"tnum";}

/* top bar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;
  padding:13px 14px;min-height:58px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);}
.topbar .back{width:44px;height:44px;border:0;background:none;color:var(--ink-2);
  display:grid;place-items:center;border-radius:var(--r-sm);cursor:pointer;}
.topbar .back:hover{background:var(--surface-2);}
.topbar .title{flex:1;min-width:0;}
.topbar .title b{font-size:var(--t-h3);font-weight:700;display:block;}
.topbar .avatar{width:var(--av);height:var(--av);border-radius:50%;background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:16px;flex:none;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  border:0;border-radius:var(--r-sm);background:var(--accent);color:#fff;font-weight:700;
  font-size:15.5px;padding:0 18px;height:54px;cursor:pointer;line-height:1.2;
  box-shadow:0 1px 0 rgba(0,0,0,.04);transition:transform .07s,background .15s,box-shadow .15s;}
.btn:hover{background:var(--accent-d);}
.btn:active{transform:scale(.985);}
.btn:disabled{background:var(--surface-2);color:var(--muted);border:1px solid var(--line);cursor:not-allowed;box-shadow:none;}
.btn.secondary{background:var(--surface);color:var(--accent);border:1.5px solid var(--accent-soft);box-shadow:var(--sh-1);}
.btn.secondary:hover{background:var(--accent-tint);border-color:var(--accent);}
.btn.ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--line);box-shadow:var(--sh-1);}
.btn.danger{background:var(--error);} .btn.danger:hover{filter:brightness(.95);}
.btn.sm{height:44px;font-size:16px;width:auto;padding:0 14px;border-radius:var(--r-sm);}
.btn.md{height:48px;font-size:16px;width:auto;padding:0 16px;border-radius:var(--r-sm);}
.dock{position:sticky;bottom:0;padding:14px 20px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,var(--bg) 26%);}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--sh-card);}
.card+.card{margin-top:16px;}
.card.done{opacity:.72;box-shadow:var(--sh-1);}      /* completed operator step, de-emphasised */
.section{font-size:16px;font-weight:700;color:var(--ink);margin:30px 4px 14px;
  letter-spacing:.005em;display:flex;align-items:center;gap:9px;}
/* shared demo-disclaimer footer — one definition so every screen reads identically
   (replaces the per-screen inline styles that made the app feel inconsistent) */
.foot{text-align:center;color:var(--muted);font-size:var(--t-cap);line-height:1.55;
  margin:26px 4px 2px;padding-top:15px;border-top:1px solid var(--line-2);}
/* gold "seed" motif before every section label — the marketing-site brand cue, now in the app */
.section::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);
  align-self:center;flex:none;box-shadow:0 0 0 3px var(--gold-soft);}
.section .en{font-weight:500;font-size:var(--t-micro);}

/* key-value */
.kv{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-2);}
.kv:last-child{border-bottom:0;}
.kv .k{color:var(--muted);font-size:16px;}
.kv .v{font-weight:600;text-align:right;font-size:16px;}
.kv .v.warn{color:var(--warn-ink);}
.kv .v.strong{font-weight:800;color:var(--accent);}    /* the counted supply number */

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  padding:6px 11px 6px 9px;border-radius:999px;line-height:1.25;white-space:nowrap;}
.badge .ic{margin-top:-1px;}
.badge.locked{background:#eef1ee;color:var(--locked);}
.badge.available{background:var(--success-soft);color:var(--success);}
.badge.pending{background:var(--warn-soft);color:var(--warn-ink);}
.badge.complete{background:var(--success-soft);color:var(--success);}
.badge.rejected{background:var(--error-soft);color:var(--error);}

/* legacy home tiles (kept for compatibility; home now uses .portal below) */
.brand{padding:30px 0 22px;}
.brand .logo{width:62px;height:62px;border-radius:var(--r-lg);background:linear-gradient(150deg,var(--accent),var(--accent-d));
  color:#fff;display:grid;place-items:center;box-shadow:var(--sh-emboss);}
.brand .logo-img{width:64px;height:64px;border-radius:var(--r-lg);display:block;box-shadow:var(--sh-emboss);}
.brand h1{font-size:var(--t-display);margin:18px 0 0;display:flex;align-items:baseline;gap:10px;}
.brand h1 .en{font-size:var(--t-h3);font-weight:600;}
.brand .tag{color:var(--ink-2);font-size:var(--t-h3);margin-top:8px;}
.brand .tag .sub{font-size:var(--t-label);margin-top:2px;}

.role{display:flex;gap:14px;align-items:center;padding:16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);cursor:pointer;width:100%;text-align:left;
  box-shadow:var(--sh-1);transition:border-color .15s,box-shadow .15s,transform .07s;}
.role:hover{border-color:var(--accent-soft);box-shadow:var(--sh-2);}
.role:active{transform:scale(.99);}
.role .ic-box{width:48px;height:48px;border-radius:var(--r);background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;flex:none;}
.role .txt{flex:1;min-width:0;}
.role .txt b{font-size:var(--t-h3);display:block;}
.role .txt .sub{font-size:var(--t-cap);}
.role .go{color:var(--muted);flex:none;}

.feat{display:flex;gap:13px;align-items:flex-start;padding:11px 0;}
.feat .ic-box{width:44px;height:44px;border-radius:var(--r);background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;flex:none;}
.feat .ft{font-size:16px;line-height:1.55;padding-top:3px;}
.feat .ft .sub{margin-top:2px;}

/* progress meter */
.meter{height:9px;background:#e8ece8;border-radius:999px;overflow:hidden;}
.meter>i{display:block;height:100%;background:var(--accent);
  border-radius:999px;transition:width .55s cubic-bezier(.4,0,.2,1);}
.meter.full>i{background:linear-gradient(90deg,var(--success),#2c9a64);}

/* module cards (state rail) */
.mod{display:flex;gap:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1);cursor:pointer;
  transition:box-shadow .15s,transform .07s,background .12s;}
.mod:not(.locked):hover{box-shadow:var(--sh-2);}
.mod:not(.locked):active{transform:scale(.995);background:var(--surface-2);}
.mod.locked{opacity:.7;cursor:default;box-shadow:none;}
/* the single next action — the ONE module the farmer should tap — stands out */
.mod.available{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft),var(--sh-2);}
.mod.available h3{font-weight:800;}
.mod .rail{width:5px;flex:none;}
.mod.available .rail{width:6px;}
.mod .rail.locked{background:var(--locked);} .mod .rail.available{background:var(--available);}
.mod .rail.pending{background:var(--pending);} .mod .rail.complete{background:var(--success);}
.mod .rail.rejected{background:var(--error);}
.mod .body{flex:1;padding:15px 14px 15px 15px;min-width:0;}
.mod .row1{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;}
.mod .ph{font-size:12px;color:var(--muted);font-weight:600;display:inline-flex;align-items:center;gap:5px;min-width:0;}
.mod .ph b{color:var(--ink-2);}
.mod h3{font-size:var(--t-title);margin:0 0 3px;}
.mod .sum{font-size:var(--t-label);color:var(--muted);margin:0;line-height:1.5;}
.mod .meta{display:flex;gap:14px;margin-top:9px;font-size:var(--t-cap);color:var(--muted);}
.mod .meta span{display:inline-flex;align-items:center;gap:5px;}
.mod .gate{margin-top:9px;display:inline-flex;gap:6px;align-items:center;background:var(--surface-2);
  padding:7px 11px;border-radius:var(--r-sm);font-size:var(--t-cap);color:var(--muted);}
.mod .chev{align-self:center;color:#c4cdc6;padding:0 12px 0 2px;flex:none;}

/* banners */
.banner{border-radius:var(--r-md);padding:12px 14px;font-size:var(--t-label);line-height:1.55;display:flex;gap:10px;}
.banner .ic{margin-top:2px;}
.banner.info{background:var(--accent-tint);border:1px solid var(--accent-soft);color:var(--ink-2);}
.banner.warn{background:var(--warn-soft);border:1px solid #f0dcc0;color:#7a4a1c;}
.banner.ok{background:var(--success-soft);border:1px solid color-mix(in srgb,var(--success) 30%,#fff);color:#1d6b3f;}
.banner b{color:inherit;}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:7px 10px;font-size:var(--t-cap);color:var(--ink-2);}
.chip .ic{color:var(--muted);}

/* video */
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(140deg,var(--accent) 0%,var(--accent-d) 70%,#0f4a2e 100%);
  display:grid;place-items:center;box-shadow:var(--sh-1);}
.video::after{content:"";position:absolute;inset:0;opacity:.16;
  background-image:radial-gradient(circle at 22% 24%,#fff 1px,transparent 1px);background-size:20px 20px;}
.video .play{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.96);border:0;cursor:pointer;
  color:var(--accent);display:grid;place-items:center;z-index:1;box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .1s;}
.video .play:hover{transform:scale(1.04);}
.video .play:active{transform:scale(.96);}
.video .tag{position:absolute;left:12px;top:12px;z-index:1;display:inline-flex;align-items:center;gap:5px;
  background:rgba(0,0,0,.3);color:#fff;font-size:12px;padding:5px 9px;border-radius:8px;backdrop-filter:blur(4px);}
.video .vsample{position:absolute;right:12px;top:12px;z-index:1;display:inline-flex;align-items:center;
  background:rgba(0,0,0,.42);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;backdrop-filter:blur(4px);}
.video .cap{position:absolute;inset:auto 0 0 0;z-index:1;padding:14px 14px 12px;color:#fff;font-size:var(--t-label);font-weight:600;
  background:linear-gradient(transparent,rgba(0,0,0,.6));display:flex;justify-content:space-between;gap:8px;align-items:flex-end;}
.video .cap .dur{font-family:var(--mono);font-size:12px;background:rgba(0,0,0,.35);padding:2px 7px;border-radius:6px;flex:none;}

/* proof states */
.proof{border-radius:var(--r);padding:18px;border:1px solid var(--line);background:var(--surface);}
.proof.busy{background:var(--warn-soft);border-color:#f0dcc0;}
.proof.complete{background:var(--accent-tint);border-color:var(--accent-soft);}
.proof.rejected{background:var(--error-soft);border-color:#f1ccc6;}
.proof .head{display:flex;align-items:center;gap:9px;font-weight:700;font-size:var(--t-title);}
.proof.complete .head{color:var(--success);} .proof.rejected .head{color:var(--error);} .proof.busy .head{color:var(--pending);}
.checkrow{display:flex;align-items:center;gap:9px;font-size:16px;padding:6px 0;color:var(--ink);font-weight:600;}
.checkrow .ic{color:var(--success);}
.linklike{display:block;width:100%;min-height:44px;background:none;border:0;color:var(--muted);text-decoration:underline;
  text-underline-offset:4px;cursor:pointer;font-family:inherit;font-size:12px;padding:6px;}

/* passport */
.passport{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2);}
.pp-head{background:linear-gradient(135deg,#1f7a4d,#176040);color:#fff;padding:18px 20px;  /* passport = brand artifact: stays brand green */
  display:flex;align-items:center;gap:12px;}
.pp-head .tier b{font-size:var(--t-title);display:block;} .pp-head .tier .sub{color:rgba(255,255,255,.85);}
.pp-body{background:var(--surface);padding:20px;}
.tier-banner{display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,#1f7a4d,#176040);
  color:#fff;padding:18px 20px;}
.tier-banner b{font-size:var(--t-h3);display:block;} .tier-banner .sub{color:rgba(255,255,255,.88);}

/* QR (real SVG render injected by app.js) */
.qr{width:128px;height:128px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:9px;}
.qr svg{display:block;width:100%;height:100%;}

/* evidence trail */
.ev{display:flex;gap:12px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-md);padding:13px;}
.ev .num{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--success);
  display:grid;place-items:center;flex:none;}
.ev .et b{font-size:16px;}
.ev .et .ph{font-size:var(--t-cap);color:var(--ink-2);font-weight:600;}
.ev .chips .chip:first-child{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft);} /* media-type chip colour-coded */

/* progressive disclosure — native <details>, zero JS, works over file:// */
.disclose{border:0;}
.disclose>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;}
.disclose>summary::-webkit-details-marker{display:none;}
.disclose>summary .chev{transition:transform .15s;color:var(--muted);flex:none;}
.disclose[open]>summary .chev{transform:rotate(90deg);}
.disclose-inline>summary{list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:5px;color:var(--muted);}
.disclose-inline>summary::-webkit-details-marker{display:none;}
/* Kasekor demoted to an on-demand "Ask for help" disclosure (was an always-open chat that overloaded the lesson) */
.kask{margin-top:14px;}
.kask>summary{padding:12px 15px;border:1px solid var(--accent-soft);border-radius:var(--r);
  background:var(--accent-tint);color:var(--accent);font-weight:700;}
.kask>summary .kk-q{display:inline-flex;align-items:center;gap:9px;min-width:0;}
.kask>summary .chev{color:var(--accent);}
.kask[open]>summary{margin-bottom:10px;border-radius:var(--r) var(--r) 0 0;}
.kc-chips .chip{min-height:44px;}   /* sacred farmer screen: Kasekor quick-actions must be full tap targets */

/* operator stepper */
.steps{display:flex;gap:6px;margin:14px 0 4px;}
.steps>i{flex:1;height:4px;border-radius:99px;background:#e3e9e3;transition:background .3s;}
.steps>i.on{background:var(--accent);}
.steplab{font-size:var(--t-micro);font-weight:800;color:var(--accent);letter-spacing:.04em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;}
.field{width:100%;font-family:inherit;font-size:16px;padding:13px 14px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);}
.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.field:disabled{background:var(--surface-2);color:var(--muted);}
.field.needsfix{border-color:var(--warn);box-shadow:0 0 0 3px var(--warn-soft);}
.lbl{display:block;font-size:var(--t-cap);color:var(--muted);margin:0 0 6px;font-weight:600;}
.row{display:flex;gap:10px;align-items:flex-end;}

/* seam match row */
.match{display:flex;gap:11px;align-items:center;padding:13px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);box-shadow:var(--sh-1);transition:border-color .15s,box-shadow .15s;}
/* the supply-relevant EXCEPTION (pending / self-declared, NOT counted) is the standout */
.match:has(.badge.pending){border-color:var(--warn);box-shadow:0 0 0 1px var(--warn-soft) inset;}
.match .av{width:var(--av);height:var(--av);border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:700;flex:none;}
.match .info{flex:1;min-width:0;}
.match .info .nm{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.match .info .nm b{font-size:14.5px;}
.match .info .det{font-size:var(--t-cap);color:var(--muted);margin-top:2px;}
.tierpill{font-size:11.5px;font-weight:700;padding:4px 9px;line-height:1.35;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.tierpill.self{background:var(--warn-soft);color:var(--warn-ink);}
.rowend .pr-qty{font-size:14.5px;font-weight:800;color:var(--ink);}
.listrow .tierpill{max-width:140px;overflow:hidden;text-overflow:ellipsis;}
.seam-note{font-size:var(--t-cap);color:var(--muted);display:flex;gap:7px;align-items:flex-start;line-height:1.5;}
.seam-note .ic{color:var(--accent);margin-top:1px;}

/* ============================ HOME — hero + overlapping portal sheet ============================ */
.screen.home{padding:0 0 40px;}
.home-hero{position:relative;padding:38px 24px 66px;color:#fff;overflow:hidden;
  background:linear-gradient(157deg,#1f6e44 0%,#16562f 60%,#0f3d24 100%);
  border-radius:0 0 32px 32px;box-shadow:0 16px 36px rgba(15,61,36,.28);}
.home-hero::after{content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;
  background-image:radial-gradient(circle at 16% 20%,#fff 1.5px,transparent 1.6px);background-size:27px 27px;}
.home-hero .logo-img{width:64px;height:64px;border-radius:var(--r-lg);position:relative;box-shadow:0 12px 26px rgba(0,0,0,.28);}
.home-hero h1{font-size:36px;margin:18px 0 0;position:relative;letter-spacing:-.01em;}
.home-hero h1 .en{font-size:18px;color:rgba(255,255,255,.88);font-weight:700;margin-left:9px;}   /* AA on green */
.home-hero .htag{font-size:15.5px;color:#fff;margin-top:9px;position:relative;line-height:1.62;}
.home-hero .htag .sub{display:block;color:rgba(255,255,255,.9);font-size:var(--t-cap);margin-top:2px;} /* AA on deepened green */

.portals{margin:-42px 18px 0;position:relative;z-index:3;display:flex;flex-direction:column;gap:13px;}
.portal{display:flex;align-items:center;gap:15px;padding:17px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-raised);cursor:pointer;width:100%;text-align:left;
  transition:transform .12s,box-shadow .16s,background .12s;}
.portal:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(18,38,28,.15);}
.portal:active{transform:scale(.985);background:var(--accent-tint);}
.portal .pic{width:54px;height:54px;border-radius:var(--r);display:grid;place-items:center;flex:none;color:#fff;box-shadow:var(--sh-emboss);}
.portal.farmer .pic{background:linear-gradient(150deg,#2fa069,#176040);}
.portal.op .pic{background:linear-gradient(150deg,#2196a6,#125e69);}
.portal.buyer .pic{background:linear-gradient(150deg,#dca233,#a4690f);}
.portal .pt{flex:1;min-width:0;}
.portal .pt b{font-size:17px;display:block;line-height:1.4;}
.portal .pt .sub{font-size:var(--t-cap);margin-top:1px;color:var(--muted);}
.portal .tagrole{display:inline-block;font-family:var(--en-font);font-size:10px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 7px;border-radius:var(--r-xs);margin-bottom:5px;}
.portal.farmer .tagrole{background:var(--accent-soft);color:var(--accent);}
.portal.op .tagrole{background:#e0f2f4;color:#125e69;}
.portal.buyer .tagrole{background:#fbf0d9;color:#9a6210;}
.portal .go{color:#c4cdc6;flex:none;}
.home .section,.home .card,.home .btn,.home .foot{margin-left:18px;margin-right:18px;}
.home .foot{text-align:center;color:var(--muted);font-size:var(--t-cap);margin-top:20px;}
.home-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:18px 18px 0;}
.home-links a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13.5px;font-weight:600;min-height:44px;}
.loopcard{margin:14px 18px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:6px 18px;box-shadow:var(--sh-card);}

/* buyer portal */
.statuschip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;font-size:var(--t-label);font-weight:700;}
.statuschip.ready{background:var(--success-soft);color:var(--success);}
.statuschip.work{background:var(--warn-soft);color:var(--warn-ink);}
.contrib{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-2);}
.contrib:last-child{border-bottom:0;}
.contrib .av{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700;flex:none;}
.vrec{font-size:var(--t-label);font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:4px;
  min-height:44px;padding:6px 4px;text-decoration:underline;text-underline-offset:3px;line-height:1.4;}
.vrec:active{color:var(--accent-d);}

/* ============================ farmer: callout · capture · VLM result ============================ */
.callout{display:flex;gap:12px;align-items:flex-start;background:var(--accent-tint);border:1px solid var(--accent-soft);
  border-radius:var(--r-md);padding:13px 15px;margin-top:14px;}
.callout>.ic{color:var(--accent);margin-top:2px;flex:none;}
.callout b{font-size:14.5px;}
.capframe{aspect-ratio:4/3;border:2px dashed var(--line);border-radius:var(--r);background:var(--surface-2);display:grid;place-items:center;}
.capframe .cf-mid{display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--muted);text-align:center;padding:18px;}
.capframe .cf-mid .ic{color:var(--locked);}
.capframe .cf-mid span{font-size:13px;max-width:16rem;line-height:1.5;}
.capthumb{width:100%;aspect-ratio:16/10;border-radius:var(--r);background:linear-gradient(135deg,#e7efe9,#d6e4da);
  display:grid;place-items:center;color:var(--accent);border:1px solid var(--accent-soft);}
.vlmnote{display:flex;gap:7px;align-items:flex-start;margin-top:12px;padding-top:11px;border-top:1px solid var(--line-2);
  font-size:12.5px;line-height:1.5;color:var(--muted);}
.vlmnote .ic{color:var(--ink-2);margin-top:1px;flex:none;}
.av-lg{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:700;font-size:20px;flex:none;}

/* ============================ buyer requirement wizard ============================ */
.cropgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.cropcard{display:flex;flex-direction:column;align-items:center;gap:5px;padding:15px 6px;border:1.5px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);cursor:pointer;text-align:center;min-height:44px;
  transition:border-color .12s,box-shadow .12s;font-family:inherit;}
.cropcard .ic{color:var(--muted);}
.cropcard b{font-size:13.5px;}
.cropcard .sub{font-size:11px;}
.cropcard.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft);}
.cropcard.on .ic{color:var(--accent);}
.qtystep{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.qbtn{width:54px;height:54px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--surface);
  color:var(--accent);display:grid;place-items:center;cursor:pointer;flex:none;}
.qbtn:active{transform:scale(.95);}
.qval{flex:1;text-align:center;}
.qval b{font-size:30px;font-weight:800;}
.qval span{color:var(--muted);margin-left:6px;}
.seg{display:flex;gap:5px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px;}
.seg button{flex:1;border:0;background:none;font-family:inherit;font-size:12.5px;font-weight:700;padding:9px 4px;
  border-radius:7px;cursor:pointer;color:var(--ink-2);min-height:44px;line-height:1.3;}
.seg button.on{background:var(--surface);color:var(--accent);box-shadow:var(--sh-1);}
.pricepick{display:flex;flex-direction:column;gap:9px;}
.pricepick button{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);background:var(--surface);
  border-radius:var(--r-md);padding:13px 15px;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);
  cursor:pointer;min-height:52px;text-align:left;}
.pricepick button .ic{color:var(--muted);flex:none;}
.pricepick button.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft);}
.pricepick button.on .ic{color:var(--accent);}
.wzdone{display:flex;align-items:center;gap:9px;width:100%;border:1px solid var(--accent-soft);background:var(--accent-tint);
  border-radius:var(--r-md);padding:11px 14px;margin-bottom:10px;cursor:pointer;font-family:inherit;text-align:left;min-height:48px;}
.wzdone .ic{color:var(--accent);flex:none;}
.wzdone .wl{font-size:12.5px;color:var(--muted);}
.wzdone b{font-size:16px;margin-left:2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wzdone .ed{margin-left:auto;font-size:12px;color:var(--accent);font-weight:700;flex:none;}
/* buyer wizard — guided layout that fills the screen (no stranded button in an empty void) */
.screen.wzscreen{display:flex;flex-direction:column;}
.wzhead{margin:6px 2px 2px;}
.wzhead .steplab{color:var(--accent-d);}
.wztitle{font-size:var(--t-h2);margin:7px 0 3px;}
.wzhint{color:var(--muted);font-size:var(--t-label);margin:0;line-height:1.5;}
.wzcard{margin-top:14px;}
.wzreassure{display:flex;gap:9px;align-items:flex-start;margin-top:auto;padding-top:18px;
  color:var(--muted);font-size:var(--t-cap);line-height:1.55;}   /* margin-top:auto pins it just above the dock, filling the void */
.wzreassure>.ic{color:var(--gold-d);margin-top:1px;flex:none;}
.wznav{display:flex;gap:10px;}
.wznav #wzNext{flex:1;}
.wznav .wzback{flex:0 0 auto;width:auto;padding:0 16px;}
.qtyrow{display:flex;align-items:center;gap:10px;}
.qtyrow .qtyfield{flex:1;min-width:0;text-align:center;font-family:var(--mono);font-size:26px;font-weight:800;height:54px;padding:0 8px;}
.qtyrow .qunit{color:var(--muted);font-weight:700;flex:none;}
.banner.compact{align-items:center;min-height:44px;color:inherit;text-decoration:none;cursor:pointer;}
.banner.compact .bnk{margin-left:auto;display:inline-flex;align-items:center;gap:3px;color:var(--accent);font-weight:700;white-space:nowrap;flex:none;}
.planguard{display:flex;gap:9px;align-items:flex-start;background:var(--warn-soft);border:1px solid #f0dcc0;
  border-radius:var(--r-md);padding:12px 14px;font-size:13px;line-height:1.5;color:#7a4a1c;}
.planguard .ic{color:var(--warn);margin-top:2px;flex:none;}

/* ============================ Kasekor GAP engine (rule-based, not AI) ============================ */
.gapcard{margin-top:10px;border:1px solid var(--accent-soft);background:var(--accent-tint);border-radius:var(--r-lg);padding:16px;}
.gaphead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.gapname{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14.5px;color:var(--accent-d);letter-spacing:.01em;}
.gapname .ic{color:var(--accent);}
.gapchip{font-size:10.5px;font-weight:700;color:var(--accent);background:var(--surface);border:1px solid var(--accent-soft);
  border-radius:999px;padding:5px 10px;line-height:1.2;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.gapintro{font-size:13.5px;color:var(--ink-2);margin:10px 0 2px;font-weight:700;}
.gapintro .en{font-weight:500;}
.gapgroup{margin-top:14px;}
.gapgroup .lbl{margin-bottom:7px;font-weight:700;color:var(--ink-2);}
.gapgroup .lbl .en{font-weight:500;color:var(--muted);}
.optset{display:flex;flex-direction:column;gap:8px;}
.opt{display:flex;align-items:center;gap:10px;width:100%;border:1.5px solid var(--line);background:var(--surface);
  border-radius:var(--r-sm);padding:10px 13px;font-family:inherit;color:var(--ink);cursor:pointer;text-align:left;
  min-height:48px;transition:border-color .12s,box-shadow .12s,background .12s;}
.opt>.ic{color:var(--muted);flex:none;}
.opt>span{font-size:13.5px;font-weight:600;line-height:1.3;min-width:0;}
.opt>span .sub{margin-top:1px;}
.opt.on{border-color:var(--accent);background:#fff;box-shadow:0 0 0 1px var(--accent-soft);}
.opt.on>.ic{color:var(--accent);}
.opt:active{transform:scale(.995);}
.gapnote{display:flex;gap:7px;align-items:flex-start;margin-top:13px;font-size:11.5px;line-height:1.5;color:var(--muted);}
.gapnote .ic{color:var(--ink-2);margin-top:1px;flex:none;}
.gapcard>.btn{margin-top:14px;}

/* verdict card — humble + claim-safe; tone = colour only, never a guarantee */
.verdict{border-radius:var(--r-md);padding:14px;border:1px solid;margin-top:14px;}
.verdict .vrow{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15.5px;line-height:1.4;}
.verdict .vrow .en{font-weight:600;}
.verdict .vlabel{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin:11px 0 3px;opacity:.7;}
.verdict .vsub{font-size:13px;line-height:1.62;color:var(--ink-2);margin:0;}
.verdict .vsub.en2{font-size:11.5px;color:var(--muted);margin-top:3px;}
.verdict.ok{background:#fff;border-color:var(--accent-soft);}
.verdict.ok .vrow{color:var(--success);}
.verdict.warn{background:var(--warn-soft);border-color:#f0dcc0;}
.verdict.warn .vrow{color:var(--warn-ink);}
.verdict.risk{background:var(--error-soft);border-color:#f1ccc6;}
.verdict.risk .vrow{color:var(--error);}
.verdict.done{margin-top:10px;padding:13px 14px;}
.verdict.done .vsub{margin-top:8px;display:flex;gap:7px;align-items:flex-start;}
.verdict.done .vsub .ic{color:var(--success);margin-top:2px;flex:none;}

/* buyer-facing recorded GAP self-checks (verify page) */
.gapline{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);
  background:var(--surface-2);border-radius:var(--r-md);}
.gapline .gl-k{font-size:13px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;min-width:0;}
.gapline .gl-k .ic{color:var(--muted);flex:none;}
.gapline .gl-v{font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:none;}
.gapline .gl-v.ok{color:var(--success);}
.gapline .gl-v.warn{color:var(--warn-ink);}
.gapline .gl-v.risk{color:var(--error);}

/* ============================ entry splash (language picker) ============================ */
.splash{min-height:100dvh;display:flex;flex-direction:column;color:#fff;
  padding:0 26px calc(38px + env(safe-area-inset-bottom));
  background:
    radial-gradient(880px 520px at 50% 22%, #1d6543 0%, transparent 58%),
    linear-gradient(168deg,#103f29 0%,#0a2c1d 52%,#06160e 100%);}
.splash-top{height:7vh;}
.splash-brand{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;}
.splash-mark{border-radius:27px;box-shadow:0 22px 48px rgba(0,0,0,.5);}
.splash-word{display:flex;flex-direction:column;align-items:center;gap:3px;margin:8px 0 2px;}
.splash-word .kh{font-size:42px;font-weight:800;color:#fff;letter-spacing:.005em;line-height:1.12;}
.splash-word .lat{font-family:var(--en-font);font-size:16px;font-weight:600;letter-spacing:.46em;text-indent:.46em;
  color:rgba(255,255,255,.72);text-transform:uppercase;}
.splash-tag{font-size:14.5px;color:rgba(255,255,255,.84);max-width:18rem;line-height:1.6;margin:0;}
.splash-tag.en{font-size:12.5px;color:rgba(255,255,255,.6);font-family:var(--en-font);margin-top:-3px;}
.splash-actions{display:flex;flex-direction:column;gap:13px;}
.splash-choose{text-align:center;font-size:12.5px;color:rgba(255,255,255,.66);margin:0 0 4px;font-weight:600;letter-spacing:.02em;}
.langbtn{height:58px;border-radius:16px;border:0;background:var(--accent);color:#fff;font-family:inherit;font-weight:800;
  font-size:17px;cursor:pointer;box-shadow:0 12px 28px rgba(15,61,36,.45);transition:transform .08s,background .15s;letter-spacing:.01em;}
.langbtn:hover{background:#258a57;}
.langbtn:active{transform:scale(.985);}
.langbtn.alt{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.28);box-shadow:none;}
.langbtn.alt:hover{background:rgba(255,255,255,.14);}

/* ============================ ABA-inspired: icon-hero · numbered steplist · bottom sheet ============================ */
.hero-ic{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:10px 0 2px;}
.hero-ic .disc{width:84px;height:84px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(31,122,77,.18);}
.hero-ic h2{font-size:var(--t-h2);margin:0;}
.hero-ic p{color:var(--muted);font-size:16px;max-width:20rem;line-height:1.6;margin:0;}

.steplist{display:flex;flex-direction:column;}
.steplist .sline{display:flex;gap:14px;align-items:flex-start;position:relative;padding-bottom:18px;}
.steplist .sline:last-child{padding-bottom:0;}
.steplist .snum{width:30px;height:30px;border-radius:50%;border:1.6px solid var(--accent);color:var(--accent);font-weight:800;
  font-size:13.5px;display:grid;place-items:center;flex:none;background:var(--surface);z-index:1;}
.steplist .sline:not(:last-child)::before{content:"";position:absolute;left:14.2px;top:31px;bottom:1px;width:1.6px;
  background:repeating-linear-gradient(var(--accent) 0 4px,transparent 4px 9px);opacity:.4;}
.steplist .stxt{padding-top:3px;font-size:16px;line-height:1.5;min-width:0;}
.steplist .stxt b{display:block;font-size:14.5px;font-weight:700;}
.steplist .stxt .sub{margin-top:1px;}

/* bottom sheet — appended to <body> by openSheet(); offline, accessible */
.sheet-back{position:fixed;inset:0;z-index:60;background:rgba(10,22,15,.5);backdrop-filter:blur(2px);
  display:flex;align-items:flex-end;justify-content:center;animation:fade .2s ease both;}
.sheet{width:100%;max-width:30rem;background:var(--surface);border-radius:22px 22px 0 0;
  padding:10px 22px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(18,38,28,.24);
  animation:sheetup .26s cubic-bezier(.4,0,.2,1) both;}
@keyframes sheetup{from{transform:translateY(100%);}to{transform:none;}}
.sheet .grip{width:38px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 16px;}
.sheet .sh-ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin-bottom:13px;}
.sheet .sh-ic.ok{background:var(--accent-soft);color:var(--accent);}
.sheet .sh-ic.warn{background:var(--warn-soft);color:var(--warn-ink);}
.sheet .sh-ic.risk{background:var(--error-soft);color:var(--error);}
.sheet h3{font-size:var(--t-h2);margin:0 0 7px;}
.sheet p{color:var(--ink-2);font-size:16px;line-height:1.62;margin:0 0 18px;}
.sheet .sh-actions{display:flex;gap:11px;}
.sheet .sh-actions .btn{width:auto;}
@media (prefers-reduced-motion:reduce){ .sheet{animation:none;} }

/* ============================ account hub · settings · faq · terms · help ============================ */
/* topbar menu button (right slot) + home language quick-toggle */
.topmenu{width:44px;height:44px;border:0;background:var(--surface-2);color:var(--ink-2);display:grid;place-items:center;
  border-radius:50%;cursor:pointer;flex:none;border:1px solid var(--line);transition:background .12s;}
.topmenu:hover{background:var(--accent-tint);color:var(--accent);}
.screen.home{position:relative;}
.home-top{position:absolute;top:0;right:0;z-index:6;padding:13px 15px;}
.langpill{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 15px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.30);color:#fff;font-family:inherit;font-weight:700;
  font-size:13px;letter-spacing:.01em;backdrop-filter:blur(4px);transition:background .12s;}
.langpill:hover{background:rgba(255,255,255,.26);}
.langpill .ic{opacity:.92;}
/* On LIGHT topbars the translucent-white pill was invisible (white-on-white). Theme it to the
   persona accent so the language control is always readable; home/splash keep the white pill on their dark hero. */
.topbar .langpill{background:var(--accent-soft);border:1px solid transparent;color:var(--accent-d);backdrop-filter:none;}
.topbar .langpill:hover{background:var(--accent-soft);filter:brightness(.96);}

/* profile card */
.profile-card{display:flex;align-items:center;gap:15px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-card);}
.av-xl{width:60px;height:60px;border-radius:50%;background:linear-gradient(150deg,var(--accent),var(--accent-d));color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:24px;flex:none;box-shadow:var(--sh-emboss);}
.pc-id{min-width:0;}
.pc-id b{font-size:var(--t-h3);display:block;line-height:1.4;}
.pc-id .pc-role,.pc-id .pc-line{display:flex;align-items:center;gap:6px;font-size:var(--t-cap);color:var(--muted);margin-top:3px;}
.pc-id .pc-role{color:var(--accent);font-weight:700;}
.pc-id .pc-role .ic,.pc-id .pc-line .ic{flex:none;}

/* menu list (account hub rows) */
.menulist{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-card);}
.menurow{display:flex;align-items:center;gap:14px;width:100%;border:0;background:var(--surface);cursor:pointer;
  padding:16px 16px;font-family:inherit;text-align:left;min-height:60px;border-bottom:1px solid var(--line-2);transition:background .12s;}
.menulist .menurow:last-child{border-bottom:0;}
.menurow:hover{background:var(--surface-2);}
.menurow:active{background:var(--accent-tint);}
.menurow .mr-ic{width:40px;height:40px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;flex:none;}
.menurow .mr-l{flex:1;min-width:0;font-size:16px;font-weight:600;color:var(--ink);}
.menurow .mr-l b{display:block;font-size:16px;font-weight:700;}
.menurow .mr-l .mr-sub{display:block;font-size:var(--t-cap);font-weight:500;color:var(--muted);margin-top:1px;}
.menurow .mr-go{color:#c4cdc6;flex:none;}
.menurow.switch{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card);}
.menurow.switch .mr-ic{background:var(--surface-2);color:var(--ink-2);}

/* settings rows + demo toggle */
.settingrow{display:flex;align-items:center;gap:13px;}
.settingrow .sr-ic{width:40px;height:40px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;flex:none;}
.settingrow .sr-l{flex:1;min-width:0;}
.settingrow .sr-l b{display:block;font-size:14.5px;}
.settingrow .sr-l .sr-sub{display:block;font-size:var(--t-cap);color:var(--muted);margin-top:1px;line-height:1.45;}
.toggle.demo{width:46px;height:27px;border-radius:99px;background:#dfe5df;position:relative;flex:none;border:1px solid var(--line);}
.toggle.demo i{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);}
/* taller language segmented control (settings) */
.seg.lang{padding:5px;}
.seg.lang button{min-height:50px;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.seg.lang button .ic{opacity:.7;}
.seg.lang button.on .ic{opacity:1;color:var(--accent);}

/* FAQ accordion */
.faqlist{display:flex;flex-direction:column;gap:10px;}
.faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden;}
.faq>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 16px;min-height:56px;}
.faq>summary::-webkit-details-marker{display:none;}
.faq>summary .q{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.45;}
.faq>summary .chev{color:var(--muted);flex:none;transition:transform .18s;}
.faq[open]>summary .chev{transform:rotate(180deg);}
.faq[open]>summary{border-bottom:1px solid var(--line-2);}
.faq>p{margin:0;padding:13px 16px 16px;font-size:16px;line-height:1.66;color:var(--ink-2);}

/* terms / boundaries cards */
.termlist{display:flex;flex-direction:column;gap:11px;}
.termcard{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:15px;box-shadow:var(--sh-1);}
.termcard .tc-ic{width:38px;height:38px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;flex:none;}
.termcard .tc-b{min-width:0;}
.termcard .tc-b b{font-size:14.5px;display:block;line-height:1.45;}
.termcard .tc-b p{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:4px 0 0;}

/* ============================ workspace: bottom tabs · lists · dashboards ============================ */
/* a screen has EITHER a sticky .dock OR a fixed .tabbar, never both */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;max-width:30rem;margin:0 auto;
  display:flex;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);}
.tabbar a{flex:1;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.005em;padding:8px 2px;
  transition:color .12s;}
.tabbar a.on{color:var(--accent);}
.tabbar a:active{background:var(--accent-tint);}
.tabbar a .ic{opacity:.9;}
.tabbar a.on .ic{opacity:1;}
.screen.has-tabs{padding-bottom:calc(74px + env(safe-area-inset-bottom));}

/* search + filter + sort + list meta */
.searchbar{position:relative;margin:2px 0 12px;}
.searchbar>.ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;}
.searchbar input{width:100%;font-family:inherit;font-size:16px;padding:13px 14px 13px 40px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);}
.searchbar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.filterchips{display:flex;gap:8px;overflow-x:auto;padding:6px 6px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent);}
.filterchips::-webkit-scrollbar{display:none;}
.filterchips .chip{cursor:pointer;white-space:nowrap;flex:none;min-height:44px;}
.chip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:700;}
.listmeta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 12px;
  font-size:12.5px;color:var(--muted);}
.sortbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 13px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2);font-family:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;flex:none;}
.sortbtn:active{background:var(--surface-2);}
.sortbtn .ic{color:var(--muted);}

/* tappable list row (reuses .match shell) */
.listrow{cursor:pointer;text-decoration:none;color:inherit;width:100%;
  transition:box-shadow .15s,transform .07s,border-color .15s;}
.listrow:hover{box-shadow:var(--sh-2);border-color:var(--accent-soft);}
.listrow:active{transform:scale(.995);}
.listrow.hero{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft),var(--sh-2);}
.listrow .go{color:#c4cdc6;flex:none;}
.rowend{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none;align-self:center;}
.rowstack{display:flex;flex-direction:column;gap:11px;}

/* KPI / metric cards */
.kpigrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.kpigrid.kpi3{grid-template-columns:repeat(3,1fr);gap:9px;}
.kpi3 .kpi{padding:13px 11px;} .kpi3 .kpi .kn{font-size:22px;}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:15px;box-shadow:var(--sh-1);}
.kpi .kn{font-size:25px;font-weight:800;line-height:1.15;letter-spacing:-.01em;color:var(--ink);}
.kpi.ok .kn{color:var(--success);}
.kpi.warn .kn{color:var(--warn-ink);}
.kpi .kl{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.4;}
.kpi .knote{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.35;}

/* commercial-spine status pill (single claim-safe source) */
.spinepill{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;font-size:12px;
  font-weight:700;white-space:nowrap;line-height:1.25;}
.spinepill .ic{margin-top:-1px;}
.spinepill.planning{background:#eef1ee;color:var(--ink-2);}
.spinepill.sourcing{background:var(--warn-soft);color:var(--warn-ink);}
.spinepill.offer{background:var(--success-soft);color:var(--success);}
.spinepill.accepted{background:var(--success-soft);color:var(--success);}
.spinepill.delivered{background:#e6eef9;color:#33527a;}
.spinepill.paid{background:#eef1ee;color:var(--ink-2);}

/* commercial-spine timeline (detail pages) */
.spineline{display:flex;flex-direction:column;margin-top:4px;}
.spineline .sl{display:flex;gap:12px;align-items:flex-start;position:relative;padding-bottom:15px;}
.spineline .sl:last-child{padding-bottom:0;}
.spineline .dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);background:var(--surface);
  display:grid;place-items:center;flex:none;z-index:1;color:var(--muted);}
.spineline .sl:not(:last-child)::before{content:"";position:absolute;left:11px;top:24px;bottom:1px;width:2px;background:var(--line);}
.spineline .sl.done .dot,.spineline .sl.current .dot{border-color:var(--accent);}
.spineline .sl.done .dot{background:var(--accent);color:#fff;}
.spineline .sl.current .dot{color:var(--accent);}
.spineline .sl.done:not(:last-child)::before{background:var(--accent);}
.spineline .st{font-size:13px;line-height:1.4;padding-top:2px;color:var(--ink-2);}
.spineline .sl.current .st{font-weight:700;color:var(--ink);}
.spineline .sl.future .st{color:var(--muted);}

/* empty state */
.emptystate{text-align:center;padding:34px 16px;}
.emptystate .disc{width:64px;height:64px;border-radius:50%;background:var(--surface-2);color:var(--muted);
  display:grid;place-items:center;margin:0 auto 13px;}
.emptystate p{color:var(--muted);font-size:16px;margin:0 0 14px;line-height:1.55;}

/* dashboard alert rows (reuse .banner, made tappable) */
a.banner{text-decoration:none;color:inherit;cursor:pointer;align-items:center;}
a.banner:active{filter:brightness(.98);}
a.banner .go{margin-left:auto;color:var(--muted);flex:none;}

/* ============================ login (per-persona mock entry; themed via body[data-portal]) ============================ */
.loginbadge{display:flex;width:fit-content;align-items:center;gap:6px;margin:4px auto 0;padding:7px 14px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:700;}
.pwrow{position:relative;}
.pwrow .field{padding-right:50px;}
.pwtog{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;
  color:var(--muted);display:grid;place-items:center;cursor:pointer;border-radius:var(--r-sm);}
.pwtog:hover{color:var(--accent);}
/* farmer login: bigger, dignified inputs (≥44px, low-literacy friendly) */
body[data-portal="farmer"] .login .field{min-height:56px;font-size:17px;}

/* ============================ a11y · responsive ============================ */
:where(button,a,input,.role,.mod,.portal,.vrec,.play):focus-visible{outline:none;
  box-shadow:0 0 0 3px var(--accent-soft),0 0 0 5px var(--accent);border-radius:12px;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}
/* small phones (<=359px): no overflow, let the operator input row wrap */
@media (max-width:359px){
  .screen{padding:16px 16px 124px;}
  .home-hero h1{font-size:30px;}
  .row{flex-wrap:wrap;} .row>*{flex:1 1 100%;} #opConfirm{width:100%;}
  .kv{gap:10px;}
}
/* desktop: frame the phone canvas intentionally */
@media (min-width:520px){
  body{background:#e9eee7;}
  #app{border-left:1px solid var(--line);border-right:1px solid var(--line);}
}


/* ===== Kasekor in-lesson chat (lesson-scoped helper) ===== */
.kchat{border:1px solid var(--line,#e3e8e0);border-radius:16px;background:var(--card,#fff);padding:12px;margin-top:6px}
.kc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.kc-name{display:inline-flex;align-items:center;gap:6px;color:var(--accent-d,var(--accent,#1f7a4d));font-size:15px}
.kc-by{font-size:11px;color:var(--ink-2,#6b7280)}
.kc-msgs{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto;padding:4px 2px}
.kc-empty{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink-2,#6b7280);font-size:13px;text-align:center;padding:18px 8px}
.kc-msg{max-width:86%;padding:9px 12px;border-radius:14px;font-size:16px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.kc-msg.user{align-self:flex-end;background:var(--accent,#1f7a4d);color:#fff;border-bottom-right-radius:4px}
.kc-msg.bot{align-self:flex-start;background:var(--bg,#f1f4ef);color:var(--ink,#1a2b22);border-bottom-left-radius:4px}
.kc-msg.bot.busy{color:var(--ink-2,#6b7280);display:inline-flex;align-items:center;gap:6px}
.kc-msg.bot.esc{background:#fff6e6;border:1px solid #f0d9a8;color:#7a5a12}
.kc-chips{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 8px}
.kc-bar{display:flex;align-items:center;gap:7px}
.kc-bar input{flex:1;min-width:0;height:44px;border:1px solid var(--line,#e3e8e0);border-radius:12px;padding:0 12px;font:inherit;font-size:16px;background:#fff;color:var(--ink,#1a2b22)}
.kc-mic,.kc-send{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border:none;border-radius:12px;cursor:pointer}
.kc-mic{background:var(--bg,#eef2ec);color:var(--accent-d,var(--accent,#1f7a4d))}
.kc-mic.rec{background:#e5484d;color:#fff;animation:kpulse 1s infinite}
.kc-send{background:var(--accent,#1f7a4d);color:#fff}
@keyframes kpulse{0%,100%{opacity:1}50%{opacity:.5}}
.kc-note{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-2,#6b7280);margin:9px 2px 0}

/* ============================================================================
   WAVE 2 — warm & premium polish (2026-06-25). Krama strip, deeper CTA, gold
   warmth, dominant role card, today-card, premium login. ADDITIVE (overrides
   earlier same-specificity rules by source order). Claim-safe, offline, CSS-only.
   ========================================================================== */

/* per-portal primary-button glow (warm depth, themed to the active accent) */
:root{ --btn-shadow:0 6px 16px rgba(31,122,77,.22),0 1px 2px rgba(38,33,27,.08); }
body[data-portal="op"]{    --btn-shadow:0 6px 16px rgba(18,94,105,.22),0 1px 2px rgba(38,33,27,.08); }
body[data-portal="buyer"]{ --btn-shadow:0 6px 16px rgba(148,96,18,.20),0 1px 2px rgba(38,33,27,.08); }
.btn{ box-shadow:var(--btn-shadow); }
.btn:hover{ transform:translateY(-1px); box-shadow:0 11px 24px rgba(38,33,27,.18); }
.btn:active{ transform:scale(.97); }
.btn.secondary,.btn.ghost{ box-shadow:var(--sh-1); }
.btn.secondary:hover,.btn.ghost:hover{ transform:none; box-shadow:var(--sh-1); }

/* krama strip — woven green+gold Cambodia-first signature on the app shell */
.krama{ height:4px; width:100%; border:0;
  background:repeating-linear-gradient(135deg, var(--accent) 0 9px, var(--gold) 9px 12px, var(--accent-d) 12px 21px, var(--gold-soft) 21px 24px); }
.topbar::before{ display:none; }   /* solid brand bars replace the krama stripe here */

/* ===== SOLID BRAND NAV BARS (per-portal accent; premium, focused) ===== */
.topbar{ background:var(--accent); border-bottom-color:transparent; backdrop-filter:none; }
.topbar .title b{ color:#fff; }
.topbar .title .sub{ color:rgba(255,255,255,.74); }
.topbar .back{ color:#fff; }
.topbar .back:hover{ background:rgba(255,255,255,.16); }
.topbar .avatar{ background:rgba(255,255,255,.22); color:#fff; }
.topbar .langpill,
body .topbar .langpill{ background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.30); color:#fff; }
.topbar .langpill:hover{ background:rgba(255,255,255,.28); filter:none; }
.tabbar{ background:var(--accent); border-top-color:transparent; backdrop-filter:none; }
.tabbar a{ color:rgba(255,255,255,.80); }
.tabbar a.on, .tabbar a.on svg{ color:#fff; }
.tabbar a:active{ background:rgba(255,255,255,.14); }

/* HOME — dominant farmer lead + compact secondaries */
.portal.lead{ padding:20px; border:1.5px solid var(--gold-soft); box-shadow:0 16px 32px rgba(18,38,28,.14); }
.portal.lead .pic{ width:60px; height:60px; }
.portal.lead .pt b{ font-size:19px; }
.starttag{ display:inline-block; font-family:var(--en-font); font-size:10px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:#6f4d08; background:var(--gold-soft); padding:2px 9px; border-radius:999px; margin-bottom:5px; }
.portals-2{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:11px 18px 0; }
.portal.compact{ flex-direction:column; align-items:flex-start; gap:9px; padding:15px; }
.portal.compact .pic{ width:46px; height:46px; }
.portal.compact .go{ display:none; }
.portal.compact .pt b{ font-size:14.5px; line-height:1.35; }

/* FARMER HOME — the one action, premium */
.fh-greet{ margin:4px 4px 14px; font-size:16px; color:var(--ink-2); }
.fh-greet b{ color:var(--ink); }
.todaycard{ position:relative; overflow:hidden; padding:18px 18px 18px 22px;
  background:linear-gradient(160deg,var(--accent-tint),var(--surface)); border:1px solid var(--accent-soft);
  border-radius:var(--r-lg); box-shadow:var(--sh-card); }
.todaycard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(var(--accent),var(--gold)); }
.todaycard .td-label{ display:block; font-size:var(--t-label); font-weight:800; color:var(--accent-d); text-transform:uppercase; letter-spacing:.03em; }
.todaycard .td-lesson{ font-size:17px; font-weight:700; color:var(--ink); margin:7px 0 14px; line-height:1.45; }
.todaycard .btn{ margin-top:0; }
/* supply-request card on the farmer home: gold-forward so the actionable co-op inbox
   reads as distinct from the calm green lesson card (avoids two identical primary cards) */
.todaycard.fs-home{ background:linear-gradient(160deg,var(--gold-soft),var(--surface)); border-color:var(--gold-soft); }
.todaycard.fs-home::before{ background:var(--gold); }
.todaycard.fs-home .td-label{ color:var(--gold-d); }
.prog-slim{ display:flex; align-items:center; gap:11px; margin:16px 4px 0; font-size:13px; color:var(--muted); }
.prog-slim .meter{ flex:1; }

/* LOGIN — premium "continue as <name>" */
.logincard{ margin-top:18px; }
.idrow{ display:flex; align-items:center; gap:13px; }
.idrow .id-ic{ width:50px; height:50px; border-radius:var(--r); display:grid; place-items:center; color:#fff; flex:none;
  background:linear-gradient(150deg,var(--accent),var(--accent-d)); box-shadow:var(--sh-emboss); }
.idrow .id-t b{ font-size:17px; display:block; line-height:1.35; }
.idrow .id-t span{ font-size:var(--t-cap); color:var(--muted); }
.login-demo-tiny{ text-align:center; font-size:var(--t-micro); color:var(--muted); margin:14px 0 0; display:flex; align-items:center; justify-content:center; gap:5px; }

/* empty-state warmth (gold disc instead of grey) */
.emptystate .disc{ background:var(--gold-soft); color:var(--gold-d); }

/* tonal band — groups dense workspace content (operator/buyer) */
.band{ background:var(--accent-tint); border:1px solid var(--accent-soft); border-radius:var(--r-lg); padding:6px 14px 14px; }
.band>.section:first-child{ margin-top:16px; }

/* quiet gated side-door link on the farmer front door (officer/buyer entry) */
.partner-link{ display:flex; align-items:center; justify-content:center; gap:7px; margin:18px auto 0; min-height:44px; color:var(--muted); font-size:13.5px; font-weight:600; }
.partner-link:hover{ color:var(--ink-2); }


/* ===== WAVE: View Transitions, toast, native tab accent (2026-06-25) ===== */
html.vt .screen{ animation:none; }
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){ animation:vt-old .2s ease both; }
  ::view-transition-new(root){ animation:vt-new .28s cubic-bezier(.4,0,.2,1) both; }
}
@keyframes vt-old{ to{ opacity:0; } }
@keyframes vt-new{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.toast{ position:fixed; left:50%; bottom:86px; transform:translateX(-50%) translateY(12px); z-index:200; max-width:86%;
  background:var(--ink); color:#fff; font-size:13.5px; font-weight:600; line-height:1.5; padding:11px 17px; border-radius:var(--r-pill);
  box-shadow:var(--sh-raised); opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none; text-align:center; }
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
.tabbar a.on, .tabbar a.on svg{ color:#fff; }   /* solid brand tab bar: active = white */
/* B2B portals (officer ops console + buyer procurement console): tabular figures = professional register */
body[data-portal="buyer"], body[data-portal="op"]{ font-variant-numeric:tabular-nums; }


/* ===== Buyer procurement console: clean dense data-list (no avatars, tabular qty) ===== */
.proc-list{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-1); margin-top:10px; }
.proc-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-top:1px solid var(--line-2); min-height:56px; }
.proc-row:first-child{ border-top:0; }
.proc-row:active{ background:var(--accent-tint); }
.pr-main{ min-width:0; display:flex; flex-direction:column; }
.pr-main b{ font-size:14.5px; line-height:1.35; }
.pr-main small{ color:var(--muted); font-size:12px; margin-top:1px; font-variant-numeric:tabular-nums; }
.pr-side{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:none; }
.pr-qty{ font-size:16px; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* ===== Access (staff & buyer) cards — clean, balanced (2026-06-25) ===== */
.access-card{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:15px 16px; box-shadow:var(--sh-card); margin-top:12px; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.access-card:hover{ transform:translateY(-1px); box-shadow:var(--sh-2); }
.access-card:active{ transform:scale(.99); background:var(--accent-tint); }
.access-card .ac-ic{ width:48px; height:48px; border-radius:var(--r-md); display:grid; place-items:center; color:#fff; flex:none; box-shadow:var(--sh-emboss); }
.access-card.op .ac-ic{ background:linear-gradient(150deg,#2196a6,#125e69); }
.access-card.buyer .ac-ic{ background:linear-gradient(150deg,#dca233,#a4690f); }
.access-card .ac-t{ flex:1; min-width:0; }
.access-card .ac-t b{ font-size:16px; display:block; line-height:1.4; }
.access-card .ac-t span{ font-size:12.5px; color:var(--muted); line-height:1.5; display:block; margin-top:3px; }
.access-card .ac-go{ color:#c4cdc6; flex:none; }
.access-note{ display:flex; gap:9px; align-items:flex-start; background:var(--accent-tint); border:1px solid var(--accent-soft); border-radius:var(--r-md); padding:12px 14px; margin-top:18px; font-size:12.5px; color:var(--ink-2); line-height:1.55; }
.access-note svg{ color:var(--accent); flex:none; margin-top:2px; }

/* business-model comparison table (#/biz — Model B) */
.bizmodel{padding:15px 15px 13px;}
.bzc-head,.bzc-row{display:grid;grid-template-columns:1fr 84px 84px;gap:6px;align-items:center;}
.bzc-head{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--line);}
.bzc-head>span:not(.bzc-k){text-align:right;} .bzc-head .bzc-us{color:var(--accent);}
.bzc-row{padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13px;}
.bzc-row .bzc-k{color:var(--ink-2);font-weight:600;}
.bzc-row .bzc-mid{text-align:right;color:var(--muted);font-size:12px;}
.bzc-row .bzc-us{text-align:right;font-weight:800;color:var(--accent);}
.bzc-row.good .bzc-us{color:var(--success);}
.bzc-quals{margin-top:11px;display:flex;flex-direction:column;gap:7px;}
.bzc-quals p{margin:0;font-size:12px;color:var(--ink-2);line-height:1.5;display:flex;gap:6px;align-items:flex-start;}
.bzc-quals .ic{color:var(--success);margin-top:2px;flex:none;}
.bzc-split{margin-top:12px;background:var(--accent-soft);color:var(--accent-d);border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:7px;}
.bzc-honest{margin:11px 0 0;font-size:11.5px;color:var(--muted);line-height:1.55;}

/* tiered fee — "how the fee scales" */
.bztiers{padding:16px 15px 14px;}
.bzt-head{font-weight:800;font-size:15.5px;color:var(--ink);margin:0 0 8px;line-height:1.4;}
.bzt-body{font-size:13px;color:var(--ink-2);margin:0 0 6px;line-height:1.6;}
.bzt-rows{display:flex;flex-direction:column;}
.bzt-row{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line-2);}
.bzt-fee{flex:none;min-width:74px;font-weight:800;color:var(--accent-d);font-size:13.5px;}
.bzt-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.bzt-info b{font-size:16px;color:var(--ink);}
.bzt-note{font-size:12px;color:var(--muted);line-height:1.5;}
.bzt-covers{display:flex;gap:7px;align-items:flex-start;margin:14px 0 0;font-size:12px;color:var(--ink-2);line-height:1.6;}
.bzt-covers svg{flex:none;margin-top:2px;}
.bzt-pending{margin:8px 0 0;font-size:11.5px;color:var(--muted);font-style:italic;}

/* Bakong / KHQR sample payment card */
.khqr{max-width:300px;margin:6px auto 0;border-radius:16px;overflow:hidden;box-shadow:var(--sh-card);border:1px solid var(--line);background:#fff;}
.khqr-band{background:#E21A23;color:#fff;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;}
.khqr-logo{font-size:18px;font-weight:800;letter-spacing:.04em;}
.khqr-by{font-size:11px;opacity:.92;}
.khqr-body{padding:18px 16px 20px;text-align:center;}
.khqr-mer{font-size:14px;font-weight:700;color:var(--ink);}
.khqr-amt{font-size:29px;font-weight:800;color:var(--ink);margin:8px 0 2px;font-variant-numeric:tabular-nums;}
.khqr-amt span{font-size:17px;font-weight:700;color:var(--muted);}
.khqr-usd{font-size:13px;color:var(--muted);margin-bottom:15px;}
.khqr-qr{display:inline-block;padding:10px;background:#fff;border:1px solid var(--line-2);border-radius:10px;line-height:0;}
.khqr-scan{display:flex;gap:6px;align-items:center;justify-content:center;margin:14px 0 0;font-size:12.5px;color:var(--ink-2);}