/* ==========================================================================
   KLINEA — working application UI. Reuses tokens/fonts from styles.css.
   Data-driven scoring engine, ICD-10 dictionary, drug interactions,
   antropometri z-scores, clinical calculators. Light + dark.
   ========================================================================== */

/* tone colors for interpretation badges (theme-aware) */
:root {
  --t-ok-bg:#E4F5EE; --t-ok-ink:#0A6B4E; --t-ok-line:#B7E4D2;
  --t-warn-bg:#FCF1DA; --t-warn-ink:#8A5A08; --t-warn-line:#EFD8A6;
  --t-danger-bg:#FCE7DE; --t-danger-ink:#9A3D1B; --t-danger-line:#F0C3AE;
  --t-crit-bg:#FBE0E0; --t-crit-ink:#9E2231; --t-crit-line:#F0B7BC;
  --t-neutral-bg:var(--surface-2); --t-neutral-ink:var(--ink-soft); --t-neutral-line:var(--line-strong);
  --t-accent-bg:#DEF3F0; --t-accent-ink:var(--teal-text); --t-accent-line:#B3E0D9;
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --t-ok-bg:rgba(45,212,191,.13); --t-ok-ink:#6FE7D3; --t-ok-line:rgba(45,212,191,.28);
  --t-warn-bg:rgba(230,178,74,.14); --t-warn-ink:#F0C878; --t-warn-line:rgba(230,178,74,.3);
  --t-danger-bg:rgba(232,130,80,.15); --t-danger-ink:#F0A579; --t-danger-line:rgba(232,130,80,.32);
  --t-crit-bg:rgba(232,90,110,.16); --t-crit-ink:#F090A0; --t-crit-line:rgba(232,90,110,.34);
  --t-neutral-bg:var(--surface-2); --t-neutral-ink:var(--ink-soft); --t-neutral-line:var(--line-strong);
  --t-accent-bg:rgba(45,212,191,.12); --t-accent-ink:var(--teal-text); --t-accent-line:rgba(45,212,191,.26);
}

/* overflow-x: clip (not hidden) — hidden makes body a scroll container and breaks position:sticky */
body.app { background:var(--bg); color:var(--ink); overflow-x:hidden; overflow-x:clip; }

/* ---------- App views live in the landing's centered column ---------- */
.nav a.on { color:var(--ink); background:var(--surface); }
.app-sec { padding-top: calc(var(--header-h) + clamp(26px,4vw,46px)); padding-bottom: clamp(56px,8vw,96px); }
.crumb-row { display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.crumb { font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; color:var(--ink-faint); }
.back-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 13px 7px 10px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--card); color:var(--ink-soft); cursor:pointer;
  font-size:13px; font-weight:600; flex:none; transition:border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); }
.back-btn svg { width:15px; height:15px; }
.back-btn:hover { border-color:var(--teal); color:var(--teal-text); transform:translateX(-2px); box-shadow:var(--shadow-sm); }
.back-btn:active { transform:translateX(-1px) scale(.98); }
.crumb a { color:var(--ink-faint); text-decoration:none; }
.crumb a:hover { color:var(--teal-text); text-decoration:underline; }
.view-h { font-size:clamp(30px,3.9vw,52px); line-height:1.04; letter-spacing:-.032em; font-weight:700; text-wrap:balance; }
.view-sub { margin-top:12px; color:var(--ink-soft); font-size:clamp(16px,1.35vw,19px); line-height:1.55; max-width:60ch; text-wrap:pretty; }

/* ---------- Home (landing hero + readout + editorial module index) ---------- */
.home-search { margin-top:32px; display:inline-flex; align-items:center; gap:11px; height:54px; padding:0 20px;
  border:1px solid var(--line-strong); border-radius:14px; background:var(--card); color:var(--ink-faint);
  font-size:15.5px; cursor:text; box-shadow:var(--shadow-sm); max-width:100%;
  transition:border-color .18s var(--ease), color .18s var(--ease); }
.home-search:hover { border-color:var(--teal); color:var(--ink-soft); }
.home-search svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; flex:none; }
.home-search kbd { margin-left:10px; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint);
  border:1px solid var(--line-strong); border-radius:6px; padding:3px 7px; }
a.feat { text-decoration:none; color:inherit; display:block; transition:padding-left .2s var(--ease); }
a.feat:hover { padding-left:8px; }
a.feat:hover h5 { color:var(--teal-text); }
.feat h5 { transition:color .16s var(--ease); }
.feat .cnt { font-size:12.5px; letter-spacing:0; color:var(--ink-faint); flex:none; white-space:nowrap; }

/* ---------- Tool list ---------- */
.chip { font-family:var(--font-mono); font-size:12px; letter-spacing:.01em; padding:7px 13px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--card); color:var(--ink-soft); cursor:pointer;
  transition:all .15s; white-space:nowrap; }
.chip:hover { border-color:var(--teal); color:var(--ink); }
.chip.on { background:var(--btn-primary-bg); color:var(--btn-primary-ink); border-color:transparent; }

/* Specialty filters: editorial text tabs, not pills */
.filters { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px clamp(18px,2.2vw,30px);
  margin:26px 0 6px; padding-bottom:15px; border-bottom:1px solid var(--line); }
.filters .chip { font-family:var(--font-body); font-size:15px; font-weight:500; letter-spacing:-.006em;
  background:none; border:0; border-radius:0; padding:6px 0; color:var(--ink-faint); position:relative;
  white-space:nowrap; transition:color .16s var(--ease); }
.filters .chip::after { content:""; position:absolute; left:0; right:100%; bottom:-1px; height:2px;
  border-radius:2px; background:var(--teal); transition:right .22s var(--ease); }
.filters .chip:hover { color:var(--ink); }
.filters .chip.on { color:var(--teal-text); font-weight:600; }
.filters .chip.on::after { right:0; }
.list-search { display:flex; align-items:center; gap:10px; height:44px; padding:0 14px; margin:16px 0 4px;
  border:1px solid var(--line-strong); border-radius:11px; background:var(--card); }
.list-search:focus-within { border-color:var(--teal); }
.list-search svg { width:17px; height:17px; stroke:var(--ink-faint); fill:none; stroke-width:2; }
.list-search input { border:none; background:none; outline:none; font:inherit; color:var(--ink); flex:1; }
.rows { margin-top:10px; }
.list-group { margin-top:6px; }
.list-group-h { font-size:13px; font-weight:600; letter-spacing:.01em;
  color:var(--teal-text); padding:26px 4px 6px; margin-top:14px; border-top:1px solid var(--line-strong); }
.list-group:first-of-type .list-group-h { margin-top:0; }
.list-group .row:first-of-type { border-top:none; }
.row { display:flex; align-items:baseline; gap:14px; padding:16px 4px; border-top:1px solid var(--line);
  text-decoration:none; color:inherit; cursor:pointer; }
.row:hover { background:var(--surface); }
.row:hover .row-name { color:var(--teal-text); }
.row-name { font-size:16px; font-weight:600; letter-spacing:-.01em; }
.row-blurb { margin-top:3px; font-size:13.5px; color:var(--ink-soft); line-height:1.45; }
.row-sp { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); flex:none; white-space:nowrap; }
.empty { padding:40px 4px; color:var(--ink-faint); font-size:15px; }

/* ---------- Tool detail / scoring engine ---------- */
.tool-wrap { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(24px,3vw,44px); align-items:start; }
.tool-fields { }
.fld { padding:15px 0; border-top:1px solid var(--line); }
.fld:first-child { border-top:none; }
.fld > label.q { display:block; font-size:15px; line-height:1.45; color:var(--ink); margin-bottom:2px; font-weight:500; }
.fld .hint { font-size:12.5px; color:var(--ink-faint); }
.chk { display:flex; align-items:flex-start; gap:12px; cursor:pointer; padding:11px 0; }
.chk input { margin-top:3px; width:19px; height:19px; accent-color:var(--teal); flex:none; cursor:pointer; }
.chk .lab { font-size:15px; line-height:1.45; color:var(--ink); }
.radio-set { display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.radio-opt { font-size:14px; padding:9px 14px; border:1px solid var(--line-strong); border-radius:10px;
  background:var(--card); color:var(--ink-soft); cursor:pointer; transition:all .14s; }
.radio-opt:hover { border-color:var(--teal); }
.radio-opt.on { border-color:var(--teal); background:var(--t-accent-bg); color:var(--ink); font-weight:600; }
.num-in { margin-top:9px; display:flex; align-items:center; gap:10px; }
.num-in input { width:130px; height:42px; padding:0 12px; border:1px solid var(--line-strong); border-radius:10px;
  background:var(--card); color:var(--ink); font:inherit; outline:none; }
.num-in input:focus { border-color:var(--teal); }
.num-in .unit { font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); }

/* result panel — reacts to the clinical tone (traffic-light feedback) */
.result-panel { position:sticky; top:calc(var(--header-h) + 24px); border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow-md); overflow:hidden;
  --tone-ink:var(--ink); --tone-bg:var(--surface); --tone-line:var(--line-strong); }
.result-panel[data-tone="ok"]     { --tone-ink:var(--t-ok-ink);     --tone-bg:var(--t-ok-bg);     --tone-line:var(--t-ok-line); }
.result-panel[data-tone="warn"]   { --tone-ink:var(--t-warn-ink);   --tone-bg:var(--t-warn-bg);   --tone-line:var(--t-warn-line); }
.result-panel[data-tone="danger"] { --tone-ink:var(--t-danger-ink); --tone-bg:var(--t-danger-bg); --tone-line:var(--t-danger-line); }
.result-panel[data-tone="crit"]   { --tone-ink:var(--t-crit-ink);   --tone-bg:var(--t-crit-bg);   --tone-line:var(--t-crit-line); }
.result-panel[data-tone="accent"] { --tone-ink:var(--t-accent-ink); --tone-bg:var(--t-accent-bg); --tone-line:var(--t-accent-line); }
.result-panel::before { content:""; display:block; height:4px; background:var(--tone-ink);
  opacity:.9; transition:background .35s var(--ease); }
.rp-head { padding:20px 20px 18px; border-bottom:1px solid var(--line); background:var(--tone-bg);
  transition:background .35s var(--ease); }
.rp-head .lbl { font-size:12.5px; font-weight:600; letter-spacing:.01em; color:var(--ink-faint); }
.rp-score { font-size:clamp(46px,4vw,56px); font-weight:700; letter-spacing:-.045em; line-height:1; margin-top:8px;
  color:var(--tone-ink); font-variant-numeric:tabular-nums; transition:color .35s var(--ease); }
.rp-score small { font-size:14px; font-weight:500; color:var(--ink-faint); font-family:var(--font-mono); letter-spacing:0; }
.rp-body { padding:16px 18px; }
.verdict { display:inline-block; font-weight:600; font-size:14px; padding:6px 12px; border-radius:999px; line-height:1.3; }
.verdict.ok{background:var(--t-ok-bg);color:var(--t-ok-ink);border:1px solid var(--t-ok-line);}
.verdict.warn{background:var(--t-warn-bg);color:var(--t-warn-ink);border:1px solid var(--t-warn-line);}
.verdict.danger{background:var(--t-danger-bg);color:var(--t-danger-ink);border:1px solid var(--t-danger-line);}
.verdict.crit{background:var(--t-crit-bg);color:var(--t-crit-ink);border:1px solid var(--t-crit-line);}
.verdict.neutral{background:var(--t-neutral-bg);color:var(--t-neutral-ink);border:1px solid var(--t-neutral-line);}
.verdict.accent{background:var(--t-accent-bg);color:var(--t-accent-ink);border:1px solid var(--t-accent-line);}
.advice { margin-top:12px; font-size:14px; line-height:1.55; color:var(--ink-soft); }
.guideline-note { margin-top:16px; padding:14px 16px; border-radius:var(--r-sm); background:var(--surface);
  font-size:13px; line-height:1.55; color:var(--ink-soft); border:1px solid var(--line); }
.guideline-note b { color:var(--ink); font-weight:600; }
.reset-btn { margin-top:14px; font-family:var(--font-mono); font-size:12px; color:var(--ink-faint);
  background:none; border:none; cursor:pointer; padding:4px 0; }
.reset-btn:hover { color:var(--teal-text); }

/* ---------- ICD-10 ---------- */
.icd-row { display:flex; align-items:baseline; gap:16px; padding:13px 4px; border-top:1px solid var(--line); }
.icd-code { font-family:var(--font-mono); font-size:14px; font-weight:500; color:var(--teal-text); flex:none; min-width:76px; }
.icd-nm { font-size:15px; color:var(--ink); }
.icd-en { font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
.icd-copy { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint);
  border:1px solid var(--line-strong); border-radius:7px; padding:5px 10px; background:var(--card); cursor:pointer; flex:none; }
.icd-copy:hover { border-color:var(--teal); color:var(--teal-text); }
.icd-copy.done { color:var(--t-ok-ink); border-color:var(--t-ok-line); }

/* ---------- Drug interactions ---------- */
.drug-pick { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 6px; }
.drug-pick .chip { font-family:var(--font-body); font-size:13.5px; font-weight:500; letter-spacing:-.006em;
  padding:8px 14px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.drug-pick .chip:hover { border-color:var(--line-strong); background:var(--surface-2); color:var(--ink); }
.drug-pick .chip.on { background:var(--t-accent-bg); border-color:var(--teal); color:var(--teal-text); font-weight:600; }
.ix-card { border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; margin-top:12px; background:var(--card); }
.ix-card .pair { font-weight:600; font-size:15.5px; }
.ix-sev { display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:0;
  padding:3px 10px; border-radius:999px; margin-left:8px; vertical-align:middle; }
.ix-sev.kontra,.ix-sev.crit{background:var(--t-crit-bg);color:var(--t-crit-ink);}
.ix-sev.mayor,.ix-sev.danger{background:var(--t-danger-bg);color:var(--t-danger-ink);}
.ix-sev.sedang,.ix-sev.warn{background:var(--t-warn-bg);color:var(--t-warn-ink);}
.ix-sev.minor,.ix-sev.ok{background:var(--t-ok-bg);color:var(--t-ok-ink);}
.ix-card .mech { margin-top:8px; font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
.ix-card .mech b { color:var(--ink); font-weight:600; }

/* ---------- Calculators / antropometri ---------- */
.calc-form { max-width:520px; }
.result-block { margin-top:22px; padding:20px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.result-block .big { font-size:30px; font-weight:700; letter-spacing:-.03em; }
.result-block .big small { font-family:var(--font-mono); font-size:14px; font-weight:500; color:var(--ink-faint); letter-spacing:0; }
.result-line { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-top:1px solid var(--line); font-size:14.5px; }
.result-line:first-child { border-top:none; }
.result-line b { font-weight:600; }

/* ---------- Command palette overlay ---------- */
.cmdk-back { position:fixed; inset:0; z-index:100; background:rgba(6,20,22,.42); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; opacity:0; pointer-events:none; transition:opacity .16s; }
.cmdk-back.open { opacity:1; pointer-events:auto; }
.cmdk { width:min(620px,92vw); background:var(--card); border:1px solid var(--line-strong); border-radius:16px;
  box-shadow:var(--shadow-lg); overflow:hidden; transform:translateY(-8px); transition:transform .18s var(--ease); }
.cmdk-back.open .cmdk { transform:translateY(0); }
.cmdk-in { display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); }
.cmdk-in svg { width:19px; height:19px; stroke:var(--ink-faint); fill:none; stroke-width:2; flex:none; }
.cmdk-in input { border:none; background:none; outline:none; font:inherit; font-size:16.5px; color:var(--ink); flex:1; }
.cmdk-res { max-height:52vh; overflow-y:auto; padding:6px; }
.cmdk-item { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:10px; cursor:pointer; text-decoration:none; color:inherit; }
.cmdk-item.sel, .cmdk-item:hover { background:var(--surface-2); }
.cmdk-item .kk { font-size:11px; font-weight:600; letter-spacing:0;
  color:var(--ink-faint); border:1px solid var(--line); border-radius:6px; padding:2px 8px; flex:none; }
.cmdk-item .it-main { min-width:0; }
.cmdk-item .it-t { display:block; font-size:15px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-item .it-m { display:block; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-item .go { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); flex:none; }
.cmdk-empty { padding:34px; text-align:center; color:var(--ink-faint); font-size:14.5px; }
.cmdk-foot { display:flex; gap:16px; padding:10px 16px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); }

/* ---------- Mobile ---------- */
@media (max-width:860px) {
  .tool-wrap { grid-template-columns:1fr; }
  .result-panel { position:static; }
}

/* ==========================================================================
   Designed component language — crafted cards, not hairline minimalism.
   ========================================================================== */
.tool-fields { display:flex; flex-direction:column; gap:6px; }
.tool-fields .fld { border-top:none; padding:0; }
.tool-fields .chk { align-items:center; gap:12px; padding:11px 14px; border:1px solid var(--line);
  border-radius:11px; background:var(--card);
  transition:border-color .16s var(--ease), background .16s var(--ease); }
.tool-fields .chk:hover { border-color:var(--line-strong); background:var(--surface); }
.tool-fields .chk:has(input:checked) { border-color:var(--teal); background:var(--t-accent-bg); }
.tool-fields .chk input { margin-top:0; width:18px; height:18px; }
.tool-fields .chk .lab { font-weight:500; font-size:14.5px; }
.tool-fields .fld:has(.radio-set), .tool-fields .fld:has(.num-in) {
  border:1px solid var(--line); border-radius:11px; background:var(--card); padding:13px 14px;
  transition:border-color .16s var(--ease); }
.tool-fields .fld:has(.num-in):focus-within { border-color:var(--teal); }
.tool-fields .fld > label.q, .tool-fields .fld > .q { margin-bottom:0; }
.tool-fields .num-in { margin-top:12px; }
.tool-fields .radio-set { margin-top:12px; }
.risk-track { display:flex; gap:5px; padding:16px 20px 6px; }
.risk-track .seg { flex:1; height:6px; border-radius:4px; background:var(--line-strong); opacity:.45;
  transition:background .3s var(--ease), opacity .3s var(--ease); }
.result-panel .risk-track .seg.on { background:var(--tone-ink); opacity:1; }
.guideline-note { border-radius:12px; }
.rp-body { padding:18px 20px; }
.verdict { font-size:14.5px; padding:7px 14px; }

/* Same crafted-card language for calculators & antropometri inputs */
.calc-form { display:flex; flex-direction:column; gap:10px; max-width:560px; }
.calc-form .fld { border-top:none; padding:16px 17px; border:1px solid var(--line); border-radius:14px;
  background:var(--card); box-shadow:var(--shadow-sm); transition:border-color .16s var(--ease); }
.calc-form .fld:focus-within { border-color:var(--teal); }
.calc-form .fld > .q { margin-bottom:0; font-weight:500; }
.calc-form .num-in, .calc-form .radio-set { margin-top:12px; }

/* ===== Tidy pass: no nested boxes. Num/radio are clean full-width controls;
   only selectable checkboxes remain cards. Even rhythm, no dead space. ===== */
.calc-form { gap:18px; }
.tool-fields { gap:10px; }
:is(.tool-fields, .calc-form) .fld:has(.num-in),
:is(.tool-fields, .calc-form) .fld:has(.radio-set) {
  border:none !important; background:none !important; box-shadow:none !important; padding:0 !important; }
:is(.tool-fields, .calc-form) .fld:has(.num-in) > .q,
:is(.tool-fields, .calc-form) .fld:has(.radio-set) > .q { margin-bottom:11px; font-weight:500; }
/* full-width number field with unit suffix inside */
.num-in { display:flex; align-items:center; gap:10px; height:50px; padding:0 16px; margin-top:0;
  border:1px solid var(--line-strong); border-radius:12px; background:var(--card); box-shadow:var(--shadow-sm);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
.num-in:focus-within { border-color:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 14%, transparent); }
.num-in input { border:none; background:none; flex:1; width:auto; min-width:0; height:100%; padding:0; font-size:16px; }
.num-in .unit { flex:none; }
/* full-width segmented choice control */
:is(.tool-fields, .calc-form) .radio-set { display:flex; flex-wrap:wrap; gap:8px; margin-top:0; }
:is(.tool-fields, .calc-form) .radio-opt { flex:1 1 auto; min-width:104px; text-align:center; padding:12px 16px;
  border-radius:12px; font-size:14.5px; }
/* Descriptive options: clean vertical radio list with real radio dots. */
:is(.tool-fields, .calc-form) .radio-set.stack { flex-direction:column; gap:8px; }
:is(.tool-fields, .calc-form) .radio-set.stack .radio-opt { flex:1 1 100%; width:100%; text-align:left;
  display:flex; align-items:center; gap:13px; padding:13px 16px; font-weight:500; line-height:1.4; }
.radio-set.stack .ro-dot { flex:none; width:19px; height:19px; border-radius:50%; border:2px solid var(--line-strong);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
.radio-set.stack .radio-opt:hover .ro-dot { border-color:var(--teal); }
.radio-set.stack .radio-opt.on .ro-dot { border-color:var(--teal);
  background:radial-gradient(circle at center, var(--teal) 0 4.5px, transparent 5.5px); }
.radio-set.stack .radio-opt.on { font-weight:600; }

/* ===== Colourful module dashboard — each module its own identity ===== */
.mod-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:18px; margin-top:clamp(8px,2vw,20px); }
.mod-card { display:flex; gap:16px; align-items:flex-start; padding:22px 22px 24px; border-radius:20px;
  background:var(--card); border:1px solid var(--line); text-decoration:none; color:inherit; box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease-expo, cubic-bezier(.16,1,.3,1)), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.mod-card:hover { transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--c) 45%, var(--line));
  box-shadow:0 12px 26px -10px color-mix(in srgb, var(--c) 40%, transparent), 0 36px 70px -34px color-mix(in srgb, var(--c) 45%, transparent); }
.mc-ic { width:54px; height:54px; border-radius:16px; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg, color-mix(in srgb, var(--c) 82%, white 18%), var(--c));
  box-shadow:0 8px 18px -6px color-mix(in srgb, var(--c) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.35); }
.mc-ic svg { width:27px; height:27px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mc-body { display:flex; flex-direction:column; gap:7px; min-width:0; }
.mc-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.mc-top b { font-size:18px; font-weight:700; letter-spacing:-.018em; color:var(--ink); }
.mc-top em { font-family:var(--font-mono); font-size:11px; font-style:normal; font-weight:600; flex:none; white-space:nowrap;
  color:color-mix(in srgb, var(--c) 78%, var(--ink)); }
.mc-desc { font-size:14px; color:var(--ink-soft); line-height:1.5; }
@media (max-width:560px){ .mod-cards { grid-template-columns:1fr; } }

/* ===== Per-module identity colour threaded through each screen ===== */
#appMain { --mod-c: var(--teal); }
.nav a.on { color:#fff; background:var(--nav-c, var(--teal)); }
.app-sec .filters .chip.on { color:color-mix(in srgb, var(--mod-c) 82%, var(--ink)); }
.app-sec .filters .chip.on::after { background:var(--mod-c); }
.app-sec .list-group-h { color:color-mix(in srgb, var(--mod-c) 80%, var(--ink)); }
.app-sec .row:hover .row-name { color:color-mix(in srgb, var(--mod-c) 82%, var(--ink)); }
.app-sec .crumb a:hover { color:var(--mod-c); }
.app-sec .view-h::after { content:""; display:block; width:52px; height:5px; border-radius:3px;
  background:var(--mod-c); margin-top:18px; }
.icd-code { color:color-mix(in srgb, var(--mod-c) 82%, var(--ink)); }

/* ===== Database Gizi ===== */
.gz-head { display:grid; grid-template-columns:1fr 92px 48px 48px 48px; gap:12px; padding:20px 4px 8px;
  font-size:12px; letter-spacing:0; color:var(--ink-faint);
  border-bottom:1px solid var(--line-strong); }
.gz-head span:not(:first-child) { text-align:right; }
.gz-row { display:grid; grid-template-columns:1fr 92px 48px 48px 48px; gap:12px; align-items:center; padding:13px 4px;
  border-top:1px solid var(--line); }
.gz-row:first-child { border-top:none; }
.gz-nm { display:flex; flex-direction:column; gap:2px; min-width:0; }
.gz-nm b { font-size:15px; font-weight:600; }
.gz-urt { font-size:12.5px; color:var(--ink-faint); }
.gz-kcal { text-align:right; font-family:var(--font-mono); font-size:13px; font-weight:600; color:color-mix(in srgb, var(--mod-c) 80%, var(--ink)); white-space:nowrap; }
.gz-mac { text-align:right; font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); }
@media (max-width:640px){ .gz-head, .gz-row { grid-template-columns:1fr 74px 40px; } .gz-head span:nth-child(4), .gz-head span:nth-child(5), .gz-row .gz-mac:nth-child(4), .gz-row .gz-mac:nth-child(5){ display:none; } }

/* ===== Meal Planner ===== */
.mp-target { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; margin-top:6px; }
.mp-target .mp-hint { grid-column:1/-1; font-size:12.5px; color:var(--ink-faint); margin-top:-4px; }
.mp-totals { margin-top:22px; padding:18px 20px; border-radius:18px; border:1px solid var(--line);
  background:var(--card); box-shadow:var(--shadow-sm); }
.mp-thead { font-size:12px; font-weight:600; color:var(--ink-faint); margin-bottom:12px; }
.mp-bar { margin-bottom:12px; }
.mpb-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:5px; }
.mpb-lab { font-size:14px; font-weight:600; }
.mpb-val { font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); white-space:nowrap; }
.mpb-track { height:8px; border-radius:99px; background:var(--surface); overflow:hidden; }
.mpb-fill { height:100%; border-radius:99px; background:var(--mod-c);
  transition:width .3s var(--ease); }
.mp-bar.over .mpb-fill { background:var(--t-warn-ink); }
.mp-bar.over .mpb-val { color:var(--t-warn-ink); font-weight:600; }
.mp-macros { display:flex; gap:16px; margin-top:4px; }
.mp-macros span { font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); }
.mp-meals { display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.mp-slot { border:1px solid var(--line); border-radius:18px; background:var(--card); padding:18px 20px; box-shadow:var(--shadow-sm); }
.mp-slot-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-bottom:12px; border-bottom:1px solid var(--line); }
.mp-slot-t { font-size:16px; font-weight:700; letter-spacing:-.014em; }
.mp-slot-kcal { font-family:var(--font-mono); font-size:13px; font-weight:600; color:color-mix(in srgb, var(--mod-c) 80%, var(--ink)); }
.mp-items { display:flex; flex-direction:column; }
.mp-empty { font-size:13.5px; color:var(--ink-faint); padding:14px 0 4px; }
.mp-item { display:grid; grid-template-columns:1fr auto auto auto; gap:12px 14px; align-items:center;
  padding:12px 0; border-top:1px solid var(--line); }
.mp-item:first-child { border-top:none; }
.mp-inm { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mp-inm b { font-size:14.5px; font-weight:600; }
.mp-step { display:inline-flex; align-items:center; gap:2px; }
.mp-sb { width:26px; height:26px; border:1px solid var(--line-strong); background:var(--surface);
  border-radius:8px; font-size:15px; font-weight:700; color:var(--ink-soft); cursor:pointer; line-height:1;
  transition:border-color .14s var(--ease), color .14s var(--ease); }
.mp-sb:hover { border-color:var(--mod-c); color:var(--mod-c); }
.mp-sv { min-width:34px; text-align:center; font-family:var(--font-mono); font-size:13px; font-weight:600; }
.mp-ikcal { font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); white-space:nowrap; }
.mp-del { border:none; background:none; color:var(--ink-faint); font-size:14px; cursor:pointer; padding:4px; }
.mp-del:hover { color:var(--t-danger-ink); }
.mp-add { margin-top:14px; width:100%; border:1px dashed var(--line-strong); background:none;
  border-radius:12px; padding:11px; font-size:14px; font-weight:600; color:var(--mod-c); cursor:pointer;
  transition:border-color .14s var(--ease), background .14s var(--ease); }
.mp-add:hover { border-color:var(--mod-c); background:color-mix(in srgb, var(--mod-c) 7%, transparent); }
/* picker overlay */
.mp-picker { position:fixed; inset:0; z-index:60; background:color-mix(in srgb, #0b1220 55%, transparent);
  display:flex; align-items:flex-start; justify-content:center; padding:8vh 16px 16px; backdrop-filter:blur(3px); }
.mpk-panel { width:min(560px,100%); max-height:78vh; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line-strong); border-radius:20px; box-shadow:var(--shadow-lg); overflow:hidden; }
.mpk-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.mpk-ttl { font-size:16px; font-weight:700; }
.mpk-x { border:none; background:none; font-size:16px; color:var(--ink-faint); cursor:pointer; padding:4px 8px; }
.mpk-x:hover { color:var(--ink); }
.mp-picker .list-search { margin:14px 20px 8px; }
.mpk-rows { overflow-y:auto; padding:4px 12px 14px; }
.mpk-row { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left;
  border:none; background:none; padding:12px 10px; border-radius:12px; cursor:pointer; border-top:1px solid var(--line); }
.mpk-row:first-child { border-top:none; }
.mpk-row:hover { background:var(--surface); }
.mpk-nm { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mpk-nm b { font-size:14.5px; font-weight:600; }
.mpk-kcal { font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:color-mix(in srgb, var(--mod-c) 80%, var(--ink)); white-space:nowrap; }
@media (max-width:560px){
  .mp-target { grid-template-columns:1fr; }
  .mp-item { grid-template-columns:1fr auto; grid-template-areas:"nm step" "kcal del"; row-gap:8px; }
  .mp-inm { grid-area:nm; } .mp-step { grid-area:step; justify-self:end; }
  .mp-ikcal { grid-area:kcal; align-self:center; }
  .mp-del { grid-area:del; justify-self:end; align-self:center; }
}

/* ===== Panduan Gizi Klinis ===== */
.nutri-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(360px,1fr)); gap:18px; }
.nutri-card { border:1px solid var(--line); border-radius:18px; background:var(--card); padding:22px; box-shadow:var(--shadow-sm); }
.nutri-top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.nutri-top h4 { font-size:17px; font-weight:700; letter-spacing:-.015em; }
.nutri-cat { font-size:12px; font-weight:600; letter-spacing:.01em; color:var(--mod-c); flex:none; }
.nutri-ringkas { margin-top:8px; font-size:14px; color:var(--ink-soft); line-height:1.5; }
.nutri-target { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.nutri-target span { font-family:var(--font-mono); font-size:11.5px; padding:5px 10px; border-radius:8px;
  background:color-mix(in srgb, var(--mod-c) 12%, transparent); color:color-mix(in srgb, var(--mod-c) 82%, var(--ink)); }
.nutri-list { margin-top:16px; }
.nutri-list h6 { font-size:12px; font-weight:700; letter-spacing:.02em; margin-bottom:6px; }
.nutri-list.ok h6 { color:var(--t-ok-ink); }
.nutri-list.no h6 { color:var(--t-danger-ink); }
.nutri-list ul { margin:0 0 0 18px; }
.nutri-list li { font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin:3px 0; }
.nutri-note { margin-top:14px; font-size:13px; color:var(--ink-soft); line-height:1.5; }

/* ===== Perkembangan Anak ===== */
.pk-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 4px; border-top:1px solid var(--line); }
.pk-row:first-child { border-top:none; }
.pk-item { font-size:15px; }
.pk-by { font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); flex:none; }
.pk-row.due { }
.pk-row.due .pk-item { font-weight:600; }
.pk-row.due .pk-by { color:var(--mod-c); font-weight:600; }

.cmd-chip { white-space:nowrap; }
.cmd-chip-txt { overflow:hidden; text-overflow:ellipsis; }

/* ===== Dosis Obat & Guideline detail ===== */
.detail-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:16px; margin-top:24px; }
.detail-sec { border:1px solid var(--line); border-radius:16px; background:var(--card); padding:18px 20px; box-shadow:var(--shadow-sm);
  border-top:3px solid color-mix(in srgb, var(--mod-c) 55%, var(--line)); }
.detail-sec.no { border-top-color:var(--t-danger-ink); }
.detail-sec.warn { border-top-color:var(--t-warn-ink); }
.detail-sec h5 { font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--ink-faint); margin-bottom:10px; }
.detail-sec.no h5 { color:var(--t-danger-ink); }
.detail-sec.warn h5 { color:var(--t-warn-ink); }
.detail-sec ul { margin:0 0 0 18px; }
.detail-sec li { font-size:14px; line-height:1.55; color:var(--ink-soft); margin:5px 0; }
.detail-refs { margin-top:20px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); }

/* ===== WHO growth chart ===== */
.gc-wrap { margin-top:18px; border:1px solid var(--line); border-radius:16px; background:var(--card); padding:16px 14px 8px; box-shadow:var(--shadow-sm); }
.gc-cap { font-size:12.5px; font-weight:500; letter-spacing:-.005em; color:var(--ink-soft); padding:0 4px 10px; }
.growth-chart { width:100%; height:auto; display:block; }
.gc-band { fill:color-mix(in srgb, var(--mod-c) 12%, transparent); stroke:none; }
.gc-line { fill:none; stroke-width:1.5; }
.gc-sd { stroke:color-mix(in srgb, var(--mod-c) 42%, var(--line-strong)); stroke-dasharray:3 3; }
.gc-median { stroke:var(--mod-c); stroke-width:2; }
.gc-grid { stroke:var(--line); stroke-width:1; }
.gc-tk { fill:var(--ink-faint); font-family:var(--font-mono); font-size:10px; text-anchor:middle; }
.gc-ty { text-anchor:end; }
.gc-cl { fill:var(--ink-faint); font-family:var(--font-mono); font-size:9px; text-anchor:start; }
.gc-title { fill:var(--ink); font-size:12px; font-weight:600; }
.gc-dot { fill:var(--mod-c); stroke:var(--card); stroke-width:2; }
.gc-dot-halo { fill:color-mix(in srgb, var(--mod-c) 22%, transparent); }
.gc-guide { stroke:var(--mod-c); stroke-width:1.2; stroke-dasharray:3 3; opacity:.55; }
.gc-dotval { fill:var(--mod-c); font-size:11px; font-weight:700; text-anchor:middle;
  paint-order:stroke; stroke:var(--card); stroke-width:3.5px; stroke-linejoin:round; }

/* ==========================================================================
   Bento dashboard — varied content cells, not a card grid.
   ========================================================================== */
.bento-sec { padding-top: clamp(4px,1vw,14px); padding-bottom: clamp(6px,2vw,18px); }
.bento { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; }
.b-cell { border:1px solid var(--line); border-radius:22px; background:var(--card); padding:24px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.b-search { grid-column:1/3; grid-row:1; display:flex; flex-direction:column; justify-content:center;
  background:radial-gradient(120% 130% at 0% 0%, color-mix(in srgb,var(--teal) 9%,var(--card)), var(--card) 58%); }
.b-stats { grid-column:3/4; grid-row:1; }
.b-modules { grid-column:4/5; grid-row:1/3; display:flex; flex-direction:column; }
.b-spotlight { grid-column:1/3; grid-row:2; display:flex; flex-direction:column; }
.b-quick { grid-column:3/4; grid-row:2; }

.b-label { font-size:12.5px; font-weight:600; letter-spacing:.01em; color:var(--ink-faint); margin-bottom:14px; }
.b-h1 { font-size:clamp(26px,2.7vw,40px); line-height:1.05; letter-spacing:-.032em; font-weight:700; }
.b-sub { margin-top:12px; color:var(--ink-soft); font-size:15px; line-height:1.5; max-width:42ch; }
/* compact palette inside the search cell */
.b-palette { margin-top:20px; width:100%; text-align:left; min-height:0; box-shadow:var(--shadow-sm); border-radius:14px; }
.b-palette::after { content:none; }
.b-palette .palette-results { min-height:0; padding-bottom:8px; }

.b-statlist { display:flex; flex-direction:column; }
.b-statlist li { display:flex; align-items:baseline; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding:13px 0; }
.b-statlist li:first-child { border-top:none; padding-top:0; }
.b-statlist b { font-size:25px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.b-statlist span { font-size:12.5px; color:var(--ink-faint); }

.b-modlist { display:flex; flex-direction:column; }
.b-mod { display:flex; align-items:center; gap:11px; padding:11px 0; border-top:1px solid var(--line); text-decoration:none; color:inherit; transition:padding-left .16s var(--ease); }
.b-mod:first-child { border-top:none; }
.b-mod:hover { padding-left:6px; }
.b-mod:hover .b-mod-nm { color:var(--c); }
.b-dot { width:9px; height:9px; border-radius:50%; background:var(--c); flex:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent); }
.b-mod-nm { font-size:14.5px; font-weight:500; letter-spacing:-.006em; transition:color .15s var(--ease); }
.b-mod-ct { margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); white-space:nowrap; }

.b-spotlight .gc-wrap { margin-top:0; border:none; background:none; box-shadow:none; padding:0; flex:1; }
.b-spotlight .gc-cap { display:none; }
.b-cta { margin-top:14px; font-weight:600; font-size:14px; color:var(--mod-c,var(--teal-text)); text-decoration:none; display:inline-flex; gap:6px; align-items:center; }
.b-cta span { transition:transform .18s var(--ease); }
.b-cta:hover span { transform:translateX(3px); }

.b-quicklist { display:flex; flex-direction:column; }
.b-quick-item { display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-top:1px solid var(--line); text-decoration:none; color:inherit; font-size:14.5px; font-weight:500; }
.b-quick-item:first-child { border-top:none; }
.b-quick-item:hover { color:var(--teal-text); }
.b-arrow { color:var(--ink-faint); transition:transform .16s var(--ease); }
.b-quick-item:hover .b-arrow { transform:translateX(3px); color:var(--teal-text); }

@media (max-width:1000px) {
  .bento { grid-template-columns:repeat(2,1fr); }
  .b-search, .b-stats, .b-modules, .b-spotlight, .b-quick { grid-column:auto; grid-row:auto; }
  .b-search, .b-spotlight { grid-column:1/3; }
}
@media (max-width:640px) {
  .bento { grid-template-columns:1fr; }
  .b-search, .b-spotlight { grid-column:1; }
}

/* ==========================================================================
   Intro hero — brand statement above the bento (billion-dollar calm).
   ========================================================================== */
.intro { padding-top: calc(var(--header-h) + clamp(48px,8vw,104px)); padding-bottom: clamp(30px,4vw,56px); position:relative; }
.intro-mark { font-size:13px; font-weight:600; letter-spacing:.01em;
  color:var(--ink-faint); margin-bottom:clamp(22px,3vw,34px); }
.intro-h { font-size:clamp(38px,5.1vw,74px); line-height:1.03; letter-spacing:-.04em; font-weight:700;
  text-wrap:balance; max-width:19ch; }
.intro-h .accent { color:var(--teal-text); }
.intro-body { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(22px,3vw,54px);
  margin-top:clamp(28px,3.5vw,44px); padding-top:clamp(24px,3vw,32px); border-top:1px solid var(--line); align-items:start; }
.intro-lede { font-size:clamp(16.5px,1.35vw,19.5px); line-height:1.55; color:var(--ink-soft); text-wrap:pretty; max-width:52ch; }
.intro-note { font-size:14.5px; line-height:1.55; color:var(--ink-faint); display:flex; gap:10px; align-items:flex-start; max-width:46ch; }
.intro-note svg { width:17px; height:17px; color:var(--teal-deep); flex:none; margin-top:2px; }
.b-h1 { font-weight:700; }  /* keep the bento prompt styling identical after tag swap */
@media (max-width:760px) { .intro-body { grid-template-columns:1fr; gap:18px; } }

/* gentle staggered load-in for the intro */
.js .reveal-i { opacity:0; transform:translateY(16px); }
.js .reveal-i.in { opacity:1; transform:none; transition:opacity .8s var(--ease-expo, cubic-bezier(.16,1,.3,1)), transform .8s var(--ease-expo, cubic-bezier(.16,1,.3,1)); }
@media (prefers-reduced-motion: reduce) { .js .reveal-i { opacity:1 !important; transform:none !important; } }

/* intro logo lockup + rotating headline + achievements */
.intro-lockup { display:flex; align-items:center; gap:13px; margin-bottom:clamp(22px,3vw,34px); }
.intro-logo { width:54px; height:54px; border-radius:14px; box-shadow:var(--shadow-sm); flex:none; }
.intro-brand { font-weight:700; font-size:20px; letter-spacing:.14em; color:var(--ink); }
.intro-lockup .intro-mark { margin:0 0 0 6px; padding-left:14px; border-left:1px solid var(--line-strong);
  font-family:var(--font-body); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-soft); }
.intro-rot { display:inline-block; transition:opacity .3s var(--ease), transform .3s var(--ease); will-change:opacity,transform; }
.intro-stats { display:flex; flex-wrap:wrap; gap:clamp(20px,2.4vw,30px) clamp(30px,4vw,60px); margin-top:clamp(26px,3.2vw,40px);
  padding-top:24px; border-top:1px solid var(--line); }
.intro-stats span { display:flex; flex-direction:column; gap:3px; font-family:var(--font-body);
  font-size:13.5px; font-weight:500; color:var(--ink-soft); letter-spacing:0; }
.intro-stats b { font-family:var(--font-body); font-size:clamp(30px,3.6vw,46px); font-weight:700;
  letter-spacing:-.03em; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; }
@media (max-width:560px) { .intro-lockup .intro-mark { display:none; } }

/* Drop the monospace 'AI' look — one clean sans family across the app. */
body.app { --font-mono: "Hanken Grotesk", system-ui, sans-serif; }
.intro-mark, .b-label, .list-group-h, .row-sp, .mi-count, .result-meta, .gc-tk, .gc-cl,
.b-mod-ct, .intro-stats, .num-in .unit, .nutri-cat, .detail-refs, .cmdk-item .it-m, .crumb, .tier {
  letter-spacing:.02em;
}
.intro-mark { text-transform:none; letter-spacing:.01em; font-weight:500; font-size:12.5px; color:var(--ink-soft); }
.b-label, .list-group-h { letter-spacing:.06em; font-weight:600; }

/* Specialty list: no colour dots — clean editorial rows */
.b-dot { display:none; }
.b-mod { gap:0; }
.b-mod-nm { font-size:15px; }
.b-mod:hover .b-mod-nm { color:var(--teal-text); }
.b-mod-more .b-mod-nm { color:var(--ink-faint); font-weight:400; }
.b-mod-more:hover .b-mod-nm { color:var(--teal-text); }
.b-mod-more .b-mod-ct { font-family:var(--font-body); font-size:14px; }

/* Result panel actions: copy-to-record + reset side by side */
.rp-actions { display:flex; align-items:center; gap:18px; margin-top:14px; }
.rp-actions .reset-btn { margin-top:0; }
.copy-btn { color:var(--ink-soft); font-weight:600; }
.copy-btn.ok { color:var(--teal-text); }

/* Tidy the score result panel: align the note + footer to the body inset,
   give the footer a clean separator and real bottom padding. */
.result-panel > .guideline-note { margin:16px 20px 0; }
.result-panel > .rp-actions { margin-top:16px; padding:15px 20px 18px; border-top:1px solid var(--line); }
.result-panel > .rp-actions .reset-btn { font-size:13px; padding:2px 0; }
.result-panel > .rp-actions .copy-btn { color:var(--teal-text); }
.result-panel > .rp-body { padding-bottom:4px; }

/* ---------- Antropometri: IDAI assessment ---------- */
.antro-sum { padding:18px 22px; border-radius:var(--r-md); margin-bottom:6px;
  background:var(--t-neutral-bg); border:1px solid var(--t-neutral-line); }
.antro-sum[data-tone="ok"] { background:var(--t-ok-bg); border-color:var(--t-ok-line); }
.antro-sum[data-tone="warn"] { background:var(--t-warn-bg); border-color:var(--t-warn-line); }
.antro-sum[data-tone="danger"] { background:var(--t-danger-bg); border-color:var(--t-danger-line); }
.antro-sum[data-tone="crit"] { background:var(--t-crit-bg); border-color:var(--t-crit-line); }
.as-lbl { font-size:12px; font-weight:600; color:var(--ink-faint); margin-bottom:3px; }
.as-txt { font-size:19px; font-weight:700; letter-spacing:-.014em; }
.antro-alur { margin:10px 0 4px; padding:14px 18px; border-radius:14px;
  border:1px dashed var(--line-strong); background:var(--surface); }
.aa-lbl { font-size:12px; font-weight:600; color:var(--ink-faint); margin-bottom:7px; }
.aa-steps { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:5px; }
.aa-steps li { font-size:13.5px; line-height:1.5; color:var(--ink-soft); }
.aa-steps li::marker { color:var(--mod-c); font-weight:700; }
.antro-sum[data-tone="ok"] .as-txt { color:var(--t-ok-ink); }
.antro-sum[data-tone="warn"] .as-txt { color:var(--t-warn-ink); }
.antro-sum[data-tone="danger"] .as-txt { color:var(--t-danger-ink); }
.antro-sum[data-tone="crit"] .as-txt { color:var(--t-crit-ink); }
.antro-inds { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.antro-ind { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 24px; align-items:center;
  padding:18px 20px; border-radius:16px; border:1px solid var(--line); background:var(--card);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease); }
.antro-ind:hover { box-shadow:var(--shadow-sm); }
/* Abnormal findings carry a quiet tone wash so severity reads at a glance */
.antro-ind[data-tone="warn"]   { background:var(--t-warn-bg);   border-color:var(--t-warn-line); }
.antro-ind[data-tone="danger"] { background:var(--t-danger-bg); border-color:var(--t-danger-line); }
.antro-ind[data-tone="crit"]   { background:var(--t-crit-bg);   border-color:var(--t-crit-line); }
.ai-main { min-width:0; }
.ai-head { display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.ai-code { font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--teal-text);
  background:color-mix(in srgb, var(--teal) 13%, transparent); border:1px solid var(--t-accent-line);
  border-radius:7px; padding:3px 9px; flex:none; }
.ai-name { font-size:15px; font-weight:600; letter-spacing:-.012em; color:var(--ink); }
.ai-verdict { margin-top:9px; }
/* Verdict reads as confident tone-coloured text, not a nested pill on a tinted row */
.antro-ind .verdict { background:none; border:none; padding:0; font-size:15.5px; font-weight:700; letter-spacing:-.01em; }
.ai-advice { margin:9px 0 0; font-size:13.5px; line-height:1.58; color:var(--ink-soft); max-width:66ch; }
.antro-ind[data-tone="warn"] .ai-advice, .antro-ind[data-tone="danger"] .ai-advice, .antro-ind[data-tone="crit"] .ai-advice { color:var(--ink); opacity:.82; }
.ai-readout { text-align:right; flex:none; }
.ai-z { font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1; }
.ai-z b { font-size:27px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.ai-z span { font-size:12.5px; font-weight:600; color:var(--ink-faint); margin-left:5px; }
.ai-pct { margin-top:4px; font-size:12.5px; font-weight:600; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.antro-ind[data-tone="warn"] .ai-z b   { color:var(--t-warn-ink); }
.antro-ind[data-tone="danger"] .ai-z b { color:var(--t-danger-ink); }
.antro-ind[data-tone="crit"] .ai-z b   { color:var(--t-crit-ink); }
.antro-charts { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px; margin-top:24px; }
.antro-charts .gc-wrap { margin:0; }
@media (max-width: 560px) { .antro-ind { grid-template-columns:1fr; } .ai-readout { text-align:left; } }

/* Guideline evidence base: source badges under the title */
.doc-cite { margin-top:12px; font-size:14px; line-height:1.55; color:var(--ink-faint); max-width:70ch; }
.doc-cite .dc-cat { font-weight:700; color:var(--ink); }
.doc-cite .dc-src { color:var(--ink-faint); }
.src-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.src-badge { font-size:12.5px; font-weight:600; color:var(--ink-soft); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:999px; padding:5px 12px; }
.src-badge.cat { color:var(--teal-text); background:var(--t-accent-bg); border-color:var(--t-accent-line); }

/* Antro form: paired measurement fields on desktop */
.antro-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:720px; }
.antro-form .af-full { grid-column:1/-1; }
.antro-form .num-in input { width:100%; }
@media (max-width: 640px) { .antro-form { grid-template-columns:1fr; } }

/* ---------- Guideline: clinical document layout ---------- */
.doc { display:grid; grid-template-columns:minmax(0,1fr) 216px; gap:clamp(28px,4vw,64px); align-items:start; margin-top:30px; }
.doc-body { max-width:72ch; }
.doc-alert { border:1px solid var(--t-crit-line); background:var(--t-crit-bg); border-radius:var(--r-md);
  padding:18px 22px; margin-bottom:30px; }
.doc-alert h5 { font-size:14.5px; font-weight:700; color:var(--t-crit-ink); margin-bottom:8px; }
.doc-alert ul { margin:0 0 0 18px; }
.doc-alert li { font-size:14.5px; line-height:1.6; color:var(--ink); margin:4px 0; }
.doc-sec { padding:26px 0 6px; border-top:1px solid var(--line); }
.doc-sec:first-child { border-top:none; padding-top:0; }
.doc-sec h2 { font-size:19px; font-weight:700; letter-spacing:-.015em; margin-bottom:12px; }
.doc-sec ul { margin:0 0 18px 18px; }
.doc-sec li { font-size:15px; line-height:1.62; color:var(--ink-soft); margin:7px 0; }
.doc-sec li::marker { color:var(--teal); }
.doc-sec.no, .doc-sec.warn { border:1px solid var(--t-warn-line); background:var(--t-warn-bg);
  border-radius:var(--r-md); padding:20px 22px 8px; margin:14px 0; }
.doc-sec.no { border-color:var(--t-danger-line); background:var(--t-danger-bg); }
.doc-sec.no h2 { color:var(--t-danger-ink); font-size:16px; }
.doc-sec.warn h2 { color:var(--t-warn-ink); font-size:16px; }
.doc-sec.no li, .doc-sec.warn li { color:var(--ink); font-size:14.5px; }
.doc-sec.no li::marker { color:var(--t-danger-ink); }
.doc-sec.warn li::marker { color:var(--t-warn-ink); }
.doc-sec.no + .doc-sec.warn, .doc-sec.warn + .doc-sec.warn { border-top:1px solid var(--t-warn-line); }
.doc-body .detail-refs { margin-top:26px; }
.doc-toc { position:sticky; top:calc(var(--header-h) + 24px); display:flex; flex-direction:column; }
.toc-h { font-size:12px; font-weight:600; color:var(--ink-faint); margin-bottom:8px; }
.doc-toc a { font-size:13.5px; line-height:1.4; color:var(--ink-soft); text-decoration:none; padding:6px 0 6px 14px;
  border-left:2px solid var(--line); transition:color .14s var(--ease), border-color .14s var(--ease); }
.doc-toc a:hover { color:var(--ink); }
.doc-toc a.on { color:var(--teal-text); border-left-color:var(--teal); font-weight:600; }
.toc-foot { margin-top:16px; padding-left:14px; }
@media (max-width: 1000px) { .doc { grid-template-columns:1fr; } .doc-toc { display:none; } }

/* Drug detail cards: quiet, sentence-case (kills the coloured-top uppercase look) */
.detail-sec { border-top:1px solid var(--line) !important; }
.detail-sec h5 { font-family:var(--font-body); font-size:14px; font-weight:700; letter-spacing:-.01em;
  text-transform:none; color:var(--ink); }
.detail-sec li { font-size:14.5px; }

/* Header nav: never wrap a label */
.nav a { white-space:nowrap; }

/* Bento: full-width module index strip */
.b-allmod { grid-column:1/-1; }
.b-allmod-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:0 clamp(24px,3vw,48px); margin-top:8px; }
.b-am { display:flex; align-items:baseline; gap:12px; padding:15px 2px; text-decoration:none; color:inherit;
  border-top:1px solid var(--line); transition:color .14s var(--ease); }
.am-nm { font-size:16px; font-weight:600; letter-spacing:-.012em; color:var(--ink); transition:color .14s var(--ease); }
.am-ct { margin-left:auto; font-size:13px; font-weight:600; color:var(--ink-faint); font-variant-numeric:tabular-nums; transition:color .14s var(--ease); }
.b-am:hover .am-nm { color:var(--c); }
.b-am:hover .am-ct { color:color-mix(in srgb, var(--c) 70%, var(--ink-faint)); }

/* Doc lists need real bullets (global reset strips them) */
.doc-sec ul, .doc-alert ul { list-style:disc; }

/* Header must fit 8 modules: the search chip is icon-only in the app
   (the big search affordance lives on the home screen) */
body.app .cmd-chip-txt { display:none; }
body.app .cmd-chip { padding:0 12px; }
@media (max-width: 1120px) {
  body.app .nav { gap:0; }
  body.app .nav a { padding-left:10px; padding-right:10px; font-size:13.5px; }
}
@media (max-width: 1000px) { body.app .header .btn { display:none; } }
@media (max-width: 880px) { body.app .nav a { padding-left:8px; padding-right:8px; font-size:13px; } }
.detail-sec ul { list-style:disc; }
.detail-sec li::marker { color:var(--teal); }
.detail-sec.no li::marker { color:var(--t-danger-ink); }
.detail-sec.warn li::marker { color:var(--t-warn-ink); }

/* ---------- Akun: header chip ---------- */
.acct-chip { display:inline-flex; align-items:center; gap:9px; padding:5px 14px 5px 6px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--card); text-decoration:none; color:var(--ink);
  font-size:14px; font-weight:600; transition:border-color .16s var(--ease), box-shadow .16s var(--ease); }
.acct-chip:hover { border-color:var(--teal); box-shadow:var(--shadow-sm); }
.ava { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
  background:var(--teal-deep); color:#fff; font-size:13px; font-weight:700; flex:none; }
.ava-lg { width:56px; height:56px; font-size:24px; border-radius:16px; }

/* ---------- Masuk / Daftar ---------- */
.auth { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(28px,4vw,72px);
  align-items:start; margin-top:14px; }
.auth-brand { background:radial-gradient(120% 140% at 15% 0%, var(--band-2), var(--band) 62%); color:#EAF6F3;
  border-radius:24px; padding:clamp(28px,3.4vw,48px); display:flex; flex-direction:column; box-shadow:var(--shadow-md); }
.ab-logo { border-radius:12px; margin-bottom:26px; }
.auth-brand h2 { font-size:clamp(24px,2.4vw,34px); line-height:1.12; letter-spacing:-.025em; color:#fff; text-wrap:balance; }
.auth-brand p { margin-top:14px; font-size:15.5px; line-height:1.6; color:rgba(234,246,243,.78); max-width:46ch; }
.ab-points { margin:28px 0 0; padding:22px 0 0; list-style:none; border-top:1px solid rgba(255,255,255,.14); }
.ab-points li { position:relative; padding:7px 0 7px 26px; font-size:14.5px; color:rgba(234,246,243,.85); }
.ab-points li::before { content:""; position:absolute; left:0; top:13px; width:14px; height:8px;
  border-left:2.5px solid var(--teal); border-bottom:2.5px solid var(--teal); transform:rotate(-45deg); border-radius:1px; }
.auth-form { max-width:440px; padding:clamp(6px,1.5vw,18px) 0; }
.auth-form h1 { font-size:clamp(28px,2.6vw,38px); letter-spacing:-.03em; }
.af-sub { margin-top:10px; color:var(--ink-soft); font-size:15.5px; line-height:1.55; }
.auth-err { display:none; margin-top:18px; padding:12px 16px; border-radius:12px; font-size:14px; line-height:1.5;
  background:var(--t-crit-bg); border:1px solid var(--t-crit-line); color:var(--t-crit-ink); }
.auth-err.show { display:block; }
.af-fld { position:relative; margin-top:18px; }
.af-fld label { display:block; font-size:13.5px; font-weight:600; color:var(--ink-soft); margin-bottom:7px; }
.af-fld input, .af-fld select { width:100%; height:48px; padding:0 14px; border:1px solid var(--line-strong);
  border-radius:12px; background:var(--card); color:var(--ink); font:inherit; font-size:15px; outline:none;
  transition:border-color .15s var(--ease); }
.af-fld input:focus, .af-fld select:focus { border-color:var(--teal); }
.af-fld.has-tog input { padding-right:64px; }
.pw-tog { position:absolute; right:10px; bottom:12px; border:none; background:none; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--teal-text); padding:4px 6px; }
.af-submit { width:100%; margin-top:26px; justify-content:center; }
.af-demo { margin-top:26px; padding:16px; border-radius:14px; background:var(--surface); border:1px solid var(--line); }
.ad-lead { font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:10px; }
.demo-acct { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  padding:11px 12px; border-radius:11px; border:1px solid transparent; background:var(--card);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.demo-acct + .demo-acct { margin-top:8px; }
.demo-acct:hover { border-color:var(--teal); box-shadow:var(--shadow-sm); }
.demo-acct:active { transform:translateY(1px); }
.da-role { flex:none; width:58px; font-size:12.5px; font-weight:700; color:var(--teal-text); }
.da-cred { display:flex; flex-direction:column; min-width:0; gap:1px; }
.da-em { font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; }
.da-pw { font-size:12.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.da-go { margin-left:auto; flex:none; font-size:12.5px; font-weight:600; color:var(--ink-faint);
  transition:color .15s var(--ease); }
.demo-acct:hover .da-go { color:var(--teal-text); }
.af-switch { margin-top:20px; font-size:14.5px; color:var(--ink-soft); }
.af-switch a { color:var(--teal-text); font-weight:600; }
@media (max-width: 900px) { .auth { grid-template-columns:1fr; } .auth-brand { order:2; } }

/* ---------- Halaman akun ---------- */
.acct-card { margin-top:6px; border:1px solid var(--line); border-radius:22px; background:var(--card);
  padding:clamp(18px,2.4vw,26px); box-shadow:var(--shadow-md); position:relative; overflow:hidden; }
.acct-card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--teal), transparent 70%); opacity:.9; }
.acct-top { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.acct-id { min-width:0; flex:1 1 260px; }
.acct-nm-h { font-size:clamp(22px,2.5vw,32px); letter-spacing:-.025em; line-height:1.1; }
.acct-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.acct-tag { display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 10px; border-radius:10px;
  background:var(--surface); border:1px solid var(--line); font-size:13px; color:var(--ink-soft); max-width:100%; }
.acct-tag svg { width:15px; height:15px; flex:none; color:var(--teal); }
.acct-tag span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plan-pill { margin-left:auto; align-self:flex-start; font-size:12.5px; font-weight:700; letter-spacing:.01em;
  padding:7px 15px; border-radius:999px; flex:none; }
.plan-pill.pro { background:var(--teal); color:#fff; border:1px solid var(--teal); box-shadow:var(--shadow-sm); }
.plan-pill.plus { background:var(--t-accent-bg); color:var(--teal-text); border:1px solid var(--t-accent-line); }
.plan-pill.free { background:var(--surface); color:var(--ink-soft); border:1px solid var(--line-strong); }
.plan-pill.admin { background:var(--t-warn-bg); color:var(--t-warn-ink); border:1px solid var(--t-warn-line); }
.plan-pill.sm { font-size:10.5px; padding:3px 9px; margin-left:0; }
@media (max-width:560px){ .acct-tag { font-size:12px; } .plan-pill { margin-left:0; } }
.ref-card { margin-top:34px; padding:clamp(22px,2.6vw,34px); border-radius:20px; border:1px solid var(--t-accent-line);
  background:var(--t-accent-bg); }
.ref-card h2 { font-size:21px; letter-spacing:-.018em; }
.ref-sub { margin-top:8px; font-size:14.5px; line-height:1.6; color:var(--ink-soft); max-width:56ch; }
.ref-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px; }
.ref-code { font-family:var(--font-body); font-variant-numeric:tabular-nums; font-size:20px; font-weight:700; letter-spacing:.06em; padding:10px 18px; border-radius:12px;
  border:1.5px dashed var(--teal); color:var(--teal-text); background:var(--card); }
.ref-count { margin-top:14px; font-size:13.5px; color:var(--ink-soft); }
.acct-sec { margin-top:34px; }
.acct-sec h2 { font-size:18px; letter-spacing:-.015em; margin-bottom:8px; }
.acct-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }

/* ---------- Admin ---------- */
.adm-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin:28px 0 6px; }
.adm-stat { border:1px solid var(--line); border-radius:16px; background:var(--card); padding:18px 20px; box-shadow:var(--shadow-sm); }
.adm-stat b { display:block; font-size:30px; font-weight:700; letter-spacing:-.03em; }
.adm-stat span { display:block; margin-top:2px; font-size:13px; color:var(--ink-soft); }
.adm-bar { display:flex; gap:12px; align-items:center; margin-top:18px; flex-wrap:wrap; }
.adm-bar .list-search { flex:1; min-width:220px; margin:0; }
.adm-sort { height:44px; padding:0 12px; border:1px solid var(--line-strong); border-radius:11px;
  background:var(--card); color:var(--ink); font:inherit; font-size:14px; outline:none; }
.adm-sort:focus { border-color:var(--teal); }
.adm-tblwrap { margin-top:16px; overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.adm-table { width:100%; border-collapse:collapse; font-size:14px; min-width:760px; }
.adm-table th { text-align:left; font-size:12px; font-weight:600; color:var(--ink-faint); padding:13px 16px;
  border-bottom:1px solid var(--line-strong); white-space:nowrap; }
.adm-table td { padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
.adm-table tr:last-child td { border-bottom:none; }
.adm-table tbody tr:hover { background:var(--surface); }
.adm-table tr.off td { opacity:.45; }
.u-nm { display:block; font-weight:600; }
.u-em { display:block; font-size:12.5px; color:var(--ink-faint); margin-top:1px; }
.u-ref { font-family:var(--font-body); font-variant-numeric:tabular-nums; font-size:12.5px; letter-spacing:.02em; color:var(--teal-text); font-weight:600; }
/* No raw monospace anywhere in the app (browser UA default on <code>/<kbd>/<pre>) */
body.app :is(code, kbd, samp, pre) { font-family:var(--font-body); }
.adm-act { border:1px solid var(--line-strong); background:none; border-radius:8px; padding:6px 12px;
  font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; white-space:nowrap;
  transition:border-color .14s var(--ease), color .14s var(--ease); }
.adm-act:hover { border-color:var(--t-danger-line); color:var(--t-danger-ink); }
tr.off .adm-act:hover { border-color:var(--t-ok-line); color:var(--t-ok-ink); }
/* Admin komersial: setup kunci, catatan status, pemilih paket per pengguna */
.adm-keybox { margin-top:26px; padding:22px 24px; border:1px solid var(--line); border-radius:18px;
  background:var(--card); box-shadow:var(--shadow-sm); max-width:520px; }
.adm-keybox p { font-size:14px; color:var(--ink-soft); line-height:1.6; }
.adm-keyrow { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.adm-keyinp { flex:1; min-width:180px; border:1px solid var(--line-strong); border-radius:10px;
  padding:10px 14px; font-size:14px; font-family:var(--font-body); background:var(--surface); color:var(--ink); }
.adm-keyinp:focus { outline:none; border-color:var(--teal); }
.adm-note { margin-top:14px; padding:11px 16px; border-radius:12px; font-size:13.5px; font-weight:600;
  background:var(--t-ok-bg); border:1px solid var(--t-ok-line); color:var(--t-ok-ink); }
.adm-planpick { border:1px solid var(--line-strong); border-radius:9px; padding:7px 12px; font-size:13px;
  font-weight:600; font-family:var(--font-body); background:var(--card); color:var(--ink); cursor:pointer;
  transition:border-color .14s var(--ease); }
.adm-planpick:hover { border-color:var(--teal); }
.adm-planpick:focus { outline:none; border-color:var(--teal); }
.u-wa { color:var(--teal-text); font-weight:600; font-size:13px; text-decoration:none; }
.u-wa:hover { text-decoration:underline; }

/* ---------- Akses berjenjang ---------- */
.gate { margin-top:34px; padding:clamp(30px,4vw,52px); border-radius:22px; border:1px solid var(--line);
  background:var(--card); box-shadow:var(--shadow-md); text-align:center; max-width:640px; }
.gate-ic { display:inline-flex; width:52px; height:52px; border-radius:16px; background:var(--t-accent-bg);
  border:1px solid var(--t-accent-line); color:var(--teal-text); align-items:center; justify-content:center; margin-bottom:18px; }
.gate-ic svg { width:26px; height:26px; }
.gate h2 { font-size:clamp(20px,2vw,26px); letter-spacing:-.02em; }
.gate p { margin-top:10px; font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:46ch; margin-left:auto; margin-right:auto; }
.gate .btn { margin-top:20px; }
.gate-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px; }
.gate-ctas { display:flex; gap:12px; justify-content:center; margin-top:6px; }
.gate-ref { font-size:13.5px !important; color:var(--ink-faint) !important; }
.meter-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px; padding:10px 16px;
  border-radius:12px; background:var(--surface); border:1px solid var(--line); font-size:13.5px; color:var(--ink-soft); }
.meter-cta { margin-left:auto; border:none; background:none; cursor:pointer; font-size:13.5px; font-weight:700;
  color:var(--teal-text); padding:2px 0; }
.meter-cta:hover { text-decoration:underline; }

/* ---------- Dokumen: sub-list & gambar klinis ---------- */
.doc-sub { list-style:circle; margin:6px 0 2px 20px; }
.doc-sub li { font-size:14px; margin:4px 0; color:var(--ink-soft); }
.doc-fig { margin:18px 0 10px; }
.doc-fig img { width:100%; max-width:560px; height:auto; border-radius:14px; border:1px solid var(--line-strong);
  box-shadow:var(--shadow-md); background:#fff; }
.doc-fig figcaption { margin-top:9px; font-size:13px; line-height:1.5; color:var(--ink-soft); max-width:64ch; }
.fig-credit { color:var(--ink-faint); font-size:12px; }

/* Pemeriksaan penunjang: the "what the results should show" panel */
.doc-sec.accent { border:1px solid var(--t-accent-line); background:var(--t-accent-bg);
  border-radius:var(--r-md); padding:20px 22px 8px; margin:14px 0; }
.doc-sec.accent h2 { color:var(--teal-text); font-size:16px; }
.doc-sec.accent li { color:var(--ink); }
.doc-sec.accent li::marker { color:var(--teal); }
.doc-sec.accent .doc-sub li { color:var(--ink-soft); }

/* ---------- Upgrade Pro: pembayaran ---------- */
.pay-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:start; margin-top:28px; }
.pay-plan { }
.pp-tier { font-size:13px; font-weight:700; color:var(--teal-text); letter-spacing:.02em; }
.pp-price { font-size:clamp(34px,4vw,46px); font-weight:800; letter-spacing:-.03em; margin-top:2px; }
.pp-price span { font-size:16px; font-weight:500; color:var(--ink-faint); letter-spacing:0; }
.pp-feats { list-style:none; margin:18px 0 0; padding:0; }
.pp-feats li { position:relative; padding:7px 0 7px 26px; font-size:14.5px; color:var(--ink-soft); line-height:1.5; }
.pp-feats li::before { content:""; position:absolute; left:0; top:12px; width:13px; height:7px;
  border-left:2.5px solid var(--teal); border-bottom:2.5px solid var(--teal); transform:rotate(-45deg); border-radius:1px; }
.pp-steps { margin-top:22px; border-top:1px solid var(--line); padding-top:18px; }
.ps { display:flex; gap:12px; align-items:flex-start; padding:8px 0; }
.ps b { flex:none; width:24px; height:24px; border-radius:50%; background:var(--t-accent-bg); color:var(--teal-text);
  border:1px solid var(--t-accent-line); display:inline-flex; align-items:center; justify-content:center; font-size:13px; }
.ps span { font-size:14px; line-height:1.5; color:var(--ink-soft); }
.pay-qr-card { border:1px solid var(--line); border-radius:20px; background:var(--card); padding:22px; text-align:center; box-shadow:var(--shadow-md); }
.pqc-amt { font-size:15px; color:var(--ink-soft); }
.pqc-amt b { color:var(--ink); font-size:18px; font-weight:800; letter-spacing:-.01em; }
.pay-qris { text-align:center; }
.pq-lbl { font-size:13px; font-weight:700; color:var(--teal-text); margin-bottom:12px; letter-spacing:.01em; }
.pay-qris img { width:240px; height:240px; max-width:100%; border-radius:16px; border:1px solid var(--line-strong); background:#fff; box-shadow:var(--shadow-sm); }
.pq-nm { font-size:12.5px; color:var(--ink-soft); margin-top:10px; line-height:1.5; }
.pay-bank { margin-top:18px; padding:16px 18px; border-radius:16px; background:var(--surface); border:1px solid var(--line); text-align:left; }
.pb-label { font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.pb-bank { margin-top:6px; font-size:13.5px; font-weight:700; color:var(--teal-text); letter-spacing:.02em; }
.pb-acct { font-size:clamp(24px,2.8vw,30px); font-weight:800; letter-spacing:.06em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1; margin-top:2px; }
.pb-nm { font-size:13px; color:var(--ink-soft); margin-top:4px; }
.pay-wa { width:100%; margin-top:18px; justify-content:center; gap:9px; }
.pay-wa svg { width:19px; height:19px; }
.pay-confirm { width:100%; margin-top:10px; justify-content:center; }
.pqc-bank { margin-top:16px; padding-top:14px; border-top:1px dashed var(--line-strong); text-align:left; }
.pqc-bank-t { font-size:12px; color:var(--ink-faint); margin-bottom:7px; }
.pqc-bank-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pqc-bank-row span { font-size:13px; font-weight:700; color:var(--teal-text); letter-spacing:.02em; }
.pqc-bank-row b { font-size:19px; font-weight:800; letter-spacing:.04em; color:var(--ink); font-variant-numeric:tabular-nums; }
.pqc-bank-nm { font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.pqc-copy { width:100%; margin-top:12px; justify-content:center; }
.pqc-note { margin-top:14px; font-size:12px; line-height:1.5; color:var(--ink-faint); }
.pay-status { display:flex; gap:12px; align-items:flex-start; margin-top:22px; padding:14px 18px; border-radius:14px;
  background:var(--t-warn-bg); border:1px solid var(--t-warn-line); color:var(--ink); font-size:14px; line-height:1.55; }
.pay-status svg { width:22px; height:22px; flex:none; stroke:var(--t-warn-ink); margin-top:1px; }
.pay-status b { color:var(--t-warn-ink); }
.plan-switch { display:inline-flex; gap:6px; margin-top:20px; padding:5px; border:1px solid var(--line); border-radius:14px; background:var(--card-soft, var(--card)); }
.plan-tab { display:flex; flex-direction:column; gap:2px; padding:9px 20px; border-radius:10px; text-decoration:none;
  color:var(--ink-soft); transition:background .18s ease, color .18s ease, box-shadow .18s ease; }
.plan-tab b { font-size:14px; font-weight:700; letter-spacing:-.01em; }
.plan-tab span { font-size:12.5px; color:var(--ink-faint); }
.plan-tab.on { background:var(--teal); color:#fff; box-shadow:var(--shadow-sm); }
.plan-tab.on b, .plan-tab.on span { color:#fff; }
.plan-tab:not(.on):hover { background:var(--t-accent-bg); color:var(--teal-text); }
@media (max-width: 760px) { .pay-grid { grid-template-columns:1fr; } .plan-switch { display:flex; } .plan-tab { flex:1; text-align:center; align-items:center; } }

/* Upsell card on account page */
.upsell { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:20px 22px; border-radius:18px;
  border:1px solid var(--t-accent-line); background:var(--t-accent-bg); }
.upsell h2 { font-size:18px; letter-spacing:-.015em; }
.upsell p { margin-top:5px; font-size:14px; color:var(--ink-soft); line-height:1.5; max-width:52ch; }
.upsell .btn { margin-left:auto; flex:none; }

/* Admin: payment approval queue */
.adm-pay { margin-top:30px; }
.adm-h2 { font-size:18px; letter-spacing:-.015em; margin-bottom:12px; }
.adm-empty { font-size:14px; color:var(--ink-faint); padding:14px 0; }
.pay-queue { display:flex; flex-direction:column; gap:10px; }
.pq-item { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 16px; border:1px solid var(--line);
  border-radius:14px; background:var(--card); }
.pq-who { display:flex; align-items:center; gap:11px; min-width:200px; }
.pq-meta { display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--ink-soft); }
.pq-acts { display:flex; gap:8px; align-items:center; margin-left:auto; flex-wrap:wrap; }
.pq-reject { border:none; background:none; cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-faint); padding:6px 8px; }
.pq-reject:hover { color:var(--t-danger-ink); }

/* Drug + dose highlight: prominent, actionable, wraps cleanly */
.rx { font-weight:600; color:var(--teal-text);
  background:color-mix(in srgb, var(--teal) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--teal) 26%, transparent);
  border-radius:6px; padding:1px 6px; font-variant-numeric:tabular-nums;
  box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.doc-sec.no .rx, .doc-sec.warn .rx { background:var(--card); }

/* Fornas / national-guideline dosing note under a guideline */
.doc-note { margin-top:12px; padding:12px 15px; border-radius:11px; background:var(--surface);
  border:1px solid var(--line); font-size:12.5px; line-height:1.55; color:var(--ink-soft); }
.doc-note b { color:var(--ink); font-weight:600; }