:root{
  --bg:#050505;--card:#0d0d0d;--el:#141414;--brd:rgba(255,255,255,.06);
  --t:#fff;--t2:rgba(255,255,255,.55);--t3:rgba(255,255,255,.28);
  --ac:#60a5fa;--ac2:#3b82f6;
  --ok:#22c55e;--err:#ef4444;--warn:#fbbf24;
  --green-light:#86efac;--green-mid:#22c55e;--green-dark:#0f4d29;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;box-sizing:border-box}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px}
/* Выделение и каретка приходили от браузера и светились синевой Windows
   посреди почти чёрной страницы. Ключ на этой странице выделяют руками
   чаще всего остального, так что это не мелочь. */
::selection{background:rgba(96,165,250,.3);color:#fff}
::-moz-selection{background:rgba(96,165,250,.3);color:#fff}
input,textarea{caret-color:#60a5fa}
html,body{margin:0;padding:0;background:var(--bg);color:var(--t);font-family:'Inter',-apple-system,'Segoe UI',sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}
body{display:flex;flex-direction:column;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ── Header (mirrors marketnew header for visual continuity) ── */
.hd{
  position:fixed;top:0;left:0;right:0;height:calc(72px + env(safe-area-inset-top,0px));z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:env(safe-area-inset-top,0px) clamp(14px,3vw,48px) 0;
  background:linear-gradient(180deg,rgba(7,9,11,.92) 0%,rgba(4,6,7,.88) 100%);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
          backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.05);
  box-shadow:0 1px 0 rgba(255,255,255,.025) inset, 0 6px 24px rgba(0,0,0,.4);
}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(96,165,250,.18) 50%,transparent);pointer-events:none}
.lo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;transition:transform .2s var(--ease-soft)}
.lo:hover{transform:translateY(-.5px)}
.lo-t{font-weight:800;font-size:16.5px;color:#fff;white-space:nowrap;letter-spacing:-.3px}
.lo-t span,.lo-t .lo-sq{color:#60a5fa;-webkit-text-fill-color:#60a5fa;text-shadow:0 0 10px rgba(96,165,250,.55)}
.nv{display:flex;gap:2px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.04);border-radius:12px;padding:4px;
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.nv a{padding:8px 16px;border-radius:9px;color:var(--t3);text-decoration:none;font-size:13.5px;font-weight:600;letter-spacing:.1px;white-space:nowrap;transition:color .2s,background .2s;position:relative}
.nv a:hover{color:#fff;background:rgba(255,255,255,.04)}
.nv a.act{color:#0b1220;background:#fff;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.hd-r{display:flex;gap:10px;align-items:center;flex-shrink:0}
.lang{display:inline-flex;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:3px;gap:2px}
.lang button{border:0;padding:6px 10px;font-size:11px;font-weight:700;font-family:inherit;background:transparent;color:var(--t3);border-radius:7px;cursor:pointer;letter-spacing:.5px;transition:color .15s,background .15s}
.lang button.active{color:#0b1220;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.lang button:not(.active):hover{color:#fff;background:rgba(255,255,255,.04)}
@media(max-width:480px){.lang button{padding:5px 8px;font-size:10.5px}}
.hd-back{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:11px;color:var(--t2);font-size:13px;font-weight:600;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.hd-back svg{width:14px;height:14px;stroke-width:2.5}
.hd-back:hover{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.14)}
@media(max-width:760px){
  .hd{height:calc(64px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));gap:8px}
  .nv{display:none}
  .lo-t{font-size:15px}
  .hd-back span{display:none}
  .hd-back{padding:8px 10px}
}

/* ── Header quick-access: Favorites + Cart icon links with count badges ── */
.hd-actions{display:inline-flex;align-items:center;gap:8px}
.hd-ic{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:var(--t2);text-decoration:none;
  transition:color .2s,background .2s,border-color .2s,transform .15s var(--ease-soft);
}
.hd-ic:hover{color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);transform:translateY(-1px)}
.hd-ic:active{transform:translateY(0)}
.hd-ic:focus-visible{outline:2px solid rgba(34,197,94,.5);outline-offset:2px}
.hd-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.hd-ic-badge{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 5px;
  display:none;align-items:center;justify-content:center;
  background:var(--green-mid);color:#04130a;
  font-size:10.5px;font-weight:800;line-height:1;border-radius:9px;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px rgba(6,8,9,.95);
}
.hd-ic-badge.show{display:inline-flex}
@media(max-width:760px){.hd-actions{display:none}}

/* ── Page wrap ── */
.wrap{max-width:1100px;margin:0 auto;padding:calc(72px + 32px + env(safe-area-inset-top,0px)) clamp(14px,3vw,32px) max(60px,env(safe-area-inset-bottom,0px));flex:1 0 auto;width:100%;box-sizing:border-box}
@media(max-width:760px){.wrap{padding-top:calc(64px + 20px + env(safe-area-inset-top,0px))}}

.page-h{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  margin-bottom:24px;flex-wrap:wrap;
}
.page-h-l{min-width:0}
.page-h-t{font-size:28px;font-weight:800;letter-spacing:-.5px;line-height:1;color:#fff}
.page-h-s{font-size:13px;color:var(--t3);margin-top:8px;font-weight:500}
.page-h-r{display:flex;gap:8px}
.btn-refresh{
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;
  color:var(--t2);font-size:13px;font-weight:600;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .15s;
}
.btn-refresh svg{width:14px;height:14px;stroke-width:2.4}
.btn-refresh:hover{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.16)}
.btn-refresh.spin svg{animation:spin .9s linear}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Section header ── replaces the old tab bar. Which section is shown is
   chosen from the header profile dropdown (?tab=profile|orders|tx); this
   strip just labels the active section + shows its count. ── */
.sec-head{
  display:flex;align-items:center;gap:14px;margin-bottom:18px;
  padding:14px 16px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 14px 34px -26px rgba(0,0,0,.8);
  animation:fadeIn .35s var(--ease-soft) both;
}
.sec-head-ic{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(96,165,250,.18),rgba(59,130,246,.08));
  border:1px solid rgba(96,165,250,.28);color:#bfdbfe;
  box-shadow:0 6px 18px -8px rgba(59,130,246,.6);
}
.sec-head-ic svg{width:21px;height:21px;stroke-width:2;fill:none;stroke:currentColor}
.sec-head-tx{flex:1;min-width:0}
.sec-head-t{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.3px;line-height:1.1}
.sec-head-s{font-size:12.5px;color:var(--t2);margin-top:3px}
.sec-head-cnt{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:26px;padding:0 10px;border-radius:8px;
  font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;
  background:rgba(96,165,250,.14);color:#bfdbfe;border:1px solid rgba(96,165,250,.24);
}
.sec-head-cnt[hidden]{display:none}

@media(max-width:560px){
  .sec-head{padding:12px 13px;gap:11px}
  .sec-head-ic{width:38px;height:38px;border-radius:10px}
  .sec-head-ic svg{width:18px;height:18px}
  .sec-head-t{font-size:15px}
  .sec-head-s{font-size:11.5px}
}

/* ── Cards (shared) ── */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.005));
  border:1px solid rgba(255,255,255,.05);border-radius:16px;
  margin-bottom:14px;overflow:hidden;
}
.card-h{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid rgba(255,255,255,.04)}
.card-h-t{font-size:13px;font-weight:700;color:var(--t2);letter-spacing:.1px;
  display:flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:1.4px}
.card-h-t svg{width:14px;height:14px;color:var(--green-light);stroke-width:2.4}
.card-h-r{font-size:11.5px;color:var(--t3);font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.card-b{padding:18px 20px}

/* ══ Account panel — unified identity + wallet (2026-06-28 redesign) ═══════
   One premium surface that merges who-you-are (avatar + name + telegram
   tags) on the left with your money (balance + top-up) on the right. On
   phones the wallet block detaches to its own full-width row below the
   identity, separated by a hairline, so the balance never gets cramped.
   OLED dark base + a single restrained green wash (money = green, the rest
   of the cabinet stays neutral) per the design-system guidance. */
.acct{
  display:flex;align-items:stretch;gap:0;
  border-radius:20px;margin-bottom:14px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.028) 0%,rgba(255,255,255,.006) 100%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -28px rgba(0,0,0,.8);
  transition:border-color .3s var(--ease-soft);
}
.acct::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 100% -10%,rgba(134,239,172,.07),transparent 52%);
}
/* Identity block (left) */
.acct-id{
  flex:1;min-width:0;display:flex;align-items:center;gap:18px;
  padding:24px 26px;position:relative;z-index:1;
}
.acct-ava{
  width:72px;height:72px;border-radius:18px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,#3b82f6,#1e3a8a);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:900;color:#fff;letter-spacing:-.5px;
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 8px 22px -6px rgba(59,130,246,.5);
  text-shadow:0 2px 4px rgba(0,0,0,.4);
}
.acct-ava img{width:100%;height:100%;object-fit:cover}
.acct-id-r{flex:1;min-width:0;display:flex;flex-direction:column;gap:11px}
.acct-name{font-size:22px;font-weight:800;letter-spacing:-.4px;color:#fff;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-tags{display:flex;flex-wrap:wrap;gap:7px;font-size:12px;font-weight:500}
.hero-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:8px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:var(--t2);
  font-family:'JetBrains Mono','Courier New',monospace;letter-spacing:.2px;
  transition:background .2s,border-color .2s;
}
.hero-tag svg{width:11px;height:11px;color:var(--t3);stroke-width:2.4}
.hero-tag.tg{color:var(--green-light);background:rgba(134,239,172,.07);border-color:rgba(134,239,172,.16)}
.hero-tag.tg svg{color:var(--green-light)}
/* Wallet block (right) */
.acct-wallet{
  flex-shrink:0;display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:24px 26px;position:relative;z-index:1;min-width:240px;
  border-left:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(134,239,172,.05),transparent 70%);
}
.acct-wallet-r{display:flex;flex-direction:column;gap:7px;line-height:1}
.acct-wallet-lbl{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:700;color:var(--green-light);
  text-transform:uppercase;letter-spacing:1.6px;
}
.acct-wallet-lbl svg{width:13px;height:13px;stroke-width:2.4;
  filter:drop-shadow(0 0 5px rgba(34,197,94,.4))}
.acct-wallet-val{font-size:32px;font-weight:800;letter-spacing:-.8px;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1}
.acct-wallet-val small{color:var(--t3);font-weight:700;font-size:16px;margin-left:4px;letter-spacing:0}
.bal-deposit-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:12px;width:100%;
  background:#fff;color:#0b1220;
  border:none;font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(255,255,255,.1),0 0 0 1px rgba(0,0,0,.04) inset;
  transition:transform .15s var(--ease-soft),box-shadow .25s,filter .2s;
}
.bal-deposit-btn svg{width:15px;height:15px;stroke-width:2.4}
.bal-deposit-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(255,255,255,.16);filter:brightness(.97)}
.bal-deposit-btn:active{transform:translateY(0) scale(.98)}
@media(max-width:680px){
  .acct{flex-direction:column}
  .acct-id{padding:22px 20px 18px}
  .acct-wallet{
    min-width:0;flex-direction:row;align-items:center;justify-content:space-between;
    border-left:none;border-top:1px solid rgba(255,255,255,.06);
    padding:18px 20px;gap:16px;
  }
  .acct-wallet .bal-deposit-btn{width:auto;flex-shrink:0;padding:12px 18px}
}
@media(max-width:560px){
  .acct-ava{width:60px;height:60px;border-radius:15px;font-size:23px}
  .acct-name{font-size:19px}
  .acct-wallet-val{font-size:27px}
  .acct-wallet-val small{font-size:14px}
}
@media(max-width:420px){
  .acct-wallet{flex-direction:column;align-items:stretch}
  .acct-wallet .bal-deposit-btn{width:100%}
}

/* ── Stats grid (3-up) — now each tile leads with a small tinted icon ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stat{
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.005));
  border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:16px 18px;
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .25s var(--ease-soft),transform .15s var(--ease-soft);
}
.stat:hover{border-color:rgba(255,255,255,.1);transform:translateY(-1px)}
.stat-ic{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);
}
.stat-ic svg{width:16px;height:16px;stroke-width:2.2;fill:none;stroke:currentColor}
.stat-ic.orders{background:rgba(96,165,250,.12);border-color:rgba(96,165,250,.22);color:#bfdbfe}
.stat-ic.spent{background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.22);color:#d8b4fe}
.stat-ic.deposited{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.22);color:var(--green-light)}
.stat-b{display:flex;flex-direction:column;gap:7px;line-height:1}
.stat-l{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1.6px}
.stat-v{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.4px;line-height:1;font-variant-numeric:tabular-nums}
.stat-v small{color:var(--t3);font-size:13px;font-weight:700;margin-left:2px}
@media(max-width:560px){
  .stats{gap:8px}
  .stat{padding:13px 11px;gap:10px}
  .stat-ic{width:30px;height:30px;border-radius:9px}
  .stat-ic svg{width:14px;height:14px}
  .stat-v{font-size:17px}
  .stat-v small{font-size:11px}
  .stat-l{font-size:9px;letter-spacing:1.1px}
}

/* ── Promo activation card ── */
.promo-card{
  --pr:129,140,248;        /* indigo accent (distinct from the green balance theme) */
  --pr2:99,102,241;
  margin-top:14px;
  background:
    linear-gradient(135deg,rgba(var(--pr),.05) 0%,rgba(255,255,255,.014) 42%,rgba(255,255,255,.004) 100%),
    rgba(255,255,255,.014);
  border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px 20px;
  position:relative;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.045) inset,0 18px 44px -30px rgba(0,0,0,.85);
}
.promo-card::before{
  content:'';position:absolute;right:-42px;top:-46px;width:178px;height:178px;
  background:radial-gradient(circle,rgba(var(--pr),.14),transparent 70%);pointer-events:none;
}
.promo-card-h{display:flex;align-items:center;gap:12px;margin-bottom:15px;position:relative;z-index:1}
.promo-card-ic{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(var(--pr),.22),rgba(var(--pr2),.1));
  border:1px solid rgba(var(--pr),.32);color:#c7d2fe;
  box-shadow:0 6px 18px -8px rgba(var(--pr2),.65);
}
.promo-card-ic svg{width:19px;height:19px;stroke-width:2.2}
.promo-card-t{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.2px}
.promo-card-sub{font-size:12px;color:var(--t2);margin-top:2px}
.promo-form{display:flex;gap:10px;position:relative;z-index:1}
.promo-input{
  flex:1;min-width:0;background:rgba(0,0,0,.32);border:1px solid var(--brd);border-radius:11px;
  padding:13px 15px;color:#fff;font-size:16px;font-weight:700;letter-spacing:2px;
  font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace;text-transform:uppercase;
  transition:border-color .2s var(--ease-soft),box-shadow .2s var(--ease-soft),background .2s var(--ease-soft);outline:none;
}
.promo-input::placeholder{color:var(--t3);letter-spacing:1px;font-weight:600}
.promo-input:focus{border-color:rgba(var(--pr),.55);background:rgba(0,0,0,.42);box-shadow:0 0 0 3px rgba(var(--pr),.14)}
.promo-btn{
  flex-shrink:0;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:linear-gradient(135deg,rgb(var(--pr)),rgb(var(--pr2)));color:#fff;border:none;border-radius:11px;
  padding:13px 20px;font-size:14px;font-weight:800;font-family:inherit;white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(var(--pr2),.7),0 1px 0 rgba(255,255,255,.18) inset;
  transition:transform .15s var(--ease-soft),filter .2s,box-shadow .2s,opacity .2s;
}
.promo-btn svg{width:16px;height:16px;stroke-width:2.6;fill:none;stroke:currentColor}
.promo-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 13px 28px -8px rgba(var(--pr2),.8);filter:brightness(1.06)}
.promo-btn:active:not(:disabled){transform:translateY(0) scale(.98)}
.promo-btn:disabled{opacity:.55;cursor:default}
.promo-msg{font-size:12.5px;font-weight:600;margin-top:11px;position:relative;z-index:1}
.promo-msg.ok{color:var(--green-light)}
.promo-msg.err{color:#fca5a5}
@media(max-width:560px){
  .promo-card{padding:16px}
  .promo-form{flex-direction:column}
  .promo-btn{width:100%;justify-content:center;padding:13px}
}


/* ── Orders list ── */
.orders{display:flex;flex-direction:column;gap:12px}
.order{
  display:flex;flex-direction:column;gap:14px;
  padding:16px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));
  border:1px solid rgba(255,255,255,.07);
  transition:border-color .2s,background .2s;
}
.order:hover{border-color:rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012))}
.order-top{display:flex;align-items:center;gap:14px}
.order-cover{
  width:120px;height:56px;border-radius:10px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(180deg,#181818,#080808);
  border:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.order-cover img{width:100%;height:100%;object-fit:cover}
.order-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.35));pointer-events:none}
.order-cover .l{font-size:24px;font-weight:900;color:rgba(255,255,255,.85);letter-spacing:-.6px;line-height:1}
.order-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;line-height:1.2}
.order-name{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.order-tags{display:flex;flex-wrap:wrap;gap:5px}
.order-tag{
  padding:3px 9px;border-radius:5px;font-size:10px;font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;line-height:1;
  background:rgba(255,255,255,.05);border:1px solid var(--brd);color:var(--t2);
}
.order-tag.nfa{background:rgba(96,165,250,.14);color:#bfdbfe;border-color:rgba(96,165,250,.32)}
.order-tag.nobans{background:rgba(34,197,94,.1);color:var(--green-light);border-color:rgba(34,197,94,.28)}
.order-price{
  font-size:18px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;
  letter-spacing:-.3px;flex-shrink:0;margin-left:auto;line-height:1;
}
.order-price small{color:var(--t3);font-weight:700;margin-left:2px;font-size:14px}
.order-meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;color:var(--t3);font-weight:500;line-height:1;
}
.order-date{display:inline-flex;align-items:center;gap:6px}
.order-date svg{width:13px;height:13px;stroke-width:2;opacity:.8}
.order-status{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;line-height:1;
}
.order-status.ok{background:rgba(34,197,94,.1);color:var(--green-light);border:1px solid rgba(34,197,94,.3)}
.order-status.pend{background:rgba(251,191,36,.08);color:#fde68a;border:1px solid rgba(251,191,36,.28)}
.order-status.fail{background:rgba(239,68,68,.08);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}
.order-status svg{width:12px;height:12px;stroke-width:3}
.order-key{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:11px;
  background:rgba(255,255,255,.025);border:1px solid var(--brd);
}
.order-key-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;line-height:1}
.order-key-label{font-size:9.5px;color:var(--t3);text-transform:uppercase;letter-spacing:1.4px;font-weight:700}
.order-key-val{
  font-family:'JetBrains Mono','Courier New',monospace;font-size:12.5px;font-weight:700;color:#fff;
  letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  -webkit-user-select:all;user-select:all;
}
.order-key-btn{
  padding:10px 16px;border-radius:9px;border:none;
  background:linear-gradient(180deg,var(--ac2),#1e40af);color:#fff;
  font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.5px;cursor:pointer;
  text-transform:uppercase;
  box-shadow:0 3px 10px rgba(59,130,246,.3),0 0 0 1px rgba(255,255,255,.1) inset;
  transition:transform .15s,box-shadow .25s,filter .2s;
  flex-shrink:0;
}
.order-key-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(59,130,246,.45);filter:brightness(1.08)}
.order-key-btn.copied{background:linear-gradient(180deg,var(--green-mid),#15803d);box-shadow:0 3px 10px rgba(34,197,94,.4)}

/* CTA row under the order: "Открыть страницу товара →" link + the
   existing copy button align on one line on desktop, stack on mobile.
   Light-blue palette to match the new /id/<id> hero. */
.order-actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.order-open{
  flex:1;min-width:0;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border-radius:10px;
  background:linear-gradient(135deg,rgba(96,165,250,.16),rgba(96,165,250,.04));
  border:1px solid rgba(96,165,250,.30);
  color:#dbeafe;font-size:12px;font-weight:800;letter-spacing:.3px;
  text-decoration:none;text-transform:uppercase;
  transition:transform .15s,background .2s,border-color .2s,color .2s;
}
.order-open:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg,rgba(96,165,250,.26),rgba(96,165,250,.10));
  border-color:rgba(96,165,250,.55);color:#fff;
}
.order-open svg{width:14px;height:14px;stroke-width:2.5}

@media(max-width:560px){
  .order{padding:13px}
  .order-cover{width:88px;height:42px;border-radius:8px}
  .order-cover .l{font-size:18px}
  .order-name{font-size:13.5px}
  .order-price{font-size:15px}
  .order-tag{font-size:9.5px;padding:2px 7px}
  .order-key{padding:10px 11px;gap:8px}
  .order-key-val{font-size:11px}
  .order-key-btn{padding:9px 12px;font-size:10.5px}
}
@media(max-width:430px){
  .order-top{flex-wrap:wrap}
  .order-price{margin-left:0;width:100%;text-align:right}
}

/* ── Transactions list ── */
.txs{display:flex;flex-direction:column;gap:9px}
.tx{
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005));
  border:1px solid rgba(255,255,255,.06);
}
.tx-ic{
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);
}
.tx-ic svg{width:20px;height:20px;stroke-width:2;color:#fff}
.tx-ic.deposit{background:rgba(34,197,94,.12)} .tx-ic.deposit svg{color:var(--green-light)}
.tx-ic.purchase{background:rgba(96,165,250,.12)} .tx-ic.purchase svg{color:#bfdbfe}
.tx-ic.refund{background:rgba(251,191,36,.12)} .tx-ic.refund svg{color:#fde68a}
.tx-ic.admin{background:rgba(168,85,247,.12)} .tx-ic.admin svg{color:#d8b4fe}
.tx-ic.referral{background:rgba(236,72,153,.12)} .tx-ic.referral svg{color:#fbcfe8}
.tx-ic.promo{background:rgba(34,197,94,.12)} .tx-ic.promo svg{color:var(--green-light)}
.tx-r{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;line-height:1.2}
.tx-title{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-meta{font-size:11.5px;color:var(--t3);font-weight:500;letter-spacing:.2px}
.tx-amount{
  font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:-.2px;flex-shrink:0;line-height:1;
}
.tx-amount small{color:var(--t3);font-weight:700;margin-left:1px;font-size:11px}
.tx-amount.pos{color:var(--green-light)}
.tx-amount.neg{color:#fca5a5}
@media(max-width:560px){
  .tx{padding:11px 13px;gap:11px}
  .tx-ic{width:34px;height:34px}
  .tx-ic svg{width:17px;height:17px}
  .tx-title{font-size:13px}
  .tx-amount{font-size:14px}
}

/* ── Empty state ── */
.empty{
  text-align:center;padding:60px 20px;color:var(--t3);font-size:13.5px;line-height:1.6;
}
.empty svg{width:64px;height:64px;color:var(--t3);opacity:.3;margin:0 auto 16px;display:block;stroke-width:1.4}
.empty p{margin:0 0 16px;color:var(--t2)}
.empty .empty-cta{
  display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:10px;
  background:#fff;color:#0b1220;font-weight:700;font-size:13px;text-decoration:none;
  transition:transform .15s,filter .2s;
}
.empty .empty-cta:hover{transform:translateY(-1px);filter:brightness(.95)}

/* ── Spinner ── */
.spinner{
  width:36px;height:36px;border:3px solid rgba(255,255,255,.08);
  border-top-color:var(--ac);border-radius:50%;
  margin:0 auto 14px;animation:spin .8s linear infinite;
}

/* Заглушки, которые стоят в разметке до первой отрисовки.
   Документ большой, и браузер успевает нарисовать середину страницы
   раньше, чем доходит до скрипта в конце, — поэтому три кружка
   вспыхивали даже тогда, когда данные уже лежали в самой странице.
   Держим их невидимыми первые 0.45 с: если содержимое подставилось
   быстрее (а с готовыми данными это доли секунды), их никто не увидит,
   а на медленной сети они всё-таки появятся и покажут, что идёт работа. */
.pf-firstload{opacity:0;animation:pfFirstLoad .18s ease .45s forwards}
@keyframes pfFirstLoad{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  /* Без анимации значение из forwards не применится, и заглушка осталась
     бы прозрачной навсегда. */
  .pf-firstload{opacity:1;animation:none}
}

.btn-logout{
  display:inline-flex;align-items:center;gap:6px;padding:10px 14px;
  background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:10px;
  color:rgba(255,255,255,.45);font-size:13px;font-weight:600;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.btn-logout svg{width:13px;height:13px;stroke-width:2.2}
.btn-logout:hover{background:rgba(239,68,68,.1);color:#fca5a5;border-color:rgba(239,68,68,.3)}
@media(max-width:560px){.btn-logout span{display:none}.btn-logout{padding:10px 11px}}

/* ═══ Profile redesign 2026-07 — spacious, no AI icon boxes ═══ */
.wrap{max-width:920px!important;padding:calc(72px + 48px + env(safe-area-inset-top,0px)) clamp(20px,4vw,40px) max(80px,calc(40px + env(safe-area-inset-bottom,0px)))!important}
@media(max-width:760px){.wrap{padding-top:calc(64px + 28px + env(safe-area-inset-top,0px))!important}}
.page-h{margin-bottom:36px!important;align-items:center!important}
.page-h-t{font-size:clamp(28px,4vw,40px)!important;font-weight:700!important;letter-spacing:-.06em!important}
.page-h-s{display:none!important}
.sec-head{display:none!important}
.pf-tabs,.pf-tab{display:none!important}
.pf-hero{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:4px 0 40px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06)}
.pf-hero-l{display:flex;align-items:center;gap:20px;min-width:0;flex:1}
.pf-ava{width:72px;height:72px;border-radius:50%;flex-shrink:0;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#fff}
.pf-ava img{width:100%;height:100%;object-fit:cover}
.pf-name{font-size:clamp(24px,3.5vw,32px);font-weight:700;letter-spacing:-.04em;color:#fff;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 8px}
.pf-meta{font-size:14px;color:rgba(255,255,255,.4);font-weight:500;margin:0;line-height:1.45}
.pf-hero-r{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.pf-bal{font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.pf-bal small{color:rgba(255,255,255,.35);font-weight:600;font-size:.55em;margin-left:4px}
.pf-hero .bal-deposit-btn{width:auto;border-radius:999px;box-shadow:none;padding:12px 22px;font-size:14px}
.pf-hero .bal-deposit-btn:hover{box-shadow:none}
@media(max-width:640px){.pf-hero{flex-direction:column;align-items:stretch;gap:28px;padding-bottom:32px}.pf-hero-r{align-items:stretch}.pf-bal{text-align:left}.pf-hero .bal-deposit-btn{width:100%}.pf-ava{width:64px;height:64px;font-size:22px}}
.pf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:32px 0 40px;border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden}
.pf-stat{padding:28px 24px;display:flex;flex-direction:column;gap:10px;border-right:1px solid rgba(255,255,255,.06)}
.pf-stat:last-child{border-right:0}
.pf-stat b{font-size:clamp(22px,3vw,28px);font-weight:700;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.pf-stat b small{color:rgba(255,255,255,.35);font-size:.55em;font-weight:600;margin-left:3px}
.pf-stat span{font-size:13px;color:rgba(255,255,255,.4);font-weight:500}
@media(max-width:520px){.pf-stats{grid-template-columns:1fr}.pf-stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.06);padding:22px 20px}.pf-stat:last-child{border-bottom:0}}
.pf-promo{margin-top:4px}
.pf-promo-lbl{font-size:13px;font-weight:600;color:rgba(255,255,255,.4);margin:0 0 12px}
.pf-promo .promo-form{display:flex;gap:10px}
.pf-promo .promo-input{flex:1;min-width:0;background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 16px;color:#fff;font-size:16px;font-weight:600;letter-spacing:.06em;font-family:inherit;text-transform:uppercase;outline:none;box-shadow:none}
.pf-promo .promo-input::placeholder{color:rgba(255,255,255,.28);letter-spacing:0;font-weight:500;text-transform:none}
.pf-promo .promo-input:focus{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.03);box-shadow:none}
.pf-promo .promo-btn{flex-shrink:0;background:#fff;color:#0b1220;border:none;border-radius:12px;padding:14px 20px;font-size:14px;font-weight:700;box-shadow:none}
.pf-promo .promo-btn svg{display:none}
.pf-promo .promo-btn:hover:not(:disabled){background:#e8eef7;transform:none;filter:none;box-shadow:none}
.pf-promo .promo-msg{margin-top:12px;font-size:13px}
@media(max-width:520px){.pf-promo .promo-form{flex-direction:column}.pf-promo .promo-btn{width:100%}}

/* ── Orders / History — polished list ── */
/* Список живёт на волосяных линиях, а не в скруглённой коробке: рамка
   вокруг тридцати строк ничего не группирует, она их просто обводит. */
.pf-list{
  border-top:1px solid rgba(255,255,255,.09);
}
.pf-row-key{background:transparent!important;border:0!important;padding:0!important}
/* Транзакция — это одна строка на три величины, ей не нужен ни отступ
   покупки, ни высота под обложку. */
.pf-list-flat .pf-row{padding:14px 2px;align-items:baseline}
.pf-list-flat .pf-row-name{font-size:14.5px;font-weight:550;white-space:normal}
.pf-list-flat .pf-row-amt{font-size:15.5px;font-weight:650}
.pf-row-tx:hover{background:transparent}
.pf-row{
  display:flex;align-items:flex-start;gap:18px;
  padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.055);
  transition:background .18s ease;
}
.pf-row:last-child{border-bottom:0}
.pf-row:hover{background:rgba(255,255,255,.025)}
.pf-row-cover{
  width:120px;height:56px;border-radius:12px;flex-shrink:0;overflow:hidden;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.7);
  transition:border-color .18s ease,transform .18s ease;
}
.pf-row:hover .pf-row-cover{border-color:rgba(255,255,255,.16);transform:translateY(-1px)}
.pf-row-cover img{width:100%;height:100%;object-fit:cover;display:block}
.pf-row-cover .l{
  font-size:20px;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:-.04em;line-height:1;
}
.pf-row-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:14px;padding-top:1px}
.pf-row-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.pf-row-l{min-width:0;flex:1;display:flex;flex-direction:column;gap:8px}
.pf-row-name{font-size:16.5px;font-weight:600;letter-spacing:-.025em;color:#fff;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-row-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.38);line-height:1.3}
.pf-row-date{color:rgba(255,255,255,.38)}
.pf-st{
  display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1;
}
.pf-st.ok{background:rgba(34,197,94,.12);color:#86efac;border:1px solid rgba(34,197,94,.22)}
.pf-st.fail{background:rgba(239,68,68,.1);color:#fca5a5;border:1px solid rgba(239,68,68,.22)}
.pf-st.pend{background:rgba(251,191,36,.1);color:#fde68a;border:1px solid rgba(251,191,36,.22)}
.pf-row-r{flex-shrink:0;text-align:right;padding-top:2px}
.pf-row-amt{font-size:18px;font-weight:700;letter-spacing:-.035em;color:#fff;font-variant-numeric:tabular-nums;line-height:1.15}
.pf-row-amt small{color:rgba(255,255,255,.35);font-weight:600;font-size:.55em;margin-left:3px}
.pf-row-amt.pos{color:#86efac}
.pf-row-amt.neg{color:rgba(255,255,255,.5)}
.pf-row-key{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 12px 11px 14px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
}
.pf-row-keycode{
  flex:1;min-width:120px;font-family:'JetBrains Mono','Courier New',monospace;
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.88);letter-spacing:.03em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:all;user-select:all;
}
.pf-row-copy{
  flex-shrink:0;border:0;border-radius:999px;padding:9px 15px;cursor:pointer;
  background:#fff;color:#0b1220;font-family:inherit;font-size:12.5px;font-weight:700;
  transition:background .15s,transform .15s;
}
.pf-row-copy:hover{background:#e8eef7}
.pf-row-copy:active{transform:scale(.97)}
.pf-row-copy.copied{background:#86efac;color:#052e16}
.pf-row-open{
  flex-shrink:0;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.42);
  text-decoration:none;padding:8px 6px;transition:color .15s;white-space:nowrap;
}
.pf-row-open:hover{color:#fff}
.pf-empty{text-align:left;padding:48px 8px 24px}
.pf-empty h3{font-size:clamp(22px,3vw,28px);font-weight:700;letter-spacing:-.04em;color:#fff;margin:0 0 10px;line-height:1.15}
.pf-empty p{font-size:15px;color:rgba(255,255,255,.4);font-weight:500;margin:0 0 28px;line-height:1.5;max-width:36ch}
.pf-empty .empty-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 22px;border-radius:999px;border:0;cursor:pointer;
  background:#fff;color:#0b1220;font-family:inherit;font-size:14px;font-weight:700;
  text-decoration:none;box-shadow:none;transition:background .15s;
}
.pf-empty .empty-cta:hover{background:#e8eef7;transform:none;box-shadow:none}
@media(max-width:560px){
  .pf-row{padding:16px;gap:12px}
  .pf-row-cover{width:92px;height:44px;border-radius:10px}
  .pf-row-cover .l{font-size:16px}
  .pf-row-name{font-size:15px;font-weight:600;white-space:normal}
  .pf-row-amt{font-size:16px}
  .pf-row-top{gap:10px}
  .pf-row-key{padding:10px;gap:8px}
  .pf-row-open{width:100%;padding:6px 2px;text-align:left}
}
@media(max-width:380px){
  .pf-row-cover{width:76px;height:38px}
  .pf-row-keycode{font-size:11.5px;min-width:0}
}

/* ═══ Referral programme card (2026-07) ═══════════════════════════════════
   Same surface language as .pf-stats / .pf-list above: hairline white
   borders, 16-18px radii, muted rgba labels, and the site's green
   (--green-light) reserved for money the user can actually take. */
.rfp{
  margin-top:40px;padding-top:36px;
  border-top:1px solid rgba(255,255,255,.06);
}
.rfp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}
.rfp-title{font-size:clamp(19px,2.6vw,23px);font-weight:700;letter-spacing:-.035em;color:#fff;margin:0 0 8px;line-height:1.15}
.rfp-sub{font-size:14px;color:rgba(255,255,255,.4);font-weight:500;margin:0;line-height:1.45;max-width:44ch}
.rfp-badge{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:999px;
  background:rgba(34,197,94,.11);border:1px solid rgba(34,197,94,.24);
  color:#86efac;font-size:12.5px;font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* Link + copy */
.rfp-link{margin-bottom:24px}
.rfp-lbl{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.38);margin:0 0 10px;letter-spacing:.01em}
.rfp-link-row{
  display:flex;align-items:center;gap:10px;
  padding:6px 6px 6px 16px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);
  transition:border-color .18s ease;
}
.rfp-link-row:hover{border-color:rgba(255,255,255,.16)}
.rfp-link-val{
  flex:1;min-width:0;
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:13px;font-weight:600;color:rgba(255,255,255,.9);letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  -webkit-user-select:all;user-select:all;padding:6px 0;
}
.rfp-copy{
  flex-shrink:0;border:0;border-radius:999px;padding:11px 19px;cursor:pointer;
  background:#fff;color:#0b1220;font-family:inherit;font-size:13px;font-weight:700;
  transition:background .15s,transform .15s;
}
.rfp-copy:hover{background:#e8eef7}
.rfp-copy:active{transform:scale(.97)}
.rfp-copy.copied{background:#86efac;color:#052e16}
.rfp-copy:focus-visible{outline:2px solid rgba(134,239,172,.6);outline-offset:2px}

/* Three-up figures — mirrors .pf-stats so the page reads as one design */
.rfp-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:22px;
  border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;
}
.rfp-stat{padding:22px 20px;display:flex;flex-direction:column;gap:9px;border-right:1px solid rgba(255,255,255,.06);min-width:0}
.rfp-stat:last-child{border-right:0}
.rfp-stat b{font-size:clamp(19px,2.6vw,25px);font-weight:700;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;line-height:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rfp-stat b small{color:rgba(255,255,255,.35);font-size:.55em;font-weight:600;margin-left:3px}
.rfp-stat span{font-size:12.5px;color:rgba(255,255,255,.4);font-weight:500;line-height:1.3}
/* The one figure the user can act on gets the money colour. */
.rfp-stat.hl{background:rgba(34,197,94,.045)}
.rfp-stat.hl b{color:#86efac}
.rfp-stat.hl b small{color:rgba(134,239,172,.45)}
/* Money that is earned but not payable yet. Blue, deliberately, not amber:
   nothing is wrong here and nothing needs the user's attention — it is just
   waiting. Amber on this page already means «разберись» (the clawback note),
   and green is reserved for money that can actually be taken. */
.rfp-stat.hold{background:rgba(59,130,246,.05)}
.rfp-stat.hold b{color:#93c5fd}
.rfp-stat.hold b small{color:rgba(147,197,253,.45)}
/* The fourth cell only exists while something is held, so the grid widens
   to four and folds to 2x2 long before a phone. */
.rfp-stats.four{grid-template-columns:repeat(4,1fr)}

/* Hold explainer. Without it the headline figure simply looks smaller than
   the user expects and they conclude the earnings were lost. */
.rfp-hold{
  display:flex;gap:13px;align-items:flex-start;
  padding:15px 17px;margin:-6px 0 22px;border-radius:14px;
  background:rgba(59,130,246,.055);border:1px solid rgba(59,130,246,.16);
}
.rfp-hold-ic{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(59,130,246,.14);color:#93c5fd;
}
.rfp-hold-ic svg{width:14px;height:14px;display:block}
.rfp-hold-b{min-width:0;display:flex;flex-direction:column;gap:5px}
.rfp-hold-t{font-size:14px;font-weight:700;color:#bfdbfe;letter-spacing:-.02em;
  line-height:1.25;font-variant-numeric:tabular-nums}
.rfp-hold-t small{color:rgba(191,219,254,.5);font-weight:600;font-size:.72em;margin-left:2px}
.rfp-hold-d{font-size:12.5px;color:rgba(255,255,255,.42);font-weight:500;line-height:1.45}
.rfp-hold-d b{color:rgba(255,255,255,.74);font-weight:600;font-variant-numeric:tabular-nums}

/* Claim */
.rfp-claim{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.rfp-claim-btn{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:999px;padding:14px 26px;cursor:pointer;
  background:#86efac;color:#052e16;
  font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  transition:background .16s,transform .15s,opacity .16s;
}
.rfp-claim-btn:hover:not(:disabled){background:#a7f3c0;transform:translateY(-1px)}
.rfp-claim-btn:active:not(:disabled){transform:translateY(0) scale(.985)}
.rfp-claim-btn:focus-visible{outline:2px solid rgba(134,239,172,.65);outline-offset:3px}
/* Disabled has to be unmistakable, not just dimmed: flat surface, hairline
   border, muted text, no-drop cursor. */
.rfp-claim-btn:disabled{
  background:rgba(255,255,255,.045);color:rgba(255,255,255,.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  cursor:not-allowed;transform:none;
}
.rfp-claim-note{font-size:13px;color:rgba(255,255,255,.38);font-weight:500;margin:0;line-height:1.45;flex:1;min-width:180px}
.rfp-claim-note.warn{color:#fde68a}
.rfp-claim-note.ok{color:#86efac}
.rfp-claim-note.hold{color:#bfdbfe}

/* "How it works" — the empty state, deliberately not a blank table */
.rfp-how{margin-top:26px;padding-top:26px;border-top:1px solid rgba(255,255,255,.06)}
.rfp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rfp-step{
  display:flex;gap:13px;align-items:flex-start;min-width:0;
  padding:18px 16px;border-radius:14px;
  background:rgba(255,255,255,.018);border:1px solid rgba(255,255,255,.06);
}
.rfp-step-n{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  font-size:12px;font-weight:700;color:rgba(255,255,255,.65);line-height:1;
}
.rfp-step-b{min-width:0;display:flex;flex-direction:column;gap:6px}
.rfp-step-t{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.015em;line-height:1.25}
.rfp-step-d{font-size:12.5px;color:rgba(255,255,255,.38);font-weight:500;line-height:1.45}

/* Commission history */
.rfp-hist{margin-top:28px}
.rfp-hist .pf-list{background:rgba(255,255,255,.012)}
.rfp-hrow{
  display:flex;align-items:center;gap:14px;
  padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.055);
}
.rfp-hrow:last-child{border-bottom:0}
.rfp-hrow-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.rfp-hrow-t{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.015em;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rfp-hrow-m{font-size:12px;color:rgba(255,255,255,.35);font-weight:500;line-height:1.3;
  display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.rfp-hrow-r{flex-shrink:0;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.rfp-hrow-a{font-size:15.5px;font-weight:700;letter-spacing:-.03em;color:#86efac;font-variant-numeric:tabular-nums;line-height:1.15}
.rfp-hrow-a small{color:rgba(134,239,172,.45);font-weight:600;font-size:.58em;margin-left:2px}
.rfp-hrow.rev .rfp-hrow-a{color:rgba(255,255,255,.3);text-decoration:line-through}
.rfp-hrow.rev .rfp-hrow-a small{color:rgba(255,255,255,.2)}
/* A held row is not struck through — the money is coming, it is just not
   here yet — but it must not wear the same green as money on the table. */
.rfp-hrow.hold .rfp-hrow-a{color:#93c5fd}
.rfp-hrow.hold .rfp-hrow-a small{color:rgba(147,197,253,.45)}
.pf-st.hold{background:rgba(59,130,246,.1);color:#93c5fd;border:1px solid rgba(59,130,246,.22)}

/* Skeleton while the referral fetch is in flight */
.rfp-skel{height:14px;border-radius:7px;background:rgba(255,255,255,.055);
  animation:rfpPulse 1.4s ease-in-out infinite}
@keyframes rfpPulse{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.rfp-skel{animation:none}}

@media(max-width:900px){
  /* 2x2 rather than four squeezed columns. The nth-child rules redraw the
     internal borders for the new shape; without them the grid keeps the
     one-row hairlines and looks broken. */
  .rfp-stats.four{grid-template-columns:repeat(2,1fr)}
  .rfp-stats.four .rfp-stat:nth-child(2n){border-right:0}
  .rfp-stats.four .rfp-stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.06)}
}
@media(max-width:720px){
  .rfp-steps{grid-template-columns:1fr}
  .rfp-step{padding:15px 14px}
}
@media(max-width:560px){
  .rfp{margin-top:34px;padding-top:30px}
  .rfp-head{flex-direction:column;gap:12px}
  .rfp-stats{grid-template-columns:1fr}
  /* .rfp-stats.four outranks .rfp-stats, so the single column has to be
     restated for it here. */
  .rfp-stats.four{grid-template-columns:1fr}
  .rfp-stats.four .rfp-stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.06)}
  .rfp-stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.06);padding:18px 18px}
  .rfp-stat:last-child{border-bottom:0}
  .rfp-hold{padding:14px 15px;gap:11px}
  .rfp-claim{flex-direction:column;align-items:stretch;gap:12px}
  .rfp-claim-btn{width:100%}
  .rfp-claim-note{min-width:0}
  .rfp-hrow{padding:14px 16px;gap:10px}
  /* Below this width the row title no longer fits on one line. Wrapping it
     is right; an ellipsis would hide which invitee the money came from. */
  .rfp-hrow-t{white-space:normal;line-height:1.35}
  .rfp-hrow{align-items:flex-start}
  .rfp-hrow-r{padding-top:1px}
}
@media(max-width:400px){
  /* At phone widths the copy button on its own line beats an ellipsised
     link the user cannot read. */
  .rfp-link-row{flex-direction:column;align-items:stretch;gap:8px;padding:12px 14px}
  .rfp-link-val{font-size:12px;white-space:normal;word-break:break-all;padding:0}
  .rfp-copy{width:100%;padding:11px}
  .rfp-title{font-size:18px}
  .rfp-sub{font-size:13px}
  .rfp-hrow-t{font-size:13.5px}
  .rfp-hrow-a{font-size:14.5px}
  .pf-row-key{flex-direction:column;align-items:stretch}
  .pf-row-copy{width:100%}
  .pf-row-keycode{white-space:normal;word-break:break-all;min-width:0}
  .page-h{flex-wrap:wrap;gap:12px}
  .page-h-t{font-size:26px!important}
}

/* ── Toast ── */
.toast{
  position:fixed;bottom:max(24px,env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(100px);
  padding:13px 22px;border-radius:11px;
  background:#fff;color:#0b1220;font-size:13.5px;font-weight:700;
  box-shadow:0 14px 30px rgba(0,0,0,.45);z-index:1000;
  opacity:0;transition:opacity .25s,transform .35s var(--ease-soft);
  pointer-events:none;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#fca5a5;color:#7f1d1d}
.toast.ok{background:linear-gradient(180deg,#22c55e,#15803d);color:#fff}

/* Hide all tab panels except active */
.panel{display:none}
.panel.on{display:block}

/* ════════════════════════════════════════════════════════════════════════
   SUPPORT-ADMIN ENTRY POINTS (server-rendered only for staff allowlist)
   These styles never reach a non-admin browser because the markup itself
   is gated server-side in the /profile view (see app.py::profile_page).
   ═══════════════════════════════════════════════════════════════════════ */

/* Compact role pill in the top-right header (next to "Обновить" / "Выйти") */
.prof-admin-pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;
  border-radius:11px;text-decoration:none;cursor:pointer;
  background:linear-gradient(180deg,rgba(245,158,11,.18),rgba(120,53,15,.05));
  border:1px solid rgba(251,191,36,.42);
  color:#fef3c7;font-size:12.5px;font-weight:800;letter-spacing:.2px;
  box-shadow:0 0 14px rgba(251,191,36,.18),0 0 0 1px rgba(251,191,36,.10) inset;
  transition:filter .2s var(--ease-soft),transform .15s,box-shadow .2s;
  white-space:nowrap;
}
.prof-admin-pill:hover{filter:brightness(1.1);transform:translateY(-.5px);
  box-shadow:0 4px 16px rgba(245,158,11,.30),0 0 0 1px rgba(251,191,36,.20) inset}
.prof-admin-pill svg{width:14px;height:14px;stroke-width:2.4;color:#fde68a}
.prof-admin-pill.role-support{
  background:linear-gradient(180deg,rgba(34,211,238,.18),rgba(8,145,178,.04));
  border-color:rgba(34,211,238,.45);
  color:#cffafe;
  box-shadow:0 0 14px rgba(34,211,238,.18),0 0 0 1px rgba(34,211,238,.10) inset;
}
.prof-admin-pill.role-support svg{color:#a5f3fc}
.prof-admin-pill .cnt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:16px;padding:0 5px;border-radius:6px;font-size:10px;
  font-weight:900;background:rgba(0,0,0,.32);color:#fff;
  font-variant-numeric:tabular-nums;
}
@media(max-width:560px){.prof-admin-pill span.lbl{display:none}}

/* Header nav extra link for admins (after "Лоадер") */
.nv a.prof-nav-support{
  position:relative;color:#fde68a;
}
.nv a.prof-nav-support::before{
  content:"";position:absolute;inset:-1px;border-radius:9px;
  background:linear-gradient(180deg,rgba(245,158,11,.10),transparent);
  pointer-events:none;z-index:-1;
}
.nv a.prof-nav-support:hover{color:#fff7e0;background:rgba(245,158,11,.10)}
.nv a.prof-nav-support .cnt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:16px;padding:0 5px;margin-left:5px;border-radius:6px;
  font-size:10px;font-weight:900;background:#f59e0b;color:#1f1208;
  font-variant-numeric:tabular-nums;box-shadow:0 0 8px rgba(245,158,11,.45);
}

/* Big "Режим администратора" plate under the page-h */
.prof-admin-plate{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:18px 22px;margin:0 0 18px;border-radius:16px;
  background:linear-gradient(180deg,rgba(245,158,11,.14) 0%,rgba(120,53,15,.04) 100%);
  border:1px solid rgba(251,191,36,.36);
  box-shadow:0 0 0 1px rgba(251,191,36,.10) inset,0 12px 36px rgba(245,158,11,.12);
}
.prof-admin-plate.role-support{
  background:linear-gradient(180deg,rgba(34,211,238,.12) 0%,rgba(8,145,178,.03) 100%);
  border-color:rgba(34,211,238,.36);
  box-shadow:0 0 0 1px rgba(34,211,238,.10) inset,0 12px 36px rgba(34,211,238,.12);
}
.prof-admin-plate::after{
  content:"";position:absolute;top:0;right:0;width:280px;height:280px;
  background:radial-gradient(circle at 100% 0%,rgba(251,191,36,.18),transparent 60%);
  pointer-events:none;
}
.prof-admin-plate.role-support::after{
  background:radial-gradient(circle at 100% 0%,rgba(34,211,238,.18),transparent 60%);
}
.prof-admin-plate-icon{
  width:48px;height:48px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#92400e,#78350f);
  border:1px solid rgba(251,191,36,.45);
  box-shadow:0 0 0 1px rgba(251,191,36,.18) inset,0 0 18px rgba(251,191,36,.25);
  position:relative;z-index:1;
}
.prof-admin-plate.role-support .prof-admin-plate-icon{
  background:linear-gradient(135deg,#075985,#0c4a6e);
  border-color:rgba(34,211,238,.45);
  box-shadow:0 0 0 1px rgba(34,211,238,.18) inset,0 0 18px rgba(34,211,238,.25);
}
.prof-admin-plate-icon svg{width:22px;height:22px;color:#fde68a;stroke-width:2.2;
  filter:drop-shadow(0 0 6px rgba(251,191,36,.55))}
.prof-admin-plate.role-support .prof-admin-plate-icon svg{color:#a5f3fc;
  filter:drop-shadow(0 0 6px rgba(34,211,238,.55))}
.prof-admin-plate-r{flex:1;min-width:0;position:relative;z-index:1}
.prof-admin-plate-t{
  font-size:15.5px;font-weight:800;color:#fff;letter-spacing:-.2px;line-height:1.2;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.prof-admin-plate-role{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px;border-radius:999px;
  background:rgba(0,0,0,.22);border:1px solid rgba(251,191,36,.45);
  font-size:10.5px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;
  color:#fde68a;text-shadow:0 0 8px rgba(251,191,36,.45);
}
.prof-admin-plate.role-support .prof-admin-plate-role{
  border-color:rgba(34,211,238,.45);color:#a5f3fc;
  text-shadow:0 0 8px rgba(34,211,238,.45);
}
.prof-admin-plate-s{
  font-size:12.5px;color:rgba(255,255,255,.62);margin-top:6px;font-weight:500;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.prof-admin-plate-s .live-dot{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono','Courier New',monospace;font-size:11px;
  color:#86efac;letter-spacing:.2px;
}
.prof-admin-plate-s .live-dot::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--green-mid);
  box-shadow:0 0 8px rgba(134,239,172,.65);animation:prof-blink 2s infinite;
}
@keyframes prof-blink{0%,100%{opacity:.55}50%{opacity:1}}

.prof-admin-plate-cta{
  display:flex;gap:8px;flex-shrink:0;position:relative;z-index:1;flex-wrap:wrap;
}
.prof-admin-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 16px;border-radius:11px;
  font-size:13px;font-weight:800;letter-spacing:.1px;text-decoration:none;cursor:pointer;
  transition:filter .2s var(--ease-soft),transform .15s,box-shadow .2s;
}
.prof-admin-btn svg{width:14px;height:14px;stroke-width:2.4}
.prof-admin-btn.primary{
  background:linear-gradient(180deg,#f59e0b,#92400e);color:#fff;
  border:1px solid rgba(251,191,36,.55);
  box-shadow:0 4px 16px rgba(245,158,11,.42),0 0 0 1px rgba(255,255,255,.08) inset;
}
.prof-admin-plate.role-support .prof-admin-btn.primary{
  background:linear-gradient(180deg,#22d3ee,#0e7490);
  border-color:rgba(34,211,238,.55);
  box-shadow:0 4px 16px rgba(34,211,238,.42),0 0 0 1px rgba(255,255,255,.08) inset;
}
.prof-admin-btn.primary:hover{filter:brightness(1.08);transform:translateY(-.5px)}
.prof-admin-btn.ghost{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);color:#fff;
}
.prof-admin-btn.ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
@media(max-width:560px){
  .prof-admin-plate{padding:14px 16px;gap:14px}
  .prof-admin-plate-cta{width:100%;justify-content:stretch}
  .prof-admin-plate-cta .prof-admin-btn{flex:1;justify-content:center}
}

/* ════════════════════════════════════════════════════════════════════════
   TICKETS TAB — empty state + sticky toolbar (premium)
   ═══════════════════════════════════════════════════════════════════════ */
.tk-tab-toolbar{
  position:sticky;top:calc(72px + env(safe-area-inset-top,0px) + 4px);z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 12px;margin:0 0 12px;border-radius:12px;
  background:linear-gradient(180deg,rgba(7,9,11,.78),rgba(7,9,11,.62));
  -webkit-backdrop-filter:saturate(160%) blur(14px);
          backdrop-filter:saturate(160%) blur(14px);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 22px rgba(0,0,0,.32);
}
.tk-tab-toolbar-l{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tk-tab-toolbar-r{display:flex;align-items:center;gap:8px}
.tk-tab-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;border-radius:9px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  color:var(--t2);font-size:11.5px;font-weight:700;letter-spacing:.2px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;text-transform:uppercase;
}
.tk-tab-chip:hover{background:rgba(255,255,255,.06);color:#fff}
.tk-tab-chip.on{background:#fff;color:#0b1220;border-color:#fff}
.tk-tab-chip .cnt{
  min-width:18px;height:16px;line-height:16px;text-align:center;padding:0 5px;
  border-radius:5px;font-size:10px;font-weight:800;background:rgba(0,0,0,.10);
}
.tk-tab-chip:not(.on) .cnt{background:rgba(255,255,255,.07);color:var(--t2)}
.tk-tab-open-spa{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;
  background:linear-gradient(180deg,rgba(34,211,238,.18),rgba(8,145,178,.04));
  border:1px solid rgba(34,211,238,.40);color:#cffafe;
  font-size:12.5px;font-weight:800;letter-spacing:.2px;text-decoration:none;
  box-shadow:0 0 14px rgba(34,211,238,.16),0 0 0 1px rgba(34,211,238,.10) inset;
  transition:filter .2s,transform .15s,box-shadow .2s;
}
.tk-tab-open-spa:hover{filter:brightness(1.1);transform:translateY(-.5px);
  box-shadow:0 4px 16px rgba(34,211,238,.30)}
.tk-tab-open-spa svg{width:13px;height:13px;stroke-width:2.4}

/* Empty state — illustrative neon SVG + dual CTAs */
.tk-tab-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:64px 24px 56px;margin:0;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.005));
  border:1px solid rgba(255,255,255,.05);border-radius:16px;position:relative;overflow:hidden;
}
.tk-tab-empty::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(34,211,238,.06),transparent 55%);
  pointer-events:none;
}
.tk-tab-empty-art{
  width:140px;height:140px;flex-shrink:0;color:#22d3ee;
  filter:drop-shadow(0 0 22px rgba(34,211,238,.32));
  position:relative;z-index:1;
}
.tk-tab-empty-art .ac{stroke:#fbbf24;filter:drop-shadow(0 0 8px rgba(251,191,36,.55))}
.tk-tab-empty-t{
  font-size:20px;font-weight:800;letter-spacing:-.3px;color:#fff;
  margin:18px 0 8px;position:relative;z-index:1;
}
.tk-tab-empty-s{
  font-size:13px;color:var(--t2);max-width:460px;line-height:1.55;
  margin:0 0 20px;position:relative;z-index:1;
}
.tk-tab-empty-cta{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;position:relative;z-index:1;
}
.tk-tab-empty-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 18px;border-radius:11px;font-size:13px;font-weight:800;letter-spacing:.1px;
  text-decoration:none;cursor:pointer;
  transition:filter .2s var(--ease-soft),transform .15s,box-shadow .2s,background .2s,border-color .2s;
}
.tk-tab-empty-btn svg{width:14px;height:14px;stroke-width:2.4}
.tk-tab-empty-btn.primary{
  background:linear-gradient(180deg,#22d3ee,#0e7490);color:#fff;border:1px solid rgba(34,211,238,.55);
  box-shadow:0 4px 16px rgba(34,211,238,.36),0 0 0 1px rgba(255,255,255,.08) inset;
}
.tk-tab-empty-btn.primary:hover{filter:brightness(1.08);transform:translateY(-.5px)}
.tk-tab-empty-btn.ghost{
  background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.10);
}
.tk-tab-empty-btn.ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.ftr{max-width:920px;width:100%;margin:auto auto 0;border-top:1px solid var(--brd);padding:20px clamp(20px,4vw,40px);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;color:var(--t3);box-sizing:border-box;flex-shrink:0}
.ftr a{color:var(--t3);text-decoration:none;margin-left:14px;transition:color .18s}.ftr a:hover{color:var(--t2)}
@media(max-width:560px){.ftr{flex-direction:column;gap:8px;text-align:center;padding-bottom:max(28px,env(safe-area-inset-bottom,0px))}.ftr a{margin-left:10px}}
@media(max-width:760px){.tk-tab-toolbar{top:calc(64px + env(safe-area-inset-top,0px) + 4px)}}

/* ── Smoothness audit pass 1 ─────────────────────────────────
   1. Respect OS "Reduce Motion" — accessibility + perceived speed.
   2. Kill stuck :hover after tap on touch (no real hover support).
   3. Animate only compositor-friendly props on touch hover-lift hacks.
   4. Smooth cross-page navigation (View Transitions API, Chromium) —
      progressive enhancement, silently ignored where unsupported.
   Safe to remove this whole block to revert.
   ───────────────────────────────────────────────────────────── */
@view-transition { navigation: none; }
::view-transition-old(root){ animation-duration: .22s; }
::view-transition-new(root){ animation-duration: .22s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation: none !important; }
}
@media (hover: none) {
  a:hover, button:hover, [role="button"]:hover { transform: none !important; }
}

/* Четыре ступени текста вместо полутора десятков прозрачностей вразнобой.
   Нижние две держат порог читаемости на почти чёрном фоне: 5,3:1 и 6,9:1
   против 2,5:1 и 4,0:1, которые тут стояли раньше — даты и номера
   заказов приходилось выглядывать. Ниже порога остаётся только --pf-dim,
   и он не используется под текст. */
:root{
  --pf-ink-2:rgba(255,255,255,.74);
  --pf-ink-3:rgba(255,255,255,.58);
  --pf-ink-4:rgba(255,255,255,.48);
  --pf-dim:rgba(255,255,255,.22);
  /* Стрелка нарисована, а не набрана символом: юникодные глифы приходят
     от системного шрифта и в каждой ОС весят по-своему. */
  --pf-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M19 12l-7 7-7-7'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════════════
   КАБИНЕТ ВИТРИНОЙ (2026-08-24) — БЛОК ДОЛЖЕН ИДТИ ПОСЛЕДНИМ

   Трёх равноправных панелей больше нет. Покупки — единственное, за чем
   в кабинет приходят, поэтому они заняли правую колонку целиком: бар
   игр по числу покупок, фильтры, список с ключами. Профиль, баланс и
   промокод ужались в липкую карточку слева, транзакции стали секцией
   под покупками, рефералка — секцией под ними.

   Откат: вернуть разметку трёх .panel и указатель .pf-idx из
   profile.html.bak-lzt рядом с шаблоном.
   ══════════════════════════════════════════════════════════════════════ */

.pf-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pf-sec-h h2{font-size:17px;font-weight:650;letter-spacing:-.03em;color:#fff;margin:0}
.pf-sec-n{font-size:12.5px;color:var(--pf-ink-3);font-variant-numeric:tabular-nums}
.pf-sec-n b{color:#fff;font-weight:650}
.pf-sec-n:empty{display:none}

/* Пока сессия не подтвердилась, лишние секции только мешают: сообщение
   о входе должно быть одно, а не трижды. */
body.pf-auth-error #panel-tx,
body.pf-auth-error #refBody,
body.pf-auth-error .pf-h{display:none}

/* ─────────────────────────────────────────────────────────────────────
   Витрина: две колонки

   Слева карточка покупателя — фото, факты, деньги. Справа то,
   за чем сюда приходят: бар игр по числу покупок, фильтры и сами
   покупки с ключами. Язык тот же, что на маркете: волосяные линии
   вместо рамок, зелёный только под деньги, подчёркивание вместо
   заливки у активного.
   ───────────────────────────────────────────────────────────────────── */
/* Общая обёртка сайта зажата в 920 px — для одной колонки текста это
   правильно, но здесь их две, и на покупки оставалось около 620 px:
   бар игр не помещался, фильтры ломались на две строки. */
.wrap.pf-wrap{max-width:1240px!important}
.pf-wrap{
  display:grid;grid-template-columns:268px minmax(0,1fr);gap:34px;align-items:start;
}
/* У элементов сетки min-width по умолчанию auto: без сброса колонка не
   может стать уже содержимого и на узком экране страница разъезжается. */
.pf-wrap>*{min-width:0}

.pf-side{position:static;display:flex;flex-direction:column;gap:20px}

.pf-me-ava{
  width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;position:relative;
  background:rgba(255,255,255,.035);display:flex;align-items:center;justify-content:center;
}
/* Волосяная линия по краю: без неё квадрат фото сливался с фоном, а у
   покупателя без фото оставался просто тёмный провал. */
.pf-me-ava::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.pf-me-ava img{width:100%;height:100%;object-fit:cover;display:block}
.pf-me-ava span{
  font-size:64px;font-weight:750;letter-spacing:-.04em;line-height:1;
  color:var(--pf-dim);
  /* Прописная буква сидит выше оптического центра квадрата. */
  transform:translateY(-.02em);
}
.pf-me-name{font-size:18px;font-weight:700;letter-spacing:-.03em;margin-top:14px;word-break:break-word}
.pf-me-at{font-size:13px;color:#60a5fa;margin-top:2px;word-break:break-all}
.pf-me-since{font-size:12px;color:var(--pf-ink-4);margin-top:8px}

/* Значки привязанных входов. Telegram есть всегда — без него аккаунта
   не существует; Discord либо привязан, либо предлагается подключить. */
.pf-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pf-link{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 11px;
  border:1px solid var(--pf-hair);border-radius:10px;font-size:12px;
  color:var(--pf-ink-3);background:transparent;font-family:inherit;
  transition:border-color .16s ease,color .16s ease}
.pf-link svg{width:14px;height:14px;flex:none}
.pf-link b{font-weight:650;color:var(--pf-ink-2);max-width:120px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pf-link.on{color:var(--pf-ink-2)}
.pf-link.on .pf-link-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;flex:none}
.pf-link.off{color:var(--pf-ink-4)}
.pf-link-act{margin-left:2px;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:650;color:var(--pf-ink-3);
  padding:0;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.22)}
.pf-link-act:hover{color:#fff;text-decoration-color:#fff}
.pf-link-act.danger:hover{color:#f87171;text-decoration-color:#f87171}
/* Подпись на месте «отвязать» у обычного посетителя. Она длиннее
   кнопки, которую заменила, поэтому значку разрешено перенести её на
   вторую строку и подрасти — иначе на телефоне он вылезал за экран. */
.pf-link-hint{margin-left:2px;font-size:11.5px;line-height:1.4;
  color:var(--pf-ink-4);font-weight:500}
.pf-link.roomy{height:auto;min-height:32px;padding:6px 11px;
  flex-wrap:wrap;row-gap:2px}
@media (max-width:560px){
  .pf-link-hint{flex-basis:100%;margin-left:22px}
}
.pf-link-note{margin-top:10px;font-size:12px;line-height:1.5;color:#fca5a5}
.pf-link-note.ok{color:#4ade80}

.pf-facts{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.pf-fact{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px}
.pf-fact span{color:var(--pf-ink-4)}
.pf-fact b{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-fact b small{font-size:.78em;opacity:.55;margin:0 .12em}

.pf-hair{height:1px;background:rgba(255,255,255,.09)}

.pf-bal-l{font-size:11.5px;color:var(--pf-ink-4)}
.pf-bal-v{
  font-size:27px;font-weight:800;letter-spacing:-.04em;color:#4ade80;
  font-variant-numeric:tabular-nums;margin:5px 0 13px;
}
.pf-bal-v small{font-size:.62em;opacity:.7;margin:0 .1em}
.pf-bal-btns{display:flex;gap:8px;align-items:center}
.pf-btn{
  flex:1;text-align:center;padding:9px 12px;border-radius:9px;
  font-size:13px;font-weight:650;border:0;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s,opacity .16s;
}
.pf-btn-p{background:#fff;color:#0b0b0c}
.pf-btn-p:hover{background:#e8e8e8}
.pf-btn-g{background:transparent;border:1px solid rgba(255,255,255,.11);color:var(--pf-ink-2)}
.pf-btn-g:hover{color:#fff;border-color:rgba(255,255,255,.24)}
.pf-btn-g[disabled]{opacity:.42;cursor:default}
.pf-btn-g[disabled]:hover{color:var(--pf-ink-2);border-color:rgba(255,255,255,.11)}

/* Подсказка у «Забрать»: реферальные деньги второй суммой. Отдельного
   блока они не заслуживают — у большинства там ноль. */
.pf-hint{position:relative;flex:none}
.pf-hint-i{
  width:19px;height:19px;border-radius:50%;padding:0;
  border:1px solid rgba(255,255,255,.11);background:transparent;
  color:var(--pf-ink-4);font-size:11px;font-weight:700;line-height:1;cursor:help;
  display:flex;align-items:center;justify-content:center;
}
.pf-hint:hover .pf-hint-i,.pf-hint:focus-within .pf-hint-i{color:#fff;border-color:rgba(255,255,255,.3)}
.pf-hint-b{
  position:absolute;left:50%;bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(4px);
  width:250px;padding:13px 14px;border-radius:11px;z-index:30;
  background:#0d0d0e;border:1px solid rgba(255,255,255,.13);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.9);
  opacity:0;pointer-events:none;
  transition:opacity .16s cubic-bezier(.16,1,.3,1),transform .16s cubic-bezier(.16,1,.3,1);
}
.pf-hint:hover .pf-hint-b,.pf-hint:focus-within .pf-hint-b{opacity:1;transform:translateX(-50%) translateY(0)}
.pf-hint-t{font-size:11.5px;color:var(--pf-ink-4)}
.pf-hint-v{font-size:19px;font-weight:750;color:#4ade80;margin:3px 0 7px;font-variant-numeric:tabular-nums}
.pf-hint-v.zero{color:var(--pf-ink-3);font-size:15px;font-weight:600}
.pf-hint-v small{font-size:.66em;opacity:.7;margin:0 .1em}
.pf-hint-d{font-size:12px;line-height:1.5;color:var(--pf-ink-2);display:block}

.pf-jump{display:flex;flex-direction:column;gap:9px}
.pf-side-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:13px;color:var(--pf-ink-2);padding:3px 0;background:none;border:0;
  width:100%;cursor:pointer;text-align:left;
}
/* Стрелка вниз, потому что это переход к месту на той же странице, а не
   уход на другую. Появляется по наведению, чтобы не шуметь в покое. */
.pf-side-link::after{
  content:'';width:11px;height:11px;flex:none;margin-left:2px;
  background:currentColor;opacity:0;transition:opacity .15s,transform .15s;
  transform:translateY(-2px);
  -webkit-mask:var(--pf-arrow) center/contain no-repeat;
  mask:var(--pf-arrow) center/contain no-repeat;
}
.pf-side-link:hover::after,.pf-side-link:focus-visible::after{opacity:.6;transform:none}
.pf-side-link:hover{color:#fff}
.pf-side-link b{font-size:11.5px;font-weight:600;color:var(--pf-ink-4);font-variant-numeric:tabular-nums}

.pf-side .pf-promo-lbl{font-size:11.5px;color:var(--pf-ink-4);margin:0 0 8px}
/* flex-direction задаём явно: общий стиль сайта ставит форме промокода
   column на узком экране, и в боковой карточке кнопка уезжала под поле. */
.pf-side .promo-form{display:flex;flex-direction:row;gap:7px;align-items:center}
.pf-side .promo-input{
  flex:1;min-width:0;background:transparent;border:0;
  border-bottom:1px solid rgba(255,255,255,.11);border-radius:0;
  padding:7px 0;font-size:13px;text-transform:uppercase;color:#fff;outline:none;
}
.pf-side .promo-input::placeholder{color:var(--pf-ink-4);text-transform:none}
.pf-side .promo-input:focus{border-bottom-color:rgba(255,255,255,.3)}
.pf-side .promo-btn{
  background:none;border:0;padding:0;width:auto;flex-shrink:0;
  font-size:12.5px;font-weight:650;color:#60a5fa;white-space:nowrap;cursor:pointer;
  box-shadow:none;border-radius:0;
}
.pf-side .promo-btn:hover:not(:disabled){background:none;transform:none;filter:none;box-shadow:none}
.pf-side .promo-btn svg{display:none}
.pf-side .promo-btn[disabled]{opacity:.5;cursor:default}
.pf-side .promo-msg{font-size:12px;margin-top:7px}
.pf-side .promo-msg:empty{display:none}

.pf-logout{
  display:flex;align-items:center;gap:7px;background:none;border:0;padding:0;
  font-size:12.5px;color:var(--pf-ink-4);cursor:pointer;transition:color .15s;
}
.pf-logout:hover{color:var(--pf-ink-2)}
.pf-logout svg{width:14px;height:14px;stroke-width:1.8}

/* ── Правая колонка ─────────────────────────────────────────────────── */
.pf-h-t{font-size:27px;font-weight:800;letter-spacing:-.04em;line-height:1.05;margin:0}
.pf-h-s{font-size:13px;color:var(--pf-ink-3);margin:7px 0 0}
.pf-h-s b{color:var(--pf-ink-2);font-weight:600}
.pf-h-s:empty{display:none}

/* Бар игр. Логотипы белые на почти чёрном, поэтому приглушать их сильно
   нельзя: активную вкладку выделяет подчёркивание, а не яркость. */
.pf-gbar{
  display:flex;overflow-x:auto;scrollbar-width:none;margin-top:18px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.pf-gbar::-webkit-scrollbar{display:none}
.pf-gtab{
  flex:none;display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  padding:13px 0;margin-right:26px;position:relative;opacity:.78;
  transition:opacity .18s cubic-bezier(.16,1,.3,1);
}
.pf-gtab:hover{opacity:1}
.pf-gtab.on{opacity:1}
.pf-gtab::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform .2s cubic-bezier(.16,1,.3,1);
}
.pf-gtab.on::after{transform:scaleX(1)}
/* Логотипы лежат на холсте с большим прозрачным полем: у CS2 и BF6
   широкая надпись внутри квадрата 600×600, у Steam-логотипов — внутри
   640×360. При contain от надписи оставалась полоска в треть высоты, и
   ряд выглядел кривым: DayZ во всю плитку, CS2 — серое пятнышко.
   Поле обрезаем, как это делает витрина. Dota 2 (/570/), Black Ops 7 и
   ARC нарисованы уже по краю, им обрезка не нужна. */
.pf-glogo{width:74px;height:34px;object-fit:contain;display:block}
.pf-glogo[src$="/logo.png"]:not([src*="/570/"]),
.pf-glogo[src*="cs2_logo"],
.pf-glogo[src*="bf6_logo"],
.pf-glogo[src*="eft_logo"]{object-fit:cover}
.pf-glogo.inv{filter:brightness(0) invert(1)}
.pf-gtab-l{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--pf-ink-3)}
.pf-gtab-n{font-size:12.5px;font-weight:600;color:var(--pf-ink-3);font-variant-numeric:tabular-nums}
.pf-gtab.on .pf-gtab-n{color:#fff}
/* Первая плитка подписана словом: одна иконка Steam среди вордмарков
   читалась как ещё одна игра, а не как «все». */
.pf-gtab-all{display:flex;align-items:center;gap:8px;height:28px}
.pf-gtab-all svg{width:18px;height:18px;flex:none;opacity:.85}
.pf-gtab-all i{
  font-style:normal;font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  color:var(--pf-ink-2);
}
.pf-gtab.on .pf-gtab-all i{color:#fff}

/* ── Фильтры ────────────────────────────────────────────────────────── */
.pf-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0}
.pf-fin{
  background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.09);
  border-radius:0;padding:7px 0;font-size:13px;color:#fff;outline:none;min-width:0;
}
.pf-fin::placeholder{color:var(--pf-ink-4)}
/* Фокус показывает сама линия поля, а не кольцо вокруг него. Раньше она
   поднималась с 9% до 30% белого — на чёрном это почти незаметно, и
   единственным внятным признаком оставалось чужое синее кольцо. Теперь
   линия становится акцентной и заметно ярче, так что фокус виден и с
   клавиатуры, и мышью, но ничего не вспыхивает поверх вёрстки. */
.pf-fin:focus{border-bottom-color:rgba(96,165,250,.75)}
.pf-fin::-webkit-outer-spin-button,.pf-fin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pf-fin[type=number]{-moz-appearance:textfield}
.pf-fsearch{flex:1;min-width:170px}
.pf-fgroup{
  display:flex;align-items:baseline;gap:9px;flex:none;
  border-bottom:1px solid rgba(255,255,255,.09);padding-bottom:0;
}
.pf-fgroup:focus-within{border-bottom-color:rgba(96,165,250,.75)}
.pf-fgroup-l{font-size:12.5px;color:var(--pf-ink-4);white-space:nowrap}
.pf-fdash{font-size:12px;color:var(--pf-dim)}
.pf-fprice{width:56px;border-bottom:0}
.pf-fprice:focus{border-bottom:0}
.pf-fsorts{display:flex;gap:15px;margin-left:auto}
.pf-fsort{
  background:none;border:0;padding:3px 0;cursor:pointer;
  font-size:12.5px;color:var(--pf-ink-4);
  border-bottom:1px solid transparent;transition:color .15s;
}
.pf-fsort:hover{color:var(--pf-ink-2)}
.pf-fsort.on{color:#fff;font-weight:650;border-bottom-color:#fff}
.pf-fcount{font-size:12px;color:var(--pf-ink-4);font-variant-numeric:tabular-nums;padding-bottom:10px}

/* ── Строка покупки ─────────────────────────────────────────────────── */
.pf-rows{border-top:1px solid rgba(255,255,255,.09)}
/* Подсветка на всю ширину колонки, а не по содержимому: отрицательные
   поля дают строке воздух по краям, не сдвигая сетку. */
.pf-r{
  display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:14px 14px;margin:0 -14px;border-radius:10px;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .14s ease;
}
.pf-r:hover{background:rgba(255,255,255,.022)}
.pf-r-g{width:58px;height:26px;display:flex;align-items:center}
/* Та же обрезка, что в баре: иначе в строке от CS2 остаётся серое
   пятнышко рядом с DayZ во всю ячейку. */
.pf-r-g img{width:58px;height:26px;object-fit:contain;display:block}
.pf-r-g img[src$="/logo.png"]:not([src*="/570/"]),
.pf-r-g img[src*="cs2_logo"],
.pf-r-g img[src*="bf6_logo"],
.pf-r-g img[src*="eft_logo"]{object-fit:cover}
.pf-r-g img.inv{filter:brightness(0) invert(1)}
.pf-r-g .l{font-size:14px;font-weight:800;color:var(--pf-ink-4)}
.pf-r-t{font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.pf-r-s{font-size:12px;color:var(--pf-ink-4);margin-top:4px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
/* Ключ — главное, за чем открывают строку, поэтому он лежит на своей
   подложке: моноширинный текст без неё сливался с датой и номером. */
.pf-r-key{display:flex;align-items:center;gap:10px;margin-top:8px}
.pf-r-key code{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;color:var(--pf-ink-3);letter-spacing:.02em;
  background:rgba(255,255,255,.04);border-radius:6px;padding:4px 8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:290px;min-width:0;
  transition:color .14s,background .14s;
}
.pf-r:hover .pf-r-key code{color:var(--pf-ink-2);background:rgba(255,255,255,.06)}
.pf-r-cp{
  background:none;border:0;padding:0;cursor:pointer;
  font-size:11.5px;font-weight:650;color:#60a5fa;white-space:nowrap;
}
.pf-r-cp:hover{color:#93c5fd}
.pf-r-cp.copied{color:#4ade80}
.pf-r-open{font-size:11.5px;color:var(--pf-ink-4);white-space:nowrap}
.pf-r-open:hover{color:var(--pf-ink-2)}
/* Клавиатура должна видеть, где она находится. */
.pf-r-cp:focus-visible,.pf-r-open:focus-visible,.pf-more:focus-visible,
.pf-fsort:focus-visible,.pf-gtab:focus-visible,.pf-side-link:focus-visible{
  outline:2px solid rgba(96,165,250,.6);outline-offset:3px;border-radius:4px;
}
.pf-r-amt{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-r-amt small{font-size:.72em;opacity:.6;margin:0 .1em}
/* Рубль идёт после суммы и может быть тише неё; доллар идёт перед и при
   той же скидке в размере выглядит обрезанным. Ведущий символ приподняли
   почти до кегля числа. */
.pf-r-amt small:first-child,.pf-bal-v small:first-child,
.pf-fact b small:first-child,.pf-h-s b small:first-child{
  font-size:.84em;opacity:.8;margin:0 .04em 0 0;
}

/* Единственный поставленный вход на странице: список покупок всплывает
   один раз, при первой отрисовке. Перерисовок здесь много — каждая буква
   в поиске, — и повторять анимацию на них значило бы моргать всем
   списком на каждое нажатие. */
@keyframes pfRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.pf-rows.enter .pf-r{animation:pfRise .5s cubic-bezier(.16,1,.3,1) both}
.pf-rows.enter .pf-r:nth-child(1){animation-delay:0ms}
.pf-rows.enter .pf-r:nth-child(2){animation-delay:26ms}
.pf-rows.enter .pf-r:nth-child(3){animation-delay:52ms}
.pf-rows.enter .pf-r:nth-child(4){animation-delay:78ms}
.pf-rows.enter .pf-r:nth-child(5){animation-delay:104ms}
.pf-rows.enter .pf-r:nth-child(6){animation-delay:130ms}
.pf-rows.enter .pf-r:nth-child(n+7){animation-delay:156ms}
@media (prefers-reduced-motion: reduce){
  .pf-rows.enter .pf-r{animation:none}
}

.pf-nores{padding:42px 0;text-align:center;color:var(--pf-ink-4);font-size:13.5px}
.pf-nores button{background:none;border:0;color:#60a5fa;font-weight:600;margin-left:6px;cursor:pointer}

/* Кнопка «показать ещё»: строка, а не плитка — она продолжает список,
   а не спорит с ним за внимание. */
.pf-more{
  display:block;width:100%;background:none;border:0;cursor:pointer;
  padding:15px 0;font-size:12.5px;font-weight:600;color:var(--pf-ink-3);
  border-bottom:1px solid rgba(255,255,255,.05);transition:color .15s;
}
.pf-more:hover{color:#fff}
.pf-more b{font-weight:600;color:var(--pf-ink-4);font-variant-numeric:tabular-nums}
.pf-more:hover b{color:var(--pf-ink-3)}

/* ── Транзакции ─────────────────────────────────────────────────────
   Та же сетка, что у покупок: стрелка занимает колонку логотипа, и два
   списка на одной странице читаются как один. */
.pf-tx-ic{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);
}
.pf-tx-ic svg{width:13px;height:13px;display:block}
.pf-tx-ic.pos{color:#4ade80;background:rgba(74,222,128,.1)}
.pf-tx-ic.neg{color:var(--pf-ink-3)}
.pf-r-tx .pf-r-t{font-weight:550}
.pf-r-amt.pos{color:#4ade80}
.pf-r-amt.neg{color:var(--pf-ink-2)}

/* Транзакции и рефералка идут ниже покупок, отделённые воздухом. */
.pf-sec{margin-top:56px;scroll-margin-top:96px}
.pf-main #refBody:empty{display:none}
.pf-sec-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:13px;margin-bottom:0;border-bottom:1px solid rgba(255,255,255,.09);
}
.pf-sec-h h2{font-size:18px;font-weight:700;letter-spacing:-.03em}

/* ── Реферальная программа ──────────────────────────────────────────
   Была карточкой в рамке с бейджем и цветными плитками — чужой язык на
   странице, где всё остальное держится на волосяных линиях. Кнопка
   «Забрать» отсюда уехала к балансу, осталось объяснение, ссылка и
   счётчики. */
.pf-main .rfp{
  margin-top:56px;background:none;border:0;border-radius:0;padding:0;box-shadow:none;
  /* Переход из карточки не должен упирать заголовок в липкую шапку. */
  scroll-margin-top:96px;
}
.pf-main .rfp::before,.pf-main .rfp::after{display:none}
.pf-main .rfp-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:13px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.09);
}
.pf-main .rfp-title{font-size:18px;font-weight:700;letter-spacing:-.03em;margin:0}
.pf-main .rfp-sub{
  font-size:12.5px;color:var(--pf-ink-3);font-weight:400;
  margin:6px 0 0;max-width:62ch;line-height:1.5;
}
.pf-main .rfp-head-l{min-width:0}
.pf-main .rfp-badge{
  flex:none;background:none;border:0;padding:0;border-radius:0;box-shadow:none;
  font-size:12px;font-weight:600;color:var(--pf-ink-4);white-space:nowrap;
}
.pf-main .rfp-link{margin-bottom:22px}
.pf-main .rfp-lbl{font-size:11.5px;font-weight:400;color:var(--pf-ink-4);margin:0 0 8px}
.pf-main .rfp-link-row{
  display:flex;align-items:center;gap:14px;background:none;border:0;
  border-bottom:1px solid rgba(255,255,255,.09);border-radius:0;padding:0 0 9px;
}
.pf-main .rfp-link-row:hover{border-color:rgba(255,255,255,.22)}
.pf-main .rfp-link-val{
  flex:1;min-width:0;font-size:13.5px;color:var(--pf-ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pf-main .rfp-copy{
  flex:none;background:none;border:0;padding:0;border-radius:0;box-shadow:none;
  font-size:12.5px;font-weight:650;color:#60a5fa;
}
.pf-main .rfp-copy:hover{background:none;color:#93c5fd;transform:none}
.pf-main .rfp-copy.copied{background:none;color:#4ade80}
/* Счётчики — такой же столбец фактов, как в левой карточке, а не
   цветные плитки с рамками. */
.pf-main .rfp-stats,.pf-main .rfp-stats.four{
  display:flex;gap:38px;flex-wrap:wrap;background:none;border:0;border-radius:0;
  overflow:visible;margin:0 0 18px;
}
.pf-main .rfp-stat,.pf-main .rfp-stat.hl,.pf-main .rfp-stat.hold{
  display:flex;flex-direction:column-reverse;gap:5px;align-items:flex-start;
  padding:0;border:0;background:none;min-width:0;
}
.pf-main .rfp-stat b{font-size:19px;font-weight:700;letter-spacing:-.03em;color:#fff}
.pf-main .rfp-stat b small{font-size:.62em;color:var(--pf-ink-3);margin:0 .1em}
.pf-main .rfp-stat span{font-size:11.5px;color:var(--pf-ink-4);font-weight:400}
.pf-main .rfp-stat.hl b{color:#4ade80}
.pf-main .rfp-stat.hold b{color:#93c5fd}
.pf-main .rfp-hold{
  display:flex;gap:11px;align-items:flex-start;background:none;border:0;border-radius:0;
  border-left:2px solid rgba(147,197,253,.35);padding:2px 0 2px 13px;margin:0 0 18px;
}
.pf-main .rfp-hold-ic{display:none}
.pf-main .rfp-hold-t{font-size:13px;font-weight:650;color:#bfdbfe}
.pf-main .rfp-hold-d{font-size:12.5px;color:var(--pf-ink-3);line-height:1.5}
.pf-main .rfp-claim{margin:0}
.pf-main .rfp-claim-note{font-size:12.5px;color:var(--pf-ink-3);line-height:1.5;margin:0}
.pf-main .rfp-claim-note.warn{color:#fbbf24}
.pf-main .rfp-claim-note.hold{color:#93c5fd}

@media(max-width:900px){
  .pf-wrap{grid-template-columns:1fr;gap:24px}
  .pf-side{position:static}
  /* Аватар во всю ширину съел бы первый экран целиком, поэтому на
     телефоне карточка становится строкой. */
  .pf-side-head{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center}
  .pf-me-ava{width:64px;aspect-ratio:1;border-radius:11px}
  .pf-me-ava span{font-size:25px}
  .pf-me-name{margin-top:0;font-size:16px}
  .pf-me-since{margin-top:4px}
  .pf-facts{flex-direction:row;gap:20px;flex-wrap:wrap}
  .pf-fact{flex-direction:column;gap:2px}
  .pf-h-t{font-size:23px}
  .pf-fsorts{margin-left:0;width:100%;overflow-x:auto;scrollbar-width:none}
  .pf-fsorts::-webkit-scrollbar{display:none}
  /* Цена остаётся своей колонкой и прижата к верху: подтягивать её
     отрицательным отступом нельзя — наезжает на ссылку под ключом. */
  .pf-r{grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:start}
  .pf-r-g{width:42px;height:auto;padding-top:2px}
  .pf-r-g img{width:42px;height:19px}
  .pf-r-amt{align-self:start;padding-top:1px}
  .pf-r-key code{max-width:none;flex:1}
  .pf-hint-b{left:auto;right:0;transform:translateY(4px)}
  .pf-hint:hover .pf-hint-b,.pf-hint:focus-within .pf-hint-b{transform:translateY(0)}
  .pf-sec{margin-top:40px}
}


/* ── First-paint skeleton ─────────────────────────────────────────────────
   Shown in place of the real rows until profile.js renders them. With the
   script external and cached the swap is near-instant; on a cold cache the
   sections read as "loading" instead of empty (no spinners — just row-shaped
   shimmer that matches the final layout, so nothing jumps). */
.pf-skel{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.pf-skel i{display:block;height:58px;border-radius:12px;
  background:linear-gradient(90deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.075) 50%,rgba(255,255,255,.035) 100%);
  background-size:200% 100%;animation:pfSkel 1.15s ease-in-out infinite}
.pf-skel-card i{height:74px}
.pf-skel-card i+i{height:40px;width:62%}
.pf-skel-card i+i+i{height:40px;width:44%}
@keyframes pfSkel{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.pf-skel i{animation:none}}

/* ── Loader login key (admin-only card in the side panel) ──────────────── */
.pf-lk{padding:2px 0}
.pf-lk-head{display:flex;align-items:flex-start;gap:11px}
.pf-lk-ic{flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(96,165,250,.1);color:#60a5fa}
.pf-lk-ic svg{width:17px;height:17px}
.pf-lk-t{font-size:14px;font-weight:700;letter-spacing:-.02em;color:#fff;margin:0}
.pf-lk-s{font-size:12px;color:var(--pf-ink-4);margin:3px 0 0;line-height:1.4}
.pf-lk-row{display:flex;align-items:center;gap:8px;margin-top:13px}
.pf-lk-val{flex:1;min-width:0;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.02em;
  color:var(--pf-ink-2);background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.1);border-radius:9px;
  padding:11px 13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}
.pf-lk-val.shown{color:#fff}
.pf-lk-eye{flex:none;width:38px;height:38px;border-radius:9px;border:1px solid rgba(255,255,255,.1);
  background:transparent;color:var(--pf-ink-3);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .15s ease,border-color .15s ease,background .15s ease}
.pf-lk-eye:hover{color:#fff;border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.04)}
.pf-lk-eye svg{width:17px;height:17px}
.pf-lk-btns{display:flex;gap:9px;margin-top:10px}
.pf-lk .pf-btn.copied{background:rgba(74,222,128,.16);color:#86efac}
.pf-lk-note{font-size:11.5px;line-height:1.5;color:var(--pf-ink-4);margin:11px 0 0}

/* Compact identity; the whole profile column follows document scrolling.

   Раскладку в две колонки (фото 64px слева, имя справа) здесь НЕ задаём:
   она нужна только на узком экране и уже описана в @media(max-width:900px)
   выше. Когда те же правила стояли тут без медиазапроса, они били по
   специфичности базовое .pf-me-ava{width:100%} и ужимали фото до 64px на
   любой ширине — на десктопе колонка 268px, и фото должно заполнять её
   целиком, а имя идти под ним. */
.pf-side{min-width:0}
.pf-side-head .pf-me-name{font-size:20px;line-height:1.25;overflow-wrap:anywhere}
.pf-side-head .pf-me-at{overflow-wrap:anywhere}
.pf-side > .pf-lk{margin:0}
.pf-lk-val.shown{white-space:normal;overflow-wrap:anywhere;word-break:break-all;text-overflow:clip}
.pf-lk-row{align-items:start}
.pf-lk-eye{min-height:40px}