/* =========================================================
   Naskah — design system
   Bertema material Apple: permukaan berlapis, garis rambut,
   bayangan tipis berlapis, dan satu warna aksen.
   ========================================================= */

:root {
  /* Memberi tahu browser skema warna yang dipakai, supaya kendali bawaan sistem —
     popup <select>, scrollbar, penunjuk fokus — digambar dengan kontras yang benar.
     Tanpa ini, daftar dropdown di tema gelap muncul abu-abu pucat dan sulit dibaca. */
  color-scheme: light;

  /* Empat peran huruf yang dipisah dengan sengaja:
       judul   -> Figtree, geometris dan tegas
       menu/UI -> Barlow, sempit sehingga label panjang tetap muat
       naskah  -> Noto Serif untuk membaca, Noto Sans sebagai pasangannya
       kode    -> JetBrains Mono */
  --font-head: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-menu: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-sans-read: 'Noto Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- terang ---- */
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --surface-3: #f0f0f3;
  --fill: rgba(120, 120, 128, 0.08);
  --fill-strong: rgba(120, 120, 128, 0.16);

  --line: rgba(0, 0, 0, 0.10);
  --line-strong: rgba(0, 0, 0, 0.17);
  /* Pembatas antarwilayah besar — harus lebih tegas daripada garis di dalam kartu. */
  --divider: rgba(0, 0, 0, 0.13);

  /* Peran permukaan. Di tema terang, panel bantu berwarna abu dan area tulis putih.
     Di tema gelap kebalikannya: yang naik justru makin terang. Dipisah jadi token
     tersendiri supaya kedua tema bisa memilih arah masing-masing. */
  --rail-bg: #f0f0f3;
  --panel-bg: #f2f2f5;
  --paper: #ffffff;
  --paper-alt: #fafafc;
  --bar-bg: #ffffff;

  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #8e8e93;

  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-ink: #ffffff;
  --accent-soft: rgba(0, 113, 227, 0.10);
  --accent-line: rgba(0, 113, 227, 0.28);

  --danger: #d70015;
  --danger-soft: rgba(215, 0, 21, 0.10);
  --warn: #a85200;
  --warn-soft: rgba(191, 90, 0, 0.12);
  --ok: #1d7f4f;
  --ok-soft: rgba(29, 127, 79, 0.12);

  --chrome: rgba(255, 255, 255, 0.72);
  --chrome-blur: saturate(180%) blur(20px);

  --sh-1: 0 0.5px 1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04);
  --sh-2: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px -6px rgba(0, 0, 0, 0.12);
  --sh-3: 0 2px 6px rgba(0, 0, 0, 0.06), 0 24px 56px -20px rgba(0, 0, 0, 0.28);
  --ring: 0 0 0 4px var(--accent-soft);

  --r-xs: 6px;
  --r-sm: 9px;
  --r: 12px;
  --r-lg: 17px;
  --r-xl: 22px;

  --rail-w: 244px;
  --inspector-w: 366px;
  --split-w: 7px;

  /* Kurva yang sedikit melewati target — terasa hidup tanpa jadi genit. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- gelap: lapisan makin terang, bukan makin hitam ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #161617;
    --surface: #1d1d1f;
    --surface-2: #242426;
    --surface-3: #2c2c2e;
    --fill: rgba(120, 120, 128, 0.20);
    --fill-strong: rgba(120, 120, 128, 0.32);

    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.17);
    --divider: rgba(255, 255, 255, 0.11);

    --rail-bg: #1d1d1f;
    --panel-bg: #1a1a1c;
    --paper: #1d1d1f;
    --paper-alt: #212123;
    --bar-bg: #1d1d1f;

    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #78787d;

    --accent: #2997ff;
    --accent-hover: #47a6ff;
    --accent-ink: #06121f;
    --accent-soft: rgba(41, 151, 255, 0.16);
    --accent-line: rgba(41, 151, 255, 0.36);

    --danger: #ff453a;
    --danger-soft: rgba(255, 69, 58, 0.16);
    --warn: #ff9f0a;
    --warn-soft: rgba(255, 159, 10, 0.16);
    --ok: #30d158;
    --ok-soft: rgba(48, 209, 88, 0.16);

    --chrome: rgba(29, 29, 31, 0.72);

    --sh-1: 0 0.5px 1px rgba(0, 0, 0, 0.5);
    --sh-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -6px rgba(0, 0, 0, 0.6);
    --sh-3: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 56px -20px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme='light'] { color-scheme: light; }

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #161617;
  --surface: #1d1d1f;
  --surface-2: #242426;
  --surface-3: #2c2c2e;
  --fill: rgba(120, 120, 128, 0.20);
  --fill-strong: rgba(120, 120, 128, 0.32);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);
  --divider: rgba(255, 255, 255, 0.11);
  --rail-bg: #1d1d1f;
  --panel-bg: #1a1a1c;
  --paper: #1d1d1f;
  --paper-alt: #212123;
  --bar-bg: #1d1d1f;
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --text-3: #78787d;
  --accent: #2997ff;
  --accent-hover: #47a6ff;
  --accent-ink: #06121f;
  --accent-soft: rgba(41, 151, 255, 0.16);
  --accent-line: rgba(41, 151, 255, 0.36);
  --danger: #ff453a;
  --danger-soft: rgba(255, 69, 58, 0.16);
  --warn: #ff9f0a;
  --warn-soft: rgba(255, 159, 10, 0.16);
  --ok: #30d158;
  --ok-soft: rgba(48, 209, 88, 0.16);
  --chrome: rgba(29, 29, 31, 0.72);
  --sh-1: 0 0.5px 1px rgba(0, 0, 0, 0.5);
  --sh-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -6px rgba(0, 0, 0, 0.6);
  --sh-3: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 56px -20px rgba(0, 0, 0, 0.8);
}

* { box-sizing: border-box; }

/* Aturan display milik kita (flex/grid) mengalahkan bawaan browser untuk atribut
   hidden, sehingga elemen yang disembunyikan lewat JS tetap tampil. Kunci di sini
   sekali, berlaku untuk semuanya: overlay baca, overlay AI, bilah revisi, ruas
   isian bersyarat, dan lencana. */
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* Navigasi, tab, dan tombol memakai huruf menu. */
.nav-item,
.tab,
.seg-toggle button,
.btn,
.model-select select,
.brand-text strong,
.pane-head h2,
.stat span,
.price-label {
  font-family: var(--font-menu);
}
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

::selection { background: var(--accent-soft); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-xs);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--fill-strong);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

.muted { color: var(--text-3); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ================= tata letak ================= */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  height: 100vh;
  overflow: hidden;
}

.main, .view, .workspace, .panes, .pane, .inspector,
.stat-strip, .topbar, .topbar-title, .editor-area, .output-wrap {
  min-width: 0;
}

/* ---- rail ---- */

.rail {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 18px 12px;
  background: var(--rail-bg);
  border-right: 1px solid var(--divider);

  /* Rail diberi konteks penumpukan sendiri yang berada di atas .main.
     Pada layar sempit rail memakai position:sticky, dan sticky selalu
     membentuk konteks penumpukan — tanpa z-index di sini, menu profil
     di dalamnya terkurung di lapisan rail dan tertimpa kolom teks,
     berapa pun z-index yang dipasang pada menunya sendiri. */
  position: relative;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 0; }

/* ---- rail terlipat ---- */

.rail-toggle { margin-left: auto; flex: none; }

/* Dilipat jadi sebaris ikon. Label disembunyikan, bukan dikecilkan — teks
   yang dipaksa muat di 66px justru lebih sulit dibaca daripada ikon saja. */
.app.rail-collapsed { --rail-w: 66px; }

.app.rail-collapsed .brand-text,
.app.rail-collapsed .nav-item span,
.app.rail-collapsed .rail-user .who,
.app.rail-collapsed .rail-user .icon-btn,
.app.rail-collapsed .rail-version { display: none; }

/* Ditumpuk, bukan disejajarkan: pada 66px, merek dan tombol yang berdampingan
   saling menimpa. */
.app.rail-collapsed .brand { flex-direction: column; gap: 10px; padding: 6px 0 0; }
.app.rail-collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.app.rail-collapsed .rail-user { justify-content: center; padding: 6px 0; }
.app.rail-collapsed .theme-seg { grid-template-columns: 1fr; }

/* Ikon dibalik supaya arah lipatan terbaca: menghadap keluar saat terlipat. */
.app.rail-collapsed .rail-toggle { margin: 0; }
.app.rail-collapsed .rail-toggle svg { transform: scaleX(-1); }

.brand-mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(180deg, #3b9bff, #0071e3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 8px -2px rgba(0, 113, 227, 0.6);
}
:root[data-theme='dark'] .brand-mark,
:root:not([data-theme='light']) .brand-mark { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }

.brand-text { display: flex; flex-direction: column; line-height: 1.28; }
.brand-text strong { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
.brand-text span { font-size: 11.5px; color: var(--text-3); letter-spacing: 0; }

.nav { display: flex; flex-direction: column; gap: 1px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font-size: 15.5px;
  font-weight: 550;
  cursor: pointer;
  text-align: left;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav-item svg { width: 19px; height: 19px; flex: none; opacity: .75; }
.nav-item:hover { background: var(--fill); color: var(--text); }
.nav-item.is-active { background: var(--accent); color: var(--accent-ink); font-weight: 650; }
.nav-item.is-active svg { opacity: 1; }
.nav-item span { flex: 1; }

.nav-badge {
  font-style: normal;
  font-size: 11px;
  font-weight: 590;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--fill-strong);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.nav-item.is-active .nav-badge { background: rgba(255, 255, 255, 0.25); color: var(--accent-ink); }

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 3px var(--warn-soft);
}

.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding: 0 2px; }

/* pemilih tema tiga keadaan */
.theme-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  background: var(--fill);
  border-radius: 10px;
}
.theme-seg button {
  display: grid;
  place-items: center;
  padding: 6px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.theme-seg button svg { width: 15px; height: 15px; }
.theme-seg button:hover { color: var(--text); }
.theme-seg button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-1);
}

.rail-version { font-size: 11px; color: var(--text-3); padding-left: 6px; font-variant-numeric: tabular-nums; }

/* ---- utama ---- */

.main { position: relative; overflow: hidden; }

.view { display: none; height: 100%; flex-direction: column; }
.view.is-active { display: flex; }

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 26px 15px;
  border-bottom: 1px solid var(--divider);
  background: var(--chrome);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  position: relative;
  z-index: 3;
}

.topbar-title h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.032em; line-height: 1.15; }
.topbar-title p { font-size: 13.5px; color: var(--text-3); margin-top: 4px; }

.topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---- kendali ---- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 980px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .1s var(--ease), background .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease);
}
.btn svg { width: 15px; height: 15px; }
.btn:active { transform: scale(0.96); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--sh-1);
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-accent { background: var(--accent-soft); color: var(--accent); }
.btn-accent:hover { background: var(--accent); color: var(--accent-ink); }

.btn-quiet { background: var(--fill); color: var(--text); }
.btn-quiet:hover { background: var(--fill-strong); }

.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }

.btn-sm { padding: 5px 12px; font-size: 12.5px; }

.icon-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  font-size: 12px;
  font-weight: 590;
  transition: background .18s var(--ease), color .18s var(--ease), transform .1s var(--ease);
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--fill); color: var(--text); }
.icon-btn:active { transform: scale(0.92); }

.seg-toggle {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--fill);
  border-radius: 10px;
}
.seg-toggle button {
  border: 0;
  background: transparent;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 550;
  color: var(--text-2);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.seg-toggle button:hover { color: var(--text); }
.seg-toggle button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }

.pill-dot {
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--text-3);
  vertical-align: middle;
  transition: background .18s var(--ease), box-shadow .18s var(--ease);
}
.pill-dot.is-ready { background: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); }

/* sakelar ala iOS — tetap memakai checkbox asli demi aksesibilitas */
.switch-row input[type='checkbox'],
.opt-switch input[type='checkbox'],
.mini-check input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 40px; height: 24px;
  flex: none;
  margin: 0;
  border-radius: 99px;
  background: var(--fill-strong);
  cursor: pointer;
  transition: background .26s var(--ease);
}
.switch-row input[type='checkbox']::after,
.opt-switch input[type='checkbox']::after,
.mini-check input[type='checkbox']::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: transform .26s var(--ease);
}
.switch-row input[type='checkbox']:checked,
.opt-switch input[type='checkbox']:checked,
.mini-check input[type='checkbox']:checked { background: var(--ok); }
.switch-row input[type='checkbox']:checked::after,
.opt-switch input[type='checkbox']:checked::after,
.mini-check input[type='checkbox']:checked::after { transform: translateX(16px); }

.mini-check input[type='checkbox'] { width: 34px; height: 20px; }
.mini-check input[type='checkbox']::after { width: 16px; height: 16px; }
.mini-check input[type='checkbox']:checked::after { transform: translateX(14px); }

.model-select { position: relative; display: inline-flex; align-items: center; transition: opacity .2s var(--ease); }
.model-select.is-idle { opacity: .4; }
.model-select select {
  appearance: none;
  -webkit-appearance: none;
  max-width: 260px;
  padding: 8px 32px 8px 14px;
  border: 0;
  border-radius: 980px;
  background: var(--fill);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  text-overflow: ellipsis;
  transition: background .18s var(--ease);
}
.model-select select:hover { background: var(--fill-strong); }
.model-select:not(.is-idle) select { background: var(--accent-soft); color: var(--accent); }
/* Popup <select> bawaan sistem: paksa latar dan teks solid supaya tidak mewarisi
   warna kendali yang tembus pandang. */
select option,
select optgroup {
  background-color: var(--paper);
  color: var(--text);
}
select optgroup { color: var(--text-3); font-weight: 600; }

.model-select::after {
  content: '';
  position: absolute;
  right: 13px;
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
  color: var(--text-3);
}

/* ---- baris statistik ---- */

/* Statistik boleh menggulung mendatar; kartu tarif tidak ikut menggulung
   supaya tidak pernah terpotong di ujung. */
.stat-strip {
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 0 26px;
  border-bottom: 1px solid var(--divider);
  background: var(--bar-bg);
  overflow: hidden;
}
.stats-scroll {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}


.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 22px 13px 0;
  margin-right: 22px;
  min-width: 74px;
}
.stat b {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  transition: color .2s var(--ease);
}
.stat b em { font-size: 12px; font-style: normal; color: var(--text-3); margin-left: 1px; font-weight: 500; }
/* Label tidak boleh pecah baris. Isi tiap sel ditengahkan secara vertikal, jadi
   label dua baris membuat angkanya terdorong naik dan tidak lagi sebaris dengan
   angka di sebelahnya. Bilah ini bisa digulung mendatar, jadi melebar tidak
   menimbulkan masalah. */
.stat span {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0;
  white-space: nowrap;
}
.stat-issue.has-error b { color: var(--danger); }
.stat-issue.has-warn b { color: var(--warn); }

.price-tag {
  margin: 9px 0;
  padding: 7px 15px;
  border-radius: var(--r);
  background: var(--fill);
  flex: none;
  align-self: center;
  min-width: 196px;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.price-tag.is-ai { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }

.price-main { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.price-label { font-size: 11.5px; font-weight: 500; color: var(--text-3); }
.price-tag.is-ai .price-label { color: var(--accent); font-weight: 500; }
.price-main strong { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.price-sub { font-size: 10.5px; color: var(--text-3); margin-top: 1px; font-variant-numeric: tabular-nums; }

/* ---- ruang kerja ---- */

.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--split-w) var(--inspector-w);
  min-height: 0;
}

/* ---- pemisah yang bisa digeser ---- */

/* Bilah tipis dengan daerah tangkap yang lebih lebar dari garisnya. Garis
   setipis 1px hampir mustahil dijepit dengan tetikus; yang terlihat tetap
   tipis, tapi yang bisa ditarik selebar 7px. */
.splitter {
  position: relative;
  cursor: col-resize;
  background: var(--divider);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.splitter i {
  position: absolute;
  inset: 0;
  display: block;
  transition: background .18s var(--ease);
}

.splitter:hover i,
.splitter:focus-visible i,
.splitter.is-dragging i { background: var(--accent); }

.splitter:focus-visible { outline: none; }

/* Saat digeser, seluruh halaman ikut memakai kursor ini — kalau tidak,
   kursor berubah-ubah begitu tetikus melewati textarea di sebelahnya. */
body.is-resizing,
body.is-resizing * { cursor: col-resize !important; user-select: none !important; }

/* Lebar kolom kiri disimpan di --pane-left. Nilai awalnya 1fr supaya kedua
   kolom sama besar sebelum pengguna pernah menggesernya; setelah digeser,
   nilainya jadi piksel. minmax() menahan kolom agar tidak bisa dihimpitkan
   sampai tidak terbaca. */
.panes {
  display: grid;
  grid-template-columns: minmax(180px, var(--pane-left, 1fr)) var(--split-w) minmax(180px, 1fr);
  min-height: 0;
  background: var(--divider);
}

/* position: relative wajib — dropzone dan ajakan mulai memakai panel ini
   sebagai acuan; tanpa itu keduanya melebar ke seluruh area kerja. */
.pane { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--paper); }

.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-alt);
}
/* Judul yang menyusut lebih dulu; kendali di kanan tidak boleh ikut tergencet
   sampai hilang saat panelnya sempit. */
.pane-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-2);
}
.pane-head .pane-tools { flex: none; }
.pane-head .step {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--fill-strong);
  color: var(--text-2);
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  flex: none;
}
.edit-hint { font-style: normal; color: var(--accent); font-weight: 450; margin-left: 2px; }
.pane-tools { display: flex; align-items: center; gap: 3px; }
.pane-tools .muted { font-size: 11px; margin-right: 6px; font-variant-numeric: tabular-nums; }

.editor-area {
  flex: 1;
  width: 100%;
  /* Jaminan tinggi supaya kolom tulis tidak pernah tergencet jadi sepotong garis. */
  min-height: 220px;
  padding: 26px 28px 44px;
  border: 0;
  resize: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 16.5px;
  line-height: 1.8;
  letter-spacing: 0;
  outline: none;
}
.editor-area::placeholder { color: var(--text-3); }
.editor-area:focus-visible { box-shadow: none; }
.editor-out { background: var(--paper-alt); }

.output-wrap { position: relative; flex: 1; display: flex; min-height: 0; }

/* Elemen bayangan untuk mengukur posisi vertikal sebuah karakter di textarea.
   Harus memakai pembungkusan baris yang sama agar hasilnya tepat. */
.caret-mirror {
  position: absolute;
  top: 0;
  left: -99999px;
  visibility: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  pointer-events: none;
}

/* Kilatan singkat saat kolom digulung ke temuan, supaya perpindahannya terasa. */
.pane.is-flash .editor-area { animation: flash 0.7s var(--ease-out); }
@keyframes flash {
  0%   { background: var(--accent-soft); }
  100% { background: transparent; }
}
.pane.is-flash .editor-out { animation: flash-out 0.7s var(--ease-out); }
@keyframes flash-out {
  0%   { background: var(--accent-soft); }
  100% { background: var(--paper-alt); }
}

.editor-area::selection { background: var(--accent-soft); }
.editor-area::-moz-selection { background: var(--accent-soft); }

.fix-line.clickable { cursor: pointer; border-radius: 6px; transition: background .16s var(--ease); }
.fix-line.clickable:hover { background: var(--fill); }

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
}
.overlay p { font-size: 13px; color: var(--text-2); }

.spinner {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2.5px solid var(--fill-strong);
  border-top-color: var(--accent);
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.revision-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--accent-line);
  background: var(--accent-soft);
}
.revision-bar strong { display: block; font-size: 13px; font-weight: 590; }
.revision-bar span { font-size: 12px; color: var(--text-2); }
.revision-actions { display: flex; gap: 8px; flex: none; }

/* ---- inspektur ---- */

.inspector {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--divider);
  background: var(--panel-bg);
}

.tabs {
  display: flex;
  gap: 2px;
  padding: 9px 10px 0;
  border-bottom: 1px solid var(--divider);
  flex: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.tab { flex: none; white-space: nowrap; }
.tab {
  position: relative;
  border: 0;
  background: transparent;
  padding: 8px 9px 13px;
  font-size: 14.5px;
  font-weight: 550;
  color: var(--text-3);
  cursor: pointer;
  transition: color .18s var(--ease);
}
.tab:hover { color: var(--text-2); }
.tab.is-active { color: var(--text); font-weight: 650; }
.tab.is-active::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.tab-count {
  font-style: normal;
  margin-left: 5px;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--fill-strong);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.tab-count.is-error { background: var(--danger-soft); color: var(--danger); }

.tab-panel { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
.tab-panel.is-active { display: block; }

/* ---- opsi ---- */

.options-form { display: flex; flex-direction: column; gap: 15px; }

.opt { display: flex; flex-direction: column; gap: 5px; }
.opt-label { font-size: 12.5px; font-weight: 500; }
.opt-help { font-size: 11.5px; color: var(--text-3); line-height: 1.45; letter-spacing: 0; }

.opt select, .opt input[type='number'], .opt input[type='text'] {
  padding: 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 13px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.opt select:hover, .opt input:hover { border-color: var(--line-strong); }
.opt select:focus, .opt input:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }

.opt-switch {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 2px 0;
}
.opt-switch > div { display: flex; flex-direction: column; gap: 2px; }

.opt-actions { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }

.suggest-card {
  padding: 13px;
  margin-bottom: 15px;
  border-radius: var(--r);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.suggest-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--accent); margin-bottom: 5px; }
.suggest-head svg { width: 15px; height: 15px; }
.suggest-card p { font-size: 12px; color: var(--text-2); margin-bottom: 10px; }

/* ---- tampilan perubahan (diff) ---- */

.seg-sm { padding: 2px; margin-right: 6px; }
.seg-sm button { padding: 4px 11px; font-size: 12.5px; }
.seg-sm .tab-count { margin-left: 5px; }

.diff-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper-alt);
  z-index: 2;
}

.diff-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--bar-bg);
}
.diff-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 99px;
  background: var(--fill);
  font-size: 12px;
  color: var(--text-2);
}
.diff-stat b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text); }
.diff-stat.add b { color: var(--ok); }
.diff-stat.del b { color: var(--danger); }
.diff-stat.para b { color: var(--accent); }
.diff-stat.none { background: var(--ok-soft); color: var(--ok); }

/* Pemilih pembanding — muncul hanya saat ada hasil AI, karena baru saat itu
   ada dua titik acuan yang masuk akal. */
.diff-basis {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 11px;
  border-radius: 99px;
  background: var(--fill);
  font-size: 11.5px;
  color: var(--text-3);
  margin-right: 4px;
}
.diff-basis button {
  border: 0;
  padding: 3px 10px;
  border-radius: 99px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-menu);
  font-size: 11.5px;
  font-weight: 550;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.diff-basis button:hover { color: var(--text); }
.diff-basis button.is-active { background: var(--accent); color: var(--accent-ink); }

.diff-body {
  flex: 1;
  overflow-y: auto;
  padding: 26px 28px 44px;
  font-family: var(--font-serif);
  font-size: 16.5px;
  line-height: 1.8;
  letter-spacing: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.diff-body ins {
  text-decoration: none;
  padding: 1px 2px;
  border-radius: 3px;
  background: var(--ok-soft);
  color: var(--ok);
  box-shadow: inset 0 -1px 0 var(--ok);
}
.diff-body del {
  padding: 1px 2px;
  border-radius: 3px;
  background: var(--danger-soft);
  color: var(--danger);
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
}

/* Penanda jeda paragraf: ditampilkan sebagai lencana kecil, bukan blok warna,
   supaya pemisahan paragraf tidak menenggelamkan perubahan kata. */
.diff-body .pilcrow {
  display: inline-block;
  margin: 0 2px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-menu);
  font-size: 11px;
  font-weight: 600;
  vertical-align: 2px;
}
.diff-body .pilcrow.rm { background: var(--danger-soft); color: var(--danger); }

/* ---- panel ejaan ---- */

.spell-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.spell-bar .btn { flex: 1; justify-content: center; }

.fix {
  padding: 11px 13px;
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.fix + .fix { margin-top: 8px; }

.fix-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.fix-rule { font-size: 10px; font-weight: 500; color: var(--text-3); }

.fix-line {
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
  word-break: break-word;
}
.fix-line del {
  text-decoration: none;
  padding: 0 2px;
  border-radius: 3px;
  background: var(--danger-soft);
  color: var(--danger);
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
}
.fix-line ins {
  text-decoration: none;
  padding: 0 2px;
  border-radius: 3px;
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 500;
}
.fix-msg { font-size: 11.5px; color: var(--text-3); margin-top: 7px; letter-spacing: 0; }
.fix-actions { display: flex; gap: 6px; margin-top: 9px; }

/* ---- daftar ---- */

.list { display: flex; flex-direction: column; gap: 8px; }

.item {
  padding: 11px 13px;
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.item.clickable { cursor: pointer; }
.item.clickable:hover { box-shadow: inset 0 0 0 1px var(--accent-line); transform: translateX(2px); }

.item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.item-title { font-size: 12.5px; font-weight: 500; }
.item-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; letter-spacing: 0; }
.item-quote {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: var(--r-xs);
  background: var(--fill);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-2);
  word-break: break-word;
}

.badge {
  font-size: 10px;
  font-weight: 590;
  letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: 99px;
  flex: none;
}
.badge.error { background: var(--danger-soft); color: var(--danger); }
.badge.warning { background: var(--warn-soft); color: var(--warn); }
.badge.info { background: var(--fill-strong); color: var(--text-2); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.chapter { background: var(--accent-soft); color: var(--accent); }
.badge.scene { background: var(--warn-soft); color: var(--warn); }
.badge.section { background: var(--fill-strong); color: var(--text-2); }

.empty {
  padding: 36px 18px;
  text-align: center;
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.6;
  border-radius: var(--r);
  background: var(--fill);
}

.meter { height: 5px; border-radius: 99px; background: var(--fill-strong); overflow: hidden; margin-top: 8px; }
.meter > i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

/* ---- badan gulung & kartu ---- */

.scroll-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 26px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1100px;
  width: 100%;
}

.card {
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
}
.card h3 { font-size: 18px; font-weight: 700; margin-bottom: 5px; }
.card-note { font-size: 12.5px; color: var(--text-3); margin-bottom: 14px; line-height: 1.55; letter-spacing: 0; }
.card-note code, .hint code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--fill);
  padding: 1px 5px;
  border-radius: 5px;
}

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-head .card-note { margin-bottom: 14px; }

/* Lencana keadaan di sudut kartu — mis. siap / belum diatur. */
.pill {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.pill.is-ok { background: var(--ok-soft); color: var(--ok); }
.pill.is-warn { background: var(--danger-soft); color: var(--danger); }

.card .opt-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metric {
  padding: 17px 19px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
}
.metric b { display: block; font-size: 33px; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.metric span { font-size: 11.5px; color: var(--text-3); letter-spacing: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 11px;
  border-radius: 99px;
  background: var(--fill);
  font-size: 12px;
}
.chip em { font-style: normal; color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.chip.from-revision { background: var(--accent-soft); color: var(--accent); }
.chip.from-revision em { color: inherit; opacity: .7; }
.chip button {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.chip button:hover { background: var(--danger); color: #fff; }

.timeline { display: flex; flex-direction: column; gap: 12px; }
.tl-item { padding-left: 14px; border-left: 2px solid var(--line); }
.tl-item time { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tl-item p { font-size: 12.5px; margin-top: 2px; }

.code {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--surface-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.75;
  overflow-x: auto;
  white-space: pre;
  color: var(--text-2);
  letter-spacing: 0;
}
.copy-code { margin-top: 10px; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table .m { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); white-space: nowrap; }
.table .d { color: var(--text-3); }

/* ---- ruas isian ---- */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 17px; }
.field:last-child { margin-bottom: 0; }
.field label { font-size: 12.5px; font-weight: 500; }
.field input, .field select {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 13px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
.hint { font-size: 11.5px; color: var(--text-3); line-height: 1.5; letter-spacing: 0; }

.key-row { display: flex; gap: 6px; }
.key-row input { flex: 1; font-family: var(--font-mono); font-size: 12px; }

.switch-row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.switch-row:last-child { border-bottom: 0; padding-bottom: 0; }
.switch-row span { display: flex; flex-direction: column; gap: 2px; }
.switch-row strong { font-size: 13px; font-weight: 500; }
.switch-row em { font-style: normal; font-size: 11.5px; color: var(--text-3); line-height: 1.5; letter-spacing: 0; }

/* ---- katalog model ---- */

.catalog-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 13px;
  margin-bottom: 13px;
  border-radius: var(--r-sm);
  background: var(--fill);
  font-size: 11.5px;
  color: var(--text-2);
  letter-spacing: 0;
}
.catalog-status b { font-weight: 590; color: var(--text); font-variant-numeric: tabular-nums; }
.catalog-status.is-warn { background: var(--warn-soft); color: var(--warn); }
.catalog-status.is-warn b { color: inherit; }

.model-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 11px; }
.model-toolbar input[type='search'] {
  flex: 1;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 980px;
  background: var(--surface-2);
  font-size: 13px;
}
.model-toolbar input[type='search']:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
.mini-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); white-space: nowrap; cursor: pointer; }

.model-table thead th {
  padding: 0 10px 9px 0;
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  letter-spacing: 0;
}
.model-table td { padding: 8px 10px 8px 0; vertical-align: middle; }
.model-table tr.is-active { background: var(--accent-soft); }
.model-table input[type='radio'] { accent-color: var(--accent); width: 15px; height: 15px; }
.model-table .mid { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
.model-table .mname { font-weight: 500; }
.price-input {
  width: 88px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.price-input:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
.price-input.is-empty { border-style: dashed; color: var(--text-3); }

.src { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.src-katalog { background: var(--ok-soft); color: var(--ok); }
.src-provider { background: var(--accent-soft); color: var(--accent); }
.src-manual { background: var(--warn-soft); color: var(--warn); }
.src-tidak { background: var(--fill-strong); color: var(--text-3); }
/* Diskon dibedakan warnanya dari asal tarif: yang satu menjawab "dari mana
   angka ini", yang lain "apakah angka ini akan bertahan". */
.src-diskon { background: var(--warn-soft); color: var(--warn); cursor: help; }

/* ---- mode baca ---- */

.reader { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column; }
.reader-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px;
  border-bottom: 1px solid var(--divider);
  background: var(--chrome);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
}
.reader-controls { display: flex; gap: 3px; }
.reader-body {
  flex: 1;
  overflow-y: auto;
  padding: 56px 24px 120px;
  margin: 0 auto;
  width: 100%;
  max-width: var(--reader-width, 680px);
  font-family: var(--reader-font, var(--font-serif));
  font-size: var(--reader-size, 18px);
  line-height: 1.8;
  letter-spacing: 0;
}
.reader-body p { margin: 0 0 1.15em; }
.reader-body h4 {
  margin: 2.4em 0 1em;
  font-size: 0.72em;
  font-weight: 590;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--font-ui);
}
.reader-body hr { border: 0; text-align: center; margin: 2.6em 0; }
.reader-body hr::before { content: '· · ·'; color: var(--text-3); letter-spacing: .6em; }

/* ---- laman masuk ---- */

.auth-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 50% -10%, var(--accent-soft), transparent 70%),
    var(--bg);
}

.auth-shell { width: 100%; max-width: 400px; }

.auth-card {
  padding: 30px 30px 26px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-3);
}

.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }

.auth-card h1 { font-size: 25px; font-weight: 700; letter-spacing: -0.03em; }
.auth-sub { font-size: 13.5px; color: var(--text-3); margin: 6px 0 22px; line-height: 1.55; }

.auth-submit { width: 100%; justify-content: center; margin-top: 6px; padding: 11px 16px; font-size: 14.5px; }

.auth-error {
  padding: 10px 13px;
  margin: 4px 0 14px;
  border-radius: var(--r-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12.5px;
  line-height: 1.5;
}

.auth-ok {
  padding: 10px 13px;
  margin: 4px 0 14px;
  border-radius: var(--r-sm);
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 12.5px;
  line-height: 1.5;
}

.auth-alt { margin-top: 14px; text-align: center; }

/* Tombol yang berperilaku sebagai tautan: tetap <button> supaya keyboard dan
   pembaca layar memperlakukannya sebagai aksi, bukan navigasi. */
.linkish {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--accent);
  cursor: pointer;
  border-radius: 4px;
}
.linkish:hover { text-decoration: underline; }
.linkish:focus-visible { outline: none; box-shadow: var(--ring); }

.tag-opt {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2, var(--line));
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.auth-note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-3);
}

.auth-loading { padding: 26px 0; text-align: center; font-size: 13px; color: var(--text-3); }
.auth-foot { margin-top: 18px; text-align: center; font-size: 11.5px; color: var(--text-3); }

.auth-page .meter { margin-top: 8px; }
.auth-page .meter > i { transition: width .28s var(--ease); }

/* ---- identitas pengguna di rail ---- */

.rail-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--fill);
}
.rail-user .avatar {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-menu);
  font-size: 12px;
  font-weight: 700;
  flex: none;
  text-transform: uppercase;
}
.rail-user .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rail-user .who strong { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-user .who span { font-size: 10.5px; color: var(--text-3); }
.rail-user .icon-btn { margin-left: auto; flex: none; }

/* ---- palet perintah & pintasan ---- */

.palette {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 20px 20px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade .16s var(--ease-out);
}
@keyframes fade { from { opacity: 0; } }

.palette-box {
  width: 100%;
  max-width: 560px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-3);
  overflow: hidden;
  animation: lift .22s var(--ease-out);
}
@keyframes lift { from { opacity: 0; transform: translateY(-10px) scale(.985); } }

.palette-search {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--line);
}
.palette-search svg { width: 17px; height: 17px; color: var(--text-3); flex: none; }
.palette-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-menu);
  font-size: 15.5px;
  font-weight: 500;
}
.palette-search input::placeholder { color: var(--text-3); font-weight: 400; }

.palette-list { max-height: 46vh; overflow-y: auto; padding: 7px; }

.palette-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font-family: var(--font-menu);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.palette-item .pi-icon {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--fill);
  color: var(--text-2);
  flex: none;
}
.palette-item .pi-icon svg { width: 15px; height: 15px; }
.palette-item .pi-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.palette-item .pi-text strong { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item .pi-text span { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item .pi-tag {
  font-size: 10.5px;
  color: var(--text-3);
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--fill);
  flex: none;
}
.palette-item.is-active { background: var(--accent); color: var(--accent-ink); }
.palette-item.is-active .pi-icon { background: rgba(255,255,255,.22); color: inherit; }
.palette-item.is-active .pi-text span,
.palette-item.is-active .pi-tag { color: inherit; opacity: .8; }
.palette-item.is-active .pi-tag { background: rgba(255,255,255,.18); }

.palette-empty { padding: 30px 16px; text-align: center; color: var(--text-3); font-size: 13px; }

.palette-foot {
  display: flex;
  gap: 16px;
  padding: 10px 17px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 11px;
  color: var(--text-3);
}
.palette-foot span { display: inline-flex; align-items: center; gap: 5px; }

kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--fill-strong);
  color: var(--text-2);
  font-family: var(--font-menu);
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}

.shortcuts-box { max-width: 500px; padding: 22px 22px 0; }
.shortcuts-box h3 { font-size: 18px; margin-bottom: 16px; }
.shortcut-grid { display: flex; flex-direction: column; gap: 2px; padding-bottom: 16px; }
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.shortcut-row:last-child { border-bottom: 0; }
.shortcut-row .keys { display: flex; gap: 3px; flex: none; }
.shortcuts-box .palette-foot { margin: 0 -22px; }

/* ---- seret & lepas berkas ---- */

.dropzone {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent-soft) 92%, var(--surface));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade .14s var(--ease-out);
}
.dropzone-inner {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 26px 34px;
  border: 2px dashed var(--accent-line);
  border-radius: var(--r-lg);
  color: var(--accent);
  text-align: center;
}
.dropzone-inner svg { width: 26px; height: 26px; stroke-width: 1.8; }
.dropzone-inner strong { font-family: var(--font-menu); font-size: 14.5px; font-weight: 600; }
.dropzone-inner span { font-size: 11.5px; color: var(--text-3); }

/* ---- ajakan mulai saat kolom masih kosong ---- */

.starter {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 24px 26px;
  pointer-events: none;   /* klik tetap sampai ke kolom tulis */
  animation: fade .3s var(--ease-out);
}
.starter-inner {
  display: grid;
  justify-items: start;
  gap: 9px;
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
}
.starter p { font-family: var(--font-menu); font-size: 12px; font-weight: 550; color: var(--text-2); }
.starter-chips { display: flex; flex-wrap: wrap; gap: 6px; pointer-events: auto; }
.starter-chips button {
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--text);
  font-family: var(--font-menu);
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  transition: background .16s var(--ease), transform .1s var(--ease);
}
.starter-chips button:hover { background: var(--accent-soft); color: var(--accent); }
.starter-chips button:active { transform: scale(.96); }
.starter-hint { font-size: 11px; color: var(--text-3); }
.starter-hint kbd { margin: 0 1px; }

/* ---- gerak halus antarhalaman ---- */

.view.is-active { animation: masuk .26s var(--ease-out); }
@keyframes masuk { from { opacity: 0; transform: translateY(4px); } }

.card { transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.card:hover { box-shadow: inset 0 0 0 1px var(--line-strong), var(--sh-2); }

.metric { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.metric:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--sh-2); }

/* Angka statistik yang baru berubah berdenyut sekejap. */
.stat b.is-bump { animation: bump .42s var(--ease-out); }
@keyframes bump {
  0%   { transform: translateY(3px); opacity: .4; }
  100% { transform: none; opacity: 1; }
}

/* ---- notifikasi ---- */

.toasts {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-3);
  font-size: 13px;
  max-width: 420px;
  animation: rise .32s var(--ease-out);
}
.toast::before {
  content: '';
  width: 7px; height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
.toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toast-body strong { font-weight: 600; }
.toast-detail {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  word-break: break-word;
}
.toast.err::before { background: var(--danger); }
.toast.warn::before { background: var(--warn); }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* ---- responsif ---- */

/* Di bawah lebar ini tidak cukup ruang untuk mengunci semuanya dalam satu layar.
   Halaman dibiarkan menggulung supaya kolom tulis selalu utuh. */
@media (max-width: 1180px) {
  .app { height: auto; min-height: 100vh; overflow: visible; }
  .main { overflow: visible; }
  .rail { position: sticky; top: 0; align-self: start; height: 100vh; }
  .view.is-active { height: auto; }
  .scroll-body { overflow: visible; }
  .topbar { position: sticky; top: 0; }

  .workspace { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .panes { grid-template-columns: 1fr; }
  .pane { min-height: 320px; }
  .inspector { border-left: 0; border-top: 1px solid var(--line); }
  .tab-panel { max-height: 46vh; }

  .two-col, .metric-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 66px 1fr; }
  .brand-text, .nav-item span, .rail-version { display: none; }
  .nav-item { justify-content: center; }

  .brand { flex-direction: column; gap: 10px; padding: 6px 0 0; }
  .rail-toggle { margin: 0; }
  /* Penyesuaian menu profil untuk rail sempit ada di akhir berkas — harus
     sesudah gaya dasarnya, kalau tidak yang belakangan justru menang. */
  .two-col, .metric-grid { grid-template-columns: 1fr; }
  .topbar { padding: 14px 16px 12px; }
  .topbar-actions { gap: 6px; }
  .btn { padding: 6px 12px; }
  .stat-strip { padding: 0 16px; }
  .price-tag { margin-left: 0; }
  .editor-area { padding: 18px 18px 36px; font-size: 15.5px; }
  .card { padding: 16px; }
}

/* ================= batch ================= */

.mono-area {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-alt);
  color: var(--text-1);
  resize: vertical;
}
.mono-area:focus { outline: none; border-color: var(--accent); }

.batch-drop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--text-3);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.batch-drop.is-over { border-color: var(--accent); background: var(--paper-alt); }

.batch-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }

/* Kotak centang dengan keterangan di bawahnya. Penjelasan sependek satu baris
   pun layak ada di sini: mode ketat menentukan apakah teks boleh berubah. */
.check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; cursor: pointer; }
.check input { margin-top: 3px; flex: none; }
.check span { display: flex; flex-direction: column; gap: 2px; }
.check strong { font-size: 13px; font-weight: 600; }
.check em { font-style: normal; font-size: 11.5px; color: var(--text-3); line-height: 1.5; }

.card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* ---- daftar pekerjaan ---- */

.batch-list { display: flex; flex-direction: column; gap: 2px; }

.batch-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .18s var(--ease);
}
.batch-row:hover { background: var(--paper-alt); }
.batch-row.is-active { background: var(--paper-alt); box-shadow: inset 2px 0 0 var(--accent); }

.batch-row .bn { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.batch-row .bn strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-row .bn span { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.batch-row .bc { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.badge-status {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--paper-alt);
  color: var(--text-2);
  border: 1px solid var(--line);
}
.badge-status.is-jalan { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-color: transparent; }
.badge-status.is-selesai { background: color-mix(in srgb, var(--ok, #16a34a) 14%, transparent); color: var(--ok, #16a34a); border-color: transparent; }
.badge-status.is-gagal,
.badge-status.is-terputus { background: color-mix(in srgb, var(--danger, #dc2626) 13%, transparent); color: var(--danger, #dc2626); border-color: transparent; }

/* ---- rincian ---- */

.batch-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.batch-detail-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.progress {
  height: 6px;
  border-radius: 999px;
  background: var(--paper-alt);
  overflow: hidden;
  margin: 16px 0 18px;
}
.progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width .3s var(--ease);
}

.batch-metrics { margin-bottom: 4px; }

.batch-filter { display: flex; gap: 4px; margin: 18px 0 10px; flex-wrap: wrap; }
.batch-filter button {
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.batch-filter button:hover { background: var(--paper-alt); }
.batch-filter button.is-active { background: var(--accent); border-color: transparent; color: #fff; }

.batch-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.batch-table th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  font-weight: 600;
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--line);
}
.batch-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.batch-table tbody tr { cursor: pointer; transition: background .15s var(--ease); }
.batch-table tbody tr:hover { background: var(--paper-alt); }
.batch-table .id { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); white-space: nowrap; }
.batch-table .num { font-variant-numeric: tabular-nums; color: var(--text-3); }
.batch-table .err { color: var(--danger, #dc2626); font-size: 11.5px; }

.batch-pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; }
.batch-pager .muted { font-variant-numeric: tabular-nums; }

@media (max-width: 1180px) {
  .batch-opts { grid-template-columns: 1fr; }
  .batch-detail-head { flex-direction: column; }
}

/* ---- setelan tersimpan ---- */

.preset-bar { padding: 0 2px 14px; border-bottom: 1px solid var(--divider); margin-bottom: 14px; }
.preset-row { display: flex; gap: 6px; align-items: center; }
.preset-row select { flex: 1; min-width: 0; }
.preset-row .icon-btn { flex: none; }
.preset-row .icon-btn.is-on svg { color: var(--accent); }
.preset-bar .hint { display: block; margin-top: 8px; line-height: 1.5; }

/* ================= menu profil ================= */

.profil { position: relative; }

.profil-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .18s var(--ease);
}
.profil-trigger:hover { background: var(--paper-alt); }
.profil-trigger .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.profil-trigger .who strong { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-trigger .who span { font-size: 10.5px; color: var(--text-3); }
.profil-trigger .chev { width: 14px; height: 14px; margin-left: auto; flex: none; color: var(--text-3); transition: transform .18s var(--ease); }
.profil.is-open .profil-trigger .chev { transform: rotate(180deg); }

.app.rail-collapsed .profil-trigger { justify-content: center; padding: 8px 0; }
.app.rail-collapsed .profil-trigger .who,
.app.rail-collapsed .profil-trigger .chev { display: none; }

/* Menu naik ke atas: pemicunya ada di dasar rail, jadi menu yang turun akan
   keluar dari layar.

   Posisinya fixed, bukan absolute, dan koordinatnya dihitung saat dibuka.
   Alasannya .app memakai overflow:hidden — menu yang melebar melewati rail
   selebar 66px akan terpotong rapi di tepinya, dan separuh isinya hilang. */
.profil-menu {
  position: fixed;
  min-width: 248px;
  /* Tanpa batas atas, elemen berposisi tetap melebar mengikuti kalimat
     terpanjang di dalamnya — keterangan surel bisa membuatnya selebar layar. */
  max-width: min(320px, calc(100vw - 16px));
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
  background: var(--panel-bg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  z-index: 60;
}
.app.rail-collapsed .profil-menu { left: 0; min-width: 236px; }

.profil-head {
  padding: 10px 10px 8px;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
  word-break: break-word;
}

.profil-group { padding: 6px 0; border-top: 1px solid var(--divider); }
.profil-group:first-of-type { border-top: 0; }

.profil-label {
  display: block;
  padding: 2px 10px 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  font-weight: 600;
}

.profil-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-1);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background .18s var(--ease);
}
.profil-item:hover { background: var(--paper-alt); }
.profil-item svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--text-3); }
.profil-item.is-danger { color: var(--danger, #dc2626); }
.profil-item.is-danger svg { color: currentColor; }

.profil-menu .theme-seg { grid-template-columns: repeat(3, 1fr); margin: 0 6px 2px; }
.profil-menu .theme-seg button { flex-direction: column; gap: 3px; padding: 8px 4px; }
.profil-menu .theme-seg em { font-style: normal; font-size: 10px; }

.profil-foot { padding: 8px 10px 4px; font-size: 10.5px; color: var(--text-3); border-top: 1px solid var(--divider); }

/* ================= kelola akun ================= */

.akun-form { padding: 16px 0 4px; border-bottom: 1px solid var(--divider); margin-bottom: 4px; }

.kredensial {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.kredensial-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.kredensial-head strong { font-size: 13.5px; font-weight: 600; }

.kredensial-peringatan {
  margin: 0 0 14px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-2);
}

.kredensial-baris {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--divider);
}
.kredensial-baris .kr-label { font-size: 11.5px; color: var(--text-3); }
.kredensial-baris code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

#akunTable td .btn { margin-left: 4px; }
#akunTable .aksi { white-space: nowrap; text-align: right; }

@media (max-width: 1180px) {
  .kredensial-baris { grid-template-columns: 1fr; gap: 4px; }
}

/* Rail yang menyempit karena lebar layar, bukan karena dilipat, memperlakukan
   menu profil sama seperti mode terlipat. Blok ini sengaja berada di akhir:
   aturan dasarnya ditulis di atas, dan pada kekhususan yang sama yang
   belakangan yang menang. */
@media (max-width: 860px) {
  .profil-trigger { justify-content: center; padding: 8px 0; }
  .profil-trigger .who,
  .profil-trigger .chev { display: none; }
  .profil-menu { min-width: 236px; }
}

/* ---- lencana pada rail yang menyempit ---- */

/* Saat labelnya hilang, lencana yang tetap sebaris dengan ikon mendorong ikon
   itu keluar dari tengah — satu menu jadi tampak tidak sejajar dengan yang lain.
   Lencananya dipindah menempel ke sudut ikon: hitungannya tetap terbaca, dan
   ikonnya kembali ke tengah seperti menu lainnya.

   Blok ini berada di akhir berkas dengan sengaja: aturan dasar .nav-badge
   ditulis di atas, dan pada kekhususan yang sama yang belakangan yang menang. */
.nav-item { position: relative; }

.app.rail-collapsed .nav-item .nav-badge,
.app.rail-collapsed .nav-item .dot {
  position: absolute;
  top: 2px;
  right: 3px;
  margin: 0;
}

.app.rail-collapsed .nav-item .nav-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  line-height: 1;
  /* Cincin setipis warna rail memisahkan lencana dari ikon di belakangnya. */
  box-shadow: 0 0 0 2px var(--rail-bg);
}

@media (max-width: 860px) {
  .nav-item .nav-badge,
  .nav-item .dot {
    position: absolute;
    top: 2px;
    right: 3px;
    margin: 0;
  }

  .nav-item .nav-badge {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--rail-bg);
  }
}

/* ---- tombol tutup pada ajakan mulai ---- */

.starter-inner { position: relative; }

.starter-close {
  position: absolute;
  top: 6px;
  right: 6px;
  /* Kartunya sendiri tembus klik supaya kolom tulis di belakangnya tetap bisa
     ditekan; tombol ini harus mengembalikan penerimaan klik untuk dirinya. */
  pointer-events: auto;
  opacity: .5;
  transition: opacity .18s var(--ease);
}
.starter-close:hover,
.starter-close:focus-visible { opacity: 1; }

/* Ruang untuk tombolnya, supaya tidak menimpa teks ajakan. */
.starter-inner p { padding-right: 26px; }

/* ================= geser mendatar ================= */

/* Bilah tab dan bilah statistik menyembunyikan batang gulir supaya terlihat
   bersih. Di layar sentuh itu tidak masalah — isinya bisa diseret. Dengan
   tetikus, menyembunyikannya berarti isi yang meluber tidak bisa dijangkau
   sama sekali: tidak ada batang gulir, tidak ada sisi yang bisa ditarik.
   Batangnya dikembalikan, setipis mungkin, dan hanya muncul saat isinya
   memang meluber. */
.tabs,
.stats-scroll {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.tabs:hover,
.stats-scroll:hover { scrollbar-color: var(--line) transparent; }

.tabs::-webkit-scrollbar,
.stats-scroll::-webkit-scrollbar { display: block; height: 4px; }

.tabs::-webkit-scrollbar-thumb,
.stats-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }

.tabs:hover::-webkit-scrollbar-thumb,
.stats-scroll:hover::-webkit-scrollbar-thumb { background: var(--line); }

.tabs::-webkit-scrollbar-track,
.stats-scroll::-webkit-scrollbar-track { background: transparent; }

/* Saat sedang diseret, kursor berubah dan teks tidak ikut tersorot. */
.geser-x.is-geser { cursor: grabbing; -webkit-user-select: none; user-select: none; }

/* ---- jarak hasil di bawah tombol ---- */

/* Kotak hasil yang menempel langsung di bawah barisan tombol terbaca seolah
   bagian dari tombolnya. Diberi jarak yang sama dengan jarak antar bagian
   lain di dalam kartu. */
.opt-actions + .code,
.card-actions + .code,
.opt-actions + .conn-out,
.card-actions + .conn-out { margin-top: 14px; }