/* BluePanel — single common stylesheet, cPanel Jupiter-inspired.
   Palette / typography follow cPanel's Jupiter theme:
     - Navy sidebar (#1D3E68), white content shell.
     - Orange primary CTA (#F27C1A) for confirm-style actions.
     - Deep blue (#21486B) for links and secondary highlights.
     - Open Sans (with a system fallback), 14px body.
   Do NOT reintroduce inline styles or per-page CSS. Add classes here. */

:root {
    /* Surfaces / neutrals */
    --c-bg:            #eaeef2;
    --c-surface:       #ffffff;
    --c-surface-2:     #f4f6f9;
    --c-surface-3:     #eef1f5;
    --c-border:        #d6dbe0;
    --c-border-strong: #b7bfc9;

    /* Text */
    --c-text:      #2e3239;
    --c-text-soft: #4a5568;
    --c-muted:     #7a8290;

    /* Brand (cPanel Jupiter) */
    --c-primary:   #f27c1a;   /* orange — primary CTA */
    --c-primary-d: #d66e13;
    --c-primary-l: #fff2e3;
    --c-accent:    #21486b;   /* deep navy blue — links, group headings */
    --c-accent-d:  #163350;
    --c-accent-l:  #e6ecf3;

    /* States */
    --c-success:   #2f855a;
    --c-success-l: #e6f5ed;
    --c-warn:      #b7791f;
    --c-warn-l:    #fdf6e3;
    --c-danger:    #c53030;
    --c-danger-l:  #fdecec;
    --c-info:      #2b6cb0;
    --c-info-l:    #e6f0fa;

    /* Sidebar */
    --c-sidebar:          #1d3e68;
    --c-sidebar-2:        #163254;
    --c-sidebar-fg:       #c9d4e2;
    --c-sidebar-fg-strong:#ffffff;
    --c-sidebar-accent:   #f27c1a;

    /* Shape */
    --r-sm: 3px;
    --r-md: 4px;
    --r-lg: 6px;
    --r-xl: 8px;

    /* Elevation */
    --sh-1: 0 1px 2px rgba(29, 62, 104, .06);
    --sh-2: 0 2px 8px rgba(29, 62, 104, .10);
    --sh-3: 0 12px 32px rgba(29, 62, 104, .22);

    /* Typography — cPanel Jupiter uses Open Sans.
       Kept as first family so, if installed, it renders exactly like cPanel;
       falls back to the closest system sans on Windows / macOS / Linux. */
    --ff: "Open Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --ff-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--ff); color: var(--c-text); background: var(--c-bg); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-d); text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 600; color: var(--c-text); }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
code, kbd, pre { font-family: var(--ff-mono); }
kbd { background: var(--c-surface-2); border: 1px solid var(--c-border); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: 1rem 0; }

/* ---------- Shell ---------- */
.bp-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.bp-main  { display: flex; flex-direction: column; min-width: 0; background: var(--c-bg); }
.bp-content { padding: 20px 24px 40px; flex: 1; }

/* Sidebar — cPanel Jupiter navy */
.bp-sidebar {
    background: var(--c-sidebar);
    color: var(--c-sidebar-fg);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    box-shadow: inset -1px 0 0 rgba(0,0,0,.15);
}
.bp-brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.bp-brand-mark {
    width: 34px; height: 34px; border-radius: 6px;
    background: var(--c-primary);
    color: #fff; font-weight: 700; display: grid; place-items: center;
    font-size: 13px; letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.bp-brand-name { font-weight: 600; color: var(--c-sidebar-fg-strong); font-size: 15px; letter-spacing: 0.005em; }

.bp-nav { padding: 10px 0; display: flex; flex-direction: column; gap: 0; flex: 1; }
.bp-nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 18px;
    color: var(--c-sidebar-fg);
    font-weight: 400; font-size: 13.5px;
    border-left: 3px solid transparent;
    transition: background .12s, color .12s, border-color .12s;
}
.bp-nav-item:hover { background: var(--c-sidebar-2); color: var(--c-sidebar-fg-strong); text-decoration: none; }
.bp-nav-item.is-active {
    background: var(--c-sidebar-2);
    color: var(--c-sidebar-fg-strong);
    border-left-color: var(--c-sidebar-accent);
    font-weight: 600;
}
.bp-nav-item.is-active .bp-nav-ico { background: var(--c-sidebar-accent); }
.bp-nav-ico { width: 8px; height: 8px; border-radius: 50%; background: #6c88ab; flex: 0 0 auto; }
.bp-sidebar-foot { padding: 12px 20px; font-size: 12px; color: #94a5bc; border-top: 1px solid rgba(255,255,255,.08); }

/* Topbar */
.bp-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
    box-shadow: 0 1px 0 rgba(29,62,104,.04);
}
.bp-topbar-title { font-size: 15px; font-weight: 600; color: var(--c-text); }
.bp-topbar-user  { display: flex; align-items: center; gap: 12px; }
.bp-user-name { font-size: 13px; color: var(--c-text-soft); }
.bp-user-name:hover { color: var(--c-accent); }

/* ---------- Cards ---------- */
.bp-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    padding: 16px 18px;
    margin-bottom: 14px;
}
.bp-card-narrow { max-width: 560px; }
.bp-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: -16px -18px 14px; padding: 12px 18px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface-2);
    border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg);
}
.bp-card-head h2 { margin: 0; font-size: 15px; color: var(--c-accent); }
.bp-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Settings — sectioned page with anchor nav ---------- */
.bp-settings-grid { display: grid; grid-template-columns: 210px 1fr; gap: 20px; align-items: start; }

.bp-settings-nav {
    position: sticky; top: 20px;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    padding: 6px;
}
.bp-settings-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    border-radius: var(--r-md);
    color: var(--c-text-soft);
    font-size: 13px; font-weight: 600;
    transition: background .12s, color .12s;
}
.bp-settings-nav-item:hover { background: var(--c-surface-2); color: var(--c-accent); text-decoration: none; }
.bp-settings-nav-icon { width: 20px; height: 20px; display: grid; place-items: center; color: var(--c-muted); flex: 0 0 auto; transition: color .12s; }
.bp-settings-nav-icon svg { width: 16px; height: 16px; }
.bp-settings-nav-item:hover .bp-settings-nav-icon { color: var(--c-accent); }
.bp-settings-nav-label { flex: 1; }
.bp-settings-nav-hint {
    font-size: 10.5px; font-weight: 700; color: var(--c-muted);
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    border-radius: 999px; padding: 1px 7px;
    font-variant-numeric: tabular-nums;
}
.bp-settings-nav-hint.is-ok   { color: var(--c-success); background: var(--c-success-l); border-color: #b4dcc4; }
.bp-settings-nav-hint.is-warn { color: var(--c-warn);    background: var(--c-warn-l);    border-color: #ecd8a6; }

.bp-settings-content { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bp-settings-section { scroll-margin-top: 20px; }
.bp-settings-section-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.bp-settings-section-title { display: flex; align-items: center; gap: 12px; }
.bp-settings-section-icon {
    width: 34px; height: 34px; flex: 0 0 auto;
    border-radius: 8px;
    background: var(--c-accent-l); color: var(--c-accent);
    display: grid; place-items: center;
}
.bp-settings-section-icon svg { width: 18px; height: 18px; }
.bp-settings-section-title h2 { margin: 0; font-size: 16px; color: var(--c-text); }
.bp-settings-section > .bp-muted:first-of-type { margin-top: 6px; }
.bp-settings-section .bp-muted { max-width: 640px; }

@media (max-width: 860px) {
    .bp-settings-grid { grid-template-columns: 1fr; }
    .bp-settings-nav { position: static; flex-direction: row; overflow-x: auto; }
    .bp-settings-nav-item { flex: 0 0 auto; }
}

/* ---------- Stat grid ---------- */
.bp-stat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px; margin-bottom: 18px;
}
.bp-stat {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    box-shadow: var(--sh-1);
    border-left: 3px solid var(--c-accent);
}
.bp-stat-label { font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.bp-stat-value { font-size: 22px; font-weight: 600; margin-top: 4px; color: var(--c-text); line-height: 1.15; }
.bp-stat-sub { font-size: 12px; color: var(--c-muted); margin-top: 2px; }

/* ---------- Buttons ---------- */
.bp-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; font-size: 13px; font-weight: 600;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface); color: var(--c-text);
    cursor: pointer; line-height: 1.25; text-decoration: none;
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.bp-btn:hover { background: var(--c-surface-2); text-decoration: none; }
.bp-btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.bp-btn-primary {
    background: var(--c-primary); border-color: var(--c-primary); color: #fff;
    box-shadow: 0 1px 2px rgba(242,124,26,.25);
}
.bp-btn-primary:hover { background: var(--c-primary-d); border-color: var(--c-primary-d); color: #fff; }
.bp-btn-accent {
    background: var(--c-accent); border-color: var(--c-accent); color: #fff;
}
.bp-btn-accent:hover { background: var(--c-accent-d); border-color: var(--c-accent-d); color: #fff; }
.bp-btn-danger { background: var(--c-surface); border-color: #f0b4b4; color: var(--c-danger); }
.bp-btn-danger:hover { background: var(--c-danger-l); border-color: #d47575; }
.bp-btn-ghost { background: transparent; border-color: transparent; color: var(--c-text-soft); font-weight: 500; }
.bp-btn-ghost:hover { background: var(--c-surface-2); color: var(--c-text); }
.bp-btn-sm { padding: 4px 10px; font-size: 12px; }
.bp-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Forms ---------- */
.bp-field { display: block; margin-bottom: 12px; }
.bp-field > label, .bp-label {
    display: block; font-size: 12px; color: var(--c-text-soft);
    font-weight: 600; margin-bottom: 4px;
}
.bp-input, .bp-select, .bp-textarea {
    width: 100%; padding: 8px 10px; font-size: 13.5px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    background: var(--c-surface); color: var(--c-text);
    font-family: inherit;
    transition: border-color .12s, box-shadow .12s;
}
.bp-input:focus, .bp-select:focus, .bp-textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(33,72,107,.15);
}
.bp-textarea { min-height: 90px; resize: vertical; font-family: var(--ff-mono); font-size: 12.5px; }
.bp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.bp-field-inline { display: flex; gap: 8px; align-items: stretch; }
.bp-field-inline .bp-input { flex: 1; min-width: 0; }
.bp-field-inline .bp-btn { flex: 0 0 auto; white-space: nowrap; }

/* ---------- Tables ---------- */
.bp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bp-table th, .bp-table td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.bp-table th { background: var(--c-surface); color: var(--c-muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--c-border); }
.bp-table tbody tr { transition: background-color .12s ease; }
.bp-table tbody tr:hover { background: var(--c-accent-l); }
.bp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.bp-table .actions { text-align: right; white-space: nowrap; }
.bp-table-wrap { overflow-x: auto; margin: 0 -18px -16px; }
.bp-table-wrap .bp-table th:first-child, .bp-table-wrap .bp-table td:first-child { padding-left: 18px; }
.bp-table-wrap .bp-table th:last-child,  .bp-table-wrap .bp-table td:last-child  { padding-right: 18px; }

/* ---------- Badges ---------- */
.bp-badge {
    display: inline-block; padding: 2px 8px;
    border-radius: 999px; font-size: 11px; font-weight: 600;
    background: var(--c-surface-2); color: var(--c-text-soft);
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid var(--c-border);
}
.bp-badge-ok    { background: var(--c-success-l); color: var(--c-success); border-color: #b4dcc4; }
.bp-badge-warn  { background: var(--c-warn-l); color: var(--c-warn); border-color: #ecd8a6; }
.bp-badge-err   { background: var(--c-danger-l); color: var(--c-danger); border-color: #f0b4b4; }
.bp-badge-info  { background: var(--c-info-l); color: var(--c-info); border-color: #b8d1ea; }

/* ---------- Alerts ---------- */
.bp-alert {
    padding: 10px 14px; border-radius: var(--r-md); font-size: 13px;
    margin-bottom: 12px;
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    border-left: 4px solid var(--c-border-strong);
}
.bp-alert-ok      { background: var(--c-success-l); border-color: #b4dcc4; border-left-color: var(--c-success); color: #1f5a3d; }
.bp-alert-error, .bp-alert-err { background: var(--c-danger-l); border-color: #f0b4b4; border-left-color: var(--c-danger); color: #7a1c1c; }
.bp-alert-info    { background: var(--c-info-l); border-color: #b8d1ea; border-left-color: var(--c-info); color: #1a3f6b; }
.bp-flashes { margin-bottom: 12px; }

/* ---------- Utility ---------- */
.bp-muted    { color: var(--c-muted); }
.bp-mono     { font-family: var(--ff-mono); font-size: 12.5px; }
.bp-right    { text-align: right; }
.bp-nowrap   { white-space: nowrap; }
.bp-space-4  { height: 4px; }
.bp-space-8  { height: 8px; }
.bp-space-16 { height: 16px; }
.bp-hstack   { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bp-vstack   { display: flex; flex-direction: column; gap: 8px; }
.bp-empty    { text-align: center; padding: 40px 20px; color: var(--c-muted); }
.bp-empty h3 { margin-bottom: 4px; color: var(--c-text-soft); }
.bp-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bp-chip     {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    background: var(--c-accent-l); border: 1px solid #c2d1e0;
    color: var(--c-accent);
    border-radius: 999px; font-size: 12px;
}

/* ---------- List-table entity cell (avatar + name + subtext) ----------
   Shared by every "list of named things" table: Sites, Databases, DNS
   zones, FTP accounts, Mail domains/mailboxes, Vhosts, Backups, Users. */
.bp-entity-cell   { display: flex; align-items: center; gap: 12px; }
.bp-entity-avatar {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; color: #fff;
}
.bp-entity-meta { min-width: 0; }
.bp-entity-name {
    display: block; font-weight: 600; color: var(--c-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.bp-entity-name:hover { color: var(--c-accent); }
.bp-entity-sub {
    display: block; margin-top: 1px;
    font-family: var(--ff-mono); font-size: 11.5px; color: var(--c-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 380px;
}

.bp-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.bp-status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.bp-status-pill.is-on  { background: var(--c-success-l); color: var(--c-success); }
.bp-status-pill.is-on::before  { background: var(--c-success); }
.bp-status-pill.is-off { background: var(--c-surface-2); color: var(--c-muted); }
.bp-status-pill.is-off::before { background: var(--c-border-strong); }
.bp-status-pill.is-warn { background: var(--c-warn-l); color: var(--c-warn); }
.bp-status-pill.is-warn::before { background: var(--c-warn); }
.bp-status-pill.is-err  { background: var(--c-danger-l); color: var(--c-danger); }
.bp-status-pill.is-err::before  { background: var(--c-danger); }

.bp-size-chip {
    border: 1px dashed var(--c-border-strong);
    background: transparent; color: var(--c-text-soft);
    border-radius: 999px; padding: 4px 13px; font-size: 12px; cursor: pointer;
}
.bp-size-chip:hover { border-color: var(--c-accent); border-style: solid; color: var(--c-accent); background: var(--c-accent-l); }
.bp-size-chip[disabled] { opacity: .6; cursor: not-allowed; }

/* ---------- Kebab dropdown (row actions) ---------- */
.bp-kebab { position: relative; display: inline-block; }
.bp-kebab-btn {
    width: 30px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: 50%;
    cursor: pointer; color: var(--c-muted); font-size: 16px; line-height: 1;
}
.bp-kebab-btn:hover { background: var(--c-surface-3); color: var(--c-text); }
.bp-kebab-menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--sh-2); min-width: 180px; z-index: 40; padding: 4px; display: none; }
.bp-kebab.is-open .bp-kebab-menu { display: block; }
.bp-kebab-menu button, .bp-kebab-menu a { display: block; width: 100%; text-align: left; padding: 7px 10px; font-size: 13px; background: transparent; border: 0; color: var(--c-text); border-radius: var(--r-sm); cursor: pointer; text-decoration: none; }
.bp-kebab-menu button:hover, .bp-kebab-menu a:hover { background: var(--c-surface-2); }
.bp-kebab-menu .is-danger { color: var(--c-danger); }
.bp-kebab-note { display: block; padding: 6px 10px; font-size: 12px; }
.bp-dkim-pre { white-space: pre-wrap; word-break: break-all; background: var(--c-surface-2); padding: 10px; border-radius: var(--r-md); font-size: 11.5px; max-height: 200px; overflow: auto; }
.bp-deliv-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--c-border); font-size: 13px; }
.bp-deliv-row:last-child { border-bottom: 0; }
.bp-deliv-row b { min-width: 90px; color: var(--c-text-soft); font-weight: 600; }

/* ---------- Modal (z-slideup-*): shared component ---------- */
.z-slideup-overlay { position: fixed; inset: 0; background: rgba(29, 62, 104, .55); backdrop-filter: blur(2px); z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; }
.z-slideup-overlay.is-open { display: flex; animation: bp-fade .16s ease-out; }
.z-slideup-panel { background: var(--c-surface); border-radius: var(--r-xl); box-shadow: var(--sh-3); width: min(920px, 100%); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; animation: bp-rise .18s ease-out; }
.z-slideup-panel.is-wide { width: min(1280px, 100%); }
.z-slideup-panel.is-narrow { width: min(520px, 100%); }
.z-slideup-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--c-border); background: var(--c-accent); color: #fff; }
.z-slideup-title { font-size: 15px; font-weight: 600; margin: 0; color: #fff; }
.z-slideup-close { background: transparent; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: rgba(255,255,255,.75); padding: 4px 8px; }
.z-slideup-close:hover { color: #fff; }
.z-slideup-body { padding: 18px 20px; overflow: auto; flex: 1; }
.z-slideup-foot { padding: 12px 20px; border-top: 1px solid var(--c-border); background: var(--c-surface-2); display: flex; justify-content: flex-end; gap: 8px; }
.z-slideup-foot:empty { display: none; }
@keyframes bp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bp-rise { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- Toasts ---------- */
.bp-toast-stack { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 200; pointer-events: none; }
.bp-toast { pointer-events: auto; background: var(--c-accent); color: #fff; padding: 10px 14px; border-radius: var(--r-md); font-size: 13px; box-shadow: var(--sh-2); animation: bp-rise .18s ease-out; max-width: 360px; }
.bp-toast.is-ok    { background: var(--c-success); }
.bp-toast.is-err   { background: var(--c-danger); }
.bp-toast.is-warn  { background: var(--c-warn); }

/* ---------- Install page ---------- */
.bp-install { min-height: 100vh; display: grid; place-items: center; background: var(--c-bg); }
.bp-install-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 28px; width: min(440px, 100%); }
.bp-install-card h1 { margin-bottom: 10px; color: var(--c-accent); }
.bp-install-card label { display: block; margin-bottom: 12px; font-size: 12px; color: var(--c-text-soft); font-weight: 600; }
.bp-install-card label input { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font-size: 14px; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); font-family: inherit; color: var(--c-text); }
.bp-install-card .bp-btn { width: 100%; justify-content: center; padding: 10px; font-size: 14px; }

/* ---------- Login ---------- */
.bp-login {
    min-height: 100vh; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--c-accent-d) 0%, var(--c-accent) 55%, #2c5a86 100%);
    padding: 24px;
}
.bp-login-shell {
    display: grid; grid-template-columns: 1fr 1fr;
    width: min(880px, 100%);
    min-height: 480px;
    background: var(--c-surface);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-3);
    overflow: hidden;
}

/* Left — brand panel */
.bp-login-aside {
    background: linear-gradient(160deg, var(--c-sidebar) 0%, var(--c-sidebar-2) 100%);
    color: var(--c-sidebar-fg);
    padding: 40px 36px;
    display: flex; flex-direction: column; gap: 22px;
}
.bp-login-brand { display: flex; align-items: center; gap: 10px; }
.bp-login-brand-name { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.01em; }
.bp-login-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-sidebar-accent); margin-bottom: 8px; }
.bp-login-tagline { font-size: 21px; font-weight: 600; color: #fff; line-height: 1.35; margin: 0; max-width: 26ch; }
.bp-login-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.bp-login-points li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--c-sidebar-fg); }
.bp-login-points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-sidebar-accent); flex: 0 0 auto; }
.bp-login-aside-foot { margin-top: auto; font-size: 11.5px; color: #90a2ba; }

/* Right — form panel */
.bp-login-main { display: flex; align-items: center; justify-content: center; padding: 40px 32px; }
.bp-login-card { width: 100%; max-width: 300px; }
.bp-login-card h2 { font-size: 20px; margin: 0 0 4px; color: var(--c-text); }
.bp-login-card .bp-muted { margin-bottom: 20px; display: block; }
.bp-login-card .bp-field { margin-bottom: 14px; }
.bp-login-card .bp-btn { width: 100%; justify-content: center; padding: 10px; margin-top: 4px; }
.bp-login-foot { text-align: center; margin: 18px 0 0; font-size: 11.5px; color: var(--c-muted); }

.bp-input-wrap { position: relative; }
.bp-input-wrap .bp-input { padding-left: 34px; }
.bp-input-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--c-muted); width: 16px; height: 16px; display: flex; pointer-events: none;
}
.bp-input-icon svg { width: 16px; height: 16px; }
.bp-input-wrap:focus-within .bp-input-icon { color: var(--c-accent); }

@media (max-width: 720px) {
    .bp-login-shell { grid-template-columns: 1fr; min-height: 0; }
    .bp-login-aside { padding: 28px 28px 20px; gap: 14px; }
    .bp-login-points { display: none; }
    .bp-login-main { padding: 28px; }
}

/* ---------- File manager ---------- */
.bp-fm { display: grid; grid-template-columns: 240px 1fr; gap: 14px; }
.bp-fm-list { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }

/* Folder tree sidebar — lazily populated by JS, expand/collapse per node.
   Sticky like the app's own nav sidebar: without this, a long file list in
   the right-hand column scrolls the tree away with it (nothing wrong with
   the scroll itself, but the tree — the thing you'd want to keep navigating
   from — disappears off-screen, which reads as "scrolling is broken"). */
.bp-fm-tree {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 8px 6px 12px;
    box-shadow: var(--sh-1);
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow: auto;
    font-size: 13px;
}
.bp-fm-tree-head {
    padding: 8px 10px 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--c-muted);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 6px;
}
.bp-fm-tree-node ul { list-style: none; padding-left: 16px; margin: 0; }
.bp-fm-tree-body { list-style: none; padding: 0; margin: 0; }
.bp-fm-tree-row {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 8px;
    border-radius: var(--r-md);
    cursor: pointer;
    color: var(--c-text);
}
.bp-fm-tree-row:hover { background: var(--c-surface-2); color: var(--c-accent); }
.bp-fm-tree-row.is-active { background: var(--c-accent-l); color: var(--c-accent); font-weight: 600; }
.bp-fm-tree-toggle {
    width: 14px; height: 14px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--c-muted); font-size: 10px; cursor: pointer;
}
.bp-fm-tree-toggle.is-empty { visibility: hidden; }
.bp-fm-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ribbon toolbar — icon-over-label buttons in bordered groups, cPanel-style. */
.bp-fm-toolbar {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch;
    gap: 4px;
    padding: 6px 10px;
    background: linear-gradient(var(--c-surface), var(--c-surface-2));
    border-bottom: 1px solid var(--c-border);
}
.bp-fm-toolbar-group {
    display: flex; gap: 2px; flex-wrap: wrap; align-items: center;
    padding: 2px 10px;
    position: relative;
}
.bp-fm-toolbar-group + .bp-fm-toolbar-group::before {
    content: '';
    position: absolute; left: -1px; top: 4px; bottom: 4px; width: 1px;
    background: var(--c-border-strong);
}
.bp-fm-ribbon-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 58px;
    padding: 5px 10px 6px;
    background: transparent; border: 1px solid transparent; border-radius: var(--r-md);
    color: var(--c-text-soft); cursor: pointer;
    font-size: 11px; font-weight: 600; line-height: 1.1;
}
.bp-fm-ribbon-btn .bp-fi { width: 22px; height: 22px; color: var(--c-accent); }
.bp-fm-ribbon-btn:hover { background: var(--c-surface); border-color: var(--c-border); box-shadow: var(--sh-1); color: var(--c-accent); }
.bp-fm-ribbon-btn:active { background: var(--c-accent-l); }
.bp-fm-ribbon-btn:disabled { cursor: default; opacity: 0.4; }
.bp-fm-ribbon-btn:disabled:hover { background: transparent; border-color: transparent; box-shadow: none; color: var(--c-text-soft); }
.bp-fm-ribbon-btn:disabled .bp-fi { color: var(--c-text-soft); }

.bp-fm-crumbs {
    padding: 8px 16px;
    border-bottom: 1px solid var(--c-border);
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    font-size: 13px; font-family: var(--ff-mono);
    background: var(--c-surface-3);
}
.bp-fm-crumbs a { color: var(--c-accent); padding: 2px 6px; border-radius: 3px; }
.bp-fm-crumbs a:hover { background: var(--c-accent-l); text-decoration: none; }
.bp-fm-crumbs .sep { color: var(--c-muted); padding: 0 2px; }

.bp-fm-summary {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface-2);
    font-size: 12px; color: var(--c-muted);
}
.bp-fm-summary-sep { color: var(--c-border-strong); }

.bp-fm-table th { background: var(--c-surface); }
.bp-fm-table .bp-fm-col-check   { width: 32px; padding-left: 12px; }
.bp-fm-table .bp-fm-col-name    { width: auto; }
.bp-fm-table .bp-fm-col-size    { width: 100px; }
.bp-fm-table .bp-fm-col-mtime   { width: 160px; }
.bp-fm-table .bp-fm-col-type    { width: 120px; }
.bp-fm-table .bp-fm-col-perms   { width: 100px; }
.bp-fm-table .bp-fm-col-actions { width: 90px; }
.bp-fm-table tbody tr.is-selected { background: var(--c-accent-l); }
.bp-fm-table tbody tr { cursor: default; }
.bp-fm-table tbody tr:hover { background: var(--c-accent-l); }
.bp-fm-name { display: inline-flex; align-items: center; gap: 10px; color: var(--c-text); }
.bp-fm-name:hover { color: var(--c-accent); text-decoration: none; }
.bp-fm-name .bp-fi { width: 20px; height: 20px; }

/* New File / New Folder / Rename dialog body */
.bp-fm-dialog { display: flex; flex-direction: column; gap: 6px; }
.bp-fm-dialog-label { font-size: 12px; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bp-fm-dialog .bp-input { width: 100%; }

/* ---------- Database explorer (phpMyAdmin-style sidebar + tables list) ---------- */
.bp-db-layout { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: start; }
.bp-db-main { min-width: 0; }
.bp-db-tree { max-height: calc(100vh - 120px); }
.bp-db-filter {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface-2);
}
.bp-db-filter label { font-size: 12px; font-weight: 600; color: var(--c-muted); white-space: nowrap; }
.bp-db-filter .bp-input { max-width: 260px; }
.bp-db-col-action { width: auto; }
.bp-db-actions a, .bp-db-actions button {
    margin-right: 12px; font-size: 12px;
    color: var(--c-accent); background: none; border: none; cursor: pointer; padding: 0;
}
.bp-db-actions a:hover, .bp-db-actions button:hover { text-decoration: underline; }
.bp-db-actions button.is-danger { color: var(--c-danger); }
.bp-db-summary-row td { font-weight: 700; border-top: 2px solid var(--c-border-strong); background: var(--c-surface-2); }

.bp-hidden { display: none; }
.bp-editor-textarea { width: 100%; min-height: 60vh; font-family: var(--ff-mono); font-size: 12.5px; padding: 10px 12px; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); tab-size: 4; }

/* ---------- File-manager icons (SVG data URIs, no external assets) ---------- */
.bp-fi {
    display: inline-block;
    width: 18px; height: 18px;
    background-repeat: no-repeat; background-position: center;
    background-size: contain;
    flex: 0 0 auto;
    vertical-align: text-bottom;
}
.bp-fi-folder      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f6b04e' stroke='%23d68a1c' stroke-width='1'><path d='M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/></svg>"); }
.bp-fi-folder-plus { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><line x1='12' y1='11' x2='12' y2='17'/><line x1='9' y1='14' x2='15' y2='14'/></svg>"); }
.bp-fi-home        { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321486b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-8 9 8'/><path d='M5 10v10a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V10'/></svg>"); }
.bp-fi-file        { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eef1f5' stroke='%237a8290' stroke-width='1.2'><path d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/><path d='M14 3v6h6'/></svg>"); }
.bp-fi-file-plus   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9z'/><path d='M14 3v6h6'/><line x1='9' y1='15' x2='15' y2='15'/><line x1='12' y1='12' x2='12' y2='18'/></svg>"); }
.bp-fi-code        { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e6ecf3' stroke='%2321486b' stroke-width='1.2'><path d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/><path d='M14 3v6h6' fill='none'/><path d='M9 13l-2 2 2 2M15 13l2 2-2 2' fill='none' stroke-linecap='round'/></svg>"); }
.bp-fi-doc         { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eef1f5' stroke='%234a5568' stroke-width='1.2'><path d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/><path d='M14 3v6h6' fill='none'/><line x1='7' y1='13' x2='16' y2='13' stroke-linecap='round'/><line x1='7' y1='16' x2='16' y2='16' stroke-linecap='round'/><line x1='7' y1='19' x2='12' y2='19' stroke-linecap='round'/></svg>"); }
.bp-fi-cfg         { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fdf6e3' stroke='%23b7791f' stroke-width='1.2'><path d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/><path d='M14 3v6h6' fill='none'/><circle cx='12' cy='15' r='2' fill='none'/><path d='M12 12v1M12 17v1M9 15h1M14 15h1' stroke-linecap='round'/></svg>"); }
.bp-fi-db          { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f855a' stroke-width='1.5'><ellipse cx='12' cy='5' rx='8' ry='2.5'/><path d='M4 5v6c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5V5'/><path d='M4 11v6c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5v-6'/></svg>"); }
.bp-fi-img         { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b6cb0' stroke-width='1.5'><rect x='3' y='4' width='18' height='16' rx='2'/><circle cx='9' cy='10' r='2' fill='%232b6cb0'/><path d='M4 18l5-5 4 4 3-3 4 4'/></svg>"); }
.bp-fi-zip         { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fdf6e3' stroke='%23b7791f' stroke-width='1.2'><path d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/><path d='M14 3v6h6' fill='none'/><rect x='10.5' y='11' width='2' height='2'/><rect x='10.5' y='14' width='2' height='2'/><rect x='10.5' y='17' width='2' height='2'/></svg>"); }
.bp-fi-pdf         { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fdecec' stroke='%23c53030' stroke-width='1.2'><path d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/><path d='M14 3v6h6' fill='none'/><text x='7' y='18' font-family='sans-serif' font-size='6' font-weight='700' fill='%23c53030' stroke='none'>PDF</text></svg>"); }
.bp-fi-upload      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v13'/><path d='M6 9l6-6 6 6'/><path d='M4 20h16'/></svg>"); }
.bp-fi-refresh     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 0 1-15.5 6.4L3 16'/><path d='M3 12A9 9 0 0 1 18.5 5.6L21 8'/><path d='M21 3v5h-5M3 21v-5h5'/></svg>"); }
.bp-fi-arrow-up    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20V4'/><path d='M6 10l6-6 6 6'/></svg>"); }
.bp-fi-copy        { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='8' width='13' height='13' rx='2'/><path d='M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3'/></svg>"); }
.bp-fi-move        { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 9 2 12 5 15'/><polyline points='9 5 12 2 15 5'/><polyline points='15 19 12 22 9 19'/><polyline points='19 9 22 12 19 15'/><line x1='2' y1='12' x2='22' y2='12'/><line x1='12' y1='2' x2='12' y2='22'/></svg>"); }
.bp-fi-rename      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/></svg>"); }
.bp-fi-trash       { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><line x1='10' y1='11' x2='10' y2='17'/><line x1='14' y1='11' x2='14' y2='17'/></svg>"); }
.bp-fi-lock        { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>"); }
.bp-fi-unzip       { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='9' width='18' height='11' rx='1'/><path d='M3 9l2-5h14l2 5'/><path d='M12 13v5M9 15l3 3 3-3'/></svg>"); }
/* Primary button inherits currentColor from the button; keep icons visible on orange too. */
.bp-btn-primary .bp-fi { filter: brightness(0) invert(1); }

/* ---------- Query editor ---------- */
.bp-sql-editor { width: 100%; min-height: 120px; font-family: var(--ff-mono); font-size: 13px; padding: 10px 12px; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); resize: vertical; }
.bp-sql-result pre { background: var(--c-surface-2); padding: 12px; border-radius: var(--r-md); overflow-x: auto; margin: 0; font-size: 12px; }

/* ---------- New Table column builder ---------- */
.bp-col-header, .bp-col-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.6fr 0.9fr 0.6fr 0.5fr 0.5fr 28px;
    gap: 6px;
    align-items: center;
}
.bp-col-header { padding: 0 2px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); }
.bp-col-row { padding: 4px 2px; }
.bp-col-row .bp-input, .bp-col-row .bp-select { padding: 5px 8px; font-size: 12.5px; }
.bp-col-check { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--c-muted); white-space: nowrap; }
.bp-col-remove { padding: 2px 6px; color: var(--c-danger); }

.bp-perm-section { border: 1px solid var(--c-border); border-radius: 6px; padding: 10px 14px 12px; margin: 0 0 12px; }
.bp-perm-section legend { padding: 0 6px; font-size: 12.5px; font-weight: 700; color: var(--c-text); }
.bp-perm-section .bp-col-check { padding: 3px 0; white-space: normal; }

/* ---------- Row insert/edit form ---------- */
.bp-row-val:disabled { background: var(--c-surface-2); color: var(--c-muted); }
.bp-pager { padding: 12px 18px; border-top: 1px solid var(--c-border); }

/* ========================================================================
   Dashboard — cPanel Jupiter tile grid
   ======================================================================== */

.cp-page { max-width: 1200px; margin: 0 auto; }

/* Server info banner across the top */
.cp-banner {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-primary);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.cp-banner-title { font-size: 15px; font-weight: 600; color: var(--c-accent); margin: 0; }
.cp-banner-sub   { font-size: 12.5px; color: var(--c-muted); margin-top: 2px; }
.cp-banner-meta  {
    display: flex; align-items: center; gap: 16px;
    font-size: 12.5px; color: var(--c-text-soft);
    font-variant-numeric: tabular-nums;
}
.cp-banner-meta .cp-dot { color: var(--c-border-strong); }

/* Health pill in the banner */
.cp-health-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px 4px 8px;
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    border: 1px solid transparent;
}
.cp-health-pill .cp-dot { width: 7px; height: 7px; }
.cp-health-ok     { background: var(--c-success-l); color: var(--c-success); border-color: #b4dcc4; }
.cp-health-warn   { background: var(--c-warn-l);    color: var(--c-warn);    border-color: #ecd8a6; }
.cp-health-danger { background: var(--c-danger-l);  color: var(--c-danger);  border-color: #f0b4b4; }

/* System stats row */
.cp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.cp-stat {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-top: 3px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 13px 14px 12px;
    box-shadow: var(--sh-1);
    display: flex; flex-direction: column; gap: 6px;
    transition: transform .14s ease, box-shadow .14s ease;
}
.cp-stat:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(29, 62, 104, .1); }
.cp-stat--primary { border-top-color: var(--c-primary); }
.cp-stat--accent  { border-top-color: var(--c-accent); }
.cp-stat--success { border-top-color: var(--c-success); }
.cp-stat--warn    { border-top-color: var(--c-warn); }
.cp-stat--danger  { border-top-color: var(--c-danger); }

.cp-stat-top { display: flex; align-items: center; gap: 8px; }
.cp-stat-icon {
    width: 26px; height: 26px; flex: 0 0 auto;
    border-radius: 7px;
    display: grid; place-items: center;
}
.cp-stat-icon svg { width: 15px; height: 15px; }
.cp-stat--primary .cp-stat-icon { background: var(--c-primary-l); color: var(--c-primary-d); }
.cp-stat--accent  .cp-stat-icon { background: var(--c-accent-l);  color: var(--c-accent); }
.cp-stat--success .cp-stat-icon { background: var(--c-success-l); color: var(--c-success); }
.cp-stat--warn    .cp-stat-icon { background: var(--c-warn-l);    color: var(--c-warn); }
.cp-stat--danger  .cp-stat-icon { background: var(--c-danger-l);  color: var(--c-danger); }

.cp-stat-key {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--c-muted); font-weight: 600;
}
.cp-stat-val { font-size: 21px; font-weight: 700; color: var(--c-text); line-height: 1.15; font-variant-numeric: tabular-nums; }
.cp-stat-val-row { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.cp-stat-of  { color: var(--c-muted); font-size: 13px; font-weight: 400; }
.cp-stat-sub { font-size: 12px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.cp-stat-bar { margin-top: 2px; height: 5px; background: var(--c-surface-3); border-radius: 3px; overflow: hidden; }
.cp-stat-bar-fill { display: block; height: 100%; background: var(--c-primary); width: var(--bar-width, 0%); border-radius: 3px; transition: width .3s ease; }
.cp-stat-bar-fill.is-warn { background: var(--c-warn); }
.cp-stat-bar-fill.is-danger { background: var(--c-danger); }

.cp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-muted); }
.cp-dot-live { background: var(--c-success); box-shadow: 0 0 0 3px rgba(47,133,90,.18); }
.cp-dot-dead { background: var(--c-danger); box-shadow: 0 0 0 3px rgba(197,48,48,.18); }

.bp-settings-status { display: flex; align-items: center; gap: 8px; }

/* Feature groups (Files, Databases, Domains, Email) */
.cp-group { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); margin-bottom: 16px; box-shadow: var(--sh-1); overflow: hidden; }
.cp-group-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    background: var(--c-accent);
    color: #fff;
}
.cp-group-head h2 {
    margin: 0; font-size: 13px; font-weight: 600; color: #fff;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.cp-group-more { font-size: 12px; color: rgba(255,255,255,.85); }
.cp-group-more:hover { color: #fff; text-decoration: underline; }

.cp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0; }
.cp-tile {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border-right: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text);
    text-decoration: none;
    background: var(--c-surface);
    transition: background .12s;
}
.cp-tile:hover { background: var(--c-surface-2); text-decoration: none; color: var(--c-accent); }
.cp-tile:hover .cp-tile-icon { background: var(--c-primary); color: #fff; }
.cp-tile-icon {
    width: 36px; height: 36px;
    border-radius: 6px;
    background: var(--c-accent-l);
    color: var(--c-accent);
    display: grid; place-items: center;
    font-size: 18px; font-weight: 700;
    flex: 0 0 auto;
    transition: background .12s, color .12s;
}
.cp-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-tile-title { font-size: 13.5px; font-weight: 600; color: inherit; }
.cp-tile-sub   { font-size: 11.5px; color: var(--c-muted); }

/* Two-column bottom: sites + activity */
.cp-columns { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.cp-panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.cp-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border);
}
.cp-panel-head h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--c-accent); text-transform: uppercase; letter-spacing: 0.06em; }
.cp-panel-more { font-size: 12px; color: var(--c-accent); }
.cp-panel-body { padding: 0; }
.cp-panel-empty { padding: 24px 16px; color: var(--c-muted); font-size: 13px; text-align: center; }

/* Site row */
.cp-site {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-border);
}
.cp-site:last-child { border-bottom: 0; }
.cp-site-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-site-name a { color: var(--c-accent); }
.cp-site-name a:hover { color: var(--c-primary); text-decoration: none; }
.cp-site-meta { font-size: 12px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.cp-site-actions { grid-column: 1 / -1; display: flex; gap: 4px; flex-wrap: wrap; font-size: 12.5px; }
.cp-site-actions a { color: var(--c-text-soft); padding: 2px 8px; border-radius: 3px; background: var(--c-surface-2); border: 1px solid var(--c-border); }
.cp-site-actions a:hover { color: #fff; background: var(--c-accent); border-color: var(--c-accent); text-decoration: none; }

.cp-tag { display: inline-block; font-size: 10.5px; color: var(--c-text-soft); background: var(--c-surface-2); border: 1px solid var(--c-border); padding: 1px 8px; border-radius: 3px; text-transform: lowercase; letter-spacing: 0.02em; font-family: var(--ff-mono); }
.cp-tag-quiet { color: var(--c-muted); border-style: dashed; background: transparent; }

/* Activity log rows */
.cp-log {
    display: grid; grid-template-columns: 66px 1fr;
    gap: 4px 12px; padding: 10px 16px;
    font-size: 12.5px;
    border-bottom: 1px dashed var(--c-border);
}
.cp-log:last-child { border-bottom: 0; }
.cp-log-time { color: var(--c-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cp-log-who  { color: var(--c-accent); font-size: 11.5px; font-weight: 600; }
.cp-log-what { grid-column: 2; color: var(--c-text); }
.cp-log-target { color: var(--c-muted); font-size: 11.5px; margin-left: 4px; font-family: var(--ff-mono); }

/* ---------- Server resources / Services panels ---------- */
.cp-kv-list { padding: 4px 0; }
.cp-kv-row {
    display: grid; grid-template-columns: 100px 1fr;
    gap: 12px; align-items: start;
    padding: 10px 16px;
    border-bottom: 1px solid var(--c-border);
    font-size: 13px;
}
.cp-kv-row:last-child { border-bottom: 0; }
.cp-kv-row:hover { background: var(--c-surface-2); }
.cp-kv-key { color: var(--c-muted); font-weight: 600; }
.cp-kv-val { color: var(--c-text); font-variant-numeric: tabular-nums; }
.cp-kv-val .cp-stat-bar { margin-top: 6px; max-width: 220px; }
.cp-muted-inline { color: var(--c-muted); font-weight: 400; }

.cp-svc-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
    padding: 10px 16px;
}
.cp-svc { display: flex; align-items: center; gap: 8px; padding: 7px 8px; margin: 0 -8px; border-radius: 5px; font-size: 13px; color: var(--c-text); transition: background .12s; }
.cp-svc:hover { background: var(--c-surface-2); }
.cp-panel-head-badge { font-size: 11.5px; font-weight: 600; color: var(--c-muted); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; }

/* ---------- Connections-over-time chart ---------- */
.cp-conn-panel { margin-bottom: 20px; }
.cp-conn-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--c-text-soft); }
.cp-conn-legend-item { display: flex; align-items: center; gap: 6px; }
.cp-conn-legend-item b { color: var(--c-text); font-variant-numeric: tabular-nums; }
.cp-conn-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.cp-conn-dot--total { background: var(--c-primary); }
.cp-conn-dot--web { background: var(--c-accent); }
.cp-conn-body { position: relative; padding: 14px 16px 10px; }
#cp-conn-chart { width: 100%; height: 160px; display: block; overflow: visible; }
.cp-conn-grid { stroke: var(--c-border); stroke-width: 1; }
.cp-conn-axis-label { font-size: 9.5px; fill: var(--c-muted); font-family: var(--ff); }
.cp-conn-area { fill: var(--c-primary); opacity: 0.12; }
.cp-conn-line--total { fill: none; stroke: var(--c-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cp-conn-line--web { fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 4 3; }
.cp-conn-dot-end { stroke: var(--c-surface); stroke-width: 2; }
.cp-conn-empty { display: none; padding: 30px 0; text-align: center; color: var(--c-muted); font-size: 13px; }
.cp-conn-body.is-empty #cp-conn-chart { display: none; }
.cp-conn-body.is-empty .cp-conn-empty { display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
    .cp-columns { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .bp-shell { grid-template-columns: 60px 1fr; }
    .bp-brand-name, .bp-nav-label, .bp-sidebar-foot { display: none; }
    .bp-brand { justify-content: center; padding: 14px 8px; }
    .bp-nav-item { justify-content: center; padding: 12px 8px; border-left-width: 0; border-top: 3px solid transparent; }
    .bp-nav-item.is-active { border-left-width: 0; border-top-color: var(--c-sidebar-accent); }
    .bp-content { padding: 16px; }
    .bp-fm { grid-template-columns: 1fr; }
    .bp-fm-tree { position: static; max-height: 240px; }
    .bp-db-layout { grid-template-columns: 1fr; }
    .bp-db-tree { max-height: 240px; }
}