/**
 * ==============================================================================
 * AGI BENCHMARKS INTELLIGENCE - EARTHY APPLE DESIGN SYSTEM
 * ==============================================================================
 * Aesthetic Fusion:
 * 1. Apple-Style Polish: SF Pro typography hierarchy, delicate letter tracking,
 *    crisp rounded-3xl / rounded-2xl cards, ultra-subtle 1px border glows,
 *    silky frosted glassmorphism (backdrop-blur-2xl), tactile buttons,
 *    fluid pill switches, and floating dynamic status bar.
 * 2. Earthy Organic Palette:
 *    - Oat Milk: #fbf9f5 (light canvas) / #121411 (obsidian espresso dark canvas)
 *    - Matcha & Moss Green: #2d4a34 (deep), #4a6b51 (moss), #84a98c (sage cream)
 *    - Warm Terracotta & Clay: #c86d51 (warm terracotta), #e07a5f (clay sunset)
 *    - Sand & Desert Stone: #e9e5d9 (warm sand), #262724 (basalt stone)
 *    - Obsidian Espresso: #121411 (base), #161815 (surface), #1e201b (card)
 * 3. Gen-Z Friendly Vibes:
 *    - Bento grid layouts with asymmetric visual rhythm
 *    - Aesthetic emoji/icon badges and tactile pill tags
 *    - Dynamic "Vibe Check" indicators and meters
 *    - Ambient breathing blur blobs in background
 *    - Spring-physics micro-interactions (press & hover lift)
 *
 * Zero external font blocking: uses native Apple SF Pro font stack with fallbacks.
 * ==============================================================================
 */

/* ==============================================================================
 * 1. DESIGN TOKENS & CSS VARIABLES
 * ============================================================================== */
:root {
  /* --- Canvas & Neutral Palette (Dark Obsidian Espresso by default) --- */
  --bg-canvas: #121411;
  --bg-surface: #161815;
  --bg-surface-elevated: #1e201b;
  --bg-card: rgba(22, 24, 21, 0.78);
  --bg-card-hover: rgba(30, 32, 27, 0.88);
  --bg-card-solid: #1e201b;

  /* --- Oat Milk Neutrals --- */
  --oat-50: #fbf9f5;
  --oat-100: #f5f0e6;
  --oat-200: #eee8db;
  --oat-300: #e0d8c7;
  --oat-400: #c5c0b4;
  --oat-500: #9b968a;
  --oat-600: #6e6a61;
  --oat-700: #4a4740;
  --oat-800: #2d2b27;
  --oat-900: #1c1b18;

  /* --- Matcha & Moss Greens --- */
  --matcha-deep: #2d4a34;
  --matcha-moss: #4a6b51;
  --matcha-sage: #84a98c;
  --matcha-tint: #a3b18a;
  --matcha-cream: #c5dac8;
  --matcha-glow: rgba(132, 169, 140, 0.22);
  --matcha-border: rgba(132, 169, 140, 0.28);
  --matcha-subtle-bg: rgba(45, 74, 52, 0.22);

  /* --- Warm Terracotta & Clay --- */
  --terracotta-core: #c86d51;
  --terracotta-clay: #e07a5f;
  --terracotta-soft: #d4836a;
  --terracotta-ochre: #d4a373;
  --terracotta-glow: rgba(224, 122, 95, 0.22);
  --terracotta-border: rgba(200, 109, 81, 0.28);
  --terracotta-subtle-bg: rgba(200, 109, 81, 0.16);

  /* --- Sand & Desert Stone --- */
  --sand-light: #e9e5d9;
  --sand-dune: #ddd6c8;
  --sand-stone: #262724;
  --sand-basalt: #1e201b;
  --sand-border: rgba(233, 229, 217, 0.10);
  --sand-glow: rgba(233, 229, 217, 0.15);

  /* --- Typography Colors --- */
  --text-primary: #fbf9f5;         /* Oat milk light */
  --text-secondary: #c5c0b4;       /* Warm oatmeal */
  --text-muted: #9b968a;           /* Muted sand */
  --text-matcha: #84a98c;          /* Creamy matcha */
  --text-clay: #e07a5f;            /* Warm clay */
  --text-sand: #e9e5d9;            /* Desert sand */

  /* --- Borders & Hairline Insets --- */
  --border-subtle: rgba(233, 229, 217, 0.08);
  --border-medium: rgba(233, 229, 217, 0.15);
  --border-glow-matcha: rgba(132, 169, 140, 0.40);
  --border-glow-clay: rgba(224, 122, 95, 0.40);
  --hairline-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.10);
  --hairline-subtle: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);

  /* --- Shadows & Apple Depth --- */
  --shadow-card: 0 16px 36px -10px rgba(0, 0, 0, 0.45), 0 0 1px 1px var(--border-subtle);
  --shadow-card-hover: 0 24px 48px -12px rgba(0, 0, 0, 0.55), 0 0 20px -3px var(--matcha-glow);
  --shadow-island: 0 20px 40px -15px rgba(0, 0, 0, 0.65), 0 0 1px 1px rgba(233, 229, 217, 0.12);
  --shadow-pill: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-tactile: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);

  /* --- Radii --- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 26px;
  --radius-3xl: 32px;
  --radius-pill: 9999px;

  /* --- Apple Spring Physics Timing --- */
  --spring-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 160ms var(--spring-apple);
  --transition-normal: 240ms var(--spring-apple);
  --transition-slow: 380ms var(--spring-apple);
}

/* Light Theme Mode (Optional Oat Milk Primary Mode) */
html.earthy-light {
  --bg-canvas: #fbf9f5;
  --bg-surface: #f5f0e6;
  --bg-surface-elevated: #eee8db;
  --bg-card: rgba(245, 240, 230, 0.75);
  --bg-card-hover: rgba(238, 232, 219, 0.90);
  --bg-card-solid: #eee8db;

  --text-primary: #161815;
  --text-secondary: #4a4740;
  --text-muted: #6e6a61;
  --text-matcha: #2d4a34;
  --text-clay: #c86d51;

  --border-subtle: rgba(38, 39, 36, 0.08);
  --border-medium: rgba(38, 39, 36, 0.16);
  --hairline-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
  --shadow-card: 0 12px 30px -10px rgba(74, 71, 64, 0.15), 0 0 1px 1px var(--border-subtle);
}

/* ==============================================================================
 * 2. TAILWIND CONFIGURATION COMPATIBILITY
 * ==============================================================================
 * To sync with Tailwind CDN, inject this into your tailwind.config:
 *
 * <script>
 *   tailwind.config = {
 *     darkMode: 'class',
 *     theme: {
 *       extend: {
 *         colors: {
 *           canvas: '#121411',
 *           surface: { DEFAULT: '#161815', elevated: '#1e201b' },
 *           stone: { DEFAULT: '#262724', sand: '#e9e5d9', basalt: '#1e201b' },
 *           oat: {
 *             50: '#fbf9f5', 100: '#f5f0e6', 200: '#eee8db', 300: '#e0d8c7',
 *             400: '#c5c0b4', 500: '#9b968a', 600: '#6e6a61', 700: '#4a4740',
 *             800: '#2d2b27', 900: '#1c1b18'
 *           },
 *           matcha: {
 *             deep: '#2d4a34', moss: '#4a6b51', sage: '#84a98c',
 *             tint: '#a3b18a', cream: '#c5dac8'
 *           },
 *           clay: {
 *             core: '#c86d51', sunset: '#e07a5f', soft: '#d4836a', ochre: '#d4a373'
 *           }
 *         },
 *         borderRadius: {
 *           '2xl': '26px',
 *           '3xl': '32px'
 *         }
 *       }
 *     }
 *   };
 * </script>
 * ============================================================================== */

/* ==============================================================================
 * 3. APPLE SF PRO TYPOGRAPHY & SMOOTH RENDERING (ZERO FONT BLOCKING)
 * ============================================================================== */
body, html {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", -system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.012em;
}

/* Apple SF Pro Display Titles */
.apple-h1 {
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

.apple-h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--text-primary);
}

.apple-h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

/* Delicate micro tracking for kicks and overlines */
.apple-kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--matcha-sage);
}

.apple-mono {
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Code", monospace;
  letter-spacing: -0.02em;
}

/* ==============================================================================
 * 4. AMBIENT BACKGROUND BLUR BLOBS & ORGANIC TEXTURE
 * ============================================================================== */
.ambient-blobs-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.38;
  will-change: transform;
}

.blob-matcha {
  width: 580px;
  height: 580px;
  top: -120px;
  left: -80px;
  background: radial-gradient(circle, var(--matcha-moss) 0%, var(--matcha-deep) 65%, transparent 100%);
  animation: floatMatcha 24s ease-in-out infinite alternate;
}

.blob-terracotta {
  width: 520px;
  height: 520px;
  top: 18%;
  right: -100px;
  background: radial-gradient(circle, var(--terracotta-clay) 0%, var(--terracotta-core) 65%, transparent 100%);
  animation: floatTerracotta 28s ease-in-out infinite alternate;
  opacity: 0.32;
}

.blob-sand {
  width: 640px;
  height: 640px;
  bottom: -150px;
  left: 28%;
  background: radial-gradient(circle, #4a3e2d 0%, #262724 65%, transparent 100%);
  animation: floatSand 32s ease-in-out infinite alternate;
  opacity: 0.28;
}

@keyframes floatMatcha {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.08); }
  100% { transform: translate(-30px, 70px) scale(0.95); }
}

@keyframes floatTerracotta {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, 50px) scale(1.05); }
  100% { transform: translate(40px, -40px) scale(0.92); }
}

@keyframes floatSand {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.06); }
  100% { transform: translate(-40px, 20px) scale(0.94); }
}

/* Subtle Organic Paper / Sand Grain Overlay */
.organic-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ==============================================================================
 * 5. SILKY FROSTED GLASSMORPHISM (Apple Style)
 * ============================================================================== */
.earthy-glass {
  background: var(--bg-card);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card), var(--hairline-highlight);
  border-radius: var(--radius-2xl);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.earthy-glass:hover {
  border-color: var(--matcha-border);
  box-shadow: var(--shadow-card-hover), var(--hairline-highlight);
}

/* Solid elevated stone card */
.stone-card {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card), var(--hairline-highlight);
  border-radius: var(--radius-2xl);
}

/* Tinted Frosted Glass variants */
.glass-matcha-tint {
  background: linear-gradient(135deg, rgba(45, 74, 52, 0.35) 0%, rgba(22, 24, 21, 0.8) 100%);
  border: 1px solid var(--matcha-border);
  box-shadow: var(--shadow-card), 0 0 24px -6px var(--matcha-glow), var(--hairline-highlight);
}

.glass-terracotta-tint {
  background: linear-gradient(135deg, rgba(200, 109, 81, 0.25) 0%, rgba(22, 24, 21, 0.8) 100%);
  border: 1px solid var(--terracotta-border);
  box-shadow: var(--shadow-card), 0 0 24px -6px var(--terracotta-glow), var(--hairline-highlight);
}

.glass-sand-tint {
  background: linear-gradient(135deg, rgba(233, 229, 217, 0.12) 0%, rgba(22, 24, 21, 0.8) 100%);
  border: 1px solid var(--sand-border);
  box-shadow: var(--shadow-card), 0 0 24px -6px var(--sand-glow), var(--hairline-highlight);
}

/* ==============================================================================
 * 6. FLOATING DYNAMIC STATUS BAR / DYNAMIC ISLAND
 * ============================================================================== */
.status-island {
  position: sticky;
  top: 14px;
  z-index: 50;
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 18px;
  background: rgba(22, 24, 21, 0.82);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(233, 229, 217, 0.12);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-island), var(--hairline-highlight);
  transition: all var(--transition-normal);
}

.pulsing-dot-matcha {
  position: relative;
  width: 9px;
  height: 9px;
  background-color: var(--matcha-sage);
  border-radius: 50%;
  display: inline-block;
}

.pulsing-dot-matcha::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--matcha-sage);
  animation: pulseBeacon 2.4s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  opacity: 0.8;
}

@keyframes pulseBeacon {
  0% { transform: scale(0.9); opacity: 0.9; }
  70% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.telemetry-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  background: rgba(233, 229, 217, 0.08);
  border: 1px solid rgba(233, 229, 217, 0.12);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--oat-300);
}

/* ==============================================================================
 * 7. FLUID PILL SWITCHES & SEGMENTED CONTROLS
 * ============================================================================== */
.pill-track {
  display: inline-flex;
  align-items: center;
  background: rgba(18, 20, 17, 0.85);
  padding: 4px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(233, 229, 217, 0.10);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.pill-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--oat-400);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  white-space: nowrap;
}

.pill-item:hover {
  color: var(--oat-50);
  background: rgba(233, 229, 217, 0.06);
}

.pill-item:active {
  transform: scale(0.97);
}

/* Active Pill: Matcha Moss Accent */
.pill-item.active,
.pill-item-matcha-active {
  background: linear-gradient(135deg, var(--matcha-moss) 0%, var(--matcha-deep) 100%);
  color: var(--oat-50);
  font-weight: 600;
  border: 1px solid rgba(132, 169, 140, 0.4);
  box-shadow: 0 4px 14px -2px rgba(45, 74, 52, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Active Pill: Warm Clay Accent */
.pill-item-clay-active {
  background: linear-gradient(135deg, var(--terracotta-clay) 0%, var(--terracotta-core) 100%);
  color: var(--oat-50);
  font-weight: 600;
  border: 1px solid rgba(224, 122, 95, 0.4);
  box-shadow: 0 4px 14px -2px rgba(200, 109, 81, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Active Pill: Warm Oat Milk / Apple Minimalist */
.pill-item-oat-active {
  background: var(--oat-100);
  color: var(--bg-canvas);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ==============================================================================
 * 8. BENTO GRID ARCHITECTURE
 * ============================================================================== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.bento-card {
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-card), var(--hairline-highlight);
  padding: 1.5rem;
  overflow: hidden;
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.bento-card:hover {
  transform: translateY(-2px);
  border-color: var(--matcha-border);
  box-shadow: var(--shadow-card-hover), var(--hairline-highlight);
}

/* Bento Span Utilities */
.bento-col-3 { grid-column: span 12 / span 12; }
.bento-col-4 { grid-column: span 12 / span 12; }
.bento-col-6 { grid-column: span 12 / span 12; }
.bento-col-8 { grid-column: span 12 / span 12; }
.bento-col-12 { grid-column: span 12 / span 12; }

@media (min-width: 768px) {
  .bento-col-3 { grid-column: span 3 / span 12; }
  .bento-col-4 { grid-column: span 4 / span 12; }
  .bento-col-6 { grid-column: span 6 / span 12; }
  .bento-col-8 { grid-column: span 8 / span 12; }
  .bento-col-12 { grid-column: span 12 / span 12; }
}

/* Large Hero Bento Feature */
.bento-hero {
  border-radius: var(--radius-3xl);
  background: linear-gradient(135deg, rgba(30, 32, 27, 0.95) 0%, rgba(22, 24, 21, 0.85) 100%);
  border: 1px solid rgba(132, 169, 140, 0.2);
  box-shadow: var(--shadow-card), 0 0 35px -10px var(--matcha-glow), var(--hairline-highlight);
}

/* ==============================================================================
 * 9. GEN-Z VIBES: AESTHETIC BADGES, PILL TAGS & VIBE CHECK INDICATORS
 * ============================================================================== */
.vibe-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: all var(--transition-fast);
}

/* Vibe: Matcha S-Tier */
.vibe-matcha {
  background: var(--matcha-subtle-bg);
  border: 1px solid var(--matcha-border);
  color: var(--matcha-cream);
}
.vibe-matcha:hover {
  background: rgba(45, 74, 52, 0.38);
  box-shadow: 0 0 12px var(--matcha-glow);
}

/* Vibe: Clay Fire / Compute Beast */
.vibe-clay {
  background: var(--terracotta-subtle-bg);
  border: 1px solid var(--terracotta-border);
  color: #f7a088;
}
.vibe-clay:hover {
  background: rgba(200, 109, 81, 0.28);
  box-shadow: 0 0 12px var(--terracotta-glow);
}

/* Vibe: Desert Sand Organic */
.vibe-sand {
  background: rgba(233, 229, 217, 0.08);
  border: 1px solid var(--sand-border);
  color: var(--sand-light);
}
.vibe-sand:hover {
  background: rgba(233, 229, 217, 0.14);
}

/* Vibe Check Dynamic Meter (Visual confidence / rigor bar) */
.vibe-meter {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 6px;
  width: 100%;
  max-width: 120px;
  background: rgba(233, 229, 217, 0.10);
  border-radius: var(--radius-pill);
  overflow: hidden;
  padding: 1px;
}

.vibe-meter-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--transition-normal);
}

.fill-matcha {
  background: linear-gradient(90deg, var(--matcha-moss), var(--matcha-sage));
  box-shadow: 0 0 8px var(--matcha-glow);
}

.fill-clay {
  background: linear-gradient(90deg, var(--terracotta-core), var(--terracotta-clay));
  box-shadow: 0 0 8px var(--terracotta-glow);
}

.fill-sand {
  background: linear-gradient(90deg, #b0a999, var(--sand-light));
}

/* Vibe Check Callout Box */
.vibe-check-box {
  background: linear-gradient(135deg, rgba(28, 30, 25, 0.9) 0%, rgba(22, 24, 21, 0.95) 100%);
  border: 1px solid rgba(233, 229, 217, 0.10);
  border-radius: var(--radius-2xl);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-card), var(--hairline-highlight);
}

/* ==============================================================================
 * 10. TACTILE BUTTONS & MICRO-INTERACTIONS
 * ============================================================================== */
.btn-tactile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  user-select: none;
}

.btn-tactile:active {
  transform: scale(0.972);
}

/* Primary Matcha Button */
.btn-earthy-primary {
  background: linear-gradient(135deg, var(--matcha-moss) 0%, var(--matcha-deep) 100%);
  color: var(--oat-50);
  border: 1px solid rgba(132, 169, 140, 0.4);
  box-shadow: 0 6px 20px -4px rgba(45, 74, 52, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-earthy-primary:hover {
  background: linear-gradient(135deg, #577d5f 0%, #35573e 100%);
  transform: translateY(-1.5px);
  box-shadow: 0 8px 24px -4px rgba(45, 74, 52, 0.75), 0 0 16px var(--matcha-glow);
}

/* Secondary Terracotta Button */
.btn-earthy-clay {
  background: linear-gradient(135deg, var(--terracotta-clay) 0%, var(--terracotta-core) 100%);
  color: var(--oat-50);
  border: 1px solid rgba(224, 122, 95, 0.4);
  box-shadow: 0 6px 20px -4px rgba(200, 109, 81, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-earthy-clay:hover {
  background: linear-gradient(135deg, #e6886e 0%, #d4765a 100%);
  transform: translateY(-1.5px);
  box-shadow: 0 8px 24px -4px rgba(200, 109, 81, 0.7), 0 0 16px var(--terracotta-glow);
}

/* Frosted Neutral Button */
.btn-earthy-glass {
  background: rgba(233, 229, 217, 0.08);
  color: var(--oat-200);
  border: 1px solid rgba(233, 229, 217, 0.12);
  backdrop-filter: blur(12px);
}

.btn-earthy-glass:hover {
  background: rgba(233, 229, 217, 0.14);
  color: var(--oat-50);
  border-color: rgba(233, 229, 217, 0.24);
  transform: translateY(-1px);
}

/* ==============================================================================
 * 11. REFINED FORM CONTROLS & SEARCH INPUTS
 * ============================================================================== */
.earthy-input {
  background: rgba(22, 24, 21, 0.85);
  border: 1px solid rgba(233, 229, 217, 0.12);
  border-radius: var(--radius-pill);
  padding: 8px 16px 8px 36px;
  font-size: 0.75rem;
  color: var(--text-primary);
  outline: none;
  transition: all var(--transition-normal);
  backdrop-filter: blur(12px);
}

.earthy-input::placeholder {
  color: var(--text-muted);
}

.earthy-input:focus {
  border-color: var(--matcha-sage);
  background: rgba(30, 32, 27, 0.95);
  box-shadow: 0 0 0 3px rgba(132, 169, 140, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ==============================================================================
 * 12. HIGH-DENSITY LEADERBOARD TABLE STYLING
 * ============================================================================== */
.earthy-table-wrap {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: rgba(22, 24, 21, 0.65);
  backdrop-filter: blur(20px);
}

.earthy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  text-align: left;
}

.earthy-table th {
  background: rgba(18, 20, 17, 0.92);
  color: var(--oat-400);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  user-select: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.earthy-table th:hover {
  color: var(--oat-50);
}

.earthy-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(233, 229, 217, 0.05);
  color: var(--oat-300);
  transition: background var(--transition-fast);
}

.earthy-table tr:hover td {
  background: rgba(132, 169, 140, 0.06);
}

/* ==============================================================================
 * 13. SILKY SCROLLBAR
 * ============================================================================== */
.custom-scrollbar::-webkit-scrollbar,
.earthy-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track,
.earthy-scrollbar::-webkit-scrollbar-track {
  background: rgba(18, 20, 17, 0.6);
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.earthy-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(132, 169, 140, 0.28);
  border-radius: var(--radius-pill);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.earthy-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(132, 169, 140, 0.5);
}

/* ==============================================================================
 * 14. DROP-IN BACKWARD COMPATIBILITY OVERRIDES
 * ==============================================================================
 * Automatically harmonizes existing .glass-card, .tab-btn, and .tab-active
 * classes to immediately skin existing HTML files without markup rewrites.
 * ============================================================================== */
.glass-card {
  background: var(--bg-card) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-card), var(--hairline-highlight) !important;
  transition: all var(--transition-normal) !important;
}

.glass-card:hover {
  border-color: var(--matcha-border) !important;
  box-shadow: var(--shadow-card-hover), var(--hairline-highlight) !important;
}

.tab-active {
  background: linear-gradient(135deg, var(--matcha-moss) 0%, var(--matcha-deep) 100%) !important;
  color: var(--oat-50) !important;
  border: 1px solid rgba(132, 169, 140, 0.45) !important;
  box-shadow: 0 4px 16px rgba(45, 74, 52, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.chart-sel-btn.bg-indigo-600 {
  background: linear-gradient(135deg, var(--matcha-moss) 0%, var(--matcha-deep) 100%) !important;
  border: 1px solid rgba(132, 169, 140, 0.4) !important;
  box-shadow: 0 4px 14px rgba(45, 74, 52, 0.4) !important;
}

.chart-sel-btn.bg-slate-800 {
  background: rgba(38, 39, 36, 0.7) !important;
  border: 1px solid rgba(233, 229, 217, 0.08) !important;
  color: var(--oat-400) !important;
}

.chart-sel-btn.bg-slate-800:hover {
  background: rgba(45, 74, 52, 0.25) !important;
  color: var(--oat-100) !important;
  border-color: var(--matcha-border) !important;
}