/* ==========================================================================
   GLOBAL ZERO-FLICKER THEME ENGINE (INSTANT DOM PAINT)
   ========================================================================== */
html[data-theme="light"],
html.light {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  color-scheme: light;
}

html[data-theme="dark"],
html.dark {
  background-color: #0c0c0c !important;
  color: #f8fafc !important;
  color-scheme: dark;
}

html[data-theme="light"] body,
html.light body,
html[data-theme="light"] #body-root,
html.light #body-root {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html[data-theme="dark"] body,
html.dark body,
html[data-theme="dark"] #body-root,
html.dark #body-root {
  background-color: #0c0c0c !important;
  color: #f8fafc !important;
}

html[data-theme="light"] header,
html.light header {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom-color: #e2e8f0 !important;
}

html[data-theme="dark"] header,
html.dark header {
  background-color: rgba(12, 12, 12, 0.9) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="light"] aside#admin-sidebar,
html.light aside#admin-sidebar {
  background-color: transparent !important;
}

html[data-theme="light"] .admin-sidebar-box,
html.light .admin-sidebar-box {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* ==========================================================================
   FULL PAGE BALANCED ACCENT GRADIENT (AMBER GOLD & TEAL GLOW)
   ========================================================================== */
.page-ambient-gradient {
  background-color: #090a0d;
  background-image: 
    radial-gradient(ellipse 65% 45% at 20% 0%, rgba(245, 158, 11, 0.11) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 85% 25%, rgba(20, 184, 166, 0.09) 0%, transparent 65%),
    radial-gradient(ellipse 55% 35% at 15% 55%, rgba(245, 158, 11, 0.08) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(20, 184, 166, 0.08) 0%, transparent 65%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(245, 158, 11, 0.09) 0%, transparent 65%),
    linear-gradient(180deg, #0c0d11 0%, #08090c 50%, #050608 100%);
  background-attachment: fixed;
  background-size: 100% 100%;
}

[data-theme="light"] .page-ambient-gradient {
  background-color: #f8fafc;
  background-image: 
    radial-gradient(circle at 20% 10%, rgba(245, 158, 11, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(20, 184, 166, 0.05) 0%, transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  background-attachment: fixed;
}

/* Floating Ambient Glow Orbs - Balanced Accent Layer */
.ambient-glow-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  max-width: 100vw;
  max-height: 100vh;
}

.ambient-glow-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(95px);
  opacity: 0.28;
  will-change: transform;
}

.orb-1 {
  top: -8%;
  left: 15%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.35) 0%, transparent 70%);
}

.orb-2 {
  top: 40%;
  right: -5%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.28) 0%, transparent 70%);
}

.orb-3 {
  bottom: -5%;
  left: 15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, transparent 70%);
}



/* ==========================================================================
   RAMUKATHA AI - MASTER STYLESHEET
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  --bg-primary: #0c0c0c;
  --bg-surface: #161618;
  --bg-surface-elevated: #1e1e24;
  --border-color: rgba(255, 255, 255, 0.1);
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent-amber: #f59e0b;
  --accent-teal: #14b8a6;
  --accent-purple: #f59e0b;
}

[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f1f5f9;
  --border-color: rgba(203, 213, 225, 0.8);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
  width: 100%;
  max-width: 100vw;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
}


.tab-view, #view-home {
  position: relative;
  overflow: hidden;
  width: 100%;
}


/* Glassmorphism Navigation */
.glass-nav {
  background: rgba(12, 12, 12, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

[data-theme="light"] .glass-nav {
  background: rgba(255, 255, 255, 0.9);
}

/* Global Standard Master Navbar Styling (Pixel-Perfect Uniform Height & Theming) */
#navbar {
  height: 4rem !important; /* 64px (h-16) */
  min-height: 4rem !important;
  max-height: 4rem !important;
  display: flex !important;
  align-items: center !important;
}

#navbar .max-w-7xl {
  height: 4rem !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#nav-brand-text {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
}

/* Dynamic Ramukatha Brand Logo (Auto Dark / Light Theme Sync) */
.brand-logo-dark {
  display: block !important;
}
.brand-logo-light {
  display: none !important;
}

[data-theme="light"] .brand-logo-dark,
html.light .brand-logo-dark,
html[data-theme="light"] .brand-logo-dark,
body[data-theme="light"] .brand-logo-dark {
  display: none !important;
}

[data-theme="light"] .brand-logo-light,
html.light .brand-logo-light,
html[data-theme="light"] .brand-logo-light,
body[data-theme="light"] .brand-logo-light {
  display: block !important;
}

.public-nav-item {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

[data-theme="light"] #navbar {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] #nav-brand-text {
  color: #0f172a !important;
}

[data-theme="light"] .public-nav-item:not(.text-amber-500) {
  color: #475569 !important;
}

[data-theme="light"] .public-nav-item:not(.text-amber-500):hover {
  color: #0f172a !important;
}

[data-theme="light"] #lang-switch {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] #theme-toggle {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] #nav-login-btn {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] #mobile-menu-btn {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] #mobile-menu {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .public-mobile-nav-item:not(.text-amber-500) {
  color: #475569 !important;
}

[data-theme="light"] #mobile-login-btn {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Custom Scrollbars */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 158, 11, 0.5);
}

/* Hero & Background Visuals */
.hero-glow-dark {
  background-image: radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.15), transparent 50%),
                    radial-gradient(circle at 100% 20%, rgba(20, 184, 166, 0.1), transparent 40%),
                    radial-gradient(circle at 0% 50%, rgba(245, 158, 11, 0.08), transparent 40%);
}

.ramukatha-gradient {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #14b8a6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glass-card-dark {
  background: rgba(18, 18, 20, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* ==========================================================================
   3D CAROUSEL (VERTICAL 9:16)
   ========================================================================== */
.carousel-track {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 560px;
    perspective: 1200px;
}

.carousel-card {
    position: absolute;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 24px;
    overflow: hidden;
    background: #1a1a1e;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    opacity: 0;
    z-index: 0;
    transform-style: preserve-3d;
    aspect-ratio: 9 / 16;
}

.carousel-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.carousel-card .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%);
    border-radius: inherit;
}

.carousel-card .content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    color: white;
    z-index: 10;
}

.carousel-card .badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    color: white;
    z-index: 10;
}

.carousel-card .time-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    z-index: 10;
}

.carousel-card .play-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 10;
    transition: all 0.3s ease;
}

.carousel-card.active {
    opacity: 1;
    z-index: 5;
    transform: translateX(0) scale(1) translateZ(0);
    width: 300px;
    height: 533px;
    border: 1px solid rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.25), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.carousel-card.prev-1 {
    opacity: 0.85;
    z-index: 4;
    transform: translateX(-105%) scale(0.85) translateZ(-100px) rotateY(15deg);
    width: 250px;
    height: 444px;
    pointer-events: auto !important;
    cursor: pointer;
}

.carousel-card.next-1 {
    opacity: 0.85;
    z-index: 4;
    transform: translateX(105%) scale(0.85) translateZ(-100px) rotateY(-15deg);
    width: 250px;
    height: 444px;
    pointer-events: auto !important;
    cursor: pointer;
}

.carousel-card.prev-2 {
    opacity: 0.4;
    z-index: 3;
    transform: translateX(-195%) scale(0.7) translateZ(-200px) rotateY(25deg);
    width: 210px;
    height: 373px;
    pointer-events: auto !important;
    cursor: pointer;
}

.carousel-card.next-2 {
    opacity: 0.4;
    z-index: 3;
    transform: translateX(195%) scale(0.7) translateZ(-200px) rotateY(-25deg);
    width: 210px;
    height: 373px;
    pointer-events: auto !important;
    cursor: pointer;
}

.carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
}

.carousel-nav-btn:hover {
    background: rgba(245, 158, 11, 0.3);
    border-color: #f59e0b;
    color: #f59e0b;
    transform: translateY(-50%) scale(1.1);
}

.carousel-nav-btn.left { left: 20px; }
.carousel-nav-btn.right { right: 20px; }

@media (max-width: 1024px) {
    .carousel-track { height: 480px; }
    .carousel-card.active { width: 250px; height: 444px; }
    .carousel-card.prev-1 { width: 200px; height: 355px; transform: translateX(-90%) scale(0.85) translateZ(-100px) rotateY(15deg); }
    .carousel-card.next-1 { width: 200px; height: 355px; transform: translateX(90%) scale(0.85) translateZ(-100px) rotateY(-15deg); }
    .carousel-card.prev-2, .carousel-card.next-2 { opacity: 0; pointer-events: none; }
}

@media (max-width: 768px) {
    .carousel-track { height: 450px; }
    .carousel-card.active { width: 236px; height: 420px; }
    .carousel-card.prev-1, .carousel-card.next-1 { opacity: 0; pointer-events: none; }
    .carousel-nav-btn.left { left: 10px; }
    .carousel-nav-btn.right { right: 10px; }
}

.hero-flame-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  overflow: hidden;
  max-width: 100%;
}

.hero-flame-overlay svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}


/* Sidebar Sub-Menu Navigation Items */
.sidebar-sub-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}
.sidebar-sub-item:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.sidebar-sub-item.active {
  color: #ffffff;
  background: linear-gradient(to right, rgba(245, 158, 11, 0.2), rgba(20, 184, 166, 0.15));
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

/* Accordion Component */
.accordion-item {
  border-radius: 0.875rem;
  background-color: rgba(22, 22, 24, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: all 0.2s ease;
}
.accordion-item:hover {
  border-color: rgba(245, 158, 11, 0.4);
}
.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #e2e8f0;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}
.accordion-header:hover {
  background-color: rgba(255, 255, 255, 0.03);
}
.accordion-content {
  display: none;
  padding: 0.25rem 0.625rem 0.625rem 0.625rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.accordion-item.expanded .accordion-content {
  display: block;
}
.accordion-item.expanded .accordion-chevron {
  transform: rotate(180deg);
}

/* Chapter Navigation Items */
.chapter-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.625rem;
  font-size: 0.7rem;
  color: #94a3b8;
  font-weight: 500;
  transition: all 0.15s ease;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
}
.chapter-nav-item:hover {
  color: #f8fafc;
  background-color: rgba(255, 255, 255, 0.04);
}
.chapter-nav-item.active {
  color: #ffffff;
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
  font-weight: 700;
}

/* Hide scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }


/* ==========================================================================
   SIGNATURE DUAL-TONE GRADIENT (AMBER GOLD & TEAL)
   ========================================================================== */
.ramukatha-gradient {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 45%, #2dd4bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

[data-theme="light"] .ramukatha-gradient {
  background: linear-gradient(135deg, #d97706 0%, #b45309 45%, #0f766e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

/* Light Theme Typography & High-Contrast Readability */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] .text-white,
[data-theme="light"] .hero-title-main {
  color: #0f172a !important;
}

[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-slate-400 {
  color: #475569 !important;
}

[data-theme="light"] .text-slate-200 {
  color: #1e293b !important;
}

[data-theme="light"] .glass-card-dark,
[data-theme="light"] .card-item {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .glass-nav {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: rgba(226, 232, 240, 0.8) !important;
}

[data-theme="light"] #navbar {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: rgba(226, 232, 240, 0.8) !important;
}

[data-theme="light"] #nav-brand-text {
  color: #0f172a !important;
}

[data-theme="light"] footer {
  background-color: #f1f5f9 !important;
  border-top-color: rgba(226, 232, 240, 0.9) !important;
}


/* ==========================================================================
   COMPREHENSIVE LIGHT MODE RULES
   ========================================================================== */
[data-theme="light"] body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* Navbar & Header in Light Mode */
[data-theme="light"] #navbar,
[data-theme="light"] header {
  background-color: rgba(255, 255, 255, 0.94) !important;
  border-bottom-color: rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] #nav-brand-text,
[data-theme="light"] .public-nav-item:not(.text-amber-500) {
  color: #0f172a !important;
}

[data-theme="light"] .public-nav-item:hover {
  color: #f59e0b !important;
}

/* Theme Toggle Button & Moon Icon in Light Mode */
[data-theme="light"] #theme-toggle {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] #theme-icon,
[data-theme="light"] .fa-moon {
  color: #0f172a !important;
}

/* Language Switcher in Light Mode */
[data-theme="light"] #lang-switch,
[data-theme="light"] #lang-switch-member,
[data-theme="light"] #lang-switch-admin {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] #lang-id:not(.bg-amber-500),
[data-theme="light"] #lang-en:not(.bg-amber-500),
[data-theme="light"] #lang-id-member:not(.bg-amber-500),
[data-theme="light"] #lang-en-member:not(.bg-amber-500),
[data-theme="light"] #lang-id-admin:not(.bg-amber-500),
[data-theme="light"] #lang-en-admin:not(.bg-amber-500) {
  color: #64748b !important;
}

/* CMS Content Language Bar & Switcher Dual Mode */
[data-theme="light"] .cms-lang-bar {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .cms-lang-pill-container {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .cms-lang-pill-container button:not(.bg-amber-500) {
  color: #475569 !important;
}

[data-theme="light"] .cms-lang-pill-container button:not(.bg-amber-500):hover {
  color: #0f172a !important;
}

[data-theme="light"] .cms-lang-badge-id {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #b45309 !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

[data-theme="light"] .cms-lang-badge-en {
  background-color: rgba(20, 184, 166, 0.15) !important;
  color: #0f766e !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
}

[data-theme="dark"] .cms-lang-bar {
  background-color: #141417 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .cms-lang-pill-container {
  background-color: #09090b !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .cms-lang-pill-container button:not(.bg-amber-500) {
  color: #94a3b8 !important;
}

[data-theme="dark"] .cms-lang-pill-container button:not(.bg-amber-500):hover {
  color: #ffffff !important;
}

/* ==========================================================================
   UNIVERSAL MODAL & POPUP BACKDROPS (LIGHT & DARK THEMES)
   Ensures ALL modals in Admin & Member have transparent blurred glassmorphism
   backdrops, NEVER turning solid white in light mode!
   ========================================================================== */
[data-theme="light"] .fixed.inset-0[class*="bg-black"],
[data-theme="light"] .fixed.inset-0[class*="bg-slate"],
[data-theme="light"] .fixed.inset-0[class*="bg-gray"],
[data-theme="light"] .fixed.inset-0[class*="backdrop-blur"],
[data-theme="light"] div[id*="modal"][class*="fixed"],
[data-theme="light"] div[id*="modal"].fixed,
[data-theme="light"] div[id$="-modal"].fixed,
[data-theme="light"] div[id*="-modal-"].fixed,
[data-theme="light"] .modal-backdrop,
[data-theme="light"] .modal-backdrop-blur,
[data-theme="light"] .realism-modal-backdrop,
/* Explicit complete list of all modal IDs in Admin & Member */
[data-theme="light"] #model-modal,
[data-theme="light"] #history-modal,
[data-theme="light"] #edit-rate-modal,
[data-theme="light"] #confirm-rate-modal,
[data-theme="light"] #user-profile-modal,
[data-theme="light"] #modal-confirm-adj,
[data-theme="light"] #modal-detail-adj,
[data-theme="light"] #modal-tx-detail,
[data-theme="light"] #modal-pkg-form,
[data-theme="light"] #modal-pkg-delete,
[data-theme="light"] #modal-mark-paid,
[data-theme="light"] #modal-update-status,
[data-theme="light"] #modal-reset-confirm,
[data-theme="light"] #add-account-modal,
[data-theme="light"] #modal-referral-settings,
[data-theme="light"] #add-role-modal,
[data-theme="light"] #edit-menu-modal,
[data-theme="light"] #media-modal,
[data-theme="light"] #solution-modal,
[data-theme="light"] #delete-solution-modal,
[data-theme="light"] #pricing-modal,
[data-theme="light"] #gating-rules-modal,
[data-theme="light"] #unlock-confirm-modal,
[data-theme="light"] #reset-confirm-modal,
[data-theme="light"] #glossary-form-modal,
[data-theme="light"] #delete-confirm-modal,
[data-theme="light"] #troubleshooting-form-modal,
[data-theme="light"] #member-learning-history-modal,
[data-theme="light"] #landing-preview-modal,
[data-theme="light"] #login-modal,
[data-theme="light"] #admin-login-modal,
[data-theme="light"] #order-modal,
[data-theme="light"] #logout-confirm-modal,
[data-theme="light"] #change-pwd-modal,
[data-theme="light"] #forgot-pwd-modal,
[data-theme="light"] #showcase-modal,
[data-theme="light"] #topup-modal,
[data-theme="light"] #confirmation-modal,
[data-theme="light"] #qris-modal,
[data-theme="light"] #search-modal,
[data-theme="light"] #download-guide-modal,
[data-theme="light"] #ramufyp-helper-modal,
[data-theme="light"] #image-lightbox-modal,
[data-theme="light"] #chapter-quiz-gate-modal {
  background-color: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Dark Mode Modal Backdrops */
html[data-theme="dark"] .fixed.inset-0[class*="bg-black"],
html.dark .fixed.inset-0[class*="bg-black"],
html[data-theme="dark"] div[id*="modal"][class*="fixed"],
html.dark div[id*="modal"][class*="fixed"],
html[data-theme="dark"] div[id*="modal"].fixed,
html.dark div[id*="modal"].fixed,
html[data-theme="dark"] div[id$="-modal"].fixed,
html.dark div[id$="-modal"].fixed,
html[data-theme="dark"] #model-modal,
html.dark #model-modal,
html[data-theme="dark"] #history-modal,
html.dark #history-modal {
  background-color: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Modal Cards / Dialog Boxes (Content inside modal) in Light Mode */
[data-theme="light"] #modal-card,
[data-theme="light"] div[id*="modal"].fixed > div,
[data-theme="light"] div[id$="-modal"].fixed > div,
[data-theme="light"] #model-modal > div,
[data-theme="light"] #history-modal > div,
[data-theme="light"] #edit-rate-modal > div,
[data-theme="light"] #confirm-rate-modal > div,
[data-theme="light"] #user-profile-modal > div,
[data-theme="light"] #modal-confirm-adj > div,
[data-theme="light"] #modal-detail-adj > div,
[data-theme="light"] #modal-tx-detail > div,
[data-theme="light"] #modal-pkg-form > div,
[data-theme="light"] #modal-pkg-delete > div,
[data-theme="light"] #modal-mark-paid > div,
[data-theme="light"] #modal-update-status > div,
[data-theme="light"] #modal-reset-confirm > div,
[data-theme="light"] #add-account-modal > div,
[data-theme="light"] #modal-referral-settings > div,
[data-theme="light"] #add-role-modal > div,
[data-theme="light"] #edit-menu-modal > div,
[data-theme="light"] #media-modal > div,
[data-theme="light"] #solution-modal > div,
[data-theme="light"] #delete-solution-modal > div,
[data-theme="light"] #pricing-modal > div,
[data-theme="light"] #gating-rules-modal > div,
[data-theme="light"] #unlock-confirm-modal > div,
[data-theme="light"] #reset-confirm-modal > div,
[data-theme="light"] #glossary-form-modal > div,
[data-theme="light"] #delete-confirm-modal > div,
[data-theme="light"] #troubleshooting-form-modal > div,
[data-theme="light"] #member-learning-history-modal > div,
[data-theme="light"] #landing-preview-modal > div,
[data-theme="light"] #login-modal > div,
[data-theme="light"] #admin-login-modal > div,
[data-theme="light"] #order-modal > div,
[data-theme="light"] #logout-confirm-modal > div,
[data-theme="light"] #change-pwd-modal > div,
[data-theme="light"] #forgot-pwd-modal > div,
[data-theme="light"] #showcase-modal > div,
[data-theme="light"] #topup-modal > div,
[data-theme="light"] #confirmation-modal > div,
[data-theme="light"] #qris-modal > div,
[data-theme="light"] #search-modal > div,
[data-theme="light"] #download-guide-modal > div,
[data-theme="light"] #ramufyp-helper-modal > div,
[data-theme="light"] #image-lightbox-modal > div,
[data-theme="light"] #chapter-quiz-gate-modal > div,
[data-theme="light"] #user-dropdown-menu,
[data-theme="light"] .modal-card,
[data-theme="light"] .modal-card-animated,
[data-theme="light"] .realism-modal-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.2) !important;
  color: #0f172a !important;
}

[data-theme="light"] .password-checklist-box {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .password-checklist-box .text-slate-300,
[data-theme="light"] .password-checklist-box .text-slate-400 {
  color: #475569 !important;
}

[data-theme="light"] .modal-title,
[data-theme="light"] #modal-card h3,
[data-theme="light"] #login-modal h3,
[data-theme="light"] #order-modal h3,
[data-theme="light"] #change-pwd-modal h3,
[data-theme="light"] #forgot-pwd-modal h3,
[data-theme="light"] #user-dropdown-menu .text-white {
  color: #0f172a !important;
}

[data-theme="light"] .modal-desc,
[data-theme="light"] #modal-card p,
[data-theme="light"] #login-modal p,
[data-theme="light"] #order-modal p,
[data-theme="light"] #change-pwd-modal p,
[data-theme="light"] #forgot-pwd-modal p {
  color: #64748b !important;
}

[data-theme="light"] .modal-label,
[data-theme="light"] label {
  color: #334155 !important;
}

/* Inputs & Form Controls in Light Mode */
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] textarea,
[data-theme="light"] select,
[data-theme="light"] .contact-input {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #94a3b8 !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  background-color: #ffffff !important;
  border-color: #f59e0b !important;
}

[data-theme="light"] .fa-envelope,
[data-theme="light"] .fa-lock,
[data-theme="light"] .fa-eye,
[data-theme="light"] .fa-xmark {
  color: #64748b !important;
}

[data-theme="light"] .fa-eye:hover,
[data-theme="light"] .fa-xmark:hover {
  color: #0f172a !important;
}

/* Content Cards & Sections in Light Mode */
[data-theme="light"] .glass-card-dark,
[data-theme="light"] .card-item,
[data-theme="light"] .faq-item {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .card-title,
[data-theme="light"] .section-title,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
  color: #0f172a !important;
}

[data-theme="light"] .card-desc,
[data-theme="light"] .section-desc,
[data-theme="light"] p {
  color: #475569 !important;
}

[data-theme="light"] #hero-desc p {
  color: #334155 !important;
}

[data-theme="light"] footer {
  background-color: #f1f5f9 !important;
  border-top-color: #e2e8f0 !important;
}


/* ==========================================================================
   IMAGE REFERENCE UPLOAD SLOTS VISUAL ENHANCEMENT (DARK & LIGHT MODE)
   ========================================================================== */
.image-ref-slot-box {
  border: 2px dashed rgba(245, 158, 11, 0.45) !important;
  background: rgba(245, 158, 11, 0.05) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-ref-slot-box:hover {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.14) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(245, 158, 11, 0.2) !important;
}

.image-ref-slot-box .slot-icon-wrapper {
  background: rgba(245, 158, 11, 0.15);
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  color: #f59e0b;
  transition: all 0.2s ease;
}

.image-ref-slot-box:hover .slot-icon-wrapper {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #0c0c0c;
  transform: scale(1.08);
}

/* Light Mode Overrides */
[data-theme="light"] .image-ref-slot-box {
  border: 2px dashed rgba(217, 119, 6, 0.6) !important;
  background: rgba(245, 158, 11, 0.08) !important;
}

[data-theme="light"] .image-ref-slot-box:hover {
  border-color: #d97706 !important;
  background: rgba(245, 158, 11, 0.18) !important;
  box-shadow: 0 8px 20px -6px rgba(217, 119, 6, 0.15) !important;
}

[data-theme="light"] .image-ref-slot-box .slot-icon-wrapper {
  background: rgba(245, 158, 11, 0.22);
  border-color: rgba(217, 119, 6, 0.55);
  color: #b45309;
}

[data-theme="light"] .image-ref-slot-box:hover .slot-icon-wrapper {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #ffffff;
}

[data-theme="light"] .slot-sublabel {
  color: #475569 !important;
}


/* ==========================================================================
   ACADEMY STUDIO CARDS (DARK & LIGHT THEME STYLES)
   ========================================================================== */
.academy-card {
  background: rgba(18, 18, 20, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.academy-card-image:hover {
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 20px 40px rgba(245, 158, 11, 0.1);
}
.academy-card-video:hover {
  border-color: rgba(6, 182, 212, 0.5);
  box-shadow: 0 20px 40px rgba(6, 182, 212, 0.1);
}
.academy-card-bundle {
  background: rgba(22, 19, 15, 0.9);
  border-color: #f59e0b;
}
.academy-header-image {
  background: linear-gradient(135deg, rgba(69, 26, 3, 0.45) 0%, rgba(24, 24, 27, 0.8) 50%, rgba(18, 18, 20, 0.95) 100%);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.academy-header-video {
  background: linear-gradient(135deg, rgba(8, 51, 68, 0.45) 0%, rgba(24, 24, 27, 0.8) 50%, rgba(18, 18, 20, 0.95) 100%);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.academy-header-bundle {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.55) 0%, rgba(26, 24, 21, 0.85) 50%, rgba(18, 18, 20, 0.95) 100%);
  border-bottom-color: rgba(245, 158, 11, 0.2);
}
.academy-stat-box {
  background: #0a0a0c;
  border-color: rgba(255, 255, 255, 0.06);
}
.academy-stat-bundle {
  background: rgba(69, 26, 3, 0.25);
  border-color: rgba(245, 158, 11, 0.3);
}
.academy-price-box {
  background: #0a0a0c;
  border-color: rgba(255, 255, 255, 0.06);
}
.academy-price-bundle {
  background: rgba(69, 26, 3, 0.35);
  border-color: rgba(245, 158, 11, 0.3);
}

/* Light Theme overrides for Academy */
[data-theme="light"] .hero-glow-dark {
  background-image: radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.08), transparent 50%),
                    radial-gradient(circle at 100% 20%, rgba(20, 184, 166, 0.06), transparent 40%) !important;
}
[data-theme="light"] .academy-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .academy-card-image:hover {
  border-color: #f59e0b !important;
  box-shadow: 0 20px 40px rgba(245, 158, 11, 0.12) !important;
}
[data-theme="light"] .academy-card-video:hover {
  border-color: #0891b2 !important;
  box-shadow: 0 20px 40px rgba(8, 145, 178, 0.12) !important;
}
[data-theme="light"] .academy-card-bundle {
  background: #ffffff !important;
  border-color: #d97706 !important;
  box-shadow: 0 20px 45px rgba(217, 119, 6, 0.15) !important;
}
[data-theme="light"] .academy-header-image {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 40%, #ffffff 100%) !important;
  border-bottom-color: #fde68a !important;
}
[data-theme="light"] .academy-header-video {
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 40%, #ffffff 100%) !important;
  border-bottom-color: #a5f3fc !important;
}
[data-theme="light"] .academy-header-bundle {
  background: linear-gradient(135deg, #fffbeb 0%, #fde68a 35%, #ecfeff 100%) !important;
  border-bottom-color: #fcd34d !important;
}
[data-theme="light"] .academy-stat-box {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] .academy-stat-bundle {
  background: #fffbeb !important;
  border-color: #fde68a !important;
}
[data-theme="light"] .academy-price-box {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] .academy-price-bundle {
  background: #fffbeb !important;
  border-color: #fde68a !important;
}
[data-theme="light"] .academy-card h2,
[data-theme="light"] .academy-card h3,
[data-theme="light"] .academy-card .card-title {
  color: #0f172a !important;
}
[data-theme="light"] .academy-card p,
[data-theme="light"] .academy-card .card-desc {
  color: #475569 !important;
}
[data-theme="light"] .academy-card ul li {
  color: #334155 !important;
}
[data-theme="light"] .academy-card .price-val {
  color: #0f172a !important;
}
[data-theme="light"] .academy-card .text-slate-400,
[data-theme="light"] .academy-card .text-slate-300,
[data-theme="light"] .academy-card .text-slate-200 {
  color: #475569 !important;
}
[data-theme="light"] .academy-card .border-r {
  border-right-color: #e2e8f0 !important;
}
[data-theme="light"] .academy-card-bundle .border-r {
  border-right-color: #fde68a !important;
}


/* ==========================================================================
   ADMIN DASHBOARD COMPREHENSIVE LIGHT MODE ENGINE
   ========================================================================== */
[data-theme="light"] #admin-sidebar,
[data-theme="light"] aside#admin-sidebar {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] #admin-sidebar .bg-\[\#121214\]\/90,
[data-theme="light"] #admin-sidebar .bg-\[\#121214\]\/60,
[data-theme="light"] #admin-sidebar .admin-sidebar-box {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] #admin-sidebar .sidebar-sub-item {
  color: #475569 !important;
}
[data-theme="light"] #admin-sidebar .sidebar-sub-item:hover {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] #admin-sidebar .sidebar-sub-item.active {
  color: #0f172a !important;
  background: linear-gradient(to right, #fef3c7, #ccfbf1) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.12) !important;
}

[data-theme="light"] .card-item,
[data-theme="light"] .glass-card-dark {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .admin-inner-box,
[data-theme="light"] .bg-\[\#0A0A0C\],
[data-theme="light"] .bg-\[\#121214\],
[data-theme="light"] .bg-\[\#141417\] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] table thead tr {
  border-bottom-color: #e2e8f0 !important;
  color: #64748b !important;
}

[data-theme="light"] table tbody tr {
  border-bottom-color: #f1f5f9 !important;
  color: #334155 !important;
}

[data-theme="light"] table tbody tr:hover {
  background-color: #f8fafc !important;
}

[data-theme="light"] table tbody td.text-white,
[data-theme="light"] table tbody td.font-bold,
[data-theme="light"] table tbody td .text-white {
  color: #0f172a !important;
}

[data-theme="light"] table tbody td .text-slate-300,
[data-theme="light"] table tbody td .text-slate-200 {
  color: #475569 !important;
}

[data-theme="light"] #pricing-modal > div,
[data-theme="light"] #showcase-modal > div,
[data-theme="light"] #glossary-form-modal > div,
[data-theme="light"] #delete-confirm-modal > div {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] #pricing-modal input,
[data-theme="light"] #pricing-modal textarea,
[data-theme="light"] #pricing-modal select,
[data-theme="light"] #showcase-modal input,
[data-theme="light"] #showcase-modal textarea,
[data-theme="light"] #glossary-form-modal input,
[data-theme="light"] #glossary-form-modal textarea,
[data-theme="light"] #glossary-form-modal select {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] #pricing-modal input:focus,
[data-theme="light"] #pricing-modal textarea:focus,
[data-theme="light"] #pricing-modal select:focus,
[data-theme="light"] #showcase-modal input:focus,
[data-theme="light"] #showcase-modal textarea:focus,
[data-theme="light"] #glossary-form-modal input:focus,
[data-theme="light"] #glossary-form-modal textarea:focus,
[data-theme="light"] #glossary-form-modal select:focus {
  background-color: #ffffff !important;
  border-color: #f59e0b !important;
}

[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/5,
[data-theme="light"] .border-white\/15,
[data-theme="light"] .border-white\/20 {
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .divide-white\/5 > * {
  border-color: #f1f5f9 !important;
}

[data-theme="light"] #admin-sidebar-toggle-btn {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] #admin-sidebar-toggle-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* ==========================================================================
   RAMUKATHA MASTER LIGHT THEME ENGINE (MEMBER & STUDIO ECOSYSTEM)
   ========================================================================== */

/* 1. Global Page Background & Variables */
[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f1f5f9;
  --border-color: #e2e8f0;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
}

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

[data-theme="light"] header.glass-nav,
[data-theme="light"] .glass-nav {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

/* 2. Overriding Tailwind Gradients in Light Mode */
[data-theme="light"] .from-gray-900\/90,
[data-theme="light"] .from-gray-900,
[data-theme="light"] .from-gray-950,
[data-theme="light"] .from-gray-950\/90 {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position, 0%) !important;
  --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position, 100%) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

[data-theme="light"] .to-gray-950\/90,
[data-theme="light"] .to-gray-950,
[data-theme="light"] .to-gray-900,
[data-theme="light"] .to-gray-900\/90 {
  --tw-gradient-to: #f8fafc var(--tw-gradient-to-position, 100%) !important;
}

[data-theme="light"] .via-gray-900,
[data-theme="light"] .via-gray-900\/60 {
  --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position, 100%) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #ffffff var(--tw-gradient-via-position, 50%), var(--tw-gradient-to) !important;
}

/* 3. Surface & Card Backgrounds */
[data-theme="light"] .bg-gray-900,
[data-theme="light"] .bg-gray-900\/90,
[data-theme="light"] .bg-gray-900\/80,
[data-theme="light"] .bg-gray-900\/70,
[data-theme="light"] .bg-gray-900\/60,
[data-theme="light"] .bg-gray-900\/50,
[data-theme="light"] .bg-gray-900\/40,
[data-theme="light"] .bg-gray-950,
[data-theme="light"] .bg-gray-950\/95,
[data-theme="light"] .bg-gray-950\/90,
[data-theme="light"] .bg-gray-950\/80,
[data-theme="light"] .bg-gray-950\/70,
[data-theme="light"] .bg-gray-950\/60,
[data-theme="light"] .bg-gray-950\/50,
[data-theme="light"] .bg-gray-950\/40,
[data-theme="light"] .bg-\[\#0c0c0c\],
[data-theme="light"] .bg-\[\#121214\],
[data-theme="light"] .bg-\[\#121214\]\/95,
[data-theme="light"] .bg-\[\#141417\],
[data-theme="light"] .bg-\[\#0b0f19\],
[data-theme="light"] .bg-black:not(.fixed):not([class*="fixed"]):not([class*="inset-0"]):not([id*="modal"]),
[data-theme="light"] .bg-black\/90:not(.fixed):not([class*="fixed"]):not([class*="inset-0"]):not([id*="modal"]),
[data-theme="light"] .bg-black\/85:not(.fixed):not([class*="fixed"]):not([class*="inset-0"]):not([id*="modal"]),
[data-theme="light"] .bg-black\/80:not(.fixed):not([class*="fixed"]):not([class*="inset-0"]):not([id*="modal"]),
[data-theme="light"] .bg-black\/75:not(.fixed):not([class*="fixed"]):not([class*="inset-0"]):not([id*="modal"]),
[data-theme="light"] .bg-black\/70:not(.fixed):not([class*="fixed"]):not([class*="inset-0"]):not([id*="modal"]),
[data-theme="light"] .bg-black\/60:not(.fixed):not([class*="fixed"]):not([class*="inset-0"]):not([id*="modal"]),
[data-theme="light"] .bg-black\/50:not(.fixed):not([class*="fixed"]):not([class*="inset-0"]):not([id*="modal"]),
[data-theme="light"] .bg-black\/40:not(.fixed):not([class*="fixed"]):not([class*="inset-0"]):not([id*="modal"]),
[data-theme="light"] .bg-black\/35:not(.fixed):not([class*="fixed"]):not([class*="inset-0"]):not([id*="modal"]),
[data-theme="light"] .bg-black\/30:not(.fixed):not([class*="fixed"]):not([class*="inset-0"]):not([id*="modal"]) {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .bg-gray-800,
[data-theme="light"] .bg-gray-800\/80,
[data-theme="light"] .bg-gray-800\/60,
[data-theme="light"] .bg-gray-800\/40 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

/* Hover States in Light Mode */
[data-theme="light"] .hover\:bg-gray-800:hover,
[data-theme="light"] .hover\:bg-gray-900:hover,
[data-theme="light"] .hover\:bg-gray-950:hover,
[data-theme="light"] .hover\:bg-white\/10:hover {
  background-color: #f1f5f9 !important;
}

[data-theme="light"] .hover\:bg-amber-900\/40:hover {
  background-color: #fef3c7 !important;
}

[data-theme="light"] .hover\:bg-teal-900\/40:hover {
  background-color: #ccfbf1 !important;
}

[data-theme="light"] .hover\:bg-violet-900\/40:hover {
  background-color: #ede9fe !important;
}

[data-theme="light"] .hover\:bg-rose-900\/40:hover {
  background-color: #ffe4e6 !important;
}

/* 4. Tinted Accent Panels in Light Mode */
[data-theme="light"] .bg-amber-950\/20,
[data-theme="light"] .bg-amber-950\/30,
[data-theme="light"] .bg-amber-950\/40,
[data-theme="light"] .bg-amber-950\/80 {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
}

[data-theme="light"] .bg-teal-950\/40,
[data-theme="light"] .bg-teal-950\/30 {
  background-color: #f0fdfa !important;
  border-color: #99f6e4 !important;
}

[data-theme="light"] .bg-cyan-950\/30 {
  background-color: #ecfeff !important;
  border-color: #a5f3fc !important;
}

[data-theme="light"] .bg-rose-950\/20,
[data-theme="light"] .bg-rose-950\/30,
[data-theme="light"] .bg-rose-950\/40,
[data-theme="light"] .bg-rose-950\/50,
[data-theme="light"] .bg-rose-950\/60 {
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
}

[data-theme="light"] .bg-emerald-950\/30,
[data-theme="light"] .bg-emerald-950\/50,
[data-theme="light"] .bg-emerald-950\/60,
[data-theme="light"] .bg-emerald-950\/80 {
  background-color: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
}

[data-theme="light"] .bg-purple-950\/80,
[data-theme="light"] .bg-violet-950\/20,
[data-theme="light"] .bg-violet-950\/30,
[data-theme="light"] .bg-violet-950\/40 {
  background-color: #f5f3ff !important;
  border-color: #ddd6fe !important;
}

[data-theme="light"] .bg-red-950,
[data-theme="light"] .bg-red-950\/20,
[data-theme="light"] .bg-red-950\/80 {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
}

[data-theme="light"] .bg-sky-950\/30 {
  background-color: #f0f9ff !important;
  border-color: #bae6fd !important;
}

[data-theme="light"] .bg-amber-950\/30 {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
}

/* 5. Text Hierarchy in Light Mode */
[data-theme="light"] .text-white {
  color: #0f172a !important;
}

[data-theme="light"] .text-sky-300 {
  color: #0369a1 !important;
}

[data-theme="light"] .text-emerald-300 {
  color: #15803d !important;
}

[data-theme="light"] .text-rose-300 {
  color: #be123c !important;
}

[data-theme="light"] .text-amber-300 {
  color: #b45309 !important;
}

[data-theme="light"] .text-gray-100,
[data-theme="light"] .text-gray-200 {
  color: #1e293b !important;
}

[data-theme="light"] .text-gray-300 {
  color: #334155 !important;
}

[data-theme="light"] .text-gray-400 {
  color: #475569 !important;
}

[data-theme="light"] .text-gray-500 {
  color: #64748b !important;
}

[data-theme="light"] .text-gray-600 {
  color: #64748b !important;
}

[data-theme="light"] .text-slate-200 {
  color: #1e293b !important;
}

[data-theme="light"] .text-slate-300 {
  color: #334155 !important;
}

[data-theme="light"] .text-slate-400 {
  color: #64748b !important;
}

[data-theme="light"] .group\/item:hover .group-hover\/item\:text-white {
  color: #0f172a !important;
}

[data-theme="light"] .hover\:text-white:hover {
  color: #0f172a !important;
}

[data-theme="light"] .text-amber-200,
[data-theme="light"] .text-amber-300 {
  color: #b45309 !important;
}

[data-theme="light"] .text-amber-400 {
  color: #d97706 !important;
}

[data-theme="light"] .text-teal-300,
[data-theme="light"] .text-teal-400 {
  color: #0f766e !important;
}

[data-theme="light"] .text-cyan-300,
[data-theme="light"] .text-cyan-400 {
  color: #0e7490 !important;
}

[data-theme="light"] .text-violet-300,
[data-theme="light"] .text-violet-400 {
  color: #6d28d9 !important;
}

[data-theme="light"] .text-rose-300,
[data-theme="light"] .text-rose-400 {
  color: #be123c !important;
}

/* 6. Borders in Light Mode */
[data-theme="light"] .border-gray-800,
[data-theme="light"] .border-gray-800\/80,
[data-theme="light"] .border-gray-800\/60,
[data-theme="light"] .border-gray-800\/40,
[data-theme="light"] .border-gray-700,
[data-theme="light"] .border-gray-700\/80,
[data-theme="light"] .border-gray-700\/60,
[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/15,
[data-theme="light"] .border-white\/20,
[data-theme="light"] .border-white\/5 {
  border-color: #e2e8f0 !important;
}

/* 7. Sidebar Specifics in Light Mode */
[data-theme="light"] aside#sidebar-drawer {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] #sidebar-studio-header {
  background: linear-gradient(135deg, #fef3c7 0%, #ffffff 50%, #f0fdfa 100%) !important;
  border-color: #fde68a !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.08) !important;
}

[data-theme="light"] #sidebar-studio-name {
  color: #0f172a !important;
}

[data-theme="light"] #sidebar-studio-sub {
  color: #b45309 !important;
}

[data-theme="light"] .sidebar-sub-item {
  color: #334155 !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .sidebar-sub-item:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="light"] .sidebar-sub-item.active {
  background: linear-gradient(to right, #fef3c7, #fffbeb) !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
  font-weight: 800 !important;
}

[data-theme="light"] .accordion-item {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .accordion-header {
  color: #1e293b !important;
  background-color: #f8fafc !important;
}

[data-theme="light"] .accordion-header:hover {
  background-color: #f1f5f9 !important;
}

[data-theme="light"] .chapter-nav-item {
  color: #334155 !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .chapter-nav-item:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="light"] .chapter-nav-item.active {
  background-color: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #78350f !important;
  font-weight: 800 !important;
}

/* 8. Tables in Light Mode */
[data-theme="light"] table {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] table thead tr {
  background-color: #f1f5f9 !important;
  border-bottom-color: #cbd5e1 !important;
}

[data-theme="light"] table th {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] table tbody tr {
  border-bottom-color: #f1f5f9 !important;
}

[data-theme="light"] table tbody tr:hover {
  background-color: #f8fafc !important;
}

[data-theme="light"] table td {
  color: #334155 !important;
  border-color: #f1f5f9 !important;
}

[data-theme="light"] .font-mono {
  color: #0f172a;
}

/* 9. Forms, Inputs & Modals in Light Mode */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
}

[data-theme="light"] #chapter-picker-modal > div,
[data-theme="light"] #search-modal > div,
[data-theme="light"] #chapter-quiz-gate-modal > div,
[data-theme="light"] #master-storyboard-prompt-modal > div,
[data-theme="light"] #user-dropdown-menu {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}

[data-theme="light"] .group\/lock .absolute {
  background-color: #ffffff !important;
  border-color: #f59e0b !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .group\/lock .absolute .text-gray-300 {
  color: #334155 !important;
}

/* ==========================================================================
   RAMUKATHA UNIVERSAL MODAL BACKDROP & GLASS SYSTEM
   ========================================================================== */
.ramukatha-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  background: rgba(5, 10, 20, 0.52) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  animation: ramukathaFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

[data-theme="light"] .ramukatha-modal-backdrop {
  background: rgba(15, 23, 42, 0.48) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
}

.ramukatha-modal-card {
  position: relative !important;
  width: 100% !important;
  max-height: 90vh !important;
  border-radius: 1.5rem !important;
  overflow: hidden !important;
  background-color: rgba(13, 17, 23, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(245, 158, 11, 0.15) !important;
  animation: ramukathaScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  color: #f8fafc !important;
}

[data-theme="light"] .ramukatha-modal-card {
  background-color: rgba(15, 23, 42, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.6), 0 0 0 1px rgba(245, 158, 11, 0.25) !important;
  color: #f8fafc !important;
}

@keyframes ramukathaFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ramukathaScaleUp {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ==========================================================================
   CREDIT MANAGEMENT & ADMIN WORKSPACE MASTER LIGHT MODE STYLES
   ========================================================================== */

/* 1. Dedicated Credit Accordion & Sidebar Styling */
[data-theme="light"] .sidebar-accordion-group {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .sidebar-accordion-group.credit-group,
[data-theme="light"] #group-wrapper-credit_mgmt,
[data-theme="light"] .sidebar-accordion-group[class*="border-amber-500"] {
  border-color: rgba(245, 158, 11, 0.45) !important;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.4) 0%, #ffffff 100%) !important;
  box-shadow: 0 4px 15px -3px rgba(245, 158, 11, 0.08) !important;
}

[data-theme="light"] .sidebar-accordion-group.credit-group button span,
[data-theme="light"] .sidebar-accordion-group.credit-group button i,
[data-theme="light"] #group-wrapper-credit_mgmt button span,
[data-theme="light"] #group-wrapper-credit_mgmt button i {
  color: #b45309 !important;
}

/* 2. Admin Cards, Metrics & Main Layout */
[data-theme="light"] .credit-metric-card,
[data-theme="light"] .credit-surface-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .credit-metric-card:first-child,
[data-theme="light"] .credit-metric-active {
  border-color: rgba(245, 158, 11, 0.45) !important;
  background: linear-gradient(135deg, #fffdfa 0%, #ffffff 100%) !important;
  box-shadow: 0 10px 30px -5px rgba(245, 158, 11, 0.1) !important;
}

[data-theme="light"] #metric-current-rate,
[data-theme="light"] #metric-effective-since,
[data-theme="light"] #metric-updated-by {
  color: #0f172a !important;
}

[data-theme="light"] #metric-rate-preview-100 {
  color: #b45309 !important;
}

/* 3. Action Banner & System Notes in Light Mode */
[data-theme="light"] .credit-action-banner {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 50%, #f0fdfa 100%) !important;
  border-color: #fde68a !important;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.08) !important;
}

[data-theme="light"] .credit-action-banner h3,
[data-theme="light"] .credit-action-banner .text-white {
  color: #0f172a !important;
}

[data-theme="light"] .credit-action-banner p {
  color: #475569 !important;
}

[data-theme="light"] .credit-action-banner code {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  font-weight: 700;
}

/* 4. Credit History Table Section in Light Mode */
[data-theme="light"] #history-search-input {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] #history-search-input:focus {
  background-color: #ffffff !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15) !important;
}

[data-theme="light"] #history-count-badge {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] #history-table-body tr {
  border-bottom-color: #f1f5f9 !important;
}

[data-theme="light"] #history-table-body tr:hover {
  background-color: #f8fafc !important;
}

[data-theme="light"] #history-table-body td {
  color: #334155 !important;
}

[data-theme="light"] #history-table-body td .text-white {
  color: #0f172a !important;
}

[data-theme="light"] #history-table-body td .text-amber-400 {
  color: #b45309 !important;
}

[data-theme="light"] #history-table-body td .text-slate-300,
[data-theme="light"] #history-table-body td .text-slate-400 {
  color: #475569 !important;
}

/* 5. Modals (Edit Rate & Confirmation) in Light Mode */
[data-theme="light"] #edit-rate-modal,
[data-theme="light"] #confirm-rate-modal {
  background-color: rgba(15, 23, 42, 0.45) !important;
}

[data-theme="light"] #edit-rate-modal > div,
[data-theme="light"] #confirm-rate-modal > div {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.25) !important;
  color: #0f172a !important;
}

[data-theme="light"] #edit-rate-modal h3,
[data-theme="light"] #confirm-rate-modal h3 {
  color: #0f172a !important;
}

[data-theme="light"] #edit-rate-modal p,
[data-theme="light"] #confirm-rate-modal p {
  color: #64748b !important;
}

[data-theme="light"] #edit-rate-modal label {
  color: #334155 !important;
}

[data-theme="light"] #edit-rate-modal input,
[data-theme="light"] #edit-rate-modal textarea {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] #edit-rate-modal input:focus,
[data-theme="light"] #edit-rate-modal textarea:focus {
  background-color: #ffffff !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
}

[data-theme="light"] #edit-rate-modal .bg-white\/5 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] #form-current-rate-display {
  color: #b45309 !important;
}

[data-theme="light"] #confirm-rate-modal .bg-white\/5 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] #confirm-rate-modal .bg-black\/30 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] #confirm-current-rate {
  color: #334155 !important;
}

[data-theme="light"] #confirm-rate-modal .bg-amber-500\/10 {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
}

[data-theme="light"] #confirm-new-rate {
  color: #b45309 !important;
}

[data-theme="light"] #confirm-effective-date {
  color: #0f172a !important;
}

[data-theme="light"] #confirm-reason {
  color: #334155 !important;
}

[data-theme="light"] #confirm-rate-modal .bg-teal-500\/10 {
  background-color: #f0fdfa !important;
  border-color: #99f6e4 !important;
  color: #0f766e !important;
}

/* 6. High-Contrast Status & System Badges in Light Mode */
[data-theme="light"] .bg-emerald-500\/20 {
  background-color: #f0fdf4 !important;
  color: #15803d !important;
  border-color: #86efac !important;
}

[data-theme="light"] .bg-cyan-500\/20 {
  background-color: #f0f9ff !important;
  color: #0369a1 !important;
  border-color: #7dd3fc !important;
}

[data-theme="light"] .bg-teal-500\/20 {
  background-color: #f0fdfa !important;
  color: #0f766e !important;
  border-color: #99f6e4 !important;
}

[data-theme="light"] .bg-amber-500\/20 {
  background-color: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}

[data-theme="light"] .bg-purple-500\/20 {
  background-color: #faf5ff !important;
  color: #7e22ce !important;
  border-color: #d8b4fe !important;
}

[data-theme="light"] .bg-white\/5,
[data-theme="light"] .bg-white\/10 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

[data-theme="light"] .text-amber-400 {
  color: #b45309 !important;
}

[data-theme="light"] .text-teal-400 {
  color: #0f766e !important;
}

[data-theme="light"] .text-cyan-400 {
  color: #0369a1 !important;
}

[data-theme="light"] .text-emerald-400 {
  color: #15803d !important;
}

/* 7. Model Pricing Modals & Inputs in Light Mode */
[data-theme="light"] #model-modal > div,
[data-theme="light"] #history-modal > div {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] #model-modal input,
[data-theme="light"] #model-modal select,
[data-theme="light"] #model-modal textarea {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] #model-modal input:focus,
[data-theme="light"] #model-modal select:focus,
[data-theme="light"] #model-modal textarea:focus {
  background-color: #ffffff !important;
  border-color: #0d9488 !important;
}

[data-theme="light"] #form-conversion-unit {
  color: #334155 !important;
}

[data-theme="light"] #form-conversion-rupiah {
  color: #b45309 !important;
}

[data-theme="light"] #history-modal-code {
  color: #64748b !important;
}

[data-theme="light"] #history-modal table th {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
}

[data-theme="light"] #history-modal table td {
  color: #1e293b !important;
}

/* Resolution Pricing Section in Model Modal Light Mode */
[data-theme="light"] #resolution-pricing-section {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] #resolution-pricing-section h4 {
  color: #0f172a !important;
}

[data-theme="light"] #resolution-pricing-section p {
  color: #64748b !important;
}

[data-theme="light"] #res-section-image > div,
[data-theme="light"] #res-section-video > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] #res-section-image > div span,
[data-theme="light"] #res-section-video > div span {
  color: #0f172a !important;
}

[data-theme="light"] #res-section-image input,
[data-theme="light"] #res-section-video input {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] #res-section-image input:focus,
[data-theme="light"] #res-section-video input:focus {
  background-color: #ffffff !important;
  border-color: #f59e0b !important;
}

[data-theme="light"] #res-img-1k-rp,
[data-theme="light"] #res-vid-720p-rp {
  color: #b45309 !important;
}

[data-theme="light"] #res-img-2k-rp,
[data-theme="light"] #res-vid-1080p-rp {
  color: #0284c7 !important;
}

[data-theme="light"] #res-img-4k-rp {
  color: #059669 !important;
}

[data-theme="light"] #res-vid-480p-rp {
  color: #475569 !important;
}

/* ==========================================================================
   7B. ADMIN CREDIT SUITE: COMPREHENSIVE LIGHT MODE SUPPORT
   ========================================================================== */
/* Modals: Topup, Packages, Transactions, Adjustment */
[data-theme="light"] #modal-mark-paid > div,
[data-theme="light"] #modal-update-status > div,
[data-theme="light"] #modal-proof-view > div,
[data-theme="light"] #modal-package-form > div,
[data-theme="light"] #modal-pkg-delete > div,
[data-theme="light"] #modal-tx-detail > div,
[data-theme="light"] #modal-confirm-adjust > div,
[data-theme="light"] #modal-confirm-adj > div,
[data-theme="light"] #modal-detail-adj > div,
[data-theme="light"] #user-profile-modal > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.2) !important;
  color: #0f172a !important;
}

/* Modal Headers & Text */
[data-theme="light"] #modal-mark-paid h3,
[data-theme="light"] #modal-update-status h3,
[data-theme="light"] #modal-package-form h3,
[data-theme="light"] #modal-pkg-delete h3,
[data-theme="light"] #modal-tx-detail h3,
[data-theme="light"] #modal-confirm-adjust h3,
[data-theme="light"] #modal-confirm-adj h3,
[data-theme="light"] #modal-detail-adj h3 {
  color: #0f172a !important;
}

[data-theme="light"] #modal-mark-paid label,
[data-theme="light"] #modal-update-status label,
[data-theme="light"] #modal-package-form label,
[data-theme="light"] #modal-tx-detail label,
[data-theme="light"] #modal-confirm-adjust label,
[data-theme="light"] #modal-confirm-adj label {
  color: #334155 !important;
}

/* Modal and Page Inputs / Selects / Textareas */
[data-theme="light"] #modal-mark-paid input,
[data-theme="light"] #modal-mark-paid select,
[data-theme="light"] #modal-mark-paid textarea,
[data-theme="light"] #modal-update-status input,
[data-theme="light"] #modal-update-status select,
[data-theme="light"] #modal-update-status textarea,
[data-theme="light"] #modal-package-form input,
[data-theme="light"] #modal-package-form select,
[data-theme="light"] #modal-package-form textarea,
[data-theme="light"] #form-credit-adjustment input,
[data-theme="light"] #form-credit-adjustment select,
[data-theme="light"] #form-credit-adjustment textarea,
[data-theme="light"] #filter-adj-type,
[data-theme="light"] #filter-adj-search,
[data-theme="light"] #ledger-search,
[data-theme="light"] #filter-tx-type,
[data-theme="light"] #search-input,
[data-theme="light"] #filter-type,
[data-theme="light"] #filter-direction,
[data-theme="light"] #filter-date,
[data-theme="light"] #topup-search,
[data-theme="light"] #model-search {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] #modal-package-form input:focus,
[data-theme="light"] #modal-package-form select:focus,
[data-theme="light"] #modal-package-form textarea:focus,
[data-theme="light"] #form-credit-adjustment input:focus,
[data-theme="light"] #form-credit-adjustment select:focus,
[data-theme="light"] #form-credit-adjustment textarea:focus {
  background-color: #ffffff !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15) !important;
}

/* Cards & Panels across the 6 Credit Pages */
[data-theme="light"] .package-card,
[data-theme="light"] .metric-card,
[data-theme="light"] #selected-user-card,
[data-theme="light"] #user-autocomplete-list,
[data-theme="light"] #live-preview-box {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] #user-autocomplete-list > div:hover {
  background-color: #f1f5f9 !important;
}

[data-theme="light"] #live-preview-box {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
}

/* Credit Tables Light Mode Uniformity */
[data-theme="light"] #topup-table th,
[data-theme="light"] #packages-table th,
[data-theme="light"] #ledger-table th,
[data-theme="light"] #adjustments-table th,
[data-theme="light"] #modelPricingTable th,
[data-theme="light"] #rateHistoryTable th,
[data-theme="light"] #historyPricingTable th,
[data-theme="light"] #adjustment-history-tbody ~ thead th {
  background-color: #f8fafc !important;
  color: #475569 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] #topup-table td,
[data-theme="light"] #packages-table td,
[data-theme="light"] #ledger-table td,
[data-theme="light"] #adjustments-table td,
[data-theme="light"] #modelPricingTable td,
[data-theme="light"] #rateHistoryTable td {
  border-color: #f1f5f9 !important;
  color: #1e293b !important;
}

[data-theme="light"] #topup-table tr:hover,
[data-theme="light"] #packages-table tr:hover,
[data-theme="light"] #ledger-table tr:hover,
[data-theme="light"] #adjustments-table tr:hover,
[data-theme="light"] #modelPricingTable tr:hover,
[data-theme="light"] #rateHistoryTable tr:hover {
  background-color: #f8fafc !important;
}

/* Secondary Button Styling in Light Mode */
[data-theme="light"] button.bg-white\/5,
[data-theme="light"] button.bg-white\/10 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

[data-theme="light"] button.bg-white\/5:hover,
[data-theme="light"] button.bg-white\/10:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* ==========================================================================
   8. MEMBER PORTAL & CREDIT WALLET LIGHT MODE ENHANCEMENTS
   ========================================================================== */
[data-theme="light"] body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

[data-theme="light"] header.glass-nav,
[data-theme="light"] .glass-nav,
[data-theme="light"] header {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] #user-dropdown-menu {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] #user-dropdown-menu .text-white {
  color: #0f172a !important;
}

[data-theme="light"] #user-dropdown-menu .text-slate-200 {
  color: #334155 !important;
}

[data-theme="light"] #user-dropdown-menu .hover\:bg-white\/10:hover {
  background-color: #f1f5f9 !important;
}

/* Studio & Dashboard Cards in Light Mode */
[data-theme="light"] #view-portal > div > div.group {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] #view-portal .bg-gray-800\/60 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] #view-portal .text-gray-200 {
  color: #0f172a !important;
}

/* Credit Wallet Page Cards in Light Mode */
[data-theme="light"] .credit-metric-card,
[data-theme="light"] main > div.grid > div.relative.rounded-3xl,
[data-theme="light"] main > div.rounded-3xl {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] #model-rates-tbody tr:hover {
  background-color: #f8fafc !important;
}

[data-theme="light"] #model-rates-tbody td {
  border-color: #f1f5f9 !important;
}

[data-theme="light"] #topup-modal > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="light"] .topup-pkg-card {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .topup-pkg-card:hover {
  background-color: #fef3c7 !important;
  border-color: #f59e0b !important;
}

[data-theme="light"] #input-topup-credits {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] #input-topup-credits:focus {
  background-color: #ffffff !important;
  border-color: #f59e0b !important;
}

/* ==========================================================================
   9. REALISM & NATURALISM CONTROL LIGHT MODE ENHANCEMENTS
   ========================================================================== */
[data-theme="light"] #video-realism-card,
[data-theme="light"] [data-realism-card] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] [id^="realism-sub-"] {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] [data-realism-trigger] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] [data-realism-trigger]:hover {
  background-color: #f8fafc !important;
  border-color: #0d9488 !important;
}

[data-theme="light"] [data-realism-dropdown],
[data-theme="light"] .searchable-dropdown-popover {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] [data-realism-dropdown] input[type="text"],
[data-theme="light"] .searchable-dropdown-popover input[type="text"] {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] [data-realism-dropdown] button[data-realism-opt-id]:hover,
[data-theme="light"] .searchable-dropdown-popover button[data-item-id]:hover {
  background-color: #f1f5f9 !important;
}

[data-theme="light"] .realism-opt-label {
  color: #0f172a !important;
}

[data-theme="light"] .realism-opt-desc {
  color: #64748b !important;
}

[data-theme="light"] textarea[id^="custom-"] {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] textarea[id^="custom-"]:focus {
  background-color: #ffffff !important;
  border-color: #0d9488 !important;
}

/* ==========================================================================
   MODAL GLASSMORPHISM & ANIMATED DIALOG (iOS/macOS Style)
   ========================================================================== */
@keyframes modalBackdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalCardScaleUp {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-backdrop-blur,
.realism-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: modalBackdropFadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-card-animated,
.realism-modal-card {
  position: relative;
  z-index: 9999;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  max-width: 480px;
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
  animation: modalCardScaleUp 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  color: #0f172a;
}

@media (max-width: 640px) {
  .modal-card-animated,
  .realism-modal-card {
    margin-left: 16px;
    margin-right: 16px;
    width: calc(100% - 32px);
    max-width: 100%;
    padding: 20px;
  }
}

/* ==========================================================================
   ADMIN DASHBOARD MODERN COMFORTABLE DARK THEME ENGINE (Modern Slate-Charcoal)
   ========================================================================== */

/* 1. Base Admin Body & Workspace */
html[data-theme="dark"] body.admin-workspace,
html.dark body.admin-workspace,
html[data-theme="dark"] body#body-root:has(#admin-sidebar),
html.dark body#body-root:has(#admin-sidebar),
html[data-theme="dark"] body:has(#admin-sidebar),
html.dark body:has(#admin-sidebar) {
  background-color: #0c0c0c !important;
  color: #f1f5f9 !important;
}

/* 2. Admin Top Header */
html[data-theme="dark"] header.sticky,
html.dark header.sticky,
html[data-theme="dark"] body.admin-workspace header.sticky,
html.dark body.admin-workspace header.sticky,
html[data-theme="dark"] body:has(#admin-sidebar) header.sticky,
html.dark body:has(#admin-sidebar) header.sticky {
  background-color: rgba(12, 12, 12, 0.9) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* 3. Sidebar Drawer & Accordion */
html[data-theme="dark"] #admin-sidebar,
html.dark #admin-sidebar,
html[data-theme="dark"] body.admin-workspace #admin-sidebar,
html.dark body.admin-workspace #admin-sidebar {
  background-color: transparent !important;
}

html[data-theme="dark"] #admin-sidebar > div,
html.dark #admin-sidebar > div,
html[data-theme="dark"] body.admin-workspace #admin-sidebar > div,
html.dark body.admin-workspace #admin-sidebar > div {
  background-color: rgba(34, 39, 54, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] #admin-sidebar .sidebar-accordion-group:not(.credit-group),
html.dark #admin-sidebar .sidebar-accordion-group:not(.credit-group) {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] #admin-sidebar .sidebar-sub-item,
html.dark #admin-sidebar .sidebar-sub-item {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] #admin-sidebar .sidebar-sub-item:hover,
html.dark #admin-sidebar .sidebar-sub-item:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.09) !important;
}

html[data-theme="dark"] #admin-sidebar .sidebar-sub-item.active,
html.dark #admin-sidebar .sidebar-sub-item.active {
  color: #fbbf24 !important;
  background-color: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
}

/* 4. Cards & Main Surfaces */
html[data-theme="dark"] .card-item,
html.dark .card-item,
html[data-theme="dark"] .glass-card-dark,
html.dark .glass-card-dark,
html[data-theme="dark"] body.admin-workspace .card-item,
html.dark body.admin-workspace .card-item,
html[data-theme="dark"] body:has(#admin-sidebar) .card-item,
html.dark body:has(#admin-sidebar) .card-item {
  background-color: #252b3b !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* 5. Inner Boxes, Subsections, and Containers */
html[data-theme="dark"] body.admin-workspace .bg-\[\#0A0A0C\],
html.dark body.admin-workspace .bg-\[\#0A0A0C\],
html[data-theme="dark"] body.admin-workspace .bg-\[\#121214\],
html.dark body.admin-workspace .bg-\[\#121214\],
html[data-theme="dark"] body.admin-workspace .bg-\[\#141417\],
html.dark body.admin-workspace .bg-\[\#141417\],
html[data-theme="dark"] body.admin-workspace .bg-\[\#09090b\],
html.dark body.admin-workspace .bg-\[\#09090b\],
html[data-theme="dark"] body.admin-workspace .bg-\[\#0c0c0c\],
html.dark body.admin-workspace .bg-\[\#0c0c0c\],
html[data-theme="dark"] body:has(#admin-sidebar) .bg-\[\#0A0A0C\],
html.dark body:has(#admin-sidebar) .bg-\[\#0A0A0C\],
html[data-theme="dark"] body:has(#admin-sidebar) .bg-\[\#121214\],
html.dark body:has(#admin-sidebar) .bg-\[\#121214\],
html[data-theme="dark"] body:has(#admin-sidebar) .bg-\[\#141417\],
html.dark body:has(#admin-sidebar) .bg-\[\#141417\],
html[data-theme="dark"] body:has(#admin-sidebar) .bg-\[\#09090b\],
html.dark body:has(#admin-sidebar) .bg-\[\#09090b\],
html[data-theme="dark"] body:has(#admin-sidebar) .bg-\[\#0c0c0c\],
html.dark body:has(#admin-sidebar) .bg-\[\#0c0c0c\] {
  background-color: #2d3448 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* 6. Form Inputs, Selects, and Textareas */
html[data-theme="dark"] body.admin-workspace input:not([type="checkbox"]):not([type="radio"]),
html.dark body.admin-workspace input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] body.admin-workspace textarea,
html.dark body.admin-workspace textarea,
html[data-theme="dark"] body.admin-workspace select,
html.dark body.admin-workspace select,
html[data-theme="dark"] body:has(#admin-sidebar) input:not([type="checkbox"]):not([type="radio"]),
html.dark body:has(#admin-sidebar) input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] body:has(#admin-sidebar) textarea,
html.dark body:has(#admin-sidebar) textarea,
html[data-theme="dark"] body:has(#admin-sidebar) select,
html.dark body:has(#admin-sidebar) select {
  background-color: #202534 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] body.admin-workspace input:focus,
html.dark body.admin-workspace input:focus,
html[data-theme="dark"] body.admin-workspace textarea:focus,
html.dark body.admin-workspace textarea:focus,
html[data-theme="dark"] body.admin-workspace select:focus,
html.dark body.admin-workspace select:focus,
html[data-theme="dark"] body:has(#admin-sidebar) input:focus,
html.dark body:has(#admin-sidebar) input:focus,
html[data-theme="dark"] body:has(#admin-sidebar) textarea:focus,
html.dark body:has(#admin-sidebar) textarea:focus,
html[data-theme="dark"] body:has(#admin-sidebar) select:focus,
html.dark body:has(#admin-sidebar) select:focus {
  border-color: #f59e0b !important;
  background-color: #242a3a !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) !important;
}

/* 7. Tables in Dark Mode */
html[data-theme="dark"] body.admin-workspace table thead tr,
html.dark body.admin-workspace table thead tr,
html[data-theme="dark"] body:has(#admin-sidebar) table thead tr,
html.dark body:has(#admin-sidebar) table thead tr {
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] body.admin-workspace table tbody tr,
html.dark body.admin-workspace table tbody tr,
html[data-theme="dark"] body:has(#admin-sidebar) table tbody tr,
html.dark body:has(#admin-sidebar) table tbody tr {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body.admin-workspace table tbody tr:hover,
html.dark body.admin-workspace table tbody tr:hover,
html[data-theme="dark"] body:has(#admin-sidebar) table tbody tr:hover,
html.dark body:has(#admin-sidebar) table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.07) !important;
}

/* 8. Modals, Dropdowns & Floating Dialogs */
html[data-theme="dark"] body.admin-workspace #user-dropdown-menu,
html.dark body.admin-workspace #user-dropdown-menu,
html[data-theme="dark"] body.admin-workspace #pricing-modal > div,
html.dark body.admin-workspace #pricing-modal > div,
html[data-theme="dark"] body.admin-workspace #showcase-modal > div,
html.dark body.admin-workspace #showcase-modal > div,
html[data-theme="dark"] body:has(#admin-sidebar) #user-dropdown-menu,
html.dark body:has(#admin-sidebar) #user-dropdown-menu,
html[data-theme="dark"] body:has(#admin-sidebar) #pricing-modal > div,
html.dark body:has(#admin-sidebar) #pricing-modal > div,
html[data-theme="dark"] body:has(#admin-sidebar) #showcase-modal > div,
html.dark body:has(#admin-sidebar) #showcase-modal > div {
  background-color: #262d3e !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5) !important;
}

/* 9. Buttons, Badges & Interactive Elements */
html[data-theme="dark"] body.admin-workspace .bg-white\/5,
html.dark body.admin-workspace .bg-white\/5,
html[data-theme="dark"] body:has(#admin-sidebar) .bg-white\/5,
html.dark body:has(#admin-sidebar) .bg-white\/5 {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] body.admin-workspace .bg-white\/10,
html.dark body.admin-workspace .bg-white\/10,
html[data-theme="dark"] body:has(#admin-sidebar) .bg-white\/10,
html.dark body:has(#admin-sidebar) .bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* 10. Borders & Custom Scrollbars */
html[data-theme="dark"] body.admin-workspace .border-white\/10,
html.dark body.admin-workspace .border-white\/10,
html[data-theme="dark"] body:has(#admin-sidebar) .border-white\/10,
html.dark body:has(#admin-sidebar) .border-white\/10 {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] body.admin-workspace ::-webkit-scrollbar-thumb,
html.dark body.admin-workspace ::-webkit-scrollbar-thumb,
html[data-theme="dark"] body:has(#admin-sidebar) ::-webkit-scrollbar-thumb,
html.dark body:has(#admin-sidebar) ::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 9999px;
}

/* ==========================================================================
   ADMIN SIDEBAR & ACCORDION SMOOTH TRANSITION STYLES
   ========================================================================== */

#admin-sidebar {
  pointer-events: auto !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (min-width: 1024px) {
  #admin-sidebar {
    position: sticky !important;
    top: 5.5rem !important; /* 88px (64px header + 24px container padding) */
    z-index: 30 !important;
    align-self: flex-start !important;
    max-height: calc(100vh - 7rem) !important;
  }
}

@media (max-width: 1023px) {
  #admin-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 50 !important;
  }
}

/* Ensure all sidebar interactive buttons, links and wrappers are clickable */
#admin-sidebar button,
#admin-sidebar a,
#admin-sidebar .sidebar-accordion-group,
#admin-sidebar .sidebar-sub-item {
  pointer-events: auto !important;
  cursor: pointer !important;
}

@media (min-width: 1024px) {
  #admin-sidebar.collapsed-desktop {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: -1.5rem !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border: none !important;
  }
}

/* Accordion Content Smooth Transitions */
.sidebar-accordion-content {
  overflow: hidden !important;
  max-height: 0px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  padding-top: 0 !important;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease-in-out, padding 0.3s ease !important;
}

.sidebar-accordion-content.is-open {
  max-height: 800px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding-top: 0.25rem !important;
}

.sidebar-accordion-content.is-open,
.sidebar-accordion-content.is-open * {
  pointer-events: auto !important;
}

[id^="sidebar-chevron-"] {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: rotate(0deg);
}

[id^="sidebar-chevron-"].rotate-180,
[id^="sidebar-chevron-"].is-open {
  transform: rotate(180deg) !important;
}

/* =============================================================================
   ADMIN SIDEBAR STACKING CONTEXT & INTERACTIVITY ENFORCEMENT (ANTI-BLOCK)
   ============================================================================= */

#admin-sidebar, 
#admin-sidebar * {
  pointer-events: auto !important;
}

@media (min-width: 1024px) {
  #admin-sidebar.collapsed-desktop,
  #admin-sidebar.collapsed-desktop * {
    pointer-events: none !important;
  }
}

/* =============================================================================
   UNIFIED MOBILE SIDEBAR & BACKDROP SYSTEM (ADMIN & MEMBER)
   ============================================================================= */
@media (max-width: 1023px) {
  #admin-sidebar,
  #sidebar-drawer,
  aside#admin-sidebar,
  aside#sidebar-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    width: 82% !important;
    max-width: 300px !important;
    z-index: 50 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75) !important;
  }

  /* Open State: support both class removals and dedicated class additions */
  #admin-sidebar.sidebar-mobile-open,
  #admin-sidebar.is-open,
  #admin-sidebar:not(.-translate-x-full),
  #sidebar-drawer.sidebar-mobile-open,
  #sidebar-drawer.is-open,
  #sidebar-drawer:not(.-translate-x-full) {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  /* Closed State pointer-events */
  #admin-sidebar.-translate-x-full:not(.sidebar-mobile-open),
  #admin-sidebar.-translate-x-full:not(.sidebar-mobile-open) *,
  #sidebar-drawer.-translate-x-full:not(.sidebar-mobile-open),
  #sidebar-drawer.-translate-x-full:not(.sidebar-mobile-open) * {
    pointer-events: none !important;
  }

  /* Responsive Mobile Backdrops */
  #mobile-admin-backdrop,
  #mobile-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 45 !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Visible Backdrop */
  #mobile-admin-backdrop.active,
  #mobile-admin-backdrop.is-open,
  #mobile-admin-backdrop:not(.hidden),
  #mobile-backdrop.active,
  #mobile-backdrop.is-open,
  #mobile-backdrop:not(.hidden) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.mobile-sidebar-open {
    overflow: hidden !important;
  }
}

/* Strict Desktop Suppression */
@media (min-width: 1024px) {
  #mobile-admin-backdrop,
  #mobile-backdrop,
  div#mobile-admin-backdrop,
  div#mobile-backdrop {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #admin-sidebar,
  #sidebar-drawer {
    transform: none !important;
  }
}

/* ==========================================================================
   MEMBER PORTAL: DUAL THEME ENGINE (STRICTLY SCOPED & ZERO-LEAKAGE)
   - Dark Mode: Soft Modern Slate / Charcoal (#161c28 / #242d40 / #2d374d) - NOT pitch black!
   - Light Mode: Clean, Crisp White / Slate (#f8fafc / #ffffff / #f1f5f9) - Zero dark leaks!
   ========================================================================== */

/* ==========================================================================
   A. MEMBER LIGHT MODE (html[data-theme="light"])
   ========================================================================== */

/* 1. Body & Base Typography */
html[data-theme="light"] body.member-workspace {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  background-image: none !important;
}

html[data-theme="light"] body.member-workspace h1,
html[data-theme="light"] body.member-workspace h2,
html[data-theme="light"] body.member-workspace h3,
html[data-theme="light"] body.member-workspace h4,
html[data-theme="light"] body.member-workspace h5 {
  color: #0f172a !important;
}

html[data-theme="light"] body.member-workspace p {
  color: #475569 !important;
}

html[data-theme="light"] body.member-workspace .text-gray-100,
html[data-theme="light"] body.member-workspace .text-gray-200 {
  color: #0f172a !important;
}

html[data-theme="light"] body.member-workspace .text-gray-300 {
  color: #334155 !important;
}

html[data-theme="light"] body.member-workspace .text-gray-400 {
  color: #64748b !important;
}

html[data-theme="light"] body.member-workspace .text-gray-500 {
  color: #94a3b8 !important;
}

/* 2. Top Header Navigation */
html[data-theme="light"] body.member-workspace header {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] body.member-workspace #header-brand-logo .font-extrabold {
  color: #0f172a !important;
}

html[data-theme="light"] body.member-workspace #header-brand-logo .text-gray-400 {
  color: #64748b !important;
}

html[data-theme="light"] body.member-workspace #header-brand-logo span.font-mono {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #b45309 !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

/* Header Action Buttons in Light Mode */
html[data-theme="light"] body.member-workspace header a[title*="Katalog"],
html[data-theme="light"] body.member-workspace header #nav-catalog-btn {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0d9488 !important;
}
html[data-theme="light"] body.member-workspace header a[title*="Katalog"]:hover,
html[data-theme="light"] body.member-workspace header #nav-catalog-btn:hover {
  background-color: #e6fffa !important;
  border-color: #14b8a6 !important;
  color: #0f766e !important;
}

html[data-theme="light"] body.member-workspace header a[href*="member-wallet.html"],
html[data-theme="light"] body.member-workspace header a[href*="member-credit.html"] {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}
html[data-theme="light"] body.member-workspace header a[href*="member-wallet.html"] i,
html[data-theme="light"] body.member-workspace header a[href*="member-credit.html"] i {
  color: #d97706 !important;
}
html[data-theme="light"] body.member-workspace header a[href*="member-wallet.html"]:hover,
html[data-theme="light"] body.member-workspace header a[href*="member-credit.html"]:hover {
  background-color: #fef3c7 !important;
  border-color: #f59e0b !important;
}

html[data-theme="light"] body.member-workspace header button[onclick*="openSearchModal"] {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}
html[data-theme="light"] body.member-workspace header button[onclick*="openSearchModal"]:hover {
  border-color: #cbd5e1 !important;
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace header button[onclick*="openSearchModal"] kbd {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #64748b !important;
}

html[data-theme="light"] body.member-workspace #mobile-menu-btn,
html[data-theme="light"] body.member-workspace #nav-home-btn,
html[data-theme="light"] body.member-workspace header button[onclick*="toggleTheme"] {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace #mobile-menu-btn:hover,
html[data-theme="light"] body.member-workspace #nav-home-btn:hover,
html[data-theme="light"] body.member-workspace header button[onclick*="toggleTheme"]:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html[data-theme="light"] body.member-workspace #lang-switch-member {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
html[data-theme="light"] body.member-workspace #lang-id-member:not(.bg-amber-500),
html[data-theme="light"] body.member-workspace #lang-en-member:not(.bg-amber-500) {
  color: #64748b !important;
}

html[data-theme="light"] body.member-workspace #user-profile-btn {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}
html[data-theme="light"] body.member-workspace #user-profile-btn:hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}
html[data-theme="light"] body.member-workspace #user-display-name {
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace #user-display-role {
  color: #b45309 !important;
}
html[data-theme="light"] body.member-workspace #user-avatar-initials {
  background-color: #fef3c7 !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}

html[data-theme="light"] body.member-workspace #user-dropdown-menu {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="light"] body.member-workspace #user-dropdown-menu #dropdown-user-fullname {
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace #user-dropdown-menu #dropdown-user-email {
  color: #64748b !important;
}
html[data-theme="light"] body.member-workspace #user-dropdown-menu a,
html[data-theme="light"] body.member-workspace #user-dropdown-menu button {
  color: #334155 !important;
}
html[data-theme="light"] body.member-workspace #user-dropdown-menu a:hover,
html[data-theme="light"] body.member-workspace #user-dropdown-menu button:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* 3. Portal Studio Cards */
html[data-theme="light"] body.member-workspace #portal-studios-grid > div[id^="card-studio-"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
html[data-theme="light"] body.member-workspace #portal-studios-grid > div[id^="card-studio-"]:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] body.member-workspace #portal-studios-grid > div[id^="card-studio-"] h2 {
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace #portal-studios-grid > div[id^="card-studio-"] p {
  color: #475569 !important;
}

html[data-theme="light"] body.member-workspace #portal-studios-grid .portal-studio-shortcuts button,
html[data-theme="light"] body.member-workspace #portal-studios-grid button.group\/item {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] body.member-workspace #portal-studios-grid .portal-studio-shortcuts button:hover,
html[data-theme="light"] body.member-workspace #portal-studios-grid button.group\/item:hover {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}
html[data-theme="light"] body.member-workspace #portal-studios-grid .portal-studio-shortcuts button .text-gray-200,
html[data-theme="light"] body.member-workspace #portal-studios-grid button.group\/item .text-gray-200 {
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace #portal-studios-grid .portal-studio-shortcuts button .text-gray-400,
html[data-theme="light"] body.member-workspace #portal-studios-grid button.group\/item .text-gray-400 {
  color: #64748b !important;
}

/* 4. Portal Stats Bar & Empty State */
html[data-theme="light"] body.member-workspace #portal-stats-bar,
html[data-theme="light"] body.member-workspace #portal-empty-studios {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] body.member-workspace #portal-stats-bar .text-gray-300 {
  color: #334155 !important;
}
html[data-theme="light"] body.member-workspace #portal-stats-bar .text-gray-500 {
  color: #64748b !important;
}
html[data-theme="light"] body.member-workspace #portal-empty-studios h3 {
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace #portal-empty-studios p {
  color: #475569 !important;
}

/* Dedicated Academy Browse Banner in Light Mode */
html[data-theme="light"] body.member-workspace #portal-browse-academy-banner {
  background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 50%, #fefce8 100%) !important;
  border: 1px solid #99f6e4 !important;
  box-shadow: 0 10px 30px rgba(20, 184, 166, 0.08) !important;
}
html[data-theme="light"] body.member-workspace #portal-browse-academy-banner h3 {
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace #portal-browse-academy-banner p {
  color: #475569 !important;
}
html[data-theme="light"] body.member-workspace #portal-browse-academy-banner .bg-teal-500\/15 {
  background-color: #ccfbf1 !important;
  border-color: #99f6e4 !important;
  color: #0f766e !important;
}

/* Studio Badges in Light Mode */
html[data-theme="light"] body.member-workspace #card-studio-image span.font-mono {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}
html[data-theme="light"] body.member-workspace #card-studio-video span.font-mono {
  background-color: #f0fdfa !important;
  border-color: #99f6e4 !important;
  color: #0f766e !important;
}
html[data-theme="light"] body.member-workspace #card-studio-animation span.font-mono {
  background-color: #f5f3ff !important;
  border-color: #ddd6fe !important;
  color: #6d28d9 !important;
}
html[data-theme="light"] body.member-workspace #card-studio-film span.font-mono {
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #be123c !important;
}

/* 5. Studio Sidebar Drawer */
html[data-theme="light"] body.member-workspace #sidebar-drawer {
  background-color: transparent !important;
}
@media (max-width: 1023px) {
  html[data-theme="light"] body.member-workspace #sidebar-drawer {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
  }
}

html[data-theme="light"] body.member-workspace #sidebar-studio-header {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
html[data-theme="light"] body.member-workspace #sidebar-studio-name {
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace #sidebar-studio-sub {
  color: #b45309 !important;
}
html[data-theme="light"] body.member-workspace #btn-prev-studio,
html[data-theme="light"] body.member-workspace #btn-next-studio {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace #btn-prev-studio:hover,
html[data-theme="light"] body.member-workspace #btn-next-studio:hover {
  background-color: #e2e8f0 !important;
}

html[data-theme="light"] body.member-workspace #sidebar-drawer > div:not(#sidebar-studio-header),
html[data-theme="light"] body.member-workspace #sidebar-accordion-container > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] body.member-workspace .sidebar-sub-item:not(.active) {
  color: #475569 !important;
  background-color: transparent !important;
}
html[data-theme="light"] body.member-workspace .sidebar-sub-item:hover:not(.active) {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace .sidebar-sub-item.active {
  background-color: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
}

/* 6. Studio Dynamic Content Workspace (Modul, Glosarium, Builder, Galeri) */
html[data-theme="light"] body.member-workspace #studio-content-area .bg-gray-950,
html[data-theme="light"] body.member-workspace #studio-content-area .bg-gray-900,
html[data-theme="light"] body.member-workspace #studio-content-area .bg-gray-900\/90,
html[data-theme="light"] body.member-workspace #studio-content-area .bg-gray-900\/80,
html[data-theme="light"] body.member-workspace #studio-content-area .bg-gray-900\/60,
html[data-theme="light"] body.member-workspace #studio-content-area .bg-gray-900\/50,
html[data-theme="light"] body.member-workspace #studio-content-area .bg-gray-900\/40,
html[data-theme="light"] body.member-workspace #studio-content-area .bg-black\/60,
html[data-theme="light"] body.member-workspace #studio-content-area .bg-black\/50,
html[data-theme="light"] body.member-workspace #studio-content-area .bg-black\/40 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] body.member-workspace #studio-content-area pre,
html[data-theme="light"] body.member-workspace #studio-content-area .font-mono.bg-black\/40,
html[data-theme="light"] body.member-workspace #studio-content-area .font-mono.bg-gray-900\/90 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html[data-theme="light"] body.member-workspace #studio-content-area .border-gray-800,
html[data-theme="light"] body.member-workspace #studio-content-area .border-gray-700 {
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] body.member-workspace .table-container {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] body.member-workspace .table-container table {
  background-color: #ffffff !important;
}
html[data-theme="light"] body.member-workspace .table-container thead tr {
  background-color: #f1f5f9 !important;
  border-bottom-color: #e2e8f0 !important;
}
html[data-theme="light"] body.member-workspace .table-container thead th {
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace .table-container tbody {
  background-color: #ffffff !important;
}
html[data-theme="light"] body.member-workspace .table-container tbody tr {
  border-bottom-color: #f1f5f9 !important;
}
html[data-theme="light"] body.member-workspace .table-container tbody tr:hover {
  background-color: #f8fafc !important;
}
html[data-theme="light"] body.member-workspace .table-container td {
  color: #334155 !important;
}

html[data-theme="light"] body.member-workspace .bg-amber-950\/20 {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
}
html[data-theme="light"] body.member-workspace .bg-amber-950\/20 p {
  color: #92400e !important;
}

html[data-theme="light"] body.member-workspace .bg-rose-950\/20 {
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
}
html[data-theme="light"] body.member-workspace .bg-rose-950\/20 p,
html[data-theme="light"] body.member-workspace .bg-rose-950\/20 div {
  color: #9f1239 !important;
}

/* Preserve High-Contrast on Solid Action Buttons */
html[data-theme="light"] body.member-workspace button.bg-amber-500,
html[data-theme="light"] body.member-workspace a.bg-amber-500 {
  color: #0c0c0c !important;
}
html[data-theme="light"] body.member-workspace button.bg-cyan-600,
html[data-theme="light"] body.member-workspace button.bg-teal-600,
html[data-theme="light"] body.member-workspace button.bg-rose-600,
html[data-theme="light"] body.member-workspace button.bg-violet-500 {
  color: #ffffff !important;
}

/* Modals in Light Mode */
html[data-theme="light"] body.member-workspace #image-lightbox-modal > div,
html[data-theme="light"] body.member-workspace #search-modal > div,
html[data-theme="light"] body.member-workspace #chapter-quiz-gate-modal > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] body.member-workspace #image-lightbox-modal .bg-gray-950,
html[data-theme="light"] body.member-workspace #search-modal .border-b {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] body.member-workspace #global-search-input {
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace #global-search-input::placeholder {
  color: #94a3b8 !important;
}

/* ==========================================================================
   ACADEMY CATALOG & PAYMENT MODALS - DUAL THEME ADAPTATION
   ========================================================================== */

/* 1. Backdrop */
html[data-theme="light"] body.member-workspace #member-classes-catalog-modal,
html[data-theme="light"] body.member-workspace #class-payment-modal,
html[data-theme="light"] #member-classes-catalog-modal,
html[data-theme="light"] #class-payment-modal {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html[data-theme="dark"] body.member-workspace #member-classes-catalog-modal,
html[data-theme="dark"] body.member-workspace #class-payment-modal,
html:not([data-theme="light"]) body.member-workspace #member-classes-catalog-modal,
html:not([data-theme="light"]) body.member-workspace #class-payment-modal,
html[data-theme="dark"] #member-classes-catalog-modal,
html[data-theme="dark"] #class-payment-modal,
html:not([data-theme="light"]) #member-classes-catalog-modal,
html:not([data-theme="light"]) #class-payment-modal {
  background: rgba(4, 6, 12, 0.65) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* 2. Dialog Container */
html[data-theme="light"] body.member-workspace .catalog-dialog-card,
html[data-theme="light"] body.member-workspace .payment-dialog-card,
html[data-theme="light"] .catalog-dialog-card,
html[data-theme="light"] .payment-dialog-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(20, 184, 166, 0.2) !important;
  color: #0f172a !important;
}

html[data-theme="dark"] body.member-workspace .catalog-dialog-card,
html[data-theme="dark"] body.member-workspace .payment-dialog-card,
html:not([data-theme="light"]) body.member-workspace .catalog-dialog-card,
html:not([data-theme="light"]) body.member-workspace .payment-dialog-card,
html[data-theme="dark"] .catalog-dialog-card,
html[data-theme="dark"] .payment-dialog-card,
html:not([data-theme="light"]) .catalog-dialog-card,
html:not([data-theme="light"]) .payment-dialog-card {
  background: rgba(14, 20, 32, 0.75) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 40px -10px rgba(245, 158, 11, 0.12) !important;
  color: #f8fafc !important;
}

/* 3. Close Button */
html[data-theme="light"] body.member-workspace .modal-close-btn,
html[data-theme="light"] .modal-close-btn {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}
html[data-theme="light"] body.member-workspace .modal-close-btn:hover,
html[data-theme="light"] .modal-close-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

html[data-theme="dark"] body.member-workspace .modal-close-btn,
html:not([data-theme="light"]) body.member-workspace .modal-close-btn,
html[data-theme="dark"] .modal-close-btn,
html:not([data-theme="light"]) .modal-close-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
html[data-theme="dark"] body.member-workspace .modal-close-btn:hover,
html:not([data-theme="light"]) body.member-workspace .modal-close-btn:hover,
html[data-theme="dark"] .modal-close-btn:hover,
html:not([data-theme="light"]) .modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

/* 4. Modal Header Typography */
html[data-theme="light"] body.member-workspace .catalog-header-title,
html[data-theme="light"] .catalog-header-title {
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace .catalog-header-desc,
html[data-theme="light"] .catalog-header-desc {
  color: #475569 !important;
}
html[data-theme="light"] body.member-workspace .catalog-header-badge,
html[data-theme="light"] .catalog-header-badge {
  background: #ccfbf1 !important;
  border-color: #99f6e4 !important;
  color: #0f766e !important;
}

html[data-theme="dark"] body.member-workspace .catalog-header-title,
html:not([data-theme="light"]) body.member-workspace .catalog-header-title,
html[data-theme="dark"] .catalog-header-title,
html:not([data-theme="light"]) .catalog-header-title {
  color: #ffffff !important;
}
html[data-theme="dark"] body.member-workspace .catalog-header-desc,
html:not([data-theme="light"]) body.member-workspace .catalog-header-desc,
html[data-theme="dark"] .catalog-header-desc,
html:not([data-theme="light"]) .catalog-header-desc {
  color: #94a3b8 !important;
}
html[data-theme="dark"] body.member-workspace .catalog-header-badge,
html:not([data-theme="light"]) body.member-workspace .catalog-header-badge,
html[data-theme="dark"] .catalog-header-badge,
html:not([data-theme="light"]) .catalog-header-badge {
  background: rgba(20, 184, 166, 0.15) !important;
  border-color: rgba(20, 184, 166, 0.3) !important;
  color: #5eead4 !important;
}

/* 5. Filter Tabs Divider & Buttons */
html[data-theme="light"] body.member-workspace .catalog-filter-bar,
html[data-theme="light"] .catalog-filter-bar {
  border-bottom-color: #e2e8f0 !important;
}
html[data-theme="light"] body.member-workspace .catalog-filter-btn:not(.active),
html[data-theme="light"] .catalog-filter-btn:not(.active) {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}
html[data-theme="light"] body.member-workspace .catalog-filter-btn:not(.active):hover,
html[data-theme="light"] .catalog-filter-btn:not(.active):hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

html[data-theme="dark"] body.member-workspace .catalog-filter-bar,
html:not([data-theme="light"]) body.member-workspace .catalog-filter-bar,
html[data-theme="dark"] .catalog-filter-bar,
html:not([data-theme="light"]) .catalog-filter-bar {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] body.member-workspace .catalog-filter-btn:not(.active),
html:not([data-theme="light"]) body.member-workspace .catalog-filter-btn:not(.active),
html[data-theme="dark"] .catalog-filter-btn:not(.active),
html:not([data-theme="light"]) .catalog-filter-btn:not(.active) {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}
html[data-theme="dark"] body.member-workspace .catalog-filter-btn:not(.active):hover,
html:not([data-theme="light"]) body.member-workspace .catalog-filter-btn:not(.active):hover,
html[data-theme="dark"] .catalog-filter-btn:not(.active):hover,
html:not([data-theme="light"]) .catalog-filter-btn:not(.active):hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

/* 6. Catalog Class Cards */
html[data-theme="light"] body.member-workspace .catalog-card,
html[data-theme="light"] .catalog-card {
  background: #ffffff !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace .catalog-card.card-default,
html[data-theme="light"] .catalog-card.card-default {
  border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] body.member-workspace .catalog-card.card-enrolled,
html[data-theme="light"] .catalog-card.card-enrolled {
  border: 1px solid #10b981 !important;
}
html[data-theme="light"] body.member-workspace .catalog-card.card-pending,
html[data-theme="light"] .catalog-card.card-pending {
  border: 1px solid #f59e0b !important;
  background: #fffbeb !important;
}
html[data-theme="light"] body.member-workspace .catalog-card.card-bundle,
html[data-theme="light"] .catalog-card.card-bundle {
  border: 1px solid #f59e0b !important;
}
html[data-theme="light"] body.member-workspace .catalog-card:hover,
html[data-theme="light"] .catalog-card:hover {
  border-color: #0d9488 !important;
  box-shadow: 0 8px 24px rgba(20, 184, 166, 0.12) !important;
}

html[data-theme="dark"] body.member-workspace .catalog-card,
html:not([data-theme="light"]) body.member-workspace .catalog-card,
html[data-theme="dark"] .catalog-card,
html:not([data-theme="light"]) .catalog-card {
  background: rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35) !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card.card-default,
html:not([data-theme="light"]) body.member-workspace .catalog-card.card-default,
html[data-theme="dark"] .catalog-card.card-default,
html:not([data-theme="light"]) .catalog-card.card-default {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.035) !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card.card-enrolled,
html:not([data-theme="light"]) body.member-workspace .catalog-card.card-enrolled,
html[data-theme="dark"] .catalog-card.card-enrolled,
html:not([data-theme="light"]) .catalog-card.card-enrolled {
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  background: rgba(16, 185, 129, 0.07) !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card.card-pending,
html:not([data-theme="light"]) body.member-workspace .catalog-card.card-pending,
html[data-theme="dark"] .catalog-card.card-pending,
html:not([data-theme="light"]) .catalog-card.card-pending {
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  background: rgba(245, 158, 11, 0.07) !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card.card-bundle,
html:not([data-theme="light"]) body.member-workspace .catalog-card.card-bundle,
html[data-theme="dark"] .catalog-card.card-bundle,
html:not([data-theme="light"]) .catalog-card.card-bundle {
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  background: rgba(245, 158, 11, 0.07) !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card:hover,
html:not([data-theme="light"]) body.member-workspace .catalog-card:hover,
html[data-theme="dark"] .catalog-card:hover,
html:not([data-theme="light"]) .catalog-card:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.55), 0 0 20px rgba(245, 158, 11, 0.18) !important;
}

/* Card Elements - Light Mode */
html[data-theme="light"] body.member-workspace .catalog-card-tag {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}
html[data-theme="light"] body.member-workspace .catalog-card-corner-badge:not(.bg-amber-500) {
  background: #f1f5f9 !important;
  border-left: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}
html[data-theme="light"] body.member-workspace .catalog-card-title {
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace .catalog-card-title i {
  color: #d97706 !important;
}
html[data-theme="light"] body.member-workspace .catalog-card-desc {
  color: #475569 !important;
}
html[data-theme="light"] body.member-workspace .catalog-card-divider {
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] body.member-workspace .catalog-card-feature {
  color: #334155 !important;
}
html[data-theme="light"] body.member-workspace .catalog-card-investasi {
  color: #64748b !important;
}
html[data-theme="light"] body.member-workspace .catalog-card-price {
  color: #b45309 !important;
}
html[data-theme="light"] body.member-workspace .catalog-card-origprice {
  color: #94a3b8 !important;
}
html[data-theme="light"] body.member-workspace .catalog-card-discount {
  color: #dc2626 !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
}
html[data-theme="light"] body.member-workspace .catalog-card-enrolled-btn {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #065f46 !important;
}
html[data-theme="light"] body.member-workspace .catalog-card-enrolled-btn:hover {
  background: #d1fae5 !important;
}

/* Card Elements - Dark Mode */
html[data-theme="dark"] body.member-workspace .catalog-card-tag,
html:not([data-theme="light"]) body.member-workspace .catalog-card-tag {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card-corner-badge:not(.bg-amber-500),
html:not([data-theme="light"]) body.member-workspace .catalog-card-corner-badge:not(.bg-amber-500) {
  background: rgba(255, 255, 255, 0.1) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card-title,
html:not([data-theme="light"]) body.member-workspace .catalog-card-title {
  color: #ffffff !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card-title i,
html:not([data-theme="light"]) body.member-workspace .catalog-card-title i {
  color: #fbbf24 !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card-desc,
html:not([data-theme="light"]) body.member-workspace .catalog-card-desc {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card-divider,
html:not([data-theme="light"]) body.member-workspace .catalog-card-divider {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card-feature,
html:not([data-theme="light"]) body.member-workspace .catalog-card-feature {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card-investasi,
html:not([data-theme="light"]) body.member-workspace .catalog-card-investasi {
  color: #94a3b8 !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card-price,
html:not([data-theme="light"]) body.member-workspace .catalog-card-price {
  color: #fbbf24 !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card-origprice,
html:not([data-theme="light"]) body.member-workspace .catalog-card-origprice {
  color: #64748b !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card-discount,
html:not([data-theme="light"]) body.member-workspace .catalog-card-discount {
  color: #f87171 !important;
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card-enrolled-btn,
html:not([data-theme="light"]) body.member-workspace .catalog-card-enrolled-btn {
  background: rgba(16, 185, 129, 0.2) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #6ee7b7 !important;
}
html[data-theme="dark"] body.member-workspace .catalog-card-enrolled-btn:hover,
html:not([data-theme="light"]) body.member-workspace .catalog-card-enrolled-btn:hover {
  background: rgba(16, 185, 129, 0.3) !important;
}

/* 7. Payment Modal Details */
html[data-theme="light"] body.member-workspace .payment-summary-box,
html[data-theme="light"] body.member-workspace .payment-instructions-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}
html[data-theme="light"] body.member-workspace .payment-form-label {
  color: #334155 !important;
}
html[data-theme="light"] body.member-workspace .payment-form-input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html[data-theme="light"] body.member-workspace .payment-form-input:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
}
html[data-theme="light"] body.member-workspace .payment-cancel-btn {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}
html[data-theme="light"] body.member-workspace .payment-cancel-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

html[data-theme="dark"] body.member-workspace .payment-summary-box,
html[data-theme="dark"] body.member-workspace .payment-instructions-box,
html:not([data-theme="light"]) body.member-workspace .payment-summary-box,
html:not([data-theme="light"]) body.member-workspace .payment-instructions-box {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}
html[data-theme="dark"] body.member-workspace .payment-form-label,
html:not([data-theme="light"]) body.member-workspace .payment-form-label {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] body.member-workspace .payment-form-input,
html:not([data-theme="light"]) body.member-workspace .payment-form-input {
  background: #0a0a0c !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] body.member-workspace .payment-cancel-btn,
html:not([data-theme="light"]) body.member-workspace .payment-cancel-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
}



/* ==========================================================================
   B. MEMBER DARK MODE (html[data-theme="dark"] or html:not([data-theme="light"]))
   Modern Soft Charcoal / Dark Slate Palette - ZERO Pitch Black!
   - Body Background: #161c28
   - Card / Surface: #242d40
   - Nested Surfaces / Inputs / Code: #1a2130
   - Hover / Active: #2d374d
   ========================================================================== */

/* 1. Body & Atmosphere */
html[data-theme="dark"] body.member-workspace,
html:not([data-theme="light"]) body.member-workspace {
  background-color: #161c28 !important;
  color: #f8fafc !important;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.08) 0%, transparent 55%),
    radial-gradient(circle at 100% 25%, rgba(20, 184, 166, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 0% 75%, rgba(139, 92, 246, 0.05) 0%, transparent 45%) !important;
  background-attachment: fixed !important;
}

/* 2. Top Header Navigation */
html[data-theme="dark"] body.member-workspace header,
html:not([data-theme="light"]) body.member-workspace header {
  background-color: rgba(26, 33, 48, 0.94) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html[data-theme="dark"] body.member-workspace header button[onclick*="openSearchModal"],
html:not([data-theme="light"]) body.member-workspace header button[onclick*="openSearchModal"] {
  background-color: #242d40 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] body.member-workspace header button[onclick*="openSearchModal"]:hover,
html:not([data-theme="light"]) body.member-workspace header button[onclick*="openSearchModal"]:hover {
  background-color: #2c364b !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] body.member-workspace header button[onclick*="openSearchModal"] kbd,
html:not([data-theme="light"]) body.member-workspace header button[onclick*="openSearchModal"] kbd {
  background-color: #1a2130 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
}

html[data-theme="dark"] body.member-workspace #mobile-menu-btn,
html[data-theme="dark"] body.member-workspace #nav-home-btn,
html[data-theme="dark"] body.member-workspace header button[onclick*="toggleTheme"],
html:not([data-theme="light"]) body.member-workspace #mobile-menu-btn,
html:not([data-theme="light"]) body.member-workspace #nav-home-btn,
html:not([data-theme="light"]) body.member-workspace header button[onclick*="toggleTheme"] {
  background-color: #242d40 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] body.member-workspace #mobile-menu-btn:hover,
html[data-theme="dark"] body.member-workspace #nav-home-btn:hover,
html[data-theme="dark"] body.member-workspace header button[onclick*="toggleTheme"]:hover,
html:not([data-theme="light"]) body.member-workspace #mobile-menu-btn:hover,
html:not([data-theme="light"]) body.member-workspace #nav-home-btn:hover,
html:not([data-theme="light"]) body.member-workspace header button[onclick*="toggleTheme"]:hover {
  background-color: #2d374d !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
}

/* Header Action Buttons in Dark Mode */
html[data-theme="dark"] body.member-workspace header a[title*="Katalog"],
html[data-theme="dark"] body.member-workspace header #nav-catalog-btn,
html:not([data-theme="light"]) body.member-workspace header a[title*="Katalog"],
html:not([data-theme="light"]) body.member-workspace header #nav-catalog-btn {
  background-color: #242d40 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #2dd4bf !important;
}
html[data-theme="dark"] body.member-workspace header a[title*="Katalog"]:hover,
html[data-theme="dark"] body.member-workspace header #nav-catalog-btn:hover,
html:not([data-theme="light"]) body.member-workspace header a[title*="Katalog"]:hover,
html:not([data-theme="light"]) body.member-workspace header #nav-catalog-btn:hover {
  background-color: #2d374d !important;
  border-color: rgba(20, 184, 166, 0.5) !important;
  color: #5eead4 !important;
}

html[data-theme="dark"] body.member-workspace header a[href*="member-wallet.html"],
html[data-theme="dark"] body.member-workspace header a[href*="member-credit.html"],
html:not([data-theme="light"]) body.member-workspace header a[href*="member-wallet.html"],
html:not([data-theme="light"]) body.member-workspace header a[href*="member-credit.html"] {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #fbbf24 !important;
}

html[data-theme="dark"] body.member-workspace #lang-switch-member,
html:not([data-theme="light"]) body.member-workspace #lang-switch-member {
  background-color: #242d40 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] body.member-workspace #user-profile-btn,
html:not([data-theme="light"]) body.member-workspace #user-profile-btn {
  background-color: #242d40 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] body.member-workspace #user-profile-btn:hover,
html:not([data-theme="light"]) body.member-workspace #user-profile-btn:hover {
  background-color: #2d374d !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
}

html[data-theme="dark"] body.member-workspace #user-dropdown-menu,
html:not([data-theme="light"]) body.member-workspace #user-dropdown-menu {
  background-color: #242d40 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45) !important;
}
html[data-theme="dark"] body.member-workspace #user-dropdown-menu a:hover,
html[data-theme="dark"] body.member-workspace #user-dropdown-menu button:hover,
html:not([data-theme="light"]) body.member-workspace #user-dropdown-menu a:hover,
html:not([data-theme="light"]) body.member-workspace #user-dropdown-menu button:hover {
  background-color: #2d374d !important;
}

/* 3. Portal Studio Cards */
html[data-theme="dark"] body.member-workspace #portal-studios-grid > div[id^="card-studio-"],
html:not([data-theme="light"]) body.member-workspace #portal-studios-grid > div[id^="card-studio-"] {
  background: linear-gradient(180deg, #242d40 0%, #1c2333 100%) !important;
  border-width: 1px !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] body.member-workspace #card-studio-image,
html:not([data-theme="light"]) body.member-workspace #card-studio-image {
  border-color: rgba(245, 158, 11, 0.45) !important;
}
html[data-theme="dark"] body.member-workspace #card-studio-image:hover,
html:not([data-theme="light"]) body.member-workspace #card-studio-image:hover {
  border-color: rgba(245, 158, 11, 0.8) !important;
  box-shadow: 0 20px 45px -10px rgba(245, 158, 11, 0.25) !important;
}
html[data-theme="dark"] body.member-workspace #card-studio-video,
html:not([data-theme="light"]) body.member-workspace #card-studio-video {
  border-color: rgba(20, 184, 166, 0.45) !important;
}
html[data-theme="dark"] body.member-workspace #card-studio-video:hover,
html:not([data-theme="light"]) body.member-workspace #card-studio-video:hover {
  border-color: rgba(20, 184, 166, 0.8) !important;
  box-shadow: 0 20px 45px -10px rgba(20, 184, 166, 0.25) !important;
}
html[data-theme="dark"] body.member-workspace #card-studio-animation,
html:not([data-theme="light"]) body.member-workspace #card-studio-animation {
  border-color: rgba(139, 92, 246, 0.45) !important;
}
html[data-theme="dark"] body.member-workspace #card-studio-animation:hover,
html:not([data-theme="light"]) body.member-workspace #card-studio-animation:hover {
  border-color: rgba(139, 92, 246, 0.8) !important;
  box-shadow: 0 20px 45px -10px rgba(139, 92, 246, 0.25) !important;
}
html[data-theme="dark"] body.member-workspace #card-studio-film,
html:not([data-theme="light"]) body.member-workspace #card-studio-film {
  border-color: rgba(244, 63, 94, 0.45) !important;
}
html[data-theme="dark"] body.member-workspace #card-studio-film:hover,
html:not([data-theme="light"]) body.member-workspace #card-studio-film:hover {
  border-color: rgba(244, 63, 94, 0.8) !important;
  box-shadow: 0 20px 45px -10px rgba(244, 63, 94, 0.25) !important;
}

html[data-theme="dark"] body.member-workspace .portal-studio-shortcuts button,
html[data-theme="dark"] body.member-workspace #portal-studios-grid button.group\/item,
html:not([data-theme="light"]) body.member-workspace .portal-studio-shortcuts button,
html:not([data-theme="light"]) body.member-workspace #portal-studios-grid button.group\/item {
  background-color: #2d374d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] body.member-workspace .portal-studio-shortcuts button:hover,
html[data-theme="dark"] body.member-workspace #portal-studios-grid button.group\/item:hover,
html:not([data-theme="light"]) body.member-workspace .portal-studio-shortcuts button:hover,
html:not([data-theme="light"]) body.member-workspace #portal-studios-grid button.group\/item:hover {
  background-color: #384560 !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
}

/* 4. Portal Stats Bar & Empty State & Academy Banner */
html[data-theme="dark"] body.member-workspace #portal-browse-academy-banner,
html:not([data-theme="light"]) body.member-workspace #portal-browse-academy-banner {
  background: linear-gradient(135deg, rgba(36, 45, 64, 0.95) 0%, rgba(20, 184, 166, 0.15) 50%, rgba(28, 35, 51, 0.95) 100%) !important;
  border-color: rgba(20, 184, 166, 0.4) !important;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] body.member-workspace #portal-stats-bar,
html[data-theme="dark"] body.member-workspace #portal-empty-studios,
html:not([data-theme="light"]) body.member-workspace #portal-stats-bar,
html:not([data-theme="light"]) body.member-workspace #portal-empty-studios {
  background: linear-gradient(180deg, #242d40 0%, #1c2333 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.3) !important;
}

/* 5. Studio Sidebar Drawer */
html[data-theme="dark"] body.member-workspace #sidebar-drawer,
html:not([data-theme="light"]) body.member-workspace #sidebar-drawer {
  background-color: transparent !important;
}
@media (max-width: 1023px) {
  html[data-theme="dark"] body.member-workspace #sidebar-drawer,
  html:not([data-theme="light"]) body.member-workspace #sidebar-drawer {
    background-color: #1c2333 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }
}

html[data-theme="dark"] body.member-workspace #sidebar-studio-header,
html:not([data-theme="light"]) body.member-workspace #sidebar-studio-header {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, #293348 60%, #1c2333 100%) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}
html[data-theme="dark"] body.member-workspace #btn-prev-studio,
html[data-theme="dark"] body.member-workspace #btn-next-studio,
html:not([data-theme="light"]) body.member-workspace #btn-prev-studio,
html:not([data-theme="light"]) body.member-workspace #btn-next-studio {
  background-color: #242d40 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] body.member-workspace #btn-prev-studio:hover,
html[data-theme="dark"] body.member-workspace #btn-next-studio:hover,
html:not([data-theme="light"]) body.member-workspace #btn-prev-studio:hover,
html:not([data-theme="light"]) body.member-workspace #btn-next-studio:hover {
  background-color: #2d374d !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
}

html[data-theme="dark"] body.member-workspace #sidebar-drawer > div:not(#sidebar-studio-header),
html[data-theme="dark"] body.member-workspace #sidebar-accordion-container > div,
html:not([data-theme="light"]) body.member-workspace #sidebar-drawer > div:not(#sidebar-studio-header),
html:not([data-theme="light"]) body.member-workspace #sidebar-accordion-container > div {
  background-color: #242d40 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}
html[data-theme="dark"] body.member-workspace .sidebar-sub-item:not(.active),
html:not([data-theme="light"]) body.member-workspace .sidebar-sub-item:not(.active) {
  color: #cbd5e1 !important;
  background-color: transparent !important;
}
html[data-theme="dark"] body.member-workspace .sidebar-sub-item:hover:not(.active),
html:not([data-theme="light"]) body.member-workspace .sidebar-sub-item:hover:not(.active) {
  background-color: #2d374d !important;
  color: #ffffff !important;
}
html[data-theme="dark"] body.member-workspace .sidebar-sub-item.active,
html:not([data-theme="light"]) body.member-workspace .sidebar-sub-item.active {
  background-color: rgba(245, 158, 11, 0.2) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  color: #fbbf24 !important;
}

/* 6. Studio Dynamic Content Area (Modul, Glosarium, Builder, Galeri) */
/* Eliminate all harsh pitch-black backgrounds */
html[data-theme="dark"] body.member-workspace #studio-content-area .bg-gray-950,
html[data-theme="dark"] body.member-workspace #studio-content-area .bg-gray-900,
html[data-theme="dark"] body.member-workspace #studio-content-area .bg-gray-900\/90,
html[data-theme="dark"] body.member-workspace #studio-content-area .bg-gray-900\/80,
html[data-theme="dark"] body.member-workspace #studio-content-area .bg-gray-900\/60,
html[data-theme="dark"] body.member-workspace #studio-content-area .bg-gray-900\/50,
html[data-theme="dark"] body.member-workspace #studio-content-area .bg-gray-900\/40,
html[data-theme="dark"] body.member-workspace #studio-content-area .bg-black\/60,
html[data-theme="dark"] body.member-workspace #studio-content-area .bg-black\/50,
html[data-theme="dark"] body.member-workspace #studio-content-area .bg-black\/40,
html:not([data-theme="light"]) body.member-workspace #studio-content-area .bg-gray-950,
html:not([data-theme="light"]) body.member-workspace #studio-content-area .bg-gray-900,
html:not([data-theme="light"]) body.member-workspace #studio-content-area .bg-gray-900\/90,
html:not([data-theme="light"]) body.member-workspace #studio-content-area .bg-gray-900\/80,
html:not([data-theme="light"]) body.member-workspace #studio-content-area .bg-gray-900\/60,
html:not([data-theme="light"]) body.member-workspace #studio-content-area .bg-gray-900\/50,
html:not([data-theme="light"]) body.member-workspace #studio-content-area .bg-gray-900\/40,
html:not([data-theme="light"]) body.member-workspace #studio-content-area .bg-black\/60,
html:not([data-theme="light"]) body.member-workspace #studio-content-area .bg-black\/50,
html:not([data-theme="light"]) body.member-workspace #studio-content-area .bg-black\/40 {
  background-color: #242d40 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] body.member-workspace #studio-content-area pre,
html[data-theme="dark"] body.member-workspace #studio-content-area .font-mono.bg-black\/40,
html[data-theme="dark"] body.member-workspace #studio-content-area .font-mono.bg-gray-900\/90,
html:not([data-theme="light"]) body.member-workspace #studio-content-area pre,
html:not([data-theme="light"]) body.member-workspace #studio-content-area .font-mono.bg-black\/40,
html:not([data-theme="light"]) body.member-workspace #studio-content-area .font-mono.bg-gray-900\/90 {
  background-color: #171d2a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] body.member-workspace #studio-content-area .border-gray-800,
html[data-theme="dark"] body.member-workspace #studio-content-area .border-gray-700,
html:not([data-theme="light"]) body.member-workspace #studio-content-area .border-gray-800,
html:not([data-theme="light"]) body.member-workspace #studio-content-area .border-gray-700 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] body.member-workspace .table-container,
html:not([data-theme="light"]) body.member-workspace .table-container {
  background-color: #242d40 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] body.member-workspace .table-container table,
html:not([data-theme="light"]) body.member-workspace .table-container table {
  background-color: #242d40 !important;
}
html[data-theme="dark"] body.member-workspace .table-container thead tr,
html:not([data-theme="light"]) body.member-workspace .table-container thead tr {
  background-color: #171d2a !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] body.member-workspace .table-container thead th,
html:not([data-theme="light"]) body.member-workspace .table-container thead th {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] body.member-workspace .table-container tbody,
html:not([data-theme="light"]) body.member-workspace .table-container tbody {
  background-color: #242d40 !important;
}
html[data-theme="dark"] body.member-workspace .table-container tbody tr,
html:not([data-theme="light"]) body.member-workspace .table-container tbody tr {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] body.member-workspace .table-container tbody tr:hover,
html:not([data-theme="light"]) body.member-workspace .table-container tbody tr:hover {
  background-color: #2c364b !important;
}
html[data-theme="dark"] body.member-workspace .table-container td,
html:not([data-theme="light"]) body.member-workspace .table-container td {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] body.member-workspace .bg-amber-950\/20,
html:not([data-theme="light"]) body.member-workspace .bg-amber-950\/20 {
  background-color: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}
html[data-theme="dark"] body.member-workspace .bg-rose-950\/20,
html:not([data-theme="light"]) body.member-workspace .bg-rose-950\/20 {
  background-color: rgba(244, 63, 94, 0.14) !important;
  border-color: rgba(244, 63, 94, 0.35) !important;
}

/* Modals in Dark Mode */
html[data-theme="dark"] body.member-workspace #image-lightbox-modal > div,
html[data-theme="dark"] body.member-workspace #search-modal > div,
html[data-theme="dark"] body.member-workspace #chapter-quiz-gate-modal > div,
html:not([data-theme="light"]) body.member-workspace #image-lightbox-modal > div,
html:not([data-theme="light"]) body.member-workspace #search-modal > div,
html:not([data-theme="light"]) body.member-workspace #chapter-quiz-gate-modal > div {
  background-color: #242d40 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
html[data-theme="dark"] body.member-workspace #image-lightbox-modal .bg-gray-950,
html[data-theme="dark"] body.member-workspace #search-modal .border-b,
html:not([data-theme="light"]) body.member-workspace #image-lightbox-modal .bg-gray-950,
html:not([data-theme="light"]) body.member-workspace #search-modal .border-b {
  background-color: #1c2333 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Inputs & Form Controls in Dark Mode */
html[data-theme="dark"] body.member-workspace input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] body.member-workspace textarea,
html[data-theme="dark"] body.member-workspace select,
html:not([data-theme="light"]) body.member-workspace input:not([type="checkbox"]):not([type="radio"]),
html:not([data-theme="light"]) body.member-workspace textarea,
html:not([data-theme="light"]) body.member-workspace select {
  background-color: #1a2130 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] body.member-workspace input:focus,
html[data-theme="dark"] body.member-workspace textarea:focus,
html[data-theme="dark"] body.member-workspace select:focus,
html:not([data-theme="light"]) body.member-workspace input:focus,
html:not([data-theme="light"]) body.member-workspace textarea:focus,
html:not([data-theme="light"]) body.member-workspace select:focus {
  border-color: #f59e0b !important;
  background-color: #242d40 !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) !important;
}

/* ==========================================================================
   PRESET APPLIED TOAST NOTIFICATION (GLOBAL STACKABLE TOAST)
   ========================================================================== */
#preset-toast-container,
.preset-toast-container {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 280px;
  width: calc(100% - 48px);
}

.preset-toast-item {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background-color: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  font-size: 12.5px;
  line-height: 1.35;
  box-sizing: border-box;
  animation: presetToastSlideIn 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
  word-break: break-word;
}

/* Dark mode styling (supports [data-theme="dark"], .dark on html/body) */
[data-theme="dark"] .preset-toast-item,
html.dark .preset-toast-item,
body.dark .preset-toast-item,
html:not([data-theme="light"]) .preset-toast-item {
  background-color: #18181b;
  color: #f4f4f5;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Light mode explicit override */
[data-theme="light"] .preset-toast-item,
html.light .preset-toast-item,
body.light .preset-toast-item {
  background-color: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.preset-toast-item.is-leaving {
  animation: presetToastSlideOut 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes presetToastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes presetToastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.preset-toast-icon {
  flex-shrink: 0;
  margin-top: 1.5px;
  color: #22c55e;
}

.preset-toast-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1.5px;
}

.preset-toast-title {
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: inherit;
}

.preset-toast-name {
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
  color: #64748b;
}

[data-theme="dark"] .preset-toast-name,
html.dark .preset-toast-name,
body.dark .preset-toast-name,
html:not([data-theme="light"]) .preset-toast-name {
  color: #a1a1aa;
}

[data-theme="light"] .preset-toast-name,
html.light .preset-toast-name,
body.light .preset-toast-name {
  color: #64748b;
}

/* -------------------------------------------------------------------------- */
/* Gallery Asset Lightbox Modal - Dual Theme (Dark & Light)                   */
/* -------------------------------------------------------------------------- */
#gallery-lightbox-overlay {
  box-sizing: border-box;
  --lb-backdrop: rgba(3, 5, 8, 0.88);
  --lb-backdrop-filter: blur(20px) saturate(160%);
  --lb-card-bg: #090b10;
  --lb-card-border: rgba(255, 255, 255, 0.08);
  --lb-card-shadow: 0 25px 70px rgba(0, 0, 0, 0.95);
  
  --lb-header-bg: #0f1219;
  --lb-header-border: rgba(255, 255, 255, 0.06);
  
  --lb-stage-bg: #050609;
  --lb-stage-border: rgba(255, 255, 255, 0.06);
  --lb-img-border: rgba(255, 255, 255, 0.08);
  
  --lb-inspector-bg: #0d0f16;
  
  --lb-prompt-bg: rgba(0, 0, 0, 0.35);
  --lb-prompt-border: rgba(255, 255, 255, 0.06);
  --lb-prompt-text: #f1f5f9;
  
  --lb-param-bg: rgba(255, 255, 255, 0.025);
  --lb-param-border: rgba(255, 255, 255, 0.05);
  --lb-param-label: #64748b;
  --lb-param-val: #f1f5f9;
  --lb-param-workflow: #fcd34d;
  
  --lb-footer-bg: #0f121a;
  --lb-footer-border: rgba(255, 255, 255, 0.06);
  
  --lb-btn-sec-bg: rgba(255, 255, 255, 0.06);
  --lb-btn-sec-border: rgba(255, 255, 255, 0.1);
  --lb-btn-sec-text: #ffffff;
  --lb-btn-sec-hover: rgba(255, 255, 255, 0.12);
  
  --lb-icon-btn-bg: rgba(255, 255, 255, 0.06);
  --lb-icon-btn-border: rgba(255, 255, 255, 0.08);
  --lb-icon-btn-text: #94a3b8;
  --lb-icon-btn-hover-bg: rgba(255, 255, 255, 0.14);
  --lb-icon-btn-hover-text: #ffffff;
  
  --lb-badge-model-bg: rgba(255, 255, 255, 0.05);
  --lb-badge-model-border: rgba(255, 255, 255, 0.08);
  --lb-badge-model-text: #e2e8f0;
  
  --lb-badge-ratio-bg: rgba(255, 255, 255, 0.03);
  --lb-badge-ratio-border: rgba(255, 255, 255, 0.06);
  --lb-badge-ratio-text: #94a3b8;
  
  --lb-date-text: #64748b;
  
  --lb-pill-full-bg: rgba(10, 12, 18, 0.75);
  --lb-pill-full-border: rgba(255, 255, 255, 0.12);
  --lb-pill-full-text: #ffffff;
}

[data-theme="light"] #gallery-lightbox-overlay,
html[data-theme="light"] #gallery-lightbox-overlay,
body[data-theme="light"] #gallery-lightbox-overlay {
  --lb-backdrop: rgba(15, 23, 42, 0.5);
  --lb-backdrop-filter: blur(16px) saturate(120%);
  --lb-card-bg: #ffffff;
  --lb-card-border: rgba(0, 0, 0, 0.08);
  --lb-card-shadow: 0 25px 70px rgba(15, 23, 42, 0.18);
  
  --lb-header-bg: #f8fafc;
  --lb-header-border: #e2e8f0;
  
  --lb-stage-bg: #f1f5f9;
  --lb-stage-border: #e2e8f0;
  --lb-img-border: rgba(0, 0, 0, 0.06);
  
  --lb-inspector-bg: #ffffff;
  
  --lb-prompt-bg: #f8fafc;
  --lb-prompt-border: #e2e8f0;
  --lb-prompt-text: #0f172a;
  
  --lb-param-bg: #f8fafc;
  --lb-param-border: #e2e8f0;
  --lb-param-label: #64748b;
  --lb-param-val: #0f172a;
  --lb-param-workflow: #b45309;
  
  --lb-footer-bg: #ffffff;
  --lb-footer-border: #f1f5f9;
  
  --lb-btn-sec-bg: #f1f5f9;
  --lb-btn-sec-border: #cbd5e1;
  --lb-btn-sec-text: #0f172a;
  --lb-btn-sec-hover: #e2e8f0;
  
  --lb-icon-btn-bg: #f1f5f9;
  --lb-icon-btn-border: #cbd5e1;
  --lb-icon-btn-text: #475569;
  --lb-icon-btn-hover-bg: #e2e8f0;
  --lb-icon-btn-hover-text: #0f172a;
  
  --lb-badge-model-bg: #f1f5f9;
  --lb-badge-model-border: #e2e8f0;
  --lb-badge-model-text: #1e293b;
  
  --lb-badge-ratio-bg: #f8fafc;
  --lb-badge-ratio-border: #e2e8f0;
  --lb-badge-ratio-text: #64748b;
  
  --lb-date-text: #94a3b8;
  
  --lb-pill-full-bg: rgba(255, 255, 255, 0.85);
  --lb-pill-full-border: rgba(0, 0, 0, 0.1);
  --lb-pill-full-text: #0f172a;
}

/* =============================================================================
   ANTI-GRAVITY (SUBTLE FLOATING) & STAGGERED FADE-UP ANIMATION SYSTEM
   Engineered for GPU Acceleration, Zero Layout Shift, and Weightless Drift
   ============================================================================= */

/* 1. Global Performance & Hardware Acceleration */
.ag-hero-item,
.ag-reveal {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 2. Hero Staggered Fade-Up (Initial Load) */
.ag-hero-item {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  animation-name: agFadeUp;
  animation-duration: 1.1s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
}

/* Stagger Delays for Hero Elements (staggered by 0.2s) */
.ag-hero-item.ag-delay-1 { animation-delay: 0.1s; }
.ag-hero-item.ag-delay-2 { animation-delay: 0.3s; }
.ag-hero-item.ag-delay-3 { animation-delay: 0.5s; }
.ag-hero-item.ag-delay-4 { animation-delay: 0.7s; }

@keyframes agFadeUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* 3. Anti-Gravity Floating (Infinite Weightless Drift after Landing) */
.ag-hero-item.is-landed {
  opacity: 1;
  animation-fill-mode: none;
}

.ag-hero-item.is-landed.ag-float-1 {
  animation: agFloatDrift1 5.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.ag-hero-item.is-landed.ag-float-2 {
  animation: agFloatDrift2 6.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
  animation-delay: -1.2s;
}

.ag-hero-item.is-landed.ag-float-3 {
  animation: agFloatDrift3 7.0s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
  animation-delay: -2.5s;
}

.ag-hero-item.is-landed.ag-float-4 {
  animation: agFloatDrift4 5.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
  animation-delay: -3.6s;
}

@keyframes agFloatDrift1 {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -5px, 0); }
  100% { transform: translate3d(0, -9px, 0); }
}

@keyframes agFloatDrift2 {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -6px, 0); }
  100% { transform: translate3d(0, -10px, 0); }
}

@keyframes agFloatDrift3 {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -4px, 0); }
  100% { transform: translate3d(0, -8px, 0); }
}

@keyframes agFloatDrift4 {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -5px, 0); }
  100% { transform: translate3d(0, -9px, 0); }
}

/* 4. Scroll-Triggered Fade-Up Elements (IntersectionObserver) */
.ag-reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.ag-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Scroll Stagger Delays */
.ag-reveal.ag-delay-1 { transition-delay: 0.1s; }
.ag-reveal.ag-delay-2 { transition-delay: 0.2s; }
.ag-reveal.ag-delay-3 { transition-delay: 0.3s; }
.ag-reveal.ag-delay-4 { transition-delay: 0.4s; }
.ag-reveal.ag-delay-5 { transition-delay: 0.5s; }
.ag-reveal.ag-delay-6 { transition-delay: 0.6s; }

/* 5. Accessibility Support: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ag-hero-item,
  .ag-hero-item.is-landed,
  .ag-reveal,
  .premium-testi-card,
  .faq-item,
  .faq-body-collapse,
  .faq-answer-text,
  .faq-chevron {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =============================================================================
   PREMIUM TESTIMONIALS & BUTTERY-SMOOTH FAQ REDESIGN
   ============================================================================= */

/* --- 1. PREMIUM TESTIMONIAL CARDS --- */
.premium-testi-card {
  position: relative;
  border-radius: 24px;
  padding: 2.5rem 2rem;
  background: 
    linear-gradient(135deg, rgba(22, 23, 28, 0.8), rgba(12, 13, 16, 0.9)) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(245, 158, 11, 0.3) 45%, rgba(255, 255, 255, 0.03) 100%) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.35);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
}

/* Light Mode Testimonial Card */
[data-theme="light"] .premium-testi-card,
html[data-theme="light"] .premium-testi-card,
body[data-theme="light"] .premium-testi-card {
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(245, 158, 11, 0.35) 45%, rgba(0, 0, 0, 0.06) 100%) border-box;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
}

/* Anti-Gravity Hover Effect on Testimonials */
.premium-testi-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.55), 0 0 30px -5px rgba(245, 158, 11, 0.2);
}

[data-theme="light"] .premium-testi-card:hover,
html[data-theme="light"] .premium-testi-card:hover,
body[data-theme="light"] .premium-testi-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.14), 0 0 25px -5px rgba(245, 158, 11, 0.22);
}

/* Premium Gold Stars with Subtle Glow */
.testi-stars {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #f59e0b;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.55));
}


/* --- 2. ELEGANT & BUTTERY-SMOOTH FAQ ACCORDION --- */
.faq-item {
  position: relative;
  background: rgba(18, 19, 24, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  border: none;
  border-left: 3px solid transparent;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

[data-theme="light"] .faq-item,
html[data-theme="light"] .faq-item,
body[data-theme="light"] .faq-item {
  background: #FAFAFA;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* Hover State */
.faq-item:hover {
  box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.35);
  background: rgba(24, 25, 32, 0.85);
}

[data-theme="light"] .faq-item:hover,
html[data-theme="light"] .faq-item:hover,
body[data-theme="light"] .faq-item:hover {
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.06);
  background: #ffffff;
}

/* Active / Open State */
.faq-item.is-open {
  border-left: 3px solid #f59e0b;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.4), -4px 0 24px -2px rgba(245, 158, 11, 0.35);
  background: rgba(22, 23, 30, 0.95);
}

[data-theme="light"] .faq-item.is-open,
html[data-theme="light"] .faq-item.is-open,
body[data-theme="light"] .faq-item.is-open {
  border-left: 3px solid #f59e0b;
  box-shadow: 0 18px 38px -10px rgba(0, 0, 0, 0.08), -4px 0 18px -2px rgba(245, 158, 11, 0.22);
  background: #ffffff;
}

/* Question Header & Title */
.faq-header {
  user-select: none;
}

.faq-question {
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.is-open .faq-question {
  color: #f59e0b !important;
}

[data-theme="light"] .faq-question {
  color: #0f172a;
}

/* Smooth Chevron Icon Rotation */
.faq-chevron {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
  will-change: transform;
}

.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}

.faq-icon-wrapper {
  transition: all 0.3s ease;
}

.faq-item.is-open .faq-icon-wrapper {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
}

/* CSS Grid Height Reveal (Zero Snapping, Buttery Smooth) */
.faq-body-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.is-open .faq-body-collapse {
  grid-template-rows: 1fr;
}

.faq-body-inner {
  overflow: hidden;
}

/* Subtle Fade-in & Translate from Top for Answer Content */
.faq-answer-text {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.faq-item.is-open .faq-answer-text {
  opacity: 1;
  transform: translateY(0);
}

[data-theme="light"] .faq-answer-text {
  color: #475569;
}

/* ==========================================================================
   ADMIN QRIS LIGHT & DARK THEME MASTER STYLING
   ========================================================================== */
[data-theme="light"] .qris-admin-panel {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
}

[data-theme="light"] .qris-admin-panel h1,
[data-theme="light"] .qris-admin-panel h2,
[data-theme="light"] .qris-admin-panel h3 {
  color: #0f172a !important;
}

[data-theme="light"] .qris-admin-panel .text-white {
  color: #0f172a !important;
}

[data-theme="light"] .qris-admin-panel .text-slate-400,
[data-theme="light"] .qris-admin-panel .text-slate-300 {
  color: #64748b !important;
}

[data-theme="light"] .qris-admin-input {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .qris-admin-input:focus {
  background-color: #ffffff !important;
  border-color: #f59e0b !important;
}

[data-theme="light"] .qris-subtle-box {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* =============================================================================
   STICKY NAVBAR & SIDEBAR ENFORCEMENT (Admin & Member Workspaces)
   ============================================================================= */

/* 1. Rigidly Sticky Top Navbar */
header.sticky,
header.glass-nav,
body.admin-workspace header,
body.member-workspace header,
#body-root header {
  position: sticky !important;
  top: 0 !important;
  z-index: 45 !important;
}

/* 2. Rigidly Sticky Sidebar on Desktop (Content scrolls while sidebar stays) */
@media (min-width: 1024px) {
  aside#admin-sidebar,
  aside#sidebar-drawer,
  body.admin-workspace aside#admin-sidebar,
  body.member-workspace aside#sidebar-drawer,
  #body-root aside#admin-sidebar {
    position: sticky !important;
    top: 5rem !important; /* 4rem header height + 1rem breathing room */
    align-self: flex-start !important;
    max-height: calc(100vh - 5.5rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    flex-shrink: 0 !important;
  }
}

/* =============================================================================
   UNIVERSAL FLOATING "BACK TO TOP" BUTTON (Admin & Member)
   ============================================================================= */
#ramukatha-back-to-top {
  position: fixed !important;
  bottom: 1.75rem !important;
  right: 1.75rem !important;
  z-index: 9999 !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 1rem !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #0c0c0c !important;
  box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.45), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(251, 191, 36, 0.7) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  outline: none !important;
}

#ramukatha-back-to-top:hover {
  transform: translateY(-4px) scale(1.08) !important;
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  box-shadow: 0 16px 32px -4px rgba(245, 158, 11, 0.6), 0 10px 12px -5px rgba(0, 0, 0, 0.4) !important;
}

#ramukatha-back-to-top:active {
  transform: translateY(0) scale(0.94) !important;
}

#ramukatha-back-to-top.btt-hidden {
  opacity: 0 !important;
  transform: translateY(1.5rem) scale(0.8) !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

#ramukatha-back-to-top.btt-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* =============================================================================
   MOBILE RESPONSIVENESS & OVERFLOW CONTAINMENT (UI/UX HARDENING)
   ============================================================================= */

/* 1. Prevent Horizontal Page Rupture on Small Devices (<1024px and <640px) */
@media (max-width: 1023px) {
  /* Main Containers */
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Safe image and media containment */
  img, video, canvas, iframe {
    max-width: 100% !important;
    height: auto;
  }

  /* Text & Heading Flow */
  h1, h2, h3, h4, .section-title, .hero-title-main {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Ensure tables scroll smoothly with touch momentum */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
  }
}

/* 2. Extra Small Screens (< 640px - iPhone SE / Mini & Android compact) */
@media (max-width: 639px) {
  /* Responsive Heading Adjustments */
  h1, .hero-title-main {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }

  h2, .section-title {
    font-size: clamp(1.35rem, 5.5vw, 1.85rem) !important;
    line-height: 1.25 !important;
  }

  .section-desc {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }

  /* Mobile Sidebar Width constraint */
  #admin-sidebar,
  #sidebar-drawer,
  aside#admin-sidebar,
  aside#sidebar-drawer {
    width: 82% !important;
    max-width: 300px !important;
  }

  /* Reduce unnecessary padding on very small screens */
  .p-6 {
    padding: 1rem !important;
  }

  .p-8 {
    padding: 1.25rem !important;
  }
}


/* Prevent Flexbox blowup from wide tables/elements without breaking max-width constraints */
main,
.flex-1,
.card-item,
.overflow-x-auto {
  min-width: 0 !important;
}

/* Global Master max-w-7xl Alignment (Uniform with Header Navbar) */
.max-w-7xl,
#view-portal,
#view-studio,
main.max-w-7xl,
div.max-w-7xl {
  width: 100% !important;
  max-width: 80rem !important; /* 1280px (Tailwind max-w-7xl) */
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Studio Workspace & Flex Content Area Containment */
#studio-content-area {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Studio & Curriculum Tables Container */
.table-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  border-radius: 1rem;
}

.table-container table,
.bilingual-table {
  width: 100% !important;
  border-collapse: collapse;
}

/* ==========================================================================
   WELCOME MODAL: DUAL THEME (LIGHT & DARK) + EXCLUSIVE ANIMATIONS
   ========================================================================== */
@keyframes welcomeRocketFloat {
  0%, 100% {
    transform: translateY(0px) rotate(-3deg);
  }
  50% {
    transform: translateY(-7px) rotate(3deg);
  }
}

@keyframes welcomeSpinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes welcomeModalPop {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
  }
  65% {
    opacity: 1;
    transform: scale(1.015) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes welcomeBtnShimmerSweep {
  0%, 60% {
    transform: translateX(-150%);
  }
  100% {
    transform: translateX(150%);
  }
}

.welcome-card-animated {
  animation: welcomeModalPop 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.welcome-rocket-icon {
  animation: welcomeRocketFloat 3.2s ease-in-out infinite;
}

.animate-spin-slow {
  animation: welcomeSpinSlow 10s linear infinite;
}

.welcome-btn-shimmer {
  animation: welcomeBtnShimmerSweep 3.5s ease-in-out infinite;
}

/* Strict Light/Dark Typography Overrides for Welcome Modal */
#welcome-modal .welcome-title-prefix {
  color: #0f172a !important;
  display: inline-block;
  transition: color 0.3s ease;
}
html[data-theme="dark"] #welcome-modal .welcome-title-prefix,
[data-theme="dark"] #welcome-modal .welcome-title-prefix {
  color: #ffffff !important;
}

#welcome-modal .welcome-title-brand {
  background: linear-gradient(135deg, #b45309 0%, #d97706 45%, #f59e0b 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}
html[data-theme="dark"] #welcome-modal .welcome-title-brand,
[data-theme="dark"] #welcome-modal .welcome-title-brand {
  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 50%, #f59e0b 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}