
:root{--bg:#0a0e18;--card:#141c2e;--line:#2c3a58;--tx:#eef2fa;--mut:#9aa8c4;--gold:#f2b52d;--ink:#0a0e18;--up:#27c485;--dn:#ef5a5a;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--tx);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
header{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
header img{width:46px;height:46px;border-radius:50%;cursor:pointer}header b{color:var(--gold);letter-spacing:.5px}
header button{margin-left:auto}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--tx);border-radius:12px;padding:9px 16px;transition:.2s}
button:hover:not(:disabled){border-color:var(--gold);transform:translateY(-1px)}button:disabled{opacity:.35;cursor:default}
.gold{background:var(--gold);color:#111;border-color:var(--gold);font-weight:700}
main{max-width:920px;margin:0 auto;padding:24px 20px 60px}
h1{font-size:clamp(28px,5vw,44px);line-height:1.15;margin:10px 0}h1 span{color:var(--gold)}
.sub{color:var(--mut);margin-bottom:26px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tc{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;text-align:left;animation:up .6s both}
.tc .n{color:var(--gold);font-weight:800;font-size:14px}.tc h3{margin:4px 0;font-size:19px}.tc p{margin:0;color:var(--mut);font-size:14px}
.tc.off{opacity:.45}.tc:not(.off):hover{border-color:var(--gold);transform:translateY(-3px)}
.bar{height:5px;background:var(--line);border-radius:9px;overflow:hidden;margin:6px 0 20px}.bar i{display:block;height:100%;background:var(--gold);width:0;transition:width .5s}
.slide{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:clamp(20px,4vw,38px);min-height:380px;animation:in .55s both}
.slide h2{margin:0 0 6px;font-size:clamp(24px,4vw,34px);color:var(--gold)}.slide .k{color:var(--mut);font-size:14px;text-transform:uppercase;letter-spacing:1px}
.slide p{margin:10px 0}.slide>*{animation:up .6s both}.slide>*:nth-child(2){animation-delay:.1s}.slide>*:nth-child(3){animation-delay:.2s}.slide>*:nth-child(4){animation-delay:.3s}.slide>*:nth-child(5){animation-delay:.4s}.slide>*:nth-child(6){animation-delay:.5s}
.pts{list-style:none;padding:0;margin:14px 0}.pts li{padding:10px 14px 10px 44px;margin:8px 0;background:rgba(242,181,45,.08);border-left:3px solid var(--gold);border-radius:10px;position:relative}
.pts li:before{content:"✓";position:absolute;left:14px;color:var(--gold);font-weight:800}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:14px}
.box{border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(127,127,127,.06)}.box b{color:var(--gold)}
.opt{display:block;width:100%;text-align:left;margin:8px 0;padding:14px 16px}.opt b{color:var(--gold)}
.note{margin-top:16px;padding:12px 14px;border-radius:12px;border:1px dashed var(--dn);color:var(--mut);font-size:15px}
.up{color:var(--up);font-weight:700}.dn{color:var(--dn);font-weight:700}
svg{width:100%;max-width:520px;height:auto;display:block;margin:12px auto}
.nav{display:flex;gap:10px;align-items:center;margin-top:18px}.nav .dots{margin:0 auto;display:flex;gap:7px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line);cursor:pointer}.dots i.on{background:var(--gold);transform:scale(1.3)}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes in{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.ln{stroke-dasharray:1500;stroke-dashoffset:1500;animation:draw 2s .4s forwards}
.ph{width:100%;border-radius:14px;margin:12px 0;display:block;border:1px solid var(--line)}.opt{display:flex;gap:14px;align-items:center}.opt img{width:112px;height:66px;object-fit:cover;border-radius:10px;flex:none}input{width:100%;font:inherit;padding:8px 10px;margin-top:4px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--tx)}small{color:var(--mut)}select{width:100%;font:inherit;padding:8px 10px;margin-top:4px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--tx)}.pp{animation:pop .6s 2s both;transform-box:fill-box;transform-origin:center}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:8px;border-bottom:1px solid var(--line);text-align:left}th{color:var(--gold)}.tw{overflow-x:auto}@keyframes gw{from{width:0}}.bar.g i{animation:gw 1.4s .3s both}.auth{max-width:420px;margin:40px auto;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px}
.auth h2{margin:0 0 4px;color:var(--gold)}.auth label{display:block;margin:12px 0 2px;color:var(--mut);font-size:14px}
.auth .gold,.full{width:100%;margin-top:16px}.tabs{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.tabs button.on{background:var(--gold);color:#111;border-color:var(--gold);font-weight:700}
.err{color:var(--dn);margin-top:10px;font-size:15px}.ok{color:var(--up);margin-top:10px;font-size:15px}
.lnk{background:none;border:none;color:var(--gold);padding:0;text-decoration:underline}
.top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.top .sp{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lock{opacity:.5}.chip{display:inline-block;min-width:30px;margin:2px;padding:3px 8px;border-radius:8px;border:1px solid var(--line);background:none;font-size:13px;cursor:pointer;color:var(--mut)}.chip.on{background:var(--gold);color:#111;border-color:var(--gold);font-weight:700}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:14px 0}.stat .box b{font-size:28px;display:block}
.ed{border:1px solid var(--line);border-radius:12px;padding:14px;min-height:160px;background:var(--bg);outline:none}.ed:focus{border-color:var(--gold)}
textarea{width:100%;min-height:220px;font:13px/1.4 monospace;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--tx)}
.srow{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;margin:6px 0;background:var(--card)}.srow span{flex:1}
.srow button{padding:4px 10px}.mini{padding:5px 10px;font-size:14px}

:root{--bg:#070b14;--card:rgba(15,22,38,.88);--line:#2a3a5c;--tx:#eef2fa;--mut:#9aa8c4;--gold:#f2b52d}
html{background:radial-gradient(1100px 520px at 50% -8%,rgba(242,181,45,.18),transparent 60%),linear-gradient(180deg,#070b14,#0a1424 55%,#070b14);background-attachment:fixed;min-height:100%}
body{background:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22560%22 height=%22360%22 viewBox=%220 0 560 360%22%3E%3Cg opacity=%22.22%22%3E%3Cline x1=%2228%22 y1=%22216.5%22 x2=%2228%22 y2=%22274.5%22 stroke=%22%23ef5a5a%22 stroke-width=%222%22/%3E%3Crect x=%2219%22 y=%22229.5%22 width=%2218%22 height=%2231%22 rx=%222%22 fill=%22%23ef5a5a%22/%3E%3Cline x1=%2278%22 y1=%22179.46711095625895%22 x2=%2278%22 y2=%22248.46711095625895%22 stroke=%22%23ef5a5a%22 stroke-width=%222%22/%3E%3Crect x=%2269%22 y=%22192.46711095625895%22 width=%2218%22 height=%2228%22 rx=%222%22 fill=%22%23ef5a5a%22/%3E%3Cline x1=%22128%22 y1=%22101.07650711027958%22 x2=%22128%22 y2=%22164.07650711027958%22 stroke=%22%23ef5a5a%22 stroke-width=%222%22/%3E%3Crect x=%22119%22 y=%22126.07650711027958%22 width=%2218%22 height=%2224%22 rx=%222%22 fill=%22%23ef5a5a%22/%3E%3Cline x1=%22178%22 y1=%2275.96711095625892%22 x2=%22178%22 y2=%22145.96711095625892%22 stroke=%22%2327c485%22 stroke-width=%222%22/%3E%3Crect x=%22169%22 y=%2288.96711095625892%22 width=%2218%22 height=%2227%22 rx=%222%22 fill=%22%2327c485%22/%3E%3Cline x1=%22228%22 y1=%2222.32039222982391%22 x2=%22228%22 y2=%22101.32039222982391%22 stroke=%22%2327c485%22 stroke-width=%222%22/%3E%3Crect x=%22219%22 y=%2252.32039222982391%22 width=%2218%22 height=%2236%22 rx=%222%22 fill=%22%2327c485%22/%3E%3Cline x1=%22278%22 y1=%2242.5%22 x2=%22278%22 y2=%22133.5%22 stroke=%22%23ef5a5a%22 stroke-width=%222%22/%3E%3Crect x=%22269%22 y=%2261.5%22 width=%2218%22 height=%2259%22 rx=%222%22 fill=%22%23ef5a5a%22/%3E%3Cline x1=%22328%22 y1=%2267.32039222982388%22 x2=%22328%22 y2=%22142.32039222982388%22 stroke=%22%23ef5a5a%22 stroke-width=%222%22/%3E%3Crect x=%22319%22 y=%2283.32039222982388%22 width=%2218%22 height=%2230%22 rx=%222%22 fill=%22%23ef5a5a%22/%3E%3Cline x1=%22378%22 y1=%2248.46711095625892%22 x2=%22378%22 y2=%22138.46711095625892%22 stroke=%22%23ef5a5a%22 stroke-width=%222%22/%3E%3Crect x=%22369%22 y=%2265.46711095625892%22 width=%2218%22 height=%2258%22 rx=%222%22 fill=%22%23ef5a5a%22/%3E%3Cline x1=%22428%22 y1=%22110.07650711027955%22 x2=%22428%22 y2=%22206.07650711027955%22 stroke=%22%2327c485%22 stroke-width=%222%22/%3E%3Crect x=%22419%22 y=%22133.07650711027955%22 width=%2218%22 height=%2258%22 rx=%222%22 fill=%22%2327c485%22/%3E%3Cline x1=%22478%22 y1=%22176.46711095625892%22 x2=%22478%22 y2=%22247.46711095625892%22 stroke=%22%2327c485%22 stroke-width=%222%22/%3E%3Crect x=%22469%22 y=%22194.46711095625892%22 width=%2218%22 height=%2226%22 rx=%222%22 fill=%22%2327c485%22/%3E%3Cline x1=%22528%22 y1=%22218.0%22 x2=%22528%22 y2=%22322.0%22 stroke=%22%2327c485%22 stroke-width=%222%22/%3E%3Crect x=%22519%22 y=%22240.0%22 width=%2218%22 height=%2256%22 rx=%222%22 fill=%22%2327c485%22/%3E%3C/g%3E%3Cpolyline points=%2228,245.0 78,206.46711095625895 128,138.07650711027958 178,102.46711095625892 228,70.32039222982391 278,91.0 328,98.32039222982388 378,94.46711095625892 428,162.07650711027955 478,207.46711095625892 528,268.0%22 fill=%22none%22 stroke=%22%23f2b52d%22 stroke-width=%222%22 opacity=%22.35%22/%3E%3C/svg%3E");background-size:560px 360px;animation:drift 90s linear infinite}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px}
@keyframes drift{to{background-position:560px -360px}}
header{background:rgba(8,12,22,.72);backdrop-filter:blur(8px);border-bottom:1px solid rgba(242,181,45,.3)}
header img{box-shadow:0 0 14px rgba(242,181,45,.5)}
.slide,.tc,.auth,.box{backdrop-filter:blur(6px)}
.slide,.auth{box-shadow:0 12px 40px rgba(0,0,0,.45)}
.tc:not(.off):hover{box-shadow:0 0 22px rgba(242,181,45,.25)}
h1 span{background:linear-gradient(90deg,#f2b52d,#ffe08a);-webkit-background-clip:text;background-clip:text;color:transparent}
button.gold,.gold{box-shadow:0 4px 18px rgba(242,181,45,.3)}

html{background:#050a14!important}
body::before{background:linear-gradient(180deg,rgba(5,10,20,.40),rgba(5,10,20,.62)),url("bg.jpg?v=8") center/cover no-repeat!important;animation:none!important}
body::after{display:none!important}

.fm{text-align:center;font-size:20px;margin:14px 0}.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 8px;font-size:18px}.fr>span:first-child{border-bottom:2px solid currentColor;padding:0 10px 3px}.fr>span:last-child{padding-top:3px}

@keyframes gx{from{transform:scaleX(0)}}@keyframes gy{from{transform:scaleY(0)}}.gx{transform-box:fill-box;transform-origin:left;animation:gx 1.2s .5s both}.gy{transform-box:fill-box;transform-origin:bottom;animation:gy .8s .3s both}

.dots i.seen{background:var(--gold);opacity:.4}
