/* ESTELAR Panel Redesign Alpha 1
   Local development branch: shared shell + server overview.
   Main palette: #0a0a0a, restrained emerald accent, compact-medium density. */

:root {
    --panel-bg: #0a0a0a;
    --panel-bg-deep: #070707;
    --panel-surface: #0f1012;
    --panel-surface-raised: #131416;
    --panel-surface-soft: #17181b;
    --panel-line: rgba(255,255,255,.075);
    --panel-line-strong: rgba(255,255,255,.13);
    --panel-text: #f4f5f6;
    --panel-muted: #858b95;
    --panel-faint: #5f6570;
    --panel-accent: #28d878;
    --panel-accent-soft: rgba(40,216,120,.12);
    --panel-accent-line: rgba(40,216,120,.28);
    --panel-blue: #5c9dff;
    --panel-orange: #f09a3e;
    --panel-cyan: #34c5d9;
    --panel-danger: #f06468;
    --panel-warning: #e1b84f;
    --panel-radius: 14px;
    --panel-radius-sm: 10px;
    --panel-sidebar: 236px;
    --panel-top-offset: 84px;
    --panel-shadow: 0 18px 46px rgba(0,0,0,.26);
}

body.server-panel-page {
    color: var(--panel-text);
    background:
        radial-gradient(circle at 74% 0%, rgba(255,255,255,.026), transparent 29rem),
        linear-gradient(180deg, #0b0b0c 0%, var(--panel-bg) 36%, #080808 100%);
    font-size: 14px;
}

body.server-panel-page .bg-glow,
body.server-panel-page .interactive-field {
    display: none !important;
}

body.server-panel-page main {
    min-height: calc(100vh - 116px);
    padding-bottom: 44px;
}

body.server-panel-page .legal-footer {
    display: none;
}

body.server-panel-page .support-float {
    right: 20px;
    bottom: 18px;
    border: 1px solid var(--panel-line);
    background: rgba(12,12,13,.93);
    box-shadow: var(--panel-shadow);
}

/* Community strip */
.channel-ribbon {
    position: relative;
    z-index: 45;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(90deg, rgba(40,216,120,.10), rgba(255,255,255,.025) 52%, rgba(52,197,217,.07));
}

.channel-ribbon[hidden] { display: none; }

.channel-ribbon-inner {
    width: min(100% - 32px, 1380px);
    min-height: 34px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #b9bec7;
    font-size: 12px;
}

.channel-ribbon-kicker {
    color: var(--panel-accent);
    font-weight: 750;
    letter-spacing: .045em;
    text-transform: uppercase;
    font-size: 10px;
}

.channel-ribbon-links { display: flex; gap: 7px; }
.channel-ribbon-links a {
    min-height: 24px;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--panel-line);
    border-radius: 7px;
    color: #eef1f3;
    background: rgba(255,255,255,.025);
    text-decoration: none;
    font-weight: 650;
}
.channel-ribbon-links a:hover { border-color: var(--panel-accent-line); background: var(--panel-accent-soft); }
.channel-ribbon-close {
    position: absolute;
    right: 8px;
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    color: var(--panel-muted);
    font-size: 17px;
    cursor: pointer;
}

/* Top navigation */
body.server-panel-page .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 0 max(22px, calc((100vw - 1460px) / 2));
    display: flex;
    align-items: center;
    border: 0;
    border-bottom: 1px solid var(--panel-line);
    border-radius: 0;
    background: rgba(8,8,9,.92);
    backdrop-filter: blur(18px);
    box-shadow: none;
}

body.server-panel-page .site-header::before,
body.server-panel-page .site-header::after { display: none; }

body.server-panel-page .brand {
    min-width: 205px;
    gap: 10px;
    color: #fff;
    font-size: 13px;
    letter-spacing: .075em;
}

body.server-panel-page .brand-mark {
    width: 30px;
    height: 30px;
    border: 1px solid var(--panel-line);
    background: var(--panel-surface);
    box-shadow: none;
}

body.server-panel-page .brand-mark img { width: 23px; height: 23px; }

body.server-panel-page .nav {
    width: 100%;
    justify-content: flex-end;
    gap: 4px;
}

body.server-panel-page .nav > a {
    padding: 8px 10px;
    border-radius: 8px;
    color: #9da3ad;
    font-size: 12px;
    font-weight: 650;
}

body.server-panel-page .nav > a:hover {
    color: #fff;
    background: rgba(255,255,255,.04);
}

body.server-panel-page .profile-menu summary {
    width: 36px;
    height: 36px;
    border: 1px solid var(--panel-line);
    background: var(--panel-surface);
}

body.server-panel-page .profile-dropdown {
    border: 1px solid var(--panel-line-strong);
    background: #101113;
    box-shadow: 0 24px 70px rgba(0,0,0,.48);
}

/* Compact server identity */
body.server-panel-page .panel-server-head {
    width: min(100% - 36px, 1460px);
    min-height: 76px;
    margin: 18px auto 0;
    padding: 13px 16px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--panel-line);
    border-radius: var(--panel-radius);
    background: linear-gradient(105deg, #111214 0%, #0f1012 62%, #121315 100%);
    box-shadow: 0 14px 36px rgba(0,0,0,.18);
}

body.server-panel-page .server-avatar-wrap {
    position: relative;
    width: 47px;
    height: 47px;
}
body.server-panel-page .server-avatar-img,
body.server-panel-page .server-avatar-fallback {
    width: 47px;
    height: 47px;
    border-radius: 11px;
    border: 1px solid var(--panel-line-strong);
    background: #17181a;
    box-shadow: none;
}
body.server-panel-page .server-avatar-fallback {
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
}
.server-avatar-status {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 12px;
    height: 12px;
    border: 3px solid #111214;
    border-radius: 50%;
    background: #777;
}
.server-avatar-status.status-online { background: var(--panel-accent); }
.server-avatar-status.status-starting,
.server-avatar-status.status-restarting { background: var(--panel-warning); }
.server-avatar-status.status-offline,
.server-avatar-status.status-stopping { background: var(--panel-danger); }

body.server-panel-page .server-title-block .eyebrow {
    margin-bottom: 2px;
    color: var(--panel-muted);
    font-size: 9px;
    letter-spacing: .12em;
}
.server-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.server-panel-page .server-title-row h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.15;
}
.server-head-meta { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.server-head-meta > span,
.server-address-chip {
    min-height: 25px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--panel-line);
    border-radius: 7px;
    background: rgba(255,255,255,.022);
    color: #9ba1aa;
    font: inherit;
    font-size: 11px;
}
.server-address-chip { cursor: pointer; color: #dfe2e5; }
.server-address-chip:hover { border-color: var(--panel-accent-line); background: var(--panel-accent-soft); }
.server-address-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.server-address-chip .copy-mark { color: var(--panel-muted); }
.panel-server-head-actions { align-items: flex-end; gap: 7px; }
.compact-button { min-height: 34px !important; padding: 7px 11px !important; border-radius: 9px !important; font-size: 12px !important; }

/* Main two-column shell */
body.server-panel-page .panel-workspace {
    width: min(100% - 36px, 1460px);
    margin-top: 14px;
    display: grid;
    grid-template-columns: var(--panel-sidebar) minmax(0,1fr);
    gap: 16px;
    align-items: start;
}

.panel-sidebar {
    position: sticky;
    top: 72px;
    min-height: calc(100vh - 104px);
    padding: 10px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--panel-line);
    border-radius: var(--panel-radius);
    background: #0d0e10;
    box-shadow: 0 12px 34px rgba(0,0,0,.2);
}

.panel-sidebar::before,
.panel-sidebar::after { display: none !important; }

.panel-sidebar-server {
    min-height: 56px;
    padding: 9px;
    display: grid;
    grid-template-columns: 9px minmax(0,1fr) 28px;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid var(--panel-line);
    margin-bottom: 9px;
}
.panel-sidebar-server-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #646973;
    box-shadow: 0 0 0 4px rgba(255,255,255,.025);
}
.panel-sidebar-server-dot.status-online { background: var(--panel-accent); box-shadow: 0 0 0 4px rgba(40,216,120,.09); }
.panel-sidebar-server b,
.panel-sidebar-server small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-sidebar-server b { color: #f3f4f5; font-size: 12px; }
.panel-sidebar-server small { margin-top: 2px; color: var(--panel-muted); font-size: 9px; }
.panel-copy-icon {
    width: 28px;
    height: 28px;
    padding: 6px;
    border: 1px solid var(--panel-line);
    border-radius: 7px;
    background: transparent;
    color: var(--panel-muted);
    cursor: pointer;
}
.panel-copy-icon:hover { color: var(--panel-accent); border-color: var(--panel-accent-line); }
.panel-copy-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; }

body.server-panel-page .server-tabs-toggle { display: none; }
body.server-panel-page .server-tabs-list { display: flex; flex-direction: column; gap: 3px; }
.panel-nav-label {
    padding: 7px 10px 4px;
    color: #565d68;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.panel-nav-label-spaced { margin-top: 8px; }
body.server-panel-page .server-tabs-list a {
    min-height: 36px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #969ca6;
    background: transparent;
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
    box-shadow: none;
    transform: none !important;
}
body.server-panel-page .server-tabs-list a:hover {
    color: #e9ebed;
    background: rgba(255,255,255,.032);
}
body.server-panel-page .server-tabs-list a.active {
    border-color: rgba(40,216,120,.15);
    color: #f5fff8;
    background: linear-gradient(90deg, rgba(40,216,120,.14), rgba(40,216,120,.055));
}
body.server-panel-page .server-tabs-list a.active::before {
    content: '';
    position: absolute;
    left: -1px;
    width: 2px;
    height: 19px;
    border-radius: 2px;
    background: var(--panel-accent);
}
body.server-panel-page .server-tabs-list a { position: relative; }
body.server-panel-page .server-tabs-list a svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body.server-panel-page .server-tabs-list a.active svg { color: var(--panel-accent); }

.panel-sidebar-back {
    margin-top: auto;
    min-height: 36px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--panel-line);
    color: var(--panel-muted);
    text-decoration: none;
    font-size: 11px;
}
.panel-sidebar-back:hover { color: #fff; }
.panel-sidebar-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.panel-stage { min-width: 0; }
.panel-stage > * + * { margin-top: 14px; }

.panel-page-heading {
    min-height: 61px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.panel-page-heading h2 { margin: 2px 0 0; color: #fff; font-size: clamp(20px,2.2vw,27px); line-height: 1.15; }
.panel-page-heading p { margin: 5px 0 0; color: var(--panel-muted); font-size: 12px; }
.panel-page-kicker,
.panel-card-kicker {
    color: var(--panel-muted);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.panel-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.panel-heading-actions form { margin: 0; }

body.server-panel-page .button {
    min-height: 36px;
    padding: 8px 13px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 720;
    box-shadow: none;
    transform: none !important;
}
body.server-panel-page .button::after { display: none; }
body.server-panel-page .button.primary {
    color: #03150a;
    border-color: #31dd80;
    background: #31dd80;
}
body.server-panel-page .button.primary:hover { background: #45e58f; }
body.server-panel-page .button.ghost {
    color: #e4e7e9;
    border-color: var(--panel-line-strong);
    background: #121315;
}
body.server-panel-page .button.ghost:hover { border-color: rgba(255,255,255,.22); background: #17181b; }
body.server-panel-page .button.danger {
    color: #ffb5b8;
    border-color: rgba(240,100,104,.28);
    background: rgba(240,100,104,.09);
}

/* Alerts */
.panel-alert {
    min-height: 54px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--panel-line);
    border-radius: var(--panel-radius-sm);
    background: #101113;
}
.panel-alert b,
.panel-alert small { display: block; }
.panel-alert b { font-size: 12px; }
.panel-alert small { margin-top: 3px; color: var(--panel-muted); font-size: 10px; }
.panel-alert-warning { border-color: rgba(225,184,79,.25); background: rgba(225,184,79,.055); }
.panel-alert-danger { border-color: rgba(240,100,104,.25); background: rgba(240,100,104,.055); }

/* Metrics */
.panel-metrics {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
}
.panel-metric {
    position: relative;
    min-width: 0;
    min-height: 104px;
    padding: 13px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    gap: 10px;
    overflow: hidden;
    border: 1px solid var(--panel-line);
    border-radius: var(--panel-radius-sm);
    background: #101113;
}
.panel-metric-icon {
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 9px;
    color: var(--metric-color);
    background: color-mix(in srgb, var(--metric-color) 12%, transparent);
}
.panel-metric-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.panel-metric span { display: block; color: #9399a2; font-size: 10px; font-weight: 650; }
.panel-metric b { display: block; margin-top: 4px; color: #fff; font-size: 19px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-metric small { display: block; margin-top: 4px; color: #646b75; font-size: 9px; }
.panel-metric > i {
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 11px;
    height: 3px;
    overflow: hidden;
    border-radius: 3px;
    background: #22262d;
}
.panel-metric > i::after {
    content: '';
    display: block;
    width: min(var(--value,0%),100%);
    height: 100%;
    border-radius: inherit;
    background: var(--metric-color);
    transition: width .55s cubic-bezier(.22,.72,.2,1);
    will-change: width;
}
.panel-metric-blue { --metric-color: var(--panel-blue); }
.panel-metric-green { --metric-color: var(--panel-accent); }
.panel-metric-orange { --metric-color: var(--panel-orange); }
.panel-metric-cyan { --metric-color: var(--panel-cyan); }

/* Shared cards */
.panel-card,
body.server-panel-page .glass-card,
body.server-panel-page .stat-card,
body.server-panel-page .panel-card {
    border: 1px solid var(--panel-line);
    border-radius: var(--panel-radius);
    background: linear-gradient(135deg,#101113 0%,#0f1012 100%);
    box-shadow: none;
}
body.server-panel-page .glass-card::before,
body.server-panel-page .glass-card::after,
body.server-panel-page .stat-card::before,
body.server-panel-page .stat-card::after,
body.server-panel-page .magnetic-card::after { display: none !important; }
body.server-panel-page .glass-card:hover,
body.server-panel-page .stat-card:hover { border-color: var(--panel-line-strong); }

.panel-overview-grid {
    display: grid;
    grid-template-columns: minmax(0,1.16fr) minmax(340px,.84fr);
    gap: 12px;
}
.panel-overview-grid-lower { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.panel-card { padding: 16px; }
.panel-card-head { min-height: 34px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-card-head h3 { margin: 3px 0 0; color: #f7f8f9; font-size: 15px; }
.panel-text-link { color: var(--panel-accent); font-size: 10px; font-weight: 700; text-decoration: none; }
.panel-muted { color: var(--panel-muted); font-size: 10px; }

.panel-plan-main {
    margin-top: 16px;
    padding: 12px;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--panel-line);
    border-radius: 11px;
    background: #0c0d0e;
}
.panel-plan-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: var(--panel-accent-soft); color: var(--panel-accent); font-size: 17px; font-weight: 800; }
.panel-plan-main b,
.panel-plan-main span { display: block; }
.panel-plan-main b { color: #fff; font-size: 14px; }
.panel-plan-main span { margin-top: 3px; color: var(--panel-muted); font-size: 10px; }
.panel-plan-main .panel-plan-state { margin: 0; padding: 5px 8px; border: 1px solid var(--panel-accent-line); border-radius: 999px; color: var(--panel-accent); background: var(--panel-accent-soft); font-size: 9px; font-weight: 700; }
.panel-plan-specs { margin-top: 12px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.panel-plan-specs div { min-width: 0; padding: 9px; border: 1px solid var(--panel-line); border-radius: 9px; background: rgba(255,255,255,.015); }
.panel-plan-specs span,
.panel-plan-specs b { display: block; }
.panel-plan-specs span { color: var(--panel-muted); font-size: 9px; }
.panel-plan-specs b { margin-top: 4px; color: #f2f3f4; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.panel-address-copy {
    width: 100%;
    margin-top: 16px;
    padding: 11px 12px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 19px;
    text-align: left;
    border: 1px solid var(--panel-line-strong);
    border-radius: 10px;
    background: #090a0b;
    color: #fff;
    cursor: pointer;
}
.panel-address-copy span { grid-column: 1/-1; color: var(--panel-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.panel-address-copy b { margin-top: 5px; font: 700 13px ui-monospace,SFMono-Regular,Consolas,monospace; overflow: hidden; text-overflow: ellipsis; }
.panel-address-copy svg { width: 18px; height: 18px; align-self: end; fill: none; stroke: var(--panel-muted); stroke-width: 1.7; }
.panel-address-copy:hover { border-color: var(--panel-accent-line); }
.panel-connection-meta { margin-top: 10px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.panel-connection-meta div { padding: 9px; border: 1px solid var(--panel-line); border-radius: 9px; }
.panel-connection-meta span,
.panel-connection-meta b { display: block; }
.panel-connection-meta span { color: var(--panel-muted); font-size: 8px; }
.panel-connection-meta b { margin-top: 3px; color: #e9ebed; font-size: 10px; }

.panel-velocity-card { padding: 17px; display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 18px; }
.panel-velocity-card h3 { margin: 5px 0 4px; color: #fff; font-size: 18px; }
.panel-velocity-card p { margin: 0; color: var(--panel-muted); font-size: 11px; }
body.server-panel-page .velocity-overview-flow { margin-top: 14px; gap: 8px; }
body.server-panel-page .velocity-overview-flow > div { padding: 9px 10px; border-radius: 9px; border: 1px solid var(--panel-line); background: #0b0c0d; }
body.server-panel-page .velocity-overview-flow span { color: var(--panel-muted); font-size: 8px; }
body.server-panel-page .velocity-overview-flow b { font-size: 10px; }
body.server-panel-page .velocity-overview-actions { padding: 12px; border: 1px solid var(--panel-line); border-radius: 11px; background: #0c0d0e; }
body.server-panel-page .paper-network-card { padding: 15px 17px; grid-template-columns: 38px minmax(0,1fr) auto; }
body.server-panel-page .paper-network-card h3 { margin: 4px 0; font-size: 15px; }
body.server-panel-page .paper-network-card p { margin: 0; color: var(--panel-muted); font-size: 10px; }

.panel-motd-preview { margin-top: 15px; min-height: 102px; padding: 13px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--panel-line-strong); border-radius: 10px; background: #08090a; }
.panel-motd-preview span { color: var(--panel-muted); font-size: 9px; }
.panel-motd-preview b { margin-top: 10px; color: #fff; font: 700 14px ui-monospace,SFMono-Regular,Consolas,monospace; }
.panel-motd-preview small { margin-top: 7px; color: #646a73; font-size: 9px; }

.panel-quick-links { margin-top: 14px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.panel-quick-links a { min-height: 62px; padding: 10px; display: grid; grid-template-columns: 27px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: center; border: 1px solid var(--panel-line); border-radius: 9px; background: #0c0d0e; text-decoration: none; }
.panel-quick-links a:hover { border-color: var(--panel-accent-line); background: var(--panel-accent-soft); }
.panel-quick-links a > span { grid-row: 1/3; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.04); color: var(--panel-accent); font: 700 12px ui-monospace,monospace; }
.panel-quick-links b { color: #e9ebed; font-size: 10px; }
.panel-quick-links small { color: var(--panel-muted); font-size: 8px; }

.panel-chart-card { min-height: 190px; }
.panel-timeline-chart { min-height: 124px; margin-top: 14px; padding: 8px 4px 0; }
body.server-panel-page .timeline-bar { background: linear-gradient(180deg,var(--panel-accent),rgba(40,216,120,.22)); box-shadow: none; }
body.server-panel-page .timeline-point strong { color: #dfe3e6; font-size: 9px; }
body.server-panel-page .timeline-point small { color: #5d636c; font-size: 8px; }

/* Existing server pages inherit the new shell */
body.server-panel-page .server-main > .glass-card,
body.server-panel-page .server-main > section.glass-card,
body.server-panel-page .server-main .panel-card {
    border-radius: var(--panel-radius);
}
body.server-panel-page .server-main h1,
body.server-panel-page .server-main h2,
body.server-panel-page .server-main h3 { color: #f3f4f5; }
body.server-panel-page .server-main .muted { color: var(--panel-muted); }
body.server-panel-page input,
body.server-panel-page textarea,
body.server-panel-page select,
body.server-panel-page .ios-select-button {
    min-height: 39px;
    border: 1px solid var(--panel-line-strong);
    border-radius: 9px;
    background: #090a0b;
    color: #f0f1f2;
    box-shadow: none;
}
body.server-panel-page input:focus,
body.server-panel-page textarea:focus,
body.server-panel-page select:focus,
body.server-panel-page .ios-select.open .ios-select-button {
    border-color: var(--panel-accent-line);
    box-shadow: 0 0 0 3px rgba(40,216,120,.07);
}
body.server-panel-page .ios-select-menu { border: 1px solid var(--panel-line-strong); border-radius: 9px; background: #111214; box-shadow: 0 20px 52px rgba(0,0,0,.42); }
body.server-panel-page .ios-select-option { color: #d7dade; background: transparent; }
body.server-panel-page .ios-select-option:hover,
body.server-panel-page .ios-select-option.selected { color: #fff; background: var(--panel-accent-soft); }

body.server-panel-page table { border-collapse: collapse; }
body.server-panel-page th { color: #777e88; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
body.server-panel-page td { color: #d9dcdf; font-size: 11px; }
body.server-panel-page th,
body.server-panel-page td { padding: 10px 11px; border-bottom: 1px solid var(--panel-line); }

/* Alpha 1 intentionally only tightens the old files/console pages; deep redesign comes in Alpha 2/3. */
body.server-panel-page .files-main .file-row,
body.server-panel-page .file-list-row { min-height: 43px; }
body.server-panel-page .console-window,
body.server-panel-page #consoleWindow { border-color: var(--panel-line); background: #070809; }
body.server-panel-page #consoleLog { font-size: 12px; line-height: 1.55; }

.panel-copy-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1000;
    transform: translate(-50%,16px);
    padding: 9px 12px;
    border: 1px solid var(--panel-accent-line);
    border-radius: 9px;
    background: #111413;
    color: #dff9e8;
    font-size: 11px;
    opacity: 0;
    pointer-events: none;
    transition: .18s ease;
    box-shadow: 0 18px 40px rgba(0,0,0,.38);
}
.panel-copy-toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 1080px) {
    :root { --panel-sidebar: 204px; }
    .panel-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .panel-overview-grid,
    .panel-overview-grid-lower { grid-template-columns: 1fr; }
    .panel-velocity-card { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .channel-ribbon-text { display: none; }
    .channel-ribbon-inner { justify-content: flex-start; min-height: 32px; }
    body.server-panel-page .site-header { padding: 0 13px; min-height: 54px; }
    body.server-panel-page .brand { min-width: 0; }
    body.server-panel-page .brand > span:last-child { display: none; }
    body.server-panel-page .mobile-nav-toggle { display: flex; }
    body.server-panel-page .nav { top: 54px; background: #0c0d0e; border: 1px solid var(--panel-line); }
    body.server-panel-page .panel-server-head { width: min(100% - 20px,1460px); grid-template-columns: auto minmax(0,1fr); margin-top: 10px; }
    .panel-server-head-actions { grid-column: 1/-1; width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
    .server-head-meta > span:nth-of-type(n+2) { display: none; }
    body.server-panel-page .panel-workspace { width: min(100% - 20px,1460px); grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
    .panel-sidebar { position: sticky; top: 58px; z-index: 34; min-height: auto; padding: 7px; }
    .panel-sidebar-server,
    .panel-sidebar-back,
    .panel-nav-label { display: none; }
    body.server-panel-page .server-tabs-toggle { display: flex; min-height: 42px; border: 0; background: #111214; }
    body.server-panel-page .server-tabs-list { display: none; grid-template-columns: repeat(2,minmax(0,1fr)); padding-top: 7px; }
    body.server-panel-page .server-tabs.open .server-tabs-list { display: grid; }
    body.server-panel-page .server-tabs-list a { min-height: 39px; }
    .panel-page-heading { align-items: flex-start; flex-direction: column; }
    .panel-heading-actions { width: 100%; justify-content: flex-start; }
    .panel-metrics { grid-template-columns: 1fr 1fr; }
    .panel-metric { min-height: 96px; }
    .panel-plan-specs { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .panel-connection-meta { grid-template-columns: 1fr 1fr; }
    .panel-connection-meta div:last-child { grid-column: 1/-1; }
    .panel-quick-links { grid-template-columns: 1fr; }
    body.server-panel-page .velocity-overview-flow { grid-template-columns: 1fr; }
    body.server-panel-page .velocity-overview-flow > i { transform: rotate(90deg); }
}

@media (max-width: 480px) {
    .channel-ribbon-kicker { display: none; }
    .channel-ribbon-links a { padding-inline: 7px; }
    body.server-panel-page .panel-server-head { padding: 10px; }
    body.server-panel-page .server-avatar-wrap,
    body.server-panel-page .server-avatar-img,
    body.server-panel-page .server-avatar-fallback { width: 41px; height: 41px; }
    .server-title-row { align-items: flex-start; flex-direction: column; gap: 5px; }
    .panel-metrics { grid-template-columns: 1fr; }
    .panel-plan-main { grid-template-columns: 38px minmax(0,1fr); }
    .panel-plan-state { grid-column: 1/-1; justify-self: start; }
    .panel-card { padding: 13px; }
    .panel-alert { align-items: flex-start; flex-direction: column; }
    body.server-panel-page .paper-network-card { grid-template-columns: 34px minmax(0,1fr); }
    body.server-panel-page .paper-network-card > :last-child { grid-column: 1/-1; }
}