/*
 * 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;
    }
}