/* =========================================================================
   PI ARCADE COMPASS 3.0 — GOOGLE INTELLIGENCE PLATFORM STYLESHEET
   Design: Google Cloud Console + Firebase Studio + Gemini AI UX
   Default: Google-Authentic Dark Mode -> Light Mode via system/toggle
   ========================================================================= */

/* ==================== GOOGLE-AUTHENTIC DESIGN TOKENS ==================== */
@font-face {
  font-family: 'Google Sans';
  src: url('GSans-Regular_0.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Google Sans';
  src: url('GSans-Bold-v1.27.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Google Sans Text';
  src: url('GSans-Regular_0.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Google Sans Text';
  src: url('GSans-Bold-v1.27.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

:root {
  /* === DARK MODE (DEFAULT) === */
  --bg-primary: #0F1115;
  --bg-secondary: #181B20;
  --bg-elevated: #20242B;
  --bg-overlay: rgba(15, 17, 21, 0.9);

  --card-bg: rgba(24, 27, 32, 0.85);
  --card-border: rgba(60, 64, 67, 0.65);
  --card-border-hover: rgba(138, 180, 248, 0.5);
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);

  /* === GOOGLE COLOR SYSTEM === */
  --accent-primary: #8AB4F8;
  --accent-primary-rgb: 138, 180, 248;
  --accent-secondary: #81C995;
  --accent-secondary-rgb: 129, 201, 149;
  --accent-ai: #8AB4F8;
  --accent-ai-rgb: 138, 180, 248;
  --accent-success: #81C995;
  --accent-success-rgb: 129, 201, 149;
  --accent-warning: #FDD663;
  --accent-warning-rgb: 253, 214, 99;
  --accent-error: #F28B82;
  --accent-error-rgb: 242, 139, 130;

  /* === THEME ACCENT (default = Google Blue, adjusted for Dark Mode contrast) === */
  --accent-theme: #8AB4F8;
  --accent-theme-rgb: 138, 180, 248;
  --accent-theme-secondary: #C2D7FF;
  --accent-cyan: #8AB4F8;
  --accent-cyan-rgb: 138, 180, 248;
  --accent-purple: #C58AF9;
  --accent-purple-rgb: 197, 138, 249;
  --accent-blue: #8AB4F8;
  --accent-blue-rgb: 138, 180, 248;
  --accent-yellow: #FDD663;
  --accent-yellow-rgb: 253, 214, 99;
  --success-emerald: #81C995;
  --success-emerald-rgb: 129, 201, 149;

  /* === TYPOGRAPHY === */
  --text-primary: #E8EAED;
  --text-secondary: #9AA0A6;
  --text-dim: #5F6368;
  --text-inverse: #202124;

  /* === FONTS === */
  --font-header: 'Google Sans', 'Space Grotesk', sans-serif;
  --font-body: 'Google Sans Text', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* === DEPTH SHADOWS (no neon, just depth) === */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);

  /* === GLOW (RESERVED: only active/AI/milestone) === */
  --neon-glow-cyan: 0 0 12px rgba(138, 180, 248, 0.25);
  --neon-glow-purple: 0 0 12px rgba(197, 138, 249, 0.2);
  --glow-theme: 0 0 16px rgba(138, 180, 248, 0.3);
  --glow-ai: 0 0 20px rgba(138, 180, 248, 0.25);

  /* === TRANSITIONS - Material Motion === */
  --transition-swift: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* === RADII === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
}

/* ==================== LIGHT MODE OVERRIDES ==================== */
body.light-mode {
  --bg-primary: #F8FAFD;
  --bg-secondary: #FFFFFF;
  --bg-elevated: #F1F3F4;
  --bg-overlay: rgba(248, 250, 253, 0.92);

  --card-bg: rgba(255, 255, 255, 0.97);
  --card-border: #DADCE0;
  --card-border-hover: rgba(26, 115, 232, 0.35);
  --card-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 2px 12px rgba(0,0,0,0.05);
  --card-shadow-hover: 0 4px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  --glass-shadow: 0 2px 12px rgba(0,0,0,0.08);

  --text-primary: #202124;
  --text-secondary: #5F6368;
  --text-dim: #9AA0A6;
  --text-inverse: #E8EAED;

  /* === GOOGLE COLOR SYSTEM LIGHT === */
  --accent-primary: #1A73E8;
  --accent-primary-rgb: 26, 115, 232;
  --accent-secondary: #34A853;
  --accent-secondary-rgb: 52, 168, 83;
  --accent-ai: #1A73E8;
  --accent-ai-rgb: 26, 115, 232;
  --accent-success: #34A853;
  --accent-success-rgb: 52, 168, 83;
  --accent-warning: #FBBC04;
  --accent-warning-rgb: 251, 188, 4;
  --accent-error: #EA4335;
  --accent-error-rgb: 234, 67, 53;

  /* === THEME ACCENT LIGHT === */
  --accent-theme: #1A73E8;
  --accent-theme-rgb: 26, 115, 232;
  --accent-theme-secondary: #185ABC;
  --accent-cyan: #1A73E8;
  --accent-cyan-rgb: 26, 115, 232;
  --accent-purple: #7030A0;
  --accent-purple-rgb: 112, 48, 160;
  --accent-blue: #1A73E8;
  --accent-blue-rgb: 26, 115, 232;
  --accent-yellow: #FBBC04;
  --accent-yellow-rgb: 251, 188, 4;
  --success-emerald: #34A853;
  --success-emerald-rgb: 52, 168, 83;

  --neon-glow-cyan: 0 0 8px rgba(26, 115, 232, 0.15);
  --neon-glow-purple: 0 0 8px rgba(26, 115, 232, 0.1);
  --glow-theme: 0 0 12px rgba(26, 115, 232, 0.2);
}

/* ==================== THEME ACCENTS ==================== */
[data-theme="emerald"] {
  --accent-theme: #10b981;
  --accent-theme-rgb: 16, 185, 129;
  --accent-theme-secondary: #00ff87;
  --accent-cyan: #10b981; --accent-cyan-rgb: 16, 185, 129;
  --accent-purple: #00ff87; --accent-purple-rgb: 0, 255, 135;
  --glow-theme: 0 0 16px rgba(16, 185, 129, 0.35);
  --neon-glow-cyan: 0 0 16px rgba(16, 185, 129, 0.3);
  --neon-glow-purple: 0 0 16px rgba(0, 255, 135, 0.25);
}
[data-theme="sapphire"] {
  --accent-theme: #3B82F6;
  --accent-theme-rgb: 59, 130, 246;
  --accent-theme-secondary: #93C5FD;
  --accent-cyan: #3B82F6; --accent-cyan-rgb: 59, 130, 246;
  --glow-theme: 0 0 16px rgba(59, 130, 246, 0.3);
}
[data-theme="amber"] {
  --accent-theme: #F59E0B;
  --accent-theme-rgb: 245, 158, 11;
  --accent-theme-secondary: #FCD34D;
  --accent-cyan: #F59E0B; --accent-cyan-rgb: 245, 158, 11;
  --accent-yellow: #FCD34D;
  --glow-theme: 0 0 16px rgba(245, 158, 11, 0.3);
}
[data-theme="amethyst"] {
  --accent-theme: #8B5CF6;
  --accent-theme-rgb: 139, 92, 246;
  --accent-theme-secondary: #C4B5FD;
  --accent-cyan: #8B5CF6; --accent-cyan-rgb: 139, 92, 246;
  --glow-theme: 0 0 16px rgba(139, 92, 246, 0.3);
}
[data-theme="crimson"] {
  --accent-theme: #EF4444;
  --accent-theme-rgb: 239, 68, 68;
  --accent-theme-secondary: #FCA5A5;
  --accent-cyan: #EF4444; --accent-cyan-rgb: 239, 68, 68;
  --glow-theme: 0 0 16px rgba(239, 68, 68, 0.3);
}
[data-theme="aurora"] {
  --accent-theme: #06B6D4;
  --accent-theme-rgb: 6, 182, 212;
  --accent-theme-secondary: #67E8F9;
  --accent-cyan: #06B6D4; --accent-cyan-rgb: 6, 182, 212;
  --glow-theme: 0 0 16px rgba(6, 182, 212, 0.3);
}
[data-theme="gemini"] {
  --accent-theme: #7C3AED;
  --accent-theme-rgb: 124, 58, 237;
  --accent-theme-secondary: #A78BFA;
  --accent-cyan: #7C3AED; --accent-cyan-rgb: 124, 58, 237;
  --glow-theme: 0 0 20px rgba(124, 58, 237, 0.35);
}

/* ==================== MOTION FRAMEWORK ==================== */
@keyframes floatOrb1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-60px, 60px) scale(1.08); }
}
@keyframes floatOrb2 {
  0%   { transform: translate(0, 0) scale(1.05); }
  100% { transform: translate(60px, -60px) scale(0.92); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseAnim {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 0.9; }
}
@keyframes aiPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(138, 180, 248, 0); }
  50%       { box-shadow: 0 0 0 5px rgba(138, 180, 248, 0.1); }
}
@keyframes counterRoll {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes milestoneUnlock {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.06); }
  60%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@keyframes scanLine {
  0%   { top: 0%; opacity: 0.5; }
  100% { top: 100%; opacity: 0; }
}
@keyframes radarPulse {
  0%   { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes nodeFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}
@keyframes orbitBadge {
  from { transform: rotate(0deg) translateX(55px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(55px) rotate(-360deg); }
}
@keyframes shimmerGradient {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes thinkingDot {
  0%, 80%, 100% { opacity: 0; transform: scale(0.8); }
  40%           { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==================== ATMOSPHERIC BACKGROUND ==================== */
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
  position: relative;
  /* Premium radial mesh gradient background */
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(26, 115, 232, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(124, 58, 237, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.02) 0%, transparent 50%);
}

body.light-mode {
  background-color: var(--bg-primary);
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(26, 115, 232, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(124, 58, 237, 0.02) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.01) 0%, transparent 50%);
}

/* Decorative Google Doodle Elements in Background */
body::before {
  content: "";
  position: fixed;
  top: 12%;
  right: 4%;
  width: 140px;
  height: 140px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%234285F4' d='M70,40 C70,30 55,28 50,35 C45,28 30,30 30,40 C20,40 18,55 30,60 L70,60 C82,55 80,40 70,40 Z' /%3E%3Ccircle cx='25' cy='25' r='4' fill='%23EA4335' /%3E%3Ccircle cx='85' cy='30' r='6' fill='%23FBBC05' /%3E%3Cpath stroke='%2334A853' stroke-width='2' fill='none' stroke-dasharray='4 4' d='M20,70 Q40,60 60,80 T100,70' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
  opacity: 0.12;
}

body::after {
  content: "";
  position: fixed;
  bottom: 12%;
  left: 3%;
  width: 160px;
  height: 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='20' y='20' width='30' height='30' rx='5' stroke='%23FBBC05' stroke-width='2' fill='none' /%3E%3Cpath stroke='%23EA4335' stroke-width='2' fill='none' d='M60,20 L80,40 M80,20 L60,40' /%3E%3Ccircle cx='40' cy='70' r='12' stroke='%234285F4' stroke-width='2' fill='none' /%3E%3Cpath stroke='%2334A853' stroke-width='2' d='M75,65 L85,75 M85,65 L75,75' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
  opacity: 0.12;
}

body.light-mode::before,
body.light-mode::after {
  opacity: 0.35;
}

.glow-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(140px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: screen;
}
#orb-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, var(--accent-theme) 0%, transparent 70%);
  top: -20%; right: -10%;
  animation: floatOrb1 24s infinite alternate ease-in-out;
}
#orb-2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--accent-purple) 0%, transparent 70%);
  bottom: -15%; left: -8%;
  animation: floatOrb2 30s infinite alternate ease-in-out;
}
body.light-mode .glow-orb {
  opacity: 0.05;
  mix-blend-mode: multiply;
}

/* App Container Layout */
.app-container {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 1.5rem;
}

/* ==================== APP HEADER ==================== */
.app-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 
    "logo . controls"
    "nav nav nav";
  align-items: center;
  row-gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--card-border);
  position: relative;
  z-index: 110; /* Put header and its dropdowns in front of other dashboard sections */
}

.logo-area {
  grid-area: logo;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-icon {
  font-size: 2.2rem;
  color: var(--accent-theme);
  filter: drop-shadow(0 2px 8px rgba(var(--accent-theme-rgb), 0.35));
}

.logo-title {
  display: block;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-theme) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-subtitle {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.header-controls {
  grid-area: controls;
  justify-self: end;
}

.app-nav {
  grid-area: nav;
  justify-self: center;
  display: flex;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  padding: 0.35rem;
  border-radius: 30px;
  border: 1px solid var(--card-border);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 10; /* Lower stacking context priority compared to header controls dropdown */
}

.nav-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 0.6rem 1.1rem;
  font-family: var(--font-header);
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  transition: var(--transition-smooth);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.nav-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.nav-btn:hover {
  color: var(--text-primary);
  background: rgba(var(--accent-theme-rgb), 0.08);
}
.nav-btn:active::after { opacity: 0.08; }
.nav-btn.active,
.nav-btn.active:hover {
  color: #fff !important;
  background: var(--accent-theme) !important;
  font-weight: 600;
  box-shadow: var(--glow-theme) !important;
}
body.light-mode .nav-btn.active { color: #fff; }
body.light-mode .nav-btn:hover { background: rgba(var(--accent-theme-rgb), 0.06); }

/* ==================== WORKSPACE & HERO ==================== */
.app-main {
  flex-grow: 1;
  padding: 3rem 0;
}

.hero-section {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3.5rem auto;
}

.hero-section h1, .hero-section h2 {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: -0.5px;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.accent-text {
  background: linear-gradient(135deg, var(--accent-cyan) 30%, var(--accent-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cyan-text {
  color: var(--accent-cyan);
}

.hero-section p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ==================== INTELLIGENCE CARDS (GLASS PANELS) ==================== */
.glass-panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--card-shadow);
  transition: var(--transition-smooth);
}
.glass-panel:hover {
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
}
body.light-mode .glass-panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ==================== TAB CONTENT TOGGLE ==================== */
.tab-content {
  display: none;
  animation: fadeIn 0.4s ease-out forwards;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== POINT CALCULATOR TAB ==================== */
.input-card {
  max-width: 680px;
  margin: 0 auto 3rem auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.input-main-row {
  display: flex;
  gap: 1rem;
  width: 100%;
  align-items: center;
}

.input-sub-row {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 0.75rem;
}

body.light-mode .input-sub-row {
  border-top-color: rgba(0, 0, 0, 0.06);
}

.input-wrapper {
  position: relative;
  flex-grow: 1;
  min-width: 0;
  box-sizing: border-box;
}

.input-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.input-wrapper input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  padding: 1rem 1rem 1rem 3rem;
  font-size: 1rem;
  border-radius: 10px;
  outline: none;
  font-family: var(--font-body);
  transition: var(--transition-smooth);
}

.input-wrapper input:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.1) inset;
}

.glow-btn {
  background: var(--accent-theme);
  color: #ffffff;
  border: none;
  padding: 1rem 2rem;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
}

.glow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(var(--accent-theme-rgb), 0.35), 0 0 0 1px rgba(var(--accent-theme-rgb), 0.2);
}

.glow-btn:active {
  transform: translateY(0);
}

.btn-loader {
  display: none;
  font-size: 1.1rem;
}

.glow-btn.loading .btn-text {
  display: none;
}

.glow-btn.loading .btn-loader {
  display: inline-block;
}

/* ==================== SKELETON LOADER ==================== */
.hidden {
  display: none !important;
}

.skeleton-container {
  max-width: 1000px;
  margin: 0 auto;
}

.skeleton-card {
  padding: 2.5rem;
  margin-bottom: 2rem;
}

.header-skeleton {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.skeleton-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}

.skeleton-lines {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.skeleton-line {
  height: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}

.w-40 { width: 40%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }
.h-32 { height: 8rem; }

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.pulse {
  animation: pulseAnim 1.5s infinite ease-in-out;
}

@keyframes pulseAnim {
  0% { opacity: 0.4; }
  50% { opacity: 0.8; }
  100% { opacity: 0.4; }
}

/* ==================== RESULTS PANEL LAYOUT ==================== */
#results-panel {
  max-width: 1100px;
  margin: 0 auto;
  animation: fadeIn 0.5s ease-out forwards;
}

/* Profile Summary Banner */
.profile-summary-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  margin-bottom: 2rem;
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.avatar-wrapper {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-cyan);
  position: relative;
  z-index: 2;
}

.avatar-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--accent-cyan);
  filter: blur(12px);
  opacity: 0.4;
  z-index: 1;
}

.profile-text h2 {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.milestone-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.2);
  color: var(--accent-cyan);
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.05);
}

.cache-badge-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.cache-hit-pill {
  font-size: 0.75rem;
  background: rgba(0, 230, 118, 0.08);
  border: 1px solid rgba(0, 230, 118, 0.25);
  color: var(--success-emerald);
  padding: 0.35rem 0.75rem;
  border-radius: 12px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}

.response-time-pill {
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  padding: 0.35rem 0.75rem;
  border-radius: 12px;
}

/* Metric Cards Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.metric-card {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.metric-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: rgba(255, 255, 255, 0.03);
}

.metric-info h3 {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.metric-info h2 {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.8rem;
}

.glow-cyan .metric-icon { color: var(--accent-cyan); border: 1px solid rgba(0, 229, 255, 0.15); box-shadow: 0 0 10px rgba(0, 229, 255, 0.05); }
.glow-purple .metric-icon { color: var(--accent-purple); border: 1px solid rgba(171, 71, 188, 0.15); box-shadow: 0 0 10px rgba(171, 71, 188, 0.05); }
.glow-blue .metric-icon { color: var(--accent-blue); border: 1px solid rgba(41, 182, 246, 0.15); box-shadow: 0 0 10px rgba(41, 182, 246, 0.05); }
.glow-yellow .metric-icon { color: var(--accent-yellow); border: 1px solid rgba(255, 202, 40, 0.15); box-shadow: 0 0 10px rgba(255, 202, 40, 0.05); }

/* Analysis Columns Row */
.analysis-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.analysis-column-left,
.analysis-column-right {
  padding: 2rem;
}

.panel-section-title {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.next-milestone-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-header);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.progress-checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}

@media (max-width: 768px) {
  .progress-checklist {
    grid-template-columns: 1fr;
  }
}

.checklist-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chk-details {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.chk-numbers {
  font-weight: 600;
  color: var(--text-primary);
}

.progress-bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 10px;
  width: 0;
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.fill-games { background: var(--accent-purple); box-shadow: 0 0 10px rgba(171, 71, 188, 0.4); }
.fill-trivia { background: var(--accent-cyan); box-shadow: 0 0 10px rgba(0, 229, 255, 0.4); }
.fill-skills { background: var(--accent-blue); box-shadow: 0 0 10px rgba(41, 182, 246, 0.4); }
.fill-courses { background: var(--accent-yellow); box-shadow: 0 0 10px rgba(255, 202, 40, 0.4); }

.milestone-complete-card {
  background: rgba(0, 230, 118, 0.06);
  border: 1px solid rgba(0, 230, 118, 0.2);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  animation: fadeIn 0.4s ease-out;
}

.milestone-crown {
  font-size: 3rem;
  color: var(--accent-yellow);
  text-shadow: 0 0 20px rgba(255, 202, 40, 0.4);
  margin-bottom: 1rem;
}

.milestone-complete-card h4 {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--success-emerald);
}

.milestone-complete-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Charts Container */
.chart-container {
  position: relative;
  height: 250px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==================== GEMINI PANEL (AI STRATEGIST) ==================== */
.gemini-panel {
  padding: 2.25rem;
  margin-bottom: 2rem;
  border-color: rgba(0, 229, 255, 0.15);
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.04);
}

.gemini-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid rgba(0, 229, 255, 0.1);
  padding-bottom: 1rem;
}

.gemini-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.gemini-icon-wrapper {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.25);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.gemini-title {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 1px;
}

.gemini-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.gemini-status-indicator {
  font-size: 0.8rem;
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 229, 255, 0.06);
  padding: 0.4rem 0.8rem;
  border-radius: 12px;
}

.status-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: pulseAnim 1.5s infinite;
}

.gemini-content-area {
  min-height: 100px;
}

.skeleton-text {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gemini-markdown-output {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-primary);
}

/* Format standard markdown styling inside Gemini container */
.gemini-markdown-output p {
  margin-bottom: 1rem;
}

.gemini-markdown-output h3 {
  font-family: var(--font-header);
  font-size: 1.1rem;
  margin: 1.5rem 0 0.75rem 0;
  color: var(--accent-cyan);
  font-weight: 600;
}

.gemini-markdown-output h3:first-of-type {
  margin-top: 0;
}

.gemini-markdown-output ul {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.gemini-markdown-output li {
  margin-bottom: 0.5rem;
}

.gemini-markdown-output strong {
  color: var(--accent-cyan);
  font-weight: 600;
}

.gemini-markdown-output code {
  font-family: monospace;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85rem;
}

/* ==================== BADGES PORTFOLIO showcase ==================== */
.collapsible-badges-drawer {
  padding: 1.5rem 2rem;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.drawer-header h3 {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.drawer-icon {
  font-size: 1.1rem;
  color: var(--text-secondary);
  transition: transform 0.3s ease;
}

.drawer-icon.rotated {
  transform: rotate(180deg);
}

.drawer-body {
  margin-top: 2rem;
  border-top: 1px solid var(--card-border);
  padding-top: 1.5rem;
  animation: fadeIn 0.4s ease-out;
}

.badges-filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.filter-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.filter-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.filter-btn.active {
  background: rgba(0, 229, 255, 0.08);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  font-weight: 600;
}

.icon-sm {
  font-size: 0.75rem;
}

.badges-grid-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.badge-gallery-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: var(--transition-smooth);
  animation: fadeIn 0.3s ease-out;
}

.badge-gallery-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.02);
}

.badge-thumb-container {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-thumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.badge-meta-info {
  flex-grow: 1;
  min-width: 0;
}

.badge-title-lbl {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
  display: block;
}

.badge-date-lbl {
  font-size: 0.75rem;
  color: var(--text-secondary);
  display: block;
}

.badge-type-tag {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 0.35rem;
}

.badge-type-tag.badge-tag-game { background: rgba(171, 71, 188, 0.1); border: 1px solid rgba(171, 71, 188, 0.3); color: var(--accent-purple); }
.badge-type-tag.badge-tag-trivia { background: rgba(0, 229, 255, 0.1); border: 1px solid rgba(0, 229, 255, 0.3); color: var(--accent-cyan); }
.badge-type-tag.badge-tag-skill { background: rgba(41, 182, 246, 0.1); border: 1px solid rgba(41, 182, 246, 0.3); color: var(--accent-blue); }
.badge-type-tag.badge-tag-course { background: rgba(255, 202, 40, 0.1); border: 1px solid rgba(255, 202, 40, 0.3); color: var(--accent-yellow); }

/* ==================== TEAM COMPARE TAB ==================== */
.compare-input-card {
  max-width: 750px;
  margin: 0 auto 3rem auto;
  padding: 2rem;
}

.compare-input-card h3 {
  font-family: var(--font-header);
  font-size: 1.05rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.dim-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.compare-input-card textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  color: var(--text-primary);
  padding: 1rem;
  font-family: monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  outline: none;
  resize: vertical;
  margin-bottom: 1.25rem;
  transition: var(--transition-smooth);
}

.compare-input-card textarea:focus {
  border-color: var(--accent-cyan);
}

#compare-results-panel {
  max-width: 1100px;
  margin: 0 auto;
  animation: fadeIn 0.4s ease-out;
}

/* Comparison Leaderboard Card */
.leaderboard-header {
  padding: 2rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  border-color: rgba(255, 202, 40, 0.15);
  box-shadow: 0 0 30px rgba(255, 202, 40, 0.05);
}

.leader-avatar-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.leader-avatar-container img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent-yellow);
  position: relative;
  z-index: 2;
}

.crown-glowing-ring {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  animation: bounceCrown 2s infinite alternate ease-in-out;
}

.team-crown {
  font-size: 1.8rem;
  color: var(--accent-yellow);
  text-shadow: 0 0 15px rgba(255, 202, 40, 0.8);
}

@keyframes bounceCrown {
  0% { transform: translateX(-50%) translateY(0) rotate(-5deg); }
  100% { transform: translateX(-50%) translateY(-6px) rotate(5deg); }
}

.leader-meta .meta-label {
  font-family: var(--font-header);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent-yellow);
  display: block;
  margin-bottom: 0.25rem;
}

.leader-meta h2 {
  font-family: var(--font-header);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.leader-meta p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* Comparison Matrix Table */
.table-container {
  padding: 1.5rem;
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.compare-table th {
  padding: 1rem 1.25rem;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--card-border);
}

.compare-table td {
  padding: 1.25rem;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.compare-table tbody tr {
  transition: var(--transition-smooth);
}

.compare-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.015);
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

/* Table elements detail */
.table-user-cell {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.table-rank-lbl {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-secondary);
  width: 20px;
}

.table-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.table-name {
  font-weight: 600;
  color: var(--text-primary);
}

.points-badge {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent-cyan);
}

.crown-row {
  background: rgba(255, 202, 40, 0.02) !important;
}

.crown-row:hover {
  background: rgba(255, 202, 40, 0.03) !important;
}

.crown-row td {
  border-bottom-color: rgba(255, 202, 40, 0.1) !important;
}

.table-crown-icon {
  color: var(--accent-yellow);
  margin-right: 0.35rem;
}

/* ==================== RULES & TIERS TAB ==================== */
.rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.rules-card {
  padding: 2rem 1.5rem;
  text-align: center;
}

.rules-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.card-icon {
  font-size: 2.2rem;
}

.cyan-glow { color: var(--accent-cyan); }
.purple-glow { color: var(--accent-purple); }
.blue-glow { color: var(--accent-blue); }
.yellow-glow { color: var(--accent-yellow); }

.rules-card h3 {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text-primary);
}

.points-weight {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.math-note {
  display: block;
  font-size: 0.75rem;
  font-family: var(--font-body);
  color: var(--text-secondary);
  margin-top: 0.2rem;
}

.rules-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.tiers-container {
  padding: 3rem 2.5rem;
}

.section-title {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.section-desc {
  color: var(--text-secondary);
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3rem auto;
  font-size: 0.95rem;
  line-height: 1.5;
}

.matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.matrix-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1.75rem;
  transition: var(--transition-smooth);
}

.matrix-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.1);
}

.matrix-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  text-align: center;
}

.matrix-card-header h4 {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0;
}

.m-prize {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.milestone-1 .m-prize { background: rgba(205, 127, 50, 0.12); border: 1px solid rgba(205, 127, 50, 0.3); color: #cd7f32; }
.milestone-2 .m-prize { background: rgba(192, 192, 192, 0.12); border: 1px solid rgba(192, 192, 192, 0.3); color: #c0c0c0; }
.milestone-3 .m-prize { background: rgba(255, 215, 0, 0.12); border: 1px solid rgba(255, 215, 0, 0.3); color: #ffd700; }
.milestone-4 .m-prize { background: rgba(0, 229, 255, 0.12); border: 1px solid rgba(0, 229, 255, 0.3); color: var(--accent-cyan); }

.matrix-requirements {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.82rem;
  padding: 0;
  margin: 0;
}

.matrix-requirements li {
  display: block;
  text-align: center;
  color: var(--text-secondary);
  line-height: 1.6;
}

.matrix-requirements li i {
  margin-right: 0.4rem;
}

.text-success {
  color: var(--success-emerald);
}

/* ==================== FOOTER ==================== */
.app-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.5rem 0;
  border-top: 1px solid var(--card-border);
  font-size: 0.8rem;
  color: var(--text-dim);
}

.footer-links a {
  color: var(--text-dim);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.footer-links a:hover {
  color: var(--accent-cyan);
}

/* ==================== MOBILE RESPONSIVENESS ==================== */
@media (max-width: 850px) {
  .app-header {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 0;
  }
  
  .analysis-row {
    grid-template-columns: 1fr;
  }
  
  .profile-summary-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  
  .cache-badge-wrapper {
    align-items: flex-start;
  }
  
  .app-footer {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

@media (max-width: 550px) {
  .input-card {
    flex-direction: column;
    padding: 1rem;
  }
  
  .input-wrapper,
  .glow-btn {
    width: 100%;
  }
  
  .hero-section h1, .hero-section h2 {
    font-size: 1.8rem;
  }
}

/* =========================================================================
   NEW TECH OVERLAYS & COHORT DROPDOWNS
   ========================================================================= */

/* Faint Cyber Tech Grid Backdrop */
.app-container::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: 
    linear-gradient(rgba(138, 180, 248, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 180, 248, 0.02) 1px, transparent 1px);
  background-size: 45px 45px;
  background-position: center;
  z-index: -2;
  pointer-events: none;
  /* Radial mask so the grid fades out toward the edges */
  mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 80%);
}

body.light-mode .app-container::before {
  background-image: 
    linear-gradient(rgba(26, 115, 232, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 115, 232, 0.03) 1px, transparent 1px);
  mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 90%);
}

/* Premium Cohort Select Dropdown wrapper and style */
.cohort-dropdown-wrapper {
  position: relative;
  min-width: 220px;
}

.cohort-dropdown-wrapper .select-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-cyan);
  font-size: 1.1rem;
  pointer-events: none;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.premium-select {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  padding: 1rem 1.5rem 1rem 3rem;
  font-size: 0.95rem;
  font-family: var(--font-header);
  font-weight: 500;
  border-radius: 10px;
  outline: none;
  cursor: pointer;
  appearance: none;
  transition: var(--transition-smooth);
}

body.light-mode .premium-select option {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.premium-select:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 10px rgba(0, 255, 135, 0.1) inset;
}

/* Dropdown arrow custom design */
.cohort-dropdown-wrapper::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 0.8rem;
  pointer-events: none;
}

/* =========================================================================
   SIMULATOR LAYOUT & DIRECTORY STYLES
   ========================================================================= */

.simulator-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1rem;
}

.directory-container {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  height: 750px;
  min-width: 0;
  overflow-x: hidden;
}

.directory-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.search-box-wrapper {
  position: relative;
  flex-grow: 1;
  min-width: 0;
  box-sizing: border-box;
}

.search-box-wrapper input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  padding: 0.85rem 1rem 0.85rem 2.75rem;
  font-size: 0.95rem;
  border-radius: 8px;
  outline: none;
  transition: var(--transition-smooth);
}

.search-box-wrapper input:focus {
  border-color: var(--accent-cyan);
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
}

.directory-sync-wrapper {
  display: flex;
  gap: 0.5rem;
}

.sync-btn, .reset-btn {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: var(--accent-cyan);
  padding: 0.85rem 1.25rem;
  border-radius: 8px;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition-smooth);
}

.sync-btn:hover {
  background: var(--accent-cyan);
  color: #030303;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.35);
}

.reset-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
}

.reset-btn:hover {
  background: rgba(255, 100, 100, 0.1);
  border-color: rgba(255, 100, 100, 0.3);
  color: #ff6b6b;
}

.directory-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.3rem;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  margin-bottom: 0.85rem;
}

.dir-filter-btn {
  flex-grow: 1;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-family: var(--font-header);
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: var(--transition-smooth);
}

.dir-filter-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.02);
}

.dir-filter-btn.active {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: var(--accent-cyan);
  font-weight: 600;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.directory-scroll-grid {
  flex-grow: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  padding-right: 0.5rem;
}

/* Simulated directory card styles */
.sim-badge-card {
  position: relative;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: var(--transition-smooth);
  user-select: none;
}

.sim-badge-card:hover {
  background: rgba(16, 185, 129, 0.02);
  border-color: rgba(16, 185, 129, 0.15);
}

.sim-badge-card.checked {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.05);
}

.sim-badge-card.checked .sim-checkbox {
  border-color: var(--accent-cyan);
  background: var(--accent-cyan);
  color: #030303;
}

.sim-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: transparent;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.sim-badge-image-container {
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sim-badge-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sim-badge-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.sim-badge-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

.sim-sno-label {
  font-weight: 700;
  color: var(--accent-theme);
  margin-right: 0.2rem;
}

.sim-badge-cat-tag {
  font-size: 0.68rem;
  font-family: var(--font-header);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  align-self: flex-start;
}

.sim-tag-games { background: rgba(0, 255, 135, 0.06); border: 1px solid rgba(0, 255, 135, 0.15); color: var(--accent-purple); }
.sim-tag-trivia { background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.15); color: var(--accent-cyan); }
.sim-tag-skills { background: rgba(5, 150, 105, 0.06); border: 1px solid rgba(5, 150, 105, 0.15); color: #08d98d; }
.sim-tag-courses { background: rgba(110, 231, 183, 0.06); border: 1px solid rgba(110, 231, 183, 0.15); color: var(--accent-yellow); }

/* Sidebar simulated cockpit */
.simulator-sidebar {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.sim-sidebar-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.5fr;
  gap: 1.25rem;
  align-items: start;
  width: 100%;
}

.sim-sidebar-col-points {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (max-width: 1024px) {
  .sim-sidebar-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .sim-sidebar-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.sim-points-card {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.02) inset;
}

.sim-points-lbl {
  font-size: 0.85rem;
  font-family: var(--font-header);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

#sim-points-val {
  font-size: 2.8rem;
  margin-top: 0.25rem;
  font-weight: 700;
  text-shadow: 0 0 25px rgba(16, 185, 129, 0.3);
}

.sim-stats-mini {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (max-width: 1024px) and (min-width: 769px) {
  .sim-stats-mini {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 500px) {
  .sim-stats-mini {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sim-stat-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 0.75rem 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: var(--transition-smooth);
}

.sim-stat-box:hover {
  border-color: rgba(16, 185, 129, 0.2);
}

.sim-stat-box .stat-icon {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.sim-stat-box .stat-icon.games { color: var(--accent-purple); }
.sim-stat-box .stat-icon.trivia { color: var(--accent-cyan); }
.sim-stat-box .stat-icon.skills { color: #08d98d; }
.sim-stat-box .stat-icon.courses { color: var(--accent-yellow); }

.sim-stat-box .stat-num {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.sim-stat-box .stat-lbl {
  font-size: 0.65rem;
  color: var(--text-secondary);
}

.sim-milestone-status {
  display: flex;
  justify-content: center;
}

.sim-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 255, 135, 0.08);
  border: 1px solid rgba(0, 255, 135, 0.2);
  color: var(--accent-purple);
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.4rem 1.25rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0 15px rgba(0, 255, 135, 0.05);
}

.emerald-text {
  color: var(--accent-cyan);
}

/* =========================================================================
   COMMUNITY LEARNING GUIDES & EXCLUDED CABINET STYLES
   ========================================================================= */

.guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.guide-card {
  box-sizing: border-box;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

.guide-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent-cyan);
}

.guide-card:hover {
  transform: translateY(-4px);
}

.guide-badge {
  align-self: flex-start;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: var(--accent-cyan);
  letter-spacing: 0.5px;
}

.guide-badge.ban-badge {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ff6b6b;
}

.guide-badge.pair-badge {
  background: rgba(0, 255, 135, 0.08);
  border: 1px solid rgba(0, 255, 135, 0.2);
  color: var(--accent-purple);
}

.guide-badge.game-badge {
  background: rgba(110, 231, 183, 0.08);
  border: 1px solid rgba(110, 231, 183, 0.2);
  color: var(--accent-yellow);
}

.guide-card h3 {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text-primary);
}

.guide-card p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.guide-card ul {
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.guide-card li {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
  list-style: none;
}

.red-text {
  color: #ff6b6b;
  margin-right: 0.25rem;
}

.guide-footer-tag {
  margin-top: auto;
  font-size: 0.75rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Excluded cabinet styling */
.excluded-drawer {
  margin-top: 1.5rem;
  border-color: rgba(239, 68, 68, 0.08) !important;
}

.excluded-drawer:hover {
  border-color: rgba(239, 68, 68, 0.2) !important;
}

.excluded-drawer h3 i {
  color: #ff6b6b;
}

.drawer-notice {
  font-size: 0.85rem;
  color: #ff6b6b;
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Excluded badge thumb dimming */
.excluded-drawer .badge-gallery-card {
  opacity: 0.6;
  filter: grayscale(80%);
  border-color: rgba(239, 68, 68, 0.1);
  transition: var(--transition-smooth);
}

.excluded-drawer .badge-gallery-card:hover {
  opacity: 0.95;
  filter: grayscale(10%);
  border-color: rgba(239, 68, 68, 0.25);
}

.badge-tag-excluded {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ff6b6b;
}

/* Responsive simulator scaling */
@media (max-width: 1024px) {
  .simulator-layout {
    grid-template-columns: 1fr;
    overflow-x: hidden;
  }
  
  .directory-container {
    height: 600px;
  }
}

/* =========================================================================
   URL FINDER DRAWER STYLES
   ========================================================================= */
.url-helper-trigger-wrapper {
  text-align: center;
  margin: -2rem auto 2.5rem auto;
}

.text-link-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-header);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition-smooth);
  padding: 0.5rem 1.25rem;
  border-radius: 20px;
  border: 1px solid transparent;
}

.text-link-btn:hover {
  color: var(--accent-cyan);
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.15);
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.url-helper-drawer {
  max-width: 750px;
  margin: -1.5rem auto 3rem auto;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, padding 0.4s ease;
  max-height: 0;
  opacity: 0;
  padding: 0 1.5rem;
}

.url-helper-drawer.open-drawer {
  max-height: 1000px;
  opacity: 1;
  padding: 1.5rem 2rem;
  border-color: var(--card-border-hover);
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.06);
}

.drawer-inner h3 {
  font-family: var(--font-header);
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.helper-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.helper-step {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  transition: var(--transition-smooth);
}

.helper-step:hover {
  border-color: rgba(0, 255, 135, 0.2);
  background: rgba(0, 255, 135, 0.01);
  transform: translateY(-2px);
}

.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 0.9rem;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.helper-step p {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.glow-link {
  color: var(--accent-cyan);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition-smooth);
}

.glow-link:hover {
  color: var(--accent-purple);
  text-shadow: 0 0 10px rgba(0, 255, 135, 0.4);
}

.icon-xs {
  font-size: 0.65rem;
  margin-left: 0.1rem;
}


/* =========================================================================
   FAQ & SUPPORT TAB STYLES
   ========================================================================= */

.faq-layout {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 2.5rem;
  margin-top: 1rem;
  align-items: start;
}

.faq-sidebar {
  position: sticky;
  top: 2rem;
}

.link-hub-card {
  padding: 2rem;
}

.hub-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.75rem;
}

.hub-links-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hub-link-item {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-primary);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.hub-link-item:hover {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.25);
  transform: translateX(4px);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.08);
}

.hub-link-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: var(--transition-smooth);
}

.hub-link-item:hover .hub-link-icon {
  background: var(--accent-cyan);
  color: #030303;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.hub-link-meta {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.hub-link-title {
  font-family: var(--font-header);
  font-size: 0.9rem;
  font-weight: 600;
}

.hub-link-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.hub-arrow {
  font-size: 0.8rem;
  color: var(--text-dim);
  transition: var(--transition-smooth);
}

.hub-link-item:hover .hub-arrow {
  color: var(--accent-cyan);
  transform: translateX(2px);
}

/* Accordion FAQs */
.faq-accordion-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.accordion-item {
  border-radius: 12px;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.accordion-item:hover {
  border-color: rgba(16, 185, 129, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.accordion-header {
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, 0.005);
}

.accordion-header h3 {
  font-family: var(--font-header);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: var(--transition-smooth);
}

.accordion-item:hover .accordion-header h3 {
  color: var(--accent-cyan);
}

.accordion-arrow {
  font-size: 0.95rem;
  color: var(--text-secondary);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.accordion-item.active {
  border-color: rgba(0, 255, 135, 0.25);
  box-shadow: 0 0 25px rgba(0, 255, 135, 0.03);
}

.accordion-item.active .accordion-header h3 {
  color: var(--accent-purple);
  text-shadow: 0 0 10px rgba(0, 255, 135, 0.2);
}

.accordion-item.active .accordion-arrow {
  transform: rotate(180deg);
  color: var(--accent-purple);
}

.accordion-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  padding: 0 2rem;
  background: rgba(0, 0, 0, 0.15);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.accordion-item.active .accordion-content {
  max-height: 500px;
  opacity: 1;
  padding: 0 2rem 1.75rem 2rem;
  border-top: 1px solid var(--card-border);
  padding-top: 1.25rem;
}

.accordion-content p {
  margin-bottom: 0.75rem;
}

.accordion-content p:last-child {
  margin-bottom: 0;
}

.accordion-content ul {
  margin-left: 1.25rem;
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.accordion-content strong {
  color: var(--text-primary);
}

/* Accordion Alert Box */
.accordion-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-radius: 8px;
  font-size: 0.82rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.accordion-alert.alert-warning {
  background: rgba(255, 193, 7, 0.04);
  border: 1px solid rgba(255, 193, 7, 0.15);
  color: #ffe082;
}

.accordion-alert.alert-warning i {
  color: #ffca28;
  font-size: 1rem;
}

.accordion-alert.alert-danger {
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.15);
  color: #ff8a80;
}

.accordion-alert.alert-danger i {
  color: #ff5252;
  font-size: 1rem;
}

.accordion-alert.alert-success {
  background: rgba(0, 255, 135, 0.04);
  border: 1px solid rgba(0, 255, 135, 0.15);
  color: #a7ffeb;
}

.accordion-alert.alert-success i {
  color: var(--accent-purple);
  font-size: 1rem;
}

/* Regions Grid for Swag Exclusions */
.regions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.5rem;
  margin: 0.75rem 0 1rem 0;
}

.region-pill {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ff6b6b;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  text-align: center;
  font-weight: 500;
  transition: var(--transition-smooth);
}

.region-pill:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
  transform: translateY(-1px);
}

/* Disclaimer Banner */
.disclaimer-banner {
  margin-top: 3.5rem;
  padding: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  border-color: rgba(255, 193, 7, 0.08);
  box-shadow: 0 0 35px rgba(255, 193, 7, 0.02) inset;
}

.disclaimer-icon {
  font-size: 2.2rem;
  color: #ffb300;
  text-shadow: 0 0 15px rgba(255, 179, 0, 0.3);
  margin-top: 0.2rem;
}

.disclaimer-text h4 {
  font-family: var(--font-header);
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffe082;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.disclaimer-text p {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Tab responsive styling */
@media (max-width: 950px) {
  .faq-layout {
    grid-template-columns: 1fr;
  }
  .faq-sidebar {
    position: static;
  }
}

/* ==================== PREMIUM UPGRADES: DYNAMIC SWAG CABINET & ROADMAP ==================== */

.swag-cabinet-section {
  padding: 2.25rem;
  border-color: rgba(0, 255, 135, 0.1);
  box-shadow: 0 0 30px rgba(0, 255, 135, 0.02);
  margin-bottom: 2rem;
}

.swag-cabinet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.swag-tier-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.swag-tier-card:hover {
  transform: translateY(-4px);
}

/* Unlocked State Styles */
.swag-tier-card.unlocked {
  border-color: rgba(0, 255, 135, 0.45);
  background: linear-gradient(135deg, rgba(0, 255, 135, 0.05), rgba(0, 255, 135, 0.02) 60%, rgba(255, 255, 255, 0.02));
  box-shadow: 0 10px 30px rgba(0, 255, 135, 0.1), inset 0 0 20px rgba(0, 255, 135, 0.03);
}

.swag-tier-card.unlocked::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #00ff87, #10b981);
  box-shadow: 0 2px 10px rgba(0, 255, 135, 0.5);
}

/* Locked State Styles */
.swag-tier-card.locked {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(15, 17, 20, 0.75);
  opacity: 0.80;
}

.swag-tier-card.locked::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.05);
}

.swag-tier-card.locked:hover {
  opacity: 0.9;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Card Header */
.swag-tier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.swag-tier-badge {
  font-family: var(--font-header);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.unlocked .swag-tier-badge {
  background: rgba(0, 255, 135, 0.1);
  color: #00ff87;
  border: 1px solid rgba(0, 255, 135, 0.3);
}

.locked .swag-tier-badge {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.swag-points-req {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.unlocked .swag-points-req {
  color: #a0ffcc;
  text-shadow: 0 0 8px rgba(0, 255, 135, 0.2);
}

/* Card Preview Frame */
.swag-tier-preview {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 1rem;
}

.swag-tier-glow {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  filter: blur(15px);
  z-index: 1;
}

.unlocked .swag-tier-glow {
  background: radial-gradient(circle, rgba(0, 255, 135, 0.2) 0%, rgba(0, 255, 135, 0) 70%);
  animation: pulseNeonGlow 3s infinite alternate ease-in-out;
}

.locked .swag-tier-glow {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 70%);
}

.swag-large-icon {
  font-size: 2.8rem;
  position: relative;
  z-index: 2;
  transition: transform 0.4s ease, color 0.4s ease;
}

.unlocked .swag-large-icon {
  color: #00ff87;
  filter: drop-shadow(0 0 12px rgba(0, 255, 135, 0.4));
}

.locked .swag-large-icon {
  color: rgba(255, 255, 255, 0.15);
}

.swag-tier-card:hover .swag-large-icon {
  transform: scale(1.1) rotate(3deg);
}

@keyframes pulseNeonGlow {
  0% { opacity: 0.6; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.1); }
}

/* Card Meta Content */
.swag-tier-meta {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.swag-tier-meta h4 {
  font-family: var(--font-header);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

.unlocked .swag-tier-meta h4 {
  text-shadow: 0 0 8px rgba(0, 255, 135, 0.15);
}

.swag-items-list {
  list-style: none;
  padding: 0 !important;
  margin: 0 0 1.25rem 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-grow: 1;
}

.swag-items-list li {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.unlocked .swag-items-list li {
  color: rgba(255, 255, 255, 0.9);
}

.swag-items-list li i {
  font-size: 0.45rem;
  margin-top: 0.4rem;
  flex-shrink: 0;
}

.unlocked .swag-items-list li i {
  color: #00ff87;
  text-shadow: 0 0 5px rgba(0, 255, 135, 0.8);
}

.locked .swag-items-list li i {
  color: rgba(255, 255, 255, 0.25);
}

/* Progress Status bar/tag */
.swag-unlock-progress {
  font-family: var(--font-header);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  padding: 0.5rem;
  border-radius: 6px;
  margin-top: auto;
}

.unlocked .swag-unlock-progress {
  background: rgba(0, 255, 135, 0.08);
  border: 1px solid rgba(0, 255, 135, 0.2);
  color: #00ff87;
}

.locked .swag-unlock-progress {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
}

/* ==================== ROADMAP AUDIT CHECKLIST ==================== */

.missing-badges-section {
  padding: 2.25rem;
  border-color: rgba(239, 68, 68, 0.25);
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.04);
  margin-bottom: 2rem;
}

.missing-badges-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.missing-badges-header h3 {
  font-family: var(--font-header);
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.missing-summary-badge {
  font-family: var(--font-header);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.missing-summary-badge.all-clear {
  background: rgba(0, 255, 135, 0.1);
  border: 1px solid rgba(0, 255, 135, 0.3);
  color: #00ff87;
  box-shadow: 0 0 10px rgba(0, 255, 135, 0.1);
}

.missing-summary-badge.has-missing {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ff8a80;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.1);
}

.missing-badges-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.missing-category-group {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 1.25rem;
}

.missing-category-title {
  font-family: var(--font-header);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 0.5rem;
}

.missing-category-title span {
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
}

.missing-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}

.missing-badge-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  min-width: 0;
}

.missing-badge-card:hover {
  transform: translateY(-2px);
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.02);
}

.missing-badge-thumb-container {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 2px;
}

.missing-badge-thumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.missing-badge-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex-grow: 1;
}

.missing-status-tag {
  font-size: 0.65rem;
  color: #ff6b6b;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.missing-indicator {
  display: none;
}

@keyframes pulseRedIndicator {
  0% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 12px rgba(255, 82, 82, 1); }
  100% { transform: scale(0.9); opacity: 0.6; }
}

.missing-badge-title {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 500;
}

.missing-badge-card:hover .missing-badge-title {
  color: #fff;
}

/* ==================== STATIC SWAG REWARDS CATALOG (RULES TAB) ==================== */

.static-swag-showcase {
  margin-top: 3rem;
  border-color: rgba(0, 229, 255, 0.1);
  box-shadow: 0 0 35px rgba(0, 229, 255, 0.02);
}

.static-swag-showcase .section-title {
  font-family: var(--font-header);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.static-swag-showcase .section-title i {
  color: var(--accent-cyan);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

.static-swag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.static-swag-card {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.3s ease, 
              box-shadow 0.3s ease;
}

.static-swag-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 229, 255, 0.25);
  box-shadow: 0 10px 30px rgba(0, 229, 255, 0.05);
}

.static-swag-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.03);
  transition: background-color 0.3s ease;
}

.static-swag-card:hover::before {
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
}

.static-swag-icon {
  font-size: 2.8rem;
  color: var(--accent-cyan);
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.3));
  margin-bottom: 1.25rem;
  transition: transform 0.4s ease;
}

.static-swag-card:hover .static-swag-icon {
  transform: scale(1.1) rotate(5deg);
}

.static-swag-card h4 {
  font-family: var(--font-header);
  font-size: 1.1rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.static-swag-value {
  font-family: var(--font-header);
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.2);
  color: var(--accent-cyan);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 1.25rem;
  letter-spacing: 0.5px;
}

.static-swag-card p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 1.25rem;
}

.static-swag-items {
  list-style: none;
  padding: 0 !important;
  margin: 0 auto !important;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: max-content;
}

.static-swag-items li {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}

.static-swag-items li i {
  color: var(--accent-cyan);
  font-size: 0.65rem;
}

/* =========================================================================
   STEP 9: PREMIUM INTERACTIVE HOLOGRAM & SOUND OVERDRIVE STYLING
   ========================================================================= */

/* 1. Dynamic Theme Class Variable Overrides */
body.theme-sapphire {
  --accent-cyan: #00d2ff;
  --accent-cyan-rgb: 0, 210, 255;
  --accent-purple: #0072ff;
  --accent-purple-rgb: 0, 114, 255;
  --accent-blue: #0a2ef5;
  --accent-blue-rgb: 10, 46, 245;
  --accent-yellow: #9b51e0;
  --accent-yellow-rgb: 155, 81, 224;
  --neon-glow-cyan: 0 0 20px rgba(0, 210, 255, 0.35);
  --neon-glow-purple: 0 0 20px rgba(0, 114, 255, 0.35);
}

body.theme-amber {
  --accent-cyan: #f2994a;
  --accent-cyan-rgb: 242, 153, 74;
  --accent-purple: #f2c94c;
  --accent-purple-rgb: 242, 201, 76;
  --accent-blue: #e28212;
  --accent-blue-rgb: 226, 130, 18;
  --accent-yellow: #ffd043;
  --accent-yellow-rgb: 255, 208, 67;
  --neon-glow-cyan: 0 0 20px rgba(242, 153, 74, 0.35);
  --neon-glow-purple: 0 0 20px rgba(242, 201, 76, 0.35);
}

body.theme-amethyst {
  --accent-cyan: #ff007f;
  --accent-cyan-rgb: 255, 0, 127;
  --accent-purple: #9b51e0;
  --accent-purple-rgb: 155, 81, 224;
  --accent-blue: #7000ff;
  --accent-blue-rgb: 112, 0, 255;
  --accent-yellow: #ff9cf7;
  --accent-yellow-rgb: 255, 156, 247;
  --neon-glow-cyan: 0 0 20px rgba(255, 0, 127, 0.35);
  --neon-glow-purple: 0 0 20px rgba(155, 81, 224, 0.35);
}

/* 2. Particle Canvas Background */
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.15;
}

/* Keep other structural parts on top of the particle canvas */
.glow-orb, .app-container {
  z-index: 1;
}

/* 3. Header Theme & Audio Toggles */
.header-controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  padding: 0.45rem 1rem;
  border-radius: 30px;
  border: 1px solid var(--card-border);
  backdrop-filter: blur(10px);
  margin-left: 1rem;
  position: relative;
  z-index: 200; /* Establish high stacking priority so child dropdowns display in front of navigations and dots */
}

.theme-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
  position: relative;
}

.theme-dot:hover {
  transform: scale(1.25);
  border-color: rgba(255, 255, 255, 0.6);
}

.theme-dot.active {
  border-color: #fff !important;
  box-shadow: 0 0 10px currentColor;
  transform: scale(1.15);
}

.theme-dot.emerald { background-color: #00ff87; color: #00ff87; }
.theme-dot.sapphire { background-color: #00d2ff; color: #00d2ff; }
.theme-dot.amber { background-color: #f2994a; color: #f2994a; }
.theme-dot.amethyst { background-color: #ff007f; color: #ff007f; }

.sound-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s ease, transform 0.25s ease;
}

.sound-toggle-btn:hover {
  color: #fff;
  transform: scale(1.15);
}

.sound-toggle-btn.muted {
  color: var(--text-dim) !important;
}

/* 4. Credentials Passport UI Panel */
.passport-section {
  padding: 2.25rem;
  margin-bottom: 2rem;
}

.passport-layout-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-top: 1.5rem;
}

@media (max-width: 900px) {
  .passport-layout-wrapper {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

/* E-Passport Card Tilt Frame */
.passport-card-container {
  perspective: 1200px;
  width: 100%;
  max-width: 440px;
  height: 270px;
  cursor: grab;
  position: relative;
  transition: transform 0.3s ease;
}

@media (max-width: 480px) {
  .passport-card-container {
    width: 320px !important;
    height: 196px !important;
    perspective: none !important; /* Disable perspective on mobile to prevent clipping/layering issues */
    position: relative !important;
    margin: 0.5rem auto 1.5rem auto !important;
    touch-action: pan-y !important; /* Allow normal scrolling on touch */
  }

  .passport-card {
    width: 440px !important;
    height: 270px !important;
    transform: scale(0.72) !important;
    transform-origin: top center !important; /* Scale from top center to keep it aligned */
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    margin-left: -220px !important; /* Horizontally center the absolute scaled card */
    pointer-events: none !important; /* Disable interactive pointer events on mobile to avoid touch triggers/jumps */
  }

  #btn-passport-download {
    width: auto !important;
    min-width: 260px !important;
    max-width: 290px !important;
    margin: 0.5rem auto 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 0.82rem !important;
    padding: 0.7rem 1.2rem !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 390px) {
  .passport-card-container {
    width: 280px !important;
    height: 172px !important;
  }

  .passport-card {
    transform: scale(0.63) !important;
  }
}

@media (max-width: 350px) {
  .passport-card-container {
    width: 240px !important;
    height: 147px !important;
  }

  .passport-card {
    transform: scale(0.54) !important;
  }
}

.passport-card-container:active {
  cursor: grabbing;
}

.passport-card {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.1s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
  background-size: cover;
  background-position: center;
}

/* Passport Metallic Tiers Background Customizations */
.passport-card.tier-bronze {
  background: linear-gradient(135deg, #14110f 0%, #30201a 60%, #1f1410 100%);
  border-color: rgba(205, 127, 50, 0.3);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(205, 127, 50, 0.1);
}

.passport-card.tier-silver {
  background: linear-gradient(135deg, #181c1f 0%, #2b353d 60%, #15191c 100%);
  border-color: rgba(192, 192, 192, 0.3);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(192, 192, 192, 0.1);
}

.passport-card.tier-gold {
  background: linear-gradient(135deg, #1a1608 0%, #3a3212 60%, #211c09 100%);
  border-color: rgba(229, 184, 59, 0.35);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 30px rgba(229, 184, 59, 0.15);
}

.passport-card.tier-platinum {
  background: linear-gradient(135deg, #0e1215 0%, #202d35 60%, #080d10 100%);
  border-color: rgba(0, 229, 255, 0.35);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 229, 255, 0.25);
}

.passport-card.tier-diamond {
  background: linear-gradient(135deg, #0f0b1a 0%, #281545 60%, #0a0512 100%);
  border-color: rgba(224, 180, 255, 0.45);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 45px rgba(224, 180, 255, 0.35);
}

/* Cyber grid matrix overlay on card */
.passport-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 15px 15px;
  opacity: 0.8;
  pointer-events: none;
  border-radius: 16px;
  z-index: 1;
}

.passport-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  opacity: 0.018; /* Extremely subtle watermarking */
  color: #fff;
  pointer-events: none;
  z-index: 1;
}

/* 5. Realistic Optical Hologram foil class */
.passport-hologram {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    115deg,
    transparent 15%,
    rgba(255, 255, 255, 0.2) 25%,
    rgba(0, 210, 255, 0.15) 35%,
    rgba(255, 0, 127, 0.15) 45%,
    rgba(255, 255, 0, 0.12) 55%,
    rgba(0, 255, 135, 0.15) 65%,
    transparent 75%
  );
  background-size: 250% 250%;
  background-position: 50% 50%;
  opacity: 0.2;
  mix-blend-mode: color-dodge;
  transition: opacity 0.3s ease, background-position 0.1s ease;
  pointer-events: none;
  z-index: 5;
  border-radius: 16px;
}

.passport-card-container:hover .passport-hologram {
  opacity: 0.55;
}

/* Card Header Section */
.passport-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  transform: translateZ(30px);
}

.passport-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.passport-logo i {
  color: var(--accent-cyan);
  font-size: 1.15rem;
  filter: drop-shadow(0 0 5px var(--accent-cyan));
}

.passport-logo span {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  color: #fff;
}

.passport-tier-pill {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 0.65rem;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.tier-bronze .passport-tier-pill { background: rgba(205, 127, 50, 0.1); border-color: rgba(205, 127, 50, 0.3); color: #e59b5d; }
.tier-silver .passport-tier-pill { background: rgba(192, 192, 192, 0.1); border-color: rgba(192, 192, 192, 0.3); color: #cbd3d6; }
.tier-gold .passport-tier-pill { background: rgba(229, 184, 59, 0.1); border-color: rgba(229, 184, 59, 0.3); color: #ffd666; }
.tier-platinum .passport-tier-pill { background: rgba(0, 229, 255, 0.1); border-color: rgba(0, 229, 255, 0.3); color: #40f2ff; font-weight: 800; box-shadow: 0 0 10px rgba(0, 229, 255, 0.1); }
.tier-diamond .passport-tier-pill { background: rgba(224, 180, 255, 0.12); border-color: rgba(224, 180, 255, 0.3); color: #e0b4ff; font-weight: 800; box-shadow: 0 0 10px rgba(224, 180, 255, 0.15); }

/* Card Body Section */
.passport-body {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  z-index: 2;
  margin: 0.75rem 0;
  transform: translateZ(40px);
  position: relative;
}

/* User Photo Box */
.passport-photo-area {
  position: relative;
  width: 75px;
  height: 75px;
  flex-shrink: 0;
}

.passport-photo {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.4);
}

.tier-bronze .passport-photo { border-color: rgba(205, 127, 50, 0.4); }
.tier-silver .passport-photo { border-color: rgba(192, 192, 192, 0.4); }
.tier-gold .passport-photo { border-color: rgba(229, 184, 59, 0.4); }
.tier-platinum .passport-photo { border-color: var(--accent-cyan); box-shadow: 0 0 10px rgba(0, 229, 255, 0.15); }
.tier-diamond .passport-photo { border-color: #e0b4ff; box-shadow: 0 0 10px rgba(224, 180, 255, 0.2); }

.passport-photo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}

/* Identity Credentials List */
.passport-identity-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.pass-detail-row {
  display: flex;
  gap: 1rem;
}

.pass-detail-row .pass-detail-group {
  flex: 1;
}

.pass-detail-group {
  display: flex;
  flex-direction: column;
}

.pass-label {
  font-family: var(--font-header);
  font-weight: 500;
  font-size: 0.52rem;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  margin-bottom: 0.08rem;
  opacity: 0.75;
}

.pass-value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.pass-value.monospace {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
}

/* Luxury real gold microchip component positioning */
.passport-chip {
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 30px;
  opacity: 0.85;
  transition: opacity 0.3s ease;
  transform: translateZ(10px);
}

.passport-card-container:hover .passport-chip {
  opacity: 1;
}

/* Card Footer Section */
.passport-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 0.65rem;
  z-index: 2;
  transform: translateZ(30px);
}

.passport-barcode-section {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Premium Visual Barcode Stripe */
.passport-barcode {
  height: 16px;
  width: 170px;
  background: repeating-linear-gradient(
    90deg,
    #fff,
    #fff 2px,
    transparent 2px,
    transparent 5px,
    #fff 5px,
    #fff 6px,
    transparent 6px,
    transparent 9px,
    #fff 9px,
    #fff 11px,
    transparent 11px,
    transparent 13px
  );
  opacity: 0.65;
  border-radius: 2px;
}

.barcode-text {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.48rem;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  opacity: 0.65;
}

.passport-qr-code svg {
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0.7;
}

/* Passport control side panel elements */
.passport-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.passport-controls h4 {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
}

.passport-controls p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.passport-skin-legend {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.passport-skin-legend li {
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.passport-skin-legend li i {
  font-size: 0.85rem;
}

.skin-bronze { color: #cd7f32; filter: drop-shadow(0 0 3px rgba(205, 127, 50, 0.3)); }
.skin-silver { color: #c0c0c0; filter: drop-shadow(0 0 3px rgba(192, 192, 192, 0.3)); }
.skin-gold { color: #e5b83b; filter: drop-shadow(0 0 3px rgba(229, 184, 59, 0.3)); }
.skin-platinum { color: #00d2ff; filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.3)); }
.skin-diamond { color: #e0b4ff; filter: drop-shadow(0 0 5px rgba(224, 180, 255, 0.5)); }

/* =========================================================================
   PREMIUM HIGH-TECH VISUAL EFFECTS & GLOW OVERDRIVE
   ========================================================================= */

/* 1. Metallic Sheen/Shine Sweep on Glass Panels */
.glass-panel {
  position: relative;
  overflow: hidden;
}

.glass-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 1;
  transition: 0.75s;
}

.glass-panel:hover::before {
  left: 150%;
  transition: 0.75s;
}

/* 2. Holographic Cyber Security Scanning Line on Avatars */
.avatar-wrapper {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.avatar-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  box-shadow: 0 0 8px var(--accent-cyan);
  z-index: 3;
  pointer-events: none;
  animation: scanLineCircular 3s infinite ease-in-out;
}

.passport-photo-area {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.passport-photo-area::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  box-shadow: 0 0 10px var(--accent-cyan);
  z-index: 3;
  pointer-events: none;
  animation: scanLineCircular 3.5s infinite ease-in-out;
}

@keyframes scanLineCircular {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* 3. Glowing Solar Corona Pulse on Active Theme Selectors */
.theme-dot.active {
  border-color: #fff !important;
  box-shadow: 0 0 12px currentColor, 0 0 25px currentColor;
  transform: scale(1.3);
  animation: orbitPulse 2s infinite ease-in-out;
}

@keyframes orbitPulse {
  0% { box-shadow: 0 0 10px currentColor, 0 0 20px currentColor; }
  50% { box-shadow: 0 0 18px currentColor, 0 0 35px currentColor, 0 0 50px rgba(255, 255, 255, 0.25); }
  100% { box-shadow: 0 0 10px currentColor, 0 0 20px currentColor; }
}

/* 4. Padlock Shake Animation on Locked Swag Cards Hover */
.swag-tier-card.locked:hover .swag-large-icon {
  animation: lockRattle 0.5s ease-in-out;
  color: rgba(255, 255, 255, 0.4);
}

@keyframes lockRattle {
  0% { transform: scale(1.1) rotate(0deg); }
  15% { transform: scale(1.1) rotate(-8deg); }
  30% { transform: scale(1.1) rotate(7deg); }
  45% { transform: scale(1.1) rotate(-5deg); }
  60% { transform: scale(1.1) rotate(4deg); }
  75% { transform: scale(1.1) rotate(-2deg); }
  100% { transform: scale(1.1) rotate(0deg); }
}

/* 5. Breathing Aura Animation on Unlocked Swag Cards */
.swag-tier-card.unlocked {
  animation: unlockedCardPulse 4s infinite alternate ease-in-out;
}

@keyframes unlockedCardPulse {
  0% { 
    box-shadow: 0 10px 30px rgba(0, 255, 135, 0.08), inset 0 0 20px rgba(0, 255, 135, 0.02); 
    border-color: rgba(0, 255, 135, 0.45);
  }
  100% { 
    box-shadow: 0 15px 40px rgba(0, 255, 135, 0.22), inset 0 0 30px rgba(0, 255, 135, 0.05); 
    border-color: rgba(0, 255, 135, 0.75); 
  }
}

/* 6. Gold Aura and Crowning Effects on Matrix Leaderboard */
.crown-row {
  background: rgba(255, 215, 0, 0.04) !important;
  box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.03);
}

.crown-row:hover {
  background: rgba(255, 215, 0, 0.06) !important;
  box-shadow: inset 0 0 25px rgba(255, 215, 0, 0.05);
}

.crown-row td {
  border-bottom-color: rgba(255, 215, 0, 0.2) !important;
  color: #ffe082 !important;
}

.crown-row:hover .table-crown-icon {
  animation: crownWobble 0.6s infinite alternate ease-in-out;
}

@keyframes crownWobble {
  0% { transform: rotate(-8deg) scale(1.15); }
  100% { transform: rotate(8deg) scale(1.15); }
}

/* 7. Hover Neon Glows on Metrics widgets */
.metric-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.metric-card:hover {
  transform: translateY(-4px);
}

.glow-cyan:hover { box-shadow: 0 8px 30px rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.4); }
.glow-purple:hover { box-shadow: 0 8px 30px rgba(0, 255, 135, 0.15); border-color: rgba(0, 255, 135, 0.4); }
.glow-blue:hover { box-shadow: 0 8px 30px rgba(5, 150, 105, 0.15); border-color: rgba(5, 150, 105, 0.4); }
.glow-yellow:hover { box-shadow: 0 8px 30px rgba(110, 231, 183, 0.15); border-color: rgba(110, 231, 183, 0.4); }

/* 8. Developed by Himadri styled link */
.developed-by-link {
  font-size: 7.5px;
  color: rgba(255, 255, 255, 0.3);
  position: relative;
  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  vertical-align: middle;
}

.developed-by-link:hover {
  color: #ffffff;
  font-size: 9px;
}

.developed-by-link::after {
  content: '';
  display: block;
  height: 1px;
  background-color: #ffffff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.developed-by-link:hover::after {
  transform: scaleX(1);
}

/* 9. Holographic E-Passport APPROVED Rubber Stamp styling */
.passport-stamp {
  position: absolute;
  left: 64%;
  top: 78%;
  transform: translate(-50%, -50%) rotate(-15deg);
  width: 82px;
  height: 82px;
  border: 3px solid rgba(239, 68, 68, 0.65);
  outline: 2px solid rgba(239, 68, 68, 0.65);
  outline-offset: -3px;
  border-radius: 50%;
  color: rgba(239, 68, 68, 0.65);
  font-family: 'Space Grotesk', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 4;
  text-align: center;
  box-shadow: 0 0 5px rgba(239, 68, 68, 0.12);
  background: rgba(239, 68, 68, 0.02);
  transition: all 0.3s ease;
}

.passport-stamp .stamp-org {
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.passport-stamp .stamp-status {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 1px 0;
}

.passport-stamp .stamp-date {
  font-size: 4.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.passport-stamp .stamp-divider {
  width: 45px;
  height: 1px;
  background-color: rgba(239, 68, 68, 0.45);
  margin: 2px 0;
}

/* 10. Gemini Strategist markdown headers & gradient divider styling */
.gemini-markdown-output h1,
.gemini-markdown-output h2,
.gemini-markdown-output h3,
.gemini-markdown-output h4,
.gemini-markdown-output h5,
.gemini-markdown-output h6 {
  font-family: var(--font-header);
  color: var(--accent-cyan);
  font-weight: 600;
  margin: 1.25rem 0 0.65rem 0;
}

.gemini-markdown-output h1 { font-size: 1.4rem; }
.gemini-markdown-output h2 { font-size: 1.25rem; }
.gemini-markdown-output h3 { font-size: 1.15rem; }
.gemini-markdown-output h4 { font-size: 1.05rem; }
.gemini-markdown-output h5 { font-size: 0.95rem; }
.gemini-markdown-output h6 { font-size: 0.85rem; }

.gemini-markdown-output h1:first-of-type,
.gemini-markdown-output h2:first-of-type,
.gemini-markdown-output h3:first-of-type,
.gemini-markdown-output h4:first-of-type {
  margin-top: 0;
}

.gemini-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  margin: 1.25rem 0;
}

/* =========================================================================
   PENTAVERSE INDIA - PREMIUM BRANDING & LIVE WIDGETS OVERDRIVE STYLES
   ========================================================================= */

/* 1. Pentaverse logo animations */
.penta-logo-svg {
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.45));
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.logo-area:hover .penta-logo-svg {
  transform: rotate(360deg) scale(1.1);
}

/* 2. Remember Me Checkbox */
.remember-me-wrapper {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
}
.premium-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  font-size: 0.9rem;
  color: var(--text-secondary);
  transition: var(--transition-smooth);
}
.premium-checkbox-label:hover {
  color: #0C0A15;
}
.premium-checkbox-label input[type="checkbox"] {
  display: none;
}
.custom-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--card-border);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  position: relative;
  transition: var(--transition-smooth);
}
.premium-checkbox-label input[type="checkbox"]:checked + .custom-checkbox {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}
.premium-checkbox-label input[type="checkbox"]:checked + .custom-checkbox::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 3. Cohort Countdown Clock widget */
/* 3. Cohort Countdown Clock widget */
.countdown-panel {
  max-width: 820px;
  margin: -2rem auto 3rem auto;
  padding: 1.5rem 2rem;
  animation: fadeIn 0.5s ease-out forwards;
}

.countdown-header-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

.countdown-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.countdown-badge {
  font-size: 0.7rem;
  background: rgba(66, 133, 244, 0.08);
  border: 1px solid rgba(66, 133, 244, 0.22);
  color: #4285F4;
  padding: 0.25rem 0.65rem;
  border-radius: 8px;
  width: max-content;
  letter-spacing: 1.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

body.light-mode .countdown-badge {
  background: rgba(66, 133, 244, 0.06);
  border-color: rgba(66, 133, 244, 0.15);
}

.countdown-header-info h3 {
  font-family: var(--font-header);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.countdown-cohort-desc {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0.15rem 0 0.4rem 0;
}

.countdown-dates-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.date-range-badge,
.target-date-badge {
  font-size: 0.72rem;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
}

.date-range-badge {
  background: rgba(26, 115, 232, 0.05);
  border: 1px solid rgba(26, 115, 232, 0.15);
  color: #1A73E8;
}

.target-date-badge {
  background: rgba(234, 67, 53, 0.05);
  border: 1px solid rgba(234, 67, 53, 0.15);
  color: #EA4335;
}

.countdown-clock-grid {
  display: flex;
  gap: 1rem;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.countdown-lbl {
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 3D Split Flip Card Digit Style */
.digit-pair {
  display: flex;
  gap: 0.25rem;
}

.clock-digit {
  position: relative;
  width: 38px;
  height: 52px;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.clock-digit .card {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(40, 40, 40, 0.95), rgba(20, 20, 20, 0.95));
  border: 1px solid var(--card-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.light-mode .clock-digit .card {
  background: linear-gradient(to bottom, #ffffff, #f1f3f4);
  border-color: #dadce0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Upper half card position */
.clock-digit .card.upper-end,
.clock-digit .card.upper-start {
  top: 0;
  border-bottom: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  transform-origin: 50% 100%;
}

/* Lower half card position */
.clock-digit .card.lower-start,
.clock-digit .card.lower-end {
  bottom: 0;
  border-top: none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  transform-origin: 50% 0%;
}

/* Character value styling */
.clock-digit .card span {
  font-family: 'Space Grotesk', monospace;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--accent-theme);
  text-shadow: var(--glow-theme);
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  height: 52px;
  line-height: 52px;
  display: block;
}

body.light-mode .clock-digit .card span {
  color: #1a73e8;
  text-shadow: none;
}

.clock-digit .card.upper-end span,
.clock-digit .card.upper-start span {
  top: 0;
}

.clock-digit .card.lower-start span,
.clock-digit .card.lower-end span {
  bottom: 0;
}

/* Middle separation line */
.clock-digit::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: 10;
}

body.light-mode .clock-digit::before {
  background: rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 4. Global Leaderboard rank indicator */
.profile-badges-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.global-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.22);
  color: #c084fc;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.05);
}

/* 5. Horizontal Progress Roadmap */
.roadmap-timeline-card {
  padding: 2rem;
  margin-bottom: 2rem;
}
.roadmap-line-wrapper {
  position: relative;
  padding: 2.5rem 0 1rem 0;
  margin: 0 2rem;
}
.roadmap-progress-bar-bg {
  position: absolute;
  left: 0;
  top: calc(2.5rem + 15px);
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  z-index: 1;
  border-radius: 2px;
}
.roadmap-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
  width: 0%;
  border-radius: 2px;
  box-shadow: 0 0 10px var(--accent-cyan);
  transition: width 1s ease-in-out;
}
.roadmap-nodes-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}
.roadmap-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  text-align: center;
}
.node-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #080a08;
  border: 2px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: var(--transition-smooth);
  box-shadow: 0 0 0 4px #030303;
}
.roadmap-node.active .node-dot {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.4), 0 0 0 4px #030303;
}
.roadmap-node.unlocked .node-dot {
  border-color: var(--accent-purple);
  color: var(--accent-purple);
  box-shadow: 0 0 15px rgba(0, 255, 135, 0.4), 0 0 0 4px #030303;
}
.node-title {
  font-family: var(--font-header);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 0.75rem;
  transition: var(--transition-smooth);
}
.roadmap-node.active .node-title {
  color: var(--accent-cyan);
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
}
.roadmap-node.unlocked .node-title {
  color: var(--accent-purple);
  text-shadow: 0 0 8px rgba(0, 255, 135, 0.2);
}
.node-desc {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.2rem;
}

/* 6. Chrome Extension Guide tabs */
.extension-layout-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2rem;
  margin-top: 1rem;
}
.extension-info-card, .extension-guide-card {
  padding: 2.25rem;
}
.extension-logo-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 1rem;
}
.extension-logo-header h3 {
  font-family: var(--font-header);
  font-size: 1.3rem;
  font-weight: 700;
}
.ext-ver {
  font-size: 0.75rem;
  color: var(--accent-cyan);
  background: rgba(16, 185, 129, 0.08);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}
.ext-description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}
.ext-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.ext-features-list li {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}
.ext-steps-timeline {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  padding-left: 1.5rem;
  border-left: 2px solid rgba(255, 255, 255, 0.05);
}
.ext-step-item {
  position: relative;
}
.ext-step-badge {
  position: absolute;
  left: calc(-1.5rem - 14px);
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #080a08;
  border: 2px solid var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}
.ext-step-detail h4 {
  font-family: var(--font-header);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.25rem;
}
.ext-step-detail p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* 7. Upgraded Footer Styles */
.app-footer-upgraded {
  margin-top: auto;
  padding: 4rem 0 3rem 0;
  border-top: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  position: relative;
  z-index: 1;
}
.footer-top-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.stat-counter-box {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.03);
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
  transition: var(--transition-smooth);
}
.stat-counter-box:hover {
  border-color: rgba(16, 185, 129, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}
.stat-count-val {
  font-family: var(--font-header);
  font-size: 2.2rem;
  font-weight: 700;
  display: block;
  background: linear-gradient(135deg, #fff 30%, var(--accent-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.25rem;
}
.stat-count-lbl {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.footer-mid-communities {
  text-align: center;
  background: rgba(168, 85, 247, 0.02);
  border: 1px dashed rgba(168, 85, 247, 0.2);
  padding: 2.5rem;
  border-radius: 16px;
}
.footer-mid-communities h4 {
  font-family: var(--font-header);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  letter-spacing: 0.5px;
}
.community-buttons-row {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.comm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 2rem;
  border-radius: 30px;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: var(--transition-smooth);
}
.telegram-btn {
  background: #229ED9;
  color: #fff;
  box-shadow: 0 0 15px rgba(34, 158, 217, 0.3);
}
.telegram-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(34, 158, 217, 0.5);
}
.whatsapp-btn {
  background: #25D366;
  color: #fff;
  box-shadow: 0 0 15px rgba(37, 211, 102, 0.3);
}
.whatsapp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(37, 211, 102, 0.5);
}
.footer-bottom-credits {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-dim);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 1.5rem;
}
.footer-links-row {
  display: flex;
  gap: 1.5rem;
}
.footer-links-row a {
  color: var(--text-dim);
  text-decoration: none;
  transition: var(--transition-smooth);
}
.footer-links-row a:hover {
  color: #fff;
}
.developed-by-link-glow {
  color: var(--accent-cyan) !important;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}
.developed-by-link-glow:hover {
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
}

@media (max-width: 850px) {
  .extension-layout-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .app-footer-upgraded {
    gap: 2rem;
  }
  .footer-bottom-credits {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

/* ==================== ADDITIONAL MOBILE RESPONSIVENESS AND CARD ANCHORS ==================== */

/* Make badge cards act as links without default styling */
.badge-gallery-card {
  text-decoration: none !important;
  color: inherit !important;
}
.missing-badge-card {
  text-decoration: none !important;
  color: inherit !important;
}

/* Inline badge link inside simulator */
.sim-badge-link {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 0.85rem;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}
.sim-badge-link:hover {
  color: var(--accent-cyan) !important;
  background: rgba(0, 229, 255, 0.08);
  border-color: rgba(0, 229, 255, 0.25);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.15);
}

/* Scrollable tabs bar on small mobile screens */
@media (max-width: 850px) {
  .app-nav {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    border-radius: 12px;
    justify-content: flex-start;
    padding: 0.5rem;
  }
  .nav-btn {
    flex-shrink: 0;
  }
}

/* Scrollable roadmap timeline on mobile screens */
@media (max-width: 650px) {
  .roadmap-line-wrapper {
    margin: 0;
    overflow-x: auto;
    padding-bottom: 2rem;
  }
  .roadmap-nodes-container {
    width: 600px;
  }
  .roadmap-progress-bar-bg {
    width: 600px;
  }
}

/* Flex select and checkbox stretch on mobile */
@media (max-width: 550px) {
  .input-card {
    gap: 0.75rem;
  }
  .cohort-dropdown-wrapper,
  .remember-me-wrapper {
    width: 100%;
  }
  .matrix-card-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.25rem !important;
  }
  .matrix-card-header h4 {
    margin: 0 !important;
  }
  .matrix-requirements {
    align-items: flex-start !important;
    width: max-content !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .countdown-clock-grid {
    gap: 0.65rem !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .countdown-unit {
    min-width: 0 !important;
  }
  .digit-pair {
    gap: 0.12rem !important;
  }
  .clock-digit {
    width: 26px !important;
    height: 38px !important;
  }
  .clock-digit .card span {
    font-size: 1.4rem !important;
    height: 38px !important;
    line-height: 38px !important;
  }
  .clock-digit .card.lower-start span,
  .clock-digit .card.lower-end span {
    bottom: 0 !important;
  }
}

@media (max-width: 380px) {
  .countdown-clock-grid {
    gap: 0.4rem !important;
  }
  .digit-pair {
    gap: 0.08rem !important;
  }
  .clock-digit {
    width: 20px !important;
    height: 30px !important;
  }
  .clock-digit .card span {
    font-size: 1.1rem !important;
    height: 30px !important;
    line-height: 30px !important;
  }
}





/* ========================================================================
   PI ARCADE COMPASS 3.0 — NEW COMPONENT STYLES (PHASE 1)
   Google Intelligence Platform: Empty State, Mode Toggle, Facilitator Hub,
   Theme Dots, Light Mode, Typography & Motion
   ======================================================================== */

/* ==================== LIGHT MODE BODY OVERRIDES ==================== */
body.light-mode {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}
body.light-mode .milestone-2 .m-prize {
  color: #5f6368 !important;
  background: rgba(95, 99, 104, 0.12) !important;
  border-color: rgba(95, 99, 104, 0.3) !important;
}
body.light-mode .milestone-3 .m-prize {
  color: #b8860b !important;
  background: rgba(184, 134, 11, 0.12) !important;
  border-color: rgba(184, 134, 11, 0.3) !important;
}
body.light-mode .milestone-4 .m-prize {
  color: #007e8a !important;
  background: rgba(0, 126, 138, 0.12) !important;
  border-color: rgba(0, 126, 138, 0.3) !important;
}
body.light-mode ::-webkit-scrollbar-track { background: var(--bg-secondary); }
body.light-mode ::-webkit-scrollbar-thumb { background: #DADCE0; }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: var(--accent-theme); }
body.light-mode .app-header { border-bottom-color: var(--card-border); }
body.light-mode .app-nav {
  background: rgba(255,255,255,0.8);
  border-color: #DADCE0;
}
body.light-mode .nav-btn.active { color: #fff !important; }
body.light-mode .skeleton-circle,
body.light-mode .skeleton-line { background: rgba(0,0,0,0.06); }
body.light-mode .hero-section h1, .hero-section h2 { color: var(--text-primary); }
body.light-mode #particle-canvas { opacity: 0.3; }

/* ==================== LOGO TITLE GRADIENT (theme-aware) ==================== */
.logo-title {
  display: block;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, var(--text-primary) 20%, var(--accent-theme) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==================== ACCENT TEXT GRADIENT ==================== */
.accent-text {
  background: linear-gradient(135deg, var(--accent-theme) 20%, var(--accent-theme-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cyan-text { color: var(--accent-theme); }

/* ==================== MODE TOGGLE BUTTON ==================== */
.mode-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(var(--accent-theme-rgb), 0.08);
  border: 1px solid rgba(var(--accent-theme-rgb), 0.2);
  color: var(--accent-theme);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}
.mode-toggle-btn:hover {
  background: rgba(var(--accent-theme-rgb), 0.15);
  box-shadow: var(--glow-theme);
  transform: rotate(15deg);
}
body.light-mode .mode-toggle-btn {
  background: rgba(26, 115, 232, 0.06);
  border-color: rgba(26, 115, 232, 0.2);
  color: var(--accent-primary);
}

/* Light Mode Overrides for Header controls */
body.light-mode .header-controls {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

body.light-mode .theme-dot {
  border-color: rgba(0, 0, 0, 0.15);
}

body.light-mode .theme-dot:hover {
  border-color: rgba(0, 0, 0, 0.45);
}

body.light-mode .theme-dot.active {
  border-color: #202124 !important;
}

/* Light Mode Overrides for Stats Counters */
body.light-mode .stat-count-val {
  background: linear-gradient(135deg, var(--accent-theme) 30%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.light-mode .stat-counter-box {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

body.light-mode .stat-counter-box:hover {
  background: #ffffff;
  border-color: var(--accent-theme);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Light Mode Overrides for Inputs & Search Boxes */
body.light-mode .input-wrapper input,
body.light-mode .search-box-wrapper input {
  background: #f1f3f4;
  border-color: #dadce0;
  color: #202124;
}

body.light-mode .input-wrapper input:focus,
body.light-mode .search-box-wrapper input:focus {
  background: #ffffff;
  border-color: var(--accent-theme);
  box-shadow: 0 0 0 1px var(--accent-theme);
}

/* Light Mode Overrides for Simulator Filters */
body.light-mode .directory-filter-bar {
  background: #f1f3f4;
  border-color: #dadce0;
}

body.light-mode .dir-filter-btn {
  color: #5f6368;
}

body.light-mode .dir-filter-btn:hover {
  color: #202124;
  background: rgba(0, 0, 0, 0.04);
}

body.light-mode .dir-filter-btn.active {
  background: var(--accent-theme);
  color: #ffffff !important;
  border-color: var(--accent-theme);
  text-shadow: none;
}

/* ==================== NEW THEME DOTS ==================== */
.theme-dot.google-blue { background: #1A73E8; }
.theme-dot.emerald    { background: #10b981; }
.theme-dot.sapphire   { background: #3B82F6; }
.theme-dot.amber      { background: #F59E0B; }
.theme-dot.amethyst   { background: #8B5CF6; }
.theme-dot.crimson    { background: #EF4444; }
.theme-dot.aurora     { background: #06B6D4; }
.theme-dot.gemini-violet { background: linear-gradient(135deg, #7C3AED, #A78BFA); }

/* ==================== EMPTY STATE DOODLE ==================== */
.empty-state-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem 1rem;
  transition: var(--transition-smooth);
}
.empty-state-container.hidden { display: none; }

.empty-state-doodle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  max-width: 440px;
  text-align: center;
}

.radar-wrapper {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radar-svg {
  width: 160px;
  height: 160px;
}
.radar-sweep-line {
  transform-origin: 100px 100px;
  animation: radarRotate 3s linear infinite;
}
@keyframes radarRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Orbiting badge rings */
.orbit-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.orbit-ring-1 {
  width: 140px; height: 140px;
  margin: -70px 0 0 -70px;
  animation: orbitSpin 6s linear infinite;
}
.orbit-ring-2 {
  width: 100px; height: 100px;
  margin: -50px 0 0 -50px;
  animation: orbitSpin 9s linear infinite reverse;
}
.orbit-ring-3 {
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  animation: orbitSpin 4s linear infinite;
}
.orbit-badge {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--card-border-hover);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--accent-theme);
}
@keyframes orbitSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.empty-state-text h3 {
  font-family: var(--font-header);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
}
.empty-state-text p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.thinking-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
}
.thinking-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-theme);
  opacity: 0;
  animation: thinkingDot 1.4s infinite ease-in-out;
}
.thinking-dots span:nth-child(1) { animation-delay: 0s; }
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinkingDot {
  0%, 80%, 100% { opacity: 0.1; transform: scale(0.85); }
  40%           { opacity: 1;   transform: scale(1.15); }
}

/* ==================== FACILITATOR HUB STYLES ==================== */
.facilitator-public-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.facilitator-intel-card {
  padding: 1.5rem;
}

.intel-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.intel-card-header h3 {
  font-family: var(--font-header);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}
.intel-desc { font-size: 0.8rem; color: var(--text-secondary); margin: 0; }

.intel-card-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.seasonal-icon { background: rgba(251,188,4,0.12); color: var(--accent-warning); }
.leaderboard-icon { background: rgba(var(--accent-theme-rgb),0.1); color: var(--accent-theme); }
.stats-icon { background: rgba(52,168,83,0.1); color: var(--accent-secondary); }

/* Seasonal events */
.seasonal-events-list { display: flex; flex-direction: column; gap: 0.75rem; }
.seasonal-event-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--card-border);
}
.active-event { border-color: rgba(52,168,83,0.25); background: rgba(52,168,83,0.04); }
.upcoming-event { border-color: rgba(251,188,4,0.2); background: rgba(251,188,4,0.04); }
.event-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.dot-green { background: var(--accent-secondary); box-shadow: 0 0 6px rgba(52,168,83,0.5); }
.dot-yellow { background: var(--accent-warning); box-shadow: 0 0 6px rgba(251,188,4,0.5); }
.dot-blue { background: var(--accent-theme); }
.event-info { flex: 1; }
.event-info strong { display: block; font-size: 0.85rem; color: var(--text-primary); font-weight: 500; }
.event-info span { font-size: 0.75rem; color: var(--text-secondary); }
.event-pts-badge {
  font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-theme-rgb),0.1);
  color: var(--accent-theme);
  white-space: nowrap;
}

/* Leaderboard preview */
.leaderboard-preview-list { display: flex; flex-direction: column; gap: 0.5rem; }
.lb-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
}
.lb-item-gold  { border-color: rgba(251,188,4,0.3); background: rgba(251,188,4,0.04); }
.lb-item-silver{ border-color: rgba(154,160,166,0.3); background: rgba(154,160,166,0.03); }
.lb-item-bronze{ border-color: rgba(234,67,53,0.2); background: rgba(234,67,53,0.03); }
.lb-rank { font-size: 1rem; width: 24px; text-align: center; }
.lb-name { flex: 1; font-size: 0.85rem; color: var(--text-primary); font-weight: 500; }
.lb-pts { font-size: 0.78rem; color: var(--text-secondary); }

/* Platform stats */
.platform-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.platform-stat-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--card-border);
}
.pstat-val {
  font-family: var(--font-header); font-size: 1.4rem; font-weight: 700;
  color: var(--accent-theme); line-height: 1.2;
}
.pstat-lbl { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.2rem; }

/* Facilitator upgrade CTA */
.facilitator-upgrade-cta {
  max-width: 1100px; margin: 0 auto 2rem;
  background: linear-gradient(135deg,
    rgba(var(--accent-theme-rgb), 0.06) 0%,
    rgba(var(--accent-theme-rgb), 0.02) 100%);
  border-color: rgba(var(--accent-theme-rgb), 0.2);
  animation: gentleGlow 4s ease-in-out infinite;
}
.upgrade-cta-inner {
  display: flex; align-items: center; gap: 2rem; padding: 2rem;
  flex-wrap: wrap;
}
.upgrade-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(var(--accent-theme-rgb), 0.12);
  border: 1px solid rgba(var(--accent-theme-rgb), 0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--accent-theme); flex-shrink: 0;
}
.upgrade-text { flex: 1; }
.upgrade-text h3 {
  font-family: var(--font-header); font-size: 1.15rem;
  font-weight: 600; color: var(--text-primary); margin-bottom: 0.4rem;
}
.upgrade-text p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; margin-bottom: 0.75rem; }
.upgrade-feature-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.upgrade-chip {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.75rem; padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-theme-rgb), 0.08);
  border: 1px solid rgba(var(--accent-theme-rgb), 0.18);
  color: var(--accent-theme);
}
.facilitator-unlock-btn { flex-shrink: 0; }

@keyframes gentleGlow {
  0%, 100% { box-shadow: var(--card-shadow); }
  50%       { box-shadow: var(--card-shadow), 0 0 20px rgba(var(--accent-theme-rgb), 0.08); }
}

/* ==================== LIGHT MODE: FACILITATOR HUB ==================== */
body.light-mode .seasonal-event-item { background: rgba(0,0,0,0.02); }
body.light-mode .platform-stat-item  { background: rgba(0,0,0,0.02); }
body.light-mode .lb-item { background: rgba(0,0,0,0.02); }
body.light-mode .upgrade-cta-inner h3 { color: var(--text-primary); }

/* ==================== COUNTER ROLL-UP ANIMATION ==================== */
.metric-value-animated {
  display: inline-block;
  animation: counterRoll 0.5s var(--transition-spring) both;
}

/* ==================== RESPONSIVE HEADER REFACTORS ==================== */

@media (max-width: 900px) {
  .app-header {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .logo-area {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  .app-nav {
    order: 2;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: var(--radius-md);
    padding: 0.5rem;
  }
  .nav-btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
  }
  .header-controls {
    order: 3;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}
@media (max-width: 600px) {
  .nav-btn .nav-label {
    display: none;
  }
  .nav-btn {
    padding: 0.6rem 0.8rem;
  }
  .theme-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
  }
}

/* ==================== NEW FACILITATOR HUB DASHBOARD ==================== */
.facilitator-promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.dates-ref-row {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
.social-row {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.facilitator-promo-card {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}

.highlight-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.highlight-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
.hl-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 0.35rem;
  flex-shrink: 0;
}
.hl-bullet.google-blue { background: #1A73E8; box-shadow: 0 0 6px rgba(26,115,232,0.5); }
.hl-bullet.emerald     { background: #34A853; box-shadow: 0 0 6px rgba(52,168,83,0.5); }
.hl-bullet.amber       { background: #FBBC05; box-shadow: 0 0 6px rgba(251,188,5,0.5); }
.hl-bullet.crimson     { background: #EA4335; box-shadow: 0 0 6px rgba(234,67,53,0.5); }

/* Status Badge & Countdown */
.status-badge-container {
  margin-bottom: 1rem;
}
.status-indicator-pill {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: rgba(251, 188, 5, 0.15);
  color: var(--accent-warning);
  border: 1px solid rgba(251, 188, 5, 0.3);
}
.status-indicator-pill.blinking-pill {
  animation: pillPulse 2s infinite ease-in-out;
}
@keyframes pillPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(0.98); }
}

.status-countdown-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.facilitator-countdown-grid {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.fac-countdown-unit {
  flex: 1;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--card-border);
  padding: 0.75rem 0.5rem;
  border-radius: var(--radius-md);
  text-align: center;
  display: flex;
  flex-direction: column;
}
body.light-mode .fac-countdown-unit {
  background: rgba(0,0,0,0.03);
}
.fac-timer-val {
  font-family: var(--font-header);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent-theme);
  line-height: 1.2;
}
.fac-timer-lbl {
  font-size: 0.68rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.2rem;
}

.fac-promo-btn {
  width: 100%;
  margin-top: auto;
  text-align: center;
  justify-content: center;
}

/* Referral code styles */
.ref-code-input-wrapper {
  display: flex;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
body.light-mode .ref-code-input-wrapper {
  background: rgba(0,0,0,0.02);
}
.ref-code-input-wrapper input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  padding: 0.85rem 1rem;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  outline: none;
  text-align: center;
}
.ref-copy-btn {
  background: var(--accent-theme);
  color: #fff;
  border: none;
  padding: 0 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: var(--transition-swift);
}
.ref-copy-btn:hover {
  filter: brightness(1.15);
}

.share-template-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.share-lbl {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.share-btn {
  background: #25D366;
  color: #fff;
  border: none;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: var(--transition-smooth);
}
.share-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* Key Dates Timeline */
.dates-timeline {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  padding-left: 0.5rem;
}
.timeline-date-item {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.tl-icon-wrapper {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.google-blue-bg { background-color: #1A73E8; }
.crimson-bg { background-color: #EA4335; }
.emerald-bg { background-color: #34A853; }
.amethyst-bg { background-color: #8B5CF6; }

.tl-content {
  display: flex;
  flex-direction: column;
}
.tl-content strong {
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 500;
}
.tl-content span {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

/* Social channels cards */
.social-connect-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  text-decoration: none;
  cursor: pointer;
}
.sc-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.telegram-card .sc-icon { color: #0088cc; }
.whatsapp-card .sc-icon { color: #25D366; }

.sc-details h4 {
  font-family: var(--font-header);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}
.sc-details p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 0.6rem;
}
.sc-link-lbl {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-theme);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.2s ease;
}
.social-connect-card:hover .sc-icon {
  transform: scale(1.15) rotate(-5deg);
}
.social-connect-card:hover .sc-link-lbl {
  gap: 0.5rem;
}

/* Points System Cards */
.points-system-section {
  margin: 3.5rem 0;
}
.section-title {
  font-family: var(--font-header);
  font-size: 1.85rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.section-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  max-width: 650px;
  margin: 0 auto 2.5rem auto;
  line-height: 1.5;
}
.text-center { text-align: center; }

.points-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.points-calc-card {
  padding: 2rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pc-icon-header {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}
.points-calc-card h3 {
  font-family: var(--font-header);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}
.points-calc-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.important-notice-card {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--accent-warning) !important;
  background: rgba(251, 188, 5, 0.03);
  margin-top: 2rem;
  align-items: flex-start;
}
body.light-mode .important-notice-card {
  background: rgba(251, 188, 5, 0.05);
}
.notice-icon {
  font-size: 1.3rem;
  color: var(--accent-warning);
  margin-top: 0.15rem;
  flex-shrink: 0;
}
.important-notice-card h4 {
  font-family: var(--font-header);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}
.important-notice-card p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Program Milestones Tracker */
.program-milestones-section {
  margin: 3.5rem 0;
}
.milestones-vertical-list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 900px;
  margin: 0 auto;
}
.milestone-status-card {
  overflow: hidden;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}
.milestone-card-banner {
  padding: 1.15rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--card-border);
}
.milestone-card-banner.banner-blue {
  background: rgba(26, 115, 232, 0.08);
}
.milestone-card-banner.banner-purple {
  background: rgba(139, 92, 246, 0.08);
}
.milestone-card-banner.banner-green {
  background: rgba(52, 168, 83, 0.08);
}
.milestone-card-banner.banner-red {
  background: rgba(234, 67, 53, 0.08);
}

.milestone-badge-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-primary);
}
.trophy-gold {
  color: #FBBC05;
  filter: drop-shadow(0 0 4px rgba(251,188,5,0.4));
}

.milestone-status-pill {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--card-border);
  background: rgba(0,0,0,0.2);
  color: var(--text-secondary);
}
.milestone-status-pill.unlocked {
  background: rgba(52, 168, 83, 0.15);
  color: #81C995;
  border-color: rgba(52, 168, 83, 0.4);
}
.milestone-status-pill.progress {
  background: rgba(251, 188, 5, 0.15);
  color: #FDD663;
  border-color: rgba(251, 188, 5, 0.4);
}

.milestone-card-body {
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem;
}
@media (max-width: 768px) {
  .milestone-card-body {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.milestone-checklist h4,
.milestone-points-breakdown h4 {
  font-family: var(--font-header);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.milestone-checklist ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.milestone-checklist li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.milestone-checklist li.met {
  color: var(--text-primary);
  font-weight: 500;
}
.status-x { color: var(--accent-error); }
.status-check { color: var(--accent-success); }
.count-fraction {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgba(0,0,0,0.15);
  margin-left: auto;
}
body.light-mode .count-fraction {
  background: rgba(0,0,0,0.04);
}

.points-bullet-list {
  padding-left: 1.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.points-bullet-list li {
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.points-bullet-list li strong {
  color: var(--accent-theme);
}

.special-game-bonus-card {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(26, 115, 232, 0.03) 100%);
  border-color: rgba(139, 92, 246, 0.2);
  align-items: center;
  border-radius: var(--radius-lg);
}
.bonus-sparkle-icon {
  font-size: 1.75rem;
  color: var(--accent-purple);
  animation: floatOrb2 4s infinite alternate ease-in-out;
}
.special-game-bonus-card h4 {
  font-family: var(--font-header);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
}
.special-game-bonus-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Utility layout helpers */
.margin-top-3 { margin-top: 3rem; }
.width-100 { width: 100%; }

.milestone-link-icon {
  margin-left: 0.5rem;
  color: var(--accent-theme);
  font-size: 0.75rem;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
}
.milestone-link-icon:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* Google Cloud Constellation Network Doodle */
.gcp-network-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.gcp-network-svg {
  width: 100%;
  height: 100%;
}
.network-node {
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.network-node:hover {
  transform: scale(1.4);
}
.pulse-blue {
  animation: pulseNodeBlue 3s infinite ease-in-out;
}
.pulse-red {
  animation: pulseNodeRed 3.2s infinite ease-in-out 0.5s;
}
.pulse-yellow {
  animation: pulseNodeYellow 2.8s infinite ease-in-out 1s;
}
.pulse-green {
  animation: pulseNodeGreen 3.4s infinite ease-in-out 1.5s;
}

@keyframes pulseNodeBlue {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(66, 133, 244, 0.4)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(66, 133, 244, 0.8)); }
}
@keyframes pulseNodeRed {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(234, 67, 53, 0.4)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(234, 67, 53, 0.8)); }
}
@keyframes pulseNodeYellow {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(251, 188, 5, 0.4)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(251, 188, 5, 0.8)); }
}
@keyframes pulseNodeGreen {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(52, 168, 83, 0.4)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(52, 168, 83, 0.8)); }
}

.network-polygon-pulse {
  stroke-dasharray: 600;
  animation: drawBorder 8s linear infinite;
}
@keyframes drawBorder {
  0% { stroke-dashoffset: 600; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -600; }
}

/* ==================== MOBILE RESPONSIVE ==================== */
@media (max-width: 900px) {
  .app-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    justify-content: flex-start;
    border-radius: var(--radius-md);
    padding: 0.4rem;
    scrollbar-width: none;
  }
  .app-nav::-webkit-scrollbar { display: none; }
  .nav-btn .nav-label { display: inline; }
  .nav-btn { padding: 0.65rem 1rem; gap: 0.4rem; }
  .app-header { flex-wrap: wrap; gap: 0.75rem; padding: 1rem 0; }
  .header-controls { gap: 0.5rem; }
}
@media (max-width: 600px) {
  .facilitator-public-grid { grid-template-columns: 1fr; }
  .upgrade-cta-inner { flex-direction: column; align-items: flex-start; }
  .platform-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top-stats { grid-template-columns: 1fr; gap: 1rem; }
  .facilitator-countdown-grid {
    flex-wrap: wrap;
  }
  .input-card {
    gap: 1rem;
    padding: 1.25rem;
  }
  .input-main-row {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .input-sub-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-top: 1rem;
  }
  .countdown-header-layout {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }
  .countdown-dates-info {
    justify-content: center;
  }
  .directory-header-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .directory-sync-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .directory-sync-wrapper button {
    flex: 1;
    justify-content: center;
  }
}

/* ==================== CUSTOM REFINEMENTS & REVISIONS ==================== */

/* 1. Mobile Responsiveness for Profile Analyzer input-card (Stacking at 768px tablet width) */
@media (max-width: 768px) {
  .input-main-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }
  .input-wrapper,
  .glow-btn {
    width: 100% !important;
  }
}

/* 2. Light Theme Header controls hover fix (preventing invisible white-on-white text) */
body.light-mode .sound-toggle-btn:hover {
  color: var(--accent-theme) !important;
}

/* 3. Header Theme Controls bar mobile refinements */
@media (max-width: 480px) {
  .header-controls {
    gap: 0.75rem !important;
    padding: 0.35rem 0.75rem !important;
    margin: 0.5rem auto !important;
    width: max-content !important;
  }
  .theme-selector {
    gap: 0.35rem !important;
  }
  .theme-dot {
    width: 14px !important;
    height: 14px !important;
  }
}

/* Light mode overrides for Chrome Extension Step-by-Step Manual */
body.light-mode .ext-steps-timeline {
  border-left-color: rgba(0, 0, 0, 0.08) !important;
}

body.light-mode .ext-step-badge {
  background: var(--bg-primary) !important;
  border-color: var(--accent-theme) !important;
  color: var(--accent-theme) !important;
  box-shadow: 0 0 8px rgba(var(--accent-theme-rgb), 0.15) !important;
}

body.light-mode .ext-step-detail h4 {
  color: var(--text-primary) !important;
}

body.light-mode .ext-step-detail p {
  color: var(--text-secondary) !important;
}

/* Light mode overrides for Gamified Milestone Roadmap */
body.light-mode .roadmap-progress-bar-bg {
  background: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .roadmap-node .node-dot {
  background: #ffffff !important;
  border-color: #dadce0 !important;
  color: #70757a !important;
  box-shadow: 0 0 0 4px #ffffff, 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

body.light-mode .roadmap-node .node-title {
  color: #5f6368 !important;
}

body.light-mode .roadmap-node .node-desc {
  color: #70757a !important;
}

/* Active states in Light Mode */
body.light-mode .roadmap-node.active .node-dot {
  background: #ffffff !important;
  border-color: var(--accent-theme) !important;
  color: var(--accent-theme) !important;
  box-shadow: 0 0 12px rgba(var(--accent-theme-rgb), 0.25), 0 0 0 4px #ffffff !important;
}

body.light-mode .roadmap-node.active .node-title {
  color: var(--accent-theme) !important;
  text-shadow: none !important;
}

/* Unlocked states (completed/unlocked) in Light Mode */
body.light-mode .roadmap-node.unlocked .node-dot {
  background: #ffffff !important;
  border-color: #137333 !important; /* Green for success */
  color: #137333 !important;
  box-shadow: 0 0 12px rgba(52, 168, 83, 0.25), 0 0 0 4px #ffffff !important;
}

body.light-mode .roadmap-node.unlocked .node-title {
  color: #137333 !important;
  text-shadow: none !important;
}

/* Custom coloring based on Node IDs for premium gamified aesthetics */
body.light-mode #node-start.unlocked .node-dot,
body.light-mode #node-start.active .node-dot {
  background: #ffffff !important;
  border-color: #1a73e8 !important;
  color: #1a73e8 !important;
  box-shadow: 0 0 12px rgba(26, 115, 232, 0.25), 0 0 0 4px #ffffff !important;
}
body.light-mode #node-start.unlocked .node-title,
body.light-mode #node-start.active .node-title {
  color: #1a73e8 !important;
}

body.light-mode #node-1.unlocked .node-dot,
body.light-mode #node-1.active .node-dot {
  background: #ffffff !important;
  border-color: #b06000 !important; /* Bronze */
  color: #b06000 !important;
  box-shadow: 0 0 12px rgba(176, 96, 0, 0.25), 0 0 0 4px #ffffff !important;
}
body.light-mode #node-1.unlocked .node-title,
body.light-mode #node-1.active .node-title {
  color: #b06000 !important;
}

body.light-mode #node-2.unlocked .node-dot,
body.light-mode #node-2.active .node-dot {
  background: #ffffff !important;
  border-color: #5f6368 !important; /* Silver */
  color: #5f6368 !important;
  box-shadow: 0 0 12px rgba(95, 99, 104, 0.25), 0 0 0 4px #ffffff !important;
}
body.light-mode #node-2.unlocked .node-title,
body.light-mode #node-2.active .node-title {
  color: #5f6368 !important;
}

body.light-mode #node-3.unlocked .node-dot,
body.light-mode #node-3.active .node-dot {
  background: #ffffff !important;
  border-color: #b8860b !important; /* Gold */
  color: #b8860b !important;
  box-shadow: 0 0 12px rgba(184, 134, 11, 0.25), 0 0 0 4px #ffffff !important;
}
body.light-mode #node-3.unlocked .node-title,
body.light-mode #node-3.active .node-title {
  color: #b8860b !important;
}

body.light-mode #node-4.unlocked .node-dot,
body.light-mode #node-4.active .node-dot {
  background: #ffffff !important;
  border-color: #007e8a !important; /* Ultimate */
  color: #007e8a !important;
  box-shadow: 0 0 12px rgba(0, 126, 138, 0.25), 0 0 0 4px #ffffff !important;
}
body.light-mode #node-4.unlocked .node-title,
body.light-mode #node-4.active .node-title {
  color: #007e8a !important;
}

/* Light mode overrides for Dynamic Swag Rewards Cabinet */
body.light-mode .swag-tier-card.locked {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  opacity: 0.85 !important;
}

body.light-mode .swag-tier-card.unlocked {
  background: rgba(52, 168, 83, 0.04) !important;
  border-color: rgba(52, 168, 83, 0.2) !important;
}

body.light-mode .swag-tier-card .swag-tier-meta h4 {
  color: var(--text-primary) !important;
}

body.light-mode .swag-tier-card .swag-items-list li {
  color: var(--text-secondary) !important;
}

body.light-mode .swag-tier-card.locked .swag-points-req {
  color: var(--text-secondary) !important;
}

body.light-mode .swag-tier-card.unlocked .swag-points-req {
  color: #137333 !important;
  text-shadow: none !important;
}

body.light-mode .swag-tier-card.locked .swag-tier-badge {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #5f6368 !important;
}

body.light-mode .swag-tier-card.unlocked .swag-tier-badge {
  background: rgba(52, 168, 83, 0.1) !important;
  border-color: rgba(52, 168, 83, 0.25) !important;
  color: #137333 !important;
}

body.light-mode .swag-tier-card.locked .swag-unlock-progress {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #5f6368 !important;
}

body.light-mode .swag-tier-card.unlocked .swag-unlock-progress {
  background: rgba(52, 168, 83, 0.1) !important;
  border-color: rgba(52, 168, 83, 0.25) !important;
  color: #137333 !important;
}

body.light-mode .swag-tier-card.locked .swag-items-list li i {
  color: rgba(0, 0, 0, 0.25) !important;
}

body.light-mode .swag-tier-card.unlocked .swag-items-list li i {
  color: #137333 !important;
  text-shadow: none !important;
}

body.light-mode .swag-tier-card .swag-large-icon {
  color: rgba(0, 0, 0, 0.1) !important;
}

/* Light mode overrides for Roadmap Audit: Missing Cohort Badges */
body.light-mode .missing-summary-badge.has-missing {
  background: rgba(217, 48, 37, 0.08) !important;
  border-color: rgba(217, 48, 37, 0.25) !important;
  color: #c5221f !important;
  box-shadow: 0 2px 6px rgba(217, 48, 37, 0.08) !important;
}

body.light-mode .missing-summary-badge.all-clear {
  background: rgba(52, 168, 83, 0.08) !important;
  border-color: rgba(52, 168, 83, 0.25) !important;
  color: #137333 !important;
  box-shadow: 0 2px 6px rgba(52, 168, 83, 0.08) !important;
}

body.light-mode .missing-category-group {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

body.light-mode .missing-category-title {
  color: var(--text-primary) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

body.light-mode .missing-category-title span {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--text-secondary) !important;
}

body.light-mode .missing-badge-card {
  background: #ffffff !important;
  border-color: #dadce0 !important;
}

body.light-mode .missing-badge-card:hover {
  background: rgba(217, 48, 37, 0.02) !important;
  border-color: rgba(217, 48, 37, 0.3) !important;
}

body.light-mode .missing-badge-title {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

body.light-mode .missing-status-tag {
  color: #c5221f !important;
}

body.light-mode .missing-badge-thumb-container {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
}

/* 4. Desktop sizing for Badge Directory Search box */
.search-box-wrapper {
  max-width: 320px;
  min-width: 220px;
}
@media (max-width: 600px) {
  .search-box-wrapper {
    max-width: 100% !important;
  }
}

/* 5. Chrome Extension features list alignment/beside spacing fix (Inline flow instead of flex wrap columns) */
.ext-features-list li {
  display: block !important;
  position: relative !important;
  padding-left: 1.75rem !important;
  line-height: 1.6 !important;
  margin-bottom: 0.75rem !important;
  text-align: left !important;
}
.ext-features-list li i {
  position: absolute !important;
  left: 0 !important;
  top: 0.25rem !important;
  margin-right: 0 !important;
}

/* 6. Light mode overrides for Official Swag Rewards Showcase (preventing white-on-white text) */
body.light-mode .static-swag-card {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-mode .static-swag-card h4 {
  color: var(--text-primary) !important;
}
body.light-mode .static-swag-items li {
  color: var(--text-secondary) !important;
}

/* 7. Light mode overrides for FAQ Accordion & Alert elements */
body.light-mode .accordion-alert.alert-warning {
  background: rgba(251, 188, 4, 0.08) !important;
  border-color: rgba(251, 188, 4, 0.25) !important;
  color: #8b6508 !important;
}
body.light-mode .accordion-alert.alert-warning i {
  color: #b06000 !important;
}
body.light-mode .accordion-alert.alert-danger {
  background: rgba(234, 67, 53, 0.08) !important;
  border-color: rgba(234, 67, 53, 0.25) !important;
  color: #c5221f !important;
}
body.light-mode .accordion-alert.alert-danger i {
  color: #c5221f !important;
}
body.light-mode .accordion-alert.alert-success {
  background: rgba(52, 168, 83, 0.08) !important;
  border-color: rgba(52, 168, 83, 0.25) !important;
  color: #137333 !important;
}
body.light-mode .accordion-alert.alert-success i {
  color: #137333 !important;
}
body.light-mode .region-pill {
  background: rgba(234, 67, 53, 0.06) !important;
  border-color: rgba(234, 67, 53, 0.18) !important;
  color: var(--accent-error) !important;
}
body.light-mode .disclaimer-banner {
  background: rgba(251, 188, 4, 0.04) !important;
  border: 1px solid rgba(251, 188, 4, 0.2) !important;
  box-shadow: none !important;
}
body.light-mode .disclaimer-text h4 {
  color: #b06000 !important;
}
body.light-mode .disclaimer-icon {
  color: #fbbc04 !important;
  text-shadow: none !important;
}

/* 8. Mobile Navigation Bar responsiveness (sliding active indicator and labels) & Drawer Menu */
@media (max-width: 900px) {
  .app-header {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: none !important;
    align-items: center !important;
    gap: 1rem !important;
  }
  .logo-area {
    grid-area: auto !important;
    grid-row: auto !important;
    grid-column: 1 !important;
    text-align: left !important;
    flex-direction: row !important;
  }
  .mobile-hamburger-btn {
    grid-area: auto !important;
    grid-row: auto !important;
    grid-column: 2 !important;
    display: flex !important;
  }
  .app-nav {
    grid-area: auto !important;
    grid-row: auto !important;
    grid-column: 1 / span 2 !important;
    width: 100% !important;
    order: unset !important;
  }
  .header-controls {
    grid-area: auto !important;
    grid-row: auto !important;
    grid-column: 1 / span 2 !important;
    width: 100% !important;
    order: unset !important;
  }
}

@media (max-width: 680px) {
  .app-nav {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0.25rem !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 30px !important;
  }
  body.light-mode .app-nav {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
  }
  .nav-btn {
    padding: 0px !important;
    height: 38px !important;
    flex: 1 1 0% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    min-width: 0 !important;
  }
  .nav-btn i {
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: var(--transition-smooth) !important;
    font-size: 1.05rem !important;
    color: var(--text-secondary) !important;
  }
  .nav-btn:hover i {
    background: rgba(var(--accent-theme-rgb), 0.08);
    color: var(--text-primary) !important;
  }
  body.light-mode .nav-btn:hover i {
    background: rgba(0, 0, 0, 0.04);
  }
  .nav-btn.active i,
  .nav-btn.active:hover i {
    background: var(--accent-theme) !important;
    color: #fff !important;
    box-shadow: var(--glow-theme) !important;
  }
  .nav-btn .nav-label {
    display: none !important;
  }
}

/* ==================== MOBILE DRAWER & HAMBURGER STYLES ==================== */
.mobile-hamburger-btn {
  display: none;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: var(--transition-smooth);
}

body.light-mode .mobile-hamburger-btn {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

.mobile-hamburger-btn:hover {
  background: rgba(var(--accent-theme-rgb), 0.08);
  border-color: var(--accent-theme);
}

body.light-mode .mobile-hamburger-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.mobile-hamburger-btn .material-icons,
.mobile-drawer-close .material-icons {
  font-size: 22px;
  display: block;
}

/* Drawer Container */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: -300px;
  width: 280px;
  height: 100vh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--card-border);
  box-shadow: -10px 0 30px rgba(0,0,0,0.5);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 1.5rem;
  box-sizing: border-box;
}

.mobile-nav-drawer.open {
  transform: translateX(-300px);
}

body.light-mode .mobile-nav-drawer {
  background: #ffffff;
  border-left-color: #DADCE0;
  box-shadow: -10px 0 20px rgba(0,0,0,0.08);
}

/* Overlay Backdrop */
.mobile-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Header inside drawer */
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

body.light-mode .drawer-header {
  border-bottom-color: #DADCE0;
}

.drawer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.drawer-logo-text {
  display: flex;
  flex-direction: column;
}

.drawer-logo .logo-title {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-theme) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.drawer-logo .logo-subtitle {
  font-size: 0.6rem;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.mobile-drawer-close {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

body.light-mode .mobile-drawer-close {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

.mobile-drawer-close:hover {
  background: rgba(var(--accent-theme-rgb), 0.08);
  color: var(--text-primary);
  border-color: var(--accent-theme);
}

body.light-mode .mobile-drawer-close:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Menu Links inside drawer */
.drawer-menu-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
}

.drawer-nav-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 0.8rem 1.2rem;
  font-family: var(--font-header);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: var(--transition-smooth);
  text-align: left;
  width: 100%;
}

body.light-mode .drawer-nav-btn {
  color: #5f6368;
}

.drawer-nav-btn:hover {
  color: var(--text-primary);
  background: rgba(var(--accent-theme-rgb), 0.08);
}

body.light-mode .drawer-nav-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  color: var(--accent-theme);
}

.drawer-nav-btn.active,
.drawer-nav-btn.active:hover {
  color: #fff !important;
  background: var(--accent-theme) !important;
  font-weight: 600;
  box-shadow: var(--glow-theme) !important;
}

/* 9. Global form controls box-sizing reset to prevent layout overflows and overlaps */
.input-wrapper,
.input-wrapper input,
.search-box-wrapper,
.search-box-wrapper input,
.cohort-dropdown-wrapper,
.cohort-dropdown-wrapper select,
.compare-input-card textarea,
.ref-code-input-wrapper,
.ref-code-input-wrapper input {
  box-sizing: border-box !important;
}

/* ==================== COMMUNITY NOTIFICATIONS ==================== */
.notification-container {
  position: relative;
  display: inline-block;
  z-index: 1005; /* Put dropdown container on top of navigation menus */
}

.notification-bell-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(var(--accent-theme-rgb), 0.08);
  border: 1px solid rgba(var(--accent-theme-rgb), 0.2);
  color: var(--accent-theme);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: var(--transition-smooth, all 0.3s ease);
  flex-shrink: 0;
  position: relative;
}

.notification-bell-btn:hover {
  background: rgba(var(--accent-theme-rgb), 0.15);
  box-shadow: var(--glow-theme, 0 0 10px rgba(var(--accent-theme-rgb), 0.3));
}

body.light-mode .notification-bell-btn {
  background: rgba(26, 115, 232, 0.06);
  border-color: rgba(26, 115, 232, 0.2);
  color: var(--accent-primary);
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--accent-error, #F28B82);
  color: #fff;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 0.65rem;
  font-weight: 700;
  border: 2px solid var(--bg-secondary, #181B20);
  min-width: 14px;
  text-align: center;
  animation: pulse-badge 2.5s infinite;
}

body.light-mode .notification-badge {
  border-color: var(--bg-secondary, #FFFFFF);
  background-color: var(--accent-error, #EA4335);
}

@keyframes pulse-badge {
  0% { box-shadow: 0 0 0 0 rgba(242, 139, 130, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(242, 139, 130, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 139, 130, 0); }
}

.notification-dropdown {
  position: absolute;
  top: 48px;
  right: 0;
  width: 380px;
  max-height: 480px;
  background: #181B20; /* Solid opaque dark background for high readability */
  border: 1px solid var(--card-border, rgba(60, 64, 67, 0.65));
  border-radius: 16px;
  box-shadow: var(--card-shadow, 0 15px 45px rgba(0, 0, 0, 0.6));
  z-index: 9999; /* Ensure dropdown displays in front of all headers and content cards */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

body.light-mode .notification-dropdown {
  background: #FFFFFF; /* Solid white background for light mode */
  border: 1px solid var(--card-border, #DADCE0);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
}

.notification-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.notification-dropdown-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--card-border, rgba(60, 64, 67, 0.65));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.15);
}

.notification-dropdown-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-dropdown-header h3 i {
  color: var(--accent-theme);
}

.mark-read-btn {
  background: rgba(var(--accent-theme-rgb), 0.08);
  border: 1px solid rgba(var(--accent-theme-rgb), 0.25);
  color: var(--accent-theme);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 20px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 6px;
}

.mark-read-btn:hover {
  background: var(--accent-theme);
  color: #fff;
  border-color: var(--accent-theme);
  box-shadow: var(--glow-theme, 0 2px 8px rgba(var(--accent-theme-rgb), 0.3));
  transform: translateY(-1px);
}

.mark-read-btn:active {
  transform: translateY(0);
}

.notification-list {
  overflow-y: auto;
  flex-grow: 1;
  max-height: 360px;
}

/* Custom Scrollbar for Notifications */
.notification-list::-webkit-scrollbar {
  width: 6px;
}
.notification-list::-webkit-scrollbar-track {
  background: transparent;
}
.notification-list::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-theme-rgb), 0.2);
  border-radius: 3px;
}
.notification-list::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-theme-rgb), 0.4);
}

.notification-item {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(var(--accent-theme-rgb), 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: background 0.2s, border-left 0.2s;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
}

.notification-item:hover {
  background: rgba(var(--accent-theme-rgb), 0.04);
}

.notification-item.unread {
  background: rgba(var(--accent-theme-rgb), 0.06);
  border-left-color: var(--accent-theme);
}

.notification-item-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.notification-item-excerpt {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notification-item-time {
  font-size: 0.65rem;
  color: var(--text-dim);
  align-self: flex-end;
}

.notification-loading,
.notification-empty,
.notification-error {
  padding: 30px 20px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.notification-loading i {
  font-size: 1.5rem;
  color: var(--accent-theme);
}

.notification-empty i,
.notification-error i {
  font-size: 1.5rem;
  color: var(--text-dim);
}

.notification-item-content-wrapper {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

.notification-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-theme-rgb), 0.35);
  flex-shrink: 0;
  object-fit: cover;
}

body.light-mode .notification-avatar {
  border-color: rgba(26, 115, 232, 0.3);
}

.notification-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
  min-width: 0;
}

/* Ringing animation on new notifications loading */
.bell-ring {
  animation: ring 1.5s ease;
}

@keyframes ring {
  0% { transform: rotate(0); }
  10% { transform: rotate(15deg); }
  20% { transform: rotate(-15deg); }
  30% { transform: rotate(10deg); }
  40% { transform: rotate(-10deg); }
  50% { transform: rotate(5deg); }
  60% { transform: rotate(-5deg); }
  70% { transform: rotate(0); }
  100% { transform: rotate(0); }
}
@media (max-width: 480px) {
  .notification-dropdown {
    position: fixed;
    top: 60px;
    right: 16px;
    left: 16px;
    width: auto;
    max-width: none;
    z-index: 10005;
  }
}

/* ==================== BADGE DIRECTORY OVERHAUL ==================== */

/* Panes Control */
.dir-pane {
  display: none;
  flex-direction: column !important;
  flex-grow: 1;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  animation: fadeInPane 0.25s ease-out;
}
.dir-pane.active {
  display: flex !important;
  flex-direction: column !important;
}

@keyframes fadeInPane {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sub-Tab Bar wrapping cleanly */
.directory-sub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.dir-tab-btn {
  flex: 1 1 auto;
  min-width: 120px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
  padding: 0.65rem 1rem;
  border-radius: 8px;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: var(--transition-smooth);
}

.dir-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.dir-tab-btn.active {
  background: rgba(66, 133, 244, 0.15);
  border-color: rgba(66, 133, 244, 0.4);
  color: #8ab4f8; /* Google Blue active in dark theme */
}

/* Light mode overrides for sub-tabs */
body.light-mode .dir-tab-btn {
  background: rgba(0, 0, 0, 0.02);
  border-color: #dadce0;
  color: #5f6368;
}

body.light-mode .dir-tab-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1a73e8; /* Google Blue hover in light theme */
}

body.light-mode .dir-tab-btn.active {
  background: rgba(26, 115, 232, 0.08);
  border-color: rgba(26, 115, 232, 0.3);
  color: #1a73e8; /* Google Blue active in light theme */
}

@media (max-width: 768px) {
  .dir-tab-btn {
    flex: 1 1 calc(50% - 0.25rem) !important;
  }
}

/* 2 columns layout for Simulator and Active Games Grids */
.directory-scroll-grid, .games-scroll-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

@media (max-width: 600px) {
  .directory-scroll-grid, .games-scroll-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Fixed-Width Tables for Skill Badge Catalog and Lab-Free Courses */
.catalog-scroll-container, .courses-scroll-container {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden !important;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: rgba(0, 0, 0, 0.15);
  max-height: 600px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.light-mode .catalog-scroll-container, 
body.light-mode .courses-scroll-container {
  background: rgba(255, 255, 255, 0.8);
  border-color: #dadce0;
}

.catalog-scroll-container table, .courses-scroll-container table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.catalog-scroll-container th, .courses-scroll-container th,
.catalog-scroll-container td, .courses-scroll-container td {
  padding: 0.75rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
  vertical-align: middle;
  box-sizing: border-box;
}

.catalog-scroll-container th, .courses-scroll-container th {
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-primary);
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 0.85rem;
}

body.light-mode .catalog-scroll-container th,
body.light-mode .courses-scroll-container th {
  background: rgba(0, 0, 0, 0.04);
}

/* Custom Scrollbar for tables */
.catalog-scroll-container::-webkit-scrollbar,
.courses-scroll-container::-webkit-scrollbar {
  width: 6px;
}
.catalog-scroll-container::-webkit-scrollbar-track,
.courses-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}
.catalog-scroll-container::-webkit-scrollbar-thumb,
.courses-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-primary-rgb, 66, 133, 244), 0.25);
  border-radius: 3px;
}

/* Table Column Width configurations */
.col-sim { width: 50px; text-align: center; }
.col-sno { width: 60px; }
.col-badge { width: 60px; }
.col-title { width: auto; }
.col-labs-level { width: 130px; }
.col-difficulty { width: 220px; }

/* Checklist table checkboxes styling */
.sim-table-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--text-dim);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: var(--transition-smooth);
}
.sim-table-checkbox i {
  font-size: 0.7rem;
  color: transparent;
}
.sim-table-row.checked .sim-table-checkbox {
  border-color: var(--accent-cyan);
  background: var(--accent-cyan);
}
.sim-table-row.checked .sim-table-checkbox i {
  color: #030303;
}
body.light-mode .sim-table-row.checked .sim-table-checkbox {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
}
body.light-mode .sim-table-row.checked .sim-table-checkbox i {
  color: #fff;
}

.sim-table-row {
  transition: background-color 0.2s;
  cursor: pointer;
}
.sim-table-row:hover {
  background: rgba(255, 255, 255, 0.02);
}
body.light-mode .sim-table-row:hover {
  background: rgba(0, 0, 0, 0.01);
}

.sim-table-row.checked {
  background: rgba(16, 185, 129, 0.04);
}
body.light-mode .sim-table-row.checked {
  background: rgba(52, 168, 83, 0.04);
}

/* Badge images inside tables */
.table-badge-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: contain;
  display: block;
  transition: transform 0.2s;
}
.sim-table-row:hover .table-badge-img {
  transform: scale(1.1);
}

/* Table Link wrapping styling */
.col-title a {
  display: inline-block;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
  font-size: 0.85rem;
}
.col-title a:hover {
  color: var(--accent-cyan);
  text-decoration: underline;
}
body.light-mode .col-title a:hover {
  color: var(--accent-primary);
}

@media (max-width: 1024px) {
  .col-difficulty {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .col-badge, .table-badge-cell {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .col-sno {
    width: 35px !important;
  }
  .col-sim {
    width: 40px !important;
  }
  .col-labs-level {
    width: 70px !important;
  }
}

/* Roadmap Syllabus Styling */
.syllabus-scroll-container {
  flex-grow: 1;
  overflow-y: hidden; /* No vertical scroll for the outer grid container */
  padding-right: 0.25rem;
}

.syllabus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch; /* Stretch columns to the same height */
}

@media (max-width: 1024px) {
  .syllabus-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .syllabus-grid {
    grid-template-columns: 1fr;
  }
}

.syllabus-column {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 600px; /* Exact same height for all columns so they align at the bottom */
}

.syllabus-col-header {
  padding: 0.85rem 1rem;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.05rem; /* Increased headline font size for better visual hierarchy */
  color: #fff;
  display: flex;
  align-items: center;
  line-height: 1.35;
  min-height: 80px; /* Ensure all headers align dynamically regardless of line wrapping */
  box-sizing: border-box;
}

/* Google colors for tiers */
.syllabus-column.tier-beginner .syllabus-col-header { background: #4285F4; }
.syllabus-column.tier-intermediate .syllabus-col-header { background: #34A853; }
.syllabus-column.tier-advanced .syllabus-col-header { background: #FBBC04; color: #202124; }

.syllabus-badge-count {
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-weight: 600;
}
.syllabus-column.tier-advanced .syllabus-badge-count {
  background: rgba(0, 0, 0, 0.08);
}

.syllabus-items-list {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto; /* Internal scrolling on items only */
  flex-grow: 1;
  overscroll-behavior-y: auto; /* Propagates scroll to outer page when bounds are reached */
}

/* Color-coded scrollbars matching Google accent colors for each tier */
.tier-beginner .syllabus-items-list::-webkit-scrollbar {
  width: 6px;
}
.tier-beginner .syllabus-items-list::-webkit-scrollbar-track {
  background: transparent;
}
.tier-beginner .syllabus-items-list::-webkit-scrollbar-thumb {
  background: rgba(66, 133, 244, 0.25);
  border-radius: 3px;
}

.tier-intermediate .syllabus-items-list::-webkit-scrollbar {
  width: 6px;
}
.tier-intermediate .syllabus-items-list::-webkit-scrollbar-track {
  background: transparent;
}
.tier-intermediate .syllabus-items-list::-webkit-scrollbar-thumb {
  background: rgba(52, 168, 83, 0.25);
  border-radius: 3px;
}

.tier-advanced .syllabus-items-list::-webkit-scrollbar {
  width: 6px;
}
.tier-advanced .syllabus-items-list::-webkit-scrollbar-track {
  background: transparent;
}
.tier-advanced .syllabus-items-list::-webkit-scrollbar-thumb {
  background: rgba(251, 188, 5, 0.25);
  border-radius: 3px;
}

.syllabus-item-card {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.syllabus-item-card:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.syllabus-item-card.checked {
  background: rgba(16, 185, 129, 0.04);
  border-color: rgba(16, 185, 129, 0.2);
}
body.light-mode .syllabus-item-card.checked {
  background: rgba(52, 168, 83, 0.04);
  border-color: rgba(52, 168, 83, 0.2);
}

.syllabus-item-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: transparent;
  flex-shrink: 0;
}

.syllabus-item-card.checked .syllabus-item-checkbox {
  border-color: var(--accent-cyan);
  background: var(--accent-cyan);
  color: #030303;
}
body.light-mode .syllabus-item-card.checked .syllabus-item-checkbox {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: #fff;
}

.syllabus-item-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}

.syllabus-item-details {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex-grow: 1;
}

.syllabus-item-title {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}

.syllabus-item-link-text {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  line-height: 1.3;
  transition: var(--transition-smooth);
}
.syllabus-item-link-text:hover {
  color: var(--accent-cyan);
  text-decoration: underline;
}
body.light-mode .syllabus-item-link-text:hover {
  color: var(--accent-primary);
}

.syllabus-item-link-icon {
  font-size: 0.65rem;
  color: var(--text-dim);
  opacity: 0.6;
  margin-left: 0.25rem;
  transition: opacity 0.2s;
}
.syllabus-item-title:hover .syllabus-item-link-icon {
  opacity: 1;
  color: var(--accent-cyan);
}

.syllabus-item-meta {
  font-size: 0.65rem;
  color: var(--text-secondary);
}

/* Active Arcade Games Styling */
.games-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.3rem;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  margin-bottom: 1.25rem;
}

body.light-mode .games-filter-bar {
  background: rgba(0, 0, 0, 0.02);
}

.games-filter-btn {
  flex-grow: 1;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-family: var(--font-header);
  font-weight: 500;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: var(--transition-smooth);
}

.games-filter-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.02);
}
body.light-mode .games-filter-btn:hover {
  color: var(--accent-primary);
  background: rgba(0, 0, 0, 0.04);
}

.games-filter-btn.active {
  background: rgba(66, 133, 244, 0.12);
  border: 1px solid rgba(66, 133, 244, 0.25);
  color: #8ab4f8;
  font-weight: 600;
}

body.light-mode .games-filter-btn.active {
  background: rgba(26, 115, 232, 0.08);
  border-color: rgba(26, 115, 232, 0.25);
  color: #1a73e8;
}

.games-count-badge {
  font-size: 0.65rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 10px;
  color: var(--text-secondary);
}
.games-filter-btn.active .games-count-badge {
  background: rgba(66, 133, 244, 0.2);
  color: inherit;
}
body.light-mode .games-filter-btn.active .games-count-badge {
  background: rgba(26, 115, 232, 0.15);
}

.games-scroll-grid {
  flex-grow: 1;
  overflow-y: auto;
  max-height: 600px;
  display: grid;
  gap: 1rem;
  padding-right: 0.5rem;
}

.games-scroll-grid::-webkit-scrollbar {
  width: 6px;
}
.games-scroll-grid::-webkit-scrollbar-track {
  background: transparent;
}
.games-scroll-grid::-webkit-scrollbar-thumb {
  background: rgba(66, 133, 244, 0.25);
  border-radius: 3px;
}

.games-category-section {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.games-category-header {
  font-family: var(--font-header);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(var(--accent-primary-rgb, 66, 133, 244), 0.15);
}

.games-category-header i {
  color: var(--accent-cyan);
}
body.light-mode .games-category-header i {
  color: var(--accent-primary);
}

.games-category-grid {
  display: grid;
  gap: 1rem;
}

/* Premium Game Card layout */
.game-card {
  position: relative;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: var(--transition-smooth);
}

.game-card:hover {
  background: rgba(66, 133, 244, 0.02);
  border-color: rgba(66, 133, 244, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.game-badge-img-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.game-badge-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.game-details {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-grow: 1;
  min-width: 0;
}

.game-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  text-decoration: none;
}
.game-title:hover {
  color: var(--accent-cyan);
}
body.light-mode .game-title:hover {
  color: var(--accent-primary);
}

.game-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.game-tag-pill {
  font-size: 0.62rem;
  font-family: var(--font-header);
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
}
.game-tag-points {
  background: rgba(52, 168, 83, 0.08);
  border: 1px solid rgba(52, 168, 83, 0.2);
  color: #81c995;
}
body.light-mode .game-tag-points {
  color: #137333;
  background: rgba(52, 168, 83, 0.06);
}

.game-tag-status {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
}

/* Code Capsule for code copies */
.game-code-capsule {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  align-self: flex-start;
  margin-top: 0.15rem;
  max-width: 100%;
  box-sizing: border-box;
}

body.light-mode .game-code-capsule {
  background: rgba(0, 0, 0, 0.04);
}

.game-code-text {
  font-family: monospace;
  font-size: 0.72rem;
  color: var(--text-primary);
  margin-right: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-code-copy-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 2px;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-code-copy-btn:hover {
  color: var(--text-primary);
}

/* Gap adjustments & serial number styling */
#tab-directory .hero-section {
  margin-bottom: 2rem;
}

.syllabus-sno-label {
  font-weight: 700;
  margin-right: 0.25rem;
}

.tier-beginner .syllabus-sno-label {
  color: #4285F4;
}

.tier-intermediate .syllabus-sno-label {
  color: #34A853;
}

.tier-advanced .syllabus-sno-label {
  color: #fbbc05;
}

.game-sno-label {
  font-weight: 700;
  color: var(--accent-theme);
  margin-right: 0.25rem;
}

/* Mobile view responsiveness enhancements */
@media (max-width: 768px) {
  /* Let the container expand naturally so all badges are fully visible */
  .directory-container {
    height: auto !important;
    padding: 1rem !important;
  }

  /* Make tab panes expand vertically without inner scrolls */
  .dir-pane, .dir-pane.active {
    height: auto !important;
    min-height: 0 !important;
  }

  .directory-scroll-grid, .games-scroll-grid {
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .catalog-scroll-container, .courses-scroll-container {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important; /* Allow table horizontal scrolling if needed */
  }

  .syllabus-scroll-container {
    height: auto !important;
    overflow-y: visible !important;
  }

  .syllabus-column {
    height: auto !important;
  }

  .syllabus-items-list {
    overflow-y: visible !important;
    max-height: none !important;
  }

  /* Compact sub-tab buttons */
  .dir-tab-btn {
    flex: 1 1 calc(50% - 0.25rem) !important;
    font-size: 0.8rem !important;
    padding: 0.5rem 0.75rem !important;
    min-width: 0 !important;
  }
}

@media (max-width: 600px) {
  .directory-header-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem !important;
  }

  .directory-sync-wrapper {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem !important;
  }

  .sync-btn, .reset-btn {
    width: 100% !important;
    justify-content: center;
    padding: 0.65rem 1rem !important;
  }

  .dir-filter-btn {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.75rem !important;
  }
}

/* =========================================================================
   ADDITIONS: LEGAL PAGES & FOOTER DISCLAIMER STYLES
   ========================================================================= */

.footer-disclaimer {
  max-width: 960px;
  margin: 0 auto 1.5rem auto;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-dim);
  text-align: center;
  padding: 0 1.5rem;
}

body.light-mode .footer-disclaimer {
  color: #70757a;
}

.footer-disclaimer a {
  color: var(--accent-cyan);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dashed rgba(var(--accent-cyan-rgb), 0.3);
  transition: var(--transition-swift);
}

.footer-disclaimer a:hover {
  color: var(--accent-purple);
  border-bottom-color: rgba(var(--accent-purple-rgb), 0.8);
  text-shadow: 0 0 10px rgba(var(--accent-purple-rgb), 0.3);
}

/* Legal Page Layout Specifics */
.legal-content-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.legal-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.light-mode .legal-section {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.legal-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.legal-section h2 {
  font-family: var(--font-header);
  font-size: 1.15rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.25rem 0;
}

body.light-mode .legal-section h2 {
  color: #202124;
}

.legal-section p, .legal-section li {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

.legal-section ul {
  list-style-type: none;
  padding-left: 1.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.legal-section li {
  position: relative;
}

.legal-section li::before {
  content: "•";
  color: var(--accent-cyan);
  position: absolute;
  left: -1rem;
  font-weight: bold;
}

/* =========================================================================
   ADDITIONS: COMPREHENSIVE MOBILE RESPONSIVENESS REFACTOR
   ========================================================================= */

/* --- 1. Global Layout & Box Protection --- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.app-container {
  max-width: 100% !important;
  overflow-x: hidden !important;
  padding: 0 1rem !important;
}

/* --- 2. Header & Navigation Overrides (<= 768px) --- */
@media (max-width: 768px) {
  .app-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 0 !important;
    gap: 0.75rem !important;
  }

  .logo-area {
    order: 1 !important;
    flex: 1 1 auto !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
  }

  .mobile-hamburger-btn {
    order: 2 !important;
    display: flex !important;
  }

  /* Completely hide the main desktop nav on mobile/tablet to avoid header clutter */
  #app-nav, .app-nav {
    display: none !important;
  }

  .header-controls {
    order: 3 !important;
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: center !important;
    margin-top: 0.25rem !important;
    padding: 0.5rem 1rem !important;
  }
}

/* --- 3. Theme dots grid layout (<= 480px) --- */
@media (max-width: 480px) {
  .header-controls {
    gap: 0.75rem !important;
    padding: 0.4rem 0.75rem !important;
  }
  
  .theme-selector {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.35rem !important;
  }
  
  .theme-dot {
    width: 13px !important;
    height: 13px !important;
  }

  .logo-title {
    font-size: 1rem !important;
  }
  
  .logo-subtitle {
    font-size: 0.65rem !important;
  }
}

/* --- 4. Calculator Tab Stack Overrides (<= 600px) --- */
@media (max-width: 600px) {
  .input-main-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  
  .input-sub-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  
  .input-wrapper {
    width: 100% !important;
  }
  
  .input-wrapper input {
    padding: 0.85rem 1rem 0.85rem 2.75rem !important;
    font-size: 0.9rem !important;
  }
  
  .input-icon {
    left: 1rem !important;
    font-size: 1rem !important;
  }
  
  .input-card .glow-btn {
    width: 100% !important;
    padding: 0.85rem 1.5rem !important;
    font-size: 0.95rem !important;
    justify-content: center !important;
  }

  .cohort-dropdown-wrapper,
  .remember-me-wrapper {
    width: 100% !important;
  }

  .remember-me-wrapper {
    justify-content: center !important;
    padding-top: 0.25rem !important;
  }
}

/* --- 5. Directory Tab Table Scrolling & Header Stack (<= 768px) --- */
@media (max-width: 768px) {
  .directory-header-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .directory-sync-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    margin-left: 0 !important;
  }

  .directory-sync-wrapper button {
    flex: 1 !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    padding: 0.65rem 0.75rem !important;
  }

  .search-box-wrapper {
    width: 100% !important;
  }

  .search-box-wrapper input {
    width: 100% !important;
  }

  /* Make tables scrollable horizontally inside card wrappers instead of clipping or breaking pages */
  .catalog-scroll-container,
  .courses-scroll-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .catalog-scroll-container table,
  .courses-scroll-container table {
    width: 100% !important;
    table-layout: auto !important;
    min-width: 720px !important; /* Forces horizontal scrolling inside card, safeguarding readability */
  }
}

/* --- 6. Team Compare Stack & Table Scroll (<= 768px) --- */
@media (max-width: 768px) {
  .compare-input-card {
    padding: 1.25rem !important;
    margin-bottom: 2rem !important;
  }

  .compare-input-card textarea {
    padding: 0.75rem !important;
    font-size: 0.85rem !important;
  }

  .leaderboard-header {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1rem !important;
    padding: 1.5rem !important;
  }

  .leader-avatar-container {
    margin: 0 auto !important;
  }

  .leader-meta {
    align-items: center !important;
  }

  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .table-container table {
    width: 100% !important;
    table-layout: auto !important;
    min-width: 600px !important; /* Enable comparison matrix scrolling */
  }
}

/* --- 7. Facilitator Hub Referral & Share Stack (<= 550px) --- */
@media (max-width: 550px) {
  .ref-code-input-wrapper {
    flex-direction: column !important;
    gap: 0.5rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .ref-code-input-wrapper input {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 8px !important;
    padding: 0.85rem !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .ref-copy-btn {
    width: 100% !important;
    height: 44px !important;
    border-radius: 8px !important;
    background: var(--accent-theme) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .share-template-box {
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
    margin-top: 0.75rem !important;
  }

  .share-template-box .share-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* --- 8. Navigation Drawer Width Optimization (<= 360px) --- */
@media (max-width: 360px) {
  .mobile-nav-drawer {
    width: 100% !important;
    right: -100% !important;
  }
  
  .mobile-nav-drawer.open {
    transform: translateX(-100%) !important;
  }
}

/* --- 9. Footer Statistics & Facilitator Hub Responsive Overrides --- */
@media (max-width: 1024px) {
  .stat-count-val {
    font-size: 1.8rem !important;
  }
}

@media (max-width: 768px) {
  .app-footer-upgraded {
    padding: 3rem 1.5rem 2rem 1.5rem !important;
    gap: 2rem;
  }
  .stat-count-val {
    font-size: 1.4rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Facilitator Hub Grids Stacking */
  .facilitator-promo-grid,
  .dates-ref-row,
  .social-row,
  .points-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .facilitator-promo-card,
  .points-calc-card,
  .milestone-status-card {
    padding: 1.5rem !important;
  }

  /* Guides Tab Mobilization */
  .guides-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .guide-card {
    padding: 1.5rem !important;
  }
}

@media (max-width: 550px) {
  .milestone-card-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.60rem !important;
    padding: 1rem 1.25rem !important;
  }
}

@media (max-width: 480px) {
  .app-footer-upgraded {
    padding: 2.5rem 1rem 2rem 1rem !important;
  }
  .stat-counter-box {
    padding: 1.25rem 1rem !important;
  }
  .stat-count-val {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  .stat-count-lbl {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
  }

  /* Facilitator Hub Mobile Optimizations */
  .facilitator-promo-card,
  .points-calc-card,
  .milestone-status-card,
  .milestone-card-body {
    padding: 1.25rem 1rem !important;
  }

  .fac-countdown-unit {
    padding: 0.5rem 0.25rem !important;
  }
  .fac-timer-val {
    font-size: 1.35rem !important;
  }
  .fac-timer-lbl {
    font-size: 0.60rem !important;
  }

  .timeline-date-item {
    gap: 0.75rem !important;
  }
  .tl-icon-wrapper {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.8rem !important;
  }
  .tl-content strong {
    font-size: 0.85rem !important;
  }
  .tl-content span {
    font-size: 0.75rem !important;
  }

  .important-notice-card {
    flex-direction: column !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
  }

  .platform-stats-grid {
    grid-template-columns: 1fr !important;
  }

  .upgrade-cta-inner {
    padding: 1.5rem 1rem !important;
    gap: 1.25rem !important;
  }
  .upgrade-feature-chips {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.4rem !important;
  }
  .upgrade-chip {
    font-size: 0.8rem !important;
  }
  .upgrade-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.25rem !important;
  }

  /* Guides Tab Mobile Overrides */
  .guide-card {
    padding: 1.25rem !important;
  }
}

@media (max-width: 360px) {
  .stat-count-val {
    font-size: 1.05rem !important;
  }
  .fac-timer-val {
    font-size: 1.15rem !important;
  }
}

/* =========================================================================
   FACILITATOR PROMO & REFERRAL STYLING
   ========================================================================= */
.facilitator-promo-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  margin-top: 1rem;
}

.promo-card {
  display: flex;
  padding: 1.5rem;
  border-radius: 16px;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

.promo-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-theme);
  box-shadow: var(--neon-glow-cyan);
}

.enrol-promo-card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.promo-card-content {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  flex-grow: 1;
}

.promo-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(26, 115, 232, 0.1);
  border: 1px solid rgba(26, 115, 232, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--accent-theme);
  flex-shrink: 0;
}

.promo-text-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.promo-text-details h3 {
  font-family: var(--font-header);
  font-size: 1.15rem;
  margin: 0;
  font-weight: 700;
  color: var(--text-primary);
}

.promo-text-details p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.promo-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.promo-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.3rem 0.65rem;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--accent-theme);
}

.enrol-now-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: #1a73e8;
  border-radius: 8px;
  text-decoration: none;
  transition: var(--transition-swift);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(26, 115, 232, 0.2);
}

.enrol-now-btn:hover {
  background: #1557b0;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

/* Referral Card Specifically */
.referral-code-card {
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
}

.referral-header h3 {
  font-family: var(--font-header);
  font-size: 1.1rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
}

.referral-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.referral-input-wrapper {
  display: flex;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  overflow: hidden;
  transition: var(--transition-swift);
}

.referral-input-wrapper:focus-within {
  border-color: var(--accent-theme);
  box-shadow: 0 0 0 1px var(--accent-theme);
}

.referral-input-wrapper input {
  flex-grow: 1;
  background: transparent;
  border: none;
  padding: 0.65rem 0.85rem;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  outline: none;
  letter-spacing: 0.5px;
}

.copy-icon-btn {
  background: #1a73e8;
  border: none;
  color: #fff;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-swift);
}

.copy-icon-btn:hover {
  background: #1557b0;
}

.share-template-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.share-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

.whatsapp-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: #25D366;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-swift);
  width: 100%;
}

.whatsapp-share-btn:hover {
  background: #128C7E;
  transform: translateY(-1px);
}

/* Responsive Overrides */
@media (max-width: 992px) {
  .facilitator-promo-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .enrol-promo-card {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }
  .enrol-now-btn {
    width: 100%;
  }
}

/* =========================================================================
   GLOBAL LEADERBOARD STYLING
   ========================================================================= */
.leaderboard-podium-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.5rem;
  margin: 2rem 0 3rem 0;
  padding: 2.5rem 1.5rem 1.5rem 1.5rem;
  min-height: 220px;
  overflow: visible;
}

.podium-loading {
  font-family: var(--font-header);
  color: var(--text-secondary);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.podium-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  border-radius: 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  width: 180px;
  position: relative;
  transition: var(--transition-smooth);
  overflow: visible !important;
}

/* Disable the sliding sheen overlay since podium cards require overflow: visible for the crown/medals */
.podium-card::before {
  display: none !important;
}

.podium-card:hover {
  transform: translateY(-5px);
}

/* 1st, 2nd, 3rd specific styles */
.podium-card.rank-1 {
  order: 2;
  height: 240px;
  border-color: rgba(255, 202, 40, 0.4);
  box-shadow: 0 0 25px rgba(255, 202, 40, 0.15);
}
.podium-card.rank-2 {
  order: 1;
  height: 210px;
  border-color: rgba(192, 192, 192, 0.3);
  box-shadow: 0 0 20px rgba(192, 192, 192, 0.08);
}
.podium-card.rank-3 {
  order: 3;
  height: 190px;
  border-color: rgba(205, 127, 50, 0.3);
  box-shadow: 0 0 15px rgba(205, 127, 50, 0.05);
}

.podium-badge-icon {
  position: absolute;
  top: -18px;
  font-size: 2rem;
  z-index: 2;
}
.rank-1 .podium-badge-icon { color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
.rank-2 .podium-badge-icon { color: #c0c0c0; }
.rank-3 .podium-badge-icon { color: #cd7f32; }

.podium-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--card-border);
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}
.rank-1 .podium-avatar { border-color: #ffd700; }
.rank-2 .podium-avatar { border-color: #c0c0c0; }
.rank-3 .podium-avatar { border-color: #cd7f32; }

.podium-name {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  margin-bottom: 0.25rem;
  flex-shrink: 0;
}

.podium-points {
  font-family: var(--font-header);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-theme);
  flex-shrink: 0;
}
.rank-1 .podium-points { color: var(--accent-yellow); }

.podium-badges-count {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  flex-shrink: 0;
}

/* Controls & Stats Row */
.leaderboard-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2rem;
  margin-bottom: 1.5rem;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.leaderboard-stats-summary {
  display: flex;
  gap: 2.5rem;
}

.l-stat-item {
  display: flex;
  flex-direction: column;
}

.l-stat-val {
  font-family: var(--font-header);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
}

.l-stat-lbl {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.leaderboard-search-wrapper {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  width: 320px;
  max-width: 100%;
  transition: var(--transition-swift);
}

.leaderboard-search-wrapper:focus-within {
  border-color: var(--accent-theme);
}

.leaderboard-search-icon {
  color: var(--text-dim);
  margin-right: 0.75rem;
  position: static !important;
  transform: none !important;
}

.leaderboard-search-wrapper input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  outline: none;
  font-size: 0.9rem;
  width: 100%;
}

.leaderboard-table-card {
  padding: 0;
  overflow: hidden;
}

/* Leaderboard Row styling */
.leaderboard-row-highlight-1 { background: rgba(255, 215, 0, 0.03); }
.leaderboard-row-highlight-2 { background: rgba(192, 192, 192, 0.02); }
.leaderboard-row-highlight-3 { background: rgba(205, 127, 50, 0.01); }

.leaderboard-rank-cell {
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rank-medal-1 { color: #ffd700; }
.rank-medal-2 { color: #c0c0c0; }
.rank-medal-3 { color: #cd7f32; }

.leaderboard-player-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.leaderboard-player-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--card-border);
}

.leaderboard-player-name {
  font-weight: 600;
  color: var(--text-primary);
}

/* Responsive Podium */
@media (max-width: 768px) {
  .leaderboard-podium-container {
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }
  .podium-card {
    width: 100%;
    max-width: 280px;
    height: auto !important;
  }
  .podium-card.rank-1 { order: 1; }
  .podium-card.rank-2 { order: 2; }
  .podium-card.rank-3 { order: 3; }
  .leaderboard-controls-row {
    flex-direction: column;
    align-items: stretch;
  }
  .leaderboard-stats-summary {
    justify-content: space-between;
    gap: 1rem;
  }
  .leaderboard-search-wrapper {
    width: 100%;
  }
}

/* Fix tablet / iPad Air responsive navigation mismatch */
@media (max-width: 1024px) {
  .app-nav {
    display: none !important;
  }
  .mobile-hamburger-btn {
    display: flex !important;
  }
}

/* =========================================================================
   SEO ARTICLE & RESOURCE GUIDES STYLES
   ========================================================================= */
.seo-article-section {
  margin: 3rem auto;
  padding: 2.5rem;
  max-width: 1200px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.seo-article-header {
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 1.5rem;
  text-align: left;
}

.seo-article-header h2 {
  font-family: var(--font-header);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.seo-article-header h2 i {
  color: var(--accent-cyan);
}

.seo-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
}

.seo-article-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  text-align: left;
}

.seo-article-column h3 {
  font-family: var(--font-header);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--accent-cyan);
  margin: 1.5rem 0 0.75rem 0;
}

.seo-article-column h3:first-of-type {
  margin-top: 0;
}

.seo-article-column p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.seo-article-column strong {
  color: var(--text-primary);
}

.seo-article-column ul,
.seo-article-column ol {
  margin-bottom: 1.5rem;
  padding-left: 1.25rem;
}

.seo-article-column li {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.seo-milestones-list li strong {
  color: var(--accent-cyan);
}

.seo-steps-list li a {
  color: var(--accent-cyan);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dashed var(--accent-cyan);
  transition: all 0.2s ease;
}

.seo-steps-list li a:hover {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

@media (max-width: 968px) {
  .seo-article-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Premium Responsiveness for Large/Medium Screens (Navigation and Header Layout) */
@media (max-width: 1400px) and (min-width: 901px) {
  .app-header {
    flex-wrap: wrap;
    row-gap: 1.25rem;
    column-gap: 1rem;
    padding: 1.5rem 0;
  }
  
  .logo-area {
    flex: 0 0 auto;
  }
  
  .header-controls {
    flex: 0 0 auto;
    margin-left: auto;
  }
  
  .app-nav {
    order: 3;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    box-sizing: border-box;
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .nav-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    gap: 0.35rem;
  }
  .app-nav {
    gap: 0.35rem;
  }
}

/* Theme Selector Wrapper & Hint Text */
.theme-selector-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}

.theme-hint-text {
  font-size: 0.52rem;
  font-family: var(--font-header);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  background: linear-gradient(135deg, #a855f7, #6366f1, #00e5a8, #a855f7);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: auroraText 6s linear infinite, glowPulse 3s ease-in-out infinite alternate;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.theme-selector-wrapper:hover .theme-hint-text {
  opacity: 1;
}

@keyframes auroraText {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes glowPulse {
  0% {
    filter: drop-shadow(0 0 1px rgba(99, 102, 241, 0.3));
  }
  100% {
    filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.65));
  }
}

/* ==================== CATALOG TAB STYLES ==================== */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.catalog-badge-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.3s ease, 
              box-shadow 0.3s ease;
  min-height: 350px;
  justify-content: space-between;
}

.catalog-badge-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 229, 255, 0.35) !important;
  box-shadow: 0 10px 30px rgba(0, 229, 255, 0.08);
}

.catalog-badge-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(0, 229, 255, 0.03), transparent 70%);
  pointer-events: none;
}

.catalog-badge-img-wrapper {
  position: relative;
  width: 140px;
  height: 140px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.catalog-badge-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.catalog-badge-card:hover .catalog-badge-img {
  transform: scale(1.06);
}

.catalog-badge-title {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: 0.75rem;
  color: #ffffff !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.8rem;
}

.catalog-badge-code-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-header);
  font-size: 0.75rem;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  transition: all 0.25s ease;
}

.catalog-badge-code-box:hover {
  background: rgba(0, 229, 255, 0.06);
  border-color: rgba(0, 229, 255, 0.25);
  color: var(--accent-cyan);
}

.catalog-badge-code-box span {
  font-weight: 700;
  color: #00e5ff;
}

.catalog-badge-pts {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.catalog-start-btn {
  background: #ff4b91 !important;
  color: #000000 !important;
  border: none;
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 0.85rem;
  padding: 0.5rem 1.75rem;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 0.75rem;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 0 #b32b5e;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.catalog-start-btn:hover {
  background: #ff609f !important;
}

.catalog-start-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #b32b5e;
}

.catalog-badge-pill {
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-top: auto;
  border: 1px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.catalog-badge-pill.pill-skills {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

.catalog-badge-pill.pill-games {
  background: rgba(0, 229, 255, 0.08);
  border-color: rgba(0, 229, 255, 0.2);
  color: #8af7ff;
}

.catalog-badge-pill.pill-gear {
  background: rgba(255, 153, 0, 0.08);
  border-color: rgba(255, 153, 0, 0.2);
  color: #ffb84d;
}

.catalog-filter-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.catalog-filter-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

.catalog-filter-btn.active-filter {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 229, 255, 0.2);
}

/* ==================== LIGHT THEME OVERRIDES ==================== */
body.light-mode .catalog-badge-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.light-mode .catalog-badge-card:hover {
  border-color: rgba(0, 229, 255, 0.5) !important;
  box-shadow: 0 10px 30px rgba(0, 229, 255, 0.1);
}

body.light-mode .catalog-badge-title {
  color: #1a1a1a !important;
}

body.light-mode .catalog-badge-code-box {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
  color: #202124;
}

body.light-mode .catalog-badge-code-box:hover {
  background: rgba(0, 229, 255, 0.05);
  border-color: rgba(0, 229, 255, 0.3);
  color: #007b8b;
}

body.light-mode .catalog-badge-code-box span {
  color: #1a73e8;
}

body.light-mode .catalog-badge-pts {
  color: #3c4043;
}

body.light-mode .catalog-badge-img-wrapper {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .catalog-badge-pill.pill-skills {
  background: rgba(79, 70, 229, 0.08);
  border-color: rgba(79, 70, 229, 0.2);
  color: #4f46e5;
}

body.light-mode .catalog-badge-pill.pill-games {
  background: rgba(8, 145, 178, 0.08);
  border-color: rgba(8, 145, 178, 0.2);
  color: #0891b2;
}

body.light-mode .catalog-badge-pill.pill-gear {
  background: rgba(202, 138, 4, 0.08);
  border-color: rgba(202, 138, 4, 0.2);
  color: #ca8a04;
}

/* Responsive adjustment */
@media (max-width: 600px) {
  .catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
  }
  .catalog-badge-card {
    padding: 1.25rem 1rem;
    min-height: 350px;
  }
}

/* ==================== HIGH-CONTRAST SWAG BADGES ==================== */
.swag-badge-pill {
  font-weight: 700 !important;
  text-shadow: none !important;
}
.swag-badge-pill.novice {
  background: #10b981 !important; /* Solid Emerald */
  color: #ffffff !important;
  border: none !important;
}
.swag-badge-pill.trooper {
  background: #4f46e5 !important; /* Solid Indigo */
  color: #ffffff !important;
  border: none !important;
}
.swag-badge-pill.ranger {
  background: #0891b2 !important; /* Solid Cyan */
  color: #ffffff !important;
  border: none !important;
}
.swag-badge-pill.champion {
  background: #9333ea !important; /* Solid Purple */
  color: #ffffff !important;
  border: none !important;
}
.swag-badge-pill.legend {
  background: #ca8a04 !important; /* Solid Gold */
  color: #ffffff !important;
  border: none !important;
}
.swag-badge-pill.multi {
  background: #4b5563 !important; /* Solid Slate Gray */
  color: #ffffff !important;
  border: none !important;
}