/* a063 — portada: entrar (un login para todo) y las apps. Tema «Noir», el mismo de TrialReels y Cloud:
   negro con un haz de luz y anillos QUIETOS (sin animaciones, filter ni mix-blend-mode: con el cristal encima
   la web iba a tirones), contenido sobre superficies y cristal líquido en los controles. */
:root {
  --ink: #f5f5f7; --muted: #8e8e93; --err: #ff453a;
  --sans: "Geist", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;
  --lq: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(255, 255, 255, .05), inset 0 0 0 .5px rgba(255, 255, 255, .15), 0 10px 28px rgba(0, 0, 0, .4);
  --float: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 0 .5px rgba(255, 255, 255, .15), 0 24px 60px rgba(0, 0, 0, .65);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: #000; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: transparent; color: var(--ink);
  font: 15px/1.5 var(--sans); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
[hidden] { display: none !important; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; color: var(--ink); }
.svg-defs stop { stop-color: currentColor; }

/* ---------- fondo quieto ---------- */
.bg-beam, .bg-rings { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.bg-beam { background: #000; }
.bg-beam i { position: absolute; border-radius: 50%; }
.bg-beam i:nth-child(1) { width: 62vmax; height: 150vmax; left: 50%; top: -55vmax; transform: translateX(-38%) rotate(-14deg);
  background: radial-gradient(closest-side, #1a1a1b 0%, #121213 38%, #09090a 68%, rgba(0, 0, 0, 0) 100%); }
.bg-beam i:nth-child(2) { width: 34vmax; height: 90vmax; left: 50%; top: -30vmax; transform: translateX(-30%) rotate(-14deg);
  background: radial-gradient(closest-side, rgba(44, 44, 47, .4), rgba(0, 0, 0, 0)); }
.bg-beam i:nth-child(3) { width: 90vmax; height: 60vmax; left: 50%; bottom: -38vmax; transform: translateX(-55%);
  background: radial-gradient(closest-side, #080809, rgba(0, 0, 0, 0)); }
.bg-rings > i { position: absolute; width: 150vmax; height: 150vmax; left: 50%; top: 50%; margin: -75vmax 0 0 -75vmax; transform: rotate(-17deg) scaleY(.32); }
.bg-rings b { position: absolute; inset: 0; border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, transparent 70%, #000 79%, #000 85%, transparent 97%); mask-image: radial-gradient(closest-side, transparent 70%, #000 79%, #000 85%, transparent 97%); }
.bg-rings b:nth-child(1) { transform: rotate(40deg);
  background: conic-gradient(from 0deg, transparent 0 45%, rgba(245, 245, 247, .025) 62%, rgba(245, 245, 247, .1) 84%, rgba(245, 245, 247, .03) 93%, transparent 100%); }
.bg-rings b:nth-child(2) { inset: 9%; transform: rotate(200deg);
  background: conic-gradient(from 0deg, transparent 0 58%, rgba(245, 245, 247, .055) 84%, transparent 100%); }

/* ---------- la bola ---------- */
.orb { display: block; flex: none; overflow: visible; color: var(--ink); }
.orb ellipse { fill: none; stroke: url(#orbShade); vector-effect: non-scaling-stroke; }
.orb .orb-outer { fill: none; stroke: currentColor; }
.orb-ring { transform-box: view-box; transform-origin: 50px 50px; }
.orb .r1 { animation: orbA 7s cubic-bezier(.45, .05, .55, .95) infinite; }
.orb .r2 { animation: orbB 9s cubic-bezier(.45, .05, .55, .95) infinite; }
@keyframes orbA { 0% { transform: rotate(-35deg) scaleY(1); } 25% { transform: rotate(10deg) scaleY(.12); } 50% { transform: rotate(55deg) scaleY(1); } 75% { transform: rotate(100deg) scaleY(.12); } 100% { transform: rotate(145deg) scaleY(1); } }
@keyframes orbB { 0% { transform: rotate(62deg) scaleY(.55); } 33% { transform: rotate(-20deg) scaleY(1.6); } 66% { transform: rotate(-95deg) scaleY(.08); } 100% { transform: rotate(-118deg) scaleY(.55); } }
.orb-xl { width: 180px; height: 180px; margin: 0 auto 18px; }
.orb-xl ellipse { stroke-width: 11px; }
.orb-xl .orb-outer { stroke-width: 7; }
.orb-top { width: 36px; height: 36px; }
.orb-top ellipse { stroke-width: 2.4px; }
.orb-top .orb-outer { stroke-width: 8; }

/* ---------- entrar ---------- */
.p-screen { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.p-login { width: 100%; max-width: 380px; display: grid; gap: 12px; padding: 34px 28px 28px; border-radius: 34px;
  background: rgba(22, 22, 24, .56); -webkit-backdrop-filter: saturate(160%) brightness(1.04); backdrop-filter: saturate(160%) brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 30px 80px rgba(0, 0, 0, .55);
  animation: p-pop .6s cubic-bezier(.25, 1.2, .4, 1) both; }
/* Sin blur (25/10/2026): el nudo se repinta en cada fotograma y Chrome recalculaba el desenfoque solo en su recuadro,
   que se veía como un cuadrado gris tenue alrededor del logo (el mismo fallo que la línea de las tarjetas). No volver a ponerlo. */
@keyframes p-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.p-login input { width: 100%; height: 52px; padding: 0 20px; border: 0; border-radius: 999px; outline: none; font-size: 16px;
  background: rgba(255, 255, 255, .055); box-shadow: var(--lq); transition: box-shadow .25s, background .25s; }
.p-login input:focus { background: rgba(255, 255, 255, .08); box-shadow: var(--lq), 0 0 0 2px rgba(255, 255, 255, .55); }
.p-login input.bad { box-shadow: var(--lq), 0 0 0 2px rgba(255, 69, 58, .8); }
.p-login input:-webkit-autofill { -webkit-text-fill-color: var(--ink); transition: background-color 600000s 0s, color 600000s 0s; caret-color: var(--ink); }
/* lo escrito y las pistas («usuario o correo», ********), en el centro y siempre visibles (Dani, 25/10/2026) */
.p-login input { text-align: center; }
.p-login input[type=password]::placeholder { letter-spacing: .25em; }
.p-login input::placeholder { color: rgba(255, 255, 255, .3); }
.p-login .otp { text-align: center; letter-spacing: .5em; text-indent: .5em; font-family: var(--mono); font-size: 20px; }
.p-login .code-step:not(.open) { display: none; }
.p-login .code-step.open { animation: p-step .5s cubic-bezier(.25, 1.3, .4, 1) both; }
@keyframes p-step { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
/* ojo para ver la contraseña (01/11/2026, como en el registro; portal.js): dentro del campo, a la derecha; el texto sigue centrado */
.p-login .pw-wrap { position: relative; display: block; }
.p-login .pw-wrap input { padding-left: 50px; padding-right: 50px; }
.p-login .pw-eye { position: absolute; top: 50%; right: 8px; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 0; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer; color: rgba(255, 255, 255, .45); background: none; transition: color .2s, background .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.p-login .pw-eye:hover { color: rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .08); }
.p-login .pw-eye:active { transform: scale(.92); }
.p-login .pw-eye:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.p-login .pw-eye svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.p-login .pw-eye[aria-pressed="true"] .eye-slash { display: none; }
.p-login .pw-eye[aria-pressed="true"] { color: rgba(255, 255, 255, .92); }
.p-actions { display: flex; gap: 10px; margin-top: 6px; }
/* Menos brillo (Dani, 02/11/2026): gris claro en vez de blanco puro, que deslumbraba sobre el negro; al pasar el ratón se aclara un poco. */
.p-go { position: relative; flex: 1; height: 54px; border: 0; border-radius: 999px; cursor: pointer; background: #b8b8bd;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background .2s; }
.p-go:hover { background: #cbcbd0; }
.p-go:active { transform: scale(.95); }
.p-go .orb { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; color: #000; }
.p-go .orb ellipse { stroke: #000; stroke-width: 2.4px; }
.p-go .orb .orb-outer { stroke: #000; stroke-width: 8; }
.p-go .orb-hint { opacity: 0; transition: opacity .6s; }
.p-login.hints .p-go .orb-hint { opacity: .55; }
.p-go.busy .orb-hint { opacity: 1; }
.p-go.busy .orb .r1 { animation-duration: 2.4s; }
.p-go.busy .orb .r2 { animation-duration: 3s; }
.p-bio { flex: none; width: 54px; height: 54px; border: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .055); box-shadow: var(--lq); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background .2s; }
.p-bio:hover { background: rgba(255, 255, 255, .1); }
.p-bio:active { transform: scale(.92); }
.p-bio svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.p-bio.scan { animation: p-scan 1.2s ease-in-out infinite; }
/* «Crear cuenta», abajo a la derecha del recuadro (solo si el registro está abierto) */
.p-signup { justify-self: end; margin: 4px 6px -6px 0; padding: 4px 2px; font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .2s; }
.p-signup:hover { color: var(--ink); }
.p-login-links { display: flex; justify-content: space-between; gap: 12px; margin: 4px 6px -6px; }
.p-login-links .p-signup { margin: 0; }
.p-signup:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; border-radius: 6px; }
@keyframes p-scan { 50% { box-shadow: var(--lq), 0 0 0 6px rgba(255, 255, 255, .12); } }
/* fallo: tiembla todo */
.p-screen.shake .p-login { animation: p-shake .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes p-shake {
  10%, 90% { transform: translateX(-3px); } 20%, 80% { transform: translateX(8px) rotate(.4deg); }
  30%, 50%, 70% { transform: translateX(-14px) rotate(-.6deg); } 40%, 60% { transform: translateX(14px) rotate(.6deg); } }

/* ---------- portada ---------- */
.p-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1120px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 10px; }
.p-brand { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; text-decoration: none; color: inherit; }
.p-me { position: relative; }
.p-me-btn { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 5px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .055); box-shadow: var(--lq);
  -webkit-backdrop-filter: blur(16px) saturate(170%) brightness(1.08); backdrop-filter: blur(16px) saturate(170%) brightness(1.08);
  transition: background .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.p-me-btn:hover { background: rgba(255, 255, 255, .1); }
.p-me-btn:active { transform: scale(.96); }
/* Botón «Recordatorio» (al lado de Halo; se enciende en Ajustes → Mi cuenta): la misma píldora de cristal que el de Halo */
.p-rem-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 9px; flex: none; border-radius: 999px;
  color: var(--ink); text-decoration: none; font: 500 13px/1 var(--sans); -webkit-touch-callout: none; user-select: none;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 .5px rgba(255, 255, 255, .14);
  transition: background .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.p-rem-btn:hover { background: rgba(255, 255, 255, .12); }
.p-rem-btn:active { transform: scale(.95); }
.p-rem-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-avatar { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; font: 600 15px var(--mono);
  background: linear-gradient(160deg, #48484a, #1c1c1e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.p-me-name { font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 6px; border-radius: 20px;
  background: rgba(30, 30, 32, .58); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); box-shadow: var(--float);
  transform-origin: top right; animation: p-menu .32s cubic-bezier(.3, 1.35, .5, 1); }
@keyframes p-menu { from { opacity: 0; transform: scale(.94) translateY(-4px); } }
.p-menu form { margin: 0; }
.p-menu-who { display: grid; padding: 10px 14px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: 6px; }
.p-menu-who span { color: var(--muted); font-size: 13px; }
.p-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px 10px 12px; border: 0; border-radius: 14px; background: none;
  cursor: pointer; text-align: left; transition: background .15s; }
.p-menu-item:hover, .p-menu-item:focus-visible { background: rgba(255, 255, 255, .1); }
.p-menu-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.p-home { max-width: 1120px; margin: 0 auto; padding: 8vh 20px 80px; }
.p-hello { margin: 0 0 28px; font-weight: 600; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.04em; line-height: 1.05; }
.p-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.p-app { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 22px; min-height: 190px; padding: 20px; border-radius: 28px;
  text-decoration: none; color: inherit; border: 0;
  transition: box-shadow .6s cubic-bezier(.2, .8, .3, 1); }
/* entrada (solo al cargar: gel.js mueve después las tarjetas con transform en línea) */
.p-apps:not(.ready) .p-app { animation: p-app .55s cubic-bezier(.25, 1.2, .4, 1) both; }
.p-apps:not(.ready) .p-app:nth-child(2) { animation-delay: .06s; } .p-apps:not(.ready) .p-app:nth-child(3) { animation-delay: .12s; }
.p-apps:not(.ready) .p-app:nth-child(4) { animation-delay: .18s; }
@keyframes p-app { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.p-app-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .055); box-shadow: var(--lq); }
.p-app-ic .orb { width: 44px; height: 44px; }
.p-app-ic .orb ellipse { stroke-width: 2.8px; }
.p-app-ic .orb .orb-outer { stroke-width: 8; }
.p-app-ic .ic { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.p-app-txt { display: grid; gap: 4px; margin-top: auto; }
.p-app-txt b { font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.p-app-txt span { color: var(--muted); font-size: 14px; }

/* apps que están por llegar: misma tarjeta de cristal, apagada y sin poder pulsarse */
.p-soon-title { margin: 44px 0 16px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.p-soon { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.p-app-soon { cursor: default; animation: p-app .55s .2s cubic-bezier(.25, 1.2, .4, 1) both; }
.p-app-soon .p-app-ic, .p-app-soon .p-app-txt { opacity: .55; }
.p-soon-chip { position: absolute; top: 20px; right: 20px; padding: 5px 10px; border-radius: 999px; font: 500 11.5px var(--mono); letter-spacing: .02em;
  color: var(--muted); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14); }

@media (max-width: 520px) {
  .p-soon { grid-template-columns: 1fr 1fr; gap: 12px; }
  .p-soon-title { margin-top: 32px; }
  .p-soon-chip { position: static; align-self: flex-start; margin-top: -10px; padding: 4px 8px; font-size: 10.5px; }   /* arriba pisaba el icono */
  .p-login { padding: 28px 20px 22px; border-radius: 30px; }
  .orb-xl { width: 150px; height: 150px; }
  .p-home { padding-top: 5vh; }
  .p-apps { grid-template-columns: 1fr 1fr; gap: 12px; }
  .p-app { min-height: 168px; padding: 16px; border-radius: 24px; }
  .p-app-txt b { font-size: 18px; }
  .p-app-txt span { font-size: 13px; }
  .p-me-name { display: none; }
  .p-me-btn { padding: 0 5px; }
  .p-rem-btn { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .p-rem-btn span { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01s !important; } }

/* ---------- ajustes ---------- */
.p-none { color: var(--muted); }
a.p-menu-item { color: inherit; text-decoration: none; }
.p-settings { max-width: 860px; padding-top: 3vh; }
.p-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; padding: 7px 14px 7px 8px; border-radius: 999px; color: var(--muted); text-decoration: none;
  font-weight: 500; transition: background .2s, color .2s; }
.p-back:hover { background: rgba(255, 255, 255, .07); color: var(--ink); }
.p-back svg, .p-btn svg, .p-card-ic svg, .p-item-ic svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-back svg { width: 18px; height: 18px; }
.p-settings .p-hello { margin-bottom: 22px; }
.p-tabs { display: inline-flex; gap: 2px; padding: 4px; margin-bottom: 22px; border-radius: 999px; background: rgba(255, 255, 255, .055); box-shadow: var(--lq); }
.p-tabs button { border: 0; background: none; padding: 9px 18px; border-radius: 999px; color: var(--muted); font-weight: 500; cursor: pointer; transition: color .25s, background .25s; }
.p-tabs button.on { color: var(--ink); font-weight: 600; background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 .5px rgba(255, 255, 255, .3); }
/* con liquid.js, la elegida la marca una lente de gel que se desliza (y se puede arrastrar) */
.lq-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lq { position: relative; isolation: isolate; }
.lq > .lens { position: absolute; z-index: 1; border-radius: 999px; pointer-events: none; will-change: left, width, transform; transform-origin: center;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 .5px rgba(255, 255, 255, .3), 0 4px 14px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: brightness(1.25) saturate(1.3); backdrop-filter: var(--lq-lens, ) brightness(1.25) saturate(1.3); transition: background .3s, opacity .2s; }
.lq.lq-drag > .lens { background: rgba(255, 255, 255, .17); }
.lq.lq-fit { touch-action: pan-y; }
.lq.lq-drag { cursor: grabbing; }
.lq > button, .lq > a { position: relative; z-index: 2; }
.lq > .lq-top { z-index: 3; }
.p-tabs.lq button.on, .p-seg.lq button.on { background: none; box-shadow: none; }
.p-pane { display: grid; gap: 16px; animation: p-step .4s cubic-bezier(.25, 1.2, .4, 1) both; }
.p-pane[hidden] { display: none; }
.p-wait { height: 120px; border-radius: 28px; background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .06); }
.p-card { display: grid; gap: 14px; padding: 20px; border-radius: 28px; background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .08); }
.p-card h3 { margin: 6px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.p-who { grid-template-columns: auto 1fr; align-items: center; gap: 16px; }
.p-avatar.big { width: 64px; height: 64px; font-size: 24px; }
/* foto de perfil (avatar.py): llena el círculo; sin foto, la inicial de siempre */
.p-avatar.has-img { background: #1c1c1e; }
.p-avatar > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; -webkit-user-drag: none; }
/* Mi cuenta: la cara se toca para cambiar la foto (chapa con una cámara) y a la derecha «Cambiar foto» / «Quitar» */
.p-who { grid-template-columns: auto 1fr auto; }
.p-who-face { position: relative; padding: 0; border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer; transition: transform .2s; }
.p-who-face:active { transform: scale(.95); }
.p-who-cam { position: absolute; right: -3px; bottom: -3px; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  color: var(--ink); background: #2c2c2e; box-shadow: var(--lq), 0 0 0 3px #111; }
.p-who-cam svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.p-who-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 560px) {
  .p-who { grid-template-columns: auto 1fr; }
  .p-who-acts { grid-column: 1 / -1; justify-content: flex-start; }
}
.p-who-txt { display: grid; gap: 2px; min-width: 0; }
.p-who-txt b { font-size: 20px; letter-spacing: -.03em; }
.p-who-txt > span:not(.p-chip) { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.p-chip { justify-self: start; display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  background: rgba(255, 255, 255, .08); color: var(--ink); }
.p-card-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.p-card-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: rgba(255, 255, 255, .055); box-shadow: var(--lq); }
.p-card-ic svg { width: 24px; height: 24px; }
.p-card-txt { display: grid; gap: 2px; min-width: 0; }
.p-card-txt b { font-size: 16px; }
.p-card-txt span { color: var(--muted); font-size: 14px; }
.p-pill { padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; background: rgba(255, 255, 255, .07); color: var(--muted); }
.p-pill.ok { background: rgba(48, 209, 88, .14); color: #5ce07f; }
.p-pill.warn { background: rgba(255, 159, 10, .15); color: #ffb340; }
.p-pill.bad { background: rgba(255, 69, 58, .16); color: #ff7a70; }
.p-muted { color: var(--muted); }
.p-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 10px 0; }
.p-stat { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .045); }
.p-stat > span:first-child { color: var(--muted); font-size: 12.5px; }
.p-stat > b { font-weight: 600; font-size: 16px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.p-stat .p-pill { justify-self: start; }
.p-disk { display: grid; gap: 6px; margin-top: 12px; }
.p-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.p-bar i { display: block; height: 100%; border-radius: inherit; background: #5ce07f; transition: width .4s; }
.p-bar.warn i { background: #ffb340; }
.p-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.p-stack { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .08); gap: 2px; margin: 10px 0 12px; }
.p-stack i { display: block; height: 100%; min-width: 0; }
.p-legend { display: grid; gap: 6px; }
.p-legend .p-line > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.p-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.p-disk > span.p-muted { font-size: 12.5px; }
.p-card-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.p-list { display: grid; gap: 2px; }
.p-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid rgba(255, 255, 255, .06); }
.p-list .p-item { grid-template-columns: auto 1fr auto; }
.p-card > h3 + .p-item, .p-list > .p-item:first-child, .p-card.p-flat > .p-item { border-top: 0; }
.p-item-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); }
.p-item-ic svg { width: 18px; height: 18px; }
.p-item-txt { display: grid; min-width: 0; }
.p-item-txt b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-item-txt span { color: var(--muted); font-size: 13px; }
.p-note { margin: 0; color: var(--muted); font-size: 14px; }
.p-note.bad { color: #ff6961; }
.p-note.bad:empty { display: none; }

.p-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 999px; cursor: pointer; font-weight: 600;
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background .2s, opacity .2s; }
.p-btn:active { transform: scale(.95); }
.p-btn:disabled { opacity: .5; cursor: default; }
.p-btn svg { width: 18px; height: 18px; }
.p-btn.primary { background: var(--ink); color: #000; box-shadow: 0 8px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.p-btn.primary:hover { background: #fff; }
.p-btn.ghost { background: rgba(255, 255, 255, .055); color: var(--ink); box-shadow: var(--lq); }
.p-btn.ghost:hover { background: rgba(255, 255, 255, .1); }
.p-btn.danger { background: rgba(255, 69, 58, .14); color: #ff6961; }
.p-btn.danger:hover { background: rgba(255, 69, 58, .22); }
.p-btn.small { padding: 7px 13px; font-size: 13.5px; }

.p-switch { position: relative; flex: none; width: 51px; height: 31px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(120, 120, 128, .32); transition: background .3s; }
.p-switch i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 999px; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  transition: transform .45s cubic-bezier(.3, 1.5, .45, 1), width .3s cubic-bezier(.3, 1.5, .45, 1); }
.p-switch.on { background: #30d158; }
.p-switch.on i { transform: translateX(20px); }
.p-switch:active:not(:disabled) i { width: 33px; }
.p-switch.on:active:not(:disabled) i { transform: translateX(14px); }
.p-switch:disabled { opacity: .4; cursor: default; }

.p-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.p-sec-head h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.03em; }
.p-sec-head p { margin: 0; color: var(--muted); font-size: 14px; max-width: 520px; }
.p-sec-sub { margin-top: 22px; }
.p-tier-bar { display: flex; }   /* Personas → filtro de alumnos por plan (Todos, Basic, Pro, Ultra) */
.p-people { gap: 0; padding: 8px 20px; }
/* cada persona: avatar, nombre y botones arriba; sus apps en una segunda línea, debajo del nombre (con 3 apps no caben al lado) */
.p-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; row-gap: 10px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.p-person .p-apps-row { grid-column: 2 / -1; grid-row: 2; }
.p-person > .p-chip { grid-column: 3; }
.p-person:first-child { border-top: 0; }
.p-person.inactive { opacity: .55; }
.p-person-txt { display: grid; min-width: 0; }
.p-person-txt b { font-weight: 600; }
.p-person-txt span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-apps-row { display: flex; flex-wrap: wrap; gap: 8px; }
.p-app-sw { display: inline-flex; align-items: center; gap: 10px; padding: 5px 5px 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .045); font-size: 14px; font-weight: 500; }
.p-app-sw.off { color: var(--muted); }
.p-app-sw .p-switch { width: 44px; height: 27px; }
.p-app-sw .p-switch i { width: 23px; height: 23px; }
.p-app-sw .p-switch.on i { transform: translateX(17px); }
.p-row-acts { display: flex; gap: 6px; }

.p-dialog { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 24px; border: 0; border-radius: 30px; color: var(--ink);
  background: rgba(24, 24, 26, .62); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 .5px rgba(255, 255, 255, .14), 0 40px 100px rgba(0, 0, 0, .7); }
.p-dialog[open] { animation: p-pop .45s cubic-bezier(.25, 1.2, .4, 1); }
.p-dialog::backdrop { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.p-dialog h2 { margin: 0 0 14px; font-size: 20px; letter-spacing: -.03em; }
.p-dlg-body { display: grid; gap: 14px; }
.p-dlg-body > p { margin: 0; color: var(--muted); }
.p-dlg-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.p-input { width: 100%; height: 48px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; outline: none; color: var(--ink);
  background: rgba(255, 255, 255, .055); font-size: 15px; }
.p-input:focus { border-color: rgba(255, 255, 255, .6); box-shadow: 0 0 0 3px rgba(255, 255, 255, .1); }
.p-input.mono { font-family: var(--mono); font-size: 13px; }
select.p-input { appearance: none; color-scheme: dark; cursor: pointer; }
/* La lista nativa de un <select> (en la portada, Ajustes, Mensajes, Studio… liquid.js no los cambia): Windows la pintaba
   blanca con el texto casi blanco y no se leía (Dani, 02/11/2026). Fondo y texto propios, oscuros como los menús. */
select option, select optgroup { background: #1c1c1e; color: #f5f5f7; }
.p-field { display: grid; gap: 8px; }
.p-field > span { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.p-sub { display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, .035); }
.p-sub[hidden] { display: none; }
.p-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 14px; }
.p-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .055); box-shadow: var(--lq); justify-self: start; }
.p-seg button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; color: var(--muted); font-weight: 500; cursor: pointer; }
.p-seg button.on { color: var(--ink); font-weight: 600; background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.p-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 50; transform: translateX(-50%);
  max-width: calc(100vw - 32px); padding: 11px 20px; border-radius: 999px; font-weight: 500; text-align: center;
  background: rgba(36, 36, 38, .72); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--float); }
.p-toast.bad { color: #ff8a80; }
@media (max-width: 640px) {
  .p-person { grid-template-columns: auto minmax(0, 1fr); }
  .p-person .p-apps-row, .p-person .p-row-acts { grid-column: 1 / -1; grid-row: auto; }
  .p-sec-head { flex-direction: column; }
  .p-card-head { grid-template-columns: auto 1fr; }
  .p-card-head .p-pill { grid-column: 2; justify-self: start; }
  .p-people { padding: 4px 16px; }
}

/* Personas: los GB de su Cloud y las opciones de tamaño */
.p-app-sw .p-gb { padding: 4px 10px; font-size: 12.5px; font-family: var(--mono); }
.p-seg-wrap { flex-wrap: wrap; border-radius: 22px; }

/* ---------- las apps: cristal líquido ----------
   Transparentes: dejan ver el haz de luz y los anillos de detrás, difuminados. La que está bajo el ratón (o la que
   llevas) además los dobla en los bordes como una lente (--lq-glass, lo pone portal.js en Chrome/Edge). Solo esa:
   la refracción SVG en las 9 a la vez se recalculaba en cada fotograma (las bolas giran) y la portada iba a 28 fps
   en el móvil y a 47 en una pantalla retina. En el móvil, nunca. El canto brilla arriba a la izquierda como un
   vidrio y un reflejo suave sigue al ratón. */
.p-app {
  background: linear-gradient(155deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .025) 40%, rgba(255, 255, 255, .012) 60%, rgba(255, 255, 255, .05) 100%);
  -webkit-backdrop-filter: blur(9px) saturate(185%) brightness(1.18);
  /* Sin blur en reposo (25/10/2026): en Chrome, al repintar solo un trozo de la pantalla (escribir en Halo, un clic), el blur
     se recalculaba solo en ese trozo y dejaba una línea vertical tenue en las tarjetas. Detrás solo hay degradados muy
     suaves: sin blur cambia 1-2 tonos de 255 (no se ve). Al pasar el ratón sigue con blur y refracción. */
  backdrop-filter: saturate(185%) brightness(1.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(255, 255, 255, .08), inset 0 0 0 .5px rgba(255, 255, 255, .16),
    inset 0 0 28px rgba(255, 255, 255, .035), 0 22px 56px rgba(0, 0, 0, .5); }
/* el canto: un borde de luz que se va apagando hacia abajo a la derecha */
.p-app::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .1) 28%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .06) 78%, rgba(255, 255, 255, .28));
  -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); }
/* el reflejo que sigue al ratón (y al dedo al arrastrar) */
.p-app::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(240px circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 45%, transparent 70%); }
.p-app:hover::after, .p-app.lift::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .p-app:hover, .p-app.lift { backdrop-filter: blur(5px) var(--lq-glass, ) blur(4px) saturate(185%) brightness(1.18); } }
.p-app:not(.p-app-soon):hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(255, 255, 255, .1), inset 0 0 0 .5px rgba(255, 255, 255, .22),
    inset 0 0 34px rgba(255, 255, 255, .05), 0 26px 64px rgba(0, 0, 0, .55); }
.p-app-ic { background: rgba(255, 255, 255, .07); }

/* ---------- reorganizar (mantener pulsada una) ---------- */
.p-apps { position: relative; }   /* las tarjetas miden su hueco respecto a la rejilla (offsetLeft/Top) */
.p-app { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
/* la que se levanta: una gota de cristal (su forma, su posición y el temblor de las demás los mueve gel.js) */
.p-app.lift, .p-app.landing { z-index: 5; will-change: transform, border-radius; }
.p-app.lift { cursor: grabbing;
  background: linear-gradient(155deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .035) 45%, rgba(255, 255, 255, .07) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 .5px rgba(255, 255, 255, .26), inset 0 0 40px rgba(255, 255, 255, .06), 0 40px 80px rgba(0, 0, 0, .6); }
.p-apps.reorder .p-app { cursor: grab; }
.p-app .p-app-ic { translate: var(--g-tl-x, 0px) var(--g-tl-y, 0px); }   /* el icono sigue a la esquina (gel.js) */

/* ---------- portada de los alumnos de Studio (03/11/2026, Dani) ----------
   Cloud, Studio y TrialReels en grande arriba (las tres del mismo tamaño, fijas: data-fixed) y las demás apps en tarjetas
   pequeñas debajo, con el icono a la izquierda (apps.BIG, portal.html). Mismo cristal y mismo gel que las de siempre. */
.p-apps-big { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-apps-big .p-app { min-height: 240px; }
.p-apps-mini { margin-top: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.p-apps-mini .p-app { flex-direction: row; align-items: center; gap: 14px; min-height: 0; padding: 14px; border-radius: 22px; }
.p-apps-mini .p-app-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; }
.p-apps-mini .p-app-ic .ic { width: 22px; height: 22px; }
.p-apps-mini .p-app-txt { margin: 0; gap: 2px; min-width: 0; }
.p-apps-mini .p-app-txt b { font-size: 15.5px; }
.p-apps-mini .p-app-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
@media (max-width: 520px) {
  .p-apps-big { grid-template-columns: 1fr; }   /* en el móvil, una debajo de otra (de tres en fila no caben) */
  .p-apps-big .p-app { min-height: 150px; }
  .p-apps-mini { margin-top: 12px; grid-template-columns: 1fr 1fr; gap: 10px; }
  .p-apps-mini .p-app { gap: 10px; padding: 12px; border-radius: 20px; }
  .p-apps-mini .p-app-ic { width: 36px; height: 36px; border-radius: 12px; }
  .p-apps-mini .p-app-ic .ic { width: 19px; height: 19px; }
  .p-apps-mini .p-app-txt b { font-size: 14px; }
  .p-apps-mini .p-app-txt span { display: none; }
}


/* ---------- juegos (a063.es/games, público): las mismas tarjetas, sin reorganizar; con portada si el juego la trae ---------- */
.p-game { gap: 16px; }
.p-game-cover { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14); translate: var(--g-tl-x, 0px) var(--g-tl-y, 0px); }
.p-game .p-app-txt { margin-top: auto; }
.p-game .p-app-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .p-game-cover { border-radius: 14px; } }

/* ficha del juego (botón «i» de la tarjeta y su diálogo, a063.es/games): superficie opaca porque lleva un vídeo (nada de blur detrás de algo que se mueve) */
.p-game-i { position: absolute; top: 30px; right: 30px; z-index: 2; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(0, 0, 0, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 .5px rgba(255, 255, 255, .28), 0 4px 14px rgba(0, 0, 0, .4);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background .2s; }
.p-game-i:hover { background: rgba(0, 0, 0, .72); }
.p-game-i:active { transform: scale(.92); }
.p-game-i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-game-i:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
@media (max-width: 520px) { .p-game-i { top: 24px; right: 24px; width: 32px; height: 32px; } .p-game-i svg { width: 18px; height: 18px; } }
.gm-dlg { width: min(760px, calc(100vw - 24px)); padding: 0 0 22px; overflow: auto; background: #101012; -webkit-backdrop-filter: none; backdrop-filter: none; }
.gm-dlg[open] { display: block; }
.gm-dlg .gm-close { position: absolute; top: 12px; right: 12px; z-index: 3; background: rgba(0, 0, 0, .55); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); }
.gm-stage { position: relative; aspect-ratio: 16 / 10; background: #000; border-radius: 30px 30px 0 0; overflow: hidden; }
.gm-video, .gm-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.gm-video[hidden], .gm-shot[hidden] { display: none; }
.gm-dlg.gm-empty .gm-stage { display: none; }
.gm-thumbs { display: flex; gap: 8px; padding: 12px 18px 4px; overflow-x: auto; scrollbar-width: thin; }
.gm-thumbs[hidden] { display: none; }
.gm-th { position: relative; flex: none; width: 92px; aspect-ratio: 16 / 10; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: #000; opacity: .6;
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16); transition: opacity .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.gm-th:hover { opacity: .9; }
.gm-th:active { transform: scale(.95); }
.gm-th.on { opacity: 1; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.gm-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gm-th.vid svg { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; fill: #fff; stroke: none; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .7)); }
.gm-dlg h2 { margin: 14px 22px 8px; font-size: 24px; }
.gm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 22px 12px; }
.gm-desc { margin: 0 22px 10px; line-height: 1.5; color: #d8d8dd; }
.gm-ctrl { margin: 0 22px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.gm-ctrl:empty { display: none; }
.gm-ctrl b { color: var(--ink); font-weight: 500; }
.gm-dlg .p-dlg-acts { margin: 18px 22px 0; }
@media (max-width: 520px) { .gm-stage { border-radius: 24px 24px 0 0; } .gm-th { width: 76px; } .gm-dlg h2, .gm-tags, .gm-desc, .gm-ctrl { margin-left: 16px; margin-right: 16px; } .gm-dlg .p-dlg-acts { margin: 16px 16px 0; } .gm-dlg .p-dlg-acts .p-btn { width: 100%; } }

/* ---------- Convertidor (a063.es/convertir) ---------- */
.cv { max-width: 760px; padding-top: 3vh; }
.cv .p-hello { margin-bottom: 8px; }
.cv-lead { margin: 0 0 22px; color: var(--muted); }
.cv-new { gap: 16px; }
.cv-drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 34px 20px; border-radius: 22px; cursor: pointer; text-align: center;
  background: rgba(255, 255, 255, .03); border: 1.5px dashed rgba(255, 255, 255, .16); transition: background .25s, border-color .25s, padding .35s cubic-bezier(.25, 1.2, .4, 1); }
.cv-drop:hover, .cv-drop.over { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .4); }
.cv-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cv-drop:focus-within { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.cv-drop b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.cv-drop > span:last-child { color: var(--muted); font-size: 13.5px; }
.cv-drop-ic { width: 54px; height: 54px; margin-bottom: 6px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); box-shadow: var(--lq); }
.cv-drop-ic svg, .cv-ic svg, .cv-x svg, .cv-dl svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cv-drop-ic svg { width: 26px; height: 26px; }
/* con archivos elegidos, la zona se encoge a una línea («Añadir más») */
.cv-drop.small { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 14px; row-gap: 0; padding: 12px 16px; }
.cv-drop.small .cv-drop-ic { grid-row: span 2; width: 40px; height: 40px; margin: 0; border-radius: 13px; }
.cv-drop.small .cv-drop-ic svg { width: 20px; height: 20px; }
.cv-drop.small b { font-size: 15px; }
.cv-drop.small > span:last-child { font-size: 12.5px; }

.cv-picked, .cv-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cv-file, .cv-job { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 4px; border-top: 1px solid rgba(255, 255, 255, .06); }
.cv-file:first-child, .cv-job:first-child { border-top: 0; }
.cv-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); }
.cv-ic svg { width: 20px; height: 20px; }
.cv-ic .cv-orb { width: 28px; height: 28px; }
.cv-ic .cv-orb ellipse { stroke-width: 2.4px; }
.cv-ic .cv-orb .orb-outer { stroke-width: 8; }
.cv-txt { display: grid; gap: 2px; min-width: 0; }
.cv-txt b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-txt > span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-job.bad .cv-state { color: #ff6961; }
.cv-bar { display: block; height: 4px; margin-top: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.cv-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ink); transition: width .4s cubic-bezier(.2, .8, .3, 1); }
.cv-bar[hidden] { display: none; }
.cv-acts { display: flex; align-items: center; gap: 6px; }
.cv-x { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: var(--muted);
  background: none; transition: background .2s, color .2s; }
.cv-x:hover { background: rgba(255, 255, 255, .08); color: var(--ink); }
.cv-x svg { width: 18px; height: 18px; }
.cv-dl svg { width: 16px; height: 16px; }
.cv-dl[hidden] { display: none; }
a.p-btn { text-decoration: none; }

.cv-opts { display: grid; gap: 14px; padding-top: 4px; }
.cv-opts[hidden] { display: none; }
#targets { display: grid; gap: 14px; }
.cv-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px; }
.cv-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cv-row .p-seg { justify-self: start; }
.cv-fmts { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-fmts button { border: 0; padding: 8px 14px; border-radius: 999px; cursor: pointer; font: 600 13px var(--mono); letter-spacing: .02em; color: var(--muted);
  background: rgba(255, 255, 255, .055); box-shadow: var(--lq); transition: background .2s, color .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.cv-fmts button:hover { background: rgba(255, 255, 255, .1); color: var(--ink); }
.cv-fmts button:active { transform: scale(.94); }
.cv-fmts button.on { background: var(--ink); color: #000; box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.cv-qnote { margin-top: -6px; font-size: 13px; }
.cv-go { width: 100%; height: 52px; font-size: 16px; }
.cv-new > .p-note.bad { margin-top: -6px; }
.cv-done { margin-top: 8px; }
.cv-done .p-soon-title { margin-top: 36px; }
.cv-jobs { padding: 8px 20px; border-radius: 28px; background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .08); margin-bottom: 12px; }
@media (max-width: 520px) {
  .cv-row { grid-template-columns: 1fr; gap: 8px; }
  .cv-jobs { padding: 4px 14px; border-radius: 24px; }
  .cv-dl span { display: none; }                         /* en el móvil, solo la flecha */
  .cv-dl { padding: 9px; }
  .cv-drop { padding: 26px 16px; }
}

/* ---------- Descargador (a063.es/descargar): las mismas piezas que el Convertidor ---------- */
.dl-field { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border-radius: 999px; background: rgba(255, 255, 255, .055); box-shadow: var(--lq);
  transition: box-shadow .25s, background .25s; }
.dl-field:focus-within { background: rgba(255, 255, 255, .08); box-shadow: var(--lq), 0 0 0 2px rgba(255, 255, 255, .5); }
.dl-field input { flex: 1; min-width: 0; height: 42px; border: 0; outline: none; background: none; font-size: 16px; }
.dl-field input::placeholder { color: rgba(255, 255, 255, .25); }
.cv-row[hidden] { display: none; }
.cv-go:disabled { opacity: .6; }
/* la miniatura del vídeo (16:9) en lugar del icono */
.dl-job { grid-template-columns: auto minmax(0, 1fr) auto; }
.dl-thumb { width: 72px; height: 44px; border-radius: 11px; overflow: hidden; }
.dl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 520px) { .dl-thumb { width: 60px; height: 38px; border-radius: 10px; } }
.cv-job.bad .cv-state { white-space: normal; }        /* el error, entero */

/* ---------- Subtitulador (a063.es/subtitular): piezas del Convertidor + editor con vista previa ---------- */
/* Las mismas fuentes que usa ffmpeg (libass) para quemar los subtítulos: la vista previa mide con ellas */
@font-face { font-family: "Montserrat Black"; src: url("subfonts/Montserrat-Black.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Anton"; src: url("subfonts/Anton-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Bebas Neue"; src: url("subfonts/BebasNeue-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Poppins Black"; src: url("subfonts/Poppins-Black.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Poppins Bold"; src: url("subfonts/Poppins-Bold.ttf") format("truetype"); font-display: block; }
.st.editing { max-width: 1180px; padding-top: 2vh; }
.st-src { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.st-lang { display: flex; align-items: center; gap: 12px; }
.st-lang .p-input, .st-lang .lq-select { width: 170px; height: 42px; }
.st-src .p-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-job.ready { cursor: pointer; }
.st-retry svg { width: 15px; height: 15px; }
.st-pause svg { width: 16px; height: 16px; }
.st-job.ready:hover b { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.st-open[hidden] { display: none; }
.cv-x.sure { width: auto; padding: 0 12px; font-size: 13px; font-weight: 600; color: #ff6961; background: rgba(255, 69, 58, .14); }

.st-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; min-width: 0; }
.st-head .p-back { margin: 0; border: 0; background: none; cursor: pointer; font: inherit; flex: none; }
.st-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-saved { color: var(--muted); font-size: 13px; flex: none; }
.st-cols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.st-left { display: grid; justify-items: center; gap: 12px; min-width: 0; position: sticky; top: 76px; }
.st-stage { position: relative; overflow: hidden; border-radius: 22px; background: #000; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 80px rgba(0, 0, 0, .5); cursor: pointer; }
.st-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
.st-ov { position: absolute; inset: 0; pointer-events: none; }
.st-line { position: absolute; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: auto; cursor: grab; paint-order: stroke fill; font-kerning: normal; }
.st-stage.dragging .st-line { cursor: grabbing; }
.st-boxes { position: absolute; inset: 0; pointer-events: none; }
.st-box { color: transparent !important; pointer-events: none; }
.st-line.pop { animation: st-pop .17s linear; }
@keyframes st-pop { 0% { transform: translate(-50%, -50%) scale(.72); } 53% { transform: translate(-50%, -50%) scale(1.08); } 100% { transform: translate(-50%, -50%) scale(1); } }
.st-wait { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; background: rgba(0, 0, 0, .6); color: var(--ink); font-size: 14px; }
.st-wait[hidden] { display: none; }
.st-drag-tip { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; font-size: 12px; white-space: nowrap;
  color: rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .45); pointer-events: none; opacity: 0; transition: opacity .3s; }
.st-stage:hover .st-drag-tip:not(.gone) { opacity: 1; }
.st-stage.playing .st-drag-tip { opacity: 0; }
.st-play { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; max-width: 560px; }
.st-pp { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: var(--ink);
  background: rgba(255, 255, 255, .055); box-shadow: var(--lq); }
.st-pp svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.st-pp .i-pause, .st-pp.on .i-play { display: none; }
.st-pp.on .i-pause { display: inline; fill: none; }
.st-time { font: 500 12.5px var(--mono); color: var(--muted); min-width: 84px; text-align: right; }
.st-range { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 0; background: none; cursor: pointer; }
.st-range::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.st-range::-moz-range-track { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.st-seek::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--ink) var(--p, 0%), rgba(255, 255, 255, .12) var(--p, 0%)); }
.st-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7.5px; border-radius: 999px; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.st-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }

.st-right { display: grid; gap: 16px; min-width: 0; }
.st-tabs { justify-self: stretch; display: grid; grid-template-columns: 1fr 1fr; }
.st-pane { display: grid; gap: 14px; padding: 18px; border-radius: 24px; background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .08); }
.st-pane[hidden] { display: none; }
.st-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-preset { display: grid; gap: 2px; justify-items: center; align-content: start; padding: 10px 6px; border: 0; border-radius: 16px; cursor: pointer; color: var(--ink); text-align: center;
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: background .2s, box-shadow .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.st-preset:hover { background: rgba(255, 255, 255, .07); }
.st-preset:active { transform: scale(.96); }
.st-preset.on { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); }
.st-preset b { font-size: 13px; font-weight: 600; }
.st-preset > span:last-child { font-size: 11px; line-height: 1.3; color: var(--muted); }
.st-demo { display: grid; place-items: center; width: 100%; height: 46px; margin-bottom: 6px; border-radius: 10px; font-size: 17px; white-space: nowrap; color: #fff;
  background: linear-gradient(160deg, #3b4b5c, #1d2731); -webkit-text-stroke: 3px #000; paint-order: stroke fill; overflow: hidden; }
.st-demo-caja { -webkit-text-stroke: 0; font-size: 12px; }
.st-demo-caja > span { padding: 3px 6px; background: rgba(0, 0, 0, .72); }
.st-demo-clasico { font-size: 12px; -webkit-text-stroke: 2px #000; }
.st-demo-neon .on { text-shadow: 0 0 6px currentColor, 0 0 12px currentColor; }
.st-demo-pop { font-size: 21px; }
.st-demo-suave, .st-demo-escribir { font-size: 13px; }
.st-demo-suave { -webkit-text-stroke: 0; text-shadow: 0 0 4px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .6); }
.st-demo-escribir { -webkit-text-stroke-width: 2px; }
.st-demo-impacto { font-size: 19px; -webkit-text-stroke-width: 2px; }
.st-opt { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 12px; }
.st-opt[hidden] { display: none; }
.st-sw { grid-template-columns: minmax(0, 1fr) auto; font-size: 14.5px; }
.st-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.st-color { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); transition: box-shadow .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.st-color:active { transform: scale(.9); }
.st-color.on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 0 0 2px #0c0c0d, 0 0 0 4px var(--ink); }
#words button { min-width: 38px; }
.st-hint { font-size: 13px; }
.st-segs { display: grid; gap: 2px; max-height: min(56vh, 620px); overflow: auto; margin: 0 -8px; padding: 0 8px; overscroll-behavior: contain; }
.st-seg { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: start; padding: 4px; border-radius: 12px; transition: background .2s; }
.st-seg.now { background: rgba(255, 255, 255, .06); }
.st-at { margin-top: 5px; padding: 4px 0; border: 0; border-radius: 8px; cursor: pointer; font: 500 12px var(--mono); color: var(--muted); background: rgba(255, 255, 255, .05); }
.st-at:hover { color: var(--ink); background: rgba(255, 255, 255, .1); }
.st-txt { width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid transparent; border-radius: 10px; resize: none; overflow: hidden; outline: none;
  font-family: inherit; font-size: 15px; line-height: 1.45; color: var(--ink); background: none; }
.st-txt:hover { background: rgba(255, 255, 255, .03); }
.st-txt:focus { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .05); }

.st-actions { display: grid; gap: 10px; }
.st-actions [hidden] { display: none !important; }
.st-render { display: grid; gap: 6px; padding: 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, .05); font-size: 14px; }
.st-render.bad { color: #ff6961; }
.st-done { display: flex; gap: 10px; }
.st-done .p-btn { flex: 1; height: 50px; }
.st-done svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-link { justify-self: center; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .25); }
.st-link:hover { color: var(--ink); }

.st-pick { width: min(520px, calc(100vw - 24px)); }
.st-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: -4px 0 10px; font-size: 13.5px; color: var(--muted); }
.st-crumbs button { border: 0; background: none; padding: 4px 8px; border-radius: 8px; cursor: pointer; color: var(--muted); font: inherit; }
.st-crumbs button:hover, .st-crumbs button:last-of-type { color: var(--ink); }
.st-crumbs button:hover { background: rgba(255, 255, 255, .07); }
.st-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: min(52vh, 440px); overflow: auto; }
.st-item { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 8px; border: 0; border-radius: 14px;
  cursor: pointer; color: var(--ink); background: none; text-align: left; font: inherit; }
.st-item:hover { background: rgba(255, 255, 255, .07); }
.st-item.busy { opacity: .5; }
.st-item svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-chev svg { width: 16px; height: 16px; color: var(--muted); }
.st-list-wait, .st-list-empty { display: grid; place-items: center; padding: 26px; color: var(--muted); font-size: 14px; }
.st-list-wait .cv-orb { width: 40px; height: 40px; }

@media (max-width: 860px) {
  .st-cols { grid-template-columns: 1fr; gap: 18px; }
  .st-left { position: static; }
}
@media (max-width: 520px) {
  .st-pane { padding: 14px; border-radius: 22px; }
  .st-preset > span:last-child { display: none; }
  .st-demo { font-size: 12px; height: 38px; -webkit-text-stroke-width: 2px; }
  .st-demo-pop { font-size: 15px; }
  .st-demo-caja, .st-demo-clasico { font-size: 10px; }
  .st-src { flex-direction: column; align-items: stretch; }
  .st-src .p-btn { width: 100%; }
  .st-lang { justify-content: space-between; }
}

/* ---------- Editor de fotos (a063.es/fotos): pantalla completa; foto a la izquierda (arriba en el móvil) y herramientas ---------- */
body.fe-on { overflow: hidden; }
body.fe-wait { cursor: progress; }
.fe-src { justify-content: flex-end; }
.fe-src .p-note { margin-right: auto; }
.fe { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; background: rgba(0, 0, 0, .55); }
.fe[hidden] { display: none; }
.fe-bar { flex: none; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 14px; padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid rgba(255, 255, 255, .07); background: rgba(10, 10, 11, .7); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.fe-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-hist { display: flex; gap: 4px; }
.fe-ib { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: var(--ink);
  background: none; transition: background .2s, opacity .2s; touch-action: none; -webkit-user-select: none; user-select: none; }
.fe-ib:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.fe-ib:disabled { opacity: .3; cursor: default; }
.fe-ib svg, .fe-side .p-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fe-ib svg .fe-thin { stroke-width: 1; opacity: .6; }
.fe-save { padding: 9px 18px; }
.fe-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.fe-view { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.fe-view canvas { display: block; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.fe-view.marking canvas { cursor: crosshair; }
.fe-view.cropping canvas { cursor: move; }
.fe-badge { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); pointer-events: none; }
.fe-badge[hidden] { display: none; }
.fe-textin { position: absolute; transform: translate(-50%, -50%); min-width: 160px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 12px; outline: none;
  font: 20px "Poppins Bold", "Geist", sans-serif; text-align: center; background: rgba(0, 0, 0, .55); }
.fe-textin[hidden] { display: none; }
.fe-side { min-height: 0; overflow: auto; display: grid; align-content: start; gap: 14px; padding: 16px; border-left: 1px solid rgba(255, 255, 255, .07);
  background: rgba(10, 10, 11, .7); overscroll-behavior: contain; }
.fe-tabs { justify-self: stretch; display: grid; grid-template-columns: repeat(4, 1fr); }
.fe-tabs button { padding: 7px 4px; font-size: 13.5px; }
.fe-pane { display: grid; gap: 14px; }
.fe-pane[hidden] { display: none; }
.fe-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fe-filter { display: grid; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 12px; text-align: center; }
.fe-filter canvas { width: 100%; aspect-ratio: 1; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: box-shadow .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.fe-filter:hover canvas { transform: scale(1.03); }
.fe-filter.on { color: var(--ink); font-weight: 600; }
.fe-filter.on canvas { box-shadow: 0 0 0 2px #0c0c0d, 0 0 0 4px var(--ink); }
.fe-amt[hidden] { display: none; }
.fe-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fe-chips button { border: 0; padding: 8px 13px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--muted);
  background: rgba(255, 255, 255, .055); box-shadow: var(--lq); transition: background .2s, color .2s; }
.fe-chips button:hover { color: var(--ink); background: rgba(255, 255, 255, .1); }
.fe-chips button.on { background: var(--ink); color: #000; }
.fe-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fe-adj { display: grid; gap: 4px; }
.fe-adj-row { display: grid; gap: 0; padding: 6px 10px 2px; border-radius: 14px; transition: background .2s; }
.fe-adj-row:hover { background: rgba(255, 255, 255, .035); }
.fe-adj-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; }
.fe-adj-head b { font-weight: 500; color: var(--muted); }
.fe-adj-row.set .fe-adj-head b { color: var(--ink); }
.fe-adj-row.set .fe-adj-head b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 999px; background: #30d158; vertical-align: 2px; }
.fe-adj-head i { font: 500 12px var(--mono); font-style: normal; color: var(--muted); }
.fe-tools { justify-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); }
.fe-hint { font-size: 13px; }
.fe-dlg-acts { flex-wrap: wrap; }
.fe-dlg .p-seg { justify-self: start; }
.fe-dlg .st-opt[hidden] { display: none; }
.fe .st-wait { z-index: 2; }

@media (max-width: 860px) {
  .fe-main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .fe-side { max-height: 44vh; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .07); padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .fe-filters { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74px; overflow-x: auto; padding-bottom: 4px; margin: 0 -14px; padding-inline: 14px; }
  .fe-name { display: none; }
  .fe-hist { margin-right: auto; }
}

/* ---------- Editor de vídeos (a063.es/videos): inicio con piezas del Convertidor; editor a pantalla completa ---------- */
.ve-src { justify-content: flex-end; margin-top: 2px; }
.ve-src .p-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ve-thumb { background-color: #111; background-size: auto 100%; background-position: 0 0; background-repeat: no-repeat; }
.ve-cut { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ve-cut > span { display: grid; gap: 2px; padding: 9px 11px; border-radius: 13px; background: rgba(255, 255, 255, .05); min-width: 0; }
.ve-cut b { font: 500 13px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ve-when { grid-template-columns: 1fr 1fr; }
.ve-when > span { grid-template-columns: 1fr auto; align-items: center; }
.ve-when .cv-label { grid-column: 1 / -1; }
.ve-ta { height: auto; min-height: 78px; padding: 10px 14px; resize: vertical; font: inherit; line-height: 1.4; }
.ve-fonts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ve-font { height: 44px; border: 0; border-radius: 12px; cursor: pointer; color: var(--ink); background: rgba(255, 255, 255, .05); font-size: 19px; }
.ve-font:hover { background: rgba(255, 255, 255, .09); }
.ve-font.on { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); }

body.vx-on { overflow: hidden; }
.vx { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; background: #070708; color: var(--ink); }
.vx[hidden] { display: none; }
.vx.over::after { content: "Suelta para añadir"; position: absolute; inset: 10px; z-index: 50; display: grid; place-items: center; border: 2px dashed rgba(255, 255, 255, .45);
  border-radius: 20px; background: rgba(0, 0, 0, .55); font-weight: 600; pointer-events: none; }
.vx svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vx-ib { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: none; flex: none;
  transition: background .2s, opacity .2s, color .2s; }
.vx-ib:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.vx-ib:disabled { opacity: .3; cursor: default; }
.vx-ib svg { width: 19px; height: 19px; }
.vx-tog.on { color: #0a0a0a; background: var(--ink); }
.vx-tog.on:hover { background: #fff; }
.vx-sp { flex: 1; }

/* barra de arriba */
.vx-bar { flex: none; display: flex; align-items: center; gap: 6px; height: 54px; padding: 0 12px; padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid rgba(255, 255, 255, .07); background: #0b0b0c; }
.vx-name { min-width: 0; width: min(360px, 40vw); height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; outline: none; background: none;
  color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-overflow: ellipsis; }
.vx-name:hover { background: rgba(255, 255, 255, .05); }
.vx-name:focus { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .05); }
.vx-saved { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.vx-export { margin-left: 6px; padding: 8px 16px; gap: 7px; }
.vx-export svg { width: 17px; height: 17px; }
.vx-export.busy { background: rgba(255, 255, 255, .14); color: var(--ink); }

/* medios · visor · propiedades */
.vx-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 264px minmax(0, 1fr) 340px; }
.vx-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; }
.vx-sheet-head b { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.vx-close { display: none; }
.vx-lib, .vx-insp { min-height: 0; display: flex; flex-direction: column; background: #0b0b0c; }
.vx-lib { border-right: 1px solid rgba(255, 255, 255, .07); }
.vx-insp { border-left: 1px solid rgba(255, 255, 255, .07); }
.vx-lib-add { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.vx-lib-add .p-btn { gap: 6px; padding: 7px 11px; }
.vx-lib-add svg, .vx-macts svg { width: 15px; height: 15px; }
.vx-file { position: relative; overflow: hidden; }
.vx-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.vx-up { display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .05); font-size: 12.5px; color: var(--muted); }
.vx-up[hidden], .vx-up:empty { display: none; }
.vx-up .cv-orb { width: 20px; height: 20px; flex: none; }
.vx-media { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding: 2px 10px 12px; overscroll-behavior: contain; }
.vx-mc { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; row-gap: 5px; align-items: center; min-width: 0;
  padding: 6px; border-radius: 13px; background: rgba(255, 255, 255, .04); cursor: grab; transition: background .2s; }
.vx-mc .vx-mth { grid-row: 1 / 3; }
.vx-mc:hover { background: rgba(255, 255, 255, .08); }
.vx-mc.unused .vx-mth { opacity: .7; }
.vx-mth { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 10px; background: #151517 0 0 / auto 100% no-repeat; overflow: hidden; color: var(--muted); }
.vx-mth svg { width: 24px; height: 24px; }
.vx-mth.wave { background-size: 100% 70%; background-position: center; background-color: #10261a; }
.vx-mth b { position: absolute; right: 5px; bottom: 5px; padding: 1px 5px; border-radius: 6px; background: rgba(0, 0, 0, .7); font: 500 10.5px var(--mono); color: #fff; }
.vx-mc-audio .vx-mth { color: #9dffc3; }
.vx-mname { font-size: 12px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.vx-macts { display: flex; gap: 4px; }
.vx-madd, .vx-mdel { display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 26px; padding: 0 7px; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--ink); background: rgba(255, 255, 255, .08); font: inherit; font-size: 11.5px; font-weight: 600; }
.vx-madd { flex: 1; min-width: 0; }
.vx-madd:hover, .vx-mdel:hover { background: rgba(255, 255, 255, .16); }
.vx-mdel { width: 28px; padding: 0; color: var(--muted); }
.vx-mdel.sure { width: auto; padding: 0 8px; color: #ff6961; background: rgba(255, 69, 58, .14); }
.vx-hint { margin: 0; padding: 4px 14px 14px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.vx-media .vx-hint { grid-column: 1 / -1; padding: 10px 2px; }

.vx-view { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #050506; }
.vx-stagebox { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; position: relative; }
.vx-stagebox:fullscreen { background: #000; }
.vx-stage { position: relative; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 60px rgba(0, 0, 0, .6);
  user-select: none; -webkit-user-select: none; touch-action: none; width: 300px; height: 300px; }
.vx-bgblur { position: absolute; inset: 0; width: 100%; height: 100%; }
.vx-bgblur[hidden] { display: none; }
.vx-clips, .vx-imgs, .vx-texts { position: absolute; inset: 0; z-index: 0; }
.vx-imgs { z-index: 1; }
.vx-texts { z-index: 2; }
.vx-layer { position: absolute; inset: 0; overflow: hidden; visibility: hidden; transform-origin: 50% 50%; }
.vx-layer.on { visibility: visible; }
.vx-el { position: absolute; display: block; max-width: none; object-fit: fill; transform-origin: 50% 50%; }
.vx-black { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.vx-imgl { position: absolute; display: block; max-width: none; cursor: move; -webkit-user-drag: none; }
.vx-imgl[hidden], .vx-text[hidden] { display: none; }
.vx-text { position: absolute; white-space: pre; text-align: center; paint-order: stroke fill; cursor: move; font-kerning: normal; transform-origin: 50% 50%; }
.vx-text.box span { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vx-text.empty { opacity: .45; }
.vx-guides { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.vx-guides[hidden] { display: none; }
.vx-guides i { position: absolute; background: rgba(255, 255, 255, .28); }
.vx-guides .g1, .vx-guides .g2 { top: 0; bottom: 0; width: 1px; }
.vx-guides .g1 { left: 33.333%; }
.vx-guides .g2 { left: 66.666%; }
.vx-guides .g3, .vx-guides .g4 { left: 0; right: 0; height: 1px; }
.vx-guides .g3 { top: 33.333%; }
.vx-guides .g4 { top: 66.666%; }
.vx-guides .safe { position: absolute; left: 6%; right: 16%; top: 12%; bottom: 20%; border: 1.5px dashed rgba(255, 225, 53, .7); border-radius: 6px; }
.vx-selbox { position: absolute; z-index: 45; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); pointer-events: none; }
.vx-selbox[hidden] { display: none; }
.vx-selbox.dim { border-style: dashed; opacity: .6; }
.vx-selbox .h { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 4px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); pointer-events: auto; touch-action: none; }
.vx-selbox .tl { left: 0; top: 0; cursor: nwse-resize; }
.vx-selbox .tr { right: 0; top: 0; cursor: nesw-resize; }
.vx-selbox .bl { left: 0; bottom: 0; cursor: nesw-resize; }
.vx-selbox .br { right: 0; bottom: 0; cursor: nwse-resize; }
.vx-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--muted); font-size: 14px; }
.vx-empty[hidden] { display: none; }
.vx .st-wait { z-index: 46; }
.vx-fx { position: absolute; width: 0; height: 0; }
.vx-transport { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; height: 54px; padding: 0 12px;
  border-top: 1px solid rgba(255, 255, 255, .06); background: #0b0b0c; }
.vx-tc { font: 500 12.5px var(--mono); color: var(--ink); white-space: nowrap; }
.vx-total { color: var(--muted); }
.vx-tbtns { display: flex; align-items: center; gap: 4px; }
.vx-tright { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.vx-pp { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: #0a0a0a; background: var(--ink); }
.vx-pp:hover { background: #fff; }
.vx-pp svg { width: 20px; height: 20px; fill: currentColor; stroke-width: 2.4; }
.vx-pp .i-pause, .vx-pp.on .i-play { display: none; }
.vx-pp.on .i-pause { display: inline; fill: none; }

/* propiedades */
.vx-insp-body { flex: 1; min-height: 0; overflow: auto; display: grid; align-content: start; gap: 16px; padding: 4px 14px 18px; overscroll-behavior: contain; }
.vx-sec { display: grid; gap: 12px; padding-top: 4px; }
.vx-sec + .vx-sec { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .06); }
.vx-sec h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.vx-name2 { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-row { display: grid; gap: 8px; }
.vx-sw { grid-template-columns: minmax(0, 1fr) auto; align-items: center; font-size: 14px; }
.vx-sl { display: grid; gap: 2px; }
.vx-slh { display: flex; align-items: baseline; gap: 8px; }
.vx-slh .cv-label { flex: 1; }
.vx-slh b { font: 500 12px var(--mono); color: var(--ink); }
.vx-rst { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; color: var(--muted); background: none; font-size: 13px; }
.vx-rst:hover { color: var(--ink); background: rgba(255, 255, 255, .08); }
.vx-seg { justify-self: stretch; display: flex; flex-wrap: wrap; border-radius: 20px; }
.vx-seg button { flex: 1; padding-inline: 8px; font-size: 13px; }
.vx-itabs { justify-self: stretch; display: grid; border-radius: 16px; }
.vx-itabs button { padding: 7px 2px; font-size: 12.5px; }
.vx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 0; border-radius: 999px; cursor: pointer; color: var(--muted);
  background: rgba(255, 255, 255, .06); font: inherit; font-size: 12.5px; font-weight: 500; }
.vx-chip:hover { color: var(--ink); background: rgba(255, 255, 255, .1); }
.vx-chip.on { color: #0a0a0a; background: var(--ink); }
.vx-fmts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vx-fmts .vx-chip { flex-direction: column; justify-content: center; gap: 5px; padding: 9px 4px; border-radius: 12px; }
.vx-ratio { display: block; border: 1.5px solid currentColor; border-radius: 3px; }
.vx-filters, .vx-trans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vx-filters .vx-chip, .vx-trans .vx-chip { justify-content: center; border-radius: 12px; padding: 9px 4px; }
.vx-size { display: flex; align-items: center; gap: 6px; }
.vx-size .p-input { height: 38px; padding: 0 10px; font: 500 13.5px var(--mono); min-width: 0; }
.vx-size > span { color: var(--muted); }
.vx-color { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.vx-color::-webkit-color-swatch-wrapper { padding: 0; opacity: 0; }
.vx-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.vx-btns .p-btn:disabled { opacity: .35; cursor: default; }
.vx-del { color: #ff6961; }
.vx-tip { margin: -2px 0 0; font-size: 12px; line-height: 1.4; }
.vx-none { margin: 4px 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }

/* línea de tiempo */
.vx-tlbox { flex: none; height: clamp(230px, 36vh, 440px); display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, .08); background: #0b0b0c; }
.vx-tools { flex: none; display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.vx-tb { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 9px; cursor: pointer; color: var(--ink); background: none;
  font: inherit; font-size: 12.5px; font-weight: 500; }
.vx-tb:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.vx-tb:disabled { opacity: .3; cursor: default; }
.vx-tb svg { width: 17px; height: 17px; }
.vx-tb.busy { color: #9dffc3; }
.vx-tsep { width: 1px; height: 20px; margin: 0 4px; background: rgba(255, 255, 255, .1); }
.vx-zoom { width: 110px; height: 20px; accent-color: #fff; }
.vx-mob { display: none; }
.vx-tl { flex: 1; min-height: 0; display: flex; }
.vx-heads { display: none; }
.vx-scroll { flex: 1; min-width: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.vx-track { position: relative; min-width: 100%; min-height: 100%; user-select: none; -webkit-user-select: none; }
.vx-ruler { position: sticky; top: 0; z-index: 6; height: 24px; box-shadow: inset 76px 0 0 #0e0e10; background: #0b0b0c; border-bottom: 1px solid rgba(255, 255, 255, .06); cursor: ew-resize; touch-action: none; }
.vx-ruler span { position: absolute; top: 4px; padding-left: 4px; border-left: 1px solid rgba(255, 255, 255, .2); font: 500 10px var(--mono); color: var(--muted); line-height: 14px; white-space: nowrap; pointer-events: none; }
.vx-lanes { position: relative; padding-bottom: 8px; }
.vx-lane { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .045); }
.vx-lane-video { background: rgba(255, 255, 255, .025); }
.vx-lh { position: sticky; left: 0; z-index: 3; display: flex; align-items: center; gap: 6px; width: 76px; height: 100%; padding: 0 10px; color: var(--muted); font-size: 11.5px;
  pointer-events: none; background: #0e0e10; border-right: 1px solid rgba(255, 255, 255, .07); }
.vx-lh svg { width: 13px; height: 13px; }
.vx-lempty { position: absolute; left: 90px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, .22); font-size: 12px; white-space: nowrap; pointer-events: none; }
.vx-it { position: absolute; top: 3px; bottom: 3px; border-radius: 8px; overflow: hidden; cursor: pointer; touch-action: pan-x pan-y;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.vx-it.on { box-shadow: inset 0 0 0 2px #fff; z-index: 2; touch-action: none; cursor: grab; }
.vx-it.dragging { z-index: 4; opacity: .85; cursor: grabbing; }
.vx-it > span:not(.vx-h):not(.vx-tiles):not(.vx-cwave) { position: relative; z-index: 1; display: block; padding: 0 10px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.vx-it.on > span:not(.vx-h):not(.vx-tiles):not(.vx-cwave) { padding: 0 20px; }
.vx-clip { background: linear-gradient(135deg, #2a2a2e, #1b1b1e); }
.vx-tiles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vx-tiles i { position: absolute; top: 0; height: 100%; background-repeat: no-repeat; }
.vx-cwave { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background-repeat: no-repeat; opacity: .55; pointer-events: none;
  background-color: rgba(0, 0, 0, .45); }
.vx-it > .vx-lbl { position: absolute !important; left: 6px; top: 4px; padding: 1px 6px !important; border-radius: 6px; background: rgba(0, 0, 0, .65); font: 500 10.5px var(--mono) !important; color: #fff; }
.vx-it.on > .vx-lbl { left: 20px; }
.vx-lbl svg { width: 11px; height: 11px; vertical-align: -1px; }
.vx-txt { background: rgba(255, 225, 53, .2); box-shadow: inset 0 0 0 1px rgba(255, 225, 53, .45); color: #ffe98a; }
.vx-txt > span { line-height: 24px; }
.vx-txt.on { box-shadow: inset 0 0 0 2px #ffe135; }
.vx-imgit { background: #3a2550 0 0 / auto 100% repeat-x; box-shadow: inset 0 0 0 1px rgba(177, 140, 255, .55); color: #fff; }
.vx-imgit > span { line-height: 28px; text-shadow: 0 1px 3px #000; }
.vx-imgit.on { box-shadow: inset 0 0 0 2px #b18cff; }
.vx-aud { background-color: rgba(61, 255, 138, .12); box-shadow: inset 0 0 0 1px rgba(61, 255, 138, .4); color: #9dffc3; }
.vx-aud > span { line-height: 16px; padding-top: 2px !important; }
.vx-aud.on { box-shadow: inset 0 0 0 2px #3dff8a; }
.vx-h { position: absolute; top: 0; bottom: 0; z-index: 3; width: 14px; display: grid; place-items: center; cursor: ew-resize; touch-action: none; background: #fff; }
.vx-h.l { left: 0; }
.vx-h.r { right: 0; }
.vx-h i { width: 2.5px; height: 40%; max-height: 18px; border-radius: 2px; background: #000; opacity: .55; pointer-events: none; }
.vx-txt .vx-h { background: #ffe135; }
.vx-imgit .vx-h { background: #b18cff; }
.vx-aud .vx-h { background: #3dff8a; }
.vx-join { position: absolute; top: 50%; z-index: 3; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; border: 0; border-radius: 7px; display: grid; place-items: center;
  cursor: pointer; color: var(--muted); background: #1f1f22; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 2px 8px rgba(0, 0, 0, .5); opacity: .75; transition: opacity .2s, transform .2s; }
.vx-join:hover { opacity: 1; transform: scale(1.12); color: var(--ink); }
.vx-join.on { opacity: 1; color: #0a0a0a; background: var(--ink); }
.vx-join svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.vx-ins { position: absolute; top: 24px; bottom: 0; z-index: 7; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #4da3ff; box-shadow: 0 0 10px #4da3ff; pointer-events: none; }
.vx-ins[hidden], .vx-snapline[hidden] { display: none; }
.vx-snapline { position: absolute; top: 24px; bottom: 0; z-index: 7; width: 1px; background: #ffe135; pointer-events: none; }
.vx-head { position: absolute; top: 0; bottom: 0; z-index: 8; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; box-shadow: 0 0 6px rgba(0, 0, 0, .7); }
.vx-head i { position: sticky; top: 0; display: block; width: 14px; height: 20px; margin-left: -6px; border-radius: 4px 4px 7px 7px; background: #fff; pointer-events: auto; cursor: ew-resize; touch-action: none; }

/* diálogos */
.vx-dlg { width: min(460px, calc(100vw - 24px)); gap: 14px; }
.vx-dlg[open] { display: grid; }                 /* solo abierto: si no, se veía en el inicio */
.vx-dlg h2 { margin: 0; }
.vx-exp-sum { display: flex; flex-wrap: wrap; gap: 6px; }
.vx-exp-sum > * { padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .07); font: 500 12.5px var(--mono); }
.vx-dlg .st-done { display: flex; gap: 10px; }
.vx-dlg .st-done .p-btn { flex: 1; }
.vx-dlg .st-done svg, .vx-export svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vx-dlg [hidden] { display: none !important; }
.vx-rec { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); }
.vx-recdot { width: 12px; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .25); }
.vx-recdot.on { background: #ff453a; animation: vx-blink 1s infinite; }
@keyframes vx-blink { 50% { opacity: .3; } }
.vx-rec canvas { flex: 1; min-width: 0; height: 40px; }
.vx-keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.vx-keys dt { font: 500 12.5px var(--mono); padding: 3px 8px; border-radius: 7px; background: rgba(255, 255, 255, .08); justify-self: start; }
.vx-keys dd { margin: 0; align-self: center; color: var(--muted); }

/* móvil: visor, línea de tiempo y herramientas; Medios y Propiedades suben como hojas */
@media (max-width: 899px) {
  .vx-desk { display: none !important; }
  .vx-mob { display: inline-flex; }
  .vx-bar { height: 50px; padding: 0 6px; }
  .vx-name { width: auto; flex: 1; font-size: 14px; }
  .vx-saved { display: none; }
  .vx-export span { display: none; }
  .vx-export { padding: 8px 12px; }
  .vx-main { display: flex; }
  .vx-view { flex: 1; }
  .vx-transport { height: 50px; grid-template-columns: auto 1fr auto; padding: 0 6px; }
  .vx-transport .vx-tbtns { justify-content: center; }
  .vx-tright #full, .vx-tright #loop { display: none; }
  .vx-total { display: none; }
  .vx-tbtns #toStart, .vx-tbtns #toEnd { display: none; }
  .vx-tlbox { height: clamp(210px, 38vh, 330px); }
  .vx-tools { overflow-x: auto; gap: 2px; padding: 0 6px; scrollbar-width: none; }
  .vx-tools::-webkit-scrollbar { display: none; }
  .vx-tb { flex-direction: column; gap: 1px; height: 40px; padding: 0 8px; font-size: 10.5px; }
  .vx-tsep, .vx-zoom, #zoomIn, #zoomOut { display: none; }
  .vx-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: max(300px, 46vh); border: 0; border-top: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .6); transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .8, .3, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  .vx-sheet.open { transform: none; }
  .vx-close { display: grid; }
  .vx-media { grid-template-columns: 1fr 1fr; }
  .vx-lh { width: 34px; }
  .vx-lh { padding: 0 10px; }
  .vx-ruler { box-shadow: inset 34px 0 0 #0e0e10; }
  .vx-insp-body { padding-bottom: 28px; }
  .vx-lh span { display: none; }
  .vx-lempty { left: 34px; }
}
@media (max-width: 420px) {
  .vx-media { grid-template-columns: minmax(0, 1fr); }
  .vx-fmts, .vx-filters, .vx-trans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* editor de vídeos · 3.ª tanda: menús, clic derecho, paneles de tamaño libre, barra del visor, subtítulos */
.vx-main { grid-template-columns: var(--lib-w, 264px) 5px minmax(0, 1fr) 5px var(--insp-w, 340px); }
.vx.no-lib .vx-main { grid-template-columns: 0 0 minmax(0, 1fr) 5px var(--insp-w, 340px); }
.vx.no-insp .vx-main { grid-template-columns: var(--lib-w, 264px) 5px minmax(0, 1fr) 0 0; }
.vx.no-lib.no-insp .vx-main { grid-template-columns: 0 0 minmax(0, 1fr) 0 0; }
.vx.no-lib .vx-lib, .vx.no-insp .vx-insp, .vx.no-lib [data-split="lib"], .vx.no-insp [data-split="insp"] { visibility: hidden; overflow: hidden; }
.vx-split { position: relative; z-index: 4; background: #0b0b0c; touch-action: none; transition: background .15s; }
.vx-split::after { content: ""; position: absolute; border-radius: 2px; background: rgba(255, 255, 255, .14); transition: background .15s; }
.vx-split.v { cursor: col-resize; }
.vx-split.v::after { left: 1.5px; top: 50%; width: 2px; height: 34px; margin-top: -17px; }
.vx-split.h { flex: none; height: 6px; cursor: row-resize; border-top: 1px solid rgba(255, 255, 255, .06); }
.vx-split.h::after { top: 2px; left: 50%; width: 40px; height: 2px; margin-left: -20px; }
.vx-split:hover, .vx-split.on { background: rgba(77, 163, 255, .25); }
.vx-split:hover::after, .vx-split.on::after { background: #4da3ff; }
.vx-tlbox { height: var(--tl-h, clamp(230px, 36vh, 440px)); border-top: 0; }

/* barra de menús */
.vx-menus { display: flex; align-items: center; gap: 1px; margin: 0 4px; }
.vx-menus button { height: 30px; padding: 0 10px; border: 0; border-radius: 8px; cursor: pointer; color: rgba(245, 245, 247, .82); background: none; font: inherit; font-size: 13px; }
.vx-menus button:hover, .vx-menus button.on { color: var(--ink); background: rgba(255, 255, 255, .09); }
.vx-menu { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.vx-menu[hidden] { display: none; }
.vx-mpanel { position: fixed; min-width: 230px; max-width: min(340px, calc(100vw - 12px)); max-height: calc(100vh - 12px); overflow: auto; padding: 5px; border-radius: 14px;
  pointer-events: auto; background: rgba(28, 28, 31, .96);   /* sin difuminado: con el fondo al 96 % no se notaba y costaba mucho */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 50px rgba(0, 0, 0, .6); animation: vx-menu .12s ease-out; }
@keyframes vx-menu { from { opacity: 0; transform: translateY(-3px); } }
.vx-mpanel hr { height: 1px; margin: 4px 8px; border: 0; background: rgba(255, 255, 255, .09); }
.vx-mhead { padding: 6px 10px 4px; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-mi { width: 100%; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 30px; padding: 4px 10px 4px 6px; border: 0; border-radius: 8px;
  cursor: pointer; color: var(--ink); background: none; font: inherit; font-size: 13px; text-align: left; }
.vx-mi:hover:not(:disabled), .vx-mi.open { background: #2f6fd6; }
.vx-mi:disabled { opacity: .38; cursor: default; }
.vx-mi.bad { color: #ff6961; }
.vx-mi.bad:hover:not(:disabled) { color: #fff; background: #c9372c; }
.vx-mck { font-size: 12px; color: var(--ink); text-align: center; }
.vx-ml { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-mk { color: rgba(245, 245, 247, .5); font: 500 11.5px var(--mono); white-space: nowrap; }
.vx-mi:hover .vx-mk, .vx-mi.open .vx-mk { color: rgba(255, 255, 255, .85); }

/* barra del visor: formato a la vista */
.vx-vbar { flex: none; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 10px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.vx-fmtbtn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 9px; border: 0; border-radius: 9px; cursor: pointer; color: var(--ink);
  background: rgba(255, 255, 255, .07); font: inherit; font-size: 13px; }
.vx-fmtbtn:hover { background: rgba(255, 255, 255, .12); }
.vx-fmtbtn b { font-weight: 600; }
.vx-fmtbtn > span:not(.vx-ratio) { color: var(--muted); font: 500 11.5px var(--mono); }
.vx-fmtbtn svg { width: 15px; height: 15px; }
.vx-fitseg { padding: 3px; }
.vx-fitseg button { padding: 5px 10px; font-size: 12.5px; }
.vx-vinfo { color: var(--muted); font: 500 11.5px var(--mono); white-space: nowrap; }
.vx-vg { position: absolute; z-index: 44; pointer-events: none; background: #ff4fd8; box-shadow: 0 0 6px rgba(255, 79, 216, .8); }
.vx-vg[hidden] { display: none; }
.vx-vg-v { top: 0; bottom: 0; width: 1px; margin-left: -.5px; }
.vx-vg-h { left: 0; right: 0; height: 1px; margin-top: -.5px; }
.vx-pop { position: fixed; z-index: 150; width: min(400px, calc(100vw - 16px)); display: grid; gap: 12px; padding: 14px; border-radius: 18px;
  background: rgba(28, 28, 31, .97); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 50px rgba(0, 0, 0, .6); }
.vx-pop[hidden] { display: none; }
.vx-pophead { font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.vx-fmtgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.vx-fmtcard { display: grid; justify-items: center; gap: 3px; padding: 8px 2px 7px; border: 0; border-radius: 12px; cursor: pointer; color: var(--ink); background: rgba(255, 255, 255, .05); font: inherit; }
.vx-fmtcard:hover { background: rgba(255, 255, 255, .1); }
.vx-fmtcard.on { background: rgba(77, 163, 255, .22); box-shadow: inset 0 0 0 1.5px #4da3ff; }
.vx-fmtcard b { font-size: 12.5px; }
.vx-fmtcard > span:last-child { font: 500 9.5px var(--mono); color: var(--muted); }
.vx-fmtbox { display: grid; place-items: center; width: 40px; height: 40px; }
.vx-fmtcard .vx-ratio { border-width: 2px; border-radius: 4px; }
.vx-fmtcustom { display: grid; grid-template-columns: 1fr; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.vx-fmtcustom .p-btn { justify-self: end; }

/* subtítulos */
.vx-lane-sub { background: rgba(77, 163, 255, .04); }
.vx-subit { background: rgba(77, 163, 255, .2); box-shadow: inset 0 0 0 1px rgba(77, 163, 255, .5); color: #b8d8ff; }
.vx-subit > span { line-height: 22px; font-size: 10.5px !important; padding: 0 5px !important; }
.vx-subit.on { box-shadow: inset 0 0 0 2px #4da3ff; }
.vx-subit .vx-h { background: #4da3ff; width: 10px; }
.vx-subpresets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vx-subp { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 0; border-radius: 14px; cursor: pointer; color: var(--muted); background: rgba(255, 255, 255, .05); font: inherit; font-size: 12px; }
.vx-subp:hover { background: rgba(255, 255, 255, .09); }
.vx-subp.on { color: var(--ink); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); }
.vx-subdemo { display: grid; place-items: center; width: 100%; height: 40px; border-radius: 9px; background-color: #222 !important; font-size: 18px; paint-order: stroke fill; }
.vx-subdemo { background-image: linear-gradient(135deg, #3a3a40, #1c1c1f); }
.vx-dlg select.p-input { height: 42px; }

/* exportar */
.vx-exp { width: min(520px, calc(100vw - 24px)); }
.vx-outfmt .vx-chip { padding: 8px 12px; }
.vx-outfmt .vx-chip:disabled { opacity: .35; cursor: default; }
.vx-done { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-done .p-btn { flex: 1 1 140px; height: 46px; }
.vx-done svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vx-dlg .vx-sw small { display: block; font-size: 12px; }
.vx-dlg #expNote:empty { display: none; }

@media (max-width: 899px) {
  .vx-menus, .vx-split { display: none; }
  .vx-main { display: flex; }
  .vx-tlbox { height: var(--tl-h-m, clamp(210px, 38vh, 330px)); }
  .vx-vbar { height: 42px; padding: 0 6px; gap: 6px; }
  .vx-vinfo { display: none; }
  .vx-fmtbtn > span:not(.vx-ratio) { display: none; }
  .vx-fitseg button { padding: 5px 8px; font-size: 11.5px; }
  .vx-fmtgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vx-mpanel { min-width: 210px; }
}

/* Cloud en la portada: la bola quieta (solo gira la de Halo) */
.p-app-cloud .orb-ring { animation: none; }
.p-app-cloud .orb .r1 { transform: rotate(52deg) scaleY(1); }
.p-app-cloud .orb .r2 { transform: rotate(-58deg) scaleY(1); }

/* Bola de Halo de cristal (25/10/2026): vídeo hecho con IA, en AVIF animado (static/brand/halo.*; se hace con prototipos/halo-ia/make_halo.py)
   con transparencia. Sustituye a los anillos SVG en Halo y en las esperas (el SVG sigue dentro, oculto). */
.orb {
  background: url(brand/halo.png?v=2) center / contain no-repeat;
  background-image: image-set(url(brand/halo.avif?v=2) type("image/avif"), url(brand/halo.png?v=2) type("image/png"));
  overflow: hidden;
}
.orb > * { display: none; }
.orb .orb-ring { animation: none; }   /* los anillos ocultos no se animan: si no, la página se recalcula en cada fotograma */
@media (prefers-reduced-motion: reduce) { .orb { background-image: url(brand/halo.png?v=2); } }
/* La tarjeta de Cloud de la portada sigue con su bola de siempre; en el botón blanco de entrar, en negro */
.p-app-cloud .orb { background: none; overflow: visible; }
.p-app-cloud .orb > * { display: inline; }
.p-go .orb { filter: invert(1); }

/* ---------- Descifrador (a063.es/descifrar) ---------- */
.dc-tabs { margin: 0 0 18px; }
.dc section { display: grid; gap: 16px; }
.dc section[hidden] { display: none; }
.dc-text { height: auto; min-height: 84px; padding: 12px 18px; resize: vertical; font: inherit; }
.dc #readText { justify-self: start; }
.dc-results { display: grid; gap: 14px; scroll-margin-top: 90px; }
.dc-src { margin-top: 4px; }
.dc-hit, .dc-none { gap: 10px; }
.dc-none b { font-size: 17px; }
.dc-code { font-family: var(--mono); font-size: 26px; letter-spacing: .04em; margin-bottom: 6px; overflow-wrap: anywhere; }
.dc-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 14px; }
.dc-k { color: var(--muted); }
.dc-v { overflow-wrap: anywhere; }
.dc-v.mono, .dc-table td.mono { font-family: var(--mono); font-size: 13px; }
.dc-search { margin-bottom: 2px; }
.dc-count { text-transform: none; letter-spacing: 0; font-weight: 500; }
.dc-table { overflow-x: auto; }
.dc-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dc-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 10px 8px 0; white-space: nowrap; }
.dc-table td { padding: 9px 10px 9px 0; border-top: 1px solid rgba(255, 255, 255, .07); vertical-align: top; }
.dc-table td:last-child { overflow-wrap: anywhere; }
.dc-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dc-prev { grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 14px; }
.dc-prev-media { display: block; max-width: 220px; max-height: 220px; border-radius: 14px; background: #000; object-fit: contain; }
.dc-prev-audio { max-width: 100%; width: 260px; height: 40px; background: none; border-radius: 0; }
.dc-prev-text { margin: 0; grid-column: 1 / -1; max-height: 150px; overflow: auto; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04);
  font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
.dc-prev-ic { display: block; width: 56px; height: 56px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .07); color: var(--muted); }
.dc-prev-cap { display: grid; gap: 4px; min-width: 0; }
.dc-prev-cap b { overflow-wrap: anywhere; }
.dc-prev-cap span { color: var(--muted); font-size: 13.5px; }
.dc-prev:has(.dc-prev-text) .dc-prev-cap { grid-row: 1; }
.dc-hist-sec { display: grid; gap: 8px; margin-top: 10px; }
.dc-hist-sec .p-soon-title { margin: 8px 0 0; }
.dc-hist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.dc-h { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 18px;
  background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .07); }
.dc-h-pic { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: rgba(255, 255, 255, .06); }
span.dc-h-pic { display: block; padding: 15px; color: var(--muted); }
.dc-h-txt { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.dc-h-txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-h-txt span { color: var(--muted); font-size: 13px; }
.dc-h-snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-h-res { display: grid; justify-items: end; gap: 2px; font-size: 13px; color: var(--muted); text-align: right; }
.dc-h-res.ok .mono { color: var(--ink); font-family: var(--mono); font-size: 13px; }
@media (max-width: 560px) {
  .dc-row { grid-template-columns: 100px 1fr; } .dc-code { font-size: 21px; }
  .dc-prev { grid-template-columns: 1fr; } .dc-prev-media { max-width: 100%; }
  .dc-h { grid-template-columns: 48px 1fr; } .dc-h-pic { width: 48px; height: 48px; } span.dc-h-pic { padding: 12px; }
  .dc-h-res { grid-column: 2; justify-items: start; text-align: left; }
}

/* Permisos de apps (Personas, Invitar): botón de cristal líquido con el icono de la app y un piloto. Encendida = más luminosa y piloto verde;
   apagada = cristal tenue. Al pulsar, el gel se hunde hacia el dedo y rebota (pilotGel en portal_settings.js). */
.p-apps-row:has(.p-pilot-wrap) { display: flex; flex-wrap: wrap; gap: 12px 8px; }
.p-pilot-wrap { display: grid; justify-items: center; align-content: start; gap: 5px; width: 68px; }
.p-pilot-wrap.off { opacity: .4; }
/* Rediseño (25/10/2026): el mismo cristal que las tarjetas de la portada (.p-app): degradado tenue, canto de luz arriba a la
   izquierda que se apaga hacia abajo y reflejo que sigue al puntero. Sin blur (como .p-app en reposo). El gel lo mueve
   pilotGel() en línea (no poner transition ni animation de transform aquí). */
.p-pilot { position: relative; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: rgba(245, 245, 247, .42); isolation: isolate;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .018) 40%, rgba(255, 255, 255, .008) 60%, rgba(255, 255, 255, .035) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 .5px rgba(255, 255, 255, .09), 0 10px 24px rgba(0, 0, 0, .42);
  transition: color .4s, background .4s, box-shadow .4s; }
/* el canto, como en las tarjetas */
.p-pilot::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none; opacity: .45; transition: opacity .4s;
  background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .1) 28%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .06) 78%, rgba(255, 255, 255, .28));
  -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); }
/* el reflejo que sigue al puntero */
.p-pilot::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(60px circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 50%, transparent 75%); }
.p-pilot:active::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .p-pilot:not(:disabled):hover::after { opacity: 1; } }
.p-pilot:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 3px; }
.p-pilot:disabled { cursor: default; }
.p-pilot-face { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 6px; }
.p-pilot-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: opacity .4s, filter .4s; }
img.p-pilot-ic { width: 28px; height: 28px; object-fit: contain; opacity: .45; filter: grayscale(1); }
.p-pilot-led { position: absolute; left: 50%; bottom: 8px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: rgba(255, 255, 255, .13);
  transition: background .4s, box-shadow .4s; }
.p-pilot.on { color: #f5f5f7;
  background: linear-gradient(155deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 40%, rgba(255, 255, 255, .022) 60%, rgba(255, 255, 255, .075) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(255, 255, 255, .08), inset 0 0 0 .5px rgba(255, 255, 255, .18),
    inset 0 0 20px rgba(255, 255, 255, .045), 0 14px 30px rgba(0, 0, 0, .5); }
.p-pilot.on::before { opacity: 1; }
.p-pilot.on img.p-pilot-ic { opacity: 1; filter: none; }
.p-pilot.on .p-pilot-led { background: #34d160; box-shadow: 0 0 6px rgba(52, 209, 96, .85); }
/* al encender: el piloto se enciende con un destello verde que se apaga */
.p-pilot.lit .p-pilot-led { animation: p-led .9s cubic-bezier(.2, .8, .3, 1); }
@keyframes p-led { 0% { transform: scale(.4); box-shadow: 0 0 0 rgba(52, 209, 96, 0); } 30% { transform: scale(1.5); box-shadow: 0 0 14px 4px rgba(52, 209, 96, .7); } 100% { transform: scale(1); } }
.p-pilot-name { font-size: 12px; font-weight: 500; color: var(--muted); text-align: center; line-height: 1.2; transition: color .4s; }
.p-pilot-wrap:has(.p-pilot.on) .p-pilot-name { color: var(--ink); }
.p-pilot-note { font-size: 11px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .p-pilot.lit .p-pilot-led { animation: none; } }
/* los GB de su Cloud, a la derecha del nombre */
.p-person-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.p-person-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-person-txt .p-gb { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--ink); background: rgba(255, 255, 255, .055); box-shadow: var(--lq); font: 500 12px/1.3 var(--mono); transition: background .2s, transform .2s; }
.p-person-txt .p-gb:hover { background: rgba(255, 255, 255, .1); }
.p-person-txt .p-gb:active { transform: scale(.94); }
.p-person-txt .p-gb svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; opacity: .75; }
/* el modo de Halo, al lado (como los GB): bola de Halo y «Estricto» o «Libre» (este con el borde verde de lo encendido) */
.p-person-txt .p-halo-mode { font-family: var(--sans); }
.p-person-txt .p-halo-mode img { width: 14px; height: 14px; border-radius: 50%; }
.p-person-txt .p-halo-mode.free { box-shadow: var(--lq), inset 0 0 0 1px rgba(48, 209, 88, .45); }
/* su rol en Studio, al lado; «Studio sin rol» en ámbar: tiene la app pero no entra hasta que le pongas uno */
.p-person-txt .p-studio-role { font-family: var(--sans); }
.p-person-txt .p-studio-role.none { color: #ffb340; box-shadow: var(--lq), inset 0 0 0 1px rgba(255, 179, 64, .45); }

/* Aviso: cristal líquido, aparece con un pequeño rebote */
.p-toast { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px 11px 16px; font-size: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06) 60%, rgba(255, 255, 255, .1));
  -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.05); backdrop-filter: blur(22px) saturate(180%) brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(255, 255, 255, .06), inset 0 0 0 .5px rgba(255, 255, 255, .24), 0 14px 34px rgba(0, 0, 0, .5); }
.p-toast::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #34d160; box-shadow: 0 0 5px rgba(52, 209, 96, .8); }
.p-toast.bad::before { background: #ff5a4f; box-shadow: 0 0 5px rgba(255, 90, 79, .8); }
.p-toast.bad { color: var(--ink); }
.p-toast[hidden] { display: none; }
.p-toast.in { animation: p-toast .55s ease-in-out; }
@keyframes p-toast {
  0% { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.9, .8); } 40% { opacity: 1; transform: translateX(-50%) translateY(-3px) scale(1.04, 1.06); }
  65% { transform: translateX(-50%) translateY(1px) scale(.99, .98); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}


/* ---------- Mensajes (a063.es/mensajes): modelos, generador y Telegram en la web ---------- */
.ms { padding-top: 5vh; }
.ms .p-hello { margin-bottom: 8px; }
.ms-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.ms-model { gap: 10px; text-decoration: none; color: inherit; align-content: start; min-height: 130px; transition: background .25s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.ms-model:hover { background: #121214; }
.ms-model:active { transform: scale(.97); }
.ms-model-head { display: flex; align-items: center; gap: 12px; }
.ms-model-head b { font-size: 18px; letter-spacing: -.03em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ms-model-sub { color: var(--muted); font-size: 14px; }
.ms-model .p-pill { justify-self: start; }
.ms-add { justify-items: center; align-content: center; gap: 8px; border: 1.5px dashed rgba(255, 255, 255, .16); background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-weight: 500; }
.ms-add svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ms-add:hover { color: var(--ink); border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .03); }
.ms-av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ms-av { position: relative; overflow: hidden; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 17px;
  background: rgba(255, 255, 255, .08); color: var(--ink); }
.ms-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--ink); color: #000; }
.ms-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 18px; }
.ms-head .p-hello { margin: 0; }
.ms-head .p-back { flex: none; margin: 0 0 -6px; }
.ms-break { flex: 1 0 100%; height: 0; }
.ms-tabs { margin: 0; }
.ms-body:not(.ms-app) { display: grid; gap: 16px; max-width: 760px; }
.ms-lead { margin: 0; }
.ms-ta { height: auto; padding: 14px 18px; line-height: 1.45; resize: vertical; font-family: inherit; }

/* el Telegram: lista a la izquierda, conversación a la derecha (en el móvil, una sola pantalla) */
.ms-app { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: calc(100dvh - 240px); min-height: 480px; max-height: 860px;
  border-radius: 28px; overflow: hidden; background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .08); }
.ms-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid rgba(255, 255, 255, .06); }
.ms-side-head { display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 65px; padding: 12px 14px 12px 20px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.ms-side-head b { flex: 1; font-size: 17px; letter-spacing: -.03em; }
.ms-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 8px 10px; }
.ms-chat { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 18px; text-decoration: none; color: inherit; cursor: pointer; }
.ms-chat:hover { background: rgba(255, 255, 255, .05); }
.ms-chat.on { background: rgba(255, 255, 255, .1); }
.ms-chat-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ms-chat-top, .ms-chat-bot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ms-chat-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ms-chat-top time { flex: none; color: var(--muted); font-size: 12px; }
.ms-chat-last { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 14px; }
.ms-chat-txt.has-draft .ms-chat-last { color: var(--ink); }
.ms-empty { display: grid; gap: 12px; justify-items: start; padding: 18px 12px; color: var(--muted); }
.ms-empty p { margin: 0; }
.ms-conv { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ms-conv-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); }
.ms-conv-empty svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.ms-conv-empty p { margin: 0; }
.ms-conv-head { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-height: 65px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.ms-conv-head .ms-av { width: 40px; height: 40px; font-size: 16px; }
.ms-who { flex: 1; min-width: 0; display: grid; }
.ms-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.02em; }
.ms-sub { color: var(--muted); font-size: 12.5px; min-height: 1em; }
.ms-sub:empty { display: none; }
.ms-halo-seg { justify-self: auto; }
.ms-halo-seg button { padding: 6px 12px; font-size: 13px; }
.ms-back { display: none; }
.ms-msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; }
.ms-day { align-self: center; margin: 10px 0 6px; padding: 3px 12px; border-radius: 999px; font-size: 12px; color: var(--muted); background: rgba(255, 255, 255, .06); }
.ms-b { position: relative; max-width: min(78%, 540px); width: fit-content; display: grid; gap: 4px; padding: 7px 11px 5px; border-radius: 18px; overflow-wrap: anywhere; }
.ms-b.in { align-self: flex-start; background: #1a1a1c; border: 1px solid rgba(255, 255, 255, .06); border-bottom-left-radius: 6px; }
.ms-b.out { align-self: flex-end; background: #e9e9ee; color: #0a0a0b; border-bottom-right-radius: 6px; }
.ms-b-who { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ms-b-reply { padding: 4px 8px; border-left: 2px solid currentColor; border-radius: 4px; font-size: 13px; opacity: .7; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ms-b-text { white-space: pre-wrap; line-height: 1.4; }
.ms-b-text.dim { opacity: .6; font-style: italic; }
.ms-b-meta { justify-self: end; display: flex; align-items: center; gap: 4px; font-size: 11.5px; opacity: .6; }
.ms-b-meta time { font-variant-numeric: tabular-nums; }
.ms-tick svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ms-b.pending { opacity: .65; }
.ms-b.failed { outline: 1.5px solid #ff453a; }
.ms-media { display: block; width: 280px; max-width: 100%; border-radius: 13px; background: #222; object-fit: cover; }
.ms-media.click { cursor: pointer; }
/* fotos que llegan: borrosas con un velo; al tocarlas se desenfocan con un barrido de luz y sale «ver grande» (sin backdrop-filter: es una lista) */
.ms-photo { position: relative; isolation: isolate; width: 280px; max-width: 100%; border-radius: 13px; overflow: hidden; cursor: pointer; background: #222; outline-offset: 2px; }
.ms-photo .ms-media { width: 100%; border-radius: 0; filter: blur(26px) saturate(1.2) brightness(.92); transform: scale(1.2);
  transition: filter .65s cubic-bezier(.3, .9, .3, 1), transform .8s cubic-bezier(.25, 1.15, .4, 1); }
.ms-photo.rev .ms-media { filter: none; transform: none; }
.ms-veil { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, .12), rgba(0, 0, 0, .46));
  transition: opacity .4s ease, transform .6s cubic-bezier(.25, 1.15, .4, 1); }
.ms-veil-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 24px rgba(0, 0, 0, .35); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.ms-veil-chip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ms-photo:hover .ms-veil-chip { transform: scale(1.05); }
.ms-photo:active .ms-veil-chip { transform: scale(.94); }
.ms-photo.rev .ms-veil { opacity: 0; transform: scale(1.25); pointer-events: none; }
.ms-photo::after { content: ""; position: absolute; inset: -20% -60%; z-index: 2; pointer-events: none; opacity: 0; transform: translateX(-70%) skewX(-18deg);
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .34) 50%, transparent 62%); }
.ms-photo.rev::after { animation: ms-sheen .85s ease-out; }
@keyframes ms-sheen { 0% { opacity: 1; transform: translateX(-70%) skewX(-18deg); } 100% { opacity: 0; transform: translateX(70%) skewX(-18deg); } }
.ms-big { position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(0, 0, 0, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 16px rgba(0, 0, 0, .4);
  opacity: 0; transform: scale(.5); pointer-events: none; transition: opacity .3s .12s, transform .5s .12s cubic-bezier(.3, 1.6, .5, 1); }
.ms-big svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ms-photo.rev .ms-big { opacity: 1; transform: none; pointer-events: auto; }
.ms-big:active { transform: scale(.9) !important; }
.ms-media.sticker { width: 150px; background: none; object-fit: contain; }
.ms-media.vid { position: relative; overflow: hidden; min-height: 120px; }
.ms-media.vid img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ms-play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; }
.ms-play svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-left: 3px; }
.ms-dur { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; color: #fff; background: rgba(0, 0, 0, .55); }
.ms-audio { width: 260px; max-width: 100%; height: 40px; }
.ms-file { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; padding: 4px 2px; color: inherit; text-decoration: none; }
.ms-file-ic { grid-row: span 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(128, 128, 128, .2); }
.ms-file-ic svg, .ms-draft-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ms-file small { opacity: .6; }
.ms-up { height: 3px; border-radius: 3px; background: rgba(128, 128, 128, .3); overflow: hidden; }
.ms-up i { display: block; height: 100%; width: 0; background: #30d158; transition: width .3s; }
.ms-b.out .ms-up i { background: #0a0a0b; }

.ms-draft, .ms-halo { margin: 0 12px 8px; padding: 12px; border-radius: 22px; background: rgba(255, 255, 255, .045); display: grid; gap: 10px; max-height: 42%; overflow-y: auto; }
.ms-draft[hidden], .ms-halo[hidden], .ms-tray[hidden], .ms-who-pick[hidden] { display: none; }
.ms-draft-head { display: flex; align-items: center; gap: 8px; }
.ms-draft-head b { flex: 1; font-size: 14px; }
.ms-draft-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .07); }
.ms-draft-ic svg { width: 16px; height: 16px; }
.ms-conv:has(.ms-halo:not([hidden])) .ms-draft { display: none; }
.ms-halo-row { display: flex; gap: 8px; }
.ms-halo-row .p-input { height: 40px; font-size: 16px; }
.ms-opts { display: grid; gap: 8px; }
.ms-opt { text-align: left; padding: 11px 14px; border: 0; border-radius: 16px; cursor: pointer; color: var(--ink); font: inherit; line-height: 1.4; white-space: pre-wrap;
  background: rgba(255, 255, 255, .06); transition: background .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.ms-opt:hover { background: rgba(255, 255, 255, .11); }
.ms-opt:active { transform: scale(.98); }
.ms-opt-offer { display: block; margin-top: 6px; width: fit-content; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: #5ce07f; background: rgba(48, 209, 88, .14); }
.ms-gen-opt .ms-opt-offer { margin: 0; }
.ms-offer { display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 6px 6px 6px 14px; border-radius: 999px; font-size: 13px; background: rgba(48, 209, 88, .14); color: #5ce07f; }
.ms-offer[hidden] { display: none; }
.ms-offer span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-offer .cv-x { width: 28px; height: 28px; color: inherit; }
.ms-aviso { margin: 0; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; background: rgba(255, 159, 10, .15); color: #ffb340; }
.ms-tray { display: flex; gap: 8px; margin: 0 12px 8px; overflow-x: auto; }
.ms-tray-item { position: relative; flex: none; width: 76px; display: grid; gap: 2px; }
.ms-tray-item img, .ms-tray-item video, .ms-tray-item .ms-file-ic { width: 76px; height: 76px; border-radius: 16px; object-fit: cover; background: #222; }
.ms-tray-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); }
.ms-tray-item .cv-x { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; background: rgba(0, 0, 0, .65); color: #fff; }
.ms-tray-item .cv-x svg { width: 13px; height: 13px; }
.ms-comp { display: flex; align-items: flex-end; gap: 6px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .06); }
.ms-input { flex: 1; min-width: 0; box-sizing: border-box; min-height: 46px; max-height: 150px; padding: 11px 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; outline: none; resize: none; overflow-y: auto;
  color: var(--ink); background: rgba(255, 255, 255, .055); font: inherit; font-size: 16px; line-height: 1.35; }
.ms-input:focus { border-color: rgba(255, 255, 255, .5); }
.ms-comp .cv-x, .ms-comp .ai-btn.ms-halo-btn, .ms-send { flex: none; box-sizing: border-box; width: 46px; height: 46px; padding: 0; }
.ms-comp .ai-btn.ms-halo-btn .ai-orb { width: 28px; height: 28px; }
.ms-send { border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--ink); color: #000;
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.ms-send:active { transform: scale(.92); }
.ms-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms-drop-hint { display: none; position: absolute; inset: 8px; z-index: 5; place-items: center; border-radius: 22px; border: 2px dashed rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .75); font-weight: 600; pointer-events: none; }
.ms-conv.over .ms-drop-hint { display: grid; }
.ms-light { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; background: rgba(0, 0, 0, .9); color: #fff; display: none; place-items: center; }
.ms-light[open] { display: grid; }
.ms-light img { max-width: 94vw; max-height: 90dvh; border-radius: 16px; }
.ms-light .cv-x { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; background: rgba(255, 255, 255, .12); color: #fff; }
.ms-pick { width: min(520px, calc(100vw - 24px)); }
.ms-pick-list { display: grid; gap: 2px; max-height: 50dvh; overflow-y: auto; }
.ms-pick-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid rgba(255, 255, 255, .06); }
.ms-pick-row:first-child { border-top: 0; }
.ms-pick-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-pick-row .ms-av { width: 36px; height: 36px; font-size: 15px; }

/* generador y ajustes */
.ms-gen-out { display: grid; gap: 10px; }
.ms-gen-out:empty { display: none; }
.ms-gen-opt { display: grid; gap: 10px; justify-items: start; padding: 14px 16px; border-radius: 20px; background: rgba(255, 255, 255, .045); }
.ms-gen-opt p { margin: 0; white-space: pre-wrap; line-height: 1.45; }
.ms-set > .p-btn, .ms-gen > .p-btn:not(.cv-go) { justify-self: start; }
.ms-msgs, .ms-list, .ms-draft, .ms-halo, .ms-pick-list { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
/* chats a pantalla fija: una ventana grande (lista · conversación · panel del fan) y «Modelos» + pestañas en la barra de arriba */
:root { --ms-gut: clamp(16px, 3.5vw, 56px); }
body.ms-fixed { overflow: hidden; }
body.ms-fixed .p-top { max-width: none; padding-left: var(--ms-gut); padding-right: var(--ms-gut); }
body.ms-fixed .ms { max-width: none; height: calc(100dvh - var(--ms-top, 70px)); box-sizing: border-box; display: flex; flex-direction: column; padding: 8px var(--ms-gut) 18px; }
body.ms-fixed .ms #view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
body.ms-fixed .ms-head { flex: none; margin-bottom: 10px; }
body.ms-fixed .ms-body { flex: 1; min-height: 0; }
body.ms-fixed .ms-app { height: 100%; max-height: none; min-height: 0; }
.ms-info { display: none; flex-direction: column; min-height: 0; border-left: 1px solid rgba(255, 255, 255, .06); }
.ms-info-head { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-height: 65px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.ms-info-head .ms-av { width: 40px; height: 40px; font-size: 16px; }
.ms-info-head b { flex: 1; min-width: 0; font-size: 16px; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-info-tabs { display: flex; align-items: center; box-sizing: border-box; min-height: 54px; padding: 5px 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.ms-info-empty { flex: 1; margin: 0; padding: 18px; overflow-y: auto; color: var(--muted); font-size: 14px; }
.ms-info-seg { flex: 1; display: flex; }
.ms-info-seg button { flex: 1; padding: 7px 8px; font-size: 13px; letter-spacing: .02em; }
.ms-info-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: grid; gap: 14px; align-content: start; font-size: 14px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.ms-info-empty-line { margin: 0; color: var(--muted); }
.ms-spent { display: grid; gap: 2px; padding: 14px 16px; border-radius: 20px; background: rgba(255, 255, 255, .045); }
.ms-spent span { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.ms-spent b { font-size: 32px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.ms-spent small { color: var(--muted); font-size: 13px; }
.ms-saved { color: var(--muted); font-size: 12.5px; min-height: 1em; }
.ms-ppv-sum { margin: 0; color: var(--muted); font-size: 13px; }
.ms-ppv-sum:empty { display: none; }
.ms-ppvs { display: grid; gap: 8px; }
.ms-ppv { display: grid; gap: 10px; padding: 12px 14px; border-radius: 18px; border: 1px solid transparent; }
.ms-ppv.no { background: rgba(255, 69, 58, .1); border-color: rgba(255, 69, 58, .28); }
.ms-ppv.yes { background: rgba(48, 209, 88, .1); border-color: rgba(48, 209, 88, .28); }
.ms-ppv-top { display: flex; align-items: flex-start; gap: 10px; }
.ms-ppv-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ms-ppv-txt b { overflow-wrap: anywhere; line-height: 1.3; }
.ms-ppv-txt span { color: var(--muted); font-size: 12.5px; }
.ms-ppv-pill { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ms-ppv.no .ms-ppv-pill { background: rgba(255, 69, 58, .16); color: #ff6961; }
.ms-ppv.yes .ms-ppv-pill { background: rgba(48, 209, 88, .14); color: #5ce07f; }
.ms-ppv-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.ms-ppv-acts .p-switch { width: 44px; height: 27px; }
.ms-ppv-acts .p-switch i { width: 23px; height: 23px; }
.ms-ppv-acts .p-switch.on i { transform: translateX(17px); }
.ms-ppv-lab { font-size: 13px; font-weight: 500; margin-right: auto; }
/* PPVs a mano: «Añadir» arriba (diálogo con el catálogo u otro escrito a mano) y papelera en cada uno */
.ms-ppv-bar { display: flex; align-items: center; gap: 10px; }
.ms-ppv-bar .ms-ppv-sum { flex: 1; min-width: 0; }
.ms-ppv-bar .p-btn { margin-left: auto; }
.ms-ppv-rm { width: 32px; height: 32px; }
.ms-ppv-rm:hover { color: #ff6961; background: rgba(255, 69, 58, .14); }
.ms-ppv-hand { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; }
.ms-ppv-hand[hidden] { display: none; }
.ms-ppv-dlg .ms-hm-row { padding-top: 2px; }
.ms-sel { position: relative; display: block; }
.ms-sel select { width: 100%; padding-right: 44px; }
.ms-sel::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
  border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted); transform: rotate(45deg); }
@media (min-width: 761px) {
  body.ms-fixed .ms-head { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); left: calc(var(--ms-gut) + 62px); z-index: 11; height: 46px; margin: 0; flex-wrap: nowrap; align-items: center; gap: 6px 16px; }
  body.ms-fixed .ms-head .p-back { flex: none; margin: 0; }
  body.ms-fixed .ms-break { display: none; }
  body.ms-fixed .ms-head .p-hello { font-size: 22px; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
}
@media (min-width: 1100px) {
  body.ms-fixed .ms-app { grid-template-columns: 330px minmax(0, 1fr) 340px; }
  body.ms-fixed .ms-info { display: flex; }
}
/* las lentes de cristal de los selectores y pestañas, aquí sin refracción: su filtro SVG (backdrop-filter) dejaba una marca parpadeando en el borde
   cuando se pintaba algo de al lado (pasar el ratón por un botón). Se queda el óvalo de cristal, sin deformar lo de detrás. */
.ms .lq > .lens { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .2); }
.ms .lq.lq-drag > .lens { background: rgba(255, 255, 255, .27); }
/* menú de la bola de Halo (ajustes de Halo de cada chat) y el interruptor «Halo contesta solo» de la lista: pomo = bola de Halo quieta */
.ms-conv-head .ms-hmenu-btn { width: 40px; height: 40px; }
.ms-conv-head .ms-hmenu-btn .ai-orb { width: 28px; height: 28px; }
.ms-hmenu { position: absolute; z-index: 20; top: 60px; right: 14px; width: min(340px, calc(100% - 24px)); display: grid; gap: 16px; padding: 16px; border-radius: 22px;
  background: #161618; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); animation: p-pop .3s cubic-bezier(.25, 1.2, .4, 1); }
.ms-hmenu h4 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.ms-hm-sec { display: grid; gap: 8px; }
.ms-hm-lab { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.ms-hm-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.ms-hm-seg { display: flex; width: 100%; box-sizing: border-box; }
.ms-hm-seg button { flex: 1; padding: 7px 8px; font-size: 13px; white-space: nowrap; }
.ms-hm-row { display: flex; align-items: center; gap: 10px; }
.ms-hm-rowlab { flex: 1; font-size: 14px; font-weight: 500; }
.ms-hmenu .p-btn { justify-self: start; }
.ms-hmenu .p-switch { width: 44px; height: 27px; }
.ms-hmenu .p-switch i { width: 23px; height: 23px; }
.ms-hmenu .p-switch.on i { transform: translateX(17px); }
.ms-auto { position: relative; flex: none; width: 42px; height: 24px; box-sizing: border-box; border-radius: 999px; cursor: pointer; background: rgba(120, 120, 128, .28);
  border: 1.5px solid rgba(255, 255, 255, .14); transition: background .3s, border-color .3s; }
.ms-auto i { position: absolute; top: 50%; left: 1px; width: 19px; height: 19px; margin-top: -9.5px; display: grid; place-items: center; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.ms-auto .ai-orb { width: 100%; height: 100%; color: #f5f5f7; }
.ms-auto .ai-orb .ai-r1, .ms-auto .ai-orb .ai-r2 { animation: none !important; }   /* quieta (ai.css la anima con la misma fuerza y se carga después) */
.ms-auto .ai-orb .ai-r1 { transform: rotate(-35deg) scaleY(1); }
.ms-auto .ai-orb .ai-r2 { transform: rotate(62deg) scaleY(.55); }
.ms-auto.on { background: rgba(48, 209, 88, .14); border-color: #30d158; }
.ms-auto.on i { transform: translateX(18px); }
.ms-auto:active i { transform: scale(.9); }
.ms-auto.on:active i { transform: translateX(18px) scale(.9); }
.ms-auto:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.ms-btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-edit { width: min(760px, calc(100vw - 24px)); }
.ms-cat-ta { min-height: 46dvh; font-family: var(--mono); font-size: 13px; line-height: 1.5; resize: vertical; white-space: pre; }
.ms-upload { cursor: pointer; margin-right: auto; }
.ms-edit .p-dlg-acts { flex-wrap: wrap; }
.ms-set-head { display: grid; gap: 4px; }
.ms-set-head h3 { margin: 0; }
.ms-samples { list-style: none; margin: 0; padding: 0; display: grid; }
.ms-sample { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.ms-sample:first-child { border-top: 0; }
.ms-sample b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-sample span { grid-column: 1; color: var(--muted); font-size: 13.5px; }
.ms-sample .cv-x { grid-column: 2; grid-row: 1 / span 2; }
.ms-who-pick { display: grid; gap: 10px; }
.ms-acct { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ms-acct b { font-size: 17px; letter-spacing: -.02em; }
.ms-acct span:not(.p-pill) { color: var(--muted); font-family: var(--mono); font-size: 13px; flex: 1; }
.ms-steps { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; display: grid; gap: 4px; }
.ms-chat-set { display: grid; }
.ms-chat-set-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.ms-chat-set-row:first-child { border-top: 0; }
.ms-chat-set-row b { flex: 1; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-chat-set-row .ms-av { width: 38px; height: 38px; font-size: 15px; }

@media (max-width: 760px) {
  .ms { padding-top: 3vh; }
  .ms-app { grid-template-columns: 1fr; height: calc(100dvh - 210px); min-height: 420px; border-radius: 24px; }
  .ms-conv { display: none; }
  body.ms-in-chat .ms-conv { display: flex; position: fixed; inset: 0; z-index: 60; background: #000; padding-top: env(safe-area-inset-top); }
  body.ms-in-chat { overflow: hidden; }
  .ms-back { display: grid; }
  .ms-conv-head { flex-wrap: wrap; row-gap: 8px; }
  .ms-halo-seg { order: 5; flex: 1 0 100%; display: flex; justify-content: center; }
  .ms-halo-seg button { flex: 1; padding: 7px 9px; font-size: 13px; }
  .ms-b { max-width: 86%; }
  .ms-msgs { padding: 12px; }
  .ms-media { width: min(260px, 100%); }
  .ms-head { gap: 8px 10px; margin-bottom: 10px; }
  .ms-head .p-back { flex: none; margin: 0; padding: 6px 10px 6px 6px; }
  .ms-break { display: none; }
  .ms-head .p-hello { flex: 1; min-width: 0; font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-tabs { flex: 1 0 100%; display: flex; }
  .ms-tabs button { flex: 1; padding-left: 8px; padding-right: 8px; }
}

/* Mensajes en el móvil (≤ 760 px) y pantallas sin panel del fan (< 1100 px): la conversación a pantalla completa y la ficha del fan como hoja.
   En el PC (≥ 1100 px) nada de esto cambia: el nombre de la cabecera es un botón sin efecto y la ficha es la tercera columna. */
.ms-who-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
.ms-who-hint, .ms-grab, .ms-fan-x, .ms-fan-scrim { display: none; }
@media (max-width: 1099px) {
  .ms-who-btn { cursor: pointer; margin: -4px 0; padding: 4px 8px 4px 4px; border-radius: 18px; transition: background .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
  .ms-who-btn:hover { background: rgba(255, 255, 255, .05); }
  .ms-who-btn:active { transform: scale(.97); background: rgba(255, 255, 255, .07); }
  .ms-who-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
  .ms-sub:empty + .ms-who-hint { display: block; color: var(--muted); font-size: 12.5px; }
  /* la ficha del fan: hoja que sube desde abajo, del alto de lo que se ve (con el teclado abierto, encoge) */
  .ms-info { --ms-gap: max(calc(env(safe-area-inset-top, 0px) + 28px), calc(var(--ms-vh, 100dvh) * .1));
    display: flex; position: fixed; z-index: 80; left: 0; right: 0; top: calc(var(--ms-vt, 0px) + var(--ms-gap)); height: calc(var(--ms-vh, 100dvh) - var(--ms-gap));
    max-width: 640px; margin: 0 auto; box-sizing: border-box; border: 0; border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 28px 28px 0 0;
    background: #0f0f10; box-shadow: 0 -24px 70px rgba(0, 0, 0, .7); transform: translateY(calc(100% + 40px)); visibility: hidden;
    transition: transform .42s cubic-bezier(.25, 1.05, .4, 1), visibility 0s .42s; }
  body.ms-fan-open .ms-info { transform: none; visibility: visible; transition: transform .42s cubic-bezier(.25, 1.05, .4, 1), visibility 0s; }
  .ms-info.dragging { transition: none !important; }
  .ms-grab { display: block; flex: none; width: 38px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: rgba(255, 255, 255, .22); touch-action: none; }
  .ms-info-head { min-height: 0; padding: 10px 12px 14px 18px; border-bottom: 0; touch-action: none; }
  .ms-info-head .ms-av { width: 46px; height: 46px; font-size: 18px; }
  .ms-info-head b { font-size: 19px; letter-spacing: -.03em; }
  .ms-fan-x { display: grid; background: rgba(255, 255, 255, .07); color: var(--ink); }
  .ms-info-tabs { min-height: 0; padding: 0 16px 12px; }
  .ms-info-body { padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .ms-fan-scrim { display: block; position: fixed; inset: 0; z-index: 79; background: rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transition: opacity .3s; }
  body.ms-fan-open .ms-fan-scrim { opacity: 1; pointer-events: auto; }
}
@media (max-width: 760px) {
  /* la conversación ocupa justo lo que se ve (--ms-vh/--ms-vt los pone mensajes.js): al abrir el teclado la cabecera sigue arriba */
  body.ms-in-chat .ms-conv { inset: auto; top: var(--ms-vt, 0px); left: 0; right: 0; height: var(--ms-vh, 100dvh); padding-top: 0;
    background: radial-gradient(120% 60% at 88% -12%, #1d1d1f 0%, #131314 42%, rgba(12, 12, 13, 0) 78%), #0c0c0d; }
  .ms-conv-head { flex-wrap: nowrap; gap: 4px; min-height: 0; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px 6px;
    background: rgba(255, 255, 255, .035); border-bottom-color: rgba(255, 255, 255, .08); }
  .ms-conv-head .ms-back { width: 40px; height: 40px; color: var(--ink); }
  .ms-conv-head .ms-back svg { width: 22px; height: 22px; }
  .ms-conv-head .ms-who b { font-size: 17px; font-weight: 600; }
  .ms-conv-head .ms-hmenu-btn { margin-left: 4px; }
  .ms-conv-head .ms-rm { width: 40px; height: 40px; }
  .ms-msgs { gap: 5px; padding: 12px 12px 14px; }
  .ms-day { background: rgba(255, 255, 255, .09); color: #b4b4b9; }
  .ms-b { padding: 8px 12px 6px; font-size: 15.5px; }
  .ms-b.in { background: #1f1f22; border-color: rgba(255, 255, 255, .09); }
  .ms-b-meta { opacity: .62; }
  .ms-comp { gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .035); border-top-color: rgba(255, 255, 255, .08); }
  body.ms-kb .ms-comp { padding-bottom: 8px; }
  .ms-comp .ms-clip { color: #c7c7cc; }
  .ms-input { background: rgba(255, 255, 255, .075); border-color: rgba(255, 255, 255, .12); }
  .ms-hmenu { top: calc(62px + env(safe-area-inset-top, 0px)); }
}

/* ---------- Mensajes: responder, varias líneas, fotos para enviar y horario (27/10/2026) ---------- */
.ms-b { touch-action: pan-y; transition: transform .3s cubic-bezier(.25, 1.2, .4, 1); }
.ms-b.swiping { transition: none; }
.ms-b-rp { position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px;
  cursor: pointer; color: var(--muted); background: rgba(255, 255, 255, .06); opacity: 0; transition: opacity .15s, color .15s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.ms-b-rp svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ms-b.in .ms-b-rp { right: -40px; }
.ms-b.out .ms-b-rp { left: -40px; }
.ms-b-rp:hover, .ms-b-rp:focus-visible { color: var(--ink); }
.ms-b-rp:active { transform: scale(.95); }
.ms-b:hover .ms-b-rp, .ms-b-rp:focus-visible { opacity: 1; }
@media (pointer: coarse) { .ms-b-rp { display: none; } }
.ms-replybar { display: flex; align-items: center; gap: 10px; margin: 0 12px 8px; padding: 6px 6px 6px 12px; border-radius: 16px; background: rgba(255, 255, 255, .055); }
.ms-replybar[hidden] { display: none; }
.ms-replybar-ic { flex: none; display: grid; color: var(--muted); }
.ms-replybar-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ms-replybar-txt { flex: 1; min-width: 0; display: grid; gap: 1px; padding-left: 10px; border-left: 2px solid rgba(255, 255, 255, .5); }
.ms-replybar-txt b { font-size: 12.5px; font-weight: 600; }
.ms-replybar-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.ms-replybar .cv-x { width: 28px; height: 28px; }
.ms-split { display: flex; align-items: center; gap: 10px; margin: 0 12px 8px; padding: 4px 4px 4px 14px; border-radius: 999px; font-size: 13px; color: var(--muted); background: rgba(255, 255, 255, .035); }
.ms-split[hidden] { display: none; }
.ms-split span { flex: 1; min-width: 0; }
.ms-split .p-switch { width: 40px; height: 24px; }
.ms-split .p-switch i { width: 20px; height: 20px; }
.ms-split .p-switch.on i { transform: translateX(16px); }
.ms-offer { flex-direction: column; align-items: stretch; gap: 0; }
.ms-offer:has(.ms-offer-line + .ms-offer-line) { border-radius: 18px; }
.ms-offer-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ms-opt-photo { color: #c7c7cc; background: rgba(255, 255, 255, .08); }
.ms-phs { display: grid; }
.ms-ph { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.ms-ph:first-child { border-top: 0; }
.ms-ph img { width: 72px; height: 72px; object-fit: cover; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.ms-ph-side { display: grid; gap: 4px; min-width: 0; }
.ms-ph-ta { min-height: 0; resize: vertical; }
.ms-ph-meta { color: var(--muted); font-size: 12.5px; }
.ms-ph.no-descr .ms-ph-meta { color: #ffb340; }
.ms-quiet { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ms-quiet[hidden] { display: none; }

/* ---------- jugar a un juego (a063.es/juego/<juego>): barra fina arriba y el juego debajo; pantalla completa ---------- */
.g-play-body { margin: 0; background: #000; overflow: hidden; }
.g-play { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.g-bar { display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 8px calc(12px + env(safe-area-inset-left, 0px)); }
.g-bar .p-btn { padding: 8px 14px 8px 10px; font-size: .9rem; }
.g-bar .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.g-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.g-frame { flex: 1; width: 100%; border: 0; display: block; background: #000; }
.g-frame:fullscreen { width: 100vw; height: 100vh; }
@media (max-width: 560px) { .g-bar .p-btn span { display: none; } .g-bar .p-btn { padding: 8px 10px; } }
@media (max-height: 460px) { .g-bar { padding-top: calc(4px + env(safe-area-inset-top, 0px)); padding-bottom: 4px; } .g-bar .p-btn { padding-top: 6px; padding-bottom: 6px; } }
/* «Desbloquear todo» (menú de pruebas de los juegos que lo ofrecen; juego.js): sin desenfoque, el juego se mueve detrás */
.gc-dlg { width: min(580px, calc(100vw - 24px)); background: rgba(24, 24, 26, .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
.gc-dlg::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
.gc-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .06); font-weight: 500; }
.gc-sec { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .06); }
.gc-sec[hidden] { display: none; }
.gc-dlg .p-dlg-body { gap: 12px; }
.gc-dlg .p-dlg-acts { margin-top: 16px; }
.gc-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.gc-round { display: flex; gap: 8px; margin: 0; }
.gc-round .p-input { width: 110px; height: 40px; }

/* ---------- Studio (a063.es/studio): web pública del curso; portada con vídeo, ejemplos, pasos, temario, planes y preguntas ----------
   Lo que aparece al bajar lleva .sd-rv (studio.js le pone .in al verse). Los vídeos solo se reproducen mientras se ven. */
.sd-body { overflow-x: hidden; }
.sd-top { max-width: 1180px; z-index: 22; }   /* fija arriba como en la portada (02/11/2026): el menú enseña dónde estás al bajar */
.sd-nav { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .055); box-shadow: var(--lq);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); }
.sd-nav a { padding: 7px 14px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s, background .2s; }
.sd-nav a:hover { color: var(--ink); }
.sd-nav a.on { color: var(--ink); font-weight: 600; }      /* la sección en la que estás (la marca la lente de liquid.js) */
.sd-nav.lq { -webkit-user-select: none; user-select: none; }
.sd { max-width: 1180px; margin: 0 auto; padding: 0 20px 40px; }
/* los móviles de los lados de la portada no ensanchan la página en el móvil (el recorte va en la portada, no en .sd: la fila
   de ejemplos tiene que poder llegar al borde de la ventana) */
.sd .sd-hero { overflow-x: clip; margin-inline: -20px; padding-inline: 20px; }

/* 1 · portada: el texto centrado y debajo el vídeo grande del método (02/11/2026; antes, texto a la izquierda y carrusel de móviles) */
.sd-hero { display: grid; justify-items: center; gap: 56px; padding: 7vh 0 4vh; text-align: center; }
.sd-hero-txt { max-width: 860px; display: grid; justify-items: center; }
.sd-hero .sd-lead { max-width: 640px; }
.sd-hero .sd-cta, .sd-hero .sd-ticks { justify-content: center; }
.sd-hero-txt > * { animation: p-pop .7s cubic-bezier(.25, 1.2, .4, 1) both; }
.sd-hero-txt > :nth-child(2) { animation-delay: .06s; } .sd-hero-txt > :nth-child(3) { animation-delay: .12s; }
.sd-hero-txt > :nth-child(4) { animation-delay: .18s; }
/* sin la etiqueta «Studio · …» encima del título (Dani no la quiere, 02/11/2026) */
/* Brillo (Dani, 02/11/2026): UNA franja oscura y ancha en diagonal («/») recorre todo el título de izquierda a derecha, en bucle (7 s);
   sin bordes duros: el oscuro sigue una curva de coseno (paradas calculadas), así no hay raya en el centro ni corte en los bordes
   (con tramos rectos se veía «un palo»; sin filo claro en medio: partía la franja en dos). El degradado va recortado a las letras
   (también las del <em>) y se mueve con background-position; con 400 % de ancho la franja empieza y acaba fuera del título. */
.sd-h1 { margin: 0 0 18px; font-weight: 600; font-size: clamp(2.5rem, 6vw, 4.6rem); letter-spacing: -.05em; line-height: .98;
  background: linear-gradient(140deg, #f5f5f7 0 39%, #eeeef0 40.38%, #dadadc 41.75%, #bbbbbf 43.12%, #98989c 44.5%, #747478 45.88%, #55555b 47.25%, #414147 48.62%, #3a3a40 50%, #414147 51.38%, #55555b 52.75%, #747478 54.12%, #98989c 55.5%, #bbbbbf 56.88%, #dadadc 58.25%, #eeeef0 59.62%, #f5f5f7 61% 100%) 0 0 / 400% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: sd-shine 7s linear infinite; }
@keyframes sd-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sd-h1 em { font-style: normal; }
/* el punto final, redondo (Dani, 02/11/2026): el «.» de Geist es cuadrado. Es una caja, no letra: no le llega el degradado */
.sd-h1 .sd-dot { display: inline-block; width: .15em; height: .15em; margin-left: .05em; border-radius: 50%; background: #f5f5f7; }
.sd-lead { max-width: 520px; margin: 0 0 30px; color: var(--muted); font-size: 17.5px; line-height: 1.55; }
.sd-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.sd-cta .p-btn { height: 54px; padding: 0 24px; font-size: 16px; }
.sd-cta .p-btn svg { fill: currentColor; stroke: none; width: 16px; height: 16px; }
.sd-arrow { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; width: 18px; height: 18px;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.sd-cta .p-btn .sd-arrow { fill: none; stroke: currentColor; width: 18px; height: 18px; }
.p-btn:hover .sd-arrow { transform: translateX(3px); }
.sd-ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 14px; }
.sd-ticks li { display: flex; align-items: center; gap: 7px; }
.sd-ticks svg, .sd-incl svg { width: 17px; height: 17px; flex: none; fill: none; stroke: #30d158; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* el vídeo del método (16:9). Sin vídeo todavía: una pared quieta con las portadas de los vídeos del curso, apagada hacia los
   bordes, con el botón de reproducir y «Muy pronto» en el centro. Es como un visor: oscuro también en el tema claro */
.sd-film { position: relative; width: 100%; max-width: 1080px; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border-radius: 28px;
  background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 140px rgba(0, 0, 0, .7);
  animation: p-pop .9s .2s cubic-bezier(.25, 1.2, .4, 1) backwards; }
.sd-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.sd-film-wall { position: absolute; inset: -30% -12%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-content: center;
  transform: rotate(-9deg); opacity: .5; pointer-events: none; }
.sd-film-wall img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; display: block; }
.sd-film-wall img:nth-child(even) { transform: translateY(34%); }
.sd-film:has(.sd-film-wall)::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 65% at 50% 50%, rgba(0, 0, 0, .55), rgba(0, 0, 0, .94) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); border-radius: inherit; }
.sd-film-cap { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 16px; color: #fff; }
.sd-film-cap b { font-size: clamp(1.4rem, 3.2vw, 2.4rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.sd-film-cap .p-chip { justify-self: center; margin: 0; color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .1); }
.sd-film-play { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; color: #000; background: #fff;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .1), 0 20px 50px rgba(0, 0, 0, .5); }
.sd-film-play svg { width: 34px; height: 34px; margin-left: 5px; fill: currentColor; }
/* El móvil (30/10/2026, Dani lo quería más realista): marco de titanio, borde negro, isla y botones; dentro, el vídeo con la
   interfaz de Instagram Reels (.sd-ui-ig) o YouTube Shorts (.sd-ui-yt). Las medidas de dentro van en cqw (ancho del móvil),
   así escala igual en la portada, en los ejemplos y en el móvil. Los colores van en variables (--ph-*) para que el tema
   claro generado no los cambie: un móvil es oscuro en los dos temas. */
.sd-phone { --ph-ink: #fff; --ph-bezel: #000; --ph-key: linear-gradient(90deg, #1c1c1f, #3d3d42 60%, #222225);
  --ph-rim: linear-gradient(145deg, #5a5a60 0%, #2a2a2e 22%, #1a1a1d 50%, #34343a 78%, #141416 100%);
  --ph-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 1px rgba(255, 255, 255, .3), 0 0 0 1px rgba(0, 0, 0, .7), 0 40px 90px rgba(0, 0, 0, .75);
  --ph-chip: rgba(255, 255, 255, .16); --ph-top: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
  --ph-bot: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .62)); --ph-track: rgba(255, 255, 255, .28); --ph-btn-ink: #000; --ph-hud: rgba(0, 0, 0, .55); --ph-like: #ff3040;
  position: relative; display: block; container-type: inline-size; aspect-ratio: 9 / 18.6; padding: 0; border: 0; border-radius: 15% / 7.3%;
  background: var(--ph-rim); box-shadow: var(--ph-shadow); color: var(--ph-ink); font-family: var(--sans); text-align: left; }
.sd-phone::before { content: ""; position: absolute; inset: .5% 1.1%; border-radius: 14% / 6.8%; background: var(--ph-bezel); }
.sd-screen { position: absolute; inset: 1.9% 4%; overflow: hidden; border-radius: 11.5% / 5.6%; background: var(--ph-bezel); isolation: isolate; }
.sd-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-island { position: absolute; z-index: 3; top: 4.6cqw; left: 50%; width: 27cqw; height: 7.6cqw; margin-left: -13.5cqw; border-radius: 99px; background: var(--ph-bezel); }
.sd-keys { position: absolute; inset: 22% -.9cqw auto; height: 9%; pointer-events: none; }
.sd-keys::before, .sd-keys::after { content: ""; position: absolute; top: 0; width: 1.2cqw; border-radius: 1cqw; background: var(--ph-key); }
.sd-keys::before { left: 0; height: 100%; box-shadow: 0 13cqw 0 0 #29292d; }   /* subir y bajar volumen */
.sd-keys::after { right: 0; top: 18%; height: 150%; }                            /* encendido */

/* interfaz encima del vídeo */
.sd-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; color: var(--ph-ink); font-size: 3.6cqw; line-height: 1.25; letter-spacing: -.01em; }
.sd-ui::before, .sd-ui::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; }
.sd-ui::before { top: 0; height: 22%; background: var(--ph-top); }
.sd-ui::after { bottom: 0; height: 42%; background: var(--ph-bot); }
.sd-ui svg { display: block; }
.sd-ui .sd-ui-ln { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sd-ui-status { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: 16.5cqw; padding: 0 7.5cqw 0 10cqw; }
.sd-ui-status b { font-weight: 600; font-size: 4.4cqw; letter-spacing: 0; }
.sd-ui-sys { display: flex; align-items: center; gap: 1.4cqw; }
.sd-ui-sys svg { width: 4.4cqw; height: 4.4cqw; fill: currentColor; }
.sd-ui-sys .sd-ui-ln { stroke-width: 2.6; }
.sd-ui-bat { position: relative; width: 6.4cqw; height: 3cqw; border-radius: 1cqw; background: var(--ph-ink); box-shadow: 0 0 0 .35cqw var(--ph-bezel), 0 0 0 .7cqw var(--ph-track); }
.sd-ui-top { position: absolute; top: 17cqw; left: 5cqw; right: 4.5cqw; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; }
.sd-ui-top b { font-size: 6cqw; font-weight: 600; letter-spacing: -.02em; }
.sd-ui-top svg { width: 6.6cqw; height: 6.6cqw; }
.sd-ui-yt .sd-ui-top { justify-content: flex-end; }
.sd-ui-side { position: absolute; right: 2.6cqw; bottom: 25cqw; display: flex; flex-direction: column; align-items: center; gap: 4.4cqw; }
.sd-ui-side > span { display: flex; flex-direction: column; align-items: center; gap: .9cqw; font-size: 3cqw; font-weight: 600; text-align: center; max-width: 14cqw; }
.sd-ui-side > span > svg { width: 7.6cqw; height: 7.6cqw; }
.sd-ui-round { width: 11cqw; height: 11cqw; display: grid; place-items: center; border-radius: 50%; background: var(--ph-chip); }
.sd-ui-round svg { width: 6cqw; height: 6cqw; }
.sd-ui-flip { transform: rotate(180deg); }

/* «Me gusta» (30/10/2026, Dani): doble toque en el móvil o el botón. Instagram: corazón rojo + corazón grande blanco donde
   tocas; YouTube: pulgar relleno + pulgar grande con un anillo. studio.js → like() */
.sd-phone { -webkit-user-select: none; user-select: none; }
.sd-ui-like { position: relative; pointer-events: auto; cursor: pointer; }
.sd-ui-like svg, .sd-ui-like .sd-ui-round { transition: transform .2s; }
.sd-ui-like:hover svg { transform: scale(1.08); }
.sd-ui-like::after { content: ""; position: absolute; left: 50%; top: 0; width: 7.6cqw; height: 7.6cqw; margin-left: -3.8cqw; border-radius: 50%;
  box-shadow: 0 0 0 .5cqw var(--ph-like); opacity: 0; transform: scale(.3); pointer-events: none; }
.sd-ui-yt .sd-ui-like::after { top: 0; width: 11cqw; height: 11cqw; margin-left: -5.5cqw; box-shadow: 0 0 0 .5cqw var(--ph-ink); }
.sd-ui-like.liked .sd-ui-ln { fill: currentColor; }
.sd-ui-ig .sd-ui-like.liked svg { color: var(--ph-like); }
.sd-ui-like.pop svg, .sd-ui-like.pop .sd-ui-round { animation: sd-likepop .55s cubic-bezier(.3, 1.6, .5, 1); }
.sd-ui-like.pop.liked::after { animation: sd-ring .55s ease-out; }
@keyframes sd-likepop { 0% { transform: scale(1); } 25% { transform: scale(.72); } 60% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes sd-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.9); } }
/* el grande, donde se toca */
.sd-big { position: absolute; z-index: 6; width: 30cqw; height: 30cqw; margin: -15cqw 0 0 -15cqw; pointer-events: none; color: var(--ph-ink);
  animation: sd-heart 1s cubic-bezier(.25, 1, .4, 1) both; }
.sd-big svg { width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 1cqw 3cqw rgba(0, 0, 0, .35)); }
.sd-big-yt::before { content: ""; position: absolute; inset: -6cqw; border-radius: 50%; box-shadow: 0 0 0 .8cqw var(--ph-ink); animation: sd-ring .7s .05s ease-out both; }
@keyframes sd-heart {
  0% { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(0); }
  15% { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1.25); }
  30% { transform: rotate(var(--rot, 0deg)) scale(.92); }
  45% { transform: rotate(var(--rot, 0deg)) scale(1.04); }
  70% { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1); }
  100% { opacity: 0; transform: translateY(-14cqw) rotate(var(--rot, 0deg)) scale(.6); } }
.sd-ui-disc { width: 7.6cqw; height: 7.6cqw; border-radius: 1.8cqw; background: var(--ph-rim); box-shadow: 0 0 0 .5cqw var(--ph-ink); }
.sd-ui-sq { width: 9cqw; height: 9cqw; border-radius: 2cqw; }
.sd-ui-disc, .sd-ui-av { overflow: hidden; }
.sd-ui-disc img, .sd-ui-av img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }   /* foto de perfil de la cuenta */
.sd-ui-foot { position: absolute; left: 4.4cqw; right: 18cqw; bottom: 6.5cqw; display: grid; gap: 2.2cqw; }
.sd-ui-who { display: flex; align-items: center; gap: 2.2cqw; min-width: 0; }
.sd-ui-who b { font-size: 3.9cqw; font-weight: 600; white-space: nowrap; }
.sd-ui-av { flex: none; width: 8cqw; height: 8cqw; display: grid; place-items: center; border-radius: 50%; font: normal 600 4cqw/1 var(--sans);
  color: var(--ph-btn-ink); background: var(--ph-ink); }
.sd-ui-follow { flex: none; padding: .9cqw 2.6cqw; border-radius: 1.8cqw; font-size: 3.3cqw; font-weight: 600; box-shadow: inset 0 0 0 .3cqw var(--ph-ink); }
.sd-ui-yt .sd-ui-follow { padding: 1.3cqw 3.2cqw; border-radius: 99px; color: var(--ph-btn-ink); background: var(--ph-ink); box-shadow: none; }
.sd-ui-cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 3.6cqw; }
.sd-ui-audio { display: flex; align-items: center; gap: 1.6cqw; font-size: 3.2cqw; white-space: nowrap; overflow: hidden; }
.sd-ui-audio svg { flex: none; width: 3.8cqw; height: 3.8cqw; }
.sd-ui-bar { position: absolute; left: 0; right: 0; bottom: 0; height: .8cqw; background: var(--ph-track); }
.sd-ui-bar i { display: block; width: var(--p, 0%); height: 100%; background: var(--ph-ink); transition: width .35s linear; }

/* 2 · cifras */
.sd-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border-radius: 28px; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .08); }
.sd-strip > div { display: grid; gap: 4px; padding: 26px 24px; background: #0c0c0d; }
.sd-strip b { font: 600 clamp(2rem, 4vw, 2.8rem)/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sd-strip span { color: var(--muted); font-size: 14px; }

/* secciones */
.sd-sec { padding: 120px 0 0; scroll-margin-top: 60px; }
.sd-head { max-width: 640px; margin: 0 0 40px; }
.sd-kicker { font: 500 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sd-head h2 { margin: 10px 0 10px; font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -.045em; line-height: 1.02; }
.sd-head p { margin: 0; color: var(--muted); font-size: 17px; }

/* aparecer al bajar */
.sd-rv { opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .7s ease, transform .9s cubic-bezier(.25, 1.2, .4, 1); transition-delay: var(--d, 0s); }
.sd-rv.in { opacity: 1; transform: none; }

/* 3 · ejemplos: fila de móviles que se desliza */
/* de borde a borde de la ventana (Dani: «el móvil no puede cortarse nunca, se cortará en el límite de la web»): la fila sale
   del ancho del contenido y el primer móvil empieza alineado con el texto (--gut) */
.sd-reel { --gut: max(20px, calc(50vw - 570px));
  display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(50% - 50vw); padding: 10px var(--gut) 30px; scrollbar-width: none; overscroll-behavior-x: contain; }
.sd-reel::-webkit-scrollbar { display: none; }
/* se arrastran con el ratón o el dedo (studio.js); al soltar se colocan en su sitio, como mucho uno más (pedido por Dani) */
.sd-reel { scroll-padding-inline: var(--gut); touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.sd-reel.drag, .sd-reel.auto { scroll-snap-type: none; }    /* .auto = van pasando solos */
.sd-reel.drag { cursor: grabbing; }
.sd-reel.drag .sd-phone { pointer-events: none; }
.sd-reel video, .sd-reel img { -webkit-user-drag: none; }
.sd-clip { margin: 0; display: grid; gap: 14px; scroll-snap-align: start; scroll-snap-stop: always; }
/* título de los ejemplos con el volumen a la derecha */
.sd-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin: 0 0 40px; }
.sd-head-row .sd-head { margin: 0; }
.sd-vol { flex: none; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 18px 0 15px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .055); box-shadow: var(--lq); }
.sd-vol svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
/* el altavoz cambia con el nivel, como en el móvil: tachado a 0, una onda por debajo de la mitad */
.sd-vol .sd-x { display: none; }
.sd-vol.low .sd-w2, .sd-vol.mute .sd-w1, .sd-vol.mute .sd-w2 { display: none; }
.sd-vol.mute .sd-x { display: inline; }
.sd-ctrls { flex: none; display: flex; align-items: center; gap: 10px; }
/* parar / seguir el movimiento de los móviles */
.sd-auto { flex: none; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--muted);
  background: rgba(255, 255, 255, .055); box-shadow: var(--lq); transition: background .2s, color .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.sd-auto:hover { background: rgba(255, 255, 255, .1); color: var(--ink); }
.sd-auto:active { transform: scale(.92); }
.sd-auto svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sd-auto .sd-i-play { display: none; fill: currentColor; stroke: none; }
.sd-auto.paused .sd-i-pause { display: none; }
.sd-auto.paused .sd-i-play { display: inline; }
.sd-vol input { -webkit-appearance: none; appearance: none; width: 150px; height: 22px; margin: 0; background: none; cursor: pointer; --v: 80%; }
.sd-vol input::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--ink) var(--v), rgba(255, 255, 255, .16) var(--v)); }
.sd-vol input::-moz-range-track { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .16); }
.sd-vol input::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--ink); }
.sd-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.sd-vol input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.sd-vol input:active::-webkit-slider-thumb { transform: scale(1.2); }
.sd-clip .sd-phone { width: 100%; cursor: pointer; --ph-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 1px rgba(255, 255, 255, .3), 0 0 0 1px rgba(0, 0, 0, .7), 0 24px 60px rgba(0, 0, 0, .6);
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.sd-clip .sd-phone:hover { transform: translateY(-6px); }
.sd-clip .sd-phone:active { transform: scale(.96); }
.sd-clip .sd-ui-top { display: none; }      /* en los ejemplos, sin «Reels» ni lupa arriba (como estaba cuando Dani lo aprobó) */
.sd-clip figcaption { padding: 0 6px; font-weight: 500; font-size: 15px; letter-spacing: -.01em; }
/* sin botón de sonido en la esquina (Dani lo quitó el 30/10/2026): el sonido se ve solo con el aviso del centro */
/* aviso del centro al tocar (como Instagram): círculo con el altavoz, con sonido o tachado */
.sd-hud { position: absolute; z-index: 5; left: 50%; top: 50%; display: grid; place-items: center;
  width: 22cqw; height: 22cqw; margin: -11cqw 0 0 -11cqw; border-radius: 50%; color: var(--ph-ink); background: var(--ph-hud);
  opacity: 0; transform: scale(.75); pointer-events: none; transition: opacity .35s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.sd-hud.show { opacity: 1; transform: none; }
.sd-hud svg { width: 10cqw; height: 10cqw; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sd-hud .sd-wave { display: none; }
.sd-hud.on .sd-wave { display: inline; }
.sd-hud.on .sd-mute { display: none; }
/* volumen como en el iPhone (Dani, 30/10/2026): barra fina blanca, vertical y redondeada, pegada al borde izquierdo arriba,
   junto a los botones de volumen; se llena desde abajo. Entra desde el borde y se va sola */
.sd-vbar { position: absolute; z-index: 5; left: 5.2cqw; top: 19%; width: 2.6cqw; height: 17%; border-radius: 99px; overflow: hidden;
  background: var(--ph-track); box-shadow: 0 .6cqw 2cqw rgba(0, 0, 0, .25); opacity: 0; transform: translateX(-3cqw) scaleX(.6); transform-origin: left center;
  pointer-events: none; transition: opacity .3s ease, transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.sd-vbar.show { opacity: 1; transform: none; }
.sd-vbar b { position: absolute; left: 0; right: 0; bottom: 0; height: var(--lv, 80%); background: var(--ph-ink); transition: height .12s linear; }
.sd-play.on { --ph-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 1px 1px rgba(255, 255, 255, .4), 0 0 0 2px rgba(255, 255, 255, .5), 0 24px 60px rgba(0, 0, 0, .6); }

/* 4 · cómo funciona (30/10/2026: Dani quería algo menos «de IA» que 4 tarjetas con icono). Lista grande sin tarjetas: cada paso
   es una fila con un número enorme hueco, el texto y lo que sale de ese paso. El paso que está en el centro de la pantalla
   (.on, lo pone studio.js) se enciende: el número se llena de abajo arriba, se dibuja la raya de encima y se anima su muestra */
.sd-flow { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sd-fl { position: relative; display: grid; grid-template-columns: minmax(170px, 1.7fr) 2fr 2.3fr; align-items: center; gap: 24px 48px; padding: 46px 0;
  border-top: 1px solid rgba(255, 255, 255, .08); opacity: .42; transition: opacity .7s ease; }
.sd-fl.on { opacity: 1; }
.sd-fl::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, var(--ink), rgba(255, 255, 255, 0) 80%);
  transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.25, 1, .4, 1); }
.sd-fl.on::before { transform: scaleX(1); }
.sd-fl-n { font: 600 clamp(5.5rem, 11vw, 9.5rem)/.8 var(--sans); letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22);
  background: linear-gradient(180deg, #fff 10%, #8e8e93 100%) no-repeat 0 100% / 100% 0%; -webkit-background-clip: text; background-clip: text;
  transition: background-size 1s cubic-bezier(.25, 1, .4, 1), -webkit-text-stroke-color .8s; }
.sd-fl.on .sd-fl-n { background-size: 100% 100%; -webkit-text-stroke-color: rgba(255, 255, 255, 0); }
.sd-fl-txt h3 { margin: 0 0 10px; font-size: clamp(1.6rem, 2.6vw, 2.15rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
.sd-fl-txt p { max-width: 340px; margin: 0; color: var(--muted); font-size: 15.5px; }
.sd-fl-demo { min-height: 160px; display: grid; align-content: center; gap: 10px; }
/* lo que sale de cada paso */
.sd-dm-idea span { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 14px; color: var(--muted);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.sd-dm-idea span:nth-child(2) { margin-left: 38px; transition-delay: .08s; } .sd-dm-idea span:nth-child(3) { margin-left: 12px; transition-delay: .16s; }
.sd-dm-idea span:nth-child(4) { margin-left: 62px; transition-delay: .24s; }
.sd-dm-idea .pick { color: #000; background: var(--ink); box-shadow: none; font-weight: 600; }
.sd-dm-idea .pick svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sd-fl.on .sd-dm-idea span { opacity: 1; transform: none; }
.sd-dm-guion p { display: grid; grid-template-columns: 62px 1fr; gap: 12px; margin: 0; font: 500 13.5px/1.55 var(--mono); color: var(--ink);
  clip-path: inset(0 100% 0 0); transition: clip-path 1.1s steps(34); }
.sd-dm-guion p:nth-child(2) { transition-delay: .9s; } .sd-dm-guion p:nth-child(3) { transition-delay: 1.8s; }
.sd-dm-guion i { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.sd-fl.on .sd-dm-guion p { clip-path: inset(0 0 0 0); }
.sd-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -.15em; background: var(--ink); }
.sd-fl.on .sd-caret { animation: sd-blink 1s steps(1) infinite; }
@keyframes sd-blink { 50% { opacity: 0; } }
.sd-wave-bars { display: flex; align-items: center; gap: 4px; height: 92px; }
.sd-wave-bars i { flex: 1; border-radius: 99px; background: rgba(255, 255, 255, .2); transform: scaleY(.12); transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), background .4s; }
.sd-fl.on .sd-wave-bars i { transform: none; animation: sd-bar 1.1s ease-in-out infinite alternate; }
.sd-fl.on .sd-wave-bars i:nth-child(-n+9) { background: var(--ink); }
@keyframes sd-bar { to { transform: scaleY(.45); } }
.sd-dm-voz p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.sd-dm-voz q { quotes: "«" "»"; }
.sd-dm-voz p b { padding: 0 4px; border-radius: 4px; color: #000; background: var(--ink); font-weight: 600; }
.sd-dm-voz p span { font: 500 12.5px var(--mono); white-space: nowrap; }
.sd-dm-pub { gap: 0; }
.sd-dm-pub p { display: grid; grid-template-columns: 1fr auto 22px; align-items: center; gap: 14px; margin: 0; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sd-dm-pub p:last-child { border-bottom: 0; }
.sd-dm-pub b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.sd-dm-pub span { font: 500 12.5px var(--mono); color: var(--muted); }
.sd-dm-pub svg { width: 20px; height: 20px; fill: none; stroke: #30d158; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s ease; }
.sd-dm-pub p:nth-child(2) svg { transition-delay: .25s; } .sd-dm-pub p:nth-child(3) svg { transition-delay: .5s; }
.sd-fl.on .sd-dm-pub svg { stroke-dashoffset: 0; }

.sd-step-ic { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); margin-bottom: 8px; }
.sd-step-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sd-who h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.03em; text-transform: none; color: var(--ink); }
.sd-who p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* 5 · temario */
.sd-mods { gap: 0; padding: 8px; }
.sd-mod + .sd-mod { border-top: 1px solid rgba(255, 255, 255, .06); }
.sd-mod summary, .sd-q summary { display: flex; align-items: center; gap: 16px; padding: 18px 16px; border-radius: 20px; cursor: pointer; list-style: none; transition: background .2s; }
.sd-mod summary::-webkit-details-marker, .sd-q summary::-webkit-details-marker { display: none; }
.sd-mod summary:hover, .sd-q summary:hover { background: rgba(255, 255, 255, .035); }
.sd-mod-n { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; font: 500 14px var(--mono); background: rgba(255, 255, 255, .06); }
.sd-mod-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sd-mod-txt b { font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; }
.sd-mod-txt span { color: var(--muted); font-size: 14px; }
.sd-soon { flex: none; }
.sd-chev { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
details[open] > summary .sd-chev { transform: rotate(180deg); }
.sd-mod-body { margin: 0; padding: 0 16px 18px 78px; color: var(--muted); font-size: 14.5px; animation: p-step .4s cubic-bezier(.25, 1.3, .4, 1) both; }

/* 6 · para quién */
.sd-who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sd-who .p-card { gap: 10px; padding: 24px; }
.sd-who .p-card:nth-child(2) { --d: .1s; } .sd-who .p-card:nth-child(3) { --d: .2s; }

/* planes (02/11/2026): 3 columnas opacas; la del medio, destacada (borde más claro y luz arriba, como la ventana del precio).
   Precio con la misma cifra grande que la ventana (.sd-was, .sd-amount). Contador de la preventa en Geist Mono (studio.js) */
.sd-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.sd-plan { display: grid; gap: 0; padding: 26px 26px 24px; border-radius: 28px; background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .08); }
.sd-plan:nth-child(2) { --d: .1s; } .sd-plan:nth-child(3) { --d: .2s; }
.sd-plan.top { border-color: rgba(255, 255, 255, .26);
  background: radial-gradient(120% 50% at 50% 0%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 70%), #0c0c0d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 40px 100px rgba(0, 0, 0, .55); }
.sd-plan.closed { opacity: .55; }
.sd-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.sd-plan-n { font: 500 13px var(--mono); color: var(--muted); letter-spacing: .04em; }
.sd-plan h3 { margin: 0 0 6px; font-size: 24px; font-weight: 600; letter-spacing: -.035em; }
.sd-plan-desc { margin: 0 0 22px; color: var(--muted); font-size: 14.5px; line-height: 1.5; min-height: 4.5em; }   /* 3 líneas: los precios quedan a la misma altura */
.sd-plan .sd-amount b { font-size: 68px; }
.sd-plan .sd-amount-side i { font-size: 22px; }
.sd-plan .sd-amount-side i + i { font-size: 17px; }
.sd-plan .sd-once { margin-top: 8px; }
.sd-count { display: grid; gap: 4px; margin: 16px 0 0; padding: 12px 14px; border-radius: 16px; background: rgba(255, 159, 10, .1); }
.sd-count span { color: #ffb340; font-size: 12.5px; font-weight: 500; }
.sd-count b { font: 500 15px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-plan .sd-incl { margin: 22px 0 24px; gap: 11px; }
.sd-plan .sd-incl li { align-items: flex-start; font-size: 14.5px; line-height: 1.4; }
.sd-plan .sd-incl svg { margin-top: 1px; }
.sd-plan-go { width: 100%; height: 52px; gap: 10px; font-size: 16px; }
.sd-plan-go:disabled { opacity: .6; cursor: default; }
.sd-incl-more { color: var(--muted); font-size: 14px; padding-left: 28px; }

/* 7 · precio: ventana encima (Dani no la quiere en la página, 30/10/2026). Opaca y sin desenfoque: detrás se mueven vídeos.
   Rehecha el 31/10/2026 (Dani: «descuadrado y feo»): título, caja del precio con la cifra grande y los céntimos al lado, lista y botón */
.sd-price.p-dialog { width: min(440px, calc(100vw - 24px)); padding: 34px 28px 24px; text-align: left; border-radius: 32px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 70%), #0c0c0d;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 120px rgba(0, 0, 0, .8); }
.sd-price[open] { animation: p-pop .45s cubic-bezier(.25, 1.2, .4, 1); }
.sd-price::backdrop { background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sd-price h2 { margin: 8px 44px 22px 0; font-size: 26px; font-weight: 600; letter-spacing: -.035em; line-height: 1.12; }
.sd-price-x { position: absolute; top: 18px; right: 18px; }
.sd-pbox { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 20px 14px 18px 22px; border-radius: 22px;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); overflow: hidden; }
.sd-pmain { min-width: 0; }
/* abanico de 3 móviles (los .sd-phone de la web, con su interfaz de Reels/Shorts) a la derecha: rellena el hueco */
.sd-pfan { position: relative; flex: none; width: 140px; height: 160px; pointer-events: none; }
.sd-pfan .sd-phone { position: absolute; top: 6px; left: 50%; width: 70px; margin-left: -35px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
  transition: transform .45s cubic-bezier(.25, 1.2, .4, 1); }
.sd-pfan .sd-phone:nth-child(1) { transform: translateX(-50%) rotate(-11deg) translateY(8px) scale(.9); }
.sd-pfan .sd-phone:nth-child(2) { z-index: 1; }
.sd-pfan .sd-phone:nth-child(3) { transform: translateX(50%) rotate(11deg) translateY(8px) scale(.9); }
.sd-pbox:hover .sd-pfan .sd-phone:nth-child(1) { transform: translateX(-58%) rotate(-14deg) translateY(6px) scale(.9); }
.sd-pbox:hover .sd-pfan .sd-phone:nth-child(3) { transform: translateX(58%) rotate(14deg) translateY(6px) scale(.9); }
.sd-was { display: flex; align-items: center; gap: 10px; }
.sd-was s { color: var(--muted); font-size: 16px; font-variant-numeric: tabular-nums; text-decoration-thickness: 1.5px; }
.sd-off { padding: 4px 10px; border-radius: 999px; font: 600 12.5px var(--mono); color: #5ce07f; background: rgba(48, 209, 88, .14); }
.sd-amount { display: flex; align-items: flex-start; margin: 6px 0 2px; line-height: 1; font-variant-numeric: tabular-nums; }
.sd-amount b { font-size: 84px; font-weight: 600; letter-spacing: -.06em; line-height: .9; }
.sd-amount-side { display: grid; gap: 6px; margin: 7px 0 0 6px; }
.sd-amount-side i { font-style: normal; font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.sd-amount-side i + i { color: var(--muted); font-size: 20px; font-weight: 500; }
.sd-save { color: #5ce07f; font-weight: 500; white-space: nowrap; }
.sd-once { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.sd-incl { display: grid; gap: 13px; margin: 22px 2px 24px; padding: 0; list-style: none; }
.sd-incl li { display: flex; align-items: center; gap: 11px; font-size: 15px; }
.sd-buy { width: 100%; height: 56px; gap: 10px; font-size: 16.5px; }
.sd-buy .sd-arrow { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.sd-buy:hover .sd-arrow { transform: translateX(3px); }
.sd-safe { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.sd-safe svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 8 · preguntas */
.sd-faq { max-width: 760px; display: grid; gap: 10px; }
.sd-q { border-radius: 22px; background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .08); }
.sd-q summary { justify-content: space-between; padding: 20px 22px; font-weight: 500; font-size: 16px; }
.sd-q p { margin: 0; padding: 0 22px 20px; color: var(--muted); animation: p-step .4s cubic-bezier(.25, 1.3, .4, 1) both; }

.sd-foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 120px; padding: 26px 4px 10px; border-top: 1px solid rgba(255, 255, 255, .06); color: var(--muted); font-size: 14px; }
.sd-foot a { color: var(--muted); text-decoration: none; transition: color .2s; }
.sd-foot a:hover { color: var(--ink); }

/* botón que flota abajo (sin precio: el precio solo sale en la ventana, pedido por Dani 30/10/2026) */
.sd-dock { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 20; display: flex; align-items: center; padding: 6px;
  border-radius: 999px; background: rgba(30, 30, 32, .6); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); box-shadow: var(--float);
  transform: translateX(-50%); animation: sd-dock .5s cubic-bezier(.25, 1.3, .4, 1) both; }
@keyframes sd-dock { from { opacity: 0; transform: translateX(-50%) translateY(30px) scale(.9); } }
.sd-dock .p-btn { height: 46px; padding: 0 22px; font-size: 15.5px; white-space: nowrap; }
.sd-dock.sd-measure { visibility: hidden; animation: none; }     /* solo para medir dónde cae la gota */
.sd-dock.landed { animation: sd-dock-in .3s ease both; }           /* tras caer la gota: solo aparece el cristal de alrededor */
@keyframes sd-dock-in { from { opacity: 0; } }
.sd-buy-big.sd-gone { visibility: hidden; }
/* la gota (Dani, 31/10/2026; rehecha el 01/11/2026): la pinta studio.js en el canvas, que tapa la pantalla solo durante el viaje.
   Es una sola forma de cristal líquido; el texto del botón es el span de encima (lo mueve studio.js con transform). */
.sd-drop { position: fixed; inset: 0; z-index: 21; pointer-events: none; }
.sd-drop[hidden] { display: none; }
.sd-drop canvas { position: absolute; left: 0; top: 0; }
.sd-drop span { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; white-space: nowrap; color: #000; will-change: transform, opacity; }
.sd-body .p-toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }   /* encima de la barra de compra */
.sd-buy:disabled { opacity: .7; cursor: progress; }
.sd-buy-err { margin: 12px 0 0; color: #ff8a80; font-size: 13.5px; text-align: center; }

/* páginas sueltas (studio_msg.html): «gracias» tras pagar y el aula. Una tarjeta como la del precio, en el centro */
.sd-msg { display: grid; place-items: center; min-height: calc(100vh - 160px); min-height: calc(100dvh - 160px); padding: 24px 16px 60px; }
.sd-msg-card { width: min(460px, 100%); padding: 44px 32px 34px; text-align: center; border-radius: 34px; background: #0c0c0d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 120px rgba(0, 0, 0, .8);
  animation: p-step .5s cubic-bezier(.25, 1.3, .4, 1) both; }
.sd-msg-card h1 { margin: 18px 0 10px; font-size: clamp(1.7rem, 5vw, 2.1rem); font-weight: 600; letter-spacing: -.035em; }
.sd-msg-card p { margin: 0 0 26px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.sd-msg-card p b { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.sd-msg-card .sd-msg-small { margin: -14px 0 0; font-size: 13.5px; }
.sd-msg-card .p-btn { min-width: 210px; height: 52px; font-size: 16px; }
.sd-msg-card .sd-msg-incl { margin: 0 0 28px; text-align: left; }   /* lo que trae su plan, en el aula */
.sd-msg-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--ink); background: rgba(255, 255, 255, .07); }
.sd-msg-ico.ok { color: #5ce07f; background: rgba(48, 209, 88, .14); }
.sd-msg-ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* casilla de la ventana del precio: acepta las condiciones y pide el acceso ya (sin marcarla no se abre el pago) */
.sd-agree { display: flex; align-items: flex-start; gap: 11px; margin: 0 2px 16px; color: var(--muted); font-size: 13px; line-height: 1.5; cursor: pointer; }
.sd-agree input { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 0; border-radius: 7px;
  background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); cursor: pointer; transition: background .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.sd-agree input:active { transform: scale(.9); }
.sd-agree input::after { content: ""; width: 10px; height: 5px; margin-top: -3px; border: solid #000; border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.sd-agree input:checked { background: var(--ink); box-shadow: none; }
.sd-agree input:checked::after { transform: rotate(-45deg) scale(1); }
.sd-agree input:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.sd-agree a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255, 255, 255, .3); }
.sd-agree.need { color: #ffb340; }
.sd-agree.need input { box-shadow: inset 0 0 0 1px #ffb340; }
.sd-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
/* «Powered by Claude» del pie, con la pluma animada de Claude Desktop (sprite de 62 fotogramas de 48 px, 30 fps) */
.sd-foot-by { display: inline-flex; align-items: center; gap: 14px; }
.sd-claude { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .1); }
.sd-pluma { width: 20px; height: 20px; flex: none; margin-left: -1px; background: url("studio/pluma-claude.webp") 0 0 / 100% auto no-repeat; animation: sd-pluma 2.0667s steps(62, jump-none) infinite; }
@keyframes sd-pluma { to { background-position: 0 100%; } }

/* páginas legales (studio_legal.html): columna estrecha de texto, con las 4 páginas en chips arriba */
.sd-legal { max-width: 760px; margin: 0 auto; padding: 4vh 16px 40px; }
.sd-legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.sd-legal-nav a { padding: 9px 16px; border-radius: 999px; color: var(--muted); font-size: 14px; text-decoration: none; background: rgba(255, 255, 255, .055);
  transition: background .2s, color .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.sd-legal-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .1); }
.sd-legal-nav a:active { transform: scale(.95); }
.sd-legal-nav a.on { color: #000; background: var(--ink); }
.sd-legal h1 { margin: 0; font-size: clamp(2rem, 6vw, 3rem); font-weight: 600; letter-spacing: -.04em; }
.sd-legal-date { margin: 8px 0 30px; color: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.sd-legal-txt { padding: 30px 32px 34px; border-radius: 28px; background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .08); color: #c7c7cc; font-size: 15.5px; line-height: 1.65; }
.sd-legal-txt > :first-child { margin-top: 0; }
.sd-legal-txt h2 { margin: 30px 0 8px; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.sd-legal-txt p { margin: 0 0 12px; }
.sd-legal-txt ul { margin: 0 0 12px; padding-left: 20px; }
.sd-legal-txt li { margin-bottom: 6px; }
.sd-legal-txt b { color: var(--ink); font-weight: 500; }
.sd-legal-txt a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255, 255, 255, .3); overflow-wrap: anywhere; }
.sd-legal-ref { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255, 255, 255, .6); }   /* «Aviso legal» nombrado, sin enlace (Dani, 31/10/2026) */
.sd-legal-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; }   /* datos del titular: pequeños y grises (Dani, 31/10/2026) */
.sd-legal-dl dt, .sd-legal-dl dd { margin: 0; padding: 5px 0; }
.sd-legal-dl dt { padding-right: 18px; color: var(--muted); }
.sd-legal-dl dd { color: var(--muted); overflow-wrap: anywhere; }
.sd-legal-quote { margin: 8px 0 0; padding: 16px 18px; border-radius: 20px; background: rgba(255, 255, 255, .035); color: var(--ink); }
.sd-legal .sd-foot { margin-top: 60px; }
@media (max-width: 520px) {
  .sd-legal-txt { padding: 22px 20px 26px; border-radius: 24px; font-size: 15px; }
  .sd-legal-dl { grid-template-columns: max-content 1fr; }
}

@media (max-width: 900px) {
  .sd-nav { display: none; }
  .sd-hero { gap: 40px; padding-top: 4vh; }
  .sd-plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .sd-plan.top { order: -1; }                        /* en una columna, el destacado primero */
  .sd-strip { grid-template-columns: 1fr 1fr; }
  .sd-fl { grid-template-columns: auto 1fr; gap: 22px 28px; }
  .sd-fl-demo { grid-column: 1 / -1; min-height: 0; }
  .sd-who { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .st { padding: 0 16px 30px; }
  .sd-h1 { font-size: 2.6rem; }
  .sd-lead { font-size: 16px; }
  .sd-cta .p-btn { flex: 1 1 100%; }
  .sd-film { border-radius: 20px; }
  .sd-film-wall { inset: -40% -30%; gap: 10px; }
  .sd-film-wall img { border-radius: 10px; }
  .sd-film-cap { gap: 10px; }
  .sd-film-play { width: 60px; height: 60px; box-shadow: 0 0 0 7px rgba(255, 255, 255, .1), 0 14px 34px rgba(0, 0, 0, .5); }
  .sd-film-play svg { width: 24px; height: 24px; margin-left: 3px; }
  .sd-film-cap b { font-size: 1.25rem; }
  .sd-plan { padding: 22px 20px 20px; border-radius: 24px; }
  .sd-plan .sd-amount b { font-size: 60px; }
  .sd-strip { border-radius: 24px; }
  .sd-strip > div { padding: 20px 18px; }
  .sd-sec { padding-top: 84px; }
  .sd .sd-hero { margin-inline: -16px; padding-inline: 16px; }
  .sd-reel { --gut: 16px; grid-auto-columns: 62vw; gap: 14px; padding-bottom: 24px; }
  .sd-head-row { flex-direction: column; align-items: stretch; }
  .sd-vol { flex: 1; }
  .sd-vol input { flex: 1; width: auto; }
  .sd-fl { padding: 34px 0; gap: 18px 18px; }
  .sd-fl-n { font-size: 4.6rem; }
  .sd-fl-txt h3 { font-size: 1.5rem; }
  .sd-fl-txt p { font-size: 14.5px; }
  .sd-dm-idea span:nth-child(n) { margin-left: 0; }
  .sd-who .p-card { border-radius: 24px; }
  .sd-mods { padding: 4px; }
  .sd-mod summary { gap: 12px; padding: 14px 10px; }
  .sd-mod-n { width: 40px; height: 40px; border-radius: 12px; }
  .sd-soon { display: none; }
  .sd-mod-body { padding-left: 62px; }
  .sd-price.p-dialog { padding: 28px 20px 20px; border-radius: 28px; }
  .sd-price h2 { font-size: 23px; margin-bottom: 18px; }
  .sd-pbox { padding: 18px 8px 16px 18px; }
  .sd-amount b { font-size: 66px; }
  .sd-pfan { width: 104px; height: 124px; }
  .sd-pfan .sd-phone { width: 54px; margin-left: -27px; }
  .sd-foot { flex-direction: column; margin-top: 84px; }
  .sd-dock { width: calc(100% - 24px); }
  .sd-dock .p-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .sd-rv { opacity: 1; transform: none; } }

/* ---------- Halo IDE (a063.es/halo): chats · conversación · archivos, como app a pantalla completa (sin la barra de la portada ni marco) ---------- */
body.hi-fixed { overflow: hidden; }
body.hi-fixed .p-top { display: none; }
.hi { max-width: none; height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; padding: 0 0 env(safe-area-inset-bottom); background: #0c0c0d; }
.hi-head { flex: none; display: none; align-items: center; gap: 8px 16px; }
.hi-home { flex: none; margin-left: -6px; }
.hi-head .p-back { flex: none; margin: 0; }
.hi-head .p-hello { margin: 0; font-size: 22px; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.hi-tabs { display: none; }
/* plegar los chats (botón de la izquierda) y el panel (botón de la derecha) */
.hi-tog { flex: none; width: 34px; height: 34px; }
.hi-tog svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#newMini { display: none; }
body.hi-noside #newMini { display: grid; }
#panelBtn { display: none; }
#panelClose { display: none; }
.hi-app { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--hi-sw, 300px) minmax(0, 1fr); overflow: hidden; background: #0c0c0d; }
.hi-side, .hi-conv, .hi-files { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.hi-side { position: relative; border-right: 1px solid rgba(255, 255, 255, .06); }
.hi-files { position: relative; }
/* línea que se arrastra para cambiar el ancho de los chats y del panel */
.hi-grip { position: absolute; z-index: 6; top: 0; bottom: 0; width: 9px; cursor: col-resize; touch-action: none; }
.hi-grip.side { right: -5px; }
.hi-grip.panel { left: -5px; }
.hi-grip::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: transparent; transition: background .15s; }
.hi-grip:hover::after, .hi-grip.on::after { width: 2px; left: 3.5px; background: rgba(255, 255, 255, .35); }
body.hi-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.hi-resizing .hi-web-frame { pointer-events: none; }
/* botones de plegar: dentro de cada columna para cerrarla; en la cabecera de la conversación, solo para volver a abrirla */
#sideBtn { display: none; }
body.hi-noside #sideBtn { display: grid; }
.hi-tog-in { width: 32px; height: 32px; }
.hi-files { display: none; border-left: 1px solid rgba(255, 255, 255, .06); }
/* panel de la derecha: pestañas y cada pestaña */
.hi-panel-head { padding: 6px 8px 6px 10px; gap: 4px; }
/* pestañas solo con icono (Dani, 02/11/2026): archivos, cambios, terminal y navegador (bola del mundo); el nombre va en title */
.hi-ptabs { flex: none; display: flex; padding: 3px; margin-right: auto; }
.hi-ptabs button { flex: none; display: grid; place-items: center; width: 40px; height: 30px; padding: 0; }
.hi-ptabs svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hi-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hi-pane[hidden] { display: none; }
.hi-pane-title { flex: none; margin: 0; padding: 10px 16px 0; color: var(--muted); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hi-chg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 10px; color: var(--muted); font-size: 13px; }
.hi-chg { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hi-chg:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }
.hi-chg:disabled { cursor: default; }
.hi-chg-tag { flex: none; min-width: 70px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; text-align: center; }
.hi-chg.new .hi-chg-tag { background: rgba(48, 209, 88, .14); color: #5ce07f; }
.hi-chg.mod .hi-chg-tag { background: rgba(255, 159, 10, .15); color: #ffb340; }
.hi-chg.del .hi-chg-tag { background: rgba(255, 69, 58, .16); color: #ff7a70; }
.hi-chg-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; }
.hi-chg.del .hi-chg-path { text-decoration: line-through; color: var(--muted); }
.hi-term { flex: 1; min-height: 0; margin: 0; overflow: auto; padding: 12px 14px; background: #0a0a0b; color: #d6d6dc; font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin; }
.hi-term-in { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .06); background: #0a0a0b; }
.hi-term-in[hidden] { display: none; }
.hi-term-in > span { color: #5ce07f; font-family: var(--mono); font-weight: 600; }
.hi-term-in input { flex: 1; min-width: 0; padding: 8px 0; border: 0; outline: none; background: none; color: var(--ink); font-family: var(--mono); font-size: 13px; }
.hi-web-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.hi-web-bar .cv-x { width: 32px; height: 32px; }
.hi-web-bar .cv-x svg { width: 16px; height: 16px; }
.hi-web-path { flex: 1; min-width: 0; height: 32px; box-sizing: border-box; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; outline: none;
  background: rgba(255, 255, 255, .04); color: var(--ink); font-family: var(--mono); font-size: 12.5px; }
.hi-web-path:focus { border-color: rgba(255, 255, 255, .45); }
.hi-web-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: #fff; }
.hi-web-frame[hidden], #webNote[hidden] { display: none; }
.hi-col-head { flex: none; display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 50px; padding: 6px 10px 6px 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.hi-col-head > b { flex: 1; min-width: 0; font-size: 16px; letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hi-col-head .p-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hi-list, .hi-msgs, .hi-tree, .hi-ed-body, .hi-pick { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.hi-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 8px; }
/* chats agrupados por carpeta, como en Claude Code (Dani, 02/11/2026): cabecera de carpeta que se pliega, «+» y filas de una línea */
.hi-grp + .hi-grp { margin-top: 14px; }
.hi-grp-head { display: flex; align-items: center; gap: 4px; padding: 2px 4px 4px 8px; }
.hi-grp-tog { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.hi-grp-tog b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.hi-grp-tog svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.hi-grp.shut .hi-grp-tog svg { transform: rotate(-90deg); }
.hi-grp-tog:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; border-radius: 8px; }
.hi-grp-new.cv-x { width: 28px; height: 28px; }
.hi-grp-new.cv-x svg { width: 16px; height: 16px; }
.hi-chat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14px; }
.hi-chat.on .hi-chat-name { font-weight: 600; }
.hi-chat .hi-dot { margin-right: 4px; }
.hi-chat:hover .hi-dot, .hi-chat.on:hover .hi-dot { display: none; }
.hi-chat { position: relative; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 6px 4px 12px; border-radius: 14px; cursor: pointer; }
.hi-chat:hover { background: rgba(255, 255, 255, .05); }
.hi-chat.on { background: rgba(255, 255, 255, .1); }
.hi-chat:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.hi-chat-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.hi-chat-top, .hi-chat-bot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hi-chat-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.hi-chat-top time { flex: none; color: var(--muted); font-size: 12px; }
.hi-chat-bot span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.hi-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #30d158; }
/* el punto dice cómo va (Dani, 02/11/2026): azul trabajando, naranja te necesita, rojo falló (los tres parpadean); verde quieto = acabó bien */
.hi-dot.work { background: #0a84ff; animation: hiDot 1.2s ease-in-out infinite; }
.hi-dot.ask { background: #ff9f0a; animation: hiDot 1s ease-in-out infinite; }
.hi-dot.error { background: #ff453a; animation: hiDot 1s ease-in-out infinite; }
.hi-dot.done { background: #30d158; }
@keyframes hiDot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .hi-dot { animation: none !important; } }
.hi-chat-acts { display: none; gap: 2px; }
.hi-chat:hover .hi-chat-acts { display: flex; }
@media (hover: none) { .hi-chat.on .hi-chat-acts { display: flex; } .hi-chat.on .hi-dot { display: none; } }   /* en el móvil no hay «pasar el ratón» */
.hi-chat-acts .cv-x { width: 30px; height: 30px; }
.hi-chat-acts .cv-x svg { width: 15px; height: 15px; }
.hi-empty { padding: 18px 12px; color: var(--muted); }
.hi-empty p { margin: 0; }
.hi-budget { flex: none; margin: 0; padding: 12px 20px 14px; border-top: 1px solid rgba(255, 255, 255, .06); color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.hi-budget:empty { display: none; }
/* pie de «Chats»: lo gastado y la rueda de ajustes */
.hi-foot { flex: none; display: flex; align-items: center; gap: 4px; padding-right: 8px; border-top: 1px solid rgba(255, 255, 255, .06); }
.hi-foot .hi-budget { flex: 1; min-width: 0; border-top: 0; padding: 10px 6px 12px 16px; }
.hi-foot .hi-budget:empty { display: block; }
.hi-foot .cv-x { width: 32px; height: 32px; }
.hi-foot .cv-x svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hi-set-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .045); }
.hi-set-txt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.hi-set-txt b { font-weight: 600; }
.hi-set-txt small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.hi-set-row .p-switch { flex: none; }
.hi-pick-row:has(.hi-pick-note) { flex-wrap: wrap; row-gap: 0; }
.hi-pick-note { flex-basis: 100%; margin-left: 30px; margin-top: -4px; color: var(--muted); font-size: 12px; }

/* conversación */
.hi-conv { position: relative; }
.hi-conv-head { padding: 4px 10px 4px 12px; gap: 10px; }
.hi-who { flex: 1; min-width: 0; display: grid; gap: 1px; }
.hi-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 1.2; letter-spacing: -.02em; }
.hi-who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.hi-who > span:empty { display: none; }
.hi-net { flex: none; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; }
/* interruptores de la cabecera más pequeños (Dani, 02/11/2026) */
.hi-net .p-switch { width: 36px; height: 22px; }
.hi-net .p-switch i { top: 2px; left: 2px; width: 18px; height: 18px; box-shadow: 0 2px 5px rgba(0, 0, 0, .35); }
.hi-net .p-switch.on i { transform: translateX(14px); }
.hi-net .p-switch:active:not(:disabled) i { width: 22px; }
.hi-net .p-switch.on:active:not(:disabled) i { transform: translateX(10px); }
.hi-conv-head #state { margin-right: 22px; }
/* Chat limpio (Dani, 02/11/2026): sin fichas de herramientas; una línea dice qué hace Halo (#live) */
body.hi-clean .hi-tool { display: none; }
/* Va dentro de la conversación, debajo del último mensaje. Cada tipo de tarea (data-k) tiene su dibujo animado. */
.hi-live { align-self: stretch; display: flex; align-items: center; gap: 10px; padding: 6px 4px; color: var(--muted); font-size: 14px; }
.hi-live[hidden] { display: none; }
/* lo que Halo va contando (Dani, 02/11/2026): debajo de «Pensando…» mientras dura; en el chat, línea gris (con «Chat limpio» no sale) */
.hi-live { flex-wrap: wrap; row-gap: 2px; }
.hi-live-say { flex: 1 0 100%; padding-left: 32px; color: var(--ink); font-size: 13.5px; font-weight: 400; line-height: 1.4; opacity: .82; }
.hi-live-say[hidden] { display: none; }
.hi-say { align-self: stretch; margin: 0; padding: 2px 6px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
body.hi-clean .hi-say { display: none; }
.hi-ic { flex: none; width: 22px; height: 22px; }
.hi-ic svg { display: none; width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* «Pensando…»: una animación al azar de think.js (#thSlot); si no cargó, los tres puntos */
.hi-ic .k-th { display: none; width: 22px; height: 22px; }
.hi-live[data-k="think"][data-v] .k-th { display: grid; place-items: center; }
.hi-live[data-v] .k-think { display: none !important; }
.hi-live[data-k="think"] .k-think, .hi-live[data-k="read"] .k-read, .hi-live[data-k="write"] .k-write,
.hi-live[data-k="run"] .k-run, .hi-live[data-k="search"] .k-search, .hi-live[data-k="cloud"] .k-cloud { display: block; }
.hi-live-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: linear-gradient(100deg, var(--muted) 38%, var(--ink) 50%, var(--muted) 62%) 100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: hiShim 2.2s linear infinite; }
.hi-live small { flex: none; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
@keyframes hiShim { to { background-position: 0 0; } }
@keyframes hiBounce { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-5px); opacity: 1; } }
@keyframes hiScan { 0%, 100% { transform: translateY(-6px); opacity: 0; } 20%, 80% { opacity: 1; } 50% { transform: translateY(4px); } }
@keyframes hiPen { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-2px, 1px) rotate(-6deg); } 50% { transform: translate(1px, 0) rotate(3deg); } 75% { transform: translate(-1px, 1px) rotate(-4deg); } }
@keyframes hiLine { 0% { stroke-dasharray: 0 12; } 70%, 100% { stroke-dasharray: 12 0; } }
@keyframes hiBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes hiOrbit { 0%, 100% { transform: translate(0, -2.5px); } 25% { transform: translate(2.5px, 0); } 50% { transform: translate(0, 2.5px); } 75% { transform: translate(-2.5px, 0); } }
@keyframes hiUp { 0%, 100% { transform: translateY(2px); opacity: .3; } 50% { transform: translateY(-2px); opacity: 1; } }
.k-think circle { fill: var(--ink); stroke: none; animation: hiBounce 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.k-think .d2 { animation-delay: .15s; } .k-think .d3 { animation-delay: .3s; }
.k-read .scan { animation: hiScan 1.6s ease-in-out infinite; }
.k-write .pen { animation: hiPen 1s ease-in-out infinite; transform-box: fill-box; transform-origin: 20% 90%; }
.k-write .ln { animation: hiLine 1.4s ease-in-out infinite; }
.k-run .cur { animation: hiBlink 1s steps(1) infinite; }
.k-search .lens { animation: hiOrbit 1.4s ease-in-out infinite; }
.k-cloud .arr { animation: hiUp 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hi-live *, .hi-live-txt { animation: none !important; } }
.hi-msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px;
  padding: 18px max(20px, calc((100% - 860px) / 2)); }
.hi-msgs > * { flex: none; }
.hi-b { max-width: min(82%, 680px); width: fit-content; padding: 9px 14px; border-radius: 18px; overflow-wrap: anywhere; line-height: 1.45; }
.hi-b p { margin: 0; white-space: pre-wrap; }
.hi-b p + p, .hi-b p + pre, .hi-b pre + p, .hi-b ul + p, .hi-b p + ul { margin-top: 8px; }
.hi-b ul { margin: 0; padding-left: 20px; }
.hi-b code { font-family: var(--mono); font-size: .88em; padding: 1px 5px; border-radius: 6px; background: rgba(255, 255, 255, .08); }
.hi-b.in { align-self: flex-start; background: #161618; border: 1px solid rgba(255, 255, 255, .06); border-bottom-left-radius: 6px; }
.hi-b.out { align-self: flex-end; background: #26262a; color: var(--ink); border: 1px solid rgba(255, 255, 255, .08); border-bottom-right-radius: 6px; }
.hi-code { margin: 0; padding: 10px 12px; border-radius: 12px; background: #0a0a0b; border: 1px solid rgba(255, 255, 255, .06); font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
  white-space: pre; overflow-x: auto; }
.hi-note { align-self: center; margin: 2px 0; color: var(--muted); font-size: 13px; text-align: center; white-space: pre-wrap; }
.hi-note.bad { color: #ff6961; }
.hi-tool { align-self: stretch; max-width: 760px; border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); overflow: hidden; }
.hi-tool-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; background: none; color: inherit; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.hi-tool.flat .hi-tool-head { cursor: default; }
.hi-tool-head b { flex: none; font-weight: 600; }
.hi-tool-head code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.hi-tool-head small { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.hi-tool-head svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.hi-tool.open .hi-tool-head svg { transform: rotate(90deg); }
.hi-tool.flat .hi-tool-head svg { visibility: hidden; }
.hi-st { flex: none; width: 14px; height: 14px; display: grid; place-items: center; font-style: normal; }
.hi-tool.ok .hi-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #30d158; }
.hi-tool.bad .hi-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff453a; }
.hi-tool.run .hi-st::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: hiSpin .8s linear infinite; }
@keyframes hiSpin { to { transform: rotate(360deg); } }
.hi-out { margin: 0; max-height: 320px; overflow: auto; padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, .06); background: #0a0a0b;
  font-family: var(--mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: #d6d6db; }
.hi-out:empty { display: none; }
.hi-conv-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 20px; color: var(--muted); text-align: center; }
.hi-conv-empty svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.hi-conv-empty p { margin: 0; max-width: 420px; }
.hi-hint { align-self: center; display: grid; gap: 8px; justify-items: center; max-width: 520px; margin: auto 0; padding: 12px; text-align: center; color: var(--muted); }
.hi-hint p { margin: 0 0 4px; }
.hi-ex { padding: 9px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .055); box-shadow: var(--lq); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer;
  transition: background .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.hi-ex:hover { background: rgba(255, 255, 255, .1); }
.hi-ex:active { transform: scale(.95); }
.hi-ask { flex: none; display: grid; gap: 10px; margin: 0 12px 8px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 159, 10, .1); border: 1px solid rgba(255, 179, 64, .25); }
.hi-ask[hidden] { display: none; }
.hi-ask p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.hi-ask-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: 8px; }
.hi-ask-acts .hi-input { flex: 1 1 240px; }
/* publicar en la Pi: tabla de archivos dentro de la pregunta (las chapas son las de «Cambios») */
.hi-pub { display: grid; gap: 2px; max-height: 260px; overflow: auto; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.hi-pub-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.hi-pub-row.new .hi-chg-tag { background: rgba(48, 209, 88, .14); color: #5ce07f; }
.hi-pub-row.mod .hi-chg-tag { background: rgba(255, 159, 10, .15); color: #ffb340; }
.hi-pub-paths { flex: 1; min-width: 0; display: grid; }
.hi-pub-to, .hi-pub-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.hi-pub-to { font-size: 12.5px; }
.hi-pub-from { font-size: 11.5px; color: var(--muted); }
.hi-pub-size { flex: none; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.hi-ask .hi-pub-note { font-size: 13px; color: var(--muted); }
.hi-tray { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; }
.hi-tray[hidden] { display: none; }
.hi-fchip { display: inline-flex; align-items: center; gap: 4px; padding-right: 2px; }
.hi-fchip .cv-x { width: 22px; height: 22px; }
.hi-fchip .cv-x svg { width: 12px; height: 12px; }
.hi-comp { flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 8px max(12px, calc((100% - 884px) / 2)) calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .06); }
/* carpeta y modelo en píldoras pequeñas (como en Claude Code): en el PC, en la misma línea que el título; en el móvil, debajo */
@media (min-width: 761px) {
  .hi-conv-head .hi-who { display: flex; align-items: center; gap: 10px; overflow: hidden; padding: 3px; margin: -3px; }
  .hi-conv-head .hi-who b { flex: 0 3 auto; min-width: 3em; }
}
.hi-who-sub { flex: 0 1 auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.hi-folder { min-width: 0; max-width: 240px; height: 21px; display: inline-flex; align-items: center; gap: 5px; padding: 0 7px 0 8px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .055); color: var(--ink); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .15s, transform .15s; }
.hi-folder:hover { background: rgba(255, 255, 255, .1); }
.hi-folder:active { transform: scale(.96); }
.hi-folder:disabled { opacity: .5; cursor: default; transform: none; }
.hi-folder:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.hi-folder.none { color: #ff9f0a; background: rgba(255, 159, 10, .1); }
.hi-folder span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hi-folder svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hi-folder svg.dn { width: 11px; height: 11px; opacity: .6; }
.hi-folder[hidden] { display: none; }
.hi-model { flex: 0 1 auto; max-width: 200px; }
/* la ventana del modelo: nombre y para qué sirve */
.hi-mlist { gap: 6px; }
.hi-mitem { display: flex; align-items: center; gap: 8px; padding-right: 12px; border-radius: 16px; background: rgba(255, 255, 255, .04); transition: background .15s; }
.hi-mitem:not(.off):hover { background: rgba(255, 255, 255, .08); }
.hi-mitem.on { background: rgba(255, 255, 255, .12); }
.hi-mrow { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 2px; padding: 10px 12px; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer; }
.hi-mrow:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: -2px; border-radius: 16px; }
.hi-mitem.off .hi-mrow { opacity: .5; cursor: default; }
.hi-mname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hi-mname .p-pill { padding: 2px 8px; font-size: 11.5px; }
.hi-mhead { margin: 10px 12px 2px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.hi-minfo { flex: none; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: var(--ink); font: italic 600 14px/1 Georgia, serif; cursor: pointer; transition: background .15s, transform .15s; }
.hi-minfo:hover { background: rgba(255, 255, 255, .18); }
.hi-minfo:active { transform: scale(.9); }
.hi-minfo:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
/* cabecera de la ficha de un modelo: volver + nombre que despliega los demás */
.hi-mtop { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 0 14px -6px; }
.hi-mback { width: 36px; height: 36px; background: rgba(255, 255, 255, .07); color: var(--ink); }
.hi-mback svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hi-mswitch-btn { min-width: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border: 0; border-radius: 12px; background: none; color: var(--ink);
  font: inherit; font-size: 20px; font-weight: 600; letter-spacing: -.03em; cursor: pointer; transition: background .15s; }
.hi-mswitch-btn:hover, .hi-mswitch-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .07); }
.hi-mswitch-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hi-mswitch-btn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: transform .2s; }
.hi-mswitch-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.hi-mswitch { position: absolute; z-index: 20; top: calc(100% + 6px); left: 40px; width: min(300px, calc(100% - 40px)); max-height: 52dvh; overflow-y: auto; display: grid; gap: 2px;
  padding: 6px; border-radius: 18px; background: #161618; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  animation: p-pop .3s cubic-bezier(.25, 1.2, .4, 1); scrollbar-width: thin; }
.hi-mswitch[hidden] { display: none; }
.hi-mswitch-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 0; border-radius: 12px; background: none;
  color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.hi-mswitch-row:hover { background: rgba(255, 255, 255, .07); }
.hi-mswitch-row.on { background: rgba(255, 255, 255, .12); }
.hi-mswitch-row .p-pill { padding: 2px 8px; font-size: 11px; }
.hi-mstate { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: 13px; }
.hi-msec { margin: 14px 0 0; font-weight: 600; font-size: 14px; }
.hi-mstats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px 0 4px; }
.hi-mperiod { margin-top: 8px; gap: 6px; }
.hi-mperiod button { padding: 6px 11px; font-size: 12px; }
.hi-mrow b { font-weight: 600; }
.hi-mrow small { color: var(--muted); font-size: 12.5px; }
.hi-comp .cv-x { flex: none; width: 46px; height: 46px; }
.hi-input { flex: 1; min-width: 0; box-sizing: border-box; min-height: 46px; max-height: 180px; padding: 11px 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; outline: none; resize: none; overflow-y: auto;
  color: var(--ink); background: rgba(255, 255, 255, .055); font: inherit; font-size: 16px; line-height: 1.35; }
.hi-input:focus { border-color: rgba(255, 255, 255, .5); }
/* Enviar / Parar (Dani, 02/11/2026): dentro de la barra de escribir, a la derecha. Parar = anillo que gira con un cuadradito. */
.hi-comp { position: relative; }
.hi-comp .hi-input { padding-right: 54px; }
.hi-send { position: absolute; right: calc(max(12px, calc((100% - 884px) / 2)) + 6px); bottom: calc(10px + env(safe-area-inset-bottom) + 6px);
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--ink); color: #000;
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background .2s, color .2s; }
.hi-send:active { transform: scale(.9); }
.hi-send:disabled { opacity: .5; }
.hi-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hi-send .stop, .hi-send.stop .go { display: none; }
.hi-send.stop { background: none; color: var(--ink); }
.hi-send.stop .stop { display: block; width: 34px; height: 34px; stroke: none; fill: none; }
.hi-send .stop .track { fill: none; stroke: currentColor; stroke-width: 2; opacity: .18; }
.hi-send .stop .ring { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 20 43; transform-origin: 12px 12px; animation: hiSpin 1s linear infinite; }
.hi-send .stop rect { fill: currentColor; stroke: none; }

/* archivos */
.hi-tree { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
.hi-tree[hidden] { display: none; }
.hi-pad { padding: 10px 12px; display: grid; gap: 10px; justify-items: start; }
.hi-pad .p-note, p.hi-pad { margin: 0; }
.hi-row { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px calc(10px + var(--d, 0) * 16px); border: 0; border-radius: 10px; background: none; color: inherit;
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.hi-row:hover { background: rgba(255, 255, 255, .05); }
.hi-row.on { background: rgba(255, 255, 255, .1); }
.hi-row svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hi-row.dir.open svg { stroke: var(--ink); }
.hi-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hi-row small { flex: none; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.hi-row.ign { opacity: .5; }
.hi-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hi-editor[hidden] { display: none; }
.hi-ed-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.hi-ed-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.hi-ed-head .cv-x { width: 32px; height: 32px; }
.hi-ed-body { flex: 1; min-height: 0; overflow: auto; }
.hi-ed { display: flex; height: 100%; }
.hi-gut, .hi-ta { margin: 0; padding: 10px 8px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; }
.hi-gut { flex: none; min-width: 28px; overflow: hidden; text-align: right; color: rgba(255, 255, 255, .28); user-select: none; border-right: 1px solid rgba(255, 255, 255, .06); }
.hi-ta { flex: 1; min-width: 0; border: 0; outline: none; resize: none; background: none; color: var(--ink); white-space: pre; overflow: auto; tab-size: 4; }
.hi-img { display: block; max-width: calc(100% - 20px); margin: 10px auto; border-radius: 12px; }
.hi-files-acts { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .06); }
.hi-files-acts[hidden] { display: none; }

/* elegir carpeta de Cloud (chat nuevo) */
.hi-pick { display: grid; gap: 2px; max-height: 42dvh; overflow-y: auto; }
.hi-pick-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.hi-pick-row:hover { background: rgba(255, 255, 255, .05); }
.hi-pick-row.on { background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.hi-pick-row svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hi-pick-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 761px) {
  body.hi-noside .hi-side { display: none; }
  body.hi-noside .hi-app { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  #sideBtn, #newMini, #sideClose, .hi-grip { display: none !important; }
}
@media (min-width: 1100px) {
  .hi-app { grid-template-columns: var(--hi-sw, 280px) minmax(0, 1fr) var(--hi-pw, 400px); }
  .hi-files { display: flex; }
  body.hi-nopanel #panelBtn, #panelClose { display: grid; }
  body.hi-noside .hi-app { grid-template-columns: minmax(0, 1fr) var(--hi-pw, 400px); }
  body.hi-nopanel .hi-files { display: none; }
  body.hi-nopanel .hi-app { grid-template-columns: var(--hi-sw, 280px) minmax(0, 1fr); }
  body.hi-noside.hi-nopanel .hi-app { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1500px) {
  .hi-app { grid-template-columns: var(--hi-sw, 300px) minmax(0, 1fr) var(--hi-pw, 460px); }
  body.hi-noside .hi-app { grid-template-columns: minmax(0, 1fr) var(--hi-pw, 460px); }
  body.hi-nopanel .hi-app { grid-template-columns: var(--hi-sw, 300px) minmax(0, 1fr); }
}
/* tablet: archivos con su pestaña */
@media (max-width: 1099px) {
  .hi-grip.panel { display: none; }
  .hi-head { display: flex; padding: max(10px, env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .hi-home { display: none; }
  .hi-tabs { display: inline-flex; margin-left: auto; }
  .hi-tabs button[data-tab="chats"] { display: none; }
  body[data-tab="files"] .hi-conv { display: none; }
  body[data-tab="files"] .hi-files { display: flex; }
}
/* móvil: una columna con pestañas Chats / Chat / Archivos */
@media (max-width: 760px) {
  .hi-head { flex-wrap: wrap; padding-left: 12px; padding-right: 12px; }
  .hi-head .p-hello { flex: 1; min-width: 0; }
  .hi-tabs { flex: 1 0 100%; display: flex; margin: 0; }
  .hi-tabs button { flex: 1; }
  .hi-tabs button[data-tab="chats"] { display: block; }
  .hi-app { grid-template-columns: 1fr; }
  .hi-side, .hi-conv, .hi-files { display: none; border: 0; }
  body[data-tab="chats"] .hi-side, body[data-tab="chat"] .hi-conv, body[data-tab="files"] .hi-files { display: flex; }
  .hi-col-head { min-height: 50px; padding: 6px 10px 6px 14px; }
  .hi-folder { max-width: 55%; }
  .hi-model { max-width: 45%; }
  .hi-msgs { padding: 12px; }
  .hi-b { max-width: 90%; }
  #netBox span:first-child { display: none; }
  .hi-clean-box { font-size: 12px; gap: 6px; }
  .hi-conv-head #state { margin-right: 8px; }
}

/* ---------- App Studio (a063.es/studio/aula): Inicio, Curso y Gestión (static/studio_app.js) ---------- */
.sa { max-width: 860px; padding-top: 4vh; }
/* Barra de arriba de una app (_portal_top.html con top_title; Dani, 02/11/2026): «‹», logo y nombre a la izquierda,
   las pestañas en el centro y Halo y la cuenta a la derecha. Ocupa todo el ancho y, al bajar, se pone negra con una línea. */
.p-top.p-top-app { display: grid; grid-template-columns: 1fr auto 1fr; max-width: none; z-index: 12;
  padding-left: max(20px, calc((100% - 1080px) / 2)); padding-right: max(20px, calc((100% - 1080px) / 2));
  border-bottom: 1px solid transparent; transition: background .25s, border-color .25s; }
.p-top-app.stuck { background: rgba(0, 0, 0, .92); border-bottom-color: rgba(255, 255, 255, .07); }
.p-top-app .p-top-r { justify-self: end; }
.p-top-l { display: flex; align-items: center; gap: 2px; min-width: 0; justify-self: start; }
/* no caben en una fila (lo decide portal.js): las pestañas, en una 2.ª fila centrada */
.p-top.p-top-app.two { grid-template-columns: 1fr auto; row-gap: 10px; }
.p-top-app.two .p-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
.p-top-app.two ~ .sa :is(.sa-chat, .sa-threads, .sa-dm-chat > .ms-conv-empty) { height: calc(100dvh - 158px); }   /* la barra es más alta */
.p-top-back { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 999px; color: var(--muted);
  transition: background .2s, color .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.p-top-back:hover { background: rgba(255, 255, 255, .07); color: var(--ink); }
.p-top-back:active { transform: scale(.92); }
.p-top-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-top-title { margin-left: 4px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.p-top-app .p-tabs { margin: 0; }
.p-top-app .p-tabs button { padding: 8px 18px; font-size: 14px; }
/* cabecera de cada pantalla (Inicio, Curso, Gestión) */
.sa-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.sa-h1 { margin: 0; font-size: clamp(28px, 4vw, 36px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.sa-lead { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.sa-head > .p-btn, .sa-head > .p-pill { flex: none; margin-bottom: 4px; }
.sa-soon { font: 500 12px var(--mono); color: var(--muted); letter-spacing: .02em; }
/* pestañas: con icono (solo se ve en el móvil) y número de sin leer */
.sa-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.sa-tabs svg { display: none; width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sa-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  background: var(--ink); color: #000; font: 600 11px/1 var(--mono); }
.sa-badge[hidden] { display: none; }

/* ---------- App Studio: chats (Comunidad y Mensajes). Burbujas, caja de texto y archivos: las piezas .ms-* de Mensajes ---------- */
/* en los chats, sin cabecera grande: la ventana del chat, más ancha, ocupa todo el alto bajo la barra (Dani, 02/11/2026) */
body.sa-chatting .sa { max-width: 1080px; padding-top: 10px; padding-bottom: 20px; }
.sa .sa-chat { display: flex; }        /* en el móvil, Mensajes esconde .ms-conv (su chat va a pantalla completa): aquí no */
.sa-chat { height: calc(100dvh - 114px); min-height: 420px; box-sizing: border-box; overflow: hidden; border-radius: 28px;
  background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .08); }
.sa-chat-head { gap: 12px; }
.sa-chat-av { width: 40px; height: 40px; flex: none; font-size: 16px; }
.sa-chat-who { display: grid; min-width: 0; }
.sa-chat-who b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-chat-sub { font-size: 12.5px; color: var(--muted); }
.sa-chat-back { display: none; flex: none; }
.sa-msgs { padding: 14px 18px 10px; }
.sa-chat-empty { flex: 1; text-align: center; padding: 20px; }
.sa .ms-b { position: relative; }
.ms-b-who { display: inline-flex; align-items: center; gap: 6px; }
/* solo texto: la hora (y los ticks) al final de la última línea si cabe, como en WhatsApp. El ::after deja su hueco */
.sa .ms-b.txt { display: block; padding: 6px 10px 6px 11px; }
.sa .ms-b.txt .ms-b-who { display: flex; margin-bottom: 1px; }
.sa .ms-b.txt .ms-b-text::after { content: ""; display: inline-block; width: 44px; }
.sa .ms-b.out.txt .ms-b-text::after { width: 64px; }
.sa .ms-b.txt .ms-b-meta { position: absolute; right: 9px; bottom: 5px; }
/* ticks: reloj (enviando), 1 (enviado), 2 grises (le ha llegado), 2 azules (visto; el azul lo pidió Dani, como WhatsApp) */
.sa .ms-b-meta { opacity: 1; gap: 3px; }
.sa .ms-b-meta time { opacity: .6; }
.sa .ms-tick { opacity: .6; }
.sa .ms-tick svg { width: 17px; height: 17px; }
.sa .sa-tick-clock svg { width: 13px; height: 13px; margin: 0 2px; }
.sa .ms-tick.sa-tick-seen { opacity: 1; color: #0a84ff; }
.sa-tag { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .09); }
.sa .ms-media { max-height: 360px; }
.sa .ms-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.sa .ms-b.out .ms-file-ic { background: rgba(0, 0, 0, .08); }
/* borrar un mensaje: papelera al lado de la burbuja al pasar el ratón (en el móvil, mantener pulsado) */
.sa-bdel { position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; color: var(--muted); background: rgba(255, 255, 255, .06); opacity: 0; transition: opacity .2s, color .2s, background .2s; }
.ms-b.out .sa-bdel { left: -38px; }
.ms-b.in .sa-bdel { right: -38px; }
.ms-b:hover .sa-bdel, .sa-bdel:focus-visible { opacity: 1; }
.sa-bdel:hover { color: #ff6961; background: rgba(255, 69, 58, .14); }
.sa-bdel svg { width: 15px; height: 15px; }
@media (hover: none) { .sa-bdel { display: none; } }
/* caja de texto: clip · texto · micro (o enviar si hay texto); grabando, la franja roja con el tiempo */
.sa-comp { align-items: flex-end; }
.sa-comp .cv-x { width: 46px; height: 46px; }
.sa-comp .cv-x svg { width: 21px; height: 21px; }
.sa-rec { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; box-sizing: border-box; border-radius: 22px;
  background: rgba(255, 69, 58, .14); color: #ff6961; font-size: 14px; }
.sa-rec[hidden] { display: none; }
.sa-rec-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #ff453a; }
.sa-rec-time { font: 500 14px var(--mono); }
.sa-rec-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
/* «escribiendo…» (Dani, 02/11/2026, como WhatsApp): burbuja que sale con un saltito desde abajo a la izquierda, tres puntos
   que suben y bajan en ola, y se recoge al acabar. Es la única animación sin fin del chat: solo mientras alguien escribe */
.sa .sa-typing { padding: 12px 15px; transform-origin: 0 100%; animation: sa-typing-in .38s cubic-bezier(.3, 1.6, .5, 1); }
.sa .sa-typing .ms-b-who { margin-bottom: 6px; }
.sa .sa-typing.bye { animation: sa-typing-out .22s ease-in forwards; }
.sa-dots { display: flex; align-items: center; gap: 5px; height: 12px; }
.sa-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: .45; animation: sa-dot 1.25s ease-in-out infinite; }
.sa-dots i:nth-child(2) { animation-delay: .16s; }
.sa-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes sa-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: .95; } }
@keyframes sa-typing-in { from { transform: scale(.35); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sa-typing-out { to { transform: scale(.4); opacity: 0; } }
.sa-chat-sub.on { color: #5ce07f; }
/* ---------- Comunidad como Discord (Dani, 02/11/2026): canales · chat · gente del canal ----------
   Colores de los nombres por grupo (aprobados por Dani, solo aquí): admins y dueño blanco, profesores verde, Ultra amarillo, Pro azul clarito */
.sa:has(#pane-comunidad:not([hidden])) { max-width: 1320px; }
.sa-com { display: grid; grid-template-columns: 230px minmax(0, 1fr) 250px; gap: 14px; height: calc(100dvh - 114px); min-height: 420px; }
.sa-com > * { min-height: 0; }
.p-top-app.two ~ .sa .sa-com { height: calc(100dvh - 158px); }
.p-top-app ~ .sa .sa-com .sa-com-chat .sa-chat { height: 100%; min-height: 0; }
.sa-chans, .sa-people { box-sizing: border-box; height: 100%; overflow-y: auto; padding: 14px 10px; border-radius: 28px;
  background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .08); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.sa-side-title { display: block; margin: 0 10px 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sa-chans { display: flex; flex-direction: column; gap: 2px; }
.sa-chan { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 14px; color: var(--muted); text-decoration: none; font-weight: 500;
  transition: background .2s, color .2s; }
.sa-chan svg { width: 18px; height: 18px; flex: none; opacity: .7; }
.sa-chan-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-chan:hover { background: rgba(255, 255, 255, .04); color: var(--ink); }
.sa-chan.on { background: rgba(255, 255, 255, .09); color: var(--ink); }
.sa-chan.new { color: var(--ink); font-weight: 600; }
.sa-chat-ic { display: grid; place-items: center; border-radius: 13px; background: rgba(255, 255, 255, .07); }
.sa-chat-ic svg { width: 20px; height: 20px; }
.sa-chat-head .sa-chat-who { flex: 1; }
.sa-people-btn { display: none; flex: none; }
.sa-people-top { display: flex; align-items: center; justify-content: space-between; }
.sa-people-top .sa-side-title { margin-bottom: 4px; }
.sa-people-x { display: none; }
.sa-group { margin-top: 16px; }
.sa-person { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 14px; }
.sa-person:not(.on) { opacity: .45; }
.sa-person-av { position: relative; width: 32px; height: 32px; flex: none; font-size: 13px; }
.sa-dot { display: none; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #30d158; border: 2.5px solid #0c0c0d; }
.sa-person.on .sa-dot { display: block; }
.sa-person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14.5px; }
.sa-g-admin { color: #f5f5f7; }
.sa-g-teacher { color: #5ce07f; }
.sa-g-ultra { color: #ffd60a; }
.sa-g-pro { color: #7cc4ff; }
.sa .ms-b-who.sa-g-admin { color: #f5f5f7; }
.sa .ms-b-who.sa-g-teacher { color: #5ce07f; }
.sa .ms-b-who.sa-g-ultra { color: #ffd60a; }
.sa .ms-b-who.sa-g-pro { color: #7cc4ff; }
.sa-people-veil { display: none; }
/* la animación de entrada de las pestañas dejaba un transform puesto y el panel de la gente (fixed) quedaba metido en la
   pestaña en vez de en toda la pantalla: con «backwards» no se queda nada al acabar (se ve igual) */
.sa .p-pane { animation-fill-mode: backwards; }
@media (max-width: 1100px) {
  .sa-com { grid-template-columns: 210px minmax(0, 1fr); }
  .sa-people-btn { display: grid; }
  /* la gente sale como un panel desde la derecha al tocar su botón de la cabecera del chat */
  .sa-people { display: none; position: fixed; top: 0; right: 0; bottom: 0; z-index: 46; width: min(300px, 86vw); height: auto;
    padding-top: calc(16px + env(safe-area-inset-top, 0px)); border-radius: 26px 0 0 26px; background: #111113; box-shadow: -20px 0 60px rgba(0, 0, 0, .5); }
  .sa-people.open { display: block; animation: sa-slide .35s cubic-bezier(.25, 1.2, .4, 1); }
  .sa-people-x { display: grid; width: 34px; height: 34px; }
  .sa-people-veil.open { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .5); }
}
@keyframes sa-slide { from { transform: translateX(40px); opacity: 0; } }
@media (max-width: 760px) {
  /* canales como píldoras en una fila que se desliza, encima del chat */
  .sa-com { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
  .sa-chans { flex-direction: row; height: auto; overflow-x: auto; overflow-y: hidden; padding: 5px; border-radius: 999px; scrollbar-width: none; }
  .sa-chans::-webkit-scrollbar { display: none; }
  .sa-chans .sa-side-title { display: none; }
  .sa-chan { flex: none; padding: 8px 14px; border-radius: 999px; }
  .sa-chan svg { width: 15px; height: 15px; }
}
/* emojis: panel opaco sobre la caja de texto (sin blur: está dentro del chat) */
.sa-emoji { position: absolute; left: 12px; bottom: 72px; z-index: 6; width: min(360px, calc(100% - 24px)); max-height: min(340px, 55%); overflow-y: auto;
  box-sizing: border-box; padding: 10px 10px 4px; border-radius: 22px; background: #161618; border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5); animation: p-pop .3s cubic-bezier(.25, 1.2, .4, 1); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.sa-emoji-name { display: block; margin: 2px 4px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sa-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); margin-bottom: 8px; }
.sa-emoji-grid button { height: 38px; border: 0; border-radius: 10px; background: none; cursor: pointer; font-size: 22px; line-height: 1;
  transition: background .15s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.sa-emoji-grid button:hover { background: rgba(255, 255, 255, .08); }
.sa-emoji-grid button:active { transform: scale(.85); }
.sa-emo-btn[aria-expanded="true"] { color: var(--ink); background: rgba(255, 255, 255, .08); }
/* Mensajes del dueño y los admins: lista de alumnos y el chat elegido */
.sa-dm { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; }
.sa-threads { height: calc(100dvh - 114px); min-height: 420px; box-sizing: border-box; overflow-y: auto; padding: 8px; border-radius: 28px;
  background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .08); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.sa-thread { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border-radius: 18px;
  color: inherit; text-decoration: none; transition: background .2s; }
.sa-thread:hover { background: rgba(255, 255, 255, .04); }
.sa-thread.on { background: rgba(255, 255, 255, .08); }
.sa-thread-txt { display: grid; gap: 2px; min-width: 0; }
.sa-thread-txt b { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 500; font-size: 14.5px; }
.sa-thread-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-thread-tier { flex: none; font: 500 11px var(--mono); color: var(--muted); }
.sa-thread-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.sa-thread.new .sa-thread-last { color: var(--ink); }
.sa-thread-side { display: grid; justify-items: end; gap: 5px; }
.sa-thread-side time { font: 500 11.5px var(--mono); color: var(--muted); }
.sa-threads-empty { padding: 14px; }
.sa-dm-chat > .ms-conv-empty { height: calc(100dvh - 114px); min-height: 420px; box-sizing: border-box; border-radius: 28px; background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .08); }
/* foto en grande */
.sa-lightbox { max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; padding: 20px; box-sizing: border-box; border: 0; background: rgba(0, 0, 0, .92); }
.sa-lightbox[open] { display: grid; place-items: center; }
.sa-lightbox::backdrop { background: transparent; }
.sa-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; cursor: zoom-out; }
.sa-lb-x { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; color: #fff; background: rgba(255, 255, 255, .1); }
.sa-lb-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .sa-dm { grid-template-columns: minmax(0, 1fr); }      /* minmax: si no, la caja de texto ensanchaba el chat más que la pantalla */
  .sa-dm.open .sa-threads, .sa-dm:not(.open) .sa-dm-chat { display: none; }
  .sa-chat-back { display: grid; }
}
.sa svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sa .p-btn svg { width: 18px; height: 18px; }
.sa .p-card h3 { margin: 0; }
.sa-big { display: block; margin-top: 8px; font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.sa-sub { color: var(--muted); font-size: 14px; }
.sa-prog-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sa-chead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sa-empty { justify-items: center; text-align: center; padding: 40px 20px; gap: 6px; }
.sa-empty b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.sa-empty span:last-child { color: var(--muted); font-size: 14px; }
.sa-empty-ic { width: 54px; height: 54px; margin-bottom: 8px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); box-shadow: var(--lq); }
.sa-empty-ic svg { width: 26px; height: 26px; }
/* módulos y lecciones */
.sa-module { gap: 10px; }
.sa-mhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sa-mhead h2, .sa-lhead h2 { margin: 2px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.sa-mnum { font: 500 12px var(--mono); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.sa-lessons { display: grid; }
.sa-lesson { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 13px 6px; border-top: 1px solid rgba(255, 255, 255, .06);
  color: var(--ink); text-decoration: none; border-radius: 14px; transition: background .2s; }
.sa-lesson:hover { background: rgba(255, 255, 255, .035); }
.sa-num { font: 500 13px var(--mono); color: var(--muted); }
.sa-ltitle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sa-ltitle b { font-weight: 500; }
.sa-tick { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .14); }
.sa-lesson.done .sa-tick { border-color: transparent; background: rgba(48, 209, 88, .14); color: #5ce07f; }
.sa-tick svg { width: 15px; height: 15px; }
.sa-add { justify-self: start; }
/* una lección */
.sa-back { margin-bottom: 0; }
.sa-lhead { display: grid; gap: 4px; justify-items: start; }
.sa-video { width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; background: #000; border: 1px solid rgba(255, 255, 255, .08); display: block; }
.sa-novideo { display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.sa-novideo svg { width: 34px; height: 34px; }
.sa-body { white-space: pre-wrap; line-height: 1.6; font-size: 15px; color: #d8d8dc; }
.sa-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.sa-nav > :first-child { justify-self: start; }
.sa-nav > :last-child { justify-self: end; }
.sa-next svg { margin: 0 -4px 0 2px; }
/* editar la lección */
.sa-editor { gap: 16px; }
.sa-text { height: auto; min-height: 120px; padding: 14px 18px; resize: vertical; font: inherit; line-height: 1.5; }
.sa-erow { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px; }
.sa-pub { display: flex; align-items: center; gap: 14px; height: 48px; }
.sa-pub div { display: grid; }
.sa-pub b { font-weight: 500; font-size: 14px; }
.sa-pub span { color: var(--muted); font-size: 12.5px; }
.sa-vbox { display: grid; gap: 10px; }
.sa-vrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sa-vrow .p-note { margin: 0; flex: 1; font-family: var(--mono); font-size: 12.5px; }
.sa-eacts { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* gestión */
.sa-student.off { opacity: .55; }
.sa .p-list .p-item { padding: 10px 4px; }
.sa-date { font: 500 12.5px var(--mono); color: var(--muted); min-width: 92px; }
.sa-amount { font: 500 14px var(--mono); }
/* Enlaces (a063.es/studio/<código>): las cifras de cada enlace en una línea Mono debajo de la nota */
.sa-link .p-item-txt b, .sa-link .p-item-txt span { white-space: normal; overflow: visible; text-overflow: clip; }   /* sin «…»: el enlace entero */
.sa-link .p-item-txt b { font: 500 14px var(--mono); overflow-wrap: anywhere; }
.sa-link .p-item-txt .sa-link-facts { font: 500 12px var(--mono); color: var(--muted); }
.sa-link-preview { display: block; margin: -4px 0 12px; font: 500 12.5px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 640px) {             /* la barra en dos filas: arriba logo y cuenta, debajo las pestañas */
  .p-top.p-top-app { grid-template-columns: 1fr auto; row-gap: 10px; }
  .p-top-app .p-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
@media (max-width: 520px) {
  .sa { padding-top: 2vh; }
  /* pestañas con icono; solo la elegida lleva el nombre. El número de sin leer, en la esquina del icono */
  .sa-tabs svg { display: block; }
  .p-top-app .sa-tabs button { position: relative; padding: 10px 13px; }
  /* en el móvil las pestañas van abajo, fijas, como el dock de una app (Dani, 02/11/2026). Cristal con desenfoque (flota) */
  .p-top-app .sa-tabs { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 30; margin: 0;
    transform: translateX(-50%); padding: 5px; background: rgba(28, 28, 30, .72); box-shadow: var(--float);
    -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); }
  body.sa-kb .p-top-app .sa-tabs { display: none; }        /* escribiendo en un chat: fuera, que no tape la caja */
  .sa { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .sa ~ .p-toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .sa-tabs button:not(.on) .sa-tl { display: none; }
  .sa-tabs .sa-tl { white-space: nowrap; }              /* «Road Map» en una línea (02/11/2026) */
  .sa-tabs.sa-many .sa-tl { display: none; }            /* 7 pestañas (equipo): solo iconos, si no el dock no cabe */
  .sa-tabs button:not(.on) .sa-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  body.sa-chatting .sa { padding-top: 6px; padding-bottom: 0; }
  /* el chat acaba justo encima de las pestañas de abajo (barra de arriba ~70 px + pestañas ~82 px) */
  .sa-chat, .sa-threads, .sa-dm-chat > .ms-conv-empty { height: calc(100dvh - 166px - env(safe-area-inset-bottom, 0px)); min-height: 300px; border-radius: 24px; }
  body.sa-kb .sa-chat { height: calc(100dvh - 84px); }
  /* la lista de alumnos (dueño y admins) baja hasta el borde: las pestañas flotan encima (Dani, 02/11/2026) */
  .sa-threads { height: calc(100dvh - 77px); padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  /* dentro del chat de un alumno, sin pestañas: se vuelve con «‹» */
  body.sa-inchat .p-top-app .sa-tabs { display: none; }
  body.sa-inchat .sa-dm-chat .sa-chat { height: calc(100dvh - 84px); }
  /* dentro del chat de un alumno, pantalla completa como WhatsApp: sin la barra de arriba (Dani) */
  body.sa-inchat .p-top-app { display: none; }
  body.sa-inchat .sa { padding: 0; }
  body.sa-inchat .sa-dm-chat .sa-chat { height: 100dvh; border: 0; border-radius: 0; }
  body.sa-inchat .sa-chat-head { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  /* Comunidad: canales + chat, encima de las pestañas de abajo */
  .sa-com { height: calc(100dvh - 166px - env(safe-area-inset-bottom, 0px)); min-height: 340px; }
  body.sa-kb .sa-com { height: calc(100dvh - 84px); }
  .sa-msgs { padding: 12px 10px 8px; }
  .sa .ms-b { max-width: 84%; }
  .sa-comp { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 4px; }
  .sa-comp .cv-x { width: 40px; }
  .sa-comp .ms-input { padding-left: 14px; padding-right: 12px; }
  .sa-rec-txt { display: none; }
  .sa-head { flex-wrap: wrap; align-items: flex-start; }
  .sa-big { font-size: 20px; }
  .sa-prog-top .p-btn { width: 100%; }
  .sa-mhead { flex-direction: column; }
  .sa-video { border-radius: 16px; }
  .sa-erow { grid-template-columns: 1fr; }
  .sa-nav { grid-template-columns: 1fr 1fr; }
  .sa-nav > :nth-child(2) { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .sa-date { min-width: 0; }
  .sa-sales .p-item { grid-template-columns: 1fr auto; }
  .sa-sales .sa-date { display: none; }
  .sa .p-list .p-item:has(.p-avatar) { grid-template-columns: auto 1fr; }
  .sa .p-list .p-item:has(.p-avatar) .p-row-acts { grid-column: 2; }
}

/* ---------- Studio: Road Map (30 días, una misión al día; 02/11/2026) ----------
   Calendario en una tarjeta opaca (6 casillas por fila) y la misión elegida al lado. Hecha = verde con check, hoy = aro
   blanco, atrasada = punto naranja, aún no = apagada. Elegida = borde blanco */
.sa-rm { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sa-cal-card .p-bar { margin: 0 0 16px; }
.sa-cal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sa-day { position: relative; display: grid; align-content: center; justify-items: center; gap: 2px; aspect-ratio: 1; min-width: 0; padding: 4px; border: 0; border-radius: 16px;
  cursor: pointer; color: var(--ink); background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: background .2s, box-shadow .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.sa-day:hover { background: rgba(255, 255, 255, .08); }
.sa-day:active { transform: scale(.94); }
.sa-day b { font: 600 18px/1 var(--mono); letter-spacing: -.02em; }
.sa-day span { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sa-day svg { position: absolute; top: 6px; right: 6px; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sa-day.done { background: rgba(48, 209, 88, .14); color: #5ce07f; box-shadow: none; }
.sa-day.done span { color: rgba(92, 224, 127, .7); }
.sa-day.today { box-shadow: inset 0 0 0 2px var(--ink); }
.sa-day.late::after { content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 999px; background: #ffb340; }
.sa-day.locked { opacity: .38; }
.sa-day.on { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 4px rgba(255, 255, 255, .08); }
.sa-day.done.on { box-shadow: inset 0 0 0 2px #5ce07f, 0 0 0 4px rgba(48, 209, 88, .12); }
.sa-cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.sa-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sa-lg { width: 10px; height: 10px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.sa-lg.done { background: #5ce07f; }
.sa-lg.today { background: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.sa-lg.late { border-radius: 999px; background: #ffb340; }
.sa-lg.locked { opacity: .45; }
.sa-ms { position: sticky; top: 90px; animation: p-pop .4s cubic-bezier(.25, 1.2, .4, 1); }
.sa-ms-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sa-ms-day { font: 500 12.5px var(--mono); color: var(--muted); }
.sa-ms h2 { margin: 12px 0 8px; font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.sa-ms.locked h2 { color: var(--muted); }
.sa-ms p { margin: 0; color: #c7c7cc; font-size: 15px; line-height: 1.55; white-space: pre-line; }
.sa-ms.locked p { color: var(--muted); }
.sa-ms-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.sa-ms-acts:empty { display: none; }
.sa-ms-ok { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 14px; }
.sa-ms-ok svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Recompensa del Road Map: el regalo (cerrado hasta las 30 misiones; abierto en verde al ganarla) y el código en Mono */
.sa-reward-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-bottom: 16px; padding: 16px 20px; }
.sa-reward-card.won { box-shadow: inset 0 0 0 1px rgba(48, 209, 88, .35); }
.sa-reward-txt { display: grid; gap: 3px; min-width: 0; }
.sa-reward-txt b { font-size: 15px; }
.sa-reward-txt span { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.sa-gift { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 15px; background: rgba(255, 255, 255, .07); }
.sa-gift svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sa-gift.open { color: #5ce07f; background: rgba(48, 209, 88, .14); }
.sa-reward { display: grid; justify-items: center; gap: 10px; text-align: center; }
.sa-reward .sa-gift { width: 72px; height: 72px; border-radius: 24px; animation: p-pop .6s cubic-bezier(.3, 1.6, .5, 1); }
.sa-reward .sa-gift svg { width: 36px; height: 36px; }
.sa-reward p { margin: 0; }
.sa-reward-what { font-size: 16px; line-height: 1.35; }
.sa-code { margin: 4px 0; padding: 12px 20px; border: 1px dashed rgba(92, 224, 127, .55); border-radius: 16px; cursor: pointer;
  font: 600 22px var(--mono); letter-spacing: .08em; color: #5ce07f; background: rgba(48, 209, 88, .08); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.sa-code:active { transform: scale(.96); }
.sa-code.small { justify-self: start; margin: 4px 0 0; padding: 6px 12px; font-size: 14px; border-radius: 12px; }
@media (max-width: 520px) {
  .sa-reward-card { grid-template-columns: auto 1fr; padding: 14px 16px; }
  .sa-reward-card > .p-btn, .sa-reward-card > .p-pill { grid-column: 2; justify-self: start; }
  .sa-code { font-size: 19px; }
}
/* empezar (pestaña) y la tarjeta de Inicio */
.sa-rm-start { max-width: 560px; padding: 30px; }
.sa-rm-start h2 { margin: 14px 0 6px; font-size: 28px; font-weight: 600; letter-spacing: -.035em; }
.sa-rm-lead { margin: 0 0 20px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.sa-rm-start .sa-howto { margin-bottom: 24px; }
.sa-rm-start > .p-btn { justify-self: start; }
.sa-rm-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; background: rgba(255, 255, 255, .07); }
.sa-rm-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sa-rm-ic.small { width: 44px; height: 44px; border-radius: 15px; }
.sa-rm-ic.small svg { width: 22px; height: 22px; }
.sa-rm-today { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.sa-rm-today-txt { display: grid; gap: 4px; min-width: 0; }
.sa-rm-today-txt h3 { margin: 0; }
@media (max-width: 900px) {
  .sa-rm { grid-template-columns: 1fr; }
  .sa-ms { position: static; }
}
@media (max-width: 520px) {
  .sa-cal { gap: 6px; }
  .sa-day { border-radius: 13px; }
  .sa-day b { font-size: 15px; }
  .sa-day span { display: none; }
  .sa-day svg { top: 4px; right: 4px; width: 11px; height: 11px; }
  .sa-ms h2 { font-size: 21px; }
  .sa-rm-start { padding: 22px 20px; }
  .sa-rm-today { grid-template-columns: auto 1fr; }
  .sa-rm-today > .p-btn { grid-column: 1 / -1; }
}

/* ---------- Studio: «Completa tu perfil» (Inicio, solo alumnos; 02/11/2026) ----------
   Lista de tareas con un círculo que se vuelve check verde; la del enlace (dinero) con una franja verde suave a la izquierda */
.sa-checklist .p-bar { margin: 12px 0 6px; }
.sa-check-n { font: 500 13px var(--mono); color: var(--muted); }
.sa-check { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .22); align-self: start; margin-top: 2px; }
.sa-check.done { border-color: transparent; background: rgba(48, 209, 88, .16); color: #5ce07f; animation: p-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.sa-check svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sa-task { padding: 12px 4px; }
.sa-task .p-item-txt b { white-space: normal; }
.sa-task .p-item-txt span { line-height: 1.45; }
.sa-task.done .p-item-txt b { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .25); }
.sa-task-money:not(.done) { margin: 6px -8px 0; padding: 14px 12px; border-top: 0; border-radius: 18px; background: rgba(48, 209, 88, .06); box-shadow: inset 2px 0 0 #30d158; }
.sa-task-money:not(.done) .p-item-txt b { color: var(--ink); }
/* la ventana «Gana dinero con tu enlace»: pasos numerados y lo que se gana con cada plan */
.sa-linkhelp { display: grid; gap: 14px; }
.sa-howto { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sa-howto li { display: flex; gap: 12px; align-items: flex-start; }
.sa-howto-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; font: 600 13px var(--mono); background: rgba(255, 255, 255, .08); }
.sa-howto b { display: block; font-size: 14.5px; }
.sa-howto li span:not(.sa-howto-n) { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.sa-earn { border-radius: 18px; background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
.sa-earn > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 13.5px; }
.sa-earn-h { color: var(--muted); font-size: 12px !important; text-transform: uppercase; letter-spacing: .06em; }
.sa-earn-r { border-top: 1px solid rgba(255, 255, 255, .06); }
.sa-earn-r b { font: 600 14px var(--mono); color: #5ce07f; white-space: nowrap; }
@media (max-width: 520px) {
  .sa .p-list .sa-task { grid-template-columns: auto 1fr; }
  .sa .p-list .sa-task > :nth-child(3) { grid-column: 2; justify-self: start; }      /* el botón, debajo del texto */
  .sa-task .p-row-acts { justify-content: flex-start; flex-wrap: wrap; }
}

/* ---------- Guía de una app (static/tour.js; Studio, 02/11/2026) ----------
   Igual que la de Cloud (cloud/public/noir.css, «Guía de Cloud»): bienvenida .p-tour-hello, hueco .p-tour-hole que viaja
   con muelle (su sombra oscurece lo demás), tarjeta .p-tour-tip, botón de pendiente .p-tour-btn en la barra. */
.p-tour { position: fixed; inset: 0; z-index: 90; animation: p-tour-in .3s ease both; }
.p-tour.out { animation: p-tour-out .26s ease both; pointer-events: none; }
@keyframes p-tour-in { from { opacity: 0; } }
@keyframes p-tour-out { to { opacity: 0; } }
.p-tour-welcome { display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.p-tour-hello { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px 26px 22px; border-radius: 30px; text-align: center; color: var(--ink);
  background: rgba(24, 24, 26, .7); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 .5px rgba(255, 255, 255, .14), 0 40px 100px rgba(0, 0, 0, .7);
  animation: p-tour-pop .55s cubic-bezier(.25, 1.2, .4, 1) both; }
@keyframes p-tour-pop { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.p-tour-hello h2 { margin: 6px 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -.035em; }
.p-tour-lead { margin: 0 auto 18px; max-width: 360px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.p-tour-knot { width: 92px; height: 92px; margin: -6px auto 0; display: block; object-fit: contain; }
.p-tour-points { display: grid; gap: 4px; margin: 0 0 20px; text-align: left; }
.p-tour-point { display: flex; gap: 14px; align-items: flex-start; padding: 10px 6px; border-top: 1px solid rgba(255, 255, 255, .06);
  animation: p-tour-rise .5s cubic-bezier(.25, 1.2, .4, 1) var(--d, 0ms) both; }
.p-tour-point:first-child { border-top: 0; }
@keyframes p-tour-rise { from { opacity: 0; transform: translateY(10px); } }
.p-tour-point b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.p-tour-point span:not(.p-tour-ic) { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.p-tour-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: rgba(255, 255, 255, .06); }
.p-tour-ic svg, .p-tour-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-tour-acts { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.p-tour-hello .p-tour-acts { justify-content: center; }
.p-tour-hello .p-tour-acts .p-btn { min-width: 132px; }
.p-tour-check { display: grid; place-items: center; width: 64px; height: 64px; margin: 4px auto 6px; border-radius: 999px; color: #5ce07f; background: rgba(48, 209, 88, .14);
  animation: p-tour-pop .6s cubic-bezier(.3, 1.6, .5, 1) .1s both; }
.p-tour-check svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-tour-hole { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 22px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .68), inset 0 0 0 1.5px rgba(255, 255, 255, .55), 0 0 0 6px rgba(255, 255, 255, .06);
  transition: transform .55s cubic-bezier(.3, 1.25, .45, 1), width .55s cubic-bezier(.3, 1.25, .45, 1), height .55s cubic-bezier(.3, 1.25, .45, 1), border-radius .55s; }
.p-tour-tip { position: absolute; left: 0; top: 0; transition: transform .55s cubic-bezier(.3, 1.25, .45, 1); }
.p-tour-tip-body { padding: 16px 16px 14px 18px; border-radius: 26px; color: var(--ink);
  background: rgba(24, 24, 26, .92); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 .5px rgba(255, 255, 255, .14), 0 30px 80px rgba(0, 0, 0, .6);
  animation: p-tour-step .4s cubic-bezier(.25, 1.2, .4, 1) both; }
@keyframes p-tour-step { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.p-tour-tip-head { display: flex; align-items: center; gap: 12px; }
.p-tour-tip-head b { flex: 1; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.p-tour-tip-head .p-tour-ic { width: 34px; height: 34px; border-radius: 12px; }
.p-tour-tip-body p { margin: 10px 0 14px; color: #c7c7cc; font-size: 14px; line-height: 1.5; }
.p-tour-dots { display: flex; gap: 5px; margin-right: auto; }
.p-tour-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .18); transition: width .35s cubic-bezier(.3, 1.4, .5, 1), background .25s; }
.p-tour-dots i.seen { background: rgba(255, 255, 255, .45); }
.p-tour-dots i.on { width: 18px; background: var(--ink); }
/* botón de pendiente en la barra: redondo de cristal, con un punto naranja (aviso) */
.p-tour-btn { position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: none; padding: 0; border: 0; border-radius: 999px; cursor: pointer; color: var(--ink);
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 .5px rgba(255, 255, 255, .14);
  transition: background .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); animation: p-tour-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.p-tour-btn[hidden] { display: none; }
.p-tour-btn:hover { background: rgba(255, 255, 255, .12); }
.p-tour-btn:active { transform: scale(.95); }
/* avisos del dueño (campana, _portal_top.html): número en rojo y lista en el menú de cristal */
.p-notes-n { position: absolute; top: -3px; right: -4px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  font: 600 10.5px var(--mono); font-style: normal; color: #fff; background: #ff453a; box-shadow: 0 0 0 2px #000; }
.p-notes-n[hidden] { display: none; }
.p-notes-menu { width: min(380px, calc(100vw - 32px)); }
.p-notes-list { max-height: min(60vh, 460px); overflow-y: auto; display: grid; gap: 2px; }
.p-notes-item { display: grid; gap: 3px; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; }
.p-notes-item span { white-space: pre-line; overflow-wrap: anywhere; }
.p-notes-item small { color: var(--muted); font-size: 12px; }
.p-notes-item.new { background: rgba(255, 255, 255, .06); }
.p-notes-empty { margin: 0; padding: 14px 12px; color: var(--muted); font-size: 13.5px; }
@media (max-width: 520px) { .p-notes-menu { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; } }
.p-tour-pend { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 999px; background: #ffb340; box-shadow: 0 0 0 2px #000; }
.p-menu-item[hidden] { display: none; }
@media (max-width: 520px) {
  .p-tour-hello { padding: 22px 18px 18px; border-radius: 28px; }
  .p-tour-hello h2 { font-size: 23px; }
  .p-tour-hello .p-tour-acts .p-btn { min-width: 0; flex: 1; }
  .p-tour-tip-body { border-radius: 24px; }
  .p-tour-tip-body p { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .p-tour-hole, .p-tour-tip { transition: none; } }

/* ---------- Web pública (a063.es sin cuenta: portal_landing.html + static/landing.js) ----------
   Usa las piezas de la web de Studio (.sd-*: barra con menú, título con brillo, cifras, secciones, pasos, preguntas, pie) y
   estas propias. Las muestras de cada app se mueven solo cuando la app pasa por el centro (.on/.seen, landing.js). */
.lp-top { max-width: none; padding-left: max(20px, calc((100% - 1140px) / 2)); padding-right: max(20px, calc((100% - 1140px) / 2));
  border-bottom: 1px solid transparent; transition: background .25s, border-color .25s; }
.lp-top.stuck { background: rgba(0, 0, 0, .92); border-bottom-color: rgba(255, 255, 255, .07); }
.lp-top-r { display: flex; align-items: center; gap: 8px; }

/* portada: las tarjetas de cristal de la portada de dentro, entrando una a una */
.lp-hero { gap: 64px; }
.lp-board { width: 100%; max-width: 980px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; }
.lp-tile { position: relative; isolation: isolate; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: 18px; border-radius: 26px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .025) 40%, rgba(255, 255, 255, .012) 60%, rgba(255, 255, 255, .05) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(255, 255, 255, .08), inset 0 0 0 .5px rgba(255, 255, 255, .16),
    inset 0 0 28px rgba(255, 255, 255, .035), 0 22px 56px rgba(0, 0, 0, .5);
  animation: p-pop .7s cubic-bezier(.25, 1.2, .4, 1) backwards; transition: transform .45s cubic-bezier(.25, 1.2, .4, 1); }
.lp-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(220px circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 45%, transparent 70%); }
.lp-tile:hover { transform: translateY(-4px); }
.lp-tile:hover::after { opacity: 1; }
.lp-tile:nth-child(2) { animation-delay: .32s; } .lp-tile:nth-child(3) { animation-delay: .38s; } .lp-tile:nth-child(4) { animation-delay: .44s; }
.lp-tile:nth-child(5) { animation-delay: .5s; } .lp-tile:nth-child(6) { animation-delay: .56s; } .lp-tile:nth-child(7) { animation-delay: .62s; }
.lp-tile:nth-child(8) { animation-delay: .68s; } .lp-tile:nth-child(9) { animation-delay: .74s; } .lp-tile:nth-child(1) { animation-delay: .26s; }
.lp-tile-ic, .lp-halo-orb { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.lp-tile-ic svg, .lp-feat-ic svg, .lp-dm-ic svg, .lp-ix-ic svg, .lp-file-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lp-tile b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.lp-tile > span:last-child { color: var(--muted); font-size: 13.5px; line-height: 1.3; }
/* la bola de Halo (la imagen de siempre, nunca dibujada con CSS) */
.lp-halo-orb, .lp-feat .lp-feat-orb { background: url(brand/halo.png?v=2) center / 76% no-repeat, rgba(255, 255, 255, .07);
  background-image: image-set(url(brand/halo.avif?v=2) type("image/avif"), url(brand/halo.png?v=2) type("image/png")); background-size: 76%; }

/* las 4 apps grandes: texto y muestra, una sí y otra no al revés */
.lp-feats { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.lp-feat { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px 72px; padding: 72px 0; border-top: 1px solid rgba(255, 255, 255, .08); scroll-margin-top: 70px; }
.lp-feat.lp-rev .lp-feat-txt { order: 2; }
.lp-feat-txt { display: grid; justify-items: start; }
.lp-feat-n { font: 500 13px var(--mono); color: var(--muted); letter-spacing: .06em; }
.lp-feat h3 { display: flex; align-items: center; gap: 14px; margin: 14px 0 14px; font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.lp-feat-ic { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px; background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 .5px rgba(255, 255, 255, .14); }
.lp-feat-ic svg { width: 26px; height: 26px; }
.lp-feat-lead { max-width: 460px; margin: 0 0 22px; color: var(--muted); font-size: 17px; line-height: 1.5; }
.lp-feat-list { display: grid; gap: 11px; margin: 0 0 26px; padding: 0; list-style: none; }
.lp-feat-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.4; }
.lp-feat-list svg, .lp-ok svg { width: 17px; height: 17px; flex: none; margin-top: 1px; fill: none; stroke: #30d158; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; margin: 0; color: var(--muted); font-size: 14px; }
.lp-price b { color: var(--ink); font-size: 28px; font-weight: 600; letter-spacing: -.04em; }
.lp-more { margin-top: 22px; }

/* la muestra de cada app: una superficie opaca como la app de verdad; lo de dentro entra al verla (.seen) */
.lp-demo { display: grid; gap: 0; padding: 22px 24px; border-radius: 28px; background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 40px 110px rgba(0, 0, 0, .6); transform: perspective(1200px) rotateY(var(--ry, -4deg)) scale(.97); opacity: .55;
  transition: transform 1.1s cubic-bezier(.25, 1.1, .4, 1), opacity .8s; }
.lp-rev .lp-demo { --ry: 4deg; }
.lp-feat.on .lp-demo { transform: none; opacity: 1; }
.lp-dm-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.lp-dm-head b { flex: 1; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.lp-dm-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.lp-dm-ic svg { width: 19px; height: 19px; }
.lp-dm-row { display: grid; grid-template-columns: 1fr auto 22px; align-items: center; gap: 12px; margin: 0; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .06);
  opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.lp-dm-row b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-dm-row > span { font: 500 12.5px var(--mono); color: var(--muted); white-space: nowrap; }
.lp-feat.seen .lp-dm-row { opacity: 1; transform: none; }
.lp-dm-row:nth-of-type(2) { transition-delay: .1s; } .lp-dm-row:nth-of-type(3) { transition-delay: .2s; } .lp-dm-row:nth-of-type(4) { transition-delay: .3s; }
.lp-dm-row:nth-of-type(5) { transition-delay: .4s; }
.lp-ok { display: grid; place-items: center; }
.lp-ok svg { margin: 0; width: 19px; height: 19px; stroke-width: 2.2; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .6s .5s ease; }
.lp-feat.seen .lp-ok svg { stroke-dashoffset: 0; }
.lp-wait { width: 16px; height: 16px; justify-self: center; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .16); border-top-color: var(--ink); }
.lp-feat.on .lp-wait { animation: lp-spin 1s linear infinite; }      /* solo mientras se ve */
@keyframes lp-spin { to { transform: rotate(360deg); } }
.lp-file { grid-template-columns: 36px 1fr auto; }
.lp-file-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, .05); color: var(--muted); }
.lp-file-ic svg { width: 19px; height: 19px; }
.lp-mod { grid-template-columns: 36px 1fr auto; }
.lp-mod-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, .05); font: 500 12.5px var(--mono); color: var(--muted); }
.lp-dm-row > .lp-mod-p { color: #ffb340; }
/* barra de abajo: se llena al verla */
.lp-dm-bar { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding-top: 16px; font-size: 13px; color: var(--muted); }
.lp-dm-bar > b { font: 500 12.5px var(--mono); color: var(--ink); }
.lp-dm-bar i { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.lp-dm-bar i b { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: left; transform: scaleX(0);
  transition: transform 1.4s .4s cubic-bezier(.25, 1, .4, 1); }
.lp-dm-tr .lp-dm-bar i b { --w: .75; } .lp-dm-cloud .lp-dm-bar i b { --w: .4; } .lp-dm-studio .lp-dm-bar i b { --w: .22; }
.lp-feat.seen .lp-dm-bar i b { transform: scaleX(var(--w)); }
/* Halo: un chat (las burbujas de Mensajes: la tuya blanca, la de Halo oscura) */
.lp-dm-halo { gap: 10px; }
.lp-dm-halo .lp-dm-head { margin-bottom: 6px; }
.lp-bub { max-width: 82%; margin: 0; padding: 10px 14px; border-radius: 20px; font-size: 14.5px; line-height: 1.4;
  opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .45s, transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.lp-bub.me { justify-self: end; background: #e9e9ee; color: #000; border-bottom-right-radius: 6px; transform-origin: right bottom; }
.lp-bub.halo { justify-self: start; background: #1a1a1c; border: 1px solid rgba(255, 255, 255, .07); border-bottom-left-radius: 6px; transform-origin: left bottom; }
.lp-feat.seen .lp-bub { opacity: 1; transform: none; }
.lp-bub:nth-of-type(2) { transition-delay: .7s; } .lp-bub:nth-of-type(3) { transition-delay: 1.4s; } .lp-bub:nth-of-type(4) { transition-delay: 1.9s; }
.lp-typing { display: flex; gap: 5px; padding: 14px 16px; }
.lp-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.lp-feat.on .lp-typing i { animation: lp-dot 1.2s ease-in-out infinite; }
.lp-typing i:nth-child(2) { animation-delay: .15s; } .lp-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes lp-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* «Y además»: lista grande, sin tarjetas */
.lp-index { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.lp-ix { display: grid; grid-template-columns: 48px 44px minmax(180px, 1fr) 1.6fr; align-items: center; gap: 18px; padding: 24px 12px;
  border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 4px; }
.lp-ix:hover { background: rgba(255, 255, 255, .025); }
.lp-ix-n { font: 500 12.5px var(--mono); color: var(--muted); }
.lp-ix-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .06); color: var(--muted); transition: color .3s, background .3s; }
.lp-ix:hover .lp-ix-ic { color: var(--ink); background: rgba(255, 255, 255, .1); }
.lp-ix-name { font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 600; letter-spacing: -.04em; transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.lp-ix:hover .lp-ix-name { transform: translateX(6px); }
.lp-ix-d { color: var(--muted); font-size: 15px; line-height: 1.45; }

/* «Empezar»: muestra del paso 1 (un formulario de mentira que se rellena) */
.lp-dm-form { justify-items: start; }
.lp-field { display: grid; gap: 3px; width: min(300px, 100%); padding: 10px 16px; border-radius: 14px; background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.lp-field i { font: 500 11px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lp-field b { font-weight: 500; font-size: 15px; }
.lp-field:nth-child(2) { transition-delay: .12s; }
.lp-field.lp-go { display: block; text-align: center; border-radius: 999px; background: var(--ink); color: #000; box-shadow: none; font-weight: 600; transition-delay: .24s; }
.sd-fl.on .lp-field { opacity: 1; transform: none; }

/* precios: gratis y de pago */
.lp-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lp-pcol { display: flex; flex-direction: column; padding: 28px; border-radius: 28px; background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .08); }
.lp-pcol:first-child { border-color: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.lp-pcol header { display: grid; justify-items: start; gap: 14px; }
.lp-pcol header b { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.lp-pcol .sd-incl { flex: 1; align-content: start; }
.lp-pcol .p-btn { align-self: flex-start; height: 50px; padding: 0 22px; font-size: 15px; }
.lp-plist { flex: 1; display: grid; grid-template-columns: max-content 1fr; gap: 0 20px; margin: 22px 0 24px; align-content: start; }
.lp-plist dt, .lp-plist dd { margin: 0; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.lp-plist dt:first-of-type, .lp-plist dt:first-of-type + dd { border-top: 0; }
.lp-plist dt { font-weight: 600; }
.lp-plist dd { color: var(--muted); font-size: 14.5px; }

/* cierre */
.lp-end { display: grid; justify-items: center; gap: 0; margin-top: 120px; padding: 64px 24px; border-radius: 32px; text-align: center;
  background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .08); }
.lp-end h2 { margin: 18px 0 10px; font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -.045em; line-height: 1.02; }
.lp-end p { margin: 0 0 28px; color: var(--muted); font-size: 17px; }
.lp-end .sd-cta { justify-content: center; }

@media (max-width: 900px) {
  .lp-board { grid-template-columns: 1fr 1fr; }
  .lp-tile-halo { grid-column: 1 / -1; }
  .lp-feat { grid-template-columns: 1fr; padding: 56px 0; }
  .lp-feat.lp-rev .lp-feat-txt { order: 0; }
  .lp-demo, .lp-rev .lp-demo { --ry: 0deg; }
  .lp-ix { grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: 4px 16px; padding: 18px 4px; }
  .lp-ix-n { display: none; }
  .lp-ix-ic { grid-row: 1 / 3; }
  .lp-ix-d { font-size: 14px; }
  .lp-prices { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .lp-top-r .p-btn.ghost { padding: 7px 11px; }
  .lp-board { gap: 10px; }
  .lp-tile { grid-template-columns: 1fr; row-gap: 10px; padding: 14px; border-radius: 22px; }
  .lp-tile-ic, .lp-halo-orb { grid-row: auto; width: 38px; height: 38px; border-radius: 12px; }
  .lp-tile-halo { grid-template-columns: 38px 1fr; }
  .lp-tile-halo .lp-halo-orb { grid-row: 1 / 3; }
  .lp-tile > span:last-child { font-size: 12.5px; }
  .lp-feat h3 { gap: 12px; }
  .lp-feat-ic { width: 44px; height: 44px; border-radius: 14px; }
  .lp-feat-lead { font-size: 16px; }
  .lp-demo { padding: 18px; border-radius: 24px; }
  .lp-dm-row > span { font-size: 11.5px; }
  .lp-pcol { padding: 22px 20px; border-radius: 24px; }
  .lp-pcol .p-btn { align-self: stretch; }
  .lp-plist { grid-template-columns: 1fr; }
  .lp-plist dd { padding-top: 0; border-top: 0; }
  .lp-end { margin-top: 84px; padding: 44px 18px; border-radius: 26px; }
  .lp-end .sd-cta .p-btn { flex: 1 1 100%; }
}
@media (max-width: 340px) { .lp-top-r .p-btn.ghost { display: none; } }   /* muy estrecho: «Iniciar sesión» sigue abajo y en el pie */

/* ---------- Planes de Studio con fecha de fin (03/11/2026, studio_plan.py) ---------- */
/* Portada: barra del plan bajo «Hola» (aviso naranja si acaba pronto, rojo si ya acabó) y apps con candado (Pack Skills o
   plan acabado: llevan a «Tu plan»; sin icono de candado, Dani: nada de candados decorativos) */
.p-plan-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: -12px 0 24px;
  padding: 12px 12px 12px 18px; border-radius: 20px; background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .08); color: var(--muted); font-size: 14.5px; }
.p-plan-bar.warn { color: #ffb340; background: rgba(255, 159, 10, .08); border-color: rgba(255, 159, 10, .22); }
.p-plan-bar.bad { color: #ff7a70; background: rgba(255, 69, 58, .08); border-color: rgba(255, 69, 58, .22); }
.p-app-locked { opacity: .55; }   /* bloqueadas (Pack Skills o plan caducado): más oscuras; al pulsar, «Tu plan» */
.p-app-locked:hover { opacity: .8; }
.p-app-locked .p-app-ic { opacity: .45; }
.p-app-locked .p-app-txt b { color: var(--muted); }
.p-app-locked .p-app-txt span { color: var(--ink); font-weight: 500; }

/* «Tu plan» (templates/studio_plan.html) */
.sp { max-width: 860px; }
.sp-flash { margin: -10px 0 20px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 159, 10, .1); color: #ffb340; font-size: 14.5px; }
.sp-flash.ok { background: rgba(48, 209, 88, .12); color: #5ce07f; }
.sp-now { padding: 24px 26px; }
.sp-now-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-now h2 { margin: 2px 0 0; font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 600; letter-spacing: -.045em; }
.sp-now-txt { margin: 0; color: var(--ink); font-size: 16px; }
.sp-now-sub { margin: -6px 0 0; color: var(--muted); font-size: 14px; }
.sp-incl { margin: 6px 0 0; gap: 9px; }
.sp-incl li { font-size: 14.5px; }
.sp .p-soon-title { margin-top: 34px; }
.sp-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.sp-offer { display: grid; align-content: start; gap: 10px; padding: 22px; }
.sp-offer.top { border-color: rgba(255, 255, 255, .22); background: radial-gradient(120% 50% at 50% 0%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 70%), #0c0c0d; }
.sp-offer-t { font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
.sp-offer .sd-amount b { font-size: 52px; }
.sp-offer .sd-amount-side i { font-size: 19px; }
.sp-offer .sd-amount-side i + i { font-size: 15px; }
.sp-offer-txt { margin: 0 0 6px; color: var(--muted); font-size: 14px; line-height: 1.45; min-height: 2.9em; }
.sp-go { width: 100%; height: 46px; }
.sp-foot { margin: 26px 0 0; color: var(--muted); font-size: 13.5px; }
.sp-dlg-price { margin: 0 0 14px; font: 500 15px var(--mono); color: var(--ink); }
.sp-dlg .sd-agree { margin-bottom: 4px; }

/* Aula: tarjeta del plan en Inicio (naranja si acaba pronto) */
.sa-plan.warn { border-color: rgba(255, 159, 10, .25); }
.sa-plan.warn .sa-big { color: #ffb340; }

/* Calendario del aula (studio_app.js, «Calendario»): el mes a la izquierda y el día a la derecha (debajo en el móvil) */
.sc-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sc-month { gap: 12px; }
.sc-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc-title { font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
.sc-title::first-letter { text-transform: uppercase; }
.sc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sc-wd { padding: 2px 0 6px; text-align: center; font: 500 11.5px var(--mono); color: var(--muted); }
.sc-cell { position: relative; display: grid; align-content: start; justify-items: center; gap: 5px; min-height: 58px; padding: 8px 2px 6px;
  border: 0; border-radius: 14px; background: rgba(255, 255, 255, .025); color: var(--ink); font: inherit; cursor: pointer;
  transition: background .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.sc-cell:hover { background: rgba(255, 255, 255, .06); }
.sc-cell:active { transform: scale(.95); }
.sc-cell:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.sc-pad { background: none; cursor: default; }
.sc-num { font-size: 14px; font-variant-numeric: tabular-nums; }
.sc-cell.today .sc-num { display: grid; place-items: center; width: 26px; height: 26px; margin-top: -4px; border-radius: 999px; background: var(--ink); color: #000; font-weight: 600; }
.sc-cell.on { background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.sc-dots { display: flex; gap: 3px; }
.sc-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.sc-dot.group { background: var(--ink); }
.sc-dot.slot { background: #30d158; }
.sc-dot.free { background: none; box-shadow: inset 0 0 0 1.5px #30d158; }
.sc-dot.notice { background: #ffb340; }
.sc-dot.note { background: #8e8e93; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 12.5px; }
.sc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sc-day h3::first-letter { text-transform: uppercase; }
.sc-ev .p-item-txt b { white-space: normal; }
.sc-ev .p-item-txt span { white-space: pre-line; }
.sc-ev.sc-group .p-item-ic { background: rgba(255, 255, 255, .12); }
.sc-ev.sc-slot.mine .p-item-ic, .sc-ev.sc-slot.free .p-item-ic { color: #5ce07f; background: rgba(48, 209, 88, .14); }
.sc-ev.sc-notice .p-item-ic { color: #ffb340; background: rgba(255, 159, 10, .15); }
.sc-adds { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-calls { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 16px;
  padding: 12px 12px 12px 18px; border-radius: 20px; background: rgba(48, 209, 88, .08); border: 1px solid rgba(48, 209, 88, .2); color: #5ce07f; font-size: 14.5px; }
.sc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 760px) {
  .sc-wrap { grid-template-columns: 1fr; }
  .sc-cell { min-height: 46px; padding: 6px 1px 5px; border-radius: 11px; }
  .sc-num { font-size: 13px; }
}

/* Web de venta: «Un método. Cualquier vídeo.» (studio.html, #siempre, justo tras las cifras). Pared de temas en letra
   grande: el de hoy blanco con su etiqueta, el resto gris que se enciende uno tras otro al llegar (una vez), y el de
   «mañana» con borde de puntos. Debajo, tres razones con números huecos, en fila (sin tarjetas) */
.sd-was.none { min-height: 22px; }
.sd-any-wall { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0 0 56px; padding: 0; list-style: none; }
.sd-any-wall li { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px;
  font-size: clamp(1.1rem, 2.3vw, 1.65rem); font-weight: 600; letter-spacing: -.035em; color: rgba(255, 255, 255, .28);
  background: #0c0c0d; border: 1px solid rgba(255, 255, 255, .07);
  transition: color .6s ease, border-color .6s ease, transform .7s cubic-bezier(.25, 1.2, .4, 1); transform: translateY(10px); }
.sd-any-wall.in li { color: rgba(255, 255, 255, .62); transform: none; }
.sd-any-wall li:nth-child(2) { transition-delay: .1s; } .sd-any-wall li:nth-child(3) { transition-delay: .16s; }
.sd-any-wall li:nth-child(4) { transition-delay: .22s; } .sd-any-wall li:nth-child(5) { transition-delay: .28s; }
.sd-any-wall li:nth-child(6) { transition-delay: .34s; } .sd-any-wall li:nth-child(7) { transition-delay: .4s; }
.sd-any-wall li:nth-child(8) { transition-delay: .46s; } .sd-any-wall li:nth-child(9) { transition-delay: .52s; }
.sd-any-wall li:nth-child(10) { transition-delay: .58s; } .sd-any-wall li:nth-child(11) { transition-delay: .64s; }
.sd-any-wall li:nth-child(12) { transition-delay: .7s; } .sd-any-wall li:nth-child(13) { transition-delay: .76s; }
.sd-any-wall li:nth-child(14) { transition-delay: .82s; }
.sd-any-wall li.now { color: #000; background: var(--ink); border-color: var(--ink); box-shadow: 0 20px 60px rgba(255, 255, 255, .08); }
.sd-any-wall.in li.now { color: #000; }
.sd-any-wall li.next { background: none; border: 1.5px dashed rgba(255, 255, 255, .3); }
.sd-any-wall.in li.next { color: var(--ink); }
.sd-any-tag { font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sd-any-wall li.now .sd-any-tag { color: rgba(0, 0, 0, .55); }
.sd-any-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; }
.sd-any-why li { display: grid; align-content: start; gap: 10px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
.sd-any-why li:nth-child(2) { --d: .1s; } .sd-any-why li:nth-child(3) { --d: .2s; }
.sd-last-n { font: 600 clamp(3.6rem, 6vw, 5rem)/.8 var(--sans); letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .26); }
.sd-any-why h3 { margin: 8px 0 0; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.sd-any-why p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 760px) {
  .sd-any-wall { gap: 8px; margin-bottom: 40px; }
  .sd-any-wall li { padding: 9px 15px; font-size: 1rem; }
  .sd-any-why { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- Logs (a063.es/logs, solo el dueño; static/logs.js): lista por días con filtros y Estadísticas ----------
   Barra de app con pestañas como Studio (.sa-tabs, abajo en el móvil). Punto de color por nivel: rojo error, naranja aviso,
   gris info. Gráficas hechas con CSS (columnas por día y barras horizontales). */
.lg { max-width: 980px; }
.lg-bar { gap: 14px; padding: 16px; }
.lg-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lg-search { position: relative; flex: 1 1 240px; min-width: 0; }
.lg-search svg { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; color: var(--muted);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lg-search .p-input { height: 42px; padding-left: 42px; border-radius: 999px; font-size: 15px; }
.lg-search .p-input::-webkit-search-cancel-button { filter: grayscale(1); }
.lg-bar .p-seg { flex: none; }
.lg-bar .p-seg button { padding: 7px 13px; font-size: 13.5px; }
/* chips de categoría con su número */
.lg-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-cat { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 6px 13px; border: 0; border-radius: 999px; cursor: pointer;
  font: 500 13px var(--sans); color: var(--muted); background: rgba(255, 255, 255, .055);
  transition: background .2s, color .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.lg-cat i { min-width: 20px; padding: 2px 6px; box-sizing: border-box; border-radius: 999px; font: 600 11px/1.2 var(--mono); font-style: normal;
  text-align: center; background: rgba(255, 255, 255, .07); color: var(--muted); }
.lg-cat:hover { background: rgba(255, 255, 255, .1); color: var(--ink); }
.lg-cat:active { transform: scale(.95); }
.lg-cat.zero { opacity: .55; }
.lg-cat.on { background: var(--ink); color: #000; opacity: 1; box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.lg-cat.on i { background: rgba(0, 0, 0, .1); color: #000; }
.lg-cat:focus-visible, .lg-row:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
/* «N nuevos»: píldora de cristal que flota arriba */
.lg-new { position: sticky; top: 84px; z-index: 5; justify-self: center; display: inline-flex; align-items: center; gap: 7px; margin: -6px 0;
  padding: 9px 16px 9px 13px; border: 0; border-radius: 999px; cursor: pointer; font: 600 13.5px var(--sans); color: var(--ink);
  background: rgba(28, 28, 30, .72); box-shadow: var(--float); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  animation: p-pop .45s cubic-bezier(.25, 1.2, .4, 1); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.lg-new[hidden] { display: none; }
.lg-new:active { transform: scale(.95); }
.lg-new svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* la lista, agrupada por día */
.lg-list { display: grid; gap: 10px; }
.lg-day { margin: 14px 4px 0; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lg-day:first-child { margin-top: 2px; }
.lg-group { gap: 0; padding: 6px; }
.lg-row { display: grid; grid-template-columns: 10px 46px minmax(0, 1fr) auto; align-items: start; gap: 12px; width: 100%; padding: 11px 12px;
  border: 0; border-radius: 18px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: background .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.lg-row + .lg-row { box-shadow: 0 -1px 0 rgba(255, 255, 255, .05); }
.lg-row:hover { background: rgba(255, 255, 255, .045); box-shadow: none; }
.lg-row:hover + .lg-row { box-shadow: none; }
.lg-row:active { transform: scale(.985); }
.lg-row.flash { animation: lg-flash 1.6s ease-out; }
@keyframes lg-flash { from { background: rgba(255, 255, 255, .1); } to { background: transparent; } }
.lg-dot { width: 9px; height: 9px; margin-top: 6px; border-radius: 999px; background: #636366; }
.lg-dot.error { background: #ff453a; box-shadow: 0 0 0 3px rgba(255, 69, 58, .18); }
.lg-dot.warn { background: #ff9f0a; box-shadow: 0 0 0 3px rgba(255, 159, 10, .16); }
.lg-time { padding-top: 1px; font: 500 12.5px var(--mono); color: var(--muted); }
.lg-mid { display: grid; gap: 5px; min-width: 0; }
.lg-text { font-size: 14.5px; line-height: 1.4; color: rgba(245, 245, 247, .72); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lg-row.new .lg-text { color: var(--ink); font-weight: 500; }
.lg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--muted); }
.lg-catl { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .07); font-weight: 500; }
.lg-path { font: 500 11.5px var(--mono); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.lg-side { display: flex; align-items: center; gap: 10px; padding-top: 1px; }
.lg-n { padding: 2px 8px; border-radius: 999px; font: 600 11.5px var(--mono); color: var(--muted); background: rgba(255, 255, 255, .06); }
.lg-who { display: inline-flex; align-items: center; gap: 7px; max-width: 170px; font-size: 13px; color: var(--muted); }
.lg-who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-avatar.lg-av { width: 24px; height: 24px; flex: none; font-size: 11px; }
.lg-more { justify-self: center; }
.lg-empty { justify-items: center; gap: 6px; padding: 44px 20px; text-align: center; }
.lg-empty b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.lg-empty span { color: var(--muted); font-size: 14px; }
.lg-empty-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 15px; background: rgba(48, 209, 88, .14); color: #5ce07f; }
.lg-empty-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* detalle */
.lg-dlg { width: min(640px, calc(100vw - 24px)); }
.lg-dlg[open] { display: grid; gap: 16px; }
.lg-dlg-head { display: flex; align-items: center; gap: 6px; }
.lg-x { margin-left: auto; }
.lg-dlg .lg-dlg-title { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: -.02em; overflow-wrap: anywhere; }
.lg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.lg-fact { display: grid; gap: 3px; padding: 10px 13px; border-radius: 14px; background: rgba(255, 255, 255, .045); min-width: 0; }
.lg-fact span { font-size: 12px; color: var(--muted); }
.lg-fact b { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }
.lg-fact b.mono { font: 500 12.5px var(--mono); }
.lg-person { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, .045);
  color: var(--ink); text-decoration: none; transition: background .2s; }
.lg-person:hover { background: rgba(255, 255, 255, .08); }
.lg-person > span:last-child { display: grid; gap: 1px; }
.lg-person > span:last-child span { font-size: 12.5px; color: var(--muted); }
.lg-trace { display: grid; gap: 8px; }
.lg-trace-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.lg-pre { margin: 0; max-height: 320px; overflow: auto; padding: 14px; border-radius: 16px; background: #0a0a0b; border: 1px solid rgba(255, 255, 255, .07);
  font: 500 12px/1.55 var(--mono); color: rgba(245, 245, 247, .85); white-space: pre-wrap; overflow-wrap: anywhere; }
/* número de errores sin ver en la tarjeta de Logs de la portada (main.portal → logs.unseen_errors) */
.p-app-badge { position: absolute; top: 14px; right: 14px; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 999px;
  display: grid; place-items: center; font: 600 11.5px var(--mono); font-style: normal; color: #fff; background: #ff453a; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5); }
/* Estadísticas */
.lg-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lg-kpi { gap: 4px; padding: 18px 20px; border-radius: 24px; }
.lg-kpi > span { font-size: 13px; color: var(--muted); }
.lg-kpi > b { font-size: clamp(26px, 3.4vw, 34px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lg-kpi > small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.lg-kpi.bad > b { color: #ff6961; }
.lg-kpi.warn > b { color: #ffb340; }
.lg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lg-chart-card { align-content: start; }
.lg-chart-card.wide { grid-column: 1 / -1; }
.lg-ch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lg-ch-head h3, .lg-sub-h { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lg-ch-head span { font-size: 12.5px; color: var(--muted); }
.lg-sub-h { margin-top: 6px; }
.lg-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; height: 170px; align-items: end; }
.lg-cols.small { height: 90px; }
.lg-col { display: grid; grid-template-rows: auto 1fr auto; height: 100%; gap: 4px; justify-items: center; min-width: 0; }
.lg-col-n { font: 500 11px var(--mono); color: var(--muted); }
.lg-stack { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 34px; height: 100%; border-radius: 8px;
  background: rgba(255, 255, 255, .04); overflow: hidden; }
.lg-stack i { display: block; width: 100%; min-height: 3px; }
.lg-stack i.e { background: #ff453a; }
.lg-stack i.w { background: #ff9f0a; }
.lg-stack i.g { background: rgba(245, 245, 247, .7); }
.lg-col-d { font: 500 10.5px var(--mono); color: var(--muted); min-height: 13px; }
.lg-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); }
.lg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-legend i { width: 9px; height: 9px; border-radius: 3px; }
.lg-legend i.e { background: #ff453a; }
.lg-legend i.w { background: #ff9f0a; }
.lg-hbars { display: grid; gap: 9px; }
.lg-hrow { display: grid; grid-template-columns: minmax(90px, 32%) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px; }
.lg-hname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-hrow > b, .lg-top-row > b { font: 500 12px var(--mono); color: var(--muted); white-space: nowrap; }
.lg-hb { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.lg-hb i { display: block; height: 100%; border-radius: inherit; background: rgba(245, 245, 247, .7); }
.lg-hb i.mix { background: linear-gradient(90deg, #ff453a 0 var(--red), #ff9f0a var(--red) var(--orange), rgba(245, 245, 247, .7) var(--orange) 100%); }
.lg-top { display: grid; gap: 10px; }
.lg-top-row { display: grid; grid-template-columns: auto minmax(70px, 30%) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px; }
.lg-top-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-kv { display: grid; gap: 0; }
.lg-kv > div, .lg-quota > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; font-size: 14px; }
.lg-kv > div + div { border-top: 1px solid rgba(255, 255, 255, .06); }
.lg-kv span, .lg-quota span { color: var(--muted); }
.lg-kv b, .lg-quota b { font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-kv b.warn { color: #ffb340; }
.lg-quota { display: grid; gap: 6px; }
.lg-none { margin: 4px 0; color: var(--muted); font-size: 14px; }
.lg-pi-more { justify-self: start; }
@media (max-width: 760px) {
  .lg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .lg-bar { padding: 14px; border-radius: 24px; }
  .lg-bar .p-seg { width: 100%; justify-content: space-between; }
  .lg-bar .p-seg button { flex: 1; padding: 7px 6px; }
  .lg-cats { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 0 14px 2px; scrollbar-width: none; }
  .lg-cats::-webkit-scrollbar { display: none; }
  .lg-cat { flex: none; }
  .lg-row { grid-template-columns: 10px minmax(0, 1fr); gap: 4px 10px; padding: 11px 10px; }
  .lg-time { grid-column: 2; grid-row: 1; }
  .lg-dot { grid-row: 1; margin-top: 4px; }
  .lg-mid { grid-column: 2; }
  .lg-side { grid-column: 2; grid-row: 1; justify-self: end; padding: 0; gap: 8px; }
  .lg-who { max-width: 150px; font-size: 12.5px; }
  .lg-path { max-width: 100%; }
  .lg-new { top: 72px; }
  .lg-kpi { padding: 14px 16px; border-radius: 22px; }
  .lg-cols { height: 140px; gap: 3px; }
  .lg-col-n { font-size: 9.5px; }
  .lg-top-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lg-top-row .lg-hb { grid-column: 2 / -1; grid-row: 2; }
}

/* ---------- Tema claro: retoques a mano (el resto lo genera web/tema_claro.py al final de este archivo) ---------- */
[data-theme="light"] .sa-g-admin, [data-theme="light"] .sa .ms-b-who.sa-g-admin { color: #0b0b0d; }      /* colores de Comunidad, legibles en claro */
[data-theme="light"] .sa-g-teacher, [data-theme="light"] .sa .ms-b-who.sa-g-teacher { color: #1f9d45; }
[data-theme="light"] .sa-g-ultra, [data-theme="light"] .sa .ms-b-who.sa-g-ultra { color: #a87900; }
[data-theme="light"] .sa-g-pro, [data-theme="light"] .sa .ms-b-who.sa-g-pro { color: #0a6fd6; }
[data-theme="light"] .p-top-app.stuck { background: rgba(250, 250, 251, .92); }   /* la barra de una app al bajar */
[data-theme="light"] .lp-top.stuck { background: rgba(250, 250, 251, .92); }   /* la de la web pública, igual */
[data-theme="light"] .sa-lb-x { color: #fff; background: rgba(255, 255, 255, .1); }   /* el visor de fotos sigue negro */
/* Studio: el degradado de «solas» va recortado a la letra (el generado usa «background:», que quita el recorte) */
[data-theme="light"] .sd-h1 { background-size: 400% 100%; -webkit-background-clip: text; background-clip: text; }   /* el generado usa «background:», que quita el recorte y el tamaño del brillo */
[data-theme="light"] .sd-h1 { background-image: linear-gradient(140deg, #191920 0 39%, #1f1f25 40.38%, #2e2e35 41.75%, #46464c 43.12%, #626268 44.5%, #7d7d84 45.88%, #95959b 47.25%, #a4a4ab 48.62%, #aaaab0 50%, #a4a4ab 51.38%, #95959b 52.75%, #7d7d84 54.12%, #626268 55.5%, #46464c 56.88%, #2e2e35 58.25%, #1f1f25 59.62%, #191920 61% 100%); }   /* el generado deja la franja casi blanca: no se leía */
/* Halo IDE: la tabla de publicar, clara (el generado la deja gris oscuro sobre el naranja de la pregunta) */
[data-theme="light"] .hi-ask .hi-pub { background: rgba(255, 255, 255, .7); }
/* Studio: los móviles siguen oscuros (el generado también pasa a claro las variables --ph-*); solo la sombra es más suave */
[data-theme="light"] .sd-phone { --ph-ink: #fff; --ph-bezel: #000; --ph-btn-ink: #000; --ph-key: linear-gradient(90deg, #1c1c1f, #3d3d42 60%, #222225);
  --ph-rim: linear-gradient(145deg, #5a5a60 0%, #2a2a2e 22%, #1a1a1d 50%, #34343a 78%, #141416 100%);
  --ph-chip: rgba(255, 255, 255, .16); --ph-top: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); --ph-bot: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .62));
  --ph-track: rgba(255, 255, 255, .28); --ph-hud: rgba(0, 0, 0, .55); --ph-like: #ff3040;
  --ph-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 1px rgba(255, 255, 255, .3), 0 0 0 1px rgba(0, 0, 0, .5), 0 30px 70px rgba(0, 0, 0, .28); }
[data-theme="light"] .sd-clip .sd-phone { --ph-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 1px rgba(255, 255, 255, .3), 0 0 0 1px rgba(0, 0, 0, .5), 0 20px 50px rgba(0, 0, 0, .22); }
[data-theme="light"] .sd-play.on { --ph-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 0 0 2px rgba(0, 0, 0, .55), 0 20px 50px rgba(0, 0, 0, .22); }
/* el vídeo del método de Studio es como un visor: oscuro también en el claro (el generador lo aclararía) */
[data-theme="light"] .sd-film { background: #000; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 40px 100px rgba(40, 40, 70, .28); }
[data-theme="light"] .sd-film:has(.sd-film-wall)::after { background: radial-gradient(55% 65% at 50% 50%, rgba(0, 0, 0, .55), rgba(0, 0, 0, .94) 100%); box-shadow: none; }
[data-theme="light"] .sd-film-cap { color: #fff; }
[data-theme="light"] .sd-film-cap .p-chip { color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .1); }
[data-theme="light"] .sd-film-play { color: #000; background: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .1), 0 20px 50px rgba(0, 0, 0, .5); }
/* el reproductor de juegos se queda oscuro también con el tema claro (el juego es oscuro) */
[data-theme="light"] .g-play-body, [data-theme="light"] .g-frame { background: #000; }
[data-theme="light"] .g-name { color: #f5f5f7; }
[data-theme="light"] .g-bar .p-btn.ghost { background: rgba(255, 255, 255, .055); color: #f5f5f7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
/* la bola de Halo es de cristal blanco: sobre fondo claro, en oscuro (la de Cloud es SVG y el botón de entrar ya es oscuro) */
[data-theme="light"] .orb { filter: invert(1); }
[data-theme="light"] .p-app-cloud .orb, [data-theme="light"] .p-go .orb { filter: none; }
/* los visores de vídeo y el fundido a negro siguen en negro (es el vídeo, no la página) */
[data-theme="light"] .st-stage, [data-theme="light"] .vx-stagebox:fullscreen, [data-theme="light"] .vx-black,
[data-theme="light"] .dc-prev-media { background: #000; }
[data-theme="light"] .vx-stage { background: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 20px 50px -20px rgba(40, 40, 70, .35); }
[data-theme="light"] .ve-thumb { background-color: #111; }


/* ===== TEMA CLARO (generado por web/tema_claro.py: no editar a mano) ===== */
:root:where([data-theme="light"]) { --ink: #0b0b0d; --muted: #5f5f64; --err: #e00d00; --lq: inset 0 1px 0 rgba(255, 255, 255, .91), inset 0 -1px 0 rgba(255, 255, 255, .175), inset 0 0 0 .5px rgba(0, 0, 0, .09), 0 10px 28px rgba(40, 40, 70, .168); --float: inset 0 1px 0 rgba(255, 255, 255, .84), inset 0 0 0 .5px rgba(0, 0, 0, .09), 0 24px 60px rgba(40, 40, 70, .273); color-scheme: light; }
html:where([data-theme="light"]) { background: #f3f3f3; }
:where([data-theme="light"]) body { background: transparent; color: var(--ink); }
:where([data-theme="light"]) button, :where([data-theme="light"]) input { color: inherit; }
:where([data-theme="light"]) :focus:not(:focus-visible) { outline: none; }
:where([data-theme="light"]) :focus-visible { outline: 2px solid rgba(12, 12, 12, .7); }
:where([data-theme="light"]) .svg-defs { color: var(--ink); }
:where([data-theme="light"]) .svg-defs stop { stop-color: currentColor; }
:where([data-theme="light"]) .bg-beam { background: #f3f3f3; }
:where([data-theme="light"]) .bg-beam i:nth-child(1) { background: radial-gradient(closest-side, #fdfdfd 0%, #fbfbfb 38%, #f7f7f7 68%, rgba(0, 0, 0, 0) 100%); }
:where([data-theme="light"]) .bg-beam i:nth-child(2) { background: radial-gradient(closest-side, rgba(255, 255, 255, .56), rgba(0, 0, 0, 0)); }
:where([data-theme="light"]) .bg-beam i:nth-child(3) { background: radial-gradient(closest-side, #f6f6f7, rgba(0, 0, 0, 0)); }
:where([data-theme="light"]) .bg-rings b:nth-child(1) { background: conic-gradient(from 0deg, transparent 0 45%, rgba(0, 0, 0, .018) 62%, rgba(0, 0, 0, .072) 84%, rgba(0, 0, 0, .022) 93%, transparent 100%); }
:where([data-theme="light"]) .bg-rings b:nth-child(2) { background: conic-gradient(from 0deg, transparent 0 58%, rgba(0, 0, 0, .04) 84%, transparent 100%); }
:where([data-theme="light"]) .orb { color: var(--ink); }
:where([data-theme="light"]) .orb ellipse { fill: none; stroke: url(#orbShade); }
:where([data-theme="light"]) .orb .orb-outer { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .p-login { background: rgba(255, 255, 255, .736); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 .5px rgba(0, 0, 0, .072), 0 30px 80px rgba(40, 40, 70, .231); }
:where([data-theme="light"]) .p-login input { border: 0; outline: none; background: rgba(0, 0, 0, .04); box-shadow: var(--lq); }
:where([data-theme="light"]) .p-login input:focus { background: rgba(0, 0, 0, .058); box-shadow: var(--lq), 0 0 0 2px rgba(0, 0, 0, .275); }
:where([data-theme="light"]) .p-login input.bad { box-shadow: var(--lq), 0 0 0 2px rgba(255, 69, 58, .8); }
:where([data-theme="light"]) .p-login input:-webkit-autofill { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); }
:where([data-theme="light"]) .p-login input::placeholder { color: rgba(12, 12, 12, .3); }
:where([data-theme="light"]) .p-login .pw-eye { border: 0; color: rgba(12, 12, 12, .45); background: none; }
:where([data-theme="light"]) .p-login .pw-eye:hover { color: rgba(12, 12, 12, .92); background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .p-login .pw-eye:focus-visible { outline: 2px solid rgba(12, 12, 12, .7); }
:where([data-theme="light"]) .p-login .pw-eye svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .p-login .pw-eye[aria-pressed="true"] { color: rgba(12, 12, 12, .92); }
:where([data-theme="light"]) .p-go { border: 0; background: #4f4f55; box-shadow: 0 8px 24px rgba(40, 40, 70, .147), inset 0 1px 0 #ffffff; }
:where([data-theme="light"]) .p-go:hover { background: #3e3e44; }
:where([data-theme="light"]) .p-go .orb { color: #ffffff; }
:where([data-theme="light"]) .p-go .orb ellipse { stroke: #ffffff; }
:where([data-theme="light"]) .p-go .orb .orb-outer { stroke: #ffffff; }
:where([data-theme="light"]) .p-bio { border: 0; background: rgba(0, 0, 0, .04); box-shadow: var(--lq); }
:where([data-theme="light"]) .p-bio:hover { background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .p-bio svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .p-signup { color: var(--muted); text-decoration: none; }
:where([data-theme="light"]) .p-signup:hover { color: var(--ink); }
:where([data-theme="light"]) .p-signup:focus-visible { outline: 2px solid rgba(12, 12, 12, .7); }
:where([data-theme="light"]) .p-brand { text-decoration: none; color: inherit; }
:where([data-theme="light"]) .p-me-btn { border: 0; background: rgba(0, 0, 0, .04); box-shadow: var(--lq); }
:where([data-theme="light"]) .p-me-btn:hover { background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .p-rem-btn { color: var(--ink); text-decoration: none; background: rgba(0, 0, 0, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .63), inset 0 0 0 .5px rgba(0, 0, 0, .084); }
:where([data-theme="light"]) .p-rem-btn:hover { background: rgba(0, 0, 0, .086); }
:where([data-theme="light"]) .p-rem-btn svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .p-avatar { background: linear-gradient(160deg, #e3e3e4, #fcfcfc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .77); }
:where([data-theme="light"]) .p-menu { background: rgba(255, 255, 255, .758); box-shadow: var(--float); }
:where([data-theme="light"]) .p-menu-who { border-bottom: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .p-menu-who span { color: var(--muted); }
:where([data-theme="light"]) .p-menu-item { border: 0; background: none; }
:where([data-theme="light"]) .p-menu-item:hover, :where([data-theme="light"]) .p-menu-item:focus-visible { background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .p-menu-item svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .p-app { text-decoration: none; color: inherit; border: 0; }
:where([data-theme="light"]) .p-app-ic { background: rgba(0, 0, 0, .04); box-shadow: var(--lq); }
:where([data-theme="light"]) .p-app-ic .ic { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .p-app-txt span { color: var(--muted); }
:where([data-theme="light"]) .p-soon-title { color: var(--muted); }
:where([data-theme="light"]) .p-soon-chip { color: var(--muted); background: rgba(0, 0, 0, .043); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .084); }
:where([data-theme="light"]) .p-none { color: var(--muted); }
:where([data-theme="light"]) a.p-menu-item { color: inherit; text-decoration: none; }
:where([data-theme="light"]) .p-back { color: var(--muted); text-decoration: none; }
:where([data-theme="light"]) .p-back:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
:where([data-theme="light"]) .p-back svg, :where([data-theme="light"]) .p-btn svg, :where([data-theme="light"]) .p-card-ic svg, :where([data-theme="light"]) .p-item-ic svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .p-tabs { background: rgba(0, 0, 0, .04); box-shadow: var(--lq); }
:where([data-theme="light"]) .p-tabs button { border: 0; background: none; color: var(--muted); }
:where([data-theme="light"]) .p-tabs button.on { color: var(--ink); background: rgba(0, 0, 0, .086); box-shadow: inset 0 1px 0 #ffffff, inset 0 0 0 .5px rgba(0, 0, 0, .12); }
:where([data-theme="light"]) .lq > .lens { background: rgba(0, 0, 0, .086); box-shadow: inset 0 1px 0 #ffffff, inset 0 0 0 .5px rgba(0, 0, 0, .12), 0 4px 14px rgba(40, 40, 70, .126); }
:where([data-theme="light"]) .lq.lq-drag > .lens { background: rgba(0, 0, 0, .122); }
:where([data-theme="light"]) .p-tabs.lq button.on, :where([data-theme="light"]) .p-seg.lq button.on { background: none; box-shadow: none; }
:where([data-theme="light"]) .p-wait { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .p-card { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .p-card h3 { color: var(--muted); }
:where([data-theme="light"]) .p-avatar.has-img { background: #fcfcfc; }
:where([data-theme="light"]) .p-who-face { border: 0; background: none; color: inherit; }
:where([data-theme="light"]) .p-who-cam { color: var(--ink); background: #f3f3f3; box-shadow: var(--lq), 0 0 0 3px rgba(40, 40, 70, .42); }
:where([data-theme="light"]) .p-who-cam svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .p-who-txt > span:not(.p-chip) { color: var(--muted); }
:where([data-theme="light"]) .p-chip { background: rgba(0, 0, 0, .058); color: var(--ink); }
:where([data-theme="light"]) .p-card-ic { background: rgba(0, 0, 0, .04); box-shadow: var(--lq); }
:where([data-theme="light"]) .p-card-txt span { color: var(--muted); }
:where([data-theme="light"]) .p-pill { background: rgba(0, 0, 0, .05); color: var(--muted); }
:where([data-theme="light"]) .p-pill.ok { background: rgba(48, 209, 88, .14); color: #24bd4c; }
:where([data-theme="light"]) .p-pill.warn { background: rgba(255, 159, 10, .15); color: #e08700; }
:where([data-theme="light"]) .p-pill.bad { background: rgba(255, 69, 58, .16); color: #e01000; }
:where([data-theme="light"]) .p-muted { color: var(--muted); }
:where([data-theme="light"]) .p-stat { background: rgba(0, 0, 0, .032); }
:where([data-theme="light"]) .p-stat > span:first-child { color: var(--muted); }
:where([data-theme="light"]) .p-bar { background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .p-bar i { background: #5ce07f; }
:where([data-theme="light"]) .p-bar.warn i { background: #ffb340; }
:where([data-theme="light"]) .p-stack { background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .p-item { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .p-card > h3 + .p-item, :where([data-theme="light"]) .p-list > .p-item:first-child, :where([data-theme="light"]) .p-card.p-flat > .p-item { border-top: 0; }
:where([data-theme="light"]) .p-item-ic { background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .p-item-txt span { color: var(--muted); }
:where([data-theme="light"]) .p-note { color: var(--muted); }
:where([data-theme="light"]) .p-note.bad { color: #e00b00; }
:where([data-theme="light"]) .p-btn { border: 0; }
:where([data-theme="light"]) .p-btn.primary { background: var(--ink); color: #ffffff; box-shadow: 0 8px 24px rgba(40, 40, 70, .147), inset 0 1px 0 #ffffff; }
:where([data-theme="light"]) .p-btn.primary:hover { background: #141414; }
:where([data-theme="light"]) .p-btn.ghost { background: rgba(0, 0, 0, .04); color: var(--ink); box-shadow: var(--lq); }
:where([data-theme="light"]) .p-btn.ghost:hover { background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .p-btn.danger { background: rgba(255, 69, 58, .14); color: #e00b00; }
:where([data-theme="light"]) .p-btn.danger:hover { background: rgba(255, 69, 58, .22); }
:where([data-theme="light"]) .p-switch { border: 0; background: rgba(255, 255, 255, .472); }
:where([data-theme="light"]) .p-switch i { background: #141414; box-shadow: 0 3px 8px rgba(40, 40, 70, .147); }
:where([data-theme="light"]) .p-switch.on { background: #30d158; }
:where([data-theme="light"]) .p-sec-head p { color: var(--muted); }
:where([data-theme="light"]) .p-person { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .p-person:first-child { border-top: 0; }
:where([data-theme="light"]) .p-person-txt span { color: var(--muted); }
:where([data-theme="light"]) .p-app-sw { background: rgba(0, 0, 0, .032); }
:where([data-theme="light"]) .p-app-sw.off { color: var(--muted); }
:where([data-theme="light"]) .p-dialog { border: 0; color: var(--ink); background: rgba(255, 255, 255, .802); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .77), inset 0 0 0 .5px rgba(0, 0, 0, .084), 0 40px 100px rgba(40, 40, 70, .294); }
:where([data-theme="light"]) .p-dialog::backdrop { background: rgba(0, 0, 0, .55); }
:where([data-theme="light"]) .p-dlg-body > p { color: var(--muted); }
:where([data-theme="light"]) .p-input { border: 1px solid rgba(0, 0, 0, .08); outline: none; color: var(--ink); background: rgba(0, 0, 0, .04); }
:where([data-theme="light"]) .p-input:focus { border-color: rgba(0, 0, 0, .48); box-shadow: 0 0 0 3px rgba(0, 0, 0, .05); }
:where([data-theme="light"]) select.p-input { color-scheme: light; }
:where([data-theme="light"]) select option, :where([data-theme="light"]) select optgroup { background: #fcfcfc; color: #0b0b0d; }
:where([data-theme="light"]) .p-field > span { color: var(--muted); }
:where([data-theme="light"]) .p-sub { background: rgba(0, 0, 0, .025); }
:where([data-theme="light"]) .p-seg { background: rgba(0, 0, 0, .04); box-shadow: var(--lq); }
:where([data-theme="light"]) .p-seg button { border: 0; background: none; color: var(--muted); }
:where([data-theme="light"]) .p-seg button.on { color: var(--ink); background: rgba(0, 0, 0, .086); box-shadow: inset 0 1px 0 #ffffff; }
:where([data-theme="light"]) .p-toast { background: rgba(255, 255, 255, .912); box-shadow: var(--float); }
:where([data-theme="light"]) .p-toast.bad { color: #e01200; }
:where([data-theme="light"]) .p-app { background: linear-gradient(155deg, rgba(0, 0, 0, .061) 0%, rgba(0, 0, 0, .018) 40%, rgba(0, 0, 0, .009) 60%, rgba(0, 0, 0, .036) 100%); box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(255, 255, 255, .28), inset 0 0 0 .5px rgba(0, 0, 0, .096),
    inset 0 0 28px rgba(255, 255, 255, .123), 0 22px 56px rgba(40, 40, 70, .21); }
:where([data-theme="light"]) .p-app::before { background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .1) 28%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .06) 78%, rgba(255, 255, 255, .28)); }
:where([data-theme="light"]) .p-app::after { background: radial-gradient(240px circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 45%, transparent 70%); }
:where([data-theme="light"]) .p-app:not(.p-app-soon):hover { box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(255, 255, 255, .35), inset 0 0 0 .5px rgba(0, 0, 0, .12),
    inset 0 0 34px rgba(255, 255, 255, .175), 0 26px 64px rgba(40, 40, 70, .231); }
:where([data-theme="light"]) .p-app-ic { background: rgba(0, 0, 0, .05); }
:where([data-theme="light"]) .p-app.lift { background: linear-gradient(155deg, rgba(0, 0, 0, .086) 0%, rgba(0, 0, 0, .025) 45%, rgba(0, 0, 0, .05) 100%); box-shadow: inset 0 1px 0 #ffffff, inset 0 0 0 .5px rgba(0, 0, 0, .12), inset 0 0 40px rgba(255, 255, 255, .21), 0 40px 80px rgba(40, 40, 70, .252); }
:where([data-theme="light"]) .p-game-cover { background: rgba(0, 0, 0, .036); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .084); }
:where([data-theme="light"]) .p-game-i { border: 0; color: #fff; background: rgba(0, 0, 0, .5); box-shadow: inset 0 1px 0 #ffffff, inset 0 0 0 .5px rgba(0, 0, 0, .12), 0 4px 14px rgba(40, 40, 70, .168); }
:where([data-theme="light"]) .p-game-i:hover { background: rgba(0, 0, 0, .72); }
:where([data-theme="light"]) .p-game-i svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .p-game-i:focus-visible { outline: 2px solid rgba(12, 12, 12, .7); }
:where([data-theme="light"]) .gm-dlg { background: #fafafa; }
:where([data-theme="light"]) .gm-dlg .gm-close { background: rgba(0, 0, 0, .55); color: #fff; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); }
:where([data-theme="light"]) .gm-stage { background: #f3f3f3; }
:where([data-theme="light"]) .gm-video, :where([data-theme="light"]) .gm-shot { background: #f3f3f3; }
:where([data-theme="light"]) .gm-th { border: 0; background: #f3f3f3; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .096); }
:where([data-theme="light"]) .gm-th.on { box-shadow: 0 0 0 2px rgba(0, 0, 0, .425); }
:where([data-theme="light"]) .gm-th.vid svg { fill: #0c0c0c; stroke: none; filter: drop-shadow(0 1px 4px rgba(40, 40, 70, .294)); }
:where([data-theme="light"]) .gm-desc { color: #19191d; }
:where([data-theme="light"]) .gm-ctrl { color: var(--muted); }
:where([data-theme="light"]) .gm-ctrl b { color: var(--ink); }
:where([data-theme="light"]) .cv-lead { color: var(--muted); }
:where([data-theme="light"]) .cv-drop { background: rgba(0, 0, 0, .022); border: 1.5px dashed rgba(0, 0, 0, .128); }
:where([data-theme="light"]) .cv-drop:hover, :where([data-theme="light"]) .cv-drop.over { background: rgba(0, 0, 0, .043); border-color: rgba(0, 0, 0, .32); }
:where([data-theme="light"]) .cv-drop:focus-within { outline: 2px solid rgba(12, 12, 12, .7); }
:where([data-theme="light"]) .cv-drop > span:last-child { color: var(--muted); }
:where([data-theme="light"]) .cv-drop-ic { background: rgba(0, 0, 0, .05); box-shadow: var(--lq); }
:where([data-theme="light"]) .cv-drop-ic svg, :where([data-theme="light"]) .cv-ic svg, :where([data-theme="light"]) .cv-x svg, :where([data-theme="light"]) .cv-dl svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .cv-file, :where([data-theme="light"]) .cv-job { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .cv-file:first-child, :where([data-theme="light"]) .cv-job:first-child { border-top: 0; }
:where([data-theme="light"]) .cv-ic { background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .cv-txt > span { color: var(--muted); }
:where([data-theme="light"]) .cv-job.bad .cv-state { color: #e00b00; }
:where([data-theme="light"]) .cv-bar { background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .cv-bar i { background: var(--ink); }
:where([data-theme="light"]) .cv-x { border: 0; color: var(--muted); background: none; }
:where([data-theme="light"]) .cv-x:hover { background: rgba(0, 0, 0, .058); color: var(--ink); }
:where([data-theme="light"]) a.p-btn { text-decoration: none; }
:where([data-theme="light"]) .cv-label { color: var(--muted); }
:where([data-theme="light"]) .cv-fmts button { border: 0; color: var(--muted); background: rgba(0, 0, 0, .04); box-shadow: var(--lq); }
:where([data-theme="light"]) .cv-fmts button:hover { background: rgba(0, 0, 0, .072); color: var(--ink); }
:where([data-theme="light"]) .cv-fmts button.on { background: var(--ink); color: #ffffff; box-shadow: 0 6px 18px rgba(40, 40, 70, .147), inset 0 1px 0 #ffffff; }
:where([data-theme="light"]) .cv-jobs { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .dl-field { background: rgba(0, 0, 0, .04); box-shadow: var(--lq); }
:where([data-theme="light"]) .dl-field:focus-within { background: rgba(0, 0, 0, .058); box-shadow: var(--lq), 0 0 0 2px rgba(0, 0, 0, .25); }
:where([data-theme="light"]) .dl-field input { border: 0; outline: none; background: none; }
:where([data-theme="light"]) .dl-field input::placeholder { color: rgba(12, 12, 12, .25); }
:where([data-theme="light"]) .st-src .p-btn svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .st-job.ready:hover b { text-decoration: underline; text-decoration-color: rgba(12, 12, 12, .3); }
:where([data-theme="light"]) .cv-x.sure { color: #e00b00; background: rgba(255, 69, 58, .14); }
:where([data-theme="light"]) .st-head .p-back { border: 0; background: none; }
:where([data-theme="light"]) .st-saved { color: var(--muted); }
:where([data-theme="light"]) .st-stage { background: #f3f3f3; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 30px 80px rgba(40, 40, 70, .21); }
:where([data-theme="light"]) .st-box { color: transparent !important; }
:where([data-theme="light"]) .st-wait { background: rgba(0, 0, 0, .6); color: var(--ink); }
:where([data-theme="light"]) .st-drag-tip { color: rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .45); }
:where([data-theme="light"]) .st-pp { border: 0; color: var(--ink); background: rgba(0, 0, 0, .04); box-shadow: var(--lq); }
:where([data-theme="light"]) .st-pp svg { fill: currentColor; stroke: currentColor; }
:where([data-theme="light"]) .st-pp.on .i-pause { fill: none; }
:where([data-theme="light"]) .st-time { color: var(--muted); }
:where([data-theme="light"]) .st-range { background: none; }
:where([data-theme="light"]) .st-range::-webkit-slider-runnable-track { background: rgba(0, 0, 0, .086); }
:where([data-theme="light"]) .st-range::-moz-range-track { background: rgba(0, 0, 0, .086); }
:where([data-theme="light"]) .st-seek::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--ink) var(--p, 0%), rgba(0, 0, 0, .086) var(--p, 0%)); }
:where([data-theme="light"]) .st-range::-webkit-slider-thumb { background: #141414; box-shadow: 0 3px 8px rgba(40, 40, 70, .168); }
:where([data-theme="light"]) .st-range::-moz-range-thumb { border: 0; background: #141414; box-shadow: 0 3px 8px rgba(40, 40, 70, .168); }
:where([data-theme="light"]) .st-pane { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .st-preset { border: 0; color: var(--ink); background: rgba(0, 0, 0, .029); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .st-preset:hover { background: rgba(0, 0, 0, .05); }
:where([data-theme="light"]) .st-preset.on { background: rgba(0, 0, 0, .072); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .12); }
:where([data-theme="light"]) .st-preset > span:last-child { color: var(--muted); }
:where([data-theme="light"]) .st-demo { color: #0c0c0c; background: linear-gradient(160deg, #3b4b5c, #1d2731); -webkit-text-stroke: 3px #ffffff; }
:where([data-theme="light"]) .st-demo-caja { -webkit-text-stroke: 0; }
:where([data-theme="light"]) .st-demo-caja > span { background: rgba(0, 0, 0, .72); }
:where([data-theme="light"]) .st-demo-clasico { -webkit-text-stroke: 2px #ffffff; }
:where([data-theme="light"]) .st-demo-neon .on { text-shadow: 0 0 6px currentColor, 0 0 12px currentColor; }
:where([data-theme="light"]) .st-demo-suave { -webkit-text-stroke: 0; text-shadow: 0 0 4px rgba(40, 40, 70, .378), 0 0 8px rgba(40, 40, 70, .252); }
:where([data-theme="light"]) .st-color { border: 0; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
:where([data-theme="light"]) .st-color.on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 0 0 2px rgba(40, 40, 70, .42), 0 0 0 4px var(--ink); }
:where([data-theme="light"]) .st-seg.now { background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .st-at { border: 0; color: var(--muted); background: rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .st-at:hover { color: var(--ink); background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .st-txt { border: 1px solid transparent; outline: none; color: var(--ink); background: none; }
:where([data-theme="light"]) .st-txt:hover { background: rgba(0, 0, 0, .022); }
:where([data-theme="light"]) .st-txt:focus { border-color: rgba(0, 0, 0, .28); background: rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .st-render { background: rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .st-render.bad { color: #e00b00; }
:where([data-theme="light"]) .st-done svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .st-link { border: 0; background: none; color: var(--muted); text-decoration: underline; text-decoration-color: rgba(12, 12, 12, .25); }
:where([data-theme="light"]) .st-link:hover { color: var(--ink); }
:where([data-theme="light"]) .st-crumbs { color: var(--muted); }
:where([data-theme="light"]) .st-crumbs button { border: 0; background: none; color: var(--muted); }
:where([data-theme="light"]) .st-crumbs button:hover, :where([data-theme="light"]) .st-crumbs button:last-of-type { color: var(--ink); }
:where([data-theme="light"]) .st-crumbs button:hover { background: rgba(0, 0, 0, .05); }
:where([data-theme="light"]) .st-item { border: 0; color: var(--ink); background: none; }
:where([data-theme="light"]) .st-item:hover { background: rgba(0, 0, 0, .05); }
:where([data-theme="light"]) .st-item svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .st-chev svg { color: var(--muted); }
:where([data-theme="light"]) .st-list-wait, :where([data-theme="light"]) .st-list-empty { color: var(--muted); }
:where([data-theme="light"]) .fe { background: rgba(0, 0, 0, .55); }
:where([data-theme="light"]) .fe-bar { border-bottom: 1px solid rgba(0, 0, 0, .056); background: rgba(255, 255, 255, .89); }
:where([data-theme="light"]) .fe-ib { border: 0; color: var(--ink); background: none; }
:where([data-theme="light"]) .fe-ib:hover:not(:disabled) { background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .fe-ib svg, :where([data-theme="light"]) .fe-side .p-btn svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .fe-view canvas { box-shadow: 0 20px 60px rgba(40, 40, 70, .21); }
:where([data-theme="light"]) .fe-badge { background: rgba(0, 0, 0, .6); }
:where([data-theme="light"]) .fe-textin { border: 1px solid rgba(0, 0, 0, .4); outline: none; background: rgba(0, 0, 0, .55); }
:where([data-theme="light"]) .fe-side { border-left: 1px solid rgba(0, 0, 0, .056); background: rgba(255, 255, 255, .89); }
:where([data-theme="light"]) .fe-filter { border: 0; background: none; color: var(--muted); }
:where([data-theme="light"]) .fe-filter canvas { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .fe-filter.on { color: var(--ink); }
:where([data-theme="light"]) .fe-filter.on canvas { box-shadow: 0 0 0 2px rgba(40, 40, 70, .42), 0 0 0 4px var(--ink); }
:where([data-theme="light"]) .fe-chips button { border: 0; color: var(--muted); background: rgba(0, 0, 0, .04); box-shadow: var(--lq); }
:where([data-theme="light"]) .fe-chips button:hover { color: var(--ink); background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .fe-chips button.on { background: var(--ink); color: #ffffff; }
:where([data-theme="light"]) .fe-adj-row:hover { background: rgba(0, 0, 0, .025); }
:where([data-theme="light"]) .fe-adj-head b { color: var(--muted); }
:where([data-theme="light"]) .fe-adj-row.set .fe-adj-head b { color: var(--ink); }
:where([data-theme="light"]) .fe-adj-row.set .fe-adj-head b::after { background: #30d158; }
:where([data-theme="light"]) .fe-adj-head i { color: var(--muted); }
@media (max-width: 860px) {
  :where([data-theme="light"]) .fe-side { border-left: 0; border-top: 1px solid rgba(0, 0, 0, .056); }
}
:where([data-theme="light"]) .ve-src .p-btn svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .ve-thumb { background-color: #fafafa; }
:where([data-theme="light"]) .ve-cut > span { background: rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .ve-font { border: 0; color: var(--ink); background: rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .ve-font:hover { background: rgba(0, 0, 0, .065); }
:where([data-theme="light"]) .ve-font.on { background: rgba(0, 0, 0, .086); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .12); }
:where([data-theme="light"]) .vx { background: #f6f6f7; color: var(--ink); }
:where([data-theme="light"]) .vx.over::after { border: 2px dashed rgba(0, 0, 0, .36); background: rgba(0, 0, 0, .55); }
:where([data-theme="light"]) .vx svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .vx-ib { border: 0; color: var(--ink); background: none; }
:where([data-theme="light"]) .vx-ib:hover:not(:disabled) { background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .vx-tog.on { color: #f4f4f4; background: var(--ink); }
:where([data-theme="light"]) .vx-tog.on:hover { background: #141414; }
:where([data-theme="light"]) .vx-bar { border-bottom: 1px solid rgba(0, 0, 0, .056); background: #f8f8f8; }
:where([data-theme="light"]) .vx-name { border: 1px solid transparent; outline: none; background: none; color: var(--ink); }
:where([data-theme="light"]) .vx-name:hover { background: rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .vx-name:focus { border-color: rgba(0, 0, 0, .24); background: rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .vx-saved { color: var(--muted); }
:where([data-theme="light"]) .vx-export.busy { background: rgba(0, 0, 0, .101); color: var(--ink); }
:where([data-theme="light"]) .vx-sheet-head b { color: var(--muted); }
:where([data-theme="light"]) .vx-lib, :where([data-theme="light"]) .vx-insp { background: #f8f8f8; }
:where([data-theme="light"]) .vx-lib { border-right: 1px solid rgba(0, 0, 0, .056); }
:where([data-theme="light"]) .vx-insp { border-left: 1px solid rgba(0, 0, 0, .056); }
:where([data-theme="light"]) .vx-up { background: rgba(0, 0, 0, .036); color: var(--muted); }
:where([data-theme="light"]) .vx-mc { background: rgba(0, 0, 0, .029); }
:where([data-theme="light"]) .vx-mc:hover { background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .vx-mth { background: #fcfcfc 0 0 / auto 100% no-repeat; color: var(--muted); }
:where([data-theme="light"]) .vx-mth.wave { background-color: #10261a; }
:where([data-theme="light"]) .vx-mth b { background: rgba(0, 0, 0, .7); color: #fff; }
:where([data-theme="light"]) .vx-mc-audio .vx-mth { color: #00e057; }
:where([data-theme="light"]) .vx-madd, :where([data-theme="light"]) .vx-mdel { border: 0; color: var(--ink); background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .vx-madd:hover, :where([data-theme="light"]) .vx-mdel:hover { background: rgba(0, 0, 0, .115); }
:where([data-theme="light"]) .vx-mdel { color: var(--muted); }
:where([data-theme="light"]) .vx-mdel.sure { color: #e00b00; background: rgba(255, 69, 58, .14); }
:where([data-theme="light"]) .vx-hint { color: var(--muted); }
:where([data-theme="light"]) .vx-view { background: #f4f4f6; }
:where([data-theme="light"]) .vx-stagebox:fullscreen { background: #f3f3f3; }
:where([data-theme="light"]) .vx-stage { background: #f3f3f3; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 20px 60px rgba(40, 40, 70, .252); }
:where([data-theme="light"]) .vx-black { background: #f3f3f3; }
:where([data-theme="light"]) .vx-guides i { background: rgba(0, 0, 0, .202); }
:where([data-theme="light"]) .vx-guides .safe { border: 1.5px dashed rgba(255, 225, 53, .7); }
:where([data-theme="light"]) .vx-selbox { border: 1.5px solid #000000; box-shadow: 0 0 0 1px rgba(40, 40, 70, .21); }
:where([data-theme="light"]) .vx-selbox .h { background: #141414; box-shadow: 0 1px 4px rgba(40, 40, 70, .252); }
:where([data-theme="light"]) .vx-empty { color: var(--muted); }
:where([data-theme="light"]) .vx-transport { border-top: 1px solid rgba(0, 0, 0, .048); background: #f8f8f8; }
:where([data-theme="light"]) .vx-tc { color: var(--ink); }
:where([data-theme="light"]) .vx-total { color: var(--muted); }
:where([data-theme="light"]) .vx-pp { border: 0; color: #f4f4f4; background: var(--ink); }
:where([data-theme="light"]) .vx-pp:hover { background: #141414; }
:where([data-theme="light"]) .vx-pp svg { fill: currentColor; }
:where([data-theme="light"]) .vx-pp.on .i-pause { fill: none; }
:where([data-theme="light"]) .vx-sec + .vx-sec { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .vx-sec h3 { color: var(--muted); }
:where([data-theme="light"]) .vx-slh b { color: var(--ink); }
:where([data-theme="light"]) .vx-rst { border: 0; color: var(--muted); background: none; }
:where([data-theme="light"]) .vx-rst:hover { color: var(--ink); background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .vx-chip { border: 0; color: var(--muted); background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .vx-chip:hover { color: var(--ink); background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .vx-chip.on { color: #f4f4f4; background: var(--ink); }
:where([data-theme="light"]) .vx-ratio { border: 1.5px solid currentColor; }
:where([data-theme="light"]) .vx-size > span { color: var(--muted); }
:where([data-theme="light"]) .vx-color { border: 0; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
:where([data-theme="light"]) .vx-del { color: #e00b00; }
:where([data-theme="light"]) .vx-none { color: var(--muted); }
:where([data-theme="light"]) .vx-tlbox { border-top: 1px solid rgba(0, 0, 0, .064); background: #f8f8f8; }
:where([data-theme="light"]) .vx-tools { border-bottom: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .vx-tb { border: 0; color: var(--ink); background: none; }
:where([data-theme="light"]) .vx-tb:hover:not(:disabled) { background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .vx-tb.busy { color: #00e057; }
:where([data-theme="light"]) .vx-tsep { background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .vx-zoom { accent-color: #0c0c0c; }
:where([data-theme="light"]) .vx-ruler { box-shadow: inset 76px 0 0 rgba(0, 0, 0, .4); background: #f8f8f8; border-bottom: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .vx-ruler span { border-left: 1px solid rgba(0, 0, 0, .16); color: var(--muted); }
:where([data-theme="light"]) .vx-lane { border-bottom: 1px solid rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .vx-lane-video { background: rgba(0, 0, 0, .018); }
:where([data-theme="light"]) .vx-lh { color: var(--muted); background: #f9f9fa; border-right: 1px solid rgba(0, 0, 0, .056); }
:where([data-theme="light"]) .vx-lempty { color: rgba(12, 12, 12, .22); }
:where([data-theme="light"]) .vx-it { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .vx-it.on { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12); }
:where([data-theme="light"]) .vx-clip { background: linear-gradient(135deg, #f3f3f4, #fcfcfc); }
:where([data-theme="light"]) .vx-cwave { background-color: rgba(0, 0, 0, .45); }
:where([data-theme="light"]) .vx-it > .vx-lbl { background: rgba(0, 0, 0, .65); color: #fff; }
:where([data-theme="light"]) .vx-txt { background: rgba(255, 225, 53, .2); box-shadow: inset 0 0 0 1px rgba(255, 225, 53, .45); color: #e0b600; }
:where([data-theme="light"]) .vx-txt.on { box-shadow: inset 0 0 0 2px #ffe135; }
:where([data-theme="light"]) .vx-imgit { background: #3a2550 0 0 / auto 100% repeat-x; box-shadow: inset 0 0 0 1px rgba(177, 140, 255, .55); color: #fff; }
:where([data-theme="light"]) .vx-imgit > span { text-shadow: 0 1px 3px rgba(40, 40, 70, .42); }
:where([data-theme="light"]) .vx-imgit.on { box-shadow: inset 0 0 0 2px #b18cff; }
:where([data-theme="light"]) .vx-aud { background-color: rgba(61, 255, 138, .12); box-shadow: inset 0 0 0 1px rgba(61, 255, 138, .4); color: #00e057; }
:where([data-theme="light"]) .vx-aud.on { box-shadow: inset 0 0 0 2px #3dff8a; }
:where([data-theme="light"]) .vx-h { background: #141414; }
:where([data-theme="light"]) .vx-h i { background: #f3f3f3; }
:where([data-theme="light"]) .vx-txt .vx-h { background: #ffe135; }
:where([data-theme="light"]) .vx-imgit .vx-h { background: #b18cff; }
:where([data-theme="light"]) .vx-aud .vx-h { background: #3dff8a; }
:where([data-theme="light"]) .vx-join { border: 0; color: var(--muted); background: #fafafa; box-shadow: 0 0 0 1px rgba(0, 0, 0, .09), 0 2px 8px rgba(40, 40, 70, .21); }
:where([data-theme="light"]) .vx-join:hover { color: var(--ink); }
:where([data-theme="light"]) .vx-join.on { color: #f4f4f4; background: var(--ink); }
:where([data-theme="light"]) .vx-join svg { fill: currentColor; stroke: none; }
:where([data-theme="light"]) .vx-ins { background: #4da3ff; box-shadow: 0 0 10px #4da3ff; }
:where([data-theme="light"]) .vx-snapline { background: #ffe135; }
:where([data-theme="light"]) .vx-head { background: #141414; box-shadow: 0 0 6px rgba(40, 40, 70, .294); }
:where([data-theme="light"]) .vx-head i { background: #141414; }
:where([data-theme="light"]) .vx-exp-sum > * { background: rgba(0, 0, 0, .05); }
:where([data-theme="light"]) .vx-dlg .st-done svg, :where([data-theme="light"]) .vx-export svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .vx-rec { background: rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .vx-recdot { background: rgba(0, 0, 0, .18); }
:where([data-theme="light"]) .vx-recdot.on { background: #ff453a; }
:where([data-theme="light"]) .vx-keys dt { background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .vx-keys dd { color: var(--muted); }
@media (max-width: 899px) {
  :where([data-theme="light"]) .vx-sheet { border: 0; border-top: 1px solid rgba(0, 0, 0, .096); box-shadow: 0 -20px 60px rgba(40, 40, 70, .252); }
  :where([data-theme="light"]) .vx-ruler { box-shadow: inset 34px 0 0 rgba(0, 0, 0, .4); }
}
:where([data-theme="light"]) .vx-split { background: #f8f8f8; }
:where([data-theme="light"]) .vx-split::after { background: rgba(0, 0, 0, .101); }
:where([data-theme="light"]) .vx-split.h { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .vx-split:hover, :where([data-theme="light"]) .vx-split.on { background: rgba(77, 163, 255, .25); }
:where([data-theme="light"]) .vx-split:hover::after, :where([data-theme="light"]) .vx-split.on::after { background: #4da3ff; }
:where([data-theme="light"]) .vx-tlbox { border-top: 0; }
:where([data-theme="light"]) .vx-menus button { border: 0; color: rgba(11, 11, 13, .82); background: none; }
:where([data-theme="light"]) .vx-menus button:hover, :where([data-theme="light"]) .vx-menus button.on { color: var(--ink); background: rgba(0, 0, 0, .065); }
:where([data-theme="light"]) .vx-mpanel { background: rgba(255, 255, 255, .94); box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 18px 50px rgba(40, 40, 70, .252); }
:where([data-theme="light"]) .vx-mpanel hr { border: 0; background: rgba(0, 0, 0, .065); }
:where([data-theme="light"]) .vx-mhead { color: var(--muted); }
:where([data-theme="light"]) .vx-mi { border: 0; color: var(--ink); background: none; }
:where([data-theme="light"]) .vx-mi:hover:not(:disabled), :where([data-theme="light"]) .vx-mi.open { background: #2f6fd6; }
:where([data-theme="light"]) .vx-mi.bad { color: #e00b00; }
:where([data-theme="light"]) .vx-mi.bad:hover:not(:disabled) { color: #fff; background: #c9372c; }
:where([data-theme="light"]) .vx-mck { color: var(--ink); }
:where([data-theme="light"]) .vx-mk { color: rgba(11, 11, 13, .5); }
:where([data-theme="light"]) .vx-mi:hover .vx-mk, :where([data-theme="light"]) .vx-mi.open .vx-mk { color: rgba(12, 12, 12, .85); }
:where([data-theme="light"]) .vx-vbar { border-bottom: 1px solid rgba(0, 0, 0, .04); }
:where([data-theme="light"]) .vx-fmtbtn { border: 0; color: var(--ink); background: rgba(0, 0, 0, .05); }
:where([data-theme="light"]) .vx-fmtbtn:hover { background: rgba(0, 0, 0, .086); }
:where([data-theme="light"]) .vx-fmtbtn > span:not(.vx-ratio) { color: var(--muted); }
:where([data-theme="light"]) .vx-vinfo { color: var(--muted); }
:where([data-theme="light"]) .vx-vg { background: #ff4fd8; box-shadow: 0 0 6px rgba(255, 79, 216, .8); }
:where([data-theme="light"]) .vx-pop { background: rgba(255, 255, 255, .94); box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 18px 50px rgba(40, 40, 70, .252); }
:where([data-theme="light"]) .vx-pophead { color: var(--muted); }
:where([data-theme="light"]) .vx-fmtcard { border: 0; color: var(--ink); background: rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .vx-fmtcard:hover { background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .vx-fmtcard.on { background: rgba(77, 163, 255, .22); box-shadow: inset 0 0 0 1.5px #4da3ff; }
:where([data-theme="light"]) .vx-fmtcard > span:last-child { color: var(--muted); }
:where([data-theme="light"]) .vx-fmtcustom { border-top: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .vx-lane-sub { background: rgba(77, 163, 255, .04); }
:where([data-theme="light"]) .vx-subit { background: rgba(77, 163, 255, .2); box-shadow: inset 0 0 0 1px rgba(77, 163, 255, .5); color: #0065e0; }
:where([data-theme="light"]) .vx-subit.on { box-shadow: inset 0 0 0 2px #4da3ff; }
:where([data-theme="light"]) .vx-subit .vx-h { background: #4da3ff; }
:where([data-theme="light"]) .vx-subp { border: 0; color: var(--muted); background: rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .vx-subp:hover { background: rgba(0, 0, 0, .065); }
:where([data-theme="light"]) .vx-subp.on { color: var(--ink); background: rgba(0, 0, 0, .072); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .12); }
:where([data-theme="light"]) .vx-subdemo { background-color: #f9f9f9 !important; }
:where([data-theme="light"]) .vx-subdemo { background-image: linear-gradient(135deg, #e9e9eb, #fbfbfc); }
:where([data-theme="light"]) .vx-done svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .orb { background: url(brand/halo.png?v=2) center / contain no-repeat; background-image: image-set(url(brand/halo.avif?v=2) type("image/avif"), url(brand/halo.png?v=2) type("image/png")); }
@media (prefers-reduced-motion: reduce) {
  :where([data-theme="light"]) .orb { background-image: url(brand/halo.png?v=2); }
}
:where([data-theme="light"]) .p-app-cloud .orb { background: none; }
:where([data-theme="light"]) .p-go .orb { filter: invert(1); }
:where([data-theme="light"]) .dc-row { border-top: 1px solid rgba(0, 0, 0, .056); }
:where([data-theme="light"]) .dc-k { color: var(--muted); }
:where([data-theme="light"]) .dc-table th { color: var(--muted); }
:where([data-theme="light"]) .dc-table td { border-top: 1px solid rgba(0, 0, 0, .056); }
:where([data-theme="light"]) .dc-ic svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .dc-prev-media { background: #f3f3f3; }
:where([data-theme="light"]) .dc-prev-audio { background: none; }
:where([data-theme="light"]) .dc-prev-text { background: rgba(0, 0, 0, .029); color: var(--muted); }
:where([data-theme="light"]) .dc-prev-ic { background: rgba(0, 0, 0, .05); color: var(--muted); }
:where([data-theme="light"]) .dc-prev-cap span { color: var(--muted); }
:where([data-theme="light"]) .dc-h { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .056); }
:where([data-theme="light"]) .dc-h-pic { background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) span.dc-h-pic { color: var(--muted); }
:where([data-theme="light"]) .dc-h-txt span { color: var(--muted); }
:where([data-theme="light"]) .dc-h-res { color: var(--muted); }
:where([data-theme="light"]) .dc-h-res.ok .mono { color: var(--ink); }
:where([data-theme="light"]) .p-pilot { border: 0; color: rgba(11, 11, 13, .42); background: linear-gradient(155deg, rgba(0, 0, 0, .043) 0%, rgba(0, 0, 0, .013) 40%, rgba(0, 0, 0, .006) 60%, rgba(0, 0, 0, .025) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .49), inset 0 0 0 .5px rgba(0, 0, 0, .054), 0 10px 24px rgba(40, 40, 70, .176); }
:where([data-theme="light"]) .p-pilot::before { background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .1) 28%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .06) 78%, rgba(255, 255, 255, .28)); }
:where([data-theme="light"]) .p-pilot::after { background: radial-gradient(60px circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 50%, transparent 75%); }
:where([data-theme="light"]) .p-pilot:focus-visible { outline: 2px solid rgba(12, 12, 12, .5); }
:where([data-theme="light"]) .p-pilot-ic { fill: none; stroke: currentColor; }
:where([data-theme="light"]) img.p-pilot-ic { filter: grayscale(1); }
:where([data-theme="light"]) .p-pilot-led { background: rgba(0, 0, 0, .094); }
:where([data-theme="light"]) .p-pilot.on { color: #0b0b0d; background: linear-gradient(155deg, rgba(0, 0, 0, .094) 0%, rgba(0, 0, 0, .029) 40%, rgba(0, 0, 0, .016) 60%, rgba(0, 0, 0, .054) 100%); box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(255, 255, 255, .28), inset 0 0 0 .5px rgba(0, 0, 0, .108),
    inset 0 0 20px rgba(255, 255, 255, .158), 0 14px 30px rgba(40, 40, 70, .21); }
:where([data-theme="light"]) .p-pilot.on img.p-pilot-ic { filter: none; }
:where([data-theme="light"]) .p-pilot.on .p-pilot-led { background: #34d160; box-shadow: 0 0 6px rgba(52, 209, 96, .85); }
:where([data-theme="light"]) .p-pilot-name { color: var(--muted); }
:where([data-theme="light"]) .p-pilot-wrap:has(.p-pilot.on) .p-pilot-name { color: var(--ink); }
:where([data-theme="light"]) .p-pilot-note { color: var(--muted); }
:where([data-theme="light"]) .p-person-txt .p-gb { border: 0; color: var(--ink); background: rgba(0, 0, 0, .04); box-shadow: var(--lq); }
:where([data-theme="light"]) .p-person-txt .p-gb:hover { background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .p-person-txt .p-gb svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .p-person-txt .p-halo-mode.free { box-shadow: var(--lq), inset 0 0 0 1px rgba(48, 209, 88, .45); }
:where([data-theme="light"]) .p-person-txt .p-studio-role.none { color: #e08700; box-shadow: var(--lq), inset 0 0 0 1px rgba(255, 179, 64, .45); }
:where([data-theme="light"]) .p-toast { background: linear-gradient(160deg, rgba(0, 0, 0, .115), rgba(0, 0, 0, .043) 60%, rgba(0, 0, 0, .072)); box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(255, 255, 255, .21), inset 0 0 0 .5px rgba(0, 0, 0, .12), 0 14px 34px rgba(40, 40, 70, .21); }
:where([data-theme="light"]) .p-toast::before { background: #34d160; box-shadow: 0 0 5px rgba(52, 209, 96, .8); }
:where([data-theme="light"]) .p-toast.bad::before { background: #ff5a4f; box-shadow: 0 0 5px rgba(255, 90, 79, .8); }
:where([data-theme="light"]) .p-toast.bad { color: var(--ink); }
:where([data-theme="light"]) .ms-model { text-decoration: none; color: inherit; }
:where([data-theme="light"]) .ms-model:hover { background: #fbfbfb; }
:where([data-theme="light"]) .ms-model-sub { color: var(--muted); }
:where([data-theme="light"]) .ms-add { border: 1.5px dashed rgba(0, 0, 0, .128); background: transparent; color: var(--muted); }
:where([data-theme="light"]) .ms-add svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .ms-add:hover { color: var(--ink); border-color: rgba(0, 0, 0, .32); background: rgba(0, 0, 0, .022); }
:where([data-theme="light"]) .ms-av { background: rgba(0, 0, 0, .058); color: var(--ink); }
:where([data-theme="light"]) .ms-badge { background: var(--ink); color: #ffffff; }
:where([data-theme="light"]) .ms-app { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .ms-side { border-right: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .ms-side-head { border-bottom: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .ms-chat { text-decoration: none; color: inherit; }
:where([data-theme="light"]) .ms-chat:hover { background: rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .ms-chat.on { background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .ms-chat-top time { color: var(--muted); }
:where([data-theme="light"]) .ms-chat-last { color: var(--muted); }
:where([data-theme="light"]) .ms-chat-txt.has-draft .ms-chat-last { color: var(--ink); }
:where([data-theme="light"]) .ms-empty { color: var(--muted); }
:where([data-theme="light"]) .ms-conv-empty { color: var(--muted); }
:where([data-theme="light"]) .ms-conv-empty svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .ms-conv-head { border-bottom: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .ms-sub { color: var(--muted); }
:where([data-theme="light"]) .ms-day { color: var(--muted); background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .ms-b.in { background: #fdfdfd; border: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .ms-b.out { background: #21212b; color: #f2f2f4; }
:where([data-theme="light"]) .ms-b-who { color: var(--muted); }
:where([data-theme="light"]) .ms-b-reply { border-left: 2px solid currentColor; }
:where([data-theme="light"]) .ms-tick svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .ms-b.failed { outline: 1.5px solid #e00d00; }
:where([data-theme="light"]) .ms-media { background: #f9f9f9; }
:where([data-theme="light"]) .ms-photo { background: #f9f9f9; }
:where([data-theme="light"]) .ms-photo .ms-media { filter: blur(26px) saturate(1.2) brightness(.92); }
:where([data-theme="light"]) .ms-photo.rev .ms-media { filter: none; }
:where([data-theme="light"]) .ms-veil { background: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, .06), rgba(0, 0, 0, .46)); }
:where([data-theme="light"]) .ms-veil-chip { color: #fff; background: rgba(0, 0, 0, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 8px 24px rgba(40, 40, 70, .147); }
:where([data-theme="light"]) .ms-veil-chip svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .ms-photo::after { background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .34) 50%, transparent 62%); }
:where([data-theme="light"]) .ms-big { border: 0; color: #fff; background: rgba(0, 0, 0, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 6px 16px rgba(40, 40, 70, .168); }
:where([data-theme="light"]) .ms-big svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .ms-media.sticker { background: none; }
:where([data-theme="light"]) .ms-play { background: rgba(0, 0, 0, .55); color: #fff; }
:where([data-theme="light"]) .ms-play svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .ms-dur { color: #fff; background: rgba(0, 0, 0, .55); }
:where([data-theme="light"]) .ms-file { color: inherit; text-decoration: none; }
:where([data-theme="light"]) .ms-file-ic { background: rgba(0, 0, 0, .144); }
:where([data-theme="light"]) .ms-file-ic svg, :where([data-theme="light"]) .ms-draft-ic svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .ms-up { background: rgba(0, 0, 0, .216); }
:where([data-theme="light"]) .ms-up i { background: #30d158; }
:where([data-theme="light"]) .ms-b.out .ms-up i { background: #f7f7f8; }
:where([data-theme="light"]) .ms-draft, :where([data-theme="light"]) .ms-halo { background: rgba(0, 0, 0, .032); }
:where([data-theme="light"]) .ms-draft-ic { background: rgba(0, 0, 0, .05); }
:where([data-theme="light"]) .ms-opt { border: 0; color: var(--ink); background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .ms-opt:hover { background: rgba(0, 0, 0, .079); }
:where([data-theme="light"]) .ms-opt-offer { color: #24bd4c; background: rgba(48, 209, 88, .14); }
:where([data-theme="light"]) .ms-offer { background: rgba(48, 209, 88, .14); color: #24bd4c; }
:where([data-theme="light"]) .ms-offer .cv-x { color: inherit; }
:where([data-theme="light"]) .ms-aviso { background: rgba(255, 159, 10, .15); color: #e08700; }
:where([data-theme="light"]) .ms-tray-item img, :where([data-theme="light"]) .ms-tray-item video, :where([data-theme="light"]) .ms-tray-item .ms-file-ic { background: #f9f9f9; }
:where([data-theme="light"]) .ms-tray-item small { color: var(--muted); }
:where([data-theme="light"]) .ms-tray-item .cv-x { background: rgba(0, 0, 0, .65); color: #fff; }
:where([data-theme="light"]) .ms-comp { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .ms-input { border: 1px solid rgba(0, 0, 0, .08); outline: none; color: var(--ink); background: rgba(0, 0, 0, .04); }
:where([data-theme="light"]) .ms-input:focus { border-color: rgba(0, 0, 0, .4); }
:where([data-theme="light"]) .ms-send { border: 0; background: var(--ink); color: #ffffff; }
:where([data-theme="light"]) .ms-send svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .ms-drop-hint { border: 2px dashed rgba(0, 0, 0, .4); background: rgba(0, 0, 0, .75); }
:where([data-theme="light"]) .ms-light { border: 0; background: rgba(0, 0, 0, .9); color: #fff; }
:where([data-theme="light"]) .ms-light .cv-x { background: rgba(0, 0, 0, .086); color: #0c0c0c; }
:where([data-theme="light"]) .ms-pick-row { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .ms-pick-row:first-child { border-top: 0; }
:where([data-theme="light"]) .ms-gen-opt { background: rgba(0, 0, 0, .032); }
:where([data-theme="light"]) .ms-msgs, :where([data-theme="light"]) .ms-list, :where([data-theme="light"]) .ms-draft, :where([data-theme="light"]) .ms-halo, :where([data-theme="light"]) .ms-pick-list { scrollbar-color: rgba(12, 12, 12, .18) transparent; }
:where([data-theme="light"]) .ms-info { border-left: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .ms-info-head { border-bottom: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .ms-info-tabs { border-bottom: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .ms-info-empty { color: var(--muted); }
:where([data-theme="light"]) .ms-info-body { scrollbar-color: rgba(12, 12, 12, .18) transparent; }
:where([data-theme="light"]) .ms-info-empty-line { color: var(--muted); }
:where([data-theme="light"]) .ms-spent { background: rgba(0, 0, 0, .032); }
:where([data-theme="light"]) .ms-spent span { color: var(--muted); }
:where([data-theme="light"]) .ms-spent small { color: var(--muted); }
:where([data-theme="light"]) .ms-saved { color: var(--muted); }
:where([data-theme="light"]) .ms-ppv-sum { color: var(--muted); }
:where([data-theme="light"]) .ms-ppv { border: 1px solid transparent; }
:where([data-theme="light"]) .ms-ppv.no { background: rgba(255, 69, 58, .1); border-color: rgba(255, 69, 58, .28); }
:where([data-theme="light"]) .ms-ppv.yes { background: rgba(48, 209, 88, .1); border-color: rgba(48, 209, 88, .28); }
:where([data-theme="light"]) .ms-ppv-txt span { color: var(--muted); }
:where([data-theme="light"]) .ms-ppv.no .ms-ppv-pill { background: rgba(255, 69, 58, .16); color: #e00b00; }
:where([data-theme="light"]) .ms-ppv.yes .ms-ppv-pill { background: rgba(48, 209, 88, .14); color: #24bd4c; }
:where([data-theme="light"]) .ms-ppv-rm:hover { color: #e00b00; background: rgba(255, 69, 58, .14); }
:where([data-theme="light"]) .ms-sel::after { border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted); }
:where([data-theme="light"]) .ms .lq > .lens { background: rgba(0, 0, 0, .144); }
:where([data-theme="light"]) .ms .lq.lq-drag > .lens { background: rgba(0, 0, 0, .194); }
:where([data-theme="light"]) .ms-hmenu { background: #fdfdfd; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 24px 60px rgba(40, 40, 70, .252); }
:where([data-theme="light"]) .ms-hm-lab { color: var(--muted); }
:where([data-theme="light"]) .ms-hm-note { color: var(--muted); }
:where([data-theme="light"]) .ms-auto { background: rgba(255, 255, 255, .428); border: 1.5px solid rgba(0, 0, 0, .112); }
:where([data-theme="light"]) .ms-auto .ai-orb { color: #0b0b0d; }
:where([data-theme="light"]) .ms-auto.on { background: rgba(48, 209, 88, .14); border-color: #30d158; }
:where([data-theme="light"]) .ms-auto:focus-visible { outline: 2px solid rgba(12, 12, 12, .7); }
:where([data-theme="light"]) .ms-sample { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .ms-sample:first-child { border-top: 0; }
:where([data-theme="light"]) .ms-sample span { color: var(--muted); }
:where([data-theme="light"]) .ms-acct span:not(.p-pill) { color: var(--muted); }
:where([data-theme="light"]) .ms-steps { color: var(--muted); }
:where([data-theme="light"]) .ms-chat-set-row { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .ms-chat-set-row:first-child { border-top: 0; }
@media (max-width: 760px) {
  :where([data-theme="light"]) body.ms-in-chat .ms-conv { background: #f3f3f3; }
}
:where([data-theme="light"]) .ms-who-btn { border: 0; background: none; color: inherit; }
@media (max-width: 1099px) {
  :where([data-theme="light"]) .ms-who-btn:hover { background: rgba(0, 0, 0, .036); }
  :where([data-theme="light"]) .ms-who-btn:active { background: rgba(0, 0, 0, .05); }
  :where([data-theme="light"]) .ms-who-btn:focus-visible { outline: 2px solid rgba(12, 12, 12, .7); }
  :where([data-theme="light"]) .ms-sub:empty + .ms-who-hint { color: var(--muted); }
  :where([data-theme="light"]) .ms-info { border: 0; border-top: 1px solid rgba(0, 0, 0, .096); background: #f9f9fa; box-shadow: 0 -24px 70px rgba(40, 40, 70, .294); }
  :where([data-theme="light"]) .ms-grab { background: rgba(0, 0, 0, .158); }
  :where([data-theme="light"]) .ms-info-head { border-bottom: 0; }
  :where([data-theme="light"]) .ms-fan-x { background: rgba(0, 0, 0, .05); color: var(--ink); }
  :where([data-theme="light"]) .ms-fan-scrim { background: rgba(0, 0, 0, .6); }
}
@media (max-width: 760px) {
  :where([data-theme="light"]) body.ms-in-chat .ms-conv { background: radial-gradient(120% 60% at 88% -12%, #fbfbfb 0%, #fbfbfb 42%, rgba(255, 255, 255, .12) 78%), #f8f8f9; }
  :where([data-theme="light"]) .ms-conv-head { background: rgba(0, 0, 0, .025); border-bottom-color: rgba(0, 0, 0, .064); }
  :where([data-theme="light"]) .ms-conv-head .ms-back { color: var(--ink); }
  :where([data-theme="light"]) .ms-day { background: rgba(0, 0, 0, .065); color: #3a3a3e; }
  :where([data-theme="light"]) .ms-b.in { background: #fafafa; border-color: rgba(0, 0, 0, .072); }
  :where([data-theme="light"]) .ms-comp { background: rgba(0, 0, 0, .025); border-top-color: rgba(0, 0, 0, .064); }
  :where([data-theme="light"]) .ms-comp .ms-clip { color: #28282c; }
  :where([data-theme="light"]) .ms-input { background: rgba(0, 0, 0, .054); border-color: rgba(0, 0, 0, .096); }
}
:where([data-theme="light"]) .ms-b-rp { border: 0; color: var(--muted); background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .ms-b-rp svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .ms-b-rp:hover, :where([data-theme="light"]) .ms-b-rp:focus-visible { color: var(--ink); }
:where([data-theme="light"]) .ms-replybar { background: rgba(0, 0, 0, .04); }
:where([data-theme="light"]) .ms-replybar-ic { color: var(--muted); }
:where([data-theme="light"]) .ms-replybar-ic svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .ms-replybar-txt { border-left: 2px solid rgba(0, 0, 0, .4); }
:where([data-theme="light"]) .ms-replybar-txt span { color: var(--muted); }
:where([data-theme="light"]) .ms-split { color: var(--muted); background: rgba(0, 0, 0, .025); }
:where([data-theme="light"]) .ms-opt-photo { color: #28282c; background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .ms-ph { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .ms-ph:first-child { border-top: 0; }
:where([data-theme="light"]) .ms-ph img { background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .ms-ph-meta { color: var(--muted); }
:where([data-theme="light"]) .ms-ph.no-descr .ms-ph-meta { color: #e08700; }
:where([data-theme="light"]) .g-play-body { background: #f3f3f3; }
:where([data-theme="light"]) .g-bar .ic { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .g-name { color: var(--ink); }
:where([data-theme="light"]) .g-frame { border: 0; background: #f3f3f3; }
:where([data-theme="light"]) .gc-dlg { background: rgba(255, 255, 255, .94); }
:where([data-theme="light"]) .gc-sw { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .gc-sec { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .sd-nav { background: rgba(0, 0, 0, .04); box-shadow: var(--lq); }
:where([data-theme="light"]) .sd-nav a { color: var(--muted); text-decoration: none; }
:where([data-theme="light"]) .sd-nav a:hover { color: var(--ink); }
:where([data-theme="light"]) .sd-nav a.on { color: var(--ink); }
:where([data-theme="light"]) .sd-h1 { background: linear-gradient(140deg, #191920 0 39%, #212125 40.38%, #333336 41.75%, #4d4d52 43.12%, #6d6d72 44.5%, #cacacc 45.88%, #dadadd 47.25%, #e5e5e7 48.62%, #e9e9eb 50%, #e5e5e7 51.38%, #dadadd 52.75%, #cacacc 54.12%, #6d6d72 55.5%, #4d4d52 56.88%, #333336 58.25%, #212125 59.62%, #191920 61% 100%) 0 0 / 400% 100%; color: transparent; }
:where([data-theme="light"]) .sd-h1 .sd-dot { background: #191920; }
:where([data-theme="light"]) .sd-lead { color: var(--muted); }
:where([data-theme="light"]) .sd-cta .p-btn svg { fill: currentColor; stroke: none; }
:where([data-theme="light"]) .sd-arrow { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sd-cta .p-btn .sd-arrow { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sd-ticks { color: var(--muted); }
:where([data-theme="light"]) .sd-ticks svg, :where([data-theme="light"]) .sd-incl svg { fill: none; stroke: #29b84c; }
:where([data-theme="light"]) .sd-film { background: #f3f3f3; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 50px 140px rgba(40, 40, 70, .294); }
:where([data-theme="light"]) .sd-film video { background: #f3f3f3; }
:where([data-theme="light"]) .sd-film:has(.sd-film-wall)::after { background: radial-gradient(55% 65% at 50% 50%, rgba(0, 0, 0, .55), rgba(0, 0, 0, .94) 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
:where([data-theme="light"]) .sd-film-cap { color: #0c0c0c; }
:where([data-theme="light"]) .sd-film-cap .p-chip { color: rgba(12, 12, 12, .75); background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .sd-film-play { color: #ffffff; background: #141414; box-shadow: 0 0 0 10px rgba(0, 0, 0, .05), 0 20px 50px rgba(40, 40, 70, .21); }
:where([data-theme="light"]) .sd-film-play svg { fill: currentColor; }
:where([data-theme="light"]) .sd-phone { --ph-ink: #0c0c0c; --ph-bezel: #ffffff; --ph-key: linear-gradient(90deg, #dcdcdf, #b5b5ba 60%, #d5d5d8); --ph-rim: linear-gradient(145deg, #d7d7da 0%, #f3f3f4 22%, #fcfcfd 50%, #ededee 78%, #fcfcfc 100%); --ph-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 0 1px 1px #ffffff, 0 0 0 1px rgba(40, 40, 70, .294), 0 40px 90px rgba(40, 40, 70, .315); --ph-chip: rgba(12, 12, 12, .16); --ph-top: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); --ph-bot: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .62)); --ph-track: rgba(12, 12, 12, .28); --ph-btn-ink: #ffffff; --ph-hud: rgba(255, 255, 255, .55); --ph-like: #e00011; border: 0; background: var(--ph-rim); box-shadow: var(--ph-shadow); color: var(--ph-ink); }
:where([data-theme="light"]) .sd-phone::before { background: var(--ph-bezel); }
:where([data-theme="light"]) .sd-screen { background: var(--ph-bezel); }
:where([data-theme="light"]) .sd-island { background: var(--ph-bezel); }
:where([data-theme="light"]) .sd-keys::before, :where([data-theme="light"]) .sd-keys::after { background: var(--ph-key); }
:where([data-theme="light"]) .sd-keys::before { box-shadow: 0 13cqw 0 0 rgba(40, 40, 70, .42); }
:where([data-theme="light"]) .sd-ui { color: var(--ph-ink); }
:where([data-theme="light"]) .sd-ui::before { background: var(--ph-top); }
:where([data-theme="light"]) .sd-ui::after { background: var(--ph-bot); }
:where([data-theme="light"]) .sd-ui .sd-ui-ln { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sd-ui-sys svg { fill: currentColor; }
:where([data-theme="light"]) .sd-ui-bat { background: var(--ph-ink); box-shadow: 0 0 0 .35cqw var(--ph-bezel), 0 0 0 .7cqw var(--ph-track); }
:where([data-theme="light"]) .sd-ui-round { background: var(--ph-chip); }
:where([data-theme="light"]) .sd-ui-like::after { box-shadow: 0 0 0 .5cqw var(--ph-like); }
:where([data-theme="light"]) .sd-ui-yt .sd-ui-like::after { box-shadow: 0 0 0 .5cqw var(--ph-ink); }
:where([data-theme="light"]) .sd-ui-like.liked .sd-ui-ln { fill: currentColor; }
:where([data-theme="light"]) .sd-ui-ig .sd-ui-like.liked svg { color: var(--ph-like); }
:where([data-theme="light"]) .sd-big { color: var(--ph-ink); }
:where([data-theme="light"]) .sd-big svg { fill: currentColor; filter: drop-shadow(0 1cqw 3cqw rgba(40, 40, 70, .147)); }
:where([data-theme="light"]) .sd-big-yt::before { box-shadow: 0 0 0 .8cqw var(--ph-ink); }
:where([data-theme="light"]) .sd-ui-disc { background: var(--ph-rim); box-shadow: 0 0 0 .5cqw var(--ph-ink); }
:where([data-theme="light"]) .sd-ui-av { color: var(--ph-btn-ink); background: var(--ph-ink); }
:where([data-theme="light"]) .sd-ui-follow { box-shadow: inset 0 0 0 .3cqw var(--ph-ink); }
:where([data-theme="light"]) .sd-ui-yt .sd-ui-follow { color: var(--ph-btn-ink); background: var(--ph-ink); box-shadow: none; }
:where([data-theme="light"]) .sd-ui-bar { background: var(--ph-track); }
:where([data-theme="light"]) .sd-ui-bar i { background: var(--ph-ink); }
:where([data-theme="light"]) .sd-strip { background: rgba(0, 0, 0, .058); border: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .sd-strip > div { background: #f8f8f9; }
:where([data-theme="light"]) .sd-strip span { color: var(--muted); }
:where([data-theme="light"]) .sd-kicker { color: var(--muted); }
:where([data-theme="light"]) .sd-head p { color: var(--muted); }
:where([data-theme="light"]) .sd-vol { background: rgba(0, 0, 0, .04); box-shadow: var(--lq); }
:where([data-theme="light"]) .sd-vol svg { fill: none; stroke: currentColor; color: var(--muted); }
:where([data-theme="light"]) .sd-auto { border: 0; color: var(--muted); background: rgba(0, 0, 0, .04); box-shadow: var(--lq); }
:where([data-theme="light"]) .sd-auto:hover { background: rgba(0, 0, 0, .072); color: var(--ink); }
:where([data-theme="light"]) .sd-auto svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sd-auto .sd-i-play { fill: currentColor; stroke: none; }
:where([data-theme="light"]) .sd-vol input { background: none; }
:where([data-theme="light"]) .sd-vol input::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--ink) var(--v), rgba(0, 0, 0, .115) var(--v)); }
:where([data-theme="light"]) .sd-vol input::-moz-range-track { background: rgba(0, 0, 0, .115); }
:where([data-theme="light"]) .sd-vol input::-moz-range-progress { background: var(--ink); }
:where([data-theme="light"]) .sd-vol input::-webkit-slider-thumb { background: var(--ink); box-shadow: 0 2px 8px rgba(40, 40, 70, .21); }
:where([data-theme="light"]) .sd-vol input::-moz-range-thumb { border: 0; background: var(--ink); box-shadow: 0 2px 8px rgba(40, 40, 70, .21); }
:where([data-theme="light"]) .sd-clip .sd-phone { --ph-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 0 1px 1px #ffffff, 0 0 0 1px rgba(40, 40, 70, .294), 0 24px 60px rgba(40, 40, 70, .252); }
:where([data-theme="light"]) .sd-hud { color: var(--ph-ink); background: var(--ph-hud); }
:where([data-theme="light"]) .sd-hud svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sd-vbar { background: var(--ph-track); box-shadow: 0 .6cqw 2cqw rgba(40, 40, 70, .105); }
:where([data-theme="light"]) .sd-vbar b { background: var(--ph-ink); }
:where([data-theme="light"]) .sd-play.on { --ph-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 0 1px 1px #ffffff, 0 0 0 2px rgba(0, 0, 0, .25), 0 24px 60px rgba(40, 40, 70, .252); }
:where([data-theme="light"]) .sd-flow { border-bottom: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .sd-fl { border-top: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .sd-fl::before { background: linear-gradient(90deg, var(--ink), rgba(255, 255, 255, 0) 80%); }
:where([data-theme="light"]) .sd-fl-n { color: transparent; -webkit-text-stroke: 1.5px rgba(12, 12, 12, .22); background: linear-gradient(180deg, #141414 10%, #75757b 100%) no-repeat 0 100% / 100% 0%; }
:where([data-theme="light"]) .sd-fl.on .sd-fl-n { -webkit-text-stroke-color: rgba(12, 12, 12, 0); }
:where([data-theme="light"]) .sd-fl-txt p { color: var(--muted); }
:where([data-theme="light"]) .sd-dm-idea span { color: var(--muted); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .084); }
:where([data-theme="light"]) .sd-dm-idea .pick { color: #ffffff; background: var(--ink); box-shadow: none; }
:where([data-theme="light"]) .sd-dm-idea .pick svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sd-dm-guion p { color: var(--ink); }
:where([data-theme="light"]) .sd-dm-guion i { color: var(--muted); }
:where([data-theme="light"]) .sd-caret { background: var(--ink); }
:where([data-theme="light"]) .sd-wave-bars i { background: rgba(0, 0, 0, .144); }
:where([data-theme="light"]) .sd-fl.on .sd-wave-bars i:nth-child(-n+9) { background: var(--ink); }
:where([data-theme="light"]) .sd-dm-voz p { color: var(--muted); }
:where([data-theme="light"]) .sd-dm-voz p b { color: #ffffff; background: var(--ink); }
:where([data-theme="light"]) .sd-dm-pub p { border-bottom: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .sd-dm-pub p:last-child { border-bottom: 0; }
:where([data-theme="light"]) .sd-dm-pub span { color: var(--muted); }
:where([data-theme="light"]) .sd-dm-pub svg { fill: none; stroke: #29b84c; }
:where([data-theme="light"]) .sd-step-ic { background: rgba(0, 0, 0, .043); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .49); }
:where([data-theme="light"]) .sd-step-ic svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sd-who h3 { color: var(--ink); }
:where([data-theme="light"]) .sd-who p { color: var(--muted); }
:where([data-theme="light"]) .sd-mod + .sd-mod { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .sd-mod summary:hover, :where([data-theme="light"]) .sd-q summary:hover { background: rgba(0, 0, 0, .025); }
:where([data-theme="light"]) .sd-mod-n { background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .sd-mod-txt span { color: var(--muted); }
:where([data-theme="light"]) .sd-chev { fill: none; stroke: var(--muted); }
:where([data-theme="light"]) .sd-mod-body { color: var(--muted); }
:where([data-theme="light"]) .sd-plan { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .sd-plan.top { border-color: rgba(0, 0, 0, .208); background: radial-gradient(120% 50% at 50% 0%, rgba(0, 0, 0, .058), rgba(0, 0, 0, 0) 70%), #f8f8f9; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .49), 0 40px 100px rgba(40, 40, 70, .231); }
:where([data-theme="light"]) .sd-plan-n { color: var(--muted); }
:where([data-theme="light"]) .sd-plan-desc { color: var(--muted); }
:where([data-theme="light"]) .sd-count { background: rgba(255, 159, 10, .1); }
:where([data-theme="light"]) .sd-count span { color: #e08700; }
:where([data-theme="light"]) .sd-count b { color: var(--ink); }
:where([data-theme="light"]) .sd-incl-more { color: var(--muted); }
:where([data-theme="light"]) .sd-price.p-dialog { background: radial-gradient(120% 60% at 50% 0%, rgba(0, 0, 0, .05), rgba(0, 0, 0, 0) 70%), #f8f8f9; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .49), inset 0 0 0 1px rgba(0, 0, 0, .048), 0 40px 120px rgba(40, 40, 70, .336); }
:where([data-theme="light"]) .sd-price::backdrop { background: rgba(0, 0, 0, .72); }
:where([data-theme="light"]) .sd-pbox { background: rgba(0, 0, 0, .025); border: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .sd-pfan .sd-phone { filter: drop-shadow(0 10px 18px rgba(40, 40, 70, .231)); }
:where([data-theme="light"]) .sd-was s { color: var(--muted); }
:where([data-theme="light"]) .sd-off { color: #24bd4c; background: rgba(48, 209, 88, .14); }
:where([data-theme="light"]) .sd-amount-side i + i { color: var(--muted); }
:where([data-theme="light"]) .sd-save { color: #24bd4c; }
:where([data-theme="light"]) .sd-once { color: var(--muted); }
:where([data-theme="light"]) .sd-safe { color: var(--muted); }
:where([data-theme="light"]) .sd-safe svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sd-q { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .sd-q p { color: var(--muted); }
:where([data-theme="light"]) .sd-foot { border-top: 1px solid rgba(0, 0, 0, .048); color: var(--muted); }
:where([data-theme="light"]) .sd-foot a { color: var(--muted); text-decoration: none; }
:where([data-theme="light"]) .sd-foot a:hover { color: var(--ink); }
:where([data-theme="light"]) .sd-dock { background: rgba(255, 255, 255, .78); box-shadow: var(--float); }
:where([data-theme="light"]) .sd-drop span { color: #ffffff; }
:where([data-theme="light"]) .sd-buy-err { color: #e01200; }
:where([data-theme="light"]) .sd-msg-card { background: #f8f8f9; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .49), inset 0 0 0 1px rgba(0, 0, 0, .048), 0 40px 120px rgba(40, 40, 70, .336); }
:where([data-theme="light"]) .sd-msg-card p { color: var(--muted); }
:where([data-theme="light"]) .sd-msg-card p b { color: var(--ink); }
:where([data-theme="light"]) .sd-msg-ico { color: var(--ink); background: rgba(0, 0, 0, .05); }
:where([data-theme="light"]) .sd-msg-ico.ok { color: #24bd4c; background: rgba(48, 209, 88, .14); }
:where([data-theme="light"]) .sd-msg-ico svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sd-agree { color: var(--muted); }
:where([data-theme="light"]) .sd-agree input { background: rgba(0, 0, 0, .04); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
:where([data-theme="light"]) .sd-agree input::after { border: solid #ffffff; }
:where([data-theme="light"]) .sd-agree input:checked { background: var(--ink); box-shadow: none; }
:where([data-theme="light"]) .sd-agree input:focus-visible { outline: 2px solid rgba(12, 12, 12, .7); }
:where([data-theme="light"]) .sd-agree a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(12, 12, 12, .3); }
:where([data-theme="light"]) .sd-agree.need { color: #e08700; }
:where([data-theme="light"]) .sd-agree.need input { box-shadow: inset 0 0 0 1px #ffb340; }
:where([data-theme="light"]) .sd-claude { border-left: 1px solid rgba(0, 0, 0, .08); }
:where([data-theme="light"]) .sd-pluma { background: url("studio/pluma-claude.webp") 0 0 / 100% auto no-repeat; }
:where([data-theme="light"]) .sd-legal-nav a { color: var(--muted); text-decoration: none; background: rgba(0, 0, 0, .04); }
:where([data-theme="light"]) .sd-legal-nav a:hover { color: var(--ink); background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .sd-legal-nav a.on { color: #ffffff; background: var(--ink); }
:where([data-theme="light"]) .sd-legal-date { color: var(--muted); }
:where([data-theme="light"]) .sd-legal-txt { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .064); color: #28282c; }
:where([data-theme="light"]) .sd-legal-txt h2 { color: var(--ink); }
:where([data-theme="light"]) .sd-legal-txt b { color: var(--ink); }
:where([data-theme="light"]) .sd-legal-txt a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(12, 12, 12, .3); }
:where([data-theme="light"]) .sd-legal-ref { color: #0c0c0c; text-decoration: underline; text-decoration-color: rgba(12, 12, 12, .6); }
:where([data-theme="light"]) .sd-legal-dl dt { color: var(--muted); }
:where([data-theme="light"]) .sd-legal-dl dd { color: var(--muted); }
:where([data-theme="light"]) .sd-legal-quote { background: rgba(0, 0, 0, .025); color: var(--ink); }
@media (max-width: 520px) {
  :where([data-theme="light"]) .sd-film-play { box-shadow: 0 0 0 7px rgba(0, 0, 0, .05), 0 14px 34px rgba(40, 40, 70, .21); }
}
:where([data-theme="light"]) .hi { background: #f8f8f9; }
:where([data-theme="light"]) .hi-tog svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .hi-app { background: #f8f8f9; }
:where([data-theme="light"]) .hi-side { border-right: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .hi-grip::after { background: transparent; }
:where([data-theme="light"]) .hi-grip:hover::after, :where([data-theme="light"]) .hi-grip.on::after { background: rgba(0, 0, 0, .252); }
:where([data-theme="light"]) .hi-files { border-left: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .hi-ptabs svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .hi-pane-title { color: var(--muted); }
:where([data-theme="light"]) .hi-chg-head { color: var(--muted); }
:where([data-theme="light"]) .hi-chg { border: 0; background: none; color: inherit; }
:where([data-theme="light"]) .hi-chg:hover:not(:disabled) { background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .hi-chg.new .hi-chg-tag { background: rgba(48, 209, 88, .14); color: #24bd4c; }
:where([data-theme="light"]) .hi-chg.mod .hi-chg-tag { background: rgba(255, 159, 10, .15); color: #e08700; }
:where([data-theme="light"]) .hi-chg.del .hi-chg-tag { background: rgba(255, 69, 58, .16); color: #e01000; }
:where([data-theme="light"]) .hi-chg.del .hi-chg-path { text-decoration: line-through; color: var(--muted); }
:where([data-theme="light"]) .hi-term { background: #f7f7f8; color: #1a1a1f; }
:where([data-theme="light"]) .hi-term-in { border-top: 1px solid rgba(0, 0, 0, .048); background: #f7f7f8; }
:where([data-theme="light"]) .hi-term-in > span { color: #24bd4c; }
:where([data-theme="light"]) .hi-term-in input { border: 0; outline: none; background: none; color: var(--ink); }
:where([data-theme="light"]) .hi-web-bar { border-bottom: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .hi-web-path { border: 1px solid rgba(0, 0, 0, .08); outline: none; background: rgba(0, 0, 0, .029); color: var(--ink); }
:where([data-theme="light"]) .hi-web-path:focus { border-color: rgba(0, 0, 0, .36); }
:where([data-theme="light"]) .hi-web-frame { border: 0; background: #141414; }
:where([data-theme="light"]) .hi-col-head { border-bottom: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .hi-col-head .p-btn svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .hi-list, :where([data-theme="light"]) .hi-msgs, :where([data-theme="light"]) .hi-tree, :where([data-theme="light"]) .hi-ed-body, :where([data-theme="light"]) .hi-pick { scrollbar-color: rgba(12, 12, 12, .18) transparent; }
:where([data-theme="light"]) .hi-grp-tog { border: 0; background: none; color: var(--ink); }
:where([data-theme="light"]) .hi-grp-tog svg { fill: none; stroke: var(--muted); }
:where([data-theme="light"]) .hi-grp-tog:focus-visible { outline: 2px solid rgba(12, 12, 12, .7); }
:where([data-theme="light"]) .hi-chat:hover { background: rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .hi-chat.on { background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .hi-chat:focus-visible { outline: 2px solid rgba(12, 12, 12, .7); }
:where([data-theme="light"]) .hi-chat-top time { color: var(--muted); }
:where([data-theme="light"]) .hi-chat-bot span { color: var(--muted); }
:where([data-theme="light"]) .hi-dot { background: #30d158; }
:where([data-theme="light"]) .hi-dot.work { background: #0a84ff; }
:where([data-theme="light"]) .hi-dot.ask { background: #ff9f0a; }
:where([data-theme="light"]) .hi-dot.error { background: #ff453a; }
:where([data-theme="light"]) .hi-dot.done { background: #30d158; }
:where([data-theme="light"]) .hi-empty { color: var(--muted); }
:where([data-theme="light"]) .hi-budget { border-top: 1px solid rgba(0, 0, 0, .048); color: var(--muted); }
:where([data-theme="light"]) .hi-foot { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .hi-foot .hi-budget { border-top: 0; }
:where([data-theme="light"]) .hi-foot .cv-x svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .hi-set-row { background: rgba(0, 0, 0, .032); }
:where([data-theme="light"]) .hi-set-txt small { color: var(--muted); }
:where([data-theme="light"]) .hi-pick-note { color: var(--muted); }
:where([data-theme="light"]) .hi-who > span { color: var(--muted); }
:where([data-theme="light"]) .hi-net { color: var(--muted); }
:where([data-theme="light"]) .hi-net .p-switch i { box-shadow: 0 2px 5px rgba(40, 40, 70, .147); }
:where([data-theme="light"]) .hi-live { color: var(--muted); }
:where([data-theme="light"]) .hi-live-say { color: var(--ink); }
:where([data-theme="light"]) .hi-say { color: var(--muted); }
:where([data-theme="light"]) .hi-ic svg { fill: none; stroke: var(--ink); }
:where([data-theme="light"]) .hi-live-txt { background: linear-gradient(100deg, var(--muted) 38%, var(--ink) 50%, var(--muted) 62%) 100% 0 / 250% 100% no-repeat; -webkit-text-fill-color: transparent; color: transparent; }
:where([data-theme="light"]) .hi-live small { color: var(--muted); }
:where([data-theme="light"]) .k-think circle { fill: var(--ink); stroke: none; }
:where([data-theme="light"]) .hi-b code { background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .hi-b.in { background: #fdfdfd; border: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .hi-b.out { background: #f5f5f6; color: var(--ink); border: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .hi-code { background: #f7f7f8; border: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .hi-note { color: var(--muted); }
:where([data-theme="light"]) .hi-note.bad { color: #e00b00; }
:where([data-theme="light"]) .hi-tool { background: rgba(0, 0, 0, .025); border: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .hi-tool-head { border: 0; background: none; color: inherit; }
:where([data-theme="light"]) .hi-tool-head code { color: var(--muted); }
:where([data-theme="light"]) .hi-tool-head small { color: var(--muted); }
:where([data-theme="light"]) .hi-tool-head svg { fill: none; stroke: var(--muted); }
:where([data-theme="light"]) .hi-tool.ok .hi-st::before { background: #30d158; }
:where([data-theme="light"]) .hi-tool.bad .hi-st::before { background: #ff453a; }
:where([data-theme="light"]) .hi-tool.run .hi-st::before { border: 1.5px solid currentColor; border-right-color: transparent; }
:where([data-theme="light"]) .hi-out { border-top: 1px solid rgba(0, 0, 0, .048); background: #f7f7f8; color: #1b1b1f; }
:where([data-theme="light"]) .hi-conv-empty { color: var(--muted); }
:where([data-theme="light"]) .hi-conv-empty svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .hi-hint { color: var(--muted); }
:where([data-theme="light"]) .hi-ex { border: 0; background: rgba(0, 0, 0, .04); box-shadow: var(--lq); color: var(--ink); }
:where([data-theme="light"]) .hi-ex:hover { background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .hi-ask { background: rgba(255, 159, 10, .1); border: 1px solid rgba(255, 179, 64, .25); }
:where([data-theme="light"]) .hi-pub { background: rgba(0, 0, 0, .125); }
:where([data-theme="light"]) .hi-pub-row.new .hi-chg-tag { background: rgba(48, 209, 88, .14); color: #24bd4c; }
:where([data-theme="light"]) .hi-pub-row.mod .hi-chg-tag { background: rgba(255, 159, 10, .15); color: #e08700; }
:where([data-theme="light"]) .hi-pub-from { color: var(--muted); }
:where([data-theme="light"]) .hi-pub-size { color: var(--muted); }
:where([data-theme="light"]) .hi-ask .hi-pub-note { color: var(--muted); }
:where([data-theme="light"]) .hi-comp { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .hi-folder { border: 0; background: rgba(0, 0, 0, .04); color: var(--ink); }
:where([data-theme="light"]) .hi-folder:hover { background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .hi-folder:focus-visible { outline: 2px solid rgba(12, 12, 12, .7); }
:where([data-theme="light"]) .hi-folder.none { color: #e08800; background: rgba(255, 159, 10, .1); }
:where([data-theme="light"]) .hi-folder svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .hi-mitem { background: rgba(0, 0, 0, .029); }
:where([data-theme="light"]) .hi-mitem:not(.off):hover { background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .hi-mitem.on { background: rgba(0, 0, 0, .086); }
:where([data-theme="light"]) .hi-mrow { border: 0; background: none; color: inherit; }
:where([data-theme="light"]) .hi-mrow:focus-visible { outline: 2px solid rgba(12, 12, 12, .7); }
:where([data-theme="light"]) .hi-mhead { color: var(--muted); }
:where([data-theme="light"]) .hi-minfo { border: 1px solid rgba(0, 0, 0, .16); background: rgba(0, 0, 0, .058); color: var(--ink); }
:where([data-theme="light"]) .hi-minfo:hover { background: rgba(0, 0, 0, .13); }
:where([data-theme="light"]) .hi-minfo:focus-visible { outline: 2px solid rgba(12, 12, 12, .7); }
:where([data-theme="light"]) .hi-mback { background: rgba(0, 0, 0, .05); color: var(--ink); }
:where([data-theme="light"]) .hi-mback svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .hi-mswitch-btn { border: 0; background: none; color: var(--ink); }
:where([data-theme="light"]) .hi-mswitch-btn:hover, :where([data-theme="light"]) .hi-mswitch-btn[aria-expanded="true"] { background: rgba(0, 0, 0, .05); }
:where([data-theme="light"]) .hi-mswitch-btn svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .hi-mswitch { background: #fdfdfd; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 24px 60px rgba(40, 40, 70, .252); }
:where([data-theme="light"]) .hi-mswitch-row { border: 0; background: none; color: var(--ink); }
:where([data-theme="light"]) .hi-mswitch-row:hover { background: rgba(0, 0, 0, .05); }
:where([data-theme="light"]) .hi-mswitch-row.on { background: rgba(0, 0, 0, .086); }
:where([data-theme="light"]) .hi-mstate { color: var(--muted); }
:where([data-theme="light"]) .hi-mrow small { color: var(--muted); }
:where([data-theme="light"]) .hi-input { border: 1px solid rgba(0, 0, 0, .08); outline: none; color: var(--ink); background: rgba(0, 0, 0, .04); }
:where([data-theme="light"]) .hi-input:focus { border-color: rgba(0, 0, 0, .4); }
:where([data-theme="light"]) .hi-send { border: 0; background: var(--ink); color: #ffffff; }
:where([data-theme="light"]) .hi-send svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .hi-send.stop { background: none; color: var(--ink); }
:where([data-theme="light"]) .hi-send.stop .stop { stroke: none; fill: none; }
:where([data-theme="light"]) .hi-send .stop .track { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .hi-send .stop .ring { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .hi-send .stop rect { fill: currentColor; stroke: none; }
:where([data-theme="light"]) .hi-row { border: 0; background: none; color: inherit; }
:where([data-theme="light"]) .hi-row:hover { background: rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .hi-row.on { background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .hi-row svg { fill: none; stroke: var(--muted); }
:where([data-theme="light"]) .hi-row.dir.open svg { stroke: var(--ink); }
:where([data-theme="light"]) .hi-row small { color: var(--muted); }
:where([data-theme="light"]) .hi-ed-head { border-bottom: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .hi-gut { color: rgba(12, 12, 12, .28); border-right: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .hi-ta { border: 0; outline: none; background: none; color: var(--ink); }
:where([data-theme="light"]) .hi-files-acts { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .hi-pick-row { border: 0; background: none; color: inherit; }
:where([data-theme="light"]) .hi-pick-row:hover { background: rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .hi-pick-row.on { background: rgba(0, 0, 0, .086); box-shadow: inset 0 1px 0 #ffffff; }
:where([data-theme="light"]) .hi-pick-row svg { fill: none; stroke: var(--muted); }
@media (max-width: 1099px) {
  :where([data-theme="light"]) .hi-head { border-bottom: 1px solid rgba(0, 0, 0, .048); }
}
@media (max-width: 760px) {
  :where([data-theme="light"]) .hi-side, :where([data-theme="light"]) .hi-conv, :where([data-theme="light"]) .hi-files { border: 0; }
}
:where([data-theme="light"]) .p-top.p-top-app { border-bottom: 1px solid transparent; }
:where([data-theme="light"]) .p-top-app.stuck { background: rgba(0, 0, 0, .92); border-bottom-color: rgba(0, 0, 0, .056); }
:where([data-theme="light"]) .p-top-back { color: var(--muted); }
:where([data-theme="light"]) .p-top-back:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
:where([data-theme="light"]) .p-top-back svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sa-lead { color: var(--muted); }
:where([data-theme="light"]) .sa-soon { color: var(--muted); }
:where([data-theme="light"]) .sa-tabs svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sa-badge { background: var(--ink); color: #ffffff; }
:where([data-theme="light"]) .sa-chat { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .sa-chat-sub { color: var(--muted); }
:where([data-theme="light"]) .sa .ms-tick.sa-tick-seen { color: #0070e0; }
:where([data-theme="light"]) .sa-tag { color: var(--ink); background: rgba(0, 0, 0, .065); }
:where([data-theme="light"]) .sa .ms-b.out .ms-file-ic { background: rgba(0, 0, 0, .04); }
:where([data-theme="light"]) .sa-bdel { border: 0; color: var(--muted); background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .sa-bdel:hover { color: #e00b00; background: rgba(255, 69, 58, .14); }
:where([data-theme="light"]) .sa-rec { background: rgba(255, 69, 58, .14); color: #e00b00; }
:where([data-theme="light"]) .sa-rec-dot { background: #ff453a; }
:where([data-theme="light"]) .sa-dots i { background: var(--ink); }
:where([data-theme="light"]) .sa-chat-sub.on { color: #24bd4c; }
:where([data-theme="light"]) .sa-chans, :where([data-theme="light"]) .sa-people { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .064); scrollbar-color: rgba(12, 12, 12, .18) transparent; }
:where([data-theme="light"]) .sa-side-title { color: var(--muted); }
:where([data-theme="light"]) .sa-chan { color: var(--muted); text-decoration: none; }
:where([data-theme="light"]) .sa-chan:hover { background: rgba(0, 0, 0, .029); color: var(--ink); }
:where([data-theme="light"]) .sa-chan.on { background: rgba(0, 0, 0, .065); color: var(--ink); }
:where([data-theme="light"]) .sa-chan.new { color: var(--ink); }
:where([data-theme="light"]) .sa-chat-ic { background: rgba(0, 0, 0, .05); }
:where([data-theme="light"]) .sa-dot { background: #30d158; border: 2.5px solid #f2f2f3; }
:where([data-theme="light"]) .sa-g-admin { color: #0b0b0d; }
:where([data-theme="light"]) .sa-g-teacher { color: #24bd4c; }
:where([data-theme="light"]) .sa-g-ultra { color: #e0bb00; }
:where([data-theme="light"]) .sa-g-pro { color: #007be0; }
:where([data-theme="light"]) .sa .ms-b-who.sa-g-admin { color: #0b0b0d; }
:where([data-theme="light"]) .sa .ms-b-who.sa-g-teacher { color: #24bd4c; }
:where([data-theme="light"]) .sa .ms-b-who.sa-g-ultra { color: #e0bb00; }
:where([data-theme="light"]) .sa .ms-b-who.sa-g-pro { color: #007be0; }
@media (max-width: 1100px) {
  :where([data-theme="light"]) .sa-people { background: #fafafb; box-shadow: -20px 0 60px rgba(40, 40, 70, .21); }
  :where([data-theme="light"]) .sa-people-veil.open { background: rgba(0, 0, 0, .5); }
}
:where([data-theme="light"]) .sa-emoji { background: #fdfdfd; border: 1px solid rgba(0, 0, 0, .064); box-shadow: 0 18px 50px rgba(40, 40, 70, .21); scrollbar-color: rgba(12, 12, 12, .18) transparent; }
:where([data-theme="light"]) .sa-emoji-name { color: var(--muted); }
:where([data-theme="light"]) .sa-emoji-grid button { border: 0; background: none; }
:where([data-theme="light"]) .sa-emoji-grid button:hover { background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .sa-emo-btn[aria-expanded="true"] { color: var(--ink); background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .sa-threads { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .064); scrollbar-color: rgba(12, 12, 12, .18) transparent; }
:where([data-theme="light"]) .sa-thread { color: inherit; text-decoration: none; }
:where([data-theme="light"]) .sa-thread:hover { background: rgba(0, 0, 0, .029); }
:where([data-theme="light"]) .sa-thread.on { background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .sa-thread-tier { color: var(--muted); }
:where([data-theme="light"]) .sa-thread-last { color: var(--muted); }
:where([data-theme="light"]) .sa-thread.new .sa-thread-last { color: var(--ink); }
:where([data-theme="light"]) .sa-thread-side time { color: var(--muted); }
:where([data-theme="light"]) .sa-dm-chat > .ms-conv-empty { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .sa-lightbox { border: 0; background: rgba(0, 0, 0, .92); }
:where([data-theme="light"]) .sa-lightbox::backdrop { background: transparent; }
:where([data-theme="light"]) .sa-lb-x { color: #0c0c0c; background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .sa-lb-x svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sa svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sa-sub { color: var(--muted); }
:where([data-theme="light"]) .sa-empty span:last-child { color: var(--muted); }
:where([data-theme="light"]) .sa-empty-ic { background: rgba(0, 0, 0, .05); box-shadow: var(--lq); }
:where([data-theme="light"]) .sa-mnum { color: var(--muted); }
:where([data-theme="light"]) .sa-lesson { border-top: 1px solid rgba(0, 0, 0, .048); color: var(--ink); text-decoration: none; }
:where([data-theme="light"]) .sa-lesson:hover { background: rgba(0, 0, 0, .025); }
:where([data-theme="light"]) .sa-num { color: var(--muted); }
:where([data-theme="light"]) .sa-tick { border: 1px solid rgba(0, 0, 0, .112); }
:where([data-theme="light"]) .sa-lesson.done .sa-tick { border-color: transparent; background: rgba(48, 209, 88, .14); color: #24bd4c; }
:where([data-theme="light"]) .sa-video { background: #f3f3f3; border: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .sa-novideo { color: var(--muted); }
:where([data-theme="light"]) .sa-body { color: #1a1a1d; }
:where([data-theme="light"]) .sa-pub span { color: var(--muted); }
:where([data-theme="light"]) .sa-date { color: var(--muted); }
:where([data-theme="light"]) .sa-link .p-item-txt .sa-link-facts { color: var(--muted); }
:where([data-theme="light"]) .sa-link-preview { color: var(--muted); }
@media (max-width: 520px) {
  :where([data-theme="light"]) .p-top-app .sa-tabs { background: rgba(255, 255, 255, .912); box-shadow: var(--float); }
  :where([data-theme="light"]) .sa-threads { border-bottom: 0; }
  :where([data-theme="light"]) body.sa-inchat .sa-dm-chat .sa-chat { border: 0; }
}
:where([data-theme="light"]) .sa-day { border: 0; color: var(--ink); background: rgba(0, 0, 0, .032); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .036); }
:where([data-theme="light"]) .sa-day:hover { background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .sa-day span { color: var(--muted); }
:where([data-theme="light"]) .sa-day svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sa-day.done { background: rgba(48, 209, 88, .14); color: #24bd4c; box-shadow: none; }
:where([data-theme="light"]) .sa-day.done span { color: rgba(36, 189, 76, .7); }
:where([data-theme="light"]) .sa-day.today { box-shadow: inset 0 0 0 2px var(--ink); }
:where([data-theme="light"]) .sa-day.late::after { background: #ffb340; }
:where([data-theme="light"]) .sa-day.on { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12), 0 0 0 4px rgba(0, 0, 0, .04); }
:where([data-theme="light"]) .sa-day.done.on { box-shadow: inset 0 0 0 2px #5ce07f, 0 0 0 4px rgba(48, 209, 88, .12); }
:where([data-theme="light"]) .sa-cal-legend { color: var(--muted); }
:where([data-theme="light"]) .sa-lg { background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .sa-lg.done { background: #5ce07f; }
:where([data-theme="light"]) .sa-lg.today { background: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
:where([data-theme="light"]) .sa-lg.late { background: #ffb340; }
:where([data-theme="light"]) .sa-ms-day { color: var(--muted); }
:where([data-theme="light"]) .sa-ms.locked h2 { color: var(--muted); }
:where([data-theme="light"]) .sa-ms p { color: #28282c; }
:where([data-theme="light"]) .sa-ms.locked p { color: var(--muted); }
:where([data-theme="light"]) .sa-ms-ok svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sa-reward-card.won { box-shadow: inset 0 0 0 1px rgba(48, 209, 88, .35); }
:where([data-theme="light"]) .sa-reward-txt span { color: var(--muted); }
:where([data-theme="light"]) .sa-gift { background: rgba(0, 0, 0, .05); }
:where([data-theme="light"]) .sa-gift svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sa-gift.open { color: #24bd4c; background: rgba(48, 209, 88, .14); }
:where([data-theme="light"]) .sa-code { border: 1px dashed rgba(92, 224, 127, .55); color: #24bd4c; background: rgba(48, 209, 88, .08); }
:where([data-theme="light"]) .sa-rm-lead { color: var(--muted); }
:where([data-theme="light"]) .sa-rm-ic { background: rgba(0, 0, 0, .05); }
:where([data-theme="light"]) .sa-rm-ic svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sa-check-n { color: var(--muted); }
:where([data-theme="light"]) .sa-check { border: 1.5px solid rgba(0, 0, 0, .176); }
:where([data-theme="light"]) .sa-check.done { border-color: transparent; background: rgba(48, 209, 88, .16); color: #24bd4c; }
:where([data-theme="light"]) .sa-check svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .sa-task.done .p-item-txt b { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(12, 12, 12, .25); }
:where([data-theme="light"]) .sa-task-money:not(.done) { border-top: 0; background: rgba(48, 209, 88, .06); box-shadow: inset 2px 0 0 #30d158; }
:where([data-theme="light"]) .sa-task-money:not(.done) .p-item-txt b { color: var(--ink); }
:where([data-theme="light"]) .sa-howto-n { background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .sa-howto li span:not(.sa-howto-n) { color: var(--muted); }
:where([data-theme="light"]) .sa-earn { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .sa-earn-h { color: var(--muted); }
:where([data-theme="light"]) .sa-earn-r { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .sa-earn-r b { color: #24bd4c; }
:where([data-theme="light"]) .p-tour-welcome { background: rgba(0, 0, 0, .6); }
:where([data-theme="light"]) .p-tour-hello { color: var(--ink); background: rgba(255, 255, 255, .89); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .77), inset 0 0 0 .5px rgba(0, 0, 0, .084), 0 40px 100px rgba(40, 40, 70, .294); }
:where([data-theme="light"]) .p-tour-lead { color: var(--muted); }
:where([data-theme="light"]) .p-tour-point { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .p-tour-point:first-child { border-top: 0; }
:where([data-theme="light"]) .p-tour-point span:not(.p-tour-ic) { color: var(--muted); }
:where([data-theme="light"]) .p-tour-ic { background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .p-tour-ic svg, :where([data-theme="light"]) .p-tour-btn svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .p-tour-check { color: #24bd4c; background: rgba(48, 209, 88, .14); }
:where([data-theme="light"]) .p-tour-check svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .p-tour-hole { box-shadow: 0 0 0 9999px rgba(40, 40, 70, .286), inset 0 0 0 1.5px rgba(0, 0, 0, .12), 0 0 0 6px rgba(0, 0, 0, .03); }
:where([data-theme="light"]) .p-tour-tip-body { color: var(--ink); background: rgba(255, 255, 255, .94); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .77), inset 0 0 0 .5px rgba(0, 0, 0, .084), 0 30px 80px rgba(40, 40, 70, .252); }
:where([data-theme="light"]) .p-tour-tip-body p { color: #28282c; }
:where([data-theme="light"]) .p-tour-dots i { background: rgba(0, 0, 0, .13); }
:where([data-theme="light"]) .p-tour-dots i.seen { background: rgba(0, 0, 0, .324); }
:where([data-theme="light"]) .p-tour-dots i.on { background: var(--ink); }
:where([data-theme="light"]) .p-tour-btn { border: 0; color: var(--ink); background: rgba(0, 0, 0, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .63), inset 0 0 0 .5px rgba(0, 0, 0, .084); }
:where([data-theme="light"]) .p-tour-btn:hover { background: rgba(0, 0, 0, .086); }
:where([data-theme="light"]) .p-notes-n { color: #fff; background: #ff453a; box-shadow: 0 0 0 2px rgba(40, 40, 70, .42); }
:where([data-theme="light"]) .p-notes-item small { color: var(--muted); }
:where([data-theme="light"]) .p-notes-item.new { background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .p-notes-empty { color: var(--muted); }
:where([data-theme="light"]) .p-tour-pend { background: #ffb340; box-shadow: 0 0 0 2px rgba(40, 40, 70, .42); }
:where([data-theme="light"]) .lp-top { border-bottom: 1px solid transparent; }
:where([data-theme="light"]) .lp-top.stuck { background: rgba(0, 0, 0, .92); border-bottom-color: rgba(0, 0, 0, .056); }
:where([data-theme="light"]) .lp-tile { background: linear-gradient(155deg, rgba(0, 0, 0, .061) 0%, rgba(0, 0, 0, .018) 40%, rgba(0, 0, 0, .009) 60%, rgba(0, 0, 0, .036) 100%); box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(255, 255, 255, .28), inset 0 0 0 .5px rgba(0, 0, 0, .096),
    inset 0 0 28px rgba(255, 255, 255, .123), 0 22px 56px rgba(40, 40, 70, .21); }
:where([data-theme="light"]) .lp-tile::after { background: radial-gradient(220px circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 45%, transparent 70%); }
:where([data-theme="light"]) .lp-tile-ic, :where([data-theme="light"]) .lp-halo-orb { background: rgba(0, 0, 0, .05); }
:where([data-theme="light"]) .lp-tile-ic svg, :where([data-theme="light"]) .lp-feat-ic svg, :where([data-theme="light"]) .lp-dm-ic svg, :where([data-theme="light"]) .lp-ix-ic svg, :where([data-theme="light"]) .lp-file-ic svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .lp-tile > span:last-child { color: var(--muted); }
:where([data-theme="light"]) .lp-halo-orb, :where([data-theme="light"]) .lp-feat .lp-feat-orb { background: url(brand/halo.png?v=2) center / 76% no-repeat, rgba(0, 0, 0, .05); background-image: image-set(url(brand/halo.avif?v=2) type("image/avif"), url(brand/halo.png?v=2) type("image/png")); }
:where([data-theme="light"]) .lp-feats { border-bottom: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .lp-feat { border-top: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .lp-feat-n { color: var(--muted); }
:where([data-theme="light"]) .lp-feat-ic { background: rgba(0, 0, 0, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 .5px rgba(0, 0, 0, .084); }
:where([data-theme="light"]) .lp-feat-lead { color: var(--muted); }
:where([data-theme="light"]) .lp-feat-list svg, :where([data-theme="light"]) .lp-ok svg { fill: none; stroke: #29b84c; }
:where([data-theme="light"]) .lp-price { color: var(--muted); }
:where([data-theme="light"]) .lp-price b { color: var(--ink); }
:where([data-theme="light"]) .lp-demo { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .064); box-shadow: 0 40px 110px rgba(40, 40, 70, .252); }
:where([data-theme="light"]) .lp-dm-head { border-bottom: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .lp-dm-ic { background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .lp-dm-row { border-bottom: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .lp-dm-row > span { color: var(--muted); }
:where([data-theme="light"]) .lp-wait { border: 2px solid rgba(0, 0, 0, .128); border-top-color: var(--ink); }
:where([data-theme="light"]) .lp-file-ic { background: rgba(0, 0, 0, .036); color: var(--muted); }
:where([data-theme="light"]) .lp-mod-n { background: rgba(0, 0, 0, .036); color: var(--muted); }
:where([data-theme="light"]) .lp-dm-row > .lp-mod-p { color: #e08700; }
:where([data-theme="light"]) .lp-dm-bar { color: var(--muted); }
:where([data-theme="light"]) .lp-dm-bar > b { color: var(--ink); }
:where([data-theme="light"]) .lp-dm-bar i { background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .lp-dm-bar i b { background: var(--ink); }
:where([data-theme="light"]) .lp-bub.me { background: #21212b; color: #ffffff; }
:where([data-theme="light"]) .lp-bub.halo { background: #fdfdfd; border: 1px solid rgba(0, 0, 0, .056); }
:where([data-theme="light"]) .lp-typing i { background: var(--muted); }
:where([data-theme="light"]) .lp-index { border-bottom: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .lp-ix { border-top: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .lp-ix:hover { background: rgba(0, 0, 0, .018); }
:where([data-theme="light"]) .lp-ix-n { color: var(--muted); }
:where([data-theme="light"]) .lp-ix-ic { background: rgba(0, 0, 0, .043); color: var(--muted); }
:where([data-theme="light"]) .lp-ix:hover .lp-ix-ic { color: var(--ink); background: rgba(0, 0, 0, .072); }
:where([data-theme="light"]) .lp-ix-d { color: var(--muted); }
:where([data-theme="light"]) .lp-field { background: rgba(0, 0, 0, .032); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
:where([data-theme="light"]) .lp-field i { color: var(--muted); }
:where([data-theme="light"]) .lp-field.lp-go { background: var(--ink); color: #ffffff; box-shadow: none; }
:where([data-theme="light"]) .lp-pcol { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .lp-pcol:first-child { border-color: rgba(0, 0, 0, .128); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
:where([data-theme="light"]) .lp-plist dt, :where([data-theme="light"]) .lp-plist dd { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .lp-plist dt:first-of-type, :where([data-theme="light"]) .lp-plist dt:first-of-type + dd { border-top: 0; }
:where([data-theme="light"]) .lp-plist dd { color: var(--muted); }
:where([data-theme="light"]) .lp-end { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .064); }
:where([data-theme="light"]) .lp-end p { color: var(--muted); }
@media (max-width: 520px) {
  :where([data-theme="light"]) .lp-plist dd { border-top: 0; }
}
:where([data-theme="light"]) .p-plan-bar { background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .064); color: var(--muted); }
:where([data-theme="light"]) .p-plan-bar.warn { color: #e08700; background: rgba(255, 159, 10, .08); border-color: rgba(255, 159, 10, .22); }
:where([data-theme="light"]) .p-plan-bar.bad { color: #e01000; background: rgba(255, 69, 58, .08); border-color: rgba(255, 69, 58, .22); }
:where([data-theme="light"]) .p-app-locked .p-app-txt b { color: var(--muted); }
:where([data-theme="light"]) .p-app-locked .p-app-txt span { color: var(--ink); }
:where([data-theme="light"]) .sp-flash { background: rgba(255, 159, 10, .1); color: #e08700; }
:where([data-theme="light"]) .sp-flash.ok { background: rgba(48, 209, 88, .12); color: #24bd4c; }
:where([data-theme="light"]) .sp-now-txt { color: var(--ink); }
:where([data-theme="light"]) .sp-now-sub { color: var(--muted); }
:where([data-theme="light"]) .sp-offer.top { border-color: rgba(0, 0, 0, .176); background: radial-gradient(120% 50% at 50% 0%, rgba(0, 0, 0, .05), rgba(0, 0, 0, 0) 70%), #f8f8f9; }
:where([data-theme="light"]) .sp-offer-txt { color: var(--muted); }
:where([data-theme="light"]) .sp-foot { color: var(--muted); }
:where([data-theme="light"]) .sp-dlg-price { color: var(--ink); }
:where([data-theme="light"]) .sa-plan.warn { border-color: rgba(255, 159, 10, .25); }
:where([data-theme="light"]) .sa-plan.warn .sa-big { color: #e08700; }
:where([data-theme="light"]) .sc-wd { color: var(--muted); }
:where([data-theme="light"]) .sc-cell { border: 0; background: rgba(0, 0, 0, .018); color: var(--ink); }
:where([data-theme="light"]) .sc-cell:hover { background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .sc-cell:focus-visible { outline: 2px solid rgba(12, 12, 12, .7); }
:where([data-theme="light"]) .sc-pad { background: none; }
:where([data-theme="light"]) .sc-cell.today .sc-num { background: var(--ink); color: #ffffff; }
:where([data-theme="light"]) .sc-cell.on { background: rgba(0, 0, 0, .086); box-shadow: inset 0 1px 0 #ffffff; }
:where([data-theme="light"]) .sc-dot { background: var(--muted); }
:where([data-theme="light"]) .sc-dot.group { background: var(--ink); }
:where([data-theme="light"]) .sc-dot.slot { background: #30d158; }
:where([data-theme="light"]) .sc-dot.free { background: none; box-shadow: inset 0 0 0 1.5px #30d158; }
:where([data-theme="light"]) .sc-dot.notice { background: #ffb340; }
:where([data-theme="light"]) .sc-dot.note { background: #75757b; }
:where([data-theme="light"]) .sc-legend { color: var(--muted); }
:where([data-theme="light"]) .sc-ev.sc-group .p-item-ic { background: rgba(0, 0, 0, .086); }
:where([data-theme="light"]) .sc-ev.sc-slot.mine .p-item-ic, :where([data-theme="light"]) .sc-ev.sc-slot.free .p-item-ic { color: #24bd4c; background: rgba(48, 209, 88, .14); }
:where([data-theme="light"]) .sc-ev.sc-notice .p-item-ic { color: #e08700; background: rgba(255, 159, 10, .15); }
:where([data-theme="light"]) .sc-calls { background: rgba(48, 209, 88, .08); border: 1px solid rgba(48, 209, 88, .2); color: #24bd4c; }
:where([data-theme="light"]) .sd-any-wall li { color: rgba(12, 12, 12, .28); background: #f8f8f9; border: 1px solid rgba(0, 0, 0, .056); }
:where([data-theme="light"]) .sd-any-wall.in li { color: rgba(12, 12, 12, .62); }
:where([data-theme="light"]) .sd-any-wall li.now { color: #ffffff; background: var(--ink); border-color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .04); }
:where([data-theme="light"]) .sd-any-wall.in li.now { color: #ffffff; }
:where([data-theme="light"]) .sd-any-wall li.next { background: none; border: 1.5px dashed rgba(0, 0, 0, .24); }
:where([data-theme="light"]) .sd-any-wall.in li.next { color: var(--ink); }
:where([data-theme="light"]) .sd-any-tag { color: var(--muted); }
:where([data-theme="light"]) .sd-any-wall li.now .sd-any-tag { color: rgba(255, 255, 255, .55); }
:where([data-theme="light"]) .sd-any-why li { border-top: 1px solid rgba(0, 0, 0, .08); }
:where([data-theme="light"]) .sd-last-n { color: transparent; -webkit-text-stroke: 1.5px rgba(12, 12, 12, .26); }
:where([data-theme="light"]) .sd-any-why p { color: var(--muted); }
:where([data-theme="light"]) .lg-search svg { color: var(--muted); fill: none; stroke: currentColor; }
:where([data-theme="light"]) .lg-search .p-input::-webkit-search-cancel-button { filter: grayscale(1); }
:where([data-theme="light"]) .lg-cat { border: 0; color: var(--muted); background: rgba(0, 0, 0, .04); }
:where([data-theme="light"]) .lg-cat i { background: rgba(0, 0, 0, .05); color: var(--muted); }
:where([data-theme="light"]) .lg-cat:hover { background: rgba(0, 0, 0, .072); color: var(--ink); }
:where([data-theme="light"]) .lg-cat.on { background: var(--ink); color: #ffffff; box-shadow: 0 6px 18px rgba(40, 40, 70, .147), inset 0 1px 0 #ffffff; }
:where([data-theme="light"]) .lg-cat.on i { background: rgba(0, 0, 0, .05); color: #ffffff; }
:where([data-theme="light"]) .lg-cat:focus-visible, :where([data-theme="light"]) .lg-row:focus-visible { outline: 2px solid rgba(12, 12, 12, .7); }
:where([data-theme="light"]) .lg-new { border: 0; color: var(--ink); background: rgba(255, 255, 255, .912); box-shadow: var(--float); }
:where([data-theme="light"]) .lg-new svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .lg-day { color: var(--muted); }
:where([data-theme="light"]) .lg-row { border: 0; background: none; color: var(--ink); }
:where([data-theme="light"]) .lg-row + .lg-row { box-shadow: 0 -1px 0 rgba(0, 0, 0, .025); }
:where([data-theme="light"]) .lg-row:hover { background: rgba(0, 0, 0, .032); box-shadow: none; }
:where([data-theme="light"]) .lg-row:hover + .lg-row { box-shadow: none; }
:where([data-theme="light"]) .lg-dot { background: #d4d4d5; }
:where([data-theme="light"]) .lg-dot.error { background: #ff453a; box-shadow: 0 0 0 3px rgba(255, 69, 58, .18); }
:where([data-theme="light"]) .lg-dot.warn { background: #ff9f0a; box-shadow: 0 0 0 3px rgba(255, 159, 10, .16); }
:where([data-theme="light"]) .lg-time { color: var(--muted); }
:where([data-theme="light"]) .lg-text { color: rgba(11, 11, 13, .72); }
:where([data-theme="light"]) .lg-row.new .lg-text { color: var(--ink); }
:where([data-theme="light"]) .lg-meta { color: var(--muted); }
:where([data-theme="light"]) .lg-catl { background: rgba(0, 0, 0, .05); }
:where([data-theme="light"]) .lg-n { color: var(--muted); background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .lg-who { color: var(--muted); }
:where([data-theme="light"]) .lg-empty span { color: var(--muted); }
:where([data-theme="light"]) .lg-empty-ic { background: rgba(48, 209, 88, .14); color: #24bd4c; }
:where([data-theme="light"]) .lg-empty-ic svg { fill: none; stroke: currentColor; }
:where([data-theme="light"]) .lg-fact { background: rgba(0, 0, 0, .032); }
:where([data-theme="light"]) .lg-fact span { color: var(--muted); }
:where([data-theme="light"]) .lg-person { background: rgba(0, 0, 0, .032); color: var(--ink); text-decoration: none; }
:where([data-theme="light"]) .lg-person:hover { background: rgba(0, 0, 0, .058); }
:where([data-theme="light"]) .lg-person > span:last-child span { color: var(--muted); }
:where([data-theme="light"]) .lg-trace-top { color: var(--muted); }
:where([data-theme="light"]) .lg-pre { background: #f7f7f8; border: 1px solid rgba(0, 0, 0, .056); color: rgba(11, 11, 13, .85); }
:where([data-theme="light"]) .p-app-badge { color: #fff; background: #ff453a; box-shadow: 0 0 0 2px rgba(40, 40, 70, .21); }
:where([data-theme="light"]) .lg-kpi > span { color: var(--muted); }
:where([data-theme="light"]) .lg-kpi > small { color: var(--muted); }
:where([data-theme="light"]) .lg-kpi.bad > b { color: #e00b00; }
:where([data-theme="light"]) .lg-kpi.warn > b { color: #e08700; }
:where([data-theme="light"]) .lg-ch-head h3, :where([data-theme="light"]) .lg-sub-h { color: var(--muted); }
:where([data-theme="light"]) .lg-ch-head span { color: var(--muted); }
:where([data-theme="light"]) .lg-col-n { color: var(--muted); }
:where([data-theme="light"]) .lg-stack { background: rgba(0, 0, 0, .029); }
:where([data-theme="light"]) .lg-stack i.e { background: #ff453a; }
:where([data-theme="light"]) .lg-stack i.w { background: #ff9f0a; }
:where([data-theme="light"]) .lg-stack i.g { background: rgba(28, 28, 30, .7); }
:where([data-theme="light"]) .lg-col-d { color: var(--muted); }
:where([data-theme="light"]) .lg-legend { color: var(--muted); }
:where([data-theme="light"]) .lg-legend i.e { background: #ff453a; }
:where([data-theme="light"]) .lg-legend i.w { background: #ff9f0a; }
:where([data-theme="light"]) .lg-hrow > b, :where([data-theme="light"]) .lg-top-row > b { color: var(--muted); }
:where([data-theme="light"]) .lg-hb { background: rgba(0, 0, 0, .043); }
:where([data-theme="light"]) .lg-hb i { background: rgba(28, 28, 30, .7); }
:where([data-theme="light"]) .lg-hb i.mix { background: linear-gradient(90deg, #ff453a 0 var(--red), #ff9f0a var(--red) var(--orange), rgba(28, 28, 30, .7) var(--orange) 100%); }
:where([data-theme="light"]) .lg-kv > div + div { border-top: 1px solid rgba(0, 0, 0, .048); }
:where([data-theme="light"]) .lg-kv span, :where([data-theme="light"]) .lg-quota span { color: var(--muted); }
:where([data-theme="light"]) .lg-kv b.warn { color: #e08700; }
:where([data-theme="light"]) .lg-none { color: var(--muted); }