/* LAPOR GAS — stylesheet statis tulisan tangan (bukan Tailwind utility-soup di
   markup, tidak butuh CDN/npm/build step). Token warna & skala PERSIS dari
   standar_header_system_lapor_gas.md & standar_button_tipografi_lapor_gas.md —
   satu sumber kebenaran, lihat plan.md. */

:root {
  --lg-primary: #1E6B3A;
  --lg-primary-rgb: 30,107,58;
  --lg-primary-soft: #E3F3E7;
  --lg-primary-line: #C5E6CF;
  --lg-primary-muted: #9FD3AE;
  --lg-primary-dark: #0F291E;
  --lg-accent: #F2A900;
  --lg-danger-bg: #FFDAD6;
  --lg-danger: #BA1A1A;
  --lg-warn-bg: #FFF3D6;
  --lg-warn: #8A6100;
  --lg-neutral: #F0F4EE;
  --lg-surface: #F2FCF5;
  --lg-surface-card: #FFFFFF;
  --lg-border: rgba(15,41,30,.08);
  --lg-text: #0F291E;
  --lg-text-muted: #55695F;
  --lg-radius-lg: 16px;
  --lg-radius-md: 12px;
  --lg-radius-full: 9999px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.lg-body {
  background: var(--lg-surface);
  color: var(--lg-text);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
a { color: inherit; text-decoration: none; }
/* Ikon = ligatur font. Sebelum font termuat, browser menampilkan NAMA ikon sebagai teks
   ("storefront"), membuat layout melompat tiap pindah halaman. Kotak 1em + overflow:hidden
   mengunci ukurannya sehingga teks cadangan tidak pernah melebar; display=block di <link>
   font membuatnya tak terlihat (bukan teks) selama font dimuat. */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; font-size: 24px; line-height: 1;
  display: inline-block; width: 1em; height: 1em; overflow: hidden; white-space: nowrap;
  letter-spacing: normal; text-transform: none; word-wrap: normal; direction: ltr; flex-shrink: 0;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
}

/* ── Header (3 arketipe, h-16 = 64px, target sentuh >=44px) ─────────── */
.lg-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--lg-surface) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lg-border);
  padding-top: env(safe-area-inset-top, 0);
}
.lg-header__row { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; }
.lg-header__brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lg-header__logo { width: 36px; height: 36px; border-radius: 12px; object-fit: contain; flex-shrink: 0; }
.lg-header__brandtext { display: flex; flex-direction: column; min-width: 0; }
.lg-header__title { font-weight: 800; font-size: 17px; color: var(--lg-primary-dark); letter-spacing: -.01em; }
.lg-header__sub { font-size: 12px; font-weight: 500; color: var(--lg-text-muted); }
.lg-header__center { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; min-width: 0; }
.lg-header__chip { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--lg-radius-full); background: var(--lg-neutral); border: 1px solid var(--lg-border); font-weight: 700; font-size: 15px; flex-shrink: 0; }
.lg-header__chip--static { height: 36px; background: var(--lg-primary-soft); border-color: var(--lg-primary-line); font-size: 13px; }
.lg-btn-back { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: var(--lg-radius-md); background: var(--lg-neutral); border: none; font-weight: 700; font-size: 14px; color: var(--lg-primary-dark); }
.lg-avatar { width: 24px; height: 24px; border-radius: 999px; background: var(--lg-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.lg-avatar--lg { width: 56px; height: 56px; font-size: 22px; }

.lg-offline-banner { background: var(--lg-warn-bg); color: var(--lg-warn); text-align: center; font-weight: 700; font-size: 13px; padding: 8px 12px; }

/* ── Main + bottom nav ───────────────────────────────────────────────── */
.lg-main { max-width: 560px; margin: 0 auto; padding: 16px; padding-bottom: 96px; }
.lg-main--modal { max-width: 420px; padding-top: 40px; }
.lg-bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--lg-border); display: flex; justify-content: space-around; padding-bottom: env(safe-area-inset-bottom, 0); }
.lg-bottomnav__item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; min-width: 64px; min-height: 56px; color: var(--lg-text-muted); font-size: 12px; font-weight: 600; }
.lg-bottomnav__item.is-active { color: var(--lg-primary); font-weight: 800; }

/* ── Tipografi ────────────────────────────────────────────────────────── */
.lg-h1 { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0 0 2px; color: var(--lg-primary-dark); }
.lg-muted { color: var(--lg-text-muted); font-size: 13px; margin: 0; }
.lg-hint { display: block; font-size: 12px; color: var(--lg-text-muted); margin-top: 4px; }
.lg-empty { color: var(--lg-text-muted); text-align: center; padding: 24px 0; font-size: 14px; }

/* ── Kartu & layout ───────────────────────────────────────────────────── */
.lg-stack { display: flex; flex-direction: column; gap: 16px; }
.lg-card { background: var(--lg-surface-card); border-radius: var(--lg-radius-lg); padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.lg-card--center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lg-logo-lg { width: 64px; height: 64px; }

.lg-hero { background: var(--lg-surface-card); border-radius: var(--lg-radius-lg); padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.05); display: flex; flex-direction: column; gap: 14px; }
.lg-hero__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lg-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--lg-radius-full); font-size: 13px; font-weight: 700; }
.lg-pill--ok { background: var(--lg-primary-soft); color: var(--lg-primary); }
.lg-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--lg-primary); }
.lg-hero__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px solid var(--lg-border); }
.lg-minicard { background: var(--lg-neutral); border-radius: var(--lg-radius-md); padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.lg-minicard--warn { background: var(--lg-warn-bg); }
.lg-minicard__label { font-size: 12px; color: var(--lg-text-muted); font-weight: 600; }
.lg-minicard strong { font-size: 16px; font-weight: 800; }

.lg-quickrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lg-quick { background: var(--lg-surface-card); border-radius: var(--lg-radius-md); padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.05); text-align: center; }
.lg-quick .material-symbols-outlined { color: var(--lg-primary); }

.lg-section { display: flex; flex-direction: column; gap: 10px; }
.lg-section__head { display: flex; align-items: center; justify-content: space-between; }
.lg-section__head h2 { font-size: 17px; font-weight: 700; margin: 0; }
.lg-section__head .lg-link { display: flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--lg-primary); }

.lg-txitem { display: block; background: var(--lg-surface-card); border-radius: var(--lg-radius-md); padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.lg-txitem__row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.lg-amount-ok { color: var(--lg-primary); font-weight: 800; }
.lg-amount-warn { color: var(--lg-warn); font-weight: 800; }

.lg-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.lg-tab { flex: 1; text-align: center; padding: 10px; border-radius: var(--lg-radius-md); background: var(--lg-neutral); font-weight: 700; font-size: 14px; }
.lg-tab.is-active { background: var(--lg-primary); color: #fff; }

/* ── Form & input (target sentuh 44-56px) ────────────────────────────── */
.lg-form { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.lg-form--card { background: var(--lg-surface-card); border-radius: var(--lg-radius-lg); padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.lg-label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; text-align: left; }
.lg-input { height: 48px; border-radius: var(--lg-radius-md); border: 1px solid var(--lg-border); background: var(--lg-neutral); padding: 0 14px; font-size: 16px; font-family: inherit; color: var(--lg-text); }
.lg-input--pin { text-align: center; letter-spacing: 12px; font-size: 28px; font-weight: 800; height: 64px; }
.lg-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; text-align: left; }
.lg-radios { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lg-radios legend { font-size: 13px; font-weight: 700; color: var(--lg-text-muted); padding: 0 0 4px; }
.lg-radios label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 10px 12px; background: var(--lg-neutral); border-radius: var(--lg-radius-md); }
.lg-form__status { text-align: center; font-size: 13px; font-weight: 600; color: var(--lg-text-muted); min-height: 18px; }

.lg-stepper { display: flex; align-items: center; justify-content: space-between; background: var(--lg-neutral); border-radius: var(--lg-radius-lg); padding: 8px; }
.lg-stepper__btn { width: 56px; height: 56px; border-radius: var(--lg-radius-lg); border: none; background: var(--lg-primary); color: #fff; font-size: 28px; font-weight: 700; }
.lg-stepper__val { font-size: 20px; font-weight: 800; color: var(--lg-primary); text-align: center; }

/* ── Tombol (skala baku: Primary h-14/56px, Secondary h-12/48px, Chip min-h-44px) ── */
.lg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; font-family: inherit; font-weight: 700; }
.lg-btn--primary { height: 56px; border-radius: var(--lg-radius-lg); background: var(--lg-primary); color: #fff; font-size: 16px; padding: 0 20px; }
.lg-btn--primary:disabled { opacity: .6; }
.lg-btn--secondary { height: 48px; border-radius: var(--lg-radius-md); background: transparent; border: 2px solid var(--lg-primary); color: var(--lg-primary); font-size: 15px; }
.lg-btn--danger { height: 48px; border-radius: var(--lg-radius-md); background: var(--lg-danger-bg); color: var(--lg-danger); font-size: 15px; }
.lg-btn--full { width: 100%; }
.lg-btn--lg { text-transform: uppercase; letter-spacing: .02em; }

.lg-link { color: var(--lg-primary); font-weight: 700; font-size: 14px; }
.lg-link--muted { color: var(--lg-text-muted); font-weight: 600; }

.lg-alert { border-radius: var(--lg-radius-md); padding: 12px 14px; font-size: 14px; font-weight: 600; text-align: left; }
.lg-alert--error { background: var(--lg-danger-bg); color: var(--lg-danger); }
.lg-alert--warn { background: var(--lg-warn-bg); color: var(--lg-warn); }

.lg-badge { display: inline-flex; padding: 2px 8px; border-radius: var(--lg-radius-full); background: var(--lg-accent); color: #402d00; font-size: 11px; font-weight: 700; }
.lg-badge--susulan { background: #FFE1B0; color: #6B4A00; }

.lg-userlist { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.lg-userlist__item { width: 100%; }
.lg-usercard { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--lg-surface-card); border: 1px solid var(--lg-border); border-radius: var(--lg-radius-lg); font-size: 16px; font-weight: 700; text-align: left; box-shadow: 0 1px 3px rgba(0,0,0,.05); }

@media (max-width: 400px) {
  .lg-hero__grid { gap: 6px; }
  .lg-minicard strong { font-size: 14px; }
}

/* ======================================================================
   Komponen Fase 1 lanjutan — tetap token & skala yang sama di atas.
   ====================================================================== */
:root {
  --lg-ok-bg: #DCF3E2; /* status sukses (lunas) tetap hijau di semua tema */
  --lg-info-bg: #E3F0FB;
  --lg-info: #164A73;
  --lg-focus: 0 0 0 3px rgba(var(--lg-primary-rgb),.35);
}
.lg-h2 { font-size: 17px; font-weight: 700; margin: 0; color: var(--lg-primary-dark); }
.lg-stack-sm { display: flex; flex-direction: column; gap: 12px; }
.lg-center { text-align: center; align-self: center; }
.lg-display { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 2px 0; font-variant-numeric: tabular-nums; }
.lg-bignum { font-size: 26px !important; font-variant-numeric: tabular-nums; }
.lg-amount-bad { color: var(--lg-danger); font-weight: 800; }
.lg-inline-icon { font-size: 20px; vertical-align: -4px; color: var(--lg-primary); }
.lg-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.lg-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lg-span2 { grid-column: 1 / -1; }
.lg-quickrow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-minicard__sub { font-size: 12px; color: var(--lg-text-muted); font-weight: 600; }
a.lg-minicard { color: inherit; }

/* Cincin fokus umum untuk tombol/tautan/kartu. Kolom ketik SENGAJA dikecualikan: fokus kolom
   diatur komponennya sendiri (.lg-input, atau pembungkus .lg-bidang) — lihat STANDAR KOLOM ISIAN. */
:focus-visible:not(input):not(textarea):not(select) { outline: none; box-shadow: var(--lg-focus); border-radius: 8px; }

/* Hero variants */
.lg-hero--ok { box-shadow: inset 4px 0 0 var(--lg-primary), 0 1px 3px rgba(0,0,0,.05); }
.lg-hero--warn { box-shadow: inset 4px 0 0 var(--lg-accent), 0 1px 3px rgba(0,0,0,.05); }
.lg-hero--bad { box-shadow: inset 4px 0 0 var(--lg-danger), 0 1px 3px rgba(0,0,0,.05); }
.lg-pill { background: var(--lg-neutral); color: var(--lg-text-muted); }

/* Badges */
.lg-badge--ok { background: var(--lg-ok-bg); color: #1E6B3A; }
.lg-badge--warn { background: var(--lg-warn-bg); color: var(--lg-warn); }
.lg-badge--bad { background: var(--lg-danger-bg); color: var(--lg-danger); }
.lg-req { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--lg-danger); text-transform: uppercase; }

/* Alerts */
.lg-alert--info { background: var(--lg-info-bg); color: var(--lg-info); }
.lg-alert--link { display: block; }
.lg-alert .lg-btn { margin-top: 10px; }

/* Buttons */
.lg-btn { transition: transform .12s ease, opacity .15s ease; }
.lg-btn:active:not(:disabled) { transform: scale(.98); }
.lg-btn--xl { height: 64px; font-size: 18px; border-radius: 18px; box-shadow: 0 6px 16px rgba(var(--lg-primary-rgb),.25); }
.lg-linkbtn { background: none; border: none; padding: 10px 0; min-height: 44px; font: inherit; font-size: 14px; font-weight: 700; color: var(--lg-primary); cursor: pointer; }
.lg-linkbtn--danger { color: var(--lg-danger); }
.lg-linkrow { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* Kartu pilihan (radio besar, target sentuh lansia) */
.lg-choices { display: grid; gap: 10px; }
.lg-choices--1 { grid-template-columns: 1fr; }
.lg-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg-choice { position: relative; display: block; cursor: pointer; }
.lg-choice input { position: absolute; opacity: 0; pointer-events: none; }
.lg-choice__body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-height: 92px; padding: 12px 8px; border-radius: var(--lg-radius-lg); border: 2px solid var(--lg-border); background: var(--lg-neutral); font-size: 12px; color: var(--lg-text-muted); transition: border-color .15s ease, background .15s ease; }
.lg-choice__body strong { font-size: 15px; color: var(--lg-text); line-height: 1.2; }
.lg-choice__body .material-symbols-outlined { color: var(--lg-primary); font-size: 28px; }
.lg-choice input:checked + .lg-choice__body { border-color: var(--lg-primary); background: var(--lg-primary-soft); box-shadow: 0 0 0 1px var(--lg-primary); }
.lg-choice input:focus-visible + .lg-choice__body { box-shadow: var(--lg-focus); }
.lg-choice--warn input:checked + .lg-choice__body { border-color: var(--lg-accent); background: var(--lg-warn-bg); box-shadow: 0 0 0 1px var(--lg-accent); }
.lg-choice--warn .lg-choice__body .material-symbols-outlined { color: var(--lg-warn); }
.lg-choice--compact .lg-choice__body { min-height: 76px; }
.lg-choice--compact .lg-choice__body strong { font-size: 13px; }
.lg-choice__meta { font-weight: 700; color: var(--lg-primary); }
.lg-choice__meta.is-bad { color: var(--lg-danger); }

/* Chip */
.lg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--lg-radius-full); border: 1px solid var(--lg-border); background: var(--lg-surface-card); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--lg-primary-dark); text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; }
.lg-chip:active { background: var(--lg-ok-bg); }

/* Segmented radio */
.lg-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; background: var(--lg-neutral); padding: 4px; border-radius: var(--lg-radius-md); }
.lg-seg--wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.lg-seg label { position: relative; cursor: pointer; }
.lg-seg input { position: absolute; opacity: 0; pointer-events: none; }
.lg-seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 10px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--lg-text-muted); }
.lg-seg input:checked + span { background: var(--lg-surface-card); color: var(--lg-primary); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.lg-seg input:focus-visible + span { box-shadow: var(--lg-focus); }
.lg-fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lg-fieldset legend { font-size: 14px; font-weight: 700; padding: 0 0 6px; }
[hidden] { display: none !important; }

.lg-input:focus { outline: none; border-color: var(--lg-primary); box-shadow: var(--lg-focus); }
.lg-input--money { height: 60px; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
select.lg-input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--lg-text-muted) 50%), linear-gradient(135deg, var(--lg-text-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.lg-stepper__val small { font-size: 14px; font-weight: 600; color: var(--lg-text-muted); }
.lg-stepper__val span { font-size: 30px; font-variant-numeric: tabular-nums; }

/* Bar total menempel di form jual */
.lg-form--sale { gap: 12px; }
.lg-totalbar { position: sticky; bottom: 12px; background: var(--lg-surface-card); border-radius: var(--lg-radius-lg); padding: 12px; box-shadow: 0 -2px 20px rgba(15,41,30,.12); display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.lg-totalbar__sum { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.lg-totalbar__sum span { font-weight: 700; color: var(--lg-text-muted); }
.lg-totalbar__sum strong { font-size: 24px; font-weight: 800; color: var(--lg-primary); font-variant-numeric: tabular-nums; }

/* Statistik ringkas */
.lg-statrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lg-stat { background: var(--lg-surface-card); border-radius: var(--lg-radius-md); padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.05); display: flex; flex-direction: column; gap: 2px; }
.lg-stat span { font-size: 12px; font-weight: 600; color: var(--lg-text-muted); }
.lg-stat strong { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Daftar & linimasa */
.lg-daylabel { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--lg-text-muted); margin: 8px 2px -6px; }
.is-deleted { opacity: .55; }
.lg-txitem__row { gap: 10px; }
.lg-txitem__row > :first-child { min-width: 0; }
.lg-emptybox { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; text-align: center; color: var(--lg-text-muted); background: var(--lg-surface-card); border-radius: var(--lg-radius-lg); border: 1px dashed rgba(15,41,30,.18); }
.lg-emptybox .material-symbols-outlined { font-size: 40px; color: var(--lg-primary); opacity: .6; }
.lg-emptybox p { margin: 0; font-size: 15px; font-weight: 600; }
.lg-menuitem { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; background: var(--lg-surface-card); border-radius: var(--lg-radius-md); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.lg-menuitem > .material-symbols-outlined:first-child { color: var(--lg-primary); }
.lg-menuitem__label { flex: 1; font-weight: 700; font-size: 15px; }

.lg-timeline-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--lg-surface-card); border-radius: var(--lg-radius-md); box-shadow: 0 1px 3px rgba(0,0,0,.05); color: inherit; }
.lg-timeline-item.is-current { box-shadow: inset 3px 0 0 var(--lg-primary), 0 1px 3px rgba(0,0,0,.05); }
.lg-timeline-item__icon { width: 36px; height: 36px; border-radius: 12px; background: var(--lg-neutral); color: var(--lg-primary); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.lg-timeline-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.lg-timeline-item__body strong { font-size: 14px; }
.lg-timeline-item__delta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.lg-delta { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lg-delta.is-up { background: var(--lg-ok-bg); color: var(--lg-primary); }
.lg-delta.is-down { background: var(--lg-danger-bg); color: var(--lg-danger); }

/* Key-value (nota, detail) */
.lg-kv { margin: 0; display: flex; flex-direction: column; }
.lg-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px dashed rgba(15,41,30,.1); }
.lg-kv > div:last-child { border-bottom: none; }
.lg-kv dt { color: var(--lg-text-muted); font-size: 14px; }
.lg-kv dd { margin: 0; font-weight: 700; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.lg-kv--card { width: 100%; background: var(--lg-neutral); border-radius: var(--lg-radius-md); padding: 6px 14px; text-align: left; }
.lg-kv__sum { border-top: 1px solid rgba(15,41,30,.2); }
.lg-kv__total dt, .lg-kv__total dd { font-size: 17px; font-weight: 800; color: var(--lg-text); }

.lg-success__icon { font-size: 72px; color: var(--lg-primary); font-variation-settings: 'FILL' 1, 'wght' 500; animation: lg-pop .35s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes lg-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Zona hapus */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details.lg-card > summary { min-height: 44px; display: flex; align-items: center; }
.lg-paybox > summary { margin-bottom: 10px; }
.lg-paybox[open] > summary { background: var(--lg-neutral); color: var(--lg-primary); }

/* Grafik batang & bar horizontal — CSS murni, tanpa library chart */
.lg-chart { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding-top: 8px; }
.lg-chart__col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.lg-chart__bar { width: 100%; max-width: 34px; background: var(--lg-primary-muted); border-radius: 6px 6px 2px 2px; }
.lg-chart__col.is-today .lg-chart__bar { background: var(--lg-primary); }
.lg-chart__lbl { font-size: 11px; font-weight: 700; color: var(--lg-text-muted); }
.lg-bar { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.lg-bar__label { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-bar__track { height: 12px; background: var(--lg-neutral); border-radius: 999px; overflow: hidden; }
.lg-bar__fill { display: block; height: 100%; background: var(--lg-primary); border-radius: 999px; }
.lg-bar__val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lg-text-muted); }

/* Nota */
.lg-nota { background: #fff; border-radius: var(--lg-radius-lg); padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.lg-nota__title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--lg-text-muted); margin: 0 0 6px; }
.lg-nota__head { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 2px dashed rgba(15,41,30,.15); }
.lg-nota__head strong { font-size: 18px; }
.lg-nota__head span { font-size: 13px; color: var(--lg-text-muted); }
.lg-nota__sub { font-size: 13px; margin: 12px 0 2px; }
.lg-nota__foot { font-size: 11px; color: var(--lg-text-muted); text-align: center; margin-top: 12px; padding-top: 10px; border-top: 2px dashed rgba(15,41,30,.15); }

/* Pengaturan */
.lg-subcard { background: var(--lg-neutral); border-radius: var(--lg-radius-md); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.lg-subcard .lg-input { background: var(--lg-surface-card); }
.lg-userrow { display: flex; align-items: center; gap: 10px; min-height: 44px; flex-wrap: wrap; }
.lg-userrow__name { flex: 1; font-weight: 700; font-size: 16px; }
.lg-avatar--md { width: 40px; height: 40px; font-size: 16px; }
.lg-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.lg-steps li { flex: 1; }
.lg-steps a { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 12px; background: var(--lg-neutral); font-weight: 800; color: var(--lg-text-muted); }
.lg-steps .is-done a { background: var(--lg-ok-bg); color: var(--lg-primary); }
.lg-steps .is-current a { background: var(--lg-primary); color: #fff; }

/* Tutup kas: selisih langsung */
.lg-selisih { margin: 0; font-weight: 800; font-size: 15px; min-height: 20px; }
.lg-selisih.is-ok { color: var(--lg-primary); }
.lg-selisih.is-lebih { color: var(--lg-info); }
.lg-selisih.is-kurang { color: var(--lg-danger); }

/* Titik status koneksi di chip header */
.lg-conn { width: 8px; height: 8px; border-radius: 999px; background: #3BAA5C; font-size: 0; overflow: hidden; flex-shrink: 0; }
.lg-conn.is-off { background: var(--lg-danger); }

/* Toast */
.lg-toast { position: fixed; left: 50%; bottom: 88px; transform: translate(-50%, 20px); max-width: calc(100% - 32px); background: var(--lg-primary-dark); color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.lg-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.lg-toast--err { background: var(--lg-danger); }

@media (max-width: 400px) {
  .lg-choices--3 { gap: 6px; }
  .lg-choice__body { padding: 10px 4px; min-height: 84px; }
  .lg-choice__body > span:not(.material-symbols-outlined):not(.lg-choice__meta) { display: none; }
  .lg-display { font-size: 28px; }
  .lg-bar { grid-template-columns: 70px 1fr auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Scrollbar tipis ala Android — tidak mengganggu, tetap ada untuk mouse di desktop */
html { scrollbar-width: thin; scrollbar-color: rgba(15,41,30,.22) transparent; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15,41,30,.22); border-radius: 999px; }
::-webkit-scrollbar-button { display: none; height: 0; }
.lg-admin-nav { scrollbar-width: none; }
.lg-admin-nav::-webkit-scrollbar { display: none; }

/* Landing publik — ringkas, muat ±1 layar HP */
.lg-main--landing { max-width: 560px; padding: 12px 16px 24px; }
.lg-btn--sm { height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; }
.lg-land-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 14px; }
.lg-land-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: var(--lg-primary-dark); }
.lg-land-brand img { border-radius: 10px; }
.lg-land-hero { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.lg-land-eyebrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--lg-warn-bg); border: 1px solid #F2D48B; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lg-warn); }
.lg-land-eyebrow .material-symbols-outlined { font-size: 16px; }
.lg-land-title { margin: 0; font-size: clamp(24px, 6.6vw, 34px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--lg-primary-dark); text-wrap: balance; }
.lg-land-title span { color: var(--lg-primary); }
.lg-land-lead { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--lg-text-muted); }
.lg-land-cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 4px; }
.lg-land-cta .lg-btn { height: 52px; font-size: 15px; border-radius: 14px; }
.lg-land-cta .lg-btn--primary { box-shadow: 0 6px 16px rgba(var(--lg-primary-rgb),.22); }
.lg-land-note-kecil { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--lg-text-muted); }
.lg-land-note-kecil .material-symbols-outlined { font-size: 16px; color: var(--lg-primary); }
.lg-land-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lg-land-card { background: var(--lg-surface-card); border-radius: 14px; padding: 12px; border: 1px solid var(--lg-border); display: flex; flex-direction: column; gap: 4px; }
.lg-land-card__ikon { width: 34px; height: 34px; border-radius: 10px; background: var(--lg-primary-soft); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lg-land-card__ikon .material-symbols-outlined { font-size: 20px; color: var(--lg-primary); }
.lg-land-card h2 { font-size: 13.5px; line-height: 1.25; margin: 4px 0 0; color: var(--lg-primary-dark); }
.lg-land-card p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--lg-text-muted); }
.lg-land-note { margin: 12px 0; background: var(--lg-surface-card); border: 1px solid var(--lg-border); border-radius: 14px; padding: 12px; display: flex; gap: 12px; align-items: flex-start; }
.lg-land-note p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--lg-text-muted); }
.lg-land-foot { text-align: center; font-size: 12px; color: var(--lg-text-muted); padding: 16px 0 0; }
.lg-land-foot a { color: var(--lg-primary); font-weight: 700; }
@media (min-width: 640px) { .lg-land-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Halaman autentikasi (Masuk, Daftar, Lupa, Reset, Verifikasi) */
.lg-main--modal { max-width: 440px; padding: 0 16px 32px; }
.lg-main--modal > * + * { margin-top: 14px; }
.lg-auth-bar { display: flex; align-items: center; gap: 10px; height: 56px; margin: 0 -16px; padding: 0 12px; border-bottom: 1px solid var(--lg-border); background: rgba(255,255,255,.7); font-weight: 700; font-size: 15px; color: var(--lg-text-muted); }
.lg-auth-bar img { border-radius: 8px; }
.lg-auth-bar__back { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--lg-primary-dark); }
.lg-auth-bar__back:active { background: var(--lg-neutral); }
.lg-auth-hero { display: flex; align-items: center; gap: 14px; padding: 18px 2px 4px; }
.lg-auth-hero img { border-radius: 16px; box-shadow: 0 6px 16px rgba(var(--lg-primary-rgb),.25); flex-shrink: 0; }
.lg-auth-hero__judul { margin: 0 0 2px; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: var(--lg-primary-dark); }
.lg-auth-card { background: var(--lg-surface-card); border: 1px solid var(--lg-border); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 2px 10px rgba(15,41,30,.05); }
.lg-auth-card--center { align-items: center; text-align: center; }
.lg-auth-card .lg-form { gap: 12px; }
.lg-auth-field { display: flex; flex-direction: column; gap: 6px; }
.lg-auth-field__label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--lg-text-muted); }
.lg-auth-field__label .material-symbols-outlined { font-size: 18px; color: var(--lg-primary); }
.lg-auth-field__aksi { margin-left: auto; color: var(--lg-primary); font-size: 13px; font-weight: 700; }
.lg-auth-input { display: flex; align-items: center; height: 52px; border-radius: 14px; background: var(--lg-neutral); border: 1.5px solid transparent; transition: border-color .15s ease, box-shadow .15s ease; }
.lg-auth-input:focus-within { border-color: var(--lg-primary); box-shadow: var(--lg-focus); background: #fff; }
.lg-auth-input input { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; padding: 0 14px; font: inherit; font-size: 17px; color: var(--lg-text); outline: none; letter-spacing: .02em; }
.lg-auth-input__prefix { padding: 0 12px 0 14px; font-weight: 800; color: var(--lg-primary-dark); border-right: 1px solid rgba(15,41,30,.15); line-height: 24px; }
.lg-auth-input__aksi { width: 48px; height: 48px; border: none; background: none; color: var(--lg-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lg-auth-ingat { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--lg-primary-soft); cursor: pointer; }
.lg-auth-ingat input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lg-primary); flex-shrink: 0; }
.lg-auth-ingat strong { display: block; font-size: 14px; }
.lg-auth-ingat small { display: block; font-size: 12px; color: var(--lg-text-muted); margin-top: 2px; }
.lg-auth-alt { text-align: center; font-size: 14px; color: var(--lg-text-muted); margin: 18px 0 0; }
.lg-auth-alt a { color: var(--lg-primary); font-weight: 800; }

/* Form bertahap: satu langkah tampil sekaligus (data-lg-langkah) — layar tidak panjang */
.lg-langkah-progres { display: flex; align-items: center; gap: 10px; }
.lg-langkah-progres__bar { flex: 1; height: 6px; border-radius: 999px; background: var(--lg-neutral); overflow: hidden; }
.lg-langkah-progres__isi { display: block; height: 100%; background: var(--lg-primary); border-radius: 999px; transition: width .25s ease; }
.lg-langkah-progres__teks { font-size: 12.5px; font-weight: 800; color: var(--lg-text-muted); white-space: nowrap; }
[data-lg-langkah-form] [data-lg-langkah].is-aktif { animation: lg-masuk .22s ease both; }
@keyframes lg-masuk { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.lg-langkah-nav { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.lg-langkah-nav .lg-btn--secondary { height: 56px; padding: 0 18px; border-radius: var(--lg-radius-lg); }
.lg-ringkas { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-ringkas span { background: var(--lg-neutral); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 700; color: var(--lg-primary-dark); }

/* Bottom sheet (dialog) — bagian sekunder dibuka lewat tombol, bukan ditumpuk */
.lg-sheet { width: 100%; max-width: 560px; max-height: 88vh; margin: auto auto 0; border: none; border-radius: 22px 22px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0)); background: var(--lg-surface); color: var(--lg-text); overflow: auto; box-shadow: 0 -10px 40px rgba(0,0,0,.2); }
.lg-sheet[open] { display: flex; flex-direction: column; gap: 12px; animation: lg-naik .25s cubic-bezier(.2,.8,.2,1) both; }
.lg-sheet::backdrop { background: rgba(15,41,30,.45); }
@keyframes lg-naik { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.lg-sheet__pegangan { width: 40px; height: 4px; border-radius: 999px; background: rgba(15,41,30,.2); align-self: center; margin: 4px 0; }
.lg-sheet__kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: -8px; background: var(--lg-surface); padding: 6px 0; z-index: 1; }
.lg-sheet__tutup { width: 44px; height: 44px; border-radius: 12px; border: none; background: var(--lg-neutral); color: var(--lg-primary-dark); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 600px) { .lg-sheet { border-radius: 22px; margin: auto; } }
.lg-menugrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lg-menugrid .lg-quick { border: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--lg-text); cursor: pointer; min-height: 84px; justify-content: center; }
.lg-menugrid .lg-quick small { display: block; font-weight: 600; font-size: 11.5px; color: var(--lg-text-muted); }

/* Pilih pengguna — grid 3 kolom, 8 anggota muat satu layar */
.lg-pilih { padding-top: 20px; }
.lg-pilih > * + * { margin-top: 16px; }
.lg-pilih__kepala { display: flex; align-items: center; gap: 12px; }
.lg-pilih__kepala img { border-radius: 12px; }
.lg-pilih__nama { font-size: 18px; display: flex; align-items: center; gap: 8px; }
.lg-usergrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lg-usergrid form { margin: 0; }
.lg-usertile { width: 100%; min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px; background: var(--lg-surface-card); border: 1px solid var(--lg-border); border-radius: 16px; font: inherit; color: var(--lg-text); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: transform .12s ease, border-color .12s ease; }
.lg-usertile:active { transform: scale(.97); border-color: var(--lg-primary); }
.lg-usertile .lg-avatar--lg { width: 52px; height: 52px; font-size: 21px; }
.lg-usertile__nama { font-size: 14.5px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-usertile__peran { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 800; color: var(--lg-warn); }
.lg-usertile__peran .material-symbols-outlined { font-size: 12px; }
.lg-avatar--xl { width: 72px; height: 72px; font-size: 30px; }
@media (max-width: 340px) { .lg-usergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Menu akun (ketuk chip nama di header) */
button.lg-header__chip { font: inherit; font-weight: 700; color: var(--lg-text); cursor: pointer; }
.lg-akun { display: flex; align-items: center; gap: 14px; padding: 6px 2px; }
.lg-akun strong { display: block; font-size: 18px; }
.lg-akun__menu { display: flex; flex-direction: column; gap: 8px; }
.lg-akun__menu form { margin: 0; }
button.lg-menuitem { width: 100%; border: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.lg-menuitem--bahaya, .lg-menuitem--bahaya > .material-symbols-outlined:first-child { color: var(--lg-danger) !important; }

/* Fase 3: antrian catatan offline */
.lg-header__side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lg-antrian-chip { min-height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid #F2C46B; background: var(--lg-warn-bg); color: var(--lg-warn); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.lg-antrian-chip.is-bad { background: var(--lg-danger-bg); color: var(--lg-danger); border-color: #F3A8A0; }
.lg-offline-banner--cache { background: var(--lg-info-bg); color: var(--lg-info); }
.lg-dialog { width: min(520px, calc(100% - 24px)); max-height: 85vh; overflow: auto; border: none; border-radius: var(--lg-radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.25); color: var(--lg-text); background: var(--lg-surface); }
.lg-dialog:not([open]) { display: none; }
.lg-dialog::backdrop { background: rgba(15,41,30,.45); }

/* Kode verifikasi / reset — besar, berjarak, mudah dibacakan */
.lg-kode { margin: 4px 0; font-size: 36px; font-weight: 800; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--lg-primary-dark); background: var(--lg-neutral); border: 2px dashed rgba(var(--lg-primary-rgb),.35); border-radius: var(--lg-radius-lg); padding: 10px 18px; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.lg-kode--sm { font-size: 18px; padding: 2px 8px; border-width: 1px; letter-spacing: .08em; background: var(--lg-surface-card); }

/* Panel admin */
.lg-main--admin { max-width: 860px; padding-bottom: 48px; }
.lg-admin-bar { position: sticky; top: 0; z-index: 50; background: var(--lg-primary-dark); color: #fff; padding-top: env(safe-area-inset-top, 0); }
.lg-admin-bar__row { max-width: 860px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; }
.lg-admin-bar .lg-linkbtn { color: var(--lg-primary-line); }
.lg-admin-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; }
.lg-admin-brand img { border-radius: 9px; }
.lg-admin-nav { max-width: 860px; margin: 0 auto; display: flex; gap: 4px; padding: 0 12px; overflow-x: auto; }
.lg-admin-nav__item { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; font-size: 14px; font-weight: 700; color: var(--lg-primary-line); border-bottom: 3px solid transparent; white-space: nowrap; }
.lg-admin-nav__item.is-active { color: #fff; border-bottom-color: var(--lg-accent); }
.lg-admin-nav__item .material-symbols-outlined { font-size: 20px; }
.lg-admin-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--lg-accent); color: #402d00; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.lg-admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lg-admin-stats .lg-stat { color: inherit; border: 2px solid transparent; }
.lg-admin-stats .lg-stat.is-active { border-color: var(--lg-primary); }
.lg-admin-search { display: flex; align-items: center; gap: 8px; }
.lg-admin-search .lg-input { flex: 1; min-width: 0; }
.lg-admin-search .lg-btn { padding: 0 18px; }
.lg-admin-list { display: flex; flex-direction: column; gap: 10px; }
.lg-admin-kabari { box-shadow: inset 4px 0 0 var(--lg-accent), 0 1px 3px rgba(0,0,0,.05); }
.lg-admin-tolak[open] > summary { margin-bottom: 8px; }
.lg-admin-login { max-width: 420px; margin: 40px auto 0; }
.lg-admin .lg-txitem__row form { margin: 0; }
@media (max-width: 560px) {
  .lg-admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cetak / Simpan PDF — hanya nota */
@media print {
  .lg-header, .lg-bottomnav, .lg-offline-banner, .lg-btn, .lg-toast { display: none !important; }
  body.lg-body { background: #fff; }
  .lg-main { padding: 0; max-width: none; }
  .lg-nota { box-shadow: none; }
}

/* Baris daftar yang membuka sheet */
.lg-txitem--tombol { width: 100%; border: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lg-txitem--tombol:active { background: var(--lg-neutral); }
button.lg-stat { border: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lg-stat--warn { background: var(--lg-warn-bg); }
.lg-stat--warn strong { color: var(--lg-warn); }
.lg-main--modal > .lg-card:first-child, .lg-main--modal > .lg-stack:first-child { margin-top: 24px; }

/* Input tidak pernah melebihi wadahnya: <input> punya lebar bawaan ±20 karakter dan item
   grid/flex default min-width:auto → dua kolom (Harga jual | Modal beli) meluber keluar kartu. */
.lg-input, select.lg-input, textarea.lg-input { width: 100%; min-width: 0; max-width: 100%; }
.lg-label, .lg-grid2 > *, .lg-form > *, .lg-subcard > *, .lg-fieldset { min-width: 0; }
.lg-subcard .lg-form { gap: 10px; }
.lg-sheet .lg-card, .lg-sheet .lg-subcard { box-shadow: none; }
.lg-sheet__x { position: sticky; top: 0; align-self: flex-end; margin-bottom: -48px; z-index: 2; flex-shrink: 0; }
.lg-sheet > h2, .lg-sheet > .lg-txitem__row:first-of-type { padding-right: 52px; min-height: 44px; display: flex; align-items: center; }
.lg-sheet .lg-linkbtn { align-self: center; }

/* Jumlah tabung bisa diketik langsung (bukan cuma −/+ dan chip) */
.lg-stepper__val { display: flex; flex-direction: column; align-items: center; gap: 0; cursor: text; }
.lg-stepper__input { width: 110px; height: 48px; border: 2px solid transparent; border-radius: 12px; background: #fff; text-align: center; font: inherit; font-size: 30px; font-weight: 800; color: var(--lg-primary); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.lg-stepper__input:focus { outline: none; border-color: var(--lg-primary); box-shadow: var(--lg-focus); }
.lg-stepper__input::-webkit-outer-spin-button, .lg-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Sapaan Beranda: tanggal + kapsul status sebaris (kapsul tidak pernah patah), sapaan lebar penuh */
.lg-sapa { display: flex; flex-direction: column; gap: 4px; }
.lg-sapa__baris { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lg-sapa__tgl { font-size: 12.5px; font-weight: 700; color: var(--lg-text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-sapa__judul { margin: 2px 0 0; font-size: 21px; line-height: 1.25; font-weight: 700; color: var(--lg-primary-dark); }
.lg-sapa__judul span { font-weight: 800; color: var(--lg-primary); }
.lg-pill { white-space: nowrap; flex-shrink: 0; height: 28px; padding: 0 12px 0 10px; font-size: 12.5px; border: 1px solid transparent; }
.lg-pill--ok { background: var(--lg-primary-soft); border-color: var(--lg-primary-line); }
.lg-pill--ok .lg-dot { box-shadow: 0 0 0 3px rgba(var(--lg-primary-rgb),.18); animation: lg-denyut 2s ease-in-out infinite; }
.lg-pill--tutup { background: var(--lg-neutral); color: var(--lg-text-muted); border-color: var(--lg-border); }
.lg-pill--tutup .material-symbols-outlined { font-size: 14px; }
@keyframes lg-denyut { 50% { box-shadow: 0 0 0 5px rgba(var(--lg-primary-rgb),.06); } }
.lg-usertile { height: 120px; }
.lg-langkah-nav.is-akhir { display: flex; justify-content: flex-start; }
.lg-langkah-nav.is-akhir .lg-btn--secondary { height: 40px; padding: 0 14px; border: none; background: var(--lg-neutral); font-size: 13.5px; gap: 6px; }
.lg-langkah-nav.is-akhir .lg-btn--secondary .material-symbols-outlined { font-size: 18px; }
.lg-menugrid .lg-quick { text-decoration: none; }
/* Input di dalam kotak .lg-auth-input: fokus cukup ditandai SATU kali di kotak luar
   (:focus-within) — tanpa cincin/sudut kedua dari aturan :focus-visible global. */
.lg-auth-input input:focus, .lg-auth-input input:focus-visible { outline: none; box-shadow: none; border-radius: 0; background: transparent; }
.lg-auth-input__aksi:focus-visible { box-shadow: none; outline: 2px solid var(--lg-primary); outline-offset: -6px; border-radius: 10px; }
.lg-stepper__input:focus-visible { border-radius: 12px; }
.lg-land-cta .lg-btn { white-space: nowrap; padding: 0 12px; gap: 6px; font-size: 14.5px; }
.lg-land-cta .lg-btn .material-symbols-outlined { font-size: 20px; }

/* Halaman masuk/daftar: tetap rata atas (keyboard HP menutup separuh bawah), tapi di layar
   tinggi turun sedikit supaya tidak terasa "menempel" di atas dengan ruang kosong besar. */
@media (min-height: 700px) { .lg-auth-hero { padding-top: clamp(18px, 7vh, 64px); } }

/* ── Tema warna (Pengaturan > Tema Warna). Dipasang di <html data-tema> oleh PHP dari
      cookie lg_tema, jadi tidak ada kedip hijau saat halaman dimuat. Warna status
      (lunas hijau, utang kuning, bahaya merah) sengaja tetap sama di semua tema. ── */
html[data-tema="biru"]  { --lg-primary:#1D5FA8; --lg-primary-rgb:29,95,168;  --lg-primary-dark:#0E2640; --lg-text:#0E2640; --lg-text-muted:#566477; --lg-surface:#F3F8FE; --lg-neutral:#EDF2F8; --lg-primary-soft:#E1EDFA; --lg-primary-line:#BFD6F2; --lg-primary-muted:#9CC0EA; --lg-border:rgba(14,38,64,.09); }
html[data-tema="ungu"]  { --lg-primary:#6B3FA0; --lg-primary-rgb:107,63,160; --lg-primary-dark:#26153A; --lg-text:#26153A; --lg-text-muted:#665C73; --lg-surface:#F8F5FD; --lg-neutral:#F1EDF7; --lg-primary-soft:#ECE4F7; --lg-primary-line:#D6C6EE; --lg-primary-muted:#BCA5E3; --lg-border:rgba(38,21,58,.09); }
html[data-tema="oranye"]{ --lg-primary:#B4531F; --lg-primary-rgb:180,83,31;  --lg-primary-dark:#3A1C0B; --lg-text:#3A1C0B; --lg-text-muted:#6F5E53; --lg-surface:#FEF7F2; --lg-neutral:#F6EFE9; --lg-primary-soft:#F9E6DA; --lg-primary-line:#F0CBB3; --lg-primary-muted:#E6AE8C; --lg-border:rgba(58,28,11,.09); }
html[data-tema="merah"] { --lg-primary:#B0355E; --lg-primary-rgb:176,53,94;  --lg-primary-dark:#3D1020; --lg-text:#3D1020; --lg-text-muted:#735C65; --lg-surface:#FEF5F8; --lg-neutral:#F6EEF1; --lg-primary-soft:#F8E1E9; --lg-primary-line:#EFC1D1; --lg-primary-muted:#E39EB6; --lg-border:rgba(61,16,32,.09); }
html[data-tema="toska"] { --lg-primary:#0E7C7B; --lg-primary-rgb:14,124,123; --lg-primary-dark:#06302F; --lg-text:#06302F; --lg-text-muted:#56696A; --lg-surface:#F1FBFA; --lg-neutral:#EBF3F2; --lg-primary-soft:#DDF2F1; --lg-primary-line:#B7E3E1; --lg-primary-muted:#8FD1CE; --lg-border:rgba(6,48,47,.09); }

/* Pemilih tema */
.lg-tema-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lg-tema { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border-radius: 14px; border: 2px solid var(--lg-border); background: var(--lg-surface-card); font: inherit; font-size: 13px; font-weight: 700; color: var(--lg-text); cursor: pointer; }
.lg-tema[aria-pressed="true"] { border-color: var(--lg-primary); box-shadow: 0 0 0 1px var(--lg-primary); }
.lg-tema__contoh { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: flex-end; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.lg-tema__contoh span { flex: 1; height: 100%; }

/* Numpad PIN (seperti referensi: tombol besar ±72px, tanpa keyboard HP) */
.lg-numpad-form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.lg-pin-titik { display: flex; gap: 16px; padding: 6px 0; }
.lg-pin-titik span { width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--lg-primary-line); background: transparent; transition: background .12s ease, transform .12s ease; }
.lg-pin-titik span.is-isi { background: var(--lg-primary); border-color: var(--lg-primary); transform: scale(1.1); }
.lg-numpad-form.is-kirim .lg-pin-titik span { animation: lg-pop .3s ease both; }
.lg-numpad { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px 18px; justify-content: center; }
.lg-numpad button { width: 72px; height: 72px; border-radius: 999px; border: none; background: var(--lg-neutral); color: var(--lg-primary-dark); font: inherit; font-size: 26px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .1s ease, transform .1s ease; -webkit-user-select: none; user-select: none; }
.lg-numpad button:active { background: var(--lg-primary-soft); transform: scale(.94); }
.lg-numpad [data-lg-kunci="hapus"] { background: transparent; }
@media (max-height: 640px) { .lg-numpad { grid-template-columns: repeat(3, 62px); gap: 8px 16px; } .lg-numpad button { width: 62px; height: 62px; font-size: 22px; } }
.lg-minicard strong { white-space: nowrap; font-size: clamp(13px, 3.9vw, 16px); font-variant-numeric: tabular-nums; }
.lg-minicard__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Petunjuk kecil di bawah grid menu — diberi jarak, tidak menempel ke kartu */
.lg-petunjuk { margin: 20px 4px 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; line-height: 1.4; color: var(--lg-text-muted); text-align: center; }
.lg-petunjuk .material-symbols-outlined { font-size: 16px; color: var(--lg-primary); }

/* Landing v2: tanpa tombol di header, fitur ringkas (ikon di samping), CTA menempel di bawah */
.lg-main--landing { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0)); }
.lg-land-pasang { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--lg-primary-line); background: var(--lg-surface-card); color: var(--lg-primary); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.lg-land-pasang .material-symbols-outlined { font-size: 18px; }
.lg-land-hero { padding-bottom: 14px; }
.lg-land-grid { gap: 8px; }
.lg-land-card { flex-direction: row; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; }
.lg-land-card > div { min-width: 0; }
.lg-land-card h2 { margin: 0; font-size: 13px; }
.lg-land-card p { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-land-card__ikon { width: 32px; height: 32px; }
.lg-land-note-kecil { margin-top: 14px; font-weight: 500; line-height: 1.4; text-align: center; align-items: flex-start; }
.lg-land-note-kecil .material-symbols-outlined { margin-top: 1px; }
.lg-land-aksi { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin: 0 auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0)); background: color-mix(in srgb, var(--lg-surface) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--lg-border); }
.lg-land-aksi .lg-btn { height: 54px; border-radius: 14px; font-size: 15px; white-space: nowrap; gap: 6px; padding: 0 12px; }
.lg-land-aksi .lg-btn--primary { box-shadow: 0 6px 16px rgba(var(--lg-primary-rgb), .22); }
.lg-land-aksi .lg-btn .material-symbols-outlined { font-size: 20px; }
/* Tab laporan: 4 tab (tab ke-4 membuka pemilih tanggal) */
.lg-tabs--4 { gap: 6px; }
.lg-tabs--4 .lg-tab { padding: 10px 4px; font-size: 13.5px; }
button.lg-tab { border: none; font: inherit; font-weight: 700; font-size: 13.5px; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
button.lg-tab .material-symbols-outlined { font-size: 17px; }
.lg-chart--ringkas { height: 110px; }

/* Posisi uang: tempat uang dalam grid 2 kolom */
.lg-wadahgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lg-wadah { background: var(--lg-surface-card); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--lg-border); min-width: 0; }
.lg-wadah__nama { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--lg-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-wadah__nama .material-symbols-outlined { font-size: 18px; color: var(--lg-primary); }
.lg-wadah strong { font-size: 18px; color: var(--lg-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lg-wadah .lg-muted { font-size: 12px; }
.lg-wadah.is-minus strong { color: var(--lg-danger); }
.lg-sheet > form.lg-form { gap: 12px; }
/* ══════════════════════════════════════════════════════════════════════
   RUANG NAPAS — arahan pengguna: ringkas = sedikit elemen per layar, BUKAN
   jarak yang rapat. Jarak antar-kartu & padding diperlebar, dekorasi
   diredam (bayangan lebih halus, garis lebih sedikit) supaya tampak bersih.
   Blok ini sengaja di akhir supaya menimpa nilai-nilai sebelumnya.
   ══════════════════════════════════════════════════════════════════════ */
:root { --lg-gap: 20px; --lg-gap-sm: 14px; --lg-pad: 20px; --lg-bayang: 0 1px 2px rgba(15,41,30,.04); }
.lg-main { padding: 20px 20px 104px; }
.lg-main--modal { padding: 0 20px 40px; }
.lg-stack { gap: var(--lg-gap); }
.lg-stack-sm { gap: var(--lg-gap-sm); }
.lg-card, .lg-hero, .lg-form--card, .lg-auth-card { padding: var(--lg-pad); box-shadow: var(--lg-bayang); }
.lg-hero { gap: 18px; }
.lg-hero__grid { gap: 10px; padding-top: 16px; }
.lg-minicard { padding: 12px; gap: 6px; }
.lg-quickrow, .lg-menugrid, .lg-statrow, .lg-grid2, .lg-wadahgrid, .lg-choices, .lg-usergrid { gap: 12px; }
.lg-quick { padding: 18px 10px; gap: 8px; box-shadow: var(--lg-bayang); }
.lg-menugrid .lg-quick { min-height: 96px; }
.lg-txitem, .lg-timeline-item, .lg-menuitem { box-shadow: var(--lg-bayang); }
.lg-txitem { padding: 14px 16px; }
.lg-section { gap: 12px; }
.lg-daylabel { margin: 12px 4px -2px; }
.lg-form { gap: 18px; }
.lg-label { gap: 8px; }
.lg-kv > div { padding: 10px 0; }
.lg-choice__body { padding: 14px 8px; }
.lg-stat { padding: 14px 16px; box-shadow: var(--lg-bayang); }
.lg-sheet { padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0)); gap: 16px; }
.lg-sheet[open] { gap: 16px; }
.lg-subcard { padding: 14px; gap: 8px; }
.lg-land-grid { gap: 12px; }
.lg-land-card { padding: 14px 12px; gap: 12px; border-color: transparent; box-shadow: var(--lg-bayang); }
.lg-land-hero { gap: 12px; padding: 8px 0 22px; }
.lg-land-top { padding: 4px 0 20px; }
.lg-land-note-kecil { margin-top: 20px; }
.lg-auth-hero { padding-bottom: 8px; }
.lg-auth-card { gap: 18px; }
.lg-main--modal > * + * { margin-top: 18px; }
.lg-pilih > * + * { margin-top: 20px; }
.lg-emptybox { padding: 32px 20px; }
.lg-langkah-progres { margin-bottom: 2px; }
.lg-bottomnav__item { padding: 10px 12px 12px; }
.lg-header__row { padding: 0 20px; }
@media (max-width: 360px) {
  :root { --lg-gap: 16px; --lg-pad: 16px; }
  .lg-main { padding-left: 16px; padding-right: 16px; }
}

/* ── Jarak responsif terhadap TINGGI layar: HP pendek tetap muat, HP/tablet tinggi
      dapat ruang napas lebih — bukan satu angka tetap untuk semua ukuran. ── */
:root {
  --lg-gap: clamp(14px, 2.4vh, 28px);
  --lg-gap-sm: clamp(10px, 1.7vh, 18px);
  --lg-pad: clamp(16px, 2.4vh, 24px);
}
.lg-main { padding-top: clamp(14px, 2.4vh, 28px); }
.lg-grid2, .lg-menugrid, .lg-quickrow, .lg-statrow, .lg-wadahgrid, .lg-land-grid, .lg-usergrid { gap: clamp(10px, 1.6vh, 16px); }
.lg-menugrid, .lg-land-grid, .lg-wadahgrid, .lg-grid2, .lg-statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-usergrid, .lg-quickrow, .lg-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg-menugrid .lg-quick { min-height: clamp(84px, 11.5vh, 112px); }

/* Landing: isi seluruh tinggi layar — pembuka di atas, fitur di tengah, catatan turun ke dekat tombol */
.lg-main--landing { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.lg-land-top { padding-bottom: clamp(8px, 2.5vh, 28px); }
.lg-land-hero { gap: clamp(10px, 1.8vh, 18px); padding: clamp(4px, 2vh, 24px) 0 clamp(18px, 4vh, 44px); }
.lg-land-title { font-size: clamp(26px, min(7.4vw, 4.6vh), 40px); }
.lg-land-lead { font-size: clamp(14px, 1.9vh, 16.5px); }
.lg-land-card { padding: clamp(12px, 1.9vh, 18px) 12px; }
.lg-land-card h2 { font-size: clamp(13px, 1.75vh, 15px); }
.lg-land-card p { font-size: clamp(11.5px, 1.5vh, 13px); }
.lg-land-card__ikon { width: clamp(32px, 4.6vh, 42px); height: clamp(32px, 4.6vh, 42px); }
.lg-land-note-kecil { margin-top: auto; padding-top: clamp(20px, 4vh, 40px); }
.lg-land-foot { padding-top: clamp(10px, 1.6vh, 16px); }
.lg-land-card { flex-direction: column; align-items: flex-start; gap: clamp(8px, 1.3vh, 12px); padding: clamp(14px, 2vh, 20px) 14px; }
.lg-land-card h2 { line-height: 1.3; }
.lg-land-card p { white-space: normal; overflow: visible; margin-top: 3px; line-height: 1.4; }
.lg-land-note-kecil { justify-content: flex-start; text-align: left; gap: 8px; }
.lg-land-foot { text-align: left; }
.lg-wadah { padding: clamp(14px, 2vh, 18px) 16px; gap: 4px; box-shadow: var(--lg-bayang); border-color: transparent; }
.lg-chart--ringkas { height: clamp(84px, 11vh, 120px); }
.lg-selisih:empty { display: none; }
.lg-menugrid .lg-quick small { margin-top: -2px; }

/* Landing: kartu janji + footer terpisah */
.lg-land-janji { margin-top: auto; display: flex; align-items: center; gap: 14px; padding: clamp(14px, 2vh, 20px) 16px; border-radius: 16px; background: var(--lg-primary-soft); }
.lg-land-janji .lg-land-card__ikon { background: var(--lg-surface-card); }
.lg-land-janji strong { display: block; font-size: 14px; color: var(--lg-primary-dark); }
.lg-land-janji p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--lg-text-muted); }
.lg-land-grid { margin-bottom: clamp(18px, 3vh, 32px); }
.lg-land-foot { text-align: center; margin-top: clamp(16px, 2.5vh, 24px); padding-top: clamp(12px, 2vh, 18px); border-top: 1px solid var(--lg-border); font-size: 12px; }

/* ══ Tidak polos: ikon di tab & kartu ringkasan, ilustrasi di keadaan kosong,
      aksen dekoratif lembut di kartu utama — semua dari token tema. ══ */
.lg-tabs { gap: 10px; }
.lg-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 12px; border-radius: 14px; font-size: 15px; font-weight: 800; background: var(--lg-surface-card); color: var(--lg-text-muted); box-shadow: var(--lg-bayang); border: 1.5px solid transparent; transition: background .15s ease, color .15s ease; }
.lg-tab .material-symbols-outlined { font-size: 21px; }
.lg-tab.is-active { background: var(--lg-primary); color: #fff; box-shadow: 0 6px 16px rgba(var(--lg-primary-rgb), .22); }
.lg-tab:not(.is-active):active { border-color: var(--lg-primary-line); }
.lg-tab__jumlah { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--lg-accent); color: #402d00; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.lg-tabs--4 .lg-tab { min-height: 46px; font-size: 13.5px; gap: 4px; padding: 0 6px; }

.lg-stat--ikon { flex-direction: row; align-items: center; gap: 12px; }
.lg-stat--ikon > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-stat__ikon { width: 42px; height: 42px; border-radius: 12px; background: var(--lg-primary-soft); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lg-stat__ikon .material-symbols-outlined { font-size: 22px; color: var(--lg-primary); }
.lg-stat--warn .lg-stat__ikon { background: #FFE7B3; }
.lg-stat--warn .lg-stat__ikon .material-symbols-outlined { color: var(--lg-warn); }
.lg-stat strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ilustrasi */
.lg-ilus { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 168px; height: 124px; }
.lg-ilus__latar { position: absolute; inset: 0; width: 100%; height: 100%; }
.lg-ilus__blob { fill: var(--lg-primary-soft); }
.lg-ilus__titik { fill: var(--lg-primary-line); }
.lg-ilus__titik--kecil { fill: var(--lg-primary-muted); }
.lg-ilus__kilau { stroke: var(--lg-accent); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.lg-ilus__ikon { position: relative; width: 68px; height: 68px; border-radius: 22px; background: var(--lg-surface-card); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(var(--lg-primary-rgb), .16); transform: rotate(-4deg); }
.lg-ilus__ikon .material-symbols-outlined { font-size: 36px; color: var(--lg-primary); }
.lg-ilus__tabung { position: relative; width: 58px; height: 74px; filter: drop-shadow(0 10px 18px rgba(var(--lg-primary-rgb), .22)); transform: rotate(-6deg); }
.lg-ilus__badan { fill: var(--lg-primary); }
.lg-ilus__garis { fill: none; stroke: var(--lg-primary-dark); stroke-width: 4; }
.lg-ilus__sabuk { fill: rgba(255,255,255,.28); }
.lg-ilus__api { fill: var(--lg-accent); }
.lg-emptybox { gap: 10px; padding: clamp(24px, 4vh, 40px) 20px; border: none; background: var(--lg-surface-card); box-shadow: var(--lg-bayang); }
.lg-emptybox__judul { font-size: 17px; color: var(--lg-primary-dark); }
.lg-emptybox p { font-weight: 500; font-size: 14px; max-width: 30ch; line-height: 1.5; }

/* Aksen lembut di kartu utama (hero): lingkaran dekoratif di pojok kanan atas */
.lg-hero { position: relative; overflow: hidden; isolation: isolate; }
.lg-hero::before { content: ""; position: absolute; z-index: -1; right: -48px; top: -56px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, var(--lg-primary-soft) 0 58%, transparent 59%); opacity: .9; }
.lg-hero::after { content: ""; position: absolute; z-index: -1; right: 44px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--lg-primary-line); box-shadow: 22px 26px 0 -2px var(--lg-accent); opacity: .8; }
/* ══ Lembar bawah (sheet) yang lebih interaktif ══ */
.lg-sheet { touch-action: pan-y; }
.lg-sheet__pegangan { width: 44px; height: 5px; background: var(--lg-primary-line); cursor: grab; margin: 2px auto 6px; }
.lg-sheet.is-seret { transition: none !important; animation: none !important; }
.lg-sheet.is-lepas { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.lg-sheet::backdrop { transition: opacity .2s ease; }

/* Baris aksi: ikon dalam kotak + judul + keterangan + panah (pengganti tautan teks polos) */
.lg-aksi-daftar { display: flex; flex-direction: column; gap: 10px; }
.lg-aksi { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 64px; border-radius: 14px; background: var(--lg-surface-card); box-shadow: var(--lg-bayang); color: inherit; cursor: pointer; list-style: none; }
.lg-aksi:active { transform: scale(.99); background: var(--lg-neutral); }
.lg-aksi__ikon { width: 40px; height: 40px; border-radius: 12px; background: var(--lg-primary-soft); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lg-aksi__ikon .material-symbols-outlined { font-size: 22px; color: var(--lg-primary); }
.lg-aksi__ikon--warn { background: #FFE7B3; }
.lg-aksi__ikon--warn .material-symbols-outlined { color: var(--lg-warn); }
.lg-aksi__teks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lg-aksi__teks strong { font-size: 15px; }
.lg-aksi__teks small { font-size: 12.5px; color: var(--lg-text-muted); }
.lg-aksi__panah { color: var(--lg-text-muted); transition: transform .2s ease; }
.lg-aksi-buka[open] > .lg-aksi { border-radius: 14px 14px 0 0; }
.lg-aksi-buka[open] > .lg-aksi .lg-aksi__panah { transform: rotate(180deg); }
.lg-aksi-buka__isi { background: var(--lg-surface-card); border-radius: 0 0 14px 14px; padding: 4px 14px 16px; box-shadow: var(--lg-bayang); }

/* Kartu kontak agen */
.lg-kontak { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--lg-surface-card); box-shadow: var(--lg-bayang); }
.lg-kontak__avatar { width: 46px; height: 46px; border-radius: 14px; background: var(--lg-primary); color: #fff; font-weight: 800; font-size: 19px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lg-kontak__isi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lg-kontak__isi strong { font-size: 15.5px; }
.lg-kontak__wa { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 999px; background: #1FA855; color: #fff; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.lg-kontak__wa .material-symbols-outlined { font-size: 19px; }

/* Tautan teks yang tersisa di dalam sheet tampil sebagai tombol, bukan teks polos */
.lg-sheet > a.lg-link, .lg-sheet details > summary.lg-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 0 16px; border-radius: 14px; background: var(--lg-surface-card); box-shadow: var(--lg-bayang); font-size: 14.5px; }
.lg-sheet > a.lg-link::after, .lg-sheet details > summary.lg-link::after { content: "›"; font-size: 22px; line-height: 1; color: var(--lg-text-muted); }
.lg-sheet details[open] > summary.lg-link::after { transform: rotate(90deg); }
.lg-sheet details > .lg-form { margin-top: 12px !important; }
.lg-ilus__tabung { width: 84px; height: 76px; transform: rotate(-5deg); }
.lg-ilus__kaki { fill: var(--lg-primary-dark); }
.lg-ilus__garis { stroke-width: 5; stroke-linecap: round; }
.lg-ilus__kilap { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 3; stroke-linecap: round; }
.lg-sheet { touch-action: auto; }
.lg-sheet__pegangan, .lg-sheet__kepala { touch-action: none; }
.lg-sheet__pegangan { width: 48px; height: 5px; background: var(--lg-primary-muted); opacity: .9; flex-shrink: 0; }

/* Baris daftar berikon (transaksi, pengeluaran, dll): kotak ikon status + isi */
.lg-baris { display: flex; align-items: center; gap: 12px; }
.lg-baris__isi { flex: 1; min-width: 0; }
.lg-baris__ikon { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--lg-primary-soft); }
.lg-baris__ikon .material-symbols-outlined { font-size: 22px; color: var(--lg-primary); }
.lg-baris__ikon--warn { background: #FFE7B3; } .lg-baris__ikon--warn .material-symbols-outlined { color: var(--lg-warn); }
.lg-baris__ikon--bad { background: var(--lg-danger-bg); } .lg-baris__ikon--bad .material-symbols-outlined { color: var(--lg-danger); }
.lg-baris .lg-txitem__row > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-badge { white-space: nowrap; }
/* Detail transaksi: kartu ringkasan berikon + rincian berikon */
.lg-ringkas-trx { flex-direction: row; align-items: flex-start; gap: 14px; }
.lg-ringkas-trx .lg-baris__ikon { width: 52px; height: 52px; border-radius: 16px; }
.lg-ringkas-trx .lg-baris__ikon .material-symbols-outlined { font-size: 26px; }
.lg-ringkas-trx__isi { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.lg-kv--ikon dt { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.lg-kv--ikon dt .material-symbols-outlined { font-size: 19px; color: var(--lg-primary); }
.lg-kv--ikon.lg-card { padding-top: 8px; padding-bottom: 8px; }
.lg-kv--ikon > div { padding: 12px 0; }
button.lg-aksi { width: 100%; border: none; font: inherit; text-align: left; }
.lg-aksi--bahaya .lg-aksi__ikon { background: var(--lg-danger-bg); }
.lg-aksi--bahaya .lg-aksi__ikon .material-symbols-outlined, .lg-aksi--bahaya strong { color: var(--lg-danger); }
.lg-bar { grid-template-columns: minmax(0, 7.5em) 1fr auto; }
.lg-bar__label { font-size: 13px; }
.lg-sheet > .lg-ringkas-trx { display: flex; align-items: center; gap: 14px; padding-right: 52px; }

/* Anggota & PIN: grid ubin + ubin tambah */
.lg-usertile.is-deleted { opacity: .5; }
.lg-usertile__peran.is-penjual { color: var(--lg-text-muted); }
.lg-usertile--tambah { border: 2px dashed var(--lg-primary-line); background: transparent; box-shadow: none; }
.lg-usertile--tambah .lg-avatar { background: var(--lg-primary-soft); color: var(--lg-primary); }
.lg-usertile--tambah .lg-avatar .material-symbols-outlined { font-size: 26px; }
.lg-usertile--tambah .lg-usertile__nama { color: var(--lg-primary); }
.lg-petunjuk--atas { margin: 0; justify-content: flex-start; text-align: left; align-items: flex-start; }
.lg-petunjuk--atas .material-symbols-outlined { margin-top: 1px; }
.lg-akun span.lg-muted { display: block; margin-top: 2px; }
.lg-aksi-daftar form { margin: 0; }

/* Bar kategori: label + nilai di atas, track selebar penuh di bawah — nama kategori tak terpotong. */
.lg-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label val" "track track"; row-gap: 6px; column-gap: 12px; }
.lg-bar__label { grid-area: label; font-size: 14px; }
.lg-bar__val { grid-area: val; }
.lg-bar__track { grid-area: track; height: 10px; }
@media (max-width: 380px) { .lg-bar { grid-template-columns: minmax(0, 1fr) auto; } }

/* ============================================================
 * Fase 4 — Cari Menu, pelanggan tetap, Bantuan & Dukungan, templat gas
 * ============================================================ */
.lg-nowrap { white-space: nowrap; }
.lg-avatar--md { width: 44px; height: 44px; font-size: 18px; }

/* Tombol cari di header tab */
.lg-header__cari { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--lg-border); background: var(--lg-neutral); color: var(--lg-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin-left: auto; }
.lg-header__cari .material-symbols-outlined { font-size: 22px; }
.lg-header--tab .lg-header__row { gap: 8px; }
.lg-header--tab .lg-header__brand { min-width: 0; }
@media (max-width: 360px) { .lg-header__chip [data-lg-nama-pengguna] { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

/* Kolom cari (sheet Cari Menu, halaman Pelanggan, sheet pilih pelanggan) */
.lg-cari__kolom { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 16px; border-radius: 16px; background: var(--lg-surface-card); border: 1.5px solid var(--lg-primary-line); box-shadow: var(--lg-bayang); }
.lg-cari__kolom:focus-within { border-color: var(--lg-primary); box-shadow: 0 0 0 3px rgba(var(--lg-primary-rgb), .14); }
.lg-cari__kolom .material-symbols-outlined { color: var(--lg-primary); font-size: 24px; }
.lg-cari__kolom input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--lg-text); height: 50px; }
.lg-sheet--cari { min-height: 70vh; }
.lg-cari__saran .lg-chip { min-height: 38px; font-size: 13px; padding: 0 14px; }
.lg-cari__hasil { display: flex; flex-direction: column; gap: 10px; }
.lg-cari__hasil .lg-aksi[hidden] { display: none; }
button.lg-aksi { width: 100%; border: 0; font: inherit; text-align: left; }

/* Bilah cari di atas Lainnya — terlihat seperti kolom ketik, lebih mudah ditemukan orang tua */
.lg-cari-bar { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 18px; margin-bottom: clamp(16px, 3vh, 26px); border-radius: 18px; border: 1.5px dashed var(--lg-primary-line); background: var(--lg-primary-soft); color: var(--lg-text-muted); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.lg-cari-bar .material-symbols-outlined { color: var(--lg-primary); font-size: 26px; }
.lg-cari-bar b { color: var(--lg-primary); }
button.lg-quick { border: 0; font: inherit; color: inherit; cursor: pointer; }

/* Kartu pelanggan ketuk-cepat di form Jual Gas */
.lg-pel-kartu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lg-pel { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 16px; border: 1.5px solid var(--lg-border); background: var(--lg-surface-card); font: inherit; color: var(--lg-text); cursor: pointer; min-width: 0; transition: border-color .15s, background .15s, transform .1s; }
.lg-pel:active { transform: scale(.97); }
.lg-pel .lg-avatar { width: 40px; height: 40px; font-size: 17px; }
.lg-pel__nama { font-size: 13px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-pel[aria-pressed="true"] { border-color: var(--lg-primary); background: var(--lg-primary-soft); box-shadow: 0 0 0 3px rgba(var(--lg-primary-rgb), .12); }
.lg-pel[aria-pressed="true"] .lg-avatar::after { content: "✓"; }
.lg-pel[aria-pressed="true"] .lg-avatar { font-size: 0; }
.lg-pel[aria-pressed="true"] .lg-avatar::after { font-size: 18px; }
.lg-pel--lain { border-style: dashed; border-color: var(--lg-primary-line); }
.lg-pel--lain .lg-avatar { background: var(--lg-primary-soft); color: var(--lg-primary); }
.lg-pel--lain .lg-avatar .material-symbols-outlined { font-size: 22px; }
.lg-pel-baru { padding: 14px 16px; border-radius: 14px; background: var(--lg-primary-soft); display: flex; flex-direction: column; gap: 12px; }
.lg-pel-baru[hidden] { display: none; }
.lg-pel-baru .lg-check { align-items: flex-start; font-weight: 500; }
.lg-pel-baru .lg-check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--lg-primary); flex-shrink: 0; }
.lg-aksi__huruf { font-weight: 800; font-size: 17px; color: var(--lg-primary); }
.lg-aksi[aria-pressed="false"] .lg-aksi__panah { opacity: .25; }
.lg-aksi[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--lg-primary); }
.lg-aksi[aria-pressed="true"] .lg-aksi__panah { color: var(--lg-primary); opacity: 1; }
.lg-aksi[hidden] { display: none; }
.lg-pel-item[hidden] { display: none; }

/* Sheet Bantuan & Dukungan ("Suka dengan LAPOR GAS?") */
.lg-sapa { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(12px, 2vh, 18px); padding-top: 4px; }
.lg-sapa[hidden] { display: none; }
.lg-sapa > .lg-muted { max-width: 34ch; line-height: 1.55; }
.lg-sapa .lg-ilus { margin: 0 auto; }
.lg-sapa > .lg-btn, .lg-sapa > .lg-aksi { align-self: stretch; }
.lg-sapa__pilih { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.lg-sapa__opsi { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px; border-radius: 18px; border: 1.5px solid var(--lg-border); background: var(--lg-surface-card); font: inherit; color: var(--lg-text); cursor: pointer; box-shadow: var(--lg-bayang); transition: transform .1s; }
.lg-sapa__opsi:active { transform: scale(.97); }
.lg-sapa__opsi .material-symbols-outlined { font-size: 40px; }
.lg-sapa__opsi strong { font-size: 16px; }
.lg-sapa__opsi small { font-size: 12px; color: var(--lg-text-muted); }
.lg-sapa__opsi.is-senang .material-symbols-outlined { color: var(--lg-primary); }
.lg-sapa__opsi.is-senang { border-color: var(--lg-primary-line); background: var(--lg-primary-soft); }
.lg-sapa__opsi.is-masalah .material-symbols-outlined { color: var(--lg-warn); }
.lg-sapa__nanti { justify-content: center; gap: 22px; }
.lg-qris { margin: 0; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--lg-bayang); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lg-qris img { width: min(240px, 62vw); height: auto; display: block; border-radius: 8px; }
.lg-qris figcaption { font-size: 12px; color: #555; }

/* Templat ukuran gas */
.lg-templat-gas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lg-templat-gas__item { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--lg-border); background: var(--lg-surface-card); font: inherit; font-size: 13px; font-weight: 700; color: var(--lg-text); cursor: pointer; text-align: left; }
.lg-templat-gas__item .material-symbols-outlined { color: var(--lg-primary); font-size: 20px; }
.lg-templat-gas__item[aria-pressed="true"] { border-color: var(--lg-primary); background: var(--lg-primary-soft); }

/* Ulasan aplikasi (Fase 4.5) */
.lg-ulasan { width: 100%; text-align: left; }
.lg-ulasan[hidden] { display: none; }
.lg-bintang { display: flex; flex-direction: row-reverse; justify-content: center; gap: 4px; border: 0; padding: 0; margin: 0; }
.lg-bintang input { position: absolute; opacity: 0; pointer-events: none; }
.lg-bintang label { cursor: pointer; padding: 2px; line-height: 0; }
.lg-bintang__b { display: inline-block; font-size: 40px; line-height: 1; color: #D5DDD7; transition: color .12s, transform .12s; }
.lg-bintang input:checked ~ label .lg-bintang__b,
.lg-bintang label:hover .lg-bintang__b, .lg-bintang label:hover ~ label .lg-bintang__b { color: #F2B01E; }
.lg-bintang input:checked + label .lg-bintang__b { transform: scale(1.08); }
.lg-bintang input:focus-visible + label { outline: 2px solid var(--lg-primary); border-radius: 8px; }
.lg-textarea { min-height: 96px; resize: vertical; padding-top: 12px; line-height: 1.5; }
.lg-ulasan__izin { align-items: flex-start; font-weight: 500; }
.lg-ulasan__izin input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--lg-primary); flex-shrink: 0; }
.lg-ulasan__ok { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; }
.lg-ulasan__ok[hidden] { display: none; }
.lg-sapa > .lg-aksi-buka { align-self: stretch; text-align: left; }
.lg-sapa__donasi { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 14px; }

/* Ulasan di landing — geser menyamping, tidak menambah panjang halaman */
.lg-land-ulasan { margin-top: clamp(18px, 3vh, 28px); }
.lg-land-ulasan__judul { font-size: 15px; font-weight: 800; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.lg-land-ulasan__judul .material-symbols-outlined { color: var(--lg-primary); }
.lg-land-ulasan__rel { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 300px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; scrollbar-width: thin; }
.lg-land-ulasan__kartu { scroll-snap-align: start; background: var(--lg-surface-card); border-radius: 18px; padding: 16px 18px; box-shadow: var(--lg-bayang); display: flex; flex-direction: column; gap: 8px; margin: 0; }
.lg-land-ulasan__kartu blockquote { margin: 0; font-size: 14px; line-height: 1.55; }
.lg-land-ulasan__kartu figcaption { font-size: 12px; font-weight: 700; color: var(--lg-text-muted); margin-top: auto; }
.lg-land-ulasan__bintang { color: #F2B01E; display: flex; gap: 1px; }
.lg-land-ulasan__bintang { font-size: 16px; letter-spacing: 1px; }
.lg-land-ulasan__bintang .is-kosong { color: #D5DDD7; }

/* Admin ulasan */
.lg-cari__kolom input:focus, .lg-cari__kolom input:focus-visible { outline: none; box-shadow: none; border: 0; background: transparent; }

/* ============================================================
 * STANDAR KOLOM ISIAN — satu kolom = SATU bingkai, SATU cincin fokus.
 * Ada dua pola, jangan dicampur:
 *   1. Kolom biasa: <input class="lg-input"> — input itu sendiri yang punya border & fokus.
 *   2. Kolom berpembungkus (ikon/tombol di dalam kolom: login, cari, dsb.):
 *      <label class="lg-bidang"> ikon + <input> polos (TANPA .lg-input) </label>
 *      Pembungkus yang punya border & fokus (:focus-within); input di dalamnya dibuat
 *      transparan total — tanpa border, outline, shadow, background, atau tampilan
 *      bawaan iOS (type=search). .lg-auth-input & .lg-cari__kolom mengikuti pola ini.
 * Komponen kolom baru WAJIB memakai salah satu pola di atas.
 * ============================================================ */
:is(.lg-bidang, .lg-auth-input, .lg-cari__kolom) :is(input, textarea, select),
:is(.lg-bidang, .lg-auth-input, .lg-cari__kolom) :is(input, textarea, select):is(:focus, :focus-visible) {
  -webkit-appearance: none; appearance: none; border: 0; outline: none; box-shadow: none; background: transparent; border-radius: 0;
}
:is(.lg-bidang, .lg-auth-input, .lg-cari__kolom) input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.lg-bidang { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 16px; border-radius: 16px; background: var(--lg-surface-card); border: 1.5px solid var(--lg-border); }
.lg-bidang:focus-within { border-color: var(--lg-primary); box-shadow: var(--lg-focus); }
.lg-bidang input { flex: 1; min-width: 0; height: 50px; font: inherit; font-size: 16px; color: var(--lg-text); }
.lg-cari__kolom:focus-within { box-shadow: var(--lg-focus); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--lg-primary); outline-offset: 2px; }

/* ============================================================
 * STANDAR GRID & NOMINAL — kolom grid selalu minmax(0, 1fr) (tidak pernah 1fr polos),
 * dan nominal uang tidak boleh terpotong/meluber: kalau tidak muat di kolom sempit,
 * kartunya diberi baris penuh. (Kartu "Belum Bayar" di Beranda sempat terdorong keluar.)
 * ============================================================ */
.lg-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-minicard { min-width: 0; }
.lg-minicard--uang { grid-column: 1 / -1; order: -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ikon label nilai" "ikon sub nilai"; column-gap: 12px; row-gap: 2px; align-items: center; }
.lg-minicard--uang > .material-symbols-outlined { grid-area: ikon; font-size: 26px; width: 44px; height: 44px; border-radius: 12px; background: var(--lg-surface-card); display: inline-flex; align-items: center; justify-content: center; color: var(--lg-primary); }
.lg-minicard--uang .lg-minicard__label { grid-area: label; }
.lg-minicard--uang .lg-minicard__sub { grid-area: sub; }
.lg-minicard--uang strong { grid-area: nilai; font-size: clamp(18px, 5.4vw, 22px); }
[tabindex="-1"]:focus, dialog:focus { outline: none; box-shadow: none; }
/* Uang di Kas: label, nominal, dan "hari ini" bertumpuk di kanan ikon — tidak ada nominal yang terpotong. */
.lg-minicard--uang { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ikon label" "ikon nilai" "ikon sub"; }
.lg-minicard--uang .lg-minicard__sub { white-space: normal; overflow: visible; }

/* ============================================================
 * GAYA SOLID (2026-09-24) — bersih & tegas ala aplikasi harian (bukan pastel/gradien):
 *  - latar & teks NETRAL untuk semua tema (abu terang, kartu putih, teks hampir hitam);
 *    tema hanya mengganti warna utama (+ tint kotak ikon);
 *  - tanpa bayangan berwarna/berpendar, tanpa blob & titik dekoratif, tanpa garis putus-putus;
 *  - tombol huruf biasa (bukan KAPITAL), warna utama padat.
 * Tema "Hitam" = warna utama hitam di layar terang (BUKAN mode gelap).
 * ============================================================ */
html[data-tema], :root {
  --lg-surface: #F5F6F7; --lg-surface-card: #FFFFFF; --lg-neutral: #F1F2F4;
  --lg-text: #141414; --lg-text-muted: #6B7078; --lg-border: #E6E8EB; --lg-bayang: none;
  --lg-warn-bg: #FFF4DB; --lg-danger-bg: #FDE7E7;
}
html[data-tema="hijau"]  { --lg-primary:#00A443; --lg-primary-rgb:0,164,67;    --lg-primary-dark:#007A32; --lg-primary-soft:#E5F6EC; --lg-primary-line:#BDE7CD; --lg-primary-muted:#86D2A4; }
html[data-tema="hitam"]  { --lg-primary:#111111; --lg-primary-rgb:17,17,17;    --lg-primary-dark:#000000; --lg-primary-soft:#EDEDED; --lg-primary-line:#D6D6D6; --lg-primary-muted:#A8A8A8; }
html[data-tema="biru"]   { --lg-primary:#0A66D8; --lg-primary-rgb:10,102,216;  --lg-primary-dark:#064A9E; --lg-primary-soft:#E6F0FC; --lg-primary-line:#C2D8F5; --lg-primary-muted:#8DB6EC; }
html[data-tema="toska"]  { --lg-primary:#00988F; --lg-primary-rgb:0,152,143;   --lg-primary-dark:#006B65; --lg-primary-soft:#E0F4F2; --lg-primary-line:#B5E3DF; --lg-primary-muted:#7ACBC5; }
html[data-tema="ungu"]   { --lg-primary:#6A2FD0; --lg-primary-rgb:106,47,208;  --lg-primary-dark:#4B1E9A; --lg-primary-soft:#EFE8FB; --lg-primary-line:#D6C6F3; --lg-primary-muted:#B196E8; }
html[data-tema="oranye"] { --lg-primary:#EE5A0C; --lg-primary-rgb:238,90,12;   --lg-primary-dark:#B8430A; --lg-primary-soft:#FDEDE4; --lg-primary-line:#F8CDB4; --lg-primary-muted:#F3A37A; }
html[data-tema="merah"]  { --lg-primary:#D61F69; --lg-primary-rgb:214,31,105;  --lg-primary-dark:#A0154E; --lg-primary-soft:#FBE6EF; --lg-primary-line:#F3C0D5; --lg-primary-muted:#EA8DB3; }

/* Kepala & navigasi: putih padat, satu garis tipis. */
.lg-header { background: #FFFFFF; backdrop-filter: none; border-bottom: 1px solid var(--lg-border); }
.lg-bottomnav { background: #FFFFFF; backdrop-filter: none; }
.lg-land-aksi { background: #FFFFFF; backdrop-filter: none; }

/* Tanpa bayangan dekoratif (cincin fokus keyboard tetap ada). */
.lg-body :is(.lg-card, .lg-hero, .lg-quick, .lg-aksi, .lg-txitem, .lg-usertile, .lg-tab, .lg-btn, .lg-stat, .lg-cari__kolom,
  .lg-sapa__opsi, .lg-qris, .lg-land-card, .lg-land-ulasan__kartu, .lg-choice__body, .lg-chip, .lg-subcard, .lg-auth-card,
  .lg-aksi-buka__isi, .lg-minicard, .lg-form--card):not(:focus-visible) { box-shadow: none; }
.lg-body .lg-aksi[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--lg-primary); }
.lg-auth-hero img, .lg-land-cta .lg-btn--primary, .lg-land-aksi .lg-btn--primary { box-shadow: none; }

/* Dekorasi "AI" dibuang: blob & titik di kartu utama, kilau di ilustrasi, ikon miring. */
.lg-hero::before, .lg-hero::after { display: none; }
.lg-ilus__titik, .lg-ilus__kilau { display: none; }
.lg-ilus__blob { fill: var(--lg-neutral); }
.lg-ilus__ikon { transform: none; box-shadow: none; border: 1px solid var(--lg-border); border-radius: 20px; }

/* Tombol: huruf biasa, tebal, padat. */
.lg-btn--lg { text-transform: none; letter-spacing: 0; }
.lg-btn--xl { box-shadow: none; }

/* Garis putus-putus & area pastel → netral padat. */
.lg-usertile--tambah, .lg-pel--lain { border-style: solid; }
.lg-cari-bar { background: #FFFFFF; border: 1px solid var(--lg-border); color: var(--lg-text-muted); }
.lg-pel-baru { background: var(--lg-neutral); }
.lg-sapa__opsi.is-senang { background: var(--lg-surface-card); border-color: var(--lg-primary); }
.lg-tab.is-active { box-shadow: none; }
.lg-sheet { background: var(--lg-surface); }

/* Baris pilih orang (Kelola Anggota): avatar + nama + panah tombol padat. */
.lg-aksi--orang { min-height: 72px; }
.lg-aksi--orang .lg-avatar { color: #fff; }
.lg-aksi--orang .lg-aksi__teks strong { font-size: 16px; }
.lg-aksi__cta { margin-left: auto; width: 40px; height: 40px; border-radius: 999px; background: var(--lg-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lg-aksi__cta .material-symbols-outlined { font-size: 22px; }
.lg-aksi-daftar form { margin: 0; }
:root { --lg-primary:#00A443; --lg-primary-rgb:0,164,67; --lg-primary-dark:#007A32; --lg-primary-soft:#E5F6EC; --lg-primary-line:#BDE7CD; --lg-primary-muted:#86D2A4; }
.lg-admin-bar { background: #141414; }
/* Judul, chip, tombol Kembali, numpad: hampir hitam di semua tema (bukan hijau/biru tua) — kesan solid. */
html[data-tema][data-tema], :root:root { --lg-primary-dark: #141414; }
/* Kartu statistik berikon: ikon di atas teks supaya nominal selebar kartu dan tidak pernah terpotong. */
.lg-stat--ikon { flex-direction: column; align-items: flex-start; gap: 10px; }
.lg-stat--ikon strong { white-space: nowrap; font-size: clamp(16px, 4.6vw, 19px); font-variant-numeric: tabular-nums; overflow: visible; text-overflow: clip; }
/* Tab satu baris. */
.lg-tab { white-space: nowrap; font-size: 14px; gap: 6px; padding: 0 10px; }
.lg-tab .material-symbols-outlined { font-size: 20px; }
/* Warna utama diredam (masukan: hijau terang terlalu menyilaukan) — tetap padat, tidak neon. */
html[data-tema="hijau"]  { --lg-primary:#17804A; --lg-primary-rgb:23,128,74;   --lg-primary-soft:#E8F2EC; --lg-primary-line:#C5DFCF; --lg-primary-muted:#8FBFA3; }
html[data-tema="biru"]   { --lg-primary:#1F5FB0; --lg-primary-rgb:31,95,176;   --lg-primary-soft:#E8EFF8; --lg-primary-line:#C6D6EC; --lg-primary-muted:#93AFD6; }
html[data-tema="toska"]  { --lg-primary:#137A74; --lg-primary-rgb:19,122,116;  --lg-primary-soft:#E6F1F0; --lg-primary-line:#C1DEDB; --lg-primary-muted:#8CBFBB; }
html[data-tema="ungu"]   { --lg-primary:#5E3AA8; --lg-primary-rgb:94,58,168;   --lg-primary-soft:#EEEAF7; --lg-primary-line:#D3CAEB; --lg-primary-muted:#A897D2; }
html[data-tema="oranye"] { --lg-primary:#C4561A; --lg-primary-rgb:196,86,26;   --lg-primary-soft:#F8ECE4; --lg-primary-line:#EDCDB9; --lg-primary-muted:#DBA17F; }
html[data-tema="merah"]  { --lg-primary:#B22E62; --lg-primary-rgb:178,46,98;   --lg-primary-soft:#F7E8EE; --lg-primary-line:#EAC6D4; --lg-primary-muted:#D593AD; }
:root { --lg-primary:#17804A; --lg-primary-rgb:23,128,74; --lg-primary-soft:#E8F2EC; --lg-primary-line:#C5DFCF; --lg-primary-muted:#8FBFA3; }
.lg-stepper__input, input, textarea, select, button { font-family: inherit; }
.lg-stepper__input { font-variant-numeric: normal; }

/* ── Header form ringkas: tombol kembali ikon saja, judul memakai sisa ruang ── */
.lg-header--form .lg-header__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
.lg-btn-back { width: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
.lg-btn-back .material-symbols-outlined { font-size: 24px; }
.lg-header--form .lg-header__center { align-items: flex-start; text-align: left; }
.lg-header--form .lg-header__title, .lg-header--form .lg-header__sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-header__side .lg-header__chip--static { max-width: 96px; }
.lg-header__side .lg-header__chip--static span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-header--tab .lg-header__title, .lg-header--tab .lg-header__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.lg-header--tab .lg-header__brandtext { min-width: 0; }
@media (max-width: 400px) { .lg-header--tab .lg-header__chip [data-lg-nama-pengguna] { display: none; } }

/* ── Lonceng informasi ── */
.lg-notif { position: relative; }
.lg-notif[hidden] { display: none; }
.lg-notif__jumlah { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--lg-danger); color: #fff; font-size: 11px; font-weight: 800; line-height: 19px; text-align: center; border: 2px solid #fff; }
.lg-notif__jumlah[hidden] { display: none; }
.lg-aksi__ikon--bad { background: var(--lg-danger-bg); } .lg-aksi__ikon--bad .material-symbols-outlined { color: var(--lg-danger); }
.lg-aksi__ikon--ok { background: var(--lg-primary-soft); }
.lg-antrian-panel .lg-txitem { border: 1px solid var(--lg-border); }

/* ── Modal konfirmasi (pengganti confirm() browser) ── */
.lg-modal { width: min(360px, calc(100% - 40px)); margin: auto; border: 0; border-radius: 22px; padding: 26px 22px 20px; background: #fff; color: var(--lg-text); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.22); }
.lg-modal[open] { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lg-modal::backdrop { background: rgba(20,20,20,.45); }
.lg-modal__ikon { width: 60px; height: 60px; border-radius: 999px; background: var(--lg-primary-soft); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.lg-modal__ikon .material-symbols-outlined { font-size: 30px; color: var(--lg-primary); }
.lg-modal--bahaya .lg-modal__ikon { background: var(--lg-danger-bg); }
.lg-modal--bahaya .lg-modal__ikon .material-symbols-outlined { color: var(--lg-danger); }
.lg-modal__judul { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; }
.lg-modal__isi { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--lg-text-muted); }
.lg-modal__aksi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 12px; }
.lg-modal__aksi .lg-btn { height: 50px; }

/* ── Snackbar ── */
.lg-toast { display: flex; align-items: center; gap: 10px; width: min(420px, calc(100% - 32px)); max-width: none; bottom: calc(84px + env(safe-area-inset-bottom, 0)); background: #fff; color: var(--lg-text); border: 1px solid var(--lg-border); border-radius: 16px; padding: 14px 16px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.14); text-align: left; }
.lg-toast__ikon { font-size: 22px; color: var(--lg-primary); }
.lg-toast--err { background: #fff; }
.lg-toast--err .lg-toast__ikon { color: var(--lg-danger); }
.lg-main--form ~ .lg-toast, body:not(:has(.lg-bottomnav)) .lg-toast { bottom: calc(24px + env(safe-area-inset-bottom, 0)); }

/* ============================================================
 * MIKRO-ANIMASI — ringan: hanya transform & opacity (tanpa reflow), 120–260ms,
 * mati otomatis kalau HP meminta gerak dikurangi.
 * ============================================================ */
:root { --lg-ease: cubic-bezier(.2, .8, .2, 1); }
/* Tekan: semua yang bisa diketuk sedikit mengecil lalu kembali. */
.lg-btn, .lg-quick, .lg-aksi, .lg-txitem--tombol, a.lg-txitem, .lg-usertile, .lg-chip, .lg-tab, .lg-pel, .lg-tema, .lg-choice__body,
.lg-seg span, .lg-header__cari, .lg-header__chip, .lg-btn-back, .lg-sheet__tutup, .lg-stepper__btn, .lg-numpad button, .lg-sapa__opsi,
.lg-templat-gas__item, .lg-bottomnav__item, .lg-cari-bar, a.lg-minicard, button.lg-stat {
  transition: transform .14s var(--lg-ease), background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
:is(.lg-btn, .lg-quick, .lg-aksi, .lg-txitem--tombol, a.lg-txitem, .lg-usertile, .lg-chip, .lg-tab, .lg-pel, .lg-tema, .lg-seg span,
  .lg-header__cari, .lg-header__chip, .lg-btn-back, .lg-sheet__tutup, .lg-stepper__btn, .lg-sapa__opsi, .lg-templat-gas__item,
  .lg-cari-bar, a.lg-minicard, button.lg-stat):active { transform: scale(.97); }
.lg-choice input:active + .lg-choice__body { transform: scale(.98); }
.lg-numpad button:active { transform: scale(.92); }
.lg-bottomnav__item:active .material-symbols-outlined { transform: scale(.88); }
.lg-bottomnav__item .material-symbols-outlined { transition: transform .14s var(--lg-ease); }
.lg-bottomnav__item.is-active .material-symbols-outlined { animation: lg-lompat .32s var(--lg-ease); }
@keyframes lg-lompat { 40% { transform: translateY(-3px) scale(1.08); } }

/* Pilihan terpilih: sedikit "klik" masuk. */
.lg-choice input:checked + .lg-choice__body, .lg-seg input:checked + span, .lg-pel[aria-pressed="true"], .lg-tema[aria-pressed="true"],
.lg-templat-gas__item[aria-pressed="true"] { animation: lg-pilih .22s var(--lg-ease); }
@keyframes lg-pilih { 50% { transform: scale(1.03); } }

/* Sheet naik halus + latar memudar; modal muncul membesar; snackbar meluncur. */
.lg-sheet[open] { animation: lg-naik .26s var(--lg-ease) both; }
@keyframes lg-naik { from { transform: translateY(28px); opacity: .5; } to { transform: none; opacity: 1; } }
dialog::backdrop { animation: lg-pudar .22s ease both; }
@keyframes lg-pudar { from { opacity: 0; } }
.lg-modal[open] { animation: lg-muncul .22s var(--lg-ease) both; }
@keyframes lg-muncul { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.lg-toast { transform: translate(-50%, 16px); transition: opacity .2s ease, transform .26s var(--lg-ease); }
.lg-toast.is-show { transform: translate(-50%, 0); }
.lg-toast.is-show .lg-toast__ikon { animation: lg-pop .3s var(--lg-ease) .06s both; }

/* Halaman & langkah: isi masuk memudar-naik sedikit (bukan per elemen, supaya tetap ringan). */
.lg-main > * { animation: lg-tampil .24s var(--lg-ease) both; }
.lg-main > *:nth-child(2) { animation-delay: .03s; } .lg-main > *:nth-child(3) { animation-delay: .06s; } .lg-main > *:nth-child(n+4) { animation-delay: .09s; }
@keyframes lg-tampil { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
[data-lg-langkah].is-aktif { animation: lg-masuk .24s var(--lg-ease) both; }
.lg-aksi-buka[open] > .lg-aksi-buka__isi { animation: lg-tampil .2s var(--lg-ease) both; }
.lg-aksi__panah { transition: transform .2s var(--lg-ease); }

/* Angka jumlah lonceng "pop" saat berubah; ikon sukses memantul. */
.lg-notif__jumlah.is-pop { animation: lg-pop .3s var(--lg-ease); }
.lg-success__icon { animation: lg-pop .4s var(--lg-ease) .05s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, dialog::backdrop { animation: none !important; transition: none !important; }
}
/* Header tab: logo + satu judul; chip akun jadi avatar saja (+ titik koneksi) supaya lonceng, cari, dan akun muat rapi. */
.lg-header--tab .lg-header__title { font-size: 18px; }
.lg-header--tab .lg-header__chip [data-lg-nama-pengguna], .lg-header--tab .lg-header__chip > .material-symbols-outlined { display: none; }
.lg-header--tab .lg-header__chip { padding: 0 8px 0 10px; gap: 6px; }
.lg-header--tab .lg-header__chip .lg-avatar { width: 30px; height: 30px; font-size: 14px; }
.lg-modal .lg-btn--danger { background: var(--lg-danger); color: #fff; border-color: var(--lg-danger); }

/* ── STANDAR JARAK & JUMLAH KOLOM (masukan: spasi antar tombol tidak konsisten) ──
   - Deret aksi di header: jarak SAMA 8px; hanya aksi pertama yang didorong ke kanan.
   - Grid tombol/kartu mengikuti jumlah isinya (2 isi = 2 kolom), tidak menyisakan slot kosong. */
.lg-header--tab .lg-header__row { gap: 8px; }
.lg-header--tab .lg-header__row > .lg-header__cari, .lg-header--tab .lg-header__row > .lg-header__chip { margin-left: 0; }
.lg-header--tab .lg-header__brand { margin-right: auto; }
.lg-quickrow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-hero__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg-minicard--lebar { grid-column: 1 / -1; }
/* Tabung melon 3 kg selalu HIJAU seperti aslinya — tidak ikut tema (tema hanya mewarnai tombol & aksen).
   Juga gaya solid: tanpa bayangan berpendar & tidak dimiringkan. */
.lg-ilus__tabung { filter: none; transform: none; }
.lg-ilus__badan { fill: #2E9E4F; }
.lg-ilus__garis { stroke: #1B6B33; }
.lg-ilus__kaki { fill: #1B6B33; }
.lg-ilus__api { fill: #F2A900; }
/* Stepper jumlah: label "Tabung" diberi jarak dari kotak angka; kotak lebih lega. */
.lg-stepper { padding: 12px; }
.lg-stepper__val { gap: 8px; }
.lg-stepper__val small { line-height: 1; }
/* Chip jumlah cepat: satu baris rata (4 kolom sama lebar), tidak ada chip yatim di baris kedua. */
.lg-chips--rata { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lg-chips--rata .lg-chip { padding: 0 6px; font-size: 13px; white-space: nowrap; min-width: 0; }
/* Ilustrasi tanpa oval/blob (masukan: bentuk oval sebagai hiasan tidak disukai) — kotak ikon bersudut, garis tipis. */
.lg-ilus { width: auto; height: auto; }
.lg-ilus__latar { display: none; }
.lg-ilus__ikon { width: 72px; height: 72px; border-radius: 20px; background: var(--lg-neutral); border: 1px solid var(--lg-border); }
.lg-ilus__ikon .material-symbols-outlined { font-size: 34px; color: var(--lg-primary); }
.lg-ilus__tabung { width: 96px; height: 86px; }
.lg-emptybox { gap: 12px; }
/* Halaman masuk tanpa bilah atas: beri ruang atas yang lega; catatan di bawah kolom rata kiri. */
.lg-auth-hero { padding-top: clamp(28px, 8vh, 72px); }
.lg-auth-card .lg-petunjuk { text-align: left; justify-content: flex-start; align-items: flex-start; }
.lg-admin-login { max-width: 440px; margin: 0 auto; }
.lg-baris__ikon--ok { background: var(--lg-primary-soft); }
.lg-log__isi { white-space: normal !important; overflow: visible !important; font-weight: 700; line-height: 1.4; }
/* Nav bawah admin: 5 menu, ikon dengan angka. */
.lg-bottomnav__ikon { position: relative; display: inline-flex; }
.lg-bottomnav__ikon .lg-notif__jumlah { top: -6px; right: -12px; }
.lg-main--admin.lg-main--tab { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0)); }
/* Pemberitahuan berikon (lg_pesan): ikon & teks berjarak lega, teks rata kiri sejajar ikon. */
.lg-alert--ikon { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; line-height: 1.5; font-weight: 600; }
.lg-alert--ikon > .material-symbols-outlined { font-size: 22px; margin-top: -1px; flex-shrink: 0; }
.lg-alert--ok { background: var(--lg-primary-soft); color: var(--lg-primary-dark); }
.lg-alert--ok > .material-symbols-outlined { color: var(--lg-primary); }
/* Petunjuk berikon (lg-petunjuk) juga diberi jarak yang sama. */
.lg-petunjuk { gap: 10px; line-height: 1.5; }

/* ── STANDAR PLACEHOLDER — teks contoh di kolom (terutama kolom cari) PENDEK: maks ±22 huruf,
   cukup "Cari …" + kata kunci utama (keterangan lengkap di aria-label/petunjuk). Kalau tetap
   tidak muat di HP sempit, berakhir "…" — tidak pernah terpotong di tengah kata. */
input, textarea { text-overflow: ellipsis; }
input::placeholder { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
input::placeholder, textarea::placeholder { color: #9AA0A6; opacity: 1; }
/* Header tab admin: sisi kanan (lonceng + avatar) dikelompokkan, jarak sama 8px. */
.lg-header--tab .lg-header__side { margin-left: auto; gap: 8px; }
.lg-header__side .lg-header__chip:not(.lg-header__chip--static) { padding: 0 8px; }
/* Nama wadah uang boleh 2 baris (tidak terpotong "Dompet Pengelol…"). */
.lg-wadah__nama { white-space: normal; overflow: visible; align-items: flex-start; line-height: 1.3; }
.lg-wadah__nama .material-symbols-outlined { margin-top: -1px; }
.lg-baris .lg-txitem__row > .lg-nowrap { white-space: nowrap; flex-shrink: 0; }

/* ============================================================
 * FASE 6.3 — STANDAR TOMBOL AKSI HEADER: semua lingkaran 40px (lonceng, cari, akun),
 * di aplikasi warung & admin. Akun = lingkaran avatar tanpa kapsul; titik koneksi menempel
 * di sudut avatar. Lencana angka tepat di tengah.
 * ============================================================ */
.lg-header__cari, .lg-header__chip { width: 40px; height: 40px; min-width: 40px; padding: 0 !important; border-radius: 999px; flex-shrink: 0; }
.lg-header__chip, .lg-header__chip--static { position: relative; display: inline-flex; align-items: center; justify-content: center; background: transparent !important; border: 0 !important; gap: 0 !important; max-width: none; }
.lg-header__chip .lg-avatar { width: 40px !important; height: 40px !important; font-size: 16px !important; font-weight: 800; }
.lg-header__chip .lg-conn { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border: 2px solid #fff; z-index: 1; }
.lg-header__chip [data-lg-nama-pengguna]:not(.lg-sr-only), .lg-header__chip > .material-symbols-outlined { display: none; }
.lg-notif__jumlah { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; line-height: 1; font-size: 11px; font-variant-numeric: tabular-nums; box-sizing: border-box; }

/* Modal/sheet terbuka: halaman di belakang tidak ikut ter-scroll (tidak ada scroll ganda). */
html:has(dialog[open]), html:has(dialog[open]) body { overflow: hidden; }
.lg-sheet, .lg-modal { overscroll-behavior: contain; }
.lg-profil .lg-aksi__teks strong { font-size: 17px; white-space: normal; word-break: break-word; }
.lg-profil__ganti { min-height: 36px; margin-left: auto; flex-shrink: 0; pointer-events: none; }

/* Ilustrasi unDraw inline (Fase 6.7): aksen = warna tema (currentColor), tanpa oval/latar. */
.lg-gambar { display: block; color: var(--lg-primary); line-height: 0; margin: 0 auto; }
.lg-gambar svg { width: 100%; height: auto; display: block; }
.lg-gambar--kosong { width: min(170px, 46vw); margin-bottom: 4px; }
.lg-gambar--sapa { width: min(150px, 42vw); }
.lg-gambar--besar { width: min(240px, 62vw); }

/* ============================================================
 * FASE 6.1 — UMPAN BALIK SIMPAN/UBAH/HAPUS
 * ============================================================ */
.lg-putar { width: 18px; height: 18px; border-radius: 999px; border: 2.5px solid currentColor; border-right-color: transparent; display: inline-block; animation: lg-putar .7s linear infinite; flex-shrink: 0; }
@keyframes lg-putar { to { transform: rotate(360deg); } }
.lg-btn.is-memuat { opacity: .85; cursor: progress; }
.lg-btn.is-sukses { background: var(--lg-primary) !important; color: #fff !important; border-color: var(--lg-primary) !important; }
.lg-btn.is-sukses .material-symbols-outlined { animation: lg-pop .32s var(--lg-ease) both; }
.lg-btn.is-gagal { animation: lg-getar .36s ease; }
@keyframes lg-getar { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
/* Baris/kartu yang baru diubah disorot sebentar; yang dihapus memudar & mengecil. */
.is-sorot { animation: lg-sorot 1.6s ease both; }
@keyframes lg-sorot { 0%, 35% { box-shadow: 0 0 0 3px var(--lg-primary), 0 0 0 9px rgba(var(--lg-primary-rgb), .14); background-color: var(--lg-primary-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
.is-hilang { opacity: 0 !important; transform: scale(.96) !important; transition: opacity .26s ease, transform .26s ease !important; }

/* ============================================================
 * FASE 6.2 — TRANSISI ANTAR HALAMAN (View Transitions lintas dokumen).
 * Isi halaman memudar-geser singkat; header & nav bawah diam. Browser lama: pindah biasa.
 * ============================================================ */
@view-transition { navigation: auto; }
.lg-header { view-transition-name: lg-header; }
.lg-bottomnav { view-transition-name: lg-nav; }
/* Isi halaman TIDAK diberi nama sendiri (plan.md 7.6): kotak bernama dianimasikan ukurannya lama→baru dan
   gambarnya diregangkan → terasa zoom in/out. Isi ikut lapisan akar: silang-pudar + naik 6 px, tanpa skala. */
::view-transition-group(lg-header), ::view-transition-group(lg-nav) { animation: none; }
::view-transition-old(lg-header), ::view-transition-old(lg-nav) { display: none; }
::view-transition-new(lg-header), ::view-transition-new(lg-nav) { animation: none; }
::view-transition-old(root) { animation: lg-vt-keluar .14s ease-in both; }
::view-transition-new(root) { animation: lg-vt-masuk .24s var(--lg-ease) both; }
@keyframes lg-vt-keluar { to { opacity: 0; } }
@keyframes lg-vt-masuk { from { opacity: 0; transform: translateY(6px); } }
/* Kalau View Transitions didukung, animasi masuk per-elemen lama tidak perlu (tidak dobel). */
@supports (view-transition-name: none) { .lg-main > * { animation: none; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* Fase 6.8: teks antarmuka (tombol, menu, nav, kartu aksi) tidak bisa diseleksi; isi & kolom ketik tetap bisa. */
.lg-btn, .lg-quick, .lg-aksi, .lg-tab, .lg-chip, .lg-bottomnav, .lg-header, .lg-usertile, .lg-pel, .lg-numpad, .lg-sheet__tutup, .lg-tema { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img { -webkit-user-drag: none; }

/* Laporan: navigator periode ‹ label › + tombol rentang (Fase 6.6). */
.lg-periode { display: flex; align-items: center; gap: 8px; background: var(--lg-surface-card); border-radius: 16px; padding: 8px; }
.lg-periode__label { flex: 1; min-width: 0; text-align: center; font-size: 15px; font-weight: 800; }
.lg-periode__geser { width: 40px; height: 40px; border-radius: 999px; background: var(--lg-neutral); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--lg-text); }
.lg-periode__geser.is-mati { opacity: .35; pointer-events: none; }
.lg-periode__rentang { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--lg-border); background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: var(--lg-text); cursor: pointer; flex-shrink: 0; }
.lg-periode__rentang.is-active { border-color: var(--lg-primary); color: var(--lg-primary); }
.lg-periode__rentang .material-symbols-outlined { font-size: 18px; }
.lg-chart--rapat .lg-chart__lbl { font-size: 9px; }
.lg-chart--rapat { gap: 2px; }
.lg-bottomnav--desktop { display: none !important; }
.lg-numpad button.is-tekan { transform: scale(.92); background: var(--lg-primary-soft); }
.lg-cari__hasil .lg-aksi:focus-visible { box-shadow: 0 0 0 2px var(--lg-primary) !important; }
.lg-kbd { display: none; }
.lg-auth-samping { display: none; }
.lg-auth-samping + * { margin-top: 0 !important; }
/* Navigasi halaman daftar panjang (Riwayat, dst.). */
.lg-halaman { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 8px; }
.lg-halaman .lg-btn { height: 48px; font-size: 14px; }
.lg-halaman__no { font-size: 13px; font-weight: 700; color: var(--lg-text-muted); }
.lg-main > .lg-stack > .lg-halaman { grid-column: 1 / -1; }
.lg-lipat > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 14px; border-radius: 999px; background: var(--lg-neutral); font-size: 13px; font-weight: 700; color: var(--lg-primary); }
.lg-lipat > summary::-webkit-details-marker { display: none; }
.lg-lipat > summary::after { content: "expand_more"; font-family: 'Material Symbols Outlined'; font-size: 18px; transition: transform .2s var(--lg-ease); }
.lg-lipat[open] > summary::after { transform: rotate(180deg); }
.lg-lipat[open] > summary { margin-bottom: 4px; }
/* Tombol kecil "Ganti" di kartu profil: isi tepat di tengah, ikon + teks. */
.lg-profil__ganti { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px;
  background: var(--lg-primary-soft); color: var(--lg-primary); font-size: 13px; font-weight: 800; line-height: 1; white-space: nowrap; flex-shrink: 0; margin-left: auto; min-height: 0; border: 0; }
.lg-profil__ganti .material-symbols-outlined { font-size: 18px; }

/* STANDAR BARIS DAFTAR: nominal & lencana di kanan tidak pernah patah baris; teks kiri yang mengalah (ellipsis). */
.lg-txitem__row > :is([class*="lg-amount-"], .lg-badge, .lg-nowrap) { white-space: nowrap; flex-shrink: 0; }
:is(.lg-baris, a.lg-txitem, .lg-txitem--tombol) .lg-txitem__row > :first-child:not(:only-child) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tombol kecil sekunder (aksi tambahan di dalam kartu, mis. Nonaktifkan jenis gas). */
.lg-btn-kecil { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; margin-top: 8px; border-radius: 999px;
  border: 1.5px solid var(--lg-border); background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: var(--lg-text-muted); cursor: pointer; }
.lg-btn-kecil .material-symbols-outlined { font-size: 18px; }
.lg-btn-kecil--bahaya { color: var(--lg-danger); border-color: #F3C7C7; }
.lg-subcard { display: flex; flex-direction: column; gap: 10px; }
.lg-subcard > form:last-child { display: flex; justify-content: flex-start; }
/* Kartu wadah uang: kalau jumlahnya ganjil, kartu terakhir selebar baris (tidak ada kartu yatim). */
.lg-wadahgrid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.lg-lipat--daftar > summary { margin-bottom: 10px; }
.lg-periode__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-anggota-adm { padding: 10px 0; border-bottom: 1px dashed var(--lg-border); }
.lg-anggota-adm:last-child { border-bottom: 0; }
.lg-anggota-adm__siapa { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lg-anggota-adm__siapa > span:last-child { display: flex; flex-direction: column; }
.lg-anggota-adm .lg-avatar { color: #fff; }
.lg-anggota-adm .lg-btn-kecil { margin-top: 0; }

/* ── Pembungkus tata letak desktop (css/lapgas-desktop.css pola "dua panel") ──
   .lg-panel = ringkasan & tombol, .lg-utama = daftar. Di HP keduanya tidak ada (display: contents),
   jadi urutan & jarak tumpukan HP tetap persis seperti sebelumnya. */
.lg-panel, .lg-utama { display: contents; }

/* ── STANDAR: ikon di dalam tombol selalu di tengah (standar desain #8) ──
   Tombol ikon-saja memakai ikon Material (bukan karakter teks "−"/"+", yang posisinya ikut garis dasar
   huruf sehingga turun/naik), dan tombolnya inline-flex + align/justify center. */
.lg-stepper__btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.lg-stepper__btn .material-symbols-outlined { font-size: 30px; font-weight: 700; }
/* Progres langkah berjarak jelas dari kartu di bawahnya (jarak tumpukan formulir = 18 px). */
.lg-langkah-progres { margin-bottom: 0; min-height: 20px; }

/* ── STANDAR #10: pemuat halaman & bilah pindah halaman (js/lg-muat.js) ──
   Penutup selatar halaman sampai HTML + font siap, lalu memudar (isi tidak pernah tampil setengah jadi).
   Logo + putaran baru muncul setelah 250 ms → halaman cepat tidak berkedip pemuat. */
.lg-pemuat { position: fixed; inset: 0; z-index: 9990; display: none; place-items: center; background: inherit; background-color: var(--lg-surface); }
html.lg-memuat .lg-pemuat { display: grid; }
html.lg-siap .lg-pemuat { display: grid; animation: lg-pemuat-hilang .24s ease forwards; pointer-events: none; }
.lg-pemuat__isi { display: flex; flex-direction: column; align-items: center; gap: 18px; opacity: 0; animation: lg-pemuat-muncul .2s ease .25s forwards; }
.lg-pemuat__logo { width: 56px; height: 56px; border-radius: 16px; }
.lg-pemuat__putar { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--lg-primary-soft); border-top-color: var(--lg-primary); animation: lg-putar .75s linear infinite; }
@keyframes lg-pemuat-hilang { to { opacity: 0; visibility: hidden; } }
@keyframes lg-pemuat-muncul { to { opacity: 1; } }
/* Animasi dikurangi (setelan sistem, mis. Windows "Animation effects" mati): aturan global di atas mematikan SEMUA animasi,
   termasuk pudarnya penutup — tanpa ini penutup tidak pernah hilang dan halaman tampak kosong. Sembunyikan langsung saat siap. */
@media (prefers-reduced-motion: reduce) { html.lg-siap .lg-pemuat { display: none !important; } .lg-pemuat__isi { opacity: 1; } }

/* Bilah tipis di atas saat pindah halaman (tautan/tombol ke halaman lain): tanda "sedang dimuat". */
.lg-pindah-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9995; pointer-events: none;
  background: var(--lg-primary); transform: scaleX(0); transform-origin: left; opacity: 0; transition: opacity .2s ease; }
html.lg-pindah .lg-pindah-bar { opacity: 1; animation: lg-pindah-jalan 6s cubic-bezier(.08, .7, .2, 1) forwards; }
@keyframes lg-pindah-jalan { 0% { transform: scaleX(0); } 12% { transform: scaleX(.4); } 100% { transform: scaleX(.94); } }
html.lg-pindah, html.lg-pindah * { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .lg-pemuat__putar { animation-duration: 2s; }
  html.lg-pindah .lg-pindah-bar { animation: none; transform: scaleX(.7); }
}

/* ── STANDAR: tombol sebaris sama tinggi ──
   Tombol yang berdampingan (formulir, <a>, atau <summary> pembuka) selalu 48 px — tidak ada yang lebih
   besar/kecil hanya karena elemennya berbeda. */
:is(.lg-grid2, .lg-ulasan-adm__aksi) > :is(form, details) { margin: 0; min-width: 0; }
:is(.lg-grid2, .lg-ulasan-adm__aksi) :is(.lg-btn, summary.lg-btn):not(.lg-btn--lg, .lg-btn--xl) { height: 48px; min-height: 48px; padding-top: 0; padding-bottom: 0; }
.lg-grid2 > details > summary.lg-btn { list-style: none; display: flex; align-items: center; justify-content: center; }
.lg-grid2 > details > summary.lg-btn::-webkit-details-marker { display: none; }

/* ── Kartu ulasan (admin): kepala berpenulis, kutipan, izin, aksi sama lebar ── */
.lg-ulasan-adm { display: flex; flex-direction: column; gap: 12px; }
.lg-ulasan-adm__kepala { display: flex; align-items: center; gap: 12px; }
.lg-ulasan-adm__siapa { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lg-ulasan-adm__siapa strong { font-size: 15px; }
.lg-ulasan-adm__siapa .lg-muted { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-ulasan-adm__bintang { color: #F2B01E; font-size: 18px; letter-spacing: 1px; white-space: nowrap; flex-shrink: 0; }
.lg-ulasan-adm__bintang .is-kosong { color: #D5DDD7; }
.lg-ulasan-adm__isi { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--lg-neutral); font-size: 15.5px; line-height: 1.6; }
.lg-ulasan-adm__izin { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.lg-ulasan-adm__izin .material-symbols-outlined { font-size: 18px; }
.lg-ulasan-adm__izin.is-boleh { color: var(--lg-primary); }
.lg-ulasan-adm__izin.is-tidak { color: var(--lg-danger); }
.lg-ulasan-adm__aksi { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.lg-ulasan-adm__aksi .lg-btn { font-size: 14px; gap: 6px; }
.lg-ulasan-adm__aksi .lg-btn .material-symbols-outlined { font-size: 19px; }

/* ── Ulasan di landing: ringkasan rata-rata + kartu kutipan berpenulis ── */
.lg-land-ulasan__kepala { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.lg-land-ulasan__judul { font-size: 17px; font-weight: 800; margin: 0; }
.lg-land-ulasan__rata { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lg-land-ulasan__rata strong { font-size: 20px; font-weight: 800; }
.lg-land-ulasan__rel { grid-auto-columns: min(84%, 320px); }
.lg-land-ulasan__kartu { position: relative; gap: 12px; padding: 18px 20px; overflow: hidden; }
.lg-land-ulasan__kartu::before { content: "\201C"; position: absolute; top: -6px; right: 14px; font-size: 76px; line-height: 1; font-weight: 800; color: var(--lg-primary-soft); pointer-events: none; }
.lg-land-ulasan__kartu blockquote { position: relative; font-size: 15px; line-height: 1.6; color: var(--lg-text); }
.lg-land-ulasan__siapa { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--lg-border); font-size: inherit; color: inherit; }
.lg-land-ulasan__siapa > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.lg-land-ulasan__siapa strong { font-size: 14px; }
.lg-land-ulasan__siapa small { font-size: 12px; font-weight: 600; color: var(--lg-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Carousel ulasan (js/lapgas.js): tanpa batang gulir, titik penanda di bawah. */
.lg-land-ulasan__rel { scrollbar-width: none; overscroll-behavior-x: contain; }
.lg-land-ulasan__rel::-webkit-scrollbar { display: none; }
.lg-land-ulasan__rel.is-lompat { scroll-snap-type: none; }
.lg-land-ulasan__titik { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.lg-land-ulasan__titik span { width: 6px; height: 6px; border-radius: 999px; background: var(--lg-primary-line); transition: width .25s ease, background-color .25s ease; }
.lg-land-ulasan__titik span.is-aktif { width: 20px; background: var(--lg-primary); }

/* Bar tombol landing (HP & tablet): latar putih + garis atas SELEBAR LAYAR, tombolnya tetap selebar isi
   (560 px) di tengah — bukan pita putih di tengah dengan kanan-kiri kosong. Desktop menaruh tombol di hero. */
.lg-land-aksi { max-width: none; margin: 0; padding-left: max(16px, calc((100% - 560px) / 2 + 16px)); padding-right: max(16px, calc((100% - 560px) / 2 + 16px)); }
/* Ulasan admin di HP: "Tampilkan" satu baris penuh, Sembunyikan + Hapus berdua di bawahnya (label tidak terpotong);
   nama warung & tanggal boleh turun baris. */
.lg-ulasan-adm__aksi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-ulasan-adm__aksi:has(> :nth-child(3)) > :first-child { grid-column: 1 / -1; }
.lg-ulasan-adm__siapa .lg-muted { white-space: normal; }

/* ── Fase 7: tempat uang menurut cara bayar, QRIS toko ── */
.lg-wadah-pasti { margin: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--lg-primary-soft); color: var(--lg-primary-dark); font-size: 14px; }
.lg-wadah-pasti .material-symbols-outlined { color: var(--lg-primary); font-size: 22px; }
.lg-choice.is-mati { opacity: .45; }
.lg-choice.is-mati .lg-choice__body { cursor: not-allowed; }
.lg-hint--ikon { display: flex; align-items: flex-start; gap: 8px; }
.lg-hint--ikon > .material-symbols-outlined { font-size: 18px; color: var(--lg-primary); flex-shrink: 0; margin-top: 1px; }
.lg-seg--ikon span { gap: 6px; }
.lg-seg--ikon .material-symbols-outlined, .lg-seg--wrap span > .material-symbols-outlined { font-size: 18px; }
.lg-seg--wrap span { gap: 6px; }
.lg-h2--ikon { display: flex; align-items: center; gap: 8px; }
.lg-h2--ikon .material-symbols-outlined { color: var(--lg-primary); font-size: 22px; }
.lg-qris-kartu { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lg-qris-toko { display: block; width: min(100%, 340px); height: auto; margin: 0 auto; border-radius: 16px; background: #fff; border: 1px solid var(--lg-border); padding: 10px; }
.lg-sheet--qris { text-align: center; }
.lg-sheet--qris .lg-qris-toko { width: min(100%, 380px); }
.lg-unggah { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--lg-primary-line); border-radius: 16px; background: var(--lg-primary-soft); cursor: pointer; }
.lg-unggah input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lg-unggah__ikon { width: 48px; height: 48px; border-radius: 14px; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--lg-primary); flex-shrink: 0; }
.lg-unggah__teks { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-unggah__teks small { color: var(--lg-text-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-unggah:focus-within { box-shadow: var(--lg-focus); }

/* Ulasan landing: 1 ulasan = satu kartu di tengah (bukan menempel kiri); ≥ 2 = carousel otomatis. */
.lg-land-ulasan__rel:has(> :only-child) { grid-auto-columns: min(100%, 440px); justify-content: center; overflow: visible; }

/* ============================================================
 * STANDAR #3 DITEGAKKAN — skala spasi tetap (plan.md 7.9)
 * Sebelumnya jarak diatur berlapis dengan clamp() menurut TINGGI layar; di HP pendek nilai minimumnya
 * terlalu kecil sehingga judul, kartu, dan catatan saling menempel. Sekarang satu skala:
 *   4 · 8 · 12 · 16 · 20 · 24 · 32 px
 *   label→kolom 8 · antar kolom/isi formulir 18 · isi kartu 20 (desktop 24) · antar bagian 24
 *   kepala halaman → kartu pertama 24 · catatan/teks bantu → tombol 16 · antar kartu daftar 12
 * Aturan per halaman yang menyimpang dihapus; halaman baru cukup memakai kelas dasar.
 * ============================================================ */
:root { --lg-s1: 4px; --lg-s2: 8px; --lg-s3: 12px; --lg-s4: 16px; --lg-s5: 20px; --lg-s6: 24px; --lg-s8: 32px;
        --lg-gap: clamp(18px, 2.6vh, 28px); --lg-gap-sm: clamp(12px, 1.8vh, 18px); --lg-pad: 20px; }
.lg-label, .lg-auth-field { gap: var(--lg-s2); }
.lg-form, .lg-auth-card .lg-form { gap: 18px; }
.lg-card, .lg-hero, .lg-form--card, .lg-auth-card { padding: var(--lg-pad); }
.lg-auth-card { gap: 18px; }
.lg-auth-card > .lg-petunjuk { margin-top: 2px; }

/* Halaman masuk/daftar/lupa sandi — warung & petugas: kepala → kartu → tautan bawah berjarak 24 px.
   (.lg-admin-login adalah pembungkus, jadi aturan jarak .lg-main--modal tidak sampai ke anaknya.) */
.lg-main--modal > * + *, .lg-admin-login > * + * { margin-top: var(--lg-s6); }
.lg-auth-hero { padding-bottom: 0; }
.lg-auth-alt { margin-top: var(--lg-s6); }
.lg-admin-login { padding-bottom: var(--lg-s8); }

/* Landing: ritme antar bagian 32 px, kepala bagian → isi 16 px. */
.lg-land-ulasan { margin-top: var(--lg-s8); }
.lg-land-ulasan__kepala { margin-bottom: var(--lg-s4); gap: var(--lg-s2) var(--lg-s4); }
.lg-land-ulasan__judul { line-height: 1.3; }
.lg-land-ulasan__titik { margin-top: var(--lg-s4); }
.lg-land-ulasan__kartu { padding: var(--lg-s5); gap: var(--lg-s3); }
.lg-land-ulasan__siapa { padding-top: var(--lg-s3); }
.lg-land-janji { margin-top: var(--lg-s6); }
/* Titik penanda carousel: 8 px, jarak 10 px, yang aktif memanjang 24 px (tidak rapat, tetap mudah dibaca). */
.lg-land-ulasan__titik { gap: 10px; }
.lg-land-ulasan__titik span { width: 8px; height: 8px; }
.lg-land-ulasan__titik span.is-aktif { width: 24px; }
/* "Ulasan Anda" di sheet Bantuan (plan.md 7.10). */
.lg-ulasan-saya { width: 100%; margin-top: var(--lg-s4); text-align: left; font: inherit; border: 1px solid var(--lg-border); cursor: pointer; }
.lg-ulasan-saya__bintang { color: #F2B01E; font-size: 13px; letter-spacing: 1px; margin-left: 4px; }

/* ============================================================
 * Admin (plan.md 7.5) — mengikuti referensi .ref/stitch_*_admin_*, bahasa visual sama dengan aplikasi.
 * ============================================================ */
.lg-adm-ringkas { display: flex; flex-direction: column; gap: var(--lg-s3); }
.lg-adm-ringkas__atas { display: flex; align-items: center; gap: var(--lg-s3); }
.lg-adm-ringkas__atas > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lg-adm-ringkas__atas .lg-muted { font-size: 12.5px; }
.lg-adm-ringkas__atas strong { font-size: 26px; font-weight: 800; line-height: 1.15; }
.lg-adm-ringkas__atas strong small { font-size: 15px; font-weight: 600; color: var(--lg-text-muted); }
.lg-badge .material-symbols-outlined { font-size: 14px; vertical-align: -2px; }
.lg-adm-ringkas__batang { display: block; height: 8px; border-radius: 999px; background: var(--lg-neutral); overflow: hidden; }
.lg-adm-ringkas__batang > span { display: block; height: 100%; border-radius: inherit; background: var(--lg-primary); }
.lg-adm-ringkas__bawah { display: flex; justify-content: space-between; gap: var(--lg-s2); font-size: 12.5px; font-weight: 700; }

.lg-adm-mendesak { display: flex; align-items: center; gap: var(--lg-s3); padding: var(--lg-s4); border-radius: var(--lg-radius-lg); background: #FFF4DB; color: #6B4A00; text-decoration: none; border: 1px solid #F3D48A; }
.lg-adm-mendesak__ikon { width: 44px; height: 44px; border-radius: 12px; background: #F2B01E; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lg-adm-mendesak__teks { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lg-adm-mendesak__teks strong { font-size: 15px; }
.lg-adm-mendesak__teks small { font-size: 12.5px; opacity: .85; }

.lg-adm-cari { position: relative; }
.lg-adm-cari__hapus { display: inline-flex; color: var(--lg-text-muted); }
.lg-adm-chips { display: flex; gap: var(--lg-s2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lg-adm-chips::-webkit-scrollbar { display: none; }
.lg-adm-chips .lg-chip { min-height: 40px; font-size: 13.5px; flex-shrink: 0; }
.lg-adm-chips .lg-chip span { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--lg-neutral); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.lg-chip.is-aktif { background: var(--lg-primary); border-color: var(--lg-primary); color: #fff; }
.lg-chip.is-aktif span { background: rgba(255,255,255,.22); color: #fff; }
.lg-chip.is-perlu:not(.is-aktif) span { background: #F2B01E; color: #fff; }

.lg-adm-warung, .lg-adm-daftar { display: flex; flex-direction: column; gap: var(--lg-s3); color: inherit; text-decoration: none; }
.lg-adm-warung__kepala { display: flex; align-items: center; gap: var(--lg-s3); }
.lg-adm-warung__nama { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.lg-adm-warung__nama strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-adm-warung__nama .lg-muted { font-size: 12.5px; }
.lg-adm-warung__info { display: flex; flex-direction: column; gap: 6px; padding: var(--lg-s3); border-radius: 12px; background: var(--lg-neutral); font-size: 13.5px; }
.lg-adm-warung__info > span { display: flex; align-items: flex-start; gap: 8px; }
.lg-adm-warung__info .material-symbols-outlined { font-size: 18px; color: var(--lg-primary); flex-shrink: 0; }
.lg-adm-warung__kaki { display: flex; justify-content: space-between; gap: var(--lg-s2); font-size: 12.5px; }
.lg-adm-daftar__waktu { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.lg-adm-daftar__waktu small { font-size: 11.5px; color: var(--lg-text-muted); font-weight: 600; }
.lg-adm-kode { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px var(--lg-s3); padding: var(--lg-s3); border-radius: 12px; border: 1px dashed var(--lg-primary-line); }
.lg-adm-kode > span { font-size: 13px; font-weight: 700; }
.lg-adm-kode > strong { grid-row: 1 / span 2; grid-column: 2; }
.lg-adm-kode > small { font-size: 12px; color: var(--lg-text-muted); }
.lg-adm-kode.is-basi { border-color: var(--lg-danger); }
.lg-adm-kode.is-basi > small { color: var(--lg-danger); font-weight: 700; }
.lg-admin-tolak > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.lg-admin-tolak > summary::-webkit-details-marker { display: none; }
.lg-admin-tolak > summary .material-symbols-outlined { font-size: 18px; }
.lg-admin-tolak[open] > form { margin-top: var(--lg-s3); }

.lg-adm-profil { display: flex; align-items: center; gap: var(--lg-s4); }
.lg-adm-profil > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-adm-profil strong { font-size: 18px; }
.lg-adm-grup { display: flex; flex-direction: column; gap: var(--lg-s3); }
.lg-adm-grup__judul { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--lg-text-muted); }
.lg-adm-grup__judul .material-symbols-outlined { font-size: 18px; color: var(--lg-primary); }
.lg-adm-grup__isi { padding: 6px var(--lg-s2); display: flex; flex-direction: column; }
.lg-adm-grup__isi > .lg-aksi { box-shadow: none; background: transparent; border-radius: 12px; }
.lg-adm-grup__isi > .lg-aksi + .lg-aksi { border-top: 1px solid var(--lg-border); border-radius: 0; }
.lg-aksi--datar { cursor: default; }

.lg-adm-rekap { display: flex; flex-direction: column; gap: var(--lg-s4); }
.lg-adm-rekap__utama { display: flex; align-items: center; justify-content: space-between; gap: var(--lg-s3); padding: var(--lg-s4); border-radius: 14px; background: var(--lg-primary-soft); }
.lg-adm-rekap__utama > div { display: flex; flex-direction: column; gap: 2px; }
.lg-adm-rekap__utama strong { font-size: 32px; font-weight: 800; color: var(--lg-primary-dark); line-height: 1.1; }
.lg-adm-rekap__utama strong small { font-size: 15px; font-weight: 700; }
.lg-adm-rekap__ikon { width: 52px; height: 52px; border-radius: 50%; background: var(--lg-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.lg-adm-rekap .lg-statrow { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.lg-statrow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg-statrow--3 .lg-stat strong small { font-size: 12px; font-weight: 600; color: var(--lg-text-muted); }
.lg-adm-bar { color: inherit; text-decoration: none; }
/* Teks "Masuk ke <b>…</b>" satu kalimat: bukan flex (celah flex memecah teks & tebal jadi dua spasi). */
.lg-wadah-pasti { display: block; line-height: 22px; }
.lg-wadah-pasti > .material-symbols-outlined { vertical-align: -5px; margin-right: 6px; }
/* Kotak status formulir yang masih kosong tidak menambah jarak di bawah tombol (tetap ada untuk aria-live). */
.lg-form > .lg-form__status:empty { margin-top: -18px; min-height: 0; }
/* Ilustrasi tabung gas (plan.md 7.8): hijau tetap, tidak ikut tema. */
.lg-gambar--tabung { width: min(120px, 34vw); margin-bottom: 6px; }

/* ============================================================
 * Panduan bergambar (plan.md Fase 8)
 * ============================================================ */
.lg-pand-kepala { display: flex; align-items: center; gap: var(--lg-s4); }
.lg-pand-kepala .lg-h2 { margin: 0 0 2px; }
.lg-pand-alur { display: flex; flex-direction: column; gap: var(--lg-s3); }
.lg-pand-alur .lg-aksi__teks small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.lg-pand-bab__ringkas { margin: 0; display: flex; align-items: flex-start; gap: 8px; color: var(--lg-text-muted); font-size: 14px; line-height: 1.5; }
.lg-pand-bab__ringkas .material-symbols-outlined { color: var(--lg-primary); font-size: 20px; }
.lg-pand-langkah-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--lg-s6); counter-reset: none; }
.lg-pand-langkah { display: flex; flex-direction: column; gap: var(--lg-s4); padding: var(--lg-pad); border-radius: var(--lg-radius-lg); background: var(--lg-surface-card); box-shadow: var(--lg-bayang); scroll-margin-top: 80px; }
.lg-pand-langkah__teks { display: flex; gap: var(--lg-s3); align-items: flex-start; }
.lg-pand-langkah__no { width: 32px; height: 32px; border-radius: 50%; background: var(--lg-primary); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lg-pand-langkah h3 { margin: 4px 0 6px; font-size: 17px; line-height: 1.3; }
.lg-pand-langkah p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--lg-text); }
.lg-pand-layar { margin: 0 auto; width: min(100%, 300px); padding: 8px; border-radius: 28px; background: #101512; box-shadow: 0 8px 24px rgba(15,41,30,.18); }
.lg-pand-layar img { display: block; width: 100%; height: auto; border-radius: 20px; }
.lg-pand-nav { margin-top: var(--lg-s2); }
/* Sorotan elemen yang harus diketuk — dipasang alat snapshot panduan saat memotret. */
.lg-sorot-panduan { outline: 4px solid #F2B01E !important; outline-offset: 4px; border-radius: 14px; box-shadow: 0 0 0 10px rgba(242,176,30,.28) !important; position: relative; z-index: 5; }

/* Versi cetak (?cetak=1 → PDF panduan lengkap) */
.lg-pand-cetak { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--lg-s8); }
.lg-pand-sampul { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; gap: var(--lg-s4); }
.lg-pand-sampul img { border-radius: 24px; }
.lg-pand-sampul h1 { margin: 0; font-size: 34px; line-height: 1.15; }
.lg-pand-isi { margin: var(--lg-s4) 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.lg-pand-isi span { font-weight: 500; color: var(--lg-text-muted); margin-left: 6px; }
.lg-pand-kaki { color: var(--lg-text-muted); font-size: 12.5px; }
.lg-pand-bab h2 { display: flex; align-items: center; gap: 10px; font-size: 24px; margin: 0 0 8px; }
.lg-pand-bab h2 .material-symbols-outlined { width: 44px; height: 44px; border-radius: 12px; background: var(--lg-primary-soft); color: var(--lg-primary); display: inline-flex; align-items: center; justify-content: center; }
.lg-pand-bab .lg-pand-langkah-daftar { margin-top: var(--lg-s5); }
@media print {
  .lg-header, .lg-bottomnav, .lg-pemuat, .lg-pindah-bar, .lg-offline-banner, dialog { display: none !important; }
  body.lg-body { background: #fff; }
  .lg-main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .lg-pand-sampul, .lg-pand-bab { break-after: page; }
  .lg-pand-langkah { break-inside: avoid; box-shadow: none; border: 1px solid #E3E6E4; flex-direction: row; align-items: flex-start; }
  .lg-pand-langkah__teks { flex: 1; }
  .lg-pand-layar { width: 210px; flex-shrink: 0; box-shadow: none; }
}
/* Pintu masuk panduan (plan.md 8.4) */
.lg-panduan-ajak { position: relative; }
.lg-panduan-ajak[hidden] { display: none; }
.lg-panduan-ajak > .lg-aksi { padding-right: 56px; }
.lg-panduan-ajak__tutup { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--lg-neutral); color: var(--lg-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lg-panduan-ajak__tutup .material-symbols-outlined { font-size: 18px; }
.lg-land-panduan { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--lg-s4); font-weight: 700; font-size: 14.5px; color: var(--lg-primary); text-decoration: none; }
.lg-land-panduan .material-symbols-outlined { font-size: 20px; }
/* Ubin menu ganjil terakhir melebar (tidak ada sel kosong). */
.lg-menugrid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media print { @page { size: A4; margin: 14mm 12mm; } }
/* Navigasi antar-alur panduan: baris penuh, "Lanjut belajar" disorot warna utama. */
.lg-pand-nav { display: flex; flex-direction: column; gap: var(--lg-s3); margin-top: var(--lg-s2); }
.lg-pand-nav .lg-aksi__teks small { order: -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.lg-pand-nav__berikut { background: var(--lg-primary); color: #fff; }
.lg-pand-nav__berikut .lg-aksi__ikon { background: rgba(255,255,255,.18); color: #fff; }
.lg-pand-nav__berikut .lg-aksi__teks small, .lg-pand-nav__berikut .lg-aksi__panah { color: rgba(255,255,255,.85); }
.lg-pand-nav > .lg-link { padding: var(--lg-s2) 0; }
/* Pilihan tema: ubin mendatar (contoh warna kiri, nama kanan) 2 kolom; ubin ganjil terakhir selebar baris. */
.lg-tema-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lg-s3); }
.lg-tema { flex-direction: row; justify-content: flex-start; gap: var(--lg-s3); padding: 10px 12px; min-height: 60px; font-size: 14px; text-align: left; }
.lg-tema__contoh { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; }
.lg-tema-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.lg-tema[aria-pressed="true"] { border-color: var(--lg-primary); background: var(--lg-primary-soft); }

/* ── STANDAR #13: hierarki visual ──
   Judul & teks pengantar halaman langsung di latar (tanpa kartu/bayangan/ikon berlatar) — kartu putih, ikon
   berlatar, dan panah hanya untuk hal yang bisa diketuk atau data yang dikelompokkan. Label bagian = teks kecil. */
.lg-kepala-halaman { display: flex; flex-direction: column; gap: 6px; padding: var(--lg-s2) 2px var(--lg-s1); }
.lg-kepala-halaman__label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lg-primary); }
.lg-kepala-halaman h1 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.lg-kepala-halaman p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--lg-text-muted); }
.lg-label-bagian { margin: var(--lg-s2) 2px calc(-1 * var(--lg-s1)); font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--lg-text-muted); }

/* ── Persiapan warung terpandu (plan.md Fase 9) ── */
.lg-persiapan { display: flex; flex-direction: column; gap: var(--lg-s4); border: 1px solid var(--lg-primary-line); }
.lg-persiapan__kepala { display: flex; flex-direction: column; gap: 8px; }
.lg-persiapan__kepala strong { font-size: 17px; line-height: 1.3; }
.lg-persiapan__daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lg-persiapan__daftar > li > a, .lg-persiapan__daftar > li > div { display: flex; align-items: center; gap: var(--lg-s3); padding: 10px 12px; border-radius: 12px; color: inherit; text-decoration: none; }
.lg-persiapan__daftar > li > a { background: var(--lg-neutral); }
.lg-persiapan__daftar > li.is-berikut > a { background: var(--lg-primary); color: #fff; }
.lg-persiapan__daftar > li.is-berikut small { color: rgba(255,255,255,.85); }
.lg-persiapan__tanda { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: #fff; color: var(--lg-primary); border: 2px solid var(--lg-primary-line); }
.lg-persiapan__daftar > li.is-berikut .lg-persiapan__tanda { border-color: #fff; }
.lg-persiapan__daftar > li.is-selesai .lg-persiapan__tanda { background: var(--lg-primary); color: #fff; border-color: var(--lg-primary); }
.lg-persiapan__tanda .material-symbols-outlined { font-size: 18px; }
.lg-persiapan__teks { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.lg-persiapan__teks strong { font-size: 14.5px; }
.lg-persiapan__teks strong em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--lg-text-muted); margin-left: 4px; }
.lg-persiapan__daftar > li.is-berikut .lg-persiapan__teks strong em { color: rgba(255,255,255,.8); }
.lg-persiapan__teks small { font-size: 12.5px; color: var(--lg-text-muted); }
.lg-persiapan__daftar > li.is-selesai .lg-persiapan__teks { opacity: .6; }
.lg-persiapan__panah { font-size: 20px; }
.lg-persiapan__panduan { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.lg-persiapan__panduan .material-symbols-outlined { font-size: 18px; }
.lg-stok-nol .lg-grid2 { margin-top: var(--lg-s3); }

/* ── Huruf inisial avatar tepat di tengah lingkaran ──
   Kotak baris huruf Plus Jakarta Sans menyisakan ruang di atas huruf kapital → inisial tampak turun 1–2 px.
   Browser baru: potong kotak teks ke tinggi huruf kapital (text-box). Browser lama: koreksi kecil. */
.lg-avatar { line-height: 1; padding-bottom: .08em; }
@supports (text-box: trim-both cap alphabetic) {
  .lg-avatar { text-box: trim-both cap alphabetic; padding-bottom: 0; }
}
.lg-header__chip { justify-content: center; position: relative; }

/* ── Tombol × pada kolom cari (bawaan browser tidak bergaya) → lingkaran abu-abu 28 px dengan ikon X ── */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin: 0 -4px 0 8px; border-radius: 50%; cursor: pointer;
  background: var(--lg-neutral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B64' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 14px no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover { background-color: var(--lg-primary-soft); }
.lg-adm-cari input[type="search"]::-webkit-search-cancel-button { display: none; }
.lg-stok-nol .lg-btn { font-size: 14px; padding: 0 10px; white-space: nowrap; gap: 6px; }

/* Sheet (dialog) TIDAK ikut aturan jarak tumpukan: ".lg-main--modal > * + *" memberi margin-top pada dialog
   sehingga margin "auto auto 0" (menempel bawah layar) hilang → sheet mengambang di atas dengan area kosong di bawah. */
/* Aturan jarak "* + *" (.lg-main--modal, .lg-pilih, dst.) juga mengenai dialog di dalamnya. Posisi sheet adalah
   bagian dari komponen, bukan ritme tumpukan → dikunci di sini (satu tempat, berlaku untuk semua halaman). */
dialog.lg-sheet { margin: auto auto 0 !important; }
@media (min-width: 600px) { dialog.lg-sheet { margin: auto !important; } }
/* STANDAR sheet: jarak antar isi sheet HANYA dari gap flex .lg-sheet[open] (16 px) — jangan tambah aturan
   "#id-sheet > * + * { margin-top }" per sheet: jaraknya jadi dobel dan tombol × tidak lagi sejajar judul. */
.lg-sheet[open] > * { margin-top: 0; }
.lg-sheet[open] > .lg-sheet__x { margin-bottom: -48px; }

/* ── Tema "Warna sendiri" (hue bebas) ── */
.lg-tema__contoh--pelangi { background: conic-gradient(from 90deg, hsl(0 64% 42%), hsl(60 64% 42%), hsl(120 64% 36%), hsl(180 64% 36%), hsl(240 64% 42%), hsl(300 64% 42%), hsl(360 64% 42%)); }
.lg-tema--kustom[aria-pressed="true"] .lg-tema__contoh--pelangi { background: none; }
.lg-tema-panel { display: flex; flex-direction: column; gap: var(--lg-s3); padding: var(--lg-s4); border-radius: 16px; background: var(--lg-surface-card); box-shadow: var(--lg-bayang); }
.lg-tema-panel[hidden] { display: none; }
.lg-hue { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.lg-hue::-webkit-slider-runnable-track { height: 18px; border-radius: 999px; background: linear-gradient(90deg, hsl(0 64% 40%), hsl(45 64% 38%), hsl(90 64% 34%), hsl(135 64% 32%), hsl(180 64% 32%), hsl(225 64% 40%), hsl(270 64% 42%), hsl(315 64% 40%), hsl(359 64% 40%)); }
.lg-hue::-moz-range-track { height: 18px; border-radius: 999px; background: linear-gradient(90deg, hsl(0 64% 40%), hsl(45 64% 38%), hsl(90 64% 34%), hsl(135 64% 32%), hsl(180 64% 32%), hsl(225 64% 40%), hsl(270 64% 42%), hsl(315 64% 40%), hsl(359 64% 40%)); }
.lg-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -8px; border-radius: 50%; background: var(--lg-primary); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.lg-hue::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--lg-primary); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.lg-hue:focus-visible { outline: none; }
.lg-hue:focus-visible::-webkit-slider-thumb { box-shadow: var(--lg-focus); }
.lg-tema-panel__contoh { display: flex; align-items: center; gap: var(--lg-s3); flex-wrap: wrap; }
.lg-tema-panel__contoh .lg-btn { height: 40px; padding: 0 16px; font-size: 14px; pointer-events: none; }
.lg-tema-panel__lembut { width: 40px; height: 40px; border-radius: 12px; background: var(--lg-primary-soft); color: var(--lg-primary); display: inline-flex; align-items: center; justify-content: center; }
/* Belum dipilih: contoh pelangi; terpilih: warna pilihan (ikut variabel tema yang sedang dipratinjau). */
.lg-tema--kustom:not([aria-pressed="true"]) .lg-tema__contoh--pelangi > span { display: none; }

/* ── STANDAR: tombol teks (.lg-linkbtn) — ikon & teks sejajar di tengah (sebelumnya ikon turun dari garis teks) ── */
.lg-linkbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.2; }
.lg-linkbtn .material-symbols-outlined { font-size: 19px; line-height: 1; }

/* ── Kelola agen (includes/agen-kelola.php): baris ringkas, formulir terbuka di tempat saat diketuk ── */
.lg-agen-daftar { display: flex; flex-direction: column; gap: var(--lg-s3); }
.lg-agen { border-radius: 16px; background: var(--lg-surface-card); box-shadow: var(--lg-bayang); overflow: hidden; }
.lg-agen > summary.lg-aksi { list-style: none; box-shadow: none; border-radius: 0; cursor: pointer; }
.lg-agen > summary::-webkit-details-marker { display: none; }
.lg-agen > summary .lg-aksi__panah { transition: transform .2s ease; }
.lg-agen[open] > summary .lg-aksi__panah { transform: rotate(180deg); }
.lg-agen[open] > summary { border-bottom: 1px solid var(--lg-border); }
.lg-agen__isi { display: flex; flex-direction: column; gap: var(--lg-s2); padding: var(--lg-s4); }
.lg-agen__isi > form + form { align-items: center; }
.lg-agen__kosong { color: var(--lg-warn-text, #8A5A00) !important; }
.lg-agen-lama > summary { list-style: none; padding: var(--lg-s2) 0; cursor: pointer; }
.lg-agen-lama > summary::-webkit-details-marker { display: none; }
.lg-agen-lama__baris { display: flex; align-items: center; justify-content: space-between; gap: var(--lg-s3); padding: 10px 14px; margin-top: var(--lg-s2); border-radius: 12px; background: var(--lg-neutral); }
.lg-agen-lama__nama { display: flex; flex-direction: column; min-width: 0; }
.lg-agen-lama__baris small { font-size: 12px; color: var(--lg-text-muted); }
.lg-agen-lama__baris form { flex-shrink: 0; }

/* ── STANDAR: ikon di atas permukaan berwarna utama (kartu/tombol hijau, hitam, atau warna sendiri) ──
   Kotak ikon PUTIH + ikon warna utama → selalu kontras di semua tema (sebelumnya latar transparan + ikon warna
   utama = tak terlihat di tema Hitam). Berlaku untuk "Lanjut belajar", langkah persiapan berikutnya, Tambah agen. */
.lg-pand-nav__berikut .lg-aksi__ikon { background: #fff !important; color: var(--lg-primary) !important; }
.lg-pand-nav__berikut .lg-aksi__ikon .material-symbols-outlined { color: var(--lg-primary) !important; }
.lg-persiapan__daftar > li.is-berikut .lg-persiapan__tanda { background: #fff; color: var(--lg-primary); }
.lg-wadah-awal { display: flex; flex-direction: column; gap: var(--lg-s2); }
.lg-wadah-awal > form + form { align-items: center; }

/* ── Buka/tutup agen halus: tinggi <details> dianimasikan oleh js/lapgas.js (semua browser). Isi ikut memudar.
   Pemisah = garis tipis di DALAM isi (menjorok, ikut bergerak) — bukan border summary yang muncul mendadak & terpotong. ── */
.lg-agen > summary { transition: background-color .15s ease; }
.lg-agen > summary.lg-aksi:active { transform: none; background: var(--lg-neutral); }
.lg-agen[open] > summary { border-bottom: 0; }
.lg-agen__isi { position: relative; padding-top: var(--lg-s3); transition: opacity .22s ease; }
.lg-agen__isi::before { content: ""; position: absolute; top: 0; left: var(--lg-s4); right: var(--lg-s4); height: 1px; background: var(--lg-border); }
.lg-agen:not(.is-terbuka) > .lg-agen__isi { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .lg-agen__isi { transition: none; } }
.lg-agen-lama__baris { gap: var(--lg-s2); }

/* Baris agen tidak aktif: nama selebar sisa ruang, tombol Aktifkan & Hapus berdampingan di kanan.
   (.lg-form bawaan width:100% membuat nama terjepit jadi satu kata per baris.) */
.lg-agen-lama__baris { flex-wrap: nowrap; }
.lg-agen-lama__nama { flex: 1; min-width: 0; }
.lg-agen-lama__nama strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-agen-lama__aksi { display: flex; flex-direction: row; align-items: center; gap: var(--lg-s3); flex-shrink: 0; }
.lg-agen-lama__aksi > form { width: auto; gap: 0; }
.lg-agen-lama__aksi .lg-linkbtn { min-height: 40px; padding: 0 2px; font-size: 13.5px; }
.lg-agen-lama > summary { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--lg-text-muted); }
/* Tombol kecil sebaris di baris agen tidak aktif: sama tinggi, tanpa jarak atas bawaan .lg-btn-kecil. */
.lg-agen-lama__aksi { gap: var(--lg-s2); }
.lg-agen-lama__aksi .lg-btn-kecil { margin-top: 0; height: 36px; padding: 0 12px; font-size: 13px; }
.lg-agen-lama__aksi .lg-btn-kecil--bahaya { background: var(--lg-danger-bg, #FDECEC); border-color: transparent; }
.lg-agen-lama__nama strong { white-space: normal; overflow: visible; line-height: 1.3; }
.lg-agen-lama > summary { list-style: none; background: none !important; box-shadow: none !important; min-height: 0 !important; padding: var(--lg-s2) 2px !important; }

/* ── Perangkat Tersimpan: satu kartu per HP — nama HP tebal, kode/OS/browser kecil, lalu keterangan
   per baris (dipakai oleh / terakhir dipakai / pertama masuk) dan tombol Cabut kecil di kanan bawah. ── */
.lg-perangkat { display: flex; flex-direction: column; gap: var(--lg-s3); padding: var(--lg-s4); border-radius: 16px; background: var(--lg-surface-card); box-shadow: var(--lg-bayang); }
.lg-perangkat.is-ini { box-shadow: var(--lg-bayang), inset 0 0 0 1.5px var(--lg-primary); }
.lg-perangkat__atas { display: flex; align-items: center; gap: 12px; }
.lg-perangkat__ikon { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--lg-primary-soft, var(--lg-neutral)); color: var(--lg-primary); }
.lg-perangkat__nama { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lg-perangkat__nama strong { font-size: 15.5px; line-height: 1.3; }
.lg-perangkat__nama small { font-size: 12.5px; color: var(--lg-text-muted); line-height: 1.35; }
.lg-perangkat__atas .lg-badge { flex-shrink: 0; align-self: flex-start; }
.lg-perangkat__info { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-top: var(--lg-s3); border-top: 1px solid var(--lg-border); }
.lg-perangkat__info > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--lg-s3); }
.lg-perangkat__info dt { font-size: 13px; color: var(--lg-text-muted); }
.lg-perangkat__info dd { margin: 0; font-size: 13.5px; font-weight: 700; text-align: right; }
.lg-perangkat__aksi { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; width: auto; }
.lg-perangkat__aksi .lg-btn-kecil { margin-top: 0; }
.lg-perangkat__aksi .lg-form__status:empty { display: none; }
.lg-perangkat__aktif { display: inline-flex; align-items: center; gap: 6px; color: var(--lg-primary); }
.lg-perangkat__aktif::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22A559; box-shadow: 0 0 0 3px rgba(34,165,89,.18); animation: lg-denyut 2s ease-in-out infinite; }
@keyframes lg-denyut { 50% { box-shadow: 0 0 0 5px rgba(34,165,89,.06); } }
@media (prefers-reduced-motion: reduce) { .lg-perangkat__aktif::before { animation: none; } }
.lg-btn-back--kosong { visibility: hidden; }

/* ── STANDAR #15: tombol & ikon di dalamnya (standar_button_tipografi_lapor_gas.md) ──
   Ikon SELALU mengikuti warna teks tombolnya (currentColor, tidak transparan) — aturan ikon per komponen seperti
   ".lg-emptybox .material-symbols-outlined" (40px, hijau, 60%) tidak boleh ikut masuk ke tombol (penyebab ikon
   tak terlihat di tombol hijau & teks jadi tidak di tengah). Ukuran ikon: Primary 22px, Secondary/Danger 20px,
   tombol kecil 18px, tautan-tombol 19px. Tinggi & huruf tombol tetap per jenis (Primary 56/16px, Secondary &
   Danger 48/15px) — tombol di dalam kisi/peringatan tidak mengecilkan hurufnya sendiri. */
.lg-btn > .material-symbols-outlined, .lg-btn-kecil > .material-symbols-outlined, .lg-linkbtn > .material-symbols-outlined {
  color: currentColor !important; opacity: 1 !important; flex-shrink: 0; line-height: 1; margin: 0; }
.lg-btn > .material-symbols-outlined { font-size: 22px; }
.lg-btn--secondary > .material-symbols-outlined, .lg-btn--danger > .material-symbols-outlined { font-size: 20px; }
.lg-btn-kecil > .material-symbols-outlined { font-size: 18px; }
.lg-linkbtn > .material-symbols-outlined { font-size: 19px; }
.lg-stok-nol .lg-btn { font-size: 15px; }
.lg-halaman .lg-btn { font-size: 15px; }
/* Isi sheet tidak boleh menyusut saat isinya lebih tinggi dari layar (tombol Pengingat sempat gepeng 24px) —
   sheet yang menggulir, bukan anaknya yang diperas. */
dialog.lg-sheet > * { flex-shrink: 0; }
/* "Catat jual pertama" bukan langkah Pengaturan Awal: dipisah garis & bertanda bendera (bukan nomor 8). */
.lg-persiapan__daftar > li.lg-persiapan__akhir { margin-top: var(--lg-s2); padding-top: var(--lg-s3); border-top: 1px solid var(--lg-border); }
/* Hitung Ulang Stok: keterangan "Di catatan: 12 · +2" di bawah kolom; selisih berwarna. */
.lg-hitung-ket { font-size: 12.5px; font-weight: 600; color: var(--lg-text-muted); }
.lg-hitung-ket.is-naik { color: var(--lg-primary); }
.lg-hitung-ket.is-turun { color: var(--lg-danger); }

/* ── Baris hitung tabung (Pengaturan Awal 5 & Hitung Ulang Stok): label kiri, − [angka] + kanan.
   Tombol −/+ memberi tahu bahwa angkanya bisa diubah (kolom abu-abu polos terlihat seperti teks mati). ── */
.lg-hitung-baris { display: flex; align-items: center; justify-content: space-between; gap: var(--lg-s3); }
.lg-hitung-baris + .lg-hitung-baris { padding-top: var(--lg-s3); border-top: 1px solid var(--lg-border); }
.lg-hitung-baris__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; font-weight: 700; }
.lg-stepper--kecil { flex-shrink: 0; gap: 6px; padding: 4px; border-radius: 14px; }
.lg-stepper--kecil .lg-stepper__btn { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lg-stepper--kecil .lg-stepper__btn .material-symbols-outlined { font-size: 22px; color: #fff; }
.lg-stepper--kecil .lg-stepper__input { width: 64px; height: 44px; font-size: 20px; }
.lg-stepper--kecil .lg-stepper__input::placeholder { color: var(--lg-text-muted); opacity: .6; }

/* ── Kartu isi ulang stok di Beranda (habis / menipis) — menggantikan kotak merah polos.
   Kepala: ikon berlatar + judul + rincian per jenis; status "Sudah dipesan" bila ditandai; lalu aksi bertumpuk:
   1) Pesan ke agen (WhatsApp), 2) Gas datang → Konfirmasi Tukar N Tabung. ── */
.lg-restok { display: flex; flex-direction: column; gap: var(--lg-s3); padding: var(--lg-s4); border-radius: 16px;
  background: var(--lg-surface-card); border: 1.5px solid #F3C7C7; box-shadow: var(--lg-bayang); text-align: left; }
.lg-restok--tipis { border-color: #F2D9A6; }
.lg-restok__kepala { display: flex; align-items: flex-start; gap: 12px; }
.lg-restok__ikon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--lg-danger-bg); }
.lg-restok__ikon .material-symbols-outlined { font-size: 24px; color: var(--lg-danger); }
.lg-restok--tipis .lg-restok__ikon { background: #FFF1D6; }
.lg-restok--tipis .lg-restok__ikon .material-symbols-outlined { color: var(--lg-warn); }
.lg-restok__judul { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-restok__judul strong { font-size: 17px; line-height: 1.3; color: var(--lg-danger); }
.lg-restok--tipis .lg-restok__judul strong { color: var(--lg-warn-text, #8A5A00); }
.lg-restok__judul small { font-size: 13px; color: var(--lg-text-muted); line-height: 1.4; }
.lg-restok__judul small b { color: var(--lg-text); }
.lg-restok__status { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px;
  background: var(--lg-primary-soft); color: var(--lg-primary-dark, var(--lg-primary)); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.lg-restok__status .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }
.lg-restok__aksi { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.lg-restok__aksi > .lg-linkbtn { align-self: center; }
.lg-restok__aksi .lg-linkrow { display: flex; justify-content: center; gap: var(--lg-s4); flex-wrap: wrap; }
.lg-restok__ke { margin-top: -4px; text-align: center; font-size: 12.5px; color: var(--lg-text-muted); }

/* ── STANDAR #16: tombol "tandai / konfirmasi" = tombol centang, bukan teks polos ──
   Baris berbingkai dengan kotak centang kosong di kiri: terlihat bisa diketuk & jelas artinya "tandai sudah".
   Saat ditekan kotaknya terisi hijau (umpan balik instan) sebelum halaman diperbarui. */
.lg-cekbtn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border-radius: 14px;
  border: 1.5px dashed var(--lg-primary-line, #B9DCC4); background: var(--lg-surface-card); color: var(--lg-text); font: inherit; text-align: left; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease; }
.lg-cekbtn:hover { border-color: var(--lg-primary); }
.lg-cekbtn:active { background: var(--lg-primary-soft); }
.lg-cekbtn__kotak { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--lg-primary); display: grid; place-items: center; background: #fff; transition: background-color .15s ease; }
.lg-cekbtn__kotak .material-symbols-outlined { font-size: 20px; color: var(--lg-primary); opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease; }
.lg-cekbtn:hover .lg-cekbtn__kotak .material-symbols-outlined { opacity: .35; transform: scale(1); }
.lg-cekbtn.is-dicentang .lg-cekbtn__kotak { background: var(--lg-primary); }
.lg-cekbtn.is-dicentang .lg-cekbtn__kotak .material-symbols-outlined { opacity: 1; transform: scale(1); color: #fff; }
.lg-cekbtn__teks { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lg-cekbtn__teks strong { font-size: 15px; line-height: 1.3; }
.lg-cekbtn__teks small { font-size: 12.5px; color: var(--lg-text-muted); line-height: 1.35; }
/* Kartu isi ulang ada DI DALAM kartu sapaan (padding dobel) → padding lebih ramping supaya label tombol muat satu baris di HP 360 px. */
.lg-restok { padding: 14px; }
.lg-restok .lg-btn { padding: 0 12px; white-space: nowrap; }
/* Tautan teks ber-ikon (lg-link dengan ikon di depan): ikon sejajar tengah teks, sama seperti .lg-linkbtn. */
.lg-link:has(> .material-symbols-outlined) { display: inline-flex; align-items: center; gap: 6px; }
.lg-link > .material-symbols-outlined { font-size: 19px; line-height: 1; flex-shrink: 0; }
summary.lg-link:has(> .material-symbols-outlined) { display: flex; }

/* ── Pita status offline: MENGAMBANG di bawah header (bukan mendorong seluruh halaman turun ±48 px seperti dulu,
   sehingga tampilan offline = tampilan online). Berisi "Terputus" dan/atau "angka dari salinan jam …". ── */
.lg-pita { position: fixed; z-index: 60; top: calc(72px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.lg-pita .lg-offline-banner { display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 12px; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15,41,30,.14); line-height: 1.35; pointer-events: auto; }
.lg-pita .lg-offline-banner[hidden] { display: none; }
.lg-pita .lg-offline-banner .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }

/* ── STANDAR #17: kartu angka yang BISA diketuk harus terlihat bisa diketuk ──
   Dulu hanya "Dipinjam warga" (Stok) / "Belum Bayar" (Beranda) yang berupa tautan, tanpa tanda apa pun — di HP tidak
   ketahuan (tidak ada hover). Sekarang setiap kartu angka berupa <a>/<button> otomatis mendapat ikon › di pojok kanan
   atas + efek tekan, tanpa perlu menambah markup. Kartu angka yang hanya informasi (div) tetap tanpa ikon. */
:is(a, button).lg-minicard, :is(a, button).lg-stat { position: relative; cursor: pointer; text-decoration: none; color: inherit;
  transition: transform .12s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; }
:is(a, button).lg-minicard::after, :is(a, button).lg-stat::after { content: "chevron_right"; position: absolute; top: 8px; right: 6px;
  font-family: 'Material Symbols Outlined'; font-size: 20px; line-height: 1; color: var(--lg-text-muted); opacity: .75; pointer-events: none;
  font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; }
:is(a, button).lg-minicard:active, :is(a, button).lg-stat:active { transform: scale(.98); }
@media (hover: hover) { :is(a, button).lg-minicard:hover, :is(a, button).lg-stat:hover { box-shadow: inset 0 0 0 1.5px var(--lg-primary-line, #C5E6CF); } }
:is(a, button).lg-minicard .lg-minicard__label, :is(a, button).lg-stat span:first-child { padding-right: 18px; }

/* Kartu "Siapkan warung" ringkas: judul + progres + SATU langkah berikutnya; daftar lengkap dilipat di bawah. */
.lg-persiapan { gap: var(--lg-s3); }
.lg-persiapan__semua > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--lg-primary); }
.lg-persiapan__semua > summary::-webkit-details-marker { display: none; }
.lg-persiapan__semua > summary .material-symbols-outlined { font-size: 20px; }
.lg-persiapan__buka { margin-left: auto; transition: transform .2s ease; }
.lg-persiapan__semua[open] .lg-persiapan__buka { transform: rotate(180deg); }
.lg-persiapan__semua[open] > summary ~ * { animation: lg-agen-buka .22s ease both; }
.lg-persiapan__semua > .lg-persiapan__daftar { margin-top: 8px; }
.lg-persiapan__semua > .lg-persiapan__panduan { margin-top: 12px; }
/* Di daftar lengkap langkah berikutnya tidak perlu diblok hijau lagi (sudah tampil di atas). */
.lg-persiapan__semua .lg-persiapan__daftar > li.is-berikut > a { background: var(--lg-neutral); color: inherit; }
.lg-persiapan__semua .lg-persiapan__daftar > li.is-berikut small, .lg-persiapan__semua .lg-persiapan__daftar > li.is-berikut .lg-persiapan__teks strong em { color: var(--lg-text-muted); }
.lg-persiapan__semua .lg-persiapan__daftar > li.is-berikut .lg-persiapan__tanda { border-color: var(--lg-primary-line); }

/* ── Usap sheet ke bawah: animasi muncul hanya sekali (is-siap), jadi melepas jari tidak memutar ulang animasi
   (penyebab sheet "glitch": melompat naik lalu hilang). Latar gelap memudar mengikuti tarikan (--lg-tarik 0–1). ── */
.lg-sheet.is-siap { animation: none !important; }
.lg-sheet::backdrop { opacity: calc(1 - var(--lg-tarik, 0)); }
.lg-sheet.is-seret::backdrop { transition: none; }
.lg-sheet.is-lepas::backdrop { transition: opacity .22s ease; }
.lg-sheet.is-seret, .lg-sheet.is-lepas { will-change: transform; }
/* Pita offline satu baris (tidak menutupi banyak isi); diketuk → mengecil jadi ikon bulat di kanan, diketuk lagi → terbuka. */
.lg-pita .lg-offline-banner { cursor: pointer; }
.lg-pita__teks { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-pita.is-kecil { align-items: flex-end; }
.lg-pita.is-kecil .lg-offline-banner { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
.lg-pita.is-kecil .lg-pita__teks { display: none; }
.lg-badge--info { background: var(--lg-info-bg, #E3EEFB); color: var(--lg-info, #1F4E8C); }

/* Fase 11: sidebar & bagian header khusus desktop - di HP/tablet (< 1024 px) tidak tampil sama sekali. */
.lg-sidebar, .lg-hdesk { display: none !important; }

/* Beranda (Fase 11.3): pembungkus kiri/kanan hanya untuk desktop — di HP tak terlihat, urutan tampil tetap seperti semula. */
.lg-beranda__kiri, .lg-beranda__kanan { display: contents; }
.lg-beranda > * > .lg-alert { order: 1; }
.lg-beranda > * > .lg-persiapan { order: 2; }
.lg-beranda > * > .lg-hero { order: 3; }
.lg-beranda > * > .lg-beranda__jual { order: 4; }
.lg-beranda > * > .lg-quickrow { order: 5; }
.lg-beranda > * > .lg-panduan-ajak { order: 6; }
.lg-beranda > * > .lg-section { order: 7; }
.lg-beranda__jualteks { display: inline-flex; flex-direction: column; align-items: flex-start; }
/* HP: 3 penjualan terakhir (desktop menampilkan 5). */
.lg-beranda .lg-section > .lg-txitem:nth-of-type(n+4) { display: none; }
/* Tanpa garis putus-putus (gaya solid & bersih): tombol centang & pemisah "Catat jual pertama". */
.lg-cekbtn { border-style: solid; }
.lg-persiapan__daftar > li.lg-persiapan__akhir { border-top-style: solid; }

/* Fase 11.7: komponen khusus desktop (.lg-desk) tidak tampil di HP. */
.lg-desk { display: none !important; }
.lg-bantuan { display: flex; flex-direction: column; gap: 16px; }
.lg-lap-alat { display: contents; }
/* Halaman Bantuan (app/bantuan.php) — dasar HP; tata dua kolom desktop di lapgas-desktop.css. */
.lg-bantuan__kartu { display: flex; flex-direction: column; gap: 16px; }
.lg-bantuan__kepala { display: flex; align-items: center; gap: 12px; }
.lg-bantuan__kepala .lg-h2 { margin: 0; }
.lg-bantuan__kepala .lg-muted { margin: 2px 0 0; font-size: 13.5px; }
.lg-bantuan__ikon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--lg-primary-soft); color: var(--lg-primary); }
.lg-bantuan__nilai { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border-radius: 14px; background: var(--lg-neutral); }
.lg-bantuan__label { font-size: 14.5px; font-weight: 700; }
.lg-bantuan__tulis { display: flex; flex-direction: column; }
.lg-kartu-hal { display: flex; flex-direction: column; gap: 12px; }