/* =========================================================
   RUSTOFILYA — PORTAL
   Серверы, магазин, новости, обращения и формы
   ========================================================= */

.pn-page {
    --pn-bg: #101113;
    --pn-surface: #191b20;
    --pn-surface-raised: #212329;
    --pn-orange: #ff7547;
    --pn-text: #f4f2ee;
    --pn-muted: #96979f;
    --pn-line: rgba(255, 255, 255, 0.09);
    --pn-line-strong: rgba(255, 255, 255, 0.16);
    --pn-accent-rgb: 255, 117, 71;
    --pn-ease: cubic-bezier(.22, 1, .36, 1);

    min-width: 0;
    min-height: 72vh;
    padding: 40px 0 75px;
    background:
            radial-gradient(
                    ellipse at 90% 0,
                    rgba(var(--pn-accent-rgb), 0.045),
                    transparent 48%
            ),
            var(--pn-bg);
    color: var(--pn-text);
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* =========================================================
   БАЗА
   ========================================================= */

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

.pn-page [hidden] {
    display: none !important;
}

.pn-page :is(h1, h2, h3, p) {
    margin: 0;
}

.pn-page :is(h1, h2, h3) {
    font-family: inherit;
    text-wrap: balance;
}

.pn-page a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.pn-page button,
.pn-page input,
.pn-page textarea,
.pn-page select {
    font: inherit;
}

.pn-page button {
    cursor: pointer;
}

.pn-page button:disabled {
    cursor: not-allowed;
}

.pn-page :is(a, button, input, textarea, select):focus-visible {
    outline: 2px solid var(--pn-orange);
    outline-offset: 5px;
}

.pn-page ::selection {
    background: var(--pn-orange);
    color: var(--pn-bg);
}

.pn-container {
    display: grid;
    min-width: 0;
    width: min(1240px, calc(100% - 64px));
    margin-inline: auto;
    gap: 26px;
}

/* =========================================================
   ЗАГОЛОВКИ И ТЕКСТ
   ========================================================= */

.pn-page .pn-heading {
    position: relative;
    padding: 6px 0 17px;
}

.pn-page .pn-eyebrow {
    color: var(--pn-orange);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.8;
}

.pn-page h1 {
    margin-top: 15px;
    color: var(--pn-text);
    font-size: clamp(33px, 3.8vw, 49px);
    font-weight: 800;
    letter-spacing: -1.8px;
    line-height: 1.14;
}

.pn-page h1 > span {
    color: var(--pn-text);
}

.pn-page h1 em {
    color: var(--pn-orange);
    font-style: normal;
}

.pn-page h1 em > span {
    color: inherit;
}

.pn-page .pn-muted {
    color: var(--pn-muted);
    font-size: 12px;
    line-height: 1.9;
}

.pn-page .pn-heading > .pn-muted {
    max-width: 730px;
    margin-top: 16px;
    font-size: 14px;
}

.pn-page .pn-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.pn-page .pn-row-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 5px 0 21px;
}

.pn-page .pn-row-heading > div {
    min-width: 0;
}

.pn-page .pn-row-heading h2 {
    color: var(--pn-text);
    font-size: 27px;
    font-weight: 750;
    letter-spacing: -0.9px;
    line-height: 1.3;
}

.pn-page .pn-row-heading > a,
.pn-page .pn-text-link {
    color: #e0a080;
    font-size: 12px;
    line-height: 1.8;
}

.pn-page .pn-text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: color 0.2s;
}

/* =========================================================
   КНОПКИ И БЛИКИ
   ========================================================= */

.pn-page .pn-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 45px;
    padding: 12px 18px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--pn-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15px;
    line-height: 1.6;
    text-align: center;
    cursor: pointer;
    transition:
            transform 0.25s var(--pn-ease),
            background 0.25s,
            border-color 0.25s,
            box-shadow 0.25s;
}

.pn-page .pn-button::before {
    position: absolute;
    z-index: 2;
    top: -100%;
    bottom: -100%;
    left: -45%;
    width: 18%;
    content: "";
    background: linear-gradient(
            100deg,
            transparent,
            rgba(255, 255, 255, 0.6),
            transparent
    );
    opacity: 0;
    transform: skewX(-18deg);
    pointer-events: none;
}

.pn-page .pn-button-primary {
    border-color: rgba(255, 188, 157, 0.25);
    background: linear-gradient(125deg, #ff936e, #ff7547 70%);
    color: #19110e;
    box-shadow:
            inset 0 1px rgba(255, 225, 209, 0.3),
            0 8px 25px rgba(var(--pn-accent-rgb), 0.1);
}

.pn-page .pn-button-secondary {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.025);
    color: #dedce2;
}

.pn-page .pn-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.pn-page .pn-button:disabled::before {
    display: none;
}

/* =========================================================
   ПАНЕЛИ И СЕТКИ
   ========================================================= */

.pn-page .pn-panel {
    min-width: 0;
    border: 1px solid var(--pn-line);
    border-radius: 18px;
    background:
            linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.012),
                    transparent 70%
            ),
            var(--pn-surface);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.02);
}

.pn-page .pn-feature {
    display: grid;
    align-content: start;
    gap: 19px;
    padding: 29px;
}

.pn-page .pn-feature h2 {
    color: var(--pn-text);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.7px;
    line-height: 1.3;
}

.pn-page .pn-feature p {
    color: var(--pn-muted);
    font-size: 13px;
    line-height: 1.9;
}

.pn-page .pn-feature .pn-button {
    justify-self: start;
}

.pn-page .pn-two-grid,
.pn-page .pn-three-grid,
.pn-page .pn-four-grid {
    display: grid;
    min-width: 0;
    align-items: stretch;
    gap: 20px;
}

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

.pn-page .pn-three-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pn-page .pn-four-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* =========================================================
   БОЛЬШОЙ ВВОДНЫЙ БЛОК
   ========================================================= */

.pn-page .pn-home-hero {
    position: relative;
    isolation: isolate;
    padding: 44px;
    overflow: hidden;
    border: 1px solid rgba(var(--pn-accent-rgb), 0.16);
    border-radius: 22px;
    background:
            radial-gradient(
                    ellipse at 100% 0,
                    rgba(var(--pn-accent-rgb), 0.12),
                    transparent 65%
            ),
            linear-gradient(125deg, #242126, #191b20);
    box-shadow:
            inset 0 1px rgba(255, 255, 255, 0.025),
            0 20px 50px rgba(0, 0, 0, 0.07);
}

.pn-page .pn-home-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    max-width: 750px;
}

.pn-page .pn-home-hero h1 {
    max-width: 720px;
    font-size: clamp(39px, 4.4vw, 62px);
    letter-spacing: -2.5px;
    line-height: 1.08;
}

.pn-page .pn-home-hero h1 em {
    display: block;
    margin-top: 4px;
}

.pn-page .pn-hero-art {
    position: absolute;
    z-index: -1;
    top: 12px;
    right: 30px;
    color: rgba(var(--pn-accent-rgb), 0.045);
    font-size: 300px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -30px;
    line-height: 1;
    transform: rotate(-8deg);
    pointer-events: none;
    user-select: none;
}

.pn-page .pn-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.pn-page .pn-hero-pills > span {
    padding: 7px 10px;
    border: 1px solid rgba(var(--pn-accent-rgb), 0.16);
    border-radius: 7px;
    background: rgba(var(--pn-accent-rgb), 0.025);
    color: #c39a83;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.7;
}

/* =========================================================
   БЕЙДЖИ И МЕТАДАННЫЕ
   ========================================================= */

.pn-page .pn-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    color: #818592;
    font-size: 10px;
    line-height: 1.8;
}

.pn-page .pn-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid rgba(var(--pn-accent-rgb), 0.2);
    border-radius: 6px;
    background: rgba(var(--pn-accent-rgb), 0.035);
    color: #dda384;
    font-size: 9px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* =========================================================
   УВЕДОМЛЕНИЯ
   ========================================================= */

.pn-page .pn-alert {
    padding: 18px 21px;
    border: 1px solid rgba(var(--pn-accent-rgb), 0.19);
    border-radius: 12px;
    background: rgba(var(--pn-accent-rgb), 0.035);
    color: #c6a18b;
    font-size: 12px;
    line-height: 1.9;
}

.pn-page .pn-alert-error {
    border-color: rgba(230, 126, 106, 0.26);
    background: rgba(230, 126, 106, 0.035);
    color: #e3afa1;
}

.pn-page .pn-alert ul {
    margin: 9px 0 0;
    padding-left: 19px;
}

/* =========================================================
   ВКЛАДКИ
   ========================================================= */

.pn-page .pn-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.pn-page .pn-tab {
    padding: 10px 15px;
    border: 1px solid var(--pn-line);
    border-radius: 9px;
    background: var(--pn-surface);
    color: #aaa9b3;
    font-size: 11px;
    line-height: 1.7;
    transition:
            background 0.2s,
            color 0.2s,
            border-color 0.2s;
}

.pn-page .pn-tab.is-active,
.pn-page .pn-tab[aria-current="page"] {
    border-color: rgba(var(--pn-accent-rgb), 0.25);
    background: rgba(var(--pn-accent-rgb), 0.07);
    color: #ffad88;
}

/* =========================================================
   СТАТИСТИКА
   ========================================================= */

.pn-page .pn-stat {
    position: relative;
    min-width: 0;
    padding: 26px;
    border: 1px solid var(--pn-line);
    border-radius: 16px;
    background:
            radial-gradient(
                    ellipse at 100% 0,
                    rgba(var(--pn-accent-rgb), 0.035),
                    transparent 65%
            ),
            var(--pn-surface);
}

.pn-page .pn-stat > span {
    color: var(--pn-muted);
    font-size: 12px;
    line-height: 1.7;
}

.pn-page .pn-stat > strong {
    display: block;
    margin-top: 18px;
    color: #f1d2bf;
    font-size: 40px;
    font-weight: 750;
    letter-spacing: -1.7px;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

/* =========================================================
   НОВОСТИ — СПИСОК
   ========================================================= */

.pn-page .pn-news-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--pn-line);
    border-radius: 17px;
    background: var(--pn-surface);
    transition:
            transform 0.3s var(--pn-ease),
            border-color 0.3s,
            box-shadow 0.3s;
}

.pn-page .pn-news-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
            radial-gradient(
                    ellipse at 90% 0,
                    rgba(var(--pn-accent-rgb), 0.16),
                    transparent 65%
            ),
            linear-gradient(130deg, #2b2529, #171d25);
}

.pn-page .pn-news-cover > span:first-child:not(.pn-cover-tag) {
    color: rgba(255, 178, 139, 0.15);
    font-size: 80px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -7px;
    line-height: 1;
}

.pn-page .pn-news-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--pn-ease);
}

.pn-page .pn-cover-tag {
    position: absolute;
    z-index: 1;
    bottom: 16px;
    left: 19px;
    max-width: calc(100% - 38px);
    padding: 5px 8px;
    border: 1px solid rgba(var(--pn-accent-rgb), 0.18);
    border-radius: 6px;
    background: rgba(17, 18, 22, 0.8);
    color: #e0b197;
    font-size: 9px;
    line-height: 1.7;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.pn-page .pn-news-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 25px;
}

.pn-page .pn-news-copy h2 {
    color: var(--pn-text);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.7px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.pn-page .pn-news-copy p {
    color: var(--pn-muted);
    font-size: 13px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.pn-page .pn-news-copy .pn-text-link {
    justify-content: space-between;
    width: 100%;
    margin-top: auto;
    padding-top: 17px;
    border-top: 1px solid var(--pn-line);
}

.pn-page .pn-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* =========================================================
   НОВОСТИ — СТАТЬЯ
   ========================================================= */

.pn-page .pn-article {
    width: 100%;
    max-width: 1000px;
    margin-inline: auto;
    padding: 42px;
}

.pn-page .pn-article h1 {
    font-size: clamp(29px, 3.5vw, 46px);
    letter-spacing: -1.5px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.pn-page .pn-article .pn-meta {
    justify-content: flex-start;
    gap: 12px 20px;
    margin-top: 22px;
}

.pn-page .pn-article-summary {
    margin-top: 25px;
    color: #b1a9af;
    font-size: 17px;
    line-height: 1.9;
}

.pn-page .pn-article-cover {
    display: block;
    width: 100%;
    max-height: 540px;
    margin-top: 30px;
    border-radius: 14px;
    object-fit: cover;
}

.pn-page .pn-prose {
    color: #a4a4af;
    font-size: 14px;
    line-height: 1.95;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.pn-page .pn-article > .pn-prose {
    margin-top: 31px;
    padding-top: 29px;
    border-top: 1px solid var(--pn-line);
}

/* =========================================================
   СПИСКИ И ПУСТЫЕ СОСТОЯНИЯ
   ========================================================= */

.pn-page .pn-list {
    display: grid;
    gap: 14px;
}

.pn-page .pn-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 27px;
    transition:
            border-color 0.25s,
            background 0.25s;
}

.pn-page .pn-list-row > div:first-child {
    min-width: 0;
}

.pn-page .pn-list-row h2 {
    margin: 10px 0 8px;
    color: var(--pn-text);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.pn-page .pn-list-row small {
    color: #858793;
    font-size: 11px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.pn-page .pn-empty {
    padding: 48px 30px;
    color: #b7b3bd;
    font-size: 13px;
    line-height: 1.9;
    text-align: center;
}

.pn-page .pn-empty h2,
.pn-page .pn-empty h3 {
    color: var(--pn-text);
    font-size: 26px;
    font-weight: 750;
    letter-spacing: -0.8px;
    line-height: 1.3;
}

.pn-page .pn-empty p {
    max-width: 630px;
    margin: 16px auto 0;
    color: var(--pn-muted);
    font-size: 13px;
    line-height: 1.9;
}

/* =========================================================
   ФОРМЫ
   ========================================================= */

.pn-page .pn-form {
    display: grid;
    gap: 24px;
    width: 100%;
    max-width: 1150px;
    padding: 32px;
}

.pn-page .pn-field {
    display: grid;
    align-content: start;
    min-width: 0;
    gap: 10px;
}

.pn-page .pn-field > span {
    color: #beb9c3;
    font-size: 12px;
    line-height: 1.7;
}

.pn-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]),
.pn-page textarea,
.pn-page select {
    width: 100%;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: #14171c;
    color: #e0dbe5;
    box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.08);
    font-size: 13px;
    line-height: 1.7;
    transition:
            border-color 0.2s,
            box-shadow 0.2s;
}

.pn-page input::placeholder,
.pn-page textarea::placeholder {
    color: #777b88;
    opacity: 1;
}

.pn-page textarea {
    min-height: 125px;
    resize: vertical;
}

.pn-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.pn-page textarea:focus,
.pn-page select:focus {
    border-color: rgba(var(--pn-accent-rgb), 0.5);
    box-shadow: 0 0 0 4px rgba(var(--pn-accent-rgb), 0.04);
}

.pn-page .pn-field-error {
    color: #e1a18f;
    font-size: 11px;
    line-height: 1.8;
}

.pn-page .pn-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #aca9b4;
    font-size: 13px;
    line-height: 1.8;
}

.pn-page input[type="checkbox"],
.pn-page input[type="radio"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--pn-orange);
}

/* =========================================================
   ПРЕЖНЯЯ СТРУКТУРА ПРОФИЛЯ
   ========================================================= */

.pn-page .pn-profile {
    display: grid;
    gap: 23px;
    padding: 33px;
    background:
            radial-gradient(
                    ellipse at 100% 0,
                    rgba(var(--pn-accent-rgb), 0.1),
                    transparent 65%
            ),
            linear-gradient(125deg, #232126, #191b20);
}

.pn-page .pn-profile-top {
    display: flex;
    align-items: center;
    gap: 23px;
}

.pn-page .pn-profile-name {
    min-width: 0;
}

.pn-page .pn-profile-name h2 {
    margin: 8px 0 13px;
    color: var(--pn-text);
    font-size: clamp(24px, 2.8vw, 37px);
    font-weight: 750;
    letter-spacing: -1px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.pn-page .pn-avatar {
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid rgba(var(--pn-accent-rgb), 0.35);
    border-radius: 22px;
    background: linear-gradient(140deg, #422d25, #242025);
    color: #efd9c9;
    font-size: 40px;
    font-weight: 900;
    font-style: italic;
}

.pn-page .pn-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pn-page .pn-copy-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    gap: 13px;
}

.pn-page code {
    color: #c0bbc8;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* =========================================================
   ОБРАЩЕНИЯ И ДИАЛОГИ
   ========================================================= */

.pn-page .pn-conversation {
    display: grid;
    gap: 16px;
}

.pn-page .pn-message {
    padding: 27px;
}

.pn-page .pn-message .pn-prose {
    margin-top: 17px;
}

.pn-page .pn-message-admin {
    border-color: rgba(var(--pn-accent-rgb), 0.25);
    background:
            radial-gradient(
                    ellipse at 100% 0,
                    rgba(var(--pn-accent-rgb), 0.035),
                    transparent 70%
            ),
            var(--pn-surface);
    box-shadow: inset 3px 0 rgba(var(--pn-accent-rgb), 0.45);
}

/* =========================================================
   СЕРВЕРЫ — ОБЩАЯ СТРУКТУРА
   ========================================================= */

.pn-page .pn-server-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 23px;
}

.pn-page .pn-server {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 22px;
    padding: 30px;
}

.pn-page .pn-server h2 {
    color: var(--pn-text);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.2;
}

.pn-page .pn-info-rows {
    border-top: 1px solid var(--pn-line);
}

.pn-page .pn-info-rows > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-block: 16px;
    border-bottom: 1px solid var(--pn-line);
    font-size: 12px;
    line-height: 1.8;
}

.pn-page .pn-info-rows span {
    color: var(--pn-muted);
}

.pn-page .pn-info-rows strong {
    min-width: 0;
    color: #d8b4a0;
    font-weight: 500;
    text-align: right;
    overflow-wrap: anywhere;
}

/* =========================================================
   НОВАЯ СТРАНИЦА СЕРВЕРОВ — HERO
   ========================================================= */

.pn-page.pn-servers-page {
    padding-top: 32px;
}

.pn-page .pn-servers-hero {
    min-height: 350px;
    padding: 43px;
}

.pn-page .pn-servers-hero-grid {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
            linear-gradient(
                    rgba(255, 255, 255, 0.02) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.02) 1px,
                    transparent 1px
            );
    background-size: 52px 52px;
    mask-image: linear-gradient(
            90deg,
            transparent 20%,
            #000
    );
    pointer-events: none;
}

.pn-page .pn-servers-hero .pn-hero-art {
    top: 18px;
    right: 65px;
    font-size: 330px;
}

.pn-page .pn-servers-lead {
    max-width: 600px;
    margin-top: 23px;
    color: #a4a0aa;
    font-size: 14px;
    line-height: 1.9;
}

.pn-page .pn-servers-hero-actions {
    margin-top: 28px;
}

.pn-page .pn-servers-icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

.pn-page .pn-servers-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pn-page .pn-servers-notice > .pn-servers-icon {
    margin-top: 2px;
    color: #de9b7a;
}

.pn-page .pn-servers-notice > span {
    min-width: 0;
}

.pn-page .pn-servers-section {
    min-width: 0;
    padding-top: 9px;
    scroll-margin-top: 165px;
}

.pn-page .pn-servers-section-heading {
    align-items: flex-end;
    margin: 0 0 25px;
}

.pn-page .pn-servers-section-heading h2 {
    margin-top: 9px;
    font-size: 30px;
    letter-spacing: -1px;
}

.pn-page .pn-servers-count {
    padding: 7px 10px;
    gap: 9px;
    color: #b39e95;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.6px;
}

.pn-page .pn-servers-count > span:first-child {
    color: #ffad88;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
}

/* =========================================================
   НОВАЯ КАРТОЧКА СЕРВЕРА
   ========================================================= */

.pn-page .pn-server-card {
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.1);
    background:
            radial-gradient(
                    ellipse at 100% 0,
                    rgba(var(--pn-accent-rgb), 0.065),
                    transparent 60%
            ),
            var(--pn-surface);
    box-shadow:
            inset 0 1px rgba(255, 255, 255, 0.025),
            0 15px 35px rgba(0, 0, 0, 0.055);
    transition:
            border-color 0.3s,
            box-shadow 0.3s,
            transform 0.3s var(--pn-ease);
}

.pn-page .pn-server-card::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 24px;
    left: 24px;
    height: 1px;
    content: "";
    background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 174, 133, 0.3),
            transparent
    );
    pointer-events: none;
}

.pn-page .pn-server-card.is-connectable {
    border-color: rgba(var(--pn-accent-rgb), 0.2);
}

.pn-page .pn-server-top {
    gap: 12px;
}

.pn-page .pn-server-project {
    color: #8e7b76;
    font-family: monospace;
    font-size: 9px;
    letter-spacing: 1px;
}

.pn-page .pn-server-status {
    padding: 5px 9px;
    color: #e5af91;
    font-size: 9px;
}

.pn-page .pn-server-heading {
    display: flex;
    align-items: center;
    gap: 17px;
    min-width: 0;
}

.pn-page .pn-server-symbol {
    display: grid;
    place-items: center;
    width: 59px;
    height: 62px;
    flex-shrink: 0;
    border: 1px solid rgba(var(--pn-accent-rgb), 0.2);
    border-radius: 14px;
    background: linear-gradient(
            145deg,
            rgba(var(--pn-accent-rgb), 0.09),
            rgba(var(--pn-accent-rgb), 0.025)
    );
    color: #ec9f7c;
    box-shadow: inset 0 1px rgba(255, 199, 168, 0.035);
}

.pn-page .pn-server-name {
    min-width: 0;
    color: var(--pn-text);
    font-size: clamp(25px, 2.7vw, 35px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.pn-page .pn-server-description {
    color: #a6a1ac;
    font-size: 13px;
    line-height: 1.95;
}

.pn-page .pn-server-wipes > div {
    padding-block: 17px;
}

.pn-page .pn-server-online-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pn-page .pn-server-online-note > .pn-servers-icon {
    margin-top: 3px;
    color: #a78c7d;
}

.pn-page .pn-server-online-note .pn-muted {
    color: #85818d;
    font-size: 11px;
    line-height: 1.8;
}

.pn-page .pn-server-address {
    min-width: 0;
}

.pn-page .pn-server-address > .pn-eyebrow {
    margin-bottom: 10px;
    color: #a98674;
    font-size: 8px;
    letter-spacing: 1.1px;
}

.pn-page .pn-server-copy {
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--pn-line);
    border-radius: 11px;
    background: rgba(9, 11, 15, 0.4);
}

.pn-page .pn-server-copy code {
    min-width: 0;
    flex: 1 1 130px;
    color: #d0c2c7;
    font-size: 12px;
}

.pn-page .pn-server-copy-button {
    min-height: 36px;
    flex-shrink: 0;
    padding: 8px 10px;
    font-size: 10px;
}

/* =========================================================
   КОМАНДА ПОДКЛЮЧЕНИЯ
   ========================================================= */

.pn-page .pn-server-connect {
    display: grid;
    gap: 15px;
    min-width: 0;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid var(--pn-line);
}

.pn-page .pn-server-connect-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d0a28a;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.7px;
    line-height: 1.8;
}

.pn-page .pn-server-connect-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid rgba(var(--pn-accent-rgb), 0.16);
    border-radius: 8px;
    background: rgba(var(--pn-accent-rgb), 0.035);
    color: #e69e7a;
}

.pn-page .pn-server-connect > .pn-muted {
    font-size: 12px;
}

.pn-page .pn-server-command {
    padding: 13px 15px;
    border: 1px solid rgba(var(--pn-accent-rgb), 0.15);
    border-radius: 10px;
    background: rgba(9, 11, 15, 0.5);
}

.pn-page .pn-server-command code {
    color: #e3b295;
    font-size: 12px;
}

.pn-page .pn-server-connect-button {
    justify-content: space-between;
    width: 100%;
    min-height: 47px;
    margin-top: 1px;
    font-size: 10px;
    letter-spacing: 0.4px;
}

/* =========================================================
   СЕРВЕРЫ — ПУСТОЕ СОСТОЯНИЕ
   ========================================================= */

.pn-page .pn-servers-empty {
    padding: 50px 30px;
    background:
            radial-gradient(
                    ellipse at 50% 0,
                    rgba(var(--pn-accent-rgb), 0.05),
                    transparent 65%
            ),
            var(--pn-surface);
}

.pn-page .pn-servers-empty-icon {
    display: grid;
    place-items: center;
    width: 78px;
    height: 81px;
    margin: 0 auto 24px;
    border: 1px dashed rgba(var(--pn-accent-rgb), 0.25);
    border-radius: 20px;
    background: rgba(var(--pn-accent-rgb), 0.025);
    color: #cf9272;
}

.pn-page .pn-servers-empty > .pn-eyebrow {
    margin: 0 auto 12px;
    color: #b2836b;
    font-size: 8px;
}

.pn-page .pn-servers-empty h3 {
    font-size: 29px;
    letter-spacing: -0.8px;
}

.pn-page .pn-servers-empty-actions {
    justify-content: center;
    margin-top: 25px;
}

/* =========================================================
   СЕРВЕРЫ — НИЖНИЕ КАРТОЧКИ
   ========================================================= */

.pn-page .pn-servers-bottom-grid {
    margin-top: 8px;
}

.pn-page .pn-servers-feature {
    position: relative;
    overflow: hidden;
    background:
            radial-gradient(
                    ellipse at 100% 0,
                    rgba(var(--pn-accent-rgb), 0.035),
                    transparent 65%
            ),
            var(--pn-surface);
}

.pn-page .pn-servers-feature h2 {
    max-width: 450px;
    font-size: 25px;
    line-height: 1.25;
}

.pn-page .pn-servers-feature .pn-button {
    margin-top: 3px;
}

.pn-page .pn-servers-signoff {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 3px;
    color: #716871;
    font-family: monospace;
    font-size: 8px;
    letter-spacing: 1.1px;
    line-height: 1.8;
}

/* =========================================================
   МАГАЗИН
   ========================================================= */

.pn-page .pn-catalog {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 23px;
}

.pn-page .pn-catalog-sidebar {
    padding: 22px 16px;
}

.pn-page .pn-catalog-sidebar h2 {
    margin: 4px 9px 19px;
    color: var(--pn-text);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.4;
}

.pn-page .pn-category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 7px 0;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #a8a5b1;
    font-size: 12px;
    line-height: 1.7;
    transition:
            color 0.2s,
            background 0.2s,
            border-color 0.2s;
}

.pn-page .pn-category-link.is-active {
    border-color: rgba(var(--pn-accent-rgb), 0.25);
    background: rgba(var(--pn-accent-rgb), 0.075);
    color: #edaa87;
}

.pn-page .pn-product {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition:
            transform 0.3s var(--pn-ease),
            border-color 0.3s,
            box-shadow 0.3s;
}

.pn-page .pn-product .pn-feature {
    flex: 1;
    padding: 23px;
    gap: 14px;
}

.pn-page .pn-product .pn-feature h2 {
    font-size: 25px;
}

.pn-page .pn-product-art {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    height: 175px;
    margin: 9px;
    overflow: hidden;
    border-radius: 12px;
    background:
            radial-gradient(
                    ellipse at 50% 35%,
                    rgba(var(--pn-accent-rgb), 0.2),
                    transparent 70%
            ),
            #242124;
    color: #dfaa87;
    font-size: 75px;
    font-weight: 900;
    font-style: italic;
}

.pn-page .pn-product-art::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background-image:
            linear-gradient(
                    rgba(255, 255, 255, 0.025) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.025) 1px,
                    transparent 1px
            );
    background-size: 32px 32px;
    pointer-events: none;
}

.pn-page .pn-product-art > span {
    transition: transform 0.4s var(--pn-ease);
}

/* =========================================================
   ОБЩАЯ ШАПКА
   ========================================================= */

.portal-header .header-inner {
    gap: 20px;
}

.portal-header .nav {
    gap: 19px;
}

.portal-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.portal-language {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.portal-language button {
    padding: 8px 9px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #85808c;
    font-family: inherit;
    font-size: 10px;
    line-height: 1.4;
    cursor: pointer;
    transition:
            color 0.2s,
            background 0.2s;
}

.portal-language button.is-active {
    background: rgba(255, 117, 71, 0.12);
    color: #f0b092;
}

.portal-content-notice {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #b39a8d;
    font-size: 10px;
    line-height: 1.8;
}

/* =========================================================
   КРАСИВЫЕ КНОПКИ КАБИНЕТА И АДМИНКИ
   ========================================================= */

.header.portal-header .portal-header-actions .portal-profile-link,
.header.portal-header .portal-header-actions .portal-admin-link {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 10px;
    min-height: 42px;
    margin: 0;
    padding: 7px 13px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;
    color: #e6e2de;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition:
            transform 0.22s cubic-bezier(.22, 1, .36, 1),
            background 0.22s,
            border-color 0.22s,
            box-shadow 0.22s;
}

.header.portal-header .portal-header-actions .portal-profile-link > span,
.header.portal-header .portal-header-actions .portal-admin-link > span {
    font-size: 11px;
    line-height: 1.4;
}

.header.portal-header .portal-header-actions .portal-profile-link {
    background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.015)
    );
    box-shadow:
            inset 0 1px rgba(255, 255, 255, 0.04),
            0 5px 16px rgba(0, 0, 0, 0.12);
}

.header.portal-header .portal-header-actions .portal-account-avatar {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 117, 71, 0.22);
    border-radius: 8px;
    background: rgba(255, 117, 71, 0.07);
    color: #e0a185;
}

.header.portal-header .portal-header-actions .portal-account-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.header.portal-header .portal-header-actions .portal-account-avatar svg {
    display: block;
    width: 17px;
    height: 17px;
}

/* Поддержка прежнего HTML с аватаром без обёртки. */

.header.portal-header .portal-header-actions .portal-profile-link > img {
    display: block;
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
}

.header.portal-header .portal-header-actions .portal-account-arrow {
    display: block;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: #8f8c94;
    transition:
            transform 0.22s,
            color 0.22s;
}

.header.portal-header .portal-header-actions .portal-admin-link {
    border-color: rgba(255, 117, 71, 0.25);
    background: linear-gradient(
            135deg,
            rgba(255, 117, 71, 0.13),
            rgba(255, 117, 71, 0.045)
    );
    color: #ffae8b;
    box-shadow: inset 0 1px rgba(255, 185, 148, 0.045);
}

.header.portal-header .portal-header-actions .portal-admin-icon {
    display: block;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: #ff936e;
}

.header.portal-header .portal-header-actions .portal-profile-link::before,
.header.portal-header .portal-header-actions .portal-admin-link::before {
    position: absolute;
    z-index: 2;
    top: -100%;
    bottom: -100%;
    left: -45%;
    width: 18%;
    content: "";
    background: linear-gradient(
            100deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
    );
    opacity: 0;
    transform: skewX(-18deg);
    pointer-events: none;
}

.header.portal-header .portal-header-actions .portal-profile-link:focus-visible,
.header.portal-header .portal-header-actions .portal-admin-link:focus-visible {
    outline: 2px solid #ff936e;
    outline-offset: 4px;
}

/* =========================================================
   УВЕДОМЛЕНИЯ ПОРТАЛА
   ========================================================= */

.portal-toast {
    position: fixed;
    z-index: 1000;
    bottom: 25px;
    left: 50%;
    max-width: calc(100% - 32px);
    padding: 14px 21px;
    border: 1px solid rgba(255, 117, 71, 0.25);
    border-radius: 11px;
    background: #282125;
    color: #e2b094;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.8;
    opacity: 0;
    transform: translate(-50%, 10px);
    pointer-events: none;
    transition:
            opacity 0.2s,
            transform 0.2s;
}

.portal-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* =========================================================
   НАВЕДЕНИЕ
   ========================================================= */

@media (hover: hover) {

    .pn-page .pn-button:hover:not(:disabled) {
        transform: translateY(-2px);
    }

    .pn-page .pn-button:hover:not(:disabled)::before {
        animation: pn-button-shine 0.48s var(--pn-ease) both;
    }

    .pn-page .pn-button-primary:hover:not(:disabled) {
        background: linear-gradient(125deg, #ffa17e, #ff936e 70%);
        box-shadow:
                inset 0 1px rgba(255, 225, 209, 0.4),
                0 11px 30px rgba(var(--pn-accent-rgb), 0.17);
    }

    .pn-page .pn-button-secondary:hover:not(:disabled) {
        border-color: rgba(var(--pn-accent-rgb), 0.35);
        background: rgba(var(--pn-accent-rgb), 0.045);
    }

    .pn-page .pn-tab:hover,
    .pn-page .pn-category-link:hover {
        border-color: rgba(var(--pn-accent-rgb), 0.25);
        background: rgba(var(--pn-accent-rgb), 0.04);
        color: #f0ad89;
    }

    .pn-page .pn-news-card:hover,
    .pn-page .pn-product:hover {
        border-color: rgba(var(--pn-accent-rgb), 0.3);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
        transform: translateY(-4px);
    }

    .pn-page .pn-news-card:hover .pn-news-cover img {
        transform: scale(1.045);
    }

    .pn-page .pn-product:hover .pn-product-art > span {
        transform: translateY(-5px) rotate(-4deg);
    }

    .pn-page .pn-list-row:hover {
        border-color: rgba(var(--pn-accent-rgb), 0.23);
    }

    .pn-page .pn-text-link:hover,
    .pn-page .pn-row-heading > a:hover {
        color: #ffb08b;
    }

    .pn-page .pn-server-card:hover {
        border-color: rgba(var(--pn-accent-rgb), 0.35);
        box-shadow: 0 22px 45px rgba(0, 0, 0, 0.16);
        transform: translateY(-3px);
    }

    .portal-language button:hover {
        background: rgba(255, 255, 255, 0.04);
        color: #f0d4c4;
    }

    .header.portal-header .portal-header-actions .portal-profile-link:hover {
        border-color: rgba(255, 117, 71, 0.4);
        background: rgba(255, 117, 71, 0.055);
        box-shadow:
                inset 0 1px rgba(255, 255, 255, 0.04),
                0 8px 22px rgba(0, 0, 0, 0.17);
        transform: translateY(-2px);
    }

    .header.portal-header .portal-header-actions .portal-profile-link:hover .portal-account-arrow {
        color: #ffad88;
        transform: translateX(2px);
    }

    .header.portal-header .portal-header-actions .portal-admin-link:hover {
        border-color: rgba(255, 117, 71, 0.5);
        background: rgba(255, 117, 71, 0.14);
        color: #ffc2a5;
        box-shadow: 0 7px 22px rgba(255, 117, 71, 0.08);
        transform: translateY(-2px);
    }

    .header.portal-header .portal-header-actions .portal-profile-link:hover::before,
    .header.portal-header .portal-header-actions .portal-admin-link:hover::before {
        animation: portal-header-shine 0.48s ease-out both;
    }

}

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

@keyframes pn-button-shine {
    0% {
        left: -45%;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    85% {
        opacity: 0.7;
    }

    100% {
        left: 135%;
        opacity: 0;
    }
}

@keyframes portal-header-shine {
    0% {
        left: -45%;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    85% {
        opacity: 0.7;
    }

    100% {
        left: 135%;
        opacity: 0;
    }
}

/* =========================================================
   АДАПТИВ — ДО 1250px
   ========================================================= */

@media (max-width: 1250px) {

    .portal-header .header-inner {
        flex-wrap: wrap;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .portal-header .nav {
        order: 3;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .portal-header-actions {
        margin-left: auto;
    }

    .pn-page .pn-catalog .pn-three-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* =========================================================
   АДАПТИВ — ДО 950px
   ========================================================= */

@media (max-width: 950px) {

    .pn-container {
        width: calc(100% - 40px);
        gap: 24px;
    }

    .pn-page .pn-three-grid,
    .pn-page .pn-four-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pn-page .pn-server-grid {
        grid-template-columns: 1fr;
        gap: 21px;
    }

    .pn-page .pn-list-row {
        align-items: flex-start;
    }

    .pn-page .pn-catalog {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 20px;
    }

    .pn-page .pn-catalog .pn-three-grid {
        grid-template-columns: 1fr;
    }

    .pn-page .pn-home-hero {
        padding: 36px;
    }

    .pn-page .pn-servers-hero {
        min-height: 0;
        padding: 36px;
    }

    .pn-page .pn-servers-hero .pn-hero-art {
        top: 35px;
        right: 25px;
        font-size: 270px;
    }

    .pn-page .pn-server {
        padding: 29px;
    }

    .pn-page .pn-server-name {
        font-size: 34px;
    }

    .pn-page .pn-server-description {
        max-width: 680px;
    }

    .pn-page .pn-server-connect {
        margin-top: 0;
    }

}

/* =========================================================
   АДАПТИВ — ДО 650px
   ========================================================= */

@media (max-width: 650px) {

    .pn-page {
        padding-top: 24px;
        padding-bottom: 55px;
    }

    .pn-container {
        width: calc(100% - 28px);
        gap: 21px;
    }

    .pn-page .pn-three-grid,
    .pn-page .pn-two-grid {
        grid-template-columns: 1fr;
    }

    .pn-page .pn-home-hero {
        padding: 30px 25px;
    }

    .pn-page .pn-home-hero h1 {
        font-size: clamp(34px, 8vw, 46px);
        letter-spacing: -1.7px;
    }

    .pn-page .pn-hero-art {
        top: 55px;
        right: 10px;
        font-size: 225px;
    }

    .pn-page .pn-feature,
    .pn-page .pn-form,
    .pn-page .pn-server {
        padding: 25px;
    }

    .pn-page .pn-article {
        padding: 27px;
    }

    .pn-page .pn-article-summary {
        font-size: 15px;
    }

    .pn-page .pn-list-row {
        flex-direction: column;
        padding: 24px;
    }

    .pn-page .pn-list-row .pn-actions {
        width: 100%;
    }

    .pn-page .pn-profile {
        padding: 26px;
    }

    .pn-page .pn-profile-top {
        align-items: flex-start;
        gap: 16px;
    }

    .pn-page .pn-avatar {
        width: 72px;
        height: 72px;
        border-radius: 16px;
        font-size: 31px;
    }

    .pn-page .pn-profile-name h2 {
        font-size: 25px;
    }

    .pn-page .pn-catalog {
        grid-template-columns: 1fr;
    }

    .pn-page .pn-catalog-sidebar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 20px;
    }

    .pn-page .pn-catalog-sidebar h2 {
        width: 100%;
        margin: 0 0 6px;
    }

    .pn-page .pn-category-link {
        gap: 15px;
        margin: 0;
        padding: 9px 12px;
        border-color: var(--pn-line);
    }

    .portal-header .brand-name {
        font-size: 14px;
    }

    .portal-header .brand-name > span {
        font-size: 7px;
    }

    .portal-header .brand-icon {
        width: 40px;
        height: 43px;
        font-size: 21px;
    }

    .portal-header-actions {
        gap: 7px;
    }

    .portal-header .button-small {
        min-height: 40px;
        padding: 10px 12px;
        font-size: 10px;
    }

    .portal-header .nav {
        gap: 13px;
    }

    .portal-header .nav-link {
        font-size: 11px;
    }

    .portal-language button {
        padding: 7px;
        font-size: 9px;
    }

    .header.portal-header .portal-header-actions .portal-profile-link,
    .header.portal-header .portal-header-actions .portal-admin-link {
        gap: 7px;
        min-height: 39px;
        padding: 6px 10px;
        border-radius: 9px;
    }

    .header.portal-header .portal-header-actions .portal-profile-link > span,
    .header.portal-header .portal-header-actions .portal-admin-link > span {
        font-size: 10px;
    }

    .header.portal-header .portal-header-actions .portal-account-avatar {
        width: 24px;
        height: 24px;
        border-radius: 7px;
    }

    .header.portal-header .portal-header-actions .portal-account-arrow {
        display: none;
    }

    .header.portal-header .portal-header-actions .portal-admin-icon {
        width: 15px;
        height: 15px;
    }

    .pn-page.pn-servers-page {
        padding-top: 24px;
    }

    .pn-page .pn-servers-hero {
        padding: 31px 25px;
    }

    .pn-page .pn-servers-hero .pn-hero-art {
        top: auto;
        right: 4px;
        bottom: 10px;
        font-size: 235px;
    }

    .pn-page .pn-servers-lead {
        margin-top: 20px;
        font-size: 13px;
    }

    .pn-page .pn-servers-hero-actions {
        gap: 9px;
        margin-top: 25px;
    }

    .pn-page .pn-servers-section-heading {
        align-items: flex-start;
        gap: 16px;
    }

    .pn-page .pn-servers-section-heading h2 {
        font-size: 27px;
        letter-spacing: -0.8px;
    }

    .pn-page .pn-servers-count {
        margin-top: 3px;
        padding: 5px 8px;
        font-size: 7px;
    }

    .pn-page .pn-server-heading {
        gap: 15px;
    }

    .pn-page .pn-server-symbol {
        width: 51px;
        height: 55px;
        border-radius: 12px;
    }

    .pn-page .pn-server-symbol svg {
        width: 27px;
        height: 27px;
    }

    .pn-page .pn-server-name {
        font-size: 29px;
    }

    .pn-page .pn-server-description {
        font-size: 13px;
    }

    .pn-page .pn-info-rows > div {
        gap: 14px;
        font-size: 11px;
    }

    .pn-page .pn-server-connect-heading {
        font-size: 8px;
    }

    .pn-page .pn-servers-feature h2 {
        font-size: 25px;
    }

}

/* =========================================================
   АДАПТИВ — ДО 420px
   ========================================================= */

@media (max-width: 420px) {

    .pn-container {
        width: calc(100% - 24px);
    }

    .pn-page .pn-four-grid {
        gap: 11px;
    }

    .pn-page .pn-stat {
        padding: 21px 17px;
    }

    .pn-page .pn-stat > strong {
        font-size: 33px;
    }

    .pn-page .pn-feature,
    .pn-page .pn-form,
    .pn-page .pn-server {
        padding: 23px;
    }

    .pn-page .pn-eyebrow {
        font-size: 8px;
        letter-spacing: 1.1px;
    }

    .pn-page .pn-servers-hero {
        padding: 28px 23px;
        border-radius: 18px;
    }

    .pn-page .pn-servers-hero-actions .pn-button {
        min-height: 43px;
        gap: 10px;
        padding: 11px 13px;
        font-size: 10px;
    }

    .pn-page .pn-servers-notice {
        gap: 10px;
        padding: 16px;
        font-size: 11px;
    }

    .pn-page .pn-servers-section-heading {
        flex-wrap: wrap;
    }

    .pn-page .pn-servers-section-heading h2 {
        font-size: 26px;
    }

    .pn-page .pn-server-project {
        font-size: 8px;
        letter-spacing: 0.6px;
    }

    .pn-page .pn-server-status {
        font-size: 8px;
    }

    .pn-page .pn-server {
        gap: 20px;
    }

    .pn-page .pn-server-heading {
        gap: 12px;
    }

    .pn-page .pn-server-name {
        font-size: 25px;
        letter-spacing: -0.7px;
    }

    .pn-page .pn-server-symbol {
        width: 44px;
        height: 48px;
    }

    .pn-page .pn-server-symbol svg {
        width: 24px;
        height: 24px;
    }

    .pn-page .pn-server-description {
        font-size: 12px;
    }

    .pn-page .pn-server-copy {
        padding: 10px;
        gap: 10px;
    }

    .pn-page .pn-server-copy code {
        flex-basis: 100%;
        font-size: 11px;
    }

    .pn-page .pn-server-copy-button {
        width: 100%;
    }

    .pn-page .pn-server-command {
        padding: 12px;
    }

    .pn-page .pn-server-command code {
        font-size: 11px;
    }

    .pn-page .pn-server-connect-button {
        gap: 10px;
        padding-inline: 13px;
        font-size: 9px;
        letter-spacing: 0.2px;
    }

    .pn-page .pn-servers-empty {
        padding: 35px 23px;
    }

    .pn-page .pn-servers-empty-icon {
        width: 65px;
        height: 68px;
        border-radius: 17px;
    }

    .pn-page .pn-servers-empty h3 {
        font-size: 25px;
    }

    .pn-page .pn-servers-empty > p {
        font-size: 12px;
    }

    .pn-page .pn-servers-signoff {
        font-size: 7px;
        letter-spacing: 0.8px;
    }

    .pn-page .pn-servers-signoff > span:last-child {
        display: none;
    }

}

/* =========================================================
   АДАПТИВ ШАПКИ — ДО 400px
   ========================================================= */

@media (max-width: 400px) {

    .portal-header .header-inner {
        gap: 13px;
    }

    .portal-header .brand-name {
        display: none;
    }

    .portal-header .brand {
        gap: 0;
    }

}

/* =========================================================
   УМЕНЬШЕННОЕ ДВИЖЕНИЕ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pn-page,
    .pn-page *,
    .pn-page *::before,
    .pn-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .pn-page .pn-button:hover,
    .pn-page .pn-news-card:hover,
    .pn-page .pn-product:hover,
    .pn-page .pn-server-card:hover {
        transform: none;
    }

    .portal-toast,
    .portal-language button,
    .header.portal-header .portal-header-actions .portal-profile-link,
    .header.portal-header .portal-header-actions .portal-admin-link,
    .header.portal-header .portal-header-actions .portal-account-arrow {
        transition: none !important;
    }

    .header.portal-header .portal-header-actions .portal-profile-link::before,
    .header.portal-header .portal-header-actions .portal-admin-link::before {
        animation: none !important;
        opacity: 0;
    }

    .header.portal-header .portal-header-actions .portal-profile-link:hover,
    .header.portal-header .portal-header-actions .portal-admin-link:hover,
    .header.portal-header .portal-header-actions .portal-profile-link:hover .portal-account-arrow {
        transform: none;
    }

}