/* =====================================================================
   Capa visual premium para el Studio y los Emotes: un solo lenguaje para botones, deslizadores, interruptores, casillas,
   colores, listas y menús. Va al final de la cascada y solo cambia la apariencia: no toca la estructura ni los estados.
   ===================================================================== */
:is(.st-page, .em-page) {
  --p-line: rgba(255, 255, 255, .08);
  --p-line-hi: rgba(255, 255, 255, .15);
  --p-ease: cubic-bezier(.2, .8, .2, 1);
  --p-inset: inset 0 1px 0 rgba(255, 255, 255, .05);
  --p-ring: 0 0 0 3px rgba(83, 252, 24, .18);
  --p-pop: 0 26px 60px -14px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .45);
  /* superficies: los controles en reposo pasan a un degradado fino con luz arriba */
  --surface-2: linear-gradient(180deg, #1c2326 0%, #161c1f 100%);
  --surface: linear-gradient(180deg, #161c1f 0%, #121719 100%);
  color-scheme: dark;
}
:is(.st-page, .em-page) ::selection { background: rgba(83, 252, 24, .3); }

/* ---------- botones ---------- */
:is(.st-page, .em-page) .btn { font-weight: 700; letter-spacing: -.005em; transition: transform .18s var(--p-ease), box-shadow .2s, background .2s, border-color .2s, color .2s, filter .2s, opacity .15s; }
:is(.st-page, .em-page) .btn:active { transform: translateY(0) scale(.985); }
:is(.st-page, .em-page) .btn-primary {
  background: linear-gradient(180deg, #74ff40 0%, #53fc18 50%, #44e50e 100%); color: #06100a; border-color: rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .14);
}
:is(.st-page, .em-page) .btn-primary:hover:not([disabled]) { background: linear-gradient(180deg, #82ff52 0%, #5fff24 50%, #4cef14 100%); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .14); }
:is(.st-page, .em-page) .btn-primary[disabled] { filter: saturate(.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
:is(.st-page, .em-page) .btn-ghost { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .028)); border-color: var(--p-line-hi); box-shadow: var(--p-inset); }
:is(.st-page, .em-page) .btn-ghost:hover:not([disabled]) { background: linear-gradient(180deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .05)); border-color: rgba(255, 255, 255, .26); transform: translateY(-1px); }
:is(.st-page, .em-page) .btn-ghost[aria-pressed="true"], :is(.st-page, .em-page) .btn-ghost.on { background: linear-gradient(180deg, rgba(83, 252, 24, .2), rgba(83, 252, 24, .1)); border-color: rgba(83, 252, 24, .5); color: var(--green); }
.st-page .st-go { height: 52px; font-size: 16.5px; font-weight: 800; border-radius: 14px; letter-spacing: -.01em; }

/* botones pequeños del editor: misma familia, mismo gesto */
.st-page :is(.st-tool, .st-chip, .st-tgl, .st-proj-b, .st-kbtn, .st-aud-play, .st-cp-copy, .st-step button:not(.st-play)) {
  box-shadow: var(--p-inset);
  transition: transform .16s var(--p-ease), border-color .18s, background .18s, color .18s, box-shadow .18s, opacity .15s;
}
.st-page :is(.st-tool, .st-chip, .st-kbtn):active:not(:disabled) { transform: scale(.97); }
.st-page .st-tool { height: 36px; border-radius: 11px; font-weight: 650; }
.st-page .st-tool.icon { width: 36px; }
.st-page .st-tool svg { opacity: .9; }
.st-page .st-chip { border-radius: 10px; padding: 8px 13px; }
.st-page .st-chip.danger:hover { background: rgba(255, 82, 82, .1); }
.st-page .st-step button:not(.st-play) { width: 36px; height: 36px; }
.st-page .st-step .st-play { width: 44px; height: 44px; background: linear-gradient(180deg, #74ff40, #4ee814); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .16s var(--p-ease), box-shadow .2s; }
.st-page .st-step .st-play:hover { transform: scale(1.05); }
.st-page .st-link { text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .25); transition: color .15s, text-decoration-color .15s; }
.st-page .st-link:hover:not(:disabled) { color: var(--text); text-decoration-color: rgba(255, 255, 255, .6); }

/* ---------- pestañas del panel ---------- */
.st-page .st-ptabs { padding: 4px; gap: 3px; border-radius: 16px; border-color: var(--p-line); background: #090d0f; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55); }
.st-page .st-ptabs button { position: relative; gap: 4px; padding: 8px 0 7px; border-radius: 12px; color: #7c898d; font-size: 11px; font-weight: 700; letter-spacing: .005em; transition: color .18s, background .2s, transform .15s; }
.st-page .st-ptabs button svg { width: 19px; height: 19px; opacity: .9; transition: transform .22s var(--p-ease), filter .2s, color .18s; }
.st-page .st-ptabs button:hover:not(.on) { color: var(--text); background: rgba(255, 255, 255, .045); }
.st-page .st-ptabs button:hover:not(.on) svg { transform: translateY(-1px); }
.st-page .st-ptabs button.on { background: linear-gradient(180deg, rgba(83, 252, 24, .17), rgba(83, 252, 24, .07)); box-shadow: inset 0 0 0 1px rgba(83, 252, 24, .36); color: var(--green); }

/* ---------- tarjetas y títulos ---------- */
.st-page .st-grp, .em-page .em-group { border-color: var(--p-line); background: linear-gradient(180deg, #12181b 0%, #0d1215 100%); box-shadow: var(--p-inset), 0 14px 30px -22px rgba(0, 0, 0, .8); }
.st-page .st-grp { border-radius: 16px; padding: 15px 16px 17px; }
.st-page .st-grp h3, .em-page .em-group h3 { font-size: 11px; letter-spacing: .11em; color: #8a979b; font-weight: 750; }
.st-page .st-sub, .st-page .st-field { color: #98a4a8; }
.st-page .st-hint, .st-page .st-sub-p { color: #7b878b; }
.st-page .st-tip { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; background: linear-gradient(180deg, rgba(83, 252, 24, .08), rgba(83, 252, 24, .035)); border-color: rgba(83, 252, 24, .2); color: #cfd9d3; }
.st-page .st-tip::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 1px; background: var(--green); -webkit-mask: var(--p-i-info) center / contain no-repeat; mask: var(--p-i-info) center / contain no-repeat; }
.st-page { --p-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6v.1'/%3E%3C/svg%3E"); --p-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --p-i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d9a9e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.em-page { --p-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --p-i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d9a9e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

/* ---------- segmentados, mosaicos y listas seleccionables ---------- */
.st-page :is(.st-seg button, .st-lays button, .st-add button, .st-variants button, .st-layer, .st-fxp, .st-flt button, .st-subs, .st-spre button, .st-fxrow) {
  box-shadow: var(--p-inset);
  transition: border-color .18s, background .18s, color .18s, transform .16s var(--p-ease), box-shadow .18s;
}
.st-page .st-seg button, .st-page .st-lays button { border-radius: 11px; }
.st-page :is(.st-seg button, .st-lays button, .st-variants button, .st-layer, .st-flt button, .st-fonts button, .st-spre button).on { border-color: var(--green); background: linear-gradient(180deg, rgba(83, 252, 24, .16), rgba(83, 252, 24, .07)); box-shadow: inset 0 0 0 1px rgba(83, 252, 24, .18); }
.st-page .st-lays button { color: #8b979b; }
.st-page .st-lays button svg rect { transition: fill .18s, opacity .18s; }
.st-page .st-add button { border-radius: 13px; padding: 15px 4px 13px; background: var(--surface-2); }
.st-page .st-add button svg { transition: transform .22s var(--p-ease); }
.st-page .st-add button:hover { border-color: var(--green); transform: translateY(-1px); }
.st-page .st-add button:hover svg { transform: scale(1.1); }
.st-page .st-subs { border-radius: 14px; padding: 13px 15px; }
.st-page .st-subs:hover:not(:disabled) { border-color: var(--green); }
.st-page .st-fxp { border-radius: 13px; }
.st-page .st-layer { border-radius: 11px; }
.st-page .st-layer.on { color: var(--text); }
.st-page .st-fxrow.on { border-color: var(--green); }
.st-page .st-fxedit { border-color: rgba(83, 252, 24, .35); }

/* ---------- campos de texto ---------- */
.st-page :is(.st-field input[type=text], .st-field textarea, .st-load input, .st-emo-q, .st-sl input, .st-proj input:focus),
.em-page :is(.em-load input, .em-pick-q, .em-opts select) { transition: border-color .18s, box-shadow .18s, background .18s; }
.st-page :is(.st-field input[type=text], .st-field textarea, .st-load input, .st-sl input) { background: #090d0f; border-color: var(--p-line-hi); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); border-radius: 11px; }
.st-page :is(.st-field input, .st-field textarea, .st-load input, .st-sl input):hover:not(:focus) { border-color: rgba(255, 255, 255, .26); }
.st-page :is(.st-field input, .st-field textarea, .st-load input, .st-sl input):focus { border-color: rgba(83, 252, 24, .7); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), var(--p-ring); outline: none; }
.st-page ::placeholder, .em-page ::placeholder { color: #5f6b70; }

/* ---------- deslizadores: pista fina con relleno verde y tirador blanco ---------- */
:is(.st-page, .em-page) input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; margin: 0; background: transparent; cursor: pointer; --fill: 0%; accent-color: var(--green); }
:is(.st-page, .em-page) input[type=range]:focus { outline: none; }
:is(.st-page, .em-page) input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--green) 0 var(--fill), rgba(255, 255, 255, .13) var(--fill) 100%); }
:is(.st-page, .em-page) input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .3), 0 0 0 0 rgba(83, 252, 24, .25); transition: box-shadow .18s, transform .16s var(--p-ease); }
:is(.st-page, .em-page) input[type=range]:hover::-webkit-slider-thumb { box-shadow: 0 1px 4px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .3), 0 0 0 5px rgba(255, 255, 255, .16); }
:is(.st-page, .em-page) input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 1px 4px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .3), 0 0 0 7px rgba(255, 255, 255, .2); }
:is(.st-page, .em-page) input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 1px 4px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .3), 0 0 0 5px rgba(83, 252, 24, .4); }
:is(.st-page, .em-page) input[type=range]::-moz-range-track { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .13); }
:is(.st-page, .em-page) input[type=range]::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--green); }
:is(.st-page, .em-page) input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .3); }
:is(.st-page, .em-page) input[type=range]:disabled { opacity: .4; cursor: default; }
.st-page .st-row, .em-page .em-row { font-size: 13.5px; }
.st-page .st-row > span, .em-page .em-row > span { color: #aeb9bc; }
.st-page .st-row b, .em-page .em-row b { color: #8b979b; font-weight: 650; }

/* ---------- interruptores ---------- */
.st-page .st-sw { background: #232b2f; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06); transition: background .22s, box-shadow .22s; }
.st-page .st-sw::after { top: 3px; left: 3px; width: 20px; height: 20px; background: linear-gradient(180deg, #fff, #dfe5e7); box-shadow: 0 2px 5px rgba(0, 0, 0, .5); transition: transform .26s var(--p-ease), background .2s; }
.st-page .st-sw[aria-checked=true] { background: linear-gradient(180deg, #6dff36, #4ae612); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); }
.st-page .st-sw[aria-checked=true]::after { background: #fff; transform: translateX(18px); }
.st-page .st-sw:focus-visible, .em-page .em-switch:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.em-page .em-switch { background: #232b2f; border-color: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55); }
.em-page .em-switch i { top: 2px; background: linear-gradient(180deg, #fff, #dfe5e7); box-shadow: 0 2px 5px rgba(0, 0, 0, .5); }
.em-page .em-switch[aria-checked="true"] { background: linear-gradient(180deg, #6dff36, #4ae612); border-color: rgba(83, 252, 24, .5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); }
.em-page .em-switch[aria-checked="true"] i { background: #fff; }

/* ---------- casillas ---------- */
:is(.st-page, .em-page) input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; width: 19px; height: 19px; margin: 0; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .22); background: #0a0e10; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); cursor: pointer; position: relative; transition: background .16s, border-color .16s, box-shadow .16s, transform .12s; }
:is(.st-page, .em-page) input[type=checkbox]:hover { border-color: rgba(255, 255, 255, .4); }
:is(.st-page, .em-page) input[type=checkbox]:active { transform: scale(.92); }
:is(.st-page, .em-page) input[type=checkbox]:checked { background: linear-gradient(180deg, #6dff36, #4ae612); border-color: rgba(83, 252, 24, .8); }
:is(.st-page, .em-page) input[type=checkbox]:checked::after { content: ''; position: absolute; inset: 2px; background: #06100a; -webkit-mask: var(--p-i-check) center / contain no-repeat; mask: var(--p-i-check) center / contain no-repeat; }
:is(.st-page, .em-page) input[type=checkbox]:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.st-page .st-check { gap: 11px; }

/* ---------- colores ---------- */
.st-page .st-colors { gap: 6px; }
.st-page .st-colors button { flex: none; width: 24px; height: 24px; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 2px 4px rgba(0, 0, 0, .4); transition: transform .16s var(--p-ease), box-shadow .16s; }
.st-page .st-colors button:hover { transform: scale(1.14); }
.st-page .st-colors button.on { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 2.5px #0e1316, 0 0 0 4.5px var(--green); transform: scale(1.04); }
.st-page .st-colors input[type=color] { -webkit-appearance: none; appearance: none; flex: none; width: 26px; height: 26px; padding: 3px; border: 0; border-radius: 50%; cursor: pointer; background: conic-gradient(from 20deg, #ff5c5c, #ffd23f, #53fc18, #38bdf8, #a78bfa, #f472b6, #ff5c5c); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); transition: transform .16s var(--p-ease); }
.st-page .st-colors input[type=color]:hover { transform: scale(1.12); }
.st-page .st-colors input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.st-page .st-colors input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; box-shadow: 0 0 0 2.5px #0e1316; }
.st-page .st-colors input[type=color]::-moz-color-swatch { border: 0; border-radius: 50%; }

/* ---------- tipografías: lista de una columna, cada nombre con su letra ---------- */
.st-page .st-fonts { grid-template-columns: 1fr; gap: 2px; margin: 8px 0 12px; padding: 5px; max-height: 232px; border: 1px solid var(--p-line); border-radius: 13px; background: #090d0f; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); scrollbar-width: thin; scrollbar-color: #2f3a3e transparent; }
.st-page .st-fonts button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; box-shadow: none; font-size: 17px; line-height: 1.15; color: #dfe6e8; }
.st-page .st-fonts button:hover { background: rgba(255, 255, 255, .06); }
.st-page .st-fonts button.on { background: rgba(83, 252, 24, .12); color: var(--green); box-shadow: inset 0 0 0 1px rgba(83, 252, 24, .3); }
.st-page .st-fonts button.on::after { content: ''; flex: none; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--p-i-check) center / contain no-repeat; mask: var(--p-i-check) center / contain no-repeat; }
.st-page .st-fonts::-webkit-scrollbar { width: 8px; } .st-page .st-fonts::-webkit-scrollbar-thumb { background: #2f3a3e; border-radius: 8px; border: 2px solid #090d0f; }
.st-page .st-tsrow { gap: 6px; }
.st-page .st-tsrow button { height: 36px; min-width: 36px; border-radius: 10px; border-color: var(--p-line-hi); box-shadow: var(--p-inset); transition: border-color .16s, background .16s, color .16s; }
.st-page .st-tsrow button:hover:not(:disabled):not(.on) { border-color: rgba(255, 255, 255, .3); }
.st-page .st-tsrow button.on { border-color: var(--green); background: linear-gradient(180deg, rgba(83, 252, 24, .2), rgba(83, 252, 24, .08)); color: var(--green); }

/* ---------- plegables ---------- */
.st-page .st-det, .st-page .st-mu-lib { border-color: var(--p-line-hi); background: rgba(255, 255, 255, .018); border-radius: 13px; box-shadow: var(--p-inset); }
.st-page .st-det > summary { padding: 12px 14px; transition: background .15s, color .15s; border-radius: 13px; }
.st-page .st-det > summary:hover { background: rgba(255, 255, 255, .035); }
.st-page .st-det > summary::after { width: 14px; height: 14px; margin: 0; border: 0; background: var(--p-i-chev) center / contain no-repeat; transform: none; transition: transform .24s var(--p-ease); }
.st-page .st-det[open] > summary::after { transform: rotate(180deg); margin: 0; }
.st-page .st-mu-lib > summary::after { width: 14px; height: 14px; margin: 0; border: 0; background: var(--p-i-chev) center / contain no-repeat; transform: none; transition: transform .24s var(--p-ease); }
.st-page .st-mu-lib[open] > summary::after { transform: rotate(180deg); }

/* ---------- menús y ventanas emergentes: cristal oscuro ---------- */
.st-page :is(.st-menu, .st-pmenu, .st-acct-menu, .st-emo) { background: rgba(15, 20, 23, .94); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-color: var(--p-line-hi); box-shadow: var(--p-pop); border-radius: 16px; }
.st-page .st-ctx { background: rgba(15, 20, 23, .94); border-color: var(--p-line-hi); box-shadow: var(--p-pop); border-radius: 16px; }
.st-page .st-menu > button, .st-page .st-acct-menu button, .st-page .st-ctx button { border-radius: 10px; transition: background .14s, color .14s; }
.st-page .st-menu { animation: pIn .16s var(--p-ease); } .st-page .st-pmenu, .st-page .st-acct-menu, .st-page .st-emo { animation: pIn .16s var(--p-ease); }
@keyframes pIn { from { opacity: 0; transform: translateY(4px) scale(.985); } }
.st-page :is(.st-auth, .st-done, .st-aud) { border-color: var(--p-line-hi); background: linear-gradient(180deg, #151c20, #0d1215); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .8), var(--p-inset); }
.st-page .st-modal { background: rgba(3, 6, 7, .74); }
.st-page .st-toast { border-radius: 16px; background: rgba(18, 24, 27, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--p-pop); border-color: rgba(83, 252, 24, .35); }

/* ---------- tarjetas de clip, origen y proyecto ---------- */
.st-page .st-rc { box-shadow: var(--p-inset); transition: border-color .2s, transform .2s var(--p-ease), box-shadow .2s; }
.st-page .st-rc:hover { box-shadow: none; }
.st-page .st-proj, .st-page .st-origcol, .st-page .st-pfoot { border-color: var(--p-line); box-shadow: var(--p-inset); }
.st-page .st-pfoot { box-shadow: var(--p-inset), 0 -12px 28px rgba(0, 0, 0, .4); }
.st-page .st-viewwrap { border-color: var(--p-line); }
.st-page .st-tlbody { border-color: var(--p-line); border-radius: 15px; box-shadow: var(--p-inset); }

/* ---------- pastillas de calidad y datos secundarios ---------- */
.st-page .st-cp-emo, .st-page .em-lib-mode { border-color: var(--p-line); }

/* ---------- desplazamiento fino en los paneles ---------- */
.st-page :is(.st-pscroll, .st-sidecol, .st-sublist, .st-frm-g, .st-tlbody) { scrollbar-width: thin; scrollbar-color: #2f3a3e transparent; }
.st-page .st-pscroll::-webkit-scrollbar-thumb { background: #2a3438; border: 2px solid transparent; background-clip: padding-box; }
.st-page .st-pscroll::-webkit-scrollbar-thumb:hover { background: #3b484d; background-clip: padding-box; }

/* ---------- Emotes: mismos gestos ---------- */
.em-page .em-tool { border-color: var(--p-line); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8), var(--p-inset); }
.em-page :is(.em-tabs, .em-mode, .em-pick-seg) { border-color: var(--p-line); background: #090d0f; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); border-radius: 15px; }
.em-page .em-tabs button, .em-page .em-mode button, .em-page .em-pick-seg button { border-radius: 11px; transition: background .2s, color .2s, box-shadow .2s; }
.em-page .em-tabs button:hover:not(.on), .em-page .em-mode button:hover:not(.on), .em-page .em-pick-seg button:hover:not(.on) { color: var(--text); background: rgba(255, 255, 255, .045); }
.em-page .em-tabs button.on { background: linear-gradient(180deg, #74ff40, #4ee814); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.em-page .em-load input, .em-page .em-pick-q { background: #090d0f; border-color: var(--p-line-hi); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); }
.em-page .em-load input:focus, .em-page .em-pick-q:focus { border-color: rgba(83, 252, 24, .7); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), var(--p-ring); }
.em-page .em-opts select { -webkit-appearance: none; appearance: none; padding: 10px 32px 10px 12px; border-color: var(--p-line-hi); background: #090d0f var(--p-i-chev) right 10px center / 14px no-repeat; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); font-weight: 600; cursor: pointer; }
.em-page .em-opts select:hover { border-color: rgba(255, 255, 255, .3); }
.em-page .em-opts select:focus { outline: none; border-color: rgba(83, 252, 24, .7); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), var(--p-ring); }
.em-page :is(.em-fxt, .em-el-add button, .em-kbtn) { box-shadow: var(--p-inset); }
.em-page .em-card { border-color: var(--p-line); box-shadow: var(--p-inset); }

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  :is(.st-page, .em-page) * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- menú de fotogramas: cada opción con su icono ---------- */
.st-page .st-menu > button[data-frame] { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; row-gap: 1px; align-items: center; padding: 10px 14px 10px 10px; }
.st-page .st-menu > button[data-frame]::before { content: ''; grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 11px; background: var(--ic) center / 19px no-repeat, rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: background-color .16s, box-shadow .16s; }
.st-page .st-menu > button[data-frame]:hover::before { background-color: rgba(255, 255, 255, .09); }
.st-page .st-menu > button[data-frame=edit] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353fc18' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l8.5 4.6-8.5 4.6L3.5 8.1z'/%3E%3Cpath d='M3.5 12.2l8.5 4.6 8.5-4.6' opacity='.7'/%3E%3Cpath d='M3.5 16.2l8.5 4.6 8.5-4.6' opacity='.45'/%3E%3C/svg%3E"); }
.st-page .st-menu > button[data-frame=orig] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353fc18' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M4 17l5-4.5 3.5 3 3-2.5L20 17'/%3E%3C/svg%3E"); }
.st-page .st-menu > button b { font-size: 13.5px; font-weight: 700; }
.st-page .st-menu > button small { line-height: 1.35; }

/* ---------- selectores desplegables ---------- */
:is(.st-page, .em-page) select { -webkit-appearance: none; appearance: none; padding-right: 34px; border: 1px solid var(--p-line-hi); border-radius: 11px; background: #090d0f var(--p-i-chev) right 11px center / 14px no-repeat; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); color: var(--text); font-weight: 600; cursor: pointer; transition: border-color .18s, box-shadow .18s; }
:is(.st-page, .em-page) select:hover { border-color: rgba(255, 255, 255, .3); }
:is(.st-page, .em-page) select:focus { outline: none; border-color: rgba(83, 252, 24, .7); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), var(--p-ring); }
:is(.st-page, .em-page) select option { background: #12181b; color: var(--text); }

/* ---------- botones de la cabecera con icono ---------- */
.st-page #stUpBtn::before, .st-page #stSrcChange::before { content: ''; width: 16px; height: 16px; flex: none; background: currentColor; opacity: .85; -webkit-mask: var(--bi) center / contain no-repeat; mask: var(--bi) center / contain no-repeat; }
.st-page #stUpBtn { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5M4.5 15v3a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E"); }
.st-page #stSrcChange { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3.5-3.5M20 16H7l3.5 3.5'/%3E%3C/svg%3E"); }
.st-page .em-src { border-color: var(--p-line); box-shadow: var(--p-inset); }
.st-page .em-pick-card { border-color: var(--p-line); background: linear-gradient(180deg, #131a1d, #0d1215); box-shadow: var(--p-inset), 0 24px 50px -30px rgba(0, 0, 0, .8); }
.st-page .em-pick-ic { border-radius: 15px; background: linear-gradient(180deg, rgba(83, 252, 24, .18), rgba(83, 252, 24, .06)); border-color: rgba(83, 252, 24, .35); }

/* ---------- Emotes: pestañas del modo avanzado, con el mismo estado activo que el Studio ---------- */
.em-page .em-ptabs { background: #090d0f; border-bottom-color: var(--p-line); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .03); }
.em-page .em-ptabs button { border-radius: 12px; color: #7c898d; transition: color .18s, background .2s; }
.em-page .em-ptabs button:hover:not(.on) { color: var(--text); background: rgba(255, 255, 255, .045); }
.em-page .em-ptabs button svg { width: 19px; height: 19px; }
.em-page .em-ptabs button.on { background: linear-gradient(180deg, rgba(83, 252, 24, .17), rgba(83, 252, 24, .07)); box-shadow: inset 0 0 0 1px rgba(83, 252, 24, .36); color: var(--green); }
.em-page .em-adv-seg button.on { color: var(--green); }
.em-page .em-pfoot { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
.em-page .em-actions { border-color: var(--p-line-hi); box-shadow: 0 -14px 34px -14px rgba(0, 0, 0, .7), var(--p-inset); }
.em-page .em-panel { border-color: var(--p-line-hi); }

/* ---------- Emotes: selector de color del texto, igual que el del Studio ---------- */
.em-page .em-color input[type=color] { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; padding: 3px; border: 0; border-radius: 50%; cursor: pointer; background: conic-gradient(from 20deg, #ff5c5c, #ffd23f, #53fc18, #38bdf8, #a78bfa, #f472b6, #ff5c5c); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); transition: transform .16s var(--p-ease); }
.em-page .em-color input[type=color]:hover { transform: scale(1.1); }
.em-page .em-color input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.em-page .em-color input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; box-shadow: 0 0 0 2.5px #0e1316; }
.em-page .em-color input[type=color]::-moz-color-swatch { border: 0; border-radius: 50%; }

/* ---------- columna izquierda del editor: el enlace ocupa toda la fila y los botones se reparten debajo ---------- */
@media (min-width: 1101px) {
  body.st-editing .st-sidecol .st-source .st-load { flex-wrap: wrap; }
  body.st-editing .st-sidecol .st-source .st-load input { flex: 1 1 100%; }
  body.st-editing .st-sidecol .st-source .st-load .btn { flex: 1 1 0; padding: 0 12px; justify-content: center; }
}

/* ---------- selector de fuente plegable ---------- */
.st-page .st-fontsw { display: flex; align-items: center; gap: 12px; width: 100%; height: 46px; margin: 8px 0 0; padding: 0 14px; border: 1px solid var(--p-line-hi); border-radius: 12px; background: #090d0f; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); color: var(--text); text-align: left; cursor: pointer; transition: border-color .18s, box-shadow .18s, background .18s; }
.st-page .st-fontsw:hover { border-color: rgba(255, 255, 255, .3); }
.st-page .st-fontsw:focus-visible { outline: none; border-color: rgba(83, 252, 24, .7); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), var(--p-ring); }
.st-page .st-fontsw .lb { flex: none; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.st-page .st-fontsw b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: 400; line-height: 1.2; color: var(--text); }
.st-page .st-fontsw i { flex: none; width: 15px; height: 15px; background: var(--p-i-chev) center / contain no-repeat; transition: transform .24s var(--p-ease); }
.st-page .st-fontsw[aria-expanded=true] i { transform: rotate(180deg); }
.st-page .st-fontsw + .st-fonts { margin-top: 6px; }
.st-page.st-fonts-min .st-fonts { display: none; }
.st-page.st-fonts-min .st-fontsw { margin-bottom: 12px; }

/* ---------- tarjetas con interruptor apagado: el título queda centrado (sin el hueco del contenido oculto) ---------- */
.st-page .st-grp-h:has(+ [hidden]) { margin-bottom: 0; }
.st-page .st-grp:has(> .st-grp-h + [hidden]) { padding-bottom: 15px; }