/* =====================================================================
   DIEZY DATABASE — THEME "ALIP" (neo-brutalist)
   Diadaptasi dari tampilan cdn-alip: border tebal, offset shadow, grid-bg,
   badge method warna pop, tipografi Space Grotesk untuk judul.
   File ini di-load SETELAH diezy-dashboard.css dan hanya meng-override —
   struktur HTML, ID, dan class asli TIDAK diubah, jadi semua JS
   (diezy-core.js / diezy-effects.js / diezy-firebase.js) tetap jalan normal.
   ===================================================================== */

:root{
  --bg-deep:#fafafa;
  --bg-raise:#ffffff;
  --surface:#ffffff;
  --surface-2:#f4f4f4;
  --border:#0a0a0a;
  --text-1:#0a0a0a;
  --text-2:#4a4a4a;
  --text-3:#737373;
  --danger:#D6003C;
  --danger-bg:#FFE5EC;
  --success:#0E8F4F;
  --success-bg:#E3F8EC;
  --radius-lg:0px;
  --radius-md:0px;
  --radius-sm:0px;
  --bg-image:none;
  --bg-overlay:rgba(250,250,250,.92);
}

/* Grid latar khas cdn-alip: dotted grid, tanpa perlu ubah markup body */
body{ position:relative; }
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:0; pointer-events:none;
  background-image: radial-gradient(#c9c9c9 1.6px, transparent 1.6px);
  background-size:28px 28px;
  opacity:.55;
}
body > *{ position:relative; z-index:1; }
#bgFxCanvas{ opacity:.15; filter:grayscale(1) contrast(1.4); }

*{ border-radius:0 !important; }

/* Kartu, tombol, tile: border tebal + offset shadow "sticker" */
.panel-card,
.stat-card,
.db-tile,
.db-endpoint-card,
.api-doc-item,
.code-block,
.key-display,
.tab-panel{
  background:var(--surface);
  border:2.5px solid var(--border) !important;
  box-shadow:4px 4px 0 var(--border);
}
.panel-card:hover,
.stat-card:hover,
.db-tile:hover{
  border-color:var(--border) !important;
  box-shadow:6px 6px 0 var(--border);
  transform:translate(-2px,-2px);
}

.panel-card h3{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.2px;
  text-transform:uppercase;
  font-size:16px;
}
.welcome-row h2{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.3px;
}
.db-hero__title{ font-weight:800; text-transform:uppercase; letter-spacing:-.2px; }
.tab-bar__group-label{ font-family:var(--font-mono); }

/* Tombol: gaya "pop" solid dengan border hitam + shadow offset — dipertegas
   supaya kontras & area tekan lebih jelas di semua state (hover/aktif/disable). */
.btn{
  border:2.5px solid var(--border) !important;
  box-shadow:3px 3px 0 var(--border);
  font-weight:700;
  letter-spacing:.2px;
  padding:11px 18px;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--border); filter:brightness(1.03); }
.btn:active{ transform:translate(2px,2px); box-shadow:0 0 0 var(--border); }
.btn:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.btn--primary{
  background:var(--accent-grad);
  color:#0a0a0a;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.btn--ghost{
  background:var(--surface);
  color:var(--text-1);
  border:2.5px solid var(--border) !important;
}
.btn--ghost:hover{ background:var(--surface-2); }
.btn--danger{
  background:var(--danger) !important;
  color:#fff !important;
  border-color:var(--border) !important;
}
.btn--danger.btn--ghost{
  background:#fff !important;
  color:var(--danger) !important;
  border-color:var(--danger) !important;
}
.btn--danger.btn--ghost:hover{ background:var(--danger-bg) !important; }
.btn--sm{ padding:8px 13px; font-size:12.5px; box-shadow:2.5px 2.5px 0 var(--border); }
.btn--sm:hover{ box-shadow:4px 4px 0 var(--border); }
.btn:disabled{ background:var(--surface-2) !important; color:var(--text-3) !important; box-shadow:none !important; filter:none !important; }

/* Tab nav: pil bordered, aktif pakai fill solid + ikon aksen — dipertegas
   supaya menu aktif langsung terlihat jelas dari sekilas pandang. */
.tab-btn{
  border:2px solid var(--border) !important;
  background:var(--surface);
  color:var(--text-2);
  font-weight:600;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease;
}
.tab-btn:hover{
  background:var(--surface-2);
  color:var(--text-1);
  box-shadow:2px 2px 0 var(--border);
  transform:translate(-1px,-1px);
}
.tab-btn__icon{
  border:2px solid var(--border) !important;
  background:var(--surface-2);
  font-size:14px;
}
.tab-btn.is-active{
  background:var(--text-1);
  color:var(--bg-deep);
  box-shadow:3px 3px 0 var(--border);
  font-weight:700;
}
.tab-btn.is-active::after{ background:var(--accent-grad); }
.tab-btn.is-active .tab-btn__icon{
  background:var(--accent-grad); border-color:#0a0a0a !important;
  box-shadow:0 0 0 2px rgba(0,0,0,.35) inset;
}

/* Stat & DB tile angka besar pakai Space Grotesk, badge label uppercase */
.stat-card__value,
.db-tile__value{ font-family:var(--font-display); color:var(--text-1); font-weight:800; }
.stat-card__label,
.db-tile__label{ color:var(--text-3); font-weight:700; letter-spacing:1.4px; }

/* Endpoint method badge — gaya "pop-blue / pop-green" ala cdn-alip */
.db-endpoint-card__method{
  border:2px solid var(--border);
  font-family:var(--font-mono);
  font-weight:700;
}
.db-endpoint-card__method.is-get{ background:#34C759; color:#04240f; }
.db-endpoint-card__method.is-post{ background:#007AFF; color:#eaf3ff; }
.db-endpoint-card__path{ color:var(--text-1); }

/* Code block: monospace di atas background terang, border tebal */
.code-block, .code-block-wrap .code-block{
  background:#0a0a0a;
  color:#e5e5e5;
  border-color:var(--border) !important;
}
.key-display{ background:var(--surface-2); }
.key-display code{ color:var(--text-1); }

/* Form fields: input border tebal, fokus pakai warna aksen aktif */
.field input, .field select{
  border:2px solid var(--border) !important;
  background:var(--surface);
  color:var(--text-1);
}
.field input:focus, .field select:focus{
  box-shadow:3px 3px 0 var(--accent);
  border-color:var(--border) !important;
}

.form-msg.is-error{ color:var(--danger); font-weight:600; }
.form-msg.is-ok{ color:var(--success); font-weight:600; }

/* Welcome splash tetap gelap (efek starfield/meteor tetap dipertahankan)
   supaya kesan "secure panel" tidak hilang saat login. */
.welcome-splash{
  --bg-deep:#07070B; --bg-raise:#0D0D14; --surface:#12121C;
  --text-1:#F5EFE0; --text-2:#A9A5B8; --border:#26263A;
}
.welcome-splash *{ border-radius:inherit; }

/* =====================================================================
   UPGRADE V2 — dekorasi login, sidebar drawer, announcement, stat colors
   ===================================================================== */

/* ---- Login: ubah panel gelap jadi terang neo-brutalist ala referensi ---- */
.auth-screen{
  padding-top:96px;
  background:
    radial-gradient(560px 380px at 12% 0%, rgba(255,47,214,.12), transparent 60%),
    radial-gradient(560px 380px at 100% 100%, rgba(34,211,238,.12), transparent 55%),
    var(--bg-deep);
}
.auth-screen__glow{ display:none; }
.auth-card{
  overflow:visible;
  background:var(--surface) !important;
  border:2.5px solid var(--border) !important;
  box-shadow:6px 6px 0 var(--border) !important;
  backdrop-filter:none;
}
.auth-card__status-strip{
  position:absolute; left:0; right:0; top:-42px;
  display:flex; align-items:center; gap:8px; justify-content:center;
  background:#0a0a0a; color:#fff; border:2.5px solid var(--border);
  border-radius:0; padding:8px 14px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:1.2px; font-weight:700;
  box-shadow:4px 4px 0 var(--border);
}
.auth-card__status-strip::after{
  content:""; position:absolute; left:-2.5px; right:-2.5px; bottom:-5px; height:5px;
  background:linear-gradient(90deg,#FF3DAE,#FFD98A,#34C759,#37D6E0,#5B8CFF);
}
.auth-card__status-strip .pulse-dot{ background:#34C759; box-shadow:0 0 8px #34C759; }
.auth-card__badge{
  position:absolute; top:-78px; right:-6px; z-index:2;
  background:#FF2FD6; color:#fff; border:2.5px solid var(--border);
  font-family:var(--font-display); font-weight:700; font-size:11px;
  letter-spacing:.5px; padding:6px 12px; border-radius:999px;
  box-shadow:3px 3px 0 var(--border); transform:rotate(8deg);
}
.auth-deco{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.auth-deco__shape{
  position:absolute; display:block; border:2.5px solid var(--border);
  box-shadow:5px 5px 0 var(--border); opacity:.95;
  animation:authDecoFloat 6s ease-in-out infinite;
}
.auth-deco__shape--magenta{
  width:64px; height:64px; border-radius:22px; background:#FF2FD6;
  top:14%; left:6%; transform:rotate(-14deg); animation-delay:0s;
}
.auth-deco__shape--cyan{
  width:46px; height:46px; border-radius:14px; background:#22D3EE;
  top:32%; right:8%; transform:rotate(16deg); animation-delay:1.4s;
}
.auth-deco__shape--red{
  width:58px; height:58px; border-radius:50%; background:#FF3B30;
  bottom:10%; right:12%; transform:rotate(0deg); animation-delay:2.8s;
}
@keyframes authDecoFloat{
  0%, 100%{ transform:translateY(0) rotate(var(--r,0deg)); }
  50%{ transform:translateY(-12px) rotate(var(--r,0deg)); }
}
@media (max-width:640px){
  .auth-deco__shape--magenta{ width:44px; height:44px; top:8%; left:4%; }
  .auth-deco__shape--cyan{ width:34px; height:34px; top:20%; right:5%; }
  .auth-deco__shape--red{ width:40px; height:40px; bottom:6%; right:6%; }
  .auth-card__badge{ top:-64px; right:0; font-size:9.5px; padding:5px 9px; }
}
body.reduce-motion .auth-deco__shape{ animation:none; }

/* ---- Sticker logo mark: sedikit efek pop saat hover di brand ---- */
.brand-mark--sticker{ filter:none; }
.brand-mark--sticker svg{ overflow:visible; }

/* ---- Announcement bar ala referensi — SEKARANG BERJALAN (marquee), bukan diam ---- */
.announcement-bar{
  margin:16px 20px 0; display:flex; align-items:center; gap:12px;
  background:#0a0a0a; color:#fff; border:2.5px solid var(--border);
  box-shadow:4px 4px 0 var(--border); padding:10px 14px;
  font-size:12.5px; overflow:hidden; white-space:nowrap;
}
.announcement-bar__tag{
  flex-shrink:0; background:#FF2FD6; color:#fff; border:2px solid #fff;
  font-weight:700; font-size:10.5px; letter-spacing:.4px;
  padding:4px 10px; border-radius:999px;
}
.announcement-bar__viewport{ flex:1; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image:linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.announcement-bar__track{ display:inline-flex; width:max-content; animation:announcementScroll 16s linear infinite; }
.announcement-bar__text{ display:inline-block; padding-right:64px; color:#f0f0f0; white-space:nowrap; }
@keyframes announcementScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
/* Pause halus saat hover/tap supaya pesan panjang tetap bisa dibaca */
.announcement-bar:hover .announcement-bar__track{ animation-play-state:paused; }
body.reduce-motion .announcement-bar__track{ animation:none; }
body.reduce-motion .announcement-bar__viewport{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }

/* ---- Stat cards berwarna ala referensi ---- */
.stat-grid .stat-card:nth-child(1){ background:#ffffff; }
.stat-grid .stat-card:nth-child(1) .stat-card__icon{ background:#22D3EE; color:#04202b; border-color:var(--border); }
.stat-grid .stat-card:nth-child(2){ background:#CFF7E8; }
.stat-grid .stat-card:nth-child(2) .stat-card__icon{ background:#0a0a0a; color:#34C759; border-color:var(--border); }
.stat-grid .stat-card:nth-child(3).stat-card--danger{ background:#FFE5E5; }
.stat-grid .stat-card:nth-child(4){ background:#FFF3C4; }
.stat-grid .stat-card:nth-child(4) .stat-card__icon{ background:#FF9F1C; color:#2a1400; border-color:var(--border); }
.stat-grid .stat-card__value{ color:var(--text-1) !important; }
.stat-grid .stat-card--danger .stat-card__value{ color:var(--danger) !important; }

/* ---- Security monitor strip: skin neo-brutalist konsisten dgn kartu lain ---- */
.security-monitor{
  margin:16px 20px 0;
  border:2.5px solid var(--border) !important;
  box-shadow:4px 4px 0 var(--border);
  background:#0a0a0a;
}
.security-monitor__label{ color:#9a9a9a; font-family:var(--font-mono); font-size:11px; letter-spacing:.4px; }
.security-monitor__item strong{ color:#fff; }
.security-monitor__sep{ background:rgba(255,255,255,.25); }

/* ---- Logo upload preview: border tebal ala kartu lain ---- */
.logo-upload-preview{ border-radius:0 !important; border:2.5px solid var(--border) !important; box-shadow:3px 3px 0 var(--border); }

/* ---- Topbar: tampilkan tombol menu di layar sempit ---- */
@media (max-width:880px){
  .topbar__menu{ display:inline-flex; align-items:center; justify-content:center; }
}

/* ---- Sidebar drawer: ubah tab-bar jadi panel off-canvas di mobile ---- */
.tab-bar__head, .tab-bar__close, .tab-bar__group-label, .tab-bar__foot{ display:none; }
.sidebar-backdrop{ display:none; }

@media (max-width:880px){
  .sidebar-backdrop{
    display:block; position:fixed; inset:0; z-index:998;
    background:rgba(10,10,10,.55); opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  .sidebar-backdrop.is-open{ opacity:1; pointer-events:auto; }

  .tab-bar{
    position:fixed; top:0; left:0; bottom:0; z-index:999;
    width:280px; max-width:82vw; height:100vh; height:100dvh;
    background:var(--bg-raise); border-right:2.5px solid var(--border);
    box-shadow:6px 0 0 rgba(0,0,0,.08);
    flex-direction:column; gap:4px; padding:18px 16px 16px;
    overflow-x:hidden; overflow-y:auto;
    transform:translateX(-104%); transition:transform .24s ease;
  }
  .tab-bar.is-open{ transform:translateX(0); }

  .tab-bar__head{
    display:flex; align-items:center; gap:10px; padding-bottom:14px;
    margin-bottom:10px; border-bottom:2.5px solid var(--border); position:relative;
  }
  .tab-bar__head-mark{ width:44px; height:44px; flex-shrink:0; display:flex; }
  .tab-bar__head-mark svg{ width:100%; height:100%; }
  .tab-bar__head-meta{ display:flex; flex-direction:column; line-height:1.3; }
  .tab-bar__head-meta strong{ font-family:var(--font-display); font-size:15px; letter-spacing:.2px; }
  .tab-bar__head-meta span{ font-size:10.5px; color:var(--text-3); font-family:var(--font-mono); }
  .tab-bar__close{
    margin-left:auto; background:var(--surface-2); border:2px solid var(--border);
    width:30px; height:30px; cursor:pointer; font-size:14px; flex-shrink:0;
  }

  .tab-bar__group-label{
    display:block; font-size:10px; letter-spacing:1.6px; font-weight:700;
    color:var(--text-3); text-transform:uppercase; margin:10px 4px 4px;
  }
  .tab-bar__group-label:first-of-type{ margin-top:0; }

  .tab-bar .tab-btn{
    width:100%; justify-content:flex-start; border-radius:0 !important;
    padding:10px 12px; font-size:13.5px;
  }
  .tab-bar .tab-btn__icon{ border-radius:8px !important; }

  .tab-bar__foot{
    display:flex; margin-top:auto; padding-top:14px; border-top:2.5px solid var(--border);
  }
  .tab-bar__foot .topbar__user{
    margin-left:0; padding-left:0; border-left:none; width:100%;
    flex-wrap:wrap; row-gap:10px;
  }
  .tab-bar__foot .topbar__user-meta{ flex:1; min-width:0; }
  .tab-bar__foot .topbar__online{ display:none; }
  .tab-bar__foot #logoutBtn{ width:100%; order:3; }

  body.sidebar-open{ overflow:hidden; }
}

/* =====================================================================
   UPGRADE V3 — perluasan skin neo-brutalist ke SELURUH komponen lain yang
   sebelumnya belum tersentuh tema ini (input, chat, database tab, avatar,
   role-chip, toast, dsb), supaya konsisten di semua halaman/tab, bukan
   cuma sebagian. Prinsip sama seperti di atas: hanya override visual,
   struktur HTML/ID/class asli tidak berubah.
   ===================================================================== */

/* ---- Input teks/pencarian di seluruh panel ---- */
.inline-form input,
.chat-input-row input,
.search-input,
.upload-row input[type="file"]{
  border:2px solid var(--border) !important;
  background:var(--surface);
  color:var(--text-1);
  border-radius:0 !important;
}
.inline-form input:focus,
.chat-input-row input:focus,
.search-input:focus{
  outline:none; border-color:var(--border) !important;
  box-shadow:3px 3px 0 var(--accent);
}

/* ---- Daftar rekaman (nomor/akun): kartu bordered konsisten ---- */
.record-row{
  background:var(--surface) !important;
  border:2px solid var(--border) !important;
  box-shadow:3px 3px 0 var(--border);
  transition:transform .14s ease, box-shadow .14s ease;
}
.record-row:hover{
  border-color:var(--border) !important;
  box-shadow:5px 5px 0 var(--border);
  transform:translate(-2px,-2px);
}
.record-row__key code{ border:2px solid var(--border) !important; background:var(--surface-2); }
.status-pill{ border:2px solid var(--border); font-weight:700; }
.status-pill--active{ background:#CFF7E8; color:#0E8F4F; }
.status-pill--blacklisted{ background:#FFE5E5; color:#D6003C; }

/* ---- Key display / code block: border tegas + shadow ---- */
.key-display{ border:2.5px solid var(--border) !important; box-shadow:3px 3px 0 var(--border); background:var(--surface); }
.code-block-wrap .code-block-copy{ border:2px solid var(--border) !important; box-shadow:2px 2px 0 var(--border); }

/* ---- Swatch warna aksen: ring bordered ---- */
.swatch{ border:2.5px solid var(--border) !important; }
.swatch:hover, .swatch.is-active{ box-shadow:0 0 0 3px var(--border); }

/* ---- Switch row / toggle ---- */
.switch-row{ border-bottom:2px solid var(--border); }

/* ---- Avatar & role-chip: gaya sticker ala referensi ---- */
.avatar{
  border-radius:10px !important; border:2.5px solid var(--border) !important;
  background:var(--accent-grad); box-shadow:2px 2px 0 var(--border) !important;
}
.role-chip{
  border:2px solid var(--border) !important; border-radius:999px !important;
  font-weight:800; letter-spacing:.6px;
}
.role-chip--developer{ background:#FFF3C4; color:#5c3d00; }
.role-chip--partner{ background:#EDE6FF; color:#3d2b7a; }
.role-chip--owner{ background:#E1EBFF; color:#0a3d91; }
.role-chip--reseller{ background:#D6FBFF; color:#04525c; }

/* ---- Music player mini widget ---- */
.music-player{ border:2px solid var(--border) !important; background:var(--surface); }
.music-player__btn{ border:2px solid var(--border) !important; border-radius:50% !important; box-shadow:2px 2px 0 var(--border); }

/* ---- Public chat: bubble bordered, ala pesan neo-brutalist ---- */
.chat-window{ border:2.5px solid var(--border) !important; box-shadow:4px 4px 0 var(--border); background:var(--surface); }
.chat-msg__bubble{
  border:2px solid var(--border) !important; border-radius:2px 14px 14px 14px !important;
  background:var(--surface-2); box-shadow:2px 2px 0 var(--border);
}
.chat-msg--me .chat-msg__bubble{
  background:#FFF3C4 !important; border-color:var(--border) !important;
  border-radius:14px 2px 14px 14px !important;
}
.chat-msg__audio{ border:2px solid var(--border) !important; box-shadow:2px 2px 0 var(--border); }
.attach-btn{ border:2px solid var(--border) !important; border-radius:50% !important; }
.attach-btn.is-active{ background:var(--accent-grad) !important; border-color:var(--border) !important; }
.chat-attach-preview{ border:2px solid var(--border) !important; box-shadow:2px 2px 0 var(--border); }
.chat-attach-preview img, .chat-attach-preview video{ border-radius:4px !important; border:2px solid var(--border); }

/* ---- Tab "Database": hero, tile, ring, bar, endpoint card ---- */
.db-hero{
  background:#0a0a0a !important; border:2.5px solid var(--border) !important;
  box-shadow:5px 5px 0 var(--border);
}
.db-tile{
  background:rgba(255,255,255,.06) !important; border:2px solid rgba(255,255,255,.35) !important;
}
.db-tile:hover{ border-color:#fff !important; transform:translate(-2px,-2px); }
.db-ring{ box-shadow:0 0 0 2.5px var(--border) !important; }
.db-ring__hole{ background:#0a0a0a; }
.db-ring__hole strong{ color:#fff; }
.db-bar-track{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); }
.db-endpoint-card{
  background:var(--surface) !important; border:2.5px solid var(--border) !important;
  box-shadow:3px 3px 0 var(--border); transition:transform .14s ease, box-shadow .14s ease;
}
.db-endpoint-card:hover{ box-shadow:5px 5px 0 var(--border); transform:translate(-2px,-2px); }
.db-endpoint-card__method{ border-radius:999px !important; }

/* ---- Toast ---- */
.toast{
  border:2.5px solid var(--border) !important; box-shadow:4px 4px 0 var(--border) !important;
  background:#0a0a0a; color:#fff; border-radius:0 !important;
}
.toast.is-error{ background:#FFE5E5; color:#D6003C; border-color:var(--border) !important; }
.toast.is-ok{ background:#CFF7E8; color:#0E8F4F; border-color:var(--border) !important; }

/* ---- Bubble bantuan mengambang (customer-service float button) ---- */
.cs-float-btn{
  border:2.5px solid var(--border) !important; box-shadow:4px 4px 0 var(--border) !important;
  background:var(--accent-grad); border-radius:999px !important;
}
.cs-float-btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--border) !important; }

/* ---- Scope/mode selector buttons (tab tema, upgrade role, dsb) ---- */
.scope-btn{
  border:2px solid var(--border) !important; background:var(--surface); border-radius:0 !important;
}
.scope-btn.is-active{ background:var(--text-1) !important; color:var(--bg-deep) !important; box-shadow:2px 2px 0 var(--border); }

/* ---- Divider & empty state ---- */
.divider{ border-top:2px dashed var(--border) !important; }
.empty-state{ border:2px dashed var(--border); padding:24px 12px; }

/* ---- Background preview & logo/welcome upload preview: konsisten bordered ---- */
.bg-preview{ border:2.5px solid var(--border) !important; box-shadow:3px 3px 0 var(--border); }

/* =====================================================================
   UPGRADE V4 — jaminan kontras tombol/menu (anti "gelap-tak-kelihatan")
   Semua kontrol interaktif dipaksa punya pasangan bg/teks yang kontras,
   apa pun state atau konteks dark/light di sekitarnya, supaya label
   selalu terbaca jelas — sesuai referensi tampilan terang bordered.
   ===================================================================== */
.btn, .tab-btn, .scope-btn, .attach-btn, .icon-btn,
.tab-bar .tab-btn, .sidebar-drawer .tab-btn,
button:not(.music-player__btn):not(.code-block-copy):not(.cs-float-btn){
  background-color:var(--surface);
  color:var(--text-1) !important;
}
.btn--primary, .btn--primary:hover,
.tab-btn.is-active, .tab-btn.is-active:hover,
.scope-btn.is-active{
  color:#0a0a0a !important;
  background:var(--accent-grad) !important;
}
.btn--danger, .btn--danger:hover{ color:#fff !important; }
.btn:disabled, .tab-btn:disabled, .scope-btn:disabled{
  color:var(--text-3) !important; background:var(--surface-2) !important;
}
/* Sidebar drawer & system menu group (Remote Bots / API Docs / API Keys) —
   pastikan selalu terang & jelas, tidak ikut skema gelap manapun. */
.tab-bar, .tab-bar .tab-btn{ background:var(--bg-raise) !important; }
.tab-bar .tab-btn{ color:var(--text-1) !important; border-color:var(--border) !important; }
.tab-bar .tab-btn.is-active{ background:var(--text-1) !important; color:#fff !important; }

/* =====================================================================
   UPGRADE V4 — welcome splash dirombak lebih modern: gradient mesh yang
   bergerak halus, orb melayang, judul dengan efek reveal blur-in, dan
   ring yang lebih halus. Struktur/ID HTML tidak berubah, jadi kompatibel
   penuh dengan diezy-effects.js (partikel) & logic JS yang sudah ada.
   ===================================================================== */
.welcome-splash{
  background:
    radial-gradient(circle at 18% 22%, rgba(232,182,90,.22), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(120,140,255,.20), transparent 45%),
    linear-gradient(160deg, #07070B 0%, #0D0D14 55%, #07070B 100%) !important;
  background-size:200% 200%, 200% 200%, 100% 100% !important;
  animation:welcomeMeshDrift 14s ease-in-out infinite alternate;
}
body.reduce-motion .welcome-splash{ animation:none; }
@keyframes welcomeMeshDrift{
  0%{ background-position:0% 0%, 100% 100%, 0 0; }
  100%{ background-position:100% 100%, 0% 0%, 0 0; }
}
.welcome-splash__panel{
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  background:rgba(18,18,28,.55) !important;
  border-radius:20px !important;
  animation:welcomePanelRise .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes welcomePanelRise{
  0%{ opacity:0; transform:translateY(22px) scale(.96); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
.welcome-splash__ring{ border-radius:50% !important; }
.welcome-splash__title{
  animation:welcomeTitleReveal .9s cubic-bezier(.16,1,.3,1) both .15s !important;
}
@keyframes welcomeTitleReveal{
  0%{ opacity:0; filter:blur(10px); letter-spacing:8px; }
  100%{ opacity:1; filter:blur(0); letter-spacing:normal; }
}
.welcome-splash__bar{ border-radius:999px !important; overflow:hidden; }
.welcome-splash__bar-fill{ border-radius:999px !important; }
body.reduce-motion .welcome-splash__panel,
body.reduce-motion .welcome-splash__title{ animation:none !important; opacity:1 !important; filter:none !important; }

/* =====================================================================
   UPGRADE V5 — Music Player dirombak total: tombol play/pause ikon SVG
   (bukan emoji ▶/⏸), ring gradient berputar + glow pulsing saat musik
   sedang main, dan equalizer bar mini yang menari mengikuti status.
   ===================================================================== */
.music-player{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px !important;
  background:var(--surface) !important;
  border:2.5px solid var(--border) !important;
  box-shadow:3px 3px 0 var(--border);
}
.music-player__btn{
  position:relative; width:48px; height:48px; flex-shrink:0;
  border:2.5px solid var(--border) !important; border-radius:50% !important;
  background:var(--accent-grad) !important; color:#0a0a0a !important;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; overflow:visible;
  box-shadow:2px 2px 0 var(--border);
  transition:transform .15s ease, box-shadow .15s ease;
}
.music-player__btn:hover{ transform:translate(-1px,-1px) scale(1.03); box-shadow:4px 4px 0 var(--border); }
.music-player__btn:active{ transform:translate(1px,1px) scale(.97); }
.music-player__icon{ position:relative; z-index:2; margin-left:1px; }
.music-player__ring{
  position:absolute; inset:-6px; border-radius:50%;
  border:2px solid transparent;
  border-top-color:var(--accent); border-right-color:var(--accent);
  opacity:0; transition:opacity .2s ease;
}
.music-player.is-playing .music-player__ring{
  opacity:1; animation:musicRingSpin 2.6s linear infinite;
}
.music-player.is-playing .music-player__btn{
  animation:musicBtnPulse 1.8s ease-in-out infinite;
}
@keyframes musicRingSpin{ to{ transform:rotate(360deg); } }
@keyframes musicBtnPulse{
  0%,100%{ box-shadow:2px 2px 0 var(--border), 0 0 0 0 rgba(232,182,90,.45); }
  50%{ box-shadow:2px 2px 0 var(--border), 0 0 0 7px rgba(232,182,90,0); }
}
body.reduce-motion .music-player__ring,
body.reduce-motion .music-player__btn{ animation:none !important; }

.music-player__meta{ flex:1; min-width:0; }
.music-player__title{ font-weight:700; }
.music-player__sub-row{ display:flex; align-items:center; gap:8px; margin-top:2px; }
.music-player__eq{
  display:inline-flex; align-items:flex-end; gap:2px; height:12px; opacity:.35;
  transition:opacity .2s ease;
}
.music-player__eq i{
  width:3px; height:4px; background:var(--accent); border-radius:1px;
  animation:musicEqBar 1s ease-in-out infinite;
}
.music-player__eq i:nth-child(1){ animation-delay:-.9s; }
.music-player__eq i:nth-child(2){ animation-delay:-.5s; }
.music-player__eq i:nth-child(3){ animation-delay:-.7s; }
.music-player__eq i:nth-child(4){ animation-delay:-.2s; }
.music-player.is-playing .music-player__eq{ opacity:1; }
.music-player:not(.is-playing) .music-player__eq i{ animation-play-state:paused; height:4px; }
@keyframes musicEqBar{
  0%,100%{ height:4px; }
  50%{ height:12px; }
}
body.reduce-motion .music-player__eq i{ animation:none !important; height:4px !important; }
.music-player__vol{
  width:76px; accent-color:var(--accent); cursor:pointer;
}