@font-face{font-family:Condensed;src:url('./assets/roboto-condensed-cyrillic-700.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Condensed;src:url('./assets/roboto-condensed-latin-700.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:dark;--bg:#101216;--panel:#171a20;--text:#f2f3f5;--muted:#a2a8b4;--line:#2b2f37;--accent:#477bff;--error:#ff8a84;--ok:#5fd39a;--heading:Condensed,'Arial Narrow',Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:#95b0ff}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #92b1ff;outline-offset:3px}
[hidden]{display:none!important}
h1,h2,p{margin-top:0}
.wrap{width:min(760px,calc(100% - 32px));margin-inline:auto}
.header{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:88px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;white-space:nowrap;font:700 18px/1.1 var(--heading);color:var(--text);text-decoration:none}
.brand-icon{display:grid;place-items:center;width:46px;height:34px;border:2px solid var(--text);border-radius:5px;transform:rotate(-7deg);font:700 24px/1 var(--heading);letter-spacing:-1px}
.brand small{display:block;font:10px/1.2 Arial,sans-serif;letter-spacing:2.5px;margin-top:7px;color:var(--muted)}
.brand small span{color:#83a5ff}
.text-link{font-size:13px;font-weight:700;color:var(--text);text-decoration:none}
.text-link:hover{color:#95b0ff}
main{padding-block:44px 64px}
.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;margin-bottom:14px;color:#b4bbc8}
h1{font:700 clamp(38px,6vw,56px)/1.03 var(--heading);letter-spacing:-1px;margin-bottom:18px}
h1>span{color:#7ba0ff}
h2{font:700 25px/1.15 var(--heading);margin-bottom:10px}
.muted{color:var(--muted)}
.small{font-size:12px;line-height:1.7}
.intro{margin-bottom:28px}
.intro p{max-width:620px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:26px 28px;margin-bottom:18px}
.step-number{display:inline-block;color:#83a5ff;font:700 14px/1 var(--heading);margin-bottom:12px}
.notice{border:1px solid #6b4a2a;background:#2a2016;color:#ffd7a8;border-radius:6px;padding:14px 18px}
.field{display:flex;flex-direction:column;gap:6px;flex:1;margin-bottom:10px}
.field>span{font-size:12px;font-weight:700;color:#c3c8d2}
input[type=email],input:not([type]){width:100%;min-height:50px;padding:12px 14px;background:#0f1115;border:1px solid #3a404b;border-radius:5px;color:var(--text);font-size:16px}
#code{text-transform:uppercase;letter-spacing:2px;font-family:var(--heading);font-weight:700;font-size:20px}
.field-row{display:flex;gap:12px;align-items:flex-end}
.field-row .field{margin-bottom:0}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 26px;background:var(--accent);color:#fff;border:1px solid transparent;border-radius:5px;font-weight:700;font-size:15px;text-decoration:none;transition:background .2s}
.button:hover:not(:disabled){background:#3569e7}
.button:disabled{background:#2a3242;color:#8790a0}
.button-secondary{background:#262c37;border-color:#3a404b}
.button-secondary:hover:not(:disabled){background:#30384a}
#pay{width:100%;margin-top:6px}
.player{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid #2f5a42;background:#15241c;border-radius:5px;padding:12px 16px}
.player b{display:block;font:700 20px/1.2 var(--heading)}
.link-button{background:none;border:0;color:#95b0ff;font-weight:700;padding:6px}
.error{color:var(--error);font-size:13px;margin:10px 0 0}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:6px}
.pack{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:18px;background:#1c2028;border:1px solid #333a46;border-radius:6px;color:var(--text);transition:border-color .15s,background .15s}
.pack:hover{border-color:#5b6f99}
.pack[aria-checked=true]{border:2px solid var(--accent);background:#1b2538;padding:17px}
.pack b{font:700 30px/1 var(--heading)}
.pack span{color:var(--muted);font-size:12px;letter-spacing:1px}
.pack strong{font-size:18px;margin-top:8px}
.check{display:flex;gap:12px;align-items:flex-start;margin:16px 0;font-size:14px;cursor:pointer}
.check input{width:22px;height:22px;flex-shrink:0;margin:1px 0 0;accent-color:var(--accent)}
.summary{border:1px dashed #3a404b;border-radius:5px;padding:12px 14px;margin:6px 0 10px;font-size:14px}
.summary b{font-size:17px}
#order-status h1{margin-bottom:12px}
#order-status .button{margin-top:10px}
.status-ok{color:var(--ok)}
.status-fail{color:var(--error)}
.footer{border-top:1px solid var(--line);padding-block:30px 40px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.seller{display:flex;flex-direction:column;gap:3px}
.seller b{color:var(--text)}
.footer-legal{display:flex;flex-direction:column;gap:6px}
@media (max-width:560px){
  .panel{padding:20px 18px}
  .field-row{flex-direction:column;align-items:stretch}
  .header{min-height:72px}
  .brand{font-size:16px}
}
