/* Onyx: the approved banking design. Loaded after the legacy layout so existing
   routes, controls and functional selectors remain intact. */
html[data-design='onyx'] {
  --workspace-max-width:1280px; --workspace-gutter:16px;
  --bg:#101010; --panel:#151515; --panel-2:#1b1b1b; --panel-3:#191919; --panel-4:#222222;
  --text:#f4f4f0; --soft:#dadad6; --muted:#aaa9a4;
  --line:#363636; --line-soft:#303030; --line-2:#404040;
  --site-glow-violet:rgba(52,116,47,.29); --site-glow-blue:rgba(30,93,53,.34);
  --site-stars:rgba(164,209,143,.17);
  --site-dot:rgba(255,255,255,.22);
  --site-dot-wave:rgba(174,255,201,.96); --site-dot-halo:rgba(130,255,170,.58);
  --mint:#f2f2ee; --mint-strong:#ffffff; --on-mint:#121212;
  --mint-dim:rgba(242,242,238,.1); --mint-faint:rgba(242,242,238,.06);
  --mint-line:#6d6d69; --mint-hover:#ffffff; --hover-border:#b6b6b0;
  --blue:#dadad6; --danger:#ff9c8e; --code-text:#deded8;
  --nav-bg:rgba(16,16,16,.97); --nav-border:#333333;
  --progress-track:#373737; --toggle-track:#414141; --toggle-knob:#c7c7c0; --toggle-knob-on:#151515;
  --modal-bg:#191919; --modal-border:#454545; --modal-icon-text:#101010;
  --backdrop:rgba(0,0,0,.75); --shadow:0 20px 64px rgba(0,0,0,.4);
  --toast-bg:#f2f2ee; --toast-text:#101010; --icon-soft:#d2d2cb;
  --avatar-grad:linear-gradient(145deg,#f2f2eb,#deded7); --avatar-text:#141414;
  --checkout-grad:var(--panel); --checkout-border:var(--line); --checkout-label:var(--muted);
  --premium-bg:#181816; --premium-border:#8d7953;
  --skel-bg:#222222; --skel-line:#343434; --skel-shine:rgba(255,255,255,.06);
}
html[data-design='onyx'][data-theme='light'] {
  --bg:#f7f7f4; --panel:#ffffff; --panel-2:#f6f6f2; --panel-3:#eeeee9; --panel-4:#e8e8e2;
  --text:#161616; --soft:#33332f; --muted:#62625d;
  --line:#d2d2c9; --line-soft:#deded6; --line-2:#a8a89e;
  --site-glow-violet:rgba(119,180,92,.17); --site-glow-blue:rgba(73,145,88,.14);
  --site-stars:rgba(60,100,47,.16);
  --site-dot:rgba(0,0,0,.22);
  --site-dot-wave:rgba(42,116,67,.86); --site-dot-halo:rgba(74,166,100,.46);
  --mint:#171717; --mint-strong:#000000; --on-mint:#ffffff;
  --mint-dim:rgba(0,0,0,.08); --mint-faint:rgba(0,0,0,.04); --mint-line:#777770; --mint-hover:#343434;
  --hover-border:#555550; --danger:#aa3427; --code-text:#343430;
  --nav-bg:rgba(250,250,246,.97); --nav-border:#d2d2c9;
  --progress-track:#d6d6cd; --toggle-track:#cbcbc2; --toggle-knob:#ffffff; --toggle-knob-on:#ffffff;
  --modal-bg:#ffffff; --modal-border:#b7b7ad; --backdrop:rgba(12,12,12,.5);
  --shadow:0 20px 64px rgba(0,0,0,.14); --icon-soft:#343430;
  --toast-bg:#171717; --toast-text:#ffffff;
  --skel-bg:#e4e4de; --skel-line:#d2d2c9; --skel-shine:rgba(255,255,255,.6);
}
body { font-size:14px; line-height:1.45; background-color:var(--bg); background-image:
  radial-gradient(circle,var(--site-dot) .9px,transparent 1.3px);
  background-size:24px 24px; background-repeat:repeat; background-attachment:fixed; }
body::before { content:none; }
button, input, select, textarea { font-family:inherit; }
button { -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline:2px solid var(--text); outline-offset:3px; }
svg { max-width:100%; }
.main-content { padding:16px var(--workspace-gutter) calc(88px + env(safe-area-inset-bottom,0px)); }
.app-shell:has(#view-root[data-page='dashboard']) .main-content {
  padding:16px var(--workspace-gutter) calc(88px + env(safe-area-inset-bottom,0px));
}
html.telegram-webapp .main-content,
html.telegram-webapp .app-shell:has(#view-root[data-page='dashboard']) .main-content {
  padding-top:calc(12px + max(88px, env(safe-area-inset-top,0px), var(--tg-content-safe-area-inset-top,0px), var(--tg-safe-area-inset-top,0px)));
}
.topbar { gap:8px; margin:0 0 16px; min-height:44px; }
.topbar-user { min-width:0; gap:10px; padding:0; border:0; background:transparent; border-radius:12px; }
.topbar-user .avatar { width:34px; height:34px; flex:0 0 auto; }
.topbar-user-name { display:grid; gap:1px; text-align:left; }
.topbar-user-name strong { font-size:17px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-user-name small { font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-chevron { font-size:20px; }
.topbar-tools { gap:8px; }
.notif-btn, .theme-toggle { width:44px; min-height:44px; border:0; background:transparent; color:var(--text); }
.notif-badge { top:1px; right:0; }
.notif-badge[hidden] { display:none; }
.page-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.page-head h2 { min-width:0; flex:1; margin:0; font-size:22px; font-weight:750; line-height:1.25; letter-spacing:-.035em; overflow-wrap:anywhere; }
.icon-back { width:44px; min-height:44px; flex:0 0 44px; border:0; border-radius:10px; background:transparent; color:var(--text); font-size:28px; }
.button { min-height:44px; padding:10px 14px; border-radius:12px; font-size:13px; font-weight:700; box-shadow:none; }
.button-primary { background:var(--mint); color:var(--on-mint); border:1px solid var(--mint); }
.button-primary:hover { background:var(--mint-hover); color:var(--on-mint); }
.button-quiet, .mini-btn { border:1px solid var(--line-2); background:var(--panel); color:var(--text); }
.button-quiet:hover, .mini-btn:hover { border-color:var(--hover-border); background:var(--panel-2); }
.panel, .stat-card, .row-item, .referral-card, .locations-panel,
.dash-stat-card, .support-topic, .plan-option, .plan-server-details { border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:none; }
.panel { padding:16px; }
.panel-header { gap:12px; margin-bottom:12px; }
.panel-title { font-size:14px; }
.online-badge { flex:0 0 auto; padding:4px 8px; font-size:11px; background:var(--panel-3); color:var(--text); border-color:var(--line-2); }
.label, .eyebrow { font-family:inherit; font-size:11px; letter-spacing:0; text-transform:none; }
.empty-state, .panel-empty, .account-error, .access-notice { border-radius:14px; }
.access-notice { padding:14px; border:1px solid var(--line); background:var(--panel); }

/* Bank cards: neutral silver for Standard, obsidian for Premium. */
.bank-card.tariff-card, .bank-card.tariff-card.unset-card {
  --card-ink:#181818; --card-muted:#55554f; --card-rule:rgba(24,24,24,.22);
  position:relative; display:flex; flex-direction:column; justify-content:flex-start;
  flex:0 0 100%; width:100%; max-width:none; min-height:0; height:auto;
  container-type:normal; gap:12px; padding:16px; border-radius:18px;
  border:1px solid #c5c5ba; color:var(--card-ink);
  background:linear-gradient(118deg,#f4f4ee 0%,#e8e8e0 58%,#f0f0e9 100%); box-shadow:none;
}
.bank-card.tariff-card::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(171deg,rgba(255,255,255,.12) 0,rgba(255,255,255,.12) 1px,transparent 1px,transparent 4px);
}
.bank-card.tariff-card::after {
  content:'FE'; position:absolute; inset:auto 12px 30px auto; font:850 94px/.9 Manrope,system-ui,sans-serif;
  letter-spacing:-.13em; color:var(--card-ink); opacity:.065; transform:skew(-10deg); pointer-events:none;
  background:none;
}
.bank-card.tariff-card.gold {
  --card-ink:#ead6ac; --card-muted:#cbbd9e; --card-rule:rgba(234,214,172,.24);
  background:linear-gradient(120deg,#22221f,#131312); border-color:#8d7953; color:var(--card-ink);
}
.bank-card.tariff-card.gold::before { background:none; }
.bank-card.tariff-card.selected { border-color:#bdbdb0; box-shadow:0 0 0 1px rgba(244,244,238,.2); }
.bank-card.tariff-card.gold.selected { border-color:#d7bf8b; box-shadow:0 0 0 1px rgba(215,191,139,.2); }
.bank-card.tariff-card:hover { border-color:#8a8a7d; }
.bank-card.tariff-card.gold:hover { border-color:#d7bf8b; }
.card-top { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; }
.card-brand { grid-column:1; grid-row:1; font:800 18px/1.1 Manrope,system-ui,sans-serif; letter-spacing:-.045em; text-transform:none; -webkit-text-stroke:0; }
.card-top .card-status { grid-column:2; grid-row:1; justify-self:end; align-self:center; }
.card-brand i, .card-brand .brand-fix, .card-brand .brand-error, .card-brand .brand-vpn { color:var(--card-ink); }
.card-top-left { grid-column:1; grid-row:2; gap:8px; }
.card-chip { width:28px; height:22px; border-radius:5px; background:linear-gradient(130deg,#282828,#090909); }
.card-chip::after { inset:4px; border-color:rgba(230,230,220,.27); }
.bank-card.gold .card-chip { background:linear-gradient(130deg,#e9d6a8,#a78c57); }
.card-contactless, .bank-card.gold .card-contactless, .bank-card.unset-card .card-contactless { color:var(--card-ink); width:19px; height:19px; }
.card-info { flex:0 0 auto; gap:8px; }
.card-status { align-self:flex-start; padding:3px 8px; border:0; background:#d1ebcd; color:#28522e; font:600 10px/1.5 Manrope,system-ui,sans-serif; letter-spacing:0; text-transform:none; }
.card-status i { background:#448a4e; }
.bank-card.gold .card-status { color:#f0dfb7; background:#3d3626; border:0; }
.card-balance-block { gap:3px; }
.card-balance-block small, .bank-card.gold .card-balance-block small { font:500 12px/1.4 Manrope,system-ui,sans-serif; color:var(--card-muted); letter-spacing:0; text-transform:none; }
.card-balance-block strong, .bank-card.gold .card-balance-block strong { color:var(--card-ink); font-size:34px; line-height:1.05; letter-spacing:-.055em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.card-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:6px 12px; padding-top:10px; border-top:1px solid var(--card-rule); }
.card-grid > span { min-width:0; }
.card-grid > span:last-child { grid-column:1 / -1; display:flex; align-items:center; gap:6px; }
.card-grid small { display:block; color:var(--card-muted); font:500 10px/1.4 Manrope,system-ui,sans-serif; text-transform:none; letter-spacing:0; }
.card-grid b { color:var(--card-ink); margin-top:2px; font-size:11px; font-weight:650; overflow-wrap:anywhere; }
.card-name, .bank-card.gold .card-name { color:var(--card-ink); font-size:20px; }
.card-sub, .bank-card.gold .card-sub, .bank-card.unset-card .card-sub { color:var(--card-muted); font-size:11px; line-height:1.4; margin:0; }
.card-product { gap:4px; }
.card-bottom { gap:8px; margin-top:auto; align-items:center; min-width:0; }
.card-price, .bank-card.gold .card-price { color:var(--card-ink); font-size:26px; white-space:nowrap; }
.card-price small, .bank-card.gold .card-price small { color:var(--card-muted); font-size:11px; margin-left:3px; }
.card-holder { margin:0; min-width:0; max-width:55%; text-align:left; align-items:flex-start; }
.card-holder b, .bank-card.gold .card-holder b, .bank-card.unset-card .card-holder b { color:var(--card-muted); font:600 10px/1.3 Manrope,system-ui,sans-serif; letter-spacing:0; text-transform:none; }
.card-valid, .bank-card.gold .card-valid { color:var(--card-muted); font:500 10px/1.3 Manrope,system-ui,sans-serif; letter-spacing:0; white-space:nowrap; }
.card-ownership { display:grid; gap:2px; min-width:0; text-align:right; }
.card-ownership .card-holder { max-width:100%; align-items:flex-end; }
.card-features { margin:0; gap:8px; }
.card-features > span, .bank-card.gold .card-features > span, .bank-card.unset-card .card-features > span { border-color:var(--card-rule); }
.card-features small, .bank-card.gold .card-features small, .bank-card.unset-card .card-features small { color:var(--card-muted); font-size:10px; }
.card-features b, .bank-card.unset-card .card-features b { color:var(--card-ink); font-size:12px; }
.card-note-line, .bank-card.gold .card-note-line { color:var(--card-muted); font-size:10px; }
.bank-card .card-switch-cta, .bank-card.gold .card-switch-cta { min-height:44px; padding:8px; background:transparent; border:1px solid var(--card-rule); color:var(--card-ink); font-size:11px; margin:0; }
.unset-card .unset-card-body { gap:6px; }
.unset-card .unset-status { color:var(--card-muted); font-size:11px; }
.unset-card .unset-cta { background:#191919; color:#f4f4ee; border-color:#191919; }

/* Dashboard: full bank card, four actions, two dense summaries. */
.balance-block { display:grid; gap:12px; margin:0 0 12px; }
.app-shell:has(#view-root[data-page='dashboard']) .dash-plan-card { margin:0; padding:0; width:100%; }
.app-shell:has(#view-root[data-page='dashboard']) .dash-plan-card .bank-card { flex-basis:100%; min-height:0; padding:16px; max-width:none; }
.quick-row.dash-quick { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0; margin:0; border:0; background:none; }
.dash-quick .quick-circle { min-width:0; min-height:76px; justify-content:center; gap:6px; padding:8px 3px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.dash-quick .qc-icon { width:28px; height:28px; border:0; border-radius:0; background:none; }
.dash-quick .qc-icon svg { width:25px; height:25px; }
.dash-quick .quick-circle small { color:var(--text); font-size:10px; min-height:0; line-height:1.3; overflow-wrap:normal; }
.bento { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; }
.bento .dash-stat-card { display:grid; grid-template-columns:minmax(0,1fr) 22px; gap:8px; padding:14px; min-height:0; height:auto; }
.bento .dash-stat-card > div, .bento .dash-stat-card > span:first-child { width:100%; max-width:100%; gap:8px; }
.bento .dash-stat-card .dash-stat-icon { display:inline-flex; position:static; order:0; grid-column:2; grid-row:1; width:22px; height:22px; font-size:20px; color:var(--text); }
.dash-stat-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bento .dash-stat-card > div, .bento .dash-stat-card > span:first-child { grid-column:1 / -1; grid-row:1; }
.bento .dash-stat-card h4, .bento .dash-stat-card .dash-stat-label { padding-right:26px; min-height:0; }
.bento .dash-stat-card > div > small, .bento .dash-stat-card > span:first-child > small { min-height:0; }
.bento .dash-stat-card h4, .bento .dash-stat-label { font-size:12px; min-height:0; margin:0; color:var(--soft); }
.bento .dash-stat-card strong { margin:8px 0; font-size:23px; letter-spacing:-.04em; }
.bento .dash-stat-card strong small { display:inline; font-size:10px; color:var(--muted); }
.bento .dash-stat-card small { font-size:10px; min-height:0; line-height:1.4; }
.duo-progress { height:5px; margin:8px 0 6px; }

/* Payment: the product cards are swipeable; controls retain their existing behavior. */
.payment-view { display:grid; align-content:start; gap:12px; max-width:1024px; margin:0 auto; }
.payment-view > * { min-width:0; margin:0; }
.payment-view .page-head { margin:0; }
.payment-card-switcher { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:8px; align-items:center; }
.payment-card-switcher > .car-arrow { display:block; grid-row:2; }
.payment-card-switcher > .car-arrow:first-child { grid-column:1; }
.payment-card-switcher > .car-arrow[data-action='car-next'] { grid-column:3; }
.car-arrow { width:44px; height:44px; border:1px solid var(--line); background:var(--panel); color:var(--text); }
.payment-card-switcher .card-track { grid-column:1 / -1; grid-row:1; width:100%; max-width:none; justify-content:flex-start; gap:12px; padding:2px; margin:0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.payment-card-switcher .bank-card.tariff-card { flex:0 0 88%; scroll-snap-align:center; }
.payment-card-switcher .product-card { gap:10px; padding:16px; }
.payment-card-switcher .product-card .card-top { grid-template-columns:minmax(0,1fr) auto; }
.payment-card-switcher .product-card .card-top-left { grid-column:2; grid-row:1; }
.payment-card-switcher .product-card .card-top .card-status { grid-column:1; grid-row:2; justify-self:start; }
.payment-card-switcher .product-card .card-bottom { margin-top:0; }
.payment-card-switcher .product-card .card-ownership { max-width:45%; }
.payment-card-switcher .product-card .card-holder b { overflow-wrap:anywhere; }
.payment-card-switcher .card-track { align-items:stretch; }
.payment-product-details { padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.payment-product-details .card-features > span { padding:0; border:0; }
.payment-product-details .card-features small { color:var(--muted); font-size:11px; }
.payment-product-details .card-features b { color:var(--text); font-size:14px; }
.payment-product-details .card-note-line { color:var(--muted); font-size:10px; margin:8px 0 0; }
.card-dots { display:flex; grid-column:2; grid-row:2; gap:0; margin:0; justify-content:center; }
.card-dot { height:44px; }
.payment-step { padding:0; margin:0; border:0; background:none; }
.period-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.period-choice { min-width:0; min-height:64px; padding:8px 4px; gap:2px; }
.period-choice strong { font-size:12px; }
.period-choice span { font-size:11px; }
.period-choice small { font-size:10px; }
.period-choice.selected { color:var(--on-mint); background:var(--mint); border-color:var(--mint); box-shadow:none; }
.period-choice.selected small { color:var(--on-mint); }
.period-choice.custom-choice { grid-column:1 / -1; flex-direction:row; justify-content:space-between; flex-wrap:wrap; min-height:44px; padding:10px 12px; gap:6px; }
.period-choice.custom-choice strong { font-size:14px; }
.period-choice.custom-choice.selected small { color:var(--on-mint); }
.checkout-bar { display:grid; grid-template-columns:minmax(70px,1fr) minmax(0,1.75fr); gap:12px; padding:12px; margin:0; }
.checkout-bar .label { font-size:10px; line-height:1.4; letter-spacing:0; }
.checkout-bar strong { font-size:24px; margin:3px 0 0; }
.checkout-bar .button { min-width:0; min-height:48px; padding:10px; white-space:normal; line-height:1.35; }
/* The single payment action stays above the mobile navigation, as in a banking
   app. Matching page padding lets the final panels scroll clear of both bars. */
.payment-view .checkout-bar { position:fixed; z-index:21; left:var(--workspace-gutter); right:var(--workspace-gutter); bottom:calc(84px + env(safe-area-inset-bottom,0px)); background:var(--panel); border:1px solid var(--line-2); border-radius:14px; box-shadow:0 0 0 8px var(--bg); }
.app-shell:has(#view-root[data-page='payment']) .main-content { padding-bottom:calc(188px + env(safe-area-inset-bottom,0px)); }
.payment-links { gap:8px; margin:0; }
.payment-links .button { padding-inline:8px; font-size:12px; }
.payment-intro { padding:12px; border:1px solid var(--line); background:var(--panel); border-radius:12px; }
.payment-intro h2 { margin:4px 0; font-size:18px; }
.payment-intro p { margin:0; color:var(--muted); font-size:12px; }
.amount-row { gap:8px; padding:8px; }
.amount-input-wrap { min-width:0; }
.amount-input-wrap input { width:100%; max-width:120px; min-height:44px; font-size:18px; }

/* Comparison retains every plan fact, flag and server disclosure. */
.view.plan-picker-view { display:flex; flex-direction:column; gap:12px; }
.plan-picker-view > * { margin:0; }
.plan-picker-view .page-head { order:0; }
.plan-picker-view .plan-picker-grid { order:1; }
.plan-picker-view .plan-picker-intro { order:2; }
.plan-picker-view .plan-change-control { order:3; margin:0; }
.plan-picker-view .plan-server-info { order:4; }
.plan-picker-view .plan-picker-note { order:5; }
.plan-picker-intro { padding:12px; margin:0 0 12px; gap:4px; }
.plan-picker-lead { font-size:13px; font-weight:600; }
.plan-picker-trial { font-size:11px; }
.plan-picker-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.plan-option { padding:10px; gap:10px; border-radius:14px; }
.plan-option-type { margin:0; font-family:inherit; font-size:10px; letter-spacing:0; }
.plan-option-premium { background:var(--panel); }
.plan-picker-grid .plan-option .bank-card { min-height:0; padding:10px; gap:8px; border-radius:12px; }
.plan-picker-grid .card-brand { font-size:12px; }
.plan-picker-grid .card-name { font-size:15px; }
.plan-picker-grid .card-sub { font-size:10px; }
.plan-picker-grid .card-price { font-size:19px; }
.plan-picker-grid .card-price small { font-size:9px; }
.plan-picker-grid .bank-card.gold .card-name { font-size:15px; }
.plan-picker-grid .bank-card.gold .card-price { font-size:19px; }
.plan-picker-grid .bank-card.gold .card-price small { font-size:9px; }
.plan-picker-grid .bank-card.gold .card-sub { font-size:10px; }
.plan-picker-grid .card-bottom { flex-wrap:wrap; margin-top:0; }
.plan-picker-grid .card-holder { max-width:100%; }
.plan-option-benefits > div { display:grid; gap:2px; padding:7px 0; }
.plan-option-benefits span { font-size:10px; }
.plan-option-benefits strong { font-size:12px; flex:initial; white-space:normal; }
.plan-option-detail { font-size:11px; }
.plan-option-flags { gap:6px; }
.plan-option-action { margin:0; font-size:10px; }
.plan-server-info { gap:12px; margin-top:12px; }
.plan-change-control { padding:10px 12px; gap:10px; margin:0 0 12px; }
.plan-change-control small { white-space:normal; }

/* One consistent compact list family on every utility page. */
.row-list, .document-list, .settings-list, .device-list { display:grid; gap:12px; }
.settings-list { border-top:0; }
.row-item { min-height:64px; padding:12px; gap:12px; }
.row-item strong { font-size:13px; line-height:1.35; }
.row-item small { white-space:normal; overflow:visible; text-overflow:clip; font-size:11px; line-height:1.4; }
.row-icon { width:28px; height:28px; border:0; background:transparent; border-radius:0; flex:0 0 28px; color:var(--text); }
.row-icon svg { width:23px; height:23px; }
.vpn-view .page-head > .button { flex:1 0 100%; width:100%; }
.vpn-overview-grid { gap:12px; margin-bottom:12px; }
.key-box { gap:8px; flex-wrap:wrap; }
.key-box code { flex:1 0 100%; padding:0; font:12px/1.5 Manrope,system-ui,sans-serif; white-space:normal; overflow-wrap:anywhere; color:var(--code-text); }
.key-box button { min-height:44px; flex:1; min-width:0; padding:10px 8px; font-size:12px; border-radius:10px; }
.vpn-key-card { padding:16px; }
.device-row { padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.device-name { min-width:0; gap:12px; }
.device-name strong { font-size:13px; overflow-wrap:anywhere; }
.device-symbol { font-size:23px; background:transparent; }
.device-addon-box { padding:14px; margin-top:12px; border-radius:12px; }
.device-addon-actions { gap:8px; }
.locations-head { padding:16px 16px 12px; gap:12px; }
.locations-head h2 { font-size:20px; margin:3px 0; }
.locations-head p { font-size:12px; margin:0; }
.location-tabs { padding:0 16px 12px; gap:8px; }
.location-tab { min-height:44px; padding:8px 12px; font-size:12px; border-radius:10px; background:var(--panel); }
.location-tab.active { color:var(--on-mint); background:var(--mint); }
.location-groups { padding:0 16px 16px; gap:16px; }
.server-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
.server-row { grid-template-columns:32px minmax(0,1fr) auto auto; gap:8px; min-height:66px; padding:10px; border-radius:12px; }
.server-flag { width:32px; height:32px; background:transparent; }
.server-copy strong { font-size:12px; }
.server-copy small { font-size:10px; }
.server-status { font-size:10px; }
.operations-panel { padding:0 14px; }
.operations-history { gap:0; }
.operation-row { padding:16px 0; gap:12px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; }
.operation-row:last-child { border-bottom:0; }
.operation-row > div { min-width:0; }
.operation-row strong { font-size:13px; }
.operation-row small { font-size:11px; overflow-wrap:anywhere; }
.operation-row b { font-size:15px; white-space:nowrap; }
.operation-credit { color:#a4e2ad; }
.operation-debit { color:var(--text); }
[data-theme='light'] .operation-credit { color:#24672e; }
.setting-row { min-height:76px; padding:12px; gap:12px; border:1px solid var(--line); background:var(--panel); border-radius:12px; }
.setting-row strong { font-size:13px; }
.setting-row small { font-size:11px; line-height:1.4; }
.settings-lead { margin:0 0 12px; padding:12px; border:1px solid var(--line); background:var(--panel); border-radius:12px; font-size:12px; }
.toggle { position:relative; width:52px; height:44px; flex:0 0 52px; padding:0; border:0; border-radius:10px; background:none; }
.toggle::before { content:''; position:absolute; left:0; right:0; top:8px; height:28px; border-radius:16px; background:var(--toggle-track); }
.toggle::after { position:absolute; left:3px; top:11px; width:22px; height:22px; background:var(--toggle-knob); }
.toggle[aria-checked='true'] { background:none; }
.toggle[aria-checked='true']::before { background:var(--mint); }
.toggle[aria-checked='true']::after { transform:translateX(24px); background:var(--toggle-knob-on); }
[data-theme='light'] .toggle { border:0; }
[data-theme='light'] .toggle[aria-checked='true']::after { transform:translateX(24px); }

/* Profile fields become aligned rows; existing values and edit controls remain. */
.view.profile-view { gap:12px; }
.profile-view .profile-edit-card, .profile-view .gmail-card, .profile-view .personal-data-card { padding:14px; }
.profile-view .profile-hero { grid-template-columns:44px minmax(0,1fr) auto; gap:10px; }
.profile-view .profile-hero .avatar { width:44px; height:44px; font-size:15px; }
.profile-view .profile-hero-copy h3 { font-size:17px; }
.profile-view .profile-hero-copy p { font-size:11px; }
.profile-view .profile-hero .button { grid-column:auto; width:auto; padding:8px 10px; font-size:11px; }
.profile-view .profile-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:12px; padding-top:12px; gap:8px; }
.profile-view .profile-stats-grid > div { min-height:0; padding:10px; gap:4px; }
.profile-view .profile-stats-grid span { font-size:10px; }
.profile-view .profile-stats-grid strong { font-size:12px; }
.personal-fields, .profile-view .personal-fields { grid-template-columns:1fr; margin:12px 0; gap:0; }
.personal-field, .profile-view .personal-field { display:grid; grid-template-columns:minmax(76px,.7fr) minmax(0,1.3fr); align-items:baseline; gap:12px; min-height:0; padding:12px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:none; }
.personal-field span { color:var(--muted); font-size:12px; }
.personal-field strong, .profile-view .personal-field strong { min-width:0; font-size:12px; text-align:right; white-space:normal; overflow-wrap:anywhere; overflow:visible; text-overflow:clip; }
.personal-data-heading { padding-bottom:12px; gap:12px; }
.gmail-row, .profile-view .gmail-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:8px; align-items:center; margin-top:10px; }
.profile-view .gmail-row .button { grid-column:auto; width:auto; padding:8px 10px; font-size:11px; }
.gmail-mark, .profile-view .gmail-mark { width:28px; height:28px; border:0; background:none; color:var(--text); }
.gmail-row strong { font-size:12px; white-space:normal; overflow-wrap:anywhere; }
.gmail-row small { font-size:10px; }
.personal-edit-button { width:100%; }
.bonus-view { display:grid; gap:12px; }
.bonus-view > * { margin:0; }
.bonus-view .stat-row { order:1; gap:12px; }
.bonus-view .referral-card { order:2; padding:16px; display:grid; gap:12px; }
.bonus-view .referral-card > .key-box { margin:0; padding:12px; border:1px solid var(--line); }
.stat-card { padding:14px; gap:6px; }
.stat-card strong { font-size:26px; }
.stat-card small { font-size:11px; }

/* Support and documents use the same calm surfaces, with their content intact. */
.support-topic-panel { padding:16px; }
.support-topic-list { gap:12px; }
.support-topic { min-height:68px; padding:12px; }
.support-start-head { margin-bottom:16px; }
.chat-panel { padding:12px; gap:12px; }
.chat-header { gap:10px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.chat-header .avatar { width:34px; height:34px; flex:0 0 auto; }
.chat-head-copy strong { font-size:13px; }
.chat-header .text-button { padding:8px; font-size:10px; flex:0 0 auto; border:1px solid var(--line); border-radius:10px; }
.chat-list { gap:12px; padding:4px 0; }
.msg { padding:10px 12px; max-width:84%; }
.msg p { font-size:13px; }
.msg-in { background:var(--mint); color:var(--on-mint); border-color:var(--mint); }
.msg-in small { color:var(--on-mint); opacity:.75; }
.msg-out { background:var(--panel-4); color:var(--text); border:1px solid var(--line-2); }
.msg-out small { color:var(--muted); opacity:1; }
.chat-input-row { gap:8px; }
.chat-input-row .mini-btn { min-width:44px; padding:0; }
.chat-input-row input { min-height:44px; padding:8px 10px; font-size:12px; }
.chat-send { width:44px; height:44px; }
.doc-article { gap:12px; }
.doc-hero { display:grid; justify-items:start; text-align:left; padding:16px; gap:12px; }
.doc-icon { width:32px; height:32px; font-size:18px; }
.doc-title { font-size:20px; line-height:1.3; }
.doc-eyebrow { font:600 11px/1.4 Manrope,system-ui,sans-serif; letter-spacing:0; }
.doc-lead { max-width:none; font-size:13px; line-height:1.6; }
.doc-meta { gap:6px; padding:12px; font-size:12px; }
.doc-content { gap:12px; }
.doc-section { padding:16px; }
.doc-section h3 { font-size:16px; }
.doc-section p, .doc-section ul, .doc-section ol { font-size:13px; line-height:1.65; }
.doc-note { margin:0; padding:12px; font-size:12px; }
.doc-footer { font-size:12px; }
.modal-backdrop { padding:12px; }
.modal { width:min(100%,420px); padding:56px 20px 20px; border-radius:18px; max-height:calc(100dvh - 24px); }
.modal-close { top:8px; right:8px; color:var(--text); border:1px solid var(--line); background:var(--panel); border-radius:10px; }
.modal-icon { margin:0 auto 12px; width:34px; height:34px; font-size:18px; }
.modal #modal-action { width:100%; margin-top:12px; }
.modal-body, #modal-body { min-width:0; }
.modal .profile-form { gap:12px; }
.modal .profile-form label { font-size:12px; font-weight:600; }
.modal input, .modal select, .modal textarea { min-width:0; width:100%; padding:10px 12px; font-size:14px; }
.payment-methods label { min-height:54px; }
.payment-methods input[type='radio'] { width:20px; min-height:20px; height:20px; flex:0 0 20px; margin:0; padding:0; }
.payment-methods span { font-size:13px; }
.payment-confirm-line { gap:12px; }
.payment-confirm-line strong { min-width:0; overflow-wrap:anywhere; }
.connection-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.qr-modal canvas, .qr-modal video { max-width:100%; height:auto; border-radius:12px; }
.bottom-nav, .app-shell:has(#view-root[data-page='dashboard']) .bottom-nav {
  position:fixed; z-index:20; left:50%; right:auto; bottom:max(10px,env(safe-area-inset-bottom,0px)); transform:translateX(-50%); width:calc(100% - 24px);
  min-height:70px; padding:6px; grid-template-columns:repeat(5,minmax(0,1fr));
  margin:0; border:1px solid var(--nav-border); border-radius:18px; gap:3px; background:var(--nav-bg); box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.nav-item, .app-shell:has(#view-root[data-page='dashboard']) .nav-item { min-width:0; min-height:56px; border-radius:13px; gap:5px; color:var(--muted); background:transparent; transition:background .2s ease,color .2s ease,transform .2s ease; }
.nav-item:hover:not(.active) { color:var(--text); background:var(--panel-2); }
.nav-item.active { color:var(--on-mint); background:var(--mint); box-shadow:0 4px 12px rgba(0,0,0,.16); }
.nav-item:active { transform:scale(.97); }
.nav-item span:last-child { font-size:10px; font-weight:650; line-height:1.1; }
.nav-icon { width:28px; height:25px; }
.nav-icon svg { width:20px; height:20px; stroke-width:1.8; }

@media (min-width:640px) {
  html[data-design='onyx'] { --workspace-gutter:24px; }
  .main-content, .app-shell:has(#view-root[data-page='dashboard']) .main-content { padding-top:24px; }
  .payment-card-switcher .bank-card.tariff-card { flex-basis:65%; }
  .payment-view .checkout-bar { position:static; box-shadow:none; }
  .app-shell:has(#view-root[data-page='payment']) .main-content { padding-bottom:calc(88px + env(safe-area-inset-bottom,0px)); }
  .period-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .period-choice.custom-choice { grid-column:1 / -1; }
  .plan-picker-grid .plan-option .bank-card { padding:16px; gap:12px; min-height:190px; }
  .plan-picker-grid .card-brand { font-size:18px; }
  .plan-picker-grid .card-name { font-size:22px; }
  .plan-picker-grid .card-price { font-size:28px; }
  .plan-picker-grid .card-sub { font-size:12px; }
  .plan-picker-grid .bank-card.gold .card-name { font-size:22px; }
  .plan-picker-grid .bank-card.gold .card-price { font-size:28px; }
  .plan-picker-grid .bank-card.gold .card-price small { font-size:11px; }
  .plan-picker-grid .bank-card.gold .card-sub { font-size:12px; }
  .plan-option { padding:16px; }
  .plan-option-benefits > div { display:flex; justify-content:space-between; gap:12px; }
  .plan-option-benefits span { font-size:12px; }
  .plan-option-benefits strong { font-size:14px; }
  .server-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-view .profile-stats-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .vpn-view .page-head > .button { flex:0 0 auto; width:auto; }
  .card-balance-block strong, .bank-card.gold .card-balance-block strong { font-size:42px; }
  .card-grid b { font-size:13px; }
  .card-grid small { font-size:11px; }
}
@media (min-width:768px) {
  .app-shell:has(#view-root[data-page='dashboard']) .balance-block { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:16px; align-items:stretch; }
  .app-shell:has(#view-root[data-page='dashboard']) .balance-block .dash-quick { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; gap:12px; margin:0; padding:0; }
  .app-shell:has(#view-root[data-page='dashboard']) .balance-block .quick-circle { flex-direction:column; justify-content:center; align-items:center; min-height:80px; padding:12px; gap:8px; }
  .app-shell:has(#view-root[data-page='dashboard']) .balance-block .qc-icon { width:32px; height:32px; }
  .app-shell:has(#view-root[data-page='dashboard']) .balance-block .quick-circle small { font-size:12px; }
  .bento { gap:16px; }
  .bento .dash-stat-card { padding:18px; }
  .bento .dash-stat-card strong { font-size:28px; }
  .bento .dash-stat-card small { font-size:12px; }
}
@media (min-width:1024px) {
  html[data-design='onyx'] { --workspace-gutter:32px; }
  .main-content, .app-shell:has(#view-root[data-page='dashboard']) .main-content { padding-top:28px; padding-bottom:112px; }
  .topbar { margin-bottom:20px; }
  .bottom-nav, .app-shell:has(#view-root[data-page='dashboard']) .bottom-nav {
    width:min(640px,calc(100% - 64px)); left:50%; right:auto; bottom:24px; transform:translateX(-50%);
    padding:6px 8px; border:1px solid var(--line); border-radius:20px; min-height:68px; gap:4px;
  }
  .nav-item, .app-shell:has(#view-root[data-page='dashboard']) .nav-item { flex:1 1 0; min-height:54px; justify-content:center; border-radius:14px; }
  .nav-item span:last-child { font-size:11px; }
  .server-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .plan-option-benefits { margin-top:4px; }
}

/* Keep the selected destination visible on the dashboard's high-specificity layout rules. */
html[data-design='onyx'] .app-shell:has(#view-root[data-page='dashboard']) .bottom-nav .nav-item.active {
  color:var(--on-mint);
  background:var(--mint);
}
/* Approved card family: layout 02, subdued world map, tariff-specific edges.
   The frame owns the container units so every route uses the same proportions. */
html[data-design='onyx'] { --bank-card-width:min(480px,calc(100vw - var(--workspace-gutter) - var(--workspace-gutter))); }
.bank-card-frame { container-type:inline-size; width:100%; max-width:480px; min-width:0; }
html[data-design='onyx'] .bank-card.world-bank {
  --card-ink:#f5f4ee; --card-muted:#c9c8c1; --card-rule:rgba(255,255,255,.17);
  position:relative; isolation:isolate; container-type:normal; display:flex;
  flex:none; flex-direction:column; justify-content:space-between;
  width:100%; max-width:none; height:auto; min-height:0; aspect-ratio:1.586;
  padding:4.6cqw; gap:1.25cqw; border-radius:6.5cqw;
  border:3px solid #050505; color:var(--card-ink); background:#303030;
  box-shadow:0 0 0 1px #686868,inset 0 0 0 1px #494949,0 12px 24px -20px rgba(0,0,0,.7);
  overflow:hidden; font-variant-numeric:tabular-nums;
}
html[data-design='onyx'] .bank-card.world-bank::before,
html[data-design='onyx'] .bank-card.world-bank::after { content:none; }
.world-bank .bank-map { position:absolute; inset:4% 2%; z-index:-1; pointer-events:none; width:96%; height:92%; object-fit:contain; opacity:.17; }
.world-bank .bank-map-points { position:absolute; inset:4% 2%; z-index:-1; width:96%; height:92%; pointer-events:none; overflow:visible; }
.bank-map-points g { animation:bank-map-blink 2.4s ease-in-out var(--map-delay) infinite; }
.bank-map-points .bank-map-dot { fill:#ff4b55; }
.bank-map-points .bank-map-glow { fill:#ff4b55; opacity:.2; }
@keyframes bank-map-blink { 0%,100% { opacity:.25; } 50% { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  .bank-map-points g { animation:none; opacity:1; }
}
html[data-design='onyx'] .bank-card.world-bank.trial-card {
  border-color:#f1f1eb; background:#242424;
  box-shadow:0 12px 24px -20px rgba(0,0,0,.7);
}
html[data-design='onyx'] .bank-card.world-bank.gold {
  border-color:#d6b35b; background:#242424;
  box-shadow:0 12px 24px -20px rgba(0,0,0,.7);
}
.world-bank .bank-top, .world-bank .bank-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.world-bank .bank-brand { color:var(--card-ink); font-size:3.9cqw; line-height:1.2; font-weight:800; letter-spacing:-.055em; white-space:nowrap; }
.world-bank.gold .bank-brand { color:#e9cd8d; }
.world-bank .bank-hardware { display:flex; align-items:center; gap:1.5cqw; flex:none; }
/* Metallic contact plate: keep the existing footprint on every card variant. */
.world-bank .bank-chip {
  --chip-metal:linear-gradient(135deg,#f4e4af 0%,#c4a25c 42%,#ead698 66%,#b48c43 100%);
  --chip-groove:#715728;
  position:relative; display:block; flex:none; width:9cqw; height:7cqw;
  border-radius:1.4cqw; background:var(--chip-metal);
  box-shadow:inset 0 0 0 1px #d8bd7a,inset 0 1px 1px #fff2c9,0 1px 2px rgba(0,0,0,.25);
}
.world-bank .bank-chip::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(var(--chip-groove),var(--chip-groove)) 50% 33% / 100% 1px no-repeat,
    linear-gradient(var(--chip-groove),var(--chip-groove)) 50% 67% / 100% 1px no-repeat;
}
.world-bank .bank-chip::after {
  content:''; position:absolute; inset:0 28%; border:1px solid var(--chip-groove);
  border-block:0; border-radius:24%; background:var(--chip-metal);
  box-shadow:inset 1px 0 rgba(255,244,200,.45);
}
.world-bank.gold .bank-chip { --chip-metal:linear-gradient(135deg,#fff0bc,#d3ad56 44%,#f2db91 70%,#c19843); background:var(--chip-metal); }
.world-bank .bank-nfc { display:flex; color:var(--card-muted); width:4cqw; height:5cqw; }
.world-bank .bank-nfc svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.world-bank.gold .bank-nfc { color:#e0bb6b; }
.world-bank .bank-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:2.5cqw; align-items:end; }
.world-bank .bank-plan, .world-bank .bank-wallet { display:block; min-width:0; }
.world-bank .bank-wallet { text-align:right; }
.world-bank .bank-label { display:block; color:var(--card-muted); font-size:max(9px,2.5cqw); line-height:1.4; font-weight:400; }
.world-bank .bank-plan-name { display:block; margin-top:1.4cqw; color:var(--card-ink); font-size:7.8cqw; font-weight:800; line-height:1.15; letter-spacing:-.065em; }
.world-bank .bank-money { display:block; margin-top:1.6cqw; font-size:6cqw; line-height:1.1; font-weight:750; letter-spacing:-.055em; white-space:nowrap; }
.world-bank .bank-money-long { font-size:4.8cqw; }
.world-bank .bank-access { display:block; padding-top:2.5cqw; border-top:1px solid var(--card-rule); }
.world-bank .bank-access-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:1.4cqw; }
.world-bank .bank-access-status { display:inline-flex; align-items:center; gap:5px; color:var(--card-muted); font-size:max(9px,2.4cqw); white-space:nowrap; }
.world-bank .bank-access-status::before { content:''; width:4px; height:4px; border-radius:50%; background:currentColor; }
.world-bank .bank-time { display:flex; align-items:baseline; gap:3.5cqw; }
.world-bank .bank-time > span { display:inline-flex; align-items:baseline; gap:1.3cqw; white-space:nowrap; }
.world-bank .bank-time b { font-size:6.2cqw; line-height:1.05; font-weight:750; letter-spacing:-.05em; }
.world-bank .bank-time small { color:var(--card-muted); font-size:max(11px,3.3cqw); line-height:1.2; }
.world-bank .bank-time-empty { font-size:4cqw; font-weight:700; line-height:1.35; }
.world-bank .bank-tariff-price { gap:1.3cqw; }
.world-bank .bank-foot { padding-top:1.2cqw; color:var(--card-muted); font-size:max(9px,2.2cqw); line-height:1.2; }
.world-bank .bank-owner { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.world-bank .bank-expiry { white-space:nowrap; flex:none; }
.world-bank.unset-card .bank-plan-name { font-size:6cqw; }
html[data-design='onyx'] .app-shell:has(#view-root[data-page='dashboard']) .dash-plan-card {
  display:grid; grid-template-columns:minmax(0,1fr); width:100%; max-width:480px; gap:12px;
  padding:1px; overflow:visible; justify-content:stretch; align-self:start;
}
html[data-design='onyx'] .app-shell:has(#view-root[data-page='dashboard']) .dash-plan-card .world-bank {
  width:100%; max-width:none; min-height:0; flex:none; aspect-ratio:1.586; padding:4.6cqw;
}
.payment-empty-plan { display:grid; width:100%; max-width:480px; gap:12px; padding:1px; overflow:visible; }
.payment-card-switcher .card-track { align-items:flex-start; padding:1px; }
.tariff-slide { display:grid; flex:0 0 100%; width:100%; min-width:0; gap:12px; scroll-snap-align:start; }
.tariff-slide > .card-switch-cta { min-height:44px; border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:12px; }
.plan-picker-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:var(--bank-card-width); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px; scrollbar-width:none; align-items:start; }
.plan-picker-grid .plan-option { width:100%; min-width:0; padding:0; border:0; background:none; gap:12px; scroll-snap-align:start; }
.plan-picker-grid .plan-option .bank-card-frame { max-width:none; }
.plan-picker-grid .trial-plan-option { cursor:default; }
.plan-picker-grid .trial-plan-option .bank-card { cursor:default; }
.plan-picker-grid .trial-plan-option .plan-option-benefits { margin-top:0; }
.plan-option-benefits { padding:0 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.plan-option-benefits > div { display:flex; justify-content:space-between; gap:12px; padding:9px 0; }
.plan-option-benefits span { font-size:11px; }
.plan-option-benefits strong { text-align:right; font-size:13px; }
.plan-picker-carousel-controls { order:0; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:12px; }
.plan-picker-carousel-controls > span { color:var(--muted); font-size:12px; text-align:center; }
@media (min-width:768px) {
  html[data-design='onyx'] .app-shell:has(#view-root[data-page='dashboard']) .balance-block { grid-template-columns:var(--bank-card-width) minmax(0,1fr); }
}
@media (min-width:1024px) {
  .plan-picker-carousel-controls { display:none; }
  .plan-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:initial; grid-auto-columns:auto; overflow:visible; gap:24px; }
}
@media (min-width:1440px) {
  .plan-picker-grid:has(.trial-plan-option) { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* Cabinet dot wave visibility: stronger points for the website and Telegram WebApp. */
html[data-design='onyx'][data-theme] body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0;
  background-image:
    radial-gradient(circle,var(--site-dot-wave) 1px,transparent 1.8px),
    radial-gradient(circle,var(--site-dot-halo) 0 3px,transparent 5.2px);
  background-size:24px 24px,24px 24px; background-repeat:repeat;
  -webkit-mask-image:linear-gradient(110deg,transparent 46%,#000 50%,transparent 54%);
  mask-image:linear-gradient(110deg,transparent 46%,#000 50%,transparent 54%);
  -webkit-mask-size:260% 100%; mask-size:260% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation:cabinet-dot-wave-visible 10s ease-in-out infinite;
}
@keyframes cabinet-dot-wave-visible {
  0% { -webkit-mask-position:150% 0; mask-position:150% 0; opacity:0; }
  7% { opacity:.58; }
  84% { opacity:.58; }
  100% { -webkit-mask-position:-50% 0; mask-position:-50% 0; opacity:0; }
}
html.telegram-webapp[data-design='onyx'][data-theme] body::before {
  animation-name:telegram-cabinet-dot-wave-visible;
  animation-duration:8s;
}
@keyframes telegram-cabinet-dot-wave-visible {
  0% { -webkit-mask-position:150% 0; mask-position:150% 0; opacity:0; }
  7% { opacity:.72; }
  84% { opacity:.72; }
  100% { -webkit-mask-position:-50% 0; mask-position:-50% 0; opacity:0; }
}
@media (forced-colors:active) {
  html[data-design='onyx'][data-theme] body::before { content:none; animation:none; }
}
/* End cabinet dot wave visibility. */

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Reference card composition: wallet in the header, contacts beside the tariff. */
.world-bank.bank-reference-layout .bank-top { align-items:flex-start; }
.world-bank.bank-reference-layout .bank-top .bank-wallet { max-width:52%; }
.world-bank.bank-reference-layout .bank-main { align-items:end; }
.world-bank.bank-reference-layout .bank-main .bank-hardware { align-self:end; margin-bottom:.5cqw; }
/* End reference card composition. */