/* === DASHBOARD SCREEN — CINEMATIC DARK PREMIUM v4 === */
#dashboardScreen {
  --blue-core: #0E56D8;
  --blue-glow: #4B8CF5;
  --orange-fire: #FF5B1A;
  --orange-glow: #FF7A1A;
  --text-bright: #f0f4fa;
  --text-primary: #d0d8e8;
  --text-secondary: rgba(180,200,230,0.5);
  --text-muted: rgba(140,170,210,0.35);
  --br: 16px;
}

/* === APP FRAME === */
#dashboardScreen .app-frame { position: relative; width: 100%; max-width: 480px; min-height: 100%; overflow: hidden; }
#dashboardScreen .app-frame::before, #dashboardScreen .app-frame::after { display: none !important; }
@media (min-width: 768px) {
  #dashboardScreen .app-frame { max-width: 100%; border-radius: 0; }
}

/* === APP INNER — Cinematic dark + radial lighting === */
#dashboardScreen .app-inner {
  position: relative;
  background: #040d1a;
  min-height: 100vh;
  margin: 0;
  overflow: visible;
  z-index: 1;
  padding: 0 0 20px;
}
/* HVAC tools background pattern */
#dashboardScreen .app-inner::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 500 500'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.035)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- AC Unit --%3E%3Cg transform='translate(20,20) rotate(-10,30,20)'%3E%3Crect x='5' y='5' width='50' height='35' rx='4'/%3E%3Ccircle cx='30' cy='22' r='10'/%3E%3Cpath d='M24,16 L36,28 M36,16 L24,28'/%3E%3Cline x1='12' y1='40' x2='12' y2='48'/%3E%3Cline x1='48' y1='40' x2='48' y2='48'/%3E%3C/g%3E%3C!-- Multimeter --%3E%3Cg transform='translate(160,30) rotate(8,20,28)'%3E%3Crect x='2' y='2' width='36' height='54' rx='5'/%3E%3Ccircle cx='20' cy='22' r='12'/%3E%3Cline x1='20' y1='10' x2='20' y2='22'/%3E%3Cline x1='20' y1='22' x2='28' y2='16'/%3E%3Ccircle cx='11' cy='44' r='3'/%3E%3Ccircle cx='29' cy='44' r='3'/%3E%3C/g%3E%3C!-- Hard Hat --%3E%3Cg transform='translate(330,15)'%3E%3Cpath d='M5,30 C5,10 20,0 30,0 C40,0 55,10 55,30'/%3E%3Cline x1='0' y1='30' x2='60' y2='30'/%3E%3Cline x1='3' y1='30' x2='3' y2='36'/%3E%3Cline x1='57' y1='30' x2='57' y2='36'/%3E%3Cline x1='0' y1='36' x2='60' y2='36'/%3E%3C/g%3E%3C!-- Manifold Gauges --%3E%3Cg transform='translate(40,130) rotate(5,40,25)'%3E%3Ccircle cx='20' cy='20' r='18'/%3E%3Ccircle cx='60' cy='20' r='18'/%3E%3Cline x1='20' y1='38' x2='20' y2='55'/%3E%3Cline x1='60' y1='38' x2='60' y2='55'/%3E%3Cline x1='40' y1='30' x2='40' y2='55'/%3E%3Cpath d='M20,10 L20,20 L28,14'/%3E%3Cpath d='M60,10 L60,20 L68,14'/%3E%3C/g%3E%3C!-- Wire Strippers / Pliers --%3E%3Cg transform='translate(230,110) rotate(-20,20,35)'%3E%3Cpath d='M15,0 C10,12 5,20 12,28 L8,60'/%3E%3Cpath d='M25,0 C30,12 35,20 28,28 L32,60'/%3E%3Ccircle cx='20' cy='26' r='4'/%3E%3C/g%3E%3C!-- Safety Glasses --%3E%3Cg transform='translate(370,120)'%3E%3Ccircle cx='15' cy='15' r='13'/%3E%3Ccircle cx='50' cy='15' r='13'/%3E%3Cpath d='M28,15 L37,15'/%3E%3Cline x1='2' y1='10' x2='-8' y2='5'/%3E%3Cline x1='63' y1='10' x2='73' y2='5'/%3E%3C/g%3E%3C!-- Refrigerant Tank --%3E%3Cg transform='translate(140,220) rotate(5,22,35)'%3E%3Crect x='5' y='15' width='35' height='50' rx='6'/%3E%3Cpath d='M10,15 C10,5 35,5 35,15'/%3E%3Cline x1='22' y1='5' x2='22' y2='0'/%3E%3Ccircle cx='22' cy='0' r='3'/%3E%3Cline x1='12' y1='30' x2='32' y2='30'/%3E%3Cline x1='12' y1='45' x2='32' y2='45'/%3E%3C/g%3E%3C!-- Wrench --%3E%3Cg transform='translate(330,230) rotate(30,20,30)'%3E%3Cpath d='M8,0 C0,5 0,18 8,22 L6,55 L14,55 L12,22 C20,18 20,5 12,0'/%3E%3C/g%3E%3C!-- Thermometer --%3E%3Cg transform='translate(30,310) rotate(-10,8,30)'%3E%3Crect x='3' y='0' width='10' height='42' rx='5'/%3E%3Ccircle cx='8' cy='50' r='8'/%3E%3Cline x1='8' y1='35' x2='8' y2='46'/%3E%3C/g%3E%3C!-- Ductwork --%3E%3Cg transform='translate(200,300)'%3E%3Crect x='0' y='5' width='60' height='25' rx='3'/%3E%3Cline x1='10' y1='5' x2='10' y2='30'/%3E%3Cline x1='25' y1='5' x2='25' y2='30'/%3E%3Cline x1='40' y1='5' x2='40' y2='30'/%3E%3Cline x1='55' y1='5' x2='55' y2='30'/%3E%3C/g%3E%3C!-- Voltage Tester --%3E%3Cg transform='translate(380,320) rotate(15,12,30)'%3E%3Crect x='2' y='0' width='20' height='35' rx='3'/%3E%3Cline x1='12' y1='35' x2='12' y2='60'/%3E%3Ccircle cx='12' cy='15' r='6'/%3E%3Cpath d='M10,12 L14,18'/%3E%3C/g%3E%3C!-- Compressor --%3E%3Cg transform='translate(70,420)'%3E%3Ccircle cx='25' cy='25' r='23'/%3E%3Ccircle cx='25' cy='25' r='10'/%3E%3Cline x1='25' y1='2' x2='25' y2='0'/%3E%3Cline x1='35' y1='2' x2='38' y2='0'/%3E%3Cpath d='M20,15 L30,25 L20,35'/%3E%3C/g%3E%3C!-- Copper Pipe Cutter --%3E%3Cg transform='translate(280,410) rotate(-5,20,20)'%3E%3Ccircle cx='20' cy='20' r='18'/%3E%3Cline x1='20' y1='2' x2='20' y2='38'/%3E%3Crect x='15' y='8' width='10' height='6' rx='1'/%3E%3C/g%3E%3C!-- Capacitor --%3E%3Cg transform='translate(440,430)'%3E%3Crect x='5' y='10' width='30' height='35' rx='4'/%3E%3Cline x1='15' y1='10' x2='15' y2='2'/%3E%3Cline x1='25' y1='10' x2='25' y2='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 500px 500px;
  background-repeat: repeat;
}
#dashboardScreen .app-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 50% 8%, rgba(75,140,245,0.28) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(14,86,216,0.1) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(255,91,26,0.12) 0%, transparent 35%),
    radial-gradient(circle at 20% 70%, rgba(14,86,216,0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 90%, rgba(75,140,245,0.06) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

/* === HEADER === */
#dashboardScreen .header { position: relative; text-align: center; padding: 16px 20px 0; padding-top: calc(16px + env(safe-area-inset-top, 0px)); background: transparent; z-index: 1; }

/* Logo wrapper with glow halo */
#dashboardScreen .logo-wrapper { position: relative; display: inline-block; margin-bottom: -80px; }
#dashboardScreen .logo-wrapper::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(14,86,216,0.3) 0%, rgba(75,140,245,0.15) 30%, rgba(14,86,216,0.05) 55%, transparent 70%);
  pointer-events: none;
  animation: logoBreath 4s ease-in-out infinite;
}
@keyframes logoBreath {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

#dashboardScreen .header-logo {
  position: relative;
  width: 220px; height: 220px;
  border-radius: 50%; object-fit: contain;
  filter: drop-shadow(0 0 40px rgba(14,86,216,0.4)) drop-shadow(0 0 80px rgba(14,86,216,0.15)) drop-shadow(0 10px 25px rgba(0,0,0,0.8));
  background: transparent; z-index: 1;
}

#dashboardScreen .header h1 {
  font-size: 26px; font-weight: 900; color: #ffffff !important;
  letter-spacing: 4px; margin-bottom: 2px; margin-top: -22px;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(14,86,216,0.3), 0 2px 10px rgba(0,0,0,0.6);
  opacity: 1 !important;
}
#dashboardScreen .header .greeting { font-size: 13px; color: var(--text-secondary); font-weight: 500; letter-spacing: 0.5px; }

/* Streak badge */
#dashboardScreen #streakBadge {
  background: linear-gradient(135deg, rgba(255,91,26,0.2), rgba(255,122,26,0.1)) !important;
  border: 1px solid rgba(255,91,26,0.35) !important;
  color: var(--orange-glow) !important;
  box-shadow: 0 0 20px rgba(255,91,26,0.12);
}
#dashboardScreen #streakBadge span { color: var(--orange-glow) !important; }

/* === SOCIAL ROW === */
#dashboardScreen .social-row { display: flex; justify-content: center; gap: 8px; padding: 0 20px 6px; position: relative; z-index: 1; }
#dashboardScreen .social-icon {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#dashboardScreen .social-icon:active { transform: scale(0.88); }
#dashboardScreen .social-icon:hover { transform: translateY(-3px); box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
#dashboardScreen .social-icon svg { width: 14px; height: 14px; }
#dashboardScreen .si-yt { border-color: rgba(255,68,68,0.2) !important; background: rgba(255,68,68,0.08) !important; }
#dashboardScreen .si-yt svg { fill: #ff4444 !important; }
#dashboardScreen .si-fb { border-color: rgba(75,140,245,0.2) !important; background: rgba(75,140,245,0.08) !important; }
#dashboardScreen .si-fb svg { fill: #4B8CF5 !important; }
#dashboardScreen .si-ig { border-color: rgba(232,67,147,0.2) !important; background: rgba(232,67,147,0.08) !important; }
#dashboardScreen .si-ig svg { fill: #e84393 !important; }
#dashboardScreen .si-tk { background: rgba(255,255,255,0.03) !important; }
#dashboardScreen .si-tk svg { fill: rgba(255,255,255,0.5) !important; }
#dashboardScreen .si-gl { border-color: rgba(75,140,245,0.2) !important; background: rgba(75,140,245,0.08) !important; }
#dashboardScreen .si-gl svg path { /* multicolor Google G — do not override fill */ }

/* === CARDS GRID === */
#dashboardScreen .cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 12px; overflow: visible; position: relative; z-index: 1; }

/* === GLASS CARDS === */
#dashboardScreen .card {
  position: relative; border-radius: var(--br); cursor: pointer;
  -webkit-tap-highlight-color: transparent; overflow: hidden;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
#dashboardScreen .card::before {
  content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15) 50%, transparent); z-index: 2;
}
#dashboardScreen .card:active { transform: scale(0.97); }
#dashboardScreen .card:hover {
  transform: translateY(-3px);
  border-color: rgba(75,140,245,0.2) !important;
  box-shadow: 0 25px 70px rgba(0,0,0,0.5), 0 0 30px rgba(14,86,216,0.1) !important;
}

#dashboardScreen .card-inner {
  position: relative; z-index: 3; border-radius: var(--br);
  padding: 8px 6px 6px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-height: 54px;
  text-align: center; gap: 3px; background: transparent !important;
}

/* === ICON CONTAINERS === */
#dashboardScreen .card-ic {
  width: 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: linear-gradient(145deg, rgba(100,170,255,0.25) 0%, rgba(50,120,220,0.12) 100%) !important;
  border: 1px solid rgba(120,180,255,0.3) !important;
  box-shadow: 0 0 14px rgba(75,140,245,0.2), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15);
  position: relative; overflow: hidden;
}
/* Glossy highlight */
#dashboardScreen .card-ic::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 100%);
  border-radius: 11px 11px 0 0; pointer-events: none;
}
#dashboardScreen .card-ic svg { width: 18px; height: 18px; stroke: #7dc0ff !important; stroke-width: 2; fill: none; filter: drop-shadow(0 0 6px rgba(125,192,255,0.5)); position: relative; z-index: 1; }
#dashboardScreen .card:hover .card-ic { background: linear-gradient(145deg, rgba(100,170,255,0.35) 0%, rgba(50,120,220,0.18) 100%) !important; box-shadow: 0 0 20px rgba(75,140,245,0.3), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.15); }

/* === PER-ICON ACCENT COLORS === */
/* Radio — warm amber */
#dashboardScreen .ic-radio { background: linear-gradient(145deg, rgba(245,180,60,0.22), rgba(200,140,30,0.10)) !important; border-color: rgba(245,190,80,0.3) !important; box-shadow: 0 0 14px rgba(245,180,60,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; }
#dashboardScreen .ic-radio svg { stroke: #f0c060 !important; filter: drop-shadow(0 0 6px rgba(240,192,96,0.4)) !important; }
/* Exams (ic-exam not used, kept for safety) — cool teal */
#dashboardScreen .ic-exam { background: linear-gradient(145deg, rgba(60,200,180,0.22), rgba(30,160,140,0.10)) !important; border-color: rgba(80,210,190,0.3) !important; box-shadow: 0 0 14px rgba(60,200,180,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; }
#dashboardScreen .ic-exam svg { stroke: #6edcd0 !important; filter: drop-shadow(0 0 6px rgba(110,220,208,0.4)) !important; }
/* Clases / Classes — indigo */
#dashboardScreen .ic-clases, #dashboardScreen .ic-classes { background: linear-gradient(145deg, rgba(120,100,240,0.22), rgba(90,70,200,0.10)) !important; border-color: rgba(140,120,250,0.3) !important; box-shadow: 0 0 14px rgba(120,100,240,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; }
#dashboardScreen .ic-clases svg, #dashboardScreen .ic-classes svg { stroke: #a99cff !important; filter: drop-shadow(0 0 6px rgba(169,156,255,0.4)) !important; }
/* Skills — emerald */
#dashboardScreen .ic-skills { background: linear-gradient(145deg, rgba(60,190,120,0.22), rgba(30,150,90,0.10)) !important; border-color: rgba(80,200,140,0.3) !important; box-shadow: 0 0 14px rgba(60,190,120,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; }
#dashboardScreen .ic-skills svg { stroke: #6ee0a0 !important; filter: drop-shadow(0 0 6px rgba(110,224,160,0.4)) !important; }
/* Tutorials / Certification — bright cyan with glow pulse */
#dashboardScreen .ic-tutorials { background: linear-gradient(145deg, rgba(50,200,240,0.30), rgba(30,160,200,0.15)) !important; border-color: rgba(80,220,255,0.45) !important; box-shadow: 0 0 20px rgba(50,200,240,0.35), 0 0 40px rgba(50,200,240,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.15) !important; animation: icCertGlow 2s ease-in-out infinite; }
#dashboardScreen .ic-tutorials svg { stroke: #50e0ff !important; filter: drop-shadow(0 0 10px rgba(80,224,255,0.7)) !important; }
@keyframes icCertGlow { 0%,100%{box-shadow:0 0 20px rgba(50,200,240,0.35),0 0 40px rgba(50,200,240,0.15),0 2px 6px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.25)} 50%{box-shadow:0 0 28px rgba(50,200,240,0.5),0 0 60px rgba(50,200,240,0.25),0 2px 6px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.3)} }
/* Suggest — soft lavender */
#dashboardScreen .ic-suggest { background: linear-gradient(145deg, rgba(180,130,240,0.22), rgba(140,90,200,0.10)) !important; border-color: rgba(190,150,250,0.3) !important; box-shadow: 0 0 14px rgba(180,130,240,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; }
#dashboardScreen .ic-suggest svg { stroke: #c8a8ff !important; filter: drop-shadow(0 0 6px rgba(200,168,255,0.4)) !important; }
/* Chat — green with typing pulse */
#dashboardScreen .ic-chat { background: linear-gradient(145deg, rgba(34,197,94,0.25), rgba(22,163,74,0.12)) !important; border-color: rgba(74,222,128,0.35) !important; box-shadow: 0 0 16px rgba(34,197,94,0.2), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; animation: icChatPulse 2.5s ease-in-out infinite; }
#dashboardScreen .ic-chat svg { stroke: #4ade80 !important; filter: drop-shadow(0 0 8px rgba(74,222,128,0.5)) !important; }
@keyframes icChatPulse { 0%,100%{box-shadow:0 0 16px rgba(34,197,94,0.2),0 2px 6px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2)} 50%{box-shadow:0 0 24px rgba(34,197,94,0.4),0 0 40px rgba(34,197,94,0.15),0 2px 6px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.25)} }
/* Game / Gana Dinero — gold with coin float */
#dashboardScreen .ic-game { background: linear-gradient(145deg, rgba(255,200,50,0.30), rgba(220,170,20,0.15)) !important; border-color: rgba(255,215,80,0.4) !important; box-shadow: 0 0 18px rgba(255,200,50,0.3), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.15) !important; }
#dashboardScreen .ic-game svg { stroke: #ffd54f !important; filter: drop-shadow(0 0 8px rgba(255,213,79,0.6)) !important; }
#dashboardScreen .card-game { position: relative; overflow: hidden; }
#dashboardScreen .card-game::before { content: '💰'; position: absolute; font-size: 14px; opacity: 0; animation: coinFloat1 4s ease-in-out 0s infinite; top: 80%; left: 30%; z-index: 2; pointer-events: none; }
#dashboardScreen .card-game::after { content: '🪙'; position: absolute; font-size: 12px; opacity: 0; animation: coinFloat2 4s ease-in-out 1.5s infinite; top: 80%; left: 65%; z-index: 2; pointer-events: none; }
@keyframes coinFloat1 { 0%{opacity:0;transform:translateY(0) rotate(0deg)} 15%{opacity:0.8} 80%{opacity:0.6} 100%{opacity:0;transform:translateY(-80px) rotate(25deg)} }
@keyframes coinFloat2 { 0%{opacity:0;transform:translateY(0) rotate(0deg)} 15%{opacity:0.7} 80%{opacity:0.5} 100%{opacity:0;transform:translateY(-70px) rotate(-20deg)} }
/* Money / Referidos — warm gold */
#dashboardScreen .ic-money { background: linear-gradient(145deg, rgba(255,200,50,0.22), rgba(220,170,30,0.10)) !important; border-color: rgba(255,210,80,0.3) !important; box-shadow: 0 0 14px rgba(255,200,50,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; }
#dashboardScreen .ic-money svg { stroke: #ffd666 !important; filter: drop-shadow(0 0 6px rgba(255,214,102,0.4)) !important; }
/* Certs — warm rose */
#dashboardScreen .ic-certs { background: linear-gradient(145deg, rgba(240,120,140,0.22), rgba(200,80,100,0.10)) !important; border-color: rgba(245,140,160,0.3) !important; box-shadow: 0 0 14px rgba(240,120,140,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; }
#dashboardScreen .ic-certs svg { stroke: #f0a0b0 !important; filter: drop-shadow(0 0 6px rgba(240,160,176,0.4)) !important; }
/* Live — soft red */
#dashboardScreen .ic-live { background: linear-gradient(145deg, rgba(240,80,80,0.22), rgba(200,50,50,0.10)) !important; border-color: rgba(245,100,100,0.3) !important; box-shadow: 0 0 14px rgba(240,80,80,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; }
#dashboardScreen .ic-live svg { stroke: #f08080 !important; filter: drop-shadow(0 0 6px rgba(240,128,128,0.4)) !important; }
/* Schedule / Recorded — slate blue */
#dashboardScreen .ic-schedule, #dashboardScreen .ic-recorded { background: linear-gradient(145deg, rgba(100,140,200,0.22), rgba(60,100,160,0.10)) !important; border-color: rgba(120,160,220,0.3) !important; box-shadow: 0 0 14px rgba(100,140,200,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; }
#dashboardScreen .ic-schedule svg, #dashboardScreen .ic-recorded svg { stroke: #90b8e0 !important; filter: drop-shadow(0 0 6px rgba(144,184,224,0.4)) !important; }
/* CRM / Store — steel */
#dashboardScreen .ic-crm, #dashboardScreen .ic-store { background: linear-gradient(145deg, rgba(140,160,190,0.22), rgba(100,120,150,0.10)) !important; border-color: rgba(160,180,210,0.3) !important; box-shadow: 0 0 14px rgba(140,160,190,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; }
#dashboardScreen .ic-crm svg, #dashboardScreen .ic-store svg { stroke: #b0c4de !important; filter: drop-shadow(0 0 6px rgba(176,196,222,0.4)) !important; }
/* Podcast (Exámenes) — teal */
#dashboardScreen .ic-podcast { background: linear-gradient(145deg, rgba(60,200,180,0.22), rgba(30,160,140,0.10)) !important; border-color: rgba(80,210,190,0.3) !important; box-shadow: 0 0 14px rgba(60,200,180,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; }
#dashboardScreen .ic-podcast svg { stroke: #6edcd0 !important; filter: drop-shadow(0 0 6px rgba(110,220,208,0.4)) !important; }
/* Train — fallback blue */
#dashboardScreen .ic-train { background: linear-gradient(145deg, rgba(100,170,255,0.25), rgba(50,120,220,0.12)) !important; border-color: rgba(120,180,255,0.3) !important; box-shadow: 0 0 14px rgba(75,140,245,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; }
#dashboardScreen .ic-train svg { stroke: #7dc0ff !important; filter: drop-shadow(0 0 6px rgba(125,192,255,0.4)) !important; }

/* Per-card border overrides — all unified glass */
#dashboardScreen .card.card-radio, #dashboardScreen .card.card-podcast,
#dashboardScreen .card.card-train, #dashboardScreen .card.card-classes,
#dashboardScreen .card.card-skills, #dashboardScreen .card.card-recorded,
#dashboardScreen .card.card-certs, #dashboardScreen .card.card-live,
#dashboardScreen .card.card-money, #dashboardScreen .card.card-game,
#dashboardScreen .card.card-crm, #dashboardScreen .card.card-clases,
#dashboardScreen .card.card-tutorials, #dashboardScreen .card.card-acvolt-cert,
#dashboardScreen .card.card-suggest,
#dashboardScreen .card.card-chat, #dashboardScreen .card.card-progress,
#dashboardScreen .card.card-schedule, #dashboardScreen .card.card-tienda {
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45) !important;
}

/* === ACVOLT CERTIFICATION RESPONSIVE === */
.acvolt-wrap {
  padding: 16px 16px 100px;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .acvolt-wrap { max-width: 720px; padding: 20px 24px 100px; }
}
@media (min-width: 1024px) {
  .acvolt-wrap { max-width: 800px; padding: 24px 32px 100px; }
}
@media (max-width: 380px) {
  .acvolt-wrap { padding: 12px 12px 100px; }
}

/* === CARD TEXT === */
#dashboardScreen .card-title { font-size: 11.5px; font-weight: 700; color: var(--text-bright); line-height: 1.2; display: flex; align-items: center; gap: 4px; }
#dashboardScreen .card-subtitle { font-size: 9px; color: var(--text-secondary); font-weight: 500; margin-top: -1px; letter-spacing: 0.2px; }

/* === SUBLINKS — Fire accent === */
#dashboardScreen .card-sublink { display:flex;align-items:center;gap:3px;margin-top:2px;padding-top:3px;border-top:1px solid rgba(255,255,255,0.05);font-size:7.5px;font-weight:600;color:var(--orange-glow);cursor:pointer;transition:color 0.2s; }
#dashboardScreen .card-sublink:hover { color: #ffaa66; }
#dashboardScreen .card-sublink svg { width:8px;height:8px;stroke:currentColor;stroke-width:2.5;fill:none;flex-shrink:0; }

/* === LIVE DOT === */
#dashboardScreen .live-dot {
  display: inline-block; width: 6px; height: 6px;
  background: #22c55e; border-radius: 50%;
  box-shadow: 0 0 8px rgba(34,197,94,0.6), 0 0 20px rgba(34,197,94,0.2);
  animation: livePulse 2s ease-in-out infinite;
  margin-right: 2px; vertical-align: middle; flex-shrink: 0;
}
@keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }

/* === LIVE BADGE (EN VIVO) === */
#dashboardScreen .live-badge {
  display: none; font-size: 7px; font-weight: 800; color: #fff;
  background: #dc2626; padding: 1px 5px; border-radius: 8px;
  letter-spacing: 0.5px; line-height: 1.4; vertical-align: middle;
}
#dashboardScreen .live-badge.active {
  display: inline-block;
  animation: dashLiveHeartbeat 1.5s ease-in-out infinite;
}
@keyframes dashLiveHeartbeat {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 rgba(220,38,38,0); }
  50% { transform: scale(1.15); box-shadow: 0 0 10px rgba(220,38,38,0.5); }
}

/* === DASH SCHEDULE LIST === */
#dashboardScreen .dash-schedule-list {
  margin-top: 3px; font-size: 8px; color: var(--text-muted); line-height: 1.5;
}
#dashboardScreen .dash-schedule-list .dash-sched-item {
  display: flex; align-items: center; gap: 3px;
}
#dashboardScreen .dash-schedule-list .dash-sched-day {
  font-weight: 700; color: var(--text-secondary); min-width: 22px;
}

/* === SECTION LABEL === */
#dashboardScreen .section-label { padding: 18px 20px 8px; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; position: relative; z-index: 1; }

/* === TIENDA — Glass card === */
#dashboardScreen .tienda-section {
  margin: 4px 16px 14px; border-radius: var(--br); overflow: hidden; position: relative; z-index: 1;
  background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#dashboardScreen .tienda-section::before {
  content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12) 50%, transparent);
}
#dashboardScreen .tienda-inner { background: transparent !important; border-radius: var(--br); padding: 14px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#dashboardScreen .tienda-inner h3 { font-size: 14px; font-weight: 800; color: var(--text-bright) !important; margin: 0; }
#dashboardScreen .tienda-inner p { font-size: 10px; color: var(--text-secondary) !important; margin: 0; }

/* === PROGRESS BAR === */
#dashboardScreen .progress-section { padding: 0 16px 16px; position: relative; z-index: 1; }
#dashboardScreen .progress-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 18px 20px; }
#dashboardScreen .progress-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
#dashboardScreen .progress-bar-wrap { width: 100%; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
#dashboardScreen .progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--blue-core), var(--blue-glow)); border-radius: 4px; transition: width 1s ease; }
#dashboardScreen .progress-pct { font-size: 13px; font-weight: 700; color: var(--blue-glow); text-align: right; }

/* === STATS GRID === */
#dashboardScreen .stats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding: 0 16px 18px; position: relative; z-index: 1; }
#dashboardScreen .stat-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 14px; text-align: center; }
#dashboardScreen .stat-value { font-size: 22px; font-weight: 800; color: #ffffff; line-height: 1; margin-bottom: 4px; }
#dashboardScreen .stat-label { font-size: 10.5px; font-weight: 500; color: var(--text-secondary); line-height: 1.3; }

/* === RESUME QUIZ CARD — Dark glass (override inline purple) === */
#dashboardScreen #resumeQuizCard {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(75,140,245,0.15) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  margin: 0 16px 10px !important; border-radius: 16px !important;
}
#dashboardScreen #resumeQuizCard div[style*="background:rgba(255,255,255,0.2)"] {
  background: rgba(75,140,245,0.15) !important;
  border: 1px solid rgba(75,140,245,0.2);
}

/* === HVAC FEED BUBBLE — Dark glass (override inline cyan) === */
#dashboardScreen #hvacFeedBubble {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(75,140,245,0.15) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  margin: 0 16px 10px !important; border-radius: 14px !important;
}
#dashboardScreen #hvacFeedBubble div[style*="background:rgba(255,255,255,0.2)"] {
  background: rgba(75,140,245,0.15) !important;
  border: 1px solid rgba(75,140,245,0.2);
}
#dashboardScreen #hvacFeedBubble span[style*="background:rgba(255,255,255,0.2)"] {
  background: rgba(75,140,245,0.2) !important;
}

/* === PUSH/INSTALL BANNERS — Dark glass === */
#dashboardScreen #pushOptinBanner,
#dashboardScreen #installAppBanner {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 14px !important;
  margin: 0 16px 10px !important;
}

/* === GOOGLE ICON — multicolor G, no fill override === */

/* === FOOTER === */
#dashboardScreen .footer-links { text-align: center; padding: 14px 20px 36px; display: flex; flex-direction: column; gap: 2px; align-items: center; position: relative; z-index: 1; }
#dashboardScreen .footer-link { font-size: 12px; color: var(--text-secondary); font-weight: 600; text-decoration: none; padding: 10px 20px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: color 0.2s, background 0.2s; border-radius: 10px; }
#dashboardScreen .footer-link:hover { color: rgba(220,230,245,0.8); background: rgba(255,255,255,0.04); }
#dashboardScreen .footer-link svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
#dashboardScreen .footer-link.danger { color: rgba(255,91,26,0.5); }
#dashboardScreen .footer-link.danger:hover { color: var(--orange-fire); }

/* === TOP NAV === */
#dashboardScreen .top-avatar {
  position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid rgba(75,140,245,0.25); background: linear-gradient(145deg, var(--blue-core), #0a3f9e);
  display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 13px;
  cursor: pointer; z-index: 10;
  box-shadow: 0 0 20px rgba(14,86,216,0.3), 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
#dashboardScreen .top-avatar:hover { transform: scale(1.08); box-shadow: 0 0 30px rgba(14,86,216,0.4), 0 4px 15px rgba(0,0,0,0.5); }

/* === CARD ANIMATIONS === */
#dashboardScreen .card { opacity: 0; animation: cardIn 0.5s ease forwards; }
#dashboardScreen .card:nth-child(1) { animation-delay: 0.04s; }
#dashboardScreen .card:nth-child(2) { animation-delay: 0.08s; }
#dashboardScreen .card:nth-child(3) { animation-delay: 0.12s; }
#dashboardScreen .card:nth-child(4) { animation-delay: 0.16s; }
#dashboardScreen .card:nth-child(5) { animation-delay: 0.20s; }
#dashboardScreen .card:nth-child(6) { animation-delay: 0.24s; }
#dashboardScreen .card:nth-child(7) { animation-delay: 0.28s; }
#dashboardScreen .card:nth-child(8) { animation-delay: 0.32s; }
#dashboardScreen .card:nth-child(9) { animation-delay: 0.36s; }
#dashboardScreen .card:nth-child(10) { animation-delay: 0.40s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* === RESPONSIVE === */
@media (max-width: 380px) {
  #dashboardScreen .header { padding: 12px 16px 0; }
  #dashboardScreen .header-logo { width: 230px; height: 230px; }
  #dashboardScreen .logo-wrapper::before { width: 310px; height: 310px; }
  #dashboardScreen .logo-wrapper { margin-bottom: -90px; }
  #dashboardScreen .header h1 { font-size: 22px; letter-spacing: 3px; }
  #dashboardScreen .cards-grid { gap: 8px; padding: 0 12px 12px; }
  #dashboardScreen .card-inner { padding: 6px 5px 5px; min-height: 48px; }
  #dashboardScreen .card-title { font-size: 10.5px; }
  #dashboardScreen .card-subtitle { font-size: 8px; }
  #dashboardScreen .card-ic { width: 30px; height: 30px; }
  #dashboardScreen .card-ic svg { width: 14px; height: 14px; }
}

#dashboardScreen {
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding: 6px;
  background: #040d1a !important;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
#dashboardScreen.active {
  display: flex !important;
  flex-direction: row !important;
}
#dashboardScreen.active ~ #mainAppFrame { display: none !important; }
#dashboardScreen:not(.active) { display: none; }


/* === UNIFIED DESIGN SYSTEM — DARK CINEMATIC PREMIUM === */
/* ================================================================
   All internal screens — same palette as dashboard & login
   Background: #040d1a | Cards: glass | Text: light | Accents: blue
   ================================================================ */

/* --- Kill animated spinning border on all screens --- */
.app-frame::before, .app-frame::after { display: none !important; content: none !important; }
#mainAppFrame::before, #mainAppFrame::after { display: none !important; content: none !important; }

/* --- HVAC FEED SCREEN: dark theme --- */
#hvacFeedFrame .app-inner { background: #040d1a !important; }
#hvacFeedScreen { background: #040d1a !important; }

/* --- GLOBAL: Dark cinematic background + iOS safe areas --- */
#mainAppFrame .app-inner {
  background: #040d1a !important;
  position: relative;
  margin: 0 !important;
  border-radius: 0 !important;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
#mainAppFrame .app-inner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 50% 8%, rgba(75,140,245,0.18) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(14,86,216,0.06) 0%, transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(255,91,26,0.08) 0%, transparent 35%),
    radial-gradient(circle at 20% 70%, rgba(14,86,216,0.05) 0%, transparent 40%);
}
#mainAppFrame .container {
  padding: 0 !important;
  background: transparent !important;
  position: relative; z-index: 1;
}

/* --- UNIFIED TOP NAV BAR --- */
#mainAppFrame .screen > .header:first-child,
#mainAppFrame .screen > div:first-child > .header:first-child {
  background: transparent;
  padding: 20px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#mainAppFrame .header .logo-img {
  width: 60px !important; max-width: 60px !important; height: 60px;
  border-radius: 16px; object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(14,86,216,0.3));
  margin-bottom: 8px;
}
#mainAppFrame .header .logo { font-size: 36px; margin-bottom: 6px; }
#mainAppFrame .header h1 {
  font-size: 20px; font-weight: 800; color: #f0f4fa !important;
  letter-spacing: -0.3px; margin-bottom: 2px;
}
#mainAppFrame .header h2 { font-size: 16px; color: #f0f4fa !important; font-weight: 700; }
#mainAppFrame .header .subtitle { font-size: 13px; color: rgba(180,200,230,0.5) !important; font-weight: 500; }
#mainAppFrame .header .greeting { font-size: 13px; color: rgba(180,200,230,0.5) !important; font-weight: 500; }

/* --- SCREEN LAYOUT --- */
#mainAppFrame .screen.active {
  padding: 0 14px 20px;
  background: #040d1a !important;
  position: relative; z-index: 1;
}
#videoLessonsScreen.active, #zoomClassesScreen.active { padding: 0 0 20px !important; }
#videoLessonsScreen .header, #zoomClassesScreen .header { padding-left: 14px; padding-right: 14px; }

/* --- BACK / SECONDARY BUTTONS — glass --- */
#mainAppFrame .back-btn,
#mainAppFrame .btn.btn-secondary[onclick*="showScreen('dashboardScreen')"],
#mainAppFrame .btn.btn-secondary[onclick*="showScreen('levelsScreen')"],
#mainAppFrame .btn.btn-secondary[onclick*="Volver"] {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: #d0d8e8;
  padding: 10px 18px; border-radius: 12px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s;
}
#mainAppFrame .back-btn:hover,
#mainAppFrame .btn.btn-secondary[onclick*="showScreen('dashboardScreen')"]:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(75,140,245,0.3);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* --- GLASS CARDS --- */
#mainAppFrame .card {
  background: rgba(255,255,255,0.04) !important;
  border-radius: var(--br) !important; padding: 16px; margin: 8px 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 0.15s;
}
#mainAppFrame .card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 50px rgba(0,0,0,0.45) !important;
  border-color: rgba(75,140,245,0.15) !important;
}

/* --- LEVEL CARDS --- */
#mainAppFrame .level-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--br) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
  padding: 16px 18px; transition: all 0.2s;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#mainAppFrame .level-card:hover {
  border-color: rgba(75,140,245,0.2) !important;
  box-shadow: 0 16px 50px rgba(0,0,0,0.45) !important;
  transform: translateX(4px) !important;
}

/* --- STUDY CATEGORY CARDS --- */
#mainAppFrame .study-category-card {
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
  border-radius: var(--br) !important;
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#mainAppFrame .study-category-card:hover {
  border-color: rgba(75,140,245,0.2) !important;
  box-shadow: 0 16px 50px rgba(0,0,0,0.45) !important;
}

/* --- VIDEO CARDS --- */
#mainAppFrame .video-card {
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#mainAppFrame .video-card:hover { border-color: rgba(75,140,245,0.2) !important; }
#mainAppFrame .video-lesson-card {
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* --- PRIMARY BUTTONS — Blue gradient --- */
#mainAppFrame .btn-primary {
  background: linear-gradient(135deg, #0E56D8, #4B8CF5);
  color: white; border-radius: 14px; font-weight: 700;
  box-shadow: 0 4px 20px rgba(14,86,216,0.4);
  letter-spacing: 0.3px; border: none;
}
#mainAppFrame .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(14,86,216,0.55);
}

/* --- SECONDARY BUTTONS --- */
#mainAppFrame .btn-secondary {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #d0d8e8 !important;
  border-radius: 14px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}
#mainAppFrame .btn-secondary:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(75,140,245,0.3) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
}

/* --- QUIZ SCREEN --- */
#quizScreen .quiz-header {
  padding: 14px 14px 10px;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin: 0 -14px 16px; border-radius: 0;
}
#quizScreen .question-text {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--br) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
  color: #f0f4fa !important;
}
#quizScreen .option {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
  color: #d0d8e8;
}
#quizScreen .option:hover:not(.disabled) {
  border-color: rgba(75,140,245,0.25);
  box-shadow: 0 6px 20px rgba(14,86,216,0.15);
  background: rgba(255,255,255,0.06);
}

/* --- RESULTS SCREEN --- */
#resultsScreen .card, #resultsScreen .stat {
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.04);
}

/* --- CERTIFICATE CARDS --- */
#mainAppFrame .certificate-card {
  border: 1px solid rgba(255,215,0,0.25) !important;
  box-shadow: 0 4px 20px rgba(243,156,18,0.1) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* --- MEMBERSHIP CARDS --- */
#mainAppFrame .membership-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
  border-radius: 16px !important;
}
#mainAppFrame .membership-card:hover {
  border-color: rgba(75,140,245,0.2) !important;
  box-shadow: 0 16px 50px rgba(0,0,0,0.45) !important;
}

/* --- TIMELINE TABS --- */
#mainAppFrame .timeline-tab.active {
  background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(14,86,216,0.35) !important;
}

/* --- VIDEO STATUS / VIDEO SECONDARY BTN --- */
#mainAppFrame .video-status {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(180,200,230,0.6) !important;
}
#mainAppFrame .btn-video-secondary {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #d0d8e8 !important;
}

/* --- LEVEL BADGE ICONS — dark glass overrides --- */
#mainAppFrame .badge-principiante, #mainAppFrame .level-card:nth-child(1) .level-icon {
  background: rgba(16,185,129,0.2) !important; border-color: rgba(16,185,129,0.4) !important;
}
#mainAppFrame .badge-intermedio, #mainAppFrame .level-card:nth-child(2) .level-icon {
  background: rgba(59,130,246,0.2) !important; border-color: rgba(59,130,246,0.4) !important;
}
#mainAppFrame .badge-avanzado, #mainAppFrame .level-card:nth-child(3) .level-icon {
  background: rgba(245,158,11,0.2) !important; border-color: rgba(245,158,11,0.4) !important;
}
#mainAppFrame .badge-elite, #mainAppFrame .level-card:nth-child(4) .level-icon {
  background: rgba(196,32,50,0.2) !important; border-color: rgba(196,32,50,0.4) !important;
}
#mainAppFrame .badge-platino, #mainAppFrame .level-card:nth-child(5) .level-icon {
  background: rgba(99,102,241,0.2) !important; border-color: rgba(99,102,241,0.4) !important;
}

/* --- PAYWALL CARD — dark glass --- */
#mainAppFrame .paywall-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(12px) !important;
}

/* --- MOBILE BOTTOM NAV — dark --- */
.mobile-bottom-nav {
  background: #0a1628 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(180,200,230,0.5) !important;
}
.mobile-bottom-nav .nav-item.active { color: #4B8CF5 !important; }
.mobile-bottom-nav .nav-item { color: rgba(180,200,230,0.4) !important; }

/* --- PROFILE DIVIDERS --- */
#mainAppFrame .profile-section { border-bottom-color: rgba(255,255,255,0.06) !important; }
#mainAppFrame .profile-field { border-bottom-color: rgba(255,255,255,0.06) !important; }

/* --- PROGRESS BARS --- */
#mainAppFrame .progress-bar {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 8px; overflow: hidden; height: 6px;
}
#mainAppFrame .progress-fill {
  background: linear-gradient(90deg, #0E56D8, #4B8CF5) !important;
  border-radius: 8px;
}

/* --- TABS — glass inactive, blue active --- */
#mainAppFrame .study-level-tab,
#mainAppFrame .video-level-tab {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  font-weight: 600; color: rgba(180,200,230,0.6) !important;
}
#mainAppFrame .study-level-tab:hover,
#mainAppFrame .video-level-tab:hover {
  border-color: rgba(75,140,245,0.2) !important;
  background: rgba(75,140,245,0.08) !important;
  color: #d0d8e8 !important;
}
#mainAppFrame .study-level-tab.active,
#mainAppFrame .video-level-tab.active {
  background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important;
  border-color: transparent !important; color: #fff !important;
  box-shadow: 0 4px 15px rgba(14,86,216,0.35) !important;
}

/* --- SPECIALTY GRID --- */
#mainAppFrame #specialtyGrid > div {
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  border-radius: var(--br) !important;
  background: rgba(255,255,255,0.04);
}

/* --- PROFILE SCREEN --- */
#miPerfilScreen .card { border: 1px solid rgba(255,255,255,0.08); padding: 20px; }
#miPerfilScreen .profile-field { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
#miPerfilScreen .technician-number-card {
  border: 1px solid rgba(75,140,245,0.25);
  background: linear-gradient(135deg, rgba(14,86,216,0.12), rgba(75,140,245,0.06));
}
#miPerfilScreen .profile-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 0 14px; }
#miPerfilScreen .profile-nav-card {
  border-radius: var(--br); background: rgba(255,255,255,0.04);
  cursor: pointer; transition: transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; animation: cardIn 0.4s ease forwards;
}
#miPerfilScreen .profile-nav-card:active { transform: scale(0.96); }
#miPerfilScreen .profile-nav-card .pnc-inner {
  background: transparent; border-radius: var(--br);
  padding: 20px 14px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-height: 100px;
  text-align: center; gap: 8px;
}
#miPerfilScreen .profile-nav-card .pnc-ic {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
#miPerfilScreen .profile-nav-card .pnc-title { font-size: 13px; font-weight: 700; color: #f0f4fa; line-height: 1.3; }
#miPerfilScreen .profile-nav-card .pnc-subtitle { font-size: 11px; color: rgba(180,200,230,0.5); font-weight: 500; margin-top: -4px; }
#miPerfilScreen .profile-nav-card:nth-child(1){animation-delay:0.05s}
#miPerfilScreen .profile-nav-card:nth-child(2){animation-delay:0.1s}
#miPerfilScreen .profile-nav-card:nth-child(3){animation-delay:0.15s}
#miPerfilScreen .profile-nav-card:nth-child(4){animation-delay:0.2s}
#miPerfilScreen .profile-nav-card:nth-child(5){animation-delay:0.25s}
#miPerfilScreen .profile-nav-card:nth-child(6){animation-delay:0.3s}
#miPerfilScreen .profile-nav-card:nth-child(7){animation-delay:0.35s}
#miPerfilScreen .profile-nav-card:nth-child(8){animation-delay:0.4s}
#miPerfilScreen .profile-nav-card:nth-child(9){animation-delay:0.45s}
#miPerfilScreen .profile-nav-card:nth-child(10){animation-delay:0.5s}

/* --- ATTENDANCE SCREEN --- */
#attendanceScreen .card { border: 1px solid rgba(255,255,255,0.08); }

/* --- STICKY NAV BARS --- */
#videoLessonsScreen > div[style*="position:sticky"],
#zoomClassesScreen > div[style*="position:sticky"] {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(4,13,26,0.9) !important;
  backdrop-filter: blur(12px) !important;
}

/* --- RADIO PODCAST SCREEN --- */
#radioPodcastScreen .card { border: 1px solid rgba(255,255,255,0.08); }
#radioPodcastScreen .podcast-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 0 14px; }
#radioPodcastScreen .podcast-nav-card {
  border-radius: var(--br); background: rgba(255,255,255,0.04);
  cursor: pointer; transition: transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  backdrop-filter: blur(12px); opacity: 0; animation: cardIn 0.4s ease forwards;
}
#radioPodcastScreen .podcast-nav-card:active { transform: scale(0.96); }
#radioPodcastScreen .podcast-nav-card .pnc-inner {
  background: transparent; border-radius: var(--br);
  padding: 20px 14px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-height: 100px;
  text-align: center; gap: 8px;
}
#radioPodcastScreen .podcast-nav-card .pnc-ic {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
#radioPodcastScreen .podcast-nav-card .pnc-title { font-size: 13px; font-weight: 700; color: #f0f4fa; line-height: 1.3; }
#radioPodcastScreen .podcast-nav-card .pnc-subtitle { font-size: 11px; color: rgba(180,200,230,0.5); font-weight: 500; margin-top: -4px; }
#radioPodcastScreen .podcast-nav-card:nth-child(1){animation-delay:0.05s}
#radioPodcastScreen .podcast-nav-card:nth-child(2){animation-delay:0.1s}
#radioPodcastScreen .podcast-nav-card:nth-child(3){animation-delay:0.15s}
#radioPodcastScreen .ep-card {
  margin-bottom: 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 12px; transition: border-color 0.3s;
  background: rgba(255,255,255,0.04);
}
#radioPodcastScreen .ep-card.completed { border-color: rgba(34,197,94,0.4); }
#radioPodcastScreen .ep-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#radioPodcastScreen .ep-header span { font-size: 14px; font-weight: 700; color: #f0f4fa; }
#radioPodcastScreen .ep-progress-btn {
  border: none; border-radius: 20px; padding: 5px 12px;
  font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.2s;
  background: rgba(255,255,255,0.06); color: rgba(180,200,230,0.5);
}
#radioPodcastScreen .ep-progress-btn.done { background: rgba(34,197,94,0.15); color: #4ade80; }

/* --- REFERIDOS --- */
#referidosScreen .card { border: 1px solid rgba(255,255,255,0.08); }
/* --- CERTIFICADOS OFICIALES --- */
#certOficialesScreen .card { border: 1px solid rgba(255,255,255,0.08); }
/* --- MEMBERSHIP ZONE --- */
#membershipZoneScreen .card { border: 1px solid rgba(255,255,255,0.08); }
/* --- CALENDAR --- */
#studentCalendarScreen .card { border: 1px solid rgba(255,255,255,0.08); }

/* --- STUDY QUESTION CARDS --- */
#mainAppFrame .study-question-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid #4B8CF5;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  border-radius: var(--br);
  color: #d0d8e8;
}

/* --- SECTION LABELS --- */
#mainAppFrame .header + .btn.btn-secondary { margin: 8px 0; }

/* --- FORM INPUTS — dark glass --- */
#mainAppFrame .form-group input {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  font-size: 16px; padding: 14px 16px;
  color: #f0f4fa;
}
#mainAppFrame .form-group input:focus {
  border-color: rgba(75,140,245,0.4) !important;
  box-shadow: 0 0 0 3px rgba(75,140,245,0.1) !important;
  background: rgba(255,255,255,0.08) !important;
}
#mainAppFrame .form-group label { color: rgba(180,200,230,0.5); }

/* --- WELCOME SCREEN --- */
#welcomeScreen.active { padding: 0 !important; }
#welcomeScreen > .header { background: transparent !important; padding: 12px 20px 8px !important; }
#welcomeScreen > .card { margin: 0 10px 10px; border: 1px solid rgba(255,255,255,0.08); }
#welcomeScreen .menu-btn-v2 { border-radius: 14px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }

/* --- LEVELS SCREEN --- */
#levelsScreen.active { padding-top: 0 !important; }
#levelsScreen > .header {
  padding: 16px 14px 12px !important; margin: 0 -14px;
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* --- MEMBERSHIPS SCREEN --- */
#membresiasScreen > .header { background: transparent !important; }

/* --- CERT COURSE --- */
#certCourseScreen .card { border: 1px solid rgba(255,255,255,0.08); }

/* --- ZOOM CLASSES SCREEN --- */
#zoomClassesScreen .card { border: 1px solid rgba(255,255,255,0.08); }
#zoomClassesScreen .zoom-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 0 14px; }
#zoomClassesScreen .zoom-nav-card {
  border-radius: var(--br); background: rgba(255,255,255,0.04);
  cursor: pointer; transition: transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  backdrop-filter: blur(12px); opacity: 0; animation: cardIn 0.4s ease forwards;
}
#zoomClassesScreen .zoom-nav-card:active { transform: scale(0.96); }
#zoomClassesScreen .zoom-nav-card.active {
  border-color: rgba(75,140,245,0.3);
  box-shadow: 0 4px 20px rgba(14,86,216,0.2);
}
#zoomClassesScreen .zoom-nav-card .znc-inner {
  background: transparent; border-radius: var(--br);
  padding: 20px 14px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-height: 100px;
  text-align: center; gap: 8px;
}
#zoomClassesScreen .zoom-nav-card .znc-ic {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
#zoomClassesScreen .zoom-nav-card .znc-title { font-size: 13px; font-weight: 700; color: #f0f4fa; line-height: 1.3; }
#zoomClassesScreen .zoom-nav-card .znc-subtitle { font-size: 11px; color: rgba(180,200,230,0.5); font-weight: 500; margin-top: -4px; }
#zoomClassesScreen .zoom-nav-card:nth-child(1){animation-delay:0.05s}
#zoomClassesScreen .zoom-nav-card:nth-child(2){animation-delay:0.1s}
#zoomClassesScreen .zoom-nav-card:nth-child(3){animation-delay:0.15s}
#zoomClassesScreen .zoom-nav-card:nth-child(4){animation-delay:0.2s}
#zoomClassesScreen .zoom-nav-card:nth-child(5){animation-delay:0.25s}
#zoomClassesScreen .zoom-nav-card:nth-child(6){animation-delay:0.3s}

/* --- VIDEO PLAYER --- */
#videoPlayerScreen .video-player-container {
  border-radius: var(--br); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
#videoPlayerScreen .card { border: 1px solid rgba(255,255,255,0.08); }

/* --- GLOBAL TEXT COLORS for internal screens (need !important to beat theme-wow.css) --- */
#mainAppFrame .screen h1, #mainAppFrame .screen h2, #mainAppFrame .screen h3 { color: #f0f4fa !important; }
#mainAppFrame .screen p { color: rgba(200,215,240,0.85) !important; }
#mainAppFrame .screen label { color: rgba(200,215,240,0.75) !important; }
#mainAppFrame .screen .text-muted, #mainAppFrame .screen small { color: rgba(180,200,230,0.6) !important; }
#mainAppFrame .screen .subtitle { color: rgba(200,215,240,0.7) !important; }
#mainAppFrame .screen .score-label { color: rgba(200,215,240,0.7) !important; }
#mainAppFrame .screen .stat-label { color: rgba(200,215,240,0.65) !important; }
#mainAppFrame .screen .profile-label { color: rgba(200,215,240,0.65) !important; }
#mainAppFrame .screen .stat-value { color: #7dc0ff !important; font-weight: 900 !important; }
#mainAppFrame .screen .option-text { color: #e0e8f4 !important; }
/* Catch-all for spans, divs, table cells, links — bright enough to read */
#mainAppFrame .screen span { color: rgba(210,220,240,0.9) !important; }
#mainAppFrame .screen td { color: rgba(200,215,240,0.85) !important; }
#mainAppFrame .screen th { color: rgba(220,230,245,0.95) !important; font-weight: 700 !important; }
#mainAppFrame .screen a:not(.btn) { color: #7dc0ff !important; }
#mainAppFrame .screen .mc-loading-text { color: rgba(180,200,230,0.5) !important; }
/* Preserve colored badges/status text */
#mainAppFrame .screen span[style*="color:#16a34a"], #mainAppFrame .screen span[style*="color:#2563eb"],
#mainAppFrame .screen span[style*="color:#ca8a04"], #mainAppFrame .screen span[style*="color:#dc2626"],
#mainAppFrame .screen span[style*="color:#27ae60"], #mainAppFrame .screen span[style*="color:#e74c3c"],
#mainAppFrame .screen span[style*="color:#f39c12"], #mainAppFrame .screen span[style*="color:#22c55e"],
#mainAppFrame .screen span[style*="color:#ef4444"], #mainAppFrame .screen span[style*="color:#15803d"],
#mainAppFrame .screen span[style*="color:#059669"], #mainAppFrame .screen span[style*="color:#d97706"],
#mainAppFrame .screen span[style*="color:#2ecc71"], #mainAppFrame .screen span[style*="color:#4ade80"],
#mainAppFrame .screen span[style*="color:#f87171"], #mainAppFrame .screen span[style*="color:#fbbf24"],
#mainAppFrame .screen span[style*="color:#fb923c"], #mainAppFrame .screen span[style*="color:#38bdf8"],
#mainAppFrame .screen span[style*="color:#a78bfa"], #mainAppFrame .screen span[style*="color:#6366f1"],
#mainAppFrame .screen span[style*="color: #"] { color: inherit !important; }
#mainAppFrame .screen .badge, #mainAppFrame .screen [class*="status"] { color: inherit !important; }

/* --- LEVEL CARDS dark --- */
#mainAppFrame .level-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px) !important;
}
#mainAppFrame .level-card .level-info h3 { color: #f0f4fa !important; }
#mainAppFrame .level-card .level-info p { color: rgba(180,200,230,0.5) !important; }
#mainAppFrame .level-icon {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* --- CERT CARDS dark --- */
#mainAppFrame .cert-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
#mainAppFrame .cert-card .cert-icon {
  background: rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}
#mainAppFrame .cert-card .cert-name { color: #f0f4fa !important; }
#mainAppFrame .cert-card .cert-price, #mainAppFrame .cert-card .cert-status { color: #4B8CF5 !important; }

/* --- PROGRESS SCREEN dark --- */
#mainAppFrame .progress-stat-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
}
#mainAppFrame .progress-chart-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
  color: #f0f4fa !important;
}
#mainAppFrame .progress-chart-card h3 { color: #f0f4fa !important; }

/* --- STUDENT EXAMS SCREEN: override inline white backgrounds --- */
#studentExamsScreen div[style*="background:#fff"],
#studentExamsScreen div[style*="background: #fff"],
#studentExamsScreen div[style*="background:white"],
#studentExamsScreen div[style*="background: white"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
}
#studentExamsScreen div[style*="background:#f0fdf4"] { background: rgba(22,163,106,0.12) !important; }
#studentExamsScreen div[style*="background:#eff6ff"] { background: rgba(37,99,235,0.12) !important; }
#studentExamsScreen div[style*="background:#fefce8"] { background: rgba(202,138,4,0.12) !important; }
#studentExamsScreen h3[style*="color:#1a1a2e"] { color: #f0f4fa !important; }
#studentExamsScreen div[style*="color:#64748b"] { color: rgba(140,170,210,0.5) !important; }

/* --- STUDENT PROGRESS green header → dark glass --- */
#studentProgressScreen > div[style*="background:linear-gradient(135deg,#10b981"] {
  background: rgba(16,185,129,0.15) !important;
  border-bottom: 1px solid rgba(16,185,129,0.3) !important;
}

/* --- BTN-PRIMARY blue override (beat theme-wow red) --- */
#mainAppFrame .btn-primary {
  background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important;
  box-shadow: 0 4px 15px rgba(14,86,216,0.3) !important;
}

/* --- CERT COURSE SCREEN: inline dark text overrides --- */
#certCourseScreen h2[style*="color:#1e293b"] { color: #f0f4fa !important; }
#certCourseScreen p[style*="color:#64748b"] { color: rgba(180,200,230,0.5) !important; }

/* --- SPECIALTY SUBCATEGORIES: back button + heading --- */
#specialtySubcategories button[style*="background:#e2e8f0"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #d0d8e8 !important;
}
#specialtySubcategories h3[style*="color:#1e293b"] { color: #f0f4fa !important; }

/* --- VIDEO LESSONS SCREEN: back button + YouTube header --- */
#videoLessonsScreen button[style*="background:#e2e8f0"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #d0d8e8 !important;
}
#videoLessonsScreen div[style*="color:#1e293b"] { color: #f0f4fa !important; }

/* --- ZOOM VERIFY GATE: headers + dark text --- */
#zoomVerifyGate h2[style*="color:#1e293b"] { color: #f0f4fa !important; }
#zoomVerifyGate div[style*="color:#1e293b"] { color: #f0f4fa !important; }
#zoomVerifyGate div[style*="color:#64748b"] { color: rgba(140,170,210,0.4) !important; }
#zoomVerifyGate p[style*="color:#64748b"] { color: rgba(140,170,210,0.4) !important; }
#zoomVerifyGate div[style*="background:#fef2f2"] {
  background: rgba(239,68,68,0.12) !important;
  border-color: rgba(239,68,68,0.3) !important;
  color: #f87171 !important;
}

/* --- ZOOM RECORDINGS: welcome name + stats + search + logout --- */
#zoomRecordingsList div[style*="color:#1e293b"] { color: #f0f4fa !important; }
#zoomRecordingsList div[style*="color:#64748b"] { color: rgba(140,170,210,0.4) !important; }
#zoomRecordingsList button[style*="background:#f1f5f9"] {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #d0d8e8 !important;
}
#zoomRecordingsList div[style*="background:#eff6ff"] {
  background: rgba(45,140,255,0.12) !important;
  border-color: rgba(45,140,255,0.3) !important;
}
#zoomRecordingsList div[style*="background:#f0fdf4"] {
  background: rgba(16,185,129,0.12) !important;
  border-color: rgba(16,185,129,0.3) !important;
}
#zoomRecordingsList div[style*="background:#fefce8"] {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.3) !important;
}
#zoomClassesScreen input[style*="background:#f8fafc"] {
  background: rgba(255,255,255,0.06) !important;
  color: #f0f4fa !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* --- STUDENT PROGRESS SCREEN: additional inline overrides --- */
#studentProgressScreen div[style*="background:#f1f5f9"],
#studentProgressScreen div[style*="background:#dcfce7"],
#studentProgressScreen div[style*="background:#86efac"],
#studentProgressScreen div[style*="background:#22c55e"],
#studentProgressScreen div[style*="background:#15803d"] {
  /* heatmap legend — keep original colors, just need to be visible */
}
#studentProgressScreen span[style*="color:#94a3b8"] { color: rgba(140,170,210,0.4) !important; }

/* --- HISTORY ITEMS (attendance/quiz history) --- */
#mainAppFrame .history-item {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
}
#mainAppFrame .history-date { color: rgba(180,200,230,0.6) !important; }
#mainAppFrame .history-hours { color: #7dc0ff !important; }
#mainAppFrame .type-presencial { background: rgba(14,86,216,0.15) !important; color: #7dc0ff !important; border-color: rgba(75,140,245,0.3) !important; }
#mainAppFrame .type-zoom { background: rgba(75,140,245,0.12) !important; color: #7dc0ff !important; border-color: rgba(75,140,245,0.25) !important; }

/* --- VIDEO PROGRESS SUMMARY --- */
#mainAppFrame .video-progress-summary {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #d0d8e8 !important;
}
#mainAppFrame .video-status { color: rgba(180,200,230,0.6) !important; }
#mainAppFrame .video-status.completed { color: #4ade80 !important; }

/* --- STUDY OPTIONS --- */
#mainAppFrame .study-option {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #d0d8e8 !important;
}
#mainAppFrame .study-option:hover {
  border-color: rgba(75,140,245,0.25) !important;
  background: rgba(255,255,255,0.06) !important;
}
#mainAppFrame .study-question-text { color: #e0e8f4 !important; }

/* --- CERTIFICATE DETAIL --- */
#mainAppFrame .certificate-detail {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
}
#mainAppFrame .certificate-detail-value { color: #f0f4fa !important; }

/* --- PROFILE AVATAR border --- */
#mainAppFrame .profile-avatar {
  border-color: rgba(75,140,245,0.3) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

/* --- SELECT/TEXTAREA inputs dark --- */
#mainAppFrame .screen select,
#mainAppFrame .screen textarea {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #f0f4fa !important;
  border-radius: 12px !important;
}

/* --- SMOOTH TRANSITIONS --- */
#mainAppFrame .screen { animation: screenFadeIn 0.3s ease; }
@keyframes screenFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* --- Floating Home button — dark glass --- */
.home-fab {
  top: calc(16px + env(safe-area-inset-top, 0px)) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #7dc0ff !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(12px) !important;
}
.home-fab:hover {
  border-color: rgba(75,140,245,0.3) !important;
  box-shadow: 0 10px 30px rgba(14,86,216,0.25) !important;
}
/* ================================================================
   LOGIN SCREEN — Dark Premium Cinematic
   ================================================================ */
#mainAppFrame #loginScreen.active {
  background: #040d1a !important;
  position: relative;
}
/* Hide animated border on login screen */
#mainAppFrame:has(#loginScreen.active) > .app-inner::before,
#mainAppFrame:has(#loginScreen.active) > .app-inner::after,
#mainAppFrame:has(#loginScreen.active)::before,
#mainAppFrame:has(#loginScreen.active)::after {
  display: none !important;
}
#mainAppFrame #loginScreen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 50% 8%, rgba(75,140,245,0.22) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(14,86,216,0.08) 0%, transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(255,91,26,0.1) 0%, transparent 35%),
    radial-gradient(circle at 20% 70%, rgba(14,86,216,0.06) 0%, transparent 40%);
}

/* --- Login header section (override inline bg) --- */
#mainAppFrame #loginScreen > div:first-child {
  background: transparent !important;
  position: relative; z-index: 1;
}

/* --- Login logo styling --- */
#mainAppFrame #loginScreen .login-logo-wrap {
  position: relative; display: inline-block; margin-bottom: -30px;
}
#mainAppFrame #loginScreen .login-logo-wrap::before {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(14,86,216,0.3) 0%, rgba(75,140,245,0.15) 30%, rgba(14,86,216,0.05) 55%, transparent 70%);
  animation: logoBreath 4s ease-in-out infinite; pointer-events: none;
}

/* --- Content wrapper z-index --- */
#mainAppFrame #loginScreen > div:first-child ~ div { position: relative; z-index: 1; }

/* --- Glass cards (login + register) --- */
#mainAppFrame #loginScreen .card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 20px !important;
}
#mainAppFrame #loginScreen .card::before {
  content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 50%, transparent);
}

/* --- All text overrides inside login --- */
#mainAppFrame #loginScreen p { color: rgba(180,200,230,0.6) !important; }
#mainAppFrame #loginScreen .card p:first-child { color: var(--text-bright, #f0f4fa) !important; }
#mainAppFrame #loginScreen h1 {
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
  text-shadow: 0 0 20px rgba(75,140,245,0.5), 0 0 60px rgba(14,86,216,0.3), 0 2px 4px rgba(0,0,0,0.5) !important;
  margin-top: 16px !important;
}
#mainAppFrame #loginScreen h2 { color: #ffffff !important; }

/* --- Form labels --- */
#mainAppFrame #loginScreen .form-group label {
  color: rgba(180,200,230,0.5) !important;
}

/* --- Form inputs dark glass --- */
#mainAppFrame #loginScreen .form-group input,
#mainAppFrame #loginScreen input[type="email"],
#mainAppFrame #loginScreen input[type="password"],
#mainAppFrame #loginScreen input[type="text"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #f0f4fa !important;
  border-radius: 12px !important;
}
#mainAppFrame #loginScreen .form-group input::placeholder,
#mainAppFrame #loginScreen input::placeholder {
  color: rgba(140,170,210,0.35) !important;
}
#mainAppFrame #loginScreen .form-group input:focus,
#mainAppFrame #loginScreen input:focus {
  border-color: rgba(75,140,245,0.4) !important;
  box-shadow: 0 0 0 3px rgba(75,140,245,0.1) !important;
  background: rgba(255,255,255,0.08) !important;
}

/* --- Primary button → blue gradient --- */
#mainAppFrame #loginScreen .btn-primary,
#mainAppFrame #loginScreen .btn[style*="btn-primary"],
#mainAppFrame #loginScreen button[type="submit"] {
  background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(14,86,216,0.4) !important;
  border-radius: 14px !important;
}
#mainAppFrame #loginScreen .btn-primary:hover,
#mainAppFrame #loginScreen button[type="submit"]:hover {
  box-shadow: 0 6px 28px rgba(14,86,216,0.55) !important;
  transform: translateY(-2px);
}

/* --- Magic link / purple button → glass blue --- */
#mainAppFrame #loginScreen .btn[style*="7c3aed"],
#mainAppFrame #loginScreen button[onclick*="showMagicLink"] {
  background: rgba(75,140,245,0.12) !important;
  border: 1px solid rgba(75,140,245,0.25) !important;
  color: #7dc0ff !important;
  box-shadow: none !important;
}

/* --- Register button → subtle green glass --- */
#mainAppFrame #loginScreen .btn[style*="27ae60"],
#mainAppFrame #loginScreen button[onclick*="registerScreen"] {
  background: linear-gradient(135deg, rgba(39,174,96,0.25), rgba(16,163,74,0.15)) !important;
  border: 1px solid rgba(39,174,96,0.3) !important;
  color: #4ade80 !important;
  box-shadow: 0 4px 15px rgba(39,174,96,0.2) !important;
}

/* --- Password recovery button → glass blue --- */
#mainAppFrame #loginScreen button[onclick*="sendPasswordReset"],
#mainAppFrame #loginScreen button[onclick*="sendMagicLink"] {
  background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important;
  border: none !important;
  color: #fff !important;
}

/* --- Forgot password / link text --- */
#mainAppFrame #loginScreen span[onclick*="showForgot"] {
  color: #7dc0ff !important;
}

/* --- Separator "ó" --- */
#mainAppFrame #loginScreen div[style*="border-top:1px solid"] {
  border-color: rgba(255,255,255,0.08) !important;
}
#mainAppFrame #loginScreen span[style*="background:#f8fafc"] {
  background: #0a1628 !important;
  color: rgba(180,200,230,0.4) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* --- Password eye toggle --- */
#mainAppFrame #loginScreen button[onclick*="_togglePassVis"] {
  color: rgba(180,200,230,0.4) !important;
}

/* --- Forgot password / magic link expansion boxes --- */
#mainAppFrame #loginScreen #forgotPasswordBox {
  background: rgba(75,140,245,0.06) !important;
  border: 1px solid rgba(75,140,245,0.15) !important;
  border-radius: 14px !important;
}
#mainAppFrame #loginScreen #forgotPasswordBox p { color: #7dc0ff !important; }
#mainAppFrame #loginScreen #forgotPasswordBox input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(75,140,245,0.2) !important;
  color: #f0f4fa !important;
}

#mainAppFrame #loginScreen #magicLinkBox {
  background: rgba(75,140,245,0.06) !important;
  border: 1px solid rgba(75,140,245,0.15) !important;
  border-radius: 14px !important;
}
#mainAppFrame #loginScreen #magicLinkBox p { color: #7dc0ff !important; }
#mainAppFrame #loginScreen #magicLinkBox input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(75,140,245,0.2) !important;
  color: #f0f4fa !important;
}

/* --- Reset password card --- */
#mainAppFrame #loginScreen #resetPasswordBox .card {
  border-color: rgba(39,174,96,0.2) !important;
  background: rgba(39,174,96,0.04) !important;
}
#mainAppFrame #loginScreen #resetPasswordBox h2 { color: #4ade80 !important; }
#mainAppFrame #loginScreen #resetPasswordBox input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #f0f4fa !important;
}
#mainAppFrame #loginScreen #resetPasswordBox button[onclick*="submitNewPassword"] {
  background: linear-gradient(135deg, rgba(39,174,96,0.4), rgba(16,163,74,0.3)) !important;
  border: 1px solid rgba(39,174,96,0.3) !important;
  color: #4ade80 !important;
}

/* --- Section divider line inside card --- */
#mainAppFrame #loginScreen div[style*="border-top:1px solid #e2e8f0"] {
  border-color: rgba(255,255,255,0.06) !important;
}

/* --- "Conoce más" button --- */
#mainAppFrame #loginScreen button[onclick*="landingPage"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #7dc0ff !important;
}

/* --- Admin link --- */
#mainAppFrame #loginScreen .admin-link {
  color: rgba(180,200,230,0.4) !important;
}

/* --- Login error message --- */
#mainAppFrame #loginScreen .login-error {
  background: rgba(239,68,68,0.1) !important;
  border-color: rgba(239,68,68,0.2) !important;
  color: #f87171 !important;
}

/* ================================================================
   ATTENDANCE SCREEN — Dark overrides
   ================================================================ */
#attendanceScreen .attendance-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#attendanceScreen .attendance-timer { color: #4B8CF5 !important; }
#attendanceScreen .type-option {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(180,200,230,0.6) !important;
}
#attendanceScreen .type-option.selected {
  border-color: rgba(75,140,245,0.4) !important;
  background: rgba(75,140,245,0.12) !important;
  color: #7dc0ff !important;
}
#attendanceScreen .btn-checkin-in {
  background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important;
  box-shadow: 0 4px 20px rgba(14,86,216,0.4) !important;
}
#attendanceScreen .btn-checkin-out {
  background: linear-gradient(135deg, rgba(239,68,68,0.3), rgba(220,38,38,0.2)) !important;
  border: 1px solid rgba(239,68,68,0.3) !important;
  box-shadow: 0 4px 20px rgba(239,68,68,0.2) !important;
  color: #f87171 !important;
}
#attendanceScreen .att-summary-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
#attendanceScreen .att-summary-number { color: #4B8CF5 !important; }
#attendanceScreen .att-summary-text { color: rgba(180,200,230,0.5) !important; }
#attendanceScreen h2 { color: #f0f4fa !important; }
#attendanceScreen .attendance-status {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
#attendanceScreen .status-active { background: rgba(34,197,94,0.12) !important; color: #4ade80 !important; border-color: rgba(34,197,94,0.3) !important; }
#attendanceScreen .status-inactive { background: rgba(239,68,68,0.08) !important; color: #f87171 !important; border-color: rgba(239,68,68,0.2) !important; }
#attendanceScreen p { color: rgba(180,200,230,0.5) !important; }

/* --- PROFILE floating back button — dark glass --- */
#miPerfilScreen #floatingBackBtn button {
  background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important;
  box-shadow: 0 4px 20px rgba(14,86,216,0.4) !important;
}

/* --- RADIO/PODCAST SCREEN: dark theme inline overrides --- */
#radioPodcastScreen .pnc-ic {
  background: rgba(255,255,255,0.08) !important;
}
#podcastFloatingBtn button {
  background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important;
  box-shadow: 0 4px 20px rgba(14,86,216,0.4) !important;
}
#sectionRadio .card {
  border-color: rgba(14,86,216,0.3) !important;
}
#sectionRadio .card > div[style*="background:linear-gradient"] {
  background: linear-gradient(135deg, rgba(14,86,216,0.5), rgba(75,140,245,0.3)) !important;
}
#sectionRadio .card > div[style*="background:#fff"] {
  background: rgba(255,255,255,0.04) !important;
}
#radioPlayerOff button {
  background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important;
  box-shadow: 0 4px 20px rgba(14,86,216,0.4) !important;
}
#radioPlayerOn > div:first-child span[style*="background:#dcfce7"] {
  background: rgba(34,197,94,0.15) !important;
  color: #4ade80 !important;
}
#radioPlayerOn button {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #d0d8e8 !important;
}
#sectionEpisodios > .card {
  border-color: rgba(29,185,84,0.3) !important;
  background: rgba(255,255,255,0.04) !important;
}
#sectionEpisodios h3 { color: #f0f4fa !important; }
#sectionTipsHVAC > .card {
  border-color: rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* --- PROFILE SCREEN: section dark overrides --- */
#miPerfilScreen .pnc-ic {
  background: rgba(255,255,255,0.08) !important;
}
#miPerfilScreen [style*="background:#fff"],
#miPerfilScreen [style*="background: #fff"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
}
#miPerfilScreen [style*="color:#f39c12"] {
  color: #4B8CF5 !important;
}
#miPerfilScreen [style*="color: #1a1a2e"],
#miPerfilScreen [style*="color:#1a1a2e"] {
  color: #f0f4fa !important;
}
#miPerfilScreen #sectionProgreso button[style*="background: #6c3ce0"],
#miPerfilScreen #sectionProgreso button[style*="background:#6c3ce0"] {
  background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important;
}

/* --- RESULTS/EXAM SCREEN: dark stat overrides --- */
#mainAppFrame .stat {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
#mainAppFrame .stat-value { color: #7dc0ff !important; text-shadow: none !important; }
#mainAppFrame .stat.correct .stat-value { color: #4ade80 !important; }
#mainAppFrame .stat.incorrect .stat-value { color: #f87171 !important; }
#mainAppFrame .stat.time .stat-value { color: #38bdf8 !important; }
#mainAppFrame .stat-label { color: rgba(180,200,230,0.5) !important; }
#mainAppFrame .score-bg { stroke: rgba(255,255,255,0.1) !important; }
#mainAppFrame .score-label { color: rgba(180,200,230,0.6) !important; font-weight: 500 !important; }
#mainAppFrame .score-value { color: #f0f4fa !important; }
#mainAppFrame .score-fill { filter: drop-shadow(0 0 6px rgba(75,140,245,0.4)) !important; }

/* --- SUBTITLE/LABEL indigo override fix --- */
#mainAppFrame .subtitle,
#mainAppFrame .profile-level-subtitle,
#mainAppFrame .study-breadcrumb,
#mainAppFrame .certificate-title,
#mainAppFrame .video-progress-text,
#mainAppFrame .progress-text,
#mainAppFrame .timeline-date {
  color: rgba(180,200,230,0.6) !important;
  font-weight: 500 !important;
}
#mainAppFrame .profile-label,
#mainAppFrame .certificate-detail-label,
#mainAppFrame .cert-detail-label,
#mainAppFrame .stat-label,
#mainAppFrame .video-card-info p,
#mainAppFrame .technician-meta {
  color: rgba(180,200,230,0.5) !important;
}

/* --- QUIZ REVIEW: question badges + explanation --- */
#mainAppFrame .study-question-number,
#mainAppFrame .question-number {
  background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(14,86,216,0.3) !important;
}
#mainAppFrame .study-explanation {
  background: rgba(14,86,216,0.08) !important;
  border-left: 3px solid rgba(75,140,245,0.5) !important;
  border-radius: 10px !important;
}
#mainAppFrame .study-explanation-title {
  color: #4B8CF5 !important;
}
#mainAppFrame .study-explanation-text {
  color: rgba(180,200,230,0.6) !important;
}

/* --- QUIZ/STUDY OPTIONS: global dark override --- */
#mainAppFrame .option {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #d0d8e8 !important;
}
#mainAppFrame .option:hover:not(.disabled) {
  border-color: rgba(75,140,245,0.25) !important;
  background: rgba(255,255,255,0.06) !important;
  box-shadow: 0 6px 20px rgba(14,86,216,0.15) !important;
}
#mainAppFrame .option-letter {
  background: rgba(255,255,255,0.1) !important;
  color: #b0c4e8 !important;
}
#mainAppFrame .option.correct { background: rgba(39,174,96,0.15) !important; border-color: #27ae60 !important; }
#mainAppFrame .option.incorrect { background: rgba(231,76,60,0.15) !important; border-color: #e74c3c !important; }
#mainAppFrame .option.correct .option-letter { background: linear-gradient(135deg, #27ae60, #2ecc71) !important; color: #fff !important; }
#mainAppFrame .option.incorrect .option-letter { background: linear-gradient(135deg, #e74c3c, #c0392b) !important; color: #fff !important; }

/* ================================================================
   CRM / ADMIN PROTECTION — restore light CRM theme
   MUST use #mainAppFrame #adminXxx (specificity 2-1-0+)
   to beat #mainAppFrame .screen.active (specificity 1-2-0)
   ================================================================ */
#mainAppFrame #adminDashboardScreen.active,
#mainAppFrame #adminTechnicianProfileScreen.active {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 400 !important; width: 100vw !important; max-width: 100vw !important; height: 100vh !important;
  padding: 0 !important; overflow-y: auto !important;
  background: linear-gradient(135deg,#fef9f0,#fff7ed) !important;
  color: #1a1d21 !important;
}
#mainAppFrame #adminDashboardScreen .card,
#mainAppFrame #adminDashboardScreen .admin-section,
#mainAppFrame #adminDashboardScreen .admin-stat-card,
#mainAppFrame #adminTechnicianProfileScreen .card {
  background: #ffffff !important;
  border: 1px solid #e3e7ee !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  color: #1a1d21 !important;
}
#mainAppFrame #adminDashboardScreen .stat {
  background: #ffffff !important; border: 1px solid #e3e7ee !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
#mainAppFrame #adminDashboardScreen .stat-value { color: #1a1d21 !important; text-shadow: none !important; }
#mainAppFrame #adminDashboardScreen .stat-label { color: #4b5563 !important; }
#mainAppFrame #adminDashboardScreen h1, #mainAppFrame #adminDashboardScreen h2, #mainAppFrame #adminDashboardScreen h3,
#mainAppFrame #adminTechnicianProfileScreen h1, #mainAppFrame #adminTechnicianProfileScreen h2, #mainAppFrame #adminTechnicianProfileScreen h3 {
  color: #1a1d21 !important;
}
#mainAppFrame #adminDashboardScreen p, #mainAppFrame #adminTechnicianProfileScreen p {
  color: #4b5563 !important;
}
#mainAppFrame #adminDashboardScreen .back-btn, #mainAppFrame #adminTechnicianProfileScreen .back-btn {
  background: #f8f9fb !important; border: 1px solid #e3e7ee !important;
  color: #1a1d21 !important; backdrop-filter: none !important; box-shadow: none !important;
}
#mainAppFrame #adminDashboardScreen .btn-primary { background: #22c55e !important; color: #fff !important; border: none !important; }
#mainAppFrame #adminDashboardScreen .btn-secondary {
  background: #f8f9fb !important; border: 1px solid #e3e7ee !important;
  color: #1a1d21 !important; backdrop-filter: none !important;
}
#mainAppFrame #adminDashboardScreen input, #mainAppFrame #adminDashboardScreen select, #mainAppFrame #adminDashboardScreen textarea {
  background: #f8f9fb !important; border: 1px solid #e3e7ee !important;
  color: #1a1d21 !important; backdrop-filter: none !important;
}
#mainAppFrame #adminDashboardScreen .option { background: #f8f9fb !important; border: 1px solid #e3e7ee !important; color: #1a1d21 !important; }
#mainAppFrame #adminDashboardScreen .option-letter { background: #e2e8f0 !important; color: #1a1d21 !important; }
#mainAppFrame #adminDashboardScreen .progress-bar { background: #e3e7ee !important; }
#mainAppFrame #adminDashboardScreen .progress-fill { background: #22c55e !important; }
#mainAppFrame #adminDashboardScreen .subtitle, #mainAppFrame #adminDashboardScreen .profile-label { color: #4b5563 !important; }
#mainAppFrame #adminDashboardScreen .study-level-tab { background: #f8f9fb !important; border: 1px solid #e3e7ee !important; color: #1a1d21 !important; }
#mainAppFrame #adminDashboardScreen .study-level-tab.active { background: #22c55e !important; color: #fff !important; }
#mainAppFrame #adminDashboardScreen .header {
  background: #ffffff !important; border-bottom: 1px solid #e3e7ee !important;
}
/* Reset ALL dark text/color overrides inside CRM */
#mainAppFrame #adminDashboardScreen label,
#mainAppFrame #adminDashboardScreen small,
#mainAppFrame #adminDashboardScreen .text-muted,
#mainAppFrame #adminDashboardScreen span,
#mainAppFrame #adminTechnicianProfileScreen label,
#mainAppFrame #adminTechnicianProfileScreen small,
#mainAppFrame #adminTechnicianProfileScreen span {
  color: inherit !important;
}
#mainAppFrame #adminDashboardScreen a { color: #2563eb !important; }
#mainAppFrame #adminDashboardScreen td { color: #1a1d21 !important; }
#mainAppFrame #adminDashboardScreen th { color: #1a1d21 !important; }
#mainAppFrame #adminDashboardScreen .stat-value { color: #1a1d21 !important; }
#mainAppFrame #adminDashboardScreen .stat-label { color: #4b5563 !important; }
/* Ensure CRM container has no dark inner bg */
#mainAppFrame #adminDashboardScreen .app-inner,
#mainAppFrame #adminDashboardScreen .container {
  background: transparent !important;
}
#mainAppFrame #adminDashboardScreen .score-bg { stroke: #e2e8f0 !important; }
#mainAppFrame #adminDashboardScreen .score-label { color: #4b5563 !important; }
#mainAppFrame #adminDashboardScreen .score-value { color: #1a1d21 !important; }

/* --- MOBILE RESPONSIVENESS refinements --- */
@media (max-width: 380px) {
  #mainAppFrame .header h1 { font-size: 18px; }
  #mainAppFrame .card { padding: 12px; margin: 6px 0; }
  #mainAppFrame .btn { padding: 11px; font-size: 13px; }
  #mainAppFrame .level-card { padding: 14px; }
  #mainAppFrame .option { padding: 12px; gap: 10px; }
}

/* --- PAYWALL MODAL refinement --- */
.paywall-card {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
}

/* ================================================================
   END STYLE MIGRATION
   ================================================================ */

/* === AMBASSADOR ANIMATIONS === */
          @keyframes floatMoney { 0%,100%{transform:translateY(0) rotate(0deg);} 25%{transform:translateY(-15px) rotate(5deg);} 50%{transform:translateY(-8px) rotate(-3deg);} 75%{transform:translateY(-20px) rotate(3deg);} }
          @keyframes pulseCash { 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }
          @keyframes shimmer { 0%{background-position:-200% center;} 100%{background-position:200% center;} }
          @keyframes bounceArrow { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
          @keyframes rainMoney { 0%{transform:translateY(-100%) rotate(0deg);opacity:1;} 100%{transform:translateY(100vh) rotate(720deg);opacity:0;} }
          @keyframes glowPulse { 0%,100%{box-shadow:0 0 10px rgba(243,156,18,0.3);} 50%{box-shadow:0 0 30px rgba(243,156,18,0.6),0 0 60px rgba(39,174,96,0.3);} }
          @keyframes slideUp { 0%{transform:translateY(30px);opacity:0;} 100%{transform:translateY(0);opacity:1;} }
          @keyframes countUp { 0%{transform:scale(0.5);opacity:0;} 50%{transform:scale(1.2);} 100%{transform:scale(1);opacity:1;} }
          .amb-float { animation: floatMoney 3s ease-in-out infinite; display:inline-block; }
          .amb-float-delay1 { animation-delay: 0.3s; }
          .amb-float-delay2 { animation-delay: 0.6s; }
          .amb-float-delay3 { animation-delay: 0.9s; }
          .amb-pulse { animation: pulseCash 2s ease-in-out infinite; }
          .amb-shimmer { background:linear-gradient(90deg,#f39c12 0%,#ffd700 25%,#f39c12 50%,#2ecc71 75%,#f39c12 100%); background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:shimmer 3s linear infinite; }
          .amb-bounce { animation: bounceArrow 1.5s ease-in-out infinite; }
          .amb-glow { animation: glowPulse 2s ease-in-out infinite; }
          .amb-slide { animation: slideUp 0.6s ease-out forwards; opacity:0; }
          .amb-slide-d1 { animation-delay:0.1s; }
          .amb-slide-d2 { animation-delay:0.2s; }
          .amb-slide-d3 { animation-delay:0.3s; }
          .amb-slide-d4 { animation-delay:0.4s; }
          .amb-rain { position:absolute; animation: rainMoney linear infinite; pointer-events:none; font-size:20px; opacity:0.6; }
          .amb-share-btn { padding:12px 18px; border:none; border-radius:12px; font-weight:bold; font-size:14px; cursor:pointer; transition:all 0.3s; display:flex; align-items:center; gap:8px; justify-content:center; }
          .amb-share-btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.2); }
          .amb-share-btn:active { transform:scale(0.95); }
          .amb-step { display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px; margin-bottom:6px; transition:all 0.3s; }
          .amb-step:hover { background:rgba(243,156,18,0.08); transform:translateX(5px); }

/* === Clases en Vivo Floating Button Pulse === */
@keyframes pulseClasesVivo { 0%,100%{transform:scale(1);box-shadow:0 4px 20px rgba(139,92,246,0.5);} 50%{transform:scale(1.08);box-shadow:0 6px 30px rgba(139,92,246,0.7);} }

/* === HVAC Pulse === */
@keyframes hvacPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(1.3);}}

/* === MENU BTN V2 === */
          .menu-btn-v2 {
            display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;border:none;border-radius:12px;
            cursor:pointer;text-decoration:none;color:white;font-size:14px;font-weight:700;
            margin-bottom:6px;transition:all 0.2s ease;position:relative;overflow:hidden;
            box-shadow:0 2px 8px rgba(0,0,0,0.12);letter-spacing:0.2px;
          }
          .menu-btn-v2:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,0.2); }
          .menu-btn-v2:active { transform:translateY(0); }
          .menu-btn-v2 .btn-icon {
            width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
            font-size:18px;background:rgba(255,255,255,0.15);flex-shrink:0;
          }
          .menu-btn-v2 .btn-text { flex:1; }
          .menu-btn-v2 .btn-arrow { font-size:14px;opacity:0.5; }

/* === VEGAS/CRM ANIMATIONS === */
            @keyframes vegasLights{0%{background-position:0% 50%}100%{background-position:400% 50%}}
            @keyframes vegasBlink{0%,100%{opacity:1;filter:brightness(1.5);}50%{opacity:0.3;filter:brightness(0.5);}}
            @keyframes vegasBounce{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}
            @keyframes crmTextPop{0%,100%{transform:scale(1);opacity:1;}15%{transform:scale(0) translateY(20px);opacity:0;}30%{transform:scale(1.2) translateY(-5px);opacity:1;}40%{transform:scale(1);}}
            @keyframes crmShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
            @keyframes crmPulse{0%,100%{transform:scale(1);box-shadow:0 2px 12px rgba(34,197,94,.4)}50%{transform:scale(1.03);box-shadow:0 4px 20px rgba(34,197,94,.6)}}
            @keyframes crmBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* === TECH CHAT === */
/* === iOS SAFE AREA INSETS === */
#techChatScreen #chatHeader { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); }
.notif-bell-container { top: calc(70px + env(safe-area-inset-top, 0px)) !important; right: calc(15px + env(safe-area-inset-right, 0px)) !important; }
.notif-panel { top: calc(70px + env(safe-area-inset-top, 0px)) !important; right: calc(10px + env(safe-area-inset-right, 0px)) !important; }

#techChatScreen { background:#0f172a;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;box-sizing:border-box; }
#techChatScreen.active { padding:0 !important;background:#0f172a !important; }
@media(max-width:768px){ #techChatScreen.active { padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)) !important; } }
#techChatScreen #chatTextInput:focus { border-color:#0ea5e9;box-shadow:0 0 0 2px rgba(14,165,233,0.2); }
#techChatScreen #chatSendBtn:active { transform:scale(0.9); }
#techChatScreen #chatSendBtn:disabled { opacity:0.5; }
#sugerenciasScreen { background:#0f172a;flex-direction:column;height:100vh;overflow:hidden; }
#sugerenciasScreen.active { padding:0 !important;background:#0f172a !important; }
#sugerenciasScreen #sugerenciaText:focus { border-color:#8b5cf6;box-shadow:0 0 0 2px rgba(139,92,246,0.2); }

/* === VIDEO TUTORIALES — Student Library + Paywall === */
#videoTutorialesScreen { background:#0f172a;min-height:100vh; }
#videoTutorialesScreen.active { padding:0 !important; }

/* Paywall modal — pops up when tapping a locked video */
.vt-paywall-modal { position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,0.8);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px; }
.vt-paywall-card { background:linear-gradient(135deg,#1a1207 0%,#2d1f0a 40%,#1a1207 100%);border:1px solid rgba(255,193,7,0.25);border-radius:24px;padding:40px 28px;max-width:420px;width:100%;text-align:center;position:relative;animation:vtSlideUp .3s ease;box-shadow:0 0 40px rgba(255,165,0,0.12); }
@keyframes vtSlideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.vt-paywall-close { position:absolute;top:12px;right:14px;background:none;border:none;color:#94a3b8;font-size:28px;cursor:pointer;padding:4px 8px;line-height:1; }
.vt-paywall-close:hover { color:#fff; }
.vt-paywall-icon { font-size:48px;margin-bottom:12px; }
.vt-paywall-title { font-size:22px;font-weight:800;color:#ffd54f;margin-bottom:10px; }
.vt-paywall-desc { font-size:14px;color:#94a3b8;line-height:1.5;margin-bottom:20px; }
.vt-paywall-features { list-style:none;padding:0;margin:0 0 24px;text-align:left; }
.vt-paywall-features li { color:#cbd5e1;font-size:14px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.05); }
.vt-paywall-price { margin-bottom:20px; }
.vt-price-amount { font-size:42px;font-weight:900;color:#ffb300; }
.vt-price-period { font-size:16px;color:#94a3b8;margin-left:4px; }
.vt-donate-btn { width:100%;padding:16px;border:none;border-radius:14px;background:linear-gradient(135deg,#f59e0b,#ef6c00);color:#fff;font-size:17px;font-weight:800;cursor:pointer;letter-spacing:0.5px;transition:all .2s;box-shadow:0 4px 20px rgba(245,158,11,0.35); }
.vt-donate-btn:hover { opacity:0.9;box-shadow:0 6px 28px rgba(245,158,11,0.5);transform:translateY(-1px); }
.vt-paywall-note { font-size:12px;color:#64748b;margin-top:14px; }

/* Back button */
.vt-back-btn { position:absolute;top:16px;left:16px;background:rgba(255,255,255,0.1);border:none;color:#94a3b8;font-size:16px;padding:6px 14px;border-radius:8px;cursor:pointer; }
.vt-back-btn:hover { color:#e2e8f0;background:rgba(255,255,255,0.15); }

/* Library */
.vt-library { padding:16px;max-width:800px;margin:0 auto; }
.vt-lib-header { display:flex;align-items:center;gap:12px;margin-bottom:16px; }
.vt-lib-header .vt-back-btn { position:static;flex-shrink:0; }
.vt-lib-title { font-size:20px;font-weight:800;color:#e2e8f0;margin:0; }
.vt-search-wrap { margin-bottom:14px; }
.vt-search { width:100%;padding:10px 14px;border-radius:10px;border:1px solid #334155;background:#1e293b;color:#e2e8f0;font-size:14px;outline:none;box-sizing:border-box; }
.vt-search:focus { border-color:#14b8a6;box-shadow:0 0 0 2px rgba(20,184,166,0.2); }
.vt-search::placeholder { color:#64748b; }

/* Category tabs */
.vt-cat-tabs { display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:16px;-webkit-overflow-scrolling:touch; }
.vt-cat-tabs::-webkit-scrollbar { height:0; }
.vt-cat-tab { white-space:nowrap;padding:7px 14px;border-radius:20px;border:1px solid #334155;background:#1e293b;color:#94a3b8;font-size:13px;cursor:pointer;flex-shrink:0;transition:all .2s; }
.vt-cat-tab.active { background:#0d9488;color:#fff;border-color:#0d9488; }
.vt-cat-tab:hover { color:#e2e8f0; }

/* Video grid */
.vt-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px; }

/* Video card */
.vt-card { background:#1e293b;border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1px solid #334155; }
.vt-card:hover { transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.3); }
.vt-card-thumb { height:130px;background:#0f172a;background-size:cover;background-position:center;position:relative;display:flex;align-items:center;justify-content:center; }
.vt-card-play-icon { font-size:32px;color:rgba(255,255,255,0.4); }
.vt-card-dur { position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,0.7);color:#fff;font-size:11px;padding:2px 6px;border-radius:4px; }
.vt-card-body { padding:12px; }
.vt-card-title { font-size:14px;font-weight:700;color:#e2e8f0;margin-bottom:6px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.vt-card-badge { display:inline-block;font-size:11px;color:#94a3b8;background:#0f172a;padding:2px 8px;border-radius:6px; }
.vt-card-progress { height:3px;background:#334155;border-radius:2px;margin-top:8px;overflow:hidden; }
.vt-card-progress-fill { height:100%;background:#14b8a6;border-radius:2px;transition:width .3s; }

/* Player overlay */
.vt-player-overlay { position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center; }
.vt-player-container { width:100%;max-width:900px;padding:20px;position:relative; }
.vt-player-close { position:absolute;top:-10px;right:0;background:none;border:none;color:#fff;font-size:32px;cursor:pointer;z-index:2;padding:8px; }
.vt-player-close:hover { color:#f87171; }
.vt-player-wrap { position:relative;border-radius:12px;overflow:hidden;background:#000; }
.vt-player-wrap video { width:100%;display:block;border-radius:12px; }
.vt-player-title { color:#e2e8f0;font-size:16px;font-weight:700;margin-top:14px;text-align:center; }

/* Watermarks */
.vt-watermark-br { position:absolute;bottom:42px;right:14px;color:rgba(255,255,255,0.35);font-size:18px;font-weight:900;letter-spacing:3px;pointer-events:none;user-select:none;z-index:3;text-shadow:1px 1px 2px rgba(0,0,0,0.3); }
.vt-watermark-center { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-25deg);color:rgba(255,255,255,0.06);font-size:80px;font-weight:900;letter-spacing:12px;pointer-events:none;user-select:none;z-index:3;white-space:nowrap; }

/* Mobile */
@media(max-width:600px) {
  .vt-grid { grid-template-columns:1fr; }
  .vt-paywall-card { padding:28px 18px; }
  .vt-price-amount { font-size:34px; }
  .vt-watermark-center { font-size:50px;letter-spacing:8px; }
  .vt-player-container { padding:10px; }
  .vt-bubble-grid { grid-template-columns:repeat(2,1fr) !important; }
  .vt-series-header { flex-wrap:wrap; }
}
@media(max-width:380px) {
  .vt-bubble-grid { grid-template-columns:1fr !important; }
}

/* === VIDEO TUTORIAL BUBBLE SYSTEM === */
.vt-series-stats { display:flex;gap:10px;padding:0 16px 12px;justify-content:center; }
.vt-global-stat { flex:1;background:linear-gradient(135deg,#1e3a5f,#0f172a);border-radius:12px;padding:14px 10px;text-align:center; }
.vt-global-stat-val { color:#e2e8f0;font-size:20px;font-weight:800; }
.vt-global-stat-label { color:#64748b;font-size:11px;margin-top:2px; }

.vt-bubble-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding:0 16px 20px; }
.vt-bubble-card { background:#1e293b;border-radius:14px;padding:20px;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1px solid #334155; }
.vt-bubble-card:hover { transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.3);border-color:#475569; }
.vt-bubble-emoji { font-size:36px;margin-bottom:8px; }
.vt-bubble-name { color:#e2e8f0;font-size:16px;font-weight:700;margin-bottom:4px; }
.vt-bubble-meta { color:#64748b;font-size:13px;margin-bottom:10px; }
.vt-bubble-progress-bar { background:#0f172a;border-radius:4px;height:6px;overflow:hidden; }
.vt-bubble-progress-fill { height:100%;border-radius:4px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);transition:width .3s; }
.vt-bubble-cert { font-size:12px;font-weight:600;margin-top:10px;padding:4px 0; }
.vt-bubble-cert--earned { color:#10b981; }
.vt-bubble-cert--progress { color:#3b82f6; }
.vt-bubble-cert--locked { color:#475569; }

.vt-series-header { display:flex;align-items:center;gap:10px;padding:0 16px 14px; }
.vt-series-progress-card { background:#1e293b;border-radius:14px;padding:18px;margin:0 16px 16px;border:1px solid #334155; }
.vt-series-list { padding:0 16px 16px; }
.vt-list-item { display:flex;align-items:flex-start;gap:12px;background:#1e293b;border-radius:12px;padding:14px;margin-bottom:8px;border:1px solid #334155;transition:border-color .2s; }
.vt-list-item:hover { border-color:#475569; }
.vt-list-status { min-width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:bold;flex-shrink:0; }
.vt-list-status--pending { background:#0f172a;border:2px solid #334155;color:#94a3b8; }
.vt-list-status--done { background:#064e3b;border:2px solid #10b981;color:#10b981; }
.vt-list-status--locked { background:#1c1917;border:2px solid #44403c;color:#78716c;font-size:14px; }
.vt-list-item-body { flex:1;min-width:0; }
.vt-list-item-title { color:#e2e8f0;font-size:14px;font-weight:600;margin-bottom:4px; }
.vt-list-quiz { padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600; }
.vt-list-quiz--passed { background:#065f46;color:#6ee7b7; }
.vt-list-quiz--pending { background:#1e3a5f;color:#93c5fd; }
.vt-series-cert { text-align:center;padding:24px 16px;margin:0 16px 20px;border-radius:14px; }
.vt-series-cert--earned { background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #FFD700; }
.vt-series-cert--locked { background:#0f172a;border:1px solid #1e293b; }

/* === STICKY NAV BARS === */
.sticky-nav-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 8px 15px;
  display: flex;
  align-items: center;
}
.sticky-nav-bar--light {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.sticky-nav-bar--light .nav-bar-title {
  margin-left: 12px;
  font-weight: 700;
  color: #1e293b;
  font-size: 15px;
}
.sticky-nav-bar--dark {
  background: #0a1628;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 10px 15px;
}
.sticky-nav-bar--dark .nav-bar-title {
  margin-left: 12px;
  font-weight: 700;
  color: #f0f4fa;
  font-size: 15px;
}
.sticky-nav-bar--gradient {
  justify-content: space-between;
  border-bottom: 2px solid rgba(255,255,255,0.2);
}
.sticky-nav-bar--gradient .nav-bar-title {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}
.btn-nav-back {
  background: #e2e8f0;
  border: none;
  color: #1e293b;
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
}
.btn-nav-back--dark {
  background: rgba(255,255,255,0.15);
  color: #f0f4fa;
}
.btn-nav-back--transparent {
  background: rgba(255,255,255,0.2);
  color: #fff;
}