/* VEX P2P mini app — «Деловой»: Bybit palette (orange #f7a600, black, white), Monobank softness. A black hero card with
   an orange glow on top of the main screens, a light rounded deck under it, flat white cards without outlines, pill
   buttons filled with orange. Orange is the one action color, green only for money that came in, red for risk.
   Light and dark themes from the same tokens (data-theme on <html>: light | dark). Manrope for words and numbers,
   IBM Plex Mono for requisites. Phone first; from 960px a left sidebar and two columns. Motion: screens slide in the
   direction of the move, background refreshes never replay it. */
:root {
  --paper: #f3f4f6;
  --surface: #ffffff;
  --raised: #ffffff;
  --ink: #14161a;
  --muted: #5b626d;
  --faint: #8a919c;
  --line: #eceef2;
  --fill: #f1f2f5;
  --accent: #f7a600;
  --accent-2: #ffc53d;
  --accent-text: #b36800;
  --accent-ink: #14161a;
  --accent-soft: #fff2d3;
  --green: #0e8a4f;
  --green-soft: #e0f6ec;
  --red: #c7362c;
  --red-soft: #ffe8e6;
  --amber: #8a5a00;
  --amber-soft: #fff1da;
  --sky: #3d4654;
  --sky-soft: #eceff3;
  --brand: linear-gradient(160deg, #23262c 0%, #14161a 55%, #0b0d10 100%);
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M0 56 56 0l56 56-56 56zM56 0v112M0 56h112'/%3E%3Ccircle cx='56' cy='56' r='3.2' fill='%23f7a600' fill-opacity='.35' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --brand-btn: #f7a600;
  --brand-glow: 0 8px 20px rgba(247, 166, 0, .28);
  --shadow: 0 1px 2px rgba(20, 22, 26, .04), 0 6px 22px rgba(20, 22, 26, .06);
  --nav-bg: rgba(255, 255, 255, .9);
  --veil: rgba(11, 13, 16, .5);
  --sk-a: #e6e8ec;
  --sk-b: #f5f6f8;
  /* the old names: every screen keeps working */
  --sea: var(--accent);
  --sea-soft: var(--accent-soft);
  --blue: var(--sky);
  --blue-soft: var(--sky-soft);
  --r: 24px;
  --r-s: 18px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --font: "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --safe-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --app-h: 100vh;
  --nav-h: 84px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  /* a graphite night: near-black paper, soft dark cards, orange glowing through */
  --paper: #0b0d10;
  --surface: #16191e;
  --raised: #1d2128;
  --ink: #eceef1;
  --muted: #9aa1ac;
  --faint: #7f8691;
  --line: rgba(255, 255, 255, .07);
  --fill: rgba(255, 255, 255, .06);
  --accent: #f7a600;
  --accent-2: #ffc53d;
  --accent-text: #ffb52e;
  --accent-ink: #14161a;
  --accent-soft: rgba(247, 166, 0, .15);
  --green: #2ed68c;
  --green-soft: rgba(46, 214, 140, .13);
  --red: #ff8a80;
  --red-soft: rgba(255, 107, 98, .13);
  --amber: #ffc24d;
  --amber-soft: rgba(255, 176, 32, .13);
  --sky: #b8c0cc;
  --sky-soft: rgba(184, 192, 204, .12);
  --brand: linear-gradient(150deg, #23262c 0%, #14161a 100%);
  --brand-glow: 0 0 22px rgba(247, 166, 0, .35);
  --shadow: none;
  --nav-bg: rgba(22, 25, 30, .88);
  --veil: rgba(0, 0, 0, .66);
  --sk-a: rgba(255, 255, 255, .05);
  --sk-b: rgba(255, 255, 255, .1);
  --nav-h: 84px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--paper); }
body { background: transparent; }
:root:not([data-theme="dark"]) body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 380px at 100% 0, rgba(247, 166, 0, .12), transparent 70%), radial-gradient(460px 380px at 0 86%, rgba(247, 166, 0, .08), transparent 70%); }
body {
  color: var(--ink); font: 500 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; -webkit-text-size-adjust: 100%;
  transition: background .25s, color .25s;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; text-align: inherit; }
a { color: var(--accent-text); text-decoration: none; }
i, em { font-style: normal; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
::selection { background: var(--accent-soft); }

/* ---------- the shell ---------- */
.shell { min-height: var(--app-h); }
#app { max-width: 600px; margin: 0 auto; padding: calc(var(--safe-top) + 6px) 14px calc(var(--safe-bottom) + var(--nav-h) + 22px); min-height: var(--app-h); }
/* a screen enters in the direction of the move (fwd: from the right, back: from the left, tab: from below); the
   content that replaces its skeleton only fades; a background refresh does not move at all */
.screen.fwd { animation: inFwd .34s var(--ease) both; }
.screen.back { animation: inBack .34s var(--ease) both; }
.screen.tab { animation: inTab .3s var(--ease) both; }
.screen.swap { animation: fade .22s ease-out both; }
@keyframes inFwd { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes inBack { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes inTab { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* cards and rows rise one after another on a fresh screen */
.screen.lift .deck > *, .screen.lift .list > .row, .screen.lift .col > * { animation: rise .42s var(--ease) both; }
.screen.lift .deck > :nth-child(2), .screen.lift .list > .row:nth-child(2), .screen.lift .col > :nth-child(2) { animation-delay: .04s; }
.screen.lift .deck > :nth-child(3), .screen.lift .list > .row:nth-child(3), .screen.lift .col > :nth-child(3) { animation-delay: .08s; }
.screen.lift .deck > :nth-child(4), .screen.lift .list > .row:nth-child(4), .screen.lift .col > :nth-child(4) { animation-delay: .12s; }
.screen.lift .deck > :nth-child(n+5), .screen.lift .list > .row:nth-child(n+5), .screen.lift .col > :nth-child(n+5) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- the hero: the banner's azure on top of the main screens ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: var(--brand);
  margin: calc(-1 * (var(--safe-top) + 6px)) -14px 0; padding: calc(var(--safe-top) + 12px) 18px 46px; border-radius: 0 0 36px 36px; }
.hero { background: var(--lattice) 0 0 / 112px 112px, var(--brand); }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.hero::before { width: 360px; height: 360px; left: -140px; top: -180px; background: radial-gradient(circle at 62% 62%, rgba(247, 166, 0, .42), rgba(255, 255, 255, 0) 70%); }
.hero::after { width: 340px; height: 340px; right: -150px; bottom: -200px; background: radial-gradient(circle at 40% 30%, rgba(247, 166, 0, .26), rgba(255, 255, 255, 0) 70%); }
.trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.trail .t { stroke-dasharray: 16 84; animation: trail 3.8s linear infinite; filter: drop-shadow(0 0 5px #fff); }
@keyframes trail { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.chip3d { position: absolute; z-index: -1; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 20px; pointer-events: none;
  background: var(--accent); color: var(--accent-ink); border: 0; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: float 4.4s ease-in-out infinite; }
.hero .sk { background: linear-gradient(90deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .14) 100%); background-size: 200% 100%; }
.hero .top { position: relative; margin: 0 0 6px; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero .top h2 { color: #fff; }
.glass, .hero .ibtn { background: rgba(255, 255, 255, .1); border: 0; color: #fff; box-shadow: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero .ibtn:active { background: rgba(255, 255, 255, .3); }
.hero .tag { background: rgba(255, 255, 255, .12); border: 0; color: #fff; font-weight: 700; }
.hero .bar .who small, .hero .sub, .hero .lbl { color: rgba(255, 255, 255, .9); }
.hero .bar .who b { color: #fff; }
.hero .ava { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.hero .h-title { font-size: 20px; font-weight: 800; letter-spacing: -.015em; margin: 4px 0 0; }
.hero .h-sub { color: rgba(255, 255, 255, .92); font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.hero .lbl { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; margin-top: 20px; }
.hero .sum { font-size: clamp(32px, 11.5vw, 46px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; margin-top: 4px; font-variant-numeric: tabular-nums; padding-right: 58px; }
.hero .sum small { font-size: .42em; font-weight: 700; letter-spacing: 0; margin-left: 8px; color: rgba(255, 255, 255, .88); }
.hero .sub { font-size: 14px; margin-top: 4px; }
.hero .facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hero .quick { margin-top: 22px; }
.hero .quick button { background: none; border: 0; color: #fff; font-weight: 700; border-radius: 20px; padding: 0; gap: 8px; }
.hero .quick button span { background: var(--accent); color: var(--accent-ink); width: 56px; height: 56px; border-radius: 50%; transition: transform .14s var(--ease), background .15s; }
.hero .quick button svg { width: 24px; height: 24px; stroke-width: 2.1; }
.hero .quick button:active span { transform: scale(.93); background: var(--accent-2); }
.hero .search { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; margin-top: 16px; border-radius: 999px; }
.hero .search svg { width: 19px; height: 19px; flex: none; }
.hero .search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: 600 16px var(--font); }
.hero .search input::placeholder { color: rgba(255, 255, 255, .78); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.kpis button { min-height: 66px; padding: 9px 12px; border-radius: 20px; text-align: left; transition: transform .12s, background .15s; }
.kpis b { display: block; font-size: 22px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpis small { display: block; font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .92); line-height: 1.25; }
.kpis button.hot b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; vertical-align: 5px; border-radius: 50%; background: #ffb020; box-shadow: 0 0 0 3px rgba(255, 176, 32, .3); }
.kpis button:active { transform: scale(.96); }
/* the white deck that rises over the hero's bottom edge */
.deck { position: relative; z-index: 1; margin: -28px -14px 0; padding: 18px 14px 0; border-radius: 32px 32px 0 0; background: var(--paper); }
.deck > .sec:first-child, .deck > .grid2 > .col > .sec:first-child { margin-top: 2px; }
.hero .amount .rub { font-size: clamp(34px, 12vw, 46px); font-weight: 800; letter-spacing: -.035em; }
.hero .amount .to, .hero .amount .to b { color: rgba(255, 255, 255, .95); }
.hero .strait-bar i { background: rgba(255, 255, 255, .3); }
.hero .strait-bar i.done { background: var(--accent); }
.hero .strait-bar i.now { background: linear-gradient(90deg, var(--accent) 0 50%, rgba(255, 255, 255, .22) 50%); background-size: 200% 100%; }
.hero .strait-cap, .hero .strait-cap b { color: rgba(255, 255, 255, .95); }
.hero .timer-line { background: rgba(247, 166, 0, .16); border: 0; color: var(--accent-2); }
.hero .timer-line.low { background: rgba(255, 90, 80, .32); border-color: rgba(255, 200, 196, .6); }
.hero .deal-head h1 { color: #fff; font-size: 19px; font-weight: 800; }
.hero .hint { color: rgba(255, 255, 255, .9); }
.hero .done-mark { background: rgba(255, 255, 255, .12); color: #fff; border: 0; }

/* deal participants: roles only (М / П / О); the admin can open the details */
.people .row { min-height: 56px; }
.role-ava { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; }
.role-ava.m { background: var(--accent); color: var(--accent-ink); }
.role-ava.p { background: #17a393; }
.role-ava.o { background: #6a55e0; }
.people .who-data { display: block; color: var(--muted); font-size: 12.5px; }
.people-note { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: 0; }
.people-note svg { width: 13px; height: 13px; }

/* the admin's queue: one list of everything that waits, with its buttons right in the row */
.inbox { display: flex; flex-direction: column; gap: 8px; }
.inbox .item { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.inbox .item > .head { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.inbox .item .mid { flex: 1; min-width: 0; }
.inbox .item .mid b { display: block; font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox .item .mid small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox .item .btns { margin: 0; }
.inbox .item .btns .btn { margin-top: 0; }
.hub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hub button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 2px 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; font-weight: 700; text-align: center; transition: transform .12s; }
.hub button span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-ink); background: var(--brand-btn); box-shadow: none; }
.hub button svg { width: 20px; height: 20px; }
.hub button .badge { position: absolute; top: 6px; right: 8px; margin: 0; }
.hub button:active { transform: scale(.95); }

/* the compact hero of every other page: its title (and a line under it) on the azure */
.hero .top.root { position: absolute; top: calc(var(--safe-top) + 12px); right: 18px; margin: 0; z-index: 2; }
.h-page { padding: 6px 52px 4px 0; }
.hero:has(> .h-page) { padding-bottom: 54px; }
.h-page h1 { margin: 2px 0 0; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.h-page p { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.hero .top:not(.root) + .h-page { padding-right: 0; }
.deck > .article { margin-top: 2px; }
.deck > .article > h1:first-child { display: none; }  /* its title is in the hero */
/* a person on top: the profile, a user's admin card */
.h-person { text-align: center; padding: 4px 0 0; }
.h-person .ava { margin: 0 auto; border: 3px solid rgba(255, 255, 255, .6); }
.h-person h1 { margin: 12px 0 2px; font-size: 22px; font-weight: 800; color: #fff; }
.h-person p, .h-person p button { margin: 0; color: rgba(255, 255, 255, .9); font-size: 14px; font-weight: 600; }
.h-person .facts { justify-content: center; }
.h-person.row-left { display: flex; align-items: center; gap: 14px; text-align: left; }
.h-person.row-left .ava { margin: 0; width: 64px; height: 64px; font-size: 22px; }
.h-person.row-left h1 { margin: 0 0 2px; }
.h-person.row-left .facts { justify-content: flex-start; margin-top: 8px; }
.bal { position: relative; isolation: isolate; }
.bal .trail { display: none; }  /* the light theme draws the trail across the whole hero */
/* the chat's own bar */
.chatview .top { background: var(--brand); color: #fff; border-bottom: 0; }
.chatview .top h2, .chatview .top small { color: #fff; }
.chatview .top small { opacity: .9; }
.chatview .top .ibtn { background: rgba(255, 255, 255, .1); border: 0; color: #fff; box-shadow: none; }

/* ---------- the dark theme: graphite and orange ---------- */
:root[data-theme="dark"] body { background: transparent; }
:root[data-theme="dark"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 420px at 92% -6%, rgba(247, 166, 0, .26), rgba(247, 166, 0, 0) 70%),
    radial-gradient(460px 420px at -18% 62%, rgba(247, 166, 0, .08), rgba(247, 166, 0, 0) 70%), var(--paper); }
:root[data-theme="dark"] .hero { background: none; padding-bottom: 6px; }
:root[data-theme="dark"] .hero::before, :root[data-theme="dark"] .hero::after, :root[data-theme="dark"] .hero > .trail { display: none; }
:root[data-theme="dark"] .deck { margin-top: 0; padding-top: 12px; background: none; border-radius: 0; }
:root[data-theme="dark"] .glass, :root[data-theme="dark"] .hero .ibtn, :root[data-theme="dark"] .hero .tag,
:root[data-theme="dark"] .chatview .top .ibtn { background: rgba(255, 255, 255, .07); border-color: transparent; }
:root[data-theme="dark"] .hero .ava { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px rgba(247, 166, 0, .6); }
:root[data-theme="dark"] .h-person .ava { border-color: rgba(247, 166, 0, .5); }
/* the balance: a dark card with an orange glow and a thin warm edge */
:root[data-theme="dark"] .bal { margin-top: 16px; padding: 18px 20px 16px; border-radius: 28px; overflow: hidden; background: var(--raised);
  box-shadow: inset 0 0 0 1px rgba(247, 166, 0, .28), 0 18px 44px rgba(247, 166, 0, .12); }
:root[data-theme="dark"] .bal::before { content: ""; position: absolute; z-index: -1; width: 280px; height: 280px; right: -110px; top: -130px; border-radius: 50%; background: radial-gradient(circle at 40% 60%, rgba(247, 166, 0, .34), rgba(247, 166, 0, 0) 70%); }
:root[data-theme="dark"] .bal .trail { display: block; }
:root[data-theme="dark"] .bal .lbl { margin-top: 0; }
:root[data-theme="dark"] .hero .facts .tag { background: rgba(255, 255, 255, .1); border-color: transparent; }
/* quick actions: round buttons under the card */
:root[data-theme="dark"] .hero .quick button span { background: var(--accent); color: var(--accent-ink); }
:root[data-theme="dark"] .hero .quick button:active span { background: var(--accent-2); }
/* numbers: plain white */
:root[data-theme="dark"] .hero .amount .to, :root[data-theme="dark"] .hero .amount .to b { color: var(--muted); }
:root[data-theme="dark"] .hero .amount .to b { color: var(--ink); }
:root[data-theme="dark"] .hero .strait-bar i { background: rgba(255, 255, 255, .12); }
:root[data-theme="dark"] .hero .strait-bar i.done { background: var(--accent); }
:root[data-theme="dark"] .hero .strait-bar i.now { background: linear-gradient(90deg, var(--accent) 0 50%, rgba(255, 255, 255, .12) 50%); background-size: 200% 100%; }
:root[data-theme="dark"] .hero .strait-cap, :root[data-theme="dark"] .hero .strait-cap b, :root[data-theme="dark"] .h-page p, :root[data-theme="dark"] .hero .h-sub,
:root[data-theme="dark"] .hero .hint, :root[data-theme="dark"] .h-person p, :root[data-theme="dark"] .h-person p button { color: var(--muted); }
:root[data-theme="dark"] .hero .timer-line { background: var(--amber-soft); border-color: transparent; color: var(--amber); }
:root[data-theme="dark"] .hero .timer-line.low { background: var(--red-soft); border-color: transparent; color: var(--red); }
:root[data-theme="dark"] .hero .search input::placeholder { color: var(--muted); }
:root[data-theme="dark"] .kpis small { color: var(--muted); }
/* cards: soft graphite, no outline */
:root[data-theme="dark"] .list, :root[data-theme="dark"] .box, :root[data-theme="dark"] .tile, :root[data-theme="dark"] .line,
:root[data-theme="dark"] .inbox .item, :root[data-theme="dark"] .hub button, :root[data-theme="dark"] .chat-open, :root[data-theme="dark"] .article {
  background: var(--surface); border-color: transparent; box-shadow: none; }
:root[data-theme="dark"] .line:has(.dot.on) { background: linear-gradient(90deg, rgba(46, 214, 140, .14), var(--surface) 70%); }
:root[data-theme="dark"] .dot.on { box-shadow: 0 0 12px var(--green); }
:root[data-theme="dark"] .row .ic, :root[data-theme="dark"] .inbox .ic { box-shadow: none; }
:root[data-theme="dark"] .row .ic.sea, :root[data-theme="dark"] .row .ic.accent, :root[data-theme="dark"] .inbox .ic.accent { background: rgba(247, 166, 0, .16); color: var(--accent-text); }
:root[data-theme="dark"] .row .ic.blue, :root[data-theme="dark"] .inbox .ic.blue { background: var(--sky-soft); color: var(--sky); }
:root[data-theme="dark"] .row .ic.green, :root[data-theme="dark"] .inbox .ic.green { background: var(--green-soft); color: var(--green); }
:root[data-theme="dark"] .row .ic.red, :root[data-theme="dark"] .inbox .ic.red { background: var(--red-soft); color: var(--red); }
:root[data-theme="dark"] .row .ic.amber, :root[data-theme="dark"] .inbox .ic.amber { background: var(--amber-soft); color: var(--amber); }
:root[data-theme="dark"] .row .ic.violet, :root[data-theme="dark"] .inbox .ic.violet { background: rgba(182, 166, 255, .14); color: #b6a6ff; }
:root[data-theme="dark"] .btn:not(.line):not(.soft):not(.ink):not(.red) { box-shadow: 0 6px 22px rgba(247, 166, 0, .3); }
:root[data-theme="dark"] .btn.line { background: rgba(255, 255, 255, .07); border-color: transparent; }
:root[data-theme="dark"] .dock .btn.line { background: var(--raised); }
:root[data-theme="dark"] .btn.ink { background: #fff; color: #14161a; }
:root[data-theme="dark"] .hero:has(> .h-page) { padding-bottom: 6px; }
:root[data-theme="dark"] .inp { background: var(--surface); }
:root[data-theme="dark"] .chip:not(.on) { background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .seg, :root[data-theme="dark"] .tabs { background: rgba(255, 255, 255, .06); border: 0; }
:root[data-theme="dark"] .seg button.on, :root[data-theme="dark"] .tabs button.on { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
:root[data-theme="dark"] .chatview { background: var(--paper); }
:root[data-theme="dark"] .chatview .top { background: rgba(22, 25, 30, .92); border-bottom: 0; }
/* the tab bar floats as a rounded capsule */
:root[data-theme="dark"] .nav { box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); }

/* sticky top bar of every inner page: back, title, actions */
.top { position: sticky; top: 0; z-index: 25; margin: 0 -14px 6px; padding: calc(var(--safe-top) + 6px) 10px 8px;
  margin-top: calc(-1 * (var(--safe-top) + 6px)); display: flex; align-items: center; gap: 8px;
  background: var(--paper); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.top h2 { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .sp { flex: 1; }

/* ---------- header (home) ---------- */
.bar { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.bar .who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.bar .who b { display: block; font-weight: 600; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .who small { display: block; color: var(--muted); font-size: 12.5px; }
.ibtn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); border: 0; background: var(--surface); flex: none; box-shadow: var(--shadow); transition: transform .1s, background .15s; }
.ibtn svg { width: 19px; height: 19px; }
.ibtn:active { transform: scale(.94); background: var(--fill); }
.ibtn.accent { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.ava { width: 40px; height: 40px; border-radius: 50%; flex: none; overflow: hidden; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; font-size: 14px; }
.ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ava.xl { width: 80px; height: 80px; font-size: 26px; }

.title { padding: 4px 0 2px; }
.title h1 { margin: 0; font-size: 23px; line-height: 1.25; font-weight: 800; letter-spacing: -.015em; }
.title p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

/* ---------- balance: the blue card with the strait ---------- */
.balance { position: relative; overflow: hidden; border-radius: 26px; padding: 18px 18px 16px; margin-top: 6px; color: #fff;
  background: var(--brand); box-shadow: var(--brand-glow); isolation: isolate; }
.balance::before { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; left: -90px; top: -130px; border-radius: 50%; background: radial-gradient(circle at 60% 60%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 70%); }
.balance .lbl { color: rgba(255, 255, 255, .82); font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.balance .sum { font-size: 36px; font-weight: 800; letter-spacing: -.03em; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.balance .sum small { font-size: 15px; color: rgba(255, 255, 255, .8); margin-left: 6px; font-weight: 500; letter-spacing: 0; }
.balance .sub { color: rgba(255, 255, 255, .85); font-size: 13px; }
.balance .facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.balance .tag { background: rgba(255, 255, 255, .18); color: #fff; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.quick button { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px 10px; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; transition: transform .14s var(--ease), background .15s; }
.quick button span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.quick button svg { width: 20px; height: 20px; }
.quick button:active { transform: scale(.95); background: var(--fill); }

/* the line switch of a merchant / a seller's shift */
.line { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); margin-top: 10px; }
.deck > .line:first-child { margin-top: 0; }
.line .mid { flex: 1; min-width: 0; }
.line .mid b { display: block; font-weight: 800; }
.line .mid small { display: block; color: var(--muted); font-size: 12.5px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); flex: none; position: relative; }
.dot.on { background: var(--green); }
.dot.on::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--green); opacity: 0; animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(1.4); opacity: 0; } }

/* ---------- the marks of the money ---------- */
.coin { display: inline-block; border-radius: 50%; vertical-align: -0.2em; flex: none; object-fit: contain; }
.hero .sum small .coin, .bal .sum small .coin { margin-right: 6px; vertical-align: -0.16em; }
.chain { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; margin-right: 6px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.chain .coins { display: inline-flex; }
.chain .coins .coin + .coin { margin-left: -7px; box-shadow: 0 0 0 2px rgba(20, 22, 26, .35); }
.row .ic .coin { width: 100%; height: 100%; }

/* ---------- chips / tags ---------- */
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--fill); color: var(--muted); white-space: nowrap; }
.tag svg { width: 13px; height: 13px; }
.tag.sea, .tag.accent { background: var(--accent-soft); color: var(--accent-text); }
.tag.green { background: var(--green-soft); color: var(--green); }
.tag.red { background: var(--red-soft); color: var(--red); }
.tag.amber { background: var(--amber-soft); color: var(--amber); }
.tag.blue { background: var(--sky-soft); color: var(--sky); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 8px 16px; border-radius: 999px; border: 0; background: var(--surface); box-shadow: var(--shadow); font-size: 13px; font-weight: 700; color: var(--ink); transition: background .2s, color .2s, transform .12s; }
.chip.on { background: var(--brand-btn); color: var(--accent-ink); border-color: transparent; box-shadow: 0 4px 12px rgba(247, 166, 0, .28); }
.chip:active { transform: scale(.97); }

.role-bar { margin: 10px 0 2px; flex-wrap: nowrap; }
.hub.menu { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
.hub.menu button { padding: 10px 2px 8px; font-size: 11.5px; line-height: 1.2; }

/* ---------- sections, lists ---------- */
.sec { display: flex; align-items: center; justify-content: space-between; margin: 22px 4px 9px; gap: 10px; }
.sec h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; display: flex; align-items: center; gap: 6px; }
.sec a, .sec button { font-size: 14px; font-weight: 700; color: var(--accent-text); }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.box.pad { padding: 14px 16px; }
.box + .box { margin-top: 10px; }
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; text-align: left; position: relative; min-height: 66px; transition: background .15s, transform .14s var(--ease); }
.row + .row { border-top: 1px solid var(--line); }
button.row:active, a.row:active { background: var(--fill); }
@media (hover: hover) { button.row:hover { background: var(--fill); } }
/* icon tiles like the glass coins of the banner: a colored gradient, a white glyph */
.row .ic, .inbox .ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--fill); color: var(--ink); }
.row .ic svg, .inbox .ic svg { width: 20px; height: 20px; stroke-width: 2; }
.row .ic.sea, .row .ic.accent, .inbox .ic.accent { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.row .ic.blue, .inbox .ic.blue { background: #2b303a; color: #fff; box-shadow: none; }
.row .ic.green, .inbox .ic.green { background: #16a05f; color: #fff; box-shadow: none; }
.row .ic.red, .inbox .ic.red { background: #e0463b; color: #fff; box-shadow: none; }
.row .ic.amber, .inbox .ic.amber { background: #f08a00; color: #fff; box-shadow: none; }
.row .ic.violet, .inbox .ic.violet { background: #6a55e0; color: #fff; box-shadow: none; }
.row .mid { flex: 1; min-width: 0; }
.row .mid b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .mid small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .end { text-align: right; flex: none; }
.row .end b { display: block; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .end small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .chev { color: var(--faint); width: 16px; height: 16px; flex: none; }
.row .strait { position: absolute; left: 68px; right: 14px; bottom: 0; height: 2px; background: var(--fill); border-radius: 2px; }
.row .strait i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.empty { padding: 28px 16px 24px; text-align: center; color: var(--muted); font-size: 14px; }
.empty .art { width: 88px; height: 64px; display: block; margin: 0 auto 8px; color: var(--accent-text); }
.empty .art .float { animation: float 3.2s ease-in-out infinite; }
.empty .art .ring { animation: spinr 14s linear infinite; transform-origin: 44px 32px; }
@keyframes float { 50% { transform: translateY(-4px); } }
@keyframes spinr { to { transform: rotate(360deg); } }
.empty .btn { margin-top: 12px; }

/* key-value lines */
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 14px; }
.kv + .kv { border-top: 1px solid var(--fill); }
.kv > span { color: var(--muted); }
.kv > b { text-align: right; font-weight: 500; }
.kv .num { font-size: 14.5px; }
.kv.total > b { font-size: 17px; font-weight: 600; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.plus { color: var(--green); }
.minus { color: var(--red); }

/* ---------- forms ---------- */
.field { display: block; margin-top: 12px; }
.field > span { display: block; font-size: 13px; color: var(--muted); margin: 0 4px 6px; font-weight: 500; }
.inp { display: flex; align-items: center; gap: 8px; background: var(--fill); border: 1.5px solid transparent; border-radius: var(--r-s); padding: 0 14px; transition: border-color .15s, box-shadow .15s; }
.inp:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-soft); }
.inp input, .inp textarea, .inp select { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 12px 0; font-size: 16px; }
.inp input::placeholder, .inp textarea::placeholder { color: var(--faint); }
.inp textarea { resize: none; line-height: 1.45; }
.inp .unit { color: var(--muted); }
.inp.big input { font-size: 27px; font-weight: 600; padding: 12px 0; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.inp .max { color: var(--accent-text); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 10px; background: var(--accent-soft); }
.hint { color: var(--muted); font-size: 13px; margin: 8px 4px 0; line-height: 1.5; }
.err { color: var(--red); font-size: 13.5px; margin: 8px 4px 0; font-weight: 500; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--fill); border-radius: 999px; padding: 4px; margin: 12px 0; }
.seg button { padding: 9px 6px; border-radius: 999px; font-weight: 500; font-size: 14px; color: var(--muted); text-align: center; transition: background .15s, color .15s; }
.seg button.on { background: var(--surface); color: var(--accent-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.seg button.on.sell { color: var(--red); }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-top: 8px; }
.opt { padding: 10px 6px; border-radius: 999px; border: 1.5px solid transparent; background: var(--fill); font-size: 13.5px; font-weight: 500; text-align: center; }
.opt.on { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }

/* ---------- buttons ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 0 22px; border-radius: 999px; font-weight: 800; font-size: 15.5px; background: var(--brand-btn); color: var(--accent-ink); margin-top: 12px; transition: opacity .15s, transform .14s var(--ease), box-shadow .15s; box-shadow: var(--brand-glow); }
.btn svg { width: 19px; height: 19px; }
.btn:active { transform: scale(.97); opacity: .94; }
.btn[disabled] { opacity: .45; pointer-events: none; box-shadow: none; }
.btn.line { background: var(--fill); color: var(--ink); border: 0; box-shadow: none; }
.btn.soft { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
.btn.red { background: #e0463b; color: #fff; box-shadow: 0 8px 18px rgba(212, 52, 42, .22); }
.btn.line.red { background: var(--red-soft); color: var(--red); border-color: transparent; box-shadow: none; }
.btn.ink { background: var(--ink); color: var(--paper); box-shadow: none; }
.btn.sm { min-height: 40px; font-size: 13.5px; width: auto; padding: 0 16px; margin-top: 0; border-radius: 999px; box-shadow: none; }
.btn.busy { pointer-events: none; }
.btn.busy::after { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btns .btn { margin-top: 8px; font-size: 14px; padding: 0 10px; }
.btn.soft, .btn.line { font-weight: 700; font-size: 15px; }
.btns > :only-child, .btns > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.link-btn { color: var(--accent-text); font-weight: 600; font-size: 14px; }

/* sticky action dock at the bottom of a deal */
.dock { position: sticky; bottom: calc(var(--safe-bottom) + var(--nav-h) + 8px); z-index: 15; background: linear-gradient(transparent, var(--paper) 26%); padding: 16px 0 2px; margin-top: 6px; }
.dock .btn:first-child { margin-top: 0; }

/* ---------- a deal ---------- */
.deal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; }
.deal-head h1 { margin: 0; font-size: 20px; font-weight: 800; }
.amount { margin: 12px 0 2px; }
.amount .rub { font-size: 34px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.amount .to { color: var(--muted); font-size: 14px; margin-top: 2px; }
.amount .to b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.timer-line { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 11px 14px; border-radius: var(--r-s); background: var(--amber-soft); color: var(--amber); font-size: 14px; font-weight: 500; }
.timer-line b { font-family: var(--mono); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.timer-line.low { background: var(--red-soft); color: var(--red); }
.done-mark { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--green-soft); color: var(--green); margin-top: 12px; font-weight: 600; }
.done-mark svg { width: 34px; height: 34px; flex: none; }
.done-mark .c { stroke-dasharray: 101; stroke-dashoffset: 101; animation: draw .6s ease-out forwards; }
.done-mark .k { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .35s .5s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.strait-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-top: 14px; }
.strait-bar i { height: 4px; border-radius: 3px; background: var(--line); }
.strait-bar i.done { background: var(--accent); }
.strait-bar i.now { background: linear-gradient(90deg, var(--accent) 0 50%, var(--line) 50%); background-size: 200% 100%; animation: flow 1.6s linear infinite; }
@keyframes flow { from { background-position: 100% 0; } to { background-position: 0 0; } }
.strait-cap { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.strait-cap b { color: var(--ink); font-weight: 500; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--muted); }
.steps li .d { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; margin-top: 1px; display: grid; place-items: center; }
.steps li .d svg { width: 12px; height: 12px; }
.steps li.done { color: var(--ink); }
.steps li.done .d { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.steps li.now { color: var(--ink); font-weight: 500; }
.steps li.now .d { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 10px var(--accent); }
.steps li small { display: block; color: var(--accent-text); font-size: 12.5px; font-weight: 400; }

.req { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--r-s); background: var(--fill); width: 100%; text-align: left; margin-top: 8px; transition: background .12s; }
.req .v { flex: 1; min-width: 0; }
.req small { display: block; color: var(--muted); font-size: 12px; }
.req .mono { font-size: 16.5px; word-break: break-all; }
.req svg { width: 18px; height: 18px; color: var(--accent-text); flex: none; }
.req:active { background: var(--accent-soft); }

.tabs { display: flex; gap: 6px; margin: 16px 0 12px; background: var(--fill); padding: 4px; border-radius: 999px; }
.tabs button { flex: 1; padding: 9px 0; font-weight: 600; color: var(--muted); position: relative; font-size: 14.5px; text-align: center; border-radius: 999px; }
.tabs button.on { color: var(--accent-text); background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }

/* ---------- chat: a full-height view (phone) / a panel (desktop) ---------- */
.chatview { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--paper); height: var(--app-h); }
.chatview .top { position: static; margin: 0; padding: calc(var(--safe-top) + 6px) 10px 8px; border-bottom: 0; background: var(--surface); }
.chatview .top small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatview .feed { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 6px; }
.chatview .feed .note { align-self: center; text-align: center; color: var(--muted); font-size: 12.5px; background: var(--fill); padding: 6px 12px; border-radius: 12px; max-width: 90%; }
.chatview .bottom { background: var(--surface); border-top: 0; box-shadow: 0 -6px 20px rgba(20, 22, 26, .05); padding: 8px 10px calc(var(--safe-bottom) + 8px); }
.msg { max-width: 82%; padding: 8px 12px 6px; border-radius: 20px 20px 20px 6px; background: var(--surface); border: 0; align-self: flex-start; animation: pop .18s ease-out; box-shadow: var(--shadow); }
.msg.me { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--brand-btn); border-color: transparent; color: var(--accent-ink); }
.msg.me .who, .msg.me time { color: rgba(20, 22, 26, .65); }
.msg.adm { border-color: transparent; background: var(--accent-soft); }
.msg .who { font-size: 12px; font-weight: 600; color: var(--accent-text); margin-bottom: 1px; }
.msg .t { white-space: pre-wrap; word-wrap: break-word; font-size: 15px; line-height: 1.4; }
.msg time { display: block; text-align: right; font-size: 11px; color: var(--faint); margin-top: 2px; }
@keyframes pop { from { opacity: 0; transform: translateY(5px) scale(.98); } to { opacity: 1; transform: none; } }
.compose { display: flex; gap: 8px; align-items: flex-end; }
.compose .inp { flex: 1; border-radius: 22px; padding: 0 14px; }
.compose .inp textarea { padding: 10px 0; max-height: 120px; font-size: 16px; }
.compose .send { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-btn); color: var(--accent-ink); display: grid; place-items: center; flex: none; transition: transform .1s, opacity .15s; }
.compose .send svg { width: 19px; height: 19px; }
.compose .send:active { transform: scale(.92); }
.compose .send[disabled] { opacity: .4; }
.quick-replies { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; }
.quick-replies::-webkit-scrollbar { display: none; }
.chat-open { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--accent-text); font-weight: 800; margin-top: 12px; transition: transform .14s var(--ease); }
.chat-open:active { transform: scale(.98); }
.chat-open svg { width: 20px; height: 20px; }
.chat-open .sp { flex: 1; text-align: left; }
.chat-open small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }

/* ---------- wallet ---------- */
.qrbox { text-align: center; }
.qr { width: 200px; height: 200px; margin: 4px auto 10px; padding: 10px; border-radius: 18px; background: #fff; position: relative; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line); }
.qr svg { width: 100%; height: 100%; display: block; }
.qr .qrlogo { position: absolute; width: 40px; height: 40px; padding: 4px; border-radius: 12px; background: #fff; }
.qr .qrlogo svg, .qr .qrlogo img { width: 100%; height: 100%; display: block; border-radius: 9px; }
.netline { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.req.addr .mono { font-size: 15px; letter-spacing: .02em; line-height: 1.5; color: var(--muted); word-break: normal; overflow-wrap: anywhere; }
.inp input.mono { font-size: 14.5px; letter-spacing: 0; }
.req.addr .mono b { color: var(--ink); font-weight: 600; }
.note-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: var(--sky-soft); color: var(--ink); font-size: 13.5px; margin-top: 10px; }
.note-box svg { width: 18px; height: 18px; color: var(--sky); flex: none; margin-top: 1px; }
.inp.good { border-color: var(--green); }
.inp.bad { border-color: var(--red); }
.steps li .d { font-size: 11px; font-weight: 700; }

.chatview .feed .day { align-self: center; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--line); padding: 3px 12px; border-radius: 999px; margin: 6px 0 2px; position: sticky; top: 4px; z-index: 1; }
.jump { position: absolute; right: 14px; bottom: calc(var(--safe-bottom) + 132px); z-index: 2; display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700; box-shadow: 0 8px 20px rgba(247, 166, 0, .35); animation: pop .2s ease-out; }
.jump svg { width: 16px; height: 16px; }
.offline { position: fixed; z-index: 92; left: 12px; right: 12px; bottom: calc(var(--safe-bottom) + var(--nav-h) + 12px); display: flex; gap: 8px; align-items: center; padding: 11px 14px; border-radius: 14px; background: var(--amber-soft); color: var(--amber); font-size: 13.5px; font-weight: 600; border: 1px solid var(--amber); }
.offline svg { width: 18px; height: 18px; flex: none; }
.bars div { cursor: pointer; }

.unread { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11.5px; font-weight: 700; }
.unread svg { width: 12px; height: 12px; }

/* ---------- stats ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px; box-shadow: var(--shadow); transition: transform .14s var(--ease); }
.tile small { color: var(--muted); font-size: 12.5px; display: block; }
.tile b { font-size: 20px; font-weight: 800; display: block; margin-top: 2px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile em { color: var(--muted); font-size: 12px; }
.tile.alert b { color: var(--red); }
.tile.accent { background: var(--accent-soft); border-color: transparent; }
.tile.accent b { color: var(--accent-text); }
button.tile { text-align: left; display: block; width: 100%; transition: transform .1s; }
button.tile:active { transform: scale(.98); }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 104px; padding: 6px 2px 0; }
.bars div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.bars i { display: block; width: 100%; max-width: 20px; border-radius: 6px 6px 2px 2px; background: linear-gradient(var(--accent-2), var(--accent)); min-height: 2px; transform-origin: bottom; animation: grow .6s cubic-bezier(.2, .7, .2, 1); }
.bars i.zero { background: var(--line); }
.bars span { font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
@keyframes grow { from { transform: scaleY(.1); } to { transform: none; } }

/* ---------- switch ---------- */
.sw { width: 48px; height: 28px; border-radius: 99px; background: var(--line); position: relative; flex: none; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.3, .7, .3, 1.3); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.sw.on { background: var(--brand-btn); }
.sw.on.green { background: var(--green); }
.sw.on::after { transform: translateX(20px); }

/* bank card */
.bankcard { border-radius: 26px; padding: 18px; color: #fff; background: linear-gradient(135deg, #1b1d22, #3a3d45); position: relative; overflow: hidden; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 26px rgba(20, 22, 26, .22); }
.bankcard::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: 34%; height: 1px; background: rgba(255, 255, 255, .16); }
.bankcard.off { background: linear-gradient(135deg, #3f4a5c, #5b6678); box-shadow: none; }
.bankcard .t { display: flex; justify-content: space-between; font-weight: 500; font-size: 14px; position: relative; }
.bankcard .n { font-family: var(--mono); font-size: 20px; letter-spacing: .04em; position: relative; }
.bankcard .h { display: flex; justify-content: space-between; font-size: 12.5px; opacity: .85; position: relative; }

/* ---------- article (guides) ---------- */
.article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 2px 18px 18px; overflow-wrap: anywhere; color: var(--ink); }
.article h1 { font-size: 21px; margin: 16px 0 8px; font-weight: 600; }
.article h2 { font-size: 16.5px; margin: 20px 0 6px; font-weight: 600; }
.article h3 { font-size: 15px; margin: 14px 0 4px; }
.article h2 a, .article h3 a { color: inherit; }
.article p, .article li { color: var(--ink); }
.article em, .article i { font-style: normal; font-weight: 500; }
.article ul, .article ol { padding-left: 20px; }
.article code { font: .88em var(--mono); background: var(--fill); padding: 1px 5px; border-radius: 6px; }
.article blockquote { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 12px 12px 0; }
.article table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 13px; }
.article th, .article td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; }

/* ---------- bottom navigation: a small island (phone) / sidebar (desktop) ---------- */
.nav { position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 12px); transform: translateX(-50%); z-index: 30; width: max-content; max-width: calc(100% - 24px); padding: 6px;
  border-radius: 999px; background: var(--nav-bg); box-shadow: 0 12px 32px rgba(20, 22, 26, .2), 0 0 0 1px rgba(20, 22, 26, .06);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); }
.nav .in { max-width: none; margin: 0; display: flex; gap: 2px; }
.nav button { position: relative; display: flex; align-items: center; justify-content: center; height: 48px; min-width: 48px; padding: 0; border-radius: 999px; color: var(--faint); font-size: 13px; font-weight: 800;
  transition: background .3s var(--ease), color .25s var(--ease), padding .3s var(--ease); }
.nav button .pill { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; background: none; }
.nav button svg { width: 23px; height: 23px; transition: transform .3s var(--ease); }
.nav button .lbl { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .32s var(--ease), opacity .2s; }
.nav button:active .pill { transform: scale(.9); }
.nav button.on { background: var(--accent); color: var(--accent-ink); padding-right: 16px; box-shadow: 0 6px 16px rgba(247, 166, 0, .35); }
.nav button.on .pill { width: 44px; }
.nav button.on svg { stroke-width: 2.2; }
.nav button.on .lbl { max-width: 90px; opacity: 1; }
.nav .badge { position: absolute; top: 2px; left: 28px; margin: 0; border: 2px solid var(--nav-bg); box-sizing: content-box; }
.nav button.on .badge { left: 26px; }
.side { display: none; }
body.no-nav .nav { display: none; }

@media (max-width: 959px) {
  .nav { width: calc(100% - 24px); max-width: 520px; padding: 4px; }
  .nav .in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  .nav button { min-width: 0; height: 52px; flex-direction: column; gap: 0; padding: 2px 0; border-radius: 16px; font-size: 10px; }
  .nav button .pill, .nav button.on .pill { width: 28px; height: 28px; }
  .nav button svg { width: 20px; height: 20px; }
  .nav button .lbl, .nav button.on .lbl { max-width: 100%; opacity: 1; overflow: visible; font-size: 9px; line-height: 13px; font-weight: 700; }
  .nav button.on { padding-right: 0; }
  .nav .badge { top: 0; left: calc(50% + 4px); }
  .nav button.on .badge { left: calc(50% + 4px); }
}

/* ---------- bottom sheet / modal: full-screen, one look, one round close button ---------- */
.veil { position: fixed; inset: 0; background: var(--veil); z-index: 60; animation: fade .2s ease-out; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; height: calc(var(--app-h) - var(--safe-top) - 10px); background: var(--surface); border-radius: 30px 30px 0 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 18px calc(var(--safe-bottom) + 20px); animation: up .38s var(--ease); box-shadow: 0 -10px 40px rgba(11, 13, 16, .22); }
.sheet .in { max-width: 600px; margin: 0 auto; position: relative; min-height: 100%; }
.sheet .grip { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.sheet h3 { margin: 4px 60px 6px 0; font-size: 21px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.sheet.closing { animation: down .24s cubic-bezier(.4, 0, 1, 1) forwards; }
.veil.closing { animation: fade .24s ease-in reverse forwards; }
.sheet.pad { z-index: 72; }
.veil.pad-veil { z-index: 71; }
/* the round close button: the same everywhere — sheets, the viewer, the full-screen exit */
.rclose { width: 44px; height: 44px; border-radius: 50%; background: var(--fill); color: var(--ink); border: 0; box-shadow: none; }
.rclose svg { width: 20px; height: 20px; stroke-width: 2.2; }
.sheet .x { position: absolute; top: 0; right: 0; z-index: 2; }
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes down { to { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- the numpad ---------- */
.sheet.pad .in { display: flex; flex-direction: column; }
.sheet.pad .pdisp { flex: 1; }
.pdisp { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 26px 0 8px; }
.pdisp .pv { display: flex; align-items: baseline; justify-content: center; gap: 8px; max-width: 100%; }
.pdisp .pv b { font-size: clamp(38px, 12vw, 54px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdisp .pv b.zero { color: var(--faint); }
.pdisp .pu { font-size: 20px; font-weight: 700; color: var(--muted); }
.pdisp small { margin-top: 6px; min-height: 18px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.pdisp small.bad { color: var(--red); }
.pquick { justify-content: center; flex-wrap: wrap; margin: 6px 0 4px; }
.sheet .seg { margin: 6px 0 2px; }
.pkeys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px auto 14px; width: 100%; max-width: 360px; }
.pkeys button, .pkeys span { height: 62px; border-radius: 22px; }
.pkeys button { background: var(--fill); font-size: 26px; font-weight: 700; display: grid; place-items: center; transition: transform .1s, background .15s; }
.pkeys button:active { transform: scale(.94); background: var(--accent-soft); }
.pkeys button.del svg { width: 26px; height: 26px; }
.sheet.pad .btn { width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; }
@media (min-width: 960px) {
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, 92vw); height: min(720px, 90vh); transform: translate(-50%, -50%); border-radius: 28px; animation: pop .2s ease-out; }
  .sheet.closing { animation: fade .15s ease-in reverse forwards; }
  .sheet .grip { display: none; }
}

/* ---------- the viewer: PDF, photo, video — full screen with a clear close ---------- */
.viewer { position: fixed; inset: 0; z-index: 70; background: #0b0d10; color: #fff; display: flex; flex-direction: column; animation: fade .18s ease-out; height: var(--app-h); }
.viewer .vbar { display: flex; align-items: center; gap: 8px; padding: calc(var(--safe-top) + 8px) 10px 10px; background: rgba(11, 13, 16, .92); }
.viewer .vbar b { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer .vbtn { height: 38px; min-width: 38px; padding: 0 12px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 13.5px; font-weight: 600; }
.viewer .vbtn svg { width: 18px; height: 18px; }
.viewer .rclose { background: rgba(255, 255, 255, .16); color: #fff; }
.viewer .vbody { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.viewer canvas, .viewer img, .viewer video { max-width: none; border-radius: 6px; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .4); }
.viewer img, .viewer video { max-width: 100%; }
.viewer .vmsg { margin: auto; text-align: center; color: rgba(255, 255, 255, .8); max-width: 300px; }
.loader { width: 44px; height: 44px; margin: auto; color: var(--accent-2); }
.loader circle { stroke-dasharray: 90 150; stroke-linecap: round; animation: spin 1s linear infinite, dash 1.4s ease-in-out infinite; transform-origin: center; }
@keyframes dash { 0% { stroke-dasharray: 1 150; } 50% { stroke-dasharray: 90 150; } 100% { stroke-dasharray: 90 150; stroke-dashoffset: -124; } }

/* the full-screen exit pill */
.fs-exit { position: fixed; z-index: 90; top: calc(var(--safe-top) + 8px); left: 50%; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); animation: drop .22s ease-out; }
.fs-exit svg { width: 20px; height: 20px; stroke-width: 2.2; }

/* ---------- toast / skeleton / gate ---------- */
.toast { position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 12px); z-index: 95; max-width: calc(100% - 28px);
  padding: 11px 16px; border-radius: 14px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 500; animation: drop .22s ease-out; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.toast.bad { background: var(--red); color: #fff; }
@keyframes drop { from { transform: translate(-50%, -8px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.sk { border-radius: 14px; background: linear-gradient(90deg, var(--sk-a) 0%, var(--sk-b) 50%, var(--sk-a) 100%); background-size: 200% 100%; animation: sh 1.1s linear infinite; }
@keyframes sh { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.gate { min-height: 76vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 12px; }
.gate img { width: 68px; height: 68px; border-radius: 20px; }
.gate h1 { font-size: 21px; margin: 18px 0 6px; font-weight: 600; }
.gate p { color: var(--muted); margin: 0 0 4px; max-width: 320px; }
.gate .btn { max-width: 300px; }
.foot { text-align: center; color: var(--faint); font-size: 12px; margin-top: 26px; }
.media { width: 100%; border-radius: var(--r-s); margin-top: 8px; background: var(--fill); display: block; }
.stars { color: #f7a600; letter-spacing: 1px; }
.grid2 > * { min-width: 0; }

/* ---------- flat cards: no outlines, the soft shadow does the separation ---------- */
.box, .list, .tile, .line, .inbox .item, .hub button, .chat-open, .article, .quick button, .chatview .feed .day { border-color: transparent; }
.tile.accent b, .kv.total > b { color: var(--accent-text); }
.tile { border-radius: var(--r); }
.badge { background: var(--red); }

/* ---------- desktop: a sidebar and two columns ---------- */
@media (min-width: 960px) {
  :root { --nav-h: 0px; }
  body { display: grid; grid-template-columns: 252px 1fr; }
  .nav { display: none; }
  .side { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; padding: 20px 12px; border-right: 1px solid var(--line); background: var(--surface); overflow-y: auto; }
  .side .brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-weight: 700; font-size: 17px; }
  .side .brand img { width: 34px; height: 34px; border-radius: 11px; }
  .hero { margin: 0; border-radius: 32px; padding: 22px 26px 50px; }
  .hero .top { margin: 0 0 6px; padding: 0; }
  .hero .top.root { top: 20px; right: 24px; margin: 0; }
  :root[data-theme="dark"] { --nav-h: 0px; }
  :root[data-theme="dark"] .hero { padding: 22px 0 6px; }
  :root[data-theme="dark"] .deck { margin: 0; padding: 12px 0 0; }
  .deck { margin: -30px 0 0; padding: 20px 18px 0; }
  .side button { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 999px; color: var(--muted); font-weight: 500; font-size: 14.5px; text-align: left; position: relative; }
  .side button svg { width: 20px; height: 20px; flex: none; }
  .side button:hover { background: var(--fill); color: var(--ink); }
  .side button.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
  .side .badge { margin-left: auto; }
  .side .grow { flex: 1; }
  .side .sub { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); padding: 16px 12px 6px; }
  #app { max-width: 1040px; width: 100%; padding: 24px 32px 48px; }
  .top { margin: -24px -32px 10px; padding: 16px 32px 12px; }
  .grid2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 0 24px; align-items: start; }
  .grid2 > .col > .sec:first-child { margin-top: 6px; }
  .tiles.four { grid-template-columns: repeat(4, 1fr); }
  .dock { bottom: 12px; }
  .chatview { left: 252px; }
  .chatview .feed { padding: 18px 10% 10px; }
  .chatview .bottom { padding: 10px 10% 14px; }
  .balance .sum { font-size: 40px; }
}

@media (max-width: 360px) {
  .balance .sum { font-size: 29px; }
  .quick button { font-size: 11.5px; }
  .quick button span { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- strict pass: Tonkeeper's structure in Bybit's colors — flat, quiet, no decoration ---------- */
:root { --brand: #101215; --lattice: none; --brand-glow: none; --shadow: none; --r: 20px; --r-s: 16px; }
:root[data-theme="dark"] { --brand: #101215; --surface: #15181c; --raised: #1b1f24; --paper: #0b0d0f; }
/* no glows, no comets, no pulses, no floating */
.hero { background: var(--brand); }
.hero::before, .hero::after, .hero > .trail, .bal .trail, .chip3d { display: none !important; }
:root:not([data-theme="dark"]) body::before { display: none; }
:root[data-theme="dark"] body::before { background: var(--paper); }
.dot, .line .dot { display: none; }
.dot.on::after { display: none; }
.empty .art .float, .empty .art .ring { animation: none; }
.btn, .chip.on, .nav button.on, .jump, .hub button span, .tile, .box, .list, .line, .inbox .item, .promo { box-shadow: none !important; }
.screen.lift .deck > *, .screen.lift .list > .row, .screen.lift .col > * { animation-duration: .3s; }

/* the balance: centred, big, no card */
.hero { border-radius: 0 0 28px 28px; padding-bottom: 28px; }
.bal { text-align: center; margin-top: 10px; }
:root[data-theme="dark"] .bal { background: none; box-shadow: none; padding: 6px 0 0; border-radius: 0; overflow: visible; }
:root[data-theme="dark"] .bal::before { display: none; }
.bal .lbl { justify-content: center; margin-top: 0; gap: 10px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.hero .sum { padding-right: 0; font-size: clamp(38px, 12vw, 52px); display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; }
.hero .sum small { display: inline-flex; align-items: center; margin-left: 6px; font-size: 18px; font-weight: 700; }
.hero .sub { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.hero .facts { justify-content: center; }
.hero .quick { margin-top: 20px; }
.hero .quick button span { background: rgba(255, 255, 255, .1); color: var(--accent); width: 56px; height: 56px; }
.hero .quick button:active span { background: rgba(255, 255, 255, .18); transform: scale(.94); }
.hero .quick button { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .85); }
:root[data-theme="dark"] .hero .quick button span { background: rgba(255, 255, 255, .1); color: var(--accent); }

/* icon tiles: one neutral look; the accent only where it matters */
.row .ic, .inbox .ic { background: var(--fill) !important; color: var(--ink) !important; box-shadow: none !important; }
.row .ic.sea, .row .ic.accent, .row .ic.amber, .inbox .ic.accent, .inbox .ic.amber { background: var(--accent-soft) !important; color: var(--accent-text) !important; }
.row .ic.red, .inbox .ic.red { background: var(--red-soft) !important; color: var(--red) !important; }
.hub button span, .quick button span { background: var(--fill); color: var(--accent-text); }
:root[data-theme="dark"] .hub button span { color: var(--accent); }
.role-ava.m { background: var(--accent); color: var(--accent-ink); }
.role-ava.p { background: #4a4f57; }
.role-ava.o { background: #2b2f36; }
.bars i { background: var(--accent); }
.btn.red { background: var(--red); box-shadow: none; }
/* tags: quiet; the colour is the text, not the fill */
.tag { background: var(--fill); font-weight: 700; }
.tag.green { background: var(--fill); color: var(--green); }
.tag.red { background: var(--fill); color: var(--red); }
.tag.amber, .tag.sea, .tag.accent { background: var(--accent-soft); color: var(--accent-text); }
.tag.blue { background: var(--fill); color: var(--ink); }
.hero .tag { background: rgba(255, 255, 255, .1); }
.kpis button.hot b::after { display: none; }
.kpis button.hot { box-shadow: inset 0 0 0 1px rgba(247, 166, 0, .6); }
.line { gap: 12px; }
.line .mid b { font-weight: 700; }

/* inputs, rows, sections */
.inp { border-radius: 16px; }
.inp:focus-within { box-shadow: none; border-color: var(--accent); }
.sec h2 { font-size: 17px; font-weight: 700; letter-spacing: 0; }
.sec a, .sec button { font-weight: 600; color: var(--accent-text); }
.row { min-height: 64px; }
.row + .row { border-top-color: var(--line); }
.tile b { font-weight: 700; }
.seg, .tabs { background: var(--fill); }
.seg button.on, .tabs button.on { background: var(--surface); box-shadow: none; }
:root[data-theme="dark"] .seg button.on, :root[data-theme="dark"] .tabs button.on { background: var(--raised); color: var(--accent); }
.toast { border-radius: 16px; font-weight: 600; }

/* the island: no glow */
.nav { box-shadow: 0 0 0 1px var(--line); }
.nav button.on { background: var(--accent); }

/* the numpad: round keys */
.pkeys { grid-template-columns: repeat(3, 76px); justify-content: center; gap: 14px 22px; max-width: none; }
.pkeys button, .pkeys span { width: 76px; height: 76px; border-radius: 50%; }
.pkeys button { font-size: 28px; font-weight: 600; background: var(--fill); }
.pkeys button:active { background: var(--accent); color: var(--accent-ink); transform: scale(.94); }
.pkeys button.del { background: none; }
.pkeys button.del:active { background: var(--fill); color: var(--ink); }

.badge { background: #d83b3b; color: #fff; }
.empty .art .ring { display: none; }

/* ---------- banners: a dark card with a thin edge, glass art and a ring coin ---------- */
.promos { scroll-padding: 0 14px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -14px 4px; padding: 2px 14px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.promos::-webkit-scrollbar { display: none; }
.promo { position: relative; flex: 0 0 min(92%, 360px); min-height: 124px; padding: 18px 18px 16px; border-radius: 26px; overflow: hidden; scroll-snap-align: start; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #141920 0%, #0d1014 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14) !important; }
.promo:active { transform: scale(.985); }
.promo .ptxt { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 90px; gap: 12px; max-width: 54%; }
.promo .ptxt b { font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.005em; }
.promo .pcta { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .55); }
.promo .pcta svg { width: 14px; height: 14px; stroke-width: 2.4; }
.promo .part { position: absolute; right: -14px; bottom: -22px; width: 190px; height: 146px; z-index: 1; pointer-events: none; }
.promo .pcoin { position: absolute; z-index: 2; right: -12px; bottom: -14px; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle at 70% 85%, #f7a600 0%, #5b3a05 38%, #14181e 75%); box-shadow: 0 0 0 3px rgba(255, 255, 255, .6), 0 0 34px rgba(247, 166, 0, .45); }
.promo .pcoin img { width: 46px; height: 46px; object-fit: contain; }
.promo .pcoin.bnb { background: none; }
.promo .pcoin.bnb img { width: 100%; height: 100%; border-radius: 50%; }
.promo .px { position: absolute; z-index: 3; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); }
.promo .px svg { width: 16px; height: 16px; stroke-width: 2.2; }

/* balance: the whole part big, the cents small and quiet; the network chip */
.hero .sum .dec { font-size: .55em; font-weight: 700; color: rgba(255, 255, 255, .5); align-self: flex-end; padding-bottom: .12em; margin-left: 2px; }
.hero .sum small { margin-left: 8px; }
.hero .sub { display: flex; align-items: center; justify-content: center; gap: 8px; }
.hero .sub .net { padding: 2px 8px; border-radius: 6px; background: rgba(247, 166, 0, .16); color: var(--accent); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
/* the round buttons of the home: dark discs, white glyphs */
.hero .quick button span, :root[data-theme="dark"] .hero .quick button span { width: 62px; height: 62px; background: rgba(255, 255, 255, .09); color: #fff; }
.hero .quick button svg { width: 25px; height: 25px; stroke-width: 2.1; }
.hero .quick button { color: rgba(255, 255, 255, .6); }
.hero .bar .ibtn { background: rgba(255, 255, 255, .09); }