/* Hallmark · genre: modern-minimal · macrostructure: Workbench (app) · design-system: DESIGN.md · designed-as-app
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V n/a (app: konsistensi) · slop test lulus · contrast: pass (40-41)
 * taste-skill · redesign overhaul · VARIANCE 3 · MOTION 3 · DENSITY 7
 * Kokpit Cockpit v2 (26/09/2026) · penanda UI Guard: jangan dihapus
 */

/* ============================================================
   1. Token
   ============================================================ */
:root {
  color-scheme: light;
  --paper:      oklch(97.8% 0.006 240);
  --surface:    oklch(99.6% 0.002 240);
  --surface-2:  oklch(96.6% 0.007 240);
  --surface-3:  oklch(94% 0.009 240);
  --rule:       oklch(91.5% 0.010 240);
  --rule-2:     oklch(86% 0.012 240);
  --field-line: oklch(66% 0.016 245);
  --ink:        oklch(23% 0.03 255);
  --ink-2:      oklch(40% 0.025 252);
  --muted:      oklch(53% 0.02 250);

  --accent:      oklch(49% 0.11 243);
  --accent-soft: oklch(95.5% 0.022 238);
  --accent-ink:  oklch(99% 0.003 240);
  --accent-mark: oklch(64% 0.13 232);   /* batang grafik (grafis, bukan teks) */
  --accent-dim:  oklch(66% 0.05 242);   /* batang grafik minggu lalu (≥3:1) */
  --focus:       oklch(55% 0.13 243);

  --good:      oklch(52% 0.12 158);
  --good-soft: oklch(95.5% 0.035 158);
  --warn:      oklch(51% 0.11 65);
  --warn-soft: oklch(96.4% 0.03 85);
  --warn-lamp: oklch(75% 0.15 75);
  --bad:       oklch(53% 0.17 25);
  --bad-soft:  oklch(96.3% 0.018 25);

  --scrim: oklch(20% 0.03 255 / 0.36);
  --shadow-float: 0 18px 40px -16px oklch(22% 0.04 255 / 0.28), 0 2px 8px oklch(22% 0.04 255 / 0.08);
  --shadow-tab: 0 -8px 24px -18px oklch(22% 0.04 255 / 0.35);
  --lamp-glow: none;
  --shadow-hair: 0 1px 2px oklch(20% 0.02 255 / 0.07);
  --mark-ink-light: oklch(99% 0.003 240);
  --mark-ink-dark: oklch(22% 0.03 255);

  --font-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-micro: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-kpi: clamp(1.375rem, 1.05rem + 0.8vw, 1.75rem);

  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  --radius-control: 8px;
  --control-h: 38px;
  --radius-panel: 12px;
  --radius-badge: 6px;
  --radius-sheet: 18px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 360ms;

  --z-sticky: 200;
  --z-tabbar: 250;
  --z-dropdown: 300;
  --z-modal: 400;
  --z-toast: 500;

  --sidebar-w: 256px;
  --appbar-h: 56px;
  --tabbar-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* mode gelap "kokpit": elevasi = lebih terang, bukan bayangan */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:      oklch(16% 0.02 255);
  --surface:    oklch(19.5% 0.022 255);
  --surface-2:  oklch(23% 0.024 255);
  --surface-3:  oklch(26.5% 0.026 255);
  --rule:       oklch(29.5% 0.024 255);
  --rule-2:     oklch(36% 0.026 255);
  --field-line: oklch(50% 0.024 250);
  --ink:        oklch(94.5% 0.008 240);
  --ink-2:      oklch(82% 0.014 245);
  --muted:      oklch(68% 0.018 248);
  --accent:      oklch(74% 0.12 230);
  --accent-soft: oklch(28% 0.05 240);
  --accent-ink:  oklch(18% 0.03 250);
  --accent-mark: oklch(72% 0.12 230);
  --accent-dim:  oklch(50% 0.055 240);
  --focus:       oklch(76% 0.13 230);
  --good:      oklch(76% 0.13 158);
  --good-soft: oklch(27% 0.045 160);
  --warn:      oklch(81% 0.12 80);
  --warn-soft: oklch(29% 0.05 75);
  --warn-lamp: oklch(80% 0.14 78);
  --bad:       oklch(72% 0.15 25);
  --bad-soft:  oklch(28% 0.06 25);
  --scrim: oklch(8% 0.02 255 / 0.6);
  --shadow-float: 0 20px 48px -16px oklch(4% 0.02 255 / 0.7), 0 0 0 1px oklch(34% 0.026 255);
  --shadow-tab: 0 -1px 0 oklch(29.5% 0.024 255);
  --lamp-glow: 0 0 0 3px oklch(80% 0.14 78 / 0.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:      oklch(16% 0.02 255);
    --surface:    oklch(19.5% 0.022 255);
    --surface-2:  oklch(23% 0.024 255);
    --surface-3:  oklch(26.5% 0.026 255);
    --rule:       oklch(29.5% 0.024 255);
    --rule-2:     oklch(36% 0.026 255);
    --field-line: oklch(50% 0.024 250);
    --ink:        oklch(94.5% 0.008 240);
    --ink-2:      oklch(82% 0.014 245);
    --muted:      oklch(68% 0.018 248);
    --accent:      oklch(74% 0.12 230);
    --accent-soft: oklch(28% 0.05 240);
    --accent-ink:  oklch(18% 0.03 250);
    --accent-mark: oklch(72% 0.12 230);
    --accent-dim:  oklch(50% 0.055 240);
    --focus:       oklch(76% 0.13 230);
    --good:      oklch(76% 0.13 158);
    --good-soft: oklch(27% 0.045 160);
    --warn:      oklch(81% 0.12 80);
    --warn-soft: oklch(29% 0.05 75);
    --warn-lamp: oklch(80% 0.14 78);
    --bad:       oklch(72% 0.15 25);
    --bad-soft:  oklch(28% 0.06 25);
    --scrim: oklch(8% 0.02 255 / 0.6);
    --shadow-float: 0 20px 48px -16px oklch(4% 0.02 255 / 0.7), 0 0 0 1px oklch(34% 0.026 255);
    --shadow-tab: 0 -1px 0 oklch(29.5% 0.024 255);
    --lamp-glow: 0 0 0 3px oklch(80% 0.14 78 / 0.16);
  }
}

/* aksen per bisnis (Kubah = default di atas) */
:root[data-biz="dlta"] { --accent: oklch(52% 0.13 236); --accent-soft: oklch(95.5% 0.03 232); --accent-mark: oklch(66% 0.14 234); }
:root[data-biz="dlta"][data-theme="dark"] { --accent: oklch(76% 0.13 232); --accent-soft: oklch(29% 0.055 236); --accent-mark: oklch(74% 0.13 232); }
@media (prefers-color-scheme: dark) {
  :root[data-biz="dlta"]:not([data-theme="light"]) { --accent: oklch(76% 0.13 232); --accent-soft: oklch(29% 0.055 236); --accent-mark: oklch(74% 0.13 232); }
}

/* ============================================================
   2. Dasar
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11" 1;
}
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: color-mix(in oklch, var(--accent) 24%, transparent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; text-wrap: balance; }
p { text-wrap: pretty; }
kbd {
  font-family: var(--font-mono); font-size: var(--text-micro); font-weight: 500;
  padding: 1px 8px; border: 1px solid var(--rule-2); border-bottom-width: 2px;
  border-radius: 5px; color: var(--muted); background: var(--surface);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

.hidden { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-feature-settings: normal; }
.num { font-variant-numeric: tabular-nums; }
.small { font-size: var(--text-xs); }
.skip-link {
  position: fixed; left: var(--space-sm); top: var(--space-sm); z-index: var(--z-toast);
  padding: 8px 12px; border-radius: var(--radius-control);
  background: var(--ink); color: var(--paper); transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-sm { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   3. Kontrol
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: var(--control-h); padding: 0 16px; white-space: nowrap;
  border: 1px solid var(--rule-2); border-radius: var(--radius-control);
  background: var(--surface); color: var(--ink);
  font-size: var(--text-base); font-weight: 500;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { background: color-mix(in oklch, var(--accent) 88%, var(--ink)); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.danger { color: var(--bad); }
.btn.block { width: 100%; }
.btn.sm { min-height: 30px; padding: 0 12px; font-size: var(--text-sm); }
.btn.icon { width: var(--control-h); padding: 0; }
.btn.is-busy .icon { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-badge);
  font-size: var(--text-xs); font-weight: 500; line-height: 1.45; white-space: nowrap;
  color: var(--ink-2); background: var(--surface-3);
}
.badge.good { color: var(--good); background: var(--good-soft); }
.badge.warn { color: var(--warn); background: var(--warn-soft); }
.badge.bad  { color: var(--bad);  background: var(--bad-soft); }
.badge.accent { color: var(--accent); background: var(--accent-soft); }
.badge .icon-sm { width: 13px; height: 13px; }

.code {
  display: inline-block; font-family: var(--font-mono); font-size: 0.92em; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink-2); white-space: nowrap;
  padding: 0 4px; margin-right: 8px; border-radius: 5px;
  background: var(--surface-3); vertical-align: 0.05em;
}
.count {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 8px;
  border-radius: var(--radius-badge); background: var(--surface-3);
  font-family: var(--font-mono); font-size: var(--text-micro); font-weight: 500; color: var(--ink-2);
}
.lamp {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--warn-lamp); box-shadow: var(--lamp-glow);
}
.lamp.good { background: var(--good); box-shadow: none; }
.lamp.bad { background: var(--bad); }

/* formulir: label di atas input */
.field { display: grid; gap: 8px; min-width: 0; }
.field-label { font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); }
.field-hint { font-size: var(--text-xs); color: var(--muted); }
.field input, .field select, .field textarea, .input {
  width: 100%; min-height: var(--control-h); padding: 8px 12px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--field-line); border-radius: var(--radius-control);
  font-size: var(--text-base);
  outline: 2px solid transparent; outline-offset: 1px;
}
.field input:hover, .field select:hover, .input:hover { border-color: var(--ink-2); }
.field input:disabled, .field select:disabled { opacity: .55; cursor: not-allowed; }
.field select { padding-right: 32px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field input::placeholder, .input::placeholder { color: var(--muted); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.form-grid {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  align-items: end;
}
.form-grid .span-2 { grid-column: span 2; }
.form-actions { display: flex; gap: var(--space-xs); align-items: end; }
.form-error {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 12px; border-radius: var(--radius-control);
  background: var(--bad-soft); color: var(--bad); font-size: var(--text-sm);
}

.segmented {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius-control);
}
.segmented button {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  min-height: 30px; padding: 0 12px; border-radius: 6px;
  font-size: var(--text-sm); font-weight: 500; color: var(--muted);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), var(--shadow-hair); }
.segmented button .count { background: transparent; min-width: 0; padding: 0; height: auto; }
.theme-seg { width: 100%; }
.theme-seg button { flex: 1; justify-content: center; padding: 0 8px; }

.switch {
  position: relative; width: 38px; height: 22px; flex: 0 0 auto; border-radius: 22px;
  background: var(--rule-2); transition: background-color var(--dur-short) var(--ease-out);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-hair), 0 0 0 1px var(--rule);
  transition: transform var(--dur-short) var(--ease-out);
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }

.search {
  display: flex; align-items: center; gap: 8px; min-height: var(--control-h); padding: 0 12px;
  border: 1px solid var(--field-line); border-radius: var(--radius-control); background: var(--surface);
  color: var(--muted);
}
.search:focus-within { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: var(--text-base); color: var(--ink); }
.search input::placeholder { color: var(--muted); }

/* ============================================================
   4. Shell aplikasi
   ============================================================ */
#app { min-height: 100dvh; }

#sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: var(--z-sticky);
  display: flex; flex-direction: column; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-sm) var(--space-sm);
  background: var(--surface); border-right: 1px solid var(--rule);
}
#main { min-width: 0; margin-left: var(--sidebar-w); }

#biz-switcher { position: relative; }
#biz-current {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px; border-radius: var(--radius-control); text-align: left;
  transition: background-color var(--dur-micro) var(--ease-out);
}
#biz-current:hover, #biz-current[aria-expanded="true"] { background: var(--surface-2); }
.biz-logo {
  display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px;
  border-radius: 9px; background: var(--accent-soft); overflow: hidden;
  font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.02em; color: var(--accent);
}
.biz-logo img { width: 30px; height: auto; }
.biz-logo.mono-mark { background: var(--mark-bg, var(--accent)); color: var(--mark-ink-light); }
.biz-logo.mono-mark.on-light { color: var(--mark-ink-dark); }
.biz-text { display: grid; min-width: 0; flex: 1; }
#biz-name { font-weight: 600; font-size: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biz-sub { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#biz-current .chev { color: var(--muted); }

.menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: var(--z-dropdown);
  padding: 4px; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-panel); box-shadow: var(--shadow-float);
  transform-origin: top center;
}
.menu.is-opening { animation: pop-in var(--dur-short) var(--ease-out); }
.menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 8px; border-radius: 7px; text-align: left; font-size: var(--text-base);
}
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); }
.menu-item .biz-logo { width: 28px; height: 28px; border-radius: 7px; }
.menu-item .biz-logo img { width: 24px; }
.menu-item .menu-meta { display: grid; flex: 1; min-width: 0; }
.menu-item .menu-meta small { color: var(--muted); font-size: var(--text-xs); }
.menu-item .check { color: var(--accent); }

.search-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--surface-2);
  color: var(--muted); font-size: var(--text-sm); text-align: left;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.search-trigger span { flex: 1; }
.search-trigger:hover { border-color: var(--rule-2); color: var(--ink-2); }

#module-nav { flex: 1; overflow-y: auto; margin: 2px calc(var(--space-sm) * -1) 0; padding: 4px var(--space-sm) var(--space-sm); scrollbar-width: thin; }
.nav-group + .nav-group { margin-top: var(--space-md); }
.nav-group-label {
  padding: 0 12px 4px; font-size: var(--text-xs); font-weight: 500; color: var(--muted);
}
.nav-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px;
  padding: 0 12px; border-radius: var(--radius-control);
  color: var(--ink-2); font-size: var(--text-base); font-weight: 500; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.nav-item > span { overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item .icon { color: var(--muted); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item.active .icon { color: var(--accent); }

#sidebar-footer { display: grid; gap: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--rule); }
#user-box { display: flex; align-items: center; gap: 8px; padding: 4px 2px 0 4px; }
.avatar {
  display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  background: var(--surface-3); color: var(--ink-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em;
}
.user-meta { flex: 1; min-width: 0; }
.user-name { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-md);
  min-height: 68px; padding: 12px var(--space-xl) 12px var(--space-lg);
  background: color-mix(in oklch, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.appbar-biz { display: none; }
#view-title .t-short { display: none; }
#view-title .t-short, #view-title .t-full { overflow: hidden; text-overflow: ellipsis; }
.topbar-title { flex: 1; min-width: 0; }
#view-title { font-size: var(--text-xl); font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-desc { font-size: var(--text-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { display: flex; align-items: center; gap: var(--space-xs); flex: 0 0 auto; }
.status-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 280px;
  padding: 0 12px; min-height: 30px; border-radius: var(--radius-control);
  border: 1px solid var(--rule); background: var(--surface);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.status-chip .lamp { width: 6px; height: 6px; }
.status-chip.stale { color: var(--warn); border-color: color-mix(in oklch, var(--warn) 30%, var(--rule)); background: var(--warn-soft); }

#view { padding: var(--space-lg) var(--space-xl) var(--space-2xl) var(--space-lg); max-width: 1480px; outline: none; }
#view > * + * { margin-top: var(--space-md); }
#view.is-enter > * { animation: view-in var(--dur-short) var(--ease-out) both; }
#view.is-refreshing { opacity: .55; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

#tabbar { display: none; }

/* ============================================================
   5. Blok data
   ============================================================ */
.panel {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel);
  min-width: 0;
}
.panel-head {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 16px var(--space-md) 12px;
}
.panel-head > .icon { margin-top: 1px; color: var(--muted); }
.panel-head.tone-warn > .icon { color: var(--warn); }
.panel-head.tone-good > .icon { color: var(--good); }
.panel-titles { flex: 1; min-width: 0; }
.panel-title { display: flex; align-items: center; gap: 8px; font-size: var(--text-md); font-weight: 600; }
.panel-sub { margin-top: 2px; font-size: var(--text-sm); color: var(--muted); }
.panel-actions { display: flex; gap: var(--space-xs); align-items: center; flex: 0 0 auto; }
.panel-body { padding: 0 var(--space-md) var(--space-md); }
.panel-body.flush { padding: 0; }
.panel-body > * + * { margin-top: var(--space-sm); }
.panel-foot { padding: 12px var(--space-md); border-top: 1px solid var(--rule); font-size: var(--text-xs); color: var(--muted); }

.grid-2 { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) {
  .grid-2 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .grid-2.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* kluster KPI: satu panel, garis rambut di antara sel */
.kpis {
  --cols: 4;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel);
  overflow: hidden;
}
.kpi {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 16px var(--space-md) 16px;
  box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule);
  color: inherit;
}
a.kpi { text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
a.kpi:hover { background: var(--surface-2); text-decoration: none; }
a.kpi:hover .kpi-src { color: var(--accent); }
.kpi-top { display: flex; align-items: flex-start; gap: 8px; min-height: 20px; }
.kpi-label { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); line-height: 1.35; }
.kpi-label .lamp { margin: 0 0 1px 8px; vertical-align: middle; }
.kpi-src { color: var(--muted); transition: color var(--dur-micro) var(--ease-out); }
.kpi-src .icon { width: 16px; height: 16px; }
.kpi-value {
  font-size: var(--text-kpi); font-weight: 650; letter-spacing: -0.025em; line-height: 1.15;
  color: var(--ink); overflow-wrap: anywhere; margin-top: 4px;
}
.kpi-sub { font-size: var(--text-xs); color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kpi.is-stale .kpi-value { color: var(--muted); }
.kpi-flag { align-self: flex-start; margin-top: 4px; }
.kpis .kpi:last-child:nth-child(odd) { grid-column: span 2; }
@media (min-width: 640px) {
  .kpis { grid-template-columns: repeat(var(--cols-md, 3), minmax(0, 1fr)); }
  .kpis .kpi:last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 1100px) {
  .kpis { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
}

/* daftar */
.rows { list-style: none; }
.row {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  padding: 12px var(--space-md); border-top: 1px solid var(--rule);
}
.rows.inset .row { padding-left: 0; padding-right: 0; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: var(--text-base); font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.row-sub { margin-top: 2px; font-size: var(--text-sm); color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.row > .badge { margin-top: 1px; flex: 0 0 auto; }
.row > .icon { margin-top: 2px; color: var(--muted); }
a.row { color: inherit; text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
a.row:hover { background: var(--surface-2); text-decoration: none; }
a.row .go { color: var(--muted); align-self: center; }
.rows.is-collapsed > li:nth-child(n+6) { display: none; }
.more-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 40px; border-top: 1px solid var(--rule);
  font-size: var(--text-sm); font-weight: 500; color: var(--accent);
}
.more-btn:hover { background: var(--surface-2); }
.more-btn .icon { transition: transform var(--dur-short) var(--ease-out); }
.more-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* tabel */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
  padding: 8px var(--space-md); text-align: left; white-space: nowrap;
  font-size: var(--text-xs); font-weight: 500; color: var(--muted);
  background: var(--surface-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.table td { padding: 8px var(--space-md); border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in oklch, var(--surface-2) 70%, transparent); }
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td .badge + .badge, .table td .badge + small { margin-left: 4px; }
.table small { font-size: var(--text-xs); color: var(--muted); }

/* papan kanban */
.board-nav { display: flex; gap: 8px; overflow-x: auto; padding: 0 var(--space-md) var(--space-sm); scrollbar-width: none; }
.board-nav::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; white-space: nowrap;
  min-height: 30px; padding: 0 12px; border-radius: var(--radius-control);
  border: 1px solid var(--rule); background: var(--surface);
  font-size: var(--text-sm); font-weight: 500; color: var(--ink-2);
}
.chip:hover { border-color: var(--rule-2); color: var(--ink); }
.chip .count { height: 18px; min-width: 18px; background: var(--surface-3); }
.chip.is-empty { color: var(--muted); }
.board {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr);
  gap: var(--space-sm); overflow-x: auto; padding: 0 var(--space-md) var(--space-md);
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-md); overscroll-behavior-x: contain;
}
.board-col {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; scroll-snap-align: start;
  padding: 12px; border-radius: var(--radius-panel);
  background: var(--surface-2); border: 1px solid var(--rule);
}
.board-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 4px; }
.board-col-head .icon { width: 16px; height: 16px; color: var(--muted); }
.board-col-head h3 { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-col-head .count { background: var(--surface); }
button.board-col-head { width: 100%; text-align: left; border-radius: 6px; }
button.board-col-head:hover { background: var(--surface-3); }
.board-col-head.over { color: var(--warn); }
.bcard {
  padding: 12px 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--rule);
  box-shadow: var(--shadow-hair);
}
.bcard-title { font-size: var(--text-sm); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.bcard-sub { margin-top: 4px; font-size: var(--text-xs); color: var(--muted); line-height: 1.45; }
.bcard-note { margin-top: 4px; font-size: var(--text-xs); color: var(--ink-2); line-height: 1.5; }
.bcard-warn { display: flex; gap: 4px; margin-top: 8px; font-size: var(--text-xs); color: var(--warn); line-height: 1.45; font-weight: 500; }
.bcard-warn .icon-sm { margin-top: 1px; }
.bcard .badge { margin-top: 8px; }
.board-empty { padding: 16px 0; text-align: center; font-size: var(--text-xs); color: var(--muted); }
.board-foot { font-size: var(--text-xs); color: var(--muted); padding: 2px; display: flex; gap: 4px; align-items: center; }

/* bar horizontal (tanpa trek) */
.hbars { display: grid; gap: 8px; padding: 2px var(--space-md) var(--space-md); }
.hbar { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); gap: 4px var(--space-sm); align-items: center; font-size: var(--text-sm); }
.hbar-label { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hbar-fill { height: 10px; min-width: 3px; flex: 0 0 calc(var(--w, 0) * (100% - 76px)); border-radius: 0 4px 4px 0; background: var(--accent-mark); }
.hbar-val { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-2); white-space: nowrap; }

/* tautan sumber */
.links { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.links a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--surface);
  font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.links a:hover { border-color: var(--rule-2); color: var(--accent); text-decoration: none; }
.links a .icon-sm { color: var(--muted); }
.links-label { width: 100%; font-size: var(--text-xs); color: var(--muted); }

/* pemberitahuan & keadaan kosong */
.notice {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 12px 16px; border-radius: var(--radius-panel);
  border: 1px solid var(--rule); background: var(--surface); font-size: var(--text-sm); color: var(--ink-2);
}
.notice > .icon { margin-top: 1px; color: var(--muted); }
.notice.warn { border-color: color-mix(in oklch, var(--warn) 28%, var(--rule)); background: var(--warn-soft); color: var(--ink); }
.notice.warn > .icon { color: var(--warn); }
.notice.bad { border-color: color-mix(in oklch, var(--bad) 28%, var(--rule)); background: var(--bad-soft); }
.notice.bad > .icon { color: var(--bad); }
.notice-main { flex: 1; min-width: 0; }
.notice details { margin-top: 4px; }
.notice summary { cursor: pointer; font-size: var(--text-xs); color: var(--muted); }
.notice pre { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--text-micro); color: var(--muted); }
.empty {
  display: grid; justify-items: center; gap: 8px; padding: var(--space-xl) var(--space-md);
  text-align: center; color: var(--muted); font-size: var(--text-sm);
}
.empty .icon { width: 26px; height: 26px; color: var(--rule-2); stroke-width: 1.5; }
.empty strong { color: var(--ink-2); font-weight: 600; font-size: var(--text-base); }
.panel .empty { padding: var(--space-lg) var(--space-md); }

/* skeleton: muncul setelah 150ms supaya tidak berkedip */
.skel-wrap { visibility: hidden; }
.skel-wrap.is-shown { visibility: visible; }
.skel { border-radius: 6px; background: var(--surface-3); animation: skel-pulse 1.4s ease-in-out infinite; }
@keyframes skel-pulse { 50% { opacity: .5; } }
.skel-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--rule); border-radius: var(--radius-panel); overflow: hidden; background: var(--rule); }
.skel-kpis > div { background: var(--surface); padding: 16px; display: grid; gap: 8px; }
@media (min-width: 640px) { .skel-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.skel-panel { padding: 16px; display: grid; gap: 12px; }

/* toast */
.toasts {
  position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-toast);
  display: grid; gap: 8px; width: min(380px, calc(100vw - 32px));
}
.toast {
  display: flex; gap: 8px; align-items: flex-start; padding: 12px 12px;
  border-radius: var(--radius-panel); background: var(--ink); color: var(--paper);
  box-shadow: var(--shadow-float); font-size: var(--text-sm);
}
.toast.is-opening { animation: toast-in var(--dur-short) var(--ease-out); }
.toast .icon { color: color-mix(in oklch, var(--paper) 70%, var(--bad)); }
.toast.good .icon { color: color-mix(in oklch, var(--paper) 55%, var(--good)); }
.toast.out { opacity: 0; transition: opacity 160ms var(--ease-in); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* dialog */
dialog { color: var(--ink); }
.dlg {
  width: min(440px, calc(100vw - 24px)); margin: auto; padding: 0;
  border: 1px solid var(--rule); border-radius: var(--radius-sheet);
  background: var(--surface); box-shadow: var(--shadow-float);
}
.dlg.is-opening { animation: dlg-in var(--dur-short) var(--ease-out); }
.dlg::backdrop { background: var(--scrim); backdrop-filter: blur(2px); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.dlg form { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.dlg h2 { font-size: var(--text-lg); }
.dlg p { font-size: var(--text-base); color: var(--ink-2); white-space: pre-line; }
.dlg-actions { display: flex; justify-content: flex-end; gap: var(--space-xs); }

/* ============================================================
   6. Navigator: palette ⌘K (desktop) + sheet Menu (HP)
   ============================================================ */
.navigator {
  width: min(600px, calc(100vw - 32px)); max-height: min(560px, 76dvh);
  margin: 12vh auto auto; padding: 0; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--radius-sheet);
  background: var(--surface); box-shadow: var(--shadow-float);
}
.navigator[open] { display: flex; }
.navigator.is-opening { animation: dlg-in var(--dur-short) var(--ease-out); }
.navigator::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
.nav-sheet { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.nav-grip { display: none; }
.nav-search {
  display: flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; min-height: 54px;
  border-bottom: 1px solid var(--rule); color: var(--muted);
}
.nav-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: var(--text-md); color: var(--ink); }
.nav-search input::-webkit-search-cancel-button { display: none; }
.nav-close { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-control); color: var(--muted); }
.nav-close:hover { background: var(--surface-2); color: var(--ink); }
.nav-results { overflow-y: auto; padding: 8px; min-height: 0; overscroll-behavior: contain; }
.nav-group-title { padding: 12px 12px 4px; font-size: var(--text-xs); font-weight: 500; color: var(--muted); }
.nav-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px;
  padding: 0 12px; border-radius: var(--radius-control); text-align: left; font-size: var(--text-base); color: var(--ink);
}
.nav-opt .icon { color: var(--muted); }
.nav-opt .nav-opt-sub { margin-left: auto; font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.nav-opt.is-active, .nav-opt:hover { background: var(--surface-2); }
.nav-opt.is-active .icon { color: var(--accent); }
.nav-opt.is-current { color: var(--accent); font-weight: 600; }
.nav-opt.is-current .icon { color: var(--accent); }
.nav-opt .biz-logo { width: 26px; height: 26px; border-radius: 7px; }
.nav-opt .biz-logo img { width: 22px; }
.nav-empty { padding: 28px 12px; text-align: center; color: var(--muted); font-size: var(--text-sm); }

/* ============================================================
   7. Halaman
   ============================================================ */

/* login */
#login-screen { min-height: 100dvh; background: var(--paper); }
.login { display: grid; place-items: center; min-height: 100dvh; padding: var(--space-lg) var(--space-md); }
.login-card {
  display: grid; gap: var(--space-md); width: min(400px, 100%);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sheet);
}
.login-logo { width: 150px; height: auto; margin-bottom: var(--space-xs); }
.login-card h1 { font-size: var(--text-2xl); font-weight: 650; letter-spacing: -0.025em; }
.login-sub { margin-top: -10px; margin-bottom: var(--space-xs); color: var(--muted); font-size: var(--text-base); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 36px; height: 32px; border-radius: 6px; color: var(--muted);
}
.pw-toggle:hover { color: var(--ink); background: var(--surface-2); }
.login-card .btn.primary { min-height: 42px; margin-top: var(--space-2xs); font-size: var(--text-md); }

/* ringkasan: grafik leads */
.chart { position: relative; padding: 4px var(--space-md) var(--space-md); }
.chart-head { display: flex; align-items: baseline; gap: 8px; padding: 0 var(--space-md) 8px; }
.chart-big { font-size: var(--text-kpi); font-weight: 650; letter-spacing: -0.025em; }
.chart-delta { font-size: var(--text-sm); color: var(--muted); }
.chart-plot { position: relative; height: 196px; margin-left: 32px; }
.chart-grid { position: absolute; inset: 0; pointer-events: none; }
.chart-grid div { position: absolute; left: 0; right: 0; border-top: 1px solid var(--rule); }
.chart-grid span {
  position: absolute; right: calc(100% + 8px); top: -8px;
  font-family: var(--font-mono); font-size: var(--text-micro); color: var(--muted); font-variant-numeric: tabular-nums;
}
.chart-cols { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
.chart-col {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  height: 100%; border-radius: 6px; outline-offset: 0;
}
.chart-bar {
  width: min(24px, 62%); height: calc(var(--h) * 100%); min-height: 3px;
  border-radius: 4px 4px 0 0; background: var(--accent-dim);
  transition: filter var(--dur-micro) var(--ease-out);
}
.chart-col.is-now .chart-bar { background: var(--accent-mark); }
.chart-col:hover .chart-bar, .chart-col:focus-visible .chart-bar { filter: brightness(1.08) saturate(1.1); }
.chart-col:hover, .chart-col:focus-visible { background: color-mix(in oklch, var(--surface-2) 80%, transparent); }
.chart-val {
  position: absolute; left: 50%; transform: translate(-50%, -4px);
  bottom: calc(var(--h) * 100%); font-family: var(--font-mono); font-size: var(--text-micro);
  font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.chart-x { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin: 8px 0 0 32px; }
.chart-x span { text-align: center; font-family: var(--font-mono); font-size: var(--text-micro); color: var(--muted); white-space: nowrap; overflow: hidden; }
.chart-x span.is-now { color: var(--ink); font-weight: 500; }
.chart-tip {
  position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, -100%);
  padding: 8px 8px; border-radius: 8px; background: var(--ink); color: var(--paper);
  font-size: var(--text-xs); white-space: nowrap; box-shadow: var(--shadow-float);
}
.chart-tip strong { font-size: var(--text-sm); font-weight: 650; margin-right: 4px; }

/* kartu proyek */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.toolbar .search { flex: 1 1 260px; max-width: 460px; }
.toolbar .toolbar-meta { margin-left: auto; font-size: var(--text-xs); color: var(--muted); font-family: var(--font-mono); }
.kgrid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); align-items: start; }
.kcard { display: grid; gap: 12px; padding: 16px var(--space-md) var(--space-md); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); min-width: 0; }
.kcard.is-done { background: var(--surface-2); }
.kcard-head { display: flex; align-items: flex-start; gap: var(--space-sm); }
.kcard-titles { flex: 1; min-width: 0; }
.kcard-title { font-size: var(--text-md); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.kcard-loc { display: flex; gap: 4px; margin-top: 4px; font-size: var(--text-sm); color: var(--muted); line-height: 1.4; }
.kcard-loc .icon-sm { margin-top: 2px; }
.kmeta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: var(--text-sm); }
.kmeta div { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.kmeta dt { color: var(--muted); font-size: var(--text-xs); }
.kmeta dd { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.kmeta dd.mono { font-size: var(--text-xs); }
.track { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.track span { height: 6px; border-radius: 2px; background: var(--surface-3); }
.track span.done { background: var(--accent-mark); }
.kcard.is-done .track span.done { background: var(--good); }
.track-labels { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.track-labels span { font-size: var(--text-micro); line-height: 1.2; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.track-labels span.done { color: var(--ink-2); }
.track-labels span.last { color: var(--accent); font-weight: 600; }
.track-now { display: none; margin-top: 8px; font-size: var(--text-xs); color: var(--muted); }
.track-now b { color: var(--ink); font-weight: 600; }
.termin { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.termin li { display: flex; align-items: flex-start; gap: var(--space-sm); padding: 8px 0 0; font-size: var(--text-sm); }
.termin li + li { padding-top: 8px; }
.termin-label { flex: 1; min-width: 0; color: var(--ink-2); line-height: 1.4; }
.termin-empty { padding-top: 8px; font-size: var(--text-sm); color: var(--muted); }

/* perencanaan */
.prov { font-size: var(--text-xs); color: var(--muted); line-height: 1.55; }
.pcards { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); padding: 0 var(--space-md) var(--space-md); align-items: start; }
.pcard { display: grid; gap: 8px; min-width: 0; padding: 12px 16px; border: 1px solid var(--rule); border-radius: var(--radius-panel); background: var(--surface); }
.pcard-head { display: flex; align-items: flex-start; gap: 8px; }
.pcard-title { flex: 1; min-width: 0; font-size: var(--text-base); font-weight: 600; line-height: 1.35; }
.facts { display: grid; gap: 4px; font-size: var(--text-sm); }
.fact { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
.fact dt { color: var(--muted); }
.fact dd { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.stops { list-style: none; display: grid; gap: 0; }
.stop { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding-bottom: 12px; }
.stop:last-child { padding-bottom: 0; }
.stop::before { content: ""; position: absolute; left: 10.5px; top: 22px; bottom: 0; width: 1px; background: var(--rule-2); }
.stop:last-child::before { display: none; }
.stop-idx {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--rule-2); background: var(--surface);
  font-family: var(--font-mono); font-size: var(--text-micro); font-weight: 600; color: var(--ink-2);
}
.stop-title { font-size: var(--text-sm); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.stop-meta { margin-top: 2px; font-size: var(--text-xs); color: var(--muted); }
.stop-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.pnote { font-size: var(--text-xs); color: var(--muted); line-height: 1.5; padding-top: 8px; border-top: 1px dashed var(--rule-2); }
.carriers { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.carrier { min-width: 0; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); }
.carrier.has-price { background: var(--accent-soft); }
.carrier-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
.carrier b { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.carrier-price { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; color: var(--accent); white-space: nowrap; }
.carrier-price.is-ask { color: var(--muted); font-weight: 500; font-family: var(--font-ui); }
.carrier small { display: block; margin-top: 4px; font-size: var(--text-micro); color: var(--muted); line-height: 1.4; }
.single { display: grid; gap: 8px; padding: 12px var(--space-md); border-top: 1px solid var(--rule); }
@media (min-width: 1100px) { .single { grid-template-columns: minmax(240px, .8fr) minmax(0, 1.6fr); align-items: start; gap: var(--space-md); } }
.single-title { font-size: var(--text-base); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.single-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: var(--text-xs); color: var(--muted); }
.single-rec { margin-top: 4px; font-size: var(--text-xs); color: var(--ink-2); line-height: 1.5; }
.cap-note { display: flex; gap: 12px; align-items: flex-start; }
.cap-note b { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.cap-note p { margin-top: 2px; font-size: var(--text-xs); color: var(--ink-2); line-height: 1.5; }

/* tugas */
.task-cols { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; }
.task-col { display: grid; gap: 8px; }
.task-col-head { display: flex; align-items: center; gap: 8px; padding: 0 2px; font-size: var(--text-sm); font-weight: 600; }
.task-col-head .lamp { box-shadow: none; }
.task-col-head .lamp.open { background: var(--accent-mark); }
.task-col-head .lamp.doing { background: var(--warn-lamp); }
.task-col-head .lamp.done { background: var(--good); }
.task-card { display: grid; gap: 8px; padding: 12px 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; font-size: var(--text-base); }
.task-card.is-done .task-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--rule-2); }
.task-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--text-xs); color: var(--muted); }
.task-meta span { display: inline-flex; gap: 4px; align-items: center; }
.task-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* pengaturan */
.settings-grid { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .settings-grid .span-all { grid-column: 1 / -1; } }
.mod-row { display: flex; align-items: center; gap: var(--space-sm); padding: 12px var(--space-md); border-top: 1px solid var(--rule); }
.mod-row .icon { color: var(--muted); }
.mod-row .row-main { flex: 1; }

/* tambahan komponen */
@media (min-width: 1100px) {
  .panel.health .rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel.health .rows > li:nth-child(odd) { box-shadow: 1px 0 0 var(--rule); }
}
.stack { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
a.row > .badge { align-self: center; }
.carrier-note { color: var(--muted); }
.panel-sub, .notice-main, .prov, .empty p, .dlg p, .pnote, .single-rec { max-width: 75ch; }
.nav-item:active, .chip:active, .menu-item:active, .nav-opt:active, .more-btn:active, .panel-toggle:active { background: var(--surface-3); }
.nav-opt-short { display: none; }
.panel-toggle { width: 100%; text-align: left; border-radius: var(--radius-panel); }
.panel-toggle:hover { background: var(--surface-2); }
.panel-toggle .chev { margin-left: auto; align-self: center; color: var(--muted); transition: transform var(--dur-short) var(--ease-out); }
.panel-toggle[aria-expanded="true"] { border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
.panel-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.panel-toggle .panel-title, .panel-toggle .panel-sub { display: flex; }
.panel-toggle .panel-sub { display: block; }
#theme-slot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 0 12px; }
.theme-label { font-size: var(--text-sm); color: var(--muted); }
#theme-slot .theme-seg { width: auto; }
#theme-slot .theme-seg button { width: 34px; padding: 0; flex: 0 0 auto; }
#theme-slot .theme-seg button span { display: none; }
.panel.bare { background: transparent; border: 0; border-radius: 0; }
.panel.bare > .panel-head { padding: 4px 2px 12px; }
.panel.bare > .panel-body { padding: 0; }
.panel.bare > .panel-body > * + * { margin-top: var(--space-sm); }
.panel.bare .pcards, .panel.bare .board, .panel.bare .board-nav { padding-left: 0; padding-right: 0; }
.panel.bare .board { scroll-padding-inline: 0; padding-bottom: 8px; }
.panel.bare .board-nav { padding-bottom: 0; }
.panel.bare .pcards { padding-bottom: 0; }
.table-panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); overflow: hidden; }
.table-panel-title { padding: 12px var(--space-md) 12px; font-size: var(--text-sm); font-weight: 600; }
.row-sub.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.link-btn { margin-top: 4px; font-size: var(--text-xs); font-weight: 500; color: var(--accent); }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.board-col.is-collapsed > article:nth-of-type(n+6) { display: none; }
.more-btn.col-more { border: 1px dashed var(--rule-2); border-radius: 10px; min-height: 36px; background: transparent; }
.more-btn.col-more:hover { background: var(--surface); }
.skel-wrap > * + * { margin-top: var(--space-md); }
.nav-extras { display: grid; gap: var(--space-xs); padding: var(--space-xs) 0 4px; }
.nav-extras .user-line { display: flex; align-items: center; gap: 8px; margin-top: var(--space-xs); padding-top: var(--space-sm); border-top: 1px solid var(--rule); }
.nav-extras .user-line .user-meta { flex: 1; min-width: 0; }
.row > .avatar { margin-top: 1px; }
.row > .icon-sm { margin-top: 4px; color: var(--muted); }
.row-sub.mono { font-size: var(--text-xs); }
.panel-body > .notice { margin: 0; }
.disclosure { border-top: 1px solid var(--rule); }
.disclosure > summary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; cursor: pointer;
  min-height: 44px; padding: 8px var(--space-md); font-size: var(--text-sm); font-weight: 500; color: var(--ink-2);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 auto; margin-right: 2px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg); transition: transform var(--dur-short) var(--ease-out);
}
.disclosure[open] > summary::before { transform: rotate(45deg); }
.disclosure > summary:hover { background: var(--surface-2); }
.disclosure > summary .code { margin-right: 0; }
.disclosure .rows { margin-bottom: 4px; }
.task-form {
  display: grid; gap: var(--space-sm); padding: var(--space-md);
  grid-template-columns: minmax(0, 1fr) 190px auto; align-items: end;
}
.task-title { font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.plan-table td:first-child { min-width: 200px; font-weight: 500; }
.plan-table td small { display: inline; }
.prov { margin-top: -4px; }
@media (max-width: 639.98px) {
  .task-form { grid-template-columns: minmax(0, 1fr) auto; padding: 12px; }
  .task-form .field:first-child { grid-column: 1 / -1; }
  .task-form .form-actions { grid-column: auto; }
  .disclosure > summary { padding: 8px 12px; }
  .cap-note { flex-direction: column; gap: 8px; }
  .panel.bare .board, .panel.bare .board-nav { margin-inline: calc(var(--space-md) * -1); padding-inline: var(--space-md); scroll-padding-inline: var(--space-md); }
  .table-panel-title { padding: 12px 12px 8px; }
  .pcard-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .kcard-head .badge { margin-top: 1px; }
}

/* ============================================================
   8. Responsif: tablet & HP (<1024px) = app bar + tab bar
   ============================================================ */
@media (max-width: 1023.98px) {
  #sidebar { display: none; }
  #main { margin-left: 0; }
  #topbar {
    min-height: calc(var(--appbar-h) + var(--safe-t)); padding: var(--safe-t) var(--space-sm) 0 var(--space-sm);
    gap: 8px;
  }
  .appbar-biz { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; padding: 0; }
  .appbar-biz .biz-logo { width: 34px; height: 34px; border-radius: 9px; }
  .appbar-biz .biz-logo img { width: 27px; }
  #view-title { font-size: var(--text-lg); letter-spacing: -0.015em; }
  .view-desc { display: none; }
  .status-chip { max-width: 124px; padding: 0 8px; min-height: 28px; }
  .status-chip .st-extra { display: none; }
  #view-title .t-full { display: none; }
  #view-title .t-short { display: inline; }
  #refresh-btn { width: 40px; min-height: 40px; }
  #view { padding: var(--space-md) var(--space-md) calc(var(--tabbar-h) + var(--safe-b) + var(--space-lg)); }

  #tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--tabbar-h) + var(--safe-b)); padding: 4px 8px var(--safe-b);
    background: color-mix(in oklch, var(--surface) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
    border-top: 1px solid var(--rule); box-shadow: var(--shadow-tab);
  }
  .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-width: 0; border-radius: 10px; color: var(--muted);
    font-size: var(--text-micro); font-weight: 500; letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
  }
  .tab span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tab .tab-ico { display: grid; place-items: center; width: 52px; height: 28px; border-radius: 14px; transition: background-color var(--dur-short) var(--ease-out); }
  .tab .icon { width: 21px; height: 21px; }
  .tab.active { color: var(--accent); }
  .tab.active .tab-ico { background: var(--accent-soft); }
  .tab:active .tab-ico { transform: scale(.94); }

  .toasts { left: var(--space-md); right: var(--space-md); width: auto; bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--space-sm)); }

  /* sheet Menu */
  .navigator {
    width: 100%; max-width: 100%; max-height: 90dvh; margin: auto 0 0; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    border-bottom: 0; padding-bottom: var(--safe-b);
  }
  .navigator.is-opening { animation: sheet-in var(--dur-long) var(--ease-out); }
  .nav-grip { display: block; width: 36px; height: 4px; margin: 8px auto 2px; border-radius: 4px; background: var(--rule-2); }
  .nav-search { min-height: 50px; margin: 8px 12px 4px; padding: 0 8px 0 12px; border: 1px solid var(--field-line); border-radius: var(--radius-control); }
  .nav-search input { font-size: 16px; }
  .nav-results { padding: 4px 12px 12px; }
  .nav-results.is-browse .nav-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .nav-results.is-browse .nav-modules .nav-opt {
    flex-direction: column; justify-content: center; gap: 8px; min-height: 74px; padding: 8px 4px;
    border: 1px solid var(--rule); background: var(--surface-2); text-align: center; font-size: var(--text-xs); font-weight: 500; line-height: 1.25;
  }
  .nav-results.is-browse .nav-modules .nav-opt .icon { width: 22px; height: 22px; }
  .nav-results.is-browse .nav-modules .nav-opt.is-current { background: var(--accent-soft); border-color: color-mix(in oklch, var(--accent) 35%, var(--rule)); }
  .nav-results.is-browse .nav-modules .nav-opt .nav-opt-sub { display: none; }
  .nav-results.is-browse .nav-modules .nav-opt .nav-opt-full { display: none; }
  .nav-results.is-browse .nav-modules .nav-opt .nav-opt-short { display: inline; }
  .nav-extras { display: grid; gap: var(--space-sm); padding: var(--space-sm) 0 4px; }
  .nav-extras .user-line { display: flex; align-items: center; gap: 8px; padding: 12px 0 0; border-top: 1px solid var(--rule); }
  .nav-extras .user-line .user-meta { flex: 1; }
  :root { --control-h: 44px; }
  .btn.sm { min-height: 36px; }
  .field input, .field select, .input { font-size: 16px; }
  .search input { font-size: 16px; }
}
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }

@media (max-width: 639.98px) {
  #view > * + * { margin-top: var(--space-sm); }
  .kpi { padding: 12px 12px 12px; }
  .kpi-label { font-size: var(--text-xs); }
  .panel-head { padding: 12px 12px 12px; }
  .panel-body { padding: 0 12px 12px; }
  .row { padding: 12px 12px; }
  .board, .board-nav, .hbars, .pcards { padding-left: 12px; padding-right: 12px; }
  .board { grid-auto-columns: 86%; scroll-padding-inline: 13px; }
  .chart { padding: 4px 12px 12px; }
  .chart-head { padding: 0 12px 8px; }
  .chart-plot { height: 170px; }
  .single { padding: 12px 12px; }
  .mod-row { padding: 12px 12px; }
  .kcard { padding: 12px; }
  .kmeta { gap: 4px 12px; }
  .track-labels { display: none; }
  .track-now { display: block; }
  .fact { grid-template-columns: 84px minmax(0, 1fr); }
  .toolbar .search { flex-basis: 100%; max-width: none; }
  .toolbar .segmented { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .toolbar .segmented button { flex: 1 0 auto; justify-content: center; }
  .toolbar .toolbar-meta { display: none; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .span-2, .form-grid .full { grid-column: 1 / -1; }
  .form-actions { grid-column: 1 / -1; }
  .form-actions .btn { flex: 1; }
  .login-card { padding: var(--space-lg) var(--space-md) var(--space-md); border-radius: var(--radius-panel); }

  /* tabel → kartu label:nilai */
  .table.as-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table.as-cards tr { display: grid; gap: 4px; padding: 12px 12px; border-top: 1px solid var(--rule); }
  .table.as-cards td { display: grid; grid-template-columns: minmax(88px, 38%) minmax(0, 1fr); gap: 8px; padding: 0; border: 0; text-align: left; white-space: normal; }
  .table.as-cards td::before { content: attr(data-label); color: var(--muted); font-size: var(--text-xs); padding-top: 1px; }
  .table.as-cards td:first-child { display: block; margin-bottom: 4px; font-size: var(--text-base); font-weight: 600; }
  .table.as-cards td:first-child::before { content: none; }
  .table.as-cards td.is-blank { display: none; }
  .table.as-cards tbody tr:hover td { background: none; }
}

/* ============================================================
   9. Gerak dikurangi
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important; animation-iteration-count: 1 !important;
    transition-duration: 150ms !important; scroll-behavior: auto !important;
  }
  #view.is-enter > * { animation-name: fade-only !important; }
  .navigator.is-opening, .dlg.is-opening { animation-name: fade-only !important; }
  .skel { animation: none; }
  .btn.is-busy .icon { animation: none; }
}
@keyframes fade-only { from { opacity: 0; } to { opacity: 1; } }

/* gelap: logo penuh jadi versi putih, tanda sedikit dicerahkan */
:root[data-theme="dark"] .login-logo { filter: brightness(0) invert(1); opacity: .92; }
:root[data-theme="dark"] .biz-logo img { filter: brightness(1.25) saturate(1.1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .login-logo { filter: brightness(0) invert(1); opacity: .92; }
  :root:not([data-theme="light"]) .biz-logo img { filter: brightness(1.25) saturate(1.1); }
}

/* pengaturan: editor akses member + peran khusus (2026-09-28) */
.member-access { display: block; background: var(--surface-2); }
.check-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 12px; padding: 4px 0;
}
.check-item {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); color: var(--ink-2); cursor: pointer;
}
.check-item input[type="checkbox"] { accent-color: var(--accent); }
.check-grid.is-off { opacity: .45; pointer-events: none; }

@media (forced-colors: active) {
  .track span.done, .chart-bar, .hbar-fill { background: Highlight; }
  .lamp { forced-color-adjust: none; }
}


/* ================= SULTAN KUBAH BRAND (11/10/2026) =================
   Palet dari dashboard absensi.sultankubah.id (styles.css?v=19):
   krem #f5f0e5 / emas #b98214 / emas tua #7b5310 / teks #211d16.
   Hanya override token — struktur layout tak disentuh. */
:root {
  --paper:      #f5f0e5;
  --surface:    #fffdf8;
  --surface-2:  #f6efdf;
  --surface-3:  #efe5cd;
  --rule:       #e6dabe;
  --rule-2:     #d9c9a4;
  --field-line: #b4a37d;
  --ink:        #211d16;
  --ink-2:      #655b49;
  --muted:      #9a8b70;
  --accent:      #8a5f0e;
  --accent-soft: #f6ecd2;
  --accent-ink:  #fffdf8;
  --accent-mark: #b98214;
  --accent-dim:  #a98b4e;
  --focus:       #b98214;
  --warn-lamp:   #d8b040;
  --scrim: rgba(33, 29, 22, 0.40);
  --shadow-float: 0 18px 40px -16px rgba(73, 52, 16, 0.25), 0 2px 8px rgba(73, 52, 16, 0.08);
  --shadow-tab: 0 -8px 24px -18px rgba(73, 52, 16, 0.32);
  --shadow-hair: 0 1px 2px rgba(80, 58, 18, 0.08);
  --mark-ink-dark: #211d16;
}
.login-logo { width: 154px; height: auto; }

/* dark mode Sultan: coklat tua hangat + emas terang */
:root[data-theme="dark"] {
  --paper:      #191511;
  --surface:    #211c15;
  --surface-2:  #2a231a;
  --surface-3:  #332b1f;
  --rule:       #3b3222;
  --rule-2:     #4a3e2a;
  --field-line: #6e5c3c;
  --ink:        #f2e8d5;
  --ink-2:      #c9b997;
  --muted:      #9a8b70;
  --accent:      #d8b040;
  --accent-soft: #332b1f;
  --accent-ink:  #211c15;
  --accent-mark: #d8b040;
  --accent-dim:  #a98b4e;
  --focus:       #d8b040;
  --scrim: rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #191511;
    --surface:    #211c15;
    --surface-2:  #2a231a;
    --surface-3:  #332b1f;
    --rule:       #3b3222;
    --rule-2:     #4a3e2a;
    --field-line: #6e5c3c;
    --ink:        #f2e8d5;
    --ink-2:      #c9b997;
    --muted:      #9a8b70;
    --accent:      #d8b040;
    --accent-soft: #332b1f;
    --accent-ink:  #211c15;
    --accent-mark: #d8b040;
    --accent-dim:  #a98b4e;
    --focus:       #d8b040;
    --scrim: rgba(0, 0, 0, 0.55);
  }
}
/* logo emas Sultan jangan di-invert putih di dark mode — emas tetap emas */
:root[data-theme="dark"] .login-logo { filter: none; opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .login-logo { filter: none; opacity: 1; }
}

/* ============ SULTAN AESTHETIC LAYER (11/10/2026) ============
   Premium feel: latar bergradien lembut, kartu glass, tombol emas
   bergradien, depth halus. Append-only di atas token brand. */

/* --- latar login: gradien krem + glow emas --- */
.login {
  background:
    radial-gradient(800px 480px at 85% -10%, rgba(216, 176, 64, 0.16), transparent 60%),
    radial-gradient(700px 520px at -10% 110%, rgba(159, 108, 14, 0.10), transparent 55%),
    linear-gradient(160deg, #f8f3e8 0%, #f5f0e5 45%, #efe6d0 100%);
}
:root[data-theme="dark"] .login,
:root:not([data-theme="light"]) .login { }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .login {
    background:
      radial-gradient(800px 480px at 85% -10%, rgba(216, 176, 64, 0.10), transparent 60%),
      radial-gradient(700px 520px at -10% 110%, rgba(216, 176, 64, 0.05), transparent 55%),
      linear-gradient(160deg, #1d1813 0%, #191511 50%, #15110d 100%);
  }
}
:root[data-theme="dark"] .login {
  background:
    radial-gradient(800px 480px at 85% -10%, rgba(216, 176, 64, 0.10), transparent 60%),
    radial-gradient(700px 520px at -10% 110%, rgba(216, 176, 64, 0.05), transparent 55%),
    linear-gradient(160deg, #1d1813 0%, #191511 50%, #15110d 100%);
}

/* --- kartu login: glass + garis emas atas --- */
.login-card {
  position: relative;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(166, 123, 25, 0.22);
  border-radius: 22px;
  box-shadow:
    0 24px 60px -24px rgba(73, 52, 16, 0.35),
    0 4px 16px rgba(73, 52, 16, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  padding-top: calc(var(--space-lg) + 6px);
  overflow: hidden;
}
.login-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #9f6c0e 0%, #d8b040 48%, #f8e878 100%);
}
.login-card h1 {
  background: linear-gradient(110deg, #7b5310 10%, #b98214 55%, #9f6c0e 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
:root[data-theme="dark"] .login-card {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border-color: rgba(216, 176, 64, 0.25);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(248, 232, 120, 0.08);
}
:root[data-theme="dark"] .login-card h1 {
  background: linear-gradient(110deg, #d8b040 10%, #f8e878 55%, #d8b040 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-card .login-logo { filter: drop-shadow(0 6px 18px rgba(185, 130, 20, 0.35)); justify-self: center; margin-left: auto; margin-right: auto; }
.login-card h1, .login-sub { text-align: center; }

/* --- input login: lembut, fokus emas glow --- */
.login-card input[type="text"], .login-card input[type="password"] {
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.login-card input:focus {
  box-shadow: 0 0 0 3px rgba(185, 130, 20, 0.18);
}

/* --- tombol emas bergradien (login + primary global) --- */
.btn.primary {
  background: linear-gradient(170deg, #d8a52e 0%, #b5820f 45%, #8a5f0e 100%);
  border: none;
  box-shadow: 0 6px 18px -6px rgba(159, 108, 14, 0.55), inset 0 1px 0 rgba(255, 235, 170, 0.35);
  transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn.primary:hover {
  background: linear-gradient(170deg, #e8b83e 0%, #c5921f 45%, #9a6f0e 100%);
  filter: saturate(1.05);
  box-shadow: 0 8px 22px -6px rgba(159, 108, 14, 0.65), inset 0 1px 0 rgba(255, 235, 170, 0.4);
}
.btn.primary:active { transform: translateY(1px); }
.login-card .btn.primary { min-height: 46px; border-radius: 12px; font-weight: 650; letter-spacing: 0.01em; }

/* --- shell dashboard: sidebar & topbar lebih berkelas --- */
.sidebar, aside {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--paper) 88%, transparent));
}
.kpi, .card, .panel, .module-card, section.card {
  border-radius: 16px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.kpi:hover { box-shadow: 0 10px 28px -14px rgba(73, 52, 16, 0.28); transform: translateY(-1px); }
.kpi-value {
  background: linear-gradient(110deg, var(--ink) 20%, #8a5f0e 85%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
:root[data-theme="dark"] .kpi-value {
  background: linear-gradient(110deg, var(--ink) 25%, #d8b040 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* scrollbar halus senada */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent-dim) 45%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent-dim) 70%, transparent); background-clip: content-box; border: 2px solid transparent; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }