/* S105 interface refinement. Load after design-system.css and module styles.
 * Screen only: do not restyle printed materials, artwork, media or game scenes.
 * Tokens are inherited only by recognized interface shells; no script required. */
@media screen {
  :root {
    --rsm-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --rsm-page: #f5f4ef;
    --rsm-surface: #fffefb;
    --rsm-raised: #ffffff;
    --rsm-soft: #f0f2ed;
    --rsm-ink: #272e29;
    --rsm-muted: #59645a;
    --rsm-faint: #697569;
    --rsm-line: #dfe4da;
    --rsm-line-strong: #a7b5a4;
    --rsm-brand: #276f4e;
    --rsm-brand-hover: #1d593c;
    --rsm-brand-ink: #ffffff;
    --rsm-brand-soft: #e8f1e7;
    --rsm-success: #2d6a46;
    --rsm-success-soft: #e8f2e8;
    --rsm-warning: #855e18;
    --rsm-warning-soft: #f9efda;
    --rsm-danger: #ad3e42;
    --rsm-danger-soft: #fae9e7;
    --rsm-blue: #3e647d;
    --rsm-blue-soft: #eaf0f4;
    --rsm-purple: #6e5b84;
    --rsm-purple-soft: #f0ecf4;
    --rsm-shadow: 0 3px 16px rgb(31 45 32 / 4%);
    --rsm-shadow-small: 0 1px 4px rgb(31 45 32 / 3%);
    --rsm-modal-shadow: 0 20px 64px rgb(20 35 24 / 18%);
    --rsm-overlay: rgb(21 32 24 / 46%);
  }

  html:is([data-theme="dark"], [data-theme="night"]) {
    --rsm-page: #191e1b;
    --rsm-surface: #222923;
    --rsm-raised: #29322a;
    --rsm-soft: #2c352d;
    --rsm-ink: #edf1e9;
    --rsm-muted: #c0c9bb;
    --rsm-faint: #a8b59f;
    --rsm-line: #414d40;
    --rsm-line-strong: #74856e;
    --rsm-brand: #aad5b3;
    --rsm-brand-hover: #c2e6c8;
    --rsm-brand-ink: #1b3524;
    --rsm-brand-soft: #304638;
    --rsm-success: #b3d8ac;
    --rsm-success-soft: #304432;
    --rsm-warning: #e7c27d;
    --rsm-warning-soft: #443c2b;
    --rsm-danger: #ffada9;
    --rsm-danger-soft: #4b3030;
    --rsm-blue: #a9c9df;
    --rsm-blue-soft: #2c3b45;
    --rsm-purple: #cdb9e3;
    --rsm-purple-soft: #3a3344;
    --rsm-shadow: 0 3px 16px rgb(0 0 0 / 12%);
    --rsm-shadow-small: 0 1px 4px rgb(0 0 0 / 9%);
    --rsm-modal-shadow: 0 20px 64px rgb(0 0 0 / 34%);
    --rsm-overlay: rgb(5 14 8 / 66%);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="day"]):not([data-theme="dark"]):not([data-theme="night"]) {
      --rsm-page: #191e1b;
      --rsm-surface: #222923;
      --rsm-raised: #29322a;
      --rsm-soft: #2c352d;
      --rsm-ink: #edf1e9;
      --rsm-muted: #c0c9bb;
      --rsm-faint: #a8b59f;
      --rsm-line: #414d40;
      --rsm-line-strong: #74856e;
      --rsm-brand: #aad5b3;
      --rsm-brand-hover: #c2e6c8;
      --rsm-brand-ink: #1b3524;
      --rsm-brand-soft: #304638;
      --rsm-success: #b3d8ac;
      --rsm-success-soft: #304432;
      --rsm-warning: #e7c27d;
      --rsm-warning-soft: #443c2b;
      --rsm-danger: #ffada9;
      --rsm-danger-soft: #4b3030;
      --rsm-blue: #a9c9df;
      --rsm-blue-soft: #2c3b45;
      --rsm-purple: #cdb9e3;
      --rsm-purple-soft: #3a3344;
      --rsm-shadow: 0 3px 16px rgb(0 0 0 / 12%);
      --rsm-shadow-small: 0 1px 4px rgb(0 0 0 / 9%);
      --rsm-modal-shadow: 0 20px 64px rgb(0 0 0 / 34%);
      --rsm-overlay: rgb(5 14 8 / 66%);
    }
  }

  /* Keep legacy module variables local to actual interface pages. The standalone
   * puzzle does not match this scope, even when the asset is shared site-wide. */
  body:not(.hub-game-page):is([data-rsm-interface],
    :has(> .app-shell), :has(> .studio-shell), :has(> .hub-header),
    :has(> .page-shell > .public-brand), :has(> main > .brand)) {
    color-scheme: inherit;
    --ds-font: var(--rsm-font);
    --ds-page: var(--rsm-page);
    --ds-surface: var(--rsm-surface);
    --ds-raised: var(--rsm-raised);
    --ds-soft: var(--rsm-soft);
    --ds-ink: var(--rsm-ink);
    --ds-muted: var(--rsm-muted);
    --ds-faint: var(--rsm-faint);
    --ds-line: var(--rsm-line);
    --ds-line-strong: var(--rsm-line-strong);
    --ds-mint: var(--rsm-brand);
    --ds-mint-hover: var(--rsm-brand-hover);
    --ds-mint-ink: var(--rsm-brand-ink);
    --ds-mint-soft: var(--rsm-brand-soft);
    --ds-link: var(--rsm-brand);
    --ds-link-hover: var(--rsm-brand-hover);
    --ds-success: var(--rsm-success);
    --ds-success-soft: var(--rsm-success-soft);
    --ds-warning: var(--rsm-warning);
    --ds-warning-soft: var(--rsm-warning-soft);
    --ds-danger: var(--rsm-danger);
    --ds-danger-soft: var(--rsm-danger-soft);
    --ds-sky: var(--rsm-blue-soft);
    --ds-sky-ink: var(--rsm-blue);
    --ds-lilac: var(--rsm-purple-soft);
    --ds-lilac-ink: var(--rsm-purple);
    --ds-yellow: var(--rsm-warning-soft);
    --ds-yellow-ink: var(--rsm-warning);
    --ds-peach: var(--rsm-warning-soft);
    --ds-peach-ink: var(--rsm-warning);
    --ds-shadow: var(--rsm-shadow);
    --ds-shadow-small: var(--rsm-shadow-small);
    --ds-modal-shadow: var(--rsm-modal-shadow);
    --ds-overlay: var(--rsm-overlay);
    --ds-radius: 16px;
    --ds-radius-inner: 11px;
    --page: var(--rsm-page);
    --bg: var(--rsm-page);
    --card: var(--rsm-surface);
    --surface: var(--rsm-surface);
    --surface-raised: var(--rsm-raised);
    --surface-soft: var(--rsm-soft);
    --surface-muted: var(--rsm-soft);
    --surface-subtle: var(--rsm-soft);
    --surface-strong: var(--rsm-ink);
    --soft: var(--rsm-soft);
    --ink: var(--rsm-ink);
    --text: var(--rsm-ink);
    --text-soft: var(--rsm-muted);
    --text-faint: var(--rsm-faint);
    --muted: var(--rsm-muted);
    --line: var(--rsm-line);
    --line-strong: var(--rsm-line-strong);
    --accent: var(--rsm-brand);
    --accent-hover: var(--rsm-brand-hover);
    --accent-ink: var(--rsm-brand-ink);
    --accent-text: var(--rsm-brand);
    --accent-soft: var(--rsm-brand-soft);
    --deep: var(--rsm-brand);
    --green: var(--rsm-success);
    --green-soft: var(--rsm-success-soft);
    --amber: var(--rsm-warning);
    --amber-soft: var(--rsm-warning-soft);
    --red: var(--rsm-danger);
    --red-soft: var(--rsm-danger-soft);
    --danger: var(--rsm-danger);
    --blue: var(--rsm-blue);
    --blue-soft: var(--rsm-blue-soft);
    --purple: var(--rsm-purple);
    --purple-soft: var(--rsm-purple-soft);
    --focus: var(--rsm-brand);
    --shadow: var(--rsm-shadow);
    --shadow-small: var(--rsm-shadow-small);
    --radius-xl: 16px;
    --radius-lg: 14px;
    --radius-md: 11px;
    --radius-sm: 8px;
    --gate-brand-bg: var(--rsm-brand-soft);
    --gate-brand-text: var(--rsm-ink);
    --hub-paper: var(--rsm-page);
    --hub-white: var(--rsm-surface);
    --hub-ink: var(--rsm-ink);
    --hub-muted: var(--rsm-muted);
    --hub-line: var(--rsm-line);
    --hub-mint: var(--rsm-brand-soft);
    --hub-teal: var(--rsm-brand);
    --hub-radius: 16px;
    font-family: var(--rsm-font);
    background-color: var(--rsm-page);
    color: var(--rsm-ink);
    -webkit-font-smoothing: antialiased;
  }

  /* Navigation: retain existing positions, permission visibility and mobile tabs. */
  html body:not(.hub-game-page) :is(.sidebar, .studio-sidebar, .topbar, .studio-topbar,
    .hub-header, .account-menu, .mobile-nav-sheet) {
    background-color: var(--rsm-surface);
    border-color: var(--rsm-line);
    box-shadow: none;
  }
  html body :is(.app-shell, .studio-shell) :is(.sidebar-brand, .nav-group-panel-header) {
    border-color: var(--rsm-line);
  }
  html body :is(.app-shell, .studio-shell) :is(.nav-item, .nav-button, .workspace-switch,
    .nav-group-toggle) {
    min-height: 44px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--rsm-muted);
  }
  html[data-theme] body :is(.app-shell, .studio-shell) :is(.nav-item, .nav-button,
    .workspace-switch).is-active,
  html body :is(.app-shell, .studio-shell) .nav-group-toggle[aria-expanded="true"] {
    color: var(--rsm-brand);
    background: var(--rsm-brand-soft);
    font-weight: 750;
    box-shadow: none;
  }
  html body :is(.app-shell, .studio-shell) :is(.nav-item, .nav-button, .workspace-switch):hover {
    background-color: var(--rsm-soft);
    color: var(--rsm-ink);
  }
  html body :is(.app-shell, .studio-shell) :is(.sidebar-brand strong, .studio-page-context strong) {
    color: var(--rsm-ink);
    letter-spacing: -.02em;
  }

  /* Every datum and label stays legible at a compact operational density. */
  html body :is(.app-shell, .studio-shell) :is(.workspace, .main-content, .studio-workspace,
    .studio-main, .studio-page, .page-heading, .panel-header, .panel-head, .toolbar,
    .heading-actions, .collection-filter, .detail-grid, .metric-grid, .overview-grid) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  html body :is(.app-shell, .studio-shell) :is(.page-heading h1, .page-heading h2) {
    margin-block: 0 6px;
    color: var(--rsm-ink);
    font-weight: 750;
    font-size: clamp(24px, 2.3vw, 32px);
    letter-spacing: -.035em;
    line-height: 1.3;
  }
  html body :is(.app-shell, .studio-shell) :is(.panel, .detail-card) { padding: 18px; }
  html body :is(.app-shell, .studio-shell) :is(.panel-header, .panel-head) { gap: 12px; }
  html body :is(.app-shell, .studio-shell) :is(.panel-header h2, .panel-head h3) {
    color: var(--rsm-ink);
    font-size: 16px;
    line-height: 1.45;
    letter-spacing: -.015em;
  }
  html body :is(.app-shell, .studio-shell) :is(.toolbar, .filter-row, .collection-filter__controls,
    .inline-actions, .heading-actions) { flex-wrap: wrap; gap: 10px; }
  html body :is(.app-shell, .studio-shell) :is(.toolbar, .filter-row, .collection-filter__controls) > * {
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  html body :is(.app-shell, .studio-shell) .collection-filter {
    padding: 14px;
    border-radius: 12px;
    background: var(--rsm-surface);
    box-shadow: none;
  }
  html body :is(.app-shell, .studio-shell) :is(.segmented, .workspace-tabs, .hub-admin-tabs) {
    max-inline-size: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    background-color: var(--rsm-soft);
    border-color: var(--rsm-line);
  }
  html body :is(.app-shell, .studio-shell) :is(.segmented, .workspace-tabs, .hub-admin-tabs) button {
    min-height: 44px;
    padding: 9px 13px;
    font-size: 12px;
    color: var(--rsm-muted);
    line-height: 1.4;
  }
  html body :is(.app-shell, .studio-shell) :is(.segmented, .workspace-tabs, .hub-admin-tabs)
    :is(button.is-active, button[aria-selected="true"], button[aria-pressed="true"]) {
    background: var(--rsm-surface);
    color: var(--rsm-brand);
    box-shadow: var(--rsm-shadow-small);
  }

  html body :is(.app-shell, .studio-shell) :is(.metric-grid, .metrics-grid) { gap: 12px; }
  html body :is(.app-shell, .studio-shell) :is(.metric-card, .metric, .ea-metric, .vd-metric) {
    min-inline-size: 0;
    min-height: 136px;
    padding: 16px;
    border: 1px solid var(--rsm-line);
    border-radius: 13px;
    background-color: var(--rsm-surface);
    box-shadow: var(--rsm-shadow-small);
  }
  html body :is(.app-shell, .studio-shell) .metric-card::after { content: none; }
  html body :is(.app-shell, .studio-shell) .metric-card--accent {
    border-color: color-mix(in srgb, var(--rsm-brand) 24%, var(--rsm-line));
    background-color: var(--rsm-brand-soft);
  }
  html body :is(.app-shell, .studio-shell) .metric-icon {
    inline-size: 30px;
    block-size: 30px;
    margin-bottom: 12px;
    border-radius: 8px;
    color: var(--rsm-brand);
    background-color: var(--rsm-brand-soft);
  }
  html body :is(.app-shell, .studio-shell) .metric-card--warning .metric-icon {
    color: var(--rsm-warning);
    background-color: var(--rsm-warning-soft);
  }
  html body :is(.app-shell, .studio-shell) .metric-card--recent .metric-icon {
    color: var(--rsm-blue);
    background-color: var(--rsm-blue-soft);
  }
  html body :is(.app-shell, .studio-shell) .metric-label {
    min-height: 22px;
    color: var(--rsm-muted);
    font-size: 12px;
    line-height: 1.5;
  }
  html body :is(.app-shell, .studio-shell) :is(.metric-value, .metric > strong) {
    color: var(--rsm-ink);
    font-size: clamp(26px, 2.5vw, 35px);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
    line-height: 1.2;
  }
  html body :is(.app-shell, .studio-shell) .metric-foot {
    margin-top: 6px;
    font-size: 12px;
    color: var(--rsm-faint);
    line-height: 1.5;
  }
  html body :is(.app-shell, .studio-shell) :is(.chart-panel, .chart-container, .chart-wrap,
    .analytics-detail, .bar-list) { min-inline-size: 0; max-inline-size: 100%; }
  html body :is(.app-shell, .studio-shell) .chart-legend { font-size: 12px; gap: 12px; }
  html body :is(.app-shell, .studio-shell) .bar-row {
    grid-template-columns: minmax(80px, .8fr) minmax(0, 2fr) auto;
    gap: 10px;
  }
  html body :is(.app-shell, .studio-shell) .bar-track { background-color: var(--rsm-soft); }
  html body :is(.app-shell, .studio-shell) .bar-fill { background-color: var(--rsm-brand); }
  html body :is(.app-shell, .studio-shell) .bar-value { color: var(--rsm-ink); font-size: 13px; }

  /* Workbench uses explicit surfaces and ink together, including native date
   * controls and selected tabs; a dark palette must never inherit white ink
   * onto a module's light fallback surface. */
  html body :is(.app-shell, .studio-shell) .data-workbench {
    min-inline-size: 0;
    color: var(--rsm-ink);
  }
  html body :is(.app-shell, .studio-shell) .data-workbench
    :is(.dw-filters, .dw-metric, .dw-chart, .dw-ranking) {
    border-color: var(--rsm-line);
    color: var(--rsm-ink);
    background-color: var(--rsm-surface);
    box-shadow: var(--rsm-shadow-small);
  }
  html body :is(.app-shell, .studio-shell) .data-workbench .dw-filters :is(input, select) {
    min-inline-size: 0;
    min-height: 44px;
    max-inline-size: 100%;
    border-color: var(--rsm-line-strong);
    color: var(--rsm-ink);
    background-color: var(--rsm-surface);
    color-scheme: inherit;
  }
  html body :is(.app-shell, .studio-shell) .data-workbench
    :is(.dw-context, .dw-updated, .dw-note, .dw-metric p, .dw-metric small,
      .dw-bar small, .dw-ranking-row span) { color: var(--rsm-muted); }
  html body :is(.app-shell, .studio-shell) .data-workbench
    :is(.dw-heading h2, .dw-metric strong, .dw-chart h3, .dw-ranking h3, .dw-ranking-row) {
    color: var(--rsm-ink);
  }
  html body :is(.app-shell, .studio-shell) .data-workbench .dw-tabs button {
    color: var(--rsm-muted);
    background-color: var(--rsm-soft);
  }
  html body :is(.app-shell, .studio-shell) .data-workbench .dw-tabs [aria-selected="true"] {
    color: var(--rsm-brand-ink);
    background-color: var(--rsm-brand);
  }
  html body :is(.app-shell, .studio-shell) .data-workbench .dw-bar > span { background-color: var(--rsm-brand); }
  html body :is(.app-shell, .studio-shell) .data-workbench .dw-empty {
    color: var(--rsm-muted);
    background-color: var(--rsm-soft);
    border-color: var(--rsm-line-strong);
  }

  /* Tables scroll in their own container; no clipping or whole-page overflow. */
  html body :is(.app-shell, .studio-shell) .table-panel { padding-inline: 0; }
  html body :is(.app-shell, .studio-shell) :is(.table-wrap, .ea-table-scroll, .vd-table-scroll,
    .entry-experiment-table-wrap, .operational-form-entry-scroll) {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--rsm-line-strong) var(--rsm-soft);
    border-color: var(--rsm-line);
    border-radius: 11px;
  }
  html body :is(.app-shell, .studio-shell) :is(th, td) {
    padding: 12px 14px;
    border-color: var(--rsm-line);
    line-height: 1.6;
    font-size: 12px;
  }
  html body :is(.app-shell, .studio-shell) th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--rsm-muted);
    background-color: var(--rsm-soft);
    font-weight: 700;
    letter-spacing: .015em;
    box-shadow: inset 0 -1px var(--rsm-line);
  }
  html body :is(.app-shell, .studio-shell) :is(td strong, .table-primary strong) {
    color: var(--rsm-ink);
    font-size: 13px;
    font-weight: 650;
  }
  html body :is(.app-shell, .studio-shell) .table-primary > span { font-size: 11px; line-height: 1.55; }
  html body :is(.app-shell, .studio-shell) tbody tr:hover { background-color: var(--rsm-soft); }
  html body :is(.app-shell, .studio-shell) :is(.table-actions, .card-actions) { flex-wrap: wrap; gap: 8px; }
  html body :is(.app-shell, .studio-shell) .table-actions .button { margin-inline: 0; min-height: 40px; }

  /* Inputs and feedback keep the existing types, labels, validation and focus. */
  html body:not(.hub-game-page) :is(.field, .compact-field, .modal-body, .dialog-body,
    .collection-filter, .hub-bib-row, .page-shell) :is(input, select, textarea) {
    max-inline-size: 100%;
    min-inline-size: 0;
    border-color: var(--rsm-line-strong);
    border-radius: 9px;
    color: var(--rsm-ink);
    background-color: var(--rsm-surface);
    box-shadow: none;
    line-height: 1.5;
  }
  html body:not(.hub-game-page) :is(.field, .compact-field, .modal-body, .dialog-body,
    .collection-filter, .hub-bib-row, .page-shell) :is(input:not([type="checkbox"]):not([type="radio"]), select) {
    min-height: 44px;
  }
  html body:not(.hub-game-page) :is(.field, .compact-field, .modal-body, .dialog-body,
    .collection-filter, .hub-bib-row, .page-shell) :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--rsm-brand);
    outline-offset: 3px;
    border-color: var(--rsm-brand);
  }
  html body:not(.hub-game-page) :is(.field, .modal-body, .dialog-body) [aria-invalid="true"] {
    border-color: var(--rsm-danger);
  }
  html body :is(.app-shell, .studio-shell) :is(.field > span, .field > label) {
    color: var(--rsm-ink);
    font-size: 13px;
    line-height: 1.5;
  }
  html body:not(.hub-game-page) :is(.button, .hub-button) {
    border-radius: 9px;
    line-height: 1.45;
    font-weight: 650;
  }
  html body:not(.hub-game-page) :is(.button.button--primary, .hub-button.hub-button--ink,
    .hub-button.hub-button--primary) {
    border-color: var(--rsm-brand);
    color: var(--rsm-brand-ink);
    background-color: var(--rsm-brand);
  }
  html body:not(.hub-game-page) :is(.button.button--primary, .hub-button.hub-button--ink,
    .hub-button.hub-button--primary):hover:not(:disabled) {
    border-color: var(--rsm-brand-hover);
    background-color: var(--rsm-brand-hover);
    color: var(--rsm-brand-ink);
  }
  html body:not(.hub-game-page) :is(.button.button--secondary, .button.button--quiet,
    .hub-button.hub-button--outline) { background-color: var(--rsm-surface); color: var(--rsm-ink); }
  html body:not(.hub-game-page) :is(.button, .hub-button):disabled { opacity: .55; cursor: not-allowed; }
  html body:not(.hub-game-page) :is(.button, .hub-button)[aria-busy="true"] { cursor: progress; }

  html body:has(> :is(.app-shell, .studio-shell)) :is(.modal, .studio-dialog, .recovery-dialog,
    .badge-wizard-dialog, .account-menu) {
    max-inline-size: calc(100vw - 28px);
    border-color: var(--rsm-line);
    border-radius: 16px;
    color: var(--rsm-ink);
    background-color: var(--rsm-surface);
    box-shadow: var(--rsm-modal-shadow);
  }
  html body:has(> :is(.app-shell, .studio-shell)) :is(.modal, .studio-dialog, .recovery-dialog)::backdrop {
    background: var(--rsm-overlay);
    backdrop-filter: blur(3px);
  }
  html body:has(> :is(.app-shell, .studio-shell)) :is(.modal-header, .dialog-header) {
    gap: 12px;
    border-color: var(--rsm-line);
    padding: 18px 20px;
  }
  html body:has(> :is(.app-shell, .studio-shell)) :is(.modal-body, .dialog-body) {
    min-inline-size: 0;
    padding: 20px;
    overflow-wrap: anywhere;
  }
  html body :is(.app-shell, .studio-shell) :is(.empty-state, .detail-placeholder,
    .page-loading, .loading-state, .chart-empty) {
    min-inline-size: 0;
    padding: 28px 18px;
    color: var(--rsm-muted);
    background-color: var(--rsm-soft);
    border-color: var(--rsm-line);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.65;
  }
  html body :is(.app-shell, .studio-shell) :is(.empty-state__copy strong, .empty-state strong) {
    color: var(--rsm-ink);
    font-size: 15px;
  }
  html body:not(.hub-game-page) :is(.form-message:not(:empty), .page-error, .error-state,
    .notice--error, .notice-banner--danger) {
    border-color: var(--rsm-danger);
    color: var(--rsm-danger);
    background-color: var(--rsm-danger-soft);
    border-radius: 10px;
    line-height: 1.65;
  }
  html body:not(.hub-game-page) :is(.form-message.is-success, .form-message[data-kind="success"]) {
    border-color: var(--rsm-success);
    color: var(--rsm-success);
    background-color: var(--rsm-success-soft);
  }
  html body:not(.hub-game-page) :is(.form-message.is-progress, .form-message[data-kind="info"],
    .form-message[data-kind="pending"]) {
    border-color: var(--rsm-blue);
    color: var(--rsm-blue);
    background-color: var(--rsm-blue-soft);
  }
  html body:not(.hub-game-page) .form-message[data-kind="warning"] {
    border-color: var(--rsm-warning);
    color: var(--rsm-warning);
    background-color: var(--rsm-warning-soft);
  }
  html body:not(.hub-game-page) :is(.notice--warning, .notice-banner--warning) {
    color: var(--rsm-warning);
    background-color: var(--rsm-warning-soft);
    border-color: color-mix(in srgb, var(--rsm-warning) 30%, var(--rsm-line));
  }

  /* Public shell surfaces only. City illustrations and published article layouts
   * retain their own SVG fills, composition, dimensions and typography. */
  html body:not(.hub-game-page):is(:has(> .hub-header), :has(> .public-brand),
    :has(> .page-shell > .public-brand)) {
    --rsm-brand:var(--xg-accent,#9d392d);
    --rsm-brand-ink:var(--xg-ink,#242321);
    --rsm-brand-soft:var(--xg-soft,#f2ece3);
  }
  html body:not(.hub-game-page) :is(.hub-header, .public-brand) {
    color: var(--rsm-ink);
    border-bottom: 1px solid var(--rsm-line);
  }
  html body:not(.hub-game-page) .hub-header { margin-bottom: 18px; }
  html body:not(.hub-game-page) :is(.hub-brand img, .public-brand .brand-mark) {
    background-color: #ffffff;
    border-color: var(--rsm-line);
    box-shadow: none;
  }
  html body:not(.hub-game-page) :is(.hub-menu-primary, .hub-media-card) {
    background-color: var(--rsm-brand-soft);
    color: var(--rsm-brand-ink);
    border-color: var(--rsm-line);
    box-shadow: var(--rsm-shadow);
  }
  html body:not(.hub-game-page) :is(.hub-menu-primary, .hub-media-card)
    :is(h2, h3, strong, small, .hub-media-description, .hub-eyebrow--light, .hub-external-note) {
    color: var(--rsm-brand-ink);
  }
  html body:not(.hub-game-page) .hub-menu-grid:not(.xian-menu-illustrated) > a {
    background-color: var(--rsm-surface);
    border-color: var(--rsm-line);
    border-radius: 14px;
    box-shadow: var(--rsm-shadow-small);
  }
  html body:not(.hub-game-page) .hub-menu-grid:not(.xian-menu-illustrated) > a:hover {
    border-color: var(--rsm-brand);
    background-color: var(--rsm-brand-soft);
  }
  html body:not(.hub-game-page) :is(.hub-menu-heading, .hub-subpage-header) :is(h1, h2) {
    color: var(--rsm-ink);
    letter-spacing: -.03em;
  }
  html body:not(.hub-game-page) :is(.hub-empty, .hub-info-card, .hub-lens-service) {
    border-color: var(--rsm-line);
    border-radius: 14px;
    box-shadow: var(--rsm-shadow-small);
  }
  html body .page-shell :is(.profile-hero, .profile-event-guides, .content-section,
    .section-card, .album-card, .identity-card, .media-card) {
    border-color: var(--rsm-line);
    border-radius: 16px;
    box-shadow: var(--rsm-shadow-small);
  }
  html body .page-shell .profile-hero { background-color: var(--rsm-surface); }
  html body .page-shell .profile-event-guides { background-color: var(--rsm-brand-soft); }
  html body .page-shell :is(.profile-nav a, .profile-event-guide-action) {
    border-radius: 10px;
    line-height: 1.5;
  }

  @media (max-width: 1080px) and (min-width: 721px) {
    html body .app-shell .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 720px) {
    html body :is(.app-shell, .studio-shell) :is(.metric-grid, .metrics-grid) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    html body :is(.app-shell, .studio-shell) :is(.metric-card, .metric, .ea-metric, .vd-metric) {
      min-height: 128px;
      padding: 14px;
    }
    html body :is(.app-shell, .studio-shell) :is(.overview-grid, .complaint-layout, .detail-grid) {
      grid-template-columns: minmax(0, 1fr);
    }
    html body :is(.app-shell, .studio-shell) :is(.panel, .detail-card) { padding: 16px; }
    html body :is(.app-shell, .studio-shell) .table-panel { padding-inline: 0; }
    html body :is(.app-shell, .studio-shell) :is(.page-heading, .panel-header, .panel-head) {
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 12px;
    }
    html body :is(.app-shell, .studio-shell) :is(.toolbar, .collection-filter__controls) .field {
      flex: 1 1 150px;
    }
    html body:not(.hub-game-page) :is(.field, .compact-field, .modal-body, .dialog-body,
      .collection-filter, .hub-bib-row, .page-shell) :is(input, select, textarea) { font-size: 16px; }
    html body :is(.app-shell, .studio-shell) .data-workbench .dw-filters :is(input, select) { font-size: 16px; }
    html body :is(.app-shell, .studio-shell) .table-scroll-hint { display: block; margin-bottom: 10px; }
    html body:has(> :is(.app-shell, .studio-shell)) :is(.modal-body, .dialog-body) { padding: 16px; }
    html body:not(.hub-game-page) .hub-header { margin-bottom: 12px; }
    html body:not(.hub-game-page) .hub-menu-grid:not(.xian-menu-illustrated) > a { min-inline-size: 0; }
    html body .page-shell :is(.profile-nav, .profile-event-guide) { min-inline-size: 0; }
    html body .page-shell .profile-event-guide-action { white-space: normal; }
  }
  @media (max-width: 360px) {
    html body :is(.app-shell, .studio-shell) .metric-grid { gap: 8px; }
    html body :is(.app-shell, .studio-shell) .metric-card { padding: 12px; }
    html body :is(.app-shell, .studio-shell) .metric-value { font-size: 26px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html body:not(.hub-game-page) :is(.button, .hub-button, .nav-item, .nav-button,
      .profile-nav a, .hub-menu-grid > a) { transition: none; }
  }
}