[data-theme="dark"] .header { background: var(--bg-header); }
[data-theme="dark"] input { background: var(--bg-surface); color: var(--text-strong); }
[data-theme="dark"] .search-box input { background: var(--bg-surface); color: var(--text-strong); border-color: transparent; }

* { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: var(--accent); color: var(--accent-contrast); }
::-moz-selection { background: var(--accent); color: var(--accent-contrast); }

html.theme-transition,
html.theme-transition body,
html.theme-transition .header,
html.theme-transition .admin-nav,
html.theme-transition .admin-main { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important; }

/* Neutral, quiet scrollbars. The accent-coloured thumb used to paint a loud
   orange bar on EVERY scroll container (including 196px dropdowns) — that was
   the exact defect in the reviewer's screenshot. Grey derived from --text-muted
   reads correctly in both themes; accent stays reserved for actions. */
html { overflow-x: clip; width: 100%; background: var(--bg); overscroll-behavior: none; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted) 50%, transparent) transparent; touch-action: manipulation; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 42%, transparent); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-muted) 68%, transparent); background-clip: padding-box; border: 2px solid transparent; }
body { overflow-x: clip; width: 100%; overscroll-behavior: none; max-width: 100vw; touch-action: manipulation; font-family: var(--font-ui); background: var(--bg); color: var(--text-strong); -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
input { font-family: inherit; }

.boot-splash { min-height: 60vh; }

/* ========== HEADER (1:1 from public/css/styles.css :189-505) ========== */
.header { background: var(--bg-header); position: sticky; top: 0; z-index: 100; }
.header-inner { max-width: 1920px; margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px !important; font-size: 21px !important; font-weight: calc(600 + var(--fw-adjust)); color: var(--text-strong); cursor: pointer; flex-shrink: 0; letter-spacing: -0.3px; line-height: 1 !important; height: 44px; min-width: 0; max-width: clamp(180px, 30vw, 360px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.logo svg { width: 24px; height: 24px; }
.logo-icon { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; display: block; margin-right: 0; transition: filter 0.2s ease; }

.search-box { flex: 1; max-width: 560px; margin-left: 24px; position: relative; }
.search-box input { width: 100%; height: 40px; padding: 0 12px 0 44px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; color: var(--text-strong); background: var(--bg-surface); outline: none; transition: background 0.2s; }
.search-box input:hover { background: var(--border); }
.search-box input:focus { background: var(--bg); box-shadow: none; }
.search-box input:focus:hover { background: var(--bg); }
.search-box input::placeholder { color: var(--text); }
.search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text); }
.search-shortcut { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text); border: none; padding: 0; border-radius: 0; background: transparent; }

.header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.hdr-divider { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; margin: 0 2px; }

.header-balance { display: inline-flex; align-items: center; column-gap: 0; background: none; border: none; padding: 0; white-space: nowrap; }
.header-balance .hb-item { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; height: 36px; padding: 0 10px; border-radius: var(--radius-sm); line-height: 1.05; color: inherit; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease; }
.header-balance .hb-item + .hb-item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 20px; background: var(--border); }
.header-balance .hb-item:hover { background: var(--border); }
.header-balance .hb-item:hover::before,
.header-balance .hb-item:hover + .hb-item::before { background: transparent; }
.header-balance .hb-item:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(237,100,50,0.18); background: var(--border); }
[data-theme="dark"] .header-balance .hb-item:hover { background: rgba(255,255,255,0.05); }
.header-balance .hb-label { font-size: 10px; font-weight: calc(500 + var(--fw-adjust)); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1px; }
.header-balance .hb-value { font-size: 13px; font-weight: calc(600 + var(--fw-adjust)); color: var(--green); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.header-balance .hb-online { color: var(--text-strong); display: inline-flex; align-items: center; gap: 5px; }
.header-balance .hb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); animation: hbPulse 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes hbPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 50% { box-shadow: 0 0 0 4px transparent; } }
@media (prefers-reduced-motion: reduce) { .header-balance .hb-dot { animation: none; } }

.btn-login { padding: 7px 20px; border-radius: 20px; font-size: 13px; font-weight: calc(600 + var(--fw-adjust)); cursor: pointer; transition: background 0.15s, color 0.15s; border: 1px solid transparent; color: var(--accent); background: transparent; }
.btn-login:hover { background: var(--accent-bg); }
.btn-signup { padding: 7px 20px; border-radius: 20px; font-size: 13px; font-weight: calc(600 + var(--fw-adjust)); cursor: pointer; background: var(--accent); color: var(--accent-contrast); border: none; transition: background 0.15s; }
.btn-signup:hover { background: var(--accent-hover); }

.mobile-auth-login { display: none; padding: 6px 16px; font-size: 14px; font-weight: calc(600 + var(--fw-adjust)); border: 1px solid transparent; border-radius: 20px; background: transparent; color: var(--accent); cursor: pointer; transition: background 0.15s, color 0.15s; }
.mobile-auth-login:hover { background: var(--accent-bg); }
.mobile-auth-signup { display: none; padding: 6px 16px; font-size: 14px; font-weight: calc(600 + var(--fw-adjust)); border: none; border-radius: 20px; background: var(--accent); color: var(--accent-contrast); cursor: pointer; }

.btn-deposit { background: var(--accent); color: var(--accent-contrast); height: 36px; padding: 0 18px; border-radius: 10px; font-size: 13px; font-weight: calc(600 + var(--fw-adjust)); letter-spacing: -0.005em; text-transform: none; display: inline-flex; align-items: center; justify-content: center; transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease; box-shadow: 0 1px 2px rgba(237,100,50,0.18); text-decoration: none; }
.btn-deposit:hover { background: var(--accent-hover); box-shadow: 0 4px 10px rgba(237,100,50,0.22); }
.btn-deposit:active { transform: scale(0.97); }
.btn-deposit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(237,100,50,0.22); }

.header-icons { display: flex; gap: 4px; align-items: center; }
.header-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s; color: var(--text); }
.header-icon:hover { background: var(--border); }

.avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; cursor: pointer; border: 1px solid var(--border); transition: border-color 0.18s ease, transform 0.15s ease; }
.avatar:hover { border-color: var(--accent); }
.avatar:active { transform: scale(0.96); }
.avatar:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(237,100,50,0.18); }
.avatar > div { width: 100% !important; height: 100% !important; }
.avatar-placeholder { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.avatar-placeholder > img { object-fit: contain; filter: brightness(0) invert(1); opacity: 0.92; }

/* Mammoth user avatars (from macos support / user pages) — ensure proper square crop */
.mammoth-avatar {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
}
.admin-main .chat-avatar,
.admin-main .chat-peer-avatar,
.admin-main .uc-avatar {
  overflow: hidden;
}
.admin-main .chat-avatar img,
.admin-main .chat-peer-avatar img,
.admin-main .uc-avatar img,
.admin-main .uc-avatar .mammoth-avatar {
  object-fit: cover !important;
}

.mobile-menu-btn { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-strong); }
@media (max-width: 768px) {
  .mobile-menu-btn { display: flex; }
  .search-box { max-width: 180px; }
  .header-balance { display: none !important; }
  .btn-deposit:not(#place-bet-btn) { display: none !important; }
  .hdr-divider { display: none; }
}

/* ============================================================================
   ANNOUNCEMENT BAR — thin call-to-action strip that lives ABOVE .admin-main.
   Visibility is toggled from JS (announcement-bar.js) based on whether the
   signed-in worker has linked every payout network. Rendered as a rounded pill
   matching the main content card; centred text; edge padding aligned to the
   surrounding shell (mobile full-bleed, desktop offset by the sidebar).
   ========================================================================== */
.admin-announce[hidden] { display: none !important; }
.admin-announce {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 16px 0;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 12px;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: calc(500 + var(--fw-adjust));
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.admin-announce.is-visible { display: flex; }
.admin-announce:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-surface));
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
}
.admin-announce:active { transform: scale(0.995); }
.admin-announce:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-shadow); }
.admin-announce .aa-ico { display: inline-flex; flex-shrink: 0; color: var(--accent); }
.admin-announce .aa-ico svg { width: 18px; height: 18px; display: block; }
.admin-announce .aa-text { flex: 0 1 auto; }
@media (min-width: 769px) {
  /* Aligns with the floating .admin-main card: same left offset for the sidebar,
     same right gutter; sits directly above the card with a 12px gap. */
  .admin-announce { margin: 12px 12px 0 calc(248px + 12px); padding: 14px 20px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-announce { transition: none; }
  .admin-announce:active { transform: none; }
}

/* ========== USER MENU + UD-PANEL (1:1 from styles.css :7481-7965) ========== */
.user-menu { position: relative; }
.um-trigger { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 4px; border-radius: 999px; cursor: pointer; transition: background-color 0.15s ease; }
.um-trigger:hover { background: var(--bg-surface); }
.um-trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.um-chevron { color: var(--text-muted, #999); flex-shrink: 0; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.user-menu.open .um-chevron { transform: rotate(180deg); }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { .user-menu:hover .um-chevron { transform: rotate(180deg); } }
@media (max-width: 899px) {
  .um-chevron { display: none; }
  .um-trigger { padding: 0; background: none !important; }
}

.ud-panel { position: absolute; top: calc(100% + 6px); right: 0; width: 248px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 220; padding: 0; opacity: 0; pointer-events: none; transform: translateY(-4px) scale(0.985); transform-origin: top right; transition: opacity 120ms ease-out, transform 140ms cubic-bezier(0.32, 0.72, 0, 1); overflow: visible; font-family: var(--font-ui); }
.ud-panel::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; background: transparent; }
.user-menu.open .ud-panel,
.user-menu:focus-within .ud-panel { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .user-menu:hover .ud-panel { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
}

.ud-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 12px; }
.ud-header-link { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; text-decoration: none; color: inherit; cursor: pointer; }
.ud-avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.ud-avatar > div { width: 100% !important; height: 100% !important; }
.ud-identity { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ud-name { font-size: 14px; font-weight: calc(600 + var(--fw-adjust)); color: var(--text-strong); line-height: 1.2; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ud-header-link:hover .ud-name { color: var(--text); }
.ud-addr { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ud-addr-text { font-family: var(--font-ui); font-size: 11px; color: var(--text); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 160px; }
.ud-addr-copy { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; flex-shrink: 0; background: transparent; border: 0; border-radius: 4px; color: var(--text); cursor: pointer; transition: color 120ms ease, background 120ms ease; }
.ud-addr-copy:hover { color: var(--text-strong); background: var(--border); }
.ud-addr-copy.is-copied { color: var(--green); }
.ud-gear { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; background: transparent; border: 0; border-radius: var(--radius-xs); color: var(--text); cursor: pointer; transition: background 120ms ease, color 120ms ease; text-decoration: none; }
.ud-gear:hover { background: var(--border); color: var(--text-strong); }

.ud-sep { height: 1px; background: var(--border); margin: 0; }
.ud-section { padding: 6px; display: flex; flex-direction: column; gap: 0; }
.ud-section-info { overflow: visible; }

.ud-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; background: transparent; border: 0; border-radius: var(--radius-xs); font-family: inherit; font-size: 13.5px; font-weight: calc(500 + var(--fw-adjust)); color: var(--text-strong); text-decoration: none; text-align: left; cursor: pointer; transition: background 100ms ease, color 100ms ease; }
.ud-item:hover { background: var(--border); }
.ud-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ud-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; }
.ud-icon-trophy { color: #d4a017; }
.ud-icon-cash { color: var(--green); }
.ud-icon-api { color: var(--accent); }
.ud-icon-refer { color: #b85cce; }
.ud-icon-builder { color: var(--text); }
.ud-icon-moon { color: #4f7bd9; }
.ud-icon-mac { color: var(--text); }
.ud-item-quiet { color: var(--text); font-weight: calc(500 + var(--fw-adjust)); }
.ud-item-quiet:hover { color: var(--text-strong); }

.ud-item-toggle { justify-content: flex-start; }
.ud-item-toggle .ud-item-label { flex: 1; }

.ud-switch { position: relative; flex-shrink: 0; width: 32px; height: 18px; background: var(--border); border-radius: 999px; transition: background 160ms ease; }
.ud-switch-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.18); transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1); }
.ud-switch.is-on { background: var(--accent); }
.ud-switch.is-on .ud-switch-knob { transform: translateX(14px); }

/* Language submenu — 1:1 port of the market header lang picker
   (public/css/styles.css). Local flags (/macos/flags/*.svg) instead of
   flagcdn, because the admin CSP only allows img-src 'self'. */
.i18n-flag,
.ud-lang-flag { width: 16px; height: 11px; border-radius: 2px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); }
.ud-lang-wrap { position: relative; }
.ud-lang-wrap::after { content: ''; position: absolute; top: -6px; left: 100%; width: 18px; height: calc(100% + 12px); background: transparent; }
.ud-lang-trigger { position: relative; padding-right: 8px; }
.ud-lang-trigger:hover,
.ud-lang-wrap:focus-within .ud-lang-trigger { background: var(--border); color: var(--text-strong); }
.ud-lang-roll { flex: 1; min-width: 0; height: 18px; overflow: hidden; display: block; line-height: 18px; }
.ud-lang-roll-track { display: block; animation: udLangRollMulti var(--ud-lang-duration, 18s) cubic-bezier(0.45, 0, 0.2, 1) infinite; will-change: transform; }
.ud-lang-roll-item { display: flex; align-items: center; gap: 8px; height: 18px; max-width: 136px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ud-lang-roll-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@keyframes udLangRollMulti {
  from { transform: translateY(0); }
  to { transform: translateY(var(--ud-lang-distance, -324px)); }
}
.ud-lang-chevron { flex-shrink: 0; color: var(--text); transition: transform 120ms ease, color 120ms ease; }
.ud-lang-wrap:hover .ud-lang-chevron,
.ud-lang-wrap:focus-within .ud-lang-chevron { color: var(--text); transform: translateX(1px); }
.ud-lang-menu { position: absolute; left: calc(100% + 8px); top: -6px; width: 196px; max-height: 216px; overflow-y: auto; overflow-x: hidden; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translateX(-4px) scale(0.985); transform-origin: left center; transition: opacity 120ms ease-out, transform 140ms cubic-bezier(0.32, 0.72, 0, 1); z-index: 230; overscroll-behavior: contain; scrollbar-width: thin; }
.ud-lang-menu::before { content: ''; position: absolute; left: -18px; top: -8px; width: 18px; height: calc(100% + 16px); background: transparent; }
.ud-lang-wrap:hover .ud-lang-menu,
.ud-lang-wrap:focus-within .ud-lang-menu,
.ud-lang-wrap.is-open .ud-lang-menu { opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); }
/* Inside the right-anchored .ud-panel the submenu must open to the LEFT. */
.ud-panel .ud-lang-wrap::after { left: auto; right: 100%; }
.ud-panel .ud-lang-menu { left: auto; right: calc(100% + 8px); transform: translateX(4px) scale(0.985); transform-origin: right center; }
.ud-panel .ud-lang-wrap:hover .ud-lang-menu,
.ud-panel .ud-lang-wrap:focus-within .ud-lang-menu,
.ud-panel .ud-lang-wrap.is-open .ud-lang-menu { transform: translateX(0) scale(1); }
.ud-panel .ud-lang-menu::before { left: auto; right: -18px; }
/* Narrow viewport fallback: stack the submenu below the trigger. */
@media (max-width: 460px) {
  .ud-panel .ud-lang-wrap::after { left: 0; right: auto; top: 100%; width: 100%; height: 8px; }
  .ud-panel .ud-lang-menu { left: 6px; right: 6px; top: calc(100% + 6px); width: auto; max-height: 220px; transform: translateY(-4px) scale(0.985); transform-origin: top center; }
  .ud-panel .ud-lang-wrap:hover .ud-lang-menu,
  .ud-panel .ud-lang-wrap:focus-within .ud-lang-menu,
  .ud-panel .ud-lang-wrap.is-open .ud-lang-menu { transform: translateY(0) scale(1); }
  .ud-panel .ud-lang-menu::before { left: 0; right: 0; top: -10px; width: 100%; height: 10px; }
}
.ud-lang-option { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 0 22px 0 6px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-strong); font-family: inherit; font-size: 12.5px; font-weight: calc(600 + var(--fw-adjust)); text-align: left; cursor: pointer; }
.ud-lang-option:hover { background: var(--border); }
.ud-lang-option .ud-lang-name,
.ud-lang-option .ud-lang-native { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ud-lang-option .ud-lang-name { color: var(--text-strong); }
.ud-lang-option .ud-lang-native { color: var(--text); font-size: 11px; font-weight: calc(600 + var(--fw-adjust)); margin-left: -2px; }
.ud-lang-dot { position: absolute; right: 8px; top: 50%; width: 4px; height: 4px; border-radius: 999px; background: var(--accent); transform: translateY(-50%) scale(0); }
.ud-lang-option.active .ud-lang-dot { transform: translateY(-50%) scale(1); }

.ud-item-logout { color: var(--red); font-weight: calc(600 + var(--fw-adjust)); }
.ud-item-logout:hover { background: var(--red-bg); color: var(--red); }

@media (max-width: 899px), (hover: none) {
  .ud-panel { display: none; }
  .user-menu.open .ud-panel { display: block; opacity: 1; pointer-events: auto; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ud-panel { transition: opacity 80ms linear; transform: none; }
  .user-menu.open .ud-panel { transform: none; }
  .ud-switch-knob { transition: none; }
}

/* Guest menu (3-bar trigger) — visual support if ever toggled to guest */
.guest-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 50%; color: var(--text); cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; }
.guest-menu-btn:hover,
.guest-menu.open .guest-menu-btn,
.guest-menu:focus-within .guest-menu-btn { background: var(--border); color: var(--text-strong); border-color: var(--border); }
.gmb-icon line { transform-origin: center; transform-box: fill-box; transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms cubic-bezier(0.4, 0, 0.2, 1); }
.guest-menu.open .gmb-l1 { transform: translateY(4.5px) rotate(45deg); }
.guest-menu.open .gmb-l2 { opacity: 0; transform: scaleX(0.4); }
.guest-menu.open .gmb-l3 { transform: translateY(-4.5px) rotate(-45deg); }
@media (max-width: 899px), (hover: none) { .guest-menu { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .gmb-icon line { transition: none; } }

/* ========== REWARDS + NOTIF BELL (1:1 from styles.css :21341-21625) ========== */
@keyframes nf-open  { from { opacity: 0; transform: scale(0.95) translateY(-8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes nf-close { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.95) translateY(-8px); } }

.hdr-rewards-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm, 8px); background: transparent; border: none; cursor: pointer; color: #77808D; transition: background 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; text-decoration: none; margin-right: -2px; }
@media (hover: hover) { .hdr-rewards-btn:hover { background: var(--border); color: var(--text-strong); } }
.hdr-rewards-btn:active { transform: scale(0.97); }
.hdr-rewards-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }

.hn-wrapper { position: relative; display: flex; align-items: center; }
.hn-wrapper--hidden { display: none; }

.hn-bell { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm, 8px); background: transparent; border: none; cursor: pointer; color: #77808D; transition: background 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .hn-bell:hover { background: var(--border); color: var(--text-strong); } }
.hn-bell:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.hn-bell[aria-expanded="true"] { background: var(--border); }

.hn-panel { position: absolute; top: calc(100% + 4px); right: 0; width: 340px; max-height: 400px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius, 12px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06); z-index: 240; overflow: hidden; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transform: scale(0.95) translateY(-8px); transform-origin: top right; }
.hn-panel[data-state="open"] { opacity: 1; pointer-events: auto; transform: none; animation: nf-open 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hn-panel-hd { padding: 8px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.hn-panel-title { margin: 0; font-size: 14px; font-weight: calc(600 + var(--fw-adjust)); color: var(--text-strong); line-height: 1.25; }
.hn-panel-body { overflow-y: auto; flex: 1; max-height: 356px; }
.hn-empty { padding: 24px 16px; text-align: center; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; }

/* ========== ADMIN-ONLY EXTRAS ========== */
.logo-badge {
  font-size: 10px;
  font-weight: calc(700 + var(--fw-adjust));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--accent-bg);
  color: var(--accent);
  align-self: center;
  margin-left: 4px;
}

/* ========== NAV TABS (1:1 from public/css/styles.css :576-814) ==========
   Text-only сabs — БЕЗ оранжевой пилюли на активной. На светлой теме
   активная вкладка = accent (оранжевый), на тёмной — text-strong (белый). */
.nav-tabs { background: var(--bg-header); border-bottom: 1px solid var(--border); position: sticky; top: 56px; z-index: 99; }
.nav-tabs-row { max-width: 1920px; margin: 0 auto; display: flex; align-items: stretch; position: relative; }
.nav-tabs-scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; position: relative; }
.nav-tabs-scroll::-webkit-scrollbar { display: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
/* Вкладки тянутся на ВСЮ ширину полосы навигации (от линии до линии): первая
   под логотипом (24px слева), последняя под аватаром (24px справа), остальные
   равномерно между ними. Адаптивно: пока вкладки помещаются — space-between их
   распределяет; когда экран узкий и они не влезают, свободное место становится
   отрицательным → space-between деградирует во flex-start, и включается
   горизонтальный скролл (.nav-tabs-scroll). gap:4px — минимальный зазор. */
.nav-tabs-inner { padding: 6px 24px; display: flex; gap: 4px; width: 100%; justify-content: space-between; }
/* Когда вкладок мало / экран очень широкий — не разносить их слишком далеко:
   ограничивать не нужно, space-between по 13 вкладкам даёт ровный ритм. */

.nav-tab {
  position: relative;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: calc(500 + var(--fw-adjust));
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
  outline: none;
  text-decoration: none;
  transform: translateY(0);
  transition:
    color 280ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 220ms cubic-bezier(0.32, 0.72, 0, 1),
    background 260ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 260ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform, color, background;
}
.nav-tab:hover { color: var(--accent); }
.nav-tab.active { color: var(--accent); border-bottom-color: transparent; font-weight: calc(600 + var(--fw-adjust)); box-shadow: none; transform: translateY(0); animation: navTabPopDesktop 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes navTabPopDesktop {
  0% { transform: scale(0.92); } 55% { transform: scale(1.05); } 100% { transform: scale(1); }
}

[data-theme="dark"] .nav-tabs-inner { padding: 6px 24px; gap: 4px; }
[data-theme="dark"] .nav-tabs { border-bottom: 1px solid var(--border); }
[data-theme="dark"] .nav-tab { border-bottom: none; border-radius: 999px; padding: 8px 16px; color: var(--text); transition: color 240ms cubic-bezier(0.32, 0.72, 0, 1); }
[data-theme="dark"] .nav-tab:hover { background: none; color: var(--text-strong); box-shadow: none; }
[data-theme="dark"] .nav-tab.active { background: none; color: var(--text-strong); font-weight: calc(600 + var(--fw-adjust)); border-bottom-color: transparent; box-shadow: none; }

.nav-tab.trending { display: flex; align-items: center; gap: 4px; }
.nav-divider { width: 1px; background: var(--border); margin: 8px 4px; }

/* LEGACY / инертно после переноса сайдбара на ≥769px: теперь nav-tabs скрыты на
   ВСЕХ ширинах (≤768 → нижний бар/drawer, ≥769 → сайдбар с `.nav-tabs
   {display:none!important}`), поэтому этот блок 769–1023px больше не отрисовывается.
   Оставлен как якорь отката: если порог сайдбара вернуть на 1024px, ряд табов
   снова переносится на несколько строк (flex-wrap) вместо горизонтального скролла. */
@media (min-width: 769px) and (max-width: 1023px) {
  .nav-tabs-scroll { overflow: visible; }
  .nav-tabs-inner,
  [data-theme="dark"] .nav-tabs-inner {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2px;
    column-gap: 3px;
    padding: 6px 12px;
  }
  .nav-tab,
  [data-theme="dark"] .nav-tab {
    padding: 7px 10px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-tab, [data-theme="dark"] .nav-tab { transition-duration: 80ms; animation: none; }
  .nav-tab:hover { transform: none; }
}

/* ============================================================================
   macOS-admin reset — this stylesheet loads AFTER /macos/css/style.css, so
   everything below overrides the legacy desktop chrome that leaks into /new/.
   ========================================================================== */

/* 1) Kill the fixed 32px desktop grid overlay (body::before) — those were the
      "squares" bleeding over every page. Also the hero star-noise pattern. */
body::before { display: none !important; content: none !important; }

/* 2) Normal document scroll. The legacy macOS rule made BODY a scroll
      container (overflow-y:auto) and our earlier `overflow-x:clip` forced the
      cross-axis to clip too — so tall pages were cut and never scrolled. Fix:
      let html be the natural viewport scroller (overflow-y visible/auto), put
      horizontal containment ONLY on #app, and never clip the document. Also
      restore the market typographic base (Inter, normal weight). */
html {
  height: auto !important;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--bg);
}
body {
  height: auto !important;
  min-height: 100%;
  overflow: visible !important;
  isolation: auto !important;
  position: static !important;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: calc(400 + var(--fw-adjust));
  line-height: 1.5;
  color: var(--text-strong);
}
#app { overflow: visible; min-height: 100%; }

/* 3) Main content — flat bg matching theme (no images, per spec). Wide enough
      for the data tables the macOS pages render. */
.admin-main {
  max-width: 1920px;
  margin: 0 auto;
  padding: 24px;
  background: var(--bg);
  min-height: calc(100vh - 56px - 45px);
  /* Content-width container: table→cards and other responsive collapses key off
     the ACTUAL content width (mobile/tables.css @container), not the viewport —
     so the Telegram Mini-App webview (viewport > 768 but content ~490 behind the
     248px rail) still collapses instead of cramming columns. See memory
     admin-container-vs-viewport-media. Safe: .admin-main width is already
     layout-driven, and every cqw in the codebase resolves against a closer
     page-level container. */
  container-type: inline-size;
  /* macOS pages size their inner .page wrapper to var(--container) — cap it so
     it never exceeds our shell. */
  --container: min(1352px, calc(100vw - 48px));
}
/* macОS .page wrapper double-margins inside our padded shell — neutralise. */
.admin-main .page { width: 100%; margin: 0; }

/* ============================================================================
   TOKEN BRIDGE — remap the macOS-admin CSS variables onto the MARKET palette,
   scoped to .admin-main so the header/nav (outside) keep market :root tokens.
   This is what makes all 21 pages adopt prediction.casa colors + Inter at once
   without touching their HTML/JS. Auto-flips with [data-theme] because the
   right-hand market tokens flip.
   NB: in macOS land --text = PRIMARY, --muted = secondary (opposite of market,
   where --text = muted). Hence --text → --text-strong, --muted → --mkt-muted.
   ========================================================================== */
.admin-main {
  --panel: var(--bg);
  --panel-2: var(--bg-surface);
  --panel-3: var(--bg-surface);
  --line: var(--border);
  --line-2: var(--border-hover);
  --text: var(--text-strong);
  --muted: var(--mkt-muted);
  --muted-2: var(--mkt-muted);
  --brand: var(--accent);
  --brand-hover: var(--accent-hover);
  --pink: var(--accent);
  --purple: var(--accent-bg);
  --font: var(--font-ui);
  --mono: var(--font-ui);
  --radius: 6px;
  --card-radius: 8px;
  --card-pad: 16px;
  color: var(--text-strong);
}

.placeholder {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 48px 24px;
  text-align: center;
  background: var(--bg-surface);
  color: var(--text);
}
.placeholder h1 {
  font-size: 22px;
  font-weight: calc(700 + var(--fw-adjust));
  color: var(--text-strong);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.placeholder p {
  font-size: 14px;
  line-height: 1.55;
  max-width: 520px;
  margin: 0 auto 16px;
}
.placeholder code {
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--accent);
}
/* Page-load loader — a centred animated sticker, no text/box. The subtracted
   150px ≈ header (56) + nav (45) + shell padding (48) so the sticker lands in
   the vertical middle of the screen, not just the top band. */
.admin-loading {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - 150px);
  animation: adminFade 0.2s ease;
}
.admin-loading__sticker {
  width: clamp(112px, 15vw, 168px);
  aspect-ratio: 1;
}
@keyframes adminFade { from { opacity: 0; } to { opacity: 1; } }

/* loader-swap.js re-tags every text "Loading…" placeholder with .sticker-loader
   and drops the sticker inside. !important so it wins over each page's own
   loader-class layout regardless of stylesheet order. --full = a whole-page
   loader, centred on screen like the router splash; otherwise it centres inside
   its own panel (settings tab body, modal, …). */
.sticker-loader {
  display: grid !important;
  place-items: center !important;
  min-height: 220px !important;
  padding: 24px !important;
  background: none !important;
  border: 0 !important;
}
.sticker-loader--full { min-height: calc(100dvh - 150px) !important; }

/* ============================================================================
   COMPONENT FLATTENING — beat the macOS hardcoded hexes + gradient/shadow
   chrome that the var-bridge can't reach. Market-minimal (PSET): flat
   var(--card-bg) surface, single 1px var(--border), radius 8 (cards) / 6
   (controls), no heavy shadow, structure read from hairlines. !important is
   required to override the legacy inline gradients/hexes.
   Selectors + hardcoded-hex list sourced from the macOS component inventory.
   ========================================================================== */

/* ---- Cards / containers (panel, metrics, cubes, steps, named cards) ---- */
.admin-main .panel,
.admin-main .table-wrap,
.admin-main .summary-card,
.admin-main .mini-metric,
.admin-main .kpi,
.admin-main .domain-cube,
.admin-main .user-card,
.admin-main .step-grid > div,
.admin-main .settings-domain-card,
.admin-main .response-card,
.admin-main .api-modal-card,
.admin-main .page-intro,
.admin-main .analytics-hero,
.admin-main .preset-builder,
.admin-main .form-template-builder,
.admin-main .support-desk .preset {
  /* Market "block-in-block": cards sit on the PAGE background (var(--bg)) with a
     hairline border; raised rows inside use var(--bg-surface) so they pop. Using
     --card-bg here made cards == rows in dark (black-on-black). */
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.admin-main .panel::before,
.admin-main .panel::after { display: none !important; background: none !important; }
.admin-main .panel-head {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: calc(700 + var(--fw-adjust)) !important;
}

/* Page header blocks render the title twice: a small orange eyebrow/kicker sits
   directly above the real <h1> (e.g. «ВЫПЛАТЫ» over «Выплаты»). Drop the eyebrow
   so only the heading remains. `:has(+ h1)` targets exactly the title-duplicating
   eyebrow — in-card section eyebrows (which precede an <h2>) are left untouched. */
.admin-main .eyebrow:has(+ h1) { display: none !important; }

/* metric numbers — keep tabular but use market mono only for true codes;
   big stat values read better as Inter tabular */
.admin-main .kpi strong,
.admin-main .domain-cube strong,
.admin-main .mini-metric strong,
.admin-main .summary-card strong,
.admin-main .hero-money strong {
  font-family: var(--font-ui) !important;
  font-variant-numeric: tabular-nums;
}
.admin-main .mini-metric.green  { border-color: color-mix(in srgb, var(--green) 40%, var(--border)) !important; }
.admin-main .mini-metric.blue   { border-color: color-mix(in srgb, var(--blue) 40%, var(--border)) !important; }
.admin-main .mini-metric.yellow { border-color: color-mix(in srgb, var(--yellow) 40%, var(--border)) !important; }
.admin-main .summary-card.is-active,
.admin-main .stat-line.is-active {
  background: var(--accent-bg) !important;
  border-color: color-mix(in srgb, var(--accent) 32%, transparent) !important;
}

/* ---- Hero blocks → flat surface, drop decorative noise/orbit art ---- */
/* Statistics FINANCE hero stays flat; the HOME banner (.hero/.hero-command)
   keeps its macOS photo treatment (dark bg + /1324.png + white text) per
   request — only its decorative orbit pseudo is dropped. */
.admin-main .hero-money {
  background: var(--bg-surface) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
.admin-main .hero-money::before,
.admin-main .hero-money::after { display: none !important; }
/* HOME banner: ensure copy stays white over the dark photo in BOTH themes —
   high specificity so the light-theme text sweep can't darken it to invisible. */
.admin-main .hero.hero-command .hero-copy h1,
.admin-main .hero.hero-command .hero-copy p,
.admin-main .hero.hero-command .hero-copy .eyebrow { color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,.35) !important; }

/* ---- Controls: inputs, textarea, selects, segmented, pills ---- */
.admin-main .input,
.admin-main .select,
.admin-main .textarea,
.admin-main .ns-pill,
.admin-main input,
.admin-main textarea {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--text-strong) !important;
}
/* Drainer «empty wallet message» переведён input→textarea (длинный текст больше
   не подрезается). Снимаем фикс-высоту 38/40px, которую навязывают
   .vf-auto-field .input / .drainer-field-full .input — иначе textarea сплющен в
   строку. Многострочный, с вертикальным resize. */
.admin-main .vf-auto-field textarea.input,
.admin-main .drainer-field-full textarea.input {
  height: auto !important;
  min-height: 84px !important;
  line-height: 1.5 !important;
  padding: 9px 12px !important;
  resize: vertical;
  font-family: var(--font-ui) !important;
}
.admin-main .input:focus,
.admin-main .select:focus,
.admin-main .textarea:focus,
.admin-main input:focus,
.admin-main textarea:focus {
  box-shadow: none !important;
}
.admin-main .segmented {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
}
.admin-main .segmented button.is-active { background: color-mix(in srgb, var(--text-strong) 8%, transparent) !important; color: var(--text-strong) !important; }
.admin-main .select-button::after,
.admin-main .select-button:after { border-color: var(--mkt-muted) !important; }

/* ---- Tabs (page-level) → flat, neutral active ---- */
.admin-main .tabs {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}
.admin-main .tab.is-active { background: color-mix(in srgb, var(--text-strong) 7%, transparent) !important; color: var(--text-strong) !important; }

/* ---- List rows → flat, subtle hover ---- */
.admin-main .list-row {
  background: var(--bg-surface) !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
}
.admin-main .list-row:hover {
  background: color-mix(in srgb, var(--text-strong) 6%, transparent) !important;
  border-color: var(--border) !important;
  transform: none !important;
}
.admin-main .activity-row {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

/* ---- Tables → hairline rows, muted uppercase head, no zebra. Auto column
        widths + horizontal scroll so columns size to content instead of the
        cramped fixed grid that overlapped DATE/ACTIONS headers. ---- */
.admin-main .table-wrap { overflow-x: auto !important; }
.admin-main .table {
  table-layout: auto !important;
  width: 100% !important;
}
.admin-main .table th {
  color: var(--mkt-muted) !important;
  background: transparent !important;
  font-weight: calc(600 + var(--fw-adjust)) !important;
  white-space: nowrap !important;
}
.admin-main .table td,
.admin-main .table th {
  border-bottom-color: var(--border) !important;
  border-right: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding: 0 14px !important;
}
.admin-main .table tr { background: transparent !important; }
.admin-main .table tr:hover td { background: color-mix(in srgb, var(--text-strong) 3%, transparent) !important; }

/* ---- Dividers ---- */
.admin-main .divider { background: var(--border) !important; }

/* ---- Buttons → PSET vocabulary. macOS hierarchy (white = high-emphasis,
        dark = secondary) maps onto market (accent primary / ghost graphite). ---- */
.admin-main .btn {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-weight: calc(700 + var(--fw-adjust)) !important;
}
.admin-main .btn:hover { background: var(--accent-hover) !important; transform: none !important; }
.admin-main .btn:active { transform: scale(0.97) !important; }
.admin-main .btn-dark {
  background: color-mix(in srgb, var(--text-strong) 6%, transparent) !important;
  color: var(--text-strong) !important;
  border: 1px solid transparent !important;
}
.admin-main .btn-dark:hover { background: color-mix(in srgb, var(--text-strong) 10%, transparent) !important; }
.admin-main .btn-ghost {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-strong) !important;
  border-radius: 6px !important;
}
.admin-main .btn-ghost:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.admin-main .btn-link { background: transparent !important; color: var(--accent) !important; }
.admin-main .btn-link:hover { color: var(--accent-hover) !important; }

/* ---- Badges / step counters ---- */
.admin-main .step-grid strong { background: var(--accent) !important; color: var(--accent-contrast) !important; }

/* ============================================================================
   SUPPORT — restyle the existing admin support markup into the market support
   look (Apple-Messages style) WITHOUT touching its JS: flat shell, accent-fill
   active conversation, market chat bubbles with a tail, pill composer with a
   circular accent send button. All [data-*] hooks the JS uses are preserved
   because we only change appearance. Admin keeps its 3rd column (forms/presets).
   ========================================================================== */

/* Shell — fill the area under header+nav, flat columns separated by hairlines.
   Override the legacy calc(100dvh - topbar) hardcodes (no macOS topbar here). */
.admin-main .support-shell {
  height: calc(100vh - 56px - 46px - 48px) !important;
  min-height: 520px !important;
  margin: 0 !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.admin-main .support-left,
.admin-main .support-right { border-color: var(--border) !important; background: var(--bg) !important; }
.admin-main .support-left { border-right: 1px solid var(--border) !important; }
.admin-main .support-right { border-left: 1px solid var(--border) !important; }

/* Desktop: pin the list header (title + AI/Manual tabs + search) so scrolling the
   inbox never drags them off-screen. Only .support-inbox scrolls — mirrors the
   mobile flex-column layout in support-mobile.css. (≤768px keeps its own rules.) */
@media (min-width: 769px) {
  .admin-main .support-shell .support-left {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .admin-main .support-shell .support-left > .support-side-head,
  .admin-main .support-shell .support-left > .support-mode-tabs,
  .admin-main .support-shell .support-left > .support-search-wrap {
    flex: 0 0 auto !important;
  }
  .admin-main .support-shell .support-left > .support-inbox {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

/* Conversation cards — flat, subtle hover, soft accent active (not full fill) */
.admin-main .chat-card {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  margin: 1px 8px !important;
}
/* Mode tabs (AI/Manual) set .chat-card.hidden — never let display overrides win */
.admin-main .chat-card[hidden],
.admin-main .chat-mode-empty[hidden] {
  display: none !important;
}
.admin-main .chat-card:hover {
  background: color-mix(in srgb, var(--text-strong) 5%, transparent) !important;
}
.admin-main .chat-card.is-active {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg)) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}
.admin-main .chat-card.is-active,
.admin-main .chat-card.is-active * { color: var(--text-strong) !important; }
.admin-main .chat-card.is-active strong { color: var(--accent) !important; }
.admin-main .chat-card.is-active .chat-card-time,
.admin-main .chat-card.is-active small,
.admin-main .chat-card.is-active em { color: var(--mkt-muted) !important; }
.admin-main .chat-card.is-active .unread {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
}

/* Search pill */
.admin-main .support-search,
.admin-main .support-search-wrap .input { border-radius: 999px !important; background: var(--bg-surface) !important; border: 1px solid var(--border) !important; }

/* Chat header strip */
.admin-main .chat-top { background: var(--bg-header) !important; border-bottom: 1px solid var(--border) !important; }
/* Кнопка «назад» к списку чатов нужна ТОЛЬКО на мобиле (там список и чат —
   разные экраны). На ПК список и чат видны рядом → стрелка лишняя. macOS прятал
   её через .mac-window-content, которого в /new/ нет, поэтому прячем явно.
   support-mobile.css показывает её обратно внутри @media (max-width:768px). */
.admin-main .support-shell .chat-top .chat-back { display: none; }
.admin-main .chat-substrip { border-bottom: 1px solid var(--border) !important; }
.admin-main .cps-chip { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; border-radius: 999px !important; color: var(--text-strong) !important; }

/* Thread + bubbles (market: rounded 14 + 4px tail, accent out / bordered in) */
.admin-main .support-thread,
.admin-main .chat-empty.support-thread { background: var(--bg) !important; background-image: none !important; }
.admin-main .message-row {
  max-width: 70% !important;
  padding: 7px 11px 5px !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.05) !important;
}
.admin-main .message-row.is-user { align-self: flex-start !important; border-bottom-left-radius: 4px !important; }
.admin-main .message-row.is-admin {
  align-self: flex-end !important;
  /* Outgoing (support / AI) bubbles drop the orange fill and instead mirror the
     OPPOSITE theme's user-message card: a dark card on the light theme, a light
     card on the dark theme. Values are the other theme's bg/border/text tokens,
     hard-set so a theme switch doesn't re-map them back. */
  background: #1e2428 !important;      /* dark --bg-surface */
  border-color: #242b32 !important;    /* dark --border */
  border-bottom-right-radius: 4px !important;
  color: #dee3e7 !important;           /* dark --text-strong */
}
.admin-main .message-row.is-admin p,
.admin-main .message-row.is-admin p * { color: #dee3e7 !important; }
.admin-main .message-row.is-admin strong,
.admin-main .message-row.is-admin small,
.admin-main .message-row.is-admin small *,
.admin-main .message-row.is-admin .msg-translate-btn { color: #8a97a6 !important; }
[data-theme="dark"] .admin-main .message-row.is-admin {
  background: #ffffff !important;      /* light --bg */
  border-color: #efefef !important;    /* light --border */
  color: #101319 !important;           /* light --text-strong */
}
[data-theme="dark"] .admin-main .message-row.is-admin p,
[data-theme="dark"] .admin-main .message-row.is-admin p * { color: #101319 !important; }
[data-theme="dark"] .admin-main .message-row.is-admin strong,
[data-theme="dark"] .admin-main .message-row.is-admin small,
[data-theme="dark"] .admin-main .message-row.is-admin small *,
[data-theme="dark"] .admin-main .message-row.is-admin .msg-translate-btn { color: #8c8a8e !important; }
.admin-main .message-row.is-selected { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent) !important; }
[data-theme="dark"] .admin-main .message-row.is-user { background: var(--bg-surface) !important; border-color: var(--border) !important; }

/* Composer — flat row, pill textarea, circular accent send */
.admin-main .composer.support-composer,
.admin-main .support-composer {
  background: var(--bg-header) !important;
  border-top: 1px solid var(--border) !important;
  min-height: 0 !important;
}
/* Telegram composer: the textarea lives INSIDE .tg-bar, so it must NOT have its
   own box (background / border / radius) nor a focus ring — the bar is the
   single visible surface. Overrides the generic `.admin-main textarea` box +
   the accent :focus / :focus-visible rings from style.css / mobile-animations. */
.admin-main .support-composer .support-textarea {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--text-strong) !important;
  min-height: 40px !important;
  padding: 9px 6px !important;
}
.admin-main .support-composer .support-textarea:focus,
.admin-main .support-composer .support-textarea:focus-visible {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.admin-main .icon-btn {
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--mkt-muted) !important;
  border: none !important;
}
.admin-main .icon-btn:hover { background: var(--border) !important; color: var(--text-strong) !important; }
.admin-main .composer-send-inline,
.admin-main .support-send-btn {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  border-radius: 50% !important;
  border: none !important;
}
.admin-main .composer-send-inline:hover,
.admin-main .support-send-btn:hover { background: var(--accent-hover) !important; }

/* Forms / presets right rail — flat cards */
.admin-main .preset,
.admin-main .response-card { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; }

/* Count chip in sidebar head (#090909 → flat) */
.admin-main .support-side-head strong {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-strong) !important;
  font-family: var(--font-ui) !important;
  font-variant-numeric: tabular-nums;
}
/* Composer tool buttons (#101010 squares → outline icon buttons) */
.admin-main .composer-tools { color: var(--mkt-muted) !important; }
.admin-main .composer-tools button {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--mkt-muted) !important;
  border-radius: 8px !important;
}
.admin-main .composer-tools button:hover { background: var(--border) !important; color: var(--text-strong) !important; }
/* Right-rail "PRESETS" divider pill (#0a0a0a → page bg) */
.admin-main .support-tools-divider span { background: var(--bg) !important; color: var(--mkt-muted) !important; font-family: var(--font-ui) !important; }
.admin-main .support-tools-divider::before { background: linear-gradient(to right, transparent, var(--border), transparent) !important; }
/* Select-mode pill */
.admin-main .chat-action-pill { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; color: var(--text-strong) !important; border-radius: 999px !important; }

/* Кнопка «Шаблоны» (#101010 pencil) убрана из чата поддержки на всех вьюпортах:
   на десктопе её и так не было (в текущей разметке нет правого рейла шаблонов),
   на мобиле блок под полем ввода убран по требованию. */
.admin-main .support-mobile-forms { display: none !important; }

/* Support is a chat app — let it use the FULL page width (not the 1920 cap),
   filling the area under header+nav with flush edges. */
.admin-main:has(.support-shell) { max-width: none !important; padding: 0 !important; }
.admin-main .support-shell {
  height: calc(100vh - 56px - 46px) !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
}

/* Lightbox / toast keep market neutrals */
.admin-main .support-lightbox { background: color-mix(in srgb, #000 78%, transparent) !important; }

/* Per-domain value rows (settings drainer + FB Pixel share
   .verification-perdomain-list li, hardcoded #111 → raised flat row). */
.admin-main .verification-perdomain { border: 1px solid var(--border) !important; border-radius: 8px !important; background: var(--bg) !important; padding: 12px !important; }
.admin-main .verification-perdomain-list li {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
}
.admin-main .verification-perdomain-list .vp-domain { color: var(--text-strong) !important; }
.admin-main .verification-perdomain-list .vp-value { color: var(--mkt-muted) !important; }

/* ============================================================================
   LIGHT-THEME READABILITY — macOS is dark-first; tons of texts are hardcoded
   #fff / light-gray (built for a dark bg) → invisible on white. Lift primary
   text to --text-strong and faint labels to readable muted.
   ========================================================================== */
html:not([data-theme="dark"]) .admin-main :is(h1, h2, h3, h4, h5, strong, b) { color: var(--text-strong) !important; }
html:not([data-theme="dark"]) .admin-main :is(
  .cps-chip b, .wb-total-value, .wb-chain-value, .wb-flat-total,
  .totp-state-head strong, .api-warning strong, .message-form b,
  .materials-doc strong, .hero-money strong, .mono-value,
  .sortable-th:hover, .api-docs summary:hover, .color-tab:hover
) { color: var(--text-strong) !important; }
/* exceptions: chips/circles/buttons that sit on an accent fill keep white text */
html:not([data-theme="dark"]) .admin-main .step-grid strong,
html:not([data-theme="dark"]) .admin-main .btn:not(.btn-dark):not(.btn-ghost):not(.btn-link),
html:not([data-theme="dark"]) .admin-main .btn:not(.btn-dark):not(.btn-ghost):not(.btn-link) * { color: var(--accent-contrast) !important; }
/* faint labels / descriptions → readable muted (both themes) */
.admin-main :is(
  .kpi span, .domain-cube span, .mini-metric span, .summary-card span, .summary-card small,
  .message-form small, .response-card small, .materials-doc, .materials-doc pre,
  .hint, .label, .muted, .empty, .compact-empty, .top-online-vis, .drain-stat-label, .drain-stat-hint
) { color: var(--mkt-muted) !important; }

/* ============================================================================
   SUPPORT — operator asked to drop the "User responses" rail block.
   ========================================================================== */
.admin-main .support-responses { display: none !important; }

/* ============================================================================
   DRAIN-EVENTS — page is built on its own --de-* tokens (hardcoded dark). Remap
   them onto the market palette so it adapts to BOTH themes (esp. light).
   ========================================================================== */
.admin-main .drain-events-page {
  --de-bg-tile: var(--bg-surface) !important;
  --de-bg-card: var(--bg) !important;
  --de-bg-hover: color-mix(in srgb, var(--text-strong) 6%, var(--bg)) !important;
  --de-bg-deep: var(--bg) !important;
  --de-border: var(--border) !important;
  --de-border-2: var(--border) !important;
}

/* ============================================================================
   MOBILE — left drawer ported from the market (.mobile-nav-*). The header
   hamburger (#mobile-menu-btn) opens it; it lists the admin sections + theme +
   macOS link + logout. On phones the horizontal nav-tabs row is replaced by it.
   ========================================================================== */
.mobile-nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 240; pointer-events: none; transition: background 0.3s ease; }
.mobile-nav-overlay.open { background: rgba(0,0,0,0.45); pointer-events: auto; }
.mobile-nav-drawer { position: absolute; top: 0; left: 0; bottom: 0; width: 284px; max-width: 86vw; background: var(--bg); border-right: 1px solid var(--border); overflow-y: auto; padding: 16px 0; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
.mobile-nav-overlay.open .mobile-nav-drawer { transform: translateX(0); }
.mn-head { display: flex; align-items: center; gap: 10px; padding: 4px 20px 14px; }
.mn-head img { width: 32px; height: 32px; object-fit: contain; }
.mn-head b { font-size: 18px; font-weight: calc(700 + var(--fw-adjust)); color: var(--text-strong); letter-spacing: -0.02em; }
.mn-head .logo-badge { margin-left: 2px; }
.mn-section { padding: 8px 0; }
.mn-divider { height: 1px; background: var(--border); margin: 0 20px; }
.mobile-nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; font-size: 15px; font-weight: calc(500 + var(--fw-adjust)); color: var(--text-strong); cursor: pointer; transition: background 0.15s; -webkit-tap-highlight-color: transparent; text-decoration: none; }
.mobile-nav-item:active { background: var(--border); }
.mobile-nav-item.is-active { background: var(--accent-bg); color: var(--accent); }
.mobile-nav-item svg { flex-shrink: 0; }
.mn-theme-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 20px; background: transparent; border: none; cursor: pointer; color: var(--text-strong); font-size: 15px; font-weight: calc(500 + var(--fw-adjust)); }
.mn-theme-row .mn-theme-switch { margin-left: auto; position: relative; width: 40px; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--text-strong) 12%, transparent); transition: background 0.15s; flex-shrink: 0; }
.mn-theme-row .mn-theme-knob { position: absolute; top: 2.5px; left: 2.5px; width: 19px; height: 19px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.18); transition: transform 0.15s cubic-bezier(0.4,0,0.2,1); }
[data-theme="dark"] .mn-theme-switch.is-on { background: var(--accent); }
[data-theme="dark"] .mn-theme-switch.is-on .mn-theme-knob { transform: translateX(16px); }
.mn-theme-switch.is-on { background: var(--accent); }
.mn-theme-switch.is-on .mn-theme-knob { transform: translateX(16px); }
.mn-btn-logout { width: calc(100% - 40px); margin: 4px 20px; height: 40px; border-radius: 6px; border: none; background: var(--red-bg); color: var(--red); font-weight: calc(600 + var(--fw-adjust)); font-size: 14px; cursor: pointer; }

/* Desktop: drawer + hamburger hidden (nav-tabs row is the desktop nav). */
.mobile-menu-btn { display: none; }
@media (max-width: 768px) {
  .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .nav-tabs { display: none; }
  .admin-main { padding: 16px; min-height: calc(100vh - 56px); }
  .admin-main:has(.support-shell) .support-shell { height: calc(100dvh - 56px - 56px - env(safe-area-inset-bottom, 0px)) !important; }
  .header-inner { padding: 0 12px; gap: 8px; }
  /* Mobile header: smaller logo, drop the search box, surface Online + Deposits
     where the search used to be. */
  .logo { font-size: 16px !important; max-width: 150px; }
  .logo-icon { width: 32px !important; height: 32px !important; }
  .search-box { display: none !important; }
  .header-balance {
    display: inline-flex !important;
    margin-left: auto;
    margin-right: 4px;
  }
  .header-balance .hb-item { padding: 0 8px; }
  .header-balance .hb-label { font-size: 9px; }
  .header-balance .hb-value { font-size: 12px; }
  .btn-deposit#deposit-btn { display: none !important; }
}

/* ============================================================================
   BODY-LEVEL OVERLAYS (modals / toasts / lightbox) — these mount on <body>,
   OUTSIDE .admin-main, so the token bridge never reaches them and they render
   in the macOS dark palette (e.g. promo-edit modal: black on light theme).
   Re-theme them globally here for BOTH themes.
   ========================================================================== */
.api-modal, .api-modal-card, .api-modal-backdrop,
.support-template-modal, .support-template-backdrop, .support-preset-modal,
.toast, .toast-stack, .support-lightbox {
  --panel: var(--bg); --panel-2: var(--bg-surface); --panel-3: var(--bg-surface);
  --line: var(--border); --line-2: var(--border-hover);
  --text: var(--text-strong); --muted: var(--mkt-muted); --muted-2: var(--mkt-muted);
  --brand: var(--accent); --brand-hover: var(--accent-hover); --pink: var(--accent);
  --font: var(--font-ui); --mono: var(--font-ui);
}
.api-modal-card, .support-template-modal, .support-preset-modal {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text-strong) !important;
}
.api-modal-card header, .api-modal-card footer { background: var(--bg) !important; border-color: var(--border) !important; }
.api-modal-card :is(h1,h2,h3,h4,strong,b,label) { color: var(--text-strong) !important; }
.api-modal-card :is(p,small,.hint,.label,.muted) { color: var(--mkt-muted) !important; }
.api-modal-body { color: var(--text-strong) !important; }
.api-modal-target { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--accent) !important; }
.api-modal-card header .icon-btn { color: var(--mkt-muted) !important; }
.api-modal-card header .icon-btn:hover { background: var(--border) !important; color: var(--text-strong) !important; }
.api-modal-card :is(input, select, textarea, .input, .select, .textarea) {
  background: var(--bg-surface) !important; border: 1px solid var(--border) !important; color: var(--text-strong) !important; border-radius: 6px !important;
}
.api-modal-card .btn { background: var(--accent) !important; color: var(--accent-contrast) !important; border: none !important; }
.api-modal-card .btn-dark { background: color-mix(in srgb, var(--text-strong) 6%, transparent) !important; color: var(--text-strong) !important; }
.api-modal-backdrop, .support-template-backdrop { background: color-mix(in srgb, #000 55%, transparent) !important; backdrop-filter: blur(3px); }
.toast { background: var(--bg) !important; border: 1px solid var(--border) !important; color: var(--text-strong) !important; box-shadow: var(--shadow-lg) !important; }

/* ============================================================================
   COMPONENT FIXES (round 3) — from red-highlighted reports.
   ========================================================================== */

/* Support peer-info chips bar (#1) — was rgba(18,18,18,.55) gray → flat white
   with hairline dividers top & bottom, chips already flat. */
.admin-main .chat-substrip {
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Settings inner section nav active item (#161616 black → pset neutral) */
.admin-main .settings-section-link.is-active {
  background: color-mix(in srgb, var(--text-strong) 7%, transparent) !important;
  border-color: var(--border) !important;
  color: var(--text-strong) !important;
}
.admin-main .settings-section-link:hover {
  background: color-mix(in srgb, var(--text-strong) 4%, transparent) !important;
  color: var(--text-strong) !important;
}

/* My Addresses — black square at the left of each address input. .pd-card-input
   wrapper + .pd-dirty-dot indicator → flat input, dot becomes a tiny accent dot
   (visible only when the row is dirty, via macОS's own [data-dirty] rule). */
.admin-main .pd-card-input {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
}
.admin-main .pd-card-input:focus-within { border-color: transparent !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent) !important; }
.admin-main .pd-dirty-dot {
  width: 7px !important; height: 7px !important; min-width: 7px !important;
  border-radius: 50% !important; background: transparent !important; box-shadow: none !important;
}
.admin-main .pd-card[data-dirty="true"] .pd-dirty-dot { background: var(--accent) !important; }

/* Row action buttons (#333 black-on-hover → neutral). Applies to users/domains
   .actions and pagination arrows. */
.admin-main .actions { background: transparent !important; border: 1px solid var(--border) !important; color: var(--mkt-muted) !important; }
.admin-main .actions button:hover,
.admin-main .actions .icon-link:hover,
.admin-main .page-arrow:hover,
.admin-main .page-num:hover { background: color-mix(in srgb, var(--text-strong) 8%, transparent) !important; color: var(--text-strong) !important; }

/* ============================================================================
   MOBILE — kill horizontal overflow: collapse the known multi-column grids so
   nothing exceeds the viewport, clamp the document, tables scroll inside their
   own wrap (not the page).
   ========================================================================== */
@media (max-width: 768px) {
  /* Horizontal containment ONLY on <html> (the viewport scroller). Setting
     overflow-x on <body>/.admin-main would turn THEM into scroll containers and
     break vertical scrolling (the recurring bug). Body stays overflow:visible →
     the document scrolls via <html>; grids collapse so nothing overflows wide. */
  html { overflow-x: hidden !important; }
  body { max-width: 100vw !important; overflow: visible !important; }
  .admin-main { max-width: 100vw !important; padding: 14px !important; --container: 100% !important; }
  .admin-main .page { width: 100% !important; max-width: 100% !important; }
  .admin-main :is(
    .overview-hero, .command-stack, .ops-grid, .insight-grid, .grid-2, .grid-main,
    .kpi-grid, .domain-cubes, .summary-strip, .summary-grid, .step-grid, .pset-statgrid
  ) { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .admin-main .table-wrap { overflow-x: auto !important; max-width: 100% !important; }
  .admin-main .table { min-width: 560px !important; }
  .admin-main .hero.hero-command { min-height: 180px !important; }
  .admin-main .hero.hero-command .hero-visual { opacity: .5 !important; }
}

/* ============================================================================
   COMPONENT FIXES (round 4) — domain editor drawer, user-detail header.
   ========================================================================== */

/* Domain design editor — drawer mounted on <body> (#domain-editor), dark on
   light. Plus the dwm-* modal (uses dead --bg-secondary). Theme both. */
#domain-editor, .domain-editor, .domain-editor__inner, .domain-drawer-backdrop,
.dwm-overlay, .dwm-box {
  --panel: var(--bg); --panel-2: var(--bg-surface); --panel-3: var(--bg-surface);
  --line: var(--border); --line-2: var(--border-hover);
  --text: var(--text-strong); --muted: var(--mkt-muted); --muted-2: var(--mkt-muted);
  --bg-secondary: var(--bg-surface);
  --brand: var(--accent); --brand-hover: var(--accent-hover); --pink: var(--accent);
  --font: var(--font-ui); --mono: var(--font-ui);
}
.domain-editor__inner, .dwm-box {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-strong) !important;
}
.domain-drawer-backdrop, .dwm-overlay { background: color-mix(in srgb, #000 55%, transparent) !important; backdrop-filter: blur(3px); }
.domain-editor :is(h1,h2,h3,h4,strong,b,label) { color: var(--text-strong) !important; }
.domain-editor :is(p,small,.hint,.label,.muted,.eyebrow) { color: var(--mkt-muted) !important; }
.domain-editor :is(input, select, textarea, .input, .select, .textarea) {
  background: var(--bg-surface) !important; border: 1px solid var(--border) !important;
  color: var(--text-strong) !important; border-radius: 6px !important;
}
.domain-editor :is(.de-card, .de-section, .de-tile, [class*="card"], [class*="panel"]) {
  background: var(--bg) !important; border-color: var(--border) !important;
}
.domain-editor .btn { background: var(--accent) !important; color: var(--accent-contrast) !important; border: none !important; }
.domain-editor .btn-dark { background: color-mix(in srgb, var(--text-strong) 6%, transparent) !important; color: var(--text-strong) !important; }

/* User-detail header card (#1): gray .uc-identity block → flat theme bg; the
   .uc-avatar becomes a clean gradient circle hosting the avatar placeholder
   (JS injects avatarPlaceholderHTML; this styles the host). */
.admin-main .user-card .uc-identity {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
}
/* CSS-only gradient avatar (market look: gradient + white favicon) — pure CSS
   so it survives the internal tab re-renders inside renderUserDetail. */
.admin-main .uc-avatar {
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: linear-gradient(135deg, #22c55e, #3b82f6) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
.admin-main .uc-avatar svg { display: none !important; }
.admin-main .uc-avatar::after {
  content: "" !important;
  width: 50%; height: 50%;
  background: url(/images/favicon-48.png) center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
/* if JS ever injects a real placeholder, let it fill (and drop the ::after) */
.admin-main .uc-avatar > .avatar-placeholder { width: 44px !important; height: 44px !important; background: none; }
.admin-main .uc-avatar:has(.avatar-placeholder) { background: none !important; }
.admin-main .uc-avatar:has(.avatar-placeholder)::after { display: none; }

/* Support chat avatars in new shell (desktop) - proper crop for mammoth imgs */
.admin-main .support-shell .chat-avatar,
.admin-main .support-shell .chat-peer-avatar {
  overflow: hidden;
  display: inline-block;
}
.admin-main .support-shell .chat-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.admin-main .support-shell .chat-peer-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

/* Header above chat: avatar left, nick right in single line */
.admin-main .support-shell .chat-top .chat-peer {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
.admin-main .support-shell .chat-avatar img,
.admin-main .support-shell .chat-peer-avatar img,
.admin-main .support-shell .chat-avatar .mammoth-avatar,
.admin-main .support-shell .chat-peer-avatar .mammoth-avatar {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================================
   SUPPORT — native send button (.composer-send-inline[data-send-reply]) was
   invisible (dark) then, once tinted, stretched tall by the composer grid.
   Pin it as a proportional 40×40 accent circle bottom-right; pad the textarea
   so text never slides under it. (No JS-injected button — there's only one.)
   ========================================================================== */
.admin-main .support-composer,
.admin-main .composer.support-composer { position: relative !important; }
.admin-main .composer-send-inline {
  position: absolute !important;
  right: 14px !important; bottom: 12px !important;
  width: 40px !important; height: 40px !important;
  min-width: 40px !important; max-width: 40px !important;
  min-height: 40px !important; max-height: 40px !important;
  flex: none !important; align-self: center !important;
  padding: 0 !important; aspect-ratio: 1 / 1 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border: none !important; border-radius: 50% !important;
  background: var(--accent) !important; color: var(--accent-contrast) !important;
  cursor: pointer; z-index: 3;
  transition: background 0.15s, transform 0.15s;
}
.admin-main .composer-send-inline svg { width: 18px !important; height: 18px !important; }
.admin-main .composer-send-inline:hover { background: var(--accent-hover) !important; }
.admin-main .composer-send-inline:active { transform: scale(0.94) !important; }
.admin-main .support-textarea,
.admin-main [data-support-reply] { padding-right: 56px !important; }

/* ============================================================================
   PAGE WIDTH — content blocks span the full shell width (logo→avatar), aligning
   with the header. The Settings hub (.pset-page) was capped at 1000px centered;
   in the admin it should fill the column like every other page.
   ========================================================================== */
.admin-main .pset-page { max-width: none !important; padding: 0 !important; margin: 0 !important; }
.admin-main .pset-layout { gap: 24px !important; }

/* Settings inner section-rail (macОS renderSettings nested nav) — dark box on
   light → flat. */
.admin-main .settings-section-rail,
.admin-main .settings-section-grid { background: transparent !important; border: none !important; }
.admin-main .settings-section-link {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-strong) !important;
}

/* Domain editor — inner color cards / tabs / footer were dark on light theme. */
.admin-main .domain-editor .color-control,
.admin-main .color-control {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text-strong) !important;
}
.admin-main .color-control span { color: var(--mkt-muted) !important; }
.admin-main .color-control strong { color: var(--text-strong) !important; }
.admin-main .color-tabs { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; }
.admin-main .color-tab { color: var(--mkt-muted) !important; }
.admin-main .color-tab.is-active { background: var(--bg) !important; color: var(--text-strong) !important; box-shadow: var(--shadow) !important; }
.admin-main .domain-editor-actions,
.admin-main .domain-editor__inner .form-actions,
.admin-main .domain-editor footer { background: var(--bg) !important; border-top: 1px solid var(--border) !important; }
.admin-main .color-section-head,
.admin-main .domain-editor .color-section-head { color: var(--text-strong) !important; }

/* Canvas fix: the legacy macOS stylesheet paints the <html> element a near-black
   #050505 (its own dark shell). Our layout never covered it before, but the
   floating content card exposes a hairline of it around the edges — a black
   bar on light theme (and a darker band on dark). Repaint the root canvas with
   our theme surface token so exposed edges read as the app background in BOTH
   themes. !important is needed to beat the legacy declaration. */
html { background: var(--bg-surface) !important; }

/* ============================================================================
   DESKTOP / TABLET SIDEBAR (atlascore-style) — replaces the top header +
   horizontal nav-tabs on ≥769px (tablet-width laptops included, not just wide
   desktops). TRUE MOBILE IS UNTOUCHED: the sidebar is display:none by default
   (so phones never see the fixed rail) and only becomes the fixed rail inside
   this media query, where it also hides the legacy .header / .nav-tabs /
   bottom-bar. Below 769px the same element turns into the off-canvas drawer
   (see the max-width:768px block) and the header + bottom-bar keep working.
   ========================================================================== */
.admin-sidebar { display: none; }

@media (min-width: 769px) {
  /* Grey "app" canvas; content floats above it as a rounded card. */
  body { background: var(--bg-surface); }

  /* The mobile-era chrome steps aside on desktop. */
  .header,
  .nav-tabs,
  .mobile-bottom-bar { display: none !important; }

  .admin-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 248px;
    z-index: 90;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
  }
} /* ── end desktop-layout media. The .asb-* component styles below are SHARED:
     the same .admin-sidebar is the fixed rail on desktop and the off-canvas
     drawer on mobile (see the max-width:1023px block), so its chrome lives at
     base. Desktop-only layout (content margin, hidden mobile chrome) re-opens
     its own @media before .admin-main. ── */

  /* Brand — logo + product name (workspace header of the reference). */
  .asb-brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; }
  .asb-brand img { width: 30px; height: 30px; object-fit: contain; border-radius: 8px; flex-shrink: 0; }
  .asb-brand b { font-size: 17px; font-weight: calc(700 + var(--fw-adjust)); letter-spacing: -0.02em; color: var(--text-strong); }

  .asb-divider { height: 1px; background: var(--border); margin: 0 16px; }

  /* Section list — icon + label rows, rounded hover/active pill. */
  .asb-nav { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
  .asb-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: 10px;
    font-size: 14px; font-weight: calc(500 + var(--fw-adjust));
    color: var(--text-strong); text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .asb-ico { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); transition: color 0.16s ease; }
  .asb-ico svg { width: 20px; height: 20px; display: block; }
  .asb-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .asb-item:hover { background: color-mix(in srgb, var(--text-strong) 6%, transparent); }
  .asb-item:hover .asb-ico { color: var(--text-strong); }
  .asb-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-shadow); }
  .asb-item.is-active { background: var(--accent-bg); color: var(--accent); font-weight: calc(600 + var(--fw-adjust)); }
  .asb-item.is-active .asb-ico { color: var(--accent); }

  /* Footer — theme toggle + user card + logout (replaces the header user menu,
     which is hidden on desktop). Mirrors the reference's bottom identity card. */
  .asb-footer { border-top: 1px solid var(--border); padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; }

  /* Commission + Telegram cards over a language switch (sits above the theme
     toggle). Borderless — a `var(--bg)` fill separates each block from the
     surface, same card idiom as the user card below. Radii match the ref;
     the number stays neutral (no accent) — only the Telegram mark keeps its
     real brand blue. */
  .asb-promo { display: flex; flex-direction: column; gap: 8px; }
  .asb-promo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .asb-promo-card {
    display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
    min-height: 82px; padding: 12px 13px; border-radius: 16px;
    background: var(--bg); text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .asb-promo-val {
    font-size: 25px; font-weight: calc(700 + var(--fw-adjust)); line-height: 1;
    letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums;
  }
  .asb-promo-cap { font-size: 12px; font-weight: calc(500 + var(--fw-adjust)); color: var(--text-muted); line-height: 1.2; }
  .asb-promo-tg { display: inline-flex; }
  .asb-promo-tg svg { width: 26px; height: 26px; display: block; }
  .asb-promo-card--tg { transition: background 0.16s ease; }
  .asb-promo-card--tg:hover { background: color-mix(in srgb, var(--text-strong) 7%, var(--bg)); }
  .asb-promo-card--tg:hover .asb-promo-cap { color: var(--text-strong); }
  .asb-promo-card--tg:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-shadow); }

  /* Language switch — the shared .aseg segmented control (modules/segmented.js).
     Only the track colour differs here: the sidebar footer wants the opaque
     `var(--bg)` block that matches the commission / Telegram cards above it. */
  .asb-lang { --aseg-track: var(--bg); }

  /* Theme toggle — wrapped as its own block, same `var(--bg)` idiom. */
  .asb-theme {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; border-radius: 12px; background: var(--bg);
    color: var(--text-strong); font-size: 13.5px; font-weight: calc(500 + var(--fw-adjust));
    transition: background 0.16s ease;
  }
  .asb-theme:hover { background: color-mix(in srgb, var(--text-strong) 5%, var(--bg)); }
  .asb-theme-ico { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; color: var(--text-muted); }
  .asb-theme-ico svg { width: 18px; height: 18px; display: block; }
  .asb-theme-label { margin-right: auto; }
  .asb-switch { position: relative; width: 38px; height: 22px; border-radius: 999px; flex-shrink: 0; background: color-mix(in srgb, var(--text-strong) 14%, transparent); transition: background 0.18s ease; }
  .asb-switch-knob { position: absolute; top: 2.5px; left: 2.5px; width: 17px; height: 17px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.18s cubic-bezier(0.4,0,0.2,1); }
  .asb-switch.is-on { background: var(--accent); }
  .asb-switch.is-on .asb-switch-knob { transform: translateX(16px); }

  .asb-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
  .asb-avatar {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: calc(600 + var(--fw-adjust)); color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    text-transform: uppercase;
  }
  .asb-user-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .asb-user-meta b { font-size: 13.5px; font-weight: calc(600 + var(--fw-adjust)); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .asb-user-meta small { font-size: 11px; color: var(--text-muted); text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Gear button inside the user card → opens the settings popover. */
  .asb-usermenu { position: relative; }
  .asb-gear { margin-left: auto; width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--text-muted); transition: background 0.16s ease, color 0.16s ease; }
  .asb-gear svg { width: 18px; height: 18px; display: block; }
  .asb-gear:hover { background: color-mix(in srgb, var(--text-strong) 8%, transparent); color: var(--text-strong); }
  .asb-usermenu.open .asb-gear { background: var(--accent-bg); color: var(--accent); }

  /* Popover — opens upward from the user card. */
  .asb-menu {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 8px);
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow-lg); padding: 6px; z-index: 120;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  }
  .asb-usermenu.open .asb-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .asb-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border-radius: 8px; text-decoration: none;
    font-size: 13.5px; font-weight: calc(500 + var(--fw-adjust)); color: var(--text-strong);
    transition: background 0.14s ease;
  }
  .asb-menu-item:hover { background: color-mix(in srgb, var(--text-strong) 6%, transparent); }
  .asb-menu-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-shadow); }
  .asb-menu-ico { width: 17px; height: 17px; flex-shrink: 0; display: inline-flex; color: var(--text-muted); }
  .asb-menu-ico svg { width: 17px; height: 17px; display: block; }
  .asb-menu-sep { height: 1px; background: var(--border); margin: 5px 4px; }
  .asb-menu-logout { color: var(--red); }
  .asb-menu-logout .asb-menu-ico { color: var(--red); }
  .asb-menu-logout:hover { background: var(--red-bg); }

/* ── True mobile (<769px): the SAME sidebar element slides in as an off-canvas
   drawer, opened by the bottom-bar «More» tab. Identical chrome to the fixed
   rail — brand + nav + footer (commission / Telegram / language / theme / user
   card) — so the phone menu is 1:1 with the PC/tablet left panel. ── */
@media (max-width: 768px) {
  .admin-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 284px; max-width: 86vw;
    z-index: 241;
    background: var(--bg);
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.3s;
  }
  body.asb-drawer-open .admin-sidebar { transform: translateX(0); visibility: visible; }
  .asb-scrim {
    position: fixed; inset: 0; z-index: 240;
    background: rgba(0, 0, 0, 0); pointer-events: none;
    transition: background 0.3s ease;
  }
  body.asb-drawer-open .asb-scrim { background: rgba(0, 0, 0, 0.45); pointer-events: auto; }
  /* Respect the notch / home-indicator when the rail runs edge to edge. */
  .admin-sidebar .asb-brand { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
  .admin-sidebar .asb-footer { padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 769px) {
  .asb-scrim { display: none; }

  /* Content shifts right of the fixed sidebar and floats as a rounded card. */
  .admin-main {
    margin: 12px 12px 12px calc(248px + 12px);
    max-width: none;
    min-height: calc(100vh - 24px);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    --container: min(1352px, 100%);
  }

  /* Support chat as a floating, rounded card — slightly inset with equal gutters
     (balanced/centred), soft rounded corners on the whole block, and the shell
     filling it exactly (no empty band under the chat). The top header + nav-tabs
     are hidden on desktop (a fixed sidebar replaces them), so the card is sized
     from the viewport: margin 18px all round → height calc(100vh - 36px); its
     1px border makes the content box calc(100vh - 38px), which the shell fills.
     overflow:hidden clips the square-cornered shell to the card's 16px radius. */
  .admin-main:has(.support-shell) {
    margin: 18px 18px 18px calc(248px + 18px) !important;
    height: calc(100vh - 36px) !important;
    min-height: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .admin-main:has(.support-shell) .support-shell {
    height: calc(100vh - 38px) !important;
    min-height: 0 !important;
    border-radius: 16px !important;
  }

  /* Settings-hub side rail (2FA / FB Pixel / My Addresses): the market's sticky
     `top: 100px` assumed a 100px sticky page header — which the desktop admin
     layout no longer has. With top:100 > the rail's natural offset, sticky
     force-pushed the rail 100px down; on short sections the containing-block
     clamp snapped it back up, so it jumped when switching sections. A small
     offset (≤ the rail's natural top) means sticky never pulls it down: it stays
     pinned at the top consistently and still sticks on scroll. */
  .admin-main .pset-side { top: 24px; }

  @media (prefers-reduced-motion: reduce) {
    .asb-item, .asb-theme, .asb-switch, .asb-switch-knob, .asb-logout, .asb-ico,
    .asb-promo-card--tg { transition: none; }
  }
}

/* ── Segmented control (.aseg) ───────────────────────────────────────────────
   Shared pill switcher: an inset track with a thumb that GLIDES to the picked
   segment (transform-only, GPU-cheap). Introduced for the sidebar EN/RU picker
   and reused wherever a small set of mutually exclusive options needs to read
   as one control (Platform settings → default site theme).

   Segment count is data, not CSS: `--aseg-n` sizes the columns and the thumb,
   `--aseg-i` (set inline by segmented.js) moves it. Any N works, no per-count
   rules. Global on purpose — the sidebar is desktop-only, the settings cards
   are not.

   Colours are two knobs so a host block can match its own surface:
     --aseg-track  track fill (default: lifted off the card it sits on)
     --aseg-thumb  thumb fill (default: one more step in the same direction)
   Both are expressed against --text-strong, so light gets a darker thumb on a
   grey track and dark gets a lighter one — separation holds in both themes. */
.aseg {
  position: relative; display: grid; grid-template-columns: repeat(var(--aseg-n, 2), 1fr);
  gap: 0; padding: 4px; border-radius: 12px; isolation: isolate;
  background: var(--aseg-track, color-mix(in srgb, var(--text-strong) 5%, var(--card-bg)));
}
.aseg-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / var(--aseg-n, 2));
  border-radius: 9px; z-index: 0;
  background: var(--aseg-thumb, color-mix(in srgb, var(--text-strong) 8%, transparent));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateX(calc(var(--aseg-i, 0) * 100%));
  transition: transform 0.28s cubic-bezier(0.34, 1.16, 0.64, 1);
}
.aseg-btn {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 0; padding: 7px 8px; border: 0; border-radius: 9px; background: transparent;
  font-family: inherit; font-size: 13px; font-weight: calc(500 + var(--fw-adjust));
  color: var(--text-muted); cursor: pointer;
  transition: color 0.2s ease; -webkit-tap-highlight-color: transparent;
}
.aseg-btn.is-active { color: var(--text-strong); }
.aseg-btn:hover:not(.is-active) { color: var(--text-strong); }
.aseg-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-shadow); }
.aseg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Flag / avatar slot — the language picker's 20×15 flag. */
.aseg-media { display: inline-flex; flex-shrink: 0; }
.aseg-media .flag-ic {
  width: 20px; height: 15px; border-radius: 3px; display: block;
  object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
/* Line-icon slot — inherits the button's colour, so it fades with the label. */
.aseg-ico { display: inline-flex; flex-shrink: 0; }
.aseg-ico svg { width: 16px; height: 16px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .aseg-thumb, .aseg-btn { transition: none; }
}

/* Empty «Настройки платформы» placeholder page (until it gets real content). */
.ps-blank { max-width: 720px; }
.ps-blank-head h1 { font-size: 22px; font-weight: calc(700 + var(--fw-adjust)); letter-spacing: -0.02em; color: var(--text-strong); margin-bottom: 6px; }
.ps-blank-head p { font-size: 14px; color: var(--mkt-muted); margin-bottom: 20px; }
.ps-blank-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 48px 24px; text-align: center;
  border: 1px dashed var(--border); border-radius: 14px; background: var(--bg-surface);
}
.ps-blank-ico { width: 40px; height: 40px; color: var(--text-muted); }
.ps-blank-ico svg { width: 40px; height: 40px; display: block; }
.ps-blank-card p { font-size: 13.5px; color: var(--mkt-muted); margin: 0; }

/* ── Support view: no page-level scrollbar (2026-08-13) ──────────────────────
   The support screen is a fixed-height, full-viewport chat layout — the page
   (html/body) must never scroll, so kill any root scrollbar (the arrow bar at
   the far right that /new's own `html{scrollbar-width:thin}` + a hairline body
   overflow would otherwise paint). Authoritative because /new css loads AFTER
   /macos css. The thin thread scrollbar lives in /macos/css/style.css and is
   deliberately NOT touched here. Scoped via :has → other routes unaffected. */
html:has(.support-page),
body:has(.support-page) {
  overflow: hidden !important;
  scrollbar-width: none !important;
}
html:has(.support-page)::-webkit-scrollbar,
body:has(.support-page)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL CONTENT-WIDTH CAP  (experiment — added 2026-08-15)
   ---------------------------------------------------------------------------
   Freezes every admin page at its 1920-screen width and centres it, so wide
   monitors render the SAME layout as 1920 instead of stretching unbounded
   (on desktop .admin-main has `max-width:none` and grows with the viewport —
   board width = viewport − ~320px, which is why wide screens drifted).
   1600px = viewport 1920 − 248px sidebar − margins/padding. Desktop only;
   below 1600px-wide content it does nothing. Support chat is full-bleed → skip.

   ↩︎ REVERT (one line): change 1600px → none  on the --admin-content-cap line.
      Or delete this whole block. Nothing else references it.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .admin-main { --admin-content-cap: 1600px; }
  /* Every scrolling content page. Full-bleed app pages (.support-page chat,
     .pset-page settings hub) are intentionally edge-to-edge → left uncapped. */
  .admin-main > .page:not(.support-page),
  .admin-main > .us-page,
  .admin-main > .pc-page {
    max-width: var(--admin-content-cap, none);
    margin-inline: auto;
  }
}