/* /Components/BrowserVpnManager.razor.rz.scp.css */
.browser-vpn-manager-host[b-a1u6qhtwdz] {
    display: inline-flex;
}

.browser-vpn-manager-button[b-a1u6qhtwdz] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer;
    transition: .16s ease;
}

.browser-vpn-manager-button.install[b-a1u6qhtwdz] {
    border: 1px solid rgba(255, 202, 44, .48);
    color: #e7c343;
    background: rgba(7, 12, 14, .78);
}

.browser-vpn-manager-button.ready[b-a1u6qhtwdz] {
    border: 1px solid rgba(255, 215, 70, .74);
    color: #171208;
    background: linear-gradient(180deg, #ffe568 0%, #ffc928 100%);
}

.browser-vpn-manager-button:disabled[b-a1u6qhtwdz] {
    opacity: .5;
    cursor: default;
}

.browser-vpn-manager-dot[b-a1u6qhtwdz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #777;
}

.browser-vpn-manager-button.ready .browser-vpn-manager-dot[b-a1u6qhtwdz] {
    background: #0e8d54;
    box-shadow: 0 0 10px rgba(14, 141, 84, .42);
}

.browser-vpn-manager-backdrop[b-a1u6qhtwdz] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, .58);
    backdrop-filter: blur(4px);
}

.browser-vpn-manager-panel[b-a1u6qhtwdz] {
    position: fixed;
    z-index: 3001;
    left: 50%;
    top: 50%;
    width: min(980px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    overflow: auto;
    transform: translate(-50%, -50%);
    padding: 22px;
    border: 1px solid rgba(255, 210, 57, .48);
    border-radius: 18px;
    color: #f5f7f8;
    background: radial-gradient(circle at 88% 8%, rgba(255, 184, 0, .08), transparent 32%), #081013;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .62);
}

.browser-vpn-manager-header[b-a1u6qhtwdz],
.browser-vpn-manager-users-title[b-a1u6qhtwdz],
.browser-vpn-manager-user-head[b-a1u6qhtwdz],
.browser-vpn-manager-device[b-a1u6qhtwdz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.browser-vpn-manager-header[b-a1u6qhtwdz] {
    margin-bottom: 20px;
}

.browser-vpn-manager-header h3[b-a1u6qhtwdz],
.browser-vpn-manager-create h4[b-a1u6qhtwdz],
.browser-vpn-manager-users h4[b-a1u6qhtwdz] {
    margin: 0;
}

.browser-vpn-manager-server[b-a1u6qhtwdz],
.browser-vpn-manager-copy[b-a1u6qhtwdz],
.browser-vpn-manager-field small[b-a1u6qhtwdz],
.browser-vpn-manager-user-head small[b-a1u6qhtwdz],
.browser-vpn-manager-device small[b-a1u6qhtwdz] {
    color: #87949a;
    font-size: .78rem;
}

.browser-vpn-manager-close[b-a1u6qhtwdz] {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 210, 57, .28);
    border-radius: 9px;
    color: #dfe5e8;
    background: rgba(5, 10, 12, .8);
    font-size: 1.25rem;
}

.browser-vpn-manager-grid[b-a1u6qhtwdz] {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(380px, 1.1fr);
    gap: 18px;
}

.browser-vpn-manager-create[b-a1u6qhtwdz],
.browser-vpn-manager-users[b-a1u6qhtwdz] {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(3, 8, 10, .62);
}

.browser-vpn-manager-mode[b-a1u6qhtwdz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 15px 0;
}

.browser-vpn-manager-mode button[b-a1u6qhtwdz] {
    min-height: 38px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    color: #aeb8bd;
    background: #10191d;
    font-size: .78rem;
}

.browser-vpn-manager-mode button.active[b-a1u6qhtwdz] {
    border-color: rgba(255, 210, 55, .66);
    color: #171207;
    background: #ffd438;
}

.browser-vpn-manager-field[b-a1u6qhtwdz] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 14px 0;
    color: #dce3e6;
    font-size: .86rem;
    font-weight: 650;
}

.browser-vpn-manager-field input[b-a1u6qhtwdz],
.browser-vpn-manager-field select[b-a1u6qhtwdz] {
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    color: #f5f7f8;
    background: #10191d;
    outline: none;
}

.browser-vpn-manager-field input:focus[b-a1u6qhtwdz],
.browser-vpn-manager-field select:focus[b-a1u6qhtwdz] {
    border-color: rgba(255, 210, 55, .68);
}

.browser-vpn-manager-actions[b-a1u6qhtwdz] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.primary[b-a1u6qhtwdz],
.secondary[b-a1u6qhtwdz],
.revoke[b-a1u6qhtwdz] {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 9px;
    font-weight: 750;
    cursor: pointer;
}

.primary[b-a1u6qhtwdz] {
    border: 1px solid #ffe16a;
    color: #171207;
    background: linear-gradient(180deg, #ffe879 0%, #ffd23a 52%, #e4ae16 100%);
}

.secondary[b-a1u6qhtwdz] {
    border: 1px solid rgba(255, 255, 255, .15);
    color: #dce3e6;
    background: #10191d;
}

.browser-vpn-manager-full[b-a1u6qhtwdz] {
    width: 100%;
    margin-top: 12px;
}

.browser-vpn-manager-code-card[b-a1u6qhtwdz] {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(255, 210, 55, .32);
    border-radius: 11px;
    background: rgba(255, 196, 0, .05);
}

.browser-vpn-manager-code-card .label[b-a1u6qhtwdz],
.browser-vpn-manager-code-card .hint[b-a1u6qhtwdz] {
    color: #8e9a9f;
    font-size: .72rem;
}

.browser-vpn-manager-code-card .code[b-a1u6qhtwdz] {
    margin: 8px 0;
    color: #ffe05c;
    font-family: Consolas, monospace;
    font-size: .78rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

[b-a1u6qhtwdz] .browser-vpn-manager-copy-button {
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
    padding: 0 16px;
    border: 1px solid #ffe16a;
    border-radius: 10px;
    color: #171207;
    background: linear-gradient(180deg, #ffe879 0%, #ffd23a 52%, #e4ae16 100%);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

[b-a1u6qhtwdz] .browser-vpn-manager-copy-button:hover:not(:disabled) {
    filter: brightness(1.04);
    box-shadow: 0 8px 20px rgba(255, 202, 40, .12);
}

[b-a1u6qhtwdz] .browser-vpn-manager-copy-button:active:not(:disabled) {
    transform: translateY(1px);
}

[b-a1u6qhtwdz] .browser-vpn-manager-copy-button:disabled {
    opacity: .55;
    cursor: default;
}

.browser-vpn-manager-users-title span[b-a1u6qhtwdz],
.browser-vpn-manager-count[b-a1u6qhtwdz] {
    color: #ffd43d;
    font-size: .76rem;
}

.browser-vpn-manager-empty[b-a1u6qhtwdz] {
    margin-top: 16px;
    padding: 20px;
    border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: 10px;
    color: #7f8b91;
    text-align: center;
}

.browser-vpn-manager-user-card[b-a1u6qhtwdz] {
    margin-top: 12px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 11px;
    background: #0d1518;
}

.browser-vpn-manager-user-head > div[b-a1u6qhtwdz] {
    display: flex;
    flex-direction: column;
}

.browser-vpn-manager-pending[b-a1u6qhtwdz] {
    margin-top: 8px;
    color: #caa93e;
    font-size: .74rem;
}

.browser-vpn-manager-device[b-a1u6qhtwdz] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.browser-vpn-manager-device.revoked[b-a1u6qhtwdz] {
    opacity: .55;
}

.browser-vpn-manager-device-name[b-a1u6qhtwdz] {
    color: #e9edef;
    font-size: .84rem;
    font-weight: 700;
}

.revoke[b-a1u6qhtwdz] {
    min-height: 32px;
    border: 1px solid rgba(255, 105, 105, .35);
    color: #ff9a9a;
    background: rgba(120, 22, 22, .16);
    font-size: .72rem;
}

.browser-vpn-manager-message[b-a1u6qhtwdz] {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: .78rem;
}

.browser-vpn-manager-message.success[b-a1u6qhtwdz] {
    padding: 0;
    border: 0;
    color: #8e9a9f;
    background: transparent;
    font-style: italic;
}

.browser-vpn-manager-message.error[b-a1u6qhtwdz] {
    border: 1px solid rgba(255, 100, 100, .32);
    color: #ff9d9d;
    background: rgba(125, 22, 22, .14);
}

@media (max-width: 760px) {
    .browser-vpn-manager-button[b-a1u6qhtwdz] {
        width: 100%;
        justify-content: center;
    }

    .browser-vpn-manager-grid[b-a1u6qhtwdz] {
        grid-template-columns: 1fr;
    }

    .browser-vpn-manager-panel[b-a1u6qhtwdz] {
        width: calc(100vw - 18px);
        padding: 15px;
    }
}

.browser-vpn-manager-users-tools[b-a1u6qhtwdz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.browser-vpn-manager-users-tools button[b-a1u6qhtwdz] {
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
    color: #aeb8bd;
    background: #10191d;
    font-size: .68rem;
}

.browser-vpn-manager-endpoint-bar[b-a1u6qhtwdz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -6px 0 16px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    background: rgba(4, 10, 12, .5);
}

.browser-vpn-manager-endpoint-bar > div[b-a1u6qhtwdz] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.browser-vpn-manager-endpoint-bar span[b-a1u6qhtwdz] {
    color: #77858b;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.browser-vpn-manager-endpoint-bar strong[b-a1u6qhtwdz] {
    color: #dfe5e8;
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.browser-vpn-manager-endpoint-toggle[b-a1u6qhtwdz] {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    color: #aeb8bd;
    background: #10191d;
    font-size: .7rem;
    font-weight: 700;
    cursor: pointer;
}

.browser-vpn-manager-endpoint-editor[b-a1u6qhtwdz] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 110px auto;
    align-items: end;
    gap: 10px;
    margin: -6px 0 16px;
    padding: 12px;
    border: 1px solid rgba(255, 210, 55, .18);
    border-radius: 10px;
    background: rgba(255, 196, 0, .035);
}

.browser-vpn-manager-endpoint-editor .browser-vpn-manager-field[b-a1u6qhtwdz] {
    margin: 0;
}

.browser-vpn-manager-endpoint-save[b-a1u6qhtwdz] {
    min-height: 42px;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .browser-vpn-manager-endpoint-editor[b-a1u6qhtwdz] {
        grid-template-columns: 1fr;
    }

    .browser-vpn-manager-endpoint-save[b-a1u6qhtwdz] {
        width: 100%;
    }
}


/* v2.7: обычный пользователь видит только домен; порты скрыты и настраиваются автоматически. */
.browser-vpn-manager-config-warning[b-a1u6qhtwdz] {
    margin: 0 0 1rem;
    padding: .8rem .9rem;
    border: 1px solid rgba(235, 186, 60, .34);
    border-radius: 9px;
    color: #e8d68c;
    background: rgba(77, 59, 12, .16);
    font-size: .78rem;
    line-height: 1.5;
}

.browser-vpn-manager-domain-summary[b-a1u6qhtwdz] {
    margin-top: 1rem;
    padding: .85rem .95rem;
    border: 1px solid rgba(211, 188, 82, .18);
    border-radius: 9px;
    background: rgba(6, 12, 14, .58);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.browser-vpn-manager-domain-summary span[b-a1u6qhtwdz] {
    color: rgba(189, 199, 202, .62);
    font-size: .72rem;
}

.browser-vpn-manager-domain-summary strong[b-a1u6qhtwdz] {
    color: #edf0f1;
    font-size: .82rem;
    overflow-wrap: anywhere;
}

/* Embedded variant reuses the original Browser VPN installation/activation/revocation UI. */
.browser-vpn-manager-panel.embedded[b-a1u6qhtwdz]{position:relative;inset:auto;left:auto;top:auto;transform:none;z-index:auto;max-height:none;overflow:visible;width:100%;box-shadow:none;background:#0a1113;border:1px solid #313a3b;padding:18px;}
@media(max-width:760px){.browser-vpn-manager-panel.embedded .browser-vpn-manager-grid[b-a1u6qhtwdz]{grid-template-columns:1fr}}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-f3ezv2r3ml] {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    background: #030607;
    isolation: isolate;
}


/* =========================================================
   ЕДИНЫЙ ФОН НА ВСЮ ПАНЕЛЬ
   ========================================================= */

.page[b-f3ezv2r3ml]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background-image: url('/images/ninja-panel-bg.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.page[b-f3ezv2r3ml]::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(2, 5, 6, 0.10) 0%,
        rgba(2, 5, 6, 0.15) 25%,
        rgba(2, 5, 6, 0.20) 55%,
        rgba(2, 5, 6, 0.27) 100%
    );
}


/* =========================================================
   ЛЕВАЯ ПАНЕЛЬ
   ========================================================= */

.sidebar[b-f3ezv2r3ml] {
    width: 260px;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 20;
    overflow: hidden;

    background: linear-gradient(
        90deg,
        rgba(2, 7, 9, 0.34) 0%,
        rgba(2, 7, 9, 0.20) 58%,
        rgba(2, 7, 9, 0.08) 100%
    );

    border-right: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.sidebar[b-f3ezv2r3ml]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        radial-gradient(circle at 22% 16%, rgba(255, 193, 0, 0.045), transparent 30%),
        linear-gradient(180deg, rgba(1, 5, 7, 0.07) 0%, rgba(1, 5, 7, 0.03) 45%, rgba(8, 5, 13, 0.10) 100%);
}

.sidebar[b-f3ezv2r3ml]::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 0;
    width: 1px;
    bottom: 450px;
    z-index: 3;
    pointer-events: none;

    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 202, 34, 0.18) 4%,
        rgba(255, 202, 34, 0.36) 14%,
        rgba(255, 202, 34, 0.24) 72%,
        rgba(255, 202, 34, 0.08) 91%,
        transparent 100%
    );

    box-shadow: 0 0 9px rgba(255, 190, 0, 0.08);
}

.sidebar > *[b-f3ezv2r3ml] {
    position: relative;
    z-index: 2;
}


/* =========================================================
   ОСНОВНАЯ ОБЛАСТЬ
   ========================================================= */

.main-shell[b-f3ezv2r3ml] {
    min-width: 0;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.main-shell[b-f3ezv2r3ml]::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 260px;
    z-index: 0;
    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(1, 5, 6, 0.03) 0%,
        rgba(1, 5, 6, 0.07) 40%,
        rgba(1, 5, 6, 0.12) 100%
    );
}

.main-shell[b-f3ezv2r3ml]::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 260px;
    z-index: 0;
    pointer-events: none;

    background:
        radial-gradient(circle at 76% 5%, rgba(255, 193, 0, 0.055), transparent 25%);
}


/* =========================================================
   ВЕРХНЯЯ ПАНЕЛЬ
   ========================================================= */

.top-row[b-f3ezv2r3ml] {
    width: 100%;
    height: 61px;
    position: sticky;
    top: 0;
    z-index: 10;

    display: flex;
    align-items: flex-start;
    justify-content: flex-end;

    padding: 10px 26px 0 !important;

    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
}


/* =========================================================
   КОНТЕНТ
   ========================================================= */

.content[b-f3ezv2r3ml],
.ninja-content[b-f3ezv2r3ml] {
    position: relative;
    z-index: 2;

    width: 100%;
    min-width: 0;
    min-height: calc(100vh - 61px);

    box-sizing: border-box;

    padding: 24px 28px 48px !important;
}


/* =========================================================
   ВЫБОР СЕРВЕРА
   ========================================================= */

.server-switcher[b-f3ezv2r3ml] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 9px;
}

.server-label[b-f3ezv2r3ml] {
    color: rgba(239, 243, 244, 0.88);
    font-size: 0.88rem;
}

.server-select[b-f3ezv2r3ml] {
    min-width: 180px;
    height: 37px;

    padding: 0 34px 0 12px;

    border: 1px solid rgba(255, 203, 38, 0.67);
    border-radius: 8px;

    color: #f8fafb;
    background: rgba(4, 9, 11, 0.68);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    cursor: pointer;
    outline: none;

    font-size: 0.88rem;

    box-shadow: 0 0 15px rgba(255, 188, 0, 0.045);
}

.server-select:hover[b-f3ezv2r3ml],
.server-select:focus[b-f3ezv2r3ml] {
    border-color: #ffd43a;

    box-shadow:
        0 0 0 3px rgba(255, 205, 41, 0.08),
        0 0 14px rgba(255, 196, 0, 0.09);
}

.server-select option[b-f3ezv2r3ml] {
    color: #ffffff;
    background: #080d0f;
}

.no-server[b-f3ezv2r3ml] {
    color: #8e9ba3;
    font-size: 0.88rem;
}


/* =========================================================
   BLAZOR ERROR
   ========================================================= */

#blazor-error-ui[b-f3ezv2r3ml] {
    display: none;
    width: 100%;

    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9999;

    box-sizing: border-box;

    padding: 0.7rem 1.2rem;

    color: #ffffff;
    background: #481a16;

    border-top: 1px solid #ff675d;

    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}

#blazor-error-ui .reload[b-f3ezv2r3ml] {
    margin-left: 8px;
    color: #ffd43a;
}

#blazor-error-ui .dismiss[b-f3ezv2r3ml] {
    position: absolute;
    right: 14px;
    top: 8px;
    cursor: pointer;
}


/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================= */

@media (max-width: 900px) {

    .page[b-f3ezv2r3ml] {
        display: block;
        min-height: 100dvh;

        /*
           Мобильная шапка теперь sticky и остаётся в обычном потоке.
           Поэтому искусственный верхний отступ больше не нужен.
        */
        padding-top: 0 !important;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /*
       МОБИЛЬНАЯ ШАПКА.
       Принудительно фиксируем её относительно viewport.
       !important нужен, чтобы никакие глобальные/старые стили
       не смогли вернуть sticky/relative в Safari.
    */
    .page > .sidebar[b-f3ezv2r3ml],
    .sidebar[b-f3ezv2r3ml] {
        width: 100% !important;
        height: calc(76px + env(safe-area-inset-top)) !important;
        min-height: calc(76px + env(safe-area-inset-top)) !important;
        padding-top: env(safe-area-inset-top) !important;
        box-sizing: border-box;

        /*
           Sticky для iPhone надёжнее fixed:
           шапка остаётся закреплённой сверху, но продолжает занимать
           своё место в потоке страницы и не исчезает при прокрутке.
        */
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;

        margin: 0 !important;

        z-index: 10000 !important;

        overflow: visible !important;
        isolation: isolate;

        background:
            linear-gradient(
                180deg,
                rgba(3, 8, 10, .995),
                rgba(3, 8, 10, .985)
            ) !important;

        border-bottom:
            1px solid rgba(255, 205, 45, .16);

        box-shadow:
            0 6px 18px rgba(0, 0, 0, .22);

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto;
    }

    .sidebar[b-f3ezv2r3ml]::before {
        background:
            radial-gradient(circle at 20% 20%, rgba(255, 193, 0, .065), transparent 34%),
            linear-gradient(180deg, rgba(1, 5, 7, .06), rgba(1, 5, 7, .14));
    }

    .sidebar[b-f3ezv2r3ml]::after {
        display: none;
    }

    /*
       Sticky-шапка остаётся в потоке страницы,
       поэтому дополнительный отступ у main-shell не нужен.
    */
    .main-shell[b-f3ezv2r3ml] {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .main-shell[b-f3ezv2r3ml]::before,
    .main-shell[b-f3ezv2r3ml]::after {
        left: 0;
    }

    /*
       На телефоне сервер выбирается только в верхней шапке NavMenu.
       Старый селектор MainLayout полностью убираем.
    */
    .top-row[b-f3ezv2r3ml] {
        display: none !important;
        visibility: hidden !important;

        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        pointer-events: none !important;
    }

    .content[b-f3ezv2r3ml],
    .ninja-content[b-f3ezv2r3ml] {
        min-height: 0;
        padding: 10px 12px calc(34px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 420px) {

    .content[b-f3ezv2r3ml],
    .ninja-content[b-f3ezv2r3ml] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* =========================================================
   MOBILE/PWA — ЕДИНСТВЕННЫЙ SCROLL-КОНТЕЙНЕР

   Весь экран приложения закреплён относительно viewport.
   Верхняя панель находится вне прокрутки.
   Прокручивается только .main-shell.

   Это устраняет iOS-баг, при котором после сворачивания/раскрытия
   карточек Safari начинал прокручивать весь document и уводил шапку.
   ========================================================= */
@media (max-width: 900px) {

    .page[b-f3ezv2r3ml] {
        position: fixed !important;
        inset: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }

    .page > .sidebar[b-f3ezv2r3ml] {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        flex: 0 0 calc(76px + env(safe-area-inset-top, 0px)) !important;

        width: 100% !important;
        height: calc(76px + env(safe-area-inset-top, 0px)) !important;
        min-height: calc(76px + env(safe-area-inset-top, 0px)) !important;

        margin: 0 !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        box-sizing: border-box !important;

        z-index: 10000 !important;

        overflow: visible !important;

        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto !important;

        background:
            linear-gradient(
                180deg,
                rgba(3, 8, 10, .998),
                rgba(3, 8, 10, .988)
            ) !important;
    }

    .main-shell[b-f3ezv2r3ml] {
        position: relative !important;

        flex: 1 1 auto !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
}



/* Temporarily unavailable server file browser: centered, timed overlay. */
.ninja-files-notice-overlay[b-f3ezv2r3ml] {
    position: fixed;
    inset: 0;
    z-index: 60000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(1, 5, 7, .76);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: ninja-files-overlay-in-b-f3ezv2r3ml .3s ease-out both;
}
.ninja-files-notice-dialog[b-f3ezv2r3ml] {
    width: min(100%, 510px);
    padding: 33px 34px;
    border: 1px solid rgba(245, 204, 77, .55);
    border-radius: 22px;
    background: radial-gradient(circle at 50% 0%, rgba(250, 196, 65, .09), transparent 65%), #0a1012;
    box-shadow: 0 22px 72px rgba(0, 0, 0, .58), 0 0 35px rgba(245, 193, 43, .08);
    color: #f6f5f0;
    text-align: center;
    animation: ninja-files-dialog-in-b-f3ezv2r3ml .3s cubic-bezier(.2,.8,.2,1) both;
}
.ninja-files-notice-icon[b-f3ezv2r3ml] {
    margin-bottom: 16px;
    color: #f6d564;
    font-size: 30px;
}
.ninja-files-notice-dialog p[b-f3ezv2r3ml] {
    margin: 0;
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 600;
    line-height: 1.5;
}
.ninja-files-notice-overlay.is-leaving[b-f3ezv2r3ml] {
    animation: ninja-files-overlay-out-b-f3ezv2r3ml .3s ease-in both;
}
.ninja-files-notice-overlay.is-leaving .ninja-files-notice-dialog[b-f3ezv2r3ml] {
    animation: ninja-files-dialog-out-b-f3ezv2r3ml .3s ease-in both;
}
@keyframes ninja-files-overlay-in-b-f3ezv2r3ml { from {opacity:0} to {opacity:1} }
@keyframes ninja-files-overlay-out-b-f3ezv2r3ml { from {opacity:1} to {opacity:0} }
@keyframes ninja-files-dialog-in-b-f3ezv2r3ml { from {opacity:0;transform:translateY(14px) scale(.97)} to {opacity:1;transform:translateY(0) scale(1)} }
@keyframes ninja-files-dialog-out-b-f3ezv2r3ml { from {opacity:1;transform:translateY(0) scale(1)} to {opacity:0;transform:translateY(-9px) scale(.985)} }
@media (prefers-reduced-motion: reduce) {
    .ninja-files-notice-overlay[b-f3ezv2r3ml],
    .ninja-files-notice-dialog[b-f3ezv2r3ml],
    .ninja-files-notice-overlay.is-leaving[b-f3ezv2r3ml],
    .ninja-files-notice-overlay.is-leaving .ninja-files-notice-dialog[b-f3ezv2r3ml] { animation-duration: .01ms; }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* =========================================================
   ЛОГОТИП NINJA VPN
   ========================================================= */

.sidebar-brand[b-x7j3hbuffd] {
    height: 112px;
    display: flex;
    align-items: center;
    padding: 0 0 0 26px;
    position: relative;
    z-index: 5;
    overflow: visible;
    border-bottom: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.sidebar-brand-link[b-x7j3hbuffd] {
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: visible;
    color: inherit;
    text-decoration: none;
}

.sidebar-brand-title[b-x7j3hbuffd] {
    display: inline-block;
    position: relative;
    font-family: "Brush Script MT", "Segoe Script", "Segoe Print", cursive;
    font-size: 2.15rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: #ffd54a;
    background: linear-gradient( 180deg, #fff1a5 0%, #ffe067 18%, #ffc83e 43%, #d99618 72%, #f0b32c 100% );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: rotate(-3deg) skewX(-3deg);
    transform-origin: center;
    filter: drop-shadow( 0 2px 0 rgba(75, 42, 0, 0.90) ) drop-shadow( 0 0 7px rgba(255, 183, 0, 0.22) ) drop-shadow( 0 5px 10px rgba(0, 0, 0, 0.55) );
}


    .sidebar-brand-title[b-x7j3hbuffd]::after {
        content: "";
        position: absolute;
        left: 10px;
        bottom: -10px;
        width: 72%;
        height: 2px;
        border-radius: 999px;
        opacity: 0.30;
        background: linear-gradient( 90deg, transparent 0%, #e9aa20 16%, #ffd343 48%, #d9981c 82%, transparent 100% );
        transform: rotate(-2deg);
        box-shadow: 0 0 8px rgba(255, 198, 0, 0.18);
    }


/* =========================================================
   ОСНОВНАЯ ЧАСТЬ SIDEBAR
   ========================================================= */

.sidebar-body[b-x7j3hbuffd] {
    height: calc(100vh - 112px);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 4;
    padding: 13px 10px 18px;
    overflow-y: auto;
    background: transparent;
}


.sidebar-nav[b-x7j3hbuffd] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}


    /* =========================================================
   ПУНКТ МЕНЮ
   ========================================================= */

    .sidebar-nav[b-x7j3hbuffd]  .sidebar-link {
        min-height: 55px;
        display: flex;
        align-items: center;
        gap: 14px;
        position: relative;
        padding: 0 17px;
        overflow: hidden;
        border: 1px solid transparent;
        border-radius: 10px;
        color: #c1cbd1;
        background: linear-gradient( 90deg, rgba(3, 8, 10, 0.16), rgba(3, 8, 10, 0.05) );
        text-decoration: none;
        font-size: 0.94rem;
        transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }


        .sidebar-nav[b-x7j3hbuffd]  .sidebar-link::before {
            content: "";
            position: absolute;
            left: 0;
            top: 9px;
            bottom: 9px;
            width: 3px;
            border-radius: 0 3px 3px 0;
            background: transparent;
        }


        .sidebar-nav[b-x7j3hbuffd]  .sidebar-link:hover {
            color: #fff0ba;
            border-color: rgba( 255, 203, 42, 0.13 );
            background: linear-gradient( 90deg, rgba( 255, 194, 0, 0.065 ), rgba( 3, 8, 10, 0.05 ) );
            transform: translateX(2px);
        }


        .sidebar-nav[b-x7j3hbuffd]  .sidebar-link.active {
            color: #ffd73e;
            border-color: rgba( 255, 207, 47, 0.60 );
            background: radial-gradient( circle at 24% 50%, rgba( 255, 197, 0, 0.17 ), transparent 70% ), linear-gradient( 90deg, rgba( 255, 191, 0, 0.12 ), rgba( 4, 9, 10, 0.08 ) );
            box-shadow: inset 0 0 28px rgba( 255, 187, 0, 0.025 ), 0 0 13px rgba( 255, 187, 0, 0.055 );
        }


            .sidebar-nav[b-x7j3hbuffd]  .sidebar-link.active::before {
                background: #ffd438;
                box-shadow: 0 0 10px rgba( 255, 210, 45, 0.55 );
            }


/* =========================================================
   ИКОНКИ
   ========================================================= */

.sidebar-icon[b-x7j3hbuffd] {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.sidebar-nav[b-x7j3hbuffd]  .sidebar-link.active .sidebar-icon {
    filter: drop-shadow( 0 0 5px rgba( 255, 209, 48, 0.30 ) );
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.sidebar-body[b-x7j3hbuffd]::-webkit-scrollbar {
    width: 6px;
}


.sidebar-body[b-x7j3hbuffd]::-webkit-scrollbar-track {
    background: transparent;
}


.sidebar-body[b-x7j3hbuffd]::-webkit-scrollbar-thumb {
    background: rgba( 255, 206, 49, 0.14 );
    border-radius: 999px;
}


    .sidebar-body[b-x7j3hbuffd]::-webkit-scrollbar-thumb:hover {
        background: rgba( 255, 206, 49, 0.24 );
    }


/* =========================================================
   ЛОГОТИП PNG
   ========================================================= */

.sidebar-brand-logo[b-x7j3hbuffd] {
    width: 190px;
    height: auto;
    display: block;
    filter: drop-shadow( 0 0 3px rgba( 255, 220, 90, 0.45 ) ) drop-shadow( 0 0 8px rgba( 255, 185, 35, 0.25 ) ) drop-shadow( 0 0 15px rgba( 255, 155, 0, 0.10 ) );
    transition: filter 0.25s ease, transform 0.25s ease;
}


.sidebar-brand-link:hover .sidebar-brand-logo[b-x7j3hbuffd] {
    filter: drop-shadow( 0 0 4px rgba( 255, 230, 120, 0.65 ) ) drop-shadow( 0 0 10px rgba( 255, 195, 40, 0.38 ) ) drop-shadow( 0 0 18px rgba( 255, 160, 0, 0.16 ) );
    transform: scale(1.015);
}


/* =========================================================
   МОБИЛЬНЫЕ ЭЛЕМЕНТЫ
   ========================================================= */

.sidebar-menu-button[b-x7j3hbuffd],
.sidebar-menu-backdrop[b-x7j3hbuffd],
.sidebar-mobile-server-switcher[b-x7j3hbuffd] {
    display: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .sidebar-brand[b-x7j3hbuffd] {
        height: 76px;
        padding: 0 0 0 16px;
        z-index: 30;
    }

    .sidebar-brand-logo[b-x7j3hbuffd] {
        width: 150px;
    }

    .sidebar-mobile-server-switcher[b-x7j3hbuffd] {
        display: block;
        position: absolute;
        top: calc(18px + env(safe-area-inset-top, 0px));
        left: 180px;
        right: 72px;
        z-index: 30;
    }

    .sidebar-mobile-server-select[b-x7j3hbuffd] {
        width: 100%;
        height: 40px;
        padding: 0 28px 0 10px;
        border: 1px solid rgba(255, 203, 38, .58);
        border-radius: 9px;
        color: #f7f9fa;
        background: rgba(4, 9, 11, .92);
        outline: none;
        font-size: .78rem;
        box-shadow: 0 0 14px rgba(255, 190, 0, .05);
    }

    .sidebar-mobile-server-select:focus[b-x7j3hbuffd] {
        border-color: #ffd43a;
        box-shadow: 0 0 0 3px rgba(255, 205, 41, .07);
    }

    .sidebar-mobile-server-select option[b-x7j3hbuffd] {
        color: #fff;
        background: #080d0f;
    }

    .sidebar-mobile-no-server[b-x7j3hbuffd] {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #89969e;
        border: 1px solid rgba(255, 203, 38, .24);
        border-radius: 9px;
        background: rgba(4, 9, 11, .90);
    }

    .sidebar-body[b-x7j3hbuffd] {
        width: min(64vw, 330px);
        height: auto;
        max-height: calc(100dvh - 96px - env(safe-area-inset-top, 0px));

        display: flex;

        position: fixed;
        top: calc(84px + env(safe-area-inset-top, 0px));
        left: auto;
        right: 8px;

        z-index: 20;

        padding: 12px;
        overflow: hidden;

        border: 1px solid rgba(255, 207, 47, .42);
        border-radius: 16px;

        background:
            radial-gradient(circle at 20% 0%, rgba(255, 196, 0, .10), transparent 38%),
            linear-gradient(180deg, rgba(7, 11, 12, .995), rgba(4, 8, 10, .995));

        box-shadow:
            0 18px 45px rgba(0, 0, 0, .62),
            0 0 22px rgba(255, 190, 0, .07);

        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        touch-action: none;
        overscroll-behavior: none;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateX(calc(100% + 18px));

        transition:
            transform .34s cubic-bezier(.22, .82, .24, 1),
            opacity .24s ease,
            visibility 0s linear .34s;
    }

    .sidebar-body.is-open[b-x7j3hbuffd] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateX(0);

        transition:
            transform .34s cubic-bezier(.22, .82, .24, 1),
            opacity .24s ease,
            visibility 0s linear 0s;
    }

    .sidebar-nav[b-x7j3hbuffd] {
        gap: 7px;
    }

    .sidebar-nav[b-x7j3hbuffd]  .sidebar-link {
        min-height: 56px;
        padding: 0 16px;
        font-size: .95rem;
    }

    .sidebar-menu-button[b-x7j3hbuffd] {
        width: 46px;
        height: 42px;
        display: flex;
        position: fixed !important;
        right: 14px !important;
        top: calc(17px + env(safe-area-inset-top, 0px)) !important;
        z-index: 60 !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        padding: 0;
        border: 1px solid rgba(255, 207, 47, .52);
        border-radius: 10px;
        color: #ffd438;
        background: rgba(6, 10, 12, .96);
        box-shadow:
            0 0 16px rgba(255, 196, 0, .07),
            inset 0 0 12px rgba(255, 207, 47, .025);
        cursor: pointer;
        touch-action: manipulation;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
    }

    .sidebar-menu-button span[b-x7j3hbuffd] {
        width: 20px;
        height: 2px;
        display: block;
        border: 0;
        border-radius: 0;
        background: #ffd438;
        pointer-events: none;
    }

    .sidebar-menu-button.is-open span[b-x7j3hbuffd] {
        display: none;
    }

    .sidebar-menu-button.is-open[b-x7j3hbuffd]::before,
    .sidebar-menu-button.is-open[b-x7j3hbuffd]::after {
        content: "";
        width: 24px;
        height: 2px;
        position: absolute;
        left: 50%;
        top: 50%;
        border: 0;
        border-radius: 0;
        background: #ffd438;
        transform-origin: center;
        pointer-events: none;
    }

    .sidebar-menu-button.is-open[b-x7j3hbuffd]::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .sidebar-menu-button.is-open[b-x7j3hbuffd]::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .sidebar-menu-backdrop[b-x7j3hbuffd] {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 10 !important;

        width: 100vw !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;

        background: rgba(0, 0, 0, .58) !important;

        opacity: 0;
        visibility: hidden;
        pointer-events: none !important;

        touch-action: none !important;
        overscroll-behavior: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        -webkit-tap-highlight-color: transparent;

        transition:
            opacity .28s ease,
            visibility 0s linear .28s;
    }

    .sidebar-menu-backdrop.is-open[b-x7j3hbuffd] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto !important;

        transition:
            opacity .28s ease,
            visibility 0s linear 0s;
    }
}


@media (max-width: 420px) {

    .sidebar-brand[b-x7j3hbuffd] {
        padding-left: 13px;
    }


    .sidebar-brand-logo[b-x7j3hbuffd] {
        width: 138px;
    }


    .sidebar-mobile-server-switcher[b-x7j3hbuffd] {
        left: 163px;
        right: 68px;
    }


    .sidebar-mobile-server-select[b-x7j3hbuffd] {
        font-size: .74rem;
        padding-left: 8px;
        padding-right: 24px;
    }


    .sidebar-menu-button[b-x7j3hbuffd] {
        right: 10px !important;
    }
}


/* =========================================================
   МЕНЮ ОТКРЫВАЕТСЯ И ЗАКРЫВАЕТСЯ ЧЕРЕЗ TRANSITION
   ========================================================= */

@media (max-width: 420px) {
    .sidebar-body[b-x7j3hbuffd] {
        width: min(66vw, 300px);
        right: 6px;
    }
}


/* =========================================================
   ACCOUNT / LOGOUT
   ========================================================= */

.sidebar-account[b-x7j3hbuffd] {
    margin-top: auto;
    padding: 11px 7px 0;
    border-top: 1px solid rgba(255, 207, 47, .13);
}

.sidebar-account-row[b-x7j3hbuffd] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 2px 8px;
}

.sidebar-account-settings-button[b-x7j3hbuffd] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 218, 73, .40);
    border-radius: 8px;
    color: #f0d14e;
    background: rgba(31, 25, 7, .58);
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.sidebar-account-settings-button:hover[b-x7j3hbuffd] {
    transform: translateY(-1px);
    color: #ffe36f;
    border-color: rgba(255, 224, 95, .72);
    background: rgba(47, 37, 9, .72);
}

.sidebar-account-settings-button svg[b-x7j3hbuffd] {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-account-name[b-x7j3hbuffd] {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 2px;
    margin: 0;
}

.sidebar-account-name span[b-x7j3hbuffd] {
    color: #69757b;
    font-size: .61rem;
}

.sidebar-account-name strong[b-x7j3hbuffd] {
    max-width: 100%;
    overflow: hidden;
    color: #d6dde0;
    font-size: .78rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-logout-form[b-x7j3hbuffd] {
    margin: 0 2px;
}

.sidebar-logout-button[b-x7j3hbuffd] {
    width: 205px;
    max-width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid rgba(255, 115, 93, .27);
    border-radius: 8px;
    color: #d9877c;
    background: rgba(37, 10, 7, .22);
    font: inherit;
    font-size: .71rem;
    font-weight: 750;
    cursor: pointer;
}

.sidebar-logout-button:hover[b-x7j3hbuffd] {
    color: #ff9b8e;
    border-color: rgba(255, 118, 97, .46);
    background: rgba(61, 15, 10, .32);
}

.sidebar-logout-button svg[b-x7j3hbuffd] {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-mobile-logout-button[b-x7j3hbuffd],
.sidebar-mobile-logout-confirm[b-x7j3hbuffd] {
    display: none;
}

@media (max-width: 900px) {
    .sidebar-account[b-x7j3hbuffd] {
        position: relative;
        padding: 10px 4px 0;
    }

    .sidebar-account-row[b-x7j3hbuffd] {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        align-items: center;
        gap: 9px;
        margin: 0;
    }

    .sidebar-account-settings-button[b-x7j3hbuffd] {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .sidebar-account-name[b-x7j3hbuffd] {
        display: grid;
        gap: 2px;
    }

    .sidebar-logout-form[b-x7j3hbuffd] {
        display: none;
    }

    .sidebar-mobile-logout-button[b-x7j3hbuffd] {
        min-width: 88px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 11px;
        border: 1px solid rgba(255, 115, 93, .34);
        border-radius: 8px;
        color: #e5978d;
        background: rgba(37, 10, 7, .28);
        font: inherit;
        font-size: .72rem;
        font-weight: 800;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .sidebar-mobile-logout-button:active[b-x7j3hbuffd] {
        transform: scale(.97);
        color: #ffaaa0;
        border-color: rgba(255, 118, 97, .52);
        background: rgba(61, 15, 10, .40);
    }

    .sidebar-mobile-logout-button svg[b-x7j3hbuffd] {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .sidebar-mobile-logout-confirm[b-x7j3hbuffd] {
        display: block;
        position: absolute;
        left: 4px;
        right: 4px;
        bottom: 52px;
        z-index: 80;
        padding: 13px;
        border: 1px solid rgba(255, 210, 57, .58);
        border-radius: 11px;
        background:
            radial-gradient(circle at 88% 0%, rgba(255, 194, 20, .07), transparent 38%),
            linear-gradient(180deg, rgba(7, 12, 14, .995), rgba(3, 8, 10, .995));
        box-shadow:
            0 16px 36px rgba(0, 0, 0, .56),
            0 0 18px rgba(255, 193, 23, .07);
    }

    .sidebar-mobile-logout-confirm-title[b-x7j3hbuffd] {
        color: #f1d25a;
        font-size: .88rem;
        font-weight: 850;
        text-align: center;
    }

    .sidebar-mobile-logout-confirm-actions[b-x7j3hbuffd] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 11px;
    }

    .sidebar-mobile-logout-confirm-form[b-x7j3hbuffd] {
        margin: 0;
    }

    .sidebar-mobile-logout-cancel[b-x7j3hbuffd],
    .sidebar-mobile-logout-confirm-button[b-x7j3hbuffd] {
        width: 100%;
        min-height: 38px;
        border-radius: 8px;
        font: inherit;
        font-size: .72rem;
        font-weight: 800;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .sidebar-mobile-logout-cancel[b-x7j3hbuffd] {
        border: 1px solid rgba(203, 211, 214, .22);
        color: #bdc6ca;
        background: rgba(6, 12, 14, .78);
    }

    .sidebar-mobile-logout-confirm-button[b-x7j3hbuffd] {
        border: 1px solid rgba(255, 115, 93, .48);
        color: #ff9e92;
        background: rgba(54, 13, 9, .54);
    }

    .sidebar-mobile-logout-cancel:active[b-x7j3hbuffd],
    .sidebar-mobile-logout-confirm-button:active[b-x7j3hbuffd] {
        transform: scale(.97);
    }
}


/* =========================================================
   ACCOUNT POPUP — SIDEBAR DISMISS ZONE
   Пока окно учётной записи открыто, вся левая панель неактивна:
   любой клик по ней только закрывает окно.
   ========================================================= */

.sidebar-account-dismiss-overlay[b-x7j3hbuffd] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 260px !important;
    z-index: 100000 !important;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    cursor: default;
}

@media (max-width: 900px) {
    .sidebar-account-dismiss-overlay[b-x7j3hbuffd] {
        display: none !important;
    }
}

@media (max-width: 420px) {
    .sidebar-account-row[b-x7j3hbuffd] {
        gap: 7px;
    }

    .sidebar-mobile-logout-button[b-x7j3hbuffd] {
        min-width: 82px;
        padding-left: 9px;
        padding-right: 9px;
        font-size: .70rem;
    }
}

/* =========================================================
   FINAL iPHONE/PWA MOBILE HEADER CHILDREN
   Логотип, выбор сервера и кнопка меню живут внутри одной
   fixed-шапки MainLayout и больше не позиционируются отдельно
   относительно viewport.
   ========================================================= */
@media (max-width: 900px) {

    .sidebar-mobile-server-switcher[b-x7j3hbuffd] {
        position: absolute !important;
        top: calc(18px + env(safe-area-inset-top, 0px)) !important;
        left: 180px !important;
        right: 72px !important;
    }

    .sidebar-menu-button[b-x7j3hbuffd] {
        position: absolute !important;
        top: calc(17px + env(safe-area-inset-top, 0px)) !important;
        right: 14px !important;
    }

    .sidebar-body[b-x7j3hbuffd] {
        position: absolute !important;
        top: calc(84px + env(safe-area-inset-top, 0px)) !important;
        right: 8px !important;
        left: auto !important;
    }
}

@media (max-width: 420px) {
    .sidebar-mobile-server-switcher[b-x7j3hbuffd] {
        left: 163px !important;
        right: 68px !important;
    }

    .sidebar-menu-button[b-x7j3hbuffd] {
        right: 10px !important;
    }
}

/* =========================================================
   MOBILE: скрываем кнопку меню, когда drawer уже открыт.
   Закрытие остаётся по тапу на затемнённую область.
   ========================================================= */
@media (max-width: 900px) {
    .sidebar-menu-button.is-open[b-x7j3hbuffd] {
        display: none !important;
    }
}



/* =========================================================
   FILES — desktop only
   ========================================================= */

@media (max-width: 900px) {
    .sidebar-nav[b-x7j3hbuffd]  .server-files-nav-link {
        display: none !important;
    }
}


/* The Files item is still clickable, but never navigates to an unfinished page. */
.sidebar-nav[b-x7j3hbuffd]  .ninja-files-unavailable-link {
    width: 100%;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    opacity: .73;
}
.sidebar-nav[b-x7j3hbuffd]  .ninja-files-unavailable-link:hover,
.sidebar-nav[b-x7j3hbuffd]  .ninja-files-unavailable-link:focus-visible {
    opacity: 1;
    color: #f6d564;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-xgssuxeawh],
.components-reconnect-repeated-attempt-visible[b-xgssuxeawh],
.components-reconnect-failed-visible[b-xgssuxeawh],
.components-pause-visible[b-xgssuxeawh],
.components-resume-failed-visible[b-xgssuxeawh],
.components-rejoining-animation[b-xgssuxeawh] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-xgssuxeawh],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-xgssuxeawh],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-xgssuxeawh],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-xgssuxeawh],
#components-reconnect-modal.components-reconnect-retrying[b-xgssuxeawh],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-xgssuxeawh],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-xgssuxeawh],
#components-reconnect-modal.components-reconnect-failed[b-xgssuxeawh],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-xgssuxeawh] {
    display: block;
}


#components-reconnect-modal[b-xgssuxeawh] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-xgssuxeawh 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-xgssuxeawh 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-xgssuxeawh 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-xgssuxeawh]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-xgssuxeawh 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-xgssuxeawh {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-xgssuxeawh {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-xgssuxeawh {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-xgssuxeawh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-xgssuxeawh] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-xgssuxeawh] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-xgssuxeawh] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-xgssuxeawh] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-xgssuxeawh] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-xgssuxeawh] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-xgssuxeawh 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-xgssuxeawh] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-xgssuxeawh {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/MultiVlessManager.razor.rz.scp.css */

/* Ninja VPN: VLESS user wizard */
.multi-vless-root[b-r0wayckh7y] {color:#e6ebed;min-width:0}
.multi-vless-heading[b-r0wayckh7y] {display:flex;align-items:center;gap:13px;margin:0 0 17px;min-width:0}
.multi-vless-heading-symbol[b-r0wayckh7y] {display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;border:1px solid #374144;background:#171f22;color:#edce6a;font-size:1.6rem}
.multi-vless-heading-text[b-r0wayckh7y] {min-width:0;flex:1}
.multi-vless-heading h3[b-r0wayckh7y] {color:#fff;font-size:1.12rem;font-weight:750;margin:0 0 4px}
.multi-vless-heading p[b-r0wayckh7y] {font-size:.8rem;line-height:1.45;color:#98a5ab;margin:0}
.multi-vless-heading-mark[b-r0wayckh7y] {margin-left:auto;color:#e7c658;white-space:nowrap;font-size:1.85rem;line-height:1;text-align:right}
.multi-vless-heading-mark small[b-r0wayckh7y] {display:block;font-size:.6rem;letter-spacing:.035em;margin-top:5px}
.multi-vless-grid[b-r0wayckh7y] {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:14px;margin-top:12px;align-items:stretch}
.multi-vless-column[b-r0wayckh7y] {background:#0d1518;border:1px solid #293437;border-radius:15px;padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.multi-vless-column h4[b-r0wayckh7y],.multi-vless-result h4[b-r0wayckh7y] {font-size:.99rem;color:#f3f6f7;font-weight:750;margin:0}
.multi-vless-column-title[b-r0wayckh7y] {display:flex;align-items:center;gap:9px}
.multi-vless-column-title span[b-r0wayckh7y] {color:#f1cd66;font-size:1.1rem}
.multi-vless-field[b-r0wayckh7y] {display:flex;flex-direction:column;gap:7px;font-size:.84rem;font-weight:650;min-width:0}
.multi-vless-field>span:first-child[b-r0wayckh7y] {color:#dce2e4}
.multi-vless-field input:not([type="checkbox"])[b-r0wayckh7y],.multi-vless-field select[b-r0wayckh7y],.multi-vless-field textarea[b-r0wayckh7y] {
 width:100%;min-height:43px;border:1px solid #344044;border-radius:10px;background:#080e10;color:#f1f5f6;
 padding:10px 12px;outline:none;transition:border-color .17s,box-shadow .17s
}
.multi-vless-field textarea[b-r0wayckh7y] {resize:vertical;min-height:78px;line-height:1.45}
.multi-vless-field input:focus-visible[b-r0wayckh7y],.multi-vless-field select:focus-visible[b-r0wayckh7y],.multi-vless-field textarea:focus-visible[b-r0wayckh7y] {border-color:#e3bc52;box-shadow:0 0 0 2px rgba(238,207,106,.13)}
.multi-vless-field small[b-r0wayckh7y],.multi-vless-result p[b-r0wayckh7y],.multi-vless-note[b-r0wayckh7y],.multi-vless-sharing-actions small[b-r0wayckh7y] {color:#96a3a9;font-size:.76rem;line-height:1.5;font-weight:400;margin:0}
.multi-vless-server-list[b-r0wayckh7y] {display:grid;gap:7px;max-height:290px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3b4547 transparent}
.multi-vless-server-option[b-r0wayckh7y] {
 display:flex;align-items:center;gap:11px;padding:10px 12px;min-width:0;
 border:1px solid #334044;border-radius:11px;background:#10191c;cursor:pointer;
 transition:background .15s,border-color .15s
}
.multi-vless-server-option:hover[b-r0wayckh7y] {background:#172225}
.multi-vless-server-option.is-selected[b-r0wayckh7y] {border-color:#bb9a4a;background:#192120}
.multi-vless-server-option.is-locked[b-r0wayckh7y] {cursor:default}
.multi-vless-server-option input[b-r0wayckh7y] {accent-color:#efd16a;width:16px;height:16px;flex:none;margin:0}
.multi-vless-server-flag[b-r0wayckh7y] {font-size:1.45rem;line-height:1;flex:none}
.multi-vless-server-details[b-r0wayckh7y] {min-width:0;display:grid;flex:1;gap:3px}
.multi-vless-server-details strong[b-r0wayckh7y] {color:#f3f5f6;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.multi-vless-server-details small[b-r0wayckh7y] {color:#9da9ae;font-size:.72rem}
.multi-vless-server-badge[b-r0wayckh7y] {flex:none;font-size:.66rem;color:#9bdbb2;background:#133024;border-radius:6px;padding:4px 6px}
.multi-vless-server-locked[b-r0wayckh7y] {color:#b3bfc3;font-size:.69rem}
.multi-vless-mode-grid[b-r0wayckh7y] {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.multi-vless-mode[b-r0wayckh7y] {
 min-width:0;min-height:115px;padding:11px 7px 10px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
 text-align:center;cursor:pointer;background:#10191c;color:#c4ced1;border:1px solid #344044;border-radius:11px;
 transition:border-color .16s,background .16s
}
.multi-vless-mode:hover:not(:disabled)[b-r0wayckh7y] {background:#192123;border-color:#70716a}
.multi-vless-mode.is-selected[b-r0wayckh7y] {
 background:linear-gradient(150deg,rgba(234,189,60,.13),#10191c 80%);
 color:#f7f9f8;border-color:#efc44f;box-shadow:inset 0 0 0 1px rgba(242,206,100,.17);
}
.multi-vless-mode:disabled[b-r0wayckh7y] {opacity:.55;cursor:default}
.multi-vless-mode-symbol[b-r0wayckh7y] {color:#ecc967;font-size:1.25rem;line-height:1}
.multi-vless-mode strong[b-r0wayckh7y] {font-size:.73rem;font-weight:700;line-height:1.22}
.multi-vless-mode small[b-r0wayckh7y] {font-size:.65rem;font-weight:400;color:#96a3a7;line-height:1.25}
.multi-vless-mode-radio[b-r0wayckh7y] {height:12px;width:12px;border-radius:50%;border:1px solid #637074;margin-top:2px}
.multi-vless-mode.is-selected .multi-vless-mode-radio[b-r0wayckh7y] {border:3px solid #eeca5e;background:#251f0e}
.multi-vless-route-summary[b-r0wayckh7y] {display:flex;align-items:center;gap:9px;padding:0 2px;flex-wrap:wrap}
.multi-vless-route-badge[b-r0wayckh7y] {display:inline-flex;align-items:center;border:1px solid #655c39;border-radius:6px;padding:4px 8px;font-size:.71rem;font-weight:700}
.multi-vless-route-badge.vpn[b-r0wayckh7y] {color:#e8ca6b;background:#292514}
.multi-vless-route-badge.direct[b-r0wayckh7y] {color:#99d0b0;background:#13251d;border-color:#2f5542}
.multi-vless-route-arrow[b-r0wayckh7y] {font-size:1rem;color:#7e8a8d}
.multi-vless-advanced[b-r0wayckh7y] {background:#101719;border:1px solid #30383b;border-radius:10px;padding:10px 12px}
.multi-vless-advanced summary[b-r0wayckh7y] {display:flex;align-items:center;gap:7px;color:#b5c0c3;font-size:.75rem;cursor:pointer}
.multi-vless-advanced summary[b-r0wayckh7y]::before {content:"⌄";display:inline-block;color:#e7c461;transition:transform .12s}
.multi-vless-advanced[open] summary[b-r0wayckh7y]::before {transform:rotate(180deg)}
.multi-vless-advanced summary span[b-r0wayckh7y] {margin-left:auto;color:#87969a;font-size:.68rem}
.multi-vless-advanced .multi-vless-field[b-r0wayckh7y] {margin-top:12px}
.multi-vless-note[b-r0wayckh7y] {display:flex;align-items:center;gap:10px;background:#101b19;border:1px solid #2b4e40;border-radius:10px;padding:14px}
.multi-vless-note span[b-r0wayckh7y] {color:#8ed5a7;font-weight:800}
.multi-vless-actions[b-r0wayckh7y] {
 position:sticky;bottom:0;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:12px;
 margin:14px 0 0;padding:16px 18px;background:rgba(12,18,20,.97);border:1px solid #293437;
 border-radius:12px;box-shadow:0 -8px 20px rgba(0,0,0,.35);backdrop-filter:blur(8px)
}
.multi-vless-primary[b-r0wayckh7y],.multi-vless-secondary[b-r0wayckh7y],.multi-vless-cancel[b-r0wayckh7y] {min-height:45px;padding:10px 16px;border-radius:9px;font-weight:730;font-size:.86rem;cursor:pointer}
.multi-vless-primary[b-r0wayckh7y] {background:#f3d46f;color:#171406;border:1px solid #f3d46f}
.multi-vless-primary:hover:not(:disabled)[b-r0wayckh7y] {background:#ffe38a}
.multi-vless-secondary[b-r0wayckh7y] {background:#151a1b;border:1px solid #806c31;color:#e4c569}
.multi-vless-cancel[b-r0wayckh7y] {background:#11181a;border:1px solid #465053;color:#e0e6e8;margin-right:auto}
.multi-vless-primary:disabled[b-r0wayckh7y],.multi-vless-secondary:disabled[b-r0wayckh7y],.multi-vless-cancel:disabled[b-r0wayckh7y] {opacity:.45;cursor:default}
.multi-vless-message[b-r0wayckh7y] {white-space:pre-line;margin:13px 0;padding:12px 14px;border:1px solid rgba(236,190,70,.28);border-radius:10px;color:#ead087;background:#10140f;font-size:.8rem}
.multi-vless-result[b-r0wayckh7y] {display:grid;gap:14px;border:1px solid #3b3b2b;border-radius:14px;margin-top:14px;padding:17px;background:#0b1113}
.multi-vless-sharing[b-r0wayckh7y] {display:flex;align-items:flex-start;gap:18px}
.multi-vless-sharing img[b-r0wayckh7y] {background:#fff;border-radius:10px;padding:6px;width:156px;max-width:42%;height:auto}
.multi-vless-sharing-actions[b-r0wayckh7y] {display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.multi-vless-sharing-actions[b-r0wayckh7y]  button {max-width:100%}
.multi-vless-root[b-r0wayckh7y]  .ninja-route-set {border-color:#354043;background:#10191b}
.multi-vless-root[b-r0wayckh7y]  .ninja-route-view {border-color:#495357}
.multi-vless-root button:focus-visible[b-r0wayckh7y] {outline:2px solid #efd16a;outline-offset:2px}
@media(max-width:940px) {
 .multi-vless-grid[b-r0wayckh7y] {grid-template-columns:1fr}
 .multi-vless-heading-mark[b-r0wayckh7y] {display:none}
 .multi-vless-column[b-r0wayckh7y] {padding:16px}
}
@media(max-width:580px) {
 .multi-vless-mode[b-r0wayckh7y] {min-height:103px;padding:9px 5px}
 .multi-vless-mode strong[b-r0wayckh7y] {font-size:.68rem}
 .multi-vless-mode small[b-r0wayckh7y] {font-size:.6rem}
 .multi-vless-actions[b-r0wayckh7y] {padding:12px 10px;flex-wrap:wrap}
 .multi-vless-primary[b-r0wayckh7y] {flex:1}
 .multi-vless-server-badge[b-r0wayckh7y] {font-size:.61rem}
 .multi-vless-sharing[b-r0wayckh7y] {flex-direction:column}
 .multi-vless-sharing img[b-r0wayckh7y] {max-width:100%}
}


/* --- Ninja VPN · VLESS reference composition (no behavioral changes) --- */
.multi-vless-root[b-r0wayckh7y] {
  min-width:0;background:linear-gradient(150deg,#12181a,#0d1315 68%);border:1px solid rgba(193,158,66,.32);border-radius:15px;
  padding:16px 17px 13px;color:#e5eaec;
}
.multi-vless-heading[b-r0wayckh7y] {gap:11px;margin:0 0 14px;align-items:center}
.multi-vless-heading-text h3[b-r0wayckh7y] {font-size:1.08rem;font-weight:780;color:#f8f8f7;margin:0 0 4px}
.multi-vless-heading-text p[b-r0wayckh7y] {font-size:.72rem;color:#a9b3b7}
.multi-vless-heading-brand[b-r0wayckh7y] {display:flex;align-items:center;gap:9px;margin-left:auto;flex:none;color:#ecd06b}
.multi-vless-heading-brand svg[b-r0wayckh7y] {width:43px;height:31px;filter:drop-shadow(0 0 5px rgba(245,203,64,.1))}
.multi-vless-heading-brand>span[b-r0wayckh7y] {display:flex;flex-direction:column;color:#939ea2;font-size:.68rem;font-weight:680;line-height:1.1;gap:5px;letter-spacing:.06em}
.multi-vless-heading-brand small[b-r0wayckh7y] {background:rgba(208,173,62,.16);border-radius:6px;padding:4px 6px;color:#e5c768;font-size:.56rem;letter-spacing:0;white-space:nowrap}
.multi-vless-grid[b-r0wayckh7y] {grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:11px;margin-top:12px}
.multi-vless-column[b-r0wayckh7y] {gap:11px;padding:15px 14px 14px;border:1px solid #303b3f;border-radius:14px;background:linear-gradient(150deg,#151e21,#0e1518 80%)}
.multi-vless-column h4[b-r0wayckh7y] {font-size:.87rem;font-weight:750}
.multi-vless-column-title[b-r0wayckh7y] {display:flex;align-items:center;gap:7px}
.multi-vless-column-title svg[b-r0wayckh7y] {width:20px;height:20px;color:#edd06a;fill:none;flex:none}
.multi-vless-hint-icon[b-r0wayckh7y] {display:grid;place-items:center;margin-left:auto;border:1px solid #6e777a;border-radius:50%;width:17px;height:17px;color:#8e9da3;font-size:.72rem;line-height:1;font-weight:600}
.multi-vless-column-caption[b-r0wayckh7y] {color:#929da1;font-size:.7rem;margin:-5px 0 1px;line-height:1.35}
.multi-vless-field[b-r0wayckh7y] {gap:6px;font-size:.76rem;font-weight:690}
.multi-vless-field>span:first-child[b-r0wayckh7y] {color:#dce2e4}
.multi-vless-field input:not([type="checkbox"])[b-r0wayckh7y],.multi-vless-field select[b-r0wayckh7y],.multi-vless-field textarea[b-r0wayckh7y] {background:#101719;border-color:#384447;min-height:39px;border-radius:10px;padding:9px 11px;font-size:.76rem}
.multi-vless-field textarea[b-r0wayckh7y] {min-height:69px;max-height:160px;resize:vertical}
.multi-vless-input-shell[b-r0wayckh7y] {display:flex;align-items:center;position:relative;min-width:0}
.multi-vless-input-shell>svg[b-r0wayckh7y] {position:absolute;left:11px;top:50%;transform:translateY(-50%);width:19px;height:19px;pointer-events:none;color:#aab6ba;fill:none;z-index:1}
.multi-vless-input-shell input:not([type="checkbox"])[b-r0wayckh7y],.multi-vless-input-shell select[b-r0wayckh7y] {min-width:0;width:100%;padding-left:39px;border-color:#394347;background:#11181b;min-height:39px}
.multi-vless-input-shell select[b-r0wayckh7y] {appearance:auto;padding-right:17px}
.multi-vless-field .multi-vless-help[b-r0wayckh7y] {margin:0;font-size:.68rem;color:#929ea3}
.multi-vless-caption-icon[b-r0wayckh7y] {display:inline-flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap;color:#ebeff0}
.multi-vless-caption-icon svg[b-r0wayckh7y] {width:19px;height:19px;color:#eacc67;fill:none;flex:none}
.multi-vless-caption-icon em[b-r0wayckh7y] {color:#e6c965;font-style:normal}
.multi-vless-caption-icon small[b-r0wayckh7y] {font-size:.66rem;font-weight:400;color:#9dabae}
.multi-vless-server-list[b-r0wayckh7y] {border:1px solid #334144;border-radius:10px;gap:0;max-height:175px;overflow-y:auto;background:#11181b}
.multi-vless-server-option[b-r0wayckh7y] {padding:7px 9px;min-height:42px;gap:8px;border:0!important;border-radius:0;background:transparent;box-shadow:none}
.multi-vless-server-option+.multi-vless-server-option[b-r0wayckh7y] {border-top:1px solid #293336!important}
.multi-vless-server-option:hover:not(.is-locked)[b-r0wayckh7y] {background:#1b2425}
.multi-vless-server-option.is-selected[b-r0wayckh7y] {background:rgba(218,177,59,.095)}
.multi-vless-server-option input[b-r0wayckh7y] {width:15px;height:15px;accent-color:#eacb69}
.multi-vless-server-flag[b-r0wayckh7y] {display:grid;place-items:center;font-size:1.4rem;width:24px;height:24px;flex:0 0 24px;border-radius:50%;overflow:hidden;background:#182124}
.multi-vless-server-flag img[b-r0wayckh7y] {display:block;width:24px;height:24px;object-fit:cover;border-radius:50%}
.multi-vless-server-details[b-r0wayckh7y] {display:flex;align-items:center;gap:5px;min-width:0;flex:1}
.multi-vless-server-details strong[b-r0wayckh7y] {font-size:.72rem;font-weight:750;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.multi-vless-server-details small[b-r0wayckh7y] {display:none}
.multi-vless-server-code[b-r0wayckh7y] {font-size:.62rem;font-weight:600;color:#aebbc0;margin-right:4px}
.multi-vless-server-badge[b-r0wayckh7y] {border-radius:6px;padding:4px 6px;font-size:.59rem;white-space:nowrap}
.multi-vless-mode-grid[b-r0wayckh7y] {gap:7px;grid-template-columns:repeat(3,minmax(0,1fr))}
.multi-vless-mode[b-r0wayckh7y] {min-height:117px;gap:6px;padding:10px 4px;justify-content:center;background:linear-gradient(170deg,#141d20,#101619);border:1px solid #394346;border-radius:11px}
.multi-vless-mode.is-selected[b-r0wayckh7y] {background:linear-gradient(145deg,#1c221c,#111819 80%);border:1.7px solid #f2cf67;box-shadow:0 0 9px rgba(228,186,67,.12),inset 0 0 0 1px rgba(243,206,94,.15)}
.multi-vless-mode-symbol[b-r0wayckh7y] {width:25px;height:25px;flex:none;fill:none;color:#eac862}
.multi-vless-mode strong[b-r0wayckh7y] {font-size:.66rem;line-height:1.35;font-weight:720;overflow-wrap:anywhere}
.multi-vless-mode small[b-r0wayckh7y] {font-size:.64rem;line-height:1.3;color:#a2adb1}
.multi-vless-mode-radio[b-r0wayckh7y] {height:13px;width:13px;margin-top:3px;border-color:#6d797b}
.multi-vless-mode.is-selected .multi-vless-mode-radio[b-r0wayckh7y] {background:#2a230f;border-color:#f2d06d}
.multi-vless-mode-label[b-r0wayckh7y] {font-size:.75rem}
.multi-vless-optional-field[b-r0wayckh7y] {gap:7px}
.multi-vless-note[b-r0wayckh7y] {font-size:.76rem;line-height:1.5;padding:12px;border-radius:9px;background:#151d1a}
.multi-vless-actions[b-r0wayckh7y] {margin:15px 0 0!important;padding:14px 0 0!important;border:0!important;border-top:1px solid #30393a!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;display:flex;gap:11px;justify-content:space-between;align-items:center;position:sticky;bottom:0;z-index:8}
.multi-vless-cancel[b-r0wayckh7y] {height:45px;min-width:132px;flex:0 0 132px;background:#141b1d;border:1px solid #455154;color:#e5e9ea}
.multi-vless-actions .multi-vless-primary[b-r0wayckh7y] {flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px;min-height:45px;background:linear-gradient(155deg,#ffe38b,#eac45b);border-color:#e4bf5a;color:#181406}
.multi-vless-actions .multi-vless-secondary[b-r0wayckh7y] {flex:none;min-height:45px}
.multi-vless-action-icon[b-r0wayckh7y] {width:23px;height:23px;fill:none;color:#251b07;flex:none}
.multi-vless-result[b-r0wayckh7y] {border:1px solid #4b4733;border-radius:12px;padding:14px;margin:15px 0 0;background:#0e1517}
.multi-vless-sharing img[b-r0wayckh7y] {width:145px;max-width:40%}
.multi-vless-message[b-r0wayckh7y] {font-size:.76rem;margin:11px 0}
.multi-vless-root[b-r0wayckh7y]  .ninja-route-picker {max-height:145px;gap:7px}
.multi-vless-root[b-r0wayckh7y]  .ninja-route-set {background:#182023;border:1px solid #364144;border-radius:9px}
.multi-vless-root[b-r0wayckh7y]  .ninja-route-set-top {padding:8px 9px;gap:7px}
.multi-vless-root[b-r0wayckh7y]  .ninja-route-select {gap:8px}
.multi-vless-root[b-r0wayckh7y]  .ninja-route-set-title strong {font-size:.72rem}
.multi-vless-root[b-r0wayckh7y]  .ninja-route-set-title small {font-size:.66rem}
.multi-vless-root[b-r0wayckh7y]  .ninja-route-view {font-size:.68rem;padding:6px 10px;border-radius:7px}
@media(max-width:800px) {
 .multi-vless-root[b-r0wayckh7y] {padding:14px 13px 12px}
 .multi-vless-grid[b-r0wayckh7y] {grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
 .multi-vless-column[b-r0wayckh7y] {padding:12px 10px}
 .multi-vless-mode[b-r0wayckh7y] {min-height:103px}
}
@media(max-width:630px) {
 .multi-vless-grid[b-r0wayckh7y] {grid-template-columns:1fr}
 .multi-vless-heading-brand[b-r0wayckh7y] {display:none}
 .multi-vless-mode-grid[b-r0wayckh7y] {gap:5px}
 .multi-vless-mode[b-r0wayckh7y] {min-height:102px;padding:8px 4px}
 .multi-vless-actions[b-r0wayckh7y] {flex-wrap:wrap}
 .multi-vless-cancel[b-r0wayckh7y] {flex-basis:105px;min-width:105px}
}

/* Matching the approved design: dark empty box, gold checked box, white tick. */
.multi-vless-server-option input[type="checkbox"][b-r0wayckh7y] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: grid;
    place-content: center;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #121a1d !important;
    border: 1.5px solid #687579 !important;
    border-radius: 5px;
    opacity: 1;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.26);
    cursor: pointer;
}
.multi-vless-server-option input[type="checkbox"]:checked[b-r0wayckh7y] {
    background: #ebca66 !important;
    border-color: #ebca66 !important;
    box-shadow: 0 0 0 1px rgba(235,202,102,.15);
}
.multi-vless-server-option input[type="checkbox"]:checked[b-r0wayckh7y]::after {
    content: "";
    display: block;
    width: 6px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-1px) rotate(45deg);
}
.multi-vless-server-option input[type="checkbox"]:focus-visible[b-r0wayckh7y] {
    outline: 2px solid #f5d979;
    outline-offset: 3px;
}
.multi-vless-server-option input[type="checkbox"]:disabled[b-r0wayckh7y] { cursor: default; }

/* Ninja VPN / выдача Multi-VLESS — фирменные кнопки приложений */
.multi-vless-result[b-r0wayckh7y] {margin-top:13px;padding:18px;border-color:rgba(229,192,89,.36);background:linear-gradient(145deg,#11191b,#0b1214 85%);border-radius:14px}
.multi-vless-result-heading[b-r0wayckh7y] {display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.multi-vless-result-heading h4[b-r0wayckh7y] {font-size:1.02rem;font-weight:760;color:#f4f5f2}
.multi-vless-sharing[b-r0wayckh7y] {display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;align-items:stretch}
.multi-vless-qr-panel[b-r0wayckh7y] {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px solid #313b3d;border-radius:13px;padding:12px;background:#0c1315;min-width:0}
.multi-vless-qr-panel>img[b-r0wayckh7y] {display:block;width:154px;max-width:100%;height:auto;padding:7px;background:#fff;border-radius:10px;aspect-ratio:1}
.multi-vless-qr-panel>span[b-r0wayckh7y] {font-size:.71rem;line-height:1.2;color:#aeb9bb;font-weight:600}
.multi-vless-sharing-actions[b-r0wayckh7y] {width:100%;display:flex;flex-direction:column;align-items:stretch;gap:9px;min-width:0}
.multi-vless-sharing-actions[b-r0wayckh7y]  .multi-vless-subscription-button {display:flex;align-items:center;text-align:left;gap:12px;width:100%;max-width:100%;min-width:0;min-height:61px;padding:10px 13px;border:1px solid rgba(220,177,73,.62);border-radius:11px;background:linear-gradient(105deg,#151d1e,#101719);color:#f3f5f3;cursor:pointer;transition:background .18s,border-color .18s,transform .09s,box-shadow .18s}
.multi-vless-sharing-actions[b-r0wayckh7y]  .multi-vless-subscription-button:not(:disabled):hover {background:linear-gradient(105deg,#1d2625,#151c1c);border-color:#f1d16f;box-shadow:0 0 0 1px rgba(240,195,74,.09),0 5px 18px rgba(235,191,65,.1)}
.multi-vless-sharing-actions[b-r0wayckh7y]  .multi-vless-subscription-button:not(:disabled):active {transform:translateY(1px) scale(.995);background:#29281e}
.multi-vless-sharing-actions[b-r0wayckh7y]  .multi-vless-subscription-button:focus-visible {outline:2px solid #f3d46f;outline-offset:2px}
.multi-vless-sharing-actions[b-r0wayckh7y]  .multi-vless-subscription-button:disabled {opacity:.5;cursor:not-allowed}
.multi-vless-sharing-actions[b-r0wayckh7y]  .multi-vless-subscription-button.ninja-subscription-is-copied {border-color:#92c6a0;background:linear-gradient(105deg,#15241b,#101719)}
.multi-vless-sharing-actions[b-r0wayckh7y]  .multi-vless-app-icon {width:41px;height:41px;flex:0 0 41px;display:flex;align-items:center;justify-content:center;border:1px solid #37403d;border-radius:10px;background:#1d2325;overflow:hidden}
.multi-vless-sharing-actions[b-r0wayckh7y]  .multi-vless-app-icon img {width:100%!important;height:100%!important;max-width:none!important;display:block;object-fit:cover;border-radius:9px;padding:0!important;background:#1d2325!important}
.multi-vless-sharing-actions[b-r0wayckh7y]  .multi-vless-subscription-label {flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.multi-vless-sharing-actions[b-r0wayckh7y]  .multi-vless-subscription-label strong {color:#f1f3f0;font-size:.81rem;font-weight:720;line-height:1.25}
.multi-vless-sharing-actions[b-r0wayckh7y]  .multi-vless-subscription-label small {font-size:.69rem;color:#9ba9ac;font-weight:400;line-height:1.2}
.multi-vless-sharing-actions[b-r0wayckh7y]  .ninja-subscription-copy-feedback {display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;flex:none;margin-left:auto;color:#e7cb75;font-size:.69rem;white-space:nowrap}
.multi-vless-sharing-actions[b-r0wayckh7y]  .ninja-subscription-copy-feedback svg {display:block;flex:none;height:19px;width:19px}
.multi-vless-sharing-actions[b-r0wayckh7y]  .ninja-subscription-is-copied .ninja-subscription-copy-feedback {color:#9addaa}
@media (max-width:720px) {
 .multi-vless-sharing[b-r0wayckh7y] {grid-template-columns:1fr;gap:12px}
 .multi-vless-qr-panel[b-r0wayckh7y] {align-self:flex-start;flex-direction:row;gap:12px;padding:10px 12px;width:auto}
 .multi-vless-qr-panel>img[b-r0wayckh7y] {width:118px}
 .multi-vless-sharing-actions[b-r0wayckh7y]  .multi-vless-subscription-button {min-height:58px}
}
@media (max-width:420px) {
 .multi-vless-sharing-actions[b-r0wayckh7y]  .ninja-subscription-copy-feedback span {display:none}
 .multi-vless-sharing-actions[b-r0wayckh7y]  .multi-vless-subscription-button {padding:9px 10px;gap:8px}
}
/* /Components/NetworkPortsDialog.razor.rz.scp.css */
/* Network ports — read-only diagnostics / Ninja VPN visual language */
.ports-overlay[b-m9s10q7eek] {
    position: fixed;
    inset: 0 0 0 260px;
    z-index: 880;
    padding: 24px;
    background: rgba(0, 4, 6, .78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: grid;
    place-items: center;
    overscroll-behavior: none;
}
.ports-window[b-m9s10q7eek] {
    width: min(1100px, 100%);
    max-height: min(820px, calc(100vh - 48px));
    background: linear-gradient(155deg, #101719, #080e10 54%, #090c0f);
    border: 1px solid rgba(229, 188, 62, .38);
    border-radius: 20px;
    box-shadow: 0 26px 90px rgba(0,0,0,.65), 0 0 38px rgba(225,173,22,.07);
    color: #e9edef;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: contain;
}
.ports-header[b-m9s10q7eek] { padding: 26px 30px 20px; display:flex; gap:18px; justify-content:space-between; align-items:flex-start; }
.ports-heading-content[b-m9s10q7eek] { min-width:0; }
.ports-eyebrow[b-m9s10q7eek] { font-size: .66rem; color:#e4be52; letter-spacing: .15em; font-weight:800; margin-bottom:7px; }
.ports-header h2[b-m9s10q7eek] { margin: 0; font-size: 1.55rem; font-weight:800; letter-spacing:-.035em; color:#fcfcfa; }
.ports-header p[b-m9s10q7eek] { margin: 8px 0 0; color:#a1adb2; font-size:.85rem; line-height:1.5; }
.ports-close[b-m9s10q7eek] { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; color:#d4d9d9; background:#152023; border:1px solid #384242; border-radius:10px; cursor:pointer; }
.ports-close:hover[b-m9s10q7eek] { border-color:#e6bc40; color:#ffdd74; }
.ports-tabs[b-m9s10q7eek] { padding:0 30px; display:flex; gap:6px; border-bottom:1px solid #273135; }
.ports-tab[b-m9s10q7eek] { font: inherit; color:#9fabad; border:0; border-bottom:2px solid transparent; background:transparent; padding:13px 16px; cursor:pointer; font-size:.9rem; font-weight:650; }
.ports-tab:hover[b-m9s10q7eek] { color:#eaeef0; }
.ports-tab.active[b-m9s10q7eek] { color:#f6d36e; border-bottom-color:#dfb544; }
.ports-controls[b-m9s10q7eek] { padding:21px 30px 18px; display:grid; grid-template-columns:minmax(170px, 240px) minmax(240px, 1fr) auto; gap:12px; align-items:end; }
.ports-field[b-m9s10q7eek] { display:flex; flex-direction:column; gap:7px; min-width:0; }
.ports-field span[b-m9s10q7eek] { font-size:.73rem; font-weight:700; color:#aebbbf; }
.ports-field input[b-m9s10q7eek], .ports-field select[b-m9s10q7eek] {
    width:100%; height:42px; background:#121b1e; border:1px solid #344247; border-radius:10px;
    color:#f4f4f1; font:inherit; font-size:.87rem; padding:0 13px; outline:none;
}
.ports-field input:focus[b-m9s10q7eek], .ports-field select:focus[b-m9s10q7eek] { border-color:#caa842; box-shadow:0 0 0 2px rgba(241,191,63,.10); }
.ports-field select:disabled[b-m9s10q7eek] { opacity:.6; }
.ports-field input[b-m9s10q7eek]::placeholder { color:#6f8186; }
.ports-refresh[b-m9s10q7eek], .ports-done[b-m9s10q7eek] {
    min-height:42px; border-radius:10px; border:1px solid rgba(244,201,75,.62); cursor:pointer;
    color:#1c180b; font:inherit; font-size:.85rem; font-weight:800;
    background:linear-gradient(180deg,#ffe48a,#e8b940);
    padding:0 17px; white-space:nowrap;
}
.ports-refresh:disabled[b-m9s10q7eek] { opacity:.58; cursor:wait; }
.ports-summary[b-m9s10q7eek] { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:2px 30px 14px; gap:10px; }
.ports-summary > div[b-m9s10q7eek] { display:flex; gap:9px; align-items:baseline; }
.ports-summary strong[b-m9s10q7eek] { font-size:1.3rem; font-weight:800; color:#ffda71; }
.ports-summary span[b-m9s10q7eek], .ports-summary small[b-m9s10q7eek] { font-size:.79rem; color:#9eafb3; }
.ports-table-scroll[b-m9s10q7eek] { min-height:0; flex:1 1 auto; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; margin:0 30px; border:1px solid #29363a; border-radius:13px; background:#091113; }
.ports-table[b-m9s10q7eek] { border-collapse:collapse; width:100%; min-width:740px; }
.ports-table thead[b-m9s10q7eek] { position:sticky; top:0; z-index:1; }
.ports-table th[b-m9s10q7eek] { text-align:left; font-size:.72rem; letter-spacing:.015em; font-weight:750; color:#9eacaf; padding:13px 15px; background:#151e20; border-bottom:1px solid #303b40; }
.ports-table td[b-m9s10q7eek] { border-bottom:1px solid rgba(79,96,100,.23); padding:12px 15px; vertical-align:middle; font-size:.83rem; color:#dbe1e2; }
.ports-table tr:last-child td[b-m9s10q7eek] { border-bottom:none; }
.ports-table tbody tr:hover[b-m9s10q7eek] { background:rgba(240,202,83,.04); }
.ports-number[b-m9s10q7eek] { display:inline-block; font-weight:800; font-size:.94rem; font-variant-numeric:tabular-nums; color:#f1e9cc; margin-right:7px; }
.ports-protocol[b-m9s10q7eek] { border:1px solid #3d4b50; border-radius:6px; padding:2px 6px; font-size:.68rem; font-weight:750; color:#b4c4c8; white-space:nowrap; }
.ports-service[b-m9s10q7eek] { color:#e6ebed; font-size:.82rem; font-weight:750; }
.ports-table td small[b-m9s10q7eek] { display:block; color:#96a8ad; font-size:.72rem; margin-top:4px; }
.ports-table td code[b-m9s10q7eek] { color:#b3c5ca; font-family:ui-monospace, Consolas,monospace; font-size:.79rem; white-space:nowrap; }
.ports-process[b-m9s10q7eek] { color:#9caab0!important; overflow-wrap:anywhere; }
.ports-state[b-m9s10q7eek] { display:inline-block; border:1px solid #365e57; border-radius:18px; padding:4px 9px; color:#9adebd; background:rgba(29,100,76,.13); font-size:.7rem; font-weight:750; white-space:nowrap; }
.ports-state.published[b-m9s10q7eek] { border-color:#695b34; color:#efd28b; background:rgba(141,104,35,.12); }
.ports-none[b-m9s10q7eek] { text-align:center; color:#adbcbd!important; padding:26px!important; }
.ports-warning[b-m9s10q7eek] { margin:15px 30px; border:1px solid rgba(248,116,110,.4); padding:13px 16px; background:rgba(130,35,38,.14); border-radius:11px; font-size:.83rem; line-height:1.5; }
.ports-note[b-m9s10q7eek] { margin:0 30px 12px; padding:10px 13px; border:1px solid #524a31; border-radius:9px; background:rgba(180,145,49,.08); font-size:.78rem; line-height:1.55; color:#cfc09b; }
.ports-empty[b-m9s10q7eek] { padding:46px 26px; text-align:center; color:#aebbbf; font-size:.9rem; }
.ports-spinner[b-m9s10q7eek] { display:inline-block; height:14px; width:14px; border:2px solid #746233; border-top-color:#ffda71; border-radius:100%; vertical-align:-2px; margin-right:8px; animation:ports-spin-b-m9s10q7eek .8s linear infinite; }
@keyframes ports-spin-b-m9s10q7eek { to { transform:rotate(360deg); } }
.ports-disclaimer[b-m9s10q7eek] { padding:15px 30px 10px; color:#9fb0b5; font-size:.76rem; line-height:1.55; }
.ports-disclaimer strong[b-m9s10q7eek] { color:#e4cc8d; }
.ports-guide-intro[b-m9s10q7eek] { padding:20px 30px 15px; }
.ports-guide-intro strong[b-m9s10q7eek] { font-size:.92rem; color:#f0e8ce; }
.ports-guide-intro p[b-m9s10q7eek] { color:#a1b0b4; font-size:.8rem; margin:6px 0 0; line-height:1.55; }
.ports-recommendations[b-m9s10q7eek] { padding:0 30px 16px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ports-recommendations>div[b-m9s10q7eek] { padding:14px; border:1px solid #323f42; border-radius:12px; background:#111a1d; }
.ports-recommendations strong[b-m9s10q7eek] { color:#eddeb2; font-size:.82rem; }
.ports-recommendations p[b-m9s10q7eek] { margin:8px 0 0; color:#9fafb1; font-size:.76rem; line-height:1.55; }
.ports-recommendation-dot[b-m9s10q7eek] { display:inline-block; width:7px;height:7px;border-radius:50%;background:#e4ba42;margin:0 7px 1px 0; }
.ports-guide-search[b-m9s10q7eek] { padding:0 30px 16px; }
.ports-footer[b-m9s10q7eek] { padding:16px 30px 20px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.ports-footer span[b-m9s10q7eek] { color:#84979b; font-size:.73rem; line-height:1.4; }
.ports-done[b-m9s10q7eek] { min-height:36px; background:#151f21; border:1px solid #4c5a5a; color:#d9dfdf; padding:0 20px; }
.ports-done:hover[b-m9s10q7eek] { border-color:#c9a03b; color:#ffe097; }
@media (max-width:1000px) { .ports-overlay[b-m9s10q7eek] { left:0; } }
@media (max-width:760px) {
    .ports-overlay[b-m9s10q7eek] { padding:10px; }
    .ports-window[b-m9s10q7eek] { max-height:calc(100dvh - 20px); border-radius:15px; }
    .ports-header[b-m9s10q7eek] { padding:20px 17px 13px; }
    .ports-header h2[b-m9s10q7eek] { font-size:1.35rem; }
    .ports-tabs[b-m9s10q7eek] { padding:0 15px; }
    .ports-controls[b-m9s10q7eek] { padding:15px; grid-template-columns:1fr; }
    .ports-refresh[b-m9s10q7eek] { width:100%; }
    .ports-summary[b-m9s10q7eek] { padding:0 15px 12px; }
    .ports-table-scroll[b-m9s10q7eek] { margin:0 15px; }
    .ports-disclaimer[b-m9s10q7eek] { padding:15px; }
    .ports-recommendations[b-m9s10q7eek] { padding:0 15px 14px; grid-template-columns:1fr; }
    .ports-guide-intro[b-m9s10q7eek] { padding:15px; }
    .ports-guide-search[b-m9s10q7eek] { padding:0 15px 14px; }
    .ports-footer[b-m9s10q7eek] { padding:14px 15px; }
    .ports-note[b-m9s10q7eek], .ports-warning[b-m9s10q7eek] { margin-left:15px; margin-right:15px; }
}
@media (prefers-reduced-motion: reduce) { .ports-spinner[b-m9s10q7eek] { animation:none; } }

/* One row per number; all IPv4/IPv6 and TCP/UDP binds remain visible in details. */
.ports-occupied-table[b-m9s10q7eek] { min-width:650px; }
.ports-main-row[b-m9s10q7eek] { cursor:pointer; }
.ports-main-row.is-expanded[b-m9s10q7eek] { background:rgba(240,202,83,.045); }
.ports-main-row:hover[b-m9s10q7eek] { background:rgba(240,202,83,.075)!important; }
.ports-port-toggle[b-m9s10q7eek] { display:flex; align-items:center; flex-wrap:wrap; gap:5px; width:100%; padding:0; border:0; color:inherit; background:transparent; font:inherit; text-align:left; cursor:pointer; }
.ports-port-toggle:focus-visible[b-m9s10q7eek] { outline:2px solid #e8c44e; outline-offset:5px; border-radius:3px; }
.ports-port-toggle .ports-number[b-m9s10q7eek] { margin-right:5px; }
.ports-group-status[b-m9s10q7eek] { display:flex; align-items:center; justify-content:space-between; gap:9px; }
.ports-expand-chevron[b-m9s10q7eek] { color:#dcb954; font-size:1.4rem; line-height:1; display:inline-block; transition:transform .15s ease; }
.ports-expand-chevron.expanded[b-m9s10q7eek] { transform:rotate(180deg); }
.ports-address-count[b-m9s10q7eek] { color:#9eb1b5; font-size:.79rem; }
.ports-details-row>td[b-m9s10q7eek] { padding:0!important; background:#0c1517; }
.ports-details-inner[b-m9s10q7eek] { padding:12px 16px 16px; border-bottom:1px solid #3e3b2b; }
.ports-detail-heading[b-m9s10q7eek] { color:#d8bd72; font-size:.77rem; font-weight:750; margin-bottom:10px; }
.ports-detail-scroll[b-m9s10q7eek] { overflow-x:auto; overscroll-behavior:contain; }
.ports-detail-table[b-m9s10q7eek] { width:100%; border-collapse:collapse; min-width:650px; }
.ports-detail-table th[b-m9s10q7eek] { padding:9px 12px; background:#142024; color:#9cb0b4; text-align:left; font-size:.7rem; }
.ports-detail-table td[b-m9s10q7eek] { padding:10px 12px; border-bottom:1px solid rgba(79,96,100,.2); vertical-align:top; }
.ports-detail-table tr:last-child td[b-m9s10q7eek] { border-bottom:0; }
.ports-detail-table code[b-m9s10q7eek] { color:#c2d0d3; font-family:ui-monospace,Consolas,monospace; font-size:.76rem; overflow-wrap:anywhere; }
@media (prefers-reduced-motion: reduce) { .ports-expand-chevron[b-m9s10q7eek] { transition:none; } }
/* /Components/Pages/Files.razor.rz.scp.css */
/* =========================================================
   FILES — NINJA VPN (desktop only)
   ========================================================= */

.files-page[b-v46x3bnmag] {
    width: 100%;
    padding: 0 4px 30px;
    color: #e8ecee;
}

.files-header[b-v46x3bnmag] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.files-title[b-v46x3bnmag] {
    margin: -0.35rem 0 0;
    color: #ffffff;
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-size: clamp(3rem, 4.1vw, 4.8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
    text-shadow: 0 3px 7px rgba(0, 0, 0, .76), 0 0 14px rgba(255, 216, 76, .06);
    transform: translateY(-15px);
}

.files-subtitle[b-v46x3bnmag] {
    margin: .5rem 0 0;
    color: rgba(221, 227, 230, .72);
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-size: clamp(.96rem, 1.15vw, 1.22rem);
    font-style: italic;
    line-height: 1.35;
    letter-spacing: -.025em;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .62);
}

.files-server-card[b-v46x3bnmag] {
    min-width: 238px;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 207, 47, .5);
    border-radius: 13px;
    background: radial-gradient(circle at 18% 20%, rgba(255, 195, 0, .08), transparent 42%), linear-gradient(180deg, rgba(7, 13, 15, .92), rgba(4, 9, 11, .88));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.015), 0 12px 28px rgba(0,0,0,.22);
}

.files-server-card img[b-v46x3bnmag],
.files-server-globe[b-v46x3bnmag] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 215, 74, .55);
    border-radius: 50%;
    object-fit: cover;
    background: #080d0f;
    color: #f4d051;
    overflow: hidden;
}

.files-server-card > div[b-v46x3bnmag] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.files-server-card span[b-v46x3bnmag] {
    color: #8f999e;
    font-size: .72rem;
}

.files-server-card strong[b-v46x3bnmag] {
    max-width: 150px;
    overflow: hidden;
    color: #f6f7f8;
    font-size: .95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files-server-card .files-server-dot[b-v46x3bnmag] {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #5cf09a;
    box-shadow: 0 0 10px rgba(92,240,154,.36);
}

.files-shell[b-v46x3bnmag] {
    min-height: 630px;
    display: grid;
    grid-template-columns: 226px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(255, 207, 47, .64);
    border-radius: 16px;
    background: radial-gradient(circle at 84% 7%, rgba(255, 190, 0, .052), transparent 29%), linear-gradient(180deg, rgba(4, 10, 12, .92), rgba(3, 8, 10, .88));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.014), 0 18px 42px rgba(0,0,0,.27);
}

.files-sidebar[b-v46x3bnmag] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 12px;
    border-right: 1px solid rgba(255, 213, 67, .18);
    background: linear-gradient(180deg, rgba(6, 12, 14, .8), rgba(3, 8, 10, .58));
}

.files-sidebar-title[b-v46x3bnmag] {
    padding: 0 10px 8px;
    color: #9aa3a7;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.files-shortcut[b-v46x3bnmag] {
    width: 100%;
    min-height: 51px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #c8d0d4;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: .16s ease;
}

.files-shortcut:hover[b-v46x3bnmag] {
    border-color: rgba(255, 204, 45, .18);
    color: #fff0b5;
    background: rgba(255, 191, 0, .045);
}

.files-shortcut.active[b-v46x3bnmag] {
    border-color: rgba(255, 210, 55, .48);
    color: #ffd849;
    background: linear-gradient(90deg, rgba(255, 190, 0, .1), rgba(255,190,0,.025));
    box-shadow: inset 3px 0 0 #ffd33c;
}

.files-shortcut-icon[b-v46x3bnmag] {
    width: 24px;
    flex: 0 0 24px;
    color: #e7bd31;
    font-size: 1.25rem;
    text-align: center;
}

.files-shortcut > span:last-child[b-v46x3bnmag] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.files-shortcut strong[b-v46x3bnmag] {
    font-size: .86rem;
    font-weight: 700;
}

.files-shortcut small[b-v46x3bnmag] {
    overflow: hidden;
    color: #737e84;
    font-size: .67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files-safety-note[b-v46x3bnmag] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: auto;
    padding: 12px;
    border: 1px solid rgba(255, 209, 55, .16);
    border-radius: 11px;
    background: rgba(255, 194, 0, .028);
}

.files-safety-note svg[b-v46x3bnmag] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: #e6bd37;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.files-safety-note > div[b-v46x3bnmag] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.files-safety-note strong[b-v46x3bnmag] {
    color: #e9d783;
    font-size: .72rem;
}

.files-safety-note span[b-v46x3bnmag] {
    color: #788287;
    font-size: .66rem;
    line-height: 1.4;
}

.files-main[b-v46x3bnmag] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.files-toolbar[b-v46x3bnmag] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px;
}

.files-nav-buttons[b-v46x3bnmag] {
    display: flex;
    gap: 6px;
}

.files-nav-buttons button[b-v46x3bnmag],
.files-go-button[b-v46x3bnmag] {
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 211, 59, .28);
    border-radius: 9px;
    color: #d9c36b;
    background: rgba(6, 12, 14, .82);
    cursor: pointer;
    transition: .15s ease;
}

.files-nav-buttons button:hover:not(:disabled)[b-v46x3bnmag],
.files-go-button:hover:not(:disabled)[b-v46x3bnmag] {
    border-color: rgba(255, 221, 89, .62);
    color: #ffe16c;
    background: rgba(255, 194, 0, .055);
}

.files-nav-buttons button:disabled[b-v46x3bnmag],
.files-go-button:disabled[b-v46x3bnmag] {
    opacity: .34;
    cursor: default;
}

.files-nav-buttons svg[b-v46x3bnmag] {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.files-address-wrap[b-v46x3bnmag] {
    min-width: 0;
    height: 40px;
    display: flex;
    align-items: center;
    flex: 1;
    overflow: hidden;
    border: 1px solid rgba(255, 211, 59, .28);
    border-radius: 10px;
    background: rgba(2, 7, 9, .78);
}

.files-address-root[b-v46x3bnmag] {
    padding-left: 13px;
    color: #e5bd38;
    font-family: Consolas, monospace;
    font-weight: 800;
}

.files-address-wrap input[b-v46x3bnmag] {
    min-width: 0;
    height: 100%;
    flex: 1;
    padding: 0 12px;
    border: 0;
    outline: 0;
    color: #dfe4e7;
    background: transparent;
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: .84rem;
}

.files-address-wrap input:focus[b-v46x3bnmag] {
    color: #fff;
}

.files-go-button[b-v46x3bnmag] {
    min-width: 78px;
    height: 100%;
    border-width: 0 0 0 1px;
    border-radius: 0;
    font-size: .76rem;
    font-weight: 700;
}

.files-actions[b-v46x3bnmag] {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 16px 12px;
    border-bottom: 1px solid rgba(255, 215, 70, .12);
}

.files-action[b-v46x3bnmag],
.files-upload-button[b-v46x3bnmag] {
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid rgba(255, 211, 60, .24);
    border-radius: 8px;
    color: #c8d0d3;
    background: rgba(5, 11, 13, .68);
    font: inherit;
    font-size: .77rem;
    font-weight: 700;
    cursor: pointer;
    transition: .15s ease;
}

.files-action:hover:not(:disabled)[b-v46x3bnmag],
.files-upload-button:hover:not(.disabled)[b-v46x3bnmag] {
    border-color: rgba(255, 223, 94, .56);
    color: #ffe278;
    background: rgba(255, 192, 0, .045);
}

.files-action.primary[b-v46x3bnmag] {
    border-color: rgba(255, 218, 77, .56);
    color: #f6d75b;
}

.files-action.danger[b-v46x3bnmag] {
    color: #dba7a7;
}

.files-action.danger:hover:not(:disabled)[b-v46x3bnmag] {
    border-color: rgba(255, 102, 102, .52);
    color: #ffb0b0;
    background: rgba(255, 70, 70, .045);
}

.files-action:disabled[b-v46x3bnmag],
.files-upload-button.disabled[b-v46x3bnmag] {
    opacity: .33;
    cursor: default;
    pointer-events: none;
}

.files-upload-button[b-v46x3bnmag] {
    position: relative;
    overflow: hidden;
}

.files-upload-button svg[b-v46x3bnmag] {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.files-upload-button input[type="file"][b-v46x3bnmag] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.files-actions-separator[b-v46x3bnmag] {
    width: 1px;
    height: 24px;
    margin: 0 3px;
    background: rgba(255, 219, 78, .12);
}

.files-message[b-v46x3bnmag] {
    margin: 0 16px 10px;
    padding: 9px 12px;
    border: 1px solid rgba(91, 232, 145, .28);
    border-radius: 9px;
    color: #a9efc4;
    background: rgba(71, 216, 131, .045);
    font-size: .78rem;
}

.files-message.error[b-v46x3bnmag] {
    border-color: rgba(255, 107, 107, .3);
    color: #ffb4b4;
    background: rgba(255, 70, 70, .045);
}

.files-table-wrap[b-v46x3bnmag] {
    min-height: 0;
    flex: 1;
    overflow: auto;
}

.files-table[b-v46x3bnmag] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: #cfd6da;
    font-size: .8rem;
}

.files-table th[b-v46x3bnmag] {
    height: 38px;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255, 214, 65, .14);
    color: #8e999e;
    background: rgba(4, 9, 11, .97);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
}

.files-table th:nth-child(2)[b-v46x3bnmag] { width: 105px; }
.files-table th:nth-child(3)[b-v46x3bnmag] { width: 145px; }
.files-table th:nth-child(4)[b-v46x3bnmag] { width: 105px; }
.files-table th:nth-child(5)[b-v46x3bnmag] { width: 92px; }

.files-table td[b-v46x3bnmag] {
    height: 52px;
    padding: 7px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .035);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files-table tbody tr[b-v46x3bnmag] {
    cursor: default;
    transition: .12s ease;
}

.files-table tbody tr:hover[b-v46x3bnmag] {
    background: rgba(255, 200, 24, .03);
}

.files-table tbody tr.selected[b-v46x3bnmag] {
    background: linear-gradient(90deg, rgba(255, 194, 0, .105), rgba(255, 194, 0, .028));
    box-shadow: inset 3px 0 0 #ffd43d;
}

.files-name-cell[b-v46x3bnmag] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.files-item-icon[b-v46x3bnmag] {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a7b0b5;
}

.files-item-icon.folder[b-v46x3bnmag] {
    color: #e3bb38;
}

.files-item-icon svg[b-v46x3bnmag] {
    width: 24px;
    height: 24px;
    fill: rgba(255,255,255,.02);
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.files-item-text[b-v46x3bnmag] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.files-item-name[b-v46x3bnmag] {
    overflow: hidden;
    color: #e1e5e7;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files-item-meta[b-v46x3bnmag] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #737e84;
    font-size: .66rem;
}

.files-system-badge[b-v46x3bnmag] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #c7aa4f;
}

.files-system-badge svg[b-v46x3bnmag] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.files-table code[b-v46x3bnmag] {
    color: #b5bdc1;
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: .73rem;
}

.files-loading[b-v46x3bnmag],
.files-no-items[b-v46x3bnmag] {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    color: #778287;
}

.files-spinner[b-v46x3bnmag] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 210, 51, .18);
    border-top-color: #e8c13e;
    border-radius: 50%;
    animation: files-spin-b-v46x3bnmag .8s linear infinite;
}

@keyframes files-spin-b-v46x3bnmag { to { transform: rotate(360deg); } }

.files-statusbar[b-v46x3bnmag] {
    min-height: 37px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 15px;
    border-top: 1px solid rgba(255, 214, 65, .11);
    color: #68747a;
    background: rgba(1, 5, 7, .35);
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: .69rem;
}

.files-statusbar span:first-child[b-v46x3bnmag] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files-empty-state[b-v46x3bnmag] {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 207, 47, .35);
    border-radius: 15px;
    background: rgba(4, 10, 12, .72);
    text-align: center;
}

.files-empty-icon[b-v46x3bnmag] {
    color: #d5b43f;
    font-size: 3rem;
}

.files-empty-state h2[b-v46x3bnmag] {
    margin: 12px 0 6px;
    color: #e8ecee;
    font-size: 1.15rem;
}

.files-empty-state p[b-v46x3bnmag] {
    max-width: 480px;
    margin: 0;
    color: #788389;
    font-size: .86rem;
}

/* ===== dialogs ===== */

.files-modal-backdrop[b-v46x3bnmag] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(0, 0, 0, .69);
    backdrop-filter: blur(4px);
}

.files-modal[b-v46x3bnmag] {
    width: min(520px, calc(100vw - 56px));
    padding: 20px;
    border: 1px solid rgba(255, 211, 58, .63);
    border-radius: 15px;
    background: radial-gradient(circle at 85% 6%, rgba(255, 188, 0, .07), transparent 30%), linear-gradient(180deg, #080e10, #04090b);
    box-shadow: 0 28px 80px rgba(0,0,0,.58), 0 0 26px rgba(255,190,0,.06);
}

.files-modal-head[b-v46x3bnmag],
.files-editor-head[b-v46x3bnmag] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.files-modal-head span[b-v46x3bnmag],
.files-editor-head span[b-v46x3bnmag] {
    color: #b39332;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.files-modal-head h2[b-v46x3bnmag],
.files-editor-head h2[b-v46x3bnmag] {
    margin: 5px 0 0;
    color: #f0f2f3;
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.files-modal-head > button[b-v46x3bnmag],
.files-editor-head > button[b-v46x3bnmag] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid rgba(255, 213, 60, .2);
    border-radius: 8px;
    color: #909a9f;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.files-field[b-v46x3bnmag] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 22px;
}

.files-field > span[b-v46x3bnmag] {
    color: #9aa3a8;
    font-size: .74rem;
    font-weight: 700;
}

.files-field input[b-v46x3bnmag] {
    height: 43px;
    padding: 0 12px;
    border: 1px solid rgba(255, 212, 60, .26);
    border-radius: 9px;
    outline: none;
    color: #e8ecee;
    background: rgba(0, 4, 6, .67);
    font: inherit;
    font-size: .86rem;
}

.files-field input:focus[b-v46x3bnmag] {
    border-color: rgba(255, 220, 84, .65);
    box-shadow: 0 0 0 2px rgba(255, 198, 0, .05);
}

.files-modal-error[b-v46x3bnmag] {
    margin-top: 12px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 105, 105, .28);
    border-radius: 8px;
    color: #ffb6b6;
    background: rgba(255, 64, 64, .045);
    font-size: .74rem;
    line-height: 1.45;
}

.files-modal-actions[b-v46x3bnmag],
.files-editor-footer > div[b-v46x3bnmag] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 22px;
}

.files-modal-actions button[b-v46x3bnmag],
.files-editor-footer button[b-v46x3bnmag] {
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid rgba(255, 213, 62, .28);
    border-radius: 9px;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}

.files-modal-actions .secondary[b-v46x3bnmag],
.files-editor-footer .secondary[b-v46x3bnmag] {
    color: #aab2b6;
    background: rgba(6, 12, 14, .8);
}

.files-modal-actions .primary[b-v46x3bnmag],
.files-editor-footer .primary[b-v46x3bnmag] {
    border-color: #ffe26e;
    color: #151005;
    background: linear-gradient(180deg, #ffeb84 0%, #ffd64b 58%, #e4ac18 100%);
}

.files-modal-actions .danger[b-v46x3bnmag] {
    border-color: rgba(255, 100, 100, .58);
    color: #ffd0d0;
    background: rgba(172, 44, 44, .2);
}

.files-modal-actions button:disabled[b-v46x3bnmag],
.files-editor-footer button:disabled[b-v46x3bnmag] {
    opacity: .4;
    cursor: default;
}

.files-delete-text[b-v46x3bnmag] {
    margin: 20px 0 0;
    color: #adb6ba;
    font-size: .83rem;
    line-height: 1.55;
}

.files-warning[b-v46x3bnmag] {
    margin-top: 15px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 198, 38, .24);
    border-radius: 9px;
    color: #cabd8e;
    background: rgba(255, 185, 0, .035);
    font-size: .74rem;
    line-height: 1.5;
}

.editor-backdrop[b-v46x3bnmag] {
    padding: 24px 34px;
}

.files-editor[b-v46x3bnmag] {
    width: min(1180px, calc(100vw - 68px));
    height: min(780px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 211, 58, .62);
    border-radius: 15px;
    background: linear-gradient(180deg, #070d0f, #030709);
    box-shadow: 0 30px 90px rgba(0,0,0,.62), 0 0 30px rgba(255,190,0,.055);
}

.files-editor-head[b-v46x3bnmag] {
    padding: 18px 20px 15px;
    border-bottom: 1px solid rgba(255, 215, 70, .13);
}

.editor-warning[b-v46x3bnmag] {
    margin: 10px 18px 0;
}

.files-editor-textarea[b-v46x3bnmag] {
    width: calc(100% - 36px);
    min-height: 0;
    flex: 1;
    margin: 12px 18px;
    padding: 15px;
    resize: none;
    border: 1px solid rgba(255, 213, 70, .17);
    border-radius: 10px;
    outline: none;
    color: #d7dddf;
    background: #020607;
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: .82rem;
    line-height: 1.55;
    tab-size: 4;
}

.files-editor-textarea:focus[b-v46x3bnmag] {
    border-color: rgba(255, 218, 81, .38);
}

.files-editor-footer[b-v46x3bnmag] {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 18px;
    border-top: 1px solid rgba(255, 215, 70, .12);
}

.files-editor-footer > span[b-v46x3bnmag] {
    color: #667278;
    font-family: Consolas, monospace;
    font-size: .69rem;
}

.files-editor-footer > div[b-v46x3bnmag] {
    margin-top: 0;
}

@media (max-width: 1200px) {
    .files-shell[b-v46x3bnmag] { grid-template-columns: 205px minmax(0, 1fr); }
    .files-owner-column[b-v46x3bnmag] { display: none; }
    .files-table th:nth-child(5)[b-v46x3bnmag] { width: 0; }
    .files-actions[b-v46x3bnmag] { flex-wrap: wrap; }
}

/* Раздел намеренно не адаптируется под мобильную навигацию.
   Сам пункт меню скрыт на ширине <= 900 px в NavMenu. */
/* /Components/Pages/Home.razor.rz.scp.css */
.home-page[b-a64vhmae87] {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}


/* =========================================================
   ШАПКА
   ========================================================= */

.home-hero[b-a64vhmae87] {
    display: block;
    position: relative;
    min-height: 0;
    padding: 8px 6px 24px;
    margin-bottom: 0;
}


.home-title-block[b-a64vhmae87] {
    display: block;
}


    .home-title-block h1[b-a64vhmae87] {
        margin: 0;
        color: #ffffff;
        font-family: "Segoe Print", "Brush Script MT", cursive;
        font-size: clamp(2rem, 3vw, 3.45rem);
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -0.02em;
        text-shadow: 0 3px 0 rgba(0, 0, 0, 0.65), 0 0 26px rgba(255, 180, 0, 0.10);
    }


    .home-title-block p[b-a64vhmae87] {
        margin: 8px 0 0;
        color: #b8c2c9;
        font-family: "Segoe Print", "Segoe UI", sans-serif;
        font-size: 1rem;
    }


/* =========================================================
   ВЫБРАННЫЙ СЕРВЕР
   ========================================================= */

.selected-server-card[b-a64vhmae87] {
    width: 330px;
    min-height: 116px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 18px;
    padding: 18px 20px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 205, 45, 0.22);
    border-radius: 14px;
    background: radial-gradient( circle at 18% 18%, rgba(255, 193, 0, 0.09), transparent 35% ), linear-gradient( 135deg, rgba(20, 19, 14, 0.65), rgba(6, 10, 12, 0.76) );
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 12px 30px rgba(0, 0, 0, 0.22);
}


.selected-server-card-quote[b-a64vhmae87] {
    flex: 0 0 auto;
    margin-top: 0;
    color: #ffd52d;
    font-family: Georgia, serif;
    font-size: 2.45rem;
    font-weight: 900;
    line-height: 0.8;
    text-shadow: 0 0 14px rgba(255, 205, 30, 0.22);
}


.selected-server-card-content[b-a64vhmae87] {
    min-width: 0;
    flex: 1;
}


.selected-server-card-label[b-a64vhmae87] {
    color: rgba(235, 239, 241, 0.86);
    font-size: 0.92rem;
    line-height: 1.35;
}


.selected-server-card-name[b-a64vhmae87] {
    margin-top: 5px;
    color: #ffffff;
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}


.selected-server-card-line[b-a64vhmae87] {
    width: 28px;
    height: 1px;
    margin-top: 15px;
    border-radius: 999px;
    background: #ffd32d;
    box-shadow: 0 0 7px rgba(255, 211, 45, 0.20);
}


/* =========================================================
   СПИСОК СЕРВЕРОВ
   ========================================================= */

.servers-list[b-a64vhmae87] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* =========================================================
   БЛОК СЕРВЕРА
   ========================================================= */

.server-panel[b-a64vhmae87] {
    position: relative;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 196, 0, 0.58);
    border-radius: 15px;
    background: radial-gradient( circle at 84% 8%, rgba(255, 175, 0, 0.07), transparent 28% ), linear-gradient( 180deg, rgba(7, 13, 15, 0.86), rgba(4, 9, 11, 0.90) );
    backdrop-filter: blur(5px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015), 0 14px 35px rgba(0, 0, 0, 0.28);
}


    .server-panel[b-a64vhmae87]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.18;
        background: linear-gradient( 120deg, transparent 0 62%, rgba(255, 189, 0, 0.04) 70%, transparent 82% );
    }


    .server-panel.selected[b-a64vhmae87] {
        border-color: #ffd326;
        box-shadow: inset 0 0 0 1px rgba(255, 215, 65, 0.08), 0 0 24px rgba(255, 178, 0, 0.11), 0 16px 38px rgba(0, 0, 0, 0.32);
    }


/* =========================================================
   ШАПКА СЕРВЕРА
   ========================================================= */

.server-panel-header[b-a64vhmae87] {
    min-height: 64px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
    padding: 0 3px;
    position: relative;
    z-index: 1;
}


.server-identification[b-a64vhmae87] {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1 1 auto;
}

.server-country-flag[b-a64vhmae87] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid rgba(255, 212, 58, .72);
    border-radius: 50%;
    background: rgba(4, 9, 11, .90);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .55),
        0 0 14px rgba(255, 194, 0, .08);
}

.server-country-flag img[b-a64vhmae87] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.10);
}

.server-country-fallback[b-a64vhmae87] {
    font-size: 1.35rem;
    line-height: 1;
}


.server-name-line[b-a64vhmae87] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}


    .server-name-line h2[b-a64vhmae87] {
        margin: 0;
        color: #f7fafb;
        font-size: 1.55rem;
        font-weight: 700;
        letter-spacing: 0.01em;
    }


.server-main-dot[b-a64vhmae87],
.connection-dot[b-a64vhmae87] {
    display: inline-block;
    border-radius: 50%;
    flex: 0 0 auto;
}


.server-main-dot[b-a64vhmae87] {
    width: 13px;
    height: 13px;
}


.connection-dot[b-a64vhmae87] {
    width: 14px;
    height: 14px;
}


    .server-main-dot.online[b-a64vhmae87],
    .connection-dot.online[b-a64vhmae87] {
        background: #21e5c0;
        box-shadow: 0 0 13px rgba(33, 229, 192, 0.55);
    }


    .server-main-dot.offline[b-a64vhmae87] {
        background: #ff5c50;
        box-shadow: 0 0 11px rgba(255, 92, 80, 0.42);
    }


    .connection-dot.offline[b-a64vhmae87] {
        background: #8b98a2;
    }


    .server-main-dot.loading[b-a64vhmae87],
    .connection-dot.loading[b-a64vhmae87] {
        background: #ffd22a;
        box-shadow: 0 0 12px rgba(255, 210, 42, 0.4);
        animation: homePulse-b-a64vhmae87 1s ease-in-out infinite alternate;
    }


.selected-badge[b-a64vhmae87] {
    padding: 4px 12px;
    border: 1px solid #ffda42;
    border-radius: 999px;
    color: #18130a;
    background: linear-gradient( 180deg, #ffe66f, #ffc51d );
    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    box-shadow: 0 0 14px rgba(255, 190, 0, 0.12);
}


.server-caption[b-a64vhmae87] {
    margin-top: 5px;
    color: #a4afb6;
    font-size: 0.84rem;
}


/* =========================================================
   СТАТУС ПОДКЛЮЧЕНИЯ
   ========================================================= */

.connection-state[b-a64vhmae87] {
    min-width: 230px;
    text-align: right;
}


.connection-row[b-a64vhmae87] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 11px;
}


.connection-title[b-a64vhmae87] {
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.025em;
}


    .connection-title.online[b-a64vhmae87] {
        color: #29e0d1;
        text-shadow: 0 0 10px rgba(41, 224, 209, 0.15);
    }


    .connection-title.offline[b-a64vhmae87] {
        color: #9ba6ad;
    }


.connection-subtitle[b-a64vhmae87] {
    margin-top: 5px;
    color: #a5afb6;
    font-size: 0.78rem;
}


.server-alert[b-a64vhmae87] {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
}


/* =========================================================
   КАРТОЧКИ ПАРАМЕТРОВ
   ========================================================= */

.server-metrics[b-a64vhmae87] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(170px, 1.08fr) minmax(185px, 1.25fr) minmax(150px, 0.9fr) repeat(4, minmax(140px, 1fr));
    gap: 11px;
}


.metric-card[b-a64vhmae87] {
    min-width: 0;
    min-height: 128px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 15px;
    border: 1px solid rgba(255, 204, 36, 0.08);
    border-radius: 11px;
    background: linear-gradient( 180deg, rgba(16, 23, 25, 0.78), rgba(7, 13, 15, 0.80) );
    box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.008);
}


/* =========================================================
   ИКОНКИ
   ========================================================= */

.metric-icon[b-a64vhmae87] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    max-width: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: #ffd31f;
    overflow: hidden;
    filter: drop-shadow( 0 0 5px rgba(255, 205, 20, 0.12) );
}


    .metric-icon svg[b-a64vhmae87] {
        display: block !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        overflow: visible;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.7px !important;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


        .metric-icon svg path[b-a64vhmae87],
        .metric-icon svg rect[b-a64vhmae87],
        .metric-icon svg circle[b-a64vhmae87],
        .metric-icon svg line[b-a64vhmae87],
        .metric-icon svg polyline[b-a64vhmae87],
        .metric-icon svg polygon[b-a64vhmae87] {
            fill: none !important;
            stroke: currentColor !important;
        }


/* =========================================================
   СОДЕРЖИМОЕ КАРТОЧКИ
   ========================================================= */

.metric-content[b-a64vhmae87] {
    min-width: 0;
    flex: 1;
}


.metric-title[b-a64vhmae87] {
    margin-bottom: 8px;
    color: #adb8bf;
    font-size: 0.79rem;
}


.metric-value[b-a64vhmae87] {
    min-width: 0;
    color: #f7f9fa;
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}


.hostname-value[b-a64vhmae87] {
    font-size: 0.90rem;
}


.os-value[b-a64vhmae87] {
    font-size: 0.93rem;
}


.uptime-value[b-a64vhmae87] {
    white-space: normal;
}


.metric-description[b-a64vhmae87] {
    margin-top: 8px;
    color: #89969e;
    font-size: 0.70rem;
    line-height: 1.25;
}


/* =========================================================
   VPN
   ========================================================= */

.vpn-online[b-a64vhmae87] {
    color: #28e5c7;
    text-shadow: 0 0 10px rgba(40, 229, 199, 0.12);
}


.vpn-offline[b-a64vhmae87] {
    color: #ff6e63;
}

.metric-value.vpn-online[b-a64vhmae87],
.metric-value.vpn-offline[b-a64vhmae87] {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}


.vpn-container[b-a64vhmae87] {
    color: #31d9cb;
}


/* =========================================================
   ПРОГРЕСС CPU / RAM / ДИСК
   ========================================================= */

.metric-progress[b-a64vhmae87] {
    width: 100%;
    height: 7px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}


.metric-progress-bar[b-a64vhmae87] {
    width: 0;
    height: 100%;
    min-width: 0;
    border-radius: 999px;
    background: linear-gradient( 90deg, #ffbd19, #ffe035 );
    box-shadow: 0 0 10px rgba(255, 198, 25, 0.20);
    transition: width 0.35s ease;
}


/* =========================================================
   АНИМАЦИЯ
   ========================================================= */

@keyframes homePulse-b-a64vhmae87 {

    from {
        opacity: 0.45;
        transform: scale(0.88);
    }

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


/* =========================================================
   СВОРАЧИВАНИЕ КАРТОЧКИ СЕРВЕРА
   На десктопе кнопка скрыта.
   ========================================================= */

.server-collapse-button[b-a64vhmae87] {
    display: none;
}


/* =========================================================
   АДАПТАЦИЯ
   ========================================================= */

@media (max-width: 1380px) {

    .server-metrics[b-a64vhmae87] {
        grid-template-columns: repeat( 4, minmax(150px, 1fr) );
    }
}


@media (max-width: 1050px) {

    .home-hero[b-a64vhmae87] {
        min-height: 0;
        padding: 8px 6px 26px;
    }


    .selected-server-card[b-a64vhmae87] {
        width: 310px;
    }


    .server-panel-header[b-a64vhmae87] {
        flex-direction: column;
    }


    .connection-state[b-a64vhmae87] {
        min-width: 0;
        text-align: left;
    }


    .connection-row[b-a64vhmae87] {
        justify-content: flex-start;
    }


    .server-metrics[b-a64vhmae87] {
        grid-template-columns: repeat( 2, minmax(160px, 1fr) );
    }
}


@media (max-width: 620px) {

    .home-page[b-a64vhmae87] {
        max-width: none;
    }

    .home-hero[b-a64vhmae87] {
        min-height: 0;
        padding: 2px 2px 14px;
    }

    .home-title-block h1[b-a64vhmae87] {
        margin: 0;
        font-size: 2.35rem;
        line-height: .96;
        letter-spacing: -0.025em;
    }

    .home-title-block p[b-a64vhmae87] {
        margin-top: 9px;
        max-width: 340px;
        font-size: .86rem;
        line-height: 1.5;
    }

    /* Компактная карточка "Выбранный сервер" */
    .selected-server-card[b-a64vhmae87] {
        width: 100%;
        min-height: 72px;
        margin-top: 12px;
        padding: 11px 14px;
        gap: 10px;
        align-items: center;
        border-radius: 12px;
    }

    .selected-server-card-quote[b-a64vhmae87] {
        margin-top: 0;
        font-size: 1.85rem;
        line-height: 1;
    }

    .selected-server-card-label[b-a64vhmae87] {
        font-size: .76rem;
        line-height: 1.2;
    }

    .selected-server-card-name[b-a64vhmae87] {
        margin-top: 3px;
        font-size: 1rem;
        line-height: 1.15;
    }

    .selected-server-card-line[b-a64vhmae87] {
        display: none;
    }

    .servers-list[b-a64vhmae87] {
        gap: 12px;
    }

    /* Карточка сервера */
    .server-panel[b-a64vhmae87] {
        padding: 12px;
        border-radius: 14px;
    }

    .server-panel-header[b-a64vhmae87] {
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 12px;
        padding: 0 42px 0 0;
    }

    .server-identification[b-a64vhmae87] {
        gap: 10px;
        align-items: flex-start;
    }

    .server-country-flag[b-a64vhmae87] {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-width: 1.5px;
    }

    .server-country-fallback[b-a64vhmae87] {
        font-size: 1.05rem;
    }

    .server-collapse-button[b-a64vhmae87] {
        width: 34px;
        height: 34px;

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

        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;

        padding: 0;

        border: 1px solid rgba(255, 207, 47, .34);
        border-radius: 9px;

        color: #ffd43a;
        background: rgba(5, 10, 12, .70);

        box-shadow: 0 0 12px rgba(255, 194, 0, .05);

        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .server-collapse-button svg[b-a64vhmae87] {
        width: 18px;
        height: 18px;

        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;

        transition: transform .18s ease;
    }

    .server-collapse-button svg.is-collapsed[b-a64vhmae87] {
        transform: rotate(180deg);
    }

    .server-panel.mobile-collapsed .server-panel-header[b-a64vhmae87] {
        margin-bottom: 0;
    }

    .server-panel.mobile-collapsed .server-metrics[b-a64vhmae87],
    .server-panel.mobile-collapsed .server-alert[b-a64vhmae87] {
        display: none;
    }

    .server-name-line[b-a64vhmae87] {
        gap: 8px;
    }

    .server-name-line h2[b-a64vhmae87] {
        font-size: 1.25rem;
        line-height: 1.1;
    }

    .server-main-dot[b-a64vhmae87] {
        width: 10px;
        height: 10px;
    }

    .selected-badge[b-a64vhmae87] {
        padding: 3px 8px;
        font-size: .57rem;
    }

    .server-caption[b-a64vhmae87] {
        margin-top: 4px;
        font-size: .73rem;
    }

    /* Статус подключения превращаем в компактную строку */
    .connection-state[b-a64vhmae87] {
        width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 7px 12px;
        padding: 9px 10px;
        box-sizing: border-box;
        border: 1px solid rgba(33, 229, 192, .10);
        border-radius: 9px;
        background: rgba(4, 11, 12, .42);
        text-align: left;
    }

    .connection-row[b-a64vhmae87] {
        justify-content: flex-start;
        gap: 8px;
    }

    .connection-dot[b-a64vhmae87] {
        width: 11px;
        height: 11px;
    }

    .connection-title[b-a64vhmae87] {
        font-size: .70rem;
        letter-spacing: .02em;
    }

    .connection-subtitle[b-a64vhmae87] {
        margin-top: 0;
        font-size: .68rem;
        white-space: nowrap;
    }

    /*
       2 колонки вместо одной:
       Hostname занимает всю ширину,
       дальше ОС/VPN, CPU/RAM, Диск/Uptime.
    */
    .server-metrics[b-a64vhmae87] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .server-metrics > .metric-card:first-child[b-a64vhmae87] {
        grid-column: 1 / -1;
    }

    .metric-card[b-a64vhmae87] {
        min-height: 84px;
        gap: 9px;
        padding: 11px 10px;
        border-radius: 9px;
    }

    .server-metrics > .metric-card:first-child[b-a64vhmae87] {
        min-height: 76px;
    }

    .metric-icon[b-a64vhmae87] {
        width: 22px;
        height: 22px;
        min-width: 22px;
        max-width: 22px;
        flex-basis: 22px;
    }

    .metric-icon svg[b-a64vhmae87] {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
    }

    .metric-title[b-a64vhmae87] {
        margin-bottom: 4px;
        font-size: .68rem;
    }

    .metric-value[b-a64vhmae87] {
        font-size: .88rem;
        line-height: 1.2;
    }

    .hostname-value[b-a64vhmae87] {
        font-size: .82rem;
    }

    .os-value[b-a64vhmae87] {
        font-size: .82rem;
    }

    .metric-description[b-a64vhmae87] {
        margin-top: 5px;
        font-size: .61rem;
        line-height: 1.18;
    }

    .metric-progress[b-a64vhmae87] {
        height: 5px;
        margin-top: 7px;
    }

    .vpn-status-text[b-a64vhmae87] {
        white-space: nowrap;
        word-break: normal;
        overflow-wrap: normal;
    }
    .vpn-status-text[b-a64vhmae87] {
        white-space: nowrap;
        word-break: normal;
        overflow-wrap: normal;
        font-size: 16px;
    }
}
/* /Components/Pages/Routing.razor.rz.scp.css */
/* Ninja VPN — routing editor. Visual-only layout; backend publishing remains unchanged. */
.routing-page[b-n2ia3l6ycg] {
    --rn-gold: #f2ce68;
    --rn-gold-strong: #f6da79;
    --rn-green: #81d7ad;
    --rn-muted: #9da9ae;
    --rn-line: rgba(205, 216, 213, .13);
    --rn-surface: rgba(10, 15, 18, .94);
    --rn-raised: rgba(22, 28, 32, .94);
    color: #f2f3f2;
    max-width: 1660px;
    margin: 0 auto;
    padding: 16px 19px 45px;
}
.routing-header[b-n2ia3l6ycg] {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px;}
.routing-eyebrow[b-n2ia3l6ycg] {color:var(--rn-gold);font-size:.69rem;font-weight:850;letter-spacing:.17em;}
.routing-header h1[b-n2ia3l6ycg] {font-size:clamp(1.65rem,2.8vw,2.6rem);line-height:1.13;letter-spacing:-.03em;font-weight:850;margin:6px 0 4px;}
.routing-header p[b-n2ia3l6ycg] {font-size:.98rem;color:#bdc5c6;margin:0;}
.routing-server[b-n2ia3l6ycg] {border-radius:12px;border:1px solid rgba(245,204,91,.42);background:rgba(13,17,20,.85);padding:12px 17px;color:#ebd394;font-size:.79rem;white-space:nowrap;}
.routing-workspace[b-n2ia3l6ycg] {display:grid;grid-template-columns:minmax(255px,315px) minmax(0,1fr);gap:14px;align-items:start;}
.routing-card[b-n2ia3l6ycg] {min-width:0;background:linear-gradient(150deg,rgba(21,26,29,.97),rgba(10,15,18,.97));border:1px solid var(--rn-line);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.18);}
.routing-user-panel[b-n2ia3l6ycg] {padding:18px 16px 14px;border-color:rgba(239,200,90,.36);background:linear-gradient(160deg,rgba(16,19,20,.96),rgba(8,12,14,.95));}
.routing-list-heading[b-n2ia3l6ycg] {display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.routing-list-heading h2[b-n2ia3l6ycg] {font-size:1.04rem;line-height:1.3;font-weight:800;margin:0;display:flex;align-items:center;gap:11px;}
.routing-count[b-n2ia3l6ycg] {border-radius:9px;border:1px solid rgba(242,206,104,.22);background:rgba(242,206,104,.13);color:#eed48c;padding:3px 8px;line-height:1.3;font-size:.81rem;}
.routing-search-wrap[b-n2ia3l6ycg] {position:relative;}
.routing-search-wrap>span[b-n2ia3l6ycg] {position:absolute;left:13px;top:9px;font-size:1.55rem;line-height:1;color:#88949a;pointer-events:none;}
.routing-input[b-n2ia3l6ycg] {display:block;width:100%;box-sizing:border-box;border:1px solid #364145!important;border-radius:9px;background:#11181b!important;color:#f0f3f1!important;font:inherit;font-size:.86rem;outline:none;padding:11px 13px;min-height:43px;}
.routing-input[b-n2ia3l6ycg]::placeholder {color:#899396;}
.routing-input:focus[b-n2ia3l6ycg] {border-color:var(--rn-gold)!important;box-shadow:0 0 0 3px rgba(240,198,75,.12);}
.routing-search-wrap .routing-input[b-n2ia3l6ycg] {padding-left:37px;}
.routing-filters[b-n2ia3l6ycg] {display:flex;gap:5px;margin:12px 0 13px;flex-wrap:wrap;}
.routing-filters button[b-n2ia3l6ycg] {color:#acb5b9;background:#20272b;border:1px solid rgba(255,255,255,.04);border-radius:20px;padding:7px 9px;display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;cursor:pointer;white-space:nowrap;}
.routing-filters button span[b-n2ia3l6ycg] {border-radius:10px;background:rgba(255,255,255,.08);padding:2px 5px;}
.routing-filters button.is-active[b-n2ia3l6ycg] {background:linear-gradient(130deg,#edc960,#f6dd83);color:#182024;border-color:#f3d67a;}
.routing-filters button.is-active span[b-n2ia3l6ycg] {background:rgba(0,0,0,.12);}
.routing-users[b-n2ia3l6ycg] {display:flex;flex-direction:column;gap:7px;max-height:610px;overflow-y:auto;padding:0 2px 2px 0;}
.routing-user[b-n2ia3l6ycg] {display:flex;align-items:center;gap:11px;width:100%;min-width:0;text-align:left;cursor:pointer;color:#edf1ef;padding:16px 12px;border-radius:11px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(135deg,rgba(26,32,35,.85),rgba(17,23,26,.9));position:relative;transition:border-color .18s,box-shadow .18s,background .18s;}
.routing-user:hover[b-n2ia3l6ycg] {border-color:rgba(244,205,92,.38);background:#252929;}
.routing-user.is-selected[b-n2ia3l6ycg] {border-color:var(--rn-gold);background:linear-gradient(115deg,rgba(239,192,53,.14),rgba(28,26,20,.88));box-shadow:inset 3px 0 #f3d673,0 0 21px rgba(243,200,84,.16);}
.routing-user-state[b-n2ia3l6ycg] {display:block;flex-shrink:0;height:10px;width:10px;border-radius:50%;background:#737f84;}
.routing-user-state.is-ready[b-n2ia3l6ycg] {background:#83d7ac;box-shadow:0 0 7px rgba(129,215,172,.21);}
.routing-user-body[b-n2ia3l6ycg] {display:flex;flex:1;min-width:0;flex-direction:column;gap:5px;}
.routing-user-body strong[b-n2ia3l6ycg] {font-size:.9rem;font-weight:800;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.routing-user-body small[b-n2ia3l6ycg] {font-size:.7rem;color:#a8b4b7;line-height:1.4;overflow-wrap:anywhere;}
.routing-chevron[b-n2ia3l6ycg] {color:#bbc3c5;font-size:1.55rem;line-height:1;}
.routing-user.is-selected .routing-chevron[b-n2ia3l6ycg] {color:var(--rn-gold);}
.routing-list-manage[b-n2ia3l6ycg] {display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:11px 9px;background:transparent;color:#d6c28d;border:1px dashed rgba(244,204,95,.22);border-radius:9px;font-size:.75rem;cursor:pointer;}
.routing-list-manage:hover[b-n2ia3l6ycg] {border-color:var(--rn-gold);background:rgba(244,204,95,.05);}
.routing-edit-area[b-n2ia3l6ycg] {min-width:0;}
.routing-profile-head[b-n2ia3l6ycg] {display:flex;justify-content:space-between;align-items:center;gap:15px;padding:7px 5px 13px;}
.routing-overline[b-n2ia3l6ycg] {color:#adb7b8;font-size:.78rem;}
.routing-profile-head h2[b-n2ia3l6ycg] {font-size:1.5rem;line-height:1.25;letter-spacing:-.018em;margin:3px 0 0;font-weight:850;}
.routing-status[b-n2ia3l6ycg] {display:flex;align-items:center;gap:8px;color:#b0ddbc;border:1px solid rgba(119,201,144,.2);border-radius:11px;background:rgba(100,167,118,.09);padding:9px 11px;font-size:.7rem;font-weight:700;white-space:nowrap;}
.routing-status i[b-n2ia3l6ycg],.routing-save-dot[b-n2ia3l6ycg] {width:8px;height:8px;display:inline-block;border-radius:50%;background:#79ca98;box-shadow:0 0 10px rgba(111,211,143,.6);}
.routing-status.is-dirty[b-n2ia3l6ycg] {color:var(--rn-gold);background:rgba(243,198,81,.1);border-color:rgba(243,198,81,.3);}
.routing-status.is-dirty i[b-n2ia3l6ycg],.routing-save-dot.is-dirty[b-n2ia3l6ycg] {background:var(--rn-gold);box-shadow:0 0 13px rgba(248,190,65,.85);}
.routing-status.is-new[b-n2ia3l6ycg] {color:#a8b3b7;}
.routing-status.is-new i[b-n2ia3l6ycg] {background:#9ba2a6;box-shadow:none;}
/* Routing mode: SVG pictograms and proportions closely matching the approved concept. */
.routing-mode-panel[b-n2ia3l6ycg] {padding:18px 17px 15px;margin-bottom:12px;background:linear-gradient(130deg,rgba(30,32,32,.96),rgba(16,20,22,.97));}
.routing-section-title[b-n2ia3l6ycg] {display:flex;align-items:center;gap:11px;font-weight:850;font-size:1.055rem;letter-spacing:-.01em;margin:0 0 15px;line-height:1.35;}
.routing-title-icon[b-n2ia3l6ycg] {display:inline-grid;place-items:center;flex:0 0 22px;width:22px;height:22px;color:var(--rn-gold);}
.routing-title-icon svg[b-n2ia3l6ycg] {display:block;width:22px;height:22px;}
.routing-mode-grid[b-n2ia3l6ycg] {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.routing-mode[b-n2ia3l6ycg] {display:flex;min-width:0;min-height:68px;align-items:center;justify-content:center;gap:13px;text-align:left;border:1px solid rgba(225,233,230,.14);border-radius:9px;color:#e9eeed;background:linear-gradient(125deg,#24282a,#1b2023);font-size:.85rem;font-weight:725;line-height:1.35;padding:10px 11px;cursor:pointer;transition:background .18s,box-shadow .18s,border-color .18s;}
.routing-mode-label[b-n2ia3l6ycg] {min-width:0;overflow-wrap:normal;}
.routing-mode:hover:not(:disabled)[b-n2ia3l6ycg] {border-color:rgba(245,206,102,.5);}
.routing-mode.is-active[b-n2ia3l6ycg] {background:linear-gradient(130deg,rgba(106,87,46,.35),rgba(31,32,28,.96));border-color:#f3d782;box-shadow:0 0 0 1px rgba(247,215,128,.34),0 0 17px rgba(235,193,85,.19),inset 0 0 20px rgba(250,207,77,.04);color:#f2f0e9;}
.routing-mode:disabled[b-n2ia3l6ycg] {opacity:.6;cursor:default;}
.routing-mode-icon[b-n2ia3l6ycg] {display:inline-flex;align-items:center;justify-content:center;flex:0 0 27px;width:27px;height:27px;color:#b9c1c4;line-height:1;}
.routing-mode-icon svg[b-n2ia3l6ycg] {display:block;width:27px;height:27px;}
.routing-mode .routing-shield-icon[b-n2ia3l6ycg] {color:#eecf79;}
.routing-mode.is-active .routing-shield-icon[b-n2ia3l6ycg] {color:#f4d887;}
.routing-mode.is-active .routing-globe-icon[b-n2ia3l6ycg],.routing-mode.is-active .routing-list-icon[b-n2ia3l6ycg] {color:#f0d889;}
.routing-route-explainer[b-n2ia3l6ycg] {display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:103px;margin-top:18px;}
.routing-mode-copy[b-n2ia3l6ycg] {display:flex;flex-direction:column;gap:7px;min-width:0;flex:1 1 auto;}
.routing-copy-section[b-n2ia3l6ycg] {display:flex;flex-direction:column;gap:2px;}
.routing-mode-copy strong[b-n2ia3l6ycg] {font-size:.92rem;font-weight:800;color:#edcb76;line-height:1.4;}
.routing-mode-copy strong.is-direct[b-n2ia3l6ycg] {color:#83c9a9;}
.routing-mode-copy small[b-n2ia3l6ycg] {display:block;color:#aeb7ba;font-size:.79rem;line-height:1.35;}
.routing-direct-dot[b-n2ia3l6ycg] {display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rn-green);margin-right:5px;}
.routing-route-flow[b-n2ia3l6ycg] {display:flex;gap:6px;align-items:center;justify-content:flex-end;flex:0 1 auto;min-width:0;}
.routing-flow-device[b-n2ia3l6ycg] {display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 67px;color:#c3cbcd;}
.routing-flow-device-icon[b-n2ia3l6ycg] {display:grid;place-items:center;width:62px;height:58px;border:1px solid #556267;border-radius:10px;background:linear-gradient(145deg,rgba(30,36,39,.75),rgba(10,14,17,.56));box-shadow:inset 0 1px 1px rgba(255,255,255,.04);color:#b7c0c3;}
.routing-flow-device-icon svg[b-n2ia3l6ycg] {width:31px;height:31px;display:block;}
.routing-flow-device small[b-n2ia3l6ycg] {font-size:.68rem;color:#adb7ba;white-space:nowrap;}
.routing-flow-arrow[b-n2ia3l6ycg] {flex:0 1 49px;width:49px;min-width:19px;display:block;position:relative;height:0;border-top:2px dashed rgba(245,202,98,.85);color:#e7c66d;}
.routing-flow-arrow[b-n2ia3l6ycg]::after {content:"";position:absolute;right:0;top:-6px;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);}
.routing-flow-arrow.is-direct[b-n2ia3l6ycg] {border-color:rgba(116,200,156,.84);color:#79c79d;}
.routing-flow-vpn[b-n2ia3l6ycg],.routing-flow-direct[b-n2ia3l6ycg] {display:flex;align-items:center;gap:9px;justify-content:center;flex:0 0 auto;min-width:145px;min-height:68px;box-sizing:border-box;padding:9px 12px;border-radius:9px;border:1px solid rgba(244,205,95,.55);color:#e8c876;background:linear-gradient(130deg,rgba(241,194,77,.13),rgba(68,61,40,.24));}
.routing-flow-direct[b-n2ia3l6ycg] {border-color:rgba(119,209,164,.54);color:#8fd3aa;background:linear-gradient(130deg,rgba(105,176,141,.11),rgba(42,68,56,.16));}
.routing-flow-symbol[b-n2ia3l6ycg] {display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;}
.routing-flow-symbol svg[b-n2ia3l6ycg] {width:26px;height:26px;display:block;}
.routing-flow-text[b-n2ia3l6ycg] {display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.22;white-space:nowrap;}
.routing-flow-text strong[b-n2ia3l6ycg] {font-size:.82rem;font-weight:850;}
.routing-flow-text small[b-n2ia3l6ycg] {font-size:.71rem;color:inherit;opacity:.88;}
.routing-rules-grid[b-n2ia3l6ycg] {display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start;gap:12px;}
.routing-personal-panel[b-n2ia3l6ycg],.routing-sets-panel[b-n2ia3l6ycg],.routing-exclusions-panel[b-n2ia3l6ycg] {padding:16px 15px;}
.routing-tabs[b-n2ia3l6ycg] {display:flex;gap:3px;width:max-content;padding:3px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:#20272b;margin-bottom:12px;}
.routing-tabs button[b-n2ia3l6ycg] {padding:8px 17px;border:0;border-radius:7px;background:transparent;color:#b4c0c1;cursor:pointer;font-size:.76rem;}
.routing-tabs button.is-active[b-n2ia3l6ycg] {background:linear-gradient(125deg,#f0cd67,#f6dd8b);color:#151b1d;font-weight:850;box-shadow:0 2px 10px rgba(246,201,83,.12);}
.routing-rule-table[b-n2ia3l6ycg] {border:1px solid rgba(255,255,255,.07);border-radius:9px;overflow:hidden;background:rgba(7,12,15,.54);}
.routing-rule-head[b-n2ia3l6ycg],.routing-rule-row[b-n2ia3l6ycg] {display:grid;grid-template-columns:minmax(0,1fr) auto 27px;align-items:center;gap:7px;padding:9px 11px;}
.routing-rule-head[b-n2ia3l6ycg] {background:#252d30;color:#9da9ac;font-size:.7rem;padding-top:9px;padding-bottom:9px;}
.routing-rule-row[b-n2ia3l6ycg] {min-height:39px;border-top:1px solid rgba(255,255,255,.055);font-size:.78rem;}
.routing-rule-domain[b-n2ia3l6ycg] {display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.routing-rule-domain>span[b-n2ia3l6ycg] {color:#a8b6bb;margin-right:5px;font-size:1.05rem;}
.routing-rule-route[b-n2ia3l6ycg] {display:inline-flex;justify-content:center;align-items:center;padding:4px 8px;border-radius:6px;font-size:.68rem;font-weight:700;white-space:nowrap;background:rgba(237,189,70,.12);color:#edd078;border:1px solid rgba(239,194,72,.35);}
.routing-rule-route.is-direct[b-n2ia3l6ycg] {background:rgba(105,185,146,.12);color:var(--rn-green);border-color:rgba(113,205,160,.28);}
.routing-rule-delete[b-n2ia3l6ycg] {display:grid;place-items:center;width:27px;height:27px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:transparent;color:#bdc5c6;font-size:1.15rem;cursor:pointer;}
.routing-rule-delete:hover[b-n2ia3l6ycg] {color:#ffafa8;border-color:#f3a29a;}
.routing-rules-empty[b-n2ia3l6ycg] {color:#9ba8ae;font-size:.75rem;line-height:1.6;padding:13px 11px;margin:0;}
.routing-add-rule[b-n2ia3l6ycg] {display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;margin-top:10px;align-items:center;}
.routing-add-rule .routing-input[b-n2ia3l6ycg] {min-width:0;font-size:.76rem;padding:9px 10px;min-height:38px;}
.routing-add-rule .routing-primary[b-n2ia3l6ycg] {min-height:38px;padding:7px 11px;}
.routing-import-row[b-n2ia3l6ycg] {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;}
.routing-import-btn[b-n2ia3l6ycg] {display:inline-flex;align-items:center;gap:5px;border:1px solid #596466;background:#1b2428;color:#e9efef;border-radius:9px;padding:9px 13px;cursor:pointer;font-size:.75rem;font-weight:700;}
.routing-import-btn:hover[b-n2ia3l6ycg] {border-color:var(--rn-gold);color:var(--rn-gold);}
.routing-upload-input[b-n2ia3l6ycg] {position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;opacity:0!important;}
.routing-import-row small[b-n2ia3l6ycg],.routing-hint[b-n2ia3l6ycg] {display:block;font-size:.71rem;color:#9aa7aa;line-height:1.5;}
.routing-field-label[b-n2ia3l6ycg] {display:block;font-size:.81rem;font-weight:700;margin-bottom:8px;}
.routing-textarea[b-n2ia3l6ycg] {min-height:145px;resize:vertical;font: .81rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace!important;}
.routing-right-column[b-n2ia3l6ycg] {min-width:0;display:flex;flex-direction:column;gap:10px;}
.routing-section-head[b-n2ia3l6ycg] {display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:13px;}
.routing-section-head .routing-section-title[b-n2ia3l6ycg] {margin-bottom:0;}
.routing-set-manage-btn[b-n2ia3l6ycg] {border:1px solid rgba(244,203,85,.36);border-radius:8px;background:rgba(241,194,57,.05);color:var(--rn-gold);padding:7px 9px;font-size:.68rem;font-weight:750;cursor:pointer;white-space:nowrap;}
.routing-set-manage-btn:hover[b-n2ia3l6ycg] {background:rgba(241,194,57,.12);}
.routing-sets-panel[b-n2ia3l6ycg]  .ninja-route-picker {max-height:300px;}
.routing-exclusions-panel .routing-section-title[b-n2ia3l6ycg] {margin-bottom:11px;}
.routing-chips[b-n2ia3l6ycg] {display:flex;align-items:center;flex-wrap:wrap;gap:6px;background:#11191c;border:1px solid #374246;border-radius:9px;min-height:44px;padding:6px 7px;}
.routing-chip[b-n2ia3l6ycg] {display:inline-flex;align-items:center;gap:8px;background:#273034;border:1px solid #3c474b;border-radius:8px;padding:6px 8px;font-size:.72rem;color:#dce1e2;max-width:100%;overflow-wrap:anywhere;}
.routing-chip button[b-n2ia3l6ycg] {border:0;background:none;color:#abb7ba;font-size:1rem;cursor:pointer;line-height:1;}
.routing-chip button:hover[b-n2ia3l6ycg] {color:#fff;}
.routing-chip-input[b-n2ia3l6ycg] {flex:1;min-width:110px;border:0;outline:0;color:#edf1f0;background:transparent;font-size:.75rem;padding:5px;}
.routing-chip-add[b-n2ia3l6ycg] {border:0;background:transparent;color:var(--rn-gold);font-size:1.25rem;cursor:pointer;padding:2px 6px;}
.routing-exclusions-panel .routing-hint[b-n2ia3l6ycg] {margin-top:9px;}
.routing-advanced[b-n2ia3l6ycg] {border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(11,17,20,.78);overflow:hidden;}
.routing-all-advanced[b-n2ia3l6ycg] {margin-top:12px;}
.routing-advanced-summary[b-n2ia3l6ycg] {list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 15px;font-size:.81rem;font-weight:800;cursor:pointer;color:#e2e8e7;}
.routing-advanced-summary[b-n2ia3l6ycg]::-webkit-details-marker {display:none;}
.routing-advanced-summary[b-n2ia3l6ycg]::after {content:'⌄';font-size:1.1rem;color:#bec7c9;transition:transform .2s;}
.routing-advanced[open]>.routing-advanced-summary[b-n2ia3l6ycg]::after {transform:rotate(180deg);}
.routing-advanced-summary:hover[b-n2ia3l6ycg] {background:rgba(255,255,255,.03);}
.routing-advanced-content[b-n2ia3l6ycg] {border-top:1px solid var(--rn-line);padding:11px 13px 14px;}
.routing-link-row[b-n2ia3l6ycg] {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.routing-link-row span[b-n2ia3l6ycg] {display:flex;flex-direction:column;gap:5px;min-width:0;}
.routing-link-row strong[b-n2ia3l6ycg] {font-size:.73rem;}
.routing-link-row small[b-n2ia3l6ycg] {font-size:.69rem;color:#93a1a5;}
.routing-url[b-n2ia3l6ycg] {color:#aeb8ba;overflow-wrap:anywhere;background:#0d1517;border:1px solid #283337;border-radius:8px;padding:10px;font-size:.69rem;line-height:1.5;}
.routing-danger-zone[b-n2ia3l6ycg] {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;}
.routing-danger-zone small[b-n2ia3l6ycg] {color:#aab4b7;font-size:.72rem;}
.routing-save-bar[b-n2ia3l6ycg] {position:sticky;bottom:10px;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:11px;padding:11px 14px;border-radius:11px;background:linear-gradient(100deg,rgba(35,30,17,.98),rgba(22,21,19,.97));border:1px solid rgba(240,197,74,.44);box-shadow:0 10px 34px rgba(0,0,0,.35);}
.routing-save-state[b-n2ia3l6ycg] {display:flex;align-items:center;gap:9px;font-size:.75rem;font-weight:700;color:#e3c988;}
.routing-save-buttons[b-n2ia3l6ycg] {display:flex;align-items:center;gap:9px;}
.routing-primary[b-n2ia3l6ycg],.routing-outline[b-n2ia3l6ycg],.routing-danger[b-n2ia3l6ycg] {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:9px 13px;font-size:.75rem;font-weight:800;border-radius:9px;text-decoration:none;cursor:pointer;white-space:nowrap;}
.routing-primary[b-n2ia3l6ycg] {background:linear-gradient(125deg,#f2ce67,#f7dc81);color:#191b16;border:1px solid #f6d478;}
.routing-primary:hover[b-n2ia3l6ycg] {filter:brightness(1.08);}
.routing-outline[b-n2ia3l6ycg] {background:#1c2529;color:#e0e7e8;border:1px solid #4a555a;}
.routing-outline:hover[b-n2ia3l6ycg] {border-color:var(--rn-gold);color:#ffe18d;}
.routing-danger[b-n2ia3l6ycg] {background:transparent;color:#e9a6a0;border:1px solid rgba(236,124,109,.4);}
.routing-danger:hover[b-n2ia3l6ycg] {background:rgba(235,100,87,.09);}
.routing-primary:disabled[b-n2ia3l6ycg],.routing-outline:disabled[b-n2ia3l6ycg],.routing-danger:disabled[b-n2ia3l6ycg] {opacity:.5;cursor:not-allowed;}
.routing-muted[b-n2ia3l6ycg] {font-size:.78rem;line-height:1.55;color:#b3bdc0;}
.routing-notice[b-n2ia3l6ycg] {padding:12px 14px;border-radius:11px;background:rgba(71,151,93,.16);color:#c0e5c7;border:1px solid rgba(71,151,93,.35);margin:0 0 16px;font-size:.82rem;}
.routing-notice.is-error[b-n2ia3l6ycg] {background:rgba(170,74,65,.16);color:#ffc7c0;border-color:rgba(236,103,88,.39);}
.routing-empty[b-n2ia3l6ycg] {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center;padding:55px 26px;min-height:370px;}
.routing-empty-icon[b-n2ia3l6ycg] {color:var(--rn-gold);font-size:2.6rem;}
.routing-empty h2[b-n2ia3l6ycg] {margin:0;font-size:1.2rem;}
.routing-empty p[b-n2ia3l6ycg] {color:#acb7ba;max-width:470px;font-size:.84rem;line-height:1.6;margin:0 0 6px;}
/* Shared sets remain fully editable, but the catalog lives in a dedicated dialog. */
.routing-manager-backdrop[b-n2ia3l6ycg] {position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;}
.routing-manager-dialog[b-n2ia3l6ycg] {width:min(920px,100%);max-height:min(88vh,850px);overflow-y:auto;background:linear-gradient(155deg,#151b1e,#0b1013);border:1px solid rgba(244,204,90,.6);border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.6);padding:24px;color:#eff2f0;}
.routing-manager-head[b-n2ia3l6ycg] {display:flex;justify-content:space-between;gap:15px;align-items:flex-start;}
.routing-manager-head h2[b-n2ia3l6ycg] {font-size:1.5rem;margin:4px 0;}
.routing-manager-head p[b-n2ia3l6ycg] {font-size:.83rem;color:#b0bbbe;max-width:630px;line-height:1.5;margin:0;}
.routing-manager-close[b-n2ia3l6ycg] {border:1px solid #465156;border-radius:10px;background:#1f292d;color:#e3e8e9;min-width:42px;min-height:42px;font-size:1.4rem;cursor:pointer;}
.routing-manager-toolbar[b-n2ia3l6ycg] {display:flex;justify-content:flex-end;margin:18px 0 14px;}
.routing-catalog-grid[b-n2ia3l6ycg] {display:grid;grid-template-columns:minmax(195px,.8fr) minmax(0,1.2fr);gap:13px;}
.routing-catalog-list[b-n2ia3l6ycg] {display:flex;flex-direction:column;gap:7px;max-height:450px;overflow-y:auto;}
.routing-catalog-item[b-n2ia3l6ycg] {text-align:left;border:1px solid #374347;background:#182126;color:#eaf0ef;padding:13px 14px;border-radius:10px;display:flex;flex-direction:column;gap:6px;cursor:pointer;}
.routing-catalog-item.is-active[b-n2ia3l6ycg],.routing-catalog-item:hover[b-n2ia3l6ycg] {border-color:var(--rn-gold);background:rgba(244,199,82,.08);}
.routing-catalog-item strong[b-n2ia3l6ycg] {font-size:.84rem;}
.routing-catalog-item small[b-n2ia3l6ycg] {color:#b4bdbf;font-size:.73rem;}
.routing-set-editor[b-n2ia3l6ycg] {border:1px solid #3b474c;border-radius:11px;padding:16px;background:#10181b;}
.routing-field[b-n2ia3l6ycg] {margin-bottom:13px;}
.routing-field>label[b-n2ia3l6ycg] {display:block;margin-bottom:7px;color:#e5eaea;font-size:.77rem;font-weight:750;}
.routing-actions[b-n2ia3l6ycg] {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;}
.routing-manager-placeholder[b-n2ia3l6ycg] {border:1px dashed #3d4a4e;border-radius:11px;color:#adb9bd;display:grid;place-items:center;text-align:center;padding:28px;font-size:.82rem;}
@media (max-width:1350px) {
 .routing-page[b-n2ia3l6ycg] {padding:14px 14px 40px;}
 .routing-workspace[b-n2ia3l6ycg] {grid-template-columns:minmax(240px,285px) minmax(0,1fr);gap:12px;}
 .routing-route-explainer[b-n2ia3l6ycg] {align-items:flex-start;flex-wrap:wrap;}
 .routing-route-flow[b-n2ia3l6ycg] {justify-content:flex-start;}
 .routing-rules-grid[b-n2ia3l6ycg] {grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
 .routing-mode[b-n2ia3l6ycg] {gap:8px;font-size:.73rem;padding:8px 7px;}
 .routing-route-flow[b-n2ia3l6ycg] {gap:5px;}
 .routing-flow-arrow[b-n2ia3l6ycg] {width:29px;flex-basis:29px;}
 .routing-flow-vpn[b-n2ia3l6ycg],.routing-flow-direct[b-n2ia3l6ycg] {min-width:112px;padding:7px 9px;}
 .routing-flow-text small[b-n2ia3l6ycg] {font-size:.64rem;}
}
@media (max-width:1120px) {
 .routing-workspace[b-n2ia3l6ycg] {grid-template-columns:240px minmax(0,1fr);}
 .routing-rules-grid[b-n2ia3l6ycg] {grid-template-columns:1fr;}
 .routing-right-column[b-n2ia3l6ycg] {display:grid;grid-template-columns:1fr;}
 .routing-users[b-n2ia3l6ycg] {max-height:490px;}
 .routing-save-bar[b-n2ia3l6ycg] {flex-wrap:wrap;}
 .routing-save-buttons[b-n2ia3l6ycg] {width:100%;justify-content:flex-end;}
}
@media (max-width:780px) {
 .routing-workspace[b-n2ia3l6ycg] {grid-template-columns:1fr;}
 .routing-header[b-n2ia3l6ycg] {align-items:flex-start;flex-wrap:wrap;}
 .routing-users[b-n2ia3l6ycg] {max-height:290px;}
 .routing-user-panel[b-n2ia3l6ycg] {padding:14px;}
 .routing-mode-grid[b-n2ia3l6ycg] {grid-template-columns:1fr 1fr 1fr;}
 .routing-profile-head[b-n2ia3l6ycg] {align-items:flex-start;flex-wrap:wrap;}
 .routing-save-bar[b-n2ia3l6ycg] {position:static;}
 .routing-manager-dialog[b-n2ia3l6ycg] {padding:17px;}
}
@media (max-width:540px) {
 .routing-page[b-n2ia3l6ycg] {padding:11px 9px 30px;}
 .routing-header h1[b-n2ia3l6ycg] {font-size:1.75rem;}
 .routing-mode-grid[b-n2ia3l6ycg] {grid-template-columns:1fr;}
 .routing-mode[b-n2ia3l6ycg] {justify-content:flex-start;padding:11px 14px;min-height:54px;}
 .routing-mode-label br[b-n2ia3l6ycg] {display:none;}
 .routing-route-flow[b-n2ia3l6ycg] {justify-content:flex-start;flex-wrap:wrap;}
 .routing-flow-device[b-n2ia3l6ycg] {flex-basis:64px;}
 .routing-add-rule[b-n2ia3l6ycg] {grid-template-columns:minmax(0,1fr) auto;}
 .routing-add-rule>.routing-rule-route[b-n2ia3l6ycg] {display:none;}
 .routing-route-flow[b-n2ia3l6ycg] {flex-wrap:wrap;}
 .routing-save-buttons[b-n2ia3l6ycg] {flex-direction:column;width:100%;}
 .routing-save-buttons button[b-n2ia3l6ycg] {width:100%;}
 .routing-catalog-grid[b-n2ia3l6ycg] {grid-template-columns:1fr;}
 .routing-manager-backdrop[b-n2ia3l6ycg] {padding:9px;}
 .routing-link-row[b-n2ia3l6ycg],.routing-danger-zone[b-n2ia3l6ycg] {flex-wrap:wrap;}
}
@media (prefers-reduced-motion:reduce) {
 .routing-user[b-n2ia3l6ycg],.routing-mode[b-n2ia3l6ycg],.routing-advanced-summary[b-n2ia3l6ycg]::after {transition:none;}
}
/* /Components/Pages/Settings.razor.rz.scp.css */
/* =========================================================
   SETTINGS / SERVERS — NINJA VPN
   ========================================================= */

.servers-page[b-tv7mv6nkpw] {
    width: 100%;
    padding: 0 4px 28px;
}


/* =========================================================
   HEADER
   ========================================================= */

.page-header[b-tv7mv6nkpw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.15rem;
}

.page-title-wrap[b-tv7mv6nkpw] {
    min-width: 0;
}

.servers-title[b-tv7mv6nkpw] {
    margin: -0.35rem 0 0;
    color: #ffffff;
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-size: clamp(3rem, 4.1vw, 4.8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
    text-shadow: 0 3px 7px rgba(0, 0, 0, .76), 0 0 14px rgba(255, 216, 76, .06);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transform: translateY(-15px);
}

.servers-subtitle[b-tv7mv6nkpw] {
    margin: .5rem 0 0;
    color: rgba(221, 227, 230, .72);
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-size: clamp(.96rem, 1.15vw, 1.25rem);
    font-style: italic;
    line-height: 1.35;
    letter-spacing: -.025em;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .62);
}

.ninja-add-server-button[b-tv7mv6nkpw] {
    min-height: 46px;
    margin-top: 4px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid #ffe26e;
    border-radius: 9px;
    color: #151005;
    background: linear-gradient( 180deg, #ffeb84 0%, #ffd64b 58%, #e4ac18 100% );
    font: inherit;
    font-size: .92rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 0 17px rgba(255, 196, 27, .15), inset 0 1px 0 rgba(255, 255, 255, .42);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

    .ninja-add-server-button:hover[b-tv7mv6nkpw] {
        transform: translateY(-1px);
        filter: brightness(1.035);
        box-shadow: 0 0 24px rgba(255, 199, 29, .22), inset 0 1px 0 rgba(255, 255, 255, .46);
    }

.ninja-add-server-plus[b-tv7mv6nkpw] {
    font-size: 1.15rem;
    line-height: 1;
}


/* =========================================================
   ADD SERVER FORM
   ========================================================= */

.server-form-card[b-tv7mv6nkpw] {
    max-width: 980px;
    margin-bottom: 1.8rem;
    padding: 1.35rem 1.45rem 1.45rem;
    border: 1px solid rgba(226, 186, 37, .63);
    border-radius: 15px;
    background: linear-gradient( 180deg, rgba(7, 13, 15, .94), rgba(3, 9, 11, .91) );
    box-shadow: 0 16px 42px rgba(0, 0, 0, .23), inset 0 0 0 1px rgba(255, 213, 71, .018);
    backdrop-filter: blur(12px);
}

.form-header[b-tv7mv6nkpw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.form-eyebrow[b-tv7mv6nkpw] {
    margin-bottom: 3px;
    color: rgba(236, 201, 62, .78);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.form-header h3[b-tv7mv6nkpw] {
    margin: 0;
    color: #f0f2f3;
    font-size: 1.28rem;
    font-weight: 800;
}

.close-button[b-tv7mv6nkpw] {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(231, 193, 43, .42);
    border-radius: 9px;
    color: #dde2e4;
    background: rgba(3, 8, 10, .72);
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
    transition: .15s ease;
}

    .close-button:hover:not(:disabled)[b-tv7mv6nkpw] {
        color: #ffe067;
        border-color: rgba(255, 220, 90, .72);
    }

    .close-button:disabled[b-tv7mv6nkpw] {
        opacity: .5;
        cursor: default;
    }

.form-grid[b-tv7mv6nkpw] {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.3fr) 120px;
    gap: 1rem;
}

.form-group[b-tv7mv6nkpw] {
    display: flex;
    flex-direction: column;
    gap: .42rem;
}

    .form-group label[b-tv7mv6nkpw] {
        color: #c4cbce;
        font-size: .82rem;
        font-weight: 700;
    }

    .form-group .form-control[b-tv7mv6nkpw] {
        min-height: 43px;
        border: 1px solid rgba(255, 207, 49, .22);
        border-radius: 8px;
        color: #edf1f2;
        background: rgba(5, 11, 13, .88);
        box-shadow: none;
    }

        .form-group .form-control:focus[b-tv7mv6nkpw] {
            color: #ffffff;
            background: rgba(5, 11, 13, .96);
            border-color: rgba(255, 213, 67, .72);
            box-shadow: 0 0 0 3px rgba(255, 202, 35, .07);
        }

        .form-group .form-control[b-tv7mv6nkpw]::placeholder {
            color: rgba(177, 187, 191, .45);
        }

.form-actions[b-tv7mv6nkpw] {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.2rem;
}

.ninja-primary-button[b-tv7mv6nkpw],
.ninja-outline-button[b-tv7mv6nkpw],
.ninja-muted-button[b-tv7mv6nkpw] {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
    transition: .15s ease;
}

.ninja-primary-button[b-tv7mv6nkpw] {
    border: 1px solid #ffe16a;
    color: #171205;
    background: linear-gradient( 180deg, #ffe984, #edc13a );
}

.ninja-outline-button[b-tv7mv6nkpw] {
    border: 1px solid rgba(243, 202, 50, .64);
    color: #f2d254;
    background: rgba(3, 9, 11, .78);
}

.ninja-muted-button[b-tv7mv6nkpw] {
    border: 1px solid rgba(177, 188, 193, .27);
    color: #b9c1c5;
    background: rgba(5, 11, 13, .66);
}

    .ninja-primary-button:hover:not(:disabled)[b-tv7mv6nkpw],
    .ninja-outline-button:hover:not(:disabled)[b-tv7mv6nkpw],
    .ninja-muted-button:hover:not(:disabled)[b-tv7mv6nkpw] {
        transform: translateY(-1px);
        filter: brightness(1.04);
    }

    .ninja-primary-button:disabled[b-tv7mv6nkpw],
    .ninja-outline-button:disabled[b-tv7mv6nkpw],
    .ninja-muted-button:disabled[b-tv7mv6nkpw] {
        opacity: .45;
        cursor: default;
    }

.connection-result[b-tv7mv6nkpw] {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid rgba(94, 227, 142, .35);
    border-radius: 10px;
    background: radial-gradient( circle at 10% 50%, rgba(94, 227, 142, .075), transparent 34% ), rgba(6, 27, 17, .56);
}

.result-title[b-tv7mv6nkpw] {
    margin-bottom: .8rem;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #7be9a4;
    font-weight: 800;
}

.result-dot[b-tv7mv6nkpw] {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    background: #71e5a1;
    box-shadow: 0 0 8px rgba(113, 229, 161, .33);
}

.result-grid[b-tv7mv6nkpw] {
    display: flex;
    flex-wrap: wrap;
    gap: 2.3rem;
}

    .result-grid div[b-tv7mv6nkpw] {
        display: flex;
        flex-direction: column;
        min-width: 150px;
    }

    .result-grid span[b-tv7mv6nkpw] {
        color: #859095;
        font-size: .72rem;
    }

    .result-grid strong[b-tv7mv6nkpw] {
        margin-top: 3px;
        color: #e5eaec;
        font-size: .84rem;
    }

.ninja-alert[b-tv7mv6nkpw] {
    margin-top: 1rem;
    padding: .8rem .9rem;
    border-radius: 8px;
    font-size: .82rem;
}

.ninja-alert-danger[b-tv7mv6nkpw] {
    border: 1px solid rgba(255, 94, 81, .40);
    color: #ffb1a8;
    background: rgba(42, 10, 7, .76);
}


/* =========================================================
   SERVER GRID
   ========================================================= */

.servers-grid[b-tv7mv6nkpw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.server-card[b-tv7mv6nkpw] {
    min-width: 0;
    padding: 1.25rem 1.35rem 1.15rem;
    border: 1px solid rgba(220, 180, 32, .66);
    border-radius: 15px;
    background: linear-gradient( 180deg, rgba(7, 13, 15, .91), rgba(4, 9, 11, .88) );
    box-shadow: 0 15px 34px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255, 217, 77, .018);
    backdrop-filter: blur(11px);
    transition: border-color .17s ease, box-shadow .17s ease, transform .17s ease;
}

    .server-card:hover[b-tv7mv6nkpw] {
        transform: translateY(-1px);
        border-color: rgba(255, 215, 59, .82);
        box-shadow: 0 17px 37px rgba(0, 0, 0, .21), 0 0 20px rgba(255, 194, 22, .035);
    }

    .server-card.selected-server[b-tv7mv6nkpw] {
        border-color: rgba(255, 222, 72, .98);
        box-shadow: 0 0 0 1px rgba(255, 223, 78, .15), 0 0 19px rgba(255, 195, 28, .06), 0 17px 38px rgba(0, 0, 0, .22);
    }


/* =========================================================
   CARD HEADER
   ========================================================= */

.server-card-header[b-tv7mv6nkpw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.server-card-heading[b-tv7mv6nkpw] {
    min-width: 0;
}

.server-name-line[b-tv7mv6nkpw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.server-card h3[b-tv7mv6nkpw] {
    margin: 0;
    color: #f5f6f7;
    font-size: clamp(1.28rem, 1.5vw, 1.6rem);
    font-weight: 800;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.default-badge[b-tv7mv6nkpw] {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid rgba(255, 229, 111, .78);
    border-radius: 999px;
    color: #191204;
    background: linear-gradient( 180deg, #ffe986, #e8b82a );
    font-size: .72rem;
    font-weight: 850;
    white-space: nowrap;
    box-shadow: 0 0 13px rgba(255, 196, 26, .08);
}


.server-card-header-actions[b-tv7mv6nkpw] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.server-header-select-button[b-tv7mv6nkpw] {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid rgba(255, 219, 70, .95);
    border-radius: 8px;
    color: #efd044;
    background: rgba(7, 13, 15, .82);
    font: inherit;
    font-size: .75rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 0 11px rgba(255, 198, 27, .04);
    transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}

.server-header-select-button:hover[b-tv7mv6nkpw] {
    transform: translateY(-1px);
    filter: brightness(1.06);
    border-color: rgba(255, 229, 103, 1);
}

.server-header-select-button svg[b-tv7mv6nkpw] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.server-state[b-tv7mv6nkpw] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .88rem;
    font-weight: 750;
    white-space: nowrap;
}

.state-dot[b-tv7mv6nkpw] {
    width: 9px;
    height: 9px;
    display: inline-block;
    border-radius: 50%;
}

.server-state.online[b-tv7mv6nkpw] {
    color: #75e7a0;
}

    .server-state.online .state-dot[b-tv7mv6nkpw] {
        background: #75e7a0;
        box-shadow: 0 0 9px rgba(117, 231, 160, .28);
    }

.server-state.offline[b-tv7mv6nkpw] {
    color: #ff796d;
}

    .server-state.offline .state-dot[b-tv7mv6nkpw] {
        background: #ff796d;
        box-shadow: 0 0 8px rgba(255, 121, 109, .18);
    }

.server-state.checking[b-tv7mv6nkpw] {
    color: #9ba5aa;
}

    .server-state.checking .state-dot[b-tv7mv6nkpw] {
        background: #9ba5aa;
    }


/* =========================================================
   CONNECTION DATA
   ========================================================= */

.server-connection-data[b-tv7mv6nkpw] {
    margin-top: .95rem;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.server-detail-row[b-tv7mv6nkpw] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.server-detail-icon[b-tv7mv6nkpw],
.server-info-icon[b-tv7mv6nkpw] {
    color: #ebc83e;
}

.server-detail-icon[b-tv7mv6nkpw] {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .server-detail-icon svg[b-tv7mv6nkpw],
    .server-info-icon svg[b-tv7mv6nkpw] {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.server-address[b-tv7mv6nkpw],
.server-login[b-tv7mv6nkpw] {
    min-width: 0;
    margin: 0;
    color: #d6dcdf;
    font-size: .89rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}


/* =========================================================
   SERVER INFO
   ========================================================= */

.server-info[b-tv7mv6nkpw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1.05rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(224, 190, 45, .25);
}

.server-info-item[b-tv7mv6nkpw] {
    min-width: 0;
    min-height: 78px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(206, 184, 98, .12);
    border-radius: 9px;
    background: linear-gradient( 180deg, rgba(13, 19, 21, .83), rgba(8, 14, 16, .73) );
}

.server-info-icon[b-tv7mv6nkpw] {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.server-info-item > div[b-tv7mv6nkpw] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.server-info-item span:not(.server-info-icon)[b-tv7mv6nkpw] {
    color: #8e999e;
    font-size: .68rem;
}

.server-info-item strong[b-tv7mv6nkpw] {
    margin-top: 5px;
    color: #e4e9eb;
    font-size: .84rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.online[b-tv7mv6nkpw] {
    color: #70e39d !important;
}

.offline[b-tv7mv6nkpw] {
    color: #ff796d !important;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.server-actions[b-tv7mv6nkpw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1rem;
}

.server-action-button[b-tv7mv6nkpw] {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 8px;
    font: inherit;
    font-size: .79rem;
    font-weight: 800;
    cursor: pointer;
    transition: .15s ease;
}

    .server-action-button svg[b-tv7mv6nkpw] {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.select-button[b-tv7mv6nkpw] {
    border: 1px solid rgba(255, 219, 70, .95);
    color: #efd044;
    background: rgba(7, 13, 15, .82);
    box-shadow: 0 0 11px rgba(255, 198, 27, .04);
}

.refresh-button[b-tv7mv6nkpw] {
    border: 1px solid rgba(229, 195, 56, .55);
    color: #d9dfe2;
    background: rgba(6, 12, 14, .72);
}

.delete-button[b-tv7mv6nkpw] {
    border: 1px solid rgba(255, 86, 72, .55);
    color: #ff8277;
    background: rgba(23, 8, 7, .42);
}

.server-action-button:hover[b-tv7mv6nkpw] {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.delete-question[b-tv7mv6nkpw] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #ff8176;
    font-size: .8rem;
    font-weight: 700;
}

.delete-confirm-button[b-tv7mv6nkpw],
.delete-cancel-button[b-tv7mv6nkpw] {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 7px;
    font: inherit;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
}

.delete-confirm-button[b-tv7mv6nkpw] {
    border: 1px solid rgba(255, 91, 78, .66);
    color: #fff0ee;
    background: rgba(174, 45, 34, .65);
}

.delete-cancel-button[b-tv7mv6nkpw] {
    border: 1px solid rgba(177, 187, 192, .28);
    color: #c9d0d3;
    background: rgba(7, 13, 15, .75);
}


/* =========================================================
   LOADING / EMPTY
   ========================================================= */

.servers-loading[b-tv7mv6nkpw] {
    padding: 2rem 0;
    color: rgba(223, 228, 231, .72);
    font-family: "Segoe Print", "Comic Sans MS", cursive;
}

.empty-state[b-tv7mv6nkpw] {
    padding: 3rem 2rem;
    text-align: center;
    border: 1px dashed rgba(224, 190, 45, .48);
    border-radius: 14px;
    color: #aab3b7;
    background: rgba(5, 11, 13, .76);
}

.empty-state-icon[b-tv7mv6nkpw] {
    width: 50px;
    height: 50px;
    margin: 0 auto 13px;
    color: #ebc83e;
}

    .empty-state-icon svg[b-tv7mv6nkpw] {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.empty-state h3[b-tv7mv6nkpw] {
    margin: 0;
    color: #f0f3f4;
}

.empty-state p[b-tv7mv6nkpw] {
    max-width: 560px;
    margin: .7rem auto 1.15rem;
    color: #929ca1;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
    .servers-grid[b-tv7mv6nkpw] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .form-grid[b-tv7mv6nkpw] {
        grid-template-columns: 1fr;
    }

    .page-header[b-tv7mv6nkpw] {
        flex-direction: column;
        gap: 1rem;
    }

    .servers-title[b-tv7mv6nkpw] {
        font-size: clamp(2.65rem, 10vw, 4rem);
    }

    .ninja-add-server-button[b-tv7mv6nkpw] {
        margin-top: 0;
    }
}

@media (max-width: 680px) {
    .server-info[b-tv7mv6nkpw] {
        grid-template-columns: 1fr;
    }

    .server-card-header[b-tv7mv6nkpw] {
        flex-direction: column;
    }

    .server-card[b-tv7mv6nkpw] {
        padding: 1rem;
    }

    .default-badge[b-tv7mv6nkpw] {
        align-self: flex-start;
    }
}

.rename-button[b-tv7mv6nkpw] {
    border: 1px solid rgba(229, 195, 56, .55);
    color: #e8cf67;
    background: rgba(6, 12, 14, .72);
}


/* =========================================================
   RENAME SERVER
   ========================================================= */

.server-rename-editor[b-tv7mv6nkpw] {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.server-rename-input[b-tv7mv6nkpw] {
    width: min(310px, 100%);
    min-height: 39px;
    padding: 0 11px;
    border: 1px solid rgba(255, 215, 64, .68);
    border-radius: 8px;
    outline: none;
    color: #f5f7f8;
    background: rgba(3, 9, 11, .90);
    font: inherit;
    font-size: 1rem;
    font-weight: 750;
    box-shadow: 0 0 0 3px rgba(255, 202, 37, .045), inset 0 1px 0 rgba(255, 255, 255, .018);
}

    .server-rename-input:focus[b-tv7mv6nkpw] {
        border-color: rgba(255, 224, 90, .96);
        box-shadow: 0 0 0 3px rgba(255, 202, 37, .075), 0 0 13px rgba(255, 200, 31, .055);
    }

    .server-rename-input:disabled[b-tv7mv6nkpw] {
        opacity: .58;
    }

.server-rename-save[b-tv7mv6nkpw],
.server-rename-cancel[b-tv7mv6nkpw] {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 8px;
    font: inherit;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
    transition: .15s ease;
}

.server-rename-save[b-tv7mv6nkpw] {
    border: 1px solid rgba(255, 220, 73, .90);
    color: #171205;
    background: linear-gradient( 180deg, #ffe77f, #e9bd31 );
}

.server-rename-cancel[b-tv7mv6nkpw] {
    border: 1px solid rgba(179, 190, 195, .28);
    color: #cbd2d5;
    background: rgba(6, 12, 14, .75);
}

    .server-rename-save:hover:not(:disabled)[b-tv7mv6nkpw],
    .server-rename-cancel:hover:not(:disabled)[b-tv7mv6nkpw] {
        transform: translateY(-1px);
        filter: brightness(1.04);
    }

    .server-rename-save:disabled[b-tv7mv6nkpw],
    .server-rename-cancel:disabled[b-tv7mv6nkpw] {
        opacity: .48;
        cursor: default;
    }

.server-rename-error[b-tv7mv6nkpw] {
    margin-top: 7px;
    color: #ff8c80;
    font-size: .75rem;
    font-weight: 650;
}

/* =========================================================
   ОБНОВЛЕНИЕ СТАТУСА СЕРВЕРА
   ========================================================= */

.refresh-button[b-tv7mv6nkpw] {
    position: relative;
    overflow: hidden;
    transition: transform .14s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, background .18s ease;
}

    /* Эффект физического нажатия */
    .refresh-button:active:not(:disabled)[b-tv7mv6nkpw] {
        transform: translateY(1px) scale(.96);
    }

    /* Состояние во время SSH-проверки */
    .refresh-button.is-refreshing[b-tv7mv6nkpw] {
        color: #f2d254;
        border-color: rgba(240, 204, 74, .78);
        background: rgba(22, 18, 6, .72);
        box-shadow: 0 0 14px rgba(255, 202, 35, .10);
        cursor: wait;
    }

        /* Вращаем только значок */
        .refresh-button.is-refreshing .refresh-status-icon[b-tv7mv6nkpw] {
            animation: serverRefreshSpin-b-tv7mv6nkpw .72s linear infinite;
        }

        /* Когда кнопка заблокирована во время проверки,
   не делаем её визуально серой */
        .refresh-button.is-refreshing:disabled[b-tv7mv6nkpw] {
            opacity: 1;
        }

/* Сам значок */
.refresh-status-icon[b-tv7mv6nkpw] {
    transform-origin: center;
}

@keyframes serverRefreshSpin-b-tv7mv6nkpw {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   RECONNECT / UPDATE SSH PASSWORD
   ========================================================= */

.reconnect-button[b-tv7mv6nkpw] {
    margin-left: auto;
    border: 1px solid rgba(255, 211, 61, .72);
    color: #efd04d;
    background: rgba(7, 13, 15, .80);
    box-shadow: 0 0 12px rgba(255, 196, 24, .035);
    transition: transform .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, background .15s ease;
}

    .reconnect-button:hover:not(:disabled)[b-tv7mv6nkpw],
    .reconnect-button.is-open[b-tv7mv6nkpw] {
        border-color: rgba(255, 226, 102, .95);
        color: #ffe269;
        background: rgba(22, 18, 6, .66);
        box-shadow: 0 0 17px rgba(255, 198, 28, .09);
    }

    .reconnect-button:active:not(:disabled)[b-tv7mv6nkpw] {
        transform: translateY(1px) scale(.97);
    }

    .reconnect-button:disabled[b-tv7mv6nkpw] {
        opacity: .58;
        cursor: default;
    }


.server-reconnect-panel[b-tv7mv6nkpw] {
    margin-top: 13px;
    padding: 13px 14px 14px;
    border-top: 1px solid rgba(226, 190, 43, .26);
    border-radius: 0 0 10px 10px;
    background: linear-gradient( 180deg, rgba(11, 15, 13, .22), rgba(4, 9, 11, .28) );
}

.server-reconnect-head[b-tv7mv6nkpw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.server-reconnect-title[b-tv7mv6nkpw] {
    color: #f1d152;
    font-size: .86rem;
    font-weight: 800;
}

.server-reconnect-description[b-tv7mv6nkpw] {
    margin-top: 4px;
    color: #8f999e;
    font-size: .72rem;
    line-height: 1.4;
}

.server-reconnect-close[b-tv7mv6nkpw] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(226, 190, 43, .28);
    border-radius: 7px;
    color: #bfc7ca;
    background: rgba(3, 8, 10, .66);
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

    .server-reconnect-close:hover:not(:disabled)[b-tv7mv6nkpw] {
        color: #ffe168;
        border-color: rgba(255, 220, 83, .60);
    }

.server-reconnect-row[b-tv7mv6nkpw] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
}

.server-reconnect-password-wrap[b-tv7mv6nkpw] {
    position: relative;
    width: min(320px, 100%);
    flex: 0 1 320px;
}

.server-reconnect-input[b-tv7mv6nkpw] {
    width: 100%;
    min-height: 39px;
    padding: 0 42px 0 11px;
    border: 1px solid rgba(255, 211, 55, .34);
    border-radius: 8px;
    outline: none;
    color: #eef2f3;
    background: rgba(3, 9, 11, .91);
    font: inherit;
    font-size: .79rem;
    box-shadow: none;
}

    .server-reconnect-input[b-tv7mv6nkpw]::placeholder {
        color: rgba(167, 177, 182, .50);
    }

    .server-reconnect-input:focus[b-tv7mv6nkpw] {
        border-color: rgba(255, 222, 80, .90);
        box-shadow: 0 0 0 3px rgba(255, 202, 37, .055);
    }

.server-reconnect-eye[b-tv7mv6nkpw] {
    position: absolute;
    top: 50%;
    right: 7px;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    color: #8f999e;
    background: transparent;
    cursor: pointer;
}

    .server-reconnect-eye:hover:not(:disabled)[b-tv7mv6nkpw] {
        color: #e8cd5a;
        background: rgba(255, 208, 50, .05);
    }

    .server-reconnect-eye svg[b-tv7mv6nkpw] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.server-reconnect-confirm[b-tv7mv6nkpw],
.server-reconnect-cancel[b-tv7mv6nkpw] {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 8px;
    font: inherit;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
    transition: .15s ease;
}

.server-reconnect-confirm[b-tv7mv6nkpw] {
    border: 1px solid rgba(255, 225, 106, .92);
    color: #171205;
    background: linear-gradient( 180deg, #ffe983, #e9bd31 );
}

.server-reconnect-cancel[b-tv7mv6nkpw] {
    border: 1px solid rgba(180, 190, 195, .28);
    color: #cbd2d5;
    background: rgba(6, 12, 14, .75);
}

    .server-reconnect-confirm:hover:not(:disabled)[b-tv7mv6nkpw],
    .server-reconnect-cancel:hover:not(:disabled)[b-tv7mv6nkpw] {
        transform: translateY(-1px);
        filter: brightness(1.04);
    }

    .server-reconnect-confirm:disabled[b-tv7mv6nkpw],
    .server-reconnect-cancel:disabled[b-tv7mv6nkpw],
    .server-reconnect-close:disabled[b-tv7mv6nkpw],
    .server-reconnect-eye:disabled[b-tv7mv6nkpw] {
        opacity: .48;
        cursor: default;
    }

.reconnect-spinner[b-tv7mv6nkpw] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(20, 15, 3, .28);
    border-top-color: #171205;
    border-radius: 50%;
    animation: reconnectSpin-b-tv7mv6nkpw .68s linear infinite;
}

@keyframes reconnectSpin-b-tv7mv6nkpw {
    to {
        transform: rotate(360deg);
    }
}

.server-reconnect-error[b-tv7mv6nkpw],
.server-reconnect-success[b-tv7mv6nkpw] {
    margin-top: 9px;
    font-size: .74rem;
    font-weight: 650;
}

.server-reconnect-error[b-tv7mv6nkpw] {
    color: #ff887c;
}

.server-reconnect-success[b-tv7mv6nkpw] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #77e6a0;
}

.reconnect-success-dot[b-tv7mv6nkpw] {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    background: #70e49e;
    box-shadow: 0 0 8px rgba(112, 228, 158, .28);
}


@media (max-width: 680px) {

    .reconnect-button[b-tv7mv6nkpw] {
        margin-left: 0;
    }

    .server-reconnect-row[b-tv7mv6nkpw] {
        align-items: stretch;
        flex-direction: column;
    }

    .server-reconnect-password-wrap[b-tv7mv6nkpw] {
        width: 100%;
        flex-basis: auto;
    }

    .server-reconnect-confirm[b-tv7mv6nkpw],
    .server-reconnect-cancel[b-tv7mv6nkpw] {
        width: 100%;
    }
}

.server-password-wrap[b-tv7mv6nkpw] {
    position: relative;
    width: 100%;
}

.server-password-input[b-tv7mv6nkpw] {
    width: 100%;
    padding-right: 42px;
}

.server-password-eye[b-tv7mv6nkpw] {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #9aa3a8;
    cursor: pointer;
    border-radius: 6px;
    transition: .15s ease;
}

    .server-password-eye:hover[b-tv7mv6nkpw] {
        color: #f0d35a;
        background: rgba(255, 208, 50, 0.06);
    }

    .server-password-eye svg[b-tv7mv6nkpw] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* =========================================================
   VPS REBOOT
   ========================================================= */

.reboot-button[b-tv7mv6nkpw] {
    flex-basis: 100%;
    border: 1px solid rgba(255, 137, 74, .70);
    color: #ffb074;
    background: linear-gradient(180deg, rgba(42, 18, 8, .58), rgba(20, 9, 5, .48));
    box-shadow: 0 0 13px rgba(255, 121, 52, .045);
}

    .reboot-button:hover:not(:disabled)[b-tv7mv6nkpw] {
        border-color: rgba(255, 163, 92, .92);
        color: #ffc08b;
        background: rgba(42, 18, 8, .72);
    }

    .reboot-button.is-restarting[b-tv7mv6nkpw],
    .reboot-button.is-restarting:disabled[b-tv7mv6nkpw] {
        opacity: 1;
        color: #f2d254;
        border-color: rgba(240, 204, 74, .70);
        background: rgba(34, 27, 8, .72);
        cursor: wait;
    }

        .reboot-button.is-restarting .reboot-status-icon[b-tv7mv6nkpw] {
            animation: serverRefreshSpin-b-tv7mv6nkpw .85s linear infinite;
        }

.server-restart-panel[b-tv7mv6nkpw] {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 137, 74, .40);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(35, 15, 7, .62), rgba(13, 8, 6, .58));
}

.server-restart-title[b-tv7mv6nkpw] {
    color: #ffb074;
    font-size: .9rem;
    font-weight: 850;
}

.server-restart-description[b-tv7mv6nkpw] {
    margin-top: 5px;
    color: #aab2b6;
    font-size: .75rem;
    line-height: 1.45;
}

.server-restart-actions[b-tv7mv6nkpw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.server-restart-confirm[b-tv7mv6nkpw],
.server-restart-cancel[b-tv7mv6nkpw] {
    min-height: 39px;
    padding: 0 13px;
    border-radius: 8px;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}

.server-restart-confirm[b-tv7mv6nkpw] {
    border: 1px solid rgba(255, 151, 82, .92);
    color: #1a0d05;
    background: linear-gradient(180deg, #ffc17b, #e78b3c);
}

.server-restart-cancel[b-tv7mv6nkpw] {
    border: 1px solid rgba(179, 190, 195, .28);
    color: #cbd2d5;
    background: rgba(6, 12, 14, .75);
}

.server-restart-message[b-tv7mv6nkpw] {
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: .75rem;
    line-height: 1.4;
    font-weight: 700;
}

    .server-restart-message.waiting[b-tv7mv6nkpw] {
        border: 1px solid rgba(236, 199, 62, .34);
        color: #e7cf72;
        background: rgba(31, 25, 7, .50);
    }

    .server-restart-message.success[b-tv7mv6nkpw] {
        border: 1px solid rgba(91, 220, 138, .34);
        color: #79e6a2;
        background: rgba(8, 37, 22, .52);
    }

    .server-restart-message.error[b-tv7mv6nkpw] {
        border: 1px solid rgba(255, 94, 81, .38);
        color: #ff9187;
        background: rgba(45, 11, 8, .55);
    }

.server-restart-message-dot[b-tv7mv6nkpw] {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-top: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.server-restart-spinner[b-tv7mv6nkpw] {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    margin-top: 1px;
    border: 2px solid rgba(236, 207, 93, .22);
    border-top-color: #e7cf72;
    border-radius: 50%;
    animation: reconnectSpin-b-tv7mv6nkpw .75s linear infinite;
}


/* =========================================================
   MOBILE — SETTINGS / SERVERS
   Final overrides intentionally live at the end of the file.
   ========================================================= */

@media (max-width: 680px) {

    .servers-page[b-tv7mv6nkpw] {
        width: 100%;
        padding: 18px 10px 28px;
        overflow-x: hidden;
    }

    .page-header[b-tv7mv6nkpw] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 13px;
        margin-bottom: 18px;
    }

    .page-title-wrap[b-tv7mv6nkpw] {
        width: 100%;
        padding-top: 2px;
    }

    .servers-title[b-tv7mv6nkpw] {
        margin: 0;
        transform: none;
        font-size: clamp(2.45rem, 12vw, 3.35rem);
        line-height: 1.05;
        letter-spacing: -.055em;
    }

    .servers-subtitle[b-tv7mv6nkpw] {
        max-width: 100%;
        margin: 8px 0 0;
        font-size: .88rem;
        line-height: 1.45;
    }

    .ninja-add-server-button[b-tv7mv6nkpw] {
        width: 100%;
        min-height: 52px;
        margin: 0;
        border-radius: 12px;
        font-size: 1rem;
    }

    .server-form-card[b-tv7mv6nkpw] {
        width: 100%;
        margin-bottom: 16px;
        padding: 15px 13px;
        border-radius: 14px;
    }

    .form-header[b-tv7mv6nkpw] {
        margin-bottom: 14px;
    }

        .form-header h3[b-tv7mv6nkpw] {
            font-size: 1.15rem;
        }

    .form-grid[b-tv7mv6nkpw] {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .form-group .form-control[b-tv7mv6nkpw] {
        min-height: 46px;
        font-size: 16px;
    }

    .form-actions[b-tv7mv6nkpw] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 14px;
    }

    .ninja-primary-button[b-tv7mv6nkpw],
    .ninja-outline-button[b-tv7mv6nkpw],
    .ninja-muted-button[b-tv7mv6nkpw] {
        width: 100%;
        min-height: 46px;
        font-size: .86rem;
    }

    .result-grid[b-tv7mv6nkpw] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .servers-grid[b-tv7mv6nkpw] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .server-card[b-tv7mv6nkpw] {
        width: 100%;
        padding: 16px 14px 14px;
        border-radius: 15px;
    }

    .server-card-header[b-tv7mv6nkpw] {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }

    .server-card-heading[b-tv7mv6nkpw] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .server-name-line[b-tv7mv6nkpw] {
        gap: 8px 10px;
    }

    .server-card h3[b-tv7mv6nkpw] {
        font-size: 1.42rem;
        line-height: 1.12;
    }

    .server-state[b-tv7mv6nkpw] {
        gap: 6px;
        font-size: .84rem;
    }

    .state-dot[b-tv7mv6nkpw] {
        width: 8px;
        height: 8px;
    }

    .default-badge[b-tv7mv6nkpw] {
        min-height: 27px;
        align-self: flex-start;
        padding: 0 10px;
        font-size: .66rem;
    }

    .server-connection-data[b-tv7mv6nkpw] {
        margin-top: 13px;
        gap: 7px;
    }

    .server-detail-row[b-tv7mv6nkpw] {
        gap: 9px;
    }

    .server-detail-icon[b-tv7mv6nkpw] {
        width: 21px;
        height: 21px;
        flex-basis: 21px;
    }

    .server-address[b-tv7mv6nkpw],
    .server-login[b-tv7mv6nkpw] {
        font-size: .85rem;
    }

    .server-info[b-tv7mv6nkpw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 13px;
        padding-top: 13px;
    }

    .server-info-item[b-tv7mv6nkpw] {
        min-height: 72px;
        padding: 10px;
        gap: 8px;
    }

        .server-info-item:first-child[b-tv7mv6nkpw] {
            grid-column: 1 / -1;
            min-height: 66px;
        }

    .server-info-icon[b-tv7mv6nkpw] {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
    }

    .server-info-item span:not(.server-info-icon)[b-tv7mv6nkpw] {
        font-size: .64rem;
    }

    .server-info-item strong[b-tv7mv6nkpw] {
        margin-top: 3px;
        font-size: .82rem;
    }

    .server-actions[b-tv7mv6nkpw] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 9px;
        margin-top: 14px;
    }

    .server-action-button[b-tv7mv6nkpw] {
        width: 100%;
        min-width: 0;
        min-height: 45px;
        padding: 0 8px;
        gap: 7px;
        font-size: .76rem;
        line-height: 1.16;
        text-align: center;
    }

        .server-action-button svg[b-tv7mv6nkpw] {
            width: 17px;
            height: 17px;
            flex-basis: 17px;
        }

    .reconnect-button[b-tv7mv6nkpw],
    .reboot-button[b-tv7mv6nkpw] {
        grid-column: 1 / -1;
        margin-left: 0;
    }

    .delete-question[b-tv7mv6nkpw] {
        grid-column: 1 / -1;
        min-height: 45px;
        justify-content: center;
        border: 1px solid rgba(255, 86, 72, .30);
        border-radius: 8px;
        background: rgba(23, 8, 7, .35);
    }

    .server-rename-editor[b-tv7mv6nkpw] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 8px;
    }

    .server-rename-input[b-tv7mv6nkpw] {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 44px;
        font-size: 16px;
    }

    .server-rename-save[b-tv7mv6nkpw],
    .server-rename-cancel[b-tv7mv6nkpw] {
        width: 100%;
        min-height: 42px;
    }

    .server-reconnect-panel[b-tv7mv6nkpw],
    .server-restart-panel[b-tv7mv6nkpw] {
        margin-top: 11px;
        padding: 12px;
        border-radius: 11px;
    }

    .server-reconnect-row[b-tv7mv6nkpw] {
        flex-direction: column;
        align-items: stretch;
    }

    .server-reconnect-password-wrap[b-tv7mv6nkpw] {
        width: 100%;
        flex-basis: auto;
    }

    .server-reconnect-input[b-tv7mv6nkpw] {
        min-height: 45px;
        font-size: 16px;
    }

    .server-reconnect-confirm[b-tv7mv6nkpw],
    .server-reconnect-cancel[b-tv7mv6nkpw],
    .server-restart-confirm[b-tv7mv6nkpw],
    .server-restart-cancel[b-tv7mv6nkpw] {
        width: 100%;
        min-height: 44px;
    }

    .server-restart-actions[b-tv7mv6nkpw] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .server-restart-message[b-tv7mv6nkpw] {
        font-size: .73rem;
    }
}

@media (max-width: 390px) {
    .servers-page[b-tv7mv6nkpw] {
        padding-left: 8px;
        padding-right: 8px;
    }

    .server-card[b-tv7mv6nkpw] {
        padding-left: 12px;
        padding-right: 12px;
    }

        .server-card h3[b-tv7mv6nkpw] {
            font-size: 1.3rem;
        }

    .server-actions[b-tv7mv6nkpw] {
        gap: 8px;
    }

    .server-action-button[b-tv7mv6nkpw] {
        font-size: .72rem;
    }
}

/* =========================================================
   SETTINGS — MOBILE SERVER COLLAPSE V2
   ========================================================= */

.server-collapsible-content[b-tv7mv6nkpw] {
    display: contents;
}

.server-collapse-button[b-tv7mv6nkpw] {
    display: none;
}

@media (max-width: 900px) {

    .server-collapse-button[b-tv7mv6nkpw] {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        padding: 0;
        border: 1px solid rgba(255, 207, 47, .48);
        border-radius: 10px;
        color: #ffd84a;
        background: rgba(4, 10, 12, .72);
        box-shadow: 0 0 12px rgba(255, 192, 0, .05);
        cursor: pointer;
    }

        .server-collapse-button svg[b-tv7mv6nkpw] {
            width: 20px;
            height: 20px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: transform .2s ease;
        }

        .server-collapse-button.is-collapsed svg[b-tv7mv6nkpw] {
            transform: rotate(-90deg);
        }

    .server-card.is-collapsed[b-tv7mv6nkpw] {
        padding-bottom: 15px;
    }

        .server-card.is-collapsed .server-collapsible-content[b-tv7mv6nkpw] {
            display: none !important;
        }

        .server-card.is-collapsed .server-connection-data[b-tv7mv6nkpw] {
            margin-bottom: 0;
        }

        .server-card.is-collapsed .server-card-header[b-tv7mv6nkpw] {
            margin-bottom: 0;
        }

        .server-card.is-collapsed .server-name-line[b-tv7mv6nkpw] {
            align-items: center;
        }
}

/* =========================================================
   SETTINGS — DESKTOP SERVER ACTIONS V3
   Меняется ТОЛЬКО расположение кнопок на экранах > 900px.
   Мобильная версия не затрагивается.
   ========================================================= */

@media (min-width: 901px) {

    .server-actions[b-tv7mv6nkpw] {
        display: grid;
        grid-template-columns: max-content max-content max-content minmax(14px, 1fr) max-content;
        align-items: center;
        gap: .65rem;
        width: 100%;
    }

        /* Верхняя строка */

        .server-actions .refresh-button[b-tv7mv6nkpw] {
            grid-column: 1;
            grid-row: 1;
        }

        .server-actions .rename-button[b-tv7mv6nkpw] {
            grid-column: 2;
            grid-row: 1;
        }

        .server-actions .reconnect-button[b-tv7mv6nkpw] {
            grid-column: 5;
            grid-row: 1;
            justify-self: end;
            margin-left: 0;
        }


        /* Нижняя строка */

        .server-actions .reboot-button[b-tv7mv6nkpw] {
            grid-column: 1 / span 2;
            grid-row: 2;
            justify-self: start;
            width: min(420px, 100%);
            min-width: 0;
            flex-basis: auto;
        }

        .server-actions .delete-button[b-tv7mv6nkpw],
        .server-actions .delete-question[b-tv7mv6nkpw] {
            grid-column: 5;
            grid-row: 2;
            justify-self: end;
            margin-left: 0;
        }


    /* У выбранного сервера нет кнопок "Выбрать" и "Удалить". */

    .selected-server .server-actions .reconnect-button[b-tv7mv6nkpw] {
        grid-column: 5;
        grid-row: 1;
    }

    .selected-server .server-actions .reboot-button[b-tv7mv6nkpw] {
        grid-column: 1 / span 2;
        grid-row: 2;
    }
}


/* =========================================================
   ADMIN ACCOUNT POPUP
   ========================================================= */

.account-modal-backdrop[b-tv7mv6nkpw] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 260px;
    z-index: 500;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(1, 4, 5, .64);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.account-modal[b-tv7mv6nkpw] {
    width: min(430px, 100%);
    padding: 20px;
    border: 1px solid rgba(255, 210, 57, .58);
    border-radius: 15px;
    background:
        radial-gradient(circle at 88% 0%, rgba(255, 194, 20, .055), transparent 34%),
        linear-gradient(180deg, rgba(6, 12, 14, .98), rgba(3, 8, 10, .97));
    box-shadow:
        0 24px 70px rgba(0, 0, 0, .52),
        0 0 26px rgba(255, 193, 23, .055);
}

.account-modal-head[b-tv7mv6nkpw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.account-modal-eyebrow[b-tv7mv6nkpw] {
    color: rgba(232, 197, 55, .78);
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .12em;
}

.account-modal h2[b-tv7mv6nkpw] {
    margin: 4px 0 0;
    color: #f2f4f5;
    font-size: 1.25rem;
    font-weight: 850;
}

.account-modal-close[b-tv7mv6nkpw] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(226, 190, 43, .30);
    border-radius: 8px;
    color: #bfc7ca;
    background: rgba(3, 8, 10, .74);
    cursor: pointer;
}

.account-modal-close svg[b-tv7mv6nkpw] {
    width: 16px;
    height: 16px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-modal-close:hover[b-tv7mv6nkpw] {
    color: #ffe168;
    border-color: rgba(255, 220, 83, .62);
}

.account-modal-user[b-tv7mv6nkpw] {
    display: grid;
    gap: 2px;
    margin-top: 15px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 207, 47, .18);
    border-radius: 9px;
    background: rgba(2, 7, 9, .62);
}

.account-modal-user span[b-tv7mv6nkpw] {
    color: #778289;
    font-size: .64rem;
}

.account-modal-user strong[b-tv7mv6nkpw] {
    color: #e7cd5b;
    font-size: .84rem;
    overflow-wrap: anywhere;
}

.account-password-form[b-tv7mv6nkpw] {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 16px;
}

.account-password-field[b-tv7mv6nkpw] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.account-password-field > label[b-tv7mv6nkpw] {
    color: #a5aeb2;
    font-size: .72rem;
    font-weight: 700;
}

.account-password-input-wrap[b-tv7mv6nkpw] {
    position: relative;
    width: 100%;
}

.account-password-form input[b-tv7mv6nkpw] {
    width: 100%;
    min-height: 44px;
    padding: 0 46px 0 11px;
    border: 1px solid rgba(255, 207, 49, .24);
    border-radius: 8px;
    outline: 0;
    color: #edf1f2;
    background: rgba(3, 9, 11, .92);
    font: inherit;
    font-size: .84rem;
}

.account-password-form input:focus[b-tv7mv6nkpw] {
    border-color: rgba(255, 215, 68, .76);
    box-shadow: 0 0 0 3px rgba(255, 202, 35, .06);
}


.account-password-eye[b-tv7mv6nkpw] {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 7px;
    color: rgba(175, 185, 190, .72);
    background: transparent;
    cursor: pointer;
    transition:
        color .14s ease,
        background .14s ease,
        transform .10s ease;
}

.account-password-eye:hover[b-tv7mv6nkpw] {
    color: #f0d45f;
    background: rgba(218, 172, 36, .07);
}

.account-password-eye:active[b-tv7mv6nkpw] {
    transform: translateY(-50%) scale(.92);
}

.account-password-eye svg[b-tv7mv6nkpw] {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-password-eye .account-eye-closed[b-tv7mv6nkpw] {
    display: none;
}

.account-password-eye.is-visible .account-eye-open[b-tv7mv6nkpw] {
    display: none;
}

.account-password-eye.is-visible .account-eye-closed[b-tv7mv6nkpw] {
    display: block;
}

.account-change-password-button[b-tv7mv6nkpw] {
    width: 100%;
    min-height: 45px;
    margin-top: 2px;
    border: 1px solid rgba(255, 222, 86, .86);
    border-radius: 9px;
    color: #171205;
    background: linear-gradient(180deg, #ffe780, #e8ba2c);
    font: inherit;
    font-size: .82rem;
    font-weight: 850;
    cursor: pointer;
}

.account-change-password-button:hover[b-tv7mv6nkpw] {
    filter: brightness(1.04);
}

.account-message[b-tv7mv6nkpw] {
    margin-top: 11px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: .73rem;
    line-height: 1.4;
}

.account-message-error[b-tv7mv6nkpw] {
    border: 1px solid rgba(255, 94, 81, .36);
    color: #ffb5ad;
    background: rgba(42, 10, 7, .60);
}

.account-recovery-hint[b-tv7mv6nkpw] {
    margin-top: 13px;
    color: #7f8a8f;
    font-size: .68rem;
    line-height: 1.45;
}

.account-recovery-hint code[b-tv7mv6nkpw] {
    color: #cdb649;
}

@media (max-width: 900px) {
    .account-modal-backdrop[b-tv7mv6nkpw] {
        top: 76px;
        left: 0;
        padding: 14px;
    }

    .account-modal[b-tv7mv6nkpw] {
        width: min(420px, 100%);
        padding: 16px;
    }
}

@media (max-width: 680px) {
    .server-card-header-actions[b-tv7mv6nkpw] {
        gap: 6px;
    }

    .server-header-select-button[b-tv7mv6nkpw] {
        min-height: 38px;
        padding: 0 10px;
        font-size: .72rem;
    }

    .server-header-select-button svg[b-tv7mv6nkpw] {
        width: 16px;
        height: 16px;
    }
}


/* =========================================================
   PASSWORD MANAGER SUPPRESSION — NEW PASSWORD FIELDS
   Chromium / Edge / Safari see ordinary text inputs, while
   -webkit-text-security visually masks the characters.
   Firefox fallback switches the input to type=password on focus.
   ========================================================= */

.account-password-stealth[b-tv7mv6nkpw] {
    -webkit-text-security: disc;
    text-security: disc;
    font-family: "Roboto", "Segoe UI", Arial, sans-serif;
    letter-spacing: .08em;
}

.account-password-stealth[b-tv7mv6nkpw]::selection {
    background: rgba(238, 199, 57, .28);
}


.account-password-stealth.is-visible[b-tv7mv6nkpw] {
    -webkit-text-security: none;
    text-security: none;
    letter-spacing: 0;
}

/* =========================================================
   ADMIN ACCOUNT — PASSKEY / FACE ID
   ========================================================= */
.account-modal[b-tv7mv6nkpw] {
    max-height: min(760px, calc(100dvh - 48px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.account-passkey-section[b-tv7mv6nkpw] {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 207, 47, .18);
}

.account-passkey-head[b-tv7mv6nkpw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.account-passkey-head > div[b-tv7mv6nkpw] {
    display: grid;
    gap: 2px;
}

.account-passkey-head span:first-child[b-tv7mv6nkpw] {
    color: #8f9a9f;
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .10em;
}

.account-passkey-head strong[b-tv7mv6nkpw] {
    color: #efd25a;
    font-size: .90rem;
}

.account-passkey-badge[b-tv7mv6nkpw] {
    padding: 4px 7px;
    border: 1px solid rgba(94, 227, 142, .30);
    border-radius: 999px;
    color: #78e5a1 !important;
    background: rgba(8, 37, 22, .42);
    font-size: .60rem !important;
    letter-spacing: .03em !important;
}

.account-passkey-section > p[b-tv7mv6nkpw] {
    margin: 9px 0 11px;
    color: #8f9a9f;
    font-size: .70rem;
    line-height: 1.45;
}

.account-passkey-actions[b-tv7mv6nkpw] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.account-passkey-primary[b-tv7mv6nkpw],
.account-passkey-refresh[b-tv7mv6nkpw] {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 8px;
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
}

.account-passkey-primary[b-tv7mv6nkpw] {
    border: 1px solid rgba(255, 222, 86, .78);
    color: #171205;
    background: linear-gradient(180deg, #ffe780, #e8ba2c);
}

.account-passkey-refresh[b-tv7mv6nkpw] {
    border: 1px solid rgba(223, 198, 88, .34);
    color: #d9c55d;
    background: rgba(4, 10, 12, .76);
}

.account-passkey-status[b-tv7mv6nkpw] {
    margin-top: 9px;
    padding: 8px 9px;
    border-radius: 8px;
    color: #cbd3d6;
    background: rgba(4, 10, 12, .72);
    font-size: .68rem;
    line-height: 1.4;
}

.account-passkey-status.is-success[b-tv7mv6nkpw] {
    color: #86e9a9;
    border: 1px solid rgba(94, 227, 142, .28);
}

.account-passkey-status.is-error[b-tv7mv6nkpw] {
    color: #ffb5ad;
    border: 1px solid rgba(255, 94, 81, .30);
}

.account-passkey-list[b-tv7mv6nkpw] {
    display: grid;
    gap: 7px;
    margin-top: 9px;
}

.account-passkey-item[b-tv7mv6nkpw] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px 9px;
    border: 1px solid rgba(255, 207, 47, .15);
    border-radius: 8px;
    background: rgba(2, 7, 9, .52);
}

.account-passkey-item-main[b-tv7mv6nkpw] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.account-passkey-item-name[b-tv7mv6nkpw] {
    color: #e3e8ea;
    font-size: .72rem;
    font-weight: 800;
}

.account-passkey-item-meta[b-tv7mv6nkpw] {
    color: #778289;
    font-size: .60rem;
    overflow-wrap: anywhere;
}

.account-passkey-item-current[b-tv7mv6nkpw] {
    color: #76e39f;
}

.account-passkey-delete[b-tv7mv6nkpw] {
    min-height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(255, 93, 80, .34);
    border-radius: 7px;
    color: #ff8f84;
    background: rgba(31, 8, 6, .42);
    font: inherit;
    font-size: .62rem;
    font-weight: 800;
    cursor: pointer;
}

.account-passkey-empty[b-tv7mv6nkpw] {
    color: #778289;
    font-size: .66rem;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .account-modal[b-tv7mv6nkpw] {
        max-height: calc(100dvh - 104px);
    }
}

@media (max-width: 420px) {
    .account-passkey-actions[b-tv7mv6nkpw] {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   DESKTOP — PASSKEY / БЫСТРЫЙ ВХОД НЕ ПОКАЗЫВАЕМ
   На мобильной версии блок остаётся доступен.
   ========================================================= */
@media (min-width: 901px) {
    .account-passkey-section[b-tv7mv6nkpw] {
        display: none !important;
    }
}

/* =========================================================
   SETTINGS — COUNTRY FLAG SIZE FIX
   Флаг всегда остаётся компактной иконкой и не растягивает
   карточку сервера ни на ПК, ни на мобильной версии.
   ========================================================= */

.server-card-identification[b-tv7mv6nkpw] {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.settings-server-country-flag[b-tv7mv6nkpw] {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;

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

    overflow: hidden;
    box-sizing: border-box;

    border: 1.5px solid rgba(255, 212, 58, .68);
    border-radius: 50%;

    background: rgba(4, 9, 11, .90);

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .45),
        0 0 12px rgba(255, 194, 0, .07);
}

.settings-server-country-flag > img[b-tv7mv6nkpw] {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;

    display: block !important;
    object-fit: cover !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: scale(1.10);
}

.settings-server-country-fallback[b-tv7mv6nkpw] {
    font-size: 1.12rem;
    line-height: 1;
}

@media (max-width: 900px) {
    .server-card-identification[b-tv7mv6nkpw] {
        gap: 9px;
    }

    .settings-server-country-flag[b-tv7mv6nkpw] {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        flex-basis: 34px !important;
    }

    .settings-server-country-fallback[b-tv7mv6nkpw] {
        font-size: 1rem;
    }
}


/* =========================================================
   BROWSER VPN / PUBLIC MANAGER URL
   ========================================================= */

.browser-vpn-public-card[b-tv7mv6nkpw] {
    max-width: 980px;
    margin: 0 0 1.8rem;
    padding: 1.25rem 1.4rem 1.3rem;
    border: 1px solid rgba(226, 186, 37, .42);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(7, 13, 15, .91), rgba(3, 9, 11, .88));
    box-shadow: 0 14px 38px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(255, 213, 71, .015);
    backdrop-filter: blur(12px);
}

.browser-vpn-public-head[b-tv7mv6nkpw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.browser-vpn-public-head h3[b-tv7mv6nkpw] {
    margin: 0;
    color: #f0f2f3;
    font-size: 1.17rem;
    font-weight: 800;
}

.browser-vpn-public-head p[b-tv7mv6nkpw] {
    max-width: 720px;
    margin: .42rem 0 0;
    color: rgba(205, 213, 216, .68);
    font-size: .8rem;
    line-height: 1.55;
}

.browser-vpn-public-badge[b-tv7mv6nkpw] {
    flex: 0 0 auto;
    padding: .3rem .55rem;
    border: 1px solid rgba(244, 203, 53, .38);
    border-radius: 7px;
    color: #ecd35e;
    background: rgba(255, 205, 38, .055);
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.browser-vpn-public-row[b-tv7mv6nkpw] {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.browser-vpn-public-input[b-tv7mv6nkpw] {
    min-width: 0;
    min-height: 43px;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 207, 49, .22);
    border-radius: 8px;
    color: #edf1f2;
    background: rgba(5, 11, 13, .88);
    box-shadow: none;
}

.browser-vpn-public-input:focus[b-tv7mv6nkpw] {
    color: #fff;
    background: rgba(5, 11, 13, .96);
    border-color: rgba(255, 213, 67, .72);
    box-shadow: 0 0 0 3px rgba(255, 202, 35, .07);
}

.browser-vpn-public-save[b-tv7mv6nkpw] {
    min-width: 118px;
    flex: 0 0 auto;
}

.browser-vpn-public-hint[b-tv7mv6nkpw] {
    margin-top: .62rem;
    color: rgba(178, 188, 192, .55);
    font-size: .72rem;
    font-style: italic;
}

.browser-vpn-public-message[b-tv7mv6nkpw] {
    margin-top: .7rem;
    font-size: .76rem;
    font-style: italic;
}

.browser-vpn-public-message.is-success[b-tv7mv6nkpw] {
    color: #8ed8ac;
}

.browser-vpn-public-message.is-error[b-tv7mv6nkpw] {
    color: #ff8e8e;
}


.browser-vpn-settings-divider[b-tv7mv6nkpw] {
    height: 1px;
    margin: 1.15rem 0;
    background: linear-gradient(90deg, rgba(229, 195, 54, .28), rgba(229, 195, 54, .04));
}

.browser-vpn-proxy-head[b-tv7mv6nkpw] {
    margin-bottom: .85rem;
}

.browser-vpn-server-badge[b-tv7mv6nkpw] {
    flex: 0 0 auto;
    max-width: 280px;
    padding: .34rem .6rem;
    border: 1px solid rgba(173, 188, 194, .2);
    border-radius: 7px;
    color: rgba(223, 229, 231, .78);
    background: rgba(255, 255, 255, .025);
    font-size: .7rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .browser-vpn-public-row[b-tv7mv6nkpw] {
        align-items: stretch;
        flex-direction: column;
    }

    .browser-vpn-public-save[b-tv7mv6nkpw] {
        width: 100%;
    }
}

/* Ninja VPN protocol cards: separate from server and Browser VPN layouts. */
.ninja-vpn-protocols[b-tv7mv6nkpw] {border:1px solid rgba(242,202,61,.35);border-radius:16px;background:rgba(6,11,13,.88);padding:20px 22px;margin-bottom:26px;color:#f6f6f6}
.ninja-protocols-heading[b-tv7mv6nkpw] {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:15px}
.ninja-protocols-heading h3[b-tv7mv6nkpw] {margin:0 0 4px;font-size:1.25rem;font-weight:750}
.ninja-protocols-heading p[b-tv7mv6nkpw],.ninja-protocols-notice[b-tv7mv6nkpw] {margin:0;color:#aeb7b8;font-size:.82rem;line-height:1.5}
.ninja-protocols-refresh[b-tv7mv6nkpw] {border:1px solid rgba(255,215,70,.6);border-radius:9px;padding:10px 15px;background:rgba(241,198,52,.12);color:#ffda59;font-weight:700;cursor:pointer}
.ninja-protocols-refresh:disabled[b-tv7mv6nkpw] {opacity:.55;cursor:wait}
.ninja-protocols-grid[b-tv7mv6nkpw] {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.ninja-protocol-tile[b-tv7mv6nkpw] {border:1px solid rgba(255,207,55,.2);border-radius:12px;background:rgba(255,255,255,.025);padding:13px 15px;display:flex;flex-direction:column;gap:7px}
.ninja-protocol-tile strong[b-tv7mv6nkpw] {font-size:.92rem;color:#fbd957}
.ninja-protocol-tile span[b-tv7mv6nkpw] {font-size:.78rem;color:#c0c6c6;line-height:1.35}
@media(max-width:760px) {.ninja-protocols-grid[b-tv7mv6nkpw] {grid-template-columns:1fr}}

/* Dedicated WireGuard installer (desktop-first, follows Ninja VPN palette). */
.ninja-wg-install-panel[b-tv7mv6nkpw] {display:flex;align-items:end;gap:14px;flex-wrap:wrap;margin:14px 0;padding:16px;border:1px solid rgba(255,211,78,.24);border-radius:12px;background:rgba(255,211,78,.045)}
.ninja-wg-install-info[b-tv7mv6nkpw] {display:flex;flex:1 1 230px;flex-direction:column;gap:5px}
.ninja-wg-install-info strong[b-tv7mv6nkpw],.ninja-wg-install-confirm strong[b-tv7mv6nkpw] {color:#ffda59;font-size:.9rem}
.ninja-wg-install-info span[b-tv7mv6nkpw] {color:#b7c0c0;font-size:.8rem;line-height:1.45}
.ninja-wg-install-port[b-tv7mv6nkpw] {display:flex;flex-direction:column;gap:5px;color:#c2c9c9;font-size:.77rem}
.ninja-wg-install-port input[b-tv7mv6nkpw] {width:118px;max-width:100%;padding:10px 11px;border:1px solid rgba(255,214,77,.3);border-radius:9px;background:#101719;color:#fff;font:inherit}
.ninja-wg-install-confirm[b-tv7mv6nkpw] {margin:10px 0 15px;padding:16px;border:1px solid rgba(255,211,78,.42);border-radius:12px;background:rgba(255,216,72,.07)}
.ninja-wg-install-confirm p[b-tv7mv6nkpw] {font-size:.8rem;line-height:1.6;color:#c2c9c9;margin:10px 0 14px}
.ninja-wg-install-actions[b-tv7mv6nkpw] {display:flex;gap:10px;flex-wrap:wrap}
.ninja-wg-install-submit[b-tv7mv6nkpw] {border:0;border-radius:9px;padding:10px 16px;background:#f4cc3f;color:#151515;font-weight:750;cursor:pointer}
.ninja-wg-install-submit:disabled[b-tv7mv6nkpw] {opacity:.6;cursor:wait}
@media(max-width:760px) {.ninja-wg-install-panel[b-tv7mv6nkpw] {align-items:stretch}.ninja-wg-install-port input[b-tv7mv6nkpw] {width:100%}}

/* Port diagnostics entry point in Settings */
.ninja-settings-header-actions[b-tv7mv6nkpw] { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
.ninja-network-ports-button[b-tv7mv6nkpw] {
    min-height:46px; margin-top:4px; padding:0 17px; display:inline-flex; align-items:center; gap:9px;
    border:1px solid rgba(227,185,51,.56); border-radius:10px; cursor:pointer;
    color:#f3d878; background:linear-gradient(180deg,rgba(222,171,30,.13),rgba(12,19,20,.87));
    font:inherit; font-size:.9rem; font-weight:750; transition:border-color .16s, background .16s;
}
.ninja-network-ports-button:hover[b-tv7mv6nkpw] { border-color:#f5d46b; background:rgba(227,181,37,.17); }
.ninja-network-ports-button svg[b-tv7mv6nkpw] { display:block; width:19px; height:19px; flex:0 0 19px; }
@media(max-width:760px) { .ninja-settings-header-actions[b-tv7mv6nkpw] { width:100%; justify-content:flex-start; } .ninja-network-ports-button[b-tv7mv6nkpw] { flex:1; justify-content:center; } }

/* ============================================================
   SETTINGS v2 — visual redesign of the SETTINGS upper area only.
   Existing server cards / controls below remain untouched.
   ============================================================ */
.servers-page .ninja-settings-page-header[b-tv7mv6nkpw] {
    margin: 0 0 20px;
    min-height: 92px;
    align-items: center;
}
.servers-page .ninja-settings-page-header .servers-title[b-tv7mv6nkpw] {
    margin: 0;
    transform: none;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 850;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.12;
    letter-spacing: -.035em;
}
.servers-page .ninja-settings-page-header .servers-subtitle[b-tv7mv6nkpw] {
    margin: 9px 0 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: clamp(.85rem, 1vw, 1.02rem);
    font-style: normal;
    letter-spacing: normal;
    line-height: 1.5;
    color: #c3c8c8;
}
.ninja-settings-empty-server[b-tv7mv6nkpw] {
    padding: 18px;
    margin-bottom: 16px;
    border: 1px solid rgba(233, 194, 66, .35);
    background: rgba(5, 12, 14, .92);
    border-radius: 14px;
    color: #c4cdd0;
}
.ninja-settings-server-summary[b-tv7mv6nkpw],
.ninja-settings-accordion[b-tv7mv6nkpw],
.ninja-settings-ports-preview[b-tv7mv6nkpw] {
    color: #e9eceb;
    border: 1px solid rgba(231, 184, 49, .52);
    border-radius: 16px;
    background: linear-gradient(125deg, rgba(8, 14, 16, .96), rgba(5, 11, 13, .93));
    box-shadow: 0 14px 32px rgba(0,0,0,.27), inset 0 1px 0 rgba(255, 231, 138, .025);
    backdrop-filter: blur(14px);
}
.ninja-settings-server-summary[b-tv7mv6nkpw] {
    display: grid;
    grid-template-columns: 64px minmax(125px,1.55fr) minmax(132px,1.15fr) minmax(140px,1.15fr) minmax(100px,.7fr) auto;
    align-items: center;
    gap: clamp(11px, 1.55vw, 26px);
    margin-bottom: 16px;
    padding: 18px 21px;
}
.ninja-settings-summary-icon[b-tv7mv6nkpw] {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(230,188,54,.63);
    border-radius: 12px;
    background: linear-gradient(145deg,rgba(235,180,39,.18),rgba(240,202,74,.025));
    color: #f2cb56;
}
.ninja-settings-summary-icon svg[b-tv7mv6nkpw] {width:31px;height:31px}
.ninja-settings-summary-name[b-tv7mv6nkpw],
.ninja-settings-summary-field > div[b-tv7mv6nkpw],
.ninja-settings-summary-status[b-tv7mv6nkpw] {min-width:0;display:flex;flex-direction:column;gap:6px}
.ninja-settings-summary-name-row[b-tv7mv6nkpw] {display:flex;align-items:center;gap:9px;min-width:0}
.ninja-settings-summary-name strong[b-tv7mv6nkpw] {font-size:1.22rem;color:#fff;overflow-wrap:anywhere}
.ninja-settings-summary-name > span[b-tv7mv6nkpw] {font-size:.83rem;color:#b5bdc0;overflow-wrap:anywhere}
.ninja-settings-edit-server[b-tv7mv6nkpw] {display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;flex:0 0 29px;border:1px solid #384143;border-radius:9px;background:#151e20;color:#d0d6d6;text-decoration:none}
.ninja-settings-edit-server:hover[b-tv7mv6nkpw] {color:#f8da74;border-color:#e1be5f}
.ninja-settings-edit-server svg[b-tv7mv6nkpw] {height:15px;width:15px}
.ninja-settings-summary-field[b-tv7mv6nkpw] {display:flex;align-items:center;min-width:0;gap:13px;border-left:1px solid rgba(207,213,212,.18);padding-left:clamp(10px,1.8vw,25px)}
.ninja-settings-summary-field > svg[b-tv7mv6nkpw] {height:26px;width:26px;flex:0 0 26px;color:#bfc8cb}
.ninja-settings-summary-field span[b-tv7mv6nkpw],.ninja-settings-summary-status > span:first-child[b-tv7mv6nkpw] {font-size:.76rem;color:#aab4b9}
.ninja-settings-summary-field strong[b-tv7mv6nkpw] {font-size:.9rem;color:#edf1f2;font-weight:630;overflow-wrap:anywhere}
.ninja-settings-summary-status[b-tv7mv6nkpw] {border-left:1px solid rgba(207,213,212,.18);padding-left:clamp(10px,1.8vw,25px);align-items:start}
.ninja-settings-state[b-tv7mv6nkpw] {display:inline-flex;gap:6px;align-items:center;padding:5px 10px;border-radius:8px;font-size:.76rem;font-weight:750;border:1px solid rgba(183,192,195,.23);color:#b5bec0}
.ninja-settings-state.online[b-tv7mv6nkpw] {color:#9fe9bc;border-color:rgba(90,199,135,.4);background:rgba(62,158,97,.09)}
.ninja-settings-state.offline[b-tv7mv6nkpw] {color:#fa9e8e;border-color:rgba(239,100,75,.32)}
.ninja-settings-dot[b-tv7mv6nkpw] {display:inline-block;width:8px;height:8px;border-radius:50%;background:#70d9a0;box-shadow:0 0 10px rgba(112,217,160,.25);flex:0 0 8px}
.ninja-settings-state.offline .ninja-settings-dot[b-tv7mv6nkpw] {background:#ef8876}
.ninja-settings-summary-ports[b-tv7mv6nkpw],
.ninja-settings-ports-view[b-tv7mv6nkpw],
.ninja-protocols-refresh[b-tv7mv6nkpw],
.ninja-protocol-action[b-tv7mv6nkpw] {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:43px;
    padding:9px 14px;
    border:1px solid rgba(233,190,66,.65);
    border-radius:10px;
    background:linear-gradient(180deg,rgba(229,184,56,.13),rgba(10,16,18,.9));
    color:#f7d878;
    font:inherit;
    font-size:.82rem;
    font-weight:730;
    cursor:pointer;
    white-space:nowrap;
    transition:background .16s,border-color .16s,transform .16s;
}
.ninja-settings-summary-ports:hover[b-tv7mv6nkpw],.ninja-settings-ports-view:hover[b-tv7mv6nkpw],.ninja-protocols-refresh:hover:not(:disabled)[b-tv7mv6nkpw],.ninja-protocol-action:hover:not(:disabled)[b-tv7mv6nkpw]{border-color:#f7d773;background:rgba(225,176,36,.19);transform:translateY(-1px)}
.ninja-settings-summary-ports > svg[b-tv7mv6nkpw],.ninja-settings-ports-view > svg[b-tv7mv6nkpw],.ninja-protocols-refresh > svg[b-tv7mv6nkpw] {width:18px;height:18px;flex:0 0 18px}
.ninja-settings-summary-ports > span[b-tv7mv6nkpw] {font-size:1.35rem;margin-left:4px;font-weight:400}
.ninja-settings-primary-grid[b-tv7mv6nkpw] {display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,295px);gap:14px;align-items:start;margin-bottom:14px}
.servers-page .ninja-settings-accordion[b-tv7mv6nkpw] {padding:0;margin:0;min-width:0}
.ninja-settings-section-heading[b-tv7mv6nkpw] {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:76px;padding:15px 17px;margin:0!important}
.ninja-settings-section-toggle[b-tv7mv6nkpw] {border:0;background:transparent;display:flex;flex:1 1 auto;min-width:0;text-align:left;align-items:center;gap:16px;padding:0;color:#eef0ef;cursor:pointer;font:inherit}
.ninja-settings-section-toggle:hover .ninja-settings-section-copy > strong[b-tv7mv6nkpw] {color:#ffe38e}
.ninja-settings-section-icon[b-tv7mv6nkpw] {display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;color:#f2c94f}
.ninja-settings-section-icon svg[b-tv7mv6nkpw] {width:34px;height:34px}
.ninja-settings-section-copy[b-tv7mv6nkpw] {display:flex;flex-direction:column;gap:3px;min-width:0}
.ninja-settings-section-copy > strong[b-tv7mv6nkpw] {font-size:1.17rem;color:#fff;letter-spacing:-.01em}
.ninja-settings-section-copy > small[b-tv7mv6nkpw] {font-size:.75rem;color:#acb7ba;line-height:1.4;font-weight:400}
.ninja-settings-heading-actions[b-tv7mv6nkpw] {display:flex;align-items:center;gap:10px;flex:0 0 auto}
.ninja-settings-chevron[b-tv7mv6nkpw] {display:flex;align-items:center;justify-content:center;width:30px;height:35px;flex:0 0 30px;border:0;border-radius:8px;background:transparent;color:#e7e9e9;cursor:pointer}
.ninja-settings-chevron:hover[b-tv7mv6nkpw] {background:rgba(255,206,69,.08);color:#f5d365}
.ninja-settings-chevron svg[b-tv7mv6nkpw] {width:20px;height:20px;transition:transform .18s}
.ninja-settings-chevron svg.is-collapsed[b-tv7mv6nkpw] {transform:rotate(180deg)}
.ninja-settings-accordion-body[b-tv7mv6nkpw] {padding:0 15px 16px;min-width:0}
.servers-page .ninja-protocols-grid[b-tv7mv6nkpw] {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 14px}
.servers-page .ninja-protocol-tile[b-tv7mv6nkpw] {display:grid;grid-template-columns:55px minmax(0,1fr);grid-template-rows:auto auto;gap:7px 12px;align-items:start;min-height:170px;padding:15px;border:1px solid rgba(182,202,206,.15);border-radius:12px;background:linear-gradient(130deg,rgba(22,29,31,.85),rgba(7,13,15,.92));color:#e6e9e9}
.ninja-protocol-card-icon[b-tv7mv6nkpw] {display:inline-flex;align-items:center;justify-content:center;width:55px;height:55px;border-radius:12px;border:1px solid rgba(228,189,73,.4);background:linear-gradient(150deg,rgba(248,201,74,.16),rgba(12,18,20,.7));color:#f4d166}
.ninja-protocol-card-icon.wireguard[b-tv7mv6nkpw] {border-color:rgba(196,207,213,.26);background:linear-gradient(135deg,rgba(199,206,215,.14),rgba(8,14,16,.88));color:#f0f2f2}
.ninja-protocol-card-icon svg[b-tv7mv6nkpw] {width:39px;height:39px}
.ninja-protocol-card-info[b-tv7mv6nkpw] {min-width:0}
.ninja-protocol-card-title[b-tv7mv6nkpw] {display:flex;flex-wrap:wrap;gap:6px 9px;align-items:center;margin:1px 0 7px}
.servers-page .ninja-protocol-card-title > strong[b-tv7mv6nkpw] {color:#eef0f0;font-size:.89rem;line-height:1.25;font-weight:790}
.ninja-protocol-badge[b-tv7mv6nkpw] {display:inline-flex;align-items:center;min-height:25px;padding:3px 8px;border:1px solid rgba(183,195,196,.28);border-radius:16px;font-size:.67rem;font-weight:660;color:#c6cfd0;background:rgba(187,198,200,.07);line-height:1.25}
.ninja-protocol-badge.is-ready[b-tv7mv6nkpw] {color:#99e5b1;border-color:rgba(80,183,110,.45);background:rgba(31,129,66,.13)}
.ninja-protocol-badge.is-attention[b-tv7mv6nkpw] {color:#f2d47b;border-color:rgba(226,174,50,.36);background:rgba(218,173,48,.09)}
.servers-page .ninja-protocol-card-info p[b-tv7mv6nkpw] {font-size:.73rem;line-height:1.45;color:#bec7c7;margin:0;overflow-wrap:anywhere}
.ninja-protocol-status-note[b-tv7mv6nkpw] {display:block;color:#aebabc;margin-top:4px;font-size:.7rem}
.ninja-protocol-card-actions[b-tv7mv6nkpw] {grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:7px;align-self:end}
.servers-page .ninja-protocol-action[b-tv7mv6nkpw] {min-height:36px;min-width:130px;padding:7px 13px;color:#f4e4bb;font-size:.78rem}
.ninja-protocol-context[b-tv7mv6nkpw] {color:#9aa6a9;font-size:.68rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.servers-page .ninja-protocols-refresh[b-tv7mv6nkpw] {min-height:40px;padding:8px 12px;font-size:.75rem}
.servers-page .ninja-protocols-refresh:disabled[b-tv7mv6nkpw] {opacity:.55;cursor:wait}
.ninja-settings-ports-preview[b-tv7mv6nkpw] {padding:14px 14px 15px;min-width:0}
.ninja-settings-ports-heading[b-tv7mv6nkpw] {display:flex;align-items:center;gap:8px;margin:1px 0 15px}
.ninja-settings-ports-heading .ninja-settings-section-icon[b-tv7mv6nkpw] {flex-basis:42px;width:42px}
.ninja-settings-ports-heading > div[b-tv7mv6nkpw] {display:flex;flex-direction:column;min-width:0;gap:4px;flex:1}
.ninja-settings-ports-heading strong[b-tv7mv6nkpw] {font-size:.94rem;color:#fff}
.ninja-settings-ports-heading div span[b-tv7mv6nkpw] {font-size:.71rem;color:#aab6b9}
.ninja-settings-ports-refresh[b-tv7mv6nkpw] {flex:0 0 25px;width:25px;height:25px;border:0;border-radius:6px;background:transparent;color:#d8c37a;font-size:1.3rem;cursor:pointer}
.ninja-settings-ports-refresh:disabled[b-tv7mv6nkpw] {opacity:.4;cursor:wait}
.ninja-settings-ports-list[b-tv7mv6nkpw] {min-height:175px;border-radius:11px;border:1px solid rgba(175,195,199,.15);overflow:hidden;background:rgba(5,10,11,.36)}
.ninja-settings-port-row[b-tv7mv6nkpw] {display:grid;grid-template-columns:55px minmax(0,1fr) auto;min-height:42px;align-items:center;gap:5px;padding:7px 11px;border-bottom:1px solid rgba(157,179,184,.12);font-size:.74rem}
.ninja-settings-port-row:last-child[b-tv7mv6nkpw] {border-bottom:0}
.ninja-settings-port-row > strong[b-tv7mv6nkpw] {font-size:.78rem;color:#f2f3f2;font-variant-numeric:tabular-nums}
.ninja-settings-port-name[b-tv7mv6nkpw] {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#cad1d1}
.ninja-settings-port-state[b-tv7mv6nkpw] {display:inline-flex;align-items:center;gap:6px;color:#a8d6ba;font-size:.68rem;white-space:nowrap}
.ninja-settings-port-state .ninja-settings-dot[b-tv7mv6nkpw] {width:7px;height:7px;flex-basis:7px}
.ninja-settings-preview-message[b-tv7mv6nkpw] {font-size:.78rem;line-height:1.5;color:#aebcbd;padding:13px;margin:0;overflow-wrap:anywhere}
.ninja-settings-preview-message.is-error[b-tv7mv6nkpw] {color:#f2a6a2}
.ninja-settings-ports-count[b-tv7mv6nkpw] {display:block;margin-top:9px;color:#98a7aa;font-size:.67rem}
.ninja-settings-ports-view[b-tv7mv6nkpw] {width:100%;margin-top:15px;justify-content:space-between;font-size:.78rem}
.ninja-settings-ports-view span[b-tv7mv6nkpw] {font-size:1.1rem}
.servers-page .ninja-browser-accordion[b-tv7mv6nkpw] {margin:0 0 25px}
.ninja-browser-accordion .ninja-settings-section-heading[b-tv7mv6nkpw] {min-height:73px}
.servers-page .ninja-browser-accordion .browser-vpn-public-card[b-tv7mv6nkpw] {margin:0;padding:0;max-width:none;background:transparent;box-shadow:none;border:0;backdrop-filter:none}
.ninja-browser-grid[b-tv7mv6nkpw] {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.ninja-browser-card[b-tv7mv6nkpw] {display:flex;flex-direction:column;min-width:0;padding:17px;border:1px solid rgba(179,201,203,.16);border-radius:12px;background:linear-gradient(125deg,rgba(18,26,28,.86),rgba(6,13,15,.85))}
.ninja-browser-card .browser-vpn-public-head[b-tv7mv6nkpw] {margin-bottom:13px}
.ninja-browser-card .browser-vpn-public-head h3[b-tv7mv6nkpw] {font-size:.98rem}
.ninja-browser-card .browser-vpn-public-head p[b-tv7mv6nkpw] {font-size:.76rem;line-height:1.48}
.ninja-browser-card .browser-vpn-public-row[b-tv7mv6nkpw] {margin-top:auto;align-items:stretch}
.ninja-browser-card .browser-vpn-public-input[b-tv7mv6nkpw] {min-height:42px;font-size:.84rem}
.ninja-browser-card .browser-vpn-public-save[b-tv7mv6nkpw] {min-width:112px}
.ninja-browser-card .browser-vpn-public-hint[b-tv7mv6nkpw] {font-size:.69rem;line-height:1.5;margin-top:10px}
.ninja-settings-server-management[b-tv7mv6nkpw] {scroll-margin-top:22px}
.ninja-settings-server-management-header[b-tv7mv6nkpw] {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:22px 0 15px;padding:0 1px}
.ninja-settings-server-management-header h2[b-tv7mv6nkpw] {font-size:1.25rem;font-weight:750;color:#f1f2f1;margin:0 0 4px}
.ninja-settings-server-management-header p[b-tv7mv6nkpw] {font-size:.78rem;color:#bac2c4;margin:0}
.ninja-settings-server-management-header .ninja-add-server-button[b-tv7mv6nkpw] {margin:0;min-height:43px}
@media (max-width:1320px) {
    .ninja-settings-server-summary[b-tv7mv6nkpw] {grid-template-columns:58px minmax(120px,1.4fr) minmax(130px,1fr) minmax(130px,1fr) auto;gap:12px}
    .ninja-settings-summary-status[b-tv7mv6nkpw] {grid-column:4/5;grid-row:2;border-left:none;padding-left:0}
    .ninja-settings-summary-ports[b-tv7mv6nkpw] {grid-column:5;grid-row:1/3}
}
@media (max-width:1130px) {
    .ninja-settings-primary-grid[b-tv7mv6nkpw] {grid-template-columns:minmax(0,1fr)}
    .ninja-settings-ports-list[b-tv7mv6nkpw] {min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
    .ninja-settings-port-row:nth-child(odd)[b-tv7mv6nkpw] {border-right:1px solid rgba(157,179,184,.12)}
    .ninja-settings-server-summary[b-tv7mv6nkpw] {grid-template-columns:58px minmax(110px,1fr) minmax(130px,1fr) minmax(130px,1fr);gap:12px}
    .ninja-settings-summary-ports[b-tv7mv6nkpw] {grid-column:4;grid-row:2}
    .ninja-settings-summary-status[b-tv7mv6nkpw] {grid-column:3;grid-row:2}
}
@media (max-width:750px) {
    .ninja-settings-server-summary[b-tv7mv6nkpw] {display:flex;flex-wrap:wrap;gap:13px}
    .ninja-settings-summary-name[b-tv7mv6nkpw] {flex:1 1 200px}
    .ninja-settings-summary-field[b-tv7mv6nkpw] {flex:1 1 170px;border-left:none;padding-left:0}
    .ninja-settings-summary-status[b-tv7mv6nkpw] {border-left:none;padding-left:0;flex:1 1 130px}
    .ninja-settings-summary-ports[b-tv7mv6nkpw] {flex:1 1 100%;justify-content:center}
    .ninja-settings-section-heading[b-tv7mv6nkpw] {padding:12px;gap:4px;flex-wrap:wrap}
    .ninja-settings-section-icon[b-tv7mv6nkpw] {flex-basis:36px;width:36px}
    .ninja-settings-section-icon svg[b-tv7mv6nkpw] {width:30px;height:30px}
    .ninja-settings-section-copy > strong[b-tv7mv6nkpw] {font-size:1rem}
    .ninja-settings-section-copy > small[b-tv7mv6nkpw] {font-size:.69rem}
    .ninja-settings-heading-actions[b-tv7mv6nkpw] {width:100%;justify-content:space-between;padding-left:43px}
    .servers-page .ninja-protocols-grid[b-tv7mv6nkpw] {grid-template-columns:1fr}
    .ninja-browser-grid[b-tv7mv6nkpw] {grid-template-columns:1fr}
    .ninja-settings-ports-list[b-tv7mv6nkpw] {display:block}
    .ninja-settings-server-management-header[b-tv7mv6nkpw] {align-items:stretch;flex-direction:column}
    .ninja-settings-server-management-header .ninja-add-server-button[b-tv7mv6nkpw] {align-self:flex-start}
}
@media (max-width:460px) {
    .ninja-settings-accordion-body[b-tv7mv6nkpw] {padding:0 10px 12px}
    .ninja-browser-card[b-tv7mv6nkpw] {padding:12px}
    .servers-page .ninja-protocol-tile[b-tv7mv6nkpw] {grid-template-columns:48px minmax(0,1fr);padding:12px}
    .ninja-protocol-card-icon[b-tv7mv6nkpw] {height:48px;width:48px}
    .ninja-protocol-card-icon svg[b-tv7mv6nkpw] {width:34px;height:34px}
    .ninja-browser-card .browser-vpn-public-row[b-tv7mv6nkpw] {flex-direction:column}
    .ninja-browser-card .browser-vpn-public-save[b-tv7mv6nkpw] {width:100%}
}
/* Explicit specificity for protocol badges/icons over legacy .ninja-protocol-tile span. */
.servers-page .ninja-protocol-tile .ninja-protocol-card-icon[b-tv7mv6nkpw] { color:#f4d166; }
.servers-page .ninja-protocol-tile .ninja-protocol-card-icon.wireguard[b-tv7mv6nkpw] { color:#f0f2f2; }
.servers-page .ninja-protocol-tile .ninja-protocol-badge[b-tv7mv6nkpw] {font-size:.67rem;line-height:1.25;color:#c6cfd0}
.servers-page .ninja-protocol-tile .ninja-protocol-badge.is-ready[b-tv7mv6nkpw] {color:#99e5b1}
.servers-page .ninja-protocol-tile .ninja-protocol-badge.is-attention[b-tv7mv6nkpw] {color:#f2d47b}
.servers-page .ninja-protocol-tile .ninja-protocol-status-note[b-tv7mv6nkpw] {font-size:.7rem;color:#aebabc;line-height:1.4}
.servers-page .ninja-protocol-tile .ninja-protocol-context[b-tv7mv6nkpw] {font-size:.68rem;color:#9aa6a9}

/* Settings refinements — paired accordions and individually collapsible Browser VPN settings.
   Visual changes only: existing protocol actions, forms and port dialog are untouched. */
.ninja-settings-server-summary[b-tv7mv6nkpw] {
    grid-template-columns:64px minmax(125px,1.65fr) minmax(132px,1.15fr) minmax(140px,1.15fr) minmax(110px,.7fr);
}
.ninja-settings-primary-grid[b-tv7mv6nkpw] {
    align-items:start;
}
.ninja-settings-primary-grid.both-expanded[b-tv7mv6nkpw] {
    align-items:stretch;
}
.ninja-settings-primary-grid.both-expanded > .ninja-settings-accordion[b-tv7mv6nkpw] {
    height:100%;
}
.servers-page .ninja-settings-primary-grid .ninja-settings-ports-preview[b-tv7mv6nkpw] {
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:0;
    margin:0;
    overflow:hidden;
}
.ninja-settings-ports-preview .ninja-settings-ports-heading[b-tv7mv6nkpw] {
    min-height:76px;
    margin:0 !important;
    padding:15px 13px;
    flex:0 0 auto;
}
.ninja-settings-ports-heading .ninja-settings-section-toggle[b-tv7mv6nkpw] {
    gap:9px;
}
.ninja-settings-ports-heading .ninja-settings-section-icon[b-tv7mv6nkpw] {
    flex:0 0 34px;
    width:34px;
    height:34px;
}
.ninja-settings-ports-heading .ninja-settings-section-icon svg[b-tv7mv6nkpw] {
    width:28px;
    height:28px;
}
.ninja-settings-ports-heading .ninja-settings-section-copy strong[b-tv7mv6nkpw] {
    font-size:.91rem;
}
.ninja-settings-ports-heading .ninja-settings-section-copy small[b-tv7mv6nkpw] {
    font-size:.67rem;
}
.ninja-settings-ports-heading .ninja-settings-heading-actions[b-tv7mv6nkpw] {
    gap:2px;
}
.ninja-settings-ports-preview .ninja-settings-ports-body[b-tv7mv6nkpw] {
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
    padding:0 13px 15px;
}
.ninja-settings-ports-preview .ninja-settings-ports-list[b-tv7mv6nkpw] {
    display:block;
    flex:none;
    min-height:0;
    height:305px;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-gutter:stable;
}
.ninja-settings-primary-grid.both-expanded .ninja-settings-ports-list[b-tv7mv6nkpw] {
    flex:1 1 0;
    height:auto;
}
.ninja-settings-ports-body .ninja-settings-ports-count[b-tv7mv6nkpw] {
    flex:0 0 auto;
}
.ninja-settings-ports-body .ninja-settings-ports-view[b-tv7mv6nkpw] {
    flex:0 0 auto;
}
/* Browser VPN contains one accordion. The two cards inside are static: no nested toggles. */
.servers-page .ninja-browser-grid .ninja-browser-setting[b-tv7mv6nkpw] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 17px;
    overflow: hidden;
}
.servers-page .ninja-browser-grid .browser-vpn-public-head[b-tv7mv6nkpw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.servers-page .ninja-browser-grid .browser-vpn-public-head h3[b-tv7mv6nkpw] {
    margin: 0;
    color: #f0f2f3;
    font-size: .98rem;
    line-height: 1.35;
    font-weight: 760;
}
.servers-page .ninja-browser-grid .browser-vpn-public-head > .browser-vpn-public-badge[b-tv7mv6nkpw],
.servers-page .ninja-browser-grid .browser-vpn-public-head > .browser-vpn-server-badge[b-tv7mv6nkpw] {
    margin: 0;
}
.servers-page .ninja-browser-grid .ninja-browser-card-description[b-tv7mv6nkpw] {
    color: #b8c3c6;
    font-size: .76rem;
    line-height: 1.55;
    margin: 0 0 15px;
}
.servers-page .ninja-browser-grid .browser-vpn-public-row[b-tv7mv6nkpw] {
    margin-top: auto;
}
@media (max-width:1320px) {
    .ninja-settings-server-summary[b-tv7mv6nkpw] {
        grid-template-columns:58px minmax(115px,1.35fr) minmax(130px,1fr) minmax(130px,1fr) minmax(105px,.7fr);
    }
    .ninja-settings-summary-status[b-tv7mv6nkpw] {
        grid-column:auto;
        grid-row:auto;
        border-left:1px solid rgba(207,213,212,.18);
        padding-left:12px;
    }
}
@media (max-width:1130px) {
    .ninja-settings-primary-grid.both-expanded[b-tv7mv6nkpw] {
        align-items:start;
    }
    .ninja-settings-primary-grid.both-expanded > .ninja-settings-accordion[b-tv7mv6nkpw] {
        height:auto;
    }
    .ninja-settings-primary-grid.both-expanded .ninja-settings-ports-list[b-tv7mv6nkpw] {
        height:305px;
        flex:none;
    }
    .ninja-settings-server-summary[b-tv7mv6nkpw] {
        grid-template-columns:58px minmax(110px,1fr) minmax(130px,1fr) minmax(130px,1fr);
    }
    .ninja-settings-summary-status[b-tv7mv6nkpw] {
        grid-column:3;
        grid-row:2;
        border-left:none;
        padding-left:0;
    }
}
@media (max-width:750px) {
    .ninja-settings-summary-status[b-tv7mv6nkpw] {
        flex:1 1 130px;
    }
    .ninja-settings-ports-preview .ninja-settings-ports-heading[b-tv7mv6nkpw] {
        padding:12px;
    }
    .ninja-settings-ports-heading .ninja-settings-heading-actions[b-tv7mv6nkpw] {
        width:auto;
        padding-left:0;
    }
    .ninja-settings-ports-preview .ninja-settings-ports-list[b-tv7mv6nkpw] {
        display:block;
    }
}


/* =========================================================
   SETTINGS — COUNTRY EDITOR V2
   Флаг — контекстное действие рядом с именем VPS.
   В обычном состоянии сетка серверных кнопок не меняется.
   ========================================================= */

.settings-country-trigger[b-tv7mv6nkpw] {
    position: relative;
    display: inline-flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    min-width: 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    color: #f4d45c;
    -webkit-tap-highlight-color: transparent;
}

.settings-country-trigger .settings-server-country-flag[b-tv7mv6nkpw] {
    flex: 0 0 38px !important;
    transition: box-shadow .18s ease, border-color .18s ease;
}

.settings-country-trigger:hover .settings-server-country-flag[b-tv7mv6nkpw],
.settings-country-trigger.is-editing .settings-server-country-flag[b-tv7mv6nkpw] {
    border-color: #ffe07a;
    box-shadow: 0 0 0 3px rgba(244, 197, 55, .14), 0 0 15px rgba(255, 204, 74, .13);
}

.settings-country-trigger:focus-visible[b-tv7mv6nkpw] {
    outline: 2px solid #ffe582;
    outline-offset: 3px;
}

.settings-country-edit-pencil[b-tv7mv6nkpw] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    border: 1px solid rgba(239, 200, 68, .78);
    border-radius: 50%;
    color: #f3d265;
    background: #111719;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}

.settings-country-edit-pencil svg[b-tv7mv6nkpw] {
    width: 11px;
    height: 11px;
}

/* Редактор находится в отдельной строке карточки, не в .server-actions. */
.settings-country-editor[b-tv7mv6nkpw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid rgba(231, 188, 59, .32);
    border-radius: 12px;
    background: linear-gradient(120deg, rgba(244, 196, 47, .075), rgba(13, 19, 20, .90));
    box-sizing: border-box;
}

.settings-country-editor-description[b-tv7mv6nkpw] {
    flex: 1 1 165px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-country-editor-eyebrow[b-tv7mv6nkpw] {
    color: #d8b64a;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .09em;
}

.settings-country-editor-description strong[b-tv7mv6nkpw] {
    color: #f3f4f2;
    font-size: .94rem;
    font-weight: 750;
}

.settings-country-editor-description > span:last-child[b-tv7mv6nkpw] {
    color: #a3aaad;
    font-size: .73rem;
    line-height: 1.4;
    max-width: 295px;
}

.settings-country-editor-controls[b-tv7mv6nkpw] {
    flex: 1.2 1 230px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-country-editor-label[b-tv7mv6nkpw] {
    display: block;
    color: #c4c9c9;
    font-size: .72rem;
    font-weight: 650;
}

.settings-country-editor-select[b-tv7mv6nkpw] {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid rgba(220, 179, 53, .47);
    border-radius: 9px;
    outline: none;
    color: #f3f4f2;
    background: #111719;
    font: inherit;
    font-size: .83rem;
    cursor: pointer;
}

.settings-country-editor-select:focus-visible[b-tv7mv6nkpw] {
    border-color: #f9d963;
    box-shadow: 0 0 0 3px rgba(249, 217, 99, .14);
}

.settings-country-editor-select:disabled[b-tv7mv6nkpw] {
    opacity: .65;
    cursor: progress;
}

.settings-country-editor-buttons[b-tv7mv6nkpw] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-country-editor-cancel[b-tv7mv6nkpw],
.settings-country-editor-save[b-tv7mv6nkpw] {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    font: inherit;
    font-size: .77rem;
    font-weight: 750;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.settings-country-editor-cancel[b-tv7mv6nkpw] {
    border: 1px solid rgba(169, 177, 175, .24);
    color: #c5caca;
    background: rgba(255, 255, 255, .025);
}

.settings-country-editor-cancel:hover[b-tv7mv6nkpw] {
    border-color: rgba(169, 177, 175, .48);
    background: rgba(255, 255, 255, .065);
}

.settings-country-editor-save[b-tv7mv6nkpw] {
    border: 1px solid #eac24e;
    color: #1a1609;
    background: linear-gradient(180deg, #ffe582, #edc851);
}

.settings-country-editor-save:hover[b-tv7mv6nkpw] {
    background: #ffdf68;
}

.settings-country-editor-cancel:focus-visible[b-tv7mv6nkpw],
.settings-country-editor-save:focus-visible[b-tv7mv6nkpw] {
    outline: 2px solid #ffe582;
    outline-offset: 2px;
}

.settings-country-editor-cancel:disabled[b-tv7mv6nkpw],
.settings-country-editor-save:disabled[b-tv7mv6nkpw] {
    opacity: .6;
    cursor: wait;
}

.settings-country-editor-error[b-tv7mv6nkpw] {
    flex: 1 1 100%;
    color: #f7a7a2;
    font-size: .78rem;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .settings-country-trigger[b-tv7mv6nkpw] {
        width: 40px;
        height: 40px;
        min-width: 40px;
        flex-basis: 40px;
    }

    .settings-country-trigger .settings-server-country-flag[b-tv7mv6nkpw] {
        flex-basis: 34px !important;
    }

    .settings-country-editor[b-tv7mv6nkpw] {
        padding: 13px;
        gap: 12px;
    }
}
/* /Components/Pages/Tools.razor.rz.scp.css */
/*
   Tools.razor.css intentionally minimal.
   Speedtest styling lives inside Tools.razor.
*/
/* /Components/Pages/Traffic.razor.rz.scp.css */
/* =========================================================
   TRAFFIC — Ninja VPN
   Визуально согласовано со страницей "Пользователи VPN"
   ========================================================= */

.traffic-header[b-dzcafa11e0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 0 1.45rem;
}

    .traffic-header > div[b-dzcafa11e0] {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.85rem;
    }

.traffic-title[b-dzcafa11e0] {
    margin: -1.25rem 0 0 !important;
    position: relative;
    z-index: 1;
    /* Важно: стиль задаётся прямо здесь.
       Класс vpn-users-title из VpnUsers.razor.css изолирован Blazor
       и на Traffic.razor не распространяется. */
    color: #ffffff !important;
    font-family: "Segoe Print", "Comic Sans MS", cursive !important;
    font-size: clamp(3.35rem, 4.15vw, 4.75rem) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.78), 0 0 1px rgba(255, 255, 255, 0.18) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.traffic-subtitle[b-dzcafa11e0] {
    margin: 0;
    color: rgba(225, 231, 234, .72);
    font-size: clamp(1rem, 1.45vw, 1.35rem);
    font-style: italic;
    line-height: 1.25;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .50);
}

    .traffic-subtitle strong[b-dzcafa11e0] {
        color: inherit;
        font-weight: inherit;
    }


/* =========================================================
   ПЕРИОД
   ========================================================= */

.traffic-period-panel[b-dzcafa11e0] {
    margin-bottom: 1.35rem;
}

.traffic-period-row[b-dzcafa11e0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.traffic-period-label[b-dzcafa11e0] {
    margin-right: 3px;
    color: #f2f3f3;
    font-size: .98rem;
    font-weight: 750;
}

.traffic-period-buttons[b-dzcafa11e0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.traffic-period-button[b-dzcafa11e0] {
    appearance: none;
    min-width: 68px;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid rgba(255, 207, 47, .48);
    border-radius: 8px;
    color: #d9dde0;
    background: rgba(4, 10, 12, .76);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.012);
    font: inherit;
    font-size: .88rem;
    font-weight: 650;
    cursor: pointer;
    transition: transform .15s ease, color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

    .traffic-period-button:hover:not(:disabled)[b-dzcafa11e0] {
        transform: translateY(-1px);
        color: #ffe474;
        border-color: rgba(255, 216, 77, .78);
        background: rgba(255, 194, 0, .06);
        box-shadow: 0 0 13px rgba(255, 194, 0, .08);
    }

    .traffic-period-button.active[b-dzcafa11e0] {
        color: #171207;
        border-color: #ffe77f;
        background: linear-gradient(180deg, #ffe87b 0%, #ffd63d 55%, #e6af15 100%);
        box-shadow: 0 0 18px rgba(255, 193, 0, .22), inset 0 1px 0 rgba(255,255,255,.35);
    }

    .traffic-period-button:disabled[b-dzcafa11e0] {
        opacity: .38;
        cursor: default;
        transform: none;
    }

.traffic-refreshing[b-dzcafa11e0] {
    color: rgba(214, 222, 226, .62);
    font-size: .82rem;
    font-style: italic;
}


/* =========================================================
   СВОДНЫЕ КАРТОЧКИ
   ========================================================= */

.traffic-summary[b-dzcafa11e0] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 1.55rem;
}

.traffic-card[b-dzcafa11e0] {
    min-width: 0;
    min-height: 126px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 19px 18px;
    border: 1px solid rgba(255, 205, 41, .55);
    border-radius: 14px;
    background: radial-gradient(circle at 84% 10%, rgba(255, 189, 0, .055), transparent 34%), linear-gradient(180deg, rgba(5, 12, 14, .92), rgba(3, 9, 11, .89));
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.015), 0 14px 32px rgba(0,0,0,.24);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

    .traffic-card:hover[b-dzcafa11e0] {
        transform: translateY(-1px);
        border-color: rgba(255, 213, 59, .78);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 15px 34px rgba(0,0,0,.28), 0 0 16px rgba(255, 190, 0, .055);
    }

.traffic-card-icon[b-dzcafa11e0] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: #ffd63c;
    filter: drop-shadow(0 0 7px rgba(255, 201, 35, .14));
}

    .traffic-card-icon svg[b-dzcafa11e0] {
        width: 30px;
        height: 30px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.traffic-card-body[b-dzcafa11e0] {
    min-width: 0;
}

.traffic-card-title[b-dzcafa11e0] {
    color: #c5cdd1;
    font-size: .82rem;
    font-weight: 550;
}

.traffic-card-value[b-dzcafa11e0] {
    margin-top: .42rem;
    color: #ffd63c;
    font-size: clamp(1.35rem, 1.9vw, 2rem);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 0 11px rgba(255, 204, 44, .08);
}

.traffic-card-description[b-dzcafa11e0] {
    margin-top: .55rem;
    color: #8f999f;
    font-size: .75rem;
    line-height: 1.3;
}

.online-value[b-dzcafa11e0] {
    color: #62ef87;
    text-shadow: 0 0 14px rgba(76, 239, 126, .12);
}


/* =========================================================
   ТАБЛИЦА
   ========================================================= */

.traffic-table-wrapper[b-dzcafa11e0] {
    min-height: calc(100vh - 360px);
    overflow-x: auto;
    padding: 0 10px 12px;
    border: 1px solid rgba(255, 205, 41, .56);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(4, 10, 12, .88), rgba(3, 9, 11, .76));
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.012), 0 16px 38px rgba(0,0,0,.24);
}

.traffic-table[b-dzcafa11e0] {
    width: 100%;
    margin: 0;
    border-collapse: separate !important;
    border-spacing: 0 5px !important;
    background: transparent !important;
    color: #e6ebed;
}

    .traffic-table > :not(caption) > * > *[b-dzcafa11e0] {
        border-bottom-width: 0 !important;
        box-shadow: none !important;
        background: transparent;
    }

    .traffic-table thead th[b-dzcafa11e0] {
        position: relative;
        padding: 15px 10px 10px;
        border: 0 !important;
        white-space: nowrap;
        color: #f1ca38;
        background: transparent !important;
        vertical-align: middle;
    }

    .traffic-table thead tr[b-dzcafa11e0] {
        background: transparent !important;
    }

    .traffic-table tbody tr[b-dzcafa11e0] {
        background: rgba(4, 10, 12, .79);
        transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
    }

        .traffic-table tbody tr:hover[b-dzcafa11e0] {
            background: rgba(10, 17, 19, .93);
            box-shadow: 0 0 0 1px rgba(255, 207, 47, .12);
        }

    .traffic-table tbody td[b-dzcafa11e0] {
        padding: 10px 10px;
        border-top: 1px solid rgba(255, 255, 255, .025) !important;
        border-bottom: 1px solid rgba(255, 205, 41, .10) !important;
        color: #dce2e5;
        vertical-align: middle;
    }

        .traffic-table tbody td:first-child[b-dzcafa11e0] {
            border-left: 1px solid rgba(255, 205, 41, .10) !important;
            border-radius: 10px 0 0 10px;
        }

        .traffic-table tbody td:last-child[b-dzcafa11e0] {
            border-right: 1px solid rgba(255, 205, 41, .10) !important;
            border-radius: 0 10px 10px 0;
        }

    .traffic-table .fw-semibold[b-dzcafa11e0] {
        color: #f0f3f4;
        font-weight: 700 !important;
    }

    .traffic-table .small.text-muted[b-dzcafa11e0],
    .traffic-table .text-muted[b-dzcafa11e0] {
        color: #768187 !important;
    }

.vpn-ip[b-dzcafa11e0],
.total-column[b-dzcafa11e0] {
    font-weight: 700;
}

.total-column[b-dzcafa11e0] {
    color: #f2f4f5 !important;
}



/* Колонки VPN IP → Всего выравниваем по центру.
   Пользователь остаётся слева, как на странице Пользователи VPN. */
.traffic-table thead th:nth-child(n+2)[b-dzcafa11e0],
.traffic-table tbody td:nth-child(n+2)[b-dzcafa11e0] {
    text-align: center;
}

    .traffic-table thead th:nth-child(n+2) > .d-flex[b-dzcafa11e0] {
        justify-content: center;
    }

    .traffic-table thead th:nth-child(n+2) .traffic-sort-button[b-dzcafa11e0] {
        text-align: center;
    }

/* Кнопки заголовков таблицы */

.traffic-sort-button[b-dzcafa11e0] {
    appearance: none;
    padding: 0;
    border: 0;
    outline: none;
    color: #f1ca38 !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit;
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: left;
    cursor: pointer;
    text-decoration: none !important;
}

    .traffic-sort-button:hover[b-dzcafa11e0] {
        color: #ffe573 !important;
    }

.traffic-filter-button[b-dzcafa11e0] {
    appearance: none;
    padding: 0 3px;
    border: 0;
    outline: none;
    color: rgba(241, 202, 56, .82);
    background: transparent !important;
    box-shadow: none !important;
    font-size: .73rem;
    line-height: 1;
    cursor: pointer;
}

    .traffic-filter-button:hover[b-dzcafa11e0] {
        color: #ffe573;
    }

.traffic-limit-title[b-dzcafa11e0] {
    display: inline-block;
    text-align: center;
    line-height: 1.05;
}


/* =========================================================
   ФИЛЬТРЫ — тёмные, как на Пользователях VPN
   ========================================================= */

.traffic-filter-popover[b-dzcafa11e0] {
    z-index: 103;
    min-width: 220px;
    left: 0;
    top: 100%;
    padding: 12px !important;
    border: 1px solid rgba(255, 205, 41, .46) !important;
    border-radius: 10px !important;
    color: #dfe5e7;
    background: linear-gradient(180deg, rgba(7, 13, 15, .99), rgba(3, 9, 11, .99)) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.52), inset 0 0 0 1px rgba(255,255,255,.018) !important;
}

    .traffic-filter-popover .small[b-dzcafa11e0],
    .traffic-filter-popover .fw-semibold[b-dzcafa11e0],
    .traffic-filter-popover label[b-dzcafa11e0],
    .traffic-filter-popover span[b-dzcafa11e0] {
        color: #dce2e5;
    }

    .traffic-filter-popover .border-top[b-dzcafa11e0] {
        border-color: rgba(255, 205, 41, .16) !important;
    }

    .traffic-filter-popover .text-muted[b-dzcafa11e0] {
        color: #89949a !important;
    }

    .traffic-filter-popover .form-control[b-dzcafa11e0],
    .traffic-filter-popover .form-select[b-dzcafa11e0] {
        min-height: 34px;
        border: 1px solid rgba(255, 205, 41, .24) !important;
        border-radius: 7px !important;
        color: #e7ecee !important;
        background: rgba(2, 7, 9, .92) !important;
        box-shadow: none !important;
    }

        .traffic-filter-popover .form-control[b-dzcafa11e0]::placeholder {
            color: rgba(170, 181, 187, .48);
        }

        .traffic-filter-popover .form-control:focus[b-dzcafa11e0],
        .traffic-filter-popover .form-select:focus[b-dzcafa11e0] {
            border-color: rgba(255, 214, 60, .70) !important;
            box-shadow: 0 0 0 3px rgba(255, 205, 41, .06) !important;
        }

        .traffic-filter-popover .form-select option[b-dzcafa11e0] {
            color: #e8edef;
            background: #070d0f;
        }

    .traffic-filter-popover input[type="checkbox"][b-dzcafa11e0] {
        accent-color: #e3b51d;
    }

.traffic-filter-reset[b-dzcafa11e0],
.traffic-filter-apply[b-dzcafa11e0] {
    appearance: none;
    border-radius: 7px;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.traffic-filter-reset[b-dzcafa11e0] {
    padding: 5px 3px;
    border: 0;
    color: #b2bcc1;
    background: transparent;
}

    .traffic-filter-reset:hover[b-dzcafa11e0] {
        color: #ffe16b;
    }

.traffic-filter-apply[b-dzcafa11e0] {
    min-height: 31px;
    padding: 0 11px;
    border: 1px solid rgba(255, 216, 78, .72);
    color: #171207;
    background: linear-gradient(180deg, #ffe879, #ffd23a);
}

    .traffic-filter-apply:hover[b-dzcafa11e0] {
        filter: brightness(1.04);
    }


/* =========================================================
   СТАТУСЫ
   ========================================================= */

.peer-online[b-dzcafa11e0] {
    color: #58e98a;
    font-weight: 700;
    text-shadow: 0 0 9px rgba(74, 235, 130, .10);
}

.peer-offline[b-dzcafa11e0] {
    color: #7b868c;
}


/* =========================================================
   ALERT / СЛУЖЕБНЫЕ СОСТОЯНИЯ
   ========================================================= */

.alert[b-dzcafa11e0] {
    border-radius: 10px;
}

.alert-warning[b-dzcafa11e0],
.alert-secondary[b-dzcafa11e0] {
    border-color: rgba(255, 205, 41, .32);
    color: #dce2e5;
    background: rgba(7, 13, 15, .92);
}

.alert-danger[b-dzcafa11e0] {
    border-color: rgba(255, 91, 80, .42);
    color: #ffd6d2;
    background: rgba(30, 9, 8, .91);
}

.alert-success[b-dzcafa11e0] {
    border-color: rgba(64, 232, 175, .38);
    color: #bdf6e1;
    background: rgba(4, 24, 18, .91);
}


/* =========================================================
   АДАПТИВ
   ========================================================= */

@media (max-width: 1280px) {
    .traffic-summary[b-dzcafa11e0] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .traffic-summary[b-dzcafa11e0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .traffic-summary[b-dzcafa11e0] {
        grid-template-columns: 1fr;
    }

    .traffic-period-row[b-dzcafa11e0] {
        align-items: flex-start;
        flex-direction: column;
    }

    .traffic-subtitle[b-dzcafa11e0] {
        font-size: 1rem;
    }

    .traffic-card[b-dzcafa11e0] {
        min-height: 108px;
    }
}

/* =========================================================
   TRAFFIC — MOBILE V2
   Только мобильная версия. Десктоп не затрагивается.
   ========================================================= */

@media (max-width: 900px) {

    /* =====================================================
       ЗАГОЛОВОК
       На мобильном убираем отрицательный desktop-margin
       и опускаем блок ниже фиксированной верхней панели.
       ===================================================== */

    .traffic-header[b-dzcafa11e0] {
        display: block;
        margin: 0 0 1rem !important;
        padding-top: 2rem !important;
    }

    .traffic-header > div[b-dzcafa11e0] {
        gap: .7rem !important;
    }

    .traffic-title[b-dzcafa11e0] {
        margin: 0 !important;
        font-size: clamp(2.6rem, 12vw, 3.5rem) !important;
        line-height: 1.08 !important;
    }

    .traffic-subtitle[b-dzcafa11e0] {
        margin: 0 !important;
        font-size: .92rem !important;
        line-height: 1.28 !important;
    }


    /* =====================================================
       ПЕРИОД
       Компактная панель, кнопки 3 x 2.
       ===================================================== */

    .traffic-period-panel[b-dzcafa11e0] {
        margin-bottom: 1rem !important;
        padding: 12px !important;
        border: 1px solid rgba(255, 205, 41, .38);
        border-radius: 14px;
        background:
            radial-gradient(circle at 88% 8%, rgba(255, 194, 0, .08), transparent 34%),
            linear-gradient(180deg, rgba(5, 11, 13, .92), rgba(3, 9, 11, .88));
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.012),
            0 12px 28px rgba(0,0,0,.22);
    }

    .traffic-period-row[b-dzcafa11e0] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .traffic-period-label[b-dzcafa11e0] {
        margin: 0 !important;
        font-size: .82rem !important;
    }

    .traffic-period-buttons[b-dzcafa11e0] {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px !important;
    }

    .traffic-period-button[b-dzcafa11e0] {
        width: 100%;
        min-width: 0 !important;
        min-height: 39px !important;
        padding: 0 6px !important;
        font-size: .75rem !important;
        border-radius: 9px !important;
    }

    .traffic-refreshing[b-dzcafa11e0] {
        font-size: .68rem !important;
    }


    /* =====================================================
       СВОДНЫЕ КАРТОЧКИ
       Первые четыре — 2x2, "Всего" — на всю ширину.
       ===================================================== */

    .traffic-summary[b-dzcafa11e0] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        margin-bottom: 1rem !important;
    }

    .traffic-card[b-dzcafa11e0] {
        min-width: 0 !important;
        min-height: 102px !important;
        gap: 9px !important;
        padding: 13px 11px !important;
        border-radius: 13px !important;
        align-items: center !important;
    }

    .traffic-card:last-child[b-dzcafa11e0] {
        grid-column: 1 / -1;
        min-height: 90px !important;
    }

    .traffic-card-icon[b-dzcafa11e0] {
        width: 29px !important;
        height: 29px !important;
        flex: 0 0 29px !important;
    }

    .traffic-card-icon svg[b-dzcafa11e0] {
        width: 27px !important;
        height: 27px !important;
    }

    .traffic-card-title[b-dzcafa11e0] {
        font-size: .70rem !important;
        line-height: 1.1 !important;
    }

    .traffic-card-value[b-dzcafa11e0] {
        margin-top: .28rem !important;
        font-size: 1.13rem !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    .traffic-card-description[b-dzcafa11e0] {
        margin-top: .34rem !important;
        font-size: .60rem !important;
        line-height: 1.2 !important;
    }


    /* =====================================================
       ТАБЛИЦА
       На мобильном оставляем:
       1 Пользователь
       4 Статус
       6 Получено
       7 Передано
       8 Всего

       Скрываем:
       2 VPN IP
       3 Лимиты Мбит/с
       5 Handshake
       ===================================================== */

    .traffic-table-wrapper[b-dzcafa11e0] {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        padding: 5px 5px 8px !important;
        border-radius: 14px !important;
    }

    .traffic-table[b-dzcafa11e0] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        border-spacing: 0 4px !important;
    }

    .traffic-table th:nth-child(2)[b-dzcafa11e0],
    .traffic-table td:nth-child(2)[b-dzcafa11e0],
    .traffic-table th:nth-child(3)[b-dzcafa11e0],
    .traffic-table td:nth-child(3)[b-dzcafa11e0],
    .traffic-table th:nth-child(5)[b-dzcafa11e0],
    .traffic-table td:nth-child(5)[b-dzcafa11e0] {
        display: none !important;
    }

    .traffic-table th:nth-child(1)[b-dzcafa11e0],
    .traffic-table td:nth-child(1)[b-dzcafa11e0] {
        width: 30% !important;
    }

    .traffic-table th:nth-child(4)[b-dzcafa11e0],
    .traffic-table td:nth-child(4)[b-dzcafa11e0] {
        width: 16% !important;
    }

    .traffic-table th:nth-child(6)[b-dzcafa11e0],
    .traffic-table td:nth-child(6)[b-dzcafa11e0] {
        width: 18% !important;
    }

    .traffic-table th:nth-child(7)[b-dzcafa11e0],
    .traffic-table td:nth-child(7)[b-dzcafa11e0] {
        width: 18% !important;
    }

    .traffic-table th:nth-child(8)[b-dzcafa11e0],
    .traffic-table td:nth-child(8)[b-dzcafa11e0] {
        width: 18% !important;
    }


    /* Шапка таблицы */

    .traffic-table thead th[b-dzcafa11e0] {
        padding: 8px 2px 9px !important;
        font-size: .61rem !important;
        line-height: 1.05 !important;
        white-space: normal !important;
        vertical-align: middle !important;
        overflow: visible !important;
    }

    .traffic-table thead th > .d-flex[b-dzcafa11e0] {
        width: 100% !important;
        gap: 1px !important;
        justify-content: center !important;
    }

    .traffic-table thead th:first-child > .d-flex[b-dzcafa11e0] {
        justify-content: flex-start !important;
    }

    .traffic-sort-button[b-dzcafa11e0] {
        min-width: 0 !important;
        padding: 0 !important;
        font-size: .61rem !important;
        line-height: 1.05 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .traffic-table thead th:first-child .traffic-sort-button[b-dzcafa11e0] {
        text-align: left !important;
    }

    .traffic-filter-button[b-dzcafa11e0] {
        flex: 0 0 auto;
        padding: 0 1px !important;
        font-size: .55rem !important;
    }


    /* Строки */

    .traffic-table tbody td[b-dzcafa11e0] {
        min-width: 0 !important;
        padding: 9px 3px !important;
        font-size: .66rem !important;
        line-height: 1.16 !important;
        vertical-align: middle !important;
        overflow: hidden !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .traffic-table tbody td:first-child[b-dzcafa11e0] {
        padding-left: 7px !important;
        text-align: left !important;
    }

    .traffic-table tbody td:first-child .fw-semibold[b-dzcafa11e0] {
        display: block;
        max-width: 100%;
        overflow: hidden;
        font-size: .76rem !important;
        line-height: 1.12 !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .traffic-table tbody td:first-child .small.text-muted[b-dzcafa11e0] {
        display: block;
        max-width: 100%;
        overflow: hidden;
        font-size: .58rem !important;
        line-height: 1.12 !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .peer-online[b-dzcafa11e0],
    .peer-offline[b-dzcafa11e0] {
        display: inline-block;
        max-width: 100%;
        font-size: .62rem !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    .total-column[b-dzcafa11e0] {
        font-size: .67rem !important;
        font-weight: 700 !important;
        line-height: 1.12 !important;
    }


    /* Фильтры должны открываться внутри экрана телефона */

    .traffic-filter-popover[b-dzcafa11e0] {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: 118px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100dvh - 145px);
        overflow-y: auto;
        z-index: 20000 !important;
    }
}


@media (max-width: 380px) {

    .traffic-header[b-dzcafa11e0] {
        padding-top: 1.7rem !important;
    }

    .traffic-title[b-dzcafa11e0] {
        font-size: 2.45rem !important;
    }

    .traffic-summary[b-dzcafa11e0] {
        gap: 7px !important;
    }

    .traffic-card[b-dzcafa11e0] {
        min-height: 96px !important;
        padding: 11px 9px !important;
    }

    .traffic-card-value[b-dzcafa11e0] {
        font-size: 1.02rem !important;
    }

    .traffic-table thead th[b-dzcafa11e0],
    .traffic-sort-button[b-dzcafa11e0] {
        font-size: .57rem !important;
    }

    .traffic-table tbody td[b-dzcafa11e0] {
        font-size: .62rem !important;
    }

    .traffic-table th:nth-child(1)[b-dzcafa11e0],
    .traffic-table td:nth-child(1)[b-dzcafa11e0] {
        width: 29% !important;
    }

    .traffic-table th:nth-child(4)[b-dzcafa11e0],
    .traffic-table td:nth-child(4)[b-dzcafa11e0] {
        width: 16% !important;
    }

    .traffic-table th:nth-child(6)[b-dzcafa11e0],
    .traffic-table td:nth-child(6)[b-dzcafa11e0],
    .traffic-table th:nth-child(7)[b-dzcafa11e0],
    .traffic-table td:nth-child(7)[b-dzcafa11e0] {
        width: 18% !important;
    }

    .traffic-table th:nth-child(8)[b-dzcafa11e0],
    .traffic-table td:nth-child(8)[b-dzcafa11e0] {
        width: 19% !important;
    }
}
/* /Components/Pages/VpnUsers.razor.rz.scp.css */
.speed-limit-picker[b-7uh4ww98cg] {
    position: relative;
    display: inline-block;
    min-width: 112px;
}

.speed-limit-trigger[b-7uh4ww98cg] {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 3px 2px;
    min-width: 108px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font: inherit;
    font-weight: 600;
    color: #202124;
    cursor: pointer;
    border-radius: 6px;
}

    .speed-limit-trigger:hover:not(:disabled)[b-7uh4ww98cg] {
        background: rgba(0, 0, 0, .035);
    }

    .speed-limit-trigger:disabled[b-7uh4ww98cg] {
        opacity: .58;
        cursor: default;
    }

.speed-limit-chevron[b-7uh4ww98cg] {
    font-size: 18px;
    line-height: 1;
    color: #4f5965;
    transform: translateY(-2px);
}

.speed-limit-screen[b-7uh4ww98cg] {
    position: fixed;
    inset: 0;
    z-index: 1098;
}

.speed-limit-menu[b-7uh4ww98cg] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 1099;
    width: 150px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #aeb4bb;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 9px 24px rgba(0, 0, 0, .14);
}

.speed-limit-option[b-7uh4ww98cg] {
    appearance: none;
    width: calc(100% - 18px);
    margin: 0 9px;
    padding: 9px 10px;
    border: 0;
    border-bottom: 1px solid #b7bcc2;
    background: #fff;
    text-align: left;
    font: inherit;
    color: #202124;
    cursor: pointer;
}

    .speed-limit-option:last-child[b-7uh4ww98cg] {
        border-bottom: 0;
    }

    .speed-limit-option:hover[b-7uh4ww98cg] {
        background: #f2f4f7;
    }

    .speed-limit-option.selected[b-7uh4ww98cg] {
        width: 100%;
        margin: 0;
        padding-left: 19px;
        background: #4772d1;
        color: #fff;
        border-bottom-color: transparent;
    }

.speed-limit-mini-spinner[b-7uh4ww98cg] {
    width: 13px;
    height: 13px;
    border: 2px solid #c7ccd3;
    border-top-color: #4772d1;
    border-radius: 50%;
    animation: speedLimitSpin-b-7uh4ww98cg .65s linear infinite;
}

@keyframes speedLimitSpin-b-7uh4ww98cg {
    to {
        transform: rotate(360deg);
    }
}


/* Уведомление о применении лимита */

.speed-limit-toast-layer[b-7uh4ww98cg] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.speed-limit-toast[b-7uh4ww98cg] {
    min-width: 190px;
    padding: 20px 24px 18px;
    background: rgba(255, 255, 255, .97);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .20);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    animation: speedLimitToastIn-b-7uh4ww98cg .18s ease-out, speedLimitToastOut-b-7uh4ww98cg .28s ease-in 1.08s forwards;
}

.speed-limit-toast-icon[b-7uh4ww98cg] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    animation: speedLimitIconPop-b-7uh4ww98cg .32s cubic-bezier(.2, .8, .3, 1.35);
}

.speed-limit-toast.success .speed-limit-toast-icon[b-7uh4ww98cg] {
    color: #fff;
    background: #26a65b;
}

.speed-limit-toast.error .speed-limit-toast-icon[b-7uh4ww98cg] {
    color: #fff;
    background: #d84b4b;
}

.speed-limit-toast-text[b-7uh4ww98cg] {
    font-size: 15px;
    font-weight: 600;
    color: #2e3338;
    text-align: center;
}

@keyframes speedLimitToastIn-b-7uh4ww98cg {
    from {
        opacity: 0;
        transform: scale(.86);
    }

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

@keyframes speedLimitIconPop-b-7uh4ww98cg {
    0% {
        transform: scale(.25);
    }

    65% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes speedLimitToastOut-b-7uh4ww98cg {
    to {
        opacity: 0;
        transform: scale(.94);
    }
}

/* =========================================================
   NINJA VPN — ПОЛЬЗОВАТЕЛИ VPN
   ========================================================= */


/* =========================================================
   ШАПКА СТРАНИЦЫ
   ========================================================= */

.vpn-users-header[b-7uh4ww98cg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 22px;
}


.vpn-users-title[b-7uh4ww98cg] {
    margin: 0;
    color: #ffffff;
    font-family: "Segoe Print", "Brush Script MT", cursive;
    font-size: clamp(2rem, 3vw, 3.45rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.65), 0 0 26px rgba(255, 180, 0, 0.10);
}


/* =========================================================
   КНОПКА ДОБАВЛЕНИЯ ПОЛЬЗОВАТЕЛЯ
   ========================================================= */

.vpn-add-user-button[b-7uh4ww98cg] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border: 1px solid #ffd53a;
    border-radius: 9px;
    color: #171208;
    background: linear-gradient( 180deg, #ffe568 0%, #ffc928 100% );
    font-size: 0.96rem;
    font-weight: 800;
    box-shadow: 0 0 18px rgba(255, 196, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.20);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}


    .vpn-add-user-button:hover[b-7uh4ww98cg] {
        color: #171208;
        filter: brightness(1.05);
        transform: translateY(-1px);
        box-shadow: 0 0 23px rgba(255, 196, 0, 0.22), 0 10px 22px rgba(0, 0, 0, 0.24);
    }


.vpn-add-user-plus[b-7uh4ww98cg] {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
}


/* =========================================================
   ВНЕШНИЙ БЛОК ТАБЛИЦЫ
   ========================================================= */

.vpn-users-table-wrapper[b-7uh4ww98cg] {
    position: relative;
    width: 100%;
    padding: 8px 13px 13px;
    overflow: visible;
    border: 1px solid rgba(255, 206, 34, 0.80);
    border-radius: 15px;
    background: radial-gradient( circle at 78% 10%, rgba(255, 183, 0, 0.055), transparent 28% ), linear-gradient( 180deg, rgba(5, 11, 13, 0.78), rgba(4, 9, 11, 0.73) );
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: inset 0 0 0 1px rgba(255, 213, 45, 0.025), 0 15px 38px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   ТАБЛИЦА
   ========================================================= */

.vpn-users-table[b-7uh4ww98cg] {
    width: 100%;
    margin: 0;
    color: #edf1f2;
    border-collapse: separate;
    border-spacing: 0 4px;
    background: transparent;
}


    /* Убираем Bootstrap-фоны */

    .vpn-users-table > :not(caption) > * > *[b-7uh4ww98cg] {
        box-shadow: none !important;
    }


    /* =========================================================
   ШАПКА ТАБЛИЦЫ
   ========================================================= */

    .vpn-users-table thead th[b-7uh4ww98cg] {
        padding: 9px 12px 10px;
        border: 0;
        border-bottom: 1px solid rgba(255, 206, 38, 0.25);
        background: rgba(5, 10, 12, 0.42);
        color: #ffd63e;
        vertical-align: middle;
        white-space: nowrap;
    }


        /*
   Bootstrap сейчас задаёт text-dark для кнопок заголовков.
   Здесь принудительно приводим их к нашему золотому стилю.
*/

        .vpn-users-table thead th button.btn-link[b-7uh4ww98cg],
        .vpn-users-table thead th button.text-dark[b-7uh4ww98cg] {
            color: #ffd63e !important;
            font-weight: 700 !important;
            text-shadow: 0 0 8px rgba(255, 199, 0, 0.10);
            background: transparent !important;
        }


        /* Стрелки фильтров */

        .vpn-users-table thead th .btn-sm[b-7uh4ww98cg] {
            color: #ffd63e !important;
            opacity: 0.88;
            background: transparent !important;
        }


            .vpn-users-table thead th .btn-sm:hover[b-7uh4ww98cg] {
                opacity: 1;
                color: #ffe985 !important;
            }


    /* =========================================================
   СТРОКИ
   ========================================================= */

    .vpn-users-table tbody td[b-7uh4ww98cg] {
        padding: 10px 12px;
        color: #edf1f2;
        vertical-align: middle;
        border-top: 1px solid rgba(255, 255, 255, 0.045);
        border-bottom: 1px solid rgba(255, 255, 255, 0.045);
        background: linear-gradient( 90deg, rgba(15, 21, 22, 0.82), rgba(10, 15, 17, 0.72) );
        transition: background 0.15s ease, border-color 0.15s ease;
    }


    .vpn-users-table tbody tr:hover td[b-7uh4ww98cg] {
        background: linear-gradient( 90deg, rgba(27, 29, 25, 0.90), rgba(15, 19, 19, 0.82) );
        border-color: rgba(255, 207, 38, 0.12);
    }


    /* Скругление каждой строки */

    .vpn-users-table tbody td:first-child[b-7uh4ww98cg] {
        border-left: 1px solid rgba(255, 255, 255, 0.055);
        border-radius: 9px 0 0 9px;
    }


    .vpn-users-table tbody td:last-child[b-7uh4ww98cg] {
        border-right: 1px solid rgba(255, 255, 255, 0.055);
        border-radius: 0 9px 9px 0;
    }


    /* =========================================================
   ПОЛЬЗОВАТЕЛЬ
   ========================================================= */

    .vpn-users-table .user-info > .fw-semibold[b-7uh4ww98cg] {
        color: #f5f7f7;
        font-size: 0.96rem;
        font-weight: 700 !important;
    }


    .vpn-users-table .user-info .text-muted[b-7uh4ww98cg] {
        color: rgba(190, 201, 207, 0.65) !important;
    }


    .vpn-users-table .edit-link[b-7uh4ww98cg] {
        padding: 0 2px !important;
        color: #e9c737;
        font-size: 0.78rem;
        text-decoration: underline;
    }


        .vpn-users-table .edit-link:hover[b-7uh4ww98cg] {
            color: #ffe363;
        }


        .vpn-users-table .edit-link.text-danger[b-7uh4ww98cg] {
            color: #e06b60 !important;
        }


            .vpn-users-table .edit-link.text-danger:hover[b-7uh4ww98cg] {
                color: #ff8a7f !important;
            }


    /* =========================================================
   VPN IP
   ========================================================= */

    /* =========================================================
    CONF — ПРОСМОТР СОХРАНЁННОЙ КОНФИГУРАЦИИ
    ========================================================= */

    .vpn-user-actions-row[b-7uh4ww98cg] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }


    .vpn-user-conf-link[b-7uh4ww98cg] {
        appearance: none;
        min-width: 34px;
        padding: 1px 2px;
        border: 0;
        outline: 0;
        color: rgba(174, 184, 190, 0.72);
        background: transparent;
        font: inherit;
        font-size: .72rem;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none;
        text-align: right;
        cursor: pointer;
        transition: color .16s ease, text-shadow .16s ease, opacity .16s ease;
    }


        .vpn-user-conf-link:hover:not(.is-disabled)[b-7uh4ww98cg] {
            color: #e8edf0;
            text-shadow: 0 0 8px rgba(255, 214, 62, 0.15);
        }


        .vpn-user-conf-link.is-disabled[b-7uh4ww98cg] {
            color: rgba(126, 137, 143, 0.30);
            cursor: default;
            user-select: none;
        }


    .vpn-stored-config-layer[b-7uh4ww98cg] {
        position: fixed;
        inset: 0;
        z-index: 12050;
        background: transparent;
    }


    .vpn-stored-config-panel[b-7uh4ww98cg] {
        position: fixed;
        left: 0;
        top: 0;
        width: min(620px, calc(100vw - 24px));
        max-height: min(650px, calc(100vh - 24px));
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 20px 22px 22px;
        overflow: hidden;
        border: 1px solid rgba(255, 205, 41, 0.55);
        border-radius: 15px;
        background: radial-gradient(circle at 90% 5%, rgba(255, 188, 0, 0.075), transparent 27%), linear-gradient(180deg, rgba(7, 13, 15, 0.985), rgba(3, 8, 10, 0.99));
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 24px 65px rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(255, 255, 255, 0.018);
        opacity: 0;
        overscroll-behavior: contain;
        will-change: transform, opacity;
    }


        .vpn-stored-config-panel.is-positioning[b-7uh4ww98cg] {
            visibility: hidden;
            pointer-events: none;
            animation: none;
            overscroll-behavior: contain;
        }


    .vpn-stored-config-panel.is-positioned[b-7uh4ww98cg] {
        visibility: visible;
        pointer-events: auto;
        animation: vpnStoredConfigOpen-b-7uh4ww98cg .22s cubic-bezier(.18, .82, .25, 1) both;
    }


    @keyframes vpnStoredConfigOpen-b-7uh4ww98cg {
        from {
            opacity: 0;
            transform: scale(.78);
        }

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


    .vpn-stored-config-header[b-7uh4ww98cg] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
    }


    .vpn-stored-config-eyebrow[b-7uh4ww98cg] {
        margin-bottom: 4px;
        color: rgba(255, 211, 55, 0.66);
        font-size: .67rem;
        font-weight: 800;
        letter-spacing: .13em;
    }


    .vpn-stored-config-header h3[b-7uh4ww98cg] {
        margin: 0;
        color: #f4f6f7;
        font-size: 1.16rem;
        font-weight: 750;
    }


    .vpn-stored-config-close[b-7uh4ww98cg] {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid rgba(255, 205, 41, 0.28);
        border-radius: 9px;
        color: #c9d0d4;
        background: rgba(5, 10, 12, 0.78);
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
        transition: .16s ease;
    }


        .vpn-stored-config-close:hover[b-7uh4ww98cg] {
            color: #ffd941;
            border-color: rgba(255, 210, 54, 0.60);
            background: rgba(255, 198, 0, 0.06);
        }


    .vpn-stored-config-actions[b-7uh4ww98cg] {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
    }


    [b-7uh4ww98cg] .vpn-stored-config-button {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 13px;
        border: 1px solid rgba(255, 205, 41, 0.46);
        border-radius: 9px;
        color: #e7c63b;
        background: rgba(5, 11, 13, 0.74);
        font-size: .78rem;
        font-weight: 700;
        text-decoration: none !important;
        cursor: pointer;
        transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
    }


        [b-7uh4ww98cg] .vpn-stored-config-button:hover {
            color: #171207;
            border-color: #ffe66f;
            background: #ffd63c;
            transform: translateY(-1px);
        }


    .vpn-stored-config-text[b-7uh4ww98cg] {
        width: 100%;
        min-height: 270px;
        max-height: 470px;
        padding: 14px 16px;
        resize: vertical;
        overflow: auto;
        overscroll-behavior: contain;
        outline: none;
        border: 1px solid rgba(255, 204, 36, 0.19);
        border-radius: 10px;
        color: #dce3e6;
        background: rgba(2, 7, 9, 0.94);
        font-family: Consolas, "Cascadia Mono", monospace;
        font-size: .78rem;
        line-height: 1.48;
        white-space: pre;
        scrollbar-color: rgba(205, 158, 34, 0.70) rgba(2, 7, 9, 0.4);
    }


    .vpn-stored-config-error[b-7uh4ww98cg] {
        padding: 12px 14px;
        border: 1px solid rgba(255, 95, 79, 0.32);
        border-radius: 9px;
        color: #ff8d83;
        background: rgba(110, 24, 18, 0.12);
        font-size: .84rem;
    }


    .vpn-users-table tbody td:nth-child(2)[b-7uh4ww98cg] {
        color: #eef2f3;
        white-space: nowrap;
    }


    /* =========================================================
   ЛИМИТЫ — ЦЕНТРИРУЕМ ВЕСЬ СТОЛБЕЦ
   ========================================================= */

    .vpn-users-table th:nth-child(3)[b-7uh4ww98cg],
    .vpn-users-table td:nth-child(3)[b-7uh4ww98cg] {
        text-align: center;
    }


        .vpn-users-table th:nth-child(3) > div[b-7uh4ww98cg] {
            justify-content: center;
        }


    /*
   Сам контрол больше не тянется вправо.
*/

    .vpn-users-table .speed-limit-picker[b-7uh4ww98cg] {
        display: inline-flex;
        justify-content: center;
        min-width: 82px;
        position: relative;
    }


    .vpn-users-table .speed-limit-trigger[b-7uh4ww98cg] {
        min-width: 78px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 4px 7px;
        border: 0;
        color: #f3f5f5;
        background: transparent;
    }

    .vpn-users-table .speed-limit-chevron[b-7uh4ww98cg] {
        color: #aab6bd;
        font-size: 1rem;
        transform: none;
    }


    /* =========================================================
   ONLINE / OFFLINE
   ========================================================= */

    .vpn-users-table .status-online[b-7uh4ww98cg] {
        color: #50e879 !important;
        font-weight: 700 !important;
        text-shadow: 0 0 8px rgba(80, 232, 121, 0.14);
    }


    .vpn-users-table .status-offline[b-7uh4ww98cg] {
        color: #aab4ba;
    }


    /* =========================================================
   ОСТАЛЬНЫЕ ЧИСЛОВЫЕ СТОЛБЦЫ
   ========================================================= */

    .vpn-users-table tbody td:nth-child(5)[b-7uh4ww98cg],
    .vpn-users-table tbody td:nth-child(6)[b-7uh4ww98cg],
    .vpn-users-table tbody td:nth-child(7)[b-7uh4ww98cg] {
        color: #edf1f2;
    }


    /* =========================================================
   ВЫПАДАЮЩИЙ СПИСОК ЛИМИТА
   ========================================================= */

    .vpn-users-table .speed-limit-menu[b-7uh4ww98cg] {
        width: 150px;
        left: 50%;
        transform: translateX(-50%);
        overflow: hidden;
        border: 1px solid rgba(255, 207, 42, 0.42);
        border-radius: 0 0 14px 14px;
        background: rgba(7, 12, 14, 0.98);
        box-shadow: 0 14px 35px rgba(0, 0, 0, 0.48);
    }


    .vpn-users-table .speed-limit-option[b-7uh4ww98cg] {
        width: calc(100% - 18px);
        margin: 0 9px;
        padding: 9px 10px;
        border: 0;
        border-bottom: 1px solid rgba(255, 207, 42, 0.14);
        color: #dce3e6;
        background: transparent;
        text-align: center;
    }


        .vpn-users-table .speed-limit-option:hover[b-7uh4ww98cg] {
            color: #ffd942;
            background: rgba(255, 194, 0, 0.08);
        }


        .vpn-users-table .speed-limit-option.selected[b-7uh4ww98cg] {
            width: 100%;
            margin: 0;
            padding: 9px 10px;
            color: #171208;
            background: linear-gradient( 180deg, #ffe66a, #ffc82c );
            font-weight: 800;
        }


/* =========================================================
   ОКНА ФИЛЬТРОВ В ШАПКЕ
   ========================================================= */

/*
   У тебя сами фильтры имеют Bootstrap bg-white.
   Перекрашиваем только те, которые находятся в таблице.
*/

.vpn-users-table-wrapper .position-absolute.bg-white[b-7uh4ww98cg] {
    color: #e8edef !important;
    border-color: rgba(255, 205, 38, 0.35) !important;
    background: rgba(8, 13, 15, 0.98) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45) !important;
}


    .vpn-users-table-wrapper .position-absolute.bg-white .border-top[b-7uh4ww98cg] {
        border-color: rgba(255, 205, 38, 0.13) !important;
    }


    .vpn-users-table-wrapper .position-absolute.bg-white .text-muted[b-7uh4ww98cg] {
        color: #89969e !important;
    }


    .vpn-users-table-wrapper .position-absolute.bg-white .form-control[b-7uh4ww98cg],
    .vpn-users-table-wrapper .position-absolute.bg-white .form-select[b-7uh4ww98cg] {
        color: #eef2f3;
        border-color: rgba(255, 205, 38, 0.24);
        background: #0b1113;
    }


        .vpn-users-table-wrapper .position-absolute.bg-white .form-control:focus[b-7uh4ww98cg],
        .vpn-users-table-wrapper .position-absolute.bg-white .form-select:focus[b-7uh4ww98cg] {
            border-color: #ffd43b;
            box-shadow: 0 0 0 2px rgba(255, 212, 59, 0.10);
        }


    /* Сбросить */

    .vpn-users-table-wrapper .position-absolute.bg-white .btn-link[b-7uh4ww98cg] {
        color: #d2b630 !important;
    }


    /* Применить */

    .vpn-users-table-wrapper .position-absolute.bg-white .btn-primary[b-7uh4ww98cg] {
        color: #171208;
        border-color: #ffd63b;
        background: linear-gradient( 180deg, #ffe569, #ffc82b );
    }


/* =========================================================
   АДАПТИВ
   ========================================================= */

@media (max-width: 1100px) {

    .vpn-users-table-wrapper[b-7uh4ww98cg] {
        overflow-x: auto;
    }


    .vpn-users-table[b-7uh4ww98cg] {
        min-width: 1050px;
    }
}
/* =========================================================
   ВЫРАВНИВАНИЕ СТОЛБЦОВ VPN
   ========================================================= */

/*
   1 — Пользователь
   2 — VPN IP
   3 — Лимиты
   4 — Статус
   5 — Handshake
   6 — Получено
   7 — Передано
*/


/* VPN IP */
.vpn-users-table th:nth-child(2)[b-7uh4ww98cg],
.vpn-users-table td:nth-child(2)[b-7uh4ww98cg],
/* Статус */
.vpn-users-table th:nth-child(4)[b-7uh4ww98cg],
.vpn-users-table td:nth-child(4)[b-7uh4ww98cg],
/* Handshake */
.vpn-users-table th:nth-child(5)[b-7uh4ww98cg],
.vpn-users-table td:nth-child(5)[b-7uh4ww98cg],
/* Получено */
.vpn-users-table th:nth-child(6)[b-7uh4ww98cg],
.vpn-users-table td:nth-child(6)[b-7uh4ww98cg],
/* Передано */
.vpn-users-table th:nth-child(7)[b-7uh4ww98cg],
.vpn-users-table td:nth-child(7)[b-7uh4ww98cg] {
    text-align: center;
}


    /* Центрируем содержимое заголовков,
   потому что внутри TH у нас flex-контейнер */

    .vpn-users-table th:nth-child(2) > div[b-7uh4ww98cg],
    .vpn-users-table th:nth-child(4) > div[b-7uh4ww98cg],
    .vpn-users-table th:nth-child(5) > div[b-7uh4ww98cg],
    .vpn-users-table th:nth-child(6) > div[b-7uh4ww98cg],
    .vpn-users-table th:nth-child(7) > div[b-7uh4ww98cg] {
        justify-content: center;
    }


/* =========================================================
   ЛИМИТЫ
   ========================================================= */

.vpn-users-table th:nth-child(3)[b-7uh4ww98cg],
.vpn-users-table td:nth-child(3)[b-7uh4ww98cg] {
    text-align: center;
}

    .vpn-users-table th:nth-child(3) > div[b-7uh4ww98cg] {
        justify-content: center;
    }


/* Заголовок Лимиты / Мбит/с */

.limit-column-title[b-7uh4ww98cg] {
    display: inline-block;
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
}

/* =========================================================
   NINJA VPN
   ФОРМА ДОБАВЛЕНИЯ ПОЛЬЗОВАТЕЛЯ
   ========================================================= */

.add-user-panel[b-7uh4ww98cg] {
    position: relative;
    width: min(760px, 100%);
    margin: 6px 0 26px;
    padding: 22px 24px 24px;
    overflow: visible;
    border: 1px solid rgba(255, 205, 44, 0.58);
    border-radius: 15px;
    background: radial-gradient( circle at 88% 8%, rgba(255, 184, 0, 0.08), transparent 28% ), linear-gradient( 180deg, rgba(7, 13, 15, 0.88), rgba(4, 9, 11, 0.91) );
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015), 0 16px 38px rgba(0, 0, 0, 0.30);
}


/* =========================================================
   ЗАГОЛОВОК ФОРМЫ
   ========================================================= */

.add-user-header[b-7uh4ww98cg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}


    .add-user-header h4[b-7uh4ww98cg] {
        margin: 0;
        color: #f5f7f8;
        font-size: 1.28rem;
        font-weight: 700;
        letter-spacing: 0.01em;
    }


/* =========================================================
   КНОПКА ЗАКРЫТЬ
   ========================================================= */

.add-user-close-button[b-7uh4ww98cg] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    padding: 0;
    border: 1px solid rgba(255, 207, 47, 0.28);
    border-radius: 9px;
    outline: none;
    color: #dce2e5;
    background: rgba(255, 255, 255, 0.035);
    font-size: 1.45rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}


    .add-user-close-button:hover:not(:disabled)[b-7uh4ww98cg] {
        color: #ffd941;
        border-color: rgba(255, 210, 54, 0.62);
        background: rgba(255, 198, 0, 0.07);
        box-shadow: 0 0 14px rgba(255, 195, 0, 0.08);
        transform: translateY(-1px);
    }


    .add-user-close-button:disabled[b-7uh4ww98cg] {
        opacity: 0.38;
        cursor: default;
    }


/* =========================================================
   ПОЛЯ
   ========================================================= */

.add-user-fields[b-7uh4ww98cg] {
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}


.add-user-field[b-7uh4ww98cg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.add-user-label[b-7uh4ww98cg] {
    color: #dce3e6;
    font-size: 0.91rem;
    font-weight: 600;
}


.add-user-input[b-7uh4ww98cg] {
    width: 100%;
    height: 46px;
    padding: 0 15px;
    border: 1px solid rgba(255, 202, 37, 0.28);
    border-radius: 9px;
    outline: none;
    color: #f1f4f5;
    background: rgba(3, 9, 11, 0.72);
    font-size: 0.96rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.01);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}


    .add-user-input:hover:not(:disabled)[b-7uh4ww98cg] {
        border-color: rgba(255, 210, 53, 0.48);
    }


    .add-user-input:focus[b-7uh4ww98cg] {
        border-color: #ffd63b;
        background: rgba(4, 10, 12, 0.88);
        box-shadow: 0 0 0 3px rgba(255, 210, 55, 0.07), 0 0 18px rgba(255, 191, 0, 0.07);
    }


    .add-user-input:disabled[b-7uh4ww98cg] {
        opacity: 0.55;
        cursor: not-allowed;
    }


    /* Плейсхолдеры:
   Например: Ivanov Iphone
   Например: Временный доступ */

    .add-user-input[b-7uh4ww98cg]::placeholder {
        color: rgba(184, 196, 202, 0.43);
        font-style: italic;
        opacity: 1;
    }


/* =========================================================
   КНОПКИ
   ========================================================= */

.add-user-actions[b-7uh4ww98cg] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}


.add-user-action[b-7uh4ww98cg] {
    min-width: 135px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 9px;
    outline: none;
    font-size: 0.94rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}


    .add-user-action:hover:not(:disabled)[b-7uh4ww98cg] {
        transform: translateY(-1px);
    }


    .add-user-action:disabled[b-7uh4ww98cg] {
        opacity: 0.46;
        cursor: not-allowed;
        transform: none;
    }


/* Отмена */

.add-user-action-cancel[b-7uh4ww98cg] {
    color: #c4ced3;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.035);
}


    .add-user-action-cancel:hover:not(:disabled)[b-7uh4ww98cg] {
        color: #ffffff;
        border-color: rgba(255, 206, 44, 0.38);
        background: rgba(255, 200, 0, 0.055);
        box-shadow: 0 0 14px rgba(255, 193, 0, 0.06);
    }


/* Создать / Готово */

.add-user-action-create[b-7uh4ww98cg] {
    color: #171207;
    border: 1px solid #ffda48;
    background: linear-gradient( 180deg, #ffe773 0%, #ffd03e 48%, #eeb826 100% );
    box-shadow: 0 0 16px rgba(255, 194, 0, 0.12), 0 7px 18px rgba(0, 0, 0, 0.20);
}


    .add-user-action-create:hover:not(:disabled)[b-7uh4ww98cg] {
        color: #100d04;
        filter: brightness(1.055);
        box-shadow: 0 0 22px rgba(255, 198, 0, 0.18), 0 9px 21px rgba(0, 0, 0, 0.24);
    }


/* =========================================================
   ИНДИКАТОР СОЗДАНИЯ
   ========================================================= */

.add-user-create-spinner[b-7uh4ww98cg] {
    width: 15px;
    height: 15px;
    display: inline-block;
    border: 2px solid rgba(25, 19, 4, 0.26);
    border-top-color: #171207;
    border-radius: 50%;
    animation: addUserSpinner-b-7uh4ww98cg 0.75s linear infinite;
}


@keyframes addUserSpinner-b-7uh4ww98cg {

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   СОЗДАННЫЙ ПОЛЬЗОВАТЕЛЬ
   ========================================================= */

.add-user-panel .alert-success[b-7uh4ww98cg] {
    color: #dffcf4;
    border: 1px solid rgba(38, 224, 184, 0.28);
    background: rgba(16, 92, 76, 0.24);
}


.add-user-panel .alert-danger[b-7uh4ww98cg] {
    color: #ffd7d3;
    border: 1px solid rgba(255, 96, 80, 0.31);
    background: rgba(105, 28, 23, 0.28);
}


/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================= */

@media (max-width: 760px) {

    .add-user-panel[b-7uh4ww98cg] {
        width: 100%;
        padding: 18px 16px 20px;
    }


    .add-user-fields[b-7uh4ww98cg] {
        max-width: 100%;
    }


    .add-user-actions[b-7uh4ww98cg] {
        flex-direction: column;
        align-items: stretch;
    }


    .add-user-action[b-7uh4ww98cg] {
        width: 100%;
    }
}

/* =========================================================
   ФОРМА СОЗДАНИЯ ПОЛЬЗОВАТЕЛЯ
   ========================================================= */

.add-user-workspace[b-7uh4ww98cg] {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    flex-wrap: wrap;
    margin: 8px 0 26px;
}

    .add-user-workspace.has-config[b-7uh4ww98cg] {
        flex-wrap: nowrap;
    }

.add-user-panel[b-7uh4ww98cg] {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 205, 44, 0.58);
    border-radius: 16px;
    background: radial-gradient(circle at 88% 8%, rgba(255, 184, 0, 0.08), transparent 28%), linear-gradient(180deg, rgba(7, 13, 15, 0.88), rgba(4, 9, 11, 0.91));
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015), 0 16px 38px rgba(0, 0, 0, 0.30);
}

.add-user-form-panel[b-7uh4ww98cg] {
    width: min(760px, 100%);
    padding: 22px 24px 24px;
}

.add-user-workspace.has-config .add-user-form-panel[b-7uh4ww98cg] {
    width: 470px;
    min-width: 470px;
}

.add-user-config-panel[b-7uh4ww98cg] {
    flex: 1 1 auto;
    min-width: 560px;
    padding: 22px 24px 24px;
}

.add-user-header[b-7uh4ww98cg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.add-user-config-header[b-7uh4ww98cg] {
    margin-bottom: 16px;
}

.add-user-header h4[b-7uh4ww98cg] {
    margin: 0;
    color: #f5f7f8;
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.add-user-close-button[b-7uh4ww98cg] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    padding: 0;
    border: 1px solid rgba(255, 207, 47, 0.28);
    border-radius: 9px;
    outline: none;
    color: #dce2e5;
    background: rgba(255, 255, 255, 0.035);
    font-size: 1.45rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .add-user-close-button:hover:not(:disabled)[b-7uh4ww98cg] {
        color: #ffd941;
        border-color: rgba(255, 210, 54, 0.62);
        background: rgba(255, 198, 0, 0.07);
        box-shadow: 0 0 14px rgba(255, 195, 0, 0.08);
        transform: translateY(-1px);
    }

    .add-user-close-button:disabled[b-7uh4ww98cg] {
        opacity: 0.38;
        cursor: default;
    }

.add-user-fields[b-7uh4ww98cg] {
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.add-user-field[b-7uh4ww98cg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.add-user-label[b-7uh4ww98cg] {
    color: #dce3e6;
    font-size: 0.91rem;
    font-weight: 600;
}

.add-user-input[b-7uh4ww98cg] {
    width: 100%;
    height: 46px;
    padding: 0 15px;
    border: 1px solid rgba(255, 202, 37, 0.28);
    border-radius: 9px;
    outline: none;
    color: #f1f4f5;
    background: rgba(3, 9, 11, 0.72);
    font-size: 0.96rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.01);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

    .add-user-input:hover:not(:disabled)[b-7uh4ww98cg] {
        border-color: rgba(255, 210, 53, 0.48);
    }

    .add-user-input:focus[b-7uh4ww98cg] {
        border-color: #ffd63b;
        background: rgba(4, 10, 12, 0.88);
        box-shadow: 0 0 0 3px rgba(255, 210, 55, 0.07), 0 0 18px rgba(255, 191, 0, 0.07);
    }

    .add-user-input:disabled[b-7uh4ww98cg] {
        color: #8f989d;
        background: rgba(58, 64, 68, 0.20);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: none;
        cursor: not-allowed;
    }

    .add-user-input[b-7uh4ww98cg]::placeholder {
        color: rgba(184, 196, 202, 0.43);
        font-style: italic;
        opacity: 1;
    }

.add-user-actions[b-7uh4ww98cg] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.add-user-action[b-7uh4ww98cg] {
    min-width: 135px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 9px;
    outline: none;
    font-size: 0.94rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .add-user-action:hover:not(:disabled)[b-7uh4ww98cg] {
        transform: translateY(-1px);
    }

    .add-user-action:disabled[b-7uh4ww98cg] {
        opacity: 0.46;
        cursor: not-allowed;
        transform: none;
    }

.add-user-action-cancel[b-7uh4ww98cg] {
    color: #c4ced3;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.035);
}

    .add-user-action-cancel:hover:not(:disabled)[b-7uh4ww98cg] {
        color: #ffffff;
        border-color: rgba(255, 206, 44, 0.38);
        background: rgba(255, 200, 0, 0.055);
        box-shadow: 0 0 14px rgba(255, 193, 0, 0.06);
    }

.add-user-action-create[b-7uh4ww98cg] {
    color: #171207;
    border: 1px solid #ffda48;
    background: linear-gradient(180deg, #ffe773 0%, #ffd03e 48%, #eeb826 100%);
    box-shadow: 0 0 16px rgba(255, 194, 0, 0.12), 0 7px 18px rgba(0, 0, 0, 0.20);
}

    .add-user-action-create:hover:not(:disabled)[b-7uh4ww98cg] {
        color: #100d04;
        filter: brightness(1.055);
        box-shadow: 0 0 22px rgba(255, 198, 0, 0.18), 0 9px 21px rgba(0, 0, 0, 0.24);
    }

.add-user-create-spinner[b-7uh4ww98cg] {
    width: 15px;
    height: 15px;
    display: inline-block;
    border: 2px solid rgba(25, 19, 4, 0.26);
    border-top-color: #171207;
    border-radius: 50%;
    animation: addUserSpinner-b-7uh4ww98cg 0.75s linear infinite;
}

@keyframes addUserSpinner-b-7uh4ww98cg {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   ПРАВАЯ ПАНЕЛЬ С КОНФИГОМ
   ========================================================= */

.add-user-config-panel .form-label[b-7uh4ww98cg] {
    color: #dce3e6;
    font-weight: 600;
}

.add-user-config-panel .client-config[b-7uh4ww98cg] {
    min-height: 320px;
    color: #eff3f5;
    background: rgba(3, 9, 11, 0.82);
    border: 1px solid rgba(255, 202, 37, 0.20);
}

    .add-user-config-panel .client-config:focus[b-7uh4ww98cg] {
        box-shadow: none;
        border-color: rgba(255, 202, 37, 0.28);
    }

/* =========================================================
   ЦЕНТРАЛЬНАЯ АНИМАЦИЯ УСПЕХА
   ========================================================= */

.vpn-created-toast[b-7uh4ww98cg] {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.vpn-created-toast-card[b-7uh4ww98cg] {
    min-width: 360px;
    max-width: 520px;
    padding: 22px 26px;
    border: 1px solid rgba(71, 228, 163, 0.35);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(10, 31, 23, 0.95), rgba(7, 24, 18, 0.95));
    box-shadow: 0 0 28px rgba(50, 225, 153, 0.15), 0 18px 42px rgba(0, 0, 0, 0.34);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: vpnToastPop-b-7uh4ww98cg 0.28s ease;
}

.vpn-created-toast-icon[b-7uh4ww98cg] {
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(76, 255, 178, 0.22), rgba(24, 153, 92, 0.18));
    box-shadow: 0 0 22px rgba(72, 243, 165, 0.20), inset 0 0 18px rgba(255, 255, 255, 0.04);
    animation: vpnCheckPulse-b-7uh4ww98cg 0.45s ease;
}

    .vpn-created-toast-icon svg[b-7uh4ww98cg] {
        width: 34px;
        height: 34px;
        stroke: #55f1a8;
        stroke-width: 2.6;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.vpn-created-toast-text[b-7uh4ww98cg] {
    color: #eefaf3;
    font-size: 1.08rem;
    font-weight: 700;
    text-align: center;
}

@keyframes vpnToastPop-b-7uh4ww98cg {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes vpnCheckPulse-b-7uh4ww98cg {
    0% {
        transform: scale(0.75);
        opacity: 0.4;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* =========================================================
   ALERT STYLE
   ========================================================= */

.add-user-panel .alert-danger[b-7uh4ww98cg] {
    color: #ffd7d3;
    border: 1px solid rgba(255, 96, 80, 0.31);
    background: rgba(105, 28, 23, 0.28);
}

/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================= */

@media (max-width: 1280px) {
    .add-user-workspace.has-config[b-7uh4ww98cg] {
        flex-wrap: wrap;
    }

        .add-user-workspace.has-config .add-user-form-panel[b-7uh4ww98cg] {
            width: min(760px, 100%);
            min-width: 0;
        }

    .add-user-config-panel[b-7uh4ww98cg] {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 760px) {
    .add-user-form-panel[b-7uh4ww98cg],
    .add-user-config-panel[b-7uh4ww98cg] {
        width: 100%;
        min-width: 0;
        padding: 18px 16px 20px;
    }

    .add-user-fields[b-7uh4ww98cg] {
        max-width: 100%;
    }

    .add-user-actions[b-7uh4ww98cg] {
        flex-direction: column;
        align-items: stretch;
    }

    .add-user-action[b-7uh4ww98cg] {
        width: 100%;
    }

    .vpn-created-toast-card[b-7uh4ww98cg] {
        min-width: 0;
        width: calc(100% - 28px);
        padding: 20px 18px;
    }
}

/* =========================================================
   СОЗДАНИЕ VPN-ПОЛЬЗОВАТЕЛЯ
   ========================================================= */

.add-user-workspace[b-7uh4ww98cg] {
    width: min(100%, 1320px);
    display: grid;
    grid-template-columns: minmax(0, 760px);
    align-items: start;
    gap: 18px;
    margin: 18px 0 24px;
}

    .add-user-workspace.with-config[b-7uh4ww98cg] {
        grid-template-columns: minmax(0, 600px) minmax(520px, 1fr);
    }


/* =========================================================
   ЛЕВАЯ ФОРМА
   ========================================================= */

.add-user-panel[b-7uh4ww98cg] {
    width: 100%;
    padding: 22px 26px 24px;
    border: 1px solid rgba(255, 205, 45, 0.45);
    border-radius: 16px;
    background: radial-gradient( circle at 85% 8%, rgba(255, 186, 0, 0.07), transparent 30% ), linear-gradient( 180deg, rgba(6, 12, 14, 0.91), rgba(3, 8, 10, 0.94) );
    backdrop-filter: blur(7px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.015), 0 15px 35px rgba(0,0,0,0.30);
}


.add-user-header[b-7uh4ww98cg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}


    .add-user-header h4[b-7uh4ww98cg] {
        margin: 0;
        color: #f7f9fa;
        font-size: 1.25rem;
        font-weight: 700;
    }


/* =========================================================
   КНОПКА X
   ========================================================= */

.close-button[b-7uh4ww98cg] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 207, 47, 0.28);
    border-radius: 8px;
    color: #d1d7da;
    background: rgba(8, 13, 15, 0.70);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}


    .close-button:hover:not(:disabled)[b-7uh4ww98cg] {
        color: #ffd43a;
        border-color: rgba(255, 207, 47, 0.65);
        background: rgba(255, 194, 0, 0.06);
    }


/* =========================================================
   ПОЛЯ
   ========================================================= */

.add-user-fields[b-7uh4ww98cg] {
    max-width: 610px;
}


.add-user-field[b-7uh4ww98cg] {
    margin-bottom: 20px;
}


    .add-user-field .form-label[b-7uh4ww98cg] {
        display: block;
        margin-bottom: 8px;
        color: #d2d8dc;
        font-size: 0.94rem;
        font-weight: 600;
    }


.add-user-input[b-7uh4ww98cg] {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid rgba(255, 204, 36, 0.28);
    border-radius: 9px;
    color: #f4f7f8;
    background: rgba(4, 10, 12, 0.84);
    box-shadow: none !important;
}


    /* ПЛЕЙСХОЛДЕРЫ КУРСИВОМ */

    .add-user-input[b-7uh4ww98cg]::placeholder {
        color: #707b81;
        font-style: italic;
        opacity: 1;
    }


    .add-user-input:focus[b-7uh4ww98cg] {
        color: #ffffff;
        border-color: #ffd43a;
        background: rgba(4, 10, 12, 0.94);
        box-shadow: 0 0 0 3px rgba(255, 205, 41, 0.08) !important;
    }


    /* После создания пользователь уже не может менять данные */

    .add-user-input:disabled[b-7uh4ww98cg] {
        color: #8c969c !important;
        background: rgba(9, 14, 16, 0.62) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        opacity: 1;
    }


/* =========================================================
   КНОПКИ ОТМЕНА / СОЗДАТЬ
   ========================================================= */

.add-user-actions[b-7uh4ww98cg] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}


.ninja-cancel-button[b-7uh4ww98cg],
.ninja-create-button[b-7uh4ww98cg],
[b-7uh4ww98cg] .ninja-config-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    border-radius: 9px;
    font-size: 0.90rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}


/* ОТМЕНА */

.ninja-cancel-button[b-7uh4ww98cg] {
    border: 1px solid rgba(177, 190, 198, 0.32);
    color: #bdc7cc;
    background: rgba(7, 12, 14, 0.72);
}


    .ninja-cancel-button:hover:not(:disabled)[b-7uh4ww98cg] {
        color: #ffffff;
        border-color: rgba(255, 210, 55, 0.45);
        background: rgba(255, 194, 0, 0.05);
    }


/* СОЗДАТЬ / ГОТОВО */

.ninja-create-button[b-7uh4ww98cg] {
    min-width: 112px;
    border: 1px solid #ffe16a;
    color: #171207;
    background: linear-gradient( 180deg, #ffe879 0%, #ffd23a 52%, #e4ae16 100% );
    box-shadow: 0 0 17px rgba(255, 190, 0, 0.13);
}


    .ninja-create-button:hover:not(:disabled)[b-7uh4ww98cg] {
        transform: translateY(-1px);
        box-shadow: 0 0 24px rgba(255, 194, 0, 0.22);
    }


    .ninja-create-button:disabled[b-7uh4ww98cg],
    .ninja-cancel-button:disabled[b-7uh4ww98cg] {
        cursor: default;
        opacity: 0.45;
    }


/* =========================================================
   ЗАБЛОКИРОВАННАЯ ФОРМА
   ========================================================= */

.user-created-lock[b-7uh4ww98cg] {
    margin-top: 21px;
    color: #818d93;
    font-size: 0.82rem;
    font-style: italic;
}


/* =========================================================
   ПРАВАЯ ПАНЕЛЬ КОНФИГУРАЦИИ
   ========================================================= */

.client-config-panel[b-7uh4ww98cg] {
    min-width: 0;
    padding: 22px 24px 24px;
    border: 1px solid rgba(255, 205, 45, 0.45);
    border-radius: 16px;
    background: radial-gradient( circle at 80% 5%, rgba(255, 188, 0, 0.06), transparent 32% ), linear-gradient( 180deg, rgba(6, 12, 14, 0.92), rgba(3, 8, 10, 0.95) );
    backdrop-filter: blur(7px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.30);
}


.client-config-header h4[b-7uh4ww98cg] {
    margin: 0 0 18px;
    color: #f7f9fa;
    font-size: 1.25rem;
    font-weight: 700;
}


.client-config-warning[b-7uh4ww98cg] {
    margin-bottom: 18px;
    color: #aab4b9;
    font-size: 0.83rem;
    line-height: 1.45;
}


.config-actions[b-7uh4ww98cg] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}


[b-7uh4ww98cg] .ninja-config-button {
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(255, 205, 41, 0.52);
    color: #f4ce3d;
    background: rgba(5, 11, 13, 0.72);
    font-size: 0.80rem;
}


    [b-7uh4ww98cg] .ninja-config-button:hover {
        color: #171207;
        background: #ffd63c;
        border-color: #ffe670;
        text-decoration: none;
    }


.client-config-box label[b-7uh4ww98cg] {
    display: block;
    margin-bottom: 7px;
    color: #bec7cc;
    font-size: 0.82rem;
}


.client-config[b-7uh4ww98cg] {
    color: #dbe2e5 !important;
    background: rgba(2, 7, 9, 0.92) !important;
    border: 1px solid rgba(255, 204, 36, 0.18) !important;
    font-family: Consolas, monospace;
    font-size: 0.79rem;
    resize: vertical;
}


.config-done-actions[b-7uh4ww98cg] {
    margin-top: 18px;
}


/* =========================================================
   ЦЕНТРАЛЬНОЕ УВЕДОМЛЕНИЕ
   ========================================================= */

.speed-limit-toast-layer[b-7uh4ww98cg] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: transparent;
}


.speed-limit-toast[b-7uh4ww98cg] {
    min-width: 350px;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 27px 34px;
    border-radius: 18px;
    background: rgba(5, 12, 13, 0.94);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 55px rgba(0,0,0,0.55);
    animation: ninjaToastIn-b-7uh4ww98cg 0.25s ease-out;
}


    .speed-limit-toast.success[b-7uh4ww98cg] {
        border: 1px solid rgba(53, 238, 180, 0.48);
    }


    .speed-limit-toast.error[b-7uh4ww98cg] {
        border: 1px solid rgba(255, 92, 80, 0.55);
    }


.speed-limit-toast-icon[b-7uh4ww98cg] {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 50%;
    font-size: 2.65rem;
    font-weight: 700;
    animation: ninjaCheckPop-b-7uh4ww98cg 0.35s ease-out;
}


.speed-limit-toast.success .speed-limit-toast-icon[b-7uh4ww98cg] {
    color: #48efb9;
    border: 3px solid #48efb9;
    box-shadow: 0 0 24px rgba(72, 239, 185, 0.25);
}


.speed-limit-toast.error .speed-limit-toast-icon[b-7uh4ww98cg] {
    color: #ff6258;
    border: 3px solid #ff6258;
}


.speed-limit-toast-text[b-7uh4ww98cg] {
    color: #f4f8f7;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}


@keyframes ninjaToastIn-b-7uh4ww98cg {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


@keyframes ninjaCheckPop-b-7uh4ww98cg {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }

    70% {
        transform: scale(1.12);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}


/* =========================================================
   АДАПТАЦИЯ
   ========================================================= */

@media (max-width: 1200px) {

    .add-user-workspace.with-config[b-7uh4ww98cg] {
        grid-template-columns: 1fr;
        max-width: 760px;
    }
}


@media (max-width: 700px) {

    .add-user-workspace[b-7uh4ww98cg] {
        width: 100%;
    }

    .add-user-panel[b-7uh4ww98cg],
    .client-config-panel[b-7uh4ww98cg] {
        padding: 18px;
    }

    .add-user-fields[b-7uh4ww98cg] {
        max-width: none;
    }

    .add-user-actions[b-7uh4ww98cg] {
        flex-wrap: wrap;
    }

    .speed-limit-toast[b-7uh4ww98cg] {
        min-width: 0;
        width: calc(100% - 30px);
    }
}

/* =========================================================
   QR MODAL
========================================================= */

.qr-modal-overlay[b-7uh4ww98cg] {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2, 7, 10, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: qrOverlayFadeIn-b-7uh4ww98cg 0.2s ease;
}

.qr-modal-window[b-7uh4ww98cg] {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 24px 24px 20px;
    border: 1px solid rgba(255, 205, 45, 0.38);
    border-radius: 24px;
    background: radial-gradient(circle at top right, rgba(255, 194, 0, 0.10), transparent 30%), linear-gradient(180deg, rgba(7, 13, 15, 0.97), rgba(5, 10, 12, 0.98));
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    animation: qrModalPopIn-b-7uh4ww98cg 0.22s ease;
}

.qr-modal-close[b-7uh4ww98cg] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 205, 45, 0.35);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: #f7d44a;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: 0.18s ease;
}

    .qr-modal-close:hover[b-7uh4ww98cg] {
        border-color: rgba(255, 215, 70, 0.7);
        background: rgba(255, 205, 45, 0.08);
        color: #ffe37a;
        box-shadow: 0 0 16px rgba(255, 205, 45, 0.16);
    }

.qr-modal-title[b-7uh4ww98cg] {
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 1.55rem;
    font-weight: 700;
    text-align: center;
}

.qr-modal-subtitle[b-7uh4ww98cg] {
    margin-bottom: 18px;
    color: #aeb8be;
    font-size: 0.95rem;
    text-align: center;
    line-height: 1.45;
}

.qr-modal-card[b-7uh4ww98cg] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border: 1px solid rgba(255, 205, 45, 0.16);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.015);
}

.qr-modal-image[b-7uh4ww98cg] {
    display: block;
    width: min(100%, 420px);
    height: auto;
    padding: 14px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.qr-modal-actions[b-7uh4ww98cg] {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

    /* Если у тебя уже есть .config-action-button,
   этот блок можно оставить — он только чуть выровняет стиль */
    .qr-modal-actions .config-action-button[b-7uh4ww98cg] {
        min-width: 148px;
        justify-content: center;
    }

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes qrOverlayFadeIn-b-7uh4ww98cg {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes qrModalPopIn-b-7uh4ww98cg {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {
    .qr-modal-overlay[b-7uh4ww98cg] {
        padding: 14px;
    }

    .qr-modal-window[b-7uh4ww98cg] {
        width: 100%;
        padding: 18px 16px 16px;
        border-radius: 20px;
    }

    .qr-modal-title[b-7uh4ww98cg] {
        font-size: 1.3rem;
    }

    .qr-modal-subtitle[b-7uh4ww98cg] {
        font-size: 0.9rem;
    }

    .qr-modal-image[b-7uh4ww98cg] {
        width: 100%;
        max-width: 100%;
        padding: 10px;
        border-radius: 18px;
    }

    .qr-modal-actions[b-7uh4ww98cg] {
        flex-direction: column;
    }

        .qr-modal-actions .config-action-button[b-7uh4ww98cg] {
            width: 100%;
        }
}


/* =========================================================
   NINJA VPN — РЕДАКТИРОВАНИЕ ПОЛЬЗОВАТЕЛЯ
   Кнопки "Сохранить" / "Отмена"
   ========================================================= */

.vpn-users-table .edit-buttons[b-7uh4ww98cg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 5px;
}

.vpn-users-table .vpn-edit-save-button[b-7uh4ww98cg],
.vpn-users-table .vpn-edit-cancel-button[b-7uh4ww98cg] {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 7px;
    outline: none;
    font: inherit;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* Сохранить — золотая кнопка Ninja VPN */
.vpn-users-table .vpn-edit-save-button[b-7uh4ww98cg] {
    border: 1px solid #ffe16a;
    color: #171207;
    background: linear-gradient( 180deg, #ffe879 0%, #ffd23a 52%, #e4ae16 100% );
    box-shadow: 0 0 13px rgba(255, 194, 0, .10), 0 5px 12px rgba(0, 0, 0, .18);
}

/* Отмена — тёмная кнопка */
.vpn-users-table .vpn-edit-cancel-button[b-7uh4ww98cg] {
    border: 1px solid rgba(185, 195, 201, .28);
    color: #aeb8bd;
    background: rgba(5, 11, 13, .76);
}

    .vpn-users-table .vpn-edit-save-button:hover[b-7uh4ww98cg],
    .vpn-users-table .vpn-edit-cancel-button:hover[b-7uh4ww98cg] {
        transform: translateY(-1px);
    }

.vpn-users-table .vpn-edit-save-button:hover[b-7uh4ww98cg] {
    filter: brightness(1.055);
    box-shadow: 0 0 18px rgba(255, 194, 0, .16), 0 7px 15px rgba(0, 0, 0, .20);
}

.vpn-users-table .vpn-edit-cancel-button:hover[b-7uh4ww98cg] {
    color: #f0d458;
    border-color: rgba(255, 210, 55, .48);
    background: rgba(255, 199, 0, .045);
}

.vpn-users-table .vpn-edit-save-button:active[b-7uh4ww98cg],
.vpn-users-table .vpn-edit-cancel-button:active[b-7uh4ww98cg] {
    transform: translateY(1px) scale(.97);
}


/* =========================================================
   NINJA VPN — РАЗМЕРЫ В СТОЛБЦЕ "ЛИМИТЫ Мбит/с"

   МЕНЯТЬ РАЗМЕРЫ НУЖНО ЗДЕСЬ:

   1) ∞
      font-size: 2rem;

   2) 10 Мбит/с, 20 Мбит/с и т.д.
      font-size: 1rem;
   ========================================================= */

/* Знак бесконечности — в 2 раза крупнее обычного текста */
.vpn-users-table .speed-limit-trigger > .vpn-limit-infinity[b-7uh4ww98cg] {
    font-size: 1.2rem !important;
    font-weight: 800;
    line-height: .82;
}

/* Числовое значение лимита — такого же размера, как текст в таблице */
.vpn-users-table .speed-limit-trigger > .vpn-limit-value[b-7uh4ww98cg] {
    font-size: 1rem !important;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* =========================================================
   MOBILE VPN USERS — PHONE LAYOUT V2
   Только мобильная версия. Десктопные стили не меняются.
   ========================================================= */

@media (max-width: 760px) {

    /* ---------- Заголовок страницы ---------- */

    .vpn-users-header[b-7uh4ww98cg] {
        gap: 14px;
        margin-bottom: 16px;
    }

    .vpn-users-title[b-7uh4ww98cg] {
        font-size: clamp(2rem, 10vw, 2.75rem);
        line-height: 1.02;
    }

    .vpn-add-user-button[b-7uh4ww98cg] {
        width: 100%;
        min-height: 46px;
        justify-content: center;
        padding-left: 14px;
        padding-right: 14px;
    }


    /* ---------- Таблица: оставляем только 4 колонки ---------- */

    .vpn-users-table-wrapper[b-7uh4ww98cg] {
        width: 100%;
        min-width: 0;
        padding: 6px;
        overflow: visible !important;
        border-radius: 13px;
    }

    .vpn-users-table[b-7uh4ww98cg] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed;
        border-spacing: 0 5px;
    }

    /*
       1 — Пользователь
       2 — VPN IP          скрываем
       3 — Лимиты
       4 — Статус
       5 — Handshake
       6 — Получено        скрываем
       7 — Передано        скрываем
    */

    .vpn-users-table th:nth-child(2)[b-7uh4ww98cg],
    .vpn-users-table td:nth-child(2)[b-7uh4ww98cg],
    .vpn-users-table th:nth-child(6)[b-7uh4ww98cg],
    .vpn-users-table td:nth-child(6)[b-7uh4ww98cg],
    .vpn-users-table th:nth-child(7)[b-7uh4ww98cg],
    .vpn-users-table td:nth-child(7)[b-7uh4ww98cg] {
        display: none !important;
    }

    .vpn-users-table th:nth-child(1)[b-7uh4ww98cg],
    .vpn-users-table td:nth-child(1)[b-7uh4ww98cg] {
        width: 38%;
    }

    .vpn-users-table th:nth-child(3)[b-7uh4ww98cg],
    .vpn-users-table td:nth-child(3)[b-7uh4ww98cg] {
        width: 17%;
    }

    .vpn-users-table th:nth-child(4)[b-7uh4ww98cg],
    .vpn-users-table td:nth-child(4)[b-7uh4ww98cg] {
        width: 20%;
    }

    .vpn-users-table th:nth-child(5)[b-7uh4ww98cg],
    .vpn-users-table td:nth-child(5)[b-7uh4ww98cg] {
        width: 25%;
    }


    /* ---------- Шапка таблицы ---------- */

    .vpn-users-table thead th[b-7uh4ww98cg] {
        padding: 8px 2px 9px !important;
        overflow: visible;
        font-size: .68rem;
        line-height: 1.05;
        white-space: normal !important;
    }

    .vpn-users-table thead th > div[b-7uh4ww98cg] {
        width: 100%;
        gap: 0 !important;
        justify-content: center !important;
    }

    .vpn-users-table thead th:first-child > div[b-7uh4ww98cg] {
        justify-content: flex-start !important;
    }

    .vpn-users-table thead th button.btn-link[b-7uh4ww98cg],
    .vpn-users-table thead th button.text-dark[b-7uh4ww98cg] {
        min-width: 0;
        padding: 0 !important;
        font-size: .68rem !important;
        line-height: 1.05;
        white-space: normal;
        text-align: center;
    }

    .vpn-users-table thead th:first-child button.btn-link[b-7uh4ww98cg] {
        text-align: left;
    }

    .vpn-users-table thead th .btn-sm[b-7uh4ww98cg] {
        min-width: 18px;
        padding: 0 1px !important;
        font-size: .62rem !important;
    }

    .limit-column-title[b-7uh4ww98cg] {
        white-space: normal;
        line-height: 1.03;
    }


    /* ---------- Строки ---------- */

    .vpn-users-table tbody td[b-7uh4ww98cg] {
        min-width: 0;
        padding: 9px 4px !important;
        font-size: .75rem;
        line-height: 1.18;
        overflow: visible;
    }

    .vpn-users-table tbody td:first-child[b-7uh4ww98cg] {
        padding-left: 7px !important;
    }

    .vpn-users-table tbody td:last-child[b-7uh4ww98cg] {
        padding-right: 5px !important;
    }


    /* ---------- Пользователь ---------- */

    .vpn-users-table .user-info[b-7uh4ww98cg] {
        min-width: 0;
    }

    .vpn-users-table .user-info > .fw-semibold[b-7uh4ww98cg] {
        max-width: 100%;
        overflow: hidden;
        color: #f6f8f8;
        font-size: .83rem;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vpn-users-table .user-info .small.text-muted[b-7uh4ww98cg] {
        max-width: 100%;
        overflow: hidden;
        margin-top: 2px;
        font-size: .63rem !important;
        line-height: 1.12;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vpn-users-table .user-info .d-flex[b-7uh4ww98cg] {
        gap: 4px !important;
        margin-top: 4px !important;
        flex-wrap: wrap;
    }

    .vpn-users-table .edit-link[b-7uh4ww98cg] {
        padding: 0 1px !important;
        font-size: .64rem;
        line-height: 1.1;
    }

    .vpn-users-table .edit-user input[b-7uh4ww98cg] {
        min-width: 0;
        height: 32px;
        padding: 4px 6px;
        font-size: .70rem;
    }

    .vpn-users-table .edit-buttons[b-7uh4ww98cg] {
        gap: 4px;
    }

    .vpn-users-table .vpn-edit-save-button[b-7uh4ww98cg],
    .vpn-users-table .vpn-edit-cancel-button[b-7uh4ww98cg] {
        min-height: 28px;
        padding: 0 7px;
        font-size: .64rem;
    }


    /* ---------- Лимит ---------- */

    .vpn-users-table .speed-limit-picker[b-7uh4ww98cg] {
        min-width: 0 !important;
        width: 100%;
        justify-content: center;
    }

    .vpn-users-table .speed-limit-trigger[b-7uh4ww98cg] {
        width: 100%;
        min-width: 0 !important;
        justify-content: center;
        gap: 3px;
        padding: 4px 1px;
        font-size: .72rem;
        white-space: nowrap;
    }

    .vpn-users-table .speed-limit-trigger > span:first-child[b-7uh4ww98cg],
    .vpn-users-table .vpn-limit-infinity[b-7uh4ww98cg] {
        font-size: .88rem !important;
    }

    .vpn-users-table .speed-limit-chevron[b-7uh4ww98cg] {
        font-size: .75rem;
    }

    .vpn-users-table .speed-limit-menu[b-7uh4ww98cg] {
        width: 136px;
        max-height: min(390px, 62dvh);
        overflow-y: auto;
    }

    .vpn-users-table .speed-limit-option[b-7uh4ww98cg] {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: .74rem;
    }


    /* ---------- Статус ---------- */

    .vpn-users-table .status-online[b-7uh4ww98cg],
    .vpn-users-table .status-offline[b-7uh4ww98cg] {
        display: inline-block;
        max-width: 100%;
        font-size: .69rem !important;
        line-height: 1.1;
        white-space: nowrap;
    }


    /* ---------- Handshake ---------- */

    .vpn-users-table td:nth-child(5)[b-7uh4ww98cg] {
        padding-left: 2px !important;
        padding-right: 2px !important;
        font-size: .68rem;
        line-height: 1.12;
        overflow-wrap: anywhere;
        word-break: normal;
        white-space: normal;
    }


    /* ---------- Окна фильтров ---------- */

    .vpn-users-table-wrapper .position-absolute.bg-white[b-7uh4ww98cg] {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: 118px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        z-index: 20000 !important;
    }


    /* =====================================================
       QR MODAL — компактно для iPhone
       ===================================================== */

    .qr-modal-overlay[b-7uh4ww98cg] {
        z-index: 99990 !important;
        align-items: center;
        justify-content: center;
        padding:
            max(12px, env(safe-area-inset-top))
            12px
            max(12px, env(safe-area-inset-bottom));
        overflow: hidden;
        background: rgba(2, 7, 10, .78);
    }

    .qr-modal-window[b-7uh4ww98cg] {
        width: min(360px, calc(100vw - 24px)) !important;
        max-width: min(360px, calc(100vw - 24px)) !important;
        max-height: calc(100dvh - 24px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 15px 12px 13px;
        border-radius: 18px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .qr-modal-close[b-7uh4ww98cg] {
        top: 9px;
        right: 9px;
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 1.25rem;
    }

    .qr-modal-title[b-7uh4ww98cg] {
        margin: 1px 40px 8px;
        font-size: 1.08rem;
        line-height: 1.15;
    }

    .qr-app-switch-row[b-7uh4ww98cg] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px;
        margin-top: 6px;
    }

    .qr-app-switch-label[b-7uh4ww98cg] {
        grid-column: 1 / -1;
        width: 100%;
        margin-bottom: 1px;
        font-size: .72rem;
        line-height: 1.2;
        text-align: center;
    }

    .qr-app-switch-button[b-7uh4ww98cg] {
        width: 100%;
        min-width: 0;
        min-height: 36px;
        gap: 5px;
        padding: 0 7px;
        border-radius: 9px;
        font-size: .70rem;
    }

    .qr-app-switch-icon-shell[b-7uh4ww98cg] {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        border-radius: 6px;
    }

    .qr-app-switch-icon[b-7uh4ww98cg] {
        width: 18px;
        height: 18px;
    }

    .qr-modal-card[b-7uh4ww98cg] {
        width: min(292px, calc(100vw - 64px)) !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        max-width: none !important;
        margin: 10px auto 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;
    }

    .qr-modal-image[b-7uh4ww98cg] {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        object-fit: fill;
        border-radius: 14px !important;
    }

    .qr-modal-actions[b-7uh4ww98cg] {
        margin-top: 11px;
        display: flex;
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: 7px;
    }

    .qr-modal-actions .config-action-button[b-7uh4ww98cg] {
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 0;
        min-height: 36px;
        padding: 0 7px;
        font-size: .70rem;
        white-space: nowrap;
    }
}


/* Совсем узкие экраны */
@media (max-width: 380px) {

    .vpn-users-table th:nth-child(1)[b-7uh4ww98cg],
    .vpn-users-table td:nth-child(1)[b-7uh4ww98cg] {
        width: 36%;
    }

    .vpn-users-table th:nth-child(3)[b-7uh4ww98cg],
    .vpn-users-table td:nth-child(3)[b-7uh4ww98cg] {
        width: 18%;
    }

    .vpn-users-table th:nth-child(4)[b-7uh4ww98cg],
    .vpn-users-table td:nth-child(4)[b-7uh4ww98cg] {
        width: 20%;
    }

    .vpn-users-table th:nth-child(5)[b-7uh4ww98cg],
    .vpn-users-table td:nth-child(5)[b-7uh4ww98cg] {
        width: 26%;
    }

    .vpn-users-table thead th[b-7uh4ww98cg],
    .vpn-users-table thead th button.btn-link[b-7uh4ww98cg],
    .vpn-users-table thead th button.text-dark[b-7uh4ww98cg] {
        font-size: .63rem !important;
    }

    .vpn-users-table tbody td[b-7uh4ww98cg] {
        font-size: .70rem;
    }

    .qr-modal-card[b-7uh4ww98cg] {
        width: min(270px, calc(100vw - 58px)) !important;
    }
}

/* =========================================================
   MOBILE VPN USERS — V3 REFINEMENTS
   ========================================================= */

@media (max-width: 760px) {

    /* Значение лимита должно помещать и 100 Мбит/с без перегруза. */
    .vpn-users-table .vpn-limit-value[b-7uh4ww98cg] {
        display: inline-block;
        max-width: 100%;
        font-size: .69rem !important;
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: -.02em;
        white-space: nowrap;
    }

    .vpn-users-table .vpn-limit-infinity[b-7uh4ww98cg] {
        font-size: .69rem !important;
        font-weight: 600;
        letter-spacing: 0;
    }

    .vpn-users-table .speed-limit-trigger[b-7uh4ww98cg] {
        gap: 2px;
        padding-left: 0;
        padding-right: 0;
    }

    .vpn-users-table .speed-limit-chevron[b-7uh4ww98cg] {
        flex: 0 0 auto;
        font-size: .67rem;
        line-height: 1;
    }

    .qr-share-message[b-7uh4ww98cg] {
        margin-top: 10px;223
        padding: 8px 10px;
        border: 1px solid rgba(255, 205, 45, .24);
        border-radius: 9px;
        color: #d6dde0;
        background: rgba(4, 10, 12, .72);
        font-size: .70rem;
        line-height: 1.35;
        text-align: center;
    }
}

/* =========================================================
   MOBILE LIMIT FONT FIX V5
   Более специфичный селектор перекрывает старый desktop-rule
   с font-size: 1rem !important.
   ========================================================= */

@media (max-width: 760px) {

    .vpn-users-table .speed-limit-trigger > .vpn-limit-value[b-7uh4ww98cg] {
        font-size: .69rem !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        letter-spacing: -.02em !important;
        white-space: nowrap !important;
    }

    .vpn-users-table .speed-limit-trigger > .vpn-limit-infinity[b-7uh4ww98cg] {
        font-size: .69rem !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
    }
}


/* =========================================================
   СОХРАНЁННЫЙ CONFIG — МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================= */

@media (max-width: 760px) {
    .vpn-user-actions-row[b-7uh4ww98cg] {
        gap: 8px;
    }

    .vpn-user-conf-link[b-7uh4ww98cg] {
        min-width: 30px;
        font-size: .68rem;
    }

    .vpn-stored-config-panel[b-7uh4ww98cg] {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: 76vh;
        padding: 17px;
        border-radius: 14px;
    }

    .vpn-stored-config-text[b-7uh4ww98cg] {
        min-height: 250px;
        max-height: 50vh;
        font-size: .72rem;
        overscroll-behavior: contain;
    }
}


/* =========================================================
   BROWSER VPN
   ========================================================= */

.vpn-users-header-actions[b-7uh4ww98cg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.browser-vpn-header-button[b-7uh4ww98cg] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 9px;
    font-size: .92rem;
    font-weight: 800;
    transition: .16s ease;
}

.browser-vpn-header-button.install[b-7uh4ww98cg] {
    border: 1px solid rgba(255, 210, 58, .52);
    color: #f5d451;
    background: rgba(7, 13, 15, .80);
}

.browser-vpn-header-button.ready[b-7uh4ww98cg] {
    border: 1px solid rgba(95, 212, 139, .42);
    color: #d8f5e3;
    background: rgba(16, 64, 38, .30);
}

.browser-vpn-header-button:hover:not(:disabled)[b-7uh4ww98cg] {
    transform: translateY(-1px);
    border-color: #ffd53a;
    box-shadow: 0 0 20px rgba(255, 196, 0, .14);
}

.browser-vpn-header-button:disabled[b-7uh4ww98cg] {
    opacity: .52;
    cursor: default;
}

.browser-vpn-status-dot[b-7uh4ww98cg] {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #8f969a;
}

.browser-vpn-header-button.ready .browser-vpn-status-dot[b-7uh4ww98cg] {
    background: #59d88a;
    box-shadow: 0 0 9px rgba(89, 216, 138, .42);
}

.browser-vpn-header-button.install .browser-vpn-status-dot[b-7uh4ww98cg] {
    background: #ffd23b;
    box-shadow: 0 0 9px rgba(255, 210, 59, .35);
}

.browser-vpn-panel[b-7uh4ww98cg] {
    width: min(100%, 650px);
    margin: -4px 0 22px;
    padding: 20px 22px 22px;
    border: 1px solid rgba(255, 205, 44, .50);
    border-radius: 16px;
    background: radial-gradient(circle at 88% 8%, rgba(255, 184, 0, .07), transparent 30%), linear-gradient(180deg, rgba(7, 13, 15, .94), rgba(4, 9, 11, .97));
    box-shadow: 0 16px 38px rgba(0, 0, 0, .28);
}

.browser-vpn-panel-header[b-7uh4ww98cg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.browser-vpn-panel-header h4[b-7uh4ww98cg] {
    margin: 0;
    color: #f5f7f8;
    font-size: 1.18rem;
    font-weight: 750;
}

.browser-vpn-panel-server[b-7uh4ww98cg] {
    margin-top: 4px;
    color: #8d989e;
    font-size: .78rem;
}

.browser-vpn-panel-copy[b-7uh4ww98cg],
.browser-vpn-field-hint[b-7uh4ww98cg] {
    color: #9ba6ac;
    font-size: .82rem;
    line-height: 1.48;
}

.browser-vpn-panel-copy[b-7uh4ww98cg] {
    margin-bottom: 16px;
}

.browser-vpn-field-hint[b-7uh4ww98cg] {
    margin-top: 6px;
    font-size: .74rem;
}

.browser-vpn-panel-actions[b-7uh4ww98cg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.browser-vpn-code-card[b-7uh4ww98cg] {
    margin-top: 4px;
    padding: 16px;
    border: 1px solid rgba(255, 211, 62, .34);
    border-radius: 12px;
    background: rgba(255, 205, 40, .055);
}

.browser-vpn-code-label[b-7uh4ww98cg] {
    color: #9ca6ab;
    font-size: .72rem;
}

.browser-vpn-code[b-7uh4ww98cg] {
    margin-top: 6px;
    color: #ffe26c;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: .055em;
}

.browser-vpn-code-expiry[b-7uh4ww98cg] {
    margin-top: 7px;
    color: #818d93;
    font-size: .72rem;
}

.browser-vpn-panel-message[b-7uh4ww98cg] {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: .80rem;
    line-height: 1.4;
}

.browser-vpn-panel-message.success[b-7uh4ww98cg] {
    border: 1px solid rgba(84, 207, 132, .26);
    color: #bce8cd;
    background: rgba(33, 113, 66, .16);
}

.browser-vpn-panel-message.error[b-7uh4ww98cg] {
    border: 1px solid rgba(234, 98, 98, .28);
    color: #ffb1b1;
    background: rgba(126, 37, 37, .18);
}

@media (max-width: 760px) {
    .vpn-users-header-actions[b-7uh4ww98cg] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .browser-vpn-header-button[b-7uh4ww98cg] {
        width: 100%;
        min-height: 46px;
    }

    .browser-vpn-panel[b-7uh4ww98cg] {
        width: 100%;
        margin-top: 0;
        padding: 18px;
    }

    .browser-vpn-panel-actions > *[b-7uh4ww98cg] {
        flex: 1 1 100%;
    }

    .browser-vpn-code[b-7uh4ww98cg] {
        font-size: 1.02rem;
        word-break: break-all;
    }
}

/* Browser VPN marker for existing VPN users */
.browser-vpn-inline-badge[b-7uh4ww98cg] {
    display: inline-flex;
    align-items: center;
    margin-top: 5px;
    padding: 3px 7px;
    border: 1px solid rgba(255, 211, 55, .36);
    border-radius: 999px;
    color: #e5c64d;
    background: rgba(255, 196, 0, .06);
    font-size: .66rem;
    font-weight: 750;
    line-height: 1.15;
}
/* /Components/RoutingSetPicker.razor.rz.scp.css */
.ninja-route-picker[b-gmhavqr119] {display:flex;flex-direction:column;gap:8px;min-width:0;max-height:325px;overflow-y:auto;padding-right:3px}
.ninja-route-set[b-gmhavqr119] {border:1px solid #364146;border-radius:11px;background:#121b1e;overflow:hidden;color:#ecf0f0}
.ninja-route-set-top[b-gmhavqr119] {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px}
.ninja-route-select[b-gmhavqr119] {display:flex;gap:10px;align-items:center;min-width:0;cursor:pointer;flex:1}
.ninja-route-select input[b-gmhavqr119] {accent-color:#fbd34f;min-width:16px;width:16px;height:16px}
.ninja-route-set-title[b-gmhavqr119] {display:flex;flex-direction:column;gap:3px;min-width:0}
.ninja-route-set-title strong[b-gmhavqr119] {font-size:.85rem;overflow-wrap:anywhere}
.ninja-route-set-title small[b-gmhavqr119] {color:#a9b6b8;font-size:.74rem}
.ninja-route-view[b-gmhavqr119] {border:1px solid rgba(251,211,79,.35);color:#f5d366;background:transparent;border-radius:8px;padding:7px 10px;font-size:.76rem;font-weight:650;cursor:pointer}
.ninja-route-view:hover[b-gmhavqr119],.ninja-route-view:focus-visible[b-gmhavqr119] {border-color:#fbd34f;background:rgba(251,211,79,.08)}
.ninja-route-preview[b-gmhavqr119] {border-top:1px solid #344044;padding:10px 13px;max-height:220px;overflow-y:auto;color:#abb9bc;font-family:ui-monospace,Consolas,monospace;font-size:.78rem;line-height:1.75;overflow-wrap:anywhere;background:#0c1316}
.ninja-route-entry + .ninja-route-entry[b-gmhavqr119] {border-top:1px solid rgba(255,255,255,.04)}
.ninja-route-empty[b-gmhavqr119] {border:1px dashed #404a4e;border-radius:10px;padding:12px;color:#9eaaad;font-size:.8rem;line-height:1.5}
/* Shared routing set cards adapted to the Ninja routing editor visual system. */
.ninja-route-picker[b-gmhavqr119] {gap:6px;max-height:360px;}
.ninja-route-set[b-gmhavqr119] {border-color:rgba(223,231,227,.13);border-radius:9px;background:linear-gradient(105deg,#192125,#11191c);}
.ninja-route-set-top[b-gmhavqr119] {padding:10px 11px;}
.ninja-route-select[b-gmhavqr119] {gap:10px;}
.ninja-route-select input[b-gmhavqr119] {appearance:none;-webkit-appearance:none;min-width:18px;width:18px;height:18px;border-radius:5px;border:1px solid #667274;background:#182125;display:grid;place-content:center;cursor:pointer;}
.ninja-route-select input:checked[b-gmhavqr119] {background:#f4d47d;border-color:#f5d77e;}
.ninja-route-select input:checked[b-gmhavqr119]::before {content:'✓';font-size:.8rem;font-weight:900;color:#181c19;}
.ninja-route-set-title strong[b-gmhavqr119] {font-size:.8rem;}
.ninja-route-set-title small[b-gmhavqr119] {font-size:.7rem;color:#88cda7;}
.ninja-route-view[b-gmhavqr119] {border-color:rgba(255,255,255,.11);background:#212a2f;color:#bfc9cc;padding:7px 9px;}
.ninja-route-view:hover[b-gmhavqr119] {border-color:#efd17a;color:#ffdf83;}
.ninja-route-preview[b-gmhavqr119] {border-top-color:#323d40;}
.ninja-route-empty[b-gmhavqr119] {font-size:.75rem;}