/* Antigravity Manager - Styles
 * Premium dark-first control surface with an explicit light option.
 */

:root {
    /* Border Radius System */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --text-xs: 11px;
    --text-sm: 13px;

    color-scheme: dark;

    /* Colors */
    --bg-primary: #080b12;
    --bg-secondary: #0d121c;
    --bg-tertiary: #151c29;
    --bg-card: #101722;
    --bg-hover: #1a2434;
    --bg-elevated: #141d2a;
    --surface-primary: var(--bg-card);
    --surface-secondary: var(--bg-tertiary);
    --surface-glass: rgba(13, 18, 28, 0.92);
    --surface-soft: rgba(17, 24, 37, 0.9);
    --input-bg: #0b111b;
    --checkbox-bg: #0b111b;
    --toggle-thumb: #eef2f7;
    --track-bg: rgba(148, 163, 184, 0.16);
    --inset-highlight: rgba(255, 255, 255, 0.045);
    --accent-muted: rgba(129, 140, 248, 0.13);
    --hero-card-gradient: linear-gradient(180deg, rgba(22, 30, 44, 0.98) 0%, rgba(15, 22, 34, 0.98) 100%);
    --quota-card-gradient: linear-gradient(180deg, #151e2d 0%, #101722 100%);
    --danger-card-gradient: linear-gradient(180deg, rgba(64, 23, 34, 0.76) 0%, rgba(27, 17, 25, 0.96) 100%);
    --warning-card-gradient: linear-gradient(180deg, rgba(62, 44, 17, 0.72) 0%, rgba(28, 22, 15, 0.96) 100%);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");

    --text-primary: #f4f7fb;
    --text-secondary: #b7c2d2;
    --text-tertiary: #8f9db1;
    --text-muted: #68778d;

    --accent-primary: #818cf8;
    --accent-secondary: #a78bfa;
    --accent-success: #34d399;
    --accent-danger: #fb7185;
    --accent-warning: #fbbf24;
    --accent-success-muted: rgba(52, 211, 153, 0.12);
    --accent-danger-muted: rgba(251, 113, 133, 0.12);
    --accent-warning-muted: rgba(251, 191, 36, 0.12);

    --border-color: rgba(148, 163, 184, 0.16);
    --border-subtle: rgba(148, 163, 184, 0.11);
    --border-default: rgba(148, 163, 184, 0.24);
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.025), 0 18px 42px -28px rgba(0, 0, 0, 0.86);
    --shadow-card-hover: 0 20px 46px -28px rgba(0, 0, 0, 0.94);
    /* Typography */

    --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    /* Sizes */
    --sidebar-width: 240px;
}

html[data-theme="light"] {
    color-scheme: light;
    --bg-primary: #f6f8fb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eef2f7;
    --bg-card: #ffffff;
    --bg-hover: #e8eef7;
    --bg-elevated: #ffffff;
    --surface-glass: rgba(255, 255, 255, 0.92);
    --surface-soft: rgba(255, 255, 255, 0.9);
    --input-bg: #ffffff;
    --checkbox-bg: #ffffff;
    --toggle-thumb: #ffffff;
    --track-bg: rgba(15, 23, 42, 0.08);
    --inset-highlight: rgba(255, 255, 255, 0.72);
    --accent-muted: rgba(79, 70, 229, 0.10);
    --hero-card-gradient: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    --quota-card-gradient: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    --danger-card-gradient: linear-gradient(180deg, #fffafa 0%, #fff5f5 100%);
    --warning-card-gradient: linear-gradient(180deg, #fffaf5 0%, #fffbeb 100%);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
    --text-primary: #111827;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-muted: #94a3b8;
    --accent-primary: #4f46e5;
    --accent-secondary: #6366f1;
    --accent-success: #047857;
    --accent-danger: #dc2626;
    --accent-warning: #b45309;
    --accent-success-muted: rgba(4, 120, 87, 0.10);
    --accent-danger-muted: rgba(220, 38, 38, 0.10);
    --accent-warning-muted: rgba(180, 83, 9, 0.12);
    --border-color: rgba(15, 23, 42, 0.10);
    --border-subtle: rgba(15, 23, 42, 0.07);
    --border-default: rgba(15, 23, 42, 0.16);
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 30px -24px rgba(15, 23, 42, 0.34);
    --shadow-card-hover: 0 16px 34px -28px rgba(15, 23, 42, 0.46);
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"] {
        color-scheme: light;
        --bg-primary: #f6f8fb;
        --bg-secondary: #ffffff;
        --bg-tertiary: #eef2f7;
        --bg-card: #ffffff;
        --bg-hover: #e8eef7;
        --bg-elevated: #ffffff;
        --surface-glass: rgba(255, 255, 255, 0.92);
        --surface-soft: rgba(255, 255, 255, 0.9);
        --input-bg: #ffffff;
        --checkbox-bg: #ffffff;
        --toggle-thumb: #ffffff;
        --track-bg: rgba(15, 23, 42, 0.08);
        --inset-highlight: rgba(255, 255, 255, 0.72);
        --accent-muted: rgba(79, 70, 229, 0.10);
        --hero-card-gradient: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        --quota-card-gradient: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        --danger-card-gradient: linear-gradient(180deg, #fffafa 0%, #fff5f5 100%);
        --warning-card-gradient: linear-gradient(180deg, #fffaf5 0%, #fffbeb 100%);
        --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
        --text-primary: #111827;
        --text-secondary: #475569;
        --text-tertiary: #64748b;
        --text-muted: #94a3b8;
        --accent-primary: #4f46e5;
        --accent-secondary: #6366f1;
        --accent-success: #047857;
        --accent-danger: #dc2626;
        --accent-warning: #b45309;
        --accent-success-muted: rgba(4, 120, 87, 0.10);
        --accent-danger-muted: rgba(220, 38, 38, 0.10);
        --accent-warning-muted: rgba(180, 83, 9, 0.12);
        --border-color: rgba(15, 23, 42, 0.10);
        --border-subtle: rgba(15, 23, 42, 0.07);
        --border-default: rgba(15, 23, 42, 0.16);
        --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 30px -24px rgba(15, 23, 42, 0.34);
        --shadow-card-hover: 0 16px 34px -28px rgba(15, 23, 42, 0.46);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

/* App Container */
.app-container {
    display: flex;
    height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    height: 100%;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    -webkit-app-region: drag;
}

.sidebar-header {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    -webkit-app-region: no-drag;
}

.logo-icon {
    font-size: 24px;
}

.logo-text {
    font-size: 18px;
    font-weight: 600;
}

.version {
    font-size: 11px;
    color: var(--text-tertiary);
    background: transparent;
    padding: 0;
    border-radius: var(--radius-md);
    width: fit-content;
    opacity: 1;
}

.sidebar-nav {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    -webkit-app-region: no-drag;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.15s ease;
}

.nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-item.active {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    position: relative;
    border-radius: var(--radius-md);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    width: 3px;
    background: rgba(91, 91, 214, 0.7);
    border-radius: 2px;
}

.nav-icon {
    font-size: 18px;
}

.nav-label {
    font-size: 14px;
    font-weight: 500;
}

.sidebar-footer {
    padding: 8px;
    border-top: 1px solid var(--border-color) !important;
    margin-top: 16px;
    margin-left: 16px;
    margin-right: 16px;
    -webkit-app-region: no-drag;
}

/* Main Content */
.main-content {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    background: var(--bg-primary);
}

.page {
    padding: 32px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

.page-header h1 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.subtitle {
    color: var(--text-secondary);
    margin-top: 4px;
}

.header-actions {
    display: flex;
    gap: 12px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    text-decoration: none;
    background: transparent;
    color: var(--text-secondary);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.btn--primary {
    background: #4f4fbc;
    color: #fff;
    border: 1px solid rgba(99, 102, 241, 0.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.btn--primary:hover {
    background: #5a5ac7;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 8px rgba(79, 79, 188, 0.3);
}

.btn--secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.btn--secondary:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.btn--danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.btn--danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
}

.btn--ghost:hover {
    background: var(--bg-hover);
}

.btn--icon {
    padding: 8px;
    width: 36px;
    height: 36px;
}

.btn--loading {
    opacity: 0.7;
    pointer-events: none;
}

.btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.btn:active {
    transform: translateY(0) scale(0.98);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.stats-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.stats-card:hover {
    transform: translateY(-2px);
    border-color: rgba(79, 70, 229, 0.18);
    box-shadow: var(--shadow-card-hover);
}

.stats-card__value {
    font-size: 28px;
    font-weight: 600;
}

.stats-card__title {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Tables */
.accounts-table-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow-x: auto;
    overflow-y: hidden;
}

.accounts-table {
    width: 100%;
    min-width: 1320px;
    border-collapse: collapse;
}

.accounts-table th,
.accounts-table td {
    padding:   12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}

.accounts-table td:last-child {
    white-space: nowrap;
}

.accounts-table th {
    background: var(--bg-tertiary);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.account-row:hover {
    background: var(--bg-hover);
}

.account-row.is-current {
    background: rgba(99, 102, 241, 0.1);
}

.account-row.is-selected {
    background: rgba(99, 102, 241, 0.15);
}

/* Status dots */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot--active,
.status-dot--running {
    background: var(--accent-success);
    box-shadow: 0 0 8px var(--accent-success);
}

.status-dot--idle {
    background: var(--text-tertiary);
}

.status-dot--disabled,
.status-dot--stopped {
    background: var(--accent-danger);
}

.status-dot--banned {
    background: #dc2626;
    box-shadow: 0 0 8px #dc2626, 0 0 16px rgba(220, 38, 38, 0.4);
    animation: pulse 1.5s infinite;
}

.status-dot--locked {
    background: var(--accent-warning);
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

.banned-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-md);
    font-size: 10px;
    font-weight: 700;
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
    margin-left: 8px;
    letter-spacing: 0.5px;
}

.locked-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-md);
    font-size: 10px;
    font-weight: 700;
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    margin-left: 8px;
    letter-spacing: 0.5px;
}

.disabled-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-md);
    font-size: 10px;
    font-weight: 700;
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    margin-left: 8px;
    letter-spacing: 0.5px;
}

/* Quota bars */
.quota-bar {
    width: 80px;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-full);
    overflow: hidden;
    display: inline-block;
    margin-right: var(--space-2);
}

.quota-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.quota-fill--good {
    background: var(--accent-success);
}

.quota-fill--warning {
    background: var(--accent-warning);
}

.quota-fill--critical {
    background: var(--accent-danger);
}

.quota-text {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 64px 32px;
    color: var(--text-secondary);
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}

/* Toolbar */
.toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.search-box {
    position: relative;
}

.search-box::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    pointer-events: none;
}

.search-box input {
    background: var(--bg-tertiary);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    padding: 10px 16px 10px 38px;
    color: var(--text-primary);
    width: 280px;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-box input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.sort-select,
.tier-select {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sort-select select,
.tier-select select {
    background: var(--bg-tertiary);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 9px 12px;
    font-size: 13px;
    min-width: 160px;
}

.sort-select select:focus,
.tier-select select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.visibility-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.visibility-toggle:has(input:checked) {
    border-color: rgba(99, 102, 241, 0.34);
    color: var(--text-primary);
}

input::placeholder,
.search-box input::placeholder,
.accounts-search input::placeholder,
.search-input::placeholder,
textarea::placeholder {
    color: #71717a !important;
    opacity: 1 !important;
}

.selection-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.selection-count {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Code blocks */
pre {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 16px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 13px;
}

code {
    font-family: var(--font-mono);
}

/* Sections */
section {
    margin-bottom: 32px;
}

section h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Status card */
.status-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 16px;
}

.status-indicator h3 {
    font-size: 18px;
    margin-bottom: 4px;
}

.status-indicator p {
    color: var(--text-secondary);
    font-size: 13px;
}

/* Config grid */
.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.config-item label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.config-item input[type="number"],
.config-item input[type="text"] {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: 14px;
}

/* Settings */
.settings-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 24px;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-subtle);
    gap: 16px;
}

.setting-row:last-child {
    border-bottom: none;
}

.setting-info label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    display: block;
}

.setting-desc {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* Monitor */
.monitor-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.recording-btn, .btn-recording {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(251, 113, 133, 0.12);
    color: #fb7185;
    border: 1px solid rgba(251, 113, 133, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    cursor: pointer;
}

.recording-btn.recording {
    background: rgba(251, 113, 133, 0.12);
    color: var(--accent-danger);
}

.recording-btn.paused {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.recording-btn .dot, .recording-btn .recording-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-danger);
}

.recording-btn.recording .dot, .recording-btn .recording-dot {
    animation: pulse-recording 2s ease-in-out infinite;
}

@keyframes pulse-recording {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.quick-filters {
    display: flex;
    gap: 8px;
}

.quick-filters button,
.monitor-filters .filter-btn,
.monitor-filters button {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all 0.15s;
}

.quick-filters button.active,
.monitor-filters .filter-btn.active,
.monitor-filters button.active {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-secondary);
    border-color: rgba(99, 102, 241, 0.3);
}

.header-stats, .monitor-stats {
    display: flex;
    gap: 16px;
}

.stat {
    font-size: var(--text-sm);
    font-weight: 500;
}

.stat--success, .monitor-stats .stat-ok {
    color: var(--accent-success);
    opacity: 0.8;
}

.stat--error, .monitor-stats .stat-err {
    color: var(--accent-danger);
    opacity: 0.8;
}

.stat--total {
    color: var(--text-secondary);
}

.monitor-stats .stat-value {
    font-weight: 600;
}

.logs-table {
    width: 100%;
    border-collapse: collapse;
}

.logs-table th,
.logs-table td {
    padding:   12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.logs-table th {
    background: var(--bg-tertiary);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
}

.status-badge--success {
    background: var(--accent-success-muted);
    color: var(--accent-success);
}

.status-badge--info {
    background: rgba(14, 165, 233, 0.10);
    color: #0284c7;
}

.status-badge--error {
    background: var(--accent-danger-muted);
    color: var(--accent-danger);
}

.status-badge.status-200,
.status-200 {
    background: rgba(52, 211, 153, 0.1);
    color: #34d399;
    font-size: var(--text-xs);
}

.proxy-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 600;
}

.proxy-badge.on {
    background: var(--accent-success-muted);
    color: var(--accent-success);
}

.proxy-badge.off {
    background: var(--border-color);
    color: var(--text-tertiary);
}

.proxy-cell,
.account-card-proxy__status {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.proxy-cell {
    flex-direction: column;
    align-items: flex-start;
}

.proxy-route {
    max-width: 174px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.15;
    color: var(--text-secondary);
}

.proxy-route--inactive {
    color: var(--text-tertiary);
}

.proxy-route--missing {
    color: var(--accent-danger);
}

.back-link, a[href="/proxy"].back-link {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    transition: color 0.15s;
}
.back-link:hover {
    color: var(--text-primary);
}

.monitor-controls button:not([class]):empty,
.monitor-controls button:empty,
.quick-filters + div button:empty,
.monitor-toolbar button:empty {
    display: none !important;
    width: 0;
    height: 0;
    overflow: hidden;
}

.tokens-in {
    color: var(--accent-primary);
    opacity: 0.7;
}
.tokens-out {
    color: var(--accent-success);
    opacity: 0.7;
}
.tokens-cached {
    color: var(--accent-secondary);
    opacity: 0.85;
}

/* Tier cards */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.tier-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tier-card:hover {
    transform: translateY(-2px);
}

.tier-card--ultra {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.15);
}

.tier-card--pro {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-color: rgba(99, 102, 241, 0.3);
}

.tier-card--free {
    background: var(--bg-card);
}

.tier-card--warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(239, 68, 68, 0.1) 100%);
    border-color: rgba(245, 158, 11, 0.3);
}

.tier-count {
    display: block;
    display: flex; justify-content: center; align-items: center; color: var(--accent-primary);
    font-weight: 600;
}

.tier-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.tier-card--ultra .tier-count {
    color: #fbbf24;
    text-shadow: none;
}

.tier-card--pro .tier-count {
    color: var(--accent-primary);
    text-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

.tier-card--free .tier-count {
    color: var(--text-secondary);
}

.tier-card--warning .tier-count {
    color: var(--accent-warning);
    text-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

/* Action grid */
.action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.15s ease;
}

.action-card:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

.action-icon {
    display: flex; justify-content: center; align-items: center; color: var(--accent-primary);
}

.action-label {
    font-size: 14px;
    font-weight: 500;
}

/* API Key section */
.api-key-row {
    display: flex;
    gap: 12px;
}

.api-key-input {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-mono);
}

.api-key-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.api-key-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Code example */
.code-example {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.code-header {
    background: var(--bg-tertiary);
    padding: 8px 16px;
    font-size: 12px;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
}

/* Current account */
.current-account-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.no-account {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 32px;
    text-align: center;
}

/* Back button */
.back-button {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    margin-right: 16px;
}

.back-button:hover {
    color: var(--text-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: var(--radius-md);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Alert banners */
.alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 14px;
}

.alert--success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--accent-success);
}

.alert--error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--accent-danger);
}

.alert--warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--accent-warning);
}

.alert-icon {
    font-size: 18px;
}

/* Current badge */
.current-badge {
    display: inline-block;
    padding: 2px 6px;
    background: var(--accent-primary);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--radius-md);
    margin-left: 8px;
}

/* Token stats */
.token-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 20px;
}

.token-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.token-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.token-value {
    font-size: 20px;
    font-weight: 600;
    font-family: var(--font-mono);
}

.tokens-in {
    color: var(--accent-primary);
    opacity: 0.7;
}

.tokens-cached {
    color: var(--accent-secondary);
    font-size: 0.9em;
    opacity: 0.85;
}

.tokens-out {
    color: var(--accent-success);
    opacity: 0.7;
}

/* Model styling in logs */
.model-name {
    font-family: var(--font-mono);
    font-size: 12px;
}

.model-mapped {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Time column */
.col-time {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
}

/* Error row */
.log-row.has-error {
    background: rgba(239, 68, 68, 0.05);
}

/* Toolbar right */
.toolbar-right {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.controls-right {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

/* Update section */
.update-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.update-available {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.update-badge {
    background: var(--accent-success);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-md);
    font-size: 10px;
    font-weight: 600;
}

/* Version text */
.version-text {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-secondary);
}

/* Empty actions */
.empty-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

/* Email styling */
.email-text {
    font-family: var(--font-mono);
    font-size: 13px;
}

/* Small button variant */
.btn--sm,
.account-actions button,
.actions-cell button {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.account-actions button:hover,
.actions-cell button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.account-actions button.btn-danger,
.account-actions .del-btn,
.actions-cell .btn--danger {
    color: var(--accent-danger);
    border-color: rgba(251, 113, 133, 0.2);
}

/* Dim non-essential buttons for unhealthy accounts (only USE is dimmed) */
.actions-dimmed .btn--sm {
    opacity: 0.35;
    pointer-events: none;
}
/* Admin/diagnostic buttons stay active: DEL, INF, REF, WRM, VRF */
.actions-dimmed .btn--danger,
.actions-dimmed .btn--action {
    opacity: 1;
    pointer-events: auto;
}

/* Warning status badge */
.status-badge--warning {
    background: var(--accent-warning-muted);
    color: var(--accent-warning);
}

/* Hint text */
.hint {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* Toggle switch enhancement */
.toggle {
    width:  36px;
    height:  20px;
    appearance: none;
    border: none;
    outline: none;
    background: rgba(255,255,255,0.10);
    border-radius:  999px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle::before {
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    content: '';
    position: absolute;
    width:  14px;
    height:  14px;
    border-radius: 50%;
    background: #d4d4d8;
    top:  3px;
    left:  3px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle:checked {
    background: var(--accent-primary);
}

.toggle:checked::before {
    transform: translateX(16px);
    background: #fff;
}

/* Logs table container */
.logs-table-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Select styling */
select {
    background: var(--bg-tertiary);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    padding: 8px 32px 8px 12px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    min-width: 120px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a1a1a6' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5l-5-5h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Global input dark backgrounds — prevents white inputs */
input[type="number"],
input[type="text"],
input:not([type]):not(.toggle),
textarea {
    background: var(--bg-tertiary) !important;
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    color-scheme: light !important;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
}

/* ========================================
   Modal Dialog
   ======================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 420px;
    animation: modalEnter 0.25s ease;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
}

.modal-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    border-radius: var(--radius-lg);
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-body {
    padding: 20px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes modalEnter {
    from {
        transform: scale(0.95) translateY(10px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* ========================================
   Pagination
   ======================================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
}

.pagination-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pagination-total {
    font-size: 13px;
    color: var(--text-secondary);
}

.pagination-size {
    padding: 4px 8px;
    font-size: 12px;
    min-width: 100px;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination-btn {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.pagination-ellipsis {
    color: var(--text-tertiary);
    padding: 0 8px;
}

/* ========================================
   Account Card (Grid View)
   ======================================== */
.accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 16px;
}

.account-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.account-card:hover {
    border-color: var(--border-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.account-card.is-current {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary);
}

.account-card.is-selected {
    background: rgba(99, 102, 241, 0.1);
}

.account-card.is-disabled {
    opacity: 0.5;
}

.account-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.account-card-email {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin-bottom: 12px;
}

.account-card-email .account-imported-at {
    flex-basis: 100%;
}

.email-name {
    font-weight: 500;
    font-size: 15px;
}

.email-domain {
    color: var(--text-tertiary);
    font-size: 14px;
}

.account-imported-at {
    color: var(--text-tertiary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.account-imported-at--table {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.2;
    white-space: nowrap;
}

.account-imported-time {
    color: var(--text-secondary);
    font-weight: 500;
}

.account-card-quotas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.account-card-quotas.model-quota-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.account-card-quotas.model-quota-grid .quota-item {
    padding: 6px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.account-card-quotas.model-quota-grid .quota-bar {
    width: 80px;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-full);
    overflow: hidden;
    display: inline-block;
    margin-right: var(--space-2);
}

.account-card-quotas.model-quota-grid .quota-value {
    font-size: 11px;
    font-weight: 600;
}

.quota-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quota-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.quota-header-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.quota-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.quota-reset {
    font-size: 10px;
    font-family: monospace;
    display: flex;
    align-items: center;
    gap: 2px;
}

.quota-reset.reset-time--success {
    color: var(--accent-success);
}

.quota-reset.reset-time--warning {
    color: var(--accent-warning);
}

.quota-reset.reset-time--neutral {
    color: var(--text-muted);
    opacity: 0.7;
}

.quota-runtime-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: rgba(251, 113, 133, 0.14);
    border: 1px solid rgba(251, 113, 133, 0.2);
    color: #fb7185;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.quota-cell--blocked .quota-bar,
.quota-item:has(.quota-runtime-badge) .quota-bar {
    background: rgba(251, 113, 133, 0.08);
}

.account-card-proxy {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
    margin-bottom: 12px;
}

.proxy-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.proxy-toggle {
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.proxy-toggle.on {
    background: var(--accent-success-muted);
    color: var(--accent-success);
}

.proxy-toggle.off {
    background: var(--accent-danger-muted);
    color: var(--accent-danger);
}

.account-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ========================================
   View Toggle
   ======================================== */
.view-toggle {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 4px;
}

.view-toggle button {
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.view-toggle button:hover {
    color: var(--text-primary);
}

.view-toggle button.active {
    background: var(--bg-card);
    color: var(--accent-primary);
}

/* ========================================
   Filter Tabs
   ======================================== */
.filter-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 4px;
}

.filter-tabs button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-tabs button:hover {
    color: var(--text-primary);
}

.filter-tabs button.active {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-secondary);
}

.filter-count {
    font-size: 11px;
    padding: 2px 6px;
    margin-left: 4px;
    background: var(--border-color);
    border-radius: var(--radius-md);
}

.filter-tabs button.active .filter-count {
    background: rgba(99, 102, 241, 0.2);
}

/* ========================================
   Selection Actions
   ======================================== */
.selection-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.selection-count {
    font-size: 13px;
    color: var(--accent-primary);
    font-weight: 500;
}

/* ========================================
   Proxy Config Page
   ======================================== */
.config-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

.config-header h2 {
    font-size: 15px;
    font-weight: 600;
}

.config-header.clickable {
    cursor: pointer;
    user-select: none;
}

.config-header.clickable:hover {
    background: var(--bg-hover);
}

.expand-icon {
    color: var(--text-tertiary);
    transition: transform 0.2s;
}

.expand-icon.expanded {
    transform: rotate(180deg);
}

.config-content {
    padding: 20px;
}

.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding: 20px;
}

.config-section {
    padding: 20px;
    border-top: 1px solid var(--border-color);
}

.config-section h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

/* Form Groups */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-group input[type="text"],
.form-group input[type="number"] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 8px 12px;
    border-radius: var(--radius-md);
}

.form-group input[type="password"] {
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.form-group input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-group small {
    font-size: 11px;
    color: var(--text-tertiary);
}

.form-group small.warning {
    color: var(--accent-warning);
}

.form-group--toggle {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* Managed proxy pool */
.proxy-pool-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.proxy-pool-metric {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.proxy-pool-metric span {
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.proxy-pool-metric strong {
    font-size: 26px;
    font-weight: 650;
    color: var(--text-primary);
}

.proxy-pool-input {
    min-height: 120px;
    resize: vertical;
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
}

.proxy-pool-table-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.proxy-pool-table-scroll {
    overflow-x: auto;
}

.proxy-pool-table {
    min-width: 960px;
}

.proxy-pool-table .col-proxy {
    width: 42%;
}

.proxy-pool-table .col-assignment {
    width: 22%;
}

.proxy-pool-table .col-updated {
    width: 16%;
}

.proxy-pool-table .col-id {
    width: 12%;
}

.proxy-pool-table .col-actions {
    width: 8%;
    text-align: right;
}

.proxy-pool-table code {
    font-size: 12px;
    color: var(--text-primary);
}

.proxy-pool-assignment {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proxy-pool-assignment--assigned {
    background: rgba(79, 79, 188, 0.16);
    color: #a5b4fc;
}

.proxy-pool-assignment--free {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
}

.proxy-pool-empty {
    border-top: 1px solid var(--border-color);
}

/* Client API access */
.client-access-recovery,
.client-access-edit-conflict {
    align-items: flex-start;
    flex-wrap: wrap;
}

.client-access-recovery > strong,
.client-access-edit-conflict > strong {
    flex: 0 0 100%;
    color: var(--text-primary);
}

.client-access-recovery > span,
.client-access-edit-conflict > span {
    flex: 1 1 360px;
    line-height: 1.45;
}

.client-access-recovery__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
}

.client-access-edit-conflict {
    margin: 16px 20px 0;
}

.client-access-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.client-access-metric {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.client-access-metric span {
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.client-access-metric strong {
    font-size: 26px;
    font-weight: 650;
    color: var(--text-primary);
}

.client-access-key-banner {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.4fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.24);
    border-radius: var(--radius-md);
}

.client-access-key-banner__main {
    display: flex;
    gap: 10px;
    align-items: center;
}

.client-access-key-banner svg {
    width: 20px;
    height: 20px;
    stroke: #6ee7b7;
}

.client-access-key-banner strong {
    display: block;
    color: var(--text-primary);
    font-size: 13px;
}

.client-access-key-banner span {
    color: var(--text-secondary);
    font-size: 12px;
}

.client-access-key-banner code {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.24);
    border-radius: var(--radius-sm);
    color: #d1fae5;
    font-size: 12px;
}

.client-access-form,
.client-access-edit {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 16px;
    padding: 20px;
}

.client-access-notes {
    grid-column: span 2;
}

.client-access-notes textarea {
    min-height: 74px;
    resize: vertical;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    font: inherit;
}

.client-access-notes textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.client-access-limits {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 12px;
}

.client-access-create-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.client-access-list {
    display: grid;
    gap: 16px;
}

.client-access-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.client-access-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
}

.client-access-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.client-access-card__title h2 {
    font-size: 16px;
    font-weight: 650;
    margin: 0;
}

.client-access-card__header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.client-access-card__actions,
.client-access-add-key {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.client-access-card__body {
    display: grid;
    gap: 0;
}

.client-access-status,
.client-access-key-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.client-access-status--enabled,
.client-access-key-status--active {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
}

.client-access-key-status--pending {
    background: rgba(245, 158, 11, 0.14);
    color: #fcd34d;
}

.client-access-status--disabled,
.client-access-key-status--revoked {
    background: rgba(239, 68, 68, 0.10);
    color: #fca5a5;
}

.client-access-usage {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
}

.client-access-usage-block {
    display: grid;
    gap: 10px;
}

.client-access-usage-block div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.client-access-usage-block span {
    color: var(--text-secondary);
    font-size: 12px;
}

.client-access-usage-block strong {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}

.client-access-usage-bar {
    height: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.client-access-usage-bar span {
    display: block;
    height: 100%;
    background: #4f4fbc;
    border-radius: inherit;
}

.client-access-usage__meta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.client-access-usage__meta span {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 12px;
}

.client-access-billing {
    display: grid;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
}

.client-access-billing__header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.client-access-billing__header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
}

.client-access-billing__header span {
    color: var(--text-muted);
    font-size: 12px;
    text-align: right;
}

.client-access-billing__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 12px;
}

.client-access-billing-block {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.035);
}

.client-access-billing-block span {
    color: var(--text-secondary);
    font-size: 12px;
}

.client-access-billing-block strong {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
}

.client-access-billing-block small {
    overflow-wrap: anywhere;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.client-access-keys {
    padding: 18px 20px 20px;
    border-top: 1px solid var(--border-color);
}

.client-access-keys__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.client-access-keys__header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 650;
    color: var(--text-secondary);
}

.client-access-add-key input {
    width: 180px;
    min-width: 0;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 8px 10px;
    border-radius: var(--radius-md);
}

.client-access-key-table-scroll {
    overflow-x: auto;
}

.client-access-key-table {
    min-width: 780px;
}

.client-access-key-table code {
    font-size: 12px;
    color: var(--text-primary);
}

.client-access-key-actions {
    text-align: right;
}

.client-access-empty {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

/* API Key Row */
.api-key-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.api-key-input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 13px !important;
}

.api-key-actions button,
.api-key-row button {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.api-key-actions button:hover,
.api-key-row button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .api-key-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .api-key-row .api-key-input {
        grid-column: 1 / -1;
        width: 100%;
    }

    .api-key-row button {
        width: 100%;
    }
}

.proxy-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.proxy-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.section-toggle .toggle-arrow,
.collapsible-header .arrow {
    font-size: var(--text-base);
    color: var(--text-secondary);
    transition: transform 0.2s;
}

/* Model Mapping */
.mapping-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.mapping-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.mapping-form input {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

.mapping-form .arrow {
    color: var(--text-tertiary);
}

.mapping-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mapping-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.mapping-from, .mapping-source, .route-from {
    flex: 1;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.mapping-arrow, .route-arrow {
    color: var(--text-muted);
}

.mapping-to, .mapping-target, .route-to {
    flex: 1;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.empty-text {
    color: var(--text-tertiary);
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Protocol Tabs */
.protocol-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 4px;
    margin-bottom: 16px;
}

.protocol-tabs button {
    flex: 1;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.protocol-tabs button:hover {
    color: var(--text-primary);
}

.protocol-tabs button.active {
    background: var(--bg-card);
    color: var(--accent-primary);
}

/* Model Selector */
.model-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.model-selector label {
    font-size: 13px;
    color: var(--text-secondary);
}

.model-selector select {
    flex: 1;
}

/* Quick Start */
.quick-start {
    padding: 20px;
}

.base-url {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.base-url label {
    font-size: 13px;
    color: var(--text-secondary);
}

.base-url code {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent-primary);
}

/* ========================================
   Control-room dashboard
   ======================================== */
.control-room {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.eyebrow {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.readiness-header {
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid var(--border-color);
    border-radius: 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    padding: 28px;
    position: relative;
}

.readiness-header h1 {
    font-family: var(--font-mono);
    font-size: 42px;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 8px 0;
}

.readiness-header--ready h1 { color: var(--accent-success); }
.readiness-header--degraded h1 { color: var(--accent-warning); }
.readiness-header--critical h1 { color: var(--accent-danger); }

.readiness-header__subtitle,
.readiness-header__sync,
.quiet {
    color: var(--text-secondary);
}

.readiness-header__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 12px;
}

.readiness-header__metrics div,
.control-panel,
.capacity-lane {
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(203, 213, 225, 0.72);
    border-radius: 14px;
    box-shadow: 0 14px 34px -30px rgba(15, 23, 42, 0.45), 0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

.readiness-header__metrics div {
    padding: 14px;
}

.readiness-header__metrics strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 28px;
}

.readiness-header__metrics span {
    color: var(--text-tertiary);
    font-size: 12px;
}

.codex-reserve {
    background: radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.14), transparent 34%), rgba(0,0,0,0.28);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    padding: 22px;
}

.codex-reserve--safe { border-color: rgba(110, 231, 183, 0.32); }
.codex-reserve--watch { border-color: rgba(251, 191, 36, 0.34); }
.codex-reserve--slow { border-color: rgba(251, 146, 60, 0.38); }
.codex-reserve--stopped { border-color: rgba(251, 113, 133, 0.42); }

.codex-reserve__headline h2 {
    font-family: var(--font-mono);
    font-size: 30px;
    letter-spacing: -0.04em;
    margin: 8px 0;
}

.codex-reserve--safe .codex-reserve__headline h2 { color: var(--accent-success); }
.codex-reserve--watch .codex-reserve__headline h2 { color: var(--accent-warning); }
.codex-reserve--slow .codex-reserve__headline h2 { color: #fb923c; }
.codex-reserve--stopped .codex-reserve__headline h2 { color: var(--accent-danger); }

.codex-reserve__headline p,
.codex-reserve__bottleneck em,
.codex-reserve__window em {
    color: var(--text-secondary);
}

.codex-reserve__bottleneck em {
    display: block;
    line-height: 1.38;
    margin-top: 8px;
}

.codex-reserve__bottleneck,
.codex-reserve__window {
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 14px;
}

.codex-reserve__bottleneck {
    align-self: start;
}

.codex-reserve__bottleneck strong,
.codex-reserve__window strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 34px;
    letter-spacing: -0.04em;
    margin: 8px 0;
}

.codex-reserve__bottleneck span,
.codex-reserve__window span,
.codex-reserve__locks span {
    color: var(--text-tertiary);
    font-size: 12px;
}

.codex-reserve__windows,
.codex-reserve__rows,
.codex-reserve__locks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.codex-reserve__windows,
.codex-reserve__details {
    grid-column: 1 / -1;
}

.codex-reserve__details {
    border-top: 1px solid var(--border-subtle);
    padding-top: 12px;
}

.codex-reserve__details summary {
    align-items: center;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    font-weight: 650;
    justify-content: space-between;
    list-style: none;
    min-height: 32px;
}

.codex-reserve__details summary::-webkit-details-marker {
    display: none;
}

.codex-reserve__details summary::after {
    color: var(--text-tertiary);
    content: "+";
    font-family: var(--font-mono);
    font-size: 20px;
    margin-left: 12px;
}

.codex-reserve__details[open] summary::after {
    content: "−";
}

.codex-reserve__details summary em {
    color: var(--text-secondary);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    margin-left: auto;
}

.codex-reserve__details-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
}

.codex-reserve__windows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.codex-reserve__window {
    min-width: 0;
}

.codex-reserve__row,
.codex-reserve__locks span {
    background: rgba(0,0,0,0.22);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px 12px;
}

.codex-reserve__row {
    display: grid;
    gap: 4px 12px;
    grid-template-columns: 1fr auto;
}

.codex-reserve__row span {
    color: var(--text-primary);
    font-weight: 600;
}

.codex-reserve__locks small {
    color: var(--text-tertiary);
    font-size: 12px;
    font-style: normal;
}

.codex-reserve__row b,
.codex-reserve__locks b {
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-weight: 650;
}

.codex-reserve__row em {
    color: var(--text-secondary);
    font-style: normal;
    grid-column: 1 / -1;
}

.codex-reserve__forecast {
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 8px;
    display: grid;
    gap: 2px;
    margin-top: 12px;
    padding: 10px;
}

.codex-reserve__forecast span {
    color: var(--text-tertiary);
    font-size: 11px;
    text-transform: uppercase;
}

.codex-reserve__forecast b {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 18px;
}

.codex-reserve__forecast em {
    color: var(--text-secondary);
    font-size: 12px;
    font-style: normal;
}

.capacity-lanes,
.control-room__grid {
    display: grid;
    gap: 14px;
}

.capacity-lanes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.control-room__grid {
    grid-template-columns: 1.15fr 1fr 1fr;
}

.capacity-lane {
    padding: 18px;
}

.capacity-lane--ready { border-color: rgba(110, 231, 183, 0.28); }
.capacity-lane--critical { border-color: rgba(251, 113, 133, 0.28); }

.capacity-lane__top,
.capacity-lane__meta,
.recovery-list__row,
.blocker-ledger__list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.capacity-lane__top span,
.control-panel__header h2 {
    font-size: 14px;
    font-weight: 650;
}

.capacity-lane__top strong,
.capacity-lane__meta,
.capacity-lane__blockers,
.recovery-list__row em {
    color: var(--text-secondary);
    font-size: 12px;
}

.capacity-lane__number {
    font-family: var(--font-mono);
    font-size: 40px;
    letter-spacing: -0.04em;
    margin: 16px 0;
}

.capacity-lane__meta {
    flex-direction: column;
}

.capacity-lane__meta b {
    color: var(--text-primary);
    font-weight: 600;
}

.control-panel {
    padding: 18px;
}

.control-panel__header {
    margin-bottom: 14px;
}

.capacity-supply-control {
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 0.08), transparent 46%),
        var(--surface-raised);
    border-color: rgba(125, 211, 252, 0.24);
    grid-column: 1 / -1;
}

.capacity-supply-control__body {
    display: grid;
    gap: 12px;
}

.capacity-supply-control__body > p {
    margin: 0;
}

.capacity-supply-control__status {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.capacity-supply-control__status strong,
.capacity-supply-control__status span {
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 5px 9px;
}

.capacity-supply-control__status strong {
    color: var(--accent-success);
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}

.capacity-supply-control__status span {
    color: var(--text-secondary);
    font-size: 12px;
}

.capacity-supply-control__metrics {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.capacity-supply-control__metrics span {
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-secondary);
    min-width: 0;
    padding: 10px 12px;
}

.capacity-supply-control__metrics b {
    color: var(--text-primary);
    display: block;
    font-family: var(--font-mono);
    font-size: 19px;
    margin-bottom: 3px;
}

.blocker-ledger__list,
.recovery-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blocker-ledger__list div,
.recovery-list__row {
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px 12px;
}

.blocker-ledger__list strong {
    color: var(--accent-warning);
    font-family: var(--font-mono);
}

.recovery-list__row {
    display: grid;
    grid-template-columns: 1fr auto;
}

.recovery-list__row span {
    color: var(--text-primary);
    font-weight: 600;
}

.recovery-list__row em {
    grid-column: 1 / -1;
    font-style: normal;
}

.control-room__below-fold {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (max-width: 1180px) {
    .readiness-header,
    .codex-reserve,
    .capacity-lanes,
    .control-room__grid {
        grid-template-columns: 1fr;
    }

    .readiness-header__metrics {
        grid-template-columns: repeat(3, 1fr);
    }

    .capacity-supply-control__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .readiness-header__metrics {
        grid-template-columns: 1fr;
    }

    .readiness-header h1,
    .capacity-lane__number {
        font-size: 32px;
    }

    .capacity-supply-control__metrics {
        grid-template-columns: 1fr;
    }
}

/* Current Account Detail */
.current-account-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.account-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-email {
    font-size: 15px;
    font-weight: 500;
}

.quota-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quota-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quota-row>span:first-child {
    width: 60px;
    font-size: 12px;
    color: var(--text-secondary);
}

.quota-row>span:last-child {
    width: 40px;
    text-align: right;
    font-size: 12px;
    font-weight: 500;
}

.quota-fill--claude {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.6) 0%, rgba(99, 102, 241, 0.35) 100%);
}

.btn--block {
    width: 100%;
    text-align: center;
}

/* Best Accounts List */
.best-accounts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.best-account-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.best-account-item:hover {
    background: var(--bg-hover);
}

.best-account-item.is-current {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.best-account-item .account-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.best-account-item .email {
    font-size: 13px;
    font-weight: 500;
}

.best-account-item .quota-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.best-account-item .quota-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-success);
}

/* Tier badges */
.tier-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.4;
}

.tier-badge--sm {
    font-size: 10px;
    padding: 2px 6px;
}

.tier-ultra,
.tier-badge.tier-ultra {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.15);
}

.tier-pro,
.tier-badge.tier-pro {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.tier-codex,
.tier-badge.tier-codex {
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.tier-banned,
.tier-badge.tier-banned {
    background: var(--accent-danger-muted);
    color: var(--accent-danger);
    border: 1px solid rgba(251, 113, 133, 0.2);
}

.tier-verify,
.tier-badge.tier-verify {
    background: var(--accent-warning-muted);
    color: var(--accent-warning);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.tier-disabled,
.tier-badge.tier-disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.tier-locked,
.tier-badge.tier-locked {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.2);
}

.tier-free,
.tier-badge.tier-free {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* Proxy badge */
.proxy-badge {
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.proxy-badge.on {
    background: var(--accent-success-muted);
    color: var(--accent-success);
}

.proxy-badge.off {
    background: var(--accent-danger-muted);
    color: var(--accent-danger);
}

/* Verification panel (inline, below account row) */
.vrf-panel-row {
    background: var(--bg-secondary);
}

.vrf-panel-cell {
    padding: 0 !important;
    overflow: hidden;
}

.vrf-panel {
    padding: 10px 16px 12px 48px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.vrf-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vrf-panel__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vrf-panel__close {
    padding: 2px 6px !important;
    font-size: 14px !important;
    line-height: 1;
    color: var(--text-muted) !important;
}

.vrf-panel__url-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.vrf-panel__url {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 6px 10px;
    border-radius: var(--radius-md);
    word-break: break-all;
    overflow-wrap: break-word;
    user-select: all;
    -webkit-user-select: all;
    cursor: text;
}

.vrf-panel__copy {
    flex-shrink: 0;
    min-width: 56px;
    text-align: center;
}

.vrf-panel__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vrf-panel__probe {
    flex-shrink: 0;
}

.vrf-panel__status {
    font-size: 12px;
    color: var(--text-tertiary);
    min-height: 1em;
}

.vrf-panel__status--success {
    color: var(--accent-success);
}

.vrf-panel__status--blocked {
    color: var(--accent-warning);
}

.vrf-panel__status--error {
    color: var(--accent-danger);
}

/* Header status */
.header-status {
    display: flex;
    align-items: center;
    gap: 16px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.status-indicator .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-indicator.running {
    color: rgba(52, 211, 153, 0.85);
}

.status-indicator.running .status-dot {
    background: var(--accent-success);
    animation: pulse 2s infinite;
}

.status-indicator.stopped {
    color: var(--text-tertiary);
}

.status-indicator.stopped .status-dot {
    background: var(--text-tertiary);
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Log Details */
.log-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.log-row:hover {
    background: var(--bg-hover);
}

.log-row.expanded {
    background: var(--bg-hover);
}

.expand-icon {
    display: inline-block;
    width: 16px;
    margin-right: 4px;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
    font-size: 10px;
}

.expand-icon.open {
    transform: rotate(90deg);
}

.log-details-row td {
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.log-details {
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-item.full-width {
    grid-column: 1 / -1;
}

.detail-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 600;
}

.detail-value {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-secondary);
    word-break: break-all;
}

.detail-item.highlight .detail-value {
    color: var(--accent-primary);
}

.detail-item.error .detail-value {
    color: var(--accent-danger);
}

.code-block {
    margin-top: 4px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 12px;
    white-space: pre-wrap;
}

/* Add Account Modal */
.add-account-modal {
    max-width: 480px;
}

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

.tab-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: var(--radius-md);
}

.tab-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    background: var(--bg-card);
    color: var(--accent-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tab-content {
    min-height: 250px;
}

/* OAuth Tab */
.oauth-tab {
    text-align: center;
}

.oauth-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.oauth-tab h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.oauth-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.oauth-url-section {
    margin-top: 20px;
    text-align: left;
}

.oauth-callback-section {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.oauth-callback-input {
    height: 74px;
    min-height: 74px;
}

.oauth-url-label {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.oauth-url-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tertiary);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-bottom: 12px;
}

.oauth-url-text {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Token Tab */
.token-tab {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.token-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.token-input {
    width: 100%;
    height: 120px;
    background: var(--bg-tertiary);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-md);
    padding: 12px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 12px;
    resize: vertical;
}

.token-input::placeholder {
    color: var(--text-tertiary);
}

.token-hint {
    font-size: 11px;
    color: var(--text-tertiary);
}

.inline-verification {
    display: grid;
    gap: 12px;
    margin-top: 4px;
    padding: 14px;
    text-align: left;
    background: color-mix(in srgb, var(--accent-warning) 8%, var(--bg-tertiary));
    border: 1px solid color-mix(in srgb, var(--accent-warning) 34%, var(--border-default));
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 var(--inset-highlight);
}

.inline-verification__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.inline-verification__header > div {
    min-width: 0;
}

.inline-verification strong {
    display: block;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.35;
}

.inline-verification p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.inline-verification__header p {
    margin-top: 3px;
    color: var(--text-tertiary);
}

.inline-verification__state {
    flex: none;
    padding: 4px 8px;
    color: var(--accent-warning);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    background: var(--accent-warning-muted);
    border: 1px solid color-mix(in srgb, var(--accent-warning) 30%, transparent);
    border-radius: var(--radius-full);
}

.inline-verification__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.inline-verification__actions > :first-child {
    grid-column: 1 / -1;
}

.inline-verification__actions .btn {
    min-height: 40px;
    padding-inline: 12px;
    text-align: center;
    white-space: normal;
}

.inline-verification--error {
    background: color-mix(in srgb, var(--accent-danger) 8%, var(--bg-tertiary));
    border-color: color-mix(in srgb, var(--accent-danger) 34%, var(--border-default));
}

.inline-verification--error > strong {
    color: var(--accent-danger);
}

.inline-verification--success {
    background: color-mix(in srgb, var(--accent-success) 8%, var(--bg-tertiary));
    border-color: color-mix(in srgb, var(--accent-success) 34%, var(--border-default));
}

.inline-verification--success > strong {
    color: var(--accent-success);
}

@media (max-width: 520px) {
    .inline-verification__header {
        flex-direction: column;
    }

    .inline-verification__actions {
        grid-template-columns: 1fr;
    }

    .inline-verification__actions > :first-child {
        grid-column: auto;
    }
}

/* Import Tab */
.import-tab {
    text-align: center;
    padding: 20px 0;
}

.import-tab h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.import-tab p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* Modal Footer */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

/* Button modifiers for modal */
.btn--full {
    width: 100%;
}

.btn--small {
    padding: 6px 10px;
    font-size: 12px;
}

/* Alert styles */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 13px;
}

.alert--info {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-secondary);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.alert--success {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-success);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.alert--error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ============================================
   Log Detail Modal
   ============================================ */

/* Modal Backdrop */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

/* Log Detail Modal */
.log-detail-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 1180px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.log-detail-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.log-detail-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    overflow: hidden;
}

.log-detail-modal .modal-title .method {
    font-weight: 600;
    font-size: 14px;
}

.log-detail-modal .modal-title .path {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-detail-modal .modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 24px;
    cursor: pointer;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.log-detail-modal .modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.log-detail-modal .modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Detail Sections */
.detail-section {
    margin-bottom: 24px;
}

.detail-section:last-child {
    margin-bottom: 0;
}

.detail-section h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* Detail Grid */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    background: var(--bg-tertiary);
    padding: 16px;
    border-radius: var(--radius-md);
}

.payload-shape-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    border: 1px solid var(--border-subtle);
}

.payload-shape-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.payload-shape-section h3::after {
    content: "redacted structural telemetry";
    color: var(--text-tertiary);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-item .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
}

.detail-item .value {
    font-size: 13px;
    color: var(--text-primary);
    word-break: break-all;
}

.detail-item code.value {
    font-family: var(--font-mono);
    font-size: 12px;
}

/* Code Blocks */
.code-block {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Error Block */
.error-section h3 {
    color: var(--accent-danger);
}

.error-block {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--accent-danger);
}

/* Empty Detail */
.empty-detail {
    text-align: center;
    padding: 32px;
    color: var(--text-tertiary);
}

/* Clickable Log Rows */
.log-row.clickable {
    cursor: pointer;
    transition: background 0.15s ease;
}

.log-row.clickable:hover {
    background: var(--bg-hover);
}

.log-row.clickable:hover td {
    color: var(--text-primary);
}

/* Hint text */
.empty-state .hint {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 8px;
}

/* ============================================
   Account Details Modal
   ============================================ */

.account-details-modal {
    max-width: 600px;
}

.account-details-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-top: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.account-details-modal .modal-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-details-modal .modal-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.access-token-modal {
    max-width: 720px;
}

.access-token-modal__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.access-token-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.access-token-source,
.access-token-expiry {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.2;
}

.access-token-value {
    min-height: 168px;
    line-height: 1.45;
    word-break: break-all;
}

.access-token-actions {
    display: flex;
    justify-content: flex-end;
}

.account-password-modal {
    max-width: 620px;
}

.account-password-modal__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-password-value {
    min-height: 44px;
    font-family: var(--font-mono);
}

.account-password-note {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.account-password-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.model-quota-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.model-quota-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    transition: border-color 0.15s ease;
}

.model-quota-card:hover {
    border-color: var(--accent-primary);
}

.model-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.model-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.model-percentage {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-md);
}

.model-percentage.quota-fill--good {
    background: var(--accent-success-muted) !important;
    color: var(--text-primary);
}

.model-percentage.quota-fill--warning {
    background: var(--accent-warning-muted);
    color: var(--text-primary);
}

.model-percentage.quota-fill--critical {
    background: var(--accent-danger-muted);
    color: var(--text-primary);
}

.model-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 10px;
}

.model-progress-bar {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.model-progress-bar.quota-fill--good {
    background: var(--accent-success);
}

.model-progress-bar.quota-fill--warning {
    background: var(--accent-warning);
}

.model-progress-bar.quota-fill--critical {
    background: var(--accent-danger);
}

.model-reset {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-tertiary);
}

.reset-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-muted);
}

.reset-text {
    font-family: monospace;
}

.reset-text.reset-time--success {
    color: var(--accent-success);
}

.reset-text.reset-time--warning {
    color: var(--accent-warning);
}

.reset-text.reset-time--neutral {
    color: var(--text-tertiary);
}

.empty-hint {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 8px;
}

/* ========================================
   Skeleton Loading
   ======================================== */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

.skeleton-card {
    height: 180px;
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
}

.skeleton-text--lg {
    height: 24px;
    width: 60%;
}

/* ========================================
   Rank Indicators (Best Accounts)
   ======================================== */
.rank-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.rank-indicator--1 {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #000;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
}

.rank-indicator--2 {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    color: #fff;
}

.rank-indicator--3 {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #fff;
}

.rank-indicator--default {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
}

/* ========================================
   Login Page
   ======================================== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at top, rgba(56, 189, 248, 0.16), transparent 30%),
        radial-gradient(circle at 50% 120%, rgba(99, 102, 241, 0.14), transparent 36%),
        var(--bg-primary);
    padding: 48px 24px;
}

.login-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 48px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 32px 80px -24px rgba(0, 0, 0, 0.72);
}

.login-container::before {
    content: "";
    position: absolute;
    inset: -20% 12% auto;
    height: 140px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.14), transparent 72%);
    pointer-events: none;
}

.login-header {
    position: relative;
    text-align: center;
    margin-bottom: 36px;
}

.login-logo {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
}

.login-header h1 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 8px;
}

.login-subtitle {
    font-size: 17px;
    color: rgba(226, 232, 240, 0.88);
    max-width: 24ch;
    margin: 0 auto;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-form .form-group {
    gap: 8px;
}

.login-form .form-group label {
    font-size: 13px;
    color: rgba(226, 232, 240, 0.86);
    text-align: center;
    display: block;
}

.login-form .form-input {
    width: 100%;
    padding: 13px 16px;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 15px;
    font-family: var(--font-mono);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-form .form-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.login-form .form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.login-form .form-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.login-hint {
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(203, 213, 225, 0.84);
    margin-top: 24px;
}

.btn--full-width {
    width: 100%;
}

.login-form .btn--primary {
    min-height: 48px;
    background: var(--bg-card);
    border-color: rgba(165, 180, 252, 0.68);
    color: #f8fafc;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(15, 23, 42, 0.35);
    box-shadow: 0 24px 40px -28px rgba(79, 70, 229, 0.95);
}

.login-form .btn--primary:hover {
    background: var(--bg-card);
    box-shadow: 0 28px 48px -28px rgba(79, 70, 229, 1);
}


/* --- Dashboard Redesign --- */

/* ── Pool Health Banner ─────────────────────────── */
.health-banner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--border-color);
    background: var(--bg-card);
    margin-bottom: 20px;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.health-banner__status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.health-banner__icon {
    font-size: 10px;
    line-height: 1;
}

.health-banner__label {
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: 12px;
}

.health-banner__summary {
    color: var(--text-secondary);
    font-weight: 400;
}

.health-banner__details {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.health-banner__separator {
    color: var(--text-muted);
    opacity: 0.4;
}

/* State: Healthy */
.health-banner--healthy {
    border-left-color: var(--accent-success);
}
.health-banner--healthy .health-banner__icon {
    color: var(--accent-success);
}
.health-banner--healthy .health-banner__label {
    color: var(--accent-success);
}

/* State: Degraded */
.health-banner--degraded {
    border-left-color: var(--accent-warning);
    background: rgba(251, 191, 36, 0.03);
}
.health-banner--degraded .health-banner__icon {
    color: var(--accent-warning);
}
.health-banner--degraded .health-banner__label {
    color: var(--accent-warning);
}

/* State: Offline */
.health-banner--offline {
    border-left-color: var(--accent-danger);
    background: rgba(239, 68, 68, 0.04);
}
.health-banner--offline .health-banner__icon {
    color: var(--accent-danger);
}
.health-banner--offline .health-banner__label {
    color: var(--accent-danger);
}

/* State: Empty */
.health-banner--empty {
    border-left-color: var(--text-muted);
    opacity: 0.7;
}
.health-banner--empty .health-banner__icon {
    color: var(--text-muted);
}
.health-banner--empty .health-banner__label {
    color: var(--text-muted);
}

/* Alert row inside health banner */
.health-banner__alert {
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    margin-top: 4px;
    border-radius: var(--radius-sm);
    background: rgba(251, 191, 36, 0.06);
    color: rgba(251, 191, 36, 0.85);
    border: 1px solid rgba(251, 191, 36, 0.12);
}

.health-banner__alert--codex {
    color: rgba(251, 146, 60, 0.9);
    background: rgba(251, 146, 60, 0.06);
    border-color: rgba(251, 146, 60, 0.12);
}

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.hero-metrics .stats-card {
    min-width: 0;
}

/* Section label styling shared */
.hero-metrics--ultra,
.hero-metrics--codex {
    position: relative;
    padding-top: 20px;
}

.hero-metrics--ultra::before,
.hero-metrics--codex::before {
    position: absolute;
    top: 0;
    left: 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Ultra section — muted purple label */
.hero-metrics--ultra::before {
    content: "ULTRA PROVIDERS";
    color: rgba(165, 180, 252, 0.5);
}

/* Codex section — muted green label */
.hero-metrics--codex {
    margin-top: 4px;
}

.hero-metrics--codex::before {
    content: "CODEX";
    color: rgba(52, 211, 153, 0.5);
}

/* Info strip separators */
.info-strip__separator {
    color: var(--text-muted);
    opacity: 0.3;
    user-select: none;
}

/* Ultra Accounts Section — compact reset table */
.ultra-accounts-section {
    margin-bottom: 24px;
}

.ultra-accounts-section h2 {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    letter-spacing: -0.01em;
}

.ultra-reset-table {
    display: flex;
    flex-direction: column;
    background: var(--surface-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ultra-reset-header {
    display: grid;
    grid-template-columns: 1fr 100px 100px;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--bg-tertiary);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ultra-reset-row {
    display: grid;
    grid-template-columns: 1fr 100px 100px;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s;
}

.ultra-reset-row:last-child {
    border-bottom: none;
}

.ultra-reset-row:hover {
    background: var(--surface-secondary);
}

.ultra-reset-cell {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.ultra-reset-cell--email {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ultra-reset-cell--time {
    font-family: var(--font-mono);
    color: var(--accent-success);
    font-weight: 500;
    justify-content: flex-end;
    text-align: right;
}


.info-strip {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.info-strip__item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stats-card--hero {
    padding: 28px 24px;
    gap: 8px;
    position: relative;
    min-height: 140px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.stats-card--hero .stats-card__value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -1px;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
}

.stats-card--hero .stats-card__title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.stats-card__subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: auto;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Accent Cards — uniform border, no glow */
.stats-card--purple,
.stats-card--indigo,
.stats-card--blue,
.stats-card--hero {
    border: 1px solid var(--border-color) !important;
    border-top: 1px solid var(--border-color) !important;
    background: var(--bg-card);
}

/* Value Colors */
.stats-card--success {
    color: var(--text-primary);
}

.stats-card--warning {
    color: var(--text-primary);
}

.stats-card--danger {
    color: var(--text-primary);
    opacity: 0.85;
}

/* Muted percentage value colors — high specificity override */
.stats-card__value.stats-card--danger { color: rgba(251, 113, 133, 0.75) !important; }
.stats-card__value.stats-card--warning { color: rgba(251, 191, 36, 0.7) !important; }
.stats-card__value.stats-card--success { color: rgba(52, 211, 153, 0.75) !important; }

/* Info Strip Badges */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    min-width: 20px;
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.badge--danger {
    color: var(--accent-danger);
    background: var(--accent-danger-muted);
}


.btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-default);
}
.btn--primary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.btn--danger {
    color: var(--accent-danger);
    border-color: rgba(248, 113, 113, 0.2);
}
.btn--danger:hover {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.3);
}



.btn--sm:hover, .btn--action:hover, .col-actions .btn:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}


.col-actions .btn--danger:hover {
    background: rgba(248, 113, 113, 0.1) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

/* Custom checkbox styling — excludes .toggle which draws its own pill */
input[type="checkbox"]:not(.toggle) {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}
input[type="checkbox"]:not(.toggle):checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}
input[type="checkbox"]:not(.toggle):checked::after {
    content: '✓';
    position: absolute;
    color: white;
    font-size: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

table th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

table tbody tr:last-child {
    border-bottom: none;
}

table th {
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.quota-history-table {
    width: 100%;
    border-collapse: collapse;
}

.quota-history-table td,
.quota-history-row td {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
}

.stats-card .sigma,
.stats-card-label {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

/* ====== 8 FIXES APPENDED ====== */

/* Issue 2: SETTINGS — White number inputs */
.setting-row input[type="number"],
.settings input[type="number"],
.setting-row input[type="text"],
.settings input[type="text"],
.path-input input[type="text"],
input[type="number"],
input[type="text"] {
  background: var(--bg-tertiary) !important;
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  color-scheme: light !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md);
}

/* Issue 3: PROXY — Model routing colors still neon */
.mapping-from, .mapping-source, .route-from, .model-from {
    color: var(--text-secondary) !important;
}
.mapping-arrow, .route-arrow {
    color: var(--text-muted) !important;
}
.mapping-to, .mapping-target, .route-to, .model-to {
    color: var(--text-primary) !important;
}

/* Issue 8: GENERAL — Quota bar fill color still neon green */
.quota-bar-fill,
.model-progress-fill,
.progress-fill {
    background-color: var(--accent-success) !important;
}

/* FINAL: Hero cards — kill ALL colored border-top regardless of source */
.stats-card.stats-card--hero.stats-card--purple,
.stats-card.stats-card--hero.stats-card--indigo,
.stats-card.stats-card--hero.stats-card--blue,
.stats-card.stats-card--hero,
.stats-card.stats-card--purple,
.stats-card.stats-card--indigo,
.stats-card.stats-card--blue {
    border: 1px solid var(--border-color) !important;
    border-top: 1px solid var(--border-color) !important;
}


/* ========================================
   QA DEFECT FIXES
   ======================================== */

/* DASHBOARD PAGE */
/* 5. Hero card colored borders - reduce opacity or soften */
.stats-card--hero::before, .stats-card--purple::before, .stats-card--indigo::before, .stats-card--blue::before {
    display: none !important;
}
.stats-card--hero, .stats-card--purple, .stats-card--indigo, .stats-card--blue {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* 6. Version badge padding - text cramped -> more horizontal padding */
.version {
    padding: 2px 8px !important;
}

/* 7. Card subtitles — allow natural wrapping in hero cards */
.stats-card__subtitle {
    white-space: normal;
    overflow-wrap: break-word;
}

/* ACCOUNTS PAGE */
/* 1. Heading overlaps Sync button -> fix flexbox for header area */
.page-header {
    gap: 16px;
    flex-wrap: wrap;
}

/* 2. Table header misalignment (EMAIL vs data) -> fix alignment */
.accounts-table th:first-child,
.accounts-table td:first-child {
    text-align: center !important;
    width: 48px;
    padding-right: 0 !important;
}
.accounts-table th {
    vertical-align: middle;
}

/* 3. UNKNOWN badge clipped by container -> fix overflow */
.tier-badge {
    white-space: nowrap !important;
    max-width: 100%;
}
.col-tier {
    overflow: visible !important;
}

/* 4. Massive gap between table header and first row -> reduce */
.accounts-table th {
    padding-bottom: 8px !important;
}
.accounts-table td {
    padding: 12px 16px !important;
}

/* 5. Button text wrapping ("Refresh All" on two lines) -> white-space: nowrap */
.btn {
    white-space: nowrap !important;
}

/* 6. Invisible checkboxes - dark border on dark bg -> border rgba(255,255,255,0.25) + styled check */
input[type="checkbox"]:not(.toggle) {
    border: 1.5px solid rgba(255,255,255,0.25) !important;
    background: transparent !important;
}
input[type="checkbox"]:not(.toggle):checked {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* 7. Neon blue count badge ("29") -> mute with --accent-primary at low opacity */
.selection-count, .filter-count, .tier-count {
    background: rgba(99, 102, 241, 0.15) !important;
    color: var(--accent-secondary) !important;
}

/* 8. Status indicator dot too dim -> use semantic color at higher opacity */
.status-dot, .status-indicator {
    opacity: 0.9 !important;
}

/* PROXY PAGE */
/* 1. Toggle thumbs stark white -> mute to #d4d4d8 */
/* GLOBAL 5. All toggle thumbs too white -> #d4d4d8 or var(--text-primary) */

/* 2. Active toggle track neon purple -> --accent-primary at 60-70% opacity */
/* GLOBAL 4. All toggle tracks too bright purple -> background: rgba(99,102,241,0.6) */

/* 3. Active sidebar border harsh neon -> --accent-primary at 50% opacity */
/* GLOBAL 1. Sidebar active left border too harsh */

/* 4. Status dot not vertically centered with text -> fix alignment */
.proxy-status, .status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 5. Input text contrast mismatch (dim vs bright) -> both use --text-primary */
input[type="text"], input[type="number"], .token-input {
    color: var(--text-primary) !important;
}

/* 6. Version pill text too dark -> use --text-muted minimum */
/* GLOBAL 3. Version pill in sidebar illegible -> color: var(--text-tertiary) minimum */
.version, .sidebar-version, .version-text {
    color: var(--text-tertiary) !important;
}

/* 7. Status text "Running" too neon green -> --accent-success at 80% or muted */
.status-text--running, .status-active {
    color: rgba(52, 211, 153, 0.85) !important;
    opacity: 0.85;
}

/* 8. Stop button muddy red -> clean contrast */
.btn--danger {
    background: var(--accent-danger-muted) !important;
    color: var(--accent-danger) !important;
    border: 1px solid rgba(251, 113, 133, 0.2) !important;
}
.btn--danger:hover {
    background: rgba(251, 113, 133, 0.25) !important;
}

/* 9. Section subheadings weak -> more weight/spacing */
.section-title, h3 {
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 16px !important;
}

/* SETTINGS PAGE */
/* 1. Toggle thumb clips outside track -> fix sizing/overflow */

/* 2. Select dropdown harsh borders -> style with --border-color + proper padding */
select {
    border: 1px solid rgba(255,255,255,0.10);
    padding: 8px 12px !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}

/* 3. Save button faint border -> --accent-primary solid bg */
.btn--primary {
    background: #4f4fbc !important;
    color: #fff !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* 4. Active toggle track neon purple -> handled globally */
/* 5. Severe low contrast subtext -> use --text-secondary */
.setting-description, .help-text, .section-desc {
    color: var(--text-secondary) !important;
}

/* 6. Sidebar active state blocky -> improve border-radius + subtler bg */

/* MONITOR PAGE */
/* 1. MODEL column too narrow (wraps to 4 lines) -> min-width: 180px or white-space: nowrap with ellipsis */
.logs-table td:nth-child(4) {
    white-space: nowrap !important;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2. PATH column truncation abrupt -> proper text-overflow: ellipsis */
.path-cell, .logs-table td.col-path, .logs-table td:nth-child(8) {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3. Neon filter pills -> muted rgba(99,102,241,0.15) bg with --accent-secondary text */
.filter-pill, .btn-filter, .filter-tabs button.active {
    background: rgba(99,102,241,0.15) !important;
    color: var(--accent-secondary) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
}

/* 4. Muddy brown labels/headers -> use --text-secondary/--text-tertiary */
/* Already handled by global table th fix */

/* 5. Recording button muddy red -> --accent-danger-muted bg with muted text */
.recording-btn, .btn-recording, .recording-indicator {
    background: var(--accent-danger-muted) !important;
    color: var(--accent-danger) !important;
    border: 1px solid rgba(251, 113, 133, 0.2) !important;
}

/* 6. Filter pills overflow cut off -> overflow-x: auto on container */
.filters-container, .filter-group, .filter-tabs {
    overflow-x: auto !important;
    white-space: nowrap;
    padding-bottom: 4px;
}

/* 7. Search bar icon misalignment -> align-items: center */
.search-bar, .search-container, .search-box {
    display: flex;
    align-items: center !important;
}

/* 8. Squished header stats -> gap 16px minimum */
.header-stats, .monitor-stats, .monitor-controls {
    display: flex;
    gap: 16px !important;
}

/* 9. Token counter labels too dim, values too stark -> balance both */
.token-label, .log-meta span {
    color: var(--text-secondary) !important;
}
.token-value {
    color: var(--text-primary) !important;
    font-weight: 500;
}

/* GLOBAL (ALL PAGES) */
/* 2. Sidebar Monitor separator awkward -> add margin/padding */
.sidebar-footer {
    margin: 16px !important;
     border-top: 1px solid var(--border-color) !important;
}

/* 3, 4, 5 are handled in Proxy section */

/* ========================================
   BATCH 1 QA DEFECT FIXES (OVERRIDE)
   ======================================== */

/* GLOBAL 2. Sidebar Monitor separator */
.sidebar-footer {
    margin: 16px !important;
     border-top: 1px solid var(--border-color) !important;
}

/* GLOBAL 3. Version pill in sidebar */
.version, .sidebar-version, .version-text, .sidebar .version {
    color: #71717a !important;
    opacity: 1 !important;
}

/* DASHBOARD 8. Hero card colored top borders */
.stats-card--purple { border-top: 2px solid rgba(168, 85, 247, 0.4) !important; }
.stats-card--indigo { border-top: 2px solid rgba(99, 102, 241, 0.4) !important; }
.stats-card--blue { border-top: 2px solid rgba(59, 130, 246, 0.4) !important; }
.stats-card--hero { border-top: 2px solid rgba(99, 102, 241, 0.5) !important; }

/* DASHBOARD 9. Neon percentage values */
.quota-fill--good, .model-progress-bar.quota-fill--good, .quota-bar-fill {
    background-color: rgba(52, 211, 153, 0.85) !important;
}
.quota-fill--warning, .model-progress-bar.quota-fill--warning {
    background-color: rgba(251, 191, 36, 0.85) !important;
}
.quota-fill--critical, .model-progress-bar.quota-fill--critical {
    background-color: rgba(251, 113, 133, 0.85) !important;
}
.model-percentage, .quota-text, .quota-value {
    color: var(--text-primary) !important;
}

/* DASHBOARD 10 & 14. Card subtitles / wrapping */
.stats-card__subtitle, .stats-card__title {
    color: var(--text-secondary) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* DASHBOARD 11. Version badge/pill on cards */
.version {
    padding: 2px 10px !important;
}

/* DASHBOARD 12 & 13. Table headers and cell padding */
table th, .accounts-table th, .logs-table th, .ultra-reset-header {
    color: var(--text-tertiary) !important;
    text-transform: uppercase !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.05em !important;
    padding: 12px 16px !important;
}
table td, .accounts-table td, .logs-table td {
    padding: 12px 16px !important;
}

/* ========================================
   BATCH 2: QA DEFECT FIXES (OVERRIDE)
   ======================================== */

/* --- ACCOUNTS PAGE --- */

/* 1. Heading overlaps Sync button */
.page-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* 2. Button text wrapping */
.header-actions .btn, .btn {
    white-space: nowrap !important;
}

/* 3. Table header EMAIL misalignment with data */
.accounts-table th:nth-child(2),
.accounts-table td:nth-child(2) {
    text-align: left !important;
}

/* 4. Massive gap between table header and first row */
.accounts-table th, table th {
    padding-bottom: 8px !important;
}
.accounts-table td, table td {
    padding-top: 8px !important;
}

/* 5. Invisible checkboxes */
input[type="checkbox"]:not(.toggle) {
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    background: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle !important;
}
input[type="checkbox"]:not(.toggle):checked {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}
input[type="checkbox"]:not(.toggle):checked::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 1px !important;
    width: 4px !important;
    height: 8px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

/* 6. Neon blue count badge */
.selection-count, .filter-count, .tier-count, .badge {
    background: rgba(99, 102, 241, 0.12) !important;
    color: var(--accent-secondary) !important;
}

/* 7. UNKNOWN badge clipped by container */
.col-tier, .tier-badge-container, .badge-container {
    overflow: visible !important;
}
.tier-badge, .badge {
    white-space: nowrap !important;
}

/* 8. Status indicator dot too dim */
.status-dot--active, .status-dot--running, .status-active .status-dot, .proxy-status-dot {
    opacity: 0.9 !important;
    box-shadow: 0 0 4px var(--accent-success) !important;
}

/* --- PROXY PAGE --- */

/* 9. Status dot not vertically centered with "Running" text */
.status-indicator, .proxy-status, .server-status {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* 10. Status text "Running" too neon green */
.status-text--running, .status-active, .proxy-status-text {
    color: rgba(52, 211, 153, 0.85) !important;
}

/* 11. Input text contrast mismatch */
input[type="number"], input[type="text"], .proxy-input {
    color: var(--text-primary) !important;
}

/* 12. Stop button muddy dark red */
.btn--danger, .stop-btn {
    background: var(--accent-danger-muted) !important;
    color: var(--accent-danger) !important;
    border: 1px solid rgba(251, 113, 133, 0.2) !important;
}
.btn--danger:hover, .stop-btn:hover {
    background: rgba(251, 113, 133, 0.25) !important;
}

/* 13. Section subheadings visually weak */
.section-title, h3, .subheading, .settings-group h3 {
    font-weight: 600 !important;
    font-size: 11px !important;
    color: var(--text-tertiary) !important;
    margin-top: 24px !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.config-header h2, .proxy h2 {
    font-weight: 600 !important;
    font-size: 11px !important;
    color: var(--text-tertiary) !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* --- SETTINGS PAGE --- */

/* 14. Select dropdown harsh default borders */
select, .setting-select, .setting-row select {
    border: 1px solid rgba(255,255,255,0.10) !important;
    background-color: var(--bg-tertiary) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    color: var(--text-primary) !important;
    padding: 8px 32px 8px 12px !important;
    border-radius: var(--radius-md) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* 15. Save button faint murky border */
.btn--primary, .save-btn {
    background: #4f4fbc !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    padding: 8px 20px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* 16. Low contrast subtext */
.setting-description, .setting-subtitle, .help-text, .section-desc, .setting-row p {
    color: var(--text-secondary) !important;
}

/* --- MONITOR PAGE --- */

/* 17. Model column */
.logs-table td:nth-child(4), .model-cell {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 220px !important;
    min-width: 180px !important;
}

/* 18. Path column */
.logs-table td.col-path, .logs-table td:nth-child(8), .path-cell {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 300px !important;
}

/* 19. Active filter pill uses jarring neon purple */
.filter-pill.active, .btn-filter.active, .filter-tabs button.active {
    background: rgba(99, 102, 241, 0.15) !important;
    color: var(--accent-secondary) !important;
    border: 1px solid transparent !important;
}

/* 20. Filter pills overflow */
.filters-container, .filter-group, .filter-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
    display: flex !important;
}

/* 21. Squished header stats */
.header-stats, .monitor-stats, .stat-group, .monitor-controls {
    display: flex !important;
    gap: 16px !important;
}

/* 22. Muddy brown/orange labels for back link, token counter, table headers */
.back-link, .token-label, .log-meta span {
    color: var(--text-secondary) !important;
}
.logs-table th {
    color: var(--text-tertiary) !important;
}

/* 23. Search bar icon misalignment */
.search-box, .search-container, .search-bar {
    display: flex !important;
    align-items: center !important;
}

/* 24. Recording button muddy red */
.recording-btn, .btn-recording, .recording-indicator {
    background: var(--accent-danger-muted) !important;
    color: #fb7185 !important;
    border: 1px solid rgba(251, 113, 133, 0.2) !important;
}

/* 25. Token counter labels too dim, values too stark */
.token-counter .label {
    color: var(--text-secondary) !important;
}
.token-counter .value, .token-value {
    color: var(--text-primary) !important;
}



input:focus, select:focus, textarea:focus, .form-input:focus, .search-box input:focus {
    border-color: rgba(255,255,255,0.20) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.10) !important;
    outline: none !important;
}

.search-box input::placeholder, input::placeholder {
    color: #71717a !important;
    opacity: 1 !important;
}

.btn--primary {
    background: #4f4fbc !important;
    color: white !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    padding: 8px 20px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.btn--primary:hover {
    background: #5a5ac7 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 8px rgba(79, 79, 188, 0.3) !important;
}

.nav-item.active {
    background: rgba(255,255,255,0.05) !important;
    color: var(--text-primary) !important;
    position: relative;
    border-radius: var(--radius-md) !important;
}
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    width: 3px;
    background: rgba(91, 91, 214, 0.7);
    border-radius: 2px;
}

.status-badge, .badge, .banned-badge, .locked-badge, .disabled-badge, .tier-badge, .update-badge, .proxy-badge, .current-badge {
    border-radius: var(--radius-sm) !important;
    padding: 2px 8px !important;
}

/* Task 7: Table row borders too bright */
table tr, .accounts-table tr, .log-row {
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
table th, .accounts-table th {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Task 8: Card/section borders */
.account-card, .model-quota-card, .stats-card, .info-strip, .ultra-reset-table {
    border-color: var(--border-color) !important;
}
.card, .section, .panel, .container, .box, .action-card {
    border-color: var(--border-color) !important;
}

/* Task 9: Input/select borders Default */
input, select, textarea, .form-input, .search-box input {
    border-color: rgba(255,255,255,0.12) !important;
}

/* Task 9: Input/select borders Focus */
input:focus, select:focus, textarea:focus, .form-input:focus, .search-box input:focus {
    border-color: rgba(255,255,255,0.20) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.10) !important;
    outline: none !important;
}

/* Task 12: Recording badge padding */
.recording-btn, .btn-recording, .recording-indicator {
    padding: 4px 12px !important;
    gap: 6px !important; /* proper dot spacing */
}

/* Task 4: Sidebar divider fix */
.sidebar-footer {
    margin-left: 16px !important;
    margin-right: 16px !important;
}

/* Task 5: Toggle switch redesign */
.toggle, input[type="checkbox"].toggle {
    width: 36px !important;
    height: 20px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.10) !important;
    border: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}
.toggle::before, .toggle::after, input[type="checkbox"].toggle::before, input[type="checkbox"].toggle::after {
    content: '' !important;
    width: 14px !important;
    height: 14px !important;
    top: 3px !important;
    left: 3px !important;
    background: #d4d4d8 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
    position: absolute !important;
    border-radius: 50% !important;
    transform: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.toggle:checked, input[type="checkbox"].toggle:checked {
    background: var(--accent-primary) !important;
}
.toggle:checked::before, .toggle:checked::after, input[type="checkbox"].toggle:checked::before, input[type="checkbox"].toggle:checked::after {
    transform: translateX(16px) !important;
    background: #fff !important;
}

/* ========================================
   PAGE-SPECIFIC LAYOUT FIXES (16 issues)
   ======================================== */



.stats-card__subtitle {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ultra-accounts-section {
    margin-top: 16px !important;
}
.ultra-reset-header {
    grid-template-columns: 1fr 120px 120px !important;
}
.ultra-reset-header > *:nth-child(2),
.ultra-reset-header > *:nth-child(3) {
    text-align: right !important;
}
.ultra-reset-row {
    grid-template-columns: 1fr 120px 120px !important;
}
.ultra-reset-cell--time {
    justify-content: flex-end !important;
    text-align: right !important;
}

.accounts-table th:first-child,
.accounts-table td:first-child {
    width: 48px !important;
    text-align: center !important;
    padding-left: 12px !important;
    padding-right: 4px !important;
}
input[type="checkbox"]:not(.toggle) {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    flex-shrink: 0;
}
input[type="checkbox"]:not(.toggle):checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}
input[type="checkbox"]:not(.toggle):checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.status-dot {
    width: 8px !important;
    height: 8px !important;
    vertical-align: middle;
    flex-shrink: 0;
}

.tier-unknown,
.tier-badge.tier-unknown {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-tertiary);
}

.view-toggle {
    display: inline-flex !important;
    background: var(--bg-tertiary) !important;
    border-radius: var(--radius-md) !important;
    padding: 2px !important;
    border: 1px solid var(--border-color) !important;
}
.view-toggle button {
    padding: 4px 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    color: var(--text-tertiary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.view-toggle button:hover {
    color: var(--text-primary) !important;
}
.view-toggle button.active {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.setting-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

input[type="number"],
input[type="text"] {
    color: var(--text-primary) !important;
}

.proxy-status,
.status-indicator,
.server-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.setting-info {
    flex: 1;
    min-width: 0;
}

.settings-section .setting-row:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}
.settings-section .setting-row:last-child {
    border-bottom: none !important;
}

.logs-table {
    table-layout: fixed !important;
}
.logs-table th:nth-child(1),
.logs-table td:nth-child(1) {
    width: 80px !important;
    padding-left: 16px !important;
}
.logs-table th:nth-child(2),
.logs-table td:nth-child(2) {
    width: 80px !important;
}
.logs-table th:nth-child(3),
.logs-table td:nth-child(3) {
    width: 70px !important;
}
.logs-table th:nth-child(4),
.logs-table td:nth-child(4) {
    width: 220px !important;
    min-width: 200px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.logs-table th:nth-child(5),
.logs-table td:nth-child(5) {
    width: 92px !important;
}
.logs-table th:nth-child(6),
.logs-table td:nth-child(6) {
    width: 160px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.logs-table th:nth-child(7),
.logs-table td:nth-child(7) {
    width: 140px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.logs-table th:nth-child(8),
.logs-table td:nth-child(8) {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.monitor-stats .stat-value,
.header-stats .stat-value {
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}
.monitor-stats .stat-label,
.header-stats .stat-label {
    font-size: 0.75rem !important;
    color: var(--text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.filter-tabs button {
    padding-bottom: 8px !important;
}
.filter-tabs button.active {
    border-bottom: 2px solid var(--accent-primary) !important;
}

.token-counter .value,
.token-value {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}
.token-counter .label,
.token-label {
    font-size: 0.75rem !important;
    color: var(--text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

/* ========================================
   PAGE-SPECIFIC FIXES — BATCH 3
   ======================================== */

/* DASHBOARD 1: Card timing values wrapping ("4h 55m" breaking to next line) */
.stats-card__value,
.stats-card__subtitle {
    white-space: nowrap !important;
}

/* DASHBOARD 2: Quota table headers/cells alignment */
.table th, .table td {
    text-align: left !important;
}

/* DASHBOARD 3: Neon percentage colors too saturated — desaturate success */
.stats-card__value.stats-card--success { color: rgba(110, 231, 183, 0.85) !important; }

/* DASHBOARD 4: Table header background too harsh — transparent + crisp border */
table th, .table th {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ACCOUNTS 5: Action buttons inline with H1 */
.page-header {
    flex-wrap: nowrap !important;
    align-items: center !important;
}
.page-header .header-actions {
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
}

/* ACCOUNTS 6: LIST/GRID toggle needs visible active pill */
.view-toggle button.active {
    background: rgba(255, 255, 255, 0.10) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ACCOUNTS 7: Empty table gap too large */
.accounts-table-container .empty-state,
.empty-state {
    padding: 32px !important;
}

/* PROXY 9: Status dot vertically centered with text baseline */
.proxy-status, .server-status, .status-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.proxy-status .status-dot {
    flex-shrink: 0 !important;
    align-self: center !important;
}

/* SETTINGS 11: Save button sticky at bottom of viewport */
.page:has(.settings-section) .page-header .btn--primary {
    position: fixed !important;
    bottom: 24px !important;
    right: 32px !important;
    z-index: 100 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

/* SETTINGS 12: Breathing room before first settings card */
.settings .settings-section:first-of-type {
    margin-top: 8px !important;
}

/* MONITOR 13: Stats unified row — header-stats inline with h1 */
.monitor .page-header {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
}
.monitor .page-header .header-stats {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 13px !important;
}

/* MONITOR 14: Table row density — reduce padding for log viewer */
.logs-table td {
    padding: 6px 12px !important;
}
.logs-table th {
    padding: 8px 12px !important;
}

/* MONITOR 15: Filter tab truncation — prevent text cutoff */
.monitor .quick-filters button,
.monitor .filter-tabs button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.monitor .quick-filters,
.monitor .filter-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 4px !important;
}

/* MONITOR 16: "← Back" link — reduce prominence */
.back-button,
.back-link {
    display: none !important;
}

/* MONITOR 17: Recording badge — crisp contrast + glow dot */
.monitor .recording-btn,
.monitor .recording-btn.recording {
    background: rgba(220, 38, 38, 0.10) !important;
    color: var(--accent-danger) !important;
    border: 1px solid rgba(220, 38, 38, 0.18) !important;
}
.monitor .recording-btn .dot,
.monitor .recording-btn .recording-dot {
    background: var(--accent-danger) !important;
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.26) !important;
}

/* --- GLOBALLY CONSISTENT LOADING FEEDBACK --- */
.btn.loading, .btn.btn--loading, .btn--loading {
    position: relative !important;
    pointer-events: none !important;
    color: transparent !important;
}

.btn.loading::after, .btn.btn--loading::after, .btn--loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: -0.6rem;
    margin-left: -0.6rem;
    border: 2px solid rgba(79, 70, 229, 0.18);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    box-sizing: border-box;
}

.btn-primary.loading::after,
.btn-primary.btn--loading::after,
.btn.loading.btn-primary::after,
.btn--loading.btn-primary::after {
    border-color: rgba(255, 255, 255, 0.36);
    border-top-color: #ffffff;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.btn.loading > *, .btn.btn--loading > *, .btn--loading > * {
    visibility: hidden;
}

/* ==========================================================================
   MOBILE UI RESPONSIVENESS (@media max-width: 768px)
   Luminous Physiology - Mobile Refinements
   ========================================================================== */

/* Show mobile nav only on small screens */
.mobile-nav {
  display: none;
}

@media (max-width: 768px) {
  /* Hide sidebar on mobile */
  .sidebar {
    display: none !important;
  }

  /* Adjust main container to give space for mobile nav */
  .app-container {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  .main-content {
    margin-left: 0;
    width: 100%;
    padding: var(--spacing-4) var(--spacing-4);
  }

  /* Bottom Mobile Navigation */
  .mobile-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 65px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-color);
    z-index: 900;
    padding: 0 var(--spacing-2);
    padding-bottom: env(safe-area-inset-bottom, 0px); /* iPhone notch support */
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    text-decoration: none;
    flex: 1;
    height: 100%;
    transition: all 0.2s ease;
    gap: 4px;
  }

  .mobile-nav-item.active {
    color: var(--accent-primary);
  }
  
  .mobile-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .mobile-nav-icon svg {
    width: 20px;
    height: 20px;
  }

  .mobile-nav-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  /* Toolbars and Headers Responsiveness */
  .toolbar, .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4);
  }
  
  .toolbar-actions, .header-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  
  .toolbar-actions .btn, .header-actions .btn {
    flex: 1;
    min-width: fit-content;
    justify-content: center;
  }

  .search-box {
    width: 100%;
    max-width: none;
  }
  
  .search-box input {
    width: 100%;
  }

  /* Filter Tabs Responsiveness */
  .filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding-bottom: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  
  .filter-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  
  .filter-tab {
    flex-shrink: 0;
  }

  /* Modals - Full Screen on Mobile */
  .modal {
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
    display: flex;
    flex-direction: column;
  }
  
  .modal-content, .modal-body {
    flex: 1;
    overflow-y: auto;
  }
  
  .modal-footer {
    padding-bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom, 0px));
  }

  /* Grids and Tables Responsiveness */
  .accounts-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  /* Tables with horizontal scroll */
  .accounts-table, .logs-table, .config-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  
  /* Make pagination responsive */
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-2);
  }
  
  /* Login screen adjustments */
  .login-container {
    width: 100%;
    max-width: 100%;
    margin: var(--spacing-4);
    padding: var(--spacing-6) var(--spacing-4);
  }
}

/* Extra small devices */
@media (max-width: 380px) {
  .mobile-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  
  .mobile-nav-icon svg {
    width: 24px;
    height: 24px;
  }
}

/* Secret-editing typestate: retained values are never rendered back into inputs. */
.settings-secret-field,
.proxy-secret-entry-list {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.secret-retained-control,
.secret-list-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.secret-retained-control > span {
    flex: 1 1 220px;
    min-width: 0;
    color: var(--text-secondary);
}

.proxy-secret-entry-list {
    width: min(100%, 520px);
}

.proxy-secret-entry-list > .settings-secret-field {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.secret-entry-placeholder {
    width: 100%;
    min-height: 82px;
    padding: 14px;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

.setting-label {
    color: var(--text-primary);
    font-weight: 600;
}

.settings-edit-surface[inert] {
    opacity: 0.72;
}

@media (max-width: 480px) {
    .proxy-secret-entry-list,
    .secret-retained-control,
    .secret-list-actions {
        width: 100%;
    }

    .proxy-secret-entry-list > .settings-secret-field {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ========================================
   Operations dashboard — isolated surface
   ======================================== */
.ops-dashboard {
    --ops-accent: var(--accent-primary);
    --ops-accent-strong: color-mix(in srgb, var(--accent-primary) 82%, var(--text-primary));
    --ops-mint: var(--accent-success);
    --ops-panel: color-mix(in srgb, var(--bg-card) 94%, transparent);
    --ops-panel-soft: color-mix(in srgb, var(--bg-tertiary) 78%, transparent);
    --ops-line: color-mix(in srgb, var(--border-default) 80%, transparent);
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1560px;
    padding: 28px 32px 64px;
}

.ops-dashboard a {
    color: inherit;
    text-decoration: none;
}

.ops-dashboard section {
    margin: 0;
}

.ops-hero,
.ops-panel {
    border: 1px solid var(--ops-line);
    background: var(--ops-panel);
    box-shadow: 0 18px 48px -40px rgba(0, 0, 0, 0.85);
}

.ops-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px 28px;
    overflow: hidden;
    padding: 28px;
    border-radius: 20px;
}

.ops-hero::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--accent-success);
    content: "";
}

.ops-hero--attention::before {
    background: var(--accent-warning);
}

.ops-hero--critical::before {
    background: var(--accent-danger);
}

.ops-hero::after {
    position: absolute;
    top: -110px;
    right: -80px;
    width: 360px;
    height: 260px;
    border-radius: 50%;
    background: rgba(129, 140, 248, 0.09);
    filter: blur(6px);
    pointer-events: none;
    content: "";
}

.ops-hero__copy,
.ops-hero__actions,
.ops-hero__metrics {
    position: relative;
    z-index: 1;
}

.ops-hero__status-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-success);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ops-hero--attention .ops-hero__status-line {
    color: var(--accent-warning);
}

.ops-hero--critical .ops-hero__status-line {
    color: var(--accent-danger);
}

.ops-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 13%, transparent);
}

.ops-hero h1 {
    margin-top: 12px;
    color: var(--text-primary);
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 720;
    letter-spacing: -0.045em;
    line-height: 1;
}

.ops-hero__copy > p {
    max-width: 680px;
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.55;
}

.ops-hero__freshness {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 18px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 11px;
}

.ops-hero__actions {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ops-action,
.ops-link,
.ops-segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid var(--ops-line);
    border-radius: 9px;
    background: var(--ops-panel-soft);
    color: var(--text-secondary) !important;
    font-size: 12px;
    font-weight: 650;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.ops-action {
    padding: 0 13px;
}

.ops-action--primary {
    border-color: rgba(129, 140, 248, 0.42);
    background: rgba(129, 140, 248, 0.15);
    color: var(--ops-accent-strong) !important;
}

.ops-action:hover,
.ops-link:hover,
.ops-segment:hover {
    border-color: rgba(129, 140, 248, 0.48);
    color: var(--text-primary) !important;
    transform: translateY(-1px);
}

.ops-action:focus-visible,
.ops-link:focus-visible,
.ops-segment:focus-visible,
.ops-hero-metric:focus-visible,
.ops-capacity-row:focus-visible,
.ops-attention__list a:focus-visible,
.ops-mini-metric:focus-visible,
.ops-traffic__rate:focus-visible,
.ops-traffic__success:focus-visible {
    outline: 2px solid var(--ops-accent);
    outline-offset: 2px;
}

.ops-hero__metrics {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--ops-line);
    border-radius: 13px;
    background: var(--ops-line);
}

.ops-hero-metric {
    min-width: 0;
    padding: 15px 17px;
    background: var(--bg-card);
    transition: background 140ms ease;
}

.ops-hero-metric:hover {
    background: var(--bg-hover);
}

.ops-hero-metric span,
.ops-hero-metric small {
    display: block;
}

.ops-hero-metric span {
    color: var(--text-tertiary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ops-hero-metric strong {
    display: block;
    margin: 7px 0 4px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 680;
    letter-spacing: -0.04em;
}

.ops-hero-metric small {
    overflow: visible;
    color: var(--text-tertiary);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
}

.ops-dashboard__primary,
.ops-dashboard__secondary,
.ops-dashboard__full {
    display: grid;
    gap: 18px;
    align-items: start;
}

.ops-dashboard__primary {
    grid-template-columns: minmax(0, 1.65fr) minmax(340px, 0.85fr);
}

.ops-dashboard__secondary {
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
}

.ops-dashboard__full {
    grid-template-columns: minmax(0, 1fr);
}

.ops-panel {
    min-width: 0;
    border-radius: 16px;
    padding: 20px;
}

.ops-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.ops-panel__header h2 {
    margin-top: 5px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 680;
    letter-spacing: -0.025em;
}

.ops-panel__header p:not(.ops-kicker) {
    max-width: 720px;
    margin-top: 6px;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.5;
}

.ops-projection {
    border-top: 2px solid var(--ops-accent);
}

.ops-projection__header {
    align-items: flex-start;
}

.ops-projection__meta {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 10px;
}

.ops-projection__meta > span {
    padding: 5px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--ops-panel-soft);
}

.ops-projection__state {
    color: var(--text-secondary);
    text-transform: uppercase;
}

.ops-projection__state--ready {
    border-color: color-mix(in srgb, var(--accent-success) 34%, var(--border-subtle)) !important;
    color: var(--accent-success);
}

.ops-projection__state--collecting,
.ops-projection__state--stale {
    border-color: color-mix(in srgb, var(--accent-warning) 34%, var(--border-subtle)) !important;
    color: var(--accent-warning);
}

.ops-projection__state--critical {
    border-color: color-mix(in srgb, var(--accent-danger) 34%, var(--border-subtle)) !important;
    color: var(--accent-danger);
}

.ops-projection__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: -3px 0 12px;
    color: var(--text-tertiary);
    font-size: 10px;
}

.ops-projection__legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ops-projection__legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ops-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ops-accent) 14%, transparent);
}

.ops-projection__legend-dot--current {
    background: var(--ops-mint);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ops-mint) 14%, transparent);
}

.ops-projection__legend-line {
    width: 14px;
    border-top: 2px dashed var(--accent-warning);
}

.ops-projection__coverage-note {
    margin-left: auto;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.ops-projection__rows {
    display: grid;
    gap: 8px;
}

.ops-projection-row {
    display: grid;
    grid-template-columns: minmax(230px, 0.55fr) minmax(0, 1.45fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 11px;
    background: var(--ops-panel-soft);
}

.ops-projection-row__summary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.ops-projection-row__summary > div:first-child {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: baseline;
}

.ops-projection-row__summary .ops-kicker {
    grid-column: 1 / -1;
}

.ops-projection-row__summary strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 24px;
    letter-spacing: -0.05em;
}

.ops-projection-row__summary span {
    color: var(--text-tertiary);
    font-size: 10px;
}

.ops-projection-row__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ops-projection-row__facts span {
    padding: 4px 6px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 9px;
}

.ops-projection-row__chart {
    min-width: 0;
    padding: 2px 3px 0;
}

.ops-projection-row__chart svg {
    display: block;
    width: 100%;
    height: 96px;
    overflow: visible;
}

.ops-projection__gridline {
    stroke: var(--border-subtle);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.ops-projection__budget-line {
    stroke: var(--accent-warning);
    stroke-width: 1.4;
    stroke-dasharray: 5 4;
    vector-effect: non-scaling-stroke;
}

.ops-projection__line {
    stroke: var(--ops-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.ops-projection__point {
    fill: var(--bg-card);
    stroke: var(--ops-accent);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.ops-projection__point--current {
    fill: var(--ops-mint);
    stroke: var(--ops-mint);
}

.ops-projection-row__axis {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: -1px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 9px;
}

.ops-projection-row__axis span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-kicker {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ops-link {
    flex: 0 0 auto;
    gap: 7px;
    min-height: 32px;
    padding: 0 10px;
}

.ops-reserve {
    border-top: 2px solid var(--accent-success);
}

.ops-reserve--attention {
    border-top-color: var(--accent-warning);
}

.ops-reserve--critical {
    border-top-color: var(--accent-danger);
}

.ops-reserve__header > div:first-child > p:last-child {
    margin-top: 7px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.ops-reserve__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.ops-reserve__facts span,
.ops-window__trend span,
.ops-inline-warning {
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--ops-panel-soft);
}

.ops-reserve__facts span,
.ops-window__trend span {
    padding: 5px 8px;
    color: var(--text-secondary);
    font-size: 10px;
}

.ops-reserve__windows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ops-scope-note {
    display: grid;
    gap: 4px;
    margin-bottom: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(129, 140, 248, 0.22);
    border-left: 3px solid var(--ops-accent-strong);
    border-radius: 9px;
    background: rgba(129, 140, 248, 0.06);
}

.ops-scope-note strong {
    color: var(--text-primary);
    font-size: 12px;
}

.ops-scope-note span {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.45;
}

.ops-tier-forecast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

.ops-tier-forecast {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ops-line);
    border-radius: 13px;
    background: var(--bg-card);
}

.ops-tier-forecast__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 15px 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.ops-tier-forecast__header h3 {
    margin: 3px 0 0;
    color: var(--text-primary);
    font-size: 17px;
    letter-spacing: -0.025em;
}

.ops-tier-forecast__header p {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 10px;
}

.ops-tier-forecast__activity {
    display: inline-flex;
    margin-top: 7px;
    padding: 4px 7px;
    border: 1px solid rgba(45, 212, 191, 0.2);
    border-radius: 999px;
    background: rgba(45, 212, 191, 0.06);
    color: var(--ops-mint);
    font-family: var(--font-mono);
    font-size: 9px;
}

.ops-tier-forecast__state {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--ops-panel-soft);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
}

.ops-tier-forecast__windows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 10px;
}

.ops-tier-forecast__windows > .ops-window:only-child {
    grid-column: 1 / -1;
}

.ops-tier-forecast__windows .ops-window {
    border-color: var(--border-subtle);
    border-radius: 10px;
}

.ops-tier-forecast__windows .ops-window__header {
    padding: 11px 12px 10px;
}

.ops-tier-forecast__windows .ops-window__summary span {
    min-height: 48px;
    padding: 8px 9px;
}

.ops-tier-forecast__windows .ops-burn-profile {
    padding: 10px 11px 12px;
}

.ops-tier-forecast__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 12px;
    padding: 0 15px 13px;
    color: var(--text-tertiary);
    font-size: 10px;
}

.ops-window {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ops-line);
    border-radius: 13px;
    background: var(--bg-card);
}

.ops-window__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 16px 13px;
    border-bottom: 1px solid var(--border-subtle);
}

.ops-window__header > div:first-child span,
.ops-window__header > div:first-child small,
.ops-window__total span {
    display: block;
}

.ops-window__header > div:first-child span {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 680;
}

.ops-window__header > div:first-child small,
.ops-window__total span {
    margin-top: 3px;
    color: var(--text-tertiary);
    font-size: 10px;
}

.ops-window__total {
    text-align: right;
}

.ops-window__total strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 24px;
    letter-spacing: -0.05em;
}

.ops-window--weekly .ops-window__total strong {
    color: var(--ops-accent-strong);
}

.ops-window--primary .ops-window__total strong {
    color: var(--ops-mint);
}

.ops-window__summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--border-subtle);
}

.ops-window__summary span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    min-width: 0;
    min-height: 56px;
    padding: 10px 12px;
    background: var(--ops-panel-soft);
    color: var(--text-tertiary);
    font-size: 10px;
}

.ops-window__summary b {
    color: var(--text-secondary);
    font-weight: 650;
    line-height: 1.25;
}

.ops-window__summary small {
    color: var(--text-tertiary);
    font-size: 9px;
    line-height: 1.2;
}

.ops-window__trend {
    padding: 13px 14px 0;
}

.ops-window__trend > strong {
    display: block;
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.4;
}

.ops-window__trend > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.ops-workload-attribution {
    display: grid;
    gap: 7px;
    margin: 12px 14px 0;
    padding: 10px 11px;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--text-muted);
    border-radius: 8px;
    background: var(--ops-panel-soft);
}

.ops-workload-attribution--parallelism {
    border-left-color: var(--ops-mint);
    background: rgba(45, 212, 191, 0.055);
}

.ops-workload-attribution--intensity {
    border-left-color: var(--ops-accent-strong);
    background: rgba(129, 140, 248, 0.055);
}

.ops-workload-attribution--mixed {
    border-left-color: var(--accent-warning);
    background: rgba(251, 191, 36, 0.05);
}

.ops-workload-attribution > div {
    display: grid;
    gap: 3px;
}

.ops-workload-attribution span {
    color: var(--text-muted);
    font-size: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ops-workload-attribution strong {
    color: var(--text-primary);
    font-size: 11px;
    line-height: 1.35;
}

.ops-workload-attribution p,
.ops-workload-attribution small {
    margin: 0;
    color: var(--text-secondary);
    font-size: 9px;
    line-height: 1.45;
}

.ops-workload-attribution small {
    color: var(--text-tertiary);
}

.ops-burn-profile {
    padding: 13px 14px 15px;
}

.ops-burn-profile__axis {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ops-burn-profile__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.ops-burn-point {
    min-width: 0;
    text-align: center;
}

.ops-burn-point__plot {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 60px;
    padding: 0 3px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--ops-panel-soft);
}

.ops-burn-point__plot i {
    display: block;
    flex: 1 1 0;
    width: auto;
    min-height: 3px;
    border-radius: 5px 5px 2px 2px;
}

.ops-burn-point__burn {
    background: linear-gradient(180deg, rgba(129, 140, 248, 0.92), rgba(129, 140, 248, 0.28));
}

.ops-burn-point__load {
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.92), rgba(251, 191, 36, 0.24));
}

.ops-burn-point--current .ops-burn-point__plot {
    outline: 1px solid rgba(45, 212, 191, 0.45);
    background: rgba(45, 212, 191, 0.08);
}

.ops-burn-point--current .ops-burn-point__burn {
    background: linear-gradient(180deg, var(--ops-mint), rgba(45, 212, 191, 0.28));
}

.ops-burn-point strong,
.ops-burn-point small,
.ops-burn-point span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-burn-point strong {
    margin-top: 6px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 650;
}

.ops-burn-point small {
    margin-top: 2px;
    color: var(--accent-warning);
    font-family: var(--font-mono);
    font-size: 8px;
}

.ops-burn-point span {
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 9px;
}

.ops-reserve__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 12px;
    color: var(--text-tertiary);
    font-size: 10px;
}

.ops-inline-warning {
    margin-bottom: 12px;
    padding: 8px 10px;
    border-color: rgba(251, 191, 36, 0.24);
    border-radius: 9px;
    background: rgba(251, 191, 36, 0.07);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.4;
}

.ops-traffic__hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.ops-traffic__rate,
.ops-traffic__success {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--ops-line);
    border-radius: 11px;
    background: var(--ops-panel-soft);
}

.ops-traffic__rate span,
.ops-traffic__success span,
.ops-traffic__rate small,
.ops-traffic__success small {
    display: block;
    color: var(--text-tertiary);
    font-size: 10px;
}

.ops-traffic__rate strong,
.ops-traffic__success strong {
    display: block;
    margin: 7px 0 4px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 28px;
    letter-spacing: -0.05em;
}

.ops-traffic__success--good strong {
    color: var(--accent-success);
}

.ops-traffic__success--watch strong {
    color: var(--accent-warning);
}

.ops-traffic__success--bad strong {
    color: var(--accent-danger);
}

.ops-traffic__bars {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    align-items: end;
    gap: 5px;
    height: 90px;
    margin-top: 14px;
    padding: 10px 10px 0;
    border-bottom: 1px solid var(--ops-line);
    background: linear-gradient(180deg, transparent, rgba(129, 140, 248, 0.025));
}

.ops-traffic__bars span {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.ops-traffic__bars i {
    display: block;
    width: 100%;
    min-height: 3px;
    border-radius: 4px 4px 1px 1px;
    background: linear-gradient(180deg, var(--ops-accent), rgba(129, 140, 248, 0.28));
}

.ops-traffic__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 13px;
}

.ops-mini-metric {
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--ops-panel-soft);
}

.ops-mini-metric span,
.ops-mini-metric strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-mini-metric span {
    color: var(--text-tertiary);
    font-size: 9px;
    text-transform: uppercase;
}

.ops-mini-metric strong {
    margin-top: 5px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 14px;
}

.ops-traffic__signals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.ops-signal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--ops-panel-soft);
    color: var(--text-secondary) !important;
    font-size: 10px;
}

.ops-signal b {
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.ops-signal--danger b {
    color: var(--accent-danger);
}

.ops-signal--warning b {
    color: var(--accent-warning);
}

.ops-signal--quiet {
    color: var(--text-tertiary) !important;
}

.ops-capacity__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ops-capacity-row {
    display: grid;
    grid-template-columns: 130px minmax(100px, 1fr) 110px minmax(180px, 0.9fr);
    gap: 10px 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--ops-panel-soft);
    transition: border-color 140ms ease, background 140ms ease;
}

.ops-capacity-row:hover {
    border-color: rgba(129, 140, 248, 0.36);
    background: var(--bg-hover);
}

.ops-capacity-row__name strong,
.ops-capacity-row__name span,
.ops-capacity-row__reserve strong,
.ops-capacity-row__reserve span {
    display: block;
}

.ops-capacity-row__name strong {
    color: var(--text-primary);
    font-size: 13px;
}

.ops-capacity-row__name span,
.ops-capacity-row__reserve span,
.ops-capacity-row__detail,
.ops-capacity-row small {
    color: var(--text-tertiary);
    font-size: 10px;
}

.ops-capacity-row__bar {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--track-bg);
}

.ops-capacity-row__bar i {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ops-mint), var(--ops-accent));
}

.ops-capacity-row__reserve {
    text-align: right;
}

.ops-capacity-row__reserve strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 17px;
}

.ops-capacity-row__detail {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: right;
}

.ops-capacity-row small {
    grid-column: 1 / -1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-attention__groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ops-attention__groups h3 {
    margin-bottom: 8px;
    color: var(--text-tertiary);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ops-attention__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ops-attention__list a,
.ops-attention__event {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    padding: 9px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 9px;
    background: var(--ops-panel-soft);
}

.ops-attention__list a:hover {
    border-color: rgba(129, 140, 248, 0.36);
}

.ops-attention__list span,
.ops-attention__list strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-attention__list span {
    color: var(--text-secondary);
    font-size: 11px;
}

.ops-attention__list strong {
    color: var(--accent-warning);
    font-family: var(--font-mono);
    font-size: 11px;
}

.ops-attention__list small {
    grid-column: 1 / -1;
    color: var(--text-tertiary);
    font-size: 9px;
}

.ops-empty {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    border: 1px dashed var(--ops-line);
    border-radius: 10px;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.5;
}

.ops-empty strong {
    color: var(--text-primary);
    font-size: 13px;
}

.ops-empty--success {
    border-color: rgba(52, 211, 153, 0.25);
    background: rgba(52, 211, 153, 0.05);
}

.ops-empty--warning {
    border-color: rgba(251, 191, 36, 0.28);
    background: rgba(251, 191, 36, 0.05);
}

.ops-empty--error {
    border-color: rgba(251, 113, 133, 0.3);
    background: rgba(251, 113, 133, 0.05);
    color: var(--accent-danger);
}

.ops-tier-table {
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}

.ops-tier-row {
    display: grid;
    grid-template-columns: minmax(110px, 1.25fr) repeat(4, minmax(70px, 0.75fr));
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--ops-panel-soft);
}

.ops-tier-row:last-child {
    border-bottom: 0;
}

.ops-tier-row--header {
    background: var(--bg-tertiary);
}

.ops-tier-row span,
.ops-tier-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-tier-row span {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
}

.ops-tier-row strong {
    color: var(--text-primary);
    font-size: 12px;
}

.ops-tier-row--header span {
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ops-automation__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ops-automation__state {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-left: 3px solid var(--accent-success);
    border-radius: 8px;
    background: var(--ops-panel-soft);
}

.ops-automation__state--attention {
    border-left-color: var(--accent-warning);
}

.ops-automation__state--critical {
    border-left-color: var(--accent-danger);
}

.ops-automation__state span,
.ops-automation__state small {
    color: var(--text-tertiary);
    font-size: 10px;
}

.ops-automation__state strong {
    color: var(--text-primary);
    font-size: 13px;
}

.ops-automation__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.ops-automation__metrics div {
    padding: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--ops-panel-soft);
}

.ops-automation__metrics span,
.ops-automation__metrics strong {
    display: block;
}

.ops-automation__metrics span {
    color: var(--text-tertiary);
    font-size: 9px;
    text-transform: uppercase;
}

.ops-automation__metrics strong {
    margin-top: 5px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 15px;
}

.ops-automation__footnote {
    color: var(--text-tertiary);
    font-size: 10px;
}

.ops-daily-usage {
    overflow: hidden;
}

.ops-daily-usage__header {
    align-items: center;
}

.ops-daily-usage__scope {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid rgba(45, 212, 191, 0.28);
    border-radius: 999px;
    background: rgba(45, 212, 191, 0.08);
    color: var(--accent-success);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ops-daily-usage__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.ops-daily-usage__summary > div {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--ops-panel-soft);
}

.ops-daily-usage__summary span,
.ops-daily-usage__summary strong,
.ops-daily-usage__summary small {
    display: block;
}

.ops-daily-usage__summary span {
    overflow: hidden;
    color: var(--text-tertiary);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.ops-daily-usage__summary strong {
    margin-top: 6px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 20px;
    line-height: 1.1;
}

.ops-daily-usage__summary small {
    margin-top: 5px;
    color: var(--text-tertiary);
    font-size: 9px;
    line-height: 1.35;
}

.ops-daily-usage__range {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 8px;
}

.ops-daily-usage__range span,
.ops-daily-usage__range strong {
    display: block;
}

.ops-daily-usage__range span {
    color: var(--text-tertiary);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ops-daily-usage__range strong {
    margin-top: 3px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 14px;
}

.ops-daily-usage__range p {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 9px;
    text-align: right;
}

.ops-daily-usage__rows {
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}

.ops-daily-usage-row {
    display: grid;
    grid-template-columns: 88px minmax(180px, 1fr) 92px 92px;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--ops-panel-soft);
}

.ops-daily-usage-row:last-child {
    border-bottom: 0;
}

.ops-daily-usage-row--partial {
    background: linear-gradient(90deg, rgba(129, 140, 248, 0.07), var(--ops-panel-soft) 36%);
}

.ops-daily-usage-row--no-data {
    opacity: 0.7;
}

.ops-daily-usage-row__date strong,
.ops-daily-usage-row__date span,
.ops-daily-usage-row__value strong,
.ops-daily-usage-row__value span {
    display: block;
}

.ops-daily-usage-row__date strong {
    color: var(--text-primary);
    font-size: 12px;
}

.ops-daily-usage-row__date span {
    margin-top: 3px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 8px;
}

.ops-daily-usage-row__bar > div {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.1);
}

.ops-daily-usage-row__bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.5), rgba(129, 140, 248, 0.95));
    box-shadow: 0 0 12px rgba(129, 140, 248, 0.18);
}

.ops-daily-usage-row__bar small {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: var(--text-tertiary);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-daily-usage-row__value {
    text-align: right;
}

.ops-daily-usage-row__value strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 13px;
}

.ops-daily-usage-row__value span {
    margin-top: 3px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 9px;
}

.ops-daily-usage-row__state {
    justify-self: end;
    padding: 4px 7px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-tertiary);
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}

.ops-daily-usage-row__state--measured {
    border-color: rgba(45, 212, 191, 0.22);
    color: var(--accent-success);
}

.ops-daily-usage-row__state--partial {
    border-color: rgba(129, 140, 248, 0.3);
    color: var(--ops-accent-strong);
}

.ops-daily-usage__footnote {
    margin: 10px 0 0;
    color: var(--text-tertiary);
    font-size: 9px;
    line-height: 1.5;
}

.ops-history__header {
    align-items: center;
}

.ops-history__controls {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--ops-line);
    border-radius: 10px;
    background: var(--ops-panel-soft);
}

.ops-segment {
    min-height: 29px;
    padding: 0 9px;
    border-color: transparent;
    background: transparent;
    cursor: pointer;
}

.ops-segment--active {
    border-color: rgba(129, 140, 248, 0.34);
    background: rgba(129, 140, 248, 0.14);
    color: var(--ops-accent-strong) !important;
}

.ops-history__series {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ops-history__series > .ops-history-series:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.ops-history-series {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--ops-panel-soft);
}

.ops-history-series > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.ops-history-series > header > div:last-child {
    text-align: right;
}

.ops-history-series > header strong,
.ops-history-series > header span {
    display: block;
}

.ops-history-series > header strong {
    color: var(--text-primary);
    font-size: 12px;
}

.ops-history-series > header span {
    margin-top: 3px;
    color: var(--text-tertiary);
    font-size: 9px;
}

.ops-history-series__change--down {
    color: var(--accent-danger) !important;
}

.ops-history-series__change--up {
    color: var(--accent-success) !important;
}

.ops-history-series__plot {
    display: grid;
    grid-auto-columns: minmax(3px, 1fr);
    grid-auto-flow: column;
    align-items: end;
    gap: 3px;
    height: 84px;
    margin-top: 12px;
    overflow: hidden;
    border-bottom: 1px solid var(--ops-line);
}

.ops-history-series__plot span {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.ops-history-series__plot i {
    display: block;
    width: 100%;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, rgba(45, 212, 191, 0.9), rgba(45, 212, 191, 0.2));
}

@media (max-width: 1220px) {
    .ops-dashboard__primary,
    .ops-dashboard__secondary {
        grid-template-columns: 1fr;
    }

    .ops-traffic__metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .ops-dashboard {
        padding: 22px 22px 80px;
    }

    .ops-hero {
        grid-template-columns: 1fr;
    }

    .ops-hero__actions {
        justify-content: flex-start;
    }

    .ops-hero__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ops-reserve__windows,
    .ops-tier-forecast-grid,
    .ops-history__series {
        grid-template-columns: 1fr;
    }

    .ops-daily-usage__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ops-daily-usage-row {
        grid-template-columns: 76px minmax(140px, 1fr) 84px;
    }

    .ops-daily-usage-row__state {
        grid-column: 2 / -1;
        justify-self: start;
        margin-top: -5px;
    }

    .ops-projection-row {
        grid-template-columns: 1fr;
    }

    .ops-capacity-row {
        grid-template-columns: 120px minmax(80px, 1fr) 100px;
    }

    .ops-capacity-row__detail {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

@media (max-width: 640px) {
    .ops-dashboard {
        gap: 12px;
        padding: 14px 12px 88px;
    }

    .ops-hero,
    .ops-panel {
        border-radius: 13px;
        padding: 15px;
    }

    .ops-hero__actions,
    .ops-panel__header,
    .ops-reserve__header {
        align-items: stretch;
        flex-direction: column;
    }

    .ops-action,
    .ops-link {
        width: 100%;
    }

    .ops-hero__metrics {
        grid-template-columns: 1fr 1fr;
    }

    .ops-hero-metric {
        padding: 12px;
    }

    .ops-hero-metric strong {
        font-size: 20px;
    }

    .ops-reserve__facts {
        justify-content: flex-start;
    }

    .ops-projection__meta {
        justify-content: flex-start;
    }

    .ops-tier-forecast__header {
        align-items: stretch;
        flex-direction: column;
    }

    .ops-tier-forecast__state {
        align-self: flex-start;
    }

    .ops-tier-forecast__windows {
        grid-template-columns: 1fr;
    }

    .ops-window__summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ops-window__summary span {
        min-height: 64px;
        padding: 9px 8px;
    }

    .ops-burn-profile__grid,
    .ops-burn-profile__axis {
        min-width: 0;
    }

    .ops-burn-profile__grid {
        gap: 3px;
    }

    .ops-burn-profile__axis {
        gap: 12px;
        font-size: 8px;
    }

    .ops-burn-point__plot {
        height: 52px;
    }

    .ops-burn-point strong {
        font-size: 9px;
    }

    .ops-traffic__hero,
    .ops-attention__groups {
        grid-template-columns: 1fr;
    }

    .ops-attention__groups {
        grid-auto-rows: max-content;
        align-content: start;
    }

    .ops-traffic__metrics,
    .ops-automation__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ops-capacity-row {
        grid-template-columns: 1fr auto;
    }

    .ops-capacity-row__bar {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .ops-capacity-row__reserve {
        text-align: right;
    }

    .ops-capacity-row__detail {
        grid-column: 1 / -1;
    }

    .ops-tier-table {
        overflow: hidden;
    }

    .ops-tier-row {
        grid-template-columns: minmax(48px, 1.1fr) repeat(4, minmax(0, 0.8fr));
        gap: 4px;
        min-width: 0;
        padding: 9px 6px;
    }

    .ops-tier-row span {
        font-size: 9px;
    }

    .ops-tier-row strong {
        font-size: 10px;
    }

    .ops-tier-row--header span {
        font-size: 7px;
        letter-spacing: 0.025em;
    }

    .ops-history__header {
        align-items: stretch;
    }

    .ops-daily-usage__header {
        align-items: stretch;
    }

    .ops-daily-usage__scope {
        align-self: flex-start;
    }

    .ops-daily-usage__summary {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .ops-daily-usage__summary strong {
        font-size: 17px;
    }

    .ops-daily-usage__range {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .ops-daily-usage__range p {
        text-align: left;
    }

    .ops-daily-usage-row {
        grid-template-columns: 62px minmax(0, 1fr) 66px;
        gap: 8px;
        padding: 9px 8px;
    }

    .ops-daily-usage-row__date span,
    .ops-daily-usage-row__bar small {
        display: none;
    }

    .ops-daily-usage-row__value strong {
        font-size: 11px;
    }

    .ops-projection__coverage-note {
        width: 100%;
        margin-left: 0;
    }

    .ops-projection-row {
        padding: 10px;
    }

    .ops-projection-row__summary strong {
        font-size: 21px;
    }

    .ops-history__controls {
        width: 100%;
    }

    .ops-segment {
        flex: 1 1 0;
    }
}

/* Login UI Fixes */
.error-message, .login-container .alert--error {
    text-align: center;
    justify-content: center;
}

.api-key-input, .login-container .form-input {
    text-align: center;
}

.login-hint {
    margin-top: 32px;
    line-height: 1.6;
}

.logo, .login-logo {
    mix-blend-mode: normal;
    border-radius: 50%;
    background: transparent;
}

/* Dashboard Mobile Fixes */
@media (max-width: 768px) {
    .hero-metrics {
        grid-template-columns: 1fr;
    }
}

.account-state-badge,
.verify-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.06em;
}

.account-state-badge--healthy {
    border-color: color-mix(in srgb, var(--accent-success) 40%, transparent);
    background: color-mix(in srgb, var(--accent-success) 12%, transparent);
    color: var(--accent-success);
}

.account-state-badge--warning,
.verify-badge {
    border-color: color-mix(in srgb, var(--accent-warning) 40%, transparent);
    background: color-mix(in srgb, var(--accent-warning) 12%, transparent);
    color: var(--accent-warning);
}

.account-state-badge--danger {
    border-color: color-mix(in srgb, var(--accent-danger) 40%, transparent);
    background: color-mix(in srgb, var(--accent-danger) 12%, transparent);
    color: var(--accent-danger);
}

.codex-reserve__windows-empty {
    display: grid;
    gap: 4px;
    grid-column: 1 / -1;
    padding: 14px 16px;
    border: 1px dashed var(--border-default);
    border-radius: 12px;
    background: var(--bg-tertiary);
}

.codex-reserve__windows-empty strong {
    color: var(--text-primary);
    font-size: 13px;
}

.codex-reserve__windows-empty span {
    color: var(--text-secondary);
    font-size: 12px;
}

.route-announcer {
    position: fixed;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.monitor-row-open {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.monitor-row-open:hover,
.monitor-row-open:focus-visible {
    color: var(--accent-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.modal {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
}

.modal-body {
    min-height: 0;
    overflow: auto;
    overflow-wrap: anywhere;
}

.settings-conflict {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 32px 0;
}

@media (max-width: 768px) {
    .settings-conflict {
        align-items: stretch;
        flex-direction: column;
        margin: 10px 16px 0;
    }
}

/* Accounts operator surface */
.accounts-header {
    align-items: flex-start !important;
}

.accounts-header .header-left {
    min-width: 320px;
}

.accounts-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.accounts-overview__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.74);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1;
}

.accounts-overview__item b {
    color: var(--text-primary);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.accounts-overview__item--ready {
    border-color: rgba(4, 120, 87, 0.16);
    background: var(--accent-success-muted);
}

.accounts-overview__item--verify,
.accounts-overview__item--offline {
    border-color: rgba(180, 83, 9, 0.18);
    background: var(--accent-warning-muted);
}

.accounts-overview__item--codex {
    border-color: rgba(79, 70, 229, 0.16);
    background: rgba(79, 70, 229, 0.08);
}

.btn svg,
.view-toggle svg,
.account-icon-btn svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    flex: 0 0 auto;
}

.view-toggle {
    min-height: 38px;
}

.view-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 72px;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 1;
}

.toolbar {
    flex-wrap: wrap;
    align-items: center;
}

.toolbar .search-box {
    flex: 1 1 280px;
    min-width: 240px;
}

.toolbar .search-box input {
    width: 100%;
}

.accounts-table {
    min-width: 1120px;
    table-layout: fixed;
}

.accounts-table th,
.accounts-table td {
    padding: 10px 12px !important;
}

.accounts-table .col-checkbox {
    width: 42px;
}

.accounts-table .col-status {
    width: 34px;
}

.accounts-table .col-email {
    width: 240px;
}

.accounts-table .col-added {
    width: 92px;
}

.accounts-table .col-provider {
    width: 110px;
}

.accounts-table .col-tier {
    width: 92px;
}

.accounts-table .col-model-quota {
    width: 292px;
    min-width: 292px;
}

.accounts-table .col-proxy {
    width: 158px;
    min-width: 158px;
}

.accounts-table .col-actions {
    width: 160px;
    min-width: 160px;
}

.accounts-table .email-text,
.accounts-table .proxy-route,
.account-card .proxy-route {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.accounts-table .model-quota-grid,
.account-card-quotas.model-quota-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.accounts-table .quota-cell,
.account-card .quota-cell {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: rgba(248, 250, 252, 0.88) !important;
}

.account-card .quota-bar,
.account-card .quota-cell .quota-bar {
    display: block;
    width: 100%;
    margin: 5px 0 3px;
}

.account-card .quota-reset,
.account-card .quota-text {
    line-height: 1.15;
}

.col-actions,
.account-card-actions {
    gap: 6px;
}

.col-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.account-icon-btn,
.col-actions .account-icon-btn,
.account-card-actions .account-icon-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0 !important;
    border-radius: var(--radius-sm);
    letter-spacing: 0;
}

.account-icon-btn--use {
    color: var(--accent-primary) !important;
}

.account-icon-btn--danger {
    color: var(--accent-danger) !important;
}

.account-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 12px;
}

.account-card {
    min-width: 0;
}

.account-card-email {
    min-width: 0;
}

.account-card-email .email-name,
.account-card-email .email-domain {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-card-proxy__status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.account-card-proxy__status .proxy-route {
    min-width: 0;
}

@media (max-width: 1180px) {
    .accounts-table {
        min-width: 1040px;
    }

    .accounts-table .col-email {
        width: 210px;
    }

    .accounts-table .col-model-quota {
        width: 270px;
        min-width: 270px;
    }

    .accounts-table .col-proxy {
        width: 138px;
        min-width: 138px;
    }
}

@media (max-width: 900px) {
    .accounts-header .header-left,
    .header-actions,
    .sort-select,
    .tier-select,
    .visibility-toggle,
    .filter-tabs,
    .selection-actions {
        width: 100%;
    }

    .header-actions,
    .filter-tabs,
    .selection-actions {
        flex-wrap: wrap;
    }

    .sort-select select,
    .tier-select select {
        flex: 1 1 auto;
    }
}

/* Fix scrolling overlap on mobile */
.page.dashboard {
    padding-bottom: 80px;
}

/* Dashboard Mobile Fixes 2 */
@media (max-width: 768px) {
    .stats-card--hero .stats-card__title,
    .stats-card--hero .stats-card__value,
    .stats-card--hero .stats-card__subtitle,
    .stats-card__title,
    .stats-card__value,
    .stats-card__subtitle {
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
        word-break: break-word !important;
    }
    
    .hero-metrics {
        grid-template-columns: 1fr !important;
    }
}

/* Fix Mobile Nav */
@media (max-width: 768px) {
    .mobile-nav {
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
        background: rgba(255, 255, 255, 0.94) !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
    }
    
    .mobile-nav-item {
        flex: 1 1 0 !important;
        width: 100% !important;
    }
    
    .mobile-nav-icon svg {
        width: 22px !important;
        height: 22px !important;
        stroke-width: 2px !important;
    }
}

/* Dashboard mobile overlap, line-height, stroke width fixes */

.stats-card {
    gap: 8px !important;
}

.stats-card__subtitle {
    margin-top: 4px !important;
    line-height: 1.4 !important;
}

.stats-card--danger {
    color: #fca5a5 !important;
    opacity: 1 !important;
}
.stats-card__value.stats-card--danger { color: #fca5a5 !important; }

.account-card .text-secondary,
.account-card .email-domain,
.account-card .proxy-label,
.account-card .card-subtitle,
.account-card .quota-value {
    color: var(--text-secondary) !important;
}

@media (max-width: 768px) {
    .main-content {
        padding-bottom: 80px !important;
    }

    .page-header {
        padding-top: env(safe-area-inset-top, 16px);
    }

    .mobile-nav {
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5) !important;
        background: rgba(255, 255, 255, 0.94) !important;
    }
    
    .mobile-nav-item {
        color: rgba(255, 255, 255, 0.5) !important;
        border-radius: 12px;
        height: auto !important;
        padding: 8px 4px;
        margin: 4px 2px;
    }
    
    .mobile-nav-item.active {
        color: var(--accent-primary) !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    .mobile-nav-icon svg {
        stroke-width: 2px !important;
    }
    
    .mobile-nav-item.active .mobile-nav-icon svg {
        stroke-width: 2.5px !important;
    }
}

/* ========================================
   Real-Time Quota — Freshness & Live Updates
   ======================================== */

/* Per-account "Updated Xs ago" label below quota cells */
.quota-age-label {
    display: block;
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    text-align: right;
    margin-top: 4px;
    opacity: 0.7;
    transition: color 0.3s ease, opacity 0.3s ease;
}

/* Quota cell freshness states — subtle left accent border */
.quota-cell {
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.quota-freshness--fresh {
    border-left: 2px solid var(--accent-success);
}

.quota-freshness--fresh .quota-fill {
    animation: quotaPulse 0.6s ease-out;
}

.quota-freshness--recent {
    border-left: 2px solid transparent;
}

.quota-freshness--stale {
    border-left: 2px solid var(--accent-warning);
    opacity: 0.85;
}

.quota-freshness--stale .quota-label {
    color: var(--accent-warning);
}

.quota-freshness--unknown {
    border-left: 2px solid transparent;
    opacity: 0.6;
}

/* Accounts table quota grid: compact operator scan surface. */
.accounts-table .col-added {
    width: 104px;
}

.accounts-table .col-provider {
    width: 112px;
}

.accounts-table .col-tier {
    width: 96px;
}

.accounts-table .col-model-quota {
    width: 360px;
    min-width: 320px;
}

.accounts-table .col-proxy {
    width: 198px;
    min-width: 198px;
}

.accounts-table .col-actions {
    width: 172px;
    min-width: 172px;
}

.accounts-table .model-quota-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(136px, 1fr));
    gap: 8px;
    align-items: stretch;
}

.accounts-table .quota-cell {
    min-width: 0;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.018);
    border-radius: var(--radius-sm);
}

.accounts-table .quota-header {
    min-width: 0;
}

.accounts-table .quota-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accounts-table .quota-bar {
    display: block;
    width: 100%;
    margin: 4px 0 2px;
}

.accounts-table .quota-reset,
.accounts-table .quota-text {
    line-height: 1.1;
}

.accounts-table .quota-age-label {
    margin-top: 3px;
}

.provider-quota-placeholder,
.codex-quota-info {
    display: flex;
    min-width: 0;
    max-width: 100%;
    flex-direction: column;
    gap: 4px;
}

.provider-quota-title {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.provider-quota-hint {
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.35;
}

.accounts-table .provider-quota-title,
.accounts-table .provider-quota-hint {
    font-size: 11px;
}

.accounts-table .provider-quota-hint {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Pulse animation on quota bar when data refreshes */
@keyframes quotaPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4);
    }
    50% {
        box-shadow: 0 0 6px 2px rgba(52, 211, 153, 0.2);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
    }
}

/* Dashboard info-strip — synced indicator */
.info-strip__item--synced {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.8;
}

/* ========================================
   Theme consolidation overrides
   ======================================== */

html,
body {
    background:
        radial-gradient(circle at 0% 0%, rgba(79, 70, 229, 0.08), transparent 30%),
        radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.07), transparent 28%),
        var(--bg-primary);
    color: var(--text-primary);
}

.sidebar,
.main-content,
.page,
.app-container {
    background-color: transparent;
}

.sidebar {
    background: var(--surface-glass);
    box-shadow: 1px 0 0 var(--border-color), 16px 0 36px -34px rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(18px);
}

.nav-item.active,
.nav-item:hover,
.view-toggle button.active,
.protocol-tabs button.active,
.tab-btn.active,
.filter-tabs button.active,
.account-row.is-current,
.account-row.is-selected,
.account-card.is-selected,
.best-account-item.is-current {
    background: var(--accent-muted) !important;
    color: var(--text-primary) !important;
}

.nav-item.active::before {
    background: rgba(79, 70, 229, 0.78) !important;
}

.stats-card,
.accounts-table-container,
.logs-table-container,
.settings-section,
.status-card,
.config-card,
.tier-card,
.action-card,
.code-example,
.current-account-card,
.no-account,
.account-card,
.modal,
.modal-content,
.log-detail-modal,
.model-quota-card,
.ultra-reset-table,
.health-banner,
.control-panel,
.capacity-lane,
.codex-reserve,
.readiness-header,
.info-strip,
.detail-grid,
.code-block,
pre {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-card) !important;
}

.stats-card:hover,
.account-card:hover,
.action-card:hover,
.model-quota-card:hover,
.tier-card:hover {
    box-shadow: var(--shadow-card-hover) !important;
}

.accounts-table th,
.logs-table th,
table th,
.ultra-reset-header,
.code-header,
.config-header,
.config-section,
.detail-grid,
pre,
.code-block,
.protocol-tabs,
.tab-nav,
.filter-tabs,
.view-toggle,
.base-url,
.oauth-url-box,
.mapping-item,
.best-account-item,
.vrf-panel__url,
.model-progress,
.quota-bar,
.account-card-quotas.model-quota-grid .quota-item,
.accounts-table .quota-cell,
.codex-reserve__bottleneck,
.codex-reserve__window,
.codex-reserve__forecast,
.codex-reserve__row,
.codex-reserve__locks span {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-subtle) !important;
}

.readiness-header__metrics div,
.control-panel,
.capacity-lane,
.blocker-ledger__list div,
.recovery-list__row {
    background: var(--surface-soft) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-card) !important;
}

.capacity-lane--ready {
    border-left: 3px solid rgba(16, 185, 129, 0.54) !important;
}

.capacity-lane--critical {
    border-left: 3px solid rgba(225, 29, 72, 0.5) !important;
}

.accounts-table td,
.logs-table td,
table td,
table tr,
.accounts-table tr,
.log-row,
.ultra-reset-row,
.setting-row,
.settings-section .setting-row:not(:last-child),
.account-card-proxy,
.modal-footer,
.log-details,
.log-details-row td,
.config-header,
.config-section,
.modal-header,
.log-detail-modal .modal-header,
.account-details-modal .modal-header {
    border-color: var(--border-subtle) !important;
}

input,
select,
textarea,
.form-input,
.search-box input,
.api-key-input,
.token-input,
.mapping-form input,
.config-item input[type="number"],
.config-item input[type="text"],
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="password"] {
    background: var(--input-bg) !important;
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    color-scheme: inherit !important;
    border-color: var(--border-default) !important;
    box-shadow: inset 0 1px 0 var(--inset-highlight) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.search-box input:focus,
.api-key-input:focus,
.token-input:focus {
    border-color: rgba(79, 70, 229, 0.58) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14) !important;
    outline: none !important;
}

input::placeholder,
.search-box input::placeholder,
.accounts-search input::placeholder,
.search-input::placeholder,
textarea::placeholder,
.login-form .form-input::placeholder,
.api-key-input::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

select,
.setting-select,
.setting-row select {
    background-color: var(--input-bg) !important;
    background-image: var(--select-arrow) !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 12px !important;
    padding-right: 32px !important;
}

.btn,
.btn--secondary,
.pagination-btn,
.api-key-actions button,
.api-key-row button,
.account-actions button,
.actions-cell button,
.quick-filters button,
.monitor-filters .filter-btn,
.monitor-filters button {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-default) !important;
    box-shadow: inset 0 1px 0 var(--inset-highlight) !important;
}

.btn:hover,
.btn--secondary:hover,
.pagination-btn:hover:not(:disabled),
.api-key-actions button:hover,
.api-key-row button:hover,
.account-actions button:hover,
.actions-cell button:hover,
.quick-filters button:hover,
.monitor-filters .filter-btn:hover,
.monitor-filters button:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: rgba(79, 70, 229, 0.26) !important;
}

.btn--primary,
.save-btn,
.login-form .btn--primary {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    color: #ffffff !important;
    border-color: rgba(79, 70, 229, 0.42) !important;
    text-shadow: none !important;
    box-shadow: 0 14px 28px -20px rgba(79, 70, 229, 0.82) !important;
}

.btn--primary:hover,
.save-btn:hover,
.login-form .btn--primary:hover {
    background: linear-gradient(135deg, #4338ca, #4f46e5) !important;
    box-shadow: 0 18px 34px -22px rgba(67, 56, 202, 0.9) !important;
}

.btn--danger,
.stop-btn,
.recording-btn,
.btn-recording,
.recording-indicator {
    background: var(--accent-danger-muted) !important;
    color: var(--accent-danger) !important;
    border-color: rgba(220, 38, 38, 0.18) !important;
}

.btn--danger:hover,
.stop-btn:hover {
    background: rgba(220, 38, 38, 0.16) !important;
}

.status-badge--success,
.status-badge.status-200,
.status-200,
.proxy-badge.on,
.proxy-toggle.on,
.tier-codex,
.tier-badge.tier-codex {
    background: var(--accent-success-muted) !important;
    color: var(--accent-success) !important;
    border-color: rgba(4, 120, 87, 0.18) !important;
}

.status-badge--error,
.proxy-badge.off,
.proxy-toggle.off,
.tier-banned,
.tier-badge.tier-banned,
.disabled-badge,
.banned-badge,
.quota-runtime-badge {
    background: var(--accent-danger-muted) !important;
    color: var(--accent-danger) !important;
    border-color: rgba(220, 38, 38, 0.18) !important;
}

.status-badge--warning,
.locked-badge,
.tier-verify,
.tier-badge.tier-verify,
.health-banner__alert,
.tier-ultra,
.tier-badge.tier-ultra {
    background: var(--accent-warning-muted) !important;
    color: var(--accent-warning) !important;
    border-color: rgba(180, 83, 9, 0.20) !important;
}

.tier-pro,
.tier-badge.tier-pro,
.selection-count,
.filter-count,
.tier-count,
.badge,
.filter-pill,
.btn-filter,
.filter-tabs button.active,
.quick-filters button.active,
.monitor-filters .filter-btn.active,
.monitor-filters button.active {
    background: var(--accent-muted) !important;
    color: var(--accent-primary) !important;
    border-color: rgba(79, 70, 229, 0.18) !important;
}

.tier-disabled,
.tier-badge.tier-disabled,
.tier-free,
.tier-badge.tier-free,
.tier-unknown,
.tier-badge.tier-unknown,
.rank-indicator--default {
    background: var(--bg-tertiary) !important;
    color: var(--text-tertiary) !important;
    border-color: var(--border-subtle) !important;
}

.quota-bar,
.model-progress,
.account-card-quotas.model-quota-grid .quota-bar,
.quota-cell--blocked .quota-bar,
.quota-item:has(.quota-runtime-badge) .quota-bar {
    background: var(--track-bg) !important;
}

.quota-fill--good,
.model-progress-bar.quota-fill--good,
.quota-bar-fill,
.model-progress-fill,
.progress-fill,
.status-dot--active,
.status-dot--running,
.status-indicator.running .status-dot {
    background: var(--accent-success) !important;
}

.quota-fill--warning,
.model-progress-bar.quota-fill--warning,
.status-dot--locked {
    background: #d97706 !important;
}

.quota-fill--critical,
.model-progress-bar.quota-fill--critical,
.status-dot--disabled,
.status-dot--stopped,
.status-dot--banned {
    background: var(--accent-danger) !important;
}

.status-dot--active,
.status-dot--running,
.status-dot--banned,
.status-dot--locked,
.status-dot--active,
.status-dot--running,
.status-active .status-dot,
.proxy-status-dot {
    box-shadow: none !important;
}

.stats-card--purple,
.stats-card--indigo,
.stats-card--blue,
.stats-card--hero {
    background: var(--hero-card-gradient) !important;
    border: 1px solid rgba(79, 70, 229, 0.12) !important;
    border-top: 1px solid rgba(79, 70, 229, 0.18) !important;
    box-shadow: var(--shadow-card) !important;
}

.stats-card--purple:hover,
.stats-card--indigo:hover,
.stats-card--blue:hover,
.stats-card--hero:hover,
.tier-card:hover,
.action-card:hover {
    border-color: rgba(79, 70, 229, 0.20) !important;
    box-shadow: var(--shadow-card-hover) !important;
}

.tier-card,
.action-card {
    box-shadow: var(--shadow-card) !important;
}

.tier-card--ultra {
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.09) 0%, var(--bg-card) 100%) !important;
    border-color: rgba(180, 83, 9, 0.16) !important;
}

.tier-card--pro {
    background: linear-gradient(180deg, rgba(129, 140, 248, 0.09) 0%, var(--bg-card) 100%) !important;
    border-color: rgba(79, 70, 229, 0.16) !important;
}

.tier-card--warning {
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.10) 0%, var(--bg-card) 100%) !important;
    border-color: rgba(180, 83, 9, 0.18) !important;
}

.stats-card__value.stats-card--success,
.stat--success,
.monitor-stats .stat-ok,
.best-account-item .quota-value,
.reset-text.reset-time--success,
.quota-reset.reset-time--success,
.status-indicator.running,
.status-text--running,
.status-active,
.proxy-status-text {
    color: var(--accent-success) !important;
}

.stats-card__value.stats-card--warning,
.reset-text.reset-time--warning,
.quota-reset.reset-time--warning,
.quota-freshness--stale .quota-label {
    color: var(--accent-warning) !important;
}

.stats-card__value.stats-card--danger,
.stats-card--danger,
.stat--error,
.monitor-stats .stat-err,
.error-section h3,
.detail-item.error .detail-value {
    color: var(--accent-danger) !important;
}

.login-page {
    background:
        radial-gradient(circle at top, rgba(79, 70, 229, 0.12), transparent 34%),
        radial-gradient(circle at 50% 120%, rgba(14, 165, 233, 0.10), transparent 38%),
        var(--bg-primary) !important;
}

.login-container {
    background: var(--surface-glass) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 30px 84px -54px rgba(15, 23, 42, 0.55) !important;
}

/* Request monitor workspace */
.monitor-controls {
    position: relative;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.monitor-search {
    flex: 1 1 320px;
    min-width: 240px;
}

.monitor-search input {
    width: 100%;
}

.monitor .quick-filters {
    max-width: 100%;
    padding-bottom: 1px;
}

.monitor .controls-right {
    gap: 6px;
}

.monitor-sort {
    flex: 0 0 auto;
    margin-left: auto;
}

.monitor-sort select {
    min-width: 150px;
}

.monitor-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.monitor-icon-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: rgba(79, 70, 229, 0.26);
}

.monitor-icon-btn:disabled {
    cursor: wait;
    opacity: 0.58;
}

.monitor-icon-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.monitor-icon-btn--danger {
    color: var(--accent-danger);
}

.monitor-icon-btn.is-loading svg {
    animation: btn-spin 0.7s linear infinite;
}

.monitor-clear-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 6px 8px 6px 12px;
    border: 1px solid rgba(220, 38, 38, 0.18);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 12px;
    box-shadow: var(--shadow-card);
}

.monitor-clear-confirm button {
    padding: 4px 8px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
}

.monitor-clear-confirm button.danger {
    border-color: rgba(220, 38, 38, 0.20);
    background: var(--accent-danger-muted);
    color: var(--accent-danger);
}

.monitor .token-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 16px;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.monitor .token-stat {
    gap: 2px;
    min-width: 0;
    padding: 12px 16px;
    border-right: 1px solid var(--border-subtle);
}

.monitor .token-stat:last-child {
    border-right: 0;
}

.monitor .token-value {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.runtime-parameters {
    margin-bottom: 16px;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.018);
}

.runtime-parameters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.runtime-parameters-header div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.runtime-parameters-header strong {
    color: var(--text-primary);
    font-size: 13px;
}

.runtime-parameters-header span {
    color: var(--text-tertiary);
    font-size: 12px;
}

.runtime-config-state {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}

.runtime-config-state--ready {
    border-color: rgba(34, 197, 94, 0.20);
    color: var(--accent-success) !important;
}

.runtime-param-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.runtime-param {
    display: flex;
    min-width: 0;
    min-height: 92px;
    flex-direction: column;
    gap: 6px;
    padding: 13px 16px;
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.runtime-param:nth-child(4n) {
    border-right: 0;
}

.runtime-param:nth-last-child(-n + 4) {
    border-bottom: 1px solid var(--border-subtle);
}

.runtime-param:last-child {
    border-bottom: 0;
}

.runtime-param-label {
    overflow: hidden;
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.runtime-param-value {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.runtime-param-detail {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.runtime-param--success .runtime-param-value {
    color: var(--accent-success);
}

.runtime-param--warning .runtime-param-value {
    color: var(--accent-warning);
}

.runtime-param--muted .runtime-param-value {
    color: var(--text-secondary);
}

.logs-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.logs-table-header div {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.logs-table-header strong {
    color: var(--text-primary);
    font-size: 13px;
}

.logs-table-header span,
.monitor-loading {
    color: var(--text-tertiary);
    font-size: 12px;
}

.logs-table-scroll {
    overflow-x: auto;
}

.monitor .logs-table {
    min-width: 2050px;
    table-layout: fixed;
}

.monitor .logs-table th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.monitor .logs-table td {
    height: 68px;
    vertical-align: top;
    line-height: 1.35;
}

.monitor .col-time {
    width: 86px;
}

.monitor .col-status {
    width: 72px;
}

.monitor .col-method {
    width: 68px;
}

.monitor .col-model {
    width: 190px;
}

.monitor .col-account-tier {
    width: 126px;
}

.monitor .col-tier {
    width: 92px;
}

.monitor .logs-table th.col-account-tier,
.monitor .logs-table td.col-account-tier {
    width: 126px !important;
    min-width: 126px !important;
}

.monitor .logs-table th.col-tier,
.monitor .logs-table td.col-tier {
    width: 100px !important;
    min-width: 100px !important;
}

.monitor .col-reasoning {
    width: 150px;
}

.monitor .col-routing {
    width: 220px;
}

.monitor .col-payload {
    width: 300px;
}

.monitor .col-path {
    width: 210px;
}

.monitor .col-tokens {
    width: 210px;
}

.monitor .col-duration {
    width: 210px;
}

.monitor .col-model,
.monitor .col-routing,
.monitor .col-payload,
.monitor .col-path {
    overflow: hidden;
    text-overflow: ellipsis;
}

.monitor .col-model,
.monitor .col-path {
    white-space: nowrap;
}

.monitor .col-routing,
.monitor .col-payload,
.monitor .col-reasoning,
.monitor .col-tokens,
.monitor .col-duration {
    padding-top: 9px;
    padding-bottom: 9px;
}

.monitor .col-routing,
.monitor .col-payload,
.monitor .col-reasoning,
.monitor .col-duration {
    display: table-cell;
}

.monitor .col-routing strong,
.monitor .col-payload strong,
.monitor .col-duration strong {
    display: block;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitor .col-routing code,
.monitor .col-payload > span,
.monitor .col-duration > span,
.monitor .col-tokens .monitor-cell-meta,
.monitor .col-reasoning .monitor-cell-meta {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitor .monitor-cell-meta {
    color: var(--text-tertiary) !important;
}

.reasoning-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    max-width: 100%;
    padding: 3px 8px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reasoning-badge--high {
    border-color: rgba(168, 85, 247, 0.35);
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
}

.reasoning-badge--medium {
    border-color: rgba(59, 130, 246, 0.30);
    background: rgba(59, 130, 246, 0.10);
    color: #60a5fa;
}

.reasoning-badge--low {
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.08);
    color: var(--accent-success);
}

.reasoning-badge--custom {
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.10);
    color: var(--accent-warning);
}

.reasoning-badge--unknown {
    color: var(--text-tertiary);
}

.service-tier-badge,
.service-tier-detail {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-tier-badge--fast,
.service-tier-detail--fast {
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.10);
    color: var(--accent-success);
}

.service-tier-badge--standard,
.service-tier-detail--standard {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-secondary);
}

.service-tier-badge--custom,
.service-tier-detail--custom {
    border-color: rgba(99, 102, 241, 0.24);
    background: rgba(99, 102, 241, 0.10);
    color: var(--accent-secondary);
}

.service-tier-badge--unknown,
.service-tier-detail--unknown {
    color: var(--text-tertiary);
}

.account-tier-badge,
.account-tier-detail {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22px;
    padding: 3px 8px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-tier-badge--premium,
.account-tier-detail--premium {
    border-color: rgba(129, 140, 248, 0.32);
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
}

.account-tier-badge--free,
.account-tier-detail--free {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-secondary);
}

.account-tier-badge--custom,
.account-tier-detail--custom {
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.10);
    color: var(--accent-warning);
}

.account-tier-badge--unknown,
.account-tier-detail--unknown {
    color: var(--text-tertiary);
}

.monitor .log-row {
    transition: background-color 0.12s ease;
}

.monitor .log-row:hover {
    background: rgba(79, 70, 229, 0.055);
}

.monitor .pagination {
    padding: 14px 0 0;
}

@media (max-width: 760px) {
    .monitor .page-header {
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .monitor .page-header .header-stats {
        width: 100%;
    }

    .monitor-search {
        flex-basis: 100%;
    }

    .monitor .quick-filters {
        order: 3;
        width: 100%;
    }

    .monitor-sort {
        order: 4;
        margin-left: 0;
    }

    .monitor .controls-right {
        margin-left: auto;
    }

    .monitor-clear-confirm {
        order: 5;
        width: 100%;
        justify-content: flex-end;
    }

    .runtime-parameters-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .runtime-parameters-header div {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .runtime-param-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .runtime-param:nth-child(4n) {
        border-right: 1px solid var(--border-subtle);
    }

    .runtime-param:nth-child(2n) {
        border-right: 0;
    }

    .runtime-param:nth-last-child(-n + 4) {
        border-bottom: 1px solid var(--border-subtle);
    }

    .runtime-param:nth-last-child(-n + 2) {
        border-bottom: 1px solid var(--border-subtle);
    }

    .runtime-param:last-child {
        border-bottom: 0;
    }

    .monitor .token-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .monitor .token-stat:nth-child(2) {
        border-right: 0;
    }

    .monitor .token-stat:nth-child(-n + 2) {
        border-bottom: 1px solid var(--border-subtle);
    }

.logs-table-header div {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .monitor .pagination-info {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .runtime-param-grid {
        grid-template-columns: 1fr;
    }

    .runtime-param,
    .runtime-param:nth-child(2n) {
        border-right: 0;
    }

    .runtime-param:nth-last-child(-n + 2) {
        border-bottom: 1px solid var(--border-subtle);
    }

    .runtime-param:last-child {
        border-bottom: 0;
    }
}

/* Accounts table operator fit: no overlay columns; give quota/proxy real scan width. */
.accounts-table {
    min-width: 1184px;
}

.accounts-table .col-checkbox {
    width: 36px;
}

.accounts-table .col-status {
    width: 28px;
}

.accounts-table .col-email {
    width: 206px;
}

.accounts-table .col-added {
    width: 80px;
}

.accounts-table .col-provider {
    width: 94px;
}

.accounts-table .col-tier {
    width: 90px;
}

.accounts-table .col-model-quota {
    width: 334px;
    min-width: 334px;
}

.accounts-table .col-proxy {
    width: 150px;
    min-width: 150px;
}

.accounts-table .col-actions {
    display: table-cell;
    width: 166px;
    min-width: 166px;
    padding-left: 10px !important;
    padding-right: 10px !important;
    text-align: right;
    white-space: nowrap;
}

.accounts-table .model-quota-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 7px;
}

.accounts-table .quota-cell {
    padding: 7px 8px !important;
}

.accounts-table .quota-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.accounts-table .quota-label {
    flex: 1 1 auto;
    font-size: 12px;
}

.accounts-table .quota-runtime-badge {
    flex: 0 0 auto;
}

.accounts-table .quota-reset,
.accounts-table .quota-text,
.accounts-table .quota-age-label {
    font-size: 11px;
}

/* Quota windows are operational state cards, not raw provider telemetry. */
.quota-cell,
.accounts-table .quota-cell,
.account-card .quota-cell {
    display: flex;
    min-height: 72px;
    flex-direction: column;
    justify-content: space-between;
    gap: 7px;
    padding: 9px 10px !important;
    overflow: hidden;
    background: var(--quota-card-gradient) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), inset 0 1px 0 var(--inset-highlight);
    opacity: 1;
}

.quota-cell .quota-header,
.accounts-table .quota-cell .quota-header {
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.quota-cell .quota-header-meta {
    display: inline-flex;
    min-width: 0;
    flex: 0 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.quota-cell .quota-label,
.accounts-table .quota-cell .quota-label {
    min-width: 0;
    color: var(--text-secondary) !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quota-cell .quota-value {
    flex: 0 0 auto;
    color: var(--text-primary) !important;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    white-space: nowrap;
}

.quota-cell .quota-value--not-reported,
.quota-cell .quota-value--not-used,
.quota-cell .quota-value--no-snapshot {
    max-width: 100%;
    padding: 2px 6px;
    overflow: hidden;
    color: var(--text-tertiary) !important;
    background: rgba(148, 163, 184, 0.11);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
}

.quota-cell .quota-value--depleted,
.quota-cell .quota-value--blocked {
    color: var(--accent-danger) !important;
}

.quota-cell .quota-bar,
.accounts-table .quota-cell .quota-bar,
.account-card .quota-cell .quota-bar {
    display: block;
    width: 100%;
    height: 6px;
    margin: 0;
    background: var(--track-bg) !important;
    border: 0 !important;
    border-radius: var(--radius-full);
}

.quota-cell .quota-fill {
    min-width: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.quota-cell .quota-reset-row {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    line-height: 1.15;
}

.quota-cell .quota-reset-label {
    flex: 0 0 auto;
    color: var(--text-tertiary);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.quota-cell .quota-reset,
.accounts-table .quota-cell .quota-reset,
.account-card .quota-cell .quota-reset {
    min-width: 0;
    overflow: hidden;
    color: var(--text-secondary) !important;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quota-cell .quota-reset.reset-time--warning {
    color: var(--accent-warning) !important;
}

.quota-cell--depleted,
.accounts-table .quota-cell--depleted,
.account-card .quota-cell--depleted,
.quota-cell--runtime-blocked,
.accounts-table .quota-cell--runtime-blocked,
.account-card .quota-cell--runtime-blocked {
    background: var(--danger-card-gradient) !important;
    border-color: rgba(220, 38, 38, 0.20) !important;
}

.quota-cell--unsupported,
.accounts-table .quota-cell--unsupported,
.account-card .quota-cell--unsupported {
    background: var(--quota-card-gradient) !important;
    border-color: var(--border-default) !important;
}

.quota-cell .quota-value--unsupported {
    color: var(--text-primary) !important;
}

.quota-cell--not-reported,
.accounts-table .quota-cell--not-reported,
.account-card .quota-cell--not-reported,
.quota-cell--not-used,
.accounts-table .quota-cell--not-used,
.account-card .quota-cell--not-used {
    min-height: 72px;
    justify-content: center;
    background: var(--bg-tertiary) !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
    border-style: dashed !important;
    box-shadow: none;
}

.quota-cell--not-reported .quota-header,
.quota-cell--not-used .quota-header,
.quota-cell--no-snapshot .quota-header {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
}

.quota-cell--not-reported .quota-header-meta,
.quota-cell--not-used .quota-header-meta,
.quota-cell--no-snapshot .quota-header-meta {
    width: 100%;
    justify-content: flex-start;
}

.quota-cell--no-snapshot,
.accounts-table .quota-cell--no-snapshot,
.account-card .quota-cell--no-snapshot {
    min-height: 72px;
    justify-content: center;
    background: var(--warning-card-gradient) !important;
    border-color: rgba(180, 83, 9, 0.24) !important;
    border-style: dashed !important;
    box-shadow: none;
}

.quota-cell--no-snapshot .quota-value--no-snapshot {
    color: var(--accent-warning) !important;
    background: var(--accent-warning-muted);
    border-color: rgba(180, 83, 9, 0.16);
}

.quota-cell .quota-runtime-badge {
    min-width: auto;
    padding: 2px 5px;
    font-size: 8px;
    letter-spacing: 0.02em;
}

.quota-cell .quota-runtime-badge--neutral {
    background: var(--bg-tertiary) !important;
    color: var(--text-tertiary) !important;
    border-color: var(--border-subtle) !important;
}

.quota-cell .quota-runtime-badge--warning {
    background: var(--accent-warning-muted) !important;
    color: var(--accent-warning) !important;
    border-color: rgba(180, 83, 9, 0.20) !important;
}

.quota-freshness--fresh,
.quota-freshness--recent,
.quota-freshness--stale,
.quota-freshness--unknown {
    border-left-width: 1px;
}

.quota-freshness--stale {
    opacity: 1;
}

.quota-freshness--stale .quota-label {
    color: var(--accent-warning) !important;
}

@media (max-width: 768px) {
    .account-card .quota-cell {
        min-height: 76px;
        padding: 10px !important;
    }

    .account-card .quota-cell .quota-label {
        font-size: 12px;
    }

    .account-card .quota-cell .quota-value {
        font-size: 14px;
    }

    .account-card .quota-cell .quota-value--not-reported,
    .account-card .quota-cell .quota-value--not-used,
    .account-card .quota-cell .quota-value--no-snapshot {
        font-size: 10px;
    }
}

.col-actions {
    gap: 4px;
}

.col-actions .account-icon-btn {
    width: 23px;
    height: 24px;
    min-width: 23px;
}

.accounts-table .col-actions .account-icon-btn + .account-icon-btn {
    margin-left: 4px;
}

.login-container::before {
    background: radial-gradient(circle, rgba(79, 70, 229, 0.12), transparent 72%) !important;
}

.login-subtitle,
.login-form .form-group label,
.login-hint {
    color: var(--text-secondary) !important;
}

.login-form .form-input {
    background: var(--input-bg) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

.logo,
.login-logo {
    mix-blend-mode: normal !important;
}

.modal-overlay,
.modal-backdrop {
    background: rgba(15, 23, 42, 0.34) !important;
    backdrop-filter: blur(8px) !important;
}

.toggle,
input[type="checkbox"].toggle {
    background: rgba(100, 116, 139, 0.22) !important;
    border: 1px solid rgba(100, 116, 139, 0.18) !important;
}

.toggle::before,
.toggle::after,
input[type="checkbox"].toggle::before,
input[type="checkbox"].toggle::after {
    background: var(--toggle-thumb) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22) !important;
}

.toggle:checked,
input[type="checkbox"].toggle:checked {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

input[type="checkbox"]:not(.toggle) {
    background: var(--checkbox-bg) !important;
    border-color: rgba(71, 85, 105, 0.38) !important;
}

input[type="checkbox"]:not(.toggle):checked {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.32);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(71, 85, 105, 0.48);
}

@media (max-width: 768px) {
    .accounts-header .header-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .accounts-header .header-actions .btn {
        min-width: 0;
        padding-inline: 10px;
    }

    .toolbar .search-box {
        flex: 0 0 auto;
        min-width: 0;
    }

    .account-card-proxy {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .account-card-proxy__status {
        width: 100%;
        justify-content: space-between;
    }

    .mobile-nav {
        background: var(--surface-glass) !important;
        border-top: 1px solid var(--border-color) !important;
        box-shadow: 0 -12px 34px -28px rgba(15, 23, 42, 0.52) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .mobile-nav-item {
        color: var(--text-tertiary) !important;
    }

    .mobile-nav-item.active {
        color: var(--accent-primary) !important;
        background: var(--accent-muted) !important;
    }
}

.accounts-table {
    min-width: 1304px;
}

.accounts-table .col-actions {
    width: 206px;
    min-width: 206px;
}

/* Proxy Pool table owns its column geometry; global logs/accounts table rules must not leak in. */
.proxy-pool-table {
    table-layout: fixed !important;
    min-width: 1040px !important;
}

.proxy-pool-table th,
.proxy-pool-table td {
    padding: 10px 16px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.proxy-pool-table .col-proxy {
    width: 360px !important;
    min-width: 360px !important;
}

.proxy-pool-table .col-assignment {
    width: 230px !important;
    min-width: 230px !important;
}

.proxy-pool-table .col-updated {
    width: 190px !important;
    min-width: 190px !important;
}

.proxy-pool-table .col-id {
    width: 160px !important;
    min-width: 160px !important;
}

.proxy-pool-table .col-actions {
    width: 100px !important;
    min-width: 100px !important;
    text-align: right !important;
}

.logs-table.proxy-pool-table th:nth-child(1),
.logs-table.proxy-pool-table td:nth-child(1) {
    width: 360px !important;
    min-width: 360px !important;
}

.logs-table.proxy-pool-table th:nth-child(2),
.logs-table.proxy-pool-table td:nth-child(2) {
    width: 230px !important;
    min-width: 230px !important;
}

.logs-table.proxy-pool-table th:nth-child(3),
.logs-table.proxy-pool-table td:nth-child(3) {
    width: 190px !important;
    min-width: 190px !important;
}

.logs-table.proxy-pool-table th:nth-child(4),
.logs-table.proxy-pool-table td:nth-child(4) {
    width: 160px !important;
    min-width: 160px !important;
}

.logs-table.proxy-pool-table th:nth-child(5),
.logs-table.proxy-pool-table td:nth-child(5) {
    width: 100px !important;
    min-width: 100px !important;
}

.proxy-pool-table .col-proxy code,
.proxy-pool-table .col-id code,
.proxy-pool-assignment {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Client Access table owns its column geometry; global logs/accounts rules must not leak in. */
.client-access-key-table {
    table-layout: fixed !important;
    min-width: 780px !important;
}

.client-access-key-table th,
.client-access-key-table td {
    padding: 10px 14px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.client-access-key-table th:nth-child(1),
.client-access-key-table td:nth-child(1) {
    width: 190px !important;
}

.client-access-key-table th:nth-child(2),
.client-access-key-table td:nth-child(2) {
    width: 210px !important;
}

.client-access-key-table th:nth-child(3),
.client-access-key-table td:nth-child(3) {
    width: 130px !important;
}

.client-access-key-table th:nth-child(4),
.client-access-key-table td:nth-child(4) {
    width: 170px !important;
}

.client-access-key-table th:nth-child(5),
.client-access-key-table td:nth-child(5) {
    width: 80px !important;
    text-align: right !important;
}

@media (max-width: 768px) {
    .client-access-recovery__actions,
    .client-access-edit-conflict > .btn {
        width: 100%;
    }

    .client-access-key-banner {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .client-access-form,
    .client-access-edit,
    .client-access-usage,
    .client-access-billing__grid {
        grid-template-columns: 1fr;
    }

    .client-access-billing__header {
        flex-direction: column;
    }

    .client-access-billing__header span {
        text-align: left;
    }

    .client-access-notes,
    .client-access-usage__meta {
        grid-column: auto;
    }

    .client-access-limits {
        grid-template-columns: 1fr;
    }

    .client-access-create-actions .btn {
        width: 100%;
    }

    .client-access-card__header,
    .client-access-keys__header {
        flex-direction: column;
        align-items: stretch;
    }

    .client-access-card__actions,
    .client-access-add-key {
        width: 100%;
    }

    .client-access-add-key input {
        width: 100%;
    }

    .client-access-key-table {
        min-width: 100% !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    .client-access-key-table th,
    .client-access-key-table td {
        padding: 8px 4px !important;
        font-size: 11px !important;
    }

    .client-access-key-table th:nth-child(1),
    .client-access-key-table td:nth-child(1) {
        width: 64px !important;
    }

    .client-access-key-table th:nth-child(2),
    .client-access-key-table td:nth-child(2) {
        width: 76px !important;
    }

    .client-access-key-table th:nth-child(3),
    .client-access-key-table td:nth-child(3) {
        width: 62px !important;
    }

    .client-access-key-table th:nth-child(4),
    .client-access-key-table td:nth-child(4) {
        display: none !important;
    }

    .client-access-key-table th:nth-child(5),
    .client-access-key-table td:nth-child(5) {
        width: 42px !important;
        padding-right: 0 !important;
    }

    .client-access-key-actions .btn--icon {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
}

/* Operator workflow: actionable dashboard, account actions, and investigation presets. */
.accounts-overview__item,
.readiness-header__metrics a,
.capacity-lane,
.blocker-ledger__list a,
.recovery-list__row,
.codex-reserve__row,
.panel-link,
.traffic-metric,
.traffic-signal {
    text-decoration: none;
}

.accounts-overview__item,
.readiness-header__metrics a,
.capacity-lane,
.blocker-ledger__list a,
.recovery-list__row,
.codex-reserve__row,
.traffic-metric,
.traffic-signal {
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.accounts-overview__item:hover,
.readiness-header__metrics a:hover,
.capacity-lane:hover,
.blocker-ledger__list a:hover,
.recovery-list__row:hover,
.codex-reserve__row:hover,
.traffic-metric:hover,
.traffic-signal:hover {
    border-color: rgba(79, 70, 229, 0.34) !important;
    box-shadow: 0 12px 30px -24px rgba(79, 70, 229, 0.72) !important;
    transform: translateY(-1px);
}

.accounts-overview__item:focus-visible,
.readiness-header__metrics a:focus-visible,
.capacity-lane:focus-visible,
.blocker-ledger__list a:focus-visible,
.recovery-list__row:focus-visible,
.codex-reserve__row:focus-visible,
.traffic-metric:focus-visible,
.traffic-signal:focus-visible,
.panel-link:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.readiness-header__metrics a {
    display: block;
    padding: 14px;
    background: var(--surface-soft);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: inherit;
}

.capacity-lane {
    display: block;
    color: inherit;
}

.blocker-ledger__list a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-primary);
}

.blocker-ledger__list a strong {
    color: var(--accent-warning);
    font-family: var(--font-mono);
}

.recovery-list__row,
.codex-reserve__row {
    color: inherit;
}

.control-panel__header--linked {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.panel-link {
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.traffic-pulse {
    min-width: 0;
}

.traffic-pulse__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.traffic-metric {
    min-width: 0;
    padding: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 9px;
    color: inherit;
}

.traffic-metric span {
    display: block;
    overflow: hidden;
    color: var(--text-tertiary);
    font-size: 10px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.traffic-metric strong {
    display: block;
    margin-top: 4px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 18px;
}

.traffic-pulse__bars {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    align-items: end;
    gap: 4px;
    height: 70px;
    margin-top: 12px;
    padding: 8px 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.traffic-pulse__bars > span {
    display: flex;
    align-items: end;
    height: 100%;
}

.traffic-pulse__bars i {
    display: block;
    width: 100%;
    min-height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--accent-primary), rgba(79, 70, 229, 0.36));
}

.traffic-pulse__signals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.traffic-signal {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 11px;
}

.traffic-signal b {
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.traffic-signal--error b {
    color: var(--accent-danger);
}

.traffic-pulse__sample,
.traffic-pulse__empty {
    margin: 10px 0 0;
    color: var(--text-tertiary);
    font-size: 11px;
}

.traffic-pulse__empty--error {
    color: var(--accent-danger);
}

.monitor-data-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.runtime-parameters-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.runtime-parameters-toggle:hover {
    background: var(--bg-hover);
}

.runtime-config-state--error {
    color: var(--accent-danger) !important;
}

.account-card-actions,
.accounts-table .col-actions {
    overflow: visible !important;
}

.account-card {
    overflow: visible;
}

.account-action-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.account-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 72px;
    height: 30px;
    padding: 0 9px !important;
    border: 1px solid var(--border-default) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-size: 11px !important;
    font-weight: 650;
}

.account-primary-action--use {
    border-color: rgba(79, 70, 229, 0.28) !important;
    background: rgba(79, 70, 229, 0.08) !important;
    color: var(--accent-primary) !important;
}

.account-primary-action svg,
.account-action-item svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.account-more-action {
    width: 32px;
    min-width: 32px;
    height: 30px;
    padding: 0 !important;
    border: 1px solid var(--border-default) !important;
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.account-action-popover {
    position: fixed;
    z-index: 1;
    display: grid;
    width: 184px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border-default);
    border-radius: 10px;
    background: var(--bg-card);
    box-shadow: 0 18px 46px -24px rgba(15, 23, 42, 0.72);
}

.account-action-layer {
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: none;
}

.account-action-dismiss {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
    pointer-events: auto;
}

.account-action-popover {
    pointer-events: auto;
}

.account-action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.account-action-item:hover,
.account-action-item:focus-visible {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    outline: none;
}

.account-action-item--danger {
    margin-top: 4px;
    border-top: 1px solid var(--border-subtle);
    border-radius: 0 0 7px 7px;
    color: var(--accent-danger);
}

.monitor-filter-groups {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
    gap: 7px 12px;
    order: 2;
}

.monitor .quick-filters {
    display: flex;
    flex-wrap: wrap !important;
    min-width: 0;
    width: auto;
    overflow-x: visible !important;
}

.quick-filters--investigate {
    flex: 1 1 520px;
}

.quick-filters--providers {
    flex: 0 1 auto;
    padding-left: 12px;
    border-left: 1px solid var(--border-subtle);
}

.monitor-controls > .recording-btn,
.monitor-controls > .monitor-search,
.monitor-controls > .monitor-sort,
.monitor-controls > .controls-right {
    order: 1;
}

.monitor-reset-view {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
}

.monitor .logs-table th.col-time,
.monitor .logs-table td.col-time {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--bg-card) !important;
}

.monitor .logs-table th.col-status,
.monitor .logs-table td.col-status {
    position: sticky;
    left: 86px;
    z-index: 3;
    background: var(--bg-card) !important;
    box-shadow: 10px 0 18px -18px rgba(15, 23, 42, 0.82);
}

.monitor .logs-table th.col-time,
.monitor .logs-table th.col-status {
    z-index: 5;
    background: var(--bg-tertiary) !important;
}

@media (max-width: 720px) {
    .traffic-pulse__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .control-panel__header--linked {
        align-items: stretch;
        flex-direction: column;
    }

    .monitor-controls > .recording-btn {
        order: 1;
    }

    .monitor-controls > .monitor-search {
        order: 2;
    }

    .monitor-filter-groups {
        order: 3;
    }

    .monitor-controls > .monitor-sort,
    .monitor-controls > .controls-right {
        order: 4;
    }

    .monitor .token-value {
        overflow: visible;
        font-size: 15px;
        line-height: 1.15;
        text-overflow: clip;
        white-space: normal;
    }

    .quick-filters--investigate {
        flex-basis: 100%;
        width: 100%;
    }

    .quick-filters--providers {
        flex-basis: 100%;
        width: 100%;
        padding-top: 7px;
        padding-left: 0;
        border-top: 1px solid var(--border-subtle);
        border-left: 0;
    }

    .account-primary-action {
        min-width: 68px;
    }

    .account-card .quota-cell .quota-header {
        gap: 4px;
    }

    .account-card .quota-cell .quota-label {
        font-size: 10px;
    }
}

/* ========================================================================== */
/* UX closure: trustworthy actions, keyboard access, and contained layouts.   */
/* ========================================================================== */

.app-container,
.main-content,
.page,
.config-card,
.settings-section,
.accounts-table-container,
.logs-table-container,
.proxy-pool-table-card,
.client-access-card {
    min-width: 0;
}

.page {
    width: 100%;
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 2000;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--accent-primary);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 120ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent-primary) !important;
    outline-offset: 2px !important;
}

button:disabled,
.btn:disabled {
    cursor: not-allowed !important;
    opacity: 0.52;
}

.sidebar-sign-out {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sidebar-sign-out:hover {
    color: var(--accent-danger);
}

.not-found-page {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 70vh;
    gap: 12px;
    padding: 32px;
    text-align: center;
}

.not-found-page h1 {
    font-size: clamp(28px, 5vw, 44px);
}

.not-found-page p:not(.eyebrow) {
    max-width: 480px;
    color: var(--text-secondary);
}

.global-data-alert {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 12px 32px 0;
    padding: 10px 12px;
    border: 1px solid rgba(225, 29, 72, 0.34);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-danger-muted) 88%, var(--bg-card));
    color: var(--text-primary);
    box-shadow: var(--shadow-card);
}

.proxy-status-error,
.monitor-data-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Settings: only real browser capabilities are shown; save follows dirty state. */
.page:has(.settings-section) .page-header .btn--primary {
    position: static !important;
    inset: auto !important;
    box-shadow: 0 14px 28px -20px rgba(79, 70, 229, 0.82) !important;
}

.settings-header {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: -12px -12px 20px;
    padding: 12px;
    border-bottom: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.page-subtitle {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 13px;
}

.settings-secret-field,
.login-key-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: min(100%, 520px);
}

.settings-secret-field input,
.login-key-field input {
    min-width: 0;
    width: 100%;
}

.proxy-secret-textarea:not(.is-revealed) {
    -webkit-text-security: disc;
}

.proxy-pool-input:not(.is-revealed) {
    -webkit-text-security: disc;
}

.config-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.login-key-field {
    width: 100%;
}

.login-key-reveal {
    min-width: 62px;
    padding: 0 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.setting-row input[type="number"],
.setting-row select {
    min-height: 38px;
}

/* Collapsible configuration cards are buttons, not click-only divs. */
.config-heading,
.collapsible-heading {
    margin: 0 !important;
    font: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.config-header-button,
.collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 14px 18px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 16px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.config-header-button:hover,
.collapsible-header:hover {
    background: var(--bg-hover);
}

.collapsible-card {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
}

.collapsible-content {
    border-top: 1px solid var(--border-subtle);
}

.expand-icon {
    display: inline-flex;
    color: var(--text-tertiary);
    transition: transform 160ms ease;
}

.expand-icon.expanded {
    transform: rotate(180deg);
}

.mapping-test-result {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding: 14px;
    border-radius: 10px;
    background: var(--bg-secondary);
}

.mapping-test-result .result-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.mapping-test-result .label {
    color: var(--text-tertiary);
}

.mapping-test-result .code {
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-weight: 700;
}

.vrf-panel__url-ready {
    flex: 1;
    color: var(--text-secondary);
    font-weight: 650;
}

.empty-state--error {
    color: var(--accent-danger);
}

/* Tables stay inside the content area; intentional horizontal movement is clear. */
.accounts-table-container,
.logs-table-scroll,
.proxy-pool-table-scroll,
.client-access-key-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.log-row[tabindex="0"]:focus-visible td {
    background: var(--accent-muted) !important;
}

.accounts-table {
    min-width: 1080px !important;
}

.accounts-table .col-email {
    width: 190px !important;
    min-width: 190px !important;
}

.accounts-table .col-model-quota {
    width: 300px !important;
    min-width: 300px !important;
}

.accounts-table .col-proxy {
    width: 135px !important;
    min-width: 135px !important;
}

.accounts-table .col-actions {
    width: 150px !important;
    min-width: 150px !important;
}

.logs-table-scroll,
.proxy-pool-table-scroll,
.client-access-key-table-scroll {
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.proxy-country-badge {
    display: inline-flex;
    margin-left: 8px;
    padding: 2px 6px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Secret-safe proxy controls. */
.api-key-row {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) repeat(4, auto) !important;
    gap: 8px !important;
}

.api-key-row .api-key-input {
    min-width: 0;
    width: 100%;
}

.quick-start-secret-note {
    margin: 10px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.client-access-created-key {
    min-width: 0;
    width: 100%;
    font-family: var(--font-mono);
}

/* Mobile overflow navigation. */
.mobile-nav-item[type="button"] {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.mobile-more-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: flex-end;
}

.mobile-more-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(2, 6, 23, 0.68);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.mobile-more-sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: min(72vh, 520px);
    overflow-y: auto;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--border-default);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: var(--bg-card);
    box-shadow: 0 -24px 60px rgba(2, 6, 23, 0.42);
    margin: 0 !important;
}

.mobile-more-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.mobile-more-header h2 {
    font-size: 18px;
}

.mobile-more-close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 20px;
}

.mobile-more-links {
    display: grid;
    gap: 8px;
}

.mobile-more-links a,
.mobile-more-sign-out {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font: inherit;
    font-weight: 650;
    text-decoration: none;
}

.mobile-more-sign-out {
    margin-top: 14px;
    color: var(--accent-danger);
    cursor: pointer;
}

@media (max-width: 768px) {
    .main-content {
        width: 100% !important;
        padding: 0 !important;
    }

    .global-data-alert {
        align-items: stretch;
        flex-direction: column;
        margin: 10px 16px 0;
    }

    .page {
        max-width: none;
        padding: 16px !important;
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .mobile-nav {
        height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 4px 6px env(safe-area-inset-bottom, 0px) !important;
        border-top-color: var(--border-color) !important;
        background: var(--surface-glass) !important;
    }

    .mobile-nav-item {
        min-width: 0;
        margin: 2px !important;
        padding: 6px 2px !important;
        border-radius: 10px;
        color: var(--text-tertiary) !important;
    }

    .mobile-nav-item.active {
        background: var(--accent-muted) !important;
        color: var(--accent-primary) !important;
    }

    .mobile-nav-label {
        max-width: 100%;
        overflow: hidden;
        font-size: 9px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .settings-header {
        top: 0;
        flex-direction: row !important;
        align-items: center !important;
        padding: 10px 16px !important;
    }

    .settings-header h1 {
        font-size: 20px;
    }

    .settings-header .page-subtitle {
        display: none;
    }

    .settings-header .btn {
        flex: 0 0 auto !important;
        min-width: 92px !important;
    }

    .setting-row {
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .setting-row > select,
    .setting-row > input,
    .setting-row > textarea,
    .setting-row > .settings-secret-field {
        width: min(100%, 190px) !important;
    }

    .api-key-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .api-key-row .api-key-input {
        grid-column: 1 / -1;
    }

    .api-key-row button {
        width: 100% !important;
        min-width: 0 !important;
    }

    .mapping-form {
        display: grid;
        grid-template-columns: 1fr !important;
        align-items: stretch;
    }

    .mapping-form .arrow {
        display: none;
    }

    .mapping-form input,
    .mapping-form .btn {
        width: 100%;
        min-width: 0;
    }

    .mapping-item {
        align-items: flex-start;
    }

    .mapping-from,
    .mapping-to,
    .mapping-source,
    .mapping-target,
    .route-from,
    .route-to {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Dense, scan-friendly dashboard instead of a multi-screen wall of zeroes. */
    .readiness-header,
    .codex-reserve,
    .capacity-lane,
    .control-panel {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .readiness-header {
        gap: 14px;
    }

    .readiness-header h1 {
        font-size: 30px !important;
    }

    .readiness-header__metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px;
    }

    .readiness-header__metrics a {
        min-width: 0;
        padding: 9px 7px;
    }

    .readiness-header__metrics strong {
        font-size: 20px;
    }

    .readiness-header__metrics span {
        display: block;
        font-size: 9px;
        line-height: 1.25;
    }

    .codex-reserve__headline h2 {
        font-size: 24px;
    }

    .codex-reserve__bottleneck strong,
    .codex-reserve__window strong {
        font-size: 24px;
    }

    .codex-reserve__windows {
        grid-template-columns: 1fr;
    }

    .capacity-lanes,
    .control-room__grid {
        gap: 10px;
    }

    .capacity-lane__number {
        margin: 10px 0;
        font-size: 24px !important;
    }

    .capacity-lane__meta {
        gap: 5px;
    }

    /* Proxy inventory becomes cards rather than an unreadable squeezed table. */
    .proxy-pool-table,
    .proxy-pool-table tbody,
    .proxy-pool-table tr,
    .proxy-pool-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .proxy-pool-table {
        min-width: 0 !important;
    }

    .proxy-pool-table thead {
        display: none;
    }

    .proxy-pool-table tbody {
        display: grid !important;
        gap: 12px;
        padding: 12px;
    }

    .proxy-pool-table tr {
        overflow: hidden !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px;
        background: var(--bg-card) !important;
    }

    .proxy-pool-table td {
        display: grid !important;
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 10px;
        padding: 9px 12px !important;
        border-bottom: 1px solid var(--border-subtle) !important;
        white-space: normal !important;
        text-align: left !important;
    }

    .proxy-pool-table td:last-child {
        border-bottom: 0 !important;
    }

    .proxy-pool-table td::before {
        color: var(--text-tertiary);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .proxy-pool-table .col-proxy::before { content: "Proxy"; }
    .proxy-pool-table .col-assignment::before { content: "Assignment"; }
    .proxy-pool-table .col-updated::before { content: "Updated"; }
    .proxy-pool-table .col-id::before { content: "ID"; }
    .proxy-pool-table .col-actions::before { content: "Actions"; }

    /* Client keys use the same readable card pattern on phones. */
    .client-access-key-table,
    .client-access-key-table tbody,
    .client-access-key-table tr,
    .client-access-key-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .client-access-key-table thead {
        display: none;
    }

    .client-access-key-table tbody {
        display: grid !important;
        gap: 10px;
    }

    .client-access-key-table tr {
        overflow: hidden;
        border: 1px solid var(--border-color);
        border-radius: 10px;
    }

    .client-access-key-table td {
        display: grid !important;
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 8px;
        padding: 8px 10px !important;
        border-bottom: 1px solid var(--border-subtle);
        white-space: normal !important;
        text-align: left !important;
    }

    .client-access-key-table td:nth-child(4) {
        display: grid !important;
    }

    .client-access-key-table td:last-child {
        border-bottom: 0;
    }

    .client-access-key-table td::before {
        color: var(--text-tertiary);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .client-access-key-table td:nth-child(1)::before { content: "Name"; }
    .client-access-key-table td:nth-child(2)::before { content: "Prefix"; }
    .client-access-key-table td:nth-child(3)::before { content: "Status"; }
    .client-access-key-table td:nth-child(4)::before { content: "Last used"; }
    .client-access-key-table td:nth-child(5)::before { content: "Actions"; }

    .monitor .logs-table-scroll {
        margin-inline: -1px;
    }

    .monitor .logs-table th.col-status,
    .monitor .logs-table td.col-status {
        left: 78px;
    }
}

/* Final responsive corrections: one scroll owner, readable cards, stable overlays. */
.global-data-alert {
    position: relative;
    top: auto;
}

.monitor .logs-table-scroll {
    max-height: min(70vh, 760px);
    overflow: auto;
}

.account-action-layer {
    z-index: 1300;
}

@media (max-width: 768px) {
    .accounts-table,
    .monitor .logs-table,
    .config-table {
        display: table !important;
        width: max-content !important;
        overflow: visible !important;
    }

    .monitor .logs-table-scroll {
        max-height: calc(100vh - 190px);
    }

    .account-action-popover {
        max-height: calc(100vh - 96px);
    }

    .modal-overlay {
        align-items: center;
        justify-content: center;
        padding: 16px;
    }

    .modal-overlay > .modal:not(.log-detail-modal) {
        width: min(100%, 420px) !important;
        height: auto !important;
        max-width: 420px !important;
        max-height: calc(100vh - 32px) !important;
        margin: 0 !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 16px !important;
    }

    .modal-overlay > .modal:not(.log-detail-modal) .modal-body {
        flex: 0 1 auto;
    }

    .proxy-pool-table .col-proxy,
    .proxy-pool-table .col-assignment,
    .proxy-pool-table .col-updated,
    .proxy-pool-table .col-id,
    .proxy-pool-table .col-actions {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .client-access-key-table td:nth-child(1),
    .client-access-key-table td:nth-child(2),
    .client-access-key-table td:nth-child(3),
    .client-access-key-table td:nth-child(4),
    .client-access-key-table td:nth-child(5) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

@media (max-width: 480px) {
    .setting-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .setting-info {
        width: 100%;
        min-width: 0;
    }

    .setting-row > select,
    .setting-row > input,
    .setting-row > textarea,
    .setting-row > .settings-secret-field {
        width: 100% !important;
        max-width: none !important;
    }
}

@media (max-width: 380px) {
    .mobile-nav-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: hidden;
        clip: auto;
        font-size: 8px;
        line-height: 1;
    }

    .mobile-nav-icon svg {
        width: 19px;
        height: 19px;
    }
}

/* ========================================================================== */
/* Visual closure: compact control surfaces, larger scan targets, true light. */
/* ========================================================================== */

.accounts {
    max-width: 1520px;
    padding: 24px 28px 48px;
}

.accounts .accounts-header {
    gap: 18px;
    margin-bottom: 16px;
}

.accounts-header .header-left {
    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
    min-width: 0;
    column-gap: 10px;
}

.accounts-header h1 {
    color: var(--text-primary);
    font-size: 30px;
    font-weight: 720;
    letter-spacing: -0.035em;
    line-height: 1;
}

.accounts-header .subtitle {
    margin: 0 0 2px;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 550;
    line-height: 1.2;
}

.accounts .accounts-overview {
    grid-column: 1 / -1;
    gap: 5px;
    margin-top: 9px;
}

.accounts .accounts-overview__item {
    min-height: 30px;
    padding: 5px 10px;
    border-color: var(--border-subtle);
    background: color-mix(in srgb, var(--bg-card) 88%, var(--accent-muted));
    color: var(--text-secondary);
    font-size: 12.5px;
    box-shadow: 0 1px 1px color-mix(in srgb, var(--text-primary) 5%, transparent);
}

.accounts .accounts-overview__item b {
    font-size: 14px;
    font-weight: 720;
}

.accounts .header-actions {
    gap: 8px;
}

.accounts .header-actions .btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: 13.5px;
}

.accounts .toolbar {
    display: grid;
    grid-template-columns: minmax(270px, 1fr) auto auto auto auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-card) 92%, var(--bg-primary));
    box-shadow: var(--shadow-card);
}

.accounts .toolbar .search-box {
    width: 100%;
    min-width: 0;
}

.accounts .toolbar .search-box input,
.accounts .sort-select select,
.accounts .tier-select select,
.accounts .visibility-toggle {
    min-height: 40px;
    border-radius: 9px;
    font-size: 13.5px;
}

.accounts .sort-select,
.accounts .tier-select {
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
}

.accounts .sort-select select,
.accounts .tier-select select {
    min-width: 156px;
    padding-block: 0;
}

.accounts .tier-select select {
    min-width: 176px;
}

.accounts .visibility-toggle {
    padding: 0 11px;
    font-size: 12.5px;
}

.accounts .view-toggle {
    min-height: 40px;
    padding: 3px !important;
    border-radius: 9px !important;
}

.accounts .view-toggle button {
    min-width: 68px;
    height: 32px;
    padding: 0 10px !important;
    font-size: 12.5px !important;
}

.accounts .filter-tabs {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    gap: 3px;
    padding: 3px !important;
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: 9px;
    scrollbar-width: thin;
}

.accounts .filter-tabs button {
    flex: 1 0 auto;
    min-height: 32px;
    padding: 5px 10px !important;
    border: 1px solid transparent !important;
    border-bottom-width: 1px !important;
    border-radius: 7px;
    font-size: 12.5px;
}

.accounts .filter-tabs button.active {
    border-color: color-mix(in srgb, var(--accent-primary) 28%, transparent) !important;
    background: var(--accent-muted) !important;
    box-shadow: inset 0 1px 0 var(--inset-highlight);
}

.accounts .filter-count {
    padding: 2px 5px;
    font-size: 10.5px;
}

.accounts .toolbar-spacer {
    display: none;
}

.accounts .selection-actions {
    grid-column: 1 / -1;
    justify-self: end;
}

.accounts .accounts-table-container {
    overflow: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-card) !important;
}

.accounts .accounts-table {
    min-width: 1140px !important;
}

.accounts .accounts-table th {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    color: var(--text-tertiary);
    font-size: 11.5px;
    font-weight: 680;
    letter-spacing: 0.055em;
}

.accounts .accounts-table td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    color: var(--text-primary);
    font-size: 13.5px;
    line-height: 1.3;
}

.accounts .accounts-table tbody tr {
    background: var(--bg-card);
}

.accounts .accounts-table tbody tr:hover {
    background: color-mix(in srgb, var(--bg-hover) 72%, var(--bg-card));
}

.accounts .accounts-table .col-email {
    width: 205px !important;
    min-width: 205px !important;
}

.accounts .accounts-table .col-model-quota {
    position: relative;
    width: 320px !important;
    min-width: 320px !important;
    padding-bottom: 13px !important;
}

.accounts .accounts-table .col-proxy {
    width: 145px !important;
    min-width: 145px !important;
}

.accounts .accounts-table .col-actions {
    width: 144px !important;
    min-width: 144px !important;
}

.accounts .accounts-table .email-text {
    color: var(--text-primary);
    font-size: 13.5px;
    font-weight: 560;
}

.accounts .account-imported-at--table,
.accounts .proxy-route {
    font-size: 11.5px;
}

.accounts .provider-badge,
.accounts .tier-badge,
.accounts .proxy-badge {
    font-size: 10px;
}

.accounts .accounts-table .model-quota-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 6px;
}

.accounts .quota-cell,
.accounts .accounts-table .quota-cell {
    min-height: 60px;
    gap: 5px;
    padding: 7px 8px !important;
    border-radius: 8px;
}

.accounts .quota-cell--not-reported,
.accounts .quota-cell--not-used,
.accounts .quota-cell--no-snapshot,
.accounts .accounts-table .quota-cell--not-reported,
.accounts .accounts-table .quota-cell--not-used,
.accounts .accounts-table .quota-cell--no-snapshot {
    min-height: 60px;
}

.accounts .quota-cell .quota-label,
.accounts .accounts-table .quota-cell .quota-label {
    font-size: 11.5px;
}

.accounts .quota-cell .quota-value {
    font-size: 13.5px;
}

.accounts .quota-cell .quota-bar,
.accounts .accounts-table .quota-cell .quota-bar {
    height: 5px;
}

.accounts .quota-cell .quota-reset-label,
.accounts .quota-cell .quota-reset,
.accounts .accounts-table .quota-cell .quota-reset {
    font-size: 9.5px;
}

.accounts .accounts-table .quota-age-label {
    position: absolute;
    right: 12px;
    bottom: 2px;
    margin: 0;
    font-size: 9px;
    line-height: 1;
}

.accounts .account-primary-action,
.accounts .account-more-action {
    height: 32px;
}

.accounts .account-primary-action {
    min-width: 72px;
    font-size: 12px !important;
}

.accounts .account-more-action {
    width: 34px;
    min-width: 34px;
}

.ops-dashboard {
    gap: 14px;
    padding: 24px 28px 56px;
}

.ops-hero {
    gap: 18px 22px;
    padding: 24px;
}

.ops-hero__copy > p {
    max-width: 740px;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.45;
}

.ops-hero__freshness {
    margin-top: 14px;
    font-size: 11.5px;
}

.ops-action,
.ops-link,
.ops-segment {
    min-height: 38px;
    font-size: 13px;
}

.ops-hero-metric {
    padding: 13px 16px;
}

.ops-hero-metric strong {
    margin: 6px 0 3px;
    font-size: 27px;
}

.ops-hero-metric small {
    font-size: 12px;
}

.ops-dashboard__primary,
.ops-dashboard__secondary {
    gap: 14px;
}

.ops-panel {
    padding: 18px;
}

.ops-panel__header {
    gap: 14px;
    margin-bottom: 14px;
}

.ops-panel__header h2 {
    font-size: 20px;
}

.ops-panel__header p:not(.ops-kicker) {
    font-size: 13px;
}

@media (max-width: 1280px) {
    .accounts .toolbar {
        grid-template-columns: minmax(240px, 1fr) auto auto auto;
    }

    .accounts .visibility-toggle {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 1180px) {
    .accounts .toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .accounts .toolbar .search-box,
    .accounts .filter-tabs,
    .accounts .selection-actions {
        grid-column: 1 / -1;
    }

    .accounts .view-toggle,
    .accounts .sort-select,
    .accounts .tier-select,
    .accounts .visibility-toggle {
        width: 100%;
    }

    .accounts .visibility-toggle {
        grid-column: auto;
        justify-self: stretch;
    }

    .accounts .view-toggle button {
        flex: 1 1 0;
    }

    .accounts .sort-select select,
    .accounts .tier-select select {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (max-width: 900px) {
    .accounts {
        padding: 20px 20px 88px;
    }

    .accounts .accounts-header {
        align-items: stretch !important;
        flex-direction: column;
    }

    .accounts .header-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .accounts .header-actions .btn {
        width: 100%;
    }

    .accounts .toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .accounts .toolbar .search-box,
    .accounts .filter-tabs,
    .accounts .selection-actions {
        grid-column: 1 / -1;
    }

    .accounts .view-toggle,
    .accounts .sort-select,
    .accounts .tier-select,
    .accounts .visibility-toggle {
        width: 100%;
    }

    .accounts .sort-select select,
    .accounts .tier-select select {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .accounts-header .header-left {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .accounts-header .subtitle {
        margin-top: 5px;
    }

    .accounts .accounts-overview {
        grid-column: 1;
    }

    .accounts .toolbar,
    .accounts .header-actions {
        grid-template-columns: 1fr;
    }

    .accounts .toolbar > *,
    .accounts .header-actions > * {
        grid-column: 1;
    }

    .ops-dashboard {
        padding: 14px 12px 88px;
    }

    .ops-hero,
    .ops-panel {
        padding: 16px;
    }
}