/* ==========================================================================
   Space Panel — "Calm Mint" overrides (inherit auth.intiserver.com)
   Wave 2 (issue #84): port penuh kasa-overrides-r37.css (kasa.intiserver.com,
   referensi terlengkap kontrak tema) + sinkronisasi elemen client zone WHMCS
   (chip status, tabel, alert, icon soft) + logo CDN Inti Server (issue #80).

   Sumber port : audit-theme-artifacts/kasa-ref/kasa-overrides-r37.css
   Kontrak     : intiserver-ecosystem-architecture/contracts/design-tokens.md
                 light = "Calm Mint blue" (aksen #3f73b8)
                 dark  = "pre-dawn server room" (aksen amber #e8a04a)

   Scoping dark: html.kasa-dark — diset space-kasa-theme.js (event-driven:
   listener 'on-hs-appearance-change' + MutationObserver backstop atas swap
   <link data-hs-current-theme> oleh hs.theme-appearance.js).

   CASCADE SHIELD (wajib, doctrine r37): hs.theme-appearance.js membuat
   SALINAN link stylesheet tema aktif dan menyisipkannya SETELAH </head>
   (insertAdjacentElement('afterEnd')) pada init() dan setiap setAppearance()
   — salinan itu selalu lebih belakang dari file ini. Konsekuensi:
   - token light memakai :root:root (0,2,0) > :root vendor (0,1,0)
   - komponen light diprefix `body ` / `html body `
   - dark aman: html.kasa-dark... (0,2,1+) > selector vendor (<=0,2,0)

   Drop dari r37 (KASA-specific, tidak ada di space-panel): #kasa-splash,
   #ov-*, .kpi-spark, .qa-item, .kasa-nav-group/-toggle/-children,
   .kasa-acct-dropdown, .kasa-language-*.
   Tambahan space-panel: .navbar-brand-text, .chat-bubble-*, .alert-soft-*,
   .icon-soft-*, .avatar-soft-primary, .btn-white (dark), .text-dark (dark),
   section header #navbarVerticalMenu .dropdown-header (padanan
   .nav-section-title r37 — markup space memakai .dropdown-header).
   ========================================================================== */

/* ---------- Light: Calm Mint tokens (:root:root = (0,2,0), menang atas :root vendor) ---------- */
:root:root {
  color-scheme: light;

  /* Namespace tema */
  --kasa-accent: #3f73b8;
  --kasa-accent-strong: #28558f;
  --kasa-accent-soft: #e6f0fb;
  --kasa-accent-ink: #ffffff;
  --kasa-paper: #f5f8fc;
  --kasa-panel: rgba(255, 255, 255, 0.88);
  --kasa-panel-solid: #ffffff;
  --kasa-line: #dbe5ef;
  --kasa-ink: #1d2d40;
  --kasa-ink-dim: #66788b;
  /* #81 — tone teks sekunder yang lolos WCAG AA. --kasa-ink-dim (token
     kontrak) = 4.26:1 di atas --kasa-paper, jadi ia tetap dipakai untuk
     dekorasi (ikon, hairline, caret) tapi TIDAK untuk teks yang dibaca.
     Turunan semantik ini bukan token baru di luar kontrak: nilai primernya
     tetap keluarga slate yang sama, hanya digelapkan sampai 5.46:1
     (paper) / 5.81:1 (kartu putih) / 5.04:1 (accent-soft). */
  --kasa-ink-dim-text: #566779;
  --kasa-ok: #2d8a5c;
  --kasa-danger: #c8525c;
  --kasa-warn: #e8a04a;
  /* #81 — pasangan badge status warning. Sebelumnya teks badge memakai
     warna warning mentah di atas 14% alpha dari warna ITU SENDIRI, sehingga
     kontrasnya bergantung pada background di belakangnya (4.38:1 di atas
     paper, di bawah ambang 4.5). Sekarang: bg OPAQUE + teks terpisah, jadi
     rasio tidak lagi bergantung pada halaman tempat badge muncul. */
  --kasa-warn-badge-bg: #fdf0dd;
  --kasa-warn-badge-ink: #855718;
  --kasa-radius-card: 22px;
  --kasa-radius-btn: 14px;
  --kasa-radius-input: 12px;
  --kasa-focus-ring: 0 0 0 3px rgba(63, 115, 184, 0.24);
  --kasa-shadow: 0 18px 48px rgba(49, 83, 117, 0.12), 0 2px 8px rgba(49, 83, 117, 0.06);
  --kasa-shadow-btn: 0 8px 16px rgba(63, 115, 184, 0.11);
  --kasa-font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kasa-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kasa-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Bootstrap var remap */
  --bs-primary: #3f73b8;
  --bs-primary-rgb: 63, 115, 184;
  --bs-blue: #3f73b8;
  --bs-blue-rgb: 63, 115, 184;
  --bs-secondary: #66788b;
  --bs-secondary-rgb: 102, 120, 139;
  --bs-success: #2d8a5c;
  --bs-success-rgb: 45, 138, 92;
  --bs-info: #3f73b8;
  --bs-info-rgb: 63, 115, 184;
  --bs-warning: #e8a04a;
  --bs-warning-rgb: 232, 160, 74;
  --bs-danger: #c8525c;
  --bs-danger-rgb: 200, 82, 92;
  --bs-body-bg: #f5f8fc;
  --bs-body-bg-rgb: 245, 248, 252;
  --bs-body-color: #1d2d40;
  --bs-body-color-rgb: 29, 45, 64;
  --bs-body-font-family: var(--kasa-font-body);
  --bs-heading-color: #1d2d40;
  --bs-border-color: #dbe5ef;
  --bs-link-color: #3f73b8;
  --bs-link-color-rgb: 63, 115, 184;
  --bs-link-hover-color: #28558f;
  --bs-link-hover-color-rgb: 40, 85, 143;
  --bs-border-radius: 0.75rem;
  --bs-border-radius-lg: 1rem;
  --bs-card-bg: rgba(255, 255, 255, 0.88);
  --bs-card-border-color: rgba(219, 229, 239, 0.9);
  --bs-card-border-radius: 22px;
  --bs-card-box-shadow: 0 18px 48px rgba(49, 83, 117, 0.12);

  accent-color: #3f73b8;
}

/* ---------- Dasar halaman ---------- */
html body {
  background-color: var(--kasa-paper);
  background-image:
    radial-gradient(720px 360px at 8% -8%, #e4f0fc, transparent 68%),
    radial-gradient(640px 360px at 100% 0%, #dbeafb, transparent 68%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--kasa-ink);
  font-family: var(--kasa-font-body);
}
html body.has-navbar-vertical-aside {
  background-color: var(--kasa-paper);
  background-image:
    radial-gradient(720px 360px at 8% -8%, #e4f0fc, transparent 68%),
    radial-gradient(640px 360px at 100% 0%, #dbeafb, transparent 68%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Heading: font display + warna token (vendor #1e2022 melenceng kontrak). */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .h1, html body .h2, html body .h3, html body .h4, html body .h5, html body .h6,
html body .card-title {
  font-family: var(--kasa-font-display);
  letter-spacing: -0.01em;
  color: var(--kasa-ink);
}
html body code, html body kbd, html body pre, html body samp, html body .font-monospace {
  font-family: var(--kasa-font-mono);
}

/* ---------- Card ---------- */
html body .card {
  background-color: var(--kasa-panel);
  border-color: var(--kasa-line);
  border-radius: var(--kasa-radius-card);
  box-shadow: var(--kasa-shadow);
}
html body .card-header,
html body .card-footer {
  border-color: var(--kasa-line);
}

/* ---------- Tombol ---------- */
/* Parity auth: vendor .btn = display:inline-block, jadi begitu min-height
   dinaikkan (46px) teks duduk di ATAS kotak, bukan di tengah. Auth memakai
   inline-flex + align/justify center pada .btn — itu yang bikin tombol
   46-47px-nya presisi (offCenter 0). Dipasang di layer token supaya SEMUA
   tombol ikut, bukan tambal per-halaman. */
html body .btn {
  min-height: 46px;
  border-radius: var(--kasa-radius-btn);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html body .btn-sm, html body .btn-group-sm > .btn {
  min-height: 34px;
  border-radius: 10px;
}
/* Vendor .btn-icon sudah kotak sendiri (2.625rem = 42px, inline-flex center).
   min-height 46px di atas meng-inflasi TINGGI jadi 46px sementara lebar tetap
   42px, sehingga .rounded-circle (border-radius:50%!important) melukis ELIPS,
   bukan lingkaran. Auth (referensi kanonik) tidak punya .btn-icon sama sekali,
   jadi acuan = kotak vendor itu sendiri: batalkan min-height supaya persegi.
   Ditaruh SETELAH .btn-sm karena spesifisitasnya sama (0,2,1). */
html body .btn-icon {
  min-height: 0;
}
html body .btn-primary {
  --bs-btn-bg: #3f73b8;
  --bs-btn-border-color: #3f73b8;
  --bs-btn-hover-bg: #28558f;
  --bs-btn-hover-border-color: #28558f;
  --bs-btn-active-bg: #28558f;
  --bs-btn-active-border-color: #28558f;
  --bs-btn-disabled-bg: #3f73b8;
  --bs-btn-disabled-border-color: #3f73b8;
  --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 63, 115, 184;
  box-shadow: var(--kasa-shadow-btn);
}
html body .btn-outline-primary {
  --bs-btn-color: #3f73b8;
  --bs-btn-border-color: #3f73b8;
  --bs-btn-hover-bg: #3f73b8;
  --bs-btn-hover-border-color: #3f73b8;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #3f73b8;
  --bs-btn-active-border-color: #3f73b8;
  --bs-btn-focus-shadow-rgb: 63, 115, 184;
}
html body .btn-ghost-secondary {
  --bs-btn-color: var(--kasa-ink-dim);
  --bs-btn-hover-bg: var(--kasa-accent-soft);
  --bs-btn-hover-color: var(--kasa-accent-strong);
}
/* btn-ghost-danger (logout) — padanan ghost-secondary di sumbu danger. */
html body .btn-ghost-danger {
  --bs-btn-color: var(--kasa-danger);
  --bs-btn-hover-bg: rgba(200, 82, 92, 0.12);
  --bs-btn-hover-color: var(--kasa-danger);
}

/* Parity auth: btn-secondary solid = chip netral (bg #b8c9da + ink, 4.62:1). */
html body .btn-secondary {
  --bs-btn-color: #1d2d40;
  --bs-btn-hover-color: #1d2d40;
  --bs-btn-active-color: #1d2d40;
  --bs-btn-disabled-color: #1d2d40;
  --bs-btn-bg: #b8c9da;
  --bs-btn-border-color: #b8c9da;
  --bs-btn-hover-bg: #a9bdd2;
  --bs-btn-hover-border-color: #a9bdd2;
  --bs-btn-active-bg: #9ab1c9;
  --bs-btn-active-border-color: #9ab1c9;
}

/* Link body light = accent-strong (auth a:not(.btn)); hover #204979. */
html body a:not(.btn):not(.nav-link) {
  color: #28558f;
}
html body a:not(.btn):not(.nav-link):hover {
  color: #204979;
}
html body .btn-link {
  color: var(--kasa-accent);
}

/* ---------- Form ---------- */
html body .form-control:not(textarea),
html body .form-select {
  min-height: 46px;
  border-radius: var(--kasa-radius-input);
  background-color: rgba(247, 250, 253, 0.88);
  border-color: var(--kasa-line);
  /* warna vendor #677788 di bg rgba(247,250,253,.88) < AA; ink lolos */
  color: var(--kasa-ink);
}
html body .form-control:focus,
html body .form-select:focus {
  border-color: #3f73b8;
  box-shadow: var(--kasa-focus-ring);
  background-color: var(--kasa-panel-solid);
}
html body .form-control::placeholder {
  color: #8b9bad;
}
html body .input-group-text {
  border-radius: var(--kasa-radius-input);
  border-color: var(--kasa-line);
  background-color: var(--kasa-accent-soft);
}
html body .form-check-input:checked {
  background-color: #3f73b8;
  border-color: #3f73b8;
}
html body .form-check-input:focus {
  border-color: #3f73b8;
  box-shadow: var(--kasa-focus-ring);
}
html body .form-label {
  color: var(--kasa-ink);
  font-weight: 500;
}

/* ---------- Header / sidebar ---------- */
#header.navbar {
  border-bottom: 1px solid var(--kasa-line);
}
/* bg !important mengalahkan vendor .bg-white / .bg-light {...!important} */
html body .navbar-vertical.navbar-vertical-aside {
  background: rgba(255, 255, 255, 0.92) !important;
  border-right: 1px solid var(--kasa-line) !important;
}
/* Flat sidebar: ID scope mengalahkan salinan vendor late-stylesheet. */
html body #navbarVerticalMenu {
  padding: 0 12px 12px;
  min-width: 0;
}
/* Section header space-panel = .dropdown-header (padanan .nav-section-title
   r37). Hairline di atas judul seksi = pemisah grup client zone. */
html body #navbarVerticalMenu .dropdown-header {
  display: block;
  margin: 16px 12px 6px;
  padding-top: 12px;
  border-top: 1px solid var(--kasa-line);
  color: var(--kasa-ink-dim);
  font-family: var(--kasa-font-body);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
}
html body #navbarVerticalMenu .dropdown-header:first-child {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 0;
}
html body #navbarVerticalMenu .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  min-width: 0;
  margin: 2px 0;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--kasa-ink);
  font-family: var(--kasa-font-body);
}
html body #navbarVerticalMenu .nav-icon {
  flex: 0 0 20px;
  width: 20px;
  margin: 0;
  text-align: center;
  font-size: 18px;
  color: inherit;
}
html body #navbarVerticalMenu .nav-link-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body #navbarVerticalMenu .nav-link:hover,
html body #navbarVerticalMenu .nav-link.active {
  color: var(--kasa-accent-strong);
  background: var(--kasa-accent-soft);
}
html body #navbarVerticalMenu .nav-link.active {
  font-weight: 600;
}
html body #navbarVerticalMenu .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--kasa-accent);
}
html body #navbarVerticalMenu .nav-link:focus-visible {
  outline: 2px solid var(--kasa-accent);
  outline-offset: 2px;
  box-shadow: var(--kasa-focus-ring);
}
body.navbar-vertical-aside-mini-mode #navbarVerticalMenu {
  padding-inline: 8px;
}
body.navbar-vertical-aside-mini-mode #navbarVerticalMenu .nav-link {
  justify-content: center;
  gap: 0;
  padding-inline: 0;
}
body.navbar-vertical-aside-mini-mode #navbarVerticalMenu .nav-link-title {
  display: none;
}
/* Mini mode: judul seksi diganti replacer dots vendor. */
body.navbar-vertical-aside-mini-mode #navbarVerticalMenu .dropdown-header {
  display: none;
}

/* ---------- Dropdown / modal / toast ---------- */
html body .dropdown-menu {
  border-radius: 16px;
  border-color: var(--kasa-line);
  box-shadow: var(--kasa-shadow);
}
html body .dropdown-item:hover,
html body .dropdown-item:focus {
  background-color: var(--kasa-accent-soft);
  color: var(--kasa-accent-strong);
}
html body .dropdown-item.active,
html body .dropdown-item:active {
  background-color: var(--kasa-accent-soft);
  color: var(--kasa-accent-strong);
}
html body .modal-content {
  border-radius: 16px;
  border-color: var(--kasa-line);
  box-shadow: var(--kasa-shadow);
}
html body .modal-header,
html body .modal-footer {
  border-color: var(--kasa-line);
}
html body .toast {
  border-radius: 14px;
  border-color: var(--kasa-line);
  box-shadow: var(--kasa-shadow);
}

/* ---------- Tabel / pager ---------- */
html body .table {
  --bs-table-border-color: var(--kasa-line);
  --bs-table-hover-bg: rgba(63, 115, 184, 0.05);
}
/* Eyebrow header tabel (bahasa client zone WHMCS). */
html body .table thead th {
  color: var(--kasa-ink-dim);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
html body .pagination {
  --bs-pagination-color: #3f73b8;
  --bs-pagination-hover-color: #28558f;
  --bs-pagination-hover-bg: var(--kasa-accent-soft);
  --bs-pagination-active-bg: #3f73b8;
  --bs-pagination-active-border-color: #3f73b8;
  --bs-pagination-focus-color: #28558f;
  --bs-pagination-focus-box-shadow: var(--kasa-focus-ring);
  gap: 0.25rem;
}
html body .page-link {
  border-radius: 10px !important;
  border: 0;
}

/* ---------- Badge ---------- */
/* Chip pill (bahasa chip auth hub). */
html body .badge {
  border-radius: 999px;
  font-weight: 650;
}
/* bg-soft (prefix body: menang duel !important lawan salinan vendor) */
html body .bg-soft-primary {
  background-color: rgba(63, 115, 184, 0.12) !important;
  color: #28558f !important;
}
html body .bg-soft-success {
  background-color: rgba(45, 138, 92, 0.12) !important;
  color: #2d8a5c !important;
}
html body .bg-soft-danger {
  background-color: rgba(200, 82, 92, 0.12) !important;
  color: #c8525c !important;
}
html body .bg-soft-warning {
  background-color: rgba(232, 160, 74, 0.14) !important;
  color: #9c6a24 !important;
}
html body .bg-soft-info {
  background-color: rgba(63, 115, 184, 0.12) !important;
  color: #28558f !important;
}
html body .bg-soft-secondary {
  background-color: rgba(102, 120, 139, 0.12) !important;
  color: #4a5d72 !important;
}

/* ---------- Alert soft (signature auth hub: radius 12 + border-left 2px) ---------- */
html body .alert {
  border-radius: 12px;
}
html body .alert-soft-primary {
  background-color: rgba(63, 115, 184, 0.1);
  border-color: transparent;
  border-left: 2px solid var(--kasa-accent);
  color: #28558f;
}
html body .alert-soft-success {
  background-color: rgba(45, 138, 92, 0.1);
  border-color: transparent;
  border-left: 2px solid var(--kasa-ok);
  color: #277950;
}
html body .alert-soft-danger {
  background-color: rgba(200, 82, 92, 0.1);
  border-color: transparent;
  border-left: 2px solid var(--kasa-danger);
  color: #b04851;
}
html body .alert-soft-warning {
  background-color: rgba(232, 160, 74, 0.12);
  border-color: transparent;
  border-left: 2px solid var(--kasa-warn);
  color: #936422;
}

/* ---------- Icon soft (stat card / widget dashboard) ---------- */
html body .icon-soft-primary,
html body .icon-soft-info {
  background-color: rgba(63, 115, 184, 0.12);
  color: #28558f;
}
html body .icon-soft-success {
  background-color: rgba(45, 138, 92, 0.12);
  color: #277950;
}
html body .icon-soft-warning {
  background-color: rgba(232, 160, 74, 0.14);
  color: #936422;
}
html body .icon-soft-danger {
  background-color: rgba(200, 82, 92, 0.12);
  color: #b04851;
}
html body .icon-soft-secondary {
  background-color: rgba(102, 120, 139, 0.12);
  color: #4a5d72;
}

/* ---------- Avatar soft + status dot ---------- */
html body .avatar-soft-primary {
  background-color: rgba(63, 115, 184, 0.12);
  color: #28558f;
}
html body .avatar-status-success {
  background-color: var(--kasa-ok);
}

/* ---------- Brand / logo (CDN Inti Server, issue #80) ---------- */
html body .navbar-brand-text {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--kasa-accent);
}
body .navbar-brand-logo {
  max-height: 2.25rem;
  width: auto;
}
/* Logo mini (aside collapsed): tinggi = lebar square mark vendor, contain. */
body .navbar-brand-logo-mini {
  width: auto;
  height: 1.9125rem;
  max-width: 100%;
  object-fit: contain;
}

/* ---------- Chat bubbles (pindahan inline index.html, token-based) ---------- */
html body .chat-bubble-me {
  background: var(--kasa-accent-soft);
  border-radius: 0.75rem;
  padding: 0.65rem 0.9rem;
  margin-left: 2rem;
}
html body .chat-bubble-ai {
  background: var(--kasa-panel);
  border: 1px solid var(--kasa-line);
  border-radius: 0.75rem;
  padding: 0.65rem 0.9rem;
  margin-right: 2rem;
}

/* ---------- Thread tiket dukungan ----------
   Balasan staff sengaja memakai kelas SENDIRI (.chat-bubble-staff), bukan
   .chat-bubble-ai: keduanya kebetulan sama-sama "pesan dari pihak lain", tapi
   asisten AI dan petugas CS adalah dua hal berbeda — kalau disatukan, satu
   perubahan gaya di widget asisten diam-diam mengubah tampilan tiket. */
html body .chat-bubble-staff {
  background: var(--kasa-panel);
  border: 1px solid var(--kasa-line);
  border-left: 3px solid var(--kasa-accent);
  border-radius: 0.75rem;
  padding: 0.65rem 0.9rem;
  margin-right: 2rem;
  overflow-wrap: anywhere;
}
html body .chat-bubble-me {
  overflow-wrap: anywhere;
}

/* Catatan sistem (tiket ditutup, dsb) — peristiwa, bukan ucapan. */
html body .chat-system {
  text-align: center;
}
html body .chat-system span {
  display: inline-block;
  background: var(--kasa-accent-soft);
  color: var(--kasa-ink-dim);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: 0.8125rem;
}

/* Wadah percakapan: tinggi dibatasi supaya kolom balasan tidak terdorong jauh
   ke bawah layar pada tiket panjang. */
html body .chat-thread {
  max-height: 26rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

/* Komposer: textarea + tombol kirim sejajar, tombol tidak ikut melar. */
html body .chat-compose {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
html body .chat-compose textarea {
  resize: vertical;
}
html body .chat-compose .btn {
  flex: 0 0 auto;
  min-width: 2.75rem;
  min-height: 2.75rem;
}

/* ---------- Footer ---------- */
html body .footer {
  color: var(--kasa-ink-dim);
}
html body .footer a {
  color: var(--kasa-accent);
}
/* .footer vendor = position:absolute; left/right anchor + margin-left 16.25rem
   di >=1200px — offset kiri itu yang mencegah footer menimpa navbar-vertical-
   footer sidebar. JANGAN dinolkan: tanpa margin, footer full-viewport menimpa
   "Inti Server" di pojok kiri bawah. */

/* ---------- Focus-visible global (ring 3px auth hub) ---------- */
html body .btn:focus-visible,
html body .form-control:focus-visible,
html body .form-select:focus-visible {
  border-color: var(--kasa-accent);
  box-shadow: var(--kasa-focus-ring);
}
html body a:focus-visible {
  outline: none;
  box-shadow: var(--kasa-focus-ring);
  border-radius: 4px;
}

/* ---------- Focus-visible kontrol shell (#76) ----------
   Keberadaan rule vendor TIDAK cukup (pelajaran admin-panel#98): toggler aside,
   ikon bell, pembungkus dropdown akun, dan tombol tema terukur `outline: none
   0px` tanpa ring saat difokus keyboard. Diukur computed-style, bukan dilihat. */
html body .navbar-aside-toggler:focus-visible,
html body .navbar-dropdown-account-wrapper:focus-visible,
html body .navbar-nav .btn-icon:focus-visible,
html body #themeToggle:focus-visible,
html body .navbar-brand:focus-visible,
html body .footer a:focus-visible,
html body .dropdown-item:focus-visible {
  outline: 2px solid var(--kasa-accent);
  outline-offset: 2px;
  box-shadow: var(--kasa-focus-ring);
  border-radius: 8px;
}
/* Halaman SPA: h1 fokus-programatik (#76) tidak boleh memunculkan ring —
   ia bukan target Tab, jadi ring-nya justru bising. */
html body #view-root h1:focus,
html body #view-root h1:focus-visible {
  outline: none;
}

/* ---------- Dark: pre-dawn server room ---------- */
/* html.kasa-dark:root = (0,2,1) — WAJIB lebih tinggi dari light :root:root
   (0,2,0): salinan vendor late-stylesheet harus tetap kalah resolve var. */
html.kasa-dark:root {
  color-scheme: dark;

  --kasa-accent: #e8a04a;
  --kasa-accent-strong: #f0b268;
  --kasa-accent-soft: rgba(232, 160, 74, 0.14);
  --kasa-accent-ink: #1a1206;
  --kasa-paper: #10141a;
  --kasa-panel: #161c24;
  --kasa-panel-solid: #161c24;
  --kasa-panel-2: #1b2230;
  --kasa-line: #2a3442;
  --kasa-ink: #e6e2d6;
  --kasa-ink-dim: #8a94a3;
  --kasa-ok: #6fb87a;
  --kasa-danger: #d97373;
  --kasa-warn: #e8a04a;
  --kasa-radius-card: 8px;
  --kasa-radius-btn: 8px;
  --kasa-radius-input: 6px;
  --kasa-focus-ring: 0 0 0 1px var(--kasa-paper), 0 0 0 3px var(--kasa-accent);
  --kasa-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
  --kasa-shadow-btn: none;

  --bs-primary: #e8a04a;
  --bs-primary-rgb: 232, 160, 74;
  --bs-blue: #e8a04a;
  --bs-blue-rgb: 232, 160, 74;
  --bs-secondary: #8a94a3;
  --bs-secondary-rgb: 138, 148, 163;
  --bs-success: #6fb87a;
  --bs-success-rgb: 111, 184, 122;
  --bs-info: #e8a04a;
  --bs-info-rgb: 232, 160, 74;
  --bs-warning: #e8a04a;
  --bs-warning-rgb: 232, 160, 74;
  --bs-danger: #d97373;
  --bs-danger-rgb: 217, 115, 115;
  --bs-body-bg: #10141a;
  --bs-body-bg-rgb: 16, 20, 26;
  --bs-body-color: #e6e2d6;
  --bs-body-color-rgb: 230, 226, 214;
  --bs-heading-color: #e6e2d6;
  --bs-border-color: #2a3442;
  --bs-link-color: #e8a04a;
  --bs-link-color-rgb: 232, 160, 74;
  --bs-link-hover-color: #f0b268;
  --bs-link-hover-color-rgb: 240, 178, 104;
  --bs-card-bg: #161c24;
  --bs-card-border-color: #2a3442;
  --bs-card-border-radius: 8px;
  --bs-card-box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);

  accent-color: #e8a04a;
}
html.kasa-dark body {
  background-color: #10141a;
  background-image:
    radial-gradient(720px 360px at 8% -8%, rgba(232, 160, 74, 0.05), transparent 68%),
    radial-gradient(640px 360px at 100% 0%, rgba(63, 115, 184, 0.06), transparent 68%);
  color: #e6e2d6;
}
html.kasa-dark body.has-navbar-vertical-aside {
  background-color: #10141a;
  background-image:
    radial-gradient(720px 360px at 8% -8%, rgba(232, 160, 74, 0.05), transparent 68%),
    radial-gradient(640px 360px at 100% 0%, rgba(63, 115, 184, 0.06), transparent 68%);
}
html.kasa-dark ::selection {
  color: var(--kasa-accent);
  background-color: rgba(232, 160, 74, 0.25);
}

/* Vendor dark .bg-white{background-color:#25282a!important} mengalahkan
   override non-important apapun specificity-nya -> !important wajib. */
html.kasa-dark #header.navbar {
  background: #161c24 !important;
  border-bottom-color: #2a3442 !important;
}
html.kasa-dark .navbar-vertical.navbar-vertical-aside {
  background: #161c24 !important;
  border-right: 1px solid #2a3442 !important;
}
html.kasa-dark .btn-primary {
  --bs-btn-color: var(--kasa-accent-ink);
  --bs-btn-bg: var(--kasa-accent);
  --bs-btn-border-color: var(--kasa-accent);
  --bs-btn-hover-color: var(--kasa-accent-ink);
  --bs-btn-hover-bg: var(--kasa-accent-strong);
  --bs-btn-hover-border-color: var(--kasa-accent-strong);
  --bs-btn-active-color: var(--kasa-accent-ink);
  --bs-btn-active-bg: var(--kasa-accent-strong);
  --bs-btn-active-border-color: var(--kasa-accent-strong);
  --bs-btn-disabled-color: var(--kasa-accent-ink);
  --bs-btn-disabled-bg: var(--kasa-accent);
  --bs-btn-disabled-border-color: var(--kasa-accent);
  --bs-btn-focus-shadow-rgb: 232, 160, 74;
}
html.kasa-dark .btn-outline-primary {
  --bs-btn-color: var(--kasa-accent);
  --bs-btn-border-color: var(--kasa-accent);
  --bs-btn-hover-color: var(--kasa-accent-ink);
  --bs-btn-hover-bg: var(--kasa-accent);
  --bs-btn-hover-border-color: var(--kasa-accent);
  --bs-btn-active-color: var(--kasa-accent-ink);
  --bs-btn-active-bg: var(--kasa-accent);
  --bs-btn-active-border-color: var(--kasa-accent);
}
html.kasa-dark .btn-ghost-danger {
  --bs-btn-color: var(--kasa-danger);
  --bs-btn-hover-bg: rgba(217, 115, 115, 0.12);
  --bs-btn-hover-color: var(--kasa-danger);
}
html.kasa-dark .form-control:not(textarea),
html.kasa-dark .form-select {
  background-color: var(--kasa-panel-2);
  border-color: var(--kasa-line);
  color: var(--kasa-ink);
}
html.kasa-dark .form-control:focus,
html.kasa-dark .form-select:focus {
  border-color: var(--kasa-accent);
  background-color: var(--kasa-panel);
  box-shadow: var(--kasa-focus-ring);
}
html.kasa-dark .form-control::placeholder {
  color: #6b7684;
}
html.kasa-dark .form-check-input:checked {
  background-color: var(--kasa-accent);
  border-color: var(--kasa-accent);
}
html.kasa-dark .form-label {
  color: var(--kasa-ink);
}
html.kasa-dark .input-group-text {
  background-color: var(--kasa-panel-2);
  border-color: var(--kasa-line);
  color: var(--kasa-ink);
}
html.kasa-dark .dropdown-menu {
  background-color: var(--kasa-panel-2);
  border-color: var(--kasa-line);
}
html.kasa-dark .dropdown-item {
  color: var(--kasa-ink);
}
html.kasa-dark .dropdown-item.active,
html.kasa-dark .dropdown-item:active {
  background-color: var(--kasa-accent-soft);
  color: var(--kasa-accent-strong);
}
html.kasa-dark .modal-content {
  background-color: var(--kasa-panel);
  border-color: var(--kasa-line);
}
html.kasa-dark .toast {
  background-color: var(--kasa-panel-2);
  border-color: var(--kasa-line);
  color: var(--kasa-ink);
}
html.kasa-dark .table {
  --bs-table-color: var(--kasa-ink);
  --bs-table-border-color: var(--kasa-line);
  --bs-table-hover-bg: rgba(232, 160, 74, 0.06);
  --bs-table-striped-color: var(--kasa-ink);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
}
html.kasa-dark .bg-soft-primary {
  background-color: rgba(232, 160, 74, 0.14) !important;
  color: #f0b268 !important;
}
html.kasa-dark .bg-soft-success {
  background-color: rgba(111, 184, 122, 0.14) !important;
  color: #6fb87a !important;
}
html.kasa-dark .bg-soft-danger {
  background-color: rgba(217, 115, 115, 0.14) !important;
  color: #d97373 !important;
}
html.kasa-dark .bg-soft-warning {
  background-color: rgba(232, 160, 74, 0.14) !important;
  color: #f0b268 !important;
}
html.kasa-dark .bg-soft-info {
  background-color: rgba(232, 160, 74, 0.14) !important;
  color: #f0b268 !important;
}
html.kasa-dark .bg-soft-secondary {
  background-color: rgba(138, 148, 163, 0.16) !important;
  color: #c3cbd6 !important;
}
html.kasa-dark .alert-soft-primary {
  background-color: rgba(232, 160, 74, 0.12);
  border-color: transparent;
  border-left-color: var(--kasa-accent);
  color: #f0b268;
}
html.kasa-dark .alert-soft-success {
  background-color: rgba(111, 184, 122, 0.12);
  border-color: transparent;
  border-left-color: var(--kasa-ok);
  color: #b8dcb8;
}
html.kasa-dark .alert-soft-danger {
  background-color: rgba(217, 115, 115, 0.12);
  border-color: transparent;
  border-left-color: var(--kasa-danger);
  color: #f0b4b4;
}
html.kasa-dark .alert-soft-warning {
  background-color: rgba(232, 160, 74, 0.12);
  border-color: transparent;
  border-left-color: var(--kasa-warn);
  color: #f0b268;
}
html.kasa-dark .icon-soft-primary,
html.kasa-dark .icon-soft-info {
  background-color: rgba(232, 160, 74, 0.14);
  color: #f0b268;
}
html.kasa-dark .icon-soft-success {
  background-color: rgba(111, 184, 122, 0.14);
  color: #6fb87a;
}
html.kasa-dark .icon-soft-warning {
  background-color: rgba(232, 160, 74, 0.14);
  color: #f0b268;
}
html.kasa-dark .icon-soft-danger {
  background-color: rgba(217, 115, 115, 0.14);
  color: #e37878;
}
html.kasa-dark .icon-soft-secondary {
  background-color: rgba(138, 148, 163, 0.16);
  color: #c3cbd6;
}
html.kasa-dark .avatar-soft-primary {
  background-color: rgba(232, 160, 74, 0.14);
  color: #f0b268;
}
/* .btn-white vendor = bg putih; di dark jadi panel terangkat. */
html.kasa-dark .btn-white {
  --bs-btn-bg: var(--kasa-panel-2);
  --bs-btn-border-color: var(--kasa-line);
  --bs-btn-color: var(--kasa-ink);
  --bs-btn-hover-bg: #232c3a;
  --bs-btn-hover-border-color: var(--kasa-line);
  --bs-btn-hover-color: var(--kasa-ink);
  --bs-btn-active-bg: #232c3a;
  --bs-btn-active-color: var(--kasa-ink);
}
html.kasa-dark .btn-white:disabled,
html.kasa-dark .btn-white.disabled {
  color: #8a94a3 !important;
}
/* Utility .text-dark (judul kartu / kunci lisensi) tak terlihat di dark. */
html.kasa-dark .text-dark {
  color: var(--kasa-ink) !important;
}
/* Link body dark — light memakai #28558f via selector global a:not(.btn),
   di dark warna itu kontras rendah di atas bg gelap -> remap ke accent. */
html.kasa-dark a:not(.btn):not(.nav-link) {
  color: var(--kasa-accent);
}
html.kasa-dark a:not(.btn):not(.nav-link):hover {
  color: #f0b268;
}
/* Breadcrumb: crumb aktif vendor gray-900 statis — invisible di dark. Link
   mengikuti rule anchor global (light #28558f, dark accent). */
html.kasa-dark .breadcrumb-item.active {
  color: var(--kasa-ink);
}
html.kasa-dark .breadcrumb-item::before {
  color: var(--kasa-ink-dim);
}
/* #99 — crumb perantara non-navigasi kini <span class="breadcrumb-text">,
   bukan <a href="javascript:;">. Warna link crumb datang dari rule anchor
   global, jadi span ini diberi warna yang sama supaya crumb perantara tidak
   berubah tampilan hanya karena berhenti menjadi tautan. */
html body .breadcrumb-text {
  color: #28558f;
}
html.kasa-dark .breadcrumb-text {
  color: var(--kasa-accent);
}
html.kasa-dark .footer {
  color: var(--kasa-ink-dim);
}
html.kasa-dark .footer a {
  color: var(--kasa-accent);
}
html.kasa-dark .btn-ghost-secondary {
  --bs-btn-color: var(--kasa-ink-dim);
  --bs-btn-hover-bg: rgba(232, 160, 74, 0.12);
  --bs-btn-hover-color: var(--kasa-accent-strong);
}

/* ---- btn-soft-* mapping token (r27 #98-C) ----
   Vendor hardcode aksen biru lama di .btn-soft-* dan tidak konsumsi var ->
   aksen drift. Map semua varian ke token. Disabled (#117): rule vendor
   .btn-soft-*:disabled (0,2,0) memenangkan base mapping dan set color ==
   background-color -> label tak terlihat. Ghost scheme berbasis token. */
html body .btn-soft-primary {
  color: var(--kasa-accent);
  background-color: var(--kasa-accent-soft);
  border-color: transparent;
}
html body .btn-soft-primary:hover,
html body .btn-soft-primary.show > .dropdown-toggle {
  color: var(--kasa-accent-ink);
  background-color: var(--kasa-accent-strong);
  border-color: transparent;
}
html body .btn-soft-primary:active {
  color: var(--kasa-accent-ink);
  background-color: var(--kasa-accent-strong);
  border-color: transparent;
}
html body .btn-soft-secondary {
  color: var(--bs-secondary);
  background-color: color-mix(in srgb, var(--bs-secondary) 12%, transparent);
  border-color: transparent;
}
html body .btn-soft-secondary:hover,
html body .btn-soft-secondary.show > .dropdown-toggle,
html body .btn-soft-secondary:active {
  color: #fff;
  background-color: var(--bs-secondary);
  border-color: transparent;
}
html body .btn-soft-success {
  color: var(--bs-success);
  background-color: color-mix(in srgb, var(--bs-success) 12%, transparent);
  border-color: transparent;
}
html body .btn-soft-success:hover,
html body .btn-soft-success.show > .dropdown-toggle,
html body .btn-soft-success:active {
  color: #fff;
  background-color: var(--bs-success);
  border-color: transparent;
}
html body .btn-soft-danger {
  color: var(--bs-danger);
  background-color: color-mix(in srgb, var(--bs-danger) 12%, transparent);
  border-color: transparent;
}
html body .btn-soft-danger:hover,
html body .btn-soft-danger.show > .dropdown-toggle,
html body .btn-soft-danger:active {
  color: #fff;
  background-color: var(--bs-danger);
  border-color: transparent;
}
html body .btn-soft-warning {
  color: var(--bs-warning);
  background-color: color-mix(in srgb, var(--bs-warning) 14%, transparent);
  border-color: transparent;
}
html body .btn-soft-warning:hover,
html body .btn-soft-warning.show > .dropdown-toggle,
html body .btn-soft-warning:active {
  color: #3d2a05;
  background-color: var(--bs-warning);
  border-color: transparent;
}
html body .btn-soft-info {
  color: var(--bs-info);
  background-color: color-mix(in srgb, var(--bs-info) 12%, transparent);
  border-color: transparent;
}
html body .btn-soft-info:hover,
html body .btn-soft-info.show > .dropdown-toggle,
html body .btn-soft-info:active {
  color: #fff;
  background-color: var(--bs-info);
  border-color: transparent;
}
html body .btn-soft-dark {
  color: var(--kasa-ink);
  background-color: color-mix(in srgb, var(--kasa-ink) 10%, transparent);
  border-color: transparent;
}
html body .btn-soft-dark:hover,
html body .btn-soft-dark.show > .dropdown-toggle,
html body .btn-soft-dark:active {
  color: var(--kasa-panel-solid);
  background-color: var(--kasa-ink);
  border-color: transparent;
}
/* Disabled (#117): vendor set color == background-color (aksen solid sama)
   -> label tak terlihat. Ghost scheme token: bg 8% ink, teks ink, >=9:1 di
   light+dark, tetap tampak "mati". Opacity 1 (vendor .65 mengompres ghost
   terhadap page bg); affordance disabled dari fill + teks redup + cursor. */
html body .btn-soft-primary:disabled,
html body .btn-soft-primary.disabled,
html body .btn-soft-secondary:disabled,
html body .btn-soft-secondary.disabled,
html body .btn-soft-success:disabled,
html body .btn-soft-success.disabled,
html body .btn-soft-danger:disabled,
html body .btn-soft-danger.disabled,
html body .btn-soft-warning:disabled,
html body .btn-soft-warning.disabled,
html body .btn-soft-info:disabled,
html body .btn-soft-info.disabled,
html body .btn-soft-dark:disabled,
html body .btn-soft-dark.disabled,
html body .btn-soft-light:disabled,
html body .btn-soft-light.disabled {
  color: var(--kasa-ink);
  background-color: color-mix(in srgb, var(--kasa-ink) 8%, transparent);
  border-color: transparent;
  --bs-btn-disabled-opacity: 1;
}
html body .btn-white:disabled,
html body .btn-white.disabled {
  color: #67788b !important;
}

/* ---- badge text-bg-* override (r27 #98-D) ----
   Vendor .text-bg-* hardcode palet raw + !important -> badge status
   melampaui token. Gaya chip status auth.intiserver.com: SOFT (latar pucat
   + teks gelap berwarna + border tipis). Pasangan >= 4.5:1. */
.badge.text-bg-success {
  color: #246e49 !important;
  background-color: #f0faf4 !important;
  border-color: #c8e8d3 !important;
}
.badge.text-bg-warning {
  color: #936422 !important;
  background-color: #fbeedd !important;
  border-color: #f0d9b0 !important;
}
.badge.text-bg-danger {
  color: #9d3d47 !important;
  background-color: #fff4f5 !important;
  border-color: #f0c8cc !important;
}
.badge.text-bg-info {
  color: #28558f !important;
  background-color: #e6f0fb !important;
  border-color: #cfe1f5 !important;
}
.badge.text-bg-secondary {
  color: #1d2d40 !important;
  background-color: #f5f8fc !important;
  border-color: #dbe5ef !important;
}
html.kasa-dark .badge.text-bg-success {
  color: #b8dcb8 !important;
  background-color: rgba(111, 184, 122, 0.09) !important;
  border-color: rgba(111, 184, 122, 0.22) !important;
}
html.kasa-dark .badge.text-bg-warning {
  color: #f0b268 !important;
  background-color: rgba(232, 160, 74, 0.12) !important;
  border-color: rgba(232, 160, 74, 0.22) !important;
}
html.kasa-dark .badge.text-bg-danger {
  color: #f0b4b4 !important;
  background-color: rgba(217, 115, 115, 0.09) !important;
  border-color: rgba(217, 115, 115, 0.22) !important;
}
html.kasa-dark .badge.text-bg-info {
  color: #f0b268 !important;
  background-color: rgba(232, 160, 74, 0.12) !important;
  border-color: rgba(232, 160, 74, 0.22) !important;
}
html.kasa-dark .badge.text-bg-secondary {
  color: #b8c2cc !important;
  background-color: rgba(138, 148, 163, 0.14) !important;
  border-color: rgba(138, 148, 163, 0.24) !important;
}

/* ---- badge bg-soft-* kontras (r28 #100-E) ----
   Badge 12px = normal text -> WCAG AA 4.5:1 pada composite alpha.
   light success #2d8a5c 3.70 -> #277950 4.61; danger 3.74 -> #b04851 4.63;
   warning 4.21 -> #936422 4.63; dark danger 4.50 -> #e37878 4.88. */
.badge.bg-soft-success.text-success { color: #277950 !important; }
.badge.bg-soft-danger.text-danger { color: #b04851 !important; }
.badge.bg-soft-warning.text-warning { color: #936422 !important; }
html.kasa-dark .badge.bg-soft-danger.text-danger { color: #e37878 !important; }
/* #81 — badge warning: token bg/teks terpisah (bukan alpha-dari-teks).
   Light: bg opaque #fdf0dd + teks #855718 = 5.54:1, tidak lagi bergantung
   pada halaman (sebelumnya 4.38:1 di atas --kasa-paper).
   Dark: teks #e0a45a di atas composite amber-gelap = 6.16:1; rule light di
   atas (!important, 0,3,0) menang atas `html.kasa-dark .bg-soft-warning`
   (0,2,1) sehingga tanpa rule 0,3,1 ini badge dark tetap 2.6:1. */
html body .badge.bg-soft-warning.text-warning {
  background-color: var(--kasa-warn-badge-bg) !important;
  color: var(--kasa-warn-badge-ink) !important;
  border-color: transparent !important;
}
html.kasa-dark body .badge.bg-soft-warning.text-warning {
  background-color: rgba(232, 160, 74, 0.14) !important;
  color: #e0a45a !important;
}

/* ---- utility .text-success di luar badge (r29 #102) ----
   Toast icon di atas panel: token success gagal AA light; fix = tone badge
   #277950. Dark #6fb87a sudah pass — dipin eksplisit agar salinan cascade
   shield tidak bisa menggesernya. */
html body .text-success { color: #277950 !important; }
html.kasa-dark body .text-success { color: #6fb87a !important; }

/* ---- Scrollbar (default vendor terlihat "belum distyle") ---- */
html {
  scrollbar-width: thin;
  scrollbar-color: #b9c9dc transparent;
}
html *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html *::-webkit-scrollbar-track {
  background: transparent;
}
html *::-webkit-scrollbar-thumb {
  background: #c3d3e4;
  border-radius: 9999px;
}
html *::-webkit-scrollbar-thumb:hover {
  background: #9fb4ca;
}
html.kasa-dark:root {
  scrollbar-color: #2a3442 transparent;
}
html.kasa-dark *::-webkit-scrollbar-thumb {
  background: #2a3442;
}
html.kasa-dark *::-webkit-scrollbar-thumb:hover {
  background: #3a4657;
}

/* ---- Popup <option> native (Chrome/Windows menghormati bg/color) ---- */
html body select option {
  background: #fff;
  color: #1d2d40;
}
html.kasa-dark select option,
html[data-hs-theme-appearance="dark"] select option {
  background: #1b2230;
  color: #e6e2d6;
}

/* ---- #110: cakupan select/option/optgroup yang lengkap ----
   Sebelum blok ini hanya `select option` yang punya aturan. Yang ditutup:
   (a) `<select>` TANPA `.form-select` — tidak ada jaring pengaman;
   (b) `<optgroup>` — belum punya aturan sama sekali di repo ini (0 hit), jadi
       begitu dipakai ia jatuh ke gaya label OS dan popup-nya tidak ikut tema;
   (c) panah dropdown `.form-select` masih memakai aset vendor
       (stroke #71869d, abu-biru Front Dashboard) di kedua mode.
   Cascade shield: rule light WAJIB diprefix `html body ` (vendor menyuntik
   salinan stylesheet setelah </head>); dark aman lewat html.kasa-dark. */
html body select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 46px;
  padding: 0.6125rem 2.25rem 0.6125rem 1rem;
  border: 1px solid var(--kasa-line);
  border-radius: var(--kasa-radius-input);
  background-color: rgba(247, 250, 253, 0.88);
  color: var(--kasa-ink);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 13px 9px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2366788b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
/* Panah bertema juga untuk select ber-`.form-select` — (0,1,1) mengalahkan
   `.form-select` vendor (0,1,0). */
html body .form-select {
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 13px 9px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2366788b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
/* Multi-select: tanpa caret, dan jangan dipaksa setinggi satu baris. */
html body select[multiple],
html body select[size]:not([size="1"]) {
  background-image: none;
  padding-right: 1rem;
  height: auto;
}
html body select:disabled,
html body .form-select:disabled {
  background-color: rgba(241, 245, 249, 0.9);
  color: var(--kasa-ink-dim);
  opacity: 1;
}
/* Label grup: warna sekunder + tebal, bukan gaya OS. */
html body select optgroup {
  background-color: #ffffff;
  color: #66788b;
  font-weight: 600;
  font-style: normal;
}
html body select option:checked {
  background: var(--kasa-accent-soft);
  color: var(--kasa-accent-strong);
}
html body select option:disabled {
  color: #8b9bad;
}

html.kasa-dark select {
  border-color: #2a3442;
  background-color: #1b2230;
  color: #e6e2d6;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238a94a3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html.kasa-dark .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238a94a3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html.kasa-dark select[multiple],
html.kasa-dark select[size]:not([size="1"]) {
  background-image: none;
}
html.kasa-dark select:disabled,
html.kasa-dark .form-select:disabled {
  background-color: #161c24;
  color: #8a94a3;
  opacity: 1;
}
html.kasa-dark select optgroup,
html[data-hs-theme-appearance="dark"] select optgroup {
  background-color: #1b2230;
  color: #8a94a3;
}
html.kasa-dark select option:checked {
  background: rgba(232, 160, 74, 0.14);
  color: #f0b268;
}
html.kasa-dark select option:disabled {
  color: #6b7684;
}

/* ---- .text-muted kontras (#81 sweep, metodologi admin-panel#98) ----
   Sebelumnya menunjuk --kasa-ink-dim = #66788b → 4.26:1 di atas --kasa-paper
   (gagal 4.5). Sekarang memakai tone teks --kasa-ink-dim-text = 5.46:1.
   Dark: #8a94a3 sudah 5.59:1 di panel dark, jadi nilai kontrak dipertahankan. */
html body .text-muted {
  color: var(--kasa-ink-dim-text) !important;
}
html.kasa-dark .text-muted,
html[data-hs-theme-appearance="dark"] .text-muted {
  color: var(--kasa-ink-dim) !important;
}

/* ---- .card-subtitle (#81) ----
   Vendor memakai #8c98a4 (2.92:1 di kartu putih) dan tidak tersentuh
   override mana pun → label form ("Status", "Email", "User database")
   praktis tidak terbaca. Turunan tone teks yang sama. */
html body .card-subtitle {
  color: var(--kasa-ink-dim-text) !important;
}
html.kasa-dark .card-subtitle,
html[data-hs-theme-appearance="dark"] .card-subtitle {
  color: var(--kasa-ink-dim) !important;
}

/* ---- Footer copyright (#81) ----
   `<p class="fs-6">© Inti Server</p>` mewarisi warna muted vendor → 4.26:1. */
html body .footer p,
html body .footer .fs-6 {
  color: var(--kasa-ink-dim-text) !important;
}
html.kasa-dark .footer p,
html.kasa-dark .footer .fs-6,
html[data-hs-theme-appearance="dark"] .footer p,
html[data-hs-theme-appearance="dark"] .footer .fs-6 {
  color: var(--kasa-ink-dim) !important;
}

/* ---- Avatar initials (#81) ----
   `#user-initials` mewarisi warna aksen BRAND (#3f73b8) dari salinan vendor
   yang disisipkan setelah file ini → 3.68:1 di light, 2.33:1 di dark (biru
   brand di atas pill amber). Dipin eksplisit di kedua mode dengan selector
   ber-prefix body supaya tidak bisa digeser salinan cascade vendor. */
html body .avatar-soft-primary,
html body .avatar-initials {
  color: #28558f !important; /* 5.75:1 di avatar-soft light */
}
html.kasa-dark body .avatar-soft-primary,
html.kasa-dark body .avatar-initials,
html[data-hs-theme-appearance="dark"] body .avatar-soft-primary,
html[data-hs-theme-appearance="dark"] body .avatar-initials {
  color: #f0b268 !important; /* 6.01:1 di pill amber dark */
}

/* ======================================================================
   kasa9 — Wave-3 (2026-09-20)
   ====================================================================== */

/* ---- F1: Custom language selector (bukan <select> native) ----
   Struktur: .lang-select > button.lang-select-btn + ul.lang-select-menu.
   Flag SVG inline di [data-lang-flag] (dipaint index.html). */
.lang-select {
  position: relative;
  display: inline-block;
}
.lang-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  font-family: var(--kasa-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--kasa-ink);
  background: var(--kasa-panel-solid);
  border: 1px solid var(--kasa-line);
  border-radius: var(--kasa-radius-input);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  user-select: none;
}
.lang-select-btn:hover {
  border-color: var(--kasa-accent);
}
.lang-select-btn:focus-visible {
  outline: none;
  box-shadow: var(--kasa-focus-ring);
}
.lang-select .lang-select-caret {
  font-size: 0.625rem;
  color: var(--kasa-ink-dim);
  transition: transform 0.15s ease;
}
.lang-select.is-open .lang-select-caret {
  transform: rotate(180deg);
}
.lang-flag {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.lang-flag svg {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  display: block;
}
.lang-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1080;
  min-width: 13rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--kasa-panel-solid);
  border: 1px solid var(--kasa-line);
  border-radius: var(--kasa-radius-input);
  box-shadow: var(--kasa-shadow);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  visibility: hidden;
  pointer-events: none;
  /* `visibility` itu properti DISKRET: dengan durasi 0.14s ia baru berubah di
     tengah animasi (~70ms), jadi elemen masih `hidden` saat kita mencoba
     memfokus opsi — dan elemen `hidden` TIDAK bisa difokus (focus() jadi
     no-op senyap). Itu yang membuat navigasi panah terasa "terbuka tapi
     fokus tidak pindah". Transisikan visibility dengan durasi 0 + delay
     0.14s pada SAAT MENUTUP (agar animasi tutup tetap terlihat), dan
     langsung (delay 0) saat MEMBUKA — pola standar untuk menu ber-animasi. */
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s 0.14s;
}
.lang-select.is-open .lang-select-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s 0s;
}
/* #100 — jaring pengaman tanpa JS: menu tidak boleh lebih lebar dari viewport.
   `min-width: 13rem` (208px) menang atas `max-width` kalau lebih besar, jadi
   keduanya dilonggarkan pada viewport sempit. Flip rata-kanan-nya sendiri
   dilakukan saat membuka (i18n.js `position()`) karena butuh posisi tombol. */
@media (max-width: 360px) {
  .lang-select-menu {
    min-width: 0;
    max-width: calc(100vw - 1rem);
  }
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: calc(var(--kasa-radius-input) - 4px);
  font-size: 0.875rem;
  color: var(--kasa-ink);
  cursor: pointer;
  transition: background 0.12s ease;
}
.lang-option:hover,
.lang-option:focus-visible {
  background: var(--kasa-accent-soft);
  outline: none;
}
.lang-option .lang-option-check {
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--kasa-accent);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.lang-option.is-selected .lang-option-check {
  opacity: 1;
}
.lang-option.is-selected {
  font-weight: 600;
}

/* ---- #112: language selector di dalam dropdown profil ----
   Selector dipindah dari topbar ke menu akun (pola KASA Gateway). Yang berubah
   dibanding bentuk topbar-nya:
   - trigger tampil sebagai item menu (tanpa bingkai), bukan tombol berbingkai;
   - submenu jadi SIDE FLYOUT ke kiri (`right:100%`) karena menu akun rata kanan
     — kalau tetap `left:0` ia menutupi menu akunnya sendiri;
   - di layar sempit / viewport pendek submenu menjadi in-flow (`position:static`)
     sehingga tidak mungkin keluar layar. Ini MENGGANTIKAN pengukuran viewport
     di i18n.js (`position()`, #100) — invariannya sekarang struktural, bukan
     hasil hitungan runtime yang bergantung lebar menu saat transisi. */
.space-acct-dropdown {
  /* side flyout harus boleh keluar dari kotak menu */
  overflow: visible;
}
.space-lang-in-dropdown {
  position: relative;
  display: block;
  width: 100%;
}
.space-lang-in-dropdown .lang-select-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: calc(var(--kasa-radius-input) - 4px);
  background: transparent;
  font-family: var(--kasa-font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--kasa-ink);
  white-space: normal;
  text-align: left;
}
.space-lang-in-dropdown .lang-select-btn:hover {
  border-color: transparent;
  background: var(--kasa-accent-soft);
}
.space-lang-in-dropdown .lang-select-btn:focus-visible {
  outline: 2px solid var(--kasa-accent);
  outline-offset: -2px;
  box-shadow: none;
}
/* Caret menunjuk ke arah submenu (kiri), bukan ke bawah. */
.space-lang-in-dropdown .lang-select-caret {
  margin-left: auto;
  font-size: 0.75rem;
  transform: rotate(90deg);
}
.space-lang-in-dropdown.is-open .lang-select-caret {
  transform: rotate(-90deg);
}
.space-lang-in-dropdown .lang-select-menu {
  top: 0;
  left: auto;
  right: 100%;
  margin-right: 6px;
  transform: translateX(6px) scale(0.98);
}
.space-lang-in-dropdown.is-open .lang-select-menu {
  transform: translateX(0) scale(1);
}
@media (max-width: 575.98px), (max-height: 420px) {
  .space-acct-dropdown {
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
  }
  .space-lang-in-dropdown .lang-select-menu {
    position: static;
    left: auto;
    right: auto;
    margin: 0.35rem 0 0;
    min-width: 0;
    max-width: 100%;
    box-shadow: none;
    transform: none;
    /* WAJIB: di mode `static` menu TERTUTUP masih `display:block` +
       `visibility:hidden`, dan `visibility` MEMPERTAHANKAN layout — terukur
       108px ruang kosong menyisip antara baris bahasa dan item Keluar.
       `display` di-toggle di sini (bukan `visibility`) supaya benar-benar
       keluar dari flow. Transisi opacity/transform tidak relevan lagi di
       mode static, jadi mematikan `display` tidak menghilangkan animasi
       yang berarti. */
    display: none;
  }
  .space-lang-in-dropdown.is-open .lang-select-menu {
    transform: none;
    display: block;
  }
}

/* ---- F2b: Floating AI chatbot widget ---- */
#ai-widget {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.625rem;
}
.ai-widget-fab {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: none;
  background: var(--kasa-accent);
  color: var(--kasa-accent-ink);
  font-size: 1.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--kasa-shadow-btn), 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, background 0.15s ease;
}
.ai-widget-fab:hover {
  transform: scale(1.06);
  background: var(--kasa-accent-strong);
}
.ai-widget-fab:focus-visible {
  outline: none;
  box-shadow: var(--kasa-focus-ring);
}
.ai-widget-panel {
  width: min(22rem, calc(100vw - 2.5rem));
  /* Height STATIS — percakapan panjang di-scroll di .ai-widget-log
     (perilaku standar widget chatbot; panel tidak mengembang). */
  height: 30rem;
  max-height: min(30rem, calc(100vh - 7rem));
  display: flex;
  flex-direction: column;
  background: var(--kasa-panel-solid);
  border: 1px solid var(--kasa-line);
  border-radius: var(--kasa-radius-card);
  box-shadow: var(--kasa-shadow);
  overflow: hidden;
}
.ai-widget-panel[hidden] {
  display: none;
}
.ai-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--kasa-accent);
  color: var(--kasa-accent-ink);
}
.ai-widget-title {
  font-family: var(--kasa-font-display);
  font-weight: 600;
  font-size: 0.9375rem;
}
.ai-widget-close {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0.25rem;
  border-radius: 6px;
}
.ai-widget-close:hover {
  background: rgba(255, 255, 255, 0.18);
}
.ai-widget-log {
  flex: 1 1 auto;
  min-height: 0; /* wajib: anak flex agar overflow-y benar-benar scroll */
  overflow-y: auto;
  padding: 1rem;
}
.ai-widget-input-wrap {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--kasa-line);
}
.ai-widget-input-wrap .form-control {
  border-radius: var(--kasa-radius-input);
}

/* ---- Dashboard: panel ringkasan layanan (gaya client-area WHMCS) ---- */
.space-service-panel {
  max-width: 56rem;
}
.space-sum-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--kasa-line);
  font-size: 0.875rem;
  font-weight: 600;
}
.space-sum-item {
  display: inline-flex;
  align-items: center;
}
.space-sum-ok { color: var(--kasa-ok); }
.space-sum-warn { color: var(--kasa-warn); }
.space-sum-down { color: var(--kasa-ink-dim); }
.space-service-list {
  display: flex;
  flex-direction: column;
}
.space-service-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  color: var(--kasa-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--kasa-line);
  transition: background 0.12s ease;
}
.space-service-row:last-child {
  border-bottom: none;
}
.space-service-row:hover {
  background: var(--kasa-accent-soft);
  color: var(--kasa-ink);
  text-decoration: none;
}
.space-service-row:focus-visible {
  outline: none;
  box-shadow: inset var(--kasa-focus-ring);
}
.space-service-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.space-dot-ok { background: var(--kasa-ok); }
.space-dot-warn { background: var(--kasa-warn); }
.space-dot-down { background: var(--kasa-ink-dim); }
.space-service-icon {
  flex-shrink: 0;
}
.space-service-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.space-service-title {
  font-weight: 600;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
}
.space-service-detail {
  color: var(--kasa-ink-dim);
  font-size: 0.8125rem;
}
.space-service-cta {
  color: var(--kasa-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 576px) {
  .space-service-cta { display: none; }
  .space-service-row { padding: 0.875rem 1rem; }
}

/* Footer panel layanan (CTA dukungan) */
.space-panel-foot {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--kasa-line);
  font-size: 0.8125rem;
}
.space-panel-foot a {
  color: var(--kasa-accent);
  font-weight: 600;
  text-decoration: none;
}
.space-panel-foot a:hover {
  text-decoration: underline;
}

/* ---- Dashboard first-sight: pintasan + tagihan ---- */
.space-section-label {
  color: var(--kasa-ink-dim);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.space-quick-card {
  color: var(--kasa-ink);
  border: 1px solid var(--kasa-line);
  border-radius: var(--kasa-radius-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.space-quick-card:hover {
  border-color: var(--kasa-accent);
  box-shadow: var(--kasa-shadow);
  transform: translateY(-2px);
  color: var(--kasa-ink);
  text-decoration: none;
}
.space-quick-card .icon {
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
}
.space-billing-alert {
  margin: 0;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  color: var(--kasa-ink);
  background: var(--kasa-accent-soft);
  border-bottom: 1px solid var(--kasa-line);
}
.space-billing-na {
  border-style: dashed;
}

/* ---- Kartu layanan generik "Layanan Anda" (widget BFF, space#109) ----
   Status non-normal WAJIB terlihat beda dari yang normal, bukan hanya beda
   badge: garis putus-putus + warna garis status, konsisten dengan
   .space-billing-na. Tanpa ini widget `degraded`/`unavailable` terbaca
   seperti layanan sehat — persis yang dilarang kontrak modul MCWS.
   Sengaja TIDAK memakai opacity: menurunkan opacity membuat pengukuran
   kontras (computed style) berbohong tentang keterbacaan teks di dalamnya. */
.space-widget-card {
  border: 1px solid var(--kasa-line);
  border-radius: var(--kasa-radius-card);
}
.space-widget-card .icon {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1rem;
}
.space-widget-card.space-widget-degraded,
.space-widget-card.space-widget-na {
  border-style: dashed;
}
.space-widget-card.space-widget-degraded {
  border-color: var(--kasa-warn);
}

/* ---- Kartu Dukungan: tiket terakhir ---- */
.space-latest-ticket {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--kasa-line);
  border-radius: var(--kasa-radius-input);
  color: var(--kasa-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.space-latest-ticket:hover {
  border-color: var(--kasa-accent);
  background: var(--kasa-accent-soft);
  color: var(--kasa-ink);
  text-decoration: none;
}
.space-latest-subject {
  font-weight: 600;
  font-size: 0.9375rem;
}
.space-latest-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--kasa-ink-dim);
}
/* Progress bar kelengkapan profil memakai warna accent kasa */
html body #dash-profile-card .progress {
  background-color: var(--kasa-line);
  border-radius: 999px;
}
html body #dash-profile-card .progress-bar {
  background-color: var(--kasa-accent);
}

/* ======================================================================
   kasa14 — Wave-4 (2026-09-21)
   Pemilih negara: combobox bersearch, bukan <select>/<input> 2 huruf.
   Struktur dari countries.js:
     .space-cs > .space-cs-field > input.space-cs-input + i.space-cs-caret
              + ul.space-cs-list (di-teleport ke <body> saat terbuka)
   Panel SENGAJA tidak bergantung pada induknya (position: fixed, dihitung
   JS), jadi aturan di bawah ditulis dengan :root agar tetap berlaku walau
   elemen berada langsung di bawah <body>.
   ====================================================================== */
.space-cs {
  position: relative;
}
.space-cs-field {
  position: relative;
  display: flex;
  align-items: center;
}
/* Input negara tampil seperti form-control kasa lain, termasuk ikon caret. */
html body .space-cs-input {
  padding-right: 2.5rem;
  text-overflow: ellipsis;
}
html body .space-cs-input.has-value {
  font-weight: 600;
}
.space-cs-caret {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--kasa-ink-dim);
  pointer-events: none;
  transition: transform 0.15s ease;
}
.space-cs.is-open .space-cs-caret {
  transform: translateY(-50%) rotate(180deg);
}
.space-cs.is-open .space-cs-input {
  box-shadow: var(--kasa-focus-ring);
  border-color: var(--kasa-accent);
}

/* ---- Panel daftar ---- */
html body .space-cs-list {
  z-index: 1090;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--kasa-panel-solid);
  border: 1px solid var(--kasa-line);
  border-radius: var(--kasa-radius-input);
  box-shadow: var(--kasa-shadow);
  scrollbar-width: thin;
  scrollbar-color: var(--kasa-line) transparent;
}
html body .space-cs-list::-webkit-scrollbar {
  width: 10px;
}
html body .space-cs-list::-webkit-scrollbar-thumb {
  background: var(--kasa-line);
  border-radius: 999px;
  border: 3px solid var(--kasa-panel-solid);
}
html body .space-cs-list::-webkit-scrollbar-track {
  background: transparent;
}

.space-cs-opt {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: calc(var(--kasa-radius-input) - 4px);
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--kasa-ink);
  cursor: pointer;
  transition: background 0.12s ease;
}
.space-cs-opt.is-active,
.space-cs-opt:hover {
  background: var(--kasa-accent-soft);
}
.space-cs-opt.is-selected .space-cs-optname {
  font-weight: 700;
}
/* Kode ISO sebagai chip monospace — sinyal "ini yang tersimpan", sekaligus
   konfirmasi visual bahwa customer memilih negara yang benar. */
.space-cs-code {
  font-family: var(--kasa-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.375rem;
  border-radius: 6px;
  color: var(--kasa-ink-dim);
  background: color-mix(in srgb, var(--kasa-line) 55%, transparent);
}
.space-cs-opt.is-active .space-cs-code,
.space-cs-opt:hover .space-cs-code {
  color: var(--kasa-accent-strong);
  background: var(--kasa-panel-solid);
}
.space-cs-optcheck {
  font-size: 0.875rem;
  color: var(--kasa-accent);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.space-cs-opt.is-selected .space-cs-optcheck {
  opacity: 1;
}
.space-cs-empty {
  padding: 1rem 0.75rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--kasa-ink-dim);
}