/* ═══════════════════════════════════════════════════════════════════
   FITFORGE TRACKER — LIQUID GLASS DESIGN SYSTEM v2.0
   Premium 2027-Tier Creator Intelligence Platform
   Deep Obsidian × Neon Plasma × Liquid Glass Aesthetic
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Base Palette — Deep Space */
  --void:         #010108;
  --abyss:        #030310;
  --deep:         #060614;
  --space:        #0A0A1A;
  --panel:        #0E0E20;
  --elevated:     #141428;
  --surface:      #1A1A33;
  --raised:       #20203C;
  --muted-bg:     #252545;

  /* Glass Layers */
  --glass-00:     rgba(255,255,255,0.00);
  --glass-02:     rgba(255,255,255,0.02);
  --glass-04:     rgba(255,255,255,0.04);
  --glass-06:     rgba(255,255,255,0.06);
  --glass-08:     rgba(255,255,255,0.08);
  --glass-10:     rgba(255,255,255,0.10);
  --glass-16:     rgba(255,255,255,0.16);

  /* Glass Borders */
  --border-dim:   rgba(255,255,255,0.06);
  --border-soft:  rgba(255,255,255,0.10);
  --border-mid:   rgba(255,255,255,0.16);
  --border-bright:rgba(255,255,255,0.24);

  /* Cyan–Blue Spectrum (Primary) */
  --cyan-900:     #003040;
  --cyan-800:     #005068;
  --cyan-700:     #007A9E;
  --cyan-600:     #009DC8;
  --cyan-500:     #00C8F0;
  --cyan-400:     #00D4FF;
  --cyan-300:     #00E8FF;
  --cyan-200:     #7FFFFF;
  --cyan-100:     #B8FFFF;

  --blue-700:     #1A4080;
  --blue-600:     #2860B0;
  --blue-500:     #4080D8;
  --blue-400:     #4FACFE;
  --blue-300:     #70C0FF;
  --blue-200:     #A0D8FF;

  /* Primary accent */
  --accent-primary:   #00F2FE;
  --accent-secondary: #4FACFE;

  /* Forge Accent — Crimson → Amber */
  --forge-red:    #FF416C;
  --forge-orange: #FF6B35;
  --forge-amber:  #FFA500;
  --forge-yellow: #FFD700;

  /* Support Colors */
  --green-500:    #10B981;
  --green-400:    #34D399;
  --green-300:    #6EE7B7;
  --purple-500:   #7C3AED;
  --purple-400:   #8B5CF6;
  --purple-300:   #A78BFA;
  --pink-500:     #EC4899;
  --pink-400:     #F472B6;
  --amber-500:    #F59E0B;
  --amber-400:    #FBBF24;
  --red-500:      #EF4444;
  --red-400:      #F87171;

  /* Text Palette */
  --text-primary:   #F0F4FF;
  --text-secondary: #B8C4DD;
  --text-tertiary:  #7A88A8;
  --text-muted:     #4A5670;
  --text-disabled:  #2E3850;

  /* Gradients */
  --grad-primary:   linear-gradient(135deg, #00F2FE 0%, #4FACFE 100%);
  --grad-primary-v: linear-gradient(180deg, #00F2FE 0%, #4FACFE 100%);
  --grad-forge:     linear-gradient(135deg, #FF416C 0%, #FF6B35 50%, #FFA500 100%);
  --grad-forge-v:   linear-gradient(180deg, #FF416C 0%, #FFA500 100%);
  --grad-success:   linear-gradient(135deg, #10B981 0%, #34D399 100%);
  --grad-purple:    linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
  --grad-space:     linear-gradient(135deg, #0A0A1A 0%, #0E0E28 100%);
  --grad-glass:     linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);

  /* Shadow System */
  --shadow-xs: 0 1px 4px rgba(0,0,0,0.5);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.55);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.65);
  --shadow-xl: 0 16px 60px rgba(0,0,0,0.75);
  --shadow-2xl:0 24px 80px rgba(0,0,0,0.80);

  /* Neon Glow System */
  --glow-xs-cyan:   0 0 6px  rgba(0,242,254,0.25);
  --glow-sm-cyan:   0 0 12px rgba(0,242,254,0.30), 0 0 24px rgba(0,242,254,0.12);
  --glow-md-cyan:   0 0 20px rgba(0,242,254,0.35), 0 0 40px rgba(0,242,254,0.15);
  --glow-lg-cyan:   0 0 30px rgba(0,242,254,0.40), 0 0 60px rgba(0,242,254,0.20);
  --glow-xl-cyan:   0 0 40px rgba(0,242,254,0.50), 0 0 80px rgba(0,242,254,0.25), 0 0 120px rgba(0,242,254,0.10);

  --glow-sm-forge:  0 0 12px rgba(255,107,53,0.30), 0 0 24px rgba(255,165,0,0.12);
  --glow-md-forge:  0 0 20px rgba(255,65,108,0.35), 0 0 40px rgba(255,107,53,0.18);

  --glow-sm-green:  0 0 12px rgba(16,185,129,0.30), 0 0 24px rgba(52,211,153,0.12);
  --glow-sm-purple: 0 0 12px rgba(124,58,237,0.30), 0 0 24px rgba(139,92,246,0.12);
  --glow-sm-amber:  0 0 12px rgba(245,158,11,0.30), 0 0 24px rgba(251,191,36,0.12);
  --glow-sm-red:    0 0 12px rgba(239,68,68,0.30),  0 0 24px rgba(248,113,113,0.12);

  /* Blur Levels */
  --blur-sm:  blur(8px);
  --blur-md:  blur(16px);
  --blur-lg:  blur(24px);
  --blur-xl:  blur(40px);
  --blur-2xl: blur(60px);

  /* Spacing Scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  /* Border Radius */
  --r1: 4px; --r2: 6px; --r3: 10px; --r4: 14px;
  --r5: 18px; --r6: 24px; --r7: 32px; --rfull: 9999px;

  /* Transitions */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1.00, 0.36, 1.00);
  --ease-in-out: cubic-bezier(0.65, 0.00, 0.35, 1.00);

  --t-fast:   0.12s var(--ease-smooth);
  --t-base:   0.25s var(--ease-smooth);
  --t-slow:   0.40s var(--ease-smooth);
  --t-spring: 0.45s var(--ease-spring);
  --t-lazy:   0.60s var(--ease-out);

  /* Z-index Stack */
  --z-below:   -1;
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
  --z-loading: 9999;

  /* Sidebar */
  --sidebar-w:      260px;
  --sidebar-w-mini: 68px;
  --topbar-h:       64px;
}

/* ── CSS Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html { font-size: 16px; scroll-behavior: smooth; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; border: none; outline: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--deep); }
::-webkit-scrollbar-thumb { background: var(--raised); border-radius: var(--rfull); }
::-webkit-scrollbar-thumb:hover { background: var(--cyan-700); }
* { scrollbar-width: thin; scrollbar-color: var(--raised) var(--deep); }

/* ── Base Body ─────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background-color: var(--void);
  color: var(--text-primary);
  line-height: 1.65;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Glass Panel Base ──────────────────────────────────────────── */
.glass {
  background: var(--glass-04);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r5);
  position: relative;
  overflow: hidden;
  transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 55%);
  pointer-events: none;
  border-radius: inherit;
}

.glass-sm { border-radius: var(--r3); }
.glass-lg { border-radius: var(--r6); }
.glass-xl { border-radius: var(--r7); }

.glass:hover {
  background: var(--glass-06);
  border-color: var(--border-mid);
  box-shadow: var(--shadow-lg);
}

/* Glass with cyan glow */
.glass-cyan {
  border-color: rgba(0,242,254,0.2);
  box-shadow: var(--glow-xs-cyan), inset 0 1px 0 rgba(0,242,254,0.08);
}
.glass-cyan:hover {
  border-color: rgba(0,242,254,0.35);
  box-shadow: var(--glow-sm-cyan);
}

/* ── Card Variants ─────────────────────────────────────────────── */
.card {
  background: var(--glass-04);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-soft);
  border-radius: var(--r5);
  padding: var(--s6);
  transition: all var(--t-base);
  position: relative;
  overflow: hidden;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 50%);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
  border-color: var(--border-mid);
}
.card-sm { padding: var(--s4); border-radius: var(--r4); }
.card-lg { padding: var(--s8); border-radius: var(--r6); }

/* ── Button System ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--rfull);
  transition: all var(--t-spring);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}
.btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--t-base);
  z-index: -1;
}
.btn:active { transform: scale(0.97) !important; }

/* Primary Button */
.btn-primary {
  background: var(--grad-primary);
  color: #000;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}
.btn-primary::before { background: var(--grad-primary); filter: blur(12px); }
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--glow-md-cyan), var(--shadow-lg);
}
.btn-primary:hover::before { opacity: 0.6; }

/* Secondary Button */
.btn-secondary {
  background: var(--glass-08);
  backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-mid);
  color: var(--text-primary);
}
.btn-secondary:hover {
  background: var(--glass-16);
  border-color: var(--border-bright);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Ghost Button */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
}
.btn-ghost:hover {
  border-color: rgba(0,242,254,0.3);
  color: var(--accent-primary);
  background: rgba(0,242,254,0.06);
}

/* Forge (orange) Button */
.btn-forge {
  background: var(--grad-forge);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}
.btn-forge:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--glow-md-forge), var(--shadow-lg);
}

/* Success Button */
.btn-success {
  background: var(--grad-success);
  color: #000;
  font-weight: 700;
}
.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-sm-green), var(--shadow-lg);
}

/* Icon only button */
.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--rfull);
  background: var(--glass-06);
  border: 1px solid var(--border-dim);
  color: var(--text-secondary);
}
.btn-icon:hover {
  background: var(--glass-10);
  border-color: rgba(0,242,254,0.25);
  color: var(--accent-primary);
  box-shadow: var(--glow-xs-cyan);
}

/* Button sizes */
.btn-sm { padding: 7px 14px; font-size: 12px; }
.btn-xs { padding: 5px 10px; font-size: 11px; }
.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-xl { padding: 16px 36px; font-size: 16px; }

/* ── Input System ──────────────────────────────────────────────── */
.input-field {
  background: var(--glass-04);
  backdrop-filter: var(--blur-md);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r3);
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-body);
  width: 100%;
  transition: all var(--t-base);
}
.input-field::placeholder { color: var(--text-muted); }
.input-field:focus {
  border-color: rgba(0,242,254,0.45);
  background: var(--glass-06);
  box-shadow: var(--glow-sm-cyan), inset 0 0 0 1px rgba(0,242,254,0.1);
}
.input-field:hover:not(:focus) {
  border-color: var(--border-mid);
}

/* Large input (URL bar) */
.input-xl {
  padding: 18px 24px;
  font-size: 16px;
  border-radius: var(--r4);
  border-width: 2px;
}
.input-xl:focus {
  box-shadow: var(--glow-md-cyan), inset 0 0 0 1px rgba(0,242,254,0.15);
}

/* ── Badge / Pill ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--rfull);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.badge-cyan    { background: rgba(0,242,254,0.12); color: var(--accent-primary); border: 1px solid rgba(0,242,254,0.2); }
.badge-blue    { background: rgba(79,172,254,0.12); color: var(--blue-300); border: 1px solid rgba(79,172,254,0.2); }
.badge-forge   { background: rgba(255,107,53,0.12); color: var(--forge-orange); border: 1px solid rgba(255,107,53,0.2); }
.badge-green   { background: rgba(16,185,129,0.12); color: var(--green-400); border: 1px solid rgba(16,185,129,0.2); }
.badge-purple  { background: rgba(124,58,237,0.12); color: var(--purple-400); border: 1px solid rgba(124,58,237,0.2); }
.badge-amber   { background: rgba(245,158,11,0.12); color: var(--amber-400); border: 1px solid rgba(245,158,11,0.2); }
.badge-red     { background: rgba(239,68,68,0.12);  color: var(--red-400);    border: 1px solid rgba(239,68,68,0.2); }

/* Platform Badges */
.badge-youtube    { background: rgba(255,0,0,0.12);  color: #FF5555; border: 1px solid rgba(255,0,0,0.2); }
.badge-instagram  { background: rgba(225,48,108,0.12); color: #E1306C; border: 1px solid rgba(225,48,108,0.2); }
.badge-twitter    { background: rgba(29,161,242,0.12); color: #1DA1F2; border: 1px solid rgba(29,161,242,0.2); }
.badge-tiktok     { background: rgba(0,242,234,0.12); color: #00F2EA; border: 1px solid rgba(0,242,234,0.2); }
.badge-facebook   { background: rgba(24,119,242,0.12); color: #1877F2; border: 1px solid rgba(24,119,242,0.2); }
.badge-pinterest  { background: rgba(230,0,35,0.12);   color: #E60023; border: 1px solid rgba(230,0,35,0.2); }

/* ── Divider ───────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border-dim);
  width: 100%;
  margin: var(--s6) 0;
}
.divider-text {
  display: flex;
  align-items: center;
  gap: var(--s4);
  color: var(--text-muted);
  font-size: 12px;
}
.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-dim);
}

/* ── Progress Bar ──────────────────────────────────────────────── */
.progress-track {
  background: var(--raised);
  border-radius: var(--rfull);
  height: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: var(--rfull);
  background: var(--grad-primary);
  transition: width 0.6s var(--ease-out);
  box-shadow: var(--glow-xs-cyan);
}

/* ── Tag / Chip ────────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  background: var(--glass-06);
  border: 1px solid var(--border-dim);
  border-radius: var(--rfull);
  color: var(--text-secondary);
  transition: all var(--t-fast);
  cursor: default;
}
.tag:hover {
  background: rgba(0,242,254,0.08);
  border-color: rgba(0,242,254,0.2);
  color: var(--accent-primary);
}
.tag-hash::before { content: '#'; opacity: 0.5; }

/* ── Tooltip ───────────────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  background: var(--elevated);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--r2);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all var(--t-fast);
  z-index: var(--z-dropdown);
  backdrop-filter: var(--blur-md);
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ── Stat Card ─────────────────────────────────────────────────── */
.stat-card {
  background: var(--glass-04);
  backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-soft);
  border-radius: var(--r5);
  padding: var(--s5) var(--s6);
  transition: all var(--t-spring);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,242,254,0.3) 50%, transparent 100%);
  opacity: 0;
  transition: opacity var(--t-base);
}
.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,242,254,0.2);
  box-shadow: var(--glow-sm-cyan), var(--shadow-xl);
}
.stat-card:hover::before { opacity: 1; }
.stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}
.stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: var(--s2);
}
.stat-change {
  font-size: 12px;
  font-weight: 600;
  margin-top: var(--s2);
  display: flex;
  align-items: center;
  gap: 4px;
}
.stat-change.up   { color: var(--green-400); }
.stat-change.down { color: var(--red-400); }
.stat-icon {
  width: 40px; height: 40px;
  border-radius: var(--r3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s4);
}

/* ── Tab System ────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--glass-04);
  border: 1px solid var(--border-dim);
  border-radius: var(--r4);
  flex-wrap: wrap;
}
.tab-item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  border-radius: var(--r3);
  transition: all var(--t-base);
  cursor: pointer;
  user-select: none;
}
.tab-item:hover { color: var(--text-secondary); background: var(--glass-04); }
.tab-item.active {
  background: var(--glass-10);
  color: var(--accent-primary);
  box-shadow: inset 0 0 0 1px rgba(0,242,254,0.2);
}
.tab-item svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Neon Text Effect ──────────────────────────────────────────── */
.neon-text {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.neon-text-forge {
  background: var(--grad-forge);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.neon-text-green {
  background: var(--grad-success);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Subtle Section Glow Orbs ──────────────────────────────────── */
.orb-cyan {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,242,254,0.15) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(40px);
  animation: orbFloat 8s ease-in-out infinite;
}
.orb-blue {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,172,254,0.12) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(50px);
  animation: orbFloat 12s ease-in-out infinite reverse;
}
.orb-forge {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,53,0.1) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(45px);
  animation: orbFloat 10s ease-in-out infinite 3s;
}

/* ── Platform Color System ─────────────────────────────────────── */
.platform-yt    { --pc: #FF0000; --pc-bg: rgba(255,0,0,0.1); }
.platform-ig    { --pc: #E1306C; --pc-bg: rgba(225,48,108,0.1); }
.platform-tw    { --pc: #1DA1F2; --pc-bg: rgba(29,161,242,0.1); }
.platform-tk    { --pc: #00F2EA; --pc-bg: rgba(0,242,234,0.1); }
.platform-fb    { --pc: #1877F2; --pc-bg: rgba(24,119,242,0.1); }
.platform-pt    { --pc: #E60023; --pc-bg: rgba(230,0,35,0.1); }

/* ── Quality Selector ──────────────────────────────────────────── */
.quality-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s3) var(--s4);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r4);
  cursor: pointer;
  transition: all var(--t-base);
  background: var(--glass-02);
  gap: 4px;
}
.quality-option:hover {
  border-color: rgba(0,242,254,0.25);
  background: rgba(0,242,254,0.05);
}
.quality-option.selected {
  border-color: var(--accent-primary);
  background: rgba(0,242,254,0.10);
  box-shadow: var(--glow-xs-cyan);
}
.quality-option .q-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}
.quality-option .q-desc {
  font-size: 10px;
  color: var(--text-muted);
}
.quality-option.selected .q-label { color: var(--accent-primary); }