/* Swiss+ v7 — внутренний дизайн в духе Apple.
   Стекло (размытие + полупрозрачность), мягкие скругления, крупная типографика,
   плавные переходы между страницами. Светлая и тёмная тема. Страница входа не затрагивается. */

/* ───────── палитра ───────── */
body.ui {
  --bg: #FFFFFF;
  --bg-2: #FFFFFF;
  --surface: rgb(245 245 247 / .92);
  --surface-strong: rgb(255 255 255 / .9);
  --surface-2: rgb(118 118 128 / .08);
  --fill: rgb(118 118 128 / .12);
  --glass-line: rgb(0 0 0 / .06);
  --ink: #1D1D1F;
  --ink-2: #3A3A3C;
  --muted: #6E6E73;
  --line: rgb(0 0 0 / .08);
  --line-strong: rgb(0 0 0 / .14);
  --up: #248A3D; --down: #D70015; --green: #248A3D;
  --focus: #0071E3;
  --shadow: 0 1px 1px rgb(0 0 0 / .03), 0 6px 24px -6px rgb(0 0 0 / .08);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / .04), 0 24px 60px -18px rgb(0 0 0 / .22);
  --blur: saturate(180%) blur(22px);
  --r-card: 20px; --r: 14px; --r-sm: 10px;
  --radius: var(--r); --radius-sm: var(--r-sm); --radius-card: var(--r-card);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.ui {
    --bg: #000000; --bg-2: #1C1C1E;
    --surface: rgb(28 28 30 / .66); --surface-strong: rgb(36 36 38 / .92);
    --surface-2: rgb(118 118 128 / .16); --fill: rgb(118 118 128 / .24);
    --glass-line: rgb(255 255 255 / .08);
    --ink: #F5F5F7; --ink-2: #D1D1D6; --muted: #98989D;
    --line: rgb(255 255 255 / .09); --line-strong: rgb(255 255 255 / .16);
    --up: #30D158; --down: #FF453A; --green: #30D158; --focus: #0A84FF;
    --shadow: 0 1px 0 rgb(255 255 255 / .03) inset, 0 8px 30px -10px rgb(0 0 0 / .6);
    --shadow-lg: 0 30px 80px -20px rgb(0 0 0 / .8);
    --bg: #000000; --bg-2: #1C1C1E; --surface: rgb(28 28 30 / .88); --surface-strong: rgb(36 36 38 / .94);
    --accent: #F5F5F7; --on-accent: #000;
    --blue-soft: rgb(10 132 255 / .16); --err-bg: rgb(255 69 58 / .14); --green-bg: rgb(48 209 88 / .14);
    color-scheme: dark;
  }
}
html[data-theme="dark"] body.ui {
  --bg: #000000; --bg-2: #1C1C1E;
  --surface: rgb(28 28 30 / .66); --surface-strong: rgb(36 36 38 / .92);
  --surface-2: rgb(118 118 128 / .16); --fill: rgb(118 118 128 / .24);
  --glass-line: rgb(255 255 255 / .08);
  --ink: #F5F5F7; --ink-2: #D1D1D6; --muted: #98989D;
  --line: rgb(255 255 255 / .09); --line-strong: rgb(255 255 255 / .16);
  --up: #30D158; --down: #FF453A; --green: #30D158; --focus: #0A84FF;
  --shadow: 0 1px 0 rgb(255 255 255 / .03) inset, 0 8px 30px -10px rgb(0 0 0 / .6);
  --shadow-lg: 0 30px 80px -20px rgb(0 0 0 / .8);
  --bg: #000000; --bg-2: #1C1C1E; --surface: rgb(28 28 30 / .88); --surface-strong: rgb(36 36 38 / .94);
  --accent: #F5F5F7; --on-accent: #000;
  --blue-soft: rgb(10 132 255 / .16); --err-bg: rgb(255 69 58 / .14); --green-bg: rgb(48 209 88 / .14);
  color-scheme: dark;
}
html[data-theme="light"] body.ui { color-scheme: light; }

/* ───────── основа ───────── */
body.ui { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; transition: background-color .35s ease, color .35s ease; }
body.ui::before, body.ui::after { content: none; }
body.ui .num { font-variant-numeric: tabular-nums; }
body.ui ::selection { background: color-mix(in srgb, var(--focus) 30%, transparent); }
.theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .theme-btn .i-sun { display: none; } html:not([data-theme="light"]) .theme-btn .i-moon { display: inline; } }
html[data-theme="dark"] .theme-btn .i-sun { display: none; } html[data-theme="dark"] .theme-btn .i-moon { display: inline; }

/* ───────── стекло ───────── */
body.ui :is(.sheet, .panel, .tx-list, .table-wrap, .stats, .stat-grid, .inv-sum, .facts, .rcpt, .rates-line, .person, .payee-card, .tile,
  .kind-pick span, .drop, .fx, .chat, .qr-card) {
  background: var(--surface); border: 1px solid var(--glass-line); border-radius: var(--r-card);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow);
}
body.ui .rl > * + *, body.ui .kvc li + li, body.ui .tx + .tx, body.ui .req + .req { border-color: var(--line); }
body.ui .rl-row, body.ui .mkt-row, body.ui .q-row, body.ui .rank { transition: background-color .2s ease; }
body.ui a.rl-row:hover, body.ui a.mkt-row:hover, body.ui a.q-row:hover { background: var(--surface-2); }
body.ui .sheet.rl > :first-child, body.ui .sheet > .kvc > li:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
body.ui .sheet.rl > :last-child, body.ui .sheet > .kvc > li:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
body.ui .tier-line, body.ui .more-head { border-radius: var(--r-card); }

/* ───────── каркас: ПК ───────── */
@media (min-width: 900px) {
  body.ui { --side-w: 260px; }
  body.ui .side { background: color-mix(in srgb, var(--bg) 60%, transparent); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    border-right: 1px solid var(--glass-line); padding: 22px 14px 16px; view-transition-name: side; }
  body.ui .side-brand { font-size: 22px; padding: 2px 10px 6px; }
  body.ui .side-search { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 10px;
    background: var(--fill); color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; transition: background-color .2s; }
  body.ui .side-search:hover { background: color-mix(in srgb, var(--fill) 100%, var(--ink) 4%); }
  body.ui .side-search svg { width: 16px; height: 16px; }
  body.ui .side-search kbd { margin-left: auto; font: 500 11px var(--font); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 5px; padding: 1px 5px; }
  body.ui .side-label { padding: 12px 10px 6px; font-size: 11px; letter-spacing: .06em; }
  body.ui .side-nav a { height: 36px; border-radius: 10px; font-size: 14.5px; color: var(--ink-2); transition: background-color .18s, color .18s; }
  body.ui .side-nav a svg { width: 18px; height: 18px; color: var(--muted); transition: color .18s; }
  body.ui .side-nav a:hover { background: var(--surface-2); color: var(--ink); }
  body.ui .side-nav a.active { background: var(--fill); color: var(--ink); font-weight: 600; }
  body.ui .side-nav a.active::before { display: none; }
  body.ui .side-nav a.active svg { color: var(--focus); }
  body.ui .side-foot { border-top: 1px solid var(--line); }
  body.ui .side-tools { display: flex; align-items: center; justify-content: space-between; }
  body.ui .topbar { background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--glass-line); view-transition-name: topbar; }
  body.ui .topbar .top-right .theme-btn { display: none; }
  body.ui main.page, body.ui main.page.wide { padding: 30px 44px 72px; max-width: 1200px; }
  body.ui main.page.narrow { max-width: 760px; }
}

/* ───────── каркас: телефон ───────── */
@media (max-width: 899px) {
  body.ui .topbar { background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    border-bottom: 1px solid transparent; view-transition-name: topbar; transition: border-color .2s; }
  body.ui.scrolled .topbar { border-bottom-color: var(--glass-line); }
  body.ui .topbar-inner { height: 50px; }
  body.ui main.page, body.ui main.page.wide { padding: 14px 16px calc(96px + env(safe-area-inset-bottom)); }
  body.ui .tabbar {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 64px; padding: 0 6px;
    border-radius: 30px; border: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--bg-2) 70%, transparent);
    -webkit-backdrop-filter: saturate(200%) blur(26px); backdrop-filter: saturate(200%) blur(26px);
    box-shadow: var(--shadow-lg); view-transition-name: tabbar;
  }
  body.ui .tabbar a { position: relative; gap: 3px; font-size: 10px; letter-spacing: 0; color: var(--muted); transition: color .2s; }
  body.ui .tabbar a svg { width: 22px; height: 22px; position: relative; z-index: 1; }
  body.ui .tabbar a span { position: relative; z-index: 1; }
  body.ui .tabbar a.active { color: var(--focus); font-weight: 600; }
  body.ui .tabbar a.active::before { content: ""; position: absolute; inset: 7px 3px; top: 7px; left: 4px; right: 4px; height: auto;
    background: var(--surface-2); border-radius: 22px; }
  body.ui .tab-badge { top: 6px; }
}
body.ui .top-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; transition: background-color .2s; }
body.ui .top-icon:hover { background: var(--surface-2); }
body.ui .top-icon svg { width: 20px; height: 20px; }
body.ui .top-right { gap: 4px; }
body.ui .topbar .crumb { color: var(--muted); font-weight: 500; }
@media (min-width: 900px) { body.ui .topbar .top-icon[data-search] { display: none; } }

/* ───────── заголовки ───────── */
body.ui .ph h1, body.ui .page-head h1 { font-size: 40px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
body.ui .ph .sub { font-size: 15px; color: var(--muted); max-width: 64ch; }
@media (max-width: 899px) { body.ui .ph h1, body.ui .page-head h1 { font-size: 32px; } }
body.ui .h2 { margin: 34px 0 12px; }
body.ui .h2 h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.025em; }
body.ui .h2 a { color: var(--focus); }
body.ui .section-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; }
body.ui .section-head h2 { font-size: 13px; letter-spacing: .02em; text-transform: none; color: var(--muted); font-weight: 600; }
body.ui .back { color: var(--focus); }
body.ui .back::before { content: "‹"; font-size: 22px; line-height: 0; margin-right: 2px; }

/* ───────── кнопки и поля ───────── */
body.ui .btn { border-radius: 980px; height: 44px; padding: 0 20px; border: 1px solid transparent; background: var(--fill); color: var(--ink);
  font-weight: 590; letter-spacing: -0.01em; transition: transform .15s cubic-bezier(.3,.7,.4,1), background-color .2s, filter .2s, box-shadow .2s; }
body.ui .btn:hover { border-color: transparent; filter: brightness(.97); }
body.ui .btn:active { transform: scale(.97); }
body.ui .btn.dark, body.ui .btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
body.ui .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
body.ui .btn.blue { background: var(--focus); border-color: var(--focus); color: #fff; }
body.ui .btn.ghost { background: transparent; }
body.ui .btn.ghost:hover { background: var(--surface-2); }
body.ui .btn.danger { color: var(--down); }
body.ui .btn.sm { height: 36px; padding: 0 14px; border-radius: 980px; }
body.ui .btn.xs { height: 30px; padding: 0 12px; border-radius: 980px; font-size: 12.5px; }
body.ui .icon-btn { border-radius: 50%; border: 0; background: var(--fill); color: var(--ink-2); transition: transform .15s, background-color .2s; }
body.ui .icon-btn:active { transform: scale(.92); }
body.ui .input, body.ui select.input, body.ui textarea.input { border-radius: 12px; border: 1px solid transparent; background: var(--fill); color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background-color .2s; }
body.ui .input:focus { background: var(--bg-2); border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 18%, transparent); }
body.ui .input::placeholder { color: var(--muted); }
body.ui .field > label, body.ui .field > .label-row { color: var(--muted); font-weight: 500; }
body.ui .check .sw { background: var(--fill); }
body.ui .check input:checked + .sw { background: var(--green); }
body.ui .choice span { border-radius: 980px; border-color: transparent; background: var(--fill); }
body.ui .choice input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
body.ui .alert { border-radius: 14px; }
body.ui .banner { border-radius: 14px; border-left-width: 0; background: var(--surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line); }
body.ui .banner.info::before, body.ui .banner.warn::before, body.ui .banner.danger::before, body.ui .banner.ok::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--focus); }
body.ui .banner.warn::before { background: #FF9F0A; } body.ui .banner.danger::before { background: var(--down); } body.ui .banner.ok::before { background: var(--green); }
body.ui .tag { border-radius: 980px; border: 0; background: var(--fill); padding: 0 8px; }
body.ui .tag.blue { background: var(--blue-soft); color: var(--focus); }
body.ui .count, body.ui .side-badge, body.ui .tab-badge { background: #FF3B30; }
body.ui .av { border: 0; background: var(--fill); }
body.ui .av.sys.g { background: var(--fill); border: 0; border-radius: 12px; }
body.ui .av.sys.g.blue { background: #003399; }
body.ui .up, body.ui .pos { color: var(--up); } body.ui .down, body.ui .neg { color: var(--down); }
body.ui .rl-row.in .amt > span:first-child { color: var(--up); }

/* сегменты-«таблетки» */
.seg-pills { display: inline-flex; gap: 2px; padding: 3px; border-radius: 980px; background: var(--fill); }
.seg-pills a { padding: 6px 14px; border-radius: 980px; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: background-color .25s, color .25s, box-shadow .25s; white-space: nowrap; }
.seg-pills a.on { background: var(--bg-2); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.seg-pills.wide { display: flex; margin-bottom: 18px; } .seg-pills.wide a { flex: 1; text-align: center; }
body.ui .tabs { border-bottom: 0; gap: 2px; padding: 3px; border-radius: 980px; background: var(--fill); display: flex; width: fit-content; max-width: 100%; }
body.ui .tabs a { border: 0; margin: 0; padding: 7px 14px; border-radius: 980px; font-size: 13.5px; font-weight: 600; transition: background-color .25s, color .25s; }
body.ui .tabs a.on { background: var(--bg-2); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
body.ui .seg { border-radius: 980px; background: var(--fill); border: 0; }
body.ui .seg a { border-radius: 980px; }
body.ui .seg a.on { background: var(--bg-2); }
body.ui .chips a { border: 0; background: var(--fill); }

/* ───────── главная ───────── */
body.ui .hero-bal { font-size: 60px; font-weight: 700; letter-spacing: -0.05em; }
@media (max-width: 899px) { body.ui .hero-bal { font-size: 46px; } }
body.ui .quick a { border-radius: 18px; background: var(--surface); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadow); transition: transform .2s cubic-bezier(.3,.7,.4,1), box-shadow .2s, background-color .2s; }
body.ui .quick a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--glass-line); }
body.ui .quick a:active { transform: scale(.97); }
body.ui .quick a.main { background: var(--ink); color: var(--bg); border-color: transparent; }
@media (min-width: 900px) { body.ui .quick a { height: 48px; border-radius: 980px; } }
body.ui .day { color: var(--muted); font-size: 13px; padding-left: 4px; padding-right: 4px; }
body.ui .prog { background: var(--fill); height: 5px; border-radius: 3px; }
body.ui .prog i { background: var(--focus); border-radius: 3px; }
body.ui .prog.blue i { background: var(--focus); }
body.ui .bcard .face { border-radius: 16px; }
body.ui .bcard-wrap { filter: drop-shadow(0 18px 30px rgb(0 0 0 / .12)); }

/* ───────── значки копилок ───────── */
.vi { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(160deg, var(--v1), var(--v2)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 4px 10px -4px var(--v2); }
.vi svg { width: 22px; height: 22px; stroke-width: 1.9; }
.vi.lg { width: 72px; height: 72px; border-radius: 20px; } .vi.lg svg { width: 38px; height: 38px; }
.vi-target   { --v1: #FF6A5C; --v2: #E0245E; }
.vi-car      { --v1: #4DA3FF; --v2: #1F5BD8; }
.vi-house    { --v1: #FFB340; --v2: #FF7A1A; }
.vi-plane    { --v1: #6ED3FF; --v2: #2D8FDB; }
.vi-gift     { --v1: #FF7EC0; --v2: #D63384; }
.vi-laptop   { --v1: #9A9AA0; --v2: #48484A; }
.vi-phone    { --v1: #6B7A90; --v2: #27313F; }
.vi-umbrella { --v1: #40E0D0; --v2: #0E9C8F; }
.vi-cap      { --v1: #B59BFF; --v2: #6D4AE8; }
.vi-heart    { --v1: #FF6B8A; --v2: #E11D48; }
.vi-ring     { --v1: #F1D38A; --v2: #C99536; }
.vi-game     { --v1: #7F8CFF; --v2: #4338CA; }
.vi-bike     { --v1: #8FE36A; --v2: #3FA531; }
.vi-paw      { --v1: #D39A6A; --v2: #8B5A2B; }
.vi-book     { --v1: #34D399; --v2: #047857; }
.vi-coffee   { --v1: #B98457; --v2: #6B4226; }
body.ui .icon-pick { gap: 10px; }
body.ui .icon-pick label { position: relative; }
body.ui .icon-pick .vi { width: 48px; height: 48px; border-radius: 14px; transition: transform .2s, box-shadow .2s; }
body.ui .icon-pick input:checked + .vi { transform: scale(1.06); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--focus); }

/* ───────── уровни карт: Blue · Silver · Gold · Diamond · Black ─────────
   Blue — без анимации. Silver — звёзды по очереди вспыхивают и гаснут.
   Gold — звёзды и надпись Swiss+ мягко сияют. Diamond — радужный градиент.
   Black — карбон, звёзды и Swiss+ светятся как рубин. */
.bcard .eu-stars .st { animation: none; }
.bcard .bc-brand .bc-name { display: inline-block; opacity: 1; font-weight: 700; }
.bcard .bc-brand .bc-name span { opacity: .75; font-weight: 500; }

/* Silver */
.bcard.t-silver .face { color: #16181B;
  background: repeating-linear-gradient(0deg, rgb(255 255 255 / .06) 0 1px, rgb(0 0 0 / .018) 1px 2px),
    linear-gradient(125deg, #EEF0F3 0%, #C9CDD3 40%, #E1E4E8 58%, #B3B8BF 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), inset 0 0 0 1px rgb(0 0 0 / .06); }
.bcard.t-silver .face::after { background: none; }
.bcard.t-silver .eu-stars g { fill: #737A84; }
.bcard.t-silver .eu-stars { filter: none; opacity: 1; }
.bcard.t-silver .eu-stars .st { animation: twSilver 6s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes twSilver {
  0%, 62%, 100% { fill: #737A84; filter: none; }
  72% { fill: #FFFFFF; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgb(255 255 255 / .95)) drop-shadow(0 0 10px rgb(200 215 235 / .8)); }
  84% { fill: #C9D0D8; filter: drop-shadow(0 0 2px rgb(255 255 255 / .5)); }
}

/* Gold — шампанское */
.bcard.t-gold .face { color: #2A2112;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 1px, rgb(0 0 0 / .015) 1px 2px),
    linear-gradient(125deg, #F3E8CF 0%, #D9C08F 40%, #EEDDB6 58%, #BD9C62 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), inset 0 0 0 1px rgb(90 60 10 / .1); }
.bcard.t-gold .face::after { background: none; }
.bcard.t-gold .eu-stars g { fill: url(#st-gold); }
.bcard.t-gold .eu-stars .st { animation: twGold 5s ease-in-out infinite; animation-delay: calc(var(--i) * .42s); }
@keyframes twGold {
  0%, 60%, 100% { filter: drop-shadow(0 1px 0 rgb(255 255 255 / .35)); opacity: .85; }
  74% { filter: drop-shadow(0 0 3px #FFF6D8) drop-shadow(0 0 8px rgb(255 214 120 / .95)); opacity: 1; }
}
.bcard.t-gold .chip { background: linear-gradient(135deg, #FBEFD0 0%, #D4B06A 50%, #F0DCAA 75%, #A9843F 100%); }
.bcard.t-gold .rear .stripe { background: #2A2112; }
.bcard.t-gold .bc-name {
  background: linear-gradient(100deg, #3A2C12 0%, #3A2C12 38%, #FFF3C9 50%, #3A2C12 62%, #3A2C12 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 5s ease-in-out infinite; }
.bcard.t-gold .bc-brand .bc-name span { opacity: 1; font-weight: 700; }

/* Diamond — лёд и радужный блеск */
.bcard.t-diamond .face { color: #172033;
  background:
    repeating-conic-gradient(from 20deg at 78% 35%, rgb(255 255 255 / .09) 0deg 6deg, rgb(255 255 255 / 0) 6deg 18deg),
    linear-gradient(135deg, #F7FAFF 0%, #DCE6F4 38%, #F0EAFB 60%, #D2DEEE 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px rgb(30 50 90 / .08); }
.bcard.t-diamond .face::after { background: linear-gradient(115deg, transparent 25%, rgb(255 255 255 / .35) 45%, transparent 60%);
  background-size: 250% 100%; animation: sheen 7s ease-in-out infinite; }
.bcard.t-diamond .eu-stars g { fill: url(#st-dia); stroke: rgb(70 90 150 / .45); stroke-width: .7; }
.bcard.t-diamond .eu-stars { filter: drop-shadow(0 1px 1px rgb(40 60 100 / .25)); }
.bcard.t-diamond .eu-stars .st { animation: twDiamond 6s linear infinite; animation-delay: calc(var(--i) * -.5s); }
@keyframes twDiamond {
  0% { filter: hue-rotate(0deg) brightness(1); }
  25% { filter: hue-rotate(90deg) brightness(1.15) drop-shadow(0 0 4px rgb(190 225 255 / .9)); }
  50% { filter: hue-rotate(180deg) brightness(1); }
  75% { filter: hue-rotate(270deg) brightness(1.2) drop-shadow(0 0 5px rgb(255 205 240 / .9)); }
  100% { filter: hue-rotate(360deg) brightness(1); }
}
.bcard.t-diamond .chip { background: linear-gradient(135deg, #F4F6FA 0%, #B9C3D1 50%, #E6EAF1 75%, #939FB0 100%); }
.bcard.t-diamond .rear .stripe { background: #1B2233; }
.bcard.t-diamond .bc-name {
  background: linear-gradient(100deg, #1B2640 0%, #3B6FD8 20%, #9B6BFF 40%, #E063B8 55%, #3FC6C0 72%, #1B2640 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 6s linear infinite; }
.bcard.t-diamond .bc-brand .bc-name span { opacity: 1; font-weight: 700; }

/* Black — чистый чёрный, звёзды контуром с градиентом, Swiss+ мягко светится */
.bcard.t-black .face { color: #EDEDED; background: #0A0A0A;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), inset 0 0 0 1px rgb(255 255 255 / .06); }
.bcard.t-black .face::after { background: none; }
.bcard.t-black .eu-stars g { fill: none; stroke: url(#st-ruby-line); stroke-width: 1.15; stroke-linejoin: round; }
.bcard.t-black .eu-stars { opacity: 1; }
.bcard.t-black .eu-stars .st { animation: twRuby 4s ease-in-out infinite; animation-delay: calc(var(--i) * .33s); }
@keyframes twRuby {
  0%, 100% { filter: drop-shadow(0 0 1px rgb(255 60 100 / .35)); opacity: .75; }
  50% { filter: drop-shadow(0 0 2px rgb(255 90 130 / .9)) drop-shadow(0 0 6px rgb(224 17 58 / .7)); opacity: 1; }
}
.bcard.t-black .chip { background: linear-gradient(135deg, #8C8F94 0%, #55585D 45%, #7A7D82 70%, #3F4246 100%); }
.bcard.t-black .rear .stripe { background: #000; }
.bcard.t-black .bc-name {
  background: linear-gradient(100deg, #FF5C7A 0%, #C8102E 30%, #FFB3C1 50%, #C8102E 70%, #FF5C7A 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 6s ease-in-out infinite, rubyText 4s ease-in-out infinite; }
.bcard.t-black .bc-brand .bc-name span { opacity: 1; font-weight: 700; }
.bcard.t-black .bc-tier { color: #FF6A83; opacity: .9; }
@keyframes rubyText { 0%, 100% { filter: drop-shadow(0 0 0 rgb(255 40 80 / 0)); } 50% { filter: drop-shadow(0 0 4px rgb(224 17 58 / .55)); } }
@keyframes sheen { 0% { background-position: 100% 0; } 100% { background-position: -160% 0; } }
@media (prefers-reduced-motion: reduce) { .bcard .eu-stars .st, .bcard .bc-name, .bcard .face::after { animation: none !important; } }

.tier-chip { border-radius: 980px; padding: 0 10px; }
.tier-chip.t-silver { background: linear-gradient(120deg, #EEF0F3, #B3B8BF); color: #16181B; }
.tier-chip.t-gold { background: linear-gradient(120deg, #F3E8CF, #C9A868); color: #2A2112; }
.tier-chip.t-diamond { background: linear-gradient(120deg, #EAF4FF, #D9CCFF 50%, #FFD9EE); color: #172033; }
.tier-chip.t-black { background: #111; color: #FF5C75; box-shadow: inset 0 0 0 1px rgb(255 92 117 / .35); }

/* ───────── курсы: пары, свечи, конвертер ───────── */
.pairs { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 14px; margin: 0 -2px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.pairs::-webkit-scrollbar { display: none; }
.pair { flex: none; min-width: 150px; display: grid; gap: 2px; padding: 12px 16px; border-radius: 18px; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, background-color .2s; }
.pair:hover { transform: translateY(-2px); }
.pair.on { background: var(--ink); color: var(--bg); border-color: transparent; }
.pair.on .pc i, .pair.on .chg { color: inherit; opacity: .75; }
.pair .pc { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.pair.on .pc { color: inherit; opacity: .7; }
.pair .pc i { font-style: normal; opacity: .5; margin: 0 1px; }
.pair .pv { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.pair .chg { font-size: 12.5px; font-weight: 600; }
.rates-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 1099px) { .rates-grid { grid-template-columns: 1fr; } }
.rate-main { padding: 20px 20px 16px; }
.rm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.rm-pair { font-size: 14px; color: var(--muted); font-weight: 500; }
.rm-val { font-size: 44px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; margin: 4px 0 8px; }
.rm-val .cc { font-size: 20px; color: var(--muted); letter-spacing: 0; font-weight: 600; }
.rm-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 980px; font-weight: 700; font-size: 13px; background: var(--fill); }
.pill.up { background: color-mix(in srgb, var(--up) 14%, transparent); color: var(--up); }
.pill.down { background: color-mix(in srgb, var(--down) 12%, transparent); color: var(--down); }
@media (max-width: 599px) { .rm-val { font-size: 36px; } .rate-main { padding: 16px 14px 12px; } }

.candles { position: relative; height: 320px; margin: 4px 0 0; padding-right: 64px; touch-action: pan-y; user-select: none; --u: var(--up); --d: var(--down); }
@media (max-width: 599px) { .candles { height: 260px; padding-right: 54px; } }
.candles .csvg { width: 100%; height: 100%; display: block; overflow: visible; }
.candles .g { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.candles .w { stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.candles .w.u { stroke: var(--u); } .candles .w.d { stroke: var(--d); } .candles .w.f { stroke: var(--muted); }
.candles .b.u { fill: var(--u); } .candles .b.d { fill: var(--d); } .candles .b.f { fill: var(--muted); }
.candles .lastl { stroke-dasharray: 4 4; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .7; }
.candles .lastl.u { stroke: var(--u); } .candles .lastl.d { stroke: var(--d); }
.candles .cross { stroke: var(--ink); stroke-width: 1; opacity: 0; vector-effect: non-scaling-stroke; stroke-dasharray: 2 3; transition: opacity .15s; }
.candles .cy { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; color: var(--muted); width: 60px; text-align: right; pointer-events: none; }
.candles .cy.last { color: #fff; font-weight: 700; padding: 2px 6px; border-radius: 6px; width: auto; }
.candles .cy.last.u { background: var(--u); } .candles .cy.last.d { background: var(--d); }
.candles .cxs { position: absolute; left: 0; right: 64px; bottom: 0; height: 18px; }
@media (max-width: 599px) { .candles .cxs { right: 54px; } }
.candles .cx { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.candles .cx:first-child { transform: none; } .candles .cx:last-child { transform: translateX(-100%); }
.candles .ctip { position: absolute; top: 0; z-index: 2; pointer-events: none; display: grid; grid-template-columns: auto auto; gap: 1px 8px;
  padding: 8px 10px; border-radius: 12px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--surface-strong); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow-lg); }
.candles .ctip b { grid-column: 1 / -1; font-size: 12px; margin-bottom: 3px; }
.candles .ctip span { color: var(--muted); }
.candles .ctip em { grid-column: 1 / -1; font-style: normal; font-weight: 700; margin-top: 2px; }
.ohlc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.ohlc > div { padding: 10px 12px; border-radius: 14px; background: var(--surface-2); min-width: 0; }
.ohlc span { display: block; font-size: 12px; color: var(--muted); }
.ohlc b { font-size: 15px; font-weight: 650; }
@media (max-width: 599px) { .ohlc { grid-template-columns: repeat(2, 1fr); } }
.conv { padding: 18px; }
.conv-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--fill); margin-top: 8px; }
.conv-row input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 24px; font-weight: 650; text-align: right; color: var(--ink); letter-spacing: -0.02em; }
.conv-code { font-weight: 700; font-size: 15px; min-width: 42px; }
.cur-badge { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  background: var(--ink); color: var(--bg); }
body.ui .mkt-row .spark { width: 110px; height: 30px; }

/* ───────── рейтинг ───────── */
.podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 12px; align-items: end; margin-top: 8px; }
.pod { display: grid; justify-items: center; text-align: center; gap: 4px; min-width: 0; animation: podIn .7s cubic-bezier(.2,.8,.2,1) both; }
.pod.p1 { animation-delay: .08s; } .pod.p3 { animation-delay: .16s; }
.pod-av { position: relative; }
.pod .av.lg { width: 64px; height: 64px; font-size: 22px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--ring, var(--line-strong)); }
.pod.p1 .av.lg { width: 84px; height: 84px; font-size: 28px; }
.pod.p1 { --ring: #D4B25C; } .pod.p2 { --ring: #B9BEC6; } .pod.p3 { --ring: #C08A5B; }
.medal { position: absolute; right: -4px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff; box-shadow: 0 0 0 2px var(--bg); background: var(--ring); }
.medal.m1 { color: #3A2C06; }
.pod-name { font-weight: 650; font-size: 14.5px; margin-top: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-val { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.pod.p1 .pod-val { font-size: 21px; }
.pod-sub { font-size: 12px; color: var(--muted); min-height: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-base { width: 100%; margin-top: 10px; border-radius: 16px 16px 6px 6px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow); }
.pod-base span { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; color: var(--muted); opacity: .6; }
.pod.p1 .pod-base { height: 104px; background: linear-gradient(180deg, color-mix(in srgb, #D4B25C 22%, var(--surface)), var(--surface)); }
.pod.p2 .pod-base { height: 76px; } .pod.p3 .pod-base { height: 56px; }
.pod.me .pod-name::after { content: " •"; color: var(--focus); }
@keyframes podIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
body.ui .rank { grid-template-columns: 30px 40px minmax(0, 1fr) auto; padding: 12px 16px; }
body.ui .rank .n { font-size: 15px; color: var(--muted); font-weight: 700; }
body.ui .rank .bar { height: 4px; border-radius: 2px; background: var(--fill); } body.ui .rank .bar i { background: var(--focus); border-radius: 2px; }
body.ui .rank.me { background: color-mix(in srgb, var(--focus) 7%, transparent); }
.you { font-size: 11px; font-weight: 700; color: var(--focus); background: var(--blue-soft); border-radius: 980px; padding: 1px 7px; margin-left: 4px; }

/* ───────── поиск ───────── */
.sp-search { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px;
  background: rgb(0 0 0 / .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s ease; }
.sp-search.show { opacity: 1; }
.sp-panel { width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  background: var(--surface-strong, rgb(255 255 255 / .9)); border: 1px solid var(--glass-line); box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  transform: translateY(-8px) scale(.98); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.sp-search.show .sp-panel { transform: none; }
.sp-field { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sp-field svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.sp-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 19px var(--font); color: var(--ink); -webkit-appearance: none; }
.sp-field input::-webkit-search-cancel-button { display: none; }
.sp-close { border: 0; background: none; color: var(--focus); font: 500 15px var(--font); cursor: pointer; }
@media (min-width: 900px) { .sp-close { display: none; } }
.sp-results { overflow-y: auto; padding: 6px 8px 10px; overscroll-behavior: contain; }
.sp-group { padding: 12px 10px 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.sp-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; color: var(--ink); }
.sp-item.on, .sp-item:hover { background: var(--fill); }
.sp-item.on { background: color-mix(in srgb, var(--focus) 14%, transparent); }
.sp-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--fill); color: var(--ink-2); overflow: hidden; }
.sp-ic svg { width: 18px; height: 18px; }
.sp-ic.vi { width: 34px; height: 34px; border-radius: 10px; color: #fff; }
.sp-ic.av { border-radius: 50%; } .sp-ic img { width: 100%; height: 100%; object-fit: cover; }
.sp-t { min-width: 0; } .sp-t b { display: block; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-t small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-r { font-weight: 600; font-size: 14px; white-space: nowrap; }
.sp-empty { padding: 28px; text-align: center; color: var(--muted); }
.sp-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.sp-foot kbd { font: 600 11px var(--font); border: 1px solid var(--line-strong); border-radius: 5px; padding: 0 5px; margin-right: 2px; }
@media (max-width: 899px) { .sp-search { padding: calc(8px + env(safe-area-inset-top)) 8px 8px; } .sp-panel { max-height: 80vh; } .sp-foot { display: none; } }
body.sp-open { overflow: hidden; }

/* ───────── плавные переходы ───────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtFadeOut .28s ease both; }
::view-transition-new(root) { animation: vtFadeIn .28s ease both; }
@keyframes vtFadeOut { to { opacity: 0; } }
@keyframes vtFadeIn { from { opacity: 0; } }
::view-transition-group(side), ::view-transition-group(tabbar), ::view-transition-group(topbar) { animation-duration: 0s; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }
body.ui main.page > * { animation: riseIn .5s cubic-bezier(.2,.8,.2,1) backwards; }
body.ui main.page > :nth-child(1) { animation-delay: 0s; }
body.ui main.page > :nth-child(2) { animation-delay: .03s; }
body.ui main.page > :nth-child(3) { animation-delay: .06s; }
body.ui main.page > :nth-child(4) { animation-delay: .09s; }
body.ui main.page > :nth-child(5) { animation-delay: .12s; }
body.ui main.page > :nth-child(n+6) { animation-delay: .15s; }
body.ui .dash > .col > section, body.ui .sec-grid > .col > section { animation: riseIn .55s cubic-bezier(.2,.8,.2,1) backwards; }
body.ui .dash > .col > section:nth-child(2) { animation-delay: .05s; }
body.ui .dash > .col > section:nth-child(3) { animation-delay: .1s; }
body.ui .dash > .col:nth-child(2) > section { animation-delay: .08s; }
@keyframes riseIn { from { transform: translateY(14px); } to { transform: none; } }
body.ui .tile { transition: transform .25s cubic-bezier(.3,.7,.4,1), box-shadow .25s; }
body.ui .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--glass-line); }
body.ui .move-box { display: block; max-height: 0; overflow: hidden; padding: 0 14px; opacity: 0; margin-top: 0;
  transition: max-height .4s cubic-bezier(.2,.8,.2,1), opacity .3s, padding .3s, margin .3s; }
body.ui .move-box.open { max-height: 400px; opacity: 1; padding: 14px; margin-top: 12px; }
body.ui details > summary { list-style: none; } body.ui details > summary::-webkit-details-marker { display: none; }
body.ui .toast { border-radius: 980px; padding: 12px 18px; background: var(--surface-strong); color: var(--ink); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) {
  body.ui *, body.ui *::before, body.ui *::after { animation: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ───────── мелочи ───────── */
body.ui .rcpt-head { border-bottom-color: var(--line-strong); }
body.ui .rcpt-head::before, body.ui .rcpt-head::after { background: var(--bg); border-color: var(--glass-line); }
body.ui table.t th { color: var(--muted); letter-spacing: .02em; text-transform: none; font-size: 12.5px; font-weight: 600; }
body.ui table.t tr.link:hover td { background: var(--surface-2); }
body.ui .stats { border-radius: var(--r-card); }
body.ui .lang { border: 0; background: var(--fill); }
body.ui .lang a.on { background: var(--ink); color: var(--bg); }
body.ui .top-chat:hover, body.ui .top-chat.active { background: var(--surface-2); color: var(--focus); }
body.ui .person:has(input:checked) { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus), var(--shadow); }
body.ui .person:has(input:checked) .tick { background: var(--focus); border-color: var(--focus); }
body.ui .kind-pick input:checked + span { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus), var(--shadow); }
body.ui .side-seg input:checked + span { background: var(--ink); color: var(--bg); }
body.ui .side-seg { border-radius: 980px; border: 0; background: var(--fill); padding: 3px; }
body.ui .side-seg span { border-radius: 980px; } body.ui .side-seg label + label span { border-left: 0; }
body.ui .escrow-note { border-radius: 14px; border-left: 0; background: var(--blue-soft); }
body.ui .escrow-note svg { color: var(--focus); }
body.ui .note-box { border-radius: 12px; border-left: 0; background: var(--fill); }
body.ui .chart .grid { stroke: var(--line); }
body.ui .empty-state { color: var(--muted); }
body.ui .hero .hero-top .flag-dot { background: var(--focus); }
body.ui .qr-frame { border-radius: 18px; }
body.ui .theme-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--fill); color: var(--ink-2); cursor: pointer; transition: transform .2s, background-color .2s; }
body.ui .theme-btn:active { transform: scale(.92) rotate(-12deg); }
body.ui .theme-btn svg { width: 18px; height: 18px; display: block; }
body.ui .topbar .theme-btn { background: none; }
.rates-grid > * { min-width: 0; } .rm-head > div:first-child { min-width: 0; } @media (max-width: 599px) { .seg-pills a { padding: 6px 11px; } .rm-head .seg-pills { width: 100%; display: flex; } .rm-head .seg-pills a { flex: 1; text-align: center; } }
@media (max-width: 599px) {
  .podium { gap: 6px; }
  .pod-val { font-size: 13.5px; } .pod.p1 .pod-val { font-size: 15.5px; }
  .pod .av.lg { width: 52px; height: 52px; font-size: 18px; } .pod.p1 .av.lg { width: 68px; height: 68px; }
  .pod-sub { font-size: 11px; }
  .pod-name { font-size: 13px; }
  .pod.p1 .pod-base { height: 84px; } .pod.p2 .pod-base { height: 60px; } .pod.p3 .pod-base { height: 44px; }
}
.bcard.t-silver .bc-brand .bc-name, .bcard.t-blue .bc-brand .bc-name { opacity: 1; }
.tier-card.locked .bcard { filter: none; opacity: 1; }

/* ═════════ v11: главная с картой, наклон, акцент уровня, темы ═════════ */

/* ── главная: баланс → карта → действия ── */
body.ui .home-hero { display: grid; gap: 22px; margin: 0 0 6px; }
body.ui .home-hero .hero { padding: 0; }
body.ui .hh-quick { margin: 0; }
body.ui .hh-card { position: relative; width: 100%; max-width: 420px; justify-self: center; }
body.ui .hh-card::before { content: ""; position: absolute; inset: 8% 6% -4%; z-index: -1; border-radius: 40px; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--focus) 34%, transparent), transparent); filter: blur(28px); opacity: .55; }
body.ui .home-dash { margin-top: 30px; }
@media (min-width: 900px) {
  body.ui .home-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); grid-template-areas: "bal card" "quick card";
    column-gap: 56px; row-gap: 28px; align-items: end; padding: 6px 0 4px; }
  body.ui .hh-bal { grid-area: bal; } body.ui .hh-card { grid-area: card; align-self: center; }
  body.ui .hh-quick { grid-area: quick; align-self: start; }
  body.ui .home-dash .h2.first { margin-top: 0; }
  body.ui .home-dash > .col > section:first-child > .h2 { margin-top: 0; }
}
@media (max-width: 899px) {
  body.ui .home-hero { gap: 20px; }
  body.ui .hh-card { max-width: 400px; }
  body.ui .home-dash { margin-top: 6px; }
}
body.ui .tier-mini { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 0 2px; color: var(--muted); font-size: 12.5px; }
body.ui .tier-mini .prog { flex: 1; height: 4px; margin: 0; border-radius: 2px; background: var(--fill); overflow: hidden; }
body.ui .tier-mini .prog i { display: block; height: 100%; }
body.ui .tier-mini .tm-t { white-space: nowrap; }
body.ui .tier-mini .chev { width: 16px; height: 16px; display: grid; place-items: center; opacity: .7; }
body.ui .tier-mini .chev svg { width: 16px; height: 16px; }
body.ui .tier-mini:hover { color: var(--ink); }

/* ── наклон карты ── */
.bcard-tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; will-change: transform; }
.bc-glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(55% 75% at var(--gx, 50%) var(--gy, 30%), rgb(255 255 255 / .32), rgb(255 255 255 / .06) 45%, transparent 70%);
  mix-blend-mode: soft-light; }
.bcard-tilt.live .bc-glare { opacity: var(--go, .15); }
.bcard .face.has-img .bc-glare { mix-blend-mode: screen; }

/* ── акцент по уровню карты ── */
html body.ui.tier-silver  { --focus: #5B6B82; --blue-soft: rgb(91 107 130 / .12); }
html body.ui.tier-gold    { --focus: #A77716; --blue-soft: rgb(167 119 22 / .12); }
html body.ui.tier-diamond { --focus: #6B5BD6; --blue-soft: rgb(107 91 214 / .12); }
html body.ui.tier-black   { --focus: #B3122B; --blue-soft: rgb(179 18 43 / .10); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) body.ui.tier-silver, html[data-theme="dark"] body.ui.tier-silver { --focus: #AEB9CB; --blue-soft: rgb(174 185 203 / .16); }
  html:not([data-theme]) body.ui.tier-gold, html[data-theme="dark"] body.ui.tier-gold { --focus: #E6BA62; --blue-soft: rgb(230 186 98 / .16); }
  html:not([data-theme]) body.ui.tier-diamond, html[data-theme="dark"] body.ui.tier-diamond { --focus: #AFA2FF; --blue-soft: rgb(175 162 255 / .16); }
  html:not([data-theme]) body.ui.tier-black, html[data-theme="dark"] body.ui.tier-black { --focus: #FF4D66; --blue-soft: rgb(255 77 102 / .16); }
}
html[data-theme="dark"] body.ui.tier-silver { --focus: #AEB9CB; --blue-soft: rgb(174 185 203 / .16); }
html[data-theme="dark"] body.ui.tier-gold { --focus: #E6BA62; --blue-soft: rgb(230 186 98 / .16); }
html[data-theme="dark"] body.ui.tier-diamond { --focus: #AFA2FF; --blue-soft: rgb(175 162 255 / .16); }
html[data-theme="dark"] body.ui.tier-black { --focus: #FF4D66; --blue-soft: rgb(255 77 102 / .16); }

/* ── фон с глубиной (тёмная и стеклянные темы) ── */
body.ui::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--ambient, none); transition: opacity .4s ease; }
body.ui { --ambient: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) body.ui {
    --ambient: radial-gradient(70% 45% at 12% -8%, color-mix(in srgb, var(--focus) 24%, transparent), transparent 70%),
               radial-gradient(55% 40% at 100% 4%, rgb(94 92 230 / .15), transparent 70%),
               radial-gradient(60% 40% at 50% 108%, rgb(255 255 255 / .045), transparent 70%);
    --surface: rgb(30 30 33 / .62);
    --shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 10px 32px -12px rgb(0 0 0 / .7);
  }
}
html[data-theme="dark"] body.ui {
  --ambient: radial-gradient(70% 45% at 12% -8%, color-mix(in srgb, var(--focus) 24%, transparent), transparent 70%),
             radial-gradient(55% 40% at 100% 4%, rgb(94 92 230 / .15), transparent 70%),
             radial-gradient(60% 40% at 50% 108%, rgb(255 255 255 / .045), transparent 70%);
  --surface: rgb(30 30 33 / .62);
  --shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 10px 32px -12px rgb(0 0 0 / .7);
}
/* мелкое зерно, чтобы чёрный не был «плоским» */
@media (prefers-color-scheme: dark) { html:not([data-theme]) body.ui::after { content: ""; } }
html[data-theme="dark"] body.ui::after { content: ""; }
body.ui::after { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── синее стекло: фон остаётся белым или чёрным, стеклянные панели — синие ── */
html[data-glass="blue"] body.ui {
  --surface: rgb(232 241 255 / .78); --surface-strong: rgb(240 246 255 / .94);
  --surface-2: rgb(0 113 227 / .06); --fill: rgb(0 113 227 / .10);
  --glass-line: rgb(0 113 227 / .16); --line: rgb(0 90 200 / .10); --line-strong: rgb(0 90 200 / .18);
  --bg-2: #EEF4FF; --muted: #5E6E8A;
  --shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 10px 30px -12px rgb(0 80 200 / .20);
  --shadow-lg: 0 24px 60px -18px rgb(0 60 170 / .28);
  --blur: saturate(180%) blur(24px);
  --ambient: radial-gradient(55% 38% at 8% -6%, rgb(0 113 227 / .10), transparent 70%),
             radial-gradient(45% 35% at 100% 40%, rgb(90 160 255 / .08), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  html[data-glass="blue"]:not([data-theme="light"]) body.ui {
  --surface: rgb(22 62 150 / .36); --surface-strong: rgb(14 34 84 / .92);
  --surface-2: rgb(90 150 255 / .12); --fill: rgb(90 150 255 / .18);
  --glass-line: rgb(120 170 255 / .24); --line: rgb(120 170 255 / .14); --line-strong: rgb(120 170 255 / .26);
  --bg-2: #0C1B3E; --muted: #9BAFD6;
  --shadow: inset 0 1px 0 rgb(170 205 255 / .16), 0 14px 38px -14px rgb(0 50 170 / .55);
  --shadow-lg: 0 30px 80px -20px rgb(0 30 110 / .75);
  --blur: saturate(170%) blur(26px);
  --ambient: radial-gradient(60% 42% at 10% -6%, rgb(40 110 255 / .26), transparent 70%),
             radial-gradient(50% 40% at 100% 30%, rgb(0 150 255 / .12), transparent 70%),
             radial-gradient(60% 45% at 30% 110%, rgb(60 70 255 / .16), transparent 70%);
  }
}
html[data-glass="blue"][data-theme="dark"] body.ui {
  --surface: rgb(22 62 150 / .36); --surface-strong: rgb(14 34 84 / .92);
  --surface-2: rgb(90 150 255 / .12); --fill: rgb(90 150 255 / .18);
  --glass-line: rgb(120 170 255 / .24); --line: rgb(120 170 255 / .14); --line-strong: rgb(120 170 255 / .26);
  --bg-2: #0C1B3E; --muted: #9BAFD6;
  --shadow: inset 0 1px 0 rgb(170 205 255 / .16), 0 14px 38px -14px rgb(0 50 170 / .55);
  --shadow-lg: 0 30px 80px -20px rgb(0 30 110 / .75);
  --blur: saturate(170%) blur(26px);
  --ambient: radial-gradient(60% 42% at 10% -6%, rgb(40 110 255 / .26), transparent 70%),
             radial-gradient(50% 40% at 100% 30%, rgb(0 150 255 / .12), transparent 70%),
             radial-gradient(60% 45% at 30% 110%, rgb(60 70 255 / .16), transparent 70%);
}
html[data-glass="blue"][data-theme="light"] body.ui {
  --surface: rgb(232 241 255 / .78); --surface-strong: rgb(240 246 255 / .94);
  --surface-2: rgb(0 113 227 / .06); --fill: rgb(0 113 227 / .10);
  --glass-line: rgb(0 113 227 / .16); --line: rgb(0 90 200 / .10); --line-strong: rgb(0 90 200 / .18);
  --bg-2: #EEF4FF; --muted: #5E6E8A;
  --shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 10px 30px -12px rgb(0 80 200 / .20);
  --shadow-lg: 0 24px 60px -18px rgb(0 60 170 / .28);
  --blur: saturate(180%) blur(24px);
  --ambient: radial-gradient(55% 38% at 8% -6%, rgb(0 113 227 / .10), transparent 70%),
             radial-gradient(45% 35% at 100% 40%, rgb(90 160 255 / .08), transparent 70%);
}
html[data-glass="blue"] body.ui .side { background: color-mix(in srgb, var(--surface) 55%, transparent); border-right-color: var(--glass-line); }
html[data-glass="blue"] body.ui .topbar { background: color-mix(in srgb, var(--bg) 62%, transparent); }
html[data-glass="blue"] body.ui .tabbar { background: color-mix(in srgb, var(--bg-2) 72%, transparent); }
html[data-glass="blue"] body.ui .side-search { background: var(--fill); }

/* ── выбор оформления ── */
.theme-pop { position: fixed; z-index: 90; width: 232px; padding: 6px; border-radius: 18px;
  background: var(--surface-strong, #fff); border: 1px solid var(--glass-line); box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top right; transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.theme-pop.open { opacity: 1; transform: none; }
.tp-title { padding: 8px 10px 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.theme-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 11px; background: none;
  color: var(--ink); font: 500 14.5px var(--font); text-align: left; cursor: pointer; }
.theme-pop button:hover { background: var(--fill); }
.theme-pop button span { flex: 1; }
.theme-pop .ok { width: 16px; height: 16px; color: var(--focus); opacity: 0; }
.theme-pop button[aria-checked="true"] .ok { opacity: 1; }
.sw { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgb(127 127 127 / .35); }
.sw-auto { background: linear-gradient(135deg, #fff 0 50%, #000 50% 100%); }
.sw-light { background: #fff; }
.sw-dark { background: radial-gradient(circle at 30% 25%, #2a2a40, #000 70%); }
.sw-none { background: linear-gradient(135deg, rgb(245 245 247) 0 50%, rgb(40 40 44) 50% 100%); }
.sw-blue { background: radial-gradient(circle at 30% 25%, #7FB2FF, #1A5BD8 55%, #0B2A6B); }
body.ui .side-tools .theme-btn svg, body.ui .top-icon.theme-btn svg { width: 18px; height: 18px; }

/* профиль: плитки тем */
.theme-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.theme-grid label { display: grid; gap: 8px; cursor: pointer; text-align: center; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.theme-grid input { position: absolute; opacity: 0; pointer-events: none; }
.tg-prev { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow .2s, transform .2s; }
.theme-grid input:checked + .tg-prev { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.theme-grid label:hover .tg-prev { transform: translateY(-2px); }
.tg-prev i { position: absolute; left: 12%; right: 12%; height: 16%; border-radius: 5px; }
.tg-prev i:nth-child(1) { top: 16%; right: 40%; } .tg-prev i:nth-child(2) { top: 42%; } .tg-prev i:nth-child(3) { top: 68%; }
.tg-light { background: #fff; } .tg-light i { background: #F2F2F5; }
.tg-dark { background: radial-gradient(90% 70% at 0% 0%, #1b2440, #000 70%); } .tg-dark i { background: rgb(40 40 44 / .9); }
.tg-auto { background: linear-gradient(135deg, #fff 0 50%, #000 50% 100%); } .tg-auto i { background: rgb(128 128 128 / .35); }
.tg-none { background: linear-gradient(135deg, #fff 0 50%, #000 50% 100%); } .tg-none i { background: rgb(128 128 128 / .35); }
.tg-blue { background: linear-gradient(135deg, #fff 0 50%, #000 50% 100%); } .tg-blue i { background: rgb(40 110 255 / .45); box-shadow: inset 0 0 0 1px rgb(120 170 255 / .6); }

@media (prefers-reduced-motion: reduce) { .bcard-tilt { transform: none !important; } }
.tp-sep { height: 1px; margin: 6px 8px; background: var(--line); }
.theme-grid.two { grid-template-columns: repeat(2, minmax(0, 160px)); }
.theme-grid.three { grid-template-columns: repeat(3, minmax(0, 160px)); }
.tg-label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 4px 0 10px; }
.tg-label + .theme-grid + .tg-label { margin-top: 20px; }

/* ═════════ v12: световая кромка стекла, кольца уровня, вкладки, цветные значки ═════════ */

/* ── 7. световая кромка: сверху светлее, по бокам почти нет, снизу лёгкий отблеск ── */
body.ui :is(.sheet, .panel, .tx-list, .table-wrap, .stats, .stat-grid, .inv-sum, .facts, .rcpt, .rates-line, .person, .tile, .fx, .qr-card, .quick a:not(.main), .banner) {
  position: relative; border-color: transparent; }
body.ui :is(.sheet, .panel, .tx-list, .table-wrap, .stats, .stat-grid, .inv-sum, .facts, .rcpt, .rates-line, .person, .tile, .fx, .qr-card, .quick a:not(.main), .banner)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, rgb(175 208 255 / .55) 0%, rgb(120 170 255 / .16) 22%, rgb(110 160 255 / .07) 55%, rgb(90 140 255 / .20) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
body.ui :is(.sheet, .panel, .rcpt, .stats, .inv-sum, .facts)::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(90deg, transparent, rgb(210 228 255 / .75), transparent); }
body.ui .tabbar { border-color: transparent; }
body.ui .tabbar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgb(175 208 255 / .5), rgb(110 160 255 / .08) 45%, rgb(90 140 255 / .18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
body.ui .side { box-shadow: inset -1px 0 0 rgb(120 170 255 / .16); border-right-color: transparent !important; }

/* ── 8. кольца уровня на аватарках ── */
body.ui .av.ring { --ring-w: 2px; border: var(--ring-w) solid transparent; padding: var(--ring-w);
  background: linear-gradient(#0B1530, #0B1530) padding-box, var(--ring) border-box; }
body.ui .av.ring.sm { --ring-w: 1.5px; }
body.ui .av.ring.lg { --ring-w: 3px; }
body.ui .av.ring img { border-radius: 50%; }
body.ui .av.ring:not(:has(img)) { padding: 0; background: linear-gradient(#1B2C55, #1B2C55) padding-box, var(--ring) border-box; }
.ring-silver  { --ring: linear-gradient(135deg, #F4F6FA, #8C97A8 35%, #E8EDF5 60%, #6F7A8C); }
.ring-gold    { --ring: linear-gradient(135deg, #FFF1C4, #C08A2E 35%, #F7E3A1 62%, #9E6A16); }
.ring-diamond { --ring: conic-gradient(from 200deg, #A5F3FC, #C4B5FD, #F9A8D4, #FDE68A, #A7F3D0, #A5F3FC); }
.ring-black   { --ring: linear-gradient(135deg, #FF8A96, #B3122B 35%, #FF5A6E 62%, #5C0614); }
body.ui .av.ring-diamond, body.ui .av.ring-black { box-shadow: 0 0 12px -3px color-mix(in srgb, var(--ring-glow, #C4B5FD) 70%, transparent); }
body.ui .av.ring-black { --ring-glow: #FF4D66; }

/* ── 9. нижние вкладки: подсветка переезжает ── */
.tab-pill { display: none; }
@media (max-width: 899px) {
  body.ui .tabbar .tab-pill { display: block; position: absolute; left: 0; top: 7px; bottom: 7px; width: 0; border-radius: 22px; opacity: 0; pointer-events: none;
    background: linear-gradient(180deg, rgb(120 170 255 / .26), rgb(70 120 255 / .14));
    box-shadow: inset 0 1px 0 rgb(200 222 255 / .35), 0 6px 18px -8px rgb(40 110 255 / .6);
    transition: transform .5s cubic-bezier(.34, 1.36, .5, 1), width .5s cubic-bezier(.34, 1.36, .5, 1), opacity .2s; }
  body.ui .tabbar.has-pill a.active::before { display: none; }
  body.ui .tabbar a { z-index: 1; }
}

/* ── 10. цветные значки операций ── */
body.ui .av.sys.g.cat, body.ui .av.sys.g.inv-fine { border: 0; border-radius: 12px; color: #fff;
  background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 4px 10px -4px var(--c2); }
body.ui .av.sys.g.cat svg, body.ui .av.sys.g.inv-fine svg { stroke-width: 1.9; }
.cat-bank   { --c1: #34D399; --c2: #0E8F63; }
.cat-rate   { --c1: #5AC8FA; --c2: #1E7FD8; }
.cat-vault  { --c1: #FFB340; --c2: #FF7A1A; }
.cat-invest { --c1: #A78BFA; --c2: #6D28D9; }
.cat-shop   { --c1: #FF7EB3; --c2: #D6336C; }
.cat-fin    { --c1: #FF9F6B; --c2: #E0482B; }
.cat-doc    { --c1: #8FB3FF; --c2: #3A5BD0; }
.cat-user   { --c1: #9AA4B8; --c2: #4B5568; }
.cat-qr     { --c1: #64D2FF; --c2: #0A84FF; }
body.ui .inv-fine { --c1: #FF6B6B; --c2: #C92A2A; }
body.ui .chips a.on { background: var(--ink); color: var(--bg); }

/* ═════════ v13: узор на фоне, заставка Swiss+, «потянуть, чтобы обновить» ═════════ */

/* ── синий волнистый узор из точек на чёрном фоне (стекло не трогаем) ── */
html[data-theme="dark"] body.ui::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("img/bg-waves-wide.jpg") center / cover no-repeat, url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCABFAG4DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDxmiiigAooooAUUu4DsPxptFO4Dt5pN1JRRcB2RS7QR1plGcUAKRikpwb1o2g9KAG0UpUikpALilxTlQmpY7dm+6pb6CqSuK5CqFjwKsfZGVASOtWoFgtvnm5YdEqKe981iT+QrTlSWpN23oVjAaT7O3pUonGasJcJt5AqUkx3ZntGV60yr8pjc8VWeL0pOI0yGilKkUlQMKUHFJRQBMjqfvCgordDUNKGIqriLZkjhXCgM3v0FRveTOMGQ49BxUBOaSm5voFhxYmkzSUVAxc0bj60lFADg5FPWX1qKincCzhXFMeEgZFMVytTCfPBqtGIrkEdaSp2UN0qEqRUtDEooopAFFFFABRRRQAUUUUAFFFFABRmiigB6vin8NUNODlelUmIkWB3+6pNI8JQ470qzv0LH6ZqQMG61SSYalWiiisxhRRRQAUUUUAFFFFABRRRQAUUUUAGaM5oooA//9k=") center / cover no-repeat, #000;
  mix-blend-mode: screen; opacity: .6; }
@media (max-aspect-ratio: 4/5) { html[data-theme="dark"] body.ui::after {
  background: url("img/bg-waves-tall.jpg") center / cover no-repeat, url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCABkADIDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDxmiiigAooooAKKKAKACinbTRRYBtFKy4pKACiilCk0AJinoBnml2habup7ATbl9qKgzRT5hWJ1AkwO9OltGQDjrUEb7GBq2LsNjd2qlZrUTuQpbMx6U9kWMH1qVrpQnAqnJIXPNDsgV2Ndsmm0UVmUFFFFABRmiigBc0lKBmnqmadgI6KmMQxwaiZSDzQ1YBKKKKQBTlXNIBSlvSmApIHSm7jSUUXAkWQipVVZuO9VqejlGyKafcViQ25Bop/2o+tFV7otStmkoorMoKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/9k=") center / cover no-repeat, #000; } }

/* ── заставка Swiss+ ── */
.splash { display: none; }
html.splashing .splash { display: grid; place-items: center; position: fixed; inset: 0; z-index: 300;
  background: #000 url("img/bg-waves-wide.jpg") center / cover no-repeat;
  animation: splashOut .55s cubic-bezier(.4, 0, .2, 1) 1.5s forwards; }
@media (max-aspect-ratio: 4/5) { html.splashing .splash { background-image: url("img/bg-waves-tall.jpg"); } }
html.splashing body { overflow: hidden; }
.splash-mark { display: grid; justify-items: center; gap: 18px; }
.sm-word { position: relative; font: 800 clamp(44px, 11vw, 72px) / 1 -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", sans-serif;
  letter-spacing: -0.05em; color: #fff; opacity: 0; transform: translateY(14px) scale(.97); filter: blur(8px);
  text-shadow: 0 0 28px rgb(60 130 255 / .55), 0 0 70px rgb(30 90 255 / .35);
  animation: smIn .8s cubic-bezier(.2, .8, .2, 1) .1s forwards; }
.sm-word b { color: #FF3B4E; font-weight: 800; text-shadow: 0 0 18px rgb(255 59 78 / .7); animation: smPlus 1.2s ease-in-out .6s both; }
.sm-word::after { content: attr(data-text); position: absolute; inset: 0; color: transparent; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / .95) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0; -webkit-background-clip: text; background-clip: text;
  animation: smSweep 1s ease-in-out .75s forwards; }
.sm-line { width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #4D8DFF, transparent);
  box-shadow: 0 0 14px #2F6BFF; animation: smLine .9s cubic-bezier(.2, .8, .2, 1) .45s forwards; }
@keyframes smIn { to { opacity: 1; transform: none; filter: none; } }
@keyframes smPlus { 0%, 100% { text-shadow: 0 0 10px rgb(255 59 78 / .4); } 50% { text-shadow: 0 0 26px rgb(255 59 78 / .95), 0 0 50px rgb(255 59 78 / .5); } }
@keyframes smSweep { to { background-position: -50% 0; } }
@keyframes smLine { to { width: min(180px, 40vw); } }
@keyframes splashOut { to { opacity: 0; visibility: hidden; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  html.splashing .splash { animation-duration: .3s; animation-delay: .6s; }
  .sm-word, .sm-line { animation-duration: .01s; }
}

/* ── потянуть вниз, чтобы обновить (телефон) ── */
.ptr { display: none; }
@media (max-width: 899px) and (pointer: coarse) {
  html[data-theme="dark"] { overscroll-behavior-y: none; }
  .ptr { display: grid; place-items: center; position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 8px); z-index: 60;
    width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; color: #CFE0FF; pointer-events: none;
    background: rgb(20 50 130 / .55); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
    box-shadow: inset 0 1px 0 rgb(180 210 255 / .35), 0 8px 24px -8px rgb(20 80 255 / .7);
    opacity: 0; transform: translateY(-60px); }
  .ptr svg { width: 20px; height: 20px; transform: rotate(var(--ptr-rot, 0deg)); }
  .ptr.ptr-anim { transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
  .ptr.ready { color: #fff; background: rgb(40 100 255 / .75); }
  .ptr.loading svg { animation: ptrSpin .7s linear infinite; }
  body.ui main.page.ptr-move { transition: none; }
  body.ui main.page.ptr-back { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes ptrSpin { to { transform: rotate(360deg); } }
/* под балансом узор мягко приглушён, чтобы цифры читались */
body.ui .hh-bal, body.ui .page-head, body.ui main.page > h1 { position: relative; isolation: isolate; }
body.ui .hh-bal::before { content: ""; position: absolute; inset: -40px -16px -30px -16px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 35% 50%, rgb(0 0 0 / .78), rgb(0 0 0 / .4) 60%, transparent 85%); }

/* ── логотип банка (герб) ── */
.brand-badge { width: 34px; height: 34px; flex: none; display: block;
  filter: drop-shadow(0 0 8px rgb(90 150 255 / .35)); }
body.ui .side-brand { display: flex; align-items: center; gap: 10px; }
@media (max-width: 899px) { body.ui .topbar .brand { display: inline-flex; align-items: center; gap: 9px; } }
@media (max-width: 899px) { body.ui .topbar .brand .brand-badge { width: 30px; height: 30px; } }
.sm-badge { width: clamp(104px, 28vw, 140px); height: auto; opacity: 0; transform: scale(.82);
  filter: drop-shadow(0 0 0 rgb(230 30 50 / 0)); animation: smBadge 1s cubic-bezier(.2, .8, .2, 1) .05s forwards; }
@keyframes smBadge {
  60% { opacity: 1; transform: scale(1.03); filter: drop-shadow(0 0 26px rgb(120 175 255 / .8)); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 0 16px rgb(80 140 255 / .5)); } }
html.splashing .splash { animation-delay: 1.75s; }
.sm-word { animation-delay: .35s; }
.sm-word::after { animation-delay: 1s; }
.sm-line { animation-delay: .7s; }
body.ui .side-brand img.brand-badge, body.ui .topbar .brand img.brand-badge { height: 34px; width: 34px; } @media (max-width: 899px) { body.ui .topbar .brand img.brand-badge { width: 30px; height: 30px; } }

html:has(body.ui), body.ui { overflow-x: clip; }

/* плавное появление панелей при прокрутке */
body.ui .sr { opacity: 0; transform: translateY(28px) scale(.985);
  transition: opacity .85s cubic-bezier(.22,.8,.24,1), transform .95s cubic-bezier(.22,.8,.24,1) !important; }
body.ui .sr.sr-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { body.ui .sr { opacity: 1; transform: none; } }


/* ═════════ v15: строгие значки меню, «Ещё» на телефоне, правки ═════════ */
/* значки в меню: строгое синее стекло вместо цветных плашек */
body.ui .av.sys.g.mono { border-radius: 12px; color: #DCE7FF; border: 1px solid rgb(140 185 255 / .22);
  background: linear-gradient(160deg, rgb(70 120 240 / .32), rgb(20 45 130 / .38));
  box-shadow: inset 0 1px 0 rgb(190 215 255 / .22), 0 6px 16px -8px rgb(20 70 220 / .6); }
body.ui .av.sys.g.mono svg { width: 21px; height: 21px; stroke-width: 1.7; }
body.ui .side-nav a svg, body.ui .tabbar a svg { stroke-width: 1.7; }

/* меню выбора языка не прячется под соседние панели */
.dd-host { z-index: 60 !important; }

/* «Ещё» на телефоне */
.more-sheet { position: fixed; inset: 0; z-index: 29; }
.more-sheet[hidden] { display: none; }
.ms-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .45); opacity: 0; transition: opacity .3s ease;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ms-panel { position: absolute; left: 10px; right: 10px; bottom: calc(86px + env(safe-area-inset-bottom)); padding: 10px 14px 18px;
  border-radius: 28px; background: rgb(12 28 74 / .82); border: 1px solid rgb(140 185 255 / .22);
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  box-shadow: inset 0 1px 0 rgb(190 215 255 / .2), 0 30px 70px -20px rgb(0 0 0 / .85);
  transform: translateY(24px) scale(.96); opacity: 0; transform-origin: 85% 100%;
  transition: transform .42s cubic-bezier(.32, 1.3, .5, 1), opacity .22s ease; }
.more-sheet.open .ms-backdrop { opacity: 1; }
.more-sheet.open .ms-panel { transform: none; opacity: 1; }
.ms-grip { display: block; width: 38px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: rgb(200 220 255 / .3); }
.ms-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; }
.ms-head b { font-size: 19px; letter-spacing: -0.02em; color: #F2F6FF; }
.ms-head a { font-size: 13.5px; font-weight: 600; color: #8FC0FF; }
.ms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ms-item { display: grid; justify-items: center; gap: 10px; padding: 18px 6px 15px; border-radius: 20px; color: #E8EFFF; text-align: center;
  background: rgb(255 255 255 / .04); border: 1px solid rgb(140 185 255 / .1);
  opacity: 0; transform: translateY(14px) scale(.92);
  transition: opacity .35s ease, transform .5s cubic-bezier(.32, 1.4, .5, 1), background-color .2s; }
.more-sheet.open .ms-item { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i) * 35ms); }
.ms-item:active { background: rgb(120 170 255 / .16); transform: scale(.96); transition-delay: 0s; }
.ms-ic { position: relative; width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; color: #DCE7FF;
  border: 1px solid rgb(140 185 255 / .24); background: linear-gradient(160deg, rgb(70 120 240 / .38), rgb(20 45 130 / .42));
  box-shadow: inset 0 1px 0 rgb(190 215 255 / .25), 0 8px 18px -8px rgb(20 70 220 / .7); }
.ms-ic svg { width: 26px; height: 26px; }
.ms-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #FF3B4E;
  color: #fff; font: 700 10.5px/18px var(--font, sans-serif); font-style: normal; }
.ms-label { font-size: 13.5px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
body.ui .tabbar a.ms-on { color: var(--focus); }
body.ui .tabbar a.ms-on svg { transform: rotate(45deg); transition: transform .35s cubic-bezier(.32,1.3,.5,1); }
body.ui .tabbar a svg { transition: transform .35s cubic-bezier(.32,1.3,.5,1); }
body.ms-open { overflow: hidden; }


body.ui .tabbar { z-index: 30; }

/* «Ещё» на ПК: кнопка в боковом меню и всплывающая панель рядом с ним */
body.ui .side-more { display: flex; align-items: center; gap: 12px; width: 100%; height: 46px; margin-top: 8px; padding: 0 12px; border-radius: 13px; cursor: pointer;
  font: 600 15px var(--font); color: #EAF1FF; text-align: left; border: 1px solid rgb(140 185 255 / .22);
  background: linear-gradient(160deg, rgb(70 120 240 / .28), rgb(20 45 130 / .32));
  box-shadow: inset 0 1px 0 rgb(190 215 255 / .18), 0 8px 20px -12px rgb(20 70 220 / .7);
  transition: background-color .2s, border-color .2s, transform .15s; }
body.ui .side-more svg { width: 20px; height: 20px; color: #BFD5FF; flex: none; }
body.ui .side-more > span:first-of-type { flex: 1; }
body.ui .side-more .sm-chev { display: grid; width: 16px; height: 16px; opacity: .7; transition: transform .3s cubic-bezier(.32,1.3,.5,1); }
body.ui .side-more .sm-chev svg { width: 16px; height: 16px; }
body.ui .side-more:hover { border-color: rgb(160 200 255 / .4); background: linear-gradient(160deg, rgb(80 130 250 / .38), rgb(25 55 150 / .42)); }
body.ui .side-more:active { transform: scale(.98); }
body.ui .side-more.active { border-color: rgb(160 200 255 / .45); }
body.ui .side-more.ms-on .sm-chev { transform: rotate(90deg); }
body.ui .side-more.ms-on > svg:first-child { transform: rotate(45deg); transition: transform .35s cubic-bezier(.32,1.3,.5,1); }
body.ui .side-more > svg:first-child { transition: transform .35s cubic-bezier(.32,1.3,.5,1); }
@media (min-width: 900px) {
  .more-sheet { z-index: 70; }
  .ms-panel { left: calc(var(--side-w, 260px) + 16px); right: auto; bottom: auto; top: 120px; width: 560px; padding: 18px 20px 22px;
    transform: translateX(-16px) scale(.97); transform-origin: 0 30%; }
  .ms-grip { display: none; }
  .ms-backdrop { left: var(--side-w, 260px); background: rgb(0 0 0 / .35); }
  .ms-grid { gap: 12px; }
  .ms-item { padding: 20px 8px 16px; cursor: pointer; }
  .ms-item:hover { background: rgb(120 170 255 / .12); border-color: rgb(160 200 255 / .28); transform: translateY(-2px); transition-delay: 0s; }
  .ms-ic { width: 60px; height: 60px; border-radius: 18px; }
  .ms-ic svg { width: 28px; height: 28px; }
  .ms-label { font-size: 14px; }
}
body.ui .side-more > span:first-of-type { display: grid; line-height: 1.15; }
body.ui .side-more small { font-size: 11.5px; font-weight: 600; color: #8FC0FF; letter-spacing: 0; }
body.ui .side-more.active { height: 52px; background: linear-gradient(160deg, rgb(80 130 250 / .42), rgb(25 55 150 / .46)); }

/* ── резервные копии ── */
body.ui .bk-remind { display: flex; gap: 12px; align-items: flex-start; }
body.ui .bk-remind svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
body.ui .bk-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 18px; }
@media (max-width: 899px) { body.ui .bk-top { grid-template-columns: 1fr; } }
body.ui .bk-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 16px; }
body.ui .bk-h svg { width: 22px; height: 22px; color: #9CC2FF; }
body.ui .bk-create .field { margin-bottom: 12px; }
body.ui .bk-row { padding: 14px 16px; border-top: 1px solid var(--line); }
body.ui .bk-row:first-child { border-top: 0; }
body.ui .bk-row.new { background: rgb(90 150 255 / .08); }
body.ui .bk-main { display: flex; gap: 12px; align-items: flex-start; }
body.ui .bk-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #DCE7FF;
  border: 1px solid rgb(140 185 255 / .22); background: linear-gradient(160deg, rgb(70 120 240 / .32), rgb(20 45 130 / .38)); }
body.ui .bk-ic.k-pre { background: linear-gradient(160deg, rgb(255 170 80 / .3), rgb(150 80 20 / .35)); border-color: rgb(255 190 120 / .3); }
body.ui .bk-ic svg { width: 20px; height: 20px; }
body.ui .bk-row .t1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; }
body.ui .bk-bal { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
body.ui .bk-bal span { font-size: 12.5px; padding: 3px 9px; border-radius: 980px; background: var(--fill); color: var(--ink-2); }
body.ui .bk-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0 52px; }
body.ui .bk-actions form { display: inline; }
body.ui .bk-box { margin-left: 52px; border-radius: 14px; background: rgb(255 255 255 / .04); border: 1px solid var(--line); }
body.ui .bk-box.open { border-color: var(--line-strong); }
body.ui .danger-box.open { border-color: rgb(255 90 100 / .35); background: rgb(255 60 80 / .06); }
body.ui .btn.danger-solid { background: #E5484D; border-color: #E5484D; color: #fff; }
body.ui .btn.danger-solid:hover { background: #F0555B; }
body.ui .bk-upload .form-grid { margin-bottom: 12px; }
@media (max-width: 600px) { body.ui .bk-actions, body.ui .bk-box { margin-left: 0; } }
body.ui .bk-pw { margin-top: 18px; }
body.ui .bk-pw-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
body.ui .bk-pw-head b { font-size: 16px; }
body.ui .bk-lock { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; color: #fff; }
body.ui .bk-pw.off .bk-lock { background: linear-gradient(160deg, rgb(255 180 80 / .45), rgb(170 90 20 / .5)); border: 1px solid rgb(255 200 130 / .35); }
body.ui .bk-pw.on .bk-lock { background: linear-gradient(160deg, rgb(70 210 140 / .45), rgb(20 120 80 / .5)); border: 1px solid rgb(130 240 180 / .35); }
body.ui .bk-lock svg { width: 22px; height: 22px; }
body.ui .bk-pw p.small { margin: 0 0 12px; line-height: 1.5; }
body.ui .bk-pw p.small b { color: var(--ink-2); font-weight: 600; }
body.ui .tag.bk-enc { display: inline-flex; align-items: center; gap: 3px; background: rgb(48 209 88 / .14); color: #6BE39A; }
body.ui .tag.bk-enc svg { width: 11px; height: 11px; }
body.ui .pw-meter { height: 4px; border-radius: 2px; background: var(--fill); overflow: hidden; margin-top: 4px; }
body.ui .pw-meter i { display: block; height: 100%; width: 0; border-radius: 2px; transition: width .25s, background-color .25s; }
body.ui .payee-card { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow); border-radius: 16px; }

/* ═════════ v12: шесть уровней карт ═════════
   Bronze — без анимации. Silver — звёзды вспыхивают по очереди. Platinum — все звёзды мягко сияют.
   Gold — сияют звёзды и имя владельца. Diamond — звёзды, имя и бегущий свет по краю.
   Black — плавный градиент (шампань → роза → лаванда) на звёздах, имени и крае.
   Всё приглушённо: тонкие блики, медленные циклы, никаких радуг и мигания. */
@property --edge-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* общее: бренд без перелива, имя владельца — основа для блика */
.bcard[class*="t-"] .bc-name { background: none; color: inherit; -webkit-text-fill-color: currentColor; animation: none; filter: none; }
.bcard .bc-holder { display: inline-block; position: relative; }
.bcard .bc-edge { position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none; z-index: 3;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: edgeSpin 7s linear infinite; }
@keyframes edgeSpin { to { --edge-a: 360deg; } }
@keyframes holderSheen { 0%, 55% { background-position: 120% 0; } 100% { background-position: -40% 0; } }

/* Bronze — тёплая шлифованная бронза, звёзды гравировкой, всё статично */
.bcard.t-bronze .face { color: #2E1C10;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .045) 0 1px, rgb(0 0 0 / .03) 1px 2px),
    radial-gradient(120% 90% at 10% 0%, rgb(255 230 205 / .35), transparent 55%),
    linear-gradient(125deg, #D9A47C 0%, #B47D55 38%, #CD9670 58%, #8E5C3A 100%);
  box-shadow: inset 0 1px 0 rgb(255 236 220 / .55), inset 0 0 0 1px rgb(60 30 10 / .12), 0 20px 40px -22px rgb(70 35 10 / .6); }
.bcard.t-bronze .face::after { background: none; }
.bcard.t-bronze .eu-stars g { fill: url(#st-bronze); }
.bcard.t-bronze .eu-stars { filter: drop-shadow(0 1px 0 rgb(255 235 215 / .35)) drop-shadow(0 -1px 0 rgb(70 35 10 / .25)); opacity: 1; }
.bcard.t-bronze .eu-stars .st { animation: none; }
.bcard.t-bronze .chip { background: linear-gradient(135deg, #F3D2B4 0%, #C08A60 50%, #E6BC97 75%, #8F5D3B 100%); }
.bcard.t-bronze .rear .stripe { background: #2E1C10; }
.bcard.t-bronze .bc-tier { opacity: .7; }

/* Silver — сатиновое серебро, звёзды вспыхивают по одной */
.bcard.t-silver .face { color: #17191C;
  background: repeating-linear-gradient(0deg, rgb(255 255 255 / .06) 0 1px, rgb(0 0 0 / .02) 1px 2px),
    linear-gradient(125deg, #E4E7EB 0%, #BFC4CB 40%, #D8DCE1 58%, #A3A9B1 100%); }
.bcard.t-silver .eu-stars g { fill: #7A818B; }
.bcard.t-silver .eu-stars .st { animation: twSilver2 7.2s ease-in-out infinite; animation-delay: calc(var(--i) * .6s); }
@keyframes twSilver2 {
  0%, 9%, 100% { fill: #7A818B; filter: none; }
  4% { fill: #FFFFFF; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgb(235 242 255 / .9)); }
}

/* Platinum — светлый холодный металл, все звёзды сияют вместе */
.bcard.t-platinum .face { color: #1B2028;
  background: repeating-linear-gradient(135deg, rgb(255 255 255 / .05) 0 1px, rgb(0 0 0 / .015) 1px 3px),
    radial-gradient(120% 90% at 0% 0%, rgb(255 255 255 / .7), transparent 55%),
    linear-gradient(125deg, #F3F5F8 0%, #D5DAE1 36%, #EEF1F5 56%, #B8C0CB 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px rgb(30 40 60 / .07), 0 20px 40px -22px rgb(30 45 80 / .5); }
.bcard.t-platinum .face::after { background: none; }
.bcard.t-platinum .eu-stars g { fill: url(#st-plat); }
.bcard.t-platinum .eu-stars { opacity: 1; filter: drop-shadow(0 1px 0 rgb(255 255 255 / .6)); }
.bcard.t-platinum .eu-stars .st { animation: twPlat 3.8s ease-in-out infinite; }
@keyframes twPlat {
  0%, 100% { filter: drop-shadow(0 0 0 rgb(255 255 255 / 0)); opacity: .82; }
  50% { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px rgb(225 235 250 / .95)); opacity: 1; }
}
.bcard.t-platinum .chip { background: linear-gradient(135deg, #FAFBFC 0%, #C3CAD3 50%, #EDF0F4 75%, #9AA3AF 100%); }
.bcard.t-platinum .rear .stripe { background: #1B2028; }

/* Gold — шампанское золото: звёзды и имя владельца */
.bcard.t-gold .eu-stars .st { animation: twGold 5s ease-in-out infinite; animation-delay: calc(var(--i) * .42s); }
.bcard.t-gold .bc-holder {
  background: linear-gradient(100deg, #3A2C12 0 40%, #FFF6D6 50%, #3A2C12 60% 100%); background-size: 250% 100%; background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: holderSheen 6s ease-in-out infinite; }

/* Diamond — жемчужный лёд: звёзды искрятся, имя с ледяным бликом, по краю бежит свет */
.bcard.t-diamond .face { color: #182033;
  background:
    repeating-conic-gradient(from 20deg at 78% 35%, rgb(255 255 255 / .07) 0deg 6deg, rgb(255 255 255 / 0) 6deg 18deg),
    radial-gradient(120% 90% at 0% 0%, rgb(255 255 255 / .85), transparent 55%),
    linear-gradient(135deg, #F8FBFF 0%, #DFE8F4 38%, #EEF1FA 60%, #D3DDEB 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 0 0 1px rgb(30 50 90 / .07), 0 22px 44px -22px rgb(60 100 170 / .55); }
.bcard.t-diamond .face::after { background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .28) 46%, transparent 58%);
  background-size: 260% 100%; animation: sheen 9s ease-in-out infinite; }
.bcard.t-diamond .eu-stars g { fill: url(#st-ice); stroke: rgb(90 120 175 / .35); stroke-width: .6; }
.bcard.t-diamond .eu-stars { filter: drop-shadow(0 1px 1px rgb(40 60 100 / .18)); }
.bcard.t-diamond .eu-stars .st { animation: twIce 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
@keyframes twIce {
  0%, 70%, 100% { filter: none; opacity: .9; }
  80% { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgb(190 220 255 / .95)); opacity: 1; }
}
.bcard.t-diamond .bc-holder {
  background: linear-gradient(100deg, #1B2640 0 40%, #FFFFFF 48%, #A9CCFF 52%, #1B2640 60% 100%); background-size: 250% 100%; background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: holderSheen 6.5s ease-in-out infinite; }
.bcard.t-diamond .bc-edge {
  background: conic-gradient(from var(--edge-a), transparent 0deg, rgb(255 255 255 / .0) 20deg, rgb(255 255 255 / .95) 50deg, rgb(170 205 255 / .7) 70deg, transparent 100deg, transparent 200deg, rgb(255 255 255 / .6) 235deg, transparent 265deg);
  filter: drop-shadow(0 0 2px rgb(200 225 255 / .9)); }

/* Black — глубокий чёрный: градиент шампань → роза → лаванда на звёздах, имени и крае */
.bcard.t-black .face { color: #ECECEE;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .014) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 0% 0%, rgb(255 255 255 / .07), transparent 50%),
    radial-gradient(90% 80% at 100% 100%, rgb(120 110 255 / .06), transparent 60%),
    #0B0B0D;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), inset 0 0 0 1px rgb(255 255 255 / .05), 0 24px 50px -24px rgb(160 120 255 / .35); }
.bcard.t-black .face::after { background: none; }
.bcard.t-black .eu-stars g { fill: url(#st-aurora); stroke: none; }
.bcard.t-black .eu-stars { opacity: 1; }
.bcard.t-black .eu-stars .st { animation: twAurora 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * .46s); }
@keyframes twAurora {
  0%, 100% { filter: drop-shadow(0 0 1px rgb(243 221 176 / .25)); opacity: .86; }
  50% { filter: drop-shadow(0 0 3px rgb(242 175 194 / .6)) drop-shadow(0 0 8px rgb(175 192 255 / .35)); opacity: 1; }
}
.bcard.t-black .bc-tier { color: #E9D6AE; opacity: .9; }
.bcard.t-black .bc-holder {
  background: linear-gradient(90deg, #F3DDB0, #F2AFC2, #AFC0FF, #F3DDB0); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: auroraText 12s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px rgb(242 175 194 / .18)); }
@keyframes auroraText { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.bcard.t-black .bc-edge {
  background: conic-gradient(from var(--edge-a), rgb(243 221 176 / .9), rgb(242 175 194 / .9), rgb(175 192 255 / .9), rgb(243 221 176 / .15) 50%, rgb(243 221 176 / .9));
  opacity: .75; animation-duration: 10s; filter: drop-shadow(0 0 2.5px rgb(242 175 194 / .45)); }
.bcard.t-black .chip { background: linear-gradient(135deg, #DCD6CC 0%, #8E887E 45%, #C2BBAF 70%, #5F5A52 100%); }

@media (prefers-reduced-motion: reduce) {
  .bcard .bc-edge, .bcard .bc-holder { animation: none !important; }
}

/* значки уровней */
.tier-chip.t-bronze { background: linear-gradient(120deg, #E9BE9A, #A86F47); color: #2E1C10; }
.tier-chip.t-silver { background: linear-gradient(120deg, #E8EBEF, #A8AEB6); color: #17191C; }
.tier-chip.t-platinum { background: linear-gradient(120deg, #FAFBFD, #C5CCD6); color: #1B2028; box-shadow: inset 0 0 0 1px rgb(30 40 60 / .08); }
.tier-chip.t-gold { background: linear-gradient(120deg, #F5EAD0, #C9A868); color: #2A2112; }
.tier-chip.t-diamond { background: linear-gradient(120deg, #FFFFFF, #D8E6F8); color: #182033; box-shadow: inset 0 0 0 1px rgb(120 160 220 / .35); }
.tier-chip.t-black { background: linear-gradient(#0E0E10, #0E0E10) padding-box, linear-gradient(90deg, #F3DDB0, #F2AFC2, #AFC0FF) border-box;
  border: 1px solid transparent; color: #EFD9B4; box-shadow: none; }

/* кольца на аватарках */
.ring-platinum { --ring: linear-gradient(135deg, #FFFFFF, #AAB3C0 35%, #EEF1F5 60%, #8C96A4); }
.ring-diamond  { --ring: linear-gradient(135deg, #FFFFFF, #BFD6F5 35%, #F4F8FF 60%, #8FAAD6); }
.ring-black    { --ring: conic-gradient(from 210deg, #F3DDB0, #F2AFC2, #AFC0FF, #F3DDB0); }
body.ui .av.ring-diamond { --ring-glow: #BFD6F5; }
body.ui .av.ring-black { --ring-glow: #F2AFC2; }
/* v12 доводка: серебро темнее платины, у алмаза заметнее звёзды и край */
.bcard.t-silver .face { background: repeating-linear-gradient(0deg, rgb(255 255 255 / .05) 0 1px, rgb(0 0 0 / .025) 1px 2px),
    linear-gradient(125deg, #D3D7DC 0%, #A7ADB5 40%, #C6CBD1 58%, #8B9199 100%); }
.bcard.t-silver .eu-stars g { fill: #5F6670; }
.bcard.t-diamond .eu-stars g { stroke: rgb(70 105 170 / .55); stroke-width: .7; }
.bcard.t-diamond .bc-edge { padding: 1.5px;
  background: conic-gradient(from var(--edge-a), transparent 0deg, rgb(150 190 250 / .0) 15deg, rgb(120 165 240 / .95) 45deg, #FFFFFF 58deg, rgb(150 190 250 / .8) 72deg, transparent 105deg, transparent 195deg, rgb(120 165 240 / .7) 230deg, transparent 262deg);
  filter: drop-shadow(0 0 2px rgb(120 170 245 / .9)); }
/* акцент интерфейса по новым уровням (тёмная тема) */
html[data-theme="dark"] body.ui.tier-bronze   { --focus: #D9A07A; --blue-soft: rgb(217 160 122 / .16); }
html[data-theme="dark"] body.ui.tier-platinum { --focus: #D3DBE6; --blue-soft: rgb(211 219 230 / .16); }
html[data-theme="dark"] body.ui.tier-diamond  { --focus: #A9C8F5; --blue-soft: rgb(169 200 245 / .16); }
html[data-theme="dark"] body.ui.tier-black    { --focus: #F2AFC2; --blue-soft: rgb(242 175 194 / .14); }

/* ═════════ v13: цветные карты ═════════
   Bronze — жёлтая, без анимации. Silver — красная, звёзды едва дышат. Platinum — зелёная, звёзды светятся ярче.
   Gold — синяя: сияют звёзды и имя. Diamond — фиолетовая: звёзды, имя и Swiss+. Black — градиент на звёздах, имени и крае.
   Глубокие матовые цвета, мелкое зерно, мягкий свет сверху слева — без глянца и неона. */
.bcard .face { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.bcard.t-bronze .face, .bcard.t-silver .face, .bcard.t-platinum .face, .bcard.t-gold .face, .bcard.t-diamond .face {
  background-image: var(--grain),
    radial-gradient(130% 110% at 0% 0%, rgb(255 255 255 / var(--hl, .16)), transparent 52%),
    radial-gradient(100% 90% at 100% 100%, rgb(0 0 0 / var(--sh, .32)), transparent 62%),
    linear-gradient(135deg, var(--c1), var(--c2));
  background-size: 160px 160px, auto, auto, auto; background-blend-mode: soft-light, normal, normal, normal;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), inset 0 0 0 1px rgb(255 255 255 / .05), 0 22px 44px -22px var(--glow, rgb(0 0 0 / .6)); }
.bcard.t-bronze .face::after, .bcard.t-silver .face::after, .bcard.t-platinum .face::after,
.bcard.t-gold .face::after, .bcard.t-diamond .face::after { background: none; animation: none; }
.bcard .bc-brand .bc-name { font-weight: 800; letter-spacing: -0.045em; }
.bcard .bc-brand .bc-tier { font-weight: 700; letter-spacing: .3em; }
.bcard .eu-stars g { stroke: none; }
.bcard .bc-holder { font-weight: 600; }

/* 1 · Bronze → жёлтая: насыщенный горчичный, чёрный текст, звёзды тиснением. Статика. */
.bcard.t-bronze .face { --c1: #F6C445; --c2: #D99A06; --hl: .28; --sh: .22; --glow: rgb(217 154 6 / .55); color: #17120A; }
.bcard.t-bronze .eu-stars g { fill: url(#st-y); }
.bcard.t-bronze .eu-stars { opacity: .82; filter: drop-shadow(0 1px 0 rgb(255 240 190 / .55)); }
.bcard.t-bronze .eu-stars .st { animation: none; }
.bcard.t-bronze .chip { background: linear-gradient(135deg, #2A2214 0%, #4A3D24 50%, #2A2214 100%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .4); }
.bcard.t-bronze .chip::before, .bcard.t-bronze .chip::after { border-color: rgb(255 220 120 / .25); }
.bcard.t-bronze .bc-tier { opacity: .65; }
.bcard.t-bronze .rear .stripe { background: #17120A; }

/* 2 · Silver → красная: глубокий кармин, звёзды едва заметно дышат */
.bcard.t-silver .face { --c1: #D3122F; --c2: #6E0716; --glow: rgb(200 16 46 / .5); color: #FFF4F5; }
.bcard.t-silver .eu-stars g { fill: url(#st-r); }
.bcard.t-silver .eu-stars { opacity: 1; filter: none; }
.bcard.t-silver .eu-stars .st { animation: brRed 6s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes brRed { 0%, 100% { opacity: .72; filter: none; } 50% { opacity: .92; filter: drop-shadow(0 0 2px rgb(255 200 210 / .45)); } }
.bcard.t-silver .chip { background: linear-gradient(135deg, #F2E2C4 0%, #C9A86A 50%, #EBD7AE 75%, #9C7A3C 100%); }
.bcard.t-silver .rear .stripe { background: #3A040C; }

/* 3 · Platinum → зелёная: тёмный изумруд, звёзды светятся заметнее */
.bcard.t-platinum .face { --c1: #12915E; --c2: #053A26; --glow: rgb(18 145 94 / .5); color: #EFFBF5; }
.bcard.t-platinum .eu-stars g { fill: url(#st-g); }
.bcard.t-platinum .eu-stars { opacity: 1; filter: none; }
.bcard.t-platinum .eu-stars .st { animation: brGreen 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * .35s); }
@keyframes brGreen { 0%, 100% { opacity: .82; filter: drop-shadow(0 0 1px rgb(200 255 225 / .4)); }
  50% { opacity: 1; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgb(110 255 180 / .6)); } }
.bcard.t-platinum .chip { background: linear-gradient(135deg, #F2E2C4 0%, #C9A86A 50%, #EBD7AE 75%, #9C7A3C 100%); }
.bcard.t-platinum .rear .stripe { background: #032417; }

/* 4 · Gold → синяя: кобальт, сияют звёзды и имя владельца */
.bcard.t-gold .face { --c1: #2563EB; --c2: #0A1A52; --glow: rgb(37 99 235 / .55); color: #F2F6FF; }
.bcard.t-gold .eu-stars g { fill: url(#st-b); }
.bcard.t-gold .eu-stars { opacity: 1; filter: none; }
.bcard.t-gold .eu-stars .st { animation: brBlue 4.4s ease-in-out infinite; animation-delay: calc(var(--i) * .37s); }
@keyframes brBlue { 0%, 100% { opacity: .85; filter: drop-shadow(0 0 1px rgb(200 220 255 / .5)); }
  50% { opacity: 1; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px rgb(120 170 255 / .8)); } }
.bcard.t-gold .bc-holder {
  background: linear-gradient(100deg, #F2F6FF 0 40%, #FFFFFF 47%, #9CC0FF 53%, #F2F6FF 60% 100%); background-size: 250% 100%; background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: holderSheen 5.5s ease-in-out infinite; filter: drop-shadow(0 0 4px rgb(140 180 255 / .35)); }
.bcard.t-gold .chip { background: linear-gradient(135deg, #F4F6FA 0%, #B9C3D1 50%, #E6EAF1 75%, #8E9AAD 100%); }
.bcard.t-gold .rear .stripe { background: #06103A; }

/* 5 · Diamond → фиолетовая: глубокий аметист, сияют звёзды, имя и Swiss+ */
.bcard.t-diamond .face { --c1: #7C3AED; --c2: #250B52; --glow: rgb(124 58 237 / .55); color: #F7F2FF; }
.bcard.t-diamond .eu-stars g { fill: url(#st-v); }
.bcard.t-diamond .eu-stars { opacity: 1; filter: none; }
.bcard.t-diamond .eu-stars .st { animation: brViolet 4s ease-in-out infinite; animation-delay: calc(var(--i) * .33s); }
@keyframes brViolet { 0%, 100% { opacity: .86; filter: drop-shadow(0 0 1px rgb(230 210 255 / .5)); }
  50% { opacity: 1; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px rgb(190 150 255 / .85)); } }
.bcard.t-diamond .bc-holder, .bcard.t-diamond .bc-brand .bc-name {
  background: linear-gradient(100deg, #F7F2FF 0 40%, #FFFFFF 47%, #D7B8FF 53%, #F7F2FF 60% 100%); background-size: 250% 100%; background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: holderSheen 5.5s ease-in-out infinite; filter: drop-shadow(0 0 5px rgb(190 150 255 / .4)); }
.bcard.t-diamond .bc-brand .bc-name span { opacity: 1; }
.bcard.t-diamond .bc-brand .bc-name { animation-delay: 1.2s; }
.bcard.t-diamond .chip { background: linear-gradient(135deg, #F4F6FA 0%, #B9C3D1 50%, #E6EAF1 75%, #8E9AAD 100%); }
.bcard.t-diamond .rear .stripe { background: #1A073A; }

/* значки, кольца, акцент */
.tier-chip.t-bronze   { background: linear-gradient(120deg, #F6C445, #D99A06); color: #17120A; box-shadow: none; }
.tier-chip.t-silver   { background: linear-gradient(120deg, #E0233F, #8A0A1D); color: #FFF4F5; }
.tier-chip.t-platinum { background: linear-gradient(120deg, #1AA56C, #075A3A); color: #EFFBF5; box-shadow: none; }
.tier-chip.t-gold     { background: linear-gradient(120deg, #3B76F0, #0F2A7A); color: #F2F6FF; }
.tier-chip.t-diamond  { background: linear-gradient(120deg, #8B4DF2, #3A1478); color: #F7F2FF; box-shadow: none; }
.ring-silver   { --ring: linear-gradient(135deg, #FF6B80, #B00C27 50%, #6E0716); }
.ring-platinum { --ring: linear-gradient(135deg, #6EF0B4, #12915E 50%, #053A26); }
.ring-gold     { --ring: linear-gradient(135deg, #9CC0FF, #2563EB 50%, #0A1A52); }
.ring-diamond  { --ring: linear-gradient(135deg, #D7B8FF, #7C3AED 50%, #250B52); }
body.ui .av.ring-diamond { --ring-glow: #A78BFA; }
html[data-theme="dark"] body.ui.tier-bronze   { --focus: #F6C445; --blue-soft: rgb(246 196 69 / .14); }
html[data-theme="dark"] body.ui.tier-silver   { --focus: #FF5C73; --blue-soft: rgb(255 92 115 / .14); }
html[data-theme="dark"] body.ui.tier-platinum { --focus: #3DD597; --blue-soft: rgb(61 213 151 / .14); }
html[data-theme="dark"] body.ui.tier-gold     { --focus: #6E9CFF; --blue-soft: rgb(110 156 255 / .16); }
html[data-theme="dark"] body.ui.tier-diamond  { --focus: #B18CFF; --blue-soft: rgb(177 140 255 / .16); }

/* ═════════ v14: щит Swiss+ в центре карты, звёзды компактнее ═════════ */
.bcard .face.front .eu-stars { right: 6%; top: 15%; width: 29%; }
.bcard .bc-shield { position: absolute; left: 50%; top: 21%; width: 21%; height: auto; aspect-ratio: 1; transform: translateX(-50%);
  pointer-events: none; z-index: 1; overflow: visible; }
.bcard .bc-shield .sh-body { fill: var(--sh-fill, rgb(0 0 0 / .2)); stroke: var(--sh-stroke, transparent); stroke-width: 22; stroke-linejoin: miter; }
.bcard .bc-shield .sh-cross { fill: var(--sh-cross, rgb(255 255 255 / .2)); }
/* жёлтая: щит тиснением, тёмный крест */
.bcard.t-bronze { --sh-fill: rgb(120 80 0 / .08); --sh-stroke: rgb(40 28 0 / .78); --sh-cross: rgb(40 28 0 / .82); }
/* цветные: щит на тон темнее, крест на тон светлее */
.bcard.t-silver   { --sh-fill: rgb(60 0 10 / .32);  --sh-cross: rgb(255 120 140 / .30); }
.bcard.t-platinum { --sh-fill: rgb(0 40 22 / .38);  --sh-cross: rgb(120 230 170 / .30); }
.bcard.t-gold     { --sh-fill: rgb(5 15 70 / .42);  --sh-cross: rgb(120 165 255 / .34); }
.bcard.t-diamond  { --sh-fill: rgb(25 5 60 / .42);  --sh-cross: rgb(190 150 255 / .36); }
/* чёрная: белый щит с мягким свечением */
.bcard.t-black    { --sh-fill: #0B0B0D; --sh-stroke: #FFFFFF; --sh-cross: #FFFFFF; }
.bcard.t-black .bc-shield { filter: drop-shadow(0 0 3px rgb(255 255 255 / .55)) drop-shadow(0 0 10px rgb(242 175 194 / .25)); animation: shieldGlow 6s ease-in-out infinite; }
@keyframes shieldGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgb(255 255 255 / .45)) drop-shadow(0 0 8px rgb(242 175 194 / .18)); }
  50% { filter: drop-shadow(0 0 4px rgb(255 255 255 / .7)) drop-shadow(0 0 14px rgb(175 192 255 / .3)); }
}
/* у цветных карт — гладкий матовый градиент, зерно тоньше */
.bcard.t-bronze .face, .bcard.t-silver .face, .bcard.t-platinum .face, .bcard.t-gold .face, .bcard.t-diamond .face { background-size: 220px 220px, auto, auto, auto; }
.bcard.t-bronze .face { --c1: #F3C53E; --c2: #DCA312; }
.bcard.t-silver .face { --c1: #C8203A; --c2: #7E0C1D; }
.bcard.t-platinum .face { --c1: #1B8A57; --c2: #0A4A2E; }
.bcard.t-gold .face { --c1: #2F62D9; --c2: #112E7A; }
.bcard.t-diamond .face { --c1: #7A33E0; --c2: #3B1290; }
.bcard .bc-brand .bc-tier { opacity: .62; }
@media (prefers-reduced-motion: reduce) { .bcard .bc-shield { animation: none !important; } }

/* ═════════ v15: обновление свайпом — тонкое кольцо прогресса, без стрелок ═════════ */
@media (max-width: 899px) and (pointer: coarse) {
  .ptr { width: 38px; height: 38px; margin-left: -19px; color: #fff;
    background: rgb(12 22 48 / .72); box-shadow: inset 0 0 0 1px rgb(170 200 255 / .18), 0 10px 26px -10px rgb(0 0 0 / .8);
    transform: translateY(-60px) scale(.6); }
  .ptr svg { width: 26px; height: 26px; transform: rotate(-90deg); overflow: visible; }
  .ptr circle { fill: none; stroke-width: 2.6; stroke-linecap: round; }
  .ptr .ptr-track { stroke: rgb(255 255 255 / .12); }
  .ptr .ptr-arc { stroke: var(--focus, #6E9CFF); stroke-dasharray: 75.4; stroke-dashoffset: calc(75.4 * (1 - var(--p, 0)));
    transition: stroke .2s; }
  .ptr.ready { background: rgb(12 22 48 / .82); color: #fff; }
  .ptr.ready .ptr-arc { stroke: #fff; filter: drop-shadow(0 0 4px rgb(255 255 255 / .6)); }
  .ptr.ready svg { animation: ptrPop .28s cubic-bezier(.3, 1.6, .5, 1); }
  .ptr.loading svg { animation: ptrSpin .75s linear infinite; }
  .ptr.loading .ptr-arc { stroke-dasharray: 22 53.4; stroke-dashoffset: 0; transition: none; }
}
@keyframes ptrPop { 0% { transform: rotate(-90deg) scale(1); } 50% { transform: rotate(-90deg) scale(1.18); } 100% { transform: rotate(-90deg) scale(1); } }
@keyframes ptrSpin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }

/* ═════════ карта: при перевороте лицевая сторона полностью скрывается (iPhone/Safari) ═════════ */
.bcard .face.front { visibility: visible; transition: visibility 0s linear .14s; }
.bcard .face.rear { visibility: hidden; transition: visibility 0s linear .14s; }
.bcard.flipped .face.front { visibility: hidden; }
.bcard.flipped .face.rear { visibility: visible; }
/* анимации карты не тратят батарею, когда карта не на экране или перевёрнута */
.bcard.off-screen *, .bcard.flipped .front * { animation-play-state: paused !important; }


/* ═════ v16: кнопка «Чаты» ═════ */
/* ── кнопка «Чаты» в шапке ── */
body .top-msgr, body .side-msgr { position: relative; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-weight: 600;
  color: #fff; border-radius: 999px; background: linear-gradient(150deg, rgb(70 125 255 / .9), rgb(33 82 224 / .9));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 8px 22px -10px rgb(47 107 255 / .9); transition: transform .15s, box-shadow .2s; }
body .top-msgr { height: 38px; padding: 0 14px 0 11px; font-size: 14px; margin-right: 2px; }
body .top-msgr svg, body .side-msgr svg { width: 21px; height: 21px; }
body .top-msgr:active, body .side-msgr:active { transform: scale(.96); }
body .top-msgr:hover, body .side-msgr:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 10px 26px -8px rgb(47 107 255 / 1); }
.msgr-badge { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #FF3B4E; color: #fff;
  font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #050914; }
.msgr-badge[hidden] { display: none; }
.side-top { display: flex; gap: 8px; align-items: stretch; }
.side-top .side-search { flex: 1; min-width: 0; margin: 0; }
.side-top .side-search kbd { display: none; }
body .side-msgr { padding: 0 14px 0 12px; height: auto; min-height: 40px; font-size: 14.5px; flex: none; }
@media (max-width: 899px) {
  body .top-msgr span { display: inline; }
  body .top-msgr { height: 36px; padding: 0 12px 0 10px; font-size: 13.5px; }
}
@media (max-width: 370px) { body .top-msgr span { display: none; } body .top-msgr { padding: 0 9px; } }


/* ═════ v17: стеклянные кнопки «Чаты» и «Глобальный чат» — прозрачное чёрное стекло, края и иконка переливаются ═════ */
@property --gg-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ggSpin { to { --gg-a: 360deg; } }
@keyframes ggBreath { 50% { opacity: .55; } }
.gg-glass, body .top-msgr, body .side-msgr {
  position: relative; isolation: isolate; color: #fff;
  background: linear-gradient(180deg, rgb(26 26 32 / .6), rgb(4 4 8 / .72)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), inset 0 -1px 0 rgb(255 255 255 / .04),
    0 10px 26px -12px rgb(0 0 0 / .9), 0 0 22px -8px rgb(140 120 255 / .55) !important;
}
.gg-glass::before, body .top-msgr::before, body .side-msgr::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.3px; pointer-events: none; z-index: -1;
  background: conic-gradient(from var(--gg-a), #6FD8FF, #7C8CFF, #C77DFF, #FF7EC8, #FFC07A, #6FD8FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ggSpin 6s linear infinite;
}
.gg-glass::after, body .top-msgr::after, body .side-msgr::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; z-index: -2; filter: blur(7px); opacity: .55; padding: 3px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  background: conic-gradient(from var(--gg-a), #6FD8FF, #7C8CFF, #C77DFF, #FF7EC8, #FFC07A, #6FD8FF);
  animation: ggSpin 6s linear infinite, ggBreath 4s ease-in-out infinite;
}
.gg-glass svg, body .top-msgr svg, body .side-msgr svg { filter: drop-shadow(0 0 5px rgb(150 140 255 / .65)); }
.gg-glass svg *, body .top-msgr svg *, body .side-msgr svg * { stroke: url(#gg-grad); }
body .top-msgr:hover, body .side-msgr:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 10px 26px -12px rgb(0 0 0 / .9), 0 0 28px -6px rgb(160 130 255 / .75) !important; }
body .top-msgr span, body .side-msgr span { background: linear-gradient(90deg, #fff, #E7E2FF 60%, #FFE3F4); -webkit-background-clip: text; background-clip: text; color: transparent; }
body .top-msgr .msgr-badge, body .side-msgr .msgr-badge { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .gg-glass::before, .gg-glass::after, body .top-msgr::before, body .top-msgr::after, body .side-msgr::before, body .side-msgr::after { animation: none; }
}


/* ═════ v18: плавные переходы между страницами (Safari 18.2+, Chrome 126+) ═════ */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
body.ui .topbar { view-transition-name: sp-topbar; }
body.ui .tabbar { view-transition-name: sp-tabbar; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }