/* Telegram Premium. Prefixed tg- so nothing collides with the shared shell
   stylesheet (.card .bar .sec .bal .pill .page-head .btn .foot .who .ic). */

:root{ --note-fg:#5c5c5c;
  --inv-bg:#0a0a0a; --inv-fg:#fafafa; --inv-mut:#a8a8a8; --inv-bd:rgba(255,255,255,.14);
  /* the shared --bad reads 4.47:1 on --muted, just under AA; the warning text
     and the refunded tag both sit on that strip, so they get a darker red */
  --tg-bad:#9e1f18; }
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --note-fg:#a1a1a1;
  --inv-bg:#fafafa; --inv-fg:#0a0a0a; --inv-mut:#5c5c5c; --inv-bd:rgba(0,0,0,.14);
  --tg-bad:#ff6568; }}
:root[data-theme="dark"]{ --note-fg:#a1a1a1;
  --inv-bg:#fafafa; --inv-fg:#0a0a0a; --inv-mut:#5c5c5c; --inv-bd:rgba(0,0,0,.14);
  --tg-bad:#ff6568; }

/* the shared .page is display:flex, so this is a flex item and would inherit
   min-width:auto - nowrap content then pushes the document past 320px */
.tg-wrap{flex:1;min-width:0;max-width:760px;margin:0 auto;width:100%}

.tg-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- shell bits carried over from the shared header ---- */
.tg-signin{display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap;
  font-size:.8125rem;font-weight:640;padding:.4375rem .75rem;border-radius:99px;
  border:1px solid var(--border);background:var(--card);color:var(--fg)}
.tg-signin:hover{background:var(--muted)}
.tg-railcta{display:block;text-align:center;text-decoration:none;font-size:.8125rem;font-weight:640;
  padding:.5rem .75rem;border-radius:.5rem;background:var(--inv-bg);color:var(--inv-fg);margin:.5rem}

/* ---- hero ---- */
.tg-hero h1{margin:0 0 6px;font-size:23px;line-height:1.2;font-weight:680;letter-spacing:-.025em;
  text-wrap:balance}
@media (min-width:760px){.tg-hero h1{font-size:30px}}
.tg-hero p{margin:0 0 16px;font-size:14.5px;color:var(--note-fg);max-width:56ch}

/* ---- balance strip ---- */
.tg-bal{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--border);
  border-radius:12px;background:var(--muted);margin-bottom:22px;flex-wrap:wrap}
.tg-bal .lb{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.05em;
  color:var(--note-fg)}
.tg-bal .amt{font-size:19px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tg-bal .sub{font-size:12.5px;color:var(--note-fg);font-variant-numeric:tabular-nums}
.tg-bal .g{flex:1}
.tg-bal a{font:inherit;font-size:13px;font-weight:640;color:var(--fg);text-decoration:underline;
  text-underline-offset:2px;white-space:nowrap}

/* ---- steps ---- */
.tg-step{margin-bottom:26px}
.tg-shead{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.tg-num{width:23px;height:23px;border-radius:50%;background:var(--inv-bg);color:var(--inv-fg);
  display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.tg-shead h2{margin:0;font-size:16px;font-weight:660;letter-spacing:-.015em}
.tg-shelp{margin:0 0 11px;font-size:13.5px;color:var(--note-fg);padding-left:32px}

/* ---- plans ---- */
.tg-plans{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:560px){.tg-plans{grid-template-columns:1fr 1fr}}
.tg-plan{position:relative;display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  border:1px solid var(--border);border-radius:12px;background:var(--card);color:inherit;
  font:inherit;padding:13px 14px;cursor:pointer;min-width:0}
.tg-plan:hover{border-color:var(--fg)}
.tg-plan[aria-pressed="true"]{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.tg-plan:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.tg-tick{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--border);flex:none;
  display:grid;place-items:center}
.tg-plan[aria-pressed="true"] .tg-tick{border-color:var(--fg);background:var(--fg)}
.tg-tick svg{width:11px;height:11px;color:var(--bg);opacity:0}
.tg-plan[aria-pressed="true"] .tg-tick svg{opacity:1}
.tg-pmain{flex:1;min-width:0}
.tg-pname{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.tg-pper{display:block;font-size:12px;color:var(--note-fg);font-variant-numeric:tabular-nums}
.tg-pcost{text-align:right;flex:none}
.tg-pxaf{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tg-pusd{display:block;font-size:12px;color:var(--note-fg);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.tg-save{position:absolute;top:-8px;right:11px;font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 7px;border-radius:99px;background:var(--inv-bg);
  color:var(--inv-fg)}

/* ---- handle ---- */
.tg-seg{display:flex;gap:7px;margin-bottom:11px}
.tg-segb{flex:1;font:inherit;font-size:13.5px;font-weight:620;padding:9px 10px;border-radius:9px;
  border:1px solid var(--border);background:var(--card);color:var(--fg);cursor:pointer}
.tg-segb[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tg-segb:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.tg-field{position:relative;display:flex;align-items:center;border:1px solid var(--border);
  border-radius:10px;background:var(--card);overflow:hidden}
.tg-field:focus-within{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.tg-pre{padding:0 2px 0 13px;font-size:15px;font-weight:640;color:var(--note-fg);flex:none}
.tg-field input{flex:1;min-width:0;font:inherit;font-size:15px;padding:12px 13px 12px 4px;border:0;
  background:transparent;color:var(--fg);outline:none}
.tg-err{margin:8px 0 0;font-size:13px;color:var(--tg-bad);display:none}
.tg-err.on{display:block}
.tg-hint{margin:8px 0 0;font-size:12.5px;color:var(--note-fg)}

/* ---- summary ---- */
.tg-sum{border:1px solid var(--border);border-radius:12px;background:var(--card);overflow:hidden}
.tg-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 14px;
  border-bottom:1px solid var(--border);font-size:14px}
.tg-row span:first-child{color:var(--note-fg)}
.tg-row span:last-child{font-weight:640;text-align:right;font-variant-numeric:tabular-nums}
.tg-row.big span:last-child{font-size:16px;font-weight:700}
.tg-row .u{display:block;font-size:12px;font-weight:500;color:var(--note-fg)}
.tg-pay{padding:14px}
.tg-btn{width:100%;font:inherit;font-size:15px;font-weight:660;padding:14px;border-radius:10px;
  border:1px solid var(--inv-bg);background:var(--inv-bg);color:var(--inv-fg);cursor:pointer}
.tg-btn:hover{opacity:.9}
.tg-btn:disabled{opacity:.62;cursor:not-allowed}
.tg-btn:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.tg-btn.ghost{background:transparent;color:var(--fg);border-color:var(--border)}
.tg-short{margin:0;padding:12px 14px;background:var(--muted);border-top:1px solid var(--border);
  font-size:13.5px;display:none}
.tg-short.on{display:block}
.tg-short b{color:var(--tg-bad)}
.tg-short a{color:var(--fg);font-weight:640}

/* ---- done ---- */
.tg-done{display:none;border:1px solid var(--ok);border-radius:12px;background:var(--card);
  padding:18px 16px;text-align:center}
.tg-done.on{display:block}
.tg-check{width:44px;height:44px;border-radius:50%;background:var(--ok);display:grid;
  place-items:center;margin:0 auto 12px}
.tg-check svg{width:22px;height:22px;color:var(--bg)}
.tg-done h2{margin:0 0 6px;font-size:18px;font-weight:670;letter-spacing:-.02em}
.tg-done p{margin:0 0 14px;font-size:14px;color:var(--note-fg)}
.tg-ref{display:inline-block;font-size:13px;font-weight:700;padding:5px 12px;border-radius:99px;
  background:var(--muted);border:1px solid var(--border);margin-bottom:14px;
  font-variant-numeric:tabular-nums}

/* ---- how it works ---- */
.tg-how{margin-top:34px;border-top:1px solid var(--border);padding-top:24px}
.tg-how h2{margin:0 0 14px;font-size:17px;font-weight:660;letter-spacing:-.02em}
.tg-hl{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tg-hl li{display:flex;gap:11px;align-items:flex-start}
.tg-hn{width:21px;height:21px;border-radius:50%;border:1px solid var(--border);flex:none;
  display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--note-fg);margin-top:2px}
.tg-hl b{display:block;font-size:14px;font-weight:640;margin-bottom:2px}
.tg-hl p{margin:0;font-size:13.5px;color:var(--note-fg)}

/* ---- history ---- */
.tg-hist{margin-top:30px;border-top:1px solid var(--border);padding-top:24px}
.tg-hist h2{margin:0 0 12px;font-size:17px;font-weight:660;letter-spacing:-.02em}
.tg-hrow{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--border);font-size:13.5px;flex-wrap:wrap}
.tg-hrow:last-child{border-bottom:0}
.tg-hmain{flex:1;min-width:0}
.tg-hmain b{display:block;font-size:14px;font-weight:640}
.tg-hmain small{display:block;color:var(--note-fg);font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tg-hcost{font-weight:640;font-variant-numeric:tabular-nums;white-space:nowrap}
.tg-tag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;
  border:1px solid var(--border);background:var(--muted);color:var(--note-fg)}
.tg-tag.wait{color:var(--wait);border-color:currentColor}
.tg-tag.ok{color:var(--ok);border-color:currentColor}
.tg-tag.bad{color:var(--tg-bad);border-color:currentColor}

/* ------------------------------------------------------------ automated
   Added 16 Sep 2026: the Premium / Stars switch, the star packs, and the
   sending / delivered / refunded panel. Same tokens as the rest of the file. */
.tg-prod{display:flex;gap:8px;margin-bottom:22px;padding:4px;border:1px solid var(--border,#e5e5e5);
  border-radius:12px;background:var(--muted,#f5f5f5)}
.tg-prodb{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:14px;
  font-weight:640;padding:10px;border-radius:9px;border:1px solid transparent;background:transparent;
  color:var(--note-fg,#5c5c5c);cursor:pointer}
.tg-prodb svg{width:16px;height:16px}
.tg-prodb[aria-pressed="true"]{background:var(--card,#fff);color:var(--fg,#0a0a0a);
  border-color:var(--border,#e5e5e5);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.tg-prodb .live{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;
  border-radius:99px;background:var(--ok,#0a7d55);color:#fff}
.tg-prodb[hidden]{display:none}

.tg-stars{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
@media (min-width:560px){.tg-stars{grid-template-columns:repeat(6,1fr)}}
.tg-star{font:inherit;text-align:center;border:1px solid var(--border,#e5e5e5);border-radius:11px;
  background:var(--card,#fff);color:inherit;padding:11px 6px 9px;cursor:pointer;min-width:0}
.tg-star:hover{border-color:var(--fg,#0a0a0a)}
.tg-star[aria-pressed="true"]{border-color:var(--fg,#0a0a0a);box-shadow:inset 0 0 0 1px var(--fg,#0a0a0a)}
.tg-star b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tg-star b::before{content:"\2605";font-size:11px;vertical-align:2px;margin-right:3px;color:var(--wait,#8a6100)}
.tg-star span{display:block;font-size:11.5px;color:var(--note-fg,#5c5c5c);font-variant-numeric:tabular-nums}
.tg-custom{display:flex;align-items:center;gap:8px;margin-top:10px}
.tg-custom .tg-field{flex:1}
.tg-custom .tg-field input{padding-left:13px}
.tg-custom .lab{font-size:13px;color:var(--note-fg,#5c5c5c);white-space:nowrap}
#tgPlans[hidden],#tgStarsBox[hidden],#tgFlow[hidden],.tg-seg[hidden]{display:none}

.tg-status{border:1px solid var(--border,#e5e5e5);border-radius:12px;background:var(--card,#fff);padding:16px}
.tg-status[hidden]{display:none}
.tg-status.wait{border-color:var(--wait,#8a6100)}
.tg-status.ok{border-color:var(--ok,#0a7d55)}
.tg-status.bad{border-color:var(--tg-bad,#b3261e)}
.tg-status h2{margin:0 0 5px;font-size:17px;font-weight:670;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.tg-status p{margin:0 0 12px;font-size:14px;color:var(--note-fg,#5c5c5c)}
.tg-status .tg-ref{margin:8px 0 0}
.tg-spin{width:15px;height:15px;border:2px solid var(--wait,#8a6100);border-right-color:transparent;border-radius:50%;
  display:inline-block;animation:tgsp .8s linear infinite;flex:none}
@keyframes tgsp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tg-spin{animation:none}}
.tg-check.sm{width:26px;height:26px;margin:0}
.tg-check.sm svg{width:14px;height:14px}
.tg-track{display:flex;margin:14px 0 6px}
.tg-track .st{flex:1;position:relative;padding-top:19px;font-size:12px;color:var(--note-fg,#5c5c5c);text-align:center}
.tg-track .st::before{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:11px;height:11px;
  border-radius:50%;background:var(--bg,#fff);border:2px solid var(--border,#e5e5e5);z-index:1}
.tg-track .st::after{content:"";position:absolute;top:9px;left:50%;width:100%;height:2px;background:var(--border,#e5e5e5)}
.tg-track .st:last-child::after{display:none}
.tg-track .st.done{color:var(--fg,#0a0a0a);font-weight:650}
.tg-track .st.done::before{background:var(--ok,#0a7d55);border-color:var(--ok,#0a7d55)}
.tg-track .st.now{color:var(--wait,#8a6100);font-weight:700}
.tg-track .st.now::before{background:var(--wait,#8a6100);border-color:var(--wait,#8a6100)}
.tg-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.tg-actions .tg-btn{width:auto;flex:1;padding:11px 14px;font-size:14px}
a.tg-hrow{text-decoration:none;color:inherit}