/* ============================================================
   ver02 — Appliance theme (SSL Monitor dark, v1.4.4+)
   Dark-mode-only palette; legacy [data-theme="light|dark"]
   selectors retained so any stored attribute still resolves
   to the same SSL Monitor palette (toggle is hidden in UI).
   ============================================================ */

:root,
[data-theme="light"],
[data-theme="dark"] {
    color-scheme: dark;

    /* Backgrounds */
    --bg-page:           color-mix(in srgb, #0d1117 90%, var(--brand-primary));   /* brand-tinted near-black */
    --bg-panel:          color-mix(in srgb, #1a1a2e 88%, var(--brand-primary));   /* brand-tinted card base */
    --bg-panel-alt:      color-mix(in srgb, #24242e 88%, var(--brand-primary));   /* brand-tinted stripe */
    --bg-panel-hover:    color-mix(in srgb, #23242f 78%, var(--brand-primary-lt));/* brand-tinted hover */
    --bg-nav:            linear-gradient(180deg, #1a1a2e 0%, #0d1117 100%);
    --bg-nav-section:    var(--bg-page);
    --bg-nav-hover:      var(--bg-panel-hover);
    --bg-panel-title:    linear-gradient(180deg, var(--brand-primary-mid) 0%, var(--brand-primary) 100%);
    --bg-header:         linear-gradient(to right, var(--brand-primary-lt) 0%, var(--brand-primary) 40%);
    --bg-subtabs:        linear-gradient(180deg, var(--brand-primary-mid) 0%, var(--brand-primary) 100%);

    --bg-navrail:        linear-gradient(180deg, var(--brand-primary-mid) 0, var(--brand-primary) 160px);
    --bg-table-th:       var(--brand-primary);                              /* brand header */

    --bg-form-label:     transparent;
    --bg-input:          var(--bg-panel-alt);
    --bg-input-focus:    var(--bg-panel);
    --bg-btn:            linear-gradient(180deg, var(--brand-primary-mid) 0%, var(--brand-primary) 100%);  /* brand button */
    --bg-btn-hover:      linear-gradient(180deg, var(--brand-primary-lt) 0%, var(--brand-primary-mid) 100%);
    --bg-statusbar:      var(--brand-primary);                              /* brand bar */
    --bg-toolbar:        var(--brand-primary);
    --bg-tile:           linear-gradient(180deg, color-mix(in srgb, #1a1a2e 88%, var(--brand-primary)) 0%, color-mix(in srgb, #0d1117 90%, var(--brand-primary)) 100%);
    --bg-progress:       var(--bg-panel-alt);
    --bg-codeblock:      var(--bg-page);
    --bg-pagefooter:     var(--bg-panel);

    /* Borders */
    --border-panel:      var(--brand-primary-border);
    --border-nav:        var(--brand-primary-border);
    --border-nav-section:var(--brand-primary-border);
    --border-table-th:   var(--brand-primary-border);

    --border-table-td:   var(--brand-primary-border);
    --border-form:       #2a2a3e;
    --border-input:      var(--brand-primary-border);
    --border-input-focus:var(--brand-primary-lt);                                            /* bright-blue focus ring */
    --border-btn:        var(--brand-primary-border);
    --border-statusbar:  var(--brand-primary-border);
    --border-subtab:     var(--brand-primary-border);

    /* Text */
    --text-primary:      #e0e0e0;
    --text-secondary:    #a8a8a8;
    --text-muted:        var(--text-secondary);
    --text-link:         var(--brand-primary-lt);
    --text-link-nav:     var(--brand-primary-lt);
    --text-th:           var(--text-primary);
    --text-form-label:   var(--text-secondary);
    --text-statusbar:    #e0e0e0;
    --text-tile-val:     color-mix(in srgb, var(--brand-primary-lt) 72%, #ffffff);
    --text-tile-lbl:     var(--text-secondary);
    --text-panel-title:  #e0e0e0;

    /* Brand */
    --brand-primary:      #121F57;                                           /* deep navy */
    --brand-primary-lt:   #3F6EB0;
    --brand-primary-dk:   #0a1240;
    --brand-primary-top:  #3F6EB0;
    /* Derived middle + border tones so a palette change cascades to the
       branded gradients/borders while the default Navy reproduces the
       original blues (#1a3a6b mid, #2c5ea0 border). */
    --brand-primary-mid:    color-mix(in srgb, var(--brand-primary) 68%, var(--brand-primary-lt));
    --brand-primary-border: color-mix(in srgb, var(--brand-primary) 40%, var(--brand-primary-lt));
    --text-brand:         color-mix(in srgb, var(--brand-primary-lt) 68%, #ffffff);   /* light brand headings */

    /* Status */
    --status-up:         #4ade80;                                            /* green */
    --status-down:       #f87171;                                            /* red */
    --status-warn:       #d4a017;
    --status-warn-text:  #e6b13f;

    /* Tags (semi-transparent on dark) */
    --tag-bg:            rgba(170, 170, 170, 0.12);
    --tag-fg:            #c8c8c8;
    --tag-bd:            rgba(170, 170, 170, 0.35);
    --tag-prod-bg:       rgba(240, 136, 62, 0.18);  --tag-prod-fg:    #f0883e;  --tag-prod-bd:    rgba(240, 136, 62, 0.45);
    --tag-nonprod-bg:    rgba(188, 140, 255, 0.18); --tag-nonprod-fg: #bc8cff;  --tag-nonprod-bd: rgba(188, 140, 255, 0.45);
    --tag-up-bg:         rgba(74, 222, 128, 0.20);  --tag-up-fg:      #4ade80;  --tag-up-bd:      rgba(74, 222, 128, 0.45);
    --tag-down-bg:       rgba(248, 113, 113, 0.20); --tag-down-fg:    #f87171;  --tag-down-bd:    rgba(248, 113, 113, 0.45);
    --tag-warn-bg:       rgba(210, 153, 34, 0.20);  --tag-warn-fg:    #e6b13f;  --tag-warn-bd:    rgba(210, 153, 34, 0.45);
    --tag-info-bg:       rgba(96, 165, 250, 0.18);  --tag-info-fg:    #60a5fa;  --tag-info-bd:    rgba(96, 165, 250, 0.45);
    --tag-orange-bg:     rgba(255, 122, 24, 0.20);  --tag-orange-fg:  #ff9d4d;  --tag-orange-bd:  rgba(255, 122, 24, 0.55);
}

* { box-sizing: border-box; }

body {
    font-family: Verdana, Tahoma, Arial, sans-serif;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-page);
    margin: 0; padding: 0;
    line-height: 1.4;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   Top header bar — SSL Monitor horizontal banner gradient
   ============================================================ */
.appliance-header {
    background: var(--bg-header);
    color: #fff;
    display: flex; align-items: stretch;

    height: 56px;
    /* HA pair lives in the header center section; the active card's
       `VIP: ...` chip floats at top:-10px. overflow:visible lets that
       chip extend above the header strip. */
    overflow: visible;
}
.appliance-header-logo {
    padding: 0 18px;
    display: flex; align-items: center; gap: 10px;
    border-right: 1px solid rgba(255,255,255,0.12);
    font-size: 18px; font-weight: 700;
    letter-spacing: 2px;
    background: linear-gradient(180deg, var(--brand-primary-lt) 0%, var(--brand-primary) 100%);
}
.appliance-header-logo i { font-size: 22px; }
.appliance-header-product {
    padding: 0 16px;
    display: flex;

    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    border-right: 1px solid rgba(255,255,255,0.12);
}
/* Center section of the top banner: live mini metric cards. Equal-width, share
   the middle, shrink to fit — the 56px header height is unchanged. */
.appliance-header-center { flex: 1 1 auto; min-width: 0; display: flex; gap: 5px; padding: 0 10px; align-items: center; justify-content: center; }
.appliance-header-center .ap-bmtile { flex: 0 1 117px; min-width: 0; height: 44px; box-sizing: border-box; padding: 3px 7px;
    display: flex; flex-direction: column; justify-content: center;
    background: var(--bg-tile); border: 1px solid var(--border-panel); border-radius: 5px; }
.appliance-header-center .ap-bmtile-top { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; }
.appliance-header-center .ap-bmtile-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .2px; color: #60a5fa;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appliance-header-center .ap-bmtile-val { font-size: 13px; font-weight: 600; line-height: 1.1; white-space: nowrap; color: #f0f6fc; }
.appliance-header-center .ap-bmtile svg { width: 100%; height: 13px; display: block; margin-top: 2px; }

.appliance-header-right {
    margin-left: auto;
    display: flex; align-items: center;
    flex-shrink: 0; white-space: nowrap;  /* never squeeze/wrap the Documentation + user widgets */
    padding: 0 12px;
    gap: 10px;

    border-left: 1px solid rgba(255,255,255,0.12);
}

.appliance-header-right a {
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    padding: 4px 8px;
    background: var(--bg-tile);
    border: 1px solid var(--border-btn);
    border-radius: 3px;
}
.appliance-header-right a:hover { background: var(--bg-panel-hover); border-color: var(--brand-primary-lt); text-decoration: none; }
.appliance-header-right .appliance-user {
    padding: 4px 10px;
    background: var(--bg-tile);
    border-radius: 3px;
    font-size: 13px;

    border: 1px solid var(--border-btn);
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}
.appliance-header-right .appliance-user:hover { background: var(--bg-panel-hover); border-color: var(--brand-primary-lt); }
/* border brightens + blue glow on hover, focus (clicked into), or press */
.appliance-header-right a:hover,
.appliance-header-right a:focus-visible,
.appliance-header-right a:active,
.appliance-header-right .appliance-user:hover,
.appliance-header-right .appliance-user:focus-visible,
.appliance-header-right .appliance-user:active {
    outline: none;
    border-color: var(--brand-primary-lt);
    animation: blue-glow-pulse 1.5s ease-in-out infinite;
}

.appliance-user-menu { position: relative; display: inline-block; }
/* #285: client IP shown directly BENEATH the user control (block after the
   button stacks under it), always visible in the banner, in cyan. */
.appliance-user-ip {

    color: #22d3ee;
    font-weight: 700;
    font-size: 13px; /* match the dropdown's action rows */
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    line-height: 1.2;
    padding: 8px 14px 6px;
    border-bottom: 1px solid var(--border-panel);
    margin-bottom: 4px;
    white-space: nowrap;
    text-align: center;
    cursor: default;
}
.appliance-user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    background: var(--bg-panel, #1a1a2e);
    border: 1px solid var(--border-color, var(--border-panel));
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    padding: 6px 0;
    margin-top: 4px;
    z-index: 1000;
}
.appliance-user-dropdown a {
    display: block;
    color: var(--text-primary, #ceeeff) !important;
    padding: 8px 14px;
    font-size: 13px;
    text-decoration: none;
}

.appliance-user-dropdown a {
    border: 1px solid transparent;
    border-radius: 3px;
    margin: 0 4px;
    transition: background 0.12s, color 0.12s;
}
.appliance-user-dropdown a:hover,
.appliance-user-dropdown a:focus,
.appliance-user-dropdown a:active {
    animation: blue-glow-pulse 1.5s ease-in-out infinite;
    outline: none;
    border-color: var(--brand-primary-lt);
    background: rgba(96, 165, 250, 0.08);
}

.appliance-user-dropdown a.appliance-danger {
    color: var(--status-down) !important;
}
.appliance-user-dropdown a.appliance-danger:hover,
.appliance-user-dropdown a.appliance-danger:focus,
.appliance-user-dropdown a.appliance-danger:active {
    animation: red-glow-pulse 1.5s ease-in-out infinite;
    background: #3d1a1a;
    color: #f87171 !important;
    border-color: #f87171;
}
.appliance-user-dropdown a.appliance-danger i { color: inherit; }
.appliance-theme-toggle {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    width: 28px; height: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
}
.appliance-theme-toggle:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); }

.appliance-ha-banner {
    flex: 1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 16px;
    font-size: 13px;
}
.appliance-ha-banner[hidden] { display: none; }
.appliance-ha-banner .appliance-ha-actions { display: flex; gap: 8px; }
.appliance-ha-banner .appliance-ha-actions .appliance-btn-sm {
    padding: 2px 8px;
    font-size: 11px;
}

/* Two-card HA pair embedded in the header. Cards are compact (header
   is 44px tall); the VIP chip floats above the active card and can
   extend out the top of the header thanks to .appliance-header overflow:visible. */
.appliance-ha-pair {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.appliance-banner-card {
    position: relative;
    display: inline-block;
    padding: 5px 14px;
    min-width: 130px;
    background: var(--bg-panel);
    border: 1px solid var(--brand-primary-lt);
    border-radius: 3px;
    text-align: center;
    color: var(--text-brand);
    font-weight: 700;
    /* transition: border-color only — never box-shadow. */
    transition: border-color 0.3s;
}
.appliance-banner-card .appliance-banner-card-name {
    font-weight: bold;
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    color: #fff;
    line-height: 1.2;
}
.appliance-banner-card .appliance-banner-card-role {
    margin-top: 2px;
    font-size: 11px;
    letter-spacing: 0.5px;
    opacity: 0.9;
}
/* Per-state variants — swap border color, glow keyframe, role text color.
   Animation timing matches the navbar's 1.5s ease-in-out infinite. */
.appliance-banner-card.active {
    border-color: #4ade80;
    animation: green-glow-pulse 1.5s ease-in-out infinite;
}
.appliance-banner-card.active .appliance-banner-card-role { color: #4ade80; }

.appliance-banner-card.standby {
    border-color: #6b7280;
    opacity: 0.85;
    /* No animation — passive node intentionally doesn't draw the eye. */
}
.appliance-banner-card.standby .appliance-banner-card-role { color: #9ca3af; }

.appliance-banner-card.down {
    border-color: #ef4444;
    animation: red-glow-pulse 1.5s ease-in-out infinite;
}
.appliance-banner-card.down .appliance-banner-card-role { color: #ef4444; }

.appliance-banner-card.diverged {
    border-color: #ef4444;
    animation: red-glow-pulse 1.5s ease-in-out infinite;
}
.appliance-banner-card.diverged .appliance-banner-card-role { color: #ef4444; }

.appliance-banner-card.authfail {
    border-color: #f59e0b;
    animation: yellow-glow-pulse 1.5s ease-in-out infinite;
}
.appliance-banner-card.authfail .appliance-banner-card-role { color: #fbbf24; }

.appliance-ha-node {
    position: relative;

    padding: 5px 14px;
    min-width: 130px;
    background: rgba(0,0,0,0.25);
    border-radius: 3px;
    text-align: center;

    transition: border-color 0.3s;
}
.appliance-ha-node .appliance-ha-node-name {
    font-weight: bold;
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    color: #fff;
    line-height: 1.2;
}
.appliance-ha-node .appliance-ha-node-role {
    margin-top: 2px;
    font-size: 11px;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.appliance-ha-node.down {
    border: 1px solid #ef4444;
    animation: red-glow-pulse 2s ease-in-out infinite;
}
.appliance-ha-node.down .appliance-ha-node-role { color: #ef4444; }

.appliance-ha-node.authfail {
    border: 1px solid #f59e0b;
    animation: yellow-glow-pulse 2s ease-in-out infinite;
}
.appliance-ha-node.authfail .appliance-ha-node-role { color: #fbbf24; }
.appliance-ha-node.active {
    border: 1px solid #4ade80;
    animation: green-glow-pulse 2s ease-in-out infinite;
}
.appliance-ha-node.active .appliance-ha-node-role { color: #4ade80; }
.appliance-ha-node.standby {
    border: 1px solid #6b7280;
    opacity: 0.85;
}
.appliance-ha-node.standby .appliance-ha-node-role { color: #9ca3af; }
.appliance-ha-node.diverged {
    border: 1px solid #ef4444;
    animation: red-glow-pulse 2s ease-in-out infinite;
}
.appliance-ha-node.diverged .appliance-ha-node-role { color: #ef4444; }
.appliance-ha-vip-tag {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #166534;
    color: #d1fae5;
    border: 1px solid #4ade80;
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 10px;
    font-family: var(--font-mono, monospace);
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.appliance-pending-banner {
    background: linear-gradient(180deg, #b8860b 0%, #8b6508 100%);
    color: #fff;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    border-bottom: 1px solid #6b5020;

    animation: yellow-glow-pulse 2s ease-in-out infinite;
}
.appliance-pending-banner[hidden] { display: none; }
.appliance-pending-banner .appliance-pending-msg { flex: 1; }
.appliance-pending-banner #appliance-pending-remaining { font-weight: 700; font-family: Consolas, monospace; }
.appliance-pending-banner .appliance-pending-actions { display: flex; gap: 8px; }

/* Sub-header status bar */
.appliance-statusbar {
    background: var(--bg-statusbar);
    border: 1px solid var(--border-statusbar);

    margin-top: 0;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--text-statusbar);
    display: flex; align-items: center; gap: 18px;
}
.appliance-statusbar .appliance-st-item { display: flex; align-items: center; gap: 5px; }
.appliance-statusbar .appliance-st-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block;
}
.appliance-statusbar .appliance-st-dot.up   { background: var(--status-up);   box-shadow: inset 0 0 2px rgba(0,0,0,0.3); }
.appliance-statusbar .appliance-st-dot.warn { background: var(--status-warn); box-shadow: inset 0 0 2px rgba(0,0,0,0.3); }
.appliance-statusbar .appliance-st-dot.down { background: var(--status-down); box-shadow: inset 0 0 2px rgba(0,0,0,0.3); }
.appliance-statusbar .appliance-spacer { flex: 1; }

.appliance-layout {
    display: flex;
    /* +30px for the top nav row between header and statusbar. */
    min-height: calc(100vh - 44px - 30px - 22px);
}
/* Legacy left-nav slot — applianceRenderChrome empties it; collapse to 0px
   so existing pages don't have an empty 200px gutter. Keeping the
   element in DOM avoids touching every HTML file. */
.appliance-nav:empty {
    display: none;
}
.appliance-nav {
    width: 200px;
    background: var(--bg-nav);
    border-right: 1px solid var(--border-nav);
    padding: 4px 0;
    font-size: 13px;
    flex-shrink: 0;
}

/* Top-level navigation row — one entry per page, replaces the nested
   left-nav structure that had 9 same-file sub-link duplicates. */
.appliance-topnav {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;

    background: var(--bg-subtabs);
    border-bottom: 1px solid var(--border-nav-section);

    padding: 6px 12px;
    font-size: 13px;
    /* Visible overflow lets the glow extend above + below the strip.
       flex-wrap above means narrow viewports get a second row instead
       of a scrollbar (we have 8 entries — fits on most monitors). */
    overflow: visible;
}
.appliance-topnav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 14px;
    font-size: 13px;

    color: var(--text-form-label);
    text-decoration: none;

    border-right: 1px solid var(--border-panel);
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.appliance-topnav-item:hover {

    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    text-decoration: none;
}
.appliance-topnav-item.active {

    background: var(--bg-panel);
    color: var(--text-brand);
    font-weight: 700;
}
.appliance-topnav-item i { font-size: 12px; opacity: 0.85; }
/* Colored (emoji) nav glyph — full-opacity so it stays vivid vs the
   monochrome FA fallback. */
.appliance-topnav-emoji { font-size: 14px; font-style: normal; line-height: 1; opacity: 1; }
/* Colored (emoji) sub-tab glyph — shared by every page's [data-subtabs] strip. */
.appliance-subtab-emoji { font-size: 13px; font-style: normal; line-height: 1; margin-right: 3px; }
.appliance-nav-section {
    background: var(--bg-nav-section);
    color: var(--text-primary);
    padding: 4px 10px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid var(--border-nav);
    border-bottom: 1px solid var(--border-nav-section);
    cursor: pointer;
    user-select: none;
    display: flex; align-items: center; justify-content: space-between;
}
.appliance-nav-section:first-child { border-top: none; }
.appliance-nav-section.collapsed .appliance-nav-caret { transform: rotate(-90deg); }
.appliance-nav-caret { font-size: 10px; transition: transform 0.15s; }
.appliance-nav-items { padding: 2px 0; }
.appliance-nav-section.collapsed + .appliance-nav-items { display: none; }
.appliance-nav-item {
    display: block;
    padding: 4px 14px 4px 20px;
    color: var(--text-link-nav);
    text-decoration: none;
    border-left: 3px solid transparent;
}
.appliance-nav-item:hover {
    background: var(--bg-nav-hover);
    text-decoration: none;
}
.appliance-nav-item.active {
    background: var(--brand-primary);
    color: #fff;
    border-left-color: var(--brand-primary-dk);
    font-weight: 700;
}
.appliance-nav-item.sub { padding-left: 32px; font-size: 12px; }

/* ============================================================
   Main content area
   ============================================================ */
.appliance-main {
    flex: 1;
    padding: 12px 14px;
    background: var(--bg-panel);
    min-width: 0;
}

.appliance-page-title {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-brand);
    border-bottom: 2px solid var(--text-brand);
    padding-bottom: 6px;
    margin: 0 0 12px 0;
    display: flex; align-items: center; justify-content: space-between;
}
.appliance-page-title-actions { display: flex; gap: 6px; align-items: center; }

/* ============================================================
   Panels
   ============================================================ */
.appliance-panel {

    background: var(--bg-tile);
    border: 1px solid var(--border-panel);
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.28), 0 6px 16px rgba(0,0,0,0.16);
    margin-bottom: 12px;
}
.appliance-panel-title {
    background: var(--bg-panel-title);
    border-bottom: 1px solid var(--border-panel);
    border-radius: 6px 6px 0 0;
    padding: 4px 10px;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-panel-title);
    display: flex; align-items: center; justify-content: space-between;
}
.appliance-panel-title-actions { display: flex; gap: 4px; align-items: center; }
.appliance-panel-body { padding: 8px 10px; }

/* ============================================================
   Tables
   ============================================================ */
.appliance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.appliance-table th {
    background: var(--bg-table-th);
    color: var(--text-th);
    text-align: center !important;
    padding: 4px 6px;
    font-weight: 700;
    border: 1px solid var(--border-table-th);
    font-size: 12px;

    cursor: pointer;
    user-select: none;
}
.appliance-table th:hover {
    filter: brightness(1.15);
}
.appliance-table[data-no-sort] th,
.appliance-table th[data-no-sort] {
    cursor: default;
    user-select: auto;
}
.appliance-table[data-no-sort] th:hover,
.appliance-table th[data-no-sort]:hover {
    filter: none;
}
/* Per-VS Content Rules table: header row uses the same blue as the panel title
   bar, and the "This VS" action column is wide enough that the Enable all /
   Disable all button never wraps. */
.appliance-vs-cr-tbl th { background: var(--bg-panel-title); }
.appliance-vs-cr-tbl th:last-child { white-space: nowrap; min-width: 120px; }
#appliance-vs-cr-all-wrap button { white-space: nowrap; }
.appliance-table td {
    text-align: center !important;
    padding: 3px 6px;
    border: 1px solid var(--border-table-td);
    background: var(--bg-panel);
    vertical-align: middle;
    color: var(--text-primary);
}
.appliance-table tbody tr:nth-child(even) td { background: var(--bg-panel-alt); }

.appliance-table .appliance-mono { font-family: Consolas, "Courier New", monospace; font-size: 13px; }

.appliance-table-scroll {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.appliance-table-compact th,
.appliance-table-compact td {
    padding: 2px 5px;
    font-size: 11.5px;
    white-space: nowrap;
}
.appliance-table-compact td.appliance-mono { font-size: 11px; }
.appliance-table.tight td, .appliance-table.tight th { padding: 2px 5px; }
.appliance-table .appliance-right { text-align: right; }
.appliance-table .appliance-center { text-align: center; }

.appliance-table .appliance-shrink { width: 1%; white-space: nowrap; }

/* ============================================================
   Forms
   ============================================================ */
.appliance-form-table { width: 100%; border-collapse: collapse; }
.appliance-form-table tr { border-bottom: 1px dotted var(--border-form); }
.appliance-form-table tr:last-child { border-bottom: none; }
.appliance-form-table td {
    padding: 4px 8px;
    vertical-align: middle;
}
.appliance-form-table td.appliance-label {

    width: 140px;
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    color: var(--text-form-label);
    background: var(--bg-form-label);
}
.appliance-form-table td.appliance-hint {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.appliance-form-stacked {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.appliance-form-stacked > .appliance-label {
    text-align: left;
    background: transparent;
    padding: 0;
    font-weight: 700;
    color: var(--text-form-label);

    margin-top: 24px;
}
.appliance-form-stacked > .appliance-label:first-child { margin-top: 0; }
.appliance-form-stacked > .appliance-hint {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 4px;
}
.appliance-form-stacked > .appliance-input,
.appliance-form-stacked > .appliance-textarea,
.appliance-form-stacked > .appliance-select {
    width: 100%;
    max-width: 480px;
}

.appliance-form-stacked-actions {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    /* status text on the left (if present), button(s) on the right */
    justify-content: flex-end;
}
.appliance-form-stacked-actions > .appliance-muted,
.appliance-form-stacked-actions > .appliance-status-text {
    margin-right: auto; /* push status text to the left edge */
    margin-left: 0;     /* override any inline margin-left:10px legacy */
}
.appliance-input, .appliance-select, .appliance-textarea {
    border: 1px solid var(--border-input);
    background: var(--bg-input);
    padding: 2px 4px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-primary);
    box-shadow: inset 1px 1px 1px rgba(0,0,0,0.07);
}
.appliance-input:focus, .appliance-select:focus, .appliance-textarea:focus {
    outline: none;
    border-color: var(--border-input-focus);
    background: var(--bg-input-focus);
}

.appliance-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 6px;
}
.appliance-select::-ms-expand { display: none; }
.appliance-input.appliance-mono { font-family: Consolas, "Courier New", monospace; }
.appliance-input.narrow { width: 80px; }
.appliance-input.medium { width: 200px; }
.appliance-input.wide { width: 360px; }
.appliance-input.full { width: 100%; }
.appliance-textarea { width: 100%; height: 60px; font-family: Consolas, "Courier New", monospace; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ============================================================
   Buttons
   ============================================================ */

.appliance-btn {
    background: var(--bg-tile);
    border: 1px solid var(--border-btn);
    color: var(--text-primary);
    padding: 2px 10px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 2px;
    min-height: 22px;
    line-height: 1.2;
}
.appliance-btn:hover { background: var(--bg-panel-hover); border-color: var(--brand-primary-lt); }
/* Border + glow when clicked into (focus) or pressed (active). */
.appliance-btn:focus-visible,
.appliance-btn:active {
    outline: none;
    border-color: var(--brand-primary-lt);
    animation: blue-glow-pulse 1.5s ease-in-out infinite;
}
.appliance-btn.appliance-btn-primary {
    background: linear-gradient(180deg, var(--brand-primary-lt) 0%, var(--brand-primary) 100%);
    color: #fff; border-color: var(--brand-primary-dk);
}
.appliance-btn.appliance-btn-primary:hover { background: linear-gradient(180deg, #2f7ac4 0%, var(--brand-primary-top) 100%); }
.appliance-btn.appliance-btn-sm { padding: 1px 6px; font-size: 12px; min-height: 18px; }
.appliance-btn.appliance-btn-danger { color: var(--status-down); }
.appliance-btn.appliance-btn-danger:hover { background: var(--status-down); color: #fff; border-color: var(--status-down); }

.appliance-btn-group { display: inline-flex; gap: 4px; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.appliance-btn-group .appliance-btn { text-decoration: none; }

/* Backend-server list (per-VS pool, shown inline in the VS list table) */
.appliance-backend-list {
    display: flex; flex-direction: column;
    gap: 2px;
    font-size: 12px;
    line-height: 1.35;
    font-family: Consolas, "Courier New", monospace;
}
.appliance-backend-list > div { white-space: nowrap; }
.appliance-backend-list .up   i { color: var(--status-up);   margin-right: 5px; }
.appliance-backend-list .down i { color: var(--status-down); margin-right: 5px; }
.appliance-btn-set {
    background: var(--bg-btn);
    border: 1px solid var(--border-btn); padding: 1px 8px; font-size: 12px; cursor: pointer;
    color: var(--text-primary);
    transition: background 0.12s, border-color 0.12s;
}

.appliance-btn-set:hover,
.appliance-btn-set:focus {
    animation: blue-glow-pulse 1.5s ease-in-out infinite;
    outline: none;
    border-color: var(--brand-primary-lt);
    background: var(--bg-btn-hover);
    color: #ffffff;
}

/* ============================================================
   Status indicators
   ============================================================ */
.appliance-status {
    display: inline-block;
    width: 10px; height: 10px;
    border: 1px solid rgba(0,0,0,0.4);
    vertical-align: middle;
    margin-right: 4px;
    box-shadow: inset -1px -1px 1px rgba(0,0,0,0.15);
}
.appliance-status.up       { background: var(--status-up); }
.appliance-status.down     { background: var(--status-down); }
.appliance-status.warn     { background: var(--status-warn); }
.appliance-status.unknown  { background: var(--text-muted); }
.appliance-status.disabled { background: #ccc; }

.appliance-text-success { color: var(--status-up);        font-weight: 600; }
.appliance-text-warn    { color: var(--status-warn-text); font-weight: 600; }
.appliance-text-danger  { color: var(--status-down);      font-weight: 600; }

.appliance-status-text {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.appliance-status-text.up   { color: var(--status-up); }
.appliance-status-text.down { color: var(--status-down); }
.appliance-status-text.warn { color: var(--status-warn-text); }

/* Inline set-row */
.appliance-set-row { display: flex; align-items: center; gap: 6px; }

/* ============================================================
   Misc
   ============================================================ */
.appliance-muted { color: var(--text-muted); }
.appliance-mono  { font-family: Consolas, "Courier New", monospace; font-size: 13px; }
/* #201: bundled country flags (flag-icons). flag-icons.min.css sizes/draws .fi; here we only add
   alignment with adjacent text + a hairline edge so white flags (e.g. JP) read on a light panel. */
.fi { vertical-align: -0.12em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.10); }
.appliance-tag {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--tag-bd);
    background: var(--tag-bg);
    font-size: 12px;
    font-weight: 700;
    color: var(--tag-fg);
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
/* [hidden] must actually hide a tag. The author .appliance-tag display rule
   beats the UA-stylesheet [hidden]{display:none} (author origin wins), so
   `el.hidden = true` was a visual no-op — the ENCRYPTED badges (Time/NTP,
   Logging, Email) stayed shown. This restores [hidden] for all tag badges. */
.appliance-tag[hidden] { display: none !important; }
.appliance-tag.prod    { background: var(--tag-prod-bg);    color: var(--tag-prod-fg);    border-color: var(--tag-prod-bd); }
.appliance-tag.nonprod { background: var(--tag-nonprod-bg); color: var(--tag-nonprod-fg); border-color: var(--tag-nonprod-bd); }
.appliance-tag.up      { background: var(--tag-up-bg);      color: var(--tag-up-fg);      border-color: var(--tag-up-bd); }
.appliance-tag.down    { background: var(--tag-down-bg);    color: var(--tag-down-fg);    border-color: var(--tag-down-bd); }
.appliance-tag.warn    { background: var(--tag-warn-bg);    color: var(--tag-warn-fg);    border-color: var(--tag-warn-bd); }
.appliance-tag.info    { background: var(--tag-info-bg);    color: var(--tag-info-fg);    border-color: var(--tag-info-bd); }
.appliance-tag.orange  { background: var(--tag-orange-bg);  color: var(--tag-orange-fg);  border-color: var(--tag-orange-bd); }

.appliance-tag.ha-active { border-color: var(--status-up); }

.appliance-footer {
    background: var(--bg-statusbar);
    border-top: 1px solid var(--border-statusbar);
    padding: 4px 12px;
    font-size: 12px;
    color: var(--text-statusbar);
    text-align: center;
}

/* Grids */
.appliance-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.appliance-kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}

/* The partner panel inline style="display:flex" wins over the browser's
   default `[hidden] { display: none }` due to inline-style specificity,
   so the explicit-rule + !important is required to force it back to
   none when the JS gate sets the attribute. */
#si-peer-panel[hidden] { display: none !important; }

/* The Home System Information + Partner panels use shared column
   width / nowrap / ellipsis rules. Same SPA-nav-survival reason. */
table.appliance-form-table:has(#si-host) td:nth-child(2),
table.appliance-form-table:has(#si-host) td:nth-child(3),
table.appliance-form-table:has(#pi-host) td:nth-child(2),
table.appliance-form-table:has(#pi-host) td:nth-child(3) { white-space: nowrap; }
table.appliance-form-table:has(#si-host),
table.appliance-form-table:has(#pi-host) {
    table-layout: fixed;
    width: 100%;
}
/* #116: the Interfaces table flexes/auto-sizes to fill its panel like the
   Network Settings form-table above it (percentage <th> widths drive the
   column layout; inputs are box-sizing:border-box at width:100%). */
#appliance-netcfg-iface-table{table-layout:fixed;}
table.appliance-form-table:has(#si-host) td:nth-child(3),
table.appliance-form-table:has(#pi-host) td:nth-child(3) {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The Partner card was removed with the HA subsystem, so #si-grid now holds
   only the System Information panel — center it instead of leaving it stuck
   in the left half of the 2-column grid. */
#si-grid {
    grid-template-columns: 50%;
    justify-content: center;
}
.appliance-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.appliance-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 12px;
    justify-content: start;
}

/* KPI tile */
.appliance-tile {
    border: 1px solid var(--border-panel);
    background: var(--bg-tile);

    padding: 5px 8px;
    display: flex; align-items: center; gap: 8px;
}
.appliance-tile-icon {

    width: 28px; height: 28px;
    background: linear-gradient(180deg, var(--brand-primary-top) 0%, var(--brand-primary) 100%);
    color: #fff;
    border: 1px solid var(--brand-primary-dk);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}

.appliance-tile-val { font-size: 18px; font-weight: 700; color: var(--text-tile-val); }
.appliance-tile-lbl { font-size: 11px; color: var(--text-tile-lbl); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700; }

/* Filter row */
.appliance-filter-row {
    display: flex; gap: 0; border-bottom: 1px solid var(--border-panel);
    margin-bottom: 8px; background: var(--bg-panel-title);
}
.appliance-filter-tab {
    padding: 4px 12px;
    border-right: 1px solid var(--border-panel);
    cursor: pointer;
    font-size: 13px;
    color: var(--text-link);
}
.appliance-filter-tab:hover { background: var(--bg-panel); }
.appliance-filter-tab.active {
    background: var(--bg-panel);
    color: var(--text-brand);
    font-weight: 700;
    border-bottom: 2px solid var(--text-brand);
    margin-bottom: -1px;
}
.appliance-filter-count {
    display: inline-block;
    background: var(--bg-nav-section);
    color: var(--text-primary);
    padding: 0 5px;
    border-radius: 8px;
    font-size: 11px;
    margin-left: 4px;
    font-weight: 700;
}
.appliance-filter-tab.active .appliance-filter-count { background: var(--brand-primary); color: #fff; }

/* Toolbar */
.appliance-toolbar {
    background: var(--bg-toolbar);
    border: 1px solid var(--border-panel);
    border-bottom: none;
    padding: 4px 8px;
    display: flex; align-items: center; gap: 6px;
}
.appliance-toolbar .appliance-spacer { flex: 1; }

.appliance-toolbar:has(.appliance-search) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
}
.appliance-toolbar:has(.appliance-search) .appliance-search {
    min-width: 280px;
}
.appliance-toolbar:has(.appliance-search) > :last-child:not(.appliance-search) {
    color: var(--text-primary);
    white-space: nowrap;
}

.appliance-toolbar .appliance-search,
.appliance-search {

    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border-input);
    background: var(--bg-input);
    color: var(--text-primary);
    padding: 2px 6px;
    font-family: inherit; /* v0.59.15: inputs defaulted to Arial — inherit the app font */
    font-size: 13.5px;
    width: 200px;
}
/* count span next to an .appliance-search matches the search typography */
.appliance-toolbar:has(.appliance-search) > :last-child:not(.appliance-search) {
    font-family: inherit;
    font-size: 13.5px;
}
.appliance-search:focus {
    outline: none;
    border-color: var(--border-input-focus);
    background: var(--bg-input-focus);
}

.appliance-subtab-host:empty {
    display: none;
}
.appliance-subtab-host .appliance-subtabs {
    /* Override the border-top of the in-page strip so the lift-into-
       chrome strip is visually contiguous with .appliance-topnav above it. */
    border-top: 0;
}

/* Sub-tabs */
.appliance-subtabs {
    display: flex; gap: 0;
    background: var(--bg-subtabs);
    border: 1px solid var(--border-subtab);
    border-bottom: 1px solid var(--border-panel);
    margin-bottom: 0;

    padding: 0 12px;
}
.appliance-subtab {
    padding: 5px 14px;
    border-right: 1px solid var(--border-panel);
    cursor: pointer;
    font-size: 13px;
    color: var(--text-form-label);
    background: transparent;
}
.appliance-subtab:hover { background: rgba(255,255,255,0.06); }
.appliance-subtab.active {
    background: var(--bg-panel);
    color: var(--text-brand);
    font-weight: 700;
    border-bottom: 1px solid var(--bg-panel);
    margin-bottom: -1px;
}

/* In-panel namespaced cert sub-tabs (System ▸ Certificates). Same look as
   .appliance-subtab; renamed class so the inner strip can't ride System's
   global .appliance-subtab dispatch (shared "notif" target would collide). */
.appliance-cert-subtab {
    padding: 5px 14px;
    border-right: 1px solid var(--border-panel);
    cursor: pointer;
    font-size: 13px;
    color: var(--text-form-label);
    background: transparent;
}
.appliance-cert-subtab:hover { background: rgba(255,255,255,0.06); }
.appliance-cert-subtab.active {
    background: var(--bg-panel);
    color: var(--text-brand);
    font-weight: 700;
    border-bottom: 1px solid var(--bg-panel);
    margin-bottom: -1px;
}

/* Code/pre blocks */
pre.appliance-mono,
pre {
    background: var(--bg-codeblock) !important;
    border-color: var(--border-panel) !important;
    color: var(--text-primary);
}

/* Scrollbars */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--brand-primary); border-radius: 6px; border: 2px solid var(--bg-page); }
::-webkit-scrollbar-thumb:hover { background: var(--brand-primary-lt); }

/* ============================================================
   Modals
   ------------------------------------------------------------
   Used by certificates.html, users.html, content-rules.html,
   crowdsec.html (and as a no-op for virtual-services.html which
   has its own inline copy of these rules — VS's inline <style>
   wins by cascade order since it loads after this file).
   Without these rules, modals render INLINE on every page that
   doesn't ship its own copy, polluting the page with stacked
   form blobs that look like "broken sections".
   ============================================================ */

.appliance-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #1a4d8f;
    color: #fff;
    padding: 12px 20px;
    border-radius: 4px;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.appliance-toast-err { background: #c62828; }
.appliance-empty {
    padding: 12px;
    text-align: center;
    color: #888;
}
.appliance-error {
    color: #c62828;
    padding: 20px;
    font-weight: 600;
}

.appliance-fieldset {
    border: 1px solid var(--border-form);
    background: var(--bg-panel-alt);
    padding: 8px 10px;
    margin: 8px 0;
}
.appliance-fieldset > legend {
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-form-label);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.appliance-fieldset label {
    display: inline-block;
    margin-right: 16px;
    font-size: 13px;
    color: var(--text-primary);
}
.appliance-fieldset label input[type="radio"] {
    margin-right: 4px;
    vertical-align: middle;
}
.appliance-fieldset input[type="radio"]:disabled { opacity: 0.55; cursor: not-allowed; }
.appliance-fieldset input[type="radio"]:disabled + * { opacity: 0.55; }
.appliance-fieldset .appliance-hint { margin: 6px 0 0 0; }

.appliance-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 4px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    border: 1px solid var(--tag-bd);
    background: var(--tag-bg);
    color: var(--tag-fg);
    border-radius: 2px;
    vertical-align: middle;
}
.appliance-badge-h { /* HTTP-01 — neutral gray (inherits .appliance-badge defaults) */ }
.appliance-badge-d {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary-dk);
}

.appliance-op-panel { margin-top: 16px; }
.appliance-op-panel .appliance-panel-body { padding: 12px; }
.appliance-op-panel .appliance-form-actions { margin-top: 10px; }

.appliance-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 0 12px 12px 12px;
}
.appliance-op-status { font-family: Consolas, "Courier New", monospace; font-size: 12px; margin-left: 10px; }

.appliance-panel.appliance-disabled .appliance-panel-title { opacity: 0.65; }
.appliance-panel.appliance-disabled .appliance-panel-body  { opacity: 0.65; }
/* #118: dim a bare form (the HA Configuration form is not a panel-body) when
   its controls are disabled because the node isn't paired / HA is off. */
form.appliance-disabled{opacity:.55;}

.appliance-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}
.appliance-modal.appliance-show {
    display: flex;
    align-items: center;
    justify-content: center;
}
.appliance-modal-content,
.appliance-modal-body {
    background: var(--bg-panel);
    color: var(--text-primary);
    padding: 24px;
    border-radius: 6px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid var(--border-panel, #b8b8b8);
}
.appliance-modal-content h2, .appliance-modal-content h3,
.appliance-modal-body    h2, .appliance-modal-body    h3 { margin-top: 0; }
.appliance-modal-actions,
.appliance-modal-footer  { margin-top: 16px; text-align: right; }
.appliance-modal-header  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.appliance-modal-close   { background: transparent; border: 0; font-size: 24px; cursor: pointer; color: var(--text-primary); line-height: 1; padding: 0 4px; }

/* ============================================================
   SSL Monitor signature effects
   ------------------------------------------------------------
   - Blue/red/green glow-pulse keyframes (animated box-shadow)
   - Applied to button states, version pill, input focus
   - Theme toggle hidden (we are dark-only as of v1.4.4)
   ============================================================ */

@keyframes blue-glow-pulse {
    0%, 100% { box-shadow: 0 0 9px 3px color-mix(in srgb, var(--brand-primary-lt) 80%, transparent); }
    50%      { box-shadow: 0 0 20px 7px color-mix(in srgb, var(--brand-primary-lt) 100%, transparent); }
}
@keyframes red-glow-pulse {
    0%, 100% { box-shadow: 0 0 5px 2px rgba(248, 113, 113, 0.6); }
    50%      { box-shadow: 0 0 10px 4px rgba(248, 113, 113, 0.8); }
}
@keyframes green-glow-pulse {
    0%, 100% { box-shadow: 0 0 5px 2px rgba(74, 222, 128, 0.6); }
    50%      { box-shadow: 0 0 10px 4px rgba(74, 222, 128, 0.8); }
}
@keyframes yellow-glow-pulse {
    0%, 100% { box-shadow: 0 0 5px 2px rgba(230, 177, 63, 0.6); }
    50%      { box-shadow: 0 0 10px 4px rgba(230, 177, 63, 0.8); }
}
/* Buttons — pulse on hover/focus/active.
   Generic (neutral) buttons glow blue. Scoped with :not() so green
   (primary/success) and red (danger) variants keep their own color
   instead of flashing blue mid-click. */
.appliance-btn:not(.appliance-btn-primary):not(.appliance-btn-success):not(.appliance-btn-warning):not(.appliance-btn-danger):hover,
.appliance-btn:not(.appliance-btn-primary):not(.appliance-btn-success):not(.appliance-btn-warning):not(.appliance-btn-danger):focus,
.appliance-btn:not(.appliance-btn-primary):not(.appliance-btn-success):not(.appliance-btn-warning):not(.appliance-btn-danger):active {
    animation: blue-glow-pulse 1.5s ease-in-out infinite;
    outline: none;
    border-color: var(--brand-primary-lt);
    color: #ffffff;
}

/* Green (primary / success) — stay green, intensify on interaction. */
.appliance-btn.appliance-btn-primary,
.appliance-btn.appliance-btn-success {
    background: linear-gradient(180deg, #2d8a4a 0%, #1f5e34 100%);
    color: #ffffff;
    border-color: #4ade80;
}
.appliance-btn.appliance-btn-primary:hover,
.appliance-btn.appliance-btn-primary:focus,
.appliance-btn.appliance-btn-success:hover,
.appliance-btn.appliance-btn-success:focus {
    animation: green-glow-pulse 1.5s ease-in-out infinite;
    background: linear-gradient(180deg, #3da55c 0%, #2d8a4a 100%);
    border-color: #4ade80;
    color: #ffffff;
    outline: none;
}
.appliance-btn.appliance-btn-primary:active,
.appliance-btn.appliance-btn-success:active {
    /* Brightest green on click — same hue, more saturation. */
    background: linear-gradient(180deg, #4ade80 0%, #2d8a4a 100%);
    border-color: #86efac;
    color: #ffffff;
    outline: none;
}

/* Yellow (warning) — caution actions like "Disable", "Pause", "Drain".
   Pair with appliance-btn-success: enable=green, disable=yellow. */
.appliance-btn.appliance-btn-warning {

    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    color: #000000;
    border-color: #fcd34d;
}
.appliance-btn.appliance-btn-warning:hover,
.appliance-btn.appliance-btn-warning:focus {
    animation: yellow-glow-pulse 1.5s ease-in-out infinite;
    background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 100%);
    border-color: #fde047;
    color: #000000;
    outline: none;
}
.appliance-btn.appliance-btn-warning:active {

    background: linear-gradient(180deg, #fde047 0%, #facc15 100%);
    border-color: #fef08a;
    color: #000000;
    outline: none;
}

.appliance-btn.appliance-btn-info {
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
    color: #ffffff;
    border-color: var(--brand-primary-lt);
}
.appliance-btn.appliance-btn-info:hover,
.appliance-btn.appliance-btn-info:focus {
    background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
    border-color: #93c5fd;
    color: #ffffff;
    outline: none;
}
.appliance-btn.appliance-btn-info:active {
    background: linear-gradient(180deg, #93c5fd 0%, #2563eb 100%);
    border-color: #bfdbfe;
    color: #ffffff;
    outline: none;
}

/* Red (danger) — stay red, intensify on interaction. */
.appliance-btn.appliance-btn-danger:hover,
.appliance-btn.appliance-btn-danger:focus,
.appliance-btn.appliance-btn-danger:active {
    animation: red-glow-pulse 1.5s ease-in-out infinite;
    background: #3d1a1a;
    color: #f87171;
    border-color: #f87171;
    outline: none;
}

/* Input focus — animated bright blue glow pulse */
.appliance-input:focus,
.appliance-select:focus,
.appliance-textarea:focus,
input:focus,
select:focus,
textarea:focus {
    animation: blue-glow-pulse 1.5s ease-in-out infinite;
    outline: none;
    border-color: var(--brand-primary-lt);
}

/* Version pill — steady blue glow in the header */
#appliance-version {
    display: inline-block;
    padding: 1px 8px;
    margin-left: 4px;
    border: 1px solid var(--brand-primary-lt);
    border-radius: 10px;
    background: rgba(96, 165, 250, 0.12);
    color: #ceeeff;
    font-weight: 700;
    font-size: 12px;
    animation: blue-glow-pulse 2s ease-in-out infinite;
}

.appliance-nav-item:hover,
.appliance-nav-item.active,
.appliance-filter-tab:hover,
.appliance-filter-tab.active,
.appliance-subtab:hover,
.appliance-subtab.active,
.appliance-topnav-item:hover,
.appliance-topnav-item.active {
    animation: blue-glow-pulse 1.5s ease-in-out infinite;
    outline: none;
    border-color: var(--brand-primary-lt);
}

/* Table cell text in light cyan (SSL Monitor signature) */
.appliance-table td { color: #ceeeff; }
/* Table rows derive from the single surface token (--bg-tile) instead of the
   old hardcoded grays (#1f2023/#292a2b) that made every table read as a
   different color from the navy panels. One dynamic control now. */
.appliance-table tbody tr:nth-child(odd) td  { background: var(--bg-tile); }
.appliance-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-tile) 94%, #ffffff); }
.appliance-table th { color: #e0e0e0; }

/* Hide the legacy theme toggle — dark-only as of v1.4.4 */
.appliance-theme-toggle { display: none !important; }

/* Headings get the SSL Monitor light-blue */
h1, h2, h3, h4, h5 { color: var(--text-brand); }
.appliance-page-title { color: var(--text-brand); border-bottom-color: var(--text-brand); }

/* Alert blocks (success/error) get SSL Monitor dark-tinted bg */
.appliance-alert,
.appliance-alert-success { background: #1a3d2e; color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.45); padding: 6px 10px; border-radius: 3px; }
.appliance-alert-error,
.appliance-alert-danger  { background: #3d1a1a; color: #f87171; border: 1px solid rgba(248, 113, 113, 0.45); padding: 6px 10px; border-radius: 3px; }

.cluster-network-section { margin-top: 20px; }
.cluster-network-section h2 { margin-bottom: 12px; }
.cluster-iface-box {
    display: flex; flex-direction: column; gap: 8px;
    border: 1px solid var(--border-color, #444);
    border-radius: 4px; padding: 12px; margin-bottom: 12px;
    background: var(--bg-panel, #1e1e22);
}
.iface-header { display: flex; align-items: center; gap: 10px; }
.iface-header h3 { margin: 0; flex: 1; }
.iface-fields { display: flex; flex-direction: column; gap: 6px; }
.iface-fields label { display: flex; align-items: center; gap: 8px; }
.iface-vips { font-size: 13px; color: var(--text-muted, #aaa); margin-top: 4px; }
.iface-vips ul { margin: 4px 0 4px 16px; padding: 0; }
.mgmt-badge {
    display: inline-block; background: #1a3d5c; color: #7dd3fc;
    border: 1px solid #38bdf8; border-radius: 3px;
    padding: 1px 5px; font-size: 11px; font-weight: 600; vertical-align: middle;
}
.warn-badge {
    color: #e6b13f; font-size: 12px; padding: 2px 0;
}
.peer-ok    { color: #4ade80; font-size: 12px; }
.peer-missing { color: #f87171; font-size: 12px; }
.peer-unknown { color: #9ca3af; font-size: 12px; }
.cluster-add-iface-row {
    display: block; width: 100%; text-align: left;
    padding: 8px 10px; margin-bottom: 4px; cursor: pointer;
    background: var(--bg-panel, #1e1e22); border: 1px solid #444;
    border-radius: 3px; color: inherit;
}
.cluster-add-iface-row:hover { background: #2a2a30; }
.import-banner-content {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 12px; background: #2a2a1a; border: 1px solid #e6b13f;
    border-radius: 4px; margin-bottom: 12px;
}

.cluster-preimport-banner {
    padding: 8px 12px; background: #2a2a1a; border: 1px solid #e6b13f;
    border-radius: 4px; margin-bottom: 12px;
}
.cluster-iface-box-preimport {
    opacity: 0.85;
}
.preimport-pill {
    background: #444; color: #ccc;
    padding: 2px 8px; border-radius: 4px; font-size: 11px;
}

/* Wraps the page <h1> title so #appliance-page-flash can sit
   absolutely-centered on the same horizontal line as the title. */
.appliance-page-title-row {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 36px;
}
/* Centered transient flash + persistent unsaved-changes banner.
   Same element, different content/color depending on state. The
   appliancePageFlash / applianceShowUnsaved helpers in appliance.js
   drive background + opacity inline. */
#appliance-page-flash {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: none;
    z-index: 5;
}
/* Orange outline on any form field whose current value differs from
   the dataset.painted baseline. Applied via applianceWireDirtyForm. */
.appliance-dirty {
    outline: 2px solid #bf8700 !important;
    outline-offset: 1px;
}

/* ============================================================
   Appearance options (opt-in, per-browser). Defaults are unchanged:
   no data-layout   -> horizontal top nav (current)
   no data-theme    -> dark (current)
   no data-palette  -> navy brand (current)
   Set by the header Appearance popover (assets/appliance.js) and
   persisted in localStorage; applied to <html> on every page load.
   ============================================================ */

/* ---- Light mode: real light palette (was aliased to dark) ---- */
html[data-theme="light"] {
    --bg-page:           #eef1f6;
    --bg-nav:            #e7ecf4;
    --bg-panel:          #ffffff;
    --bg-panel-alt:      #f2f5fa;
    --bg-panel-hover:    #e6ecf6;
    /* Light mode changes only the CONTENT area; the header + top nav stay
       branded so the selected theme colour still shows in light mode. */
    --text-primary:      #1b2431;
    --text-secondary:    #566072;
    --border-panel:      #c7d2e2;
    --border-nav:        #c7d2e2;
    --border-nav-section:#c7d2e2;
    --text-brand: var(--brand-primary);
    color-scheme: light;
}
html[data-theme="light"] body { background: var(--bg-page); }

/* ---- Preset color themes (override the brand vars; work in light+dark) ---- */
/* Restored single-hue accent palettes. Selectable via the appearance picker as
   data-theme-name entries (accent-only: they override only the --brand-primary*
   vars, so the Default background + Light/Dark toggle stay put — no bleed). The
   data-palette selector is retained for backward compatibility. */
html[data-palette="slate"],   html[data-theme-name="slate"]   { --brand-primary:#334155; --brand-primary-lt:#64748b; --brand-primary-dk:#1e293b; --brand-primary-top:#64748b; }
html[data-palette="emerald"], html[data-theme-name="emerald"] { --brand-primary:#065f46; --brand-primary-lt:#10b981; --brand-primary-dk:#043d2e; --brand-primary-top:#10b981; }
html[data-palette="teal"],    html[data-theme-name="teal"]    { --brand-primary:#0f766e; --brand-primary-lt:#14b8a6; --brand-primary-dk:#083f3a; --brand-primary-top:#14b8a6; }
html[data-palette="purple"],  html[data-theme-name="purple"]  { --brand-primary:#4c1d95; --brand-primary-lt:#8b5cf6; --brand-primary-dk:#2e1065; --brand-primary-top:#8b5cf6; }
html[data-palette="crimson"], html[data-theme-name="crimson"] { --brand-primary:#7f1d1d; --brand-primary-lt:#ef4444; --brand-primary-dk:#4c0f0f; --brand-primary-top:#ef4444; }
html[data-palette="amber"],   html[data-theme-name="amber"]   { --brand-primary:#78350f; --brand-primary-lt:#f59e0b; --brand-primary-dk:#451a03; --brand-primary-top:#f59e0b; }
html[data-palette="indigo"],  html[data-theme-name="indigo"]  { --brand-primary:#3730a3; --brand-primary-lt:#818cf8; --brand-primary-dk:#1e1b4b; --brand-primary-top:#818cf8; }
html[data-palette="rose"],    html[data-theme-name="rose"]    { --brand-primary:#9f1239; --brand-primary-lt:#fb7185; --brand-primary-dk:#5f0f24; --brand-primary-top:#fb7185; }
html[data-palette="cyan"],    html[data-theme-name="cyan"]    { --brand-primary:#0e7490; --brand-primary-lt:#22d3ee; --brand-primary-dk:#083344; --brand-primary-top:#22d3ee; }
html[data-palette="slate"],   html[data-palette="emerald"], html[data-palette="teal"],
html[data-palette="purple"],  html[data-palette="crimson"], html[data-palette="amber"],
html[data-theme-name="slate"],  html[data-theme-name="emerald"], html[data-theme-name="teal"],
html[data-theme-name="purple"], html[data-theme-name="crimson"], html[data-theme-name="amber"] {
    --bg-panel-title: linear-gradient(180deg, var(--brand-primary-lt) 0%, var(--brand-primary) 100%);
}
/* Custom accent: --appliance-accent is set inline on <html> from a color picker. */
html[style*="--appliance-accent"] { --brand-primary-lt: var(--appliance-accent); --brand-primary-top: var(--appliance-accent); }

/* ---- Vertical menu layout: one nested left rail (top-level + sub-tabs) ---- */
/* The nav column wraps the top-level nav + the lifted sub-tab host. In the
   default horizontal layout it is transparent to layout (display:contents). */
.appliance-navcol { display: contents; }

html[data-layout="vertical"] #appliance-chrome { position: sticky; top: 0; z-index: 50; }

html[data-layout="vertical"]:has(#appliance-chrome) { height: 100%; }
html[data-layout="vertical"] body:has(#appliance-chrome) {
    height: 100%; margin: 0; display: flex; flex-direction: column; overflow: hidden;
}
html[data-layout="vertical"] body:has(#appliance-chrome) #appliance-chrome { flex: 0 0 auto; }
html[data-layout="vertical"] body:has(#appliance-chrome) .appliance-layout {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
}
html[data-layout="vertical"] .appliance-navcol {
    display: block;
    position: fixed;
    top: 56px;                 /* below the header (matches .appliance-header height) */
    left: 0; bottom: 0;
    width: 214px;
    overflow-y: auto;
    background: var(--bg-navrail);
    border-right: 1px solid var(--border-nav-section);
    z-index: 40;
}
/* top-level items stack vertically */
html[data-layout="vertical"] .appliance-topnav {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    background: none; border: none; padding: 8px 8px 4px; gap: 3px; overflow: visible;
}
html[data-layout="vertical"] .appliance-topnav-item { width: 100%; justify-content: flex-start; display: flex; align-items: center; }
html[data-layout="vertical"] .appliance-topnav-label { flex: 1 1 auto; }
/* collapse/expand caret — only in the vertical rail, on the active section that has sub-tabs */
.appliance-topnav-caret { display: none; }
html[data-layout="vertical"] .appliance-navcol:has(.appliance-subtab-host:not(:empty)) .appliance-topnav-item.active .appliance-topnav-caret {
    display: inline-flex; align-items: center; margin-left: 6px; font-size: 11px; opacity: .85; transition: transform .15s;
}
html[data-layout="vertical"] .appliance-navcol.subnav-collapsed .appliance-subtab-host { display: none; }
html[data-layout="vertical"] .appliance-navcol.subnav-collapsed .appliance-topnav-item.active .appliance-topnav-caret { transform: rotate(-90deg); }
/* the current page's sub-tabs stack vertically, indented beneath the section */
html[data-layout="vertical"] .appliance-subtab-host { padding: 0 8px 8px; }
html[data-layout="vertical"] .appliance-subtab-host .appliance-subtabs {
    flex-direction: column; align-items: stretch; background: none; border: none;
    border-bottom: none; gap: 2px; padding: 0;
}
html[data-layout="vertical"] .appliance-subtab-host .appliance-subtab {
    width: 100%; border: none; border-radius: 5px; padding: 6px 10px 6px 24px; text-align: left;
}
html[data-layout="vertical"] .appliance-subtab-host .appliance-subtab.active { border-bottom: none; }
/* content + status bar shift right of the rail */
html[data-layout="vertical"] .appliance-layout,
html[data-layout="vertical"] .appliance-statusbar,
html[data-layout="vertical"] .appliance-pending-banner { margin-left: 214px; }
/* narrow screens: collapse the rail back to a horizontal strip */
@media (max-width: 760px) {
    html[data-layout="vertical"] .appliance-navcol { position: static; width: auto; border-right: none; }
    html[data-layout="vertical"] .appliance-topnav { flex-direction: row; flex-wrap: wrap; }
    html[data-layout="vertical"] .appliance-subtab-host .appliance-subtabs { flex-direction: row; flex-wrap: wrap; }
    html[data-layout="vertical"] .appliance-layout, html[data-layout="vertical"] .appliance-statusbar,
    html[data-layout="vertical"] .appliance-pending-banner { margin-left: 0; }
}

/* ---- Appearance popover ---- */
.appliance-appearance-wrap { position: relative; display: inline-block; }
.appliance-appearance-pop {
    position: absolute; right: 0; top: 38px; z-index: 200; width: 250px;
    background: var(--bg-panel); border: 1px solid var(--border-panel); border-radius: 8px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.4); padding: 12px; color: var(--text-primary);
}
.appliance-appearance-pop h4 { margin: 10px 0 5px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); }
.appliance-appearance-pop h4:first-child { margin-top: 0; }
.appliance-seg { display: flex; gap: 4px; }
.appliance-seg button { flex: 1; padding: 5px 8px; font-size: 12px; cursor: pointer; border-radius: 5px;
    border: 1px solid var(--border-panel); background: var(--bg-panel-alt); color: var(--text-primary); }
.appliance-seg button.active { background: var(--brand-primary-lt); color: var(--on-accent, #fff); border-color: var(--brand-primary-lt); }
.appliance-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.appliance-swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.appliance-swatch.active { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-panel); }
.appliance-appearance-pop .appliance-accent-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.appliance-appearance-pop .appliance-accent-row input[type=color] { width: 34px; height: 26px; padding: 0; border: 1px solid var(--border-panel); border-radius: 5px; background: none; cursor: pointer; }
.appliance-appearance-reset { display: block; margin-top: 12px; font-size: 12px; color: var(--text-secondary); background: none; border: none; cursor: pointer; padding: 0; }
.appliance-appearance-reset:hover { color: var(--text-primary); text-decoration: underline; }

/* ============================================================
   Curated color themes (researched palettes). Each sets a full
   coordinated set: background/surface, a subtle neutral border, and a
   bright complementary accent. Selected via <html data-theme-name>.
   ============================================================ */
html[data-theme-name="nord"] {
    color-scheme: dark;
    --bg-page: #242933; --bg-panel: #2e3440; --bg-panel-alt: #3b4252; --bg-panel-hover: #434c5e;
    --bg-nav: linear-gradient(180deg, #2e3440 0%, #242933 100%); --bg-nav-section: #242933;
    --bg-tile: linear-gradient(180deg, #2e3440 0%, #242933 100%);
    --brand-primary: #5e81ac; --brand-primary-lt: #81a1c1; --brand-primary-dk: #4c566a;
    --brand-primary-mid: #6a89b5; --brand-primary-top: #88c0d0; --brand-primary-border: #434c5e;
    --text-primary: #eceff4; --text-secondary: #d8dee9; --text-brand: #88c0d0; --text-tile-val: #81a1c1;
}
html[data-theme-name="dracula"] {
    color-scheme: dark;
    --bg-page: #1e1f29; --bg-panel: #282a36; --bg-panel-alt: #343746; --bg-panel-hover: #44475a;
    --bg-nav: linear-gradient(180deg, #282a36 0%, #1e1f29 100%); --bg-nav-section: #1e1f29;
    --bg-tile: linear-gradient(180deg, #282a36 0%, #1e1f29 100%);
    --brand-primary: #6d4aad; --brand-primary-lt: #bd93f9; --brand-primary-dk: #44366e;
    --brand-primary-mid: #8a63c9; --brand-primary-top: #bd93f9; --brand-primary-border: #44475a;
    --text-primary: #f8f8f2; --text-secondary: #bcc2cd; --text-brand: #ff79c6; --text-tile-val: #bd93f9;
}
html[data-theme-name="tokyo-night"] {
    color-scheme: dark;
    --bg-page: #16161e; --bg-panel: #1a1b26; --bg-panel-alt: #24283b; --bg-panel-hover: #2f334d;
    --bg-nav: linear-gradient(180deg, #1a1b26 0%, #16161e 100%); --bg-nav-section: #16161e;
    --bg-tile: linear-gradient(180deg, #1a1b26 0%, #16161e 100%);
    --brand-primary: #3d59a1; --brand-primary-lt: #7aa2f7; --brand-primary-dk: #2a3f75;
    --brand-primary-mid: #5a7fd0; --brand-primary-top: #7dcfff; --brand-primary-border: #2f334d;
    --text-primary: #c0caf5; --text-secondary: #a9b1d6; --text-brand: #bb9af7; --text-tile-val: #7aa2f7;
}
html[data-theme-name="one-dark"] {
    color-scheme: dark;
    --bg-page: #21252b; --bg-panel: #282c34; --bg-panel-alt: #2c313a; --bg-panel-hover: #333842;
    --bg-nav: linear-gradient(180deg, #282c34 0%, #21252b 100%); --bg-nav-section: #21252b;
    --bg-tile: linear-gradient(180deg, #282c34 0%, #21252b 100%);
    --brand-primary: #3b6ea5; --brand-primary-lt: #61afef; --brand-primary-dk: #2c5178;
    --brand-primary-mid: #4d8ecc; --brand-primary-top: #61afef; --brand-primary-border: #3e4451;
    --text-primary: #abb2bf; --text-secondary: #8b929e; --text-brand: #c678dd; --text-tile-val: #61afef;
}
html[data-theme-name="catppuccin"] {
    color-scheme: dark;
    --bg-page: #181825; --bg-panel: #1e1e2e; --bg-panel-alt: #28283c; --bg-panel-hover: #313244;
    --bg-nav: linear-gradient(180deg, #1e1e2e 0%, #181825 100%); --bg-nav-section: #181825;
    --bg-tile: linear-gradient(180deg, #1e1e2e 0%, #181825 100%);
    --brand-primary: #5a6bd8; --brand-primary-lt: #89b4fa; --brand-primary-dk: #3e4a9e;
    --brand-primary-mid: #7089e8; --brand-primary-top: #89b4fa; --brand-primary-border: #45475a;
    --text-primary: #cdd6f4; --text-secondary: #a6adc8; --text-brand: #cba6f7; --text-tile-val: #89b4fa;
}
html[data-theme-name="gruvbox"] {
    color-scheme: dark;
    --bg-page: #1d2021; --bg-panel: #282828; --bg-panel-alt: #32302f; --bg-panel-hover: #3c3836;
    --bg-nav: linear-gradient(180deg, #282828 0%, #1d2021 100%); --bg-nav-section: #1d2021;
    --bg-tile: linear-gradient(180deg, #282828 0%, #1d2021 100%);
    --brand-primary: #b57614; --brand-primary-lt: #fabd2f; --brand-primary-dk: #8f5e0f;
    --brand-primary-mid: #d79921; --brand-primary-top: #fabd2f; --brand-primary-border: #504945;
    --text-primary: #ebdbb2; --text-secondary: #d5c4a1; --text-brand: #83a598; --text-tile-val: #fabd2f;
}
html[data-theme-name="solarized-dark"] {
    /* Vibrant v0.1.29: the fix for "washed out" was NOT more saturation (accents
       were already ~80%); it was (a) the palette was monochromatic teal/blue so
       it read flat, and (b) the base was an over-saturated murky teal. So: clean
       the base to a crisp deep slate-teal, brighten the cool accents, and inject
       a COMPLEMENTARY warm gold for data values (teal+gold = classic vibrant
       pairing) to break the single-hue wash. Objective sat + WCAG both checked. */
    color-scheme: dark;
    /* v0.1.31: verified against the REAL logged-in pages (not a mock). The
       washed-out/bleed was every surface being teal. Rebuilt on a CLEAN neutral
       charcoal base so the content reads crisp, with teal/cyan + blue accents
       that pop against neutral (the pattern Nord/GitHub/Linear use). Clear
       surface ladder, bright labels (no dim text), calmed status strip. */
    --bg-page: #0f1419; --bg-panel: #1a2129; --bg-panel-alt: #232c36; --bg-panel-hover: #2c3742;
    --bg-nav-section: #0a0e12;
    --bg-tile: linear-gradient(180deg, #1d2630 0%, #151b22 100%);
    /* Teal/cyan signature + blue links, popping against the neutral ground. */
    --brand-primary: #1a8a9e; --brand-primary-lt: #2ec4c4; --brand-primary-dk: #125863;
    --brand-primary-mid: #23a8b5; --brand-primary-top: #3ad6c0; --brand-primary-border: #3a4652;
    --on-accent: #06201f;
    --text-primary: #f0f5f7; --text-secondary: #b8c4ce;   /* bright labels, not dim */
    --text-brand: #2ed6c0; --text-tile-val: #5cc8ff;
    --text-link: #54baf2; --text-link-nav: #54baf2;
    /* Chrome slightly distinct from panels; neutral, not a teal slab. */
    --bg-header: linear-gradient(to right, #173842 0%, #111820 60%);
    --bg-panel-title: linear-gradient(180deg, #222c35 0%, #1a2027 100%);
    --text-panel-title: #eef4f6;
    --bg-subtabs: linear-gradient(180deg, #1c242d 0%, #141a21 100%);
    --bg-navrail: linear-gradient(180deg, #1c242d 0, #141a21 160px);
    --bg-nav: linear-gradient(180deg, #1c242d 0%, #141a21 100%);
    --bg-table-th: linear-gradient(180deg, #222c35 0%, #1a2128 100%);
    --border-panel: #39454f;
    --bg-statusbar: #141b22; --text-statusbar: #aebbc6; --border-statusbar: #2a333d;
}
html[data-theme-name="github-dark"] {
    color-scheme: dark;
    --bg-page: #010409; --bg-panel: #0d1117; --bg-panel-alt: #161b22; --bg-panel-hover: #21262d;
    --bg-nav: linear-gradient(180deg, #0d1117 0%, #010409 100%); --bg-nav-section: #010409;
    --bg-tile: linear-gradient(180deg, #0d1117 0%, #010409 100%);
    --brand-primary: #1f6feb; --brand-primary-lt: #58a6ff; --brand-primary-dk: #163f8f;
    --brand-primary-mid: #3b8aff; --brand-primary-top: #58a6ff; --brand-primary-border: #30363d;
    --text-primary: #c9d1d9; --text-secondary: #8b949e; --text-brand: #58a6ff; --text-tile-val: #58a6ff;
}
/* navy — the original palette. Keeps the deep-navy
   brand (#121F57) whose derived tones reproduce the card-header gradient
   (#1a3a6b→#121F57) + #2c5ea0 borders; overrides the base backgrounds to the exact
   untinted #0d1117/#1a1a2e and makes card/table headers pure white. */
html[data-theme-name="navy"] {
    color-scheme: dark;
    /* exact base backgrounds (untinted) */
    --bg-page: #0d1117; --bg-panel: #1a1a2e; --bg-panel-alt: #2a3a5a; --bg-panel-hover: #34456b;
    --bg-nav: linear-gradient(180deg, #1a1a2e 0%, #0d1117 100%); --bg-nav-section: #0d1117;
    --bg-nav-hover: #2a3a5a;
    --bg-tile: #141623;  /* solid — ~midpoint of the old #1a1a2e→#0d1117 tile gradient (a bit lighter than #10131d) */
    --bg-input: #0d1420; --bg-input-focus: #1a1a2e;
    /* brand blues — same navy as Default so headers/buttons/borders derive to
       the #1a3a6b gradient-top and #2c5ea0 border, set explicitly here */
    --brand-primary: #121F57; --brand-primary-lt: #3F6EB0; --brand-primary-dk: #0a1240;
    --brand-primary-top: #4a80c8; --brand-primary-mid: #1a3a6b; --brand-primary-border: #2c5ea0;
    /* text: white card/table headers, light body, blue links, green tiles */
    --text-primary: #e6edf3; --text-secondary: #9fb0c9;
    --text-panel-title: #ffffff; --text-th: #ffffff;
    --text-brand: #58a6ff; --text-link: #4a80c8; --text-link-nav: #9fb0c9;
    --text-tile-val: #10b981;
}
/* navy: the main content region is the near-black PAGE color, so cards/panels (#1a1a2e) stand out against it. The template
   default fills .appliance-main with the PANEL color, which reads as a muted
   navy-purple and blends into the cards. Same for the ported Backup content. */
html[data-theme-name="navy"] .appliance-main,
html[data-theme-name="navy"] #bk-root { background: var(--bg-page); }
html[data-theme-name="solarized-light"] {
    color-scheme: light;
    --bg-page: #eee8d5; --bg-panel: #fdf6e3; --bg-panel-alt: #f5efdc; --bg-panel-hover: #e9e2cb;
    --bg-nav: linear-gradient(180deg, #fdf6e3 0%, #eee8d5 100%); --bg-nav-section: #eee8d5;
    --bg-tile: linear-gradient(180deg, #fdf6e3 0%, #eee8d5 100%);
    --brand-primary: #268bd2; --brand-primary-lt: #4fa3e0; --brand-primary-dk: #1c6a9e;
    --brand-primary-mid: #388fd0; --brand-primary-top: #2aa198; --brand-primary-border: #d9d2bc;
    --text-primary: #586e75; --text-secondary: #657b83; --text-brand: #268bd2; --text-tile-val: #4fa3e0;
}
html[data-theme-name="github-light"] {
    color-scheme: light;
    --bg-page: #ffffff; --bg-panel: #ffffff; --bg-panel-alt: #f6f8fa; --bg-panel-hover: #eef1f4;
    --bg-nav: linear-gradient(180deg, #f6f8fa 0%, #eef1f4 100%); --bg-nav-section: #ffffff;
    --bg-tile: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    --brand-primary: #0969da; --brand-primary-lt: #218bff; --brand-primary-dk: #0757ba;
    --brand-primary-mid: #1177e8; --brand-primary-top: #218bff; --brand-primary-border: #d0d7de;
    --text-primary: #1f2328; --text-secondary: #656d76; --text-brand: #0969da; --text-tile-val: #218bff;
}

#bk-root table{width:100%;border-collapse:collapse;font-size:13px}
#bk-root th, #bk-root td{text-align:center !important;vertical-align:middle}
#bk-root th{background:var(--bg-table-th) !important;color:var(--text-th,#e0e0e0) !important;font-weight:700;font-size:12px;padding:4px 6px;border:1px solid var(--border-table-th) !important;cursor:pointer;user-select:none}
#bk-root td{padding:3px 6px;border:1px solid var(--border-table-td) !important;color:#ceeeff;background:var(--bg-tile)}
#bk-root tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--bg-tile) 94%, #ffffff)}

#bk-root td:last-child, #bk-root th:last-child{white-space:nowrap;width:1%}
#bk-root .host, #bk-root .srcgrp{border:1px solid var(--border-table-td)}
#bk-root .host .hh, #bk-root .srchdr{background:var(--bg-panel-title,var(--bg-table-th)) !important;color:var(--text-th,#e0e0e0) !important}
#bk-root .srchdr:hover{background:var(--bg-panel-hover) !important}

#bk-root button.g{background:linear-gradient(180deg,#2d8a4a 0%,#1f5e34 100%) !important;border-color:#4ade80 !important;color:#fff !important}
#bk-root button.g:hover, #bk-root button.g:focus{animation:green-glow-pulse 1.5s ease-in-out infinite;background:linear-gradient(180deg,#3da55c 0%,#2d8a4a 100%) !important;border-color:#4ade80 !important;outline:none}
#bk-root button.g:active{background:linear-gradient(180deg,#4ade80 0%,#2d8a4a 100%) !important;border-color:#86efac !important}

/* dirty tracking on console forms: touched-and-changed fields outline amber,
   the submit button glows until saved, Revert appears only while dirty */
.appliance-dirty{outline:2px solid #d29922 !important;outline-offset:1px}
button.appliance-needs-save,input.appliance-needs-save{box-shadow:0 0 0 2px #d2992255,0 0 10px #d2992288 !important}

@keyframes applianceEmptyReveal { from { opacity: 0 } to { opacity: 1 } }
#bk-root .empty, .appliance-empty, .appliance-muted {
    animation: applianceEmptyReveal .15s ease .3s backwards;
}

/* v0.59.13 — compact search embedded in a #bk-root card header (h2 is a flex
   row with a .sp spacer). Lets list pages put "search + (N)/(M / N)" inline in
   the panel title bar instead of a separate toolbar row above the table. */
#bk-root .card h2 input.bk-hdr-search,
#bk-root .card h2 .bk-hdr-count {

    font-family: inherit;
    font-size: inherit;
    text-transform: none;
    letter-spacing: 0;
}
#bk-root .card h2 input.bk-hdr-search {
    height: 22px;
    padding: 0 8px;
    font-weight: 400;
    color: var(--text-panel-title, #fff);
    background: rgba(0,0,0,.22);
    border: 1px solid var(--border-panel, #2c5ea0);
    border-radius: 4px;
    width: 200px;
    max-width: 34vw;
}
#bk-root .card h2 input.bk-hdr-search::placeholder { color: rgba(255,255,255,.55); }
#bk-root .card h2 .bk-hdr-count { white-space: nowrap; font-weight: 700; color: #60a5fa; }

/* v0.59.14 — 3-column card header: left (title + count), center (search),
   right (actions). Left and right flex equally so the CENTER stays truly
   centered regardless of their differing widths. */
#bk-root .card h2.bk-hdr3 { justify-content: space-between; gap: 10px; }
#bk-root .card h2.bk-hdr3 > .bk-hdr-l { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; }
#bk-root .card h2.bk-hdr3 > .bk-hdr-c { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; justify-content: center; }
#bk-root .card h2.bk-hdr3 > .bk-hdr-r { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

/* v0.59.19 — certificates cert-list 3-column header: filter tabs (left),
   search (center), reserved (right). Matches the backup-section bk-hdr3 layout
   on a native (non-#bk-root) page. Left & right flex equally so the search
   stays centered. */
.appliance-cert-hdr3 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.appliance-cert-hdr3 > .cert-hdr-l { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.appliance-cert-hdr3 > .cert-hdr-l .appliance-filter-row { margin-bottom: 0; }
.appliance-cert-hdr3 > .cert-hdr-c { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; justify-content: center; }
.appliance-cert-hdr3 > .cert-hdr-r { flex: 1 1 0; min-width: 0; }
.appliance-cert-hdr3 .cert-hdr-c #appliance-cert-count-text {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #60a5fa;
    white-space: nowrap;
}