:root{--bg:#030711;--surface:rgba(8,15,30,.97);--card:rgba(13,20,40,.78);--card-2:rgba(20,30,55,.65);--border:rgba(148,163,184,.09);--border-b:rgba(148,163,184,.2);--clr-text:#f0f6ff;--muted:#8094b8;--brand:#22d3ee;--violet:#a78bfa;--ok:#4ade80;--danger:#f87171;--gold:#fbbf24;--glow:rgba(34,211,238,.18);--glow-v:rgba(167,139,250,.18)}
html[data-theme=light]{--bg:#f0f6ff;--surface:rgba(255,255,255,.97);--card:rgba(255,255,255,.82);--card-2:rgba(241,245,249,.82);--border:rgba(15,23,42,.08);--border-b:rgba(15,23,42,.16);--clr-text:#0d1b2e;--muted:#4a6490;--brand:#0891b2;--violet:#7c3aed;--ok:#16a34a;--danger:#dc2626;--gold:#d97706;--glow:rgba(8,145,178,.14);--glow-v:rgba(124,58,237,.12)}
*,::after,::before{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;font-family:Inter,system-ui,sans-serif;background-color:var(--bg);color:var(--clr-text);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse 100% 65% at 0 0,rgba(34,211,238,.13) 0,transparent 55%),radial-gradient(ellipse 80% 55% at 100% 5%,rgba(167,139,250,.15) 0,transparent 55%),radial-gradient(ellipse 60% 45% at 50% 100%,rgba(74,222,128,.08) 0,transparent 55%),var(--bg)}
body::after{content:"";position:fixed;inset:0;z-index:-1;background-image:linear-gradient(rgba(148,163,184,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.025) 1px,transparent 1px);background-size:64px 64px;pointer-events:none}
html[data-theme=light] body::before{background:radial-gradient(ellipse 100% 65% at 0 0,rgba(8,145,178,.08) 0,transparent 55%),radial-gradient(ellipse 80% 55% at 100% 5%,rgba(124,58,237,.08) 0,transparent 55%),radial-gradient(ellipse 60% 45% at 50% 100%,rgba(22,163,74,.05) 0,transparent 55%),var(--bg)}
html[data-theme=light] body::after{background-image:linear-gradient(rgba(15,23,42,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px);background-size:64px 64px}
.glass{background:var(--card);border:1px solid var(--border)}
.grad-border{position:relative;background:var(--card)}
.grad-border::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--brand),var(--violet));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.text-grad{background:linear-gradient(135deg,var(--brand) 0,var(--violet) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-grad-gold{background:linear-gradient(135deg,var(--gold) 0,#f97316 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-shimmer{background:linear-gradient(90deg,var(--brand),var(--violet),var(--brand));background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:none}
.field{width:100%;background:rgba(5,10,25,.55);border:1px solid var(--border);border-radius:12px;padding:12px 16px;color:var(--clr-text);font-size:15px;outline:0;transition:all .2s;font-family:inherit}
.field:focus{border-color:var(--brand);background:rgba(34,211,238,.04);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
html[data-theme=light] .field{background:rgba(255,255,255,.7)}
html[data-theme=light] .field:focus{background:rgba(255,255,255,.95)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;border:none;text-decoration:none;transition:all .22s cubic-bezier(.16,1,.3,1);font-family:inherit;line-height:1;white-space:nowrap;position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 60%);pointer-events:none}
.btn-primary{background:linear-gradient(135deg,var(--brand) 0,var(--violet) 100%);color:#fff;box-shadow:0 4px 24px rgba(34,211,238,.28),0 2px 8px rgba(0,0,0,.3)}
.btn-primary:hover{box-shadow:0 8px 36px rgba(34,211,238,.45),0 4px 16px rgba(0,0,0,.3);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--clr-text);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--border);border-color:var(--border-b)}
.nav-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-size:13px;font-weight:500;padding:7px 12px;border-radius:8px;border:1px solid transparent;transition:all .18s}
.nav-link:visited{color:var(--muted)}
.nav-link:hover{color:var(--clr-text);background:rgba(148,163,184,.08);border-color:var(--border)}
.nav-cta{background:linear-gradient(135deg,var(--brand) 0,var(--violet) 100%);color:#fff!important;border-color:transparent!important;box-shadow:0 4px 18px rgba(34,211,238,.28)}
.nav-cta:hover{box-shadow:0 6px 28px rgba(34,211,238,.45);transform:translateY(-1px)}
.nav-fs12{font-size:12px}
.nav-muted{color:var(--muted)}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:13px;font-weight:500;transition:all .18s;border:1px solid transparent}
.sidebar-item:visited{color:var(--muted)}
.sidebar-item:hover{color:var(--clr-text);background:rgba(148,163,184,.07);border-color:var(--border)}
.sidebar-item.active{color:var(--brand);background:rgba(34,211,238,.09);border-color:rgba(34,211,238,.22)}
.sidebar-item.active:visited{color:var(--brand)}
.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:9999px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.badge-brand{background:rgba(34,211,238,.12);color:var(--brand);border:1px solid rgba(34,211,238,.26)}
.badge-violet{background:rgba(167,139,250,.12);color:var(--violet);border:1px solid rgba(167,139,250,.26)}
.badge-ok{background:rgba(74,222,128,.12);color:var(--ok);border:1px solid rgba(74,222,128,.26)}
.badge-gold{background:rgba(251,191,36,.12);color:var(--gold);border:1px solid rgba(251,191,36,.26)}
.badge-danger{background:rgba(248,113,113,.12);color:var(--danger);border:1px solid rgba(248,113,113,.26)}
#toast-container{position:fixed;top:68px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:min(360px,calc(100vw - 32px))}
.toast{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-radius:14px;font-size:13px;font-weight:500;line-height:1.5;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid;pointer-events:all;animation:slideDown .35s cubic-bezier(.16,1,.3,1) both;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.toast-icon{flex-shrink:0;margin-top:1px}
.toast-error{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.25);color:var(--danger)}
.toast-success{background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.25);color:var(--ok)}
.toast-info{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.25);color:var(--brand)}
.prog-bar{height:4px;border-radius:9999px;background:var(--border);overflow:hidden}
.prog-fill{height:100%;border-radius:9999px;background:linear-gradient(90deg,var(--brand),var(--violet));transition:width .6s cubic-bezier(.16,1,.3,1)}
.dot-on,.dot-off{display:inline-block;width:8px;height:8px;border-radius:50%}
.dot-on{background:var(--ok)}
.dot-off{background:var(--danger)}
.field-wrap{position:relative}
.field-wrap .field{padding-top:22px;padding-bottom:8px}
.field-wrap .float-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:500;color:var(--muted);pointer-events:none;transition:all .2s cubic-bezier(.16,1,.3,1)}
.field-wrap input:focus~.float-label,.field-wrap input:not(:placeholder-shown)~.float-label{top:10px;transform:translateY(0);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-b);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.pw-bar{height:3px;border-radius:9999px;background:var(--border);overflow:hidden;margin-top:8px}
.pw-fill{height:100%;border-radius:9999px;width:0;transition:width .4s,background .3s}
.pw-text{font-size:11px;font-weight:600;margin-top:4px;min-height:16px}
.btn-spin{display:inline-block;animation:btn-spin .7s linear infinite}
.section-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.orb-brand{width:420px;height:420px;background:var(--brand);opacity:.07;top:-120px;right:-70px}
.orb-violet{width:320px;height:320px;background:var(--violet);opacity:.09;bottom:-100px;left:50px}
.orb-ok{width:160px;height:160px;background:var(--ok);opacity:.07;top:30%;left:60%}
#main-card{animation:none!important}
.animate-fade-up{animation:none!important;opacity:1;transform:none}
.animate-fade-in{animation:fade-in .4s ease both}
.animate-slide-down{animation:slideDown .35s cubic-bezier(.16,1,.3,1) both}
.delay-1,.delay-2,.delay-3{animation-delay:0s!important}
.hero-visual{position:absolute;right:26px;top:50%;transform:translateY(-50%);width:min(41%,440px);min-width:290px;opacity:.86;filter:drop-shadow(0 24px 60px rgba(5,10,25,.58));animation:none;pointer-events:none;user-select:none}
.site-header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--border)}
.header-accent{height:2px;background:linear-gradient(90deg,var(--brand),var(--violet),var(--brand))}
.header-shell,.main-shell{max-width:1300px;margin:0 auto;padding:0 20px}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;flex-wrap:wrap;padding:5px 0}
.logo-link{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--clr-text);font-weight:900;font-size:15px;letter-spacing:-.02em;font-family:"Plus Jakarta Sans",sans-serif;flex-shrink:0}
.logo-icon{width:26px;height:26px;border-radius:8px}
.logo-word{font-size:13px;opacity:.95}
.logo-badge{font-size:8px;padding:2px 7px}
.top-nav{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.lang-wrap{position:relative;display:inline-flex;align-items:center;background:rgba(148,163,184,.07);border:1px solid var(--border);border-radius:8px;padding:0 26px 0 10px}
.lang-select{-webkit-appearance:none;appearance:none;border:none;background:0 0;color:var(--clr-text);font-size:12px;font-weight:500;padding:7px 0;outline:0;cursor:pointer;min-width:55px;font-family:inherit}
.lang-caret{position:absolute;right:7px;pointer-events:none;color:var(--muted)}
.theme-toggle{padding:7px;min-width:33px;justify-content:center;color:var(--clr-text);background:rgba(148,163,184,.06);border-color:var(--border)}
.theme-toggle:hover{color:var(--clr-text);background:rgba(148,163,184,.12);border-color:var(--border-b)}
.theme-icon{width:14px;height:14px}
.theme-icon-sun{display:none}
.main-wrap{padding:32px 0 80px}
.hero{position:relative;overflow:hidden;border-radius:28px;padding:52px 44px;margin-bottom:28px;background:linear-gradient(145deg,rgba(13,20,45,.92) 0,rgba(5,8,22,.98) 100%);border:1px solid var(--border);box-shadow:0 28px 80px rgba(0,0,0,.6)}
.hero-content{position:relative;z-index:1;max-width:680px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(34,211,238,.09);border:1px solid rgba(34,211,238,.22);border-radius:9999px;padding:5px 15px;margin-bottom:20px}
.hero-title{margin:0 0 16px;font-size:clamp(28px,4.5vw,52px);font-weight:900;line-height:1.08;letter-spacing:-.035em;font-family:"Plus Jakarta Sans",sans-serif}
.hero-subtitle{margin:0;color:var(--muted);font-size:clamp(14px,2vw,17px);max-width:540px;line-height:1.7}
.page-grid{display:grid;grid-template-columns:1fr;gap:24px}
.main-card{border-radius:24px;padding:30px}
.hide-sm{display:flex}
@keyframes shimmer-text{0%{background-position:0% center}100%{background-position:200% center}}
@keyframes dot-pulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.4)}50%{box-shadow:0 0 0 5px rgba(74,222,128,0)}}
@keyframes card-glow{0%,100%{box-shadow:0 0 0 1px rgba(34,211,238,.1),0 24px 64px rgba(0,0,0,.55)}50%{box-shadow:0 0 0 1px rgba(167,139,250,.25),0 24px 64px rgba(0,0,0,.55),0 0 64px rgba(34,211,238,.07)}}
@keyframes fade-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes slideDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes drift{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-8px) translateX(5px)}}
@keyframes hdr-shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@media (max-width:640px){.hide-sm{display:none!important}#hero-section{padding:28px 20px!important;border-radius:20px!important;margin-bottom:18px!important}#main-card{padding:18px!important;border-radius:18px!important}}
@media (max-width:1024px){.hide-md{display:none!important}.hero-visual{display:none!important}}