/*
 * Sovereign Series operator experience — 2026 system layer.
 * Loaded last so legacy page-specific rules inherit one accessible visual contract.
 */
:root {
  --sov-ink: #121820;
  --sov-ink-soft: #4d5968;
  --sov-canvas: #f3f5f7;
  --sov-surface: rgba(255, 255, 255, 0.96);
  --sov-surface-strong: #fff;
  --sov-line: #d8dee6;
  --sov-line-strong: #bcc6d2;
  --sov-accent: #b51f31;
  --sov-accent-strong: #8e1424;
  --sov-accent-soft: #fbecef;
  --sov-success: #087a55;
  --sov-warning: #9b5d00;
  --sov-danger: #b42318;
  --sov-info: #175cd3;
  --sov-radius-sm: 0.5rem;
  --sov-radius: 0.875rem;
  --sov-radius-lg: 1.25rem;
  --sov-shadow-sm:
    0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --sov-shadow: 0 12px 32px rgba(16, 24, 40, 0.1);
  --sov-content: 92rem;
  --sov-header: 4.25rem;
  --sov-ease: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
}
html[data-plane="shield"] {
  --sov-accent: #b51f31;
  --sov-accent-strong: #851326;
}
html[data-plane="keygen"],
body[data-auth-plane="keygen"] {
  --sov-accent: #7a3ff2;
  --sov-accent-strong: #5425b8;
  --sov-accent-soft: #f2edff;
}
html[data-plane="sdip"],
body[data-auth-plane="sdip"] {
  --sov-accent: #0f6f62;
  --sov-accent-strong: #074f47;
  --sov-accent-soft: #e8f7f4;
}
html[data-plane="secintel"],
body[data-auth-plane="secintel"] {
  --sov-accent: #175cd3;
  --sov-accent-strong: #123e90;
  --sov-accent-soft: #eaf2ff;
}
html[data-theme="dark"] {
  --sov-ink: #f4f7fb;
  --sov-ink-soft: #afbac8;
  --sov-canvas: #0b1017;
  --sov-surface: rgba(19, 27, 38, 0.96);
  --sov-surface-strong: #151e2a;
  --sov-line: #2b3848;
  --sov-line-strong: #435166;
  --sov-accent-soft: #291820;
  color-scheme: dark;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
}
body {
  min-height: 100vh;
  margin: 0;
  color: var(--sov-ink);
  background:
    radial-gradient(
      circle at 92% -10%,
      color-mix(in srgb, var(--sov-accent) 12%, transparent),
      transparent 34rem
    ),
    linear-gradient(
      180deg,
      var(--sov-canvas),
      color-mix(in srgb, var(--sov-canvas) 94%, #fff)
    );
  font-family:
    Inter,
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(100, 116, 139, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 116, 139, 0.11) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
h1,
h2,
h3,
.ss-stage__title,
.app-shell-title {
  font-family: Saira, "Arial Narrow", sans-serif;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}
a {
  color: var(--sov-accent);
  text-underline-offset: 0.18em;
}
a,
button,
input,
select,
textarea,
[tabindex] {
  outline-offset: 3px;
}
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sov-accent) 72%, #fff);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--sov-accent) 18%, transparent);
}
.skip-link,
.ss-skip {
  position: fixed !important;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-180%);
  z-index: 10000;
  padding: 0.75rem 1rem;
  border-radius: var(--sov-radius-sm);
  background: var(--sov-ink);
  color: var(--sov-surface-strong);
}
.skip-link:focus,
.ss-skip:focus {
  transform: none;
}
.app-shell,
.app-shell-frame,
.ss-shell {
  min-height: 100vh;
}
.side-nav,
.app-shell-side-nav,
.ss-sidebar {
  border-inline-end: 1px solid var(--sov-line) !important;
  background: color-mix(
    in srgb,
    var(--sov-surface-strong) 94%,
    var(--sov-accent) 6%
  ) !important;
  box-shadow: 8px 0 28px rgba(16, 24, 40, 0.06);
}
.side-nav a,
.app-shell-side-nav a,
.ss-nav__link {
  border-radius: var(--sov-radius-sm) !important;
  transition:
    background var(--sov-ease),
    color var(--sov-ease),
    transform var(--sov-ease);
}
.side-nav a:hover,
.app-shell-side-nav a:hover,
.ss-nav__link:hover {
  background: var(--sov-accent-soft) !important;
  transform: translateX(2px);
}
.side-nav a[aria-current="page"],
.app-shell-side-nav a[aria-current="page"],
.ss-nav__link--active {
  color: var(--sov-accent) !important;
  background: var(--sov-accent-soft) !important;
  box-shadow: inset 3px 0 0 var(--sov-accent);
}
.shell-topbar,
.app-shell-topbar,
.ss-topbar,
.ss-header {
  min-height: var(--sov-header);
  border-bottom: 1px solid var(--sov-line) !important;
  background: color-mix(
    in srgb,
    var(--sov-surface) 92%,
    transparent
  ) !important;
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--sov-shadow-sm);
}
.content-zone,
.app-shell-content,
.ss-stage,
main {
  max-width: var(--sov-content);
}
.content-zone,
.app-shell-content,
.ss-stage {
  width: 100%;
  margin-inline: auto;
  padding: clamp(1rem, 2.5vw, 2.5rem) !important;
}
.card,
.panel,
.box,
.dv8-keygen-panel,
.dashboard-compute-card,
.ss-card,
.kpi-card,
[class*="dashboard-card"],
[class*="metric-card"],
[class*="summary-card"] {
  border: 1px solid var(--sov-line) !important;
  border-radius: var(--sov-radius) !important;
  background: var(--sov-surface) !important;
  box-shadow: var(--sov-shadow-sm) !important;
}
.card:hover,
.dashboard-compute-card:hover,
.ss-card:hover {
  border-color: var(--sov-line-strong) !important;
  box-shadow: var(--sov-shadow) !important;
  transform: translateY(-1px);
}
button,
.button,
.btn,
.ss-action,
[class*="action-link"] {
  min-height: 2.75rem;
  border-radius: var(--sov-radius-sm) !important;
  font-weight: 650;
  transition:
    transform var(--sov-ease),
    box-shadow var(--sov-ease),
    background var(--sov-ease);
}
button:hover,
.button:hover,
.btn:hover,
.ss-action:hover,
[class*="action-link"]:hover {
  transform: translateY(-1px);
}
.btn-primary,
.button.is-primary,
.ss-action,
[class*="action-link--primary"] {
  border-color: var(--sov-accent) !important;
  background: var(--sov-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--sov-accent) 25%, transparent) !important;
}
.btn-primary:hover,
.button.is-primary:hover,
.ss-action:hover {
  background: var(--sov-accent-strong) !important;
}
input,
select,
textarea,
.input,
.select select {
  min-height: 2.75rem;
  border: 1px solid var(--sov-line-strong) !important;
  border-radius: var(--sov-radius-sm) !important;
  color: var(--sov-ink) !important;
  background: var(--sov-surface-strong) !important;
}
input:hover,
select:hover,
textarea:hover {
  border-color: color-mix(
    in srgb,
    var(--sov-accent) 55%,
    var(--sov-line)
  ) !important;
}
label,
.label {
  color: var(--sov-ink);
  font-weight: 650;
}
table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid var(--sov-line);
  border-radius: var(--sov-radius);
  overflow: hidden;
  background: var(--sov-surface);
}
thead {
  background: color-mix(in srgb, var(--sov-canvas) 86%, var(--sov-accent) 14%);
}
th {
  color: var(--sov-ink);
  font-size: 0.75rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
th,
td {
  padding: 0.85rem 1rem !important;
  border-bottom: 1px solid var(--sov-line) !important;
  vertical-align: middle;
}
tbody tr:hover {
  background: var(--sov-accent-soft);
}
.badge,
.tag,
.chip,
.ss-chip,
[class*="status"] {
  border-radius: 999px !important;
}
.alert,
.notification {
  border: 1px solid var(--sov-line);
  border-inline-start: 4px solid var(--sov-info);
  border-radius: var(--sov-radius-sm);
  background: var(--sov-surface);
}
[aria-busy="true"] {
  cursor: progress;
}
@media (max-width: 900px) {
  .content-zone,
  .app-shell-content,
  .ss-stage {
    padding: 1rem !important;
  }
  .side-nav,
  .app-shell-side-nav,
  .ss-sidebar {
    box-shadow: none;
  }
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dashboard-compute-grid,
  .dv8-nav-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 520px) {
  :root {
    --sov-radius: 0.75rem;
  }
  h1 {
    font-size: clamp(1.65rem, 9vw, 2.25rem) !important;
  }
  button,
  .button,
  .btn,
  .ss-action {
    width: 100%;
    justify-content: center;
  }
  .shell-topbar,
  .app-shell-topbar,
  .ss-topbar {
    min-height: 3.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (forced-colors: active) {
  .card,
  .panel,
  .box,
  table,
  input,
  select,
  textarea {
    border: 1px solid CanvasText !important;
  }
  :focus-visible {
    outline: 3px solid Highlight !important;
  }
}
@media print {
  .side-nav,
  .app-shell-side-nav,
  .ss-sidebar,
  .shell-topbar,
  .app-shell-topbar,
  .ss-topbar,
  .ss-header {
    display: none !important;
  }
  body,
  main,
  .content-zone,
  .app-shell-content,
  .ss-stage {
    background: #fff !important;
    color: #000 !important;
    max-width: none !important;
    padding: 0 !important;
  }
  .card,
  .panel,
  .box,
  table {
    box-shadow: none !important;
    break-inside: avoid;
  }
}