@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/montserrat-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/montserrat-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/montserrat-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/montserrat-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-700-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/montserrat-800-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/montserrat-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Chakra Petch';font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/chakra-700i-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F;}

:root{
  --ground:#FFFFFF; --ink:#0B0D0B; --muted:#616B63; --hairline:#E4EAE5; --wash:#F5F8F6;
  --accent:#00E552; --accent-deep:#00953A; --danger:#C8341F;
  --r:14px; --s--1:.8125rem; --s0:.9375rem; --s1:1.125rem;
}
*{box-sizing:border-box;}
/* Авторский display перебивает браузерное display:none от атрибута hidden,
   поэтому скрытие задаём явно — иначе #boot с display:grid накрывает страницу. */
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'Montserrat',system-ui,sans-serif; font-size:var(--s0); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2{font-weight:800; letter-spacing:-.02em; margin:0; line-height:1.25; text-wrap:balance;}
h1{font-size:1.35rem;} h2{font-size:1.1rem;}
a{color:var(--accent-deep); font-weight:600; text-decoration:none;}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent-deep); outline-offset:2px;}

.boot{position:fixed; inset:0; display:grid; place-items:center; background:var(--ground);}
.app{max-width:520px; margin:0 auto; padding:24px 20px 48px;}

.mark{font-family:'Chakra Petch','Montserrat',sans-serif; font-style:italic; font-weight:700;
      font-size:1.55rem; letter-spacing:-.03em;}
.mark.big{font-size:2.1rem;}
.mark b{color:var(--accent-deep);}

.screen{display:flex; flex-direction:column; gap:16px; min-height:100dvh; padding:24px 0;}
.screen.center{justify-content:center;}

.sub{color:var(--muted); font-size:var(--s--1); margin:0;}
.tiny{font-size:11px; color:var(--muted); line-height:1.45; margin:0;}
.err{color:var(--danger); font-size:var(--s--1); font-weight:600; margin:0;}
label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.12em;
      color:var(--muted); margin-bottom:6px; font-weight:500;}

.field{width:100%; border:1.5px solid var(--hairline); border-radius:10px; padding:12px 13px;
       font:inherit; font-size:var(--s0); color:var(--ink); background:var(--ground);}
.field:focus{border-color:var(--ink); outline:none;}
.code-input{font-weight:800; letter-spacing:.07em; text-transform:uppercase;}

.btn{display:block; width:100%; text-align:center; background:var(--accent); color:var(--ink);
     border:none; border-radius:10px; padding:14px; font-family:inherit; font-weight:800;
     font-size:var(--s0); letter-spacing:-.01em; cursor:pointer;}
.btn:disabled{opacity:.5; cursor:default;}

/* Кнопка-ссылка: пока токен не получен — клик не должен уводить на «#» */
a.btn{text-decoration:none; color:var(--ink);}
a.btn[aria-disabled="true"]{opacity:.55; pointer-events:none;}
.btn.ghost{background:transparent; border:1.5px solid var(--hairline);}
.btn.row{display:flex; align-items:center; justify-content:center; gap:9px;}
.btn svg{width:19px; height:19px; flex:none;}

.or{display:flex; align-items:center; gap:11px; color:var(--muted); font-size:11px;
    text-transform:uppercase; letter-spacing:.14em;}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--hairline);}

/* ── кабинет ── */
.top{display:flex; align-items:center; justify-content:space-between; gap:12px;
     padding-bottom:16px; border-bottom:2px solid var(--ink); margin-bottom:20px;}
.card{border:1.5px solid var(--hairline); border-radius:var(--r); padding:16px; display:flex;
      flex-direction:column; gap:13px; margin-bottom:16px;}
.card.strong{border-color:var(--ink); border-width:2px;}
.bal-v{font-weight:800; font-size:2.4rem; line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums;}
.k{font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);}
.kv{display:flex; justify-content:space-between; gap:10px; padding:8px 0;
    border-bottom:1px solid var(--hairline); font-size:var(--s--1);}
.kv:last-child{border-bottom:none;}
.kv b{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;}
.kv.total{border-top:2px solid var(--ink); border-bottom:none; padding-top:11px;}
.kv.total b{font-size:var(--s1); font-weight:800; letter-spacing:-.02em;}

.chips{display:flex; gap:7px;}
.chips button{flex:1; border:1.5px solid var(--hairline); border-radius:9px; padding:10px 4px;
  font:inherit; font-weight:700; font-size:var(--s--1); background:var(--ground);
  font-variant-numeric:tabular-nums; cursor:pointer;}
.chips button[aria-pressed="true"]{border-color:var(--ink); border-width:2px;}

.stepper{display:flex; align-items:center; justify-content:space-between;
  border:1.5px solid var(--hairline); border-radius:10px; padding:7px 9px;}
.stepper button{width:36px; height:36px; border-radius:8px; background:var(--wash); border:none;
  font:inherit; font-weight:800; font-size:1.15rem; cursor:pointer;}
.stepper .val{font-weight:800; font-size:1.2rem; font-variant-numeric:tabular-nums;}

.meter{height:6px; border-radius:99px; background:var(--hairline); overflow:hidden;}
.meter i{display:block; height:100%; background:var(--accent);}
.rowb{display:flex; justify-content:space-between; font-size:11px; color:var(--muted);
      font-variant-numeric:tabular-nums;}

.urlbox{background:var(--wash); border:1px solid var(--hairline); border-radius:10px;
  padding:12px; font-size:11px; word-break:break-all; color:var(--muted); line-height:1.45;}
.tag{background:var(--accent); color:var(--ink); font-size:10px; font-weight:800;
     padding:3px 8px; border-radius:99px; letter-spacing:.02em;}
.tag.off{background:var(--hairline); color:var(--muted);}

.srv{display:flex; align-items:center; gap:9px; padding:9px 0;
     border-bottom:1px solid var(--hairline); font-size:var(--s--1);}
.srv:last-child{border-bottom:none;}
.dot{width:7px; height:7px; border-radius:99px; background:var(--accent); flex:none;}

.codebox{border:2px solid var(--ink); border-radius:var(--r); padding:14px; display:flex;
  align-items:center; justify-content:space-between; gap:10px;}
.codebox .c{font-weight:800; letter-spacing:.08em; font-size:1.15rem;}
.cnt{display:flex; align-items:baseline; gap:9px;}
.cnt b{font-weight:800; font-size:2.1rem; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
.who{display:flex; align-items:center; gap:9px; padding:8px 0;
     border-bottom:1px solid var(--hairline); font-size:var(--s--1);}
.who:last-child{border-bottom:none;}
.who .av{width:24px; height:24px; border-radius:99px; background:var(--wash);
  border:1px solid var(--hairline); display:grid; place-items:center; font-size:10px; font-weight:700;}
.who .dt{margin-left:auto; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums;}

.step{display:flex; gap:11px; align-items:flex-start;}
.step .n{font-weight:800; font-size:11px; width:22px; height:22px; border-radius:99px;
  background:var(--ink); color:var(--ground); display:grid; place-items:center; flex:none; margin-top:2px;}
.step p{margin:0; font-size:var(--s--1); line-height:1.45;}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); color:var(--ground); padding:11px 18px; border-radius:99px;
  font-size:var(--s--1); font-weight:600; z-index:9;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}