:root {
    /* ── цвета: только палитра Mercury ── */
    --onyx: #171721;
    --graphite: #1e1e2a;
    --obsidian: #272735;
    --slate: #70707d;
    --mist: #e2e3ed;
    --ash: #c3c3cc;
    --ivory: #ededf3;
    --cobalt: #5266eb;
    --white: #ffffff;

    /* ── шрифты ── */
    --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* ── шкала ── */
    --text-caption: 12px;
    --text-body-sm: 14px;
    --text-body: 16px;
    --text-body-lg: 18px;
    --text-subheading: 21px;
    --text-heading-sm: 28px;
    --text-heading: 32px;
    --text-heading-lg: 42px;
    --text-display: 65px;

    /* ── отступы ── */
    --s4: 4px;  --s8: 8px;   --s12: 12px; --s16: 16px;
    --s20: 20px; --s24: 24px; --s32: 32px; --s40: 40px;
    --s56: 56px; --s72: 72px; --s112: 112px;

    /* ── формы ── */
    --r-card: 12px;
    --r-pill: 32px;
    --r-nav: 40px;
    --page: 1200px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: var(--s112); }
  html, body { margin: 0; padding: 0; }

  body {
    background: var(--onyx);
    color: var(--ivory);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3 { font-family: var(--font-display); font-weight: 480; margin: 0; }

  .wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--s24); }

  /* ══ навигация ══════════════════════════════════════════ */
  .nav {
    position: fixed; inset: 0 0 auto 0; z-index: 40;
    transition: background-color .25s ease, backdrop-filter .25s ease, border-color .25s ease;
    border-bottom: 1px solid transparent;
  }
  .nav.solid {
    background: rgba(23, 23, 33, .82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: var(--slate);
  }
  .nav-inner {
    max-width: var(--page); margin: 0 auto; padding: var(--s20) var(--s24);
    display: flex; align-items: center; gap: var(--s24);
  }
  .brand {
    display: flex; align-items: center; gap: var(--s12);
    font-size: var(--text-body); font-weight: 400; color: var(--ivory);
    letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  }
  .brand svg { width: 22px; height: 22px; flex: none; }
  .nav-links { display: flex; gap: var(--s4); margin-left: auto; }
  .nav-links a {
    color: var(--ivory); text-decoration: none;
    font-size: var(--text-body); font-weight: 400;
    padding: var(--s8) var(--s20); border-radius: var(--r-nav);
    transition: background-color .18s ease;
  }
  .nav-links a:hover { background: var(--obsidian); }
  .nav-cta { margin-left: var(--s8); }

  /* ══ кнопки ═════════════════════════════════════════════ */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s8);
    font-family: var(--font-body); font-size: var(--text-body); font-weight: 400;
    padding: var(--s16) var(--s24); border-radius: var(--r-pill);
    cursor: pointer; text-decoration: none; border: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, outline-color .18s ease;
  }
  /* единственное хроматическое действие на странице */
  .btn-primary { background: var(--cobalt); color: var(--white); outline: 1px solid transparent; outline-offset: -1px; }
  .btn-primary:hover { background: var(--cobalt); outline-color: var(--mist); }
  .btn-ghost {
    background: transparent; color: var(--ivory);
    border: 1px solid var(--mist); padding: calc(var(--s16) - 1px) calc(var(--s24) - 1px);
  }
  .btn-ghost:hover { background: var(--obsidian); }
  .btn-block { display: flex; width: 100%; }
  .btn-block + .btn-block { margin-top: var(--s12); }

  /* ══ герой ══════════════════════════════════════════════ */
  .hero {
    position: relative; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; padding: var(--s112) var(--s24) var(--s72);
  }
  .hero-bg { position: absolute; inset: 0; z-index: 0; }
  .hero-bg svg { width: 100%; height: 100%; display: block; }
  .hero-veil {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(23, 23, 33, .35) 0%, rgba(23, 23, 33, .72) 55%, var(--onyx) 100%);
  }
  .hero-inner { position: relative; z-index: 2; max-width: 640px; text-align: center; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: var(--s8);
    font-size: var(--text-caption); font-weight: 400; letter-spacing: .12px;
    text-transform: uppercase; color: var(--ash);
    border: 1px solid var(--slate); border-radius: var(--r-nav);
    padding: var(--s8) var(--s16); margin-bottom: var(--s24);
  }
  .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ivory); }
  .hero h1 {
    font-size: clamp(var(--text-heading-lg), 7vw, var(--text-display));
    line-height: 1.1; letter-spacing: .01em; color: var(--ivory);
    margin-bottom: var(--s24);
  }
  .hero h1 .quiet { color: var(--ash); }
  .hero p {
    font-size: var(--text-body-lg); font-weight: 400; line-height: 1.35;
    color: var(--ash); max-width: 520px; margin: 0 auto var(--s40);
  }
  .hero-actions { display: flex; gap: var(--s12); justify-content: center; flex-wrap: wrap; }

  .facts {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s32);
    margin-top: var(--s56); padding-top: var(--s32);
    border-top: 1px solid var(--slate);
  }
  .fact { text-align: center; min-width: 120px; }
  .fact .k {
    font-family: var(--font-display); font-size: var(--text-heading-sm); font-weight: 480;
    letter-spacing: .42px; line-height: 1.2; color: var(--ivory);
  }
  .fact .v { font-size: var(--text-caption); letter-spacing: .12px; color: var(--ash); margin-top: var(--s4); }

  /* ══ секции ═════════════════════════════════════════════ */
  section { padding: var(--s72) 0; }
  .sec-head { max-width: 640px; margin: 0 auto var(--s40); text-align: center; }
  .sec-head h2 {
    font-size: clamp(var(--text-heading-sm), 4vw, var(--text-heading-lg));
    line-height: 1.15; letter-spacing: .42px; color: var(--ivory); margin-bottom: var(--s12);
  }
  .sec-head p { margin: 0; color: var(--ash); font-size: var(--text-body); }

  /* ══ карточка заказа ════════════════════════════════════ */
  .order-wrap { max-width: 560px; margin: 0 auto; }
  .card { background: var(--graphite); border-radius: var(--r-card); padding: var(--s32); }
  .card:focus { outline: none; }
  .card h2 {
    font-size: var(--text-heading-sm); line-height: 1.2; letter-spacing: .42px;
    color: var(--ivory); margin-bottom: var(--s8);
  }
  .card .sub { margin: 0 0 var(--s24); color: var(--ash); font-size: var(--text-body-sm); letter-spacing: .07px; }

  .field { margin-bottom: var(--s20); }
  label, .lbl {
    display: block; font-size: var(--text-body-sm); letter-spacing: .07px;
    color: var(--ash); margin-bottom: var(--s8);
  }
  label .hint { color: var(--ash); }

  .input-wrap { position: relative; }
  input[type="text"] {
    width: 100%; padding: var(--s16) var(--s20);
    font-family: var(--font-body); font-size: var(--text-body); font-weight: 400;
    color: var(--ivory); background: transparent;
    border: 1px solid var(--slate); border-radius: var(--r-pill);
    outline: none; transition: border-color .18s ease;
  }
  input::placeholder { color: var(--ash); }
  input:focus { border-color: var(--mist); }
  input.err { border-color: var(--mist); background: var(--obsidian); }
  #amount { padding-right: 44px; }
  .suffix {
    position: absolute; right: var(--s20); top: 50%; transform: translateY(-50%);
    color: var(--ash); font-size: var(--text-body); pointer-events: none;
  }

  .err-msg {
    display: none; margin-top: var(--s8); padding-left: var(--s20);
    color: var(--ivory); font-size: var(--text-body-sm); letter-spacing: .07px;
  }
  .err-msg.show { display: block; }
  .err-msg::before { content: "! "; color: var(--mist); font-weight: 400; }

  .quick { display: flex; flex-wrap: wrap; gap: var(--s8); margin-top: var(--s12); }
  .quick button {
    flex: 1 1 auto; min-width: 78px; padding: var(--s8) var(--s12);
    font-family: var(--font-body); font-size: var(--text-body-sm); letter-spacing: .07px;
    color: var(--ash); background: var(--obsidian);
    border: 1px solid transparent; border-radius: var(--r-pill);
    cursor: pointer; transition: color .18s ease, border-color .18s ease;
  }
  .quick button:hover { color: var(--ivory); }
  .quick button.on { color: var(--ivory); border-color: var(--mist); }

  /* переключатель валюты — это состояние поля, поэтому геометрия как у input */
  .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s8); }
  .seg button {
    min-width: 0; padding: var(--s16) var(--s20);
    font-family: var(--font-body); font-size: var(--text-body); font-weight: 400;
    color: var(--ash); background: transparent;
    border: 1px solid var(--slate); border-radius: var(--r-pill);
    cursor: pointer; transition: color .18s ease, border-color .18s ease;
    display: flex; align-items: center; justify-content: center; gap: var(--s8);
    white-space: nowrap;
  }
  .seg button:hover { color: var(--ivory); }
  .seg button.on { color: var(--ivory); border-color: var(--mist); }

  .note {
    margin: var(--s12) 0 0; font-size: var(--text-caption); letter-spacing: .12px;
    color: var(--ash); line-height: 1.5;
  }

  .summary { margin: var(--s24) 0; }
  .row {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--s16);
    padding: var(--s8) 0; font-size: var(--text-body-sm); letter-spacing: .07px;
  }
  .row > span:first-child { color: var(--ash); }
  .row .val { color: var(--ivory); font-variant-numeric: tabular-nums; }
  .row.total {
    border-top: 1px solid var(--slate);
    margin-top: var(--s8); padding-top: var(--s16);
    font-family: var(--font-display); font-size: var(--text-subheading);
    font-weight: 480; line-height: 1.35; letter-spacing: .42px;
  }
  .row.total > span:first-child { color: var(--ivory); }

  .fineprint {
    margin: var(--s16) 0 0; font-size: var(--text-caption); letter-spacing: .12px;
    color: var(--ash); text-align: center; line-height: 1.5;
  }

  /* ══ шаг оплаты ═════════════════════════════════════════ */
  .pay { display: none; }
  .pay.show { display: block; }
  .pay:focus, .form-step:focus { outline: none; }
  .form-step.hide { display: none; }

  .paybox {
    background: var(--obsidian); border-radius: var(--r-card);
    padding: var(--s20) var(--s24); margin-bottom: var(--s12);
  }
  .paybox .k {
    font-size: var(--text-caption); letter-spacing: .12px; color: var(--ash);
    margin-bottom: var(--s8); text-transform: uppercase;
  }
  .copyline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s16); row-gap: var(--s12); }
  .copyline .v {
    font-family: var(--font-display); font-size: var(--text-subheading); font-weight: 480;
    line-height: 1.35; color: var(--ivory); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  .copybtn {
    margin-left: 0; margin-right: auto; flex: none; padding: var(--s8) var(--s16);
    font-family: var(--font-body); font-size: var(--text-body-sm); letter-spacing: .07px;
    color: var(--ivory); background: transparent;
    border: 1px solid var(--slate); border-radius: var(--r-pill);
    cursor: pointer; transition: background-color .18s ease, border-color .18s ease;
    white-space: nowrap;
  }
  .copybtn:hover { background: var(--graphite); border-color: var(--mist); }
  .copybtn.done { border-color: var(--mist); background: var(--graphite); }

  .notice {
    display: flex; gap: var(--s12); align-items: flex-start;
    border: 1px solid var(--slate); border-radius: var(--r-card);
    padding: var(--s16) var(--s20); margin-bottom: var(--s24);
    font-size: var(--text-body-sm); letter-spacing: .07px; color: var(--ash); line-height: 1.5;
  }
  .notice b { color: var(--ivory); font-weight: 400; }
  .notice svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ivory); }

  .steps { counter-reset: s; margin: 0 0 var(--s24); padding: 0; list-style: none; }
  .steps li {
    counter-increment: s; position: relative; padding-left: var(--s40); margin-bottom: var(--s16);
    font-size: var(--text-body-sm); letter-spacing: .07px; color: var(--ash); line-height: 1.5;
  }
  .steps li:last-child { margin-bottom: 0; }
  .steps li::before {
    content: counter(s); position: absolute; left: 0; top: -1px;
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    font-size: var(--text-caption); font-weight: 400; letter-spacing: .12px; color: var(--ivory);
    border: 1px solid var(--slate);
  }
  .steps li b { color: var(--ivory); font-weight: 400; }

  /* ручное копирование, если буфер обмена недоступен */
  .manual { margin-top: var(--s16); }
  .manual textarea {
    width: 100%; min-height: 132px; resize: vertical;
    padding: var(--s16) var(--s20);
    font-family: var(--font-body); font-size: var(--text-body-sm); line-height: 1.5;
    color: var(--ivory); background: var(--obsidian);
    border: 1px solid var(--mist); border-radius: var(--r-card); outline: none;
  }

  /* ══ сетка карточек ═════════════════════════════════════ */
  .grid { display: grid; gap: var(--s12); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .tile { background: var(--graphite); border-radius: var(--r-card); padding: var(--s32); }
  .tile .ico { color: var(--ivory); margin-bottom: var(--s20); }
  .tile svg { width: 22px; height: 22px; display: block; }
  .tile h3 {
    font-size: var(--text-subheading); line-height: 1.35; letter-spacing: .02em;
    color: var(--ivory); margin-bottom: var(--s8);
  }
  .tile p { margin: 0; color: var(--ash); font-size: var(--text-body-sm); line-height: 1.5; letter-spacing: .07px; }

  /* ══ реферальная программа ══════════════════════════════ */
  .ref-split {
    display: grid; gap: var(--s12); align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ref-figure {
    background: var(--graphite); border-radius: var(--r-card); padding: var(--s32);
    display: flex; flex-direction: column; justify-content: center;
  }
  .ref-figure .num {
    font-family: var(--font-display); font-size: clamp(var(--text-heading-lg), 8vw, var(--text-display));
    font-weight: 530; line-height: 1.1; color: var(--ivory);
  }
  .ref-figure .cap {
    font-size: var(--text-body-lg); font-weight: 400; line-height: 1.35;
    color: var(--ash); margin-top: var(--s12);
  }
  .ref-figure .ex {
    margin-top: var(--s24); padding-top: var(--s24);
    border-top: 1px solid var(--slate);
    font-size: var(--text-body-sm); letter-spacing: .07px; color: var(--ash);
  }
  .ref-form { background: var(--graphite); border-radius: var(--r-card); padding: var(--s32); }
  .ref-form h3 {
    font-size: var(--text-subheading); line-height: 1.35; letter-spacing: .02em;
    color: var(--ivory); margin-bottom: var(--s20);
  }
  .ref-out { display: none; margin-top: var(--s16); }
  .ref-out.show { display: block; }
  .ref-rules { margin: var(--s24) 0 0; padding: 0; list-style: none; }
  .ref-rules li {
    position: relative; padding-left: var(--s20); margin-bottom: var(--s12);
    font-size: var(--text-body-sm); letter-spacing: .07px; color: var(--ash); line-height: 1.5;
  }
  .ref-rules li:last-child { margin-bottom: 0; }
  .ref-rules li::before { content: "—"; position: absolute; left: 0; color: var(--ash); }

  .ref-active {
    display: none; max-width: 640px; margin: 0 auto var(--s24);
    border: 1px solid var(--slate); border-radius: var(--r-card);
    padding: var(--s16) var(--s20); text-align: center;
    font-size: var(--text-body-sm); letter-spacing: .07px; color: var(--ivory);
  }
  .ref-active.show { display: block; }
  .ref-drop {
    margin-left: var(--s8); padding: 0; border: none; background: none; cursor: pointer;
    font-family: var(--font-body); font-size: var(--text-body-sm); letter-spacing: .07px;
    color: var(--ash); text-decoration: underline;
  }
  .ref-drop:hover { color: var(--ivory); }

  /* ══ FAQ ════════════════════════════════════════════════ */
  .faq { max-width: 720px; margin: 0 auto; }
  details {
    background: var(--graphite); border-radius: var(--r-card); margin-bottom: var(--s8);
  }
  summary {
    cursor: pointer; list-style: none; user-select: none; position: relative;
    padding: var(--s24) var(--s56) var(--s24) var(--s32);
    font-family: var(--font-display); font-size: var(--text-body-lg); font-weight: 480;
    line-height: 1.35; color: var(--ivory);
  }
  summary::-webkit-details-marker { display: none; }
  summary::after {
    content: ""; position: absolute; right: var(--s32); top: 50%;
    width: 10px; height: 10px; margin-top: -6px;
    border-right: 1px solid var(--ash); border-bottom: 1px solid var(--ash);
    transform: rotate(45deg); transition: transform .2s ease;
  }
  details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
  details .body {
    padding: 0 var(--s32) var(--s32);
    color: var(--ash); font-size: var(--text-body); line-height: 1.5;
  }
  details .body p { margin: 0; }

  /* ══ подвал ═════════════════════════════════════════════ */
  footer { border-top: 1px solid var(--slate); }
  .foot-inner {
    max-width: var(--page); margin: 0 auto; padding: var(--s40) var(--s24);
    display: flex; flex-wrap: wrap; gap: var(--s24); justify-content: space-between; align-items: center;
  }
  .foot-links {
    display: flex; flex-wrap: wrap; gap: var(--s4) var(--s24);
    margin: calc(-1 * var(--s12)) 0;
  }
  .foot-links a {
    display: inline-block; padding: var(--s12) 0;
    color: var(--ash); text-decoration: none; font-size: var(--text-body-sm); letter-spacing: .07px;
  }
  .foot-links a:hover { color: var(--ivory); }
  .disclaimer {
    border-top: 1px solid var(--slate);
    padding: var(--s20) var(--s24);
    font-size: var(--text-caption); font-weight: 400; letter-spacing: .12px;
    color: var(--ash); text-align: center;
  }

  /* ══ тост ═══════════════════════════════════════════════ */
  .toast {
    position: fixed; left: 50%; bottom: var(--s32); transform: translate(-50%, 12px);
    width: max-content; max-width: calc(100vw - var(--s32));
    background: var(--obsidian); color: var(--ivory);
    padding: var(--s16) var(--s24); border-radius: var(--r-pill);
    font-size: var(--text-body-sm); letter-spacing: .07px; line-height: 1.5; text-align: center;
    opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 60;
  }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }

  :focus-visible { outline: 2px solid var(--mist); outline-offset: 3px; }

  @media (max-width: 860px) {
    .ref-split { grid-template-columns: 1fr; }
    .nav-links a[data-optional] { display: none; }
  }
  @media (max-width: 600px) {
    .seg button { padding: var(--s16) var(--s8); font-size: var(--text-body-sm); letter-spacing: .07px; gap: var(--s4); }
    .nav-inner { gap: var(--s12); padding-left: var(--s16); padding-right: var(--s16); }
    .nav .brand { min-width: 0; }
    .nav .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .card, .tile, .ref-figure, .ref-form { padding: var(--s24); }
    section { padding: var(--s56) 0; }
    .hero { min-height: auto; padding-top: var(--s112); }
    .facts { gap: var(--s24); }
    summary { padding: var(--s20) var(--s40) var(--s20) var(--s24); }
    summary::after { right: var(--s24); }
    details .body { padding: 0 var(--s24) var(--s24); }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
  }

/* ══ внутренние страницы (документы, FAQ, контакты) ═════════ */
.page-head {
  padding: calc(var(--s112) + var(--s32)) 0 var(--s32);
  border-bottom: 1px solid var(--slate);
}
.page-head .wrap { max-width: 760px; }
.page-head h1 {
  font-size: clamp(var(--text-heading-sm), 4vw, var(--text-heading-lg));
  line-height: 1.15; letter-spacing: .42px; color: var(--ivory);
}
.page-head .updated {
  margin: var(--s12) 0 0; font-size: var(--text-caption); letter-spacing: .12px; color: var(--ash);
}
.page-head .lead {
  margin: var(--s16) 0 0; font-size: var(--text-body-lg); line-height: 1.35; color: var(--ash);
}

.doc { max-width: 760px; margin: 0 auto; padding: var(--s56) 0 var(--s72); }
.doc h2 {
  font-size: var(--text-subheading); line-height: 1.35; letter-spacing: .02em;
  color: var(--ivory); margin: var(--s40) 0 var(--s16);
}
.doc h2:first-child { margin-top: 0; }
.doc p { margin: 0 0 var(--s12); color: var(--ash); font-size: var(--text-body); line-height: 1.5; }
.doc p:last-child { margin-bottom: 0; }
.doc ul { margin: 0 0 var(--s12); padding: 0; list-style: none; }
.doc ul li {
  position: relative; padding-left: var(--s20); margin-bottom: var(--s8);
  color: var(--ash); font-size: var(--text-body); line-height: 1.5;
}
.doc ul li::before { content: "—"; position: absolute; left: 0; color: var(--slate); }
.doc b, .doc strong { color: var(--ivory); font-weight: 400; }
.doc a { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }
.doc a:hover { color: var(--mist); }

.doc-card {
  background: var(--graphite); border-radius: var(--r-card); padding: var(--s32);
  margin: var(--s24) 0;
}
.doc-card h3 {
  font-size: var(--text-body-lg); font-weight: 480; line-height: 1.35;
  color: var(--ivory); margin: 0 0 var(--s8);
}
.doc-card p { margin: 0 0 var(--s12); }
.doc-card p:last-child { margin-bottom: 0; }

.contact-grid {
  display: grid; gap: var(--s12); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: var(--s24) 0;
}

.fineprint a, .note a { color: var(--ash); text-decoration: underline; text-underline-offset: 3px; }
.fineprint a:hover, .note a:hover { color: var(--ivory); }

/* статус оплаты в шаге перевода */
.status {
  display: flex; align-items: center; gap: var(--s12);
  border: 1px solid var(--slate); border-radius: var(--r-card);
  padding: var(--s16) var(--s20); margin-bottom: var(--s24);
  font-size: var(--text-body-sm); letter-spacing: .07px; color: var(--ash); line-height: 1.5;
}
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ash); flex: none; }
.status.ok { border-color: var(--mist); }
.status.ok .dot { background: var(--ivory); }
.status b { color: var(--ivory); font-weight: 400; }
.status .timer { margin-left: auto; flex: none; color: var(--ivory); font-variant-numeric: tabular-nums; }

/* личный кабинет */
.acc-grid { display: grid; gap: var(--s12); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.acc-balance { font-family: var(--font-display); font-size: var(--text-heading); font-weight: 480;
  line-height: 1.15; letter-spacing: .48px; color: var(--ivory); }
.acc-sub { font-size: var(--text-caption); letter-spacing: .12px; color: var(--ash); margin-top: var(--s8); }

.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; padding: var(--s12) var(--s12) var(--s12) 0;
  font-size: var(--text-caption); letter-spacing: .12px; text-transform: uppercase;
  color: var(--ash); font-weight: 400; border-bottom: 1px solid var(--slate);
}
.table td {
  padding: var(--s16) var(--s12) var(--s16) 0; vertical-align: top;
  font-size: var(--text-body-sm); letter-spacing: .07px; color: var(--ash);
  border-bottom: 1px solid var(--slate); line-height: 1.5;
}
.table td.num { font-variant-numeric: tabular-nums; color: var(--ivory); white-space: nowrap; }
.table tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }

.tag {
  display: inline-block; padding: 2px var(--s12); border-radius: var(--r-pill);
  border: 1px solid var(--slate); font-size: var(--text-caption); letter-spacing: .12px;
  color: var(--ash); white-space: nowrap;
}
.tag.live { border-color: var(--mist); color: var(--ivory); }

.empty { color: var(--ash); font-size: var(--text-body-sm); letter-spacing: .07px; }