:root {
    color-scheme: dark;
    --bg: #07101d;
    --sidebar: #091321;
    --panel: #0d1928;
    --panel-soft: #101e2f;
    --panel-hover: #132337;
    --border: #1e3045;
    --border-light: #294057;
    --text: #e8eef6;
    --muted: #8293a8;
    --muted-strong: #a6b4c5;
    --accent: #5c8dff;
    --accent-hover: #76a0ff;
    --success: #31c48d;
    --warning: #f5a524;
    --danger: #f05252;
    --cyan: #4fc8df;
    --shadow: 0 12px 35px rgba(0, 0, 0, .18);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(circle at 72% -20%, rgba(50, 91, 160, .12), transparent 36%),
        var(--bg);
    font: 14px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    display: flex;
    width: 240px;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: rgba(9, 19, 33, .98);
}
.brand { display: flex; height: 80px; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--border); }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: linear-gradient(145deg, #608eff, #4165cb); box-shadow: 0 7px 20px rgba(72, 111, 216, .25); }
.brand-mark svg { width: 23px; fill: white; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 15px; letter-spacing: .2px; }
.brand span { margin-top: 1px; color: var(--muted); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; }
.nav-list { display: grid; gap: 4px; padding: 20px 12px; }
.nav-item { position: relative; display: flex; min-height: 42px; align-items: center; gap: 12px; padding: 0 12px; border-radius: 8px; color: var(--muted-strong); text-decoration: none; transition: .15s ease; }
.nav-item:hover { color: var(--text); background: var(--panel-soft); }
.nav-item.active { color: #fff; background: rgba(92, 141, 255, .13); }
.nav-item.active::before { content: ""; position: absolute; left: -12px; width: 3px; height: 24px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav-icon { width: 18px; color: currentColor; text-align: center; }
.nav-icon::before { font-size: 16px; }
.nav-icon[data-icon="dashboard"]::before { content: "◫"; }
.nav-icon[data-icon="nodes"]::before { content: "◇"; }
.nav-icon[data-icon="servers"]::before { content: "▤"; }
.nav-icon[data-icon="provisioning"]::before { content: "↯"; }
.nav-icon[data-icon="routing"]::before { content: "⑂"; }
.nav-icon[data-icon="system"]::before { content: "⚙"; }
.nav-icon[data-icon="settings"]::before { content: "⌘"; }
.nav-icon[data-icon="logs"]::before { content: "≡"; }
.nav-count { margin-left: auto; padding: 1px 7px; border-radius: 10px; background: var(--panel-hover); color: var(--muted); font-size: 11px; }
.sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid var(--border); }
.cluster-state { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: rgba(17, 31, 49, .6); }
.cluster-state strong, .cluster-state span { display: block; }
.cluster-state strong { font-size: 12px; }
.cluster-state span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.sidebar-version { padding: 15px 2px 0; color: #53657a; font-size: 10px; text-align: center; }
.status-dot { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.status-dot.online, .status-dot.running { background: var(--success); box-shadow: 0 0 0 3px rgba(49, 196, 141, .1); }
.status-dot.offline, .status-dot.failed { background: var(--danger); }
.status-dot.warning, .status-dot.provisioning, .status-dot.installing { background: var(--warning); }

.main-content { min-width: 0; flex: 1; margin-left: 240px; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; height: 80px; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--border); background: rgba(7, 16, 29, .9); backdrop-filter: blur(16px); }
.topbar-left, .topbar-actions, .user-menu { display: flex; align-items: center; }
.topbar-left { gap: 12px; }
.topbar h1 { margin: 1px 0 0; font-size: 21px; line-height: 1.2; }
.eyebrow { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.topbar-actions { gap: 10px; }
.master-pill { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 18px; color: var(--muted-strong); font-size: 11px; }
.icon-button { display: inline-grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid var(--border); border-radius: 8px; color: var(--muted-strong); background: var(--panel); cursor: pointer; }
.icon-button:hover { color: var(--text); border-color: var(--border-light); background: var(--panel-hover); }
.notification-button { position: relative; font-size: 18px; }
.notification-dot { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.user-menu { gap: 9px; margin-left: 4px; padding-left: 14px; border-left: 1px solid var(--border); }
.avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; background: #243b5a; color: #bed0e7; font-size: 11px; font-weight: 800; }
.user-details strong, .user-details span { display: block; }
.user-details strong { max-width: 100px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; }
.user-details span { color: var(--muted); font-size: 10px; }
.logout-link { padding: 5px; color: var(--muted); text-decoration: none; }
.mobile-menu { display: none; }
.mobile-menu span { display: block; width: 14px; height: 1px; border-radius: 1px; background: currentColor; }

.content { width: 100%; max-width: 1540px; margin: 0 auto; padding: 30px 34px 50px; }
.page-heading { display: flex; min-height: 54px; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading h2 { margin: 0 0 4px; font-size: 24px; line-height: 1.25; letter-spacing: -.3px; }
.page-heading p, .card-header p, .settings-heading p, .action-card p { margin: 0; color: var(--muted); font-size: 12px; }
.button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; transition: .15s ease; }
.button.primary { color: #fff; background: var(--accent); box-shadow: 0 6px 18px rgba(92, 141, 255, .16); }
.button.primary:hover { background: var(--accent-hover); }
.button.secondary { color: var(--muted-strong); border-color: var(--border-light); background: var(--panel-soft); }
.button.secondary:hover { color: var(--text); background: var(--panel-hover); }
.button.small { min-height: 32px; padding: 0 11px; font-size: 11px; }
.button.wide { width: 100%; min-height: 44px; }
.button:disabled, button:disabled { opacity: .43; cursor: not-allowed; }

.card { border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(145deg, rgba(15, 28, 44, .97), rgba(12, 24, 38, .97)); box-shadow: var(--shadow); }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 19px 20px; border-bottom: 1px solid var(--border); }
.card-header h3, .settings-heading h3 { margin: 0 0 2px; font-size: 14px; }
.text-link { color: #83a7ff; font-size: 11px; font-weight: 700; text-decoration: none; }
.text-link:hover { color: #afc5ff; }
.badge { display: inline-flex; min-height: 21px; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 10px; font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; }
.badge-online, .badge-running, .badge-done { color: #6ce0b2; background: rgba(49, 196, 141, .11); }
.badge-offline, .badge-failed { color: #ff8585; background: rgba(240, 82, 82, .11); }
.badge-provisioning, .badge-installing, .badge-queued { color: #ffc766; background: rgba(245, 165, 36, .12); }
.badge-neutral, .badge-pending { color: #a9b7c7; background: rgba(130, 147, 168, .12); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.metric-card { display: flex; min-height: 110px; align-items: center; gap: 15px; padding: 19px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(145deg, #101d2e, #0c1827); box-shadow: var(--shadow); }
.metric-icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 9px; font-size: 12px; }
.metric-icon.success { color: var(--success); background: rgba(49, 196, 141, .1); }
.metric-icon.danger { color: var(--danger); background: rgba(240, 82, 82, .1); }
.metric-icon.warning { color: var(--warning); background: rgba(245, 165, 36, .1); font-size: 18px; }
.metric-icon.neutral { color: #93a8c0; background: rgba(130, 147, 168, .1); }
.metric-card span, .metric-card strong, .metric-card small { display: block; }
.metric-card span { margin-bottom: 3px; color: var(--muted-strong); font-size: 11px; }
.metric-card strong { font-size: 25px; line-height: 1.1; }
.metric-card small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.metric-grid.compact .metric-card { min-height: 100px; }
.dashboard-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; margin-bottom: 16px; }
.health-list { padding: 3px 20px 0; }
.health-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(30, 48, 69, .7); }
.health-row > div { display: flex; align-items: center; gap: 11px; }
.health-row strong, .health-row small { display: block; }
.health-row strong { font-size: 11px; }
.health-row small { color: var(--muted); font-size: 9px; }
.service-icon { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #28435f; border-radius: 7px; color: #8fb4dc; background: #11243a; font-size: 9px; font-weight: 800; }
.service-icon.large { width: 40px; height: 40px; font-size: 10px; }
.resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 16px 20px 20px; }
.resource-label { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--muted); font-size: 9px; }
.resource-label strong { color: var(--muted-strong); }
.progress { height: 4px; overflow: hidden; border-radius: 4px; background: #1b2b3e; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #587dda, #70a3ff); }
.progress.large { height: 6px; }
.event-list { padding: 4px 20px 9px; }
.event-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; }
.event-row + .event-row { border-top: 1px solid rgba(30, 48, 69, .6); }
.event-marker { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 5px; border-radius: 50%; background: var(--accent); }
.event-marker.success { background: var(--success); }
.event-marker.warning { background: var(--warning); }
.event-row strong, .event-row small { display: block; }
.event-row strong { font-size: 10px; font-weight: 600; }
.event-row small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.map-card { overflow: hidden; }
.infra-map { display: flex; min-height: 215px; align-items: center; justify-content: center; gap: 30px; padding: 25px; background: radial-gradient(circle at center, rgba(55, 88, 139, .08), transparent 55%); }
.map-zone { display: grid; min-width: 205px; gap: 9px; }
.map-label { color: #63768c; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.map-node { display: flex; min-height: 54px; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px; background: rgba(13, 27, 43, .9); }
.map-node.primary-node { border-color: rgba(92, 141, 255, .4); box-shadow: 0 0 24px rgba(61, 101, 191, .09); }
.map-node strong, .map-node small { display: block; }
.map-node strong { font-size: 10px; }
.map-node small { color: var(--muted); font-size: 8px; }
.map-lines { width: 45px; height: 70px; border: solid var(--border-light); border-width: 1px 0 1px 1px; }
.map-lines span { display: none; }
.map-arrow { color: #55708c; font-size: 20px; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.search-field { position: relative; width: min(300px, 100%); }
.search-field span { position: absolute; top: 50%; left: 12px; color: var(--muted); transform: translateY(-50%); }
input, select { min-height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: #0b1725; }
input::placeholder { color: #56697e; }
input:read-only { color: var(--muted-strong); }
.search-field input { width: 100%; padding-left: 35px; }
.toolbar-group { display: flex; gap: 8px; }
.toolbar-group select { min-width: 125px; color: var(--muted-strong); font-size: 11px; }
.table-card { position: relative; box-shadow: none; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
th { height: 42px; padding: 0 13px; border-bottom: 1px solid var(--border); color: #71849a; background: rgba(9, 20, 33, .5); font-size: 8px; letter-spacing: .7px; text-transform: uppercase; }
td { height: 58px; padding: 0 13px; border-bottom: 1px solid rgba(30, 48, 69, .65); color: var(--muted-strong); font-size: 10px; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(24, 42, 64, .35); }
.mono { font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; }
.muted-cell { color: var(--muted); }
.node-name { display: flex; align-items: center; gap: 9px; padding: 0; border: 0; color: var(--text); background: none; cursor: pointer; }
.node-role-icon { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border: 1px solid #29435f; border-radius: 6px; color: #8aa9ca; background: #112339; font-size: 9px; font-weight: 800; }
.node-role-icon.large { width: 42px; height: 42px; font-size: 12px; }
.mini-state { color: var(--muted); font-size: 9px; }
.mini-state.online::before { content: "● "; color: var(--success); }
.mini-state.offline::before { content: "● "; color: var(--danger); }
.mini-state.pending::before { content: "● "; color: var(--warning); }
.boolean-state { display: inline-grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; font-size: 9px; }
.boolean-state.yes { color: var(--success); background: rgba(49, 196, 141, .1); }
.boolean-state.no { color: #687b90; background: rgba(104, 123, 144, .08); }
.load-value { color: var(--text); }
.more-button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; }
.more-button:hover { color: var(--text); background: var(--panel-hover); }
td:last-child, .pool-header { position: relative; }
.action-menu { position: absolute; z-index: 10; top: 43px; right: 10px; display: none; min-width: 145px; padding: 5px; border: 1px solid var(--border-light); border-radius: 8px; background: #101d2d; box-shadow: 0 15px 35px rgba(0, 0, 0, .35); }
.action-menu.open { display: grid; }
.action-menu button { padding: 8px 10px; border: 0; border-radius: 5px; color: var(--muted-strong); background: transparent; font-size: 10px; text-align: left; }
.action-menu button:not(:disabled):hover { color: var(--text); background: var(--panel-hover); }
.action-menu .danger-text { color: #ed7373; }
.table-footer { display: flex; justify-content: space-between; padding: 12px 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 9px; }

.detail-dialog { width: min(620px, calc(100% - 30px)); padding: 0; border: 1px solid var(--border-light); border-radius: 12px; color: var(--text); background: #0c1827; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.detail-dialog::backdrop { background: rgba(2, 7, 14, .75); backdrop-filter: blur(3px); }
.dialog-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 22px; cursor: pointer; }
.dialog-heading { display: flex; align-items: center; gap: 13px; padding: 24px; border-bottom: 1px solid var(--border); }
.dialog-heading h2 { display: inline-block; margin: 2px 9px 0 0; font-size: 18px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 20px 24px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--border); }
.detail-item { padding: 13px; background: #0e1b2b; }
.detail-item span, .detail-item strong { display: block; }
.detail-item span { margin-bottom: 3px; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.detail-item strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
.credential-box { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0 24px 20px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: #0a1522; }
.credential-box strong { font-size: 11px; }
.credential-box p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 17px 24px; border-top: 1px solid var(--border); }

.provisioning-layout { display: grid; grid-template-columns: minmax(390px, .85fr) minmax(450px, 1.15fr); gap: 16px; margin-bottom: 16px; }
.provisioning-side { display: grid; gap: 16px; }
.provision-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field > span, .setting-list label > span { color: var(--muted-strong); font-size: 10px; font-weight: 600; }
.field small { color: var(--muted); font-size: 8px; }
.field input, .field select { width: 100%; }
.toggle-row, .static-toggle { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 15px; }
.toggle-row span strong, .toggle-row span small, .static-toggle span strong, .static-toggle span small { display: block; }
.toggle-row span strong, .static-toggle span strong { font-size: 10px; }
.toggle-row span small, .static-toggle span small { color: var(--muted); font-size: 8px; }
.toggle-row input { display: none; }
.toggle-row i, .static-toggle i { position: relative; width: 32px; height: 18px; flex: 0 0 auto; border-radius: 10px; background: #28394c; }
.toggle-row i::after, .static-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #70849a; }
.toggle-row input:checked + i, .static-toggle i.on { background: var(--accent); }
.toggle-row input:checked + i::after, .static-toggle i.on::after { left: 17px; background: white; }
.form-divider { grid-column: 1 / -1; height: 1px; background: var(--border); }
.form-message { grid-column: 1 / -1; min-height: 18px; font-size: 10px; }
.muted { color: var(--muted); }
.error-text, .job-row-error { color: #ff8b8b; }
.error-block { margin: 14px 20px 0; padding: 10px; border: 1px solid rgba(240,82,82,.3); border-radius: 7px; color: #ff9b9b; background: rgba(240,82,82,.08); font-size: 10px; }
.hidden { display: none !important; }
.timeline { margin: 0; padding: 13px 20px 18px; list-style: none; }
.timeline li { position: relative; display: flex; min-height: 49px; align-items: flex-start; gap: 12px; color: var(--muted); }
.timeline li:not(:last-child)::after { content: ""; position: absolute; top: 27px; left: 13px; width: 1px; height: 22px; background: var(--border-light); }
.timeline li > span { display: grid; z-index: 1; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border-light); border-radius: 50%; background: #0d1b2b; font-size: 8px; }
.timeline li strong, .timeline li small { display: block; }
.timeline li strong { color: var(--muted-strong); font-size: 10px; }
.timeline li small { margin-top: 1px; color: #64778d; font-family: Consolas, monospace; font-size: 8px; }
.timeline li.done > span { color: var(--success); border-color: rgba(49,196,141,.4); background: rgba(49,196,141,.1); }
.timeline li.done > span::before { content: "✓"; }
.timeline li.done > span { font-size: 0; }
.timeline li.active > span { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px rgba(92,141,255,.1); }
.timeline li.failed > span { color: #fff; border-color: var(--danger); background: var(--danger); }
.live-log-card { min-height: 160px; }
.live-indicator { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }
.live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(49,196,141,.1); }
.terminal { min-height: 105px; padding: 15px 20px; color: #9cadbf; background: #08121d; font: 9px/2 "SFMono-Regular", Consolas, monospace; }
.terminal div span { margin-right: 12px; color: #4c6279; }
.jobs-table table { min-width: 650px; }
.jobs-table { overflow-x: auto; }

.notice { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; padding: 13px 15px; border: 1px solid rgba(79, 200, 223, .2); border-radius: 8px; color: #9ab3c7; background: rgba(36, 119, 140, .07); font-size: 10px; }
.notice > span { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--cyan); background: rgba(79,200,223,.1); font-weight: 800; }
.notice p { margin: 2px 0 0; }
.notice strong { color: #b9cedd; }
.routing-board { display: grid; grid-template-columns: minmax(330px, 1fr) 100px minmax(390px, 1.2fr); align-items: start; gap: 0; }
.routing-column { min-height: 330px; }
.count-pill { padding: 2px 8px; border-radius: 10px; color: var(--muted); background: rgba(130,147,168,.1); font-size: 9px; }
.routing-node { display: flex; align-items: center; gap: 10px; margin: 13px 17px; padding: 13px; border: 1px solid var(--border); border-radius: 8px; background: #0b1725; }
.routing-node > div:nth-child(2) { min-width: 0; flex: 1; }
.routing-node strong, .routing-node small { display: block; }
.routing-node strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
.routing-node small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.routing-node small .status-dot { margin-right: 3px; }
.route-tag { padding: 3px 7px; border-radius: 4px; color: #8db0ff; background: rgba(92,141,255,.1); font-size: 8px; }
.route-tag.muted-tag { color: var(--muted); background: rgba(130,147,168,.08); }
.routing-connector { display: grid; align-self: center; place-items: center; color: #577089; font-size: 9px; }
.routing-connector div { margin-top: 7px; font-size: 24px; }
.pool-card { margin: 14px 17px; overflow: visible; border: 1px solid var(--border-light); border-radius: 8px; background: #0b1725; }
.pool-header { display: flex; align-items: center; justify-content: space-between; padding: 13px; border-bottom: 1px solid var(--border); }
.pool-header > div:first-child { display: flex; align-items: center; gap: 10px; }
.pool-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 6px; color: #8baeff; background: rgba(92,141,255,.1); font-size: 10px; font-weight: 800; }
.pool-header strong, .pool-header small { display: block; }
.pool-header strong { font-size: 10px; }
.pool-header small { color: var(--muted); font-size: 8px; }
.pool-node { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.pool-node + .pool-node { border-top: 1px solid var(--border); }
.pool-node > div { flex: 1; }
.pool-node strong, .pool-node small { display: block; font-size: 9px; }
.pool-node small { color: var(--muted); font-size: 8px; }

.system-grid { display: grid; grid-template-columns: 1.35fr .8fr .85fr; gap: 16px; }
.service-heading { display: flex; align-items: center; gap: 11px; }
.system-stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); padding: 20px; }
.system-stat-grid > div { padding: 0 12px; border-right: 1px solid var(--border); }
.system-stat-grid > div:first-child { padding-left: 0; }
.system-stat-grid > div:last-child { border-right: 0; }
.system-stat-grid span, .system-stat-grid strong { display: block; }
.system-stat-grid span { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.system-stat-grid strong { margin-top: 5px; font-size: 10px; }
.timer-card .form-message { margin: 0 20px 12px; }
.button-row { display: flex; gap: 8px; padding: 0 20px 20px; }
.runtime-list { padding: 9px 20px; }
.runtime-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 9px; }
.runtime-list > div:last-child { border-bottom: 0; }
.runtime-list span { color: var(--muted); }
.runtime-list strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.healthy-text { color: var(--success); }
.resource-card { padding-bottom: 8px; }
.resource-block { padding: 17px 20px 5px; }
.resource-block small { display: block; margin-top: 6px; color: var(--muted); font-size: 8px; }
.section-title { margin: 25px 0 12px; font-size: 13px; }
.action-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.action-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; padding: 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); }
.action-card .button { grid-column: 1 / -1; margin-top: 5px; }
.action-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 7px; color: #8badff; background: rgba(92,141,255,.1); }
.action-card strong { font-size: 10px; }
.action-card p { font-size: 8px; }

.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.settings-card { padding-bottom: 18px; }
.settings-heading { display: flex; align-items: center; gap: 11px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.settings-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid #28425e; border-radius: 7px; color: #8fb1d4; background: #11243a; font-size: 9px; font-weight: 800; }
.setting-list { display: grid; gap: 13px; padding: 17px 20px 0; }
.setting-list.two-column { grid-template-columns: 1fr 1fr; }
.setting-list label { display: grid; gap: 6px; }
.setting-list input { width: 100%; min-height: 35px; font-size: 10px; }
.secret-value { display: flex; min-height: 35px; align-items: center; justify-content: space-between; padding-left: 12px; border: 1px solid var(--border); border-radius: 7px; color: var(--muted-strong); background: #0b1725; font-family: Consolas, monospace; font-size: 10px; }
.secret-value button { align-self: stretch; width: 34px; border: 0; border-left: 1px solid var(--border); color: var(--muted); background: transparent; }
.static-toggle { min-height: 38px; }

.log-level { display: inline-flex; min-width: 50px; justify-content: center; padding: 3px 6px; border-radius: 4px; font-size: 8px; font-weight: 800; }
.log-level.info { color: #86aeff; background: rgba(92,141,255,.1); }
.log-level.success { color: #6ce0b2; background: rgba(49,196,141,.1); }
.log-level.warning { color: #ffc766; background: rgba(245,165,36,.1); }

.login-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
.login-shell { width: min(100%, 410px); }
.login-card { padding: 30px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
.login-card h1 { margin: 0 0 5px; }
.login-card .subtitle { margin: 0 0 22px; color: var(--muted); }
.login-form { display: grid; gap: 15px; }
.login-form .button, .login-form button { min-height: 42px; border: 0; border-radius: 7px; color: white; background: var(--accent); font-weight: 700; cursor: pointer; }

@media (max-width: 1180px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .system-grid { grid-template-columns: 1fr 1fr; }
    .timer-card { grid-column: 1 / -1; }
    .action-card-grid { grid-template-columns: repeat(2, 1fr); }
    .infra-map { gap: 15px; }
    .map-lines { width: 25px; }
    .map-zone { min-width: 175px; }
}

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay { position: fixed; inset: 0; z-index: 25; display: none; background: rgba(1,5,11,.65); }
    .sidebar-overlay.open { display: block; }
    .main-content { margin-left: 0; }
    .mobile-menu { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
    .dashboard-grid, .provisioning-layout { grid-template-columns: 1fr; }
    .routing-board { grid-template-columns: 1fr; gap: 12px; }
    .routing-connector { min-height: 50px; }
    .routing-connector div { transform: rotate(90deg); }
    .settings-grid { grid-template-columns: 1fr; }
    .infra-map { overflow-x: auto; justify-content: flex-start; }
}

@media (max-width: 650px) {
    .topbar { height: 68px; padding: 0 16px; }
    .topbar h1 { font-size: 18px; }
    .master-pill, .user-details, .notification-button { display: none; }
    .content { padding: 22px 16px 40px; }
    .page-heading { align-items: stretch; flex-direction: column; }
    .page-heading .button { width: 100%; }
    .metric-grid, .system-grid, .action-card-grid { grid-template-columns: 1fr; }
    .metric-card { min-height: 90px; }
    .toolbar { align-items: stretch; flex-direction: column; }
    .search-field { width: 100%; }
    .toolbar-group { overflow-x: auto; }
    .resource-grid, .provision-form { grid-template-columns: 1fr; }
    .field.full { grid-column: auto; }
    .system-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .system-stat-grid > div { padding: 0; border: 0; }
    .button-row { flex-wrap: wrap; }
    .button-row .button { flex: 1; }
    .detail-grid { grid-template-columns: 1fr 1fr; }
    .credential-box { align-items: stretch; flex-direction: column; }
    .setting-list.two-column { grid-template-columns: 1fr; }
    .infra-map { display: grid; }
    .map-lines { width: 70px; height: 20px; margin-left: 50px; transform: rotate(90deg); }
    .map-arrow { text-align: center; transform: rotate(90deg); }
}