.server-info-main {
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
    padding: 48px 0 80px;
}

.server-info-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
}

.server-info-heading > div > span,
.server-card-head span,
.server-document-head span,
.server-card-label,
.server-modal-head span {
    font-size:8px;
    font-weight:900;
    letter-spacing:.14em;
    color:#98a1aa;
}

.server-info-heading h1 {
    margin:8px 0 6px;
    font-size:31px;
    color:#293642;
}

.server-info-heading p {
    margin:0;
    color:#7d8791;
    font-size:10px;
    line-height:1.7;
}

.server-admin-button,
.document-edit-button {
    border:1px solid #dce2e7;
    border-radius:11px;
    background:#fff;
    color:#394652;
    min-height:38px;
    padding:0 14px;
    font-size:9px;
    font-weight:800;
    cursor:pointer;
}

.server-tabs {
    display:flex;
    gap:5px;
    margin-top:31px;
    padding:5px;
    border:1px solid #e1e5e9;
    border-radius:14px;
    background:#f5f7f8;
    overflow-x:auto;
}

.server-tabs button {
    flex:0 0 auto;
    min-height:38px;
    padding:0 17px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#7d8791;
    font-size:9px;
    font-weight:800;
    cursor:pointer;
}

.server-tabs button.active {
    background:#fff;
    color:#293642;
    box-shadow:0 2px 8px rgba(29,40,52,.06);
}

.server-tab-panel {
    display:none;
    margin-top:18px;
}

.server-tab-panel.active {
    display:block;
}

.connection-grid,
.status-detail-grid {
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);
    gap:14px;
}

.server-card,
.server-document-card {
    border:1px solid #e1e5e9;
    border-radius:19px;
    background:#fff;
    box-shadow:0 10px 34px rgba(35,46,58,.035);
}

.server-card {
    padding:23px;
}

.server-card-head,
.server-document-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
}

.server-card-head h2,
.server-document-head h2 {
    margin:6px 0 0;
    color:#2d3945;
    font-size:18px;
}

.server-live-badge {
    padding:6px 9px;
    border-radius:20px;
    background:#eef1f3;
    color:#7c8791;
    font-size:8px;
    font-weight:900;
}

.server-live-badge.online {
    background:#edf5f0;
    color:#527462;
}

.server-live-badge.offline {
    background:#f7eeee;
    color:#9b6363;
}

.server-access-row {
    min-height:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border-top:1px solid #edf0f2;
}

.server-access-row:first-of-type {
    margin-top:18px;
}

.server-access-row span {
    display:block;
    margin-bottom:6px;
    color:#8c969f;
    font-size:8px;
}

.server-access-row strong {
    color:#303c48;
    font-size:12px;
    word-break:break-all;
}

.server-access-row button {
    min-height:32px;
    padding:0 10px;
    border:1px solid #dce2e7;
    border-radius:9px;
    background:#fff;
    color:#66717c;
    font-size:8px;
    font-weight:800;
}

.server-access-actions {
    display:flex;
    gap:6px;
}

.server-access-message {
    margin-top:13px;
    padding:11px 13px;
    border-radius:11px;
    background:#f5f7f8;
    color:#79848e;
    font-size:9px;
    line-height:1.6;
}

.server-join-guide {
    margin-top:15px;
    color:#66727d;
    font-size:10px;
    line-height:1.8;
    white-space:pre-wrap;
}

.status-summary-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:18px;
}

.status-summary-grid > div {
    padding:15px;
    border-radius:13px;
    background:#f6f8f9;
}

.status-summary-grid span {
    display:block;
    color:#929ba4;
    font-size:8px;
}

.status-summary-grid strong {
    display:block;
    margin-top:6px;
    color:#303c48;
    font-size:16px;
}

.server-document-card {
    min-height:430px;
    padding:27px;
}

.server-document-body {
    margin-top:24px;
    padding-top:22px;
    border-top:1px solid #edf0f2;
    color:#414d59;
    font-size:11px;
    line-height:1.95;
    white-space:pre-wrap;
    word-break:keep-all;
}

.server-status-list {
    margin:19px 0 0;
}

.server-status-list > div {
    min-height:49px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-top:1px solid #edf0f2;
}

.server-status-list dt {
    color:#8b959e;
    font-size:9px;
}

.server-status-list dd {
    margin:0;
    color:#34404c;
    font-size:10px;
    font-weight:800;
}

.server-modal {
    position:fixed;
    inset:0;
    z-index:4000;
    display:grid;
    place-items:center;
    padding:20px;
}

.server-modal.hidden {
    display:none !important;
}

.server-modal-backdrop {
    position:absolute;
    inset:0;
    background:rgba(27,37,48,.38);
    backdrop-filter:blur(2px);
}

.server-modal-card {
    position:relative;
    width:min(620px,100%);
    max-height:calc(100vh - 40px);
    overflow:auto;
    padding:25px;
    border-radius:19px;
    background:#fff;
    box-shadow:0 25px 80px rgba(20,31,42,.22);
}

.document-modal-card {
    width:min(780px,100%);
}

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

.server-modal-head h2 {
    margin:6px 0 0;
    font-size:20px;
    color:#2c3945;
}

.server-modal-head > button {
    border:0;
    background:transparent;
    color:#7f8993;
    font-size:9px;
    cursor:pointer;
}

.server-modal-card label {
    display:block;
    margin-top:14px;
}

.server-modal-card label > span {
    display:block;
    margin-bottom:7px;
    color:#77828c;
    font-size:9px;
    font-weight:700;
}

.server-modal-card input,
.server-modal-card select,
.server-modal-card textarea {
    width:100%;
    box-sizing:border-box;
    border:1px solid #dfe4e8;
    border-radius:10px;
    background:#f8f9fa;
    color:#34404c;
    padding:11px 12px;
    outline:none;
    font:inherit;
    font-size:10px;
}

.server-modal-card textarea {
    resize:vertical;
    line-height:1.7;
}

.server-modal-card input:focus,
.server-modal-card select:focus,
.server-modal-card textarea:focus {
    border-color:#bfc8d1;
    background:#fff;
}

.server-form-grid {
    display:grid;
    grid-template-columns:1fr 130px;
    gap:10px;
}

.server-check-row {
    display:flex !important;
    align-items:center;
    gap:8px;
}

.server-check-row input {
    width:auto;
}

.server-check-row span {
    margin:0 !important;
}

.server-modal-actions {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:22px;
}

.server-modal-actions button {
    min-height:38px;
    padding:0 15px;
    border:1px solid #dce2e7;
    border-radius:10px;
    background:#fff;
    color:#65717c;
    font-size:9px;
    font-weight:800;
    cursor:pointer;
}

.server-modal-actions button.primary {
    border-color:#293642;
    background:#293642;
    color:#fff;
}

.server-form-error {
    margin-top:12px;
    padding:10px 12px;
    border-radius:9px;
    background:#f9eeee;
    color:#985d5d;
    font-size:9px;
}

.server-editor-note {
    margin:10px 0 0;
    color:#929ba4;
    font-size:8px;
    line-height:1.6;
}

.hidden {
    display:none !important;
}

@media (max-width:760px) {
    .server-info-main {
        width:calc(100% - 28px);
        padding-top:31px;
    }

    .server-info-heading {
        align-items:flex-start;
        flex-direction:column;
    }

    .connection-grid,
    .status-detail-grid {
        grid-template-columns:1fr;
    }

    .server-tabs {
        margin-top:23px;
    }

    .server-tabs button {
        padding:0 13px;
    }

    .server-card,
    .server-document-card {
        border-radius:16px;
    }

    .server-document-card {
        padding:20px;
    }

    .server-form-grid {
        grid-template-columns:1fr;
    }

    .server-access-row {
        align-items:flex-start;
        flex-direction:column;
        padding:14px 0;
    }
}


/* ==========================================================
   ForumHub Server Rich Content
   ========================================================== */

.server-rich-editor-label {
    margin-top:16px;
    margin-bottom:7px;
    color:#77828c;
    font-size:9px;
    font-weight:700;
}

.server-document-rich {
    margin-top:0;
}

.server-document-rich .rich-toolbar {
    top:0;
}

.server-document-rich .image-context-bar {
    top:49px;
}

.server-document-rich .rich-editor {
    min-height:430px;
    padding:25px 26px 80px;
}

.server-document-body {
    white-space:normal;
}

.server-document-body h2 {
    margin:30px 0 12px;
    font-size:22px;
}

.server-document-body h3 {
    margin:26px 0 10px;
    font-size:18px;
}

.server-document-body h4 {
    margin:22px 0 8px;
    font-size:15px;
}

.server-document-body p {
    margin:10px 0;
}

.server-document-body blockquote {
    margin:18px 0;
    padding:12px 16px;
    border-left:3px solid #cbd3da;
    background:#f6f8f9;
}

.server-document-body ul,
.server-document-body ol {
    padding-left:24px;
}

.server-document-body table {
    width:100%;
    margin:20px 0;
    border-collapse:collapse;
}

.server-document-body th,
.server-document-body td {
    padding:10px;
    border:1px solid #dfe4e8;
}

.server-document-body img {
    display:block;
    max-width:100%;
    height:auto;
}

.server-document-body figure {
    margin:22px 0;
}

.server-document-body figcaption {
    margin-top:7px;
    color:#8d979f;
    text-align:center;
    font-size:8px;
}

.server-document-body .fh-img-small {
    width:min(320px,100%);
}

.server-document-body .fh-img-medium {
    width:min(560px,100%);
}

.server-document-body .fh-img-large {
    width:min(850px,100%);
}

.server-document-body .fh-img-original {
    width:auto;
    max-width:100%;
}

.server-document-body .align-left {
    margin-left:0;
    margin-right:auto;
    text-align:left;
}

.server-document-body .align-center {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.server-document-body .align-right {
    margin-left:auto;
    margin-right:0;
    text-align:right;
}

.server-document-body .text-left {
    text-align:left;
}

.server-document-body .text-center {
    text-align:center;
}

.server-document-body .text-right {
    text-align:right;
}