/* Shared visual tokens for XTREAM. Components keep their own layout and behavior. */
:root {
    --xt-bg: #090c11;
    --xt-chrome: #0e131a;
    --xt-surface: #12171f;
    --xt-raised: #1a212c;
    --xt-hover: #263347;
    --xt-input: #0d131c;
    --xt-line: #303b4b;
    --xt-control: #53647d;
    --xt-text: #edf3fb;
    --xt-muted: #b1bed0;
    --xt-link: #aacaff;
    --xt-primary: #2c579d;
    --xt-primary-hover: #3569bb;
    --xt-primary-line: #5f89c9;
    --xt-focus: #8ab6ff;
    --xt-tint: #162235;
    --xt-tint-line: #3c5374;
    --xt-success: #99e5bd;
    --xt-success-bg: #142823;
    --xt-success-line: #38695b;
    --xt-warning: #ffd2a4;
    --xt-warning-bg: #34271f;
    --xt-warning-line: #805c3f;
    --xt-danger: #ffb5c0;
    --xt-danger-bg: #39232d;
    --xt-danger-line: #845367;
    --xt-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --xt-panel-radius: 14px;
    --xt-control-radius: 8px;
    --xt-width: 1660px;
    --xt-gutter: clamp(12px, 2vw, 26px);
}

/* The public chrome and the existing role-aware account menu share one palette. */
body .xt-ui-site-footer { background: var(--xt-chrome); color: var(--xt-muted); border-top: 1px solid var(--xt-line); }
body .xt-ui-site-footer :is(a, .title) { color: var(--xt-text); }
body .xt-ui-site-footer a:hover { color: var(--xt-link); }

body > .navbar.navbar-icon-dark-blue {
    border-top: 0;
    border-bottom: 1px solid var(--xt-line);
    box-shadow: none;
    font-family: var(--xt-font);
}
body > .navbar.navbar-icon-dark-blue .container { width: min(calc(100% - var(--xt-gutter) * 2), var(--xt-width)); }
body > .navbar.navbar-icon-dark-blue .navbar-nav .nav-link {
    color: var(--xt-muted) !important;
    border-radius: var(--xt-control-radius);
}
body > .navbar.navbar-icon-dark-blue .navbar-nav .nav-link:hover {
    color: var(--xt-text) !important;
    background: var(--xt-raised);
    border-color: var(--xt-line);
    transform: none;
}
body > .navbar.navbar-icon-dark-blue .navbar-nav .nav-link.active {
    color: white !important;
    background: var(--xt-primary) !important;
    border-color: var(--xt-primary-line);
    box-shadow: none;
}
body > .navbar.navbar-icon-dark-blue .navbar-toggler { border-color: var(--xt-control); background: var(--xt-raised); }

/* Existing components resolve their local tokens from the shared values. */
:root:has(.kiper-shell, .kau-page) {
    --kp-bg: var(--xt-bg);
    --kp-surface: var(--xt-surface);
    --kp-raised: var(--xt-raised);
    --kp-input: var(--xt-input);
    --kp-border: var(--xt-line);
    --kp-line: var(--xt-line);
    --kp-text: var(--xt-text);
    --kp-muted: var(--xt-muted);
    --kp-accent: var(--xt-link);
    --kp-blue: var(--xt-link);
    --kp-green: var(--xt-success);
    --kp-red: var(--xt-danger);
    --kp-gold: var(--xt-warning);
    --kp-radius: var(--xt-panel-radius);
}
:root .staff-layout.staff-anume {
    --anume-surface: var(--xt-surface);
    --anume-soft: var(--xt-raised);
    --anume-input: var(--xt-input);
    --anume-line: var(--xt-line);
    --anume-control: var(--xt-control);
    --anume-text: var(--xt-text);
    --anume-muted: var(--xt-muted);
    --anume-link: var(--xt-link);
    --anume-primary: var(--xt-primary);
    --anume-primary-hover: var(--xt-primary-hover);
    --anume-focus: var(--xt-focus);
    --anume-tint: var(--xt-tint);
    --anume-tint-line: var(--xt-tint-line);
    --anume-green: var(--xt-success);
    --anume-green-tint: var(--xt-success-bg);
    --anume-green-line: var(--xt-success-line);
    --anume-warn: var(--xt-warning);
    --anume-warn-tint: var(--xt-warning-bg);
    --anume-warn-line: var(--xt-warning-line);
    --anume-error: var(--xt-danger);
    --anume-error-tint: var(--xt-danger-bg);
    --anume-error-line: var(--xt-danger-line);
}
:root :is(.bp-main, .bp-toast) {
    --bp-bg: var(--xt-bg);
    --bp-panel: var(--xt-surface);
    --bp-soft: var(--xt-raised);
    --bp-line: var(--xt-line);
    --bp-border: var(--xt-line);
    --bp-text: var(--xt-text);
    --bp-muted: var(--xt-muted);
    --bp-accent: var(--xt-link);
    --bp-green: var(--xt-success);
}
:root:has(.xr-shell, .xr-login-card) {
    --xr-bg: var(--xt-bg);
    --xr-panel: var(--xt-surface);
    --xr-panel-2: var(--xt-raised);
    --xr-line: var(--xt-line);
    --xr-text: var(--xt-text);
    --xr-muted: var(--xt-muted);
    --xr-blue: var(--xt-primary);
    --xr-blue-2: var(--xt-link);
    --xr-green: var(--xt-success);
    --xr-red: var(--xt-danger);
    --xr-amber: var(--xt-warning);
}
:root:has(.br-wrap) {
    --br-bg: var(--xt-bg);
    --br-panel: var(--xt-surface);
    --br-panel2: var(--xt-raised);
    --br-line: var(--xt-line);
    --br-text: var(--xt-text);
    --br-muted: var(--xt-muted);
    --br-blue: var(--xt-focus);
    --br-cyan: var(--xt-link);
    --br-green: var(--xt-success);
    --br-amber: var(--xt-warning);
    --br-red: var(--xt-danger);
}
:root .tck-wrapper {
    --support-bg: var(--xt-bg);
    --support-panel: var(--xt-surface);
    --support-panel-2: var(--xt-raised);
    --support-panel-3: var(--xt-tint);
    --support-border: var(--xt-line);
    --support-border-strong: var(--xt-control);
    --support-text: var(--xt-text);
    --support-muted: var(--xt-muted);
    --support-faint: var(--xt-muted);
    --support-cyan: var(--xt-link);
    --support-cyan-strong: var(--xt-primary);
    --support-green: var(--xt-success);
    --support-amber: var(--xt-warning);
    --support-red: var(--xt-danger);
    --support-radius: var(--xt-control-radius);
}
:root .tck-wrapper .sq-inbox {
    --sq-bg: var(--xt-surface);
    --sq-line: var(--xt-line);
    --sq-muted: var(--xt-muted);
    color: var(--xt-text);
}

/* Page surfaces are scoped to the corresponding workspace, including standalone pages. */
html:root:has(.kiper-shell, .kau-page, .staff-layout, .bp-main, .br-wrap, .xr-shell, .xr-login-card, .tck-wrapper,
         .manual-payment-page, .amazon-page, .dashboard_contents, .checkout-page, .bonus-shop,
         .invoice-check, .admin-panel-container, .xt-ui-subscriptions, .xt-ui-finance-login, .xt-ui-reviews),
html body:has(.kiper-shell, .kau-page, .staff-layout, .bp-main, .br-wrap, .xr-shell, .xr-login-card, .tck-wrapper,
         .manual-payment-page, .amazon-page, .dashboard_contents, .checkout-page, .bonus-shop,
         .invoice-check, .admin-panel-container, .xt-ui-subscriptions, .xt-ui-finance-login, .xt-ui-reviews) {
    color-scheme: dark;
    background: var(--xt-bg) !important;
    color: var(--xt-text);
}
body:has(.tck-wrapper) .tck-wrapper { background: var(--xt-bg); }
body :is(.kiper-shell, .kau-page, .staff-layout, .bp-main, .bp-finance-nav, .br-wrap,
         .xr-shell, .tck-wrapper, .checkout-page, .bonus-shop, .xt-ui-reviews,
         .admin-panel-container, .xt-ui-subscriptions, .xt-ui-finance-login) {
    font-family: var(--xt-font);
}
body :is(.bp-main, .br-wrap, .kau-page, .bonus-shop) {
    width: min(calc(100% - var(--xt-gutter) * 2), var(--xt-width));
    max-width: none;
}
body .staff-layout.staff-anume { width: min(100%, var(--xt-width)); padding-inline: var(--xt-gutter); }

/* Panels, controls and table headers share shape, contrast and active states. */
body :is(.staff-layout .staff-panel, .kau-page .kau-card, .br-wrap .br-stat,
         .br-wrap .br-tools, .br-wrap .br-table-wrap, .br-wrap .br-pagination,
         .bp-main .bp-card, .bp-main .bp-finder-filter-panel, .xr-shell .xr-card,
         .tck-wrapper .tck-card, .tck-wrapper .sq-metric, .xt-ui-subscriptions .kpi-card,
         .xt-ui-subscriptions .table-container, .xt-ui-subscriptions .filter-bar,
         .bonus-shop .shop-info, .bonus-shop .shop-product, .admin-panel-container .order-card) {
    border-radius: var(--xt-panel-radius);
    border-color: var(--xt-line);
    box-shadow: none;
}
body :is(.staff-layout .staff-panel, .kau-page .kau-card, .br-wrap .br-tools,
         .bp-main .bp-card, .xr-shell .xr-card, .tck-wrapper .tck-card,
         .bonus-shop .shop-info, .bonus-shop .shop-product, .admin-panel-container .order-card) {
    background: var(--xt-surface);
}
body :is(.br-wrap .br-hero, .bonus-shop .shop-hero, .xr-shell .xr-hero, .tck-wrapper .support-topbar) {
    background: linear-gradient(115deg, var(--xt-surface), var(--xt-tint));
    border: 1px solid var(--xt-line);
    border-radius: var(--xt-panel-radius);
    box-shadow: none;
}
body :is(.br-wrap .br-hero, .bp-main .bp-titlebar, .kau-page .kau-heading,
         .xr-shell .xr-hero, .bonus-shop .shop-hero, .tck-wrapper .support-topbar) h1 {
    color: var(--xt-text);
    font-family: var(--xt-font);
    font-size: clamp(23px, 2.2vw, 30px);
    letter-spacing: -.02em;
    text-align: left;
}
body :is(.kiper-shell .kiper-toolbar-field input, .kiper-shell .kiper-toolbar-field select,
         .kau-page .kau-input, .br-wrap .br-input, .br-wrap .br-select, .br-wrap .br-row-format,
         .bp-main .bp-input, .bp-main .bp-finder-input, .xr-shell .xr-input,
         .tck-wrapper .tck-input, .xt-ui-subscriptions .filter-group :is(input, select),
         .xt-ui-finance-login .card input, .admin-panel-container .search-bar input) {
    background-color: var(--xt-input);
    border-color: var(--xt-control);
    border-radius: var(--xt-control-radius);
    color: var(--xt-text);
}
body :is(.kiper-shell, .kau-page, .staff-layout, .br-wrap, .bp-main, .xr-shell, .tck-wrapper,
         .xt-ui-subscriptions, .xt-ui-finance-login, .admin-panel-container, .xt-ui-reviews,
         .bonus-shop, .checkout-page, .navbar-icon-dark-blue) :is(a, button, summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--xt-focus);
    outline-offset: 2px;
}
body .kiper-shell .kiper-main-search input:focus-visible { outline: none; }
body .staff-layout .staff-button:not(.staff-button-muted, .is-reload, .is-reset) {
    background: var(--xt-primary);
    border-color: var(--xt-primary-line);
    color: white;
}
body .staff-layout .staff-button:not(.staff-button-muted, .is-reload, .is-reset):hover {
    background: var(--xt-primary-hover);
}
body .staff-layout .staff-button-muted {
    background: var(--xt-raised);
    border-color: var(--xt-control);
    color: var(--xt-link);
}
body .staff-layout .staff-button-muted:hover { background: var(--xt-hover); color: var(--xt-text); }
body :is(.kiper-shell .kiper-toolbar-primary:not(.kiper-toolbar-secondary), .kau-page .kau-button.is-primary,
         .kau-page .kau-button-primary, .br-wrap .br-btn.primary, .bp-main .bp-button.primary,
         .xr-shell .xr-button.primary, .tck-wrapper .tck-btn-primary, .xt-ui-subscriptions .btn-filter,
         .xt-ui-finance-login .button, .bonus-shop .shop-btn) {
    background: var(--xt-primary);
    border-color: var(--xt-primary-line);
    border-radius: var(--xt-control-radius);
    color: white;
    box-shadow: none;
}
body .kiper-shell .kiper-toolbar-primary:not(.kiper-toolbar-secondary) { color: white !important; }
body :is(.kiper-shell .kiper-toolbar-primary:not(.kiper-toolbar-secondary), .kau-page .kau-button.is-primary,
         .kau-page .kau-button-primary, .br-wrap .br-btn.primary, .bp-main .bp-button.primary,
         .xr-shell .xr-button.primary, .tck-wrapper .tck-btn-primary, .xt-ui-subscriptions .btn-filter,
         .xt-ui-finance-login .button, .bonus-shop .shop-btn):hover {
    background: var(--xt-primary-hover);
    color: white;
}
body :is(.kau-page .kau-button.is-secondary, .br-wrap .br-btn:not(.primary, .danger),
         .bp-main .bp-button:not(.primary, .green, .danger), .xr-shell .xr-button:not(.primary, .danger)) {
    background: var(--xt-raised);
    border-color: var(--xt-control);
    border-radius: var(--xt-control-radius);
    color: var(--xt-link);
}
body :is(.kiper-shell .table, .br-wrap .br-table, .bp-main .bp-table, .xr-shell .xr-table,
         .xt-ui-subscriptions .table-container) thead th {
    background-color: var(--xt-raised);
    border-color: var(--xt-line);
    color: var(--xt-muted);
}
body .kiper-shell .table tbody > tr { background: var(--xt-surface); }
body .kiper-shell .table tbody > tr:nth-child(even) { background: var(--xt-chrome); }
body :is(.kiper-shell .table, .br-wrap .br-table, .bp-main .bp-table, .xr-shell .xr-table,
         .xt-ui-subscriptions .table-container) tbody tr:hover {
    background-color: var(--xt-tint);
}
body :is(.bp-main .bp-tabs .current, .bp-main .xtf-tabs a.current, .kau-page .kau-nav .is-active,
         .tck-wrapper .sq-inbox .is-current) {
    background-color: var(--xt-primary);
    border-color: var(--xt-primary-line);
    color: white;
}

/* Legacy administration screens use the same tokens without changing their controls. */
:root:has(.xt-ui-subscriptions) {
    --font-sans: var(--xt-font);
    --bg-page: var(--xt-bg);
    --bg-card: var(--xt-surface);
    --border-color: var(--xt-line);
    --text-heading: var(--xt-text);
    --text-primary: var(--xt-text);
    --text-secondary: var(--xt-muted);
    --text-link: var(--xt-link);
    --status-active: var(--xt-success);
    --status-active-bg: var(--xt-success-bg);
    --status-pastdue: var(--xt-warning);
    --status-pastdue-bg: var(--xt-warning-bg);
    --status-canceled: var(--xt-danger);
    --status-canceled-bg: var(--xt-danger-bg);
}
body .admin-container.xt-ui-subscriptions { max-width: var(--xt-width); padding-inline: var(--xt-gutter); }
body .xt-ui-subscriptions .filter-bar { flex-wrap: wrap; }
body .xt-ui-subscriptions .pagination-btn { background: var(--xt-raised); color: var(--xt-link); }
body .xt-ui-subscriptions .action-links .btn-cancel { color: var(--xt-danger); }
body .xt-ui-subscriptions .alert-success { background: var(--xt-success-bg); color: var(--xt-success); border-color: var(--xt-success-line); }
body .xt-ui-subscriptions .alert-danger { background: var(--xt-danger-bg); color: var(--xt-danger); border-color: var(--xt-danger-line); }

:root:has(.xt-ui-reviews) {
    --bg-color: var(--xt-bg);
    --surface-color: var(--xt-surface);
    --primary-color: var(--xt-primary);
    --primary-color-light: var(--xt-primary-hover);
    --danger-color: var(--xt-danger-bg);
    --danger-color-light: var(--xt-danger-line);
    --text-color: var(--xt-text);
    --text-secondary-color: var(--xt-muted);
    --border-color: var(--xt-line);
    --success-color: var(--xt-success-bg);
    --warning-color: var(--xt-warning);
    --border-radius: var(--xt-panel-radius);
}
body:has(.xt-ui-reviews) :is(.admin-header, .content-section) { border: 1px solid var(--xt-line); box-shadow: none; }
body:has(.xt-ui-reviews) .content-section thead th { background: var(--xt-raised); color: var(--xt-muted); }

body:has(.invoice-check) .panel-card,
body:has(.invoice-check) .stat-card {
    background: var(--xt-surface) !important;
    border: 1px solid var(--xt-line);
    border-radius: var(--xt-panel-radius);
    box-shadow: none;
}
body:has(.invoice-check) .tool-input { background: var(--xt-input); color: var(--xt-text); border-color: var(--xt-control); }
body:has(.invoice-check) .stat-card.active { border-color: var(--xt-primary-line); background: var(--xt-tint) !important; }
body:has(.invoice-check) .panel-card .btn-info { background: var(--xt-primary) !important; border-color: var(--xt-primary-line); color: white; }
body:has(.invoice-check) .panel-card .btn-info:hover { background: var(--xt-primary-hover) !important; }
body:has(.invoice-check) .table-dark {
    --bs-table-bg: var(--xt-surface);
    --bs-table-color: var(--xt-text);
    --bs-table-hover-bg: var(--xt-tint);
    --bs-table-border-color: var(--xt-line);
    background: var(--xt-surface);
    color: var(--xt-text);
}
body:has(.invoice-check) .table-dark thead th { background: var(--xt-raised); color: var(--xt-muted); }
body:has(.invoice-check) .table-hover tbody tr:hover { background-color: var(--xt-tint) !important; }
body .xt-ui-finance-login .card { background: var(--xt-surface); border-color: var(--xt-line); border-radius: var(--xt-panel-radius); box-shadow: none; }
body .xr-login-card { background: var(--xt-surface); border-color: var(--xt-line); border-radius: var(--xt-panel-radius); box-shadow: none; }
body .xr-login-card .xr-button.primary { background: var(--xt-primary); color: white; border-color: var(--xt-primary-line); }
body .bp-finance-nav { background: var(--xt-chrome); border-color: var(--xt-line); }

/* Customer dashboard and checkout use the same surfaces and readable state colors. */
:root:has(.dashboard_contents, .service-dashboard) {
    --aurora-bg: var(--xt-bg);
    --aurora-panel: var(--xt-surface);
    --aurora-border: var(--xt-line);
    --aurora-text-primary: var(--xt-text);
    --aurora-text-secondary: var(--xt-muted);
    --aurora-accent-primary: var(--xt-link);
    --aurora-accent-secondary: var(--xt-warning);
    --eclipse-bg: var(--xt-bg);
    --eclipse-card-bg: var(--xt-surface);
    --eclipse-border: var(--xt-line);
    --eclipse-text-primary: var(--xt-text);
    --eclipse-text-secondary: var(--xt-muted);
    --eclipse-text-label: var(--xt-muted);
}
body :is(.section.bg-blue-waves:has(.dashboard_contents), .checkout-page) { background: var(--xt-bg); }
body :is(.checkout-page .checkout-main, .checkout-page .order-summary-card,
         .manual-payment-page .card .card-body, .amazon-page .card .card-body) {
    background: var(--xt-surface);
    border-color: var(--xt-line);
    border-radius: var(--xt-panel-radius);
}
body :is(.manual-payment-page, .amazon-page) :is(.payment-method-intro, .voucher-method-intro, .payment-source-links a) {
    background: var(--xt-raised);
    border-color: var(--xt-line);
}
body :is(.manual-payment-page, .amazon-page) :is(.voucher-submit, .manual-payment-submit) {
    background: var(--xt-primary);
    border-color: var(--xt-primary-line);
    color: white;
}

@media (max-width: 600px) {
    :root { --xt-gutter: 10px; }
    body .xt-ui-subscriptions .pagination-controls { gap: 8px; flex-wrap: wrap; }
}