@font-face {
    font-family: "Salted Shores";
    src: url("../fonts/SaltedShores-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    --cream: #e7d9ba;
    --deep-teal: #2c4f51;
    --seafoam: #4fa19a;
    --charcoal: #1a1f20;
    --rust: #d15a2a;
    --signal-orange: #ef6a2c;
    --status-teal: #6ca7a2;
    --status-green: #72d16b;
    --status-muted: #91aaa8;
    --black: #000;
    --desktop-logo-size: 2.625rem;
    --desktop-brand-lockup-height: calc(var(--desktop-logo-size) * 1.3);
    --desktop-banner-padding: clamp(0.65rem, 1vh, 1rem);
    --desktop-nav-height: 2.5rem;
    --desktop-header-height: calc(var(--desktop-brand-lockup-height) + var(--desktop-banner-padding) + var(--desktop-banner-padding));
    --site-footer-height: 2.2rem;
    --mobile-banner-padding: clamp(0.6rem, 1vh, 0.85rem);
    --mobile-logo-size: clamp(2.325rem, 9vw, 2.7rem);
    --mobile-brand-lockup-height: calc(var(--mobile-logo-size) * 1.3);
    --mobile-banner-height: calc(var(--mobile-brand-lockup-height) + var(--mobile-banner-padding) + var(--mobile-banner-padding));
    --mobile-menu-width: min(20rem, calc(100vw - 3.25rem));
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--black);
}

body {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    padding-bottom: var(--site-footer-height);
    overflow-x: clip;
    color: var(--cream);
    background: var(--black);
    font-family: "Bahnschrift", "Trebuchet MS", sans-serif;
}

.live-loading-placeholder {
    --live-placeholder-width: 62%;
    position: relative;
    min-width: 1.2rem;
    color: transparent !important;
    text-shadow: none !important;
}

.live-loading-placeholder > * {
    visibility: hidden !important;
}

.live-loading-placeholder::after {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0.28rem;
    width: var(--live-placeholder-width);
    max-width: calc(100% - 0.56rem);
    height: clamp(0.48rem, 0.72em, 0.8rem);
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 48%, rgba(130, 174, 169, 0.92), transparent 24%),
        radial-gradient(circle at 72% 54%, rgba(83, 126, 123, 0.82), transparent 34%),
        linear-gradient(105deg, rgba(67, 105, 103, 0.82) 28%, rgba(191, 223, 216, 0.98) 48%, rgba(67, 105, 103, 0.82) 68%);
    background-position: center, center, 125% 50%;
    background-size: 100% 100%, 100% 100%, 240% 100%;
    border-radius: 999px;
    box-shadow: 0 0 0.65rem rgba(91, 147, 142, 0.54);
    filter: blur(4.5px);
    opacity: 0.9;
    transform: translateY(-50%) scale(1.04);
    animation: live-loading-flash 1.4s ease-in-out infinite;
}

.live-loading-placeholder--short {
    --live-placeholder-width: 36%;
}

.live-loading-placeholder--medium {
    --live-placeholder-width: 61%;
}

.live-loading-placeholder--long {
    --live-placeholder-width: 82%;
}

.live-loading-placeholder--dot {
    --live-placeholder-width: clamp(0.52rem, 0.78em, 0.82rem);
}

.live-loading-placeholder--medium::after { animation-delay: -0.2s; }
.live-loading-placeholder--long::after { animation-delay: -0.45s; }
.live-loading-placeholder--dot::after { animation-delay: -0.7s; }

.live-loading-placeholder--dot::after {
    height: var(--live-placeholder-width);
    border-radius: 50%;
}

.account-profile > a.live-loading-placeholder--dot::after {
    top: 50%;
    left: 50%;
    width: 58%;
    max-width: none;
    height: 58%;
    transform: translate(-50%, -50%) scale(1.04);
}

@keyframes live-loading-flash {
    0% {
        background-position: center, center, 125% 50%;
        opacity: 0.68;
    }
    48% {
        opacity: 0.98;
    }
    100% {
        background-position: center, center, -125% 50%;
        opacity: 0.72;
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-loading-placeholder::after {
        animation: none;
    }
}

.site-background {
    position: fixed;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--black);
}

.site-background::before {
    position: absolute;
    inset: -2rem;
    content: "";
    opacity: 0.7;
    background-image: url("../images/ss-background-1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: blur(clamp(2px, 0.16vw, 5px));
    transform: scale(1.025);
}

.site-background::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, var(--black) 0%, rgba(0, 0, 0, 0.72) 7%, transparent 24%, transparent 76%, rgba(0, 0, 0, 0.72) 93%, var(--black) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, transparent 19%, transparent 69%, rgba(0, 0, 0, 0.8) 90%, var(--black) 100%),
        radial-gradient(ellipse at center, transparent 34%, rgba(0, 0, 0, 0.16) 58%, rgba(0, 0, 0, 0.88) 100%);
}

.site-header {
    --mobile-navigation-top: var(--mobile-banner-height);
    position: relative;
    z-index: 10;
    user-select: none;
    -webkit-user-select: none;
}

.site-header img,
.site-header a {
    -webkit-user-drag: none;
}

.site-header button,
.site-header a,
.site-header summary {
    -webkit-tap-highlight-color: transparent;
}

.brand-banner {
    --logo-size: var(--desktop-logo-size);
    --brand-lockup-height: var(--desktop-brand-lockup-height);

    position: relative;
    display: grid;
    grid-template-columns: calc(var(--logo-size) * 1.6) minmax(0, 1fr) var(--logo-size);
    align-items: center;
    min-height: 0;
    padding: var(--desktop-banner-padding) clamp(3.25rem, 4vw, 4rem) var(--desktop-banner-padding) clamp(1rem, 4vw, 4rem);
    column-gap: clamp(0.6rem, 1.75vw, 1.75rem);
    background: transparent;
    border: 0;
    box-shadow: none;
}

.brand-banner::after {
    grid-column: 3;
    width: var(--logo-size);
    content: "";
}

.brand-banner:has(.banner-profile)::after {
    display: none;
}

.brand-lockup {
    grid-column: 1;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    justify-items: center;
    align-self: center;
    width: calc(var(--logo-size) * 1.6);
    height: var(--brand-lockup-height);
}

.brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 0.4rem 0.6rem rgba(0, 0, 0, 0.58));
}

.brand-wordmark {
    display: grid;
    justify-items: center;
    margin: -0.14rem 0 0;
    font-family: "Salted Shores", fantasy;
    font-size: clamp(0.52rem, 0.7vw, 0.72rem);
    font-style: normal;
    font-weight: 400;
    line-height: 0.7;
    letter-spacing: 0.035em;
    text-align: center;
    text-shadow:
        0 0.08em 0 var(--deep-teal),
        0 0.15em 0.55em rgba(0, 0, 0, 0.86);
    transform: translateY(-0.18rem) rotate(-15deg);
    transform-origin: center;
    white-space: nowrap;
}

.brand-wordmark span {
    display: block;
}

.brand-wordmark-salted {
    color: var(--cream);
    transform: translateX(-0.28em);
}

.brand-wordmark-shores {
    color: var(--status-teal);
    transform: translateX(0.48em);
}

.banner-profile {
    --profile-logout-slot: 2.8rem;
    --profile-panel-padding: 0.24rem;
    --profile-panel-right: -3.04rem;

    position: relative;
    z-index: 4;
    grid-column: 3;
    justify-self: end;
    width: var(--logo-size);
    height: var(--logo-size);
}

.banner-profile-guest-login {
    position: absolute;
    top: 50%;
    right: 0;
    width: 9rem;
    margin: 0;
    transform: translateY(-50%);
}

.banner-profile-guest-login[hidden],
.banner-profile-panel[hidden] {
    display: none;
}

.banner-profile-panel {
    position: absolute;
    z-index: 5;
    top: 50%;
    right: var(--profile-panel-right);
    display: grid;
    grid-template-columns: auto var(--logo-size) var(--profile-logout-slot);
    align-items: center;
    column-gap: 0;
    width: max-content;
    max-width: min(22rem, calc(100vw - 1rem));
    min-height: var(--logo-size);
    padding: var(--profile-panel-padding);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    box-shadow: none;
    transform: translateY(-50%);
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.banner-profile.is-open .banner-profile-panel {
    background: #071011;
    border-color: rgba(79, 161, 154, 0.62);
    box-shadow: 0 0.65rem 1.6rem rgba(0, 0, 0, 0.72);
}

.banner-profile-trigger {
    grid-column: 2;
    justify-self: center;
    width: var(--logo-size);
    height: var(--logo-size);
    padding: 0.12rem;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
}

.banner-profile-trigger:hover,
.banner-profile-trigger:focus,
.banner-profile-trigger:active {
    background: transparent;
}

.banner-profile-trigger img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    -webkit-user-drag: none;
}

.banner-profile-menu {
    grid-column: 1;
    width: 0;
    max-width: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 140ms ease, visibility 0s linear 140ms;
}

.banner-profile.is-open .banner-profile-menu {
    width: auto;
    max-width: 16rem;
    padding-right: 0.28rem;
    overflow: visible;
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition-delay: 0s;
}

.banner-profile-guest-login .steam-sign-in img {
    width: 9rem;
}

.banner-profile-session {
    display: flex;
    align-items: center;
    gap: 0.38rem;
}

.banner-profile-identity p,
.banner-profile-unavailable {
    margin: 0;
}

.banner-profile-identity {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.banner-profile-identity strong {
    max-width: 8rem;
    overflow: hidden;
    color: var(--cream);
    font-size: 0.68rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.banner-profile-identity span {
    color: var(--status-teal);
    font-size: 0.48rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.banner-profile-identity code {
    color: var(--cream);
    font-size: 0.63rem;
    white-space: nowrap;
}

.banner-profile-steam-id {
    display: grid;
    gap: 0.06rem;
}

.banner-profile-steam-id-value {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.banner-profile-logout-form {
    grid-column: 3;
    justify-self: end;
    display: none;
    margin: 0;
}

.banner-profile.is-open .banner-profile-logout-form:not([hidden]) {
    display: block;
}

.banner-profile-account-link,
.banner-profile-logout,
.banner-profile-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.45rem;
    color: var(--cream);
    font: inherit;
    font-size: 0.58rem;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    background: rgba(209, 90, 42, 0.28);
    border: 1px solid rgba(209, 90, 42, 0.72);
    border-radius: 0.25rem;
}

.banner-profile-account-link {
    background: rgba(44, 79, 81, 0.72);
    border-color: rgba(79, 161, 154, 0.72);
}

.banner-profile-logout {
    padding: 0.22rem 0.3rem;
    font-size: 0.49rem;
    white-space: nowrap;
}

.banner-profile-copy {
    padding: 0.12rem 0.24rem;
    color: var(--status-teal);
    font-size: 0.43rem;
    background: transparent;
    border-color: rgba(79, 161, 154, 0.45);
}

.banner-profile-unavailable {
    color: var(--status-muted);
    font-size: 0.62rem;
    white-space: nowrap;
}

.mobile-navigation-toggle,
.mobile-navigation-button,
.mobile-navigation-scrim {
    display: none;
}

.primary-navigation {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: var(--desktop-nav-height);
    margin: 0;
    padding-inline: clamp(0.5rem, 2vw, 2rem);
    background: linear-gradient(180deg,
        rgba(44, 79, 81, 0.42) 0%,
        rgba(44, 79, 81, 0.2) 48%,
        rgba(44, 79, 81, 0) 100%);
    border: 0;
    box-shadow: none;
}

.primary-navigation > a,
.primary-navigation > .nav-disabled,
.nav-dropdown > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.32rem clamp(0.55rem, 0.95vw, 0.95rem);
    color: var(--cream);
    font-family: "Salted Shores", fantasy;
    font-size: clamp(0.9rem, 1.12vw, 1.15rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.09em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    background: transparent;
    transition: color 160ms ease;
}

.primary-navigation > .nav-disabled {
    cursor: default;
    opacity: 0.42;
}

.primary-navigation > a:hover,
.primary-navigation > a:focus-visible,
.nav-dropdown > summary:hover,
.nav-dropdown > summary:focus-visible,
.nav-dropdown[open] > summary {
    color: var(--seafoam);
    background: transparent;
    outline: none;
}

.nav-label {
    display: inline-block;
    padding: 0.05rem 0.12rem;
}

.primary-navigation > a:hover .nav-label,
.primary-navigation > a:focus-visible .nav-label,
.nav-dropdown > summary:hover .nav-label,
.nav-dropdown > summary:focus-visible .nav-label,
.nav-dropdown[open] > summary .nav-label {
    background: radial-gradient(ellipse at center, rgba(79, 161, 154, 0.18) 0%, transparent 74%);
}

.primary-navigation > a:focus-visible,
.nav-dropdown > summary:focus-visible {
    box-shadow: inset 0 -2px 0 var(--seafoam);
}

.primary-navigation > .nav-feature {
    color: var(--rust);
    text-shadow: 0 0 1rem rgba(209, 90, 42, 0.28);
}

.primary-navigation > .nav-feature:hover,
.primary-navigation > .nav-feature:focus-visible {
    color: var(--cream);
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--rust);
}

.primary-navigation > .nav-feature:hover .nav-label,
.primary-navigation > .nav-feature:focus-visible .nav-label {
    background: radial-gradient(ellipse at center, rgba(209, 90, 42, 0.2) 0%, transparent 74%);
}

.primary-navigation > a.is-active,
.primary-navigation > a[aria-current="page"] {
    color: var(--deep-teal);
    background: transparent;
    box-shadow: none;
}

.primary-navigation > .nav-feature.is-active,
.primary-navigation > .nav-feature[aria-current="page"] {
    color: #8f3d1d;
}

.nav-dropdown.is-active > summary {
    color: var(--deep-teal);
    background: transparent;
    box-shadow: none;
}

.nav-separator {
    align-self: center;
    color: rgba(79, 161, 154, 0.5);
    font-family: "Salted Shores", fantasy;
    font-size: 1.05rem;
    line-height: 1;
}

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: stretch;
}

.nav-dropdown > summary {
    gap: 0.55rem;
    cursor: pointer;
    list-style: none;
}

.nav-dropdown > summary::-webkit-details-marker {
    display: none;
}

.nav-caret {
    display: inline-block;
    font-size: 0.72em;
    transform: rotate(0deg);
    transition: transform 160ms ease;
}

.nav-dropdown[open] .nav-caret {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 50%;
    min-width: 11rem;
    padding: 0.32rem 0.65rem;
    color: var(--cream);
    background: radial-gradient(ellipse at center, rgba(26, 31, 32, 0.96) 0%, rgba(26, 31, 32, 0.7) 48%, transparent 82%);
    border: 0;
    box-shadow: 0 0.7rem 1.4rem rgba(0, 0, 0, 0.42);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.nav-dropdown-menu > a {
    display: block;
    padding: 0.26rem 0.35rem;
    color: var(--cream);
    text-decoration: none;
}

.nav-dropdown-menu > a:hover,
.nav-dropdown-menu > a:focus-visible {
    color: var(--seafoam);
    background: transparent;
    outline: none;
}

.nav-dropdown-menu > a:hover .nav-label,
.nav-dropdown-menu > a:focus-visible .nav-label {
    background: radial-gradient(ellipse at center, rgba(79, 161, 154, 0.16) 0%, transparent 74%);
}

.nav-dropdown-menu > a.is-active,
.nav-dropdown-menu > a[aria-current="page"] {
    color: var(--deep-teal);
}

.page-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1rem, 4vw, 4rem);
}

.placeholder-window {
    position: relative;
    display: grid;
    width: min(72rem, 100%);
    min-height: clamp(12rem, 32vh, 24rem);
    margin: 0 auto;
    padding: 2rem;
    place-items: center;
    isolation: isolate;
    background: linear-gradient(180deg, rgba(26, 31, 32, 0.82), rgba(0, 0, 0, 0.68));
    border: 1px solid rgba(79, 161, 154, 0.44);
    box-shadow:
        inset 0 0 2rem rgba(0, 0, 0, 0.58),
        0 0 2.5rem rgba(0, 0, 0, 0.66);
}

.placeholder-window::before {
    position: absolute;
    z-index: -1;
    inset: clamp(-4.5rem, -6vw, -2.5rem);
    content: "";
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.52) 43%,
        rgba(0, 0, 0, 0.18) 61%,
        transparent 76%
    );
}

.placeholder-window h2 {
    margin: 0;
    color: var(--cream);
    font-family: "Salted Shores", fantasy;
    font-size: clamp(2rem, 4.5vw, 4rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.035em;
    text-align: center;
    text-shadow:
        0 0.08em 0 var(--deep-teal),
        0 0.2em 0.8em rgba(0, 0, 0, 0.86);
}

.site-flash {
    position: relative;
    z-index: 2;
    width: min(48rem, calc(100% - 2rem));
    margin: 1rem auto 0;
    padding: 0.75rem 1rem;
    color: var(--cream);
    background: rgba(9, 16, 17, 0.96);
    border: 1px solid rgba(79, 161, 154, 0.55);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-align: center;
}

.site-flash--success {
    color: var(--status-green);
    border-color: rgba(114, 209, 107, 0.52);
}

.site-flash--error {
    color: var(--signal-orange);
    border-color: rgba(239, 106, 44, 0.58);
}

.account-window {
    display: block;
    min-height: inherit;
    padding: 0.65rem 0.75rem;
}

.account-window > h2 {
    font-size: clamp(1.55rem, 2.6vw, 2.25rem);
}

.account-login {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    max-width: 30rem;
    margin: 0.75rem auto 0;
    padding: 0.75rem;
    background: rgba(7, 13, 14, 0.72);
    border: 1px solid rgba(79, 161, 154, 0.32);
}

.account-dashboard {
    display: grid;
    grid-template-columns: minmax(12rem, 0.7fr) minmax(14rem, 0.9fr) minmax(18rem, 1.2fr);
    align-items: start;
    gap: 0.5rem;
    margin-top: 0.55rem;
}

.account-window > p,
.account-profile p {
    margin: 0;
    color: var(--status-muted);
    letter-spacing: 0.04em;
    text-align: center;
}

.account-profile {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
}

.account-profile-card {
    display: grid;
    gap: 0.45rem;
    padding: 0.5rem;
    background: rgba(7, 13, 14, 0.72);
    border: 1px solid rgba(79, 161, 154, 0.32);
}

.account-profile a {
    display: block;
    border-radius: 50%;
}

.account-profile-name {
    max-width: 100%;
    color: var(--cream);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    overflow-wrap: anywhere;
    text-align: center;
}

.account-profile img {
    width: 3.75rem;
    height: 3.75rem;
    object-fit: cover;
    border: 1px solid rgba(79, 161, 154, 0.62);
    border-radius: 50%;
    box-shadow: 0 0 1.5rem rgba(44, 79, 81, 0.48);
}

.account-window form {
    margin: 0;
}

.account-preferences {
    display: grid;
    justify-items: stretch;
    gap: 0.35rem;
    width: 100%;
    padding: 0.5rem;
    background: rgba(7, 13, 14, 0.72);
    border: 1px solid rgba(79, 161, 154, 0.32);
}

.account-preferences label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
    color: var(--status-teal);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.account-preferences input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--seafoam);
}

.account-preferences p {
    margin: 0;
    color: var(--status-muted);
    font-size: 0.64rem;
    line-height: 1.25;
    text-align: center;
}

.account-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.8rem;
    padding: 0.3rem 0.65rem;
    color: var(--cream);
    background: rgba(44, 79, 81, 0.82);
    border: 1px solid rgba(79, 161, 154, 0.68);
    font-family: "Salted Shores", fantasy;
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.account-action:hover,
.account-action:focus-visible {
    color: var(--black);
    background: var(--seafoam);
    outline: none;
}

.account-action--logout {
    color: var(--cream);
    background: rgba(143, 61, 29, 0.72);
    border-color: rgba(209, 90, 42, 0.7);
}

.account-logout-form,
.account-logout-form .account-action {
    width: 100%;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.administrator-page {
    position: relative;
    z-index: 1;
    width: min(96rem, calc(100% - 2rem));
    height: calc(100svh - var(--desktop-header-height) - var(--site-footer-height));
    min-height: 26rem;
    margin: 0 auto;
    padding: clamp(0.325rem, 0.625vh, 0.5rem) 0;
}

.administrator-shell {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(7, 13, 14, 0.96), rgba(13, 22, 23, 0.9) 58%, rgba(3, 7, 8, 0.96)),
        repeating-linear-gradient(135deg, transparent 0 5px, rgba(79, 161, 154, 0.02) 5px 6px);
    border: 1px solid rgba(108, 167, 162, 0.46);
    box-shadow:
        inset 0 0 4rem rgba(0, 0, 0, 0.5),
        0 1.5rem 4rem rgba(0, 0, 0, 0.66);
}

.administrator-sidebar {
    min-width: 0;
    padding: 0.5rem 0.65rem;
    background: linear-gradient(180deg, rgba(18, 30, 31, 0.94), rgba(5, 10, 11, 0.96));
    border-right: 1px solid rgba(108, 167, 162, 0.36);
}

.administrator-sidebar h2 {
    margin: 0 0 0.45rem;
    color: var(--cream);
    font-family: "Salted Shores", fantasy;
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
    overflow-wrap: anywhere;
    text-align: center;
    text-transform: uppercase;
}

.administrator-menu {
    display: grid;
    gap: 0.175rem;
}

.administrator-menu a {
    display: block;
    padding: 0.325rem 0.7rem;
    color: var(--status-muted);
    border-left: 2px solid transparent;
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
}

.administrator-menu a:hover,
.administrator-menu a:focus-visible {
    color: var(--cream);
    background: rgba(79, 161, 154, 0.08);
    outline: none;
}

.administrator-menu a.is-active {
    color: var(--seafoam);
    background: rgba(79, 161, 154, 0.12);
    border-left-color: var(--seafoam);
}

.administrator-content {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    padding: clamp(0.375rem, 0.75vw, 0.625rem) clamp(0.75rem, 1.5vw, 1.25rem);
}

.administrator-content-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex: 0 0 auto;
    gap: 1rem;
    padding: 0 0.2rem 0.4rem;
}

.administrator-content-heading h2,
.administrator-content-heading p {
    margin: 0;
}

.administrator-content-heading h2 {
    color: var(--cream);
    font-family: "Salted Shores", fantasy;
    font-size: clamp(1.55rem, 2.4vw, 2.35rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 0.08em 0 var(--deep-teal), 0 0.4em 1em rgba(0, 0, 0, 0.86);
}

.administrator-content-heading > p {
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.administrator-content-heading-meta {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
}

.administrator-content-heading-meta p {
    margin: 0;
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.visitor-whitelist-link {
    padding: 0;
    color: var(--status-teal);
    background: transparent;
    border: 0;
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-decoration: underline;
    text-decoration-color: rgba(108, 167, 162, 0.48);
    text-underline-offset: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
}

.visitor-whitelist-link:hover,
.visitor-whitelist-link:focus-visible {
    color: var(--cream);
    outline: none;
    text-decoration-color: var(--signal-orange);
}

.visitor-whitelist-dialog {
    --visitor-whitelist-origin-x: 0px;
    --visitor-whitelist-origin-y: 0px;

    width: min(68rem, calc(100vw - 2rem));
    max-width: none;
    max-height: min(80vh, 44rem);
    padding: 0;
    overflow: hidden;
    color: var(--cream);
    background: linear-gradient(145deg, rgba(22, 34, 35, 0.99), rgba(3, 9, 10, 0.99));
    border: 1px solid rgba(108, 167, 162, 0.62);
    box-shadow: 0 1.4rem 5rem rgba(0, 0, 0, 0.88), inset 0 0 3rem rgba(44, 79, 81, 0.2);
    opacity: 0;
    transform: translate(var(--visitor-whitelist-origin-x), var(--visitor-whitelist-origin-y)) scale(0.08);
    transform-origin: center;
    transition: opacity 360ms ease, transform 440ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.visitor-whitelist-dialog[open] {
    display: flex;
    flex-direction: column;
}

.visitor-whitelist-dialog.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

.visitor-whitelist-dialog::backdrop {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
    transition: background 360ms ease, backdrop-filter 360ms ease;
}

.visitor-whitelist-dialog.is-visible::backdrop {
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(3px);
}

.visitor-whitelist-dialog-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    gap: 1rem;
    padding: 0.65rem 0.8rem;
    background: linear-gradient(90deg, rgba(44, 79, 81, 0.48), rgba(8, 18, 19, 0.82));
    border-bottom: 1px solid rgba(108, 167, 162, 0.4);
}

.visitor-whitelist-dialog-heading p,
.visitor-whitelist-dialog-heading h3 {
    margin: 0;
}

.visitor-whitelist-dialog-heading p {
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.visitor-whitelist-dialog-heading h3 {
    color: var(--cream);
    font-family: "Salted Shores", fantasy;
    font-size: clamp(1.35rem, 2.1vw, 2rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 0.08em 0 var(--deep-teal);
}

.visitor-whitelist-dialog-heading > button {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 auto;
    padding: 0;
    place-items: center;
    color: var(--status-teal);
    background: rgba(3, 9, 10, 0.58);
    border: 1px solid rgba(108, 167, 162, 0.42);
    font: 1.2rem/1 Consolas, "Courier New", monospace;
    cursor: pointer;
}

.visitor-whitelist-dialog-heading > button:hover,
.visitor-whitelist-dialog-heading > button:focus-visible {
    color: var(--black);
    background: var(--seafoam);
    outline: none;
}

.visitor-whitelist-table-frame {
    min-height: 8rem;
    overflow: auto;
    scrollbar-color: var(--deep-teal) rgba(0, 0, 0, 0.42);
    scrollbar-width: thin;
}

.visitor-whitelist-table {
    min-width: 48rem;
}

.visitor-whitelist-remove {
    padding: 0.18rem 0.55rem;
    color: var(--cream);
    background: rgba(44, 79, 81, 0.78);
    border: 1px solid rgba(79, 161, 154, 0.58);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.visitor-whitelist-remove:hover,
.visitor-whitelist-remove:focus-visible {
    color: var(--black);
    background: var(--seafoam);
    outline: none;
}

.service-bridge-submenu {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.25rem;
    padding: 0 0.2rem 0.35rem;
    border-bottom: 1px solid rgba(108, 167, 162, 0.22);
}

.service-bridge-submenu a {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    color: var(--status-muted);
    background: rgba(3, 9, 10, 0.48);
    border: 1px solid transparent;
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
}

.service-bridge-submenu a.is-active,
.service-bridge-submenu a:hover,
.service-bridge-submenu a:focus-visible {
    color: var(--cream);
    background: rgba(44, 79, 81, 0.38);
    border-color: rgba(79, 161, 154, 0.42);
    outline: none;
}

.service-bridge-submenu img {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
}

.service-bridge-workspace {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    padding-top: 0.4rem;
    overflow: auto;
    scrollbar-color: var(--deep-teal) rgba(0, 0, 0, 0.42);
    scrollbar-width: thin;
}

.service-bridge-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr));
    gap: 0.5rem;
}

.service-bridge-module {
    display: grid;
    min-width: 0;
    gap: 0.45rem;
}

.service-bridge-module-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    padding: 0.3rem 0.5rem;
    background: linear-gradient(90deg, rgba(44, 79, 81, 0.34), rgba(4, 12, 13, 0.64));
    border: 1px solid rgba(108, 167, 162, 0.32);
}

.service-bridge-module-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.45rem;
}

.service-bridge-module-heading img {
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 auto;
    object-fit: contain;
}

.service-bridge-module-heading p,
.service-bridge-module-heading h3 {
    margin: 0;
}

.service-bridge-module-identity > div p {
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.56rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.service-bridge-module-heading h3 {
    color: var(--cream);
    font-family: "Salted Shores", fantasy;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 0.95;
    text-transform: uppercase;
    text-shadow: 0 0.08em 0 var(--deep-teal);
}

.service-bridge-body-grid {
    display: grid;
    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
    align-items: start;
    min-width: 0;
    gap: 0.45rem;
}

.service-bridge-data-stack {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    gap: 0.45rem;
}

.service-bridge-card,
.service-bridge-panel {
    min-width: 0;
    background: rgba(3, 9, 10, 0.7);
    border: 1px solid rgba(108, 167, 162, 0.3);
    box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.28);
}

.service-bridge-card {
    padding: 0.45rem 0.6rem;
}

.service-bridge-card > header,
.service-bridge-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.service-bridge-card > header p,
.service-bridge-card > header h4,
.service-bridge-panel > header h4 {
    margin: 0;
}

.service-bridge-card > header p,
.service-bridge-card > header > span,
.service-bridge-panel > header > span {
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.service-bridge-card > header h4,
.service-bridge-panel > header h4 {
    color: var(--cream);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.86rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.service-bridge-health-strip {
    display: grid;
    grid-template-columns: minmax(9rem, 0.55fr) minmax(25rem, 1.45fr);
    min-width: 0;
    gap: 0.22rem 0.45rem;
    padding: 0.2rem 0.4rem;
    background: rgba(3, 9, 10, 0.58);
    border-left: 3px solid var(--status-teal);
}

.service-bridge-health-strip.is-operational {
    border-left-color: var(--status-green);
}

.service-bridge-health-strip.is-warning {
    border-left-color: #d8ac32;
}

.service-bridge-health-strip.is-offline {
    border-left-color: var(--signal-orange);
}

.service-bridge-health-summary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
}

.service-bridge-health-summary strong {
    color: var(--cream);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.service-bridge-health-summary span {
    color: var(--status-muted);
    font-size: 0.58rem;
    line-height: 1.15;
}

.service-bridge-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(7rem, 1fr));
    gap: 0.2rem;
    margin: 0;
}

.service-bridge-metrics > div {
    min-width: 0;
    padding: 0.16rem 0.28rem;
    background: rgba(44, 79, 81, 0.16);
}

.service-bridge-metrics dt {
    color: var(--status-teal);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.5rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.service-bridge-metrics dd {
    margin: 0.04rem 0 0;
    color: var(--cream);
    font-size: 0.58rem;
    overflow-wrap: anywhere;
}

.administrator-discord-error {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.15rem 0.28rem;
    color: #f2a381;
    background: rgba(112, 35, 18, 0.25);
    font-size: 0.56rem;
    line-height: 1.2;
}

.administrator-discord-error.is-recovered {
    color: #d7c99f;
    background: rgba(90, 75, 33, 0.2);
}

.administrator-discord-error[hidden] {
    display: none;
}

.service-bridge-invites {
    align-self: start;
}

.service-bridge-invite-state {
    margin-top: 0.28rem;
    padding: 0.3rem 0.35rem;
    background: rgba(44, 79, 81, 0.14);
    border: 1px solid rgba(108, 167, 162, 0.18);
}

.service-bridge-invite-state > span {
    display: block;
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.5rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.service-bridge-invite-state > strong {
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.service-bridge-invite-state > strong.is-enabled {
    color: var(--status-green);
}

.service-bridge-invite-state > strong.is-disabled {
    color: var(--signal-orange);
}

.service-bridge-empty-state p {
    margin: 0.28rem 0 0;
    color: var(--status-muted);
    font-size: 0.58rem;
    overflow-wrap: anywhere;
}

.service-bridge-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.2rem;
    margin-top: 0.3rem;
}

.service-bridge-pool-settings {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.2rem;
    margin-top: 0.3rem;
}

.service-bridge-pool-settings label {
    display: grid;
    gap: 0.08rem;
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.5rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.service-bridge-pool-settings select {
    min-height: 1.45rem;
    padding: 0.1rem 0.2rem;
    color: var(--cream);
    background: rgba(3, 9, 10, 0.9);
    border: 1px solid rgba(79, 161, 154, 0.5);
    font: inherit;
}

.service-bridge-pool-settings label:first-of-type select {
    width: 3.15rem;
}

.service-bridge-actions button,
.service-bridge-pool-settings button,
.service-bridge-table-action {
    min-height: 1.45rem;
    padding: 0.14rem 0.45rem;
    color: var(--cream);
    background: rgba(44, 79, 81, 0.72);
    border: 1px solid rgba(79, 161, 154, 0.5);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.service-bridge-actions button:hover,
.service-bridge-actions button:focus-visible,
.service-bridge-pool-settings button:hover,
.service-bridge-pool-settings button:focus-visible,
.service-bridge-table-action:hover,
.service-bridge-table-action:focus-visible {
    color: var(--black);
    background: var(--seafoam);
    outline: none;
}

.service-bridge-actions button.is-danger {
    background: rgba(112, 35, 18, 0.58);
    border-color: rgba(209, 90, 42, 0.62);
}

.service-bridge-actions button.is-danger:hover,
.service-bridge-actions button.is-danger:focus-visible {
    background: var(--signal-orange);
}

.service-bridge-empty-state {
    padding: 0.4rem 0;
}

.service-bridge-empty-state strong {
    color: var(--signal-orange);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.service-bridge-panel {
    display: flex;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.service-bridge-panel > header {
    flex: 0 0 auto;
    padding: 0.35rem 0.55rem;
    background: rgba(44, 79, 81, 0.24);
    border-bottom: 1px solid rgba(108, 167, 162, 0.26);
}

.administrator-table-frame.service-bridge-table-frame {
    min-height: 0;
    flex: 0 1 auto;
    border: 0;
}

.service-bridge-links .service-bridge-table-frame {
    max-height: 8rem;
}

.service-bridge-links tr.is-historical {
    opacity: 0.72;
}

.service-bridge-invite-link {
    color: var(--seafoam);
    white-space: nowrap;
}

.service-bridge-link-status {
    display: block;
    color: var(--status-green);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.service-bridge-link-status.is-historical {
    color: var(--status-muted);
}

.service-bridge-link-meta {
    display: block;
    margin-top: 0.08rem;
    color: var(--status-muted);
    font-size: 0.58rem;
    line-height: 1.15;
}

.service-bridge-link-meta.is-warning {
    color: var(--signal-orange);
}

.service-bridge-activity .service-bridge-table-frame {
    min-height: 12rem;
    max-height: 21rem;
}

.service-bridge-panel .administrator-pagination {
    padding: 0.25rem 0.35rem;
    font-size: 0.62rem;
}

.administrator-table-frame {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    background: rgba(3, 8, 9, 0.82);
    border: 1px solid rgba(108, 167, 162, 0.36);
    box-shadow: inset 0 0 2.5rem rgba(0, 0, 0, 0.42);
    scrollbar-color: var(--deep-teal) rgba(0, 0, 0, 0.42);
    scrollbar-width: thin;
}

.administrator-accounts-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    color: var(--cream);
    font-size: 0.76rem;
}

.administrator-accounts-table th {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 0;
    background: rgba(15, 26, 27, 0.99);
    border-bottom: 1px solid rgba(108, 167, 162, 0.44);
    text-align: left;
    white-space: nowrap;
}

.administrator-accounts-table th > a,
.administrator-accounts-table th > span {
    display: flex;
    align-items: center;
    min-height: 1.75rem;
    gap: 0.45rem;
    padding: 0.275rem 0.65rem;
    color: var(--status-teal);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-decoration: none;
    text-transform: uppercase;
}

.administrator-accounts-table th > a:hover,
.administrator-accounts-table th > a:focus-visible {
    color: var(--cream);
    background: rgba(79, 161, 154, 0.1);
    outline: none;
}

.administrator-accounts-table th[aria-sort] > a {
    color: var(--cream);
}

.administrator-accounts-table th[aria-sort] > a::after {
    width: 0;
    height: 0;
    margin-left: 0.05rem;
    content: "";
    border-right: 0.28rem solid transparent;
    border-left: 0.28rem solid transparent;
}

.administrator-accounts-table th[aria-sort="ascending"] > a::after {
    border-bottom: 0.42rem solid var(--signal-orange);
}

.administrator-accounts-table th[aria-sort="descending"] > a::after {
    border-top: 0.42rem solid var(--signal-orange);
}

.administrator-accounts-table th > .administrator-ip-column-heading {
    gap: 0.3rem;
}

.administrator-ip-column-heading > a,
.administrator-ip-column-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: inherit;
    text-decoration: none;
}

.administrator-accounts-table th[aria-sort] .administrator-ip-column-heading > a {
    color: var(--cream);
}

.administrator-accounts-table th[aria-sort] .administrator-ip-column-heading > a::after {
    width: 0;
    height: 0;
    margin-left: 0.05rem;
    content: "";
    border-right: 0.28rem solid transparent;
    border-left: 0.28rem solid transparent;
}

.administrator-accounts-table th[aria-sort="ascending"] .administrator-ip-column-heading > a::after {
    border-bottom: 0.42rem solid var(--signal-orange);
}

.administrator-accounts-table th[aria-sort="descending"] .administrator-ip-column-heading > a::after {
    border-top: 0.42rem solid var(--signal-orange);
}

.administrator-ip-visibility-toggle {
    display: inline-grid;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    padding: 0;
    place-items: center;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.administrator-ip-visibility-toggle img {
    display: block;
    width: 1em;
    height: 1em;
    object-fit: contain;
}

.administrator-ip-visibility-toggle:hover,
.administrator-ip-visibility-toggle:focus-visible {
    filter: brightness(1.2);
    outline: 1px solid rgba(79, 161, 154, 0.58);
    outline-offset: 0.12rem;
}

[data-sensitive-ip] {
    display: inline-block;
    filter: blur(0.28rem);
    opacity: 0.62;
    pointer-events: none;
    user-select: none;
    transition: filter 140ms ease, opacity 140ms ease;
}

.are-ip-addresses-visible [data-sensitive-ip] {
    filter: none;
    opacity: 1;
    pointer-events: auto;
    user-select: text;
}

.administrator-accounts-table td {
    padding: 0.275rem 0.65rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(108, 167, 162, 0.18);
}

.administrator-accounts-table tbody tr.administrator-account-row {
    background: rgba(10, 17, 18, 0.5);
}

.administrator-accounts-table tbody tr.administrator-account-row:hover {
    background: rgba(44, 79, 81, 0.28);
}

.administrator-accounts-table tbody tr.administrator-account-row.is-locked {
    background: rgba(92, 37, 23, 0.22);
}

.administrator-account-identity {
    min-width: 11rem;
}

.administrator-account-number {
    color: var(--signal-orange);
    font-family: Consolas, "Courier New", monospace;
    font-weight: 600;
    white-space: nowrap;
}

.administrator-account-identity strong,
.administrator-account-identity span {
    display: block;
}

.administrator-account-identity strong {
    max-width: 15rem;
    color: var(--cream);
    font-family: "Bahnschrift", "Trebuchet MS", sans-serif;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.administrator-account-identity span {
    margin-top: 0.075rem;
    color: var(--signal-orange);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.administrator-accounts-table code {
    color: var(--status-teal);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.72rem;
    white-space: nowrap;
}

.administrator-date {
    min-width: 9.5rem;
    color: var(--cream);
    white-space: nowrap;
}

.administrator-date span {
    margin-left: 0.2rem;
}

.administrator-stats-toggle label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.administrator-stats-toggle input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--seafoam);
}

.administrator-muted {
    display: block;
    margin-top: 0.075rem;
    color: var(--status-muted);
    font-size: 0.66rem;
}

.administrator-ip-cell {
    min-width: 10.5rem;
}

.administrator-ip-cell details {
    position: relative;
}

.administrator-ip-cell summary {
    color: var(--status-teal);
    cursor: pointer;
    white-space: nowrap;
}

.administrator-ip-cell ul {
    display: grid;
    gap: 0.225rem;
    min-width: 17rem;
    margin: 0.275rem 0 0;
    padding: 0;
    list-style: none;
}

.administrator-ip-meta {
    display: block;
    margin-top: 0.06rem;
    color: var(--status-muted);
    font-size: 0.62rem;
    white-space: nowrap;
}

.administrator-ip-bypass {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
    padding-top: 0.2rem;
    color: var(--status-teal);
    border-top: 1px solid rgba(108, 167, 162, 0.18);
    font-size: 0.65rem;
    white-space: nowrap;
}

.administrator-ip-bypass label,
label.administrator-ip-bypass {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.administrator-ip-bypass input[type="checkbox"] {
    width: 0.95rem;
    height: 0.95rem;
    margin: 0;
    accent-color: var(--signal-orange);
}

.administrator-ip-bypass.is-disabled {
    color: rgba(145, 170, 168, 0.48);
}

.administrator-ip-bypass.is-disabled input {
    cursor: not-allowed;
    opacity: 0.48;
}

.administrator-ip-bypass button {
    padding: 0.1rem 0.4rem;
    color: var(--cream);
    background: rgba(44, 79, 81, 0.8);
    border: 1px solid rgba(79, 161, 154, 0.52);
    font: inherit;
}

.administrator-accounts-table tbody tr.administrator-account-settings-row,
.administrator-accounts-table tbody tr.administrator-account-settings-row:hover {
    background: rgba(44, 79, 81, 0.32);
}

.administrator-account-settings-row[hidden] {
    display: none;
}

.administrator-account-settings-row > td {
    padding: 0;
    border-bottom-color: rgba(108, 167, 162, 0.34);
}

.administrator-settings-toggle-heading,
.administrator-settings-toggle-cell {
    width: 2.5rem;
    min-width: 2.5rem;
}

.administrator-settings-toggle-cell {
    padding: 0.125rem 0.45rem;
    text-align: right;
}

.administrator-settings-toggle {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    margin-left: auto;
    padding: 0;
    place-items: center;
    color: var(--status-teal);
    background: transparent;
    border: 0;
    cursor: pointer;
    font: 700 1rem/1 Consolas, "Courier New", monospace;
}

.administrator-settings-toggle > span[aria-hidden="true"] {
    transition: transform 140ms ease;
}

.administrator-settings-toggle[aria-expanded="true"] > span[aria-hidden="true"] {
    transform: rotate(90deg);
}

.administrator-account-settings-panel {
    width: 100%;
    padding: 0.425rem 1rem 0.5rem;
    background: linear-gradient(90deg, rgba(35, 70, 72, 0.68), rgba(13, 31, 33, 0.86));
    box-shadow: inset 0 0 1.75rem rgba(0, 0, 0, 0.34);
}

.administrator-account-settings-panel form {
    display: grid;
    gap: 0.35rem;
}

.administrator-account-settings-panel fieldset {
    display: grid;
    gap: 0.225rem;
    margin: 0;
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(108, 167, 162, 0.24);
}

.administrator-account-settings-panel legend {
    padding-inline: 0.35rem;
    color: var(--signal-orange);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.administrator-account-settings-panel p {
    margin: 0;
    color: var(--status-muted);
    font-size: 0.68rem;
}

.administrator-role-fieldset strong {
    color: var(--cream);
}

.administrator-role-rank-slider {
    width: 100%;
    margin: 0.125rem 0 0;
    accent-color: var(--signal-orange);
    cursor: grab;
}

.administrator-role-rank-slider:active {
    cursor: grabbing;
}

.administrator-role-rank-scale {
    display: flex;
    justify-content: space-between;
    gap: 0.35rem;
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.administrator-permission-overrides {
    display: grid;
    gap: 0.175rem;
}

.administrator-permission-row {
    display: grid;
    grid-template-columns: minmax(10rem, 1.2fr) minmax(9rem, 0.8fr) minmax(10rem, 0.8fr);
    align-items: center;
    gap: 0.65rem;
    min-height: 1.55rem;
    padding: 0.14rem 0.4rem;
    color: var(--cream);
    background: rgba(3, 12, 13, 0.25);
    font-size: 0.68rem;
}

.administrator-permission-row.is-disabled {
    color: rgba(145, 170, 168, 0.58);
}

.administrator-permission-name {
    color: var(--cream);
}

.administrator-permission-effective {
    color: var(--status-muted);
}

.administrator-permission-effective.is-allowed {
    color: var(--status-online);
}

.administrator-permission-row select {
    width: 100%;
    min-height: 1.5rem;
    color: var(--cream);
    background: rgba(4, 15, 16, 0.9);
    border: 1px solid rgba(79, 161, 154, 0.48);
}

.administrator-privilege-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem 0.7rem;
}

.administrator-setting-option {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    color: var(--cream);
    font-size: 0.68rem;
    line-height: 1.25;
}

.administrator-setting-option input {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--seafoam);
}

.administrator-setting-option.is-disabled {
    color: rgba(145, 170, 168, 0.48);
}

.administrator-setting-option.is-disabled input {
    cursor: not-allowed;
    opacity: 0.48;
}

.administrator-account-settings-panel button {
    justify-self: start;
    min-height: 1.6rem;
    padding: 0.2rem 0.75rem;
    color: var(--cream);
    background: rgba(44, 79, 81, 0.8);
    border: 1px solid rgba(79, 161, 154, 0.62);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.administrator-account-settings-panel button:hover,
.administrator-account-settings-panel button:focus-visible {
    color: var(--black);
    background: var(--seafoam);
    outline: none;
}

.administrator-empty {
    height: 4rem;
    color: var(--status-muted);
    text-align: center;
}

.administrator-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 0.75rem;
    padding-top: 0.35rem;
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.administrator-pagination a,
.administrator-pagination span {
    padding: 0.175rem 0.55rem;
}

.administrator-pagination a {
    color: var(--seafoam);
    border: 1px solid rgba(79, 161, 154, 0.42);
    text-decoration: none;
}

.administrator-pagination a:hover,
.administrator-pagination a:focus-visible {
    color: var(--cream);
    background: rgba(79, 161, 154, 0.12);
    outline: none;
}

.administrator-pagination span {
    color: rgba(145, 170, 168, 0.45);
}

.administrator-pagination strong {
    color: var(--status-muted);
    font-weight: 400;
}

.administrator-role-manager {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    background: rgba(3, 8, 9, 0.82);
    border: 1px solid rgba(108, 167, 162, 0.36);
    box-shadow: inset 0 0 2.5rem rgba(0, 0, 0, 0.42);
}

.administrator-role-list-panel {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(180deg, rgba(18, 31, 32, 0.9), rgba(6, 12, 13, 0.94));
    border-right: 1px solid rgba(108, 167, 162, 0.3);
}

.administrator-role-list-heading,
.administrator-role-editor-heading,
.administrator-role-permissions-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.administrator-role-list-heading {
    padding: 0.05rem 0.25rem 0.325rem;
    color: var(--status-teal);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.administrator-role-list-heading span {
    color: var(--status-muted);
    font-size: 0.6rem;
}

.administrator-role-list-panel > form:first-of-type {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.administrator-role-list {
    display: grid;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: auto;
    align-content: start;
    gap: 0.15rem;
    list-style: none;
    scrollbar-color: var(--deep-teal) rgba(0, 0, 0, 0.42);
    scrollbar-width: thin;
}

.administrator-role-list-item {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    align-items: center;
    min-height: 2rem;
    color: var(--status-muted);
    background: rgba(4, 12, 13, 0.7);
    border: 1px solid rgba(108, 167, 162, 0.16);
    transition: opacity 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.administrator-role-list-item.is-dragging {
    opacity: 0.38;
}

.administrator-role-list-item.is-selected {
    background: rgba(44, 79, 81, 0.46);
    border-color: rgba(79, 161, 154, 0.58);
}

.administrator-role-drag-handle {
    color: var(--status-teal);
    font: 700 0.7rem/1 Consolas, "Courier New", monospace;
    text-align: center;
}

.administrator-role-list-item.is-draggable .administrator-role-drag-handle {
    cursor: grab;
    user-select: none;
}

.administrator-role-list-item.is-draggable .administrator-role-drag-handle:active {
    cursor: grabbing;
}

.administrator-role-list-item.is-fixed .administrator-role-drag-handle {
    color: rgba(145, 170, 168, 0.36);
}

.administrator-role-list-item a {
    display: grid;
    min-width: 0;
    gap: 0.06rem;
    padding: 0.225rem 0.2rem;
    color: var(--cream);
    text-decoration: none;
}

.administrator-role-list-item a:hover,
.administrator-role-list-item a:focus-visible {
    color: var(--seafoam);
    outline: none;
}

.administrator-role-list-item strong {
    overflow: hidden;
    font-family: "Bahnschrift", "Trebuchet MS", sans-serif;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.administrator-role-list-item a span,
.administrator-role-list-item small {
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.administrator-role-list-item small {
    padding-right: 0.55rem;
}

.administrator-role-list-panel button,
.administrator-role-edit-form > button,
.administrator-role-delete button {
    min-height: 1.6rem;
    padding: 0.2rem 0.7rem;
    color: var(--cream);
    background: rgba(44, 79, 81, 0.8);
    border: 1px solid rgba(79, 161, 154, 0.58);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.67rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
}

.administrator-role-list-panel > form:first-of-type > button {
    margin-top: 0.3rem;
}

.administrator-role-list-panel button:hover,
.administrator-role-list-panel button:focus-visible,
.administrator-role-edit-form > button:hover,
.administrator-role-edit-form > button:focus-visible {
    color: var(--black);
    background: var(--seafoam);
    outline: none;
}

.administrator-role-list-panel button:disabled {
    color: rgba(145, 170, 168, 0.42);
    background: rgba(15, 28, 29, 0.5);
    border-color: rgba(108, 167, 162, 0.18);
    cursor: default;
}

.administrator-role-create {
    display: grid;
    flex: 0 0 auto;
    gap: 0.175rem;
    margin-top: 0.375rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(108, 167, 162, 0.24);
}

.administrator-role-create > label {
    color: var(--status-teal);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.administrator-role-create > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem;
}

.administrator-role-create input,
.administrator-role-name-field input {
    width: 100%;
    min-width: 0;
    min-height: 1.6rem;
    padding: 0.175rem 0.5rem;
    color: var(--cream);
    background: rgba(3, 11, 12, 0.88);
    border: 1px solid rgba(79, 161, 154, 0.44);
    font-family: "Bahnschrift", "Trebuchet MS", sans-serif;
}

.administrator-role-editor {
    min-width: 0;
    min-height: 0;
    padding: clamp(0.375rem, 0.7vw, 0.6rem) clamp(0.75rem, 1.4vw, 1.2rem);
    overflow: auto;
    scrollbar-color: var(--deep-teal) rgba(0, 0, 0, 0.42);
    scrollbar-width: thin;
}

.administrator-role-editor-heading {
    padding-bottom: 0.425rem;
    border-bottom: 1px solid rgba(108, 167, 162, 0.24);
}

.administrator-role-editor-heading span,
.administrator-role-editor-heading p,
.administrator-role-permissions-heading span {
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.administrator-role-editor-heading h3 {
    margin: 0.09rem 0 0;
    color: var(--cream);
    font-family: "Salted Shores", fantasy;
    font-size: 1.45rem;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.administrator-role-editor-heading p {
    margin: 0;
}

.administrator-role-edit-form,
.administrator-role-readonly {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

.administrator-role-name-field {
    display: grid;
    max-width: 28rem;
    gap: 0.175rem;
}

.administrator-role-name-field > span,
.administrator-role-permissions-heading strong {
    color: var(--status-teal);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.administrator-role-permissions-heading {
    align-items: end;
    margin-top: 0.125rem;
}

.administrator-role-edit-form fieldset,
.administrator-role-readonly fieldset {
    margin: 0;
    padding: 0.325rem 0.65rem;
    border: 1px solid rgba(108, 167, 162, 0.24);
}

.administrator-role-edit-form legend,
.administrator-role-readonly legend {
    padding-inline: 0.35rem;
    color: var(--signal-orange);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.administrator-role-permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem 0.7rem;
}

.administrator-role-permission {
    display: flex;
    align-items: center;
    min-height: 1.55rem;
    gap: 0.45rem;
    padding: 0.15rem 0.4rem;
    color: var(--cream);
    background: rgba(3, 12, 13, 0.28);
    font-size: 0.68rem;
}

.administrator-role-permission input {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--seafoam);
}

.administrator-role-permission.is-disabled {
    color: rgba(145, 170, 168, 0.5);
}

.administrator-role-readonly > p,
.administrator-role-empty {
    color: var(--status-muted);
    font-size: 0.72rem;
}

.administrator-role-edit-form > button {
    justify-self: start;
}

.administrator-role-delete {
    margin-top: 0.5rem;
    padding-top: 0.425rem;
    border-top: 1px solid rgba(190, 78, 45, 0.32);
}

.administrator-role-delete button {
    color: #ffd8ca;
    background: rgba(110, 38, 21, 0.6);
    border-color: rgba(213, 83, 44, 0.58);
}

.administrator-role-delete button:hover,
.administrator-role-delete button:focus-visible {
    color: var(--black);
    background: var(--signal-orange);
    outline: none;
}

.administrator-member-override-audit {
    flex: 0 0 auto;
    min-width: 0;
    margin-top: 0.4rem;
    background: rgba(10, 16, 17, 0.9);
    border: 1px solid rgba(224, 104, 53, 0.55);
    box-shadow: inset 0 0 1.5rem rgba(0, 0, 0, 0.38);
}

.administrator-member-override-audit > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.3rem 0.65rem;
    background: rgba(224, 104, 53, 0.08);
    border-bottom: 1px solid rgba(224, 104, 53, 0.28);
}

.administrator-member-override-audit > header span,
.administrator-member-override-audit > header p {
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.administrator-member-override-audit > header h3,
.administrator-member-override-audit > header p {
    margin: 0;
}

.administrator-member-override-audit > header h3 {
    color: var(--cream);
    font-family: "Salted Shores", fantasy;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.administrator-member-override-frame {
    max-height: 9rem;
    overflow: auto;
    scrollbar-color: var(--deep-teal) rgba(0, 0, 0, 0.42);
    scrollbar-width: thin;
}

.administrator-member-override-audit table {
    width: 100%;
    border-collapse: collapse;
    color: var(--cream);
    font-size: 0.65rem;
}

.administrator-member-override-audit th,
.administrator-member-override-audit td {
    padding: 0.22rem 0.55rem;
    border-bottom: 1px solid rgba(108, 167, 162, 0.18);
    text-align: left;
    vertical-align: middle;
}

.administrator-member-override-audit th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--status-teal);
    background: #142122;
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.administrator-member-override-audit td > code,
.administrator-member-override-audit td > small {
    display: block;
    color: var(--status-muted);
    font-size: 0.56rem;
}

.administrator-member-override-effect {
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.administrator-member-override-effect.is-allow {
    color: var(--signal-orange);
}

.administrator-member-override-empty {
    margin: 0;
    padding: 0.5rem 0.65rem;
    color: var(--status-muted);
    font-size: 0.68rem;
}

.status-page {
    position: relative;
    z-index: 1;
    width: min(88rem, calc(100% - 2rem));
    min-height: calc(100svh - var(--desktop-header-height) - var(--site-footer-height));
    margin: 0 auto;
    padding: clamp(0.8rem, 1.35vh, 1.1rem) clamp(1rem, 2.5vw, 2.25rem);
    background:
        linear-gradient(180deg, rgba(7, 12, 13, 0.88), rgba(3, 7, 8, 0.76)),
        repeating-linear-gradient(135deg, transparent 0 5px, rgba(79, 161, 154, 0.018) 5px 6px);
    border-inline: 1px solid rgba(79, 161, 154, 0.42);
    box-shadow:
        inset 0 0 5rem rgba(0, 0, 0, 0.56),
        0 0 4rem rgba(0, 0, 0, 0.72);
}

.status-dashboard {
    display: grid;
    gap: clamp(0.65rem, 1.2vh, 0.9rem);
}

.status-symbol {
    --status-icon-filter: invert(61%) sepia(22%) saturate(678%) hue-rotate(126deg) brightness(91%) contrast(86%);

    display: block;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    opacity: 0.9;
    filter: var(--status-icon-filter);
}

.status-symbol--large {
    width: clamp(3.25rem, 4vw, 4rem);
    height: clamp(3.25rem, 4vw, 4rem);
}

.status-symbol--heading {
    width: 1.7rem;
    height: 1.7rem;
}

.status-symbol--server {
    width: 2.35rem;
    height: 2.35rem;
}

.status-symbol--inline {
    width: 1.25rem;
    height: 1.25rem;
}

.status-symbol--footer {
    width: 1.44rem;
    height: 1.44rem;
}

.status-symbol--orange {
    --status-icon-filter: invert(47%) sepia(98%) saturate(2133%) hue-rotate(347deg) brightness(98%) contrast(91%);
}

.status-symbol--success {
    --status-icon-filter: invert(74%) sepia(52%) saturate(587%) hue-rotate(66deg) brightness(96%) contrast(89%);
}

.status-introduction {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.1rem);
}

.status-introduction h2,
.section-heading,
.incident-heading,
.incident-message h4,
.server-identity strong {
    font-family: "Salted Shores", fantasy;
    font-weight: 400;
    text-transform: uppercase;
}

.status-introduction h2 {
    margin: 0;
    color: var(--cream);
    font-size: clamp(1.8rem, 2.5vw, 2.6rem);
    line-height: 1;
    letter-spacing: 0.075em;
    text-shadow: 0 0.1em 0 var(--deep-teal), 0 0.4em 1em rgba(0, 0, 0, 0.9);
}

.status-introduction p {
    margin: 0.25rem 0 0;
    color: var(--status-muted);
    font-size: clamp(0.78rem, 1vw, 0.95rem);
    letter-spacing: 0.025em;
}

.network-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(10, 18, 19, 0.94), rgba(15, 24, 25, 0.82), rgba(8, 14, 15, 0.94));
    border: 1px solid rgba(108, 167, 162, 0.44);
    box-shadow:
        inset 0 0 2.5rem rgba(0, 0, 0, 0.56),
        0 0.75rem 2rem rgba(0, 0, 0, 0.36);
}

.network-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.15rem;
    gap: 0.8rem;
    padding: 0.65rem clamp(0.8rem, 2vw, 1.5rem);
}

.network-stat + .network-stat {
    border-left: 1px solid rgba(108, 167, 162, 0.2);
}

.network-status-light {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    background: radial-gradient(circle at 35% 30%, #91ed87, #61b85e 58%, #2d6835 100%);
    border-radius: 50%;
    box-shadow: 0 0 1.2rem rgba(114, 209, 107, 0.5);
}

.status-label,
.status-value {
    margin: 0;
    text-transform: uppercase;
}

.status-label,
.section-heading,
.incident-heading,
.server-table th,
.server-table td::before {
    color: var(--status-teal);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    letter-spacing: 0.14em;
}

.status-label {
    font-size: 0.72rem;
}

.status-value {
    margin-top: 0.1rem;
    color: var(--cream);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    letter-spacing: 0.11em;
}

.status-value span {
    font-size: 0.78em;
    font-weight: 400;
}

.status-value--online {
    color: var(--status-green);
}

.status-value--degraded {
    color: #d8ac32;
}

.status-value--offline {
    color: var(--signal-orange);
}

.network-status-light--degraded {
    background: radial-gradient(circle at 35% 30%, #f2d36b, #c9922b 58%, #684a19 100%);
    box-shadow: 0 0 1.2rem rgba(216, 172, 50, 0.45);
}

.network-status-light--offline {
    background: radial-gradient(circle at 35% 30%, #d87956, #a43f25 58%, #542116 100%);
    box-shadow: 0 0 1.2rem rgba(209, 90, 42, 0.4);
}

.server-status-section {
    display: grid;
    gap: 0.4rem;
}

.section-heading,
.incident-heading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    font-size: 1rem;
}

.server-table-frame,
.incident-panel {
    overflow: hidden;
    background: rgba(7, 13, 14, 0.88);
    border: 1px solid rgba(108, 167, 162, 0.46);
    box-shadow: inset 0 0 2.5rem rgba(0, 0, 0, 0.48);
}

.server-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--cream);
    font-size: clamp(0.76rem, 0.9vw, 0.92rem);
    table-layout: fixed;
}

.server-column {
    width: 24%;
}

.status-column {
    width: 13%;
}

.players-column {
    width: 11%;
}

.queue-column {
    width: 7%;
}

.uptime-column {
    width: 13%;
}

.wipe-column {
    width: 18%;
}

.restart-column {
    width: 14%;
}

.server-table th {
    padding: 0.48rem 0.75rem;
    font-size: 0.68rem;
    font-weight: 500;
    text-align: left;
    text-transform: uppercase;
    background: rgba(14, 24, 25, 0.86);
    border-bottom: 1px solid rgba(108, 167, 162, 0.36);
}

.server-table td {
    padding: 0.48rem 0.75rem;
    vertical-align: middle;
}

.server-table tbody tr + tr td {
    border-top: 1px solid rgba(108, 167, 162, 0.2);
}

.server-table td::before {
    display: none;
}

.server-identity {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.server-identity strong,
.server-identity span {
    display: block;
}

.server-identity strong {
    overflow: hidden;
    color: var(--cream);
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-identity span,
.table-note {
    margin-top: 0.15rem;
    color: var(--status-muted);
    font-size: 0.78rem;
}

.online-indicator,
.restart-time {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.online-indicator {
    color: var(--status-green);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.online-indicator::before {
    width: 0.65rem;
    height: 0.65rem;
    content: "";
    background: var(--status-green);
    border-radius: 0.15rem;
    box-shadow: 0 0 0.65rem rgba(114, 209, 107, 0.55);
}

.online-indicator.is-offline {
    color: var(--signal-orange);
}

.online-indicator.is-offline::before {
    background: var(--signal-orange);
    box-shadow: 0 0 0.65rem rgba(209, 90, 42, 0.45);
}

.rust-bridge-config-list {
    display: grid;
    gap: 0.28rem;
    margin: 0.35rem 0 0;
}

.rust-bridge-config-list > div {
    min-width: 0;
    padding: 0.28rem 0;
    border-top: 1px solid rgba(108, 167, 162, 0.16);
}

.rust-bridge-config-list dt {
    color: var(--status-teal);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rust-bridge-config-list dd {
    overflow-wrap: anywhere;
    margin: 0.08rem 0 0;
    color: var(--cream);
    font-size: 0.66rem;
}

.rust-bridge-server-form {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) auto auto;
    align-items: center;
    gap: 0.25rem;
}

.rust-bridge-server-form input[type="text"],
.rust-bridge-server-form input:not([type]) {
    min-width: 0;
}

.rust-bridge-server-form label {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
}

.service-bridge-rust-setup-grid {
    grid-template-columns: minmax(15rem, 0.72fr) minmax(24rem, 1.28fr);
    margin-bottom: 0.45rem;
}

.rust-bridge-settings-form,
.rust-server-create-form,
.rust-server-controls-grid form {
    display: grid;
    gap: 0.35rem;
}

.rust-bridge-settings-form label,
.rust-server-create-form label,
.rust-server-controls-grid label {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    color: var(--status-teal);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rust-bridge-settings-form input,
.rust-server-create-form input,
.rust-server-controls-grid input {
    min-width: 0;
    width: 100%;
    padding: 0.32rem 0.4rem;
    color: var(--cream);
    background: rgba(0, 12, 13, 0.72);
    border: 1px solid rgba(108, 167, 162, 0.34);
    font: 600 0.68rem/1.15 "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
}

.rust-bridge-settings-form button,
.rust-server-create-form button,
.rust-server-controls-grid button,
.rust-provisioning-actions button,
.rust-provisioning-actions a {
    min-height: 1.75rem;
    padding: 0.3rem 0.55rem;
    color: var(--cream);
    background: rgba(44, 79, 81, 0.78);
    border: 1px solid rgba(108, 167, 162, 0.48);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.rust-bridge-settings-form button:disabled,
.rust-server-create-form button:disabled,
.rust-server-controls-grid button:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.rust-server-controls-grid button.is-danger {
    color: #ffb09a;
    background: rgba(87, 26, 12, 0.72);
    border-color: rgba(219, 79, 42, 0.64);
}

.rust-server-create-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rust-field-wide {
    grid-column: 1 / -1;
}

.rust-bridge-checkbox {
    display: flex !important;
    align-items: center;
    grid-template-columns: none;
    flex-direction: row;
    gap: 0.35rem !important;
    color: var(--cream) !important;
}

.rust-bridge-checkbox input {
    flex: 0 0 auto;
    width: auto;
}

.rust-bridge-readiness {
    display: grid;
    gap: 0.18rem;
    margin: 0.4rem 0 0;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(108, 167, 162, 0.18);
}

.rust-bridge-readiness > div {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font: 600 0.62rem/1.2 "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
}

.rust-bridge-readiness dt {
    color: var(--status-muted);
}

.rust-bridge-readiness dd {
    margin: 0;
    text-transform: uppercase;
}

.rust-bridge-readiness .is-ready {
    color: var(--status-green);
}

.rust-bridge-readiness .is-missing {
    color: var(--signal-orange);
}

.rust-provisioning-package {
    margin-bottom: 0.45rem;
    padding: 0.5rem 0.6rem;
    background: linear-gradient(120deg, rgba(39, 77, 74, 0.32), rgba(3, 13, 14, 0.88));
    border: 1px solid rgba(225, 165, 58, 0.58);
    box-shadow: 0 0 1rem rgba(225, 165, 58, 0.08);
}

.rust-provisioning-package > header,
.rust-provisioning-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.rust-provisioning-package h4,
.rust-provisioning-package p {
    margin: 0;
}

.rust-provisioning-package > header p,
.rust-provisioning-package > header span {
    color: var(--signal-orange);
    font: 600 0.58rem/1.2 "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rust-provisioning-package > p {
    padding: 0.3rem 0;
    color: var(--status-muted);
    font-size: 0.68rem;
}

.rust-provisioning-package textarea {
    display: block;
    width: 100%;
    min-height: 11rem;
    resize: vertical;
    padding: 0.45rem;
    color: #cce5df;
    background: rgba(0, 7, 8, 0.92);
    border: 1px solid rgba(108, 167, 162, 0.34);
    font: 0.65rem/1.35 Consolas, monospace;
}

.rust-provisioning-actions {
    justify-content: flex-start;
    margin-top: 0.35rem;
}

.rust-bridge-servers-panel {
    min-height: 0;
}

.rust-server-summary-row td {
    vertical-align: middle;
}

.rust-server-summary-row code {
    font-size: 0.52rem;
}

.rust-server-controls-row td {
    padding: 0 !important;
    background: rgba(18, 42, 42, 0.34);
}

.rust-server-controls > summary {
    padding: 0.3rem 0.55rem;
    color: var(--status-teal);
    font: 700 0.58rem/1.2 "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
}

.rust-server-controls-grid {
    display: grid;
    grid-template-columns: minmax(10rem, 0.7fr) minmax(22rem, 1.7fr) minmax(12rem, 0.85fr);
    gap: 0.55rem;
    padding: 0.5rem;
    border-top: 1px solid rgba(108, 167, 162, 0.22);
}

.rust-server-controls-grid > form,
.rust-server-credential-actions {
    align-content: start;
    padding: 0.45rem;
    background: rgba(0, 10, 11, 0.54);
    border: 1px solid rgba(108, 167, 162, 0.2);
}

.rust-server-controls-grid h5 {
    margin: 0 0 0.25rem;
    color: var(--cream);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rust-server-transport-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rust-server-transport-form h5,
.rust-server-transport-form button {
    grid-column: 1 / -1;
}

.rust-server-credential-actions {
    display: grid;
    gap: 0.35rem;
}

.rust-server-credential-actions p {
    margin: 0;
    color: var(--status-muted);
    font-size: 0.64rem;
}

@media (max-width: 68rem) {
    .service-bridge-rust-setup-grid,
    .rust-server-controls-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 44rem) {
    .rust-server-create-form,
    .rust-server-transport-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.restart-time {
    color: var(--signal-orange);
}

.incident-heading {
    padding: 0.48rem 0.75rem;
    color: var(--signal-orange);
    border-bottom: 1px solid rgba(108, 167, 162, 0.28);
}

.incident-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 3rem);
    padding: clamp(0.65rem, 1.2vh, 0.9rem) clamp(0.9rem, 2vw, 1.5rem);
}

.incident-message {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.incident-message h4,
.incident-message p {
    margin: 0;
}

.incident-message h4 {
    color: var(--status-teal);
    font-size: 1rem;
    letter-spacing: 0.09em;
}

.incident-message:first-child h4 {
    color: var(--status-green);
}

.incident-message p {
    margin-top: 0.2rem;
    color: var(--status-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.site-footer {
    position: fixed;
    z-index: 12;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: var(--site-footer-height);
    padding: 0.14rem 0.65rem;
    color: var(--status-teal);
    background: linear-gradient(180deg, rgba(8, 15, 16, 0.97), rgba(3, 7, 8, 0.99));
    border-block: 1px solid rgba(108, 167, 162, 0.42);
    box-shadow: 0 -1rem 2.5rem rgba(0, 0, 0, 0.42);
}

.site-footer p {
    margin: 0;
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}

.site-footer p span {
    color: var(--status-teal);
}

.site-footer .site-footer-divider {
    margin-inline: 0.5rem;
    color: rgba(108, 167, 162, 0.55);
}

.site-footer strong {
    color: var(--signal-orange);
    font-weight: 500;
}

.site-footer-legal {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
    margin-left: 0.45rem;
    font-size: 0.58rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: none;
}

.site-footer-legal a {
    color: rgba(44, 79, 81, 0.72);
    text-decoration: none;
}

.site-footer-legal a:hover,
.site-footer-legal a:focus-visible {
    color: rgba(44, 79, 81, 0.95);
    outline: none;
}

.site-footer-administration {
    position: absolute;
    top: 50%;
    right: 0.65rem;
    color: var(--status-teal);
    font-family: "Salted Shores", fantasy;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateY(-50%);
}

.site-footer-administration:hover,
.site-footer-administration:focus-visible {
    color: var(--seafoam);
    outline: none;
}

.site-footer-administration.is-active {
    color: var(--deep-teal);
}

.steam-api-statistics {
    display: grid;
    min-width: 0;
    min-height: 0;
    gap: 0.375rem;
    padding-right: 0.2rem;
    overflow: auto;
    scrollbar-color: var(--deep-teal) rgba(0, 0, 0, 0.42);
    scrollbar-width: thin;
}

.steam-api-alert {
    padding: 0.325rem 0.8rem;
    border: 1px solid;
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.steam-api-alert--warning {
    color: #ffe19a;
    background: rgba(111, 78, 12, 0.46);
    border-color: rgba(222, 173, 56, 0.72);
}

.steam-api-alert--reached {
    color: #ffd3ca;
    background: rgba(116, 31, 22, 0.58);
    border-color: rgba(218, 67, 48, 0.82);
}

.steam-api-budget-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.275rem 0.55rem;
}

.steam-api-budget-card {
    --steam-budget-color: var(--seafoam);

    min-width: 0;
    padding: 0.35rem 0.7rem;
    background: linear-gradient(145deg, rgba(14, 27, 28, 0.92), rgba(3, 9, 10, 0.94));
    border: 1px solid rgba(108, 167, 162, 0.34);
    box-shadow: inset 0 0 1.6rem rgba(0, 0, 0, 0.35);
}

.steam-api-budget-card--warning {
    --steam-budget-color: #deaf38;
    border-color: rgba(222, 175, 56, 0.68);
}

.steam-api-budget-card--reached {
    --steam-budget-color: #da4330;
    border-color: rgba(218, 67, 48, 0.8);
}

.steam-api-budget-card header,
.steam-api-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.steam-api-budget-card h3,
.steam-api-panel-heading h3 {
    margin: 0;
    color: var(--status-teal);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.67rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.steam-api-budget-card header strong {
    color: var(--steam-budget-color);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.68rem;
}

.steam-api-budget-card p {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0.275rem 0 0.225rem;
}

.steam-api-budget-card p b {
    color: var(--cream);
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.15rem;
}

.steam-api-budget-card p span,
.steam-api-budget-card small,
.steam-api-panel-heading span {
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.61rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.steam-api-budget-meter {
    height: 0.35rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.62);
    border: 1px solid rgba(108, 167, 162, 0.2);
}

.steam-api-budget-meter span {
    display: block;
    height: 100%;
    background: var(--steam-budget-color);
}

.steam-api-budget-card small {
    display: block;
    margin-top: 0.2rem;
}

.steam-api-panel {
    min-width: 0;
    background: rgba(3, 8, 9, 0.78);
    border: 1px solid rgba(108, 167, 162, 0.32);
}

.steam-api-panel-heading {
    min-height: 1.75rem;
    padding: 0.25rem 0.7rem;
    background: rgba(15, 27, 28, 0.82);
    border-bottom: 1px solid rgba(108, 167, 162, 0.28);
}

.steam-api-table-frame {
    min-width: 0;
    overflow: auto;
    scrollbar-color: var(--deep-teal) rgba(0, 0, 0, 0.42);
    scrollbar-width: thin;
}

.steam-api-table-frame--batches {
    max-height: 22rem;
}

.steam-api-table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    color: var(--cream);
    font-size: 0.7rem;
}

.steam-api-table th,
.steam-api-table td {
    padding: 0.24rem 0.6rem;
    border-bottom: 1px solid rgba(108, 167, 162, 0.16);
    text-align: left;
    white-space: nowrap;
}

.steam-api-table thead th {
    position: sticky;
    z-index: 1;
    top: 0;
    color: var(--status-teal);
    background: rgba(13, 24, 25, 0.98);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.steam-api-table tbody th {
    color: var(--signal-orange);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.steam-api-table tbody tr:hover {
    background: rgba(44, 79, 81, 0.2);
}

.steam-api-batch-table {
    min-width: 70rem;
}

.steam-api-batch-table td:last-child {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.steam-api-operational-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.225rem 0.45rem;
}

.steam-api-operational-grid article {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
    padding: 0.275rem 0.65rem;
    background: rgba(8, 17, 18, 0.82);
    border: 1px solid rgba(108, 167, 162, 0.24);
}

.steam-api-operational-grid span {
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.59rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.steam-api-operational-grid strong {
    min-width: 0;
    color: var(--cream);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.68rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.steam-api-operational-grid small {
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.55rem;
    letter-spacing: 0.04em;
}

.steam-api-cron-state--operational {
    border-color: rgba(114, 209, 107, 0.5) !important;
}

.steam-api-cron-state--warning {
    border-color: rgba(222, 175, 56, 0.62) !important;
}

.steam-api-cron-state--critical {
    border-color: rgba(218, 67, 48, 0.72) !important;
}

.steam-api-status {
    color: var(--status-muted);
    text-transform: uppercase;
}

.steam-api-status--succeeded {
    color: var(--status-online);
}

.steam-api-status--failed,
.steam-api-status--rate_limited {
    color: #ef715e;
}

.steam-api-status--budget_exhausted {
    color: #e7bd59;
}

.system-health,
.error-log-dashboard {
    display: grid;
    min-width: 0;
    min-height: 0;
    gap: 0.35rem;
    padding-right: 0.2rem;
    overflow: auto;
    scrollbar-color: var(--deep-teal) rgba(0, 0, 0, 0.42);
    scrollbar-width: thin;
}

.system-health-state--operational {
    --health-color: var(--status-green);
}

.system-health-state--warning {
    --health-color: #deaf38;
}

.system-health-state--critical {
    --health-color: #da4330;
}

.system-health-indicator {
    display: inline-block;
    width: 0.62rem;
    height: 0.62rem;
    flex: 0 0 auto;
    background: var(--health-color, var(--status-muted));
    border: 1px solid color-mix(in srgb, var(--health-color, var(--status-muted)) 80%, white);
    border-radius: 50%;
    box-shadow: 0 0 0.8rem color-mix(in srgb, var(--health-color, var(--status-muted)) 58%, transparent);
}

.system-health-overview {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 2.25rem;
    padding: 0.325rem 0.85rem;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--health-color) 12%, rgba(5, 12, 13, 0.94)), rgba(3, 8, 9, 0.94)),
        repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, 0.012) 6px 7px);
    border: 1px solid color-mix(in srgb, var(--health-color) 55%, transparent);
}

.system-health-overview .system-health-indicator {
    width: 0.9rem;
    height: 0.9rem;
}

.admin-health-symbol {
    width: 2rem;
    height: 2rem;
}

.system-health-overview div {
    display: grid;
    gap: 0.06rem;
}

.system-health-overview span,
.system-health-panel-heading span,
.system-health-panel-heading small,
.system-health-service-card dt,
.system-health-redis-grid span,
.error-log-panel-heading span,
.error-log-panel-heading small,
.error-log-summary-card span {
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.59rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.system-health-overview strong {
    color: var(--health-color);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.system-health-panel,
.error-log-panel {
    min-width: 0;
    background: rgba(3, 8, 9, 0.8);
    border: 1px solid rgba(108, 167, 162, 0.3);
}

.system-health-panel-heading,
.error-log-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.1rem;
    padding: 0.24rem 0.7rem;
    background: linear-gradient(90deg, rgba(18, 31, 32, 0.94), rgba(7, 14, 15, 0.9));
    border-bottom: 1px solid rgba(108, 167, 162, 0.25);
}

.system-health-panel-heading > div,
.error-log-panel-heading > div {
    display: grid;
    gap: 0.05rem;
}

.system-health-panel-heading > .admin-panel-title,
.error-log-panel-heading > .admin-panel-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.admin-panel-title > div {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.admin-panel-symbol {
    width: 1.85rem;
    height: 1.85rem;
}

.system-health-panel-heading h3,
.error-log-panel-heading h3 {
    margin: 0;
    color: var(--cream);
    font-family: "Salted Shores", fantasy;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.system-health-panel-heading > strong {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--health-color, var(--status-muted));
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.system-health-panel-heading > .system-health-panel-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
}

.system-health-panel-controls > strong {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--health-color, var(--status-muted));
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.system-health-panel-controls form {
    margin: 0;
}

.system-health-action {
    min-height: 1.5rem;
    padding: 0.175rem 0.65rem;
    color: var(--cream);
    background: rgba(44, 79, 81, 0.82);
    border: 1px solid rgba(79, 161, 154, 0.68);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.system-health-action:hover,
.system-health-action:focus-visible {
    color: var(--black);
    background: var(--seafoam);
    outline: none;
}

.error-log-reset-form {
    margin: 0;
}

.error-log-reset-action {
    color: #ffd6ca;
    background: rgba(111, 35, 21, 0.78);
    border-color: rgba(221, 79, 45, 0.72);
}

.system-health-database-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.275rem 0.55rem;
    padding: 0.3rem 0.6rem;
}

.system-health-service-card {
    padding: 0.325rem 0.65rem;
    background: linear-gradient(145deg, rgba(12, 23, 24, 0.9), rgba(2, 7, 8, 0.94));
    border: 1px solid color-mix(in srgb, var(--health-color, var(--status-muted)) 42%, transparent);
}

.system-health-service-card header,
.system-health-service-card header > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.system-health-service-card h4,
.system-health-service-card header strong {
    margin: 0;
    color: var(--health-color, var(--cream));
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.system-health-service-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.175rem 0.35rem;
    margin: 0.325rem 0 0;
}

.system-health-service-card dl div {
    min-width: 0;
    padding: 0.2rem 0.4rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(108, 167, 162, 0.13);
}

.system-health-service-card dt,
.system-health-service-card dd {
    margin: 0;
}

.system-health-service-card dd {
    margin-top: 0.11rem;
    color: var(--cream);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.63rem;
    overflow-wrap: anywhere;
}

.system-health-service-card p,
.system-health-detail {
    margin: 0.275rem 0 0;
    color: var(--status-muted);
    font-size: 0.68rem;
    line-height: 1.35;
}

.system-health-redis-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    background: rgba(108, 167, 162, 0.18);
}

.system-health-redis-grid article {
    display: grid;
    min-width: 0;
    gap: 0.11rem;
    padding: 0.275rem 0.65rem;
    background: rgba(4, 11, 12, 0.97);
}

.system-health-redis-grid strong {
    color: var(--cream);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.7rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.system-health-detail {
    padding: 0 0.7rem 0.325rem;
}

.system-health-table-frame,
.error-log-table-frame {
    min-width: 0;
    overflow: auto;
    scrollbar-color: var(--deep-teal) rgba(0, 0, 0, 0.42);
    scrollbar-width: thin;
}

.system-health-table,
.error-log-table {
    width: 100%;
    min-width: 68rem;
    border-collapse: collapse;
    color: var(--cream);
    font-size: 0.68rem;
}

.system-health-table th,
.system-health-table td,
.error-log-table th,
.error-log-table td {
    padding: 0.24rem 0.58rem;
    border-bottom: 1px solid rgba(108, 167, 162, 0.15);
    text-align: left;
    vertical-align: top;
}

.system-health-table thead th,
.error-log-table thead th {
    position: sticky;
    z-index: 1;
    top: 0;
    color: var(--status-teal);
    background: rgba(13, 24, 25, 0.98);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.system-health-table tbody th {
    color: var(--cream);
    white-space: nowrap;
}

.system-health-table tbody tr:hover,
.error-log-table tbody tr:hover {
    background: rgba(44, 79, 81, 0.18);
}

.system-health-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--health-color, var(--status-muted));
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.system-health-badge i {
    width: 0.45rem;
    height: 0.45rem;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 0.55rem currentColor;
}

.error-log-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem 0.5rem;
}

.error-log-summary-card {
    --error-color: var(--status-muted);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-height: 2.1rem;
    padding: 0.3rem 0.75rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--error-color) 10%, rgba(5, 12, 13, 0.95)), rgba(2, 7, 8, 0.96));
    border: 1px solid color-mix(in srgb, var(--error-color) 48%, transparent);
}

.error-log-summary-card strong {
    color: var(--error-color);
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.15rem;
    font-weight: 500;
}

.error-log-severity--critical {
    --error-color: #da4330;
}

.error-log-severity--error {
    --error-color: #ef715e;
}

.error-log-severity--warning {
    --error-color: #deaf38;
}

.error-log-notice {
    padding: 0.3rem 0.7rem;
    color: #ffe19a;
    background: rgba(111, 78, 12, 0.38);
    border-bottom: 1px solid rgba(222, 173, 56, 0.58);
    font-size: 0.7rem;
}

.error-log-table-frame {
    max-height: 25rem;
}

.error-log-table {
    min-width: 72rem;
}

.error-log-severity {
    color: var(--error-color, var(--status-muted));
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.error-log-message {
    min-width: 22rem;
    max-width: 38rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.error-log-file-lines {
    display: grid;
    max-height: 22rem;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: auto;
    list-style: none;
    scrollbar-color: var(--deep-teal) rgba(0, 0, 0, 0.42);
    scrollbar-width: thin;
}

.error-log-file-lines li {
    padding: 0.25rem 0.65rem;
    border-bottom: 1px solid rgba(108, 167, 162, 0.14);
}

.error-log-file-lines code {
    color: var(--status-muted);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.63rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: normal;
}

@media (max-width: 1150px) {
    .system-health-redis-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1050px) {
    .steam-api-budget-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steam-api-operational-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .system-health-service-card dl,
    .system-health-redis-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 840px) {
    .steam-api-statistics {
        gap: 0.275rem;
    }

    .steam-api-budget-grid,
    .steam-api-operational-grid {
        grid-template-columns: 1fr;
    }

    .steam-api-budget-card {
        padding: 0.3rem 0.6rem;
    }

    .system-health-database-grid,
    .system-health-service-card dl,
    .system-health-redis-grid,
    .error-log-summary {
        grid-template-columns: 1fr;
    }

    .system-health-panel-heading,
    .error-log-panel-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.15rem;
    }

    .system-health-panel-heading > .system-health-panel-controls {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 1050px) {
    .server-table,
    .server-table tbody {
        display: block;
    }

    .server-table colgroup,
    .server-table thead {
        display: none;
    }

    .server-table tbody {
        padding: 0.75rem;
    }

    .server-table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        background: rgba(11, 19, 20, 0.78);
        border: 1px solid rgba(108, 167, 162, 0.28);
    }

    .server-table tbody tr + tr {
        margin-top: 0.75rem;
    }

    .server-table tbody tr + tr td {
        border-top: 0;
    }

    .server-table td {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        border-top: 1px solid rgba(108, 167, 162, 0.16);
    }

    .server-table td:first-child {
        grid-column: 1 / -1;
        border-top: 0;
        border-bottom: 1px solid rgba(108, 167, 162, 0.24);
    }

    .server-table td::before {
        display: block;
        content: attr(data-label);
        font-size: 0.62rem;
        text-transform: uppercase;
    }

    .server-table td:first-child::before {
        display: none;
    }
}

@media (min-width: 841px) {
    .site-header {
        display: grid;
        min-height: var(--desktop-header-height);
    }

    .primary-navigation,
    .brand-banner {
        grid-area: 1 / 1;
    }

    .primary-navigation {
        z-index: 1;
        flex-wrap: nowrap;
        min-height: var(--desktop-header-height);
    }

    .brand-banner {
        z-index: 2;
        min-height: var(--desktop-header-height);
        pointer-events: none;
    }

    .brand-lockup,
    .banner-profile {
        pointer-events: auto;
    }

    .mobile-navigation-toggle,
    .mobile-navigation-button,
    .mobile-navigation-edge,
    .mobile-navigation-icon,
    .mobile-navigation-scrim {
        display: none !important;
    }
}

@media (max-width: 840px) {
    :root {
        --site-footer-height: 3.2rem;
    }

    .brand-banner {
        --logo-size: var(--mobile-logo-size);
        --brand-lockup-height: var(--mobile-brand-lockup-height);

        min-height: var(--mobile-banner-height);
        padding: var(--mobile-banner-padding) clamp(3rem, 12vw, 3.25rem) var(--mobile-banner-padding) clamp(0.65rem, 3vw, 1.25rem);
        column-gap: clamp(0.35rem, 2vw, 0.75rem);
    }

    .banner-profile {
        --profile-logout-slot: 2.55rem;
        --profile-panel-right: -2.79rem;
    }

    .brand-wordmark {
        font-size: clamp(0.46rem, 2vw, 0.62rem);
        letter-spacing: 0.01em;
    }

    .mobile-navigation-toggle {
        position: fixed;
        display: block;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .mobile-navigation-button {
        position: fixed;
        z-index: 30;
        top: var(--mobile-navigation-top);
        left: 0;
        display: grid;
        width: 3.25rem;
        height: 3.25rem;
        place-items: center;
        cursor: pointer;
        color: var(--cream);
        background: rgba(26, 31, 32, 0.99);
        border: 0;
        box-shadow: none;
        touch-action: pan-y;
        transition: transform 220ms ease;
    }

    .mobile-navigation-edge {
        position: fixed;
        z-index: 25;
        top: var(--mobile-navigation-top);
        bottom: 0;
        left: 0;
        display: block;
        width: 1rem;
        touch-action: pan-y;
    }

    .mobile-navigation-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: inherit;
        font-family: "Salted Shores", fantasy;
        font-size: 1.6rem;
        line-height: 0.42;
        transform: scaleX(1.2);
    }

    .mobile-navigation-icon::before {
        content: "-\A-\A-";
        white-space: pre;
    }

    .primary-navigation {
        position: fixed;
        z-index: 20;
        top: var(--mobile-navigation-top);
        bottom: 0;
        left: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        width: var(--mobile-menu-width);
        min-height: 0;
        gap: 0.1rem;
        padding: 0.5rem 0.5rem 0.75rem;
        overflow-y: auto;
        visibility: hidden;
        background: linear-gradient(90deg,
            rgba(44, 79, 81, 0.68) 0%,
            rgba(44, 79, 81, 0.3) 64%,
            transparent 100%);
        border: 0;
        box-shadow: 1.25rem 0 3rem rgba(0, 0, 0, 0.62);
        opacity: 0;
        pointer-events: none;
        touch-action: pan-y;
        transform: translateX(-100%);
        transition:
            transform 220ms ease,
            opacity 180ms ease,
            visibility 0s linear 220ms;
    }

    .primary-navigation > a,
    .primary-navigation > .nav-disabled,
    .nav-dropdown > summary {
        justify-content: flex-start;
        width: 100%;
        padding: 0.55rem 0.7rem;
        font-size: 0.92rem;
        letter-spacing: 0.075em;
        text-align: left;
    }

    .nav-separator {
        display: none;
    }

    .nav-dropdown {
        position: static;
        display: block;
        width: 100%;
    }

    .nav-dropdown > summary {
        justify-content: space-between;
    }

    .nav-dropdown-menu {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 0.2rem;
        transform: none;
    }

    .page-content {
        padding: 4rem 0.75rem 1.5rem;
    }

    .administrator-page {
        width: 100%;
        height: calc(100svh - var(--mobile-banner-height) - var(--site-footer-height));
        min-height: 0;
        padding: 4rem 0.5rem 0.375rem;
    }

    .administrator-shell {
        grid-template-columns: 6.5rem minmax(0, 1fr);
    }

    .administrator-sidebar {
        padding: 0.375rem 0.4rem;
    }

    .administrator-sidebar h2 {
        margin-bottom: 0.325rem;
        font-size: 0.72rem;
    }

    .administrator-menu a {
        padding: 0.3rem 0.45rem;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
    }

    .administrator-content {
        padding: 0.3rem 0.6rem;
    }

    .administrator-content-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.175rem;
        padding-bottom: 0.3rem;
    }

    .administrator-content-heading h2 {
        font-size: 1.35rem;
    }

    .administrator-content-heading > p {
        font-size: 0.62rem;
    }

    .administrator-content-heading-meta {
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }

    .administrator-content-heading-meta p {
        font-size: 0.62rem;
    }

    .visitor-whitelist-dialog {
        width: calc(100vw - 1rem);
        max-height: calc(100svh - 1rem);
    }

    .visitor-whitelist-dialog-heading {
        padding: 0.5rem 0.6rem;
    }

    .service-bridge-module-heading {
        align-items: flex-start;
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .service-bridge-health-strip {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .service-bridge-health-strip .service-bridge-metrics {
        grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    }

    .service-bridge-body-grid {
        grid-template-columns: 1fr;
    }

    .administrator-privilege-grid {
        grid-template-columns: 1fr;
    }

    .administrator-permission-row {
        grid-template-columns: 1fr;
        gap: 0.125rem;
    }

    .administrator-role-rank-scale {
        font-size: 0.5rem;
    }

    .administrator-role-manager {
        grid-template-columns: 1fr;
        overflow: auto;
    }

    .administrator-role-list-panel {
        min-height: 14rem;
        max-height: 18rem;
        border-right: 0;
        border-bottom: 1px solid rgba(108, 167, 162, 0.3);
    }

    .administrator-role-editor {
        overflow: visible;
    }

    .administrator-role-permission-grid {
        grid-template-columns: 1fr;
    }

    .administrator-role-editor-heading,
    .administrator-role-permissions-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.125rem;
    }

    .administrator-pagination {
        justify-content: space-between;
        gap: 0.25rem;
        font-size: 0.62rem;
    }

    .placeholder-window {
        min-height: clamp(11rem, 34vh, 18rem);
        padding: 1.25rem;
    }

    .placeholder-window h2 {
        font-size: clamp(1.7rem, 9vw, 2.75rem);
    }

    .mobile-navigation-scrim {
        position: fixed;
        z-index: 15;
        inset: var(--mobile-banner-height) 0 0;
        display: block;
        visibility: hidden;
        cursor: pointer;
        background: rgba(0, 0, 0, 0.62);
        opacity: 0;
        pointer-events: none;
        touch-action: pan-y;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        transition:
            opacity 180ms ease,
            visibility 0s linear 220ms;
    }

    .mobile-navigation-toggle:checked ~ .primary-navigation {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
        transition-delay: 0s;
    }

    .mobile-navigation-toggle:checked ~ .mobile-navigation-button {
        transform: translateX(var(--mobile-menu-width));
    }

    .mobile-navigation-toggle:checked ~ .mobile-navigation-edge {
        pointer-events: none;
    }

    .mobile-navigation-toggle:checked ~ .mobile-navigation-scrim {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .site-header.is-dragging-mobile-navigation .primary-navigation {
        visibility: visible;
        opacity: var(--mobile-menu-drag-opacity);
        pointer-events: none;
        transform: translateX(calc(-100% + var(--mobile-menu-drag-offset)));
        transition: none;
    }

    .site-header.is-dragging-mobile-navigation .mobile-navigation-button {
        transform: translateX(var(--mobile-menu-drag-offset));
        transition: none;
    }

    .site-header.is-dragging-mobile-navigation .mobile-navigation-edge {
        pointer-events: none;
    }

    .site-header.is-dragging-mobile-navigation .mobile-navigation-scrim {
        visibility: visible;
        opacity: var(--mobile-menu-drag-scrim-opacity);
        pointer-events: none;
        transition: none;
    }

    body:has(.mobile-navigation-toggle:checked) {
        overflow: hidden;
    }
}

@media (max-width: 840px) {
    .status-page {
        width: 100%;
        min-height: 0;
        padding: 4.25rem 0.75rem 1.25rem;
        border-inline: 0;
    }

    .status-dashboard {
        gap: 1rem;
    }

    .status-introduction {
        align-items: center;
        gap: 0.75rem;
    }

    .status-introduction h2 {
        font-size: clamp(1.65rem, 8vw, 2.4rem);
        letter-spacing: 0.04em;
    }

    .status-introduction p {
        max-width: 30rem;
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .status-symbol--large {
        width: 3.75rem;
        height: 3.75rem;
    }

    .network-summary {
        grid-template-columns: 1fr;
    }

    .network-stat {
        justify-content: flex-start;
        min-height: 4.6rem;
        padding: 0.8rem 1.1rem;
    }

    .network-stat + .network-stat {
        border-top: 1px solid rgba(108, 167, 162, 0.2);
        border-left: 0;
    }

    .network-stat .status-symbol {
        width: 2.4rem;
        height: 2.4rem;
    }

    .network-status-light {
        width: 1.65rem;
        height: 1.65rem;
        margin-inline: 0.38rem;
    }

    .server-table tbody {
        padding: 0.55rem;
    }

    .server-table tbody tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .server-table td {
        padding: 0.7rem;
    }

    .incident-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }

    .incident-message {
        align-items: flex-start;
    }

    .incident-message .status-symbol {
        width: 2.5rem;
        height: 2.5rem;
    }

    .site-footer {
        align-items: center;
        padding: 0.2rem 0.5rem;
    }

    .site-footer-administration {
        right: 0.3rem;
        font-size: 0.54rem;
    }

    .site-footer p {
        max-width: 22rem;
        font-size: 0.58rem;
        line-height: 1.3;
    }
}

@media (max-width: 420px) {
    .status-introduction {
        align-items: flex-start;
    }

    .status-symbol--large {
        width: 3.2rem;
        height: 3.2rem;
    }

    .server-identity strong {
        white-space: normal;
    }

    .site-footer .site-footer-divider {
        margin-inline: 0.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .primary-navigation > a,
    .nav-dropdown > summary,
    .nav-caret,
    .mobile-navigation-button,
    .mobile-navigation-scrim,
    .primary-navigation,
    .visitor-whitelist-dialog,
    .visitor-whitelist-dialog::backdrop {
        transition: none;
    }
}
.steam-sign-in {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.steam-sign-in img {
    display: block;
    max-width: 100%;
    height: auto;
}

.account-connection {
    display: grid;
    width: 100%;
    gap: 0.35rem;
    padding: 0.5rem;
    border: 1px solid rgba(70, 145, 143, .45);
    background: rgba(4, 14, 15, .72);
}

.account-connection h3,
.account-connection p {
    margin: 0;
}

.account-connection h3 {
    color: var(--cream);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.account-connection p {
    color: var(--status-muted);
    font-size: 0.64rem;
    line-height: 1.25;
}

.account-connection form,
.account-connection .account-action {
    width: 100%;
}

.account-action--discord {
    gap: 0.35rem;
    border-color: #5865f2;
    background: #5865f2;
    color: #fff;
}

.account-action--discord img {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
}

:root {
    --site-content-max-width: 96rem;
}

.page-content,
.administrator-page,
.status-page {
    width: min(var(--site-content-max-width), calc(100% - 2rem));
    margin-right: auto;
    margin-left: auto;
}

.page-content {
    padding-right: 0;
    padding-left: 0;
}

@media (min-width: 841px) {
    .page-content {
        min-height: calc(100svh - var(--desktop-header-height) - var(--site-footer-height));
        padding-top: 0;
        padding-bottom: 0;
    }

    .administrator-page {
        padding-top: 0;
        padding-bottom: 0;
    }

    .page-content > .placeholder-window,
    .page-content > .content-window {
        min-height: calc(100svh - var(--desktop-header-height) - var(--site-footer-height));
    }
}

.placeholder-window,
.content-window {
    width: 100%;
}

.manifest-page {
    position: relative;
    z-index: 1;
    width: min(var(--site-content-max-width), calc(100% - 2rem));
    min-height: calc(100svh - var(--desktop-header-height) - var(--site-footer-height));
    margin: 0 auto;
    padding: clamp(0.7rem, 1.2vh, 1rem) clamp(0.85rem, 2vw, 1.65rem);
    background:
        linear-gradient(180deg, rgba(7, 13, 14, 0.92), rgba(3, 8, 9, 0.82)),
        repeating-linear-gradient(135deg, transparent 0 5px, rgba(79, 161, 154, 0.018) 5px 6px);
    border-inline: 1px solid rgba(79, 161, 154, 0.42);
    box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.56), 0 0 4rem rgba(0, 0, 0, 0.72);
}

.manifest-dashboard {
    display: grid;
    gap: clamp(0.55rem, 1vh, 0.8rem);
}

.manifest-introduction {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.manifest-introduction h2,
.manifest-section-heading h3,
.manifest-record-card h4 {
    margin: 0;
    color: var(--cream);
    font-family: "Salted Shores", fantasy;
    font-weight: 400;
    text-transform: uppercase;
}

.manifest-introduction h2 {
    font-size: clamp(1.8rem, 2.5vw, 2.6rem);
    line-height: 1;
    letter-spacing: 0.075em;
    text-shadow: 0 0.1em 0 var(--deep-teal), 0 0.4em 1em rgba(0, 0, 0, 0.9);
}

.manifest-introduction > div > p:last-child {
    margin: 0.2rem 0 0;
    color: var(--status-muted);
    font-size: 0.78rem;
}

.manifest-kicker,
.manifest-section-heading span,
.manifest-section-heading time,
.manifest-section-heading > strong,
.manifest-record-card header span,
.manifest-personal-summary span {
    margin: 0;
    color: var(--status-teal);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.manifest-scope {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.3rem;
    background: rgba(3, 9, 10, 0.72);
    border: 1px solid rgba(108, 167, 162, 0.28);
}

.manifest-scope a {
    padding: 0.28rem 0.65rem;
    color: var(--status-muted);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    border-left: 2px solid transparent;
}

.manifest-scope a:hover,
.manifest-scope a:focus-visible {
    color: var(--cream);
}

.manifest-scope a.is-active {
    color: var(--seafoam);
    background: rgba(44, 79, 81, 0.34);
    border-left-color: var(--seafoam);
}

.manifest-featured,
.manifest-personal {
    display: grid;
    gap: 0.4rem;
}

.manifest-availability {
    margin: 0;
    padding: 0.4rem 0.65rem;
    color: #e7bd59;
    background: rgba(90, 62, 14, 0.28);
    border: 1px solid rgba(231, 189, 89, 0.42);
    font-size: 0.7rem;
}

.manifest-section-heading,
.manifest-personal-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.manifest-section-heading h3 {
    margin-top: 0.05rem;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
}

.manifest-record-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}

.manifest-record-card,
.manifest-personal,
.manifest-login-panel,
.manifest-category {
    background: linear-gradient(145deg, rgba(13, 24, 25, 0.92), rgba(2, 7, 8, 0.94));
    border: 1px solid rgba(108, 167, 162, 0.34);
    box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.42);
}

.manifest-record-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid rgba(108, 167, 162, 0.25);
}

.manifest-record-card h4 {
    margin-top: 0.08rem;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}

.manifest-record-card header > strong {
    color: var(--signal-orange);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.manifest-record-card ol {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.manifest-record-card li {
    display: grid;
    grid-template-columns: 1.3rem minmax(0, 1fr) auto;
    align-items: center;
    min-height: 1.75rem;
    gap: 0.35rem;
    padding: 0.22rem 0.5rem;
    font-size: 0.67rem;
}

.manifest-record-card li + li {
    border-top: 1px solid rgba(108, 167, 162, 0.14);
}

.manifest-rank {
    color: var(--status-teal);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
}

.manifest-player {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manifest-player a {
    color: var(--cream);
    text-decoration: none;
}

.manifest-player a:hover,
.manifest-player a:focus-visible {
    color: var(--seafoam);
}

.manifest-record-card li > strong {
    color: var(--cream);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-weight: 500;
    white-space: nowrap;
}

.manifest-personal {
    padding: 0.45rem;
}

.manifest-login-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
}

.manifest-login-panel p {
    margin: 0;
    color: var(--status-muted);
    font-size: 0.72rem;
}

.manifest-personal-summary {
    padding: 0.35rem 0.5rem;
    background: rgba(44, 79, 81, 0.18);
    border-left: 3px solid var(--seafoam);
}

.manifest-personal-summary strong,
.manifest-personal-summary span {
    display: block;
}

.manifest-personal-summary > div > strong {
    color: var(--cream);
    font-size: 0.8rem;
}

.manifest-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
}

.manifest-category {
    overflow: hidden;
}

.manifest-category summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.5rem;
    color: var(--status-teal);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    background: rgba(44, 79, 81, 0.24);
}

.manifest-category summary strong {
    color: var(--cream);
    font-weight: 500;
}

.manifest-category dl {
    max-height: 15rem;
    margin: 0;
    overflow: auto;
}

.manifest-category dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
}

.manifest-category dl > div + div {
    border-top: 1px solid rgba(108, 167, 162, 0.13);
}

.manifest-category dt {
    overflow: hidden;
    color: var(--status-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manifest-category dd {
    margin: 0;
    color: var(--cream);
    font-family: "Bahnschrift Condensed", "Franklin Gothic Medium", sans-serif;
    white-space: nowrap;
}

.manifest-empty {
    grid-column: 1 / -1;
    color: var(--status-muted);
    text-align: center;
}

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

    .manifest-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 840px) {
    .manifest-page {
        width: 100%;
        min-height: 0;
        padding: 4.25rem 0.75rem 1.25rem;
        border-inline: 0;
    }

    .manifest-introduction {
        align-items: flex-start;
    }

    .manifest-record-grid,
    .manifest-category-grid {
        grid-template-columns: 1fr;
    }

    .manifest-login-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .manifest-record-grid {
        grid-template-columns: 1fr;
    }

    .manifest-section-heading,
    .manifest-personal-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.2rem;
    }
}

.legal-document {
    display: block;
    min-height: 0;
    padding: clamp(1rem, 2vw, 2rem);
    color: var(--cream);
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.55;
}

.legal-document > h2,
.legal-document > h3,
.legal-document > h4 {
    margin: 1.1em 0 .35em;
    color: var(--seafoam);
}

@media (max-width: 840px) {
    .account-window {
        padding: 0.5rem;
    }

    .account-dashboard {
        grid-template-columns: 1fr;
    }
}

.legal-document > p,
.legal-document > ul {
    margin: .45rem 0;
}

.administrator-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .4rem;
}

.administrator-pagination form,
.administrator-pagination label {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
}

.administrator-pagination input[type="number"] {
    width: 4rem;
}

.administrator-pagination .is-disabled {
    opacity: .35;
    pointer-events: none;
}