:root{
  --red:#36a9ff!important;--red2:#78d8ff!important;--red3:#6857ff!important;
  --dark:#03040d!important;--dark2:#07091a!important;
  --glass:rgba(7,10,29,.82)!important;--glass2:rgba(11,14,38,.68)!important;
  --border:rgba(61,170,255,.25)!important;--border2:rgba(139,103,255,.50)!important;
  --glow:0 0 22px rgba(50,159,255,.38)!important;--glow2:0 0 55px rgba(109,77,255,.50)!important;
  --otaku-blue:#3db9ff;--otaku-cyan:#7ee7ff;--otaku-violet:#895cff;--otaku-ink:#03040d;
}
html{scroll-behavior:smooth;background:#02030a}
body{background:#02030a!important;color:#eef7ff!important;min-height:100vh;position:relative;overflow-x:hidden}
body::before{background:radial-gradient(circle at 12% 20%,rgba(54,169,255,.18),transparent 30%),radial-gradient(circle at 88% 16%,rgba(137,92,255,.17),transparent 28%),radial-gradient(circle at 50% 90%,rgba(36,78,190,.16),transparent 35%),linear-gradient(135deg,#02030a 0%,#070a1c 48%,#050315 100%)!important;opacity:1!important}
body::after{background-image:linear-gradient(rgba(94,199,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(139,103,255,.035) 1px,transparent 1px)!important;background-size:42px 42px!important;animation:otakuGrid 18s linear infinite!important}
@keyframes otakuGrid{to{background-position:42px 42px}}
.otaku-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#otakuCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.8}
.otaku-fx::before,.otaku-fx::after{content:"";position:absolute;width:48vw;height:48vw;border:1px solid rgba(97,192,255,.15);border-radius:50%;filter:drop-shadow(0 0 28px rgba(73,167,255,.22));animation:chakraSpin 24s linear infinite}
.otaku-fx::before{left:-18vw;top:8vh}.otaku-fx::after{right:-20vw;bottom:-15vw;animation-direction:reverse;animation-duration:31s}
@keyframes chakraSpin{to{transform:rotate(360deg)}}
.anime-speedline{position:absolute;inset:-30%;background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0 4deg,rgba(82,180,255,.025) 4.2deg 4.5deg);animation:speedSpin 55s linear infinite}
@keyframes speedSpin{to{transform:rotate(360deg)}}
.otaku-brandbar{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 18px;padding:8px 18px;width:max-content;max-width:94%;border:1px solid rgba(105,194,255,.24);border-radius:999px;background:linear-gradient(90deg,rgba(5,9,28,.84),rgba(16,11,45,.76));box-shadow:0 0 30px rgba(59,148,255,.16);backdrop-filter:blur(16px)}
.otaku-brandbar img{width:112px;height:42px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(59,172,255,.65))}
.otaku-brandbar span{font-family:'Orbitron','Kanit',sans-serif;font-size:.68rem;letter-spacing:.22em;color:#9ddfff;text-transform:uppercase}
.panel,.card,.rekey-card,.sidebar,.topbar,.stepper-wrap,.server-card,.feature-card,.confirm-box,.modal-box{background:linear-gradient(145deg,rgba(7,11,31,.92),rgba(15,11,43,.78))!important;border-color:rgba(79,177,255,.28)!important;box-shadow:0 18px 65px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.04),0 0 35px rgba(76,118,255,.10)!important;backdrop-filter:blur(18px)}
.panel,.card,.rekey-card,.feature-card{position:relative;overflow:hidden}
.panel::before,.card::before,.rekey-card::before,.feature-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#65ddff,#8b62ff,transparent);animation:energySweep 3.8s ease-in-out infinite}
@keyframes energySweep{0%,100%{transform:translateX(-70%);opacity:.35}50%{transform:translateX(70%);opacity:1}}
.brand-icon{background:transparent!important;border:none!important;box-shadow:none!important}.brand-logo-img,.brand-icon img{filter:drop-shadow(0 0 13px rgba(56,171,255,.75))}
.brand-title,.title,h1,h2,.section-title,.panel-title{background:linear-gradient(90deg,#fff,#74ddff,#a485ff);-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:0 0 18px rgba(67,170,255,.18)}
.btn,.btn-rekey,.back-btn,.mini-action,.modal-btn,.confirm-feature-btn{border-color:rgba(104,198,255,.38)!important;background:linear-gradient(135deg,rgba(27,130,255,.92),rgba(103,63,220,.92))!important;color:#fff!important;box-shadow:0 8px 25px rgba(39,117,255,.24),inset 0 1px rgba(255,255,255,.15)!important;transition:.24s ease!important}
.btn:hover,.btn-rekey:hover,.back-btn:hover,.mini-action:hover,.modal-btn:hover,.confirm-feature-btn:hover{transform:translateY(-2px) scale(1.01)!important;box-shadow:0 12px 35px rgba(56,168,255,.36),0 0 24px rgba(129,89,255,.22)!important}
.control,.cyber-input,input,select,textarea,.conn-box{background:rgba(2,6,22,.72)!important;border-color:rgba(86,181,255,.26)!important;color:#effaff!important;box-shadow:inset 0 0 20px rgba(33,82,164,.10)!important}
.control:focus,.cyber-input:focus,input:focus{border-color:#63ceff!important;box-shadow:0 0 0 3px rgba(65,177,255,.11),0 0 26px rgba(86,145,255,.18)!important}
.step-circle,.guide-num,.step-num,.brand-icon,.page-pill,.tag.ok,.status-online{background:linear-gradient(135deg,#159cff,#7257e8)!important;border-color:#72d9ff!important;color:#fff!important;box-shadow:0 0 24px rgba(44,158,255,.35)!important}
.srv-dot,.dot.ok{background:#48e8ff!important;box-shadow:0 0 14px #48dfff!important}
.alert-info,.alert-success{background:rgba(27,120,203,.12)!important;border-color:rgba(83,192,255,.28)!important;color:#bdeaff!important}
.sidebar{border-right:1px solid rgba(93,181,255,.22)!important}
.switch.on{background:linear-gradient(90deg,#1eaaff,#795cff)!important}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#03040d}::-webkit-scrollbar-thumb{background:linear-gradient(#2faeff,#815cff);border-radius:20px}
@media(max-width:640px){.otaku-brandbar span{display:none}.otaku-brandbar img{width:96px}.otaku-brandbar{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}}

/* =========================================================
   OTAKU ANIME UI V2 — cinematic layout + loader
   ========================================================= */
:root{
  --anime-bg:#02040d;--anime-panel:rgba(7,12,34,.78);--anime-blue:#34b8ff;
  --anime-cyan:#8ef3ff;--anime-violet:#8d66ff;--anime-pink:#c45cff;
  --anime-line:rgba(102,202,255,.26);--anime-text:#eef9ff;--anime-muted:#91a8c7;
}
body{background:var(--anime-bg)!important;cursor:default}
body.loader-active{overflow:hidden!important}

/* cinematic background layers */
.otaku-fx{background:
 radial-gradient(circle at 18% 16%,rgba(41,149,255,.18),transparent 28%),
 radial-gradient(circle at 82% 24%,rgba(139,78,255,.16),transparent 30%),
 linear-gradient(145deg,rgba(2,4,13,.98),rgba(4,9,27,.95) 50%,rgba(10,4,29,.96));
}
.otaku-fx .anime-speedline{opacity:.9;mix-blend-mode:screen}
.otaku-fx::before{box-shadow:inset 0 0 90px rgba(60,168,255,.08),0 0 80px rgba(54,169,255,.11)}
.otaku-fx::after{box-shadow:inset 0 0 90px rgba(139,92,255,.08),0 0 80px rgba(139,92,255,.11)}

/* anime silhouette decoration */
.anime-guardian{position:fixed;right:-42px;bottom:-34px;width:min(38vw,500px);height:min(82vh,790px);z-index:0;pointer-events:none;opacity:.22;filter:drop-shadow(0 0 34px rgba(71,173,255,.46));transform-origin:bottom right;animation:guardianFloat 7s ease-in-out infinite}
.anime-guardian::before{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(83,210,255,.9),rgba(88,88,255,.62) 43%,rgba(179,70,255,.36));clip-path:polygon(49% 2%,57% 8%,64% 7%,60% 15%,70% 19%,63% 24%,67% 31%,60% 36%,67% 49%,60% 60%,75% 93%,61% 100%,49% 70%,37% 100%,23% 94%,39% 60%,32% 48%,39% 35%,33% 29%,41% 23%,36% 17%,44% 15%,41% 7%);mask:linear-gradient(#000,transparent 99%)}
.anime-guardian::after{content:"";position:absolute;right:13%;top:21%;width:82%;height:4px;background:linear-gradient(90deg,transparent,#8ef3ff,#8c65ff,transparent);transform:rotate(-42deg);box-shadow:0 0 15px #4cbcff,0 0 42px #735dff;animation:bladePulse 2.5s ease-in-out infinite}
@keyframes guardianFloat{50%{transform:translateY(-13px) rotate(.6deg)}}
@keyframes bladePulse{50%{opacity:.4;filter:blur(1px)}}

/* page containers become asymmetric anime panels */
.page-wrap,.container,.main-wrap,.tutorial-wrap,.rekey-wrap{position:relative;z-index:2}
.page-wrap{width:min(1180px,calc(100% - 28px))!important}
.panel,.card,.rekey-card,.feature-card,.server-card,.confirm-box,.modal-box{
  border-radius:22px!important;border:1px solid rgba(103,196,255,.24)!important;
  background:linear-gradient(145deg,rgba(6,12,33,.92),rgba(13,10,43,.76))!important;
  box-shadow:0 24px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(80,166,255,.035)!important;
}
.panel::after,.card::after,.rekey-card::after,.feature-card::after{content:"";position:absolute;right:-42px;bottom:-42px;width:120px;height:120px;border:1px solid rgba(119,216,255,.12);border-radius:50%;box-shadow:0 0 0 18px rgba(102,108,255,.025),0 0 0 38px rgba(154,79,255,.02);pointer-events:none}
.topbar{padding:14px 18px!important;border-radius:18px!important;background:rgba(5,10,28,.66)!important;border:1px solid rgba(90,196,255,.18)!important;backdrop-filter:blur(20px) saturate(135%)}
.brand-title{font-weight:900!important;letter-spacing:.04em!important}

/* varied page identities */
body.page-index .main-grid{grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)!important;gap:22px!important}
body.page-index .panel:first-child{clip-path:polygon(0 0,97% 0,100% 36px,100% 100%,0 100%)}
body.page-menu .feature-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;gap:18px!important}
body.page-menu .feature-card:nth-child(even){transform:translateY(14px)}
body.page-tutorial .guide-step:nth-child(even){margin-left:6%!important}
body.page-rekey .rekey-card{max-width:760px!important;margin-inline:auto!important;clip-path:polygon(0 0,calc(100% - 38px) 0,100% 38px,100% 100%,0 100%)}

/* loader */
#pageLoader{position:fixed;inset:0;z-index:999999;display:grid;place-items:center;padding:20px;background:
 radial-gradient(circle at 50% 42%,rgba(34,129,255,.20),transparent 24%),
 radial-gradient(circle at 68% 58%,rgba(135,73,255,.18),transparent 25%),
 linear-gradient(135deg,#01030a 0%,#040a1e 48%,#09031b 100%);transition:opacity .7s ease,visibility .7s ease;overflow:hidden}
#pageLoader.loader-hide{opacity:0;visibility:hidden;pointer-events:none}
#pageLoader::before{content:"";position:absolute;inset:-35%;background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0 5deg,rgba(84,192,255,.036) 5.15deg 5.45deg);animation:loaderSpin 28s linear infinite}
#pageLoader::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 44%,rgba(136,232,255,.07) 49%,transparent 54%);animation:loaderFlash 2.8s ease-in-out infinite}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
@keyframes loaderFlash{0%,70%,100%{transform:translateX(-80%);opacity:0}78%{opacity:1}90%{transform:translateX(80%);opacity:0}}
.proxy-loader-card{position:relative;width:min(520px,94vw);padding:38px 34px 30px;text-align:center;border:1px solid rgba(103,210,255,.32);border-radius:28px;background:linear-gradient(145deg,rgba(6,13,36,.88),rgba(18,9,48,.80));box-shadow:0 32px 100px rgba(0,0,0,.6),0 0 70px rgba(56,153,255,.18),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(24px);overflow:hidden}
.proxy-loader-card::before{content:"";position:absolute;left:-35%;top:0;width:40%;height:2px;background:linear-gradient(90deg,transparent,#7ff0ff,#8e65ff);box-shadow:0 0 18px #58caff;animation:cardScan 1.8s linear infinite}
.proxy-loader-card::after{content:"";position:absolute;right:-90px;bottom:-115px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(105,203,255,.14);box-shadow:0 0 0 24px rgba(99,104,255,.035),0 0 0 52px rgba(171,75,255,.025)}
@keyframes cardScan{to{left:100%}}
.proxy-loader-orbit{position:relative;width:176px;height:176px;margin:0 auto 20px;display:grid;place-items:center}
.proxy-loader-orbit::before,.proxy-loader-orbit::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(111,218,255,.36);border-left-color:#56c9ff;border-right-color:#8a63ff;box-shadow:0 0 30px rgba(65,176,255,.22);animation:orbitA 3.1s linear infinite}
.proxy-loader-orbit::after{inset:18px;border-style:dashed;animation-direction:reverse;animation-duration:4.6s}
@keyframes orbitA{to{transform:rotate(360deg)}}
.proxy-loader-mark{position:relative;width:122px;height:122px;overflow:hidden!important;padding:5px!important;border-radius:26px;background:radial-gradient(circle,rgba(39,132,255,.22),rgba(7,10,28,.9));border:1px solid rgba(126,222,255,.3);box-shadow:0 0 42px rgba(54,167,255,.35),inset 0 0 28px rgba(119,76,255,.16);z-index:2}
.proxy-loader-mark img{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:12px!important;filter:drop-shadow(0 0 13px rgba(65,178,255,.85));animation:logoBreath 2.2s ease-in-out infinite}
@keyframes logoBreath{50%{transform:scale(1.055);filter:drop-shadow(0 0 22px rgba(100,218,255,.95))}}
.proxy-loader-title{font-family:'Orbitron','Kanit',sans-serif;font-size:clamp(1.45rem,5vw,2.25rem);font-weight:900;letter-spacing:.09em;margin:0 0 6px;background:linear-gradient(90deg,#fff,#79e7ff,#a77dff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px rgba(76,182,255,.18)}
.proxy-loader-subtitle{margin:0 auto 20px;max-width:410px;color:#9eb2d1;font-size:.9rem;line-height:1.65}
.proxy-loader-track{height:9px;border-radius:999px;background:rgba(1,4,15,.75);border:1px solid rgba(92,196,255,.22);overflow:hidden;box-shadow:inset 0 0 12px rgba(0,0,0,.7)}
.proxy-loader-bar{height:100%;width:8%;border-radius:inherit;background:linear-gradient(90deg,#29a9ff,#78edff 48%,#8a5fff);box-shadow:0 0 18px rgba(74,196,255,.85);transition:width .22s ease}
.proxy-loader-status{margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.08em;color:#7ddfff}
.loader-anime{position:absolute;left:-36px;bottom:-22px;width:190px;height:260px;opacity:.24;filter:drop-shadow(0 0 22px rgba(66,169,255,.55));pointer-events:none}
.loader-anime::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#8beeff,#616dff 55%,#bd5cff);clip-path:polygon(50% 0,58% 8%,67% 7%,61% 16%,70% 22%,62% 28%,68% 39%,61% 49%,74% 88%,62% 100%,50% 69%,37% 100%,24% 89%,39% 49%,31% 38%,39% 27%,32% 21%,42% 15%,39% 7%)}
.loader-sparks{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#8cecff 0 1px,transparent 1.5px),radial-gradient(circle,#9b78ff 0 1px,transparent 1.5px);background-size:47px 47px,73px 73px;background-position:0 0,18px 14px;animation:sparkDrift 9s linear infinite;opacity:.38}
@keyframes sparkDrift{to{background-position:47px -47px,-55px -59px}}

/* smoother interactions */
a,button,.btn,.feature-card,.guide-step,.server-card,input,select{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease,background .25s ease!important}
.feature-card:hover,.guide-step:hover,.server-card:hover{transform:translateY(-6px)!important;border-color:rgba(119,224,255,.48)!important;box-shadow:0 28px 70px rgba(0,0,0,.5),0 0 32px rgba(76,157,255,.15)!important}

@media(max-width:820px){.anime-guardian{width:360px;opacity:.11}.loader-anime{opacity:.12}.proxy-loader-card{padding:30px 20px 24px}body.page-index .main-grid{grid-template-columns:1fr!important}.body.page-menu .feature-card:nth-child(even){transform:none}}
@media(max-width:560px){.proxy-loader-orbit{width:148px;height:148px}.proxy-loader-mark{width:102px;height:102px}.proxy-loader-subtitle{font-size:.82rem}.anime-guardian{display:none}}

/* ===== V8 OPTIMIZED ANIME SNOW ===== */
.otaku-snow{
  position:fixed;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
  transform:translateZ(0);
}
.otaku-snowflake{
  position:absolute;
  left:var(--left);
  top:-24px;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  opacity:var(--opacity);
  background:radial-gradient(circle at 35% 35%,#fff 0 22%,rgba(225,245,255,.95) 38%,rgba(122,203,255,.42) 70%,transparent 74%);
  box-shadow:0 0 7px rgba(176,225,255,.42);
  will-change:transform;
  animation:otakuSnowFall var(--duration) linear var(--delay) infinite;
}
.otaku-snowflake.is-crystal{
  border-radius:2px;
  background:rgba(225,246,255,.88);
  box-shadow:0 0 8px rgba(104,203,255,.52);
  transform:rotate(45deg);
}
@keyframes otakuSnowFall{
  0%{transform:translate3d(0,-7vh,0) rotate(0deg)}
  35%{transform:translate3d(var(--drift-a),35vh,0) rotate(110deg)}
  70%{transform:translate3d(var(--drift-b),76vh,0) rotate(245deg)}
  100%{transform:translate3d(var(--drift-c),112vh,0) rotate(360deg)}
}
@media (max-width:768px){
  .otaku-snowflake:nth-child(n+23){display:none}
  .otaku-snowflake{box-shadow:0 0 5px rgba(176,225,255,.3)}
}
@media (max-width:420px){.otaku-snowflake:nth-child(n+17){display:none}}
@media (prefers-reduced-motion:reduce){.otaku-snow{display:none!important}}