: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);
  --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;
  }
}

/* Umpan balik instan saat pindah halaman (navigasi lunak) */
main.main.is-navigating {
  opacity: 0.6;
  transition: none;
}

/* ---------- Pop-up neo-brutalist (loading, hasil aksi, pindah halaman) ---------- */
.nb-overlay {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 17, 17, 0.45);
}
.nb-pop {
  width: min(86vw, 320px);
  box-sizing: border-box;
  padding: 24px 20px;
  text-align: center;
  background: var(--nb-paper, #ffffff);
  color: var(--nb-ink, #111111);
  border: 3px solid #111111;
  border-radius: 14px;
  box-shadow: 8px 8px 0 #111111;
  font-family: var(--font-mono, ui-monospace, monospace);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.nb-pop-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.nb-pop-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  word-break: break-word;
}
.nb-pop.ok .nb-pop-label { color: #111111; background: #5ee0b0; padding: 2px 10px; border: 2px solid #111111; border-radius: 999px; opacity: 1; }
.nb-pop.err .nb-pop-label { color: #111111; background: #f43f5e; padding: 2px 10px; border: 2px solid #111111; border-radius: 999px; opacity: 1; }
.nb-spinner {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 4px solid #111111;
  border-top-color: var(--nb-primary, #ff8fb8);
  border-radius: 8px;
  animation: nbSpin 0.8s linear infinite;
}
.nb-bar {
  width: 100%;
  height: 12px;
  box-sizing: border-box;
  border: 3px solid #111111;
  border-radius: 999px;
  overflow: hidden;
  background: #ffffff;
}
.nb-bar::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  background: var(--nb-primary, #ff8fb8);
  animation: nbSlide 1s ease-in-out infinite alternate;
}
.nb-btn {
  margin-top: 4px;
  padding: 10px 26px;
  border: 3px solid #111111;
  border-radius: 10px;
  background: var(--nb-primary, #ff8fb8);
  color: #111111;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 4px 4px 0 #111111;
  transition: transform 0.06s linear, box-shadow 0.06s linear;
}
.nb-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 #111111;
}
@keyframes nbSpin {
  to { transform: rotate(360deg); }
}
@keyframes nbSlide {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .nb-spinner, .nb-bar::after { animation-duration: 3s; }
}

/* 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 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 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
}

.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;
}

.app-banner {
  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;
}

.app-banner-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.app-banner-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}

.app-banner-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-banner-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.app-banner-eyebrow {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  font-weight: 600;
  text-transform: uppercase;
}

.app-banner-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-banner-role-pill {
  display: none;
}

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

.app-banner-sound-btn svg {
  width: 17px;
  height: 17px;
}

.app-banner-sound-btn.is-muted {
  color: var(--text-faint);
}

.app-banner-sound-btn:active {
  transform: scale(0.92);
}

/* ===== Bottom navigation bar (mobile) ===== */
.bottom-nav {
  display: none;
}

/* ===== Hero / profile card, mini stats, quick actions (mobile "Beranda") ===== */
.hero-profile-card {
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 16px;
}

.hero-profile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.hero-profile-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hero-profile-avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
}

.hero-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-profile-greeting {
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 2px;
}

.hero-profile-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}

.hero-profile-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hero-profile-badge svg {
  width: 14px;
  height: 14px;
}

.hero-mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.hero-mini-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.hero-mini-stat-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

.hero-mini-stat-icon svg {
  width: 17px;
  height: 17px;
}

.hero-mini-stat-value {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  line-height: 1.25;
}

.hero-mini-stat-label {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 600;
}

.metric-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.metric-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
}

.metric-tile-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

.metric-tile-icon svg {
  width: 19px;
  height: 19px;
}

.metric-tile-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--text);
  line-height: 1.2;
}

.metric-tile-label {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  margin: 4px 0 8px;
}

.metric-tile-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text-dim);
}

.metric-tile-tag.live {
  background: var(--accent-soft);
  color: var(--accent);
}

.metric-tile-tag.live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.quick-actions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.quick-actions-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
}

.quick-actions-title svg {
  width: 15px;
  height: 15px;
}

.quick-actions-uptime {
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 600;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}

.quick-action-card {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 16px;
  padding: 16px;
  min-height: 118px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(150deg, var(--qa-from), var(--qa-to));
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s var(--ease-smooth), box-shadow 0.18s var(--ease-smooth);
}

.quick-action-card:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .quick-action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.6);
  }
}

.quick-action-card.qa-pink { --qa-from: #ec4899; --qa-to: #9d174d; }
.quick-action-card.qa-yellow { --qa-from: #fbbf24; --qa-to: #b45309; }
.quick-action-card.qa-orange { --qa-from: #f97316; --qa-to: #9a3412; }
.quick-action-card.qa-dark { --qa-from: #334155; --qa-to: #0f172a; }
.quick-action-card.qa-cyan { --qa-from: #22d3ee; --qa-to: #0e7490; }
.quick-action-card.qa-red { --qa-from: #f43f5e; --qa-to: #881337; }
.quick-action-card.qa-purple { --qa-from: #a78bfa; --qa-to: #5b21b6; }
.quick-action-card.qa-green { --qa-from: #34d399; --qa-to: #065f46; }

.quick-action-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.quick-action-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  margin-bottom: 26px;
}

.quick-action-icon svg {
  width: 19px;
  height: 19px;
}

.quick-action-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 3px;
}

.quick-action-sub {
  font-size: 11.5px;
  opacity: 0.85;
  font-weight: 500;
}

.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.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;
}

/* =========================================================
   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 "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;
  }

  .app-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    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: 16px 16px calc(90px + env(safe-area-inset-bottom, 0px));
  }

  /* ===== Bottom navigation bar ===== */
  .bottom-nav {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.5);
  }

  .bottom-nav-item {
    appearance: none;
    background: none;
    border: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    text-decoration: none;
    color: var(--text-faint);
    font-family: var(--font-body);
    cursor: pointer;
  }

  .bottom-nav-icon {
    display: flex;
    width: 22px;
    height: 22px;
  }

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

  .bottom-nav-label {
    font-size: 10.5px;
    font-weight: 600;
  }

  .bottom-nav-item.active,
  .bottom-nav-item.active .bottom-nav-icon {
    color: var(--accent);
  }

  .bottom-nav-item.active .bottom-nav-label {
    color: var(--accent);
  }

  .bottom-nav-tools.active {
    color: var(--accent);
  }

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

  .pages-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 29;
    opacity: 0;
    transition: opacity 0.2s var(--ease-smooth);
  }

  .pages-sheet-backdrop[hidden] {
    display: none;
  }

  .topbar-pages-menu {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    max-height: min(65vh, 460px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.5);
    z-index: 30;
    padding: 8px 8px 12px;
    transform: translateY(12px);
    opacity: 0;
    transition: transform 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
  }

  .topbar-pages-menu.is-open {
    transform: translateY(0);
    opacity: 1;
  }

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

  .topbar-pages-menu-handle {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--border);
    margin: 4px auto 10px;
  }

  .topbar-pages-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  .topbar-pages-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 10px;
    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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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: 2.6s;
  --ad-glow-outset: 10px;
}

/* Mask-nya sengaja dibuat LEBIH BESAR dari banner (inset negatif sebesar
   --ad-glow-outset), supaya cahayanya tidak terpotong pas di garis tepi.
   Kalau inset-nya 0 (pas dengan ukuran banner), setengah bulatan cahaya
   yang harusnya nongol di LUAR banner akan ikut ke-crop, jadi keliatannya
   cahaya cuma jalan di DALAM banner. Dengan mask yang dilebarkan begini,
   cahaya benar-benar terlihat menyala mengelilingi tepi/luar banner. */
.ad-glow-mask {
  position: absolute;
  z-index: 2;
  inset: calc(-1 * var(--ad-glow-outset));
  border-radius: calc(var(--radius) + var(--ad-glow-outset));
  overflow: hidden;
  pointer-events: none;
}

/* Cahaya berjalan menyusuri tepi banner memakai offset-path: lintasannya
   dihitung ulang oleh JS (lihat initEdgeGlow di main.js) mengikuti ukuran
   asli banner + border-radius-nya, jadi selalu melengkung mulus mengikuti
   lekukan sudut, bukan lompat garis lurus antar titik seperti sebelumnya.
   Titik pusat cahaya (offset-anchor 50% 50%) tetap persis di atas garis
   tepi banner yang sebenarnya — path-nya digeser sejauh --ad-glow-outset
   di dalam mask yang sudah dilebarkan, jadi separuh cahaya nyala di dalam
   dan separuh lagi nyala di luar tepi banner.
   Kalau browser belum sempat set offset-path (atau tidak mendukungnya),
   titik ini diam di pojok kiri atas sebagai fallback yang aman. */
.ad-glow {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 12px;
  height: 4px;
  border-radius: 3px;
  background: var(--ad-glow-color, var(--accent));
  box-shadow: 0 0 8px 2px var(--ad-glow-color, var(--accent));
  opacity: 0.9;
  pointer-events: none;
  offset-anchor: 50% 50%;
  offset-rotate: auto;
  animation-name: adGlowCycle;
  animation-duration: var(--ad-glow-speed, 2.6s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.ad-glow-a {
  animation-delay: 0s;
}

.ad-glow-b {
  animation-delay: calc(var(--ad-glow-speed, 2.6s) / -2);
}

/* Satu animasi gabungan (posisi + panjang) supaya keduanya selalu selaras:
   memanjang jadi ekor panjang sambil jalan normal, lalu mengecil balik ke
   titik kecil dan sengaja gerakannya diperlambat sebentar selagi kecil
   (lihat jarak offset-distance yang cuma naik dikit antar titik "kecil"),
   sebelum meledak maju cepat sambil memanjang lagi. Pola ini berulang 3x
   tiap satu putaran mengelilingi banner. */
@keyframes adGlowCycle {
  0% {
    width: 92px;
    offset-distance: 0%;
  }
  18% {
    width: 12px;
    offset-distance: 6%;
  }
  33.33% {
    width: 92px;
    offset-distance: 33.33%;
  }
  51% {
    width: 12px;
    offset-distance: 39%;
  }
  66.67% {
    width: 92px;
    offset-distance: 66.67%;
  }
  85% {
    width: 12px;
    offset-distance: 72%;
  }
  100% {
    width: 92px;
    offset-distance: 100%;
  }
}

.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-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  cursor: pointer;
}

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

.music-banner-overlay .music-banner-controls {
  pointer-events: auto;
}

.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;
  flex-wrap: wrap;
  justify-content: flex-end;
  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;
}

#musicBannerPip[data-active="true"] {
  color: #4da3ff;
  border-color: #4da3ff;
}

.music-speed-btn {
  width: auto;
  min-width: 38px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
}

.music-speed-btn[data-active="true"],
#musicBannerRotate[data-active="true"] {
  color: #4da3ff;
  border-color: #4da3ff;
}

/* Layar penuh 16:9. Landscape: cukup memenuhi layar. */
.music-banner.is-rotated {
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #000;
}

.music-banner.is-rotated .music-banner-video {
  object-fit: contain;
}

/* Portrait (kunci orientasi tidak tersedia): putar 90 derajat ke kanan
   (searah jarum jam), seperti layar penuh YouTube. */
@media (orientation: portrait) {
  .music-banner.is-rotated {
    inset: auto;
    top: 0;
    left: 0;
    width: 100vh;
    width: 100dvh;
    height: 100vw;
    transform-origin: top left;
    transform: translateX(100vw) rotate(90deg);
  }
}

html.music-rotated-lock,
html.music-rotated-lock body {
  overflow: hidden;
}

.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-glow,
  .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-glow-mask,
[data-style="brutalist"] .ad-glow {
  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-bubble-sender {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 2px;
}

.wa-group-peer-item {
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  padding-bottom: 14px;
}

.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;
  }
}

/* ---------- Halaman Musik ---------- */
.music-widget:not(.music-page) .music-search-box { display: none !important; }
.music-page .music-banner { max-height: 70vh; margin-bottom: 14px; }
.music-page .music-search-box { position: sticky; top: 0; z-index: 5; }
.music-page .music-search-results { position: static; max-height: none; margin-top: 10px; }
.music-trending { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 12px; }
.music-trending .mono { font-size: 12px; opacity: .7; }

/* Halaman Musik: hanya video + daftar hasil gaya pencarian YouTube */
.music-page .music-banner { margin-bottom: 10px; }
.music-page .music-search-box { background: transparent; border: 0; box-shadow: none; padding: 6px 0; background: var(--bg, #0f0f0f); }
.music-page .music-search-input { border-radius: 999px; padding: 12px 18px; }
.music-page .music-search-results { background: transparent; border: 0; box-shadow: none; padding: 0; }
.music-page .music-result-item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border: 0; border-radius: 0; background: transparent; }
.music-page .music-result-item::before { content: "\21BB"; font-size: 22px; opacity: .8; width: 24px; text-align: center; flex: none; }
.music-page .music-result-info { flex: 1; min-width: 0; order: 2; }
.music-page .music-result-title { font-size: 15px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.music-page .music-result-artist { font-size: 12px; opacity: .65; }
.music-page .music-result-art { order: 3; width: 93px; height: 52px; border-radius: 6px; object-fit: cover; flex: none; }
.music-page .music-result-status { order: 4; font-size: 11px; opacity: .7; }
.music-page .music-result-fav-btn { order: 5; }

/* Halaman Musik: pemutar video polos (bukan kartu banner) */
.music-page .music-banner { aspect-ratio: auto; max-height: none; border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; margin: 0 0 8px; }
.music-page .music-banner-video { position: static; display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; }
.music-page .music-banner-overlay { position: static; inset: auto; background: none; padding: 8px 0 0; justify-content: center; pointer-events: auto; }
.music-page .music-banner-controls { flex-wrap: wrap; justify-content: center; }

/* Saran pencarian ala YouTube */
.music-suggest-item { display: flex; align-items: center; gap: 14px; padding: 14px 4px; cursor: pointer; }
.music-suggest-icon { width: 24px; height: 24px; flex: none; display: inline-flex; }
.music-suggest-icon svg { width: 24px; height: 24px; }
.music-suggest-text { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-suggest-text b { font-weight: 700; }
.music-suggest-fill { flex: none; background: none; border: 0; color: inherit; font-size: 22px; padding: 4px 8px; cursor: pointer; }

/* Kartu hasil pencarian halaman Musik */
.music-card { display: flex; gap: 12px; padding: 12px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.music-card-thumb { position: relative; flex: none; width: 38%; max-width: 170px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #000; align-self: flex-start; }
.music-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.music-card-dur { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.8); color: #fff; font-size: 12px; font-weight: 700; }
.music-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.music-card-title { font-size: 15px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.music-card-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; opacity: .75; }
.music-card-channel { font-weight: 600; }
.music-card-status { font-size: 11px; opacity: .8; }
.music-card-status:empty { display: none; }
.music-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.music-card-btn { border: 0; border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; }
.music-card-btn.is-bgm { background: #6366f1; }
.music-card-btn.is-watch { background: #ef4444; }
.music-card-btn.is-fav { background: #3a3a3a; color: #facc15; }
.music-page .music-banner.audio-only .music-banner-video { height: 0; aspect-ratio: auto; }

/* Menu garis tiga halaman Musik */
.music-page .music-banner-overlay { display: none; }
.music-page .music-search-box { position: sticky; }
.music-menu-btn { font-size: 20px; line-height: 1; padding: 8px 12px; }
.music-menu { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 230px; max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.music-menu[hidden] { display: none; }
.music-menu > button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 8px; font-size: 14px; color: inherit; cursor: pointer; }
.music-menu > button:hover, .music-menu > button:active { background: rgba(255,255,255,.08); }
.music-menu .music-ctrl-btn::after { content: attr(aria-label); font-size: 14px; }
.music-menu .music-ctrl-btn { position: static; }

/* Kontrol tengah video ala YouTube (halaman Musik) */
.music-page .music-banner { position: relative; }
.music-page .music-banner-overlay { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; padding: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s; }
.music-page .music-banner.show-controls .music-banner-overlay { opacity: 1; pointer-events: auto; }
.music-page .music-banner-controls { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 34px; }
.music-page .music-banner-controls .music-ctrl-btn { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; }
.music-page .music-banner-controls #musicBannerPlayPause { width: 68px; height: 68px; font-size: 26px; }
.music-page .music-banner.audio-only .music-banner-overlay { position: static; opacity: 1; pointer-events: auto; background: none; padding: 10px 0; }

/* Hasil di bawah video: di luar kotak cari yang sticky, kartu gaya "Media Hub" */
.music-page .music-search-results { margin-top: 12px; }
.music-card { border: 2px solid #2e2e2e; box-shadow: 3px 3px 0 rgba(0,0,0,.6); }
.music-card-thumb { border: 2px solid #2e2e2e; }
.music-card-meta { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.music-card-channel { color: #7cc4ff; }
.music-card-btn { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3px; border: 2px solid #000; box-shadow: 2px 2px 0 #000; }


/* ─── Tema "Caution Stripe": hitam, kuning, putih + background garis-garis ─── */
[data-theme="caution-stripe"] {
  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #1c1c1c;
  --surface-3: #262626;
  --border: #ffd400;
  --text: #ffffff;
  --text-dim: #e0e0e0;
  --text-faint: #a8a8a8;
  --accent: #ffd400;
  --accent-rgb: 255, 212, 0;
  --accent-dim: #c9a600;
  --accent-soft: rgba(255, 212, 0, 0.14);
  --radius: 4px;
  --radius-sm: 3px;
}

[data-theme="caution-stripe"] body {
  background-color: #0a0a0a;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 212, 0, 0.13) 0,
    rgba(255, 212, 0, 0.13) 10px,
    transparent 10px,
    transparent 28px
  );
  background-size: auto;
  background-position: 0 0;
  background-attachment: fixed;
}

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

[data-theme="caution-stripe"] h1,
[data-theme="caution-stripe"] .brand {
  color: #ffd400;
}

[data-theme="caution-stripe"] .card,
[data-theme="caution-stripe"] .sidebar,
[data-theme="caution-stripe"] .app-banner {
  border-color: #ffd400;
}

[data-theme="caution-stripe"] .btn-primary {
  background: #ffd400;
  color: #0a0a0a;
  font-weight: 700;
}

[data-theme="caution-stripe"] .btn-ghost {
  color: #ffffff;
  border-color: #ffffff;
}


/* =========================================================
   PALET 3 WARNA PER TEMA (digenerate dari lib/themes.js -> colors)
   --accent = warna utama, --accent-2 = kedua, --accent-3 = ketiga.
   ========================================================= */
[data-theme="brutal-sunsetpop"] {
  --bg: #fff1e0;
  --surface: #ffffff;
  --surface-2: #ffd9c1;
  --surface-3: #ffbb9c;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #ff6b35;
  --accent-rgb: 255, 107, 53;
  --accent-dim: #c75329;
  --accent-soft: rgba(255, 107, 53, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-bubblegum"] {
  --bg: #ffe5f1;
  --surface: #ffffff;
  --surface-2: #ffcae3;
  --surface-3: #ffa9d2;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #ff4fa3;
  --accent-rgb: 255, 79, 163;
  --accent-dim: #c73e7f;
  --accent-soft: rgba(255, 79, 163, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-grapesoda"] {
  --bg: #efe6ff;
  --surface: #ffffff;
  --surface-2: #e2d6fe;
  --surface-3: #d2c2fd;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #a78bfa;
  --accent-rgb: 167, 139, 250;
  --accent-dim: #826cc3;
  --accent-soft: rgba(167, 139, 250, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-lemonlime"] {
  --bg: #fbffd6;
  --surface: #ffffff;
  --surface-2: #f1fdb8;
  --surface-3: #e6fb94;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #c6f432;
  --accent-rgb: 198, 244, 50;
  --accent-dim: #9abe27;
  --accent-soft: rgba(198, 244, 50, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-oceanwave"] {
  --bg: #e0f4ff;
  --surface: #ffffff;
  --surface-2: #c6e5ff;
  --surface-3: #a5d4ff;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #4da3ff;
  --accent-rgb: 77, 163, 255;
  --accent-dim: #3c7fc7;
  --accent-soft: rgba(77, 163, 255, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-peachfuzz"] {
  --bg: #ffe8dc;
  --surface: #ffffff;
  --surface-2: #ffd7c7;
  --surface-3: #ffc3ae;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #ff8c69;
  --accent-rgb: 255, 140, 105;
  --accent-dim: #c76d52;
  --accent-soft: rgba(255, 140, 105, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-forestblock"] {
  --bg: #e8f5e2;
  --surface: #ffffff;
  --surface-2: #ccf1d0;
  --surface-3: #a9ecbb;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #4ade80;
  --accent-rgb: 74, 222, 128;
  --accent-dim: #3aad64;
  --accent-soft: rgba(74, 222, 128, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-liberty"] {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface-2: #f7d7da;
  --surface-3: #f9b2b9;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #ff4d5e;
  --accent-rgb: 255, 77, 94;
  --accent-dim: #c73c49;
  --accent-soft: rgba(255, 77, 94, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-neonpunch"] {
  --bg: #f0fff4;
  --surface: #ffffff;
  --surface-2: #f3d9e3;
  --surface-3: #f6abcd;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #ff2e93;
  --accent-rgb: 255, 46, 147;
  --accent-dim: #c72473;
  --accent-soft: rgba(255, 46, 147, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-sandstone"] {
  --bg: #f6ecd9;
  --surface: #ffffff;
  --surface-2: #f6deb4;
  --surface-3: #f6cd87;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #f59e0b;
  --accent-rgb: 245, 158, 11;
  --accent-dim: #bf7b09;
  --accent-soft: rgba(245, 158, 11, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-icecream"] {
  --bg: #fff5fb;
  --surface: #ffffff;
  --surface-2: #ffe5f2;
  --surface-3: #ffd2e8;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #ff9ecb;
  --accent-rgb: 255, 158, 203;
  --accent-dim: #c77b9e;
  --accent-soft: rgba(255, 158, 203, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-toxicgreen"] {
  --bg: #f1ffe6;
  --surface: #ffffff;
  --surface-2: #d0ffc0;
  --surface-3: #a7ff92;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #39ff14;
  --accent-rgb: 57, 255, 20;
  --accent-dim: #2cc710;
  --accent-soft: rgba(57, 255, 20, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-bluebird"] {
  --bg: #e6f0ff;
  --surface: #ffffff;
  --surface-2: #cee2fe;
  --surface-3: #b0d2fd;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #60a5fa;
  --accent-rgb: 96, 165, 250;
  --accent-dim: #4b81c3;
  --accent-soft: rgba(96, 165, 250, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-terracotta"] {
  --bg: #fbe9e1;
  --surface: #ffffff;
  --surface-2: #f6d4c9;
  --surface-3: #f1b9ab;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #e2725b;
  --accent-rgb: 226, 114, 91;
  --accent-dim: #b05947;
  --accent-soft: rgba(226, 114, 91, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-electricyellow"] {
  --bg: #fffbe0;
  --surface: #ffffff;
  --surface-2: #fff7b8;
  --surface-3: #fff386;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #ffe600;
  --accent-rgb: 255, 230, 0;
  --accent-dim: #c7b300;
  --accent-soft: rgba(255, 230, 0, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-cherrycola"] {
  --bg: #ffe9ea;
  --surface: #ffffff;
  --surface-2: #ffcdd1;
  --surface-3: #ffabb2;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #ff4d5e;
  --accent-rgb: 255, 77, 94;
  --accent-dim: #c73c49;
  --accent-soft: rgba(255, 77, 94, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-seafoam"] {
  --bg: #e3fff7;
  --surface: #ffffff;
  --surface-2: #c0f5e6;
  --surface-3: #95e9d1;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #20c997;
  --accent-rgb: 32, 201, 151;
  --accent-dim: #199d76;
  --accent-soft: rgba(32, 201, 151, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-lavenderhaze"] {
  --bg: #f3eaff;
  --surface: #ffffff;
  --surface-2: #e7d8ff;
  --surface-3: #d9c3ff;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #b388ff;
  --accent-rgb: 179, 136, 255;
  --accent-dim: #8c6ac7;
  --accent-soft: rgba(179, 136, 255, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-citruspunch"] {
  --bg: #fff4d6;
  --surface: #ffffff;
  --surface-2: #ffe3af;
  --surface-3: #ffce80;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #ff9500;
  --accent-rgb: 255, 149, 0;
  --accent-dim: #c77400;
  --accent-soft: rgba(255, 149, 0, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="brutal-arcadekid"] {
  --bg: #e8ecff;
  --surface: #ffffff;
  --surface-2: #ecd2df;
  --surface-3: #f1b2b9;
  --border: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --text-faint: #6b6b6b;
  --accent: #ff5a4f;
  --accent-rgb: 255, 90, 79;
  --accent-dim: #c7463e;
  --accent-soft: rgba(255, 90, 79, 0.22);
  --radius: 0px;
  --radius-sm: 0px;
}

[data-theme="caution-stripe"] { --accent-2: #ffffff; --accent-3: #ff6a00; }
[data-theme="signal"] { --accent-2: #b833e2; --accent-3: #e27e33; }
[data-theme="solstice"] { --accent-2: #51f69b; --accent-3: #6451f6; }
[data-theme="cyberline"] { --accent-2: #f316b8; --accent-3: #f3e516; }
[data-theme="regalia"] { --accent-2: #44d0bc; --accent-3: #8d44d0; }
[data-theme="canopy"] { --accent-2: #5768d9; --accent-3: #d95794; }
[data-theme="abyss"] { --accent-2: #f53b9d; --accent-3: #dbf53b; }
[data-theme="ember"] { --accent-2: #46f57e; --accent-3: #4648f5; }
[data-theme="mono"] { --accent-2: #ffd400; --accent-3: #ff4d4d; }
[data-theme="aurora"] { --accent-2: #f68d51; --accent-3: #51f655; }
[data-theme="rose"] { --accent-2: #73f651; --accent-3: #51aaf6; }
[data-theme="velvet"] { --accent-2: #42f093; --accent-3: #5942f0; }
[data-theme="onyx"] { --accent-2: #42f0a8; --accent-3: #6e42f0; }
[data-theme="frostline"] { --accent-2: #42f0bd; --accent-3: #8342f0; }
[data-theme="nebula"] { --accent-2: #42f0d2; --accent-3: #9842f0; }
[data-theme="sable"] { --accent-2: #42f0e7; --accent-3: #ad42f0; }
[data-theme="zenith"] { --accent-2: #42e5f0; --accent-3: #c142f0; }
[data-theme="cobalt"] { --accent-2: #42cff0; --accent-3: #d742f0; }
[data-theme="marigold"] { --accent-2: #42baf0; --accent-3: #ec42f0; }
[data-theme="basalt"] { --accent-2: #42a6f0; --accent-3: #f042e0; }
[data-theme="lagoon"] { --accent-2: #4291f0; --accent-3: #f042cb; }
[data-theme="plum"] { --accent-2: #427cf0; --accent-3: #f042b6; }
[data-theme="copperfield"] { --accent-2: #4267f0; --accent-3: #f042a1; }
[data-theme="glacier"] { --accent-2: #4252f0; --accent-3: #f0428c; }
[data-theme="wildfire"] { --accent-2: #4642f0; --accent-3: #f04278; }
[data-theme="moss"] { --accent-2: #5b42f0; --accent-3: #f04263; }
[data-theme="indigo"] { --accent-2: #7142f0; --accent-3: #f0424d; }
[data-theme="sandstorm"] { --accent-2: #8542f0; --accent-3: #f04b42; }
[data-theme="orchid"] { --accent-2: #9a42f0; --accent-3: #f06042; }
[data-theme="slate"] { --accent-2: #af42f0; --accent-3: #f07542; }
[data-theme="coral"] { --accent-2: #c442f0; --accent-3: #f08a42; }
[data-theme="midnight"] { --accent-2: #d942f0; --accent-3: #f09f42; }
[data-theme="tangerine"] { --accent-2: #ed42f0; --accent-3: #f0b342; }
[data-theme="emeraldine"] { --accent-2: #f042de; --accent-3: #f0c842; }
[data-theme="frostbyte"] { --accent-2: #f042c8; --accent-3: #f0de42; }
[data-theme="mulberry"] { --accent-2: #f042b3; --accent-3: #edf042; }
[data-theme="sepia"] { --accent-2: #f0429f; --accent-3: #d9f042; }
[data-theme="cerulean"] { --accent-2: #f0428a; --accent-3: #c4f042; }
[data-theme="garnet"] { --accent-2: #f04275; --accent-3: #aff042; }
[data-theme="sage"] { --accent-2: #f04260; --accent-3: #9af042; }
[data-theme="amethyst"] { --accent-2: #f0424b; --accent-3: #85f042; }
[data-theme="charcoal"] { --accent-2: #f04d42; --accent-3: #71f042; }
[data-theme="sunburst"] { --accent-2: #f06342; --accent-3: #5bf042; }
[data-theme="denim"] { --accent-2: #f07842; --accent-3: #46f042; }
[data-theme="rustic"] { --accent-2: #f08c42; --accent-3: #42f052; }
[data-theme="peacock"] { --accent-2: #f0a142; --accent-3: #42f067; }
[data-theme="blush"] { --accent-2: #f0b642; --accent-3: #42f07c; }
[data-theme="obsidian"] { --accent-2: #f0cb42; --accent-3: #42f091; }
[data-theme="citrine"] { --accent-2: #f0e042; --accent-3: #42f0a6; }
[data-theme="steel"] { --accent-2: #ecf042; --accent-3: #42f0ba; }
[data-theme="wisteria"] { --accent-2: #d7f042; --accent-3: #42f0cf; }
[data-theme="ashen"] { --accent-2: #c1f042; --accent-3: #42f0e5; }
[data-theme="bronzewing"] { --accent-2: #adf042; --accent-3: #42e7f0; }
[data-theme="frostpine"] { --accent-2: #98f042; --accent-3: #42d2f0; }
[data-theme="carmine"] { --accent-2: #83f042; --accent-3: #42bdf0; }
[data-theme="twilight"] { --accent-2: #6ef042; --accent-3: #42a8f0; }
[data-theme="honeycomb"] { --accent-2: #59f042; --accent-3: #4293f0; }
[data-theme="seafoam"] { --accent-2: #45f042; --accent-3: #427ff0; }
[data-theme="maroon"] { --accent-2: #42f054; --accent-3: #426af0; }
[data-theme="ironwood"] { --accent-2: #42f06a; --accent-3: #4254f0; }
[data-theme="skyline"] { --accent-2: #42f07f; --accent-3: #4542f0; }
[data-theme="noir"] { --accent-2: #38bdf8; --accent-3: #f472b6; }
[data-theme="graphite"] { --accent-2: #a3e635; --accent-3: #fb923c; }
[data-theme="brutal-canary"] { --accent-2: #0de3f2; --accent-3: #b60df2; }
[data-theme="brutal-flamingo"] { --accent-2: #49f20d; --accent-3: #0d96f2; }
[data-theme="brutal-cobaltpop"] { --accent-2: #f20d26; --accent-3: #73f20d; }
[data-theme="brutal-limebolt"] { --accent-2: #0d63f2; --accent-3: #f20daf; }
[data-theme="brutal-tangerinepop"] { --accent-2: #0df293; --accent-3: #470df2; }
[data-theme="brutal-crimsonblock"] { --accent-2: #0df233; --accent-3: #0d33f2; }
[data-theme="brutal-violetstack"] { --accent-2: #f28a0d; --accent-3: #0df23d; }
[data-theme="brutal-aquagrid"] { --accent-2: #c70a9a; --accent-3: #c7b50a; }
[data-theme="brutal-mintbrick"] { --accent-2: #a90bd5; --accent-3: #d5660b; }
[data-theme="brutal-monoblock"] { --accent-2: #ffd400; --accent-3: #ff3b6b; }
[data-theme="brutal-sunsetpop"] { --accent-2: #ffd23f; --accent-3: #1b998b; }
[data-theme="brutal-bubblegum"] { --accent-2: #4cc9f0; --accent-3: #ffe14d; }
[data-theme="brutal-grapesoda"] { --accent-2: #22d3ee; --accent-3: #fb7185; }
[data-theme="brutal-lemonlime"] { --accent-2: #ffd60a; --accent-3: #00b4d8; }
[data-theme="brutal-oceanwave"] { --accent-2: #00e5c3; --accent-3: #ff9f1c; }
[data-theme="brutal-peachfuzz"] { --accent-2: #7b2cbf; --accent-3: #ffd166; }
[data-theme="brutal-forestblock"] { --accent-2: #ffb703; --accent-3: #e63946; }
[data-theme="brutal-liberty"] { --accent-2: #1d4ed8; --accent-3: #ffd60a; }
[data-theme="brutal-neonpunch"] { --accent-2: #00f5d4; --accent-3: #fee440; }
[data-theme="brutal-sandstone"] { --accent-2: #0f766e; --accent-3: #be123c; }
[data-theme="brutal-icecream"] { --accent-2: #9be7ff; --accent-3: #fff176; }
[data-theme="brutal-toxicgreen"] { --accent-2: #ff00aa; --accent-3: #7c3aed; }
[data-theme="brutal-bluebird"] { --accent-2: #ff5d8f; --accent-3: #ffd23f; }
[data-theme="brutal-terracotta"] { --accent-2: #264653; --accent-3: #e9c46a; }
[data-theme="brutal-electricyellow"] { --accent-2: #ff3d00; --accent-3: #2979ff; }
[data-theme="brutal-cherrycola"] { --accent-2: #2b2d42; --accent-3: #ffb703; }
[data-theme="brutal-seafoam"] { --accent-2: #ff6b6b; --accent-3: #5f3dc4; }
[data-theme="brutal-lavenderhaze"] { --accent-2: #ffeb3b; --accent-3: #26c6da; }
[data-theme="brutal-citruspunch"] { --accent-2: #34c759; --accent-3: #ff2d55; }
[data-theme="brutal-arcadekid"] { --accent-2: #ffcc00; --accent-3: #007aff; }

/* Default kalau tema belum punya palet (tidak seharusnya terjadi) */
:where(:root) {
  /* :where() = spesifisitas nol, supaya palet --accent-2/--accent-3 milik
     tiap tema ([data-theme="x"] { --accent-2: ... }) tidak tertimpa default ini. */
  --accent-2: var(--accent);
  --accent-3: var(--accent);
}

/* Pemakaian warna kedua & ketiga di UI (berlaku untuk semua tema) */
.page-head h1::after {
  content: "";
  display: block;
  width: 84px;
  height: 5px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--accent) 0 33.33%, var(--accent-2) 33.33% 66.66%, var(--accent-3) 66.66% 100%);
}

.stats-grid .stat-box:nth-child(3n + 2) .stat-value {
  color: var(--accent-2);
  text-shadow: none;
}

.stats-grid .stat-box:nth-child(3n) .stat-value {
  color: var(--accent-3);
  text-shadow: none;
}

.card > h2::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--accent-2);
  box-shadow: 14px 0 0 var(--accent-3);
  margin-right: 24px;
}

.metric-tile:nth-child(3n + 2) .metric-tile-icon { color: var(--accent-2); }
.metric-tile:nth-child(3n) .metric-tile-icon { color: var(--accent-3); }
.btn-ghost:hover { border-color: var(--accent-2); }
.theme-swatch.selected { border-color: var(--accent-2); }

/* =========================================================
   TEMA ALIP — palet, font, dan struktur sidebar dari Alip db.
   Hanya menimpa variabel & bentuk tampilan; class & logic tetap.
   ========================================================= */
@font-face {
  font-family: 'Matcha World';
  src: url('/fonts/matcha-world.otf') format('opentype'),
       url('/fonts/matcha-world.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[data-theme="alip"] {
  --bg: #f4f3ee;
  --surface: #ffffff;
  --surface-2: #fffdf3;
  --surface-3: #ebe9e2;
  --border: #111111;
  --text: #111111;
  --text-dim: #444444;
  --text-faint: #777777;
  --accent: #3b66e6;
  --accent-rgb: 59, 102, 230;
  --accent-dim: #2a4fbf;
  --accent-soft: rgba(59, 102, 230, 0.12);
  --warn: #ffd600;
  --warn-soft: rgba(255, 214, 0, 0.25);
  --danger: #e11d48;
  --danger-soft: rgba(225, 29, 72, 0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --font-display: 'Matcha World', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Space Mono', monospace;
  --sidebar-width: 264px;
}

[data-theme="alip"] body {
  background-color: #f7f6f0;
  background-image:
    linear-gradient(to right, rgba(17, 17, 17, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 17, 17, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-theme="alip"] .sidebar {
  width: 264px;
  border-right: 4px solid #111111;
  box-shadow: 6px 0 0 rgba(26, 26, 26, 0.35);
  padding: 1.25rem 1rem;
}

[data-theme="alip"] .brand {
  font-family: 'Matcha World', 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
}

[data-theme="alip"] .nav-tile {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

/* Item navigasi sidebar ala tombol Alip: kotak tegas, bayangan keras,
   aktif biru, hover kuning. */
[data-theme="alip"] .nav-tile {
  border: 2.5px solid #111111;
  box-shadow: 4px 4px 0 #111111;
  border-radius: 8px;
  background: #fffdf3;
  transition: background 0.12s ease, transform 0.1s ease, box-shadow 0.1s ease;
}
[data-theme="alip"] .nav-tile:hover {
  background: #ffe566;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #111111;
}
[data-theme="alip"] .nav-tile.active {
  background: #3b66e6;
  color: #ffffff;
}

/* Header & bottom tab mobile ala Alip (hanya tema alip). Struktur tetap. */
[data-theme="alip"] .app-banner {
  border-bottom: 3px solid #111111;
  box-shadow: 0 4px 0 #111111;
  background: #ffffff;
}
[data-theme="alip"] .app-banner-heading,
[data-theme="alip"] .app-banner-eyebrow {
  font-family: 'Matcha World', 'Space Grotesk', sans-serif;
}
[data-theme="alip"] .bottom-nav {
  background: #ffffff;
  border-top: 3px solid #111111;
  box-shadow: 0 -4px 0 #111111;
}
[data-theme="alip"] .bottom-nav-item.active,
[data-theme="alip"] .bottom-nav-item.active .bottom-nav-icon {
  color: #3b66e6;
}

/* Komponen tambahan ala Alip (hanya tema alip): judul, status, tabel. */
[data-theme="alip"] h1,
[data-theme="alip"] h2,
[data-theme="alip"] h3,
[data-theme="alip"] h4 {
  font-family: 'Matcha World', 'Space Grotesk', sans-serif;
  font-weight: normal;
  letter-spacing: 0.01em;
  color: #111111;
}
[data-theme="alip"] .status-tag {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  border: 2px solid #111111;
  box-shadow: 2px 2px 0 #111111;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
[data-theme="alip"] table {
  border: 3px solid #111111;
  box-shadow: 6px 6px 0 #111111;
  border-collapse: separate;
  border-spacing: 0;
}
[data-theme="alip"] th {
  background: #ffd600;
  color: #111111;
  border-bottom: 3px solid #111111;
  font-family: 'Space Mono', monospace;
  text-transform: uppercase;
}
[data-theme="alip"] td {
  border-bottom: 2px solid #111111;
}

/* Tombol, input, modal, dan toggle ala Alip (hanya tema alip). */
[data-theme="alip"] .btn-primary {
  background: #3b66e6;
  color: #ffffff;
  border: 3px solid #111111;
  box-shadow: 4px 4px 0 #111111;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}
[data-theme="alip"] .btn-primary:hover { background: #2a4fbf; transform: translate(-1px, -1px); }
[data-theme="alip"] .btn-danger {
  background: #e11d48;
  color: #ffffff;
  border: 3px solid #111111;
  box-shadow: 4px 4px 0 #111111;
}
[data-theme="alip"] .btn-ghost,
[data-theme="alip"] .btn-google {
  background: #ffffff;
  color: #111111;
  border: 3px solid #111111;
  box-shadow: 4px 4px 0 #111111;
}
[data-theme="alip"] .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #111111; }
[data-theme="alip"] .field input,
[data-theme="alip"] .field-input-wrap input {
  border: 2.5px solid #111111;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 3px 3px 0 #111111;
}
[data-theme="alip"] .field input:focus,
[data-theme="alip"] .field-input-wrap input:focus {
  outline: none;
  background: #fffdf3;
  box-shadow: 3px 3px 0 #3b66e6;
}
[data-theme="alip"] .modal-box {
  border: 3px solid #111111;
  box-shadow: 9px 9px 0 #111111;
  border-radius: 12px;
  background: #ffffff;
}
[data-theme="alip"] .modal-box-head { border-bottom: 3px solid #111111; }
[data-theme="alip"] .modal-close { border: 2px solid #111111; box-shadow: 2px 2px 0 #111111; background: #ffffff; }
[data-theme="alip"] .toggle-switch { border: 2.5px solid #111111; box-shadow: 2px 2px 0 #111111; }
[data-theme="alip"] .toggle-knob { border: 2px solid #111111; }


/* ---- Performa chat: kurangi kerja render untuk daftar pesan panjang ---- */
.wa-msg-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 72px;
}
.wa-load-older {
  display: flex;
  justify-content: center;
  padding: 8px 0 12px;
}

.app-banner[hidden] {
  display: none !important;
}