.container {
            width: min(98vw, 1760px);
            max-width: 1760px;
            margin: 0 auto;
            padding: 20px;
        }
        .page-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
        }
        .page-header h1 {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .admin-badge {
            background: var(--color-danger);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Access denied overlay */
        .access-denied {
            text-align: center;
            padding: 80px 20px;
            color: var(--text-secondary);
        }
        .access-denied .icon { font-size: 3rem; margin-bottom: 16px; }
        .access-denied h2 { color: var(--color-danger); margin-bottom: 8px; }

        /* Users table */
        .users-table-wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .users-filters-bar {
            padding: 16px 18px 14px;
            border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 50%, transparent);
            background: color-mix(in srgb, var(--bg-overlay) 82%, transparent);
        }
        .users-filters-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 12px;
        }
        .users-filter-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 0;
        }
        .users-filter-field--search {
            grid-column: span 2;
        }
        .users-filter-label {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--text-secondary);
        }
        .users-filter-field input,
        .users-filter-field select {
            width: 100%;
            min-width: 0;
            border: 1px solid color-mix(in srgb, var(--border-primary) 70%, transparent);
            border-radius: var(--radius-md);
            background: color-mix(in srgb, var(--bg-tertiary) 92%, transparent);
            color: var(--text-primary);
            font-size: 13px;
            padding: 9px 11px;
            transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
        }
        .users-filter-field input::placeholder {
            color: var(--text-muted);
        }
        .users-filter-field input:focus,
        .users-filter-field select:focus {
            outline: none;
            border-color: color-mix(in srgb, var(--accent-blue) 60%, transparent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 14%, transparent);
            background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
        }
        .users-filters-footer {
            margin-top: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .users-filters-status {
            font-size: 12px;
            color: var(--text-secondary);
        }
        .users-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }
        .users-table th,
        .users-table td {
            padding: 10px 14px;
            text-align: left;
            border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 40%, transparent);
            white-space: nowrap;
        }
        .users-table th {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            background: var(--bg-overlay);
            position: sticky;
            top: 0;
        }
        .users-table th.sortable {
            cursor: pointer;
            user-select: none;
        }
        .users-table th.sortable:hover {
            color: var(--accent-blue);
            background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
        }
        .sort-indicator {
            margin-left: 6px;
            font-size: 10px;
            opacity: 0.7;
        }
        .users-table tr:hover td {
            background: color-mix(in srgb, var(--accent-blue) 4%, transparent);
        }
        .users-table .email-cell {
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Role badge */
        .role-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .role-badge.admin {
            background: color-mix(in srgb, var(--color-danger) 15%, transparent);
            color: var(--color-danger);
            border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
        }
        .role-badge.user {
            background: var(--accent-blue-bg);
            color: var(--accent-blue);
            border: 1px solid color-mix(in srgb, var(--accent-blue) 20%, transparent);
        }

        /* Action buttons */
        .action-btn {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            color: var(--accent-blue);
            padding: 5px 10px;
            border-radius: var(--radius-md);
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-fast);
            white-space: nowrap;
        }
        .action-btn:hover {
            background: var(--border-primary);
            border-color: var(--border-accent);
        }
        .action-btn.danger {
            color: var(--color-danger);
        }
        .action-btn.danger:hover {
            background: color-mix(in srgb, var(--color-danger) 10%, transparent);
            border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
        }
        .action-btn.success {
            color: var(--color-success);
        }
        .action-btn.success:hover {
            background: color-mix(in srgb, var(--color-success) 10%, transparent);
            border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
        }
        .action-btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }
        .actions-cell {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        @media (max-width: 900px) {
            .users-filter-field--search {
                grid-column: span 1;
            }
        }

        /* Automation status indicator */
        .status-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 6px;
        }
        .status-dot.active { background: var(--color-success); box-shadow: 0 0 6px color-mix(in srgb, var(--color-success) 40%, transparent); }
        .status-dot.inactive { background: var(--text-muted); }
        .config-status {
            display: inline-block;
            font-size: 15px;
            line-height: 1;
            font-weight: 700;
        }
        .config-status.yes { color: var(--color-success); }
        .config-status.no { color: var(--color-danger); }

        /* Stats modal / drawer */
        .stats-drawer {
            display: none;
            position: fixed;
            top: 0; right: 0; bottom: 0;
            width: min(480px, 100vw);
            background: var(--bg-secondary);
            border-left: 1px solid var(--border-primary);
            /* Keep drawer above fixed top nav so close control is always accessible on mobile */
            z-index: calc(var(--z-nav) + 20);
            overflow-y: auto;
            box-shadow: var(--shadow-xl);
            animation: slideIn 0.25s ease;
        }
        .stats-drawer.open { display: block; }
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        .stats-drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-primary);
            background: var(--bg-overlay);
            position: sticky;
            top: 0;
            z-index: 1;
        }
        .stats-drawer-header h3 {
            font-size: 15px;
            color: var(--text-primary);
        }
        .stats-drawer-close {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: var(--radius-sm);
        }
        .stats-drawer-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }
        .stats-drawer-body {
            padding: 20px;
        }
        .stats-backdrop {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: calc(var(--z-nav) + 10);
        }
        .stats-backdrop.open { display: block; }

        /* Stats content */
        .stat-section { margin-bottom: 20px; }
        .stat-section-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 10px;
            padding-bottom: 6px;
            border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 40%, transparent);
        }
        .stat-subsection {
            margin-bottom: 12px;
            padding: 10px;
            border: 1px solid color-mix(in srgb, var(--border-primary) 40%, transparent);
            border-radius: var(--radius-lg);
            background: color-mix(in srgb, var(--bg-tertiary) 55%, transparent);
        }
        .stat-subsection:last-child {
            margin-bottom: 0;
        }
        .stat-subsection-title {
            font-size: 10px;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.45px;
            margin-bottom: 8px;
        }
        .platform-top {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 20px;
        }
            .platform-top-actions {
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }
        .platform-kpis-wrap {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .platform-kpis {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            min-width: 0;
        }
        .kpi-item {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: var(--radius-lg);
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .kpi-item .label {
            font-size: 11px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .kpi-item .value {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.1;
        }
        .stat-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin-bottom: 4px;
        }
        .stat-item {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: var(--radius-lg);
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .stat-item .label {
            font-size: 11px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .stat-item .value {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.2;
        }
        .stat-item .value.small { font-size: 13px; font-weight: 500; }

        .platform-chart-card .card-body {
            padding: 12px 16px 16px;
        }
        .chart-subtitle {
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        .chart-warning {
            font-size: 11px;
            color: var(--color-warning);
            margin-bottom: 8px;
        }
        .chart-wrap {
            position: relative;
            height: 280px;
        }

        .overview-status-card {
            margin-bottom: 0;
        }
        .overview-status-note {
            font-size: 11px;
            color: var(--text-secondary);
            max-width: 78ch;
        }
        .overview-status-lead {
            display: grid;
            grid-template-columns: minmax(0, 1.6fr) auto;
            gap: 14px;
            align-items: start;
            margin-bottom: 12px;
            padding: 16px;
            border: 1px solid var(--border-primary);
            border-left-width: 3px;
            border-radius: var(--radius-lg);
            background:
                radial-gradient(circle at top right, color-mix(in srgb, var(--accent-blue) 14%, transparent), transparent 42%),
                linear-gradient(145deg, color-mix(in srgb, var(--bg-tertiary) 88%, transparent), color-mix(in srgb, var(--bg-secondary) 96%, transparent));
            box-shadow: var(--shadow-sm);
        }
        .overview-status-lead[data-tone="good"] {
            border-left-color: color-mix(in srgb, var(--color-success) 84%, var(--border-primary));
        }
        .overview-status-lead[data-tone="warn"] {
            border-left-color: color-mix(in srgb, var(--color-warning) 84%, var(--border-primary));
        }
        .overview-status-lead[data-tone="bad"] {
            border-left-color: color-mix(in srgb, var(--color-danger) 84%, var(--border-primary));
        }
        .overview-status-label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--accent-blue);
        }
        .overview-status-title {
            margin-top: 6px;
            font-size: clamp(18px, 2vw, 24px);
            font-weight: 700;
            line-height: 1.2;
            color: var(--text-primary);
            text-wrap: balance;
        }
        .overview-status-title.is-loading {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .overview-status-copy {
            margin-top: 8px;
            font-size: 13px;
            line-height: 1.55;
            color: var(--text-secondary);
            max-width: 64ch;
        }
        .overview-status-side {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 10px;
        }
        .overview-status-counts {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 8px;
        }
        .overview-status-count {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            border: 1px solid var(--border-primary);
            background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: 600;
            line-height: 1.3;
            white-space: nowrap;
        }
        .overview-status-count--loading {
            gap: 6px;
        }
        .overview-status-count--loading .spinner {
            --spinner-size: 10px;
            --spinner-ring-width: 1.5px;
        }
        .overview-status-count[data-tone="good"] {
            border-color: color-mix(in srgb, var(--color-success) 42%, var(--border-primary));
            color: color-mix(in srgb, var(--color-success) 92%, var(--text-primary));
            background: color-mix(in srgb, var(--color-success) 15%, transparent);
        }
        .overview-status-count[data-tone="warn"] {
            border-color: color-mix(in srgb, var(--color-warning) 44%, var(--border-primary));
            color: color-mix(in srgb, var(--color-warning) 92%, var(--text-primary));
            background: color-mix(in srgb, var(--color-warning) 16%, transparent);
        }
        .overview-status-count[data-tone="bad"] {
            border-color: color-mix(in srgb, var(--color-danger) 44%, var(--border-primary));
            color: color-mix(in srgb, var(--color-danger) 92%, var(--text-primary));
            background: color-mix(in srgb, var(--color-danger) 16%, transparent);
        }
        .overview-status-updated {
            font-size: 11px;
            line-height: 1.45;
            color: var(--text-secondary);
            text-align: right;
            max-width: 30ch;
        }
        .overview-status-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
            gap: 10px;
        }
        .overview-status-item {
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-width: 0;
            padding: 14px;
            border: 1px solid var(--border-primary);
            border-top-width: 3px;
            border-radius: var(--radius-lg);
            background: color-mix(in srgb, var(--bg-tertiary) 72%, transparent);
            box-shadow: inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
        }
        .overview-status-item--actionable {
            cursor: pointer;
            transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
        }
        .overview-status-item--actionable:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 24px color-mix(in srgb, black 10%, transparent), inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
        }
        .overview-status-item--actionable:focus-visible {
            outline: none;
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue) 58%, transparent), 0 10px 24px color-mix(in srgb, black 10%, transparent), inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
        }
        .overview-status-item[data-tone="good"] {
            border-top-color: color-mix(in srgb, var(--color-success) 84%, var(--border-primary));
        }
        .overview-status-item[data-tone="warn"] {
            border-top-color: color-mix(in srgb, var(--color-warning) 84%, var(--border-primary));
        }
        .overview-status-item[data-tone="bad"] {
            border-top-color: color-mix(in srgb, var(--color-danger) 84%, var(--border-primary));
        }
        .overview-status-item[data-tone="neutral"] {
            border-top-color: color-mix(in srgb, var(--accent-slate) 72%, var(--border-primary));
        }
        .overview-status-item-head {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: flex-start;
        }
        .overview-status-item-title-row {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .overview-status-item-icon {
            font-size: 16px;
            line-height: 1;
            flex-shrink: 0;
        }
        .overview-status-item-title {
            font-size: 14px;
            font-weight: 700;
            line-height: 1.2;
            color: var(--text-primary);
        }
        .overview-status-pill {
            display: inline-flex;
            align-items: center;
            flex-shrink: 0;
            padding: 4px 10px;
            border-radius: 999px;
            border: 1px solid var(--border-primary);
            background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
            color: var(--text-secondary);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .overview-status-pill.is-loading {
            gap: 6px;
        }
        .overview-status-pill.is-loading .spinner {
            --spinner-size: 10px;
            --spinner-ring-width: 1.5px;
        }
        .overview-status-item[data-tone="good"] .overview-status-pill {
            border-color: color-mix(in srgb, var(--color-success) 42%, var(--border-primary));
            color: color-mix(in srgb, var(--color-success) 92%, var(--text-primary));
            background: color-mix(in srgb, var(--color-success) 15%, transparent);
        }
        .overview-status-item[data-tone="warn"] .overview-status-pill {
            border-color: color-mix(in srgb, var(--color-warning) 44%, var(--border-primary));
            color: color-mix(in srgb, var(--color-warning) 92%, var(--text-primary));
            background: color-mix(in srgb, var(--color-warning) 16%, transparent);
        }
        .overview-status-item[data-tone="bad"] .overview-status-pill {
            border-color: color-mix(in srgb, var(--color-danger) 44%, var(--border-primary));
            color: color-mix(in srgb, var(--color-danger) 92%, var(--text-primary));
            background: color-mix(in srgb, var(--color-danger) 16%, transparent);
        }
        .overview-status-item-summary {
            font-size: 13px;
            line-height: 1.5;
            color: var(--text-primary);
        }
        .overview-status-item-meta {
            font-size: 11px;
            line-height: 1.5;
            color: var(--text-secondary);
        }
        .overview-status-actions {
            margin-top: auto;
        }

        .users-summary-card {
            margin-bottom: 20px;
        }
        .users-summary-note {
            font-size: 11px;
            color: var(--text-secondary);
        }
        .users-summary-loading {
            padding: 16px;
            color: var(--text-secondary);
            font-size: 13px;
        }
        .users-summary-kpis {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 12px;
        }
        .users-summary-kpi {
            appearance: none;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: var(--radius-lg);
            padding: 12px 14px 10px;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            width: 100%;
            text-align: left;
            font: inherit;
            color: inherit;
            cursor: pointer;
            transition: border-color 0.18s, box-shadow 0.18s;
        }
        .users-summary-kpi::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: var(--kpi-accent, var(--accent-blue));
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            opacity: 0.9;
        }
        .users-summary-kpi:not(:disabled):hover {
            border-color: color-mix(in srgb, var(--kpi-accent, var(--accent-blue)) 40%, var(--border-primary));
            box-shadow: 0 4px 16px -6px color-mix(in srgb, var(--kpi-accent, var(--accent-blue)) 28%, transparent);
        }
        .users-summary-kpi:focus-visible {
            outline: none;
            border-color: color-mix(in srgb, var(--kpi-accent, var(--accent-blue)) 58%, var(--border-primary));
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpi-accent, var(--accent-blue)) 34%, transparent), 0 6px 22px -10px color-mix(in srgb, var(--kpi-accent, var(--accent-blue)) 38%, transparent);
        }
        .users-summary-kpi.is-active {
            border-color: color-mix(in srgb, var(--kpi-accent, var(--accent-blue)) 62%, var(--border-primary));
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--kpi-accent, var(--accent-blue)) 28%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--kpi-accent, var(--accent-blue)) 42%, transparent);
        }
        .users-summary-kpi:disabled {
            cursor: default;
            opacity: 0.78;
        }
        .users-summary-kpi .kpi-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 6px;
        }
        .users-summary-kpi .kpi-top-meta {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .users-summary-kpi .kpi-icon {
            font-size: 18px;
            line-height: 1;
            opacity: 0.8;
            flex-shrink: 0;
        }
        .users-summary-kpi .kpi-state {
            font-size: 10px;
            line-height: 1;
            color: var(--text-secondary);
            border: 1px solid color-mix(in srgb, var(--kpi-accent, var(--accent-blue)) 28%, var(--border-primary));
            border-radius: 999px;
            padding: 4px 7px;
            text-transform: uppercase;
            letter-spacing: 0.35px;
            background: color-mix(in srgb, var(--kpi-accent, var(--accent-blue)) 10%, transparent);
        }
        .users-summary-kpi.is-active .kpi-state {
            color: var(--kpi-color, var(--text-primary));
            background: color-mix(in srgb, var(--kpi-accent, var(--accent-blue)) 18%, transparent);
            border-color: color-mix(in srgb, var(--kpi-accent, var(--accent-blue)) 50%, var(--border-primary));
        }
        .users-summary-kpi .label {
            font-size: 10px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.45px;
            font-weight: 600;
            line-height: 1.3;
        }
        .users-summary-kpi .value {
            font-size: 26px;
            font-weight: 800;
            line-height: 1;
            color: var(--kpi-color, var(--text-primary));
            margin-bottom: 4px;
        }
        .users-summary-kpi .meta {
            font-size: 10px;
            color: var(--text-secondary);
            margin-bottom: 10px;
            flex: 1;
        }
        .users-summary-kpi .kpi-progress {
            height: 4px;
            border-radius: 2px;
            background: color-mix(in srgb, var(--border-primary) 70%, transparent);
            overflow: hidden;
            margin-top: auto;
        }
        .users-summary-kpi .kpi-progress-fill {
            height: 100%;
            border-radius: 2px;
            background: var(--kpi-accent, var(--accent-blue));
            transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .users-summary-kpi.kpi-configured {
            --kpi-accent: var(--accent-blue);
            --kpi-color: var(--accent-blue);
        }
        .users-summary-kpi.kpi-automation {
            --kpi-accent: var(--color-success);
            --kpi-color: var(--color-success);
        }
        .users-summary-kpi.kpi-amber {
            --kpi-accent: #f5a35b;
            --kpi-color: #f5a35b;
        }
        .users-summary-kpi.kpi-ev {
            --kpi-accent: #a78bfa;
            --kpi-color: #a78bfa;
        }
        .users-summary-grid-2 {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 10px;
        }
        .users-summary-grid-3 {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }
        .users-summary-panel {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: var(--radius-lg);
            padding: 14px;
        }
        .users-summary-panel-title {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: 0.15px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 7px;
        }
        .panel-title-icon {
            font-size: 15px;
            line-height: 1;
            flex-shrink: 0;
        }
        .users-summary-chart {
            position: relative;
            height: 200px;
        }
        .users-summary-chart-compact {
            height: 150px;
        }
        .rank-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .rank-row {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 8px 10px;
            border-radius: var(--radius-md);
            background: color-mix(in srgb, var(--bg-secondary) 52%, transparent);
            border: 1px solid color-mix(in srgb, var(--border-primary) 35%, transparent);
            transition: background 0.14s;
        }
        .rank-row:hover {
            background: color-mix(in srgb, var(--accent-blue) 5%, var(--bg-secondary));
        }
        .rank-num {
            font-size: 10px;
            font-weight: 700;
            color: var(--text-secondary);
            opacity: 0.6;
            min-width: 18px;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }
        .rank-label {
            flex: 1;
            font-size: 13px;
            color: var(--text-primary);
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .rank-bar-track {
            flex: 0 0 44px;
            height: 5px;
            border-radius: 3px;
            background: color-mix(in srgb, var(--accent-blue) 14%, transparent);
            overflow: hidden;
        }
        .rank-bar {
            height: 100%;
            border-radius: 3px;
            background: var(--accent-blue);
            min-width: 3px;
        }
        .rank-badge {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
            background: var(--bg-overlay);
            border: 1px solid var(--border-primary);
            border-radius: 20px;
            padding: 2px 8px;
            white-space: nowrap;
            min-width: 50px;
            text-align: center;
            font-variant-numeric: tabular-nums;
        }
        .users-summary-empty {
            color: var(--text-secondary);
            font-size: 12px;
        }
        .users-summary-footnote {
            margin-top: 10px;
            font-size: 11px;
            color: var(--text-secondary);
        }
        .chart-html-legend {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 5px 14px;
            margin-top: 10px;
        }
        .chart-legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            line-height: 1.4;
            user-select: none;
        }
        .chart-legend-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .chart-legend-text {
            color: #c8d3e0;
            font-weight: 500;
        }
        .chart-legend-pct {
            color: #8b949e;
            font-size: 11px;
            font-variant-numeric: tabular-nums;
        }

        [data-theme="light"] .chart-legend-text {
            color: var(--text-primary);
        }
        [data-theme="light"] .chart-legend-pct {
            color: var(--text-secondary);
        }

        .users-card-header-main {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .users-table-note {
            font-size: 11px;
            color: var(--text-secondary);
        }
        .users-header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .users-table-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 14px;
            border-top: 1px solid var(--border-primary);
            flex-wrap: wrap;
        }
        .users-table-meta {
            font-size: 11px;
            color: var(--text-secondary);
        }
        .users-pagination {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .users-pagination-status {
            font-size: 11px;
            color: var(--text-secondary);
            min-width: 110px;
            text-align: center;
        }

        .firestore-metrics-card {
            margin-bottom: 20px;
        }
        .firestore-metrics-header-note {
            font-size: 11px;
            color: var(--text-secondary);
        }
        .firestore-kpis {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 8px;
            margin-bottom: 10px;
        }
        .firestore-kpi {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: var(--radius-md);
            padding: 8px 10px;
        }
        .firestore-kpi .label {
            font-size: 10px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            margin-bottom: 4px;
        }
        .firestore-kpi .value {
            font-size: 22px;
            font-weight: 700;
            line-height: 1;
            color: var(--text-primary);
        }
        .firestore-kpi .value.small {
            font-size: 18px;
        }
        .firestore-kpi .sub {
            margin-top: 2px;
            font-size: 10px;
            color: var(--text-secondary);
        }
        .firestore-chart-wrap {
            position: relative;
            height: 240px;
            margin-top: 6px;
        }
        .firestore-updated {
            font-size: 11px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        .firestore-warning {
            font-size: 11px;
            color: var(--color-warning);
            margin-top: 6px;
        }

        .scheduler-metrics-card {
            margin-bottom: 20px;
        }
        .scheduler-lead {
            display: grid;
            grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
            gap: 14px;
            margin-bottom: 14px;
            padding: 18px;
            border: 1px solid var(--border-primary);
            border-left-width: 3px;
            border-radius: var(--radius-lg);
            background:
                radial-gradient(circle at top right, color-mix(in srgb, var(--accent-blue) 16%, transparent), transparent 38%),
                linear-gradient(145deg, color-mix(in srgb, var(--bg-tertiary) 88%, transparent), color-mix(in srgb, var(--bg-secondary) 95%, transparent));
            box-shadow: var(--shadow-sm);
        }
        .scheduler-lead[data-level="good"] {
            border-left-color: color-mix(in srgb, var(--color-success) 82%, var(--border-primary));
        }
        .scheduler-lead[data-level="warn"] {
            border-left-color: color-mix(in srgb, var(--color-warning) 82%, var(--border-primary));
        }
        .scheduler-lead[data-level="bad"] {
            border-left-color: color-mix(in srgb, var(--color-danger) 84%, var(--border-primary));
        }
        .scheduler-lead__copy {
            min-width: 0;
        }
        .scheduler-lead__eyebrow {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--accent-blue);
        }
        .scheduler-lead__headline-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            margin-top: 6px;
        }
        .scheduler-lead__headline {
            margin: 0;
            font-size: clamp(18px, 2vw, 24px);
            font-weight: 700;
            color: var(--text-primary);
            text-wrap: balance;
        }
        .scheduler-lead__badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 10px;
            border-radius: 999px;
            border: 1px solid var(--border-primary);
            background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        .scheduler-lead[data-level="good"] .scheduler-lead__badge {
            border-color: color-mix(in srgb, var(--color-success) 45%, var(--border-primary));
            color: color-mix(in srgb, var(--color-success) 90%, var(--text-primary));
            background: color-mix(in srgb, var(--color-success) 15%, transparent);
        }
        .scheduler-lead[data-level="warn"] .scheduler-lead__badge {
            border-color: color-mix(in srgb, var(--color-warning) 45%, var(--border-primary));
            color: color-mix(in srgb, var(--color-warning) 90%, var(--text-primary));
            background: color-mix(in srgb, var(--color-warning) 16%, transparent);
        }
        .scheduler-lead[data-level="bad"] .scheduler-lead__badge {
            border-color: color-mix(in srgb, var(--color-danger) 48%, var(--border-primary));
            color: color-mix(in srgb, var(--color-danger) 92%, var(--text-primary));
            background: color-mix(in srgb, var(--color-danger) 17%, transparent);
        }
        .scheduler-lead__body {
            margin: 10px 0 0;
            max-width: 62ch;
            font-size: 13px;
            line-height: 1.55;
            color: var(--text-secondary);
        }
        .scheduler-lead__chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }
        .scheduler-lead__chip {
            display: inline-flex;
            align-items: center;
            min-width: 0;
            padding: 4px 10px;
            border-radius: 999px;
            border: 1px solid var(--border-primary);
            background: color-mix(in srgb, var(--bg-primary) 76%, transparent);
            color: var(--text-secondary);
            font-size: 11px;
            line-height: 1.4;
        }
        .scheduler-focus-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            align-content: start;
        }
        .scheduler-focus-card {
            min-width: 0;
            padding: 11px 12px;
            border: 1px solid var(--border-primary);
            border-radius: var(--radius-md);
            background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
            box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
        }
        .scheduler-focus-card .label {
            font-size: 10px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 6px;
        }
        .scheduler-focus-card .value {
            font-size: 22px;
            font-weight: 800;
            line-height: 1.05;
            color: var(--text-primary);
        }
        .scheduler-focus-card .meta {
            margin-top: 6px;
            font-size: 11px;
            line-height: 1.45;
            color: var(--text-secondary);
        }
        .scheduler-kpis {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
            gap: 8px;
            margin-bottom: 10px;
        }
        .scheduler-kpi {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: var(--radius-md);
            padding: 8px 10px;
        }
        .scheduler-kpi .label {
            font-size: 10px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            margin-bottom: 4px;
        }
        .label-row {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .info-tip {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            border: 1px solid var(--border-primary);
            border-radius: 50%;
            color: var(--text-secondary);
            font-size: 9px;
            font-weight: 700;
            line-height: 1;
            cursor: help;
            user-select: none;
            background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
        }
        .info-tip::after {
            content: attr(data-tip);
            position: absolute;
            left: 50%;
            bottom: calc(100% + 8px);
            transform: translateX(-50%);
            width: min(260px, 60vw);
            padding: 8px 9px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-primary);
            background: color-mix(in srgb, var(--bg-primary) 95%, black 5%);
            color: var(--text-primary);
            font-size: 11px;
            font-weight: 400;
            line-height: 1.4;
            letter-spacing: 0;
            text-transform: none;
            white-space: normal;
            box-shadow: var(--shadow-lg);
            opacity: 0;
            pointer-events: none;
            z-index: 60;
            transition: opacity 0.12s ease;
        }
        .info-tip::before {
            content: '';
            position: absolute;
            left: 50%;
            bottom: calc(100% + 3px);
            transform: translateX(-50%) rotate(45deg);
            width: 8px;
            height: 8px;
            background: color-mix(in srgb, var(--bg-primary) 95%, black 5%);
            border-right: 1px solid var(--border-primary);
            border-bottom: 1px solid var(--border-primary);
            opacity: 0;
            pointer-events: none;
            z-index: 59;
            transition: opacity 0.12s ease;
        }
        .info-tip:hover::after,
        .info-tip:hover::before,
        .info-tip:focus-visible::after,
        .info-tip:focus-visible::before {
            opacity: 1;
        }
        .js-info-tooltips .info-tip::after,
        .js-info-tooltips .info-tip::before {
            display: none;
        }
        .admin-info-tooltip {
            position: fixed;
            top: 0;
            left: 0;
            max-width: min(320px, calc(100vw - 20px));
            padding: 9px 10px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-primary);
            background: color-mix(in srgb, var(--bg-primary) 96%, black 4%);
            color: var(--text-primary);
            font-size: 11px;
            font-weight: 400;
            line-height: 1.45;
            box-shadow: var(--shadow-lg);
            pointer-events: none;
            opacity: 0;
            transform: translateY(4px);
            transition: opacity 0.12s ease, transform 0.12s ease;
            z-index: 2000;
        }
        .admin-info-tooltip.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        .admin-info-tooltip[data-placement="top"] {
            transform: translateY(4px);
        }
        .admin-info-tooltip[data-placement="bottom"] {
            transform: translateY(-4px);
        }
        .admin-info-tooltip.is-visible[data-placement="top"],
        .admin-info-tooltip.is-visible[data-placement="bottom"] {
            transform: translateY(0);
        }
        .scheduler-kpi .value {
            font-size: 20px;
            font-weight: 700;
            line-height: 1;
            color: var(--text-primary);
        }
        .scheduler-kpi .value.small {
            font-size: 15px;
        }
        .scheduler-chart-wrap {
            position: relative;
            height: 240px;
            margin-top: 6px;
        }
        .scheduler-updated {
            font-size: 11px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        .scheduler-warning {
            font-size: 11px;
            margin-top: 6px;
            color: var(--text-secondary);
        }
        .scheduler-warning[data-level="good"] {
            color: var(--color-success);
        }
        .scheduler-warning[data-level="warn"] {
            color: var(--color-warning);
        }
        .scheduler-warning[data-level="bad"] {
            color: var(--color-danger);
        }
        .scheduler-slo-section {
            margin-bottom: 8px;
        }
        .scheduler-slo-section-title {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
            margin: 12px 0 8px;
            font-size: 11px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.45px;
        }
        .scheduler-slo-section-note {
            font-size: 10px;
            color: color-mix(in srgb, var(--text-secondary) 85%, var(--text-primary));
            text-transform: none;
            letter-spacing: 0;
        }
        .scheduler-slo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
            gap: 8px;
            margin-bottom: 10px;
        }
        .scheduler-slo-item {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: var(--radius-md);
            padding: 8px 10px;
            position: relative;
            overflow: visible;
            transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
        }
        .scheduler-slo-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: transparent;
        }
        .scheduler-slo-item.good {
            border-color: color-mix(in srgb, var(--color-success) 78%, var(--border-primary));
            background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--color-success) 17%, transparent),
                color-mix(in srgb, var(--color-success) 7%, var(--bg-tertiary))
            );
            box-shadow:
                inset 0 0 0 1px color-mix(in srgb, var(--color-success) 20%, transparent),
                0 8px 20px -14px color-mix(in srgb, var(--color-success) 78%, transparent);
        }
        .scheduler-slo-item.warn {
            border-color: color-mix(in srgb, var(--color-warning) 78%, var(--border-primary));
            background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--color-warning) 18%, transparent),
                color-mix(in srgb, var(--color-warning) 7%, var(--bg-tertiary))
            );
            box-shadow:
                inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 24%, transparent),
                0 8px 20px -14px color-mix(in srgb, var(--color-warning) 82%, transparent);
        }
        .scheduler-slo-item.bad {
            border-color: color-mix(in srgb, var(--color-danger) 80%, var(--border-primary));
            background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--color-danger) 19%, transparent),
                color-mix(in srgb, var(--color-danger) 8%, var(--bg-tertiary))
            );
            box-shadow:
                inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 28%, transparent),
                0 8px 20px -14px color-mix(in srgb, var(--color-danger) 84%, transparent);
        }
        .scheduler-slo-item.good::before {
            background: color-mix(in srgb, var(--color-success) 90%, white 10%);
        }
        .scheduler-slo-item.warn::before {
            background: color-mix(in srgb, var(--color-warning) 90%, white 10%);
        }
        .scheduler-slo-item.bad::before {
            background: color-mix(in srgb, var(--color-danger) 90%, white 10%);
        }
        .scheduler-slo-item .slo-title {
            font-size: 10px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.35px;
            margin-bottom: 4px;
        }
        .scheduler-slo-item .slo-status {
            font-size: 13px;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1.2;
        }
        .scheduler-slo-item.good .slo-status {
            color: color-mix(in srgb, var(--color-success) 88%, var(--text-primary));
        }
        .scheduler-slo-item.warn .slo-status {
            color: color-mix(in srgb, var(--color-warning) 90%, var(--text-primary));
        }
        .scheduler-slo-item.bad .slo-status {
            color: color-mix(in srgb, var(--color-danger) 92%, var(--text-primary));
        }
        .scheduler-slo-item .slo-value {
            margin-top: 5px;
            font-size: 10px;
            color: var(--text-secondary);
        }
        .scheduler-slo-item .slo-meta {
            margin-top: 4px;
            font-size: 10px;
            line-height: 1.4;
            color: color-mix(in srgb, var(--text-secondary) 86%, var(--text-primary));
        }
        .scheduler-recent-wrap {
            margin-top: 10px;
            border: 1px solid var(--border-primary);
            border-radius: var(--radius-md);
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
        }
        .scheduler-recent-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 11px;
        }
        .scheduler-recent-table th,
        .scheduler-recent-table td {
            text-align: left;
            padding: 8px 10px;
            border-bottom: 1px solid var(--border-primary);
        }
        .scheduler-recent-table th {
            color: var(--text-secondary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.35px;
            font-size: 10px;
            background: color-mix(in srgb, var(--bg-tertiary) 60%, transparent);
        }
        .scheduler-recent-table tr:last-child td {
            border-bottom: none;
        }
        .scheduler-recent-empty {
            padding: 10px;
            color: var(--text-secondary);
            font-size: 11px;
            display: none;
        }
        .scheduler-diagnostics {
            margin-top: 10px;
            padding: 10px 12px;
            border: 1px solid var(--border-primary);
            border-radius: var(--radius-md);
            background: color-mix(in srgb, var(--bg-tertiary) 55%, transparent);
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.45;
        }
        .scheduler-diagnostics strong {
            color: var(--text-primary);
        }
        .scheduler-accordion {
            margin-top: 12px;
            border: 1px solid var(--border-primary);
            border-radius: var(--radius-lg);
            background: color-mix(in srgb, var(--bg-tertiary) 62%, transparent);
            overflow: hidden;
        }
        .scheduler-accordion[open] {
            box-shadow: var(--shadow-sm);
        }
        .scheduler-accordion__summary {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 13px 15px;
            cursor: pointer;
            user-select: none;
        }
        .scheduler-accordion__summary::-webkit-details-marker {
            display: none;
        }
        .scheduler-accordion__summary::after {
            content: '+';
            flex: none;
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            border: 1px solid var(--border-primary);
            background: color-mix(in srgb, var(--bg-primary) 74%, transparent);
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 700;
        }
        .scheduler-accordion[open] .scheduler-accordion__summary::after {
            content: '−';
        }
        .scheduler-accordion__title-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }
        .scheduler-accordion__title {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .scheduler-accordion__hint {
            font-size: 11px;
            line-height: 1.45;
            color: var(--text-secondary);
        }
        .scheduler-accordion__state {
            flex: none;
            font-size: 11px;
            color: var(--text-secondary);
            white-space: nowrap;
        }
        .scheduler-accordion__body {
            padding: 0 15px 15px;
            border-top: 1px solid color-mix(in srgb, var(--border-primary) 82%, transparent);
        }
        .scheduler-accordion__note {
            margin-top: 12px;
            font-size: 11px;
            line-height: 1.5;
            color: var(--text-secondary);
        }

        .dataworks-card {
            margin-bottom: 20px;
        }
        .dataworks-lead {
            margin-bottom: 14px;
            padding: 11px 14px 11px 16px;
            border: 1px solid var(--border-primary);
            border-left-width: 3px;
            border-radius: var(--radius-lg);
            background: color-mix(in srgb, var(--bg-tertiary) 70%, transparent);
            color: var(--text-secondary);
            font-size: 12px;
            line-height: 1.55;
            overflow-wrap: anywhere;
            transition: border-color 0.2s ease, background 0.2s ease;
        }
        .dataworks-lead strong {
            color: var(--text-primary);
        }
        .dataworks-lead[data-level="good"] {
            border-left-color: var(--color-success);
            background: color-mix(in srgb, var(--color-success) 7%, var(--bg-tertiary));
        }
        .dataworks-lead[data-level="warn"] {
            border-left-color: var(--color-warning);
            background: color-mix(in srgb, var(--color-warning) 7%, var(--bg-tertiary));
        }
        .dataworks-lead[data-level="bad"] {
            border-left-color: var(--color-danger);
            background: color-mix(in srgb, var(--color-danger) 7%, var(--bg-tertiary));
        }
        .dataworks-grid-3 {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            margin-top: 12px;
        }
        .dataworks-panel {
            background: color-mix(in srgb, var(--bg-secondary) 55%, var(--bg-tertiary));
            border: 1px solid var(--border-primary);
            border-radius: var(--radius-xl);
            overflow: hidden;
            min-height: 100%;
            min-width: 0;
            display: flex;
            flex-direction: column;
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
        }
        .dataworks-panel:hover {
            border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border-primary));
            box-shadow: 0 4px 18px -8px rgba(0, 0, 0, 0.35);
        }

        /* DataWorks panel head/body structure */
        .dw-panel-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            padding: 11px 13px 10px;
            border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 55%, transparent);
            background: color-mix(in srgb, var(--bg-overlay) 50%, transparent);
            flex-wrap: wrap;
        }
        .dw-head-main {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            min-width: 0;
            flex: 1 1 auto;
        }
        .dw-icon-box {
            width: 28px;
            height: 28px;
            border-radius: var(--radius-md);
            background: color-mix(in srgb, var(--bg-tertiary) 90%, transparent);
            border: 1px solid color-mix(in srgb, var(--border-primary) 65%, transparent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            flex-shrink: 0;
            line-height: 1;
        }
        .dw-head-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
            padding-top: 2px;
        }
        .dw-title {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.2;
            overflow-wrap: anywhere;
        }
        .dw-subtitle {
            font-size: 10.5px;
            color: var(--text-secondary);
            line-height: 1.4;
            overflow-wrap: anywhere;
        }
        .dw-panel-body {
            padding: 12px 13px 14px;
            flex: 1;
            min-width: 0;
        }

        /* DataWorks KPI status accents */
        #dataworksKpis .kpi-item {
            border-radius: var(--radius-xl);
            position: relative;
            overflow: hidden;
            transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
        }
        #dataworksKpis .kpi-item::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: transparent;
            transition: background 0.2s ease;
        }
        #dataworksKpis .kpi-item[data-level="good"] {
            border-color: color-mix(in srgb, var(--color-success) 45%, var(--border-primary));
        }
        #dataworksKpis .kpi-item[data-level="good"]::before { background: var(--color-success); }
        #dataworksKpis .kpi-item[data-level="good"] .value {
            color: color-mix(in srgb, var(--color-success) 80%, var(--text-primary));
        }
        #dataworksKpis .kpi-item[data-level="warn"] {
            border-color: color-mix(in srgb, var(--color-warning) 45%, var(--border-primary));
        }
        #dataworksKpis .kpi-item[data-level="warn"]::before { background: var(--color-warning); }
        #dataworksKpis .kpi-item[data-level="warn"] .value {
            color: color-mix(in srgb, var(--color-warning) 80%, var(--text-primary));
        }
        #dataworksKpis .kpi-item[data-level="bad"] {
            border-color: color-mix(in srgb, var(--color-danger) 45%, var(--border-primary));
        }
        #dataworksKpis .kpi-item[data-level="bad"]::before { background: var(--color-danger); }
        #dataworksKpis .kpi-item[data-level="bad"] .value {
            color: color-mix(in srgb, var(--color-danger) 80%, var(--text-primary));
        }

        .dataworks-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 9px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.35px;
            text-transform: uppercase;
            border: 1px solid transparent;
            max-width: 100%;
            min-width: 0;
            white-space: nowrap;
            line-height: 1.3;
            flex-shrink: 0;
        }
        .dataworks-badge.good {
            color: var(--color-success);
            background: color-mix(in srgb, var(--color-success) 12%, transparent);
            border-color: color-mix(in srgb, var(--color-success) 26%, transparent);
        }
        .dataworks-badge.warn {
            color: var(--color-warning);
            background: color-mix(in srgb, var(--color-warning) 12%, transparent);
            border-color: color-mix(in srgb, var(--color-warning) 26%, transparent);
        }
        .dataworks-badge.bad {
            color: var(--color-danger);
            background: color-mix(in srgb, var(--color-danger) 12%, transparent);
            border-color: color-mix(in srgb, var(--color-danger) 28%, transparent);
        }
        .dataworks-badge.neutral {
            color: var(--text-secondary);
            background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
            border-color: color-mix(in srgb, var(--border-primary) 65%, transparent);
        }
        .dataworks-metric-list {
            display: flex;
            flex-direction: column;
        }
        .dataworks-metric-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 4px 10px;
            align-items: baseline;
            padding: 7px 0;
            border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 30%, transparent);
        }
        .dataworks-metric-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
        .dataworks-metric-label {
            font-size: 11px;
            color: var(--text-secondary);
            overflow-wrap: anywhere;
        }
        .dataworks-metric-value {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
            text-align: right;
            min-width: 0;
            overflow-wrap: anywhere;
            word-break: break-word;
        }
        .dataworks-metric-meta {
            grid-column: 1 / -1;
            font-size: 10.5px;
            color: var(--text-muted);
            overflow-wrap: anywhere;
            padding-bottom: 2px;
        }
        .dataworks-inline-list {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 10px;
        }
        .dataworks-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 9px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
            border: 1px solid color-mix(in srgb, var(--accent-blue) 22%, transparent);
            color: var(--accent-blue);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.2px;
        }
        .dataworks-table-wrap {
            border: 1px solid color-mix(in srgb, var(--border-primary) 75%, transparent);
            border-radius: var(--radius-md);
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
        }
        .dataworks-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 11px;
            min-width: 520px;
        }
        .dataworks-table th,
        .dataworks-table td {
            text-align: left;
            padding: 8px 10px;
            border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 55%, transparent);
            white-space: nowrap;
        }
        .dataworks-table th {
            color: var(--text-secondary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.35px;
            font-size: 10px;
            background: color-mix(in srgb, var(--bg-overlay) 55%, var(--bg-tertiary));
        }
        .dataworks-table tr:last-child td {
            border-bottom: none;
        }
        .dataworks-table tbody tr:hover td {
            background: color-mix(in srgb, var(--accent-blue) 5%, transparent);
        }
        .dataworks-note-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .dataworks-note {
            padding: 8px 11px;
            border: 1px solid color-mix(in srgb, var(--border-primary) 45%, transparent);
            border-radius: var(--radius-md);
            background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.5;
            overflow-wrap: anywhere;
        }
        .dataworks-note strong {
            color: var(--text-primary);
        }
        .dataworks-note a,
        .dataworks-panel a {
            color: var(--accent-blue);
        }
        .dataworks-empty {
            color: var(--text-secondary);
            font-size: 12px;
            padding: 4px 0;
        }

        /* Metrics mini-chart */
        .metrics-day {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            font-size: 12px;
            border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 20%, transparent);
        }
        .metrics-day .date {
            width: 80px;
            color: var(--text-secondary);
            flex-shrink: 0;
        }
        .metrics-bar-group {
            display: flex;
            gap: 3px;
            flex: 1;
            align-items: center;
        }
        .metrics-bar {
            height: 14px;
            border-radius: 3px;
            min-width: 2px;
            transition: width 0.3s ease;
        }
        .metrics-bar.inverter,
        .metrics-bar.foxess { background: var(--accent-blue); }
        .metrics-bar.amber { background: var(--color-orange); }
        .metrics-bar.weather { background: var(--color-success); }
        .metrics-bar.ev { background: var(--color-purple); }
        .metrics-day .total {
            width: 40px;
            text-align: right;
            color: var(--text-secondary);
            font-size: 11px;
        }
        .metrics-legend {
            display: flex;
            gap: 14px;
            margin-bottom: 8px;
            font-size: 11px;
            color: var(--text-secondary);
        }
        .metrics-legend span::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 2px;
            margin-right: 4px;
            vertical-align: middle;
        }
        .metrics-legend .inverter::before,
        .metrics-legend .foxess::before { background: var(--accent-blue); }
        .metrics-legend .amber::before { background: var(--color-orange); }
        .metrics-legend .weather::before { background: var(--color-success); }
        .metrics-legend .ev::before { background: var(--color-purple); }

        /* Impersonation banner */
        .impersonate-banner {
            display: none;
            background: linear-gradient(135deg, color-mix(in srgb, var(--color-danger) 15%, transparent), color-mix(in srgb, var(--color-danger) 5%, transparent));
            border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
            border-radius: var(--radius-lg);
            padding: 10px 16px;
            margin-bottom: 16px;
            font-size: 13px;
            color: var(--color-danger);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .impersonate-banner.active { display: flex; }

        /* Loading state */
        .loading-spinner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 60px 20px;
            color: var(--text-secondary);
            font-size: 14px;
        }

        /* Responsive */
        @media (max-width: 900px) {
            .container { padding: 12px; }
            .users-table th,
            .users-table td { padding: 8px 10px; font-size: 12px; }
            .actions-cell { flex-direction: column; }
            .chart-wrap { height: 200px; }
            .overview-status-lead {
                grid-template-columns: 1fr;
            }
            .overview-status-side {
                align-items: flex-start;
            }
            .overview-status-counts {
                justify-content: flex-start;
            }
            .overview-status-updated {
                text-align: left;
            }
            .users-summary-kpis,
            .users-summary-grid-2,
            .users-summary-grid-3 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .users-table-footer {
                align-items: flex-start;
            }
            .firestore-kpis {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .scheduler-lead {
                grid-template-columns: 1fr;
            }
            .scheduler-kpis {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .scheduler-slo-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .dataworks-grid-3 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            #dataworksKpis {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .admin-tab-nav { gap: 0; }
            .tab-btn { padding: 8px 14px; font-size: 13px; }
        }

        @media (max-width: 640px) {
            .container {
                padding: 10px;
            }
            .overview-status-grid {
                grid-template-columns: 1fr;
            }
            .overview-status-item-head {
                flex-direction: column;
                align-items: flex-start;
            }
            .scheduler-lead {
                padding: 14px;
            }
            .scheduler-focus-grid {
                grid-template-columns: 1fr;
            }
            .scheduler-accordion__summary {
                align-items: flex-start;
                flex-direction: column;
            }
            .users-summary-grid-2,
            .users-summary-grid-3 {
                grid-template-columns: 1fr;
            }
            .users-summary-panel {
                padding: 12px;
            }
            .users-summary-chart {
                height: 220px;
            }
            .users-summary-chart-compact {
                height: 190px;
            }
            .chart-html-legend {
                justify-content: flex-start;
                gap: 6px 12px;
            }
            .rank-row {
                display: grid;
                grid-template-columns: auto minmax(0, 1fr) auto;
                align-items: center;
                gap: 6px 8px;
            }
            .rank-label {
                grid-column: 2 / 4;
                white-space: normal;
                line-height: 1.3;
            }
            .rank-bar-track {
                grid-column: 2;
                width: 100%;
                flex: none;
            }
            .rank-badge {
                grid-column: 3;
                justify-self: end;
                min-width: 0;
            }
            .dataworks-grid-3 {
                grid-template-columns: 1fr;
            }
            .dw-panel-head { padding: 9px 11px 8px; }
            .dw-panel-body { padding: 9px 11px 12px; }
            .dataworks-metric-row {
                grid-template-columns: 1fr;
                gap: 2px;
            }
            .dataworks-metric-value {
                text-align: left;
                font-size: 12px;
            }
            .dataworks-table th,
            .dataworks-table td {
                padding: 7px 8px;
            }
        }

        @media (max-width: 420px) {
            .users-summary-kpis {
                grid-template-columns: 1fr;
            }
            .users-summary-kpi {
                padding: 11px 12px 10px;
            }
            .users-summary-kpi .value {
                font-size: 24px;
            }
            .dataworks-grid-3 {
                grid-template-columns: 1fr;
            }
            #dataworksKpis {
                grid-template-columns: 1fr;
            }
        }

        .behavior-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
            margin-top: 18px;
        }
        .behavior-panel {
            background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
            border: 1px solid var(--border-primary);
            border-radius: var(--radius-lg);
            padding: 16px;
        }
        .behavior-panel h3 {
            margin: 0 0 6px;
            font-size: 14px;
            color: var(--text-primary);
        }
        .behavior-panel p {
            margin: 0 0 12px;
            font-size: 12px;
            color: var(--text-secondary);
        }
        .behavior-chart-wrap {
            position: relative;
            min-height: 280px;
        }
        .behavior-chart-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .behavior-chart-filter {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--text-secondary);
            font-size: 12px;
        }
        .behavior-chart-filter select {
            background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
            border: 1px solid var(--border-primary);
            color: var(--text-primary);
            border-radius: 10px;
            padding: 8px 10px;
            min-width: 180px;
        }
        .behavior-window-filter {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--text-secondary);
            font-size: 11px;
            padding: 3px 8px;
            border: 1px solid var(--border-primary);
            border-radius: var(--radius-md);
            background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
        }
        .behavior-window-filter select {
            background: transparent;
            border: 0;
            color: var(--text-primary);
            font-size: 11px;
            outline: none;
            cursor: pointer;
        }
        .behavior-signals-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            margin-top: 12px;
        }
        .behavior-signal-card {
            background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
            border: 1px solid var(--border-primary);
            border-radius: var(--radius-lg);
            padding: 10px 12px;
        }
        .behavior-signal-card .label {
            margin: 0 0 6px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--text-secondary);
        }
        .behavior-signal-card .value {
            margin: 0;
            font-size: 12px;
            line-height: 1.5;
            color: var(--text-primary);
        }
        .behavior-coverage-panel {
            margin-top: 16px;
            padding: 16px;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-primary);
            background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
        }
        .behavior-coverage-panel h3 {
            margin: 0 0 6px;
            font-size: 14px;
            color: var(--text-primary);
        }
        .behavior-coverage-panel > p {
            margin: 0;
            font-size: 12px;
            color: var(--text-secondary);
        }
        .behavior-coverage-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            margin-top: 12px;
        }
        .behavior-coverage-card {
            padding: 12px;
            border-radius: var(--radius-md);
            border: 1px solid color-mix(in srgb, var(--border-primary) 70%, transparent);
            background: color-mix(in srgb, var(--bg-primary) 62%, transparent);
        }
        .behavior-coverage-card .label {
            margin: 0 0 6px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--text-secondary);
        }
        .behavior-coverage-card .value {
            margin: 0;
            font-size: 12px;
            line-height: 1.6;
            color: var(--text-primary);
        }
        .behavior-coverage-notes {
            display: grid;
            gap: 8px;
            margin-top: 12px;
        }
        .behavior-coverage-note {
            padding-left: 10px;
            border-left: 2px solid color-mix(in srgb, var(--accent-blue, #3b9eff) 70%, transparent);
            font-size: 12px;
            line-height: 1.5;
            color: var(--text-secondary);
        }
        .behavior-coverage-note[data-tone="warn"] {
            border-left-color: color-mix(in srgb, var(--color-warning) 75%, transparent);
        }
        .behavior-coverage-note[data-tone="good"] {
            border-left-color: color-mix(in srgb, var(--color-success, #7ee787) 75%, transparent);
        }
        .behavior-signup-panel {
            margin-top: 16px;
        }
        .behavior-signup-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            flex-wrap: wrap;
        }
        .behavior-signup-summary {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            margin-top: 12px;
        }
        .behavior-signup-card {
            padding: 12px;
            border-radius: var(--radius-md);
            border: 1px solid color-mix(in srgb, var(--border-primary) 70%, transparent);
            background: color-mix(in srgb, var(--bg-primary) 62%, transparent);
        }
        .behavior-signup-card .label {
            margin: 0 0 6px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--text-secondary);
        }
        .behavior-signup-card .value {
            margin: 0;
            font-size: 24px;
            line-height: 1.1;
            color: var(--text-primary);
        }
        .behavior-signup-filters {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            margin-top: 14px;
        }
        .behavior-signup-filters .behavior-chart-filter {
            justify-content: space-between;
            width: 100%;
        }
        .behavior-signup-filters .behavior-chart-filter select {
            min-width: 0;
            width: 100%;
        }
        .behavior-signup-note {
            margin-top: 8px;
            padding-top: 4px;
        }
        .behavior-signup-table .meta {
            line-height: 1.45;
        }
        .behavior-signup-status {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 8px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border: 1px solid color-mix(in srgb, var(--border-primary) 70%, transparent);
            background: color-mix(in srgb, var(--bg-primary) 62%, transparent);
            color: var(--text-primary);
            white-space: nowrap;
        }
        .behavior-signup-status[data-status="tracked"] {
            border-color: color-mix(in srgb, var(--color-success, #7ee787) 48%, transparent);
            color: var(--color-success, #7ee787);
        }
        .behavior-signup-status[data-status="unknown"] {
            border-color: color-mix(in srgb, var(--color-warning) 48%, transparent);
            color: var(--color-warning);
        }
        .behavior-signup-status[data-status="legacy_untracked"] {
            border-color: color-mix(in srgb, var(--text-secondary) 42%, transparent);
            color: var(--text-secondary);
        }
        .behavior-setup {
            display: none;
            margin-top: 16px;
            padding: 14px 16px;
            border-radius: var(--radius-lg);
            background: color-mix(in srgb, var(--color-warning) 10%, transparent);
            border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
            color: var(--color-warning);
            font-size: 13px;
            line-height: 1.5;
        }
        .behavior-empty {
            color: var(--text-secondary);
            font-size: 13px;
            padding: 14px 0 4px;
        }
        .behavior-table-wrap {
            overflow-x: auto;
        }
        .behavior-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }
        .behavior-table th,
        .behavior-table td {
            padding: 9px 8px;
            border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 40%, transparent);
            text-align: left;
            vertical-align: top;
        }
        .behavior-table th {
            font-size: 11px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .behavior-table .path {
            font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
            color: var(--text-primary);
        }
        .behavior-table .meta {
            display: block;
            margin-top: 4px;
            color: var(--text-secondary);
            font-size: 11px;
        }
        @media (max-width: 900px) {
            .behavior-grid {
                grid-template-columns: 1fr;
            }
            .behavior-signals-grid {
                grid-template-columns: 1fr;
            }
            .behavior-coverage-grid {
                grid-template-columns: 1fr;
            }
            .behavior-signup-summary {
                grid-template-columns: 1fr 1fr;
            }
            .behavior-signup-filters {
                grid-template-columns: 1fr;
            }
        }

        .api-health-lead {
            margin-top: 16px;
            padding: 14px 16px;
            border-radius: var(--radius-lg);
            border: 1px solid color-mix(in srgb, var(--border-primary) 65%, transparent);
            background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.6;
        }
        .api-health-lead strong {
            color: var(--text-primary);
        }
        .api-health-lead[data-level="good"] {
            border-color: color-mix(in srgb, var(--color-success) 28%, transparent);
            background: color-mix(in srgb, var(--color-success) 8%, var(--bg-secondary));
        }
        .api-health-lead[data-level="warn"] {
            border-color: color-mix(in srgb, var(--color-warning) 28%, transparent);
            background: color-mix(in srgb, var(--color-warning) 8%, var(--bg-secondary));
        }
        .api-health-lead[data-level="bad"] {
            border-color: color-mix(in srgb, var(--color-danger) 28%, transparent);
            background: color-mix(in srgb, var(--color-danger) 8%, var(--bg-secondary));
        }
        .api-health-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
            margin-top: 18px;
        }
        .api-health-panel {
            background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
            border: 1px solid var(--border-primary);
            border-radius: var(--radius-lg);
            padding: 16px;
        }
        .api-health-panel h3 {
            margin: 0 0 6px;
            font-size: 14px;
            color: var(--text-primary);
        }
        .api-health-panel p {
            margin: 0 0 12px;
            font-size: 12px;
            color: var(--text-secondary);
        }
        .api-health-chart-wrap {
            position: relative;
            min-height: 300px;
        }
        .api-health-chart-wrap-compact {
            min-height: 260px;
        }
        .api-health-alert-list {
            display: grid;
            gap: 10px;
        }
        .api-health-alert {
            border-radius: var(--radius-lg);
            border: 1px solid color-mix(in srgb, var(--border-primary) 65%, transparent);
            background: color-mix(in srgb, var(--bg-tertiary) 92%, transparent);
            padding: 12px 14px;
        }
        .api-health-alert.good {
            border-color: color-mix(in srgb, var(--color-success) 26%, transparent);
        }
        .api-health-alert.warn {
            border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
        }
        .api-health-alert.bad {
            border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
        }
        .api-health-alert-head {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 6px;
        }
        .api-health-alert-head strong {
            color: var(--text-primary);
            font-size: 13px;
        }
        .api-health-alert-body {
            color: var(--text-secondary);
            font-size: 12px;
            line-height: 1.55;
        }
        .api-health-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            padding: 4px 8px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            background: color-mix(in srgb, var(--bg-overlay) 85%, transparent);
            color: var(--text-secondary);
        }
        .api-health-badge.good {
            color: var(--color-success);
            background: color-mix(in srgb, var(--color-success) 12%, transparent);
        }
        .api-health-badge.warn {
            color: var(--color-warning);
            background: color-mix(in srgb, var(--color-warning) 12%, transparent);
        }
        .api-health-badge.bad {
            color: var(--color-danger);
            background: color-mix(in srgb, var(--color-danger) 12%, transparent);
        }
        .api-health-table-wrap {
            overflow-x: auto;
        }
        .api-health-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }
        .api-health-table th,
        .api-health-table td {
            padding: 9px 8px;
            border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 40%, transparent);
            text-align: left;
            vertical-align: top;
        }
        .api-health-table th {
            font-size: 11px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        #apiHealthKpis .kpi-item {
            min-width: 0;
        }
        #apiHealthKpis .label,
        #apiHealthKpis .sub {
            overflow-wrap: anywhere;
        }
        #apiHealthKpis .value.small {
            font-size: 18px;
            line-height: 1.15;
            overflow-wrap: anywhere;
            word-break: break-word;
        }
        .api-health-table td[data-label]::before {
            content: attr(data-label);
            display: none;
            margin-bottom: 4px;
            color: var(--text-secondary);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .api-health-provider-dot {
            display: inline-block;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            margin-right: 8px;
            vertical-align: middle;
        }
        .api-health-cell-primary {
            color: var(--text-primary);
            font-weight: 600;
            line-height: 1.3;
        }
        .api-health-cell-secondary {
            display: block;
            margin-top: 4px;
            color: var(--text-secondary);
            font-size: 11px;
            line-height: 1.45;
        }
        .api-health-breakdown-list {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 6px;
            margin-top: 6px;
        }
        .api-health-breakdown-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 7px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--bg-overlay) 78%, transparent);
            border: 1px solid color-mix(in srgb, var(--border-primary) 55%, transparent);
            color: var(--text-secondary);
            font-size: 10px;
            line-height: 1.2;
            white-space: nowrap;
        }
        .api-health-breakdown-chip strong {
            color: var(--text-primary);
            font-size: 10px;
            font-weight: 700;
        }
        .api-health-empty {
            color: var(--text-secondary);
            font-size: 13px;
            padding: 12px 0 4px;
        }
        .api-health-stack {
            display: grid;
            gap: 12px;
        }
        .api-health-driver-list {
            display: grid;
            gap: 10px;
            margin-top: 12px;
        }
        .api-health-driver-item {
            padding: 10px 12px;
            border-radius: 12px;
            background: color-mix(in srgb, var(--bg-overlay) 78%, transparent);
            border: 1px solid color-mix(in srgb, var(--border-primary) 55%, transparent);
        }
        .api-health-driver-item strong {
            display: block;
            margin-bottom: 4px;
            color: var(--text-primary);
            font-size: 13px;
        }
        .api-health-driver-item span {
            display: block;
            color: var(--text-secondary);
            font-size: 12px;
            line-height: 1.5;
        }
        @media (max-width: 900px) {
            .api-health-grid {
                grid-template-columns: 1fr;
            }
            .api-health-chart-wrap {
                min-height: 260px;
            }
        }

        @media (max-width: 640px) {
            #apiHealthKpis {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .api-health-panel {
                padding: 14px;
            }
            .api-health-lead {
                padding: 12px 14px;
            }
            #apiHealthKpis .kpi-item {
                padding: 10px 11px;
                gap: 3px;
            }
            #apiHealthKpis .label {
                font-size: 10px;
                line-height: 1.25;
            }
            #apiHealthKpis .value,
            #apiHealthKpis .value.small {
                font-size: 18px;
                line-height: 1.12;
            }
            #apiHealthKpis .sub {
                font-size: 10px;
                line-height: 1.35;
            }
            .api-health-table-wrap {
                overflow: visible;
            }
            .api-health-table,
            .api-health-table tbody,
            .api-health-table tr,
            .api-health-table td {
                display: block;
                width: 100%;
            }
            .api-health-table thead {
                display: none;
            }
            .api-health-table {
                border-collapse: separate;
                border-spacing: 0;
            }
            .api-health-table tr {
                margin-bottom: 12px;
                padding: 12px;
                border: 1px solid color-mix(in srgb, var(--border-primary) 60%, transparent);
                border-radius: var(--radius-lg);
                background: color-mix(in srgb, var(--bg-tertiary) 88%, transparent);
            }
            .api-health-table tr:last-child {
                margin-bottom: 0;
            }
            .api-health-table td {
                padding: 0;
                border: 0;
            }
            .api-health-table td + td {
                margin-top: 10px;
                padding-top: 10px;
                border-top: 1px solid color-mix(in srgb, var(--border-primary) 42%, transparent);
            }
            .api-health-table td[data-label]::before {
                display: block;
            }
            .api-health-chart-wrap {
                min-height: 220px;
            }
            .api-health-chart-wrap-compact {
                min-height: 220px;
            }
        }

        /* Admin Tabs */
        .admin-tab-nav {
            display: flex;
            gap: 2px;
            margin-bottom: 24px;
            border-bottom: 1px solid var(--border-primary);
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }
        .tab-btn {
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            padding: 9px 22px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-secondary);
            cursor: pointer;
            transition: color 0.15s, border-color 0.15s, background 0.15s;
            border-radius: var(--radius-sm) var(--radius-sm) 0 0;
            flex: 0 0 auto;
            white-space: nowrap;
        }
        .tab-btn:hover {
            color: var(--text-primary);
            background: color-mix(in srgb, var(--accent-blue) 6%, transparent);
        }
        .tab-btn.active {
            color: var(--accent-blue);
            border-bottom-color: var(--accent-blue);
            font-weight: 600;
        }
        .tab-panel { display: none; }
        .tab-panel.active { display: block; }

        /* ── Announcement grid ── */
        .announcement-grid {
            display: grid;
            gap: 20px;
            grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
        }

        /* Panel containers */
        .announcement-panel {
            background: color-mix(in srgb, var(--bg-overlay) 84%, transparent);
            border: 1px solid color-mix(in srgb, var(--border-primary) 70%, transparent);
            border-radius: var(--radius-xl);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .announcement-panel-head {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 14px 18px 13px;
            border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 45%, transparent);
            background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
        }
        .announcement-panel-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            line-height: 1;
            flex-shrink: 0;
        }
        .announcement-panel-icon.blue {
            background: color-mix(in srgb, var(--accent-blue) 14%, transparent);
            border: 1px solid color-mix(in srgb, var(--accent-blue) 24%, transparent);
        }
        .announcement-panel-icon.green {
            background: color-mix(in srgb, var(--color-success) 13%, transparent);
            border: 1px solid color-mix(in srgb, var(--color-success) 22%, transparent);
        }
        .announcement-panel-title-wrap h3 {
            margin: 0 0 2px;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .announcement-panel-title-wrap p {
            margin: 0;
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.45;
        }
        .announcement-panel-body {
            padding: 16px 18px 20px;
            flex: 1;
        }
        .announcement-lifecycle-panel {
            margin: 14px 0 18px;
            padding: 16px 18px;
            border-radius: var(--radius-xl);
            border: 1px solid color-mix(in srgb, var(--accent-blue) 18%, var(--border-primary));
            background:
                linear-gradient(135deg, color-mix(in srgb, var(--accent-blue) 12%, transparent), transparent 55%),
                color-mix(in srgb, var(--bg-overlay) 88%, transparent);
        }
        .announcement-lifecycle-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
        }
        .announcement-lifecycle-head strong {
            display: block;
            margin-bottom: 4px;
            font-size: 13px;
            color: var(--text-primary);
        }
        .announcement-lifecycle-head p {
            margin: 0;
            max-width: 900px;
            font-size: 12px;
            line-height: 1.55;
            color: var(--text-secondary);
        }
        .announcement-lifecycle-grid {
            display: grid;
            gap: 12px;
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .announcement-lifecycle-block {
            padding: 13px 14px;
            border-radius: var(--radius-lg);
            border: 1px solid color-mix(in srgb, var(--border-primary) 72%, transparent);
            background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
        }
        .announcement-lifecycle-block.accent {
            border-color: color-mix(in srgb, var(--accent-blue) 22%, transparent);
            background: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-secondary));
        }
        .announcement-lifecycle-eyebrow {
            display: inline-block;
            margin-bottom: 8px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-secondary);
        }
        .announcement-lifecycle-title {
            margin: 0 0 5px;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.4;
        }
        .announcement-lifecycle-copy {
            margin: 0;
            font-size: 12px;
            line-height: 1.55;
            color: var(--text-secondary);
        }

        /* Section dividers */
        .an-divider {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 18px 0 12px;
            font-size: 10px;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            user-select: none;
        }
        .an-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: color-mix(in srgb, var(--border-primary) 50%, transparent);
        }

        /* Form grid */
        .announcement-form-grid {
            display: grid;
            gap: 14px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .announcement-field {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .announcement-field.full {
            grid-column: 1 / -1;
        }
        .announcement-field label {
            font-size: 10px;
            font-weight: 700;
            color: var(--text-secondary);
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        .announcement-input,
        .announcement-textarea,
        .announcement-select {
            width: 100%;
            border-radius: var(--radius-lg);
            border: 1px solid color-mix(in srgb, var(--border-primary) 82%, transparent);
            background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
            color: var(--text-primary);
            padding: 9px 12px;
            font-size: 13px;
            line-height: 1.45;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .announcement-input:focus,
        .announcement-textarea:focus,
        .announcement-select:focus {
            outline: none;
            border-color: color-mix(in srgb, var(--accent-blue) 55%, transparent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 16%, transparent);
        }
        .announcement-textarea {
            min-height: 132px;
            resize: vertical;
        }
        .announcement-helper {
            color: var(--text-secondary);
            font-size: 11px;
            line-height: 1.5;
        }

        /* Severity pill indicator */
        .announcement-severity-wrap {
            position: relative;
        }
        .announcement-severity-dot {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 1;
            transition: background 0.15s;
        }
        .announcement-select.has-dot {
            padding-left: 26px;
        }

        /* Toggle switches */
        .announcement-toggle-grid {
            display: grid;
            gap: 8px;
        }
        .announcement-toggle {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 11px 13px;
            border-radius: var(--radius-lg);
            border: 1px solid color-mix(in srgb, var(--border-primary) 60%, transparent);
            background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
        }
        .announcement-toggle:hover {
            border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border-primary));
            background: color-mix(in srgb, var(--bg-secondary) 75%, transparent);
        }
        /* Native checkbox styled as a toggle track (appearance: none) */
        .a-toggle-cb {
            appearance: none;
            -webkit-appearance: none;
            position: relative;
            flex-shrink: 0;
            width: 36px;
            height: 20px;
            border-radius: 10px;
            background: color-mix(in srgb, var(--bg-overlay) 70%, var(--text-muted));
            border: 1.5px solid color-mix(in srgb, var(--border-primary) 85%, transparent);
            margin-top: 2px;
            cursor: pointer;
            transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
        }
        .a-toggle-cb::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: var(--text-muted);
            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .a-toggle-cb:checked {
            background: color-mix(in srgb, var(--accent-blue) 82%, black 18%);
            border-color: color-mix(in srgb, var(--accent-blue) 60%, transparent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 18%, transparent);
        }
        .a-toggle-cb:checked::before {
            transform: translateX(16px);
            background: #ffffff;
        }
        .announcement-toggle-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            letter-spacing: 0;
            display: block;
            margin-bottom: 2px;
        }
        .announcement-toggle-copy small,
        .announcement-meta,
        .announcement-audience-list {
            color: var(--text-secondary);
            font-size: 11px;
            line-height: 1.5;
        }
        .announcement-toggle-copy {
            display: flex;
            flex-direction: column;
        }

        /* Live preview */
        .announcement-preview-wrap {
            margin-top: 20px;
        }
        .announcement-preview-label {
            display: flex;
            align-items: center;
            gap: 7px;
            margin-bottom: 8px;
            font-size: 10px;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .announcement-preview-label-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--color-success);
            box-shadow: 0 0 5px color-mix(in srgb, var(--color-success) 55%, transparent);
            flex-shrink: 0;
            animation: a-pulse-dot 2.5s ease-in-out infinite;
        }
        @keyframes a-pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.75); }
        }
        .announcement-preview {
            display: none;
            border-radius: var(--radius-xl);
            border: 1px solid transparent;
            padding: 13px 15px 13px 19px;
            position: relative;
            overflow: hidden;
        }
        .announcement-preview.active {
            display: block;
        }
        .announcement-preview::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 4px;
            border-radius: var(--radius-xl) 0 0 var(--radius-xl);
        }
        .announcement-preview.info {
            background: rgba(56, 139, 253, 0.09);
            border-color: rgba(56, 139, 253, 0.24);
        }
        .announcement-preview.info::before { background: #388bfd; }
        .announcement-preview.success {
            background: rgba(46, 160, 67, 0.09);
            border-color: rgba(46, 160, 67, 0.24);
        }
        .announcement-preview.success::before { background: var(--color-success); }
        .announcement-preview.warning {
            background: rgba(210, 153, 34, 0.09);
            border-color: rgba(210, 153, 34, 0.28);
        }
        .announcement-preview.warning::before { background: var(--color-warning); }
        .announcement-preview.danger {
            background: rgba(248, 81, 73, 0.09);
            border-color: rgba(248, 81, 73, 0.24);
        }
        .announcement-preview.danger::before { background: var(--color-danger); }
        .announcement-preview-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 5px;
        }
        .announcement-preview-title {
            margin: 0;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.3;
        }
        .announcement-preview-close {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid color-mix(in srgb, var(--border-primary) 60%, transparent);
            background: color-mix(in srgb, var(--bg-overlay) 70%, transparent);
            color: var(--text-secondary);
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: default;
            opacity: 0.65;
            line-height: 1;
        }
        .announcement-preview-body {
            margin: 0;
            white-space: pre-wrap;
            color: var(--text-secondary);
            font-size: 12px;
            line-height: 1.6;
        }
        .announcement-preview-meta {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }
        .announcement-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--bg-tertiary) 88%, transparent);
            border: 1px solid color-mix(in srgb, var(--border-primary) 78%, transparent);
            color: var(--text-secondary);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.02em;
        }

        /* Audience summary info cards */
        .announcement-summary-list {
            display: grid;
            gap: 9px;
        }
        .announcement-summary-row {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 11px 13px;
            border-radius: var(--radius-lg);
            background: color-mix(in srgb, var(--bg-secondary) 65%, transparent);
            border: 1px solid color-mix(in srgb, var(--border-primary) 60%, transparent);
            transition: border-color 0.15s;
        }
        .announcement-summary-icon {
            font-size: 15px;
            line-height: 1;
            flex-shrink: 0;
            margin-top: 1px;
            opacity: 0.82;
        }
        .announcement-summary-row strong {
            display: block;
            margin-bottom: 3px;
            color: var(--text-primary);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.045em;
        }
        .announcement-summary-content {
            flex: 1;
            min-width: 0;
        }
        .announcement-performance-row {
            align-items: stretch;
        }
        .announcement-performance-content {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .announcement-performance-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px 12px;
            flex-wrap: wrap;
        }
        .announcement-performance-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 9px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--border-primary) 72%, transparent);
            background: color-mix(in srgb, var(--bg-overlay) 80%, transparent);
            color: var(--text-secondary);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            line-height: 1;
            white-space: nowrap;
        }
        .announcement-performance-badge[data-tone="tracked"] {
            border-color: color-mix(in srgb, var(--color-success) 28%, transparent);
            background: color-mix(in srgb, var(--color-success) 12%, transparent);
            color: color-mix(in srgb, var(--color-success) 78%, white 10%);
        }
        .announcement-performance-badge[data-tone="repeatable"] {
            border-color: color-mix(in srgb, var(--accent-blue) 24%, transparent);
            background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
            color: color-mix(in srgb, var(--accent-blue) 78%, white 8%);
        }
        .announcement-performance-badge[data-tone="warning"] {
            border-color: color-mix(in srgb, var(--color-warning) 28%, transparent);
            background: color-mix(in srgb, var(--color-warning) 12%, transparent);
            color: color-mix(in srgb, var(--color-warning) 82%, white 8%);
        }
        .announcement-performance-badge[data-tone="muted"] {
            border-color: color-mix(in srgb, var(--border-primary) 72%, transparent);
            background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
            color: var(--text-secondary);
        }
        .announcement-performance-badge[data-tone="error"] {
            border-color: color-mix(in srgb, var(--color-danger) 28%, transparent);
            background: color-mix(in srgb, var(--color-danger) 11%, transparent);
            color: color-mix(in srgb, var(--color-danger) 82%, white 8%);
        }
        .announcement-performance-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
            gap: 8px;
        }
        .announcement-performance-card {
            min-height: 104px;
            padding: 12px 13px;
            border-radius: var(--radius-lg);
            border: 1px solid color-mix(in srgb, var(--border-primary) 72%, transparent);
            background:
                linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 82%, transparent), color-mix(in srgb, var(--bg-overlay) 84%, transparent)),
                color-mix(in srgb, var(--bg-secondary) 68%, transparent);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 8px;
            transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
        }
        .announcement-performance-card.emphasis {
            border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border-primary));
            background:
                linear-gradient(180deg, color-mix(in srgb, var(--accent-blue) 10%, transparent), transparent 65%),
                color-mix(in srgb, var(--bg-secondary) 72%, transparent);
        }
        .announcement-performance-card.muted {
            border-style: dashed;
        }
        .announcement-performance-label {
            font-size: 10px;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            line-height: 1.3;
        }
        .announcement-performance-value {
            font-size: 27px;
            font-weight: 700;
            line-height: 1;
            color: var(--text-primary);
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.02em;
        }
        .announcement-performance-value.is-text {
            font-size: 15px;
            letter-spacing: 0;
            line-height: 1.25;
        }
        .announcement-performance-value.is-placeholder {
            color: var(--text-secondary);
        }
        .announcement-performance-sub {
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.5;
        }
        .announcement-performance-meter {
            display: grid;
            gap: 7px;
        }
        .announcement-performance-meter[hidden] {
            display: none;
        }
        .announcement-performance-meter-track {
            position: relative;
            overflow: hidden;
            height: 8px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--border-primary) 55%, transparent);
            background: color-mix(in srgb, var(--bg-tertiary) 88%, transparent);
        }
        .announcement-performance-meter-fill {
            height: 100%;
            width: 0%;
            border-radius: inherit;
            background: linear-gradient(90deg, color-mix(in srgb, var(--accent-blue) 72%, var(--color-warning)), color-mix(in srgb, var(--color-warning) 82%, white 4%));
            transition: width 0.24s ease;
        }
        .announcement-performance-meter-labels {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            font-size: 10px;
            color: var(--text-secondary);
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .announcement-performance-note {
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.55;
        }
        .notifications-toolbar {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .notifications-intro {
            margin: 14px 0 18px;
            padding: 16px 18px;
            border-radius: var(--radius-xl);
            border: 1px solid color-mix(in srgb, var(--accent-blue) 18%, var(--border-primary));
            background:
                linear-gradient(135deg, color-mix(in srgb, var(--accent-blue) 10%, transparent), transparent 58%),
                color-mix(in srgb, var(--bg-overlay) 88%, transparent);
        }
        .notifications-intro-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 14px;
        }
        .notifications-intro-head strong {
            display: block;
            margin-bottom: 4px;
            font-size: 13px;
            color: var(--text-primary);
        }
        .notifications-intro-head p {
            margin: 0;
            max-width: 880px;
            font-size: 12px;
            line-height: 1.55;
            color: var(--text-secondary);
        }
        .notifications-status-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 12px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--accent-blue) 24%, transparent);
            background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
            color: var(--text-primary);
            font-size: 11px;
            font-weight: 700;
            white-space: nowrap;
        }
        .notifications-status-pill::before {
            content: '';
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent-blue);
            box-shadow: 0 0 8px color-mix(in srgb, var(--accent-blue) 45%, transparent);
            flex-shrink: 0;
        }
        .notifications-status-pill[data-state="muted"] {
            border-color: color-mix(in srgb, var(--border-primary) 78%, transparent);
            background: color-mix(in srgb, var(--bg-secondary) 74%, transparent);
            color: var(--text-secondary);
        }
        .notifications-status-pill[data-state="muted"]::before {
            background: var(--text-muted);
            box-shadow: none;
        }
        .notifications-intro-grid {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .notifications-intro-card {
            padding: 13px 14px;
            border-radius: var(--radius-lg);
            border: 1px solid color-mix(in srgb, var(--border-primary) 72%, transparent);
            background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
            min-height: 104px;
        }
        .notifications-intro-card strong {
            display: block;
            margin-bottom: 6px;
            font-size: 15px;
            color: var(--text-primary);
            line-height: 1.3;
        }
        .notifications-intro-card p {
            margin: 0;
            font-size: 11px;
            line-height: 1.55;
            color: var(--text-secondary);
        }
        .notifications-layout {
            display: grid;
            gap: 20px;
            grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
            align-items: start;
        }
        .notifications-stack,
        .notifications-sticky-column {
            display: grid;
            gap: 16px;
        }
        .notifications-sticky-column {
            position: sticky;
            top: 18px;
        }
        .notifications-panel-body {
            display: grid;
            gap: 16px;
        }
        .notifications-subpanel {
            padding: 14px;
            border-radius: var(--radius-lg);
            border: 1px solid color-mix(in srgb, var(--border-primary) 68%, transparent);
            background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
        }
        .notifications-subpanel-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }
        .notifications-subpanel-head strong {
            display: block;
            margin-bottom: 4px;
            font-size: 12px;
            color: var(--text-primary);
        }
        .notifications-subpanel-head p {
            margin: 0;
            font-size: 11px;
            line-height: 1.5;
            color: var(--text-secondary);
        }
        .notifications-toggle-columns {
            display: grid;
            gap: 8px;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        }
        .notifications-toggle-columns .announcement-toggle {
            height: 100%;
        }
        .notifications-inline-label {
            margin: 14px 0 8px;
            font-size: 10px;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .notifications-cooldown-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            margin-top: 12px;
        }
        .notifications-inline-helper {
            margin-top: 10px;
        }
        .notifications-summary-card {
            padding: 13px 14px;
            border-radius: var(--radius-lg);
            border: 1px solid color-mix(in srgb, var(--border-primary) 68%, transparent);
            background: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
        }
        .notifications-summary-card strong {
            display: block;
            margin-bottom: 8px;
            font-size: 12px;
            color: var(--text-primary);
        }
        .notifications-summary-list {
            display: grid;
            gap: 6px;
        }
        .notifications-summary-line {
            font-size: 11px;
            line-height: 1.55;
            color: var(--text-secondary);
        }
        .notifications-audience-grid {
            margin-top: 12px;
        }
        .notifications-inline-note {
            min-height: 100%;
            padding: 12px;
            border-radius: var(--radius-lg);
            border: 1px solid color-mix(in srgb, var(--border-primary) 65%, transparent);
            background: color-mix(in srgb, var(--bg-overlay) 72%, transparent);
            font-size: 11px;
            line-height: 1.55;
            color: var(--text-secondary);
        }
        .notifications-compact-textarea {
            min-height: 92px;
        }
        .notifications-broadcast-body {
            min-height: 156px;
        }
        .notifications-preview-wrap {
            margin-top: 0;
        }
        .notifications-composer-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .notifications-composer-footer .action-btn {
            padding-inline: 14px;
        }
        .notifications-kpis-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .notifications-campaign-list {
            display: grid;
            gap: 10px;
        }
        .notifications-campaign-card {
            padding: 12px 13px;
            border-radius: var(--radius-lg);
            border: 1px solid color-mix(in srgb, var(--border-primary) 65%, transparent);
            background: color-mix(in srgb, var(--bg-overlay) 74%, transparent);
        }
        .notifications-campaign-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.35;
        }
        .notifications-campaign-meta {
            margin-top: 4px;
            font-size: 11px;
            line-height: 1.5;
            color: var(--text-secondary);
        }
        .notifications-campaign-chips {
            margin-top: 9px;
        }
        .notifications-empty-state {
            font-size: 12px;
            line-height: 1.6;
            color: var(--text-secondary);
        }

        @media (max-width: 1100px) {
            .announcement-grid {
                grid-template-columns: 1fr;
            }
            .announcement-lifecycle-grid {
                grid-template-columns: 1fr;
            }
            .notifications-intro-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .notifications-layout {
                grid-template-columns: 1fr;
            }
            .notifications-sticky-column {
                position: static;
            }
        }

        @media (max-width: 720px) {
            #apiHealthKpis {
                grid-template-columns: 1fr;
            }
            .announcement-form-grid {
                grid-template-columns: 1fr;
            }
            .notifications-intro-grid,
            .notifications-kpis-grid,
            .notifications-cooldown-grid {
                grid-template-columns: 1fr;
            }
            .notifications-status-pill {
                white-space: normal;
            }
            .notifications-intro-head,
            .notifications-subpanel-head,
            .notifications-composer-footer {
                flex-direction: column;
                align-items: flex-start;
            }
        }