/* Theme and narrow-screen refinements loaded after each page's local CSS. */
:root {
    --color-surface-alt: #f8f9fc;
    --color-surface-muted: #f3f4f6;
    --color-surface-hover: #eef5f0;
    --color-input-bg: #fff;
    color-scheme: light;
}

/* ── Theme control ───────────────────────────────────────────────────── */
.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    cursor: pointer;
    transition-property: background-color, border-color, scale;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
}
.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.28);
}
.theme-toggle:active { scale: 0.96; }
.theme-toggle__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    scale: 0.25;
    filter: blur(4px);
    transition-property: opacity, scale, filter;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
.theme-toggle__icon svg { width: 19px; height: 19px; }
.theme-toggle__icon--moon {
    opacity: 1;
    scale: 1;
    filter: blur(0);
}
html[data-theme="dark"] .theme-toggle__icon--moon {
    opacity: 0;
    scale: 0.25;
    filter: blur(4px);
}
html[data-theme="dark"] .theme-toggle__icon--sun {
    opacity: 1;
    scale: 1;
    filter: blur(0);
}
.theme-toggle--floating {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    z-index: 400;
    background: rgba(8, 25, 47, 0.62);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
}

/* ── Dark palette ────────────────────────────────────────────────────── */
html[data-theme="dark"] {
    --color-primary: color-mix(in srgb, var(--color-primary-light) 45%, white);
    --color-accent: color-mix(in srgb, #46AC66 82%, white);
    --color-accent-hover: color-mix(in srgb, #46AC66 68%, white);
    --color-accent-subtle: rgba(70, 172, 102, 0.18);

    --color-success: color-mix(in srgb, #2e7d32 64%, white);
    --color-success-bg: rgba(70, 172, 102, 0.16);
    --color-success-border: rgba(70, 172, 102, 0.34);
    --color-warning: color-mix(in srgb, #e65100 58%, white);
    --color-warning-bg: rgba(230, 81, 0, 0.16);
    --color-warning-border: rgba(230, 81, 0, 0.34);
    --color-error: color-mix(in srgb, #dc2626 62%, white);
    --color-error-bg: rgba(220, 38, 38, 0.16);
    --color-error-border: rgba(220, 38, 38, 0.34);
    --color-info: color-mix(in srgb, #1565c0 58%, white);
    --color-info-bg: rgba(21, 101, 192, 0.18);

    --color-bg: color-mix(in srgb, var(--color-primary-dark) 42%, black);
    --color-surface: color-mix(in srgb, var(--color-primary-dark) 76%, black);
    --color-surface-alt: color-mix(in srgb, var(--color-primary) 19%, var(--color-surface));
    --color-surface-muted: color-mix(in srgb, white 7%, var(--color-surface));
    --color-surface-hover: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
    --color-input-bg: color-mix(in srgb, black 14%, var(--color-surface));
    --chart-grid-color: rgba(255, 255, 255, 0.16);
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.16);
    --color-text: color-mix(in srgb, white 88%, var(--color-primary-light));
    --color-text-primary: color-mix(in srgb, white 92%, var(--color-primary-light));
    --color-text-secondary: color-mix(in srgb, white 66%, var(--color-primary-light));
    --color-text-muted: color-mix(in srgb, white 46%, var(--color-primary-light));
    --status-disc-offline: color-mix(in srgb, white 34%, var(--color-surface));

    --color-sunsynk-bg: rgba(21, 101, 192, 0.18);
    --color-sunsynk-text: color-mix(in srgb, #1a5fa0 52%, white);
    --color-sunsynk-border: rgba(147, 197, 253, 0.32);
    --color-solarman-bg: rgba(230, 81, 0, 0.16);
    --color-solarman-text: color-mix(in srgb, #b37300 52%, white);
    --color-solarman-border: rgba(253, 186, 116, 0.32);
    --color-deye-bg: rgba(15, 118, 110, 0.18);
    --color-deye-text: color-mix(in srgb, #0f766e 48%, white);
    --color-deye-border: rgba(94, 234, 212, 0.30);
    --color-sma-bg: rgba(185, 28, 28, 0.18);
    --color-sma-text: color-mix(in srgb, #b91c1c 48%, white);
    --color-sma-border: rgba(252, 165, 165, 0.30);

    --color-warning-subtle: rgba(230, 81, 0, 0.19);
    --color-error-subtle: rgba(220, 38, 38, 0.19);
    --color-info-subtle: rgba(21, 101, 192, 0.19);
    --color-primary-subtle: rgba(122, 174, 227, 0.14);
    --card-bg: linear-gradient(180deg, var(--color-surface-alt), var(--color-surface));
    --card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 12px 32px -12px rgba(0, 0, 0, 0.55);
    --card-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 42px -12px rgba(0, 0, 0, 0.65);
    --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 24px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 18px 42px rgba(0, 0, 0, 0.38);
    --page-tint:
        radial-gradient(ellipse 800px 400px at 10% 0%, rgba(70, 172, 102, 0.07), transparent 60%),
        radial-gradient(ellipse 600px 300px at 90% 100%, rgba(26, 82, 150, 0.12), transparent 60%);

    --sig-offline-bg: rgba(107, 114, 128, 0.20);
    --sig-fault-bg: rgba(220, 38, 38, 0.18);
    --sig-warning-bg: rgba(217, 119, 6, 0.18);
    --sig-info-bg: rgba(37, 99, 235, 0.18);
    --sig-event-bg: rgba(124, 58, 237, 0.20);
    --sig-normal-bg: rgba(22, 163, 74, 0.18);
    --sig-escalate-bg: rgba(234, 88, 12, 0.18);
    color-scheme: dark;
}

html[data-theme="dark"] body {
    background-color: var(--color-bg);
    color: var(--color-text);
}
html[data-theme="dark"] .header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-dark) 62%, black), var(--color-primary-dark));
}
html[data-theme="dark"] .sidebar { background: color-mix(in srgb, var(--color-primary-dark) 78%, black); }
html[data-theme="dark"] :is(.login-page, body.auth-page) {
    background:
        radial-gradient(ellipse 900px 420px at 50% 100%, rgba(70, 172, 102, 0.10), transparent 65%),
        radial-gradient(ellipse 700px 360px at 85% 0%, rgba(26, 82, 150, 0.16), transparent 60%),
        linear-gradient(170deg, color-mix(in srgb, var(--color-primary-dark) 34%, black), color-mix(in srgb, var(--color-primary-dark) 58%, black));
}
html[data-theme="dark"] .wizard-detail { background: var(--color-bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }
html[data-theme="dark"] ::selection { background: var(--color-accent-subtle); color: var(--color-text-primary); }

html[data-theme="dark"] :is(input, select, textarea) {
    background-color: var(--color-input-bg);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
html[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--color-text-muted); }
html[data-theme="dark"] :is(.auth-card, .login-card, .card-modern) { background: var(--card-bg); }
html[data-theme="dark"] :is(
    .card-modern__header,
    .status-card-header,
    .data-table th,
    .chart-header,
    .panel-head,
    .plant-block-head,
    .detail-row > td,
    .stage-head,
    .step-card-head,
    .detail-topbar,
    .remove-modal-actions,
    .settings-flow,
    .users-invite,
    .users-edit-cell,
    .rules-console .ann.is-locked,
    .rules-console .tval.clear input
) { background: var(--color-surface-alt); }
html[data-theme="dark"] :is(
    .data-table,
    .remove-modal,
    .seg,
    .seg button,
    .banner,
    .step-card,
    .role-card,
    .settings-card,
    .input-mock,
    .users-invite-row input
) { background: var(--color-surface); }
html[data-theme="dark"] :is(
    .filter-search-btn,
    .data-table-compact tbody tr:nth-child(even),
    .unit-suffix,
    .device-card-icon,
    .inv-chip,
    .review-serial,
    .status-chip.off,
    .u-badge.inactive
) { background: var(--color-surface-muted); }
html[data-theme="dark"] :is(
    .filter-search-btn:hover,
    .more-btn:hover,
    .page-btn:hover,
    .dropdown-item:hover,
    .kebab-btn:hover,
    .dropdown.open .kebab-btn,
    .plant-block-head:hover,
    .seg button:hover,
    .rules-console .tier:hover,
    .rules-console .serial-tab:hover,
    .user-menu-item:hover,
    tbody tr.row-expandable:hover,
    .data-table tbody tr:hover,
    .data-table-compact tbody tr:hover
) { background: var(--color-surface-hover) !important; }

html[data-theme="dark"] :is(
    .data-table th,
    .data-table td,
    .data-table-compact th + th,
    .data-table-compact td + td,
    .filter-bar,
    .chart-legend,
    .batt-inverter-block:not(:first-child),
    .dropdown-menu,
    .dropdown-divider,
    .panel-tools select,
    .sort-dir-btn,
    .page-btn,
    .filter-row input,
    .filter-row select,
    .date-input,
    .chart-nav-btn,
    .form-row input,
    .form-row select
) { border-color: var(--color-border-strong); }

html[data-theme="dark"] :is(
    .status-count-label,
    .data-table th,
    .chart-tab,
    .legend-entry,
    .stat-item-label,
    .batt-inverter-heading .inv-name,
    .alerts-controls label,
    .page-info,
    .legend-note strong
) { color: var(--color-text-secondary); }
html[data-theme="dark"] :is(.filter-search, .filter-search-btn, .chart-nav-btn) { color: var(--color-text); }
html[data-theme="dark"] .chart-loading { background: color-mix(in srgb, var(--color-surface) 88%, transparent); }
html[data-theme="dark"] :is(.skeleton-bar, .skeleton-circle) {
    background: linear-gradient(90deg, var(--color-surface-muted) 25%, var(--color-surface-alt) 50%, var(--color-surface-muted) 75%);
    background-size: 800px 100%;
}
html[data-theme="dark"] :is(.power-bar, .chart-spinner, .spinner) { border-color: var(--color-border-strong); }
html[data-theme="dark"] .power-bar { background: var(--color-border-strong); }
html[data-theme="dark"] .chart-spinner,
html[data-theme="dark"] .spinner { border-top-color: var(--color-accent); }
html[data-theme="dark"] .status-icon-unknown { background: var(--color-surface); }

html[data-theme="dark"] :is(.user-menu-dropdown, .dropdown-menu) {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
html[data-theme="dark"] .app-footer-logo img { filter: brightness(0) invert(1); opacity: 0.82; }
html[data-theme="dark"] :is(.vendor-card-logo img, .vendor-logo img, .powered-by img) {
    outline: 1px solid rgba(255, 255, 255, 0.1);
    outline-offset: -1px;
    /* Brand rasters carry their own baked-in white plate. Rounding the edge
       makes that plate read as a deliberate chip instead of a light leak. */
    border-radius: 6px;
}

html[data-theme="dark"] :is(.btn-primary, .mode-toggle button.active, .seg button.active, .rules-console .tier.active, .rules-console .serial-tab.active) {
    background: color-mix(in srgb, var(--color-primary-dark) 68%, var(--color-primary-light));
    border-color: color-mix(in srgb, var(--color-primary-light) 54%, var(--color-primary-dark));
    color: #fff;
}
html[data-theme="dark"] :is(.btn, .btn-outline) { border-color: var(--color-border-strong); }
html[data-theme="dark"] :is(.btn:hover, .btn-outline:hover) {
    background: var(--color-surface-muted);
    color: var(--color-text-primary);
}
html[data-theme="dark"] .btn-primary:hover {
    background: color-mix(in srgb, var(--color-primary-dark) 52%, var(--color-primary-light));
    color: #fff;
}
html[data-theme="dark"] :is(.btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-warn:hover) { color: #fff; }

html[data-theme="dark"] :is(.pill-danger, .sev-select.sev-critical) { background: rgba(220, 38, 38, 0.18); color: var(--color-error); }
html[data-theme="dark"] :is(.pill-warn, .sev-select.sev-warning, .required-tag, .u-badge.pending, .users-edit-note) { background: rgba(230, 81, 0, 0.18); color: var(--color-warning); }
html[data-theme="dark"] :is(.pill-ok, .empty-icon, .u-badge.active) { background: rgba(70, 172, 102, 0.18); color: var(--color-success); }
html[data-theme="dark"] :is(.pill-info, .sev-select.sev-info) { background: rgba(21, 101, 192, 0.20); color: var(--color-info); }
html[data-theme="dark"] .pill-neutral { background: var(--color-surface-muted); color: var(--color-text-secondary); }
html[data-theme="dark"] .master-callout { background: rgba(230, 81, 0, 0.12); color: var(--color-warning); }
html[data-theme="dark"] .role-card:has(input:checked) { background: var(--color-primary-subtle); }
html[data-theme="dark"] .toggle-slider::before,
html[data-theme="dark"] .rules-console .switch .sl::before { background: #fff; }
html[data-theme="dark"] :is(.error-msg, .msg.error) { color: var(--color-error); }
html[data-theme="dark"] .msg.success { color: var(--color-success); }
html[data-theme="dark"] .metric-value[style*="#133B6B"] { color: var(--color-primary) !important; }
html[data-theme="dark"] #nu-msg[style*="#1a7f37"] { color: var(--color-success) !important; }
html[data-theme="dark"] .tl-empty[style*="#dc2626"] { color: var(--color-error) !important; }

/* ── Narrow-screen layout ────────────────────────────────────────────── */
@media (max-width: 1024px) {
    body { overflow-x: hidden; }
    .app-layout,
    .main-content,
    .container,
    .page-content { min-width: 0; max-width: 100%; }
    .sidebar {
        width: min(82vw, 280px) !important;
        box-shadow: 18px 0 48px rgba(0, 0, 0, 0.28);
    }
    .nav-item { min-height: 48px; }
}

@media (max-width: 768px) {
    .header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 72px;
        padding: 12px 16px;
        gap: 10px;
    }
    .header-left { min-width: 0; gap: 8px; }
    .header-left > :not(.hamburger-btn) { min-width: 0; }
    .header-left > :is(div, span) { overflow: hidden; }
    .hamburger-btn {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        padding: 0;
    }
    .header-right { flex-wrap: nowrap; gap: 6px; }
    #shared-header-right-slot { display: contents; }
    .header-title,
    .welcome-greeting,
    .plant-title {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1rem;
    }
    .header-title svg { display: none; }
    .header-sub,
    .welcome-date {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.75rem;
    }
    .header-meta,
    .kbd-hint { display: none; }
    .refresh-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        padding: 0;
        justify-content: center;
        font-size: 0;
    }
    .refresh-btn .refresh-icon { font-size: 1rem; }
    .user-menu-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        border-radius: 6px;
    }
    .user-menu-btn svg { width: 18px; height: 18px; }
    .user-menu-name,
    .user-menu-role { display: none; }
    .user-menu-dropdown {
        position: fixed;
        top: 68px;
        right: 12px;
        max-width: calc(100vw - 24px);
    }

    .page-content { padding: 18px 16px; }
    .app-footer { padding: 20px 16px max(20px, env(safe-area-inset-bottom)); }
    .app-footer-logo img { max-width: min(183px, 70vw); height: auto; }

    :is(button, .btn, input, select, textarea, a.nav-item, .nav-sub-item) { min-height: 44px; }
    :is(input, select, textarea) { max-width: 100%; font-size: 1rem; }

    :is(.table-wrap, .table-scroll, .alerts-table-wrap, .plant-table-wrap, .reporting-gaps-scroll, #history-content) {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }
    table { max-width: 100%; }

    .toast-container {
        left: 12px;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
    }
    .toast { width: 100%; max-width: none; }

    /* Home */
    .status-overview { padding: 12px; gap: 12px; }
    .status-card-body { padding: 18px 16px; gap: 16px; }
    .status-card-body .status-counts {
        width: 100%;
        margin: 0;
        padding: 16px 0 0;
        gap: 12px 16px;
    }
    .tab-bar,
    .tab-content-area { margin-left: 12px; margin-right: 12px; }
    .filter-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        padding: 14px;
    }
    .filter-select,
    .filter-search-wrap,
    .filter-search { width: 100%; min-width: 0; }

    /* Active alerts and history */
    .panel-head { padding: 14px 16px; }
    .panel-title { flex: 1 1 auto; }
    .tally { flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
    .panel-tools {
        width: 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 44px;
        gap: 8px;
    }
    .panel-tools #plant-filter { grid-column: 1 / -1; }
    .panel-tools select { width: 100%; min-width: 0; }
    #active-incidents-content, #silences-content { padding: 12px; }
    .plant-block-head { padding: 12px; flex-wrap: wrap; }
    .plant-block-actions { flex: 1 1 100%; margin-left: 24px; }
    .detail-top { flex-direction: column; gap: 16px; }
    .detail-info {
        flex: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: 0 0 16px;
    }
    .detail-wrap { padding: 16px; }
    .filter-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 10px;
    }
    .filter-row > :is(input, select, button) { width: 100%; min-width: 0; }
    .filter-row .pagination {
        grid-column: 1 / -1;
        margin-left: 0 !important;
        justify-content: center;
        flex-wrap: wrap;
    }
    #history-content { max-height: none; }

    /* Analysis */
    .toolbar { padding: 14px; align-items: stretch; }
    .toolbar .mode-toggle { width: 100%; }
    .toolbar .mode-toggle button { flex: 1; }
    .toolbar-row {
        width: 100%;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px 10px;
    }
    .toolbar select,
    .toolbar input[type="date"] { width: 100%; min-width: 0; }
    .toolbar #btn-compare { width: 100%; justify-content: center; }
    .metric-grid { grid-template-columns: 1fr; gap: 12px; }
    .chart-wrapper { height: 220px; }

    /* Onboarding */
    .wizard-shell,
    .wizard-split,
    .wizard-split > *,
    .wizard-rail,
    .wizard-detail,
    #onboard-form,
    .panel-host,
    .step-card,
    .step-card-head,
    .step-card-body { width: 100%; min-width: 0; max-width: 100%; }
    .wizard-split { grid-template-columns: minmax(0, 1fr); }
    .stepper {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        scroll-snap-type: x proximity;
    }
    .step { scroll-snap-align: start; min-height: 44px; }
    .detail-topbar,
    .detail-topbar > div:first-child { min-width: 0; max-width: 100%; }
    .detail-topbar { width: 100%; align-items: flex-start; }
    .detail-topbar .seg { width: 100%; }
    .detail-topbar .seg button { flex: 1; }
    .step-card-body { padding: 16px; }
    .wizard-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .remove-modal { max-height: calc(100dvh - 32px); overflow-y: auto; }

    /* Settings */
    .settings-stack,
    .stage-body,
    .reg-grid,
    .reg,
    .crow { min-width: 0; max-width: 100%; }
    .settings-stack { padding-bottom: 48px; }
    .stage-head { padding: 14px 16px; }
    .stage-body { padding: 16px; }
    .role-cards { grid-template-columns: 1fr; }
    .users-invite-row { flex-direction: column; }
    .users-invite-row .btn { width: 100%; justify-content: center; }
    .users-edit-foot { flex-wrap: wrap; }

    /* Plant detail */
    .back-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        font-size: 0;
    }
    .back-btn svg { width: 18px; height: 18px; }
    .plant-header-info { min-width: 0; flex-wrap: nowrap; }
    .plant-header-info > :not(.plant-title) { display: none !important; }
    .plant-tabs { margin: 6px 12px 12px; overflow-x: auto; }
    .plant-tab { flex: 1 0 auto; }
    .chart-section { margin: 0 12px 14px; }
    .chart-header { padding: 14px; }
    .chart-tabs { width: 100%; }
    .chart-tab { flex: 1; padding-left: 10px; padding-right: 10px; }
    .chart-controls { width: 100%; flex-wrap: wrap; }
    .chart-controls > .chart-nav-btn:first-child { order: 1; }
    .chart-controls > .date-input { order: 2; flex: 1 1 150px; min-width: 0; }
    .chart-controls > .chart-nav-btn:last-child { order: 3; }
    .chart-controls > .chart-nav-btn:not(:first-child):not(:last-child) { order: 4; }
    .chart-controls > .chart-fetch-btn { order: 5; margin-left: 0; }
    .chart-body { padding: 14px; }
    .chart-legend { padding: 10px 14px; }
    .info-panels { margin-left: 12px; margin-right: 12px; }
    #tab-rules,
    #tab-manage { margin-left: 12px; margin-right: 12px; }
    .settings-flow { padding: 14px; }
    .rules-console .stage-head,
    .rules-console .stage-body { padding-left: 14px; padding-right: 14px; }
    .rules-console .tier { padding-left: 4px; padding-right: 4px; }
    .rules-console .tgrid { grid-template-columns: 1fr; }
    .rules-console .action-row { align-items: stretch; flex-direction: column; }
    .rules-console .action-row .btn { justify-content: center; }
}

@media (max-width: 480px) {
    .header { min-height: 64px; padding: 10px 12px; }
    .header-sub,
    .welcome-date { display: none; }
    .page-content { padding: 14px 12px; }
    .status-overview { padding: 10px; }
    .status-card-body .status-counts { gap: 10px 8px; }
    .filter-row { grid-template-columns: 1fr; }
    .filter-row .pagination { grid-column: 1; }
    .panel-title { flex-basis: 100%; }
    .tally { justify-content: flex-start; }
    .timeline-h { padding-bottom: 10px; }
    .wizard-footer { gap: 8px; }
    .wizard-footer .btn { padding-left: 14px; padding-right: 14px; }
    .auth-card,
    .login-card { padding: 24px 20px; }
    .auth-page .row { flex-wrap: wrap; gap: 12px; }
    .auth-page .row button { width: 100%; justify-content: center; }
    .login-stage { min-height: 100dvh; }
    .signin-btn { width: 100%; justify-content: center; }
    .rules-console .tier .t-name { font-size: 0.82em; }
}

@media print {
    html[data-theme="dark"] {
        --color-primary: #133B6B;
        --color-accent: #46AC66;
        --color-accent-hover: #3d9659;
        --color-accent-subtle: rgba(70, 172, 102, 0.15);
        --color-success: #2e7d32;
        --color-success-bg: #d4edda;
        --color-success-border: #b7d7be;
        --color-warning: #e65100;
        --color-warning-bg: #fef4e5;
        --color-warning-border: #fcd9a8;
        --color-error: #dc2626;
        --color-error-bg: #f8d7da;
        --color-error-border: #f1aeb5;
        --color-info: #1565c0;
        --color-info-bg: #e3f1fc;
        --color-bg: #fff;
        --color-surface: #fff;
        --color-surface-alt: #f8f9fc;
        --color-surface-muted: #f3f4f6;
        --color-surface-hover: #eef5f0;
        --color-input-bg: #fff;
        --chart-grid-color: rgba(0, 0, 0, 0.04);
        --color-border: rgba(19, 59, 107, 0.06);
        --color-border-strong: rgba(19, 59, 107, 0.18);
        --color-text: #333;
        --color-text-primary: #133B6B;
        --color-text-secondary: #6b7280;
        --color-text-muted: #999;
        --card-bg: #fff;
        --card-shadow: none;
        --card-shadow-hover: none;
        --page-tint: none;
        color-scheme: light !important;
    }
    html[data-theme="dark"] .app-footer-logo img { filter: none; opacity: 1; }
    html[data-theme="dark"] :is(.vendor-card-logo img, .vendor-logo img, .powered-by img) {
        outline-color: rgba(0, 0, 0, 0.1);
    }
    .theme-toggle { display: none !important; }
}