/* ==========================================================================
   IPCLUB — ZENITH ARCADE DESIGN SYSTEM (V2 Master Gamified Overhaul)
   Source of Truth: docs/design.md
   Universal stylesheet applied across 100% of pages, layouts, and role modules.
   ========================================================================== */

:root {
  /* Core Brand Colors — Derived directly from The Art of Living Rising Sun Logo */
  --ip-primary: #EA580C;            /* Solar Sunrise Orange */
  --ip-primary-light: #F59E0B;      /* Radiant Sun Amber */
  --ip-primary-hover: #C2410C;      /* Deep Solar Flare */
  --ip-primary-soft: #FFF7ED;       /* Warm Sunlight Silk */
  --ip-primary-glow: rgba(234, 88, 12, 0.35);

  --ip-kriya: #0D9488;              /* Mindfulness Teal */
  --ip-kriya-light: #14B8A6;
  --ip-kriya-soft: #F0FDFA;

  --ip-gold: #D97706;               /* Trophy & Sun Ray Gold */
  --ip-gold-light: #FBBF24;         /* Bright Golden Crest */
  --ip-gold-soft: #FFFBEB;
  --ip-gold-glow: rgba(245, 158, 11, 0.35);

  --ip-flame: #F43F5E;              /* Streak Flame Rose */
  --ip-flame-dark: #E11D48;
  --ip-flame-soft: #FFF1F2;
  --ip-flame-glow: rgba(244, 63, 94, 0.4);

  --ip-success: #10B981;
  --ip-success-soft: #ECFDF5;
  --ip-warning: #F59E0B;
  --ip-danger: #EF4444;

  /* Surfaces & Canvas — Warm Stone Porcelain & Sun Aura */
  --ip-bg-canvas: #FAFAF9;          /* Warm stone porcelain */
  --ip-bg-surface: #FFFFFF;         /* Crisp card elevation */
  --ip-bg-elevated: #FFFBEB;        /* Warm sun-tinted elevated wells */
  --ip-border: #E7E5E4;             /* Warm hairline structural boundary */
  --ip-border-input: #D6D3D1;

  /* Typography Stacks */
  --ip-font-display: 'Outfit', sans-serif;
  --ip-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ip-font-mono: 'JetBrains Mono', monospace;

  /* Geometry & Rhythm */
  --ip-radius-card: 20px;
  --ip-radius-control: 12px;
  --ip-radius-pill: 9999px;
  --ip-control-height: 44px;
  --ip-dt-outer-pad: 24px;

  /* Gradients — Radiant Sun Sunrise from Logo */
  --ip-grad-primary: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%);
  --ip-grad-gold: linear-gradient(135deg, #FBBF24 0%, #D97706 100%);
  --ip-grad-emerald: linear-gradient(135deg, #10B981 0%, #059669 100%);
  --ip-grad-rose: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
  --ip-xp-gradient: linear-gradient(90deg, #F59E0B 0%, #EA580C 50%, #E11D48 100%);

  /* High-Impact Ambient Shadows */
  --ip-shadow-card: 0 10px 30px -5px rgba(28, 25, 23, 0.04), 0 2px 8px -2px rgba(28, 25, 23, 0.02);
  --ip-shadow-hover: 0 20px 40px -10px var(--ip-primary-glow, rgba(234, 88, 12, 0.16)), 0 4px 12px -2px rgba(28, 25, 23, 0.04);
  --ip-shadow-btn: 0 4px 14px var(--ip-primary-glow, rgba(234, 88, 12, 0.35));

  /* Global Framework Overrides (Default Brand) */
  --pc-primary: var(--ip-primary);
  --pc-primary-rgb: 234, 88, 12;
  --bs-primary: var(--ip-primary);
  --bs-primary-rgb: 234, 88, 12;
  --primary: var(--ip-primary);
  --primary-dark: var(--ip-primary-hover);
  --accent: var(--ip-primary-light);
  --role-accent: #EA580C;
  --role-gradient: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%);
  --role-soft: #FFF7ED;
  --role-glow: rgba(234, 88, 12, 0.35);
  --role-badge-bg: #FFEDD5;
  --role-badge-color: #C2410C;
}

/* ==========================================================================
   ROLE-BASED THEME MATRIX
   Super Admin : Imperial Violet (#7C3AED)
   Admin       : Royal Cobalt Blue (#2563EB)
   Teacher     : Mindfulness Jade & Emerald (#059669)
   Member      : Solar Sunrise Orange (#EA580C)
   Parent      : Coral Rose (#E11D48)
   ========================================================================== */

/* ==========================================================================
   ROLE-BASED THEME MATRIX (100% LOGO-BASED SUNBURST SPECTRUM)
   All palettes derive strictly from the Art of Living Rising Sun Logo:
   - Member      : Solar Sunrise Orange (#EA580C) — Rising Sun Core
   - Teacher     : Sunray Gold (#D97706)          — Dawn Radiance Rays
   - Admin       : Deep Solar Flare (#C2410C)     — Core Solar Flare
   - Super Admin : Zenith Sun Bronze (#B45309)   — Imperial Sun Crest
   - Parent      : Sunset Hearth Flame (#E11D48)  — Warm Sunset Glow
   ========================================================================== */

/* 1. Super Admin Theme — Zenith Sun Bronze & Imperial Gold */
body[data-role="super_admin"],
body.theme-super_admin,
body.role-super_admin {
  --ip-bg-canvas: #FEF9EE !important;
  --ip-bg-elevated: #FDF0D5 !important;
  --ip-border: #FCD34D !important;
  --ip-primary: #B45309 !important;
  --ip-primary-light: #D97706 !important;
  --ip-primary-hover: #78350F !important;
  --ip-primary-soft: #FEF3C7 !important;
  --ip-primary-glow: rgba(180, 83, 9, 0.35) !important;
  --ip-grad-primary: linear-gradient(135deg, #D97706 0%, #92400E 100%) !important;
  --ip-shadow-btn: 0 4px 14px rgba(180, 83, 9, 0.35) !important;
  --ip-shadow-hover: 0 20px 40px -10px rgba(180, 83, 9, 0.16), 0 4px 12px -2px rgba(28, 25, 23, 0.04) !important;
  --pc-primary: #B45309 !important;
  --pc-primary-rgb: 180, 83, 9 !important;
  --bs-primary: #B45309 !important;
  --bs-primary-rgb: 180, 83, 9 !important;
  --primary: #B45309 !important;
  --primary-dark: #78350F !important;
  --accent: #D97706 !important;
  --role-accent: #B45309 !important;
  --role-gradient: linear-gradient(135deg, #D97706 0%, #92400E 100%) !important;
  --role-soft: #FEF3C7 !important;
  --role-glow: rgba(180, 83, 9, 0.35) !important;
  --role-badge-bg: #FEF3C7 !important;
  --role-badge-color: #78350F !important;
  background-color: #FEF9EE !important;
  background-image: radial-gradient(at 0% 0%, rgba(180, 83, 9, 0.14) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(245, 158, 11, 0.1) 0px, transparent 50%), linear-gradient(180deg, #FEF9EE 0%, #FDF0D5 100%) !important;
  background-attachment: fixed !important;
}

/* 2. Admin Theme — Deep Solar Flare */
body[data-role="admin"],
body.theme-admin,
body.role-admin {
  --ip-bg-canvas: #FFF5EE !important;
  --ip-bg-elevated: #FFE8D9 !important;
  --ip-border: #FDBA74 !important;
  --ip-primary: #C2410C !important;
  --ip-primary-light: #EA580C !important;
  --ip-primary-hover: #9A3412 !important;
  --ip-primary-soft: #FFEDD5 !important;
  --ip-primary-glow: rgba(194, 65, 12, 0.35) !important;
  --ip-grad-primary: linear-gradient(135deg, #EA580C 0%, #C2410C 100%) !important;
  --ip-shadow-btn: 0 4px 14px rgba(194, 65, 12, 0.35) !important;
  --ip-shadow-hover: 0 20px 40px -10px rgba(194, 65, 12, 0.16), 0 4px 12px -2px rgba(28, 25, 23, 0.04) !important;
  --pc-primary: #C2410C !important;
  --pc-primary-rgb: 194, 65, 12 !important;
  --bs-primary: #C2410C !important;
  --bs-primary-rgb: 194, 65, 12 !important;
  --primary: #C2410C !important;
  --primary-dark: #9A3412 !important;
  --accent: #EA580C !important;
  --role-accent: #C2410C !important;
  --role-gradient: linear-gradient(135deg, #EA580C 0%, #C2410C 100%) !important;
  --role-soft: #FFEDD5 !important;
  --role-glow: rgba(194, 65, 12, 0.35) !important;
  --role-badge-bg: #FFEDD5 !important;
  --role-badge-color: #9A3412 !important;
  background-color: #FFF5EE !important;
  background-image: radial-gradient(at 0% 0%, rgba(194, 65, 12, 0.14) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(234, 88, 12, 0.1) 0px, transparent 50%), linear-gradient(180deg, #FFF5EE 0%, #FFE8D9 100%) !important;
  background-attachment: fixed !important;
}

/* 3. Teacher Theme — Sunray Gold */
body[data-role="teacher"],
body.theme-teacher,
body.role-teacher {
  --ip-bg-canvas: #FFFBEB !important;
  --ip-bg-elevated: #FEF3C7 !important;
  --ip-border: #FDE68A !important;
  --ip-primary: #D97706 !important;
  --ip-primary-light: #FBBF24 !important;
  --ip-primary-hover: #B45309 !important;
  --ip-primary-soft: #FEF3C7 !important;
  --ip-primary-glow: rgba(217, 119, 6, 0.35) !important;
  --ip-grad-primary: linear-gradient(135deg, #FBBF24 0%, #D97706 100%) !important;
  --ip-shadow-btn: 0 4px 14px rgba(217, 119, 6, 0.35) !important;
  --ip-shadow-hover: 0 20px 40px -10px rgba(217, 119, 6, 0.16), 0 4px 12px -2px rgba(28, 25, 23, 0.04) !important;
  --pc-primary: #D97706 !important;
  --pc-primary-rgb: 217, 119, 6 !important;
  --bs-primary: #D97706 !important;
  --bs-primary-rgb: 217, 119, 6 !important;
  --primary: #D97706 !important;
  --primary-dark: #B45309 !important;
  --accent: #FBBF24 !important;
  --role-accent: #D97706 !important;
  --role-gradient: linear-gradient(135deg, #FBBF24 0%, #D97706 100%) !important;
  --role-soft: #FEF3C7 !important;
  --role-glow: rgba(217, 119, 6, 0.35) !important;
  --role-badge-bg: #FEF3C7 !important;
  --role-badge-color: #B45309 !important;
  background-color: #FFFBEB !important;
  background-image: radial-gradient(at 0% 0%, rgba(217, 119, 6, 0.14) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(251, 191, 36, 0.1) 0px, transparent 50%), linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%) !important;
  background-attachment: fixed !important;
}

/* 4. Member / Student Theme — Solar Sunrise Orange (Signature Logo) */
body[data-role="member"],
body.theme-member,
body.role-member {
  --ip-bg-canvas: #FFF7ED !important;
  --ip-bg-elevated: #FFEDD5 !important;
  --ip-border: #FED7AA !important;
  --ip-primary: #EA580C !important;
  --ip-primary-light: #F59E0B !important;
  --ip-primary-hover: #C2410C !important;
  --ip-primary-soft: #FFEDD5 !important;
  --ip-primary-glow: rgba(234, 88, 12, 0.35) !important;
  --ip-grad-primary: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%) !important;
  --ip-shadow-btn: 0 4px 14px rgba(234, 88, 12, 0.35) !important;
  --ip-shadow-hover: 0 20px 40px -10px rgba(234, 88, 12, 0.16), 0 4px 12px -2px rgba(28, 25, 23, 0.04) !important;
  --pc-primary: #EA580C !important;
  --pc-primary-rgb: 234, 88, 12 !important;
  --bs-primary: #EA580C !important;
  --bs-primary-rgb: 234, 88, 12 !important;
  --primary: #EA580C !important;
  --primary-dark: #C2410C !important;
  --accent: #F59E0B !important;
  --role-accent: #EA580C !important;
  --role-gradient: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%) !important;
  --role-soft: #FFEDD5 !important;
  --role-glow: rgba(234, 88, 12, 0.35) !important;
  --role-badge-bg: #FFEDD5 !important;
  --role-badge-color: #C2410C !important;
  background-color: #FFF7ED !important;
  background-image: radial-gradient(at 0% 0%, rgba(234, 88, 12, 0.14) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(245, 158, 11, 0.1) 0px, transparent 50%), linear-gradient(180deg, #FFF7ED 0%, #FFEDD5 100%) !important;
  background-attachment: fixed !important;
}

/* 5. Parent Theme — Sunset Hearth Flame */
body[data-role="parent"],
body.theme-parent,
body.role-parent {
  --ip-bg-canvas: #FFF5F5 !important;
  --ip-bg-elevated: #FFE4E6 !important;
  --ip-border: #FECDD3 !important;
  --ip-primary: #E11D48 !important;
  --ip-primary-light: #F43F5E !important;
  --ip-primary-hover: #BE123C !important;
  --ip-primary-soft: #FFE4E6 !important;
  --ip-primary-glow: rgba(225, 29, 72, 0.35) !important;
  --ip-grad-primary: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%) !important;
  --ip-shadow-btn: 0 4px 14px rgba(225, 29, 72, 0.35) !important;
  --ip-shadow-hover: 0 20px 40px -10px rgba(225, 29, 72, 0.16), 0 4px 12px -2px rgba(28, 25, 23, 0.04) !important;
  --pc-primary: #E11D48 !important;
  --pc-primary-rgb: 225, 29, 72 !important;
  --bs-primary: #E11D48 !important;
  --bs-primary-rgb: 225, 29, 72 !important;
  --primary: #E11D48 !important;
  --primary-dark: #BE123C !important;
  --accent: #F43F5E !important;
  --role-accent: #E11D48 !important;
  --role-gradient: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%) !important;
  --role-soft: #FFE4E6 !important;
  --role-glow: rgba(225, 29, 72, 0.35) !important;
  --role-badge-bg: #FFE4E6 !important;
  --role-badge-color: #BE123C !important;
  background-color: #FFF5F5 !important;
  background-image: radial-gradient(at 0% 0%, rgba(225, 29, 72, 0.14) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(244, 63, 94, 0.1) 0px, transparent 50%), linear-gradient(180deg, #FFF5F5 0%, #FFE4E6 100%) !important;
  background-attachment: fixed !important;
}

/* Role Canvas Background Targets */
body[data-role="super_admin"] .nexus-stage,
body[data-role="super_admin"] .nexus-canvas,
body[data-role="super_admin"] .pc-container {
  background-color: #FEF9EE !important;
  background-image: radial-gradient(at 0% 0%, rgba(180, 83, 9, 0.12) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(245, 158, 11, 0.08) 0px, transparent 50%), linear-gradient(180deg, #FEF9EE 0%, #FDF0D5 100%) !important;
  background-attachment: fixed !important;
}

body[data-role="admin"] .nexus-stage,
body[data-role="admin"] .nexus-canvas,
body[data-role="admin"] .pc-container {
  background-color: #FFF5EE !important;
  background-image: radial-gradient(at 0% 0%, rgba(194, 65, 12, 0.12) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(234, 88, 12, 0.08) 0px, transparent 50%), linear-gradient(180deg, #FFF5EE 0%, #FFE8D9 100%) !important;
  background-attachment: fixed !important;
}

body[data-role="teacher"] .nexus-stage,
body[data-role="teacher"] .nexus-canvas,
body[data-role="teacher"] .pc-container {
  background-color: #FFFBEB !important;
  background-image: radial-gradient(at 0% 0%, rgba(217, 119, 6, 0.12) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(251, 191, 36, 0.08) 0px, transparent 50%), linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%) !important;
  background-attachment: fixed !important;
}

body[data-role="member"] .nexus-stage,
body[data-role="member"] .nexus-canvas,
body[data-role="member"] .pc-container {
  background-color: #FFF7ED !important;
  background-image: radial-gradient(at 0% 0%, rgba(234, 88, 12, 0.12) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(245, 158, 11, 0.08) 0px, transparent 50%), linear-gradient(180deg, #FFF7ED 0%, #FFEDD5 100%) !important;
  background-attachment: fixed !important;
}

body[data-role="parent"] .nexus-stage,
body[data-role="parent"] .nexus-canvas,
body[data-role="parent"] .pc-container {
  background-color: #FFF5F5 !important;
  background-image: radial-gradient(at 0% 0%, rgba(225, 29, 72, 0.12) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(244, 63, 94, 0.08) 0px, transparent 50%), linear-gradient(180deg, #FFF5F5 0%, #FFE4E6 100%) !important;
  background-attachment: fixed !important;
}

/* ==========================================================================
   Dark Theme Canvas & Tokens — Warm Obsidian Stone
   ========================================================================== */
body[data-pc-theme="dark"] {
  --ip-bg-canvas: #0C0A09;
  --ip-bg-surface: #1C1917;
  --ip-bg-elevated: #292524;
  --ip-border: #44403C;
  --ip-border-input: #57534E;
  --ip-primary-soft: rgba(234, 88, 12, 0.2);
  --ip-gold-soft: rgba(245, 158, 11, 0.2);
  --ip-flame-soft: rgba(244, 63, 94, 0.2);
  --ip-shadow-card: 0 12px 36px -8px rgba(0, 0, 0, 0.6);
  --ip-shadow-hover: 0 20px 48px -10px rgba(234, 88, 12, 0.3);
}

/* ==========================================================================
   Global Resets & Typography
   ========================================================================== */
body {
  font-family: var(--ip-font-sans);
  background-color: var(--ip-bg-canvas);
  background-image: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(245, 158, 11, 0.08), transparent 70%);
  background-attachment: fixed;
  color: #1C1917;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[data-pc-theme="dark"] {
  color: #FAFAF9;
  background-image: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(245, 158, 11, 0.15), transparent 70%);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-header-title h2 {
  font-family: var(--ip-font-display);
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #0F172A;
}

body[data-pc-theme="dark"] h1,
body[data-pc-theme="dark"] h2,
body[data-pc-theme="dark"] h3,
body[data-pc-theme="dark"] h4,
body[data-pc-theme="dark"] h5,
body[data-pc-theme="dark"] h6,
body[data-pc-theme="dark"] .page-header-title h2 {
  color: #F8FAFC;
}

/* ==========================================================================
   Tactile Gamified Buttons & Links
   ========================================================================== */
.btn {
  font-family: var(--ip-font-sans);
  border-radius: var(--ip-radius-pill) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.55rem 1.35rem;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.btn-primary,
.btn.btn-primary {
  background: var(--ip-grad-primary) !important;
  border: none !important;
  color: #FFFFFF !important;
  box-shadow: var(--ip-shadow-btn) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--ip-primary-glow, rgba(234, 88, 12, 0.45)) !important;
  color: #FFFFFF !important;
}

.btn-primary:active,
.btn.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px var(--ip-primary-glow, rgba(234, 88, 12, 0.35)) !important;
}

.btn-outline-primary {
  border: 1.5px solid var(--ip-primary) !important;
  color: var(--ip-primary) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background: var(--ip-primary-soft) !important;
  color: var(--ip-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px var(--ip-primary-glow, rgba(234, 88, 12, 0.15)) !important;
}

.btn-outline-secondary {
  border: 1.5px solid var(--ip-border) !important;
  color: #64748B !important;
  background: var(--ip-bg-surface) !important;
}

.btn-outline-secondary:hover {
  border-color: #94A3B8 !important;
  color: #0F172A !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   Fully White Side Menu & Floating Navigation (All Roles & Themes)
   ========================================================================== */
.pc-sidebar,
.pc-sidebar .navbar-wrapper,
.pc-sidebar .navbar-content,
.nexus-rail,
.nexus-app .nexus-rail.pc-sidebar,
.nexus-rail-brand,
.nexus-rail-nav,
.nexus-app .nexus-rail-nav.navbar-content,
.nexus-rail-footer,
.nexus-nav-list,
.nexus-subnav-list,
.pc-sidebar .pc-submenu,
body[data-role] .pc-sidebar,
body[data-role] .nexus-rail,
body[data-role] .nexus-rail-brand,
body[data-role] .nexus-rail-nav,
body[data-role] .nexus-rail-footer,
body[data-role] .pc-sidebar .navbar-wrapper,
body[data-role] .pc-sidebar .navbar-content,
body[data-pc-theme="dark"] .pc-sidebar,
body[data-pc-theme="dark"] .pc-sidebar .navbar-wrapper,
body[data-pc-theme="dark"] .pc-sidebar .m-header,
body[data-pc-theme="dark"] .nexus-rail,
body[data-pc-theme="dark"] .nexus-rail-brand,
body[data-pc-theme="dark"] .nexus-rail-footer {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
}

.pc-sidebar,
.nexus-rail,
.nexus-app .nexus-rail.pc-sidebar,
.pc-sidebar .navbar-wrapper {
  border-right: 1px solid #E2E8F0 !important;
  box-shadow: 2px 0 16px rgba(15, 23, 42, 0.04) !important;
}

.pc-sidebar .m-header,
.nexus-rail-brand {
  height: 64px !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 0 1.25rem !important;
  background: #FFFFFF !important;
}

.nexus-rail-footer {
  border-top: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
}

.nexus-user-dock {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}

.nexus-user-dock:hover {
  border-color: var(--ip-primary) !important;
  background: var(--ip-primary-soft) !important;
}

.pc-sidebar .pc-navbar > .pc-item {
  margin: 3px 12px !important;
}

.pc-sidebar .pc-navbar > .pc-item > .pc-link,
.nexus-nav-link {
  border-radius: var(--ip-radius-control) !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pc-sidebar .pc-navbar > .pc-item:not(.active) > .pc-link:hover,
.nexus-nav-link:hover {
  background: var(--ip-primary-soft) !important;
  color: var(--ip-primary) !important;
  transform: translateX(3px) !important;
}

.pc-sidebar .pc-navbar > .pc-item:not(.active) > .pc-link:hover .pc-micon,
.nexus-nav-link:hover .nexus-nav-icon,
.nexus-nav-link:hover svg,
.nexus-nav-link:hover i {
  color: var(--ip-primary) !important;
}

.pc-sidebar .pc-navbar > .pc-item.active > .pc-link,
.nexus-nav-link.active {
  background: var(--ip-primary-soft) !important;
  color: var(--ip-primary) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px -2px var(--ip-primary-glow) !important;
  transform: translateX(2px) !important;
  position: relative !important;
}

.pc-sidebar .pc-navbar > .pc-item.active > .pc-link::before,
.nexus-nav-link.active::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 15% !important;
  bottom: 15% !important;
  width: 4px !important;
  background: var(--ip-primary) !important;
  border-radius: 0 4px 4px 0 !important;
}

.pc-sidebar .pc-navbar > .pc-item.active > .pc-link .pc-micon,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link svg,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link i,
.nexus-nav-link.active .nexus-nav-icon,
.nexus-nav-link.active svg,
.nexus-nav-link.active i {
  color: var(--ip-primary) !important;
  fill: var(--ip-primary) !important;
}

.pc-sidebar .pc-navbar > .pc-item.active .pc-badge,
.nexus-nav-link.active .nexus-nav-badge {
  background: var(--ip-primary) !important;
  color: #FFFFFF !important;
}

.pc-sidebar .pc-caption,
.nexus-nav-header {
  font-family: var(--ip-font-display) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.1em !important;
  color: #94A3B8 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  padding: 20px 18px 6px !important;
}

/* Submenu in pure white sidebar */
.nexus-subnav-list,
.pc-sidebar .pc-submenu {
  background: #FFFFFF !important;
}

.nexus-subnav-link {
  color: #64748B !important;
}

.nexus-subnav-link:hover {
  color: var(--ip-primary) !important;
  background: var(--ip-primary-soft) !important;
}

.nexus-subnav-link.active {
  color: var(--ip-primary) !important;
  background: var(--ip-primary-soft) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   Header Topbar & Real-time HUD Chips
   ========================================================================== */
.pc-header {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--ip-border) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
  height: 64px !important;
}

body[data-pc-theme="dark"] .pc-header {
  background: rgba(18, 24, 38, 0.85) !important;
}

.header-scope-pill {
  background: var(--ip-bg-elevated) !important;
  border: 1px solid var(--ip-border) !important;
  border-radius: var(--ip-radius-pill) !important;
  height: 32px !important;
  padding: 0 12px !important;
}

/* Real-time Gamified HUD Pills */
.gamified-flame-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%);
  color: #E11D48;
  border: 1px solid rgba(244, 63, 94, 0.3);
  padding: 0.3rem 0.85rem;
  border-radius: var(--ip-radius-pill);
  font-family: var(--ip-font-mono);
  font-weight: 700;
  font-size: 0.82rem;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gamified-flame-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.25);
  color: #BE123C;
}

.streak-flame-icon {
  font-size: 1.1rem;
  color: #F43F5E;
  animation: flame-dance 1.8s infinite ease-in-out;
}

@keyframes flame-dance {
  0%, 100% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.18) rotate(-4deg); }
  70% { transform: scale(1.12) rotate(4deg); }
}

.gamified-points-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  color: #B45309;
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 0.3rem 0.85rem;
  border-radius: var(--ip-radius-pill);
  font-family: var(--ip-font-mono);
  font-weight: 700;
  font-size: 0.82rem;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gamified-points-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
  color: #92400E;
}

/* ==========================================================================
   Mobile Bottom Navigation Bar
   ========================================================================== */
.bottom-nav {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid var(--ip-border) !important;
  box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.08) !important;
  height: 66px !important;
}

body[data-pc-theme="dark"] .bottom-nav {
  background: rgba(18, 24, 38, 0.92) !important;
}

.bottom-nav .nav-item {
  color: #64748B;
  transition: color 0.18s ease;
}

.bottom-nav .nav-item.active {
  color: var(--ip-primary) !important;
  font-weight: 700;
}

.bottom-nav .nav-item.active .nav-ico::before {
  background: var(--ip-primary-soft) !important;
  border-radius: var(--ip-radius-pill) !important;
}

.bottom-nav .nav-item.active .nav-ico i {
  color: var(--ip-primary) !important;
}

/* ==========================================================================
   Cards, Panels & Surfaces
   ========================================================================== */
.card.user-story,
.user-story,
.card.drp-upgrade-card,
.drp-upgrade-card {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 50%, #4338CA 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

.card.user-story span,
.user-story span,
.card.drp-upgrade-card span,
.card.drp-upgrade-card h2,
.drp-upgrade-card h2 {
  color: #FFFFFF !important;
}

.card,
.glass-panel {
  background: var(--ip-bg-surface) !important;
  border: 1px solid var(--ip-border) !important;
  border-radius: var(--ip-radius-card) !important;
  box-shadow: var(--ip-shadow-card) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
}

.card:hover,
.glass-panel:hover {
  box-shadow: var(--ip-shadow-hover) !important;
}

/* Metric / Stat KPI Widgets */
.glass-stat-card {
  background: var(--ip-bg-surface) !important;
  border: 1px solid var(--ip-border) !important;
  border-radius: var(--ip-radius-card) !important;
  padding: 1.35rem 1.6rem !important;
  box-shadow: var(--ip-shadow-card) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.glass-stat-card:hover {
  transform: translateY(-3px);
  border-color: var(--ip-primary-glow, rgba(234, 88, 12, 0.3)) !important;
  box-shadow: var(--ip-shadow-hover) !important;
}

.glass-stat-card h3 {
  font-family: var(--ip-font-mono) !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  margin: 0.35rem 0 0.15rem !important;
}

.stat-icon-orb {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  transition: transform 0.22s ease;
}

.glass-stat-card:hover .stat-icon-orb {
  transform: scale(1.1) rotate(4deg);
}

.stat-icon-orb.gold {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #B45309;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

.stat-icon-orb.emerald {
  background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
  color: #047857;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}

.stat-icon-orb.solar,
.stat-icon-orb.primary,
.stat-icon-orb.orange {
  background: linear-gradient(135deg, #FFEDD5 0%, #FED7AA 100%);
  color: #C2410C;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.25);
}

.stat-icon-orb.rose {
  background: linear-gradient(135deg, #FFE4E6 0%, #FECDD3 100%);
  color: #E11D48;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.25);
}

/* ==========================================================================
   Player HUD & XP Level Gauges
   ========================================================================== */
.gamified-player-hud {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border: 1.5px solid var(--ip-primary-glow, rgba(234, 88, 12, 0.2)) !important;
  border-radius: var(--ip-radius-card) !important;
  padding: 1.35rem 1.75rem !important;
  box-shadow: var(--ip-shadow-card) !important;
}

body[data-pc-theme="dark"] .gamified-player-hud {
  background: linear-gradient(135deg, #121826 0%, #1B2234 100%) !important;
}

.gamified-xp-track {
  height: 12px;
  background: rgba(226, 232, 240, 0.8);
  border-radius: var(--ip-radius-pill);
  overflow: hidden;
  position: relative;
}

.gamified-xp-bar {
  height: 100%;
  background: var(--ip-xp-gradient);
  border-radius: var(--ip-radius-pill);
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.gamified-xp-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: xp-sweep 2.4s infinite;
}

@keyframes xp-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.gamified-level-badge {
  font-family: var(--ip-font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.85rem;
  border-radius: var(--ip-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ==========================================================================
   3D Leaderboard Podium Top 3
   ========================================================================== */
.gamified-podium-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 2.25rem;
  padding: 1.5rem 1rem 0;
}

.podium-card {
  flex: 1;
  max-width: 230px;
  background: var(--ip-bg-surface);
  border-radius: var(--ip-radius-card);
  padding: 1.35rem 1.15rem;
  text-align: center;
  box-shadow: var(--ip-shadow-card);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.podium-card.rank-1 {
  background: linear-gradient(135deg, #FFFDF5 0%, #FEF3C7 100%);
  border: 2px solid rgba(245, 158, 11, 0.6);
  transform: translateY(-18px);
  z-index: 2;
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.25), var(--ip-shadow-card);
}

.podium-card.rank-1:hover { transform: translateY(-22px); }

.podium-card.rank-2 {
  background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
  border: 1.5px solid rgba(100, 116, 139, 0.35);
}

.podium-card.rank-3 {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 1.5px solid rgba(180, 83, 9, 0.35);
}

.podium-avatar-ring {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin: 0 auto 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.35rem;
  position: relative;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.rank-1 .podium-avatar-ring {
  background: var(--ip-grad-gold);
  color: #FFFFFF;
  border: 4px solid #FEF3C7;
  width: 72px;
  height: 72px;
  font-size: 1.6rem;
}

.rank-2 .podium-avatar-ring {
  background: linear-gradient(135deg, #64748B 0%, #475569 100%);
  color: #FFFFFF;
  border: 3.5px solid #F1F5F9;
}

.rank-3 .podium-avatar-ring {
  background: linear-gradient(135deg, #B45309 0%, #92400E 100%);
  color: #FFFFFF;
  border: 3.5px solid #FFEDD5;
}

.podium-crown {
  font-size: 2rem;
  color: #F59E0B;
  animation: crown-sway 2.2s infinite ease-in-out;
  margin-bottom: -8px;
}

@keyframes crown-sway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(-3deg); }
}

/* ==========================================================================
   DataTables & Index Listings Redesign
   ========================================================================== */
.ip-dt-wrapper-card {
  background: var(--ip-bg-surface) !important;
  border: 1px solid var(--ip-border) !important;
  border-radius: var(--ip-radius-card) !important;
  padding: var(--ip-dt-outer-pad) !important;
  box-shadow: var(--ip-shadow-card) !important;
  margin-bottom: 1.5rem !important;
}

table.ip-datatable,
.custom-data-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

table.ip-datatable thead th,
.custom-data-table thead th {
  font-family: var(--ip-font-display);
  background: var(--ip-bg-elevated) !important;
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--ip-border) !important;
}

table.ip-datatable tbody td,
.custom-data-table tbody td {
  padding: 16px 18px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #F1F5F9 !important;
  color: #1E293B !important;
  font-size: 0.92rem !important;
  transition: background-color 0.15s ease;
}

table.ip-datatable tbody tr:hover td,
.custom-data-table tbody tr:hover td {
  background-color: var(--ip-primary-soft) !important;
}

/* Highlight Podium Rows */
.table tbody tr.gamified-gold-row td {
  background: rgba(245, 158, 11, 0.08) !important;
  font-weight: 600;
}
.table tbody tr.gamified-silver-row td {
  background: rgba(100, 116, 139, 0.06) !important;
}
.table tbody tr.gamified-bronze-row td {
  background: rgba(180, 83, 9, 0.06) !important;
}

/* ==========================================================================
   Filter Toolbar & Filter Pills
   ========================================================================== */
.glass-toolbar {
  background: var(--ip-bg-surface);
  border-bottom: 1px solid var(--ip-border);
  padding: 1rem 1.5rem;
}

.filter-pill {
  border: 1px solid var(--ip-border-subtle, #E2E8F0) !important;
  background: var(--ip-bg-surface, #FFFFFF) !important;
  color: #475569 !important;
  padding: 0 11px !important;
  border-radius: var(--ip-radius-pill, 9999px) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  white-space: nowrap;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body[data-pc-theme="dark"] .filter-pill {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(30, 41, 59, 0.6) !important;
  color: #CBD5E1 !important;
}

.filter-pill:hover {
  background: var(--ip-primary-soft, #FEF3C7) !important;
  border-color: var(--ip-primary) !important;
  color: var(--ip-primary) !important;
  transform: translateY(-1px);
}

.filter-pill.active {
  background: var(--ip-primary) !important;
  border-color: var(--ip-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px var(--ip-primary-glow, rgba(234, 88, 12, 0.25)) !important;
}

.filter-pill .pill-count {
  font-family: var(--ip-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  padding: 1px 7px;
  border-radius: var(--ip-radius-pill, 9999px);
}

body[data-pc-theme="dark"] .filter-pill .pill-count {
  background: rgba(255, 255, 255, 0.12);
  color: #94A3B8;
}

.filter-pill.active .pill-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

/* Form Controls & Inputs */
.form-control,
.form-select {
  height: var(--ip-control-height) !important;
  border-radius: var(--ip-radius-control) !important;
  border: 1.5px solid var(--ip-border-input) !important;
  font-size: 0.92rem !important;
  background-color: var(--ip-bg-surface) !important;
  color: #1E293B !important;
  transition: all 0.18s ease !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ip-primary) !important;
  box-shadow: 0 0 0 4px var(--ip-primary-glow, rgba(234, 88, 12, 0.15)) !important;
}

/* Unified Toolbar Controls Baseline */
.glass-search-box input,
.glass-search-box .form-control,
.glass-filter-select,
.glass-date-range-wrap,
.view-switcher {
  height: 32px !important;
  min-height: 32px !important;
}

.glass-search-box input,
.glass-search-box .form-control {
  line-height: 30px !important;
  font-size: 0.82rem !important;
}

.glass-filter-select {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 30px !important;
  font-size: 0.8rem !important;
}

/* ==========================================================================
   Form Archetype Redesign
   ========================================================================== */
.form-split-workspace {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr;
  gap: 1.75rem;
  align-items: start;
}

@media (max-width: 991.98px) {
  .form-split-workspace {
    grid-template-columns: 1fr;
  }
}

.form-glass-card {
  background: var(--ip-bg-surface) !important;
  border: 1px solid var(--ip-border) !important;
  border-radius: var(--ip-radius-card) !important;
  padding: 2rem !important;
  box-shadow: var(--ip-shadow-card) !important;
}

.form-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--ip-border);
}

.form-section-header .section-badge {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--ip-grad-primary) !important;
  color: #FFFFFF !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 2px 8px var(--ip-primary-glow, rgba(234, 88, 12, 0.35));
  flex-shrink: 0;
}

.live-preview-card {
  background: var(--ip-bg-surface) !important;
  border: 1.5px solid var(--ip-primary-glow, rgba(234, 88, 12, 0.25)) !important;
  border-radius: var(--ip-radius-card) !important;
  padding: 1.75rem !important;
  box-shadow: var(--ip-shadow-card) !important;
}

/* ==========================================================================
   Show Archetype Redesign (Detail & Profile)
   ========================================================================== */
.detail-hero-banner {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.9) 100%);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-card);
  padding: 1.75rem 2rem;
  box-shadow: var(--ip-shadow-card);
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Pending Archetype Redesign (Decision Actions & Status Badges)
   ========================================================================== */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--ip-radius-pill);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.badge-status.pending {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #D97706 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.badge-status.approved,
.badge-status.active {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.badge-status.rejected {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #DC2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.btn-action-approve {
  background: var(--ip-grad-emerald) !important;
  border: none !important;
  color: #FFFFFF !important;
  border-radius: var(--ip-radius-pill) !important;
  font-weight: 600;
  padding: 0.4rem 1.1rem;
  font-size: 0.82rem;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-action-approve:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.45);
}

.btn-action-reject {
  background: transparent !important;
  border: 1.5px solid #EF4444 !important;
  color: #EF4444 !important;
  border-radius: var(--ip-radius-pill) !important;
  font-weight: 600;
  padding: 0.4rem 1.1rem;
  font-size: 0.82rem;
}

.btn-action-reject:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #DC2626 !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   Centered Authentication Surface
   ========================================================================== */
.auth-center-container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background-color: var(--ip-bg-canvas);
  background-image: radial-gradient(rgba(234, 88, 12, 0.1) 1px, transparent 1px),
                    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(245, 158, 11, 0.14), transparent 70%);
  background-size: 24px 24px, 100% 100%;
  background-attachment: fixed;
  position: relative;
}

body[data-pc-theme="dark"] .auth-center-container {
  background-color: var(--ip-bg-canvas);
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
                    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(245, 158, 11, 0.15), transparent 70%);
}

.auth-card-box {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.auth-surface-card {
  background: var(--ip-bg-surface) !important;
  border: 1px solid var(--ip-border) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 40px -15px rgba(28, 25, 23, 0.08), 0 0 1px 1px rgba(28, 25, 23, 0.04) !important;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body[data-pc-theme="dark"] .auth-surface-card {
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

/* Override legacy Able Pro auth classes to guarantee perfect centering */
.auth-main,
.auth-main .auth-wrapper,
.auth-main .auth-wrapper.v1 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.auth-main .auth-wrapper.v1 .auth-form {
  background: transparent !important;
  max-width: 480px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.auth-main .auth-wrapper.v1 .auth-form .card {
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 480px !important;
}

/* ==========================================================================
   CONCEPT 3: KINETIC QUEST STUDIO — BENTO DECK & TACTILE CONTROLS
   ========================================================================== */

/* Micro-dot Canvas Pattern */
body {
  background-color: var(--ip-bg-canvas) !important;
  background-image: radial-gradient(rgba(234, 88, 12, 0.08) 1px, transparent 1px),
                    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(245, 158, 11, 0.1), transparent 70%) !important;
  background-size: 24px 24px, 100% 100% !important;
  background-attachment: fixed !important;
}

body[data-pc-theme="dark"] {
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
                    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(245, 158, 11, 0.15), transparent 70%) !important;
}

/* Bento Deck Layout System */
.bento-deck {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.bento-tile {
  background: var(--ip-bg-surface);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-card);
  padding: 1.5rem;
  box-shadow: var(--ip-shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease;
}

.bento-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--ip-shadow-hover);
  border-color: rgba(234, 88, 12, 0.28);
}

.bento-tile-8 { grid-column: span 8; }
.bento-tile-6 { grid-column: span 6; }
.bento-tile-4 { grid-column: span 4; }
.bento-tile-12 { grid-column: span 12; }

@media (max-width: 991.98px) {
  .bento-tile-8,
  .bento-tile-6,
  .bento-tile-4 {
    grid-column: span 12;
  }
}

/* Tactile Physical Sensory Switches (Daily Practice) */
.kinetic-switch-card {
  border: 2px solid var(--ip-border);
  border-radius: 16px;
  background: var(--ip-bg-surface);
  padding: 1.25rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
  position: relative;
}

.kinetic-switch-card:hover {
  border-color: var(--ip-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px var(--ip-primary-glow, rgba(234, 88, 12, 0.15));
}

.kinetic-switch-card.active-completed {
  border-color: var(--ip-success);
  background: var(--ip-success-soft);
}

.kinetic-switch-card:active {
  transform: scale(0.98);
}

/* Page Header & Container Top Gap Elimination */
.pc-container,
.nexus-app .pc-container,
.nexus-canvas,
.nexus-app .nexus-canvas {
  top: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
}

.pc-container .pc-content,
.nexus-canvas-inner {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.pc-container .page-header + .pc-content,
.pc-container .page-header + .row {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.page-header,
.pc-content .page-header,
.nexus-workspace-header,
.nexus-workspace-header.page-header {
  position: static !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 1.25rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.page-header .breadcrumb {
  display: flex !important;
  width: 100% !important;
  margin-bottom: 0.35rem !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.page-header .page-header-title {
  display: block !important;
  width: 100% !important;
  margin-top: 0.25rem !important;
}

/* Tactile Action Button Depth */
.btn-tactile {
  box-shadow: 0 4px 0 var(--ip-primary-hover, rgba(194, 65, 12, 1)), 0 6px 16px var(--ip-primary-glow, rgba(234, 88, 12, 0.3)) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.btn-tactile:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--ip-primary-hover, rgba(194, 65, 12, 1)), 0 2px 6px var(--ip-primary-glow, rgba(234, 88, 12, 0.2)) !important;
}

/* Ambient Pulse Halo */
.pulse-halo {
  box-shadow: 0 0 0 0 var(--ip-primary-glow, rgba(234, 88, 12, 0.5));
  animation: pulse-halo-glow 2s infinite;
}

@keyframes pulse-halo-glow {
  0% { box-shadow: 0 0 0 0 var(--ip-primary-glow, rgba(234, 88, 12, 0.5)); }
  70% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* ==========================================================================
   PEAK GAMIFIED ARCADE DESIGN SYSTEM & SENSORY ENGINE (V3 Master)
   ========================================================================== */

/* 1. Tactical Arcade 3D Buttons & Controls */
.btn-arcade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--ip-font-display, 'Outfit', sans-serif);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--ip-radius-pill, 9999px);
  padding: 0.45rem 1.25rem;
  font-size: 0.9rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
  position: relative;
  overflow: hidden;
}

.btn-arcade-primary {
  background: var(--ip-grad-primary);
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 0 #C2410C, 0 8px 20px -2px rgba(234, 88, 12, 0.45);
}

.btn-arcade-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #C2410C, 0 12px 26px -2px rgba(234, 88, 12, 0.55);
  color: #FFFFFF !important;
}

.btn-arcade-primary:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #C2410C, 0 3px 8px rgba(234, 88, 12, 0.3) !important;
}

.btn-arcade-gold {
  background: var(--ip-grad-gold);
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 0 #B45309, 0 8px 20px -2px rgba(245, 158, 11, 0.45);
}

.btn-arcade-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #B45309, 0 12px 26px -2px rgba(245, 158, 11, 0.55);
}

.btn-arcade-gold:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #B45309, 0 3px 8px rgba(245, 158, 11, 0.3) !important;
}

.btn-arcade-emerald {
  background: var(--ip-grad-emerald);
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 0 #047857, 0 8px 20px -2px rgba(16, 185, 129, 0.45);
}

.btn-arcade-emerald:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #047857, 0 12px 26px -2px rgba(16, 185, 129, 0.55);
}

.btn-arcade-emerald:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #047857, 0 3px 8px rgba(16, 185, 129, 0.3) !important;
}

.btn-arcade-outline {
  background: #FFFFFF;
  color: #1C1917 !important;
  border: 1.5px solid var(--ip-border, #E7E5E4);
  box-shadow: 0 3px 0 #D6D3D1, 0 4px 12px rgba(0, 0, 0, 0.04);
}

.btn-arcade-outline:hover {
  border-color: var(--ip-primary);
  color: var(--ip-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #D6D3D1, 0 8px 18px rgba(234, 88, 12, 0.15);
}

.btn-arcade-outline:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #D6D3D1 !important;
}

/* 2. Gamified Tier Badges & Crests */
.gamified-level-badge {
  font-family: var(--ip-font-mono, 'JetBrains Mono', monospace);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.35rem 0.95rem;
  border-radius: var(--ip-radius-pill, 9999px);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gamified-level-badge:hover {
  transform: translateY(-1px) scale(1.02);
}

.tier-novice {
  background: linear-gradient(135deg, #78350F 0%, #B45309 100%);
  color: #FFFFFF !important;
  border: 1px solid rgba(251, 191, 36, 0.3);
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.3);
}

.tier-seeker {
  background: linear-gradient(135deg, #0D9488 0%, #0284C7 100%);
  color: #FFFFFF !important;
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}

.tier-adept {
  background: linear-gradient(135deg, #059669 0%, #10B981 100%);
  color: #FFFFFF !important;
  border: 1px solid rgba(110, 231, 183, 0.4);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.tier-master {
  background: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%);
  color: #FFFFFF !important;
  border: 1.5px solid rgba(254, 240, 138, 0.5);
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.45);
}

.tier-grandmaster {
  background: linear-gradient(135deg, #E11D48 0%, #9F1239 100%);
  color: #FFFFFF !important;
  border: 1.5px solid rgba(254, 205, 211, 0.5);
  box-shadow: 0 6px 20px rgba(225, 29, 72, 0.45);
}

.tier-legend {
  background: linear-gradient(135deg, #7C3AED 0%, #DB2777 50%, #F59E0B 100%);
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5);
}

/* 3. Player Crest 3D Avatar Halo */
.gamified-player-crest {
  position: relative;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gamified-player-crest .crest-aura {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #F59E0B, #EA580C, #E11D48, #0D9488, #F59E0B);
  animation: crest-spin 8s linear infinite;
  opacity: 0.85;
}

@keyframes crest-spin {
  to { transform: rotate(360deg); }
}

.gamified-player-crest .crest-inner {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.gamified-player-crest .crest-badge-pill {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: #1C1917;
  color: #FBBF24;
  border: 1.5px solid #F59E0B;
  font-family: var(--ip-font-mono, monospace);
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: var(--ip-radius-pill, 9999px);
  z-index: 2;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* 4. 7-Day Flame Streak Chamber & Altar */
.streak-chamber {
  background: linear-gradient(135deg, rgba(255, 241, 242, 0.7) 0%, rgba(255, 251, 235, 0.8) 50%, #FFFFFF 100%);
  border: 1.5px solid rgba(244, 63, 94, 0.25);
  border-radius: var(--ip-radius-card, 16px);
  padding: 0.85rem 1.15rem;
  box-shadow: 0 6px 18px -4px rgba(244, 63, 94, 0.08);
}

.streak-day-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.streak-day-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.2rem;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1.5px solid var(--ip-border, #E7E5E4);
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.streak-day-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.streak-day-node.completed {
  background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%);
  border-color: #F43F5E;
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.2);
}

.streak-day-node.today-active {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border-color: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35), 0 4px 14px rgba(245, 158, 11, 0.25);
  animation: today-pulse 2s infinite ease-in-out;
}

@keyframes today-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35), 0 4px 14px rgba(245, 158, 11, 0.25); }
  50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.15), 0 6px 18px rgba(245, 158, 11, 0.35); }
}

.streak-day-node .day-label {
  font-family: var(--ip-font-display, sans-serif);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #78716C;
}

.streak-day-node.completed .day-label { color: #E11D48; }
.streak-day-node.today-active .day-label { color: #B45309; }

.streak-day-node .flame-icon-slot {
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
}

.streak-day-node.completed .flame-icon-slot {
  color: #F43F5E;
  animation: flame-dance 1.8s infinite ease-in-out;
}

.streak-day-node.chest-node {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-color: #F59E0B;
}

/* 5. Zen Breathwork Pacer (Mind Sanctuary Dojo) */
.zen-breathe-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1rem;
  background: radial-gradient(circle at center, rgba(13, 148, 136, 0.08) 0%, #FFFFFF 70%);
  border-radius: var(--ip-radius-card, 16px);
  border: 1px solid rgba(13, 148, 136, 0.2);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.zen-breathe-orb-outer {
  position: relative;
  width: 105px;
  height: 105px;
  margin: 0.75rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zen-breathe-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 148, 136, 0.35) 0%, rgba(20, 184, 166, 0.05) 70%, transparent 100%);
  animation: breathe-cycle 12s infinite ease-in-out;
}

.zen-breathe-core {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 8px 24px rgba(13, 148, 136, 0.4);
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

@keyframes breathe-cycle {
  0%   { transform: scale(0.85); opacity: 0.4; }
  33%  { transform: scale(1.4); opacity: 0.95; } /* Inhale 4s */
  66%  { transform: scale(1.4); opacity: 0.8; }  /* Hold 4s */
  100% { transform: scale(0.85); opacity: 0.4; } /* Exhale 4s */
}

/* 6. Prediction Duel Arena Cartridges */
.prediction-duel-cartridge {
  background: #FFFFFF;
  border: 1.5px solid var(--ip-border, #E7E5E4);
  border-radius: 18px;
  padding: 1.35rem 1.5rem;
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.04);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.prediction-duel-cartridge:hover {
  transform: translateY(-3px);
  border-color: #FDBA74;
  box-shadow: 0 14px 28px -6px rgba(234, 88, 12, 0.12);
}

.prediction-duel-cartridge.locked {
  border-color: #10B981;
  background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 100%);
}

.cartridge-accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--ip-grad-primary);
}

.prediction-duel-cartridge.locked .cartridge-accent-bar {
  background: var(--ip-grad-emerald);
}

/* 7. Milestone XP Progression Pins */
.gamified-xp-track-milestones {
  position: relative;
  height: 14px;
  background: rgba(226, 232, 240, 0.9);
  border-radius: 9999px;
  overflow: visible;
  margin: 1.5rem 0 1rem;
}

.gamified-xp-track-milestones .gamified-xp-bar {
  height: 100%;
  border-radius: 9999px;
  background: var(--ip-xp-gradient);
  position: relative;
  box-shadow: 0 2px 10px rgba(234, 88, 12, 0.4);
}

.gamified-xp-pin {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2.5px solid #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: #64748B;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 3;
  transition: all 0.25s ease;
}

.gamified-xp-pin.reached {
  border-color: #EA580C;
  background: #FEF3C7;
  color: #B45309;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.25), 0 2px 8px rgba(234, 88, 12, 0.35);
}

.gamified-xp-pin .pin-label {
  position: absolute;
  top: -24px;
  font-family: var(--ip-font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748B;
  white-space: nowrap;
}

/* 8. Topbar Player HUD Level Chip */
.gamified-level-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #92400E;
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 0.3rem 0.85rem;
  border-radius: var(--ip-radius-pill, 9999px);
  font-family: var(--ip-font-mono, monospace);
  font-weight: 700;
  font-size: 0.82rem;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gamified-level-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}

/* 9. Canvas Confetti Overlay */
#celebrationCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999999;
}

/* 10. Zen Breathwork Circle & Label */
.zen-breathe-circle {
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 148, 136, 0.25) 0%, rgba(20, 184, 166, 0.08) 60%, transparent 100%);
  border: 3px solid rgba(13, 148, 136, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.75rem auto;
  animation: breathe-circle-pulse 16s infinite ease-in-out;
  box-shadow: 0 0 24px rgba(13, 148, 136, 0.2);
}

.zen-breathe-label {
  font-family: var(--ip-font-display, 'Outfit', sans-serif);
  font-size: 1rem;
  font-weight: 800;
  color: #0D9488;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

@keyframes breathe-circle-pulse {
  0%, 100% { transform: scale(0.85); border-color: rgba(13, 148, 136, 0.3); }
  25% { transform: scale(1.35); border-color: rgba(13, 148, 136, 0.8); } /* Inhale 4s */
  50% { transform: scale(1.35); border-color: rgba(13, 148, 136, 0.95); } /* Hold 4s */
  75% { transform: scale(0.85); border-color: rgba(13, 148, 136, 0.4); } /* Exhale 4s */
}

/* 11. Mobile-First Touch & Safe-Area Ergonomics */
* {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 767.98px) {
  .btn-arcade,
  .choice-btn,
  .btn-lg {
    min-height: 48px !important;
    font-size: 1rem !important;
  }

  .streak-day-track {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 0.25rem !important;
  }

  .streak-day-node {
    padding: 0.5rem 0.15rem !important;
    min-height: 54px !important;
  }

  .streak-day-node .day-label {
    font-size: 0.65rem !important;
  }

  .gamified-xp-pin .pin-label {
    display: none;
  }

  .gamified-player-crest {
    width: 54px !important;
    height: 54px !important;
  }

  .gamified-player-crest .crest-badge-pill {
    font-size: 0.55rem !important;
    bottom: -6px !important;
  }

  .nexus-hero-deck {
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }

  .nexus-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
}

/* 12. Accessibility: Reduced Motion Compliance (WCAG 2.2 §2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .gamified-xp-bar::after {
    animation: none !important;
  }
  .streak-day-node.today-active {
    animation: none !important;
  }
  .zen-breathe-circle {
    animation: none !important;
  }
}

/* 13. Dark Mode Gamified Component Contrast Parity */
body[data-pc-theme="dark"] .btn-arcade-outline {
  background: #1E293B;
  color: #F8FAFC !important;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 3px 0 #0F172A, 0 4px 12px rgba(0, 0, 0, 0.2);
}

body[data-pc-theme="dark"] .btn-arcade-outline:hover {
  border-color: var(--ip-primary);
  color: var(--ip-primary) !important;
  box-shadow: 0 5px 0 #0F172A, 0 8px 18px rgba(234, 88, 12, 0.25);
}

body[data-pc-theme="dark"] .streak-chamber {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.1) 0%, rgba(30, 41, 59, 0.7) 100%) !important;
  border-color: rgba(244, 63, 94, 0.25) !important;
}

body[data-pc-theme="dark"] .streak-day-node {
  background: #1E293B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body[data-pc-theme="dark"] .streak-day-node .day-label {
  color: #94A3B8 !important;
}

body[data-pc-theme="dark"] .streak-day-node.completed {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.25) 0%, rgba(159, 18, 57, 0.35) 100%) !important;
  border-color: #F43F5E !important;
}

body[data-pc-theme="dark"] .streak-day-node.today-active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(180, 83, 9, 0.35) 100%) !important;
  border-color: #F59E0B !important;
}

body[data-pc-theme="dark"] .zen-breathe-container {
  background: radial-gradient(circle at center, rgba(13, 148, 136, 0.15) 0%, #0F172A 70%) !important;
  border-color: rgba(13, 148, 136, 0.3) !important;
}

body[data-pc-theme="dark"] .zen-breathe-circle {
  border-color: rgba(20, 184, 166, 0.6) !important;
  background: radial-gradient(circle, rgba(13, 148, 136, 0.35) 0%, rgba(20, 184, 166, 0.12) 60%, transparent 100%) !important;
}

body[data-pc-theme="dark"] .podium-card {
  background: #1E293B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}