/* 8nID Anty — web account (cabinet). Builds on site.css tokens. */
.cab{padding:calc(var(--head) + 48px) 0 80px;min-height:80vh}
.auth{max-width:460px;margin:4vh auto 0;display:grid;gap:18px}
.auth .title{font-size:clamp(32px,4vw,48px)}
.auth__form{display:grid;gap:16px;margin-top:10px}
.auth__form--tight{margin-top:0;gap:14px}
.auth__links{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.auth__note{color:var(--dim);font-size:14px;line-height:1.5}
.authtabs{display:flex;gap:8px}
.authtabs .chip{flex:1;justify-content:center}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--gray);cursor:pointer}
.check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--o);cursor:pointer}
.check .linkbtn{font-size:14px}

.dash__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px}
.dash__head .title{font-size:clamp(32px,4vw,52px)}
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.box{background:var(--panel);padding:30px 32px;display:grid;gap:16px;align-content:start;position:relative;min-width:0}
.box--wide{grid-column:1/-1}
.box--sub{background:linear-gradient(160deg,rgba(var(--o-rgb),.14),var(--panel) 55%);border:1px solid rgba(var(--o-rgb),.35)}
.box--ok{border:1px solid rgba(46,204,113,.45);background:linear-gradient(160deg,rgba(46,204,113,.1),var(--panel) 55%)}
.box--ok h3{font-weight:900;font-size:28px;text-transform:uppercase}
.box__head{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:28px}
.box__head small{font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--dim);font-weight:700}
.box__close{width:36px;height:36px}
.box .btn{justify-self:start}
.pill{font-size:12px;font-weight:900;text-transform:uppercase;padding:4px 10px;border:1px solid rgba(255,255,255,.3);white-space:nowrap}
.pill--ok{border-color:var(--ok);color:var(--ok)}
.pill--wait{border-color:var(--o);color:var(--o)}
.pill--bad{border-color:var(--bad);color:#ff8a80}

.sub__tier{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.sub__tier b{font-weight:900;font-size:clamp(34px,3.4vw,48px);line-height:1}
.sub__tier span{color:var(--gray)}
.sub__until{font-size:16px}
.bar{height:4px;background:rgba(255,255,255,.1);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--o);transition:width 1s var(--ease)}

.dev{display:grid;gap:6px}
.dev b{font-size:20px;font-weight:700;overflow-wrap:anywhere}
.dev span{color:var(--dim);font-size:14px}

/* buy */
.buy{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px}
.buy__pick{display:grid;gap:14px;align-content:start}
.buy__sum{background:#121212;border:1px solid var(--line);padding:24px;display:grid;gap:12px;align-content:start}
.sum__name{font-weight:700;font-size:18px}
.sum__price{display:flex;align-items:baseline;gap:12px}
.sum__price b{font-weight:900;font-size:48px;color:var(--o);line-height:1;font-variant-numeric:tabular-nums}
.sum__price s{color:var(--dim);font-weight:700;font-size:18px}
.sum__disc{color:var(--ok);font-weight:700;font-size:14px}
.sum__rows{display:grid;gap:8px;font-size:14px;color:var(--gray);line-height:1.45}
.sum__rows li{display:flex;justify-content:space-between;gap:12px}
.sum__rows li b{color:#fff;font-weight:700;text-align:right}
.promo{display:flex;gap:10px}
.promo .input{height:44px;flex:1;min-width:0}

/* pay */
.pay{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:start}
.pay__main{display:grid;gap:16px;min-width:0}
.pay__what{font-weight:700;font-size:18px}
.nets{display:flex;gap:10px;flex-wrap:wrap}
.net{min-height:52px;padding:8px 18px;border:1px solid rgba(255,255,255,.22);text-align:left;display:grid;gap:2px;transition:border-color .3s,background .3s}
.net b{font-weight:900;font-size:15px}
.net small{color:var(--dim);font-size:12px}
.net.is-active{border-color:var(--o);background:rgba(var(--o-rgb),.12)}
.pay__row{display:grid;gap:8px}
.pay__row>small{font-size:13px;text-transform:uppercase;color:var(--dim);font-weight:700}
.copyline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.pay__amount{font-weight:900;font-size:40px;line-height:1;color:var(--o);font-variant-numeric:tabular-nums}
.pay__coin{font-weight:700;color:var(--gray)}
.pay__addr,.refcode,.reflink{font-family:ui-monospace,Consolas,monospace;font-size:15px;background:#0e0e0e;border:1px solid var(--line);padding:11px 14px;overflow-wrap:anywhere;min-width:0;flex:1}
.refcode{font-size:24px;font-weight:700;letter-spacing:.1em;flex:0 1 auto}
.reflink{font-size:13px;color:var(--gray)}
.pay__qr{display:grid;justify-items:center;gap:10px;background:#fff;padding:16px;color:#000}
.pay__qr canvas{width:220px;height:220px;image-rendering:pixelated}
.pay__qr small{font-size:13px;font-weight:700}
.pay__actions{display:flex;gap:20px}
.hash summary{cursor:pointer;color:rgba(255,255,255,.75);font-size:14px;font-weight:700}
.hash[open] summary{margin-bottom:10px}
.hash .fineprint{margin-bottom:10px}
.hash .msg{margin-top:10px}

/* referrals */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stats div{background:#121212;padding:14px;display:grid;gap:4px}
.stats b{font-weight:900;font-size:26px}
.stats span{color:var(--dim);font-size:13px}
.refin{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.refin small{color:var(--gray)}

/* history */
.tablewrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.tbl th{text-align:left;font-weight:700;color:var(--dim);text-transform:uppercase;font-size:12px;padding:0 12px 12px 0;border-bottom:1px solid var(--line)}
.tbl td{padding:14px 12px 14px 0;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle}
.tbl td a{color:var(--o)}
.tbl .num{font-variant-numeric:tabular-nums;font-weight:700}

.loading{display:grid;place-items:center;min-height:50vh}
.loading i{width:40px;height:40px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--o);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:1100px){
  .top .langsel{display:block}
  .buy,.pay{grid-template-columns:1fr}
  .pay__qr{justify-self:start}
}
@media (max-width:760px){
  .dgrid{grid-template-columns:1fr}
  .box{padding:24px 18px}
  .top .btn--sm{padding:0 14px}
  .stats b{font-size:22px}
  .pay__amount{font-size:32px}
  .box .btn{justify-self:stretch}
  .promo .btn{flex:none}
}