:root {
    color-scheme: light;
    --bg: #eef3f8;
    --panel: rgba(255, 255, 255, 0.84);
    --panel-solid: #ffffff;
    --text: #17202a;
    --muted: #607083;
    --line: rgba(104, 123, 145, 0.22);
    --accent: #5867d8;
    --accent-2: #1c9a8b;
    --good: #0e8f54;
    --warn: #b66a00;
    --bad: #b42318;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

a {
    color: inherit;
}

.public-status {
    background:
        linear-gradient(rgba(27, 36, 58, 0.22), rgba(27, 36, 58, 0.22)),
        radial-gradient(circle at top left, rgba(114, 126, 214, 0.34), transparent 30rem),
        radial-gradient(circle at 84% 18%, rgba(45, 176, 157, 0.2), transparent 24rem),
        linear-gradient(135deg, #dce5ef, #f4f7fa 46%, #cbd7e5);
}

.public-shell {
    width: min(1160px, calc(100% - 20px));
    margin: 0 auto;
    padding: 10px 0 28px;
}

.status-summary {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.62), rgba(230,237,248,0.42));
    box-shadow: 0 16px 38px rgba(45, 63, 91, 0.18), inset 0 1px 0 rgba(255,255,255,0.58);
    backdrop-filter: blur(10px);
}

.status-summary span {
    display: block;
    margin-bottom: 4px;
    color: #415165;
    font-size: 12px;
}

.status-summary strong {
    font-size: 17px;
}

.summary-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-logo {
    display: block;
    width: min(300px, 100%);
    height: 54px;
    object-fit: contain;
    object-position: left center;
}

.summary-stat {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-self: center;
    gap: 6px;
    align-items: center;
}

.summary-stat svg {
    width: 20px;
    height: 20px;
}

.summary-stat.good svg { fill: #16a05f; }
.summary-stat.warn svg { fill: #d58a00; }
.summary-stat.maint svg { fill: #d14f3e; }

.summary-stat span {
    margin: 0;
    white-space: nowrap;
}

.summary-stat strong {
    margin-left: 2px;
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.38);
    border: 1px solid rgba(255,255,255,0.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
    text-align: center;
}

.summary-icon,
.os-icon {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #6674e8, #5a44a9);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.38);
}

.summary-icon svg {
    width: 17px;
    height: 17px;
    fill: #fff;
}

.node-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.node-card {
    min-height: 184px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255,255,255,0.66), rgba(241,246,252,0.36));
    box-shadow: 0 16px 34px rgba(33, 48, 71, 0.18), inset 0 1px 0 rgba(255,255,255,0.7);
    backdrop-filter: blur(14px) saturate(1.16);
}

.node-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
}

.node-title h2 {
    margin: 0 0 2px;
    font-size: 14px;
    line-height: 1.2;
}

.node-metrics dt {
    color: var(--muted);
    font-size: 11px;
}

.node-title strong {
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 999px;
    color: #0d7044;
    background: #dff7ea;
    font-size: 11px;
    white-space: nowrap;
}

.node-card.warning .node-title strong {
    color: #7a4800;
    background: #fff0d6;
}

.node-card.offline .node-title strong,
.node-card.maintenance .node-title strong {
    color: #7b271a;
    background: #fde3de;
}

.node-os {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    color: #2e3848;
    font-size: 12px;
    font-weight: 700;
}

.os-icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    overflow: hidden;
}

.os-icon svg {
    width: 19px;
    height: 19px;
    fill: #fff;
}

.os-icon.centos {
    background: rgba(255,255,255,0.76);
}

.os-icon.ubuntu {
    background: linear-gradient(135deg, #e95420, #f6a35e);
}

.os-icon.linux {
    background: linear-gradient(135deg, #2f3a49, #7b8798);
}

.bars {
    display: grid;
    gap: 6px;
}

.bars div {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 6px;
    align-items: center;
}

.bars span {
    color: var(--muted);
    font-size: 11px;
}

.bars b {
    font-size: 11px;
    text-align: right;
}

.bars i {
    grid-column: 1 / -1;
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(44, 55, 70, 0.12);
}

.bars i::before {
    content: "";
    display: block;
    width: var(--value);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #39b77c, #f1a23a 64%, #e25565);
    transition: width 520ms ease;
    animation: barGlow 1.6s ease-in-out infinite;
}

.node-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
    margin: 10px 0 0;
}

.node-metrics .wide {
    grid-column: span 2;
}

.node-metrics div {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.node-metrics dt {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
}

.node-metrics svg {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    fill: #6a5fd4;
}

.node-metrics dd {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
    text-align: right;
}

.value-pill,
.traffic-up,
.traffic-down {
    --chip-rgb: 88, 103, 216;
    --chip-color: #3446a5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 0;
    padding: 0;
    border: 0;
    font-weight: 900;
    line-height: 1.15;
    white-space: nowrap;
    color: var(--chip-color);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.value-pill::before,
.traffic-up::before,
.traffic-down::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgb(var(--chip-rgb));
    opacity: 0.82;
}

.value-pill.good {
    --chip-rgb: 33, 165, 98;
    --chip-color: #087242;
}

.value-pill.warn {
    --chip-rgb: 214, 144, 16;
    --chip-color: #7b4d00;
}

.value-pill.bad {
    --chip-rgb: 209, 79, 62;
    --chip-color: #992217;
}

.value-pill.neutral {
    --chip-rgb: 96, 112, 131;
    --chip-color: #45566a;
}

.value-pill.blue {
    --chip-rgb: 54, 113, 204;
    --chip-color: #175fc7;
}

.value-pill.violet {
    --chip-rgb: 117, 83, 202;
    --chip-color: #5f3ab8;
}

.value-pill.cyan {
    --chip-rgb: 30, 151, 163;
    --chip-color: #096a73;
}

.traffic-up {
    --chip-rgb: 112, 86, 208;
    --chip-color: #5b46c8;
}

.traffic-down {
    margin-left: 5px;
    --chip-rgb: 24, 156, 98;
    --chip-color: #0a8b5c;
}

.node-metrics .wide dd {
    font-size: 12px;
}

@keyframes barGlow {
    0%, 100% { filter: saturate(1); }
    50% { filter: saturate(1.28) brightness(1.05); }
}

.page,
.auth-page {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 48px;
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.glass-panel,
.admin-hero,
.install-panel,
.admin-node-card {
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255,255,255,0.68), rgba(241,246,252,0.38));
    box-shadow: 0 16px 34px rgba(33, 48, 71, 0.18), inset 0 1px 0 rgba(255,255,255,0.72);
    backdrop-filter: blur(14px) saturate(1.16);
}

.admin-shell {
    display: grid;
    gap: 10px;
    width: min(1420px, calc(100% - 18px));
}

.admin-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
}

.admin-hero h1 {
    margin: 0;
    font-size: 18px;
}

.admin-hero p,
.install-panel p,
.admin-node-head span,
.admin-focus span,
.admin-metric-grid dt {
    color: var(--muted);
}

.admin-hero p {
    margin: 2px 0 0;
    font-size: 12px;
}

.install-panel {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px;
}

.install-panel h2 {
    margin: 0 0 3px;
    font-size: 14px;
}

.install-panel p {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
}

.install-panel code {
    display: block;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.44);
    border-radius: 6px;
    background: rgba(19, 28, 44, 0.78);
    color: #d9f7f2;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-node-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.admin-node-card {
    min-width: 0;
    padding: 10px;
}

.admin-node-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
}

.admin-title-block {
    min-width: 0;
}

.admin-node-head h2 {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.admin-node-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.admin-node-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    max-width: 100%;
    padding: 1px 5px;
    border: 1px solid rgba(255,255,255,0.42);
    border-radius: 5px;
    background: rgba(255,255,255,0.28);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.admin-focus {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 8px 0;
}

.admin-focus div {
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid rgba(255,255,255,0.42);
    border-radius: 6px;
    background: rgba(255,255,255,0.32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

.admin-focus .remark-focus {
    grid-column: span 2;
    border-color: rgba(91, 70, 200, 0.22);
    background: rgba(235, 226, 255, 0.34);
}

.admin-focus span {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
}

.admin-focus strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.25;
}

.admin-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin: 0 0 8px;
}

.admin-metric-grid div {
    min-width: 0;
    padding: 5px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,0.24);
    border: 1px solid rgba(255,255,255,0.24);
}

.admin-metric-grid dt {
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
}

.admin-metric-grid dd {
    margin: 2px 0 0;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.admin-collapses {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    align-items: start;
}

.admin-edit-details,
.key-details,
.danger-details {
    min-width: 0;
    border: 1px solid rgba(255,255,255,0.34);
    border-radius: 6px;
    background: rgba(255,255,255,0.22);
}

.admin-edit-details[open],
.key-details[open],
.danger-details[open] {
    grid-column: 1 / -1;
    background: rgba(255,255,255,0.34);
}

.admin-edit-details summary,
.key-details summary,
.danger-details summary {
    cursor: pointer;
    padding: 6px 8px;
    color: #405168;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    list-style-position: inside;
}

.admin-edit-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    align-items: end;
    padding: 0 8px 8px;
}

.admin-edit-grid .wide {
    grid-column: span 2;
}

.admin-edit-grid label {
    gap: 3px;
}

.admin-edit-grid label span {
    font-size: 10px;
}

.admin-node-card input,
.admin-node-card select {
    min-height: 30px;
    padding: 0 7px;
    border-radius: 5px;
    font-size: 12px;
}

.admin-node-card button {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 5px;
    font-size: 12px;
}

.key-details .key-box,
.danger-details form {
    margin: 0 8px 8px;
}

.key-state {
    white-space: nowrap;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.topbar h1,
.panel h2 {
    margin: 0;
}

.topbar p,
.server-head span,
time,
.metrics dt,
.key-box span {
    color: var(--muted);
}

.ghost-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    text-decoration: none;
}

.nav-links,
.button-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.panel,
.server-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-solid);
    box-shadow: 0 8px 26px rgba(23, 32, 38, 0.06);
}

.panel {
    padding: 18px;
    margin-bottom: 16px;
}

.login-panel {
    width: min(380px, 100%);
    display: grid;
    gap: 12px;
}

.notice,
.empty {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
}

.notice.error {
    border-color: #f1b5ae;
    color: var(--bad);
    background: #fff3f1;
}

.notice.success {
    border-color: #b4dfc7;
    color: var(--good);
    background: #effaf3;
}

label {
    display: grid;
    gap: 6px;
}

label span {
    color: var(--muted);
    font-size: 13px;
}

input,
select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 10px;
    background: #fff;
    color: var(--text);
    font: inherit;
}

button {
    min-height: 38px;
    border: 0;
    border-radius: 6px;
    padding: 0 14px;
    background: #3f8587;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

button.secondary {
    background: #edf4f5;
    color: #095e61;
}

button.danger {
    background: #fff0ee;
    color: var(--bad);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    align-items: end;
    gap: 12px;
}

.form-grid .wide {
    grid-column: span 2;
}

.server-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
}

.status.online { color: #0d5b35; background: #dff7ea; }
.status.warning { color: #7a4800; background: #fff0d6; }
.status.offline { color: #4b5563; background: #eceff2; }
.status.maintenance { color: #7b271a; background: #fde3de; }

.admin-node-card .status {
    min-height: 22px;
    padding: 0 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}

.metrics div {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fbfcfc;
}

.metrics dd {
    margin: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.admin-list {
    display: grid;
    gap: 16px;
}

.key-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    margin: 14px 0;
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: 6px;
    background: #fbfcfc;
}

.key-box code {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
}

body .admin-node-card .key-box {
    gap: 8px;
    padding: 8px;
    background: rgba(255,255,255,0.42);
}

.admin-node-card .key-box span {
    font-size: 10px;
}

.admin-node-card .key-box code {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.35;
}

.admin-node-card .button-row {
    padding: 0 8px 8px;
    gap: 6px;
}

@media (max-width: 1180px) {
    .admin-node-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .node-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-node-grid,
    .install-panel {
        grid-template-columns: 1fr;
    }

    .status-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-grid,
    .metrics,
    .admin-edit-grid,
    .admin-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-collapses {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .public-shell,
    .page {
        width: min(100% - 18px, 1180px);
    }

    .status-summary,
    .node-grid,
    .node-metrics,
    .form-grid,
    .metrics,
    .admin-edit-grid,
    .admin-metric-grid,
    .admin-focus,
    .admin-collapses {
        grid-template-columns: 1fr;
    }

    .form-grid .wide {
        grid-column: span 1;
    }

    .node-metrics .wide {
        grid-column: span 1;
    }

    .admin-edit-grid .wide,
    .admin-focus .remark-focus {
        grid-column: span 1;
    }

    .admin-hero {
        align-items: flex-start;
        flex-direction: column;
    }
}