/* Royal Safar — sistem desain v0.10.
   Plus Jakarta Sans (Latin) + Readex Pro (Arab), token warna dinamis dari tema, properti logis agar RTL otomatis. */

@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url(/fonts/readex-pro-arabic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url(/fonts/readex-pro-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url(/fonts/readex-pro-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===================== Token desain =====================
   Nilai di bawah adalah bawaan (Royal Emerald) sebelum tema dimuat. js/core/theme.js menimpa token warna
   sesuai pengaturan Branding & mode gelap. Nama lama (--navy, --gold, --paper, --ink, …) tetap dipakai komponen;
   alias --color-* tersedia untuk kode baru. */
:root {
  --navy: #174a3a;
  --navy-2: #3a6658;
  --primary-hover: #10392d;
  --navy-soft: #e9efeb;
  --gold: #c5a46d;
  --gold-soft: #f4eee2;
  --gold-ink: #6c5426;
  --gold-line: #9a7a3e;
  --paper: #f7f8f5;
  --surface: #ffffff;
  --surface-2: #f2f5f3;
  --ink: #1d2923;
  --muted: #5f6b64;
  --line: #e3e9e4;
  --line-strong: #cdd5cf;
  --ok: #1d7650;
  --ok-soft: #e3f2ea;
  --ok-solid: #21845a;
  --warn: #8a5d00;
  --warn-soft: #fbf1dc;
  --warn-solid: #c58b28;
  --bad: #b23a3a;
  --bad-soft: #f9e6e5;
  --bad-solid: #c74646;
  --info: #2c679f;
  --info-soft: #e7f0f9;
  --info-solid: #3779b7;
  --navy-ink: var(--navy);
  --on-gold: var(--navy);
  --navy-line: var(--navy);
  --on-navy: #fff;
  --hover: #f1f5f2;
  --thead: #f8faf8;
  --seat-off: #eceeec;
  --seat-off-ink: #858d88;
  --seat-held-a: #f1f2f1;
  --seat-held-b: #e3e6e4;
  --chart-1: var(--navy); --chart-2: #a68649; --chart-3: #3779b7; --chart-4: #21845a; --chart-5: #c58b28; --chart-6: #9aa59f;

  /* alias semantik */
  --color-primary: var(--navy); --color-primary-hover: var(--primary-hover); --color-accent: var(--gold);
  --color-page: var(--paper); --color-surface: var(--surface); --color-surface-secondary: var(--surface-2);
  --color-text-primary: var(--ink); --color-text-secondary: var(--muted); --color-border: var(--line);
  --color-success: var(--ok-solid); --color-warning: var(--warn-solid); --color-danger: var(--bad-solid); --color-info: var(--info-solid);

  --r-xs: 6px; --r-s: 10px; --r-m: 14px; --r-l: 18px; --r-xl: 22px;
  --shadow-xs: 0 1px 2px rgba(16, 28, 22, 0.05);
  --shadow: 0 1px 2px rgba(16, 28, 22, 0.04), 0 6px 18px rgba(16, 28, 22, 0.06);
  --shadow-lg: 0 24px 60px rgba(12, 22, 17, 0.2);
  --ring: 0 0 0 3px color-mix(in srgb, var(--navy) 22%, transparent);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 150ms; --t-med: 220ms;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --fs-xs: 0.75rem; --fs-s: 0.875rem; --fs-m: 0.9375rem; --fs-l: 1.25rem; --fs-xl: 1.75rem; --fs-xxl: 2.125rem;

  --nav-h: 66px;
  --top-h: 64px;
  --side-w: 264px;
  --side-w-compact: 78px;
  --content-w: 1280px;
  --font: 'Plus Jakarta Sans', 'Readex Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-m);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[dir='rtl'] body, [lang='ar'] body { font-family: 'Readex Pro', var(--font); line-height: 1.7; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--s3); font-weight: 700; color: var(--navy-ink); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-xl); letter-spacing: -0.02em; }
h2 { font-size: 1.1875rem; }
h3 { font-size: 1rem; font-weight: 650; }
[dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3 { letter-spacing: 0; }
p { margin: 0 0 var(--s3); }
a { color: var(--navy-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold-line); outline-offset: 2px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--gold) 35%, transparent); }
.sr-only { position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-s); }
.xs { font-size: var(--fs-xs); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.right { text-align: end; }
.mt { margin-top: var(--s4); }
.mb { margin-bottom: var(--s4); }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: var(--s4); }
.stack-s > * + * { margin-top: var(--s2); }
.grid { display: grid; gap: var(--s4); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.spacer { flex: 1; }
[hidden] { display: none !important; }

/* ===================== Kerangka aplikasi ===================== */
.boot { min-height: 100vh; display: grid; place-items: center; color: var(--muted); font-weight: 600; letter-spacing: 0.02em; }
.shell { min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--top-h);
  display: flex; align-items: center; gap: var(--s2); padding-inline: var(--s4);
  background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
}
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; color: var(--navy-ink); text-decoration: none; min-width: 0; font-size: 1.0625rem; }
.topbar .brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: var(--navy); color: var(--gold); font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; background: #fff; }
.topbar .icon-btn { color: var(--ink); }
.icon-btn {
  position: relative; background: none; border: 0; width: 42px; height: 42px; border-radius: 12px; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--hover); }
.icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[dir='rtl'] .icon.flip { transform: scaleX(-1); }
.dot-badge { position: absolute; inset-block-start: 4px; inset-inline-end: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad-solid); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }

.main { padding: var(--s4); padding-bottom: calc(var(--nav-h) + var(--s5) + env(safe-area-inset-bottom)); max-width: var(--content-w); margin-inline: auto; outline: none; }
.main > * { animation: page-in var(--t-med) var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } }

/* Navigasi bawah (HP & tablet potret) */
.bottomnav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30; height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding: 6px 4px env(safe-area-inset-bottom);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--surface) 92%, transparent); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}
.bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--muted); text-decoration: none; position: relative; min-width: 0; padding: 0 2px; font-weight: 500; }
.bottomnav a .icon { width: 22px; height: 22px; padding: 3px 14px; box-sizing: content-box; border-radius: 999px; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.bottomnav a[aria-current='page'] { color: var(--navy-ink); font-weight: 700; }
.bottomnav a[aria-current='page'] .icon { background: var(--navy-soft); color: var(--navy-ink); }
.bottomnav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }

/* Navigasi samping & drawer */
.sidenav { display: none; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(10, 18, 14, 0.42); z-index: 40; animation: fade-in var(--t-med) var(--ease); }
.drawer {
  position: fixed; inset-block: 0; inset-inline-start: 0; width: min(86vw, 320px); background: var(--surface); z-index: 41; overflow-y: auto;
  padding: var(--s4) var(--s3) calc(var(--s4) + env(safe-area-inset-bottom)); box-shadow: var(--shadow-lg); border-start-end-radius: var(--r-l); border-end-end-radius: var(--r-l);
  animation: drawer-in var(--t-med) var(--ease);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 0 var(--s2) var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s2); }
@keyframes drawer-in { from { transform: translateX(-24px); opacity: 0; } }
[dir='rtl'] .drawer { animation-name: drawer-in-rtl; }
@keyframes drawer-in-rtl { from { transform: translateX(24px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

.navlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.navlist .group-title { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); padding: var(--s4) var(--s3) 6px; }
[dir='rtl'] .navlist .group-title { letter-spacing: 0; }
.navlist .group-title:first-child { padding-top: var(--s2); }
.navlist a {
  position: relative; display: flex; align-items: center; gap: var(--s3); min-height: 42px; padding: 8px var(--s3); border-radius: 11px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.9rem;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.navlist a .icon { width: 20px; height: 20px; color: var(--muted); transition: color var(--t-fast) var(--ease); }
.navlist a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navlist a:hover { background: var(--hover); }
.navlist a:hover .icon { color: var(--navy-ink); }
.navlist a[aria-current='page'] { background: var(--navy-soft); color: var(--navy-ink); font-weight: 700; }
.navlist a[aria-current='page'] .icon { color: var(--navy-ink); }
.navlist a[aria-current='page']::before { content: ''; position: absolute; inset-inline-start: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }
[dir='rtl'] .navlist a[aria-current='page']::before { border-radius: 3px 0 0 3px; }
.drawer .navlist a[aria-current='page']::before { inset-inline-start: -8px; }
.side-toggle { display: none; }

@media (min-width: 960px) {
  .shell.staff { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); grid-template-rows: var(--top-h) 1fr; }
  .shell.staff .topbar { grid-column: 1 / -1; }
  .shell.staff .sidenav {
    display: flex; flex-direction: column; position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); overflow: hidden;
    border-inline-end: 1px solid var(--line); background: var(--surface);
  }
  .shell.staff .sidenav > .navlist { flex: 1; overflow-y: auto; padding: var(--s2) var(--s3) var(--s4); scrollbar-width: thin; }
  .shell.staff .side-toggle {
    display: flex; align-items: center; gap: var(--s2); margin: 0; padding: 10px var(--s4); border: 0; border-top: 1px solid var(--line); background: var(--surface);
    color: var(--muted); cursor: pointer; font-size: var(--fs-s); font-weight: 600; min-height: 48px;
  }
  .shell.staff .side-toggle:hover { color: var(--navy-ink); background: var(--hover); }
  .shell.staff .bottomnav, .shell.staff .menu-btn { display: none; }
  .shell.staff .main { padding: var(--s6) clamp(var(--s5), 3vw, 44px) var(--s7); width: 100%; }
  /* Mode ringkas: hanya ikon + tooltip. Otomatis di 960–1279 px, atau dipilih manual di layar lebar. */
  .shell.staff.side-compact { grid-template-columns: var(--side-w-compact) minmax(0, 1fr); }
  .shell.staff.side-compact .sidenav > .navlist { padding-inline: 10px; overflow-x: visible; }
  .shell.staff.side-compact .sidenav { overflow: visible; }
  .shell.staff.side-compact .navlist .group-title { font-size: 0; padding: 10px 0 4px; }
  .shell.staff.side-compact .navlist .group-title::after { content: ''; display: block; height: 1px; background: var(--line); margin: 0 10px; }
  .shell.staff.side-compact .navlist a { justify-content: center; padding: 10px 0; }
  .shell.staff.side-compact .navlist a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .shell.staff.side-compact .navlist a[aria-current='page']::before { inset-inline-start: -10px; }
  .shell.staff.side-compact .navlist a::after {
    content: attr(data-tip); position: absolute; inset-inline-start: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(-4px); white-space: nowrap;
    background: #16201b; color: #fff; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 8px; box-shadow: var(--shadow); opacity: 0; pointer-events: none;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); z-index: 50;
  }
  [dir='rtl'] .shell.staff.side-compact .navlist a::after { transform: translateY(-50%) translateX(4px); }
  .shell.staff.side-compact .navlist a:hover::after, .shell.staff.side-compact .navlist a:focus-visible::after { opacity: 1; transform: translateY(-50%); }
  .shell.staff.side-compact .side-toggle { justify-content: center; padding-inline: 0; }
  .shell.staff.side-compact .side-toggle span { display: none; }
}
@media (min-width: 720px) { .main { padding-bottom: var(--s6); } .shell.pilgrim .main { padding: var(--s5) var(--s5) calc(var(--nav-h) + var(--s6)); } }
.shell.pilgrim .main { max-width: 1040px; }

/* ===================== Kepala halaman & bagian ===================== */
.page-head { display: flex; align-items: flex-end; gap: var(--s3) var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.page-head > div:first-child { min-width: 0; }
.page-head h1 { margin: 0; overflow-wrap: anywhere; }
.page-head .sub { color: var(--muted); font-size: var(--fs-s); margin-top: 6px; max-width: 70ch; }
.page-head .actions { margin-inline-start: auto; display: flex; gap: var(--s2); flex-wrap: wrap; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-size: var(--fs-s); font-weight: 600; margin-bottom: var(--s2); padding: 4px 8px 4px 4px; margin-inline-start: -4px; border-radius: 8px; }
.back:hover { color: var(--navy-ink); background: var(--hover); }
.back .icon { width: 18px; height: 18px; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s5); box-shadow: var(--shadow-xs); }
.panel > h2:first-child, .panel > h3:first-child { margin-bottom: var(--s3); }
.panel.flush { padding: 0; overflow: hidden; }
.panel.accent { border-inline-start: 3px solid var(--gold); }
.section-title { display: flex; align-items: center; gap: var(--s2); margin: var(--s6) 0 var(--s3); }
.section-title h2 { margin: 0; font-size: 1.125rem; }
.section-title .spacer + * { font-size: var(--fs-s); }
.stack > .section-title:first-child { margin-top: 0; }

/* Kartu angka (KPI) */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); gap: var(--s3); }
.stat {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--s4) var(--s4) 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  box-shadow: var(--shadow-xs); color: inherit; min-width: 0; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
a.stat:hover { border-color: color-mix(in srgb, var(--navy) 35%, var(--line)); box-shadow: var(--shadow); transform: translateY(-1px); }
.stat .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--navy-soft); color: var(--navy-ink); margin-bottom: 4px; }
.stat .ic .icon { width: 18px; height: 18px; }
.stat .v { font-size: 1.625rem; font-weight: 750; color: var(--navy-ink); line-height: 1.1; letter-spacing: -0.02em; order: 2; }
.stat .l { font-size: var(--fs-s); color: var(--muted); line-height: 1.35; order: 1; }
.stat .ic { order: 0; }
.stat .spark { order: 3; height: 28px; margin-top: 2px; }
.stat.alert.on { border-color: color-mix(in srgb, var(--bad-solid) 35%, var(--line)); }
.stat.alert.on .v { color: var(--bad); }
.stat.alert.on .ic { background: var(--bad-soft); color: var(--bad); }
.stat .go { position: absolute; inset-block-start: 14px; inset-inline-end: 12px; color: var(--muted); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.stat .go .icon { width: 16px; height: 16px; }
a.stat:hover .go { opacity: 1; }

.meter { height: 6px; background: var(--navy-soft); border-radius: 999px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--navy); border-radius: inherit; transition: width var(--t-med) var(--ease); }
.meter.full > span { background: var(--gold); }

/* ===================== Tombol ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 18px; border-radius: var(--r-s); max-width: 100%;
  border: 1px solid transparent; background: var(--navy); color: var(--on-navy); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.005em;
  cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-xs);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform 80ms var(--ease);
}
.btn .icon { width: 18px; height: 18px; }
.btn:hover { background: var(--primary-hover); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled, .btn[aria-busy='true'] { opacity: 0.55; cursor: not-allowed; }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--navy) 30%, var(--line-strong)); }
.btn.outline { background: transparent; color: var(--navy-ink); border-color: var(--navy-line); box-shadow: none; }
.btn.outline:hover { background: var(--navy-soft); }
.btn.ghost { background: transparent; color: var(--navy-ink); box-shadow: none; }
.btn.ghost:hover { background: var(--hover); }
.btn.danger { background: var(--bad-solid); color: #fff; }
.btn.danger:hover { background: color-mix(in srgb, var(--bad-solid) 85%, #000); }
.btn.danger.secondary { background: var(--surface); color: var(--bad); border-color: color-mix(in srgb, var(--bad-solid) 30%, var(--line)); }
.btn.gold { background: var(--gold); color: var(--on-gold); }
.btn.gold:hover { background: color-mix(in srgb, var(--gold) 88%, #000); }
.btn.small { min-height: 36px; padding: 0 var(--s3); font-size: var(--fs-s); border-radius: 9px; }
.btn.small .icon { width: 16px; height: 16px; }
.btn.block { width: 100%; }
.spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== Form ===================== */
.form { display: grid; gap: var(--s4); }
.form .cols { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.form h2, .form h3 { margin: var(--s2) 0 0; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label { font-size: var(--fs-s); font-weight: 600; color: var(--ink); }
.field .hint { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.field .err { font-size: var(--fs-xs); color: var(--bad); font-weight: 600; }
.input, select.input, textarea.input {
  width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-s);
  background: var(--surface); color: var(--ink); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.input:hover { border-color: color-mix(in srgb, var(--navy) 25%, var(--line-strong)); }
textarea.input { min-height: 104px; resize: vertical; line-height: 1.55; }
select.input { padding-inline-end: 36px; appearance: none; -webkit-appearance: none; background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
[dir='rtl'] select.input { background-position: left 12px center; }
select.input[multiple] { background-image: none; padding-inline-end: 14px; }
.input:focus { border-color: var(--navy-line); outline: none; box-shadow: var(--ring); }
.input:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.field.invalid .input { border-color: var(--bad-solid); background: var(--bad-soft); }
.check { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--fs-s); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--navy); flex: none; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--navy); }
.form-error { padding: var(--s3) var(--s4); border-radius: var(--r-s); background: var(--bad-soft); color: var(--bad); font-size: var(--fs-s); font-weight: 600; border: 1px solid color-mix(in srgb, var(--bad-solid) 22%, transparent); }
.form-actions { display: flex; gap: var(--s2); flex-wrap: wrap; padding-top: var(--s2); }
input[type='file'].input { padding: 8px; }
input[type='file'].input::file-selector-button { border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 6px 12px; margin-inline-end: 10px; font: inherit; font-weight: 600; cursor: pointer; }

/* ===================== Badge status ===================== */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: var(--navy-soft); color: var(--navy-ink); white-space: nowrap; line-height: 1.5; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.gold { background: var(--gold-soft); color: var(--gold-ink); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.plain::before { display: none; }

/* ===================== Tabel data: tabel di layar lebar, kartu bertumpuk di HP ===================== */
.dlist { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow-xs); }
.panel .dlist, .panel.flush .dlist { border: 0; border-radius: 0; box-shadow: none; }
.dlist th { text-align: start; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 12px var(--s4); border-bottom: 1px solid var(--line); background: var(--thead); white-space: nowrap; }
[dir='rtl'] .dlist th { letter-spacing: 0; text-transform: none; font-size: var(--fs-xs); }
.dlist td { padding: 14px var(--s4); border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 0.9rem; }
.dlist tr:last-child td { border-bottom: 0; }
.dlist tr.clickable { cursor: pointer; }
.dlist tr.clickable td { transition: background var(--t-fast) var(--ease); }
.dlist tr.clickable:hover td { background: var(--hover); }
.dlist .primary { font-weight: 650; color: var(--navy-ink); }
@media (max-width: 719px) {
  .dlist { border-radius: var(--r-m); }
  .dlist thead { display: none; }
  .dlist, .dlist tbody, .dlist tr, .dlist td { display: block; width: 100%; }
  .dlist tr { padding: 14px var(--s4); border-bottom: 1px solid var(--line); }
  .dlist tr:last-child { border-bottom: 0; }
  .dlist td { border: 0; padding: 3px 0; display: flex; gap: var(--s3); justify-content: space-between; align-items: center; font-size: var(--fs-s); }
  .dlist td > * { min-width: 0; }
  .dlist td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; flex: none; max-width: 45%; }
  .dlist td.primary { font-size: 0.95rem; padding-bottom: 6px; }
  .dlist td.primary::before { display: none; }
}
.pager { display: flex; align-items: center; gap: var(--s2); justify-content: flex-end; padding: var(--s3) var(--s4); font-size: var(--fs-s); color: var(--muted); }

.toolbar, .filters { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.toolbar .input, .filters .input { width: auto; flex: 1 1 180px; min-height: 42px; }
.toolbar select.input, .filters select.input { flex: 0 1 200px; }
.filters input[type='search'].input { flex: 2 1 240px; }

.empty { text-align: center; padding: var(--s7) var(--s4); color: var(--muted); }
.empty::before {
  content: ''; display: block; width: 64px; height: 64px; margin: 0 auto var(--s4); border-radius: 20px; background-color: var(--navy-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2394a39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='17' y='20' width='30' height='26' rx='4'/%3E%3Cpath d='M17 28h30M25 20v-4h14v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.empty h3 { color: var(--ink); margin-bottom: 6px; }
.empty p { max-width: 46ch; margin-inline: auto; }

.skeleton { background: linear-gradient(90deg, var(--line) 25%, var(--surface-2) 50%, var(--line) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; height: 16px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ===================== Tab ===================== */
.tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: var(--s5); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { background: none; border: 0; padding: 12px 14px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 600; font-size: 0.9rem; margin-bottom: -1px; border-radius: 8px 8px 0 0; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.tabs button:hover { color: var(--ink); background: var(--hover); }
.tabs button[aria-selected='true'] { color: var(--navy-ink); border-bottom-color: var(--navy); }

/* ===================== Key-value ===================== */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px var(--s5); font-size: var(--fs-s); margin: 0; }
.kv dt { color: var(--muted); font-weight: 500; }
.kv dd { margin: 0; font-weight: 500; }

/* ===================== Timeline ===================== */
.timeline { list-style: none; margin: 0; padding: var(--s4) var(--s5); }
.timeline li { position: relative; padding-inline-start: 26px; padding-bottom: var(--s4); }
.timeline li::before { content: ''; position: absolute; inset-inline-start: 2px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--gold); box-sizing: border-box; }
.timeline li::after { content: ''; position: absolute; inset-inline-start: 7.5px; top: 22px; bottom: 2px; width: 1px; background: var(--line-strong); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline .when { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; letter-spacing: 0.01em; }

/* ===================== Toast & modal ===================== */
.toasts { position: fixed; z-index: 60; inset-inline: var(--s4); bottom: calc(var(--nav-h) + var(--s4) + env(safe-area-inset-bottom)); display: grid; gap: var(--s2); justify-items: center; pointer-events: none; }
.toast {
  pointer-events: auto; max-width: 460px; width: 100%; padding: 12px var(--s4); border-radius: var(--r-m); background: #17211c; color: #fff; box-shadow: var(--shadow-lg);
  font-size: var(--fs-s); font-weight: 500; display: flex; gap: var(--s3); align-items: center; animation: toast-in var(--t-med) var(--ease);
}
.toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #6fd3a0; flex: none; }
.toast.bad::before { background: #ff8f86; }
.toast.warn::before { background: #f3c26b; }
.toast.bad { background: #3a1716; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@media (min-width: 960px) { .toasts { inset-inline: auto var(--s5); bottom: var(--s5); justify-items: end; } }

dialog.modal {
  border: 1px solid var(--line); border-radius: var(--r-xl); padding: 0; width: min(560px, calc(100vw - 24px)); max-height: min(88vh, calc(100dvh - 32px));
  box-shadow: var(--shadow-lg); color: var(--ink); background: var(--surface); display: flex; flex-direction: column; overflow: hidden;
}
dialog.modal:not([open]) { display: none; }
dialog.modal[open] { animation: modal-in var(--t-med) var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
dialog.modal::backdrop { background: rgba(10, 18, 14, 0.48); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s5) var(--s5) var(--s3); border-bottom: 1px solid var(--line); flex: none; }
.modal-head h2 { margin: 0; font-size: 1.125rem; overflow-wrap: anywhere; }
.modal-body { padding: var(--s5); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 600px) {
  dialog.modal { margin: auto 0 0; width: 100vw; max-width: 100vw; max-height: 92dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; }
  dialog.modal[open] { animation-name: sheet-in; }
  .modal-head { padding: 22px var(--s4) var(--s3); position: relative; }
  .modal-head::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); transform: translateX(-50%); }
  .modal-body { padding: var(--s4) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom)); }
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0.6; } }

.banner { display: flex; gap: var(--s3); align-items: flex-start; padding: 14px var(--s4); border-radius: var(--r-m); background: var(--info-soft); color: var(--ink); font-size: var(--fs-s); border: 1px solid color-mix(in srgb, var(--info-solid) 18%, transparent); }
.banner.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn-solid) 28%, transparent); }
.banner.bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad-solid) 22%, transparent); }
.banner.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok-solid) 22%, transparent); }
.banner .icon { width: 20px; height: 20px; flex: none; }
.offline-bar { position: sticky; top: var(--top-h); z-index: 19; background: var(--warn-soft); color: var(--warn); text-align: center; font-size: var(--fs-s); font-weight: 600; padding: 8px; border-bottom: 1px solid color-mix(in srgb, var(--warn-solid) 25%, transparent); }

/* ===================== Masuk & daftar ===================== */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; background: var(--navy); position: relative; isolation: isolate; }
.auth::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M36 6l9 21 21 9-21 9-9 21-9-21-21-9 21-9z'/%3E%3Ccircle cx='36' cy='36' r='7'/%3E%3C/svg%3E");
  background-size: 72px 72px;
}
.auth-top { padding: calc(var(--s6) + env(safe-area-inset-top)) var(--s5) var(--s6); color: #fff; position: relative; }
.auth-top .wordmark { font-size: var(--fs-xxl); font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; }
.auth-top .wordmark span { color: var(--gold); }
.auth-top p { color: rgba(255, 255, 255, 0.78); max-width: 38ch; margin-top: var(--s3); font-size: 1rem; }
.auth-card { background: var(--paper); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: var(--s6) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18); }
.auth-card .inner { max-width: 420px; margin-inline: auto; }
.auth-card h1 { font-size: 1.5rem; }
.auth-lang { position: absolute; inset-block-start: var(--s4); inset-inline-end: var(--s4); z-index: 2; }
.auth-lang .icon-btn, .auth .lang-switch { color: #fff; background: rgba(255, 255, 255, 0.12); }
@media (min-width: 840px) {
  .auth { grid-template-rows: 1fr; grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr); }
  .auth-top { display: flex; flex-direction: column; justify-content: center; padding: var(--s7) clamp(var(--s6), 6vw, 96px); }
  .auth-top .wordmark { font-size: clamp(2.25rem, 3.4vw, 3rem); }
  .auth-card { border-radius: var(--r-xl) 0 0 var(--r-xl); display: grid; align-items: center; padding: var(--s7) var(--s6); }
  [dir='rtl'] .auth-card { border-radius: 0 var(--r-xl) var(--r-xl) 0; }
}
.auth-arch { width: 120px; height: 150px; border: 2px solid var(--gold); border-bottom: 0; border-radius: 60px 60px 0 0; margin-bottom: var(--s5); position: relative; opacity: 0.9; }
.auth-arch::after { content: ''; position: absolute; inset: 14px 14px 0; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); border-bottom: 0; border-radius: 46px 46px 0 0; }
@media (max-height: 520px) and (orientation: landscape) { .auth-arch { display: none; } .auth-top { padding-block: var(--s4); } }

/* ===================== Langkah reservasi ===================== */
.steps { display: flex; gap: 6px; margin: 0 0 var(--s5); counter-reset: step; padding: 0; }
.steps li { list-style: none; flex: 1; font-size: var(--fs-xs); color: var(--muted); padding-top: 10px; border-top: 4px solid var(--line); border-radius: 2px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.steps li::before { counter-increment: step; content: counter(step) '. '; }
.steps li.done { border-color: var(--navy-line); color: var(--ink); }
.steps li.current { border-color: var(--gold); color: var(--navy-ink); font-weight: 700; }

.choice { display: flex; gap: var(--s3); align-items: center; padding: 14px var(--s4); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); cursor: pointer; text-align: start; width: 100%; color: var(--ink); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.choice:hover { border-color: color-mix(in srgb, var(--navy) 35%, var(--line)); }
.choice:has(input:checked) { border-color: var(--navy-line); background: color-mix(in srgb, var(--navy-soft) 60%, var(--surface)); box-shadow: inset 3px 0 0 var(--gold); }
[dir='rtl'] .choice:has(input:checked) { box-shadow: inset -3px 0 0 var(--gold); }
.choice input { width: 20px; height: 20px; accent-color: var(--navy); }

/* ===================== Denah kursi bus (tampilan atas) ===================== */
.bus-wrap { overflow: auto; padding: var(--s2) 0; -webkit-overflow-scrolling: touch; }
.bus {
  --seat: 44px;
  margin-inline: auto; width: max-content; padding: 56px 18px 22px; position: relative;
  background: var(--surface); border: 2px solid var(--navy-line); border-radius: 38px 38px 16px 16px; box-shadow: var(--shadow);
}
.bus::before { content: ''; position: absolute; inset-inline: 22px; top: 12px; height: 22px; border-radius: 12px 12px 4px 4px; background: var(--navy-soft); border-bottom: 2px solid var(--gold); }
.bus .front { position: absolute; top: 14px; inset-inline-start: 50%; transform: translateX(-50%); font-size: 10px; color: var(--navy-ink); font-weight: 700; letter-spacing: 0.06em; }
[dir='rtl'] .bus .front { transform: translateX(50%); }
.bus-grid { display: grid; gap: 8px; }
.seat {
  width: var(--seat); height: var(--seat); border-radius: 11px 11px 7px 7px; border: 1.5px solid var(--line-strong);
  background: var(--surface); font-size: 11px; font-weight: 700; color: var(--ink); cursor: pointer; position: relative;
  display: grid; place-items: center; padding: 0; transition: border-color var(--t-fast) var(--ease), transform 80ms var(--ease);
}
.seat::after { content: ''; position: absolute; inset-inline: 7px; bottom: 4px; height: 3px; border-radius: 2px; background: currentColor; opacity: 0.25; }
.seat:hover:not(:disabled) { border-color: var(--navy-line); }
.seat:active:not(:disabled) { transform: scale(0.96); }
.seat .sym { position: absolute; inset-block-start: 2px; inset-inline-end: 4px; font-size: 9px; }
.seat.available { color: var(--ink); }
.seat.selected { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.seat.mine, .seat.mine_held { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.seat.booked { background: var(--seat-off); border-color: var(--seat-off); color: var(--seat-off-ink); cursor: not-allowed; }
.seat.held { background: repeating-linear-gradient(45deg, var(--seat-held-a), var(--seat-held-a) 4px, var(--seat-held-b) 4px, var(--seat-held-b) 8px); color: var(--seat-off-ink); cursor: not-allowed; border-style: dashed; }
.seat.inactive { opacity: 0.35; cursor: not-allowed; border-style: dotted; }
.seat.door, .seat.space, .seat.driver, .seat.guide { border: 0; background: transparent; cursor: default; color: var(--muted); font-weight: 500; }
.seat.door::after, .seat.space::after { display: none; }
.seat.staff-taken { background: var(--navy-soft); border-color: var(--navy-soft); color: var(--navy-ink); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line-strong); display: inline-block; }
.legend i.selected { background: var(--gold); border-color: var(--gold); }
.legend i.mine { background: var(--navy); border-color: var(--navy); }
.legend i.booked { background: var(--seat-off); border-color: var(--seat-off); }
.legend i.held { border-style: dashed; background: var(--seat-held-a); }
.zoom { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-s); overflow: hidden; }
.zoom button { border: 0; background: var(--surface); width: 40px; height: 36px; cursor: pointer; font-size: 18px; color: var(--ink); }
.zoom button:hover { background: var(--hover); }
.hold-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy-ink); }
.hold-timer.low { color: var(--bad); }

/* ===================== Tiket digital ===================== */
.pass { max-width: 380px; margin-inline: auto; color: #fff; filter: drop-shadow(0 16px 32px rgba(10, 22, 16, 0.22)); }
.pass-top { background: linear-gradient(150deg, var(--navy), color-mix(in srgb, var(--navy) 78%, #000)); border-radius: 22px 22px 0 0; padding: var(--s5) var(--s5) var(--s4); position: relative; overflow: hidden; }
.pass-top::after { content: ''; position: absolute; inset-inline-end: -40px; top: -40px; width: 140px; height: 160px; border: 2px solid color-mix(in srgb, var(--gold) 50%, transparent); border-radius: 70px 70px 0 0; }
.pass-brand { display: flex; align-items: center; gap: var(--s2); color: var(--gold); font-weight: 700; font-size: var(--fs-s); }
.pass-name { font-size: var(--fs-l); font-weight: 700; margin-top: var(--s4); }
.pass-name-ar { font-size: var(--fs-m); color: rgba(255, 255, 255, 0.75); direction: rtl; text-align: start; }
.pass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); margin-top: var(--s4); }
.pass-grid .l { font-size: 11px; color: rgba(255, 255, 255, 0.65); font-weight: 600; letter-spacing: 0.03em; }
.pass-grid .v { font-weight: 700; }
.pass-grid .v.big { font-size: var(--fs-xl); color: var(--gold); line-height: 1; }
.pass-tear { height: 24px; background: radial-gradient(circle at 0 50%, transparent 12px, var(--surface) 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 12px, var(--surface) 12.5px) right / 51% 100% no-repeat; position: relative; }
.pass-tear::after { content: ''; position: absolute; inset-inline: 20px; top: 50%; border-top: 2px dashed var(--line-strong); }
.pass-bottom { background: var(--surface); color: var(--ink); border-radius: 0 0 22px 22px; padding: var(--s4) var(--s5) var(--s5); text-align: center; }
.pass-qr { width: 210px; height: 210px; margin: 0 auto var(--s3); }
.pass-qr svg { width: 100%; height: 100%; }
.pass-ref { font-size: var(--fs-xs); color: var(--muted); word-break: break-all; }
.pass.void .pass-top { background: #6b7280; }
.pass.void .pass-qr { opacity: 0.2; }

/* ===================== Galeri ===================== */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s3); }
.gallery figure { margin: 0; position: relative; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); background: var(--navy-soft); }
.gallery figcaption { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }

/* ===================== Matriks izin ===================== */
.matrix { overflow-x: auto; }
.matrix table { border-collapse: collapse; font-size: var(--fs-s); background: var(--surface); }
.matrix th, .matrix td { border: 1px solid var(--line); padding: 8px 12px; text-align: center; }
.matrix th { background: var(--thead); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.matrix th:first-child, .matrix td:first-child { text-align: start; position: sticky; inset-inline-start: 0; background: var(--surface); }
.matrix input { width: 18px; height: 18px; accent-color: var(--navy); }

/* ===================== Absensi, insiden, peta ===================== */
.qr-mfa { width: 220px; height: 220px; background: #fff; padding: 10px; border-radius: var(--r-m); }
.qr-mfa svg { width: 100%; height: 100%; }
.codes { font-family: ui-monospace, monospace; font-size: 15px; line-height: 1.8; background: var(--surface); border: 1px dashed var(--line-strong); padding: var(--s3); border-radius: var(--r-m); columns: 2; margin: 0; white-space: pre; }
.secret { font-family: ui-monospace, monospace; word-break: break-all; }
.sep { border: 0; border-top: 1px solid var(--line); margin: var(--s2) 0; width: 100%; }
.grid-2 { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.cols { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.roster { list-style: none; margin: 0; padding: 0; }
.roster > li { padding: 12px var(--s4); border-bottom: 1px solid var(--line); }
.roster > li:last-child { border-bottom: 0; }
.att-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.att-btns .btn { min-height: 36px; padding: 0 12px; }
.qr-big { width: min(78vw, 360px); height: min(78vw, 360px); margin-inline: auto; background: #fff; border-radius: var(--r-l); padding: 10px; box-shadow: var(--shadow); }
.qr-big svg { width: 100%; height: 100%; }
.mapbox { height: min(62vh, 560px); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: #e8e6df; margin-bottom: var(--s4); box-shadow: var(--shadow-xs); }
.mapbox .leaflet-container { font-family: inherit; }
.map-list { list-style: none; margin: 0 0 var(--s4); padding: 0; columns: 2 260px; }
.map-list li { padding: 4px 0; break-inside: avoid; }
.linklike { background: none; border: 0; padding: 0; color: var(--navy-ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; gap: 6px; align-items: center; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.map-pop { display: grid; gap: 2px; min-width: 160px; }
.incident-critical { border-inline-start: 3px solid var(--bad-solid); }

/* ===================== Cetak (manifest, rooming list, tiket) ===================== */
.print-only { display: none; }
@media print {
  @page { margin: 12mm; }
  body { background: #fff; font-size: 11pt; color: #000; }
  .topbar, .bottomnav, .sidenav, .no-print, .toasts, .offline-bar { display: none !important; }
  .shell.staff { display: block !important; }
  .main { padding: 0 !important; max-width: none; }
  .main > * { animation: none !important; }
  .print-only { display: block; }
  .panel { border: 0; padding: 0; box-shadow: none; }
  .dlist { border: 0 !important; box-shadow: none !important; border-collapse: collapse !important; }
  .dlist thead { display: table-header-group !important; }
  .dlist, .dlist tbody { display: table !important; width: 100%; }
  .dlist tbody { display: table-row-group !important; }
  .dlist tr { display: table-row !important; }
  .dlist td, .dlist th { display: table-cell !important; border: 1px solid #999; padding: 4px 6px; background: #fff !important; }
  .dlist td::before { display: none !important; }
  .pass { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.kv dd { overflow-wrap: anywhere; min-width: 0; }

/* ---------- v0.5: formulir dinamis, S&K, Markdown ---------- */
.choice-group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.choice-group legend { font-size: var(--fs-s); font-weight: 500; margin-bottom: var(--s1); padding: 0; }
.choice-group.invalid legend { color: var(--bad); }
.md { line-height: 1.6; overflow-wrap: anywhere; }
.md > * + * { margin-top: var(--s3); }
.md h1, .md h2, .md h3 { font-size: var(--fs-m); margin: var(--s4) 0 0; }
.md ul, .md ol { padding-inline-start: 22px; margin: 0; }
.md p { margin: 0; }
.terms-box details > summary { cursor: pointer; font-weight: 600; }
.terms-box details[open] > .md { margin-top: var(--s2); max-height: 320px; overflow-y: auto; padding-inline-end: var(--s2); }
.terms-scroll { max-height: 50vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s3); background: var(--paper); }
.md-preview { max-height: 360px; overflow-y: auto; background: var(--paper); }
.form-field-list { list-style: none; margin: 0; padding: 0; }
.form-field-row { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.form-field-row:last-child { border-bottom: 0; }
.form-field-row.is-hidden { opacity: 0.6; }
.form-field-row .grow { flex: 1; min-width: 200px; }
.gap-s { gap: var(--s2); }
.wrap { flex-wrap: wrap; }

/* ---------- Mode gelap (aktif lewat data-theme="dark" pada <html>) ---------- */
:root[data-theme='dark'] {
  --paper: #0d1316;
  --surface: #151d20;
  --surface-2: #1a2427;
  --ink: #e7ecea;
  --muted: #9ba8a2;
  --line: #263236;
  --line-strong: #37454a;
  --ok: #6fcf9e;
  --ok-soft: #15301f;
  --warn: #e8b54a;
  --warn-soft: #362a10;
  --bad: #f2928a;
  --bad-soft: #3a1b1a;
  --info: #8bbcf0;
  --info-soft: #172739;
  --hover: #1c2629;
  --thead: #182124;
  --seat-off: #283337;
  --seat-off-ink: #7f8c87;
  --seat-held-a: #1f292c;
  --seat-held-b: #29353a;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}
:root[data-theme='dark'] .input { color: var(--ink); }
:root[data-theme='dark'] img.brand-logo { background: #fff; border-radius: 4px; }
.theme-swatches { display: flex; gap: var(--s2); flex-wrap: wrap; }
.theme-swatches button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-size: var(--fs-s); }
.theme-swatches button[aria-pressed='true'] { border-color: var(--navy-line); box-shadow: 0 0 0 2px var(--gold-soft); }
.theme-swatches i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.color-row { display: flex; gap: var(--s2); align-items: center; }
.color-row input[type='color'] { width: 48px; height: 44px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface); }
.asset-preview { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.asset-preview img { max-height: 64px; max-width: 160px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-s); padding: 4px; background: #fff; }
.contrast-ok { color: var(--ok); }
.contrast-bad { color: var(--bad); }
.email-preview { background: #fff; color: #1b2433; }
.email-preview hr { border: 0; border-top: 1px solid #e3e5e8; margin: var(--s3) 0; }
button.badge { border: 0; cursor: pointer; font: inherit; font-size: var(--fs-xs); }
.phone-row { display: flex; gap: var(--s2); }
.phone-row .cc { width: auto; flex: 0 0 auto; max-width: 42%; }
.phone-row input { flex: 1; min-width: 0; }
/* Logo halaman depan: kotak tinggi tetap, gambar menyesuaikan tanpa terpotong/gepeng */
.front-logo { display: inline-flex; align-items: center; justify-content: flex-start; margin-bottom: var(--s3); max-width: 100%; }
.front-logo img { display: block; height: 100%; width: auto; max-width: min(78vw, 340px); object-fit: contain; }
.front-logo.size-s { height: 56px; }
.front-logo.size-m { height: 88px; }
.front-logo.size-l { height: 128px; }
.front-logo.plate { background: #fff; border-radius: var(--r-l); padding: 10px 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.front-logo.plate.size-s { height: 76px; }
.front-logo.plate.size-m { height: 108px; }
.front-logo.plate.size-l { height: 148px; }
@media (max-width: 380px) { .front-logo.size-l { height: 104px; } .front-logo.plate.size-l { height: 124px; } }
.front-preview { border-radius: var(--r-m); overflow: hidden; background: var(--navy); }
.front-preview .auth-top { padding: var(--s5); }

/* ---------- Font bacaan doa (SIL OFL 1.1, file lisensi di /fonts) — diunduh hanya saat dipakai ---------- */
@font-face { font-family: 'RS Amiri'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/amiri-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'RS Amiri'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/amiri-arabic-700-normal.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'RS Amiri'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/amiri-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'RS Amiri'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/amiri-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'RS Scheherazade'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/scheherazade-new-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'RS Scheherazade'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/scheherazade-new-arabic-700-normal.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'RS Scheherazade'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/scheherazade-new-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'RS Scheherazade'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/scheherazade-new-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'RS Noto Naskh'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/noto-naskh-arabic-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'RS Noto Naskh'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/noto-naskh-arabic-arabic-700-normal.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'RS Noto Naskh'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/noto-naskh-arabic-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'RS Noto Naskh'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/noto-naskh-arabic-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'RS Literata'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/literata-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'RS Literata'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/literata-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'RS Literata'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/literata-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'RS Literata'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/literata-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'RS Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/lora-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'RS Lora'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/lora-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'RS Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/lora-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'RS Lora'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/lora-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Mode offline hanya-baca: tombol simpan dinonaktifkan (server juga tidak terjangkau). */
.is-offline form button[type='submit']:not(.offline-ok), .is-offline .needs-online { opacity: 0.45; pointer-events: none; }

/* ---------- v0.6: navigasi bawah 6 tab (HP) ---------- */
.bottomnav a { min-width: 0; padding: 0 2px; }
.bottomnav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
[dir='rtl'] .icon.flip-rtl { transform: scaleX(-1); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

/* ---------- Koleksi doa: font, isi kaya, pembaca, editor ---------- */
.fa-amiri { --font-ar: 'RS Amiri'; }
.fa-scheherazade { --font-ar: 'RS Scheherazade'; }
.fa-noto-naskh { --font-ar: 'RS Noto Naskh'; }
.fl-readex { --font-lat: 'Readex Pro'; }
.fl-literata { --font-lat: 'RS Literata'; }
.fl-lora { --font-lat: 'RS Lora'; }
.book-ar, .toc-ar, .reader-title-ar { font-family: var(--font-ar, 'RS Amiri'), serif; }

.book-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.book-card { display: flex; gap: var(--s3); align-items: center; padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); color: var(--ink); text-decoration: none; min-width: 0; }
.book-card:hover { border-color: var(--navy-line); }
.book-ic { flex: none; width: 44px; height: 44px; border-radius: var(--r-m); display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); }
.book-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.book-t strong { overflow-wrap: anywhere; }
.book-ar { font-size: 1.15rem; color: var(--navy-ink); }
.toc { list-style: none; margin: 0; padding: 0; }
.toc a { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.toc li:last-child a { border-bottom: 0; }
.toc-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--navy-soft); color: var(--navy-ink); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; }
.toc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.toc-ar { font-size: 1.1rem; color: var(--muted); }

.rich { font-family: var(--font-lat, 'Readex Pro'), system-ui, sans-serif; line-height: 1.75; overflow-wrap: anywhere; }
.rich > * + * { margin-top: 0.85em; }
.rich p, .rich li, .rich h2, .rich h3 { unicode-bidi: plaintext; }
.rich h1, .rich h2, .rich h3, .rich h4 { color: var(--navy-ink); line-height: 1.35; }
.rich h2 { font-size: 1.3em; } .rich h3 { font-size: 1.12em; }
.rich ul, .rich ol { padding-inline-start: 1.4em; margin: 0; }
.rich [dir='rtl'], .rich .ar, .rich .doa-ar { font-family: var(--font-ar, 'RS Amiri'), 'Readex Pro', serif; font-size: 1.55em; line-height: 2.15; }
.rich .doa { border: 1px solid var(--line); border-inline-start: 3px solid var(--gold); border-radius: var(--r-m); padding: 0.9em 1em; background: var(--paper); }
.rich .doa > * + * { margin-top: 0.5em; }
.rich .doa-ar { text-align: right; direction: rtl; color: var(--ink); }
.rich .doa-lat { font-style: italic; color: var(--navy-ink); }
.rich .doa-arti { color: var(--ink); }
.rich .align-center { text-align: center; } .rich .align-right { text-align: right; } .rich .align-left { text-align: left; } .rich .align-justify { text-align: justify; }
.rich mark { color: inherit; border-radius: 3px; padding: 0 2px; }
.rich mark.hl-yellow, .hl-swatch.hl-yellow { background: #fff1a8; }
.rich mark.hl-green, .hl-swatch.hl-green { background: #c9f0d5; }
.rich mark.hl-blue, .hl-swatch.hl-blue { background: #cfe3ff; }
.rich mark.hl-pink, .hl-swatch.hl-pink { background: #ffd6e5; }
:root[data-theme='dark'] .rich mark.hl-yellow { background: rgba(255, 214, 10, 0.32); }
:root[data-theme='dark'] .rich mark.hl-green { background: rgba(52, 199, 89, 0.3); }
:root[data-theme='dark'] .rich mark.hl-blue { background: rgba(64, 140, 255, 0.32); }
:root[data-theme='dark'] .rich mark.hl-pink { background: rgba(255, 90, 150, 0.3); }
.rich table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.rich th, .rich td { border: 1px solid var(--line); padding: 6px 8px; }
.rich blockquote { border-inline-start: 3px solid var(--line-strong); padding-inline-start: 1em; color: var(--muted); margin: 0; }
.rich hr { border: 0; border-top: 1px solid var(--line); }
.rich .fn-ref a { font-size: 0.72em; font-weight: 700; color: var(--gold-ink); text-decoration: none; padding: 0 2px; }
.rich .footnotes { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--line); font-size: 0.85em; color: var(--muted); }
.rich .footnotes li + li { margin-top: 0.35em; }
.rich .fn-back { text-decoration: none; }

.reader-page { max-width: 760px; margin-inline: auto; }
.reader-bar { position: sticky; top: var(--top-h); z-index: 15; display: flex; align-items: center; gap: 2px; padding: 4px; margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s4); background: var(--surface); border-bottom: 1px solid var(--line); }
.reader-crumb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-s); color: var(--muted); }
.reader-bar .a-sm { font-size: 13px; font-weight: 600; } .reader-bar .a-lg { font-size: 18px; font-weight: 700; }
.scale-out { min-width: 3.2em; text-align: center; }
.reader { --read-scale: 1; font-size: calc(1.0625rem * var(--read-scale)); padding: var(--s2) var(--s1) var(--s5); }
.reader-title { font-size: 1.45em; margin-bottom: 0.2em; }
.reader-title-ar { font-size: 1.5em; color: var(--muted); margin-bottom: 0.6em; }
.reader-nav { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s5); }
.reader-nav .btn { max-width: 48%; min-width: 0; }
.reader-nav .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.reading .topbar, body.reading .bottomnav, body.reading .sidenav, body.reading .offline-bar { display: none !important; }
body.reading .reader-bar { top: 0; }
body.reading .main { padding-bottom: var(--s5); }

.rich-wrap { border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); }
.rich-toolbar { position: sticky; top: var(--top-h); z-index: 5; display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--surface); border-radius: var(--r-m) var(--r-m) 0 0; }
.rich-toolbar .tb { min-width: 34px; height: 34px; padding: 0 6px; border: 0; border-radius: var(--r-s); background: none; color: var(--ink); cursor: pointer; display: inline-grid; place-items: center; font: inherit; font-size: 14px; }
.rich-toolbar .tb:hover { background: var(--navy-soft); }
.rich-toolbar .hl-swatch { width: 26px; min-width: 26px; height: 26px; margin: 4px 2px; border: 1px solid var(--line-strong); }
.rich-toolbar .tb-sep { width: 1px; background: var(--line); margin: 4px 3px; }
.rich-editor { min-height: 320px; padding: var(--s4); outline: none; font-size: 1.0625rem; }
.rich-editor span.fn { display: inline-block; font-size: 0.75em; vertical-align: super; color: var(--gold-ink); cursor: pointer; padding: 0 2px; border-radius: 3px; background: var(--gold-soft); }
.rich [dir='rtl'] [dir='rtl'], .rich .doa-ar [dir='rtl'] { font-size: 1em; }

/* ---------- Bus hotel ↔ Haram & titik penting ---------- */
.place-list { list-style: none; margin: 0; padding: 0; }
.place-list.panel { padding: 0 var(--s4); }
.place-row { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.place-row:last-child { border-bottom: 0; }
.place-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.place-row.is-hidden { opacity: 0.55; }
.place-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.place-dot.c-mosque, .place-dot.c-entrance { background: var(--ok); }
.place-dot.c-drop_off, .place-dot.c-pickup, .place-dot.c-bus_parking { background: var(--gold); }
.place-dot.c-meeting_point { background: #3c6e9e; }
.place-dot.c-hotel { background: var(--navy); }
.place-dot.c-emergency, .place-dot.c-health, .place-dot.c-help_post { background: var(--bad); }
.time-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.time-chip { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); padding: 2px 8px; border-radius: 999px; background: var(--navy-soft); color: var(--navy-ink); }
.time-chip.past { opacity: 0.45; text-decoration: line-through; }
.time-chip.next { background: var(--gold); color: var(--on-gold); font-weight: 700; }
.shuttle-today { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.shuttle-dir { border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s3); }
.next-time { font-size: var(--fs-l); font-weight: 700; color: var(--navy-ink); font-variant-numeric: tabular-nums; }
.day-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.day-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-s); cursor: pointer; }
.day-chip:has(input:checked) { border-color: var(--navy-line); background: var(--navy-soft); }
.pick-map { height: 240px; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line); margin-top: var(--s2); }

/* ---------- v0.6: rapi di HP (≤ 480px) ---------- */
.btn { max-width: 100%; }
.section-title { flex-wrap: wrap; row-gap: var(--s2); }
.badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.matrix { overflow-x: auto; }
.kv dd, .kv dt { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 6px; }
  .btn.small { min-height: 36px; padding-inline: var(--s3); }
  .page-head { margin-bottom: var(--s4); }
  .page-head h1 { font-size: var(--fs-xl); }
  .page-head .actions { margin-inline-start: 0; width: 100%; }
  .section-title h2 { font-size: var(--fs-l); }
  .panel { padding: var(--s3); }
  .main { padding: var(--s3); padding-bottom: calc(var(--nav-h) + var(--s5) + env(safe-area-inset-bottom)); }
  .form-actions { flex-wrap: wrap; }
  .tabs button { padding-inline: var(--s2); }
  .kv { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 6px var(--s3); }
  .reader-bar { margin: calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s3); }
}
.matrix.panel { overflow-x: auto; }
.hp-field { position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.badges .badge { white-space: normal; overflow-wrap: anywhere; }
.rich-toolbar .hl-swatch.hl-yellow { background: #fff1a8; } .rich-toolbar .hl-swatch.hl-green { background: #c9f0d5; }
.rich-toolbar .hl-swatch.hl-blue { background: #cfe3ff; } .rich-toolbar .hl-swatch.hl-pink { background: #ffd6e5; }

/* ---------- v0.7: warna kursi terkonfirmasi & baris prioritas ---------- */
:root { --cat-female: #f6b8d0; --cat-female-ink: #6e1840; --cat-male: #b7d4f6; --cat-male-ink: #11365f; --cat-family: #b5e2c2; --cat-family-ink: #164f27; --prio-bg: #fff2f7; --prio-line: #e48ab0; }
:root[data-theme='dark'] { --cat-female: #8a3a5c; --cat-female-ink: #ffe3ef; --cat-male: #2f5687; --cat-male-ink: #e3efff; --cat-family: #2f6b45; --cat-family-ink: #e1f7e8; --prio-bg: #3a2230; --prio-line: #c46c93; }
.seat.prio.available { background: var(--prio-bg); border-color: var(--prio-line); }
.seat.cat-female { background: var(--cat-female); border-color: var(--cat-female); color: var(--cat-female-ink); }
.seat.cat-male { background: var(--cat-male); border-color: var(--cat-male); color: var(--cat-male-ink); }
.seat.cat-family { background: var(--cat-family); border-color: var(--cat-family); color: var(--cat-family-ink); }
.seat.mine[class*='cat-'] { box-shadow: inset 0 0 0 2px var(--navy-ink); }
.seat.swap-from { outline: 3px solid var(--gold); outline-offset: 2px; }
.legend i.prio { background: var(--prio-bg); border-color: var(--prio-line); }
.legend i.cat-female { background: var(--cat-female); border-color: var(--cat-female); }
.legend i.cat-male { background: var(--cat-male); border-color: var(--cat-male); }
.legend i.cat-family { background: var(--cat-family); border-color: var(--cat-family); }
.legend { flex-wrap: wrap; }
.swap-bar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.swap-preview { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s2); align-items: center; text-align: center; }
.swap-preview .who { padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-m); }
/* ---------- v0.7: checklist berkas ---------- */
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.doc-item { border: 1px solid var(--line); border-inline-start: 4px solid var(--line-strong); border-radius: var(--r-m); padding: var(--s3); background: var(--surface); display: grid; gap: 6px; }
.doc-item.st-verified { border-inline-start-color: var(--ok); }
.doc-item.st-pending { border-inline-start-color: var(--gold); }
.doc-item.st-missing { border-inline-start-color: var(--warn); }
.doc-item.st-rejected { border-inline-start-color: var(--bad); }
.doc-upload { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.doc-upload input { flex: 1; min-width: 0; }
.bad-text { color: var(--bad); }
.docs-reminder { flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
/* ---------- v0.7: tur layar & panduan ---------- */
.tour-block { position: fixed; inset: 0; z-index: 90; }
.tour-spot { position: fixed; z-index: 91; border-radius: var(--r-m); box-shadow: 0 0 0 9999px rgba(10, 16, 28, 0.6); outline: 3px solid var(--gold); pointer-events: none; transition: all 0.2s ease; }
.tour-tip { position: fixed; z-index: 92; width: min(340px, calc(100vw - 16px)); background: var(--surface); color: var(--ink); border-radius: var(--r-l); padding: var(--s3) var(--s4); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3); outline: none; }
.tour-tip p { margin: var(--s2) 0 var(--s3); line-height: 1.5; }
.tour-tip.center { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
.guide-role { display: grid; gap: var(--s3); }
.guide-topic { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.guide-topic > summary { list-style: none; cursor: pointer; padding: var(--s3) var(--s4); display: flex; gap: var(--s3); align-items: center; }
.guide-topic > summary::-webkit-details-marker { display: none; }
.guide-topic > summary .gi { flex: none; width: 36px; height: 36px; border-radius: var(--r-m); background: var(--navy-soft); color: var(--navy-ink); display: grid; place-items: center; }
.guide-topic > summary strong { display: block; }
.guide-topic[open] > summary { border-bottom: 1px solid var(--line); }
.guide-body { padding: var(--s3) var(--s4) var(--s4); display: grid; gap: var(--s3); }
.guide-steps { margin: 0; padding-inline-start: 1.3em; display: grid; gap: var(--s2); }
.guide-steps li { line-height: 1.5; }
.guide-steps .step-act { display: inline-flex; gap: 6px; margin-inline-start: 6px; vertical-align: middle; }
.guide-steps .step-act a, .guide-steps .step-act button { font-size: var(--fs-xs); }
.guide-note { border-inline-start: 3px solid var(--gold); }

/* ---------- v0.7.1: pemindai QR & kode absensi ---------- */
.scanner { align-items: stretch; }
.scan-frame { position: relative; width: 100%; max-width: 420px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #000; margin-inline: auto; }
.scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-box { position: absolute; inset: 14% 22%; border: 3px solid rgba(255, 255, 255, 0.9); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.28); pointer-events: none; }
.att-code { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.att-code strong { font-size: 2rem; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.att-code-form summary { cursor: pointer; padding: 4px 0; }
.att-code-input { max-width: 9.5rem; font-size: 1.25rem; letter-spacing: 0.1em; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- v0.8: pemilih bahasa ---------- */
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; cursor: pointer; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-code { font-size: 13px; font-weight: 600; min-width: 1.6em; text-align: center; }
.lang-list { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); background: var(--surface, #fff); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); padding: 4px; min-width: 170px; z-index: 60; display: flex; flex-direction: column; }
.lang-list button { all: unset; cursor: pointer; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.lang-list button:hover, .lang-list button:focus-visible { background: var(--navy-soft); outline: none; }
.lang-list button[aria-checked='true'] { font-weight: 700; }

/* ---------- v0.8: sertifikat (halaman aplikasi) ---------- */
.cert-cards { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cert-card { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: inherit; }
.cert-card-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold); flex: 0 0 auto; }
.cert-home { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; text-decoration: none; }
.cert-layout { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .cert-layout { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); } .cert-preview-col { position: sticky; top: calc(var(--top-h) + 12px); } }
.cert-preview-col { min-width: 0; order: -1; }
@media (min-width: 1100px) { .cert-preview-col { order: 0; } }
.cert-locks { display: grid; gap: 6px 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); background: var(--navy-soft); border-radius: var(--r-m); padding: 10px 12px; }
.cert-locked > div { font-weight: 600; overflow-wrap: anywhere; }
.cert-tpl-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.cert-tpl { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 6px; border-radius: 10px; border: 2px solid transparent; }
.cert-tpl[aria-checked='true'] { border-color: var(--gold); background: var(--gold-soft); }
.cert-tpl:focus-visible { outline: 2px solid var(--navy); }
.cert-swatch { width: 72px; height: 50px; border-radius: 6px; padding: 5px; display: block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.cert-swatch-paper { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; border: 1.5px solid; border-radius: 2px; }
.cert-swatch-title { width: 60%; height: 5px; border-radius: 2px; }
.cert-swatch-acc { width: 40%; height: 3px; border-radius: 2px; }
.cert-tpl-cards { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cert-tpl-card { display: flex; flex-direction: column; gap: 8px; }
.cert-tpl-card .cert-sheet { box-shadow: none; }
.muted-card { opacity: 0.6; }
.cert-thumb { max-height: 56px; max-width: 160px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; vertical-align: middle; }
.cert-modal-preview { border: 1px dashed var(--line-strong); border-radius: var(--r-m); padding: 6px; background: var(--paper); }
.account-links { margin-bottom: var(--s3); }
input[type='color'].input { padding: 2px; height: 40px; }
.cert-modal-sticky { position: sticky; top: calc(var(--s3) * -1); z-index: 5; background: var(--surface); padding-block: 6px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.cert-modal-sticky .cert-modal-preview { max-width: 420px; margin-inline: auto; }

/* ---------- v0.9: halaman sertifikat modern, inventaris desain ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--navy-soft); max-width: 100%; }
.seg button { all: unset; cursor: pointer; padding: 7px 12px; border-radius: 9px; font-size: var(--fs-s, 14px); color: var(--muted); min-height: 22px; }
.seg button[aria-checked='true'] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(19, 35, 63, 0.14); }
.seg button:focus-visible { outline: 2px solid var(--navy); }
.cert-hero {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s4); border-radius: var(--r-l);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 70%, color-mix(in srgb, var(--gold) 40%, var(--navy-2)) 100%); color: #fff;
  box-shadow: 0 10px 30px rgba(19, 35, 63, 0.18);
}
.cert-hero h2 { margin: 0; color: #fff; font-size: 1.25rem; }
.cert-hero .muted { color: rgba(255, 255, 255, 0.78); }
.cert-hero .badge { background: rgba(255, 255, 255, 0.16); color: #fff; }
.cert-hero-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: #f3d79b; flex: 0 0 auto; }
.cert-hero-icon .icon { width: 28px; height: 28px; }
.cert-hero-text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cert-hero-actions .btn { background: var(--gold); color: var(--on-gold); border-color: transparent; }
.cert-sec-title { margin: 0; font-size: 1rem; }
.cert-stage { border-radius: var(--r-l); padding: 14px; background: radial-gradient(circle at 30% 0%, color-mix(in srgb, var(--gold) 14%, var(--surface)), var(--navy-soft)); border: 1px solid var(--line); }
.cert-stage .cert-sheet { box-shadow: 0 6px 24px rgba(19, 35, 63, 0.22); }
.cert-preview-actions { margin-top: 10px; }
@media (min-width: 1100px) { .cert-preview-actions { display: none; } }
.cert-tpl-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.cert-tpl { width: 100%; box-sizing: border-box; }
.cert-tpl-mini { display: block; width: 100%; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 4px rgba(19, 35, 63, 0.18); pointer-events: none; }
.cert-tpl-mini .cert-sheet { box-shadow: none; }
.cert-tpl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cert-tpl-thumb { display: block; border-radius: var(--r-m); overflow: hidden; outline-offset: 2px; }
.cert-tpl-thumb:hover .cert-sheet { filter: brightness(1.02); }

.inv-tools { gap: 8px; align-items: center; }
.inv-tools > .input { max-width: 260px; }
.inv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { all: unset; cursor: pointer; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: var(--fs-xs, 12.5px); color: var(--ink); background: var(--surface); }
.chip[aria-pressed='true'] { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.chip:focus-visible { outline: 2px solid var(--gold); }
.inv-cards { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.inv-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); overflow: hidden; }
.inv-thumb {
  height: 130px; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line);
  background-color: #fff; background-image: linear-gradient(45deg, #eef0f3 25%, transparent 25%), linear-gradient(-45deg, #eef0f3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eef0f3 75%), linear-gradient(-45deg, transparent 75%, #eef0f3 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.inv-thumb img { max-width: 92%; max-height: 92%; object-fit: contain; display: block; }
.inv-thumb.font { background: var(--paper); color: var(--ink); }
.inv-font-sample { font-size: 26px; line-height: 1.2; text-align: center; padding: 6px; }
.inv-meta { padding: 8px 10px 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.inv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 100%; }
.inv-actions { display: flex; justify-content: flex-end; gap: 2px; padding: 0 6px 6px; }
.inv-empty { text-align: center; }
.inv-license { align-items: flex-start; font-size: var(--fs-s, 14px); }
dialog.modal.wide { width: min(880px, calc(100vw - 24px)); }
.inv-pick { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.inv-pick-item { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 0; }
.inv-pick-item:hover, .inv-pick-item:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
.inv-pick-item .inv-thumb { height: 96px; }
.inv-pick-item .inv-name { padding: 0 8px 6px; }

/* ===================== v0.10: tata letak lanjutan ===================== */
.shell > .content { min-width: 0; }
.side-toggle .icon { width: 18px; height: 18px; transition: transform var(--t-med) var(--ease); }
.side-toggle .icon.flip-x { transform: scaleX(-1); }
[dir='rtl'] .side-toggle .icon.flip { transform: scaleX(-1); }
[dir='rtl'] .side-toggle .icon.flip.flip-x { transform: none; }

/* ===================== v0.10: grafik ===================== */
.chart-card { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.chart-head h3 { margin: 0; font-size: 1rem; }
.chart-head p { margin: 4px 0 0; }
.chart { position: relative; min-width: 0; }
.chart-svg { width: 100%; }
.chart-canvas { display: block; overflow: visible; touch-action: pan-y; outline: none; }
.chart-canvas:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 4px; border-radius: 6px; }
.chart-canvas .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-canvas .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart-canvas .tick { fill: var(--muted); font-size: 11px; font-weight: 500; font-family: var(--font); }
.chart-canvas .line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-canvas .bar { transition: opacity var(--t-fast) var(--ease); }
.chart-canvas .guide { stroke: var(--line-strong); stroke-width: 1; }
.chart-canvas .dot { fill: var(--surface); stroke-width: 2.5; }
.chart-canvas polyline.line { animation: chart-draw 600ms var(--ease) both; }
@keyframes chart-draw { from { opacity: 0; } }
.chart-tip { position: absolute; z-index: 3; min-width: 140px; max-width: 240px; pointer-events: none; padding: 8px 10px; border-radius: 10px; background: #16201b; color: #fff; font-size: 12px; box-shadow: var(--shadow-lg); transform: translateY(-100%); }
.chart-tip-t { font-weight: 700; margin-bottom: 4px; color: rgba(255, 255, 255, 0.8); }
.chart-tip-r { display: flex; align-items: center; gap: 6px; }
.chart-tip-r i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chart-tip-r strong { margin-inline-start: auto; padding-inline-start: 10px; font-variant-numeric: tabular-nums; }
.chart-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.chart-legend li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.chart-legend strong { color: var(--ink); font-weight: 650; }
.chart-empty { display: grid; place-items: center; min-height: 180px; color: var(--muted); font-size: var(--fs-s); text-align: center; padding: var(--s4); background: repeating-linear-gradient(135deg, transparent 0 10px, var(--surface-2) 10px 11px); border-radius: var(--r-m); }
.chart-loading { display: grid; gap: 12px; padding: var(--s4) 0; min-height: 180px; align-content: center; }
.donut-wrap { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.donut-box { flex: 0 0 150px; width: 150px; }
.donut { width: 150px; height: 150px; display: block; }
.donut-track { fill: none; stroke: var(--surface-2); stroke-width: 16; }
.donut-seg { fill: none; stroke-width: 16; stroke-linecap: butt; transition: stroke-width var(--t-fast) var(--ease); }
.donut-seg:hover { stroke-width: 19; }
.donut-v { fill: var(--navy-ink); font-size: 22px; font-weight: 750; font-family: var(--font); }
.donut-l { fill: var(--muted); font-size: 10px; font-weight: 600; font-family: var(--font); }
.donut-wrap .chart-legend { flex: 1 1 180px; flex-direction: column; gap: 8px; font-size: var(--fs-s); }
.donut-wrap .chart-legend li { justify-content: space-between; }
.donut-wrap .chart-legend span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hbar-link { display: block; color: inherit; text-decoration: none; border-radius: 10px; margin: -6px; padding: 6px; transition: background var(--t-fast) var(--ease); }
.hbar-link:hover { background: var(--hover); }
.hbar-top { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--fs-s); margin-bottom: 6px; }
.hbar-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.hbar-v { font-variant-numeric: tabular-nums; flex: none; }
.hbar-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.hbar-fill { display: block; height: 100%; border-radius: inherit; background: var(--chart-1); transition: width 500ms var(--ease); }
.hbar-fill.tone-ok { background: var(--ok-solid); } .hbar-fill.tone-warn { background: var(--warn-solid); } .hbar-fill.tone-bad { background: var(--bad-solid); }
.hbar-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.spark { width: 100%; height: 28px; display: block; }
.spark-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.seg-ctl { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.seg-ctl button { all: unset; cursor: pointer; padding: 5px 12px; border-radius: 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.seg-ctl button[aria-pressed='true'] { background: var(--surface); color: var(--navy-ink); box-shadow: var(--shadow-xs); }
.seg-ctl button:focus-visible { outline: 2px solid var(--gold-line); }
.dash-grid { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .dash-grid.two { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .dash-grid.even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) and (max-width: 1023px) { .dash-grid.even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===================== v0.10: beranda ===================== */
.home-head { margin-bottom: var(--s5); }
.home-date { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 6px; }
[dir='rtl'] .home-date { letter-spacing: 0; text-transform: none; }
.kpi-main { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.kpi-main .stat .v { font-size: 1.875rem; }
.attention .stat { padding: 14px; }
.attention .stat .v { font-size: 1.375rem; }
.attention .stat .ic { width: 30px; height: 30px; }
.defs summary { cursor: pointer; }
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30%, 104px), 1fr)); gap: var(--s2); }
.quick-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); color: var(--ink); text-decoration: none; font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; box-shadow: var(--shadow-xs); transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); min-width: 0; overflow-wrap: anywhere; }
.quick-item:hover { border-color: color-mix(in srgb, var(--navy) 35%, var(--line)); transform: translateY(-1px); }
.quick-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--navy-soft); color: var(--navy-ink); }
.quick-ic .icon { width: 21px; height: 21px; }
.trip-hero {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); align-items: center;
  padding: var(--s5); border-radius: var(--r-xl); color: #fff; background: linear-gradient(135deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 72%, #000) 100%); box-shadow: var(--shadow);
}
.trip-hero::after { content: ''; position: absolute; z-index: -1; inset-inline-end: -36px; bottom: -60px; width: 180px; height: 220px; border: 2px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 90px 90px 0 0; }
.trip-hero h2 { color: #fff; margin: 4px 0 8px; font-size: 1.375rem; }
.trip-hero-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
[dir='rtl'] .trip-hero-label { letter-spacing: 0; }
.trip-hero-dates { display: flex; align-items: center; gap: 8px; font-size: var(--fs-s); color: rgba(255, 255, 255, 0.85); margin-bottom: var(--s3); }
.trip-hero-dates .icon { width: 18px; height: 18px; color: var(--gold); }
.trip-hero .badge { background: rgba(255, 255, 255, 0.14); color: #fff; }
.trip-hero-count { display: grid; justify-items: center; align-content: center; min-width: 96px; padding: 12px 16px; border-radius: var(--r-l); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); text-align: center; }
.trip-hero-count strong { font-size: 2.25rem; line-height: 1; font-weight: 800; color: var(--gold); }
.trip-hero-count span { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.8); margin-top: 4px; font-weight: 600; }
.trip-hero-actions { grid-column: 1 / -1; display: flex; gap: var(--s2); flex-wrap: wrap; }
.trip-hero-actions .btn.ghost { color: #fff; }
.trip-hero-actions .btn.ghost:hover { background: rgba(255, 255, 255, 0.12); }
.leaders { padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--line); }
@media (max-width: 420px) { .trip-hero { grid-template-columns: 1fr; } .trip-hero-count { justify-self: start; grid-auto-flow: column; gap: 8px; align-items: baseline; } }

/* ===================== v0.10: pengaturan tema ===================== */
.theme-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s2); }
.theme-preset { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.theme-preset:hover { border-color: var(--line-strong); }
.theme-preset[aria-checked='true'] { border-color: var(--navy-line); box-shadow: var(--ring); }
.theme-preset:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 2px; }
.tp-swatch { position: relative; display: block; height: 64px; border-radius: 9px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.tp-bar { position: absolute; inset-block: 0; inset-inline-start: 0; width: 26%; }
.tp-card { position: absolute; inset-inline-start: 34%; inset-inline-end: 10%; top: 14px; bottom: 14px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.tp-line { position: absolute; inset-inline-start: 10%; top: 30%; width: 55%; height: 4px; border-radius: 2px; opacity: 0.8; }
.tp-dot { position: absolute; inset-inline-start: 10%; bottom: 25%; width: 26%; height: 6px; border-radius: 3px; }
.tp-name { font-size: var(--fs-xs); font-weight: 650; color: var(--ink); line-height: 1.3; }
.theme-custom { display: grid; place-items: center; border: 1px dashed var(--line-strong); border-radius: var(--r-m); font-size: var(--fs-xs); color: var(--muted); min-height: 96px; padding: 8px; text-align: center; }
.theme-custom.on { border-style: solid; border-color: var(--navy-line); color: var(--navy-ink); font-weight: 700; box-shadow: var(--ring); }
.theme-fields { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.contrast-report { display: grid; gap: 4px; font-size: var(--fs-xs); font-weight: 600; padding: var(--s3); border-radius: var(--r-s); background: var(--surface-2); }
.theme-mock { border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--paper); }
.tm-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); color: var(--navy-ink); }
.tm-top .brand-mark { width: 28px; height: 28px; font-size: 11px; border-radius: 8px; }
.tm-body { padding: 14px; display: grid; gap: 12px; }
.tm-body .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.attention { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.attention .stat { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: center; padding: 12px 14px; }
.attention .stat .ic { grid-row: 1 / span 2; grid-column: 1; margin: 0; width: 38px; height: 38px; border-radius: 11px; }
.attention .stat .l { grid-column: 2; grid-row: 1; font-size: var(--fs-xs); font-weight: 600; }
.attention .stat .v { grid-column: 2; grid-row: 2; font-size: 1.25rem; }
.attention .stat .go { inset-block-start: 50%; transform: translateY(-50%); }

/* ===================== v0.10: responsif lanjutan ===================== */
/* Layar pendek mendatar (HP landscape): kerangka lebih ramping agar konten tetap lega. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --top-h: 52px; --nav-h: 52px; }
  .bottomnav a { flex-direction: row; gap: 6px; }
  .bottomnav a .icon { padding: 3px 6px; }
  .page-head { margin-bottom: var(--s4); }
  h1 { font-size: 1.5rem; }
  dialog.modal { max-height: 94dvh; }
  .trip-hero { padding: var(--s4); }
}
/* Tablet potret: kartu dua kolom, form tidak terlalu lebar. */
@media (min-width: 720px) and (max-width: 959px) {
  .main { padding: var(--s5) var(--s5) calc(var(--nav-h) + var(--s6)); }
  .kpi-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form { max-width: 760px; }
  .modal-body .form { max-width: none; }
}
@media (max-width: 480px) {
  h1, .page-head h1 { font-size: 1.5rem; }
  .panel { padding: var(--s4); }
  .stat .v { font-size: 1.375rem; }
  .kpi-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-main .stat .v { font-size: 1.5rem; }
  .chart-card { padding: var(--s4); }
  .section-title h2 { font-size: 1.0625rem; }
  .main { padding-inline: var(--s4); }
  .donut-wrap { justify-content: center; }
}
.kpi-main .stat { padding: 18px 18px 16px; }
.kpi-main .stat .ic { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; margin: 0; width: 38px; height: 38px; border-radius: 12px; }
.kpi-main .stat .l { padding-inline-end: 48px; font-weight: 600; }
.kpi-main .stat .go { inset-block-start: auto; bottom: 16px; }
@media (max-width: 480px) { .attention { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); } .attention .stat { grid-template-columns: 1fr; padding: 12px; } .attention .stat .ic { grid-row: auto; width: 30px; height: 30px; margin-bottom: 6px; } .attention .stat .l, .attention .stat .v { grid-column: 1; grid-row: auto; } }
/* Tabel lebar di tablet: sel lebih rapat, panel menggulir sendiri (bukan seluruh halaman). */
.panel.flush { overflow-x: auto; }
@media (min-width: 720px) and (max-width: 1023px) {
  .dlist th, .dlist td { padding-inline: 12px; }
  .dlist th { white-space: normal; }
  .dlist td { font-size: var(--fs-s); }
}

/* ===================== v0.11: layar panggilan masuk ===================== */
.incoming-call {
  position: fixed; inset: 0; z-index: 120; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; box-sizing: border-box; display: grid; place-items: center; padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--navy) 70%, #000) 0%, #070d0a 100%); color: #fff;
  animation: call-in 260ms var(--ease) both;
}
.incoming-call::backdrop { background: #000; }
.incoming-call:not([open]) { display: none; }
.incoming-call.kind-emergency { background: radial-gradient(120% 80% at 50% 0%, #6b1d1d 0%, #120707 100%); }
.incoming-call.leaving { animation: call-out 180ms var(--ease) both; }
@keyframes call-in { from { opacity: 0; transform: scale(1.02); } }
@keyframes call-out { to { opacity: 0; } }
.call-card { width: min(100%, 420px); min-height: min(100%, 640px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.call-status { font-size: var(--fs-s); font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.72); margin-top: 4vh; }
.call-avatar { position: relative; width: 132px; height: 132px; margin: 4vh 0 10px; display: grid; place-items: center; }
.call-ic { position: relative; z-index: 2; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--gold) 92%, #000); color: #14110a; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45); }
.kind-emergency .call-ic { background: #e5534b; color: #fff; }
.call-ic .icon { width: 46px; height: 46px; stroke-width: 1.8; }
.call-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--gold) 70%, transparent); animation: call-pulse 1.6s ease-out infinite; }
.kind-emergency .call-pulse { border-color: rgba(255, 120, 110, 0.7); }
.call-pulse.p2 { animation-delay: 0.8s; }
@keyframes call-pulse { from { transform: scale(0.82); opacity: 0.9; } to { transform: scale(1.55); opacity: 0; } }
.call-title { color: #fff; font-size: clamp(1.5rem, 6vw, 2rem); margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
.call-body { color: rgba(255, 255, 255, 0.82); font-size: 1rem; max-width: 34ch; margin: 0; overflow-wrap: anywhere; }
.call-actions { margin-top: auto; width: 100%; display: flex; justify-content: space-around; gap: 24px; padding-bottom: 4vh; }
.call-btn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: var(--fs-s); font-weight: 600; color: #fff; min-width: 96px; text-align: center; }
.call-btn-ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); transition: transform var(--t-fast) var(--ease); }
.call-btn .icon { width: 30px; height: 30px; stroke-width: 2.2; }
.call-btn.accept .call-btn-ic { background: #22a565; }
.call-btn.decline .call-btn-ic { background: #e5534b; }
.call-btn:hover .call-btn-ic { transform: scale(1.05); }
.call-btn:focus-visible .call-btn-ic { outline: 3px solid #fff; outline-offset: 4px; }
.call-btn.accept .call-btn-ic { animation: call-nudge 1.4s ease-in-out infinite; }
@keyframes call-nudge { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-6px); } 80% { transform: translateY(0); } 90% { transform: translateY(-3px); } }
@media (max-height: 520px) { .call-card { min-height: 0; gap: 8px; } .call-avatar { width: 88px; height: 88px; margin: 6px 0; } .call-ic { width: 72px; height: 72px; } .call-status { margin-top: 0; } .call-actions { padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .call-pulse, .call-btn.accept .call-btn-ic { animation: none; } }

/* ===================== v0.11: jenis notifikasi & mode getar ===================== */
.notif-cat-list { display: grid; gap: var(--s3); }
@media (min-width: 1100px) { .notif-cats .notif-cat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.notif-cat, .notif-quiet { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); transition: border-color var(--t-fast) var(--ease); }
.notif-cat.mode-long { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); background: color-mix(in srgb, var(--gold-soft) 40%, var(--surface)); }
.notif-cat.mode-off { background: var(--surface-2); }
.notif-cat.mode-off .notif-cat-ic { opacity: 0.55; }
.notif-cat-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-soft); color: var(--navy-ink); }
.notif-cat[data-cat='emergency'] .notif-cat-ic { background: var(--bad-soft); color: var(--bad); }
.notif-cat[data-cat='attendance'] .notif-cat-ic { background: var(--gold-soft); color: var(--gold-ink); }
.notif-cat-ic .icon { width: 20px; height: 20px; }
.notif-cat-main { display: grid; gap: 8px; min-width: 0; }
.notif-cat-main > p { margin: 0; }
.notif-cat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notif-cat-head .badge .icon { width: 12px; height: 12px; }
.notif-cat-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-height: 36px; }
.vib-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.vib-seg button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px 6px; border-radius: 9px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; min-height: 44px; justify-content: center; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.vib-seg button:hover:not(:disabled) { color: var(--ink); }
.vib-seg button[aria-checked='true'] { background: var(--surface); color: var(--navy-ink); box-shadow: var(--shadow-xs); }
.vib-seg button:disabled { opacity: 0.35; cursor: not-allowed; }
.vib-seg button:focus-visible { outline: 2px solid var(--gold-line); }
.vib-glyph { display: flex; gap: 2px; align-items: center; height: 10px; }
.vib-glyph i { display: block; width: 4px; height: 10px; border-radius: 2px; background: currentColor; opacity: 0.85; }
.vib-glyph.g-long i { width: 7px; }
.vib-glyph.g-off::before { content: ''; width: 12px; height: 2px; background: currentColor; border-radius: 1px; opacity: 0.7; }
.quiet-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; gap: var(--s2); }
.quiet-times .field { min-width: 0; margin: 0; }
.quiet-times input { width: 100%; min-width: 0; }
.quiet-dash { display: none; }