/*! LabMu UI v2.0.0 — token + base + app + marketing. Sumber: tokens/tokens.css, css/base.css, css/app.css, css/onboarding.css, css/marketing.css */
/* ===== tokens/tokens.css ===== */
/* Dibangkitkan oleh scripts/build.mjs dari tokens/tokens.json — jangan disunting langsung. */
/* Merek bawaan: satumu. Ganti merek dengan atribut data-brand="satumu|sehatmu|amanah|bukumu|aimu|masa|paymu|eventmu" pada <html> atau elemen pembungkus mana pun. */
:root,[data-brand="satumu"]{
  --primary:#00684F;
  --primary-active:#00533F;
  --primary-pressed:#004332;
  --primary-light:#E8F4EF;
  --primary-border:#CFE6DC;
  --primary-disabled:#9CC7BA;
  --primary-support:#2FB67D;
  --accent:#F7BF06;
  --on-primary:#FFFFFF;
  --deep:#0B3B2E;
  --deep-2:#065646;
  --foot:#071C16;
  --ink:#0F172A;
  --body:#475569;
  --muted:#596A80;
  --faint:#8A97A8;
  --line:#E2E8F0;
  --line-strong:#CBD5E1;
  --canvas:#F4F6F8;
  --paper:#FFFFFF;
  --surface:#EEF2F5;
  --hover:#F8FAFC;
  --eyebrow:#00684F;
  --shadow-primary:rgba(0,104,79,.24);
  --display-tracking:-0.02em;
  --h2-tracking:-0.02em;
  --brand-bg:url("../assets/backgrounds/satumu-bg.svg");
  --brand-gradient:linear-gradient(55deg,#065646,#4CC77D);
  --brand-bg-shade:rgba(0,0,0,.22);
}
[data-brand="sehatmu"]{
  --primary:#007A30;
  --primary-active:#006427;
  --primary-pressed:#005321;
  --primary-light:#E8F3EC;
  --primary-border:#C7E2D1;
  --primary-disabled:#8CC3A2;
  --primary-support:#3FAA35;
  --accent:#F7BF06;
  --on-primary:#FFFFFF;
  --deep:#002E12;
  --deep-2:#00471C;
  --foot:#001609;
  --ink:#0F172A;
  --body:#475569;
  --muted:#596A80;
  --faint:#8A97A8;
  --line:#E2E8F0;
  --line-strong:#CBD5E1;
  --canvas:#F4F6F8;
  --paper:#FFFFFF;
  --surface:#EEF2F5;
  --hover:#F8FAFC;
  --eyebrow:#007A30;
  --shadow-primary:rgba(0,122,48,.24);
  --display-tracking:-0.02em;
  --h2-tracking:-0.02em;
  --brand-bg:url("../assets/backgrounds/sehatmu-bg.svg");
  --brand-gradient:linear-gradient(180deg,#85B72E,#009C39);
  --brand-bg-shade:rgba(0,0,0,.26);
}
[data-brand="amanah"]{
  --primary:#B24C00;
  --primary-active:#96400A;
  --primary-pressed:#7C3508;
  --primary-light:#FFF1E4;
  --primary-border:#F6D6B8;
  --primary-disabled:#DDB596;
  --primary-support:#FF7B05;
  --accent:#ED9516;
  --on-primary:#FFFFFF;
  --deep:#2B1708;
  --deep-2:#3A1F0A;
  --foot:#140B04;
  --ink:#1C1917;
  --body:#57534E;
  --muted:#6B6560;
  --faint:#A29B93;
  --line:#E7E2DB;
  --line-strong:#D6CFC6;
  --canvas:#F8F6F3;
  --paper:#FFFFFF;
  --surface:#F1ECE6;
  --hover:#FBF9F7;
  --eyebrow:#B24C00;
  --shadow-primary:rgba(178,76,0,.24);
  --display-tracking:-0.02em;
  --h2-tracking:-0.02em;
  --brand-bg:url("../assets/backgrounds/amanah-bg.svg");
  --brand-gradient:linear-gradient(180deg,#FF7B05,#E54C29);
  --brand-bg-shade:rgba(0,0,0,.24);
}
[data-brand="bukumu"]{
  --primary:#1E5B7E;
  --primary-active:#194B67;
  --primary-pressed:#143E56;
  --primary-light:#EBF0F3;
  --primary-border:#CEDBE3;
  --primary-disabled:#9AB5C5;
  --primary-support:#027F6C;
  --accent:#F7BF06;
  --on-primary:#FFFFFF;
  --deep:#0B2330;
  --deep-2:#113549;
  --foot:#051017;
  --ink:#0F172A;
  --body:#475569;
  --muted:#596A80;
  --faint:#8A97A8;
  --line:#E2E8F0;
  --line-strong:#CBD5E1;
  --canvas:#F4F6F8;
  --paper:#FFFFFF;
  --surface:#EEF2F5;
  --hover:#F8FAFC;
  --eyebrow:#1E5B7E;
  --shadow-primary:rgba(30,91,126,.24);
  --display-tracking:-0.02em;
  --h2-tracking:-0.02em;
  --brand-bg:url("../assets/backgrounds/bukumu-bg.svg");
  --brand-gradient:linear-gradient(180deg,#027F6C,#205C80);
  --brand-bg-shade:rgba(0,0,0,.08);
}
[data-brand="aimu"]{
  --primary:#0A0A0A;
  --primary-active:#333333;
  --primary-pressed:#000000;
  --primary-light:#EFEFEF;
  --primary-border:#DEDEDE;
  --primary-disabled:#BDBDBD;
  --primary-support:#626262;
  --accent:#F7BF06;
  --on-primary:#FFFFFF;
  --deep:#0A0A0A;
  --deep-2:#1A1A1A;
  --foot:#0A0A0A;
  --ink:#0A0A0A;
  --body:#414141;
  --muted:#626262;
  --faint:#8C8C8C;
  --line:#DEDEDE;
  --line-strong:#BDBDBD;
  --canvas:#F8F8F8;
  --paper:#FFFFFF;
  --surface:#EFEFEF;
  --hover:#FAFAFA;
  --eyebrow:#626262;
  --shadow-primary:rgba(10,10,10,.20);
  --display-tracking:-0.055em;
  --h2-tracking:-0.04em;
  --brand-bg:url("../assets/backgrounds/aimu-bg.svg");
  --brand-gradient:linear-gradient(180deg,#333333,#333333);
  --brand-bg-shade:rgba(0,0,0,0);
}
[data-brand="masa"]{
  --primary:#2B3081;
  --primary-active:#23276A;
  --primary-pressed:#1D2158;
  --primary-light:#ECECF4;
  --primary-border:#D0D1E3;
  --primary-disabled:#A0A2C6;
  --primary-support:#4A50B8;
  --accent:#F7BF06;
  --on-primary:#FFFFFF;
  --deep:#101231;
  --deep-2:#191C4B;
  --foot:#080917;
  --ink:#0F172A;
  --body:#475569;
  --muted:#596A80;
  --faint:#8A97A8;
  --line:#E2E8F0;
  --line-strong:#CBD5E1;
  --canvas:#F4F6F8;
  --paper:#FFFFFF;
  --surface:#EEF2F5;
  --hover:#F8FAFC;
  --eyebrow:#2B3081;
  --shadow-primary:rgba(43,48,129,.24);
  --display-tracking:-0.02em;
  --h2-tracking:-0.02em;
  --brand-bg:url("../assets/backgrounds/masa-bg.svg");
  --brand-gradient:linear-gradient(180deg,#2B3081,#090A1B);
  --brand-bg-shade:rgba(0,0,0,0);
}
[data-brand="paymu"]{
  --primary:#7130A6;
  --primary-active:#5D2788;
  --primary-pressed:#4D2171;
  --primary-light:#F2ECF7;
  --primary-border:#E0D1EB;
  --primary-disabled:#BFA2D7;
  --primary-support:#8535BE;
  --accent:#F7BF06;
  --on-primary:#FFFFFF;
  --deep:#2B123F;
  --deep-2:#421C60;
  --foot:#14091E;
  --ink:#0F172A;
  --body:#475569;
  --muted:#596A80;
  --faint:#8A97A8;
  --line:#E2E8F0;
  --line-strong:#CBD5E1;
  --canvas:#F4F6F8;
  --paper:#FFFFFF;
  --surface:#EEF2F5;
  --hover:#F8FAFC;
  --eyebrow:#7130A6;
  --shadow-primary:rgba(113,48,166,.24);
  --display-tracking:-0.02em;
  --h2-tracking:-0.02em;
  --brand-bg:url("../assets/backgrounds/paymu-bg.svg");
  --brand-gradient:linear-gradient(193deg,#8535BE,#3E1958);
  --brand-bg-shade:rgba(0,0,0,0);
}
[data-brand="eventmu"]{
  --primary:#B83208;
  --primary-active:#972906;
  --primary-pressed:#7D2205;
  --primary-light:#FEEDE7;
  --primary-border:#FCD3C4;
  --primary-disabled:#F3A88E;
  --primary-support:#F6420B;
  --accent:#F7BF06;
  --on-primary:#FFFFFF;
  --deep:#3A1103;
  --deep-2:#5C1B05;
  --foot:#1C0802;
  --ink:#0F172A;
  --body:#475569;
  --muted:#596A80;
  --faint:#8A97A8;
  --line:#E2E8F0;
  --line-strong:#CBD5E1;
  --canvas:#F4F6F8;
  --paper:#FFFFFF;
  --surface:#EEF2F5;
  --hover:#F8FAFC;
  --eyebrow:#B83208;
  --shadow-primary:rgba(184,50,8,.24);
  --display-tracking:-0.02em;
  --h2-tracking:-0.02em;
  --brand-bg:url("../assets/backgrounds/eventmu-bg.svg");
  --brand-gradient:linear-gradient(216deg,#F6420B,#B93D18);
  --brand-bg-shade:rgba(0,0,0,.2);
}
:root{
  --success:#166534;
  --success-light:#F0FDF4;
  --success-border:#BBE5C8;
  --warning:#92400E;
  --warning-light:#FFFBEB;
  --warning-border:#F4DFA6;
  --danger:#B42318;
  --danger-light:#FEF3F2;
  --danger-border:#F9D0CC;
  --info:#1E40AF;
  --info-light:#EFF6FF;
  --info-border:#C9DBFB;
  --neutral:#475569;
  --neutral-light:#F1F5F9;
  --neutral-border:#E2E8F0;
  --focus:#1D4ED8;
  --sun:#F7BF06;
  --mid:#2F317B;
  --mid-hover:#282A6A;
  --domain-member-bg:#EEF2FF;
  --domain-member-fg:#4338CA;
  --domain-money-bg:#FFF7E6;
  --domain-money-fg:#9A6200;
  --domain-access-bg:#F1F5F9;
  --domain-access-fg:#334155;
  --font:Inter,"Inter Variable",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sp-2:2px;
  --sp-4:4px;
  --sp-6:6px;
  --sp-8:8px;
  --sp-10:10px;
  --sp-12:12px;
  --sp-14:14px;
  --sp-16:16px;
  --sp-18:18px;
  --sp-20:20px;
  --sp-24:24px;
  --sp-28:28px;
  --sp-32:32px;
  --sp-36:36px;
  --sp-42:42px;
  --sp-48:48px;
  --sp-64:64px;
  --sp-86:86px;
  --r-xs:4px;
  --r-sm:6px;
  --r-ctl:8px;
  --r-input:8px;
  --r-card:12px;
  --r-float:14px;
  --r-modal:16px;
  --r-panel:22px;
  --r-pill:999px;
  --r-btn:var(--r-pill);
  --pill:var(--r-pill);
  --radius:var(--r-panel);
  --h-xs:28px;
  --h-sm:32px;
  --h-md:40px;
  --h-lg:48px;
  --icon-xs:13px;
  --icon-sm:16px;
  --icon-md:18px;
  --icon-lg:20px;
  --icon-xl:22px;
  --icon-empty:30px;
  --max:1280px;
  --content-max:1320px;
  --gutter:48px;
  --sidebar-w:248px;
  --sidebar-mini:76px;
  --header-h:70px;
  --site-header-h:84px;
  --aside-w:340px;
  --section-y:86px;
  --shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --shadow-hover:0 4px 12px rgba(15,23,42,.08);
  --shadow:0 8px 24px rgba(15,23,42,.12);
  --shadow-lg:0 24px 64px rgba(15,23,42,.18);
  --shadow-float:0 22px 44px -24px rgba(15,23,42,.42), 0 2px 6px -3px rgba(15,23,42,.12);
  --ease:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:120ms;
  --dur:180ms;
  --dur-slow:220ms;
}
/* Alias: kosakata landing (--text, --line), ormu.css/Metronic (--border-2, --gray-600), kontrol form. */
:root,[data-brand]{
  --text:var(--body);
  --border-2:var(--line);
  --support:var(--primary-support);
  --gray-600:var(--muted);
  --input-line:var(--line);
  --input-hover:var(--line-strong);
  --input-bg:var(--hover);
}

/* ===== css/base.css ===== */
/* ==========================================================================
   LabMu UI · base.css
   Reset ringan, tipografi dasar, ikon, fokus, dan utilitas tata letak.
   Butuh: tokens/tokens.css
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 14px/1.45 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,figure{margin:0}
img,svg{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
/* hidden always wins over a component's display (.btn, .toast, flex rows) */
[hidden]{display:none!important}

/* Fokus keyboard — selalu terlihat, satu warna di semua merek */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* the one exception: the dialog box itself (showModal focuses it); controls inside keep their ring */
dialog:focus-visible{outline:none}

/* Tipografi aplikasi (permukaan bawaan) */
h1,.h1-app{font-size:1.5rem;line-height:1.25;font-weight:650;letter-spacing:-.015em}
h2,.h2-app{font-size:1rem;line-height:1.35;font-weight:620}
h3,.h3-app{font-size:.9rem;line-height:1.35;font-weight:600}
.small{font-size:.8125rem}
.caption{font-size:.75rem;color:var(--muted)}
.t2{color:var(--body)}
.muted{color:var(--muted)}
.mono{font-family:var(--font-mono);font-size:.86em;letter-spacing:0}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:.6875rem;line-height:1.4;letter-spacing:.08em;font-weight:650;color:var(--muted);text-transform:uppercase;margin:0}

/* Ikon: SVG 24×24, garis 1.7 (lihat icons/labmu-icons.svg) */
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.icon.duo{fill:currentColor;stroke:none}
.icon.xs{width:var(--icon-xs);height:var(--icon-xs)}
.icon.sm{width:var(--icon-sm);height:var(--icon-sm)}
.icon.md{width:var(--icon-md);height:var(--icon-md)}
.icon.lg{width:var(--icon-xl);height:var(--icon-xl)}

/* Utilitas tata letak (padanan ui/Layout.tsx) */
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.stack-sm{display:flex;flex-direction:column;gap:8px;min-width:0}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ui-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.grid-main{display:grid;grid-template-columns:minmax(0,1fr) var(--aside-w);gap:16px;align-items:start}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-main{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r-ctl);text-decoration:none;font-weight:600}
.skip-link:focus{top:12px}

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

/* ===== css/app.css ===== */
/* ==========================================================================
   LabMu UI · app.css — komponen aplikasi (permukaan kerja / dashboard)
   Kosakata kelas mengikuti ormu.css (Metronic 8) + "Standar komponen LabMu"
   dari prototipe SatuMu v2.2. Padanan React ada di react/*.tsx.
   Butuh: tokens/tokens.css, css/base.css
   ========================================================================== */

/* ---------- Tombol · ui/Button.tsx ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h-md);padding:0 20px;border-radius:var(--r-btn);border:1px solid transparent;background:var(--paper);color:var(--ink);font-size:.875rem;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background var(--dur-fast),box-shadow var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast)}
.btn .icon{width:18px;height:18px}
.btn-p,.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn-p:hover,.btn-primary:hover{background:var(--primary-active);border-color:var(--primary-active);box-shadow:0 4px 12px var(--shadow-primary)}
.btn-p:active,.btn-primary:active{background:var(--primary-pressed);border-color:var(--primary-pressed);box-shadow:none}
.btn-o{background:var(--paper);color:var(--ink);border-color:var(--input-line);box-shadow:var(--shadow-xs)}
.btn-o:hover{border-color:var(--input-hover);box-shadow:var(--shadow-hover)}
.btn-op,.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.btn-op:hover,.btn-outline:hover{background:var(--primary-light)}
.btn-lp{background:var(--primary-light);color:var(--primary);border-color:var(--primary-light)}
.btn-lp:hover{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--primary)}
.btn-ghost:hover{background:var(--primary-light)}
.btn-ld{background:var(--danger-light);color:var(--danger);border-color:var(--danger-border)}
.btn-ld:hover{background:var(--danger);color:#fff;border-color:var(--danger);box-shadow:0 4px 12px rgba(180,35,24,.24)}
.btn-d{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-d:hover{background:#912018;border-color:#912018}
.btn-light{background:#fff;border-color:#fff;color:var(--deep)}
.btn-light:hover{background:var(--primary-light);border-color:var(--primary-light)}
.btn-lg{height:var(--h-lg);padding:0 24px;font-size:.9375rem}
.btn-sm{height:var(--h-sm);padding:0 14px;font-size:.8125rem;gap:6px}
.btn-sm .icon{width:16px;height:16px}
.btn-xs{height:var(--h-xs);padding:0 12px;font-size:.75rem;gap:4px}
.btn-xs .icon{width:14px;height:14px}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{background:var(--neutral-light);border-color:var(--line);color:#A6B1C2;box-shadow:none;cursor:not-allowed;transform:none}
.btn-p[disabled],.btn-primary[disabled],.btn-p[aria-disabled=true]{background:var(--primary-disabled);border-color:var(--primary-disabled);color:#fff}
/* busy: its form or request is on its way (labmu-ui.js data-ui-loading, Button loading) */
.btn[aria-busy=true]{pointer-events:none;opacity:.75}
.btn[aria-busy=true]::before{content:"";width:14px;height:14px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:lm-spin .7s linear infinite}
@keyframes lm-spin{to{transform:rotate(360deg)}}
.btn-icon{width:var(--h-md);height:var(--h-md);padding:0;border-radius:var(--r-pill);border:1px solid transparent;background:none;display:inline-grid;place-items:center;position:relative;color:var(--body);cursor:pointer}
.btn-icon:hover{background:var(--paper);border-color:var(--input-line);color:var(--primary);box-shadow:var(--shadow-xs)}
.btn-icon.sm{width:30px;height:30px}
.btn-link,.text-link{border:0;background:none;padding:0;color:var(--primary);font-weight:600;display:inline-flex;align-items:center;gap:6px;font-size:.84rem;text-decoration:none;cursor:pointer}
.btn-link:hover{text-decoration:underline;text-underline-offset:3px}
.btn-link .icon{width:16px;height:16px}

/* ---------- Pill / Badge status · ui/Badge.tsx ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:.75rem;font-weight:500;line-height:1;white-space:nowrap;border:1px solid var(--neutral-border);background:var(--neutral-light);color:var(--neutral)}
.pill .dot{width:6px;height:6px;border-radius:999px;background:currentColor;flex:none}
.pill .icon{width:13px;height:13px}
.pill.primary,.pill.brand{background:var(--primary-light);color:var(--primary);border-color:var(--primary-border)}
.pill.good{background:var(--success-light);color:var(--success);border-color:var(--success-border)}
.pill.warn{background:var(--warning-light);color:var(--warning);border-color:var(--warning-border)}
.pill.bad{background:var(--danger-light);color:var(--danger);border-color:var(--danger-border)}
.pill.info{background:var(--info-light);color:var(--info);border-color:var(--info-border)}
.pill.neutral{background:var(--neutral-light);color:var(--neutral);border-color:var(--neutral-border)}
.pill.solid{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.pill.outline{background:transparent;color:var(--muted);border-color:var(--line-strong)}
.pill.outline .dot{background:transparent;border:1px solid currentColor}
.pill-sm{height:20px;padding:0 8px;font-size:.6875rem;font-weight:600;gap:5px}
.pill-sm .dot{width:5px;height:5px}
.chip{display:inline-flex;gap:4px;align-items:center;padding:2px 8px;border-radius:var(--r-pill);background:var(--neutral-light);color:var(--body);font-size:.72rem}
.chip b{color:var(--ink)}
a.chip{text-decoration:none}
a.chip:hover{background:var(--primary-light);color:var(--primary-pressed)}
.tags{display:inline-flex;flex-wrap:wrap;gap:4px}
.nav-badge,.tab-count{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:var(--r-xs);font-size:.7rem;font-weight:600;background:var(--primary-light);color:var(--primary)}
.tab-count{background:var(--neutral-light);color:var(--neutral)}
.badge-label{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:5px;padding:3px 7px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--paper);white-space:nowrap}

/* ---------- Kartu · ui/Card.tsx ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);min-width:0}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.card-header.flat{border-bottom:0;padding-bottom:4px}
.card-header p{font-size:.78rem;color:var(--muted);margin-top:2px}
.card-header .icon{color:var(--muted)}
.card-body{padding:16px 18px}
.card-footer{padding:12px 18px;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted);display:flex;gap:8px;align-items:center}
.card-footer .icon{width:15px;height:15px}

/* ---------- Statistik · ui/Stat.tsx ---------- */
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;min-width:0;text-align:left}
.kpi-l{font-size:.75rem;color:var(--body);font-weight:500}
.kpi-v{font-size:1.5rem;font-weight:650;margin-top:6px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.2}
.kpi-v span{font-size:.8rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:4px}
.kpi-v.text{font-size:1rem}
.kpi p{font-size:.72rem;color:var(--muted);margin-top:6px}
.kpi.accent{background:var(--primary-light);border-color:var(--primary-border)}
button.kpi{cursor:pointer;font:inherit;color:inherit}
button.kpi:hover{border-color:var(--muted)}

/* Kartu perhatian (jumlah pekerjaan) */
.attention{display:flex;gap:18px;align-items:flex-start;padding:20px 22px;border-radius:var(--r-card);border:1px solid var(--primary-border);background:linear-gradient(110deg,var(--primary-light),var(--paper))}
.attention-count{font-size:2.4rem;font-weight:700;color:var(--primary);line-height:1;min-width:44px;font-variant-numeric:tabular-nums}
.attention h2{font-size:1.05rem}
.attention p{color:var(--body);margin:4px 0 14px;font-size:.84rem}
.attention.calm{background:var(--paper);border-color:var(--line)}
.attention.calm .attention-count{color:var(--body)}

/* ---------- Catatan & banner · ui/Notice.tsx ---------- */
.note{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:var(--r-ctl);background:var(--hover);border:1px solid var(--line);font-size:.8rem;color:var(--body)}
.note .icon{width:17px;height:17px;margin-top:1px;color:var(--muted)}
.note strong{font-weight:650}
.note.info{background:var(--info-light);border-color:var(--info-border);color:var(--info)}
.note.warn{background:var(--warning-light);border-color:var(--warning-border);color:var(--warning)}
.note.bad{background:var(--danger-light);border-color:var(--danger-border);color:var(--danger)}
.note.good{background:var(--success-light);border-color:var(--success-border);color:var(--success)}
.note.primary{background:var(--primary-light);border-color:var(--primary-border);color:var(--primary)}
.note:is(.info,.warn,.bad,.good,.primary) .icon{color:currentColor}
.link-banner{display:flex;gap:10px;align-items:center;padding:10px 12px 10px 14px;border-radius:var(--r-ctl);background:var(--warning-light);color:#7A5B12;font-size:.82rem;border:1px solid var(--warning-border)}
.link-banner>.icon{width:18px;height:18px;color:var(--warning)}
.link-banner .grow strong{font-weight:650}

/* ---------- Tab & segmented · ui/Tabs.tsx ---------- */
.ui-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.ui-tabs::-webkit-scrollbar{display:none}
.ui-tabs button,.ui-tabs a{border:0;background:none;padding:10px 12px;color:var(--body);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;gap:6px;align-items:center;text-decoration:none;cursor:pointer}
.ui-tabs button:hover,.ui-tabs a:hover{color:var(--ink)}
.ui-tabs [aria-selected=true],.ui-tabs [aria-current=page]{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.ui-tabs [aria-selected=true] .tab-count,.ui-tabs [aria-current=page] .tab-count{background:var(--primary);color:var(--on-primary)}
.card .ui-tabs{padding:0 14px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;background:var(--hover);gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:5px 12px;border-radius:var(--r-pill);font-size:.78rem;color:var(--body);font-weight:500;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(15,23,42,.08);font-weight:600}

/* ---------- Formulir · ui/Form.tsx ---------- */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>label,.field .label{font-size:.8125rem;font-weight:500;color:var(--body)}
.field .hint{font-size:.75rem;color:var(--muted)}
.req{color:var(--danger)}
.err{color:var(--danger);font-size:.75rem}
:where(.input,.select,.textarea,.field input:not([type=checkbox],[type=radio],[type=file],[type=range]),.field select,.field textarea,.search-input input){height:var(--h-md);width:100%;min-width:0;border:1px solid var(--input-line);border-radius:var(--r-input);background:var(--input-bg);padding:0 12px;font-size:.875rem;color:var(--ink);transition:border-color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast)}
:where(.textarea,.field textarea){height:auto;min-height:96px;padding:10px 12px;line-height:1.5;resize:vertical}
:where(.select,.field select){appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
:where(.input,.select,.textarea,.field input,.field select,.field textarea,.search-input input)::placeholder{color:#8A97AB}
:where(.input,.select,.textarea,.field input,.field select,.field textarea,.search-input input):hover:not(:disabled){border-color:var(--input-hover)}
:where(.input,.select,.textarea,.field input,.field select,.field textarea,.search-input input):focus{outline:none;border-color:var(--primary);background-color:var(--paper)}
:where(.input,.select,.textarea,.field input,.field select,.field textarea,.search-input input):focus-visible{box-shadow:0 0 0 3px var(--primary-light)}
:where(.input,.select,.textarea,.field input,.field select,.field textarea):disabled{background-color:var(--neutral-light);color:#A6B1C2;border-color:var(--line);cursor:not-allowed}
:where(.input,.select,.textarea,.field input,.field select,.field textarea)[aria-invalid=true]{border-color:var(--danger);background-color:var(--paper)}
.search-input{position:relative;min-width:0}
.search-input .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.search-input input{padding-left:38px}
.ui-input-group{display:flex;align-items:stretch;min-width:0;border-radius:var(--r-input)}
/* input and button read as one control: the focus ring goes around both */
.ui-input-group:has(>:is(input,select):focus-visible){box-shadow:0 0 0 3px var(--primary-light)}
.ui-input-group>:is(input,select):focus-visible{box-shadow:none}
.ui-input-group>*{border-radius:0!important}
.ui-input-group>:first-child{border-top-left-radius:var(--r-input)!important;border-bottom-left-radius:var(--r-input)!important}
.ui-input-group>:last-child{border-top-right-radius:var(--r-input)!important;border-bottom-right-radius:var(--r-input)!important}
.ui-input-group>input{flex:1;min-width:0}
.ui-input-group>*+*{margin-left:-1px}
.ui-input-group>.btn{height:auto}
.ui-input-group-text{display:flex;align-items:center;padding:0 12px;background:var(--neutral-light);border:1px solid var(--input-line);color:var(--body);font-size:.8125rem;font-weight:500;white-space:nowrap}
/* Kotak centang & radio */
:where(.checkbox,.radio,.ui-check input,.ui-choice input,.field input,td input,th input):is([type=checkbox],[type=radio]){appearance:none;-webkit-appearance:none;margin:0;flex:none;width:18px;height:18px;border:1px solid var(--input-hover);background:var(--paper);cursor:pointer;display:inline-grid;place-items:center;transition:background var(--dur-fast),border-color var(--dur-fast)}
:where(.checkbox,.ui-check input,.ui-choice input,.field input,td input,th input)[type=checkbox]{border-radius:4px}
:where(.checkbox,.ui-check input,.ui-choice input,.field input,td input,th input)[type=checkbox]:checked{background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 7'/%3E%3C/svg%3E") center/13px no-repeat;border-color:var(--primary)}
:where(.checkbox,.ui-check input,.ui-choice input,.field input,td input,th input)[type=checkbox]:indeterminate{background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/13px no-repeat;border-color:var(--primary)}
:where(.radio,.ui-check input,.ui-choice input,.field input)[type=radio]{border-radius:999px}
:where(.radio,.ui-check input,.ui-choice input,.field input)[type=radio]:checked{border:5px solid var(--primary);background:var(--paper)}
:where(.checkbox,.radio,.ui-check input,.ui-choice input,.field input,td input,th input):is([type=checkbox],[type=radio]):hover:not(:disabled){border-color:var(--primary)}
:where(.checkbox,.radio,.ui-check input,.ui-choice input,.field input):is([type=checkbox],[type=radio]):disabled{background-color:var(--neutral-light);border-color:var(--line);cursor:not-allowed}
.ui-check{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;cursor:pointer}
.ui-check input{margin-top:1px}
.ui-choice{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;cursor:pointer;background:var(--paper)}
.ui-choice:hover{border-color:var(--muted)}
.ui-choice:has(input:checked){border-color:var(--primary);background:color-mix(in srgb,var(--primary-light) 45%,var(--paper));box-shadow:inset 0 0 0 1px var(--primary)}
.ui-choice input{margin-top:2px}
.ui-choice strong{display:block;font-size:.86rem}
.ui-choice small{display:block;font-size:.75rem;color:var(--muted);margin-top:2px}
.ui-choice.disabled{opacity:.6;cursor:not-allowed;background:var(--hover)}
/* Saklar */
.switch{display:inline-flex;align-items:center;gap:10px;font-size:.8125rem;font-weight:500;color:var(--body);cursor:pointer;border:0;background:none;padding:0}
.switch .track-sw{width:36px;height:20px;border-radius:999px;background:#CBD5E1;position:relative;flex:none;transition:background .15s}
.switch .track-sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.25);transition:transform .15s}
.switch[aria-checked=true]{color:var(--ink)}
.switch[aria-checked=true] .track-sw{background:var(--primary)}
.switch[aria-checked=true] .track-sw::after{transform:translateX(16px)}
/* Unggah berkas. The file input lies over the whole box, unseen: Tab, Enter/Space and a dropped file all reach it */
.ui-file{position:relative;border:1px dashed var(--input-hover);border-radius:var(--r-input);padding:14px;display:flex;align-items:center;gap:12px;background:var(--input-bg);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.ui-file .grow small{display:block;font-size:.72rem;color:var(--muted)}
:is(.ui-file,.ui-image) input[type=file]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;font-size:0}
:is(.ui-file,.ui-image) input[type=file]::file-selector-button{cursor:pointer}
:is(.ui-file,.ui-image) input[type=file]:disabled{cursor:not-allowed}
.ui-file:hover,.ui-image:hover .ui-image-frame{border-color:var(--primary)}
:is(.ui-file,.ui-image):hover .btn-o{border-color:var(--input-hover);box-shadow:var(--shadow-hover)}
.ui-file:has(input:focus-visible),.ui-image:has(input:focus-visible) .ui-image-frame{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.ui-file:has(input[aria-invalid=true]),.ui-image:has(input[aria-invalid=true]) .ui-image-frame{border-color:var(--danger)}
.ui-file:has(input[aria-invalid=true]){background:var(--paper)}
:is(.ui-file,.ui-image):has(input:disabled){opacity:.6}
.ui-file:has(input:disabled),.ui-image:has(input:disabled) .ui-image-frame{border-color:var(--input-hover);box-shadow:none}
/* chosen files under the box, each with its size and a remove button */
.ui-file-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;min-width:0}
.ui-file-list li{display:flex;align-items:center;gap:10px;min-width:0;padding:4px 4px 4px 12px;border:1px solid var(--line);border-radius:var(--r-input);background:var(--paper)}
.ui-file-list strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;font-weight:500;color:var(--ink)}
.ui-file-list small{flex:none;font-size:.72rem;color:var(--muted)}
/* Pemilih gambar: a frame in the target ratio (--ratio) with the preview; .compact puts a thumbnail beside the button and hint */
.ui-image{position:relative;display:block;min-width:0}
.ui-image-frame{position:relative;display:grid;place-items:center;aspect-ratio:var(--ratio,1);overflow:hidden;border:1px dashed var(--line-strong);border-radius:var(--r-card);background:var(--neutral-light);color:var(--faint);text-align:center;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.ui-image-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ui-image-frame:has(img){border-style:solid;border-color:var(--line);background:var(--hover)}
.ui-image-frame:has(img) .ui-image-empty{display:none}
.ui-image-empty{display:grid;gap:2px;line-height:1.2;padding:8px}
.ui-image-empty b{font-size:1.5rem;font-weight:700}
.ui-image-empty small{font-size:.75rem}
.ui-image>.btn{position:absolute;right:8px;bottom:8px}
.ui-image.compact{display:flex;align-items:center;gap:16px}
.ui-image.compact .ui-image-frame{flex:none;width:72px;border-radius:var(--r-input)}
.ui-image.compact .ui-image-frame img{object-fit:cover}
.ui-image.compact .ui-image-empty{padding:4px}
.ui-image.compact .ui-image-empty b{font-size:.875rem}
.ui-image.compact .ui-image-empty small{display:none}
.ui-image-side{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
/* Baris filter di atas tabel */
.filters{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line)}
.filters .field{flex:1 1 160px}
.filters .field.wide{flex:1 1 260px}

/* ---------- Tabel data · ui/DataTable.tsx ---------- */
.tw-wrap{overflow-x:auto}
.table,.tw-wrap table{width:100%;border-collapse:collapse}
:is(.table,.tw-wrap table) th{font-size:.72rem;font-weight:600;color:var(--body);text-align:left;padding:10px 18px;background:var(--hover);border-bottom:1px solid var(--line);white-space:nowrap}
:is(.table,.tw-wrap table) td{padding:12px 18px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:.84rem}
:is(.table,.tw-wrap table) tbody tr:last-child td{border-bottom:0}
:is(.table,.tw-wrap table) tbody tr:hover td{background:color-mix(in srgb,var(--hover) 60%,var(--paper))}
:is(.table,.tw-wrap table) td small{display:block;font-size:.72rem;color:var(--muted);margin-top:2px}
:is(.table,.tw-wrap table) :is(td,th).r{text-align:right}
.table-count{padding:10px 18px;font-size:.78rem;color:var(--muted);border-bottom:1px solid var(--line)}
.pager{display:flex;align-items:center;gap:10px;justify-content:flex-end;padding:10px 18px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.pager button{width:30px;height:30px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);display:inline-grid;place-items:center}
.pager button[disabled]{opacity:.4;cursor:not-allowed}
/* server-rendered pager: links, a span with aria-disabled at either end, one chevron flipped for "previous" */
.pager :is(a,span.pg){width:30px;height:30px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);display:inline-grid;place-items:center;color:var(--ink);text-decoration:none}
.pager a:hover{border-color:var(--muted)}
.pager [aria-disabled=true]{opacity:.4;cursor:not-allowed}
.pager .icon{width:14px;height:14px}
.pager .prev .icon{transform:scaleX(-1)}
/* phones: table rows become cards (no sideways scroll); td.r (row actions) stays top right, a second td.r (the
   DataTable onRowClick chevron) goes under it, data-label prefixes a cell */
@media (max-width:640px){
  .table.stack-sm-rows thead{display:none}
  .table.stack-sm-rows tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:12px 16px;border-bottom:1px solid var(--line)}
  .table.stack-sm-rows tbody tr:last-child{border-bottom:0}
  .table.stack-sm-rows td{display:block;padding:0;border:0}
  .table.stack-sm-rows td.r{grid-column:2;grid-row:1}
  .table.stack-sm-rows td.r ~ td.r{grid-row:2}
  .table.stack-sm-rows td:not(:first-child):not(.r){grid-column:1}
  .table.stack-sm-rows td[data-label]::before{content:attr(data-label) " · ";color:var(--muted);font-size:.75rem}
  .table.stack-sm-rows tbody tr:hover td{background:none}
  .pager{justify-content:center}
}
/* menu in a table row; .up (labmu-ui.js) when it would run past the bottom of its scroll box */
.row-menu{position:relative;display:inline-block}
.row-menu .ui-menu{position:fixed;min-width:200px;text-align:left} /* top/left set by placeMenu (js) or RowMenu (react) */
.ui-menu .danger{color:var(--danger)}

/* ---------- Daftar deskripsi · ui/DescList.tsx ---------- */
.ui-dl{display:grid;grid-template-columns:180px minmax(0,1fr);margin:0}
.ui-dl dt{padding:10px 0;color:var(--body);font-size:.8rem;border-bottom:1px solid var(--line)}
.ui-dl dd{margin:0;padding:10px 0;font-size:.85rem;border-bottom:1px solid var(--line);min-width:0;overflow-wrap:anywhere}
.ui-dl dt:last-of-type,.ui-dl dd:last-of-type{border-bottom:0}
.ui-dl.compact{grid-template-columns:104px minmax(0,1fr)}
.cbox{border:1px solid var(--line);border-radius:var(--r-ctl);padding:9px 12px;font-size:.84rem;background:var(--hover);min-height:38px;overflow-wrap:anywhere}
.cbox.new{background:color-mix(in srgb,var(--primary-light) 60%,var(--paper));border-color:var(--primary-border)}

/* ---------- Linimasa & langkah · ui/Timeline.tsx · ui/Wizard.tsx ---------- */
.ui-timeline{display:flex;flex-direction:column}
.ui-tl{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding-bottom:16px;position:relative}
.ui-tl:not(:last-child)::before{content:"";position:absolute;left:10px;top:22px;bottom:0;width:1.5px;background:var(--line)}
.ui-tl-dot{width:22px;height:22px;border-radius:999px;background:var(--primary-light);color:var(--primary);display:grid;place-items:center}
.ui-tl-dot .icon{width:13px;height:13px}
.ui-tl-dot.warn{background:var(--warning-light);color:var(--warning)}
.ui-tl-dot.bad{background:var(--danger-light);color:var(--danger)}
.ui-tl-dot.neutral{background:var(--neutral-light);color:var(--neutral)}
.ui-tl-dot.info{background:var(--info-light);color:var(--info)}
.ui-tl strong{font-size:.84rem}
.ui-tl small{display:block;font-size:.72rem;color:var(--muted);margin-top:2px}
.ui-tl p{font-size:.8rem;color:var(--body);margin-top:4px}
.ui-stepper{display:flex;margin:4px 0 16px;flex-wrap:wrap;row-gap:8px;list-style:none;padding:0}
.ui-step{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--muted);padding-right:14px}
.ui-step i{width:22px;height:22px;border-radius:999px;border:1.5px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:.68rem;font-weight:700;background:var(--paper);flex:none}
.ui-step.done i{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.ui-step.current{color:var(--ink);font-weight:600}
.ui-step.current i{border-color:var(--primary);color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.ui-step.failed i{background:var(--danger);border-color:var(--danger);color:#fff}
.ui-step+.ui-step::before{content:"";width:18px;height:1.5px;background:var(--line);margin-right:8px}
.ui-step.done+.ui-step::before{background:var(--primary)}
.stepper-pills{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;list-style:none;padding:0}
.stepper-pills li{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.stepper-pills li i{font-style:normal;width:20px;height:20px;border-radius:999px;display:grid;place-items:center;background:var(--neutral-light);font-size:.68rem;font-weight:700}
.stepper-pills li.on{border-color:var(--primary);color:var(--primary);font-weight:600}
.stepper-pills li.on i{background:var(--primary);color:var(--on-primary)}
.stepper-pills li.done i{background:var(--primary-light);color:var(--primary)}

/* ---------- Progres ---------- */
.progress{height:8px;border-radius:999px;background:var(--neutral-light);overflow:hidden;display:flex}
.progress span{background:var(--primary)}
.progress span.w{background:#D6A73E}
.progress span.g{background:#AEB9C7}

/* ---------- Status kosong · ui/Feedback.tsx ---------- */
.empty-state{padding:36px 20px;text-align:center;color:var(--muted)}
.empty-state .icon{width:30px;height:30px;color:var(--primary-support);margin-bottom:8px}
.empty-state h3{color:var(--ink);margin-bottom:4px}
.empty-state p{font-size:.8rem;max-width:42ch;margin-inline:auto}
.empty-state .btn{margin-top:14px}
/* .ill: the icon in a soft circle; .compact: text only, for a small card */
.empty-state .ill{width:72px;height:72px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%;background:var(--primary-light);color:var(--primary)}
.empty-state .ill .icon{width:32px;height:32px;margin:0;color:currentColor}
.empty-state.compact{padding:14px 12px}

/* ---------- Teks kaya (HTML dari editor, mis. adapter Quill) · ui/Layout.tsx Rich ---------- */
.rich{line-height:1.7;color:var(--body);overflow-wrap:anywhere}
.rich>:first-child{margin-top:0}
.rich :is(p,ul,ol){margin:0 0 .75em}
.rich :is(h1,h2,h3){margin:1.1em 0 .4em;line-height:1.3;font-weight:700;color:var(--ink)}
.rich h1{font-size:1.375em}
.rich h2{font-size:1.2em}
.rich h3{font-size:1.05em}
.rich :is(ul,ol){padding-left:1.25em}
.rich li{margin:.2em 0}
.rich .ql-indent-1{margin-left:1.5em}
.rich .ql-indent-2{margin-left:3em}
.rich .ql-indent-3{margin-left:4.5em}
.rich a{color:var(--primary);text-decoration:underline}
.rich img{max-width:100%;height:auto;border-radius:8px}

/* ---------- Panel merek · background master per produk ---------- */
/* Panel login kiri, sambutan on-boarding, section penutup, kartu promosi. Teks putih; isi kecil taruh di kartu kaca (.brand-glass). */
.brand-panel{position:relative;overflow:hidden;color:#fff;background:linear-gradient(var(--brand-bg-shade,transparent),var(--brand-bg-shade,transparent)),var(--brand-bg,none) center/cover no-repeat,var(--brand-gradient,var(--primary))}
.brand-panel :focus-visible{outline-color:#fff}
.brand-panel .eyebrow{color:rgba(255,255,255,.82)}
.brand-glass{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-float);backdrop-filter:blur(6px)}

/* ---------- Tombol Masuk dengan M-ID · ui/Button.tsx ---------- */
/* Satu-satunya tombol masuk di semua produk; warnanya sama di semua merek. */
.mid-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;border-radius:var(--r-pill);background:var(--mid);color:#fff;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;transition:background .15s,box-shadow .15s,transform .05s}
.mid-btn:hover{background:var(--mid-hover);box-shadow:0 6px 18px color-mix(in srgb,var(--mid) 28%,transparent)}
.mid-btn:active{transform:translateY(1px);box-shadow:none}
.mid-btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.mid-btn .mid-mark{height:24px;width:auto;flex:none}
.mid-btn-lg{height:52px;padding:0 24px;font-size:15px}
.mid-btn-lg .mid-mark{height:28px}

/* ---------- Avatar & ikon domain · ui/Avatar.tsx ---------- */
.symbol{width:32px;height:32px;border-radius:999px;background:var(--primary-light);color:var(--primary);display:grid;place-items:center;font-size:.72rem;font-weight:700;flex:none}
.symbol.lg{width:44px;height:44px;font-size:.9rem}
img.symbol{object-fit:cover}
.domain-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--primary-light);color:var(--primary)}
.domain-icon .icon{width:18px;height:18px}
.domain-icon.member{background:var(--domain-member-bg);color:var(--domain-member-fg)}
.domain-icon.money{background:var(--domain-money-bg);color:var(--domain-money-fg)}
.domain-icon.access{background:var(--domain-access-bg);color:var(--domain-access-fg)}

/* ---------- Baris pekerjaan (daftar perkara) ---------- */
.work-list{display:flex;flex-direction:column}
.work-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:12px;align-items:center;width:100%;padding:14px 18px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;color:inherit;text-decoration:none;cursor:pointer;font:inherit}
.work-row:last-child{border-bottom:0}
.work-row:hover{background:var(--hover)}
.work-row-title{display:block;font-weight:600;font-size:.86rem}
.work-row-meta{display:block;font-size:.75rem;color:var(--muted);margin-top:2px}
.work-row-end{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.work-row-end small{font-size:.72rem;color:var(--muted)}
.work-row>.icon{color:var(--muted);width:16px}
@media (max-width:620px){.work-row{grid-template-columns:auto minmax(0,1fr) auto;row-gap:8px}.work-row-end{grid-column:2;grid-row:2;align-items:flex-start}.work-row>.icon{grid-column:3;grid-row:1}}

/* ---------- Dialog, sheet, menu, toast · ui/Modal.tsx · ui/Popover.tsx ---------- */
dialog.modal{border:0;padding:0;border-radius:var(--r-modal);box-shadow:var(--shadow-lg);width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);color:var(--ink);background:var(--paper)}
dialog.modal.wide{width:min(760px,calc(100vw - 32px))}
dialog.modal::backdrop{background:rgba(15,23,42,.42)}
.modal-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 20px 12px}
.modal-h h2{font-size:1.05rem}
.modal-h p{font-size:.8rem;color:var(--muted);margin-top:4px}
.modal-h>.btn-icon{flex:none}
.modal-b{padding:4px 20px 18px;overflow:auto;max-height:calc(100vh - 210px)}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line);background:var(--hover);border-radius:0 0 var(--r-modal) var(--r-modal);flex-wrap:wrap}
dialog.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:80vh;border:0;border-radius:20px 20px 0 0;padding:8px 16px calc(16px + env(safe-area-inset-bottom));background:var(--paper);box-shadow:0 -8px 30px rgba(15,23,42,.18);animation:lm-sheet-in var(--dur-slow) var(--ease)}
dialog.sheet::backdrop{background:rgba(15,23,42,.45)}
@keyframes lm-sheet-in{from{transform:translateY(100%)}to{transform:none}}
.ui-menu{position:absolute;z-index:40;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);min-width:260px;padding:8px}
.ui-menu button,.ui-menu a{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:9px 10px;border-radius:8px;text-align:left;font-size:.8125rem;color:var(--ink);text-decoration:none;cursor:pointer}
.ui-menu button:hover,.ui-menu a:hover{background:var(--hover);color:var(--primary)}
.ui-menu [aria-checked=true]{background:var(--primary-light);color:var(--primary);font-weight:600}
.ui-menu-group{font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:10px 10px 4px}
.ui-menu-head{padding:10px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--line);margin-bottom:6px}
/* Toast (snackbar, Muhammadiyah ID look): dark, tone icon, close button, bottom left; full width on phones */
.toast{position:fixed;left:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:12px;min-width:288px;max-width:min(560px,calc(100vw - 48px));min-height:48px;padding:6px 6px 6px 16px;border-radius:var(--r-ctl);background:var(--ink);color:#fff;font-size:.875rem;font-weight:500;line-height:1.43;box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px rgba(0,0,0,.14),0 1px 18px rgba(0,0,0,.12);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.toast.show{opacity:1;transform:none;pointer-events:auto}
.toast-ic{width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:var(--toast-icon) center/contain no-repeat;mask:var(--toast-icon) center/contain no-repeat}
.toast-text{flex:1;padding:8px 0}
.toast-close{width:36px;height:36px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:rgba(255,255,255,.72);cursor:pointer}
.toast-close:hover{background:rgba(255,255,255,.1);color:#fff}
.toast-close .icon{width:18px;height:18px}
.toast[data-tone=success] .toast-ic{color:#81C995;--toast-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E")}
.toast[data-tone=error] .toast-ic{color:#F28B82;--toast-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E")}
.toast[data-tone=warning] .toast-ic{color:#FDD663;--toast-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E")}
.toast[data-tone=info] .toast-ic{color:#8AB4F8;--toast-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E")}
@media (max-width:600px){.toast{left:8px;right:8px;bottom:8px;min-width:0;max-width:none}}

/* Page loading (labmu-ui.js, body[data-ui-loading]): a thin line on top while the next page loads, over a veil that locks the page */
.page-loading{position:fixed;top:0;left:0;right:0;z-index:2147483647;height:3px;overflow:hidden;pointer-events:none;visibility:hidden}
.page-loading-veil{position:fixed;inset:0;z-index:2147483646;background:rgba(255,255,255,.5);visibility:hidden}
.page-loading.is-on,.page-loading.is-on+.page-loading-veil{visibility:visible}
.page-loading::before,.page-loading::after{content:"";position:absolute;top:0;bottom:0;left:0;right:100%;background:var(--primary)}
.page-loading.is-on::before{animation:lm-loading-long 2.1s cubic-bezier(.65,.815,.735,.395) infinite}
.page-loading.is-on::after{animation:lm-loading-short 2.1s cubic-bezier(.165,.84,.44,1) 1.15s infinite}
@keyframes lm-loading-long{0%{left:-35%;right:100%}60%,100%{left:100%;right:-90%}}
@keyframes lm-loading-short{0%{left:-200%;right:100%}60%,100%{left:107%;right:-8%}}
@media (prefers-reduced-motion:reduce){.page-loading.is-on::before{animation:none;right:0}.page-loading.is-on::after{display:none}}

/* ---------- Kerangka aplikasi · Shell.tsx, Sidebar.tsx, navChrome.ts ---------- */
.app{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);background:var(--paper);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:0 14px 18px;z-index:20}
.sidebar .brand{display:flex;align-items:center;gap:8px;height:var(--header-h);margin:0 -14px 14px;padding:0 24px;border-bottom:1px solid var(--line);text-decoration:none}
.sidebar .mark{height:24px;width:auto}
.sidebar .mark-mini{display:none;height:30px;width:auto}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a,.nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;padding:9px 10px;border-radius:var(--r-ctl);color:var(--body);font-weight:500;position:relative;text-decoration:none;cursor:pointer}
.nav a:hover,.nav button:hover{background:var(--hover);color:var(--ink)}
.nav [aria-current=page]{background:var(--primary-light);color:var(--primary);font-weight:600}
.nav .nav-badge{margin-left:auto}
.nav [aria-current=page] .nav-badge{background:var(--primary);color:var(--on-primary)}
.nav .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-section{font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:14px 10px 6px}
.app-sidebar-footer{margin-top:auto;border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:2px}
.app-sidebar-footer small{font-size:.7rem;color:var(--muted);padding:8px 10px 0}
.collapse-btn{position:absolute;right:-15px;top:calc(var(--header-h) / 2 - 15px);width:30px;height:30px;border-radius:999px;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;color:var(--muted);box-shadow:0 2px 8px rgba(15,23,42,.08);z-index:2;cursor:pointer}
.collapse-btn:hover{color:var(--primary);border-color:var(--muted)}
.collapse-btn .icon{width:16px;height:16px;transition:transform .2s ease}
.main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;transition:margin-left .2s ease}
.topbar{position:sticky;top:0;z-index:15;height:var(--header-h);background:color-mix(in srgb,var(--paper) 96%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 28px}
/* Topbar order: .menu-btn and .logo-sm (both only <=900), .who (the profile, always left), then .top-actions on the
   right with search first and tool icons after it; leave .top-actions out when there are no tools */
.topbar .logo-sm{display:none;flex:none}
.topbar .logo-sm :is(img,svg){height:30px;width:auto}
.topbar .search-input{width:300px}
.top-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
/* Who: the signed-in user in the topbar (context on top, name below); .who-card (with .ui-menu) holds name,
   organisation, email and account actions and opens to the right of the profile */
.who{position:relative;min-width:0;flex:0 1 auto}
.who-btn{display:flex;align-items:center;gap:10px;max-width:min(360px,100%);min-width:0;padding:5px 8px;border:1px solid transparent;border-radius:var(--r-ctl);background:none;text-align:left;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.who-btn:hover,.who-btn[aria-expanded=true]{background:var(--hover);border-color:var(--line)}
.who-btn>.icon{width:14px;height:14px;color:var(--muted)}
.who-ctx{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.who-ctx strong{font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-ctx small{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-card{top:calc(100% + 8px);left:0;width:275px;min-width:0;max-width:calc(100vw - 24px);display:flex;flex-direction:column;padding:13px 0;box-shadow:var(--shadow-lg)}
.who-card-id{display:flex;align-items:center;gap:16px;min-width:0;padding:8px 20px}
.who-card .symbol{width:50px;height:50px;font-size:.95rem}
.who-card-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.who-org,.who-mail{font-size:.78rem;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-name{font-size:.94rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-card-act{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:6px;padding:6px 16px 0}
.who-card-act :is(a,button){padding:8px 16px;font-weight:500}
.who-card-act .icon{width:18px;height:18px;color:var(--muted)}
.who-card-act :is(a,button):hover .icon{color:var(--primary)}
/* phone: the card hangs from the topbar (sticky, so positioned) at its left padding, not from the profile */
@media (max-width:575.98px){.who-btn>.symbol,.who-btn>.icon{display:none}.who-btn{max-width:min(52vw,100%)}.who{position:static}.who-card{left:12px}}
.btn-icon .dot-count{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--primary);color:var(--on-primary);font-size:.6rem;font-weight:700;display:grid;place-items:center;border:2px solid var(--paper)}
.content{flex:1;padding:24px 28px 48px;max-width:var(--content-max);width:100%}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head .eyebrow{margin-bottom:6px}
.page-head p{color:var(--body);margin-top:4px}
.head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* Rail ciut (kunci localStorage "ormu:nav-mini") */
body.nav-mini{--sidebar-w:var(--sidebar-mini)}
body.nav-mini .sidebar{padding:0 12px 18px}
body.nav-mini .sidebar .brand{justify-content:center;padding:0;margin:0 -12px 14px}
body.nav-mini .mark{display:none}
body.nav-mini .mark-mini{display:block}
body.nav-mini .lbl,body.nav-mini .app-sidebar-footer small{display:none}
/* the group label becomes a divider on the rail (screen readers still read it) */
body.nav-mini .nav-section{font-size:0;padding:0;margin:8px 6px;border-top:1px solid var(--line)}
body.nav-mini .nav :is(a,button),body.nav-mini .app-sidebar-footer :is(a,button){justify-content:center;padding:10px 0}
body.nav-mini .nav .nav-badge{position:absolute;top:4px;right:6px;min-width:16px;height:16px;padding:0 4px;font-size:.6rem;background:var(--primary);color:var(--on-primary)}
body.nav-mini .collapse-btn .icon{transform:rotate(180deg)}
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:19}
.menu-btn{display:none}
@media (max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .2s ease;width:280px}
  .collapse-btn{display:none}
  .main{margin-left:0}
  body.nav-open .sidebar{transform:none;box-shadow:var(--shadow-lg)}
  body.nav-open .nav-backdrop{display:block}
  .menu-btn{display:inline-grid}
  .topbar .logo-sm{display:flex}
  .topbar{padding:0 12px;gap:6px}
  .topbar .search-input{display:none}
  .content{padding:18px 16px 40px}
  .attention{flex-direction:column;gap:8px}
  .ui-dl{grid-template-columns:minmax(0,1fr)}
  .ui-dl dt{border-bottom:0;padding-bottom:0}
}

/* ---------- Skeleton · ui/Skeleton.tsx ---------- */
/* [data-skeleton] on any container: the app renders the real page markup with dummy rows inside it, and the data
   parts become bars while chrome (th, labels, page head, card header, tabs, buttons) stays text. Paint only, so every
   box keeps the size it has once loaded. Text bars are a thick line-through over transparent text (exactly as wide
   as each line of text, bare text in a td included); box bars fill pills, counts, avatars, images and controls.
   One animation on the container pulses --skel for every bar. Hatches: data-skeleton-bar makes any element a bar
   (an empty sized element becomes a box), data-skeleton-text keeps an auto target (or everything under it) as text.
   Add inert to the container and a role=status label outside it (Skeleton does both). */
@property --skel{syntax:"<color>";inherits:true;initial-value:transparent}
@property --skel-a{syntax:"<number>";inherits:true;initial-value:1}
[data-skeleton]{--skel:var(--line);--skel-a:1;animation:lm-skel 1.6s ease-in-out infinite;pointer-events:none;user-select:none}
@keyframes lm-skel{50%{--skel:color-mix(in srgb,var(--line) 40%,transparent);--skel-a:.4}}
[data-skeleton] :is(td,.kpi-v,.attention-count,.attention h2,.attention p,.work-row-title,.work-row-meta,.work-row-end small,.table-count,.pager>span:not(.pg),.nav .lbl,.nav-section,.who-ctx,.ui-dl dd,[data-skeleton-bar]):not([data-skeleton-text],[data-skeleton-text] *){-webkit-text-fill-color:transparent;text-decoration:line-through var(--skel) .9em;text-decoration-skip-ink:none}
/* Chrome paints a decoration colour that follows an animated property as black inside a visited link, so a text bar in
   a link keeps a still colour and pulses by opacity, driven by the same animation (--skel-a) */
[data-skeleton] :is(a,a *):is(td,.kpi-v,.attention-count,.attention h2,.attention p,.work-row-title,.work-row-meta,.work-row-end small,.table-count,.pager>span:not(.pg),.nav .lbl,.nav-section,.who-ctx,.ui-dl dd,[data-skeleton-bar]):not([data-skeleton-text],[data-skeleton-text] *,[data-skeleton-bar]:empty){text-decoration-color:var(--line);opacity:var(--skel-a)}
[data-skeleton] :is(.pill,.chip,.tab-count,.nav-badge,.dot-count,.symbol,img:not(.brand *,.logo-sm *),.domain-icon,.nav .icon,.pager :is(a,button,span.pg),input:is([type=checkbox],[type=radio]),.track-sw,.progress,[data-skeleton-bar]:empty):not([data-skeleton-text],[data-skeleton-text] *){background:var(--skel)!important;border-color:transparent!important;box-shadow:none!important;-webkit-text-fill-color:transparent}
[data-skeleton] :is(.pill,.chip,.domain-icon,.nav .icon,.pager :is(a,button,span.pg),.progress):not([data-skeleton-text],[data-skeleton-text] *)>*,[data-skeleton] .track-sw:not([data-skeleton-text] *)::after{visibility:hidden}
/* the picture moves out of its own box; the box keeps its size and shows the bar */
[data-skeleton] img:not(.brand *,.logo-sm *,[data-skeleton-text],[data-skeleton-text] *){object-position:-300vw 0}
[data-skeleton] :is(input,select,textarea):not([data-skeleton-text],[data-skeleton-text] *),[data-skeleton] :is(input,textarea):not([data-skeleton-text] *)::placeholder{-webkit-text-fill-color:transparent}
/* chrome inside a data part stays readable; inline-block stops the row's bar from running under the phone label, pre keeps its trailing space */
[data-skeleton] :is(.btn,.btn-link,.text-link){-webkit-text-fill-color:currentcolor}
[data-skeleton] td[data-label]::before{display:inline-block;white-space:pre;-webkit-text-fill-color:currentcolor}
@media (prefers-reduced-motion:reduce){[data-skeleton]{animation:none}}

/* ===== css/onboarding.css ===== */
/* ==========================================================================
   LabMu UI · onboarding.css — on-boarding pengguna baru (dari SatuMu App v2.5,
   src/features/onboarding/*). Empat lapis + panduan halaman:
     1. Sambutan        dialog.onb-dlg      .onb-w .onb-art .onb-body
     2. Tur spotlight   .onb-tour           .onb-spot .onb-pop
     3. Tip kontekstual .onb-tip[data-side]
     4. Panduan memulai .onb-card           .onb-ring .onb-bar .onb-steps  + .onb-launch (menu samping)
     5. Panduan halaman dialog.guide-drawer .guide-h .guide-b .guide-f    + .guide-btn
   Butuh: tokens.css, base.css, app.css. Perilaku: js/labmu-ui.js (LabmuUI.tour, LabmuUI.tip).
   ========================================================================== */

/* ---------- 1. Sambutan ---------- */
dialog.onb-dlg{border:0;padding:0;overflow:hidden;width:min(780px,calc(100vw - 32px));border-radius:var(--r-modal);box-shadow:var(--shadow-lg);background:var(--paper);color:var(--ink)}
dialog.onb-dlg::backdrop{background:rgba(15,23,42,.55)}
dialog.onb-dlg.static{position:relative;inset:auto;margin:0;width:100%;max-width:780px}
.onb-w{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:440px}
.onb-art{background:linear-gradient(var(--brand-bg-shade,transparent),var(--brand-bg-shade,transparent)),var(--brand-bg,none) center/cover no-repeat,var(--brand-gradient,linear-gradient(160deg,var(--primary),var(--primary-pressed)));color:#fff;padding:28px 24px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.onb-step-k{font-size:.6875rem;letter-spacing:.12em;font-weight:650;opacity:.75;text-transform:uppercase;position:relative;z-index:1}
.onb-stage{flex:1;display:grid;place-items:center;position:relative;z-index:1;padding-block:16px}
.onb-tiles{display:flex;flex-direction:column;gap:10px;width:100%}
.onb-tile{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 12px;font-size:.8125rem;font-weight:550;animation:onb-rise .45s var(--ease) both}
.onb-tile:nth-child(2){animation-delay:.08s;margin-left:18px}
.onb-tile:nth-child(3){animation-delay:.16s;margin-left:36px}
.onb-tile .icon{color:var(--sun)}
.onb-tile small{display:block;font-weight:400;opacity:.75;font-size:.72rem}
.onb-badge{width:112px;height:112px;border-radius:28px;background:#fff;color:var(--primary);display:grid;place-items:center;box-shadow:0 16px 40px rgba(0,0,0,.25);animation:onb-rise .45s var(--ease) both}
.onb-badge .icon{width:52px;height:52px}
.onb-role{display:flex;flex-direction:column;align-items:center}
.onb-role-tag{margin-top:16px;background:var(--sun);color:#1F1A05;font-weight:650;font-size:.78rem;border-radius:999px;padding:5px 12px;text-align:center}
.onb-scope{font-size:.75rem;opacity:.8;margin-top:6px;text-align:center}
.onb-mini{background:#fff;color:var(--ink);border-radius:14px;padding:14px;width:100%;box-shadow:0 16px 40px rgba(0,0,0,.25);animation:onb-rise .45s var(--ease) both}
.onb-mini .eyebrow{color:var(--primary)}
.onb-mini .onb-bar{margin:8px 0 10px}
.onb-mini-row{display:flex;align-items:center;gap:8px;font-size:.75rem;padding:5px 0;color:var(--body)}
.onb-mini-row i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line);flex:none}
.onb-mini-row.on{color:var(--primary);font-weight:650}
.onb-mini-row.on i{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.onb-dots{display:flex;gap:6px;position:relative;z-index:1}
.onb-dots span{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.35);transition:width .2s}
.onb-dots span.on{width:20px;background:#fff}
.onb-body{padding:28px 28px 22px;display:flex;flex-direction:column;min-width:0}
.onb-skip{align-self:flex-end;margin:-8px -8px 4px 0}
.onb-body h2{font-size:1.5rem;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.onb-lead{color:var(--body);margin-top:8px}
.onb-list{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.onb-li{display:flex;gap:12px;align-items:flex-start}
.onb-ic{width:36px;height:36px;border-radius:10px;background:var(--primary-light);color:var(--primary);display:grid;place-items:center;flex:none}
.onb-li strong{display:block;font-size:.9rem}
.onb-li p{font-size:.8125rem;color:var(--body);margin-top:2px}
.onb-choices{display:grid;gap:8px;margin-top:18px}
.onb-choice{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:12px 14px;color:var(--ink);font-weight:550;cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast)}
.onb-choice:hover{border-color:var(--muted)}
.onb-choice .onb-ic{width:32px;height:32px;border-radius:9px;background:var(--hover);color:var(--body)}
.onb-choice[aria-checked=true]{border-color:var(--primary);background:var(--primary-light);box-shadow:inset 0 0 0 1px var(--primary)}
.onb-choice[aria-checked=true] .onb-ic{background:var(--primary);color:var(--on-primary)}
.onb-choice small{display:block;font-weight:400;color:var(--muted);font-size:.75rem}
.onb-foot{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.onb-time{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:6px}
@keyframes onb-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:720px){
  .onb-w{grid-template-columns:minmax(0,1fr);min-height:0}
  .onb-art{padding:16px 20px;flex-direction:row;align-items:center;gap:12px}
  .onb-stage{display:none}
  .onb-step-k{flex:1}
  .onb-body{padding:18px 20px}
  .onb-body h2{font-size:1.25rem}
  .onb-list{margin-top:16px;gap:12px}
  .onb-foot .btn{flex:1}
}

/* ---------- 2. Tur spotlight ---------- */
.onb-tour{position:fixed;inset:0;z-index:80}
.onb-spot{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(15,23,42,.58);outline:2px solid rgba(255,255,255,.9);outline-offset:2px;pointer-events:none;transition:all .25s ease}
.onb-pop,.onb-tip{position:fixed;width:min(340px,calc(100vw - 24px));background:var(--paper);color:var(--ink);border-radius:14px;box-shadow:var(--shadow-lg);padding:16px 16px 14px}
.onb-pop{z-index:81;transition:top .25s ease,left .25s ease}
.onb-pop .eyebrow{color:var(--primary)}
.onb-pop h3,.onb-tip h3{font-size:1rem;margin-top:4px}
.onb-pop p,.onb-tip p{font-size:.84rem;color:var(--body);margin-top:6px;line-height:1.5}
.onb-prog{height:3px;border-radius:3px;background:var(--line);margin-top:12px;overflow:hidden}
.onb-prog span{display:block;height:100%;background:var(--primary);transition:width .25s}
.onb-pop-f{display:flex;align-items:center;gap:6px;margin-top:14px}

/* ---------- 3. Tip kontekstual ---------- */
.onb-tip{z-index:35;width:min(300px,calc(100vw - 24px));padding:14px 14px 12px;border:1px solid var(--line);animation:onb-rise .3s var(--ease) both}
.onb-tip::before{content:"";position:absolute;width:12px;height:12px;background:var(--paper);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.onb-tip[data-side=right]::before{left:-7px;top:22px}
.onb-tip[data-side=bottom]::before{top:-7px;left:24px;transform:rotate(135deg)}
.onb-tip[data-side=none]::before{display:none}
.onb-tip.static{position:relative}
.onb-tip-k{display:flex;align-items:center;gap:6px;font-size:.6875rem;letter-spacing:.08em;font-weight:650;color:var(--primary);text-transform:uppercase}
.onb-tip-k .icon{width:14px;height:14px}
.onb-tip-f{display:flex;gap:6px;margin-top:10px;justify-content:flex-end;flex-wrap:wrap}

/* ---------- 4. Panduan memulai (Beranda) ---------- */
.onb-card{border-color:color-mix(in srgb,var(--primary) 22%,var(--line))}
.onb-card-h{display:flex;gap:14px;align-items:center;padding:18px 20px 14px}
.onb-card-h .eyebrow,.onb-fin .eyebrow{color:var(--primary)}
.onb-card-h h2,.onb-fin h2{font-size:1.05rem;margin-top:2px}
.onb-card-h .caption{margin-top:4px}
.onb-card-acts{display:flex;gap:4px;align-items:center;flex:none}
.onb-ring{width:52px;height:52px;flex:none;position:relative;display:grid;place-items:center}
.onb-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.onb-ring b{font-size:.8rem;font-variant-numeric:tabular-nums}
.onb-bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.onb-bar span{display:block;height:100%;border-radius:6px;background:var(--primary);transition:width .4s ease}
.onb-card>.onb-bar{margin:0 20px}
.onb-steps{list-style:none;margin:10px 0 0;padding:0 8px 10px}
.onb-step{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px}
.onb-step+.onb-step{border-top:1px solid var(--line);border-radius:0}
.onb-step.next{background:var(--primary-light);border-radius:10px;border-top-color:transparent}
.onb-step.next+.onb-step{border-top-color:transparent}
.onb-num{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:.75rem;font-weight:650;color:var(--muted);flex:none;background:var(--paper)}
.onb-step.next .onb-num{border-color:var(--primary);color:var(--primary)}
.onb-step.done .onb-num{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.onb-step.done .onb-num .icon{width:14px;height:14px;stroke-width:2.4}
.onb-step strong{font-size:.875rem}
.onb-step p{font-size:.78rem;color:var(--body);margin-top:1px}
.onb-step.done strong{color:var(--body);text-decoration:line-through;text-decoration-color:var(--muted)}
.onb-step.done p{color:var(--muted)}
.onb-rec{display:inline-block;margin-left:6px;font-size:.66rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--warning);background:var(--warning-light);border-radius:4px;padding:1px 6px;vertical-align:1px}
.onb-done-mark{font-size:.75rem;color:var(--muted);flex:none}
.onb-fin{display:flex;gap:16px;align-items:center;padding:20px}
.onb-fin-ic{width:52px;height:52px;border-radius:14px;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;flex:none}
.onb-fin-ic .icon{width:28px;height:28px}
.onb-fin p{font-size:.8125rem;color:var(--body);margin-top:4px}
.onb-rate{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.onb-rate .btn[aria-pressed=true]{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}
@media (max-width:640px){
  .onb-card{position:relative}
  .onb-card-h{padding:14px 14px 10px;align-items:flex-start}
  .onb-card-h .grow{padding-right:64px}
  .onb-card-acts{position:absolute;top:8px;right:8px}
  .onb-card-acts .btn{padding:0 8px;font-size:0;gap:0}
  .onb-card>.onb-bar{margin:0 14px}
  .onb-ring{width:44px;height:44px}
  .onb-step{flex-wrap:wrap;padding:10px 6px}
  .onb-step .btn{margin-left:38px}
  .onb-fin{flex-direction:column;align-items:flex-start;padding:16px}
}
/* Peluncur di menu samping (di atas Bantuan) */
.onb-launch{display:flex;flex-direction:column;gap:6px;width:100%;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:10px;margin-bottom:6px;text-align:left;cursor:pointer;font:inherit;color:inherit}
.onb-launch:hover{border-color:var(--muted)}
.onb-launch-t{display:flex;align-items:center;gap:10px;width:100%;font-weight:600;color:var(--ink);font-size:.84rem}
.onb-launch-t .icon{color:var(--primary)}
.onb-launch-n{margin-left:auto;font-size:.72rem;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.onb-launch .onb-bar{height:4px;width:100%}
@media (min-width:901px){
  body.nav-mini .onb-launch{padding:10px 0;align-items:center;border-color:transparent;position:relative}
  body.nav-mini .onb-launch .onb-bar,body.nav-mini .onb-launch-n,body.nav-mini .onb-launch .lbl{display:none}
  body.nav-mini .onb-launch-t{justify-content:center}
  body.nav-mini .onb-launch::after{content:attr(data-left);position:absolute;top:2px;right:8px;min-width:16px;height:16px;border-radius:8px;background:var(--sun);color:#1F1A05;font-size:.6rem;font-weight:700;display:grid;place-items:center}
}
/* Blok panduan di dialog Bantuan */
.onb-help{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--primary-light);border-radius:12px;padding:12px 14px}
.onb-help strong{display:block;font-size:.875rem}
.onb-help .grow span{font-size:.78rem;color:var(--body)}

/* ---------- 5. Panduan halaman (laci kanan) ---------- */
.guide-btn{gap:6px}
.guide-btn .icon{color:var(--primary)}
dialog.guide-drawer{position:fixed;inset:0 0 0 auto;margin:0;height:100%;max-height:100%;width:min(440px,100vw);border:0;border-radius:16px 0 0 16px;display:flex;flex-direction:column;padding:0;background:var(--paper);color:var(--ink);box-shadow:var(--shadow-lg);animation:guide-in .22s var(--ease)}
dialog.guide-drawer:not([open]){display:none}
dialog.guide-drawer::backdrop{background:rgba(15,23,42,.35)}
dialog.guide-drawer.static{position:relative;inset:auto;height:auto;max-height:none;width:100%;max-width:440px;animation:none}
@keyframes guide-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.guide-h{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 12px;border-bottom:1px solid var(--line)}
.guide-h .eyebrow{color:var(--primary)}
.guide-h h2{font-size:1.35rem;margin-top:2px}
.guide-b{flex:1;overflow-y:auto;padding:16px 20px 24px;display:flex;flex-direction:column;gap:22px}
.guide-lead{color:var(--body);font-size:.9rem;line-height:1.55}
.guide-tour{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;border-radius:12px;padding:12px 14px;background:var(--primary);color:var(--on-primary);margin-top:-6px;cursor:pointer;font:inherit}
.guide-tour:hover{background:var(--primary-active)}
.guide-tour-ic{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.guide-tour strong{display:block;font-size:.9rem}
.guide-tour .grow span{font-size:.75rem;opacity:.85}
.guide-sec h3{font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:650;margin-bottom:8px}
.guide-parts{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.guide-part{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:var(--paper);padding:11px 14px;color:var(--ink);cursor:pointer;font:inherit}
.guide-part+.guide-part{border-top:1px solid var(--line)}
.guide-part:hover{background:var(--hover)}
.guide-part.cur{background:var(--primary-light)}
.guide-part strong{font-size:.875rem}
.guide-part .icon{color:var(--muted);width:16px;height:16px}
.guide-d{display:block;font-size:.78rem;color:var(--body);margin-top:2px;line-height:1.45}
.guide-cur{display:inline-block;margin-left:8px;font-size:.66rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);background:var(--paper);border-radius:4px;padding:1px 6px;vertical-align:1px}
.guide-how{border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.guide-how+.guide-how{margin-top:8px}
.guide-how summary{list-style:none;cursor:pointer;padding:12px 40px 12px 14px;font-weight:600;font-size:.875rem;position:relative}
.guide-how summary::-webkit-details-marker{display:none}
.guide-how summary::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.guide-how[open] summary{color:var(--primary)}
.guide-how[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.guide-how ol{margin:0;padding:0 14px 14px;list-style:none;counter-reset:g;display:flex;flex-direction:column;gap:8px}
.guide-how li{counter-increment:g;position:relative;padding-left:30px;font-size:.84rem;color:var(--body);line-height:1.5}
.guide-how li::before{content:counter(g);position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--primary-light);color:var(--primary);font-size:.7rem;font-weight:700;display:grid;place-items:center}
.guide-how b{color:var(--ink);font-weight:600}
.guide-terms{display:flex;flex-direction:column;gap:10px;margin:0}
.guide-terms div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;font-size:.82rem}
.guide-terms dt{font-weight:600}
.guide-terms dd{margin:0;color:var(--body);line-height:1.45}
.guide-f{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--line);font-size:.82rem;color:var(--body);background:var(--hover)}
@media (max-width:640px){
  dialog.guide-drawer:not(.static){inset:auto 0 0 0;width:100%;height:88vh;border-radius:20px 20px 0 0}
  .guide-btn span{display:none}
  .guide-btn{padding:0 10px}
  .guide-terms div{grid-template-columns:minmax(0,1fr);gap:2px}
}
@media (prefers-reduced-motion:reduce){.onb-tile,.onb-badge,.onb-mini,.onb-tip,dialog.guide-drawer{animation:none}.onb-spot,.onb-pop{transition:none}}

/* ===== css/marketing.css ===== */
/* ==========================================================================
   LabMu UI · marketing.css — halaman produk / landing page
   Aktifkan dengan <body data-surface="marketing"> (ukuran dasar 16px).
   Pola diambil dari Landing SatuMu v0.2, AMANAH v0.4, AIMU v0.8.
   Butuh: tokens/tokens.css, css/base.css, css/app.css (tombol & pill)
   ========================================================================== */
[data-surface=marketing]{font-size:16px;line-height:1.55;background:var(--canvas)}
[data-surface=marketing] a{text-decoration:none}
.wrap{width:min(var(--max),calc(100% - var(--gutter) * 2));margin-inline:auto}
.section{padding-block:var(--section-y)}
.section-line{border-top:1px solid var(--line)}
.section-alt{background:color-mix(in srgb,var(--primary-light) 55%,var(--canvas))}

/* Tipografi tampilan */
.display{font-size:clamp(46px,5.4vw,78px);line-height:1.035;letter-spacing:var(--display-tracking);font-weight:800;text-wrap:balance;margin:0}
.display em,.h2 em,.closing h2 em{font-style:normal;color:var(--primary)}
.h2{font-size:clamp(34px,3.7vw,52px);line-height:1.08;letter-spacing:var(--h2-tracking);font-weight:800;text-wrap:balance;margin:0}
.lead{font-size:18px;line-height:1.6;color:var(--text)}
[data-surface=marketing] .eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;color:var(--eyebrow)}
.eyebrow .dot,.dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:currentColor;flex-shrink:0}
.status-dot{display:inline-block;flex:0 0 7px;width:7px;height:7px;background:var(--primary-support);border-radius:50%;margin-top:6px;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-support) 18%,transparent)}
[data-surface=marketing] .text-link{gap:10px;font-size:14px;min-height:44px}
.text-link:hover{color:var(--primary-active)}
.text-link .icon{width:17px;height:17px;transition:transform var(--dur-slow)}

/* Tombol marketing: garis 1.5px, sedikit terangkat saat hover, panah bergeser */
[data-surface=marketing] .btn{border-width:1.5px;font-size:14px;gap:10px}
[data-surface=marketing] .btn-p:hover,[data-surface=marketing] .btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px var(--shadow-primary)}
[data-surface=marketing] .btn:hover .icon,.text-link:hover .icon{transform:translateX(3px)}
[data-surface=marketing] .btn .icon{transition:transform var(--dur-slow)}
.actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* Header situs */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--canvas) 92%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(16px);transition:box-shadow var(--dur-slow)}
.site-header.is-scrolled{box-shadow:0 6px 20px -16px rgba(15,23,42,.5)}
.notice-bar{background:var(--ink);color:#fff;text-align:center;font-size:13px;font-weight:500;padding:8px 16px}
.header-bar{height:var(--site-header-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header .brand{display:flex;align-items:center;gap:14px;color:var(--ink)}
.site-header .logo-full{height:34px;width:auto}
/* Lockup endorsement "Produk | Powered by LabMu" (Brand Guideline Produk Turunan): garis tegak setinggi logogram,
   "Powered by" kecil di atas logotype LabMu (± ½ tinggi kapital logotype produk). Hitam di latar terang, putih di gelap. */
.brand-by{display:flex;flex-direction:column;justify-content:center;gap:1px;align-self:stretch;margin-block:6px;padding-left:14px;border-left:1.5px solid var(--ink);font-size:11px;line-height:1;color:var(--ink)}
.brand-by img,.brand-by svg{height:14px;width:auto;display:block}
.brand-by b{color:var(--ink)}
.site-footer .endorse{display:inline-flex;align-items:center;gap:12px}
.site-footer .endorse img{height:20px;width:auto}
.main-nav{display:flex;align-items:center;gap:2px}
.main-nav a{padding:9px 16px;border-radius:var(--r-pill);font-size:14px;font-weight:500;color:var(--text);transition:background .2s,color .2s}
.main-nav a:hover{background:var(--surface);color:var(--ink)}
.main-nav a.active,.main-nav a[aria-current=page]{background:var(--primary);color:var(--on-primary)}
.header-actions{display:flex;align-items:center;gap:12px}
.round-button{display:none;width:42px;height:42px;border-radius:999px;border:1px solid var(--line-strong);background:var(--paper);place-items:center;color:var(--ink)}
.mobile-nav{display:flex;flex-direction:column;padding-block:8px 16px}
.mobile-nav a{padding:12px 0;border-bottom:1px solid var(--line);font-weight:500}

/* Hero */
.hero{padding-block:62px 52px}
.hero-meta{display:flex;align-items:center;justify-content:space-between;gap:20px}
.hero-meta .edition{font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:36px;align-items:center;margin-top:22px}
.hero-copy .lead{max-width:640px;margin-top:25px}
.hero-copy .actions{margin-top:28px}
.hero-availability{display:flex;align-items:flex-start;gap:9px;max-width:620px;font-size:12px;line-height:1.65;color:var(--muted);margin-top:18px}
.hero-media{position:relative;border-radius:var(--radius);overflow:visible}
.hero-media>img{display:block;width:100%;height:auto;border-radius:0 var(--radius) var(--radius) var(--radius)}

/* Kartu melayang (ilustrasi produk di hero) */
.float-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-float);padding:12px 14px;color:var(--ink);font-size:11px;line-height:1.4;box-shadow:var(--shadow-float);max-width:240px}
.fc-head{display:flex;align-items:center;gap:10px}
.fc-head b{display:block;font-size:12px;font-weight:650}
.fc-head small{display:block;font-size:10px;color:var(--muted);margin-top:1px}
.fc-ic{width:30px;height:30px;border-radius:9px;background:var(--primary-light);color:var(--primary);display:grid;place-items:center;flex:none}
.fc-ic .icon{width:17px;height:17px}
.fc-list{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--line);display:grid;gap:6px}
.fc-list li{display:flex;align-items:center;gap:7px;color:var(--text)}
.fc-list .icon{width:13px;height:13px;color:var(--primary-support);stroke-width:2.2}
.fc-rows{margin-top:10px;border-top:1px solid var(--line);padding-top:4px}
.fc-rows div{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:6px 0;border-bottom:1px dashed var(--line)}
.fc-rows div:last-child{border-bottom:0}
.fc-rows span{color:var(--text)}

/* Indeks produk / kemampuan (3 kolom di bawah hero) */
.product-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.product-item{padding:26px 30px 24px;border-right:1px solid var(--line);position:relative;color:inherit;display:block}
.product-item:first-child{padding-left:0}
.product-item:last-child{border-right:0;padding-right:0}
.product-top{display:flex;align-items:center;gap:11px;margin-bottom:17px;color:var(--primary)}
.product-top .icon{width:22px;height:22px}
.product-top .label{font-size:10px;letter-spacing:.08em;font-weight:650;text-transform:uppercase;color:var(--ink)}
.product-top .pill{margin-left:auto}
.product-item h2{font-size:30px;letter-spacing:-.02em;line-height:1.2;font-weight:750;display:flex;justify-content:space-between;align-items:center;transition:transform .28s var(--ease)}
.product-item h2 .icon{width:20px;height:20px;color:var(--primary);transition:transform .28s var(--ease)}
.product-item:hover h2{transform:translateY(-2px)}
.product-item:hover h2 .icon{transform:translate(2px,-2px)}
.product-item p{margin-top:7px;color:var(--muted);font-size:14px;max-width:310px}
.product-url{font-size:11px;color:var(--faint);display:block;margin-top:18px}

/* Kepala bab (01 ORGANISASI ···· Profil · Kepengurusan) */
.chapter-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:24px;border-bottom:1px solid var(--line-strong);margin-bottom:42px}
.chapter-name{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:10px}
.chapter-number{color:var(--faint);margin-right:10px;font-weight:500}
.chapter-url{font-size:12px;color:var(--muted)}

/* Blok fitur 2 kolom */
.feature-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center}
.feature-copy .eyebrow{margin-bottom:18px;font-size:10px}
.feature-copy>p{font-size:16px;line-height:1.75;color:var(--text);margin-top:22px;max-width:540px}
.feature-copy .actions{margin-top:26px}
.check-list{list-style:none;padding:0;margin:22px 0 0}
.check-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;margin-top:10px;color:var(--text)}
.check-list .icon{width:17px;height:17px;margin-top:3px;color:var(--primary)}

/* Janji / prinsip 3 kolom */
.promise-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.promise-row>div{padding:0 25px;border-right:1px solid var(--line);display:flex;gap:13px;align-items:flex-start}
.promise-row>div:first-child{padding-left:0}
.promise-row>div:last-child{padding-right:0;border:0}
.promise-row .icon{width:21px;height:21px;margin-top:3px;color:var(--primary)}
.promise-row h3{font-size:13px;line-height:1.5}
.promise-row p{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}

/* Kepala section + peran */
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin-bottom:32px;flex-wrap:wrap}
.section-heading .eyebrow{margin-bottom:17px}
.section-heading>p{max-width:320px;color:var(--muted);font-size:14px;line-height:1.7}
.access-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--primary);border-bottom:1px solid var(--line)}
.access-item{padding:29px 30px 30px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.access-item:first-child{padding-left:0}
.access-item:last-child{padding-right:0;border:0}
.access-ic{width:44px;height:44px;border-radius:var(--r-float);background:var(--primary-light);color:var(--primary);display:grid;place-items:center}
.access-ic .icon{width:22px;height:22px}
.access-item h3{font-size:22px;letter-spacing:-.01em;margin-top:18px}
.access-subtitle{font-size:15px;line-height:1.5;margin-top:8px;font-weight:600}
.access-item p{font-size:13px;color:var(--muted);line-height:1.7;margin-top:8px}
.access-item ul{list-style:none;padding:0;margin:16px 0 0;border-top:1px solid var(--line)}
.access-item li{display:flex;gap:9px;font-size:12px;color:var(--text);padding:9px 0;border-bottom:1px solid var(--line)}
.access-item li .icon{width:15px;height:15px;margin-top:2px;color:var(--primary)}

/* Tab peran (pil) & tab garis bawah kecil di bawah hero */
.role-tabs{display:inline-flex;gap:2px;padding:4px;background:var(--surface);border-radius:var(--r-pill)}
.role-tab{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:104px;padding:10px 18px;font-size:13px;font-weight:500;border-radius:var(--r-pill);white-space:nowrap;line-height:1.3;text-align:center;border:0;background:none;color:var(--ink);cursor:pointer}
.role-tab small{font-size:9px;font-weight:400;opacity:.78}
.role-tab:hover{background:var(--paper)}
.role-tab[aria-selected=true]{background:var(--primary);color:var(--on-primary);font-weight:600}
.line-tabs{display:flex;gap:26px;justify-content:center}
.line-tabs button{border:0;background:none;padding:6px 0;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--line);cursor:pointer}
.line-tabs button[aria-selected=true]{color:var(--primary);border-bottom-color:var(--primary)}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:.85fr 1.35fr;gap:80px;align-items:start}
.faq-intro .eyebrow{margin-bottom:18px}
.faq-intro p{font-size:15px;color:var(--muted);max-width:300px;margin-top:17px}
.faq-list{border-top:1.5px solid var(--primary)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;cursor:pointer;font-weight:600;font-size:15px;line-height:1.5}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .icon{height:18px;width:18px;transition:transform .2s;color:var(--primary)}
.faq-list details[open] summary .icon{transform:rotate(45deg)}
.faq-list details p{padding-bottom:22px;color:var(--text);font-size:14px;line-height:1.8;max-width:640px}

/* Section penutup (CTA gelap) */
.closing{padding:92px 0 96px;text-align:center;background:linear-gradient(var(--brand-bg-shade,transparent),var(--brand-bg-shade,transparent)),var(--brand-bg,none) center/cover no-repeat,var(--brand-gradient,var(--deep-2));color:#fff}
.closing .logo-mark{width:68px;height:68px;padding:14px;border-radius:20px;background:#fff;margin:0 auto 26px;box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}
.closing .eyebrow{justify-content:center;font-size:10px;color:color-mix(in srgb,#fff 72%,var(--primary-support))}
.closing h2{font-size:clamp(40px,5vw,66px);line-height:1.05;letter-spacing:var(--h2-tracking);font-weight:800;max-width:760px;margin:19px auto 0;text-wrap:balance}
.closing h2 em{color:color-mix(in srgb,#fff 80%,var(--primary-support))}
.closing .actions{justify-content:center;margin-top:30px}
.closing .text-link{color:#fff}
.closing .small{font-size:11px;margin-top:21px;color:rgba(255,255,255,.7)}
.closing :focus-visible{outline-color:#fff}

/* Footer situs */
.site-footer{background:var(--foot);color:#fff;padding-block:58px 30px}
.site-footer :focus-visible{outline-color:#fff}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:60px;padding-bottom:48px}
.footer-brand .logo-full{height:38px;width:auto}
.footer-logos{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.footer-logos .sep{width:1px;height:46px;background:rgba(255,255,255,.22)}
.footer-logos .majelis{height:46px;width:auto}
.footer-brand>p{font-size:14px;line-height:1.75;color:rgba(255,255,255,.62);margin-top:24px;max-width:470px}
.footer-cols{display:grid;grid-template-columns:repeat(3,auto);gap:64px}
.footer-column h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-bottom:16px;color:rgba(255,255,255,.5)}
.footer-column a{display:flex;align-items:center;min-height:32px;font-size:14px;color:rgba(255,255,255,.88)}
.footer-column a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;color:rgba(255,255,255,.55);flex-wrap:wrap}

/* Responsif */
@media (max-width:1100px){
  .hero-grid,.feature-grid{grid-template-columns:minmax(0,1fr)}
  .faq-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .footer-top{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (max-width:850px){
  :root{--gutter:24px;--section-y:64px}
  .main-nav{display:none}
  .round-button{display:inline-grid}
  .header-actions .btn{min-height:38px;padding:0 14px;font-size:12px}
  .header-actions .mid-btn{height:38px;padding:0 12px 0 14px;gap:6px;font-size:12px}
  .header-actions .mid-btn .mid-mark{height:20px}
  .product-index,.promise-row,.access-grid{grid-template-columns:minmax(0,1fr)}
  .product-item,.access-item{padding:24px 0;border-right:0;border-bottom:1px solid var(--line)}
  .product-item:last-child,.access-item:last-child{border-bottom:0}
  .promise-row>div{padding:14px 0;border-right:0;border-bottom:1px solid var(--line)}
  .promise-row>div:last-child{border-bottom:0}
  .hero-meta .edition{display:none}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
}
@media (max-width:620px){
  :root{--gutter:16px}
  .display{font-size:clamp(38px,10.5vw,54px)}
  .header-bar{height:68px}
  .site-header .logo-full{height:28px}
  .brand-by{display:none}
  .chapter-head{flex-direction:column;align-items:flex-start}
  .role-tabs{display:flex;width:100%}
  .role-tab{min-width:0;flex:1;padding:10px 8px}
  .site-footer{padding-block:42px 26px}
  .footer-logos{gap:16px}
  .footer-logos .logo-full{height:30px}
  .footer-logos .majelis,.footer-logos .sep{height:30px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:400px){
  .header-actions .mid-with{display:none}
}