/* =====================================================================
   QWorks UI — lapisan gaya bersama semua modul
   ---------------------------------------------------------------------
   Kerangka "Korporat tenang": sidebar biru logo, kartu putih bergaris
   tipis, topbar putih. Detail khas "Lembar hitung": kop dokumen
   (.qw-titleblock), batang rasio dengan garis batas 1,00 (.qw-ratio),
   dan jejak perhitungan (.qw-trace). Tema gelap (html[data-theme=dark])
   diatur oleh /qworks-ui.js dan hanya berlaku di layar, tidak di cetak.

   Dimuat SETELAH gaya modul sendiri, jadi aturan di sini menimpa gaya
   lama (tekstur aspal, marka jalan, kartu angka gelap).
   Keluarga modul diatur lewat <html data-qw-family="lab|design">.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Token dari design system QWorks */
  --qw-concrete: #ECEEEC;
  --qw-surface: #FFFFFF;
  --qw-surface-2: #F3F4F6;
  --qw-ink: #101828;
  --qw-ink-2: #364153;
  --qw-ink-muted: #4A5565;
  --qw-line: #D1D5DC;
  --qw-line-subtle: #E5E7EB;
  --qw-brand: #0D192B;          /* navy ring logo Q */
  --qw-brand-strong: #071020;
  --qw-brand-accent: #1D4ED8;   /* biru data, bukan warna logo */
  --qw-brand-tint: #E8EEFB;
  --qw-signal: #FDB503;         /* amber ekor logo Q */
  --qw-logo-amber: #FDB503;     /* ekor logo & pita hazard layar memuat; tidak ikut keluarga modul */
  --qw-signal-hover: #D08700;
  --qw-ok: #007A55; --qw-ok-tint: #ECFDF5;
  --qw-warn: #973C00; --qw-warn-tint: #FFFBEB;
  --qw-bad: #C10007; --qw-bad-tint: #FEF2F2;
  --qw-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --qw-display: "Barlow Semi Condensed", "Barlow", ui-sans-serif, system-ui, sans-serif;

  /* Panel navigasi (sidebar) */
  --qw-rail: #0D192B;
  --qw-rail-raised: rgba(255,255,255,.10);
  --qw-rail-hover: rgba(255,255,255,.07);
  --qw-rail-line: rgba(255,255,255,.10);
  --qw-rail-ink: #FFFFFF;
  --qw-rail-ink-2: #E6EBF4;
  --qw-rail-muted: #AEB8CC;
  --qw-rail-ring: #5E7192;

  /* Warna keluarga modul: Lab = kuning sinyal, Desain = biru */
  --qw-family: #FDB503;
  --qw-family-ink: #030712;
  --qw-family-data: #1D4ED8;      /* seri data, isi batang rasio */
  --qw-family-data-tint: #E8EEFB;
}
html[data-qw-family="design"] {
  --qw-family: #2F6FDB;
  --qw-family-ink: #FFFFFF;
  --qw-family-data: #2F6FDB;
  --qw-family-data-tint: #E3ECFB;
  --qw-family-hover: #2559B8;
  --qw-family-tint: #E3ECFB;
  /* Di atas sidebar biru tua dipakai biru langit (sama dengan kartu modul desain di beranda & Workspace) */
  --qw-family-rail: #38BDF8;
  --qw-family-rail-ink: #030712;
}

/* ---------------------------------------------------------------
   1. Sidebar modul lab & Pavement Design (.rail-asphalt)
   --------------------------------------------------------------- */
.rail-asphalt {
  background-color: var(--qw-rail) !important;
  background-image: none !important;
  color: var(--qw-rail-ink);
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
.rail-asphalt > .lane-stripe,
.sidebar > .lane-stripe {
  height: 6px !important;
  background: repeating-linear-gradient(45deg, var(--qw-signal) 0 10px, #101828 10px 20px) !important;
}
.rail-asphalt .proj-pick, .sidebar .proj-pick { border-bottom-color: var(--qw-rail-line); }
.rail-asphalt .proj-pick label, .sidebar .proj-pick label { color: var(--qw-rail-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.rail-asphalt .proj-pick select, .sidebar .proj-pick select { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.rail-asphalt .proj-pick select:focus, .sidebar .proj-pick select:focus { outline-color: var(--qw-family); }
.rail-asphalt .proj-pick a, .sidebar .proj-pick .pc-ws { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }

.rail-asphalt .nv { color: var(--qw-rail-ink-2); }
.rail-asphalt .nv:hover { background: var(--qw-rail-hover); }
.rail-asphalt .nv:focus-visible { outline-color: var(--qw-family); }
.rail-asphalt .nv[aria-current="page"] { background: var(--qw-rail-raised); color: #FFFFFF; font-weight: 600; }
.rail-asphalt .nv .ic { color: var(--qw-rail-muted); }
.rail-asphalt .nv[aria-current="page"] .ic { color: var(--qw-family); }
.rail-asphalt .nv .cnt { background: rgba(255,255,255,.12); }
.rail-asphalt .road-lbl { color: var(--qw-rail-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Alur langkah: lingkaran bernomor, tanpa marka jalan */
.road::before, .road::after, .steps.road::before, .steps.road::after { display: none !important; animation: none !important; }
.rail-asphalt .st .dot {
  width: 24px; height: 24px; margin-left: 0;
  background: transparent; border: 1.5px solid var(--qw-rail-ring); color: var(--qw-rail-ink-2);
  font: 600 11.5px var(--qw-display);
}
.rail-asphalt .st[data-s="ok"] .dot { border-color: #34D399; }
.rail-asphalt .st[data-s="warn"] .dot { border-color: #FBBF24; }
.rail-asphalt .st[data-s="bad"] .dot { border-color: #F87171; }
.rail-asphalt .st[aria-current="page"] .dot { background: var(--qw-family); border-color: var(--qw-family); color: var(--qw-family-ink); transform: none; }
.rail-asphalt .st[data-s="ok"] .sx { background: #34D399; }
.rail-asphalt .st[data-s="warn"] .sx { background: #FBBF24; }
.rail-asphalt .st[data-s="bad"] .sx { background: #F87171; }
.rail-asphalt .rail-foot { color: var(--qw-rail-muted) !important; border-top-color: var(--qw-rail-line) !important; }
.rail-asphalt .rail-foot b { color: var(--qw-rail-ink-2); }

/* Pindah modul & pengguna */
.rail-mods { border-top-color: var(--qw-rail-line) !important; }
.rail-asphalt .mods a, .sidebar .mods a { color: var(--qw-rail-ink-2); border-color: rgba(255,255,255,.14); }
.rail-asphalt .mods a:hover, .sidebar .mods a:hover { background: var(--qw-rail-hover); color: #FFFFFF; }
.rail-asphalt .mods a:focus-visible, .sidebar .mods a:focus-visible { outline-color: var(--qw-family); }
.rail-asphalt .text-gray-400 { color: var(--qw-rail-muted); }

/* Judul kelompok di daftar "Pindah modul" (diisi oleh qworks-ui.js) */
.qw-mods-h { grid-column: 1 / -1; margin: 8px 2px 2px; font-size: 10.5px; font-weight: 600; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; text-align: left; color: var(--qw-rail-muted); }

/* Lencana nama modul di sidebar */
.qw-modtag {
  display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap;
  border-radius: 6px; padding: 2px 7px 2px 2px; font-size: 11px; font-weight: 700; line-height: 1.3;
  background: rgba(255,255,255,.10); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.qw-modtag .qw-modcode { width: 20px; height: 18px; border-radius: 4px; font-size: 10.5px; }
.qw-modcode {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--qw-family); color: var(--qw-family-ink);
  font: 700 12.5px var(--qw-display); letter-spacing: .02em;
}

/* Topbar putih */
.qw-topbar { background: rgba(255,255,255,.92) !important; border-bottom-color: var(--qw-line-subtle) !important; }

/* ---------------------------------------------------------------
   1b. Sidebar modul desain berbasis variabel (Foundation, Frame)
   --------------------------------------------------------------- */
.sidebar { background-color: var(--qw-rail) !important; background-image: none !important; color: var(--qw-rail-ink-2); scrollbar-color: rgba(255,255,255,.22) transparent; }
.sidebar .brand a:focus-visible, .sidebar .step:focus-visible { outline-color: var(--qw-family); }
.sidebar .tag.mod { background: var(--qw-family); color: var(--qw-family-ink); }
.sidebar .side-sec { color: var(--qw-rail-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sidebar .step { color: var(--qw-rail-ink-2); }
.sidebar .step:hover { background: var(--qw-rail-hover); }
.sidebar .step.on { background: var(--qw-rail-raised); color: #FFFFFF; font-weight: 600; }
.sidebar .step .sn { width: 24px; height: 24px; margin-left: 0; background: transparent; border: 1.5px solid var(--qw-rail-ring); color: var(--qw-rail-ink-2); font: 600 11.5px var(--qw-display); }
.sidebar .step.done .sn { border-color: #34D399; }
.sidebar .step.warn .sn { border-color: #FBBF24; }
.sidebar .step.bad .sn { border-color: #F87171; }
.sidebar .step.on .sn { background: var(--qw-family); border-color: var(--qw-family); color: var(--qw-family-ink); transform: none; }
.sidebar .step .sd { background: #34D399; } .sidebar .step .sd.warn { background: #FBBF24; } .sidebar .step .sd.bad { background: #F87171; }
.sidebar .others .step.on .si { color: var(--qw-family); }
.sidebar .side-foot { color: var(--qw-rail-muted); border-top-color: var(--qw-rail-line); }
.sidebar .user-ini { background: var(--qw-family); color: var(--qw-family-ink); }
.sidebar .proj-card { background: rgba(255,255,255,.08); }
.topbar { background: rgba(255,255,255,.92) !important; border-bottom-color: var(--qw-line-subtle) !important; }
html[data-qw-family="design"] .kicker { color: var(--qw-brand-accent); }
.page-h h1 { font-weight: 600; }

/* ---------------------------------------------------------------
   1c. Keluarga Desain (Pavement, Foundation, Frame, Earth Retaining
       Design): seluruh aksen kuning modul lab diganti biru desain.
       Konten terang: biru #2F6FDB (teks putih). Sidebar biru tua:
       biru langit #38BDF8 (teks gelap). Modul lab tidak berubah.
   --------------------------------------------------------------- */
html[data-qw-family="design"] {
  /* Token Foundation, Frame, Earth Retaining Design */
  --accent: #2F6FDB; --accent-hover: #2559B8; --accent-2: #E3ECFB; --accent-ink: #FFFFFF;
  --qw-signal: #2F6FDB; --qw-signal-hover: #2559B8;
  /* Kelas kuning Tailwind di Pavement Design dipetakan ke skala biru desain */
  --color-yellow-50: #EEF3FD; --color-yellow-100: #DCE7FA; --color-yellow-300: #93B4EE;
  --color-yellow-400: #2559B8; --color-yellow-500: #2F6FDB;
}
html[data-qw-family="design"] :is(.rail-asphalt, .sidebar, aside.rail) {
  --qw-family: var(--qw-family-rail); --qw-family-ink: var(--qw-family-rail-ink);
  --accent: #38BDF8; --accent-hover: #7DD3FC; --accent-ink: #030712;
  --color-yellow-400: #7DD3FC; --color-yellow-500: #38BDF8;
}
/* Garis penanda di puncak sidebar: biru langit/biru tua (lab: kuning/hitam) */
html[data-qw-family="design"] :is(.rail-asphalt, .sidebar) > .lane-stripe,
html[data-qw-family="design"] .lane-stripe {
  background: repeating-linear-gradient(45deg, #38BDF8 0 10px, #0B2A5B 10px 20px) !important;
}
/* Tombol utama */
html[data-qw-family="design"] .btn.primary { background: var(--qw-family); border-color: var(--qw-family); color: var(--qw-family-ink); }
html[data-qw-family="design"] .btn.primary:hover { background: var(--qw-family-hover); border-color: var(--qw-family-hover); }
html[data-qw-family="design"] .tag.mod { background: var(--qw-family-rail); color: var(--qw-family-rail-ink); }
html[data-qw-family="design"] .chip.hi { background: #E3ECFB; color: #1E3A8A; box-shadow: inset 0 0 0 1px rgba(47,111,219,.28); }
html[data-qw-family="design"] .alt[data-on="true"] { box-shadow: 0 0 0 2px var(--qw-family); }
html[data-qw-family="design"] input[type=range] { accent-color: var(--qw-family); }
/* Pavement Design: tombol dan lencana kuning (sekarang biru) memakai teks putih di tema terang */
html[data-qw-family="design"]:not([data-theme="dark"]) :is(.bg-yellow-500, .bg-yellow-400):not(:is(.rail-asphalt, .sidebar) *) { color: #FFFFFF; }
html[data-qw-family="design"]:not([data-theme="dark"]) :is(.bg-yellow-500, .bg-yellow-400):not(:is(.rail-asphalt, .sidebar) *) :is(.text-gray-900, .text-gray-950, svg) { color: #FFFFFF; }
html[data-qw-family="design"] .text-yellow-400 { color: #38BDF8; }

/* ---------------------------------------------------------------
   2. Kartu angka kunci (.sheet) — kartu putih bergaris tipis
   --------------------------------------------------------------- */
.sheet {
  background: var(--qw-surface) !important; color: var(--qw-ink) !important;
  border: 1px solid var(--qw-line-subtle); border-radius: 12px !important;
  padding: 20px 20px 16px !important;
}
.sheet::before { height: 3px !important; background: var(--qw-family) !important; }
.sheet .lbl, .sheet .meta, .sheet dt, .sheet dd.s { color: var(--qw-ink-muted) !important; }
.sheet .big { color: var(--qw-ink) !important; font-size: 52px !important; font-weight: 600 !important; letter-spacing: -.5px !important; }
.sheet .big small { color: var(--qw-ink-muted) !important; font-size: 22px !important; }
.sheet dl { border-top-color: var(--qw-line-subtle) !important; }
.sheet dt, .sheet dd { border-bottom-color: var(--qw-line-subtle) !important; }
.sheet dd { color: var(--qw-ink) !important; }
.sheet .ok { color: var(--qw-ok) !important; }
.sheet .bad { color: var(--qw-bad) !important; }
.sheet .warn { color: var(--qw-warn) !important; }
.sheet .cost b { color: var(--qw-brand-accent) !important; }
.sheet .text-white { color: var(--qw-ink) !important; }
.sheet [class*="text-gray-3"], .sheet [class*="text-gray-4"] { color: var(--qw-ink-muted) !important; }
.sheet [class*="border-white"] { border-color: var(--qw-line-subtle) !important; }
.sheet [class*="bg-white/"] { background-color: var(--qw-surface-2) !important; }
@media (max-width: 640px) { .sheet .big { font-size: 44px !important; } }

/* ---------------------------------------------------------------
   3. Komponen "Lembar hitung"
   --------------------------------------------------------------- */
/* Kop dokumen: identitas yang sama dengan kop PDF laporan */
.qw-titleblock {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1.5px solid var(--qw-ink); background: var(--qw-surface); color: var(--qw-ink);
  margin: 0 0 20px; font-size: 13px; line-height: 1.35;
}
.qw-titleblock > div { padding: 7px 10px; border-right: 1px solid var(--qw-ink); border-bottom: 1px solid var(--qw-ink); margin: 0 -1px -1px 0; min-width: 0; }
.qw-titleblock dt { margin: 0 0 2px; font: 600 10px/1.3 var(--qw-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qw-ink-muted); }
.qw-titleblock dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.qw-titleblock dd.qw-mono, .qw-mono { font-family: var(--qw-mono); font-variant-numeric: tabular-nums; }
.qw-titleblock .qw-tb-wide { grid-column: span 2; }
.qw-titleblock .qw-tb-empty { color: var(--qw-ink-muted); font-weight: 400; }
/* Penanda data contoh di kop (QWUI.titleBlock { sample: true }): sel kecil "Data: Contoh" */
.qw-titleblock .qw-tb-flag { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #FEF3C7; color: #92400E; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* Baris penanda data contoh di kepala dokumen cetak/PDF (QWContoh.docBanner) */
.qw-contoh-doc { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 500 11.5px/1.4 Barlow, ui-sans-serif, system-ui, sans-serif; color: #92400E; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* Badge "Contoh" pada daftar dan kepala layar (QWContoh.badge) */
.qw-contoh { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; background: #FEF3C7; color: #92400E; font: 700 11px/1.5 Barlow, ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
@media (max-width: 760px) { .qw-titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Batang rasio kebutuhan/kapasitas, skala 0–1,20 dengan garis batas 1,00 */
.qw-ratio { display: flex; align-items: center; gap: 10px; min-width: 140px; }
.qw-ratio-track { position: relative; flex: 1; min-width: 70px; height: 10px; background: var(--qw-family-data-tint); border-radius: 2px; }
.qw-ratio-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--qw-family-data); border-radius: 2px 0 0 2px; }
.qw-ratio-limit { position: absolute; left: 83.333%; top: -4px; bottom: -4px; width: 2px; background: var(--qw-bad); }
.qw-ratio-val { font: 600 14px var(--qw-mono); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; color: var(--qw-ink); }
.qw-ratio[data-state="warn"] .qw-ratio-fill { background: #D97706; }
.qw-ratio[data-state="bad"] .qw-ratio-fill { background: var(--qw-bad); border-radius: 2px; }
.qw-ratio[data-state="bad"] .qw-ratio-val { color: var(--qw-bad); }
.qw-ratio[data-state="na"] .qw-ratio-track { background: transparent; border: 1px dashed var(--qw-line); }
.qw-ratio[data-state="na"] .qw-ratio-val { color: var(--qw-ink-muted); font-weight: 400; }
.qw-ratio.is-compact { min-width: 110px; gap: 8px; }
.qw-ratio.is-compact .qw-ratio-track { height: 7px; }
.qw-ratio.is-compact .qw-ratio-val { font-size: 12.5px; }
.qw-ratio-note { margin: 6px 0 0; font: 11px var(--qw-mono); color: var(--qw-ink-muted); }

/* Jejak perhitungan: rumus di kiri, rujukan di margin kanan */
.qw-trace { margin: 0; padding: 0; list-style: none; background: var(--qw-surface); border-top: 1.5px solid var(--qw-ink); border-bottom: 1.5px solid var(--qw-ink); }
.qw-trace > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; padding: 9px 14px; border-bottom: 1px solid var(--qw-line-subtle); }
.qw-trace > li:last-child { border-bottom: 0; }
.qw-trace .qw-eq { font: 13.5px/1.5 var(--qw-mono); font-variant-numeric: tabular-nums; color: var(--qw-ink); overflow-wrap: anywhere; }
.qw-trace .qw-ref { font-size: 12px; color: var(--qw-ink-muted); }
.qw-trace > li.is-final { background: var(--qw-family-data-tint); }
.qw-trace > li.is-final .qw-eq { font-weight: 600; }
.qw-trace .qw-ok { color: var(--qw-ok); font-weight: 600; }
.qw-trace .qw-bad { color: var(--qw-bad); font-weight: 600; }

/* Judul bagian bernomor (01, 02, ...) */
.qw-sec-h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 600 12px var(--qw-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--qw-ink); }
.qw-sec-h > span:first-child { padding: 1px 6px; border: 1.5px solid currentColor; }

/* Sakelar tema */
.qw-theme { display: flex; gap: 2px; padding: 3px; margin: 0 0 8px; border-radius: 9px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.qw-theme button { flex: 1; min-height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--qw-rail-muted); font: 600 12px Barlow, ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.qw-theme button:hover { color: #FFFFFF; }
.qw-theme button[aria-pressed="true"] { background: rgba(255,255,255,.14); color: #FFFFFF; }
.qw-theme button:focus-visible { outline: 2px solid var(--qw-family); outline-offset: 1px; }

/* ---------------------------------------------------------------
   4. Tema gelap (hanya di layar)
   --------------------------------------------------------------- */
@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;
    --qw-concrete: #0B1016;
    --qw-surface: #121A23;
    --qw-surface-2: #17212C;
    --qw-ink: #E6EDF3;
    --qw-ink-2: #C9D3DE;
    --qw-ink-muted: #94A3B8;
    --qw-line: #334155;
    --qw-line-subtle: #1F2A37;
    --qw-brand-accent: #8DB4FF;
    --qw-brand-tint: #17243A;
    --qw-ok: #34D399; --qw-ok-tint: rgba(52,211,153,.12);
    --qw-warn: #FBBF24; --qw-warn-tint: rgba(251,191,36,.12);
    --qw-bad: #F87171; --qw-bad-tint: rgba(248,113,113,.12);
    --qw-rail: #0F151C;
    --qw-rail-line: #1F2A37;
    --qw-family-data: #FBBF24;
    --qw-family-data-tint: #1F2A37;

    /* Palet Tailwind (modul lab & Pavement Design): skala abu dibalik */
    --color-concrete: #0B1016;
    --color-qworks: #9CB8E8;
    --color-gray-50: #151C25;
    --color-gray-100: #1C2530;
    --color-gray-200: #2A3542;
    --color-gray-300: #3A4757;
    --color-gray-400: #64748B;
    --color-gray-500: #8291A3;
    --color-gray-600: #9AA8B8;
    --color-gray-700: #B4C0CE;
    --color-gray-800: #CBD5E1;
    --color-gray-900: #E6EDF3;
    --color-gray-950: #F3F6F9;
    --color-emerald-50: rgba(16,185,129,.12); --color-emerald-100: rgba(16,185,129,.18); --color-emerald-200: rgba(16,185,129,.28);
    --color-emerald-600: #34D399; --color-emerald-700: #6EE7B7; --color-emerald-800: #A7F3D0; --color-emerald-900: #D1FAE5;
    --color-green-50: rgba(34,197,94,.12); --color-green-100: rgba(34,197,94,.18); --color-green-700: #86EFAC; --color-green-800: #BBF7D0;
    --color-amber-50: rgba(245,158,11,.12); --color-amber-100: rgba(245,158,11,.18); --color-amber-200: rgba(245,158,11,.28);
    --color-amber-700: #FCD34D; --color-amber-800: #FDE68A; --color-amber-900: #FEF3C7;
    --color-yellow-50: rgba(234,179,8,.12); --color-yellow-100: rgba(234,179,8,.18);
    --color-red-50: rgba(239,68,68,.12); --color-red-100: rgba(239,68,68,.18); --color-red-200: rgba(239,68,68,.28);
    --color-red-600: #F87171; --color-red-700: #FCA5A5; --color-red-800: #FECACA;
    --color-rose-50: rgba(244,63,94,.12); --color-rose-700: #FDA4AF;
    --color-orange-50: rgba(249,115,22,.12); --color-orange-700: #FDBA74;
    --color-sky-50: rgba(14,165,233,.12); --color-sky-100: rgba(14,165,233,.18); --color-sky-700: #7DD3FC; --color-sky-800: #BAE6FD;
    --color-blue-50: rgba(59,130,246,.12); --color-blue-100: rgba(59,130,246,.18); --color-blue-700: #93C5FD; --color-blue-800: #BFDBFE;
  }
  html[data-theme="dark"][data-qw-family="design"] {
    --qw-family: #38BDF8; --qw-family-ink: #030712; --qw-family-data: #38BDF8;
    --qw-family-hover: #7DD3FC; --qw-family-tint: rgba(56,189,248,.14);
    --accent: #38BDF8; --accent-hover: #7DD3FC; --accent-2: rgba(56,189,248,.14); --accent-ink: #030712;
    --color-yellow-50: rgba(56,189,248,.12); --color-yellow-100: rgba(56,189,248,.18); --color-yellow-300: #7DD3FC;
    --color-yellow-400: #7DD3FC; --color-yellow-500: #38BDF8;
  }
  html[data-theme="dark"][data-qw-family="design"] .chip.hi { background: rgba(56,189,248,.14); color: #7DD3FC; box-shadow: inset 0 0 0 1px rgba(56,189,248,.3); }
  html[data-theme="dark"] body { background-color: var(--qw-concrete); color: var(--qw-ink); }
  html[data-theme="dark"] .bg-white { background-color: var(--qw-surface) !important; }
  html[data-theme="dark"] [class*="bg-white/"]:not(.rail-asphalt *):not(.sheet *) { background-color: rgba(255,255,255,.04) !important; }
  html[data-theme="dark"] .qw-topbar { background: rgba(15,21,28,.92) !important; border-bottom-color: var(--qw-line-subtle) !important; }
  html[data-theme="dark"] .bg-concrete\/85 { background-color: rgba(11,16,22,.88) !important; }
  html[data-theme="dark"] :is(input, select, textarea):not(.rail-asphalt *):not(.sidebar *) { background-color: var(--qw-surface-2); color: var(--qw-ink); border-color: var(--qw-line); }
  html[data-theme="dark"] dialog { background-color: var(--qw-surface) !important; color: var(--qw-ink) !important; }
  html[data-theme="dark"] img[src$="logo-qworks.svg"]:not(.invert):not([class*="invert"]) { content: url("/logo-qworks-white.svg"); }
  html[data-theme="dark"] img[src$="wordmark-qworks.svg"] { content: url("/wordmark-qworks-white.svg"); }

  /* Teks gelap di atas warna terang tetap gelap */
  html[data-theme="dark"] :is(.bg-yellow-400, .bg-yellow-500, .bg-amber-400, .bg-amber-500, .bg-emerald-400, .bg-emerald-500, .bg-sky-300, .bg-sky-400) { color: #030712; }
  html[data-theme="dark"] :is(.bg-yellow-400, .bg-yellow-500, .bg-amber-400, .bg-amber-500, .bg-sky-300, .bg-sky-400) :is(.text-gray-900, .text-gray-950, svg) { color: #030712; }
  html[data-theme="dark"] .bg-gray-900 { background-color: #E6EDF3; color: #0B1016; }
  html[data-theme="dark"] .bg-gray-900 :is(.text-white, .text-gray-100, .text-gray-200, .text-gray-300) { color: #0B1016; }

  /* Sidebar memakai palet aslinya (bukan skala yang dibalik) */
  html[data-theme="dark"] .rail-asphalt, html[data-theme="dark"] .sidebar {
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-gray-950: oklch(13% 0.028 261.692);
    border-right: 1px solid var(--qw-line-subtle);
  }

  /* Kartu angka kunci & komponen */
  html[data-theme="dark"] .qw-titleblock { border-color: #475569; }
  html[data-theme="dark"] .qw-titleblock > div { border-color: #475569; }
  html[data-theme="dark"] .qw-contoh, html[data-theme="dark"] .qw-titleblock .qw-tb-flag { background: #78350F; color: #FDE68A; }
  html[data-theme="dark"] .qw-trace { border-color: #475569; }
  html[data-theme="dark"] .qw-ratio-limit { background: #F87171; }

  /* Modul desain berbasis variabel (Foundation Design, Frame Design) */
  html[data-theme="dark"] {
    --bg: #0B1016; --panel: #121A23; --ink: #E6EDF3; --ink-2: #C9D3DE; --ink-3: #94A3B8; --line: #1F2A37;
    --accent-2: rgba(240,177,0,.14); --teal: #8DB4FF; --teal-2: #17243A;
    --ok: #34D399; --ok-2: rgba(52,211,153,.12); --warn: #FBBF24; --warn-2: rgba(251,191,36,.12); --bad: #F87171; --bad-2: rgba(248,113,113,.12);
    --shadow: none;
    --line-2: #1F2A37; --blue: #8DB4FF; --blue-2: #17243A; --accent-hover: #FACC15;
  }
  html[data-theme="dark"] .topbar { background: rgba(15,21,28,.92) !important; }
  html[data-theme="dark"] :is(.tbl th, .corr-box, .pbg-box, .tpl, .panels > div, .flow-step, .static, .rep-exports button, .seg button:not(.on), .tabs button:not(.on), .btn:not(.primary):not(.dark):not(.danger)) { background-color: var(--qw-surface-2); color: var(--qw-ink); border-color: var(--qw-line); }
  html[data-theme="dark"] .btn:not(.primary):not(.dark):hover, html[data-theme="dark"] .rep-exports button:hover { background-color: #1F2A37; }
  html[data-theme="dark"] .btn.danger { background-color: var(--qw-surface-2); border-color: var(--qw-line); }
  html[data-theme="dark"] .tabs button.on { background-color: var(--qw-ink); color: var(--qw-concrete); border-color: var(--qw-ink); }
  html[data-theme="dark"] .seg button.on { color: #0B1016; }
  html[data-theme="dark"] :is(.tbl td, .kv > div, .rep-secs li, .checks .ck) { border-color: var(--qw-line-subtle); }
  html[data-theme="dark"] .chip { background: rgba(255,255,255,.06); color: var(--qw-ink-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
  html[data-theme="dark"] .chip.hi { background: rgba(240,177,0,.14); color: #FCD34D; box-shadow: inset 0 0 0 1px rgba(240,177,0,.3); }
  html[data-theme="dark"] .chip b { color: var(--qw-ink); }
  html[data-theme="dark"] :is(.callout, .verdict) { border-color: rgba(255,255,255,.10); }
  html[data-theme="dark"] .tbl tr.grp td { background: var(--qw-surface-2); }
  html[data-theme="dark"] .ch-grid { stroke: #1F2A37; }
  html[data-theme="dark"] .ch-frame { stroke: #334155; }
}

/* ---------------------------------------------------------------
   5. Cetak: selalu terang
   --------------------------------------------------------------- */
@media print {
  .qw-theme { display: none !important; }
  .qw-titleblock, .qw-trace { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) {
  .qw-ratio-fill { transition: none; }
}

/* ---------------------------------------------------------------
   6. Uraian perhitungan Frame Design (.calc) bergaya jejak hitung
   --------------------------------------------------------------- */
.calc { background: var(--qw-surface) !important; border: 0 !important; border-top: 1.5px solid var(--qw-ink) !important; border-bottom: 1.5px solid var(--qw-ink) !important; border-radius: 0 !important; padding: 0 !important; font-size: 13.5px; line-height: 1.55; }
.calc > div { padding: 8px 12px; border-bottom: 1px solid var(--qw-line-subtle); font-variant-numeric: tabular-nums; }
.calc > div:last-child { border-bottom: 0; }
.calc b { font-family: var(--qw-mono); font-weight: 600; }
.calc .ref { float: right; margin-left: 16px; color: var(--qw-ink-muted); font-size: 12px; }
@media screen { html[data-theme="dark"] .calc { border-color: #475569 !important; } }

/* ---------------------------------------------------------------
   7. Kertas tetap kertas: pratinjau laporan & formulir tetap terang
      di tema gelap (nilai bawaan Tailwind v4 dan token terang).
   --------------------------------------------------------------- */
@media screen {
  html[data-theme="dark"] :is(.report, .rp-sheet, .ml-lhu, article[aria-label^="Formulir"], .max-w-\[190mm\], .qw-paper) {
    color-scheme: light;
    --qw-surface: #FFFFFF; --qw-surface-2: #F3F4F6; --qw-ink: #101828; --qw-ink-2: #364153; --qw-ink-muted: #4A5565;
    --qw-line: #D1D5DC; --qw-line-subtle: #E5E7EB; --qw-ok: #007A55; --qw-warn: #973C00; --qw-bad: #C10007;
    --bg: #ECEEEC; --panel: #FFFFFF; --ink: #111827; --ink-2: #4B5563; --ink-3: #6B7280; --line: #E3E6E8;
    --ok: #1F8A5B; --ok-2: #E1F3EA; --warn: #B7791F; --warn-2: #FCF1DA; --bad: #C0392B; --bad-2: #FBE3E0; --teal: #1F6F8B; --teal-2: #E3EFF4;
    --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665); --color-gray-950: oklch(13% 0.028 261.692);
    --color-emerald-50: oklch(97.9% 0.021 166.113); --color-emerald-100: oklch(95% 0.052 163.051); --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-700: oklch(50.8% 0.118 165.612); --color-emerald-800: oklch(43.2% 0.095 166.913); --color-emerald-900: oklch(37.8% 0.077 168.94);
    --color-green-50: oklch(98.2% 0.018 155.826); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-700: oklch(52.7% 0.154 150.069); --color-green-800: oklch(44.8% 0.119 151.328);
    --color-amber-50: oklch(98.7% 0.022 95.277); --color-amber-100: oklch(96.2% 0.059 95.617); --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-700: oklch(55.5% 0.163 48.998); --color-amber-800: oklch(47.3% 0.137 46.201); --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-yellow-50: oklch(98.7% 0.026 102.212); --color-yellow-100: oklch(97.3% 0.071 103.193);
    --color-red-50: oklch(97.1% 0.013 17.38); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-600: oklch(57.7% 0.245 27.325); --color-red-700: oklch(50.5% 0.213 27.518); --color-red-800: oklch(44.4% 0.177 26.899);
    --color-rose-50: oklch(96.9% 0.015 12.422); --color-rose-700: oklch(51.4% 0.222 16.935);
    --color-orange-50: oklch(98% 0.016 73.684); --color-orange-700: oklch(55.3% 0.195 38.402);
    --color-sky-50: oklch(97.7% 0.013 236.62); --color-sky-100: oklch(95.1% 0.026 236.824); --color-sky-700: oklch(50% 0.134 242.749); --color-sky-800: oklch(44.3% 0.11 240.79);
    --color-blue-50: oklch(97% 0.014 254.604); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.199 265.638);
    background-color: #FFFFFF; color: #111827;
  }
  html[data-theme="dark"] :is(.report, .rp-sheet, .ml-lhu, article[aria-label^="Formulir"], .max-w-\[190mm\], .qw-paper) img[src$="logo-qworks.svg"] { filter: none; content: normal; }
  html[data-theme="dark"] .rep-preview { background: rgba(255,255,255,.05); }
}

/* ---------------------------------------------------------------
   8. Asphalt Lab (app.qworks.biz.id): kelas khusus aplikasi itu
      (aside.rail, header.top, .mod-badge). Tidak ada di modul lain.
   --------------------------------------------------------------- */
aside.rail { background-color: var(--qw-rail) !important; background-image: none !important; color: var(--qw-rail-ink); scrollbar-color: rgba(255,255,255,.22) transparent; }
aside.rail .lane { height: 6px; background: repeating-linear-gradient(45deg, var(--qw-signal) 0 10px, #101828 10px 20px); }
aside.rail .brand.qw .mod-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 7px 2px 2px; background: rgba(255,255,255,.10); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); border-radius: 6px; }
aside.rail .brand.qw .mod-badge::before { content: "AL"; display: inline-grid; place-items: center; width: 20px; height: 18px; border-radius: 4px; background: var(--qw-family); color: var(--qw-family-ink); font: 700 10.5px var(--qw-display); }
aside.rail .proj-pick { border-bottom-color: var(--qw-rail-line); }
aside.rail .proj-pick label { color: var(--qw-rail-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
aside.rail .proj-pick a { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
aside.rail .nv { color: var(--qw-rail-ink-2); }
aside.rail .nv:hover { background: var(--qw-rail-hover); }
aside.rail .nv[aria-current="page"] { background: var(--qw-rail-raised); color: #FFFFFF; font-weight: 600; }
aside.rail .nv .ic { color: var(--qw-rail-muted); }
aside.rail .nv[aria-current="page"] .ic { color: var(--qw-family); }
aside.rail .road-lbl { color: var(--qw-rail-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
aside.rail .st .dot { width: 24px; height: 24px; margin-left: 0; background: transparent; border: 1.5px solid var(--qw-rail-ring); color: var(--qw-rail-ink-2); font: 600 11.5px var(--qw-display); }
aside.rail .st[data-s="ok"] .dot { border-color: #34D399; }
aside.rail .st[data-s="warn"] .dot { border-color: #FBBF24; }
aside.rail .st[data-s="bad"] .dot { border-color: #F87171; }
aside.rail .st[aria-current="page"] .dot { background: var(--qw-family); border-color: var(--qw-family); color: var(--qw-family-ink); transform: none; }
aside.rail .rail-foot { color: var(--qw-rail-muted); border-top-color: var(--qw-rail-line); }
aside.rail .mods a { color: var(--qw-rail-ink-2); border-color: rgba(255,255,255,.14); }
aside.rail .mods a:hover { background: var(--qw-rail-hover); color: #FFFFFF; }
header.top { background: rgba(255,255,255,.92) !important; border-bottom-color: var(--qw-line-subtle) !important; }
@media screen {
  html[data-theme="dark"] header.top { background: rgba(15,21,28,.92) !important; }
  html[data-theme="dark"] aside.rail { border-right: 1px solid var(--qw-line-subtle); }
}

/* ---------------------------------------------------------------
   9. Grafik SVG modul lab & Pavement Design di tema gelap: warna
      garis/teks yang ditulis langsung di atribut diganti agar
      terbaca. Grafik di dalam kertas laporan tidak diubah.
   --------------------------------------------------------------- */
@media screen {
  html[data-theme="dark"] svg:not(:is(.report, .rp-sheet, .ml-lhu, article[aria-label^="Formulir"], .max-w-\[190mm\], .qw-paper) svg) [stroke="#244477"] { stroke: #8DB4FF; }
  html[data-theme="dark"] svg:not(:is(.report, .rp-sheet, .ml-lhu, article[aria-label^="Formulir"], .max-w-\[190mm\], .qw-paper) svg) [fill="#244477"] { fill: #8DB4FF; }
  html[data-theme="dark"] svg:not(:is(.report, .rp-sheet, .ml-lhu, article[aria-label^="Formulir"], .max-w-\[190mm\], .qw-paper) svg) [stroke="#111827"] { stroke: #E6EDF3; }
  html[data-theme="dark"] svg:not(:is(.report, .rp-sheet, .ml-lhu, article[aria-label^="Formulir"], .max-w-\[190mm\], .qw-paper) svg) [fill="#111827"] { fill: #E6EDF3; }
  html[data-theme="dark"] svg:not(:is(.report, .rp-sheet, .ml-lhu, article[aria-label^="Formulir"], .max-w-\[190mm\], .qw-paper) svg) [fill="#374151"] { fill: #C9D3DE; }
  html[data-theme="dark"] svg:not(:is(.report, .rp-sheet, .ml-lhu, article[aria-label^="Formulir"], .max-w-\[190mm\], .qw-paper) svg) :is([fill="#4B5563"], [fill="#6B7280"]) { fill: #94A3B8; }
  html[data-theme="dark"] svg:not(:is(.report, .rp-sheet, .ml-lhu, article[aria-label^="Formulir"], .max-w-\[190mm\], .qw-paper) svg) [stroke="#6B7280"] { stroke: #94A3B8; }
  html[data-theme="dark"] svg:not(:is(.report, .rp-sheet, .ml-lhu, article[aria-label^="Formulir"], .max-w-\[190mm\], .qw-paper) svg) [stroke="#E5E7EB"] { stroke: #1F2A37; }
  html[data-theme="dark"] svg:not(:is(.report, .rp-sheet, .ml-lhu, article[aria-label^="Formulir"], .max-w-\[190mm\], .qw-paper) svg) [stroke="#D1D5DB"] { stroke: #334155; }
  html[data-theme="dark"] svg:not(:is(.report, .rp-sheet, .ml-lhu, article[aria-label^="Formulir"], .max-w-\[190mm\], .qw-paper) svg) [fill="#F9FAFB"] { fill: #121A23; }
  html[data-theme="dark"] svg:not(:is(.report, .rp-sheet, .ml-lhu, article[aria-label^="Formulir"], .max-w-\[190mm\], .qw-paper) svg) [stroke="#fff"] { stroke: #121A23; }
}

/* ---------------------------------------------------------------
   10. Notifikasi di dalam halaman (QWUI.toast) — pengganti kotak
       alert() peramban. Gelap di kedua tema agar selalu kontras.
   --------------------------------------------------------------- */
.qw-toasts {
  position: fixed; left: 0; right: 0; bottom: 20px; z-index: 2147483000;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 16px; pointer-events: none;
}
.qw-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  max-width: min(520px, 100%); padding: 11px 10px 11px 14px; border-radius: 10px;
  background: #101828; color: #FFFFFF; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px -8px rgba(1, 29, 77, .45);
  font: 500 14px/1.45 "Inter", ui-sans-serif, system-ui, sans-serif;
  animation: qw-toast-in .18s ease-out;
}
.qw-toast.is-out { opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
.qw-toast-i {
  flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 999px; font: 700 12px/1 var(--qw-mono); color: #101828; background: #F0B100;
}
.qw-toast.is-ok .qw-toast-i { background: #34D399; }
.qw-toast.is-warn .qw-toast-i { background: #FBBF24; }
.qw-toast.is-err { border-color: rgba(248, 113, 113, .45); }
.qw-toast.is-err .qw-toast-i { background: #F87171; }
.qw-toast-m { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.qw-toast-x {
  flex: none; margin: -2px 0 0 4px; width: 26px; height: 26px; border: 0; border-radius: 6px;
  background: transparent; color: #AEB8CC; font: 400 18px/1 system-ui, sans-serif; cursor: pointer;
}
.qw-toast-x:hover { background: rgba(255,255,255,.08); color: #FFFFFF; }
.qw-toast-x:focus-visible { outline: 2px solid #F0B100; outline-offset: 1px; }
html[data-theme="dark"] .qw-toast { background: #1B2533; border-color: #334155; }
@keyframes qw-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qw-toast { animation: none; } .qw-toast.is-out { transition: none; } }
@media print { .qw-toasts { display: none !important; } }

/* ---------------------------------------------------------------
   11. Dialog di dalam halaman (QWUI.confirm / QWUI.prompt) —
       pengganti confirm() dan prompt() peramban.
   --------------------------------------------------------------- */
dialog.qw-dialog {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 0;
  border: 1px solid var(--qw-line); border-radius: 12px; background: var(--qw-surface); color: var(--qw-ink);
  box-shadow: 0 24px 60px -12px rgba(1, 29, 77, .40); overflow: auto;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}
dialog.qw-dialog::backdrop { background: rgba(3, 7, 18, .55); }
dialog.qw-dialog[open] { animation: qw-dialog-in .16s ease-out; }
.qw-dialog-f { margin: 0; padding: 22px 22px 18px; border-top: 4px solid var(--qw-brand); }
.qw-dialog.is-danger .qw-dialog-f { border-top-color: var(--qw-bad); }
.qw-dialog-t { margin: 0 0 8px; font-size: 18px; line-height: 1.3; font-weight: 650; color: var(--qw-ink); letter-spacing: -.01em; }
.qw-dialog-m { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--qw-ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.qw-dialog-m b, .qw-dialog-m strong { color: var(--qw-ink); font-weight: 600; }
.qw-dialog-l { display: block; margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--qw-ink-2); }
.qw-dialog-l span { font-weight: 400; color: var(--qw-ink-muted); }
.qw-dialog-in {
  display: block; box-sizing: border-box; width: 100%; padding: 9px 11px; border: 1px solid var(--qw-line); border-radius: 8px;
  background: var(--qw-surface); color: var(--qw-ink); font-family: inherit; font-size: 14.5px; font-weight: 400; line-height: 1.45; resize: vertical;
}
.qw-dialog-in:focus { outline: 2px solid var(--qw-brand-accent); outline-offset: 1px; border-color: var(--qw-brand-accent); }
.qw-dialog-in[aria-invalid="true"] { border-color: var(--qw-bad); }
.qw-dialog-err { margin: 6px 0 0; font-size: 13px; color: var(--qw-bad); }
.qw-dialog-a { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.qw-dialog-b {
  min-height: 38px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--qw-line); background: var(--qw-surface);
  color: var(--qw-ink); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer;
}
.qw-dialog-b:hover { background: var(--qw-surface-2); }
.qw-dialog-b:focus-visible { outline: 2px solid var(--qw-brand-accent); outline-offset: 2px; }
.qw-dialog-b.is-main { background: var(--qw-brand); border-color: var(--qw-brand); color: #FFFFFF; }
.qw-dialog-b.is-main:hover { background: var(--qw-brand-strong); }
.qw-dialog.is-danger .qw-dialog-b.is-main { background: var(--qw-bad); border-color: var(--qw-bad); }
.qw-dialog.is-danger .qw-dialog-b.is-main:hover { background: #9F0712; }
@media (max-width: 480px) { .qw-dialog-a { flex-direction: column-reverse; } .qw-dialog-b { width: 100%; } }
html[data-theme="dark"] dialog.qw-dialog { background: #121A23; border-color: #263241; color: #E6EDF3; }
html[data-theme="dark"] .qw-dialog-f { border-top-color: #4C86E8; }
html[data-theme="dark"] .qw-dialog.is-danger .qw-dialog-f { border-top-color: #F87171; }
html[data-theme="dark"] .qw-dialog-t, html[data-theme="dark"] .qw-dialog-m b { color: #E6EDF3; }
html[data-theme="dark"] .qw-dialog-m, html[data-theme="dark"] .qw-dialog-l { color: #C9D3DE; }
html[data-theme="dark"] .qw-dialog-in { background: #0B1118; border-color: #334155; color: #E6EDF3; }
html[data-theme="dark"] .qw-dialog-b { background: #1B2533; border-color: #334155; color: #E6EDF3; }
html[data-theme="dark"] .qw-dialog-b:hover { background: #243042; }
html[data-theme="dark"] .qw-dialog-b.is-main { background: #2F6FDB; border-color: #2F6FDB; }
html[data-theme="dark"] .qw-dialog.is-danger .qw-dialog-b.is-main { background: #DC2626; border-color: #DC2626; }
@keyframes qw-dialog-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.qw-dialog[open] { animation: none; } }
@media print { dialog.qw-dialog { display: none !important; } }

/* ---------------------------------------------------------------
   7. Logo Q dua varian
   Logo baru: ring navy + ekor amber. Di panel gelap ring navy
   tenggelam, jadi dipakai varian reverse (ring putih, ekor amber)
   lewat penggantian gambar, BUKAN filter putih seperti dulu.
   --------------------------------------------------------------- */
:is(.rail-asphalt, aside.rail, aside.sidebar, .side-brand, .kf-side-brand, .brand.qw, .bg-gray-900) img[src$="logo-qworks.svg"],
img[src$="logo-qworks.svg"]:is(.invert, [class*="invert"]) {
  content: url("/logo-qworks-white.svg");
  filter: none !important;
}

/* ---------------------------------------------------------------
   8. Layar memuat: lihat /qworks-loading.css (dimuat terpisah di
   setiap halaman agar tidak bergantung file ini).
   --------------------------------------------------------------- */