/* KORMKOTA.online */

:root {
    --ink: #111111;
    --paper: #faf8ff;
    --card: #ffffff;
    --lime: #d9f99d;
    --pink: #fda4af;
    --sky: #7dd3fc;
    --violet: #c4b5fd;
    --ok: #22c55e;
    --err: #ef4444;
    --font: 'Space Grotesk', system-ui, sans-serif;
    --border: 2.5px solid var(--ink);
    --shadow: 5px 5px 0 var(--ink);
    --shadow-sm: 3px 3px 0 var(--ink);
    --radius: 14px;
    /* icon colors */
    --ico-news: #0284c7;
    --ico-news-bg: #bae6fd;
    --ico-home: #65a30d;
    --ico-home-bg: #d9f99d;
    --ico-messages: #7c3aed;
    --ico-messages-bg: #ddd6fe;
    --ico-groups: #0f766e;
    --ico-groups-bg: #ccfbf1;
    --ico-friends: #db2777;
    --ico-friends-bg: #fbcfe8;
    --ico-notifications: #d97706;
    --ico-notifications-bg: #fde68a;
    --ico-search: #2563eb;
    --ico-search-bg: #bfdbfe;
    --ico-useful: #0f766e;
    --ico-useful-bg: #99f6e4;
    --ico-profile: #9333ea;
    --ico-profile-bg: #e9d5ff;
    --ico-info: #0891b2;
    --ico-info-bg: #a5f3fc;
    --ico-admin: #475569;
    --ico-admin-bg: #e2e8f0;
    --ico-logout: #dc2626;
    --ico-logout-bg: #fecaca;
    --ico-like: #16a34a;
    --ico-like-bg: #bbf7d0;
    --ico-dislike: #dc2626;
    --ico-dislike-bg: #fecaca;
    --ico-neutral: #ca8a04;
    --ico-neutral-bg: #fef08a;
    --ico-inbox: #0ea5e9;
    --ico-inbox-bg: #e0f2fe;
    --ico-comment: #7c3aed;
    --ico-comment-bg: #ede9fe;
    --ico-edit: #2563eb;
    --ico-edit-bg: #dbeafe;
    --ico-trash: #dc2626;
    --ico-trash-bg: #fee2e2;
    --ico-menu: #111111;
    --ico-share: #2563eb;
    --ico-send: #2563eb;
    --ico-arrow-up: #65a30d;
    --ico-more-vertical: #64748b;
}

/* v20260714-layout-live-fix1: background/menu/live cleanup */
:root {
    --fix-bg: #071017;
    --fix-panel: #0d1a22;
    --fix-panel-soft: #111f29;
    --fix-line: rgba(185, 214, 220, 0.16);
    --fix-text: #eef8fb;
    --fix-muted: #9eb3ba;
    --fix-accent: #42d7ff;
    --fix-server: #78e08f;
    --fix-download: #ffd166;
}

body,
body.page-kormkota {
    background: var(--fix-bg) !important;
    background-image: none !important;
    color: var(--fix-text) !important;
}

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

.main-content,
.main-content--guest,
.kk-dashboard,
.kk-workspace,
.kk-social-workspace,
.kk-profile-dashboard,
.kk-messages-dashboard,
.kk-layout,
.kk-feed,
.kk-side {
    background: transparent !important;
}

.site-header,
.site-header--guest,
.site-footer,
.site-footer--guest {
    background: #09131a !important;
    border-color: var(--fix-line) !important;
    box-shadow: none !important;
}

.card,
.post-card,
.comment-form,
.chat-box,
.auth-card,
.form-card,
.page-hero,
.profile-hero,
.kk-panel,
.kk-section,
.kk-topbar,
.kk-rail,
.kk-workspace,
.kk-social-workspace,
.messenger-app,
.kk-notification-panel,
.kk-notification-item,
.kk-mini-chat-list article,
.kk-news-list article,
.kk-monitor-card,
.kk-server-card,
.public-chat-bubble {
    background: var(--fix-panel) !important;
    border: 1px solid var(--fix-line) !important;
    box-shadow: none !important;
    color: var(--fix-text) !important;
}

.kk-dashboard--home > .kk-workspace > .kk-topbar {
    display: none !important;
}

.guest-online-count {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(120, 224, 143, 0.35);
    border-radius: 999px;
    background: rgba(120, 224, 143, 0.10);
    color: var(--fix-text) !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.guest-online-count span {
    color: var(--fix-server);
    font-weight: 950;
}

.guest-online-count small {
    color: var(--fix-muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.kk-rail-nav {
    min-height: 100%;
    display: flex !important;
    flex-direction: column;
    gap: 0.45rem !important;
}

.kk-rail-section,
.kk-menu-mark,
.kk-section-head h2::before,
.kk-monitor-title h2::before,
.kk-map-section-head h2::before,
.kk-panel > h2::before,
.kk-section > h2::before,
.kk-notification-dot,
.kk-flash-dot {
    display: none !important;
}

.kk-rail-nav a {
    position: relative;
    min-height: 2.6rem;
    border: 1px solid var(--fix-line) !important;
    border-radius: 8px !important;
    background: var(--fix-panel-soft) !important;
    color: var(--fix-text) !important;
    text-decoration: none !important;
}

.kk-rail-nav a:hover,
.kk-rail-nav a.is-active {
    border-color: rgba(66, 215, 255, 0.48) !important;
    background: rgba(66, 215, 255, 0.12) !important;
    color: #ffffff !important;
}

.kk-rail-nav a.kk-rail-link--server,
.kk-rail-nav a[href^="/minecraft/"] {
    border-color: rgba(120, 224, 143, 0.42) !important;
    background: rgba(120, 224, 143, 0.10) !important;
}

.kk-rail-nav a.kk-rail-link--server strong,
.kk-rail-nav a[href^="/minecraft/"] strong {
    color: #c8ffd3 !important;
}

.kk-rail-nav a.kk-rail-link--download,
.kk-rail-nav a[href="/downloads"] {
    margin-top: auto;
    border-color: rgba(255, 209, 102, 0.52) !important;
    background: rgba(255, 209, 102, 0.13) !important;
}

.kk-rail-nav a.kk-rail-link--download strong,
.kk-rail-nav a[href="/downloads"] strong {
    color: #ffe49a !important;
}

.kk-monitor-card,
.kk-server-card {
    transition: border-color 0.18s ease, background 0.18s ease;
}

.kk-monitor-card.is-online,
.kk-server-card.is-online {
    border-color: rgba(120, 224, 143, 0.42) !important;
}

.kk-monitor-card.is-offline,
.kk-server-card.is-offline {
    border-color: rgba(255, 120, 120, 0.34) !important;
}

.kk-monitor-state {
    border: 1px solid var(--fix-line) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--fix-muted) !important;
}

.is-online .kk-monitor-state {
    border-color: rgba(120, 224, 143, 0.45) !important;
    background: rgba(120, 224, 143, 0.12) !important;
    color: #c8ffd3 !important;
}

.kk-monitor-bar {
    background: rgba(255, 255, 255, 0.08) !important;
    overflow: hidden;
}

.kk-monitor-bar i {
    background: linear-gradient(90deg, var(--fix-server), var(--fix-accent)) !important;
    transition: width 0.25s ease;
}

.kk-notification-body a,
.kk-notification-body a:hover,
.kk-notification-body p a,
.kk-notification-body p a:hover {
    color: var(--fix-text) !important;
    text-decoration: none !important;
}

.kk-notification-body a:hover {
    color: #ffffff !important;
}

a {
    text-decoration-thickness: 1px;
}

@media (max-width: 760px) {
    .guest-online-count {
        min-height: 2.1rem;
        padding-inline: 0.6rem;
    }

    .kk-rail-nav a.kk-rail-link--download,
    .kk-rail-nav a[href="/downloads"] {
        margin-top: 0;
    }
}

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        radial-gradient(circle at 0% 0%, rgba(196, 181, 253, 0.45) 0%, transparent 45%),
        radial-gradient(circle at 100% 20%, rgba(125, 211, 252, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 80% 100%, rgba(253, 164, 175, 0.35) 0%, transparent 40%),
        repeating-linear-gradient(
            -12deg,
            transparent,
            transparent 28px,
            rgba(17, 17, 17, 0.025) 28px,
            rgba(17, 17, 17, 0.025) 29px
        );
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--pink); }

.container { width: min(620px, 100% - 1.25rem); margin-inline: auto; }

/* —— Header —— */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ink);
    color: #fff;
    border-bottom: var(--border);
    box-shadow: var(--shadow);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 56px;
}

.is-guest .header-inner { justify-content: center; }

.logo {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.03em;
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
}

.logo:hover { color: var(--lime); text-decoration: none; }

.logo em {
    font-style: normal;
    display: inline-block;
    background: var(--lime);
    color: var(--ink);
    padding: 0.05em 0.2em;
    border-radius: 6px;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    transform: rotate(-4deg);
}

.logo span { color: var(--sky); font-weight: 500; }

.main-nav {
    display: flex;
    gap: 0.35rem;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}

.main-nav::-webkit-scrollbar { display: none; }

.main-nav a {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.main-nav a:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    transform: translateY(-1px);
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    margin-left: 0.15rem;
    background: var(--pink);
    color: var(--ink);
    font-size: 0.65rem;
    font-weight: 800;
    border: 2px solid var(--ink);
    border-radius: 999px;
    vertical-align: middle;
    text-decoration: none;
}

.logout-form { margin-left: auto; }

/* —— Layout —— */
.main-content { padding: 1.35rem 0 2rem; flex: 1; }
.flash-wrap { padding-top: 0.65rem; }

.is-guest .main-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0 3rem;
}

.is-guest .main-content:has(.landing) {
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 1.5rem;
}

.landing {
    width: min(920px, 100% - 1.25rem);
    margin-inline: auto;
}

.landing-hero { text-align: center; padding: 2rem 1.5rem; }

.landing-kicker {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.65;
}

.landing-title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.35rem, 4.5vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    word-break: break-word;
}

.landing-title em {
    font-style: normal;
    background: var(--lime);
    padding: 0 0.15em;
    border: var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.landing-title span { color: var(--sky); font-weight: 600; }

.landing-lead {
    margin: 0 auto 1.25rem;
    max-width: 40ch;
    font-size: 0.95rem;
    line-height: 1.45;
    opacity: 0.85;
}

.landing-stats {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.landing-stat { display: flex; flex-direction: column; align-items: center; }

.landing-stat-num {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.landing-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.landing-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
}

.landing-actions .btn {
    width: 100%;
    min-width: 0;
    padding: 0.7rem 0.65rem;
    font-size: 0.88rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    hyphens: auto;
}

.btn-lg { padding: 0.7rem 1rem; font-size: 0.95rem; }

@media (max-width: 400px) {
    .landing-actions { grid-template-columns: 1fr; max-width: 260px; }
    .landing-hero { padding: 1.5rem 1rem; }
}

.landing-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.landing-feature { text-align: center; padding: 1.25rem 1rem; }

.landing-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 0.65rem;
    border: var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.landing-feature-icon:has(.icon--home) { background: var(--ico-home-bg); border-color: var(--ico-home); }
.landing-feature-icon:has(.icon--friends) { background: var(--ico-friends-bg); border-color: var(--ico-friends); }
.landing-feature-icon:has(.icon--messages) { background: var(--ico-messages-bg); border-color: var(--ico-messages); }
.landing-feature-icon:has(.icon--like) { background: var(--ico-like-bg); border-color: var(--ico-like); }

.landing-feature h2 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}

.landing-feature p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.75;
    line-height: 1.45;
}

.online-pulse::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--ok);
    border: 2px solid var(--ink);
    border-radius: 50%;
    margin-right: 0.35rem;
    vertical-align: middle;
    animation: blink 1.5s step-end infinite;
}

/* —— Footer (одна строка) —— */
.site-footer {
    padding: 0.45rem 0;
    background: var(--ink);
    color: #888;
    border-top: var(--border);
}

.footer-line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
}

.footer-dot { color: #444; }

.online-indicator {
    color: var(--lime);
    font-weight: 700;
    text-decoration: none;
}

.online-indicator:hover { text-decoration: underline; }

.online-indicator::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--lime);
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    margin-right: 0.25rem;
    vertical-align: middle;
    animation: blink 1.5s step-end infinite;
}

.footer-weather {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: rgba(255, 255, 255, 0.72);
}

.footer-weather::before {
    content: '';
    width: 0.65rem;
    height: 0.65rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: var(--sky);
    box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.18);
}

.footer-weather-label {
    font-weight: 800;
    color: var(--sky);
}

.footer-weather-value {
    font-weight: 700;
}

.footer-weather-button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.35rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.footer-weather-button:disabled {
    cursor: wait;
    opacity: 0.8;
}

.footer-weather-button:focus-visible {
    outline: 2px solid var(--sky);
    outline-offset: 3px;
    border-radius: 999px;
}

.weather-popover[hidden] {
    display: none;
}

.weather-popover {
    position: absolute;
    z-index: 600;
    left: 50%;
    bottom: calc(100% + 0.7rem);
    display: block;
    width: min(360px, calc(100vw - 1rem));
    max-height: min(520px, 72vh);
    overflow: auto;
    transform: translateX(-50%);
    padding: 0.75rem;
    color: #111111;
    background: #ffffff;
    border: var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    text-align: left;
    white-space: normal;
}

.weather-popover::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.55rem;
    width: 0.85rem;
    height: 0.85rem;
    transform: translateX(-50%) rotate(45deg);
    background: #ffffff;
    border-right: 2.5px solid var(--ink);
    border-bottom: 2.5px solid var(--ink);
}

.weather-popover-head,
.weather-day-summary,
.weather-hour-card {
    display: block;
}

.weather-popover-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.weather-popover-head strong {
    font-size: 0.95rem;
    line-height: 1.15;
}

.weather-popover-head span {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.65;
}

.weather-day-summary {
    margin-bottom: 0.6rem;
    padding: 0.35rem 0.5rem;
    background: var(--lime);
    border: 2px solid var(--ink);
    border-radius: 8px;
    box-shadow: 2px 2px 0 var(--ink);
    font-weight: 800;
}

.weather-hourly {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.weather-hour-card {
    min-width: 0;
    padding: 0.45rem;
    background: #f8fafc;
    border: 2px solid var(--ink);
    border-radius: 8px;
    box-shadow: 2px 2px 0 var(--ink);
}

.weather-hour-time,
.weather-hour-desc,
.weather-hour-meta {
    display: block;
}

.weather-hour-time {
    font-size: 0.68rem;
    font-weight: 800;
    opacity: 0.7;
}

.weather-hour-card strong {
    display: block;
    margin: 0.05rem 0;
    font-size: 1.05rem;
    line-height: 1;
}

.weather-hour-desc {
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 800;
    text-overflow: ellipsis;
}

.weather-hour-meta {
    margin-top: 0.18rem;
    font-size: 0.66rem;
    font-weight: 700;
    opacity: 0.72;
}

@keyframes blink {
    50% { opacity: 0.4; }
}

/* —— Cards —— */
.card {
    background: var(--card);
    border: var(--border);
    border-radius: var(--radius);
    padding: 1.2rem 1.3rem;
    margin-bottom: 0.85rem;
    box-shadow: var(--shadow);
    transition: transform 0.15s, box-shadow 0.15s;
}

.card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--ink);
}

.page-title {
    margin: 0 0 1rem;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.page-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border: var(--border);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(217, 249, 157, 0.42)),
        var(--card);
    box-shadow: var(--shadow);
}

.page-hero .page-title {
    margin: 0;
    line-height: 1;
}

.page-hero p {
    margin: 0.3rem 0 0;
    max-width: 38rem;
    font-weight: 650;
}

.page-hero-kicker {
    color: rgba(17, 17, 17, 0.58);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.page-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    border: var(--border);
    border-radius: 14px;
    background: var(--lime);
    box-shadow: var(--shadow-sm);
}

.page-hero-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: 0.32rem 0.7rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    font-size: 0.85rem;
    font-weight: 900;
}

.page-hero--news .page-hero-icon { background: var(--ico-news-bg); color: var(--ico-news); }
.page-hero--feed .page-hero-icon { background: var(--ico-home-bg); color: var(--ico-home); }
.page-hero--messages .page-hero-icon { background: var(--ico-messages-bg); color: var(--ico-messages); }
.page-hero--groups .page-hero-icon { background: var(--ico-groups-bg); color: var(--ico-groups); }
.page-hero--friends .page-hero-icon { background: var(--ico-friends-bg); color: var(--ico-friends); }
.page-hero--notifications .page-hero-icon { background: var(--ico-notifications-bg); color: var(--ico-notifications); }
.page-hero--search .page-hero-icon { background: var(--ico-search-bg); color: var(--ico-search); }
.page-hero--useful .page-hero-icon { background: var(--ico-useful-bg); color: var(--ico-useful); }
.page-hero--info .page-hero-icon { background: var(--ico-info-bg); color: var(--ico-info); }
.page-hero--online .page-hero-icon { background: var(--ico-friends-bg); color: var(--ico-friends); }

.page-section-card h2,
.info-block h2 {
    display: inline-flex;
    align-items: center;
    margin-top: 0;
    padding: 0.2rem 0.55rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--lime);
    box-shadow: 2px 2px 0 var(--ink);
    font-size: 1rem;
}

.page-card-accent {
    border-left: 7px solid var(--sky);
}

.page-empty {
    margin-top: 0;
}

.search-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem;
    border-left: 7px solid var(--sky);
}

.search-panel label {
    margin: 0;
}

.page-list-card {
    border-left: 7px solid var(--lime);
}

.section-title {
    margin: 1.75rem 0 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.profile-wall {
    margin-top: 1.8rem;
    padding-top: 1rem;
    border-top: 2px dashed rgba(17, 17, 17, 0.18);
}

.profile-wall-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.85rem 1rem;
    border: var(--border);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(217, 249, 157, 0.95), rgba(125, 211, 252, 0.28)),
        var(--card);
    box-shadow: var(--shadow);
}

.profile-wall-kicker {
    margin: 0 0 0.1rem;
    color: rgba(17, 17, 17, 0.58);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.profile-wall-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
}

.profile-wall-count {
    flex-shrink: 0;
    padding: 0.28rem 0.65rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    font-size: 0.78rem;
    font-weight: 900;
}

.profile-wall-list .post-card:last-child {
    margin-bottom: 0;
}

.profile-friends-back {
    margin: -0.35rem 0 0.75rem;
}

.profile-friend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-friend-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 5rem;
    padding: 0.8rem;
    border: var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--shadow);
    color: var(--ink);
    text-decoration: none;
}

.profile-friend-card:hover {
    transform: translate(-2px, -2px);
    text-decoration: none;
}

.profile-friend-card span {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.profile-friend-card strong,
.profile-friend-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-friend-card small {
    color: rgba(17, 17, 17, 0.62);
    font-weight: 700;
}

/* —— Buttons —— */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: var(--border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.1s, box-shadow 0.1s;
}

.btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.btn-primary {
    background: var(--lime);
    color: var(--ink);
}

.btn-primary:hover {
    background: #bef264;
    color: var(--ink);
}

.btn-secondary {
    background: var(--violet);
    color: var(--ink);
}

.btn-secondary:hover { background: #a78bfa; color: var(--ink); }

.btn-ghost {
    background: var(--paper);
    color: var(--ink);
}

.btn-outline {
    background: transparent;
    color: #fff;
    border-color: #fff;
    box-shadow: none;
}

.btn-outline:hover {
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.btn-block { width: 100%; }

/* —— Forms —— */
label {
    display: block;
    margin-bottom: 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="file"],
textarea {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.6rem 0.8rem;
    border: var(--border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

input:focus,
textarea:focus {
    outline: none;
    background: #fffef5;
    box-shadow: 4px 4px 0 var(--sky);
}

textarea { resize: vertical; min-height: 80px; }
.composer textarea { margin-bottom: 0; resize: vertical; min-height: 4rem; max-height: 16rem; }

.composer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 2px dashed rgba(17, 17, 17, 0.15);
}

.composer-hint {
    flex: 1;
    min-width: 140px;
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.55;
}

.composer-count {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.composer-count.is-warn { color: var(--err); }

.composer-bar .btn-primary { margin-left: auto; }

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    margin: 0.5rem 0 0.75rem;
    border: var(--border);
    border-radius: 12px;
    background: var(--paper);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform 0.12s, background 0.12s;
}

.sidebar-user:hover {
    transform: translate(-2px, -2px);
    background: var(--lime);
    text-decoration: none;
}

.sidebar-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.sidebar-user-text strong {
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-text small {
    font-size: 0.72rem;
    opacity: 0.6;
}

.bottom-nav { position: relative; }

.bottom-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 18px);
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.2rem;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1rem;
    text-align: center;
    background: var(--pink);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 999px;
}

/* —— Colorful SVG icons —— */
.icon {
    display: block;
    flex-shrink: 0;
}

.icon--news { color: var(--ico-news); }
.icon--home { color: var(--ico-home); }
.icon--messages { color: var(--ico-messages); }
.icon--groups { color: var(--ico-groups); }
.icon--friends { color: var(--ico-friends); }
.icon--notifications { color: var(--ico-notifications); }
.icon--search { color: var(--ico-search); }
.icon--useful { color: var(--ico-useful); }
.icon--profile { color: var(--ico-profile); }
.icon--info { color: var(--ico-info); }
.icon--admin { color: var(--ico-admin); }
.icon--logout { color: var(--ico-logout); }
.icon--like { color: var(--ico-like); }
.icon--dislike { color: var(--ico-dislike); }
.icon--neutral { color: var(--ico-neutral); }
.icon--inbox { color: var(--ico-inbox); }
.icon--comment { color: var(--ico-comment); }
.icon--edit { color: var(--ico-edit); }
.icon--trash { color: var(--ico-trash); }
.icon--menu { color: var(--ico-menu); }
.icon--share { color: var(--ico-share); }
.icon--send { color: var(--ico-send); }
.icon--arrow-up { color: var(--ico-arrow-up); }
.icon--more-vertical { color: var(--ico-more-vertical); }

.icon--nav {
    width: 1.35rem;
    height: 1.35rem;
}

.icon--empty {
    width: 3rem;
    height: 3rem;
}

.icon--reaction {
    width: 1.1rem;
    height: 1.1rem;
}

.reaction-glyph {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.icon--inline {
    display: inline-block;
    vertical-align: -0.2em;
    margin: 0 0.1rem;
}

.sidebar-icon .icon {
    width: 1.15rem;
    height: 1.15rem;
}

.sidebar-icon:has(.icon--news) { background: var(--ico-news-bg); border-color: var(--ico-news); }
.sidebar-icon:has(.icon--home) { background: var(--ico-home-bg); border-color: var(--ico-home); }
.sidebar-icon:has(.icon--messages) { background: var(--ico-messages-bg); border-color: var(--ico-messages); }
.sidebar-icon:has(.icon--groups) { background: var(--ico-groups-bg); border-color: var(--ico-groups); }
.sidebar-icon:has(.icon--friends) { background: var(--ico-friends-bg); border-color: var(--ico-friends); }
.sidebar-icon:has(.icon--notifications) { background: var(--ico-notifications-bg); border-color: var(--ico-notifications); }
.sidebar-icon:has(.icon--search) { background: var(--ico-search-bg); border-color: var(--ico-search); }
.sidebar-icon:has(.icon--useful) { background: var(--ico-useful-bg); border-color: var(--ico-useful); }
.sidebar-icon:has(.icon--profile) { background: var(--ico-profile-bg); border-color: var(--ico-profile); }
.sidebar-icon:has(.icon--info) { background: var(--ico-info-bg); border-color: var(--ico-info); }
.sidebar-icon:has(.icon--admin) { background: var(--ico-admin-bg); border-color: var(--ico-admin); }
.sidebar-icon:has(.icon--logout) { background: var(--ico-logout-bg); border-color: var(--ico-logout); }

.sidebar-link:hover .sidebar-icon,
.sidebar-link.is-active .sidebar-icon {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--ink);
}

.bottom-nav .icon--news { color: #38bdf8; }
.bottom-nav .icon--home { color: #a3e635; }
.bottom-nav .icon--messages { color: #c4b5fd; }
.bottom-nav .icon--useful { color: #5eead4; }
.bottom-nav .icon--info { color: #67e8f9; }
.bottom-nav .icon--profile { color: #e879f9; }

.bottom-nav a.is-active .icon--news { color: #7dd3fc; filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.65)); }
.bottom-nav a.is-active .icon--home { color: #d9f99d; filter: drop-shadow(0 0 6px rgba(163, 230, 53, 0.55)); }
.bottom-nav a.is-active .icon--messages { color: #ddd6fe; filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.55)); }
.bottom-nav a.is-active .icon--useful { color: #99f6e4; filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.55)); }
.bottom-nav a.is-active .icon--info { color: #a5f3fc; filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.55)); }
.bottom-nav a.is-active .icon--profile { color: #f0abfc; filter: drop-shadow(0 0 6px rgba(232, 121, 249, 0.55)); }

.reaction-btn--like.active { background: var(--ico-like-bg); border-color: var(--ico-like); }
.reaction-btn--dislike.active { background: var(--ico-dislike-bg); border-color: var(--ico-dislike); }
.reaction-btn--neutral.active { background: var(--ico-neutral-bg); border-color: var(--ico-neutral); }

.post-body,
.news-card-body,
.comment-list span,
.chat-msg {
    font-family: var(--font), "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

.emoji-char {
    font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.15em;
    line-height: 1;
    vertical-align: -0.08em;
}

.btn-icon:has(.icon--edit) { color: var(--ico-edit); }
.btn-icon:has(.icon--trash) { color: var(--ico-trash); }

.comment-count .icon--like { color: var(--ico-like); }
.comment-count .icon--comment { color: var(--ico-comment); }

.empty-icon .icon { filter: drop-shadow(2px 2px 0 rgba(17, 17, 17, 0.12)); }

.comment-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    opacity: 0.75;
}

.comment-count--total {
    padding: 0.24rem 0.55rem;
    border: 2px solid rgba(17, 17, 17, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.64);
    font-weight: 850;
    opacity: 1;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.45rem;
    min-width: 2rem;
}

.scroll-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 1rem;
    bottom: 5rem;
    z-index: 90;
    width: 2.75rem;
    height: 2.75rem;
    border: var(--border);
    border-radius: 12px;
    background: var(--lime);
    color: var(--ink);
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: opacity 0.2s, transform 0.15s;
}

.scroll-top:not([hidden]) { display: flex; }

.scroll-top:hover { transform: translate(-2px, -2px); }

.is-auth .scroll-top { bottom: 5.5rem; }

@media (max-width: 720px) {
    .card:hover { transform: none; box-shadow: var(--shadow); }
    .composer-hint { display: none; }
}

/* —— Alerts —— */
.alert {
    padding: 0.7rem 0.9rem;
    border: var(--border);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: var(--shadow-sm);
}

.alert-error { background: var(--pink); color: var(--ink); }
.alert-success { background: var(--lime); color: var(--ink); }
.alert-info { background: var(--sky); color: var(--ink); margin-bottom: 0.75rem; padding: 0.7rem 0.9rem; border: var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); font-weight: 600; font-size: 0.875rem; }

/* —— Auth —— */
.auth-card { max-width: 400px; width: 100%; margin: 0 auto; }
.auth-card h1 { margin: 0 0 1rem; font-size: 1.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; }
.auth-footer { text-align: center; margin-top: 1rem; font-size: 0.875rem; font-weight: 500; }
.auth-footer a { font-weight: 700; }

.form-card h1 { margin: 0 0 0.85rem; font-size: 1.35rem; text-transform: uppercase; }
.breadcrumb { margin: 0 0 0.75rem; font-size: 0.8rem; font-weight: 600; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.form-divider { border: none; border-top: var(--border); margin: 1rem 0; }

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
}

.checkbox-label input { width: auto; margin-top: 0.2rem; accent-color: var(--ink); }

/* —— Avatars —— */
.avatar {
    border-radius: 50%;
    object-fit: cover;
    background: var(--violet);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.avatar-sm { width: 34px; height: 34px; }
.avatar-md { width: 46px; height: 46px; }
.avatar-lg { width: 76px; height: 76px; }
.avatar-xl { width: 100px; height: 100px; }
.avatar-preview { margin-bottom: 0.75rem; }

/* —— Posts —— */
.post-card {
    background: var(--card);
    border: var(--border);
    border-radius: var(--radius);
    padding: 1.2rem 1.3rem;
    margin-bottom: 0.85rem;
    box-shadow: var(--shadow);
    border-left: 6px solid var(--lime);
    transition: transform 0.15s, box-shadow 0.15s;
}

.post-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--ink);
}

.post-card:nth-child(3n+2) { border-left-color: var(--sky); }
.post-card:nth-child(3n) { border-left-color: var(--pink); }

.post-header {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    margin-bottom: 0.65rem;
}

.post-author {
    font-weight: 700;
    font-size: 0.95rem;
    display: block;
    text-decoration: none;
}

.post-author:hover { text-decoration: underline; }

.post-time { font-size: 0.75rem; font-weight: 500; opacity: 0.55; }

.post-body {
    margin-bottom: 0.65rem;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.95rem;
}

.post-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.65rem;
    border-top: 2px dashed rgba(17, 17, 17, 0.15);
}

.post-open-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.post-open-link:hover {
    background: var(--sky);
    text-decoration: none;
}

.btn-like {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--ink);
    transition: transform 0.1s, background 0.1s;
}

.btn-like:hover,
.btn-like.active {
    background: var(--pink);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--ink);
}

.comment-list { list-style: none; padding: 0; margin: 0.65rem 0 0; }

.comment-list li {
    display: flex;
    gap: 0.5rem;
    padding: 0.55rem;
    margin-bottom: 0.4rem;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px;
    font-size: 0.85rem;
}

.comment-list strong { display: block; font-size: 0.78rem; margin-bottom: 0.1rem; }
.comment-list time { display: block; font-size: 0.7rem; opacity: 0.5; margin-top: 0.15rem; }

.post-more-comments {
    margin: 0.55rem 0 0;
    font-size: 0.84rem;
    font-weight: 800;
}

.post-more-comments a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.62rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--violet);
    color: var(--ink);
    text-decoration: none;
    box-shadow: 2px 2px 0 var(--ink);
}

.post-more-comments a:hover {
    background: var(--lime);
}

.comment-form { display: flex; gap: 0.4rem; margin-top: 0.65rem; }
.comment-form input { flex: 1; margin: 0; font-size: 0.85rem; }

.inline-form { display: inline; }

/* —— Profile —— */
.profile-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem 1rem;
    background: linear-gradient(135deg, var(--lime) 0%, var(--sky) 100%);
    border: var(--border);
    box-shadow: var(--shadow);
}

.profile-hero .avatar-xl {
    border-width: 3px;
    background: #fff;
}

.profile-info h1 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.profile-info .username { margin: 0.1rem 0 0.35rem; font-weight: 600; font-size: 0.85rem; }
.profile-info .bio { margin: 0 0 0.35rem; font-size: 0.9rem; }

.profile-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

@media (min-width: 500px) {
    .profile-hero {
        grid-template-columns: auto 1fr auto;
        align-items: start;
    }

    .profile-actions {
        grid-column: 3;
        grid-row: 1 / 4;
        flex-direction: column;
    }
}

@media (max-width: 499px) {
    .profile-hero { text-align: center; grid-template-columns: 1fr; }
    .profile-hero .avatar-xl { margin: 0 auto; }
    .profile-actions { justify-content: center; }
}

/* —— Lists —— */
.user-list, .notification-list { list-style: none; padding: 0; margin: 0; }

.user-list li, .notification-list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0;
    border-bottom: 2px dashed rgba(17, 17, 17, 0.12);
}

.user-list li:last-child, .notification-list li:last-child { border-bottom: none; }

.notification-list li.unread {
    background: var(--lime);
    margin: 0 -1.3rem;
    padding: 0.7rem 1.3rem;
    border-left: 4px solid var(--ink);
}

.add-friend-form { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.add-friend-form input { flex: 1; min-width: 120px; margin: 0; }

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    font-weight: 600;
    font-size: 0.95rem;
    opacity: 0.6;
}

.pagination {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
    font-weight: 600;
    font-size: 0.85rem;
}

.badge-muted { opacity: 0.55; font-size: 0.85rem; font-weight: 600; }
.badge-success { color: var(--ok); font-weight: 700; }
.meta { font-size: 0.85rem; font-weight: 500; opacity: 0.65; }
.text-center { text-align: center; }

.breadcrumb--icon {
    margin: 0 0 0.75rem;
}

.breadcrumb--icon a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--lime);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
}

.breadcrumb--icon a:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

@media (max-width: 380px) {
    .footer-line { font-size: 0.65rem; }
}

/* —— New features UI —— */
.header-search { flex: 1; max-width: 200px; margin: 0 0.25rem; }
.header-search input {
    width: 100%; margin: 0; padding: 0.35rem 0.6rem; font-size: 0.8rem;
    border: 2px solid rgba(255,255,255,0.35); background: rgba(0,0,0,0.2); color: #fff;
    box-shadow: none;
}
.header-search input::placeholder { color: rgba(255,255,255,0.55); }

.nav-toggle {
    display: none; background: var(--lime); border: 2px solid var(--ink);
    border-radius: 8px; padding: 0.35rem 0.55rem; font-size: 1rem; cursor: pointer;
}

.main-nav a.is-active { background: var(--lime); color: var(--ink); border-color: var(--ink); }

.bottom-nav {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    background: var(--ink); border-top: var(--border); padding: 0.35rem 0.5rem;
    justify-content: space-around; box-shadow: 0 -4px 0 var(--ink);
}
.bottom-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    border-radius: 10px;
    transition: color 0.15s, background 0.15s;
}
.bottom-nav a.is-active {
    color: var(--lime);
    background: rgba(255, 255, 255, 0.08);
}

.toast-root { position: fixed; top: 70px; right: 1rem; z-index: 200; display: flex; flex-direction: column; gap: 0.5rem; }
.toast {
    padding: 0.65rem 1rem; border: var(--border); border-radius: 10px;
    box-shadow: var(--shadow); font-weight: 600; font-size: 0.85rem;
    transform: translateX(120%); transition: transform 0.3s;
    max-width: 280px;
}
.toast.show, .toast.is-visible { transform: translateX(0); }
.toast-success, .toast--notify { background: var(--lime); color: var(--ink); }
.toast-error { background: var(--pink); color: var(--ink); }
.toast--message { background: var(--sky); color: var(--ink); }
.toast--sound {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: var(--violet);
    color: var(--ink);
}
.toast--sound button {
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.28rem 0.5rem;
    cursor: pointer;
}

.feed-tabs { display: flex; gap: 0.35rem; margin-bottom: 0.85rem; }
.feed-tab {
    padding: 0.4rem 0.85rem; border: var(--border); border-radius: 999px;
    font-weight: 700; font-size: 0.85rem; text-decoration: none; color: var(--ink);
    box-shadow: var(--shadow-sm);
}
.feed-tab.active, .feed-tab:hover { background: var(--lime); }

.reaction-bar { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--paper); border: 2px solid var(--ink); border-radius: 999px;
    padding: 0.25rem 0.6rem; font-size: 0.78rem; font-weight: 700; cursor: pointer;
    box-shadow: 2px 2px 0 var(--ink); font-family: inherit;
    color: var(--ink);
}
.reaction-btn.pop { animation: pop 0.25s ease; }
@keyframes pop { 50% { transform: scale(1.15); } }

.post-header { flex-wrap: wrap; }
.post-manage { margin-left: auto; display: flex; gap: 0.25rem; }

.profile-hero.has-cover { padding: 0; overflow: hidden; display: block; }
.profile-cover {
    height: 120px; background-size: cover; background-position: center;
    border-bottom: var(--border);
}
.profile-hero-body {
    display: grid; grid-template-columns: auto 1fr; gap: 0.85rem 1rem;
    padding: 1rem 1.2rem; align-items: start;
}
.profile-hero.has-cover .profile-hero-body {
    margin-top: -40px;
}
.profile-hero.has-cover .avatar-xl { position: relative; z-index: 1; }

.profile-details {
    display: grid;
    gap: 0.35rem;
    margin: 0.65rem 0 0;
    padding: 0.65rem 0.75rem;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.profile-details-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.88rem;
}

.profile-details dt {
    margin: 0;
    font-weight: 700;
    opacity: 0.65;
}

.profile-details dd {
    margin: 0;
    font-weight: 600;
}

.profile-about {
    margin-top: 0.65rem;
}

.profile-about-title {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.55;
}

.profile-info .bio {
    margin: 0;
    line-height: 1.5;
}

.stats-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.65rem;
}
.stat-box {
    border: var(--border); border-radius: 12px; padding: 0.85rem; text-align: center;
    box-shadow: var(--shadow-sm); background: var(--paper);
}
.stat-num { display: block; font-size: 1.75rem; font-weight: 800; }
.stat-label { font-size: 0.75rem; font-weight: 600; opacity: 0.65; }

.admin-health { margin-top: 1rem; }
.admin-checklist { margin: 0.5rem 0 0; padding-left: 1.25rem; font-size: 0.9rem; }
.admin-checklist li { margin-bottom: 0.35rem; }
.admin-health .hint { margin: 0.75rem 0 0; font-size: 0.85rem; opacity: 0.8; }

.theme-picker { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.65rem; }
.theme-option {
    border: var(--border); padding: 0.45rem 0.75rem; border-radius: 8px;
    font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm);
}
.theme-option:has(input:checked) { background: var(--lime); }

/* v20260526-17: stable profile header */
.profile-hero,
.profile-hero.has-cover {
    display: block;
    padding: 0;
    overflow: hidden;
    border: var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.profile-cover {
    position: relative;
    min-height: 138px;
    height: 138px;
    border-bottom: var(--border);
    background:
        linear-gradient(135deg, rgba(217, 249, 157, 0.92), rgba(125, 211, 252, 0.88) 48%, rgba(253, 164, 175, 0.82)),
        repeating-linear-gradient(-12deg, rgba(17, 17, 17, 0.08) 0 2px, transparent 2px 18px);
    background-size: cover;
    background-position: center;
}

.profile-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, transparent 42%, rgba(255, 255, 255, 0.5)),
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.38), transparent 34%);
}

.profile-hero-body,
.profile-hero.has-cover .profile-hero-body {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    grid-template-areas:
        "avatar info"
        "actions info";
    gap: 0.55rem 1rem;
    align-items: start;
    margin-top: 0;
    padding: 0 1.1rem 0.85rem;
    position: relative;
    z-index: 1;
}

.profile-avatar-wrap {
    grid-area: avatar;
    display: grid;
    place-items: center;
    padding: 0.25rem;
    width: 126px;
    height: 126px;
    margin-top: -42px;
    border: var(--border);
    border-radius: 22px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.profile-hero .avatar-xl,
.profile-hero.has-cover .avatar-xl {
    width: 104px;
    height: 104px;
    margin: 0;
    border-width: 2.5px;
    box-shadow: none;
    position: static;
}

.profile-info {
    grid-area: info;
    min-width: 0;
    padding: 0.9rem 0 0;
}

.profile-kicker {
    display: inline-flex;
    max-width: 100%;
    margin: 0 0 0.2rem;
    padding: 0.12rem 0.5rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--lime);
    box-shadow: 2px 2px 0 var(--ink);
    font-size: 0.78rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-info h1 {
    margin: 0;
    font-size: 1.85rem;
    line-height: 1.08;
    text-transform: none;
    overflow-wrap: anywhere;
    letter-spacing: 0;
}

.profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

.profile-stats span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.55rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    font-size: 0.8rem;
    font-weight: 700;
}

.profile-stats a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.55rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
}

.profile-stats a:hover {
    background: var(--lime);
    transform: translateY(-1px);
    text-decoration: none;
}

.profile-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.4rem;
    padding-bottom: 0;
}

.profile-content {
    display: grid;
    gap: 0.75rem;
    padding: 0 1.1rem 1rem;
}

.profile-content .profile-details {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 0.55rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.profile-content .profile-details-row {
    display: block;
    min-width: 0;
    padding: 0.52rem 0.62rem;
    border: 2px solid var(--ink);
    border-radius: 10px;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.profile-content .profile-details dt {
    margin: 0 0 0.15rem;
    font-size: 0.72rem;
    text-transform: uppercase;
}

.profile-content .profile-details dd {
    overflow-wrap: anywhere;
}

.profile-content .profile-about {
    margin: 0;
    padding: 0.75rem;
    border: 2px solid var(--ink);
    border-radius: 10px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

/* v20260526-18: profile settings media controls */
.settings-card {
    padding-top: 1.05rem;
}

.settings-head {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.settings-head h1 {
    margin: 0;
}

.settings-back {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--lime);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
}

.settings-back:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.settings-media {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.settings-avatar-preview {
    display: grid;
    place-items: center;
    position: relative;
    width: 94px;
    height: 94px;
    border: var(--border);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.settings-avatar-preview .avatar {
    box-shadow: none;
}

.file-pick {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    flex: 1;
}

.file-pick input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.file-pick span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem;
    border: var(--border);
    border-radius: 12px;
    background: var(--violet);
    box-shadow: var(--shadow-sm);
    font-weight: 800;
}

.file-pick:hover span {
    background: var(--lime);
}

.file-pick.is-selected span {
    background: var(--lime);
}

.file-pick small {
    color: rgba(17, 17, 17, 0.62);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: none;
}

.avatar-remove-btn {
    position: absolute;
    right: -0.45rem;
    top: -0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 2px solid var(--ink);
    border-radius: 10px;
    background: var(--pink);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.avatar-remove-btn:hover {
    transform: translate(-1px, -1px);
}

.cover-picker {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.cover-picker legend {
    margin-bottom: 0.45rem;
    font-weight: 800;
    text-transform: uppercase;
}

.cover-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.cover-option {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    cursor: pointer;
}

.cover-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.cover-option-preview {
    display: block;
    aspect-ratio: 3 / 1;
    border: 2px solid var(--ink);
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-sm);
}

.cover-option-name {
    display: inline-flex;
    justify-content: center;
    padding: 0.28rem 0.45rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.cover-option input:checked + .cover-option-preview {
    outline: 4px solid var(--lime);
    transform: translateY(-1px);
}

.cover-option input:checked + .cover-option-preview + .cover-option-name {
    border-color: var(--ink);
    background: var(--lime);
}

@media (max-width: 680px) {
    .profile-wall-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .profile-cover { height: 124px; min-height: 124px; }
    .profile-hero-body,
    .profile-hero.has-cover .profile-hero-body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "avatar"
            "info"
            "actions";
        justify-items: center;
        text-align: center;
        gap: 0.55rem;
        padding-top: 0;
    }
    .profile-avatar-wrap {
        margin-top: -44px;
    }
    .profile-info {
        padding-top: 0;
    }
    .profile-info h1 {
        font-size: 1.45rem;
    }
    .profile-actions {
        justify-content: center;
    }
    .profile-stats {
        justify-content: center;
    }
    .settings-grid {
        grid-template-columns: 1fr;
    }
    .settings-media {
        align-items: stretch;
    }
    .cover-options {
        grid-template-columns: 1fr;
    }
}

.chat-box { min-height: 280px; display: flex; flex-direction: column; }
.chat-messages {
    list-style: none; padding: 0; margin: 0 0 0.75rem; flex: 1;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    overflow-anchor: none;
    gap: 0.5rem;
}
.chat-scroll-anchor {
    height: 0; margin: 0; padding: 0; border: 0; overflow: hidden;
    list-style: none; visibility: hidden;
}

/* Страница диалога: лента на весь экран, прокрутка только внутри чата */
.page-chat .main-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding-bottom: 0.5rem;
}
.page-chat .breadcrumb { flex-shrink: 0; }
.page-chat .chat-box {
    flex: 1;
    min-height: 0;
    max-height: calc(100dvh - 7.5rem);
}
.page-chat .chat-messages {
    max-height: none;
    min-height: 12rem;
}
.page-chat .comment-form { flex-shrink: 0; }
.chat-msg {
    margin: 0; flex-shrink: 0; padding: 0.5rem 0.65rem; border: 2px solid var(--ink);
    border-radius: 10px; background: var(--paper); max-width: 85%;
}
.chat-msg.mine { margin-left: auto; background: var(--lime); }
.chat-msg time { display: block; font-size: 0.7rem; opacity: 0.55; margin-top: 0.2rem; }
.chat-error {
    margin: 0 0 0.5rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.85rem;
    color: #b00020;
    border: 2px solid #b00020;
    border-radius: 8px;
    background: #fff5f5;
}
.chat-error[hidden] { display: none; }

.empty-icon {
    display: flex;
    justify-content: center;
    margin: 0 0 0.5rem;
    color: var(--ink);
}
.empty-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.conv-preview { flex: 1; min-width: 0; }
.conv-last { margin: 0.15rem 0 0; font-size: 0.8rem; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.is-auth { padding-bottom: 4rem; }

@media (max-width: 720px) {
    .nav-toggle { display: block; }
    .main-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--ink); flex-direction: column; padding: 0.75rem;
        border-bottom: var(--border); box-shadow: var(--shadow);
    }
    .main-nav.is-open { display: flex; }
    .main-nav a { color: #fff; }
    .header-search { max-width: none; order: 3; flex-basis: 100%; }
    .logout-form { display: none; }
    .bottom-nav { display: flex; }
    .site-header { position: relative; }
}

@media (min-width: 721px) {
    .bottom-nav { display: none !important; }
    .is-auth { padding-bottom: 0; }
}

/* —— VK-style sidebar layout (logged in) —— */
.is-auth {
    padding-bottom: 0;
}

.is-auth:not(.page-kormkota) .site-header,
.is-auth .header-search,
.is-auth .main-nav,
.is-auth .logout-form,
.is-auth .nav-toggle {
    display: none !important;
}

.app-shell {
    display: flex;
    min-height: 100vh;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--card);
    border-right: var(--border);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 120;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    padding: 1rem 1rem 0.75rem;
    text-decoration: none;
    color: var(--ink);
    font-size: 0.95rem;
}

.sidebar-logo:hover { color: var(--ink); text-decoration: none; }
.sidebar-logo em { transform: rotate(-4deg); margin-right: 0.15rem; }
.sidebar-logo span { color: var(--sky); }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0 0.5rem;
    flex: 1;
    overflow-y: auto;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
    text-decoration: none;
    border: 2px solid transparent;
    position: relative;
}

.sidebar-link:hover {
    background: var(--paper);
    text-decoration: none;
}

.sidebar-link.is-active {
    background: var(--lime);
    border-color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.sidebar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: 2px solid var(--ink);
    border-radius: 8px;
    box-shadow: 2px 2px 0 var(--ink);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.sidebar-badge--msg {
    background: var(--sky);
}

.sidebar-badge {
    margin-left: auto;
    background: var(--pink);
    color: var(--ink);
    font-size: 0.65rem;
    font-weight: 800;
    min-width: 1.1rem;
    height: 1.1rem;
    line-height: 1.1rem;
    text-align: center;
    border-radius: 999px;
    border: 2px solid var(--ink);
    padding: 0 0.25rem;
}

.sidebar-player {
    margin: 0.45rem 0.5rem 0.5rem;
    padding: 0.55rem;
    border: 2px solid var(--ink);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(217, 249, 157, 0.85), rgba(196, 181, 253, 0.5)),
        var(--card);
    box-shadow: var(--shadow-sm);
}

.player-head {
    display: grid;
    grid-template-columns: 1.65rem minmax(0, 1fr);
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
}

.player-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--sky);
    box-shadow: 2px 2px 0 var(--ink);
}

.player-title {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.3rem;
}

.player-btn {
    display: inline-grid;
    place-items: center;
    min-width: 0;
    height: 2rem;
    padding: 0;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--card);
    color: var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
}

.player-btn:hover,
.player-btn:focus-visible {
    background: var(--lime);
}

.player-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--ink);
}

.player-btn--play {
    background: var(--lime);
}

.sidebar-player.is-playing .player-icon,
.sidebar-player.is-playing .player-btn--play {
    background: var(--pink);
}

.player-progress {
    height: 0.45rem;
    margin-top: 0.45rem;
    overflow: hidden;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
}

.player-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--ink);
}

.sidebar-foot {
    padding: 0.5rem;
    border-top: 2px dashed rgba(17, 17, 17, 0.12);
    border-bottom: 2px dashed rgba(17, 17, 17, 0.12);
}

.sidebar-link--btn {
    width: 100%;
    background: none;
    border: 2px solid transparent;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    max-width: 640px;
}

.mobile-top {
    display: none;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    background: var(--ink);
    color: #fff;
    border-bottom: var(--border);
}

.mobile-title {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-open {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lime);
    border: 2px solid var(--ink);
    border-radius: 8px;
    padding: 0.4rem;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--ink);
    cursor: pointer;
    font-family: inherit;
}

.is-auth .main-content {
    padding: 1rem 1rem 1.25rem;
    flex: 1;
    width: 100%;
    max-width: none;
    margin: 0;
}

.is-auth .flash-wrap {
    padding: 0.65rem 1rem 0;
}

.is-auth .site-footer {
    padding: 0.4rem 1rem;
    background: transparent;
    border-top: none;
}

.is-auth .footer-line {
    color: var(--ink);
    opacity: 1;
}

.is-auth .footer-dot {
    opacity: 0.45;
}

.is-auth .online-indicator {
    color: #15803d;
    font-weight: 800;
    background: var(--card);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.is-auth .online-indicator:hover {
    background: var(--lime);
    text-decoration: none;
}

.is-auth .online-indicator::before {
    background: #22c55e;
    border-color: var(--ink);
}

.is-auth .footer-weather {
    color: var(--ink);
    opacity: 1;
    background: var(--card);
    padding: 0.15rem 0.55rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
}

.is-auth .footer-weather::before {
    background: var(--sky);
    color: var(--ink);
    box-shadow: none;
}

.is-auth .footer-weather-label {
    color: var(--ink);
}

.is-auth .page-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.page-title--sm { font-size: 1.1rem; }

.online-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.online-page-subtitle {
    margin: -0.25rem 0 0;
    font-size: 0.9rem;
    opacity: 0.7;
}

.online-page-count {
    display: inline-grid;
    place-items: center;
    min-width: 2.3rem;
    height: 2.3rem;
    padding: 0 0.55rem;
    border: var(--border);
    border-radius: 999px;
    background: var(--lime);
    box-shadow: var(--shadow-sm);
    font-weight: 900;
}

.online-user-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

.online-user-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem;
    border: var(--border);
    border-radius: 12px;
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.online-user-card:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow);
    text-decoration: none;
}

.online-user-main {
    min-width: 0;
}

.online-user-main strong,
.online-user-main small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.online-user-main small,
.online-user-card time {
    font-size: 0.78rem;
    opacity: 0.62;
}

.online-user-card time {
    white-space: nowrap;
}

.card--compact {
    padding: 0.85rem 1rem;
    margin-bottom: 0.65rem;
}

.is-auth .card {
    padding: 1rem 1.1rem;
    margin-bottom: 0.65rem;
}

.is-auth .card:hover {
    transform: none;
    box-shadow: var(--shadow);
}

.is-guest .container { width: min(420px, 100% - 1.25rem); }

.site-header--guest {
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner--guest { justify-content: center; min-height: 52px; }

.main-content--guest {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.toast-root { top: 1rem; }

@media (max-width: 768px) {
    .app-shell { max-width: none; }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--shadow);
    }

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

    .mobile-top { display: flex; }

    .app-main { max-width: none; }

    .is-auth { padding-bottom: 3.5rem; }

    .bottom-nav { display: flex; }
}

@media (min-width: 769px) {
    .bottom-nav { display: none !important; }
    .mobile-top { display: none !important; }
}

.news-list { display: flex; flex-direction: column; gap: 0.75rem; }
.news-card-title { margin: 0 0 0.25rem; font-size: 1.15rem; }
.news-card-meta { margin: 0; font-size: 0.78rem; opacity: 0.65; }
.news-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.news-card-actions { display: flex; gap: 0.25rem; flex-shrink: 0; }
.news-card-body {
    margin-top: 0.65rem;
    line-height: 1.55;
    font-size: 0.95rem;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
}
.news-composer .section-title { margin-top: 0; }

.info-block h2 { margin: 0 0 0.65rem; font-size: 1.1rem; }
.info-block p { margin: 0 0 0.5rem; line-height: 1.5; }
.info-steps { margin: 0; padding-left: 1.25rem; line-height: 1.55; }
.info-steps li { margin-bottom: 0.45rem; }
.info-block .btn-lg { margin: 0.75rem 0; }

.install-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
    border-left: 7px solid var(--lime);
    background:
        radial-gradient(circle at 86% 12%, rgba(122, 214, 255, 0.28) 0 4.4rem, transparent 4.5rem),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 255, 218, 0.92) 54%, rgba(224, 247, 255, 0.9));
}

.install-card::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    bottom: -2.7rem;
    width: 9rem;
    height: 9rem;
    border: 2px solid rgba(17, 17, 17, 0.07);
    border-radius: 2rem;
    transform: rotate(-10deg);
    background: rgba(255, 255, 255, 0.36);
    pointer-events: none;
}

.install-card-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.install-app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 4.6rem;
    width: 4.6rem;
    height: 4.6rem;
    border: 4px solid var(--ink);
    border-radius: 1.15rem;
    background: linear-gradient(145deg, var(--lime), #fff 68%);
    box-shadow: 5px 5px 0 var(--ink);
    color: var(--ink);
    font-size: 2.35rem;
    font-weight: 900;
    line-height: 1;
}

.install-app-icon em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.85rem;
    border: 3px solid var(--ink);
    border-radius: 0.48rem;
    background: var(--card);
    font-style: normal;
}

.install-card-copy {
    min-width: 0;
}

.install-kicker {
    display: inline-flex;
    margin-bottom: 0.18rem;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
}

.install-card h2 {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 2.05rem);
    line-height: 1.05;
}

.install-card p {
    max-width: 42rem;
    margin: 0.45rem 0 0;
    line-height: 1.45;
}

.install-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.28rem;
    margin-top: 0.7rem;
}

.install-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 1.78rem;
    padding: 0.16rem 0.46rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--card);
    box-shadow: 2px 2px 0 var(--ink);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.install-card-action {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: end;
    gap: 0.45rem;
    min-width: 15rem;
}

.install-button {
    width: 100%;
    min-height: 3rem;
    box-shadow: 4px 4px 0 var(--ink);
}

.install-hint {
    max-width: 18rem;
    margin: 0;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 800;
}

.info-registered-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
    border-left: 7px solid var(--sky);
    background:
        linear-gradient(135deg, rgba(217, 255, 143, 0.88), rgba(244, 251, 255, 0.96) 52%, rgba(198, 239, 255, 0.78)),
        repeating-linear-gradient(90deg, rgba(17, 17, 17, 0.045) 0 1px, transparent 1px 32px);
}

.info-registered-card::after {
    content: "";
    position: absolute;
    right: 1.3rem;
    top: -1.9rem;
    width: 8rem;
    height: 8rem;
    border: 2px solid rgba(17, 17, 17, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

.info-registered-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    border: 3px solid var(--ink);
    border-radius: 1.05rem;
    background: var(--ico-profile-bg);
    color: var(--ico-profile);
    box-shadow: var(--shadow-sm);
}

.info-registered-main {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.info-registered-label,
.info-registered-text {
    color: var(--muted);
    font-weight: 900;
}

.info-registered-label {
    font-size: 0.92rem;
    text-transform: uppercase;
}

.info-registered-main strong {
    color: var(--ink);
    font-size: clamp(2.6rem, 6vw, 4.1rem);
    line-height: 0.95;
    font-weight: 900;
}

.info-registered-text {
    font-size: 1.05rem;
}

.info-registered-badge {
    position: relative;
    z-index: 1;
    align-self: end;
    padding: 0.35rem 0.75rem;
    border: 3px solid var(--ink);
    border-radius: 999px;
    background: var(--card);
    box-shadow: 3px 3px 0 var(--ink);
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .info-registered-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.75rem;
    }

    .info-registered-icon {
        width: 3.7rem;
        height: 3.7rem;
    }

    .info-registered-badge {
        grid-column: 1 / -1;
        justify-self: start;
        font-size: 0.76rem;
    }

    .install-card {
        grid-template-columns: 1fr;
    }

    .install-card-main {
        align-items: flex-start;
    }

    .install-app-icon {
        flex-basis: 3.8rem;
        width: 3.8rem;
        height: 3.8rem;
        box-shadow: 4px 4px 0 var(--ink);
        font-size: 1.8rem;
    }

    .install-app-icon em {
        width: 1.95rem;
        height: 2.35rem;
    }

    .install-card-action {
        justify-items: stretch;
        min-width: 0;
    }

    .install-hint {
        max-width: none;
        text-align: left;
    }
}

/* v20260710-global-rail1: one left navigation for social/profile pages */
.page-kormkota .kk-social-dashboard,
.page-kormkota .kk-news-dashboard,
.page-kormkota .kk-profile-dashboard {
    align-items: start;
}

.page-kormkota .kk-news-dashboard > .kk-rail:not(.kk-rail--global),
.page-kormkota .kk-profile-dashboard > .kk-rail:not(.kk-rail--global),
.page-kormkota .kk-downloads-page > .kk-rail:not(.kk-rail--global) {
    display: none !important;
}

.page-kormkota .kk-rail--global {
    align-self: start;
}

.page-kormkota .kk-social-workspace,
.page-kormkota .kk-news-dashboard > .kk-workspace,
.page-kormkota .kk-profile-dashboard > .kk-workspace,
.page-kormkota .kk-downloads-page > .kk-workspace {
    min-width: 0;
    width: 100%;
}

.page-kormkota .kk-social-workspace > .page-hero,
.page-kormkota .kk-social-workspace > .card,
.page-kormkota .kk-social-workspace > .empty-state,
.page-kormkota .kk-social-workspace > .post-list,
.page-kormkota .kk-social-workspace > .composer,
.page-kormkota .kk-social-workspace > .messenger-app {
    width: 100%;
}

.page-kormkota .kk-social-workspace > .page-hero {
    margin-top: 0;
}

.page-kormkota .kk-messages-dashboard .messenger-app {
    min-height: min(760px, calc(100svh - 14rem));
}

.page-kormkota .kk-sound-settings--profile {
    grid-column: 1 / -1;
}

.page-kormkota .kk-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.page-kormkota .kk-settings-actions .kk-action {
    text-decoration: none;
}

@media (max-width: 900px) {
    .page-kormkota .kk-social-dashboard,
    .page-kormkota .kk-news-dashboard,
    .page-kormkota .kk-profile-dashboard,
    .page-kormkota .kk-downloads-page {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* v20260710-global-rail2: force the homepage rail set everywhere */
.page-kormkota .kk-dashboard > .kk-rail--global ~ .kk-rail {
    display: none !important;
}

/* v20260710-balloons1: catch falling reward balloons */
.reward-balls-layer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
    overflow: hidden;
}

.reward-ball {
    --ball-size: 50px;
    --ball-left: 50vw;
    --fall-duration: 6000ms;
    position: absolute;
    top: calc(var(--ball-size) * -1.4);
    left: var(--ball-left);
    width: var(--ball-size);
    height: var(--ball-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    color: #041019;
    cursor: pointer;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 1000;
    line-height: 1;
    pointer-events: auto;
    transform: translate3d(-50%, -80px, 0);
    transition: transform var(--fall-duration) linear, opacity 0.22s ease, scale 0.22s ease;
    background: transparent !important;
    box-shadow: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
    user-select: none;
}

.reward-ball span {
    position: absolute;
    left: 50%;
    top: calc(100% - 0.1rem);
    width: 0.72rem;
    height: 0.58rem;
    border-radius: 0 0 45% 45%;
    background: inherit;
    filter: brightness(0.82);
    transform: translateX(-50%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.reward-ball i {
    position: absolute;
    inset: 0;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 54% 54% 50% 50% / 48% 48% 58% 58%;
    background: inherit;
    box-shadow: inset 0 8px 12px rgba(255, 255, 255, 0.45), inset 0 -10px 18px rgba(0, 0, 0, 0.16), 0 10px 30px rgba(0, 0, 0, 0.28);
    animation: reward-ball-sway 1.35s ease-in-out infinite alternate;
}

.reward-ball i::before {
    content: "";
    position: absolute;
    inset: 9%;
    border-radius: inherit;
    background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.08) 36%, transparent 48%);
}

.reward-ball i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 0.42rem);
    width: 1px;
    height: 1.8rem;
    background: linear-gradient(rgba(247, 251, 255, 0.65), rgba(247, 251, 255, 0));
    transform: translateX(-50%);
}

@keyframes reward-ball-sway {
    0% {
        transform: translateX(-16px) rotate(-7deg);
    }
    50% {
        transform: translateX(10px) rotate(5deg);
    }
    100% {
        transform: translateX(18px) rotate(8deg);
    }
}

.reward-ball.is-falling {
    transform: translate3d(-50%, calc(100vh + 120px), 0) rotate(360deg);
}

.reward-ball.is-caught {
    opacity: 0;
    scale: 1.3;
    transition: opacity 0.48s ease, scale 0.48s ease;
}

.reward-ball--cyan {
    background: transparent;
}

.reward-ball--cyan i {
    background: radial-gradient(circle at 30% 25%, #f7fbff, #43e6ff 34%, #0b82d8 100%);
}

.reward-ball--green {
    background: transparent;
}

.reward-ball--green i {
    background: radial-gradient(circle at 30% 25%, #f7fbff, #8cff5f 36%, #1fb86a 100%);
}

.reward-ball--violet {
    background: transparent;
}

.reward-ball--violet i {
    background: radial-gradient(circle at 30% 25%, #f7fbff, #a98cff 36%, #7044e8 100%);
}

.reward-ball--orange {
    background: transparent;
}

.reward-ball--orange i {
    background: radial-gradient(circle at 30% 25%, #fff7d8, #ffb347 36%, #f06d2f 100%);
}

.reward-ball--pink {
    background: transparent;
}

.reward-ball--pink i {
    background: radial-gradient(circle at 30% 25%, #fff4fb, #ff66c4 36%, #e8338f 100%);
}

.reward-ball-note {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.35rem);
    min-width: max-content;
    padding: 0.28rem 0.48rem;
    border: 1px solid rgba(67, 230, 255, 0.45);
    border-radius: 999px;
    background: rgba(5, 12, 27, 0.92);
    color: #f7fbff;
    font-size: 0.72rem;
    transform: translateX(-50%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

.reward-ball-note.is-ok {
    color: #8cff5f;
}

.reward-ball-note.is-wait {
    color: #ffcc66;
}

/* v20260717-news-balls-pop1 */
.kk-section-head.kk-section-head--center {
    justify-content: center;
    text-align: center;
}

.kk-section-head.kk-section-head--center h2 {
    margin-inline: auto;
}

.reward-ball.is-caught {
    opacity: 1;
    scale: 1;
    animation-play-state: paused !important;
    transition: none;
}

.reward-ball.is-caught i {
    opacity: 0;
    transform: scale(1.55) rotate(10deg);
    transition: opacity 0.16s ease, transform 0.2s ease;
}

.reward-ball.is-caught i::after {
    opacity: 0;
}

.reward-ball .reward-ball-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 0;
    height: 0;
    clip-path: none;
    background: transparent;
    filter: none;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.reward-ball-burst b {
    position: absolute;
    left: 0;
    top: 0;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 45% 55% 50% 50%;
    background: #f7fbff;
    box-shadow: 0 0 12px currentColor;
    animation: reward-ball-pop-piece 0.46s ease-out forwards;
}

.reward-ball--cyan .reward-ball-burst b {
    color: #43e6ff;
    background: #43e6ff;
}

.reward-ball--green .reward-ball-burst b {
    color: #8cff5f;
    background: #8cff5f;
}

.reward-ball--violet .reward-ball-burst b {
    color: #b790ff;
    background: #b790ff;
}

.reward-ball--orange .reward-ball-burst b {
    color: #ffb15f;
    background: #ffb15f;
}

.reward-ball--pink .reward-ball-burst b {
    color: #ff66c4;
    background: #ff66c4;
}

.reward-ball .reward-ball-note {
    left: 50%;
    top: auto;
    width: auto;
    height: auto;
    min-width: max-content;
    clip-path: none;
    filter: none;
    transform: translateX(-50%);
    z-index: 2;
}

@keyframes reward-ball-pop-piece {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--pop-x), var(--pop-y)) scale(0.15) rotate(var(--pop-rotate));
    }
}

@media (max-width: 640px) {
    .reward-ball {
        --ball-size: 46px;
    }
}

/* v20260711-auth-gates1: registration required for player actions */
.page-kormkota .kk-auth-required-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 2.55rem;
    padding: 0.62rem 0.95rem;
    border: 1px solid rgba(67, 230, 255, 0.45);
    border-radius: 999px;
    color: #041019;
    background: linear-gradient(135deg, #8cff5f, #43e6ff);
    font-weight: 1000;
    text-decoration: none;
}

.page-kormkota .kk-auth-required-card {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(67, 230, 255, 0.22);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(8, 18, 35, 0.94), rgba(4, 10, 22, 0.98));
    color: #c7d1e5;
}

.page-kormkota .kk-auth-required-card strong {
    color: #f7fbff;
}

.page-kormkota .kk-auth-required-card div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

/* v20260711-no-section-icons1: text-only section navigation */
.page-kormkota .kk-rail-nav .kk-menu-mark,
.page-kormkota .page-hero-icon {
    display: none !important;
}

.page-kormkota .kk-rail-nav a {
    grid-template-columns: minmax(0, 1fr) !important;
}

.page-kormkota .page-hero {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

/* v20260711-toast1: unified dark flash/toast messages */
.flash-wrap--toast {
    position: fixed;
    top: clamp(5.5rem, 10vh, 7.5rem);
    right: max(1rem, env(safe-area-inset-right));
    z-index: 2600;
    width: min(360px, calc(100vw - 2rem));
    padding: 0;
    pointer-events: none;
}

.kk-flash-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid rgba(67, 230, 255, 0.28);
    border-radius: 16px;
    color: #f7fbff;
    background: linear-gradient(145deg, rgba(8, 18, 35, 0.96), rgba(4, 10, 22, 0.98));
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
    pointer-events: auto;
    animation: kk-toast-in 0.22s ease-out both;
}

.kk-flash-toast p {
    margin: 0;
    color: inherit;
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.3;
}

.kk-flash-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: #43e6ff;
    box-shadow: 0 0 18px rgba(67, 230, 255, 0.72);
}

.kk-flash-toast--success .kk-flash-dot {
    background: #8cff5f;
    box-shadow: 0 0 18px rgba(140, 255, 95, 0.7);
}

.kk-flash-toast--error .kk-flash-dot,
.kk-flash-toast--danger .kk-flash-dot {
    background: #ff5f7a;
    box-shadow: 0 0 18px rgba(255, 95, 122, 0.7);
}

.kk-flash-toast--info .kk-flash-dot {
    background: #43e6ff;
}

.kk-flash-toast button {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(67, 230, 255, 0.18);
    border-radius: 10px;
    color: #c7d1e5;
    background: rgba(67, 230, 255, 0.08);
    cursor: pointer;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
}

.kk-flash-toast button:hover,
.kk-flash-toast button:focus-visible {
    color: #f7fbff;
    border-color: rgba(67, 230, 255, 0.48);
}

@keyframes kk-toast-in {
    from {
        opacity: 0;
        transform: translateY(-0.5rem) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 640px) {
    .flash-wrap--toast {
        top: auto;
        right: 0.75rem;
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        width: calc(100vw - 1.5rem);
    }
}

/* v20260711-message-send1: cleaner messenger send button */
.page-kormkota .chat-compose {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.75rem !important;
}

.page-kormkota .chat-send {
    width: auto !important;
    min-width: 8.6rem !important;
    height: 2.95rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0 1rem !important;
    border: 1px solid rgba(67, 230, 255, 0.5) !important;
    border-radius: 16px !important;
    color: #f7fbff !important;
    background: linear-gradient(135deg, rgba(12, 44, 60, 0.96), rgba(7, 18, 36, 0.98)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 12px 28px rgba(0, 0, 0, 0.24) !important;
    font-size: 0.92rem;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: 0;
}

.page-kormkota .chat-send .icon {
    width: 1.05rem;
    height: 1.05rem;
    color: #43e6ff;
}

.page-kormkota .chat-send:hover,
.page-kormkota .chat-send:focus-visible {
    border-color: rgba(67, 230, 255, 0.78) !important;
    background: linear-gradient(135deg, rgba(16, 60, 80, 0.98), rgba(8, 25, 46, 0.98)) !important;
}

.page-kormkota .chat-send:disabled {
    cursor: wait;
    opacity: 0.58;
}

@media (max-width: 640px) {
    .page-kormkota .chat-compose {
        grid-template-columns: minmax(0, 1fr) 3rem !important;
        gap: 0.55rem !important;
    }

    .page-kormkota .chat-send {
        min-width: 3rem !important;
        width: 3rem !important;
        height: 3rem !important;
        padding: 0 !important;
        border-radius: 14px !important;
    }

    .page-kormkota .chat-send span {
        display: none;
    }
}

/* v20260711-message-no-icons1: message actions are text-only, no send bird/icons. */
.page-kormkota .messenger-sidebar-head .messenger-app-icon,
.page-kormkota .messenger-welcome-card .messenger-app-icon,
.page-kormkota .messenger-icon-btn .icon,
.page-kormkota .chat-send .icon {
    display: none !important;
}

.page-kormkota .messenger-sidebar-head {
    grid-template-columns: minmax(0, 1fr) !important;
}

.page-kormkota .messenger-search-form div {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.page-kormkota .messenger-icon-btn {
    width: auto !important;
    min-width: 7.3rem !important;
    height: 2.75rem !important;
    padding: 0 0.95rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 15px !important;
    color: #f7fbff !important;
    background: linear-gradient(135deg, rgba(12, 44, 60, 0.96), rgba(7, 18, 36, 0.98)) !important;
    border: 1px solid rgba(67, 230, 255, 0.5) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 12px 28px rgba(0, 0, 0, 0.24) !important;
    font-size: 0.84rem;
    font-weight: 1000;
    line-height: 1;
    text-transform: uppercase;
}

.page-kormkota .chat-send {
    min-width: 8.4rem !important;
}

@media (max-width: 640px) {
    .page-kormkota .chat-compose {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .page-kormkota .chat-send {
        width: auto !important;
        min-width: 7.2rem !important;
        padding: 0 0.85rem !important;
    }

    .page-kormkota .chat-send span {
        display: inline !important;
    }

    .page-kormkota .messenger-icon-btn {
        min-width: 6.8rem !important;
        padding: 0 0.8rem !important;
    }
}

/* v20260711-friends-redesign1: clean dark friends page */
.page-kormkota .kk-friends-page {
    display: grid;
    gap: 1rem;
}

.page-kormkota .kk-friends-hero,
.page-kormkota .kk-friends-card {
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: linear-gradient(180deg, rgba(10, 15, 29, 0.96), rgba(7, 12, 24, 0.98));
    box-shadow: inset 0 0 0 1px rgba(67, 230, 255, 0.025);
}

.page-kormkota .kk-friends-hero {
    min-height: 7.5rem;
    padding: clamp(1.15rem, 2vw, 1.7rem);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.page-kormkota .kk-friends-hero p,
.page-kormkota .kk-friends-card-head span {
    margin: 0;
    color: #43e6ff;
    font-size: 0.78rem;
    font-weight: 1000;
    letter-spacing: 0;
    text-transform: uppercase;
}

.page-kormkota .kk-friends-hero h1 {
    margin: 0.2rem 0 0.25rem;
    color: #f7fbff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 0.96;
}

.page-kormkota .kk-friends-hero div > span {
    display: block;
    max-width: 46rem;
    color: rgba(205, 216, 235, 0.82);
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    font-weight: 800;
    line-height: 1.35;
}

.page-kormkota .kk-friends-hero > strong {
    flex: 0 0 auto;
    width: 4.25rem;
    height: 4.25rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(67, 230, 255, 0.5);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(35, 255, 141, 0.18), rgba(67, 230, 255, 0.16));
    color: #a6ff3f;
    font-size: 1.55rem;
    font-weight: 1000;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.page-kormkota .kk-friends-card {
    padding: clamp(1rem, 1.7vw, 1.35rem);
    border-radius: 24px;
    display: grid;
    gap: 1rem;
}

.page-kormkota .kk-friends-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.page-kormkota .kk-friends-card-head h2 {
    margin: 0;
    color: #f7fbff;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1;
}

.page-kormkota .kk-friends-card-head span {
    padding: 0.52rem 0.78rem;
    border: 1px solid rgba(67, 230, 255, 0.42);
    border-radius: 999px;
    background: rgba(5, 28, 42, 0.86);
    color: #43e6ff;
}

.page-kormkota .kk-friends-add-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: stretch;
}

.page-kormkota .kk-friends-add-form input {
    width: 100%;
    min-width: 0;
    height: 3.4rem;
    margin: 0;
    border-radius: 16px;
    border: 1px solid rgba(67, 230, 255, 0.44);
    background: rgba(3, 9, 20, 0.88);
    color: #f7fbff;
    padding: 0 1rem;
    font-weight: 850;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.page-kormkota .kk-friends-add-form input::placeholder {
    color: rgba(205, 216, 235, 0.58);
}

.page-kormkota .kk-friends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 0.85rem;
}

.page-kormkota .kk-friend-tile {
    min-width: 0;
    display: grid;
    gap: 0.85rem;
    padding: 0.9rem;
    border: 1px solid rgba(67, 230, 255, 0.22);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(9, 31, 44, 0.82), rgba(11, 15, 30, 0.95));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.page-kormkota .kk-friend-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: #f7fbff;
    text-decoration: none;
}

.page-kormkota .kk-friend-main img {
    flex: 0 0 auto;
}

.page-kormkota .kk-friend-main span {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.page-kormkota .kk-friend-main strong,
.page-kormkota .kk-friend-main small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-kormkota .kk-friend-main strong {
    color: #f7fbff;
    font-size: 1.05rem;
    font-weight: 1000;
}

.page-kormkota .kk-friend-main small {
    color: rgba(205, 216, 235, 0.62);
    font-weight: 800;
}

.page-kormkota .kk-friend-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.page-kormkota .kk-friend-actions form {
    margin: 0;
}

.page-kormkota .kk-friends-primary,
.page-kormkota .kk-friends-ghost,
.page-kormkota .kk-friends-danger {
    min-height: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    padding: 0 1rem;
    border: 1px solid rgba(67, 230, 255, 0.44);
    font-size: 0.88rem;
    font-weight: 1000;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0;
    cursor: pointer;
}

.page-kormkota .kk-friends-primary {
    color: #06101c;
    background: linear-gradient(135deg, #a6ff3f, #43e6ff);
}

.page-kormkota .kk-friends-ghost {
    color: #dff7ff;
    background: rgba(6, 30, 45, 0.88);
}

.page-kormkota .kk-friends-danger {
    color: #ffd7de;
    border-color: rgba(255, 93, 110, 0.55);
    background: rgba(73, 15, 26, 0.7);
}

.page-kormkota .kk-friends-action {
    min-height: 2.45rem;
    padding: 0 0.78rem;
    font-size: 0.78rem;
}

.page-kormkota .kk-friends-empty {
    min-height: 8.5rem;
    display: grid;
    place-items: center;
    gap: 0.35rem;
    text-align: center;
    border: 1px solid rgba(67, 230, 255, 0.14);
    border-radius: 20px;
    background: rgba(4, 10, 22, 0.58);
    color: rgba(205, 216, 235, 0.72);
}

.page-kormkota .kk-friends-empty strong {
    color: #f7fbff;
    font-size: 1.05rem;
}

@media (max-width: 760px) {
    .page-kormkota .kk-friends-hero {
        align-items: flex-start;
    }

    .page-kormkota .kk-friends-hero > strong {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 16px;
    }

    .page-kormkota .kk-friends-add-form {
        grid-template-columns: 1fr;
    }

    .page-kormkota .kk-friends-primary,
    .page-kormkota .kk-friends-ghost,
    .page-kormkota .kk-friends-danger {
        width: 100%;
    }

    .page-kormkota .kk-friends-grid {
        grid-template-columns: 1fr;
    }
}

/* v20260711-dark-toasts-no-photo1: force every flash/toast into the dark KKO theme. */
.page-kormkota .flash-wrap--toast,
.flash-wrap--toast {
    position: fixed !important;
    top: clamp(5.5rem, 10vh, 7.5rem) !important;
    right: max(1rem, env(safe-area-inset-right)) !important;
    left: auto !important;
    width: min(360px, calc(100vw - 2rem)) !important;
    padding: 0 !important;
    z-index: 10000 !important;
    pointer-events: none !important;
}

.page-kormkota .kk-flash-toast,
.kk-flash-toast,
.page-kormkota .toast,
.toast,
.page-kormkota .alert,
.alert {
    color: #f7fbff !important;
    background: linear-gradient(145deg, rgba(8, 18, 35, 0.98), rgba(4, 10, 22, 0.99)) !important;
    border: 1px solid rgba(67, 230, 255, 0.38) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

.page-kormkota .kk-flash-toast p,
.kk-flash-toast p,
.page-kormkota .toast,
.toast,
.page-kormkota .alert,
.alert {
    color: #f7fbff !important;
}

.page-kormkota .kk-flash-toast--success,
.kk-flash-toast--success,
.page-kormkota .toast-success,
.toast-success,
.page-kormkota .alert-success,
.alert-success {
    background: linear-gradient(145deg, rgba(8, 24, 31, 0.98), rgba(4, 10, 22, 0.99)) !important;
    border-color: rgba(166, 255, 63, 0.36) !important;
}

.page-kormkota .kk-flash-toast--error,
.kk-flash-toast--error,
.page-kormkota .kk-flash-toast--danger,
.kk-flash-toast--danger,
.page-kormkota .toast-error,
.toast-error,
.page-kormkota .alert-error,
.alert-error {
    background: linear-gradient(145deg, rgba(38, 10, 20, 0.98), rgba(4, 10, 22, 0.99)) !important;
    border-color: rgba(255, 95, 122, 0.48) !important;
}

@media (max-width: 640px) {
    .page-kormkota .flash-wrap--toast,
    .flash-wrap--toast {
        top: auto !important;
        right: 0.75rem !important;
        bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
        width: calc(100vw - 1.5rem) !important;
    }
}

/* v20260711-chat-time1: calmer chat timestamps with exact send time. */
.page-kormkota .kk-mini-chat-list article time,
.page-kormkota .public-chat-bubble time,
.page-kormkota .chat-msg time {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-height: 1.5rem;
    padding: 0.22rem 0.5rem !important;
    border: 1px solid rgba(67, 230, 255, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(5, 18, 31, 0.82) !important;
    color: rgba(205, 216, 235, 0.72) !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.page-kormkota .kk-mini-chat-list article {
    grid-template-columns: 3rem minmax(0, 1fr) auto !important;
    align-items: center !important;
}

.page-kormkota .kk-mini-chat-list article time {
    align-self: center !important;
    justify-self: end !important;
    margin: 0 !important;
}

.page-kormkota .public-chat-bubble time,
.page-kormkota .chat-msg time {
    margin-top: 0.45rem !important;
    opacity: 1 !important;
}

.page-kormkota .chat-msg.mine time {
    margin-left: auto !important;
}

@media (max-width: 700px) {
    .page-kormkota .kk-mini-chat-list article {
        grid-template-columns: 2.8rem minmax(0, 1fr) !important;
    }

    .page-kormkota .kk-mini-chat-list article time {
        grid-column: 2;
        justify-self: start !important;
        margin-top: 0.35rem !important;
    }
}

/* v20260712-chat-profile-links1: chat authors open player profiles. */
.page-kormkota .kk-mini-chat-avatar {
    display: inline-flex;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
}

.page-kormkota .kk-mini-chat-avatar img {
    width: 42px;
    height: 42px;
}

.page-kormkota .kk-mini-chat-list h3 a,
.page-kormkota .public-chat-bubble header a {
    color: #f7fbff;
    text-decoration: none;
}

.page-kormkota .kk-mini-chat-list h3 a:hover,
.page-kormkota .kk-mini-chat-list h3 a:focus-visible,
.page-kormkota .public-chat-bubble header a:hover,
.page-kormkota .public-chat-bubble header a:focus-visible {
    color: #43e6ff;
    text-decoration: underline;
    text-underline-offset: 0.18rem;
}

/* v20260712-chat-nick-accent1: make chat nicknames stand apart from message text. */
.page-kormkota .kk-mini-chat-list h3,
.page-kormkota .public-chat-bubble header {
    min-width: 0;
}

.page-kormkota .kk-mini-chat-list h3 a,
.page-kormkota .public-chat-bubble header a {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0.12rem 0.46rem;
    border: 1px solid rgba(67, 230, 255, 0.22);
    border-radius: 999px;
    color: #43e6ff !important;
    background: linear-gradient(135deg, rgba(67, 230, 255, 0.1), rgba(166, 255, 63, 0.06));
    font-size: 0.88rem;
    font-weight: 1000;
    line-height: 1;
    text-decoration: none !important;
    text-shadow: 0 0 16px rgba(67, 230, 255, 0.22);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-kormkota .kk-mini-chat-list h3 a:hover,
.page-kormkota .kk-mini-chat-list h3 a:focus-visible,
.page-kormkota .public-chat-bubble header a:hover,
.page-kormkota .public-chat-bubble header a:focus-visible {
    border-color: rgba(166, 255, 63, 0.48);
    color: #a6ff3f !important;
    background: linear-gradient(135deg, rgba(166, 255, 63, 0.14), rgba(67, 230, 255, 0.1));
}

.page-kormkota .kk-mini-chat-list p,
.page-kormkota .public-chat-bubble p {
    margin-top: 0.32rem;
}

/* FIX personal messages scroll: the dialog has its own stable scroll area. */
.page-chat .app-shell {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
}
.page-chat .app-main {
    min-height: 0;
    height: 100dvh;
    overflow: hidden;
}
.page-chat .main-content {
    min-height: 0;
    overflow: hidden;
}
.page-chat .chat-box {
    height: 100%;
    overflow: hidden;
}
.page-chat .chat-messages {
    overscroll-behavior: contain;
}
.page-chat .site-footer {
    display: none;
}
@media (max-width: 768px) {
    .page-chat .app-shell,
    .page-chat .app-main {
        height: 100dvh;
        min-height: 100dvh;
    }
    .page-chat .main-content {
        padding-bottom: 4rem;
    }
}


/* v20260526: Личные сообщения — открывать диалог сразу в конце переписки. */
.page-chat .app-shell,
.page-chat .app-main {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.page-chat .app-main {
    display: flex;
    flex-direction: column;
}
.page-chat .main-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.page-chat .chat-box {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.page-chat .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
}
.page-chat .chat-scroll-anchor {
    display: block;
    flex: 0 0 1px;
    width: 1px;
    height: 1px;
    min-height: 1px;
    visibility: hidden;
}


/* FIX 20260526-3: личный диалог не должен улетать к старым сообщениям после F5.
   column-reverse делает scrollTop=0 нижней частью списка. */
.page-chat .chat-messages.chat-messages--reverse {
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
    scroll-behavior: auto;
    overflow-anchor: none;
}
.page-chat .chat-messages.chat-messages--reverse .chat-scroll-anchor {
    flex: 0 0 1px;
    height: 1px;
    min-height: 1px;
}


/* FIX 20260526-10: личные сообщения всегда снизу, без column-reverse. */
.page-chat .chat-messages {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-anchor: none !important;
    scroll-behavior: auto !important;
}
.page-chat .chat-messages.chat-messages--reverse {
    flex-direction: column !important;
}
.page-chat .chat-scroll-anchor {
    display: block !important;
    flex: 0 0 1px !important;
    height: 1px !important;
    min-height: 1px !important;
}

/* v20260526-11: private messages */
.messages-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.messages-subtitle {
    margin: -0.25rem 0 0;
    font-size: 0.9rem;
    opacity: 0.7;
}
.messages-start {
    padding: 0.8rem;
    margin-bottom: 0.8rem;
    border: var(--border);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}
.messages-start-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
}
.messages-start-form input {
    min-width: 0;
    margin: 0;
}
.messages-start-form .btn {
    gap: 0.35rem;
    white-space: nowrap;
}
.messages-start .hint {
    margin: 0.55rem 0 0;
}
.conversation-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
}
.conversation-item {
    margin: 0;
}
.conversation-link {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.7rem;
    color: var(--ink);
    text-decoration: none;
    border: var(--border);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}
.conversation-link:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow);
}
.conversation-item.has-unread .conversation-link {
    background: #fff7ed;
}
.conv-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.conv-title-row strong,
.conv-last {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-title-row time {
    flex-shrink: 0;
    font-size: 0.72rem;
    opacity: 0.58;
}
.conv-last {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.86rem;
    opacity: 0.78;
}
.conv-last em {
    font-style: normal;
    font-weight: 700;
}
.conv-last--empty {
    opacity: 0.52;
}
.conv-unread {
    display: inline-grid;
    place-items: center;
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0 0.35rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--pink);
    font-size: 0.78rem;
    font-weight: 800;
}
.messages-empty {
    text-align: center;
    padding: 1.5rem 1rem;
    border: var(--border);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}
.messages-empty h2 {
    margin: 0;
    font-size: 1.08rem;
}
.messages-empty p {
    margin: 0.35rem auto 0.8rem;
    max-width: 22rem;
    opacity: 0.7;
}
.avatar-xs {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ink);
    background: var(--paper);
}
.page-chat .main-content {
    padding-top: 0.6rem;
}
.messenger {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--border);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}
.messenger-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
    padding: 0.65rem 0.75rem;
    border-bottom: var(--border);
    background: #f8fafc;
}
.messenger-back {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    color: var(--ink);
    text-decoration: none;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    transform: rotate(-90deg);
}
.messenger-peer {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    color: var(--ink);
    text-decoration: none;
}
.messenger-peer span {
    min-width: 0;
}
.messenger-peer strong,
.messenger-peer small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.messenger-peer small {
    font-size: 0.78rem;
    opacity: 0.62;
}
.chat-empty {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-height: 12rem;
    padding: 1rem;
    text-align: center;
    color: var(--ink);
}
.chat-empty[hidden] {
    display: none;
}
.chat-empty span {
    opacity: 0.65;
}
.page-chat .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0.85rem;
    gap: 0.55rem;
    background:
        linear-gradient(rgba(17, 17, 17, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 17, 0.025) 1px, transparent 1px),
        var(--paper);
    background-size: 28px 28px;
}
.chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    width: fit-content;
    max-width: min(86%, 36rem);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.chat-msg.mine {
    margin-left: auto;
    background: transparent;
}
.chat-bubble {
    display: block;
    min-width: 0;
    padding: 0.52rem 0.65rem;
    border: 2px solid var(--ink);
    border-radius: 12px 12px 12px 4px;
    background: var(--card);
    box-shadow: 2px 2px 0 var(--ink);
}
.chat-msg.mine .chat-bubble {
    border-radius: 12px 12px 4px 12px;
    background: var(--lime);
}
.chat-bubble strong {
    display: block;
    margin-bottom: 0.18rem;
    font-size: 0.78rem;
}
.chat-text {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.chat-msg time {
    display: block;
    margin-top: 0.25rem;
    text-align: right;
    font-size: 0.68rem;
    opacity: 0.55;
}
.chat-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.6rem;
    gap: 0.5rem;
    align-items: end;
    flex-shrink: 0;
    padding: 0.65rem;
    border-top: var(--border);
    background: #f8fafc;
}
.chat-compose textarea {
    width: 100%;
    min-height: 2.6rem;
    max-height: 8rem;
    margin: 0;
    resize: none;
    line-height: 1.35;
}
.chat-send {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: var(--border);
    border-radius: 10px;
    background: var(--lime);
    color: var(--ink);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.chat-send:disabled {
    cursor: wait;
    opacity: 0.6;
}
.chat-error {
    flex-shrink: 0;
    margin: 0;
    border-width: 0 0 2px;
    border-radius: 0;
}
@media (max-width: 640px) {
    .messages-start-form {
        grid-template-columns: 1fr;
    }
    .conversation-link {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        padding: 0.6rem;
    }
    .conversation-link .avatar-md {
        width: 44px;
        height: 44px;
    }
    .page-chat .main-content {
        padding: 0;
    }
    .messenger {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .page-chat .chat-messages {
        padding: 0.7rem;
    }
    .chat-msg {
        max-width: 92%;
    }
}

/* v20260526-25: brighter tab pages */
.is-auth .page-hero,
.messages-head.page-hero,
.online-page-head.page-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.is-auth .page-hero .page-title,
.messages-head.page-hero .page-title,
.online-page-head.page-hero .page-title {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1;
}

.page-hero .messages-subtitle,
.page-hero .online-page-subtitle {
    margin: 0.3rem 0 0;
    opacity: 1;
}

.page-hero .page-hero-kicker {
    margin: 0 0 0.18rem;
}

.info-block h2,
.page-section-card h2 {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0.65rem;
    padding: 0.2rem 0.55rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--lime);
    box-shadow: 2px 2px 0 var(--ink);
    font-size: 1rem;
}

.search-panel input[type="search"] {
    min-height: 3rem;
    font-size: 1rem;
}

.useful-section {
    margin-top: 1.2rem;
}

.useful-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
}

.useful-section-head h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.05;
    text-transform: uppercase;
}

.useful-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.25rem 0.75rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--lime);
    box-shadow: var(--shadow-sm);
    font-size: 0.8rem;
    font-weight: 900;
    white-space: nowrap;
}

.useful-pill--fish {
    background: var(--ico-useful-bg);
}

.useful-weather {
    overflow: hidden;
}

.useful-weather-list {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.55rem;
}

.useful-weather-card {
    min-width: 0;
    padding: 0.65rem;
    border: 2px solid var(--ink);
    border-radius: 10px;
    background: #f8fafc;
    box-shadow: 3px 3px 0 var(--ink);
}

.useful-weather-card.is-today {
    background:
        linear-gradient(135deg, rgba(217, 249, 157, 0.9), rgba(125, 211, 252, 0.32)),
        var(--card);
}

.useful-weather-day,
.useful-weather-desc,
.useful-weather-meta {
    display: block;
}

.useful-weather-day {
    min-height: 2.05rem;
    color: rgba(17, 17, 17, 0.68);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}

.useful-weather-card strong {
    display: block;
    margin: 0.35rem 0 0.2rem;
    font-size: 1.15rem;
    line-height: 1;
}

.useful-weather-desc {
    font-size: 0.82rem;
    font-weight: 850;
}

.useful-weather-meta {
    margin-top: 0.35rem;
    color: rgba(17, 17, 17, 0.65);
    font-size: 0.72rem;
    font-weight: 750;
}

.useful-loading {
    grid-column: 1 / -1;
    padding: 0.8rem;
    border: 2px dashed rgba(17, 17, 17, 0.3);
    border-radius: 10px;
    font-weight: 800;
}

.useful-loading--error {
    background: #fee2e2;
}

.useful-fishing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.75rem;
}

.useful-fish-card {
    margin: 0;
    border-left: 7px solid var(--ico-useful-bg);
}

.useful-fish-card h3,
.useful-holiday-card h3,
.useful-month-card h3 {
    margin: 0 0 0.45rem;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
}

.useful-fish-card p {
    min-height: 3.8rem;
    margin: 0 0 0.65rem;
    font-weight: 650;
}

.useful-date-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--lime);
    box-shadow: 2px 2px 0 var(--ink);
    font-size: 0.78rem;
}

.useful-date-line + .useful-date-line {
    margin-top: 0.45rem;
}

.useful-date-line--quiet {
    background: #f1f5f9;
}

.useful-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 850;
}

.useful-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.useful-mark {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--ink);
    border-radius: 4px;
}

.useful-mark--state { background: var(--pink); }
.useful-mark--church { background: var(--sky); }
.useful-mark--fish { background: var(--lime); }

.useful-holiday-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.useful-holiday-card {
    margin: 0;
}

.useful-holiday-card ul {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.useful-holiday-card li {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    padding: 0.35rem 0.45rem;
    border: 2px solid rgba(17, 17, 17, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.useful-holiday-card time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.35rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--card);
    font-size: 0.72rem;
    font-weight: 900;
}

.useful-holiday-card span {
    min-width: 0;
    font-weight: 750;
}

.useful-year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.75rem;
}

.useful-month-card {
    padding: 0.75rem;
    border: var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-sm);
}

.useful-weekdays,
.useful-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.22rem;
}

.useful-weekdays {
    margin-bottom: 0.25rem;
    color: rgba(17, 17, 17, 0.55);
    font-size: 0.62rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.useful-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    min-width: 0;
    border: 1.5px solid rgba(17, 17, 17, 0.18);
    border-radius: 7px;
    background: #fff;
    font-size: 0.72rem;
    font-weight: 850;
}

.useful-date--blank {
    visibility: hidden;
}

.useful-date--state {
    background: var(--pink);
    border-color: var(--ink);
}

.useful-date--church {
    box-shadow: inset 0 -4px 0 var(--sky);
    border-color: var(--ink);
}

.useful-date--fish {
    outline: 2px solid var(--lime);
    outline-offset: -3px;
}

@media (max-width: 920px) {
    .useful-weather-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .useful-section-head,
    .useful-holiday-panels {
        grid-template-columns: 1fr;
    }

    .useful-section-head {
        display: grid;
        align-items: start;
    }

    .useful-legend {
        justify-content: flex-start;
    }
}

@media (max-width: 440px) {
    .useful-weather-list,
    .useful-fishing-grid,
    .useful-year-grid {
        grid-template-columns: 1fr;
    }
}

/* v20260527-3: Useful page mobile fit */
.page-useful .main-content--guest {
    display: block;
    align-items: initial;
    justify-content: initial;
    padding-top: 1rem;
}

.useful-section,
.useful-weather,
.useful-fish-card,
.useful-holiday-card,
.useful-month-card,
.useful-section-head,
.useful-section-head > *,
.useful-weather-card {
    min-width: 0;
}

.useful-section-head h2,
.useful-fish-card p,
.useful-holiday-card span,
.useful-weather-day,
.useful-weather-desc,
.useful-weather-meta,
.useful-loading {
    overflow-wrap: anywhere;
}

.useful-date-line {
    flex-wrap: wrap;
    align-items: flex-start;
}

.useful-date-line span {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .is-auth .main-content {
        padding: 0.75rem 0.75rem 1rem;
    }

    .is-auth .site-footer {
        padding-inline: 0.75rem;
    }

    .footer-line {
        flex-wrap: wrap;
        white-space: normal;
        row-gap: 0.3rem;
        line-height: 1.35;
    }

    .footer-weather-button {
        max-width: calc(100vw - 2rem);
    }

    .footer-weather-value {
        min-width: 0;
        max-width: 13rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .weather-popover {
        left: auto;
        right: -0.35rem;
        width: min(340px, calc(100vw - 1rem));
        transform: none;
    }

    .weather-popover::after {
        left: auto;
        right: 1.4rem;
        transform: rotate(45deg);
    }

    .useful-section-head h2 {
        font-size: 1.12rem;
    }

    .useful-pill {
        width: fit-content;
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

    .useful-weather-list {
        grid-template-columns: 1fr;
    }

    .useful-weather-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.25rem 0.6rem;
        padding: 0.55rem 0.6rem;
    }

    .useful-weather-card strong {
        margin: 0;
        text-align: right;
        white-space: nowrap;
    }

    .useful-weather-desc,
    .useful-weather-meta {
        grid-column: 1 / -1;
    }

    .useful-weather-day {
        min-height: 0;
    }

    .useful-fish-card p {
        min-height: 0;
    }
}

@media (max-width: 520px) {
    .page-useful .main-content--guest,
    .is-auth .main-content {
        padding-inline: 0.55rem;
    }

    .page-hero {
        gap: 0.65rem;
        padding: 0.75rem;
        border-radius: 12px;
    }

    .page-hero .page-title {
        font-size: 1.12rem;
    }

    .page-hero p {
        font-size: 0.84rem;
        line-height: 1.35;
    }

    .useful-section {
        margin-top: 0.9rem;
    }

    .useful-weather,
    .useful-fish-card,
    .useful-holiday-card,
    .useful-month-card {
        box-shadow: 3px 3px 0 var(--ink);
    }

    .useful-holiday-panels,
    .useful-fishing-grid,
    .useful-year-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.6rem;
    }

    .useful-holiday-card li {
        grid-template-columns: 2.8rem minmax(0, 1fr);
        gap: 0.4rem;
        padding: 0.32rem;
    }

    .useful-month-card {
        padding: 0.55rem;
    }

    .useful-weekdays,
    .useful-days {
        gap: 0.14rem;
    }

    .useful-weekdays {
        font-size: 0.56rem;
    }

    .useful-date {
        border-width: 1px;
        border-radius: 5px;
        font-size: 0.66rem;
    }
}

@media (max-width: 360px) {
    .useful-holiday-card li {
        grid-template-columns: 1fr;
    }

    .useful-holiday-card time {
        width: fit-content;
    }

    .footer-weather-value {
        max-width: 10rem;
    }
}

/* v20260527-4: phone-safe weather sheet and menu */
@media (max-width: 768px) {
    .sidebar {
        max-width: min(82vw, 220px);
    }

    .weather-popover {
        position: fixed;
        left: max(0.55rem, env(safe-area-inset-left));
        right: max(0.55rem, env(safe-area-inset-right));
        bottom: calc(4.7rem + env(safe-area-inset-bottom));
        width: auto;
        max-width: none;
        max-height: min(62dvh, 520px);
        transform: none;
        padding: 0.6rem;
        border-radius: 14px;
        z-index: 400;
    }

    .weather-popover::after {
        display: none;
    }

    .weather-popover-head {
        position: sticky;
        top: -0.6rem;
        z-index: 1;
        margin: -0.6rem -0.6rem 0.5rem;
        padding: 0.6rem;
        background: var(--card);
        border-bottom: 2px solid rgba(17, 17, 17, 0.12);
    }

    .weather-popover-head strong,
    .weather-popover-head span {
        min-width: 0;
    }

    .weather-popover-head span {
        white-space: normal;
        text-align: right;
    }

    .weather-day-summary {
        margin-bottom: 0.5rem;
        padding: 0.32rem 0.45rem;
        line-height: 1.25;
    }

    .weather-hourly {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .weather-hour-card {
        padding: 0.4rem;
        box-shadow: 1.5px 1.5px 0 var(--ink);
    }

    .weather-hour-time {
        font-size: 0.64rem;
    }

    .weather-hour-card strong {
        font-size: 0.98rem;
    }

    .weather-hour-desc {
        font-size: 0.68rem;
        white-space: normal;
    }

    .weather-hour-meta {
        font-size: 0.62rem;
        overflow-wrap: anywhere;
    }

    body:has(.footer-weather.is-weather-open) {
        overflow-x: hidden;
    }
}

@media (max-width: 360px) {
    .weather-hourly {
        grid-template-columns: 1fr;
    }

    .weather-popover {
        bottom: calc(4.25rem + env(safe-area-inset-bottom));
        max-height: 58dvh;
    }
}

/* v20260527-5: mobile uses top menu only, clearer calendars */
.useful-month-card {
    background: #ffffff;
}

.useful-weekdays {
    color: rgba(17, 17, 17, 0.74);
}

.useful-date {
    background: #ffffff;
    border-color: rgba(17, 17, 17, 0.42);
    color: var(--ink);
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.18);
}

.useful-date--state {
    background: #fda4af;
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.05);
}

.useful-date--church {
    background: #dff7ff;
    box-shadow: inset 0 -5px 0 #7dd3fc;
}

.useful-date--fish {
    background: #ecfccb;
    outline-color: #65a30d;
}

/* v20260527-10: groups page and tighter sidebar */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.8rem;
}

.group-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    border-left: 7px solid var(--ico-groups-bg);
}

.group-card--sky { border-left-color: var(--sky); }
.group-card--lime { border-left-color: var(--lime); }
.group-card--pink { border-left-color: var(--pink); }

.group-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
}

.group-avatar {
    display: inline-grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    border: 2px solid var(--ink);
    border-radius: 12px;
    background: var(--ico-groups-bg);
    box-shadow: var(--shadow-sm);
}

.group-card-title {
    min-width: 0;
}

.group-card-title h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.group-card-title span {
    color: rgba(17, 17, 17, 0.62);
    font-size: 0.8rem;
    font-weight: 800;
}

.group-card p {
    margin: 0;
    color: rgba(17, 17, 17, 0.74);
    font-weight: 650;
    line-height: 1.35;
}

.group-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    margin-top: auto;
    padding-top: 0.7rem;
    border-top: 2px dashed rgba(17, 17, 17, 0.16);
}

.group-card-foot span {
    font-size: 0.78rem;
    font-weight: 900;
}

.group-back {
    margin: -0.25rem 0 0.8rem;
}

.group-empty-card {
    margin-top: 0;
}

/* v20260528-4: clean tab headers */
.is-auth .page-hero > div > p {
    display: none !important;
}

.is-auth .page-hero {
    padding-block: 0.9rem;
}

.is-auth .page-hero .page-title {
    font-size: 1.5rem;
}

.sidebar-logo {
    padding: 0.8rem 0.9rem 0.55rem;
}

.sidebar-user {
    margin: 0 0.45rem 0.55rem;
    padding: 0.55rem;
}

.sidebar-nav {
    gap: 0.08rem;
    padding-inline: 0.45rem;
}

.sidebar-link {
    gap: 0.55rem;
    padding: 0.42rem 0.55rem;
    border-radius: 9px;
    font-size: 0.86rem;
}

.sidebar-icon {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 7px;
}

.sidebar-player {
    margin: 0.35rem 0.45rem 0.45rem;
    padding: 0.45rem;
}

.player-head {
    margin-bottom: 0.35rem;
}

.player-controls {
    gap: 0.22rem;
}

.player-btn {
    height: 1.8rem;
    border-radius: 7px;
}

.player-progress {
    height: 0.36rem;
    margin-top: 0.35rem;
}

.sidebar-foot {
    padding: 0.4rem 0.45rem;
}

@media (max-height: 760px) and (min-width: 769px) {
    .sidebar-logo {
        padding-top: 0.55rem;
        padding-bottom: 0.35rem;
        font-size: 0.82rem;
    }

    .sidebar-user {
        margin-bottom: 0.35rem;
        padding: 0.42rem;
    }

    .sidebar-user .avatar-sm {
        width: 34px;
        height: 34px;
    }

    .sidebar-link {
        min-height: 2.18rem;
        padding-block: 0.28rem;
        font-size: 0.8rem;
    }

    .sidebar-icon {
        width: 1.65rem;
        height: 1.65rem;
    }

    .sidebar-player {
        padding: 0.36rem;
    }

    .player-icon {
        width: 1.45rem;
        height: 1.45rem;
    }

    .player-title {
        font-size: 0.68rem;
    }

    .player-btn {
        height: 1.55rem;
    }
}

@media (max-width: 768px) {
    .is-auth {
        padding-bottom: 0 !important;
    }

    .bottom-nav {
        display: none !important;
    }

    .scroll-top {
        bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    .is-auth .scroll-top {
        bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    .weather-popover {
        bottom: calc(1rem + env(safe-area-inset-bottom));
        max-height: min(70dvh, 560px);
    }
}

/* v20260527-6: solid weather popover */
.is-auth .footer-line > span:first-child,
.is-auth .footer-dot {
    color: rgba(17, 17, 17, 0.62);
}

.weather-popover,
.weather-popover * {
    opacity: 1;
}

.weather-hour-card {
    background: #ffffff;
}

.weather-hour-time,
.weather-hour-desc,
.weather-hour-meta,
.weather-popover-head span {
    color: rgba(17, 17, 17, 0.72);
}

.weather-hour-card strong,
.weather-popover-head strong {
    color: #111111;
}

.weather-day-summary {
    color: #111111;
}

.notification-list.page-list-card li,
.user-list.card li {
    border-radius: 10px;
}

.notification-list.page-list-card li + li,
.user-list.card li + li {
    margin-top: 0.35rem;
}

@media (max-width: 680px) {
    .is-auth .page-hero,
    .messages-head.page-hero,
    .online-page-head.page-hero,
    .search-panel {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .page-hero-icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .page-hero-count {
        justify-self: start;
    }
}

/* KORMKOTA.online game front */
.page-kormkota {
    --korm-ink: #101014;
    --korm-cream: #fffaf0;
    --korm-mint: #b8f26d;
    --korm-pink: #ff5c8a;
    --korm-sky: #46c8ff;
    --korm-yolk: #ffd84d;
    --korm-violet: #8b5cf6;
    background:
        linear-gradient(90deg, rgba(16, 16, 20, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(16, 16, 20, 0.045) 1px, transparent 1px),
        linear-gradient(135deg, #fff7df 0%, #effff1 36%, #eef7ff 68%, #fff2f7 100%);
    background-size: 28px 28px, 28px 28px, auto;
}

.page-kormkota .container {
    width: min(1180px, 100% - 1.25rem);
}

.page-kormkota .main-content--guest {
    display: block;
    padding: 1rem 0 1.35rem;
}

.page-kormkota .site-header--guest {
    background: rgba(16, 16, 20, 0.94);
    backdrop-filter: blur(12px);
    box-shadow: 0 5px 0 var(--korm-ink);
}

.page-kormkota .site-footer--guest {
    background: var(--korm-ink);
}

.korm-game {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.korm-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1rem;
    padding: 1.05rem 0 0.15rem;
}

.korm-brand-block {
    min-width: 0;
}

.korm-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.15rem 0.6rem;
    border: 2px solid var(--korm-ink);
    border-radius: 999px;
    background: var(--korm-yolk);
    box-shadow: 3px 3px 0 var(--korm-ink);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.korm-hero h1 {
    margin: 0.35rem 0 0;
    font-size: clamp(2.35rem, 8vw, 6.7rem);
    line-height: 0.9;
    letter-spacing: 0;
    text-transform: uppercase;
}

.korm-hero h1 span {
    color: var(--korm-pink);
}

.korm-score-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.korm-score-strip span,
.korm-best,
.korm-status,
.korm-feed-list span {
    border: 2px solid var(--korm-ink);
    background: #ffffff;
    box-shadow: 3px 3px 0 var(--korm-ink);
}

.korm-score-strip span {
    display: inline-grid;
    min-width: 6.8rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 850;
}

.korm-score-strip strong {
    font-size: 1.4rem;
    line-height: 1;
}

.korm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    gap: 1rem;
    align-items: stretch;
}

.korm-stage,
.korm-panel,
.korm-dock article {
    border: 3px solid var(--korm-ink);
    border-radius: 8px;
    box-shadow: 7px 7px 0 var(--korm-ink);
}

.korm-stage {
    position: relative;
    min-width: 0;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    min-height: 430px;
    background:
        linear-gradient(180deg, rgba(70, 200, 255, 0.22), transparent 44%),
        linear-gradient(135deg, #ffffff 0%, #f7fff0 54%, #fff4f8 100%);
}

.korm-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.korm-hud {
    position: absolute;
    z-index: 2;
    top: 0.7rem;
    left: 0.7rem;
    right: 0.7rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    pointer-events: none;
}

.korm-hud span {
    min-width: 0;
    padding: 0.45rem 0.55rem;
    border: 2px solid var(--korm-ink);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 3px 3px 0 var(--korm-ink);
}

.korm-hud small,
.korm-best small {
    display: block;
    color: rgba(16, 16, 20, 0.6);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.korm-hud strong,
.korm-best strong {
    display: block;
    overflow: hidden;
    font-size: clamp(1.3rem, 3vw, 2.15rem);
    line-height: 1;
    text-overflow: ellipsis;
}

.korm-controls {
    position: absolute;
    z-index: 3;
    right: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    gap: 0.45rem;
}

.korm-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border: 2px solid var(--korm-ink);
    border-radius: 8px;
    background: var(--korm-mint);
    color: var(--korm-ink);
    box-shadow: 3px 3px 0 var(--korm-ink);
    cursor: pointer;
}

.korm-icon-btn:nth-child(2) {
    background: var(--korm-sky);
}

.korm-icon-btn:nth-child(3) {
    background: var(--korm-pink);
}

.korm-icon-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--korm-ink);
}

.korm-panel {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.85rem;
    background:
        linear-gradient(180deg, rgba(255, 216, 77, 0.34), transparent 44%),
        #ffffff;
}

.korm-status {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 3.1rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
}

.korm-status strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.98rem;
    line-height: 1.15;
}

.korm-status-light {
    flex: 0 0 auto;
    width: 0.8rem;
    height: 0.8rem;
    border: 2px solid var(--korm-ink);
    border-radius: 50%;
    background: var(--korm-mint);
}

.korm-mode {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.25rem;
    border: 2px solid var(--korm-ink);
    border-radius: 8px;
    background: #f1f5f9;
}

.korm-mode button {
    min-width: 0;
    min-height: 2.45rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--korm-ink);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}

.korm-mode button.is-active {
    background: var(--korm-yolk);
    box-shadow: inset 0 0 0 2px var(--korm-ink);
}

.korm-meters {
    display: grid;
    gap: 0.65rem;
}

.korm-meters label {
    display: grid;
    gap: 0.28rem;
    margin: 0;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.korm-meters meter {
    width: 100%;
    height: 1rem;
}

.korm-feed-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.korm-feed-list span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--korm-ink);
    font-size: 0.78rem;
    font-weight: 900;
}

.korm-feed-list span::before {
    content: '';
    width: 0.58rem;
    height: 0.58rem;
    margin-right: 0.32rem;
    border: 2px solid var(--korm-ink);
    border-radius: 50%;
    background: var(--tone);
}

.korm-best {
    padding: 0.65rem;
    border-radius: 8px;
    background: var(--korm-mint);
}

.korm-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.korm-actions .btn {
    min-width: 0;
    text-decoration: none;
}

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

.korm-dock article {
    min-width: 0;
    padding: 0.8rem;
    background: #ffffff;
}

.korm-dock article:nth-child(1) {
    background: #ecfccb;
}

.korm-dock article:nth-child(2) {
    background: #e0f2fe;
}

.korm-dock article:nth-child(3) {
    background: #ffe4e6;
}

.korm-dock span,
.korm-dock strong,
.korm-dock small {
    display: block;
}

.korm-dock span {
    font-size: 0.68rem;
    font-weight: 900;
}

.korm-dock strong {
    margin-top: 0.15rem;
    font-size: 1.15rem;
    line-height: 1;
    text-transform: uppercase;
}

.korm-dock small {
    margin-top: 0.3rem;
    color: rgba(16, 16, 20, 0.62);
    font-weight: 800;
}

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

    .korm-score-strip {
        justify-content: flex-start;
    }

    .korm-stage {
        min-height: 360px;
    }

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

    .korm-status,
    .korm-mode,
    .korm-meters,
    .korm-feed-list,
    .korm-best,
    .korm-actions {
        min-width: 0;
    }
}

@media (max-width: 620px) {
    .page-kormkota .container {
        width: min(100% - 0.7rem, 1180px);
    }

    .page-kormkota .main-content--guest {
        padding-top: 0.55rem;
    }

    .korm-hero h1 {
        overflow-wrap: anywhere;
        font-size: clamp(1.9rem, 12.5vw, 3.05rem);
    }

    .korm-hero h1 span {
        display: block;
    }

    .korm-score-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .korm-score-strip span {
        min-width: 0;
    }

    .korm-stage {
        aspect-ratio: 3 / 4;
        min-height: 500px;
        box-shadow: 4px 4px 0 var(--korm-ink);
    }

    .korm-hud {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.3rem;
        top: 0.45rem;
        left: 0.45rem;
        right: 0.45rem;
    }

    .korm-hud span {
        padding: 0.38rem 0.4rem;
    }

    .korm-hud small {
        font-size: 0.58rem;
    }

    .korm-hud strong {
        font-size: 1.25rem;
    }

    .korm-panel,
    .korm-dock {
        grid-template-columns: 1fr;
    }

    .korm-controls {
        right: 0.55rem;
        bottom: 0.55rem;
    }

    .korm-icon-btn {
        width: 2.7rem;
        height: 2.7rem;
    }

    .korm-dock article {
        box-shadow: 4px 4px 0 var(--korm-ink);
    }
}

/* KORMKOTA.online gaming portal reset */
.page-kormkota {
    --portal-bg: #090b10;
    --portal-panel: #111722;
    --portal-panel-2: #151d2b;
    --portal-text: #f7fbff;
    --portal-muted: #9aa8b8;
    --portal-line: rgba(255, 255, 255, 0.12);
    --portal-green: #62e36f;
    --portal-cyan: #49d6ff;
    --portal-amber: #ffbf4d;
    --portal-pink: #ff5f9e;
    --portal-violet: #9b78ff;
    color: var(--portal-text);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 18% 12%, rgba(73, 214, 255, 0.2), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(98, 227, 111, 0.16), transparent 30%),
        linear-gradient(135deg, #07090d 0%, #111827 48%, #0a0d14 100%);
    background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

.page-kormkota a {
    color: inherit;
}

/* KORMKOTA final no-white guard 2026-07-01
   Any page rendered through the main site layout must stay on the dark KKO theme. */
.page-kormkota :is(
    section,
    article,
    aside,
    form,
    fieldset,
    .page-hero,
    .messages-start,
    .messages-empty,
    .conversation-item,
    .conversation-link,
    .search-form,
    .search-results,
    .search-card,
    .friend-card,
    .group-card,
    .notification-list,
    .notification-list li,
    .card,
    .panel,
    .box,
    .empty-state,
    .page-section-card
) {
    background-color: rgba(9, 13, 25, 0.93) !important;
    color: #f7fbff !important;
    border-radius: 22px !important;
}

.page-kormkota :is(
    .page-hero,
    .messages-start,
    .messages-empty,
    .conversation-item,
    .search-form,
    .search-card,
    .friend-card,
    .group-card,
    .notification-list li,
    .card,
    .panel,
    .box,
    .empty-state,
    .page-section-card
) {
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 22px !important;
    background-image: linear-gradient(145deg, rgba(14, 20, 34, 0.96), rgba(9, 13, 25, 0.93)) !important;
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.24) !important;
}

.page-kormkota :is(
    input,
    textarea,
    select,
    option
) {
    border: 1px solid rgba(67, 230, 255, 0.42) !important;
    background: rgba(5, 10, 19, 0.86) !important;
    background-color: rgba(5, 10, 19, 0.86) !important;
    color: #f7fbff !important;
    caret-color: #43e6ff !important;
    box-shadow: none !important;
}

.page-kormkota :is(input, textarea, select):-webkit-autofill,
.page-kormkota :is(input, textarea, select):-webkit-autofill:hover,
.page-kormkota :is(input, textarea, select):-webkit-autofill:focus {
    -webkit-text-fill-color: #f7fbff !important;
    box-shadow: 0 0 0 1000px #050a13 inset !important;
    transition: background-color 9999s ease-out 0s !important;
}

.page-kormkota :is(input, textarea)::placeholder {
    color: rgba(174, 187, 210, 0.75) !important;
}

.page-kormkota :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    label,
    strong,
    b
) {
    color: #f7fbff !important;
}

.page-kormkota :is(
    p,
    small,
    time,
    .hint,
    .muted,
    .conv-last,
    .messages-subtitle,
    .page-hero-kicker
) {
    color: #aebbd2 !important;
}

.page-kormkota :is(.btn, button, .guest-account-link) {
    border-color: rgba(67, 230, 255, 0.28) !important;
}

.page-kormkota :is(.btn-primary, .page-section-card h2) {
    border: 1px solid rgba(67, 230, 255, 0.42) !important;
    background: linear-gradient(135deg, #62e36f, #43e6ff) !important;
    background-color: rgba(67, 230, 255, 0.18) !important;
    color: #071018 !important;
    box-shadow: 0 14px 30px rgba(67, 230, 255, 0.12) !important;
}

.page-kormkota :is(.btn-primary:hover, .btn-primary:focus-visible) {
    background: linear-gradient(135deg, #78f485, #58eaff) !important;
    color: #071018 !important;
}

.page-kormkota .btn-ghost {
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
    color: #f7fbff !important;
    box-shadow: none !important;
}

.page-kormkota .page-hero-count {
    border-color: rgba(67, 230, 255, 0.42) !important;
    background: linear-gradient(135deg, rgba(98, 227, 111, 0.95), rgba(67, 230, 255, 0.95)) !important;
    color: #071018 !important;
}

.page-kormkota [class^="useful-"],
.page-kormkota [class*=" useful-"],
.page-kormkota .useful-date-line,
.page-kormkota .useful-date-line--quiet {
    border-color: rgba(255, 255, 255, 0.11) !important;
    background: rgba(9, 13, 25, 0.93) !important;
    background-color: rgba(9, 13, 25, 0.93) !important;
    color: #f7fbff !important;
    box-shadow: none !important;
}

.page-kormkota .page-useful li,
.page-kormkota.page-useful li,
.page-kormkota .useful-holidays li,
.page-kormkota .useful-calendar li,
.page-kormkota li:has(time) {
    border-color: rgba(255, 255, 255, 0.11) !important;
    background: rgba(9, 13, 25, 0.93) !important;
    background-color: rgba(9, 13, 25, 0.93) !important;
    color: #f7fbff !important;
}

.page-kormkota time {
    background: rgba(67, 230, 255, 0.1) !important;
    background-color: rgba(67, 230, 255, 0.1) !important;
    color: #43e6ff !important;
}

.page-kormkota .voice-round-btn,
.page-kormkota [class*="round-btn"],
.page-kormkota [class*="icon-btn"] {
    border: 1px solid rgba(67, 230, 255, 0.34) !important;
    background: rgba(67, 230, 255, 0.12) !important;
    background-color: rgba(67, 230, 255, 0.12) !important;
    color: #43e6ff !important;
}

.page-kormkota [class^="info-"],
.page-kormkota [class*=" info-"],
.page-kormkota [class^="info-"] span,
.page-kormkota [class*=" info-"] span,
.page-kormkota [class^="info-"] em,
.page-kormkota [class*=" info-"] em,
.page-kormkota .info-registered-badge {
    border-color: rgba(255, 255, 255, 0.11) !important;
    background: rgba(9, 13, 25, 0.93) !important;
    background-color: rgba(9, 13, 25, 0.93) !important;
    color: #f7fbff !important;
    box-shadow: none !important;
}

.page-kormkota [class^="info-"] :is(span, em):not(.guest-logo-text span),
.page-kormkota [class*=" info-"] :is(span, em):not(.guest-logo-text span) {
    background: rgba(67, 230, 255, 0.1) !important;
    background-color: rgba(67, 230, 255, 0.1) !important;
    color: #43e6ff !important;
}

.page-kormkota [class^="install-"],
.page-kormkota [class*=" install-"],
.page-kormkota [class^="install-"] span,
.page-kormkota [class*=" install-"] span,
.page-kormkota [class^="install-"] em,
.page-kormkota [class*=" install-"] em {
    border-color: rgba(67, 230, 255, 0.28) !important;
    background: rgba(9, 13, 25, 0.93) !important;
    background-color: rgba(9, 13, 25, 0.93) !important;
    color: #f7fbff !important;
    box-shadow: none !important;
}

.page-kormkota .install-chips span,
.page-kormkota .install-app-icon em {
    background: rgba(67, 230, 255, 0.1) !important;
    background-color: rgba(67, 230, 255, 0.1) !important;
    color: #43e6ff !important;
}

.page-kormkota .container {
    width: min(1180px, 100% - 1.25rem);
}

.page-kormkota .site-header--guest,
.page-kormkota .site-footer--guest {
    background: rgba(7, 9, 13, 0.92);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
    backdrop-filter: blur(16px);
}

.page-kormkota .logo em {
    background: var(--portal-green);
}

.page-kormkota .logo span {
    color: var(--portal-cyan);
}

.page-kormkota .main-content--guest {
    display: block;
    padding: 1.35rem 0 1.8rem;
}

.gamehub {
    display: grid;
    gap: 1rem;
}

.gamehub-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    align-items: stretch;
    min-height: 520px;
    overflow: hidden;
    border: 1px solid var(--portal-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(73, 214, 255, 0.16), transparent 42%),
        linear-gradient(315deg, rgba(98, 227, 111, 0.14), transparent 46%),
        rgba(17, 23, 34, 0.88);
}

.gamehub-hero-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(1.2rem, 4vw, 3.4rem);
}

.gamehub-hero-copy::before {
    content: '';
    position: absolute;
    inset: auto 8% 10% auto;
    width: min(28rem, 52%);
    aspect-ratio: 1;
    border: 1px solid rgba(73, 214, 255, 0.26);
    transform: rotate(12deg);
    background:
        linear-gradient(90deg, transparent 48%, rgba(73, 214, 255, 0.22) 48% 52%, transparent 52%),
        linear-gradient(0deg, transparent 48%, rgba(98, 227, 111, 0.2) 48% 52%, transparent 52%);
    opacity: 0.65;
}

.gamehub-kicker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: fit-content;
    min-height: 2rem;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border: 1px solid rgba(98, 227, 111, 0.48);
    border-radius: 999px;
    background: rgba(98, 227, 111, 0.12);
    color: var(--portal-green);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.gamehub h1 {
    position: relative;
    z-index: 1;
    margin: 0.65rem 0 0;
    max-width: 10ch;
    font-size: clamp(3rem, 8.4vw, 7.2rem);
    line-height: 0.86;
    letter-spacing: 0;
    text-transform: uppercase;
}

.gamehub h1 span {
    display: block;
    color: var(--portal-cyan);
}

.gamehub-hero-copy p {
    position: relative;
    z-index: 1;
    max-width: 45rem;
    margin: 1rem 0 0;
    color: var(--portal-muted);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 650;
    line-height: 1.55;
}

.gamehub-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.35rem;
}

.gamehub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--portal-line);
    border-radius: 7px;
    font-weight: 900;
    text-decoration: none;
}

.gamehub-button:hover {
    text-decoration: none;
}

.gamehub-button--primary {
    background: var(--portal-green);
    color: #07100a;
}

.gamehub-button--ghost {
    background: rgba(255, 255, 255, 0.06);
    color: var(--portal-text);
}

.gamehub-console {
    display: grid;
    align-content: center;
    gap: 0.9rem;
    min-width: 0;
    padding: clamp(1rem, 3vw, 2rem);
    border-left: 1px solid var(--portal-line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
        rgba(8, 12, 19, 0.62);
}

.gamehub-screen,
.gamehub-stats span,
.gamehub-news,
.gamehub-minecraft,
.game-card {
    border: 1px solid var(--portal-line);
    border-radius: 8px;
    background: rgba(17, 23, 34, 0.9);
}

.gamehub-screen {
    display: grid;
    gap: 0.35rem;
    min-height: 10rem;
    align-content: end;
    padding: 1rem;
    background:
        linear-gradient(135deg, rgba(73, 214, 255, 0.18), transparent 48%),
        #07090d;
}

.gamehub-screen-dot {
    width: 0.78rem;
    height: 0.78rem;
    border-radius: 50%;
    background: var(--portal-green);
    box-shadow: 0 0 24px rgba(98, 227, 111, 0.75);
}

.gamehub-screen strong {
    font-size: 1.5rem;
}

.gamehub-screen small,
.gamehub-stats span,
.gamehub-chips span,
.game-card-status,
.game-card-tags span {
    color: var(--portal-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

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

.gamehub-stats span {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.8rem;
}

.gamehub-stats strong {
    color: var(--portal-text);
    font-size: 2rem;
    line-height: 1;
}

.gamehub-chips,
.game-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.gamehub-chips span,
.game-card-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.62rem;
    border: 1px solid var(--portal-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.gamehub-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
}

.gamehub-strip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.55rem;
    border: 1px solid var(--portal-line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.055);
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.gamehub-section,
.gamehub-lower {
    display: grid;
    gap: 0.85rem;
}

.gamehub-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.gamehub-section-head span {
    color: var(--portal-green);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.gamehub-section-head h2,
.gamehub-minecraft h2 {
    margin: 0;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1;
    letter-spacing: 0;
}

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

.game-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.game-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-top: 3px solid var(--card-accent, var(--portal-green));
    pointer-events: none;
}

.game-card--green { --card-accent: var(--portal-green); }
.game-card--blue { --card-accent: var(--portal-cyan); }
.game-card--orange { --card-accent: var(--portal-amber); }
.game-card--pink { --card-accent: var(--portal-pink); }

.game-card-art {
    position: relative;
    min-height: 9rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 34%, transparent), transparent),
        #0a0f18;
}

.game-card-art span,
.game-card-art i {
    position: absolute;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: var(--card-accent);
}

.game-card-art span {
    right: 1.2rem;
    bottom: 1.2rem;
    width: 4.5rem;
    height: 4.5rem;
    opacity: 0.82;
}

.game-card-art i {
    right: 4.1rem;
    bottom: 4rem;
    width: 2.4rem;
    height: 2.4rem;
    opacity: 0.5;
}

.game-card-body {
    display: grid;
    gap: 0.55rem;
    padding: 0.95rem;
}

.game-card h3 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.05;
}

.game-card p {
    margin: 0;
    color: var(--portal-muted);
    font-weight: 650;
    line-height: 1.45;
}

.game-card-genre {
    color: var(--card-accent) !important;
    font-size: 0.82rem;
    font-weight: 900 !important;
}

.gamehub-lower {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.gamehub-news,
.gamehub-minecraft {
    min-width: 0;
    padding: 1rem;
}

.gamehub-news ul {
    display: grid;
    gap: 0.6rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.gamehub-news li {
    padding: 0.75rem;
    border: 1px solid var(--portal-line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--portal-muted);
    font-weight: 750;
}

.gamehub-minecraft {
    background:
        linear-gradient(135deg, rgba(98, 227, 111, 0.14), transparent 50%),
        rgba(17, 23, 34, 0.9);
}

.gamehub-minecraft p {
    max-width: 42rem;
    margin: 0.8rem 0 1rem;
    color: var(--portal-muted);
    font-weight: 700;
    line-height: 1.55;
}

.minecraft-blocks {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.45rem;
}

.minecraft-blocks span {
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(98, 227, 111, 0.9) 0 38%, #7a4a2a 38% 100%);
}

.minecraft-blocks span:nth-child(2n) {
    background:
        linear-gradient(180deg, #8bd665 0 30%, #6b7280 30% 100%);
}

.minecraft-blocks span:nth-child(3n) {
    background: #3b82f6;
}

@media (max-width: 980px) {
    .gamehub-hero,
    .gamehub-lower {
        grid-template-columns: 1fr;
    }

    .gamehub-hero {
        min-height: 0;
    }

    .gamehub-console {
        border-left: 0;
        border-top: 1px solid var(--portal-line);
    }

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

@media (max-width: 620px) {
    .page-kormkota .container {
        width: min(100% - 0.85rem, 1180px);
    }

    .gamehub h1 {
        font-size: clamp(2.55rem, 16vw, 4rem);
    }

    .gamehub-strip,
    .gamehub-grid,
    .gamehub-stats {
        grid-template-columns: 1fr;
    }

    .gamehub-hero-copy,
    .gamehub-console {
        padding: 1rem;
    }

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

    .gamehub-button {
        width: 100%;
    }

    .minecraft-blocks {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* KORMKOTA.online launcher skin */
.page-kormkota {
    --launcher-ink: #17181d;
    --launcher-paper: #f6ffe9;
    --launcher-panel: #ffffff;
    --launcher-soft: #eef7ff;
    --launcher-green: #65d84f;
    --launcher-blue: #4db5ff;
    --launcher-yellow: #ffd84a;
    --launcher-red: #ff6b6b;
    --launcher-violet: #8f6cff;
    --launcher-line: #17181d;
    color: var(--launcher-ink);
    background-color: var(--launcher-paper);
    background-image:
        linear-gradient(90deg, rgba(23, 24, 29, 0.07) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 24, 29, 0.07) 1px, transparent 1px),
        linear-gradient(135deg, rgba(101, 216, 79, 0.22), transparent 42%),
        linear-gradient(315deg, rgba(77, 181, 255, 0.2), transparent 40%);
    background-size: 32px 32px, 32px 32px, auto, auto;
}

.page-kormkota .site-header--guest,
.page-kormkota .site-footer--guest {
    background: var(--launcher-ink);
    border-color: var(--launcher-ink);
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.28);
}

.page-kormkota .site-footer--guest {
    color: rgba(255, 255, 255, 0.72);
}

.page-kormkota .logo em {
    background: var(--launcher-yellow);
    color: var(--launcher-ink);
}

.page-kormkota .logo span {
    color: var(--launcher-blue);
}

.page-kormkota .main-content--guest {
    padding: 1.2rem 0 1.8rem;
}

.gamehub {
    gap: 1.1rem;
}

.gamehub-hero {
    min-height: 500px;
    border: 3px solid var(--launcher-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 216, 74, 0.64), rgba(255, 255, 255, 0.12) 38%, transparent 38%),
        linear-gradient(315deg, rgba(77, 181, 255, 0.28), transparent 46%),
        var(--launcher-panel);
    box-shadow: 10px 10px 0 var(--launcher-line);
}

.gamehub-hero-copy {
    padding: clamp(1.1rem, 4vw, 3.2rem);
}

.gamehub-hero-copy::before {
    inset: auto 7% 12% auto;
    width: min(25rem, 50%);
    border: 3px solid var(--launcher-line);
    background:
        linear-gradient(90deg, var(--launcher-green) 0 33.33%, var(--launcher-blue) 33.33% 66.66%, var(--launcher-yellow) 66.66% 100%);
    box-shadow: 8px 8px 0 var(--launcher-line);
    opacity: 0.35;
}

.gamehub-kicker {
    min-height: 2.15rem;
    border: 2px solid var(--launcher-line);
    background: var(--launcher-green);
    color: var(--launcher-ink);
    box-shadow: 4px 4px 0 var(--launcher-line);
}

.gamehub h1 {
    max-width: 10ch;
    color: var(--launcher-ink);
    text-shadow: 5px 5px 0 rgba(101, 216, 79, 0.45);
}

.gamehub h1 span {
    color: var(--launcher-blue);
}

.gamehub-hero-copy p {
    max-width: 44rem;
    color: rgba(23, 24, 29, 0.76);
    font-weight: 800;
}

.gamehub-button {
    border: 3px solid var(--launcher-line);
    border-radius: 8px;
    box-shadow: 5px 5px 0 var(--launcher-line);
}

.gamehub-button--primary {
    background: var(--launcher-green);
    color: var(--launcher-ink);
}

.gamehub-button--ghost {
    background: var(--launcher-panel);
    color: var(--launcher-ink);
}

.gamehub-console {
    border-left: 3px solid var(--launcher-line);
    background:
        repeating-linear-gradient(0deg, rgba(23, 24, 29, 0.04), rgba(23, 24, 29, 0.04) 2px, transparent 2px, transparent 10px),
        #eaf6ff;
}

.gamehub-screen,
.gamehub-stats span,
.gamehub-news,
.gamehub-minecraft,
.game-card {
    border: 3px solid var(--launcher-line);
    border-radius: 8px;
    background: var(--launcher-panel);
    box-shadow: 6px 6px 0 var(--launcher-line);
}

.gamehub-screen {
    background:
        linear-gradient(135deg, rgba(101, 216, 79, 0.28), transparent 50%),
        #10131b;
    color: #ffffff;
}

.gamehub-screen small,
.gamehub-stats span,
.gamehub-chips span,
.game-card-status,
.game-card-tags span {
    color: rgba(23, 24, 29, 0.68);
}

.gamehub-screen small {
    color: rgba(255, 255, 255, 0.72);
}

.gamehub-screen-dot {
    background: var(--launcher-yellow);
    box-shadow: 0 0 0 3px var(--launcher-line);
}

.gamehub-stats strong {
    color: var(--launcher-ink);
}

.gamehub-chips span,
.game-card-tags span,
.gamehub-strip span {
    border: 2px solid var(--launcher-line);
    background: var(--launcher-panel);
    color: var(--launcher-ink);
}

.gamehub-chips span:nth-child(1),
.game-card-tags span:nth-child(1) {
    background: #dcfce7;
}

.gamehub-chips span:nth-child(2),
.game-card-tags span:nth-child(2) {
    background: #dff3ff;
}

.gamehub-chips span:nth-child(3),
.game-card-tags span:nth-child(3) {
    background: #fff3bf;
}

.gamehub-strip span {
    min-height: 3.25rem;
    box-shadow: 4px 4px 0 var(--launcher-line);
}

.gamehub-strip span:nth-child(1) { background: #dcfce7; }
.gamehub-strip span:nth-child(2) { background: #dff3ff; }
.gamehub-strip span:nth-child(3) { background: #fff3bf; }
.gamehub-strip span:nth-child(4) { background: #ffe4e6; }
.gamehub-strip span:nth-child(5) { background: #ede9fe; }

.gamehub-section-head span {
    color: var(--launcher-ink);
    background: var(--launcher-yellow);
    border: 2px solid var(--launcher-line);
    border-radius: 999px;
    padding: 0.22rem 0.62rem;
    box-shadow: 3px 3px 0 var(--launcher-line);
}

.gamehub-section-head h2,
.gamehub-minecraft h2 {
    color: var(--launcher-ink);
}

.game-card {
    background: var(--launcher-panel);
}

.game-card::before {
    border-top: 0;
}

.game-card-art {
    min-height: 9.5rem;
    border-bottom: 3px solid var(--launcher-line);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 72%, white), transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent),
        var(--launcher-soft);
}

.game-card-art span,
.game-card-art i {
    border: 3px solid var(--launcher-line);
    box-shadow: 4px 4px 0 var(--launcher-line);
}

.game-card-body {
    background: #ffffff;
}

.game-card h3 {
    color: var(--launcher-ink);
}

.game-card p {
    color: rgba(23, 24, 29, 0.72);
}

.game-card-genre {
    color: color-mix(in srgb, var(--card-accent) 72%, #111111) !important;
}

.game-card--green { --card-accent: var(--launcher-green); }
.game-card--blue { --card-accent: var(--launcher-blue); }
.game-card--orange { --card-accent: var(--launcher-yellow); }
.game-card--pink { --card-accent: var(--launcher-red); }

.gamehub-news li {
    border: 2px solid var(--launcher-line);
    background: #f8fafc;
    color: rgba(23, 24, 29, 0.76);
}

.gamehub-minecraft {
    background:
        linear-gradient(135deg, rgba(101, 216, 79, 0.28), transparent 54%),
        #ffffff;
}

.gamehub-minecraft p {
    color: rgba(23, 24, 29, 0.76);
}

.minecraft-blocks span {
    border: 3px solid var(--launcher-line);
    border-radius: 4px;
    box-shadow: 3px 3px 0 var(--launcher-line);
}

@media (max-width: 980px) {
    .gamehub-console {
        border-left: 0;
        border-top: 3px solid var(--launcher-line);
    }
}

@media (max-width: 620px) {
    .gamehub-hero,
    .gamehub-screen,
    .gamehub-stats span,
    .gamehub-news,
    .gamehub-minecraft,
    .game-card {
        box-shadow: 5px 5px 0 var(--launcher-line);
    }

    .gamehub h1 {
        font-size: clamp(2.45rem, 15vw, 3.8rem);
        text-shadow: 3px 3px 0 rgba(101, 216, 79, 0.45);
    }
}

/* KORMKOTA top header redesign */
.page-kormkota .site-header--guest {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0.65rem 0;
    background:
        linear-gradient(90deg, rgba(246, 255, 233, 0.96), rgba(235, 247, 255, 0.96)),
        #ffffff;
    border-bottom: 3px solid var(--launcher-line);
    box-shadow: 0 7px 0 rgba(23, 24, 29, 0.22);
    color: var(--launcher-ink);
    backdrop-filter: blur(18px);
}

.page-kormkota .header-inner--guest {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    width: min(1180px, 100% - 1.25rem);
    min-height: 4rem;
    margin-inline: auto;
    padding: 0.35rem;
    border: 3px solid var(--launcher-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 6px 6px 0 var(--launcher-line);
}

.page-kormkota .guest-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    color: var(--launcher-ink);
    text-decoration: none;
}

.page-kormkota .guest-logo em {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 3px solid var(--launcher-line);
    border-radius: 9px;
    background:
        linear-gradient(135deg, var(--launcher-yellow) 0 48%, var(--launcher-green) 48% 100%);
    color: var(--launcher-ink);
    box-shadow: 4px 4px 0 var(--launcher-line);
    font-size: 1.45rem;
    font-weight: 950;
    transform: rotate(-4deg);
}

.page-kormkota .guest-logo-text {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.page-kormkota .guest-logo-text strong {
    display: block;
    color: var(--launcher-ink);
    font-size: clamp(1.05rem, 2vw, 1.55rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.page-kormkota .guest-logo-text strong span {
    color: var(--launcher-blue);
}

.page-kormkota .guest-logo-text small {
    display: block;
    color: rgba(23, 24, 29, 0.62);
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.guest-top-nav {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.guest-top-nav::-webkit-scrollbar {
    display: none;
}

.guest-top-nav a,
.guest-play-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.45rem;
    border: 2px solid var(--launcher-line);
    border-radius: 999px;
    color: var(--launcher-ink);
    font-size: 0.82rem;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.guest-top-nav a {
    padding: 0.35rem 0.82rem;
    background: #ffffff;
}

.guest-top-nav a:nth-child(1) {
    background: #dcfce7;
}

.guest-top-nav a:nth-child(2) {
    background: #fff3bf;
}

.guest-top-nav a:nth-child(3) {
    background: #dff3ff;
}

.guest-top-nav a:nth-child(4) {
    background: #ffe4e6;
}

.guest-play-link {
    min-width: 7rem;
    padding: 0.35rem 1rem;
    background: var(--launcher-green);
    box-shadow: 4px 4px 0 var(--launcher-line);
}

.guest-top-nav a:hover,
.guest-play-link:hover,
.page-kormkota .guest-logo:hover {
    text-decoration: none;
}

@media (max-width: 820px) {
    .page-kormkota .header-inner--guest {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.65rem;
    }

    .guest-top-nav {
        grid-column: 1 / -1;
        justify-content: flex-start;
        order: 3;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .page-kormkota .site-header--guest {
        padding: 0.45rem 0;
    }

    .page-kormkota .header-inner--guest {
        width: min(100% - 0.7rem, 1180px);
        padding: 0.3rem;
        border-radius: 10px;
        box-shadow: 4px 4px 0 var(--launcher-line);
    }

    .page-kormkota .guest-logo {
        gap: 0.55rem;
    }

    .page-kormkota .guest-logo em {
        width: 2.55rem;
        height: 2.55rem;
        font-size: 1.2rem;
    }

    .page-kormkota .guest-logo-text strong {
        max-width: 11.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .guest-play-link {
        min-width: 5.6rem;
        min-height: 2.25rem;
        font-size: 0.74rem;
    }

    .guest-top-nav a {
        min-height: 2.25rem;
        padding-inline: 0.7rem;
        font-size: 0.72rem;
    }
}

/* KORMKOTA full redesign: neon arena */
.page-kormkota {
    --arena-bg: #070812;
    --arena-card: rgba(16, 20, 36, 0.84);
    --arena-card-solid: #12182a;
    --arena-text: #f7fbff;
    --arena-muted: #9eabc4;
    --arena-line: rgba(255, 255, 255, 0.13);
    --arena-lime: #b6ff4d;
    --arena-cyan: #43e6ff;
    --arena-pink: #ff4fa3;
    --arena-amber: #ffd166;
    --arena-violet: #9c7cff;
    color: var(--arena-text);
    background:
        radial-gradient(circle at 14% 10%, rgba(67, 230, 255, 0.18), transparent 28%),
        radial-gradient(circle at 86% 8%, rgba(255, 79, 163, 0.16), transparent 30%),
        linear-gradient(135deg, #060711 0%, #10162a 48%, #070812 100%);
}

.page-kormkota::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.16));
}

.page-kormkota .site-header--guest {
    padding: 0.75rem 0;
    background: rgba(7, 8, 18, 0.72);
    border-bottom: 1px solid var(--arena-line);
    box-shadow: none;
    backdrop-filter: blur(18px);
}

.page-kormkota .header-inner--guest {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    width: min(1180px, 100% - 1.25rem);
    min-height: 4.25rem;
    margin-inline: auto;
    padding: 0.55rem;
    border: 1px solid var(--arena-line);
    border-radius: 999px;
    background: rgba(15, 20, 35, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 50px rgba(0, 0, 0, 0.24);
}

.page-kormkota .guest-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    color: var(--arena-text);
    text-decoration: none;
}

.page-kormkota .guest-logo em {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid rgba(182, 255, 77, 0.65);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 26%, #ffffff 0 8%, transparent 9%),
        linear-gradient(135deg, var(--arena-lime), #2cffb4);
    color: #08100c;
    box-shadow: 0 0 28px rgba(182, 255, 77, 0.35);
    font-size: 1.35rem;
    font-weight: 950;
    transform: none;
}

.page-kormkota .guest-logo-image {
    display: block;
    width: 3.35rem;
    height: 3.35rem;
    object-fit: cover;
    border: 1px solid rgba(67, 230, 255, 0.55);
    border-radius: 50%;
    background: #101426;
    box-shadow:
        0 0 0 4px rgba(67, 230, 255, 0.07),
        0 0 30px rgba(182, 255, 77, 0.28);
}

.page-kormkota .guest-logo-text strong {
    display: block;
    color: var(--arena-text);
    font-size: clamp(1rem, 1.8vw, 1.42rem);
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.page-kormkota .guest-logo-text strong span {
    color: var(--arena-cyan);
}

.page-kormkota .guest-logo-text small {
    color: var(--arena-muted);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.guest-top-nav {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.guest-top-nav::-webkit-scrollbar {
    display: none;
}

.guest-top-nav a,
.guest-play-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.55rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--arena-line);
    border-radius: 999px;
    color: var(--arena-text);
    background: rgba(255, 255, 255, 0.055);
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.guest-top-nav a:nth-child(1),
.guest-top-nav a:nth-child(2),
.guest-top-nav a:nth-child(3),
.guest-top-nav a:nth-child(4) {
    background: rgba(255, 255, 255, 0.055);
}

.guest-play-link {
    min-width: 7rem;
    border-color: rgba(182, 255, 77, 0.7);
    background: var(--arena-lime);
    color: #08100c;
    box-shadow: 0 0 26px rgba(182, 255, 77, 0.32);
}

.page-kormkota .container {
    width: min(1180px, 100% - 1.25rem);
}

.page-kormkota .main-content--guest {
    display: block;
    padding: 1.15rem 0 2rem;
}

.arena {
    display: grid;
    gap: 1rem;
}

.arena-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
    gap: 1rem;
    min-height: 560px;
}

.arena-hero-main,
.arena-feature-card,
.arena-metrics article,
.arena-game,
.arena-minecraft,
.arena-updates {
    border: 1px solid var(--arena-line);
    border-radius: 24px;
    background: var(--arena-card);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
}

.arena-hero-main {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: clamp(1.25rem, 5vw, 4.25rem);
}

.arena-hero-main::before {
    content: '';
    position: absolute;
    inset: auto -8rem -12rem auto;
    width: min(42rem, 70%);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(67, 230, 255, 0.32), transparent 62%),
        radial-gradient(circle at 35% 35%, rgba(255, 79, 163, 0.22), transparent 36%);
}

.arena-eyebrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: fit-content;
    min-height: 2rem;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(67, 230, 255, 0.36);
    border-radius: 999px;
    background: rgba(67, 230, 255, 0.08);
    color: var(--arena-cyan);
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.arena h1 {
    position: relative;
    z-index: 1;
    margin: 0.8rem 0 0;
    max-width: 9.5ch;
    color: var(--arena-text);
    font-size: clamp(3.3rem, 9vw, 8rem);
    line-height: 0.84;
    letter-spacing: 0;
    text-transform: uppercase;
}

.arena h1 span {
    display: block;
    color: var(--arena-cyan);
    text-shadow: 0 0 34px rgba(67, 230, 255, 0.32);
}

.arena-hero-main p {
    position: relative;
    z-index: 1;
    max-width: 48rem;
    margin: 1rem 0 0;
    color: var(--arena-muted);
    font-size: clamp(1rem, 2vw, 1.28rem);
    font-weight: 650;
    line-height: 1.55;
}

.arena-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.4rem;
}

.arena-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.15rem;
    padding: 0.7rem 1.15rem;
    border: 1px solid var(--arena-line);
    border-radius: 999px;
    color: var(--arena-text);
    font-weight: 950;
    text-decoration: none;
}

.arena-btn:hover {
    text-decoration: none;
}

.arena-btn--primary {
    border-color: rgba(182, 255, 77, 0.7);
    background: var(--arena-lime);
    color: #08100c;
}

.arena-btn--dark {
    background: rgba(255, 255, 255, 0.075);
}

.arena-feature-card {
    position: relative;
    display: grid;
    align-content: space-between;
    min-width: 0;
    overflow: hidden;
    padding: 1.15rem;
    background:
        linear-gradient(135deg, rgba(182, 255, 77, 0.13), transparent 48%),
        var(--arena-card);
}

.arena-feature-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--arena-muted);
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
}

.arena-feature-top strong {
    color: var(--arena-lime);
}

.arena-cube-scene {
    position: relative;
    min-height: 20rem;
}

.arena-cube {
    position: absolute;
    display: block;
    width: 8rem;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 22px;
    transform: rotate(14deg);
}

.arena-cube--one {
    right: 12%;
    top: 16%;
    background: linear-gradient(135deg, var(--arena-lime), #2cffb4);
    box-shadow: 0 0 70px rgba(182, 255, 77, 0.25);
}

.arena-cube--two {
    left: 8%;
    bottom: 12%;
    width: 6rem;
    background: linear-gradient(135deg, var(--arena-cyan), #5577ff);
}

.arena-cube--three {
    right: 32%;
    bottom: 4%;
    width: 4.5rem;
    background: linear-gradient(135deg, var(--arena-pink), var(--arena-violet));
}

.arena-feature-card h2,
.arena-section-head h2,
.arena-minecraft h2,
.arena-updates h2 {
    margin: 0;
    color: var(--arena-text);
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    line-height: 1;
    letter-spacing: 0;
}

.arena-feature-card p,
.arena-minecraft p {
    margin: 0.7rem 0 0;
    color: var(--arena-muted);
    font-weight: 700;
    line-height: 1.5;
}

.arena-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.arena-metrics article {
    min-width: 0;
    padding: 1rem;
}

.arena-metrics span,
.arena-section-head span,
.arena-game small {
    display: block;
    color: var(--arena-muted);
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.arena-metrics strong {
    display: block;
    margin-top: 0.3rem;
    color: var(--arena-text);
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1;
}

.arena-section {
    display: grid;
    gap: 0.85rem;
}

.arena-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.arena-section-head span {
    color: var(--arena-lime);
}

.arena-game-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.arena-game {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    min-width: 0;
    padding: 1rem;
    overflow: hidden;
}

.arena-game::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: var(--game-tone, var(--arena-cyan));
}

.arena-game--lime { --game-tone: var(--arena-lime); }
.arena-game--cyan { --game-tone: var(--arena-cyan); }
.arena-game--amber { --game-tone: var(--arena-amber); }
.arena-game--rose { --game-tone: var(--arena-pink); }
.arena-game--violet { --game-tone: var(--arena-violet); }
.arena-game--blue { --game-tone: #68a3ff; }

.arena-game-art {
    display: grid;
    place-items: center;
    width: 4.4rem;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--game-tone) 48%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--game-tone) 16%, transparent);
}

.arena-game-art span {
    display: block;
    width: 2.15rem;
    aspect-ratio: 1;
    border-radius: 10px;
    background: var(--game-tone);
    box-shadow: 0 0 26px color-mix(in srgb, var(--game-tone) 45%, transparent);
    transform: rotate(12deg);
}

.arena-game-copy {
    min-width: 0;
}

.arena-game h3 {
    margin: 0.22rem 0 0.25rem;
    color: var(--arena-text);
    font-size: 1.22rem;
    line-height: 1.08;
}

.arena-game p {
    margin: 0;
    color: var(--arena-muted);
    font-weight: 700;
}

.arena-split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 1rem;
}

.arena-minecraft,
.arena-updates {
    padding: 1.15rem;
}

.arena-server-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.arena-server-row span {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--arena-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--arena-text);
    font-size: 0.78rem;
    font-weight: 900;
}

.arena-updates ul {
    display: grid;
    gap: 0.6rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.arena-updates li {
    padding: 0.8rem;
    border: 1px solid var(--arena-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--arena-muted);
    font-weight: 750;
}

.page-kormkota .site-footer--guest {
    background: rgba(7, 8, 18, 0.92);
    border-color: var(--arena-line);
    color: var(--arena-muted);
}

@media (max-width: 980px) {
    .page-kormkota .header-inner--guest,
    .arena-hero,
    .arena-split {
        grid-template-columns: 1fr;
    }

    .guest-top-nav {
        justify-content: flex-end;
        width: 100%;
    }

    .guest-play-link {
        width: fit-content;
    }

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

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

@media (max-width: 620px) {
    .page-kormkota .container {
        width: min(100% - 0.85rem, 1180px);
    }

    .page-kormkota .header-inner--guest {
        width: min(100% - 0.85rem, 1180px);
        border-radius: 24px;
    }

    .page-kormkota .guest-logo-text strong {
        max-width: 13rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .page-kormkota .guest-logo-image {
        width: 2.8rem;
        height: 2.8rem;
    }

    .arena h1 {
        font-size: clamp(2.85rem, 16vw, 4.25rem);
    }

    .arena-hero {
        min-height: 0;
    }

    .arena-game-grid,
    .arena-metrics {
        grid-template-columns: 1fr;
    }

    .arena-game {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .arena-cube-scene {
        min-height: 13rem;
    }
}

/* Header single-link layout */
.page-kormkota .header-inner--guest {
    grid-template-columns: auto minmax(0, 1fr);
}

.page-kormkota .guest-top-nav {
    justify-content: flex-end;
}

.page-kormkota .guest-play-link {
    display: none;
}

@media (max-width: 980px) {
    .page-kormkota .header-inner--guest {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .page-kormkota .guest-top-nav {
        grid-column: auto;
        justify-content: flex-end;
        width: auto;
    }
}

@media (max-width: 520px) {
    .page-kormkota .header-inner--guest {
        gap: 0.55rem;
    }

    .page-kormkota .guest-logo-text small {
        display: none;
    }
}

/* KORMKOTA nova landing */
.nova {
    display: grid;
    gap: 1rem;
}

.nova-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
    gap: 1rem;
    min-height: 560px;
}

.nova-copy,
.nova-visual,
.nova-game,
.nova-focus-card,
.nova-status,
.nova-news article {
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 28px;
    background: rgba(14, 18, 32, 0.78);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
}

.nova-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(1.25rem, 5vw, 4rem);
    background:
        linear-gradient(135deg, rgba(182, 255, 77, 0.12), transparent 46%),
        linear-gradient(315deg, rgba(67, 230, 255, 0.14), transparent 42%),
        rgba(14, 18, 32, 0.82);
}

.nova-label,
.nova-section-head span,
.nova-game > span {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.72rem;
    border: 1px solid rgba(67, 230, 255, 0.38);
    border-radius: 999px;
    background: rgba(67, 230, 255, 0.08);
    color: #43e6ff;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.nova h1 {
    margin: 0.9rem 0 0;
    max-width: 11ch;
    color: #f7fbff;
    font-size: clamp(3rem, 8vw, 7rem);
    line-height: 0.9;
    letter-spacing: 0;
    text-transform: uppercase;
}

.nova-copy p,
.nova-focus-card p,
.nova-news p,
.nova-game p {
    color: #9eabc4;
    font-weight: 700;
    line-height: 1.55;
}

.nova-copy p {
    max-width: 44rem;
    margin: 1rem 0 0;
    font-size: clamp(1rem, 1.9vw, 1.22rem);
}

.nova-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.35rem;
}

.nova-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.1rem;
    padding: 0.7rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #f7fbff;
    font-weight: 950;
    text-decoration: none;
}

.nova-button:hover {
    text-decoration: none;
}

.nova-button--main {
    border-color: rgba(182, 255, 77, 0.68);
    background: #b6ff4d;
    color: #08100c;
    box-shadow: 0 0 30px rgba(182, 255, 77, 0.26);
}

.nova-visual {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    min-height: 32rem;
    background:
        radial-gradient(circle at 50% 46%, rgba(67, 230, 255, 0.2), transparent 36%),
        radial-gradient(circle at 72% 28%, rgba(255, 79, 163, 0.16), transparent 30%),
        rgba(14, 18, 32, 0.78);
}

.nova-window {
    position: absolute;
    inset: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 22px;
}

.nova-window span {
    position: absolute;
    top: 1rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #b6ff4d;
}

.nova-window span:nth-child(1) { left: 1rem; }
.nova-window span:nth-child(2) { left: 2rem; background: #43e6ff; }
.nova-window span:nth-child(3) { left: 3rem; background: #ff4fa3; }

.nova-orbit {
    position: absolute;
    width: 8rem;
    aspect-ratio: 1;
    border-radius: 30px;
    transform: rotate(14deg);
}

.nova-orbit--one {
    right: 18%;
    top: 22%;
    background: linear-gradient(135deg, #b6ff4d, #2cffb4);
}

.nova-orbit--two {
    left: 16%;
    bottom: 24%;
    width: 6.5rem;
    background: linear-gradient(135deg, #43e6ff, #5477ff);
}

.nova-orbit--three {
    right: 34%;
    bottom: 16%;
    width: 4.8rem;
    background: linear-gradient(135deg, #ff4fa3, #9c7cff);
}

.nova-visual strong,
.nova-visual small {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
    text-transform: uppercase;
}

.nova-visual strong {
    color: #f7fbff;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1;
}

.nova-visual small {
    color: #43e6ff;
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 950;
}

.nova-games {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.nova-game {
    min-width: 0;
    padding: 1rem;
}

.nova-game--mint { --nova-tone: #b6ff4d; }
.nova-game--sky { --nova-tone: #43e6ff; }
.nova-game--gold { --nova-tone: #ffd166; }
.nova-game--pink { --nova-tone: #ff4fa3; }

.nova-game > span {
    border-color: color-mix(in srgb, var(--nova-tone) 46%, transparent);
    background: color-mix(in srgb, var(--nova-tone) 10%, transparent);
    color: var(--nova-tone);
}

.nova-game h2 {
    margin: 1.2rem 0 0.25rem;
    color: #f7fbff;
    font-size: 1.5rem;
    line-height: 1;
}

.nova-game p {
    margin: 0;
}

.nova-focus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
    gap: 1rem;
}

.nova-focus-card,
.nova-status {
    padding: 1.15rem;
}

.nova-focus-card h2,
.nova-section-head h2 {
    margin: 0.8rem 0 0;
    color: #f7fbff;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    line-height: 1;
    letter-spacing: 0;
}

.nova-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.nova-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: #f7fbff;
    font-weight: 900;
}

.nova-status {
    display: grid;
    gap: 0.7rem;
}

.nova-status article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
}

.nova-status span {
    color: #b6ff4d;
    font-size: 2.1rem;
    font-weight: 950;
    line-height: 1;
}

.nova-status p {
    margin: 0;
    color: #9eabc4;
    font-weight: 900;
    text-transform: uppercase;
}

.nova-news {
    display: grid;
    gap: 0.85rem;
}

.nova-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.nova-news article {
    min-width: 0;
    padding: 1rem;
}

.nova-news time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: #43e6ff;
    color: #071018;
    font-weight: 950;
}

.nova-news h3 {
    margin: 0.8rem 0 0.35rem;
    color: #f7fbff;
    font-size: 1.15rem;
}

.nova-news p {
    margin: 0;
}

@media (max-width: 980px) {
    .nova-hero,
    .nova-focus {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 620px) {
    .nova h1 {
        font-size: clamp(2.65rem, 15vw, 4.1rem);
    }

    .nova-hero {
        min-height: 0;
    }

    .nova-copy,
    .nova-visual {
        padding: 1rem;
    }

    .nova-visual {
        min-height: 22rem;
    }

    .nova-games,
    .nova-news-grid {
        grid-template-columns: 1fr;
    }

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

    .nova-button {
        width: 100%;
    }
}

/* KORMKOTA left-tabs dashboard */
.page-kormkota {
    min-height: 100vh;
    background:
        linear-gradient(90deg, rgba(67, 230, 255, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 12% 18%, rgba(67, 230, 255, 0.18), transparent 26rem),
        radial-gradient(circle at 82% 14%, rgba(255, 79, 163, 0.16), transparent 28rem),
        #080d17;
    background-size: 88px 88px, 88px 88px, auto, auto, auto;
    color: #f7fbff;
}

.page-profile-kormkota .main-content--guest {
    width: min(100%, 1180px);
}

.page-kormkota .online-indicator,
.page-kormkota .footer-dot,
.page-kormkota .scroll-top {
    display: none !important;
}

.kk-profile-dashboard {
    align-items: start;
}

.kk-profile-workspace {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.kk-profile-hero,
.kk-profile-stats,
.kk-profile-composer,
.kk-profile-wall,
.kk-profile-side-card {
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(14, 20, 34, 0.94), rgba(9, 13, 25, 0.91));
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.24);
}

.kk-profile-hero {
    overflow: hidden;
}

.kk-profile-cover {
    position: relative;
    min-height: 9.5rem;
    background:
        radial-gradient(circle at 16% 28%, rgba(67, 230, 255, 0.32), transparent 13rem),
        radial-gradient(circle at 78% 22%, rgba(182, 255, 77, 0.24), transparent 14rem),
        linear-gradient(135deg, rgba(67, 230, 255, 0.16), rgba(255, 79, 163, 0.1));
    background-position: center;
    background-size: cover;
}

.kk-profile-cover span {
    position: absolute;
    width: 4.2rem;
    aspect-ratio: 1;
    border-radius: 22px;
    opacity: 0.92;
    transform: rotate(-10deg);
}

.kk-profile-cover span:nth-child(1) {
    right: 11%;
    top: 1.8rem;
    background: linear-gradient(135deg, #43e6ff, #5477ff);
}

.kk-profile-cover span:nth-child(2) {
    right: 21%;
    bottom: 1.4rem;
    width: 3.2rem;
    background: linear-gradient(135deg, #ff4fa3, #9c7cff);
}

.kk-profile-cover span:nth-child(3) {
    right: 5%;
    bottom: 2.3rem;
    width: 3.6rem;
    background: linear-gradient(135deg, #b6ff4d, #2cffb4);
}

.kk-profile-hero.has-cover .kk-profile-cover span {
    display: none;
}

.kk-profile-card {
    display: grid;
    grid-template-columns: 7.25rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
    padding: 0 1rem 1rem;
    margin-top: -3.6rem;
}

.kk-profile-avatar {
    position: relative;
    z-index: 1;
    width: 7.25rem;
    height: 7.25rem;
    border: 1px solid rgba(67, 230, 255, 0.45);
    border-radius: 26px;
    background: rgba(8, 13, 23, 0.96);
    object-fit: cover;
    box-shadow: 0 0 0 6px rgba(8, 13, 23, 0.96), 0 18px 38px rgba(0, 0, 0, 0.34);
}

.kk-profile-title {
    min-width: 0;
    padding-top: 3.9rem;
}

.kk-profile-title > span,
.kk-profile-badge,
.kk-pill {
    display: inline-flex;
    width: fit-content;
    min-height: 2rem;
    align-items: center;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(67, 230, 255, 0.36);
    border-radius: 999px;
    background: rgba(67, 230, 255, 0.1);
    color: #43e6ff;
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-profile-title h1 {
    margin: 0.45rem 0 0.3rem;
    color: #f7fbff;
    font-size: clamp(2rem, 5vw, 3.8rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.kk-profile-title p {
    margin: 0;
    color: #9eabc4;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.kk-profile-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
    padding-bottom: 0.2rem;
}

.kk-inline-form {
    display: inline-flex;
    margin: 0;
}

.kk-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: #f7fbff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.kk-action--primary,
.kk-action:hover,
.kk-action:focus-visible {
    border-color: rgba(67, 230, 255, 0.5);
    background: linear-gradient(135deg, #b6ff4d, #43e6ff);
    color: #071018;
    transform: translateY(-1px);
}

.kk-action--danger {
    border-color: rgba(255, 122, 122, 0.45);
    background: rgba(255, 122, 122, 0.14);
    color: #ff9b9b;
}

.kk-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.85rem;
}

.kk-profile-stats a,
.kk-profile-stats div {
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
    text-decoration: none;
}

.kk-profile-stats strong {
    display: block;
    color: #b6ff4d;
    font-size: 2rem;
    line-height: 1;
}

.kk-profile-stats span {
    color: #9eabc4;
    font-size: 0.82rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1rem;
    align-items: start;
}

.kk-profile-main,
.kk-profile-side {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.kk-profile-side {
    position: sticky;
    top: 6.4rem;
}

.kk-profile-composer,
.kk-profile-wall {
    padding: 1rem;
}

.kk-profile-composer form {
    display: grid;
    gap: 0.75rem;
}

.kk-profile-composer textarea,
.page-profile-settings-kormkota input,
.page-profile-settings-kormkota textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    color: #f7fbff;
    font: inherit;
    font-weight: 750;
    line-height: 1.45;
    padding: 0.85rem;
}

.kk-profile-composer textarea {
    resize: vertical;
    min-height: 7rem;
}

.kk-profile-composer textarea:focus,
.page-profile-settings-kormkota input:focus,
.page-profile-settings-kormkota textarea:focus {
    border-color: rgba(67, 230, 255, 0.58);
    box-shadow: 0 0 0 3px rgba(67, 230, 255, 0.12);
    outline: none;
}

.kk-composer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.kk-composer-bar span {
    color: #748199;
    font-size: 0.82rem;
    font-weight: 850;
}

.kk-composer-bar strong {
    color: #f7fbff;
    font-size: 0.85rem;
}

.kk-profile-wall {
    display: grid;
    gap: 0.85rem;
}

.kk-profile-empty {
    display: grid;
    place-items: center;
    min-height: 12rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
    text-align: center;
}

.kk-profile-empty strong {
    color: #f7fbff;
    font-size: 1.2rem;
}

.kk-profile-empty p {
    margin: 0.25rem 0 0;
    color: #9eabc4;
    font-weight: 800;
}

.kk-profile-posts {
    display: grid;
    gap: 0.85rem;
}

.page-profile-kormkota .post-card,
.page-profile-kormkota .comment-list,
.page-profile-kormkota .comment-form {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.055);
    color: #dce7ff;
}

.page-profile-kormkota .post-card {
    border-radius: 18px;
    box-shadow: none;
}

.page-profile-kormkota .post-author,
.page-profile-kormkota .post-body,
.page-profile-kormkota .comment-list strong {
    color: #f7fbff;
}

.page-profile-kormkota .post-time,
.page-profile-kormkota .comment-count,
.page-profile-kormkota .comment-list time {
    color: #9eabc4;
}

.page-profile-kormkota .comment-form input {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #f7fbff;
}

.kk-profile-side-card {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
}

.kk-profile-side-card h2 {
    margin: 0;
    color: #f7fbff;
    font-size: 1.55rem;
    line-height: 1;
}

.kk-profile-side-card ul {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-profile-side-card li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #9eabc4;
    font-weight: 850;
}

.kk-profile-side-card li span {
    flex: 0 0 auto;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #b6ff4d;
    box-shadow: 0 0 18px rgba(182, 255, 77, 0.5);
}

.kk-profile-details {
    display: grid;
    gap: 0.65rem;
    margin: 0;
}

.kk-profile-details div {
    display: grid;
    gap: 0.15rem;
}

.kk-profile-details dt {
    color: #748199;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-profile-details dd {
    margin: 0;
    color: #f7fbff;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.kk-profile-dashboard--simple .kk-profile-workspace,
.kk-profile-dashboard--simple .kk-settings-workspace {
    min-height: calc(100vh - 9rem);
}

.kk-profile-simple {
    position: relative;
    display: grid;
    gap: 1.1rem;
    min-height: 34rem;
    padding: clamp(1rem, 3vw, 1.4rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 28px;
    background:
        radial-gradient(circle at 82% 20%, rgba(182, 255, 77, 0.18), transparent 16rem),
        radial-gradient(circle at 20% 82%, rgba(67, 230, 255, 0.18), transparent 18rem),
        linear-gradient(145deg, rgba(14, 20, 34, 0.96), rgba(9, 13, 25, 0.93));
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}

.kk-profile-simple-art {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.kk-profile-simple-art span {
    position: absolute;
    width: 5rem;
    aspect-ratio: 1;
    border-radius: 25px;
    opacity: 0.9;
    filter: saturate(1.08);
    transform: rotate(-10deg);
}

.kk-profile-simple-art span:nth-child(1) {
    top: 3.5rem;
    right: 12%;
    background: linear-gradient(135deg, #43e6ff, #5477ff);
}

.kk-profile-simple-art span:nth-child(2) {
    top: 8.2rem;
    right: 24%;
    width: 3.8rem;
    background: linear-gradient(135deg, #ff4fa3, #9c7cff);
}

.kk-profile-simple-art span:nth-child(3) {
    bottom: 5rem;
    right: 8%;
    width: 4.3rem;
    background: linear-gradient(135deg, #b6ff4d, #2cffb4);
}

.kk-profile-simple-art span:nth-child(4) {
    bottom: 3.5rem;
    left: 9%;
    width: 3rem;
    background: linear-gradient(135deg, #ffd166, #ff7a59);
}

.kk-profile-simple-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 9.25rem minmax(0, 1fr);
    gap: 1.1rem;
    align-items: center;
    max-width: 44rem;
}

.kk-profile-avatar--big {
    width: 9.25rem;
    height: 9.25rem;
    border-radius: 32px;
}

.kk-profile-edit {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem) auto;
    gap: 0.8rem;
    align-items: end;
    max-width: 58rem;
    margin-top: auto;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.055);
}

.kk-profile-edit label {
    display: grid;
    gap: 0.45rem;
    color: #9eabc4;
    font-size: 0.82rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-profile-edit input[type="text"] {
    width: 100%;
    min-height: 3.3rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    color: #f7fbff;
    font: inherit;
    font-size: 1rem;
    font-weight: 850;
    padding: 0.8rem 0.9rem;
}

.kk-file-pick--profile {
    min-height: 3.3rem;
    padding: 0.7rem;
}

.kk-profile-edit .kk-action {
    min-height: 3.3rem;
}

.kk-profile-admin {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.7rem;
    max-width: 36rem;
    padding: 1rem;
    border: 1px solid rgba(255, 122, 122, 0.22);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255, 122, 122, 0.1), rgba(255, 255, 255, 0.04)),
        rgba(8, 13, 24, 0.72);
}

.kk-profile-admin strong {
    color: #f7fbff;
    font-size: 1rem;
}

.kk-profile-admin p {
    margin: 0;
    color: #ffb4b4;
    font-weight: 850;
}

.kk-profile-admin label {
    display: grid;
    gap: 0.45rem;
    color: #9eabc4;
    font-size: 0.8rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-profile-admin input[type="text"],
.kk-profile-admin input[type="number"] {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    color: #f7fbff;
    font: inherit;
    font-weight: 850;
}

.kk-balance-mini {
    color: #b6ff4d;
    font-weight: 950;
}

.guest-balance {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 1rem;
    border: 1px solid rgba(182, 255, 77, 0.28);
    border-radius: 999px;
    background: rgba(182, 255, 77, 0.09);
    color: #9eabc4;
    font-weight: 950;
    text-transform: uppercase;
}

.guest-balance strong {
    color: #b6ff4d;
}

.kk-profile-balance {
    display: inline-grid;
    gap: 0.2rem;
    width: fit-content;
    margin-top: 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(182, 255, 77, 0.28);
    border-radius: 18px;
    background: rgba(182, 255, 77, 0.09);
}

.kk-profile-balance small {
    color: #9eabc4;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-profile-balance strong {
    color: #b6ff4d;
    font-size: 1.25rem;
    line-height: 1;
}

.kk-profile-balance-admin {
    border-color: rgba(182, 255, 77, 0.24);
    background:
        linear-gradient(145deg, rgba(182, 255, 77, 0.1), rgba(67, 230, 255, 0.05)),
        rgba(8, 13, 24, 0.72);
}

.kk-profile-balance-admin p {
    color: #b6ff4d;
}

.kk-settings-workspace,
.kk-settings-form {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.kk-settings-card {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(14, 20, 34, 0.94), rgba(9, 13, 25, 0.91));
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.24);
}

.kk-settings-card h2 {
    margin: 0;
    color: #f7fbff;
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    line-height: 1;
}

.kk-settings-card p,
.kk-settings-card label,
.kk-cover-picker legend {
    color: #9eabc4;
    font-weight: 850;
}

.kk-settings-card p {
    margin: 0;
    line-height: 1.45;
}

.kk-settings-card label {
    display: grid;
    gap: 0.45rem;
    font-size: 0.82rem;
    text-transform: uppercase;
}

.kk-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.kk-settings-media {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.kk-settings-avatar {
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    min-width: 12rem;
}

.kk-file-pick {
    width: 100%;
    min-height: 5.1rem;
    place-items: center;
    padding: 0.8rem;
    border: 1px dashed rgba(67, 230, 255, 0.34);
    border-radius: 18px;
    background: rgba(67, 230, 255, 0.07);
    cursor: pointer;
    text-align: center;
}

.kk-file-pick input {
    display: none;
}

.kk-file-pick span {
    color: #43e6ff;
    font-size: 0.9rem;
    font-weight: 950;
}

.kk-file-pick small {
    color: #748199;
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: none;
}

.kk-cover-picker {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.kk-cover-picker legend {
    margin-bottom: 0.6rem;
    font-size: 0.82rem;
    text-transform: uppercase;
}

.kk-cover-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.kk-cover-option {
    position: relative;
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
    cursor: pointer;
}

.kk-cover-option input {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.kk-cover-option span {
    display: block;
    min-height: 4.5rem;
    border-radius: 14px;
    background-position: center;
    background-size: cover;
}

.kk-cover-option strong {
    display: block;
    margin-top: 0.45rem;
    color: #f7fbff;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.kk-cover-option:has(input:checked) {
    border-color: rgba(67, 230, 255, 0.58);
    box-shadow: 0 0 0 3px rgba(67, 230, 255, 0.12);
}

.kk-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

@media (max-width: 980px) {
    .kk-profile-layout {
        grid-template-columns: 1fr;
    }

    .kk-profile-side {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .kk-profile-card {
        grid-template-columns: 5.8rem minmax(0, 1fr);
        align-items: end;
    }

    .kk-profile-avatar {
        width: 5.8rem;
        height: 5.8rem;
        border-radius: 22px;
    }

    .kk-profile-title {
        padding-top: 3.1rem;
    }

    .kk-profile-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .kk-profile-stats,
    .kk-profile-side,
    .kk-settings-grid,
    .kk-settings-media,
    .kk-cover-options {
        grid-template-columns: 1fr;
    }

    .kk-settings-avatar {
        justify-items: stretch;
    }

    .kk-profile-simple-main,
    .kk-profile-edit {
        grid-template-columns: 1fr;
    }

    .kk-profile-avatar--big {
        width: 7.2rem;
        height: 7.2rem;
    }

    .kk-profile-simple-art span {
        opacity: 0.42;
    }

    .kk-composer-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .kk-composer-bar .kk-action {
        width: 100%;
    }
}

.page-kormkota .site-header--guest {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 0.8rem clamp(0.85rem, 3vw, 1.6rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(8, 12, 22, 0.92);
    backdrop-filter: blur(18px);
}

.page-kormkota .header-inner--guest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(100%, 1180px);
    min-height: 4.5rem;
    margin: 0 auto;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(14, 21, 36, 0.98), rgba(15, 17, 32, 0.95));
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
}

.page-kormkota .guest-logo {
    min-width: 0;
}

.page-kormkota .guest-logo-image {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(67, 230, 255, 0.42), 0 0 22px rgba(67, 230, 255, 0.18);
}

.page-kormkota .guest-logo-text strong {
    color: #f7fbff;
    font-size: clamp(1.25rem, 2vw, 1.85rem);
    letter-spacing: 0;
    line-height: 1;
}

.page-kormkota .guest-logo-text strong span {
    color: #43e6ff;
}

.page-kormkota .guest-logo-text small {
    color: #9eabc4;
    font-size: 0.78rem;
    font-weight: 900;
}

.page-kormkota .guest-top-nav {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.page-kormkota .guest-top-nav a {
    min-height: 3rem;
    padding: 0.65rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: #f7fbff;
    font-size: 0.92rem;
    font-weight: 950;
    text-transform: uppercase;
}

.page-kormkota .guest-account-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-left: auto;
}

.page-kormkota .guest-account-form {
    margin: 0;
}

.page-kormkota .guest-account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.65rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: #f7fbff;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.page-kormkota .guest-account-link:hover,
.page-kormkota .guest-account-link:focus-visible {
    border-color: rgba(67, 230, 255, 0.55);
    background: rgba(67, 230, 255, 0.12);
    color: #43e6ff;
    transform: translateY(-1px);
}

.page-kormkota .main-content--guest {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 1rem clamp(0.8rem, 2.6vw, 1.4rem) 2rem;
}

.kk-dashboard,
.kk-dashboard * {
    box-sizing: border-box;
}

.kk-dashboard {
    display: grid;
    grid-template-columns: 14.8rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    min-height: calc(100vh - 9rem);
}

.kk-rail {
    position: sticky;
    top: 6.4rem;
    display: grid;
    gap: 0.75rem;
    justify-items: stretch;
    align-content: start;
    min-height: calc(100vh - 8rem);
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    background: rgba(12, 17, 30, 0.92);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
}

.kk-rail-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
    color: #f7fbff;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.kk-rail-nav {
    display: grid;
    gap: 0.55rem;
}

.kk-rail-nav a {
    position: relative;
}

.kk-rail-section {
    display: block;
    margin: 0.55rem 0 0.15rem;
    padding: 0 0.85rem;
    color: #6f7d96;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.kk-menu-mark {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: rgba(158, 171, 196, 0.6);
    box-shadow: 0 0 0 rgba(67, 230, 255, 0);
}

.kk-rail-nav a strong {
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #f7fbff;
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.2;
    opacity: 1;
    pointer-events: auto;
    text-transform: uppercase;
    transform: none;
    transition: color 160ms ease;
    white-space: normal;
}

.kk-rail-nav a:hover,
.kk-rail-nav a.is-active {
    border-color: rgba(67, 230, 255, 0.54);
    background: linear-gradient(135deg, rgba(67, 230, 255, 0.2), rgba(182, 255, 77, 0.13));
    transform: translateX(2px);
}

.kk-rail-nav a:hover .kk-menu-mark,
.kk-rail-nav a.is-active .kk-menu-mark {
    background: #43e6ff;
    box-shadow: 0 0 14px rgba(67, 230, 255, 0.35);
}

.kk-rail-nav a:hover strong,
.kk-rail-nav a.is-active strong {
    color: #43e6ff;
}

.kk-rail-nav a:hover strong,
.kk-rail-nav a:focus-visible strong {
    opacity: 1;
    transform: none;
}

.kk-workspace {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.kk-topbar,
.kk-panel,
.kk-section {
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(14, 20, 34, 0.93), rgba(9, 13, 25, 0.9));
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.24);
}

.kk-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 5.2rem;
    padding: 1rem 1.1rem;
}

.kk-eyebrow,
.kk-pill,
.kk-section-head span {
    display: inline-flex;
    width: fit-content;
    min-height: 1.8rem;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border: 1px solid rgba(67, 230, 255, 0.35);
    border-radius: 999px;
    background: rgba(67, 230, 255, 0.09);
    color: #43e6ff;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-topbar h1 {
    margin: 0;
    color: #f7fbff;
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    line-height: 1;
    letter-spacing: 0;
}

.kk-topbar-lead {
    max-width: 42rem;
    margin: 0.55rem 0 0;
    color: #aebbd2;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
}

.kk-status {
    display: grid;
    min-width: 9rem;
    justify-items: end;
}

.kk-status span {
    color: #b6ff4d;
    font-size: 2rem;
    font-weight: 950;
    line-height: 1;
}

.kk-status small {
    color: #9eabc4;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.2;
    text-align: right;
    text-transform: uppercase;
}

.kk-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.38fr);
    gap: 1rem;
    align-items: start;
}

.kk-feed,
.kk-side {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.kk-panel,
.kk-section {
    min-width: 0;
    padding: 1rem;
}

.kk-panel--intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.52fr);
    gap: 1rem;
    align-items: center;
    min-height: 8rem;
    overflow: hidden;
}

.kk-panel--intro h2,
.kk-minecraft h2,
.kk-servers h2 {
    margin: 0.6rem 0 0;
    color: #f7fbff;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    line-height: 1.12;
    letter-spacing: 0;
}

.kk-panel--intro p,
.kk-minecraft p,
.kk-game-card p,
.kk-news-list p {
    margin: 0;
    color: #9eabc4;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.55;
}

.kk-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
    max-width: 8.5rem;
    transform: rotate(-7deg);
}

.kk-mini-grid span {
    aspect-ratio: 1;
    border-radius: 24px;
    background: linear-gradient(135deg, #43e6ff, #5477ff);
}

.kk-mini-grid span:nth-child(2) {
    background: linear-gradient(135deg, #b6ff4d, #2cffb4);
}

.kk-mini-grid span:nth-child(3) {
    background: linear-gradient(135deg, #ff4fa3, #9c7cff);
}

.kk-mini-grid span:nth-child(4) {
    background: linear-gradient(135deg, #ffd166, #ff7a59);
}

.kk-intro-points {
    display: grid;
    gap: 0.55rem;
}

.kk-intro-points span {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.4rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(67, 230, 255, 0.24);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(67, 230, 255, 0.1), rgba(182, 255, 77, 0.06));
    color: #dce7ff;
    font-size: 0.86rem;
    font-weight: 950;
    line-height: 1.15;
}

.kk-intro-points span::before {
    content: "";
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #43e6ff;
    box-shadow: 0 0 14px rgba(67, 230, 255, 0.52);
}

.kk-section {
    display: grid;
    gap: 0.85rem;
}

.kk-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.kk-section-head h2 {
    margin: 0;
    color: #f7fbff;
    font-size: 1.45rem;
    line-height: 1;
}

.kk-section-head a {
    color: #43e6ff;
    font-size: 0.86rem;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
}

.kk-game-grid,
.kk-chat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.kk-game-card,
.kk-chat-card,
.kk-news-list article {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
}

.kk-game-card,
.kk-chat-card {
    display: grid;
    gap: 0.45rem;
    padding: 0.9rem;
}

.kk-game-card strong,
.kk-chat-card strong {
    color: #f7fbff;
    font-size: 1.05rem;
}

.kk-game-card span,
.kk-chat-card span {
    width: fit-content;
    min-height: 1.7rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: rgba(182, 255, 77, 0.12);
    color: #b6ff4d;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-chat-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.035)),
        radial-gradient(circle at 82% 18%, rgba(67, 230, 255, 0.14), transparent 8rem);
}

.kk-chat-card a {
    width: fit-content;
    min-height: 1.7rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: rgba(67, 230, 255, 0.12);
    color: #43e6ff;
    font-size: 0.72rem;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
}

.kk-downloads {
    gap: 0.85rem;
}

.kk-download-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.kk-download-card {
    display: grid;
    align-content: space-between;
    gap: 0.9rem;
    min-width: 0;
    min-height: 9.4rem;
    padding: 0.95rem;
    border: 1px solid rgba(67, 230, 255, 0.16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 90% 0%, rgba(67, 230, 255, 0.14), transparent 7rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.032));
}

.kk-download-card strong {
    display: block;
    margin-bottom: 0.45rem;
    color: #f7fbff;
    font-size: 1rem;
    line-height: 1.15;
}

.kk-download-card p {
    margin: 0;
    color: #9eabc4;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.42;
}

.kk-download-card > span,
.kk-download-card > a {
    width: fit-content;
    min-height: 1.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(182, 255, 77, 0.12);
    color: #b6ff4d;
    font-size: 0.72rem;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
}

.kk-download-card > a {
    background: rgba(67, 230, 255, 0.14);
    color: #43e6ff;
}

.kk-download-admin {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding: 0.9rem;
    border: 1px solid rgba(67, 230, 255, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
}

.kk-download-admin strong {
    color: #f7fbff;
    font-size: 1rem;
}

.kk-download-admin label {
    display: grid;
    gap: 0.4rem;
    color: #9eabc4;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-download-admin input {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: #f7fbff;
    font: inherit;
    font-weight: 850;
}

.kk-mini-chat {
    gap: 0.85rem;
}

.kk-mini-chat-list {
    display: grid;
    gap: 0.62rem;
}

.kk-mini-chat-list article {
    display: grid;
    grid-template-columns: 2.55rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
    min-height: 4.2rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.035));
}

.kk-mini-chat-list img,
.kk-mini-chat-avatar {
    width: 2.55rem;
    height: 2.55rem;
    border: 1px solid rgba(67, 230, 255, 0.38);
    border-radius: 14px;
    object-fit: cover;
    background: rgba(67, 230, 255, 0.12);
}

.kk-mini-chat-avatar {
    display: grid;
    place-items: center;
    color: #43e6ff;
    font-weight: 950;
}

.kk-mini-chat-list h3 {
    margin: 0 0 0.22rem;
    color: #f7fbff;
    font-size: 0.98rem;
    line-height: 1.15;
}

.kk-mini-chat-list p {
    margin: 0;
    color: #9eabc4;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.35;
}

.kk-mini-chat-list time {
    color: #738097;
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
}

.kk-mini-chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    padding-top: 0.15rem;
}

.kk-mini-chat-form input {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(67, 230, 255, 0.25);
    border-radius: 16px;
    background: rgba(8, 13, 24, 0.74);
    color: #f7fbff;
    font: inherit;
    font-weight: 800;
}

.kk-mini-chat-form button,
.kk-mini-chat-login a {
    min-height: 3rem;
    padding: 0 1rem;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #b6ff4d, #43e6ff);
    color: #07101b;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.kk-mini-chat-login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: #9eabc4;
    font-size: 0.92rem;
    font-weight: 850;
}

.kk-news-dashboard .kk-workspace {
    align-content: start;
}

.kk-status--text {
    min-width: 7.5rem;
}

.kk-top-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0 1rem;
    border: 1px solid rgba(67, 230, 255, 0.32);
    border-radius: 16px;
    background: rgba(67, 230, 255, 0.09);
    color: #43e6ff;
    font-size: 0.86rem;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
}

.kk-news-editor,
.kk-news-board {
    gap: 1rem;
}

.kk-news-form {
    display: grid;
    gap: 0.85rem;
}

.kk-news-form label {
    display: grid;
    gap: 0.5rem;
    color: #9eabc4;
    font-size: 0.82rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-news-form input,
.kk-news-form textarea {
    width: 100%;
    border: 1px solid rgba(67, 230, 255, 0.22);
    border-radius: 18px;
    background: rgba(8, 13, 24, 0.78);
    color: #f7fbff;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.45;
    padding: 0.85rem 0.95rem;
    outline: none;
}

.kk-news-form input {
    min-height: 3.35rem;
}

.kk-news-form textarea {
    min-height: 10rem;
    resize: vertical;
}

.kk-news-form input:focus,
.kk-news-form textarea:focus {
    border-color: rgba(67, 230, 255, 0.62);
    box-shadow: 0 0 0 3px rgba(67, 230, 255, 0.12);
}

.kk-news-cards {
    display: grid;
    gap: 0.85rem;
}

.kk-news-card,
.kk-news-empty {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background:
        radial-gradient(circle at 92% 0%, rgba(67, 230, 255, 0.1), transparent 9rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.032));
}

.kk-news-card {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
}

.kk-news-card header {
    display: grid;
    gap: 0.45rem;
}

.kk-news-card header span,
.kk-news-empty span {
    width: fit-content;
    min-height: 1.75rem;
    padding: 0.23rem 0.65rem;
    border: 1px solid rgba(67, 230, 255, 0.32);
    border-radius: 999px;
    background: rgba(67, 230, 255, 0.09);
    color: #43e6ff;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-news-card h3 {
    margin: 0;
    color: #f7fbff;
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    line-height: 1.12;
}

.kk-news-content {
    color: #b8c4da;
    font-size: 1rem;
    font-weight: 780;
    line-height: 1.58;
}

.kk-news-content p {
    margin: 0 0 0.7rem;
}

.kk-news-content p:last-child {
    margin-bottom: 0;
}

.kk-news-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding-top: 0.2rem;
}

.kk-news-card footer small {
    color: #77849c;
    font-weight: 900;
}

.kk-news-actions,
.kk-news-actions form,
.kk-form-actions,
.kk-pagination {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
}

.kk-news-actions a,
.kk-news-actions button,
.kk-pagination a,
.kk-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(67, 230, 255, 0.28);
    border-radius: 999px;
    background: rgba(67, 230, 255, 0.09);
    color: #43e6ff;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.kk-news-actions button {
    border-color: rgba(255, 122, 122, 0.32);
    background: rgba(255, 122, 122, 0.12);
    color: #ff9b9b;
}

.kk-news-empty {
    display: grid;
    gap: 0.65rem;
    min-height: 11rem;
    place-items: center;
    padding: 1.4rem;
    text-align: center;
}

.kk-news-empty strong {
    color: #f7fbff;
    font-size: 1.25rem;
}

.kk-news-empty p {
    max-width: 30rem;
    margin: 0;
    color: #9eabc4;
    font-weight: 800;
    line-height: 1.45;
}

.kk-pagination {
    justify-content: center;
    padding-top: 0.2rem;
}

.public-chat {
    display: grid;
    gap: 1rem;
    width: min(100%, 980px);
    margin: 0 auto;
}

.public-chat-head,
.public-chat-box,
.public-chat-form,
.public-chat-login {
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(14, 20, 34, 0.94), rgba(9, 13, 25, 0.91));
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.24);
}

.public-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
}

.public-chat-head h1 {
    margin: 0.55rem 0 0.35rem;
    color: #f7fbff;
    font-size: clamp(1.8rem, 5vw, 3rem);
    line-height: 1;
}

.public-chat-head p,
.public-chat-empty p,
.public-chat-login p {
    margin: 0;
    color: #9eabc4;
    font-weight: 800;
    line-height: 1.5;
}

.public-chat-back {
    flex: 0 0 auto;
    color: #43e6ff;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
}

.public-chat-box {
    min-height: 22rem;
    max-height: 58vh;
    overflow: auto;
    padding: 1rem;
}

.public-chat-list {
    display: grid;
    gap: 0.8rem;
}

.public-chat-message {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.public-chat-avatar img {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(67, 230, 255, 0.35);
    border-radius: 14px;
    object-fit: cover;
}

.public-chat-bubble {
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
}

.public-chat-bubble header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.public-chat-bubble header a {
    min-width: 0;
    color: #f7fbff;
    font-weight: 950;
    text-decoration: none;
}

.public-chat-bubble time {
    flex: 0 0 auto;
    color: #748199;
    font-size: 0.78rem;
    font-weight: 800;
}

.public-chat-bubble p {
    margin: 0;
    color: #dce7ff;
    font-weight: 750;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.public-chat-empty,
.public-chat-login {
    display: grid;
    gap: 0.65rem;
    padding: 1rem;
}

.public-chat-empty {
    place-items: center;
    min-height: 18rem;
    text-align: center;
}

.public-chat-empty h2,
.public-chat-login h2 {
    margin: 0;
    color: #f7fbff;
}

.public-chat-form {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
}

.public-chat-form label {
    color: #9eabc4;
    font-size: 0.8rem;
    font-weight: 950;
    text-transform: uppercase;
}

.public-chat-form textarea {
    width: 100%;
    resize: vertical;
    min-height: 5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    color: #f7fbff;
    font: inherit;
    font-weight: 750;
    line-height: 1.45;
    padding: 0.85rem;
}

.public-chat-form textarea:focus {
    border-color: rgba(67, 230, 255, 0.58);
    box-shadow: 0 0 0 3px rgba(67, 230, 255, 0.12);
    outline: none;
}

.public-chat-form button {
    justify-self: end;
}

.public-chat-login div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.kk-news-list {
    display: grid;
    gap: 0.7rem;
}

.kk-news-list article {
    display: grid;
    grid-template-columns: 5.7rem minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0.85rem;
}

.kk-news-list article.kk-news-list-item {
    grid-template-columns: minmax(0, 1fr);
}

.kk-news-list article > span {
    align-self: start;
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: rgba(67, 230, 255, 0.1);
    color: #43e6ff;
    font-size: 0.72rem;
    font-weight: 950;
    text-align: center;
}

.kk-news-list h3 {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-height: 2rem;
    align-items: center;
    margin: 0 0 0.55rem;
    padding: 0.32rem 0.7rem;
    border: 1px solid rgba(67, 230, 255, 0.38);
    border-radius: 999px;
    background: rgba(67, 230, 255, 0.12);
    color: #43e6ff;
    font-size: 0.9rem;
    font-weight: 950;
    line-height: 1.18;
    text-transform: lowercase;
}

.kk-side {
    position: sticky;
    top: 6.4rem;
}

.kk-minecraft {
    background:
        linear-gradient(145deg, rgba(14, 20, 34, 0.94), rgba(9, 13, 25, 0.92)),
        radial-gradient(circle at 82% 22%, rgba(182, 255, 77, 0.2), transparent 11rem);
}

.kk-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.kk-tags span {
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #f7fbff;
    font-size: 0.78rem;
    font-weight: 900;
}

.kk-servers ul {
    display: grid;
    gap: 0.7rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.kk-servers li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #9eabc4;
    font-weight: 850;
}

.kk-servers li span {
    flex: 0 0 auto;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #b6ff4d;
    box-shadow: 0 0 18px rgba(182, 255, 77, 0.5);
}

.kk-monitor-side {
    align-self: start;
}

.kk-monitor {
    display: grid;
    gap: 0.85rem;
    background:
        linear-gradient(145deg, rgba(14, 20, 34, 0.96), rgba(9, 13, 25, 0.92)),
        radial-gradient(circle at 82% 18%, rgba(182, 255, 77, 0.18), transparent 12rem),
        radial-gradient(circle at 8% 92%, rgba(67, 230, 255, 0.16), transparent 11rem);
}

.kk-monitor h2 {
    margin: 0;
    color: #f7fbff;
    font-size: clamp(1.65rem, 3vw, 2.2rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.kk-monitor-title {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    text-align: center;
    padding-bottom: 0.25rem;
}

.kk-monitor-title span {
    display: inline-flex;
    min-height: 1.45rem;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: rgba(67, 230, 255, 0.12);
    color: #43e6ff;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    box-shadow: 0 0 18px rgba(67, 230, 255, 0.16);
}

.kk-monitor-title h2 {
    text-align: center;
}

.kk-monitor-title p {
    margin: 0;
    color: #96a4bd;
    font-size: 0.8rem;
    font-weight: 850;
}

.kk-monitor-list {
    display: grid;
    gap: 0.7rem;
}

.kk-monitor-card {
    display: grid;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(67, 230, 255, 0.1), transparent 7rem),
        rgba(255, 255, 255, 0.055);
}

.kk-monitor-card-top {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: center;
    gap: 0.72rem;
}

.kk-monitor-card-top img {
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    border: 1px solid rgba(67, 230, 255, 0.32);
    background: rgba(3, 9, 18, 0.72);
    box-shadow: 0 0 20px rgba(67, 230, 255, 0.15);
}

a.kk-monitor-card {
    color: inherit;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

a.kk-monitor-card:hover,
a.kk-monitor-card:focus-visible {
    border-color: rgba(67, 230, 255, 0.45);
    background:
        radial-gradient(circle at 100% 0%, rgba(67, 230, 255, 0.16), transparent 7rem),
        rgba(255, 255, 255, 0.075);
    transform: translateY(-1px);
}

.kk-monitor-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.kk-monitor-card strong {
    color: #f7fbff;
    font-size: 1.28rem;
    line-height: 1;
}

.kk-monitor-state {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.7rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    color: #f7fbff;
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-monitor-state::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: currentColor;
}

.kk-monitor-card.is-online .kk-monitor-state {
    background: rgba(182, 255, 77, 0.12);
    color: #b6ff4d;
}

.kk-monitor-card.is-offline .kk-monitor-state {
    background: rgba(255, 99, 99, 0.12);
    color: #ff7a7a;
}

.kk-monitor-card code {
    display: block;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid rgba(67, 230, 255, 0.18);
    border-radius: 14px;
    background: rgba(67, 230, 255, 0.07);
    color: #43e6ff;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.kk-monitor-players {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin: 0;
}

.kk-monitor-players span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f7fbff;
    font-size: 1.08rem;
    font-weight: 950;
}

.kk-monitor-players small {
    color: #77849c;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-monitor-bar {
    height: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.kk-monitor-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #b6ff4d, #43e6ff);
}

.kk-monitor-card.is-offline .kk-monitor-bar i {
    background: linear-gradient(90deg, #ff7a7a, #ffb86b);
}

.kk-minecraft-page .kk-section {
    padding: 1rem;
}

.kk-status--balance span {
    color: #b6ff4d;
    font-size: 1.7rem;
}

.kk-server-grid,
.kk-product-grid {
    display: grid;
    gap: 0.85rem;
}

.kk-server-grid {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.kk-server-card,
.kk-product-card {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 20px;
    background:
        radial-gradient(circle at 92% 8%, rgba(182, 255, 77, 0.12), transparent 9rem),
        rgba(255, 255, 255, 0.055);
    color: #f7fbff;
    text-decoration: none;
}

.kk-server-card {
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.kk-server-card:hover,
.kk-server-card:focus-visible {
    border-color: rgba(67, 230, 255, 0.5);
    transform: translateY(-1px);
}

.kk-server-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.kk-server-card-head strong {
    font-size: 1.6rem;
    line-height: 1;
}

.kk-server-card code {
    display: block;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid rgba(67, 230, 255, 0.18);
    border-radius: 14px;
    background: rgba(67, 230, 255, 0.07);
    color: #43e6ff;
    font: inherit;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.kk-server-open,
.kk-product-tag {
    display: inline-flex;
    width: fit-content;
    min-height: 1.8rem;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(67, 230, 255, 0.1);
    color: #43e6ff;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-server-note {
    margin: 0;
    color: #9eabc4;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.45;
}

.kk-server-subtabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.8rem;
    padding: 0.8rem;
    border: 1px solid rgba(67, 230, 255, 0.2);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(3, 12, 22, 0.72), rgba(4, 22, 27, 0.58)),
        radial-gradient(circle at 50% 0%, rgba(67, 230, 255, 0.12), transparent 18rem);
}

.kk-server-subtabs a {
    display: inline-flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    min-height: 3.4rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(67, 230, 255, 0.42);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(12, 20, 35, 0.96), rgba(7, 13, 25, 0.94)),
        radial-gradient(circle at 15% 0%, rgba(67, 230, 255, 0.12), transparent 8rem);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
    color: #43e6ff;
    font-size: 0.9rem;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
}

.kk-server-subtabs a:hover,
.kk-server-subtabs a:focus-visible,
.kk-server-subtabs a.is-active {
    border-color: rgba(182, 255, 77, 0.48);
    background:
        linear-gradient(145deg, rgba(16, 29, 28, 0.98), rgba(8, 17, 24, 0.96)),
        radial-gradient(circle at 16% 0%, rgba(182, 255, 77, 0.16), transparent 8rem);
    color: #b6ff4d;
}

.kk-server-access-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.kk-server-access-grid article,
.kk-server-map-placeholder {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
}

.kk-server-access-grid small {
    color: #9eabc4;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-server-access-grid code {
    display: block;
    padding: 0.75rem;
    border: 1px solid rgba(67, 230, 255, 0.2);
    border-radius: 14px;
    background: rgba(67, 230, 255, 0.07);
    color: #43e6ff;
    font: inherit;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.kk-server-access-grid strong,
.kk-server-map-placeholder strong {
    color: #f7fbff;
    font-size: 1.35rem;
    line-height: 1;
}

.kk-server-access-grid span,
.kk-server-map-placeholder p {
    margin: 0;
    color: #9eabc4;
    font-weight: 850;
}

.kk-server-feature {
    scroll-margin-top: 7rem;
}

.kk-server-map-placeholder {
    min-height: 12rem;
    place-content: center;
    background:
        linear-gradient(90deg, rgba(67, 230, 255, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        radial-gradient(circle at 50% 45%, rgba(182, 255, 77, 0.16), transparent 9rem),
        rgba(255, 255, 255, 0.045);
    background-size: 34px 34px, 34px 34px, auto, auto;
    text-align: center;
}

.kk-map-preview {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 12rem;
    border: 1px solid rgba(67, 230, 255, 0.24);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    color: #f7fbff;
    text-decoration: none;
}

.kk-map-preview img {
    display: block;
    width: 100%;
    max-height: 24rem;
    object-fit: cover;
    image-rendering: pixelated;
}

.kk-map-preview span {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    min-height: 2.45rem;
    align-items: center;
    padding: 0 0.85rem;
    border: 1px solid rgba(182, 255, 77, 0.5);
    border-radius: 14px;
    background: rgba(6, 16, 20, 0.88);
    color: #b6ff4d;
    font-size: 0.82rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-map-page {
    display: grid;
    gap: 1rem;
}

.kk-map-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.kk-map-section-head h2 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1;
}

.kk-map-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: flex-end;
}

.kk-map-head-actions a {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.85rem;
    border: 1px solid rgba(67, 230, 255, 0.28);
    border-radius: 14px;
    background: rgba(67, 230, 255, 0.09);
    color: #f7fbff;
    font-size: 0.78rem;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
}

.kk-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.kk-map-toolbar button,
.kk-map-toolbar output {
    display: inline-flex;
    min-width: 3rem;
    min-height: 2.45rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.8rem;
    border: 1px solid rgba(67, 230, 255, 0.32);
    border-radius: 14px;
    background: rgba(67, 230, 255, 0.1);
    color: #f7fbff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 950;
}

.kk-map-toolbar button {
    cursor: pointer;
}

.kk-map-toolbar button:hover,
.kk-map-toolbar button:focus-visible {
    border-color: rgba(182, 255, 77, 0.56);
    background: rgba(182, 255, 77, 0.14);
    color: #b6ff4d;
}

.kk-map-refresh-form {
    margin: 0;
}

.kk-map-refresh-form button {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.85rem;
    border: 1px solid rgba(182, 255, 77, 0.52);
    border-radius: 14px;
    background: linear-gradient(135deg, #b6ff4d, #43e6ff);
    color: #061014;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-map-frame {
    position: relative;
    margin: 0;
    overflow: auto;
    height: min(72vh, 760px);
    min-height: 28rem;
    border: 1px solid rgba(67, 230, 255, 0.24);
    border-radius: 20px;
    background: rgba(6, 16, 20, 0.72);
    cursor: grab;
    overscroll-behavior: contain;
    touch-action: none;
}

.kk-map-frame.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.kk-map-canvas {
    position: relative;
    min-width: 1px;
    min-height: 1px;
    transform-origin: 0 0;
}

.kk-map-markers {
    position: absolute;
    inset: 0 auto auto 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 2;
}

.kk-map-player {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    min-height: 1.65rem;
    padding: 0.18rem 0.5rem 0.18rem 0.28rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background: rgba(6, 16, 20, 0.86);
    color: #f7fbff;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 950;
    line-height: 1;
    pointer-events: auto;
    transform: translate(-0.6rem, -50%);
    white-space: nowrap;
}

.kk-map-player span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: #ff5656;
    box-shadow: 0 0 0 2px rgba(255, 86, 86, 0.2), 0 0 14px rgba(255, 86, 86, 0.56);
}

.kk-map-player.is-online {
    border-color: rgba(182, 255, 77, 0.64);
    color: #b6ff4d;
}

.kk-map-player.is-online span {
    background: #b6ff4d;
    box-shadow: 0 0 0 2px rgba(182, 255, 77, 0.2), 0 0 16px rgba(182, 255, 77, 0.72);
}

.kk-map-frame img {
    display: block;
    max-width: none;
    transform-origin: 0 0;
    image-rendering: pixelated;
    user-select: none;
    -webkit-user-drag: none;
}

.kk-map-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.kk-map-meta span {
    display: inline-flex;
    min-height: 2.1rem;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(67, 230, 255, 0.24);
    border-radius: 999px;
    background: rgba(67, 230, 255, 0.08);
    color: #dce7ff;
    font-size: 0.76rem;
    font-weight: 900;
}

@media (max-width: 760px) {
    .kk-map-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .kk-map-head-actions,
    .kk-map-head-actions a,
    .kk-map-refresh-form,
    .kk-map-refresh-form button {
        width: 100%;
    }

    .kk-map-frame {
        height: 68vh;
        min-height: 22rem;
    }
}

.kk-achievements-layout {
    display: grid;
    gap: 1rem;
}

.kk-my-achievements,
.kk-leaderboard-card {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(10, 18, 31, 0.98), rgba(7, 13, 25, 0.96)),
        radial-gradient(circle at 88% 10%, rgba(182, 255, 77, 0.16), transparent 10rem);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.26);
}

.kk-my-achievements h3,
.kk-leaderboard-card h3 {
    margin: 0;
    color: #f7fbff;
    font-size: 1.25rem;
    line-height: 1.05;
}

.kk-my-achievements-head {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.kk-my-achievements-head h3 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.kk-my-achievements-head .kk-product-tag {
    flex: 0 0 auto;
}

.kk-my-achievements p {
    margin: 0.35rem 0 0;
    color: #9eabc4;
    font-weight: 850;
}

.kk-achievement-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.kk-achievement-stats span {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid rgba(67, 230, 255, 0.18);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(13, 31, 45, 0.96), rgba(8, 18, 30, 0.94));
}

.kk-achievement-stats strong {
    color: #b6ff4d;
    font-size: 1.25rem;
    line-height: 1;
}

.kk-achievement-stats small {
    color: #9eabc4;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.kk-leaderboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.kk-featured-leaderboards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: 0.9rem;
}

.kk-leaderboard-card--featured {
    border-color: rgba(182, 255, 77, 0.28);
    background:
        radial-gradient(circle at 50% 0%, rgba(182, 255, 77, 0.16), transparent 9rem),
        linear-gradient(145deg, rgba(10, 22, 28, 0.98), rgba(7, 13, 25, 0.96));
}

.kk-leaderboard-card--featured h3 {
    color: #dfffd2;
}

.kk-leaderboard-card ol {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-leaderboard-card li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.62rem 0.7rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
}

.kk-leaderboard-card li span {
    min-width: 0;
    color: #f7fbff;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.kk-leaderboard-card li strong {
    color: #43e6ff;
    font-size: 1rem;
}

.kk-product-grid {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.kk-product-card h2 {
    margin: 0.55rem 0 0.35rem;
    color: #f7fbff;
    font-size: 1.55rem;
    line-height: 1;
}

.kk-product-card p {
    margin: 0;
    color: #9eabc4;
    font-weight: 800;
    line-height: 1.45;
}

.kk-product-price {
    color: #b6ff4d;
    font-size: 2rem;
    line-height: 1;
}

.kk-product-card form {
    margin: 0;
}

.kk-product-card .kk-action {
    width: 100%;
    min-height: 3.1rem;
}

.kk-product-card.is-owned {
    border-color: rgba(182, 255, 77, 0.28);
    background:
        radial-gradient(circle at 92% 8%, rgba(182, 255, 77, 0.16), transparent 9rem),
        rgba(255, 255, 255, 0.055);
}

.kk-product-card.is-owned .kk-product-tag {
    background: rgba(182, 255, 77, 0.12);
    color: #b6ff4d;
}

.kk-product-card button[disabled] {
    cursor: default;
    opacity: 0.74;
}

.voice-room,
.voice-room * {
    box-sizing: border-box;
}

.voice-room {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 1rem;
    min-height: calc(100vh - 9rem);
}

.voice-channels,
.voice-stage,
.voice-frame {
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(14, 20, 34, 0.94), rgba(9, 13, 25, 0.91));
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.24);
}

.voice-channels {
    position: sticky;
    top: 6.4rem;
    align-self: start;
    display: grid;
    gap: 1rem;
    padding: 0.9rem;
}

.voice-back {
    color: #43e6ff;
    font-size: 0.82rem;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
}

.voice-server {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
}

.voice-server img {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 18px;
    box-shadow: 0 0 0 1px rgba(67, 230, 255, 0.42), 0 0 22px rgba(67, 230, 255, 0.18);
}

.voice-server strong {
    display: block;
    color: #f7fbff;
    font-size: 1rem;
    line-height: 1.1;
}

.voice-server span {
    color: #9eabc4;
    font-size: 0.78rem;
    font-weight: 850;
}

.voice-channels nav {
    display: grid;
    gap: 0.55rem;
}

.voice-channels nav a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 3rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
    color: #dce7ff;
    font-weight: 900;
    text-decoration: none;
}

.voice-channels nav a span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: #748199;
}

.voice-channels nav a.is-active {
    border-color: rgba(67, 230, 255, 0.44);
    background: rgba(67, 230, 255, 0.1);
    color: #43e6ff;
}

.voice-channels nav a.is-active span {
    background: #b6ff4d;
    box-shadow: 0 0 18px rgba(182, 255, 77, 0.5);
}

.voice-stage {
    display: grid;
    grid-template-rows: auto minmax(28rem, 1fr);
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
}

.voice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.voice-head h1 {
    margin: 0.55rem 0 0.25rem;
    color: #f7fbff;
    font-size: clamp(2rem, 5vw, 3.7rem);
    line-height: 0.95;
}

.voice-head p {
    margin: 0;
    color: #9eabc4;
    font-weight: 800;
}

.voice-frame {
    overflow: hidden;
    min-height: 32rem;
}

.voice-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 32rem;
    border: 0;
    background: #080d17;
}

.voice-room--native .voice-stage {
    grid-template-rows: auto auto minmax(10rem, 1fr);
}

.voice-state {
    min-height: 2.4rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(182, 255, 77, 0.28);
    border-radius: 999px;
    background: rgba(182, 255, 77, 0.1);
    color: #b6ff4d;
    font-size: 0.8rem;
    font-weight: 950;
    text-transform: uppercase;
}

.voice-native-panel,
.voice-users {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 24px;
    background:
        radial-gradient(circle at 82% 18%, rgba(182, 255, 77, 0.16), transparent 12rem),
        radial-gradient(circle at 12% 80%, rgba(67, 230, 255, 0.16), transparent 14rem),
        rgba(255, 255, 255, 0.045);
}

.voice-native-panel {
    display: grid;
    gap: 1rem;
    place-items: center;
    min-height: 20rem;
    padding: 1.25rem;
    text-align: center;
}

.voice-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.voice-orbit span {
    position: absolute;
    width: 4.8rem;
    aspect-ratio: 1;
    border-radius: 24px;
    opacity: 0.88;
    transform: rotate(-10deg);
}

.voice-orbit span:nth-child(1) {
    top: 12%;
    right: 18%;
    background: linear-gradient(135deg, #43e6ff, #5477ff);
}

.voice-orbit span:nth-child(2) {
    bottom: 16%;
    left: 17%;
    width: 3.6rem;
    background: linear-gradient(135deg, #ff4fa3, #9c7cff);
}

.voice-orbit span:nth-child(3) {
    bottom: 20%;
    right: 14%;
    width: 3.8rem;
    background: linear-gradient(135deg, #b6ff4d, #2cffb4);
}

.voice-control {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
}

.voice-settings {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    width: min(52rem, 100%);
    padding: 0.8rem;
    border: 1px solid rgba(67, 230, 255, 0.18);
    border-radius: 20px;
    background: rgba(4, 9, 18, 0.52);
}

.voice-toggle,
.voice-field {
    display: grid;
    gap: 0.45rem;
    align-content: center;
    min-height: 3.2rem;
    padding: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
    color: #dce7ff;
    font-size: 0.78rem;
    font-weight: 900;
    text-align: left;
}

.voice-toggle {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.voice-toggle input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #43e6ff;
}

.voice-field input[type="range"] {
    width: 100%;
    accent-color: #b6ff4d;
}

.voice-main-btn,
.voice-round-btn {
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #071018;
    font: inherit;
    font-weight: 950;
    text-transform: uppercase;
    cursor: pointer;
}

.voice-main-btn {
    min-height: 4rem;
    min-width: 14rem;
    padding: 1rem 1.4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #b6ff4d, #43e6ff);
    box-shadow: 0 18px 44px rgba(67, 230, 255, 0.18);
}

.voice-round-btn {
    min-height: 4rem;
    padding: 1rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
}

.voice-round-btn--leave {
    background: rgba(255, 122, 122, 0.92);
}

.voice-main-btn:disabled,
.voice-round-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.voice-hint {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #9eabc4;
    font-weight: 850;
}

.voice-users {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
}

.voice-user-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.voice-user-list article {
    display: grid;
    grid-template-columns: 0.8rem minmax(0, 1fr) auto;
    gap: 0.55rem 0.7rem;
    align-items: center;
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
}

.voice-user-list article > span {
    grid-row: 1 / span 2;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: #b6ff4d;
    box-shadow: 0 0 18px rgba(182, 255, 77, 0.5);
}

.voice-user-list strong {
    min-width: 0;
    color: #f7fbff;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.voice-user-list small {
    color: #9eabc4;
    font-weight: 850;
}

.voice-talk-icon {
    display: none;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid rgba(182, 255, 77, 0.45);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 35%, #b6ff4d 0 18%, transparent 20%),
        linear-gradient(180deg, rgba(182, 255, 77, 0.22), rgba(67, 230, 255, 0.14));
    box-shadow: 0 0 20px rgba(182, 255, 77, 0.35);
}

.voice-user-list article.is-speaking {
    border-color: rgba(182, 255, 77, 0.42);
    background: rgba(182, 255, 77, 0.08);
}

.voice-user-list article.is-speaking .voice-talk-icon {
    display: inline-grid;
    grid-column: 2;
    animation: voicePulse 0.72s ease-in-out infinite alternate;
}

.voice-user-list article.is-muted > span {
    background: #ff7a7a;
    box-shadow: 0 0 18px rgba(255, 122, 122, 0.36);
}

@keyframes voicePulse {
    from {
        transform: scale(0.92);
        opacity: 0.72;
    }
    to {
        transform: scale(1.08);
        opacity: 1;
    }
}

.voice-audio {
    display: none;
}

@media (max-width: 900px) {
    .kk-achievement-stats,
    .kk-featured-leaderboards,
    .kk-leaderboard-grid,
    .kk-server-access-grid {
        grid-template-columns: 1fr;
    }

    .voice-room {
        grid-template-columns: 1fr;
    }

    .voice-channels {
        position: static;
    }

    .voice-head {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .voice-settings {
        grid-template-columns: 1fr;
    }

    .kk-my-achievements-head {
        align-items: flex-start;
        flex-direction: column-reverse;
    }
}

@media (max-width: 980px) {
    .kk-layout {
        grid-template-columns: 1fr;
    }

    .kk-side {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .page-kormkota .site-header--guest {
        padding: 0.6rem 0.55rem;
    }

    .page-kormkota .header-inner--guest {
        min-height: 3.85rem;
        border-radius: 18px;
    }

    .page-kormkota .guest-logo-image {
        width: 2.85rem;
        height: 2.85rem;
        border-radius: 16px;
    }

    .page-kormkota .guest-logo-text strong {
        font-size: 1.15rem;
    }

    .page-kormkota .guest-logo-text small {
        display: none;
    }

    .page-kormkota .guest-top-nav a {
        min-height: 2.6rem;
        padding: 0.55rem 0.85rem;
        font-size: 0.8rem;
    }

    .page-kormkota .guest-account-actions {
        gap: 0.45rem;
    }

    .guest-balance {
        min-height: 2.6rem;
        padding: 0.5rem 0.65rem;
        font-size: 0.72rem;
    }

    .page-kormkota .guest-account-link {
        min-height: 2.6rem;
        padding: 0.55rem 0.65rem;
        font-size: 0.74rem;
    }

    .public-chat-head,
    .public-chat-bubble header {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-kormkota .main-content--guest {
        padding: 0.75rem 0.55rem 1.25rem;
    }

    .kk-dashboard {
        grid-template-columns: 11.4rem minmax(0, 1fr);
        gap: 0.65rem;
    }

    .kk-rail {
        top: 5rem;
        min-height: calc(100vh - 6rem);
        padding: 0.55rem;
        border-radius: 20px;
    }

    .kk-rail-nav a {
        min-height: 2.8rem;
        padding: 0.55rem 0.65rem;
        border-radius: 13px;
    }

    .kk-rail-nav a strong {
        display: block;
        font-size: 0.78rem;
    }

    .kk-topbar {
        min-height: 4.3rem;
        padding: 0.85rem;
        border-radius: 18px;
    }

.kk-topbar h1 {
        font-size: 1.35rem;
    }

    .kk-status {
        min-width: 6.7rem;
    }

    .kk-status span {
        font-size: 1.45rem;
    }

    .kk-status small {
        font-size: 0.66rem;
    }

    .kk-panel,
    .kk-section {
        padding: 0.85rem;
        border-radius: 18px;
    }

    .kk-panel--intro {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .kk-mini-grid {
        display: none;
    }

    .kk-game-grid,
    .kk-chat-grid,
    .kk-download-grid,
    .kk-side {
        grid-template-columns: 1fr;
    }

    .kk-news-list article {
        grid-template-columns: 1fr;
    }

    .kk-mini-chat-list article,
    .kk-mini-chat-form {
        grid-template-columns: 1fr;
    }

    .kk-mini-chat-list time {
        white-space: normal;
    }
}

@media (max-width: 440px) {
    .kk-dashboard {
        grid-template-columns: 9.6rem minmax(0, 1fr);
    }

    .kk-rail-nav a {
        min-height: 2.55rem;
        padding: 0.45rem 0.55rem;
        gap: 0.45rem;
        border-radius: 12px;
    }

    .kk-rail-nav a strong {
        font-size: 0.7rem;
    }

    .kk-menu-mark {
        width: 0.45rem;
        height: 0.45rem;
    }

    .kk-panel--intro h2,
    .kk-minecraft h2,
    .kk-servers h2 {
        font-size: 1.35rem;
    }

    .page-kormkota .guest-account-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .guest-balance {
        min-height: 2.35rem;
        padding: 0.45rem 0.6rem;
    }

    .page-kormkota .header-inner--guest {
        flex-wrap: wrap;
    }

    .public-chat-message {
        grid-template-columns: 2.4rem minmax(0, 1fr);
    }

    .public-chat-avatar img {
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 12px;
    }
}

/* KORMKOTA auth screens */
.page-auth-kormkota .main-content--guest {
    display: grid;
    place-items: center;
    width: min(100%, 1180px);
    min-height: calc(100vh - 9.5rem);
    padding: clamp(1rem, 4vw, 2rem);
}

.auth-shell,
.auth-shell * {
    box-sizing: border-box;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(20rem, 0.95fr) minmax(18rem, 0.7fr);
    gap: 1rem;
    width: min(100%, 58rem);
    align-items: stretch;
}

.auth-panel,
.auth-side {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(14, 20, 34, 0.96), rgba(9, 13, 25, 0.93));
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
}

.auth-panel {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 3vw, 1.45rem);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.auth-brand img {
    width: 4rem;
    height: 4rem;
    border: 1px solid rgba(67, 230, 255, 0.45);
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 0 24px rgba(67, 230, 255, 0.18);
}

.auth-brand span,
.auth-side > span {
    display: inline-flex;
    width: fit-content;
    min-height: 1.7rem;
    align-items: center;
    padding: 0.24rem 0.62rem;
    border: 1px solid rgba(67, 230, 255, 0.35);
    border-radius: 999px;
    background: rgba(67, 230, 255, 0.09);
    color: #43e6ff;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.auth-brand h1 {
    margin: 0.35rem 0 0;
    color: #f7fbff;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.auth-title {
    display: block;
}

.auth-title h1 {
    margin: 0;
    color: #f7fbff;
    font-size: clamp(2.25rem, 5vw, 3.6rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.auth-form {
    display: grid;
    gap: 0.85rem;
}

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

.auth-form-full {
    grid-column: 1 / -1;
}

.auth-form label {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    color: #9eabc4;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    width: 100%;
    min-height: 3.4rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    color: #f7fbff;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    padding: 0.85rem 1rem;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.auth-form input::placeholder {
    color: rgba(158, 171, 196, 0.62);
}

.auth-form input:focus {
    border-color: rgba(67, 230, 255, 0.62);
    background: rgba(67, 230, 255, 0.07);
    box-shadow: 0 0 0 4px rgba(67, 230, 255, 0.11);
}

.auth-check {
    display: flex !important;
    align-items: center;
    grid-template-columns: none;
    gap: 0.65rem;
    color: #dce7ff !important;
    font-size: 0.9rem !important;
    text-transform: none !important;
}

.auth-check input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #43e6ff;
}

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.35rem;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #b6ff4d, #43e6ff);
    color: #071018;
    font: inherit;
    font-size: 1rem;
    font-weight: 950;
    cursor: pointer;
    text-transform: uppercase;
    transition: filter 160ms ease, transform 160ms ease;
}

.auth-submit:hover,
.auth-submit:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.auth-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem 0.9rem;
    color: #9eabc4;
    font-weight: 850;
}

.auth-links a {
    color: #43e6ff;
    font-weight: 950;
    text-decoration: none;
}

.auth-side {
    display: grid;
    align-content: end;
    gap: 0.75rem;
    overflow: hidden;
    padding: clamp(1rem, 3vw, 1.35rem);
    position: relative;
}

.auth-side::before,
.auth-side::after {
    content: "";
    position: absolute;
    border-radius: 30px;
    transform: rotate(12deg);
    opacity: 0.92;
}

.auth-side::before {
    right: 1.2rem;
    top: 1.4rem;
    width: 7rem;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #43e6ff, #5477ff);
}

.auth-side::after {
    right: 7.3rem;
    top: 7.2rem;
    width: 4.8rem;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #ff4fa3, #9c7cff);
}

.auth-side h2 {
    position: relative;
    z-index: 1;
    margin: 6.8rem 0 0;
    color: #f7fbff;
    font-size: clamp(1.55rem, 4vw, 2.35rem);
    line-height: 1;
}

.auth-side p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #9eabc4;
    font-weight: 850;
    line-height: 1.5;
}

.page-auth-kormkota .alert {
    border-radius: 16px;
}

@media (max-width: 860px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-side {
        display: none;
    }
}

@media (max-width: 560px) {
    .page-auth-kormkota .main-content--guest {
        min-height: auto;
        padding: 0.85rem;
    }

    .auth-panel {
        border-radius: 20px;
    }

    .auth-brand img {
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 16px;
    }

    .auth-brand h1 {
        font-size: 2rem;
    }

    .auth-title h1 {
        font-size: 2.1rem;
    }

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


/* KORMKOTA landing polish 2026-06-23 */
.page-kormkota {
    overflow-x: hidden;
}

.page-kormkota .site-header--guest {
    padding: 0.8rem clamp(1rem, 2.4vw, 1.8rem);
}

.page-kormkota .header-inner--guest,
.page-kormkota .main-content--guest {
    width: min(100%, 1480px);
}

.page-kormkota .main-content--guest {
    padding: 1.15rem clamp(1rem, 2.6vw, 1.8rem) 2.5rem;
}

.kk-dashboard {
    grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
    gap: clamp(1rem, 1.8vw, 1.4rem);
    width: 100%;
}

.kk-rail {
    top: 6.75rem;
    min-height: auto;
    padding: 1rem;
    border-radius: 24px;
}

.kk-rail-nav {
    gap: 0.65rem;
}

.kk-rail-nav a {
    min-height: 3.2rem;
    padding: 0.78rem 0.92rem;
    border-radius: 16px;
}

.kk-workspace {
    gap: clamp(1rem, 1.8vw, 1.35rem);
}

.kk-topbar {
    min-height: 7rem;
    padding: clamp(1.25rem, 2vw, 1.65rem);
    border-radius: 26px;
}

.kk-topbar h1 {
    font-size: clamp(2.15rem, 4vw, 3.1rem);
    line-height: 1.03;
}

.kk-topbar-lead {
    max-width: 58rem;
    font-size: clamp(0.98rem, 1.35vw, 1.1rem);
}

.kk-status {
    min-width: 8.2rem;
    padding-left: 1rem;
}

.kk-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: clamp(1rem, 1.8vw, 1.4rem);
}

.kk-feed,
.kk-side {
    gap: clamp(1rem, 1.8vw, 1.35rem);
}

.kk-panel,
.kk-section {
    padding: clamp(1.15rem, 1.8vw, 1.45rem);
    border-radius: 24px;
}

.kk-section-head h2,
.kk-monitor h2 {
    font-size: clamp(1.75rem, 3vw, 2.45rem);
    line-height: 1.05;
}

.kk-section-head a {
    white-space: nowrap;
}

.kk-mini-chat-list article {
    min-height: 4.7rem;
    padding: 0.9rem 1rem;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
}

.kk-mini-chat-list img,
.kk-mini-chat-avatar {
    width: 3rem;
    height: 3rem;
}

.kk-mini-chat-login {
    min-height: 3.8rem;
    padding-top: 0.15rem;
}

.kk-mini-chat-login a {
    min-width: 7.2rem;
}

.kk-news-list article {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    padding: 1rem;
}

.kk-news-list h3 {
    display: block;
    width: auto;
    min-height: 0;
    margin: 0 0 0.35rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #f7fbff;
    font-size: 1.05rem;
    line-height: 1.2;
    text-transform: none;
}

.kk-monitor-side,
.kk-side {
    top: 6.75rem;
}

.kk-monitor {
    overflow: hidden;
}

.kk-monitor-list {
    gap: 0.85rem;
}

.kk-monitor-card {
    padding: 1rem;
    border-radius: 20px;
}

.kk-monitor-card-head {
    align-items: flex-start;
}

.kk-monitor-card strong {
    font-size: 1.35rem;
}

.kk-monitor-state {
    flex: 0 0 auto;
    max-width: 9.2rem;
    min-height: 1.65rem;
    padding: 0.22rem 0.55rem;
    font-size: 0.72rem;
    line-height: 1;
    white-space: nowrap;
}

.kk-monitor-card code {
    width: 100%;
    min-height: 3rem;
    padding: 0.72rem 0.85rem;
    font-size: clamp(0.82rem, 1.1vw, 0.95rem);
    line-height: 1.25;
}

.kk-monitor-players span {
    font-size: 1.15rem;
}

@media (max-width: 1180px) {
    .kk-dashboard {
        grid-template-columns: 1fr;
    }

    .kk-rail {
        position: static;
        min-height: 0;
    }

    .kk-rail-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .kk-rail-section {
        grid-column: 1 / -1;
    }

    .kk-layout {
        grid-template-columns: 1fr;
    }

    .kk-side {
        position: static;
    }

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

@media (max-width: 760px) {
    .page-kormkota .header-inner--guest {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0;
        padding: 0.8rem;
    }

    .page-kormkota .guest-account-actions {
        width: 100%;
        justify-content: stretch;
    }

    .page-kormkota .guest-account-link,
    .page-kormkota .guest-account-form {
        flex: 1 1 0;
    }

    .page-kormkota .guest-account-form .guest-account-link {
        width: 100%;
    }

    .kk-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .kk-status {
        justify-items: start;
        padding-left: 0;
    }

    .kk-rail-nav,
    .kk-monitor-list {
        grid-template-columns: 1fr;
    }

    .kk-mini-chat-list article,
    .kk-mini-chat-form {
        grid-template-columns: 1fr;
    }

    .kk-mini-chat-login {
        align-items: stretch;
        flex-direction: column;
    }

    .kk-mini-chat-login a {
        width: 100%;
    }
}


/* KORMKOTA landing compact tweak 2026-06-23 */
.kk-dashboard {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: clamp(0.85rem, 1.4vw, 1.15rem);
}

.kk-rail {
    padding: 0.8rem;
    border-radius: 22px;
}

.kk-rail-nav {
    gap: 0.52rem;
}

.kk-rail-nav a {
    min-height: 2.72rem;
    padding: 0.55rem 0.72rem;
    border-radius: 14px;
}

.kk-rail-nav a strong {
    font-size: 0.82rem;
}

.kk-rail-section {
    margin-top: 0.5rem;
    padding: 0 0.7rem;
    font-size: 0.66rem;
}

.kk-menu-mark {
    width: 0.48rem;
    height: 0.48rem;
}

.kk-layout {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    gap: clamp(0.85rem, 1.45vw, 1.15rem);
}

.kk-monitor h2 {
    font-size: clamp(1.7rem, 2.55vw, 2.15rem);
}

.kk-monitor-card {
    gap: 0.55rem;
    padding: 0.82rem;
    border-radius: 18px;
}

.kk-monitor-card strong {
    font-size: 1.15rem;
}

.kk-monitor-state {
    max-width: 7.6rem;
    min-height: 1.45rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.62rem;
}

.kk-monitor-card code {
    min-height: 2.55rem;
    padding: 0.58rem 0.65rem;
    font-size: 0.78rem;
}

.kk-monitor-players span {
    font-size: 0.98rem;
}

.kk-monitor-players small {
    font-size: 0.64rem;
}

.kk-monitor-bar {
    height: 0.42rem;
}

.kk-mini-chat-login {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.1rem;
    padding-top: 0;
}

.kk-mini-chat-login span {
    min-width: 0;
    line-height: 1.25;
}

.kk-mini-chat-login a {
    min-width: 5.8rem;
    min-height: 2.85rem;
    padding: 0 1.05rem;
    border-radius: 14px;
    line-height: 1;
}

@media (max-width: 1180px) {
    .kk-dashboard {
        grid-template-columns: 1fr;
    }

    .kk-layout {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 760px) {
    .kk-mini-chat-login {
        grid-template-columns: 1fr;
    }

    .kk-mini-chat-login a {
        width: 100%;
    }
}


/* KORMKOTA mini chat login button align 2026-06-23 */
.kk-mini-chat-login a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.85rem;
    min-height: 2.85rem;
    padding: 0 1.05rem;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}


/* KORMKOTA compact monitor 2026-06-23 */
.kk-layout {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
}

.kk-monitor {
    gap: 0.65rem;
    padding: 0.95rem;
    border-radius: 22px;
}

.kk-monitor h2 {
    font-size: clamp(1.45rem, 2.2vw, 1.8rem);
}

.kk-monitor-list {
    gap: 0.62rem;
}

.kk-monitor-card {
    gap: 0.48rem;
    padding: 0.68rem;
    border-radius: 16px;
}

.kk-monitor-card strong {
    font-size: 1rem;
}

.kk-monitor-state {
    max-width: 6.9rem;
    min-height: 1.35rem;
    padding: 0.18rem 0.38rem;
    font-size: 0.58rem;
}

.kk-monitor-state::before {
    width: 0.42rem;
    height: 0.42rem;
}

.kk-monitor-card code {
    min-height: 2.35rem;
    padding: 0.5rem 0.58rem;
    border-radius: 12px;
    font-size: 0.72rem;
}

.kk-monitor-players span {
    font-size: 0.9rem;
}

.kk-monitor-players small {
    font-size: 0.58rem;
}

.kk-monitor-bar {
    height: 0.35rem;
}


/* KORMKOTA card alignment 2026-06-23 */
.kk-dashboard {
    align-items: start;
}

.kk-rail,
.kk-layout,
.kk-feed,
.kk-side,
.kk-monitor-side {
    margin-top: 0;
}

.kk-workspace {
    align-content: start;
}

.kk-topbar {
    display: none;
}

.kk-layout {
    align-items: start;
}

.kk-feed,
.kk-side {
    align-content: start;
}

.kk-feed {
    gap: 1rem;
}

.kk-section,
.kk-monitor {
    margin: 0;
}

.kk-mini-chat,
.kk-section:not(.kk-mini-chat) {
    min-height: 0;
}

.kk-mini-chat {
    padding: 1.2rem;
}

.kk-section-head {
    min-height: 2.8rem;
}

.kk-section-head h2 {
    font-size: clamp(2rem, 3vw, 2.6rem);
}

.kk-mini-chat-list article,
.kk-news-list article {
    border-radius: 18px;
}

.kk-mini-chat-login {
    margin-top: 0.25rem;
    padding: 0;
}

.kk-monitor {
    padding: 1.05rem;
}

.kk-monitor h2 {
    min-height: 2.8rem;
    display: flex;
    align-items: center;
}

.kk-monitor-card-head {
    min-height: 1.55rem;
}

.kk-news-list article {
    align-items: center;
    min-height: 5.2rem;
}

.kk-news-list article > span {
    margin-top: 0;
}

/* KORMKOTA news headline accent */
.page-kormkota .kk-news-list article.kk-news-list-item h3 {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-height: 2.15rem;
    align-items: center;
    margin: 0 0 0.55rem;
    padding: 0.36rem 0.85rem;
    border: 1px solid rgba(67, 230, 255, 0.42);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(67, 230, 255, 0.18), rgba(157, 255, 84, 0.12));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 22px rgba(67, 230, 255, 0.1);
    color: #f7fbff;
    font-size: 1.02rem;
    font-weight: 950;
    line-height: 1.18;
}

.page-kormkota .kk-news-list article.kk-news-list-item h3::before {
    content: "";
    width: 0.48rem;
    height: 0.48rem;
    margin-right: 0.55rem;
    border-radius: 50%;
    background: #43e6ff;
    box-shadow: 0 0 14px rgba(67, 230, 255, 0.75);
    flex: 0 0 auto;
}

/* KORMKOTA Minecraft monitor block icon + copy IP */
.page-kormkota .kk-monitor-card-top {
    grid-template-columns: 3rem minmax(0, 1fr);
}

.page-kormkota .kk-monitor-block-icon {
    position: relative;
    display: block;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(111, 205, 125, 0.42);
    border-radius: 9px;
    background:
        radial-gradient(circle at 18% 16%, rgba(217, 255, 168, 0.52) 0 0.08rem, transparent 0.09rem),
        radial-gradient(circle at 52% 10%, rgba(156, 219, 106, 0.5) 0 0.09rem, transparent 0.1rem),
        radial-gradient(circle at 78% 24%, rgba(53, 128, 61, 0.45) 0 0.11rem, transparent 0.12rem),
        linear-gradient(180deg, #5f9d47 0 21%, #3f7d38 21% 30%, #7a5132 30% 100%);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -12px 22px rgba(38, 20, 12, 0.34);
    overflow: hidden;
}

.page-kormkota .kk-monitor-block-icon::before,
.page-kormkota .kk-monitor-block-icon::after,
.page-kormkota .kk-monitor-block-icon i {
    content: "";
    position: absolute;
    display: block;
}

.page-kormkota .kk-monitor-block-icon::before {
    inset: 0 0 68%;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 44%),
        radial-gradient(circle at 20% 54%, #8fce63 0 0.1rem, transparent 0.11rem),
        radial-gradient(circle at 38% 28%, #2f6f34 0 0.08rem, transparent 0.09rem),
        radial-gradient(circle at 70% 62%, #b7e57c 0 0.09rem, transparent 0.1rem),
        repeating-linear-gradient(90deg, rgba(25, 88, 31, 0.22) 0 0.08rem, transparent 0.08rem 0.34rem);
    border-bottom: 1px solid rgba(42, 94, 34, 0.72);
    box-shadow: inset 0 -0.18rem 0 rgba(30, 87, 35, 0.34);
}

.page-kormkota .kk-monitor-block-icon::after {
    left: 0;
    right: 0;
    top: 30%;
    bottom: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(223, 187, 123, 0.5) 0 0.07rem, transparent 0.08rem),
        radial-gradient(circle at 70% 28%, rgba(44, 24, 16, 0.34) 0 0.1rem, transparent 0.11rem),
        radial-gradient(circle at 38% 54%, rgba(201, 151, 85, 0.36) 0 0.09rem, transparent 0.1rem),
        radial-gradient(circle at 82% 75%, rgba(36, 21, 14, 0.35) 0 0.08rem, transparent 0.09rem),
        linear-gradient(90deg, rgba(255, 230, 168, 0.09), transparent 38%, rgba(0, 0, 0, 0.18));
}

.page-kormkota .kk-monitor-block-icon i {
    left: 0.3rem;
    right: 0.3rem;
    top: 37%;
    height: 54%;
    background:
        linear-gradient(180deg, rgba(48, 91, 36, 0.38) 0 0.18rem, transparent 0.18rem 100%),
        repeating-linear-gradient(180deg, transparent 0 0.42rem, rgba(42, 25, 16, 0.2) 0.42rem 0.48rem),
        repeating-linear-gradient(90deg, transparent 0 0.52rem, rgba(36, 21, 13, 0.18) 0.52rem 0.58rem);
    opacity: 0.92;
    mix-blend-mode: multiply;
}

.page-kormkota .kk-monitor-card.is-offline .kk-monitor-block-icon {
    border-color: rgba(255, 116, 116, 0.42);
    filter: saturate(0.78) brightness(0.9);
}

.page-kormkota .kk-monitor-card.is-offline .kk-monitor-block-icon::before {
    box-shadow: inset 0 -0.18rem 0 rgba(90, 45, 35, 0.42), inset 0 0 0 999px rgba(120, 40, 40, 0.18);
}

.page-kormkota .kk-monitor-address {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    align-items: stretch;
}

.page-kormkota .kk-monitor-address code {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.page-kormkota .kk-copy-ip {
    min-height: 2.75rem;
    padding: 0 0.62rem;
    border: 1px solid rgba(67, 230, 255, 0.32);
    border-radius: 14px;
    background: linear-gradient(135deg, #8fff5c, #43e6ff);
    color: #061014;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
    transition: transform 160ms ease, filter 160ms ease;
    width: 100%;
}

.page-kormkota .kk-copy-ip:hover,
.page-kormkota .kk-copy-ip:focus-visible {
    filter: brightness(1.06);
    transform: translateY(-1px);
}


/* KORMKOTA compact topbar restore 2026-06-23 */
.kk-topbar {
    display: flex;
    min-height: 4.8rem;
    margin: 0 0 1rem;
    padding: 0.95rem 1.15rem;
    border-radius: 22px;
}

.kk-topbar h1 {
    font-size: clamp(1.75rem, 3vw, 2.35rem);
}

.kk-topbar-lead {
    max-width: 46rem;
    margin-top: 0.38rem;
    font-size: 0.92rem;
    line-height: 1.3;
}

.kk-status {
    min-width: 7.2rem;
}

.kk-status span {
    font-size: 1.8rem;
}

.kk-status small {
    font-size: 0.66rem;
}

/* KORMKOTA chat attachments 2026-06-24 */
.public-chat-image {
    display: block;
    width: fit-content;
    max-width: min(100%, 520px);
    margin-top: 0.7rem;
    overflow: hidden;
    border: 1px solid rgba(67, 230, 255, 0.24);
    border-radius: 16px;
    background: rgba(67, 230, 255, 0.06);
}

/* KORMKOTA online popover 2026-07-01 */
.kk-online-popover {
    position: relative;
    z-index: 50;
    min-width: 8.4rem;
    justify-items: center;
    text-align: center;
}

.kk-online-popover summary {
    display: grid;
    min-height: 3.8rem;
    width: 100%;
    place-items: center;
    justify-items: center;
    text-align: center;
    padding: 0.18rem 0.25rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
    border-radius: 14px;
    border: 1px solid rgba(67, 230, 255, 0.45);
    background: linear-gradient(135deg, rgba(67, 230, 255, 0.16), rgba(182, 255, 77, 0.08));
    box-shadow: 0 0 0 1px rgba(67, 230, 255, 0.08), 0 12px 28px rgba(67, 230, 255, 0.12);
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.kk-online-popover summary span,
.kk-online-popover summary small {
    justify-self: center;
    text-align: center;
}

.kk-online-popover summary::-webkit-details-marker {
    display: none;
}

.kk-online-popover summary:hover,
.kk-online-popover[open] summary {
    border-color: rgba(182, 255, 77, 0.7);
    background: linear-gradient(135deg, rgba(67, 230, 255, 0.22), rgba(182, 255, 77, 0.13));
    box-shadow: 0 0 0 1px rgba(182, 255, 77, 0.14), 0 14px 34px rgba(67, 230, 255, 0.18);
}

.kk-online-popover .kk-online-menu {
    position: absolute;
    z-index: 500;
    top: calc(100% + 0.65rem);
    right: 0;
    width: min(19rem, calc(100vw - 2rem));
    padding: 0.85rem;
    border: 1px solid rgba(67, 230, 255, 0.28);
    border-radius: 18px;
    background: rgba(9, 13, 25, 0.98);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.42);
}

.kk-online-menu header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
}

.kk-online-menu header strong {
    color: #f7fbff;
    font-size: 0.86rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-online-menu header a {
    color: #43e6ff;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kk-online-menu p {
    margin: 0;
    color: #9eabc4;
    font-size: 0.86rem;
    font-weight: 800;
}

.kk-online-menu ul {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-online-menu a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.kk-online-menu img {
    flex: 0 0 auto;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid rgba(67, 230, 255, 0.3);
    border-radius: 50%;
    object-fit: cover;
}

.kk-online-menu li a > span {
    display: grid;
    min-width: 0;
}

.kk-online-menu li strong,
.kk-online-menu li small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kk-online-menu li strong {
    color: #f7fbff;
    font-size: 0.88rem;
    font-weight: 950;
}

.kk-online-menu li small {
    color: #9eabc4;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: none;
}

@media (max-width: 760px) {
    .kk-online-popover {
        width: 100%;
        min-width: 0;
    }

    .kk-online-popover summary {
        place-items: center;
    }

    .kk-online-popover .kk-online-menu {
        right: auto;
        left: 0;
    }
}

.public-chat-image img {
    display: block;
    max-width: 100%;
    max-height: 360px;
    object-fit: contain;
}

.public-chat-delete {
    margin: 0.65rem 0 0;
}

.public-chat-delete button,
.chat-file-button,
.kk-mini-file {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.45rem;
    padding: 0 0.85rem;
    border: 1px solid rgba(67, 230, 255, 0.26);
    border-radius: 14px;
    background: rgba(67, 230, 255, 0.1);
    color: #43e6ff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
    cursor: pointer;
}

/* KORMKOTA unified dark legacy pages 2026-07-01 */
.page-kormkota .page-hero,
.page-kormkota .messages-start,
.page-kormkota .messages-empty,
.page-kormkota .conversation-item,
.page-kormkota .friend-card,
.page-kormkota .notification-list li,
.page-kormkota .search-card,
.page-kormkota .group-card,
.page-kormkota .page-section-card,
.page-kormkota .card {
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(14, 20, 34, 0.96), rgba(9, 13, 25, 0.93)) !important;
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.24) !important;
    color: #f7fbff !important;
}

.page-kormkota .page-hero {
    min-height: 5.2rem;
    padding: 1rem 1.1rem !important;
}

.page-kormkota .page-title,
.page-kormkota .page-hero h1,
.page-kormkota .messages-empty h2,
.page-kormkota .conversation-item strong,
.page-kormkota .conv-title-row strong,
.page-kormkota .page-section-card h2,
.page-kormkota .card h2,
.page-kormkota .card h3 {
    color: #f7fbff !important;
    text-shadow: none !important;
}

.page-kormkota .page-hero-kicker,
.page-kormkota .messages-subtitle,
.page-kormkota .messages-empty p,
.page-kormkota .hint,
.page-kormkota .conv-last,
.page-kormkota .conv-title-row time,
.page-kormkota .online-page-subtitle,
.page-kormkota .card p,
.page-kormkota .muted {
    color: #aebbd2 !important;
}

.page-kormkota .page-hero-icon,
.page-kormkota .empty-icon {
    border: 1px solid rgba(67, 230, 255, 0.35) !important;
    background: rgba(67, 230, 255, 0.1) !important;
    color: #43e6ff !important;
    box-shadow: none !important;
}

.page-kormkota .messages-start-form,
.page-kormkota .conversation-link,
.page-kormkota .online-user-card {
    background: transparent !important;
    color: #f7fbff !important;
}

.page-kormkota input[type="text"],
.page-kormkota input[type="email"],
.page-kormkota input[type="password"],
.page-kormkota input[type="number"],
.page-kormkota textarea,
.page-kormkota select {
    border: 1px solid rgba(67, 230, 255, 0.38) !important;
    border-radius: 14px !important;
    background: rgba(5, 10, 19, 0.72) !important;
    color: #f7fbff !important;
    box-shadow: none !important;
}

.page-kormkota input::placeholder,
.page-kormkota textarea::placeholder {
    color: rgba(174, 187, 210, 0.72) !important;
}

.page-kormkota .btn,
.page-kormkota button.btn,
.page-kormkota .guest-account-link,
.page-kormkota .conv-unread,
.page-kormkota .page-hero-count {
    border: 1px solid rgba(67, 230, 255, 0.28) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #9dff57, #43e6ff) !important;
    color: #061014 !important;
    box-shadow: none !important;
    font-weight: 950 !important;
}

.page-kormkota .btn-secondary {
    background: rgba(67, 230, 255, 0.12) !important;
    color: #43e6ff !important;
}

.page-kormkota a {
    color: inherit;
}

.public-chat-delete button {
    border-color: rgba(255, 122, 122, 0.32);
    background: rgba(255, 122, 122, 0.1);
    color: #ff8a8a;
}

.chat-file-button input,
.kk-mini-file input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.public-chat-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: flex-end;
}

.kk-mini-chat-form {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.kk-mini-file {
    min-height: 3rem;
    border-radius: 16px;
}

.kk-mini-chat-image {
    display: inline-flex;
    width: fit-content;
    margin-top: 0.25rem;
    color: #43e6ff;
    font-size: 0.76rem;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .kk-mini-chat-form {
        grid-template-columns: 1fr;
    }

    .public-chat-form-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* KORMKOTA compact photo button 2026-06-24 */
.kk-mini-chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3rem auto;
    align-items: center;
    gap: 0.65rem;
}

.kk-mini-file,
.chat-file-button {
    position: relative;
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    min-height: 3rem;
    padding: 0;
    border-radius: 16px;
}

.kk-mini-file svg,
.chat-file-button svg {
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
}

.kk-mini-file input[type="file"],
.chat-file-button input[type="file"] {
    display: none !important;
}

.kk-mini-chat-form button[type="submit"] {
    min-height: 3rem;
    padding-inline: 1.1rem;
}

.public-chat-form-actions {
    justify-content: flex-end;
}

@media (max-width: 720px) {
    .kk-mini-chat-form {
        grid-template-columns: minmax(0, 1fr) 3rem;
    }

    .kk-mini-chat-form button[type="submit"] {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* KORMKOTA photo icon align 2026-06-24 */
.kk-mini-chat-form {
    align-items: stretch;
}

.kk-mini-chat-form input[name="content"],
.kk-mini-file,
.kk-mini-chat-form button[type="submit"] {
    height: 3.25rem;
    min-height: 3.25rem;
}

.kk-mini-file {
    display: inline-flex;
    align-self: stretch;
    translate: 0 0;
}

.kk-mini-file svg,
.chat-file-button svg {
    width: 1.35rem;
    height: 1.35rem;
}

.chat-file-button {
    height: 2.75rem;
    min-height: 2.75rem;
}

/* KORMKOTA final news title accent */
.page-kormkota .kk-news-list article.kk-news-list-item h3 {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-height: 2.15rem;
    align-items: center;
    margin: 0 0 0.55rem;
    padding: 0.36rem 0.85rem;
    border: 1px solid rgba(67, 230, 255, 0.46);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(67, 230, 255, 0.18), rgba(157, 255, 84, 0.12));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 22px rgba(67, 230, 255, 0.1);
    color: #f7fbff;
    font-size: 1.02rem;
    font-weight: 950;
    line-height: 1.18;
}

.page-kormkota .kk-news-list article.kk-news-list-item h3::before {
    content: "";
    width: 0.48rem;
    height: 0.48rem;
    margin-right: 0.55rem;
    border-radius: 50%;
    background: #43e6ff;
    box-shadow: 0 0 14px rgba(67, 230, 255, 0.75);
    flex: 0 0 auto;
}


/* KORMKOTA monitor labels refinement */
.page-kormkota .kk-monitor-title {
    justify-items: start;
    text-align: left;
    gap: 0.18rem;
}

.page-kormkota .kk-monitor-title h2 {
    text-align: left;
}

.page-kormkota .kk-monitor-card {
    border-color: rgba(111, 205, 125, 0.18);
    background:
        radial-gradient(circle at 0% 0%, rgba(156, 255, 89, 0.1), transparent 6.5rem),
        radial-gradient(circle at 100% 0%, rgba(67, 230, 255, 0.08), transparent 7rem),
        rgba(255, 255, 255, 0.055);
}

.page-kormkota .kk-monitor-card-head {
    align-items: flex-start;
}

.page-kormkota .kk-monitor-state {
    min-height: 1.55rem;
    padding: 0.22rem 0.52rem;
    border: 1px solid currentColor;
    font-size: 0.66rem;
    letter-spacing: 0;
    text-transform: none;
}

.page-kormkota .kk-monitor-state::before {
    width: 0.42rem;
    height: 0.42rem;
    box-shadow: 0 0 10px currentColor;
}

.page-kormkota .kk-monitor-address {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
}

.page-kormkota .kk-monitor-address-label {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.58rem;
    border: 1px solid rgba(156, 255, 89, 0.25);
    border-radius: 10px;
    background: rgba(156, 255, 89, 0.08);
    color: #a7f36d;
    font-size: 0.68rem;
    font-weight: 950;
}

.page-kormkota .kk-monitor-address code {
    min-height: 2.25rem;
    padding: 0.56rem 0.68rem;
    border-radius: 10px;
    text-align: left;
}

.page-kormkota .kk-copy-ip {
    width: auto;
    min-height: 2.25rem;
    padding: 0 0.72rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #7ee766, #56d7f1);
    font-size: 0.68rem;
}

@media (max-width: 520px) {
    .page-kormkota .kk-monitor-address {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .page-kormkota .kk-copy-ip {
        grid-column: 1 / -1;
        width: 100%;
    }
}


/* KORMKOTA compact Minecraft monitor address + refined grass block */
.page-kormkota .kk-monitor-card-top {
    grid-template-columns: 3.15rem minmax(0, 1fr);
}

.page-kormkota .kk-monitor-block-icon {
    width: 3.15rem;
    height: 3.15rem;
    border-color: rgba(130, 214, 118, 0.48);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 34%),
        radial-gradient(circle at 18% 12%, rgba(234, 255, 188, 0.7) 0 0.07rem, transparent 0.08rem),
        radial-gradient(circle at 44% 18%, rgba(45, 105, 42, 0.48) 0 0.1rem, transparent 0.11rem),
        radial-gradient(circle at 76% 20%, rgba(180, 229, 109, 0.58) 0 0.1rem, transparent 0.11rem),
        linear-gradient(180deg, #78b95b 0 18%, #4f8d43 18% 31%, #7f5636 31% 100%);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset -0.5rem -0.75rem 1rem rgba(39, 21, 12, 0.38);
}

.page-kormkota .kk-monitor-block-icon::before {
    inset: 0 0 67%;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.26), transparent 40%),
        radial-gradient(circle at 16% 58%, #c0ec82 0 0.08rem, transparent 0.09rem),
        radial-gradient(circle at 36% 32%, #376f34 0 0.07rem, transparent 0.08rem),
        radial-gradient(circle at 58% 66%, #93d268 0 0.08rem, transparent 0.09rem),
        radial-gradient(circle at 82% 38%, #244f28 0 0.06rem, transparent 0.07rem),
        repeating-linear-gradient(90deg, rgba(28, 93, 34, 0.22) 0 0.07rem, transparent 0.07rem 0.26rem);
    border-bottom-color: rgba(39, 91, 35, 0.82);
}

.page-kormkota .kk-monitor-block-icon::after {
    top: 31%;
    background:
        radial-gradient(circle at 16% 18%, rgba(239, 196, 129, 0.52) 0 0.06rem, transparent 0.07rem),
        radial-gradient(circle at 45% 34%, rgba(57, 32, 20, 0.36) 0 0.09rem, transparent 0.1rem),
        radial-gradient(circle at 72% 58%, rgba(213, 157, 88, 0.38) 0 0.08rem, transparent 0.09rem),
        radial-gradient(circle at 25% 78%, rgba(41, 24, 15, 0.34) 0 0.08rem, transparent 0.09rem),
        linear-gradient(90deg, rgba(255, 222, 152, 0.14), transparent 42%, rgba(0, 0, 0, 0.22));
}

.page-kormkota .kk-monitor-address {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.38rem;
    align-items: center;
    min-width: 0;
}

.page-kormkota .kk-monitor-address-label {
    display: none;
}

.page-kormkota .kk-monitor-address code {
    min-width: 0;
    min-height: 2.05rem;
    padding: 0.48rem 0.58rem;
    border-radius: 9px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.82rem;
}

.page-kormkota .kk-copy-ip {
    width: auto;
    min-width: 0;
    min-height: 2.05rem;
    padding: 0 0.52rem;
    border-radius: 9px;
    font-size: 0.61rem;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 520px) {
    .page-kormkota .kk-monitor-address {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .page-kormkota .kk-copy-ip {
        grid-column: auto;
        width: auto;
    }
}


/* KORMKOTA real Minecraft grass block icon */
.page-kormkota .kk-monitor-block-icon {
    display: grid;
    place-items: center;
    width: 3.35rem;
    height: 3.35rem;
    border: 1px solid rgba(128, 219, 112, 0.38);
    border-radius: 12px;
    background: radial-gradient(circle at 50% 18%, rgba(156, 255, 89, 0.16), transparent 58%), rgba(3, 10, 14, 0.58);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: visible;
}

.page-kormkota .kk-monitor-block-icon::before,
.page-kormkota .kk-monitor-block-icon::after,
.page-kormkota .kk-monitor-block-icon i {
    content: none;
    display: none;
}

.page-kormkota .kk-monitor-block-icon img {
    display: block;
    width: 3.05rem;
    height: 3.05rem;
    object-fit: contain;
    filter: drop-shadow(0 0.45rem 0.55rem rgba(0, 0, 0, 0.42));
}

.page-kormkota .kk-monitor-card.is-offline .kk-monitor-block-icon {
    border-color: rgba(255, 116, 116, 0.35);
    filter: saturate(0.82) brightness(0.88);
}


/* KORMKOTA remove frame around Minecraft monitor icon */
.page-kormkota .kk-monitor-block-icon {
    width: 3.35rem;
    height: 3.35rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.page-kormkota .kk-monitor-block-icon img {
    width: 3.35rem;
    height: 3.35rem;
    filter: drop-shadow(0 0.5rem 0.55rem rgba(0, 0, 0, 0.45));
}

.page-kormkota .kk-monitor-card.is-offline .kk-monitor-block-icon {
    border: 0;
    filter: saturate(0.78) brightness(0.88);
}


/* KORMKOTA monitor copy button beside player count */
.page-kormkota .kk-monitor-address {
    display: block;
}

.page-kormkota .kk-monitor-address code {
    width: 100%;
    min-height: 2.08rem;
    padding: 0.5rem 0.62rem;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    font-size: 0.78rem;
    letter-spacing: 0;
}

.page-kormkota .kk-monitor-players {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
}

.page-kormkota .kk-monitor-players span {
    justify-content: flex-start;
    min-width: 0;
    gap: 0.28rem;
    white-space: nowrap;
}

.page-kormkota .kk-monitor-players span small {
    color: #77849c;
    font-size: 0.7rem;
    font-weight: 950;
    text-transform: uppercase;
}

.page-kormkota .kk-monitor-players > small {
    display: none;
}

.page-kormkota .kk-monitor-players .kk-copy-ip {
    min-height: 1.95rem;
    padding: 0 0.5rem;
    font-size: 0.58rem;
}


/* KORMKOTA Diablo and Counter-Strike monitor icons */
.page-kormkota .kk-monitor-game-icon {
    display: grid;
    place-items: center;
    width: 3.35rem;
    height: 3.35rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    color: #f7fbff;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: 0;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.page-kormkota .kk-monitor-game-icon--d2 {
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 208, 95, 0.22), transparent 42%),
        linear-gradient(145deg, #3a1215, #13080a 72%);
    border-color: rgba(255, 92, 72, 0.34);
    color: #ffcf70;
}

.page-kormkota .kk-monitor-game-icon--cs {
    background:
        radial-gradient(circle at 30% 20%, rgba(108, 224, 255, 0.18), transparent 42%),
        linear-gradient(145deg, #213244, #0d151f 72%);
    border-color: rgba(88, 214, 255, 0.32);
    color: #8ee7ff;
}

/* KORMKOTA messenger app 2026-07-05 */
.page-kormkota .messenger-app {
    display: grid;
    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
    min-height: clamp(34rem, calc(100svh - 12rem), 48rem);
    overflow: hidden;
    border: 1px solid rgba(67, 230, 255, 0.24);
    border-radius: 24px;
    background:
        linear-gradient(rgba(67, 230, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(67, 230, 255, 0.03) 1px, transparent 1px),
        linear-gradient(145deg, rgba(14, 20, 34, 0.98), rgba(5, 10, 19, 0.96));
    background-size: 32px 32px, 32px 32px, auto;
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.34);
    color: #f7fbff;
}

.page-kormkota .messenger-sidebar {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(6, 11, 21, 0.74);
}

.page-kormkota .messenger-sidebar-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-kormkota .messenger-sidebar-head p {
    margin: 0 0 0.12rem;
    color: #43e6ff;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.page-kormkota .messenger-sidebar-head h1 {
    margin: 0;
    color: #f7fbff;
    font-size: 1.55rem;
    line-height: 1;
}

.page-kormkota .messenger-app-icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    border: 1px solid rgba(67, 230, 255, 0.42);
    border-radius: 16px;
    background: rgba(67, 230, 255, 0.11);
    color: #43e6ff;
}

.page-kormkota .messenger-search-form {
    display: grid;
    gap: 0.5rem;
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(9, 13, 25, 0.82);
}

.page-kormkota .messenger-search-form label {
    color: #aebbd2;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.page-kormkota .messenger-search-form div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.65rem;
    gap: 0.5rem;
}

.page-kormkota .messenger-search-form input {
    min-width: 0;
    margin: 0;
}

.page-kormkota .messenger-icon-btn,
.page-kormkota .chat-send {
    display: inline-grid;
    place-items: center;
    min-width: 2.65rem;
    height: 2.65rem;
    border: 1px solid rgba(67, 230, 255, 0.45);
    border-radius: 14px;
    background: linear-gradient(135deg, #8cff6b, #43e6ff);
    color: #031018;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(67, 230, 255, 0.18);
}

.page-kormkota .messenger-dialogs {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: auto;
    list-style: none;
}

.page-kormkota .messenger-dialogs li {
    margin: 0;
}

.page-kormkota .messenger-dialog {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(14, 20, 34, 0.82);
    color: #f7fbff;
    text-decoration: none;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.page-kormkota .messenger-dialog:hover,
.page-kormkota .messenger-dialog.is-active {
    border-color: rgba(67, 230, 255, 0.5);
    background: rgba(67, 230, 255, 0.12);
}

.page-kormkota .messenger-dialog:hover {
    transform: translateY(-1px);
}

.page-kormkota .messenger-dialog-body,
.page-kormkota .messenger-peer span {
    min-width: 0;
}

.page-kormkota .messenger-dialog-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.page-kormkota .messenger-dialog-top strong,
.page-kormkota .messenger-dialog-last,
.page-kormkota .messenger-peer strong,
.page-kormkota .messenger-peer small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-kormkota .messenger-dialog-top time {
    flex: 0 0 auto;
    color: #8794ad;
    font-size: 0.7rem;
    font-weight: 800;
}

.page-kormkota .messenger-dialog-last {
    margin-top: 0.18rem;
    color: #aebbd2;
    font-size: 0.84rem;
}

.page-kormkota .messenger-unread {
    display: inline-grid;
    place-items: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: #b6ff4d;
    color: #07101b;
    font-size: 0.72rem;
    font-weight: 950;
}

.page-kormkota .messenger-list-empty,
.page-kormkota .messenger-welcome {
    display: grid;
    place-items: center;
    min-height: 14rem;
    padding: 1rem;
    text-align: center;
    color: #aebbd2;
}

.page-kormkota .messenger-list-empty {
    border: 1px dashed rgba(67, 230, 255, 0.26);
    border-radius: 18px;
    background: rgba(67, 230, 255, 0.06);
}

.page-kormkota .messenger-list-empty strong {
    color: #f7fbff;
}

.page-kormkota .messenger-welcome-card {
    display: grid;
    justify-items: center;
    gap: 0.65rem;
    max-width: 25rem;
}

.page-kormkota .messenger-welcome-card h2 {
    margin: 0;
    color: #f7fbff;
    font-size: 2rem;
}

.page-kormkota .messenger-welcome-card p {
    margin: 0;
    color: #aebbd2;
}

.page-kormkota .messenger {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.page-kormkota .messenger-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 4.75rem;
    padding: 0.8rem 1rem;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(7, 12, 22, 0.82);
}

.page-kormkota .messenger-back {
    display: inline-grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    flex: 0 0 auto;
    border: 1px solid rgba(67, 230, 255, 0.36);
    border-radius: 14px;
    background: rgba(67, 230, 255, 0.1);
    color: #43e6ff;
    text-decoration: none;
    transform: rotate(-90deg);
}

.page-kormkota .messenger-peer {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    color: #f7fbff;
    text-decoration: none;
}

.page-kormkota .messenger-peer small {
    color: #aebbd2;
    font-size: 0.78rem;
}

.page-kormkota .chat-empty {
    background: transparent;
    color: #f7fbff;
}

.page-kormkota .chat-empty span {
    color: #aebbd2;
}

.page-kormkota.page-chat .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 1rem;
    overflow: auto;
    background:
        linear-gradient(rgba(67, 230, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(67, 230, 255, 0.022) 1px, transparent 1px);
    background-size: 30px 30px;
}

.page-kormkota .chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 0.42rem;
    width: fit-content;
    max-width: min(78%, 39rem);
    margin: 0;
    padding: 0;
    background: transparent;
}

.page-kormkota .chat-msg.mine {
    margin-left: auto;
    background: transparent;
}

.page-kormkota .chat-bubble {
    min-width: 0;
    padding: 0.62rem 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px 18px 18px 6px;
    background: rgba(14, 20, 34, 0.94);
    color: #f7fbff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.page-kormkota .chat-msg.mine .chat-bubble {
    border-color: rgba(67, 230, 255, 0.34);
    border-radius: 18px 18px 6px 18px;
    background: linear-gradient(135deg, rgba(67, 230, 255, 0.24), rgba(182, 255, 77, 0.18));
}

.page-kormkota .chat-bubble strong {
    margin-bottom: 0.22rem;
    color: #43e6ff;
    font-size: 0.78rem;
}

.page-kormkota .chat-text {
    color: #f7fbff;
    line-height: 1.35;
}

.page-kormkota .chat-msg time {
    color: #aebbd2;
    font-size: 0.68rem;
    font-weight: 800;
    opacity: 0.72;
}

.page-kormkota .chat-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.85rem;
    gap: 0.65rem;
    align-items: end;
    padding: 0.8rem;
    padding-bottom: max(0.8rem, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(7, 12, 22, 0.9);
}

.page-kormkota .chat-compose textarea {
    width: 100%;
    min-height: 2.85rem;
    max-height: 8.5rem;
    margin: 0;
    resize: none;
    line-height: 1.35;
}

.page-kormkota .chat-send {
    width: 2.85rem;
    height: 2.85rem;
}

.page-kormkota .chat-send:disabled {
    cursor: wait;
    opacity: 0.62;
}

.page-kormkota .chat-error {
    margin: 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 105, 121, 0.42);
    border-radius: 0;
    background: rgba(255, 105, 121, 0.12);
    color: #ffb2bc;
}

@media (max-width: 900px) {
    .page-kormkota .messenger-app {
        grid-template-columns: 1fr;
        min-height: calc(100svh - 8.4rem);
    }

    .page-kormkota .messenger-app--active .messenger-sidebar,
    .page-kormkota .messenger-app--empty .messenger-welcome {
        display: none;
    }

    .page-kormkota .messenger-sidebar {
        border-right: 0;
    }
}

@media (max-width: 640px) {
    .page-kormkota .main-content--guest {
        width: 100%;
        padding: 0.7rem;
    }

    .page-kormkota.page-chat .main-content--guest {
        padding: 0;
    }

    .page-kormkota .messenger-app {
        min-height: calc(100svh - 5.7rem);
        border-radius: 18px;
    }

    .page-kormkota.page-chat .messenger-app {
        min-height: calc(100svh - 4.5rem);
        border-width: 1px 0 0;
        border-radius: 0;
    }

    .page-kormkota .messenger-sidebar {
        padding: 0.75rem;
    }

    .page-kormkota .messenger-sidebar-head h1 {
        font-size: 1.35rem;
    }

    .page-kormkota .messenger-dialog {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        padding: 0.65rem;
    }

    .page-kormkota .messenger-dialog .avatar-md {
        width: 44px;
        height: 44px;
    }

    .page-kormkota .messenger-header {
        position: sticky;
        top: 0;
        z-index: 5;
        min-height: 4.25rem;
        padding: 0.65rem 0.75rem;
    }

    .page-kormkota.page-chat .chat-messages {
        padding: 0.75rem;
    }

    .page-kormkota .chat-msg {
        max-width: 90%;
    }

    .page-kormkota .chat-compose {
        position: sticky;
        bottom: 0;
        z-index: 5;
        grid-template-columns: minmax(0, 1fr) 2.75rem;
        padding: 0.65rem;
        padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
    }
}
/* v20260710-social1: unified dark social controls */
.page-kormkota .guest-social-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem;
    border: 1px solid rgba(67, 230, 255, 0.18);
    border-radius: 16px;
    background: rgba(5, 12, 27, 0.74);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.page-kormkota .guest-social-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(67, 230, 255, 0.24);
    border-radius: 13px;
    color: #f7fbff;
    background: linear-gradient(135deg, rgba(16, 30, 55, 0.96), rgba(7, 15, 31, 0.96));
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.page-kormkota .guest-social-link:hover,
.page-kormkota .guest-social-link:focus-visible {
    border-color: rgba(67, 230, 255, 0.68);
    background: linear-gradient(135deg, rgba(20, 54, 76, 0.98), rgba(9, 22, 42, 0.98));
    transform: translateY(-1px);
}

.page-kormkota .guest-social-link .icon {
    width: 1.1rem;
    height: 1.1rem;
    color: #43e6ff;
}

.page-kormkota .guest-social-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.28rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(5, 12, 27, 0.9);
    border-radius: 999px;
    background: linear-gradient(135deg, #8cff5f, #43e6ff);
    color: #041019;
    font-size: 0.68rem;
    font-weight: 1000;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(7, 15, 31, 0.98);
}

.page-kormkota .guest-social-badge--msg {
    background: linear-gradient(135deg, #43e6ff, #74f0d2);
}

.page-kormkota .guest-social-badge--friends,
.sidebar-badge--friends {
    background: linear-gradient(135deg, #ff4fb4, #43e6ff);
    color: #06101c;
}

@media (max-width: 980px) {
    .page-kormkota .guest-social-actions {
        order: 3;
    }
}

@media (max-width: 760px) {
    .page-kormkota .guest-social-actions {
        width: 100%;
        justify-content: space-between;
    }

    .page-kormkota .guest-social-link {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: 2.55rem;
    }
}

.page-kormkota .page-section-card h2 {
    color: #f7fbff !important;
    border: 1px solid rgba(67, 230, 255, 0.28) !important;
    background: linear-gradient(135deg, rgba(12, 32, 48, 0.92), rgba(8, 18, 36, 0.92)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

.page-kormkota .notification-list li.unread {
    background: rgba(67, 230, 255, 0.12) !important;
}

/* v20260710-realtime-alerts1: profile sound controls */
.page-kormkota .kk-sound-settings {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 1rem;
    border: 1px solid rgba(67, 230, 255, 0.24);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(9, 20, 39, 0.92), rgba(5, 12, 27, 0.94));
}

.page-kormkota .kk-sound-settings legend {
    padding: 0 0.45rem;
    color: #f7fbff;
    font-weight: 1000;
    text-transform: uppercase;
}

.page-kormkota .kk-sound-settings label {
    display: grid;
    gap: 0.35rem;
    color: #c7d1e5;
    font-weight: 900;
}

.page-kormkota .kk-sound-toggle {
    display: flex !important;
    align-items: center;
    grid-template-columns: none !important;
    gap: 0.65rem !important;
}

.page-kormkota .kk-sound-toggle input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: #43e6ff;
}

.page-kormkota .kk-sound-settings select {
    width: 100%;
    min-height: 2.8rem;
    border: 1px solid rgba(67, 230, 255, 0.42);
    border-radius: 14px;
    background: #07101f;
    color: #f7fbff;
    font: inherit;
    font-weight: 900;
    padding: 0.65rem 0.8rem;
}

.page-kormkota .kk-action--small {
    width: fit-content;
    min-height: 2.3rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.8rem;
}

/* v20260710-site-cleanup1 */
.page-kormkota .voice-room--single {
    grid-template-columns: minmax(0, 1fr);
}

.page-kormkota .voice-room--single .voice-stage {
    width: min(100%, 980px);
    margin: 0 auto;
}

.page-kormkota .voice-room--single .voice-back {
    width: fit-content;
    margin: 0 0 0.75rem;
}

.page-kormkota .composer-file {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(67, 230, 255, 0.35);
    border-radius: 12px;
    color: #f7fbff;
    background: rgba(67, 230, 255, 0.1);
    cursor: pointer;
    font-weight: 900;
}

.page-kormkota .composer-file input {
    display: none;
}

.page-kormkota .post-image {
    display: block;
    margin-top: 0.8rem;
    overflow: hidden;
    border: 1px solid rgba(67, 230, 255, 0.22);
    border-radius: 18px;
    background: rgba(5, 12, 27, 0.72);
}

.page-kormkota .post-image img {
    display: block;
    width: 100%;
    max-height: 540px;
    object-fit: contain;
}

/* v20260710-feed-mobile1: dark feed polish and phone layout fixes */
.page-kormkota .feed-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1rem;
}

.page-kormkota .feed-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.65rem;
    padding: 0.65rem 1.05rem;
    border: 1px solid rgba(67, 230, 255, 0.26);
    border-radius: 14px;
    color: #c7d1e5;
    background: linear-gradient(135deg, rgba(8, 18, 35, 0.95), rgba(5, 12, 27, 0.98));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
    font-weight: 1000;
    text-decoration: none;
}

.page-kormkota .feed-tab.active,
.page-kormkota .feed-tab:hover,
.page-kormkota .feed-tab:focus-visible {
    color: #f7fbff;
    border-color: rgba(67, 230, 255, 0.68);
    background: linear-gradient(135deg, rgba(12, 44, 60, 0.96), rgba(7, 18, 36, 0.98));
    box-shadow: 0 0 0 1px rgba(67, 230, 255, 0.08), 0 14px 34px rgba(0, 0, 0, 0.22);
}

.page-kormkota .composer.card,
.page-kormkota .empty-state.card,
.page-kormkota .post-card {
    border: 1px solid rgba(67, 230, 255, 0.16) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(8, 18, 35, 0.94), rgba(4, 10, 22, 0.98)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 18px 48px rgba(0, 0, 0, 0.2) !important;
}

.page-kormkota .composer.card {
    display: grid;
    gap: 0.95rem;
    padding: 1.1rem !important;
}

.page-kormkota .composer textarea {
    min-height: 7rem;
    width: 100%;
    border: 1px solid rgba(67, 230, 255, 0.38);
    border-radius: 16px;
    background: rgba(3, 9, 21, 0.92);
    color: #f7fbff;
    resize: vertical;
}

.page-kormkota .composer textarea::placeholder {
    color: rgba(199, 209, 229, 0.62);
}

.page-kormkota .composer-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.75rem;
    align-items: center;
}

.page-kormkota .composer-file {
    position: relative;
    overflow: hidden;
    min-height: 2.85rem;
    padding: 0.65rem 1rem;
    border-radius: 14px;
    border-color: rgba(67, 230, 255, 0.38);
    background: linear-gradient(135deg, rgba(8, 34, 49, 0.92), rgba(5, 15, 31, 0.98));
    color: #f7fbff;
}

.page-kormkota .composer-file input,
.page-kormkota .composer-file input[type="file"] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.page-kormkota .composer-file span {
    position: relative;
    z-index: 1;
}

.page-kormkota .empty-state.card {
    min-height: 13rem;
    padding: 2rem 1rem !important;
    text-align: center;
}

.page-kormkota .empty-state .empty-icon {
    border: 1px solid rgba(67, 230, 255, 0.28);
    border-radius: 18px;
    background: rgba(67, 230, 255, 0.08);
    color: #43e6ff;
}

.page-kormkota .post-card {
    padding: 1rem !important;
}

.page-kormkota .post-card:hover {
    transform: none;
    border-color: rgba(67, 230, 255, 0.32) !important;
}

.page-kormkota .post-header {
    align-items: center;
}

.page-kormkota .post-actions {
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

@media (max-width: 900px) {
    .page-kormkota .kk-layout,
    .page-kormkota .kk-server-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .page-kormkota .kk-feed,
    .page-kormkota .kk-chat-panel,
    .page-kormkota .kk-mini-chat {
        width: 100%;
        max-width: none;
    }

    .page-kormkota .kk-side,
    .page-kormkota .kk-monitor-side {
        position: static !important;
        top: auto !important;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .page-kormkota .main-content--guest {
        padding: 0.7rem 0.55rem 1.5rem;
    }

    .page-kormkota .kk-dashboard {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.85rem;
    }

    .page-kormkota .kk-rail {
        position: static !important;
        width: 100%;
        overflow-x: auto;
    }

    .page-kormkota .kk-rail-nav {
        display: flex;
        gap: 0.55rem;
        overflow-x: auto;
        padding-bottom: 0.2rem;
    }

    .page-kormkota .kk-rail-nav a {
        min-width: max-content;
    }

    .page-kormkota .kk-topbar {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.85rem;
        padding: 1rem;
    }

    .page-kormkota .kk-topbar h1,
    .page-kormkota .kk-section h2,
    .page-kormkota .kk-mini-chat h2 {
        font-size: clamp(1.75rem, 10vw, 2.4rem);
        line-height: 1.02;
    }

    .page-kormkota .kk-section,
    .page-kormkota .kk-mini-chat,
    .page-kormkota .kk-monitor-side {
        padding: 1rem;
        border-radius: 18px;
    }

    .page-kormkota .composer-bar {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-kormkota .composer-count,
    .page-kormkota .composer-bar .btn-primary,
    .page-kormkota .composer-file {
        width: 100%;
        justify-content: center;
    }

    .page-kormkota .kk-monitor-list,
    .page-kormkota .kk-server-main {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* KORMKOTA page backing only 2026-07-12 */
body.page-kormkota {
    background:
        linear-gradient(90deg, rgba(67, 230, 255, 0.16) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 16% 22%, rgba(67, 230, 255, 0.34), transparent 30rem),
        radial-gradient(circle at 86% 20%, rgba(255, 79, 163, 0.3), transparent 32rem),
        linear-gradient(135deg, #0b2530 0%, #162942 48%, #2a1834 100%) !important;
    background-size: 88px 88px, 88px 88px, auto, auto, auto !important;
}

body.page-kormkota::before {
    opacity: 0.65;
    mask-image: none;
}

body.page-kormkota .kk-dashboard {
    background:
        linear-gradient(90deg, rgba(67, 230, 255, 0.16) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 14% 20%, rgba(67, 230, 255, 0.18), transparent 22rem),
        radial-gradient(circle at 88% 18%, rgba(255, 79, 163, 0.14), transparent 24rem) !important;
    background-size: 88px 88px, 88px 88px, auto, auto, auto !important;
    border-radius: 0;
}

body.page-kormkota .kk-workspace,
body.page-kormkota .kk-layout,
body.page-kormkota .kk-feed,
body.page-kormkota .kk-side,
body.page-kormkota .kk-monitor-side {
    background: transparent !important;
    box-shadow: none !important;
}

body.page-kormkota .kk-rail,
body.page-kormkota .kk-topbar,
body.page-kormkota .kk-panel,
body.page-kormkota .kk-section,
body.page-kormkota .kk-profile-hero,
body.page-kormkota .kk-profile-stats,
body.page-kormkota .kk-profile-composer,
body.page-kormkota .kk-profile-wall,
body.page-kormkota .kk-profile-side-card,
body.page-kormkota .kk-settings-card,
body.page-kormkota .page-hero,
body.page-kormkota .page-section-card,
body.page-kormkota .card,
body.page-kormkota .post-card,
body.page-kormkota .composer.card,
body.page-kormkota .empty-state.card,
body.page-kormkota .messages-start,
body.page-kormkota .messages-empty,
body.page-kormkota .conversation-item,
body.page-kormkota .friend-card,
body.page-kormkota .notification-list li,
body.page-kormkota .search-card,
body.page-kormkota .group-card,
body.page-kormkota .kk-news-card,
body.page-kormkota .kk-server-card,
body.page-kormkota .kk-product-card,
body.page-kormkota .kk-my-achievements,
body.page-kormkota .kk-leaderboard-card,
body.page-kormkota .kk-monitor-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(150deg, rgba(18, 27, 43, 0.98) 0%, rgba(9, 16, 29, 0.985) 48%, rgba(6, 12, 22, 0.99) 100%),
        linear-gradient(118deg, rgba(255, 255, 255, 0.045) 0 9%, transparent 9% 100%),
        radial-gradient(circle at 16% 0%, rgba(67, 230, 255, 0.14), transparent 17rem),
        radial-gradient(circle at 100% 8%, rgba(182, 255, 77, 0.075), transparent 13rem) !important;
    border-color: rgba(99, 229, 255, 0.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        inset 0 -1px 0 rgba(67, 230, 255, 0.035),
        0 22px 58px rgba(0, 0, 0, 0.30) !important;
}

body.page-kormkota .kk-section,
body.page-kormkota .kk-panel,
body.page-kormkota .kk-topbar {
    background:
        linear-gradient(150deg, rgba(15, 23, 38, 0.985) 0%, rgba(7, 13, 25, 0.99) 100%),
        radial-gradient(circle at 12% 0%, rgba(67, 230, 255, 0.10), transparent 18rem) !important;
}

body.page-kormkota .kk-monitor-card,
body.page-kormkota .kk-server-card,
body.page-kormkota .kk-product-card {
    background:
        linear-gradient(145deg, rgba(17, 31, 38, 0.99) 0%, rgba(8, 15, 27, 0.99) 56%, rgba(6, 11, 20, 0.99) 100%),
        linear-gradient(118deg, rgba(255, 255, 255, 0.05) 0 11%, transparent 11% 100%),
        radial-gradient(circle at 88% 6%, rgba(182, 255, 77, 0.12), transparent 10rem),
        radial-gradient(circle at 0% 100%, rgba(67, 230, 255, 0.10), transparent 12rem) !important;
}

body.page-kormkota .kk-topbar:has(.kk-online-popover),
body.page-kormkota .kk-topbar:has(.kk-online-popover[open]) {
    overflow: visible !important;
    z-index: 30;
}

body.page-kormkota .kk-topbar .kk-online-popover[open] {
    z-index: 600;
}

.page-kormkota .messenger-dialogs li {
    position: relative;
}

.page-kormkota .messenger-dialog-delete {
    position: absolute;
    right: 0.55rem;
    bottom: 0.45rem;
    z-index: 2;
    margin: 0;
}

.page-kormkota .messenger-dialog-delete button,
.page-kormkota .messenger-header-delete button {
    min-height: 1.85rem;
    padding: 0.22rem 0.55rem;
    border: 1px solid rgba(255, 122, 122, 0.42);
    border-radius: 999px;
    background: rgba(255, 122, 122, 0.12);
    color: #ff9b9b;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
    cursor: pointer;
}

/* v20260713-home-rail-top1: keep the left navigation aligned with the top of the home grid. */
body.page-kormkota .kk-dashboard--home {
    align-items: start !important;
}

body.page-kormkota .kk-dashboard--home > .kk-rail--global {
    align-self: start !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-top: 0 !important;
    position: sticky !important;
    top: 6.75rem !important;
    max-height: calc(100vh - 7.75rem) !important;
    overflow: auto !important;
    transform: none !important;
}

body.page-kormkota .kk-dashboard--home > .kk-workspace {
    align-self: start !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
}

/* v20260713-global-rail-align1: align the left navigation consistently on every KKO page. */
@media (min-width: 761px) {
    body.page-kormkota .kk-dashboard {
        align-items: start !important;
    }

    body.page-kormkota .kk-dashboard > .kk-rail--global {
        align-self: start !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin-top: 0 !important;
        position: sticky !important;
        top: 6.75rem !important;
        max-height: calc(100vh - 7.75rem) !important;
        overflow: auto !important;
        transform: none !important;
    }

    body.page-kormkota .kk-dashboard > .kk-workspace,
    body.page-kormkota .kk-dashboard > .kk-social-workspace {
        align-self: start !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }
}

/* v20260713-mobile-rail1: keep the main left navigation visible on phones. */
@media (max-width: 760px) {
    body.page-kormkota .kk-dashboard {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.page-kormkota .kk-dashboard > .kk-rail--global,
    body.page-kormkota .kk-dashboard--home > .kk-rail--global {
        display: block !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        position: static !important;
        top: auto !important;
        width: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0.75rem !important;
    }

    body.page-kormkota .kk-dashboard > .kk-workspace,
    body.page-kormkota .kk-dashboard--home > .kk-workspace {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    body.page-kormkota .kk-rail--global .kk-rail-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    body.page-kormkota .kk-rail--global .kk-rail-section {
        grid-column: 1 / -1 !important;
        margin: 0.4rem 0 0 !important;
        padding: 0 0.35rem !important;
    }

    body.page-kormkota .kk-rail--global .kk-rail-nav a {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 3rem !important;
        justify-content: flex-start !important;
        white-space: normal !important;
    }

    body.page-kormkota .kk-rail--global .kk-rail-nav a strong {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 380px) {
    body.page-kormkota .kk-rail--global .kk-rail-nav {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* v20260713-title-color1: brighter section headings without changing card layout. */
body.page-kormkota .kk-topbar h1,
body.page-kormkota .kk-section-head h2,
body.page-kormkota .kk-monitor-title h2,
body.page-kormkota .kk-map-section-head h2,
body.page-kormkota .kk-panel > h2,
body.page-kormkota .kk-section > h2,
body.page-kormkota .page-hero h1 {
    color: transparent !important;
    background: linear-gradient(90deg, #ffffff 0%, #43e6ff 42%, #b6ff4d 76%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 22px rgba(67, 230, 255, 0.18);
}

body.page-kormkota .kk-section-head h2,
body.page-kormkota .kk-monitor-title h2,
body.page-kormkota .kk-map-section-head h2,
body.page-kormkota .kk-panel > h2,
body.page-kormkota .kk-section > h2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.62rem;
    line-height: 1.04;
}

body.page-kormkota .kk-section-head h2::before,
body.page-kormkota .kk-monitor-title h2::before,
body.page-kormkota .kk-map-section-head h2::before,
body.page-kormkota .kk-panel > h2::before,
body.page-kormkota .kk-section > h2::before {
    content: "";
    flex: 0 0 auto;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 4px;
    background: linear-gradient(135deg, #43e6ff, #b6ff4d);
    box-shadow: 0 0 18px rgba(67, 230, 255, 0.55);
    transform: rotate(8deg);
}

body.page-kormkota .kk-mini-chat .kk-section-head h2 {
    background-image: linear-gradient(90deg, #ffffff 0%, #43e6ff 58%, #7efcff 100%);
}

body.page-kormkota .kk-monitor-title h2 {
    background-image: linear-gradient(90deg, #ffffff 0%, #b6ff4d 52%, #43e6ff 100%);
}

body.page-kormkota .kk-news .kk-section-head h2,
body.page-kormkota #news .kk-section-head h2 {
    background-image: linear-gradient(90deg, #ffffff 0%, #ff7ac8 52%, #43e6ff 100%);
}

body.page-kormkota .kk-topbar h1 {
    letter-spacing: 0;
    filter: drop-shadow(0 0 18px rgba(67, 230, 255, 0.12));
}

body.page-kormkota .kk-topbar-lead,
body.page-kormkota .kk-monitor-title p {
    color: #c8d5e8 !important;
}

/* v20260713-notifications-redesign1 */
body.page-kormkota .kk-rail-badge {
    margin-left: auto;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #b6ff4d, #43e6ff);
    color: #061018;
    font-size: 0.72rem;
    font-weight: 1000;
    box-shadow: 0 0 18px rgba(67, 230, 255, 0.28);
}

body.page-kormkota .kk-notifications-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
}

body.page-kormkota .kk-notification-summary {
    min-width: 5.4rem;
    min-height: 4.5rem;
    display: grid;
    place-items: center;
    gap: 0.1rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(182, 255, 77, 0.46);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(182, 255, 77, 0.20), rgba(67, 230, 255, 0.12));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 40px rgba(67, 230, 255, 0.16);
}

body.page-kormkota .kk-notification-summary span {
    color: #b6ff4d;
    font-size: 1.85rem;
    font-weight: 1000;
    line-height: 0.9;
}

body.page-kormkota .kk-notification-summary small {
    color: #d7e4f4;
    font-size: 0.74rem;
    font-weight: 950;
    text-transform: uppercase;
}

body.page-kormkota .kk-notification-panel {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.35rem);
}

body.page-kormkota .kk-notification-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(67, 230, 255, 0.16);
}

body.page-kormkota .kk-notification-toolbar div {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    color: #c8d5e8;
    font-weight: 900;
}

body.page-kormkota .kk-notification-toolbar strong {
    color: #43e6ff;
    font-size: 1.35rem;
}

body.page-kormkota .kk-danger-link,
body.page-kormkota .kk-notification-delete button {
    border: 1px solid rgba(255, 122, 122, 0.42);
    border-radius: 999px;
    background: rgba(255, 122, 122, 0.10);
    color: #ff9b9b;
    cursor: pointer;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 950;
    text-transform: uppercase;
}

body.page-kormkota .kk-danger-link {
    min-height: 2.25rem;
    padding: 0.35rem 0.85rem;
}

body.page-kormkota .kk-danger-link:hover,
body.page-kormkota .kk-notification-delete button:hover {
    background: rgba(255, 122, 122, 0.18);
    color: #ffd1d1;
}

body.page-kormkota .kk-notification-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.page-kormkota .kk-notification-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 0.85rem;
    align-items: center;
    min-height: 5.2rem;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(16, 25, 39, 0.98), rgba(7, 13, 25, 0.985)),
        radial-gradient(circle at 0 0, rgba(67, 230, 255, 0.12), transparent 13rem);
}

body.page-kormkota .kk-notification-item.unread {
    border-color: rgba(67, 230, 255, 0.30);
    background:
        linear-gradient(145deg, rgba(15, 42, 54, 0.98), rgba(7, 15, 28, 0.985)),
        radial-gradient(circle at 0 0, rgba(67, 230, 255, 0.22), transparent 14rem);
}

body.page-kormkota .kk-notification-avatar {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(67, 230, 255, 0.25);
    border-radius: 50%;
    background: rgba(67, 230, 255, 0.08);
    overflow: hidden;
}

body.page-kormkota .kk-notification-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-kormkota .kk-notification-body {
    min-width: 0;
}

body.page-kormkota .kk-notification-body p {
    margin: 0;
    color: #f7fbff;
    font-weight: 900;
    line-height: 1.35;
}

body.page-kormkota .kk-notification-body a {
    color: #dff7ff;
    text-decoration-color: rgba(67, 230, 255, 0.55);
}

body.page-kormkota .kk-notification-body time {
    display: inline-flex;
    margin-top: 0.35rem;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: rgba(67, 230, 255, 0.10);
    color: #9eabc4;
    font-size: 0.74rem;
    font-weight: 900;
}

body.page-kormkota .kk-notification-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #b6ff4d;
    box-shadow: 0 0 18px rgba(182, 255, 77, 0.55);
}

body.page-kormkota .kk-notification-delete {
    margin: 0;
}

body.page-kormkota .kk-notification-delete button {
    min-height: 2rem;
    padding: 0.25rem 0.65rem;
}

body.page-kormkota .kk-notification-empty {
    margin: 0;
    background: rgba(67, 230, 255, 0.07) !important;
}

@media (max-width: 640px) {
    body.page-kormkota .kk-notifications-hero {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.page-kormkota .kk-notification-summary {
        grid-column: 1 / -1;
        justify-self: stretch;
        min-height: 3.2rem;
    }

    body.page-kormkota .kk-notification-toolbar,
    body.page-kormkota .kk-notification-item {
        align-items: stretch;
    }

    body.page-kormkota .kk-notification-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.page-kormkota .kk-notification-dot,
    body.page-kormkota .kk-notification-delete {
        grid-column: 2;
    }
}

@media (max-width: 640px) {
    body.page-kormkota .kk-section-head h2,
    body.page-kormkota .kk-monitor-title h2,
    body.page-kormkota .kk-map-section-head h2,
    body.page-kormkota .kk-panel > h2,
    body.page-kormkota .kk-section > h2 {
        gap: 0.45rem;
    }

    body.page-kormkota .kk-section-head h2::before,
    body.page-kormkota .kk-monitor-title h2::before,
    body.page-kormkota .kk-map-section-head h2::before,
    body.page-kormkota .kk-panel > h2::before,
    body.page-kormkota .kk-section > h2::before {
        width: 0.55rem;
        height: 0.55rem;
        border-radius: 3px;
    }
}

/* v20260714-layout-live-fix1-final */
body,
body.page-kormkota {
    background: #071017 !important;
    background-image: none !important;
    color: #eef8fb !important;
}

.main-content,
.main-content--guest,
.kk-dashboard,
.kk-layout,
.kk-feed,
.kk-side,
.kk-workspace,
.kk-social-workspace {
    background: transparent !important;
}

.site-header,
.site-header--guest,
.site-footer,
.site-footer--guest {
    background: #09131a !important;
    border-color: rgba(185, 214, 220, 0.16) !important;
    box-shadow: none !important;
}

.card,
.post-card,
.comment-form,
.chat-box,
.auth-card,
.form-card,
.page-hero,
.profile-hero,
.kk-panel,
.kk-section,
.kk-topbar,
.kk-rail,
.messenger-app,
.kk-notification-panel,
.kk-notification-item,
.kk-mini-chat-list article,
.kk-news-list article,
.kk-monitor-card,
.kk-server-card,
.public-chat-bubble {
    background: #0d1a22 !important;
    border: 1px solid rgba(185, 214, 220, 0.16) !important;
    box-shadow: none !important;
    color: #eef8fb !important;
}

.kk-dashboard--home > .kk-workspace > .kk-topbar {
    display: none !important;
}

.guest-online-count {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(120, 224, 143, 0.35);
    border-radius: 999px;
    background: rgba(120, 224, 143, 0.10);
    color: #eef8fb !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.guest-online-count span {
    color: #78e08f;
    font-weight: 950;
}

.guest-online-count small {
    color: #9eb3ba;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.kk-rail-nav {
    min-height: 100%;
    display: flex !important;
    flex-direction: column;
    gap: 0.45rem !important;
}

.kk-rail-section,
.kk-menu-mark,
.kk-section-head h2::before,
.kk-monitor-title h2::before,
.kk-map-section-head h2::before,
.kk-panel > h2::before,
.kk-section > h2::before,
.kk-notification-dot,
.kk-flash-dot {
    display: none !important;
}

.kk-rail-nav a {
    min-height: 2.6rem;
    border: 1px solid rgba(185, 214, 220, 0.16) !important;
    border-radius: 8px !important;
    background: #111f29 !important;
    color: #eef8fb !important;
    text-decoration: none !important;
}

.kk-rail-nav a:hover,
.kk-rail-nav a.is-active {
    border-color: rgba(66, 215, 255, 0.48) !important;
    background: rgba(66, 215, 255, 0.12) !important;
}

.kk-rail-nav a.kk-rail-link--server,
.kk-rail-nav a[href^="/minecraft/"] {
    border-color: rgba(120, 224, 143, 0.42) !important;
    background: rgba(120, 224, 143, 0.10) !important;
}

.kk-rail-nav a.kk-rail-link--server strong,
.kk-rail-nav a[href^="/minecraft/"] strong {
    color: #c8ffd3 !important;
}

.kk-rail-nav a.kk-rail-link--download,
.kk-rail-nav a[href="/downloads"] {
    margin-top: auto;
    border-color: rgba(255, 209, 102, 0.52) !important;
    background: rgba(255, 209, 102, 0.13) !important;
}

.kk-rail-nav a.kk-rail-link--download strong,
.kk-rail-nav a[href="/downloads"] strong {
    color: #ffe49a !important;
}

.kk-monitor-card.is-online,
.kk-server-card.is-online {
    border-color: rgba(120, 224, 143, 0.42) !important;
}

.kk-monitor-card.is-offline,
.kk-server-card.is-offline {
    border-color: rgba(255, 120, 120, 0.34) !important;
}

.kk-monitor-state {
    border: 1px solid rgba(185, 214, 220, 0.16) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #9eb3ba !important;
}

.is-online .kk-monitor-state {
    border-color: rgba(120, 224, 143, 0.45) !important;
    background: rgba(120, 224, 143, 0.12) !important;
    color: #c8ffd3 !important;
}

.kk-monitor-bar {
    background: rgba(255, 255, 255, 0.08) !important;
    overflow: hidden;
}

.kk-monitor-bar i {
    background: linear-gradient(90deg, #78e08f, #42d7ff) !important;
    transition: width 0.25s ease;
}

.kk-notification-body a,
.kk-notification-body a:hover,
.kk-notification-body p a,
.kk-notification-body p a:hover {
    color: #eef8fb !important;
    text-decoration: none !important;
}

@media (max-width: 760px) {
    .kk-rail-nav a.kk-rail-link--download,
    .kk-rail-nav a[href="/downloads"] {
        margin-top: 0;
    }
}

.kk-dashboard--home > .kk-rail:not(.kk-rail--global) {
    display: none !important;
}

/* v20260714-site-grid-bg1: one grid background across the whole site */
body,
body.page-kormkota {
    background-color: #071017 !important;
    background-image:
        linear-gradient(rgba(66, 215, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(66, 215, 255, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(7, 16, 23, 0.92), rgba(7, 16, 23, 0.98)) !important;
    background-size: 56px 56px, 56px 56px, 100% 100% !important;
    background-position: center top !important;
    background-attachment: fixed !important;
}

/* v20260714-single-grid-final: only body owns the site grid */
body.page-kormkota .kk-dashboard,
body.page-kormkota .kk-dashboard--home,
body.page-kormkota .kk-workspace,
body.page-kormkota .kk-layout,
body.page-kormkota .kk-feed,
body.page-kormkota .kk-side,
body.page-kormkota .main-content--guest,
body.page-kormkota .main-content,
body.page-kormkota .kk-social-workspace {
    background: transparent !important;
    background-image: none !important;
}

body.page-kormkota .kk-rail,
body.page-kormkota .kk-panel,
body.page-kormkota .kk-section,
body.page-kormkota .kk-monitor-card,
body.page-kormkota .kk-server-card,
body.page-kormkota .kk-mini-chat-list article,
body.page-kormkota .kk-news-list article,
body.page-kormkota .card,
body.page-kormkota .post-card,
body.page-kormkota .page-hero,
body.page-kormkota .messenger-app {
    background-image: none !important;
}

body.page-kormkota .kk-dashboard::before,
body.page-kormkota .kk-dashboard::after,
body.page-kormkota .kk-workspace::before,
body.page-kormkota .kk-workspace::after,
body.page-kormkota .kk-layout::before,
body.page-kormkota .kk-layout::after {
    content: none !important;
    display: none !important;
}

/* v20260714-single-grid-panels1: solid panels over the single page grid */
body,
body.page-kormkota {
    background-color: #071017 !important;
    background-image:
        linear-gradient(rgba(66, 215, 255, 0.052) 1px, transparent 1px),
        linear-gradient(90deg, rgba(66, 215, 255, 0.052) 1px, transparent 1px),
        radial-gradient(circle at 18% 16%, rgba(66, 215, 255, 0.12), transparent 28rem),
        radial-gradient(circle at 86% 10%, rgba(120, 224, 143, 0.08), transparent 30rem),
        linear-gradient(180deg, #071017 0%, #050b11 100%) !important;
    background-size: 56px 56px, 56px 56px, auto, auto, 100% 100% !important;
    background-position: center top !important;
    background-attachment: fixed !important;
}

body.page-kormkota::before,
body.page-kormkota::after {
    display: none !important;
    content: none !important;
}

body.page-kormkota .kk-dashboard,
body.page-kormkota .kk-dashboard--home,
body.page-kormkota .kk-workspace,
body.page-kormkota .kk-layout,
body.page-kormkota .kk-feed,
body.page-kormkota .kk-side,
body.page-kormkota .kk-monitor-side,
body.page-kormkota .main-content--guest,
body.page-kormkota .main-content,
body.page-kormkota .kk-social-workspace {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.page-kormkota .kk-rail,
body.page-kormkota .kk-panel,
body.page-kormkota .kk-section,
body.page-kormkota .page-hero,
body.page-kormkota .card,
body.page-kormkota .post-card,
body.page-kormkota .messenger-app,
body.page-kormkota .kk-notification-panel,
body.page-kormkota .kk-notification-item {
    background: linear-gradient(145deg, rgba(13, 24, 34, 0.98), rgba(7, 13, 23, 0.98)) !important;
    background-image: linear-gradient(145deg, rgba(13, 24, 34, 0.98), rgba(7, 13, 23, 0.98)) !important;
    border: 1px solid rgba(96, 175, 190, 0.22) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24) !important;
}

body.page-kormkota .kk-mini-chat-list article,
body.page-kormkota .kk-news-list article,
body.page-kormkota .kk-monitor-card,
body.page-kormkota .kk-server-card,
body.page-kormkota .public-chat-bubble,
body.page-kormkota .chat-msg {
    background: #07101b !important;
    background-image: none !important;
    border: 1px solid rgba(96, 175, 190, 0.18) !important;
    box-shadow: none !important;
}

body.page-kormkota .kk-rail-nav a {
    background: #10202a !important;
    background-image: none !important;
}

body.page-kormkota .kk-rail-nav a.kk-rail-link--server,
body.page-kormkota .kk-rail-nav a[href^="/minecraft/"] {
    background: rgba(120, 224, 143, 0.13) !important;
}

/* v20260717-map-live-achievements1 */
body.page-kormkota .kk-map-live {
    display: grid;
    grid-template-columns: minmax(11rem, 0.32fr) minmax(0, 1fr);
    gap: 0.85rem;
    align-items: stretch;
    margin-bottom: 0.9rem;
}

body.page-kormkota .kk-map-live-count,
body.page-kormkota .kk-map-live-info {
    min-width: 0;
    border: 1px solid rgba(67, 230, 255, 0.28);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(9, 22, 33, 0.96), rgba(5, 12, 22, 0.94)),
        radial-gradient(circle at 90% 15%, rgba(182, 255, 77, 0.18), transparent 8rem);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

body.page-kormkota .kk-map-live-count {
    display: grid;
    place-content: center;
    gap: 0.2rem;
    padding: 1rem;
    text-align: center;
}

body.page-kormkota .kk-map-live-count strong {
    color: #b6ff4d;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 0.9;
}

body.page-kormkota .kk-map-live-count span {
    color: #dce7ff;
    font-size: 0.8rem;
    font-weight: 950;
    text-transform: uppercase;
}

body.page-kormkota .kk-map-live-info {
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem;
}

body.page-kormkota .kk-map-live-info b {
    color: #f7fbff;
    font-size: 1.05rem;
    line-height: 1;
}

body.page-kormkota .kk-map-live-info small {
    color: #8fa4c2;
    font-weight: 850;
}

body.page-kormkota .kk-map-player-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.page-kormkota .kk-map-player-list li {
    display: grid;
    gap: 0.15rem;
    min-width: min(100%, 12rem);
    padding: 0.62rem 0.72rem;
    border: 1px solid rgba(182, 255, 77, 0.28);
    border-radius: 14px;
    background: rgba(182, 255, 77, 0.08);
    color: #dce7ff;
    cursor: pointer;
}

body.page-kormkota .kk-map-player-list li.is-empty {
    cursor: default;
}

body.page-kormkota .kk-map-player-list strong {
    color: #b6ff4d;
    font-weight: 950;
    line-height: 1;
    overflow-wrap: anywhere;
}

body.page-kormkota .kk-map-player-list span {
    color: #9eabc4;
    font-size: 0.76rem;
    font-weight: 850;
}

body.page-kormkota .kk-leaderboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

body.page-kormkota .kk-leaderboard-card li {
    min-height: 2.6rem;
}

@media (max-width: 760px) {
    body.page-kormkota .kk-map-live {
        grid-template-columns: 1fr;
    }

    body.page-kormkota .kk-map-player-list {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* v20260717-news-center-final */
body.page-kormkota .kk-section-head.kk-section-head--center {
    justify-content: center !important;
    text-align: center;
}

body.page-kormkota .kk-section-head.kk-section-head--center h2 {
    margin-inline: auto;
}

body.page-kormkota .kk-rail-nav a.kk-rail-link--download,
body.page-kormkota .kk-rail-nav a[href="/downloads"] {
    background: rgba(255, 209, 102, 0.15) !important;
}

/* v20260715-avatar-presets1: selectable profile avatar icons */
body.page-kormkota .kk-avatar-presets {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.8rem, 1fr));
    gap: 0.65rem;
    margin: 0;
    padding: 0.85rem;
    border: 1px solid rgba(96, 175, 190, 0.20);
    border-radius: 14px;
    background: rgba(7, 16, 27, 0.72);
}

body.page-kormkota .kk-avatar-presets legend {
    padding: 0 0.45rem;
    color: #9cecff;
    font-size: 0.78rem;
    font-weight: 950;
}

body.page-kormkota .kk-avatar-preset {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.42rem;
    min-height: 6.7rem;
    padding: 0.7rem 0.45rem;
    border: 1px solid rgba(96, 175, 190, 0.18);
    border-radius: 12px;
    background: #07101b;
    color: #dceff5;
    cursor: pointer;
    user-select: none;
}

body.page-kormkota .kk-avatar-preset input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

body.page-kormkota .kk-avatar-preset img {
    width: 3.65rem;
    height: 3.65rem;
    border: 1px solid rgba(66, 215, 255, 0.26);
    border-radius: 16px;
    background: #050b11;
    object-fit: cover;
}

body.page-kormkota .kk-avatar-preset span {
    max-width: 100%;
    color: #dceff5;
    font-size: 0.76rem;
    font-weight: 950;
    line-height: 1.1;
    text-align: center;
}

body.page-kormkota .kk-avatar-preset:has(input:checked) {
    border-color: rgba(120, 224, 143, 0.62);
    background: linear-gradient(145deg, rgba(66, 215, 255, 0.16), rgba(120, 224, 143, 0.12));
    box-shadow: 0 0 0 1px rgba(120, 224, 143, 0.16), 0 16px 32px rgba(0, 0, 0, 0.24);
}

body.page-kormkota .kk-avatar-preset:has(input:checked)::after {
    content: "";
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    background: #78e08f;
    box-shadow: 0 0 14px rgba(120, 224, 143, 0.56);
}

/* v20260715-chat-news-nav1: unified left tabs and centered chat/news pages */
body.page-kormkota .kk-rail-nav a[href="/chat"],
body.page-kormkota .kk-rail-nav a[href="/news"] {
    border-color: rgba(255, 255, 255, 0.11) !important;
    background: rgba(15, 32, 44, 0.88) !important;
}

body.page-kormkota .kk-rail-nav a[href="/chat"].is-active,
body.page-kormkota .kk-rail-nav a[href="/news"].is-active {
    border-color: rgba(66, 215, 255, 0.62) !important;
    background: linear-gradient(135deg, rgba(66, 215, 255, 0.22), rgba(120, 224, 143, 0.12)) !important;
}

body.page-kormkota .kk-mini-chat > .kk-section-head,
body.page-kormkota #news > .kk-section-head,
body.page-kormkota .kk-page-titlebar,
body.page-kormkota .public-chat-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 0.55rem !important;
}

body.page-kormkota .kk-mini-chat > .kk-section-head h2,
body.page-kormkota #news > .kk-section-head h2,
body.page-kormkota .kk-page-titlebar h1,
body.page-kormkota .public-chat-head h1 {
    margin-inline: auto !important;
    max-width: 100% !important;
    text-align: center !important;
    background-image: linear-gradient(90deg, #ffffff 0%, #42d7ff 48%, #78e08f 100%) !important;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

body.page-kormkota .kk-page-titlebar p,
body.page-kormkota .public-chat-head p {
    max-width: 44rem;
    margin: 0.15rem auto 0 !important;
    color: #b8cad3 !important;
}

body.page-kormkota .kk-title-eyebrow,
body.page-kormkota .kk-pill {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 1.8rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(66, 215, 255, 0.32);
    border-radius: 999px;
    background: rgba(66, 215, 255, 0.10);
    color: #9cecff !important;
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
}

body.page-kormkota .kk-chat-dashboard > .kk-workspace,
body.page-kormkota .kk-news-dashboard > .kk-workspace {
    width: min(100%, 1060px) !important;
    margin-inline: auto !important;
}

body.page-kormkota .kk-chat-dashboard .public-chat,
body.page-kormkota .kk-news-dashboard .kk-news-board,
body.page-kormkota .kk-news-dashboard .kk-news-editor {
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
}

body.page-kormkota .public-chat-head {
    margin-bottom: 1rem !important;
}

body.page-kormkota .public-chat-back {
    margin-top: 0.35rem;
    text-decoration: none !important;
}

body.page-kormkota .kk-news-cards {
    max-width: 880px;
    margin-inline: auto;
}

body.page-kormkota .kk-news-list h3 a {
    color: inherit !important;
    text-decoration: none !important;
}

@media (max-width: 760px) {
    body.page-kormkota .kk-chat-dashboard > .kk-workspace,
    body.page-kormkota .kk-news-dashboard > .kk-workspace {
        width: 100% !important;
    }
}

/* v20260716-mobile-kko1: stable mobile menu and reward balls */
.reward-balls-layer {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    contain: layout paint;
}

.reward-ball {
    left: var(--ball-left-px, var(--ball-left, 50vw));
    transform: translate3d(-50%, 0, 0);
    transition: opacity 0.22s ease, scale 0.22s ease;
    touch-action: manipulation;
    will-change: transform, opacity;
    -webkit-tap-highlight-color: transparent;
}

.reward-ball.is-falling {
    animation: reward-ball-fall-mobile var(--fall-duration, 5200ms) linear forwards !important;
}

.reward-ball.is-caught {
    animation-play-state: paused !important;
    opacity: 1;
    scale: 1;
}

@keyframes reward-ball-fall-mobile {
    0% {
        transform: translate3d(-50%, 0, 0) rotate(0deg);
        opacity: 1;
    }
    88% {
        opacity: 1;
    }
    100% {
        transform: translate3d(-50%, var(--fall-distance, 115vh), 0) rotate(360deg);
        opacity: 0;
    }
}

@media (max-width: 820px) {
    html,
    body.page-kormkota {
        width: 100%;
        overflow-x: hidden;
    }

    body.page-kormkota .site-header--guest {
        padding: 0.35rem 0.45rem;
    }

    body.page-kormkota .header-inner--guest {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.55rem !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 0.55rem !important;
        border-radius: 14px !important;
    }

    body.page-kormkota .guest-logo {
        width: 100%;
        min-width: 0;
    }

    body.page-kormkota .guest-logo-image {
        width: 2.7rem !important;
        height: 2.7rem !important;
        border-radius: 14px !important;
    }

    body.page-kormkota .guest-logo-text strong {
        max-width: none !important;
        font-size: 1.05rem !important;
        white-space: nowrap;
    }

    body.page-kormkota .guest-logo-text small {
        display: none !important;
    }

    body.page-kormkota .guest-account-actions {
        width: 100% !important;
        min-width: 0;
        justify-content: flex-start !important;
        gap: 0.4rem !important;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding-bottom: 0.05rem;
        -webkit-overflow-scrolling: touch;
    }

    body.page-kormkota .guest-account-actions > * {
        flex: 0 0 auto !important;
    }

    body.page-kormkota .guest-social-actions {
        width: auto !important;
        justify-content: flex-start !important;
        gap: 0.28rem !important;
        padding: 0.18rem !important;
    }

    body.page-kormkota .guest-social-link {
        flex: 0 0 2.35rem !important;
        width: 2.35rem !important;
        height: 2.35rem !important;
        min-width: 2.35rem !important;
    }

    body.page-kormkota .guest-online-count,
    body.page-kormkota .guest-balance,
    body.page-kormkota .guest-account-link {
        min-height: 2.35rem !important;
        padding: 0.48rem 0.62rem !important;
        font-size: 0.74rem !important;
        white-space: nowrap;
    }

    body.page-kormkota .guest-account-form {
        flex: 0 0 auto !important;
    }

    body.page-kormkota .main-content--guest {
        display: block !important;
        width: 100% !important;
        padding: 0.65rem 0.55rem 1.4rem !important;
    }

    body.page-kormkota .kk-dashboard,
    body.page-kormkota .kk-social-dashboard,
    body.page-kormkota .kk-chat-dashboard,
    body.page-kormkota .kk-news-dashboard,
    body.page-kormkota .kk-profile-dashboard,
    body.page-kormkota .kk-downloads-page {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.page-kormkota .kk-dashboard > .kk-rail--global,
    body.page-kormkota .kk-dashboard--home > .kk-rail--global {
        display: block !important;
        position: sticky !important;
        top: 0.35rem !important;
        z-index: 80 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0.45rem !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    body.page-kormkota .kk-rail--global .kk-rail-nav {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: none !important;
        gap: 0.42rem !important;
        min-height: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        padding: 0 0 0.08rem !important;
        -webkit-overflow-scrolling: touch;
    }

    body.page-kormkota .kk-rail--global .kk-rail-nav a {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        min-height: 2.35rem !important;
        padding: 0.52rem 0.72rem !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
        scroll-snap-align: start;
    }

    body.page-kormkota .kk-rail--global .kk-rail-nav a strong {
        font-size: 0.76rem !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    body.page-kormkota .kk-rail--global .kk-rail-section {
        display: none !important;
    }

    body.page-kormkota .kk-workspace,
    body.page-kormkota .kk-layout,
    body.page-kormkota .kk-feed,
    body.page-kormkota .kk-side,
    body.page-kormkota .kk-monitor-side,
    body.page-kormkota .kk-section,
    body.page-kormkota .kk-monitor {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.page-kormkota .kk-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem !important;
    }

    body.page-kormkota .kk-monitor-list {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.page-kormkota .public-chat,
    body.page-kormkota .messenger-app,
    body.page-kormkota .kk-news-board {
        min-width: 0 !important;
        overflow-x: hidden;
    }

    .reward-ball {
        --ball-size: clamp(38px, 12vw, 50px);
    }
}

@media (max-width: 420px) {
    body.page-kormkota .guest-logo-image {
        width: 2.35rem !important;
        height: 2.35rem !important;
    }

    body.page-kormkota .guest-logo-text strong {
        font-size: 0.92rem !important;
    }

    body.page-kormkota .kk-rail--global .kk-rail-nav a {
        min-height: 2.2rem !important;
        padding: 0.48rem 0.62rem !important;
    }

    body.page-kormkota .kk-rail--global .kk-rail-nav a strong {
        font-size: 0.7rem !important;
    }
}

/* v20260716-rail-click-fix1: final rail layout lock */
@media (min-width: 821px) {
    body.page-kormkota .kk-dashboard {
        grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) !important;
    }

    body.page-kormkota .kk-dashboard > .kk-rail--global {
        grid-column: 1 !important;
        grid-row: 1 !important;
        position: sticky !important;
        top: 6.75rem !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: calc(100vh - 7.75rem) !important;
        overflow: auto !important;
    }

    body.page-kormkota .kk-dashboard > .kk-workspace,
    body.page-kormkota .kk-dashboard > .kk-social-workspace {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    body.page-kormkota .kk-rail--global .kk-rail-nav {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        overflow: visible !important;
    }

    body.page-kormkota .kk-rail--global .kk-rail-nav a {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
        white-space: normal !important;
    }
}

@media (max-width: 820px) {
    body.page-kormkota .kk-dashboard > .kk-rail--global,
    body.page-kormkota .kk-dashboard--home > .kk-rail--global {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.page-kormkota .kk-dashboard > .kk-workspace,
    body.page-kormkota .kk-dashboard--home > .kk-workspace,
    body.page-kormkota .kk-dashboard > .kk-social-workspace {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    body.page-kormkota .kk-rail--global .kk-rail-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
    }
}

/* v20260717-messages-rail-clean1: visible badges, top rail, softer messenger */
body.page-kormkota .kk-rail--global .kk-rail-nav a {
    display: flex !important;
    align-items: center !important;
}

body.page-kormkota .kk-rail--global .kk-rail-nav a strong {
    flex: 1 1 auto !important;
}

body.page-kormkota .kk-rail--global .kk-rail-badge {
    position: static !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 1.45rem !important;
    height: 1.45rem !important;
    margin-left: 0.55rem !important;
    padding: 0 0.42rem !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #7dff74, #43e6ff) !important;
    color: #061018 !important;
    font-size: 0.72rem !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    box-shadow: 0 0 18px rgba(67, 230, 255, 0.34) !important;
}

body.page-kormkota .kk-messages-dashboard {
    align-items: start !important;
}

body.page-kormkota .kk-messages-dashboard > .kk-rail--global {
    align-self: start !important;
    margin-top: 0 !important;
    transform: translateY(-3rem) !important;
}

body.page-kormkota .kk-messages-dashboard > .kk-social-workspace,
body.page-kormkota .kk-messages-dashboard .messenger-app {
    align-self: start !important;
    margin-top: 0 !important;
}

body.page-kormkota .kk-messages-dashboard .messenger-app {
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(8, 15, 26, 0.98), rgba(4, 10, 18, 0.98)) !important;
    background-image: linear-gradient(145deg, rgba(8, 15, 26, 0.98), rgba(4, 10, 18, 0.98)) !important;
}

body.page-kormkota .kk-messages-dashboard .messenger-sidebar,
body.page-kormkota .kk-messages-dashboard .messenger,
body.page-kormkota .kk-messages-dashboard .messenger-header,
body.page-kormkota .kk-messages-dashboard .chat-compose {
    background-image: none !important;
}

body.page-kormkota.page-chat .chat-messages {
    background: transparent !important;
    background-image: none !important;
}

body.page-kormkota.page-chat .chat-msg,
body.page-kormkota.page-chat .chat-msg.mine {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.page-kormkota.page-chat .chat-bubble {
    border-radius: 18px !important;
    background: rgba(13, 20, 35, 0.96) !important;
    background-image: none !important;
    border: 1px solid rgba(96, 175, 190, 0.24) !important;
}

body.page-kormkota.page-chat .chat-msg.mine .chat-bubble {
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(31, 94, 92, 0.96), rgba(20, 80, 72, 0.92)) !important;
    border-color: rgba(67, 230, 255, 0.38) !important;
}

body.page-kormkota.page-chat .chat-bubble time {
    width: fit-content;
    margin-top: 0.42rem;
    padding: 0.22rem 0.52rem;
    border-radius: 999px;
    background: rgba(5, 12, 24, 0.42);
}

@media (max-width: 820px) {
    body.page-kormkota .kk-messages-dashboard > .kk-rail--global {
        transform: none !important;
    }
}

/* v20260717-message-rail-fit1: keep message page rail fully visible */
body.page-kormkota .kk-messages-dashboard > .kk-rail--global {
    transform: none !important;
    margin-top: 0 !important;
    max-height: calc(100vh - 7.25rem) !important;
    overflow-y: auto !important;
}

body.page-kormkota .kk-messages-dashboard .kk-rail-nav {
    min-height: 0 !important;
}

body.page-kormkota .kk-messages-dashboard .kk-rail-nav a:first-child {
    margin-top: 0 !important;
}

/* v20260719-games1: online games lobby and Durak table */
body.page-kormkota .kk-games-dashboard {
    align-items: flex-start !important;
}

body.page-kormkota .kk-games-workspace {
    display: grid;
    gap: 1.2rem;
    min-width: 0;
}

body.page-kormkota .kk-games-hero,
body.page-kormkota .kk-games-panel,
body.page-kormkota .kk-durak-table {
    border: 1px solid rgba(67, 230, 255, 0.22);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(8, 15, 26, 0.96), rgba(4, 10, 18, 0.96));
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.page-kormkota .kk-games-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.2rem, 2.5vw, 2rem);
}

body.page-kormkota .kk-section-kicker {
    margin: 0 0 0.35rem;
    color: #6fffd0;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.page-kormkota .kk-games-hero h1,
body.page-kormkota .kk-games-panel h2,
body.page-kormkota .kk-durak-header h1 {
    margin: 0;
    color: #f4fbff;
}

body.page-kormkota .kk-games-hero h1 {
    font-size: clamp(2rem, 4vw, 4rem);
}

body.page-kormkota .kk-games-hero span,
body.page-kormkota .kk-game-card p,
body.page-kormkota .kk-games-empty span {
    color: #aebbd2;
}

body.page-kormkota .kk-games-primary,
body.page-kormkota .kk-game-card button,
body.page-kormkota .kk-game-card > a,
body.page-kormkota .kk-room-open,
body.page-kormkota .kk-games-ghost,
body.page-kormkota .kk-games-refresh,
body.page-kormkota .kk-durak-buttons button,
body.page-kormkota .kk-durak-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(67, 230, 255, 0.36);
    border-radius: 14px;
    background: linear-gradient(135deg, #7dff68, #43e6ff);
    color: #06111f;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

body.page-kormkota .kk-games-ghost,
body.page-kormkota .kk-games-refresh,
body.page-kormkota .kk-durak-back,
body.page-kormkota .kk-durak-buttons button {
    background: rgba(10, 27, 43, 0.88);
    color: #e8f7ff;
}

body.page-kormkota .kk-game-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

body.page-kormkota .kk-game-card {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(122, 255, 104, 0.24);
    border-radius: 18px;
    background: rgba(6, 20, 30, 0.78);
}

body.page-kormkota .kk-game-card-icon {
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    border: 1px solid rgba(67, 230, 255, 0.45);
    border-radius: 16px;
    background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.24), transparent 28%), rgba(12, 42, 58, 0.92);
    color: #6fffd0;
    font-weight: 900;
}

body.page-kormkota .kk-game-card h2,
body.page-kormkota .kk-room-card h3,
body.page-kormkota .kk-durak-log h2 {
    margin: 0;
    color: #f4fbff;
}

body.page-kormkota .kk-game-card p {
    margin: 0.28rem 0 0;
}

body.page-kormkota .kk-games-panel {
    padding: clamp(1rem, 2vw, 1.5rem);
}

body.page-kormkota .kk-games-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

body.page-kormkota .kk-room-list {
    display: grid;
    gap: 0.75rem;
}

body.page-kormkota .kk-room-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem;
    border: 1px solid rgba(67, 230, 255, 0.22);
    border-radius: 18px;
    background: rgba(5, 13, 25, 0.76);
}

body.page-kormkota .kk-room-status {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 0.35rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(67, 230, 255, 0.12);
    color: #43e6ff;
    font-size: 0.72rem;
    font-weight: 900;
}

body.page-kormkota .kk-room-status--playing {
    background: rgba(122, 255, 104, 0.14);
    color: #9dff5a;
}

body.page-kormkota .kk-room-status--finished {
    background: rgba(255, 221, 109, 0.12);
    color: #ffdd6d;
}

body.page-kormkota .kk-room-players {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.55rem;
}

body.page-kormkota .kk-room-players span {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: #c6d2e4;
    font-weight: 800;
}

body.page-kormkota .kk-games-empty {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px dashed rgba(67, 230, 255, 0.3);
    border-radius: 16px;
    background: rgba(67, 230, 255, 0.06);
}

body.page-kormkota .kk-durak-table {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.4rem);
}

body.page-kormkota .kk-durak-header,
body.page-kormkota .kk-durak-players,
body.page-kormkota .kk-durak-waiting,
body.page-kormkota .kk-durak-actions,
body.page-kormkota .kk-durak-hand header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

body.page-kormkota .kk-durak-status {
    padding: 0.42rem 0.75rem;
    border: 1px solid rgba(122, 255, 104, 0.32);
    border-radius: 999px;
    color: #9dff5a;
    font-weight: 900;
}

body.page-kormkota .kk-games-note {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(67, 230, 255, 0.22);
    border-radius: 14px;
    background: rgba(67, 230, 255, 0.08);
    color: #c9d5e7;
    font-weight: 800;
}

body.page-kormkota .kk-durak-player {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 4.6rem;
    padding: 0.75rem;
    border: 1px solid rgba(67, 230, 255, 0.2);
    border-radius: 18px;
    background: rgba(5, 13, 25, 0.72);
}

body.page-kormkota .kk-durak-player strong,
body.page-kormkota .kk-durak-player span,
body.page-kormkota .kk-durak-player small {
    display: block;
}

body.page-kormkota .kk-durak-player span,
body.page-kormkota .kk-durak-player em {
    color: #aebbd2;
    font-style: normal;
}

body.page-kormkota .kk-player-state {
    text-align: right;
}

body.page-kormkota .kk-durak-board {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1fr) minmax(260px, 1.2fr);
    gap: 1rem;
    align-items: stretch;
}

body.page-kormkota .kk-durak-opponent,
body.page-kormkota .kk-durak-center,
body.page-kormkota .kk-durak-playfield,
body.page-kormkota .kk-durak-actions,
body.page-kormkota .kk-durak-hand,
body.page-kormkota .kk-durak-log {
    border: 1px solid rgba(67, 230, 255, 0.18);
    border-radius: 18px;
    background: rgba(3, 10, 20, 0.68);
}

body.page-kormkota .kk-durak-opponent,
body.page-kormkota .kk-durak-center,
body.page-kormkota .kk-durak-playfield,
body.page-kormkota .kk-durak-actions,
body.page-kormkota .kk-durak-hand,
body.page-kormkota .kk-durak-log {
    padding: 0.85rem;
}

body.page-kormkota .kk-durak-backs,
body.page-kormkota .kk-durak-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.48rem;
}

body.page-kormkota .kk-durak-center {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-content: center;
}

body.page-kormkota .kk-durak-deck,
body.page-kormkota .kk-durak-trump,
body.page-kormkota .kk-durak-discard {
    display: grid;
    gap: 0.45rem;
    justify-items: center;
    align-content: center;
    min-height: 8rem;
    border-radius: 16px;
    background: rgba(67, 230, 255, 0.06);
}

body.page-kormkota .kk-durak-deck strong,
body.page-kormkota .kk-durak-discard strong {
    color: #f4fbff;
    font-size: 1.7rem;
}

body.page-kormkota .kk-card,
body.page-kormkota .kk-card-back,
body.page-kormkota .kk-card-slot {
    display: grid;
    width: 4.2rem;
    height: 5.8rem;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(67, 230, 255, 0.3);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

body.page-kormkota .kk-card {
    grid-template-rows: auto 1fr auto;
    padding: 0.45rem;
    background: #edf7ff;
    color: #071321;
    font-weight: 900;
}

body.page-kormkota .kk-card span {
    font-size: 1.7rem;
}

body.page-kormkota .kk-card small {
    font-size: 0.56rem;
    color: #435269;
}

body.page-kormkota .kk-card--red strong,
body.page-kormkota .kk-card--red span {
    color: #d32652;
}

body.page-kormkota .kk-card:not(:disabled):hover {
    transform: translateY(-6px);
}

body.page-kormkota .kk-card:disabled {
    cursor: default;
}

body.page-kormkota .kk-card-back {
    background: linear-gradient(135deg, #09334c, #0b1a33 58%, #7dff68);
    color: #d8fff6;
    font-weight: 900;
}

body.page-kormkota .kk-card-back--mini {
    width: 2.6rem;
    height: 3.6rem;
    border-radius: 10px;
    font-size: 0.76rem;
}

body.page-kormkota .kk-card-slot {
    border-style: dashed;
    background: rgba(67, 230, 255, 0.06);
    color: #7d8ca5;
    font-weight: 900;
}

body.page-kormkota .kk-durak-playfield {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.75rem;
    min-height: 13rem;
}

body.page-kormkota .kk-durak-pair {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0.35rem 0.55rem;
    align-items: center;
}

body.page-kormkota .kk-durak-pair > span {
    color: #8ea1bd;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

body.page-kormkota .kk-table-empty,
body.page-kormkota .kk-hand-empty,
body.page-kormkota .kk-player-empty {
    color: #aebbd2;
    font-weight: 800;
}

body.page-kormkota .kk-durak-actions p {
    margin: 0;
    color: #e8f7ff;
    font-weight: 800;
}

body.page-kormkota .kk-durak-buttons {
    display: flex;
    gap: 0.55rem;
}

body.page-kormkota .kk-durak-buttons button:disabled {
    opacity: 0.45;
    cursor: default;
}

body.page-kormkota .kk-durak-log {
    display: grid;
    gap: 0.55rem;
}

body.page-kormkota .kk-durak-log p {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    color: #c6d2e4;
}

body.page-kormkota .kk-durak-log time {
    color: #43e6ff;
    font-weight: 900;
}

body.page-kormkota .kk-durak-restart {
    justify-self: start;
}

@media (max-width: 980px) {
    body.page-kormkota .kk-games-hero,
    body.page-kormkota .kk-game-card,
    body.page-kormkota .kk-room-card,
    body.page-kormkota .kk-durak-header,
    body.page-kormkota .kk-durak-waiting {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    body.page-kormkota .kk-durak-players,
    body.page-kormkota .kk-durak-board,
    body.page-kormkota .kk-durak-center {
        grid-template-columns: 1fr;
    }

    body.page-kormkota .kk-durak-actions {
        align-items: stretch;
        flex-direction: column;
    }

    body.page-kormkota .kk-durak-cards {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.35rem;
    }
}

/* v20260719-durak-table2: proper card-table layout */
body.page-kormkota .kk-durak-table {
    gap: 1rem;
    overflow: hidden;
}

body.page-kormkota .kk-durak-board {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(21rem, 1fr) auto auto;
    gap: 0.85rem;
    min-height: min(760px, calc(100svh - 15rem));
    padding: clamp(0.85rem, 1.8vw, 1.35rem);
    border: 1px solid rgba(126, 255, 168, 0.28);
    border-radius: 30px;
    background:
        radial-gradient(ellipse at 50% 42%, rgba(126, 255, 168, 0.16), transparent 36rem),
        radial-gradient(ellipse at 18% 16%, rgba(67, 230, 255, 0.18), transparent 24rem),
        linear-gradient(135deg, rgba(9, 54, 45, 0.94), rgba(4, 26, 31, 0.96) 58%, rgba(8, 17, 31, 0.96));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 80px rgba(0, 0, 0, 0.34), 0 28px 90px rgba(0, 0, 0, 0.34);
}

body.page-kormkota .kk-durak-board::before {
    content: "";
    position: absolute;
    inset: 0.85rem;
    border: 1px solid rgba(187, 255, 213, 0.18);
    border-radius: 24px;
    pointer-events: none;
}

body.page-kormkota .kk-durak-seat,
body.page-kormkota .kk-durak-felt,
body.page-kormkota .kk-durak-actions {
    position: relative;
    z-index: 1;
}

body.page-kormkota .kk-durak-opponent,
body.page-kormkota .kk-durak-hand,
body.page-kormkota .kk-durak-center,
body.page-kormkota .kk-durak-playfield,
body.page-kormkota .kk-durak-actions {
    border-color: rgba(211, 255, 225, 0.16) !important;
    background: rgba(3, 17, 22, 0.52) !important;
    backdrop-filter: blur(10px);
}

body.page-kormkota .kk-durak-seat-label,
body.page-kormkota .kk-durak-hand header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

body.page-kormkota .kk-durak-seat-label span,
body.page-kormkota .kk-durak-hand header span {
    color: #f4fbff;
    font-weight: 900;
}

body.page-kormkota .kk-durak-seat-label small,
body.page-kormkota .kk-durak-hand header small {
    color: #9dff5a;
    font-weight: 900;
}

body.page-kormkota .kk-durak-backs {
    justify-content: center;
    min-height: 3.9rem;
}

body.page-kormkota .kk-durak-felt {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
    gap: clamp(0.8rem, 1.8vw, 1.25rem);
    min-height: 22rem;
}

body.page-kormkota .kk-durak-center {
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: stretch !important;
    min-height: 100%;
    padding: 0.75rem !important;
}

body.page-kormkota .kk-durak-deck,
body.page-kormkota .kk-durak-trump,
body.page-kormkota .kk-durak-discard {
    min-height: 7.2rem !important;
    border: 1px solid rgba(211, 255, 225, 0.14);
    background: rgba(1, 10, 17, 0.38) !important;
}

body.page-kormkota .kk-durak-playfield {
    display: flex !important;
    align-items: center;
    justify-content: center;
    align-content: center !important;
    min-height: 100% !important;
    padding: clamp(1rem, 2vw, 1.4rem) !important;
}

body.page-kormkota .kk-durak-pair {
    grid-template-columns: repeat(2, minmax(4.8rem, auto)) !important;
    align-items: end !important;
    padding: 0.55rem;
    border: 1px solid rgba(211, 255, 225, 0.12);
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.16);
}

body.page-kormkota .kk-durak-pair > span {
    grid-row: 1;
    text-align: center;
}

body.page-kormkota .kk-durak-pair .kk-card,
body.page-kormkota .kk-durak-pair .kk-card-slot {
    grid-row: 2;
}

body.page-kormkota .kk-durak-actions {
    border-radius: 18px;
}

body.page-kormkota .kk-durak-hand {
    padding: 0.85rem !important;
    border-radius: 20px !important;
}

body.page-kormkota .kk-durak-cards {
    justify-content: center;
    gap: 0;
    min-height: 7.5rem;
    padding: 0.2rem 1rem 0.35rem;
}

body.page-kormkota .kk-durak-cards .kk-card {
    margin-left: -0.7rem;
    transform-origin: 50% 110%;
}

body.page-kormkota .kk-durak-cards .kk-card:first-child {
    margin-left: 0;
}

body.page-kormkota .kk-durak-cards .kk-card:not(:disabled):hover {
    transform: translateY(-0.9rem) scale(1.04);
    z-index: 4;
}

body.page-kormkota .kk-card,
body.page-kormkota .kk-card-back,
body.page-kormkota .kk-card-slot,
body.page-kormkota .kk-card-placeholder {
    width: clamp(4.35rem, 5vw, 5.25rem) !important;
    height: clamp(6.1rem, 7vw, 7.3rem) !important;
    border-radius: 16px !important;
}

body.page-kormkota .kk-card {
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(224, 237, 248, 0.98)) !important;
}

body.page-kormkota .kk-card strong {
    justify-self: start;
    font-size: 1rem;
}

body.page-kormkota .kk-card span {
    font-size: 2.05rem !important;
}

body.page-kormkota .kk-card-back {
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.08) 75%, transparent 75%),
        linear-gradient(135deg, #052236, #0a4360 54%, #7dff68) !important;
    background-size: 12px 12px, auto;
}

body.page-kormkota .kk-card-placeholder {
    display: grid;
    place-items: center;
    border: 1px dashed rgba(211, 255, 225, 0.22);
    background: rgba(0, 0, 0, 0.16);
    color: #aebbd2;
    font-weight: 900;
}

body.page-kormkota .kk-table-empty {
    display: grid;
    width: min(100%, 30rem);
    min-height: 10rem;
    place-items: center;
    border: 1px dashed rgba(211, 255, 225, 0.2);
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.12);
}

body.page-kormkota .kk-durak-log {
    max-height: 11rem;
    overflow: auto;
}

@media (max-width: 980px) {
    body.page-kormkota .kk-durak-board {
        min-height: auto;
        border-radius: 22px;
    }

    body.page-kormkota .kk-durak-felt {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    body.page-kormkota .kk-durak-center {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.page-kormkota .kk-durak-cards {
        justify-content: flex-start;
        overflow-x: auto;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }

    body.page-kormkota .kk-durak-cards .kk-card {
        flex: 0 0 auto;
        margin-left: -0.45rem;
    }
}

@media (max-width: 560px) {
    body.page-kormkota .kk-durak-player {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    body.page-kormkota .kk-player-state {
        grid-column: 1 / -1;
        text-align: left;
    }

    body.page-kormkota .kk-durak-center {
        gap: 0.45rem;
    }

    body.page-kormkota .kk-card,
    body.page-kormkota .kk-card-back,
    body.page-kormkota .kk-card-slot,
    body.page-kormkota .kk-card-placeholder {
        width: 3.8rem !important;
        height: 5.35rem !important;
    }
}

/* v20260719-durak-round6: round table with six seats */
body.page-kormkota .kk-durak-board {
    grid-template-rows: minmax(4.8rem, auto) minmax(25rem, 1fr) auto auto !important;
    min-height: min(820px, calc(100svh - 13rem));
    padding: clamp(1rem, 2.2vw, 1.6rem) !important;
    border-radius: 44px !important;
}

body.page-kormkota .kk-durak-board::after {
    content: "";
    position: absolute;
    inset: clamp(5.3rem, 8vw, 7rem) clamp(1rem, 4vw, 4rem) clamp(8.8rem, 13vw, 11rem);
    border: 2px solid rgba(211, 255, 225, 0.18);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(126, 255, 168, 0.16), rgba(7, 61, 48, 0.1) 42%, rgba(0, 0, 0, 0.14) 78%),
        linear-gradient(135deg, rgba(9, 78, 58, 0.62), rgba(3, 34, 38, 0.72));
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.38);
    pointer-events: none;
}

body.page-kormkota .kk-durak-board > .kk-durak-players {
    position: absolute;
    inset: clamp(1rem, 2vw, 1.4rem);
    z-index: 3;
    display: block;
    pointer-events: none;
}

body.page-kormkota .kk-durak-board .kk-durak-player {
    position: absolute;
    width: min(17rem, 28vw);
    min-height: 4.15rem;
    padding: 0.62rem;
    pointer-events: auto;
    border-color: rgba(211, 255, 225, 0.2);
    background: rgba(2, 14, 22, 0.8);
}

body.page-kormkota .kk-durak-board .kk-durak-player.is-attacker {
    border-color: rgba(255, 221, 109, 0.72);
    box-shadow: 0 0 0 1px rgba(255, 221, 109, 0.24), 0 0 28px rgba(255, 221, 109, 0.14);
}

body.page-kormkota .kk-durak-board .kk-durak-player.is-defender {
    border-color: rgba(67, 230, 255, 0.72);
    box-shadow: 0 0 0 1px rgba(67, 230, 255, 0.24), 0 0 28px rgba(67, 230, 255, 0.14);
}

body.page-kormkota .kk-durak-board .kk-durak-player.is-me {
    background: rgba(10, 47, 42, 0.9);
}

body.page-kormkota .kk-durak-player--seat1 {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

body.page-kormkota .kk-durak-player--seat2 {
    right: 2%;
    top: 21%;
}

body.page-kormkota .kk-durak-player--seat3 {
    right: 2%;
    bottom: 20%;
}

body.page-kormkota .kk-durak-player--seat4 {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

body.page-kormkota .kk-durak-player--seat5 {
    left: 2%;
    bottom: 20%;
}

body.page-kormkota .kk-durak-player--seat6 {
    left: 2%;
    top: 21%;
}

body.page-kormkota .kk-durak-opponent {
    grid-row: 1 !important;
    width: min(42rem, 78%);
    justify-self: center;
    margin-top: 4.2rem;
}

body.page-kormkota .kk-durak-felt {
    z-index: 2;
    grid-row: 2 !important;
    width: min(58rem, 78%);
    justify-self: center;
    align-self: center;
    grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr) !important;
    min-height: 21rem !important;
    border: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
}

body.page-kormkota .kk-durak-actions {
    z-index: 2;
    grid-row: 3 !important;
    width: min(52rem, 76%);
    justify-self: center;
}

body.page-kormkota .kk-durak-hand {
    z-index: 2;
    grid-row: 4 !important;
    width: min(58rem, 82%);
    justify-self: center;
    margin-bottom: 3.9rem;
}

body.page-kormkota .kk-durak-log {
    border-radius: 20px;
}

body.page-kormkota .kk-room-counts {
    margin: 0.35rem 0 0;
    color: #9dff5a;
    font-size: 0.82rem;
    font-weight: 900;
}

@media (max-width: 1180px) {
    body.page-kormkota .kk-durak-board .kk-durak-player {
        width: min(14.5rem, 30vw);
        grid-template-columns: 40px minmax(0, 1fr);
    }

    body.page-kormkota .kk-durak-board .kk-player-state {
        grid-column: 1 / -1;
        text-align: left;
    }

    body.page-kormkota .kk-durak-felt,
    body.page-kormkota .kk-durak-hand,
    body.page-kormkota .kk-durak-actions {
        width: min(100%, 50rem);
    }
}

@media (max-width: 820px) {
    body.page-kormkota .kk-durak-board {
        display: grid !important;
        grid-template-rows: auto auto auto auto auto !important;
        min-height: auto;
        border-radius: 24px !important;
    }

    body.page-kormkota .kk-durak-board::after {
        inset: 0.75rem;
        border-radius: 24px;
    }

    body.page-kormkota .kk-durak-board > .kk-durak-players {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        grid-row: 1;
    }

    body.page-kormkota .kk-durak-board .kk-durak-player {
        position: relative;
        inset: auto;
        width: 100%;
        transform: none;
    }

    body.page-kormkota .kk-durak-opponent,
    body.page-kormkota .kk-durak-felt,
    body.page-kormkota .kk-durak-actions,
    body.page-kormkota .kk-durak-hand {
        width: 100%;
        margin: 0;
    }

    body.page-kormkota .kk-durak-opponent {
        grid-row: 2 !important;
    }

    body.page-kormkota .kk-durak-felt {
        grid-row: 3 !important;
    }

    body.page-kormkota .kk-durak-actions {
        grid-row: 4 !important;
    }

    body.page-kormkota .kk-durak-hand {
        grid-row: 5 !important;
    }
}

/* v20260719-durak-fix1: cleaner multiplayer Durak table */
body.page-kormkota .kk-durak-board {
    isolation: isolate;
}

body.page-kormkota .kk-durak-board::after {
    z-index: 0;
}

body.page-kormkota .kk-durak-opponent,
body.page-kormkota .kk-durak-felt,
body.page-kormkota .kk-durak-actions,
body.page-kormkota .kk-durak-hand {
    position: relative;
    z-index: 2;
}

body.page-kormkota .kk-durak-board .kk-durak-player {
    border-radius: 18px;
    backdrop-filter: blur(10px);
}

body.page-kormkota .kk-durak-felt {
    display: grid;
    align-items: center;
}

body.page-kormkota .kk-durak-playfield {
    justify-content: center;
    align-content: center;
    min-height: 15rem;
    border-radius: 28px;
    background: rgba(0, 0, 0, 0.13);
}

body.page-kormkota .kk-durak-pair {
    padding: 0.35rem;
    border-radius: 18px;
    background: rgba(2, 14, 22, 0.38);
}

body.page-kormkota .kk-durak-actions {
    min-height: 4.4rem;
}

body.page-kormkota .kk-durak-actions p {
    line-height: 1.35;
}

@media (max-width: 820px) {
    body.page-kormkota .kk-durak-board::after {
        display: none;
    }

    body.page-kormkota .kk-durak-board {
        gap: 0.7rem;
        padding: 0.75rem !important;
    }

    body.page-kormkota .kk-durak-board > .kk-durak-players {
        grid-template-columns: 1fr;
    }

    body.page-kormkota .kk-durak-opponent {
        display: none;
    }

    body.page-kormkota .kk-durak-felt {
        grid-row: 2 !important;
        grid-template-columns: 1fr !important;
    }

    body.page-kormkota .kk-durak-actions {
        grid-row: 3 !important;
    }

    body.page-kormkota .kk-durak-hand {
        grid-row: 4 !important;
    }
}

/* v20260721-seo-visits1: home daily counter */
body.page-kormkota .kk-home-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

body.page-kormkota .kk-home-metrics > div,
body.page-kormkota .kk-home-metrics > a {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(67, 230, 255, 0.22);
    border-radius: 14px;
    background: rgba(3, 12, 22, 0.62);
}

body.page-kormkota .kk-home-metrics > a {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

body.page-kormkota .kk-home-metrics > a:hover,
body.page-kormkota .kk-home-metrics > a:focus-visible {
    border-color: rgba(125, 255, 104, 0.6);
    background: rgba(7, 30, 28, 0.76);
    transform: translateY(-1px);
}

body.page-kormkota .kk-home-metrics span,
body.page-kormkota .kk-home-metrics small {
    color: #aebbd2;
    font-weight: 800;
}

body.page-kormkota .kk-home-metrics strong {
    color: #7dff68;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1;
}

@media (max-width: 820px) {
    body.page-kormkota .kk-home-metrics {
        grid-template-columns: 1fr;
    }
}

/* v20260722-visit-online2: make the online counter a real clickable card */
body.page-kormkota .kk-home-metrics > .kk-home-metric-card {
    display: grid !important;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(67, 230, 255, 0.28);
    border-radius: 14px;
    background: rgba(3, 12, 22, 0.68);
    color: inherit;
    text-decoration: none !important;
}

body.page-kormkota .kk-home-metrics > a.kk-home-metric-card,
body.page-kormkota .kk-home-metrics > a.kk-home-metric-card:hover,
body.page-kormkota .kk-home-metrics > a.kk-home-metric-card:focus-visible {
    text-decoration: none !important;
}

body.page-kormkota .kk-home-metrics > a.kk-home-metric-card:hover,
body.page-kormkota .kk-home-metrics > a.kk-home-metric-card:focus-visible {
    border-color: rgba(125, 255, 104, 0.68);
    background: rgba(7, 30, 28, 0.82);
    transform: translateY(-1px);
}

/* v20260722-home-chat-gap1: keep chat wide without a huge middle gap */
body.page-kormkota .kk-dashboard--home .kk-layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) !important;
    column-gap: clamp(1rem, 1.6vw, 1.6rem) !important;
}

body.page-kormkota .kk-dashboard--home .kk-monitor-side {
    justify-self: end !important;
    width: min(100%, 320px) !important;
}

body.page-kormkota .kk-dashboard--home .kk-feed {
    width: 100% !important;
}

@media (max-width: 1100px) {
    body.page-kormkota .kk-dashboard--home .kk-layout {
        grid-template-columns: 1fr !important;
        column-gap: 1rem !important;
    }

    body.page-kormkota .kk-dashboard--home .kk-monitor-side {
        justify-self: stretch !important;
        width: 100% !important;
    }
}

/* v20260722-profile-music1: visible profile control for background music */
body.page-kormkota .kk-profile-music-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
}

body.page-kormkota .kk-profile-music-card p {
    margin: 0.25rem 0 0;
    color: #aebbd2;
}

body.page-kormkota .kk-music-toggle-form {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

body.page-kormkota .kk-sound-toggle--music {
    min-height: 2.8rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(67, 230, 255, 0.28);
    border-radius: 12px;
    background: rgba(4, 17, 29, 0.76);
}

@media (max-width: 720px) {
    body.page-kormkota .kk-profile-music-card {
        grid-template-columns: 1fr;
    }

    body.page-kormkota .kk-music-toggle-form {
        justify-content: flex-start;
    }
}

/* v20260722-header-music-loop1: compact global music switch in header */
.kko-music-control {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    padding: 0;
    border: 1px solid rgba(67, 230, 255, 0.42);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(10, 31, 49, 0.96), rgba(8, 72, 70, 0.92));
    color: #7dff68;
    box-shadow: 0 0 0 1px rgba(125, 255, 104, 0.12), 0 10px 22px rgba(0, 0, 0, 0.32);
    cursor: pointer;
    font: 900 1.25rem/1 "Space Grotesk", sans-serif;
}

.kko-music-control[hidden] {
    display: none !important;
}

.kko-music-control::after {
    content: "";
    position: absolute;
    inset: 0.38rem;
    border: 1px solid rgba(125, 255, 104, 0.2);
    border-radius: inherit;
}

.kko-music-control.is-playing {
    color: #eafff8;
    border-color: rgba(125, 255, 104, 0.72);
    box-shadow: 0 0 22px rgba(67, 230, 255, 0.18), 0 16px 34px rgba(0, 0, 0, 0.42);
}

@media (max-width: 720px) {
    .kko-music-control {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
    }
}

/* v20260722-home-center-stats-monitor1: centered homepage counters and monitor cards */
body.page-kormkota .kk-dashboard--home .kk-home-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(0.8rem, 1.4vw, 1.15rem) !important;
    align-items: stretch;
    padding: clamp(1rem, 1.7vw, 1.35rem) !important;
    border: 1px solid rgba(67, 230, 255, 0.24);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(3, 12, 22, 0.74), rgba(4, 22, 27, 0.64)) !important;
}

body.page-kormkota .kk-dashboard--home .kk-home-metrics > .kk-home-metric-card {
    justify-items: center;
    align-content: center;
    min-height: 7rem;
    padding: 1rem 0.9rem !important;
    text-align: center;
    border-color: rgba(67, 230, 255, 0.34) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(67, 230, 255, 0.13), transparent 7rem),
        rgba(4, 13, 25, 0.74) !important;
}

body.page-kormkota .kk-dashboard--home .kk-home-metrics > .kk-home-metric-card--online {
    border-color: rgba(125, 255, 104, 0.38) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(125, 255, 104, 0.13), transparent 7rem),
        rgba(5, 20, 21, 0.78) !important;
}

body.page-kormkota .kk-dashboard--home .kk-home-metrics span {
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

body.page-kormkota .kk-dashboard--home .kk-home-metrics strong {
    color: #eafff8 !important;
    font-size: clamp(2.4rem, 4.2vw, 4.15rem) !important;
    text-shadow: 0 0 18px rgba(67, 230, 255, 0.2);
}

body.page-kormkota .kk-dashboard--home .kk-home-metrics small {
    font-size: 0.82rem;
}

body.page-kormkota .kk-dashboard--home .kk-monitor {
    justify-items: center;
    text-align: center;
}

body.page-kormkota .kk-dashboard--home .kk-monitor-list {
    width: 100%;
}

body.page-kormkota .kk-dashboard--home .kk-monitor-card {
    justify-items: center;
    text-align: center;
    padding: 1rem 0.85rem !important;
}

body.page-kormkota .kk-dashboard--home .kk-monitor-card-top {
    grid-template-columns: 1fr !important;
    justify-items: center;
    gap: 0.6rem !important;
}

body.page-kormkota .kk-dashboard--home .kk-monitor-card-head {
    display: grid !important;
    justify-items: center;
    gap: 0.55rem !important;
}

body.page-kormkota .kk-dashboard--home .kk-monitor-address,
body.page-kormkota .kk-dashboard--home .kk-monitor-address code {
    width: 100%;
    text-align: center;
}

body.page-kormkota .kk-dashboard--home .kk-monitor-players {
    width: 100%;
    justify-content: center !important;
    gap: 0.65rem !important;
}

body.page-kormkota .kk-dashboard--home .kk-monitor-bar {
    width: min(100%, 15rem);
}

@media (max-width: 900px) {
    body.page-kormkota .kk-dashboard--home .kk-home-metrics {
        grid-template-columns: 1fr !important;
    }
}

/* v20260722-monitor-title-center1: centered monitor wording and clickable cards */
body.page-kormkota .kk-dashboard--home .kk-monitor-title,
body.page-kormkota .kk-dashboard--home .kk-monitor-title h2,
body.page-kormkota .kk-dashboard--home .kk-monitor-title p {
    width: 100% !important;
    justify-items: center !important;
    text-align: center !important;
}

body.page-kormkota .kk-dashboard--home .kk-monitor-card[data-card-href] {
    cursor: pointer;
}

body.page-kormkota .kk-dashboard--home .kk-monitor-card[data-card-href]:hover,
body.page-kormkota .kk-dashboard--home .kk-monitor-card[data-card-href]:focus-visible {
    border-color: rgba(67, 230, 255, 0.5) !important;
    transform: translateY(-1px);
}

/* v20260717-messages-bottom-limit1: align messages rail and compact delete controls */
body.page-kormkota .kk-messages-dashboard {
    align-items: flex-start !important;
}

body.page-kormkota .kk-messages-dashboard > .kk-rail--global {
    position: sticky !important;
    top: 0.75rem !important;
    align-self: flex-start !important;
    transform: none !important;
}

body.page-kormkota .kk-messages-dashboard > .kk-social-workspace {
    align-self: flex-start !important;
}

body.page-kormkota .messenger-dialog {
    padding-right: 3.05rem !important;
}

body.page-kormkota .messenger-dialog-delete {
    top: 0.52rem !important;
    right: 0.52rem !important;
    bottom: auto !important;
}

body.page-kormkota .messenger-dialog-delete button {
    display: grid !important;
    width: 1.9rem !important;
    height: 1.9rem !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border-radius: 999px !important;
    font-family: Arial, sans-serif !important;
    font-size: 1.22rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

body.page-kormkota .messenger-dialog-delete button:hover {
    transform: translateY(-1px) scale(1.04);
}

body.page-kormkota .chat-scroll-anchor {
    display: block;
    width: 1px;
    height: 1px;
    min-height: 1px;
    overflow: hidden;
    visibility: hidden;
}

body.page-kormkota .kk-messages-dashboard > .kk-rail--global {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

body.page-kormkota .kk-messages-dashboard > .kk-social-workspace {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

@media (max-width: 820px) {
    body.page-kormkota .kk-messages-dashboard > .kk-rail--global {
        grid-column: 1 !important;
        grid-row: 1 !important;
        position: static !important;
        top: auto !important;
    }

    body.page-kormkota .kk-messages-dashboard > .kk-social-workspace {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}

/* kko-empty-scroll-fix-20260726 */
body.page-kormkota .main-content,
body.page-kormkota .main-content--guest {
  display: block !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
}
body.page-kormkota .kk-dashboard,
body.page-kormkota .kk-dashboard--home,
body.page-kormkota .kk-workspace,
body.page-kormkota .kk-layout,
body.page-kormkota .kk-rail,
body.page-kormkota .kk-rail--global {
  min-height: 0 !important;
  height: auto !important;
}
body.page-kormkota .kk-rail,
body.page-kormkota .kk-rail--global {
  align-self: start !important;
  height: fit-content !important;
}
body.page-kormkota .kk-rail-nav {
  min-height: 0 !important;
  height: auto !important;
}
body.page-kormkota .kk-rail-nav a.kk-rail-link--download,
body.page-kormkota .kk-rail-nav a[href="/downloads"] {
  margin-top: 0.35rem !important;
}

/* kko-reward-fixed-20260726 */
body.page-kormkota > .reward-balls-layer,
.reward-balls-layer {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  z-index: 1400 !important;
  pointer-events: none !important;
  contain: strict !important;
}

/* kko-round-grid-fix-20260727 */
html:has(body.page-kormkota),
body.page-kormkota {
  background-color: #0b1a2a !important;
  background-image:
    linear-gradient(rgba(67, 230, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 230, 255, 0.14) 1px, transparent 1px),
    linear-gradient(180deg, #10263a 0%, #0b1a2a 100%) !important;
  background-size: 28px 28px, 28px 28px, auto !important;
  background-attachment: fixed !important;
}
body.page-kormkota .header-inner--guest,
body.page-kormkota .kk-section,
body.page-kormkota .kk-panel,
body.page-kormkota .kk-rail,
body.page-kormkota .kk-topbar,
body.page-kormkota .kk-page-titlebar,
body.page-kormkota .page-hero,
body.page-kormkota .kk-monitor-card,
body.page-kormkota .kk-stat,
body.page-kormkota .kk-mini-chat-list article,
body.page-kormkota .kk-news-list article,
body.page-kormkota .kk-news-card,
body.page-kormkota .kk-news-empty,
body.page-kormkota .kk-news-editor,
body.page-kormkota .kk-news-board,
body.page-kormkota button,
body.page-kormkota input,
body.page-kormkota textarea,
body.page-kormkota select {
  border-radius: 18px !important;
}
body.page-kormkota .kk-section,
body.page-kormkota .kk-panel,
body.page-kormkota .kk-rail,
body.page-kormkota .kk-topbar,
body.page-kormkota .kk-page-titlebar,
body.page-kormkota .page-hero {
  border-radius: 22px !important;
}
body.page-kormkota .kk-monitor-bar,
body.page-kormkota .kk-monitor-bar i {
  border-radius: 999px !important;
}

/* Layout wrappers: bg without visible sharp box */
body.page-kormkota .kk-dashboard,
body.page-kormkota .kk-dashboard--home,
body.page-kormkota .kk-workspace,
body.page-kormkota .kk-layout,
body.page-kormkota .kk-feed,
body.page-kormkota .kk-side,
body.page-kormkota .kk-monitor-side,
body.page-kormkota .kk-social-workspace,
body.page-kormkota .kk-news-dashboard,
body.page-kormkota .kk-chat-dashboard,
body.page-kormkota section.kk-home-stats,
body.page-kormkota .kk-home-stats {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}