/* V2.3 centralized theme contract. Loaded after legacy layers to normalize contrast and interaction states. */
:root,
html[data-theme="light"],
body[data-theme="light"],
body:not([data-theme="dark"]) {
  color-scheme: light;
  --v230-bg: #edf3f6;
  --v230-surface: #ffffff;
  --v230-surface-raised: #f7fafc;
  --v230-surface-muted: #e8f0f4;
  --v230-text: #132737;
  --v230-text-strong: #071b2a;
  --v230-muted: #506575;
  --v230-line: #b9c9d3;
  --v230-accent: #087ca8;
  --v230-accent-strong: #055b7d;
  --v230-accent-soft: #dceff7;
  --v230-success: #176f4f;
  --v230-warning: #8a5700;
  --v230-danger: #a42f38;
  --v230-focus: #b45f00;
  --v230-shadow: 0 14px 34px rgba(25, 57, 76, .12);
}

html[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: dark;
  --v230-bg: #0d1821;
  --v230-surface: #142532;
  --v230-surface-raised: #1a2e3c;
  --v230-surface-muted: #203845;
  --v230-text: #dceaf2;
  --v230-text-strong: #f7fbfd;
  --v230-muted: #a5bac7;
  --v230-line: #476170;
  --v230-accent: #6dd6f7;
  --v230-accent-strong: #a9e9ff;
  --v230-accent-soft: rgba(109, 214, 247, .14);
  --v230-success: #72d7a9;
  --v230-warning: #ffd080;
  --v230-danger: #ff9ba1;
  --v230-focus: #ffca68;
  --v230-shadow: 0 18px 42px rgba(0, 0, 0, .3);
}

body.ops-layout {
  --r02-bg: var(--v230-bg);
  --r02-surface: var(--v230-surface);
  --r02-surface-raised: var(--v230-surface-raised);
  --r02-surface-muted: var(--v230-surface-muted);
  --r02-text: var(--v230-text);
  --r02-muted: var(--v230-muted);
  --r02-line: var(--v230-line);
  --r02-accent: var(--v230-accent);
  --r02-accent-soft: var(--v230-accent-soft);
  --workbench-surface: var(--v230-surface);
  --workbench-soft: var(--v230-surface-muted);
  --workbench-text: var(--v230-text);
  --workbench-muted: var(--v230-muted);
  --workbench-line: var(--v230-line);
  --workbench-accent: var(--v230-accent);
  color: var(--v230-text);
}

body.ops-layout :where(h1, h2, h3, h4, strong, th, summary) { color: var(--v230-text-strong); }
body.ops-layout :where(p, small, .meta, .section-tag, dt, label > span) { color: var(--v230-muted); }

body.ops-layout :where(input, select, textarea) {
  border-color: var(--v230-line);
  background: var(--v230-surface);
  color: var(--v230-text-strong);
}
body.ops-layout :where(input, textarea)::placeholder { color: color-mix(in srgb, var(--v230-muted) 82%, transparent); opacity: 1; }
body.ops-layout :where(input, select, textarea):focus-visible,
body.ops-layout :where(button, a, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--v230-focus) 68%, transparent);
  outline-offset: 2px;
}
body.ops-layout :where(button, input, select, textarea):disabled { opacity: .55; cursor: not-allowed; }

body.ops-layout :where(.panel, .glass-panel, .glass-panel-strong, .account-workspace__section, .service-status-detail-block, .query-insight-card, .match-card, .status-card, .asset-card, .rotation-map-card, .privacy-panel__grid article, .about-panel__grid article) {
  border-color: var(--v230-line);
  color: var(--v230-text);
}

body.ops-layout .detail-modal:not(.hidden) { background: rgba(4, 12, 18, .72); backdrop-filter: blur(8px); }
body[data-theme="light"].ops-layout .detail-modal:not(.hidden) { background: rgba(21, 42, 56, .46); }
body.ops-layout .detail-modal:not(.hidden) .detail-modal__card,
body.ops-layout .detail-modal:not(.hidden) .detail-modal__body--feature { background: var(--v230-bg) !important; color: var(--v230-text); opacity: 1; }

.ops-topbar__nav .announcement-trigger--bare {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  color: var(--v230-text-strong) !important;
  box-shadow: none !important;
}
.ops-topbar__nav .announcement-trigger--bare > svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mobile-announcement-button svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ops-topbar__nav .announcement-trigger--bare:hover,
.ops-topbar__nav .announcement-trigger--bare:focus-visible { background: var(--v230-accent-soft) !important; color: var(--v230-accent-strong) !important; }
.ops-topbar__nav .announcement-trigger--bare[data-state="closed"]:not(:hover):not(:focus-visible) { background: transparent !important; box-shadow: none !important; }

.standalone-monitor-link { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px 14px; padding: 14px; border: 1px solid var(--v230-line); border-radius: 10px; background: var(--v230-surface-raised); }
.standalone-monitor-link .account-monitor-row__main { min-width: 0; }
.standalone-monitor-link .account-monitor-row__main { display: grid; gap: 3px; }
.standalone-monitor-link .account-monitor-row__main strong,
.standalone-monitor-link .account-monitor-row__main small { display: block; }
.standalone-monitor-link .account-monitor-row__status { align-self: center; color: var(--v230-success); font-weight: 800; }
.standalone-monitor-link__schedule { grid-column: 1 / -1; display: flex; align-items: end; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--v230-line); }
.standalone-monitor-link__schedule label { display: grid; grid-template-columns: minmax(0, 170px) auto; align-items: center; gap: 5px 8px; color: var(--v230-muted); font-size: 11px; font-weight: 800; }
.standalone-monitor-link__schedule label span { grid-column: 1 / -1; }
.standalone-monitor-link__schedule input { width: 170px; min-height: 38px; padding: 0 10px; border: 1px solid var(--v230-line); border-radius: 7px; }
.standalone-monitor-link__schedule em { color: var(--v230-muted); font-size: 11px; font-style: normal; }
.standalone-monitor-link__schedule button,
.standalone-monitor-link .account-monitor-row__actions button { min-height: 38px; padding: 0 12px; border: 1px solid var(--v230-line); border-radius: 7px; background: var(--v230-surface); color: var(--v230-text-strong); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.standalone-monitor-link__schedule button:hover,
.standalone-monitor-link .account-monitor-row__actions button:hover { border-color: var(--v230-accent); background: var(--v230-accent-soft); color: var(--v230-accent-strong); }
.standalone-monitor-link .account-monitor-row__actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.standalone-monitor-link .account-monitor-row__actions .is-danger { border-color: color-mix(in srgb, var(--v230-danger) 48%, var(--v230-line)); color: var(--v230-danger); }

.standalone-monitor-grid .account-monitor-check { display: flex !important; align-items: center; gap: 9px; }
.standalone-monitor-grid .account-monitor-check input[type="checkbox"] { width: 18px !important; min-width: 18px; height: 18px; min-height: 18px; margin: 0; accent-color: var(--v230-accent); }
.standalone-monitor-grid .account-monitor-check > span { color: var(--v230-text); }

.mortar-range-board { overflow: hidden; border-radius: 8px; background: #071018; }
.mortar-map,
.mortar-map .leaflet-container,
.mortar-map .leaflet-tile-pane { background: #071018; }
.mortar-map .leaflet-control-container { color: var(--v230-text); }

body.ops-layout :where(.status-badge--ok, [data-state="success"], .is-success) { color: var(--v230-success); }
body.ops-layout :where(.status-badge--warn, [data-state="warning"], .is-warning) { color: var(--v230-warning); }
body.ops-layout :where(.status-badge--bad, [data-state="error"], .is-error) { color: var(--v230-danger); }

@media (max-width: 760px) {
  .standalone-monitor-link { grid-template-columns: 1fr; }
  .standalone-monitor-link .account-monitor-row__status { justify-self: start; }
  .standalone-monitor-link__schedule { grid-column: 1; }
  .standalone-monitor-link .account-monitor-row__actions { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body.ops-layout *, body.ops-layout *::before, body.ops-layout *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* V3.1 P1 desktop shell: stable optical alignment and theme-invariant control boxes. */
@media (min-width: 769px) {
  .ops-topbar__tools {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }

  .ops-topbar__tools > .language-switcher,
  .ops-topbar__tools > .theme-toggle-button,
  .ops-topbar__tools > .auth-entry--toolbar,
  .ops-topbar__tools > .ops-topbar__signal {
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
    align-self: center;
  }

  .ops-topbar__tools > .language-switcher {
    width: 108px;
    min-width: 108px;
    flex: 0 0 108px;
    border-radius: 10px;
  }

  .ops-topbar__tools > .theme-toggle-button {
    width: 86px;
    min-width: 86px;
    flex: 0 0 86px;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border-radius: 10px;
  }

  .ops-topbar__tools > .auth-entry--toolbar {
    width: 90px;
    min-width: 90px;
    flex: 0 0 90px;
  }

  .ops-topbar__tools > .auth-entry--toolbar .auth-entry__button {
    box-sizing: border-box;
    width: 90px;
    height: 42px;
    min-height: 42px;
    padding: 0 8px;
    border-radius: 10px;
  }

  .ops-topbar__tools > .ops-topbar__signal {
    width: 64px;
    min-width: 64px;
    flex: 0 0 64px;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
    border-radius: 10px;
  }

  .ops-topbar__nav .announcement-trigger--bare {
    box-sizing: border-box;
    display: inline-flex;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0 !important;
    border-radius: 50%;
    background: transparent !important;
    color: var(--v230-text-strong) !important;
    box-shadow: none !important;
  }

  body[data-theme="dark"] .ops-topbar__nav .announcement-trigger--bare {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .ops-topbar__nav .announcement-trigger--bare > svg {
    display: block;
    width: 20px;
    height: 20px;
  }

  body.ops-layout .ops-topbar__nav .announcement-trigger--bare:hover,
  body[data-theme="dark"].ops-layout .ops-topbar__nav .announcement-trigger--bare:hover {
    border-color: var(--v230-line) !important;
    background: var(--v230-accent-soft) !important;
    color: var(--v230-accent-strong) !important;
    box-shadow: none !important;
    transform: none;
  }

  body.ops-layout .ops-topbar__nav .announcement-trigger--bare:focus-visible,
  body[data-theme="dark"].ops-layout .ops-topbar__nav .announcement-trigger--bare:focus-visible {
    border-color: transparent !important;
    background: var(--v230-accent-soft) !important;
    color: var(--v230-accent-strong) !important;
    box-shadow: none !important;
    transform: none;
  }

}

/* V3 P0 theme foundation: one semantic palette shared by every page shell. */
:root,
html[data-theme="light"],
body[data-theme="light"],
body:not([data-theme="dark"]) {
  color-scheme: light;
  --theme-bg: #edf3f6;
  --theme-surface: #ffffff;
  --theme-surface-raised: #f7fafc;
  --theme-surface-muted: #e8f0f4;
  --theme-text: #132737;
  --theme-text-strong: #071b2a;
  --theme-muted: #506575;
  --theme-line: #b9c9d3;
  --theme-accent: #087ca8;
  --theme-accent-strong: #055b7d;
  --theme-accent-soft: #dceff7;
  --theme-success: #176f4f;
  --theme-warning: #8a5700;
  --theme-danger: #a42f38;
  --theme-focus: #b45f00;
  --theme-shadow: 0 14px 34px rgba(25, 57, 76, .12);
  --theme-grid: rgba(40, 92, 117, .08);
  --theme-action-focus: var(--theme-focus);
  --theme-action-hover: var(--theme-accent-soft);
  --theme-action-text: var(--theme-text-strong);
  --bg: var(--theme-bg);
  --bg-soft: var(--theme-surface-muted);
  --surface: var(--theme-surface);
  --surface-2: var(--theme-surface-raised);
  --panel: var(--theme-surface);
  --panel-strong: var(--theme-surface);
  --text: var(--theme-text);
  --ink: var(--theme-text);
  --muted: var(--theme-muted);
  --line: var(--theme-line);
  --border: var(--theme-line);
  --accent: var(--theme-accent);
  --accent-strong: var(--theme-accent-strong);
  --success: var(--theme-success);
  --warning: var(--theme-warning);
  --danger: var(--theme-danger);
  --shadow: var(--theme-shadow);
  --grid: var(--theme-grid);
}

html[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #0d1821;
  --theme-surface: #142532;
  --theme-surface-raised: #1a2e3c;
  --theme-surface-muted: #203845;
  --theme-text: #dceaf2;
  --theme-text-strong: #f7fbfd;
  --theme-muted: #a5bac7;
  --theme-line: #476170;
  --theme-accent: #6dd6f7;
  --theme-accent-strong: #a9e9ff;
  --theme-accent-soft: rgba(109, 214, 247, .14);
  --theme-success: #72d7a9;
  --theme-warning: #ffd080;
  --theme-danger: #ff9ba1;
  --theme-focus: #ffca68;
  --theme-shadow: 0 18px 42px rgba(0, 0, 0, .3);
  --theme-grid: rgba(109, 214, 247, .08);
  --theme-action-focus: var(--theme-focus);
  --theme-action-hover: var(--theme-accent-soft);
  --theme-action-text: var(--theme-text-strong);
  --bg: var(--theme-bg);
  --bg-soft: var(--theme-surface-muted);
  --surface: var(--theme-surface);
  --surface-2: var(--theme-surface-raised);
  --panel: var(--theme-surface);
  --panel-strong: var(--theme-surface);
  --text: var(--theme-text);
  --ink: var(--theme-text);
  --muted: var(--theme-muted);
  --line: var(--theme-line);
  --border: var(--theme-line);
  --accent: var(--theme-accent);
  --accent-strong: var(--theme-accent-strong);
  --success: var(--theme-success);
  --warning: var(--theme-warning);
  --danger: var(--theme-danger);
  --shadow: var(--theme-shadow);
  --grid: var(--theme-grid);
}

html,
body {
  background-color: var(--theme-bg);
  color: var(--theme-text);
}

html.pubg-theme-switching *,
html.pubg-theme-switching *::before,
html.pubg-theme-switching *::after {
  transition: none !important;
}

body.ops-layout .ops-hero {
  border-color: var(--theme-line) !important;
  background-color: var(--theme-surface) !important;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0.82), rgba(232, 248, 255, 0.70) 46%, rgba(255, 252, 242, 0.76)) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow) !important;
}

body[data-theme="dark"].ops-layout .ops-hero {
  background-image: linear-gradient(90deg, rgba(19, 31, 49, 0.84), rgba(27, 44, 69, 0.76) 44%, rgba(15, 26, 42, 0.86)) !important;
}

body.ops-layout .ops-hero::after { border-color: var(--theme-line) !important; }
body.ops-layout .ops-hero h1 { color: var(--theme-text-strong) !important; text-shadow: none !important; }
body.ops-layout .ops-hero p { color: var(--theme-muted) !important; }

body.ops-layout .ops-command-card,
body.ops-layout .home-frontpage-query-shell--reworked,
body.ops-layout .home-shortcuts-shell__surface,
body.ops-layout .feature-inline-shell__surface {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow) !important;
}

body.ops-layout .ops-command-card :where(strong, span) { color: var(--theme-text-strong) !important; }
body.ops-layout .ops-command-card :where(p, em) { color: var(--theme-muted) !important; }
body.ops-layout .ops-command-card:hover,
body.ops-layout .ops-command-card:focus-visible {
  border-color: var(--theme-action-focus) !important;
  background: var(--theme-action-hover) !important;
  color: var(--theme-action-text) !important;
}

:where(button, input, select, textarea):focus-visible {
  outline: 3px solid var(--theme-focus);
  outline-offset: 2px;
}

/* The image is decorative context; the readable copy always sits on its own surface. */
.version-carousel,
.ops-version-board.version-carousel {
  border-color: var(--theme-line);
  background: var(--theme-surface);
}

.version-carousel__slide::before {
  z-index: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme-bg) 12%, transparent), color-mix(in srgb, var(--theme-bg) 92%, transparent));
  opacity: 1;
}

.version-carousel__media {
  z-index: 0;
}

.version-carousel__slide > span,
.version-carousel__slide > strong,
.version-carousel__slide > p,
.version-carousel__slide > .version-carousel__maintenance,
.version-carousel__slide > .version-carousel__stale,
.version-carousel__slide > .version-carousel__source {
  position: relative;
  z-index: 2;
}

.version-carousel__slide > span { color: var(--theme-accent-strong); }
.version-carousel__slide > strong { color: var(--theme-text-strong); }
.version-carousel__slide > p { color: var(--theme-muted); }

/* Standalone status page uses the same canvas, surface, border and state tokens. */
body.status-page-shell {
  background: var(--theme-bg);
  color: var(--theme-text);
}

.status-page-shell p,
.status-page-shell .muted,
.status-page-shell .card h2 { color: var(--theme-muted); }

.status-page-shell .card {
  border-color: var(--theme-line);
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

.status-page-shell th,
.status-page-shell td { border-color: var(--theme-line); }

.status-page-shell .status-actions a,
.status-page-shell .status-actions button {
  border-color: var(--theme-line);
  background: var(--theme-surface-raised);
  color: var(--theme-text);
}

.status-page-shell .status-actions a:hover,
.status-page-shell .status-actions button:hover {
  border-color: var(--theme-accent);
  color: var(--theme-accent-strong);
}

/* Mobile shells consume the same semantic values instead of a second palette. */
html[data-theme] .mobile-app,
html[data-theme] body.ops-layout .mobile-ops-home {
  background: var(--theme-bg) !important;
  color: var(--theme-text);
}

html[data-theme] .mobile-topbar,
html[data-theme] .mobile-hero,
html[data-theme] .quick-card,
html[data-theme] .status-list,
html[data-theme] .account-panel,
html[data-theme] .settings-list,
html[data-theme] .result-card,
html[data-theme] .mobile-form,
html[data-theme] .resource-card,
html[data-theme] .mobile-toolbar,
html[data-theme] .mobile-service-grid article,
html[data-theme] .mobile-service-list,
html[data-theme] .mobile-online-current,
html[data-theme] .mobile-online-chart-shell,
html[data-theme] .mobile-online-maintenance,
html[data-theme] .mobile-app-status,
html[data-theme] .mobile-app-card,
html[data-theme] .mobile-app-row,
html[data-theme] .mobile-app-metrics article,
html[data-theme] .mobile-nav {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

html[data-theme] .mobile-hero,
html[data-theme] .mobile-app-hero {
  background: linear-gradient(135deg, var(--theme-surface-raised), var(--theme-surface) 58%, var(--theme-surface-muted)) !important;
}

html[data-theme] .mobile-app-card--primary,
html[data-theme] .mobile-app-status__account,
html[data-theme] .mobile-app-profile {
  background: var(--theme-accent-soft) !important;
  color: var(--theme-text-strong) !important;
}

html[data-theme] .mobile-topbar h1,
html[data-theme] .mobile-hero h2,
html[data-theme] .mobile-section-heading h2,
html[data-theme] .quick-card strong,
html[data-theme] .status-row,
html[data-theme] .settings-list button,
html[data-theme] .result-card h3,
html[data-theme] .mobile-app-card strong,
html[data-theme] .mobile-app-row strong,
html[data-theme] .mobile-app-section__head strong,
html[data-theme] .mobile-app-page-head strong,
html[data-theme] .mobile-app-profile strong,
html[data-theme] .mobile-app-metrics article strong {
  color: var(--theme-text-strong) !important;
}

html[data-theme] .mobile-eyebrow,
html[data-theme] .mobile-hero p,
html[data-theme] .mobile-section-heading span,
html[data-theme] .quick-card small,
html[data-theme] .status-row span,
html[data-theme] .settings-list span,
html[data-theme] .mobile-footnote,
html[data-theme] .result-card p,
html[data-theme] .mobile-app-card em,
html[data-theme] .mobile-app-profile em,
html[data-theme] .mobile-app-metrics article span,
html[data-theme] .mobile-online-current span,
html[data-theme] .mobile-online-current small,
html[data-theme] .mobile-online-summary,
html[data-theme] .mobile-online-axis,
html[data-theme] .mobile-service-grid span,
html[data-theme] .mobile-service-grid small,
html[data-theme] .mobile-service-list span {
  color: var(--theme-muted) !important;
}

html[data-theme] .mobile-form input,
html[data-theme] .mobile-form select,
html[data-theme] .mobile-search input,
html[data-theme] .mobile-toolbar input,
html[data-theme] .mobile-toolbar select,
html[data-theme] .mobile-monitor-form input,
html[data-theme] .mobile-monitor-form select {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text-strong) !important;
}

html[data-theme] .mobile-tabbar,
html[data-theme] .mobile-nav {
  border-color: var(--theme-line) !important;
  background: color-mix(in srgb, var(--theme-surface) 94%, transparent) !important;
}

html[data-theme] .primary-button,
html[data-theme] .mobile-monitor-form button {
  background: var(--theme-accent) !important;
  color: var(--theme-bg) !important;
}

html[data-theme] .filter-chip.is-active,
html[data-theme] .mobile-online-ranges button.is-active {
  border-color: var(--theme-accent) !important;
  background: var(--theme-accent-soft) !important;
  color: var(--theme-accent-strong) !important;
}

html[data-theme] .mobile-empty-state,
html[data-theme] .mobile-feedback.is-error { color: var(--theme-danger) !important; }

/* Legal pages share the status/tool surface contract and follow the same stored mode. */
body.privacy-page-shell {
  background: var(--theme-bg) !important;
  color: var(--theme-text);
}

.privacy-page-shell .privacy-card {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow) !important;
}

.privacy-page-shell .privacy-card :where(h1, h2, strong) { color: var(--theme-text-strong) !important; }
.privacy-page-shell .privacy-card :where(p, li, .privacy-meta) { color: var(--theme-muted) !important; }

.privacy-page-shell .privacy-actions a,
.privacy-page-shell .privacy-actions button {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-accent-strong) !important;
}

.privacy-page-shell .privacy-actions a:hover,
.privacy-page-shell .privacy-actions button:hover {
  border-color: var(--theme-accent) !important;
  background: var(--theme-accent-soft) !important;
}

/* V3.2 P1: one anchored theme guide and one semantic control contract. */
.theme-guide {
  position: fixed;
  z-index: 120;
  display: grid;
  width: min(292px, calc(100vw - 24px));
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background: var(--theme-surface-raised);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease;
}

.theme-guide[hidden] { display: none !important; }
.theme-guide.is-visible { opacity: 1; transform: none; }
.theme-guide strong { color: var(--theme-text-strong) !important; font-size: 13px; line-height: 1.35; }
.theme-guide p { margin: 0; color: var(--theme-muted) !important; font-size: 12px; line-height: 1.55; }
.theme-guide button {
  justify-self: end;
  min-width: 72px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--theme-accent);
  border-radius: 6px;
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.theme-guide button:hover { background: color-mix(in srgb, var(--theme-accent-soft) 76%, var(--theme-accent) 24%); }
.theme-guide button:focus-visible { outline: 3px solid var(--theme-focus); outline-offset: 2px; }
.theme-guide__pointer {
  position: absolute;
  top: -6px;
  right: 22px;
  width: 11px;
  height: 11px;
  border-top: 1px solid var(--theme-line);
  border-left: 1px solid var(--theme-line);
  background: var(--theme-surface-raised);
  transform: rotate(45deg);
}
.theme-guide[data-placement="above"] .theme-guide__pointer { top: auto; bottom: -6px; transform: rotate(225deg); }

@media (prefers-reduced-motion: reduce) {
  body.ops-layout .theme-guide { transition: none !important; transform: none; }
}

html[data-theme] body.ops-layout #about-panel,
html[data-theme] body.ops-layout #about-panel .about-panel__grid article,
html[data-theme] body.ops-layout #weapon-library-panel,
html[data-theme] body.ops-layout #weapon-library-panel .catalog-panel__body,
html[data-theme] body.ops-layout #account-center,
html[data-theme] body.ops-layout #account-center .account-workspace-panel,
html[data-theme] body.ops-layout #account-center .account-profile-editor,
html[data-theme] body.ops-layout #account-center .account-center__tabs {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme] body.ops-layout #about-panel :where(h2, strong),
html[data-theme] body.ops-layout #weapon-library-panel :where(h2, strong),
html[data-theme] body.ops-layout #account-center :where(h2, h3, strong, dt, dd) { color: var(--theme-text-strong) !important; }
html[data-theme] body.ops-layout #about-panel :where(p, span, small, .meta),
html[data-theme] body.ops-layout #weapon-library-panel :where(p, span, small, .meta),
html[data-theme] body.ops-layout #account-center :where(p, span, small, .meta, label) { color: var(--theme-muted) !important; }
html[data-theme] body.ops-layout #account-center [data-state="success"] { color: var(--theme-success) !important; }
html[data-theme] body.ops-layout #account-center [data-state="warning"] { color: var(--theme-warning) !important; }
html[data-theme] body.ops-layout #account-center [data-state="error"] { color: var(--theme-danger) !important; }
html[data-theme] body.ops-layout #about-panel a { color: var(--theme-accent-strong) !important; text-decoration-color: color-mix(in srgb, var(--theme-accent) 58%, transparent); }

html[data-theme] body.ops-layout #weapon-library-panel .catalog-tabs--weapons {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-muted) !important;
}

html[data-theme] :where(
  #weapon-library-panel .catalog-tab,
  #account-center .account-center__tabs button,
  #about-panel button,
  .match-pagination button,
  .player-history-pagination button,
  .ban-history__pagination button,
  .ban-history__icon-button,
  .detail-modal__route-actions button,
  .catalog-load-more__button,
  .load-more-button,
  .filter-chip,
  .text-button,
  .back-button
) {
  border-color: var(--theme-accent) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text-strong) !important;
  box-shadow: none !important;
}

html[data-theme] :where(
  #weapon-library-panel .catalog-tab,
  #account-center .account-center__tabs button,
  #about-panel button,
  .match-pagination button,
  .player-history-pagination button,
  .ban-history__pagination button,
  .ban-history__icon-button,
  .detail-modal__route-actions button,
  .catalog-load-more__button,
  .load-more-button,
  .filter-chip,
  .text-button,
  .back-button
):hover:not(:disabled) {
  border-color: var(--theme-accent) !important;
  background: var(--theme-action-hover) !important;
  color: var(--theme-accent-strong) !important;
}

html[data-theme] :where(
  #weapon-library-panel .catalog-tab,
  #account-center .account-center__tabs button,
  #about-panel button,
  .match-pagination button,
  .player-history-pagination button,
  .ban-history__pagination button,
  .ban-history__icon-button,
  .detail-modal__route-actions button,
  .catalog-load-more__button,
  .load-more-button,
  .filter-chip,
  .text-button,
  .back-button
):active:not(:disabled) {
  border-color: var(--theme-accent) !important;
  background: var(--theme-action-hover) !important;
  color: var(--theme-accent-strong) !important;
}

html[data-theme] :where(
  #weapon-library-panel .catalog-tab,
  #account-center .account-center__tabs button,
  #about-panel button,
  .match-pagination button,
  .player-history-pagination button,
  .ban-history__pagination button,
  .ban-history__icon-button,
  .detail-modal__route-actions button,
  .catalog-load-more__button,
  .load-more-button,
  .filter-chip,
  .text-button,
  .back-button
):focus-visible { outline: 3px solid var(--theme-focus) !important; outline-offset: 2px !important; }

html[data-theme] body.ops-layout #weapon-library-panel .catalog-tab.catalog-tab--active,
html[data-theme] body.ops-layout #account-center .account-center__tabs button.is-active,
html[data-theme] .filter-chip.is-active {
  border-color: var(--theme-accent) !important;
  background: var(--theme-accent-soft) !important;
  color: var(--theme-accent-strong) !important;
}

html[data-theme] :where(
  #weapon-library-panel .catalog-tab,
  #account-center .account-center__tabs button,
  #about-panel button,
  .match-pagination button,
  .player-history-pagination button,
  .ban-history__pagination button,
  .ban-history__icon-button,
  .detail-modal__route-actions button,
  .catalog-load-more__button,
  .load-more-button,
  .filter-chip,
  .text-button,
  .back-button
):disabled {
  opacity: 1 !important;
  border-color: var(--theme-accent) !important;
  background: var(--theme-surface-muted) !important;
  color: var(--theme-muted) !important;
  cursor: not-allowed !important;
}

html[data-theme] body.ops-layout #account-center :where(input, select, textarea) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text-strong) !important;
}

html[data-theme] body.ops-layout #account-center :where(button, .account-profile-editor > button, .account-center__tools button) {
  border-color: var(--theme-accent) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text-strong) !important;
  box-shadow: none !important;
}

html[data-theme] body.ops-layout #account-center .account-profile-editor > button,
html[data-theme] body.ops-layout #account-center .account-center__tools button,
html[data-theme] body.ops-layout #account-center .account-monitor-link-form button {
  border-color: var(--theme-accent) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text-strong) !important;
  box-shadow: none !important;
}

/* V3.2 P4: final account theme layer wins over every legacy --account-* block. */
html[data-theme] body.ops-layout .auth-modal:has(#account-center:not(.hidden)),
html[data-theme] body.ops-layout #account-center {
  --account-p21-bg: var(--theme-bg);
  --account-p21-surface: var(--theme-surface);
  --account-p21-soft: var(--theme-surface-muted);
  --account-p21-text: var(--theme-text);
  --account-p21-muted: var(--theme-muted);
  --account-p21-border: var(--theme-line);
  --account-p21-accent: var(--theme-accent);
  --account-surface: var(--theme-surface);
  --account-surface-soft: var(--theme-surface-muted);
  --account-border: var(--theme-line);
  --account-text: var(--theme-text);
  --account-muted: var(--theme-muted);
  --account-accent: var(--theme-accent);
  --account-shadow: var(--theme-shadow);
}

html[data-theme] body.ops-layout .auth-modal__panel:has(#account-center:not(.hidden)) { background: var(--theme-bg) !important; }
html[data-theme] body.ops-layout #account-center :where(
  .account-center__hero,
  .account-profile-editor,
  .account-monitor-link-form,
  .account-monitor-row,
  .account-facts,
  .account-security-list,
  .account-center__tools
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme] body.ops-layout #account-center .account-center__tabs { background: var(--theme-surface-muted) !important; }
html[data-theme] body.ops-layout #account-center .account-center__tabs button,
html[data-theme] body.ops-layout #account-center .account-profile-editor > button,
html[data-theme] body.ops-layout #account-center .account-center__tools button,
html[data-theme] body.ops-layout #account-center .account-monitor-link-form button {
  border: 1px solid var(--theme-accent) !important;
}
html[data-theme] body.ops-layout #account-center :where(input, select, textarea) {
  border-color: var(--theme-accent) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text-strong) !important;
}
html[data-theme] body.ops-layout #account-center .account-monitor-link-form :is(input, select),
html[data-theme] body.ops-layout #account-center .account-profile-editor :is(input, textarea),
html[data-theme] body.ops-layout #account-center .account-center__tools :is(input, select, textarea) {
  border-color: var(--theme-accent) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text-strong) !important;
}
html[data-theme] body.ops-layout #account-center .account-monitor-link-form button:hover:not(:disabled),
html[data-theme] body.ops-layout #account-center .account-profile-editor button:hover:not(:disabled),
html[data-theme] body.ops-layout #account-center .account-center__tools button:hover:not(:disabled),
html[data-theme] body.ops-layout #account-center .account-center__tabs button:hover:not(:disabled) {
  border-color: var(--theme-accent) !important;
  background: var(--theme-action-hover) !important;
  color: var(--theme-accent-strong) !important;
}
html[data-theme] body.ops-layout #account-center :is(button):active:not(:disabled) {
  background: color-mix(in srgb, var(--theme-action-hover) 72%, var(--theme-accent) 28%) !important;
}
html[data-theme] body.ops-layout #account-center :is(button, input, select, textarea):focus-visible {
  outline: 3px solid var(--theme-focus) !important;
  outline-offset: 2px !important;
}
html[data-theme] body.ops-layout #account-center button:disabled {
  opacity: 1 !important;
  border-color: var(--theme-accent) !important;
  background: var(--theme-surface-muted) !important;
  color: var(--theme-muted) !important;
  cursor: not-allowed !important;
}

/* V3.2 P5: verified-partial weapon damage contract. */
html[data-theme] body.ops-layout #weapon-damage-panel {
  --damage-media-surface: var(--theme-surface-muted);
  --damage-media-border: var(--theme-line);
  --damage-media-fallback: var(--theme-surface-raised);
  --damage-media-fallback-text: var(--theme-text-strong);
  color: var(--theme-text);
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-coverage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-coverage > div,
html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-disclosure,
html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-board {
  min-width: 0;
  border: 1px solid var(--theme-line) !important;
  border-radius: 8px !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-coverage > div {
  display: grid;
  align-content: center;
  min-height: 76px;
  padding: 12px 14px;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-coverage span,
html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-disclosure p {
  color: var(--theme-muted) !important;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-coverage strong {
  margin-top: 5px;
  color: var(--theme-text-strong) !important;
  font-size: 20px;
}

html[data-theme] body.ops-layout #weapon-damage-panel :is(#weapon-damage-source, .weapon-modal__damage-source a) {
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  color: var(--theme-accent-strong) !important;
  font-weight: 800;
  overflow-wrap: anywhere;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-disclosure {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding: 14px 16px;
  border-left: 4px solid var(--theme-warning) !important;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-disclosure strong {
  color: var(--theme-text-strong) !important;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-disclosure p {
  margin: 0;
  line-height: 1.55;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-tabs {
  min-width: 0;
  margin: 0;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-board {
  margin-top: 10px;
  padding: 16px;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-card {
  min-width: 0;
  min-height: 254px;
  border: 1px solid var(--theme-line) !important;
  border-left: 4px solid var(--theme-accent) !important;
  border-radius: 8px !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-card:hover,
html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-card:focus-visible {
  border-color: var(--theme-accent) !important;
  background: var(--theme-action-hover) !important;
  transform: none !important;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-card:focus-visible {
  outline: 3px solid var(--theme-focus) !important;
  outline-offset: 2px;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-card__value {
  border: 1px solid var(--theme-accent) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-accent-strong) !important;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-card__media {
  height: 132px;
  border-radius: 6px !important;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-card__fallback {
  min-width: 78px;
  min-height: 58px;
  border-radius: 6px !important;
  letter-spacing: 0;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-card strong {
  color: var(--theme-text-strong) !important;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-card p {
  color: var(--theme-muted) !important;
}

html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-card__chips span {
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: var(--theme-surface-muted) !important;
  color: var(--theme-text) !important;
}

html[data-theme] body.ops-layout #weapon-library-panel .asset-card__verified-damage {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  margin-top: 8px;
  padding: 3px 9px;
  border: 1px solid var(--theme-success);
  border-radius: 6px;
  background: color-mix(in srgb, var(--theme-success) 14%, var(--theme-surface));
  color: var(--theme-success);
  font-weight: 900;
}

html[data-theme] body .mobile-weapons-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background: var(--theme-surface-muted);
}

html[data-theme] body .mobile-weapons-mode button {
  min-width: 0;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--theme-muted);
  font-weight: 800;
}

html[data-theme] body .mobile-weapons-mode button.is-active {
  border-color: var(--theme-accent);
  background: var(--theme-surface);
  color: var(--theme-accent-strong);
}

html[data-theme] body .mobile-weapons-mode button:focus-visible {
  outline: 3px solid var(--theme-focus);
  outline-offset: 1px;
}

html[data-theme] body .mobile-weapon-damage {
  color: var(--theme-text);
}

html[data-theme] body .mobile-damage-coverage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

html[data-theme] body .mobile-damage-coverage > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: var(--theme-surface);
}

html[data-theme] body .mobile-damage-coverage span,
html[data-theme] body .mobile-damage-coverage strong {
  display: block;
  overflow-wrap: anywhere;
}

html[data-theme] body .mobile-damage-coverage span {
  color: var(--theme-muted);
  font-size: 10px;
}

html[data-theme] body .mobile-damage-coverage strong {
  margin-top: 5px;
  color: var(--theme-text-strong);
  font-size: 18px;
}

html[data-theme] body .mobile-damage-source {
  display: inline-flex;
  margin: 12px 2px 0;
  color: var(--theme-accent-strong);
  font-size: 13px;
  font-weight: 800;
}

html[data-theme] body .mobile-damage-grid {
  display: grid;
  gap: 9px;
}

html[data-theme] body .mobile-damage-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--theme-line);
  border-left: 4px solid var(--theme-accent);
  border-radius: 8px;
  background: var(--theme-surface);
  color: var(--theme-text);
}

html[data-theme] body .mobile-damage-card__fallback {
  display: grid;
  place-items: center;
  width: 64px;
  height: 54px;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: var(--theme-surface-muted);
  color: var(--theme-text-strong);
  font-weight: 900;
}

html[data-theme] body .mobile-damage-card div {
  min-width: 0;
}

html[data-theme] body .mobile-damage-card :is(strong, small, p) {
  display: block;
  margin: 0;
  overflow-wrap: anywhere;
}

html[data-theme] body .mobile-damage-card strong { color: var(--theme-text-strong); }
html[data-theme] body .mobile-damage-card :is(small, p) { margin-top: 4px; color: var(--theme-muted); font-size: 11px; }
html[data-theme] body .mobile-damage-card > b { color: var(--theme-accent-strong); font-size: 22px; }

@media (max-width: 900px) {
  html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-toolbar { align-items: stretch; flex-direction: column; }
  html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-coverage,
  html[data-theme] body.ops-layout #weapon-damage-panel .weapon-damage-grid { grid-template-columns: 1fr; }
  html[data-theme] body .mobile-damage-card { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; }
  html[data-theme] body .mobile-damage-card__fallback { width: 56px; }
}