* { box-sizing: border-box; }
:root {
    --navbar-h: 56px;
    color-scheme: light;
    --bg-page: #f7f7f7;
    --text: #333;
    --text-muted: #999;
    --text-muted-2: #666;
    --text-soft: #555;
    --navbar-bg: #ffffff;
    --navbar-border: #dddddd;
    --navbar-shadow: 0 1px 3px rgba(0,0,0,0.06);
    --nav-toggle-color: #333;
    --nav-toggle-hover: #f0f0f0;
    --sidebar-bg: #f0f1f4;
    --sidebar-border: #e2e4e9;
    --sidebar-label: #575c66;
    --sidebar-link: #374151;
    --sidebar-link-hover-bg: rgba(255,255,255,0.7);
    --sidebar-link-hover-text: #111827;
    --sidebar-active: #1d4ed8;
    --sidebar-active-bg: rgba(219,234,254,0.95);
    --sidebar-active-ring: rgba(147,197,253,0.5);
    --status-up: #28a745;
    --status-down: #dc3545;
    --usage-badge-bg: #f0f0f0;
    --usage-badge-text: #555;
    --backdrop: rgba(0,0,0,0.4);
    --modal-bg: #ffffff;
    --modal-shadow: 0 4px 12px rgba(0,0,0,0.1);
    --modal-title: #333;
    --modal-body: #555;
    --modal-close: #cccccc;
    --modal-close-hover: #999;
    --status-running-bg: #d4edda;
    --status-running-text: #155724;
    --status-stopped-bg: #f8d7da;
    --status-stopped-text: #721c24;
    --status-warn-bg: #fff3cd;
    --status-warn-text: #856404;
    --status-warn-border: #ffeeba;
    --pre-bg: #f7f7f7;
    --pre-border: #dddddd;
    --pre-text: inherit;
    --form-card-bg: #ffffff;
    --form-card-shadow: 0 4px 12px rgba(0,0,0,0.08);
    --form-card-title: #333;
    --form-section-bg: #f7f7f7;
    --form-border: #eeeeee;
    --label: #333;
    --input-bg: #ffffff;
    --input-border: #dddddd;
    --input-text: #333;
    --placeholder: #aaaaaa;
    --focus-ring: #4a90e2;
    --focus-shadow: rgba(74,144,226,0.2);
    --btn-default-bg: #fff;
    --btn-default-border: #cccccc;
    --btn-default-text: #555;
    --btn-default-hover: #f7f7f7;
    --btn-default-border-hover: #bbbbbb;
    --btn-primary-1: #00A3EC;
    --btn-primary-2: #6988FF;
    --btn-primary-glow: rgba(0, 163, 236, 0.4);
    --btn-danger: #dc3545;
    --btn-danger-hover: #c82333;
    --error-text: #dc3545;
    --error-bg: #fff5f5;
    --error-border: #f8d7da;
    --success-text: #155724;
    --success-bg: #d4edda;
    --success-border: #c3e6cb;
    --agents-list-bg: #f7f7f7;
    --agents-list-border: #eeeeee;
    --agents-list-hover: #f0f0f0;
    --agents-card-bg: #ffffff;
    --agents-card-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
    --agents-card-title: #111827;
    --agents-card-muted: #6b7280;
    --agent-card-loc-icon: #00A3EC;
    --agent-card-cat-pill-bg: #e8eaef;
    --agent-card-cat-pill-text: #4b5563;
    --agent-card-cat-pill-border: #d1d5db;
    --badge-bg: #e9ecef;
    --badge-text: #555;
    --page-title: #333;
    --page-subtitle: #999;
    --spinner-muted: rgba(0,0,0,0.15);
    --spinner-muted-top: #555;
    --logo-1: #00A3EC;
    --logo-2: #6988FF;
    --mobile-nav-border: #e8e8e8;
    --sidebar-mobile-shadow: 4px 0 20px rgba(0, 0, 0, 0.12);
    --card-elevated: #f7f7f7;
    --card-border: #eeeeee;
    --link-blue: #4a90e2;
    --theme-toggle-bg: #fff;
    --theme-toggle-border: #dddddd;
    --theme-toggle-active-fg: #fff;
}
/* Dark theme aligned with Nunpa / OpenIBL reference (mikel.ibl.one) */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg-page: #060914;
    --text: #f2f4fb;
    --text-muted: #8c92a8;
    --text-muted-2: #8c92a8;
    --text-soft: #cfd5e8;
    --navbar-bg: #0b1020;
    --navbar-border: rgba(255, 255, 255, 0.08);
    --navbar-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
    --nav-toggle-color: #f2f4fb;
    --nav-toggle-hover: rgba(255, 255, 255, 0.06);
    --sidebar-bg: linear-gradient(180deg, rgba(5, 8, 17, 0.96), rgba(5, 8, 17, 0.92));
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-label: #8c92a8;
    --sidebar-link: #cfd5e8;
    --sidebar-link-hover-bg: rgba(255, 255, 255, 0.05);
    --sidebar-link-hover-text: #ffffff;
    --sidebar-active: #ffffff;
    --sidebar-active-bg: linear-gradient(180deg, rgba(216, 93, 103, 0.16), rgba(216, 93, 103, 0.10));
    --sidebar-active-ring: rgba(216, 93, 103, 0.28);
    --status-up: #39c27d;
    --status-down: #e85d6a;
    --usage-badge-bg: rgba(255, 255, 255, 0.03);
    --usage-badge-text: #dbe1f1;
    --backdrop: rgba(0, 0, 0, 0.65);
    --modal-bg: #0b1020;
    --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    --modal-title: #f2f4fb;
    --modal-body: #cfd5e8;
    --modal-close: #8c92a8;
    --modal-close-hover: #dbe1f1;
    --status-running-bg: rgba(57, 194, 125, 0.14);
    --status-running-text: #5ee9a8;
    --status-stopped-bg: rgba(216, 93, 103, 0.14);
    --status-stopped-text: #ff9aa2;
    --status-warn-bg: rgba(216, 93, 103, 0.12);
    --status-warn-text: #ff9aa2;
    --status-warn-border: rgba(216, 93, 103, 0.28);
    --pre-bg: #0f1529;
    --pre-border: rgba(255, 255, 255, 0.08);
    --pre-text: #d7dced;
    --form-card-bg: radial-gradient(circle at top left, rgba(19, 31, 63, 0.35), rgba(11, 16, 32, 0.96));
    --form-card-shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
    --form-card-title: #f2f4fb;
    --form-section-bg: rgba(255, 255, 255, 0.02);
    --form-border: rgba(255, 255, 255, 0.08);
    --label: #d7dced;
    --input-bg: rgba(255, 255, 255, 0.02);
    --input-border: rgba(255, 255, 255, 0.08);
    --input-text: #edf1fb;
    --placeholder: #6f7894;
    --focus-ring: #d85d67;
    --focus-shadow: rgba(216, 93, 103, 0.25);
    --btn-default-bg: #161d34;
    --btn-default-border: rgba(255, 255, 255, 0.08);
    --btn-default-text: #edf1fb;
    --btn-default-hover: #1a223b;
    --btn-default-border-hover: rgba(255, 255, 255, 0.12);
    --btn-primary-1: #d96d77;
    --btn-primary-2: #b84755;
    --btn-primary-glow: rgba(216, 93, 103, 0.38);
    --btn-danger: #c94a56;
    --btn-danger-hover: #b83d49;
    --error-text: #ff9aa2;
    --error-bg: rgba(216, 93, 103, 0.12);
    --error-border: rgba(216, 93, 103, 0.28);
    --success-text: #5ee9a8;
    --success-bg: rgba(57, 194, 125, 0.12);
    --success-border: rgba(57, 194, 125, 0.28);
    --agents-list-bg: rgba(11, 16, 32, 0.85);
    --agents-list-border: rgba(255, 255, 255, 0.08);
    --agents-list-hover: rgba(255, 255, 255, 0.04);
    --agents-card-bg: rgba(15, 22, 42, 0.92);
    --agents-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    --agents-card-title: #f2f4fb;
    --agents-card-muted: #8c92a8;
    --agent-card-loc-icon: #48cae4;
    --agent-card-cat-pill-bg: rgba(255, 255, 255, 0.08);
    --agent-card-cat-pill-text: #aeb5ca;
    --agent-card-cat-pill-border: rgba(255, 255, 255, 0.12);
    --badge-bg: #10172c;
    --badge-text: #aeb5ca;
    --page-title: #f2f4fb;
    --page-subtitle: #8c92a8;
    --spinner-muted: rgba(255, 255, 255, 0.15);
    --spinner-muted-top: #dbe1f1;
    --logo-1: #ff7f88;
    --logo-2: #d85d67;
    --mobile-nav-border: rgba(255, 255, 255, 0.08);
    --sidebar-mobile-shadow: 4px 0 24px rgba(0, 0, 0, 0.55);
    --card-elevated: #0d1326;
    --card-border: rgba(255, 255, 255, 0.08);
    --link-blue: #ff717b;
    --theme-toggle-bg: #10172c;
    --theme-toggle-border: rgba(255, 255, 255, 0.08);
    --theme-toggle-active-fg: #060914;
}

html[data-theme="dark"] body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top left, #0d1630 0%, var(--bg-page) 34%), #050811;
    background-attachment: fixed;
}

html[data-theme="dark"] .main-wrapper {
    background: transparent;
}

html[data-theme="dark"] .sidebar-nav a.active {
    border: 1px solid var(--sidebar-active-ring);
    box-shadow: inset 0 0 0 1px rgba(216, 93, 103, 0.06);
}

html[data-theme="dark"] .btn-primary {
    background: linear-gradient(180deg, var(--btn-primary-1), var(--btn-primary-2));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px var(--btn-primary-glow);
}

html[data-theme="dark"] .btn-primary:hover {
    background: linear-gradient(180deg, var(--btn-primary-1), var(--btn-primary-2));
    box-shadow: 0 2px 14px var(--btn-primary-glow);
}

html[data-theme="dark"] .status-box.running.status-warn {
    background: var(--status-warn-bg);
    color: var(--status-warn-text);
}

html[data-theme="dark"] .mobile-nav-backdrop {
    background: rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .login-box .login-form .btn {
    background: linear-gradient(180deg, var(--btn-primary-1), var(--btn-primary-2));
    box-shadow: 0 2px 8px var(--btn-primary-glow);
}

/* Brand wordmark: solid light text (gradient clip is for light theme only) */
html[data-theme="dark"] .logo-text {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
}