/* ============================================================================
   TILE VAULT — Client Portal design system
   ----------------------------------------------------------------------------
   One hand-authored stylesheet, served from the embedded FS. It replaces the
   Tailwind Play CDN the templates used to pull at runtime: that shipped a JIT
   compiler to every browser, needed outbound internet from an operator
   workstation, and restyled the page after first paint. An air-gapped
   deployment now renders correctly with no network at all.

   Sections
     1. Tokens
     2. Reset & base
     3. Typography & text utilities
     4. Layout primitives (app shell, page header, grid, stack)
     5. Surfaces (panel, metric, definition list, copyable value)
     6. Buttons
     7. Forms
     8. Tables
     9. Badges, status, chips
    10. Alerts
    11. Modals
    12. Menus
    13. Empty / loading states
    14. Toast
    15. Auth & standalone pages
    16. Landing page
    17. Utilities
    18. Responsive & print
   ========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */

:root {
  /* Neutrals — a graphite ramp with a faint cool cast. Deliberately narrow:
     the interface separates things with hairlines and spacing, not with a
     dozen competing surface shades. */
  --ink-0:  #0e1113;   /* page */
  --ink-1:  #131719;   /* rails: sidebar, header */
  --ink-2:  #171b1e;   /* panels */
  --ink-3:  #1c2124;   /* inputs, nested surfaces */
  --ink-4:  #232a2e;   /* hover */
  --ink-5:  #2b3338;   /* pressed */

  --line:    #232a2e;  /* hairline between rows and sections */
  --line-2:  #303940;  /* control borders */
  --line-3:  #3c464e;  /* hovered control borders */

  --text-0: #e6ebee;   /* primary */
  --text-1: #a7b2b9;   /* secondary */
  --text-2: #78848c;   /* muted, labels */
  --text-3: #5a666e;   /* faint, placeholders */

  /* Brand — used sparingly: primary action, active navigation, ACTIVE state.
     Large fills use the darker step so white label text stays legible. */
  --accent-700: #077854;
  --accent-600: #0a9066;
  --accent-500: #0ba876;
  --accent-400: #14c089;
  --accent-tint: rgba(20, 192, 137, 0.10);
  --accent-line: rgba(20, 192, 137, 0.28);

  /* Status — one hue per meaning, muted enough to sit beside body text. */
  --info-400:  #5aa2e0;
  --info-tint: rgba(90, 162, 224, 0.10);
  --info-line: rgba(90, 162, 224, 0.26);

  --warn-400:  #d9a441;
  --warn-tint: rgba(217, 164, 65, 0.10);
  --warn-line: rgba(217, 164, 65, 0.26);

  --danger-400: #e06a6a;
  --danger-500: #cf4f4f;
  --danger-600: #b83e3e;
  --danger-tint: rgba(224, 106, 106, 0.10);
  --danger-line: rgba(224, 106, 106, 0.26);

  --violet-400: #9d8ff0;
  --violet-tint: rgba(157, 143, 240, 0.10);
  --violet-line: rgba(157, 143, 240, 0.26);

  /* Typography */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Consolas,
               "Liberation Mono", Menlo, monospace;

  --fs-2xs: 10.5px;
  --fs-xs:  11.5px;
  --fs-sm:  12.5px;
  --fs-md:  13px;
  --fs-base: 14px;
  --fs-lg:  16px;
  --fs-xl:  19px;
  --fs-2xl: 24px;

  /* Spacing — 4px base */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* Radius — small on purpose. Pill-shaped cards read as consumer SaaS. */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;

  /* One elevation, for overlays only. Everything else uses a hairline. */
  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.55);

  /* Theme-dependent one-offs: alert body text, table row hover, the modal
     backdrop, the translucent landing header, selected-text colour. */
  --accent-text: #b6e3d1;
  --info-text:   #c3d9ee;
  --warn-text:   #e6d2ac;
  --danger-text: #eec2c2;
  --row-hover:   rgba(255, 255, 255, 0.022);
  --backdrop:    rgba(6, 8, 9, 0.72);
  --site-header-bg: rgba(14, 17, 19, 0.92);
  --selection-text: #fff;

  /* API reference code panels stay dark in both themes, like most API
     reference sites: code reads best on a dark ground. */
  --code-bg:    #0d1114;
  --code-panel: #12181c;
  --code-line:  #222b31;
  --code-text:  #d5dde2;
  --code-muted: #7d8a92;
  --tok-k: #82b1ff;
  --tok-s: #a5d98f;
  --tok-c: #66737b;
  --tok-n: #f0b072;
  --tok-p: #e2a5f5;

  --sidebar-w: 236px;
  --header-h: 52px;

  color-scheme: dark;
}

/* Light theme. Dark stays the base palette above; theme.js sets
   data-theme="light" on <html> before first paint when the viewer chose light
   or chose "system" on a light-preferring OS. Only colours change here —
   type, spacing and radii are shared. Status and accent hues are taken a step
   darker than in dark mode so text in those colours keeps its contrast on a
   white surface. */
:root[data-theme="light"] {
  --ink-0:  #f5f7f8;
  --ink-1:  #ffffff;
  --ink-2:  #ffffff;
  --ink-3:  #f0f3f5;
  --ink-4:  #e7ecef;
  --ink-5:  #dce3e7;

  --line:    #e2e7ea;
  --line-2:  #cdd5da;
  --line-3:  #b3bec5;

  --text-0: #12171a;
  --text-1: #3b464d;
  --text-2: #5b676f;
  --text-3: #7f8b93;

  --accent-700: #05603f;
  --accent-600: #077854;
  --accent-500: #0a9066;
  --accent-400: #077854;
  --accent-tint: rgba(10, 144, 102, 0.08);
  --accent-line: rgba(10, 144, 102, 0.30);

  --info-400:  #1f6aa8;
  --info-tint: rgba(31, 106, 168, 0.07);
  --info-line: rgba(31, 106, 168, 0.28);

  --warn-400:  #8f6200;
  --warn-tint: rgba(196, 136, 20, 0.09);
  --warn-line: rgba(196, 136, 20, 0.32);

  --danger-400: #b93434;
  --danger-500: #b83e3e;
  --danger-600: #a33232;
  --danger-tint: rgba(196, 60, 60, 0.07);
  --danger-line: rgba(196, 60, 60, 0.28);

  --violet-400: #5e4fc9;
  --violet-tint: rgba(94, 79, 201, 0.07);
  --violet-line: rgba(94, 79, 201, 0.26);

  --shadow-overlay: 0 16px 48px rgba(18, 28, 36, 0.18);

  --accent-text: #0b5a40;
  --info-text:   #1b4c76;
  --warn-text:   #684704;
  --danger-text: #8c2a2a;
  --row-hover:   rgba(18, 30, 40, 0.035);
  --backdrop:    rgba(18, 26, 32, 0.45);
  --site-header-bg: rgba(255, 255, 255, 0.92);
  --selection-text: var(--text-0);

  /* API reference code panels stay dark in both themes, like most API
     reference sites: code reads best on a dark ground. */
  --code-bg:    #0d1114;
  --code-panel: #12181c;
  --code-line:  #222b31;
  --code-text:  #d5dde2;
  --code-muted: #7d8a92;
  --tok-k: #82b1ff;
  --tok-s: #a5d98f;
  --tok-c: #66737b;
  --tok-n: #f0b072;
  --tok-p: #e2a5f5;

  color-scheme: light;
}

/* ── 2. Reset & base ─────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text-0);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
dl, dd, dt { margin: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--text-0); }

svg { display: block; flex-shrink: 0; }

code, kbd, samp, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }

/* Focus: one visible ring everywhere, never removed. A keyboard operator on a
   console that provisions cryptographic keys must always see where they are. */
:focus-visible {
  outline: 2px solid var(--accent-400);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent-line); color: var(--selection-text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: var(--ink-5) transparent; }

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

.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;
}
.skip-link {
  position: absolute; left: var(--sp-3); top: -100px; z-index: 300;
  background: var(--ink-3); color: var(--text-0);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm);
}
.skip-link:focus { top: var(--sp-3); }

/* ── 3. Typography & text utilities ──────────────────────────────────────── */

.t-2xs { font-size: var(--fs-2xs); }
.t-xs  { font-size: var(--fs-xs); }
.t-sm  { font-size: var(--fs-sm); }
.t-md  { font-size: var(--fs-md); }
.t-lg  { font-size: var(--fs-lg); }

.t-primary   { color: var(--text-0); }
.t-secondary { color: var(--text-1); }
.t-muted     { color: var(--text-2); }
.t-faint     { color: var(--text-3); }
.t-accent    { color: var(--accent-400); }
.t-danger    { color: var(--danger-400); }
.t-warn      { color: var(--warn-400); }
.t-info      { color: var(--info-400); }

.t-medium { font-weight: 500; }
.t-semi   { font-weight: 600; }

.t-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
}

.t-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-break    { word-break: break-all; overflow-wrap: anywhere; }
.t-nowrap   { white-space: nowrap; }
.t-right    { text-align: right; }
.t-center   { text-align: center; }
.t-clamp-2  { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── 4. Layout primitives ────────────────────────────────────────────────── */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--ink-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  min-height: var(--header-h);
}
.sidebar-brand .mark { color: var(--accent-400); }
.sidebar-brand .wordmark { font-size: var(--fs-md); font-weight: 600; color: var(--text-0); }
.sidebar-brand .subtitle { font-size: var(--fs-2xs); color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 1px; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-3) var(--sp-2); }

.nav-group + .nav-group { margin-top: var(--sp-5); }
.nav-group-label {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-3);
  padding: 0 var(--sp-2); margin-bottom: var(--sp-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 7px var(--sp-2);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  color: var(--text-1);
  border-left: 2px solid transparent;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.nav-item + .nav-item { margin-top: 1px; }
.nav-item svg { width: 15px; height: 15px; color: var(--text-3); transition: color 0.12s ease; }
.nav-item:hover { background: var(--ink-3); color: var(--text-0); }
.nav-item:hover svg { color: var(--text-1); }
.nav-item.is-active {
  background: var(--accent-tint);
  color: var(--accent-400);
  border-left-color: var(--accent-500);
  font-weight: 500;
}
.nav-item.is-active svg { color: var(--accent-400); }
/* Tier a menu item belongs to (e.g. "Starter" on Laporan audit PDP). */
.nav-badge {
  margin-left: auto;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: var(--r-sm);
  border: 1px solid var(--info-line); background: var(--info-tint); color: var(--info-400);
}

.sidebar-footer { border-top: 1px solid var(--line); padding: var(--sp-3); }

.identity { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-2) var(--sp-3); min-width: 0; }
.avatar {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: var(--r-md);
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  color: var(--accent-400);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase;
}
.avatar-lg { width: 44px; height: 44px; flex-basis: 44px; font-size: var(--fs-lg); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--header-h);
  flex: 0 0 var(--header-h);
  background: var(--ink-1);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-6);
  position: sticky;
  top: 0;
  z-index: 20;
}
.breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); min-width: 0; }
.breadcrumb .sep { color: var(--text-3); }
.breadcrumb .current { color: var(--text-0); font-weight: 500; }

.topbar-meta { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }
.meta-item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.meta-item svg { width: 13px; height: 13px; color: var(--text-3); }

.content { flex: 1; padding: var(--sp-6); min-width: 0; }
.content-narrow { max-width: 900px; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.page-title { font-size: var(--fs-xl); font-weight: 600; color: var(--text-0); }
.page-desc  { font-size: var(--fs-md); color: var(--text-2); margin-top: 3px; max-width: 78ch; }
.page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

.row  { display: flex; align-items: center; gap: var(--sp-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.row-top { display: flex; align-items: flex-start; gap: var(--sp-2); }
.row-wrap { flex-wrap: wrap; }
.row-center { justify-content: center; }
.col  { display: flex; flex-direction: column; min-width: 0; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── 5. Surfaces ─────────────────────────────────────────────────────────── */

.panel {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.panel-pad { padding: var(--sp-5); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.panel-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-0); }
.panel-body { padding: var(--sp-4); }
.panel-dashed { border-style: dashed; background: transparent; }

/* Metric — a labelled number. No sparkline, no delta arrow, no invented trend:
   the backend reports a count, so the tile shows a count. */
.metric { padding: var(--sp-4) var(--sp-5); }
.metric-label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-2); }
.metric-value { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; color: var(--text-0); margin-top: var(--sp-2); line-height: 1.1; }
.metric-value.is-accent { color: var(--accent-400); }
.metric-value.is-warn   { color: var(--warn-400); }
.metric-value.is-empty  { color: var(--text-3); }
.metric-note { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-2); }

/* ── Price list (Paket & tagihan) ─────────────────────────────────────────── */

.plan-card { display: flex; flex-direction: column; }
.plan-card.is-fit { border-color: var(--accent-line); box-shadow: inset 0 2px 0 var(--accent-500); }
.plan-head { padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--line); }
.plan-name { display: flex; align-items: center; gap: var(--sp-2); min-height: 22px; font-size: var(--fs-md); font-weight: 600; color: var(--text-0); }
.plan-price { font-size: var(--fs-xl); font-weight: 600; color: var(--text-0); margin-top: var(--sp-2); letter-spacing: -0.01em; }
.plan-period { font-size: var(--fs-xs); color: var(--text-3); }
.plan-audience { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--sp-2); }
.plan-list { list-style: none; margin: 0; padding: var(--sp-2) 0; }
.plan-list li {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: 5px var(--sp-4); font-size: var(--fs-sm); color: var(--text-2);
}
.plan-list li span:last-child:not(:first-child) { color: var(--text-0); text-align: right; }
.panel-body .plan-list { padding: 0; }
.panel-body .plan-list li { padding: 5px 0; color: var(--text-1); }
.plan-annual { font-size: var(--fs-xs); color: var(--accent-400); margin-top: 2px; }
.mcard .plan-list { padding: var(--sp-3) 0 0; margin-top: var(--sp-3); border-top: 1px solid var(--line); }
.mcard .plan-list li { padding: 4px 0; }

/* Price components around the tiers (kredit, tahunan, on-prem, mitra, …). */
.extra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.extra { padding: var(--sp-4); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin: 0 0 -1px -1px; }
.extra-title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-sm); font-weight: 600; color: var(--text-1); }
.extra-price { font-size: var(--fs-lg); font-weight: 600; color: var(--text-0); margin-top: var(--sp-2); }
.extra-unit { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-3); margin-top: 1px; }
.extra-desc { font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); margin-top: var(--sp-1); }

.dl-row { display: flex; align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); }
.dl-row + .dl-row { border-top: 1px solid var(--line); }
.dl-key { flex: 0 0 168px; font-size: var(--fs-sm); color: var(--text-2); }
.dl-val { flex: 1; min-width: 0; font-size: var(--fs-md); color: var(--text-0); }

.value-box { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.value-code {
  flex: 1; min-width: 0;
  background: var(--ink-0);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-1);
  word-break: break-all;
  overflow-wrap: anywhere;
}
.value-code.is-secret { color: var(--warn-400); }
.value-code.is-accent { color: var(--accent-400); }
.value-code.is-scroll { max-height: 240px; overflow-y: auto; white-space: pre-wrap; }

/* ── 6. Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px var(--sp-3);
  min-height: 30px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--ink-3);
  color: var(--text-0);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn:hover { background: var(--ink-4); border-color: var(--line-3); color: var(--text-0); }
.btn:active { background: var(--ink-5); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 14px; height: 14px; }

.btn-primary { background: var(--accent-600); border-color: var(--accent-600); color: #fff; }
.btn-primary:hover { background: var(--accent-500); border-color: var(--accent-500); color: #fff; }
.btn-primary:active { background: var(--accent-700); border-color: var(--accent-700); }

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

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-1); }
.btn-ghost:hover { background: var(--ink-3); border-color: var(--line); color: var(--text-0); }

/* Outline variants keep a row-level action quieter than the page's primary
   action while still reading as its own risk class. */
.btn-outline-danger { background: transparent; border-color: var(--danger-line); color: var(--danger-400); }
.btn-outline-danger:hover { background: var(--danger-tint); border-color: var(--danger-400); color: var(--danger-400); }

.btn-outline-warn { background: transparent; border-color: var(--warn-line); color: var(--warn-400); }
.btn-outline-warn:hover { background: var(--warn-tint); border-color: var(--warn-400); color: var(--warn-400); }

.btn-outline-accent { background: transparent; border-color: var(--accent-line); color: var(--accent-400); }
.btn-outline-accent:hover { background: var(--accent-tint); border-color: var(--accent-400); color: var(--accent-400); }

.btn-sm { min-height: 26px; padding: 3px var(--sp-2); font-size: var(--fs-sm); }
.btn-sm svg { width: 12px; height: 12px; }
.btn-lg { min-height: 38px; padding: var(--sp-2) var(--sp-5); font-size: var(--fs-base); }
.btn-block { width: 100%; }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; flex-shrink: 0;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text-3);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.btn-icon:hover { background: var(--ink-4); color: var(--text-0); }
.btn-icon svg { width: 14px; height: 14px; }
.btn-icon.is-ok { color: var(--accent-400); }

/* A pagination endpoint that is unavailable — rendered as text, not a button,
   because there is nothing to activate. */
.btn-static {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--sp-3); min-height: 30px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-md); color: var(--text-3);
  background: transparent; cursor: not-allowed;
}

/* ── 7. Forms ────────────────────────────────────────────────────────────── */

.field { display: block; }
.field + .field { margin-top: var(--sp-4); }

.label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text-1); margin-bottom: 5px; }
.label .req { color: var(--danger-400); margin-left: 2px; }
.hint { font-size: var(--fs-xs); color: var(--text-3); margin-top: 5px; }
.hint-mono { font-family: var(--font-mono); }

.input, .select, .textarea {
  display: block;
  width: 100%;
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 7px var(--sp-3);
  color: var(--text-0);
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: 1.45;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; }
.textarea { resize: vertical; min-height: 64px; }
.input-mono, .textarea-mono { font-family: var(--font-mono); font-size: var(--fs-sm); }

.select {
  appearance: none;
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378848c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
}
.select option { background: var(--ink-3); color: var(--text-0); }

.input-search { position: relative; }
.input-search > svg {
  position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--text-3); pointer-events: none;
}
.input-search .input { padding-left: var(--sp-8); }

.check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-md); color: var(--text-1); }
.check input[type="checkbox"], .check input[type="radio"] {
  width: 15px; height: 15px; margin: 0; accent-color: var(--accent-500);
  cursor: pointer; flex-shrink: 0;
}
.check:hover { color: var(--text-0); }
.check-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* A checkbox rendered as a full-width option row. */
.check-card {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-3);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.check-card:hover { border-color: var(--line-3); background: var(--ink-4); }
.check-card:focus-within { border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-tint); }
.check-card input { margin-top: 2px; }

/* A bordered group of related fields — the key slots on Create Application. */
.fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  background: var(--ink-3);
  margin: 0;
}
.fieldset + .fieldset { margin-top: var(--sp-4); }
.fieldset-optional { border-style: dashed; background: transparent; }
.fieldset > legend { padding: 0; }
.fieldset-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.fieldset-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-0); }
.fieldset-note { font-size: var(--fs-xs); color: var(--text-3); }

.slot-mark {
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xs); font-weight: 700;
}
.slot-rest    { background: var(--accent-tint); color: var(--accent-400); }
.slot-transit { background: var(--info-tint);   color: var(--info-400); }
.slot-signing { background: var(--violet-tint); color: var(--violet-400); }
.slot-mac     { background: var(--warn-tint);   color: var(--warn-400); }

.filterbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}
.filterbar .field { margin: 0; }
.filterbar-actions { display: flex; gap: var(--sp-2); margin-left: auto; }

/* Masked secret textarea.
   A <textarea> is required so a multi-line PEM private key can be pasted, and
   it has no type="password" to hide what is typed. -webkit-text-security draws
   discs in Chromium/Safari; Firefox has no equivalent, so blur stands in — the
   text is still unreadable over someone's shoulder and one click reveals it. */
.secret-masked { -webkit-text-security: disc; text-security: disc; }
@supports not (-webkit-text-security: disc) {
  .secret-masked { filter: blur(3.5px); }
}

/* ── 8. Tables ───────────────────────────────────────────────────────────── */

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-2);
  overflow: hidden;
}
.table-scroll { overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }

.table thead th {
  background: var(--ink-1);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-4);
  text-align: left;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}

/* Sortable date column (templates/partials.html). The whole header is the
   control; the arrow says which way the list is ordered now. */
.th-sort-link {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; cursor: pointer;
}
.th-sort-link:hover, .th-sort-link.is-active { color: var(--text-0); }
.th-sort-link:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 2px; border-radius: 2px; }
.th-sort-icon { font-size: 11px; opacity: 0.45; }
.th-sort-link.is-active .th-sort-icon { opacity: 1; color: var(--accent-400); }
.table thead th.num { text-align: right; }

.table tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  color: var(--text-1);
  vertical-align: middle;
}
.table tbody td.num { text-align: right; }
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr { transition: background-color 0.1s ease; }
.table tbody tr:hover { background: var(--row-hover); }

.table tr.is-expandable { cursor: pointer; }
.table tr.is-expandable:focus-visible { outline: 2px solid var(--accent-400); outline-offset: -2px; }
.row-chevron { width: 13px; height: 13px; color: var(--text-3); transition: transform 0.15s ease, color 0.12s ease; }
.table tr.is-expandable:hover .row-chevron { color: var(--text-1); }
.row-chevron.is-open { transform: rotate(90deg); }

.detail-cell { background: var(--ink-0); padding: var(--sp-4); }

.table-nested { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table-nested th {
  text-align: left; padding: 0 var(--sp-4) var(--sp-2) 0;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--line);
}
.table-nested td { padding: 7px var(--sp-4) 7px 0; border-top: 1px solid var(--line); color: var(--text-1); }
.table-nested tbody tr:first-child td { border-top: 0; }

.cell-primary { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.cell-icon {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: var(--r-sm);
  background: var(--ink-3);
  border: 1px solid var(--line);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
}
.cell-icon svg { width: 14px; height: 14px; }
.cell-name { font-size: var(--fs-md); font-weight: 500; color: var(--text-0); }
.cell-sub  { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); margin-top: 1px; }

.id-cell { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-2); }

/* Copy affordance that appears on row hover but stays reachable by keyboard:
   focus restores it too, so it is not a mouse-only control. */
.hover-reveal { opacity: 0; transition: opacity 0.12s ease; }
tr:hover .hover-reveal, .hover-reveal:focus-visible { opacity: 1; }

.table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-3); min-height: 28px; flex-wrap: wrap;
}
.result-count { font-size: var(--fs-md); color: var(--text-2); }
.result-count strong { color: var(--text-0); font-weight: 600; }
.filter-tags { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-top: var(--sp-4); flex-wrap: wrap;
}
.pagination-note { font-size: var(--fs-sm); color: var(--text-3); }
.pagination-controls { display: flex; gap: var(--sp-2); }

/* ── 9. Badges, status, chips ────────────────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-3);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-1);
  white-space: nowrap;
}
.badge-accent { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-400); }
.badge-info   { background: var(--info-tint);   border-color: var(--info-line);   color: var(--info-400); }
.badge-warn   { background: var(--warn-tint);   border-color: var(--warn-line);   color: var(--warn-400); }
.badge-danger { background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger-400); }
.badge-violet { background: var(--violet-tint); border-color: var(--violet-line); color: var(--violet-400); }
.badge-mono   { font-family: var(--font-mono); letter-spacing: 0; font-weight: 500; }

/* Status = coloured dot + plain label. In a dense table that reads faster than
   a filled pill on every row, and it stays legible for a reader who cannot
   separate the hues, because the word is always there. */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); white-space: nowrap; color: var(--text-1); }
.status .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--text-3); }
.status-active      { color: var(--accent-400); font-weight: 500; }
.status-active .dot { background: var(--accent-400); }
.status-pre-active      { color: var(--info-400); }
.status-pre-active .dot { background: var(--info-400); }
.status-suspended      { color: var(--warn-400); }
.status-suspended .dot { background: var(--warn-400); }
.status-deactivated      { color: var(--text-1); }
.status-deactivated .dot { background: var(--text-2); }
.status-revoked      { color: var(--danger-400); }
.status-revoked .dot { background: var(--danger-400); }
.status-compromised      { color: var(--warn-400); font-weight: 500; }
.status-compromised .dot { background: var(--warn-400); }
.status-destroyed      { color: var(--text-3); }
.status-destroyed .dot { background: var(--text-3); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 4px 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--ink-3);
  font-size: var(--fs-sm);
  color: var(--text-1);
  max-width: 230px;
}
.chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; flex-shrink: 0;
  border: 0; border-radius: var(--r-xs);
  background: transparent; color: var(--text-3); cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.chip-remove:hover { background: var(--danger-tint); color: var(--danger-400); }
.chip-remove svg { width: 10px; height: 10px; }

.chip-add {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-sm);
  color: var(--text-3);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.chip-add:hover { border-color: var(--line-3); color: var(--text-1); }
.chip-add svg { width: 10px; height: 10px; }

.chip-list { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

/* ── 10. Alerts ──────────────────────────────────────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--ink-2);
  font-size: var(--fs-md);
  color: var(--text-1);
}
.alert svg { width: 16px; height: 16px; margin-top: 1px; }
.alert-title { font-weight: 600; color: var(--text-0); display: block; margin-bottom: 2px; }

.alert-danger { border-color: var(--danger-line); border-left-color: var(--danger-500); background: var(--danger-tint); color: var(--danger-text); }
.alert-danger svg { color: var(--danger-400); }
.alert-danger .alert-title { color: var(--danger-400); }

.alert-warn { border-color: var(--warn-line); border-left-color: var(--warn-400); background: var(--warn-tint); color: var(--warn-text); }
.alert-warn svg { color: var(--warn-400); }
.alert-warn .alert-title { color: var(--warn-400); }

.alert-info { border-color: var(--info-line); border-left-color: var(--info-400); background: var(--info-tint); color: var(--info-text); }
.alert-info svg { color: var(--info-400); }
.alert-info .alert-title { color: var(--info-400); }

.alert-accent { border-color: var(--accent-line); border-left-color: var(--accent-500); background: var(--accent-tint); color: var(--accent-text); }
.alert-accent svg { color: var(--accent-400); }
.alert-accent .alert-title { color: var(--accent-400); }

.mb-alert { margin-bottom: var(--sp-4); }

/* ── 11. Modals ──────────────────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--backdrop);
}

.modal-box {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 4 * var(--sp-4));
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-overlay);
}
.modal-box.is-wide { max-width: 580px; }

.modal-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.modal-title { font-size: var(--fs-base); font-weight: 600; color: var(--text-0); flex: 1; min-width: 0; }
.modal-body { padding: var(--sp-5); overflow-y: auto; }
.modal-foot {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.modal-foot .btn { flex: 1; }

.modal-mark {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.modal-mark svg { width: 15px; height: 15px; }
.modal-mark.is-danger { background: var(--danger-tint); color: var(--danger-400); }
.modal-mark.is-warn   { background: var(--warn-tint);   color: var(--warn-400); }
.modal-mark.is-accent { background: var(--accent-tint); color: var(--accent-400); }
.modal-mark.is-info   { background: var(--info-tint);   color: var(--info-400); }

.result-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.result-mark {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-400);
  display: flex; align-items: center; justify-content: center;
}
.result-mark svg { width: 12px; height: 12px; }
.result-text { font-size: var(--fs-md); font-weight: 600; color: var(--accent-400); }

/* ── 12. Menus ───────────────────────────────────────────────────────────── */

.menu-anchor { position: relative; display: inline-block; }
.menu {
  position: absolute;
  right: 0; top: calc(100% + 4px);
  z-index: 30;
  min-width: 168px;
  padding: var(--sp-1);
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-overlay);
}
.menu-item {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%;
  padding: 6px var(--sp-2);
  border: 0; border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-1);
  font-family: inherit; font-size: var(--fs-md); text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.menu-item:hover { background: var(--ink-4); color: var(--text-0); }
.menu-item .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.menu-label {
  padding: var(--sp-2) var(--sp-2) 4px;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
}

/* ── 13. Empty / loading states ──────────────────────────────────────────── */

.empty { padding: var(--sp-16) var(--sp-6); text-align: center; }
.empty-mark {
  width: 40px; height: 40px; margin: 0 auto var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-3);
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
}
.empty-mark svg { width: 18px; height: 18px; }
.empty-title { font-size: var(--fs-base); font-weight: 500; color: var(--text-1); }
.empty-desc { font-size: var(--fs-md); color: var(--text-3); margin-top: var(--sp-2); max-width: 56ch; margin-left: auto; margin-right: auto; }
.empty-actions { margin-top: var(--sp-5); display: flex; justify-content: center; gap: var(--sp-2); }

.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--line-3);
  border-top-color: var(--accent-400);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 14. Toast ───────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 200;
  max-width: 380px;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--ink-3);
  box-shadow: var(--shadow-overlay);
  font-size: var(--fs-md);
  color: var(--text-0);
}
.toast.is-success { border-left-color: var(--accent-500); }
.toast.is-error   { border-left-color: var(--danger-500); }
.toast.is-info    { border-left-color: var(--info-400); }

/* ── 15. Auth & standalone pages ─────────────────────────────────────────── */

/* Split layout: the form on the left, a factual panel on the right stating
   what this deployment actually enforces. The panel is descriptive only and
   is dropped below 1024px. */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-form-col { display: flex; align-items: center; justify-content: center; padding: var(--sp-10) var(--sp-6); }
.auth-form { width: 100%; max-width: 368px; }

.auth-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-10); }
.auth-brand .mark { color: var(--accent-400); }
.auth-brand .wordmark { font-size: var(--fs-lg); font-weight: 600; color: var(--text-0); }
.auth-brand .subtitle { font-size: var(--fs-2xs); color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; }

.auth-title { font-size: var(--fs-xl); font-weight: 600; color: var(--text-0); }
.auth-desc { font-size: var(--fs-md); color: var(--text-2); margin-top: var(--sp-2); margin-bottom: var(--sp-6); }


/* Theme switch — built by theme.js into each [data-theme-switch] placeholder.
   Empty (and so invisible) without JavaScript, where it could not work. */
.theme-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--ink-2); }
.theme-switch:empty { display: none; }
.theme-switch-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); cursor: pointer; }
.theme-switch-btn:hover { background: var(--ink-4); color: var(--text-0); }
.theme-switch-btn[aria-pressed="true"] { background: var(--ink-4); color: var(--accent-400); }
.theme-switch-btn svg { width: 14px; height: 14px; }
/* Standalone pages (sign-in, pending, errors) have no header to host it. */
.theme-switch-corner { position: fixed; top: var(--sp-4); right: var(--sp-4); z-index: 50; }

.auth-providers { display: flex; flex-direction: column; gap: var(--sp-3); }
.btn-provider { width: 100%; background: var(--ink-3); border-color: var(--line-2); color: var(--text-0); min-height: 38px; gap: var(--sp-2); justify-content: flex-start; padding: var(--sp-2) var(--sp-4); }
.btn-provider:hover { background: var(--ink-4); }
.btn-provider svg { width: 16px; height: 16px; flex: none; }
.provider-tag { margin-left: auto; font-size: var(--fs-2xs); font-weight: 500; color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase; }

.auth-foot { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-3); }

.auth-aside {
  background: var(--ink-1);
  border-left: 1px solid var(--line);
  padding: var(--sp-10);
  display: flex; flex-direction: column; justify-content: center;
}
.auth-aside-inner { max-width: 420px; }
.auth-aside h2 { font-size: var(--fs-lg); color: var(--text-0); margin-bottom: var(--sp-5); }

.spec-row { display: flex; gap: var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.spec-row:first-child { border-top: 0; }
.spec-key { flex: 0 0 132px; font-size: var(--fs-sm); color: var(--text-2); }
.spec-val { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text-1); }

/* Centred single-card pages: pending approval, cluster mismatch, error,
   device authorization. */
.centered { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-6); }
.centered-card { width: 100%; max-width: 440px; }
.centered-card.is-wide { max-width: 520px; }

.state-mark {
  width: 40px; height: 40px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4);
}
.state-mark svg { width: 20px; height: 20px; }
.state-mark.is-accent { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-400); }
.state-mark.is-info   { background: var(--info-tint);   border-color: var(--info-line);   color: var(--info-400); }
.state-mark.is-warn   { background: var(--warn-tint);   border-color: var(--warn-line);   color: var(--warn-400); }
.state-mark.is-danger { background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger-400); }
.state-mark.is-center { margin-left: auto; margin-right: auto; }

.error-code { font-size: 64px; font-weight: 600; letter-spacing: -0.03em; color: var(--text-3); line-height: 1; }

/* ── 16. Marketing site (landing page) ───────────────────────────────────── */

/* The public face of the product, not a console screen. It shares the tokens,
   buttons and table rules above so the two never drift apart visually, but its
   rhythm is deliberately looser: the console optimises for density, this page
   optimises for a reader who has never heard of TILE.

   Everything here is landing-only except `.lifecycle`, which the dashboard also
   uses — that one is left exactly as it was. */

.container { max-width: 1160px; margin: 0 auto; padding: 0 var(--sp-6); width: 100%; }
.container-narrow { max-width: 880px; }

/* ── Header ──────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--site-header-bg);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  min-height: 60px;
  display: flex; align-items: center;
}

.brand-lockup { display: flex; align-items: center; gap: var(--sp-3); }
.brand-lockup .mark { color: var(--accent-400); }
.brand-lockup .wordmark { font-size: var(--fs-lg); font-weight: 600; color: var(--text-0); letter-spacing: -0.01em; }
.brand-lockup .subtitle {
  font-size: var(--fs-2xs); color: var(--text-3); white-space: nowrap;
  letter-spacing: 0.09em; text-transform: uppercase; margin-top: 1px;
}

.site-nav { display: flex; align-items: center; gap: var(--sp-5); }
.site-nav a { font-size: var(--fs-md); color: var(--text-2); white-space: nowrap; transition: color 0.12s ease; }
.site-nav a:hover { color: var(--text-0); }
.site-nav .btn { color: #fff; }
.site-nav .btn-ghost { color: var(--text-1); }

/* Hamburger — only rendered small. It toggles [hidden] on the nav, which the
   base reset already forces to display:none, so no inline style is needed. */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--ink-2); color: var(--text-1); cursor: pointer;
}
.nav-toggle:hover { background: var(--ink-3); color: var(--text-0); }
.nav-toggle svg { width: 16px; height: 16px; }

/* ── Section scaffolding ─────────────────────────────────────────────────── */

.section { padding: var(--sp-20) 0; border-top: 1px solid var(--line); }
.section-alt { background: var(--ink-1); }
.section-tight { padding: var(--sp-16) 0; }

.section-head { max-width: 72ch; margin-bottom: var(--sp-10); }
.section-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }

.section-eyebrow {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-400); margin-bottom: var(--sp-3);
}
.section-title {
  font-size: clamp(22px, 2.6vw, 31px);
  font-weight: 600; letter-spacing: -0.022em; line-height: 1.2; color: var(--text-0);
}
.section-lede { font-size: var(--fs-lg); line-height: 1.65; color: var(--text-2); margin-top: var(--sp-4); }
.section-lede + .section-lede { margin-top: var(--sp-3); }
.section-note { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-3); margin-top: var(--sp-5); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

/* One very low-contrast wash, placed once. It gives the fold some depth without
   the page turning into a gradient exercise. */
.hero {
  padding: var(--sp-20) 0 var(--sp-16);
  background:
    radial-gradient(60rem 28rem at 18% -8%, rgba(20, 192, 137, 0.07), transparent 70%),
    radial-gradient(46rem 24rem at 92% 4%, rgba(90, 162, 224, 0.045), transparent 72%);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--sp-12); align-items: start;
}

.hero-title {
  font-size: clamp(31px, 4.4vw, 50px);
  font-weight: 600; letter-spacing: -0.034em; line-height: 1.1;
  color: var(--text-0); max-width: 22ch;
}
.hero-title .line { display: block; }
.hero-lede { font-size: var(--fs-lg); line-height: 1.65; color: var(--text-1); margin-top: var(--sp-5); max-width: 58ch; }
.hero-sub { font-size: var(--fs-base); line-height: 1.65; color: var(--text-2); margin-top: var(--sp-4); max-width: 58ch; }

.hero-tagline {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--accent-line); border-left-width: 2px;
  border-radius: var(--r-sm);
  background: var(--accent-tint);
  font-size: var(--fs-md); font-weight: 500; color: var(--accent-400);
  letter-spacing: 0.01em;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.hero-foot { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--sp-5); }

/* ── Pills ───────────────────────────────────────────────────────────────── */

.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--ink-2);
  font-size: var(--fs-sm); color: var(--text-1); white-space: nowrap;
}
.pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-400); flex-shrink: 0; }

/* ── Card grids ──────────────────────────────────────────────────────────── */

/* One hairline grid, three widths. The 1px gap over a --line background draws
   the dividers, so there are no per-card borders to misalign. */
.card-grid {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Legacy alias: the previous landing markup used .feature-grid / .feature. */
.feature-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.feature, .mcard { background: var(--ink-0); padding: var(--sp-6); }
.section-alt .feature, .section-alt .mcard { background: var(--ink-1); }

.feature-mark, .mcard-mark {
  width: 32px; height: 32px; margin-bottom: var(--sp-4);
  border: 1px solid var(--accent-line); border-radius: var(--r-md);
  background: var(--accent-tint); color: var(--accent-400);
  display: flex; align-items: center; justify-content: center;
}
.feature-mark svg, .mcard-mark svg { width: 16px; height: 16px; }

.feature h3, .mcard h3 { font-size: var(--fs-base); color: var(--text-0); margin-bottom: var(--sp-2); }
.feature p, .mcard p { font-size: var(--fs-md); line-height: 1.65; color: var(--text-2); }
.mcard-meta {
  display: block; margin-top: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3);
}

/* ── Flow diagram (request path, lifecycle) ──────────────────────────────── */

.flow { display: flex; flex-direction: column; gap: 0; }
.flow-step { display: flex; align-items: stretch; gap: var(--sp-4); }
.flow-rail { flex: 0 0 28px; display: flex; flex-direction: column; align-items: center; }
.flow-dot {
  width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--ink-2); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xs); font-weight: 600;
}
.flow-step.is-kms .flow-dot { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-400); }
.flow-line { flex: 1; width: 1px; background: var(--line); min-height: var(--sp-5); }
.flow-step:last-child .flow-line { display: none; }
.flow-body { padding-bottom: var(--sp-5); min-width: 0; }
.flow-step:last-child .flow-body { padding-bottom: 0; }
.flow-label { font-size: var(--fs-base); font-weight: 600; color: var(--text-0); }
.flow-step.is-kms .flow-label { color: var(--accent-400); }
.flow-desc { font-size: var(--fs-md); line-height: 1.6; color: var(--text-2); margin-top: 3px; }

/* ── Deployment comparison (two stacks side by side) ─────────────────────── */

.stack-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.stack-col { padding: var(--sp-5); }
.stack-col-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-0); }
.stack-col-sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; margin-bottom: var(--sp-5); }

.stack { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.stack-node {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--ink-3);
  font-size: var(--fs-sm); color: var(--text-1); text-align: center;
}
.stack-node.is-tile {
  background: var(--accent-tint); border-color: var(--accent-line);
  color: var(--accent-400); font-weight: 600;
}
.stack-node.is-boundary { background: var(--ink-2); border-style: dashed; color: var(--text-2); }
.stack-link { align-self: center; width: 1px; height: var(--sp-5); background: var(--line-3); }
.stack-foot { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-3); margin-top: var(--sp-5); }

/* ── Authorization inputs ────────────────────────────────────────────────── */

.authz { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.authz-inputs { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: var(--sp-2); }
.authz-input {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--ink-3); text-align: center; min-width: 118px;
}
.authz-input .k { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-0); }
.authz-input .v { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.authz-plus { display: flex; align-items: center; color: var(--text-3); font-size: var(--fs-lg); }
.authz-down { color: var(--text-3); font-size: var(--fs-lg); line-height: 1; }
.authz-result {
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--accent-line); border-radius: var(--r-md);
  background: var(--accent-tint);
  font-size: var(--fs-base); font-weight: 600; color: var(--accent-400); text-align: center;
}

/* Least-privilege worked example: same application, same key, two operations. */
.lp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.lp-case { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-2); }
.lp-case.is-allow { border-color: var(--accent-line); }
.lp-case.is-deny  { border-color: var(--danger-line); }
.lp-chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-1); }
.lp-chain .sep { color: var(--text-3); }
.lp-verdict { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-3); }
.lp-case.is-allow .lp-verdict { color: var(--accent-400); }
.lp-case.is-deny  .lp-verdict { color: var(--danger-400); }
.lp-note { font-size: var(--fs-md); line-height: 1.6; color: var(--text-2); margin-top: var(--sp-3); }

/* ── Lifecycle chain ─────────────────────────────────────────────────────── */

.lifecycle { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.lifecycle .arrow { color: var(--text-3); font-size: var(--fs-sm); }

/* ── Comparison table ────────────────────────────────────────────────────── */

.cmp-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); min-width: 620px; }
.cmp-table th, .cmp-table td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; }
.cmp-table thead th {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.cmp-table thead th.is-tile { color: var(--accent-400); }
.cmp-table tbody td { border-top: 1px solid var(--line); color: var(--text-2); }
.cmp-table tbody th {
  border-top: 1px solid var(--line); font-weight: 500; color: var(--text-0);
  font-size: var(--fs-md);
}
.cmp-table td.is-tile { color: var(--text-1); background: rgba(20, 192, 137, 0.035); }
.cmp-mark { display: inline-flex; align-items: center; gap: 6px; }
.cmp-mark svg { width: 13px; height: 13px; }
.cmp-mark.is-yes { color: var(--accent-400); }
.cmp-mark.is-dep { color: var(--text-3); }

/* ── Model chooser ───────────────────────────────────────────────────────── */

.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.choice-col { padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-2); }
.choice-col.is-tile { border-color: var(--accent-line); background: var(--ink-2); }
.choice-kind { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.choice-col.is-tile .choice-kind { color: var(--accent-400); }
.choice-col h3 { font-size: var(--fs-lg); color: var(--text-0); margin-top: var(--sp-2); margin-bottom: var(--sp-4); }
.choice-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.choice-list li { display: flex; gap: var(--sp-3); font-size: var(--fs-md); line-height: 1.55; color: var(--text-2); }
.choice-list svg { width: 14px; height: 14px; margin-top: 3px; color: var(--text-3); }
.choice-col.is-tile .choice-list svg { color: var(--accent-400); }
.choice-foot { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }

/* ── Post-quantum highlights ─────────────────────────────────────────────── */

.pqc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.pqc-card { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-2); }
.pqc-name { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 500; color: var(--text-0); letter-spacing: -0.01em; }
.pqc-role { font-size: var(--fs-sm); color: var(--accent-400); margin-top: var(--sp-2); }
.pqc-std { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-3); }

/* ── Split: lede beside a supporting panel ───────────────────────────────── */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-12); align-items: start; }
.split-quote {
  padding: var(--sp-6);
  border: 1px solid var(--accent-line); border-left-width: 2px; border-radius: var(--r-md);
  background: var(--accent-tint);
}
.split-quote p { font-size: var(--fs-lg); line-height: 1.55; color: var(--text-0); font-weight: 500; }
.split-quote p + p { margin-top: var(--sp-4); color: var(--accent-400); }

/* ── Current page in the site nav ────────────────────────────────────────── */

.site-nav a.is-active { color: var(--text-0); box-shadow: inset 0 -2px 0 var(--accent-500); }

/* Anchored sections and tab panels clear the sticky header. */
.section[id], [data-tabs], .tab-panel { scroll-margin-top: 76px; }

/* ── Tabs (landing "Cara kerja", features "Detail teknis") ───────────────── */

/* The row ships [hidden] and is revealed by landing.js; without JavaScript
   every panel shows, stacked, separated by the same hairline. */
.tab-list {
  display: flex; gap: var(--sp-1); overflow-x: auto;
  border-bottom: 1px solid var(--line-2); margin-bottom: var(--sp-8);
  scrollbar-width: none;
}
.tab-list::-webkit-scrollbar { display: none; }
.tab {
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-base); font-weight: 500; color: var(--text-2);
  white-space: nowrap; transition: color 0.12s ease, border-color 0.12s ease;
}
.tab:hover { color: var(--text-0); }
.tab.is-active { color: var(--text-0); border-bottom-color: var(--accent-500); }
.tab:focus-visible { outline: 2px solid var(--accent-400); outline-offset: -2px; border-radius: var(--r-sm); }
.tab-panel + .tab-panel { margin-top: var(--sp-10); padding-top: var(--sp-10); border-top: 1px solid var(--line); }
.tab-list:not([hidden]) ~ .tab-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.tab-title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.015em; color: var(--text-0); margin-bottom: var(--sp-4); }

.tick-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.tick-list li {
  position: relative; padding-left: var(--sp-6);
  font-size: var(--fs-md); line-height: 1.6; color: var(--text-2);
}
.tick-list li::before {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--accent-400); border-bottom: 2px solid var(--accent-400);
  transform: rotate(-45deg);
}
.tick-list strong { color: var(--text-0); font-weight: 500; }

.pqc-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
/* Beside a lede the allow/deny pair has half the width, so it stacks. */
.split .lp-grid { grid-template-columns: minmax(0, 1fr); }

/* ── Benefit rows: text beside a supporting panel, alternating sides ─────── */

.benefit {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-12); align-items: center;
}
.benefit + .benefit { margin-top: var(--sp-16); }
.benefit.is-flip > :first-child { order: 2; }
.benefit-title { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--text-0); }
.benefit-text { font-size: var(--fs-lg); line-height: 1.65; color: var(--text-2); margin-top: var(--sp-4); }

/* ── Sub-page hero (features, pricing): one column, no side panel ────────── */

.hero-compact { padding: var(--sp-16) 0 var(--sp-12); }
.hero-compact .hero-title { max-width: 26ch; }
.hero-compact .hero-lede { max-width: 66ch; }

/* ── Feature groups ──────────────────────────────────────────────────────── */

.step-row { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.step-link {
  display: flex; align-items: center; gap: var(--sp-3); height: 100%;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--ink-2);
  font-size: var(--fs-base); font-weight: 500; color: var(--text-0);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.step-link:hover { border-color: var(--accent-line); background: var(--ink-3); }
.step-num, .feat-num {
  flex-shrink: 0; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent-line); border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-400);
  font-size: var(--fs-sm); font-weight: 600;
}
.feat-head { display: flex; align-items: flex-start; gap: var(--sp-4); max-width: 76ch; margin-bottom: var(--sp-8); }
.feat-head .feat-num { margin-top: 4px; }
.feat-head .section-lede { margin-top: var(--sp-2); }

/* ── Algorithm inventory ─────────────────────────────────────────────────── */

.algo-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.algo-table th {
  text-align: left; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--line);
}
.algo-table td { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--line); color: var(--text-1); vertical-align: top; }
.algo-table tbody tr:first-child td { border-top: 0; }
.algo-table td:first-child { color: var(--text-0); font-weight: 500; white-space: nowrap; }
.algo-table .mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); }
/* Algorithm options under a slot's function in the landing provisioning table. */
.algo-table .slot-algos { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-2); }
.algo-table .slot-algos > span { white-space: nowrap; }
.algo-table .badge { vertical-align: 1px; }
@media (min-width: 640px) { .algo-table .ops { white-space: nowrap; } }

/* ── Market pricing ──────────────────────────────────────────────────────── */

.price-kind {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: var(--sp-2);
}
.mcard .price-big {
  font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 500;
  color: var(--text-0); letter-spacing: -0.02em; margin: var(--sp-3) 0 var(--sp-2);
}

/* Numbers right-aligned in tabular figures so a column of prices reads as one. */
.cmp-table .t-right, .cmp-table td.price-num { text-align: right; }
.cmp-table td.price-num { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-1); white-space: nowrap; }
.cmp-table tr.price-group > * { border-top-color: var(--line-2); }
.cmp-table tbody th { white-space: nowrap; }
.price-region { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-3); margin-top: 1px; }
.price-sources a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.price-sources a:hover { color: var(--text-0); }


/* ── FAQ — native <details>, so it works with zero JavaScript ────────────── */

.faq { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--ink-2); }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-base); font-weight: 500; color: var(--text-0);
  cursor: pointer; list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { background: var(--ink-3); color: var(--text-0); }
.faq-q .chev { flex-shrink: 0; width: 15px; height: 15px; color: var(--text-3); transition: transform 0.15s ease; }
.faq-item[open] > .faq-q { color: var(--accent-400); }
.faq-item[open] > .faq-q .chev { transform: rotate(180deg); color: var(--accent-400); }
.faq-a { padding: 0 var(--sp-5) var(--sp-5); font-size: var(--fs-md); line-height: 1.7; color: var(--text-2); max-width: 86ch; }
.faq-a p + p { margin-top: var(--sp-3); }

/* ── Final call to action ────────────────────────────────────────────────── */

.cta-band {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background:
    radial-gradient(44rem 20rem at 50% -30%, rgba(20, 192, 137, 0.10), transparent 70%),
    var(--ink-2);
  padding: var(--sp-16) var(--sp-6);
  text-align: center;
}
.cta-title { font-size: clamp(23px, 2.8vw, 33px); font-weight: 600; letter-spacing: -0.025em; color: var(--text-0); }
.cta-lede { font-size: var(--fs-lg); line-height: 1.6; color: var(--text-2); margin: var(--sp-4) auto 0; max-width: 58ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-8); }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--line); padding: var(--sp-12) 0 var(--sp-8); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
.footer-brand-note { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-3); margin-top: var(--sp-4); max-width: 38ch; }
.footer-col-title {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-2); margin-bottom: var(--sp-4);
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-links a { font-size: var(--fs-sm); color: var(--text-3); }
.footer-links a:hover { color: var(--text-0); }
.footer-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4);
  margin-top: var(--sp-10); padding-top: var(--sp-5); border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--text-3);
}

/* ── 16b. CS-Agent downloads & guide ───────────────────────────────────── */

/* Repository (/downloads) — release panels in the style of a vendor source
   index: file, system, size, full SHA-256, download. */
.repo-release { margin-bottom: var(--sp-5); }
.repo-table td { vertical-align: middle; }
.repo-hash {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-1);
  word-break: break-all; overflow-wrap: anywhere; max-width: 46ch; line-height: 1.45;
}
.repo-notes { padding: var(--sp-4) var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); }
.repo-notes ul { margin-top: var(--sp-2); padding-left: var(--sp-5); list-style: disc; color: var(--text-1); font-size: var(--fs-md); }
.repo-notes li + li { margin-top: var(--sp-1); }
.repo-cmd {
  margin: var(--sp-2) 0 var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-0);
  line-height: 1.55; overflow-x: auto; white-space: pre;
}
.repo-api { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
.repo-api .t-label { margin-right: var(--sp-2); }
.repo-archive { margin-top: var(--sp-8); }
.repo-archive-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text-0); margin-bottom: var(--sp-1); }
.repo-archive > p { margin-bottom: var(--sp-4); }
.repo-summary { cursor: pointer; list-style: none; }
.repo-summary::-webkit-details-marker { display: none; }
.repo-summary::before { content: "▸"; color: var(--text-3); margin-right: var(--sp-2); transition: transform 0.15s ease; }
details[open] > .repo-summary::before { content: "▾"; }

/* Public guide (/panduan/cs-agent) */
.guide-topnav { display: flex; align-items: center; gap: var(--sp-3); }
.guide-hero { padding: var(--sp-12) 0 var(--sp-8); border-bottom: 1px solid var(--line); }
.guide-title { font-size: var(--fs-2xl); font-weight: 600; color: var(--text-0); margin-top: var(--sp-2); letter-spacing: -0.01em; }
.guide-lede { font-size: var(--fs-base); color: var(--text-1); margin-top: var(--sp-3); max-width: 70ch; line-height: 1.6; }
.guide-os { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.guide-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-10); padding: var(--sp-8) 0 var(--sp-16); }
.guide-toc { position: sticky; top: 76px; align-self: start; font-size: var(--fs-md); }
.guide-toc ol { margin-top: var(--sp-2); padding-left: var(--sp-5); color: var(--text-3); }
.guide-toc li { padding: 3px 0; }
.guide-toc a { color: var(--text-2); }
.guide-toc a:hover { color: var(--text-0); }
.guide-toc-intro { margin-top: var(--sp-2); padding: 3px 0; }
.guide-body { max-width: 82ch; }
.guide-section { padding-bottom: var(--sp-8); margin-bottom: var(--sp-8); border-bottom: 1px solid var(--line); scroll-margin-top: 76px; }
.guide-section:last-child { border-bottom: 0; }
.guide-section h2 { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xl); color: var(--text-0); margin-bottom: var(--sp-4); }
.guide-section p, .guide-section li { font-size: var(--fs-base); line-height: 1.65; color: var(--text-1); }
.guide-section p + p, .guide-section p + .alert, .guide-section .alert + p { margin-top: var(--sp-3); }
.guide-section a:not(.btn) { color: var(--accent-400); }
.guide-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--accent-line);
  background: var(--accent-tint); color: var(--accent-400); font-size: var(--fs-sm); font-weight: 600;
}
.guide-steps { margin: var(--sp-3) 0; padding-left: var(--sp-6); list-style: decimal; }
.guide-steps li + li { margin-top: var(--sp-2); }
.guide-steps ul { margin-top: var(--sp-2); padding-left: var(--sp-5); list-style: disc; }
.guide-check { margin: var(--sp-3) 0; padding-left: var(--sp-5); list-style: disc; }
.guide-check li + li { margin-top: var(--sp-2); }
.guide-cmd-label { font-size: var(--fs-sm) !important; color: var(--text-2) !important; margin-top: var(--sp-4); }
.guide-section .guide-sub { font-size: var(--fs-lg); color: var(--text-0); margin: var(--sp-6) 0 var(--sp-3); }
.guide-trouble td:first-child { width: 38%; color: var(--text-0); font-size: var(--fs-sm); }

/* Guide visuals (§11): the request check flow and the case cards. Plain
   HTML/CSS on the theme tokens, so both themes and narrow screens follow. */
.gv-flow { display: flex; flex-direction: column; gap: var(--sp-5); margin: var(--sp-2) 0 var(--sp-3); padding: 0; list-style: none; }
.gv-step {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: var(--sp-3); row-gap: 2px;
  align-items: center; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--ink-2);
}
.gv-step > * { grid-column: 2; }
.gv-step + .gv-step::before {
  content: "↓"; position: absolute; left: 0; right: 0; top: calc(-1 * var(--sp-5)); height: var(--sp-5);
  line-height: var(--sp-5); text-align: center; color: var(--text-3);
}
.gv-step.is-start, .gv-step.is-end { border-color: var(--accent-line); background: var(--accent-tint); }
.gv-step.is-optional { border-style: dashed; }
.guide-section .gv-step span { font-size: var(--fs-sm); line-height: 1.45; }
.gv-step-num {
  grid-column: 1 !important; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink-4); color: var(--text-1); font-size: var(--fs-xs) !important; font-weight: 600;
}
.gv-step-title { color: var(--text-0); font-weight: 600; }
.gv-step-desc { color: var(--text-1); }
.guide-section .gv-step .gv-step-fail span { font-size: var(--fs-xs); }
.gv-step-fail { grid-column: 3 !important; grid-row: 1 / span 2; text-align: right; color: var(--danger-400); font-size: var(--fs-xs) !important; overflow-wrap: anywhere; }
.gv-tag {
  display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--text-2); font-size: var(--fs-xs) !important; font-weight: 400;
}

.gv-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); margin: var(--sp-2) 0 var(--sp-5); }
.gv-case {
  display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4);
  border: 1px solid var(--line-2); border-left-width: 3px; border-radius: var(--r-lg); background: var(--ink-2);
}
.gv-case.is-ok   { border-left-color: var(--accent-500); }
.gv-case.is-warn { border-left-color: var(--warn-400); }
.gv-case.is-bad  { border-left-color: var(--danger-500); }
.gv-case-title { font-size: var(--fs-md); color: var(--text-0); }
.gv-facts { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.gv-facts > div { display: flex; align-items: baseline; gap: var(--sp-2); }
.gv-facts dt { flex: none; width: 104px; color: var(--text-2); font-size: var(--fs-xs); }
.gv-facts dd { margin: 0; color: var(--text-0); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.gv-chip {
  display: inline-block; padding: 1px 9px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--ink-3); color: var(--text-0); font-size: var(--fs-sm); line-height: 1.5; white-space: nowrap;
}
.gv-chip.is-a { border-color: rgba(96, 165, 250, 0.55); background: rgba(96, 165, 250, 0.14); }
.gv-chip.is-b { border-color: rgba(192, 132, 252, 0.55); background: rgba(192, 132, 252, 0.14); }
.guide-section .gv-result { margin-top: auto; padding: 6px var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; }
.guide-section .gv-result.is-ok   { background: var(--accent-tint); color: var(--accent-400); }
.guide-section .gv-result.is-warn { background: var(--warn-tint); color: var(--warn-400); }
.guide-section .gv-result.is-bad  { background: var(--danger-tint); color: var(--danger-400); }
.guide-section .gv-note { font-size: var(--fs-sm); color: var(--text-1); }

@media (max-width: 720px) {
  .gv-step { grid-template-columns: 24px minmax(0, 1fr); }
  .gv-step-fail { grid-column: 2 !important; grid-row: auto; text-align: left; }
}
.guide kbd {
  font-family: var(--font-mono); font-size: var(--fs-xs); padding: 1px 5px;
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: var(--r-sm); background: var(--ink-3);
}

/* OS switch: guide.js sets data-guide to "win" or "lin". Without JavaScript
   it stays "all" and both systems show, each command labelled. */
.guide[data-guide="win"] .os-lin,
.guide[data-guide="lin"] .os-win { display: none !important; }
.guide[data-guide="all"] pre.os-win::before { content: "Windows — PowerShell\A"; color: var(--text-3); }
.guide[data-guide="all"] pre.os-lin::before { content: "Linux — terminal\A"; color: var(--text-3); }

/* ── 16c. API reference (/api-docs) ────────────────────────────────────── */

.api-body { background: var(--ink-0); }
.api-topbar {
  position: sticky; top: 0; z-index: 30; height: 56px;
  display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-5);
  background: var(--ink-1); border-bottom: 1px solid var(--line);
}
.api-topbar .brand-lockup .mark { color: var(--accent-400); }
.api-topbar .wordmark { font-size: var(--fs-base); font-weight: 600; color: var(--text-0); }
.api-topbar .subtitle { font-size: var(--fs-2xs); color: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase; }
.api-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.api-mode { display: inline-flex; padding: 2px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--ink-2); }
.api-mode-btn { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: 600; padding: 4px 12px; border-radius: var(--r-sm); cursor: pointer; }
.api-mode-btn[aria-pressed="true"] { background: var(--accent-600); color: #fff; }

.api-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); }
.api-shell[data-api="rest"] [data-api-for="grpc"],
.api-shell[data-api="grpc"] [data-api-for="rest"] { display: none; }

.api-nav {
  position: sticky; top: 56px; align-self: start; height: calc(100vh - 56px); overflow-y: auto;
  padding: var(--sp-4) var(--sp-3) var(--sp-10); border-right: 1px solid var(--line); background: var(--ink-1);
}
.api-search { width: 100%; margin-bottom: var(--sp-3); }
.api-nav-group { margin: var(--sp-4) var(--sp-2) var(--sp-1); font-size: var(--fs-2xs); font-weight: 600; color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; }
.api-nav-link { display: flex; align-items: center; gap: var(--sp-2); padding: 5px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-1); line-height: 1.35; }
.api-nav-link:hover { background: var(--ink-3); color: var(--text-0); }
.api-nav-link.is-active { background: var(--accent-tint); color: var(--accent-400); }
.api-nav-link .api-m { flex: none; min-width: 42px; text-align: center; }

.api-m { display: inline-block; padding: 1px 6px; border-radius: var(--r-xs); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.03em; }
.api-m-get    { background: rgba(20, 192, 137, 0.16); color: #3fc79a; }
.api-m-post   { background: rgba(90, 162, 224, 0.18); color: #6aaee6; }
.api-m-put    { background: rgba(217, 164, 65, 0.18); color: #d9a441; }
.api-m-delete { background: rgba(224, 106, 106, 0.18); color: #e06a6a; }
.api-m-rpc    { background: rgba(157, 143, 240, 0.18); color: #a99cf2; }

/* Two columns per section; the right one is the dark code ground, carried
   down the whole page by the background of .api-main. */
.api-main { min-width: 0; background: linear-gradient(to right, var(--ink-0) 0, var(--ink-0) 56%, var(--code-bg) 56%, var(--code-bg) 100%); }
.api-op { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); border-bottom: 1px solid var(--line); scroll-margin-top: 56px; }
.api-text { padding: var(--sp-10) var(--sp-10) var(--sp-8); min-width: 0; }
.api-code { padding: var(--sp-10) var(--sp-6) var(--sp-8); min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.api-group {
  width: 56%; padding: var(--sp-10) var(--sp-10) 0; margin: 0;
  font-size: var(--fs-2xs); font-weight: 600; color: var(--accent-400); letter-spacing: 0.08em; text-transform: uppercase;
  scroll-margin-top: 56px;
}

.api-title { font-size: var(--fs-2xl); font-weight: 600; color: var(--text-0); }
.api-lede { font-size: var(--fs-base); color: var(--text-1); margin-top: var(--sp-2); }
.api-h2 { font-size: var(--fs-xl); font-weight: 600; color: var(--text-0); margin-bottom: var(--sp-3); }
.api-op-title { font-size: var(--fs-xl); font-weight: 600; color: var(--text-0); }
.api-h4 { margin: var(--sp-6) 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }
.api-h4 .api-type { text-transform: none; letter-spacing: 0; }
.api-endpoint { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-4); }
.api-endpoint code { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--text-0); word-break: break-all; }
.api-prose { font-size: var(--fs-md); line-height: 1.7; color: var(--text-1); margin-top: var(--sp-3); }
.api-prose p + p, .api-prose p + ul, .api-prose ul + p { margin-top: var(--sp-3); }
.api-prose ul { padding-left: var(--sp-5); list-style: disc; }
.api-prose li + li { margin-top: var(--sp-1); }
.api-prose code, .api-fields dd code, .api-table code { font-family: var(--font-mono); font-size: 0.92em; padding: 1px 5px; border-radius: var(--r-xs); background: var(--ink-3); color: var(--text-0); }
.api-prose a, .api-twin a { color: var(--accent-400); }
.api-twin { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-2); }
.api-table td { vertical-align: top; }

.api-fields { border-top: 1px solid var(--line); }
.api-field { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.api-field dt { font-size: var(--fs-md); color: var(--text-0); }
.api-field dt code { font-family: var(--font-mono); font-weight: 600; }
.api-field dd { margin-top: var(--sp-1); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); }
.api-type { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); margin-left: var(--sp-1); }
.api-req { font-size: var(--fs-2xs); font-weight: 600; color: var(--danger-400); text-transform: uppercase; letter-spacing: 0.04em; margin-left: var(--sp-1); }
.api-status { display: inline-block; padding: 1px 7px; border-radius: var(--r-xs); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; }
.api-status-ok  { background: rgba(20, 192, 137, 0.16); color: #3fc79a; }
.api-status-err { background: rgba(224, 106, 106, 0.16); color: #e98a8a; }

/* Code panels */
.api-panel { background: var(--code-panel); border: 1px solid var(--code-line); border-radius: var(--r-lg); overflow: hidden; }
.api-panel-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--code-line);
  font-size: var(--fs-xs); font-weight: 600; color: var(--code-muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.api-tabs { display: flex; flex-wrap: wrap; gap: 2px; text-transform: none; letter-spacing: 0; }
.api-tab { border: 0; background: transparent; color: var(--code-muted); font: inherit; font-size: var(--fs-xs); font-weight: 500; padding: 3px 8px; border-radius: var(--r-sm); cursor: pointer; }
.api-tab:hover { color: var(--code-text); background: rgba(255, 255, 255, 0.05); }
.api-tab.is-active { color: #fff; background: rgba(130, 177, 255, 0.18); }
.api-sample { display: none; position: relative; }
.api-shell[data-rest-lang="curl"] [data-api-for="rest"] .api-sample[data-lang="curl"],
.api-shell[data-rest-lang="go"] [data-api-for="rest"] .api-sample[data-lang="go"],
.api-shell[data-rest-lang="python"] [data-api-for="rest"] .api-sample[data-lang="python"],
.api-shell[data-rest-lang="node"] [data-api-for="rest"] .api-sample[data-lang="node"],
.api-shell[data-rest-lang="php"] [data-api-for="rest"] .api-sample[data-lang="php"],
.api-shell[data-rest-lang="csharp"] [data-api-for="rest"] .api-sample[data-lang="csharp"],
.api-shell[data-rest-lang="java"] [data-api-for="rest"] .api-sample[data-lang="java"],
.api-shell[data-rest-lang="ruby"] [data-api-for="rest"] .api-sample[data-lang="ruby"],
.api-shell[data-grpc-lang="grpcurl"] [data-api-for="grpc"] .api-sample[data-lang="grpcurl"],
.api-shell[data-grpc-lang="go"] [data-api-for="grpc"] .api-sample[data-lang="go"],
.api-shell[data-grpc-lang="python"] [data-api-for="grpc"] .api-sample[data-lang="python"],
.api-shell[data-grpc-lang="node"] [data-api-for="grpc"] .api-sample[data-lang="node"],
.api-shell[data-grpc-lang="php"] [data-api-for="grpc"] .api-sample[data-lang="php"],
.api-shell[data-grpc-lang="csharp"] [data-api-for="grpc"] .api-sample[data-lang="csharp"],
.api-shell[data-grpc-lang="java"] [data-api-for="grpc"] .api-sample[data-lang="java"],
.api-shell[data-grpc-lang="ruby"] [data-api-for="grpc"] .api-sample[data-lang="ruby"] { display: block; }
.api-copy {
  position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 1;
  border: 1px solid var(--code-line); background: var(--code-bg); color: var(--code-muted);
  font: inherit; font-size: var(--fs-2xs); padding: 2px 8px; border-radius: var(--r-sm); cursor: pointer; opacity: 0;
  transition: opacity 0.12s ease;
}
.api-sample:hover .api-copy, .api-copy:focus-visible { opacity: 1; }
.api-pre {
  margin: 0; padding: var(--sp-4); max-height: 560px; overflow: auto;
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6; color: var(--code-text); white-space: pre; tab-size: 4;
}
.api-pre .tok-k { color: var(--tok-k); }
.api-pre .tok-s { color: var(--tok-s); }
.api-pre .tok-c { color: var(--tok-c); font-style: italic; }
.api-pre .tok-n { color: var(--tok-n); }
.api-pre .tok-p { color: var(--tok-p); }

/* ── 17. Utilities ───────────────────────────────────────────────────────── */

.mt-1 { margin-top: var(--sp-1); }  .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }  .mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }  .mt-6 { margin-top: var(--sp-6); }
.mt-16 { margin-top: var(--sp-16); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.ml-auto { margin-left: auto; }
.w-full { width: 100%; }
.flush { margin: 0 !important; }
.inline-block { display: inline-block; }
.hidden { display: none !important; }
[hidden] { display: none !important; }

/* Sizing helpers.
   These exist because the Content-Security-Policy forbids style="" attributes,
   so a one-off width has to be a class. Naming them by role rather than by
   pixel value keeps the column widths of the tables consistent across pages. */
.fw-sm { min-width: 170px; }
.fw-md { min-width: 210px; }
.fw-lg { min-width: 260px; }
.fw-xl { min-width: 280px; }

.w-id-sm  { max-width: 10rem; }
.w-id-md  { max-width: 12rem; }
.w-id-lg  { max-width: 15rem; }
.w-sub    { max-width: 190px; }
.w-desc   { max-width: 22rem; }
.w-chevron { width: 32px; }

.dot-accent { background: var(--accent-400) !important; }
.dot-info   { background: var(--info-400) !important; }

/* ── 18. Responsive & print ──────────────────────────────────────────────── */

/* Laptop: tighten the shell before anything collapses. */
@media (max-width: 1280px) {
  :root { --sidebar-w: 212px; }
  .content { padding: var(--sp-5); }
}

/* Tablet: the sidebar becomes a horizontal rail above the content. Desktop is
   the primary target for this console, so this is a graceful fallback rather
   than a separate small-screen design. */
@media (max-width: 1024px) {
  .app { flex-direction: column; }
  .sidebar {
    width: 100%; flex-basis: auto; height: auto; position: static;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .sidebar-nav { display: flex; gap: var(--sp-3); overflow-x: auto; padding: var(--sp-2) var(--sp-4); }
  .nav-group { display: flex; align-items: center; gap: var(--sp-1); }
  .nav-group + .nav-group { margin-top: 0; }
  .nav-group-label { display: none; }
  .nav-item { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .nav-item + .nav-item { margin-top: 0; }
  .nav-item.is-active { border-left: 0; border-bottom-color: var(--accent-500); }
  .sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
  .identity { padding: 0 var(--sp-2); }
  .sidebar-footer form { flex-shrink: 0; }

  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { display: none; }
  .dl-key { flex-basis: 140px; }

  /* Marketing site: one column for the fold, two for every card grid. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .hero-title { max-width: 28ch; }
  .feature-grid, .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .pqc-grid { grid-template-columns: minmax(0, 1fr); }
  .benefit { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .benefit.is-flip > :first-child { order: 0; }
  .benefit + .benefit { margin-top: var(--sp-12); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .section { padding: var(--sp-16) 0; }
}

/* Below this width the marketing header has no room for seven anchors, so the
   nav collapses behind a toggle. The button is inert above this breakpoint and
   the nav is never left hidden there — see landing.js, which uses the same
   width. The brand plus the full nav need roughly 960px; 900px left a band where
   labels wrapped onto two lines (a 1366px laptop at 150% scaling is 911px). */
@media (max-width: 1080px) {
  .api-shell { grid-template-columns: minmax(0, 1fr); }
  .api-nav { position: static; height: auto; max-height: 45vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .api-main { background: var(--ink-0); }
  .api-op { grid-template-columns: minmax(0, 1fr); }
  .api-text { padding: var(--sp-6) var(--sp-4) var(--sp-4); }
  .api-code { padding: 0 var(--sp-4) var(--sp-6); }
  .api-group { width: auto; padding: var(--sp-8) var(--sp-4) 0; }
  .api-topbar { gap: var(--sp-2); padding: 0 var(--sp-3); }
  .api-topbar .badge, .api-topbar .subtitle { display: none; }
  .guide-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .guide-toc { position: static; }
  .nav-toggle { display: inline-flex; }
  .site-header .container { flex-wrap: wrap; }
  .site-nav {
    order: 3; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--line);
    margin: 0 calc(var(--sp-6) * -1);
    padding: var(--sp-2) var(--sp-6) var(--sp-4);
  }
  .site-nav a { padding: var(--sp-3) 0; font-size: var(--fs-base); }
  .site-nav a + a { border-top: 1px solid var(--line); }
  .site-nav .btn { margin-top: var(--sp-3); justify-content: center; border-top: 0; }
  .site-nav a.is-active { box-shadow: none; color: var(--accent-400); }
}

@media (max-width: 720px) {
  .content { padding: var(--sp-4); }
  .page-head { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .filterbar-actions { margin-left: 0; }
  .dl-row { flex-direction: column; gap: var(--sp-1); }
  .dl-key { flex-basis: auto; }
  .spec-row { flex-direction: column; gap: var(--sp-1); }
  .spec-key { flex-basis: auto; }
  .topbar { padding: 0 var(--sp-4); }
  .topbar-meta { gap: var(--sp-3); }

  /* Marketing site: single column throughout. The comparison table keeps its
     own horizontal scroller rather than collapsing — a reader comparing two
     deployment models needs the columns side by side to read a row at all. */
  .section { padding: var(--sp-12) 0; }
  .section-tight { padding: var(--sp-10) 0; }
  .hero { padding: var(--sp-12) 0 var(--sp-10); }
  .hero-actions .btn { flex: 1 1 auto; }
  .feature-grid, .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
  .stack-compare, .choice, .lp-grid, .step-row { grid-template-columns: minmax(0, 1fr); }
  .hero-compact { padding: var(--sp-12) 0 var(--sp-10); }
  .tab-list { margin-bottom: var(--sp-6); }
  .cta-band { padding: var(--sp-10) var(--sp-5); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .authz-inputs { flex-direction: column; align-items: stretch; }
  .authz-plus { justify-content: center; }
}

/* Operators do print key inventories for change records. */
/* ── TOTP second factor ──────────────────────────────────────────────────── */

/* The QR code sits on white in both themes: scanners read dark-on-light, and
   an inverted code fails on many phone cameras. */
.qr-box { display: flex; justify-content: center; }
.qr-box img { background: #fff; padding: var(--sp-2); border-radius: var(--r-md); image-rendering: pixelated; }

.totp-input {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  letter-spacing: 0.35em;
  text-align: center;
}

/* The code field inside a confirmation dialog (revoke, reveal, …). */
.totp-field { margin-top: var(--sp-4); }
.totp-field .hint.is-error { color: var(--danger-text); }

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-md);
  color: var(--text-0);
  text-align: center;
}

@media print {
  .sidebar, .topbar, .page-actions, .filterbar, .pagination, .toast, .modal { display: none !important; }
  body { background: #fff; color: #000; }
  .panel, .table-wrap { border-color: #ccc; background: #fff; }
  .table tbody td, .table thead th { color: #000; border-color: #ddd; background: #fff; }
}

/* Space above a page section that follows a table (agent detail: Pemakaian). */
.mt-section { margin-top: var(--sp-6); }

/* Usage page — daily crypto operations (usage.html). Geometry comes from the
   SVG attributes; only the look is set here. */
.usage-chart { display: block; width: 100%; height: 140px; }
.usage-chart-bar { fill: var(--accent-500); }
.usage-chart-bar:hover { fill: var(--accent-400); }