/* Global Neon Anime Multipage Theme */
:root{
  --bg:#070813;
  --fg:#f5f8ff;
  --neon:#00ffff; /* cyan */
  --mag:#ff00ff;  /* magenta */
  --ok:#7dffb1;
  --warn:#ffd35b;
  --muted:#93a4c9;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  min-height:100%;
  color:var(--fg);
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Inter,Arial;
  background:var(--bg) no-repeat center/cover fixed;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
body.enter{animation:fadeIn .5s ease both}
body.leave{animation:warpOut .4s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes warpOut{to{opacity:0;transform:scale(.98) translateY(-8px)}}
.card{
  width:min(900px,92vw);
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:28px;
  box-shadow:0 10px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter: blur(6px);
}
.header{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.badge{
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.75rem;
  color:#001b1b;
  background:linear-gradient(90deg,var(--neon),var(--mag));
  padding:6px 10px;border-radius:999px;
}
h1{margin:.2em 0 .4em;font-size:clamp(1.6rem,3.8vw,2.4rem);}
h2{margin:.1em 0 .4em;font-size:clamp(1.2rem,3vw,1.6rem);color:var(--muted)}
.p{line-height:1.55}
.label{opacity:.85;margin:.6em 0 .2em;display:block}
.input, .range, .btn, .switch, .pad{
  border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35); color:var(--fg);
}
.input{width:100%;padding:12px 14px;font-size:1rem;outline:none}
.range{width:100%}
.row{display:flex;gap:14px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.btn{
  padding:12px 16px; cursor:not-allowed; opacity:.6;
  box-shadow:0 0 20px rgba(0,255,255,.12) inset;
}
.btn.ready{cursor:pointer;opacity:1;box-shadow:0 0 24px rgba(0,255,255,.35) inset}
.btn.primary{border-color:var(--neon)}
.btn.ghost{border-color:rgba(255,255,255,.12);opacity:.8}
.note{font-size:.9rem;color:var(--muted)}
.ok{color:var(--ok)} .warn{color:var(--warn)}
hr{border:none;border-top:1px solid rgba(255,255,255,.08);margin:16px 0}
.small{font-size:.85rem;opacity:.7}
.icon{width:42px;height:42px;filter:drop-shadow(0 3px 12px rgba(0,255,255,.35))}
.progress{display:flex;align-items:center;gap:10px;margin:10px 0 18px}
.bar{position:relative;height:8px;flex:1;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.bar>i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--neon),var(--mag));}
.phase{font-size:.85rem;opacity:.85}
.switch{padding:10px 14px}
.switch[data-on="1"]{border-color:var(--ok);box-shadow:0 0 12px rgba(125,255,177,.35) inset}
.pad{padding:16px 0;font-size:1.4rem;text-align:center}
.bg1{background-image:url(assets/bg1.svg)}
.bg2{background-image:url(assets/bg2.svg)}
.bg3{background-image:url(assets/bg3.svg)}
.bg4{background-image:url(assets/bg4.svg)}
.bg5{background-image:url(assets/bg5.svg)}
.bg6{background-image:url(assets/bg6.svg)}
.bg7{background-image:url(assets/bg7.svg)}
.bg8{background-image:url(assets/bg8.svg)}
.bg9{background-image:url(assets/bg9.svg)}
.bg10{background-image:url(assets/bg10.svg)}