:root {
  --bg: #0b0f14;
  --surface: #121820;
  --surface-2: #182029;
  --surface-3: #1e2833;
  --border: #232d39;
  --text: #e7edf3;
  --text-dim: #8a97a6;
  --text-faint: #56626f;
  --accent: #33e29b;
  --accent-rgb: 51, 226, 155;
  --accent-dim: #1c8f63;
  --accent-soft: rgba(51, 226, 155, 0.12);
  --warn: #ffb020;
  --warn-soft: rgba(255, 176, 32, 0.12);
  --danger: #ff5c72;
  --danger-soft: rgba(255, 92, 114, 0.12);
  --success: #22c55e;
  --success-rgb: 34, 197, 94;
  --success-soft: rgba(34, 197, 94, 0.14);
  --success-dim: #16a34a;
  --rank-developer: #b388ff;
  --rank-owner: #ffb020;
  --rank-partner: #4fc3f7;
  --rank-reseller: #33e29b;
  --rank-member: #8a97a6;
  --radius: 12px;
  --radius-sm: 8px;
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --sidebar-width: 236px;
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
canvas,
svg {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 999px;
  border: 2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Smooth cross-fade between full page navigations (Chrome/Edge only;
   silently ignored elsewhere). Shorter + eased so it feels snappy, not slow. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
  animation-timing-function: var(--ease-smooth);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Tombol "Masuk dengan Google" di halaman login */
.btn-google {
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-google svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-google:hover {
  background: #f7f8f8;
}

/* Halaman Profil */
.profile-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
  transition: color 0.15s var(--ease-smooth);
}

.profile-back-link:hover {
  color: var(--accent);
}

.profile-back-link svg {
  width: 16px;
  height: 16px;
}

.img2prompt-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 10px;
  margin-bottom: 14px;
  display: flex;
  justify-content: center;
}

.img2prompt-preview img {
  max-width: 100%;
  max-height: 340px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.img2prompt-result {
  width: 100%;
  resize: vertical;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid var(--border);
}

.profile-avatar-fallback {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 20px;
}

.google-account-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-avatar-upload-wrap {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}

.profile-avatar-upload-wrap .profile-avatar,
.profile-avatar-upload-wrap .profile-avatar-fallback {
  width: 56px;
  height: 56px;
}

.profile-avatar-edit-btn {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #04140d;
  border: 2px solid var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.profile-avatar-edit-btn svg {
  width: 12px;
  height: 12px;
}

.google-account-row .meta {
  color: var(--text-dim);
  font-size: 13px;
}

.google-account-row > svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* Halaman "Menunggu Persetujuan" (mirip auth-shell login) */
.pending-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.pending-icon svg {
  width: 28px;
  height: 28px;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  background-attachment: fixed;
  transition: background-color 0.25s var(--ease-smooth);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.auth-shell,
.app-shell {
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
}

::selection {
  background: rgba(var(--accent-rgb), 0.28);
  color: var(--text);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 999px;
  border: 2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-dim);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}

p {
  margin: 0 0 12px;
  color: var(--text-dim);
}

.mono {
  font-family: var(--font-mono);
}

.hidden {
  display: none !important;
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
}

.auth-card::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 160px;
  height: 160px;
  background: var(--accent);
  filter: blur(90px);
  opacity: 0.22;
}

.auth-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
}

/* Logo situs (foto) tampil di tengah kartu login, di atas judul, supaya
   langsung kelihatan sebelum user mengisi username & password. */
.auth-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
  position: relative;
}

.auth-logo {
  height: 64px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 6px 10px;
}

.auth-mark .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.auth-card h1 {
  font-size: 24px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 14px;
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-hint {
  margin: 12px 0 0;
  font-size: 12px;
  text-align: center;
  color: var(--text-dim);
}

.btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(4, 20, 13, 0.35);
  border-top-color: #04140d;
  margin-right: 8px;
  vertical-align: -2px;
  animation: btnSpin 0.7s linear infinite;
}

.btn.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.stat-box {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
  transition: border-color 0.15s var(--ease-smooth), transform 0.15s var(--ease-smooth);
}

.stat-box.is-tapped {
  border-color: var(--accent-dim);
  transition: border-color 0.1s var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
  .stat-box:hover {
    border-color: var(--accent-dim);
    transform: translateY(-2px);
  }
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.25);
}

.stat-label {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}

.stats-subtitle {
  font-size: 13px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 4px 0 10px;
}

.stats-role-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stats-role-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
}

.ladder {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  padding: 10px 12px;
}

.ladder-rung {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  position: relative;
  transition: background 0.2s var(--ease-smooth);
}

.ladder-rung.filled {
  background: var(--rung-color, var(--accent));
}

.ladder-rung.current {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--rung-color, var(--accent));
}

.ladder-horizontal {
  flex-direction: row;
  padding: 0;
  gap: 5px;
}

.ladder-horizontal .ladder-rung {
  height: 5px;
  flex: 1;
}

.field {
  margin-bottom: 14px;
}

.field-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.field-row-between label {
  margin-bottom: 0;
  text-transform: none;
  font-size: 14px;
  letter-spacing: normal;
  color: var(--text);
}

.field label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.15s var(--ease-smooth), box-shadow 0.15s var(--ease-smooth);
}

.field input.mono {
  font-family: var(--font-mono);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  perspective: 800px;
}

.field-input-wrap input {
  width: 100%;
  padding-right: 44px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.15s var(--ease-smooth), box-shadow 0.15s var(--ease-smooth), background 0.2s var(--ease-smooth);
  position: relative;
  z-index: 2;
}

.input-3d-glow {
  display: none;
}

.toggle-pw-btn {
  position: absolute;
  right: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  z-index: 3;
  transition: 0.2s;
}

.toggle-pw-btn:hover {
  color: var(--accent);
  background: var(--accent-soft);
  transform: scale(1.1) translateZ(5px);
}

.row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.row .field {
  flex: 1;
  margin-bottom: 0;
}

.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border-radius: 0;
  padding: 11px 18px;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.15s var(--ease-smooth), opacity 0.15s var(--ease-smooth),
    box-shadow 0.18s var(--ease-smooth), background 0.18s var(--ease-smooth), border-color 0.18s var(--ease-smooth);
}

.btn:active,
.btn.is-tapped {
  transform: scale(0.97);
  transition: transform 0.08s var(--ease-smooth), box-shadow 0.12s var(--ease-smooth);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--accent);
  color: #04140d;
  width: 100%;
  box-shadow: 0 0 0 rgba(var(--accent-rgb), 0);
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
}

.btn-primary:active,
.btn-primary.is-tapped {
  box-shadow: 0 3px 12px -3px rgba(var(--accent-rgb), 0.55);
  transition: box-shadow 0.1s var(--ease-smooth), transform 0.08s var(--ease-smooth);
}

.btn-block {
  width: 100%;
}

.btn-ghost {
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-danger {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid rgba(255, 92, 114, 0.35);
  padding: 8px 14px;
  font-size: 13px;
}

.btn-small {
  padding: 8px 14px;
  font-size: 13px;
}

/* Hover-only flourishes: real pointer devices (mouse/trackpad) only,
   so a tap on touchscreens never leaves a "stuck" glow behind. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-1px);
  }

  .btn-primary::after {
    transition: left 0.55s var(--ease-smooth);
  }

  .btn-primary:hover::after {
    left: 130%;
  }

  .btn-primary:hover {
    box-shadow: 0 8px 26px -6px rgba(var(--accent-rgb), 0.65);
  }

  .btn-ghost:hover {
    border-color: var(--accent-dim);
    color: var(--text);
  }

  .btn-danger:hover {
    box-shadow: 0 6px 18px -8px rgba(255, 92, 114, 0.5);
  }
}

.msg {
  min-height: 18px;
  font-size: 13px;
  margin-top: 10px;
}

.msg.ok {
  color: var(--accent);
}

.msg.err {
  color: var(--danger);
}

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

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  background-image: radial-gradient(circle at 0% 0%, var(--accent-soft), transparent 45%);
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
}

/* =========================================================
   TOMBOL MUSIK LATAR (ditaruh dekat logo/brand website, di
   sidebar desktop maupun topbar mobile). Tombol untuk
   on/off (play/pause) + slider kecil untuk atur volume.
   ========================================================= */
.site-music {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.site-music-toggle {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth);
}

.site-music-toggle svg {
  width: 15px;
  height: 15px;
}

.site-music-icon {
  display: none;
}

.site-music-toggle[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-soft);
}

.site-music-toggle[aria-pressed="true"] .site-music-icon-on {
  display: flex;
}

.site-music-toggle[aria-pressed="false"] .site-music-icon-off {
  display: flex;
}

.site-music-volume {
  width: 56px;
  accent-color: var(--accent);
  cursor: pointer;
}

@media (max-width: 640px) {
  .site-music-volume {
    width: 40px;
  }
}

.brand .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  position: relative;
}

.identity-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

.identity-name {
  font-family: var(--font-mono);
  font-size: 14px;
  margin-bottom: 8px;
  word-break: break-all;
}

.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--pill-bg, var(--accent-soft));
  color: var(--pill-color, var(--accent));
  font-weight: 700;
}

.role-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.nav-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  flex: 1;
  overflow-y: auto;
  align-content: start;
}

.nav-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 6px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: background 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth),
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s var(--ease-smooth);
}

.nav-tile-icon {
  width: 20px;
  height: 20px;
  display: flex;
}

.nav-tile-icon svg {
  width: 100%;
  height: 100%;
}

.nav-tile-label {
  line-height: 1.2;
}

.nav-tile.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2), 0 8px 20px -12px rgba(var(--accent-rgb), 0.4);
  position: relative;
}

.nav-tile-icon svg {
  transition: transform 0.15s var(--ease-smooth);
}

.nav-tile.is-tapped {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: 0 6px 16px -10px rgba(var(--accent-rgb), 0.5);
  transition: background 0.1s var(--ease-smooth), color 0.1s var(--ease-smooth), box-shadow 0.1s var(--ease-smooth);
}

.nav-tile.is-tapped .nav-tile-icon svg {
  transform: scale(1.1);
}

@media (hover: hover) and (pointer: fine) {
  .nav-tile:hover {
    background: var(--surface-3);
    color: var(--text);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.6);
  }

  .nav-tile:hover .nav-tile-icon svg {
    transform: scale(1.12);
  }
}

.btn-icon-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-icon-inline svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.main {
  flex: 1;
  min-width: 0;
  padding: 28px 32px 90px;
}

.topbar-mobile {
  display: none;
}

/* Logo situs (foto), ditaruh di pojok kanan atas. Di layar lebar (sidebar
   terlihat) logo mengambang tetap di pojok kanan atas viewport; di layar
   sempit (topbar mobile aktif) logo ini disembunyikan dan digantikan versi
   inline .site-logo-mobile di dalam topbar supaya tidak tumpang tindih
   dengan tombol menu/keluar. */
.site-logo-corner {
  position: fixed;
  top: 14px;
  right: 20px;
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  border-radius: 10px;
  z-index: 40;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 4px 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.site-logo-mobile {
  display: none;
}

.topbar-mobile-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-logout-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
}

.topbar-logout-btn svg {
  width: 16px;
  height: 16px;
}

.page-head {
  margin-bottom: 22px;
}

/* Tombol keluar (logout) di halaman Profil — sekarang jadi satu-satunya
   tempat logout ada di seluruh panel (dipindah dari sidebar/topbar). Dibuat
   sebagai tombol ikon bundar merah supaya jelas beda dari aksi lain. */
.profile-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.profile-logout-btn {
  appearance: none;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger);
  cursor: pointer;
  transition: transform 0.15s var(--ease-smooth), background 0.15s var(--ease-smooth);
}

.profile-logout-btn:hover,
.profile-logout-btn.is-tapped {
  background: var(--danger);
  color: #fff;
  transform: scale(0.95);
}

.profile-logout-btn svg {
  width: 19px;
  height: 19px;
}

@media (max-width: 480px) {
  .profile-page-head h1 {
    font-size: 20px;
  }
}

.page-head h1 {
  font-size: 22px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  contain: layout paint;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: border-color 0.25s var(--ease-smooth), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s var(--ease-smooth);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(var(--accent-rgb), 0.1) 48%, transparent 65%);
  background-size: 250% 250%;
  background-position: 120% 0%;
  opacity: 0;
  transition: opacity 0.18s var(--ease-smooth);
  pointer-events: none;
}

@keyframes cardSheen {
  from { background-position: 120% 0%; }
  to { background-position: -20% 100%; }
}

.card.is-tapped {
  border-color: var(--accent-dim);
  transition: border-color 0.12s var(--ease-smooth), box-shadow 0.12s var(--ease-smooth);
  box-shadow: 0 10px 26px -14px rgba(var(--accent-rgb), 0.45);
}

.card.is-tapped::after {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover::after {
    opacity: 1;
    animation: cardSheen 1.1s var(--ease-smooth) forwards;
  }

  .card:hover {
    border-color: var(--accent-dim);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -18px rgba(var(--accent-rgb), 0.4), 0 10px 24px -14px rgba(0, 0, 0, 0.55);
  }
}

.main {
  animation: pageFadeIn 0.35s var(--ease-smooth);
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.card h2 {
  font-size: 16px;
  margin-bottom: 4px;
}

.card-hint {
  font-size: 13px;
  color: var(--text-faint);
  margin-bottom: 16px;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 4px;
  border-top: 1px solid var(--border);
}

.list-item:first-child {
  border-top: none;
}

.list-item .primary {
  font-family: var(--font-mono);
  font-size: 14px;
}

.list-item .meta {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 3px;
  font-family: var(--font-body);
}

.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}

.status-tag.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.status-tag.success {
  background: var(--success-soft);
  color: var(--success);
}

.status-tag.pending {
  background: var(--warn-soft);
  color: var(--warn);
}

.status-tag.suspended {
  background: var(--danger-soft);
  color: var(--danger);
}

.empty {
  color: var(--text-faint);
  font-size: 13px;
  padding: 18px 4px;
  text-align: center;
}

.actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

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

.stat .value {
  font-family: var(--font-display);
  font-size: 26px;
}

.stat .label {
  font-size: 12px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.chat-box {
  height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 12px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-msg .who {
  font-size: 11px;
  color: var(--text-faint);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chat-msg .bubble {
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  display: inline-block;
  max-width: 90%;
}

.chat-msg.self .bubble {
  background: var(--accent-soft);
  color: var(--accent);
}

.help-box {
  height: 480px;
}

.help-box .help-msg {
  max-width: 88%;
  align-self: flex-start;
}

.help-box .help-msg.self {
  align-self: flex-end;
}

.help-box .help-msg.self .who {
  text-align: right;
}

.help-bubble {
  max-width: 100%;
  display: block;
}

.chat-msg.help-msg.self .help-bubble {
  background: var(--accent-soft);
  color: var(--accent);
}

.help-text {
  font-size: 14px;
  line-height: 1.55;
  white-space: normal;
}

.help-text + .help-text,
.help-text + .help-code-block,
.help-code-block + .help-text,
.help-code-block + .help-code-block {
  margin-top: 10px;
}

.help-loading {
  color: var(--text-faint);
  font-style: italic;
}

.help-error {
  color: var(--danger);
}

.help-code-block {
  background: #070a0d;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-align: left;
}

.help-code-block pre {
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  max-height: 340px;
}

.help-code-lang {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  padding: 8px 14px 0;
}

.help-code-block .help-copy-btn {
  width: auto;
  margin: 0 12px 12px;
  padding: 6px 12px;
}

.docs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.docs-nav a {
  text-decoration: none;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.endpoint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.method {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 5px;
}

.method.get {
  background: var(--accent-soft);
  color: var(--accent);
}

.method.post {
  background: var(--warn-soft);
  color: var(--warn);
}

.endpoint-path {
  font-family: var(--font-mono);
  font-size: 14px;
}

pre {
  background: #070a0d;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: #c7f9e3;
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
}

table th {
  text-align: left;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  overflow-wrap: break-word;
  word-break: break-word;
}

table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  overflow-wrap: break-word;
  word-break: break-word;
  vertical-align: top;
}

.error-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.error-code {
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--accent);
  margin-bottom: 6px;
}

.welcome-card {
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.welcome-text h2 {
  font-size: 19px;
  margin-bottom: 3px;
}

.welcome-text p {
  margin: 0;
  font-size: 13px;
}

.verified-badge {
  width: 15px;
  height: 15px;
  display: inline-flex;
  vertical-align: middle;
  flex-shrink: 0;
}

.verified-badge svg {
  width: 100%;
  height: 100%;
}

.key-value {
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
  word-break: break-all;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 8px;
}

.upgrade-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.upgrade-row select {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.password-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.password-row .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-faint);
  letter-spacing: 0.03em;
  word-break: break-all;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 0;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-faint);
  cursor: pointer;
  transition: color 0.15s var(--ease-smooth), background 0.15s var(--ease-smooth);
}

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

.icon-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 12, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
}

.modal-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

.modal-close:hover {
  background: var(--surface-2);
  color: var(--text);
}

.modal-close svg {
  width: 18px;
  height: 18px;
}

.checkout-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}


/* =========================================================
   Success modal (akun berhasil dibuat)
   ========================================================= */

.modal-overlay.success-overlay {
  background: rgba(4, 10, 8, 0.78);
  opacity: 1;
}

.success-modal-box {
  max-width: 380px;
  text-align: center;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18), 0 10px 24px -12px rgba(0, 0, 0, 0.55);
  animation: successBoxIn 0.18s ease-out;
  position: relative;
  will-change: transform, opacity;
}

@keyframes successBoxIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.success-modal-box .modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.success-check-wrap {
  width: 60px;
  height: 60px;
  margin: 6px auto 14px;
}

.success-check {
  width: 60px;
  height: 60px;
  display: block;
}

.success-check-circle {
  stroke: var(--accent);
  stroke-width: 2.5;
}

.success-check-mark {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: successDrawMark 0.22s ease-out 0.05s forwards;
}

@keyframes successDrawMark {
  to {
    stroke-dashoffset: 0;
  }
}

.success-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.success-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0 0 14px;
}

.cred-box {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cred-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cred-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.cred-value {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--text);
  word-break: break-all;
}

.cred-value.accent {
  color: var(--accent);
}

.success-copy-btn {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.success-copy-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-smooth);
}

.success-copy-btn.is-copied {
  background: var(--accent-dim);
}

.success-copy-btn.is-copied svg {
  transform: scale(1.15);
}

/* =========================================================
   Popup sukses reaction (selalu hijau, tidak ikut warna tema)
   ========================================================= */

.modal-overlay.reaction-success-overlay {
  background: rgba(4, 14, 9, 0.78);
}

.reaction-success-box {
  max-width: 380px;
  text-align: center;
  border-color: var(--success-dim);
  box-shadow: 0 0 0 1px rgba(var(--success-rgb), 0.22), 0 10px 24px -12px rgba(0, 0, 0, 0.55);
  animation: successBoxIn 0.18s ease-out;
  position: relative;
}

.reaction-success-box .modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.reaction-success-check-wrap {
  width: 60px;
  height: 60px;
  margin: 6px auto 14px;
}

.reaction-success-check {
  width: 60px;
  height: 60px;
  display: block;
}

.reaction-success-check-circle {
  stroke: var(--success);
  stroke-width: 2.5;
}

.reaction-success-check-mark {
  stroke: var(--success);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: successDrawMark 0.22s ease-out 0.05s forwards;
}

.reaction-success-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--success);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.reaction-success-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0 0 14px;
}

.reaction-success-box .cred-box {
  margin-top: 2px;
}

/* =========================================================
   POPUP "KUNJUNGI SALURAN" (ajakan gabung saluran WhatsApp)
   ========================================================= */

.popup-channel-box {
  text-align: center;
}

.popup-channel-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  margin: 4px 0 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.popup-channel-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.popup-channel-box p {
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 4px 0 18px;
}

.popup-channel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  border-color: #25d366;
  color: #05210f;
  font-weight: 700;
}

.popup-channel-btn:hover {
  background: #2ee374;
  border-color: #2ee374;
}

@media (max-width: 860px) {
  .app-shell {
    flex-direction: column;
  }

  .sidebar {
    display: none;
  }

  .topbar-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
  }

  /* Di layar sempit topbar mobile sudah menempati pojok kanan atas, jadi
     logo mengambang (desktop) disembunyikan dan diganti versi inline. */
  .site-logo-corner {
    display: none;
  }

  .site-logo-mobile {
    display: block;
    height: 28px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    border-radius: 8px;
  }

  .main {
    padding: 20px 16px 28px;
  }

  .topbar-mobile-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .topbar-pages-btn {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    padding: 0;
  }

  .topbar-pages-btn svg {
    width: 17px;
    height: 17px;
  }

  .topbar-pages-btn[aria-expanded="true"] {
    color: var(--accent);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  }

  .topbar-pages-menu {
    position: absolute;
    top: 100%;
    left: 14px;
    margin-top: 8px;
    width: min(280px, calc(100% - 28px));
    max-height: min(70vh, 420px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    z-index: 30;
    padding: 8px;
  }

  .topbar-pages-menu[hidden] {
    display: none;
  }

  .topbar-pages-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .topbar-pages-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
  }

  .topbar-pages-item:active,
  .topbar-pages-item.is-tapped {
    background: var(--surface-2);
  }

  .topbar-pages-item.active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }

  .topbar-pages-item-icon {
    width: 18px;
    height: 18px;
    display: flex;
    flex-shrink: 0;
  }

  .topbar-pages-item-icon svg {
    width: 100%;
    height: 100%;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .row {
    flex-direction: column;
    align-items: stretch;
  }

  .row .btn {
    width: 100%;
  }
}

/* =========================================================
   TEMA TAMPILAN (60 tema, dipilih developer di /config)
   ========================================================= */

[data-theme="solstice"] {
  --bg: #160f14;
  --surface: #221720;
  --surface-2: #2b1e29;
  --surface-3: #341f2f;
  --border: #3a2530;
  --text: #f7ece2;
  --text-dim: #c9a692;
  --text-faint: #8a6a5c;
  --accent: #ff8a5b;
  --accent-rgb: 255, 138, 91;
  --accent-dim: #c65b34;
  --accent-soft: rgba(255, 138, 91, 0.16);
  --radius: 14px;
  --radius-sm: 9px;
}

[data-theme="cyberline"] {
  --bg: #07080d;
  --surface: #0d1018;
  --surface-2: #131826;
  --surface-3: #181f30;
  --border: #232c42;
  --text: #e7f0ff;
  --text-dim: #8fa0c2;
  --text-faint: #5c6a89;
  --accent: #00e5ff;
  --accent-rgb: 0, 229, 255;
  --accent-dim: #0891a8;
  --accent-soft: rgba(0, 229, 255, 0.14);
  --radius: 4px;
  --radius-sm: 3px;
}

[data-theme="cyberline"] .brand,
[data-theme="cyberline"] h1 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

[data-theme="regalia"] {
  --bg: #0e0b1a;
  --surface: #161029;
  --surface-2: #1d1533;
  --surface-3: #241a3d;
  --border: #2f2350;
  --text: #f1ecff;
  --text-dim: #b6a8dd;
  --text-faint: #7c6ba3;
  --accent: #c9a24b;
  --accent-rgb: 201, 162, 75;
  --accent-dim: #8f701f;
  --accent-soft: rgba(201, 162, 75, 0.16);
  --radius: 16px;
  --radius-sm: 11px;
}

[data-theme="regalia"] h1,
[data-theme="regalia"] h2 {
  letter-spacing: 0.03em;
}

[data-theme="canopy"] {
  --bg: #0c130f;
  --surface: #131f18;
  --surface-2: #192a20;
  --surface-3: #203528;
  --border: #2a4232;
  --text: #e9f2ec;
  --text-dim: #9db8a8;
  --text-faint: #647d6e;
  --accent: #7ed957;
  --accent-rgb: 126, 217, 87;
  --accent-dim: #4e9c34;
  --accent-soft: rgba(126, 217, 87, 0.15);
  --radius: 10px;
  --radius-sm: 7px;
}

[data-theme="abyss"] {
  --bg: #060f16;
  --surface: #0c1c26;
  --surface-2: #112530;
  --surface-3: #162f3c;
  --border: #1e3a48;
  --text: #e3f2fa;
  --text-dim: #8fb4c4;
  --text-faint: #5c7f8e;
  --accent: #38bdf8;
  --accent-rgb: 56, 189, 248;
  --accent-dim: #1d7fa8;
  --accent-soft: rgba(56, 189, 248, 0.14);
  --radius: 14px;
  --radius-sm: 9px;
}

[data-theme="ember"] {
  --bg: #120c0a;
  --surface: #1c1310;
  --surface-2: #241a15;
  --surface-3: #2e211a;
  --border: #3a291f;
  --text: #f5ece5;
  --text-dim: #cba996;
  --text-faint: #8f7364;
  --accent: #ff5a3c;
  --accent-rgb: 255, 90, 60;
  --accent-dim: #b53a22;
  --accent-soft: rgba(255, 90, 60, 0.15);
  --radius: 6px;
  --radius-sm: 4px;
}

[data-theme="mono"] {
  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #1c1c1c;
  --surface-3: #242424;
  --border: #2e2e2e;
  --text: #f2f2f2;
  --text-dim: #a3a3a3;
  --text-faint: #6b6b6b;
  --accent: #e6e6e6;
  --accent-rgb: 230, 230, 230;
  --accent-dim: #9c9c9c;
  --accent-soft: rgba(230, 230, 230, 0.12);
  --radius: 4px;
  --radius-sm: 3px;
}

[data-theme="mono"] h1,
[data-theme="mono"] h2 {
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

[data-theme="noir"] {
  --bg: #000000;
  --surface: #141414;
  --surface-2: #1c1c1c;
  --surface-3: #262626;
  --border: #333333;
  --text: #ffffff;
  --text-dim: #b3b3b3;
  --text-faint: #737373;
  --accent: #ffffff;
  --accent-rgb: 255, 255, 255;
  --accent-dim: #999999;
  --accent-soft: rgba(255, 255, 255, 0.1);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="noir"] h1,
[data-theme="noir"] h2 {
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

[data-theme="graphite"] {
  --bg: #1a1a1a;
  --surface: #242424;
  --surface-2: #2c2c2c;
  --surface-3: #363636;
  --border: #454545;
  --text: #e8e8e8;
  --text-dim: #a8a8a8;
  --text-faint: #757575;
  --accent: #9e9e9e;
  --accent-rgb: 158, 158, 158;
  --accent-dim: #6e6e6e;
  --accent-soft: rgba(158, 158, 158, 0.14);
  --radius: 10px;
  --radius-sm: 7px;
}

[data-theme="aurora"] {
  --bg: #090c16;
  --surface: #101526;
  --surface-2: #161d34;
  --surface-3: #1d2540;
  --border: #28345a;
  --text: #eef1ff;
  --text-dim: #a3aee0;
  --text-faint: #6b76a3;
  --accent: #7c5cff;
  --accent-rgb: 124, 92, 255;
  --accent-dim: #4c36b8;
  --accent-soft: rgba(124, 92, 255, 0.16);
  --radius: 12px;
  --radius-sm: 8px;
}

[data-theme="rose"] {
  --bg: #160b10;
  --surface: #221118;
  --surface-2: #2b1620;
  --surface-3: #341c29;
  --border: #402232;
  --text: #fbeaf0;
  --text-dim: #d9a9bd;
  --text-faint: #9c6f81;
  --accent: #ff6fa5;
  --accent-rgb: 255, 111, 165;
  --accent-dim: #c94778;
  --accent-soft: rgba(255, 111, 165, 0.16);
  --radius: 18px;
  --radius-sm: 12px;
}

[data-theme="velvet"] {
  --bg: #130c09;
  --surface: #211612;
  --surface-2: #2e201a;
  --surface-3: #3a2922;
  --border: #4d372d;
  --text: #f3ebe7;
  --text-dim: #bea79d;
  --text-faint: #866f65;
  --accent: #f07642;
  --accent-rgb: 240, 118, 66;
  --accent-dim: #a5461d;
  --accent-soft: rgba(240, 118, 66, 0.15);
  --radius: 4px;
  --radius-sm: 3px;
}

[data-theme="onyx"] {
  --bg: #130d09;
  --surface: #211812;
  --surface-2: #2e221a;
  --surface-3: #3a2c22;
  --border: #4d3b2d;
  --text: #f3ece7;
  --text-dim: #beab9d;
  --text-faint: #867365;
  --accent: #f08b42;
  --accent-rgb: 240, 139, 66;
  --accent-dim: #a5561d;
  --accent-soft: rgba(240, 139, 66, 0.15);
  --radius: 6px;
  --radius-sm: 4px;
}

[data-theme="frostline"] {
  --bg: #130e09;
  --surface: #211a12;
  --surface-2: #2e241a;
  --surface-3: #3a2f22;
  --border: #4d3e2d;
  --text: #f3eee7;
  --text-dim: #beaf9d;
  --text-faint: #867765;
  --accent: #f0a042;
  --accent-rgb: 240, 160, 66;
  --accent-dim: #a5661d;
  --accent-soft: rgba(240, 160, 66, 0.15);
  --radius: 8px;
  --radius-sm: 6px;
}

[data-theme="nebula"] {
  --bg: #131009;
  --surface: #211c12;
  --surface-2: #2e271a;
  --surface-3: #3a3222;
  --border: #4d422d;
  --text: #f3efe7;
  --text-dim: #beb39d;
  --text-faint: #867b65;
  --accent: #f0b542;
  --accent-rgb: 240, 181, 66;
  --accent-dim: #a5771d;
  --accent-soft: rgba(240, 181, 66, 0.15);
  --radius: 10px;
  --radius-sm: 7px;
}

[data-theme="sable"] {
  --bg: #131109;
  --surface: #211e12;
  --surface-2: #2e291a;
  --surface-3: #3a3522;
  --border: #4d462d;
  --text: #f3f1e7;
  --text-dim: #beb79d;
  --text-faint: #867e65;
  --accent: #f0ca42;
  --accent-rgb: 240, 202, 66;
  --accent-dim: #a5871d;
  --accent-soft: rgba(240, 202, 66, 0.15);
  --radius: 12px;
  --radius-sm: 8px;
}

[data-theme="zenith"] {
  --bg: #131209;
  --surface: #212012;
  --surface-2: #2e2c1a;
  --surface-3: #3a3822;
  --border: #4d4a2d;
  --text: #f3f2e7;
  --text-dim: #beba9d;
  --text-faint: #868265;
  --accent: #f0de42;
  --accent-rgb: 240, 222, 66;
  --accent-dim: #a5971d;
  --accent-soft: rgba(240, 222, 66, 0.15);
  --radius: 14px;
  --radius-sm: 9px;
}

[data-theme="cobalt"] {
  --bg: #131309;
  --surface: #212112;
  --surface-2: #2d2e1a;
  --surface-3: #3a3a22;
  --border: #4c4d2d;
  --text: #f3f3e7;
  --text-dim: #bdbe9d;
  --text-faint: #858665;
  --accent: #ecf042;
  --accent-rgb: 236, 240, 66;
  --accent-dim: #a2a51d;
  --accent-soft: rgba(236, 240, 66, 0.15);
  --radius: 16px;
  --radius-sm: 11px;
}

[data-theme="marigold"] {
  --bg: #121309;
  --surface: #1f2112;
  --surface-2: #2b2e1a;
  --surface-3: #373a22;
  --border: #494d2d;
  --text: #f2f3e7;
  --text-dim: #b9be9d;
  --text-faint: #818665;
  --accent: #d7f042;
  --accent-rgb: 215, 240, 66;
  --accent-dim: #92a51d;
  --accent-soft: rgba(215, 240, 66, 0.15);
  --radius: 18px;
  --radius-sm: 12px;
}

[data-theme="basalt"] {
  --bg: #101309;
  --surface: #1d2112;
  --surface-2: #282e1a;
  --surface-3: #343a22;
  --border: #454d2d;
  --text: #f0f3e7;
  --text-dim: #b5be9d;
  --text-faint: #7d8665;
  --accent: #c3f042;
  --accent-rgb: 195, 240, 66;
  --accent-dim: #81a51d;
  --accent-soft: rgba(195, 240, 66, 0.15);
  --radius: 20px;
  --radius-sm: 14px;
}

[data-theme="lagoon"] {
  --bg: #0f1309;
  --surface: #1b2112;
  --surface-2: #262e1a;
  --surface-3: #313a22;
  --border: #414d2d;
  --text: #eff3e7;
  --text-dim: #b1be9d;
  --text-faint: #798665;
  --accent: #aef042;
  --accent-rgb: 174, 240, 66;
  --accent-dim: #71a51d;
  --accent-soft: rgba(174, 240, 66, 0.15);
  --radius: 4px;
  --radius-sm: 3px;
}

[data-theme="plum"] {
  --bg: #0e1309;
  --surface: #1a2112;
  --surface-2: #242e1a;
  --surface-3: #2e3a22;
  --border: #3d4d2d;
  --text: #edf3e7;
  --text-dim: #adbe9d;
  --text-faint: #758665;
  --accent: #99f042;
  --accent-rgb: 153, 240, 66;
  --accent-dim: #61a51d;
  --accent-soft: rgba(153, 240, 66, 0.15);
  --radius: 6px;
  --radius-sm: 4px;
}

[data-theme="copperfield"] {
  --bg: #0d1309;
  --surface: #182112;
  --surface-2: #212e1a;
  --surface-3: #2b3a22;
  --border: #394d2d;
  --text: #ecf3e7;
  --text-dim: #a9be9d;
  --text-faint: #718665;
  --accent: #84f042;
  --accent-rgb: 132, 240, 66;
  --accent-dim: #51a51d;
  --accent-soft: rgba(132, 240, 66, 0.15);
  --radius: 8px;
  --radius-sm: 6px;
}

[data-theme="glacier"] {
  --bg: #0c1309;
  --surface: #162112;
  --surface-2: #1f2e1a;
  --surface-3: #283a22;
  --border: #364d2d;
  --text: #eaf3e7;
  --text-dim: #a6be9d;
  --text-faint: #6d8665;
  --accent: #6ff042;
  --accent-rgb: 111, 240, 66;
  --accent-dim: #40a51d;
  --accent-soft: rgba(111, 240, 66, 0.15);
  --radius: 10px;
  --radius-sm: 7px;
}

[data-theme="wildfire"] {
  --bg: #0a1309;
  --surface: #142112;
  --surface-2: #1d2e1a;
  --surface-3: #253a22;
  --border: #324d2d;
  --text: #e9f3e7;
  --text-dim: #a2be9d;
  --text-faint: #698665;
  --accent: #5bf042;
  --accent-rgb: 91, 240, 66;
  --accent-dim: #30a51d;
  --accent-soft: rgba(91, 240, 66, 0.15);
  --radius: 12px;
  --radius-sm: 8px;
}

[data-theme="moss"] {
  --bg: #091309;
  --surface: #122112;
  --surface-2: #1a2e1a;
  --surface-3: #223a22;
  --border: #2e4d2d;
  --text: #e7f3e7;
  --text-dim: #9ebe9d;
  --text-faint: #668665;
  --accent: #46f042;
  --accent-rgb: 70, 240, 66;
  --accent-dim: #20a51d;
  --accent-soft: rgba(70, 240, 66, 0.15);
  --radius: 14px;
  --radius-sm: 9px;
}

[data-theme="indigo"] {
  --bg: #09130a;
  --surface: #122113;
  --surface-2: #1a2e1c;
  --surface-3: #223a24;
  --border: #2d4d30;
  --text: #e7f3e8;
  --text-dim: #9dbea0;
  --text-faint: #658668;
  --accent: #42f054;
  --accent-rgb: 66, 240, 84;
  --accent-dim: #1da52b;
  --accent-soft: rgba(66, 240, 84, 0.15);
  --radius: 16px;
  --radius-sm: 11px;
}

[data-theme="sandstorm"] {
  --bg: #09130b;
  --surface: #122115;
  --surface-2: #1a2e1e;
  --surface-3: #223a27;
  --border: #2d4d34;
  --text: #e7f3ea;
  --text-dim: #9dbea4;
  --text-faint: #65866c;
  --accent: #42f068;
  --accent-rgb: 66, 240, 104;
  --accent-dim: #1da53b;
  --accent-soft: rgba(66, 240, 104, 0.15);
  --radius: 18px;
  --radius-sm: 12px;
}

[data-theme="orchid"] {
  --bg: #09130c;
  --surface: #122117;
  --surface-2: #1a2e21;
  --surface-3: #223a2a;
  --border: #2d4d38;
  --text: #e7f3eb;
  --text-dim: #9dbea8;
  --text-faint: #658670;
  --accent: #42f07d;
  --accent-rgb: 66, 240, 125;
  --accent-dim: #1da54b;
  --accent-soft: rgba(66, 240, 125, 0.15);
  --radius: 20px;
  --radius-sm: 14px;
}

[data-theme="slate"] {
  --bg: #09130e;
  --surface: #122119;
  --surface-2: #1a2e23;
  --surface-3: #223a2d;
  --border: #2d4d3c;
  --text: #e7f3ed;
  --text-dim: #9dbeac;
  --text-faint: #658674;
  --accent: #42f092;
  --accent-rgb: 66, 240, 146;
  --accent-dim: #1da55b;
  --accent-soft: rgba(66, 240, 146, 0.15);
  --radius: 4px;
  --radius-sm: 3px;
}

[data-theme="coral"] {
  --bg: #09130f;
  --surface: #12211b;
  --surface-2: #1a2e25;
  --surface-3: #223a30;
  --border: #2d4d40;
  --text: #e7f3ee;
  --text-dim: #9dbeb0;
  --text-faint: #658678;
  --accent: #42f0a7;
  --accent-rgb: 66, 240, 167;
  --accent-dim: #1da56c;
  --accent-soft: rgba(66, 240, 167, 0.15);
  --radius: 6px;
  --radius-sm: 4px;
}

[data-theme="midnight"] {
  --bg: #091310;
  --surface: #12211d;
  --surface-2: #1a2e28;
  --surface-3: #223a33;
  --border: #2d4d44;
  --text: #e7f3f0;
  --text-dim: #9dbeb4;
  --text-faint: #65867c;
  --accent: #42f0bc;
  --accent-rgb: 66, 240, 188;
  --accent-dim: #1da57c;
  --accent-soft: rgba(66, 240, 188, 0.15);
  --radius: 8px;
  --radius-sm: 6px;
}

[data-theme="tangerine"] {
  --bg: #091311;
  --surface: #12211e;
  --surface-2: #1a2e2a;
  --surface-3: #223a36;
  --border: #2d4d47;
  --text: #e7f3f1;
  --text-dim: #9dbeb8;
  --text-faint: #658680;
  --accent: #42f0d0;
  --accent-rgb: 66, 240, 208;
  --accent-dim: #1da58c;
  --accent-soft: rgba(66, 240, 208, 0.15);
  --radius: 10px;
  --radius-sm: 7px;
}

[data-theme="emeraldine"] {
  --bg: #091312;
  --surface: #122120;
  --surface-2: #1a2e2c;
  --surface-3: #223a39;
  --border: #2d4d4b;
  --text: #e7f3f3;
  --text-dim: #9dbebc;
  --text-faint: #658684;
  --accent: #42f0e5;
  --accent-rgb: 66, 240, 229;
  --accent-dim: #1da59d;
  --accent-soft: rgba(66, 240, 229, 0.15);
  --radius: 12px;
  --radius-sm: 8px;
}

[data-theme="frostbyte"] {
  --bg: #091213;
  --surface: #122021;
  --surface-2: #1a2c2e;
  --surface-3: #22393a;
  --border: #2d4b4d;
  --text: #e7f3f3;
  --text-dim: #9dbcbe;
  --text-faint: #658486;
  --accent: #42e5f0;
  --accent-rgb: 66, 229, 240;
  --accent-dim: #1d9da5;
  --accent-soft: rgba(66, 229, 240, 0.15);
  --radius: 14px;
  --radius-sm: 9px;
}

[data-theme="mulberry"] {
  --bg: #091113;
  --surface: #121e21;
  --surface-2: #1a2a2e;
  --surface-3: #22363a;
  --border: #2d474d;
  --text: #e7f1f3;
  --text-dim: #9db8be;
  --text-faint: #658086;
  --accent: #42d0f0;
  --accent-rgb: 66, 208, 240;
  --accent-dim: #1d8ca5;
  --accent-soft: rgba(66, 208, 240, 0.15);
  --radius: 16px;
  --radius-sm: 11px;
}

[data-theme="sepia"] {
  --bg: #091013;
  --surface: #121d21;
  --surface-2: #1a282e;
  --surface-3: #22333a;
  --border: #2d444d;
  --text: #e7f0f3;
  --text-dim: #9db4be;
  --text-faint: #657c86;
  --accent: #42bcf0;
  --accent-rgb: 66, 188, 240;
  --accent-dim: #1d7ca5;
  --accent-soft: rgba(66, 188, 240, 0.15);
  --radius: 18px;
  --radius-sm: 12px;
}

[data-theme="cerulean"] {
  --bg: #090f13;
  --surface: #121b21;
  --surface-2: #1a252e;
  --surface-3: #22303a;
  --border: #2d404d;
  --text: #e7eef3;
  --text-dim: #9db0be;
  --text-faint: #657886;
  --accent: #42a7f0;
  --accent-rgb: 66, 167, 240;
  --accent-dim: #1d6ca5;
  --accent-soft: rgba(66, 167, 240, 0.15);
  --radius: 20px;
  --radius-sm: 14px;
}

[data-theme="garnet"] {
  --bg: #090e13;
  --surface: #121921;
  --surface-2: #1a232e;
  --surface-3: #222d3a;
  --border: #2d3c4d;
  --text: #e7edf3;
  --text-dim: #9dacbe;
  --text-faint: #657486;
  --accent: #4292f0;
  --accent-rgb: 66, 146, 240;
  --accent-dim: #1d5ba5;
  --accent-soft: rgba(66, 146, 240, 0.15);
  --radius: 4px;
  --radius-sm: 3px;
}

[data-theme="sage"] {
  --bg: #090c13;
  --surface: #121721;
  --surface-2: #1a212e;
  --surface-3: #222a3a;
  --border: #2d384d;
  --text: #e7ebf3;
  --text-dim: #9da8be;
  --text-faint: #657086;
  --accent: #427df0;
  --accent-rgb: 66, 125, 240;
  --accent-dim: #1d4ba5;
  --accent-soft: rgba(66, 125, 240, 0.15);
  --radius: 6px;
  --radius-sm: 4px;
}

[data-theme="amethyst"] {
  --bg: #090b13;
  --surface: #121521;
  --surface-2: #1a1e2e;
  --surface-3: #22273a;
  --border: #2d344d;
  --text: #e7eaf3;
  --text-dim: #9da4be;
  --text-faint: #656c86;
  --accent: #4268f0;
  --accent-rgb: 66, 104, 240;
  --accent-dim: #1d3ba5;
  --accent-soft: rgba(66, 104, 240, 0.15);
  --radius: 8px;
  --radius-sm: 6px;
}

[data-theme="charcoal"] {
  --bg: #090a13;
  --surface: #121321;
  --surface-2: #1a1c2e;
  --surface-3: #22243a;
  --border: #2d304d;
  --text: #e7e8f3;
  --text-dim: #9da0be;
  --text-faint: #656886;
  --accent: #4254f0;
  --accent-rgb: 66, 84, 240;
  --accent-dim: #1d2ba5;
  --accent-soft: rgba(66, 84, 240, 0.15);
  --radius: 10px;
  --radius-sm: 7px;
}

[data-theme="sunburst"] {
  --bg: #090913;
  --surface: #121221;
  --surface-2: #1a1a2e;
  --surface-3: #22223a;
  --border: #2e2d4d;
  --text: #e7e7f3;
  --text-dim: #9e9dbe;
  --text-faint: #666586;
  --accent: #4642f0;
  --accent-rgb: 70, 66, 240;
  --accent-dim: #201da5;
  --accent-soft: rgba(70, 66, 240, 0.15);
  --radius: 12px;
  --radius-sm: 8px;
}

[data-theme="denim"] {
  --bg: #0a0913;
  --surface: #141221;
  --surface-2: #1d1a2e;
  --surface-3: #25223a;
  --border: #322d4d;
  --text: #e9e7f3;
  --text-dim: #a29dbe;
  --text-faint: #696586;
  --accent: #5b42f0;
  --accent-rgb: 91, 66, 240;
  --accent-dim: #301da5;
  --accent-soft: rgba(91, 66, 240, 0.15);
  --radius: 14px;
  --radius-sm: 9px;
}

[data-theme="rustic"] {
  --bg: #0c0913;
  --surface: #161221;
  --surface-2: #1f1a2e;
  --surface-3: #28223a;
  --border: #362d4d;
  --text: #eae7f3;
  --text-dim: #a69dbe;
  --text-faint: #6d6586;
  --accent: #6f42f0;
  --accent-rgb: 111, 66, 240;
  --accent-dim: #401da5;
  --accent-soft: rgba(111, 66, 240, 0.15);
  --radius: 16px;
  --radius-sm: 11px;
}

[data-theme="peacock"] {
  --bg: #0d0913;
  --surface: #181221;
  --surface-2: #211a2e;
  --surface-3: #2b223a;
  --border: #392d4d;
  --text: #ece7f3;
  --text-dim: #a99dbe;
  --text-faint: #716586;
  --accent: #8442f0;
  --accent-rgb: 132, 66, 240;
  --accent-dim: #511da5;
  --accent-soft: rgba(132, 66, 240, 0.15);
  --radius: 18px;
  --radius-sm: 12px;
}

[data-theme="blush"] {
  --bg: #0e0913;
  --surface: #191221;
  --surface-2: #241a2e;
  --surface-3: #2e223a;
  --border: #3d2d4d;
  --text: #ede7f3;
  --text-dim: #ad9dbe;
  --text-faint: #756586;
  --accent: #9942f0;
  --accent-rgb: 153, 66, 240;
  --accent-dim: #611da5;
  --accent-soft: rgba(153, 66, 240, 0.15);
  --radius: 20px;
  --radius-sm: 14px;
}

[data-theme="obsidian"] {
  --bg: #0f0913;
  --surface: #1b1221;
  --surface-2: #261a2e;
  --surface-3: #31223a;
  --border: #412d4d;
  --text: #efe7f3;
  --text-dim: #b19dbe;
  --text-faint: #796586;
  --accent: #ae42f0;
  --accent-rgb: 174, 66, 240;
  --accent-dim: #711da5;
  --accent-soft: rgba(174, 66, 240, 0.15);
  --radius: 4px;
  --radius-sm: 3px;
}

[data-theme="citrine"] {
  --bg: #100913;
  --surface: #1d1221;
  --surface-2: #281a2e;
  --surface-3: #34223a;
  --border: #452d4d;
  --text: #f0e7f3;
  --text-dim: #b59dbe;
  --text-faint: #7d6586;
  --accent: #c342f0;
  --accent-rgb: 195, 66, 240;
  --accent-dim: #811da5;
  --accent-soft: rgba(195, 66, 240, 0.15);
  --radius: 6px;
  --radius-sm: 4px;
}

[data-theme="steel"] {
  --bg: #120913;
  --surface: #1f1221;
  --surface-2: #2b1a2e;
  --surface-3: #37223a;
  --border: #492d4d;
  --text: #f2e7f3;
  --text-dim: #b99dbe;
  --text-faint: #816586;
  --accent: #d742f0;
  --accent-rgb: 215, 66, 240;
  --accent-dim: #921da5;
  --accent-soft: rgba(215, 66, 240, 0.15);
  --radius: 8px;
  --radius-sm: 6px;
}

[data-theme="wisteria"] {
  --bg: #130913;
  --surface: #211221;
  --surface-2: #2d1a2e;
  --surface-3: #3a223a;
  --border: #4c2d4d;
  --text: #f3e7f3;
  --text-dim: #bd9dbe;
  --text-faint: #856586;
  --accent: #ec42f0;
  --accent-rgb: 236, 66, 240;
  --accent-dim: #a21da5;
  --accent-soft: rgba(236, 66, 240, 0.15);
  --radius: 10px;
  --radius-sm: 7px;
}

[data-theme="ashen"] {
  --bg: #130912;
  --surface: #211220;
  --surface-2: #2e1a2c;
  --surface-3: #3a2238;
  --border: #4d2d4a;
  --text: #f3e7f2;
  --text-dim: #be9dba;
  --text-faint: #866582;
  --accent: #f042de;
  --accent-rgb: 240, 66, 222;
  --accent-dim: #a51d97;
  --accent-soft: rgba(240, 66, 222, 0.15);
  --radius: 12px;
  --radius-sm: 8px;
}

[data-theme="bronzewing"] {
  --bg: #130911;
  --surface: #21121e;
  --surface-2: #2e1a29;
  --surface-3: #3a2235;
  --border: #4d2d46;
  --text: #f3e7f1;
  --text-dim: #be9db7;
  --text-faint: #86657e;
  --accent: #f042ca;
  --accent-rgb: 240, 66, 202;
  --accent-dim: #a51d87;
  --accent-soft: rgba(240, 66, 202, 0.15);
  --radius: 14px;
  --radius-sm: 9px;
}

[data-theme="frostpine"] {
  --bg: #130910;
  --surface: #21121c;
  --surface-2: #2e1a27;
  --surface-3: #3a2232;
  --border: #4d2d42;
  --text: #f3e7ef;
  --text-dim: #be9db3;
  --text-faint: #86657b;
  --accent: #f042b5;
  --accent-rgb: 240, 66, 181;
  --accent-dim: #a51d77;
  --accent-soft: rgba(240, 66, 181, 0.15);
  --radius: 16px;
  --radius-sm: 11px;
}

[data-theme="carmine"] {
  --bg: #13090e;
  --surface: #21121a;
  --surface-2: #2e1a24;
  --surface-3: #3a222f;
  --border: #4d2d3e;
  --text: #f3e7ee;
  --text-dim: #be9daf;
  --text-faint: #866577;
  --accent: #f042a0;
  --accent-rgb: 240, 66, 160;
  --accent-dim: #a51d66;
  --accent-soft: rgba(240, 66, 160, 0.15);
  --radius: 18px;
  --radius-sm: 12px;
}

[data-theme="twilight"] {
  --bg: #13090d;
  --surface: #211218;
  --surface-2: #2e1a22;
  --surface-3: #3a222c;
  --border: #4d2d3b;
  --text: #f3e7ec;
  --text-dim: #be9dab;
  --text-faint: #866573;
  --accent: #f0428b;
  --accent-rgb: 240, 66, 139;
  --accent-dim: #a51d56;
  --accent-soft: rgba(240, 66, 139, 0.15);
  --radius: 20px;
  --radius-sm: 14px;
}

[data-theme="honeycomb"] {
  --bg: #13090c;
  --surface: #211216;
  --surface-2: #2e1a20;
  --surface-3: #3a2229;
  --border: #4d2d37;
  --text: #f3e7eb;
  --text-dim: #be9da7;
  --text-faint: #86656f;
  --accent: #f04276;
  --accent-rgb: 240, 66, 118;
  --accent-dim: #a51d46;
  --accent-soft: rgba(240, 66, 118, 0.15);
  --radius: 4px;
  --radius-sm: 3px;
}

[data-theme="seafoam"] {
  --bg: #13090b;
  --surface: #211215;
  --surface-2: #2e1a1d;
  --surface-3: #3a2226;
  --border: #4d2d33;
  --text: #f3e7e9;
  --text-dim: #be9da3;
  --text-faint: #86656b;
  --accent: #f04262;
  --accent-rgb: 240, 66, 98;
  --accent-dim: #a51d35;
  --accent-soft: rgba(240, 66, 98, 0.15);
  --radius: 6px;
  --radius-sm: 4px;
}

[data-theme="maroon"] {
  --bg: #13090a;
  --surface: #211213;
  --surface-2: #2e1a1b;
  --surface-3: #3a2223;
  --border: #4d2d2f;
  --text: #f3e7e8;
  --text-dim: #be9d9f;
  --text-faint: #866567;
  --accent: #f0424d;
  --accent-rgb: 240, 66, 77;
  --accent-dim: #a51d25;
  --accent-soft: rgba(240, 66, 77, 0.15);
  --radius: 8px;
  --radius-sm: 6px;
}

[data-theme="ironwood"] {
  --bg: #130a09;
  --surface: #211312;
  --surface-2: #2e1b1a;
  --surface-3: #3a2322;
  --border: #4d2f2d;
  --text: #f3e8e7;
  --text-dim: #be9f9d;
  --text-faint: #866765;
  --accent: #f04d42;
  --accent-rgb: 240, 77, 66;
  --accent-dim: #a5251d;
  --accent-soft: rgba(240, 77, 66, 0.15);
  --radius: 10px;
  --radius-sm: 7px;
}

[data-theme="skyline"] {
  --bg: #130b09;
  --surface: #211512;
  --surface-2: #2e1d1a;
  --surface-3: #3a2622;
  --border: #4d332d;
  --text: #f3e9e7;
  --text-dim: #bea39d;
  --text-faint: #866b65;
  --accent: #f06242;
  --accent-rgb: 240, 98, 66;
  --accent-dim: #a5351d;
  --accent-soft: rgba(240, 98, 66, 0.15);
  --radius: 12px;
  --radius-sm: 8px;
}

/* =========================================================
   NEO BRUTALISM (10 tema) — palet warna per tema.
   Skin struktural (border tebal, bayangan keras, radius 0)
   ada di blok [data-style="brutalist"] di bagian paling bawah file ini.
   ========================================================= */

[data-theme="brutal-canary"] {
  --bg: #fff6d8;
  --surface: #ffffff;
  --surface-2: #fff1b8;
  --surface-3: #ffe98a;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #ffe600;
  --accent-rgb: 255, 230, 0;
  --accent-dim: #c9b400;
  --accent-soft: rgba(255, 230, 0, 0.35);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-flamingo"] {
  --bg: #ffe6f0;
  --surface: #ffffff;
  --surface-2: #ffd0e6;
  --surface-3: #ffb3d6;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #ff2e88;
  --accent-rgb: 255, 46, 136;
  --accent-dim: #c41167;
  --accent-soft: rgba(255, 46, 136, 0.28);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-cobaltpop"] {
  --bg: #e8f0ff;
  --surface: #ffffff;
  --surface-2: #d3e2ff;
  --surface-3: #b3ccff;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #0047ff;
  --accent-rgb: 0, 71, 255;
  --accent-dim: #0033b8;
  --accent-soft: rgba(0, 71, 255, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-limebolt"] {
  --bg: #eaffce;
  --surface: #ffffff;
  --surface-2: #d9ffa3;
  --surface-3: #c3fb73;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #8aff00;
  --accent-rgb: 138, 255, 0;
  --accent-dim: #5fb800;
  --accent-soft: rgba(138, 255, 0, 0.3);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-tangerinepop"] {
  --bg: #fff1de;
  --surface: #ffffff;
  --surface-2: #ffe0b3;
  --surface-3: #ffca80;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #ff6b00;
  --accent-rgb: 255, 107, 0;
  --accent-dim: #c25000;
  --accent-soft: rgba(255, 107, 0, 0.26);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-crimsonblock"] {
  --bg: #ffe6e6;
  --surface: #ffffff;
  --surface-2: #ffcccc;
  --surface-3: #ff9f9f;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #ff2b2b;
  --accent-rgb: 255, 43, 43;
  --accent-dim: #c11414;
  --accent-soft: rgba(255, 43, 43, 0.26);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-violetstack"] {
  --bg: #f1e7ff;
  --surface: #ffffff;
  --surface-2: #e2ccff;
  --surface-3: #cca3ff;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #7b2bff;
  --accent-rgb: 123, 43, 255;
  --accent-dim: #5714c4;
  --accent-soft: rgba(123, 43, 255, 0.26);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-aquagrid"] {
  --bg: #dffaff;
  --surface: #ffffff;
  --surface-2: #b8f2fb;
  --surface-3: #85e7f5;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #00c2d1;
  --accent-rgb: 0, 194, 209;
  --accent-dim: #00919c;
  --accent-soft: rgba(0, 194, 209, 0.26);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-mintbrick"] {
  --bg: #e2fff0;
  --surface: #ffffff;
  --surface-2: #baffd9;
  --surface-3: #85fbbd;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #00e08a;
  --accent-rgb: 0, 224, 138;
  --accent-dim: #00a868;
  --accent-soft: rgba(0, 224, 138, 0.28);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-monoblock"] {
  --bg: #f2f2f2;
  --surface: #ffffff;
  --surface-2: #e0e0e0;
  --surface-3: #c9c9c9;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #0a0a0a;
  --accent-rgb: 10, 10, 10;
  --accent-dim: #000000;
  --accent-soft: rgba(10, 10, 10, 0.12);
  --radius: 0px;
  --radius-sm: 0px;
}

/* =========================================================
   SUSUNAN TAMPILAN (layout berubah per tema, desktop saja)
   ========================================================= */

@media (min-width: 861px) {
  [data-layout="right"] .app-shell {
    flex-direction: row-reverse;
  }

  [data-layout="right"] .sidebar {
    border-right: none;
    border-left: 1px solid var(--border);
  }

  [data-layout="top"] .app-shell {
    flex-direction: column;
  }

  [data-layout="top"] .sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 14px 24px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    z-index: 15;
  }

  [data-layout="top"] .sidebar .identity-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    flex-shrink: 0;
  }

  [data-layout="top"] .sidebar .ladder {
    display: none;
  }

  [data-layout="top"] .nav-grid {
    display: flex;
    flex: 1;
    overflow-x: auto;
    grid-template-columns: none;
  }

  [data-layout="top"] .nav-tile {
    flex-direction: row;
    padding: 9px 14px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  [data-layout="top"] .sidebar > .btn-block {
    width: auto;
    flex-shrink: 0;
  }

  [data-layout="grid2"] .main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    align-items: start;
  }

  [data-layout="grid2"] .main > .page-head,
  [data-layout="grid2"] .main > .welcome-card,
  [data-layout="grid2"] .main > .ads-banner {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   PENGUMUMAN BERJALAN (teks iklan berjalan)
   Latar belakang solid/tidak transparan + cahaya yang berjalan
   menyusuri TEPI LUAR banner (mekanismenya sama seperti .ad-board:
   lihat initEdgeGlow di main.js).
   ========================================================= */

.ads-banner-wrap {
  position: relative;
  margin-bottom: 18px;
}

.ads-banner {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 0;
}

.ads-banner-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  width: max-content;
  animation: adsScroll 18s linear infinite;
}

.ads-banner-track span {
  padding-left: 24px;
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}

@keyframes adsScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =========================================================
   BANNER IKLAN (16:9, tampil di atas halaman Tambah Nomor
   dan Buat Akun, dengan cahaya berjalan mengelilingi banner)
   ========================================================= */

.ad-board {
  position: relative;
  width: 100%;
  max-width: 660px;
  aspect-ratio: 16 / 9;
  margin: 0 auto 20px;
  --ad-glow-color: var(--accent);
  --ad-glow-speed: 5s;
  --ad-glow-outset: 10px;
}

/* Cahaya tepi banner: 100% CSS (tidak ada JS/layout math sama sekali),
   jadi selalu halus dan otomatis mengikuti ukuran/aspect-ratio banner
   tanpa perlu dihitung ulang saat resize. Trik: sebuah pseudo-element
   yang sedikit lebih besar dari banner (inset negatif --ad-glow-outset)
   diberi background conic-gradient yang berputar (lewat custom property
   --ad-glow-angle yang dianimasikan dengan @property), lalu dipotong jadi
   cincin tipis dengan mask (isi di-punch-out), sehingga hanya terlihat
   sebagai garis cahaya yang mengelilingi tepi banner. */
@property --ad-glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.ad-board::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: calc(-1 * var(--ad-glow-outset));
  border-radius: calc(var(--radius) + var(--ad-glow-outset));
  padding: 3px;
  pointer-events: none;
  background: conic-gradient(
    from var(--ad-glow-angle, 0deg),
    transparent 0%,
    var(--ad-glow-color, var(--accent)) 8%,
    transparent 22%,
    transparent 50%,
    var(--ad-glow-color, var(--accent)) 58%,
    transparent 72%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px var(--ad-glow-color, var(--accent)));
  animation: adGlowSpin var(--ad-glow-speed, 5s) linear infinite;
}

@keyframes adGlowSpin {
  from {
    --ad-glow-angle: 0deg;
  }
  to {
    --ad-glow-angle: 360deg;
  }
}

.ad-board-media {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.ad-board-media img,
.ad-board-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}

@media (max-width: 860px) {
  .ad-board {
    max-width: 100%;
  }
}

/* =========================================================
   PENCARIAN LAGU (tampil di bawah banner, hasil bisa diputar
   langsung dan menggantikan tampilan banner selagi diputar)
   ========================================================= */

.music-widget {
  width: 100%;
  max-width: 660px;
  margin: 0 auto 20px;
}

.music-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.music-banner-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(18px) brightness(0.55);
  transform: scale(1.15);
}

.music-banner-art-fg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 82%;
  width: auto;
  max-width: 82%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  background: var(--surface);
}

.music-banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%);
}

.music-banner-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.music-banner-title {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}

.music-banner-artist {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}

.music-banner-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.music-banner-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.music-ctrl-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.music-fav-btn[data-active="true"] {
  color: #ffd23f;
  border-color: #ffd23f;
}

.music-search-box {
  position: relative;
}

.music-search-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.music-fav-toggle-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.music-fav-toggle-btn[data-active="true"] {
  color: #ffd23f;
  border-color: #ffd23f;
}

.music-search-btn {
  width: auto;
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.music-search-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
}

.music-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.music-search-results {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.music-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.music-result-item:last-child {
  border-bottom: none;
}

.music-result-item:hover,
.music-result-item.is-loading {
  background: var(--accent-soft);
}

.music-result-art {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--border);
}

.music-result-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.music-result-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-result-artist {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-result-status {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.music-result-fav-btn {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.music-result-fav-btn[data-active="true"] {
  color: #ffb703;
}

.music-search-empty,
.music-search-error {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--text-dim);
}

.music-search-error {
  color: #ff6b6b;
}

@media (max-width: 860px) {
  .music-widget {
    max-width: 100%;
  }
}

/* =========================================================
   MUSIK LATAR (autoplay, tanpa kontrol manual)
   ========================================================= */

/* =========================================================
   PEMILIH TEMA (di halaman /config)
   ========================================================= */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.theme-swatch {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: 12px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: border-color 0.15s var(--ease-smooth), transform 0.1s var(--ease-smooth);
}

.theme-swatch:hover {
  transform: translateY(-2px);
}

.theme-swatch.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.theme-swatch-dots {
  display: flex;
  gap: 4px;
}

.theme-swatch-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.theme-swatch-label {
  font-size: 13px;
  font-weight: 700;
}

.theme-swatch-desc {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.4;
}

.theme-swatch-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #04140d;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.theme-swatch.selected .theme-swatch-check {
  display: flex;
}

/* =========================================================
   TOGGLE SWITCH & PRATINJAU IKLAN (halaman /config)
   ========================================================= */

.toggle-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.toggle-field label {
  margin: 0;
}

.toggle-switch {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  appearance: none;
}

.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 0.15s var(--ease-smooth), background 0.15s var(--ease-smooth);
  display: block;
}

.toggle-switch[aria-checked="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-dim);
}

.toggle-switch[aria-checked="true"] .toggle-knob {
  transform: translateX(20px);
  background: var(--accent);
}

.ad-preview-wrap {
  position: relative;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.ad-preview-wrap .ad-board {
  width: 100%;
  max-width: 420px;
}

/* =========================================================
   AKSESIBILITAS: hormati preferensi reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .main,
  .card,
  .brand .dot,
  .ad-board::before,
  .ads-banner-track {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   HALAMAN RUN: konsol Pterodactyl (status, stat, terminal)
   ========================================================= */

.run-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.run-status-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.run-status-pill[data-state="running"] {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.run-status-pill[data-state="offline"] {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.run-status-pill[data-state="starting"],
.run-status-pill[data-state="stopping"] {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.run-status-pill[data-state="error"] {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.run-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.run-stat-card {
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
}

.run-stat-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin-bottom: 6px;
}

.run-stat-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.run-stat-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
}

.run-stat-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  width: 0%;
  transition: width 0.4s var(--ease-smooth);
}

.run-power-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.run-power-row .btn {
  width: auto;
  flex: 1 1 auto;
  min-width: 90px;
}

.run-terminal {
  background: #0b0f14;
  border: 1px solid #263041;
  border-radius: 10px;
  padding: 12px 14px;
  height: 360px;
  overflow-y: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: #7ef7a0;
  white-space: pre-wrap;
  word-break: break-word;
}

.run-terminal .run-line-error {
  color: #ff6b6b;
}

.run-terminal .run-line-system {
  color: #6ec6ff;
  font-style: italic;
  opacity: 0.85;
}

.run-terminal .run-line-cmd {
  color: #f4f99d;
  font-weight: bold;
}

.run-terminal .run-line-install {
  color: #c5aff6;
}

.run-terminal .run-line div,
.run-terminal div {
  min-height: 1.2em;
}

.run-terminal::-webkit-scrollbar {
  width: 6px;
}
.run-terminal::-webkit-scrollbar-track {
  background: transparent;
}
.run-terminal::-webkit-scrollbar-thumb {
  background: #263041;
  border-radius: 4px;
}

.run-command-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.run-command-row input {
  flex: 1;
  font-family: "JetBrains Mono", monospace;
}

.run-command-row .btn {
  width: auto;
  white-space: nowrap;
}

.run-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  margin-bottom: 6px;
  font-size: 13px;
}

.run-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

.run-file-name.is-dir {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
}

.run-file-size {
  font-size: 11.5px;
  opacity: 0.6;
  white-space: nowrap;
}

.run-file-actions .btn {
  width: auto;
  padding: 4px 10px;
  font-size: 12px;
}

/* =========================================================
   SKIN NEO BRUTALISM
   Berlaku untuk semua 10 tema "brutal-*" lewat [data-style="brutalist"]
   di tag <html>. Warna tetap diatur per tema lewat variabel --bg/--surface/
   --accent dkk di atas; blok ini hanya mengubah BENTUK: border tebal
   hitam solid, bayangan keras (hard shadow, tanpa blur), sudut siku
   (radius 0), tipografi tebal huruf besar, dan efek "tekan" saat aktif.
   ========================================================= */

[data-style="brutalist"] {
  --shadow-hard: 4px 4px 0 var(--border);
  --shadow-hard-sm: 3px 3px 0 var(--border);
  --shadow-hard-lg: 6px 6px 0 var(--border);
}

[data-style="brutalist"] body {
  background: var(--bg);
  font-weight: 500;
}

[data-style="brutalist"] * {
  text-rendering: optimizeLegibility;
}

/* Matikan efek "mewah" (blur/gradient/glow) yang bertentangan dengan brutalist */
[data-style="brutalist"] .sidebar,
[data-style="brutalist"] .card::after,
[data-style="brutalist"] .input-3d-glow,
[data-style="brutalist"] .ad-board::before {
  background-image: none !important;
  filter: none !important;
}

[data-style="brutalist"] .brand {
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  animation: none !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

[data-style="brutalist"] .brand .dot {
  border-radius: 3px;
  box-shadow: none;
  animation: none !important;
  border: 2px solid var(--border);
}

[data-style="brutalist"] h1,
[data-style="brutalist"] h2,
[data-style="brutalist"] h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Sidebar / topbar */
[data-style="brutalist"] .sidebar {
  border-right: 3px solid var(--border);
  background: var(--surface);
}

[data-style="brutalist"][data-layout="right"] .sidebar {
  border-right: none;
  border-left: 3px solid var(--border);
}

[data-style="brutalist"][data-layout="top"] .sidebar {
  border-right: none;
  border-bottom: 3px solid var(--border);
}

/* Kartu */
[data-style="brutalist"] .card,
[data-style="brutalist"] .identity-card,
[data-style="brutalist"] .auth-card,
[data-style="brutalist"] .modal-box,
[data-style="brutalist"] .welcome-card,
[data-style="brutalist"] .stat-box,
[data-style="brutalist"] .run-stat-card,
[data-style="brutalist"] .help-box,
[data-style="brutalist"] .music-widget {
  border: 3px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-hard) !important;
  background: var(--surface);
}

[data-style="brutalist"] .card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard-lg) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Tombol */
[data-style="brutalist"] .btn {
  border-radius: 0 !important;
  border: 3px solid var(--border);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: var(--shadow-hard-sm);
  /* Ganti transisi halus (ease) bawaan .btn dengan yang instan/linear cepat.
     Sebelumnya transform & box-shadow transisi dengan durasi/kurva berbeda
     dari .btn dasar, jadi saat ditekan bayangan "hard" (tanpa blur) hilang
     lebih cepat/lambat dibanding posisi tombol bergeser — hasilnya muncul
     garis bayangan/border nyeleneh sesaat (keluar dari bentuk tombol)
     sebelum posisinya menyusul. Disamakan supaya keduanya berubah bersamaan. */
  transition: transform 0.05s linear, box-shadow 0.05s linear;
  /* Batas render terpisah supaya bayangan/border keras milik tombol ini
     tidak "bocor"/kepotong tampilannya oleh kartu atau elemen tetangga
     yang overflow-nya hidden. */
  isolation: isolate;
}

[data-style="brutalist"] .btn-primary {
  background: var(--accent);
  color: var(--text);
  border-color: var(--border);
}

[data-style="brutalist"] .btn-ghost {
  background: var(--surface);
  color: var(--text);
}

[data-style="brutalist"] .btn-danger {
  background: var(--danger);
  color: #0a0a0a;
  border-color: var(--border);
}

[data-style="brutalist"] .btn:active,
[data-style="brutalist"] .btn.is-tapped {
  /* Geser tombol persis sejauh offset bayangannya (--shadow-hard-sm: 3px 3px)
     supaya tombol "masuk" pas ke posisi bayangannya sendiri, bukan
     nyelonong lewat/nyisa garis bayangan di baliknya. */
  transform: translate(3px, 3px);
  box-shadow: none !important;
  transition: transform 0.05s linear, box-shadow 0.05s linear;
}

[data-style="brutalist"] .btn:disabled {
  box-shadow: none;
  transform: none;
}

/* Input / form */
[data-style="brutalist"] .field input,
[data-style="brutalist"] .field select,
[data-style="brutalist"] .field textarea {
  border: 3px solid var(--border);
  border-radius: 0 !important;
  background: var(--surface);
  box-shadow: var(--shadow-hard-sm);
}

[data-style="brutalist"] .field input:focus,
[data-style="brutalist"] .field select:focus,
[data-style="brutalist"] .field textarea:focus {
  border-color: var(--border);
  box-shadow: 2px 2px 0 var(--accent) !important;
}

[data-style="brutalist"] .field label {
  font-weight: 800;
  color: var(--text);
}

/* Navigasi & pill */
[data-style="brutalist"] .nav-tile {
  border: 3px solid var(--border);
  border-radius: 0 !important;
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  box-shadow: var(--shadow-hard-sm);
}

[data-style="brutalist"] .nav-tile.active {
  background: var(--accent);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-hard-sm) !important;
  animation: none !important;
}

[data-style="brutalist"] .nav-tile:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard) !important;
}

[data-style="brutalist"] .nav-tile.is-tapped {
  transform: translate(3px, 3px);
  box-shadow: none !important;
}

[data-style="brutalist"] .role-pill,
[data-style="brutalist"] .status-tag,
[data-style="brutalist"] .verified-badge {
  border: 2px solid var(--border);
  border-radius: 3px !important;
  font-weight: 800;
}

/* Tabel */
[data-style="brutalist"] table th {
  border-bottom: 3px solid var(--border);
  font-weight: 800;
  text-transform: uppercase;
}

[data-style="brutalist"] table td {
  border-bottom: 2px solid var(--border);
}

/* Theme swatch di halaman /config */
[data-style="brutalist"] .theme-swatch {
  border: 3px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-hard-sm) !important;
}

[data-style="brutalist"] .theme-swatch.selected {
  box-shadow: var(--shadow-hard) !important;
}

/* Toggle switch */
[data-style="brutalist"] .toggle-switch {
  border: 2px solid var(--border);
  border-radius: 999px;
}

[data-style="brutalist"] .toggle-knob {
  border: 2px solid var(--border);
}

/* List item / ladder / terminal */
[data-style="brutalist"] .list-item,
[data-style="brutalist"] .ladder-rung,
[data-style="brutalist"] .run-terminal,
[data-style="brutalist"] .identity-name {
  border-radius: 0 !important;
}

[data-style="brutalist"] .list-item {
  border: 2px solid var(--border);
}

/* ==========================================================================
   Halaman Chat - tampilan ala WhatsApp (percakapan privat sesama user)
   ========================================================================== */

/* Bug utama layar chat "numpuk": kelas seperti .wa-conv-empty /
   .wa-conv-active / .wa-reply-preview / .wa-attach-preview mendeklarasikan
   display:flex tanpa syarat, jadi menang lawan aturan bawaan browser untuk
   [hidden] (sama-sama spesifisitas rendah, tapi punya kita datang belakangan
   di stylesheet) dan atribut hidden="" dari JS jadi tidak berefek sama
   sekali. Aturan !important di bawah ini memaksa [hidden] selalu menang.
*/
[hidden] {
  display: none !important;
}

.wa-shell {
  display: flex;
  height: calc(100vh - 130px);
  min-height: 480px;
  max-height: 860px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* --- Sidebar daftar percakapan --- */
.wa-list {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--surface);
  min-height: 0;
}

.wa-list-head {
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.wa-list-head h1 {
  font-family: var(--font-display);
  font-size: 20px;
  margin-bottom: 12px;
}

.wa-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
}

.wa-search svg {
  width: 16px;
  height: 16px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.wa-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 13.5px;
  width: 100%;
  font-family: var(--font-body);
}

.wa-peers {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.wa-peers .empty {
  padding: 30px 18px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

.wa-peer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s var(--ease-smooth);
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .wa-peer-item:hover {
    background: var(--surface-2);
  }
}

.wa-peer-item.active {
  background: var(--accent-soft);
}

.wa-peer-item.unread .wa-peer-name,
.wa-peer-item.unread .wa-peer-preview {
  color: var(--text);
  font-weight: 600;
}

.wa-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #0b0f14;
  background: var(--accent);
  text-transform: uppercase;
}

/* Avatar berisi foto profil asli (bukan inisial) — lihat waAvatarHtml() di
   public/js/chat.js. Background-image dipakai (bukan <img>) supaya foto
   otomatis ter-crop rapi jadi lingkaran tanpa distorsi rasio. */
.wa-avatar-img {
  background-size: cover;
  background-position: center;
  color: transparent;
}

.wa-toast .wa-avatar {
  width: 40px;
  height: 40px;
}

.wa-peer-body {
  flex: 1;
  min-width: 0;
}

.wa-peer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.wa-peer-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-peer-time {
  font-size: 11px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.wa-peer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.wa-peer-preview {
  font-size: 13px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-peer-preview .wa-ticks {
  margin-right: 3px;
}

.wa-peer-badge {
  flex-shrink: 0;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #0b0f14;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-peer-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

/* --- Panel percakapan --- */
.wa-conv {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background:
    radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb), 0.04) 0, transparent 45%),
    radial-gradient(circle at 80% 60%, rgba(var(--accent-rgb), 0.035) 0, transparent 40%),
    var(--surface-2);
}

.wa-conv-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-faint);
  padding: 40px;
  text-align: center;
}

.wa-conv-empty svg {
  width: 56px;
  height: 56px;
  opacity: 0.5;
}

.wa-conv-active {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wa-conv-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.wa-back-btn {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
}

.wa-back-btn svg {
  width: 20px;
  height: 20px;
}

.wa-conv-header .wa-avatar {
  width: 38px;
  height: 38px;
  font-size: 13px;
}

.wa-conv-header-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}

.wa-conv-header-role {
  font-size: 11.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wa-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wa-messages .empty {
  margin: auto;
  color: var(--text-faint);
  font-size: 13px;
}

.wa-msg-row {
  display: flex;
  width: 100%;
  margin-top: 6px;
  position: relative;
}

/* Ikon "balas" yang muncul di belakang bubble saat pesan digeser ke kanan
   (lihat gestur swipe-to-reply di public/js/chat.js). */
.wa-swipe-reply-icon {
  position: absolute;
  top: 50%;
  left: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%) scale(0.4);
  opacity: 0;
  transition: opacity 0.15s var(--ease-smooth), transform 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth);
  pointer-events: none;
}

.wa-swipe-reply-icon svg {
  width: 14px;
  height: 14px;
}

.wa-msg-row.wa-swipe-armed .wa-swipe-reply-icon {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  color: var(--accent);
  border-color: var(--accent);
}

.wa-msg-row .wa-bubble {
  touch-action: pan-y;
  will-change: transform;
}

.wa-msg-row.out {
  justify-content: flex-end;
}

.wa-msg-row.in {
  justify-content: flex-start;
}

.wa-bubble {
  max-width: 74%;
  background: var(--surface-3);
  border-radius: 14px 14px 14px 4px;
  padding: 7px 10px 6px;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.wa-msg-row.out .wa-bubble {
  background: var(--accent-soft);
  border-radius: 14px 14px 4px 14px;
}

.wa-bubble-quote {
  display: flex;
  gap: 8px;
  align-items: stretch;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 5px;
  cursor: pointer;
  overflow: hidden;
}

.wa-bubble-quote-bar {
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

.wa-bubble-quote-body {
  min-width: 0;
}

.wa-bubble-quote-who {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 1px;
}

.wa-bubble-quote-text {
  font-size: 12.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-bubble-media {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 4px;
  max-width: 260px;
}

.wa-bubble-media img,
.wa-bubble-media video {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
}

.wa-bubble-audio {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  min-width: 220px;
}

.wa-bubble-audio audio {
  width: 100%;
  height: 36px;
}

.wa-bubble-file {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 4px;
  text-decoration: none;
  color: var(--text);
}

.wa-bubble-file svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent);
}

.wa-bubble-file span {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-bubble-text {
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  padding-right: 46px;
}

.wa-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 2px;
  float: right;
  clear: both;
}

.wa-bubble-time {
  font-size: 10.5px;
  color: var(--text-faint);
}

.wa-ticks {
  width: 15px;
  height: 15px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.wa-ticks.read {
  color: #53bdeb;
}

.wa-msg-reply-btn {
  position: absolute;
  top: 2px;
  right: -30px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s var(--ease-smooth);
}

.wa-msg-reply-btn svg {
  width: 13px;
  height: 13px;
}

@media (hover: hover) and (pointer: fine) {
  .wa-msg-row:hover .wa-msg-reply-btn {
    opacity: 1;
  }
}

/* --- Preview balasan / lampiran di atas input --- */
.wa-reply-preview,
.wa-attach-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.wa-reply-preview-bar {
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

.wa-reply-preview-body {
  flex: 1;
  min-width: 0;
}

.wa-reply-preview-who {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

.wa-reply-preview-text {
  font-size: 12.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-reply-preview-close,
.wa-attach-preview-close {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wa-reply-preview-close svg,
.wa-attach-preview-close svg {
  width: 14px;
  height: 14px;
}

.wa-attach-preview-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--surface-3);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.wa-attach-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wa-attach-preview-thumb svg {
  width: 18px;
  height: 18px;
}

.wa-attach-preview-name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Input row --- */
.wa-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.wa-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth);
}

.wa-icon-btn svg {
  width: 18px;
  height: 18px;
}

.wa-icon-btn:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.wa-mic-btn.recording {
  color: var(--danger);
  border-color: var(--danger);
  animation: waPulse 1.1s ease-in-out infinite;
}

@keyframes waPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--danger-soft); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

#waTextInput {
  flex: 1;
  min-width: 0;
  resize: none;
  max-height: 120px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 9px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  outline: none;
}

#waTextInput:focus {
  border-color: var(--accent-dim);
}

.wa-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #0b0f14;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.wa-send-btn svg {
  width: 17px;
  height: 17px;
  margin-left: -1px;
}

.wa-send-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.wa-recording-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.wa-recording-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  flex-shrink: 0;
  animation: waPulse 1.1s ease-in-out infinite;
}

#waRecordingTime {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}

.wa-recording-hint {
  font-size: 12.5px;
  color: var(--text-faint);
  flex: 1;
}

/* --- Badge notifikasi chat di nav (semua halaman) --- */
.nav-tile {
  position: relative;
}

.wa-nav-badge {
  position: absolute;
  top: 6px;
  right: 10px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.wa-nav-badge.show {
  display: flex;
}

.topbar-pages-item {
  position: relative;
}

.topbar-pages-item .wa-nav-badge {
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.topbar-logout-btn {
  position: relative;
}

.wa-topbar-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.wa-topbar-badge.show {
  display: flex;
}

/* --- Toast notifikasi pesan masuk --- */
.wa-toast {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
  max-width: 320px;
  cursor: pointer;
  animation: waToastIn 0.25s var(--ease-smooth);
}

@keyframes waToastIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.wa-toast-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 2px;
}

.wa-toast-text {
  font-size: 12.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 230px;
}

@media (max-width: 860px) {
  .wa-shell {
    height: calc(100dvh - 78px);
    max-height: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin: -20px -16px -28px;
  }

  .wa-list {
    width: 100%;
    border-right: none;
  }

  .wa-back-btn {
    display: flex;
  }

  .wa-shell.wa-show-conv .wa-list {
    display: none;
  }

  .wa-shell:not(.wa-show-conv) .wa-conv {
    display: none;
  }

  .wa-bubble {
    max-width: 84%;
  }

  .wa-toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.plan-card {
  position: relative;
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--border);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-card-highlight {
  border-color: var(--accent);
  box-shadow: 6px 6px 0 var(--accent-dim);
}

.plan-badge {
  position: absolute;
  top: -12px;
  right: 16px;
  background: var(--accent);
  color: #04140d;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid var(--border);
}

.plan-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}

.plan-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--accent);
}

.plan-days {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
}

.plan-features li svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
}

.cf-turnstile {
  max-width: 100%;
  overflow: hidden;
}

/* =========================================================
   HALAMAN BACKUP & TEMA — komponen tambahan
   ========================================================= */

.section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.section-head-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
}

.section-head-icon svg {
  width: 20px;
  height: 20px;
}

.section-head h2 {
  margin-bottom: 2px;
}

.section-head-sub {
  font-size: 12px;
  color: var(--text-faint);
}

.hero-card {
  background: linear-gradient(150deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

.hero-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 65%;
  height: 180%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), transparent 70%);
  pointer-events: none;
}

.hero-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
  position: relative;
}

.hero-card-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.08);
}

.hero-card-icon svg {
  width: 24px;
  height: 24px;
}

.hero-card h1 {
  font-size: 19px;
  margin-bottom: 2px;
}

.hero-card p {
  font-size: 13px;
  color: var(--text-dim);
  position: relative;
  max-width: 46ch;
}

.hero-card-footname {
  font-family: var(--font-mono);
  color: var(--accent);
}

.hero-actions {
  position: relative;
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.btn-glow {
  background: var(--accent);
  color: #04140d;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 30px -12px rgba(var(--accent-rgb), 0.6);
}

.btn-glow svg {
  width: 17px;
  height: 17px;
}

.btn-glow:disabled {
  box-shadow: none;
}

.backup-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 16px;
  position: relative;
}

.backup-meta-box {
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.backup-meta-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.backup-meta-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.backup-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.backup-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.backup-step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.backup-step-text {
  font-size: 13px;
  color: var(--text-dim);
  padding-top: 2px;
}

.backup-step-text b {
  color: var(--text);
}

.backup-step-text a {
  color: var(--accent);
}

.theme-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.theme-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
}

.theme-current-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-dim);
}

.theme-current-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 12px;
}

.theme-swatch {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0;
  overflow: hidden;
  background: var(--surface-2);
  text-align: left;
  transition: transform 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth),
    box-shadow 0.15s var(--ease-smooth);
  position: relative;
}

.theme-swatch:hover {
  transform: translateY(-3px);
  border-color: var(--accent-dim);
}

.theme-swatch.is-tapped {
  transform: scale(0.96);
}

.theme-swatch.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.theme-swatch-preview {
  height: 54px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 6px;
}

.theme-swatch-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.theme-swatch-dot.is-accent {
  width: 17px;
  height: 17px;
  margin-left: auto;
}

.theme-swatch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.theme-swatch-check {
  display: none;
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
}

.theme-swatch.is-active .theme-swatch-check {
  display: block;
}

.theme-swatch-check svg {
  width: 100%;
  height: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .theme-swatch:hover .theme-swatch-check {
    display: block;
    opacity: 0.5;
  }
}

.spin {
  animation: spinLoop 0.9s linear infinite;
}

@keyframes spinLoop {
  to { transform: rotate(360deg); }
}

/* =========================================================
   Loading screen global (nama website + cahaya mengkilat)
   ========================================================= */

#appPageLoader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

#appPageLoader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#appPageLoader::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 20%, rgba(var(--accent-rgb), 0.10), transparent 42%),
    radial-gradient(circle at 78% 78%, rgba(var(--accent-rgb), 0.08), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(var(--accent-rgb), 0.05), transparent 50%);
  pointer-events: none;
}

#appPageLoader::after {
  content: "";
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
  mask: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
  animation: appLoaderGridDrift 18s linear infinite;
  pointer-events: none;
}

@keyframes appLoaderGridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 42px 42px, 42px 42px; }
}

.app-loader-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.app-loader-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
  filter: blur(0.4px);
  animation: appLoaderParticleFloat 7s ease-in-out infinite;
}

.app-loader-particle-alt {
  background: var(--accent-dim);
}

@keyframes appLoaderParticleFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.15; }
  50% { transform: translateY(-26px) scale(1.4); opacity: 0.6; }
}

.app-loader-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.app-loader-bar-track {
  width: min(80vw, 420px);
  height: 3px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.app-loader-bar-glow {
  height: 100%;
  width: 60%;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    #ffffff,
    var(--accent),
    transparent
  );
  transform-origin: center;
  animation: appLoaderBarMove 2.4s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

.app-loader-bar-track-bottom .app-loader-bar-glow {
  animation-delay: 1.2s;
}

@keyframes appLoaderBarMove {
  0%   { transform: translateX(-84px) scaleX(0.3); opacity: 0.4; }
  25%  { transform: translateX(0)     scaleX(1);   opacity: 1;   }
  50%  { transform: translateX(84px)  scaleX(0.3); opacity: 0.4; }
  75%  { transform: translateX(0)     scaleX(1);   opacity: 1;   }
  100% { transform: translateX(-84px) scaleX(0.3); opacity: 0.4; }
}

.app-loader-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 5vw, 26px);
  letter-spacing: 0.2em;
  color: var(--text);
  text-transform: uppercase;
  display: flex;
  gap: 0;
}

.app-loader-letter {
  display: inline-block;
  color: var(--accent);
  opacity: 0;
  animation: appLoaderLetterWave 2.4s ease-in-out infinite;
}

@keyframes appLoaderLetterWave {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  50%  { opacity: 1; }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}

.app-loader-space {
  width: 0.5em;
  display: inline-block;
}

.app-loader-tagline {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--text-dim);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-loader-tagline::before,
.app-loader-tagline::after {
  content: "";
  width: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--text-dim));
}

.app-loader-tagline::after {
  background: linear-gradient(90deg, var(--text-dim), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .app-loader-letter,
  .app-loader-bar-glow,
  .app-loader-particle,
  #appPageLoader::after {
    animation: none;
    opacity: 1;
  }
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.contact-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 14px;
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--border);
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.contact-tile:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--accent-dim);
  border-color: var(--accent);
}

.contact-tile-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.contact-tile-icon svg {
  width: 100%;
  height: 100%;
}

.checkout-countdown {
  margin-top: 10px;
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--text-dim);
}

.checkout-countdown.is-urgent {
  color: #e5484d;
  font-weight: 700;
}