/* ============================================================================
   SPURA — Glass / Dark Premium UI Layer
   Loaded last — overrides base styles when data-theme="dark" is active.
   Concept: Spura Glass OS — floating surfaces, blur depth, iOS-grade polish.
   ============================================================================ */
/* ── Motion tokens ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* ── Body: light glass canvas ─────────────────────────────────────────────── */
:root:not([data-theme='dark']) body.app-body {
    background:
        radial-gradient(circle at 18% 0%, rgba(var(--brand-500-rgb), 0.08), transparent 26%),
        radial-gradient(circle at 84% 8%, var(--glass-blue-08), transparent 24%),
        linear-gradient(180deg, var(--sp-bg-0) 0%, var(--sp-bg-1) 100%);
    background-attachment: fixed;
    min-height: 100dvh;
}
:root:not([data-theme='dark']) body.ops-page-surface .main-content {
    background:
        radial-gradient(circle at 18% 0%, rgba(var(--brand-500-rgb), 0.08), transparent 28%),
        radial-gradient(circle at 84% 10%, var(--glass-blue-08), transparent 26%),
        linear-gradient(180deg, var(--sp-bg-0) 0%, var(--sp-bg-1) 100%);
}
:root:not([data-theme='dark']) .sidebar,
:root:not([data-theme='dark']) .topbar,
:root:not([data-theme='dark']) .mhp-header,
:root:not([data-theme='dark']) .mas-header {
    background: var(--glass-shell-bg);
    border-color: var(--glass-shell-border);
    box-shadow: var(--glass-shell-shadow);
    backdrop-filter: var(--glass-filter-shell);
    -webkit-backdrop-filter: var(--glass-filter-shell);
}
:root:not([data-theme='dark']) .sidebar {
    border-right: 1px solid var(--glass-shell-border);
}
:root:not([data-theme='dark']) .sidebar::before {
    background: linear-gradient(180deg, rgba(var(--brand-500-rgb), 0.04) 0%, transparent 100%);
}
:root:not([data-theme='dark']) .sidebar-brand,
:root:not([data-theme='dark']) .sidebar-footer,
:root:not([data-theme='dark']) .card-header,
:root:not([data-theme='dark']) .data-panel-header {
    border-color: var(--glass-panel-border);
}
:root:not([data-theme='dark']) .sidebar-brand-logo {
    filter: none;
    opacity: 1;
}
:root:not([data-theme='dark']) .sidebar-footer .avatar {
    background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
    box-shadow: 0 2px 6px rgba(var(--brand-500-rgb), .3);
}
:root:not([data-theme='dark']) .sidebar-link-badge {
    background: var(--brand-500);
    color: var(--bg-surface);
}
:root:not([data-theme='dark']) .sidebar-release {
    background: var(--glass-control-bg);
    border-color: var(--glass-control-border);
}
:root:not([data-theme='dark']) .sidebar-release:hover {
    background: var(--glass-white-78);
    border-color: var(--glass-white-60);
}
:root:not([data-theme='dark']) .sidebar-release-glyph {
    color: var(--brand-400);
}
:root:not([data-theme='dark']) .sidebar-release-version {
    color: var(--text-secondary);
}
:root:not([data-theme='dark']) .sidebar-release-name {
    color: var(--text-muted);
}
:root:not([data-theme='dark']) .sidebar-brand-name,
:root:not([data-theme='dark']) .sidebar-link.active,
:root:not([data-theme='dark']) .sidebar-group-toggle.group-active,
:root:not([data-theme='dark']) .sidebar-child-link.active {
    color: var(--text-primary);
}
:root:not([data-theme='dark']) .sidebar-collapse-btn,
:root:not([data-theme='dark']) .sidebar-link,
:root:not([data-theme='dark']) .sidebar-group-toggle,
:root:not([data-theme='dark']) .sidebar-child-link,
:root:not([data-theme='dark']) .sidebar-section-title {
    color: var(--text-secondary);
}
:root:not([data-theme='dark']) .sidebar-link,
:root:not([data-theme='dark']) .sidebar-group-toggle,
:root:not([data-theme='dark']) .sidebar-child-link {
    border-radius: var(--radius-md);
}
:root:not([data-theme='dark']) .sidebar-link:hover,
:root:not([data-theme='dark']) .sidebar-group-toggle:hover,
:root:not([data-theme='dark']) .sidebar-child-link:hover,
:root:not([data-theme='dark']) .topbar-action-btn:hover {
    background: var(--glass-control-bg);
    color: var(--text-primary);
}
:root:not([data-theme='dark']) .sidebar-link.active,
:root:not([data-theme='dark']) .sidebar-group-toggle.group-active,
:root:not([data-theme='dark']) .sidebar-child-link.active {
    background: var(--glass-accent-bg);
    border: 1px solid var(--glass-accent-border);
    box-shadow: var(--glass-accent-shadow);
}
:root:not([data-theme='dark']) .sidebar-link.active::before,
:root:not([data-theme='dark']) .sidebar-child-link.active::before {
    display: none;
}
:root:not([data-theme='dark']) .card,
:root:not([data-theme='dark']) .stat-card,
:root:not([data-theme='dark']) .audit-card,
:root:not([data-theme='dark']) .ops-page-surface .page-header,
:root:not([data-theme='dark']) .ops-metric,
:root:not([data-theme='dark']) .filter-bar,
:root:not([data-theme='dark']) .data-panel,
:root:not([data-theme='dark']) .mhp-pill,
:root:not([data-theme='dark']) .mhp-module-row,
:root:not([data-theme='dark']) .mas-card,
:root:not([data-theme='dark']) .mas-segmented__option,
:root:not([data-theme='dark']) .mas-action-btn,
:root:not([data-theme='dark']) .mas-link-row {
    background: var(--glass-panel-bg);
    border-color: var(--glass-panel-border);
    box-shadow: var(--glass-panel-shadow);
    backdrop-filter: var(--glass-filter-panel);
    -webkit-backdrop-filter: var(--glass-filter-panel);
}
:root:not([data-theme='dark']) .ops-page-surface .card,
:root:not([data-theme='dark']) .ops-page-surface .stat-card {
    background: var(--glass-white-84);
    border-color: var(--glass-ice-72);
    box-shadow: 0 10px 24px var(--glass-ink-06);
    backdrop-filter: blur(10px) saturate(122%);
    -webkit-backdrop-filter: blur(10px) saturate(122%);
}
:root:not([data-theme='dark']) .card:hover,
:root:not([data-theme='dark']) .stat-card:hover,
:root:not([data-theme='dark']) .mhp-module-row:hover {
    box-shadow: var(--glass-panel-hover-shadow);
}
:root:not([data-theme='dark']) .ops-page-surface .page-header {
    position: relative;
    overflow: hidden;
    padding: 1rem 1.125rem;
    border: 1px solid var(--glass-panel-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 12px 28px var(--glass-ink-08);
    backdrop-filter: blur(10px) saturate(122%);
    -webkit-backdrop-filter: blur(10px) saturate(122%);
}
:root:not([data-theme='dark']) .ops-page-surface .page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    background: var(--glass-floating-highlight);
    pointer-events: none;
    opacity: 0.34;
}
:root:not([data-theme='dark']) .ops-page-surface .page-header > * {
    position: relative;
    z-index: 1;
}
:root:not([data-theme='dark']) .ops-page-surface .filter-bar {
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 24px var(--glass-ink-06);
    backdrop-filter: var(--glass-filter-panel);
    -webkit-backdrop-filter: var(--glass-filter-panel);
}
:root:not([data-theme='dark']) .ops-page-surface .card .card,
:root:not([data-theme='dark']) .ops-page-surface .card .stat-card {
    background: var(--glass-white-92);
    border-color: var(--glass-ice-80);
    box-shadow: 0 8px 20px var(--glass-ink-05);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
}
:root:not([data-theme='dark']) .mhp-module-row--active,
:root:not([data-theme='dark']) .mhp-module-group.is-open .mhp-module-row--button,
:root:not([data-theme='dark']) .mas-segmented__option.is-active,
:root:not([data-theme='dark']) .mas-action-btn--primary {
    background: var(--glass-accent-bg);
    border-color: var(--glass-accent-border);
    box-shadow: var(--glass-accent-shadow);
}
:root:not([data-theme='dark']) .page-header-actions .btn-secondary,
:root:not([data-theme='dark']) .page-header-actions .btn-ghost,
:root:not([data-theme='dark']) .page-header-actions .btn-danger-outline {
    background: var(--glass-white-72);
    border-color: var(--glass-ice-68);
    box-shadow: 0 6px 14px var(--glass-ink-05);
    backdrop-filter: blur(8px) saturate(118%);
    -webkit-backdrop-filter: blur(8px) saturate(118%);
}
:root:not([data-theme='dark']) .page-header-actions .btn-danger-outline {
    color: var(--danger-600);
    border-color: var(--glass-danger-light-94);
}
:root:not([data-theme='dark']) .page-header-actions .btn-secondary:hover,
:root:not([data-theme='dark']) .page-header-actions .btn-ghost:hover,
:root:not([data-theme='dark']) .page-header-actions .btn-danger-outline:hover:not(:disabled) {
    background: var(--glass-white-90);
    border-color: var(--glass-slate-30);
}
:root:not([data-theme='dark']) .page-header-actions .btn-danger-outline:hover:not(:disabled) {
    background: var(--danger-50);
    border-color: var(--danger-300);
    color: var(--danger-600);
}
:root:not([data-theme='dark']) .audit-issue {
    background: var(--sp-glass-subtle-bg);
    border-color: var(--sp-glass-subtle-border);
    backdrop-filter: var(--sp-glass-filter-light-soft);
    -webkit-backdrop-filter: var(--sp-glass-filter-light-soft);
}
:root:not([data-theme='dark']) .card-footer {
    border-top-color: var(--glass-panel-border);
    background: var(--glass-ice-56);
}
:root:not([data-theme='dark']) .mhp-module-children,
:root:not([data-theme='dark']) .mobile-bottom-nav {
    background: var(--glass-floating-bg);
    border-color: var(--glass-floating-border);
    box-shadow: var(--glass-floating-shadow);
    backdrop-filter: var(--glass-filter-floating);
    -webkit-backdrop-filter: var(--glass-filter-floating);
}
:root:not([data-theme='dark']) .topbar-action-btn,
:root:not([data-theme='dark']) .mhp-logout-btn,
:root:not([data-theme='dark']) .mhp-close,
:root:not([data-theme='dark']) .mhp-settings-btn,
:root:not([data-theme='dark']) .mas-back {
    background: var(--glass-control-bg);
    border: 1px solid var(--glass-control-border);
    box-shadow: var(--glass-control-shadow);
    backdrop-filter: var(--glass-filter-control);
    -webkit-backdrop-filter: var(--glass-filter-control);
}
:root:not([data-theme='dark']) .topbar-action-btn {
    border-radius: var(--radius-lg);
}
:root:not([data-theme='dark']) .topbar-search-wrapper .form-input {
    background: var(--glass-white-72);
    border-color: var(--glass-ice-9);
    box-shadow:
        inset 0 1px 0 var(--glass-white-92),
        0 10px 24px var(--glass-ink-04);
}
:root:not([data-theme='dark']) .topbar-search-wrapper .form-input:focus {
    background: var(--glass-white-84);
    border-color: var(--glass-brand-42);
    box-shadow:
        0 0 0 4px rgba(var(--brand-500-rgb), 0.12),
        0 12px 28px var(--glass-ink-06);
}
:root:not([data-theme='dark']) .topbar-search-wrapper .search-kbd kbd {
    background: var(--glass-control-bg);
    border-color: var(--glass-control-border);
    color: var(--text-muted);
}
:root:not([data-theme='dark']) .topbar-toggle {
    color: var(--text-secondary);
}
:root:not([data-theme='dark']) .topbar-toggle:hover {
    background: var(--glass-control-bg);
    color: var(--text-primary);
}
:root:not([data-theme='dark']) .sidebar-collapse-btn {
    color: var(--text-secondary);
}
:root:not([data-theme='dark']) .sidebar-collapse-btn:hover {
    background: var(--glass-control-bg);
    color: var(--text-primary);
}
:root:not([data-theme='dark']) body.sidebar-collapsed .sidebar-group:hover > .sidebar-group-children,
:root:not([data-theme='dark']) body.sidebar-collapsed .sidebar-group:focus-within > .sidebar-group-children {
    background: var(--glass-floating-bg);
    border-color: var(--glass-floating-border);
    box-shadow: var(--glass-floating-shadow);
    backdrop-filter: var(--glass-filter-floating);
    -webkit-backdrop-filter: var(--glass-filter-floating);
}
:root:not([data-theme='dark']) .filter-chip-field .form-input {
    background: var(--glass-control-bg);
    border-color: var(--glass-control-border);
    box-shadow: var(--glass-control-shadow);
    backdrop-filter: var(--glass-filter-control);
    -webkit-backdrop-filter: var(--glass-filter-control);
}
:root:not([data-theme='dark']) .filter-chip-field .form-input:focus {
    background: var(--glass-white-86);
    border-color: var(--glass-brand-42);
    box-shadow:
        0 0 0 4px rgba(var(--brand-500-rgb), 0.12),
        var(--glass-control-shadow);
}
:root:not([data-theme='dark']) .form-input--static {
    background: var(--glass-ice-66);
    border-color: var(--glass-control-border);
    color: var(--text-secondary);
}
:root:not([data-theme='dark']) .data-count {
    background: var(--glass-control-bg);
    border: 1px solid var(--glass-control-border);
    color: var(--text-secondary);
    box-shadow: inset 0 1px 0 var(--glass-white-58);
}
:root:not([data-theme='dark']) .data-panel-header {
    border-bottom-color: var(--glass-ice-72);
}
:root:not([data-theme='dark']) .data-panel-header p,
:root:not([data-theme='dark']) .ops-metric-label,
:root:not([data-theme='dark']) .ops-metric p {
    color: var(--glass-ink-78);
}
:root:not([data-theme='dark']) .data-table thead th,
:root:not([data-theme='dark']) .premium-table th {
    background: var(--glass-ice-72);
}
@media (max-width: 720px) {
    :root:not([data-theme='dark']) .premium-table tbody tr {
        background: var(--glass-white-78);
        border-color: var(--glass-ice-88);
        box-shadow: 0 16px 32px var(--glass-ink-08);
        backdrop-filter: blur(22px) saturate(1.12);
        -webkit-backdrop-filter: blur(22px) saturate(1.12);
    }
}
/* ── Body: dark gradient canvas ───────────────────────────────────────────── */
[data-theme='dark'] body.app-body {
    background:
        radial-gradient(circle at 18% 0%, rgba(var(--brand-500-rgb), 0.14), transparent 32%),
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--info-500) 9%, transparent), transparent 28%),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--ink-950) 55%, transparent), transparent 42%),
        linear-gradient(180deg, var(--sp-bg-1) 0%, var(--sp-bg-0) 100%);
    background-attachment: fixed;
    min-height: 100dvh;
}
/* ── Sidebar: glass panel ─────────────────────────────────────────────────── */
[data-theme='dark'] .sidebar {
    background: var(--glass-ink-78);
    border-right: 1px solid var(--glass-white-08);
    backdrop-filter: blur(28px) saturate(var(--sp-saturate-strong));
    -webkit-backdrop-filter: blur(28px) saturate(var(--sp-saturate-strong));
    box-shadow: 8px 0 48px var(--glass-ink-32);
}
[data-theme='dark'] .sidebar::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--text-inverse) 6%, transparent) 0%, transparent 100%);
}
[data-theme='dark'] .sidebar-footer .avatar {
    background: linear-gradient(135deg, var(--sp-blue), var(--brand-300));
    box-shadow: 0 2px 8px var(--glass-blue-28);
}
[data-theme='dark'] .sidebar-link-badge {
    background: var(--glass-accent-bg);
    color: var(--bg-surface);
}
[data-theme='dark'] .sidebar-release {
    background: var(--glass-control-bg);
    border-color: var(--glass-control-border);
}
[data-theme='dark'] .sidebar-release:hover {
    background: var(--glass-white-09);
    border-color: var(--glass-white-12);
}
[data-theme='dark'] .sidebar-release-glyph {
    color: var(--sp-blue-2);
}
[data-theme='dark'] .sidebar-release-version {
    color: var(--glass-ice-76);
}
[data-theme='dark'] .sidebar-release-name {
    color: var(--glass-slate-82);
}
[data-theme='dark'] .sidebar-brand {
    border-bottom-color: var(--glass-white-07);
}
/* Logo: swap to white-ring variant so it's visible on the dark sidebar */
[data-theme='dark'] .sidebar-brand-logo img:not(.mhp-logo__img--dark) {
    content: url('/assets/ui/hub-spura-mark-light.svg');
}

[data-theme='dark'] .mhp-logo__img--light {
    display: none;
}

[data-theme='dark'] .mhp-logo__img--dark {
    display: block;
}
/* Sidebar nav — horizontal padding gives room for pills */
[data-theme='dark'] .sidebar-nav {
    padding: 0.875rem 0.625rem;
}
/* All sidebar interactive items: pill-shaped */
[data-theme='dark'] .sidebar-link,
[data-theme='dark'] .sidebar-group-toggle {
    border-radius: var(--radius-md);
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    transition:
        background var(--sp-transition-fast),
        color var(--sp-transition-fast),
        border-color var(--sp-transition-fast),
        box-shadow var(--sp-transition-fast);
}
[data-theme='dark'] .sidebar-child-link {
    border-radius: var(--radius-md);
    padding-left: 2.75rem;
    padding-right: 0.875rem;
    transition:
        background var(--sp-transition-fast),
        color var(--sp-transition-fast);
}
/* Active flat link — blue glow pill */
[data-theme='dark'] .sidebar-link.active {
    background: var(--glass-accent-bg);
    border: 1px solid var(--glass-accent-border);
    box-shadow: var(--glass-accent-shadow);
    color: var(--glass-accent-text);
    font-weight: 500;
}
/* Remove old left-bar indicator */
[data-theme='dark'] .sidebar-link.active::before {
    display: none;
}
/* Active child link */
[data-theme='dark'] .sidebar-child-link.active {
    background: var(--glass-blue-20);
    border: 1px solid var(--glass-blue-18);
    color: var(--glass-white-95);
    font-weight: 500;
}
[data-theme='dark'] .sidebar-child-link.active::before {
    display: none;
}
/* Active group toggle */
[data-theme='dark'] .sidebar-group-toggle.group-active {
    color: var(--glass-white-95);
    background: var(--glass-white-05);
}
[data-theme='dark'] .sidebar-group-toggle:hover {
    background: var(--glass-white-06);
    color: var(--glass-white-80);
}
[data-theme='dark'] .sidebar-link:hover {
    background: var(--glass-white-06);
    color: var(--glass-white-80);
}
[data-theme='dark'] .sidebar-child-link:hover {
    background: var(--glass-white-05);
    color: var(--glass-white-75);
}
[data-theme='dark'] .sidebar-footer {
    border-top-color: var(--glass-white-07);
}
[data-theme='dark'] .sidebar-section-title {
    color: var(--glass-white-28);
    padding-left: 0.875rem;
}
/* ── Topbar: floating glass bar ───────────────────────────────────────────── */
[data-theme='dark'] .topbar {
    background: var(--glass-ink-72);
    border-bottom: 1px solid var(--glass-white-07);
    backdrop-filter: blur(var(--sp-blur)) saturate(var(--sp-saturate-dark));
    -webkit-backdrop-filter: blur(var(--sp-blur)) saturate(var(--sp-saturate-dark));
}
[data-theme='dark'] .topbar-search-wrapper .form-input {
    background: var(--glass-white-07);
    border-color: var(--glass-white-10);
    color: var(--sp-text-1, var(--sp-bg-0));
}
[data-theme='dark'] .topbar-search-wrapper .form-input::placeholder {
    color: var(--glass-white-32);
}
[data-theme='dark'] .topbar-search-wrapper .form-input:focus {
    background: var(--glass-white-10);
    border-color: var(--glass-blue-55);
    box-shadow: 0 0 0 3px var(--glass-blue-14);
}
[data-theme='dark'] .topbar-search-wrapper .search-kbd kbd {
    background: var(--glass-control-bg);
    border-color: var(--glass-control-border);
    color: var(--glass-ice-58);
}
[data-theme='dark'] .topbar-action-btn:hover {
    background: var(--glass-white-08);
    color: var(--glass-white-80);
}
[data-theme='dark'] .topbar-toggle {
    color: var(--glass-white-42);
}
[data-theme='dark'] .topbar-toggle:hover {
    background: var(--glass-white-08);
    color: var(--glass-white-80);
}
[data-theme='dark'] .sidebar-collapse-btn {
    color: var(--glass-white-42);
}
[data-theme='dark'] .sidebar-collapse-btn:hover {
    background: var(--glass-white-06);
    color: var(--glass-white-80);
}
[data-theme='dark'] body.sidebar-collapsed .sidebar-group:hover > .sidebar-group-children,
[data-theme='dark'] body.sidebar-collapsed .sidebar-group:focus-within > .sidebar-group-children {
    background: var(--glass-floating-bg);
    border-color: var(--glass-floating-border);
    box-shadow: var(--glass-floating-shadow);
    backdrop-filter: var(--glass-filter-floating);
    -webkit-backdrop-filter: var(--glass-filter-floating);
}
/* ── Shared dark glass roles for mobile/secondary shells ───────────────────── */
[data-theme='dark'] .mhp-header,
[data-theme='dark'] .mas-header {
    background: var(--glass-shell-bg);
    border-color: var(--glass-shell-border);
    box-shadow: var(--glass-shell-shadow);
    backdrop-filter: var(--glass-filter-mobile-shell);
    -webkit-backdrop-filter: var(--glass-filter-mobile-shell);
}
[data-theme='dark'] .mhp-pill,
[data-theme='dark'] .mhp-module-row,
[data-theme='dark'] .mas-card,
[data-theme='dark'] .mas-segmented__option,
[data-theme='dark'] .mas-action-btn,
[data-theme='dark'] .mas-link-row {
    background: var(--glass-panel-bg);
    border-color: var(--glass-panel-border);
    box-shadow: var(--glass-panel-shadow);
    backdrop-filter: var(--glass-filter-panel);
    -webkit-backdrop-filter: var(--glass-filter-panel);
}
[data-theme='dark'] .mhp-module-row--active,
[data-theme='dark'] .mhp-module-group.is-open .mhp-module-row--button,
[data-theme='dark'] .mas-segmented__option.is-active,
[data-theme='dark'] .mas-action-btn--primary {
    background: var(--glass-accent-bg);
    border-color: var(--glass-accent-border);
    box-shadow: var(--glass-accent-shadow);
}
[data-theme='dark'] .mhp-module-children,
[data-theme='dark'] .mobile-bottom-nav {
    background: var(--glass-floating-bg);
    border-color: var(--glass-floating-border);
    box-shadow: var(--glass-floating-shadow);
    backdrop-filter: var(--glass-filter-floating);
    -webkit-backdrop-filter: var(--glass-filter-floating);
}
[data-theme='dark'] .mhp-logout-btn,
[data-theme='dark'] .mhp-close,
[data-theme='dark'] .mhp-settings-btn,
[data-theme='dark'] .mas-back {
    background: var(--glass-control-bg);
    border: 1px solid var(--glass-control-border);
    box-shadow: var(--glass-control-shadow);
    backdrop-filter: var(--glass-filter-control);
    -webkit-backdrop-filter: var(--glass-filter-control);
}
[data-theme='dark'] .topbar-action-btn {
    background: var(--glass-white-05);
    border: 1px solid var(--glass-white-08);
    border-radius: var(--radius-lg);
    box-shadow:
        inset 0 1px 0 var(--glass-white-06),
        0 8px 18px var(--glass-ink-2);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}
[data-theme='dark'] .topbar-action-btn:hover {
    border-color: var(--glass-white-12);
    box-shadow:
        inset 0 1px 0 var(--glass-white-08),
        0 12px 24px var(--glass-ink-24);
}
/* ── Cards: glass surfaces ────────────────────────────────────────────────── */
/* Dark parity for shared ops primitives lives here so pages only compose globals. */
[data-theme='dark'] body.ops-page-surface .main-content {
    background:
        radial-gradient(circle at 18% 0%, rgba(var(--brand-500-rgb), 0.12), transparent 28%),
        radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--info-500) 8%, transparent), transparent 28%),
        linear-gradient(180deg, var(--sp-bg-1) 0%, var(--sp-bg-0) 100%);
}

[data-theme='dark'] body.ops-page-surface .card .stat-card,
[data-theme='dark'] body.ops-page-surface .stats-row .stat-card {
    backdrop-filter: var(--glass-filter-panel);
    -webkit-backdrop-filter: var(--glass-filter-panel);
}
[data-theme='dark'] .ops-eyebrow {
    color: var(--brand-300);
}
[data-theme='dark'] .ops-page-surface .page-header-subtitle {
    color: var(--glass-ice-68);
}
[data-theme='dark'] .page-header,
[data-theme='dark'] .ops-page-surface .page-header {
    position: relative;
    overflow: hidden;
    padding: 1rem 1.125rem;
    border: 1px solid var(--glass-panel-border);
    border-radius: var(--radius-xl);
    background: var(--glass-panel-bg);
    box-shadow: var(--glass-panel-shadow);
    backdrop-filter: var(--glass-filter-panel);
    -webkit-backdrop-filter: var(--glass-filter-panel);
}

[data-theme='dark'] .page-header::before,
[data-theme='dark'] .ops-page-surface .page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-floating-highlight);
    pointer-events: none;
    opacity: 0.22;
}

[data-theme='dark'] .page-header > *,
[data-theme='dark'] .ops-page-surface .page-header > * {
    position: relative;
    z-index: 1;
}
[data-theme='dark'] .ops-page-surface .card .card,
[data-theme='dark'] .ops-page-surface .card .stat-card {
    background: var(--glass-floating-bg);
    border-color: var(--glass-floating-border);
    box-shadow: var(--glass-floating-shadow);
    backdrop-filter: var(--glass-filter-floating);
    -webkit-backdrop-filter: var(--glass-filter-floating);
}
[data-theme='dark'] .ops-metric {
    background: var(--glass-panel-bg);
    border-color: var(--glass-panel-border);
    box-shadow: var(--glass-panel-shadow);
    backdrop-filter: var(--glass-filter-panel);
    -webkit-backdrop-filter: var(--glass-filter-panel);
}
[data-theme='dark'] .ops-metric-label,
[data-theme='dark'] .ops-metric p {
    color: var(--glass-ice-58);
}
[data-theme='dark'] .ops-metric strong {
    color: var(--sp-text-1, var(--sp-bg-0));
}
[data-theme='dark'] .audit-card-label {
    color: var(--sp-text-1, var(--sp-bg-0));
}
[data-theme='dark'] .audit-issue {
    background: var(--sp-glass-subtle-bg);
    border-color: var(--sp-glass-subtle-border);
    backdrop-filter: var(--sp-glass-filter-dark-soft);
    -webkit-backdrop-filter: var(--sp-glass-filter-dark-soft);
}
[data-theme='dark'] .audit-issue-label,
[data-theme='dark'] .audit-card-empty {
    color: var(--glass-ice-68);
}
[data-theme='dark'] .filter-bar {
    background: var(--glass-panel-bg);
    border-color: var(--glass-panel-border);
    box-shadow: var(--glass-panel-shadow);
    backdrop-filter: var(--glass-filter-panel);
    -webkit-backdrop-filter: var(--glass-filter-panel);
}
[data-theme='dark'] .ops-page-surface .filter-bar {
    border-radius: var(--radius-xl);
}
[data-theme='dark'] .page-header-actions .btn-secondary,
[data-theme='dark'] .page-header-actions .btn-ghost,
[data-theme='dark'] .page-header-actions .btn-danger-outline {
    background: var(--glass-ink-52);
    border-color: var(--glass-slate-18);
    box-shadow: 0 8px 18px var(--glass-ink-2);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
}
[data-theme='dark'] .page-header-actions .btn-danger-outline {
    color: var(--danger-300);
    border-color: var(--glass-danger-32);
}
[data-theme='dark'] .page-header-actions .btn-secondary:hover,
[data-theme='dark'] .page-header-actions .btn-ghost:hover,
[data-theme='dark'] .page-header-actions .btn-danger-outline:hover:not(:disabled) {
    background: var(--glass-ink-7);
    border-color: var(--glass-slate-24);
}
[data-theme='dark'] .page-header-actions .btn-danger-outline:hover:not(:disabled) {
    background: var(--glass-danger-28);
    border-color: var(--glass-danger-32);
    color: var(--danger-300);
}
[data-theme='dark'] .filter-chip-field .form-label {
    color: var(--glass-ice-62);
}
[data-theme='dark'] .filter-chip-field .form-input {
    background: var(--glass-control-bg);
    border-color: var(--glass-control-border);
    box-shadow: var(--glass-control-shadow);
    backdrop-filter: var(--glass-filter-control);
    -webkit-backdrop-filter: var(--glass-filter-control);
}
[data-theme='dark'] .filter-chip-field .form-input:focus {
    background: var(--glass-white-09);
    border-color: var(--glass-blue-55);
    box-shadow: 0 0 0 3px var(--glass-blue-14);
}
[data-theme='dark'] .data-panel {
    background: var(--glass-panel-bg);
    border-color: var(--glass-panel-border);
    box-shadow: var(--glass-panel-shadow);
    backdrop-filter: var(--glass-filter-panel);
    -webkit-backdrop-filter: var(--glass-filter-panel);
}
[data-theme='dark'] .data-panel-header {
    border-bottom-color: var(--glass-white-07);
}
[data-theme='dark'] .data-panel-header h2 {
    color: var(--sp-text-1, var(--sp-bg-0));
}
[data-theme='dark'] .data-panel-header p {
    color: var(--glass-ice-52);
}
[data-theme='dark'] .data-count {
    background: var(--glass-control-bg);
    border: 1px solid var(--glass-control-border);
    color: var(--glass-ice-62);
    box-shadow: inset 0 1px 0 var(--glass-white-05);
}
[data-theme='dark'] .premium-table th {
    background: var(--glass-white-04);
    color: var(--glass-ice-5);
}
[data-theme='dark'] .premium-table td {
    border-top-color: var(--glass-white-05);
    color: var(--sp-text-1, var(--sp-bg-0));
}
[data-theme='dark'] .premium-table tbody tr:hover td {
    background: var(--glass-white-04);
}
[data-theme='dark'] .card,
[data-theme='dark'] .stat-card,
[data-theme='dark'] .data-panel,
[data-theme='dark'] .filter-bar,
[data-theme='dark'] .audit-card {
    position: relative;
    overflow: hidden;
    background: var(--glass-panel-bg);
    border: 1px solid var(--glass-panel-border);
    box-shadow: var(--glass-panel-shadow);
    backdrop-filter: var(--glass-filter-panel);
    -webkit-backdrop-filter: var(--glass-filter-panel);
    isolation: isolate;
    transition:
        transform var(--sp-transition-fast),
        box-shadow var(--sp-transition-fast),
        border-color var(--sp-transition-fast);
}

[data-theme='dark'] .card::before,
[data-theme='dark'] .stat-card::before,
[data-theme='dark'] .data-panel::before,
[data-theme='dark'] .filter-bar::before,
[data-theme='dark'] .audit-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-floating-highlight);
    opacity: 0.32;
    pointer-events: none;
}

[data-theme='dark'] .card > *,
[data-theme='dark'] .stat-card > *,
[data-theme='dark'] .data-panel > *,
[data-theme='dark'] .filter-bar > *,
[data-theme='dark'] .audit-card > * {
    position: relative;
    z-index: 1;
}

[data-theme='dark'] .card:hover,
[data-theme='dark'] .stat-card:hover,
[data-theme='dark'] .data-panel:hover,
[data-theme='dark'] .audit-card:hover {
    border-color: var(--glass-white-15);
    transform: translateY(-1px);
    box-shadow: var(--glass-panel-hover-shadow);
}
[data-theme='dark'] .card-header {
    border-bottom-color: var(--glass-white-07);
}
[data-theme='dark'] .card-footer {
    border-top-color: var(--glass-white-07);
    background: var(--glass-white-03);
}
/* ── Stat cards: same glass panel stack as .card ─────────────────────────── */
[data-theme='dark'] .stat-card-label {
    color: var(--sp-text-3);
}
[data-theme='dark'] .stat-card-change {
    color: var(--glass-ice-66);
}
[data-theme='dark'] .text-muted {
    color: var(--sp-text-3);
}
/* ── Buttons: rounded + microinteractions ─────────────────────────────────── */
[data-theme='dark'] .btn {
    border-radius: var(--radius-full);
    transition:
        transform var(--sp-transition-fast),
        background var(--sp-transition-fast),
        border-color var(--sp-transition-fast),
        box-shadow var(--sp-transition-fast),
        opacity var(--sp-transition-fast);
}
[data-theme='dark'] .btn:active:not(:disabled) {
    transform: scale(0.97);
}
[data-theme='dark'] .btn-primary {
    background: linear-gradient(160deg, var(--brand-400) 0%, var(--brand-600) 100%);
    border: 1px solid var(--glass-blue-28);
    box-shadow:
        0 8px 24px var(--glass-blue-28),
        inset 0 1px 0 var(--glass-white-12);
    color: var(--sp-text-1);
}
[data-theme='dark'] .btn-primary:hover:not(:disabled) {
    background: linear-gradient(160deg, var(--brand-300) 0%, var(--brand-500) 100%);
    box-shadow: 0 12px 32px var(--glass-blue-36);
    transform: translateY(-1px);
    opacity: 1;
}
[data-theme='dark'] .btn-accent {
    box-shadow: 0 8px 24px var(--glass-brand-28);
}
[data-theme='dark'] .btn-secondary {
    background: var(--glass-white-07);
    border-color: var(--glass-white-12);
    color: var(--text-primary);
}
[data-theme='dark'] .btn-secondary:hover:not(:disabled) {
    background: var(--glass-white-12);
    border-color: var(--glass-white-20);
}
[data-theme='dark'] .btn-ghost {
    border-radius: var(--radius-full);
}
[data-theme='dark'] .btn-ghost:hover:not(:disabled) {
    background: var(--glass-white-08);
}
[data-theme='dark'] .btn-danger {
    background: linear-gradient(180deg, var(--sp-red), var(--sp-red));
    box-shadow: 0 8px 24px var(--glass-misc-2556958-26);
    border-color: transparent;
}
[data-theme='dark'] .btn-danger-outline {
    background: var(--glass-white-07);
    border-color: var(--glass-danger-32);
    color: var(--danger-300);
    box-shadow: 0 8px 18px var(--glass-ink-2);
}
[data-theme='dark'] .btn-danger-outline:hover:not(:disabled) {
    background: var(--glass-danger-28);
    border-color: var(--glass-danger-32);
    color: var(--danger-300);
}
[data-theme='dark'] .btn-sm {
    border-radius: var(--radius-full);
}
[data-theme='dark'] .btn-lg {
    border-radius: var(--radius-full);
}
/* Button icon size stays square-ish */
[data-theme='dark'] .btn-icon {
    border-radius: var(--radius-full);
}
/* ── Form inputs: dark glass ──────────────────────────────────────────────── */
[data-theme='dark'] .form-input {
    background: var(--glass-white-06);
    border-color: var(--glass-white-12);
    color: var(--text-primary);
    backdrop-filter: var(--glass-filter-control);
    -webkit-backdrop-filter: var(--glass-filter-control);
}
[data-theme='dark'] .form-input:focus {
    background: var(--glass-white-09);
    border-color: var(--glass-blue-55);
    box-shadow: 0 0 0 3px var(--glass-blue-14);
}
[data-theme='dark'] .form-label {
    color: var(--glass-white-75);
}
/* ── Badges ───────────────────────────────────────────────────────────────── */
[data-theme='dark'] .badge-success {
    background: var(--glass-success-16);
    color: var(--sp-green);
}
[data-theme='dark'] .badge-warning {
    background: var(--glass-warning-16);
    color: var(--sp-orange);
}
[data-theme='dark'] .badge-danger {
    background: var(--glass-misc-2556958-16);
    color: var(--red-400);
}
[data-theme='dark'] .badge-info {
    background: var(--glass-blue-16);
    border-color: var(--glass-blue-18);
    color: var(--sp-blue-2);
}
[data-theme='dark'] .badge-progress {
    border-color: var(--glass-blue-18);
}
[data-theme='dark'] .badge-neutral {
    background: var(--glass-white-08);
    color: var(--glass-white-75);
}
[data-theme='dark'] .badge-brand {
    background: var(--glass-teal-16);
    color: var(--brand-500);
}
/* ── Modal: glass overlay ─────────────────────────────────────────────────── */
[data-theme='dark'] .modal {
    background: var(--glass-ink-90);
    border: 1px solid var(--glass-white-10);
    backdrop-filter: blur(var(--sp-blur-xl));
    -webkit-backdrop-filter: blur(var(--sp-blur-xl));
    box-shadow: 0 32px 80px var(--glass-ink-48);
}
[data-theme='dark'] .modal-header {
    border-bottom-color: var(--glass-white-07);
}
[data-theme='dark'] .modal-footer {
    border-top-color: var(--glass-white-07);
    background: var(--glass-white-03);
}
[data-theme='dark'] .modal-close:hover {
    background: var(--glass-white-08);
}
/* Modal entrance animation */
@media (prefers-reduced-motion: no-preference) {
    [data-theme='dark'] .modal-overlay .modal {
        animation: glassModalIn 0.22s cubic-bezier(.2,.8,.2,1);
    }
    @keyframes glassModalIn {
        from { opacity: 0; transform: scale(0.97) translateY(8px); }
        to   { opacity: 1; transform: scale(1)    translateY(0); }
    }
}
/* ── Notification dropdown: glass ─────────────────────────────────────────── */
[data-theme='dark'] .notif-dropdown {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--ink-900) 92%, transparent),
        color-mix(in srgb, var(--ink-950) 88%, transparent)
    );
    border: 1px solid var(--glass-white-10);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    box-shadow:
        0 24px 72px var(--glass-ink-42),
        0 1px 0 var(--glass-white-08) inset;
    overflow: hidden;
}
[data-theme='dark'] .notif-dropdown::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, var(--glass-white-10) 0%, transparent 34%),
        radial-gradient(circle at top center, color-mix(in srgb, var(--text-inverse) 8%, transparent), transparent 62%);
    pointer-events: none;
}
[data-theme='dark'] .notif-dropdown-header,
[data-theme='dark'] .notif-dropdown-footer {
    background: var(--glass-white-04);
    border-color: var(--glass-white-08);
}
[data-theme='dark'] .notif-item {
    border-bottom-color: var(--glass-white-06);
}
[data-theme='dark'] .notif-item:hover {
    background: var(--glass-white-06);
}
/* ── Search results: glass ────────────────────────────────────────────────── */
[data-theme='dark'] .topbar-search-results {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--ink-900) 92%, transparent),
        color-mix(in srgb, var(--ink-950) 88%, transparent)
    );
    border: 1px solid var(--glass-white-10);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    box-shadow:
        0 24px 72px var(--glass-ink-38),
        0 1px 0 var(--glass-white-07) inset;
    position: relative;
    overflow: hidden;
}
[data-theme='dark'] .topbar-search-results::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, var(--glass-white-09) 0%, transparent 34%),
        radial-gradient(circle at top center, color-mix(in srgb, var(--text-inverse) 7%, transparent), transparent 60%);
    pointer-events: none;
}
[data-theme='dark'] .topbar-search-result:hover,
[data-theme='dark'] .topbar-search-result.active {
    background: var(--glass-white-07);
}
/* ── Command palette: glass ───────────────────────────────────────────────── */
[data-theme='dark'] body.cmd-palette-active .topbar-search-wrapper .form-input {
    background: var(--glass-ink-92);
    border-color: var(--glass-blue-55);
    box-shadow:
        0 0 0 3px var(--glass-blue-16),
        0 24px 64px var(--glass-ink-36);
    backdrop-filter: blur(var(--sp-blur-xl));
    -webkit-backdrop-filter: blur(var(--sp-blur-xl));
}
[data-theme='dark'] .cmd-palette-backdrop {
    background:
        radial-gradient(circle at 50% 22%, transparent 28%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[data-theme='dark'] body.cmd-palette-active .topbar-search-results {
    box-shadow:
        0 24px 72px var(--glass-ink-38),
        0 1px 0 var(--glass-white-07) inset;
}
[data-theme='dark'] .topbar-notification-dot {
    background: var(--danger-500);
    border: 1.5px solid var(--glass-ink-92);
}
[data-theme='dark'] .notif-badge {
    background: var(--warning-500, var(--warning-500));
    color: var(--bg-surface);
    box-shadow: 0 0 0 2px var(--glass-ink-92);
}
[data-theme='dark'] .notif-badge--critical {
    background: var(--danger-500, var(--danger-500));
}
[data-theme='dark'] 
[data-theme='dark'] 
[data-theme='dark'] 
[data-theme='dark'] .notif-item-count {
    background: var(--glass-control-bg);
    border: 1px solid var(--glass-control-border);
    color: var(--glass-ice-68);
}
[data-theme='dark'] 
[data-theme='dark'] 
[data-theme='dark'] .checklist-save-status.is-saving {
    background: var(--glass-blue-08);
    color: var(--blue-300);
    border-color: var(--glass-blue-28);
}
[data-theme='dark'] .checklist-save-status.is-saved {
    background: var(--glass-success-16);
    color: var(--emerald-300);
    border-color: var(--glass-success-28);
}
[data-theme='dark'] .checklist-save-status.is-error {
    background: var(--glass-danger-16);
    color: var(--danger-300);
    border-color: var(--glass-danger-28);
}
[data-theme='dark'] .checklist-save-status.is-offline {
    background: var(--glass-warning-18);
    color: var(--yellow-300);
    border-color: var(--glass-warning-30);
}
/* ── Data table: dark polish ──────────────────────────────────────────────── */
[data-theme='dark'] .data-table thead th {
    background: var(--glass-white-04);
    border-bottom-color: var(--glass-white-08);
}
[data-theme='dark'] .data-table tbody td {
    border-bottom-color: var(--glass-white-05);
}
[data-theme='dark'] .data-table tbody tr:hover td {
    background: var(--glass-white-04);
}
[data-theme='dark'] .data-table tbody tr.table-row-warning td {
    background: var(--glass-warning-12);
}
[data-theme='dark'] .data-table tbody tr.table-row-warning:hover td {
    background: var(--glass-warning-16);
}
[data-theme='dark'] .data-table tbody tr.table-row-danger td {
    background: var(--glass-danger-12);
}
[data-theme='dark'] .data-table tbody tr.table-row-danger:hover td {
    background: var(--glass-danger-16);
}
[data-theme='dark'] .data-table tbody tr.table-row-subtle td {
    background: var(--glass-white-04);
}
[data-theme='dark'] .data-table tbody tr.table-row-subtle:hover td {
    background: var(--glass-white-06);
}
[data-theme='dark'] .inline-chip {
    background: var(--glass-white-06);
    border-color: var(--glass-white-08);
    color: var(--glass-white-82);
}
/* Mobile table cards: mobile/tables-accessible.css */
/* ── Tabs: glass variant ──────────────────────────────────────────────────── */
[data-theme='dark'] .tabs-bar {
    border-bottom-color: var(--glass-white-07);
}
[data-theme='dark'] .tab {
    color: var(--glass-white-75);
}
[data-theme='dark'] .tab:hover {
    background: var(--glass-white-05);
    color: var(--glass-white-75);
}
[data-theme='dark'] .tab-active {
    color: var(--sp-blue-2);
    border-bottom-color: var(--sp-blue-2);
    background: transparent;
}
[data-theme='dark'] .tab-active:hover {
    color: var(--sp-blue-2);
}
/* ── Alert: glass tint ────────────────────────────────────────────────────── */
[data-theme='dark'] .alert-success {
    background: var(--glass-success-10);
    border-color: var(--glass-success-50);
    color: var(--sp-green);
}
[data-theme='dark'] .alert-danger {
    background: var(--glass-misc-2556958-10);
    border-color: var(--glass-misc-2556958-50);
    color: var(--red-400);
}
[data-theme='dark'] .alert-warning {
    background: var(--glass-warning-10);
    border-color: var(--glass-warning-50);
    color: var(--sp-orange);
}
[data-theme='dark'] .alert-info {
    background: var(--glass-blue-10);
    border-color: var(--glass-blue-50);
    color: var(--sp-blue-2);
}
/* ── Empty state ──────────────────────────────────────────────────────────── */
[data-theme='dark'] .empty-state-title {
    color: var(--glass-white-80);
}
/* ── Progress bar: blue glow ──────────────────────────────────────────────── */
[data-theme='dark'] .progress-bar {
    background: var(--glass-white-08);
}
[data-theme='dark'] .progress-bar-fill {
    background: linear-gradient(90deg, var(--sp-blue), var(--sp-blue-2));
    box-shadow: 0 0 8px var(--glass-blue-40);
}
/* ── Sidebar backdrop (mobile): deeper blur ───────────────────────────────── */
[data-theme='dark'] .sidebar-backdrop.show {
    background: var(--glass-ink-68);
}
/* ── Page safe area + content ────────────────────────────────────────────── */
[data-theme='dark'] .page-content {
    padding-bottom: max(1.75rem, calc(1.75rem + env(safe-area-inset-bottom)));
}
/* ── Topbar: safe area top padding (iOS notch) ────────────────────────────── */
[data-theme='dark'] .topbar {
    padding-top: env(safe-area-inset-top, 0px);
}
/* ── Sidebar: safe areas ──────────────────────────────────────────────────── */
[data-theme='dark'] .sidebar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* ── Collapsed sidebar icon mode ──────────────────────────────────────────── */
[data-theme='dark'] body.sidebar-collapsed .sidebar-nav {
    padding: 0.875rem 0.25rem;
}
/* ── Microinteractions ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    [data-theme='dark'] .card,
    [data-theme='dark'] .stat-card {
        will-change: transform;
    }
    [data-theme='dark'] .sidebar-link,
    [data-theme='dark'] .sidebar-group-toggle,
    [data-theme='dark'] .sidebar-child-link {
        will-change: background, color;
    }
    /* Toast slide-in from top-right */
    [data-theme='dark'] .toast-container {
        top: calc(1rem + env(safe-area-inset-top, 0px));
        right: max(1rem, env(safe-area-inset-right, 0px));
    }
}
/* ── Scrollbar: invisible on dark ─────────────────────────────────────────── */
[data-theme='dark'] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
[data-theme='dark'] ::-webkit-scrollbar-track {
    background: transparent;
}
[data-theme='dark'] ::-webkit-scrollbar-thumb {
    background: var(--glass-white-12);
    border-radius: var(--radius-bubble-tail);
}
[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
    background: var(--glass-white-20);
}
/* ============================================================================
   LIGHT MODE GLASS — Misma energía que dark, paleta teal
   ============================================================================ */
/* ── Buttons: pill shape + teal gradient ─────────────────────────────────── */
:root:not([data-theme='dark']) .btn {
    border-radius: var(--radius-full);
    transition:
        transform var(--sp-transition-fast),
        background var(--sp-transition-fast),
        border-color var(--sp-transition-fast),
        box-shadow var(--sp-transition-fast),
        opacity var(--sp-transition-fast);
}
:root:not([data-theme='dark']) .btn:active:not(:disabled) {
    transform: scale(0.97);
}
:root:not([data-theme='dark']) .btn-primary {
    background: linear-gradient(160deg,
        var(--brand-400) 0%,
        var(--brand-600) 100%);
    border-color: transparent;
    box-shadow:
        0 4px 14px rgba(var(--brand-500-rgb), 0.30),
        inset 0 1px 0 var(--glass-white-20);
    color: var(--bg-surface);
}
:root:not([data-theme='dark']) .btn-primary:hover:not(:disabled) {
    background: linear-gradient(160deg,
        var(--brand-300) 0%,
        var(--brand-500) 100%);
    box-shadow:
        0 8px 22px var(--glass-brand-38),
        inset 0 1px 0 var(--glass-white-22);
    transform: translateY(-1px);
    opacity: 1;
}
:root:not([data-theme='dark']) .btn-accent {
    box-shadow: 0 4px 14px var(--glass-brand-28);
}
:root:not([data-theme='dark']) .btn-secondary {
    background: var(--glass-white-90);
    border-color: var(--border-color-strong);
    box-shadow:
        0 2px 6px var(--glass-ink-06),
        inset 0 1px 0 var(--glass-white-90);
    backdrop-filter: blur(var(--sp-blur-sm));
    -webkit-backdrop-filter: blur(var(--sp-blur-sm));
}
:root:not([data-theme='dark']) .btn-secondary:hover:not(:disabled) {
    background: var(--glass-white-1);
    border-color: var(--brand-400);
    box-shadow: 0 4px 12px var(--glass-ink-10);
}
:root:not([data-theme='dark']) .btn-ghost:hover:not(:disabled) {
    background: var(--glass-ink-06);
    color: var(--text-primary);
}
:root:not([data-theme='dark']) .btn-danger-outline {
    background: var(--glass-white-90);
    border-color: var(--danger-300);
    color: var(--danger-600);
    box-shadow:
        0 2px 6px var(--glass-ink-06),
        inset 0 1px 0 var(--glass-white-90);
    backdrop-filter: blur(var(--sp-blur-sm));
    -webkit-backdrop-filter: blur(var(--sp-blur-sm));
}
:root:not([data-theme='dark']) .btn-danger-outline:hover:not(:disabled) {
    background: var(--danger-50);
    border-color: var(--danger-500);
    color: var(--danger-600);
    box-shadow: 0 4px 12px var(--glass-ink-10);
}
:root:not([data-theme='dark']) .btn-danger {
    background: linear-gradient(160deg, var(--danger-300) 0%, var(--danger-500) 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px var(--glass-danger-24);
    color: var(--bg-surface);
}
:root:not([data-theme='dark']) .btn-danger:hover:not(:disabled) {
    background: linear-gradient(160deg, var(--danger-500) 0%, var(--danger-600) 100%);
    box-shadow: 0 8px 20px var(--glass-danger-32);
    opacity: 1;
    transform: translateY(-1px);
}
:root:not([data-theme='dark']) .btn-success {
    background: linear-gradient(160deg, var(--success-500) 0%, var(--success-600) 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px var(--glass-success-24);
    color: var(--bg-surface);
}
:root:not([data-theme='dark']) .btn-success:hover:not(:disabled) {
    background: linear-gradient(160deg, var(--success-500) 0%, var(--success-600) 100%);
    box-shadow: 0 8px 20px var(--glass-success-32);
    opacity: 1;
    transform: translateY(-1px);
}
:root:not([data-theme='dark']) .btn-sm  { border-radius: var(--radius-full); }
:root:not([data-theme='dark']) .btn-lg  { border-radius: var(--radius-full); }
:root:not([data-theme='dark']) .btn-icon { border-radius: var(--radius-full); }
/* ── Form inputs: frosted glass ──────────────────────────────────────────── */
:root:not([data-theme='dark']) .form-input {
    background: var(--glass-white-80);
    border-color: var(--glass-ice-90);
    backdrop-filter: blur(var(--sp-blur-sm)) saturate(1.1);
    -webkit-backdrop-filter: blur(var(--sp-blur-sm)) saturate(1.1);
    box-shadow:
        inset 0 1px 0 var(--glass-white-95),
        0 1px 3px var(--glass-ink-05);
    transition:
        border-color var(--sp-transition-fast),
        box-shadow var(--sp-transition-fast),
        background var(--sp-transition-fast);
}
:root:not([data-theme='dark']) .form-input:focus {
    background: var(--glass-white-96);
    border-color: var(--brand-400);
    box-shadow:
        0 0 0 3px var(--glass-brand-14),
        inset 0 1px 0 var(--glass-white-95);
}
/* ── Select: same glass treatment ────────────────────────────────────────── */
:root:not([data-theme='dark']) select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}
/* ── Page header actions: pill group ─────────────────────────────────────── */
:root:not([data-theme='dark']) .page-header .btn + .btn {
    margin-left: 0.5rem;
}
/* ── Scrollbar: light mode subtle ────────────────────────────────────────── */
:root:not([data-theme='dark']) ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
:root:not([data-theme='dark']) ::-webkit-scrollbar-track {
    background: transparent;
}
:root:not([data-theme='dark']) ::-webkit-scrollbar-thumb {
    background: var(--glass-ink-14);
    border-radius: var(--radius-bubble-tail);
}
:root:not([data-theme='dark']) ::-webkit-scrollbar-thumb:hover {
    background: var(--glass-ink-24);
}
/* ── Badges: semantic light palette ─────────────────────────────────────── */
:root:not([data-theme='dark']) .badge-success {
    background: var(--glass-success-12);
    color: var(--success-600, var(--success-600));
    border-color: var(--glass-success-22);
}
:root:not([data-theme='dark']) .badge-warning {
    background: var(--glass-warning-12);
    color: var(--warning-600, var(--warning-600));
    border-color: var(--glass-warning-22);
}
:root:not([data-theme='dark']) .badge-danger {
    background: var(--glass-danger-10);
    color: var(--danger-600, var(--danger-600));
    border-color: var(--glass-danger-20);
}
:root:not([data-theme='dark']) .badge-info {
    background: var(--glass-blue-10);
    color: var(--info-600, var(--info-600));
    border-color: var(--glass-blue-20);
}
:root:not([data-theme='dark']) .badge-brand {
    background: rgba(var(--brand-500-rgb), 0.12);
    color: var(--brand-700, var(--brand-600));
    border-color: var(--glass-brand-22);
}
:root:not([data-theme='dark']) .badge-neutral {
    background: var(--glass-ink-06);
    color: var(--text-secondary);
    border-color: var(--glass-ink-10);
}
/* ── Alerts: frosted semantic tiles ─────────────────────────────────────── */
:root:not([data-theme='dark']) .alert-success {
    background: var(--glass-success-08);
    border-color: var(--glass-success-40);
    color: var(--success-600, var(--success-600));
}
:root:not([data-theme='dark']) .alert-danger {
    background: var(--glass-danger-12);
    border-color: var(--glass-danger-40);
    color: var(--danger-600, var(--danger-600));
}
:root:not([data-theme='dark']) .alert-warning {
    background: var(--glass-warning-12);
    border-color: var(--glass-warning-40);
    color: var(--warning-600, var(--warning-600));
}
:root:not([data-theme='dark']) .alert-info {
    background: var(--glass-blue-08);
    border-color: var(--glass-blue-40);
    color: var(--info-600, var(--info-600));
}
/* ── Modal: frosted glass ────────────────────────────────────────────────── */
:root:not([data-theme='dark']) .modal {
    background: var(--glass-white-92);
    border: 1px solid var(--glass-ice-90);
    backdrop-filter: blur(28px) saturate(1.18);
    -webkit-backdrop-filter: blur(28px) saturate(1.18);
    box-shadow:
        0 24px 64px var(--glass-ink-14),
        0 4px 16px var(--glass-ink-06);
}
:root:not([data-theme='dark']) .modal-header {
    border-bottom-color: var(--glass-ice-82);
}
:root:not([data-theme='dark']) .modal-footer {
    border-top-color: var(--glass-ice-82);
    background: var(--glass-ice-60);
}
:root:not([data-theme='dark']) .modal-close:hover {
    background: var(--glass-ink-06);
}
@media (prefers-reduced-motion: no-preference) {
    :root:not([data-theme='dark']) .modal-overlay .modal {
        animation: glassModalInLight 0.22s cubic-bezier(.2,.8,.2,1);
    }
    @keyframes glassModalInLight {
        from { opacity: 0; transform: scale(0.97) translateY(8px); }
        to   { opacity: 1; transform: scale(1)    translateY(0); }
    }
}
/* ── Tabs: teal active indicator ────────────────────────────────────────── */
:root:not([data-theme='dark']) .tabs-bar {
    border-bottom-color: var(--glass-ice-80);
}
:root:not([data-theme='dark']) .tab {
    color: var(--text-secondary);
}
:root:not([data-theme='dark']) .tab:hover {
    background: var(--glass-ink-04);
    color: var(--text-primary);
}
:root:not([data-theme='dark']) .tab-active {
    color: var(--brand-600, var(--brand-500));
    border-bottom-color: var(--brand-500, var(--brand-500));
    background: transparent;
}
:root:not([data-theme='dark']) .tab-active:hover {
    color: var(--brand-600, var(--brand-500));
    background: var(--glass-brand-05);
}
/* ── Progress bar: teal glow ────────────────────────────────────────────── */
:root:not([data-theme='dark']) .progress-bar {
    background: var(--glass-ink-08);
}
:root:not([data-theme='dark']) .progress-bar-fill {
    background: linear-gradient(90deg, var(--brand-400, var(--brand-400)), var(--brand-600, var(--brand-500)));
    box-shadow: 0 0 8px var(--glass-brand-36);
}
/* ── Inline chips: frosted glass ────────────────────────────────────────── */
:root:not([data-theme='dark']) .inline-chip {
    background: var(--glass-ice-82);
    border-color: var(--glass-ice-80);
    color: var(--text-secondary);
    backdrop-filter: blur(var(--sp-blur-sm));
    -webkit-backdrop-filter: blur(var(--sp-blur-sm));
}
/* ── Page header subtitle ────────────────────────────────────────────────── */
:root:not([data-theme='dark']) .page-header-subtitle,
:root:not([data-theme='dark']) .page-header p.text-muted {
    color: var(--glass-ink-80);
}
/* ── Sidebar active: teal gradient pill (light mode) ─────────────────────── */
:root:not([data-theme='dark']) .sidebar-link.active {
    background: linear-gradient(135deg,
        rgba(var(--brand-500-rgb), 0.10) 0%,
        rgba(var(--brand-500-rgb), 0.04) 100%);
    border: 1px solid rgba(var(--brand-500-rgb), 0.20);
    box-shadow:
        inset 0 1px 0 var(--glass-white-10),
        0 3px 10px var(--glass-brand-14);
    color: var(--glass-accent-text);
    font-weight: 500;
}
:root:not([data-theme='dark']) .sidebar-child-link.active {
    background: var(--glass-teal-16);
    border: 1px solid var(--glass-brand-18);
    color: var(--glass-accent-text);
    font-weight: 500;
}
/* ── Notification dropdown: light frosted ────────────────────────────────── */
:root:not([data-theme='dark']) .notif-dropdown {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-surface) 94%, transparent),
        color-mix(in srgb, var(--gray-50, var(--bg-secondary)) 86%, transparent)
    );
    border: 1px solid var(--glass-white-72);
    backdrop-filter: blur(24px) saturate(var(--sp-saturate-light));
    -webkit-backdrop-filter: blur(24px) saturate(var(--sp-saturate-light));
    box-shadow:
        0 22px 56px var(--glass-ink-14),
        0 1px 0 var(--glass-white-78) inset;
    overflow: hidden;
}
:root:not([data-theme='dark']) .notif-dropdown::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: var(--glass-floating-highlight);
    pointer-events: none;
    opacity: 0.95;
}
:root:not([data-theme='dark']) .notif-dropdown-header,
:root:not([data-theme='dark']) .notif-dropdown-footer {
    background: var(--glass-ice-54);
    border-color: var(--glass-white-58);
}
:root:not([data-theme='dark']) .notif-item {
    border-bottom-color: var(--glass-ice-70);
}
:root:not([data-theme='dark']) .notif-item:hover {
    background: var(--glass-ice-62);
}
/* ── Search results: light frosted ──────────────────────────────────────── */
:root:not([data-theme='dark']) .topbar-search-results {
    background: linear-gradient(180deg, var(--glass-white-95) 0%, var(--glass-white-84) 100%);
    border: 1px solid var(--glass-white-72);
    backdrop-filter: blur(24px) saturate(var(--sp-saturate-light));
    -webkit-backdrop-filter: blur(24px) saturate(var(--sp-saturate-light));
    box-shadow:
        0 20px 52px var(--glass-ink-12),
        0 1px 0 var(--glass-white-8) inset;
    position: relative;
    overflow: hidden;
}
:root:not([data-theme='dark']) .topbar-search-results::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: var(--glass-floating-highlight);
    pointer-events: none;
    opacity: 0.95;
}
:root:not([data-theme='dark']) .topbar-search-result:hover,
:root:not([data-theme='dark']) .topbar-search-result.active {
    background: var(--glass-ice-62);
}
:root:not([data-theme='dark']) .cmd-palette-backdrop {
    background:
        radial-gradient(circle at 50% 20%, rgba(var(--brand-500-rgb), 0.08), transparent 26%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
:root:not([data-theme='dark']) body.cmd-palette-active .topbar-search-wrapper .form-input {
    background: var(--glass-control-bg);
    border-color: var(--glass-brand-42);
    box-shadow:
        0 0 0 4px rgba(var(--brand-500-rgb), 0.12),
        var(--glass-floating-shadow);
    backdrop-filter: var(--glass-filter-floating);
    -webkit-backdrop-filter: var(--glass-filter-floating);
}
:root:not([data-theme='dark']) body.cmd-palette-active .topbar-search-results {
    box-shadow: var(--glass-floating-shadow);
}
/* ── Operational mode opt-out: mobile search / inbox only (not desktop Cmd+K) ─ */
@media (max-width: 768px) {
    [data-theme='dark'] body.cmd-palette-active .topbar,
    [data-theme='dark'] body.cmd-palette-active .topbar-search-results,
    [data-theme='dark'] body.cmd-palette-active .topbar-search-results::before,
    [data-theme='dark'] body.cmd-palette-active .topbar-search-wrapper .form-input {
        background: none;
        box-shadow: var(--shadow-none, none);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    [data-theme='dark'] body.cmd-palette-active .topbar-search-results,
    [data-theme='dark'] body.cmd-palette-active .topbar-search-wrapper .form-input {
        border-color: transparent;
    }
    :root:not([data-theme='dark']) body.cmd-palette-active .topbar,
    :root:not([data-theme='dark']) body.cmd-palette-active .topbar-search-results,
    :root:not([data-theme='dark']) body.cmd-palette-active .topbar-search-results::before,
    :root:not([data-theme='dark']) body.cmd-palette-active .topbar-search-wrapper .form-input {
        background: none;
        box-shadow: var(--shadow-none, none);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    :root:not([data-theme='dark']) body.cmd-palette-active .topbar-search-results,
    :root:not([data-theme='dark']) body.cmd-palette-active .topbar-search-wrapper .form-input {
        border-color: transparent;
    }
}
:root:not([data-theme='dark']) .sidebar-backdrop {
    background: var(--glass-ink-28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
:root:not([data-theme='dark']) .topbar-notification-dot {
    background: var(--danger-500);
    border: 1.5px solid var(--glass-white-88);
}
:root:not([data-theme='dark']) .notif-badge {
    background: var(--warning-500, var(--warning-500));
    color: var(--bg-surface);
    box-shadow: 0 0 0 2px var(--glass-white-90);
}
:root:not([data-theme='dark']) .notif-badge--critical {
    background: var(--danger-500, var(--danger-500));
}
:root:not([data-theme='dark']) 
:root:not([data-theme='dark']) 
:root:not([data-theme='dark']) 
:root:not([data-theme='dark']) .notif-item-count {
    background: var(--glass-control-bg);
    border: 1px solid var(--glass-control-border);
    color: var(--text-secondary);
}
:root:not([data-theme='dark']) 
:root:not([data-theme='dark']) 
:root:not([data-theme='dark']) .checklist-save-status.is-saving {
    background: var(--glass-blue-08);
    color: var(--info-600);
    border-color: var(--glass-blue-18);
}
:root:not([data-theme='dark']) .checklist-save-status.is-saved {
    background: var(--glass-success-10);
    color: var(--success-600);
    border-color: var(--glass-success-18);
}
:root:not([data-theme='dark']) .checklist-save-status.is-error {
    background: var(--glass-danger-10);
    color: var(--danger-600);
    border-color: var(--glass-danger-18);
}
:root:not([data-theme='dark']) .checklist-save-status.is-offline {
    background: var(--glass-warning-12);
    color: var(--color-warning-dark);
    border-color: var(--glass-warning-22);
}
/* ============================================================================
   INSTALLATION CHECKLIST — Glass treatment (light + dark)
   ============================================================================ */
/* ── Shell vars ──────────────────────────────────────────────────────────── */
[data-theme='dark'] .technician-checklist-shell {
    --tech-border: var(--glass-ink-55);
    --tech-muted: var(--glass-slate-85);
    --tech-surface: var(--glass-ink-82);
    --tech-bg: var(--glass-ink-55);
}
/* ── Mobile sticky header ────────────────────────────────────────────────── */
@media (max-width: 720px) {
    [data-theme='dark'] .tech-checklist-header {
        background: var(--glass-ink-88);
        border-bottom-color: var(--glass-ink-45);
        backdrop-filter: blur(20px) saturate(1.3);
        -webkit-backdrop-filter: blur(20px) saturate(1.3);
    }
    :root:not([data-theme='dark']) .tech-checklist-header {
        background: var(--glass-ice-90);
        backdrop-filter: blur(var(--sp-blur-md)) saturate(1.2);
        -webkit-backdrop-filter: blur(var(--sp-blur-md)) saturate(1.2);
        border-bottom-color: var(--glass-ice-72);
    }
}
/* ── Progress bar ────────────────────────────────────────────────────────── */
[data-theme='dark'] .tech-progress__bar {
    background: var(--glass-ink-60);
}
[data-theme='dark'] .tech-progress__meter::-webkit-progress-bar {
    background: var(--glass-ink-60);
    border-radius: var(--radius-full);
}
[data-theme='dark'] .tech-progress__meter::-webkit-progress-value,
:root:not([data-theme='dark']) .tech-progress__meter::-webkit-progress-value {
    background: linear-gradient(90deg, var(--brand-500, var(--brand-500)) 0%, var(--brand-400, var(--brand-400)) 100%);
    border-radius: var(--radius-full);
}
[data-theme='dark'] .tech-progress__meter::-moz-progress-bar,
:root:not([data-theme='dark']) .tech-progress__meter::-moz-progress-bar {
    background: linear-gradient(90deg, var(--brand-500, var(--brand-500)) 0%, var(--brand-400, var(--brand-400)) 100%);
    border-radius: var(--radius-full);
}
:root:not([data-theme='dark']) .tech-progress__bar {
    background: rgba(var(--brand-500-rgb), 0.12);
    box-shadow: inset 0 1px 0 var(--glass-white-75);
}
/* ── Section nav chips ───────────────────────────────────────────────────── */
@media (max-width: 720px) {
    [data-theme='dark'] .tech-section-nav {
        background: var(--glass-ink-88);
        backdrop-filter: blur(var(--sp-blur-md));
        -webkit-backdrop-filter: blur(var(--sp-blur-md));
    }
    :root:not([data-theme='dark']) .tech-section-nav {
        background: var(--glass-ice-90);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}
[data-theme='dark'] .tech-section-chip {
    background: var(--glass-ink-72);
    border-color: var(--glass-ink-50);
    color: var(--glass-ice-90);
    backdrop-filter: blur(var(--sp-blur-sm));
    -webkit-backdrop-filter: blur(var(--sp-blur-sm));
    transition: background var(--sp-transition-fast), border-color var(--sp-transition-fast), box-shadow var(--sp-transition-fast);
}
[data-theme='dark'] .tech-section-chip:hover {
    background: var(--glass-teal-16);
    border-color: var(--glass-brand-35);
    box-shadow: 0 0 0 2px var(--glass-brand-15);
}
:root:not([data-theme='dark']) .tech-section-chip {
    background: var(--glass-white-76);
    border-color: var(--glass-ice-80);
    backdrop-filter: blur(var(--sp-blur-sm));
    -webkit-backdrop-filter: blur(var(--sp-blur-sm));
    box-shadow: 0 2px 8px var(--glass-ink-06);
    transition: background var(--sp-transition-fast), border-color var(--sp-transition-fast), box-shadow var(--sp-transition-fast);
}
:root:not([data-theme='dark']) .tech-section-chip:hover {
    background: rgba(var(--brand-500-rgb), 0.08);
    border-color: rgba(var(--brand-500-rgb), 0.30);
    box-shadow: 0 0 0 3px rgba(var(--brand-500-rgb), 0.12), 0 2px 8px var(--glass-ink-06);
}
/* ── Section cards ───────────────────────────────────────────────────────── */
[data-theme='dark'] .tech-section-card,
[data-theme='dark'] .tech-complete-card {
    background: var(--glass-ink-72);
    border-color: var(--glass-slate-40);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px var(--glass-ink-22);
}
:root:not([data-theme='dark']) .tech-section-card,
:root:not([data-theme='dark']) .tech-complete-card {
    background: var(--glass-white-84);
    border-color: var(--glass-ice-80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 4px 20px var(--glass-ink-06),
        0 1px 4px var(--glass-ink-04);
}
[data-theme='dark'] .tech-section-card__header {
    background: var(--glass-ink-60);
    border-bottom-color: var(--glass-slate-40);
}
:root:not([data-theme='dark']) .tech-section-card__header {
    background: var(--glass-ice-82);
    border-bottom-color: var(--glass-ice-70);
}
[data-theme='dark'] .tech-section-card__header h2 {
    color: var(--glass-ice-96);
}
[data-theme='dark'] .tech-section-card__header > span {
    color: var(--glass-slate-80);
}
/* ── Item cards ──────────────────────────────────────────────────────────── */
[data-theme='dark'] .tech-item-card {
    background: var(--glass-ink-55);
    border-bottom-color: var(--glass-ink-32);
}
@media (min-width: 720px) {
    [data-theme='dark'] .tech-item-main,
    [data-theme='dark'] .tech-status-grid {
        border-right-color: var(--glass-ink-32);
    }
}
[data-theme='dark'] .tech-item-card--ok {
    background: var(--glass-success-22);
}
[data-theme='dark'] .tech-item-card--falla {
    background: var(--glass-danger-22);
}
[data-theme='dark'] .tech-item-card--na {
    background: var(--glass-ink-38);
}
[data-theme='dark'] .tech-item-card h3 {
    color: var(--glass-ice-96);
}
[data-theme='dark'] .tech-item-card p {
    color: var(--glass-slate-80);
}
:root:not([data-theme='dark']) .tech-item-card--ok {
    background: var(--glass-success-light-82);
}
:root:not([data-theme='dark']) .tech-item-card--falla {
    background: var(--glass-misc-254242242-82);
}
:root:not([data-theme='dark']) .tech-item-card--na {
    background: var(--glass-ice-70);
}
/* ── Status buttons ──────────────────────────────────────────────────────── */
[data-theme='dark'] .tech-status-btn {
    background: var(--glass-ink-72);
    border-color: var(--glass-ink-55);
    color: var(--glass-ice-90);
    transition: background var(--sp-transition-fast), border-color var(--sp-transition-fast), transform 0.12s, box-shadow var(--sp-transition-fast);
}
[data-theme='dark'] .tech-status-btn:hover {
    background: var(--glass-ink-82);
    border-color: var(--glass-ink-70);
}
[data-theme='dark'] .tech-status-btn--ok.is-active {
    background: linear-gradient(160deg, var(--success-600) 0%, var(--success-500) 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px var(--glass-success-40);
}
[data-theme='dark'] .tech-status-btn--falla.is-active {
    background: linear-gradient(160deg, var(--red-700) 0%, var(--danger-500) 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px var(--glass-danger-40);
}
[data-theme='dark'] .tech-status-btn--na.is-active {
    background: linear-gradient(160deg, var(--gray-700) 0%, var(--gray-600) 100%);
    border-color: transparent;
    box-shadow: 0 4px 12px var(--glass-misc-758599-35);
}
:root:not([data-theme='dark']) .tech-status-btn {
    background: var(--glass-white-88);
    border-color: var(--glass-ice-80);
    box-shadow: 0 2px 8px var(--glass-ink-05);
    transition: background var(--sp-transition-fast), border-color var(--sp-transition-fast), transform 0.12s, box-shadow var(--sp-transition-fast);
}
:root:not([data-theme='dark']) .tech-status-btn:hover {
    background: var(--glass-ice-95);
    border-color: var(--glass-slate-70);
    box-shadow: 0 4px 12px var(--glass-ink-08);
}
:root:not([data-theme='dark']) .tech-status-btn--ok.is-active {
    background: linear-gradient(160deg, var(--success-600) 0%, var(--success-500) 100%);
    border-color: transparent;
    color: var(--bg-surface);
    box-shadow: 0 4px 14px var(--glass-success-38);
}
:root:not([data-theme='dark']) .tech-status-btn--falla.is-active {
    background: linear-gradient(160deg, var(--red-700) 0%, var(--danger-500) 100%);
    border-color: transparent;
    color: var(--bg-surface);
    box-shadow: 0 4px 14px var(--glass-danger-38);
}
:root:not([data-theme='dark']) .tech-status-btn--na.is-active {
    background: linear-gradient(160deg, var(--gray-700) 0%, var(--gray-500) 100%);
    border-color: transparent;
    color: var(--bg-surface);
    box-shadow: 0 4px 12px var(--glass-slate-30);
}
/* ── Photo panel ─────────────────────────────────────────────────────────── */
[data-theme='dark'] .tech-photo-panel__header {
    color: var(--glass-slate-80);
}
[data-theme='dark'] .tech-photo-add {
    border-color: var(--glass-brand-45);
    background: rgba(var(--brand-500-rgb), 0.08);
    color: var(--brand-400, var(--brand-400));
}
[data-theme='dark'] .tech-photo-add:hover {
    background: var(--glass-brand-14);
    border-color: var(--glass-brand-60);
}
[data-theme='dark'] .tech-photo-preview {
    border-color: var(--glass-ink-50);
    background: var(--glass-ink-72);
}
:root:not([data-theme='dark']) .tech-photo-add {
    background: rgba(var(--brand-500-rgb), 0.06);
    border-color: var(--glass-brand-40);
    transition: background var(--sp-transition-fast), border-color var(--sp-transition-fast), box-shadow var(--sp-transition-fast);
}
:root:not([data-theme='dark']) .tech-photo-add:hover {
    background: rgba(var(--brand-500-rgb), 0.12);
    border-color: var(--glass-brand-55);
    box-shadow: 0 0 0 4px var(--glass-teal-10);
}
/* ── Notes accordion ─────────────────────────────────────────────────────── */
[data-theme='dark'] .tech-notes {
    background: var(--glass-ink-55);
    border-color: var(--glass-slate-40);
}
[data-theme='dark'] .tech-notes summary {
    color: var(--glass-ice-90);
}
[data-theme='dark'] .tech-notes summary:hover {
    background: var(--glass-ink-40);
    border-radius: var(--radius-sm) var(--radius-compact) 0 0;
}
[data-theme='dark'] .tech-notes textarea {
    background: var(--glass-ink-60);
    color: var(--glass-ice-90);
    border-top-color: var(--glass-slate-40);
}
:root:not([data-theme='dark']) .tech-notes {
    background: var(--glass-white-78);
    border-color: var(--glass-ice-72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
:root:not([data-theme='dark']) .tech-notes summary:hover {
    background: var(--glass-ice-70);
    border-radius: var(--radius-sm) var(--radius-compact) 0 0;
}
/* ── Signature pad ───────────────────────────────────────────────────────── */
[data-theme='dark'] .tech-signature-canvas-wrap {
    background: var(--glass-ice-96);
    border-color: var(--glass-ink-50);
}
[data-theme='dark'] .tech-signature-preview img {
    background: var(--glass-ice-96);
    border-color: var(--glass-ink-45);
}
:root:not([data-theme='dark']) .tech-signature-canvas-wrap {
    background: var(--glass-white-96);
    border-color: rgba(var(--brand-500-rgb), 0.30);
    box-shadow: 0 0 0 4px rgba(var(--brand-500-rgb), 0.08);
}
/* ── Complete card ───────────────────────────────────────────────────────── */
[data-theme='dark'] .tech-complete-card h2 {
    color: var(--glass-ice-96);
}
[data-theme='dark'] .tech-complete-card p {
    color: var(--glass-slate-80);
}
/* ── Photo modal ─────────────────────────────────────────────────────────── */
[data-theme='dark'] .tech-photo-modal button {
    background: var(--glass-ink-90);
    color: var(--glass-ice-96);
    border: 1px solid var(--glass-ink-50);
}
/* ── Mobile savebar ──────────────────────────────────────────────────────── */
:root:not([data-theme='dark']) .checklist-mobile-savebar {
    background: var(--glass-white-90);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border-top-color: var(--glass-ice-75);
    box-shadow: 0 -12px 30px var(--glass-ink-07);
}
[data-theme='dark'] .checklist-mobile-savebar {
    background: var(--glass-ink-90);
    border-top-color: var(--glass-ink-6);
    box-shadow: 0 -14px 34px var(--glass-ink-35);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
/* ── Required label ──────────────────────────────────────────────────────── */
[data-theme='dark'] .tech-required {
    color: var(--glass-danger-90);
}
/* ── Status badge on item ────────────────────────────────────────────────── */
[data-theme='dark'] .item-status-badge.badge-warning {
    background: var(--glass-warning-22);
    color: var(--glass-warning-light-95);
    border: 1px solid var(--glass-warning-35);
}
[data-theme='dark'] .item-status-badge.badge-success {
    background: var(--glass-success-28);
    color: var(--glass-success-light-95);
    border: 1px solid var(--glass-success-30);
}
[data-theme='dark'] .item-status-badge.badge-danger {
    background: var(--glass-danger-28);
    color: var(--glass-danger-95);
    border: 1px solid var(--glass-danger-30);
}
[data-theme='dark'] .item-status-badge.badge-neutral {
    background: var(--glass-ink-55);
    color: var(--glass-slate-90);
    border: 1px solid var(--glass-slate-40);
}
/* Installer picker cards — dark mode */
[data-theme='dark'] .installer-picker-card {
    background: var(--glass-dark-50);
    border-color: var(--glass-ink-35);
}
[data-theme='dark'] .installer-picker-card:hover {
    border-color: var(--glass-indigo-6);
    box-shadow: 0 0 0 3px var(--glass-indigo-12);
}
[data-theme='dark'] .installer-picker-card.is-selected {
    border-color: var(--glass-indigo-7);
    background: var(--glass-indigo-12);
}
[data-theme='dark'] .installer-picker-card__body strong {
    color: var(--glass-ice-92);
}
[data-theme='dark'] .assign-order-preview {
    background: var(--glass-misc-2216374-10);
    border-color: var(--glass-misc-2216374-25);
    color: var(--glass-misc-74222128-90);
}