/* ==============================================================================
   MURAPAY GLOBAL THEME ENGINE - 7 THEMES
   Dikelola langsung oleh Master Owner melalui menu Pengaturan
   1. default       : MuraPay Classic (Signature Blue & Orange)
   2. obsidian      : Midnight Obsidian (Cyber Dark & Neon Cyan)
   3. emerald       : Luxury Emerald & Gold (Bank Digital Modern)
   4. nordic        : Clean Nordic Minimalist (Putih Bersih & Slate Stripe Style)
   5. sunset         : Sunset Flare (Oranye Hangat & Indigo Gradien)
   6. neobrutalism  : Neo-Brutalism Tech (Kontras Tinggi, Border Tebal & Hard Shadow)
   7. glassmorphism : Frosted Glassmorphism (Aero Glass Kaca Transparan & Blur)
   ============================================================================== */

/* =============================================================
   1. MIDNIGHT OBSIDIAN (Cyber Dark & Neon Accent)
   ============================================================= */
[data-theme-style="obsidian"] {
  --bg: #07090e !important;
  --card: #0f121c !important;
  --panel: #0f121c !important;
  --panel2: #151a27 !important;
  --sidebar-bg: #0b0e17 !important;
  --sidebar: #0b0e17 !important;
  --line: #1e2638 !important;
  --border: #1e2638 !important;
  --primary: #00f0ff !important;
  --primary-hover: #00c8d6 !important;
  --primary-dark: #009aa6 !important;
  --primary2: #38bdf8 !important;
  --text: #f1f5f9 !important;
  --muted: #8493a8 !important;
  --input-bg: #090c14 !important;
  --btn-bg: #151a27 !important;
  --btn-hover: #1e2638 !important;
  --ok: #10b981 !important;
  --ok-text: #34d399 !important;
  --dark: #07090e !important;
  --dark2: #0f121c !important;
}

[data-theme-style="obsidian"] body {
  background-color: #07090e !important;
  color: #f1f5f9 !important;
}

[data-theme-style="obsidian"] .nav,
[data-theme-style="obsidian"] .topbar,
[data-theme-style="obsidian"] .mobile-bar {
  background: #0b0e17 !important;
  border-bottom-color: #1e2638 !important;
}

[data-theme-style="obsidian"] .card,
[data-theme-style="obsidian"] .panel,
[data-theme-style="obsidian"] .feature,
[data-theme-style="obsidian"] .stats-grid > div,
[data-theme-style="obsidian"] .steps li,
[data-theme-style="obsidian"] .auth-card,
[data-theme-style="obsidian"] .login-card,
[data-theme-style="obsidian"] .modal-card,
[data-theme-style="obsidian"] .table-wrap,
[data-theme-style="obsidian"] .code-panel {
  background: #0f121c !important;
  border-color: #1e2638 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.04) !important;
}

[data-theme-style="obsidian"] .section.alt {
  background: #090c14 !important;
  border-color: #1e2638 !important;
}

[data-theme-style="obsidian"] .section-head h2,
[data-theme-style="obsidian"] h1,
[data-theme-style="obsidian"] h2,
[data-theme-style="obsidian"] h3 {
  color: #f1f5f9 !important;
}

[data-theme-style="obsidian"] .card:hover,
[data-theme-style="obsidian"] .feature:hover {
  border-color: rgba(0, 240, 255, 0.4) !important;
  box-shadow: 0 6px 24px rgba(0, 240, 255, 0.12) !important;
}

[data-theme-style="obsidian"] .btn.primary {
  background: #00f0ff !important;
  border-color: #00f0ff !important;
  color: #05070c !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35) !important;
}

/* =============================================================
   2. LUXURY EMERALD & GOLD (Bank Digital Modern)
   ============================================================= */
[data-theme-style="emerald"] {
  --bg: #061814 !important;
  --card: #0b241e !important;
  --panel: #0b241e !important;
  --panel2: #10332b !important;
  --sidebar-bg: #081d18 !important;
  --sidebar: #081d18 !important;
  --line: #164337 !important;
  --border: #164337 !important;
  --primary: #10b981 !important;
  --primary-hover: #059669 !important;
  --primary-dark: #047857 !important;
  --primary2: #34d399 !important;
  --text: #ecfdf5 !important;
  --muted: #86a89c !important;
  --input-bg: #051410 !important;
  --btn-bg: #10332b !important;
  --btn-hover: #164337 !important;
  --ok: #34d399 !important;
  --ok-text: #34d399 !important;
  --warn: #f59e0b !important;
  --dark: #061814 !important;
  --dark2: #0b241e !important;
}

[data-theme-style="emerald"] body {
  background-color: #061814 !important;
  color: #ecfdf5 !important;
}

[data-theme-style="emerald"] .nav,
[data-theme-style="emerald"] .topbar,
[data-theme-style="emerald"] .mobile-bar {
  background: #081d18 !important;
  border-bottom-color: #164337 !important;
}

[data-theme-style="emerald"] .card,
[data-theme-style="emerald"] .panel,
[data-theme-style="emerald"] .feature,
[data-theme-style="emerald"] .stats-grid > div,
[data-theme-style="emerald"] .steps li,
[data-theme-style="emerald"] .auth-card,
[data-theme-style="emerald"] .login-card,
[data-theme-style="emerald"] .modal-card,
[data-theme-style="emerald"] .table-wrap,
[data-theme-style="emerald"] .code-panel {
  background: #0b241e !important;
  border-color: #164337 !important;
  color: #ecfdf5 !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.05) !important;
}

[data-theme-style="emerald"] .section.alt {
  background: #071e19 !important;
  border-color: #164337 !important;
}

[data-theme-style="emerald"] .section-head h2,
[data-theme-style="emerald"] h1,
[data-theme-style="emerald"] h2,
[data-theme-style="emerald"] h3 {
  color: #ecfdf5 !important;
}

[data-theme-style="emerald"] .btn.primary {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35) !important;
}

/* =============================================================
   3. CLEAN NORDIC MINIMALIST (Putih Bersih & Slate Stripe Style)
   ============================================================= */
[data-theme-style="nordic"] {
  --bg: #f8fafc !important;
  --card: #ffffff !important;
  --panel: #ffffff !important;
  --panel2: #f1f5f9 !important;
  --sidebar-bg: #ffffff !important;
  --sidebar: #ffffff !important;
  --line: #e2e8f0 !important;
  --border: #e2e8f0 !important;
  --primary: #4f46e5 !important;
  --primary-hover: #4338ca !important;
  --primary-dark: #3730a3 !important;
  --primary2: #6366f1 !important;
  --text: #0f172a !important;
  --muted: #64748b !important;
  --input-bg: #ffffff !important;
  --btn-bg: #f1f5f9 !important;
  --btn-hover: #e2e8f0 !important;
  --ok: #10b981 !important;
  --ok-text: #059669 !important;
  --dark: #0f172a !important;
  --dark2: #1e293b !important;
}

[data-theme-style="nordic"] body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

[data-theme-style="nordic"] .nav,
[data-theme-style="nordic"] .topbar,
[data-theme-style="nordic"] .mobile-bar {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme-style="nordic"] .nav-links a:not(.btn) {
  color: #334155 !important;
}

[data-theme-style="nordic"] .nav-toggle {
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
}

[data-theme-style="nordic"] .card,
[data-theme-style="nordic"] .panel,
[data-theme-style="nordic"] .feature,
[data-theme-style="nordic"] .stats-grid > div,
[data-theme-style="nordic"] .steps li,
[data-theme-style="nordic"] .auth-card,
[data-theme-style="nordic"] .login-card,
[data-theme-style="nordic"] .modal-card,
[data-theme-style="nordic"] .table-wrap {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

[data-theme-style="nordic"] .section.alt {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

[data-theme-style="nordic"] .section-head h2,
[data-theme-style="nordic"] h1,
[data-theme-style="nordic"] h2,
[data-theme-style="nordic"] h3 {
  color: #0f172a !important;
}

[data-theme-style="nordic"] .btn.primary {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25) !important;
}

/* =============================================================
   4. SUNSET FLARE (Oranye Hangat & Indigo Gradien)
   ============================================================= */
[data-theme-style="sunset"] {
  --bg: #0b0f19 !important;
  --card: #131929 !important;
  --panel: #131929 !important;
  --panel2: #1b2338 !important;
  --sidebar-bg: #0e1422 !important;
  --sidebar: #0e1422 !important;
  --line: #243049 !important;
  --border: #243049 !important;
  --primary: #ff5722 !important;
  --primary-hover: #f4511e !important;
  --primary-dark: #e64a19 !important;
  --primary2: #ff7043 !important;
  --text: #f8fafc !important;
  --muted: #94a3b8 !important;
  --input-bg: #090d16 !important;
  --btn-bg: #1b2338 !important;
  --btn-hover: #243049 !important;
  --ok: #10b981 !important;
  --ok-text: #34d399 !important;
  --dark: #0b0f19 !important;
  --dark2: #131929 !important;
}

[data-theme-style="sunset"] body {
  background-color: #0b0f19 !important;
  color: #f8fafc !important;
}

[data-theme-style="sunset"] .nav,
[data-theme-style="sunset"] .topbar,
[data-theme-style="sunset"] .mobile-bar {
  background: #0e1422 !important;
  border-bottom-color: #243049 !important;
}

[data-theme-style="sunset"] .card,
[data-theme-style="sunset"] .panel,
[data-theme-style="sunset"] .feature,
[data-theme-style="sunset"] .stats-grid > div,
[data-theme-style="sunset"] .steps li,
[data-theme-style="sunset"] .auth-card,
[data-theme-style="sunset"] .login-card,
[data-theme-style="sunset"] .modal-card,
[data-theme-style="sunset"] .table-wrap,
[data-theme-style="sunset"] .code-panel {
  background: #131929 !important;
  border-color: #243049 !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 20px rgba(255, 87, 34, 0.05) !important;
}

[data-theme-style="sunset"] .section.alt {
  background: #0e1422 !important;
  border-color: #243049 !important;
}

[data-theme-style="sunset"] .section-head h2,
[data-theme-style="sunset"] h1,
[data-theme-style="sunset"] h2,
[data-theme-style="sunset"] h3 {
  color: #f8fafc !important;
}

[data-theme-style="sunset"] .btn.primary {
  background: linear-gradient(135deg, #ff5722, #f97316) !important;
  border-color: #ff5722 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(255, 87, 34, 0.35) !important;
}

/* =============================================================
   5. NEO-BRUTALISM TECH (Kontras Tinggi & Garis Tegas) - FULL SUITE
   ============================================================= */
[data-theme-style="neobrutalism"] {
  --bg: #fefce8 !important;
  --card: #ffffff !important;
  --panel: #ffffff !important;
  --panel2: #fef08a !important;
  --sidebar-bg: #fffbeb !important;
  --sidebar: #fffbeb !important;
  --line: #000000 !important;
  --border: #000000 !important;
  --primary: #ff5b22 !important;
  --primary-hover: #e04a15 !important;
  --primary-dark: #c23b0c !important;
  --primary2: #f59e0b !important;
  --text: #000000 !important;
  --muted: #4b5563 !important;
  --input-bg: #ffffff !important;
  --btn-bg: #fef08a !important;
  --btn-hover: #fde047 !important;
  --ok: #15803d !important;
  --ok-text: #15803d !important;
  --dark: #000000 !important;
  --dark2: #1f2937 !important;
}

[data-theme-style="neobrutalism"] body {
  background-color: #fefce8 !important;
  color: #000000 !important;
}

/* Nav & Topbar & Header */
[data-theme-style="neobrutalism"] .nav {
  background: #fef08a !important;
  border-bottom: 3px solid #000000 !important;
}

[data-theme-style="neobrutalism"] .topbar,
[data-theme-style="neobrutalism"] .mobile-bar {
  background: #ffffff !important;
  border-bottom: 2px solid #000000 !important;
}

[data-theme-style="neobrutalism"] .sidebar {
  background: #fffbeb !important;
  border-right: 3px solid #000000 !important;
}

[data-theme-style="neobrutalism"] .nav-links a:not(.btn) {
  color: #000000 !important;
  font-weight: 700 !important;
}

[data-theme-style="neobrutalism"] .nav-toggle,
[data-theme-style="neobrutalism"] .menu-toggle {
  color: #000000 !important;
  border: 2px solid #000000 !important;
  background: #fef08a !important;
  box-shadow: 2px 2px 0px #000000 !important;
}

/* Cards, Panels, Stats, Steps */
[data-theme-style="neobrutalism"] .card,
[data-theme-style="neobrutalism"] .panel,
[data-theme-style="neobrutalism"] .feature,
[data-theme-style="neobrutalism"] .stats-grid > div,
[data-theme-style="neobrutalism"] .steps li,
[data-theme-style="neobrutalism"] .auth-card,
[data-theme-style="neobrutalism"] .login-card,
[data-theme-style="neobrutalism"] .modal-card,
[data-theme-style="neobrutalism"] .code-panel,
[data-theme-style="neobrutalism"] .key-box,
[data-theme-style="neobrutalism"] .countdown-wrap,
[data-theme-style="neobrutalism"] .pkg-card {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  border-radius: 12px !important;
  color: #000000 !important;
}

[data-theme-style="neobrutalism"] .section.alt {
  background: #fef9c3 !important;
  border-top: 3px solid #000000 !important;
  border-bottom: 3px solid #000000 !important;
}

[data-theme-style="neobrutalism"] .section-head h2,
[data-theme-style="neobrutalism"] h1,
[data-theme-style="neobrutalism"] h2,
[data-theme-style="neobrutalism"] h3,
[data-theme-style="neobrutalism"] h4 {
  color: #000000 !important;
  font-weight: 800 !important;
}

/* Buttons */
[data-theme-style="neobrutalism"] .btn {
  border: 2px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  color: #000000 !important;
}

[data-theme-style="neobrutalism"] .btn:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0px #000000 !important;
}

[data-theme-style="neobrutalism"] .btn.primary {
  background: #ff5b22 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

[data-theme-style="neobrutalism"] .btn.secondary,
[data-theme-style="neobrutalism"] .btn:not(.primary):not(.danger) {
  background: #fef08a !important;
}

/* Inputs, Selects & Forms */
[data-theme-style="neobrutalism"] input,
[data-theme-style="neobrutalism"] textarea,
[data-theme-style="neobrutalism"] select {
  border: 2px solid #000000 !important;
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  font-weight: 600 !important;
}

[data-theme-style="neobrutalism"] input:focus,
[data-theme-style="neobrutalism"] textarea:focus,
[data-theme-style="neobrutalism"] select:focus {
  box-shadow: 4px 4px 0px #000000 !important;
  border-color: #000000 !important;
}

/* Tables & Data Grid */
[data-theme-style="neobrutalism"] .table-wrap {
  border: 2px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}

[data-theme-style="neobrutalism"] table {
  color: #000000 !important;
}

[data-theme-style="neobrutalism"] th {
  background: #fef08a !important;
  color: #000000 !important;
  border-bottom: 2px solid #000000 !important;
  font-weight: 800 !important;
}

[data-theme-style="neobrutalism"] td {
  color: #000000 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

[data-theme-style="neobrutalism"] tr:hover td {
  background: #fef9c3 !important;
}

/* Sidebar Nav Items */
[data-theme-style="neobrutalism"] .nav-item {
  color: #000000 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: 2px solid transparent !important;
}

[data-theme-style="neobrutalism"] .nav-item.active {
  background: #fef08a !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
}

[data-theme-style="neobrutalism"] .nav-item:hover:not(.active) {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
}

/* Badges & Status Pills */
[data-theme-style="neobrutalism"] .owner-badge {
  color: #000000 !important;
  font-weight: 800 !important;
}
[data-theme-style="neobrutalism"] .tenant-chip {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  color: #000000 !important;
  font-weight: 700 !important;
}
[data-theme-style="neobrutalism"] .tenant-chip.active {
  background: #fef08a !important;
  border: 2px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  color: #000000 !important;
  font-weight: 800 !important;
}
[data-theme-style="neobrutalism"] .badge,
[data-theme-style="neobrutalism"] .pill,
[data-theme-style="neobrutalism"] .status-pill,
[data-theme-style="neobrutalism"] .sp-badge {
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  font-weight: 800 !important;
}

[data-theme-style="neobrutalism"] .status-pill.success,
[data-theme-style="neobrutalism"] .status-pill.sukses,
[data-theme-style="neobrutalism"] .status-pill.PAID,
[data-theme-style="neobrutalism"] .badge.ok {
  background: #86efac !important;
  color: #064e3b !important;
}

[data-theme-style="neobrutalism"] .status-pill.pending,
[data-theme-style="neobrutalism"] .status-pill.proses,
[data-theme-style="neobrutalism"] .status-pill.PENDING {
  background: #fde047 !important;
  color: #713f12 !important;
}

/* =============================================================
   6. FROSTED GLASSMORPHISM (Aero Glass Kaca Transparan & Blur)
   ============================================================= */
[data-theme-style="glassmorphism"] {
  --bg: #090d1a !important;
  --card: rgba(20, 27, 48, 0.72) !important;
  --panel: rgba(20, 27, 48, 0.72) !important;
  --panel2: rgba(30, 41, 69, 0.8) !important;
  --sidebar-bg: rgba(13, 18, 33, 0.85) !important;
  --sidebar: rgba(13, 18, 33, 0.85) !important;
  --line: rgba(255, 255, 255, 0.12) !important;
  --border: rgba(255, 255, 255, 0.12) !important;
  --primary: #38bdf8 !important;
  --primary-hover: #0ea5e9 !important;
  --primary-dark: #0284c7 !important;
  --primary2: #818cf8 !important;
  --text: #f8fafc !important;
  --muted: #94a3b8 !important;
  --input-bg: rgba(10, 14, 26, 0.65) !important;
  --btn-bg: rgba(255, 255, 255, 0.08) !important;
  --btn-hover: rgba(255, 255, 255, 0.15) !important;
  --ok: #34d399 !important;
  --ok-text: #34d399 !important;
  --dark: #090d1a !important;
  --dark2: #111728 !important;
}

[data-theme-style="glassmorphism"] body {
  background-color: #090d1a !important;
  background-image:
    radial-gradient(at 10% 20%, rgba(56, 189, 248, 0.14) 0px, transparent 55%),
    radial-gradient(at 90% 80%, rgba(168, 85, 247, 0.14) 0px, transparent 55%) !important;
  background-attachment: fixed !important;
  color: #f8fafc !important;
}

[data-theme-style="glassmorphism"] .nav,
[data-theme-style="glassmorphism"] .topbar,
[data-theme-style="glassmorphism"] .mobile-bar {
  background: rgba(13, 18, 33, 0.8) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme-style="glassmorphism"] .card,
[data-theme-style="glassmorphism"] .panel,
[data-theme-style="glassmorphism"] .feature,
[data-theme-style="glassmorphism"] .sidebar,
[data-theme-style="glassmorphism"] .auth-card,
[data-theme-style="glassmorphism"] .login-card,
[data-theme-style="glassmorphism"] .modal-card,
[data-theme-style="glassmorphism"] .table-wrap,
[data-theme-style="glassmorphism"] .code-panel,
[data-theme-style="glassmorphism"] .stats-grid > div,
[data-theme-style="glassmorphism"] .steps li {
  background: rgba(20, 27, 48, 0.72) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  color: #f8fafc !important;
}

[data-theme-style="glassmorphism"] .section.alt {
  background: rgba(13, 18, 33, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme-style="glassmorphism"] .section-head h2,
[data-theme-style="glassmorphism"] h1,
[data-theme-style="glassmorphism"] h2,
[data-theme-style="glassmorphism"] h3 {
  color: #f8fafc !important;
}

[data-theme-style="glassmorphism"] .btn.primary {
  background: linear-gradient(135deg, #38bdf8, #818cf8) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.35) !important;
}

/* =============================================================
   7. DEFAULT THEME (MuraPay Classic)
   ============================================================= */
[data-theme-style="default"] {
  /* Mengikuti styling native tanpa override */
}

/* =============================================================
   HIDE DARK/LIGHT TOGGLE BUTTON FOR ALL CUSTOM THEMES
   Hanya tampil ketika tema yang aktif adalah 'default'
   ============================================================= */
html:not([data-theme-style="default"]) .theme-btn {
  display: none !important;
}

/* =============================================================
   ADAPTIVE LOGO ENGINE (Otomatis Menyesuaikan Latar Belakang)
   - Latar Gelap : Logo Putih Cemerlang (White)
   - Latar Terang: Logo Hitam Solid & Presisi (Black)
   ============================================================= */
.brand-logo,
.admin-logo,
.docs-logo,
#auth-logo,
#side-logo {
  transition: filter 0.25s ease, opacity 0.25s ease;
}

/* 1. TEMA TERANG: NORDIC & NEO-BRUTALISM -> LOGO MUTLAK HITAM PEKAT */
html[data-theme-style="nordic"] img.brand-logo,
html[data-theme-style="nordic"] img.admin-logo,
html[data-theme-style="nordic"] img.docs-logo,
html[data-theme-style="nordic"] #auth-logo,
html[data-theme-style="nordic"] #side-logo,
html[data-theme-style="nordic"] .brand-title img,
html[data-theme-style="nordic"] .side-brand img,
html[data-theme-style="nordic"] .brand img,
html[data-theme-style="neobrutalism"] img.brand-logo,
html[data-theme-style="neobrutalism"] img.admin-logo,
html[data-theme-style="neobrutalism"] img.docs-logo,
html[data-theme-style="neobrutalism"] #auth-logo,
html[data-theme-style="neobrutalism"] #side-logo,
html[data-theme-style="neobrutalism"] .brand-title img,
html[data-theme-style="neobrutalism"] .side-brand img,
html[data-theme-style="neobrutalism"] .brand img,
html[data-theme-brightness="light"] img.brand-logo:not(.footer-logo),
html[data-theme-brightness="light"] img.admin-logo,
html[data-theme-brightness="light"] img.docs-logo,
html[data-theme-brightness="light"] #auth-logo,
html[data-theme-brightness="light"] #side-logo,
html[data-theme-brightness="light"] .side-brand img,
html[data-theme-brightness="light"] .brand img {
  filter: brightness(0) saturate(100%) contrast(200%) !important;
  -webkit-filter: brightness(0) saturate(100%) contrast(200%) !important;
}

/* 2. MODE TERANG MANUAL PADA TEMA DEFAULT SAJA */
html[data-theme-style="default"][data-theme="light"] img.brand-logo.side,
html[data-theme-style="default"][data-theme="light"] #side-logo,
html[data-theme-style="default"][data-theme="light"] img.admin-logo,
html[data-theme-style="default"][data-theme="light"] #auth-logo {
  filter: brightness(0) saturate(100%) contrast(200%) !important;
  -webkit-filter: brightness(0) saturate(100%) contrast(200%) !important;
}

/* 3. FOOTER LANDING PAGE: SELALU BERLATAR GELAP -> LOGO SELALU PUTIH */
.footer .brand-logo,
.footer .brand-logo.sm {
  filter: none !important;
  -webkit-filter: none !important;
}

/* 4. TEMA GELAP MURNI: LOGO PUTIH CEMERLANG */
html[data-theme-style="obsidian"] img.brand-logo,
html[data-theme-style="obsidian"] img.admin-logo,
html[data-theme-style="obsidian"] img.docs-logo,
html[data-theme-style="emerald"] img.brand-logo,
html[data-theme-style="emerald"] img.admin-logo,
html[data-theme-style="emerald"] img.docs-logo,
html[data-theme-style="sunset"] img.brand-logo,
html[data-theme-style="sunset"] img.admin-logo,
html[data-theme-style="sunset"] img.docs-logo,
html[data-theme-style="glassmorphism"] img.brand-logo,
html[data-theme-style="glassmorphism"] img.admin-logo,
html[data-theme-style="glassmorphism"] img.docs-logo,
html[data-theme-style="default"][data-theme="dark"] img.brand-logo.side,
html[data-theme-style="default"][data-theme="dark"] #side-logo,
html[data-theme-style="default"][data-theme="dark"] img.admin-logo {
  filter: none !important;
  -webkit-filter: none !important;
}

/* =============================================================
   5. MOBILE / HP ENHANCEMENTS FOR ALL THEMES
   ============================================================= */
@media (max-width: 920px) {
  /* 1. Neo-Brutalism Mobile */
  [data-theme-style="neobrutalism"] .sidebar {
    background: #fffbeb !important;
    border-right: 3px solid #000000 !important;
    box-shadow: 10px 0 0px #000000 !important;
  }
  [data-theme-style="neobrutalism"] .menu-toggle,
  [data-theme-style="neobrutalism"] .nav-toggle {
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    box-shadow: 2px 2px 0px #000000 !important;
    color: #000000 !important;
  }
  [data-theme-style="neobrutalism"] .nav-toggle[aria-expanded="true"],
  [data-theme-style="neobrutalism"] .nav-toggle:active {
    background: #fef08a !important;
  }
  [data-theme-style="neobrutalism"] .nav-links {
    background: #fef08a !important;
    border-bottom: 3px solid #000000 !important;
    border-left: 2px solid #000000 !important;
    border-right: 2px solid #000000 !important;
    box-shadow: 0 10px 0px #000000 !important;
  }
  [data-theme-style="neobrutalism"] .nav-links > a:not(.btn) {
    color: #000000 !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    border-bottom: 2px solid #000000 !important;
    padding: 12px 10px !important;
  }
  [data-theme-style="neobrutalism"] .nav-links > a:not(.btn):hover {
    background: #ffffff !important;
    color: #000000 !important;
  }
  [data-theme-style="neobrutalism"] .nav-links .btn.ghost {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    box-shadow: 2px 2px 0px #000000 !important;
    font-weight: 800 !important;
  }
  [data-theme-style="neobrutalism"] .nav-links .btn.primary {
    background: #ff5b22 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
    box-shadow: 2px 2px 0px #000000 !important;
    font-weight: 800 !important;
  }
  [data-theme-style="neobrutalism"] .auth-card,
  [data-theme-style="neobrutalism"] .login-card,
  [data-theme-style="neobrutalism"] .modal-card {
    box-shadow: 3px 3px 0px #000000 !important;
  }
  [data-theme-style="neobrutalism"] .table-wrap {
    box-shadow: 3px 3px 0px #000000 !important;
  }

  /* 2. Nordic Mobile */
  [data-theme-style="nordic"] .sidebar {
    background: #ffffff !important;
    box-shadow: 8px 0 25px rgba(0, 0, 0, 0.1) !important;
  }
  [data-theme-style="nordic"] .menu-toggle,
  [data-theme-style="nordic"] .nav-toggle {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
  }
  [data-theme-style="nordic"] .nav-links {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08) !important;
  }
  [data-theme-style="nordic"] .nav-links > a:not(.btn) {
    color: #0f172a !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 12px 10px !important;
  }
  [data-theme-style="nordic"] .nav-links > a:not(.btn):hover {
    color: #4f46e5 !important;
    background: #f8fafc !important;
  }
  [data-theme-style="nordic"] .nav-links .btn.ghost {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
  }

  /* 3. Obsidian Mobile */
  [data-theme-style="obsidian"] .sidebar {
    background: #0b0e17 !important;
    border-right: 1px solid #1e2638 !important;
    box-shadow: 8px 0 30px rgba(0, 240, 255, 0.1) !important;
  }
  [data-theme-style="obsidian"] .menu-toggle,
  [data-theme-style="obsidian"] .nav-toggle {
    background: #0f121c !important;
    border: 1px solid #1e2638 !important;
    color: #f1f5f9 !important;
  }
  [data-theme-style="obsidian"] .nav-links {
    background: #0b0e17 !important;
    border-bottom: 1px solid #1e2638 !important;
    box-shadow: 0 16px 36px rgba(0, 240, 255, 0.08) !important;
  }
  [data-theme-style="obsidian"] .nav-links > a:not(.btn) {
    color: #f1f5f9 !important;
    border-bottom: 1px solid #151a27 !important;
    padding: 12px 10px !important;
  }
  [data-theme-style="obsidian"] .nav-links > a:not(.btn):hover {
    color: #00f0ff !important;
  }
  [data-theme-style="obsidian"] .nav-links .btn.ghost {
    background: #151a27 !important;
    border-color: #1e2638 !important;
    color: #f1f5f9 !important;
  }

  /* 4. Emerald Mobile */
  [data-theme-style="emerald"] .sidebar {
    background: #081d18 !important;
    border-right: 1px solid #164337 !important;
    box-shadow: 8px 0 30px rgba(16, 185, 129, 0.1) !important;
  }
  [data-theme-style="emerald"] .menu-toggle,
  [data-theme-style="emerald"] .nav-toggle {
    background: #0b241e !important;
    border: 1px solid #164337 !important;
    color: #ecfdf5 !important;
  }
  [data-theme-style="emerald"] .nav-links {
    background: #081d18 !important;
    border-bottom: 1px solid #164337 !important;
    box-shadow: 0 16px 36px rgba(16, 185, 129, 0.08) !important;
  }
  [data-theme-style="emerald"] .nav-links > a:not(.btn) {
    color: #ecfdf5 !important;
    border-bottom: 1px solid #10332b !important;
    padding: 12px 10px !important;
  }
  [data-theme-style="emerald"] .nav-links > a:not(.btn):hover {
    color: #34d399 !important;
  }
  [data-theme-style="emerald"] .nav-links .btn.ghost {
    background: #10332b !important;
    border-color: #164337 !important;
    color: #ecfdf5 !important;
  }

  /* 5. Sunset Mobile */
  [data-theme-style="sunset"] .sidebar {
    background: #0e1422 !important;
    border-right: 1px solid #243049 !important;
    box-shadow: 8px 0 30px rgba(255, 87, 34, 0.1) !important;
  }
  [data-theme-style="sunset"] .menu-toggle,
  [data-theme-style="sunset"] .nav-toggle {
    background: #131929 !important;
    border: 1px solid #243049 !important;
    color: #f8fafc !important;
  }
  [data-theme-style="sunset"] .nav-links {
    background: #0e1422 !important;
    border-bottom: 1px solid #243049 !important;
    box-shadow: 0 16px 36px rgba(255, 87, 34, 0.08) !important;
  }
  [data-theme-style="sunset"] .nav-links > a:not(.btn) {
    color: #f8fafc !important;
    border-bottom: 1px solid #1b2338 !important;
    padding: 12px 10px !important;
  }
  [data-theme-style="sunset"] .nav-links > a:not(.btn):hover {
    color: #ff7043 !important;
  }
  [data-theme-style="sunset"] .nav-links .btn.ghost {
    background: #1b2338 !important;
    border-color: #243049 !important;
    color: #f8fafc !important;
  }

  /* 6. Glassmorphism Mobile */
  [data-theme-style="glassmorphism"] .sidebar {
    background: rgba(13, 18, 33, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  }
  [data-theme-style="glassmorphism"] .menu-toggle,
  [data-theme-style="glassmorphism"] .nav-toggle {
    background: rgba(20, 27, 48, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
  }
  [data-theme-style="glassmorphism"] .nav-links {
    background: rgba(13, 18, 33, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4) !important;
  }
  [data-theme-style="glassmorphism"] .nav-links > a:not(.btn) {
    color: #f8fafc !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 12px 10px !important;
  }
  [data-theme-style="glassmorphism"] .nav-links > a:not(.btn):hover {
    color: #38bdf8 !important;
  }
  [data-theme-style="glassmorphism"] .nav-links .btn.ghost {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
  }
}

/* =============================================================
   6. DOCUMENTATION (/docs) THEME ENGINE FOR ALL 7 THEMES
   ============================================================= */

/* --- Docs: Neo-Brutalism Tech --- */
[data-theme-style="neobrutalism"] .mobile-bar {
  background: #fef08a !important;
  border-bottom: 3px solid #000000 !important;
}
[data-theme-style="neobrutalism"] .mobile-portal-link {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  color: #000000 !important;
  font-weight: 800 !important;
}
[data-theme-style="neobrutalism"] .sidebar-close {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  color: #000000 !important;
}
[data-theme-style="neobrutalism"] .side-header {
  border-bottom: 2px solid #000000 !important;
}
[data-theme-style="neobrutalism"] .side-nav a {
  color: #000000 !important;
  font-weight: 700 !important;
  border-left: 3px solid transparent !important;
}
[data-theme-style="neobrutalism"] .side-nav a:hover {
  background: #fef08a !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
}
[data-theme-style="neobrutalism"] .side-nav a.active {
  background: #fef08a !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  font-weight: 800 !important;
}
[data-theme-style="neobrutalism"] .nav-group {
  color: #000000 !important;
  font-weight: 800 !important;
  border-bottom: 2px solid #000000 !important;
  padding-bottom: 4px;
}
[data-theme-style="neobrutalism"] .doc-section > p {
  color: #000000 !important;
  font-weight: 500 !important;
}
[data-theme-style="neobrutalism"] .info-card {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
}
[data-theme-style="neobrutalism"] .info-card h3 {
  color: #000000 !important;
  font-weight: 800 !important;
}
[data-theme-style="neobrutalism"] .info-card p {
  color: #1f2937 !important;
}
[data-theme-style="neobrutalism"] .endpoint {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
}
[data-theme-style="neobrutalism"] .endpoint code {
  color: #000000 !important;
  font-weight: 700 !important;
}
[data-theme-style="neobrutalism"] .method {
  border: 1px solid #000000 !important;
  box-shadow: 1px 1px 0px #000000 !important;
  color: #000000 !important;
  font-weight: 800 !important;
}
[data-theme-style="neobrutalism"] .method.post {
  background: #86efac !important;
}
[data-theme-style="neobrutalism"] .method.get {
  background: #93c5fd !important;
}
[data-theme-style="neobrutalism"] .code-block {
  border: 2px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  background: #18181b !important;
}
[data-theme-style="neobrutalism"] .code-head {
  background: #fef08a !important;
  color: #000000 !important;
  font-weight: 800 !important;
  border-bottom: 2px solid #000000 !important;
}
[data-theme-style="neobrutalism"] .code-block pre {
  color: #fef08a !important;
}
[data-theme-style="neobrutalism"] .base-box {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
}
[data-theme-style="neobrutalism"] .base-box code {
  color: #15803d !important;
  font-weight: 700 !important;
}
[data-theme-style="neobrutalism"] .base-box .label {
  color: #000000 !important;
  font-weight: 800 !important;
}
[data-theme-style="neobrutalism"] .warn {
  background: #fef08a !important;
  border: 2px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  color: #000000 !important;
}
[data-theme-style="neobrutalism"] .note {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  color: #000000 !important;
}
[data-theme-style="neobrutalism"] .auth-panel {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  color: #000000 !important;
}
[data-theme-style="neobrutalism"] .auth-panel.ok {
  background: #dcfce7 !important;
  border: 2px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
}
[data-theme-style="neobrutalism"] .steps {
  color: #1f2937 !important;
}
[data-theme-style="neobrutalism"] .steps a {
  color: #ff5b22 !important;
  font-weight: 700 !important;
}
[data-theme-style="neobrutalism"] .table-wrap {
  border: 2px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  background: #ffffff !important;
}
[data-theme-style="neobrutalism"] table th {
  background: #fef08a !important;
  color: #000000 !important;
  border-bottom: 2px solid #000000 !important;
  font-weight: 800 !important;
}
[data-theme-style="neobrutalism"] table td {
  color: #000000 !important;
  border-bottom: 1px solid #000000 !important;
}
[data-theme-style="neobrutalism"] td code {
  background: #fef08a !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  font-weight: 600 !important;
}
[data-theme-style="neobrutalism"] .req {
  background: #fecaca !important;
  color: #991b1b !important;
  border: 1px solid #000000 !important;
  font-weight: 800 !important;
}
[data-theme-style="neobrutalism"] .pill {
  background: #fef08a !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  color: #000000 !important;
  font-weight: 800 !important;
}
[data-theme-style="neobrutalism"] code:not(pre code) {
  background: #fef08a;
  border: 1px solid #000000;
  color: #000000;
}

/* --- Docs: Clean Nordic Minimalist --- */
[data-theme-style="nordic"] .mobile-bar {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
[data-theme-style="nordic"] .mobile-portal-link,
[data-theme-style="nordic"] .sidebar-close {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
[data-theme-style="nordic"] .side-header {
  border-bottom: 1px solid #e2e8f0 !important;
}
[data-theme-style="nordic"] .side-nav a {
  color: #64748b !important;
}
[data-theme-style="nordic"] .side-nav a:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
[data-theme-style="nordic"] .side-nav a.active {
  background: rgba(79, 70, 229, 0.08) !important;
  color: #4f46e5 !important;
  border-left-color: #4f46e5 !important;
  font-weight: 700 !important;
}
[data-theme-style="nordic"] .nav-group {
  color: #475569 !important;
}
[data-theme-style="nordic"] .doc-section > p {
  color: #334155 !important;
}
[data-theme-style="nordic"] .info-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
[data-theme-style="nordic"] .info-card h3 {
  color: #4f46e5 !important;
}
[data-theme-style="nordic"] .info-card p {
  color: #64748b !important;
}
[data-theme-style="nordic"] .endpoint {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}
[data-theme-style="nordic"] .endpoint code {
  color: #0f172a !important;
}
[data-theme-style="nordic"] .base-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}
[data-theme-style="nordic"] .base-box code {
  color: #059669 !important;
  font-weight: 600 !important;
}
[data-theme-style="nordic"] .warn {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}
[data-theme-style="nordic"] .note,
[data-theme-style="nordic"] .auth-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
[data-theme-style="nordic"] .steps {
  color: #475569 !important;
}
[data-theme-style="nordic"] .table-wrap {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
[data-theme-style="nordic"] table th {
  background: #f8fafc !important;
  color: #475569 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
[data-theme-style="nordic"] table td {
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
[data-theme-style="nordic"] td code {
  background: #f1f5f9 !important;
  color: #4f46e5 !important;
  border: 1px solid #e2e8f0 !important;
}
[data-theme-style="nordic"] .pill {
  background: rgba(79, 70, 229, 0.08) !important;
  border-color: rgba(79, 70, 229, 0.25) !important;
  color: #4f46e5 !important;
}
[data-theme-style="nordic"] code:not(pre code) {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}

/* --- Docs: Midnight Obsidian --- */
[data-theme-style="obsidian"] .side-nav a.active {
  background: rgba(0, 240, 255, 0.12) !important;
  color: #00f0ff !important;
  border-left-color: #00f0ff !important;
}
[data-theme-style="obsidian"] .pill {
  background: rgba(0, 240, 255, 0.12) !important;
  border-color: rgba(0, 240, 255, 0.35) !important;
  color: #00f0ff !important;
}
[data-theme-style="obsidian"] .info-card h3 {
  color: #00f0ff !important;
}
[data-theme-style="obsidian"] .base-box code {
  color: #00f0ff !important;
}
[data-theme-style="obsidian"] .endpoint {
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.04) !important;
}
[data-theme-style="obsidian"] .side-header {
  border-bottom-color: #1e2638 !important;
}
[data-theme-style="obsidian"] .sidebar-close,
[data-theme-style="obsidian"] .mobile-portal-link {
  background: #151a27 !important;
  border-color: #1e2638 !important;
  color: #f1f5f9 !important;
}

/* --- Docs: Luxury Emerald --- */
[data-theme-style="emerald"] .side-nav a.active {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #34d399 !important;
  border-left-color: #10b981 !important;
}
[data-theme-style="emerald"] .pill {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}
[data-theme-style="emerald"] .info-card h3 {
  color: #34d399 !important;
}
[data-theme-style="emerald"] .base-box code {
  color: #34d399 !important;
}
[data-theme-style="emerald"] .side-header {
  border-bottom-color: #164337 !important;
}
[data-theme-style="emerald"] .sidebar-close,
[data-theme-style="emerald"] .mobile-portal-link {
  background: #10332b !important;
  border-color: #164337 !important;
  color: #ecfdf5 !important;
}

/* --- Docs: Sunset Flare --- */
[data-theme-style="sunset"] .side-nav a.active {
  background: rgba(255, 87, 34, 0.14) !important;
  color: #ff7043 !important;
  border-left-color: #ff5722 !important;
}
[data-theme-style="sunset"] .pill {
  background: rgba(255, 87, 34, 0.14) !important;
  border-color: rgba(255, 87, 34, 0.35) !important;
  color: #ff7043 !important;
}
[data-theme-style="sunset"] .info-card h3 {
  color: #ff7043 !important;
}
[data-theme-style="sunset"] .base-box code {
  color: #ff8a65 !important;
}
[data-theme-style="sunset"] .side-header {
  border-bottom-color: #243049 !important;
}
[data-theme-style="sunset"] .sidebar-close,
[data-theme-style="sunset"] .mobile-portal-link {
  background: #1b2338 !important;
  border-color: #243049 !important;
  color: #f8fafc !important;
}

/* --- Docs: Frosted Glassmorphism --- */
[data-theme-style="glassmorphism"] .side-nav a.active {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border-left-color: #38bdf8 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
[data-theme-style="glassmorphism"] .pill {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  color: #38bdf8 !important;
}
[data-theme-style="glassmorphism"] .info-card h3 {
  color: #38bdf8 !important;
}
[data-theme-style="glassmorphism"] .base-box code {
  color: #38bdf8 !important;
}
[data-theme-style="glassmorphism"] .side-header {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme-style="glassmorphism"] .sidebar-close,
[data-theme-style="glassmorphism"] .mobile-portal-link {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
}
[data-theme-style="glassmorphism"] .endpoint,
[data-theme-style="glassmorphism"] .base-box,
[data-theme-style="glassmorphism"] .note,
[data-theme-style="glassmorphism"] .warn,
[data-theme-style="glassmorphism"] .auth-panel {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}