:root{
  color-scheme:dark;
  --bg:#05050b;
  --bg2:#0b0913;
  --panel:#110f1b;
  --panel2:#171324;
  --line:rgba(196,152,255,.18);
  --line2:rgba(196,152,255,.11);
  --text:#f7f2ff;
  --muted:#a494c8;
  --accent:#ba73ff;
  --accent2:#8038f0;
  --accent3:#dbc0ff;
  --good:#76f390;
  --radius:20px;
  --shadow:0 24px 70px rgba(0,0,0,.35),0 0 70px rgba(112,46,215,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(circle at 50% 0%,rgba(131,71,230,.18),transparent 25%),radial-gradient(circle at 0% 100%,rgba(96,30,184,.16),transparent 32%),linear-gradient(180deg,#06060d,#0a0912);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
.glass-card,.panel{background:linear-gradient(180deg,rgba(18,14,29,.96),rgba(11,9,19,.98));border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.brand-lockup{display:flex;align-items:center;gap:12px}.brand-lockup.small{gap:10px}
.brand-mark{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(173,103,255,.28))}
.brand-title{font-size:42px;font-weight:800;line-height:1;letter-spacing:-.05em}.brand-title.mini{font-size:22px}
.brand-title span{color:var(--accent)}
.brand-title b{font-size:.7em;color:#b785ff;margin-left:4px}
.brand-signature{font-style:italic;color:#bf93ff}.brand-signature.small{font-size:12px;margin-top:3px}
.switch{position:relative;display:inline-flex}.switch input{position:absolute;inset:0;opacity:0;pointer-events:none}
.switch .track{display:block;position:relative;border-radius:999px;background:#50485f;transition:.2s ease}
.switch .track::after{content:"";position:absolute;border-radius:50%;background:#fff;transition:.2s ease;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.switch.big .track{width:74px;height:40px}.switch.big .track::after{width:30px;height:30px;left:5px;top:5px}
.switch.sm .track{width:52px;height:30px}.switch.sm .track::after{width:22px;height:22px;left:4px;top:4px}
.switch input:checked + .track{background:linear-gradient(90deg,var(--accent2),var(--accent))}
.switch input:focus-visible + .track{outline:2px solid var(--accent3);outline-offset:3px}
.switch.big input:checked + .track::after{left:39px}.switch.sm input:checked + .track::after{left:26px}
.icon-btn,.ghost-btn,.star-btn{border:1px solid var(--line);background:linear-gradient(180deg,rgba(30,22,45,.95),rgba(15,11,24,.98));color:#f1e5ff;border-radius:14px}
.toast{position:fixed;left:50%;bottom:14px;transform:translateX(-50%) translateY(10px);padding:10px 14px;border-radius:999px;background:rgba(12,9,20,.96);border:1px solid rgba(199,151,255,.22);color:#f4e9ff;font-size:12px;font-weight:700;opacity:0;pointer-events:none;transition:.2s ease;white-space:nowrap;z-index:999999}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
input[type="range"]{width:100%;accent-color:var(--accent)}
@media (max-width:760px){.brand-title{font-size:34px}}

/* --- A8 Visual Engine v1.5: low-cost themes + ambient space --- */
:root,
:root[data-a8-theme="nebula"]{
  --accent-rgb:186,115,255;
  --accent2-rgb:128,56,240;
  --accent3-rgb:219,192,255;
  --accent:rgb(var(--accent-rgb));
  --accent2:rgb(var(--accent2-rgb));
  --accent3:rgb(var(--accent3-rgb));
  --line:rgba(var(--accent-rgb),.20);
  --line2:rgba(var(--accent-rgb),.12);
  --shadow:0 24px 70px rgba(0,0,0,.36),0 0 72px rgba(var(--accent2-rgb),.14);
}
:root[data-a8-theme="ion"]{
  --accent-rgb:72,205,255;
  --accent2-rgb:32,112,255;
  --accent3-rgb:190,235,255;
}
:root[data-a8-theme="emerald"]{
  --accent-rgb:83,239,161;
  --accent2-rgb:17,166,111;
  --accent3-rgb:194,255,221;
}
:root[data-a8-theme="solar"]{
  --accent-rgb:255,191,71;
  --accent2-rgb:230,112,31;
  --accent3-rgb:255,229,166;
}
:root[data-a8-theme="crimson"]{
  --accent-rgb:255,84,133;
  --accent2-rgb:202,41,88;
  --accent3-rgb:255,190,211;
}
:root[data-a8-theme="arctic"]{
  --accent-rgb:139,168,255;
  --accent2-rgb:78,92,225;
  --accent3-rgb:216,225,255;
}
:root[data-a8-theme="sapphire"]{
  --accent-rgb:79,134,255;
  --accent2-rgb:29,63,153;
  --accent3-rgb:201,217,255;
}
:root[data-a8-theme="jade"]{
  --accent-rgb:57,210,173;
  --accent2-rgb:14,122,103;
  --accent3-rgb:199,255,240;
}
:root[data-a8-theme="champagne"]{
  --accent-rgb:231,194,122;
  --accent2-rgb:157,110,50;
  --accent3-rgb:255,240,196;
}
:root[data-a8-theme="rose"]{
  --accent-rgb:230,160,170;
  --accent2-rgb:164,83,102;
  --accent3-rgb:255,224,229;
}
:root[data-a8-theme="platinum"]{
  --accent-rgb:203,211,222;
  --accent2-rgb:102,113,128;
  --accent3-rgb:245,247,250;
}
:root[data-a8-theme="obsidian"]{
  --accent-rgb:197,145,91;
  --accent2-rgb:105,68,37;
  --accent3-rgb:245,214,180;
}

html,body{
  background:
    radial-gradient(circle at 50% -8%,rgba(var(--accent-rgb),.17),transparent 28%),
    radial-gradient(circle at -5% 105%,rgba(var(--accent2-rgb),.14),transparent 34%),
    linear-gradient(180deg,#05060c,#080912 58%,#06070d);
}
body{position:relative;isolation:isolate;overflow-x:hidden}
.popup-shell,.advanced-page,.info-shell{position:relative;z-index:1}
body::before,body::after{
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:0;
  will-change:transform,opacity;
  transform:translate3d(0,0,0);
}
body::before{
  inset:-18%;
  opacity:.34;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.88) 0 1px,transparent 1.35px),
    radial-gradient(circle,rgba(var(--accent3-rgb),.70) 0 1px,transparent 1.45px),
    radial-gradient(circle,rgba(255,255,255,.52) 0 .8px,transparent 1.2px);
  background-size:173px 173px,257px 257px,349px 349px;
  background-position:13px 21px,67px 113px,149px 41px;
  animation:a8-star-drift 34s linear infinite alternate;
}
body::after{
  inset:-28%;
  opacity:.58;
  background:
    radial-gradient(ellipse at 24% 28%,rgba(var(--accent-rgb),.16),transparent 34%),
    radial-gradient(ellipse at 76% 62%,rgba(var(--accent2-rgb),.13),transparent 36%),
    radial-gradient(ellipse at 55% 85%,rgba(var(--accent3-rgb),.06),transparent 29%);
  animation:a8-nebula-float 22s ease-in-out infinite alternate;
}
@keyframes a8-star-drift{
  from{transform:translate3d(-1.8%,-1.2%,0) scale(1.04);opacity:.27}
  to{transform:translate3d(2.2%,1.8%,0) scale(1.07);opacity:.39}
}
@keyframes a8-nebula-float{
  from{transform:translate3d(-2%,1%,0) scale(1.02);opacity:.46}
  to{transform:translate3d(2.5%,-1.6%,0) scale(1.08);opacity:.64}
}
html[data-a8-motion="off"] body::before,
html[data-a8-motion="off"] body::after,
body.a8-motion-paused::before,
body.a8-motion-paused::after{animation-play-state:paused}
html[data-a8-motion="off"] body::before,
html[data-a8-motion="off"] body::after{animation:none}
@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none!important}}

/* One themed range renderer for both the popup and A8 LAB. */
.a8-range{
  --a8-fill:50%;
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:20px;
  margin:0;
  background:transparent;
  cursor:pointer;
}
.a8-range::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,
    var(--accent2) 0%,
    var(--accent) var(--a8-fill),
    rgba(255,255,255,.14) var(--a8-fill),
    rgba(255,255,255,.14) 100%);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.10),0 0 14px rgba(var(--accent-rgb),.08);
}
.a8-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  margin-top:-7px;
  border-radius:50%;
  background:#f7f7ff;
  border:2px solid #fff;
  box-shadow:0 0 0 5px rgba(var(--accent-rgb),.18),0 0 18px rgba(var(--accent-rgb),.42);
  transition:transform .14s ease,box-shadow .14s ease;
}
.a8-range:hover::-webkit-slider-thumb{transform:scale(1.07);box-shadow:0 0 0 6px rgba(var(--accent-rgb),.20),0 0 22px rgba(var(--accent-rgb),.48)}
.a8-range:active::-webkit-slider-thumb{transform:scale(.96)}
.a8-range::-moz-range-track{height:4px;border:none;border-radius:999px;background:rgba(255,255,255,.14)}
.a8-range::-moz-range-progress{height:4px;border:none;border-radius:999px;background:linear-gradient(90deg,var(--accent2),var(--accent));box-shadow:0 0 14px rgba(var(--accent-rgb),.10)}
.a8-range::-moz-range-thumb{width:18px;height:18px;border:2px solid #fff;border-radius:50%;background:#f7f7ff;box-shadow:0 0 0 5px rgba(var(--accent-rgb),.18),0 0 18px rgba(var(--accent-rgb),.42)}
.a8-range:focus-visible{outline:none}
.a8-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(var(--accent-rgb),.26),0 0 22px rgba(var(--accent-rgb),.55)}

/* Theme the shared controls without duplicating six entire stylesheets. */
.brand-title span{color:var(--accent)}
.brand-title b,.brand-signature{color:var(--accent3)}
.brand-mark{filter:drop-shadow(0 0 18px rgba(var(--accent-rgb),.30))}
.switch input:checked + .track{background:linear-gradient(90deg,var(--accent2),var(--accent))}
.icon-btn,.ghost-btn,.star-btn{border-color:var(--line)}
.toast{border-color:rgba(var(--accent-rgb),.24)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid rgba(var(--accent-rgb),.72);outline-offset:2px}
.power-tick-labels{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.power-tick-labels span{text-align:center}.power-tick-labels span:first-child{text-align:left}.power-tick-labels span:last-child{text-align:right}