/* =====================================================================
   Playground: gaya bersama untuk aplikasi latihan (TokoQA, KlinikQA, PerpusQA, Arena, API Lab)

   Satu identitas dengan tutorial: aksen hijau yang sama (#18794E terang, #4CC38A gelap),
   permukaan netral, dan kaca hanya untuk navigasi, panel utama, serta ringkasan.
   Daftar dan tabel tetap polos supaya mudah dibaca.
   Font: Geist + Geist Mono, disimpan lokal di assets/fonts (tetap offline,
   test tidak menunggu internet). Ikon: Phosphor regular (assets/icons.css),
   selalu aria-hidden supaya tidak ikut masuk nama aksesibel elemen.

   Aturan sudut (satu sistem):
     pill  tombol, navigasi, chip, badge
     12px  input, select, textarea, kotak kecil
     20px  kartu dan panel (24px untuk panel besar dan dialog)
   Skala jarak: 4 · 8 · 12 · 16 · 24 · 32 · 48
   Skala huruf: 12.5 · 13.5 · 15 (isi) · 17 · 20 · 30 · 38
   ===================================================================== */
@import url("assets/fonts.css");
@import url("assets/icons.css");

:root {
  --bg: #f5f6f3;
  --surface: #fcfcfa;
  --surface-2: #eef0eb;
  --ink: #1b1f24;
  --ink-2: #3a4049;
  --muted: #5a616d;
  --line: #dde0d8;
  --line-strong: #c9cdc3;
  --accent: #18794e;
  --accent-strong: #11603d;
  --accent-soft: #e2f0e8;
  --on-accent: #fcfcfa;
  --ok: #18794e;
  --ok-soft: #e2f0e8;
  --bad: #a3261c;
  --bad-soft: #fae8e5;
  --warn: #7a4d00;
  --warn-soft: #faf0d9;
  --info: #2a54c4;
  --info-soft: #e5ebf9;
  --glass-fill: rgb(255 255 255 / .72);
  --glass-stroke: rgb(255 255 255 / .9);
  --glass-edge: rgb(27 31 36 / .08);
  --glass-hi: rgb(255 255 255 / .8);
  --glow: rgb(24 121 78 / .08);
  --scroll-shadow: rgb(20 40 30 / .28);
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 20px;
  --r-xl: 24px;
  --pill: 999px;
  --shadow: 0 1px 2px rgb(27 58 42 / .06), 0 16px 40px -18px rgb(27 58 42 / .28);
  --shadow-pop: 0 2px 6px rgb(27 58 42 / .08), 0 24px 48px -18px rgb(27 58 42 / .34);
  --font: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "Geist Mono", "Cascadia Code", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --z-sticky: 10;
  --z-pop: 20;
  --z-toast: 30;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1114; --surface: #181b1f; --surface-2: #20242a; --ink: #e9ebee; --ink-2: #c6cad1; --muted: #9ba2ae;
    --line: #2c3139; --line-strong: #3a414b; --accent: #4cc38a; --accent-strong: #74d8a6; --accent-soft: #173022; --on-accent: #0e1712;
    --ok: #4cc38a; --ok-soft: #173022; --bad: #ff9b90; --bad-soft: #371b18; --warn: #f2c46a; --warn-soft: #30270f;
    --info: #8fb4ff; --info-soft: #1c2640;
    --glass-fill: rgb(24 27 31 / .72); --glass-stroke: rgb(255 255 255 / .09); --glass-edge: rgb(255 255 255 / .18); --glass-hi: rgb(255 255 255 / .08);
    --glow: rgb(76 195 138 / .12); --scroll-shadow: rgb(255 255 255 / .16);
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 18px 44px -16px rgb(0 0 0 / .6);
    --shadow-pop: 0 2px 6px rgb(0 0 0 / .45), 0 24px 48px -16px rgb(0 0 0 / .7);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  background: radial-gradient(1200px 520px at 18% -120px, var(--glow), transparent 70%), var(--bg);
  background-attachment: fixed;
}
a { color: var(--accent-strong); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
h1 { font-size: 34px; line-height: 1.12; letter-spacing: -.03em; font-weight: 620; margin: 0 0 8px; text-wrap: balance; }
h2 { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; font-weight: 620; margin: 0 0 10px; }
h3 { font-size: 15px; line-height: 1.35; font-weight: 600; margin: 0; }
p { margin: 0 0 10px; text-wrap: pretty; }
code, kbd { font-family: var(--mono); font-size: .86em; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.muted { color: var(--muted); font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ph { font-size: 1.15em; vertical-align: -.16em; }
.num { font-variant-numeric: tabular-nums; }

/* Kaca: hanya untuk navigasi, panel utama, ringkasan, dan dialog */
.glass, .pg-bar .in, .app-header .in, .card.raised, .stat-row, .modal {
  background: linear-gradient(180deg, var(--glass-hi), transparent 45%), var(--glass-fill);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--glass-stroke);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow);
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .pg-bar .in, .app-header .in, .card.raised, .stat-row, .modal { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Navigasi playground: satu pil kaca yang mengambang ----------
   Halaman aplikasi (yang punya #app-header) memakai header aplikasi saja,
   daftar aplikasi pindah ke menu pengalih di logo. */
body:has(#app-header:not([hidden])) .pg-bar { display: none; }
.pg-bar, .app-header { position: sticky; top: 0; z-index: var(--z-sticky); padding: 12px 16px 0; font-size: 14px; }
.pg-bar .in, .app-header .in { max-width: 1240px; margin: 0 auto; min-height: 58px; padding: 6px 8px; border-radius: var(--pill); display: flex; align-items: center; gap: 10px; }
.pg-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 620; color: var(--ink); text-decoration: none; letter-spacing: -.01em; flex: none; padding: 4px 12px 4px 4px; border-radius: var(--pill); background: var(--surface-2); }
.pg-brand:hover { color: var(--ink); }
.pg-mark, .logo .mark { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 17px; flex: none; }
.pg-mark .ph, .logo .mark .ph { vertical-align: 0; }
.pg-links { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pg-links::-webkit-scrollbar { display: none; }
.pg-links a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--pill); color: var(--ink-2); text-decoration: none; white-space: nowrap; font-weight: 500; transition: background .16s var(--ease), color .16s var(--ease); }
.pg-links a:hover { background: var(--surface-2); color: var(--ink); }
.pg-links a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.pg-links a .ph { font-size: 16px; vertical-align: 0; }
.pg-back { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--pill); border: 1px solid var(--line); color: var(--ink); text-decoration: none; white-space: nowrap; flex: none; font-weight: 600; }
.pg-back:hover { color: var(--ink); background: var(--surface-2); }
@media (max-width: 720px) {
  .pg-bar .in { gap: 6px; }
  .pg-brand .txt, .pg-back .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pg-brand { padding: 4px; }
  .pg-links a { padding: 8px 9px; }
}

/* ---------- Header aplikasi (TokoQA, KlinikQA, PerpusQA) ---------- */
.switcher { position: relative; display: flex; align-items: center; flex: none; border-radius: var(--pill); background: var(--surface-2); }
.logo { display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; color: var(--ink); text-decoration: none; border-radius: var(--pill); }
.logo:hover { color: var(--ink); }
.logo-txt { display: grid; line-height: 1.15; }
.logo-txt b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.logo-txt small { font-family: var(--mono); font-size: 11.5px; color: var(--muted); font-weight: 500; }
.switch-btn { min-height: 34px; width: 34px; padding: 0; margin-right: 4px; border-radius: 50%; background: transparent; color: var(--muted); border-color: transparent; }
.switch-btn:hover, .switch-btn[aria-expanded="true"] { background: var(--surface); color: var(--ink); border-color: transparent; }
.switch-btn .ph { font-size: 14px; vertical-align: 0; }
.switch-menu { position: absolute; left: 0; top: calc(100% + 10px); width: 260px; padding: 8px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); z-index: var(--z-pop); display: grid; gap: 2px; }
.switch-menu p { margin: 4px 10px 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.switch-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); color: var(--ink); text-decoration: none; font-weight: 550; }
.switch-menu a:hover { background: var(--surface-2); color: var(--ink); }
.switch-menu a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); }
.switch-menu a .ph { font-size: 17px; color: var(--muted); vertical-align: 0; }
.switch-menu a[aria-current="page"] .ph { color: var(--accent-strong); }
.switch-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.app-header .spacer { flex: 1; }
main.container, .container { max-width: 1240px; margin: 0 auto; padding: 40px 24px 72px; }

/* ---------- Komponen dasar ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.card.raised { border-radius: var(--r-xl); }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.field { margin-bottom: 16px; }
label, .label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; color: var(--ink); }
.helper { font-size: 13px; color: var(--muted); margin-top: 6px; }
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=url], input[type=search], input[type=date], input[type=number], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); font: inherit; background: var(--surface); color: var(--ink);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
select { appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
select[multiple] { padding: 6px; background-image: none; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { min-height: 96px; resize: vertical; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 17px; height: 17px; margin: 0; }
input[type=file] { font: inherit; font-size: 14px; max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; font-size: 13.5px; margin-right: 10px; padding: 8px 14px; border-radius: var(--pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px 12px; margin: 0 0 16px; }
legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
fieldset label { display: inline-flex; gap: 8px; align-items: center; font-weight: 400; margin: 6px 18px 0 0; }
.inline { display: inline-flex !important; gap: 8px; align-items: center; font-weight: 400 !important; }

button, .btn {
  font: inherit; font-weight: 600; font-size: 14px; min-height: 40px; padding: 9px 18px; border-radius: var(--pill); border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.2; white-space: nowrap;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .08s var(--ease), box-shadow .16s var(--ease);
}
button:hover, .btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
button:active, .btn:active { transform: translateY(1px); }
button.secondary, .btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
button.secondary:hover, .btn.secondary:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--surface); }
button.ghost, .btn.ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
button.ghost:hover, .btn.ghost:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }
button.sm, .btn.sm { min-height: 34px; padding: 6px 14px; font-size: 13.5px; }
button.danger { background: transparent; color: var(--bad); border-color: transparent; min-height: 34px; padding: 6px 12px; }
button.danger:hover { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
button.link { background: none; border: 0; color: var(--accent-strong); padding: 0; min-height: 0; font-weight: 600; border-radius: 4px; }
button.link:hover { background: none; color: var(--accent); text-decoration: underline; }
button:disabled, button:disabled:hover { cursor: not-allowed; background: var(--surface-2); color: var(--muted); border-color: var(--line); transform: none; }

.alert { padding: 11px 14px; border-radius: var(--r); background: var(--bad-soft); color: var(--bad); font-size: 14px; }
.alert:empty { display: none; }
.success { padding: 12px 14px; border-radius: var(--r); background: var(--ok-soft); color: var(--ok); }
.note { padding: 12px 16px; border-radius: var(--r); background: var(--surface-2); color: var(--ink-2); font-size: 14px; }
.badge { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 700; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--pill); background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.accent { background: var(--accent-soft); color: var(--accent-strong); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.muted { background: var(--surface-2); color: var(--muted); }
.toast { position: fixed; right: 16px; bottom: 16px; background: var(--ink); color: var(--surface); padding: 12px 18px; border-radius: var(--pill); box-shadow: var(--shadow-pop); font-size: 14px; font-weight: 500; max-width: calc(100vw - 32px); z-index: var(--z-toast); animation: toast-in .22s var(--ease); }
.toast:empty { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 16px; }
td { border-top: 1px solid var(--line); }
th { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface-2); }
/* position: relative supaya teks .sr-only (absolute) di dalam tabel ikut terpotong wadah gulir, tidak melebarkan halaman */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }

/* Isyarat geser: bayangan tipis di tepi yang masih punya isi tersembunyi. Lapisan penutup ikut bergulir
   (local) dan menutup bayangan saat sudah mentok, jadi bayangan hanya muncul kalau memang bisa digeser. */
.table-wrap, .scroll-cue {
  --edge: var(--surface);
  background:
    linear-gradient(to right, var(--edge) 40%, transparent) left center / 36px 100% no-repeat local,
    linear-gradient(to left, var(--edge) 40%, transparent) right center / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left center / 18px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right center / 18px 100% no-repeat scroll,
    var(--edge);
}
.scroll-cue { --edge: var(--bg); }
.act-row { justify-content: flex-end; }

/* Tabel data di dalam .stack-mobile tampil sebagai kartu per baris di ponsel (label dari app-kit.js) */
@media (max-width: 640px) {
  .table-wrap.stack-mobile { overflow: visible; border: 0; border-radius: 0; background: none; }
  .stack-mobile table, .stack-mobile tbody, .stack-mobile tr, .stack-mobile td { display: block; width: auto; }
  .stack-mobile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stack-mobile tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; }
  .stack-mobile tr + tr { margin-top: 10px; }
  .stack-mobile td { border: 0; padding: 4px 0; text-align: left; }
  .stack-mobile td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
  .stack-mobile td:first-child { font-weight: 600; }
  .stack-mobile td:first-child::before, .stack-mobile td[data-label=""]::before { display: none; }
  .stack-mobile td.act { padding-top: 10px; }
  .stack-mobile .act-row { justify-content: flex-start; }
}

/* Baris angka ringkasan: satu panel kaca, dipisah garis tipis (bukan kartu berjejer) */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-radius: var(--r-xl); overflow: hidden; padding: 6px 0; }
.stat-row > div { padding: 14px 22px; display: grid; gap: 4px; min-width: 0; align-content: start; }
.stat-row > div + div { border-left: 1px solid var(--line); }
.stat-row strong { font-size: 26px; font-weight: 620; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-row .wide strong { font-size: 15px; font-weight: 600; letter-spacing: 0; }
@media (max-width: 640px) { .stat-row > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* Header halaman di dalam aplikasi: judul kiri, aksi kanan */
.page-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.page-top h1 { margin: 0 0 6px; }
.page-top p { margin: 0; }

/* Tampilan "akses ditolak" saat role tidak cocok dengan halaman */
.denied { max-width: 520px; margin: 48px auto; text-align: center; display: grid; justify-items: center; gap: 8px; }
.denied .ph { font-size: 40px; color: var(--bad); }
.denied p { color: var(--ink-2); }

/* Modal buatan sendiri (bukan dialog bawaan browser): role="dialog" + aria-modal */
.modal-backdrop { position: fixed; inset: 0; background: rgb(8 10 12 / .55); display: grid; place-items: center; padding: 16px; z-index: var(--z-toast); }
.modal { border-radius: var(--r-xl); box-shadow: var(--shadow-pop); width: min(440px, 100%); padding: 24px; animation: toast-in .18s var(--ease); }
.modal h2 { margin-bottom: 6px; font-size: 18px; }
.modal p { color: var(--ink-2); }
.modal .row { justify-content: flex-end; margin-top: 18px; }
button.danger-solid { background: var(--bad); border-color: var(--bad); color: var(--bg); }
button.danger-solid:hover { background: var(--bad); border-color: var(--bad); filter: brightness(.92); color: var(--bg); }

/* Skeleton berbentuk kartu produk (bukan spinner generik) */
.skeleton { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); padding: 14px; }
.skeleton i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; margin-bottom: 10px; }
.skeleton i:first-child { height: 150px; margin-bottom: 14px; border-radius: var(--r); }
.skeleton i:nth-child(3) { width: 55%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Status server (status nyata dari /api/health, satu-satunya titik warna) */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 12px; border-radius: var(--pill); background: var(--surface-2); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.status.on { background: var(--accent-soft); color: var(--accent-strong); }
.status.on::before { background: var(--ok); }
.status.off { background: var(--bad-soft); color: var(--bad); }
.status.off::before { background: var(--bad); }

@media (max-width: 640px) {
  h1 { font-size: 28px; }
  main.container, .container { padding: 26px 16px 64px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Kit aplikasi (app-kit.js): header + menu profil, paginasi, state, stepper, timeline, alur bisnis
   ===================================================================== */
.app-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.app-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: var(--pill); color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.app-nav a:hover { background: var(--surface-2); color: var(--ink); }
.app-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.app-nav a .ph { font-size: 16px; vertical-align: 0; }
.profile { position: relative; }
.profile-btn { background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 4px 12px 4px 4px; gap: 9px; font-weight: 600; min-height: 42px; }
.profile-btn:hover, .profile-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: .02em; flex: none; }
.profile-btn .ph { font-size: 14px; color: var(--muted); vertical-align: 0; }
.profile-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 16px; z-index: var(--z-pop); }
.pm-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.pm-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.pm-can { margin: 0 0 10px; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 3px; }
.pm-link { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 9px 0; border-top: 1px solid var(--line); text-decoration: none; }
.pm-logout { width: 100%; margin-top: 4px; background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.pm-logout:hover { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-soft); }
@media (max-width: 760px) {
  .app-header .in { flex-wrap: wrap; border-radius: var(--r-xl); padding: 8px; }
  .app-nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
  .app-nav::-webkit-scrollbar { display: none; }
  .profile-btn .pname { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .profile-btn { padding: 4px; border-color: transparent; }
  .profile-menu, .switch-menu { width: min(300px, calc(100vw - 32px)); }
}

/* Daftar dengan pencarian + filter di atasnya */
.list-tools { display: flex; gap: 10px 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.list-tools .field { margin: 0; flex: 1 1 220px; }
.list-tools .field.sm { flex: 0 1 220px; }
.search-wrap { position: relative; }
.search-wrap > .ph { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-wrap input { padding-left: 40px; }

/* Paginasi */
.app-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pager-info { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .app-pager .pager-info { order: -1; flex-basis: 100%; text-align: center; } }

/* Tampilan memuat (baris skeleton), kosong, dan error */
.sk-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.sk-row { display: grid; grid-template-columns: 1.2fr 2fr 1fr; gap: 16px; padding: 16px 18px; background: var(--surface); }
.sk-row i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; }
.state { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 44px 16px; border-radius: var(--r-lg); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.state > .ph { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: var(--accent-strong); background: var(--accent-soft); margin-bottom: 4px; vertical-align: 0; }
.state strong { font-size: 17px; font-weight: 620; color: var(--ink); }
.state p { margin: 0 0 6px; max-width: 48ch; color: var(--muted); font-size: 14px; }
.state.error > .ph { color: var(--bad); background: var(--bad-soft); }

/* Stepper (checkout, booking) */
.stepper { list-style: none; margin: 0 0 24px; padding: 0; display: flex; gap: 10px; counter-reset: step; flex-wrap: wrap; align-items: center; }
.stepper li { counter-increment: step; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); font-weight: 600; padding: 5px 14px 5px 5px; border-radius: var(--pill); border: 1px solid var(--line); }
.stepper li::before { content: counter(step); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.stepper li:not(:last-child)::after { content: none; }
.stepper li[aria-current="step"] { color: var(--accent-strong); background: var(--accent-soft); border-color: transparent; }
.stepper li[aria-current="step"]::before { background: var(--accent); color: var(--on-accent); }
.stepper li.done { color: var(--ink); }
.stepper li.done::before { content: "✓"; background: var(--accent); color: var(--on-accent); }

/* Timeline status (pesanan, janji temu, pinjaman) */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 14px; position: relative; padding-bottom: 16px; }
.timeline li::before { content: ""; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); grid-row: span 2; }
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: 10.5px; top: 26px; bottom: 4px; width: 1px; background: var(--line); }
.timeline li.reached::before { content: "✓"; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.timeline li.cancelled::before { content: "×"; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--bg); background: var(--bad); border-color: var(--bad); }
.timeline .t-title { font-weight: 600; font-size: 14.5px; }
.timeline .t-meta { grid-column: 2; font-size: 13px; color: var(--muted); }
.timeline li:not(.reached):not(.cancelled) .t-title { color: var(--muted); font-weight: 500; }

/* Alur bisnis + peran (halaman login) */
.flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.flow li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.flow li span { padding: 4px 11px; border-radius: var(--pill); background: var(--surface-2); }
.flow li:not(:last-child)::after { content: "›"; color: var(--muted); font-weight: 400; font-size: 16px; line-height: 1; }
.rules-list { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 4px; }

/* Ringkasan detail (definisi berpasangan) */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; margin: 0; }
.kv dt { color: var(--muted); font-size: 14px; }
.kv dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }

/* Input jumlah: tombol − angka + */
.qty-input { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--pill); overflow: hidden; background: var(--surface); }
.qty-input button { min-height: 36px; min-width: 36px; padding: 0; border: 0; border-radius: 0; background: var(--surface); color: var(--ink); }
.qty-input button:hover { background: var(--surface-2); color: var(--ink); }
.qty-input button:disabled { background: var(--surface); opacity: .4; }
.qty-input input { width: 44px; min-height: 36px; border: 0; border-radius: 0; text-align: center; padding: 0; font-family: var(--mono); font-weight: 600; -moz-appearance: textfield; }
.qty-input input:focus { box-shadow: none; }
.qty-input input::-webkit-outer-spin-button, .qty-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Breadcrumb */
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13.5px; color: var(--muted); margin-bottom: 16px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-strong); text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--line-strong); }

/* Tab di dalam halaman aplikasi: grup pil (segmented) */
.app-tabs { display: inline-flex; gap: 2px; padding: 4px; margin-bottom: 20px; border-radius: var(--pill); background: var(--surface-2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.app-tabs [role="tab"] { background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: var(--pill); min-height: 36px; padding: 6px 16px; font-weight: 600; }
.app-tabs [role="tab"]:hover { color: var(--ink); background: transparent; border-color: transparent; }
.app-tabs [role="tab"][aria-selected="true"] { color: var(--ink); background: var(--surface); border-color: var(--line); }

/* Bar bawah di layar sempit (misalnya ringkasan keranjang) */
.bottom-bar { display: none; }
@media (max-width: 960px) {
  .bottom-bar { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: var(--z-sticky); justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: var(--pill); background: linear-gradient(180deg, var(--glass-hi), transparent 45%), var(--glass-fill); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid var(--glass-stroke); box-shadow: var(--shadow-pop); }
  body.has-bottom-bar main.container { padding-bottom: 110px; }
}

/* Warna sintaks untuk potongan kode jawaban (sama dengan tutorial) */
.tok-kw { color: #a01f78; }
.tok-str { color: #1d6a2a; }
.tok-com { color: #5c6371; font-style: italic; }
.tok-num { color: #8a4800; }
.tok-fn { color: #1b58b0; }
.tok-dec { color: #6c3cb0; }
.tok-key { color: #1b58b0; }
@media (prefers-color-scheme: dark) {
  .tok-kw { color: #ff7ab2; } .tok-str { color: #a5e075; } .tok-com { color: #8a93a3; } .tok-num { color: #f8c555; }
  .tok-fn, .tok-key { color: #78c2ff; } .tok-dec { color: #d4a6ff; }
}

/* =====================================================================
   TokoQA: foto produk (assets/products/<id>.webp, sesuai deskripsi produk)
   ===================================================================== */
.p-img { display: block; width: 100%; height: 100%; object-fit: cover; background: #e9ebe6; }
.p-thumb { display: block; flex: none; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #e9ebe6; }
.p-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   KlinikQA (klinik.js): kartu dokter, kalender slot, jam, tiket antrean
   ===================================================================== */
.doctor-cards { border: 0; padding: 0; margin: 0 0 4px; display: grid; gap: 10px; }
.doctor-cards label { margin: 0; display: grid; grid-template-columns: 18px 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; font-weight: 400; transition: border-color .16s var(--ease), background .16s var(--ease); }
.doctor-cards label:hover { border-color: var(--accent); }
.doctor-cards label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.doctor-cards .doc-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); font-size: 21px; }
.doctor-cards label:has(input:checked) .doc-ico { background: var(--accent); color: var(--on-accent); }
.doctor-cards .doc-ico .ph { vertical-align: 0; }
.doctor-cards .doc-main { display: grid; gap: 2px; min-width: 0; }
.doctor-cards .doc-main strong { font-weight: 600; font-size: 15.5px; }
.doctor-cards .doc-main span { color: var(--ink-2); font-size: 13.5px; }
.doctor-cards .doc-main .doc-sched { color: var(--muted); font-size: 13px; }

.cal-months { margin: 0 0 8px; font-weight: 600; font-size: 14.5px; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-head span { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); padding: 2px 0 4px; }
.cal-day { min-height: 54px; padding: 4px 2px; display: grid; align-content: center; justify-items: center; gap: 1px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); font-weight: 600; }
.cal-day:hover:not(:disabled):not([aria-pressed="true"]) { border-color: var(--accent); background: var(--surface); color: var(--ink); }
.cal-day .cal-num { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-day .cal-sub { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.cal-day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cal-day[aria-pressed="true"] .cal-sub { color: var(--on-accent); }
.cal-day:disabled { background: var(--surface-2); border-color: transparent; color: var(--muted); cursor: not-allowed; opacity: 1; }
.cal-day.is-penuh .cal-sub { color: var(--warn); }
.cal-day.is-tutup .cal-sub { color: var(--muted); }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.cal-legend .lg::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--line-strong); }
.cal-legend .tersedia::before { background: var(--surface); border-color: var(--line-strong); }
.cal-legend .penuh::before { background: var(--warn-soft); border-color: var(--warn); }
.cal-legend .tutup::before { background: var(--surface-2); border-color: transparent; }
@media (max-width: 420px) { .cal-day { min-height: 46px; } .cal-day .cal-sub { font-size: 10px; } }

.slot-date { margin: 0 0 10px; font-size: 14.5px; }
.slot-group { border: 0; padding: 0; margin: 0 0 12px; }
.slot-group legend { padding: 0; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slots label { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); cursor: pointer; font-weight: 600; font-family: var(--mono); font-size: 14px; transition: border-color .16s var(--ease), background .16s var(--ease); }
.slots label:hover { border-color: var(--accent); }
.slots label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent); }
.slots label.off { cursor: not-allowed; color: var(--muted); background: var(--surface-2); opacity: .6; }

.queue-ticket { display: grid; justify-items: start; gap: 4px; padding: 18px 22px; border-radius: var(--r-lg); background: var(--accent-soft); color: var(--accent-strong); margin: 16px 0 0; }
.queue-ticket span { font-size: 13px; font-weight: 600; }
.queue-ticket strong { font-family: var(--mono); font-size: 40px; line-height: 1.05; letter-spacing: .04em; }
.queue-card .queue-ticket { margin: 0; }

/* =====================================================================
   PerpusQA (perpus.js): sampul buku dari kategori, pengingat jatuh tempo
   ===================================================================== */
.cover { --cv: #8f4237; --cv2: #6b2e27; position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 6px; aspect-ratio: 2 / 3; width: 100%; padding: 12px 12px 12px 18px; border-radius: 10px; background: linear-gradient(200deg, var(--cv), var(--cv2)); color: #f5f6f3; overflow: hidden; box-shadow: inset 6px 0 0 rgba(0, 0, 0, .18), 0 10px 24px -12px rgba(0, 0, 0, .45); }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .12), transparent 45%); pointer-events: none; }
.cover .cv-cat { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.cover .cv-title { font-size: 15px; font-weight: 700; line-height: 1.2; align-self: center; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cover .cv-author { font-size: 11.5px; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cover.lg { padding: 22px 22px 22px 30px; border-radius: 18px; }
.cover.lg .cv-title { font-size: 26px; letter-spacing: -.02em; }
.cover.lg .cv-author { font-size: 14px; }
.cover.sm { padding: 8px 8px 8px 12px; gap: 4px; box-shadow: inset 4px 0 0 rgba(0, 0, 0, .18); }
.cover.sm .cv-cat { font-size: 7.5px; }
.cover.sm .cv-title { font-size: 11.5px; -webkit-line-clamp: 5; }
.cover.sm .cv-author { font-size: 9px; }
.cover.xs { width: 44px; padding: 4px; gap: 0; border-radius: 6px; box-shadow: inset 3px 0 0 rgba(0, 0, 0, .18); }
.cover.xs > span { display: none; }
.cover-fiksi { --cv: #8f4237; --cv2: #6b2e27; }
.cover-teknologi { --cv: #2d5487; --cv2: #1f3b63; }
.cover-sejarah { --cv: #7f6629; --cv2: #5b471b; }
.cover-sains { --cv: #2e7d70; --cv2: #1e5a52; }
.cover-diri { --cv: #66733a; --cv2: #46512a; }
.cover-bisnis { --cv: #4b5d75; --cv2: #33424f; }

.reminders { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-radius: var(--r-lg); overflow: hidden; }
.reminders li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; font-size: 14px; background: var(--surface-2); color: var(--ink); }
.reminders li + li { border-top: 1px solid var(--line); }
.reminders li .ph { font-size: 18px; margin-top: 1px; flex: none; }
.reminders .rm-bad { background: var(--bad-soft); } .reminders .rm-bad .ph { color: var(--bad); }
.reminders .rm-warn { background: var(--warn-soft); } .reminders .rm-warn .ph { color: var(--warn); }
.reminders .rm-ok { background: var(--ok-soft); } .reminders .rm-ok .ph { color: var(--ok); }

/* =====================================================================
   Kredit dan donasi (footer di semua halaman playground, dipasang pg-nav.js)
   ===================================================================== */
.site-foot { max-width: 1240px; margin: 0 auto; padding: 0 24px 24px; }
.site-foot .foot-in { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 18px 0 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.site-foot .who { display: inline-flex; align-items: center; gap: 10px; }
.site-foot .who .avatar { width: 28px; height: 28px; font-size: 10.5px; }
.site-foot .who a { color: var(--ink); font-weight: 600; }
.site-foot .links { display: inline-flex; align-items: center; gap: 8px; }
.site-foot .ico-link { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; }
.site-foot .ico-link:hover { background: var(--surface-2); color: var(--ink); }
.site-foot .ico-link .ph { vertical-align: 0; font-size: 16px; }
.donate-btn { background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; min-height: 34px; padding: 6px 14px; font-size: 13.5px; }
.donate-btn:hover { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.donate { width: min(400px, 100%); text-align: center; display: grid; justify-items: center; gap: 12px; }
.donate .d-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; }
.donate .d-head h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.donate .d-head h2 .ph { color: var(--accent); }
.donate .d-close { width: 34px; min-height: 34px; padding: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); border-color: transparent; }
.donate .d-close:hover { background: var(--line); color: var(--ink); border-color: transparent; }
.donate .qr { width: 240px; height: 240px; padding: 10px; border-radius: var(--r-lg); background: #fff; }
.donate .qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.donate .who-qr { font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--ink); margin: 0; }
.donate p { font-size: 13.5px; margin: 0; }
.donate .btn { width: 100%; }
.donate .thanks { font-size: 12.5px; color: var(--muted); }

/* =====================================================================
   API Spec dan API Lab (alur.js): warna peran, nomor langkah, sorot peran, ringkasan langkah
   ===================================================================== */
.tone-a { --tone: var(--accent-strong); --tone-soft: var(--accent-soft); }
.tone-b { --tone: var(--info); --tone-soft: var(--info-soft); }
.tone-n { --tone: var(--ink-2); --tone-soft: var(--surface-2); }
.rc { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--pill); background: var(--tone-soft); color: var(--tone); font-size: 12px; font-weight: 600; white-space: nowrap; }
.s-no { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sorot { display: grid; gap: 7px; min-width: 0; }
.sorot-label { font-weight: 600; font-size: 14px; }
.role-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--pill); background: var(--surface-2); max-width: 100%; }
.role-seg button { background: transparent; color: var(--ink-2); border: 1px solid transparent; min-height: 36px; padding: 6px 16px; gap: 6px; }
.role-seg button:hover { background: transparent; color: var(--ink); border-color: transparent; }
.role-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); border-color: var(--line); }
.role-seg button .ph { display: none; font-size: 14px; vertical-align: 0; color: var(--accent-strong); }
.role-seg button[aria-pressed="true"] .ph { display: inline; }
@media (max-width: 960px) { .role-seg { display: flex; } .role-seg button { flex: 1 1 0; min-height: 44px; padding: 6px 10px; } }
.dim-sum { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.dim-sum > .ph { color: var(--muted); font-size: 18px; flex: none; vertical-align: 0; }
.dim-sum .txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.dim-sum strong { font-size: 14px; font-weight: 600; }
.dim-sum .txt span { font-size: 13px; color: var(--muted); }
.dim-sum button { flex: none; }
@media (max-width: 960px) { .dim-sum button { min-height: 44px; } }

/* Sel tabel berisi foto kecil + nama */
.item-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.item-cell .p-thumb { border-radius: 10px; }

/* ---------- Halaman login (TokoQA, KlinikQA, PerpusQA): kartu di tengah, info dilipat di bawahnya ---------- */
.login { max-width: 460px; margin: 0 auto; padding: 48px 16px 72px; display: grid; gap: 16px; }
.login-card { padding: 32px; }
.login-card .logo { margin-bottom: 18px; }
.login-card h1 { font-size: 24px; margin-bottom: 4px; }
.login-card .sub { color: var(--muted); margin-bottom: 24px; }
.login-card .alert { margin-bottom: 14px; }
.login-card .form-foot, .login-card .signup-link { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
#login-form button[type=submit] { width: 100%; min-height: 44px; font-size: 15px; margin-top: 4px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 132px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.pw-toggle:active { transform: translateY(-50%); }
.login-info { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.login-info > summary { display: flex; align-items: center; gap: 8px; padding: 14px 18px; cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; }
.login-info > summary::-webkit-details-marker { display: none; }
.login-info > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.login-info[open] > summary::after { transform: rotate(-135deg); }
.login-info > summary .ph { color: var(--accent); font-size: 18px; }
.login-info-body { padding: 0 18px 18px; }
.login-info .lede { color: var(--ink-2); font-size: 14.5px; margin: 0 0 16px; }
.login-info .demo-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.login-info .demo-title h2 { font-size: 15px; margin: 0; }
.login-info .demo-title .muted { font-size: 13px; }
.login-info .roles { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md, 10px); overflow: hidden; }
.login-info .roles li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 12px 14px; }
.login-info .roles li + li { border-top: 1px solid var(--line); }
.login-info .roles .who { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.login-info .roles code { white-space: nowrap; }
.login-info .roles .goes { grid-column: 1; color: var(--ink-2); font-size: 13.5px; margin: 0; }
.login-info .roles .goes .ph { display: none; }
.login-info .roles button { grid-column: 2; grid-row: 1 / span 2; }
.login-info .business { margin-top: 16px; }
.login-info .business h3 { font-size: 14px; margin: 0 0 8px; }
.login-info .business .flow + h3 { margin-top: 14px; }
.login-info .rules-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; }
.login-info .tech { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); display: flex; gap: 10px; }
.login-info .tech .ph { color: var(--accent); font-size: 18px; margin-top: 1px; flex: none; }
@media (max-width: 480px) { .login { padding-top: 24px; } .login-card { padding: 24px 20px; } }