/* =============================================
   SUTRA AI — V2 GLOBAL OVERRIDE v2.0
   
   Drop-in Liquid Glass theme layer.
   Import this file on ANY page to instantly 
   apply the Liquid Glass design system.
   
   FIXES: 
   - No more circular variable references
   - Full light mode support
   - All text explicitly visible
   ============================================= */

/* ═══════════════════════════════════════════════
   DARK MODE (DEFAULT) — Map old vars to new values
   Uses HARDCODED values to avoid circular refs.
   ═══════════════════════════════════════════════ */
:root,
[data-theme="dark"],
html.dark {
  /* Backgrounds */
  --bg:            #03030a;
  --bg2:           #06060f;
  --bg-primary:    #03030a;
  --bg-secondary:  #06060f;
  --bg-card:       rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(255, 255, 255, 0.06);
  --bg-input:      rgba(255, 255, 255, 0.05);
  --bg-sidebar:    rgba(6, 6, 15, 0.82);
  --bg-sidebar-item: rgba(255, 255, 255, 0.03);
  --card:          rgba(255, 255, 255, 0.03);

  /* Glass */
  --glass:         rgba(255, 255, 255, 0.03);
  --glass-border:  rgba(255, 255, 255, 0.07);
  --glass-hover:   rgba(255, 255, 255, 0.06);

  /* Borders */
  --border-color:  rgba(255, 255, 255, 0.07);
  --border-hover:  rgba(255, 255, 255, 0.14);
  --border:        rgba(255, 255, 255, 0.07);

  /* TEXT — Hardcoded, NO circular refs */
  --text:          #EEEEF5;
  --text2:         rgba(238, 238, 245, 0.65);
  --text3:         rgba(238, 238, 245, 0.35);
  --text-primary:  #EEEEF5;
  --text-secondary: rgba(238, 238, 245, 0.65);
  --text-tertiary: rgba(238, 238, 245, 0.35);
  --text-muted:    rgba(238, 238, 245, 0.20);
  --text-disabled: rgba(238, 238, 245, 0.12);

  /* Brand */
  --saffron:       #FF9933;
  --accent-saffron: #FF9933;
  --accent-violet: #7B5CEA;
  --indigo:        #7B5CEA;
  --teal:          #00E87A;
  --accent:        #FF9933;

  /* Shadows */
  --shadow-card:   0 4px 24px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset;
  --shadow-modal:  0 20px 60px rgba(0,0,0,0.6);
  --shadow-card-soft: 0 24px 60px rgba(0,0,0,0.35);

  /* Radius */
  --radius:        20px;
  --radius-sm:     12px;
  --radius-lg:     28px;

  /* Scrollbar */
  --scrollbar-bg:    rgba(255,255,255,0.05);
  --scrollbar-thumb: rgba(255,255,255,0.16);
}

/* ═══════════════════════════════════════════════
   LIGHT MODE — Full Liquid Glass Light variant
   ═══════════════════════════════════════════════ */
[data-theme="light"] {
  /* Backgrounds — warm parchment feel */
  --bg:            #f5f4ef;
  --bg2:           #eeede8;
  --bg-primary:    #f5f4ef;
  --bg-secondary:  #ffffff;
  --bg-card:       rgba(255, 255, 255, 0.70);
  --bg-card-hover: rgba(255, 255, 255, 0.90);
  --bg-input:      rgba(0, 0, 0, 0.05);
  --bg-sidebar:    #ffffff;
  --bg-sidebar-item: rgba(10, 10, 20, 0.05);
  --card:          rgba(255, 255, 255, 0.70);
  --bg-void:       #f5f4ef;
  --bg-deep:       #eeede8;
  --bg-surface:    #ffffff;
  --bg-elevated:   #ffffff;

  /* Glass — lighter, frosted */
  --glass:         rgba(255, 255, 255, 0.60);
  --glass-border:  rgba(0, 0, 0, 0.08);
  --glass-hover:   rgba(255, 255, 255, 0.85);
  --glass-base:    rgba(255, 255, 255, 0.60);
  --glass-border-hover: rgba(0, 0, 0, 0.14);

  /* Borders */
  --border-color:  rgba(10, 10, 20, 0.12);
  --border-hover:  rgba(10, 10, 20, 0.20);
  --border:        rgba(10, 10, 20, 0.12);

  /* TEXT — Dark text on light bg */
  --text:          #0a0a14;
  --text2:         #4a4a60;
  --text3:         #9a9ab0;
  --text-primary:  rgba(10, 10, 20, 0.92);
  --text-secondary: rgba(10, 10, 20, 0.60);
  --text-tertiary: rgba(10, 10, 20, 0.40);
  --text-muted:    rgba(10, 10, 20, 0.24);
  --text-disabled: rgba(10, 10, 20, 0.12);

  /* Brand — slightly deeper for contrast on light */
  --saffron:       #e07a00;
  --accent-saffron: #e07a00;
  --accent-green:  #16a34a;
  --accent-red:    #dc2626;
  --accent-indigo: #4f46e5;
  --accent:        #e07a00;

  /* Shadows — subtle on light */
  --shadow-card:   0 4px 24px rgba(0,0,0,0.10);
  --shadow-modal:  0 20px 60px rgba(0,0,0,0.20);
  --shadow-card-soft: 0 24px 50px rgba(124, 99, 69, 0.18);
  --glass-shadow:  0 4px 24px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.80) inset;
  --glass-shadow-hover: 0 16px 48px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.90) inset;

  /* Scrollbar */
  --scrollbar-bg:    rgba(0,0,0,0.05);
  --scrollbar-thumb: rgba(0,0,0,0.20);
}

/* ═══════════════════════════════════════════════
   BODY & GLOBAL (dark default)
   ═══════════════════════════════════════════════ */
body {
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(255,153,51,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 70% 80%, rgba(0,207,255,0.03) 0%, transparent 70%),
    var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-theme="light"] body,
body[data-theme="light"] {
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(255,153,51,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 70% 80%, rgba(99,102,241,0.03) 0%, transparent 70%),
    var(--bg) !important;
  color: var(--text) !important;
}

/* ═══════════════════════════════════════════════
   EXPLICIT TEXT COLOR OVERRIDES
   Ensures text is ALWAYS visible regardless of
   what the inline page styles do.
   ═══════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.dash-greeting,
.section-title,
.section-h2 {
  color: var(--text) !important;
  font-family: var(--font-display, 'Syne', sans-serif) !important;
  letter-spacing: -0.03em !important;
}

p, li, .value-text, .hero-sub, td, dd {
  color: var(--text2) !important;
}

.card p, .card-grid p, .card h3 {
  color: var(--text2) !important;
}

.card h3, .card-icon + h3 {
  color: var(--text) !important;
}

strong {
  color: var(--text) !important;
}

.highlight {
  color: var(--saffron) !important;
}

a {
  color: inherit;
}

/* ═══════════════════════════════════════════════
   NAVIGATION BAR OVERRIDE
   ═══════════════════════════════════════════════ */
.nav-bar,
nav {
  background: rgba(3, 3, 10, 0.70) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

[data-theme="light"] .nav-bar,
[data-theme="light"] nav {
  background: rgba(245, 244, 239, 0.80) !important;
}

.nav-logo {
  font-family: var(--font-display, 'Syne', sans-serif) !important;
  color: var(--text) !important;
}

nav a {
  color: var(--text2) !important;
  transition: color 200ms !important;
}

nav a:hover {
  color: var(--text) !important;
}

/* ═══════════════════════════════════════════════
   CARDS / PANELS
   ═══════════════════════════════════════════════ */
.card,
.stat-card,
.plan-card,
.download-card,
.feature-card,
.step-card,
.chart-card,
.table-card,
.credits-card,
.plan-info-card,
.profile-avatar-card,
.profile-form-card,
.founder-card,
.contact-item,
.hero-stat-card,
.session-card,
.ai-answer-card {
  background: var(--glass) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius, 20px) !important;
  box-shadow: var(--shadow-card) !important;
  position: relative;
  transition:
    background 400ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 400ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover,
.stat-card:hover,
.feature-card:hover,
.chart-card:hover,
.session-card:hover,
.hero-stat-card:hover {
  background: var(--glass-hover) !important;
  border-color: var(--border-hover) !important;
  transform: translateY(-4px) scale(1.01);
}

/* Accent card variant */
.hero-stat-card.accent,
.plan-card.featured,
.card-featured {
  border-color: rgba(255, 153, 51, 0.20) !important;
}

/* ═══════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */
.btn-primary,
a.btn-primary,
button.btn-primary {
  background: linear-gradient(135deg, #FF9933 0%, #E07820 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: var(--font-body, 'DM Sans', sans-serif) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 24px rgba(255,153,51,0.25) !important;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 8px 40px rgba(255,153,51,0.30) !important;
}

.btn-ghost,
a.btn-ghost,
button.btn-ghost,
.btn-outline {
  background: transparent !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  transition: all 200ms !important;
}

.btn-ghost:hover,
a.btn-ghost:hover,
button.btn-ghost:hover,
.btn-outline:hover {
  background: var(--glass) !important;
  border-color: var(--border-hover) !important;
  color: var(--text) !important;
}

.btn-full {
  background: linear-gradient(135deg, #FF9933 0%, #E07820 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 24px rgba(255,153,51,0.25) !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-full:hover {
  transform: translateY(-2px) !important;
}

.btn-large {
  display: inline-flex !important;
  align-items: center !important;
  padding: 14px 32px !important;
  background: linear-gradient(135deg, #FF9933 0%, #E07820 100%) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 24px rgba(255,153,51,0.25) !important;
}

/* ═══════════════════════════════════════════════
   INPUTS / FORMS
   ═══════════════════════════════════════════════ */
.form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea,
select {
  background: var(--bg-input) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm, 12px) !important;
  color: var(--text) !important;
  transition: border-color 200ms, box-shadow 200ms !important;
}

.form-input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(255, 153, 51, 0.30) !important;
  box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.15) !important;
  outline: none !important;
}

.form-label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text2) !important;
}

/* ═══════════════════════════════════════════════
   SIDEBAR (Dashboard)
   ═══════════════════════════════════════════════ */
.sidebar {
  background: rgba(6, 6, 15, 0.78) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-right: 1px solid var(--glass-border) !important;
}

[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, 0.90) !important;
}

.sidebar-item {
  border-radius: var(--radius-sm, 12px) !important;
  transition: background 200ms, color 200ms !important;
}

.sidebar-item:hover {
  background: var(--glass-hover) !important;
}

.sidebar-item.active {
  background: rgba(255, 153, 51, 0.10) !important;
  border: 1px solid rgba(255, 153, 51, 0.20) !important;
  color: var(--saffron) !important;
}

.sidebar-badge {
  background: rgba(255, 153, 51, 0.15) !important;
  color: var(--saffron) !important;
  border-radius: 20px !important;
}

.credits-bar-fill {
  background: linear-gradient(135deg, #FF9933 0%, #E07820 100%) !important;
  border-radius: 100px !important;
}

/* ═══════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════ */
.txn-table,
.analytics-table,
table {
  border-collapse: collapse !important;
}

.txn-table thead,
.analytics-table thead {
  background: rgba(3, 3, 10, 0.6) !important;
}

[data-theme="light"] .txn-table thead,
[data-theme="light"] .analytics-table thead {
  background: rgba(0, 0, 0, 0.03) !important;
}

.txn-table th,
.analytics-table th {
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  color: var(--text2) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

.txn-table td,
.analytics-table td {
  border-bottom: 1px solid var(--glass-border) !important;
  color: var(--text2) !important;
}

.txn-table tbody tr:hover,
.analytics-table tbody tr:hover {
  background: var(--glass-hover) !important;
}

/* ═══════════════════════════════════════════════
   STATUS PILLS / BADGES
   ═══════════════════════════════════════════════ */
.status-pill {
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

.status-success {
  background: rgba(0, 232, 122, 0.12) !important;
  color: #00E87A !important;
}

.status-pending {
  background: rgba(255, 153, 51, 0.12) !important;
  color: #FF9933 !important;
}

.status-failed {
  background: rgba(255, 78, 106, 0.12) !important;
  color: #FF4E6A !important;
}

/* ═══════════════════════════════════════════════
   SUB-NAV / TABS
   ═══════════════════════════════════════════════ */
.sub-nav {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm, 12px) !important;
}

.sub-nav-item {
  border-radius: 8px !important;
  transition: background 200ms, color 200ms !important;
}

.sub-nav-item.active {
  background: linear-gradient(135deg, #FF9933 0%, #E07820 100%) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* ═══════════════════════════════════════════════
   EYEBROW / SECTION LABELS
   ═══════════════════════════════════════════════ */
.eyebrow,
.section-label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255, 153, 51, 0.90) !important;
  background: rgba(255, 153, 51, 0.06) !important;
  border: 1px solid rgba(255, 153, 51, 0.20) !important;
  border-radius: 100px !important;
  padding: 5px 16px !important;
  display: inline-block !important;
}

/* ═══════════════════════════════════════════════
   MODAL / OVERLAY
   ═══════════════════════════════════════════════ */
.sutra-loader-card,
.modal-content,
.dialog {
  background: var(--bg2) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg, 28px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
}

/* ═══════════════════════════════════════════════
   FOOTER 
   ═══════════════════════════════════════════════ */
footer {
  border-top: 1px solid var(--glass-border) !important;
  background: rgba(3, 3, 10, 0.6) !important;
}

[data-theme="light"] footer {
  background: rgba(238, 237, 232, 0.6) !important;
}

footer p {
  color: var(--text3) !important;
}

footer a {
  color: var(--text3) !important;
  transition: color 200ms !important;
}

footer a:hover {
  color: var(--saffron) !important;
}

/* ═══════════════════════════════════════════════
   TRICOLOR BAR (About page)
   ═══════════════════════════════════════════════ */
.tricolor {
  background: linear-gradient(90deg, #FF9933 33.3%, #F5F5F5 33.3% 66.6%, #138808 66.6%) !important;
}

/* ═══════════════════════════════════════════════
   CONTACT ITEMS
   ═══════════════════════════════════════════════ */
.contact-label {
  color: var(--text3) !important;
}

.contact-email {
  color: var(--saffron) !important;
}

/* ═══════════════════════════════════════════════
   VALUE LIST (About page)
   ═══════════════════════════════════════════════ */
.value-list li {
  border-bottom-color: var(--glass-border) !important;
}

.value-dot {
  background: var(--saffron) !important;
}

.value-text {
  color: var(--text2) !important;
}

.value-text strong {
  color: var(--text) !important;
}

/* ═══════════════════════════════════════════════
   DASHBOARD-SPECIFIC BODY OVERRIDE
   ═══════════════════════════════════════════════ */
body.dashboard-shell {
  background:
    radial-gradient(ellipse 60% 50% at 20% 15%, rgba(255,153,51,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 60% at 80% 85%, rgba(0,207,255,0.03) 0%, transparent 50%),
    var(--bg) !important;
}

body.dashboard-shell .dashboard-main {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════
   BG ORBS (Dashboard ambient glow)
   ═══════════════════════════════════════════════ */
.bg-orbs .orb {
  filter: blur(100px) !important;
  opacity: 0.3 !important;
}

.orb1 { background: rgba(255, 153, 51, 0.15) !important; }
.orb2 { background: rgba(0, 207, 255, 0.08) !important; }
.orb3 { background: rgba(123, 92, 234, 0.08) !important; }

/* ═══════════════════════════════════════════════
   CHART CARDS (Analytics) 
   ═══════════════════════════════════════════════ */
.chart-card-header h3 {
  color: var(--text) !important;
}

.chart-subtitle {
  color: var(--text3) !important;
}

/* ═══════════════════════════════════════════════
   SESSION DETAIL
   ═══════════════════════════════════════════════ */
.session-stats-bar .session-stat {
  border-right-color: var(--glass-border) !important;
}

.transcript-area {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius, 20px) !important;
}

/* ═══════════════════════════════════════════════
   AUTH PAGES (Login/Register)
   ═══════════════════════════════════════════════ */
.auth-card,
.login-card,
.register-card {
  background: var(--glass) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg, 28px) !important;
  box-shadow: var(--shadow-card) !important;
}

/* ═══════════════════════════════════════════════
   PROFILE PAGE
   ═══════════════════════════════════════════════ */
.avatar-circle {
  background: linear-gradient(135deg, #FF9933 0%, #E07820 100%) !important;
  box-shadow: 0 0 30px rgba(255,153,51,0.20) !important;
}

.weekly-bars-container .bar-fill {
  background: linear-gradient(to top, #FF9933, #FFB347) !important;
  border-radius: 4px 4px 0 0 !important;
}

/* ═══════════════════════════════════════════════
   HEATMAP (Analytics)
   ═══════════════════════════════════════════════ */
.heatmap-cell {
  border-radius: 4px !important;
}

/* ═══════════════════════════════════════════════
   ANIMATION: Fade-in for visible elements
   ═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
   ANIMATION: Fade-in for visible elements
   ═══════════════════════════════════════════════ */
.animate-in {
  animation: slide-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}


/* ═══════════════════════════════════════════════
   ENHANCED LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════ */
[data-theme="light"] .nav-bar,
[data-theme="light"] nav {
  background: rgba(253, 250, 245, 0.80) !important;
  border-bottom-color: rgba(180, 140, 80, 0.12) !important;
}

[data-theme="light"] footer {
  background: rgba(250, 245, 235, 0.60) !important;
  border-top-color: rgba(180, 140, 80, 0.12) !important;
}

[data-theme="light"] .section-label,
[data-theme="light"] .eyebrow {
  color: #C06010 !important;
  background: rgba(224, 120, 32, 0.06) !important;
  border-color: rgba(224, 120, 32, 0.18) !important;
}

[data-theme="light"] .card,
[data-theme="light"] .stat-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .step-card,
[data-theme="light"] .chart-card,
[data-theme="light"] .session-card {
  background: var(--glass, rgba(255,255,255,0.65)) !important;
  border-color: rgba(180, 140, 80, 0.15) !important;
  box-shadow: 0 4px 24px rgba(120,80,20,0.08),
              0 1px 0 rgba(255,255,255,0.90) inset !important;
}

[data-theme="light"] .card:hover,
[data-theme="light"] .stat-card:hover,
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .session-card:hover {
  background: rgba(255,255,255,0.80) !important;
  border-color: rgba(180, 140, 80, 0.28) !important;
  box-shadow: 0 12px 48px rgba(120,80,20,0.15),
              0 1px 0 rgba(255,255,255,1) inset !important;
}

/* ═══════════════════════════════════════════════
   DASHBOARD GLASS POLISH
   ═══════════════════════════════════════════════ */

/* ── Stat cards ── */
.stat-card {
  transition:
    transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 350ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4),
              0 1px 0 rgba(255,255,255,0.08) inset !important;
}

[data-theme="light"] .stat-card:hover {
  box-shadow: 0 12px 40px rgba(120,80,20,0.15),
              0 1px 0 rgba(255,255,255,1) inset !important;
}

/* ── Session rows ── */
.session-card {
  transition:
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.session-card:hover {
  border-color: rgba(255, 153, 51, 0.18) !important;
  box-shadow: var(--shadow-card),
              0 0 20px rgba(255,153,51,0.06) !important;
}

[data-theme="light"] .session-card:hover {
  border-color: rgba(224, 120, 32, 0.25) !important;
  box-shadow: 0 8px 32px rgba(120,80,20,0.12),
              0 0 20px rgba(224,120,32,0.06) !important;
}

/* ── Chart panels ── */
.chart-card {
  overflow: hidden;
}

.chart-card canvas {
  position: relative;
  z-index: 1;
}

/* ── Credits bar enhanced ── */
.credits-bar-fill {
  background: linear-gradient(135deg, #FF9933 0%, #E07820 100%) !important;
  border-radius: 100px !important;
  box-shadow: 0 0 12px rgba(255,153,51,0.30) !important;
  transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}