/* Claudbar · Liquid Glass (estilo Apple). Se carga el ÚLTIMO: convierte las superficies en cristal líquido
   translúcido (desenfoque + saturación), con brillo en el borde superior y sombras suaves. Oscuro y claro. */

:root {
  --lg-fill: linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 55%, rgba(255,255,255,.09) 100%);
  --lg-fill-strong: linear-gradient(135deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.08) 60%, rgba(255,255,255,.14) 100%);
  --lg-edge: rgba(255,255,255,.2);
  --lg-shine: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(255,255,255,.06), inset 1px 0 0 rgba(255,255,255,.08);
  --lg-shadow: 0 10px 30px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.18);
  --lg-blur: blur(22px) saturate(180%);
  --lg-radius: 22px;
  --lg-ease: cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="light"] {
  --lg-fill: linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.48) 55%, rgba(255,255,255,.62) 100%);
  --lg-fill-strong: linear-gradient(135deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.62) 60%, rgba(255,255,255,.78) 100%);
  --lg-edge: rgba(255,255,255,.85);
  --lg-shine: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.04);
  --lg-shadow: 0 10px 30px rgba(40,40,90,.12), 0 2px 6px rgba(40,40,90,.08);
}

/* ---------- Superficies de cristal ---------- */
html body .composer,
html body .menu,
html body .top-menu,
html body .toast,
html body .agent-card,
html body .quote-box,
html body .wx-chip,
html body .model-btn,
html body .composer-tools .model-btn,
html body .agent-pill,
html body .new-task,
html body .top-full {
  background: var(--lg-fill) !important;
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge) !important;
  box-shadow: var(--lg-shine), var(--lg-shadow) !important;
}

/* Barra de escribir: cápsula grande de cristal */
html body .composer { border-radius: 26px !important; transition: box-shadow .3s var(--lg-ease), transform .3s var(--lg-ease); }
html body .composer:focus-within { box-shadow: var(--lg-shine), 0 0 0 4px color-mix(in srgb, var(--accent-primary, #7c5cf6) 22%, transparent), var(--lg-shadow) !important; }

/* Píldoras (Auto, Agente, Bar Live, clima, pantalla completa) */
html body .composer-tools .model-btn,
html body .agent-pill,
html body .new-task,
html body .wx-chip,
html body .top-full { border-radius: 999px !important; transition: transform .25s var(--lg-ease), background .25s; }
html body .composer-tools .model-btn:hover,
html body .agent-pill:hover,
html body .new-task:hover,
html body .top-full:hover { background: var(--lg-fill-strong) !important; }
html body .agent-pill[aria-pressed="true"] { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary, #7c5cf6) 55%, transparent), color-mix(in srgb, var(--accent-primary, #7c5cf6) 25%, transparent)) !important; color: #fff; }

/* Botones redondos (historial, nuevo chat, micro, enviar) */
html body .tool-icon,
html body .icon-btn,
html body .foot-icon { border-radius: 50% !important; transition: background .2s, transform .2s var(--lg-ease); }
html body .tool-icon:hover,
html body .icon-btn:hover,
html body .foot-icon:hover { background: var(--lg-fill-strong) !important; box-shadow: var(--lg-shine); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); }

/* Mensajes: tú en cristal tintado con tu color; html body la nube en cristal claro */
html body .message.user .bubble {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary, #7c5cf6) 70%, transparent), color-mix(in srgb, var(--accent-primary, #7c5cf6) 40%, transparent)) !important;
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid rgba(255,255,255,.28) !important; border-radius: 22px 22px 8px 22px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 22px color-mix(in srgb, var(--accent-primary, #7c5cf6) 30%, transparent) !important;
}

/* Menús y avisos flotantes */
html body .menu,
html body .top-menu { border-radius: 20px !important; }
html body .toast { border-radius: 999px !important; }
html body .agent-card { border-radius: 22px !important; }

/* ---------- Live ---------- */
html body .live-btn {
  background: var(--lg-fill) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid rgba(255,255,255,.22) !important; box-shadow: var(--lg-shine), 0 8px 24px rgba(0,0,0,.35);
}
html body .live-btn.on { background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.75)) !important; }
html body .live-btn.end { background: linear-gradient(135deg, rgba(255,90,95,.95), rgba(229,72,77,.75)) !important; border-color: rgba(255,180,180,.45) !important; }
html body .live-bar { margin: 0; padding: 14px 12px 20px !important; border-radius: 0; background: transparent; border: 0; box-shadow: none; }
html body .live-screen-tag { -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }

/* ---------- Letras ---------- */
html body .lyr-lang,
html body .lyr-close { -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border: 1px solid rgba(255,255,255,.2) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
html body .lyr-lang.on { background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.72)) !important; }

/* Sin desenfoque si el sistema pide menos transparencia o el equipo no lo soporta */
@media (prefers-reduced-transparency: reduce) {
  :root { --lg-blur: none; --lg-fill: var(--surface); --lg-fill-strong: var(--surface-2); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --lg-fill: var(--surface); --lg-fill-strong: var(--surface-2); }
}

/* =====================================================================
   TODO en cristal: Ajustes, tarjetas, campos, botones, chips, barras…
   ===================================================================== */

/* Paneles y tarjetas */
html body .settings-view,
html body .opt-nav,
html body .opt-card,
html body .opt-group,
html body .model-card,
html body .feature-card,
html body .doc-card,
html body .tool-tile,
html body .lib-item,
html body .library,
html body .credit-bar,
html body .status-chip,
html body .proposal,
html body .note,
html body .result,
html body .preview,
html body .pv-card,
html body .acct-bar,
html body .agent-mode,
html body .agent-prompt,
html body .tool-call,
html body .tool-chip,
html body .sugg-item,
html body .att,
html body .quote-chip,
html body .example-btn,
html body .drawer-tab,
html body .lib-tab,
html body .rail,
html body .cb-opt-hero,
html body .fs-chat-act,
html body .route-note,
html body .setup-hint,
html body .doc-card-btn,
html body .convert-frame {
  background: var(--lg-fill) !important;
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge) !important;
  box-shadow: var(--lg-shine), var(--lg-shadow) !important;
}
html body .settings-view,
html body .opt-nav,
html body .rail,
html body .library { box-shadow: var(--lg-shine) !important; }
html body .opt-card,
html body .opt-group,
html body .model-card,
html body .feature-card,
html body .doc-card,
html body .proposal,
html body .result,
html body .preview,
html body .pv-card,
html body .acct-bar,
html body .agent-mode,
html body .agent-prompt,
html body .tool-call,
html body .cb-opt-hero,
html body .convert-frame { border-radius: 22px !important; }
html body .tool-tile,
html body .lib-item,
html body .sugg-item,
html body .att,
html body .example-btn,
html body .note,
html body .route-note,
html body .setup-hint { border-radius: 16px !important; }
html body .status-chip,
html body .quote-chip,
html body .tool-chip,
html body .drawer-tab,
html body .lib-tab,
html body .fs-chat-act,
html body .doc-card-btn,
html body .credit-bar { border-radius: 999px !important; }
html body .tool-tile:hover,
html body .lib-item:hover,
html body .sugg-item:hover,
html body .example-btn:hover,
html body .agent-mode:hover,
html body .model-card:hover,
html body .feature-card:hover { background: var(--lg-fill-strong) !important; transition: transform .25s var(--lg-ease), background .25s; }

/* Campos de texto y selectores */
html body .opt-input,
html body .opt-select,
html body .opt-text,
html body .agent-input,
html body .pv-input,
html body .settings-view input[type="text"],
html body .settings-view input[type="url"],
html body .settings-view input[type="password"],
html body .settings-view input[type="number"],
html body .settings-view input[type="email"],
html body .settings-view select,
html body .settings-view textarea,
html body .opt-main input[type="text"],
html body .opt-main input[type="url"],
html body .opt-main input[type="password"],
html body .opt-main input[type="number"],
html body .opt-main input[type="email"],
html body .opt-main select,
html body .opt-main textarea {
  background: var(--lg-fill) !important;
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge) !important; border-radius: 14px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18), var(--lg-shine) !important;
}
html body .opt-input:focus,
html body .opt-select:focus,
html body .opt-text:focus,
html body .agent-input:focus,
html body .settings-view input:focus,
html body .settings-view select:focus,
html body .settings-view textarea:focus,
html body .opt-main input:focus,
html body .opt-main select:focus,
html body .opt-main textarea:focus {
  outline: none; box-shadow: var(--lg-shine), 0 0 0 4px color-mix(in srgb, var(--accent-primary, #7c5cf6) 22%, transparent) !important;
}

/* Botones */
html body .btn-ghost,
html body .btn-sm,
html body .btn-google,
html body .chip-btn,
html body .gptar-btn,
html body .agent-ctl,
html body .act,
html body .stop-btn,
html body .menu-item,
html body .rail-btn,
html body .cap-chip,
html body .badge,
html body .kbd,
html body .foot-upgrade,
html body .fc-cta {
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  transition: transform .2s var(--lg-ease), background .2s;
}
html body .btn-ghost,
html body .btn-sm,
html body .btn-google,
html body .chip-btn,
html body .gptar-btn,
html body .agent-ctl,
html body .act,
html body .stop-btn,
html body .cap-chip,
html body .badge,
html body .kbd {
  background: var(--lg-fill) !important; border: 1px solid var(--lg-edge) !important; box-shadow: var(--lg-shine) !important; border-radius: 999px !important;
}
html body .btn-ghost:hover,
html body .btn-sm:hover,
html body .btn-google:hover,
html body .chip-btn:hover,
html body .gptar-btn:hover,
html body .agent-ctl:hover,
html body .act:hover,
html body .menu-item:hover,
html body .rail-btn:hover { background: var(--lg-fill-strong) !important; }
html body .btn-primary {
  background: linear-gradient(135deg, var(--accent-primary, #7c5cf6), color-mix(in srgb, var(--accent-primary, #7c5cf6) 55%, transparent)) !important;
  border: 1px solid rgba(255,255,255,.35) !important; border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px color-mix(in srgb, var(--accent-primary, #7c5cf6) 35%, transparent) !important;
}
html body .btn-danger {
  background: linear-gradient(135deg, rgba(255,90,95,.9), rgba(220,38,38,.6)) !important; border: 1px solid rgba(255,190,190,.45) !important; border-radius: 999px !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 20px rgba(220,38,38,.3) !important;
}
html body .menu-item { border-radius: 14px !important; }
html body .rail-btn { border-radius: 16px !important; }

/* Interruptores (estilo iOS de cristal) */
html body .switch { background: var(--lg-fill) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border: 1px solid var(--lg-edge) !important; box-shadow: inset 0 1px 3px rgba(0,0,0,.28) !important; }
html body .switch[aria-checked="true"] { background: linear-gradient(135deg, #34c759, #30d158) !important; border-color: rgba(255,255,255,.35) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(48,209,88,.35) !important; }
html body .switch::after { box-shadow: 0 2px 6px rgba(0,0,0,.3), inset 0 -1px 0 rgba(0,0,0,.08); }

/* Barras de progreso */
html body .progress-bar,
html body .perm-progress,
html body .status-progress { background: var(--lg-fill) !important; border: 1px solid var(--lg-edge) !important; border-radius: 999px !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.2) !important; overflow: hidden; }

/* Página de Ajustes completa (options.html) y Nueva pestaña */
html body .opt-main { background: transparent !important; }

/* =====================================================================
   Fondo de estrellas en TODO (predeterminado; si eliges otro fondo en Apariencia, se respeta)
   ===================================================================== */
:root {
  --lg-stars: radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.75) 50%, transparent) 0 0 / 240px 180px,
    radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,.5) 50%, transparent) 0 0 / 240px 180px,
    radial-gradient(1.5px 1.5px at 200px 20px, rgba(255,255,255,.85) 50%, transparent) 0 0 / 240px 180px,
    radial-gradient(1px 1px at 60px 140px, rgba(255,255,255,.5) 50%, transparent) 0 0 / 240px 180px,
    radial-gradient(1px 1px at 170px 120px, rgba(200,210,255,.6) 50%, transparent) 0 0 / 240px 180px,
    radial-gradient(ellipse at 50% 120%, rgba(60,70,140,.28), transparent 60%);
}
html:not([data-bg]):not([data-theme="light"]) body, html[data-bg="stars"]:not([data-theme="light"]) body,
html:not([data-bg]):not([data-theme="light"]) body .settings-view, html[data-bg="stars"]:not([data-theme="light"]) body .settings-view {
  background: var(--lg-stars), #07080d !important;
}
html:not([data-bg]):not([data-theme="light"]) body .app, html:not([data-bg]):not([data-theme="light"]) body .opt-main { background: transparent !important; }
html:not([data-theme="light"]) body .live-overlay { background: var(--lg-stars), #07080d !important; }
html body .lyr { background: var(--lg-stars), linear-gradient(160deg, rgba(90,45,140,.75) 0%, rgba(27,21,48,.85) 45%, #07080d 100%) !important; }

/* Pantalla completa: las estrellas llenan TODA la pantalla (marco y barra izquierda incluidos). */
html:not([data-theme="light"]) body .shell { background: transparent !important; }
html.cb-full:not([data-theme="light"]) body .app, html.cb-full:not([data-theme="light"]) body #app { background: transparent !important; }
html.cb-full:not([data-theme="light"]) body .rail { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important; border-right: 1px solid rgba(255,255,255,.12) !important; }

/* Lluvia de estrellas fugaces (ui/theme.js crea .cb-meteors). Solo con el fondo de estrellas en modo oscuro. */
.cb-meteors { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; display: none; }
html:not([data-bg]):not([data-theme="light"]) .cb-meteors, html[data-bg="stars"]:not([data-theme="light"]) .cb-meteors { display: block; }
.cb-meteors i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 3px 1px rgba(255,255,255,.95), 0 0 9px 2px rgba(170,195,255,.55);
  transform: rotate(var(--a, 150deg)) translateX(0);
  animation: cb-meteor var(--d, 12s) linear var(--w, 0s) infinite; will-change: transform, opacity;
}
/* Estela: fina, más brillante junto a la cabeza y desvaneciéndose hacia atrás */
.cb-meteors i::before {
  content: ''; position: absolute; top: 50%; right: 1px; width: var(--l, 140px); height: 1px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(150,175,255,.18) 45%, rgba(220,230,255,.6) 85%, rgba(255,255,255,.95));
  border-radius: 1px;
}
/* Pasa rápido (menos de un segundo y medio) y luego hay una pausa larga, como en el cielo de verdad */
@keyframes cb-meteor {
  0% { opacity: 0; transform: rotate(var(--a, 150deg)) translateX(0); }
  1% { opacity: 1; }
  6% { opacity: .85; }
  9% { opacity: 0; transform: rotate(var(--a, 150deg)) translateX(var(--dist, 480px)); }
  100% { opacity: 0; transform: rotate(var(--a, 150deg)) translateX(var(--dist, 480px)); }
}
/* Equipos modestos: menos estrellas fugaces. Sin animaciones si el sistema lo pide. */
html.cb-lite .cb-meteors i:nth-child(n+3) { display: none; }
@media (prefers-reduced-motion: reduce) { .cb-meteors { display: none !important; } }
html.no-anim .cb-meteors, html[data-reduce-motion] .cb-meteors { display: none !important; }
/* Las estrellas fugaces van detrás de todo el contenido; el chat deja ver el cielo. */
html[data-bg="stars"]:not([data-theme="light"]) body .app { background: transparent !important; }

/* Pantalla completa: recuadro de tu cuenta, su menú, buscador de chats y papelera en cristal (sin fondo gris). */
html.cb-full body .cb-acct-wrap { background: transparent !important; border-top: 1px solid rgba(255,255,255,.1) !important; }
html.cb-full body .cb-acct {
  background: var(--lg-fill) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge) !important; border-radius: 18px !important; box-shadow: var(--lg-shine), var(--lg-shadow) !important;
}
html.cb-full body .cb-acct:hover, html.cb-full body .cb-acct[aria-expanded="true"] { background: var(--lg-fill-strong) !important; }
html body .cb-acct-menu {
  background: var(--lg-fill-strong), rgba(18,18,28,.7) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge) !important; border-radius: 20px !important; box-shadow: var(--lg-shine), var(--lg-shadow) !important;
}
html body .cb-acct-menu button { border-radius: 14px !important; }
html body .cb-acct-menu button:hover { background: rgba(255,255,255,.1) !important; }
html body .fs-search, html body .fs-trash-btn {
  background: var(--lg-fill) !important; border: 1px solid var(--lg-edge) !important; border-radius: 14px !important; box-shadow: var(--lg-shine) !important;
}
html body .fs-chat:hover, html body .fs-chat[aria-current="true"] { background: rgba(255,255,255,.08) !important; border-radius: 12px !important; }

/* Configuración (options.html): la barra izquierda deja ver el cielo animado (estrellas y estrellas fugaces). */
html:not([data-theme="light"]) body .opt-nav {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border: 0 !important; border-right: 1px solid rgba(255,255,255,.12) !important; box-shadow: none !important;
}

/* Ajustes: un solo nivel de cristal, tarjetas a su altura y campos sin recortar */
html body .opt-page { grid-auto-rows: auto !important; align-items: start !important; gap: 18px !important; }
html body .opt-page .opt-card { height: auto !important; overflow: visible !important; padding: 20px !important; gap: 12px !important; }
html body .opt-card > h2 { font-size: 17px !important; font-weight: 650; letter-spacing: -.01em; }
html body .opt-card .opt-group { background: rgba(255,255,255,.025) !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: 14px !important; }
html body .opt-card .opt-row { padding: 12px 14px !important; }
html body .opt-card .opt-row select,
html body .opt-card .opt-row .opt-select { max-width: 100% !important; min-width: 150px; flex: 0 0 auto; }
html body .opt-main ::placeholder { color: rgba(236,235,245,.45); }
html body .opt-mascot { width: 72px; height: 60px; }
html:not([data-theme="light"]) body .opt-card:hover { border-color: rgba(167,139,250,.28) !important; transition: border-color .25s; }
html body .opt-page { display: block !important; column-count: 3 !important; column-gap: 18px !important; }
html body .opt-page .opt-card { break-inside: avoid; margin: 0 0 18px !important; width: 100%; }
@media (max-width: 1250px) { html body .opt-page { column-count: 2 !important; } }
@media (max-width: 820px) { html body .opt-page { column-count: 1 !important; } }
html body .opt-card .opt-row > div:not(.txt) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
html body .opt-card .opt-row > div:not(.txt) > select { flex: 1 1 140px; min-width: 0; }

/* Configuración global: una columna centrada, pestañas en píldora e interruptores morados */
html body .opt-page:has(> .opt-card:only-child) { column-count: 1 !important; max-width: 920px !important; margin: 0 auto !important; }
html body .opt-main[data-section="advanced"] .opt-card { padding: 26px 28px !important; }
html body .opt-main[data-section="advanced"] .opt-card > h2 { font-size: 22px !important; }
html body .opt-main #settings-view { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html body .opt-main .sv-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; margin: 4px 0 18px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); width: fit-content; max-width: 100%; overflow: visible; }
html body .opt-main .sv-tab { border: 0 !important; border-radius: 999px !important; padding: 8px 16px !important; background: transparent !important; color: #a5a7bd; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
html body .opt-main .sv-tab:hover { color: #f4f5f7; background: rgba(255,255,255,.06) !important; }
html body .opt-main .sv-tab.active, html body .opt-main .sv-tab[aria-selected="true"] { color: #fff; background: linear-gradient(135deg, #a78bfa, #8b5cf6) !important; box-shadow: 0 4px 14px rgba(139,92,246,.35); }
html body .opt-main .sv-section { margin-bottom: 22px; }
html body .opt-main .sv-section > h3, html body .opt-main .sv-section > .sv-title, html body .opt-main .sv-section > h4 { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #a78bfa; margin: 0 0 10px 4px; }
html body .opt-main .sv-body .check-row { display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; gap: 16px; padding: 14px 16px; margin: 0; border-radius: 14px; font-size: 14px; color: #ecebf5; line-height: 1.45; cursor: pointer; transition: background .2s; }
html body .opt-main .sv-body .check-row:hover { background: rgba(255,255,255,.04); }
html body .opt-main .sv-body .check-row + .check-row { border-top: 1px solid rgba(255,255,255,.05); }
html body .opt-main .check-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 42px; height: 24px; margin: 0; border-radius: 999px; background: rgba(255,255,255,.14); position: relative; cursor: pointer; transition: background .25s; }
html body .opt-main .check-row input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
html body .opt-main .check-row input[type="checkbox"]:checked { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
html body .opt-main .check-row input[type="checkbox"]:checked::after { transform: translateX(18px); }
html body .opt-main .check-row input[type="checkbox"]:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
html body .opt-main .sv-body .btn-primary { padding: 10px 22px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #a78bfa, #f26b21); color: #fff; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 6px 18px rgba(167,139,250,.3); transition: transform .15s, box-shadow .2s; }
html body .opt-main .sv-section > h3 { display: block !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .14em !important; color: #c4b5fd !important; padding: 0 !important; margin: 0 0 12px 6px !important; }
html body .opt-main .sv-body .field > label:not(.check-row) { display: block; font-size: 12.5px; font-weight: 600; color: #c4b5fd; margin: 8px 0 6px 4px; }
html body .opt-main .sv-body .btn-primary { background: linear-gradient(135deg, #a78bfa, #f26b21) !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; margin-top: 8px; }