/* Compact banking controls. Keep full content and a 44px minimum touch target. */
html[data-design='onyx'] { --control-scale:.9; }
@media (min-width:640px) { html[data-design='onyx'] { --control-scale:1; } }
html[data-design='onyx'] body .app-shell #view-root[data-page] .view .button {
  min-height:44px; padding:calc(10px * var(--control-scale)) calc(14px * var(--control-scale));
  font-size:calc(13px * var(--control-scale)); white-space:normal;
}
html[data-design='onyx'] body .app-shell #view-root[data-page] .view .row-item {
  min-height:calc(68px * var(--control-scale)); padding:calc(10px * var(--control-scale)) calc(14px * var(--control-scale));
}
html[data-design='onyx'] body .app-shell #view-root[data-page] .view .row-icon {
  width:calc(40px * var(--control-scale)); height:calc(40px * var(--control-scale)); flex-basis:calc(40px * var(--control-scale));
}
html[data-design='onyx'] body .app-shell #view-root[data-page] .view .quick-circle {
  min-height:calc(108px * var(--control-scale)); padding:calc(12px * var(--control-scale));
  grid-template-rows:calc(40px * var(--control-scale)) minmax(2.7em,auto); gap:8px;
}
html[data-design='onyx'] body .app-shell #view-root[data-page] .view .qc-icon {
  width:calc(40px * var(--control-scale)); height:calc(40px * var(--control-scale));
}
html[data-design='onyx'] .app-shell #mobile-nav.bottom-nav {
  min-height:calc(76px * var(--control-scale)); padding:calc(6px * var(--control-scale));
}
html[data-design='onyx'] .app-shell #mobile-nav.bottom-nav .nav-item[data-route] {
  min-height:calc(62px * var(--control-scale)); padding:calc(8px * var(--control-scale)) 2px; gap:calc(5px * var(--control-scale));
}
html[data-design='onyx'] .app-shell #mobile-nav.bottom-nav .nav-item span:last-child {
  font-size:calc(clamp(9px,2.5vw,12px) * var(--control-scale)); white-space:nowrap; overflow-wrap:normal;
}
html[data-design='onyx'] .app-shell #mobile-nav.bottom-nav .nav-icon {
  width:calc(26px * var(--control-scale)); height:calc(26px * var(--control-scale)); flex-basis:calc(26px * var(--control-scale));
}
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .dash-quick .quick-circle {
  min-height:max(44px,calc(52px * var(--control-scale))); padding:calc(10px * var(--control-scale));
}
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .dash-quick .qc-icon {
  width:calc(28px * var(--control-scale)); height:calc(28px * var(--control-scale)); flex-basis:calc(28px * var(--control-scale));
}
html[data-design='onyx'] body .app-shell #view-root[data-page] .view .wallet-package { min-height:calc(76px * var(--control-scale)); padding:calc(12px * var(--control-scale)); }
html[data-design='onyx'] body .app-shell #view-root[data-page] .view .plan-focus-tabs button { min-height:calc(60px * var(--control-scale)); padding:calc(10px * var(--control-scale)) 8px; }

/* Three readable actions, directly below the VPN card. */
html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view > .vpn-actions {
  display:grid; grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; gap:8px; width:100%;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view .vpn-actions .row-item {
  display:flex; align-items:center; gap:12px; min-width:0; min-height:calc(68px * var(--control-scale));
  padding:calc(10px * var(--control-scale)) calc(14px * var(--control-scale)); border-radius:14px;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view .vpn-actions .row-copy {
  display:grid; gap:3px; flex:1; min-width:0;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view .vpn-actions .row-copy :is(strong,small) {
  grid-column:auto; grid-row:auto; align-self:auto; text-align:left;
  white-space:normal; overflow:visible; text-overflow:clip; padding:0; overflow-wrap:anywhere;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view .vpn-actions .row-item > b { align-self:center; }

/* Referral surfaces use theme text, including disabled and zero-balance states. */
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-balance {
  --benefits-ink:var(--text); color:var(--text); background:var(--panel); border-color:var(--line);
  padding:20px 16px; gap:10px; text-align:left; justify-items:start;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-brand { margin:0; font-size:15px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-balance-label { color:var(--muted); }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-balance .referral-balance-value { font-size:clamp(32px,8vw,44px); }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-balance-caption { max-width:none; color:var(--muted); }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .referral-balance-actions { margin-top:4px; gap:8px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-balance .button-primary { background:var(--mint); color:var(--on-mint); border-color:var(--mint); }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-balance .button-quiet { background:var(--panel-2); color:var(--text); border-color:var(--line-2); }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-balance .button:disabled { color:var(--muted); border-color:var(--line); background:var(--panel-3); opacity:1; }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] #referral-balance-note { max-width:none; color:var(--muted); font-size:11px; line-height:1.5; }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-content { padding:16px; gap:20px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .view .referral-invite-card {
  padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; gap:12px;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .referral-invite-card .panel-title { font-size:18px; line-height:1.35; }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .referral-invitation .key-box {
  width:100%; min-width:0; margin:0; grid-template-columns:minmax(0,1fr) 44px; padding:12px; gap:4px 8px;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .referral-invitation code {
  display:block; white-space:normal; overflow:visible; overflow-wrap:anywhere; text-overflow:clip; font-size:12px; line-height:1.5;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .referral-invitation .referral-actions {
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .referral-actions .button { gap:8px; min-width:0; }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-stat-total { color:var(--text); }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-stat-icon { margin-bottom:0; width:24px; height:24px; }

@media (min-width:640px) {
  html[data-design='onyx'] body .app-shell #view-root[data-page] .view .quick-circle { min-height:132px; padding:20px; gap:12px; grid-template-rows:48px minmax(2.7em,auto); }
  html[data-design='onyx'] body .app-shell #view-root[data-page] .view .qc-icon { width:48px; height:48px; }
}
/* A short opacity transition avoids layout motion and is safe to interrupt. */
@media (prefers-reduced-motion:no-preference) {
  #view-root > .view { animation:rise 180ms ease-out both; }
  #view-root > .card-morphed-view, html.card-morphing #view-root > .view { animation:none; }
  .app-shell button { transition-property:color,background-color,border-color,opacity,transform; transition-duration:160ms; }
  ::view-transition-group(account-card), ::view-transition-group(account-card-value) { animation-duration:320ms; }
}
@media (prefers-reduced-motion:reduce) {
  #view-root > .view { animation:none; }
}

/* The content keeps its native scroll behavior without a persistent rail. */
html, body, #view-root, .app-shell :is(.chat-list,.operations-history,.notif-panel),
.modal-backdrop, .modal { scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, #view-root::-webkit-scrollbar,
.app-shell :is(.chat-list,.operations-history,.notif-panel)::-webkit-scrollbar,
.modal-backdrop::-webkit-scrollbar, .modal::-webkit-scrollbar { display:none; width:0; height:0; }

/* Support starts with a calm service heading, using the same icons as the app. */
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .support-start-head {
  align-items:center; gap:12px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .support-start-head > div { min-width:0; }
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .support-mark {
  display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; border-radius:14px;
  color:var(--text); background:var(--panel-3); border:1px solid var(--line); box-shadow:none;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .support-mark svg { width:24px; height:24px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .support-start-head h2 { font-size:19px; line-height:1.3; letter-spacing:-.03em; }
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .support-start-head p { margin:4px 0 0; font-size:12px; line-height:1.5; }
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .chat-header .support-mark { width:34px; height:34px; flex-basis:34px; border-radius:10px; }

/* A balance summary and full-width actions, with terms separated from controls. */
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-balance { gap:12px; padding:20px; border-radius:20px; }
.benefits-balance-heading { display:flex; align-items:center; gap:10px; min-width:0; }
.benefits-balance-heading h3 { margin:0; color:var(--soft); font-size:14px; line-height:1.4; font-weight:600; }
.benefits-wallet-icon { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; color:var(--soft); }
.benefits-wallet-icon svg { width:24px; height:24px; }
.benefits-balance-summary { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; width:100%; min-width:0; }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-balance .referral-balance-value { font-size:clamp(32px,8vw,40px); letter-spacing:-.045em; }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-balance .benefits-balance-label { font-size:11px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-balance-caption { font-size:11px; line-height:1.4; }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .referral-balance-actions { max-width:none; margin-top:4px; gap:8px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-balance .button { justify-content:space-between; gap:8px; text-align:left; padding-inline:12px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] #referral-balance-note { display:grid; gap:4px; width:100%; padding-top:12px; border-top:1px solid var(--line); font-size:11px; line-height:1.5; }

/* A scroll region must not paint a square browser outline over rounded panels.
   Keep a distinct, inset keyboard focus indicator without clipping its content. */
html[data-design='onyx'] .app-shell #view-root:focus { outline:none; }
html[data-design='onyx'] .app-shell #view-root:focus-visible {
  outline:2px solid var(--line-2); outline-offset:-2px; border-radius:20px;
}

/* Match the physical card and its controls to the other cabinet card screens. */
html[data-design='onyx'] body .app-shell #view-root[data-page='plan-picker'] .plan-focus-product {
  width:100%; max-width:480px; margin-inline:auto;
}

/* Moving a hovered button can move its edge out from under the pointer and
   toggle :hover every frame. Color and border feedback keep hit areas stable. */
html[data-design='onyx'] :is(.button-primary,.button-quiet):hover { transform:none; }