/* ══ Design tokens (complete-UI-redesign foundation) ═════════════
       SEMANTIC tokens define both themes; the LEGACY variable names the
       whole codebase already uses (--bg/--card/--border/--text/…) are
       ALIASES onto the semantic layer, so every existing inline style is
       themed by both palettes with zero component changes. New code should
       prefer the semantic names. Never hardcode colors in components. */
    :root, [data-theme="dark"] {
      /* base */
      --color-bg-app:#050b14; --color-bg-page:#07111f;
      --color-bg-sidebar:#07111f; --color-bg-header:#07111f;
      --color-bg-panel:#0f1b2d; --color-bg-panel-elevated:#111f33;
      --color-bg-input:#081323; --color-bg-inset:#0a1424;
      --color-bg-table-row:#0b1728; --color-bg-table-row-hover:#10213a;
      --color-bg-selected:#132b4f;
      /* borders */
      --color-border-subtle:#17263a; --color-border-default:#20324a;
      --color-border-strong:#2f4a6b; --color-border-selected:#2563eb;
      /* text */
      --color-text-primary:#f8fafc; --color-text-secondary:#cbd5e1;
      --color-text-muted:#94a3b8; --color-text-disabled:#64748b;
      --color-text-inverse:#020617;
      /* accent */
      --color-accent-primary:#2563eb; --color-accent-primary-hover:#3b82f6;
      --color-accent-soft:rgba(37,99,235,0.16); --color-accent-border:rgba(59,130,246,0.45);
      /* status */
      --color-success:#10b981; --color-success-soft:rgba(16,185,129,0.14); --color-success-border:rgba(16,185,129,0.35);
      --color-warning:#f59e0b; --color-warning-soft:rgba(245,158,11,0.14); --color-warning-border:rgba(245,158,11,0.35);
      --color-danger:#ef4444;  --color-danger-soft:rgba(239,68,68,0.14);   --color-danger-border:rgba(239,68,68,0.35);
      --color-info:#3b82f6;    --color-info-soft:rgba(59,130,246,0.14); --color-info-border:rgba(59,130,246,0.35);
      --color-purple-tok:#8b5cf6; --color-purple-soft:rgba(139,92,246,0.14);
      /* gold premium accent (Command theme's signature; defined in every
         theme so gold-tinted chrome degrades gracefully) */
      --color-gold:#c8a95a; --color-gold-soft:rgba(200,169,90,0.14); --color-gold-border:rgba(200,169,90,0.40);
      /* charts */
      --chart-blue:#3b82f6; --chart-green:#10b981; --chart-orange:#f59e0b;
      --chart-red:#ef4444; --chart-purple:#8b5cf6; --chart-cyan:#06b6d4;
      --chart-gold:#c8a95a;
      --chart-grid:rgba(148,163,184,0.12); --chart-axis:#64748b;
      /* shadows */
      --shadow-card:0 10px 28px rgba(0,0,0,0.28);
      --shadow-elevated:0 18px 45px rgba(0,0,0,0.38);
      /* ── legacy aliases (the entire existing UI reads these) ── */
      --bg:var(--color-bg-page); --sidebar:var(--color-bg-sidebar);
      --card:var(--color-bg-panel); --card-inner:var(--color-bg-inset);
      --border:var(--color-border-default); --text:var(--color-text-primary);
      --muted:var(--color-text-muted); --subtle:var(--color-text-disabled);
      --primary:var(--color-accent-primary-hover); --primary-bg:var(--color-accent-soft);
      --success:var(--color-success); --warning:var(--color-warning);
      --danger:var(--color-danger); --purple:var(--color-purple-tok);
      --hover:rgba(59,130,246,0.08); --input-bg:var(--color-bg-input);
    }
    [data-theme="light"] {
      /* base */
      --color-bg-app:#f4f7fb; --color-bg-page:#f8fafc;
      --color-bg-sidebar:#ffffff; --color-bg-header:#ffffff;
      --color-bg-panel:#ffffff; --color-bg-panel-elevated:#ffffff;
      --color-bg-input:#ffffff; --color-bg-inset:#f1f5f9;
      --color-bg-table-row:#ffffff; --color-bg-table-row-hover:#f1f5f9;
      --color-bg-selected:#eaf2ff;
      /* borders */
      --color-border-subtle:#e2e8f0; --color-border-default:#cbd5e1;
      --color-border-strong:#94a3b8; --color-border-selected:#2563eb;
      /* text */
      --color-text-primary:#0f172a; --color-text-secondary:#334155;
      --color-text-muted:#64748b; --color-text-disabled:#94a3b8;
      --color-text-inverse:#ffffff;
      /* accent */
      --color-accent-primary:#2563eb; --color-accent-primary-hover:#1d4ed8;
      --color-accent-soft:rgba(37,99,235,0.10); --color-accent-border:rgba(37,99,235,0.35);
      /* status (slightly darker for light-bg readability) */
      --color-success:#059669; --color-success-soft:rgba(5,150,105,0.10); --color-success-border:rgba(5,150,105,0.28);
      --color-warning:#d97706; --color-warning-soft:rgba(217,119,6,0.10); --color-warning-border:rgba(217,119,6,0.28);
      --color-danger:#dc2626;  --color-danger-soft:rgba(220,38,38,0.10);  --color-danger-border:rgba(220,38,38,0.28);
      --color-info:#2563eb;    --color-info-soft:rgba(37,99,235,0.10); --color-info-border:rgba(37,99,235,0.28);
      --color-purple-tok:#7c3aed; --color-purple-soft:rgba(124,58,237,0.10);
      /* gold (darker for light-bg contrast) */
      --color-gold:#8a6d2b; --color-gold-soft:rgba(138,109,43,0.10); --color-gold-border:rgba(138,109,43,0.30);
      /* charts */
      --chart-blue:#2563eb; --chart-green:#059669; --chart-orange:#d97706;
      --chart-red:#dc2626; --chart-purple:#7c3aed; --chart-cyan:#0891b2;
      --chart-gold:#8a6d2b;
      --chart-grid:rgba(100,116,139,0.16); --chart-axis:#64748b;
      /* shadows */
      --shadow-card:0 10px 24px rgba(15,23,42,0.06);
      --shadow-elevated:0 18px 40px rgba(15,23,42,0.12);
      /* legacy aliases pick these up automatically via the semantic layer;
         only the two raw values need re-declaring per theme: */
      --primary:var(--color-accent-primary);
      --hover:rgba(37,99,235,0.06);
    }
    /* ══ Command theme — regal navy + royal blue with sparing gold accents.
       An elite tactical-console look: deeper navy base than Dark, brighter
       blue highlights, soft blue card glow, gold reserved for identity
       touches (logo, active-nav tick, header rule). Original palette —
       no third-party insignia or marks. ═════════════════════════════════ */
    [data-theme="command"] {
      /* base */
      --color-bg-app:#060d18; --color-bg-page:#0a1422;
      --color-bg-sidebar:#0a1422; --color-bg-header:#0a1422;
      --color-bg-panel:#10203a; --color-bg-panel-elevated:#142744;
      --color-bg-input:#0b1830; --color-bg-inset:#0d1a30;
      --color-bg-table-row:#0e1d35; --color-bg-table-row-hover:#183154;
      --color-bg-selected:#1b3767;
      /* borders */
      --color-border-subtle:#1c3350; --color-border-default:#27456b;
      --color-border-strong:#3a5d8f; --color-border-selected:#3b6fe0;
      /* text */
      --color-text-primary:#f7fbff; --color-text-secondary:#d7e2f0;
      --color-text-muted:#93a8c4; --color-text-disabled:#64789a;
      --color-text-inverse:#060d18;
      /* accent */
      --color-accent-primary:#2f5fbf; --color-accent-primary-hover:#5b8cff;
      --color-accent-soft:rgba(59,111,224,0.18); --color-accent-border:rgba(91,140,255,0.45);
      /* gold premium accent */
      --color-gold:#c8a95a; --color-gold-soft:rgba(200,169,90,0.14); --color-gold-border:rgba(200,169,90,0.40);
      /* status */
      --color-success:#2fbf71; --color-success-soft:rgba(47,191,113,0.14); --color-success-border:rgba(47,191,113,0.35);
      --color-warning:#f0ad35; --color-warning-soft:rgba(240,173,53,0.14); --color-warning-border:rgba(240,173,53,0.35);
      --color-danger:#e45858;  --color-danger-soft:rgba(228,88,88,0.14);   --color-danger-border:rgba(228,88,88,0.35);
      --color-info:#4fb7d8;    --color-info-soft:rgba(79,183,216,0.14); --color-info-border:rgba(79,183,216,0.35);
      --color-purple-tok:#7d6bdb; --color-purple-soft:rgba(125,107,219,0.14);
      /* charts */
      --chart-blue:#5b8cff; --chart-green:#2fbf71; --chart-orange:#f0ad35;
      --chart-red:#e45858; --chart-purple:#7d6bdb; --chart-cyan:#4fb7d8;
      --chart-gold:#c8a95a;
      --chart-grid:rgba(147,168,196,0.12); --chart-axis:#7d94b8;
      /* shadows — soft blue glow on layered panels */
      --shadow-card:0 10px 28px rgba(0,0,0,0.42), 0 0 22px rgba(47,95,191,0.07);
      --shadow-elevated:0 18px 45px rgba(0,0,0,0.52), 0 0 30px rgba(47,95,191,0.10);
      --hover:rgba(91,140,255,0.08);
    }
    /* Command-only chrome: the sparing gold identity touches. */
    [data-theme="command"] .sb-logo-name { color:var(--color-gold); }
    [data-theme="command"] .nav-item.active { box-shadow:inset 2px 0 0 var(--color-gold); }
    [data-theme="command"] .topbar { border-bottom:1px solid var(--color-gold-border); }
    [data-theme="command"] .page-h1 { letter-spacing:-0.3px; }
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); height:100vh; overflow:hidden; }

    /* ── App shell ── */
    .app { display:flex; height:100vh; }
    .sidebar { width:240px; flex-shrink:0; background:var(--sidebar); border-right:1px solid var(--border); display:flex; flex-direction:column; }
    .main { flex:1; display:flex; flex-direction:column; overflow:hidden; }

    /* ── Sidebar ── */
    .sb-logo { padding:18px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-shrink:0; }
    .sb-logo-name { font-size:17px; font-weight:800; color:var(--primary); letter-spacing:-0.4px; }
    .sb-logo-tag  { font-size:9px; color:var(--muted); font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-top:1px; }
    .sb-scroll { flex:1; overflow-y:auto; padding:8px 0; }
    .sb-label { font-size:9px; font-weight:700; color:var(--muted); letter-spacing:1.5px; text-transform:uppercase; padding:10px 16px 4px; }
    .nav-item { width:calc(100% - 16px); margin:1px 8px; display:flex; align-items:center; gap:10px; padding:8px 10px; border:none; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; font-weight:500; transition:all 0.12s; text-align:left; font-family:inherit; }
    .nav-item:hover:not(.disabled) { background:var(--hover); color:var(--text); }
    .nav-item.active { background:var(--primary-bg); color:var(--primary); font-weight:600; }
    .nav-item.disabled { opacity:0.35; cursor:default; pointer-events:none; }
    .nav-icon { font-size:13px; width:17px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .nav-txt { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .lu { display:inline-block; vertical-align:middle; flex-shrink:0; }
    /* Collapsed sidebar (« toggle, persisted): icon-only rail */
    .sidebar { transition:width 0.15s ease; }
    .app.nav-collapsed .sidebar { width:60px; }
    .app.nav-collapsed .sb-logo > div, .app.nav-collapsed .sb-label,
    .app.nav-collapsed .nav-txt, .app.nav-collapsed .nav-badge { display:none; }
    .app.nav-collapsed .nav-item { justify-content:center; padding:9px 0; gap:0; }
    .app.nav-collapsed .sb-logo { justify-content:center; padding:18px 6px; }
    .sb-bottom-row { display:flex; align-items:center; gap:4px; }
    .sb-bottom-row .nav-item { flex:1; min-width:0; }
    .sb-collapse { flex-shrink:0; width:30px; height:30px; margin-right:8px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.12s; }
    .sb-collapse:hover { color:var(--text); background:var(--hover); }
    .app.nav-collapsed .sb-bottom-row { flex-direction:column; }
    .app.nav-collapsed .sb-collapse { margin:4px auto 0; }
    .nav-badge { margin-left:auto; padding:1px 6px; border-radius:8px; font-size:9px; font-weight:700; line-height:14px; min-width:18px; text-align:center; flex-shrink:0; }
    .nav-badge:empty { display:none; }
    .nav-badge-red   { background:rgba(239,68,68,0.2);  color:#EF4444; }
    .nav-badge-amber { background:rgba(245,158,11,0.2); color:#F59E0B; }
    .sb-footer { padding:12px 16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
    .sb-btn { width:100%; padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:12px; font-weight:600; transition:all 0.12s; font-family:inherit; }
    .sb-btn:hover { background:var(--hover); color:var(--text); }
    .sb-btn.primary { background:var(--primary); border-color:var(--primary); color:#fff; }
    .sb-btn.primary:hover { opacity:0.88; }

    /* DB entries in sidebar */
    .db-entry { padding:9px 14px 9px 16px; cursor:pointer; transition:background 0.12s; border-left:2px solid transparent; }
    .db-entry:hover { background:var(--hover); }
    .db-entry.active { background:var(--primary-bg); border-left-color:var(--primary); }
    .db-entry-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; gap:6px; }
    .db-entry-name { font-size:12px; font-weight:600; color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .db-entry-host { font-size:10px; color:var(--muted); }
    .db-entry-actions { display:flex; gap:3px; flex-shrink:0; }
    .db-mini-btn { padding:2px 6px; border:none; border-radius:3px; font-size:9px; font-weight:700; cursor:pointer; color:#fff; }
    .db-status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
    .db-status-dot.healthy { background:#10B981; box-shadow:0 0 4px rgba(16,185,129,0.6); }
    .db-status-dot.warning { background:#F59E0B; box-shadow:0 0 4px rgba(245,158,11,0.6); }
    .db-status-dot.critical { background:#EF4444; box-shadow:0 0 4px rgba(239,68,68,0.6); }
    .db-status-dot.offline  { background:var(--muted); }
    .db-status-dot.unknown  { background:var(--border); }

    /* ── Topbar ── */
    .topbar { background:var(--sidebar); border-bottom:1px solid var(--border); padding:11px 24px; display:flex; align-items:center; gap:14px; flex-shrink:0; }
    .topbar-info { flex:1; min-width:0; }
    .topbar-name { font-size:15px; font-weight:700; color:var(--text); }
    .topbar-meta { font-size:11px; color:var(--muted); margin-top:1px; }
    .topbar-controls { display:flex; align-items:center; gap:8px; flex-shrink:0; }
    .health-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; border:1.5px solid; }
    .health-dot { width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 2s infinite; }
    .ctrl-btn { padding:6px 12px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:12px; font-weight:600; transition:all 0.12s; white-space:nowrap; font-family:inherit; }
    .ctrl-btn:hover { color:var(--text); background:var(--hover); }
    .ctrl-select { padding:5px 8px; border-radius:8px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:12px; cursor:pointer; font-family:inherit; }

    /* ── Page content ── */
    .page-content { flex:1; overflow-y:auto; padding:24px; }

    /* ── Stat cards ── */
    .stat-cards { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px; }
    .stat-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; border-left:3px solid var(--primary); cursor:pointer; transition:box-shadow 0.15s, transform 0.15s; }
    .stat-card:hover { box-shadow:0 4px 16px rgba(59,130,246,0.1); transform:translateY(-1px); }
    .stat-label { font-size:10px; text-transform:uppercase; letter-spacing:0.6px; color:var(--muted); font-weight:600; margin-bottom:8px; }
    .stat-value { font-size:24px; font-weight:800; letter-spacing:-0.5px; }
    .stat-bar { height:3px; background:var(--border); border-radius:2px; margin-top:8px; }
    .stat-bar-fill { height:100%; border-radius:2px; transition:width 0.4s; }

    /* ── Tables ── */
    .table-wrapper { background:var(--card); border:1px solid var(--border); border-radius:12px; margin-bottom:14px; overflow-x:auto; }
    .table-header { padding:12px 16px; background:var(--card-inner); font-weight:700; font-size:11px; color:var(--primary); letter-spacing:0.5px; border-bottom:1px solid var(--border); text-transform:uppercase; }
    table { width:100%; border-collapse:collapse; }
    td { padding:10px 15px; border-bottom:1px solid var(--border); font-size:12px; color:var(--text); }
    tr:last-child td { border-bottom:none; }
    tbody tr:hover td { background:var(--hover); }
    .no-data { padding:40px; text-align:center; color:var(--muted); font-size:12px; }
    .action-btn { padding:4px 10px; border:none; border-radius:5px; cursor:pointer; font-size:10px; font-weight:700; color:#fff; margin-right:4px; transition:opacity 0.12s; }
    .action-btn:hover { opacity:0.82; }
    .action-btn-explain { background:var(--primary); }
    .action-btn-kill { background:var(--danger); }

    /* ── Utility: JS-rendered table cell modifiers ── */
    .tbl-bold    { font-weight:700; }
    .tbl-sm      { font-size:11px; }
    .tbl-muted   { color:var(--muted); }
    .tbl-primary { color:var(--primary); }
    .tbl-danger  { color:var(--danger); }
    .tbl-warning { color:var(--warning); }
    .tbl-purple  { color:var(--purple); }
    .tbl-mono    { font-family:monospace;font-size:10px;color:var(--primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

    /* ── Utility: inline badges ── */
    .badge    { display:inline-flex;align-items:center;padding:2px 9px;border-radius:10px;font-size:9px;font-weight:700;white-space:nowrap;border:1px solid transparent; }
    .badge-sm { display:inline-block;padding:2px 6px;border-radius:3px;font-size:9px;font-weight:700; }
    .badge-danger  { background:rgba(239,68,68,0.1);color:var(--danger);border-color:rgba(239,68,68,0.3); }
    .badge-warning { background:rgba(245,158,11,0.1);color:var(--warning);border-color:rgba(245,158,11,0.3); }
    .badge-success { background:rgba(16,185,129,0.1);color:var(--success);border-color:rgba(16,185,129,0.3); }
    .badge-primary { background:rgba(59,130,246,0.15);color:var(--primary); }
    .badge-purple  { background:rgba(139,92,246,0.15);color:var(--purple); }
    .badge-muted   { background:rgba(100,116,139,0.1);color:var(--muted); }

    /* ── Utility: app-styled tooltip ──
       Elements opt in with data-tip="..." (see utils.js delegation);
       #appTip is a fixed singleton so it never clips inside table scroll
       containers. Same visual language as the chart hover tooltips. */
    #appTip { position:fixed; z-index:9999; display:none; max-width:320px;
              background:var(--card); color:var(--text); border:1px solid var(--border);
              border-left:3px solid var(--primary); border-radius:8px; padding:8px 12px;
              font-size:11px; font-weight:400; line-height:1.55; pointer-events:none;
              box-shadow:0 4px 20px rgba(0,0,0,0.3); white-space:normal; }
    /* Non-interactive text uses the normal arrow cursor, not the text I-beam
       (which reads as "type here"). Interactive elements re-assert their cursor
       below; per-control cursor:pointer (classes + inline) and the [data-tip]
       help cursor all have higher specificity than `*` and still win. */
    * { cursor: default; }
    a, button, select, summary, [onclick] { cursor: pointer; }
    input, textarea { cursor: text; }
    input[type="checkbox"], input[type="radio"] { cursor: pointer; }
    /* Info tooltips (data-tip on non-button text) should read as "hover for
       info", not "type here" — use the help cursor, not the default text
       I-beam. Interactive controls set their own cursor:pointer, so the
       :not(button) scope leaves buttons/actions untouched. */
    [data-tip]:not(button) { cursor: help; }
    /* Truncated query cells are click-to-copy (handler in utils.js). */
    .tbl-mono[data-tip] { cursor: pointer; }

    /* ── Utility: common action/nav buttons ── */
    .btn-export { background:var(--primary-bg);border:1px solid var(--primary);color:var(--primary);padding:3px 10px;border-radius:5px;font-size:10px;font-weight:600;cursor:pointer;font-family:inherit; }
    .btn-page   { padding:5px 12px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit; }
    .btn-page:disabled { color:var(--muted);cursor:default;opacity:0.4; }

    /* ── Overview ── */
    .ov-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
    .ov-section-label { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin:20px 0 10px; display:flex; align-items:center; gap:10px; }
    .ov-section-label::after { content:''; flex:1; height:1px; background:var(--border); }
    .ov-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px; border-top:3px solid transparent; cursor:pointer; transition:transform 0.15s, box-shadow 0.15s; position:relative; overflow:hidden; }
    .ov-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,0.14); }
    .ov-card.critical { border-top-color:var(--danger); }
    .ov-card.warning  { border-top-color:var(--warning); }
    .ov-card.healthy  { border-top-color:var(--success); }
    .ov-card.offline  { border-top-color:var(--muted); }
    .ov-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:12px; font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; border:1px solid; }
    .ov-badge.critical { background:rgba(239,68,68,0.1); color:var(--danger); border-color:rgba(239,68,68,0.3); }
    .ov-badge.warning  { background:rgba(245,158,11,0.1); color:var(--warning); border-color:rgba(245,158,11,0.3); }
    .ov-badge.healthy  { background:rgba(16,185,129,0.1); color:var(--success); border-color:rgba(16,185,129,0.3); }
    .ov-badge.offline  { background:rgba(100,116,139,0.1); color:var(--muted); border-color:rgba(100,116,139,0.3); }
    .ov-name { font-size:15px; font-weight:700; color:var(--text); margin-bottom:2px; }
    .ov-subtitle { font-size:10px; color:var(--muted); margin-bottom:12px; }
    .ov-health-num { font-size:32px; font-weight:800; line-height:1; }
    .ov-health-bar { height:3px; background:var(--border); border-radius:2px; margin:8px 0 12px; overflow:hidden; }
    .ov-health-bar-fill { height:100%; border-radius:2px; }
    .ov-metrics { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px; }
    .ov-metric { background:var(--card-inner); border:1px solid var(--border); border-radius:8px; padding:7px 10px; display:flex; justify-content:space-between; align-items:center; font-size:10px; }
    .ov-metric-label { color:var(--muted); font-weight:500; }
    .ov-view-btn { width:100%; padding:8px; border:1px solid var(--primary); border-radius:8px; background:transparent; color:var(--primary); cursor:pointer; font-size:11px; font-weight:700; transition:all 0.15s; }
    .ov-view-btn:hover { background:var(--primary); color:#fff; }

    /* ── Modals ── */
    .modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:1000; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
    .modal.active { display:flex; }
    .modal-box { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:24px; width:90%; max-width:480px; max-height:85vh; overflow-y:auto; box-shadow:0 24px 60px rgba(0,0,0,0.35); }
    .modal-box.large { max-width:800px; }
    .modal-title { font-size:16px; font-weight:700; margin-bottom:16px; color:var(--text); }
    .field { margin-bottom:12px; }
    .field label { display:block; font-size:10px; color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.8px; font-weight:600; }
    .field input, .field select { width:100%; padding:9px 12px; background:var(--input-bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:12px; font-family:inherit; transition:border-color 0.15s; }
    .field input:focus, .field select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,0.1); }
    .modal-actions { display:flex; gap:8px; margin-top:16px; }
    .btn { flex:1; padding:9px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:12px; font-weight:600; transition:all 0.15s; font-family:inherit; }
    .btn:hover { background:var(--hover); color:var(--text); }
    .btn-primary { background:var(--primary); border-color:var(--primary); color:#fff; }
    .btn-primary:hover { opacity:0.88; }
    .btn-danger { background:var(--danger); border-color:var(--danger); color:#fff; }
    .btn-danger:hover { opacity:0.88; }
    /* "Show technical details" disclosure — styled as a real ghost button so it
       reads as clickable (the bare <summary> looked like inert text). */
    details.perm-tech > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid var(--color-border-default); border-radius:8px; background:var(--color-bg-inset); color:var(--color-text-secondary); font-size:11.5px; font-weight:600; user-select:none; transition:background 0.12s, border-color 0.12s, color 0.12s; }
    details.perm-tech > summary::-webkit-details-marker { display:none; }
    details.perm-tech > summary::marker { content:""; }
    details.perm-tech > summary:hover { background:var(--color-bg-table-row-hover); border-color:var(--color-border-strong); color:var(--color-text-primary); }
    details.perm-tech > summary .perm-chev { display:inline-flex; transition:transform 0.15s; }
    details.perm-tech[open] > summary .perm-chev { transform:rotate(180deg); }
    #explainContent { max-height:50vh; overflow-y:auto; font-size:11px; background:var(--card-inner); padding:12px; border-radius:8px; border:1px solid var(--border); margin-bottom:14px; font-family:monospace; white-space:pre-wrap; word-break:break-word; color:var(--primary); line-height:1.6; }

    /* ── Toast ── */
    #toastContainer { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
    .toast { padding:12px 16px; border-radius:10px; font-size:12px; font-weight:600; display:flex; align-items:flex-start; gap:10px; max-width:320px; pointer-events:auto; box-shadow:0 8px 24px rgba(0,0,0,0.2); animation:toastIn 0.25s ease; border:1px solid; background:var(--card); }
    .toast.error   { border-color:var(--danger);  }
    .toast.warning { border-color:var(--warning); }
    .toast.success { border-color:var(--success); }
    .toast.info    { border-color:var(--primary); }
    .toast-icon { font-size:14px; flex-shrink:0; }
    .toast-body { flex:1; line-height:1.4; color:var(--text); }
    .toast-close { cursor:pointer; opacity:0.5; }
    .toast-close:hover { opacity:1; }
    @keyframes toastIn  { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
    @keyframes toastOut { from{opacity:1} to{opacity:0;transform:translateX(20px)} }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
    #disconnectPopover { position:fixed; bottom:108px; right:0; width:272px; padding:14px 16px; background:var(--card); border:1px solid rgba(239,68,68,0.4); border-right:none; border-radius:12px 0 0 12px; box-shadow:-4px 4px 24px rgba(0,0,0,0.25); z-index:9000; display:none; animation:popoverIn 0.2s ease; }
    #disconnectPopover.visible { display:block; }
    @keyframes popoverIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

    /* ── Misc ── */
    .selector { padding:6px 10px; background:var(--input-bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:12px; cursor:pointer; font-family:inherit; }
    .icon-btn { width:34px; height:34px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; font-size:16px; border-radius:8px; flex-shrink:0; }
    .notif-btn { position:relative; }
    .notif-dot { position:absolute; top:4px; right:4px; width:7px; height:7px; border-radius:50%; background:var(--danger); border:1.5px solid var(--sidebar); }
    ::-webkit-scrollbar { width:5px; height:5px; }
    ::-webkit-scrollbar-track { background:transparent; }
    ::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

    /* ── Right sidebar (Switch Database) ──
       Mock: Documentation/archive/ui-mocks/switchdatabase.png — 3-line cards
       (name / engine·version·hosting / badges), star+status pinned to line 1. */
    .right-sidebar { width:312px; flex-shrink:0; background:var(--sidebar); border-left:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
    .rsb-head { padding:16px 18px 12px; border-bottom:1px solid var(--border); flex-shrink:0; }
    .rsb-title { font-size:16px; font-weight:800; color:var(--text); }
    .rsb-subtitle { font-size:11.5px; color:var(--muted); margin-top:3px; }
    .rsb-search-wrap { padding:10px 12px; border-bottom:1px solid var(--border); flex-shrink:0; position:relative; }
    .rsb-search-ic { position:absolute; left:24px; top:50%; transform:translateY(-50%); display:flex; color:var(--muted); pointer-events:none; }
    .rsb-search { width:100%; padding:8px 10px 8px 30px; background:var(--input-bg); border:1px solid var(--border); border-radius:9px; color:var(--text); font-size:12px; font-family:inherit; transition:border-color 0.15s; }
    .rsb-search:focus { outline:none; border-color:var(--primary); }
    .rsb-list { flex:1; overflow-y:auto; padding:8px 12px 12px; }
    .rsb-footer { padding:12px; border-top:1px solid var(--border); flex-shrink:0; display:flex; flex-direction:column; gap:8px; background:var(--sidebar); }
    /* Card grid: icon | text (min-width:0 → ellipsis works) | actions.
       align-items:start pins star+status to the name line, never centred. */
    /* Actions are absolutely positioned top-right (never a grid column) so
       they can't squeeze the name/badge column — the padding-right reserves
       their footprint: star + status pill + the ⋯ menu. */
    .rsb-db-entry { display:grid; grid-template-columns:38px minmax(0,1fr); gap:10px; align-items:start; position:relative; padding:11px 10px; padding-right:104px; cursor:pointer; transition:background 0.15s,border-color 0.15s,box-shadow 0.15s; border-radius:12px; margin-bottom:8px; border:1px solid var(--border); background:var(--card); }
    .rsb-db-entry:hover { background:var(--hover); border-color:rgba(59,130,246,0.35); }
    .rsb-db-entry.active { background:var(--primary-bg); border-color:var(--primary); box-shadow:0 0 0 1px rgba(59,130,246,0.22), 0 0 20px rgba(59,130,246,0.10); }
    .rsb-db-icon { width:38px; height:38px; border-radius:10px; background:var(--card-inner); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
    .rsb-db-info { min-width:0; }
    .rsb-db-name { font-size:13px; font-weight:700; line-height:17px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .rsb-db-meta { font-size:11px; line-height:15px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .rsb-add-btn { width:100%; padding:9px; border-radius:9px; border:1px dashed rgba(59,130,246,0.5); background:transparent; color:var(--primary); cursor:pointer; font-size:12px; font-weight:700; transition:all 0.15s; font-family:inherit; }
    .rsb-add-btn:hover { border-color:var(--primary); background:var(--primary-bg); }
    .rsb-disconnect-btn { width:100%; padding:9px; border-radius:9px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:12px; font-weight:600; transition:all 0.15s; font-family:inherit; }
    .rsb-disconnect-btn:hover { border-color:#ef4444; color:#ef4444; background:rgba(239,68,68,0.06); }
    .rsb-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px 12px 8px; border-bottom:1px solid var(--border); flex-shrink:0; }
    .rsb-tab-btn { height:30px; display:flex; align-items:center; justify-content:center; gap:5px; border-radius:8px; font-size:11.5px; font-weight:700; cursor:pointer; font-family:inherit; transition:all 0.15s; border:1px solid var(--border); background:transparent; color:var(--muted); }
    .rsb-tab-btn.active { border-color:var(--primary); background:var(--primary-bg); color:var(--primary); }
    .rsb-empty { padding:16px; font-size:11px; color:var(--muted); text-align:center; }
    .rsb-empty--bm { padding:28px 16px; }
    .rsb-empty-icon { font-size:24px; margin-bottom:8px; }
    .rsb-db-actions { position:absolute; top:12px; right:10px; display:flex; align-items:center; gap:6px; }
    .rsb-action-btn { background:none; border:none; cursor:pointer; padding:2px 4px; opacity:0.35; flex-shrink:0; line-height:1; color:var(--text); }
    .rsb-action-btn:hover { opacity:1; }
    .rsb-action-btn--star { font-size:14px; padding:2px 3px; }
    .rsb-action-btn--star.starred { opacity:1; }
    .rsb-action-btn--menu { display:inline-flex; align-items:center; }
    .rsb-action-btn--menu .lu { display:block; }
    /* The ⋯ dropdown: edit / remove for one card (built by _rsbMenu) */
    #rsbCardMenu { position:fixed; z-index:10001; min-width:176px; padding:4px; background:var(--card); border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,0.35); }
    #rsbCardMenu button { display:flex; align-items:center; gap:9px; width:100%; padding:8px 11px; background:none; border:none; border-radius:7px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; color:var(--text); text-align:left; }
    #rsbCardMenu button:hover { background:var(--hover); }
    #rsbCardMenu button.danger { color:var(--danger); }
    #rsbCardMenu button .lu { display:block; flex-shrink:0; }
    /* ── Overview warning banner ── */
    .ovb-healthy { display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:10px; background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.25); margin-bottom:16px; }
    .ovb-healthy-icon { font-size:16px; }
    .ovb-healthy-text { font-size:13px; font-weight:600; color:var(--success); }
    .ovb { border-radius:10px; margin-bottom:16px; overflow:hidden; border:1px solid; }
    .ovb--critical { background:rgba(239,68,68,0.06); border-color:rgba(239,68,68,0.35); }
    .ovb--warning { background:rgba(245,158,11,0.05); border-color:rgba(245,158,11,0.35); }
    .ovb-header { display:flex; align-items:center; justify-content:space-between; padding:11px 16px; gap:12px; }
    .ovb-summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .ovb-sum-crit { color:var(--danger); font-weight:700; }
    .ovb-sum-warn { color:var(--warning); font-weight:700; }
    .ovb-sum-sep { color:var(--muted); margin:0 4px; }
    .ovb-sum-count { font-size:12px; color:var(--muted); }
    .ovb-toggle { flex-shrink:0; background:none; border:1px solid var(--border); border-radius:6px; color:var(--muted); font-size:11px; font-weight:600; padding:3px 10px; cursor:pointer; font-family:inherit; }
    .ovb-row { display:flex; align-items:center; gap:12px; padding:9px 16px; border-top:1px solid rgba(255,255,255,0.06); }
    .ovb-row-icon { font-size:13px; flex-shrink:0; }
    .ovb-row-info { flex:1; min-width:0; }
    .ovb-row-name { font-size:12px; font-weight:700; color:var(--text); }
    .ovb-row-snips { font-size:11px; color:var(--muted); margin-left:10px; }
    .ovb-go { flex-shrink:0; padding:4px 12px; border-radius:6px; border:1px solid; background:transparent; font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
    .ovb-go--critical { color:var(--danger); border-color:var(--danger); }
    .ovb-go--warning { color:var(--warning); border-color:var(--warning); }
    /* ── Overview summary stat cards ── */
    .ovc-sum-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
    .ovc-sum { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 18px; display:flex; align-items:center; gap:12px; }
    .ovc-sum-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
    .ovc-sum-label { font-size:11px; color:var(--muted); margin-bottom:3px; }
    .ovc-sum-val { font-size:24px; font-weight:800; line-height:1; }
    .ovc-sum-sub { font-size:10px; color:var(--muted); margin-top:3px; }
    .ovc-sum--total .ovc-sum-icon { background:rgba(59,130,246,0.12); }
    .ovc-sum--total .ovc-sum-val { color:var(--text); }
    .ovc-sum--healthy .ovc-sum-icon { background:rgba(16,185,129,0.12); }
    .ovc-sum--healthy .ovc-sum-val { color:var(--success); }
    .ovc-sum--warning .ovc-sum-icon { background:rgba(245,158,11,0.12); }
    .ovc-sum--warning .ovc-sum-val { color:var(--warning); }
    .ovc-sum--critical .ovc-sum-icon { background:rgba(239,68,68,0.12); }
    .ovc-sum--critical .ovc-sum-val { color:var(--danger); }
    /* Summary boxes double as click-to-filter controls. */
    .ovc-sum[onclick] { transition:border-color 0.12s, box-shadow 0.12s, transform 0.12s; }
    .ovc-sum[onclick]:hover { border-color:var(--primary); transform:translateY(-1px); }
    .ovc-sum--active { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary) inset; }
    /* ── Overview toolbar ── */
    .ovc-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
    .ovc-toolbar-tabs { display:flex; gap:8px; }
    .ovc-toolbar-controls { display:flex; gap:10px; align-items:center; }
    .ovc-search-wrap { position:relative; }
    .ovc-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13px; pointer-events:none; }
    .ovc-search { padding:7px 12px 7px 32px; background:var(--input-bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:12px; font-family:inherit; width:200px; }
    .ovc-sort { padding:7px 10px; }
    .ovc-tab-btn { padding:8px 18px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:6px; border:1px solid var(--border); background:transparent; color:var(--muted); }
    .ovc-tab-btn.active { border-color:var(--primary); background:var(--primary-bg); color:var(--primary); font-weight:700; }
    .ovc-tab-badge { padding:1px 7px; border-radius:10px; font-size:10px; font-weight:700; background:var(--border); color:var(--muted); }
    .ovc-tab-btn.active .ovc-tab-badge { background:var(--primary); color:#fff; }
    /* ── Overview cards grid + empty states ── */
    .ovc-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
    .ovc-empty { grid-column:1/-1; text-align:center; padding:60px; color:var(--muted); }
    .ovc-empty-icon { font-size:40px; margin-bottom:12px; }
    .ovc-empty-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:6px; }
    .ovc-empty-sub { font-size:12px; }
    /* Full-page states (no databases / connecting) — fill the overview, not a grid cell */
    .ovc-empty-full { display:flex; flex-direction:column; align-items:center; justify-content:center; height:60vh; gap:15px; color:var(--muted); }
    .ovc-empty-full-icon { font-size:48px; }
    .ovc-empty-full-title { font-size:18px; font-weight:700; color:var(--text); }
    .ovc-loading { text-align:center; padding:60px; color:var(--muted); font-size:12px; }
    /* Paused-card bits + Redshift db-type label */
    .ovc-card--paused .ovc-card-icon { opacity:0.4; }
    .ovc-paused-badge { font-size:11px; color:var(--muted); font-weight:600; }
    .ovc-paused-action { padding:12px 16px; }
    .ovc-db-redshift { color:var(--purple); font-weight:700; }
    /* ── Overview DB card ── */
    .ovc-card { background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; cursor:pointer; transition:box-shadow 0.15s,transform 0.15s; }
    .ovc-card:hover { box-shadow:0 6px 24px rgba(0,0,0,0.13); transform:translateY(-2px); }
    .ovc-card--warn { border-color:rgba(245,158,11,0.3); }
    .ovc-card--crit { border-color:rgba(239,68,68,0.35); }
    .ovc-card--paused { border-color:rgba(148,163,184,0.25); opacity:0.6; cursor:default; }
    .ovc-card--paused:hover { box-shadow:none; transform:none; }
    .ovc-card-head { padding:16px 16px 14px; }
    .ovc-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
    .ovc-card-id { display:flex; align-items:center; gap:10px; min-width:0; }
    .ovc-card-icon { width:40px; height:40px; border-radius:10px; background:var(--primary-bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
    .ovc-card-name-wrap { min-width:0; }
    .ovc-card-name { font-size:14px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ovc-card-meta { font-size:10px; color:var(--muted); margin-top:2px; }
    /* Fleet-card replication-role pill next to the engine label. Replica uses
       the warning/amber accent (per request); Primary a cool blue so the two
       roles are visually distinct and only replicas share the amber tone. */
    .ovc-role-badge { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:9px;
        font-size:9px; font-weight:800; letter-spacing:0.3px; vertical-align:middle;
        text-transform:uppercase; line-height:1.5; }
    .ovc-role-badge--replica { color:var(--warning); background:rgba(245,158,11,0.13); border:1px solid rgba(245,158,11,0.4); }
    /* "Only your own sessions" notice (MySQL login lacks PROCESS) — amber, above
       the Sessions / Long-Running list; pre-line so the GRANT sits on its own line. */
    .sess-scope-notice { background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.4);
        border-radius:8px; padding:10px 14px; margin-bottom:14px; color:var(--warning);
        font-size:12px; white-space:pre-line; }
    .ovc-role-badge--primary { color:var(--primary); background:rgba(59,130,246,0.13); border:1px solid rgba(59,130,246,0.4); }
    .ovc-card-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-top:5px; }
    .ovc-card-dot--healthy { background:var(--success); box-shadow:0 0 5px rgba(16,185,129,0.7); }
    .ovc-card-dot--warning { background:var(--warning); }
    .ovc-card-dot--critical { background:var(--danger); box-shadow:0 0 5px rgba(239,68,68,0.6); }
    .ovc-card-dot--offline { background:#64748B; }
    .ovc-card-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
    .ovc-star-btn { background:none; border:none; cursor:pointer; font-size:18px; line-height:1; padding:2px 4px; opacity:0.35; transition:opacity 0.15s; }
    .ovc-star-btn:hover { opacity:1; }
    .ovc-star-btn.starred { opacity:1; }
    .ovc-card-health { text-align:right; }
    .ovc-card-health-val { font-size:22px; font-weight:800; line-height:1; }
    .ovc-card-health-label { font-size:10px; font-weight:700; margin-top:2px; }
    .ovc-card--lv-healthy .ovc-card-health-val, .ovc-card--lv-healthy .ovc-card-health-label { color:var(--success); }
    .ovc-card--lv-warning .ovc-card-health-val, .ovc-card--lv-warning .ovc-card-health-label { color:var(--warning); }
    .ovc-card--lv-critical .ovc-card-health-val, .ovc-card--lv-critical .ovc-card-health-label { color:var(--danger); }
    .ovc-card--lv-offline .ovc-card-health-val, .ovc-card--lv-offline .ovc-card-health-label { color:var(--muted); }
    .ovc-card-offline-lbl { font-size:12px; font-weight:700; color:var(--muted); }
    .ovc-card-no-metrics { font-size:11px; font-weight:600; color:var(--muted); }
    /* ── Card metrics ── */
    .ovc-card-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:14px 16px; border-top:1px solid var(--border); }
    .ovc-card-offline-msg { padding:20px 16px; border-top:1px solid var(--border); text-align:center; color:var(--muted); font-size:11px; }
    .ovc-mcol-label { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:3px; white-space:nowrap; }
    .ovc-mcol-val { font-size:14px; font-weight:700; color:var(--text); margin-bottom:6px; }
    /* ── Card issue panel ── */
    .ovc-card-issues { border-top:1px solid var(--border); padding:12px 16px; }
    .ovc-card-issues--crit { background:rgba(239,68,68,0.05); }
    .ovc-card-issues--warn { background:rgba(245,158,11,0.04); }
    .ovc-card-issues-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--muted); margin-bottom:8px; }
    .ovc-card-issue-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
    .ovc-card-issue-icon { font-size:12px; flex-shrink:0; }
    .ovc-card-issue-text { font-size:12px; color:var(--text); }
    .ovc-card-issues-btn { margin-top:10px; width:100%; padding:7px; border-radius:7px; border:1px solid var(--primary); background:transparent; color:var(--primary); font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; }
    /* ── Card footer ── */
    .ovc-card-footer { padding:9px 16px; border-top:1px solid var(--border); background:var(--card-inner); display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .ovc-card-footer-ts { font-size:10px; color:var(--muted); }
    .ovc-card-footer-actions { display:flex; align-items:center; gap:8px; }
    .ovc-card-view-btn { font-size:10px; color:var(--primary); background:none; border:none; cursor:pointer; font-weight:700; padding:0; }
    /* ── Issue toggle badge ── */
    .ovc-issue-toggle { font-size:10px; font-weight:700; border-radius:6px; padding:3px 8px; cursor:pointer; font-family:inherit; border:1px solid; }
    .ovc-issue-toggle--crit { color:var(--danger); background:rgba(239,68,68,0.1); border-color:rgba(239,68,68,0.3); }
    .ovc-issue-toggle--warn { color:var(--warning); background:rgba(245,158,11,0.1); border-color:rgba(245,158,11,0.3); }
    /* ── Redshift card ── */
    .ovc-card--redshift { border-color:rgba(139,92,246,0.3); }
    .ovc-rs-icon { width:40px; height:40px; border-radius:10px; background:rgba(139,92,246,0.1); border:1px solid rgba(139,92,246,0.25); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
    .ovc-rs-badge { display:inline-block; font-size:10px; font-weight:700; color:var(--purple); background:rgba(139,92,246,0.1); border:1px solid rgba(139,92,246,0.25); border-radius:6px; padding:1px 7px; margin-top:3px; }
    .ovc-rs-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-left:7px; vertical-align:middle; }
    .ovc-rs-dot--online { background:var(--success); box-shadow:0 0 5px rgba(16,185,129,0.7); }
    .ovc-rs-dot--offline { background:#64748B; }
    .ovc-rs-status--online { font-size:11px; font-weight:600; color:var(--success); }
    .ovc-rs-status--offline { font-size:11px; font-weight:600; color:var(--muted); }
    .ovc-rs-body { padding:12px 16px 14px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:5px; }
    .ovc-rs-type-label { font-size:11px; font-weight:600; color:var(--text); }
    .ovc-rs-info-text { font-size:11px; color:var(--muted); }
    .ovc-rs-host { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ovc-rs-footer { padding:9px 16px; border-top:1px solid var(--border); background:var(--card-inner); }
    .ovc-rs-open-btn { width:100%; padding:7px; border-radius:7px; border:1px solid var(--purple); background:rgba(139,92,246,0.1); color:var(--purple); font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; }

    /* ── Settings (bottom-left gear + Settings view) ─────────────────── */
    .sb-bottom { flex-shrink:0; border-top:1px solid var(--border); padding:8px 0; }
    /* Settings view: vertical category rail (set-rail) + content pane (set-pane) */
    .set-wrap { display:flex; gap:0; height:100%; }
    .set-rail { width:200px; flex-shrink:0; border-right:1px solid var(--border); padding:16px 10px; display:flex; flex-direction:column; gap:2px; }
    .set-rail-title { font-size:9px; font-weight:700; color:var(--muted); letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px 8px; }
    .set-cat { display:flex; align-items:center; gap:9px; width:100%; padding:9px 12px; border:none; background:transparent; color:var(--muted); font-size:13px; font-weight:600; text-align:left; border-radius:8px; cursor:pointer; font-family:inherit; transition:all 0.12s; }
    .set-cat:hover:not(.disabled) { background:var(--hover); color:var(--text); }
    .set-cat.active { background:var(--primary-bg); color:var(--primary); }
    .set-cat.disabled { opacity:0.4; cursor:default; pointer-events:none; }
    .set-cat-soon { margin-left:auto; font-size:8px; font-weight:700; letter-spacing:0.5px; color:var(--muted); border:1px solid var(--border); border-radius:5px; padding:1px 5px; }
    .set-pane { flex:1; overflow-y:auto; padding:22px 26px; }
    .set-pane-title { font-size:18px; font-weight:800; color:var(--text); letter-spacing:-0.3px; }
    .set-pane-sub { font-size:12px; color:var(--muted); margin-top:3px; margin-bottom:20px; }
    .set-section { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px 20px; margin-bottom:18px; }
    .set-section-title { font-size:13px; font-weight:700; color:var(--text); display:flex; align-items:center; margin-bottom:4px; }
    .set-section-desc { font-size:11px; color:var(--muted); margin-bottom:16px; line-height:1.5; }
    .set-row { display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--border); }
    .set-row:first-of-type { border-top:none; }
    .set-row-label { font-size:13px; font-weight:600; color:var(--text); display:flex; align-items:center; min-width:190px; }
    .set-row-control { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .set-row-eff { font-size:11px; color:var(--muted); margin-left:auto; white-space:nowrap; }
    .set-select { padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:var(--card-inner); color:var(--text); font-size:12px; font-family:inherit; cursor:pointer; }
    .set-num { width:74px; padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:var(--card-inner); color:var(--text); font-size:12px; font-family:inherit; }
    .set-hint { font-size:11px; color:var(--muted); margin-top:2px; }
    .set-tbl { width:100%; border-collapse:collapse; }
    .set-tbl th { font-size:10px; font-weight:700; color:var(--muted); letter-spacing:0.5px; text-transform:uppercase; text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); }
    .set-tbl td { padding:9px 10px; border-bottom:1px solid var(--border); font-size:12px; color:var(--text); }
    .set-tbl tr:last-child td { border-bottom:none; }
    .set-badge-override { font-size:9px; font-weight:700; color:var(--primary); background:var(--primary-bg); border-radius:5px; padding:2px 6px; margin-left:6px; }
    .set-badge-inherit { font-size:9px; font-weight:700; color:var(--muted); border:1px solid var(--border); border-radius:5px; padding:2px 6px; margin-left:6px; }
  
    /* ══ 2026-07 redesign additions ══════════════════════════════════ */

    /* ── Topbar global search ── */
    .tb-search-wrap { flex:1; max-width:480px; position:relative; display:flex; align-items:center; }
    .tb-search-ic { position:absolute; left:12px; display:flex; color:var(--muted); pointer-events:none; }
    .tb-search { width:100%; padding:8px 12px 8px 36px; background:var(--input-bg); border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:12px; font-family:inherit; transition:border-color 0.15s; }
    .tb-search:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,0.1); }
    .tb-search::placeholder { color:var(--subtle); }

    /* ── Footer status bar ── */
    .statusbar { flex-shrink:0; height:34px; border-top:1px solid var(--border); background:var(--sidebar); display:flex; align-items:center; justify-content:space-between; padding:0 18px; font-size:11px; color:var(--muted); gap:14px; overflow:hidden; }
    .statusbar-left, .statusbar-right { display:flex; align-items:center; gap:10px; min-width:0; white-space:nowrap; }
    .sb-live-dot { width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 5px rgba(16,185,129,0.7); flex-shrink:0; }
    .sb-live-dot--paused { background:var(--warning); box-shadow:none; }
    .statusbar-sep { opacity:0.45; }

    /* ── In-tab page header ── */
    .page-h1 { font-size:28px; font-weight:800; letter-spacing:-0.6px; color:var(--text); }
    .page-sub { font-size:13px; color:var(--color-text-secondary); margin:4px 0 0; }
    /* ── Roomy dashboard tables (Tables tab): ~48px rows ── */
    .tbl-lg td { padding:14px 15px; font-size:13px; }
    .tbl-lg th { padding:11px 15px; }

    /* ── Status filter chips (mirror the summary boxes) ── */
    .ovc-chips { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .ovc-chip { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:11px; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.12s; }
    .ovc-chip:hover { color:var(--text); border-color:var(--subtle); }
    .ovc-chip.active { border-color:var(--primary); background:var(--primary-bg); color:var(--primary); }
    .ovc-chip-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

    /* ── Health ring (fleet cards) ── */
    .hring { position:relative; flex-shrink:0; }
    .hring-txt { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
    .hring-val { font-size:15px; font-weight:800; line-height:1.1; }
    .hring-lbl { font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; }

    /* ── Fleet card (mock layout: pill next to name, ring + real sparkline) ── */
    .ovc-sev-pill { display:inline-block; padding:2px 8px; border-radius:6px; font-size:8.5px; font-weight:800; letter-spacing:0.6px; text-transform:uppercase; vertical-align:middle; margin-left:8px; border:1px solid; line-height:1.6; }
    .ovc-sev-pill--critical { color:var(--danger); background:rgba(239,68,68,0.12); border-color:rgba(239,68,68,0.4); }
    .ovc-sev-pill--warning { color:var(--warning); background:rgba(245,158,11,0.12); border-color:rgba(245,158,11,0.4); }
    .ovc-sev-pill--healthy { color:var(--success); background:rgba(16,185,129,0.12); border-color:rgba(16,185,129,0.4); }
    .ovc-sev-pill--offline { color:var(--muted); background:rgba(100,116,139,0.12); border-color:rgba(100,116,139,0.4); }
    .ovc-card-body { display:flex; align-items:center; gap:16px; padding:4px 16px 14px; }
    .ovc-card-spark { flex:1; min-width:0; }
    .ovc-spark-cap { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:3px; }
    .ovc-mcell { padding:10px 6px; text-align:center; border-right:1px solid var(--border); min-width:0; }
    .ovc-mcell:last-child { border-right:none; }
    .ovc-foot-issues { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; background:none; border:none; padding:0; cursor:pointer; font-family:inherit; }
    .ovc-foot-issues--crit { color:var(--danger); }
    .ovc-foot-issues--warn { color:var(--warning); }
    .ovc-foot-issues--ok { color:var(--success); cursor:default; }

    /* ── Right panel (Switch Database) row upgrades ── */
    .rsb-sev { font-size:8.5px; font-weight:800; letter-spacing:0.5px; border-radius:5px; padding:2px 6px; text-transform:uppercase; border:1px solid; flex-shrink:0; white-space:nowrap; }
    .rsb-sev--critical { color:var(--danger); background:rgba(239,68,68,0.12); border-color:rgba(239,68,68,0.4); }
    .rsb-sev--warning { color:var(--warning); background:rgba(245,158,11,0.12); border-color:rgba(245,158,11,0.4); }
    .rsb-sev--healthy { color:var(--success); background:rgba(16,185,129,0.12); border-color:rgba(16,185,129,0.4); }
    .rsb-sev--offline { color:var(--muted); background:rgba(100,116,139,0.12); border-color:rgba(100,116,139,0.4); }
    .rsb-sev--paused { color:#94A3B8; background:rgba(148,163,184,0.1); border-color:rgba(148,163,184,0.35); }
    /* Line 3: badges never wrap — overflow collapses into the "+N" chip. */
    /* Badges never clip: whole pills only — the row WRAPS when narrow
       (walk fix 2026-07-13; the old nowrap+hidden cut pills mid-glyph). */
    .rsb-db-sub { display:flex; align-items:center; gap:6px; margin-top:7px; flex-wrap:wrap; overflow:visible; min-width:0; }
    .rsb-env-pill { flex:0 0 auto; max-width:100%; font-size:8px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:1.5px 6px; line-height:1.6; border:1px solid transparent; white-space:nowrap; }
    .rsb-env-pill--prod { color:#60A5FA; background:rgba(59,130,246,0.13); border-color:rgba(59,130,246,0.32); }
    .rsb-env-pill--staging { color:var(--purple); background:rgba(139,92,246,0.13); border-color:rgba(139,92,246,0.32); }
    .rsb-env-pill--dev { color:#38BDF8; background:rgba(56,189,248,0.12); border-color:rgba(56,189,248,0.30); }
    .rsb-env-pill--replica { color:var(--warning); background:rgba(245,158,11,0.13); border-color:rgba(245,158,11,0.32); }
    .rsb-env-pill--primary { color:#22D3EE; background:rgba(34,211,238,0.12); border-color:rgba(34,211,238,0.30); }
    .rsb-env-pill--more { color:var(--muted); background:rgba(148,163,184,0.12); border-color:rgba(148,163,184,0.25); }
    /* Edit/remove live behind the always-visible ⋯ menu (walk fix
       2026-07-13): the card row stays [star] [status] [⋯], so the name and
       badge lines keep their width. */

    /* ── Stat summary boxes (icon tile + uppercase label) ── */
    .ovc-sum { border-radius:14px; padding:18px 20px; gap:14px; }
    .ovc-sum-icon { width:44px; height:44px; border-radius:12px; font-size:20px; }
    .ovc-sum--total .ovc-sum-icon { color:var(--primary); }
    .ovc-sum--healthy .ovc-sum-icon { color:var(--success); }
    .ovc-sum--warning .ovc-sum-icon { color:var(--warning); }
    .ovc-sum--critical .ovc-sum-icon { color:var(--danger); }
    .ovc-sum-label { font-size:10px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
    .ovc-sum-val { font-size:26px; }

    /* metric strip: edge-to-edge cells (cells carry their own padding/dividers) */
    .ovc-card-metrics { gap:0; padding:0; }

    /* == Complete-UI-redesign foundation: shared components ============= */
    /* Starred (bookmarked) icons render filled + amber in both themes */
    .rsb-action-btn--star.starred .lu, .ovc-star-btn.starred .lu { fill: currentColor; }
    .rsb-action-btn--star.starred, .ovc-star-btn.starred { color: var(--warning); }
    .rsb-action-btn--star .lu, .ovc-star-btn .lu { display:block; }

    /* MetricCard - the KPI tile every page uses */
    .metric-card { background:var(--color-bg-panel); border:1px solid var(--color-border-default); border-radius:14px; padding:20px; flex:1; min-width:0; min-height:112px; display:flex; gap:16px; align-items:center; overflow:hidden; box-sizing:border-box; box-shadow:var(--shadow-card); }
    .metric-card-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .metric-card-icon--accent  { background:var(--color-accent-soft);  color:var(--color-accent-primary-hover); }
    .metric-card-icon--success { background:var(--color-success-soft); color:var(--color-success); }
    .metric-card-icon--warning { background:var(--color-warning-soft); color:var(--color-warning); }
    .metric-card-icon--danger  { background:var(--color-danger-soft);  color:var(--color-danger); }
    .metric-card-icon--purple  { background:var(--color-purple-soft);  color:var(--color-purple-tok); }
    .metric-card-label { font-size:11.5px; color:var(--color-text-muted); font-weight:600; margin-bottom:4px; }
    .metric-card-value { font-size:30px; font-weight:800; color:var(--color-text-primary); letter-spacing:-0.6px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .metric-card-sub { font-size:11px; color:var(--color-text-muted); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .metric-card-trend { font-size:11px; font-weight:700; margin-top:2px; white-space:nowrap; }

    /* Muted table-header cell — spec: headers are #94a3b8, never bright blue */
    .tbl-th { color:var(--color-text-muted) !important; font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; }

    /* StatusBadge - compact status pills */
    .status-badge { display:inline-flex; align-items:center; gap:5px; font-size:9px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; padding:2px 9px; border-radius:8px; border:1px solid; line-height:1.7; }
    .status-badge--healthy  { color:var(--color-success); background:var(--color-success-soft); border-color:var(--color-success-border); }
    .status-badge--warning  { color:var(--color-warning); background:var(--color-warning-soft); border-color:var(--color-warning-border); }
    .status-badge--critical { color:var(--color-danger);  background:var(--color-danger-soft);  border-color:var(--color-danger-border); }
    .status-badge--offline  { color:var(--color-text-muted); background:transparent; border-color:var(--color-border-default); }
    .status-badge--info     { color:var(--color-info); background:var(--color-info-soft); border-color:var(--color-accent-border); }

    /* FilterToolbar */
    .filter-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }

    /* ChartCard - inner panel that holds a chart */
    .chart-card { background:var(--color-bg-inset); border:1px solid var(--color-border-default); border-radius:12px; padding:16px; box-sizing:border-box; }
    .chart-card-title { font-size:13px; font-weight:700; color:var(--color-text-primary); }

    /* EmptyState */
    .empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:36px 20px; text-align:center; }
    .empty-state-icon { width:46px; height:46px; border-radius:50%; background:var(--color-bg-inset); border:1px solid var(--color-border-default); display:flex; align-items:center; justify-content:center; color:var(--color-text-muted); }
    .empty-state-icon--ok { background:var(--color-success-soft); border-color:var(--color-success-border); color:var(--color-success); }
    .empty-state-title { font-size:13px; font-weight:700; color:var(--color-text-primary); }
    .empty-state-sub { font-size:11.5px; color:var(--color-text-muted); line-height:1.5; }

    /* Security page sub-tabs — blue underline for the active tab (mock spec) */
    .sec-tabs { display:flex; gap:24px; border-bottom:1px solid var(--color-border-default); margin:18px 0 16px; }
    .sec-tab { padding:9px 2px 11px; font-size:12.5px; font-weight:600; color:var(--color-text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; user-select:none; }
    .sec-tab:hover { color:var(--color-text-secondary); }
    .sec-tab--active { color:var(--color-accent-primary-hover); border-bottom-color:var(--color-accent-primary); }
    /* Security severity pills (Critical / Warning / Info) */
    .sev-pill { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:8px; font-size:10px; font-weight:700; border:1px solid; white-space:nowrap; }
    .sev-pill--critical { color:var(--color-danger); background:var(--color-danger-soft); border-color:var(--color-danger-border); }
    .sev-pill--warning  { color:var(--color-warning); background:var(--color-warning-soft); border-color:var(--color-warning-border); }
    .sev-pill--info     { color:var(--color-accent-primary-hover); background:var(--color-accent-soft); border-color:var(--color-accent-border); }
    .sev-pill--pass     { color:var(--color-success); background:var(--color-success-soft); border-color:var(--color-success-border); }
    .sev-pill--unknown  { color:var(--color-text-muted); background:transparent; border-color:var(--color-border-default); }
    /* Security SQL snippet block (Recommendations / Show SQL) */
    .sec-sql { position:relative; background:var(--color-bg-input); border:1px solid var(--color-border-default); border-radius:8px; padding:9px 34px 9px 11px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10.5px; color:var(--color-text-secondary); white-space:pre-wrap; word-break:break-word; line-height:1.55; margin:0; }
    .sec-sql-copy { position:absolute; top:6px; right:6px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:5px; border:1px solid var(--color-border-default); background:transparent; color:var(--color-text-muted); cursor:pointer; }
    .sec-sql-copy:hover { color:var(--color-accent-primary-hover); border-color:var(--color-accent-border); }

    /* Light-mode niceties: cards get soft shadow, table zebra softened */
    [data-theme="light"] .table-wrapper, [data-theme="light"] .metric-card { box-shadow:var(--shadow-card); }

    /* Dashboard KPI metric-cards double as click-to-filter controls */
    .metric-card[onclick] { cursor:pointer; transition:border-color 0.12s, transform 0.12s, box-shadow 0.12s; }
    .metric-card[onclick]:hover { border-color:var(--color-accent-border); transform:translateY(-1px); }
    .metric-card--active { border-color:var(--color-border-selected); box-shadow:inset 0 0 0 1px var(--color-border-selected), var(--shadow-card); }
    /* Healthy fleet cards get the mock green edge (critical/warning already tinted) */
    .ovc-card--ok { border-color:var(--color-success-border); }

/* ── Long Running: chart-loading skeleton (shimmer) ─────────────────── */
.lr-skel {
  background: linear-gradient(90deg, var(--color-bg-inset) 25%, var(--color-border-subtle) 50%, var(--color-bg-inset) 75%);
  background-size: 200% 100%;
  animation: lr-skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes lr-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Long Running sessions table — comfortable rows, row-token backgrounds */
.lr-table td { padding: 14px 13px; }
.lr-table tr:first-child td { padding: 9px 13px; background: var(--card-inner); border-bottom: 1px solid var(--color-border-default); }
.lr-table tr:not(:first-child) td { border-bottom: 1px solid var(--color-border-subtle); }
.lr-table tr:not(:first-child):hover td { background: var(--color-bg-table-row-hover); }

/* Inline row actions (spec: no clipped dropdown — Kill always visible) */
.lr-act-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 7px; cursor: pointer;
  background: none; border: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
}
.lr-act-btn:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); background: var(--color-bg-inset); }
.lr-act-kill {
  display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 10px;
  border-radius: 7px; cursor: pointer; background: none; font-family: inherit;
  border: 1px solid var(--color-danger); color: var(--color-danger);
  font-size: 10.5px; font-weight: 700;
}
.lr-act-kill:hover { background: var(--color-danger-soft); }

/* == Replication Topology (replica page) -- source -> replica diagram == */
.replication-topology-card {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-default);
  border-radius: 16px;
  padding: 18px;
  min-height: 270px;
  min-width: 0;
}
.replication-topology-content { display: grid; grid-template-rows: 1fr auto; gap: 16px; }
.replication-topology-diagram {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(160px, 1fr) minmax(240px, 280px);
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 132px;
}
.replication-node {
  position: relative;
  min-height: 124px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--color-bg-panel-elevated), var(--color-bg-table-row));
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  min-width: 0;
  box-sizing: border-box;
}
.replication-node.source {
  border-color: var(--color-accent-primary-hover);
  box-shadow: 0 0 0 1px var(--color-accent-border), 0 0 24px var(--color-accent-soft), var(--shadow-card);
}
.replication-node.replica.healthy {
  border-color: var(--color-success);
  box-shadow: 0 0 0 1px var(--color-success-border), 0 0 24px var(--color-success-soft), var(--shadow-card);
}
.replication-node.replica.warning { border-color: var(--color-warning); }
.replication-node.replica.critical { border-color: var(--color-danger); }
.replication-node-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.replication-node-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-soft);
}
.replication-node-title { color: var(--color-text-primary); font-size: 15px; font-weight: 700; line-height: 1.2; word-break: break-word; }
.replication-node-subtitle { color: var(--color-text-muted); font-size: 12px; margin-top: 4px; }
.replication-node-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.replication-badge {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px;
  border-radius: 7px; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.replication-badge.success { color: var(--color-success); background: var(--color-success-soft); border: 1px solid var(--color-success-border); }
.replication-badge.warning { color: var(--color-warning); background: var(--color-warning-soft); border: 1px solid var(--color-warning-border); }
.replication-badge.info    { color: var(--color-info); background: var(--color-info-soft); border: 1px solid var(--color-accent-border); }
.replication-badge.critical{ color: var(--color-danger); background: var(--color-danger-soft); border: 1px solid var(--color-danger-border); }
.replication-connector {
  position: relative; height: 96px; min-width: 160px;
  display: flex; align-items: center; justify-content: center;
}
.replication-connector-svg { width: 100%; height: 80px; overflow: visible; }
.replication-channel-label {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  color: var(--color-text-primary); font-size: 12px; font-weight: 700;
  background: var(--color-bg-panel); padding: 2px 8px; border-radius: 6px; z-index: 2;
  white-space: nowrap;
}
.replication-channel-subtitle {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  color: var(--color-text-muted); font-size: 11px; white-space: nowrap;
}
.replication-flow-dot { animation: replication-flow 2.4s linear infinite; filter: drop-shadow(0 0 6px var(--color-accent-primary-hover)); }
@keyframes replication-flow {
  0%   { transform: translateX(0);     opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(245px); opacity: 0; }
}
.replication-topology-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.replication-meta-pill {
  display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 8px 10px;
  border-radius: 10px; background: var(--color-bg-input);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary); font-size: 12px; min-width: 0;
}
.replication-meta-pill strong { color: var(--color-text-primary); font-weight: 700; }
.replication-meta-pill .rm-ic { display: flex; color: var(--color-accent-primary-hover); flex-shrink: 0; }
@media (max-width: 900px) {
  .replication-topology-diagram { grid-template-columns: 1fr; grid-template-rows: auto 96px auto; justify-items: center; }
  .replication-connector { width: 150px; transform: rotate(90deg); }
  .replication-topology-meta { grid-template-columns: 1fr; }
}

/* == Graphs page (redesign) == */
.graphs-page { display: flex; flex-direction: column; gap: 18px; }
.graphs-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.graphs-secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.graphs-bottom-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
.graphs-presets {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch;
  background: var(--color-bg-panel); border: 1px solid var(--color-border-default);
  border-radius: 12px; padding: 6px;
}
.graphs-preset-tab {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px;
  border-radius: 9px; border: 1px solid transparent; background: transparent;
  color: var(--color-text-muted); font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer; flex: 1 1 auto; justify-content: center;
  white-space: nowrap;
}
.graphs-preset-tab:hover { background: var(--color-bg-inset); color: var(--color-text-secondary); }
.graphs-preset-tab.active {
  border-color: var(--color-border-selected);
  background: var(--color-accent-soft);
  color: var(--color-accent-primary-hover);
}
.graphs-preset-add { flex: 0 0 auto; color: var(--color-text-secondary); }
.graphs-metric-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px;
  max-height: 300px; overflow-y: auto; padding-right: 2px;
}
.graphs-metric-pill {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px;
  border-radius: 9px; border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-inset); cursor: pointer; min-width: 0;
}
.graphs-metric-pill:hover { border-color: var(--color-border-strong); }
.graphs-metric-pill.selected {
  border-color: var(--color-border-selected);
  background: var(--color-accent-soft);
}
.graphs-metric-pill.unavailable { opacity: 0.45; cursor: help; }
.graphs-metric-pill .gm-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.graphs-metric-pill .gm-label {
  flex: 1; font-size: 11.5px; color: var(--color-text-secondary); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.graphs-metric-pill.selected .gm-label { color: var(--color-text-primary); }
.graphs-metric-pill .gm-check { display: flex; color: var(--color-accent-primary-hover); width: 16px; flex-shrink: 0; }
.graphs-view-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  cursor: pointer; border: 1px solid transparent;
}
.graphs-view-row:hover { background: var(--color-bg-inset); border-color: var(--color-border-subtle); }
.graphs-view-row .gv-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-soft); color: var(--color-accent-primary-hover);
}
@media (max-width: 1100px) {
  .graphs-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .graphs-secondary-grid, .graphs-bottom-grid { grid-template-columns: 1fr; }
}

/* == Compare page (redesign) == */
.cmp-mode-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--color-bg-panel); border: 1px solid var(--color-border-default);
  border-radius: 10px; width: fit-content;
}
.cmp-mode-tab {
  height: 34px; padding: 0 18px; border-radius: 8px; border: none;
  background: transparent; color: var(--color-text-muted);
  font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.cmp-mode-tab:hover { color: var(--color-text-secondary); }
.cmp-mode-tab.active { background: var(--color-accent-primary); color: #fff; }
.cmp-main-grid { display: grid; grid-template-columns: minmax(0, 60fr) minmax(300px, 40fr); gap: 16px; align-items: start; }
.cmp-controls {
  background: var(--color-bg-panel); border: 1px solid var(--color-border-default);
  border-radius: 12px; padding: 12px 14px;
}
.cmp-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-inset); color: var(--color-text-secondary);
  font-size: 11px; font-weight: 600; cursor: pointer; user-select: none;
}
.cmp-pill:hover { border-color: var(--color-border-strong); }
.cmp-pill.selected {
  border-color: var(--color-border-selected); background: var(--color-accent-soft);
  color: var(--color-text-primary);
}
.cmp-pill-x { color: var(--color-text-muted); font-size: 14px; line-height: 1; cursor: pointer; margin-left: 2px; }
.cmp-pill-x:hover { color: var(--danger); }
.cmp-add-list {
  position: absolute; top: 34px; left: 0; z-index: 50; min-width: 230px; max-height: 260px;
  overflow-y: auto; background: var(--color-bg-panel-elevated);
  border: 1px solid var(--color-border-default); border-radius: 10px; padding: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.cmp-add-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px;
  font-size: 11.5px; color: var(--color-text-secondary); cursor: pointer;
}
.cmp-add-item:hover { background: var(--color-bg-inset); color: var(--color-text-primary); }
.cmp-add-item.unavailable { opacity: 0.45; cursor: help; }
.cmp-toggle {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  color: var(--color-text-secondary); cursor: pointer; user-select: none;
}
.cmp-insight {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px;
  border: 1px solid var(--color-border-subtle); border-radius: 10px;
  background: var(--color-bg-inset); margin-bottom: 8px; cursor: pointer; min-width: 0;
}
.cmp-insight:hover { border-color: var(--color-border-strong); }
.cmp-insight-rank {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-panel-elevated); border: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted); font-size: 11px; font-weight: 700;
}
@media (max-width: 1100px) {
  .cmp-main-grid { grid-template-columns: 1fr; }
}

/* == Vacuum page (redesign) == */
.vac-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.vac-xid-bar-wrap { position: relative; padding: 26px 0 22px; }
.vac-xid-bar {
  position: relative; height: 16px; border-radius: 8px; overflow: hidden;
  background: var(--color-bg-inset); border: 1px solid var(--color-border-subtle);
}
.vac-xid-zone { position: absolute; top: 0; bottom: 0; }
.vac-xid-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 8px 0 0 8px; opacity: 0.85; }
.vac-xid-tick {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--color-accent-primary-hover); cursor: help;
}
.vac-xid-marker {
  position: absolute; top: 0; transform: translateX(-50%);
  padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
  background: var(--color-bg-panel-elevated); border: 1.5px solid; white-space: nowrap;
}
.vac-xid-labels {
  position: relative; display: flex; margin-top: 8px;
  font-size: 10px; color: var(--color-text-muted);
}
.vac-xid-cells {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--color-border-subtle); padding-top: 12px; margin-top: 6px;
}
.vac-xid-cell { padding: 2px 14px; border-left: 1px solid var(--color-border-subtle); min-width: 0; }
.vac-xid-cell:first-child { border-left: none; padding-left: 0; }
/* Autovacuum Configuration card: 7 raw-GUC cells on a 4-column grid */
.vac-cfg-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
.vac-cfg-cells .vac-xid-cell:nth-child(4n+1) { border-left: none; padding-left: 0; }
@media (max-width: 1100px) {
  .vac-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vac-xid-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vac-xid-cell { border-left: none; padding-left: 0; }
  .vac-cfg-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}