/* Superbites Academy · Campus — base (mismos tokens que la landing) */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}

:root{
  --grad-btn:linear-gradient(95deg,#FF8A1A 0%,#FF6A13 50%,#F2380B 100%);
  --font:"Geist",-apple-system,"SF Pro Display",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,"SF Mono",monospace;
  --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.65,0,.35,1); --e-spring:cubic-bezier(.34,1.4,.64,1);
  --r-lg:26px; --r-md:20px; --r-sm:14px;
  --top-h:68px; --bottom-h:0px; --gut:clamp(16px,3.2vw,40px); --max:1280px;
  --shadow:0 30px 60px rgba(var(--sh),calc(.35 * var(--shk))); --shadow-o:0 20px 50px rgba(242,56,11,.35);
  --ink:#0C0907; --ink2:#1E1511; --ink-deep:#060504; --ivory:#F7F3EC; --tint:247,243,236; --field:12,9,7; --fade:22,15,11;
  --orange:#FF6A13; --orange-l:#FF9A4D; --orange-t:#FFB27A; --yellow:#FFC21F; --red:#ff8a6b; --green:#9BE38B;
  --t80:rgba(var(--tint),.8); --t72:rgba(var(--tint),.72); --t62:rgba(var(--tint),.62); --t50:rgba(var(--tint),.54); --t35:rgba(var(--tint),.35);
  --line:rgba(var(--tint),.10); --line2:rgba(var(--tint),.16); --line3:rgba(var(--tint),.24);
  --grad-text:linear-gradient(95deg,#FFD25A 0%,#FF9A1F 45%,#FF6A13 100%);
  --glass:linear-gradient(160deg,rgba(var(--tint),.07),rgba(var(--tint),.025));
  --panel-a:rgba(42,30,23,.97); --panel-b:rgba(17,12,9,.98); --panel-h:rgba(38,27,21,.94); --bar-bg:rgba(14,10,8,.86); --top-bg:rgba(12,9,7,.62);
  --glass-solid:linear-gradient(160deg,rgba(40,30,24,.92),rgba(18,13,10,.94));
  --ring-gap:#1a120d; --scrim:rgba(6,4,3,.6); --sh:0,0,0; --shk:1;
  --glow-a:rgba(255,106,19,.30); --glow-b:rgba(255,194,31,.10); --glow-c:rgba(255,106,19,.16); --grid-line:rgba(var(--tint),.04); --grain:.045;
  --hl-bg:linear-gradient(160deg,rgba(255,106,19,.15),rgba(255,106,19,.04)); --logo-filter:brightness(0) invert(1);
  --star:#F7F3EC; --orbit:rgba(247,243,236,.16);
  color-scheme:dark;
}
/* tema claro: misma marca sobre marfil */
:root[data-theme="light"]{
  --ink:#F7F3EC; --ink2:#FFF9F1; --ink-deep:#EFE5D6; --ivory:#1A0A03; --tint:26,10,3; --field:255,253,249; --fade:255,250,243;
  --orange-l:#E8530A; --orange-t:#B93F08; --yellow:#9A5B00; --red:#C2361B; --green:#2F7D32;
  --t80:rgba(var(--tint),.84); --t72:rgba(var(--tint),.76); --t62:rgba(var(--tint),.68); --t50:rgba(var(--tint),.6); --t35:rgba(var(--tint),.42);
  --line:rgba(var(--tint),.09); --line2:rgba(var(--tint),.14); --line3:rgba(var(--tint),.22);
  --grad-text:linear-gradient(95deg,#D96400 0%,#E8530A 50%,#C23B08 100%);
  --glass:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,252,247,.6));
  --panel-a:rgba(255,252,247,.98); --panel-b:rgba(250,244,235,.99); --panel-h:rgba(255,251,245,.95); --bar-bg:rgba(255,250,243,.88); --top-bg:rgba(255,249,241,.72);
  --glass-solid:linear-gradient(160deg,rgba(255,252,247,.97),rgba(250,243,233,.97));
  --ring-gap:#FFF9F1; --scrim:rgba(60,30,10,.28); --sh:120,52,12; --shk:.32;
  --glow-a:rgba(255,106,19,.16); --glow-b:rgba(255,194,31,.14); --glow-c:rgba(255,106,19,.08); --grid-line:rgba(var(--tint),.045); --grain:.03;
  --hl-bg:linear-gradient(160deg,rgba(255,106,19,.10),rgba(255,255,255,.7)); --logo-filter:brightness(0);
  --star:#C9A27E; --orbit:rgba(26,10,3,.18);
  color-scheme:light;
}
/* zonas que siguen oscuras en ambos temas (video, portadas, arte sobre imagen) */
:root[data-theme="light"] :is(.player,.lock-ov,.cc-thumb,.ab-chip,.dz,.hx-hero-art,.hx-cc-art){
  --ink:#0C0907; --ink2:#1E1511; --ink-deep:#060504; --ivory:#F7F3EC; --tint:247,243,236; --field:12,9,7; --fade:22,15,11;
  --orange:#FF6A13; --orange-l:#FF9A4D; --orange-t:#FFB27A; --yellow:#FFC21F; --red:#ff8a6b; --green:#9BE38B;
  --t80:rgba(var(--tint),.8); --t72:rgba(var(--tint),.72); --t62:rgba(var(--tint),.62); --t50:rgba(var(--tint),.54); --t35:rgba(var(--tint),.35);
  --line:rgba(var(--tint),.10); --line2:rgba(var(--tint),.16); --line3:rgba(var(--tint),.24);
  --grad-text:linear-gradient(95deg,#FFD25A 0%,#FF9A1F 45%,#FF6A13 100%);
  --glass:linear-gradient(160deg,rgba(var(--tint),.07),rgba(var(--tint),.025));
  --panel-a:rgba(42,30,23,.97); --panel-b:rgba(17,12,9,.98); --panel-h:rgba(38,27,21,.94); --bar-bg:rgba(14,10,8,.86); --top-bg:rgba(12,9,7,.62);
  --glass-solid:linear-gradient(160deg,rgba(40,30,24,.92),rgba(18,13,10,.94));
  --ring-gap:#1a120d; --scrim:rgba(6,4,3,.6); --sh:0,0,0; --shk:1;
  --glow-a:rgba(255,106,19,.30); --glow-b:rgba(255,194,31,.10); --glow-c:rgba(255,106,19,.16); --grid-line:rgba(var(--tint),.04); --grain:.045;
  --hl-bg:linear-gradient(160deg,rgba(255,106,19,.15),rgba(255,106,19,.04)); --logo-filter:brightness(0) invert(1);
  --star:#F7F3EC; --orbit:rgba(247,243,236,.16);
  color-scheme:dark;
}
.theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease,fill .45s ease!important}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 16px)}
body{min-height:100svh;background:linear-gradient(160deg,var(--ink2) 0%,var(--ink) 55%,var(--ink-deep) 100%) fixed;background-color:var(--ink);color:var(--ivory);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga","calt";overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
::selection{background:rgba(255,106,19,.45);color:#fff}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:10px}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* fondo vivo: brillos radiales que respiran + cuadrícula con máscara + grano */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-glow{position:absolute;border-radius:50%;filter:blur(20px);will-change:transform}
.g1{width:900px;height:640px;right:-14%;top:-22%;background:radial-gradient(closest-side,var(--glow-a),transparent 70%);animation:drift1 26s ease-in-out infinite alternate}
.g2{width:760px;height:560px;left:-16%;top:30%;background:radial-gradient(closest-side,var(--glow-b),transparent 70%);animation:drift2 32s ease-in-out infinite alternate}
.g3{width:900px;height:620px;left:30%;bottom:-36%;background:radial-gradient(closest-side,var(--glow-c),transparent 70%);animation:drift1 38s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate3d(-6%,8%,0) scale(1.08)}}
@keyframes drift2{to{transform:translate3d(8%,-6%,0) scale(1.1)}}
.bg-grid{position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:80px 80px;-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000 0%,transparent 75%);mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000 0%,transparent 75%)}
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:var(--grain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#app{position:relative;z-index:1;min-height:100svh}

/* arranque */
.boot{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:22px}
.boot img{animation:breathe 1.6s ease-in-out infinite}
.boot-bar{width:120px;height:2px;border-radius:2px;background:rgba(var(--tint),.08);overflow:hidden}
.boot-bar i{display:block;height:100%;width:40%;background:var(--grad-btn);border-radius:inherit;animation:load 1.1s var(--e-io) infinite}
@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@keyframes breathe{50%{opacity:.6;transform:scale(.96)}}

/* tipografía */
h1,h2,h3,h4{font-weight:800;letter-spacing:-.045em;line-height:1;text-wrap:balance}
h1{font-size:clamp(34px,4.4vw,60px);letter-spacing:-.055em;line-height:.96}
h2{font-size:clamp(26px,3vw,40px)}
h3{font-size:20px;letter-spacing:-.025em;line-height:1.2}
h4{font-size:16px;letter-spacing:-.015em;line-height:1.3;font-weight:700}
p{color:var(--t72);text-wrap:pretty}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
h1 .grad,h2 .grad{padding-bottom:.06em}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--t50)}
.muted{color:var(--t50)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:200;padding:12px 18px;border-radius:12px;background:var(--ivory);color:var(--ink);font-weight:700;transition:top .3s var(--e-out)}
.skip:focus{top:12px}

/* botones */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 20px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:-.01em;color:#fff;background:var(--grad-btn);box-shadow:0 14px 36px rgba(242,56,11,.32),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(90,22,4,.35);border:0;white-space:nowrap;transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),filter .3s,background-color .3s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);translate:-120% 0;transition:translate .9s var(--e-out)}
.btn:hover{box-shadow:0 22px 50px rgba(242,56,11,.48),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(90,22,4,.35);filter:brightness(1.05)}
.btn:hover::after{translate:120% 0}
.btn:active{transform:scale(.97);transition-duration:.12s}
.btn .ic{width:18px;height:18px}
.btn:focus-visible{outline-offset:4px;border-radius:999px}
.btn-lg{padding:15px 26px;font-size:16px}
.btn-sm{padding:9px 15px;font-size:13.5px}
.btn-ghost{background:rgba(var(--tint),.05);color:var(--ivory);box-shadow:inset 0 0 0 1px var(--line2),inset 0 1px 0 rgba(255,255,255,.06)}
.btn-ghost::after{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%)}
.btn-ghost:hover{background:rgba(var(--tint),.1);box-shadow:inset 0 0 0 1px rgba(var(--tint),.28)}
.btn-dark{background:#1A0A03;color:var(--ivory);box-shadow:0 20px 50px rgba(40,8,2,.55),inset 0 1px 0 rgba(255,255,255,.12)}
.btn.wide{width:100%}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;filter:saturate(.6)}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--t80);background:rgba(var(--tint),.04);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .3s,color .3s,box-shadow .3s,transform .4s var(--e-out)}
.icon-btn:hover{background:rgba(var(--tint),.1);color:var(--ivory);box-shadow:inset 0 0 0 1px var(--line3)}
.icon-btn:active{transform:scale(.92)}
.icon-btn[aria-expanded=true]{background:rgba(255,106,19,.16);color:var(--orange-t);box-shadow:inset 0 0 0 1px rgba(255,106,19,.5)}
.link{color:var(--orange-t);font-weight:600;transition:color .3s}
.link:hover{color:var(--yellow)}
.dot-badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--grad-btn);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--ink),0 0 12px rgba(255,106,19,.6)}
.dot-badge.pop{animation:pop .5s var(--e-spring)}
@keyframes pop{0%{transform:scale(.4)}100%{transform:none}}

/* píldoras */
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--t72);border:1px solid var(--line);background:rgba(var(--tint),.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);white-space:nowrap}
.pill b{font-weight:500;color:var(--orange-t)}
.pill .ic{width:13px;height:13px}
.pill-accent{color:var(--orange-t);border-color:rgba(255,106,19,.55);background:rgba(255,106,19,.14)}
.pill-yellow{color:var(--yellow);border-color:rgba(255,194,31,.4);background:rgba(255,194,31,.1)}
.pill-live i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange);flex:none}
.pill-live i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--orange);animation:ping 2.2s var(--e-out) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.1);opacity:0}}

/* vidrio + luz que sigue al cursor */
.glass{position:relative;isolation:isolate;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.glass.hl{border-color:rgba(255,106,19,.55);background:var(--hl-bg);box-shadow:0 0 60px rgba(255,106,19,.18),var(--shadow),inset 0 1px 0 rgba(255,200,150,.18)}
.fx{--mx:50%;--my:0%;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .7s var(--e-out),border-color .4s,box-shadow .5s var(--e-out)}
.fx.tilting{transition:transform .12s linear,border-color .4s,box-shadow .5s var(--e-out)}
.fx::before,.fx::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .5s var(--e-out)}
.fx::before{background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,154,77,.12),transparent 45%)}
.fx::after{padding:1px;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,190,120,.85),rgba(255,106,19,.25) 40%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fx:hover::before,.fx:hover::after{opacity:1}

/* formularios */
.field{display:grid;gap:7px}
.field>span,.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t62)}
.input,.textarea,.select{width:100%;padding:13px 15px;border-radius:var(--r-sm);border:1px solid var(--line2);background:rgba(var(--field),.55);color:var(--ivory);font-size:16px;line-height:1.45;transition:border-color .3s,box-shadow .4s var(--e-out),background-color .3s}
.textarea{resize:vertical;min-height:110px}
.input:hover,.textarea:hover,.select:hover{border-color:rgba(var(--tint),.26)}
.input::placeholder,.textarea::placeholder{color:var(--t50)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--orange);background:rgba(var(--field),.8);box-shadow:0 0 0 4px rgba(255,106,19,.18),0 0 30px rgba(255,106,19,.12)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF9A4D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
.select option{background:var(--ring-gap)}
.form-msg{min-height:20px;font-size:14px;color:var(--yellow)}.form-msg.err{color:var(--red)}

/* interruptor */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:14px;color:var(--t80)}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .tr{position:relative;width:42px;height:24px;border-radius:12px;background:rgba(var(--tint),.12);box-shadow:inset 0 0 0 1px var(--line2);transition:background-color .35s}
.switch .tr::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(var(--sh),calc(.4 * var(--shk)));transition:transform .45s var(--e-spring)}
.switch input:checked+.tr{background:var(--grad-btn);box-shadow:0 0 16px rgba(255,106,19,.45)}
.switch input:checked+.tr::after{transform:translateX(18px)}
.switch input:focus-visible+.tr{outline:2px solid var(--yellow);outline-offset:3px}

/* avatar */
.av{position:relative;flex:none;display:inline-grid;width:var(--s);height:var(--s);border-radius:50%}
.av img,.av-ini{width:100%;height:100%;border-radius:50%;object-fit:cover}
.av-ini{display:grid;place-items:center;font-weight:700;font-size:calc(var(--s) * .38);letter-spacing:-.02em;color:#1A0A03;background:linear-gradient(140deg,hsl(calc(var(--h) * .1 + 30) 100% 70%),hsl(calc(var(--h) * .06 + 14) 95% 55%) 60%,hsl(calc(var(--h) * .05 + 8) 85% 40%));box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.av.ring{padding:2.5px;background:var(--grad-btn)}
.av.ring img,.av.ring .av-ini{border:2px solid var(--ink)}
.av-online{position:absolute;right:0;bottom:0;width:28%;height:28%;min-width:9px;min-height:9px;border-radius:50%;background:#5BD27A;box-shadow:0 0 0 2px var(--ink)}
.av-lvl{position:absolute;right:-4px;bottom:-4px;min-width:max(15px,calc(var(--s) * .42));height:max(15px,calc(var(--s) * .42));padding:0 3px;border-radius:10px;display:grid;place-items:center;font-size:max(9px,calc(var(--s) * .24));line-height:1;font-weight:800;color:#fff;background:var(--grad-btn);box-shadow:0 0 0 2px var(--ink)}

/* barras de progreso */
.bar{position:relative;height:6px;border-radius:6px;background:rgba(var(--tint),.08);overflow:hidden}
.bar>i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);border-radius:inherit;background:var(--grad-btn);box-shadow:0 0 12px rgba(255,106,19,.6);transition:width 1s var(--e-out)}
.bar.thin{height:4px}

/* skeletons */
.sk{display:block;border-radius:8px;background:linear-gradient(90deg,rgba(var(--tint),.05) 0%,rgba(var(--tint),.11) 40%,rgba(var(--tint),.05) 80%);background-size:300% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-50% 0}}
.sk-row{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.sk-av{width:40px;height:40px;border-radius:50%}
.sk-line{height:12px;margin-top:10px}.sk-line.h18{height:18px}
.w40{width:40%}.w70{width:70%}.w90{width:90%}.w100{width:100%}

/* toasts */
#toasts{position:fixed;left:50%;bottom:calc(var(--bottom-h) + 22px);translate:-50% 0;z-index:150;display:grid;gap:10px;justify-items:center;pointer-events:none;width:min(92vw,440px)}
.toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:16px;background:var(--glass-solid);border:1px solid var(--line2);box-shadow:0 20px 50px rgba(var(--sh),calc(.5 * var(--shk))),0 0 30px rgba(255,106,19,.12);font-size:14.5px;color:var(--ivory);opacity:0;transform:translateY(14px) scale(.98);transition:opacity .4s var(--e-out),transform .5s var(--e-out);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.toast .ic{color:var(--orange-t);width:18px;height:18px}
.toast.ok .ic{color:var(--yellow)}.toast.err .ic{color:var(--red)}
.toast.in{opacity:1;transform:none}

/* diálogos */
.dlg{margin:auto;padding:0;border:0;background:transparent;color:inherit;max-width:min(640px,calc(100vw - 24px));width:100%;max-height:calc(100svh - 32px);overflow:visible}
.dlg::backdrop{background:var(--scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fade .3s var(--e-out)}
.dlg[open] .dlg-in{animation:dlgIn .5s var(--e-out)}
.dlg.closing .dlg-in{animation:dlgOut .22s var(--e-io) forwards}
.dlg.closing::backdrop{animation:fade .22s reverse forwards}
@keyframes dlgIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes dlgOut{to{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes fade{from{opacity:0}}
.dlg-in{background:linear-gradient(160deg,var(--panel-a),var(--panel-b));border-color:var(--line2);max-height:calc(100svh - 32px);overflow:auto;overscroll-behavior:contain;border-radius:28px}
.dlg-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px 16px;background:var(--panel-h);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.dlg-h h2{font-size:21px;letter-spacing:-.03em}
.dlg-b{padding:22px}
.dlg-x{position:absolute;top:14px;right:14px;z-index:3}
.dlg.wide{max-width:min(820px,calc(100vw - 24px))}

/* confeti y chispas */
.confetti{position:fixed;inset:0;width:100vw;height:100vh;z-index:160;pointer-events:none}
.burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.burst i{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:var(--yellow);box-shadow:0 0 6px var(--orange);transform:rotate(var(--a)) translateY(0);animation:spark .65s var(--e-out) forwards}
.burst i:nth-child(even){background:var(--orange)}
@keyframes spark{to{transform:rotate(var(--a)) translateY(-22px);opacity:0}}

/* entrada escalonada */
[data-in]{animation:rise .8s var(--e-out) both;animation-delay:calc(var(--i,0) * 55ms + 40ms)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* estados vacíos */
.empty{display:grid;justify-items:center;text-align:center;gap:12px;padding:44px 22px}
.empty .cosmo{width:140px;height:140px}
.empty h3{font-size:20px}
.empty p{max-width:380px;font-size:15px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-in]{animation:none}
}
:root[data-theme="light"] :is(.player,.lock-ov,.cc-thumb,.ab-chip,.dz,.hx-hero-art,.hx-cc-art){color:var(--ivory)}

/* auditoría de diseño: el fondo no se desplaza mientras hay un diálogo abierto */
html:has(dialog[open]){overflow:hidden}