/* Shared glass material. Existing routes, product cards and primary colors stay intact. */
html[data-design='onyx'] {
  --glass-fill:rgba(24,25,28,1);
  --glass-sheen:rgba(255,255,255,.065);
  --glass-edge:rgba(255,255,255,.19);
  --glass-highlight:rgba(255,255,255,.12);
  --glass-shade:rgba(0,0,0,.27);
  --glass-nav:rgba(27,29,34,1);
  --glass-nav-active:rgba(65,69,78,.82);
  --glass-nav-text:#d3d5db;
  --glass-selected:#9ac2ff;
  --glass-icon-top:#414348;
  --glass-icon-bottom:#232428;
  --glass-icon-ink:#f0f0f2;
}
html[data-design='onyx'][data-theme='light'] {
  --glass-fill:rgba(255,255,255,1);
  --glass-sheen:rgba(255,255,255,.48);
  --glass-edge:rgba(130,132,140,.30);
  --glass-highlight:rgba(255,255,255,.94);
  --glass-shade:rgba(24,28,38,.14);
  --glass-nav:rgba(231,233,240,1);
  --glass-nav-active:rgba(255,255,255,.92);
  --glass-nav-text:#26282f;
  --glass-selected:#1762d4;
  --glass-icon-top:#ffffff;
  --glass-icon-bottom:#e5e6e9;
  --glass-icon-ink:#33353b;
}

html[data-design='onyx'] body .app-shell #view-root[data-page] .view :is(.panel,.row-item,.stat-card,.dash-stat-card,.quick-circle,.support-topic,.device-row,.setting-row,.locations-panel,.referral-card,.plan-focus-servers,.notification-item,.operations-panel) {
  background:linear-gradient(145deg,var(--glass-sheen),transparent 48%) var(--glass-fill);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-highlight),inset 0 -1px 0 rgba(0,0,0,.07),0 6px 18px var(--glass-shade);
  -webkit-backdrop-filter:blur(14px) saturate(1.12);
  backdrop-filter:blur(14px) saturate(1.12);
}
html[data-design='onyx'] body .app-shell #view-root[data-page] .view :is(.row-icon,.qc-icon,.dash-stat-icon) {
  display:grid; place-items:center; flex-shrink:0; box-sizing:border-box;
  border:1px solid var(--glass-edge); border-radius:14px; color:var(--glass-icon-ink);
  background:linear-gradient(145deg,var(--glass-icon-top),var(--glass-icon-bottom));
  box-shadow:inset 1px 1px 0 var(--glass-highlight),inset -1px -1px 0 rgba(0,0,0,.10),0 3px 0 color-mix(in srgb,var(--glass-icon-bottom) 78%,var(--text) 22%),0 6px 9px var(--glass-shade);
  transform:none;
}
html[data-design='onyx'] body .app-shell #view-root[data-page] .view .row-icon { flex-basis:44px; width:44px; height:44px; }
html[data-design='onyx'] body .app-shell #view-root[data-page] .view :is(.row-icon,.qc-icon,.dash-stat-icon) svg { max-width:26px; max-height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; filter:none; transform:none; }
html[data-design='onyx'] .app-shell :is(.button-quiet,.mini-btn,.car-arrow,.language-button,.theme-toggle,.icon-back) {
  border:1px solid var(--glass-edge);
  background:linear-gradient(145deg,var(--glass-sheen),transparent 55%) var(--glass-fill);
  box-shadow:inset 0 1px 0 var(--glass-highlight),0 3px 8px var(--glass-shade);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
html[data-design='onyx'] .app-shell .benefits-balance .button-quiet { background:var(--mint); border-color:var(--benefits-ink); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }

/* Compact phone cards; larger screens retain the established spacing. */
html[data-design='onyx'] body .app-shell #view-root[data-page] .view .quick-circle { grid-template-rows:40px minmax(2.7em,auto); min-height:108px; padding:12px; gap:10px; }
html[data-design='onyx'] body .app-shell #view-root[data-page] .view .qc-icon { width:40px; height:40px; }
html[data-design='onyx'] body .app-shell #view-root[data-page] .view .quick-circle small { font-size:12px; }
html[data-design='onyx'] body .app-shell #view-root[data-page] .view .dash-stat-card { padding:14px; }
html[data-design='onyx'] body .app-shell #view-root[data-page] .view .row-icon { flex-basis:40px; width:40px; height:40px; border-radius:12px; }

/* VPN actions become four equal tiles; the existing buttons and descriptions remain. */
html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view > .row-list { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:12px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view .row-item { display:grid; grid-template-columns:36px minmax(0,1fr); grid-template-rows:minmax(54px,auto) auto; align-content:start; align-items:start; gap:10px 8px; min-height:112px; padding:12px; border-radius:18px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view .row-icon { grid-column:1; grid-row:1; width:36px; height:36px; flex-basis:36px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view .row-copy { display:contents; }
html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view .row-copy strong { grid-column:2; grid-row:1; min-width:0; font-size:13px; line-height:1.35; overflow-wrap:anywhere; }
html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view .row-copy small { grid-column:1 / -1; grid-row:2; margin:0; padding-right:14px; font-size:11px; line-height:1.45; }
/* The arrow shares the caption row as a decorative end marker, outside its text padding. */
html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view .row-item > b { grid-column:2; grid-row:2; justify-self:end; align-self:end; }
@media (min-width:640px) {
  html[data-design='onyx'] body .app-shell #view-root[data-page] .view .quick-circle { grid-template-rows:48px minmax(2.7em,auto); min-height:132px; padding:20px; gap:12px; }
  html[data-design='onyx'] body .app-shell #view-root[data-page] .view .qc-icon { width:48px; height:48px; }
  html[data-design='onyx'] body .app-shell #view-root[data-page] .view .quick-circle small { font-size:15px; }
  html[data-design='onyx'] body .app-shell #view-root[data-page] .view .dash-stat-card { padding:20px; }
  html[data-design='onyx'] body .app-shell #view-root[data-page] .view .row-icon { flex-basis:44px; width:44px; height:44px; border-radius:14px; }
  html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view .row-item { min-height:116px; padding:16px; }
  html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view .row-icon { width:36px; height:36px; flex-basis:36px; }
}
/* More uses the same two-column utility-card geometry as the VPN action grid. */
html[data-design='onyx'] body .app-shell #view-root[data-page='more'] .view.more-view .row-icon { width:36px; height:36px; flex-basis:36px; border-radius:12px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='more'] .view.more-view .row-copy strong { font-size:13px; line-height:1.35; }

/* Reference navigation: a soft glass capsule and a raised selected capsule. */
html[data-design='onyx'] .app-shell #mobile-nav.bottom-nav {
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px;
  position:fixed; left:50%; right:auto; bottom:max(10px,env(safe-area-inset-bottom,0px));
  width:calc(100% - 24px); max-width:680px; min-width:0; min-height:76px;
  margin:0; padding:6px; border:1px solid var(--glass-edge); border-radius:40px;
  background:linear-gradient(130deg,var(--glass-sheen),transparent 58%) var(--glass-nav);
  box-shadow:inset 0 1px 2px var(--glass-highlight),inset 0 -2px 3px var(--glass-shade),0 7px 20px var(--glass-shade),0 1px 2px var(--glass-shade);
  -webkit-backdrop-filter:blur(26px) saturate(1.3);
  backdrop-filter:blur(26px) saturate(1.3);
  transform:translateX(-50%);
}
html[data-design='onyx'] .app-shell #mobile-nav.bottom-nav .nav-item[data-route] {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:0; min-height:62px; width:100%; margin:0; padding:8px 2px; gap:5px;
  border:1px solid transparent; border-radius:32px; color:var(--glass-nav-text);
  background:transparent; box-shadow:none;
}
html[data-design='onyx'] .app-shell #mobile-nav.bottom-nav .nav-item[data-route].active {
  color:var(--glass-selected); border-color:var(--glass-edge);
  background:linear-gradient(145deg,var(--glass-sheen),transparent 70%) var(--glass-nav-active);
  box-shadow:inset 1px 1px 2px var(--glass-highlight),inset -1px -1px 1px var(--glass-shade),0 3px 7px var(--glass-shade);
}
html[data-design='onyx'] .app-shell #mobile-nav.bottom-nav .nav-icon { display:grid; place-items:center; width:26px; height:26px; flex:0 0 26px; }
html[data-design='onyx'] .app-shell #mobile-nav.bottom-nav .nav-icon svg { display:block; width:23px; height:23px; fill:currentColor; stroke:none; filter:drop-shadow(0 1px 0 var(--glass-highlight)); }
html[data-design='onyx'] .app-shell #mobile-nav.bottom-nav .nav-item span:last-child { max-width:100%; font-size:clamp(9px,2.5vw,12px); font-weight:700; line-height:1.2; text-align:center; white-space:normal; overflow-wrap:anywhere; }
html[data-design='onyx'] .app-shell #mobile-nav.bottom-nav .nav-item:focus-visible { outline:2px solid var(--glass-selected); outline-offset:2px; }
@media (hover:hover) {
  html[data-design='onyx'] .app-shell #mobile-nav.bottom-nav .nav-item[data-route]:hover:not(.active) { background:var(--glass-sheen); }
  html[data-design='onyx'] body .app-shell #view-root[data-page] .view :is(.row-item,.quick-circle,.dash-stat-card,.support-topic):hover { border-color:var(--hover-border); }
}
@media (prefers-reduced-motion:no-preference) {
  html[data-design='onyx'] .app-shell #mobile-nav.bottom-nav .nav-item { transition:color .18s ease,background-color .18s ease,box-shadow .18s ease; }
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  html[data-design='onyx'] { --glass-fill:var(--panel); --glass-nav:var(--panel-2); --glass-nav-active:var(--panel); --glass-edge:var(--line-2); }
}
@media (forced-colors:active) {
  html[data-design='onyx'] .app-shell #mobile-nav.bottom-nav { background:Canvas; border-color:CanvasText; box-shadow:none; }
  html[data-design='onyx'] .app-shell #mobile-nav.bottom-nav .nav-item[data-route].active { border-color:Highlight; color:Highlight; background:Canvas; box-shadow:none; }
}

/* Dashboard actions follow the traffic/history summaries, in compact rows. */
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .dash-quick {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .dash-quick .quick-circle {
  display:flex; flex-direction:row; align-items:center; justify-content:flex-start;
  min-height:52px; grid-template-rows:none; gap:8px; padding:10px; border-radius:14px;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .dash-quick .qc-icon {
  width:28px; height:28px; flex:0 0 28px; border-radius:9px; box-shadow:inset 0 1px 0 var(--glass-highlight);
}
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .dash-quick .qc-icon svg { width:18px; height:18px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .dash-quick .quick-circle small {
  min-height:0; min-width:0; font-size:12px; line-height:1.35; text-align:left; overflow-wrap:anywhere;
}
@media(min-width:640px) {
  html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .dash-quick { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* The two summaries share identical text tracks, even with an empty history. */
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento .dash-stat-card {
  padding:14px; border-radius:18px; gap:0; text-align:left;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento .dash-stat-card > span:first-child {
  display:grid; grid-template-rows:minmax(2.7em,auto) auto auto 4px minmax(2.8em,auto); gap:7px; align-content:start;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento .dash-stat-label {
  grid-row:1; padding-right:28px; min-height:0; font-size:12px; line-height:1.35; color:var(--text);
}
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento .dash-stat-card strong {
  grid-row:2; margin:0; font-size:clamp(23px,3vw,30px); line-height:1.2; letter-spacing:-.04em;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento .dash-stat-card strong small {
  display:inline; font-size:10px; line-height:inherit; color:var(--muted);
}
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento .dash-stat-limit { color:var(--muted); font-size:.72em; font-weight:500; }
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento .dash-stat-meta {
  grid-row:3; color:var(--muted); font-size:11px; line-height:1.4;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento :is(.duo-progress,.dash-stat-divider) {
  grid-row:4; display:block; height:4px; margin:0; border-radius:4px; background:var(--line); overflow:hidden;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento .duo-progress i { background:var(--glass-selected); }
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento .dash-stat-card > span:first-child > small {
  grid-row:5; font-size:10px; line-height:1.4; color:var(--muted);
}
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento .dash-stat-icon {
  width:24px; height:24px; border-radius:8px; box-shadow:inset 0 1px 0 var(--glass-highlight); color:var(--glass-selected);
}
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento .dash-stat-icon svg { width:16px; height:16px; }

html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .balance-block { grid-template-columns:minmax(0,1fr); }
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:minmax(2.7em,auto) auto auto 4px minmax(2.8em,auto); gap:7px 12px;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento .dash-stat-card {
  grid-row:span 5; grid-template-rows:subgrid; row-gap:7px;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento .dash-stat-card > span:first-child {
  grid-row:1 / span 5; grid-template-rows:subgrid;
}

/* Open support conversations own the viewport; navigation must not cover typing. */
html[data-design='onyx'] body .app-shell.support-chat-open #mobile-nav.bottom-nav { display:none; }
html[data-design='onyx'] body .app-shell.support-chat-open .main-content {
  min-height:0; height:100%; padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
}
html[data-design='onyx'] body .app-shell.support-chat-open #view-root { min-height:0; overflow:hidden; }
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .chat-panel {
  min-height:0; border:0; padding:0; background:transparent; box-shadow:none; gap:10px;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .chat-header { border-radius:18px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .chat-subject { white-space:normal; overflow-wrap:anywhere; line-height:1.4; }
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .support-sync-bar {
  display:flex; flex-shrink:0; align-items:center; justify-content:space-between; gap:8px; padding:0 4px;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .support-sync-bar small { color:var(--muted); font-size:10px; line-height:1.4; }
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .support-sync-bar button {
  min-height:44px; padding:8px; color:var(--glass-selected); background:transparent; font-size:11px;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .chat-list { padding:8px 4px; gap:12px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .msg { max-width:86%; padding:12px 14px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .msg-in { color:var(--text); background:var(--panel); border:1px solid var(--line-2); }
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .msg-out { color:var(--text); background:color-mix(in srgb,var(--glass-selected) 13%,var(--panel)); border:1px solid color-mix(in srgb,var(--glass-selected) 32%,var(--line)); }
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .msg small { color:var(--muted); opacity:1; }
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .chat-typing[hidden] { display:none; }
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .chat-composer { margin:0; flex-shrink:0; }
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .chat-send { background:var(--glass-selected); color:var(--bg); }

html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento .dash-stat-divider { height:1px; margin-block:1.5px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='support'] .chat-send:disabled { opacity:.5; cursor:wait; }

/* Centered stacks retain two-column statistics and 2x2 actions at every width. */
@media (min-width:640px) {
  html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .balance-block { max-width:720px; margin-inline:auto; justify-items:center; }
  html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .dash-plan-card { width:100%; max-width:480px; }
  html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento,
  html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .dash-quick { width:100%; max-width:640px; }
}
@media (min-width:768px) {
  html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view {
    grid-template-columns:minmax(0,1fr); max-width:720px; margin-inline:auto; gap:20px;
  }
  html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view > .vpn-overview-grid {
    width:100%; max-width:480px; justify-self:center;
  }
  html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view > .row-list {
    grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; max-width:640px; justify-self:center;
  }
}
@media (min-width:1024px) {
  html[data-design='onyx'] body .app-shell:has(#view-root[data-page='dashboard']) .main-content,
  html[data-design='onyx'] body .app-shell:has(#view-root[data-page='vpn']) .main-content { max-width:1200px; }
  html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .balance-block {
    grid-template-columns:minmax(0,1fr); grid-template-rows:none; justify-items:center; align-items:start; gap:16px;
    max-width:720px; margin-inline:auto;
  }
  html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .dash-plan-card {
    width:100%; max-width:480px;
  }
  html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento { width:100%; max-width:640px; }
  html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .dash-quick {
    width:100%; max-width:640px; grid-template-columns:repeat(2,minmax(0,1fr));
  }
  html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view > .dash-hint { max-width:640px; margin-inline:auto; }
}

/* Consistent desktop canvas for every customer route. */
@media (min-width:1024px) {
  html[data-design='onyx'] body .app-shell:has(#view-root[data-page]) .main-content {
    max-width:calc(480px + var(--workspace-gutter) * 2);
  }
  html[data-design='onyx'] body .app-shell #view-root[data-page] > .view[class] {
    width:100%; max-width:480px; margin-inline:auto;
  }
}
html[data-design='onyx'] body .app-shell #view-root[data-page='more'] { padding-bottom:40px; }
/* Match the edges of the horizontal bank card and all controls beneath it. */
@media (min-width:640px) {
  html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .balance-block,
  html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .bento,
  html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .dash-quick,
  html[data-design='onyx'] body .app-shell #view-root[data-page='vpn'] .view.vpn-view > .row-list {
    width:100%; max-width:480px; margin-inline:auto;
  }
}
html[data-design='onyx'] body .app-shell #view-root[data-page='notifications'] .settings-lead { max-width:none; }
html[data-design='onyx'] body .app-shell #view-root[data-page='notifications'] .panel {
  display:grid; gap:12px; padding:16px; border-radius:18px;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='notifications'] .panel :is(p,strong) { margin:0; }
html[data-design='onyx'] body .app-shell #view-root[data-page='notifications'] .setting-row {
  min-height:68px; padding:12px 16px; gap:16px; border-radius:16px;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='notifications'] .setting-row > div { min-width:0; overflow-wrap:anywhere; }
html[data-design='onyx'] body .app-shell #view-root[data-page='notifications'] .toggle { flex-shrink:0; }
@media (min-width:640px) {
  html[data-design='onyx'] body .app-shell #view-root[data-page='notifications'] .web-security-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Cabinet point wave: brighten the existing grid as a soft moving band. */
html[data-design='onyx'] body { isolation:isolate; }
html[data-design='onyx'] body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0;
  background-image:
    radial-gradient(circle,var(--site-dot-wave) .85px,transparent 1.55px),
    radial-gradient(circle,var(--site-dot-halo) 0 2.5px,transparent 4.5px);
  background-size:24px 24px,24px 24px; background-repeat:repeat;
  -webkit-mask-image:linear-gradient(110deg,transparent 38%,#000 50%,transparent 62%);
  mask-image:linear-gradient(110deg,transparent 38%,#000 50%,transparent 62%);
  -webkit-mask-size:300% 100%; mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation:cabinet-dot-wave 16s ease-in-out infinite;
}
@keyframes cabinet-dot-wave {
  0% { -webkit-mask-position:150% 0; mask-position:150% 0; opacity:0; }
  12% { opacity:.32; }
  80% { opacity:.32; }
  100% { -webkit-mask-position:-50% 0; mask-position:-50% 0; opacity:0; }
}
@media (prefers-reduced-motion:reduce), (forced-colors:active) {
  html[data-design='onyx'] body::before { content:none; animation:none; }
}
/* End cabinet point wave. */

@media (min-width:1024px) {
  html[data-design='onyx'] body .app-shell #view-root[data-page='plan-picker'] .plan-focus-layout,
  html[data-design='onyx'] body .app-shell #view-root[data-page='bonus'] .benefits-redesign { grid-template-columns:minmax(0,1fr); }
}

/* Service labels live below server names, independent of tariff entitlement. */
html[data-design='onyx'] body .app-shell #view-root[data-page='plan-picker'] .plan-focus-server-list li {
  display:grid; grid-template-columns:28px minmax(0,1fr); gap:6px 12px; align-items:center;
}
html[data-design='onyx'] body .app-shell #view-root[data-page='plan-picker'] .plan-focus-flag { grid-column:1; grid-row:1 / span 2; align-self:start; }
html[data-design='onyx'] body .app-shell #view-root[data-page='plan-picker'] .plan-focus-server-name { grid-column:2; grid-row:1; }
html[data-design='onyx'] body .app-shell #view-root[data-page='plan-picker'] .plan-focus-server-tags { grid-column:2; grid-row:2; max-width:none; justify-content:flex-start; }
html[data-design='onyx'] body .app-shell #view-root[data-page='locations'] .locations-panel { width:100%; padding:0; border-radius:18px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='locations'] .locations-head { align-items:flex-start; padding:16px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='locations'] .locations-head h2 { font-size:18px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='locations'] .location-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 16px 16px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='locations'] .location-groups { padding:0 16px 16px; gap:20px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='locations'] .location-group h3 { margin:0 0 12px; font-size:13px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='locations'] .server-grid { grid-template-columns:minmax(0,1fr); gap:8px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='locations'] .server-row { grid-template-columns:28px minmax(0,1fr) auto 12px; gap:8px; padding:12px; min-height:76px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='locations'] .server-copy strong { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.4; }
html[data-design='onyx'] body .app-shell #view-root[data-page='locations'] .server-service-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='locations'] .server-service-badge { font-size:10px; line-height:1.3; color:var(--muted); }
html[data-design='onyx'] body .app-shell #view-root[data-page='locations'] .server-status { font-size:10px; }
html[data-design='onyx'] body .app-shell #view-root[data-page='locations'] .location-group[hidden] { display:none; }

html[data-design='onyx'] body .app-shell #view-root[data-page] .bank-card-frame { padding:0; }
html[data-design='onyx'] body .app-shell #view-root[data-page='dashboard'] .view .dash-plan-card { padding:0; overflow:visible; }
/* Keep content surfaces defined by their outline instead of stacked glass effects. */
html[data-design='onyx'] {
  --cabinet-surface-edge:var(--line);
  --cabinet-surface-shadow:0 1px 3px rgba(0,0,0,.055);
}
html[data-design='onyx'][data-theme='light'] {
  --cabinet-surface-edge:#e5e5e5;
  --cabinet-surface-shadow:0 1px 3px rgba(16,16,16,.035);
}
html[data-design='onyx'] body .app-shell #view-root[data-page] .view :is(.panel,.row-item,.stat-card,.dash-stat-card,.quick-circle,.support-topic,.device-row,.setting-row,.locations-panel,.referral-card,.plan-focus-servers,.notification-item,.operations-panel,.plan-server-details) {
  background:var(--panel);
  border:1px solid var(--cabinet-surface-edge);
  box-shadow:var(--cabinet-surface-shadow);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
html[data-design='onyx'] .app-shell #notif-panel {
  background:var(--panel);
  border:1px solid var(--cabinet-surface-edge);
  box-shadow:0 3px 12px rgba(0,0,0,.10);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
html[data-design='onyx'][data-theme='light'] .app-shell #notif-panel {
  box-shadow:0 3px 12px rgba(16,16,16,.06);
}
/* End cabinet card surface overrides. */