:root{--ink:#06080c;--panel:#0e131b;--line:#1f2937;--text:#e8ecf2;--mute:#9aa6b8;--gold:#dcc68f;--blue:#1479ea;--hi:#4a9bff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font:400 16px/1.6 Poppins,system-ui,sans-serif;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}a{color:inherit}[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.bar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(8px + env(safe-area-inset-top)) 16px 8px;background:rgba(6,8,12,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;min-height:46px}.brand img{height:40px;width:auto;display:block}
.acts{display:flex;gap:10px}.pill{display:flex;align-items:center;gap:6px;height:46px;min-width:46px;padding:0 12px;border-radius:14px;border:1px solid var(--line);background:var(--panel);cursor:pointer;justify-content:center}
.sq{flex-direction:column;gap:5px;padding:0 13px}.sq span{display:block;width:22px;height:2.5px;background:var(--hi);border-radius:2px}
#langList{position:absolute;top:100%;right:16px;margin:6px 0 0;padding:6px;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:16px;min-width:210px;box-shadow:0 20px 40px #000a}
#langList button{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 12px;background:none;border:0;border-radius:10px;cursor:pointer;text-align:left}#langList button:hover{background:#17202c}
#scrim{position:fixed;inset:0;z-index:30;background:#000a}
#drawer{position:fixed;top:0;right:0;bottom:0;z-index:40;width:min(86vw,360px);padding:calc(20px + env(safe-area-inset-top)) 16px 20px;background:var(--panel);border-left:1px solid var(--line);transform:translateX(105%);transition:transform .3s;display:flex;flex-direction:column;gap:10px;overflow:auto}
#drawer.open{transform:none}
#drawer a,#drawer button{display:flex;align-items:center;gap:14px;min-height:60px;padding:0 14px;border-radius:16px;border:1px solid var(--line);background:#0a0f16;text-decoration:none;cursor:pointer;text-align:left}
#drawer svg{flex:none;color:var(--hi)}#drawer b{flex:1;font-weight:600;line-height:1.25}#drawer small{display:block;color:var(--mute);font-weight:400;font-size:.78rem}
em,.beta{font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:2px 9px;border-radius:99px;vertical-align:middle}
main{max-width:980px;margin:auto;padding:0 18px calc(48px + env(safe-area-inset-bottom))}
.hero{padding:44px 0 28px;position:relative}.hero:before{content:"";position:absolute;inset:-60px -40px auto;height:340px;z-index:-1;background:radial-gradient(circle at 20% 30%,#1479ea44,transparent 55%),radial-gradient(circle at 85% 10%,#dcc68f33,transparent 50%)}
h1{font-size:clamp(2rem,8vw,3.4rem);line-height:1.12;margin:0 0 16px;font-weight:800}.hero p{color:var(--mute);font-size:1.08rem;margin:0 0 26px}
h2{font-size:1.5rem;margin:30px 0 14px}h2 small{color:var(--mute);font-weight:500;font-size:.9rem}
.cta,.row{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:99px;background:var(--blue);border:2px solid var(--blue);color:#fff;font-weight:600;text-decoration:none;cursor:pointer}
.btn.ghost{background:none;border-color:var(--gold);color:var(--gold)}.btn.sm{min-height:42px;padding:0 16px}.btn:disabled{opacity:.6}
.grid{display:grid;gap:14px;grid-template-columns:1fr}
.card{display:flex;gap:16px;align-items:center;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:18px;margin:0 0 14px}.grid .card{margin:0}
.card.wide{border-color:var(--gold)}.card h3,.card h4{margin:0;font-size:1.02rem;line-height:1.35}.card h4{margin:10px 0 4px}
.ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#1479ea24;color:var(--hi)}.wide .ico{background:#dcc68f24;color:var(--gold)}
input,select,textarea{display:block;width:100%;margin:0 0 12px;padding:14px;font-size:16px;border-radius:14px;border:1px solid var(--line);background:#0a0f16}
.back{display:inline-block;margin-top:18px;color:var(--hi);text-decoration:none;font-weight:600}.back:before{content:"← "}
.note{color:var(--mute);font-size:.92rem}.warn{border:1px solid var(--gold);border-radius:12px;padding:10px 14px;color:var(--gold)}
.seg{padding:12px 0;border-bottom:1px solid var(--line)}.seg p{margin:0 0 8px}.seg small{color:var(--gold)}.seg button{background:none;border:0;color:var(--hi);cursor:pointer;text-decoration:underline}
.rec{text-align:center;padding:20px 0}#recT{font-size:3rem;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:12px}.rec.on #recT{color:#ff5a5a}
#recList audio{width:100%;margin:6px 0}details summary{cursor:pointer;color:var(--hi);min-height:40px}.between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.card form{width:100%}.card.col{display:block}.prop{border-top:1px solid var(--line);padding:8px 0}
#sheet{position:fixed;inset:0;z-index:60;background:#000b;display:flex;align-items:flex-end;justify-content:center}
#sheet .box{position:relative;width:100%;max-width:520px;max-height:92vh;overflow:auto;padding:26px 20px calc(24px + env(safe-area-inset-bottom));background:var(--panel);border:1px solid var(--line);border-radius:26px 26px 0 0;animation:up .3s}
#sheet h2{margin:0 0 18px}#sheet label span{display:block;margin:0 0 6px;color:var(--mute);font-size:.9rem}
.x{position:absolute;top:12px;right:14px;width:44px;height:44px;font-size:1.8rem;background:none;border:0;cursor:pointer}.hp{position:absolute;left:-9999px;height:0;opacity:0}
#cMsg.ok{color:#5fe0a0}#cMsg.bad{color:#ff7a7a}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:90;transform:translate(-50%,30px);opacity:0;background:var(--gold);color:var(--ink);padding:12px 20px;border-radius:99px;font-weight:600;transition:.3s;pointer-events:none;max-width:90vw}#toast.on{opacity:1;transform:translate(-50%,0)}
#splash{position:fixed;inset:0;z-index:100;background:#05070b;display:grid;place-items:center;transition:opacity .7s}#splash.out{opacity:0;pointer-events:none}#cv{position:absolute;inset:0}
.sp{position:relative;text-align:center}.sp img{width:112px;height:112px;border-radius:26px;animation:pop 1.2s cubic-bezier(.2,.9,.3,1.2) both,glow 2s ease-in-out infinite alternate}.sp h1{margin:20px 0 0;color:var(--gold);animation:rise 1s .6s both}.sp span{color:var(--hi)}
@keyframes pop{from{opacity:0;transform:scale(.3) rotate(-25deg)}to{opacity:1;transform:none}}@keyframes glow{to{box-shadow:0 0 60px 8px #4a9bff80}}
@keyframes rise{from{opacity:0;transform:translateY(16px);letter-spacing:.4em}to{opacity:1;transform:none}}@keyframes up{from{transform:translateY(60px);opacity:0}}
@media(min-width:620px){.grid{grid-template-columns:1fr 1fr}.card.wide{grid-column:1/-1}#sheet{align-items:center}#sheet .box{border-radius:26px}}
@media(min-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}