:root{
  --bg:#0a0e1a;--bg-2:#0e1426;--surface:#121a2e;--surface-2:#172238;--line:#243150;
  --txt:#eaf0ff;--muted:#8a96b3;--cyan:#22d3ee;--blue:#3b82f6;--green:#34f5a0;--rose:#ff3d6e;--gold:#ffb627;--violet:#a855f7;
  --glow-c:rgba(34,211,238,.30);--glow-g:rgba(52,245,160,.25);--glow-r:rgba(255,61,110,.22);
  --shadow:0 10px 40px rgba(0,0,0,.5);--radius:18px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
html[data-theme="light"]{
  --bg:#eef2fb;--bg-2:#e7ecf8;--surface:#fff;--surface-2:#f3f6fd;--line:#d8e0f0;--txt:#0f1830;--muted:#5d6b88;
  --cyan:#0891b2;--blue:#2563eb;--green:#059669;--rose:#e11d48;--gold:#d97706;--violet:#7c3aed;
  --glow-c:rgba(8,145,178,.18);--glow-g:rgba(5,150,105,.16);--glow-r:rgba(225,29,72,.14);--shadow:0 8px 28px rgba(30,50,90,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{background:radial-gradient(1200px 600px at 80% -10%,var(--glow-c),transparent 60%),radial-gradient(900px 500px at -10% 100%,var(--glow-r),transparent 55%),var(--bg);
  color:var(--txt);font-family:"Rajdhani","Segoe UI",system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.45;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
h1,h2,h3{font-family:"Orbitron",sans-serif;letter-spacing:.5px;margin:0 0 .4em}
h2{font-size:1.22rem}h3{font-size:1rem}
button{font-family:inherit;cursor:pointer;border:none;color:inherit}
.hidden{display:none!important}
code{background:var(--surface-2);padding:1px 5px;border-radius:5px;font-size:.85em}
ol,ul{margin:.3em 0}
#app{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding-top:var(--safe-t)}
main{flex:1;padding:14px 16px 116px;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hud{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:6px;padding:calc(var(--safe-t) + 10px) 10px 10px;background:linear-gradient(180deg,var(--bg),transparent);backdrop-filter:blur(10px);max-width:100vw;box-sizing:border-box}
.brand{margin-right:auto;display:flex;align-items:center;gap:8px;font-family:"Orbitron";font-weight:900;font-size:1.05rem;white-space:nowrap;letter-spacing:.5px;min-width:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}
.brand-ico{width:30px;height:30px;border-radius:7px;flex-shrink:0}
.brand-text,.brand-omnyx,.brand-speak{background:linear-gradient(90deg,var(--cyan),var(--blue) 60%,var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hud-chip{display:flex;align-items:center;gap:4px;font-family:"Orbitron";font-weight:700;font-size:.85rem;background:var(--surface);border:1px solid var(--line);padding:8px 12px;border-radius:999px;flex-shrink:0;white-space:nowrap}
.hud-chip.streak{color:var(--gold)}.hud-chip.xp{color:var(--cyan)}.hud-chip.lvl{color:var(--green)}
.icon-btn{width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
@media (max-width:480px){
  .brand{font-size:.85rem;gap:6px}
  .brand-ico{width:26px;height:26px}
  .hud-chip{font-size:.7rem;padding:4px 8px;gap:2px}
  .icon-btn{width:36px;height:36px;font-size:1rem}
  .hud{padding:calc(var(--safe-t) + 8px) 6px 8px;gap:4px}
}
@media (max-width:380px){
  .brand{font-size:.78rem;gap:4px}
  .brand-ico{width:24px;height:24px}
  .hud-chip{font-size:.66rem;padding:3px 6px}
  .icon-btn{width:32px;height:32px;font-size:.9rem}
}
@media (max-width:320px){
  .brand-text{display:none} /* solo en móviles MUY estrechos (<320px) */
}
.card{background:linear-gradient(160deg,var(--surface),var(--bg-2));border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:0 0 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.eyebrow{font-family:"Orbitron";font-size:.66rem;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);margin-bottom:6px;display:block}
.muted{color:var(--muted)}.center{text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;width:100%;padding:14px 18px;border-radius:14px;font-weight:700;font-size:1.02rem;letter-spacing:.4px;transition:transform .12s,box-shadow .2s,background .2s;background:linear-gradient(120deg,var(--cyan),var(--blue));color:#04121a;box-shadow:0 6px 22px var(--glow-c)}
html[data-theme="light"] .btn{color:#fff}
html[data-theme="light"] .btn.ghost{color:var(--txt)}
html[data-theme="light"] .btn.gold{color:#1a0f00}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--surface-2);color:var(--txt);border:1px solid var(--line);box-shadow:none}
.btn.gold{background:linear-gradient(120deg,var(--gold),#ff8a3d);color:#1a0f00}
.btn.sm{min-height:44px;font-size:.92rem;width:auto;padding:10px 16px}
.btn:disabled{opacity:.45;box-shadow:none}
#onboard{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px;overflow-y:auto}
#auth{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px;overflow-y:auto}
#auth-inner{width:100%;max-width:460px;text-align:center}
#auth-ico{width:96px;height:96px;border-radius:22px;display:block;margin:0 auto 12px;box-shadow:0 8px 28px rgba(0,240,255,.18)}
#auth-title{font-family:"Orbitron";font-weight:900;font-size:1.8rem;letter-spacing:1px;line-height:1}
#auth-mode-tabs button.active{background:var(--surface);color:var(--cyan)}
#auth-msg.err{color:var(--rose)} #auth-msg.ok{color:var(--green)}
#ob-content{width:100%;max-width:540px;margin:0 auto}
.logo-xl{font-family:"Orbitron";font-weight:900;font-size:2.1rem;text-align:center;line-height:1.05;background:linear-gradient(90deg,var(--cyan),var(--blue) 55%,var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{text-align:center;color:var(--muted);margin:6px 0 22px;font-size:.95rem}
.progress-rail{height:6px;background:var(--surface);border-radius:99px;overflow:hidden;margin-bottom:16px}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--green));border-radius:99px;transition:width .4s}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:56px;padding:13px 16px;margin:0 0 10px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--txt);font-size:1rem;font-weight:600;transition:.15s}
.opt:active{transform:scale(.985)}
.opt.correct{border-color:var(--green);background:var(--glow-g)}
.opt.wrong{border-color:var(--rose);background:var(--glow-r)}
.opt .key{font-family:"Orbitron";font-size:.78rem;color:var(--cyan);border:1px solid var(--line);border-radius:8px;padding:2px 8px;flex:none}
.explain{border-left:3px solid var(--rose);background:var(--glow-r);padding:12px 14px;border-radius:0 12px 12px 0;margin:12px 0;animation:fade .3s}
.explain.ok{border-left-color:var(--green);background:var(--glow-g)}
.explain b{color:var(--cyan)}
nav.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;max-width:560px;margin:0 auto;background:var(--surface);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:8px 2px calc(8px + var(--safe-b))}
nav.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;padding:7px 0;border-radius:12px;color:var(--muted);font-size:.64rem;font-weight:700;letter-spacing:.1px;font-family:"Orbitron";min-height:50px;transition:.15s;min-width:0}
nav.tabbar button .ic{font-size:1.15rem;line-height:1}
nav.tabbar button .tlabel{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav.tabbar button.active{color:var(--cyan)}
nav.tabbar button.active .ic{filter:drop-shadow(0 0 8px var(--glow-c));transform:translateY(-1px)}
/* El tutorial destaca el propio botón: se mantiene alineado en móvil, escritorio y al
   cambiar el tamaño de la barra, sin una capa fija calculada con coordenadas antiguas. */
nav.tabbar button.tour-target{position:relative;z-index:1;outline:3px solid var(--cyan);outline-offset:2px;box-shadow:0 0 0 4px var(--glow-c),0 0 20px var(--glow-c)}
@media (prefers-reduced-motion:no-preference){nav.tabbar button.tour-target{animation:tourTargetPulse 1.6s ease-in-out infinite}}
@keyframes tourTargetPulse{0%,100%{outline-color:var(--cyan)}50%{outline-color:var(--blue)}}
@media (max-width:380px){
  nav.tabbar button{font-size:.58rem;padding:6px 0;min-height:46px}
  nav.tabbar button .ic{font-size:1.05rem}
}
.pill{display:inline-block;font-family:"Orbitron";font-size:.66rem;letter-spacing:1px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);color:var(--cyan);background:var(--surface);margin:0 6px 6px 0}
.pill.rose{color:var(--rose)}.pill.gold{color:var(--gold)}.pill.green{color:var(--green)}.pill.violet{color:var(--violet)}
.field{width:100%;min-height:54px;padding:13px 16px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);color:var(--txt);font-size:1rem;font-family:inherit}
.field:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px var(--glow-c)}
select.field{min-height:48px}
textarea.field{resize:vertical;min-height:90px;line-height:1.4}
.tokens{display:flex;flex-wrap:wrap;gap:8px;min-height:54px;padding:10px;border:1px dashed var(--line);border-radius:14px;margin-bottom:12px;background:var(--bg-2)}
.bank{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tok{padding:9px 14px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);font-weight:600}
.tok:active{transform:scale(.95)}
.meter{height:14px;border-radius:99px;background:var(--surface);overflow:hidden;border:1px solid var(--line);margin:10px 0}
.meter>i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--rose),var(--gold) 50%,var(--green));transition:width .5s}
.mic-btn{width:80px;height:80px;border-radius:50%;margin:6px auto;display:flex;align-items:center;justify-content:center;font-size:1.9rem;background:var(--surface-2);border:2px solid var(--cyan);box-shadow:0 0 22px var(--glow-c)}
.mic-btn.rec{border-color:var(--rose);animation:pulse 1.1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--glow-r)}70%{box-shadow:0 0 0 20px transparent}100%{box-shadow:0 0 0 0 transparent}}
.bubble{max-width:88%;padding:11px 14px;border-radius:16px;margin:0 0 10px;font-size:.98rem;line-height:1.35}
.bubble.npc{background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:5px}
.bubble.me{background:var(--glow-c);border:1px solid var(--cyan);margin-left:auto;border-bottom-right-radius:5px}
.bubble small{display:block;color:var(--muted);font-size:.74rem;margin-top:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center}
.stat .n{font-family:"Orbitron";font-size:1.7rem;font-weight:900}
.stat .l{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.stat.cyan .n{color:var(--cyan)}.stat.gold .n{color:var(--gold)}.stat.green .n{color:var(--green)}.stat.rose .n{color:var(--rose)}
canvas{width:100%;height:auto;display:block;border-radius:12px}
.res{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.res:last-child{border-bottom:none}.res .ic{font-size:1.3rem}
.res a{color:var(--cyan);text-decoration:none;font-weight:700}.res .d{font-size:.84rem;color:var(--muted)}
.ring{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--green) var(--p,0%),var(--surface) 0)}
.ring>div{width:74px;height:74px;border-radius:50%;background:var(--bg-2);display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .n{font-family:"Orbitron";font-weight:900;font-size:1.15rem;color:var(--green)}
.ring .l{font-size:.58rem;color:var(--muted);letter-spacing:1px}
.flip{perspective:1000px;height:190px;margin:6px 0 14px}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d;cursor:pointer}
.flip.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;text-align:center;background:var(--surface)}
.flip-face .big{font-family:"Orbitron";font-size:1.6rem;margin-bottom:6px}
.flip-back{transform:rotateY(180deg);background:linear-gradient(160deg,var(--surface-2),var(--bg-2))}
.task{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;margin-bottom:9px;background:var(--surface)}
.task.done{opacity:.62}
.task .chk{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--green)}
.task.done .chk{border-color:var(--green);background:var(--glow-g)}
.task .t{flex:1;font-weight:600;font-size:.95rem}
.task .m{font-family:"Orbitron";font-size:.7rem;color:var(--muted)}
.task .go{font-size:1.1rem;color:var(--cyan);background:none}
.timerbar{position:sticky;top:54px;z-index:25;display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--cyan);border-radius:14px;padding:10px 14px;margin-bottom:12px;box-shadow:0 0 20px var(--glow-c)}
.timerbar .tt{font-family:"Orbitron";font-size:1.3rem;color:var(--cyan)}
.list-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:56px;padding:12px 16px;margin:0 0 10px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--txt);font-weight:600}
.list-btn.done{opacity:.62;border-color:var(--green)}
.list-btn.done .k{color:var(--green)}
.list-btn.done .d{color:var(--green)}
.list-btn .k{font-family:"Orbitron";font-size:.8rem;color:var(--cyan)}
.list-btn .d{font-size:.78rem;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%) translateY(20px);background:var(--surface-2);border:1px solid var(--cyan);color:var(--txt);padding:12px 18px;border-radius:14px;font-weight:700;z-index:80;opacity:0;box-shadow:0 0 24px var(--glow-c);transition:.3s;pointer-events:none;max-width:90%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.row{display:flex;gap:10px;align-items:center}.row.wrap{flex-wrap:wrap}.spacer{height:8px}
.tts-row{display:flex;gap:10px;align-items:center;margin:6px 0}
input[type=range]{accent-color:var(--cyan);flex:1}
details summary{cursor:pointer;font-weight:700;color:var(--cyan);list-style:none;padding:6px 0}
details summary::-webkit-details-marker{display:none}
.badge-correct{color:var(--green)}
/* === RESPONSIVE BREAKPOINTS ===
   default <= mobile pequeño (<380px) optimizado arriba
   480-679 = mobile estándar
   680-999 = tablet
   1000+ = desktop */
@media (min-width:480px){
  .brand{font-size:1.15rem}
  nav.tabbar button{font-size:.58rem}
}
@media (min-width:680px){
  body{font-size:17px}
  #app,nav.tabbar{max-width:680px}
  main{padding:20px 22px 124px}
  .logo-xl{font-size:2.5rem}
  .hud{max-width:680px;margin:0 auto;padding:calc(var(--safe-t) + 12px) 18px 12px}
  nav.tabbar button{font-size:.62rem;min-height:54px}
  nav.tabbar button .ic{font-size:1.25rem}
  .card{padding:20px}
}
@media (min-width:1000px){
  body{font-size:18px}
  #app,nav.tabbar{max-width:900px}
  main{padding:26px 34px 132px}
  .grid2{grid-template-columns:repeat(4,1fr)}
  .hud{max-width:900px;padding:calc(var(--safe-t) + 14px) 24px 14px}
  nav.tabbar{padding:10px 8px calc(10px + var(--safe-b))}
}
.confetti-piece{position:fixed;top:-20px;font-size:1.4rem;z-index:200;pointer-events:none;animation:confetti-fall 1.1s ease-in forwards}
@keyframes confetti-fall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(90vh) rotate(360deg);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =====================================================================
   SPEAK UI 2026 — adaptive Liquid Glass layer
   - Liquid Glass is reserved for navigation/controls.
   - Content cards use quieter standard translucent materials.
   - Desktop is a true 3-column workspace, not a stretched phone.
   ===================================================================== */
:root{
  --bg:#0b0d12;--bg-2:#12151d;--surface:rgba(29,32,42,.72);--surface-2:rgba(38,42,54,.68);
  --line:rgba(255,255,255,.105);--txt:#f5f7fb;--muted:#a4abba;
  --cyan:#64d2ff;--blue:#0a84ff;--green:#30d158;--rose:#ff375f;--gold:#ffd60a;--violet:#bf5af2;
  --glow-c:rgba(10,132,255,.22);--glow-g:rgba(48,209,88,.16);--glow-r:rgba(255,55,95,.16);
  --shadow:0 18px 52px rgba(0,0,0,.28);--radius:26px;
  --glass:rgba(24,27,35,.64);--glass-strong:rgba(34,38,50,.78);--glass-line:rgba(255,255,255,.14);
  --glass-highlight:rgba(255,255,255,.16);--control-shadow:0 10px 30px rgba(0,0,0,.20);
}
html[data-theme="light"]{
  --bg:#f2f2f7;--bg-2:#e9eaf0;--surface:rgba(255,255,255,.70);--surface-2:rgba(247,248,252,.76);
  --line:rgba(20,27,42,.10);--txt:#111318;--muted:#6f7682;--cyan:#007aff;--blue:#0066e6;--green:#20a64a;--rose:#e62f54;--gold:#c98c00;--violet:#9250d5;
  --glow-c:rgba(0,122,255,.15);--glow-g:rgba(32,166,74,.12);--glow-r:rgba(230,47,84,.11);--shadow:0 18px 50px rgba(60,65,85,.12);
  --glass:rgba(249,250,253,.68);--glass-strong:rgba(255,255,255,.82);--glass-line:rgba(255,255,255,.76);--glass-highlight:rgba(255,255,255,.92);
  --control-shadow:0 10px 28px rgba(54,64,92,.12);
}
html{background:var(--bg);scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 560px at 16% -12%,rgba(10,132,255,.18),transparent 62%),
    radial-gradient(760px 520px at 96% 12%,rgba(191,90,242,.12),transparent 60%),
    radial-gradient(780px 560px at 40% 110%,rgba(48,209,88,.08),transparent 62%),var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  font-size:16px;letter-spacing:-.006em;overscroll-behavior-y:none;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(120deg,rgba(255,255,255,.025),transparent 28%,rgba(255,255,255,.018) 62%,transparent)}
h1,h2,h3{font-family:inherit;letter-spacing:-.025em;font-weight:750}
h2{font-size:1.28rem}h3{font-size:1.02rem}
button,input,textarea,select{font-family:inherit}
.stat .n,.stat .l,.ring .n,.ring .l,.flip-face .big,.task .m,.timerbar .tt,.list-btn .k,.opt .key{font-family:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 62%,transparent);outline-offset:3px}
::selection{background:rgba(10,132,255,.28)}

/* Standard material for content */
.card{
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,white 6%),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);
}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--glass-highlight),transparent);opacity:.68;pointer-events:none}
.eyebrow{font-family:inherit;font-weight:760;font-size:.68rem;letter-spacing:.12em;color:var(--blue)}
.muted{color:var(--muted)}

/* Liquid controls */
.hud,nav.tabbar,.icon-btn,.hud-chip,.btn.ghost,.desktop-glass-card{
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
}
.hud{
  margin:8px 10px 0;padding:9px 10px;top:calc(var(--safe-t) + 4px);border:1px solid var(--glass-line);border-radius:24px;
  background:linear-gradient(135deg,var(--glass-strong),var(--glass));box-shadow:var(--control-shadow);overflow:visible;
}
.brand{font-family:inherit;font-weight:820;letter-spacing:-.03em}.brand-ico{border-radius:9px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.brand-text,.brand-omnyx,.brand-speak{background:linear-gradient(90deg,#8be6ff,var(--blue) 55%,#ca8cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hud-chip{font-family:inherit;font-size:.78rem;background:rgba(255,255,255,.065);border-color:var(--line);padding:7px 10px;box-shadow:inset 0 1px rgba(255,255,255,.06)}
.icon-btn{width:42px;height:42px;border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.055));border:1px solid var(--glass-line);box-shadow:inset 0 1px rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.10);transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s}
.icon-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.13)}.icon-btn:active{transform:scale(.94)}
.btn{min-height:50px;border-radius:17px;font-size:.98rem;letter-spacing:-.005em;font-weight:720;background:linear-gradient(180deg,#69d8ff 0%,#0a84ff 92%);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.35),0 9px 26px rgba(10,132,255,.25);transition:transform .18s cubic-bezier(.2,.8,.2,1),filter .2s,box-shadow .2s}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}.btn:active{transform:scale(.975)}
.btn.ghost{background:linear-gradient(145deg,rgba(255,255,255,.115),rgba(255,255,255,.052));color:var(--txt);border:1px solid var(--glass-line);box-shadow:inset 0 1px rgba(255,255,255,.10),0 7px 20px rgba(0,0,0,.08)}
.btn.gold{background:linear-gradient(180deg,#ffe766,#ffb90a);color:#2b2100}
.btn.sm{min-height:42px;border-radius:14px;padding:9px 14px}
.field{min-height:50px;border-radius:16px;background:color-mix(in srgb,var(--surface-2) 90%,transparent);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border .2s,box-shadow .2s,background .2s}
.field:focus{border-color:rgba(10,132,255,.55);box-shadow:0 0 0 4px rgba(10,132,255,.12);background:var(--surface-2)}
.opt,.list-btn,.task,.stat{border-radius:18px;background:color-mix(in srgb,var(--surface) 92%,transparent);border-color:var(--line);box-shadow:inset 0 1px rgba(255,255,255,.035)}
.opt:hover,.list-btn:hover,.task:hover{background:color-mix(in srgb,var(--surface-2) 95%,transparent)}
.pill{font-family:inherit;font-weight:700;letter-spacing:.03em;background:rgba(255,255,255,.055);border-color:var(--line)}
.ring{background:conic-gradient(var(--blue) var(--p,0%),rgba(255,255,255,.08) 0);box-shadow:inset 0 0 0 1px var(--line),0 8px 28px rgba(10,132,255,.12)}
.ring>div{background:var(--bg-2)}
.timerbar{top:82px;border:1px solid rgba(100,210,255,.34);border-radius:20px;background:var(--glass-strong);box-shadow:var(--control-shadow);backdrop-filter:blur(24px) saturate(170%)}
.flip-face{border-radius:24px;background:var(--surface);backdrop-filter:blur(15px)}
.bubble{border-radius:20px}.bubble.npc{background:var(--surface-2)}.bubble.me{background:rgba(10,132,255,.16);border-color:rgba(100,210,255,.35)}
.toast{bottom:calc(102px + var(--safe-b));background:var(--glass-strong);border-color:var(--glass-line);border-radius:18px;backdrop-filter:blur(28px) saturate(180%);box-shadow:var(--control-shadow)}

/* Mobile tab bar: floating Liquid Glass capsule */
nav.tabbar{
  left:10px;right:10px;bottom:calc(8px + var(--safe-b));width:auto;max-width:540px;border:1px solid var(--glass-line);border-radius:28px;padding:6px 5px;
  background:linear-gradient(145deg,var(--glass-strong),var(--glass));box-shadow:0 18px 44px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.12);
}
nav.tabbar button{font-family:inherit;font-weight:720;letter-spacing:-.015em;border-radius:19px;min-height:54px;transition:all .22s cubic-bezier(.2,.8,.2,1)}
nav.tabbar button .ic{font-size:1.18rem;transition:transform .2s}
nav.tabbar button.active{color:var(--txt);background:rgba(255,255,255,.105);box-shadow:inset 0 1px rgba(255,255,255,.11),0 5px 14px rgba(0,0,0,.08)}
nav.tabbar button.active .ic{filter:none;transform:translateY(-1px) scale(1.06)}
.desktop-nav-brand,.desktop-nav-kicker,.desktop-nav-foot,.desktop-panel{display:none}
main{padding:16px 16px 116px}
#app{max-width:580px}

/* Auth/onboarding get a calmer Apple-style canvas */
#auth,#onboard{background:radial-gradient(650px 420px at 50% 10%,rgba(10,132,255,.16),transparent 66%),var(--bg)}
#auth-ico{border-radius:25px;box-shadow:0 20px 55px rgba(10,132,255,.18)}
#auth-title,.logo-xl{font-family:inherit;letter-spacing:-.045em;font-weight:850;background:linear-gradient(90deg,#85e3ff,#0a84ff 55%,#c986ff);-webkit-background-clip:text;background-clip:text;color:transparent}
#auth-mode-tabs{background:rgba(255,255,255,.04);padding:4px!important;border-radius:16px!important}
#auth-mode-tabs .btn{min-height:44px!important;border-radius:12px!important}

/* Real desktop workspace */
@media (min-width:1000px){
  body{font-size:16px;overflow-x:hidden}
  #app{
    max-width:none;width:100%;min-height:100vh;margin:0;display:grid;
    grid-template-columns:222px minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"nav hud" "nav main";
    column-gap:0;padding:0;
  }
  .desktop-nav-brand,.desktop-nav-kicker,.desktop-nav-foot{display:flex}
  .hud{grid-area:hud;position:sticky;top:0;z-index:35;margin:0;padding:18px clamp(24px,3vw,44px) 12px;justify-content:flex-end;border:0;border-radius:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 88%,transparent) 0%,color-mix(in srgb,var(--bg) 68%,transparent) 72%,transparent);box-shadow:none;backdrop-filter:blur(20px) saturate(150%)}
  .hud .brand{display:none}
  .hud-chip{padding:8px 12px}.hud .icon-btn{border-radius:14px}
  main{grid-area:main;max-width:1040px;width:100%;padding:20px clamp(24px,3vw,44px) 56px;margin:0 auto;min-width:0}
  nav.tabbar{
    grid-area:nav;position:sticky;top:0;left:auto;right:auto;bottom:auto;z-index:45;width:222px;height:100vh;max-width:none;margin:0;padding:18px 12px 16px;border:0;border-right:1px solid var(--line);border-radius:0;
    background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 78%,transparent),color-mix(in srgb,var(--bg) 90%,transparent));box-shadow:10px 0 36px rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:stretch;gap:4px;
  }
  nav.tabbar button{flex:none;width:100%;min-height:48px;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:8px;padding:7px 11px;border-radius:15px;font-size:.88rem;text-align:left;color:var(--muted)}
  nav.tabbar button .ic{font-size:1.06rem;width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.045)}
  nav.tabbar button .tlabel{font-size:.86rem;white-space:nowrap;text-align:left}
  nav.tabbar button.active{color:var(--txt);background:linear-gradient(145deg,rgba(10,132,255,.17),rgba(100,210,255,.075));box-shadow:inset 0 1px rgba(255,255,255,.08)}
  nav.tabbar button.active .ic{background:linear-gradient(145deg,rgba(100,210,255,.20),rgba(10,132,255,.13))}
  .desktop-nav-brand{align-items:center;gap:10px;padding:4px 8px 18px;margin-bottom:8px;border-bottom:1px solid var(--line)}
  .desktop-nav-logo{width:42px;height:42px;border-radius:13px;box-shadow:0 9px 22px rgba(10,132,255,.20)}
  .desktop-nav-brand strong{display:block;font-size:1.08rem;font-weight:850;letter-spacing:-.035em}.desktop-nav-brand small{display:block;color:var(--muted);font-size:.67rem;margin-top:1px}
  .desktop-nav-kicker{font-size:.61rem;color:var(--muted);font-weight:800;letter-spacing:.14em;padding:7px 11px 3px}
  .desktop-nav-foot{margin-top:auto;padding:14px 9px 4px;border-top:1px solid var(--line);align-items:center;gap:7px;color:var(--muted);font-size:.67rem;line-height:1.2}
  .desktop-online-dot{width:7px;height:7px;border-radius:99px;background:var(--green);box-shadow:0 0 10px rgba(48,209,88,.55);flex:none}
  .grid2{grid-template-columns:repeat(4,minmax(0,1fr))}
  .card{padding:22px;border-radius:27px}
  .row.wrap>.btn:not(.sm){width:auto;min-width:190px;flex:1}
  .toast{bottom:34px}
  .timerbar{top:80px}
}
@media (min-width:1280px){
  #app{grid-template-columns:226px minmax(620px,1fr) 310px;grid-template-areas:"nav hud aside" "nav main aside"}
  nav.tabbar{width:226px}
  .desktop-panel{grid-area:aside;display:flex;position:sticky;top:0;height:100vh;overflow:auto;flex-direction:column;gap:14px;padding:24px 18px;border-left:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 55%,transparent),color-mix(in srgb,var(--bg) 84%,transparent))}
  .desktop-glass-card{position:relative;background:linear-gradient(145deg,var(--glass-strong),var(--glass));border:1px solid var(--glass-line);border-radius:25px;padding:17px;box-shadow:var(--control-shadow);overflow:hidden}
  .desktop-glass-card::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--glass-highlight),transparent)}
  .desktop-kicker{display:block;color:var(--muted);font-size:.60rem;font-weight:850;letter-spacing:.14em;margin-bottom:12px}
  .desktop-profile-row{display:flex;align-items:center;gap:11px}.desktop-avatar{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:1.45rem;background:rgba(255,255,255,.08);border:1px solid var(--line)}
  .desktop-profile-copy{min-width:0}.desktop-profile-copy strong{display:block;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-profile-copy span{display:block;font-size:.74rem;color:var(--muted);margin-top:2px}
  .desktop-goal-head{display:flex;justify-content:space-between;gap:8px;margin-top:17px;font-size:.72rem;color:var(--muted)}.desktop-goal-head strong{color:var(--txt);font-weight:760}
  .desktop-goal-track{height:8px;border-radius:99px;background:rgba(255,255,255,.065);overflow:hidden;margin-top:7px;border:1px solid var(--line)}.desktop-goal-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 16px rgba(100,210,255,.38);transition:width .35s ease}
  .desktop-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}.desktop-mini-stats div{padding:8px 4px;border-radius:13px;background:rgba(255,255,255,.045);text-align:center;border:1px solid var(--line)}.desktop-mini-stats strong{display:block;font-size:.88rem}.desktop-mini-stats span{display:block;color:var(--muted);font-size:.56rem;margin-top:2px;white-space:nowrap}
  .desktop-quick{width:100%;display:grid;grid-template-columns:34px 1fr 14px;align-items:center;gap:9px;padding:10px 8px;background:transparent;border-radius:14px;text-align:left;color:var(--txt);transition:background .16s,transform .16s}.desktop-quick:hover{background:rgba(255,255,255,.07);transform:translateX(2px)}.desktop-quick>span{font-size:1.1rem;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.055)}.desktop-quick strong{display:block;font-size:.78rem}.desktop-quick small{display:block;font-size:.64rem;color:var(--muted);margin-top:1px}.desktop-quick>b{font-size:1.1rem;color:var(--muted)}
  .desktop-hint{display:flex;gap:10px;padding:4px 3px;color:var(--muted);margin-top:auto}.desktop-hint>span{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.045);font-size:.75rem}.desktop-hint strong{display:block;color:var(--txt);font-size:.70rem}.desktop-hint small{display:block;font-size:.62rem;line-height:1.35;margin-top:2px}
  main{max-width:980px;padding-left:30px;padding-right:30px}
}
@media (min-width:1500px){#app{grid-template-columns:238px minmax(680px,1fr) 330px}nav.tabbar{width:238px}.desktop-panel{padding-left:22px;padding-right:22px}main{max-width:1080px;padding-left:40px;padding-right:40px}}

/* Perfil y herramientas de administración en una sola sección. */
.admin-panel{margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}
.admin-panel>summary{display:flex;align-items:center;gap:8px;font-size:1rem;padding:8px 4px}
.admin-panel-body{display:grid;gap:14px;margin-top:8px}
.admin-subsection{min-width:0;padding:14px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.025)}
.admin-subsection h3{font-size:1rem;margin-bottom:8px}
.admin-create-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.admin-create-grid label{display:grid;gap:5px;font-size:.78rem;color:var(--muted)}
.admin-create-grid .field{min-width:0}
.admin-ranking-group{border-top:1px solid var(--line);margin-top:8px;padding-top:7px}
.admin-member-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
.admin-member{display:flex;align-items:flex-start;gap:8px;padding:8px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2);font-size:.82rem;min-width:0}
.admin-member input{flex:none;margin-top:3px;accent-color:var(--blue)}
.admin-member span{min-width:0;overflow-wrap:anywhere}
.admin-member small{display:block;color:var(--muted);font-size:.7rem}
.ranking-mobile-toggle{display:none}
.ranking-desktop-card{display:block}
@media(max-width:999px){
  .ranking-mobile-toggle{display:block}
  .ranking-desktop-card{display:none}
}
@media(max-width:600px){
  .admin-create-grid,.admin-member-grid{grid-template-columns:1fr}
  .admin-subsection{padding:12px}
}
/* Mobile refinements */
@media (max-width:999px){
  #app{width:100%;margin:0 auto}
  .hud{max-width:calc(100vw - 20px)}
  main{width:100%}
  nav.tabbar .desktop-settings-nav{display:none}
}
@media (max-width:480px){
  body{font-size:16px}.hud{gap:5px}.brand{font-size:.92rem}.brand-ico{width:28px;height:28px}.hud-chip{font-size:.68rem;padding:6px 7px}.hud .icon-btn{width:36px;height:36px;border-radius:13px;font-size:1rem}
  .card{padding:17px;border-radius:23px}.btn{min-height:49px;border-radius:16px}.field{border-radius:15px}
  nav.tabbar{left:8px;right:8px;bottom:calc(7px + var(--safe-b));border-radius:25px;padding:5px 3px}
  nav.tabbar button{min-height:49px;border-radius:17px;font-size:.62rem;padding:5px 0}.toast{bottom:calc(94px + var(--safe-b))}
  main{padding:13px 13px 108px}
}
@media (max-width:370px){nav.tabbar button{font-size:.55rem}nav.tabbar button .ic{font-size:1.18rem}.hud-chip.lvl{display:none}}
@media (prefers-reduced-transparency:reduce){.hud,nav.tabbar,.desktop-glass-card,.btn.ghost,.icon-btn{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--surface)!important}.card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
#auth{background:radial-gradient(900px 520px at 50% -10%,rgba(91,115,255,.22),transparent 62%),radial-gradient(700px 420px at 5% 100%,rgba(70,205,210,.14),transparent 65%),var(--bg)}
#auth-inner{max-width:430px;padding:18px 8px}
#auth-ico{width:76px;height:76px;border-radius:23px;margin-bottom:18px;box-shadow:0 16px 48px rgba(34,211,238,.22)}
#auth-title{font-family:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:2rem;font-weight:760;letter-spacing:.08em}
#auth .tagline{font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;margin:10px 0 26px;letter-spacing:.01em}
#auth .card{font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif}
#auth .btn:not(.ghost){background:linear-gradient(135deg,#8297ff,#4a75ef);color:#fff;box-shadow:0 8px 28px rgba(80,113,241,.32)}
#auth .card{background:color-mix(in srgb,var(--surface) 77%,transparent)!important;border:1px solid color-mix(in srgb,var(--line) 72%,white 10%)!important;border-radius:30px!important;padding:22px!important;box-shadow:0 24px 80px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.1)!important;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
#auth-mode-tabs{padding:4px;border:1px solid var(--line)!important;border-radius:17px!important;background:color-mix(in srgb,var(--bg) 55%,transparent)}
#auth-mode-tabs button{min-height:44px;border-radius:13px!important;font-size:.84rem}
#auth-mode-tabs button.active{background:color-mix(in srgb,var(--surface) 75%,transparent)!important;box-shadow:0 2px 12px rgba(0,0,0,.12)}
#auth .field{border-radius:16px;background:color-mix(in srgb,var(--bg-2) 80%,transparent)}
#auth-submit{min-height:54px;border-radius:17px;letter-spacing:.01em}
#auth-msg{min-height:1.2em}
.mobile-settings-btn{display:none}
@media(max-width:999px){.mobile-settings-btn{display:flex}}
@media(max-width:380px){#auth{padding:16px}#auth .card{padding:17px!important}#auth-inner{padding:8px 0}}
.password-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:rgba(4,8,16,.66);backdrop-filter:blur(12px)}
.password-modal-card{width:min(100%,420px);padding:22px;border:1px solid var(--line);border-radius:25px;background:var(--surface);box-shadow:var(--shadow)}
.password-modal-card h3{margin-bottom:14px}.password-modal-card label{display:block;color:var(--muted);font-size:.86rem;margin-bottom:8px}.password-modal-card .row>*{flex:1}
.tutor-live-panel{position:relative;overflow:hidden;display:grid;justify-items:center;gap:10px;margin-top:6px;padding:clamp(22px,6vw,36px) clamp(16px,5vw,30px);border:1px solid color-mix(in srgb,var(--cyan) 32%,var(--line));border-radius:28px;background:radial-gradient(420px 240px at 50% 8%,color-mix(in srgb,var(--cyan) 15%,transparent),transparent 70%),var(--surface-2);text-align:center}
.live-stage{position:relative;display:grid;place-items:center;width:clamp(126px,36vw,176px);height:clamp(126px,36vw,176px);margin:1px auto 0}
.live-avatar{position:relative;z-index:1;display:grid;place-items:center;width:132px;height:132px;border:1px solid color-mix(in srgb,var(--cyan) 42%,var(--line));border-radius:42%;background:radial-gradient(circle at 32% 22%,color-mix(in srgb,var(--cyan) 22%,var(--surface)),color-mix(in srgb,var(--blue) 15%,var(--surface-2)) 70%);box-shadow:0 0 0 12px color-mix(in srgb,var(--cyan) 8%,transparent),0 0 48px color-mix(in srgb,var(--cyan) 28%,transparent),inset 0 1px 10px rgba(255,255,255,.2);transition:transform .25s,box-shadow .25s}
.live-avatar svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 7px 8px rgba(0,0,0,.2))}
.avatar-shoulders{fill:url(#omnyxJacket)}.avatar-shirt{fill:#f1fbff}.avatar-neck,.avatar-skin{fill:url(#omnyxSkin)}.avatar-face{fill:url(#omnyxSkin);stroke:rgba(126,72,53,.12);stroke-width:1}.avatar-hair{fill:url(#omnyxHair)}.avatar-brow,.avatar-nose{fill:none;stroke:#815943;stroke-width:2.5;stroke-linecap:round}.avatar-eye{fill:#26364e}.avatar-eye-glint{fill:#fff}.avatar-cheek{fill:#d87876;opacity:.2}.avatar-mouth-smile{fill:none;stroke:#9d514d;stroke-width:2.6;stroke-linecap:round;transition:opacity .12s}.avatar-mouth-open{fill:#8d4649;stroke:#f8b7aa;stroke-width:1.5;transform:scaleY(0);transform-origin:80px 103px}.avatar-jacket-detail{fill:none;stroke:#c6f8ff;stroke-width:2;stroke-linecap:round;opacity:.7}
.live-wave{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;pointer-events:none}
.live-wave i{display:block;width:5px;height:18px;border-radius:99px;background:color-mix(in srgb,var(--cyan) 66%,var(--blue));opacity:.55;transform:scaleY(.38);transition:height .2s,opacity .2s}
.live-wave i:nth-child(2n){height:30px}.live-wave i:nth-child(3n){height:42px}.live-wave i:nth-child(4n){height:23px}
.live-stage[data-state="listening"] .live-avatar{animation:live-breathe 2.2s ease-in-out infinite}
.live-stage[data-state="user"] .live-avatar{transform:scale(1.04);box-shadow:0 0 0 16px color-mix(in srgb,var(--cyan) 12%,transparent),0 0 62px color-mix(in srgb,var(--cyan) 40%,transparent),inset 0 1px 10px rgba(255,255,255,.4)}
.live-stage[data-state="user"] .live-wave i,.live-stage[data-state="assistant"] .live-wave i{opacity:.95;animation:live-wave .62s ease-in-out infinite alternate}
.live-stage[data-state="user"] .live-wave i:nth-child(2n),.live-stage[data-state="assistant"] .live-wave i:nth-child(2n){animation-delay:.18s}
.live-stage[data-state="user"] .live-wave i:nth-child(3n),.live-stage[data-state="assistant"] .live-wave i:nth-child(3n){animation-delay:.34s}
.live-stage[data-state="assistant"] .live-avatar{box-shadow:0 0 0 16px color-mix(in srgb,var(--violet) 12%,transparent),0 0 60px color-mix(in srgb,var(--violet) 38%,transparent),inset 0 1px 10px rgba(255,255,255,.4)}
.live-stage[data-state="assistant"] .avatar-mouth-smile{opacity:.15}
.live-stage[data-state="assistant"] .avatar-mouth-open{animation:avatar-talk .34s ease-in-out infinite alternate}
.live-stage[data-state="thinking"] .live-avatar{animation:live-think 1.15s ease-in-out infinite alternate}
.live-stage[data-state="error"] .live-avatar{filter:saturate(.4);box-shadow:0 0 0 12px rgba(255,80,100,.08),0 0 42px rgba(255,80,100,.16)}
.live-status{font-size:1rem;font-weight:760;letter-spacing:-.02em}
.live-caption{display:grid;place-items:center;min-height:64px;width:min(100%,480px);padding:12px 16px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface) 78%,transparent);color:var(--txt);font-size:clamp(.94rem,3.5vw,1.08rem);line-height:1.48;overflow-wrap:anywhere}
.live-hint,.live-privacy{max-width:470px;margin:0;color:var(--muted);font-size:.76rem;line-height:1.5}.live-privacy{font-size:.68rem;opacity:.82}
.live-end{width:100%;margin-top:9px}
@keyframes live-breathe{0%,100%{box-shadow:0 0 0 11px color-mix(in srgb,var(--cyan) 7%,transparent),0 0 38px color-mix(in srgb,var(--cyan) 23%,transparent),inset 0 1px 10px rgba(255,255,255,.2)}50%{box-shadow:0 0 0 17px color-mix(in srgb,var(--cyan) 11%,transparent),0 0 55px color-mix(in srgb,var(--cyan) 35%,transparent),inset 0 1px 10px rgba(255,255,255,.2)}}
@keyframes live-wave{from{transform:scaleY(.35)}to{transform:scaleY(1.2)}}
@keyframes live-think{from{transform:scale(.96);opacity:.78}to{transform:scale(1.03);opacity:1}}
@keyframes avatar-talk{from{transform:scaleY(.42)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.live-avatar,.live-wave i,.avatar-mouth-open{animation:none!important;transition:none!important}}
.pronunciation-feedback{border-left:3px solid var(--cyan);padding:8px 10px;border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--cyan) 9%,transparent)}
@media(max-width:430px){.tutor-mode-tabs{gap:4px!important;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.tutor-mode-tabs .btn{flex:1 0 auto!important;min-width:0;padding:6px 8px;font-size:.76rem;white-space:nowrap}}

/* Píldora flotante del temporizador (visible en todas las pantallas salvo Inicio) */
.timer-pill{position:fixed;top:calc(var(--safe-t,0px) + 64px);right:12px;z-index:45;display:flex;align-items:center;gap:6px;background:var(--surface-2,#1a1f2b);color:var(--cyan,#22d3ee);border:1px solid var(--cyan,#22d3ee);border-radius:999px;padding:6px 12px;font-weight:700;font-size:.82rem;font-variant-numeric:tabular-nums;box-shadow:0 0 14px var(--glow-c,rgba(34,211,238,.3));cursor:pointer}
.timer-pill b{font-family:inherit}
@media (min-width:1000px){.timer-pill{top:78px;right:28px}}