:root {
    color-scheme: dark;

    --bg: #080b10;
    --bg-soft: #0d1118;
    --panel: #111720;
    --panel-2: #151d28;
    --border: rgba(255,255,255,.075);
    --border-strong: rgba(255,255,255,.12);
    --text: #f3f6fb;
    --muted: #8d9aab;
    --muted-2: #667384;

    --accent: #7c5cff;
    --accent-2: #9b87ff;
    --green: #41d18a;
    --red: #ff6474;
    --yellow: #f3bf5b;

    --radius: 18px;
    --radius-small: 12px;

    --sidebar: 252px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background:
        radial-gradient(
            circle at 75% -10%,
            rgba(124,92,255,.12),
            transparent 34%
        ),
        var(--bg);

    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    color: inherit;
}

.app-shell {
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;

    width: var(--sidebar);

    display: flex;
    flex-direction: column;

    padding: 20px 14px 14px;

    background:
        rgba(10,14,20,.94);

    border-right:
        1px solid var(--border);

    backdrop-filter:
        blur(18px);

    z-index: 50;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 4px 8px 20px;
}

.brand-mark {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.5px;

    background:
        linear-gradient(
            145deg,
            var(--accent),
            #4e33ca
        );

    box-shadow:
        0 10px 30px
        rgba(124,92,255,.2);
}

.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-copy strong {
    font-size: 16px;
}

.brand-copy span {
    color: var(--muted);
    font-size: 12px;
}

.server-chip {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;
    padding: 12px;

    border: 1px solid var(--border);
    border-radius: var(--radius-small);

    background:
        rgba(255,255,255,.025);
}

.server-chip > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.server-chip strong,
.server-chip span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.server-chip strong {
    font-size: 12px;
}

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

.status-dot,
.mini-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 999px;

    background: var(--red);

    box-shadow:
        0 0 0 4px
        rgba(255,100,116,.08);
}

.status-dot.online,
.health-badge.online {
    background: var(--green);
}

.status-dot.online {
    box-shadow:
        0 0 0 4px
        rgba(65,209,138,.1);
}

.sidebar-nav {
    min-height: 0;
    overflow-y: auto;

    padding-right: 2px;
}

.nav-caption {
    padding: 15px 10px 7px;

    color: var(--muted-2);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.nav-item {
    width: 100%;

    display: grid;
    grid-template-columns: 25px 1fr auto;
    align-items: center;
    gap: 8px;

    padding: 9px 10px;
    margin: 2px 0;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: var(--muted);

    text-align: left;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}

.nav-item:hover {
    background:
        rgba(255,255,255,.04);

    color: var(--text);
}

.nav-item.active {
    background:
        linear-gradient(
            90deg,
            rgba(124,92,255,.18),
            rgba(124,92,255,.07)
        );

    color: #fff;
}

.nav-icon {
    width: 24px;

    color: currentColor;

    text-align: center;
    font-size: 15px;
}

.soon {
    padding: 3px 5px;

    border-radius: 5px;

    background:
        rgba(255,255,255,.05);

    color: var(--muted-2);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .05em;
}

.nav-item.active .soon {
    color: var(--accent-2);
    background:
        rgba(124,92,255,.12);
}

.sidebar-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 14px 8px 2px;
    margin-top: auto;

    color: var(--muted-2);

    font-size: 10px;
}

.sidebar-footer strong {
    color: var(--muted);
}

.workspace {
    min-height: 100vh;

    margin-left: var(--sidebar);

    padding: 28px 32px 50px;
}

.topbar {
    min-height: 66px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    margin-bottom: 28px;
}

.eyebrow,
.card-label,
.coming-kicker {
    display: block;

    color: var(--muted-2);

    font-size: 10px;
    font-weight: 750;
    letter-spacing: .13em;
}

.topbar h1 {
    margin: 5px 0 0;

    font-size: 24px;
    font-weight: 650;
    letter-spacing: -.035em;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.readonly-pill {
    padding: 7px 9px;

    border:
        1px solid rgba(124,92,255,.18);

    border-radius: 7px;

    background:
        rgba(124,92,255,.08);

    color: var(--accent-2);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.refresh-button,
.mobile-menu {
    border: 1px solid var(--border-strong);
    border-radius: 9px;

    background: var(--panel);

    cursor: pointer;
}

.refresh-button {
    min-width: 92px;
    padding: 8px 12px;
}

.refresh-button:hover {
    background: var(--panel-2);
}

.refresh-button.loading {
    opacity: .55;
    pointer-events: none;
}

.mobile-menu {
    display: none;
    width: 38px;
    height: 38px;
}

.page {
    display: none;
}

.page.active {
    display: block;
}

.hero-grid,
.content-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(300px, .75fr);
    gap: 16px;
}

.hero-card,
.panel,
.metric-card,
.coming-page {
    border: 1px solid var(--border);
    border-radius: var(--radius);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        ),
        var(--panel);

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.13);
}

.hero-card {
    min-height: 250px;

    padding: 24px;
}

.server-hero {
    position: relative;
    overflow: hidden;
}

.server-hero::after {
    content: "";

    position: absolute;
    width: 340px;
    height: 340px;

    right: -120px;
    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(124,92,255,.16),
            transparent 65%
        );

    pointer-events: none;
}

.hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.hero-top h2 {
    margin: 7px 0 0;

    font-size: 22px;
    font-weight: 650;
    letter-spacing: -.025em;
}

.health-badge {
    padding: 7px 10px;

    border-radius: 8px;

    background: var(--red);

    color: #080b10;

    font-size: 10px;
    font-weight: 800;
}

.hero-map {
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin-top: 38px;
}

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

.hero-map strong {
    font-size: 28px;
    font-weight: 650;
    letter-spacing: -.04em;
}

.hero-details {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0,1fr));
    gap: 12px;

    margin-top: 32px;
}

.hero-details > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hero-details span {
    color: var(--muted);
    font-size: 10px;
}

.hero-details strong {
    font-size: 13px;
}

.health-overview {
    display: flex;
    flex-direction: column;
}

.health-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 16px 0;

    border-bottom:
        1px solid var(--border);
}

.health-row:first-of-type {
    margin-top: 15px;
}

.health-row:last-child {
    border-bottom: 0;
}

.health-row > div {
    display: flex;
    align-items: center;
    gap: 9px;

    color: var(--muted);
}

.health-row strong {
    font-size: 12px;
}

.mini-dot {
    width: 6px;
    height: 6px;

    background: var(--green);

    box-shadow: none;
}

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

    margin: 16px 0;
}

.metric-card {
    min-height: 124px;
    padding: 19px;
}

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

.metric-card > strong {
    display: block;

    margin-top: 13px;

    font-size: 21px;
    font-weight: 650;
    letter-spacing: -.035em;
}

.metric-card small {
    display: block;

    margin-top: 7px;

    color: var(--muted-2);
}

.progress {
    height: 4px;

    margin-top: 16px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255,255,255,.06);
}

.progress span {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--accent),
            var(--accent-2)
        );

    transition:
        width .35s ease;
}

.panel {
    padding: 22px;
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 20px;
}

.panel-heading h3 {
    margin: 6px 0 0;

    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.02em;
}

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

.summary-item {
    padding: 15px;

    border: 1px solid var(--border);
    border-radius: 11px;

    background:
        rgba(255,255,255,.018);
}

.summary-item span {
    display: block;

    margin-bottom: 8px;

    color: var(--muted);
    font-size: 10px;
}

.summary-item strong {
    font-size: 16px;
}

.roadmap {
    display: flex;
    flex-direction: column;
}

.roadmap-item {
    display: grid;
    grid-template-columns: 35px 1fr;
    gap: 11px;

    padding: 12px 0;

    border-bottom:
        1px solid var(--border);
}

.roadmap-item:last-child {
    border-bottom: 0;
}

.roadmap-item > span {
    color: var(--muted-2);

    font-size: 10px;
    font-weight: 700;
}

.roadmap-item div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.roadmap-item strong {
    font-size: 12px;
}

.roadmap-item small {
    color: var(--muted);
}

.roadmap-item.done > span,
.roadmap-item.done strong {
    color: var(--accent-2);
}

.feature-panel {
    margin-top: 16px;
}

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

.feature {
    display: flex;
    flex-direction: column;
    gap: 7px;

    min-height: 92px;

    padding: 16px;

    border: 1px solid var(--border);
    border-radius: 11px;

    background:
        rgba(255,255,255,.018);
}

.feature strong {
    font-size: 12px;
}

.feature span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.coming-page {
    min-height: 460px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 40px;

    text-align: center;
}

.coming-page h2 {
    margin: 10px 0 7px;

    font-size: 29px;
    letter-spacing: -.04em;
}

.coming-page p {
    max-width: 570px;

    margin: 0;

    color: var(--muted);

    line-height: 1.6;
}

.coming-box {
    max-width: 500px;

    margin-top: 25px;
    padding: 15px 18px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background:
        rgba(255,255,255,.02);

    color: var(--muted);
}

.toast {
    position: fixed;

    right: 24px;
    bottom: 24px;

    padding: 11px 14px;

    border: 1px solid var(--border-strong);
    border-radius: 9px;

    background: #171e29;

    opacity: 0;
    transform:
        translateY(8px);

    pointer-events: none;

    transition:
        opacity .18s ease,
        transform .18s ease;

    z-index: 200;
}

.toast.show {
    opacity: 1;
    transform:
        translateY(0);
}


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

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


@media (max-width: 880px) {
    :root {
        --sidebar: 260px;
    }

    .sidebar {
        transform:
            translateX(-100%);

        transition:
            transform .2s ease;
    }

    body.sidebar-open .sidebar {
        transform:
            translateX(0);
    }

    .workspace {
        margin-left: 0;
        padding: 20px;
    }

    .mobile-menu {
        display: block;
    }

    .topbar {
        align-items: flex-start;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .readonly-pill {
        display: none;
    }

    .hero-grid,
    .content-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {
    .workspace {
        padding: 14px;
    }

    .topbar {
        gap: 10px;
        margin-bottom: 18px;
    }

    .topbar h1 {
        font-size: 19px;
    }

    .refresh-button {
        min-width: 0;
    }

    .metric-grid,
    .feature-grid,
    .summary-grid {
        grid-template-columns: 1fr;
    }

    .hero-card,
    .panel,
    .metric-card {
        border-radius: 14px;
    }

    .hero-card {
        padding: 18px;
    }

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

    .hero-map strong {
        font-size: 23px;
    }
}


/* ================================================
   AUTH / ACCESS
   ================================================ */

.login-page {
    min-height: 100vh;

    display: grid;
    place-items: center;

    padding: 24px;

    position: relative;
    overflow: hidden;
}

.login-glow {
    position: absolute;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(124,92,255,.17),
            transparent 66%
        );

    pointer-events: none;
}

.login-card {
    width: min(
        100%,
        390px
    );

    position: relative;

    padding: 34px;

    border:
        1px solid
        var(--border-strong);

    border-radius: 22px;

    background:
        rgba(15,20,28,.94);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.35);

    backdrop-filter:
        blur(24px);
}

.login-logo {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    margin-bottom: 22px;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--accent),
            #4c32c5
        );

    font-weight: 850;
}

.login-eyebrow {
    color: var(--accent-2);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
}

.login-card h1 {
    margin:
        5px 0 7px;

    font-size: 28px;
    letter-spacing: -.045em;
}

.login-card p {
    margin:
        0 0 28px;

    color: var(--muted);

    line-height: 1.5;
}

.stack-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stack-form label,
.login-card label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.login-card label {
    margin-bottom: 14px;
}

.stack-form label > span,
.login-card label > span {
    color: var(--muted);

    font-size: 11px;
}

input,
select {
    width: 100%;

    padding: 11px 12px;

    border:
        1px solid
        var(--border-strong);

    border-radius: 10px;

    outline: none;

    background: #0b1017;
    color: var(--text);

    transition:
        border .15s ease,
        box-shadow .15s ease;
}

input:focus,
select:focus {
    border-color:
        rgba(124,92,255,.65);

    box-shadow:
        0 0 0 3px
        rgba(124,92,255,.1);
}

.primary-button,
.secondary-button {
    border:
        1px solid
        var(--border-strong);

    border-radius: 9px;

    cursor: pointer;
}

.primary-button {
    padding: 11px 14px;

    background:
        linear-gradient(
            145deg,
            var(--accent),
            #6347dc
        );

    border-color:
        transparent;

    color: white;

    font-weight: 700;
}

.secondary-button {
    padding: 8px 11px;

    background:
        var(--panel-2);

    color: var(--text);
}

.primary-button:hover,
.secondary-button:hover {
    filter:
        brightness(1.08);
}

.form-error {
    min-height: 18px;

    margin-top: 12px;

    color: var(--red);

    font-size: 11px;
}

.login-note {
    display: block;

    margin-top: 20px;

    color: var(--muted-2);

    text-align: center;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 15px;
    padding: 11px;

    border:
        1px solid
        var(--border);

    border-radius: 12px;

    background:
        rgba(255,255,255,.02);
}

.avatar {
    width: 33px;
    height: 33px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background:
        rgba(124,92,255,.16);

    color: var(--accent-2);

    font-weight: 800;
}

.sidebar-user > div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-user strong {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 12px;
}

.sidebar-user span {
    color: var(--muted);

    font-size: 10px;
}

.current-role {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.current-role span {
    color: var(--muted);

    font-size: 10px;
}

.current-role strong {
    font-size: 11px;
}

.access-big {
    margin-top: 22px;

    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.035em;
}

.muted-copy {
    color: var(--muted);

    line-height: 1.55;
}

.security-line {
    display: flex;
    justify-content: space-between;

    padding: 9px 0;

    border-bottom:
        1px solid
        var(--border);

    font-size: 11px;
}

.security-line span {
    color: var(--muted);
}

.security-line strong {
    color: var(--green);
}

.users-layout {
    display: grid;

    grid-template-columns:
        minmax(0,1.6fr)
        minmax(280px,.7fr);

    gap: 16px;
}

.user-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-card {
    padding: 15px;

    border:
        1px solid
        var(--border);

    border-radius: 12px;

    background:
        rgba(255,255,255,.018);
}

.user-card-top {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.user-identity {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-identity strong {
    font-size: 13px;
}

.user-identity span,
.user-detail {
    color: var(--muted);

    font-size: 10px;
}

.user-detail {
    margin-top: 10px;
}

.user-state {
    height: fit-content;

    padding: 4px 7px;

    border-radius: 7px;

    font-size: 9px;
    font-weight: 750;
}

.user-state.enabled {
    background:
        rgba(65,209,138,.1);

    color: var(--green);
}

.user-state.disabled {
    background:
        rgba(255,100,116,.1);

    color: var(--red);
}

.user-actions {
    display: grid;

    grid-template-columns:
        minmax(160px,1fr)
        auto
        auto;

    gap: 8px;

    margin-top: 13px;
}

.protected-user {
    margin-top: 12px;

    padding: 9px 11px;

    border:
        1px solid
        rgba(124,92,255,.16);

    border-radius: 8px;

    background:
        rgba(124,92,255,.07);

    color: var(--accent-2);

    font-size: 10px;
}

.owner-note {
    margin-top: 18px;

    padding: 12px;

    border:
        1px solid
        rgba(124,92,255,.14);

    border-radius: 10px;

    background:
        rgba(124,92,255,.055);

    color: var(--muted);

    font-size: 10px;
    line-height: 1.5;
}

.role-panel {
    margin-top: 16px;
}

.role-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap: 10px;
}

.role-card {
    min-height: 130px;

    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 16px;

    border:
        1px solid
        var(--border);

    border-radius: 11px;

    background:
        rgba(255,255,255,.018);
}

.role-card strong {
    font-size: 12px;
}

.role-card span,
.role-card em {
    color: var(--muted);

    font-size: 10px;
    line-height: 1.5;
}

.role-card em {
    margin-top: auto;

    color: var(--muted-2);
    font-style: normal;
}

.owner-role {
    border-color:
        rgba(124,92,255,.22);

    background:
        rgba(124,92,255,.045);
}

.audit-integrity {
    padding: 6px 9px;

    border-radius: 8px;

    background:
        rgba(65,209,138,.08);

    color: var(--green);

    font-size: 10px;
    font-weight: 700;
}

.audit-integrity.bad {
    background:
        rgba(255,100,116,.08);

    color: var(--red);
}

.audit-list {
    overflow-x: auto;
}

.audit-row {
    min-width: 720px;

    display: grid;

    grid-template-columns:
        165px
        minmax(220px,1fr)
        minmax(130px,.7fr)
        90px;

    gap: 12px;

    align-items: center;

    padding: 11px 5px;

    border-bottom:
        1px solid
        var(--border);
}

.audit-time,
.audit-target {
    color: var(--muted);

    font-size: 10px;
}

.audit-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.audit-main strong {
    font-size: 11px;
}

.audit-main span {
    color: var(--muted);

    font-size: 9px;
}

.audit-result {
    justify-self: end;

    padding: 4px 7px;

    border-radius: 6px;

    font-size: 9px;
    font-weight: 750;
}

.audit-result.ok {
    background:
        rgba(65,209,138,.08);

    color: var(--green);
}

.audit-result.bad {
    background:
        rgba(255,100,116,.08);

    color: var(--red);
}

.account-grid {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(320px,.8fr);

    gap: 16px;
}

.account-grid h2 {
    margin:
        9px 0 22px;

    font-size: 26px;
}

.account-meta {
    display: grid;
    gap: 10px;
}

.account-meta > div {
    display: flex;
    justify-content: space-between;

    padding: 11px 0;

    border-bottom:
        1px solid
        var(--border);
}

.account-meta span {
    color: var(--muted);
}

.toast.error {
    border-color:
        rgba(255,100,116,.3);

    color: var(--red);
}


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


@media (
    max-width: 900px
) {
    .users-layout,
    .account-grid {
        grid-template-columns:
            1fr;
    }
}


@media (
    max-width: 650px
) {
    .role-grid {
        grid-template-columns:
            1fr;
    }

    .user-actions {
        grid-template-columns:
            1fr;
    }

    .current-role {
        display: none;
    }

    .login-card {
        padding: 25px 20px;
    }
}


/* ================================================
   V3 OWNER UPDATE
   ================================================ */

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

@media (min-width: 1250px) {
    .account-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 800px) {
    .account-grid {
        grid-template-columns:
            1fr;
    }
}

.user-actions {
    grid-template-columns:
        minmax(150px, 1fr)
        repeat(3, auto);
}

@media (max-width: 850px) {
    .user-actions {
        grid-template-columns:
            1fr;
    }
}


/* ================================================
   V3 STAGE 3
   ================================================ */

.section-status {
    padding: 6px 9px;

    border-radius: 8px;

    background:
        rgba(124,92,255,.08);

    color: var(--accent-2);

    font-size: 10px;
    font-weight: 700;
}


.players-grid-v3 {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 11px;
}


.player-card-v3 {
    padding: 16px;

    border:
        1px solid
        var(--border);

    border-radius: 13px;

    background:
        rgba(255,255,255,.018);
}


.player-card-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}


.player-name-v3 {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 5px;
}


.player-name-v3 strong {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 13px;
}


.player-name-v3 span {
    color: var(--muted);

    font-size: 10px;
}


.player-score-v3 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


.player-score-v3 strong {
    font-size: 18px;
}


.player-score-v3 span {
    color: var(--muted-2);

    font-size: 9px;
}


.player-actions-v3 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 15px;
}


.player-action-v3,
.table-action-v3 {
    padding: 6px 8px;

    border:
        1px solid
        var(--border-strong);

    border-radius: 7px;

    background:
        var(--panel-2);

    color: var(--text);

    font-size: 9px;

    cursor: pointer;
}


.player-action-v3:hover,
.table-action-v3:hover {
    filter: brightness(1.12);
}


.player-action-v3:disabled {
    opacity: .35;
    cursor: not-allowed;
}


.player-action-v3.danger {
    border-color:
        rgba(255,100,116,.22);

    color: #ff8793;
}


.empty-state {
    padding: 35px;

    color: var(--muted);

    text-align: center;
}


.table-scroll {
    overflow-x: auto;
}


.v3-table {
    width: 100%;
    min-width: 900px;

    border-collapse: collapse;
}


.v3-table th {
    padding: 10px;

    border-bottom:
        1px solid
        var(--border-strong);

    color: var(--muted-2);

    font-size: 9px;
    font-weight: 750;

    text-align: left;
    text-transform: uppercase;
    letter-spacing: .07em;
}


.v3-table td {
    padding: 11px 10px;

    border-bottom:
        1px solid
        var(--border);

    color: var(--muted);

    font-size: 10px;
}


.v3-table td:first-child {
    color: var(--text);

    font-weight: 600;
}


.console-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(270px, .55fr);

    gap: 16px;
}


.console-output-v3,
.live-logs-v3 {
    margin: 0;

    overflow: auto;

    border:
        1px solid
        var(--border);

    border-radius: 11px;

    background: #06090d;

    color: #c7d1de;

    font-family:
        "Cascadia Code",
        "JetBrains Mono",
        Consolas,
        monospace;

    font-size: 11px;
    line-height: 1.55;

    white-space: pre-wrap;
    word-break: break-word;
}


.console-output-v3 {
    height: 430px;

    padding: 15px;
}


.live-logs-v3 {
    height:
        calc(100vh - 220px);

    min-height: 480px;

    padding: 16px;
}


.rcon-form-v3 {
    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 8px;

    margin-top: 10px;
}


.quick-rcon-list {
    display: grid;
    gap: 8px;
}


.safe-rcon-note {
    margin-top: 18px;

    padding: 12px;

    border:
        1px solid
        rgba(124,92,255,.14);

    border-radius: 10px;

    background:
        rgba(124,92,255,.05);

    color: var(--muted);

    font-size: 10px;
    line-height: 1.55;
}


.logs-toolbar {
    display: flex;
    gap: 8px;
}


.logs-toolbar input {
    width: 220px;

    padding: 7px 9px;
}


@media (max-width: 1000px) {
    .players-grid-v3,
    .console-layout {
        grid-template-columns:
            1fr;
    }
}


@media (max-width: 650px) {
    .players-grid-v3 {
        grid-template-columns:
            1fr;
    }

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

    .logs-toolbar {
        width: 100%;

        flex-direction: column;
    }

    .logs-toolbar input {
        width: 100%;
    }

    .live-logs-v3 {
        height: 60vh;
        min-height: 380px;
    }
}


/* ================================================
   V3 STAGE 4 — MAPS / PLUGINS
   ================================================ */

.stage4-toolbar,
.plugin-filters-v3 {
    display: flex;
    align-items: center;
    gap: 9px;
}

.stage4-toolbar input,
.plugin-filters-v3 input {
    width: 260px;
}

.plugin-filters-v3 {
    margin-bottom: 15px;
}

.plugin-filters-v3 select {
    width: 190px;
}


.map-warning-v3 {
    margin-bottom: 14px;
    padding: 11px 13px;

    border:
        1px solid
        rgba(243,191,91,.22);

    border-radius: 10px;

    background:
        rgba(243,191,91,.06);

    color: var(--yellow);

    font-size: 10px;
    line-height: 1.5;
}


.maps-grid-v3 {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 10px;
}


.map-card-v3 {
    padding: 15px;

    border:
        1px solid
        var(--border);

    border-radius: 12px;

    background:
        rgba(255,255,255,.018);
}


.map-card-v3.current {
    border-color:
        rgba(65,209,138,.24);

    background:
        rgba(65,209,138,.035);
}


.map-card-top-v3 {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}


.map-identity-v3 {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 5px;
}


.map-identity-v3 strong {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 12px;
}


.map-identity-v3 span {
    color: var(--muted);

    font-size: 9px;
}


.map-badges-v3,
.plugin-states-v3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}


.stage4-badge {
    height: fit-content;

    padding: 4px 6px;

    border-radius: 6px;

    font-size: 8px;
    font-weight: 750;
}


.stage4-badge.green {
    color: var(--green);

    background:
        rgba(65,209,138,.09);
}


.stage4-badge.red {
    color: var(--red);

    background:
        rgba(255,100,116,.09);
}


.stage4-badge.purple {
    color: var(--accent-2);

    background:
        rgba(124,92,255,.1);
}


.stage4-badge.gray {
    color: var(--muted);

    background:
        rgba(255,255,255,.05);
}


.stage4-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 13px;
}


.stage4-actions button {
    padding:
        6px 8px;

    font-size: 9px;
}


.stage4-upload-panel {
    margin-top: 16px;
}


.upload-form-v3 {
    display: grid;

    grid-template-columns:
        minmax(220px,1fr)
        minmax(190px,.8fr)
        auto
        auto;

    align-items: end;

    gap: 10px;
}


.upload-form-v3 label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}


.upload-form-v3 label > span {
    color: var(--muted);

    font-size: 10px;
}


.checkbox-row-v3 {
    flex-direction: row
        !important;

    align-items: center;

    min-height: 41px;
}


.checkbox-row-v3 input {
    width: auto;
}


.plugin-summary-v3 {
    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0,1fr)
        );

    gap: 8px;

    margin-bottom: 15px;
}


.plugin-stat-v3 {
    padding: 11px;

    border:
        1px solid
        var(--border);

    border-radius: 9px;

    background:
        rgba(255,255,255,.015);
}


.plugin-stat-v3 strong {
    display: block;

    font-size: 16px;
}


.plugin-stat-v3 span {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 8px;
}


.plugins-list-v3 {
    display: flex;
    flex-direction: column;
}


.plugin-row-v3 {
    display: grid;

    grid-template-columns:
        minmax(260px,1fr)
        minmax(190px,.6fr)
        auto;

    gap: 12px;

    align-items: center;

    padding: 12px 4px;

    border-bottom:
        1px solid
        var(--border);
}


.plugin-main-v3 {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}


.plugin-main-v3 > strong {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 11px;
}


.plugin-main-v3 > span {
    color: var(--muted);

    font-family:
        "Cascadia Code",
        Consolas,
        monospace;

    font-size: 8px;
}


.plugin-error-v3 {
    margin-top: 4px;

    color: var(--red);

    font-size: 9px;
}


.plugin-row-v3
.stage4-actions {
    justify-content: flex-end;
    margin-top: 0;
}


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

    .plugin-summary-v3 {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

    .upload-form-v3 {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }
}


@media (max-width: 850px) {
    .plugin-row-v3 {
        grid-template-columns:
            1fr;
    }

    .plugin-states-v3 {
        justify-content:
            flex-start;
    }

    .plugin-row-v3
    .stage4-actions {
        justify-content:
            flex-start;
    }
}


@media (max-width: 650px) {
    .stage4-toolbar,
    .plugin-filters-v3 {
        width: 100%;

        flex-direction: column;
        align-items: stretch;
    }

    .stage4-toolbar input,
    .plugin-filters-v3 input,
    .plugin-filters-v3 select {
        width: 100%;
    }

    .maps-grid-v3,
    .plugin-summary-v3,
    .upload-form-v3 {
        grid-template-columns:
            1fr;
    }

    .map-card-top-v3 {
        flex-direction: column;
    }

    .map-badges-v3 {
        justify-content:
            flex-start;
    }
}


/* ================================================
   V3 STAGE 5 — CONFIGS / FILES
   ================================================ */

.config-layout-v3 {
    display: grid;

    grid-template-columns:
        minmax(260px,.65fr)
        minmax(420px,1.5fr)
        minmax(260px,.65fr);

    gap: 16px;
}


.config-list-v3 {
    display: flex;
    flex-direction: column;

    max-height: 70vh;

    margin-top: 12px;

    overflow-y: auto;
}


.config-item-v3 {
    display: flex;
    flex-direction: column;
    gap: 4px;

    padding: 10px;

    border: 0;
    border-bottom:
        1px solid
        var(--border);

    background:
        transparent;

    color: var(--text);

    text-align: left;

    cursor: pointer;
}


.config-item-v3:hover,
.config-item-v3.active {
    background:
        rgba(124,92,255,.07);
}


.config-item-v3 strong {
    font-size: 10px;

    word-break:
        break-word;
}


.config-item-v3 span {
    color: var(--muted);

    font-size: 8px;
}


.config-editor-head-v3 {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 14px;
}


.config-editor-head-v3 h3 {
    margin: 6px 0 0;

    font-size: 14px;
}


.config-editor-v3 {
    width: 100%;
    min-height: 520px;

    resize: vertical;

    padding: 14px;

    border:
        1px solid
        var(--border);

    border-radius: 10px;

    outline: none;

    background: #06090d;
    color: #d4dce7;

    font-family:
        "Cascadia Code",
        "JetBrains Mono",
        Consolas,
        monospace;

    font-size: 11px;
    line-height: 1.55;
}


.config-editor-v3:disabled {
    opacity: .75;
}


.config-actions-v3 {
    display: flex;
    justify-content: flex-end;
    gap: 8px;

    margin-top: 10px;
}


.config-diff-v3 {
    max-height: 320px;

    overflow: auto;

    margin-top: 12px;
    padding: 13px;

    border:
        1px solid
        var(--border);

    border-radius: 9px;

    background: #05080b;

    color: #cdd6e1;

    font-family:
        "Cascadia Code",
        Consolas,
        monospace;

    font-size: 10px;

    white-space:
        pre-wrap;
}


.config-history-v3,
.trash-list-v3 {
    display: flex;
    flex-direction: column;
}


.history-row-v3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    padding: 10px 0;

    border-bottom:
        1px solid
        var(--border);
}


.history-row-v3 > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}


.history-row-v3 strong {
    overflow: hidden;

    text-overflow:
        ellipsis;

    font-size: 10px;
}


.history-row-v3 span {
    color: var(--muted);

    font-size: 8px;
}


.stage5-file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}


.file-upload-label-v3 {
    display: inline-flex;
    align-items: center;
}


.file-breadcrumb-v3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;

    margin-bottom: 12px;

    color: var(--muted);
}


.file-breadcrumb-v3 button {
    padding: 3px 5px;

    border: 0;

    background: transparent;

    color: var(--accent-2);

    cursor: pointer;
}


.files-table-v3 {
    display: flex;
    flex-direction: column;
}


.file-row-v3 {
    display: grid;

    grid-template-columns:
        minmax(220px,1fr)
        100px
        auto;

    gap: 12px;

    align-items: center;

    min-height: 46px;

    padding: 7px 4px;

    border-bottom:
        1px solid
        var(--border);
}


.file-name-v3 {
    overflow: hidden;

    border: 0;

    background: transparent;

    color: var(--text);

    text-align: left;
    text-overflow:
        ellipsis;
    white-space: nowrap;

    cursor: pointer;
}


.file-row-v3 > span {
    color: var(--muted);

    font-size: 9px;
}


.file-row-v3
.stage4-actions {
    justify-content:
        flex-end;

    margin: 0;
}


.stage5-preview-panel {
    margin-top: 16px;
}


.file-preview-v3 {
    max-height: 65vh;

    overflow: auto;

    padding: 15px;

    border:
        1px solid
        var(--border);

    border-radius: 10px;

    background: #05080c;
    color: #ced7e3;

    font-family:
        "Cascadia Code",
        Consolas,
        monospace;

    font-size: 10px;
    line-height: 1.55;

    white-space:
        pre-wrap;
    word-break:
        break-word;
}


@media (max-width: 1200px) {
    .config-layout-v3 {
        grid-template-columns:
            280px
            minmax(0,1fr);
    }

    .config-layout-v3
    > article:last-child {
        grid-column:
            1 / -1;
    }
}


@media (max-width: 760px) {
    .config-layout-v3 {
        grid-template-columns:
            1fr;
    }

    .config-layout-v3
    > article:last-child {
        grid-column: auto;
    }

    .file-row-v3 {
        grid-template-columns:
            minmax(0,1fr)
            auto;
    }

    .file-row-v3
    > .stage4-actions {
        grid-column:
            1 / -1;

        justify-content:
            flex-start;
    }

    .stage5-file-actions {
        width: 100%;
    }

    .config-editor-v3 {
        min-height: 420px;
    }
}


/* ================================================
   V3 STAGE 6A
   ================================================ */

.maintenance-grid-v3 {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 16px;
}


.backup-buttons-v3,
.service-buttons-v3,
.maintenance-actions-v3 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


.backup-jobs-v3 {
    display: flex;
    flex-direction: column;

    margin-top: 14px;
}


.backup-job-v3 {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap: 8px;

    padding: 8px 0;

    border-bottom:
        1px solid
        var(--border);
}


.backup-job-v3 strong {
    overflow: hidden;

    font-size: 9px;

    text-overflow:
        ellipsis;
}


.backup-job-v3
.plugin-error-v3 {
    grid-column:
        1 / -1;
}


.backup-list-v3 {
    display: flex;
    flex-direction: column;

    margin-top: 14px;
}


.backup-row-v3 {
    display: grid;

    grid-template-columns:
        minmax(260px,1fr)
        auto
        auto;

    gap: 12px;

    align-items: center;

    padding: 12px 0;

    border-bottom:
        1px solid
        var(--border);
}


.backup-row-v3 > div:first-child {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}


.backup-row-v3 strong {
    overflow: hidden;

    font-size: 10px;

    white-space: nowrap;
    text-overflow:
        ellipsis;
}


.backup-row-v3 span {
    color: var(--muted);

    font-size: 8px;
}


.backup-row-v3 code {
    color: var(--muted-2);

    font-size: 8px;
}


.maintenance-inline-v3 {
    display: flex;
    gap: 7px;
}


.maintenance-inline-v3 input {
    width: 90px;
}


.schedule-form-v3 {
    display: grid;

    grid-template-columns:
        minmax(160px,.8fr)
        minmax(210px,1fr)
        minmax(160px,.8fr)
        auto;

    gap: 10px;

    align-items: end;
}


.schedule-form-v3 label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.schedule-form-v3 label > span {
    color: var(--muted);

    font-size: 9px;
}


.schedule-list-v3 {
    display: flex;
    flex-direction: column;

    margin-top: 15px;
}


.schedule-row-v3 {
    display: grid;

    grid-template-columns:
        minmax(180px,1fr)
        auto
        auto;

    gap: 10px;

    align-items: center;

    padding: 10px 0;

    border-bottom:
        1px solid
        var(--border);
}


.schedule-row-v3 > div:first-child {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}


.schedule-row-v3 strong {
    font-size: 10px;
}


.schedule-row-v3 span {
    color: var(--muted);

    font-size: 8px;
}


.schedule-row-v3
.plugin-error-v3 {
    grid-column:
        1 / -1;
}


.danger-button-v3 {
    padding: 8px 12px;

    border:
        1px solid
        rgba(255,100,116,.25);

    border-radius: 8px;

    background:
        rgba(255,100,116,.07);

    color: var(--red);

    cursor: pointer;
}


@media (max-width: 1100px) {

    .maintenance-grid-v3 {
        grid-template-columns:
            1fr;
    }

    .schedule-form-v3 {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }
}


@media (max-width: 700px) {

    .schedule-form-v3,
    .backup-row-v3,
    .schedule-row-v3 {
        grid-template-columns:
            1fr;
    }


    .backup-row-v3
    .plugin-states-v3 {
        justify-content:
            flex-start;
    }


    .backup-row-v3
    .stage4-actions,
    .schedule-row-v3
    .stage4-actions {
        justify-content:
            flex-start;
    }


    .maintenance-inline-v3 {
        width: 100%;

        flex-direction: column;
    }


    .maintenance-inline-v3 input {
        width: 100%;
    }
}


/* ================================================
   V3 STAGE 6B — RESTORE
   ================================================ */

.restore-panel-v3 {
    border-color:
        rgba(255,100,116,.16);
}


.restore-warning-v3 {
    margin-bottom: 15px;
    padding: 12px 14px;

    border:
        1px solid
        rgba(255,100,116,.22);

    border-radius: 10px;

    background:
        rgba(255,100,116,.055);

    color: #ff9ba5;

    font-size: 10px;
    line-height: 1.55;
}


.restore-select-v3 {
    display: flex;
    flex-direction: column;
    gap: 7px;

    margin-bottom: 10px;
}


.restore-select-v3 > span {
    color: var(--muted);

    font-size: 9px;
}


.restore-select-v3 select {
    width: 100%;
}


.restore-button-v3 {
    width: 100%;

    margin-bottom: 12px;
}


.restore-jobs-v3 {
    display: flex;
    flex-direction: column;

    margin-top: 16px;
}


.restore-job-v3 {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap: 12px;

    align-items: start;

    padding: 12px 0;

    border-bottom:
        1px solid
        var(--border);
}


.restore-job-v3 > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}


.restore-job-v3 strong {
    overflow: hidden;

    font-size: 10px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.restore-job-v3 span,
.restore-job-v3 code {
    color: var(--muted);

    font-size: 8px;

    word-break:
        break-all;
}


@media (max-width: 700px) {

    .restore-job-v3 {
        grid-template-columns:
            1fr;
    }
}


/* ================================================
   V3 STAGE 7 — MONITORING
   ================================================ */

.monitor-cards-v3 {
    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0,1fr)
        );

    gap: 10px;

    margin-bottom: 16px;
}


.monitor-card-v3 {
    min-width: 0;

    padding: 14px;

    border:
        1px solid
        var(--border);

    border-radius: 11px;

    background:
        rgba(255,255,255,.018);
}


.monitor-card-v3 span,
.monitor-card-v3 small {
    display: block;

    color: var(--muted);

    font-size: 8px;
}


.monitor-card-v3 strong {
    display: block;

    margin: 6px 0;

    overflow: hidden;

    font-size: 20px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.monitor-grid-v3 {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 16px;
}


.monitor-chart-title-v3 {
    margin:
        12px 0 6px;

    color: var(--muted);

    font-size: 9px;
}


.monitor-chart-v3 {
    display: block;

    width: 100%;
    height: 150px;

    border:
        1px solid
        var(--border);

    border-radius: 9px;

    background: #06090d;
}


.edge-health-v3,
.error-center-v3 {
    display: flex;
    flex-direction: column;
}


.edge-row-v3 {
    display: grid;

    grid-template-columns:
        70px
        minmax(0,1fr)
        auto;

    gap: 10px;

    align-items: center;

    padding: 9px 0;

    border-bottom:
        1px solid
        var(--border);
}


.edge-row-v3 strong {
    font-size: 10px;
}


.edge-row-v3 > span:nth-child(2) {
    color: var(--muted);

    font-size: 8px;
}


.error-center-v3 {
    max-height: 420px;

    overflow-y: auto;
}


.error-center-v3 > strong {
    margin:
        10px 0 6px;

    font-size: 10px;
}


.monitor-error-v3 {
    padding: 8px;

    margin-bottom: 5px;

    border:
        1px solid
        rgba(255,100,116,.18);

    border-radius: 7px;

    background:
        rgba(255,100,116,.045);

    color: var(--red);

    font-size: 9px;
}


.monitor-log-v3 {
    padding: 6px 0;

    border-bottom:
        1px solid
        var(--border);

    color: var(--muted-2);

    font-family:
        "Cascadia Code",
        Consolas,
        monospace;

    font-size: 8px;
    line-height: 1.45;

    word-break:
        break-word;
}


.watchdog-state-v3 {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 8px;

    margin-bottom: 15px;
}


.watchdog-state-v3 > div {
    padding: 10px;

    border:
        1px solid
        var(--border);

    border-radius: 8px;

    background:
        rgba(255,255,255,.015);
}


.watchdog-state-v3 span {
    display: block;

    color: var(--muted);

    font-size: 8px;
}


.watchdog-state-v3 strong {
    display: block;

    margin-top: 5px;

    font-size: 12px;
}


.autoheal-form-v3 {
    display: grid;

    grid-template-columns:
        1.2fr
        repeat(
            3,
            minmax(100px,.7fr)
        )
        auto;

    gap: 9px;

    align-items: end;
}


.autoheal-form-v3 label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.autoheal-form-v3 label > span {
    color: var(--muted);

    font-size: 8px;
}


@media (max-width: 1200px) {

    .monitor-cards-v3 {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }


    .autoheal-form-v3 {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }
}


@media (max-width: 800px) {

    .monitor-grid-v3 {
        grid-template-columns:
            1fr;
    }


    .watchdog-state-v3 {
        grid-template-columns:
            1fr;
    }
}


@media (max-width: 600px) {

    .monitor-cards-v3,
    .autoheal-form-v3 {
        grid-template-columns:
            1fr;
    }
}


/* ================================================
   V3 STAGE 8 — GAME DB
   ================================================ */

.game-db-summary-v3 {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap: 10px;

    margin-bottom: 16px;
}


.gamedb-tabs-v3,
.gamedb-toolbar-v3 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 12px;
}


.gamedb-tab.active,
.gdb-tab.active {
    border-color:
        rgba(124,92,255,.55);

    background:
        rgba(124,92,255,.14);

    color: #c7bdff;
}


.gamedb-toolbar-v3 input {
    min-width: 260px;
    flex: 1;
}


.gamedb-content-v3 {
    margin-top: 14px;
}


.gamedb-content-v3 h4 {
    margin:
        18px 0 8px;

    font-size: 12px;
}


.gamedb-table-wrap-v3 {
    width: 100%;

    overflow-x: auto;

    border:
        1px solid
        var(--border);

    border-radius: 10px;
}


.gamedb-table-v3 {
    width: 100%;

    border-collapse:
        collapse;

    min-width: 850px;
}


.gamedb-table-v3 th,
.gamedb-table-v3 td {
    padding:
        9px 10px;

    border-bottom:
        1px solid
        var(--border);

    text-align: left;
    vertical-align: middle;
}


.gamedb-table-v3 th {
    position: sticky;
    top: 0;

    background:
        #0b0f15;

    color: var(--muted);

    font-size: 8px;
    font-weight: 600;

    text-transform:
        uppercase;
}


.gamedb-table-v3 td {
    max-width: 260px;

    color: var(--muted-2);

    font-size: 9px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.gamedb-table-v3 td:last-child {
    overflow: visible;

    text-align: right;
}


.gamedb-table-v3
.secondary-button,
.gamedb-table-v3
.danger-button-v3 {
    padding: 6px 9px;

    font-size: 8px;
}


@media (max-width: 900px) {

    .game-db-summary-v3 {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }
}


@media (max-width: 600px) {

    .game-db-summary-v3 {
        grid-template-columns:
            1fr;
    }


    .gamedb-toolbar-v3 {
        flex-direction: column;
    }


    .gamedb-toolbar-v3 input {
        min-width: 0;
        width: 100%;
    }
}


/*
 * ================================================
 * NL V3 — functional pages
 * Не является финальным redesign.
 * ================================================
 */

.nl-functional-page {
    display: grid;
    gap: 20px;
    padding: 24px;
}

.nl-functional-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.nl-functional-head h2 {
    margin: 6px 0 4px;
}

.nl-functional-head p {
    margin: 0;
    opacity: .72;
}

.nl-functional-grid {
    display: grid;
    gap: 18px;
}

.nl-stat-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(170px, 1fr)
        );
    gap: 12px;
}

.nl-stat-card,
.nl-card {
    border: 1px solid
        rgba(148, 163, 184, .16);
    background:
        rgba(24, 31, 42, .72);
    border-radius: 14px;
}

.nl-stat-card {
    display: grid;
    gap: 7px;
    padding: 15px 17px;
}

.nl-stat-card span {
    font-size: 12px;
    opacity: .65;
}

.nl-stat-card strong {
    font-size: 17px;
}

.nl-card {
    padding: 18px;
}

.nl-card-title {
    margin-bottom: 14px;
    font-weight: 700;
}

.nl-table-wrap {
    overflow: auto;
}

.nl-table {
    width: 100%;
    border-collapse: collapse;
}

.nl-table th,
.nl-table td {
    padding: 11px 12px;
    border-bottom: 1px solid
        rgba(148, 163, 184, .12);
    text-align: left;
    vertical-align: middle;
}

.nl-table th {
    font-size: 12px;
    opacity: .62;
    font-weight: 600;
}

.nl-table td {
    font-size: 13px;
}

.nl-table .good,
.nl-stat-card .good {
    color: #82e6ad;
}

.nl-table .bad,
.nl-stat-card .bad,
.nl-page-status.bad {
    color: #ff9a9a;
}

.nl-input,
.nl-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid
        rgba(148, 163, 184, .2);
    background: rgba(5, 10, 18, .55);
    color: inherit;
    border-radius: 9px;
    padding: 9px 10px;
}

.nl-input:disabled {
    opacity: .5;
}

.nl-textarea {
    resize: vertical;
    min-height: 180px;
}

.nl-small-button {
    border: 1px solid
        rgba(148, 163, 184, .24);
    background: rgba(25, 33, 45, .9);
    color: inherit;
    border-radius: 9px;
    padding: 8px 12px;
    cursor: pointer;
}

.nl-small-button:hover {
    filter: brightness(1.12);
}

.nl-small-button.primary {
    background:
        rgba(94, 67, 218, .34);
}

.nl-small-button.danger {
    background:
        rgba(180, 45, 66, .2);
}

.nl-actions,
.nl-inline-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.nl-actions {
    margin-top: 13px;
}

.nl-setting-key {
    white-space: nowrap;
    font-family: monospace;
}

.nl-pre {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.6;
}

.nl-security-line {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.nl-security-ports {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 13px;
}

.nl-chip,
.nl-page-status {
    display: inline-flex;
    border: 1px solid
        rgba(148, 163, 184, .18);
    background:
        rgba(16, 23, 33, .8);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
}

@media (
    max-width: 720px
) {
    .nl-functional-page {
        padding: 14px;
    }

    .nl-functional-head {
        flex-direction: column;
    }

    .nl-inline-actions {
        min-width: 210px;
    }
}


/*
 * =================================================
 * NL-ANIMATED-SERVICE-LIFECYCLE-V1
 * =================================================
 */

body.nl-lifecycle-lock {
    overflow: hidden;
}

.nl-lifecycle-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: grid;
    place-items: center;

    padding: 24px;

    background:
        radial-gradient(
            circle at 50% 32%,
            rgba(105, 75, 255, .14),
            transparent 34%
        ),
        rgba(3, 7, 13, .74);

    backdrop-filter:
        blur(9px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

.nl-lifecycle-overlay.show {
    opacity: 1;
    visibility: visible;
}

.nl-lifecycle-modal {
    position: relative;

    width:
        min(
            620px,
            100%
        );

    overflow: hidden;

    border:
        1px solid
        rgba(148, 163, 184, .18);

    border-radius: 24px;

    padding:
        34px;

    background:
        linear-gradient(
            145deg,
            rgba(21, 28, 40, .98),
            rgba(10, 15, 24, .99)
        );

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, .55);
}

.nl-lifecycle-modal::before {
    content: "";

    position: absolute;
    inset: 0 0 auto;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(111, 76, 255, .95),
            transparent
        );

    opacity: .9;
}

.nl-lifecycle-close {
    position: absolute;
    top: 14px;
    right: 16px;

    width: 34px;
    height: 34px;

    border: 0;
    border-radius: 50%;

    background:
        rgba(255, 255, 255, .06);

    color: #dce5f3;

    font-size: 23px;
    line-height: 1;

    cursor: pointer;
}

.nl-lifecycle-close:disabled {
    opacity: .25;
    cursor: default;
}

.nl-rack-wrap {
    display: grid;
    justify-items: center;
    gap: 12px;

    margin:
        2px 0 26px;
}

.nl-rack {
    position: relative;

    width: 132px;

    display: grid;
    gap: 7px;

    padding: 12px;

    border:
        1px solid
        rgba(148, 163, 184, .2);

    border-radius: 17px;

    background:
        linear-gradient(
            180deg,
            #242d3b,
            #111722
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, .025),
        0 14px 45px
        rgba(0, 0, 0, .3);

    transition:
        box-shadow .35s ease,
        transform .35s ease,
        opacity .35s ease;
}

.nl-rack::before,
.nl-rack::after {
    content: "";

    position: absolute;
    left: 18px;
    right: 18px;

    height: 1px;

    background:
        rgba(255, 255, 255, .05);
}

.nl-rack::before {
    top: 38%;
}

.nl-rack::after {
    top: 68%;
}

.nl-rack-slot {
    position: relative;

    height: 22px;

    display: flex;
    align-items: center;
    gap: 5px;

    padding:
        0 9px;

    border-radius: 6px;

    background:
        rgba(2, 6, 12, .62);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .04);
}

.nl-rack-slot i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #63e6a5;

    box-shadow:
        0 0 9px
        rgba(99, 230, 165, .82);
}

.nl-rack.starting,
.nl-rack.restarting {
    animation:
        nlRackPulse
        1.35s ease-in-out
        infinite;
}

.nl-rack.starting
.nl-rack-slot i,
.nl-rack.restarting
.nl-rack-slot i {
    animation:
        nlLedBoot
        1.05s ease-in-out
        infinite alternate;
}

.nl-rack.starting
.nl-rack-slot:nth-child(2) i,
.nl-rack.restarting
.nl-rack-slot:nth-child(2) i {
    animation-delay: .18s;
}

.nl-rack.starting
.nl-rack-slot:nth-child(3) i,
.nl-rack.restarting
.nl-rack-slot:nth-child(3) i {
    animation-delay: .36s;
}

.nl-rack.stopping {
    opacity: .72;

    animation:
        nlRackStopping
        1.1s ease-in-out
        infinite;
}

.nl-rack.stopping
.nl-rack-slot i {
    background:
        #f6b55c;

    box-shadow:
        0 0 8px
        rgba(246, 181, 92, .7);

    animation:
        nlLedOff
        1.15s ease
        infinite alternate;
}

.nl-rack.stopped {
    opacity: .55;
    transform:
        scale(.98);
}

.nl-rack.stopped
.nl-rack-slot i {
    background:
        #4d5969;

    box-shadow: none;
}

.nl-rack.ready {
    box-shadow:
        0 0 0 1px
        rgba(94, 234, 165, .1),
        0 0 55px
        rgba(69, 223, 155, .16),
        0 14px 45px
        rgba(0, 0, 0, .28);
}

.nl-rack.failure {
    animation:
        nlRackError
        .52s ease
        2;
}

.nl-rack.failure
.nl-rack-slot i {
    background:
        #ff7272;

    box-shadow:
        0 0 9px
        rgba(255, 114, 114, .75);
}

.nl-lifecycle-state {
    min-height: 20px;

    font-size: 13px;
    font-weight: 700;

    color:
        #9dadc2;

    letter-spacing:
        .02em;
}

.nl-lifecycle-overlay.success
.nl-lifecycle-state {
    color: #65e5a5;
}

.nl-lifecycle-overlay.failure
.nl-lifecycle-state {
    color: #ff8383;
}

.nl-lifecycle-copy {
    text-align: center;

    margin-bottom: 27px;
}

.nl-lifecycle-kicker {
    display: inline-block;

    margin-bottom: 8px;

    color: #7d8fa8;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .14em;
}

.nl-lifecycle-copy h2 {
    margin: 0;

    color: #f5f7fb;

    font-size:
        clamp(
            25px,
            4vw,
            34px
        );
}

.nl-lifecycle-copy p {
    margin:
        8px 0 0;

    color: #8998ac;

    font-size: 14px;
}

.nl-lifecycle-steps {
    display: grid;
    gap: 8px;
}

.nl-lifecycle-step {
    min-height: 48px;

    display: grid;

    grid-template-columns:
        18px
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 11px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(148, 163, 184, .1);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .025);

    color: #77869b;

    transition:
        border-color .25s ease,
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.nl-step-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        #465164;

    transition:
        background .2s ease,
        box-shadow .2s ease;
}

.nl-step-title {
    font-size: 13px;
    font-weight: 650;
}

.nl-step-result {
    color: #65758a;

    font-size: 11px;
    font-weight: 600;
}

.nl-lifecycle-step.active {
    border-color:
        rgba(120, 92, 255, .32);

    background:
        rgba(100, 72, 230, .08);

    color:
        #dbe2ec;

    transform:
        translateX(3px);
}

.nl-lifecycle-step.active
.nl-step-dot {
    background:
        #876cff;

    box-shadow:
        0 0 0 5px
        rgba(135, 108, 255, .09),
        0 0 13px
        rgba(135, 108, 255, .72);

    animation:
        nlStepPulse
        1s ease-in-out
        infinite;
}

.nl-lifecycle-step.done {
    border-color:
        rgba(86, 224, 157, .16);

    color:
        #dcebe5;
}

.nl-lifecycle-step.done
.nl-step-dot {
    background:
        #58df9e;

    box-shadow:
        0 0 10px
        rgba(88, 223, 158, .5);
}

.nl-lifecycle-step.done
.nl-step-result {
    color:
        #63dca2;
}

.nl-lifecycle-step.error {
    border-color:
        rgba(255, 104, 104, .25);

    color:
        #ffd1d1;
}

.nl-lifecycle-step.error
.nl-step-dot {
    background:
        #ff6d6d;

    box-shadow:
        0 0 12px
        rgba(255, 109, 109, .56);
}

.nl-lifecycle-summary {
    min-height: 0;

    display: grid;
    gap: 5px;

    margin-top: 18px;

    padding: 0;

    text-align: center;

    transition:
        padding .25s ease,
        background .25s ease;
}

.nl-lifecycle-summary:not(:empty) {
    padding:
        15px 16px;

    border-radius: 13px;

    background:
        rgba(79, 221, 154, .055);
}

.nl-lifecycle-overlay.failure
.nl-lifecycle-summary:not(:empty) {
    background:
        rgba(255, 95, 95, .055);
}

.nl-lifecycle-summary strong {
    color: #eef5f1;

    font-size: 14px;
}

.nl-lifecycle-summary span {
    color: #8393a7;

    font-size: 12px;
}

.nl-lifecycle-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;

    margin-top: 18px;

    min-height: 32px;

    color: #617086;

    font-size: 11px;
}

.nl-lifecycle-log {
    border:
        1px solid
        rgba(148, 163, 184, .18);

    border-radius: 8px;

    padding:
        7px 10px;

    background:
        rgba(255, 255, 255, .035);

    color:
        #cbd5e4;

    cursor: pointer;
}

@keyframes nlRackPulse {
    0%,
    100% {
        transform:
            translateY(0)
            scale(1);

        box-shadow:
            0 14px 45px
            rgba(0, 0, 0, .3);
    }

    50% {
        transform:
            translateY(-2px)
            scale(1.012);

        box-shadow:
            0 0 48px
            rgba(118, 83, 255, .14),
            0 14px 45px
            rgba(0, 0, 0, .3);
    }
}

@keyframes nlLedBoot {
    from {
        opacity: .28;
        transform:
            scale(.75);
    }

    to {
        opacity: 1;
        transform:
            scale(1.15);
    }
}

@keyframes nlLedOff {
    from {
        opacity: 1;
    }

    to {
        opacity: .18;
    }
}

@keyframes nlRackStopping {
    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(.985);
    }
}

@keyframes nlRackError {
    0%,
    100% {
        transform:
            translateX(0);
    }

    25% {
        transform:
            translateX(-5px);
    }

    75% {
        transform:
            translateX(5px);
    }
}

@keyframes nlStepPulse {
    0%,
    100% {
        opacity: .6;
    }

    50% {
        opacity: 1;
    }
}

@media (
    max-width: 620px
) {
    .nl-lifecycle-overlay {
        padding: 12px;
    }

    .nl-lifecycle-modal {
        padding:
            29px 17px
            20px;

        border-radius: 19px;
    }

    .nl-lifecycle-step {
        grid-template-columns:
            17px
            minmax(0, 1fr);

        padding:
            10px 12px;
    }

    .nl-step-result {
        grid-column: 2;
    }
}

@media (
    prefers-reduced-motion:
    reduce
) {
    .nl-rack,
    .nl-rack-slot i,
    .nl-step-dot {
        animation: none !important;
    }
}


/*
 * =================================================
 * NL-OVERVIEW-CONTROL-V1
 * =================================================
 */

.nl-overview-control {
    display: grid;
    gap: 18px;

    padding:
        24px 24px 4px;
}

.nl-server-hero {
    position: relative;
    overflow: hidden;

    padding: 26px;

    border:
        1px solid
        rgba(148, 163, 184, .16);

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(104, 72, 255, .15),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(23, 30, 42, .97),
            rgba(12, 17, 26, .98)
        );

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, .18);
}

.nl-server-hero::before {
    content: "";

    position: absolute;
    top: 0;
    left: 25px;
    right: 25px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(119, 89, 255, .75),
            transparent
        );
}

.nl-server-hero-top {
    position: relative;
    z-index: 1;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}

.nl-overview-kicker {
    display: block;

    margin-bottom: 8px;

    color: #74849a;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .13em;
}

.nl-server-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
}

.nl-server-title-row h1 {
    margin: 0;

    color: #f4f7fb;

    font-size:
        clamp(
            24px,
            3vw,
            34px
        );
}

.nl-server-address {
    margin-top: 7px;

    color: #7f8da1;

    font-family: monospace;
    font-size: 12px;
}

.nl-live-badge {
    display: inline-flex;
    align-items: center;

    min-height: 28px;

    padding: 0 10px;

    border-radius: 999px;

    border:
        1px solid
        rgba(148, 163, 184, .16);

    font-size: 11px;
    font-weight: 750;
}

.nl-live-badge.online {
    color: #67e5a6;

    background:
        rgba(63, 211, 143, .08);

    border-color:
        rgba(63, 211, 143, .2);
}

.nl-live-badge.warning {
    color: #ffca72;

    background:
        rgba(255, 190, 80, .07);
}

.nl-live-badge.offline {
    color: #ff8989;

    background:
        rgba(255, 100, 100, .07);
}

.nl-live-badge.loading {
    color: #9aa7ba;
}

.nl-server-power {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding:
        9px 12px;

    border:
        1px solid
        rgba(148, 163, 184, .12);

    border-radius: 10px;

    background:
        rgba(5, 10, 17, .35);

    color: #9aabc0;

    font-size: 11px;
}

.nl-power-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #58dfa0;

    box-shadow:
        0 0 10px
        rgba(88, 223, 160, .7);
}

.server-offline
.nl-power-dot {
    background: #657183;
    box-shadow: none;
}

.nl-server-metrics {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap: 10px;

    margin-top: 25px;
}

.nl-server-metric {
    display: grid;
    gap: 6px;

    min-width: 0;

    padding: 13px;

    border:
        1px solid
        rgba(148, 163, 184, .1);

    border-radius: 12px;

    background:
        rgba(4, 9, 16, .27);
}

.nl-server-metric span {
    color: #718096;

    font-size: 10px;
}

.nl-server-metric strong {
    overflow: hidden;

    color: #e6edf7;

    font-size: 14px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.nl-server-details {
    display: flex;
    flex-wrap: wrap;

    gap:
        8px 18px;

    margin-top: 16px;

    color: #718196;

    font-size: 11px;
}

.nl-server-details b {
    color: #aebace;

    font-weight: 650;
}

.nl-server-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 22px;
}

.nl-control-button {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(148, 163, 184, .16);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, .035);

    color: #d5deea;

    font-size: 12px;
    font-weight: 650;

    cursor: pointer;

    transition:
        transform .15s ease,
        filter .15s ease,
        border-color .15s ease;
}

.nl-control-button:hover {
    transform:
        translateY(-1px);

    filter:
        brightness(1.12);
}

.nl-control-button.restart {
    background:
        linear-gradient(
            135deg,
            rgba(102, 74, 235, .8),
            rgba(77, 55, 193, .75)
        );

    border-color:
        rgba(137, 112, 255, .5);

    color: #fff;
}

.nl-control-button.start {
    background:
        rgba(61, 203, 137, .15);

    border-color:
        rgba(61, 203, 137, .3);

    color: #7ae3ad;
}

.nl-control-button.stop {
    background:
        rgba(255, 90, 90, .065);

    border-color:
        rgba(255, 100, 100, .17);

    color: #df9595;
}

.nl-control-button.secondary {
    color: #aab7c9;
}

.nl-overview-lower {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(280px, .8fr);

    gap: 14px;
}

.nl-overview-card {
    padding: 17px;

    border:
        1px solid
        rgba(148, 163, 184, .13);

    border-radius: 15px;

    background:
        rgba(19, 25, 35, .72);
}

.nl-overview-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 13px;
}

.nl-overview-card-head > div {
    display: grid;
    gap: 3px;
}

.nl-overview-card-head span {
    color: #728197;

    font-size: 10px;
}

.nl-overview-card-head strong {
    color: #dce5f0;

    font-size: 13px;
}

.nl-overview-refresh {
    border:
        1px solid
        rgba(148, 163, 184, .15);

    border-radius: 8px;

    padding:
        7px 10px;

    background:
        rgba(255, 255, 255, .025);

    color: #8797ad;

    font-size: 10px;

    cursor: pointer;
}

.nl-readiness-list {
    display: grid;
    gap: 7px;
}

.nl-readiness-item {
    display: grid;

    grid-template-columns:
        11px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 9px;

    min-height: 34px;

    padding:
        0 10px;

    border-radius: 8px;

    background:
        rgba(4, 9, 16, .25);
}

.nl-readiness-item i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #5f6c7d;
}

.nl-readiness-item span {
    color: #8d9bb0;

    font-size: 11px;
}

.nl-readiness-item b {
    color: #8190a4;

    font-size: 10px;
}

.nl-readiness-item.ok i {
    background: #57dda0;

    box-shadow:
        0 0 8px
        rgba(87, 221, 160, .5);
}

.nl-readiness-item.ok b {
    color: #68dca4;
}

.nl-readiness-item.waiting i {
    background: #f1b756;

    box-shadow:
        0 0 8px
        rgba(241, 183, 86, .45);
}

.nl-readiness-item.bad i {
    background: #ec7373;
}

.nl-quick-actions {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 8px;
}

.nl-quick-actions button {
    min-height: 40px;

    border:
        1px solid
        rgba(148, 163, 184, .11);

    border-radius: 9px;

    background:
        rgba(5, 10, 17, .25);

    color: #99a8bb;

    font-size: 11px;

    cursor: pointer;
}

.nl-quick-actions button:hover {
    background:
        rgba(100, 72, 230, .08);

    color: #d6ddeb;
}

@media (
    max-width: 1100px
) {
    .nl-server-metrics {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

@media (
    max-width: 760px
) {
    .nl-overview-control {
        padding:
            14px 14px 3px;
    }

    .nl-server-hero {
        padding: 18px;
    }

    .nl-server-hero-top {
        flex-direction: column;
    }

    .nl-server-metrics {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .nl-overview-lower {
        grid-template-columns: 1fr;
    }

    .nl-server-actions {
        display: grid;

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

    .nl-control-button {
        width: 100%;
    }
}

@media (
    max-width: 460px
) {
    .nl-server-metrics {
        grid-template-columns: 1fr 1fr;
    }

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


/*
 * ==============================================
 * NL-ENGINE-BANS-V1
 * ==============================================
 */

.nl-ban-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    padding: 5px;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.nl-ban-tab {
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 9px 15px;
    background: transparent;
    color: var(--muted, #9aa4b2);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.nl-ban-tab:hover {
    color: var(--text, #fff);
}

.nl-ban-tab.is-active {
    background: rgba(255,255,255,.09);
    color: var(--text, #fff);
}

.nl-engine-ban-subtitle {
    margin: 5px 0 0;
    color: var(--muted, #9aa4b2);
    font-size: 13px;
}

.nl-engine-ban-form {
    display: grid;
    grid-template-columns:
        minmax(130px, .65fr)
        minmax(230px, 1.4fr)
        minmax(130px, .75fr)
        minmax(230px, 1.4fr)
        auto;
    gap: 12px;
    align-items: end;
    margin: 18px 0;
}

.nl-engine-ban-form label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.nl-engine-ban-form label > span {
    color: var(--muted, #9aa4b2);
    font-size: 12px;
    font-weight: 650;
}

.nl-engine-ban-form input,
.nl-engine-ban-form select {
    width: 100%;
    min-width: 0;
    height: 42px;
    box-sizing: border-box;
    border: 1px solid var(--border, rgba(255,255,255,.09));
    border-radius: 10px;
    padding: 0 11px;
    background: rgba(0,0,0,.18);
    color: var(--text, #fff);
    outline: none;
}

.nl-engine-ban-form input:focus,
.nl-engine-ban-form select:focus {
    border-color: rgba(255,255,255,.22);
}

.nl-engine-ban-note {
    margin: 0 0 16px;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    color: var(--muted, #9aa4b2);
    background: rgba(255,255,255,.025);
    font-size: 12px;
    line-height: 1.55;
}

.nl-engine-ban-note strong {
    color: var(--text, #fff);
}

.nl-engine-ban-inactive {
    opacity: .55;
}

.table-action-v3.danger {
    white-space: nowrap;
}

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

    .nl-engine-ban-form .button {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .nl-ban-tabs {
        width: 100%;
    }

    .nl-ban-tab {
        flex: 1 1 0;
        padding-inline: 8px;
    }

    .nl-engine-ban-form {
        grid-template-columns: 1fr;
    }
}


/*
 * ==============================================
 * NL-SCHEDULER-RECURRING-V2
 * ==============================================
 */

.nl-recurring-scheduler {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 18px;
    background: rgba(255,255,255,.018);
}

.nl-recurring-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.nl-recurring-head h3 {
    margin: 5px 0 0;
}

.nl-recurring-head p {
    margin: 7px 0 0;
    max-width: 720px;
    color: var(--muted, #9aa4b2);
    font-size: 13px;
    line-height: 1.55;
}

.nl-rule-form {
    display: grid;
    grid-template-columns:
        minmax(150px, .7fr)
        minmax(130px, .55fr)
        minmax(320px, 1.6fr)
        auto;
    gap: 14px;
    align-items: end;
}

.nl-rule-form > label {
    display: grid;
    gap: 7px;
}

.nl-rule-form > label > span,
.nl-rule-days > span {
    color: var(--muted, #9aa4b2);
    font-size: 12px;
    font-weight: 650;
}

.nl-rule-form select,
.nl-rule-form input[type="time"] {
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    border: 1px solid var(--border, rgba(255,255,255,.09));
    border-radius: 10px;
    padding: 0 11px;
    outline: none;
    background: rgba(0,0,0,.18);
    color: var(--text, #fff);
}

.nl-rule-days {
    display: grid;
    gap: 7px;
}

.nl-rule-day-grid {
    display: grid;
    grid-template-columns:
        repeat(7, minmax(38px, 1fr));
    gap: 6px;
}

.nl-rule-day-grid label {
    position: relative;
    cursor: pointer;
}

.nl-rule-day-grid input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nl-rule-day-grid b {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 9px;
    background: rgba(255,255,255,.025);
    color: var(--muted, #9aa4b2);
    font-size: 12px;
    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.nl-rule-day-grid input:checked + b {
    border-color: rgba(120,110,255,.45);
    background: rgba(100,85,255,.16);
    color: #fff;
}

.nl-rule-note {
    margin: 16px 0;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
    color: var(--muted, #9aa4b2);
    font-size: 12px;
    line-height: 1.55;
}

.nl-rule-note strong {
    color: var(--text, #fff);
}

.nl-rule-list {
    display: grid;
    gap: 9px;
}

.nl-rule-row {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.4fr)
        minmax(160px, .8fr)
        auto;
    gap: 14px;
    align-items: center;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 12px;
    background: rgba(0,0,0,.12);
}

.nl-rule-row.is-disabled {
    opacity: .58;
}

.nl-rule-main,
.nl-rule-last {
    display: grid;
    gap: 5px;
}

.nl-rule-main strong {
    color: var(--text, #fff);
}

.nl-rule-main span,
.nl-rule-last > span:not(.stage4-badge) {
    color: var(--muted, #9aa4b2);
    font-size: 12px;
}

.nl-rule-error {
    color: #ff8f8f !important;
    word-break: break-word;
}

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

    .nl-rule-days {
        grid-column:
            1 / -1;
    }

    .nl-rule-row {
        grid-template-columns:
            1fr auto;
    }

    .nl-rule-last {
        grid-column:
            1 / 2;
    }
}

@media (max-width: 680px) {
    .nl-recurring-head {
        display: grid;
    }

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

    .nl-rule-days {
        grid-column: auto;
    }

    .nl-rule-day-grid {
        grid-template-columns:
            repeat(4, minmax(42px, 1fr));
    }

    .nl-rule-row {
        grid-template-columns:
            1fr;
    }

    .nl-rule-last {
        grid-column: auto;
    }

    .nl-rule-row .stage4-actions {
        justify-content: stretch;
    }

    .nl-rule-row .stage4-actions button {
        flex: 1 1 0;
    }
}


/*
 * ==============================================
 * NL-SCHEDULER-ACTION-DESIGN-V1
 * ==============================================
 */

.nl-rule-action-field {
    min-width: 0;
}

.nl-rule-action-picker {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 4px;

    min-height: 42px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 12px;

    background:
        rgba(5,8,15,.40);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025);
}

.nl-rule-action-option {
    appearance: none;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-width: 0;
    min-height: 36px;

    padding: 0 12px;

    border:
        1px solid
        transparent;

    border-radius: 8px;

    background:
        transparent;

    color:
        var(--muted, #8c98aa);

    font: inherit;
    font-size: 13px;
    font-weight: 650;

    cursor: pointer;

    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        box-shadow .16s ease,
        transform .12s ease;
}

.nl-rule-action-option:hover {
    color:
        var(--text, #fff);

    background:
        rgba(255,255,255,.045);
}

.nl-rule-action-option:active {
    transform:
        translateY(1px);
}

.nl-rule-action-option.is-active {
    color: #fff;

    border-color:
        rgba(116,103,255,.40);

    background:
        linear-gradient(
            180deg,
            rgba(112,93,255,.24),
            rgba(87,70,220,.16)
        );

    box-shadow:
        0 0 0 1px
        rgba(105,90,255,.05),
        inset 0 1px 0
        rgba(255,255,255,.08);
}

.nl-rule-action-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 16px;
    height: 16px;

    opacity: .9;

    font-size: 13px;
    line-height: 1;
}

.nl-rule-action-option[data-rule-action="start"]
.nl-rule-action-icon {
    font-size: 10px;
}

.nl-rule-action-option[data-rule-action="stop"]
.nl-rule-action-icon {
    font-size: 9px;
}

@media (max-width: 680px) {

    .nl-rule-action-picker {
        width: 100%;
    }

    .nl-rule-action-option {
        padding-inline: 7px;
    }

    .nl-rule-action-icon {
        display: none;
    }
}


/*
 * ==============================================
 * NL-NETWORK-BLOCK-V1
 * ==============================================
 */

.nl-network-block-panel {
    margin-top: 18px;
}

.nl-network-subtitle {
    margin: 6px 0 0;
    max-width: 720px;
    color: var(--muted, #9aa4b2);
    font-size: 13px;
    line-height: 1.5;
}

.nl-network-lookup {
    display: grid;
    grid-template-columns:
        minmax(280px, 1fr)
        auto;
    gap: 12px;
    align-items: end;
    margin: 18px 0;
}

.nl-network-lookup label,
.nl-network-reason {
    display: grid;
    gap: 7px;
}

.nl-network-lookup label > span,
.nl-network-reason > span {
    color: var(--muted, #9aa4b2);
    font-size: 12px;
    font-weight: 650;
}

.nl-network-lookup input,
.nl-network-reason input {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;
    padding: 0 12px;
    background: rgba(0,0,0,.18);
    color: var(--text, #fff);
    outline: none;
}

.nl-network-lookup input:focus,
.nl-network-reason input:focus {
    border-color: rgba(112,93,255,.42);
}

.nl-network-info {
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    background: rgba(255,255,255,.018);
}

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

.nl-network-info-grid > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 10px;
    background: rgba(0,0,0,.12);
}

.nl-network-info-grid > div.wide {
    grid-column: span 2;
}

.nl-network-info-grid span {
    color: var(--muted, #9aa4b2);
    font-size: 11px;
}

.nl-network-info-grid strong {
    overflow-wrap: anywhere;
    color: var(--text, #fff);
    font-size: 13px;
}

.nl-network-geo-note,
.nl-network-safety-note {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    background: rgba(255,255,255,.022);
    color: var(--muted, #9aa4b2);
    font-size: 12px;
    line-height: 1.5;
}

.nl-network-safety-note strong {
    color: var(--text, #fff);
}

.nl-network-manage {
    display: grid;
    grid-template-columns:
        minmax(250px, 1fr)
        auto;
    gap: 12px;
    align-items: end;
    margin-top: 14px;
}

.nl-network-tv {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    color: var(--muted, #9aa4b2);
    font-size: 12px;
    cursor: pointer;
}

.nl-network-tv input {
    width: 16px;
    height: 16px;
}

.nl-network-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nl-network-table-sub {
    display: block;
    margin-top: 3px;
    max-width: 260px;
    color: var(--muted, #9aa4b2);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .nl-network-info-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .nl-network-info-grid > div.wide {
        grid-column: span 1;
    }

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

@media (max-width: 620px) {
    .nl-network-lookup {
        grid-template-columns: 1fr;
    }

    .nl-network-lookup button {
        width: 100%;
    }

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

    .nl-network-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/*
 * ==============================================
 * NL-MONITORING-V2
 * ==============================================
 */

.nl-monitor-stats-v2 {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin: 14px 0 18px;
}

.nl-monitor-stats-v2 > div {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 11px;
    background: rgba(255,255,255,.018);
}

.nl-monitor-stats-v2 span,
.nl-monitor-stats-v2 small {
    display: block;
    color: var(--muted, #9aa4b2);
    font-size: 11px;
}

.nl-monitor-stats-v2 strong {
    display: block;
    margin: 5px 0 4px;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.nl-monitor-events-v2 {
    grid-column: 1 / -1;
}

.nl-monitor-events-list-v2 {
    display: grid;
    gap: 8px;
    max-height: 520px;
    overflow: auto;
    padding-right: 3px;
}

.nl-monitor-event-row-v2 {
    display: grid;
    grid-template-columns:
        116px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 10px;
    background: rgba(0,0,0,.11);
}

.nl-monitor-event-badge-v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 0 8px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .04em;
    white-space: nowrap;
}

.nl-monitor-event-badge-v2.kind-segfault,
.nl-monitor-event-badge-v2.kind-oom,
.nl-monitor-event-badge-v2.kind-crash_accelerator,
.nl-monitor-event-badge-v2.kind-service_down,
.nl-monitor-event-badge-v2.kind-fastdl_down,
.nl-monitor-event-badge-v2.kind-sourcemod_error,
.nl-monitor-event-badge-v2.kind-a2s_down {
    border-color: rgba(255,89,105,.22);
    background: rgba(255,89,105,.08);
}

.nl-monitor-event-badge-v2.kind-service_up,
.nl-monitor-event-badge-v2.kind-fastdl_recovered,
.nl-monitor-event-badge-v2.kind-a2s_recovered {
    border-color: rgba(66,211,146,.20);
    background: rgba(66,211,146,.07);
}

.nl-monitor-event-badge-v2.kind-restart,
.nl-monitor-event-badge-v2.kind-autoheal_restart {
    border-color: rgba(126,105,255,.25);
    background: rgba(126,105,255,.09);
}

.nl-monitor-event-body-v2 {
    min-width: 0;
}

.nl-monitor-event-body-v2 strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.45;
}

.nl-monitor-event-body-v2 small {
    display: block;
    margin-top: 4px;
    color: var(--muted, #9aa4b2);
    font-size: 10px;
}

@media (max-width: 920px) {
    .nl-monitor-stats-v2 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .nl-monitor-stats-v2 {
        grid-template-columns: 1fr;
    }

    .nl-monitor-event-row-v2 {
        grid-template-columns: 1fr;
    }

    .nl-monitor-event-badge-v2 {
        justify-self: start;
    }
}


/* =================================================
   NEWLIFE_LOGIN_REDESIGN_V1
   ================================================= */

.login-page-newlife {
    min-height: 100dvh;

    padding: 32px;

    display: grid;
    place-items: center;

    position: relative;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 50% -15%,
            rgba(124,92,255,.20),
            transparent 42%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(76,50,197,.10),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #090d13 0%,
            #0c1118 100%
        );
}

.login-page-newlife::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    opacity: .18;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        44px 44px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.55),
            transparent 88%
        );

    pointer-events: none;
}

.login-page-newlife .login-glow {
    width: 760px;
    height: 760px;

    z-index: -1;

    opacity: .75;

    background:
        radial-gradient(
            circle,
            rgba(124,92,255,.16),
            transparent 68%
        );
}

.login-card-newlife {
    width: min(
        100%,
        460px
    );

    padding:
        42px 42px 34px;

    border:
        1px solid
        rgba(255,255,255,.095);

    border-radius: 26px;

    background:
        linear-gradient(
            180deg,
            rgba(18,24,34,.97),
            rgba(12,17,25,.97)
        );

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.42),
        inset 0 1px 0
        rgba(255,255,255,.035);

    backdrop-filter:
        blur(28px);
}

.login-brand-row {
    display: flex;
    align-items: center;

    gap: 14px;
}

.login-card-newlife .login-logo {
    flex:
        0 0
        56px;

    width: 56px;
    height: 56px;

    margin: 0;

    border-radius: 16px;

    font-size: 17px;
    font-weight: 850;

    box-shadow:
        0 10px 30px
        rgba(76,50,197,.28);
}

.login-brand-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.login-card-newlife .login-eyebrow {
    font-size: 12px;
    font-weight: 850;

    letter-spacing: .15em;
}

.login-brand-copy strong {
    color:
        var(--text);

    font-size: 15px;
    font-weight: 680;

    letter-spacing: -.01em;
}

.login-heading {
    margin:
        34px 0
        28px;
}

.login-card-newlife .login-heading h1 {
    margin:
        0 0 9px;

    font-size: 32px;
    line-height: 1.08;

    letter-spacing: -.04em;
}

.login-card-newlife .login-heading p {
    margin: 0;

    color:
        var(--muted);

    font-size: 15px;
    line-height: 1.55;
}

.login-fields {
    display: grid;

    gap: 18px;
}

.login-card-newlife .login-fields label {
    margin: 0;

    gap: 9px;
}

.login-card-newlife
.login-fields
label > span {
    color:
        rgba(235,239,247,.78);

    font-size: 14px;
    font-weight: 650;
}

.login-card-newlife
.login-fields
input {
    min-height: 50px;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius: 12px;

    background:
        rgba(6,10,16,.62);

    color:
        var(--text);

    font-size: 16px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.login-card-newlife
.login-fields
input::placeholder {
    color:
        rgba(180,188,202,.48);
}

.login-card-newlife
.login-fields
input:hover {
    border-color:
        rgba(255,255,255,.18);
}

.login-card-newlife
.login-fields
input:focus {
    border-color:
        var(--accent);

    background:
        rgba(8,12,19,.82);

    box-shadow:
        0 0 0 3px
        rgba(124,92,255,.13);
}

.login-submit {
    width: 100%;

    min-height: 50px;

    margin-top: 22px;

    border-radius: 12px;

    font-size: 15px;
    font-weight: 760;
}

.login-form-error {
    min-height: 0;

    margin-top: 14px;

    font-size: 14px;
    line-height: 1.45;

    text-align: center;
}

.login-form-error:empty {
    display: none;
}

.login-security-note {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-top: 20px;
    padding-top: 18px;

    border-top:
        1px solid
        rgba(255,255,255,.065);

    color:
        var(--muted-2);

    font-size: 13px;
    line-height: 1.5;
}

.login-security-dot {
    width: 8px;
    height: 8px;

    flex:
        0 0
        8px;

    margin-top: 6px;

    border-radius: 50%;

    background:
        var(--accent);

    box-shadow:
        0 0 0 4px
        rgba(124,92,255,.10);
}

@media (max-width: 560px) {
    .login-page-newlife {
        padding: 18px;
    }

    .login-card-newlife {
        padding:
            30px 24px
            26px;

        border-radius: 22px;
    }

    .login-card-newlife
    .login-heading h1 {
        font-size: 28px;
    }

    .login-heading {
        margin:
            28px 0
            24px;
    }
}



/* =========================================================
   NEWLIFE_LOGIN_PREMIUM_V2
   ========================================================= */

.nl-login {
    min-height: 100dvh;

    position: relative;
    overflow: hidden;

    display: grid;
    place-items: center;

    padding: 34px;

    background:
        #070a10;

    color:
        #f4f6fb;
}

.nl-login-bg {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.nl-login-grid {
    position: absolute;
    inset: 0;

    opacity: .15;

    background-image:
        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );

    background-size:
        54px 54px;

    mask-image:
        radial-gradient(
            circle at center,
            #000 15%,
            transparent 76%
        );
}

.nl-login-orb {
    position: absolute;

    border-radius: 999px;

    filter:
        blur(1px);
}

.nl-login-orb-a {
    width: 760px;
    height: 760px;

    top: -420px;
    left: -210px;

    background:
        radial-gradient(
            circle,
            rgba(121,92,255,.24),
            transparent 69%
        );
}

.nl-login-orb-b {
    width: 850px;
    height: 850px;

    right: -420px;
    bottom: -520px;

    background:
        radial-gradient(
            circle,
            rgba(74,52,190,.18),
            transparent 70%
        );
}

.nl-login-shell {
    width:
        min(
            1040px,
            100%
        );

    min-height:
        640px;

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(390px, .95fr);

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.085);

    border-radius: 30px;

    background:
        rgba(13,17,25,.88);

    box-shadow:
        0 50px 130px
        rgba(0,0,0,.52),
        inset 0 1px 0
        rgba(255,255,255,.035);

    backdrop-filter:
        blur(26px);
}

.nl-login-brand {
    position: relative;

    padding:
        48px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border-right:
        1px solid
        rgba(255,255,255,.065);

    background:
        linear-gradient(
            145deg,
            rgba(110,80,255,.11),
            rgba(16,21,31,.16) 42%,
            rgba(8,11,17,.36)
        );
}

.nl-login-brand::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -190px;
    top: 100px;

    border:
        1px solid
        rgba(137,111,255,.10);

    border-radius:
        50%;

    box-shadow:
        0 0 0 55px
        rgba(137,111,255,.025),
        0 0 0 110px
        rgba(137,111,255,.018);
}

.nl-login-brand-top {
    display: flex;
    align-items: center;

    gap: 15px;

    position: relative;
    z-index: 2;
}

.nl-login-mark {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    flex:
        0 0
        58px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #856bff,
            #563bd1
        );

    box-shadow:
        0 12px 35px
        rgba(98,70,226,.32),
        inset 0 1px 0
        rgba(255,255,255,.28);

    font-size: 17px;
    font-weight: 900;

    letter-spacing:
        -.04em;
}

.nl-login-brand-name {
    font-size: 20px;
    line-height: 1;

    font-weight: 800;

    letter-spacing:
        -.025em;
}

.nl-login-brand-sub {
    margin-top: 6px;

    color:
        rgba(219,224,236,.55);

    font-size: 13px;
}

.nl-login-brand-content {
    position: relative;
    z-index: 2;

    margin:
        auto 0;
}

.nl-login-kicker {
    display: inline-flex;

    margin-bottom:
        18px;

    color:
        #9986ff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing:
        .17em;
}

.nl-login-brand-content h1 {
    max-width:
        480px;

    margin:
        0;

    font-size:
        clamp(
            38px,
            4.2vw,
            55px
        );

    line-height:
        1.04;

    letter-spacing:
        -.052em;
}

.nl-login-brand-content h1 span {
    display: block;

    margin-top:
        7px;

    background:
        linear-gradient(
            90deg,
            #a491ff,
            #7255f4
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}

.nl-login-brand-content p {
    max-width:
        420px;

    margin:
        24px 0 0;

    color:
        rgba(211,217,230,.62);

    font-size:
        16px;

    line-height:
        1.65;
}

.nl-login-brand-footer {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content:
        space-between;

    gap: 20px;
}

.nl-login-status {
    display: flex;
    align-items: center;

    gap: 9px;

    color:
        rgba(220,225,236,.63);

    font-size: 13px;
}

.nl-login-status-dot {
    width: 8px;
    height: 8px;

    border-radius:
        999px;

    background:
        #68d391;

    box-shadow:
        0 0 0 4px
        rgba(104,211,145,.08),
        0 0 18px
        rgba(104,211,145,.35);
}

.nl-login-brand-copy {
    color:
        rgba(220,225,236,.32);

    font-size: 12px;

    letter-spacing:
        .06em;
}

.nl-login-auth {
    padding:
        54px 52px;

    display: grid;
    place-items: center;

    background:
        rgba(8,11,17,.26);
}

.nl-login-form {
    width:
        min(
            100%,
            390px
        );
}

.nl-login-mobile-brand {
    display: none;
}

.nl-login-form-head {
    margin-bottom:
        31px;
}

.nl-login-lock {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    margin-bottom:
        21px;

    border:
        1px solid
        rgba(140,115,255,.17);

    border-radius: 13px;

    background:
        rgba(123,91,255,.085);
}

.nl-login-lock svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke:
        #9985ff;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nl-login-form-head h2 {
    margin:
        0;

    font-size:
        30px;

    line-height:
        1.12;

    letter-spacing:
        -.04em;
}

.nl-login-form-head p {
    margin:
        10px 0 0;

    color:
        rgba(209,215,227,.56);

    font-size:
        14px;

    line-height:
        1.55;
}

.nl-login-fields {
    display: grid;

    gap: 19px;
}

.nl-login-field {
    display: grid;

    gap: 9px;
}

.nl-login-field > span {
    color:
        rgba(233,236,244,.76);

    font-size: 13px;
    font-weight: 650;
}

.nl-login-input-wrap {
    position: relative;

    display: flex;
    align-items: center;
}

.nl-login-input-wrap > svg {
    width: 19px;
    height: 19px;

    position: absolute;

    left: 15px;

    fill: none;

    stroke:
        rgba(191,199,215,.46);

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;

    transition:
        stroke .18s ease;
}

.nl-login-input-wrap input {
    width: 100%;
    height: 52px;

    padding:
        0 15px
        0 45px;

    border:
        1px solid
        rgba(255,255,255,.095);

    border-radius:
        13px;

    outline: 0;

    background:
        rgba(3,6,11,.46);

    color:
        #f4f6fb;

    font-size:
        15px;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.018);

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.nl-login-input-wrap input::placeholder {
    color:
        rgba(180,188,203,.35);
}

.nl-login-input-wrap:hover input {
    border-color:
        rgba(255,255,255,.16);
}

.nl-login-input-wrap:focus-within input {
    border-color:
        rgba(134,105,255,.72);

    background:
        rgba(5,8,14,.68);

    box-shadow:
        0 0 0 4px
        rgba(122,89,255,.09);
}

.nl-login-input-wrap:focus-within > svg {
    stroke:
        #9985ff;
}

.nl-login-submit {
    width: 100%;
    height: 52px;

    margin-top:
        24px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        13px;

    cursor: pointer;

    background:
        linear-gradient(
            135deg,
            #8065fa,
            #5c42d8
        );

    color:
        #fff;

    font: inherit;

    font-size: 14px;
    font-weight: 750;

    box-shadow:
        0 13px 32px
        rgba(91,62,210,.28),
        inset 0 1px 0
        rgba(255,255,255,.20);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

.nl-login-submit svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .16s ease;
}

.nl-login-submit:hover {
    transform:
        translateY(-1px);

    filter:
        brightness(1.06);

    box-shadow:
        0 16px 38px
        rgba(91,62,210,.34),
        inset 0 1px 0
        rgba(255,255,255,.22);
}

.nl-login-submit:hover svg {
    transform:
        translateX(2px);
}

.nl-login-submit:active {
    transform:
        translateY(0);
}

.nl-login-error {
    display: none;

    margin-top:
        14px;

    padding:
        11px 13px;

    border:
        1px solid
        rgba(255,99,112,.15);

    border-radius:
        10px;

    background:
        rgba(255,74,91,.07);

    color:
        #ff8792;

    font-size: 13px;

    line-height:
        1.45;
}

.nl-login-error:not(:empty) {
    display: block;
}

.nl-login-security {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin-top:
        23px;
    padding-top:
        21px;

    border-top:
        1px solid
        rgba(255,255,255,.055);
}

.nl-login-security-icon {
    width: 34px;
    height: 34px;

    flex:
        0 0
        34px;

    display: grid;
    place-items: center;

    border-radius:
        10px;

    background:
        rgba(122,90,255,.07);
}

.nl-login-security-icon svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        #8d77f6;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nl-login-security strong {
    display: block;

    margin-bottom:
        3px;

    color:
        rgba(235,238,245,.72);

    font-size: 12px;
}

.nl-login-security span {
    display: block;

    color:
        rgba(191,199,215,.43);

    font-size: 11px;

    line-height:
        1.45;
}

@media (max-width: 850px) {

    .nl-login {
        padding:
            20px;
    }

    .nl-login-shell {
        width:
            min(
                490px,
                100%
            );

        min-height: 0;

        display: block;

        border-radius:
            26px;
    }

    .nl-login-brand {
        display: none;
    }

    .nl-login-auth {
        padding:
            34px;
    }

    .nl-login-mobile-brand {
        display: flex;
        align-items: center;

        gap: 13px;

        margin-bottom:
            36px;
    }

    .nl-login-mobile-brand
    .nl-login-mark {
        width: 50px;
        height: 50px;

        flex-basis:
            50px;

        border-radius:
            15px;
    }

    .nl-login-mobile-brand
    strong {
        display: block;

        font-size:
            17px;
    }

    .nl-login-mobile-brand
    span {
        display: block;

        margin-top:
            4px;

        color:
            rgba(209,215,227,.46);

        font-size:
            12px;
    }

}

@media (max-width: 520px) {

    .nl-login {
        padding:
            12px;
    }

    .nl-login-shell {
        border-radius:
            22px;
    }

    .nl-login-auth {
        padding:
            28px 22px;
    }

    .nl-login-form-head h2 {
        font-size:
            27px;
    }

    .nl-login-form-head {
        margin-bottom:
            27px;
    }

    .nl-login-mobile-brand {
        margin-bottom:
            30px;
    }

}



/* =========================================================
   NEWLIFE_TWOFA_LOGIN_V1
   ========================================================= */

.nl-twofa .nl-login-shell {
    min-height: 640px;
}

.nl-twofa-status-dot {
    width: 8px;
    height: 8px;

    border-radius: 999px;

    background: #8e79ff;

    box-shadow:
        0 0 0 4px rgba(142,121,255,.08),
        0 0 18px rgba(142,121,255,.42);
}

.nl-twofa-head {
    margin-bottom: 30px;
}

.nl-twofa-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 20px;

    border:
        1px solid
        rgba(140,115,255,.18);

    border-radius: 14px;

    background:
        rgba(123,91,255,.09);
}

.nl-twofa-icon svg {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: #9c89ff;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nl-twofa-step {
    display: block;

    margin-bottom: 9px;

    color: #9480ff;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .14em;
}

.nl-twofa-head h2 {
    margin: 0;

    color: #f4f6fb;

    font-size: 30px;
    line-height: 1.12;

    letter-spacing: -.04em;
}

.nl-twofa-head p {
    margin: 10px 0 0;

    color:
        rgba(209,215,227,.56);

    font-size: 14px;
    line-height: 1.55;
}

.nl-twofa-head p strong {
    color:
        rgba(239,241,247,.86);

    font-weight: 700;
}

.nl-twofa-code-label {
    display: grid;

    gap: 9px;
}

.nl-twofa-code-label > span {
    color:
        rgba(233,236,244,.76);

    font-size: 13px;
    font-weight: 650;
}

.nl-twofa-code {
    width: 100%;
    height: 62px;

    box-sizing: border-box;

    padding:
        0 16px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 14px;

    outline: none;

    background:
        rgba(3,6,11,.48);

    color: #fff;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size: 25px;
    font-weight: 700;

    letter-spacing: .34em;

    text-align: center;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.nl-twofa-code::placeholder {
    color:
        rgba(173,181,198,.20);
}

.nl-twofa-code:hover {
    border-color:
        rgba(255,255,255,.17);
}

.nl-twofa-code:focus {
    border-color:
        rgba(134,105,255,.75);

    background:
        rgba(5,8,14,.72);

    box-shadow:
        0 0 0 4px
        rgba(122,89,255,.09);
}

.nl-twofa-submit {
    margin-top: 20px;
}

.nl-twofa-divider {
    position: relative;

    display: flex;
    align-items: center;

    margin:
        23px 0 17px;

    color:
        rgba(190,198,213,.32);

    font-size: 11px;
}

.nl-twofa-divider::before,
.nl-twofa-divider::after {
    content: "";

    height: 1px;

    flex: 1;

    background:
        rgba(255,255,255,.055);
}

.nl-twofa-divider span {
    padding:
        0 13px;
}

.nl-twofa-recovery-button {
    width: 100%;
    min-height: 48px;

    padding:
        0 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius: 12px;

    background:
        rgba(255,255,255,.025);

    color:
        rgba(221,225,235,.68);

    cursor: pointer;

    font: inherit;

    font-size: 13px;
    font-weight: 600;

    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease;
}

.nl-twofa-recovery-button svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nl-twofa-recovery-button:hover {
    border-color:
        rgba(145,120,255,.20);

    background:
        rgba(122,90,255,.055);

    color:
        rgba(236,238,245,.88);
}

.nl-twofa-recovery-form {
    margin-top: 19px;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(255,255,255,.055);
}

.nl-twofa-recovery-info {
    margin-bottom: 18px;
}

.nl-twofa-recovery-info strong {
    display: block;

    margin-bottom: 5px;

    color:
        rgba(238,240,246,.82);

    font-size: 14px;
}

.nl-twofa-recovery-info span {
    display: block;

    color:
        rgba(196,203,218,.46);

    font-size: 12px;
    line-height: 1.5;
}

.nl-twofa-code-recovery {
    font-size: 21px;

    letter-spacing: .22em;
}

.nl-twofa-note {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin-top: 21px;

    color:
        rgba(182,191,207,.35);

    font-size: 11px;
    line-height: 1.5;
}

.nl-twofa-note svg {
    width: 15px;
    height: 15px;

    flex:
        0 0 15px;

    margin-top: 1px;

    fill: none;

    stroke: #806df0;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 850px) {

    .nl-twofa .nl-login-shell {
        min-height: 0;
    }

}

@media (max-width: 520px) {

    .nl-twofa-code {
        height: 58px;

        font-size: 22px;

        letter-spacing: .27em;
    }

}



/* =========================================================
   NEWLIFE_PANEL_SHELL_V1
   Modern shell + motion
   Server rack/control animations intentionally untouched
   ========================================================= */


/* ---------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------- */

.app-shell .sidebar {
    padding:
        22px 13px 15px;

    background:
        linear-gradient(
            180deg,
            rgba(11,15,22,.975),
            rgba(7,10,16,.985)
        );

    border-right:
        1px solid
        rgba(255,255,255,.065);

    box-shadow:
        18px 0 70px
        rgba(0,0,0,.16);

    backdrop-filter:
        blur(26px)
        saturate(120%);
}

.app-shell .brand {
    gap: 13px;

    padding:
        4px 8px 22px;
}

.app-shell .brand-mark {
    width: 46px;
    height: 46px;

    border-radius: 14px;

    font-size: 15px;

    position: relative;

    overflow: hidden;

    box-shadow:
        0 12px 35px
        rgba(91,64,213,.26),
        inset 0 1px 0
        rgba(255,255,255,.24);

    transition:
        transform .32s
        cubic-bezier(.2,.8,.2,1),
        box-shadow .32s ease;
}

.app-shell .brand-mark::after {
    content: "";

    position: absolute;

    inset:
        -60% -80%;

    transform:
        translateX(-70%)
        rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.24),
            transparent
        );

    transition:
        transform .65s
        cubic-bezier(.2,.8,.2,1);
}

.app-shell .brand:hover
.brand-mark {
    transform:
        translateY(-2px)
        scale(1.035);

    box-shadow:
        0 16px 42px
        rgba(91,64,213,.34),
        inset 0 1px 0
        rgba(255,255,255,.26);
}

.app-shell .brand:hover
.brand-mark::after {
    transform:
        translateX(85%)
        rotate(25deg);
}

.app-shell .brand-copy {
    gap: 4px;
}

.app-shell .brand-copy strong {
    font-size: 17px;
    font-weight: 780;

    letter-spacing: -.025em;
}

.app-shell .brand-copy span {
    color:
        rgba(183,193,210,.54);

    font-size: 12px;
}


/* ---------------------------------------------------------
   USER
   --------------------------------------------------------- */

.app-shell .sidebar-user {
    gap: 11px;

    margin-bottom: 15px;

    padding:
        12px;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,.055),
            rgba(255,255,255,.018)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.018);

    transition:
        border-color .22s ease,
        background .22s ease,
        transform .22s ease;
}

.app-shell .sidebar-user:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(134,105,255,.17);

    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,.085),
            rgba(255,255,255,.025)
        );
}

.app-shell .sidebar-user .avatar {
    width: 37px;
    height: 37px;

    border:
        1px solid
        rgba(132,105,255,.16);

    border-radius: 11px;

    background:
        rgba(124,92,255,.075);

    box-shadow:
        0 0 0 4px
        rgba(124,92,255,.035);

    font-size: 14px;
}

.app-shell .sidebar-user strong {
    font-size: 13px;
    font-weight: 690;
}

.app-shell .sidebar-user span {
    font-size: 11.5px;
}


/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

.app-shell .sidebar-nav {
    padding-right: 4px;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(130,108,225,.26)
        transparent;
}

.app-shell .sidebar-nav::-webkit-scrollbar {
    width: 5px;
}

.app-shell .sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.app-shell .sidebar-nav::-webkit-scrollbar-thumb {
    border-radius: 20px;

    background:
        rgba(130,108,225,.24);
}

.app-shell .nav-caption {
    padding:
        17px 11px
        7px;

    color:
        rgba(154,164,181,.44);

    font-size: 11px;
    font-weight: 730;

    letter-spacing: .105em;
}

.app-shell .nav-item {
    min-height: 43px;

    position: relative;

    grid-template-columns:
        30px 1fr auto;

    gap: 9px;

    margin:
        3px 0;

    padding:
        8px 10px;

    border:
        1px solid
        transparent;

    border-radius: 12px;

    color:
        rgba(188,198,214,.68);

    font-size: 13px;
    font-weight: 570;

    overflow: hidden;

    transition:
        transform .23s
        cubic-bezier(.2,.8,.2,1),
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.app-shell .nav-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 3px;
    height: 0;

    transform:
        translateY(-50%);

    border-radius:
        0 4px 4px 0;

    background:
        linear-gradient(
            180deg,
            #a18dff,
            #6e52e8
        );

    box-shadow:
        0 0 14px
        rgba(126,101,255,.62);

    transition:
        height .26s
        cubic-bezier(.2,.8,.2,1);
}

.app-shell .nav-item:hover {
    transform:
        translateX(3px);

    color:
        rgba(242,244,249,.94);

    border-color:
        rgba(255,255,255,.045);

    background:
        rgba(255,255,255,.032);
}

.app-shell .nav-item.active {
    color: #fff;

    border-color:
        rgba(139,113,255,.12);

    background:
        linear-gradient(
            90deg,
            rgba(122,89,255,.15),
            rgba(122,89,255,.055)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025),
        0 8px 24px
        rgba(0,0,0,.08);
}

.app-shell .nav-item.active::before {
    height: 24px;
}

.app-shell .nav-icon {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border:
        1px solid
        transparent;

    border-radius: 9px;

    color:
        rgba(185,195,213,.56);

    font-size: 15px;

    transition:
        transform .24s
        cubic-bezier(.2,.8,.2,1),
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.app-shell .nav-item:hover
.nav-icon {
    transform:
        scale(1.07);

    color:
        rgba(220,224,234,.88);

    background:
        rgba(255,255,255,.035);
}

.app-shell .nav-item.active
.nav-icon {
    color:
        #a18cff;

    border-color:
        rgba(139,113,255,.13);

    background:
        rgba(124,92,255,.09);
}

.app-shell .soon {
    padding:
        3px 6px;

    border:
        1px solid
        rgba(130,108,225,.10);

    border-radius: 6px;

    font-size: 9px;

    background:
        rgba(124,92,255,.055);
}


/* ---------------------------------------------------------
   SIDEBAR FOOTER
   --------------------------------------------------------- */

.app-shell .sidebar-footer {
    padding:
        15px 9px
        3px;

    border-top:
        1px solid
        rgba(255,255,255,.045);

    color:
        rgba(150,160,177,.40);

    font-size: 10.5px;
}

.app-shell .sidebar-footer strong {
    color:
        rgba(185,194,209,.54);

    font-weight: 620;
}


/* ---------------------------------------------------------
   WORKSPACE
   --------------------------------------------------------- */

.app-shell .workspace {
    padding:
        24px 32px
        54px;

    background:
        radial-gradient(
            circle at 30% -15%,
            rgba(124,92,255,.055),
            transparent 28%
        );
}


/* ---------------------------------------------------------
   TOPBAR
   --------------------------------------------------------- */

.app-shell .topbar {
    min-height: 72px;

    position: sticky;

    top: 10px;

    z-index: 35;

    margin:
        0 -10px
        28px;

    padding:
        12px 14px;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius: 17px;

    background:
        rgba(9,13,19,.76);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.12),
        inset 0 1px 0
        rgba(255,255,255,.02);

    backdrop-filter:
        blur(22px)
        saturate(125%);

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.app-shell .topbar:hover {
    border-color:
        rgba(255,255,255,.075);

    box-shadow:
        0 22px 55px
        rgba(0,0,0,.16),
        inset 0 1px 0
        rgba(255,255,255,.025);
}

.app-shell .topbar .eyebrow {
    color:
        rgba(158,142,244,.70);

    font-size: 11px;
    font-weight: 760;

    letter-spacing: .125em;
}

.app-shell .topbar h1 {
    margin-top: 5px;

    font-size: 27px;
    font-weight: 700;

    letter-spacing: -.04em;
}

.app-shell .topbar-actions {
    gap: 11px;
}

.app-shell .current-role {
    padding:
        8px 11px;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius: 11px;

    background:
        rgba(255,255,255,.025);

    transition:
        background .2s ease,
        border-color .2s ease;
}

.app-shell .current-role:hover {
    border-color:
        rgba(132,105,255,.13);

    background:
        rgba(124,92,255,.045);
}

.app-shell .current-role span {
    font-size: 11px;
}

.app-shell .current-role strong {
    font-size: 11.5px;
}


/* ---------------------------------------------------------
   LOGOUT
   --------------------------------------------------------- */

.app-shell #logoutButton {
    min-height: 40px;

    padding:
        0 15px;

    border-radius: 11px;

    font-size: 12px;

    transition:
        transform .2s
        cubic-bezier(.2,.8,.2,1),
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}

.app-shell #logoutButton:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(255,108,120,.15);

    background:
        rgba(255,86,101,.055);

    color:
        #ff9aa4;
}


/* ---------------------------------------------------------
   PAGE TRANSITIONS
   --------------------------------------------------------- */

@keyframes nlPanelPageIn {
    0% {
        opacity: 0;

        transform:
            translateY(9px)
            scale(.997);

        filter:
            blur(2px);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);
    }
}

@keyframes nlPanelBlockIn {
    0% {
        opacity: 0;

        transform:
            translateY(12px);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0);
    }
}

.app-shell .page.active {
    animation:
        nlPanelPageIn
        .38s
        cubic-bezier(.2,.75,.25,1)
        both;
}

.app-shell .page.active
.hero-card,
.app-shell .page.active
.metric-card,
.app-shell .page.active
.panel,
.app-shell .page.active
.coming-page {
    animation:
        nlPanelBlockIn
        .43s
        cubic-bezier(.2,.75,.25,1)
        both;
}

.app-shell .page.active
.hero-card:nth-child(2),
.app-shell .page.active
.metric-card:nth-child(2) {
    animation-delay:
        .035s;
}

.app-shell .page.active
.metric-card:nth-child(3) {
    animation-delay:
        .07s;
}

.app-shell .page.active
.metric-card:nth-child(4) {
    animation-delay:
        .105s;
}


/* ---------------------------------------------------------
   CARDS
   --------------------------------------------------------- */

.app-shell .hero-card,
.app-shell .panel,
.app-shell .metric-card,
.app-shell .coming-page {
    border-color:
        rgba(255,255,255,.065);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.027),
            rgba(255,255,255,.009)
        ),
        rgba(13,18,26,.84);

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.12),
        inset 0 1px 0
        rgba(255,255,255,.018);
}

.app-shell .hero-card,
.app-shell .metric-card,
.app-shell .summary-item,
.app-shell .feature {
    transition:
        transform .24s
        cubic-bezier(.2,.8,.2,1),
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.app-shell .hero-card:hover,
.app-shell .metric-card:hover,
.app-shell .summary-item:hover,
.app-shell .feature:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(132,105,255,.13);

    box-shadow:
        0 23px 60px
        rgba(0,0,0,.16),
        inset 0 1px 0
        rgba(255,255,255,.025);
}

.app-shell .card-label {
    font-size: 11px;

    color:
        rgba(157,167,184,.51);
}


/* ---------------------------------------------------------
   METRIC VALUES
   --------------------------------------------------------- */

.app-shell .metric-card strong {
    transition:
        color .2s ease,
        text-shadow .2s ease;
}

.app-shell .metric-card:hover strong {
    color:
        #f4f6fb;

    text-shadow:
        0 0 20px
        rgba(141,117,255,.12);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .app-shell .workspace {
        padding:
            18px 18px
            44px;
    }

    .app-shell .topbar {
        top: 7px;

        margin:
            0 -3px
            22px;

        padding:
            10px 11px;

        border-radius: 15px;
    }

    .app-shell .topbar h1 {
        font-size: 23px;
    }

}

@media (max-width: 560px) {

    .app-shell .workspace {
        padding:
            13px 12px
            38px;
    }

    .app-shell .topbar {
        min-height: 62px;
    }

    .app-shell .topbar .eyebrow {
        font-size: 10px;
    }

}


/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .app-shell *,
    .app-shell *::before,
    .app-shell *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}



/* =========================================================
   NEWLIFE_OVERVIEW_CLEAN_V1
   Legacy overview hidden, modern overview enhanced.
   Server rack/control animations intentionally untouched.
   ========================================================= */

/*
 * Старый обзор оставляем в DOM как резерв,
 * но показываем только новый JS-блок.
 */
.page[data-page-content="overview"]
> :not(#nlOverviewControl) {
    display: none !important;
}


/* ---------------------------------------------------------
   ROOT
   --------------------------------------------------------- */

#nlOverviewControl {
    display: grid;

    gap: 18px;

    animation:
        nlOverviewRootIn
        .42s
        cubic-bezier(.2,.75,.25,1)
        both;
}

@keyframes nlOverviewRootIn {
    from {
        opacity: 0;

        transform:
            translateY(10px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ---------------------------------------------------------
   SERVER HERO
   --------------------------------------------------------- */

#nlOverviewControl
.nl-server-hero {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 90% -30%,
            rgba(124,92,255,.14),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(18,24,35,.95),
            rgba(10,14,21,.96)
        );

    box-shadow:
        0 28px 75px
        rgba(0,0,0,.19),
        inset 0 1px 0
        rgba(255,255,255,.025);

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

#nlOverviewControl
.nl-server-hero::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -260px;
    top: -210px;

    border:
        1px solid
        rgba(138,112,255,.08);

    border-radius: 50%;

    box-shadow:
        0 0 0 55px
        rgba(138,112,255,.018),
        0 0 0 110px
        rgba(138,112,255,.012);

    pointer-events: none;
}

#nlOverviewControl
.nl-server-hero:hover {
    border-color:
        rgba(132,105,255,.15);

    box-shadow:
        0 32px 90px
        rgba(0,0,0,.23),
        inset 0 1px 0
        rgba(255,255,255,.03);
}


/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

#nlOverviewControl
.nl-overview-kicker {
    color:
        rgba(163,142,255,.82);

    font-size: 11px;
    font-weight: 780;

    letter-spacing: .12em;
}

#nlOverviewControl
.nl-server-title-row h1 {
    font-size:
        clamp(
            26px,
            3vw,
            35px
        );

    letter-spacing:
        -.045em;
}


/* ---------------------------------------------------------
   POWER STATUS
   --------------------------------------------------------- */

#nlOverviewControl
.nl-server-power {
    min-height: 38px;

    padding:
        0 13px;

    border-radius: 11px;

    background:
        rgba(5,10,17,.42);

    backdrop-filter:
        blur(12px);

    transition:
        border-color .2s ease,
        transform .2s ease;
}

#nlOverviewControl
.nl-server-power:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(255,255,255,.18);
}


/* ---------------------------------------------------------
   METRICS
   --------------------------------------------------------- */

#nlOverviewControl
.nl-server-metric {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius: 13px;

    background:
        rgba(255,255,255,.018);

    transition:
        transform .22s
        cubic-bezier(.2,.8,.2,1),
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

#nlOverviewControl
.nl-server-metric::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    transform:
        scaleX(0);

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(139,112,255,.8),
            rgba(139,112,255,0)
        );

    transition:
        transform .28s ease;
}

#nlOverviewControl
.nl-server-metric:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(132,105,255,.14);

    background:
        rgba(124,92,255,.035);

    box-shadow:
        0 13px 30px
        rgba(0,0,0,.10);
}

#nlOverviewControl
.nl-server-metric:hover::before {
    transform:
        scaleX(1);
}

#nlOverviewControl
.nl-server-metric strong {
    transition:
        color .2s ease,
        text-shadow .2s ease;
}

#nlOverviewControl
.nl-server-metric:hover strong {
    color: #fff;

    text-shadow:
        0 0 18px
        rgba(132,105,255,.14);
}


/* ---------------------------------------------------------
   DETAILS
   --------------------------------------------------------- */

#nlOverviewControl
.nl-server-details {
    border-top:
        1px solid
        rgba(255,255,255,.045);

    border-bottom:
        1px solid
        rgba(255,255,255,.045);
}


/* ---------------------------------------------------------
   LOWER CARDS
   --------------------------------------------------------- */

#nlOverviewControl
.nl-overview-lower {
    gap: 18px;
}

#nlOverviewControl
.nl-overview-card {
    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.022),
            rgba(255,255,255,.008)
        ),
        rgba(12,17,25,.80);

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.11),
        inset 0 1px 0
        rgba(255,255,255,.018);

    animation:
        nlOverviewCardIn
        .42s
        cubic-bezier(.2,.75,.25,1)
        both;

    transition:
        transform .23s
        cubic-bezier(.2,.8,.2,1),
        border-color .22s ease,
        box-shadow .22s ease;
}

#nlOverviewControl
.nl-overview-card:nth-child(2) {
    animation-delay: .06s;
}

@keyframes nlOverviewCardIn {
    from {
        opacity: 0;

        transform:
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

#nlOverviewControl
.nl-overview-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(132,105,255,.13);

    box-shadow:
        0 24px 60px
        rgba(0,0,0,.15),
        inset 0 1px 0
        rgba(255,255,255,.022);
}


/* ---------------------------------------------------------
   READINESS
   --------------------------------------------------------- */

#nlOverviewControl
.nl-readiness-item {
    border:
        1px solid
        rgba(255,255,255,.045);

    border-radius: 11px;

    background:
        rgba(255,255,255,.014);

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

#nlOverviewControl
.nl-readiness-item:hover {
    transform:
        translateX(2px);

    border-color:
        rgba(255,255,255,.075);

    background:
        rgba(255,255,255,.023);
}

#nlOverviewControl
.nl-readiness-item.ok i {
    box-shadow:
        0 0 10px
        rgba(99,230,165,.55);

    animation:
        nlReadinessPulse
        2s ease-in-out
        infinite;
}

@keyframes nlReadinessPulse {
    0%,
    100% {
        opacity: .75;
    }

    50% {
        opacity: 1;

        box-shadow:
            0 0 15px
            rgba(99,230,165,.78);
    }
}


/* ---------------------------------------------------------
   REFRESH
   --------------------------------------------------------- */

#nlOverviewControl
.nl-overview-refresh {
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

#nlOverviewControl
.nl-overview-refresh:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(132,105,255,.18);

    background:
        rgba(124,92,255,.055);
}


/* ---------------------------------------------------------
   QUICK ACTIONS
   --------------------------------------------------------- */

#nlOverviewControl
.nl-quick-actions button {
    position: relative;

    overflow: hidden;

    transition:
        transform .22s
        cubic-bezier(.2,.8,.2,1),
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}

#nlOverviewControl
.nl-quick-actions button::after {
    content: "→";

    margin-left: 7px;

    opacity: 0;

    transform:
        translateX(-4px);

    display: inline-block;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

#nlOverviewControl
.nl-quick-actions button:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(132,105,255,.16);

    background:
        rgba(124,92,255,.055);

    color:
        rgba(245,246,250,.94);
}

#nlOverviewControl
.nl-quick-actions button:hover::after {
    opacity: .75;

    transform:
        translateX(0);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    #nlOverviewControl {
        gap: 14px;
    }

    #nlOverviewControl
    .nl-server-hero {
        border-radius: 18px;
    }

    #nlOverviewControl
    .nl-overview-card {
        border-radius: 16px;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    #nlOverviewControl,
    #nlOverviewControl * {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}



/* =========================================================
   NEWLIFE_MAP_PICKER_V1
   ========================================================= */

body.nl-map-picker-open {
    overflow: hidden;
}


/* Clickable overview metrics */

.nl-server-metric-link {
    cursor: pointer;
    user-select: none;
}

.nl-server-metric-link::after {
    content: "↗";

    position: absolute;

    top: 10px;
    right: 11px;

    font-size: 12px;

    opacity: 0;

    transform:
        translate(-3px, 3px);

    transition:
        opacity .18s ease,
        transform .18s ease;
}

.nl-server-metric-link:hover::after,
.nl-server-metric-link:focus-visible::after {
    opacity: .5;

    transform:
        translate(0, 0);
}

.nl-server-metric-link:focus-visible {
    outline:
        2px solid
        rgba(139, 112, 255, .6);

    outline-offset:
        2px;
}


/* Overlay */

.nl-map-picker {
    position: fixed;

    inset: 0;

    z-index: 10000;

    display: grid;

    place-items: center;

    padding: 28px;

    opacity: 0;

    transition:
        opacity .18s ease;
}

.nl-map-picker[hidden] {
    display: none;
}

.nl-map-picker.open {
    opacity: 1;
}

.nl-map-picker-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(2, 5, 10, .78);

    backdrop-filter:
        blur(10px);
}


/* Window */

.nl-map-picker-window {
    position: relative;

    width:
        min(
            1120px,
            100%
        );

    max-height:
        min(
            820px,
            calc(100vh - 56px)
        );

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, .09);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 85% -20%,
            rgba(126, 92, 255, .13),
            transparent 38%
        ),
        rgba(10, 14, 21, .98);

    box-shadow:
        0 35px 110px
        rgba(0, 0, 0, .55),
        inset 0 1px 0
        rgba(255, 255, 255, .025);

    transform:
        translateY(12px)
        scale(.985);

    transition:
        transform .2s
        cubic-bezier(.2,.8,.2,1);
}

.nl-map-picker.open
.nl-map-picker-window {
    transform:
        translateY(0)
        scale(1);
}


/* Header */

.nl-map-picker-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding:
        24px 26px 18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);
}

.nl-map-picker-kicker {
    display: block;

    margin-bottom: 7px;

    color:
        rgba(164, 144, 255, .78);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .13em;
}

.nl-map-picker-header h2 {
    margin: 0;

    color: #f5f5f7;

    font-size:
        clamp(
            24px,
            3vw,
            32px
        );

    letter-spacing: -.035em;
}

.nl-map-picker-header p {
    margin:
        6px 0 0;

    color:
        rgba(220, 224, 235, .54);

    font-size: 13px;
}

.nl-map-picker-close {
    width: 39px;
    height: 39px;

    flex: 0 0 auto;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 11px;

    background:
        rgba(255,255,255,.025);

    color:
        rgba(240,242,248,.72);

    font-size: 25px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.nl-map-picker-close:hover {
    transform: rotate(4deg);

    border-color:
        rgba(255,255,255,.15);

    background:
        rgba(255,255,255,.055);
}


/* Toolbar */

.nl-map-picker-toolbar {
    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        15px 26px;
}

.nl-map-picker-search {
    min-width: 0;

    flex: 1;

    display: flex;

    align-items: center;

    gap: 9px;

    height: 43px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius: 12px;

    background:
        rgba(255,255,255,.025);
}

.nl-map-picker-search > span {
    opacity: .5;

    font-size: 18px;
}

.nl-map-picker-search input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #f3f4f7;

    font:
        inherit;

    font-size: 14px;
}

.nl-map-picker-search input::placeholder {
    color:
        rgba(220,224,235,.35);
}

.nl-map-picker-count {
    flex: 0 0 auto;

    color:
        rgba(220,224,235,.52);

    font-size: 12px;
    font-weight: 700;
}


/* Status */

.nl-map-picker-status {
    margin:
        0 26px 14px;

    padding:
        11px 13px;

    border:
        1px solid
        rgba(80, 210, 150, .16);

    border-radius: 10px;

    background:
        rgba(80, 210, 150, .055);

    color:
        rgba(180, 245, 210, .85);

    font-size: 12px;
}

.nl-map-picker-status.error {
    border-color:
        rgba(255, 98, 116, .18);

    background:
        rgba(255, 98, 116, .055);

    color:
        rgba(255, 185, 194, .9);
}


/* Grid */

.nl-map-picker-grid {
    min-height: 220px;

    overflow: auto;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 13px;

    padding:
        4px 26px 26px;
}

.nl-map-picker-grid::-webkit-scrollbar {
    width: 8px;
}

.nl-map-picker-grid::-webkit-scrollbar-thumb {
    border-radius: 10px;

    background:
        rgba(255,255,255,.09);
}


/* Cards */

.nl-map-picker-card {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius: 15px;

    background:
        rgba(255,255,255,.018);

    transition:
        transform .2s
        cubic-bezier(.2,.8,.2,1),
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.nl-map-picker-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(135, 108, 255, .18);

    background:
        rgba(125, 91, 255, .025);

    box-shadow:
        0 18px 38px
        rgba(0,0,0,.18);
}

.nl-map-picker-card.current {
    border-color:
        rgba(101, 222, 165, .19);
}


/* Temporary visual preview.
   Real map images will be plugged into this block next. */

.nl-map-picker-preview {
    position: relative;

    height: 126px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 15px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 15%,
            rgba(129, 95, 255, .24),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            rgba(26, 31, 45, .96),
            rgba(12, 16, 24, .96)
        );

    border-bottom:
        1px solid
        rgba(255,255,255,.045);
}

.nl-map-picker-preview::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: .11;

    background-image:
        linear-gradient(
            rgba(255,255,255,.1) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.1) 1px,
            transparent 1px
        );

    background-size:
        22px 22px;

    transform:
        perspective(180px)
        rotateX(58deg)
        scale(1.35);

    transform-origin:
        center bottom;
}

.nl-map-picker-preview span,
.nl-map-picker-preview strong {
    position: relative;

    z-index: 1;
}

.nl-map-picker-preview span {
    margin-bottom: 4px;

    color:
        rgba(170, 150, 255, .74);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .14em;
}

.nl-map-picker-preview strong {
    overflow: hidden;

    color:
        rgba(245,246,250,.91);

    font-size: 14px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* Card body */

.nl-map-picker-card-body {
    padding: 13px;
}

.nl-map-picker-card-title {
    min-height: 43px;
}

.nl-map-picker-card-title > strong {
    display: block;

    overflow: hidden;

    color:
        rgba(244,245,248,.88);

    font-size: 13px;
    font-weight: 740;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.nl-map-picker-badges {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 7px;
}

.nl-map-picker-badges span {
    padding:
        3px 6px;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius: 6px;

    background:
        rgba(255,255,255,.025);

    color:
        rgba(215,219,229,.48);

    font-size: 9px;
    font-weight: 750;
}

.nl-map-picker-badges span.current {
    border-color:
        rgba(95, 222, 164, .16);

    background:
        rgba(95, 222, 164, .05);

    color:
        rgba(156, 241, 199, .82);
}


/* Select */

.nl-map-picker-select {
    width: 100%;

    min-height: 37px;

    margin-top: 12px;

    border:
        1px solid
        rgba(135,108,255,.15);

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(126, 91, 255, .14),
            rgba(88, 69, 190, .08)
        );

    color:
        rgba(235,231,255,.86);

    font-size: 12px;
    font-weight: 730;

    cursor: pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.nl-map-picker-select:not(:disabled):hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(135,108,255,.28);

    background:
        linear-gradient(
            135deg,
            rgba(126, 91, 255, .23),
            rgba(88, 69, 190, .12)
        );
}

.nl-map-picker-select:disabled {
    cursor: default;

    opacity: .42;
}


/* Loading / Empty */

.nl-map-picker-loading,
.nl-map-picker-empty {
    grid-column:
        1 / -1;

    min-height: 210px;

    display: grid;

    place-items: center;

    color:
        rgba(220,224,235,.42);

    font-size: 13px;
}


/* Responsive */

@media (max-width: 900px) {

    .nl-map-picker-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


@media (max-width: 620px) {

    .nl-map-picker {
        padding: 10px;
    }

    .nl-map-picker-window {
        max-height:
            calc(100vh - 20px);

        border-radius: 17px;
    }

    .nl-map-picker-header {
        padding:
            19px 18px 15px;
    }

    .nl-map-picker-toolbar {
        padding:
            12px 18px;
    }

    .nl-map-picker-grid {
        grid-template-columns:
            1fr;

        padding:
            4px 18px 20px;
    }

    .nl-map-picker-preview {
        height: 112px;
    }

}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .nl-map-picker,
    .nl-map-picker *,
    .nl-server-metric-link {
        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;
    }
}


/* NEWLIFE_MAP_PICKER_LAYOUT_FIX_V1 */

.nl-map-picker-grid {
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
    grid-auto-rows: max-content;
}

.nl-map-picker-card {
    height: auto;
    min-height: 0;
    align-self: start;
}

.nl-map-picker-preview {
    flex: 0 0 126px;
}

.nl-map-picker-card-body {
    display: block;
    min-height: 94px;
}

@media (max-width: 620px) {
    .nl-map-picker-preview {
        flex-basis: 112px;
    }
}


/* =========================================================
   NEWLIFE_MAP_PREVIEW_SUPPORT_V1
   ========================================================= */

.nl-map-picker-preview {
    position: relative;
}

.nl-map-picker-preview-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    transform: scale(1.01);

    transition:
        opacity .22s ease,
        transform .28s ease;
}

.nl-map-picker-preview.has-image {
    background:
        linear-gradient(
            180deg,
            rgba(7,10,16,.18),
            rgba(7,10,16,.58)
        );
}

.nl-map-picker-preview.has-image::before {
    opacity: .05;
}

.nl-map-picker-preview.has-image .nl-map-picker-preview-image {
    opacity: .94;
}

.nl-map-picker-preview-meta {
    position: relative;
    z-index: 1;
}

.nl-map-picker-card:hover .nl-map-picker-preview-image {
    transform: scale(1.035);
}

.nl-map-picker-preview.has-image span {
    color:
        rgba(236,239,247,.82);
    text-shadow:
        0 2px 10px rgba(0,0,0,.45);
}

.nl-map-picker-preview.has-image strong {
    color:
        #ffffff;
    text-shadow:
        0 2px 14px rgba(0,0,0,.52);
}



/* =========================================================
   NEWLIFE_SIDEBAR_SVG_ICONS_V1
   ========================================================= */

.sidebar-nav .nav-icon {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius: 9px;

    background:
        rgba(255,255,255,.022);

    color:
        rgba(190,196,211,.64);

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.sidebar-nav .nav-icon svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect:
        non-scaling-stroke;
}

.sidebar-nav .nav-item:hover .nav-icon {
    color:
        rgba(221,216,255,.9);

    border-color:
        rgba(132,105,255,.12);

    background:
        rgba(124,92,255,.055);

    transform:
        translateX(1px);
}

.sidebar-nav .nav-item.active .nav-icon {
    color: #c9bcff;

    border-color:
        rgba(135,108,255,.20);

    background:
        linear-gradient(
            135deg,
            rgba(126,91,255,.16),
            rgba(126,91,255,.055)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025),
        0 0 20px
        rgba(108,80,245,.06);
}



/*
 * ==============================================
 * NEWLIFE_COMMS_UI_CSS_V1
 * ==============================================
 */

.nl-comms-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 7px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(168, 85, 247, .18);
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
}

.nl-comms-toolbar {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        minmax(180px, 240px);
    gap: 12px;
    margin: 18px 0;
}

.nl-comms-toolbar label {
    display: grid;
    gap: 7px;
}

.nl-comms-toolbar label > span {
    color: var(--muted, #9aa4b2);
    font-size: 12px;
    font-weight: 650;
}

.nl-comms-toolbar input,
.nl-comms-toolbar select {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    border: 1px solid
        var(--border, rgba(255,255,255,.09));
    border-radius: 10px;
    padding: 0 12px;
    background: rgba(0,0,0,.18);
    color: var(--text, #fff);
    font: inherit;
    outline: none;
}

.nl-comms-toolbar input:focus,
.nl-comms-toolbar select:focus {
    border-color: rgba(255,255,255,.22);
}

.nl-comms-table td {
    vertical-align: middle;
}

.nl-comms-steamid {
    white-space: nowrap;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: 12px;
}

.nl-comms-type,
.nl-comms-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
}

.nl-comms-type-mute {
    background: rgba(59,130,246,.13);
}

.nl-comms-type-gag {
    background: rgba(245,158,11,.13);
}

.nl-comms-type-silence {
    background: rgba(168,85,247,.15);
}

.nl-comms-status.is-active {
    background: rgba(34,197,94,.13);
}

.nl-comms-status.is-expired {
    background: rgba(148,163,184,.10);
    color: var(--muted, #9aa4b2);
}

.nl-comms-status.is-removed {
    background: rgba(239,68,68,.10);
    color: var(--muted, #9aa4b2);
}

@media (max-width: 760px) {
    .nl-comms-toolbar {
        grid-template-columns: 1fr;
    }

    .nl-ban-tabs {
        overflow-x: auto;
    }

    .nl-ban-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}



/*
 * ==========================================================
 * NEWLIFE_MODERATION_REDESIGN_V1
 * ==========================================================
 */

/* Общая зона модерации */
.page[data-page-content="bans"] {
    font-size: 15px;
}

/* Верхние вкладки */
.page[data-page-content="bans"] .nl-ban-tabs {
    gap: 7px;
    margin-bottom: 22px;
    padding: 6px;
    border-radius: 16px;
    background:
        rgba(255,255,255,.035);
}

.page[data-page-content="bans"] .nl-ban-tab {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
}

.page[data-page-content="bans"] .nl-ban-tab.is-active {
    background:
        linear-gradient(
            180deg,
            rgba(168,85,247,.20),
            rgba(124,58,237,.11)
        );
    box-shadow:
        inset 0 0 0 1px rgba(168,85,247,.18),
        0 6px 20px rgba(0,0,0,.12);
}

/* Сами панели */
.page[data-page-content="bans"] .panel {
    border-radius: 18px;
    padding: 22px;
}

.page[data-page-content="bans"] .panel-heading {
    gap: 18px;
    margin-bottom: 4px;
}

.page[data-page-content="bans"] .panel-heading h3 {
    margin-top: 5px;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -.015em;
}

.page[data-page-content="bans"] .card-label {
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .09em;
}

.page[data-page-content="bans"] .section-status {
    font-size: 14px;
    font-weight: 650;
}

/* Подзаголовки */
.page[data-page-content="bans"] .nl-engine-ban-subtitle {
    margin-top: 7px;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.55;
}

/* Поиск / фильтры */
.page[data-page-content="bans"] .nl-comms-toolbar {
    gap: 14px;
    margin: 22px 0 18px;
}

.page[data-page-content="bans"] .nl-comms-toolbar label > span,
.page[data-page-content="bans"] .nl-engine-ban-form label > span {
    font-size: 13px;
    font-weight: 700;
}

.page[data-page-content="bans"] .nl-comms-toolbar input,
.page[data-page-content="bans"] .nl-comms-toolbar select,
.page[data-page-content="bans"] .nl-engine-ban-form input,
.page[data-page-content="bans"] .nl-engine-ban-form select {
    height: 47px;
    padding-left: 14px;
    padding-right: 14px;
    border-radius: 12px;
    font-size: 15px;
}

/* Таблицы */
.page[data-page-content="bans"] .table-scroll {
    margin-top: 8px;
    border-radius: 14px;
}

.page[data-page-content="bans"] .v3-table {
    font-size: 14px;
}

.page[data-page-content="bans"] .v3-table th {
    padding: 13px 14px;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.page[data-page-content="bans"] .v3-table td {
    padding: 14px;
    font-size: 14px;
    line-height: 1.45;
}

.page[data-page-content="bans"] .v3-table tbody tr {
    transition:
        background .15s ease,
        opacity .15s ease;
}

.page[data-page-content="bans"] .v3-table tbody tr:hover {
    background: rgba(255,255,255,.025);
}

/* SteamID чуть крупнее */
.page[data-page-content="bans"] .nl-comms-steamid {
    font-size: 13px;
}

/* Бейджи */
.page[data-page-content="bans"] .nl-comms-type,
.page[data-page-content="bans"] .nl-comms-status {
    min-height: 30px;
    padding: 5px 11px;
    font-size: 13px;
    font-weight: 750;
}

/* Счётчик активных мутов */
.page[data-page-content="bans"] .nl-comms-tab-count {
    min-width: 23px;
    height: 23px;
    padding: 0 7px;
    margin-left: 8px;
    font-size: 12px;
}

/* Неактивные записи не делаем слишком бледными */
.page[data-page-content="bans"] .nl-engine-ban-inactive {
    opacity: .70;
}

/* Форма серверного бана */
.page[data-page-content="bans"] .nl-engine-ban-form {
    margin-top: 22px;
    margin-bottom: 18px;
    gap: 14px;
}

.page[data-page-content="bans"] .nl-engine-ban-note {
    padding: 13px 15px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
}

/* Кнопки действий в модерации */
.page[data-page-content="bans"] .button,
.page[data-page-content="bans"] .table-action-v3 {
    min-height: 38px;
    font-size: 14px;
    font-weight: 700;
}

/* Мобильная версия */
@media (max-width: 760px) {

    .page[data-page-content="bans"] {
        font-size: 15px;
    }

    .page[data-page-content="bans"] .panel {
        padding: 17px;
        border-radius: 16px;
    }

    .page[data-page-content="bans"] .panel-heading h3 {
        font-size: 20px;
    }

    .page[data-page-content="bans"] .nl-ban-tab {
        min-height: 43px;
        padding: 0 15px;
        font-size: 14px;
    }

    .page[data-page-content="bans"] .v3-table td {
        padding: 13px;
        font-size: 14px;
    }
}


/*
 * ==========================================================
 * NEWLIFE_COMMS_SUMMARY_CSS_V1
 * ==========================================================
 */

.page[data-page-content="bans"] .nl-comms-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 20px;
}

.page[data-page-content="bans"] .nl-comms-summary-card {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    padding: 17px 18px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );
}

.page[data-page-content="bans"] .nl-comms-summary-card::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -35px;
    bottom: -45px;
    border-radius: 50%;
    background: rgba(168,85,247,.09);
    filter: blur(4px);
    pointer-events: none;
}

.page[data-page-content="bans"] .nl-comms-summary-card > span {
    display: block;
    margin-bottom: 9px;
    color: var(--muted, #9aa4b2);
    font-size: 13px;
    font-weight: 700;
}

.page[data-page-content="bans"] .nl-comms-summary-card > strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text, #fff);
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.035em;
}

.page[data-page-content="bans"] .nl-comms-summary-card > small {
    color: var(--muted, #9aa4b2);
    font-size: 13px;
    line-height: 1.35;
}

@media (max-width: 1050px) {
    .page[data-page-content="bans"] .nl-comms-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .page[data-page-content="bans"] .nl-comms-summary {
        gap: 9px;
    }

    .page[data-page-content="bans"] .nl-comms-summary-card {
        min-height: 100px;
        padding: 14px;
    }

    .page[data-page-content="bans"] .nl-comms-summary-card > strong {
        font-size: 26px;
    }
}



/*
 * ==========================================================
 * NEWLIFE_COMMS_ACTIONS_CSS_V1
 * ==========================================================
 */

.page[data-page-content="bans"] .nl-comms-actions {
    min-width: 150px;
    white-space: normal;
}

.page[data-page-content="bans"]
.nl-comms-actions:has(.nl-comms-action) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.page[data-page-content="bans"] .nl-comms-action {
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 9px;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1;
}

.page[data-page-content="bans"]
.nl-comms-action.is-primary {
    border-color: rgba(168,85,247,.25);
    background:
        rgba(168,85,247,.12);
}

.page[data-page-content="bans"]
.nl-comms-action.is-primary:hover {
    background:
        rgba(168,85,247,.19);
}

@media (max-width: 760px) {
    .page[data-page-content="bans"]
    .nl-comms-actions {
        min-width: 140px;
    }
}



/*
 * ==========================================================
 * NEWLIFE_MODERATION_HIDDEN_FIX_V1
 * ==========================================================
 */

.page[data-page-content="bans"] #banSourcePanel[hidden],
.page[data-page-content="bans"] #banEnginePanel[hidden],
.page[data-page-content="bans"] #banCommsPanel[hidden] {
    display: none !important;
}



/* ==========================================================
   NEWLIFE_MODERATION_UI_V2
   Unified moderation visual system
   ========================================================== */

.page[data-page-content="bans"] {
    --nl-mod-border: rgba(255, 255, 255, .075);
    --nl-mod-border-strong: rgba(139, 92, 246, .22);
    --nl-mod-surface: rgba(15, 20, 29, .84);
    --nl-mod-surface-soft: rgba(255, 255, 255, .025);
    --nl-mod-text-soft: #8f9bad;
    --nl-mod-text: #eef2f8;

    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 15px;
}


/* ---------- Tabs ---------- */

.page[data-page-content="bans"] .nl-ban-tabs {
    width: max-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;

    padding: 5px;

    border: 1px solid var(--nl-mod-border);
    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 8px 28px rgba(0,0,0,.14);
}


.page[data-page-content="bans"] .nl-ban-tab {
    min-height: 39px;
    padding: 0 15px;

    border: 1px solid transparent;
    border-radius: 10px;

    background: transparent;

    color: #9aa6b8;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        transform .16s ease;
}


.page[data-page-content="bans"] .nl-ban-tab:hover {
    color: #dfe6ef;
    background: rgba(255,255,255,.035);
}


.page[data-page-content="bans"] .nl-ban-tab.is-active {
    color: #fff;

    border-color: rgba(149, 93, 255, .28);

    background:
        linear-gradient(
            180deg,
            rgba(117, 63, 190, .48),
            rgba(78, 43, 129, .44)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 5px 18px rgba(81, 42, 146, .18);
}


.page[data-page-content="bans"] .nl-comms-tab-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: rgba(151, 91, 255, .34);

    color: #e8ddff;

    font-size: 11px;
    font-weight: 800;
}


/* ---------- Main panels ---------- */

.page[data-page-content="bans"] #banSourcePanel,
.page[data-page-content="bans"] #banEnginePanel,
.page[data-page-content="bans"] #banCommsPanel {
    width: 100%;
}


.page[data-page-content="bans"] #banSourcePanel > .panel,
.page[data-page-content="bans"] #banEnginePanel > .panel,
.page[data-page-content="bans"] #banCommsPanel > .panel {
    padding: 20px 20px 18px;

    border: 1px solid var(--nl-mod-border);
    border-radius: 17px;

    background:
        radial-gradient(
            circle at 96% 0%,
            rgba(121, 75, 190, .055),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            rgba(18, 24, 33, .97),
            rgba(14, 19, 27, .96)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 12px 34px rgba(0,0,0,.14);
}


/* ---------- Panel header ---------- */

.page[data-page-content="bans"] .panel-heading {
    min-height: 52px;
    margin-bottom: 17px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}


.page[data-page-content="bans"] .card-label {
    display: block;
    margin-bottom: 6px;

    color: #697587;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .075em;
}


.page[data-page-content="bans"] .panel-heading h3 {
    margin: 0;

    color: var(--nl-mod-text);

    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.018em;
}


.page[data-page-content="bans"] .panel-heading p,
.page[data-page-content="bans"] .nl-engine-ban-subtitle {
    max-width: 760px;
    margin: 6px 0 0;

    color: var(--nl-mod-text-soft);

    font-size: 13px;
    line-height: 1.5;
}


.page[data-page-content="bans"] .section-status {
    min-height: 29px;
    padding: 0 9px;

    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    border: 1px solid rgba(123, 82, 196, .16);
    border-radius: 8px;

    background: rgba(86, 52, 145, .12);

    color: #a58ae2;

    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}


/* ---------- Forms ---------- */

.page[data-page-content="bans"] label {
    color: #8996a9;

    font-size: 12px;
    font-weight: 700;
}


.page[data-page-content="bans"] input,
.page[data-page-content="bans"] select {
    min-height: 42px;

    border: 1px solid rgba(255,255,255,.075);
    border-radius: 10px;

    background: rgba(8, 12, 18, .58);

    color: #dce3ec;

    font-size: 13px;

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}


.page[data-page-content="bans"] input:hover,
.page[data-page-content="bans"] select:hover {
    border-color: rgba(255,255,255,.12);
}


.page[data-page-content="bans"] input:focus,
.page[data-page-content="bans"] select:focus {
    outline: none;

    border-color: rgba(136, 82, 223, .55);

    background: rgba(9, 13, 20, .78);

    box-shadow:
        0 0 0 3px rgba(113, 67, 184, .10);
}


.page[data-page-content="bans"] input::placeholder {
    color: #586474;
}


/* ---------- Engine ban info ---------- */

.page[data-page-content="bans"] .nl-engine-ban-note {
    margin: 14px 0 18px;
    padding: 11px 13px;

    border: 1px solid rgba(255,255,255,.065);
    border-radius: 10px;

    background: rgba(255,255,255,.024);

    color: #8793a5;

    font-size: 12px;
    line-height: 1.5;
}


.page[data-page-content="bans"] .nl-engine-ban-note strong {
    color: #d6dde7;
}


/* ---------- Tables ---------- */

.page[data-page-content="bans"] .table-scroll {
    margin-top: 2px;
}


.page[data-page-content="bans"] .v3-table {
    width: 100%;
    border-collapse: collapse;
}


.page[data-page-content="bans"] .v3-table thead th {
    padding: 11px 12px;

    border-bottom: 1px solid rgba(255,255,255,.075);

    color: #647185;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}


.page[data-page-content="bans"] .v3-table tbody td {
    padding: 12px;

    border-bottom: 1px solid rgba(255,255,255,.052);

    color: #aab4c2;

    font-size: 13px;
    line-height: 1.42;
    vertical-align: middle;
}


.page[data-page-content="bans"] .v3-table tbody tr:last-child td {
    border-bottom: 0;
}


.page[data-page-content="bans"] .v3-table tbody tr {
    transition: background .13s ease;
}


.page[data-page-content="bans"] .v3-table tbody tr:hover {
    background: rgba(255,255,255,.019);
}


/* SteamID / technical values */

.page[data-page-content="bans"] .v3-table td:nth-child(3),
.page[data-page-content="bans"] #engineBansBody td:nth-child(2) {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size: 12px;
}


/* ---------- Buttons ---------- */

.page[data-page-content="bans"] button.table-action-v3,
.page[data-page-content="bans"] .nl-comms-action,
.page[data-page-content="bans"] #engineBanAdd {
    min-height: 32px;
    padding: 0 10px;

    border-radius: 8px;

    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}


.page[data-page-content="bans"] button.table-action-v3:not(.danger),
.page[data-page-content="bans"] .nl-comms-action {
    border-color: rgba(255,255,255,.09);

    background:
        linear-gradient(
            180deg,
            rgba(31, 40, 54, .95),
            rgba(23, 30, 41, .95)
        );

    color: #dbe3ed;
}


.page[data-page-content="bans"] button.table-action-v3:hover,
.page[data-page-content="bans"] .nl-comms-action:hover {
    transform: translateY(-1px);
}


/* ---------- Comms summary ---------- */

.page[data-page-content="bans"] .nl-comms-summary {
    margin: 3px 0 17px;

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


.page[data-page-content="bans"] .nl-comms-summary-card {
    position: relative;
    overflow: hidden;

    min-height: 89px;
    padding: 13px 14px;

    border: 1px solid rgba(255,255,255,.065);
    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.027),
            rgba(255,255,255,.012)
        );
}


.page[data-page-content="bans"] .nl-comms-summary-card::after {
    content: "";

    position: absolute;
    width: 70px;
    height: 70px;
    right: -28px;
    bottom: -35px;

    border-radius: 50%;

    background: rgba(113, 70, 181, .17);

    filter: blur(5px);
}


.page[data-page-content="bans"] .nl-comms-summary-card span {
    display: block;

    color: #7f8b9d;

    font-size: 11px;
    font-weight: 750;
}


.page[data-page-content="bans"] .nl-comms-summary-card strong {
    position: relative;
    z-index: 1;

    display: block;
    margin-top: 6px;

    color: #f0f3f8;

    font-size: 25px;
    font-weight: 850;
    line-height: 1;
}


.page[data-page-content="bans"] .nl-comms-summary-card small {
    display: block;
    margin-top: 7px;

    color: #758194;

    font-size: 11px;
}


/* ---------- Comms toolbar ---------- */

.page[data-page-content="bans"] .nl-comms-toolbar {
    margin: 0 0 14px;

    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        190px;
    gap: 10px;
    align-items: end;
}


.page[data-page-content="bans"] .nl-comms-search {
    min-width: 0;
}


/* ---------- Empty states ---------- */

.page[data-page-content="bans"] .empty-state {
    padding: 26px 18px;

    border: 1px dashed rgba(255,255,255,.075);
    border-radius: 11px;

    color: #687587;

    font-size: 13px;
    text-align: center;
}


/* ---------- Status badges ---------- */

.page[data-page-content="bans"] .status-badge,
.page[data-page-content="bans"] [class*="status"] {
    font-weight: 700;
}


/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
    .page[data-page-content="bans"] .nl-comms-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 720px) {
    .page[data-page-content="bans"] {
        gap: 13px;
    }

    .page[data-page-content="bans"] .nl-ban-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .page[data-page-content="bans"] .nl-ban-tab {
        flex: 1 0 auto;
        padding-inline: 12px;
    }

    .page[data-page-content="bans"] #banSourcePanel > .panel,
    .page[data-page-content="bans"] #banEnginePanel > .panel,
    .page[data-page-content="bans"] #banCommsPanel > .panel {
        padding: 16px;
        border-radius: 14px;
    }

    .page[data-page-content="bans"] .panel-heading {
        flex-direction: column;
        gap: 10px;
    }

    .page[data-page-content="bans"] .nl-comms-summary {
        grid-template-columns: 1fr 1fr;
    }

    .page[data-page-content="bans"] .nl-comms-toolbar {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 480px) {
    .page[data-page-content="bans"] .nl-comms-summary {
        grid-template-columns: 1fr;
    }
}

/* NEWLIFE_MODERATION_PAGE_VISIBILITY_FIX_V1 */

/*
 * Moderation must follow the normal panel page lifecycle.
 * The UI V2 layout uses flex only while this page is active.
 */
.page[data-page-content="bans"]:not(.active) {
    display: none !important;
}

.page[data-page-content="bans"].active {
    display: flex;
}



/* ==========================================================
   NEWLIFE_MODERATION_TOOLS_CSS_V1
   ========================================================== */

.page[data-page-content="bans"] .nl-mod-tools {
    margin: 0 0 14px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;

    padding: 12px;

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;

    background:
        rgba(255,255,255,.018);
}


.page[data-page-content="bans"]
.nl-mod-tools-controls {
    min-width: 0;

    display: flex;
    align-items: flex-end;
    gap: 10px;
}


.page[data-page-content="bans"]
.nl-mod-tool-field {
    min-width: 150px;

    display: flex;
    flex-direction: column;
    gap: 6px;
}


.page[data-page-content="bans"]
.nl-mod-tool-field:first-child {
    width: min(360px, 32vw);
}


.page[data-page-content="bans"]
.nl-mod-tool-field > span {
    color: #778396;

    font-size: 11px;
    font-weight: 750;
}


.page[data-page-content="bans"]
.nl-mod-tool-search {
    width: 100%;
}


.page[data-page-content="bans"]
.nl-mod-tools-metrics {
    flex: 0 0 auto;

    min-height: 42px;

    display: flex;
    align-items: center;
    gap: 7px;
}


.page[data-page-content="bans"]
.nl-mod-tools-metrics > span {
    min-height: 27px;
    padding: 0 9px;

    display: inline-flex;
    align-items: center;

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;

    background: rgba(255,255,255,.022);

    color: #7f8b9e;

    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}


.page[data-page-content="bans"]
.nl-mod-tools-metrics > span.is-filtered {
    border-color:
        rgba(128, 79, 205, .27);

    background:
        rgba(105, 62, 173, .13);

    color: #b59be4;
}


/*
 * Table rows filtered by moderation-tools.js only.
 * This does not affect moderation panels themselves.
 */
.page[data-page-content="bans"]
.v3-table tbody tr[hidden] {
    display: none !important;
}


@media (max-width: 1050px) {
    .page[data-page-content="bans"]
    .nl-mod-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .page[data-page-content="bans"]
    .nl-mod-tools-metrics {
        min-height: 0;
    }
}


@media (max-width: 720px) {
    .page[data-page-content="bans"]
    .nl-mod-tools-controls {
        display: grid;
        grid-template-columns: 1fr;
    }

    .page[data-page-content="bans"]
    .nl-mod-tool-field,
    .page[data-page-content="bans"]
    .nl-mod-tool-field:first-child {
        width: 100%;
        min-width: 0;
    }

    .page[data-page-content="bans"]
    .nl-mod-tools-metrics {
        flex-wrap: wrap;
    }
}


/* ==========================================================
   NEWLIFE_MODERATION_OVERVIEW_CSS_V1
   ========================================================== */

.page[data-page-content="bans"]
.nl-moderation-overview {
    padding: 18px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;

    background:
        radial-gradient(
            circle at 7% 0%,
            rgba(117, 67, 194, .10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            rgba(18, 23, 32, .96),
            rgba(13, 18, 26, .96)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 12px 30px rgba(0,0,0,.13);
}


.page[data-page-content="bans"]
.nl-moderation-overview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 15px;
}


.page[data-page-content="bans"]
.nl-moderation-overview-head h2 {
    margin: 0;

    color: #eef2f8;

    font-size: 20px;
    font-weight: 820;
    letter-spacing: -.018em;
}


.page[data-page-content="bans"]
.nl-moderation-overview-head p {
    margin: 5px 0 0;

    color: #7d899a;

    font-size: 12px;
}


.page[data-page-content="bans"]
.nl-moderation-overview-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


.page[data-page-content="bans"]
.nl-moderation-overview-updated {
    color: #707d90;

    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}


.page[data-page-content="bans"]
#moderationOverviewRefresh {
    min-height: 34px;
    padding-inline: 12px;

    font-size: 12px;
}


.page[data-page-content="bans"]
.nl-moderation-metrics {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;
}


.page[data-page-content="bans"]
.nl-moderation-metric {
    position: relative;
    overflow: hidden;

    min-height: 96px;
    padding: 14px;

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;

    background:
        rgba(255,255,255,.018);
}


.page[data-page-content="bans"]
.nl-moderation-metric-main {
    border-color:
        rgba(126, 76, 205, .22);

    background:
        linear-gradient(
            145deg,
            rgba(107, 60, 177, .16),
            rgba(255,255,255,.016)
        );
}


.page[data-page-content="bans"]
.nl-moderation-metric::after {
    content: "";

    position: absolute;
    right: -32px;
    bottom: -42px;

    width: 88px;
    height: 88px;

    border-radius: 50%;

    background:
        rgba(114, 68, 185, .12);

    filter: blur(3px);
}


.page[data-page-content="bans"]
.nl-moderation-metric > span {
    position: relative;
    z-index: 1;

    color: #818da0;

    font-size: 11px;
    font-weight: 750;
}


.page[data-page-content="bans"]
.nl-moderation-metric > strong {
    position: relative;
    z-index: 1;

    display: block;

    margin-top: 7px;

    color: #f1f4f8;

    font-size: 28px;
    font-weight: 850;
    line-height: 1;
}


.page[data-page-content="bans"]
.nl-moderation-metric > small {
    position: relative;
    z-index: 1;

    display: block;

    margin-top: 8px;

    color: #6f7b8d;

    font-size: 11px;
}


@media (max-width: 900px) {
    .page[data-page-content="bans"]
    .nl-moderation-metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 620px) {
    .page[data-page-content="bans"]
    .nl-moderation-overview-head {
        flex-direction: column;
    }

    .page[data-page-content="bans"]
    .nl-moderation-overview-actions {
        width: 100%;
        justify-content: space-between;
    }
}


@media (max-width: 460px) {
    .page[data-page-content="bans"]
    .nl-moderation-metrics {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   NEWLIFE_MODERATION_HISTORY_CSS_V1
   ========================================================== */

body.nl-history-open {
    overflow: hidden;
}


.nl-history-modal[hidden] {
    display: none !important;
}


.nl-history-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
}


.nl-history-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(3, 5, 9, .78);

    backdrop-filter:
        blur(8px);
}


.nl-history-dialog {
    position: relative;
    z-index: 1;

    width: min(980px, 100%);
    max-height: min(820px, 90vh);

    overflow: auto;

    padding: 20px;

    border: 1px solid
        rgba(255,255,255,.09);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(118, 70, 192, .10),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #121821,
            #0d1219
        );

    box-shadow:
        0 28px 90px
        rgba(0,0,0,.55);
}


.nl-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 18px;
}


.nl-history-header h2 {
    margin: 0;

    color: #eef2f7;

    font-size: 22px;
    font-weight: 820;
}


.nl-history-header p {
    margin: 6px 0 0;

    color: #7e899b;

    font-size: 13px;
}


.nl-history-close {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border: 1px solid
        rgba(255,255,255,.08);

    border-radius: 10px;

    background:
        rgba(255,255,255,.025);

    color: #a8b1bf;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}


.nl-history-close:hover {
    background:
        rgba(255,255,255,.055);

    color: #fff;
}


.nl-history-search {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 10px;
    align-items: end;

    margin-bottom: 12px;
}


.nl-history-search label {
    display: flex;
    flex-direction: column;
    gap: 6px;

    color: #7f8b9c;

    font-size: 11px;
    font-weight: 750;
}


.nl-history-search input {
    min-height: 44px;

    padding: 0 13px;

    border: 1px solid
        rgba(255,255,255,.08);

    border-radius: 10px;

    background:
        rgba(5,8,13,.48);

    color: #e4e9f0;

    font-size: 14px;
}


.nl-history-search input:focus {
    outline: none;

    border-color:
        rgba(133, 80, 219, .5);

    box-shadow:
        0 0 0 3px
        rgba(112, 66, 184, .10);
}


.nl-history-search button {
    min-height: 44px;
}


.nl-history-status {
    min-height: 21px;

    margin-bottom: 14px;

    color: #7c8899;

    font-size: 12px;
}


.nl-history-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 9px;

    margin-bottom: 14px;
}


.nl-history-summary article {
    padding: 11px 12px;

    border: 1px solid
        rgba(255,255,255,.06);

    border-radius: 11px;

    background:
        rgba(255,255,255,.018);
}


.nl-history-summary span {
    display: block;

    color: #768294;

    font-size: 11px;
    font-weight: 700;
}


.nl-history-summary strong {
    display: block;

    margin-top: 5px;

    color: #eef2f7;

    font-size: 23px;
    font-weight: 850;
}


.nl-history-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}


.nl-history-entry {
    padding: 13px 14px;

    border: 1px solid
        rgba(255,255,255,.06);

    border-radius: 12px;

    background:
        rgba(255,255,255,.018);
}


.nl-history-entry-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 11px;
}


.nl-history-entry-title {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 9px;
}


.nl-history-entry-source {
    min-height: 23px;
    padding: 0 7px;

    display: inline-flex;
    align-items: center;

    border: 1px solid
        rgba(130, 79, 209, .20);

    border-radius: 7px;

    background:
        rgba(112, 65, 183, .10);

    color: #a38acf;

    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}


.nl-history-entry-title strong {
    color: #e5eaf1;

    font-size: 14px;
}


.nl-history-entry-status {
    min-height: 25px;
    padding: 0 8px;

    display: inline-flex;
    align-items: center;

    border-radius: 7px;

    background:
        rgba(255,255,255,.035);

    color: #8995a6;

    font-size: 11px;
    font-weight: 750;
}


.nl-history-entry-status.is-active {
    background:
        rgba(62, 161, 105, .10);

    color: #76c899;
}


.nl-history-entry-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}


.nl-history-entry-grid > div {
    min-width: 0;
}


.nl-history-entry-grid span {
    display: block;

    margin-bottom: 4px;

    color: #687486;

    font-size: 10px;
    font-weight: 750;
}


.nl-history-entry-grid strong {
    display: block;

    overflow-wrap: anywhere;

    color: #aeb8c6;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}


/* Clickable SteamID columns */

#bansBody td:nth-child(2),
#engineBansBody td:nth-child(2),
#commsBody td:nth-child(3) {
    cursor: pointer;
}


#bansBody td:nth-child(2):hover,
#engineBansBody td:nth-child(2):hover,
#commsBody td:nth-child(3):hover {
    color: #bda8e5;
}


@media (max-width: 760px) {
    .nl-history-modal {
        padding: 10px;
    }

    .nl-history-dialog {
        max-height: 94vh;

        padding: 16px;
        border-radius: 15px;
    }

    .nl-history-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .nl-history-entry-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 480px) {
    .nl-history-search {
        grid-template-columns: 1fr;
    }

    .nl-history-entry-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   NEWLIFE_MODERATION_HISTORY_ACTIONS_CSS_V2
   ========================================================== */

.nl-history-entry-actions {
    margin-top: 12px;
    padding-top: 11px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;

    border-top:
        1px solid rgba(255,255,255,.055);
}


.nl-history-action {
    min-height: 31px;
    padding: 0 10px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            rgba(35,44,58,.94),
            rgba(25,32,43,.94)
        );

    color: #dce3ec;

    font-size: 11px;
    font-weight: 750;

    cursor: pointer;

    transition:
        transform .14s ease,
        border-color .14s ease,
        background .14s ease;
}


.nl-history-action:hover:not(:disabled) {
    transform:
        translateY(-1px);

    border-color:
        rgba(139,92,246,.25);
}


.nl-history-action.danger {
    border-color:
        rgba(225,83,101,.18);

    background:
        rgba(126,42,55,.12);

    color:
        #e5a0aa;
}


.nl-history-action.danger:hover:not(:disabled) {
    border-color:
        rgba(225,83,101,.34);

    background:
        rgba(150,48,64,.18);
}


.nl-history-action:disabled {
    opacity: .48;
    cursor: wait;
}


@media (max-width: 600px) {
    .nl-history-entry-actions {
        justify-content: stretch;
    }

    .nl-history-action {
        flex: 1 1 auto;
    }
}


/* ==========================================================
   NEWLIFE_MODERATION_PUNISH_CSS_V1
   ========================================================== */

.nl-history-punish {
    margin: 0 0 14px;

    border:
        1px solid rgba(132, 82, 214, .16);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(105, 61, 174, .07),
            rgba(255,255,255,.012)
        );

    overflow: hidden;
}


.nl-history-punish > summary {
    min-height: 48px;
    padding: 0 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    cursor: pointer;
    list-style: none;

    color: #dce3ed;

    font-size: 13px;
    font-weight: 800;
}


.nl-history-punish > summary::-webkit-details-marker {
    display: none;
}


.nl-history-punish > summary::before {
    content: "+";

    width: 22px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    margin-right: -2px;

    border-radius: 7px;

    background:
        rgba(119, 72, 192, .13);

    color: #a891d2;

    font-size: 17px;
}


.nl-history-punish[open] > summary::before {
    content: "−";
}


.nl-history-punish > summary > span {
    margin-right: auto;
}


.nl-history-punish > summary small {
    color: #7e8999;

    font-size: 11px;
    font-weight: 700;
}


.nl-history-punish > summary small.is-online {
    color: #73c997;
}


.nl-history-punish > summary small.is-offline {
    color: #8b96a6;
}


.nl-history-punish-body {
    padding: 14px;

    border-top:
        1px solid rgba(255,255,255,.055);
}


.nl-history-punish-grid {
    display: grid;

    grid-template-columns:
        minmax(190px, .8fr)
        minmax(150px, .55fr)
        minmax(260px, 1.4fr);

    gap: 10px;
}


.nl-history-punish-grid label {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 6px;
}


.nl-history-punish-grid label > span {
    color: #758194;

    font-size: 11px;
    font-weight: 750;
}


.nl-history-punish-grid input,
.nl-history-punish-grid select {
    width: 100%;
    min-height: 42px;

    padding: 0 11px;

    border:
        1px solid rgba(255,255,255,.075);

    border-radius: 9px;

    background:
        rgba(5,8,13,.48);

    color: #dce3ec;

    font-size: 12px;
}


.nl-history-punish-grid input:focus,
.nl-history-punish-grid select:focus {
    outline: none;

    border-color:
        rgba(132,80,218,.48);

    box-shadow:
        0 0 0 3px
        rgba(115,68,189,.09);
}


.nl-history-punish-footer {
    margin-top: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}


.nl-history-punish-footer > div {
    min-width: 0;
}


.nl-history-punish-footer strong {
    display: block;

    color: #bbc4d0;

    font-size: 12px;
}


.nl-history-punish-footer small {
    display: block;

    margin-top: 4px;

    color: #778395;

    font-size: 11px;
    line-height: 1.4;
}


#moderationPunishSubmit {
    min-width: 110px;
    min-height: 38px;

    flex: 0 0 auto;
}


#moderationPunishSubmit:disabled {
    opacity: .43;
    cursor: not-allowed;
}


.nl-history-punish-status {
    min-height: 18px;

    margin-top: 10px;

    color: #7c8899;

    font-size: 11px;
    font-weight: 650;
}


.nl-history-punish-status.is-success {
    color: #72c997;
}


.nl-history-punish-status.is-error {
    color: #dd8793;
}


@media (max-width: 760px) {
    .nl-history-punish-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .nl-history-punish-reason {
        grid-column:
            1 / -1;
    }
}


@media (max-width: 520px) {
    .nl-history-punish-grid {
        grid-template-columns:
            1fr;
    }

    .nl-history-punish-reason {
        grid-column:
            auto;
    }

    .nl-history-punish-footer {
        align-items: stretch;
        flex-direction: column;
    }

    #moderationPunishSubmit {
        width: 100%;
    }
}


/* ==========================================================
   NEWLIFE_ADMIN_PROTECTION_UI_CSS_V1
   ========================================================== */

.nl-admin-protection-badge {
    min-height: 23px;
    padding: 0 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    margin-left: 8px;

    border:
        1px solid rgba(145, 103, 220, .24);

    border-radius: 7px;

    background:
        rgba(116, 72, 190, .12);

    color: #b6a0de;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    white-space: nowrap;
}


.nl-protected-server-admin {
    border-color:
        rgba(139, 94, 210, .14) !important;
}


.nl-protected-server-admin
[data-nl-admin-protected="1"] {
    opacity: .32 !important;

    filter:
        saturate(.45);

    cursor:
        not-allowed !important;

    pointer-events:
        none;
}


.nl-history-admin-protection {
    width: fit-content;
    min-height: 25px;

    margin-top: 7px;
    padding: 0 9px;

    display: inline-flex;
    align-items: center;

    border:
        1px solid rgba(145, 103, 220, .22);

    border-radius: 8px;

    background:
        rgba(116, 72, 190, .11);

    color:
        #b9a4df;

    font-size: 10px;
    font-weight: 800;
}


.nl-history-admin-protection[hidden] {
    display: none !important;
}


.nl-history-punish.nl-admin-target-protected {
    border-color:
        rgba(145, 103, 220, .20);
}


.nl-history-punish.nl-admin-target-protected
> summary::after {
    content:
        "Защищён";

    min-height: 22px;
    padding: 0 7px;

    display: inline-flex;
    align-items: center;

    border-radius: 7px;

    background:
        rgba(116, 72, 190, .11);

    color:
        #ad96d6;

    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
}


@media (max-width: 620px) {
    .nl-admin-protection-badge {
        margin-left: 4px;

        font-size: 9px;
    }
}


/* ==========================================================
   NEWLIFE_AUDIT_MODERATION_CSS_V1
   ========================================================== */

.page[data-page-content="audit"] {
    --audit-border:
        rgba(255,255,255,.065);

    --audit-muted:
        #778396;

    --audit-purple:
        #9a7bd4;
}


.page[data-page-content="audit"]
.panel {
    overflow: visible;
}


.nl-audit-summary {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 14px;
}


.nl-audit-summary article {
    min-width: 0;

    padding: 13px 14px;

    border:
        1px solid var(--audit-border);

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.022),
            rgba(255,255,255,.008)
        );
}


.nl-audit-summary span {
    display: block;

    color:
        #7c8798;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .055em;
}


.nl-audit-summary strong {
    display: block;

    margin-top: 5px;

    color:
        #e2e7ee;

    font-size: 22px;
    line-height: 1;
}


.nl-audit-summary small {
    display: block;

    margin-top: 5px;

    color:
        #687485;

    font-size: 10px;
}


.nl-audit-toolbar {
    display: grid;

    grid-template-columns:
        minmax(260px, 1fr)
        minmax(175px, .38fr)
        minmax(165px, .34fr)
        auto;

    align-items: end;

    gap: 9px;

    margin-bottom: 9px;
}


.nl-audit-toolbar label {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 6px;
}


.nl-audit-toolbar label > span {
    color:
        #748093;

    font-size: 10px;
    font-weight: 750;
}


.nl-audit-toolbar input,
.nl-audit-toolbar select {
    width: 100%;
    min-height: 40px;

    padding: 0 11px;

    border:
        1px solid var(--audit-border);

    border-radius: 9px;

    outline: none;

    background:
        rgba(5,8,13,.46);

    color:
        #d8dee8;

    font-size: 12px;
}


.nl-audit-toolbar input:focus,
.nl-audit-toolbar select:focus {
    border-color:
        rgba(142,95,220,.42);

    box-shadow:
        0 0 0 3px
        rgba(123,75,198,.075);
}


#nlAuditRefresh {
    min-height: 40px;
}


.nl-audit-filter-status {
    min-height: 29px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 0 2px 8px;

    color:
        #687485;

    font-size: 10px;
}


.nl-audit-filter-status
span:first-child {
    color:
        #929cab;

    font-weight: 750;
}


.audit-list {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.nl-audit-entry {
    position: relative;

    border:
        1px solid var(--audit-border);

    border-radius: 11px;

    background:
        rgba(7,10,16,.32);

    overflow: hidden;

    transition:
        border-color .14s ease,
        background .14s ease;
}


.nl-audit-entry:hover,
.nl-audit-entry[open] {
    border-color:
        rgba(145,98,218,.15);

    background:
        rgba(12,16,24,.54);
}


.nl-audit-entry > summary {
    min-height: 67px;

    padding: 11px 13px;

    display: grid;

    grid-template-columns:
        31px
        minmax(0, 1fr)
        minmax(145px, auto);

    gap: 11px;

    align-items: center;

    list-style: none;
    cursor: pointer;
}


.nl-audit-entry > summary::-webkit-details-marker {
    display: none;
}


.nl-audit-event-icon {
    width: 29px;
    height: 29px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(96,184,132,.18);

    border-radius: 9px;

    background:
        rgba(58,139,91,.09);

    color:
        #75c79a;

    font-size: 12px;
    font-weight: 900;
}


.nl-audit-entry.result-failed
.nl-audit-event-icon {
    border-color:
        rgba(221,91,108,.2);

    background:
        rgba(153,45,61,.1);

    color:
        #dd8995;
}


.nl-audit-entry.result-blocked
.nl-audit-event-icon {
    border-color:
        rgba(168,119,226,.24);

    background:
        rgba(112,68,168,.12);

    color:
        #bb99e3;
}


.nl-audit-event-main {
    min-width: 0;
}


.nl-audit-event-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
}


.nl-audit-event-title strong {
    color:
        #dfe5ed;

    font-size: 12px;
    font-weight: 800;
}


.nl-audit-result {
    min-height: 20px;

    padding: 0 6px;

    display: inline-flex;
    align-items: center;

    border-radius: 6px;

    font-size: 9px;
    font-weight: 850;
}


.nl-audit-result.success {
    background:
        rgba(66,150,98,.09);

    color:
        #73c895;
}


.nl-audit-result.failed {
    background:
        rgba(159,52,68,.1);

    color:
        #dc8793;
}


.nl-audit-result.blocked {
    background:
        rgba(115,72,177,.13);

    color:
        #b89bdd;
}


.nl-audit-target {
    min-width: 0;

    margin-top: 5px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    color:
        #7a8697;

    font-size: 10px;
}


.nl-audit-target strong {
    color:
        #abb4c0;

    font-weight: 700;
}


.nl-audit-target code {
    padding: 2px 5px;

    border-radius: 5px;

    background:
        rgba(255,255,255,.035);

    color:
        #8793a4;

    font-size: 9px;
}


.nl-audit-event-side {
    min-width: 145px;

    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 2px;

    text-align: right;
}


.nl-audit-event-side strong {
    color:
        #aeb7c4;

    font-size: 11px;
}


.nl-audit-event-side span,
.nl-audit-event-side time {
    color:
        #667284;

    font-size: 9px;
}


.nl-audit-entry-body {
    padding:
        0 13px 13px 55px;

    border-top:
        1px solid rgba(255,255,255,.045);
}


.nl-audit-detail-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 8px;

    padding-top: 12px;
}


.nl-audit-detail-grid > div {
    min-width: 0;

    padding: 8px 9px;

    border:
        1px solid rgba(255,255,255,.045);

    border-radius: 8px;

    background:
        rgba(255,255,255,.015);
}


.nl-audit-detail-grid span {
    display: block;

    color:
        #667284;

    font-size: 9px;
}


.nl-audit-detail-grid strong {
    display: block;

    margin-top: 3px;

    color:
        #aeb7c4;

    font-size: 10px;
    font-weight: 700;

    overflow-wrap: anywhere;
}


.nl-audit-technical {
    margin-top: 9px;
}


.nl-audit-technical > summary {
    width: fit-content;

    color:
        #76668f;

    cursor: pointer;

    font-size: 9px;
    font-weight: 750;
}


.nl-audit-technical pre {
    max-height: 300px;

    margin: 8px 0 0;

    padding: 10px;

    overflow: auto;

    border:
        1px solid rgba(255,255,255,.045);

    border-radius: 8px;

    background:
        rgba(3,5,9,.45);

    color:
        #8894a4;

    font-size: 9px;
    line-height: 1.55;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


.audit-integrity.ok {
    color:
        #70c693;
}


.audit-integrity.bad {
    color:
        #dc8591;
}


.nl-audit-empty,
.nl-audit-loading {
    padding: 28px 16px;

    border:
        1px dashed rgba(255,255,255,.07);

    border-radius: 11px;

    color:
        #758092;

    text-align: center;

    font-size: 11px;
}


.nl-audit-empty.error {
    color:
        #d68590;
}


.nl-audit-entry.kind-ban {
    border-left-color:
        rgba(216,89,106,.25);
}


.nl-audit-entry.kind-mute,
.nl-audit-entry.kind-chat {
    border-left-color:
        rgba(111,137,211,.26);
}


.nl-audit-entry.kind-protect {
    border-left-color:
        rgba(153,99,223,.32);
}


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

    .nl-audit-toolbar {
        grid-template-columns:
            minmax(220px, 1fr)
            1fr
            1fr;
    }

    #nlAuditRefresh {
        grid-column:
            1 / -1;
    }

    .nl-audit-detail-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }
}


@media (max-width: 680px) {
    .nl-audit-summary {
        grid-template-columns:
            1fr 1fr;
    }

    .nl-audit-toolbar {
        grid-template-columns:
            1fr;
    }

    #nlAuditRefresh {
        grid-column:
            auto;
    }

    .nl-audit-filter-status {
        align-items: flex-start;
        flex-direction: column;
    }

    .nl-audit-entry > summary {
        grid-template-columns:
            29px minmax(0,1fr);
    }

    .nl-audit-event-side {
        grid-column:
            2;

        min-width: 0;

        align-items: flex-start;

        text-align: left;
    }

    .nl-audit-entry-body {
        padding:
            0 10px 11px;
    }

    .nl-audit-detail-grid {
        grid-template-columns:
            1fr;
    }
}


/* ==========================================================
   NEWLIFE_FILES_V2_CSS
   ========================================================== */

.files-toolbar-v2 {
    display: grid;
    grid-template-columns:
        minmax(240px, 1fr)
        minmax(160px, 220px)
        auto;
    gap: 10px;
    align-items: center;

    margin: 0 0 14px;
}


.files-search-v2 input,
.files-sort-v2 {
    width: 100%;
    min-height: 40px;

    border:
        1px solid
        var(--border);

    border-radius: 10px;

    background:
        rgba(7, 10, 16, .78);

    color:
        var(--text);

    outline: none;
}


.files-search-v2 input {
    padding:
        0 13px;
}


.files-sort-v2 {
    padding:
        0 11px;
}


.files-search-v2 input:focus,
.files-sort-v2:focus {
    border-color:
        var(--accent-2);

    box-shadow:
        0 0 0 3px
        rgba(128, 90, 255, .10);
}


.files-count-v2 {
    min-width: 86px;

    color:
        var(--muted);

    font-size: 10px;

    text-align: right;
}


.file-header-v2,
.file-row-v3 {
    grid-template-columns:
        minmax(240px, 1fr)
        110px
        170px
        minmax(190px, auto);
}


.file-header-v2 {
    display: grid;
    gap: 12px;

    padding:
        6px 4px 9px;

    border-bottom:
        1px solid
        var(--border);

    color:
        var(--muted);

    font-size: 9px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing:
        .06em;
}


.file-header-v2
span:last-child {
    text-align: right;
}


.file-name-box-v2 {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.file-name-box-v2
.file-name-v3 {
    width: 100%;

    font-size: 12px;
    font-weight: 600;
}


.file-type-v2 {
    padding-left: 4px;

    color:
        var(--muted);

    font-size: 9px;
}


.file-size-v2,
.file-modified-v2 {
    color:
        var(--muted);

    font-size: 10px;
}


.files-readonly-v2 {
    color:
        var(--muted);

    font-size: 9px;
}


.files-empty-v2 {
    padding:
        26px 10px;

    color:
        var(--muted);

    text-align: center;

    font-size: 11px;
}


.files-table-v3
.file-row-v3 {
    transition:
        background .16s ease,
        border-color .16s ease;
}


.files-table-v3
.file-row-v3:hover {
    background:
        rgba(255, 255, 255, .018);
}


@media (max-width: 900px) {

    .files-toolbar-v2 {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(150px, .55fr);
    }

    .files-count-v2 {
        grid-column:
            1 / -1;

        text-align: left;
    }


    .file-header-v2 {
        display: none;
    }


    .file-header-v2,
    .file-row-v3 {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }


    .file-modified-v2 {
        grid-column:
            1 / 2;
    }


    .file-row-v3
    > .stage4-actions {
        grid-column:
            1 / -1;

        justify-content:
            flex-start;
    }
}


@media (max-width: 560px) {

    .files-toolbar-v2 {
        grid-template-columns:
            1fr;
    }

    .files-count-v2 {
        grid-column:
            auto;
    }

    .file-name-box-v2
    .file-name-v3 {
        font-size: 11px;
    }
}



/* ==========================================================
   NEWLIFE_FILE_PREVIEW_V2_CSS
   ========================================================== */

.file-preview-meta-v2 {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 10px;
}


.file-preview-meta-item-v2,
.file-preview-secret-v2 {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    min-height: 30px;

    padding:
        5px 9px;

    border:
        1px solid
        var(--border);

    border-radius:
        8px;

    background:
        rgba(255,255,255,.018);
}


.file-preview-meta-item-v2
strong {
    color:
        var(--muted);

    font-size: 9px;
    font-weight: 500;
}


.file-preview-meta-item-v2
code {
    color:
        var(--text);

    font-size: 9px;
}


.file-preview-hash-v2 {
    max-width: 430px;
}


.file-preview-hash-v2
code {
    overflow: hidden;

    white-space: nowrap;

    text-overflow:
        ellipsis;
}


.file-preview-secret-v2 {
    color:
        #e7bd69;

    font-size:
        9px;
}


.file-preview-tools-v2 {
    display: flex;
    justify-content:
        flex-end;

    margin-bottom:
        8px;
}


.file-code-v2 {
    display: grid;

    grid-template-columns:
        max-content
        minmax(0, 1fr);

    max-height:
        68vh;

    overflow:
        auto;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    background:
        #05080c;
}


.file-line-numbers-v2,
.file-code-v2
.file-preview-v3 {
    margin: 0;

    border: 0;
    border-radius: 0;

    font-family:
        "Cascadia Code",
        Consolas,
        monospace;

    font-size:
        11px;

    line-height:
        1.65;

    white-space:
        pre;

    tab-size:
        4;
}


.file-line-numbers-v2 {
    position: sticky;

    left: 0;

    z-index: 1;

    min-width:
        46px;

    padding:
        14px 10px;

    border-right:
        1px solid
        var(--border);

    background:
        #090d14;

    color:
        var(--muted);

    text-align:
        right;

    user-select:
        none;

    pointer-events:
        none;
}


.file-code-v2
.file-preview-v3 {
    min-width:
        max-content;

    max-height:
        none;

    overflow:
        visible;

    padding:
        14px 16px;

    background:
        transparent;

    color:
        #d9e0ea;

    word-break:
        normal;

    overflow-wrap:
        normal;
}


.file-code-v2.is-unreadable {
    display: block;
}


.file-code-v2.is-unreadable
.file-preview-v3 {
    min-width: 0;

    white-space:
        pre-wrap;

    color:
        var(--muted);
}


@media (max-width: 700px) {

    .file-preview-meta-v2 {
        gap: 5px;
    }


    .file-preview-meta-item-v2 {
        max-width:
            100%;
    }


    .file-preview-hash-v2 {
        width:
            100%;
    }


    .file-line-numbers-v2,
    .file-code-v2
    .file-preview-v3 {
        font-size:
            10px;

        line-height:
            1.65;
    }


    .file-line-numbers-v2 {
        min-width:
            40px;

        padding:
            12px 8px;
    }


    .file-code-v2
    .file-preview-v3 {
        padding:
            12px 13px;
    }
}



/* ==========================================================
   NEWLIFE_FILE_JUMP_V1_CSS
   ========================================================== */

.file-preview-tools-v2 {
    gap: 8px;
    align-items: center;
}


.file-jump-v2 {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-right:
        auto;
}


.file-jump-v2 input {
    width: 105px;
    min-height: 38px;

    padding:
        0 11px;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;

    background:
        rgba(7, 10, 16, .82);

    color:
        var(--text);

    outline:
        none;

    font-size:
        11px;
}


.file-jump-v2 input:focus {
    border-color:
        var(--accent-2);

    box-shadow:
        0 0 0 3px
        rgba(128, 90, 255, .10);
}


/*
 * Chrome/Edge number-field arrows only waste
 * space here.
 */
.file-jump-v2
input::-webkit-inner-spin-button,
.file-jump-v2
input::-webkit-outer-spin-button {
    margin: 0;
}


.file-code-v2 {
    position: relative;
}


/*
 * Temporary target-line highlight.
 */
.file-code-v2::after {
    content: '';

    position: absolute;

    top:
        var(
            --file-jump-y-v2,
            0px
        );

    left:
        var(
            --file-jump-left-v2,
            0px
        );

    right: 0;

    height:
        var(
            --file-jump-h-v2,
            0px
        );

    z-index: 3;

    pointer-events: none;

    opacity: 0;

    background:
        rgba(132, 94, 255, .16);

    box-shadow:
        inset 3px 0 0
        var(--accent-2);

    transition:
        opacity .20s ease;
}


.file-code-v2.file-jump-active-v2::after {
    opacity: 1;
}


.file-code-v2
.file-preview-v3 {
    position: relative;
    z-index: 4;
}


.file-code-v2
.file-line-numbers-v2 {
    z-index: 5;
}


@media (max-width: 560px) {

    .file-preview-tools-v2 {
        align-items:
            stretch;

        flex-wrap:
            wrap;
    }


    .file-jump-v2 {
        width:
            100%;

        margin-right:
            0;
    }


    .file-jump-v2 input {
        min-width:
            0;

        width:
            auto;

        flex:
            1;
    }
}



/* ==========================================================
   NEWLIFE_FILE_SYNTAX_V1_CSS
   Preview-only syntax highlighting
   ========================================================== */

.file-preview-v3
.syn-comment {
    color:
        #778392;

    font-style:
        italic;
}


.file-preview-v3
.syn-string {
    color:
        #a9d18e;
}


.file-preview-v3
.syn-number {
    color:
        #d5a6ff;
}


.file-preview-v3
.syn-keyword {
    color:
        #91b7ff;

    font-weight:
        600;
}


.file-preview-v3
.syn-preproc {
    color:
        #e1a96f;
}


.file-preview-v3
.syn-key {
    color:
        #8fcde5;
}


.file-preview-v3
.syn-section {
    color:
        #d4b2ff;

    font-weight:
        600;
}


.file-preview-v3
.syn-punct {
    color:
        #8e9aaa;
}


.file-preview-v3
.syn-color {
    color:
        #e6b17a;
}


.file-preview-v3
.syn-tag {
    color:
        #8ebcff;
}


.file-preview-v3
.syn-entity {
    color:
        #c79df4;
}


/*
 * Preserve exactly the same line geometry as the
 * unhighlighted preview so line-number navigation
 * continues to calculate correctly.
 */
.file-preview-v3
[class^="syn-"] {
    font-family:
        inherit;

    font-size:
        inherit;

    line-height:
        inherit;
}



/* ==========================================================
   NEWLIFE_FILE_SEARCH_V1_CSS
   ========================================================== */

.file-search-preview-v2 {
    display: flex;
    align-items: center;

    gap: 6px;

    min-width: 0;

    margin-right: 4px;
}


.file-search-preview-v2 input {
    width: 210px;
    min-height: 38px;

    padding:
        0 11px;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;

    background:
        rgba(7, 10, 16, .82);

    color:
        var(--text);

    outline:
        none;

    font-size:
        11px;
}


.file-search-preview-v2 input:focus {
    border-color:
        var(--accent-2);

    box-shadow:
        0 0 0 3px
        rgba(128, 90, 255, .10);
}


.file-search-count-v2 {
    min-width: 52px;

    color:
        var(--muted);

    font-size:
        9px;

    text-align:
        center;

    white-space:
        nowrap;
}


.file-search-nav-v2 {
    min-width:
        38px;

    padding-left:
        10px;

    padding-right:
        10px;

    font-size:
        13px;
}


@media (max-width: 900px) {

    .file-preview-tools-v2 {
        flex-wrap:
            wrap;
    }


    .file-search-preview-v2 {
        order:
            1;

        flex:
            1 1 100%;
    }


    .file-search-preview-v2 input {
        width:
            auto;

        min-width:
            0;

        flex:
            1;
    }


    .file-jump-v2 {
        order:
            2;
    }


    #filePreviewCopy {
        order:
            3;
    }
}


@media (max-width: 560px) {

    .file-search-preview-v2 {
        display:
            grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto
            auto
            auto;

        width:
            100%;
    }


    .file-search-preview-v2 input {
        width:
            100%;
    }
}



/* ==========================================================
   NEWLIFE_TRASH_V2_CSS
   ========================================================== */

.trash-toolbar-v2 {
    display: grid;

    grid-template-columns:
        minmax(240px, 1fr)
        minmax(140px, 180px)
        minmax(150px, 190px)
        auto;

    gap: 8px;

    align-items: center;

    margin-bottom: 10px;
}


.trash-search-v2 input,
.trash-select-v2 {
    width: 100%;

    min-height: 40px;

    border:
        1px solid
        var(--border);

    border-radius: 10px;

    background:
        rgba(7, 10, 16, .82);

    color:
        var(--text);

    outline: none;

    font-size: 11px;
}


.trash-search-v2 input {
    padding: 0 12px;
}


.trash-select-v2 {
    padding: 0 10px;
}


.trash-search-v2 input:focus,
.trash-select-v2:focus {
    border-color:
        var(--accent-2);

    box-shadow:
        0 0 0 3px
        rgba(128, 90, 255, .10);
}


.trash-summary-v2 {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px 14px;

    min-height: 24px;

    margin-bottom: 8px;

    color:
        var(--muted);

    font-size: 10px;
}


.trash-limit-v2 {
    color:
        #d1ad6d;
}


.trash-list-v3 {
    gap: 8px;
}


.trash-row-v2 {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 16px;

    align-items: center;

    min-height: 76px;

    padding: 12px 13px;

    border:
        1px solid
        var(--border);

    border-radius: 11px;

    background:
        rgba(255,255,255,.012);

    transition:
        background .16s ease,
        border-color .16s ease;
}


.trash-row-v2:hover {
    background:
        rgba(255,255,255,.025);

    border-color:
        rgba(151,116,255,.22);
}


.trash-main-v2 {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.trash-title-line-v2 {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 8px;
}


.trash-type-badge-v2 {
    flex: 0 0 auto;

    padding: 3px 7px;

    border:
        1px solid
        rgba(151,116,255,.20);

    border-radius: 999px;

    background:
        rgba(128,90,255,.08);

    color:
        var(--accent-2);

    font-size: 9px;

    font-weight: 600;
}


.trash-name-v2 {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color:
        var(--text);

    font-size: 12px;

    font-weight: 600;
}


.trash-path-v2 {
    display: block;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color:
        var(--muted);

    font-family:
        "Cascadia Code",
        Consolas,
        monospace;

    font-size: 9px;
}


.trash-meta-v2 {
    display: flex;

    flex-wrap: wrap;

    gap: 5px 14px;

    color:
        var(--muted);

    font-size: 9px;
}


.trash-actions-v2 {
    display: flex;

    align-items: center;

    justify-content:
        flex-end;
}


.trash-readonly-v2 {
    color:
        var(--muted);

    font-size: 9px;
}


.trash-empty-v2 {
    padding: 30px 12px;

    color:
        var(--muted);

    text-align: center;

    font-size: 11px;
}


@media (max-width: 900px) {

    .trash-toolbar-v2 {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(140px, .45fr);
    }


    .trash-toolbar-v2
    #trashSort {
        grid-column:
            1 / 2;
    }


    .trash-toolbar-v2
    #trashRefresh {
        grid-column:
            2 / 3;
    }
}


@media (max-width: 600px) {

    .trash-toolbar-v2 {
        grid-template-columns:
            1fr;
    }


    .trash-toolbar-v2
    #trashSort,
    .trash-toolbar-v2
    #trashRefresh {
        grid-column:
            auto;
    }


    .trash-row-v2 {
        grid-template-columns:
            1fr;

        gap: 10px;
    }


    .trash-actions-v2 {
        justify-content:
            flex-start;
    }


    .trash-name-v2 {
        font-size: 11px;
    }
}



/* ==========================================================
   NEWLIFE_FILE_DRAGDROP_V1_CSS
   ========================================================== */

.file-drop-overlay-v2 {
    position:
        fixed;

    inset:
        0;

    z-index:
        9998;

    display:
        grid;

    place-items:
        center;

    padding:
        24px;

    background:
        rgba(7, 7, 12, .64);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    pointer-events:
        none;
}


.file-drop-overlay-v2[hidden] {
    display:
        none;
}


.file-drop-card-v2 {
    width:
        min(
            520px,
            calc(100vw - 32px)
        );

    min-height:
        220px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        30px;

    text-align:
        center;

    border:
        1px dashed
        rgba(160, 128, 255, .58);

    border-radius:
        18px;

    background:
        rgba(18, 16, 29, .96);

    box-shadow:
        0 24px 80px
        rgba(0, 0, 0, .42);
}


.file-drop-icon-v2 {
    display:
        grid;

    place-items:
        center;

    width:
        52px;

    height:
        52px;

    margin-bottom:
        4px;

    border-radius:
        14px;

    background:
        rgba(132, 92, 255, .13);

    border:
        1px solid
        rgba(160, 128, 255, .26);

    font-size:
        28px;

    line-height:
        1;
}


.file-drop-card-v2 strong {
    font-size:
        17px;

    font-weight:
        700;
}


.file-drop-card-v2 span {
    color:
        var(--muted);

    font-size:
        12px;

    overflow-wrap:
        anywhere;
}


.file-drop-card-v2 code {
    display:
        block;

    max-width:
        100%;

    margin-top:
        4px;

    padding:
        6px 10px;

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, .04);

    color:
        var(--text);

    font-size:
        11px;

    overflow-wrap:
        anywhere;
}


@media (max-width: 600px) {

    .file-drop-card-v2 {
        min-height:
            180px;

        padding:
            22px;
    }
}



/* ==========================================================
   NEWLIFE_FILE_UPLOAD_PROGRESS_V1_CSS
   ========================================================== */

.file-upload-progress-v2 {
    width:
        100%;

    margin-top:
        10px;
}


.file-upload-progress-v2[hidden] {
    display:
        none;
}


.file-upload-progress-head-v2 {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        8px;
}


.file-upload-progress-head-v2 strong {
    font-size:
        15px;

    font-variant-numeric:
        tabular-nums;
}


.file-upload-progress-head-v2 span {
    color:
        var(--muted);

    font-size:
        11px;

    font-variant-numeric:
        tabular-nums;
}


.file-upload-progress-track-v2 {
    position:
        relative;

    width:
        100%;

    height:
        8px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .07);

    border:
        1px solid
        rgba(255, 255, 255, .04);
}


.file-upload-progress-track-v2 span {
    display:
        block;

    width:
        0;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            rgba(126, 84, 255, .88),
            rgba(177, 139, 255, .96)
        );

    transition:
        width .14s linear;
}


.file-upload-current-v2 {
    margin-top:
        7px;

    color:
        var(--muted);

    font-size:
        10px;

    text-align:
        left;

    font-variant-numeric:
        tabular-nums;
}


@media (max-width: 600px) {

    .file-upload-progress-head-v2 {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            3px;
    }
}



/* ==========================================================
   NEWLIFE_FILE_UPLOAD_CANCEL_FINAL_V1_CSS
   ========================================================== */

.file-upload-cancel-row-v2 {
    display:
        flex;

    justify-content:
        flex-end;

    width:
        100%;

    margin-top:
        12px;
}


.file-upload-cancel-v2 {
    min-width:
        158px;
}


.file-upload-cancel-v2:disabled {
    opacity:
        .55;

    cursor:
        default;
}


@media (max-width: 600px) {

    .file-upload-cancel-row-v2 {
        justify-content:
            stretch;
    }


    .file-upload-cancel-v2 {
        width:
            100%;
    }
}



/* ==========================================================
   NEWLIFE_UPLOAD_CANCEL_CLICK_LAYOUT_FIX_V1
   ========================================================== */

/*
 * Drag overlay historically ignores mouse interaction.
 * While it is visible we need pointer events so the
 * cancel button is actually clickable.
 */
#fileDropOverlay[aria-hidden="false"] {
    pointer-events:
        auto !important;
}


/*
 * Keep the action visually aligned with the progress block.
 */
.file-upload-cancel-row-v2 {
    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center !important;

    width:
        100%;

    margin-top:
        10px !important;

    pointer-events:
        auto !important;
}


.file-upload-cancel-v2 {
    width:
        auto !important;

    min-width:
        180px;

    max-width:
        240px;

    margin:
        0 auto;

    pointer-events:
        auto !important;

    cursor:
        pointer;
}


.file-upload-cancel-v2:disabled {
    cursor:
        default;
}


@media (max-width: 600px) {

    .file-upload-cancel-v2 {
        width:
            100% !important;

        max-width:
            none;
    }
}


/* NEWLIFE_UPLOAD_CANCEL_LAYOUT_V2 */

.file-upload-cancel-row-v2 {
    justify-content: flex-end !important;
    margin-top: 7px !important;
}

.file-upload-cancel-v2 {
    width: auto !important;
    min-width: 158px;
    max-width: 190px;
    margin: 0 !important;
}

@media (max-width: 600px) {
    .file-upload-cancel-row-v2 {
        justify-content: stretch !important;
    }

    .file-upload-cancel-v2 {
        width: 100% !important;
        max-width: none;
    }
}



/* ==========================================================
   NEWLIFE_FILE_OVERLAY_VIEWPORT_FIX_V1_CSS
   ========================================================== */

#fileDropOverlay.file-drop-overlay-v2 {
    position:
        fixed !important;

    inset:
        0 !important;

    top:
        0 !important;

    right:
        0 !important;

    bottom:
        0 !important;

    left:
        0 !important;

    width:
        100vw !important;

    height:
        100vh !important;

    min-width:
        100vw !important;

    min-height:
        100vh !important;

    margin:
        0 !important;

    padding:
        24px !important;

    box-sizing:
        border-box !important;

    transform:
        none !important;

    place-items:
        center !important;

    align-items:
        center !important;

    justify-items:
        center !important;

    z-index:
        100000 !important;
}


#fileDropOverlay.file-drop-overlay-v2[hidden] {
    display:
        none !important;
}


#fileDropOverlay.file-drop-overlay-v2:not([hidden]) {
    display:
        grid !important;
}


#fileDropOverlay .file-drop-card-v2 {
    position:
        relative !important;

    top:
        auto !important;

    right:
        auto !important;

    bottom:
        auto !important;

    left:
        auto !important;

    transform:
        none !important;

    width:
        min(
            520px,
            calc(100vw - 48px)
        ) !important;

    max-width:
        520px !important;

    margin:
        0 auto !important;

    box-sizing:
        border-box !important;
}


@media (max-width: 600px) {

    #fileDropOverlay.file-drop-overlay-v2 {
        padding:
            14px !important;
    }


    #fileDropOverlay .file-drop-card-v2 {
        width:
            calc(100vw - 28px) !important;

        max-width:
            none !important;
    }
}



/* ==========================================================
   NEWLIFE_FILE_PREVIEW_TOOLS_V1_CSS
   ========================================================== */

html.file-preview-fullscreen-open-v2 {
    overflow:
        hidden !important;
}


#filePreviewPanel.is-fullscreen-v2 {
    position:
        fixed !important;

    inset:
        16px !important;

    z-index:
        90000 !important;

    display:
        flex !important;

    flex-direction:
        column;

    width:
        auto !important;

    max-width:
        none !important;

    height:
        auto !important;

    max-height:
        none !important;

    margin:
        0 !important;

    overflow:
        hidden;

    box-sizing:
        border-box;

    box-shadow:
        0 24px 80px
        rgba(0, 0, 0, .58);
}


#filePreviewPanel.is-fullscreen-v2
.file-code-v2 {
    flex:
        1 1 auto;

    min-height:
        0;

    max-height:
        none !important;

    overflow:
        auto;
}


#filePreviewFullscreen,
#filePreviewCopyPath {
    white-space:
        nowrap;
}


@media (max-width: 700px) {

    #filePreviewPanel.is-fullscreen-v2 {
        inset:
            8px !important;
    }
}



/* ==========================================================
   NEWLIFE_UPLOAD_HISTORY_SAFE_V1_CSS
   ========================================================== */

.file-upload-history-v3 {
    margin:
        12px 0;

    padding:
        12px;

    border:
        1px solid
        rgba(255, 255, 255, .06);

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, .025);
}


.file-upload-history-v3[hidden] {
    display:
        none !important;
}


.file-upload-history-head-v3 {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        9px;
}


.file-upload-history-heading-v3 {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.file-upload-history-heading-v3 strong {
    font-size:
        13px;

    font-weight:
        700;
}


.file-upload-history-heading-v3 span {
    color:
        var(--muted);

    font-size:
        10px;
}


.file-upload-history-clear-v3 {
    min-height:
        30px;

    padding:
        4px 10px;

    font-size:
        11px;
}


.file-upload-history-rows-v3 {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    max-height:
        250px;

    overflow:
        auto;
}


.file-upload-history-row-v3 {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        12px;

    padding:
        8px 10px;

    border-radius:
        9px;

    background:
        rgba(255, 255, 255, .025);
}


.file-upload-history-main-v3 {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

    min-width:
        0;
}


.file-upload-history-main-v3 strong {
    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        12px;
}


.file-upload-history-main-v3 span {
    color:
        var(--muted);

    font-size:
        10px;

    font-variant-numeric:
        tabular-nums;
}


.file-upload-history-side-v3 {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        7px;

    min-width:
        0;
}


.file-upload-history-badge-v3 {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        22px;

    padding:
        2px 8px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        700;

    white-space:
        nowrap;
}


.file-upload-history-badge-v3.is-success {
    color:
        #98e9b8;

    border:
        1px solid
        rgba(76, 190, 122, .18);

    background:
        rgba(76, 190, 122, .09);
}


.file-upload-history-badge-v3.is-error {
    color:
        #ffa0a0;

    border:
        1px solid
        rgba(230, 82, 82, .18);

    background:
        rgba(230, 82, 82, .09);
}


.file-upload-history-badge-v3.is-cancelled {
    color:
        #d5c8ff;

    border:
        1px solid
        rgba(145, 111, 235, .18);

    background:
        rgba(145, 111, 235, .09);
}


.file-upload-history-message-v3 {
    max-width:
        220px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        var(--muted);

    font-size:
        10px;
}


@media (max-width: 700px) {

    .file-upload-history-row-v3 {
        grid-template-columns:
            1fr;
    }


    .file-upload-history-side-v3 {
        justify-content:
            flex-start;

        flex-wrap:
            wrap;
    }


    .file-upload-history-message-v3 {
        max-width:
            100%;
    }
}



/* ==========================================================
   NEWLIFE_UPLOAD_HISTORY_RETRY_V1_CSS
   ========================================================== */

.file-upload-history-retry-v3 {
    min-height:
        22px;

    padding:
        2px 8px;

    border-radius:
        7px;

    font-size:
        10px;

    line-height:
        1.2;

    white-space:
        nowrap;
}


.file-upload-history-retry-v3:disabled {
    opacity:
        .55;

    cursor:
        default;
}


@media (max-width: 700px) {

    .file-upload-history-retry-v3 {
        min-height:
            26px;
    }
}



/* ==========================================================
   NEWLIFE_UPLOAD_TELEMETRY_SAFE_V1_CSS
   ========================================================== */

.file-upload-telemetry-v4 {
    width:
        100%;

    margin-top:
        7px;

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        600;

    line-height:
        1.35;

    text-align:
        left;

    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;
}


.file-upload-telemetry-v4[hidden] {
    display:
        none !important;
}


@media (max-width: 600px) {

    .file-upload-telemetry-v4 {
        font-size:
            10px;

        white-space:
            normal;
    }
}



/* ==========================================================
   NEWLIFE_FILE_BREADCRUMBS_V4_CSS
   ========================================================== */

.file-breadcrumb-v3.is-enhanced-v4 {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    width:
        100%;

    min-width:
        0;

    margin:
        10px 0 12px;

    padding:
        8px 10px;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, .055);

    border-radius:
        10px;

    background:
        rgba(255, 255, 255, .022);

    box-sizing:
        border-box;

    scrollbar-width:
        thin;

    scroll-behavior:
        smooth;
}


.file-breadcrumb-v3.is-enhanced-v4
.file-crumb-v4 {
    appearance:
        none;

    display:
        inline-flex;

    align-items:
        center;

    flex:
        0 0 auto;

    min-height:
        28px;

    padding:
        4px 8px;

    border:
        1px solid
        transparent;

    border-radius:
        7px;

    background:
        transparent;

    color:
        var(--muted);

    font:
        inherit;

    font-size:
        11px;

    font-weight:
        600;

    line-height:
        1.2;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}


.file-breadcrumb-v3.is-enhanced-v4
.file-crumb-v4:not(.is-current-v4):hover {
    color:
        #fff;

    border-color:
        rgba(151, 110, 255, .18);

    background:
        rgba(151, 110, 255, .08);
}


.file-breadcrumb-v3.is-enhanced-v4
.file-crumb-v4.is-root-v4 {
    color:
        #d8ccff;

    font-weight:
        700;
}


.file-breadcrumb-v3.is-enhanced-v4
.file-crumb-v4.is-current-v4 {
    color:
        #fff;

    border-color:
        rgba(151, 110, 255, .24);

    background:
        rgba(151, 110, 255, .12);

    font-weight:
        700;

    cursor:
        default;

    opacity:
        1 !important;
}


.file-breadcrumb-v3.is-enhanced-v4
.file-crumb-v4:disabled {
    opacity:
        1;
}


.file-breadcrumb-v3.is-enhanced-v4
.file-crumb-separator-v4 {
    flex:
        0 0 auto;

    color:
        rgba(255, 255, 255, .25);

    font-size:
        15px;

    font-weight:
        400;

    line-height:
        1;

    user-select:
        none;
}


@media (max-width: 700px) {

    .file-breadcrumb-v3.is-enhanced-v4 {
        margin:
            8px 0 10px;

        padding:
            7px 8px;
    }


    .file-breadcrumb-v3.is-enhanced-v4
    .file-crumb-v4 {
        min-height:
            30px;

        padding:
            5px 7px;

        font-size:
            10px;
    }
}



/* ==========================================================
   NEWLIFE_FILE_NAV_HISTORY_V1_CSS
   ========================================================== */

.file-nav-history-v5 {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    margin:
        10px 0 0;
}


.file-nav-button-v5 {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    min-width:
        32px;

    height:
        30px;

    min-height:
        30px;

    padding:
        0;

    border-radius:
        8px;

    font-size:
        16px;

    line-height:
        1;

    font-weight:
        600;
}


.file-nav-button-v5:disabled {
    opacity:
        .32;

    cursor:
        default;
}


.file-nav-label-v5 {
    margin-left:
        4px;

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        600;

    user-select:
        none;
}


@media (max-width: 700px) {

    .file-nav-history-v5 {
        margin-top:
            8px;
    }


    .file-nav-button-v5 {
        width:
            34px;

        min-width:
            34px;

        height:
            32px;

        min-height:
            32px;
    }


    .file-nav-label-v5 {
        display:
            none;
    }
}



/* ==========================================================
   NEWLIFE_FILE_FAVORITES_V1_CSS
   ========================================================== */

.file-favorite-current-v6 {
    color:
        #c8b9f8;

    font-size:
        17px;
}


.file-favorite-current-v6.is-favorite-v6 {
    color:
        #d8c5ff;

    border-color:
        rgba(157, 118, 255, .28);

    background:
        rgba(157, 118, 255, .11);
}


.file-favorite-current-v6:disabled {
    opacity:
        .28;
}


.file-favorites-v6 {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    margin:
        9px 0 0;

    padding:
        9px 10px;

    border:
        1px solid
        rgba(255, 255, 255, .05);

    border-radius:
        10px;

    background:
        rgba(255, 255, 255, .018);
}


.file-favorites-v6[hidden] {
    display:
        none !important;
}


.file-favorites-head-v6 {
    display:
        flex;

    align-items:
        center;

    flex:
        0 0 auto;

    gap:
        6px;

    min-height:
        28px;
}


.file-favorites-title-v6 {
    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;
}


.file-favorites-count-v6 {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        19px;

    height:
        19px;

    padding:
        0 5px;

    border-radius:
        999px;

    color:
        #d5c9fa;

    background:
        rgba(151, 110, 255, .09);

    font-size:
        9px;

    font-weight:
        700;

    box-sizing:
        border-box;
}


.file-favorites-items-v6 {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        6px;

    min-width:
        0;
}


.file-favorite-item-v6 {
    display:
        inline-flex;

    align-items:
        center;

    min-width:
        0;

    border:
        1px solid
        rgba(255, 255, 255, .055);

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, .025);

    overflow:
        hidden;
}


.file-favorite-item-v6.is-current-v6 {
    border-color:
        rgba(151, 110, 255, .25);

    background:
        rgba(151, 110, 255, .09);
}


.file-favorite-open-v6,
.file-favorite-remove-v6 {
    appearance:
        none;

    border:
        0;

    background:
        transparent;

    color:
        inherit;

    font:
        inherit;

    cursor:
        pointer;
}


.file-favorite-open-v6 {
    display:
        block;

    max-width:
        180px;

    padding:
        6px 8px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        #ddd7ec;

    font-size:
        10px;

    font-weight:
        600;
}


.file-favorite-open-v6:hover {
    color:
        #fff;

    background:
        rgba(151, 110, 255, .07);
}


.file-favorite-remove-v6 {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        25px;

    height:
        27px;

    border-left:
        1px solid
        rgba(255, 255, 255, .045);

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1;
}


.file-favorite-remove-v6:hover {
    color:
        #fff;

    background:
        rgba(220, 70, 90, .10);
}


@media (max-width: 700px) {

    .file-favorites-v6 {
        flex-direction:
            column;

        gap:
            6px;

        padding:
            8px;
    }


    .file-favorites-head-v6 {
        min-height:
            22px;
    }


    .file-favorite-open-v6 {
        max-width:
            145px;
    }
}



/* ==========================================================
   NEWLIFE_FILE_RECENTS_V1_CSS
   ========================================================== */

.file-recents-v8 {
    margin:
        8px 0 0;

    padding:
        9px 10px;

    border:
        1px solid
        rgba(255, 255, 255, .045);

    border-radius:
        10px;

    background:
        rgba(255, 255, 255, .015);
}


.file-recents-v8[hidden] {
    display:
        none !important;
}


.file-recents-head-v8 {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        7px;
}


.file-recents-heading-v8 {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


.file-recents-title-v8 {
    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;
}


.file-recents-count-v8 {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        19px;

    height:
        19px;

    padding:
        0 5px;

    border-radius:
        999px;

    color:
        #d5c9fa;

    background:
        rgba(151, 110, 255, .08);

    font-size:
        9px;

    font-weight:
        700;

    box-sizing:
        border-box;
}


.file-recents-clear-v8 {
    min-height:
        27px;

    padding:
        3px 8px;

    font-size:
        10px;
}


.file-recents-items-v8 {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.file-recent-item-v8 {
    display:
        inline-flex;

    align-items:
        center;

    min-width:
        0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, .05);

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, .022);
}


.file-recent-item-v8.is-current-v8 {
    border-color:
        rgba(151, 110, 255, .22);

    background:
        rgba(151, 110, 255, .075);
}


.file-recent-open-v8,
.file-recent-remove-v8 {
    appearance:
        none;

    border:
        0;

    background:
        transparent;

    color:
        inherit;

    font:
        inherit;

    cursor:
        pointer;
}


.file-recent-open-v8 {
    display:
        block;

    max-width:
        180px;

    padding:
        6px 8px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        #d7d2df;

    font-size:
        10px;

    font-weight:
        600;
}


.file-recent-open-v8:hover {
    color:
        #fff;

    background:
        rgba(151, 110, 255, .06);
}


.file-recent-remove-v8 {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        25px;

    height:
        27px;

    border-left:
        1px solid
        rgba(255, 255, 255, .04);

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1;
}


.file-recent-remove-v8:hover {
    color:
        #fff;

    background:
        rgba(220, 70, 90, .09);
}


@media (max-width: 700px) {

    .file-recents-v8 {
        padding:
            8px;
    }


    .file-recent-open-v8 {
        max-width:
            145px;
    }
}



/* ==========================================================
   NEWLIFE_FILE_FOLDER_SEARCH_V9_CSS
   ========================================================== */

#fileSearch {
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}


#fileSearch.is-searching-v9 {
    border-color:
        rgba(154, 116, 255, .30);

    background:
        rgba(151, 110, 255, .045);

    box-shadow:
        0 0 0 2px
        rgba(151, 110, 255, .045);
}


.file-search-hit-v9 {
    padding:
        0 2px;

    margin:
        0 -1px;

    border-radius:
        3px;

    color:
        #fff;

    background:
        rgba(154, 116, 255, .34);

    font:
        inherit;

    font-weight:
        700;
}


.file-name-v3:hover
.file-search-hit-v9 {
    background:
        rgba(169, 137, 255, .44);
}



/* ==========================================================
   NEWLIFE_FILE_KEYBOARD_NAV_V10_CSS
   ========================================================== */

#filesList .file-row-v3 {
    transition:
        background .12s ease,
        border-color .12s ease,
        box-shadow .12s ease;
}


#filesList
.file-row-v3.is-keyboard-selected-v10 {
    position:
        relative;

    border-color:
        rgba(151, 110, 255, .28) !important;

    background:
        rgba(151, 110, 255, .085) !important;

    box-shadow:
        inset 3px 0 0
        rgba(164, 132, 255, .72);
}


#filesList
.file-row-v3.is-keyboard-selected-v10
.file-name-v3 {
    color:
        #fff;
}


#filesList
.file-row-v3.is-keyboard-selected-v10
.file-type-v2 {
    color:
        #cfc3f5;
}



/* ==========================================================
   NEWLIFE_FILE_CONTEXT_MOVE_V11_CSS
   ========================================================== */

.file-context-menu-v11 {
    position: fixed;
    z-index: 2600;
    display: flex;
    flex-direction: column;
    min-width: 205px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 11px;
    background: rgba(21,19,28,.97);
    box-shadow: 0 18px 48px rgba(0,0,0,.42);
    backdrop-filter: blur(16px);
}

.file-context-menu-v11[hidden] {
    display: none !important;
}

.file-context-action-v11 {
    appearance: none;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #e6e1ee;
    text-align: left;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.file-context-action-v11:hover {
    color: #fff;
    background: rgba(151,110,255,.12);
}

.file-context-action-v11.is-danger-v11 {
    color: #ffadb8;
}

.file-context-action-v11.is-danger-v11:hover {
    background: rgba(225,69,91,.13);
}

.file-context-separator-v11 {
    height: 1px;
    margin: 5px 4px;
    background: rgba(255,255,255,.065);
}


/* MOVE PICKER */

.file-move-overlay-v11 {
    position: fixed;
    z-index: 2500;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(6,5,9,.72);
    backdrop-filter: blur(7px);
}

.file-move-overlay-v11[hidden] {
    display: none !important;
}

.file-move-card-v11 {
    width: min(620px, 100%);
    max-height: min(720px, calc(100vh - 40px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 16px;
    background: #15131c;
    box-shadow: 0 28px 90px rgba(0,0,0,.52);
}

.file-move-header-v11 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 18px 14px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.file-move-header-v11 > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.file-move-header-v11 strong {
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-move-header-v11 span {
    color: var(--muted);
    font-size: 11px;
}

.file-move-close-v11 {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    color: #aaa3b7;
    font-size: 19px;
    cursor: pointer;
}

.file-move-close-v11:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
}

.file-move-nav-v11 {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px 8px;
}

.file-move-nav-v11 .secondary-button {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 10px;
}

.file-move-path-v11 {
    margin: 0 14px 9px;
    padding: 8px 10px;
    overflow: hidden;
    border: 1px solid rgba(151,110,255,.11);
    border-radius: 8px;
    background: rgba(151,110,255,.035);
    color: #cfc5e8;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-move-folders-v11 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 170px;
    max-height: 390px;
    margin: 0 14px;
    padding: 5px;
    overflow: auto;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 10px;
    background: rgba(255,255,255,.012);
}

.file-move-folder-v11 {
    appearance: none;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #ddd7e7;
    text-align: left;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.file-move-folder-v11:hover:not(:disabled) {
    color: #fff;
    background: rgba(151,110,255,.09);
}

.file-move-folder-v11:disabled {
    opacity: .30;
    cursor: not-allowed;
}

.file-move-empty-v11 {
    padding: 28px 12px;
    color: var(--muted);
    text-align: center;
    font-size: 11px;
}

.file-move-hint-v11 {
    min-height: 18px;
    padding: 8px 15px 0;
    color: #aaa2b9;
    font-size: 10px;
}

.file-move-footer-v11 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 13px 14px 14px;
}

.file-move-footer-v11 button {
    min-height: 32px;
    font-size: 11px;
}

.file-move-footer-v11 button:disabled {
    opacity: .38;
    cursor: not-allowed;
}

@media (max-width: 650px) {

    .file-move-overlay-v11 {
        padding: 10px;
    }

    .file-move-card-v11 {
        max-height: calc(100vh - 20px);
    }

    .file-move-folders-v11 {
        max-height: 55vh;
    }

    .file-context-menu-v11 {
        min-width: 190px;
    }
}



/* ==========================================================
   NEWLIFE_FILE_CLIPBOARD_V12_CSS
   ========================================================== */

.file-clipboard-bar-v12 {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin:
        9px 0;

    padding:
        9px 10px;

    border:
        1px solid
        rgba(151, 110, 255, .15);

    border-radius:
        10px;

    background:
        rgba(151, 110, 255, .045);
}


.file-clipboard-bar-v12[hidden] {
    display:
        none !important;
}


.file-clipboard-icon-v12 {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        29px;

    height:
        29px;

    border-radius:
        8px;

    background:
        rgba(151, 110, 255, .12);

    color:
        #d7c8ff;

    font-size:
        15px;
}


.file-clipboard-text-v12 {
    display:
        flex;

    flex-direction:
        column;

    flex:
        1 1 auto;

    min-width:
        0;

    gap:
        2px;
}


.file-clipboard-text-v12 strong {
    color:
        #eee9f7;

    font-size:
        11px;
}


.file-clipboard-text-v12 span {
    overflow:
        hidden;

    color:
        var(--muted);

    font-size:
        10px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.file-clipboard-actions-v12 {
    display:
        flex;

    align-items:
        center;

    flex:
        0 0 auto;

    gap:
        6px;
}


.file-clipboard-actions-v12
.secondary-button {
    min-height:
        29px;

    padding:
        4px 9px;

    font-size:
        10px;
}


#filesList
.file-row-v3.is-cut-v12 {
    opacity:
        .46;
}


#filesList
.file-row-v3.is-cut-v12
.file-name-v3 {
    font-style:
        italic;
}


.file-context-action-v11.is-disabled-v12,
.file-context-action-v11:disabled {
    opacity:
        .38;

    cursor:
        default;

    pointer-events:
        none;
}


@media (max-width: 700px) {

    .file-clipboard-bar-v12 {
        align-items:
            flex-start;

        flex-wrap:
            wrap;
    }


    .file-clipboard-text-v12 {
        min-width:
            calc(100% - 45px);
    }


    .file-clipboard-actions-v12 {
        width:
            100%;

        justify-content:
            flex-end;

        padding-left:
            39px;
    }
}



/* ==========================================================
   NEWLIFE_FILE_INTERNAL_DRAG_V13_CSS
   ========================================================== */

#filesList
.file-row-v3[data-internal-draggable-v13="1"] {
    cursor:
        grab;
}


#filesList
.file-row-v3[data-internal-draggable-v13="1"]:active {
    cursor:
        grabbing;
}


#filesList
.file-row-v3.is-internal-drag-source-v13 {
    opacity:
        .34;

    transform:
        scale(.995);

    border-color:
        rgba(151, 110, 255, .14);
}


#filesList
.file-row-v3.is-internal-drop-target-v13 {
    position:
        relative;

    border-color:
        rgba(151, 110, 255, .58) !important;

    background:
        rgba(151, 110, 255, .14) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(169, 137, 255, .18),
        0 0 0 2px
        rgba(151, 110, 255, .07);
}


#filesList
.file-row-v3.is-internal-drop-target-v13
.file-name-v3 {
    color:
        #fff;
}


#filesList
.file-row-v3.is-internal-drop-invalid-v13 {
    border-color:
        rgba(225, 75, 96, .32) !important;

    background:
        rgba(225, 75, 96, .055) !important;
}


.file-internal-drag-hint-v13 {
    position:
        fixed;

    z-index:
        5000;

    max-width:
        290px;

    padding:
        8px 10px;

    border:
        1px solid
        rgba(255, 255, 255, .09);

    border-radius:
        9px;

    background:
        rgba(19, 17, 26, .96);

    box-shadow:
        0 14px 38px
        rgba(0, 0, 0, .40);

    color:
        #c8c1d2;

    font-size:
        10px;

    font-weight:
        600;

    pointer-events:
        none;

    backdrop-filter:
        blur(12px);
}


.file-internal-drag-hint-v13[hidden] {
    display:
        none !important;
}


.file-internal-drag-hint-v13.is-valid-v13 {
    border-color:
        rgba(151, 110, 255, .36);

    color:
        #e7ddff;
}


.file-internal-drag-hint-v13.is-invalid-v13 {
    border-color:
        rgba(225, 75, 96, .22);

    color:
        #d4cbd8;
}


body.file-internal-drag-active-v13
#filesList {
    user-select:
        none;
}



/* ==========================================================
   NEWLIFE_FILE_PROPERTIES_V14_CSS
   ========================================================== */

.file-properties-overlay-v14 {
    position: fixed;
    z-index: 2700;
    inset: 0;

    display: grid;
    place-items: center;

    padding: 20px;

    background:
        rgba(6, 5, 9, .73);

    backdrop-filter:
        blur(7px);
}


.file-properties-overlay-v14[hidden] {
    display: none !important;
}


.file-properties-card-v14 {
    width:
        min(680px, 100%);

    max-height:
        min(760px, calc(100vh - 40px));

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, .085);

    border-radius:
        16px;

    background:
        #15131c;

    box-shadow:
        0 28px 90px
        rgba(0, 0, 0, .54);
}


.file-properties-header-v14 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    padding:
        17px 18px 14px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .055);
}


.file-properties-header-v14 > div {
    display: flex;
    flex-direction: column;

    gap: 4px;

    min-width: 0;
}


.file-properties-header-v14 span {
    color:
        #9589ac;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .11em;
}


.file-properties-header-v14 strong {
    overflow: hidden;

    color:
        #fff;

    font-size:
        14px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.file-properties-close-v14 {
    appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex:
        0 0 auto;

    width: 30px;
    height: 30px;

    border:
        1px solid
        rgba(255, 255, 255, .065);

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, .025);

    color:
        #aaa3b7;

    font-size:
        19px;

    cursor:
        pointer;
}


.file-properties-close-v14:hover {
    color:
        #fff;

    background:
        rgba(255, 255, 255, .06);
}


.file-properties-body-v14 {
    display: flex;
    flex-direction: column;

    gap: 3px;

    padding:
        12px 14px;

    overflow-y:
        auto;
}


.file-property-row-v14 {
    display: grid;

    grid-template-columns:
        125px minmax(0, 1fr);

    align-items: start;

    gap: 14px;

    min-height: 39px;

    padding:
        9px 10px;

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, .017);
}


.file-property-row-v14:hover {
    background:
        rgba(151, 110, 255, .035);
}


.file-property-label-v14 {
    padding-top:
        2px;

    color:
        #888091;

    font-size:
        10px;
}


.file-property-value-v14 {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    min-width: 0;

    color:
        #e1dbe9;

    font-size:
        11px;
}


.file-property-value-v14 > span,
.file-property-value-v14 > code {
    min-width: 0;
}


.file-property-value-v14 code {
    padding:
        2px 5px;

    border:
        1px solid
        rgba(151, 110, 255, .08);

    border-radius:
        5px;

    background:
        rgba(151, 110, 255, .035);

    color:
        #d6c9ef;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size:
        10px;
}


.file-property-value-v14
.is-breakable-v14 {
    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


.file-property-copy-v14 {
    appearance: none;

    flex:
        0 0 auto;

    padding:
        3px 6px;

    border:
        1px solid
        rgba(151, 110, 255, .11);

    border-radius:
        6px;

    background:
        rgba(151, 110, 255, .04);

    color:
        #aaa0be;

    font:
        inherit;

    font-size:
        9px;

    cursor:
        pointer;
}


.file-property-copy-v14:hover {
    color:
        #fff;

    border-color:
        rgba(151, 110, 255, .28);

    background:
        rgba(151, 110, 255, .09);
}


.file-properties-loading-v14,
.file-properties-error-v14 {
    padding:
        34px 16px;

    color:
        #928a9e;

    text-align:
        center;

    font-size:
        11px;
}


.file-properties-error-v14 {
    color:
        #e7a3ad;
}


.file-properties-footer-v14 {
    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        12px 14px 14px;

    border-top:
        1px solid
        rgba(255, 255, 255, .045);
}


.file-properties-footer-v14
.primary-button {
    margin-left:
        auto;
}


.file-properties-footer-v14 button {
    min-height:
        31px;

    font-size:
        10px;
}


@media (max-width: 650px) {

    .file-properties-overlay-v14 {
        padding:
            10px;
    }


    .file-properties-card-v14 {
        max-height:
            calc(100vh - 20px);
    }


    .file-property-row-v14 {
        grid-template-columns:
            1fr;

        gap:
            4px;
    }


    .file-property-value-v14 {
        flex-wrap:
            wrap;
    }


    .file-properties-footer-v14 {
        flex-wrap:
            wrap;
    }


    .file-properties-footer-v14
    .primary-button {
        margin-left:
            auto;
    }
}



/* ==========================================================
   NEWLIFE_FILE_MULTISELECT_V16_CSS
   ========================================================== */

#filesList
.file-row-v3.is-multi-selected-v16 {
    position:
        relative;

    border-color:
        rgba(151, 110, 255, .42) !important;

    background:
        linear-gradient(
            90deg,
            rgba(151, 110, 255, .13),
            rgba(151, 110, 255, .055)
        ) !important;

    box-shadow:
        inset 3px 0 0
        rgba(162, 126, 255, .72);
}


#filesList
.file-row-v3.is-multi-selected-v16:hover {
    border-color:
        rgba(166, 132, 255, .56) !important;

    background:
        linear-gradient(
            90deg,
            rgba(151, 110, 255, .17),
            rgba(151, 110, 255, .075)
        ) !important;
}


.file-multi-bar-v16 {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin:
        0 0 8px;

    padding:
        7px 8px;

    border:
        1px solid
        rgba(151, 110, 255, .12);

    border-radius:
        10px;

    background:
        rgba(151, 110, 255, .035);
}


.file-multi-bar-v16[hidden] {
    display:
        none !important;
}


.file-multi-section-v16 {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        5px;

    min-width:
        0;
}


.file-multi-section-v16 strong {
    margin-right:
        3px;

    color:
        #e7ddf7;

    font-size:
        10px;

    font-weight:
        650;
}


.file-multi-section-v16
> span {
    color:
        #a79daf;

    font-size:
        10px;
}


.file-multi-section-v16.is-clipboard-v16 {
    margin-left:
        auto;

    padding-left:
        8px;

    border-left:
        1px solid
        rgba(255, 255, 255, .055);
}


.file-multi-button-v16 {
    appearance:
        none;

    min-height:
        26px;

    padding:
        4px 7px;

    border:
        1px solid
        rgba(255, 255, 255, .065);

    border-radius:
        6px;

    background:
        rgba(255, 255, 255, .025);

    color:
        #aaa2b6;

    font:
        inherit;

    font-size:
        9px;

    cursor:
        pointer;
}


.file-multi-button-v16:hover {
    border-color:
        rgba(151, 110, 255, .25);

    background:
        rgba(151, 110, 255, .08);

    color:
        #fff;
}


.file-multi-button-v16.is-danger-v16:hover {
    border-color:
        rgba(225, 75, 96, .28);

    background:
        rgba(225, 75, 96, .08);

    color:
        #f0b5be;
}


.file-multi-context-v16 {
    position:
        fixed;

    z-index:
        4900;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        190px;

    padding:
        5px;

    border:
        1px solid
        rgba(255, 255, 255, .085);

    border-radius:
        10px;

    background:
        rgba(20, 18, 27, .985);

    box-shadow:
        0 20px 58px
        rgba(0, 0, 0, .48);

    backdrop-filter:
        blur(13px);
}


.file-multi-context-v16[hidden] {
    display:
        none !important;
}


.file-multi-context-title-v16 {
    padding:
        6px 8px 7px;

    color:
        #8f859d;

    font-size:
        9px;

    font-weight:
        650;
}


.file-multi-context-v16
button {
    appearance:
        none;

    width:
        100%;

    padding:
        7px 9px;

    border:
        0;

    border-radius:
        6px;

    background:
        transparent;

    color:
        #c9c2d0;

    font:
        inherit;

    font-size:
        10px;

    text-align:
        left;

    cursor:
        pointer;
}


.file-multi-context-v16
button:hover {
    background:
        rgba(151, 110, 255, .09);

    color:
        #fff;
}


.file-multi-context-v16
button.is-danger-v16:hover {
    background:
        rgba(225, 75, 96, .09);

    color:
        #f0b5be;
}


.file-multi-context-separator-v16 {
    height:
        1px;

    margin:
        4px 3px;

    background:
        rgba(255, 255, 255, .055);
}


.file-multi-move-overlay-v16 {
    position:
        fixed;

    z-index:
        3000;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    padding:
        18px;

    background:
        rgba(6, 5, 9, .74);

    backdrop-filter:
        blur(7px);
}


.file-multi-move-overlay-v16[hidden] {
    display:
        none !important;
}


.file-multi-move-card-v16 {
    width:
        min(630px, 100%);

    max-height:
        min(720px, calc(100vh - 36px));

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, .085);

    border-radius:
        15px;

    background:
        #15131c;

    box-shadow:
        0 28px 90px
        rgba(0, 0, 0, .55);
}


.file-multi-move-header-v16 {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        14px;

    padding:
        15px 16px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .05);
}


.file-multi-move-header-v16
> div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.file-multi-move-header-v16
span {
    color:
        #9285aa;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .10em;
}


.file-multi-move-header-v16
strong {
    color:
        #fff;

    font-size:
        13px;
}


.file-multi-move-close-v16 {
    appearance:
        none;

    width:
        29px;

    height:
        29px;

    border:
        1px solid
        rgba(255, 255, 255, .065);

    border-radius:
        7px;

    background:
        rgba(255, 255, 255, .025);

    color:
        #aaa1b4;

    font-size:
        18px;

    cursor:
        pointer;
}


.file-multi-move-nav-v16 {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        9px 12px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .045);
}


.file-multi-move-nav-v16
button {
    appearance:
        none;

    width:
        29px;

    height:
        29px;

    border:
        1px solid
        rgba(255, 255, 255, .065);

    border-radius:
        7px;

    background:
        rgba(255, 255, 255, .025);

    color:
        #b1a8bd;

    cursor:
        pointer;
}


.file-multi-move-nav-v16
button:disabled {
    opacity:
        .35;

    cursor:
        default;
}


.file-multi-move-nav-v16
code {
    min-width:
        0;

    overflow:
        hidden;

    color:
        #bdb3c9;

    font-size:
        10px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.file-multi-move-folders-v16 {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    min-height:
        240px;

    padding:
        9px 10px;

    overflow-y:
        auto;
}


.file-multi-folder-v16 {
    appearance:
        none;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    width:
        100%;

    padding:
        8px 9px;

    border:
        1px solid
        rgba(255, 255, 255, .045);

    border-radius:
        7px;

    background:
        rgba(255, 255, 255, .018);

    color:
        #cec6d7;

    font:
        inherit;

    text-align:
        left;

    cursor:
        pointer;
}


.file-multi-folder-v16:hover {
    border-color:
        rgba(151, 110, 255, .22);

    background:
        rgba(151, 110, 255, .065);

    color:
        #fff;
}


.file-multi-folder-v16
span {
    font-size:
        13px;
}


.file-multi-folder-v16
strong {
    overflow:
        hidden;

    font-size:
        10px;

    font-weight:
        550;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.file-multi-move-empty-v16 {
    padding:
        35px 14px;

    color:
        #8f8798;

    font-size:
        10px;

    text-align:
        center;
}


.file-multi-move-empty-v16.is-error-v16 {
    color:
        #e0a0a9;
}


.file-multi-move-footer-v16 {
    display:
        flex;

    justify-content:
        flex-end;

    gap:
        7px;

    padding:
        11px 12px 13px;

    border-top:
        1px solid
        rgba(255, 255, 255, .045);
}


.file-multi-move-footer-v16
button {
    min-height:
        31px;

    font-size:
        10px;
}


@media (max-width: 700px) {

    .file-multi-bar-v16 {
        align-items:
            stretch;
    }


    .file-multi-section-v16 {
        width:
            100%;
    }


    .file-multi-section-v16.is-clipboard-v16 {
        margin-left:
            0;

        padding-top:
            6px;

        padding-left:
            0;

        border-top:
            1px solid
            rgba(255, 255, 255, .05);

        border-left:
            0;
    }


    .file-multi-move-overlay-v16 {
        padding:
            9px;
    }


    .file-multi-move-card-v16 {
        max-height:
            calc(100vh - 18px);
    }
}



/* ==========================================================
   NEWLIFE_FILE_MULTI_ARCHIVE_V17_CSS
   ========================================================== */

.file-multi-button-v16.is-archive-v17 {
    border-color:
        rgba(151, 110, 255, .15);

    background:
        rgba(151, 110, 255, .055);

    color:
        #cfc2ea;
}


.file-multi-button-v16.is-archive-v17:hover {
    border-color:
        rgba(166, 132, 255, .34);

    background:
        rgba(151, 110, 255, .12);

    color:
        #fff;
}


.file-multi-button-v16.is-archive-v17:disabled,
.file-multi-archive-context-v17:disabled {
    opacity:
        .42;

    cursor:
        wait;
}



/* ==========================================================
   NEWLIFE_FILE_BULK_RENAME_V18_CSS
   ========================================================== */

.file-bulk-rename-overlay-v18 {
    position:
        fixed;

    z-index:
        3300;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    padding:
        18px;

    background:
        rgba(6, 5, 9, .76);

    backdrop-filter:
        blur(8px);
}


.file-bulk-rename-overlay-v18[hidden] {
    display:
        none !important;
}


.file-bulk-rename-card-v18 {
    width:
        min(820px, 100%);

    max-height:
        min(820px, calc(100vh - 36px));

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, .085);

    border-radius:
        16px;

    background:
        #15131c;

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, .58);
}


.file-bulk-rename-header-v18 {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        16px 17px 14px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .05);
}


.file-bulk-rename-header-v18
> div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.file-bulk-rename-header-v18
span {
    color:
        #9487aa;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .105em;
}


.file-bulk-rename-header-v18
strong {
    color:
        #fff;

    font-size:
        14px;
}


.file-bulk-rename-close-v18 {
    appearance:
        none;

    width:
        30px;

    height:
        30px;

    border:
        1px solid
        rgba(255, 255, 255, .065);

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, .025);

    color:
        #aaa2b5;

    font-size:
        19px;

    cursor:
        pointer;
}


.file-bulk-rename-close-v18:hover {
    background:
        rgba(255, 255, 255, .06);

    color:
        #fff;
}


.file-bulk-rename-controls-v18 {
    display:
        grid;

    grid-template-columns:
        minmax(170px, .7fr)
        minmax(0, 2fr);

    gap:
        10px;

    padding:
        12px 14px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .045);
}


.file-bulk-rename-options-v18 {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    align-items:
        end;

    gap:
        8px;
}


.file-bulk-rename-field-v18 {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    min-width:
        0;
}


.file-bulk-rename-field-v18
> span {
    color:
        #8e8698;

    font-size:
        9px;

    font-weight:
        600;
}


.file-bulk-rename-field-v18
input,
.file-bulk-rename-field-v18
select {
    width:
        100%;

    min-height:
        34px;

    padding:
        6px 9px;

    border:
        1px solid
        rgba(255, 255, 255, .075);

    border-radius:
        7px;

    outline:
        none;

    background:
        rgba(255, 255, 255, .025);

    color:
        #ddd6e5;

    font:
        inherit;

    font-size:
        10px;
}


.file-bulk-rename-field-v18
select option {
    background:
        #17141e;

    color:
        #ddd6e5;
}


.file-bulk-rename-field-v18
input:focus,
.file-bulk-rename-field-v18
select:focus {
    border-color:
        rgba(151, 110, 255, .4);

    box-shadow:
        0 0 0 2px
        rgba(151, 110, 255, .07);
}


.file-bulk-rename-check-v18 {
    grid-column:
        1 / -1;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #9d95a8;

    font-size:
        9px;

    cursor:
        pointer;
}


.file-bulk-rename-check-v18
input {
    accent-color:
        #9a70ff;
}


.file-bulk-rename-preview-header-v18 {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        10px 14px 7px;
}


.file-bulk-rename-preview-header-v18
strong {
    color:
        #cfc7d8;

    font-size:
        10px;
}


.file-bulk-rename-preview-header-v18
span {
    color:
        #8f8798;

    font-size:
        9px;
}


.file-bulk-rename-preview-header-v18
span.has-errors-v18 {
    color:
        #e0a0aa;
}


.file-bulk-rename-preview-v18 {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    min-height:
        160px;

    padding:
        0 10px 10px;

    overflow-y:
        auto;
}


.file-bulk-rename-preview-row-v18 {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        24px
        minmax(0, 1fr)
        125px;

    align-items:
        center;

    gap:
        7px;

    min-height:
        39px;

    padding:
        7px 9px;

    border:
        1px solid
        rgba(255, 255, 255, .035);

    border-radius:
        7px;

    background:
        rgba(255, 255, 255, .015);
}


.file-bulk-rename-preview-row-v18
code {
    overflow:
        hidden;

    color:
        #bdb4c8;

    font-size:
        9px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.file-bulk-rename-preview-row-v18
code:nth-of-type(2) {
    color:
        #ded3f1;
}


.file-bulk-rename-arrow-v18 {
    color:
        #756a83;

    font-size:
        11px;

    text-align:
        center;
}


.file-bulk-rename-preview-row-v18
small {
    color:
        #837b8d;

    font-size:
        8px;

    text-align:
        right;
}


.file-bulk-rename-preview-row-v18.is-error-v18 {
    border-color:
        rgba(225, 75, 96, .18);

    background:
        rgba(225, 75, 96, .035);
}


.file-bulk-rename-preview-row-v18.is-error-v18
small {
    color:
        #e4a4ad;
}


.file-bulk-rename-preview-row-v18.is-unchanged-v18 {
    opacity:
        .48;
}


.file-bulk-rename-footer-v18 {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        11px 13px 13px;

    border-top:
        1px solid
        rgba(255, 255, 255, .045);
}


.file-bulk-rename-footer-v18
> span {
    margin-right:
        auto;

    color:
        #756e7d;

    font-size:
        8px;
}


.file-bulk-rename-footer-v18
button {
    min-height:
        31px;

    font-size:
        10px;
}


.file-bulk-rename-footer-v18
button:disabled {
    opacity:
        .38;

    cursor:
        not-allowed;
}


.file-bulk-rename-button-v18 {
    border-color:
        rgba(151, 110, 255, .12);
}


@media (max-width: 720px) {

    .file-bulk-rename-overlay-v18 {
        padding:
            8px;
    }


    .file-bulk-rename-card-v18 {
        max-height:
            calc(100vh - 16px);
    }


    .file-bulk-rename-controls-v18 {
        grid-template-columns:
            1fr;
    }


    .file-bulk-rename-options-v18 {
        grid-template-columns:
            1fr;
    }


    .file-bulk-rename-preview-row-v18 {
        grid-template-columns:
            minmax(0, 1fr)
            18px
            minmax(0, 1fr);
    }


    .file-bulk-rename-preview-row-v18
    small {
        grid-column:
            1 / -1;

        text-align:
            left;
    }


    .file-bulk-rename-footer-v18 {
        flex-wrap:
            wrap;
    }


    .file-bulk-rename-footer-v18
    > span {
        width:
            100%;

        margin-right:
            0;
    }
}



/* ==========================================================
   NEWLIFE_FILE_UNDO_V20_CSS
   ========================================================== */

.file-undo-button-v20 {
    position:
        relative;

    border-color:
        rgba(151, 110, 255, .11);

    color:
        #aaa1b8;
}


.file-undo-button-v20:hover {
    border-color:
        rgba(151, 110, 255, .28);

    background:
        rgba(151, 110, 255, .075);

    color:
        #fff;
}


.file-undo-button-v20:disabled {
    opacity:
        .46;

    cursor:
        wait;
}


.file-undo-button-v20[hidden] {
    display:
        none !important;
}



/* ==========================================================
   NEWLIFE_FILE_REDO_V21_CSS
   ========================================================== */

.file-redo-button-v21 {
    position:
        relative;

    border-color:
        rgba(151, 110, 255, .095);

    color:
        #aaa1b8;
}


.file-redo-button-v21:hover {
    border-color:
        rgba(151, 110, 255, .28);

    background:
        rgba(151, 110, 255, .075);

    color:
        #fff;
}


.file-redo-button-v21:disabled {
    opacity:
        .46;

    cursor:
        wait;
}


.file-redo-button-v21[hidden] {
    display:
        none !important;
}



/* ==========================================================
   NEWLIFE_FILE_MULTI_DRAG_V22_CSS
   ========================================================== */

.file-multi-drag-badge-v22 {
    position:
        fixed;

    z-index:
        10000;

    pointer-events:
        none;

    min-width:
        92px;

    max-width:
        150px;

    padding:
        7px 10px;

    border:
        1px solid
        rgba(157, 118, 255, .34);

    border-radius:
        9px;

    background:
        rgba(24, 20, 33, .96);

    box-shadow:
        0 10px 32px
        rgba(0, 0, 0, .42);

    color:
        #e6dcf8;

    font-size:
        10px;

    font-weight:
        650;

    white-space:
        nowrap;

    backdrop-filter:
        blur(10px);
}


.file-multi-drag-badge-v22[hidden] {
    display:
        none !important;
}


#filesList
.file-row-v3.is-multi-drag-source-v22 {
    opacity:
        .55;
}


#filesList
.file-row-v3.is-multi-drag-target-v22 {
    position:
        relative;

    border-color:
        rgba(157, 118, 255, .62) !important;

    background:
        linear-gradient(
            90deg,
            rgba(151, 110, 255, .20),
            rgba(151, 110, 255, .075)
        ) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(168, 136, 255, .22),
        0 0 0 2px
        rgba(151, 110, 255, .055);
}


#filesList
.file-row-v3.is-multi-drag-target-v22::after {
    content:
        'Переместить сюда';

    position:
        absolute;

    right:
        10px;

    top:
        50%;

    transform:
        translateY(-50%);

    padding:
        3px 6px;

    border-radius:
        5px;

    background:
        rgba(151, 110, 255, .12);

    color:
        #d8c9f5;

    font-size:
        8px;

    font-weight:
        650;

    pointer-events:
        none;
}


#filesList
.file-row-v3.is-multi-drag-invalid-v22 {
    border-color:
        rgba(225, 75, 96, .22) !important;
}


@media (max-width: 700px) {

    #filesList
    .file-row-v3.is-multi-drag-target-v22::after {
        display:
            none;
    }
}



/* ==========================================================
   NEWLIFE_FILE_INLINE_RENAME_V23_CSS
   ========================================================== */

#filesList
.file-row-v3.is-inline-renaming-v23 {
    position:
        relative;

    border-color:
        rgba(151, 110, 255, .26);

    background:
        linear-gradient(
            90deg,
            rgba(151, 110, 255, .08),
            rgba(151, 110, 255, .025)
        );
}


.file-inline-rename-v23 {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    width:
        min(100%, 520px);

    min-width:
        0;
}


.file-inline-rename-line-v23 {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    min-width:
        0;
}


.file-inline-rename-icon-v23 {
    flex:
        0 0 auto;

    width:
        12px;

    color:
        #958aa3;

    font-size:
        11px;

    text-align:
        center;

    user-select:
        none;
}


.file-inline-rename-input-v23 {
    box-sizing:
        border-box;

    width:
        100%;

    min-width:
        80px;

    height:
        28px;

    padding:
        3px 7px;

    border:
        1px solid
        rgba(156, 116, 255, .48);

    border-radius:
        6px;

    outline:
        none;

    background:
        rgba(13, 11, 18, .92);

    box-shadow:
        0 0 0 2px
        rgba(151, 110, 255, .07);

    color:
        #f1ecf7;

    font:
        inherit;

    font-size:
        10px;

    line-height:
        1.2;
}


.file-inline-rename-input-v23:focus {
    border-color:
        rgba(169, 135, 255, .72);

    box-shadow:
        0 0 0 2px
        rgba(151, 110, 255, .11);
}


.file-inline-rename-v23.has-error-v23
.file-inline-rename-input-v23 {
    border-color:
        rgba(226, 78, 99, .58);

    box-shadow:
        0 0 0 2px
        rgba(226, 78, 99, .07);
}


.file-inline-rename-v23.is-saving-v23
.file-inline-rename-input-v23 {
    opacity:
        .64;

    cursor:
        wait;
}


.file-inline-rename-error-v23 {
    overflow:
        hidden;

    padding-left:
        17px;

    color:
        #e6a2ac;

    font-size:
        8px;

    line-height:
        1.25;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.file-inline-rename-error-v23[hidden] {
    display:
        none !important;
}


@media (max-width: 700px) {

    .file-inline-rename-v23 {
        width:
            100%;
    }


    .file-inline-rename-input-v23 {
        height:
            30px;

        font-size:
            11px;
    }
}



/* ==========================================================
   NEWLIFE_FILE_INLINE_FOLDER_V24_CSS
   ========================================================== */

#filesList
.file-inline-folder-row-v24 {
    border-color:
        rgba(151, 110, 255, .28);

    background:
        linear-gradient(
            90deg,
            rgba(151, 110, 255, .09),
            rgba(151, 110, 255, .025)
        );
}


#filesList
.file-inline-folder-row-v24.has-error-v24 {
    border-color:
        rgba(226, 78, 99, .28);
}


.file-inline-folder-editor-v24 {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    width:
        min(100%, 520px);

    min-width:
        0;
}


.file-inline-folder-line-v24 {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    min-width:
        0;
}


.file-inline-folder-icon-v24 {
    flex:
        0 0 auto;

    width:
        12px;

    color:
        #a591c8;

    font-size:
        11px;

    text-align:
        center;

    user-select:
        none;
}


.file-inline-folder-input-v24 {
    box-sizing:
        border-box;

    width:
        100%;

    min-width:
        80px;

    height:
        28px;

    padding:
        3px 7px;

    border:
        1px solid
        rgba(156, 116, 255, .52);

    border-radius:
        6px;

    outline:
        none;

    background:
        rgba(13, 11, 18, .92);

    box-shadow:
        0 0 0 2px
        rgba(151, 110, 255, .075);

    color:
        #f1ecf7;

    font:
        inherit;

    font-size:
        10px;
}


.file-inline-folder-input-v24:focus {
    border-color:
        rgba(169, 135, 255, .76);

    box-shadow:
        0 0 0 2px
        rgba(151, 110, 255, .12);
}


.file-inline-folder-row-v24.has-error-v24
.file-inline-folder-input-v24 {
    border-color:
        rgba(226, 78, 99, .6);

    box-shadow:
        0 0 0 2px
        rgba(226, 78, 99, .075);
}


.file-inline-folder-row-v24.is-saving-v24
.file-inline-folder-input-v24 {
    opacity:
        .62;

    cursor:
        wait;
}


.file-inline-folder-error-v24 {
    overflow:
        hidden;

    padding-left:
        17px;

    color:
        #e6a2ac;

    font-size:
        8px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.file-inline-folder-error-v24[hidden] {
    display:
        none !important;
}


.file-inline-folder-hint-v24 {
    color:
        #756d80;

    font-size:
        8px;

    white-space:
        nowrap;
}


@media (max-width: 700px) {

    .file-inline-folder-editor-v24 {
        width:
            100%;
    }


    .file-inline-folder-input-v24 {
        height:
            30px;

        font-size:
            11px;
    }
}