/* ===== Общие сбросы и шрифты ===== */
.easteregg-page { position: relative; display: grid; place-items: center; min-height: 100vh; margin: 0; padding: 24px; background: #000; color: #fff; overflow: hidden; }
.easteregg-content { display: grid; justify-items: center; gap: 14px; width: min(92vw, 900px); }
.easteregg-image { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; }
.easteregg-content p { margin: 0; color: rgba(255,255,255,.82); font-family: 'MainFont', sans-serif; font-size: 1.05rem; }
.easteregg-back { position: fixed; top: 18px; left: 18px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 25px; line-height: 1; text-decoration: none; }
.easteregg-back:hover { background: #fff; color: #111; }
.bruh-glitching { background: #220000; }
.bruh-glitching .easteregg-content { filter: blur(3px) contrast(1.8) saturate(2.2); transform: translate(2vw, -1vh) rotate(-7deg) skew(12deg, -8deg) scale(1.18, .86); }
.bruh-glitching .easteregg-image { filter: blur(10px) hue-rotate(110deg) contrast(2.4) saturate(2.4); transform: scale(1.42, .64) skew(18deg, -12deg); }
.bruh-glitching .easteregg-back { filter: blur(3px) hue-rotate(160deg); transform: translate(14px, 8px) rotate(19deg) skewX(-12deg) scale(1.25, .72); }
.bruh-glitching::after { content: ''; position: fixed; inset: 9% -12% 11%; border: 18px solid rgba(255,0,0,.22); transform: rotate(13deg) skewX(-18deg) scaleY(.72); pointer-events: none; }
@font-face {
    font-family: 'Ponter Bold';
    src: url('../fonts/ponterbold.ttf?v=1') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MainFont';
    src: url('../fonts/main.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ===== Светлая тема ===== */
:root {
    --color-bg: #ffffff;
    --color-bg-secondary: #f6f6f6;
    --color-bg-elevated: #ffffff;
    --color-bg-hover: #f0f0f0;
    --color-text: #000000;
    --color-text-secondary: #666666;
    --color-text-muted: #888888;
    --color-border: #000000;
    --color-border-soft: #dddddd;
    --color-accent: #000000;
    --color-accent-contrast: #ffffff;
    --color-danger: #e74c3c;
    --color-link: #1a73e8;
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-shadow: rgba(0, 0, 0, 0.12);
    --color-input-bg: #ffffff;
    --color-notification-bg: #222222;
    --color-accent-hover: #333333;
    --glass-bg: rgba(255, 255, 255, .68);
    --glass-bg-strong: rgba(255, 255, 255, .82);
    --glass-border: rgba(255, 255, 255, .78);
    --glass-shadow: 0 12px 34px rgba(22, 28, 45, .14), inset 0 1px 0 rgba(255,255,255,.9);
    color-scheme: light;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Исключает синюю "вспышку"-подсветку при тапе на мобильных браузерах (Android Chrome) --
       без этого любой тап на картинку/кнопку/ссылку подсветивался синим прямоугольником. */
    -webkit-tap-highlight-color: transparent;
}

html {
    background: var(--color-bg);
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    transition: background 0.25s ease, color 0.25s ease;
}

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== Навигация ===== */
.navbar {
    background: var(--glass-bg-strong);
    border-bottom: 1px solid rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
    box-shadow: 0 4px 18px rgba(30,35,50,.06), inset 0 -1px 0 rgba(255,255,255,.7);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    width: 100%;
}

.brand {
    flex: 0 0 auto;
}

.logo-icon {
    height: 36px;
    vertical-align: middle;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
}

.nav-avatar img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border-soft);
}

.nav-logout-form {
    margin: 0;
}

.nav-logout {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.95rem;
    font-family: 'MainFont', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.nav-logout:hover {
    text-decoration: underline;
}

.logout-icon {
    width: 20px;
    height: 20px;
}

/* ===== Шрифты для заголовков и кнопок ===== */
h1, h2, h3, h4, h5, h6,
button,
input[type="submit"],
.auth-form button,
.create-post button[type="submit"],
.settings-form button,
.post-actions button,
.comment-form button,
.nav-logout,
.author-link,
.brand {
    font-family: 'MainFont', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Обычный текст – системный */
p, span, .date, .comment, .alert, .notification, input, textarea, .auth-form p, .auth-form a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.like-count,
.comment-count {
    font-weight: bold;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ===== Поиск (статичный) ===== */
.search-wrapper {
    position: relative;
    flex: 0 1 auto;
    margin: 0 10px;
}

.search-form {
    display: flex;
    align-items: center;
}

.search-box.static-search {
    width: 260px;
    background: var(--color-bg-hover);
    border: 1px solid transparent;
    border-radius: 28px;
    padding: 0 12px;
    height: 40px;
    display: flex;
    align-items: center;
    transition: border-color 0.2s, background 0.2s;
}

.search-box.static-search:focus-within {
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.search-box.static-search .search-input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.95rem;
    padding: 0 0 0 8px;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--color-text);
}

.search-box.static-search .search-icon {
    opacity: 0.6;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Подсказки поиска */
.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    display: none;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    padding: 6px 0;
}

.search-suggestions.active {
    display: block;
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: var(--color-text);
}

.search-suggestion-item:hover {
    background: var(--color-bg-secondary);
}

.search-suggestion-item img {
    flex-shrink: 0;
}

.search-suggestion-item img.avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border-soft);
}

.search-suggestion-item img.pin-icon {
    width: 16px;
    height: 16px;
    margin-left: 0;
}

.search-suggestion-item > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.search-suggestion-item .suggestion-name {
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.search-suggestion-item .suggestion-name > img.pin-icon {
    flex-shrink: 0;
}

.search-suggestion-item .suggestion-username {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Страницы авторизации ===== */
.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

.auth-form {
    max-width: 400px;
    width: 100%;
    padding: 25px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-elevated);
}

.auth-form h2 {
    margin-bottom: 20px;
    text-align: center;
}

.auth-form input,
.auth-form button {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 1rem;
}

.auth-form button {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    border: none;
    cursor: pointer;
    border-radius: 8px;
    padding: 12px;
    font-weight: bold;
    transition: background 0.2s;
}

.auth-form button:hover {
    background: var(--color-accent-hover);
}

.auth-form p {
    margin-top: 15px;
    text-align: center;
}

.auth-form a {
    color: var(--color-text);
    font-weight: bold;
}

/* ===== Авторизация: motion-эффекты, "запомнить меня", шапка регистрации, зафиксированная кнопка ===== */

.auth-form-motion {
    /* Фиксируем высоту карточки через flex-колонку, чтобы кнопка отправки всегда была
       в низу формы с фиксированным отступом, даже если полей мало или много --
       без этого при коротких формах кнопка бы оставалась сразу под полями, а не в нижней части. */
    display: flex;
    flex-direction: column;
}

.auth-form-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.auth-fields {
    display: flex;
    flex-direction: column;
}

.auth-submit-anchor {
    /* Кнопка отправки всегда в нижней части формы, с фиксированным отступом сверху --
       margin-top: auto отталкивает её от остальных полей вниз внутри flex-колонки, а не прижимается
       вплотную к последнему полю. */
    margin-top: 20px;
    padding-top: 4px;
}

.auth-submit-anchor button {
    margin: 0;
}

.remember-me-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px;
    cursor: pointer;
    font-size: 0.95rem;
    user-select: none;
}

.remember-me-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.auth-register-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    text-align: center;
}

.auth-register-logo {
    height: 44px;
    width: auto;
}

.auth-register-greeting {
    font-family: 'MainFont', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

/* Плавно проявляющиеся элементы -- убрано: при сбое загрузки анимации поля оставались
   с opacity: 0 навсегда (белый экран). Оставляем классы для совместимости с разметкой,
   но без визуального эффекта. */
.auth-field-motion {
    opacity: 1;
    transform: none;
}

/* ===== Создание поста ===== */
.create-post {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-elevated);
}

.create-post textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 1rem;
    resize: vertical;
}

.file-upload {
    margin: 10px 0;
}

.file-upload input[type="file"] {
    display: none;
}

.upload-label {
    cursor: pointer;
    display: inline-block;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.2s;
}

.upload-label:hover {
    background: var(--color-bg-hover);
}

.upload-label img {
    width: 28px;
    height: 28px;
}

.create-post button[type="submit"] {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s;
}

.create-post button[type="submit"]:hover {
    background: var(--color-accent-hover);
}

body:has(.voice-test) { background: #080808; color: #fff; }
body:has(.voice-test) .navbar, body:has(.voice-test) .fab-container { display: none; }
body:has(.voice-test) main, body:has(.voice-test) main > .container { padding: 0; margin: 0; max-width: none; }
.voice-test { position: relative; isolation: isolate; min-height: 100vh; box-sizing: border-box; width: 100%; margin: 0; padding: 30px 30px 104px; background: #080808; color: #fff; overflow: hidden; }
.voice-test::before { display: none; }
.voice-vortex { position: fixed; inset: 0; z-index: 0; overflow: hidden; opacity: .22; pointer-events: none; }
.voice-vortex canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.voice-lobby-content { position: relative; z-index: 1; }
.voice-animated-title { display: flex; justify-content: center; min-height: 1.5em; margin-bottom: 24px; color: rgba(255,255,255,.9); font-family: 'MainFont', sans-serif; font-size: clamp(1.15rem, 3vw, 1.7rem); font-weight: 400; letter-spacing: 0; }
.voice-animated-title span { display: inline-block; min-width: .18em; font-variation-settings: 'wght' 400; transition: font-variation-settings .72s cubic-bezier(.34,1.56,.64,1), transform .72s ease, opacity .72s ease; }
.voice-animated-title span.is-active { font-variation-settings: 'wght' 800; transform: translateY(-2px); opacity: 1; }
.voice-animated-title span.is-dim { opacity: .62; }
.voice-topbar { display: none; }
.voice-kicker { color: #a8a8a8; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.voice-test h1 { margin: 3px 0 0; font-size: clamp(1.4rem, 3vw, 2.3rem); }
.voice-status { margin: 0; color: #9d9d9d; font-size: .82rem; }
.voice-lobby { position: relative; z-index: 1; width: min(100%, 520px); margin: 16vh auto 0; text-align: center; }
.voice-lobby-mark { margin-bottom: 24px; color: rgba(255,255,255,.16); font-size: .7rem; font-weight: 700; letter-spacing: .38em; }
.voice-back { position: absolute; top: 24px; left: 24px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 8px 11px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.78); cursor: pointer; font: inherit; font-size: .8rem; }
.voice-back:hover { background: rgba(255,255,255,.12); color: #fff; }
.voice-back[hidden] { display: none; }
.voice-back span:first-child { font-size: 1.1rem; line-height: .8; }
.voice-lobby-actions { display: grid; gap: 10px; justify-items: center; }
.voice-primary, .voice-secondary, .voice-reset, .voice-mic { border: 1px solid #d8d8d8; border-radius: 8px; padding: 11px 16px; background: #fff; color: #111; cursor: pointer; font: inherit; font-weight: 700; }
.voice-join { display: flex; gap: 8px; margin-top: 12px; }
.voice-join input { min-width: 0; flex: 1; border: 1px solid #555; border-radius: 8px; padding: 11px; background: #181818; color: #fff; text-transform: uppercase; }
.voice-join .voice-secondary { background: #202020; color: #fff; border-color: #555; }
.voice-room { width: min(100%, 1100px); margin: 0 auto; }
.voice-room-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; color: #aaa; }
.voice-code-label strong { color: #fff; letter-spacing: .12em; }
.voice-room-hint { font-size: .78rem; }
.voice-audio-unlock { border: 1px solid #777; border-radius: 8px; padding: 8px 11px; background: #fff; color: #111; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 700; }
.voice-settings, .voice-mic, .voice-reset { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 42px; padding: 8px; border: 1px solid #cfcfcf; border-radius: 9px; background: #ededed; color: #111; cursor: pointer; }
.voice-settings img, .voice-mic img { width: 24px; height: 24px; object-fit: contain; }
.voice-reset { background: #e53935; border-color: #e53935; }
.voice-reset img { width: 24px; height: 24px; object-fit: contain; }
.voice-peer-name { font-family: 'MainFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700; text-align: center; }
.voice-settings-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,.55); }
.voice-settings-modal[hidden] { display: none; }
.voice-settings-sheet { position: relative; display: grid; gap: 14px; width: min(380px, 100%); padding: 24px; border-radius: 12px; background: #fff; color: #111; }
.voice-settings-sheet h2 { margin: 0; font-size: 1.15rem; }
.voice-settings-sheet label { display: grid; gap: 6px; font-size: .84rem; font-weight: 700; }
.voice-settings-sheet select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 7px; background: #fff; color: #111; font: inherit; }
.voice-settings-close { position: absolute; top: 7px; right: 10px; border: 0; background: transparent; color: #555; font-size: 1.5rem; cursor: pointer; }
#voice-device-status { margin: 0; color: #666; font-size: .78rem; }
.voice-audio-unlock[hidden] { display: none; }
.voice-peers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.voice-peer { position: relative; display: grid; grid-template-rows: 1fr auto; min-height: 210px; padding: 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background-color: rgba(20,20,20,.72); background-position: center; background-size: cover; background-blend-mode: multiply; color: #fff; cursor: pointer; overflow: hidden; }
.voice-peer-avatar { align-self: end; justify-self: center; width: 108px; height: 108px; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; object-fit: cover; box-shadow: 0 3px 14px rgba(0,0,0,.28); transition: transform .12s ease; }
.voice-peer-name { align-self: end; justify-self: center; width: 100%; margin-top: 14px; overflow: hidden; color: #fff; font-size: .9rem; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0,0,0,.55); white-space: nowrap; }
.voice-peer-speaking { border-color: #35c759; box-shadow: inset 0 0 0 2px #35c759, 0 0 0 1px rgba(53,199,89,.28); }
.voice-peer-speaking .voice-peer-avatar { transform: scale(1.025); }
.voice-bottom-menu { position: fixed; right: auto; bottom: 18px; left: 50%; z-index: 100; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0; background: transparent; transform: translateX(-50%); }
.voice-bottom-menu[hidden] { display: none; }
.voice-bottom-menu .voice-reset, .voice-bottom-menu .voice-mic, .voice-bottom-menu .voice-settings { width: 58px; height: 58px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.voice-bottom-menu .voice-reset { background: #e53935; border-color: #e53935; }
.voice-bottom-menu .voice-reset img { filter: none; }
.voice-bottom-menu .voice-mic, .voice-bottom-menu .voice-settings { background: #fff; border-color: #fff; }
.voice-bottom-menu .voice-mic img, .voice-bottom-menu .voice-settings img { width: 28px; height: 28px; filter: brightness(0); }
.voice-bottom-menu .voice-mic.is-on { background: #eaf8ed; border-color: #d4f1db; }
.voice-profile-popover { position: fixed; top: 50%; left: 50%; z-index: 200; display: grid; width: min(280px, calc(100% - 32px)); gap: 7px; padding: 22px; border: 1px solid #444; border-radius: 12px; background: #171717; color: #fff; text-align: center; transform: translate(-50%, -50%); box-shadow: 0 15px 55px rgba(0,0,0,.55); }
.voice-profile-popover[hidden] { display: none; }
.voice-popover-close { position: absolute; top: 7px; right: 10px; border: 0; background: transparent; color: #aaa; font-size: 1.5rem; cursor: pointer; }
.voice-profile-avatar { width: 76px; height: 76px; margin: 0 auto 4px; border-radius: 50%; object-fit: cover; }
.voice-profile-popover span { color: #aaa; font-size: .82rem; }
.voice-follow-button { margin-top: 9px; }
.voice-test audio { position: fixed; width: 1px; height: 1px; opacity: .01; pointer-events: none; }
@media (max-width: 560px) { .voice-test { padding: 20px 14px 94px; } .voice-back { top: 14px; left: 14px; } .voice-peers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .voice-peer { min-height: 168px; padding: 15px 10px; } .voice-peer-avatar { width: 84px; height: 84px; } .voice-bottom-menu { right: auto; bottom: 14px; gap: 10px; transform: translateX(-50%); } .voice-bottom-menu .voice-reset, .voice-bottom-menu .voice-mic, .voice-bottom-menu .voice-settings { width: 56px; height: 56px; } }
/* ===== Карточка поста ===== */
.post {
    border-bottom: 1px solid var(--color-border-soft);
    padding: 20px 0;
}

.post:last-child {
    border-bottom: none;
}

/* Белая карточка поста на странице профиля (вместо обычного разделителя ленты) */
.post.post-card {
    background: var(--color-bg-elevated);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-bottom: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.post.post-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .post.post-card {
        transition: none;
    }
    .post.post-card:hover {
        transform: none;
    }
}

.post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.author-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text);
    text-decoration: none;
}

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

.avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border-soft);
}

.avatar-large {
    width: 100%;
    max-width: 150px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border);
}

.avatar-wrapper {
    display: inline-block;
    max-width: 150px;
    max-height: 150px;
    overflow: hidden;
    border-radius: 50%;
}

.date {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    margin-left: auto;
}

.post-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}

.download-btn,
.delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    opacity: 0.5;
    transition: opacity 0.2s, background 0.2s;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.download-btn:hover,
.delete-btn:hover {
    opacity: 1;
    background: var(--color-bg-hover);
}

.download-btn img,
.delete-btn img {
    width: 20px;
    height: 20px;
}

.post-image {
    margin: 10px 0;
    cursor: pointer;
}

.post-image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    border: 1px solid var(--color-border-soft);
    transition: opacity 0.2s;
}

.post-image img:hover {
    opacity: 0.9;
}

.post-actions {
    margin-top: 10px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.post-actions button,
.post-actions a {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.95rem;
    border-radius: 6px;
    padding: 4px 8px;
    transition: background 0.2s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.post-actions button:hover,
.post-actions a:hover {
    background: var(--color-bg-hover);
}

.post-actions img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* ===== Пины (увеличенные) ===== */
.pin-icon-small {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 2px;
    vertical-align: middle;
}

.verif-icon {
    width: 24px;
    height: 24px;
    margin-left: 4px;
    vertical-align: middle;
}

.pin-icon-large {
    width: 28px;
    height: 28px;
}

/* Пины в профиле вокруг аватарки */
.profile-avatar-wrap {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

.profile-pins-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pin-orbital {
    position: absolute;
    width: 28px;
    height: 28px;
    pointer-events: auto;
}

/* Позиции для 1, 2, 3 пинов вокруг аватарки, равномерно распределены */
/* 1 пин - сверху по центру */
.pin-count-1 .pin-pos-0 {
    top: -8px;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
}

/* 2 пина - по бокам аватарки */
.pin-count-2 .pin-pos-0 {
    top: 50%;
    left: -8px;
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
}
.pin-count-2 .pin-pos-1 {
    top: 50%;
    right: -8px;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
}

/* 3 пина - треугольником: один сверху, два по бокам */
.pin-count-3 .pin-pos-0 {
    top: -8px;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
}
.pin-count-3 .pin-pos-1 {
    top: 50%;
    left: -8px;
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
}
.pin-count-3 .pin-pos-2 {
    top: 50%;
    right: -8px;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
}

/* ===== Профиль ===== */
.profile.profile-custom { position: relative; }
.profile-joke-sticker { position: absolute; top: 150px; right: max(12px, calc((100% - 900px) / 2)); z-index: 0; width: 220px; height: 220px; border: 0; border-radius: 0; object-fit: fill; opacity: .12; transform: none; box-shadow: none; pointer-events: none; }
.profile-header, .profile-custom > .profile-posts, .profile-custom > .profile-actions { position: relative; z-index: 1; }
.profile-header {
    text-align: center;
    padding: 30px 0 20px;
}

.profile-header .btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 18px;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s;
    font-family: 'MainFont', sans-serif;
}

.profile-header .btn:hover {
    background: var(--color-accent-hover);
}

.profile-stats {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    margin: 16px auto 8px;
    padding: 10px 4px;
    max-width: 360px;
    background: rgba(0, 0, 0, 0.035);
    border-radius: 16px;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    background: none;
    border: none;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    font-family: 'MainFont', sans-serif;
    color: inherit;
    padding: 6px 8px;
    transition: opacity 0.15s ease;
}

.profile-stat:last-child {
    border-right: none;
}

.profile-stat:hover {
    opacity: 0.65;
}

.profile-stat-static {
    cursor: default;
}

.profile-stat-static:hover {
    opacity: 1;
}

.profile-stat-count {
    font-size: 1.3rem;
    font-weight: 700;
    font-family: 'MainFont', sans-serif;
    line-height: 1.2;
}

.profile-stat-label {
    font-size: 0.72rem;
    font-family: 'MainFont', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.65;
}

.follow-btn {
    border: none;
    cursor: pointer;
}

.follow-btn.following {
    background: var(--color-text-secondary);
}

.follow-list-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.follow-list-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
}

.follow-list-panel {
    position: relative;
    background: var(--color-bg-elevated);
    border-radius: 12px;
    width: 90%;
    max-width: 380px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.follow-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-soft);
    font-weight: 700;
}

.follow-list-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-secondary);
}

.follow-list-body {
    overflow-y: auto;
    padding: 8px 0;
}

.follow-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    text-decoration: none;
    color: inherit;
}

.follow-list-row:hover {
    background: var(--color-bg-secondary);
}

.follow-list-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.follow-list-username {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-left: auto;
}

.follow-list-empty {
    text-align: center;
    padding: 24px 0;
    color: var(--color-text-muted);
}

.no-comments-trigger { display: grid; place-items: center; width: min(100%, 320px); margin: 28px auto; padding: 24px; border: 0; background: transparent; cursor: pointer; transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.no-comments-trigger img { display: block; width: 150px; height: 150px; object-fit: contain; transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.no-comments-trigger span { display: block; margin-top: 10px; color: var(--color-text-secondary); font-size: .9rem; }
.easteregg-shake-1 .no-comments-trigger img { transform: rotate(-5deg) scale(1.08); }
.easteregg-shake-2 .no-comments-trigger img { transform: rotate(8deg) scale(1.16) skewX(-4deg); }
.easteregg-shake-3 .no-comments-trigger img { transform: rotate(-13deg) scale(1.23) skew(5deg, -3deg); }
.easteregg-shake-4 .no-comments-trigger img { transform: translateY(12px) rotate(17deg) scale(1.3) skew(-8deg, 4deg); }
.easteregg-shake-5 .no-comments-trigger img { transform: translateY(26px) rotate(-22deg) scale(1.38) skew(10deg, -6deg); }
.easteregg-shake-5.easteregg-chaos > * { transform: translate(3vw, 2vh) rotate(-4deg) skewX(5deg) scale(1.04); filter: hue-rotate(25deg) saturate(1.5); }
.easteregg-shake-6.easteregg-chaos > * { transform: translate(-4vw, 4vh) rotate(7deg) skew(8deg, -3deg) scale(1.08, .96); filter: hue-rotate(75deg) saturate(1.9); }
.easteregg-shake-7.easteregg-chaos > * { transform: translate(5vw, -3vh) rotate(-11deg) skew(-12deg, 7deg) scale(.94, 1.12); filter: hue-rotate(140deg) contrast(1.4); }
.easteregg-shake-8.easteregg-chaos > * { transform: translate(-6vw, 6vh) rotate(15deg) skew(16deg, -10deg) scale(1.16, .88); filter: hue-rotate(210deg) saturate(2.4) contrast(1.3); }
.easteregg-shake-9.easteregg-chaos > * { transform: translate(7vw, -5vh) rotate(-21deg) skew(-21deg, 13deg) scale(.86, 1.2); filter: hue-rotate(290deg) saturate(2.8) contrast(1.6); }
.easteregg-chaos .easteregg-image { transform-origin: center; }
.easteregg-shake-6 .no-comments-trigger img { transform: translateY(44px) rotate(28deg) scale(1.48) skew(-13deg, 8deg); }
.easteregg-shake-7 .no-comments-trigger img { transform: translateY(64px) rotate(-36deg) scale(1.6) skew(17deg, -11deg); }
.easteregg-shake-8 .no-comments-trigger img { transform: translateY(88px) rotate(45deg) scale(1.75) skew(-21deg, 15deg); filter: hue-rotate(35deg); }
.easteregg-shake-9 .no-comments-trigger img { transform: translateY(116px) rotate(-56deg) scale(1.95) skew(27deg, -20deg); filter: hue-rotate(90deg) saturate(1.8); }
.easteregg-lock { overflow: hidden !important; background: #d40000 !important; cursor: wait; }
.easteregg-lock *, .easteregg-lock button, .easteregg-lock a { pointer-events: none !important; }
.easteregg-lock .no-comments-trigger img { filter: grayscale(1) contrast(2) brightness(.7); transform: translateY(145px) rotate(68deg) scale(2.15) skew(-34deg, 26deg); }

/* ===== Комментарии ===== */
.comments {
    margin-top: 20px;
}

.comment {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.comment .author-link {
    font-weight: bold;
}

.comment-form {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.comment-form textarea {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 1rem;
    resize: vertical;
}

.comment-form button {
    background: var(--color-accent);
    border: none;
    padding: 0 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s;
}

.comment-form button:hover {
    background: var(--color-accent-hover);
}

.comment-form button img {
    width: 24px;
    height: 24px;
    filter: invert(1);
}

/* ===== Поле ввода комментария всегда прикреплено к низу экрана (требование:
   "поле ввода комментария всегда было видно"). Сам ответ-формы к отдельным
   комментариям (comments.js) остаются встроенными в поток -- там .comment-form-fixed не добавляется. */
.comment-form-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    margin: 0;
    padding: 10px max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--color-border-soft);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

/* Запас снизу страницы, чтобы фиксированная форма не перекрывала последние комментарии. */
.post-detail-with-fixed-comment-bar {
    padding-bottom: 90px;
}

/* ===== Уведомления ===== */
#notification-container {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
    width: min(390px, calc(100vw - 28px));
    pointer-events: none;
}

.notification {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 11px 12px 11px 16px;
    border: 1px solid var(--glass-border);
    border-left: 4px solid #777;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
    box-shadow: var(--glass-shadow);
    border-radius: 14px;
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.35;
    animation: noticeIn 0.28s ease-out;
    pointer-events: auto;
}
.notification.success, .alert-success { border-left-color: #20a464; }
.notification.danger, .notification.error, .alert-danger, .alert-error { border-left-color: #e05252; }
.notification.warning, .alert-warning { border-left-color: #e3a72f; }
.notification.info, .alert-info { border-left-color: #4889d8; }
.notice-message { flex: 1; min-width: 0; }
.notice-close { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0,0,0,.06); color: var(--color-text-secondary); cursor: pointer; font-size: 18px; line-height: 1; }
.notice-close:hover { background: rgba(0,0,0,.12); color: var(--color-text); }
.notification.is-closing, .alert.is-closing { animation: noticeOut .26s ease-in forwards; pointer-events: none; }

@keyframes noticeIn { from { opacity: 0; transform: translate3d(18px, -5px, 0) scale(.97); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes noticeOut { to { opacity: 0; transform: translate3d(18px, -5px, 0) scale(.97); } }

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.alert {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 16px;
    margin: 10px 0;
    border: 1px solid var(--glass-border);
    border-left: 4px solid #777;
    border-radius: 12px;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 7px 22px rgba(22,28,45,.08), inset 0 1px 0 rgba(255,255,255,.85);
}
.alert-success { background: #e6ffe6; }
.alert-danger { background: #ffe6e6; }
.alert-warning { background: #fff3cd; }

.page-loader { position: fixed; inset: 0; z-index: 10004; display: grid; place-items: center; background: rgba(255,255,255,.76); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.page-loader[hidden] { display: none; }
.page-loader img { width: 52px; height: 52px; animation: loader-spin 1.2s linear infinite; }
@keyframes loader-spin { to { transform: rotate(360deg); } }

/* ===== Настройки ===== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.settings-page {
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: 100px;
}

.settings-title {
    margin: 24px 0 20px;
    font-size: 1.5rem;
}

.settings-header-row {
    display: flex;
    align-items: center;
    padding-top: 16px;
}

.settings-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 10px 8px 6px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
    margin-left: -6px;
}

.settings-back-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}

.settings-back-btn svg {
    flex-shrink: 0;
}

/* ===== Переключатель темы (светлая/тёмная) ===== */
.theme-switch-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 4px 0;
}

.settings-tabs {
    display: flex;
    gap: 6px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 18px;
}

.settings-tab {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    padding: 10px 6px;
    border-radius: 9px;
    font-family: 'MainFont', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s ease, color 0.15s ease;
}

.settings-tab.active {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

.settings-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.settings-tab-panel[hidden] {
    display: none;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.settings-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-soft);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    min-width: 0;
}

.settings-label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 0.95rem;
}

.settings-hint {
    font-weight: normal;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.settings-empty {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.settings-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border-soft);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--color-input-bg);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.settings-input:focus {
    outline: none;
    border-color: var(--color-border);
    background: var(--color-bg-elevated);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* Загрузка аватара */
.avatar-upload {
    position: relative;
    display: block;
    width: 110px;
    height: 110px;
    margin: 0 auto;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid var(--color-border);
}

.avatar-upload-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-upload-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.55);
    color: var(--color-accent-contrast);
    font-size: 0.7rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 6px;
}

.avatar-upload-icon {
    width: 20px;
    height: 20px;
    filter: invert(1);
}

.avatar-upload:hover .avatar-upload-overlay,
.avatar-upload:focus-within .avatar-upload-overlay {
    opacity: 1;
}

/* ===== Карточка компактного предпросмотра профиля (первая карточка в кастомизации) ===== */
.profile-preview-card {
    padding: 0;
    overflow: hidden;
}

.profile-preview-bg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 26px 16px 20px;
    background: radial-gradient(circle at 30% 20%, rgb(65,70,72), rgb(49,54,56));
    transition: background 0.4s ease;
}

.profile-preview-avatar-wrap {
    position: relative;
    width: 74px;
    height: 74px;
}

.profile-preview-avatar {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-bg-elevated);
    display: block;
}

.profile-preview-pins {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
}

.profile-preview-pin {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.profile-preview-name {
    color: var(--color-accent-contrast);
    font-family: 'MainFont', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 6px;
    text-align: center;
}

.profile-preview-username {
    color: rgba(255,255,255,0.75);
    font-size: 0.82rem;
}

.profile-preview-caption {
    text-align: center;
    padding: 10px 0 14px;
    margin: 0;
}

/* ===== Выбор пинов: сетка с вертикальной прокруткой и лимитом 3 ===== */
.pins-scroller {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 12px 10px;
    max-width: 100%;
    max-height: 360px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 4px 16px;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    contain: layout;
}

.pins-scroller::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
}

.pin-row {
    cursor: pointer;
    display: block;
    min-width: 0;
}

.pin-row-option {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Увеличили ряд с пинами (эмодзи) в настройках -- было 72px, стало 96px --
       чтобы картинки были заметнее и по ним было проще подать пальцем на телефоне. */
    width: 96px;
    height: 96px;
    border-radius: 22px;
    padding: 14px;
    background: transparent;
    box-shadow: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.pin-row:hover .pin-row-option {
    background: var(--color-bg-hover);
}

/* Выбранный пин увеличивается в масштабе -- требование "выделяются увеличенным масштабом" */
.pin-checkbox-input:checked + .pin-row-option {
    background: var(--color-bg-elevated);
    box-shadow: inset 0 0 0 2px var(--color-accent), 0 6px 14px rgba(0,0,0,0.16);
    transform: scale(1.1);
    z-index: 1;
}

.pin-checkbox-input:checked + .pin-row-option::after {
    content: '';
    position: absolute;
    top: -5px;
    right: 10px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-bg-elevated);
    display: flex;
}

.pin-checkbox-input:checked + .pin-row-option::before {
    content: '';
    position: absolute;
    top: -1.5px;
    right: 16.5px;
    width: 6px;
    height: 3px;
    border-left: 2px solid var(--color-accent-contrast);
    border-bottom: 2px solid var(--color-accent-contrast);
    transform: rotate(-45deg);
    z-index: 2;
}

.pin-checkbox-input:focus-visible + .pin-row-option {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.pin-row-img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.pins-limit-warning {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--color-bg-secondary);
    color: var(--color-danger);
    font-size: 0.85rem;
    border: 1px solid var(--color-danger);
}

.pins-limit-warning-shake {
    animation: pinsLimitShake 0.4s ease;
}

@keyframes pinsLimitShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .pins-limit-warning-shake {
        animation: none;
    }
}

/* ===== Выбор градиента (фон профиля) ===== */
.gradient-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 14px 10px;
}

.gradient-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 2px;
    border-radius: 14px;
    transition: background 0.2s ease, transform 0.15s ease;
}

.gradient-option:hover {
    transform: translateY(-2px);
}

.gradient-swatch {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: block;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    transition: box-shadow 0.25s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gradient-option input[type="radio"]:checked ~ .gradient-swatch {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 6px 16px rgba(0,0,0,0.22);
}

.gradient-option input[type="radio"]:focus-visible ~ .gradient-swatch {
    outline: 2px solid #666;
    outline-offset: 3px;
}

.gradient-swatch-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gradient-swatch-check svg {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}

.gradient-option input[type="radio"]:checked ~ .gradient-swatch .gradient-swatch-check {
    opacity: 1;
    transform: scale(1);
}

.gradient-name {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.2;
}


/* ===== Панель сохранения (фиксированная снизу) ===== */
.settings-save-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 16px;
    display: flex;
    justify-content: center;
    padding: 0 16px;
    z-index: 500;
    pointer-events: none;
}

.settings-save-bar[hidden] {
    display: none;
}

.btn-save {
    pointer-events: auto;
    width: 100%;
    max-width: 448px;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    border: none;
    border-radius: 14px;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: background 0.2s, transform 0.15s;
}

.btn-save:hover {
    background: var(--color-accent-hover);
}

.btn-save:active {
    transform: scale(0.98);
}

/* ===== Лайтбокс ===== */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    cursor: pointer;
    overflow: hidden;
}

.lightbox-viewport {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    touch-action: none;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #ddd;
    cursor: default;
    /* Зум/пан реализован через CSS transform (колесо мыши, pinch, кнопки +/-) --
       сама картинка остаётся в своёй естественной вёрстке, трансформация накладывается сверху. */
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

.lightbox-content.zoomed {
    cursor: grab;
}

.lightbox-content.panning {
    cursor: grabbing;
}

.lightbox-zoom-controls {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    background: rgba(20, 20, 20, 0.65);
    padding: 8px;
    border-radius: 14px;
    z-index: 10001;
}

.lightbox-zoom-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.lightbox-zoom-btn:hover {
    background: rgba(255, 255, 255, 0.24);
}

#lightbox-zoom-reset {
    font-size: 0.8rem;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 10001;
}

.lightbox-close:hover {
    color: #ccc;
}

/* ===== FAB ===== */
.fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
}

.fab-toggle {
    display: none;
}

.fab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-accent);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    user-select: none;
}

.fab-btn img {
    width: 32px;
    height: 32px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: invert(1);
}

.fab-toggle:checked + .fab-btn img {
    transform: rotate(45deg);
}

.fab-mobile-only { display: none; }
.fab-actions {
    position: absolute;
    bottom: 70px;
    right: 0;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

.fab-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    text-decoration: none;
    color: var(--color-text);
    transform: scale(0.4);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease;
    pointer-events: none;
}

.fab-action img {
    width: 24px;
    height: 24px;
}
.fab-call-action { position: relative; }
.fab-new-badge { position: absolute; top: -6px; right: -7px; padding: 2px 4px; border-radius: 4px; background: #e53935; color: #fff; font-size: 8px; font-weight: 800; line-height: 1; letter-spacing: .02em; }

.fab-toggle:checked ~ .fab-actions .fab-action {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

.fab-action:hover {
    background: var(--color-bg-hover);
}

.fab-action:first-child {
    margin-bottom: 8px;
}

/* ===== Индикатор сложности пароля ===== */
.password-meter {
    margin-top: 8px;
    display: flex;
    gap: 4px;
    height: 6px;
}

.meter-bar {
    flex: 1;
    background: var(--color-bg-hover);
    border-radius: 3px;
    overflow: hidden;
    transform-origin: left;
    transition: background 0.3s;
}

.meter-bar .bar-fill {
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s;
}

.meter-label {
    font-size: 0.8rem;
    margin-top: 4px;
    color: var(--color-text-secondary);
    font-family: 'MainFont', sans-serif;
}

.meter-label.weak { color: #e74c3c; }
.meter-label.medium { color: #f39c12; }
.meter-label.strong { color: #2ecc71; }

/* ===== Адаптив (мобильные) ===== */
@media (max-width: 480px) {
    .navbar { display: block; }
    .fab-mobile-only { display: none; }
    .mobile-search-wrapper { position: fixed; top: 12px; left: 12px; right: 12px; z-index: 1200; display: block; padding: 8px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(20px) saturate(145%); backdrop-filter: blur(20px) saturate(145%); box-shadow: var(--glass-shadow); }
    .mobile-search-wrapper[hidden] { display: none !important; }
.mobile-search-wrapper.is-open { display: block !important; }
    .mobile-search-wrapper .search-box { display: flex; align-items: center; }
    .mobile-search-wrapper .search-input { min-width: 0; flex: 1; }
    .mobile-search-close { border: 0; background: transparent; color: var(--color-text-secondary); font-size: 1.5rem; line-height: 1; cursor: pointer; }
    .profile-joke-sticker { top: 130px; right: 8px; width: 140px; height: 140px; opacity: .1; }
    html {
        font-size: 17px;
    }

    .container {
        padding: 0 12px;
    }

    .nav-container {
        padding: 0 10px;
    }

    .brand {
        display: none;
    }

    .nav-logout-form {
        display: none;
    }

    /* Поиск -- был слишком мелким, делаем удобнее для касания */
    .search-wrapper {
        margin: 0 6px;
        flex: 1;
    }
    .search-box.static-search {
        width: 100%;
        height: 42px;
        padding: 0 10px;
    }
    .search-box.static-search .search-input {
        font-size: 0.95rem;
        padding-left: 6px;
    }
    .search-box.static-search .search-icon {
        width: 20px;
        height: 20px;
    }

    /* FAB -- на телефонах делаем крупнее (больше зона тапа), а не мельче */
    .fab-container {
        bottom: 26px;
        right: 18px;
    }
    .fab-btn {
        width: 64px;
        height: 64px;
    }
    .fab-btn img {
        width: 30px;
        height: 30px;
    }
    .fab-actions {
        bottom: 76px;
        right: 4px;
        gap: 16px;
        flex-direction: column;
    }
    .fab-action {
        width: 52px;
        height: 52px;
    }
    .fab-action img {
        width: 26px;
        height: 26px;
    }
    .fab-profile { order: -2; }
    #mobile-search-toggle { order: -1; }
    .fab-profile-icon { width: 30px !important; height: 30px !important; border-radius: 50%; object-fit: cover; }

    /* Профиль — уменьшаем аватарку */
    .profile-avatar-wrap {
        width: 100px;
        height: 100px;
    }
    .avatar-large {
        max-width: 100px;
    }
    .pin-orbital {
        width: 22px;
        height: 22px;
    }
    /* Позиции для уменьшенных пинов */
    .pin-count-1 .pin-pos-0 {
        top: -7px;
        left: 50%;
    }
    .pin-count-2 .pin-pos-0 {
        top: 50%;
        left: -7px;
    }
    .pin-count-2 .pin-pos-1 {
        top: 50%;
        right: -7px;
    }
    .pin-count-3 .pin-pos-0 {
        top: -7px;
        left: 50%;
    }
    .pin-count-3 .pin-pos-1 {
        top: 50%;
        left: -7px;
    }
    .pin-count-3 .pin-pos-2 {
        top: 50%;
        right: -7px;
    }

    /* Настройки — сетка градиентов */
    .gradient-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }
    .gradient-swatch {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
    .settings-card {
        padding: 14px;
        border-radius: 12px;
    }
    .settings-tab {
        font-size: 0.82rem;
        padding: 11px 6px;
    }
    .settings-page {
        padding-bottom: 90px;
    }
    .avatar-upload {
        width: 90px;
        height: 90px;
    }
    .pin-row-option {
        width: 100%;
        height: 78px;
    }
    .pin-row-img {
        width: 50px;
        height: 50px;
    }
    .settings-save-bar {
        bottom: 12px;
        padding: 0 12px;
    }

    /* Посты -- возвращаем нормальный размер везде вгод иконок/текста */
    .post-header {
        font-size: 0.92rem;
        gap: 8px;
    }
    .post-actions {
        gap: 16px;
        flex-wrap: wrap;
    }
    .post-actions button,
    .post-actions a {
        font-size: 0.95rem;
        padding: 4px 8px;
    }
    .post-actions img {
        width: 26px;
        height: 26px;
    }
    .create-post {
        padding: 16px;
    }
    .auth-form {
        padding: 22px;
    }
    .pin-icon-small {
        width: 18px;
        height: 18px;
    }
    .verif-icon {
        width: 21px;
        height: 21px;
    }
}
#admin-abuse-layer { position: fixed; inset: 0; z-index: 12000; overflow: hidden; pointer-events: none; }
#admin-abuse-audio { display: none; }
.admin-abuse-flyer { position: absolute; top: calc(100vh + 20px); max-width: 180px; height: auto; object-fit: contain; opacity: .95; animation-name: admin-abuse-fly; animation-timing-function: linear; animation-fill-mode: forwards; filter: drop-shadow(0 4px 12px rgba(0,0,0,.2)); }
@keyframes admin-abuse-fly { from { transform: translate3d(0, 0, 0) rotate(-12deg); } to { transform: translate3d(var(--abuse-drift), calc(-100vh - 240px), 0) rotate(18deg); } }
.admin-abuse-control-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-abuse-control-row div { display: grid; gap: 4px; }
.admin-abuse-control-row small { color: var(--color-text-secondary); }
@media (prefers-reduced-motion: reduce) { .admin-abuse-flyer { animation-duration: 18s !important; } }

/* ===== текст постов (обычный текст, без HTML-форматирования кроме авто-ссылок) ===== */
.post-text {
    margin: 10px 0;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* Автоссылки в тексте поста/комментария -- синие, кликабельные; клик перехватывается
   в JS (main.js) для показа подтверждения перед переходом на внешний ресурс. */
.post-link {
    color: var(--color-link);
    text-decoration: none;
    word-break: break-all;
}

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

.external-link-url {
    word-break: break-all;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    margin: 10px 0 4px;
}

.post-text-editor {
    width: 100%;
    min-height: 90px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    overflow-wrap: break-word;
}

.format-hint {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: -4px 0 8px;
    min-height: 16px;
    transition: color 0.15s;
}

.format-hint.format-hint-error {
    color: var(--color-danger);
}

.post-text-editor::placeholder {
    color: var(--color-text-muted);
}

.file-upload-row {
    display: flex;
    gap: 8px;
    margin: 10px 0;
}

.char-counter {
    text-align: right;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.char-counter-over {
    color: #e74c3c;
    font-weight: bold;
}


/* ===== Пагинация ленты (спиннер) ===== */
.pull-refresh-indicator { position: fixed; top: -54px; left: 50%; z-index: 1500; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--color-border-soft); border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 3px 14px rgba(0,0,0,.12); color: var(--color-text-secondary); font-size: .78rem; pointer-events: none; transform: translate(-50%, 0); transition: transform .18s ease; white-space: nowrap; }
.pull-refresh-indicator.is-ready { color: var(--color-text); }
.pull-refresh-indicator.is-refreshing { transform: translate(-50%, 58px) !important; }
.loading-icon { display: block; width: 24px; height: 24px; object-fit: contain; animation: loader-spin .9s linear infinite; }
.pull-refresh-spinner { width: 22px; height: 22px; opacity: 0; }
.pull-refresh-indicator.is-ready .pull-refresh-spinner, .pull-refresh-indicator.is-refreshing .pull-refresh-spinner { opacity: 1; }
.pull-refresh-indicator.is-refreshing .pull-refresh-spinner { animation: loader-spin .9s linear infinite; }
@keyframes pull-refresh-spin { to { transform: rotate(360deg); } }
@media (min-width: 701px) { .pull-refresh-indicator { display: none; } }
.secret-event-banner { position: relative; isolation: isolate; width: 100%; min-height: 154px; margin: 14px 0 10px; overflow: hidden; border: 1px solid #17191d; border-radius: 8px; background: #d8d8d8; color: #111; }
.secret-event-noise { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .46; image-rendering: pixelated; mix-blend-mode: multiply; }
.secret-event-banner::after { position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, rgba(0,0,0,.06) 1px 3px); content: ''; pointer-events: none; }
.secret-event-content { display: flex; min-height: 154px; padding: 26px 22px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.secret-event-content h1 { margin: 0 0 15px; color: #050505; font-family: 'Ponter Bold' !important; font-size: clamp(1.8rem, 6vw, 3.5rem); font-weight: normal; line-height: 1; letter-spacing: 0; text-shadow: 1px 1px 0 rgba(255,255,255,.55); }
.secret-event-countdown { display: flex; align-items: center; justify-content: center; gap: clamp(5px, 1.5vw, 13px); font-family: 'MainFont', sans-serif; font-variant-numeric: tabular-nums; }
.secret-event-countdown span { display: inline-flex; min-width: 44px; flex-direction: column; align-items: center; }
.secret-event-countdown b { color: #111; font-size: clamp(1.15rem, 3.3vw, 1.8rem); font-weight: 700; line-height: 1; }
.secret-event-countdown small { margin-top: 5px; color: #303030; font-size: .62rem; line-height: 1; text-transform: uppercase; }
.secret-event-countdown i { align-self: flex-start; margin-top: 1px; color: #222; font-size: 1.4rem; font-style: normal; line-height: 1; }
@media (max-width: 480px) { .secret-event-banner { min-height: 132px; margin-top: 8px; } .secret-event-content { min-height: 132px; padding: 21px 10px; } .secret-event-content h1 { margin-bottom: 13px; font-size: clamp(1.55rem, 8.5vw, 2.25rem); } .secret-event-countdown { gap: 2px; } .secret-event-countdown span { min-width: 39px; } .secret-event-countdown b { font-size: 1.05rem; } .secret-event-countdown small { font-size: .52rem; } .secret-event-countdown i { font-size: 1rem; } }
.feed-loader {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}
.audio-preview { min-height: 66px; }
.audio-preview .media-preview-remove { position: absolute; top: 6px; right: 6px; }
.audio-preview .music-main { padding-right: 8px; }

/* Лайки: короткий поп-эффект иконки при постановке лайка (чтобы действие чувствовалось более живым) */
.like-icon {
    transition: transform 0.15s ease;
}
.like-btn { touch-action: none; }
.reaction-lock { overflow: hidden; touch-action: none; }
.like-burst-layer { position: fixed; inset: 0; z-index: 10000; pointer-events: none; overflow: visible; }
.like-burst-particle { position: absolute; left: 0; top: 0; width: 20px; height: 20px; object-fit: contain; transform-origin: center; will-change: transform, opacity; pointer-events: none; user-select: none; }
.reaction-menu { position: fixed; z-index: 10001; display: flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid var(--glass-border); border-radius: 22px; background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--glass-shadow); animation: reactionMenuIn .16s ease-out; }
.reaction-option { width: 38px; height: 38px; padding: 5px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: transform .14s ease, background .14s ease; }
.reaction-option img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.reaction-option:hover, .reaction-option.is-active, .reaction-option.is-selected { transform: translateY(-5px) scale(1.18); background: #f2f2f2; }
.reaction-option.is-selected { background: #f2f2f2; }
.reaction-remove { padding: 7px 9px; border: 0; border-left: 1px solid #e5e5e5; border-radius: 0 14px 14px 0; background: transparent; color: #777; cursor: pointer; font: inherit; font-size: .72rem; white-space: nowrap; }
.reaction-remove:hover, .reaction-remove.is-active { background: #f2f2f2; color: #111; }
.like-btn, .reaction-option, .post-reactions img, .post-actions img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
@keyframes reactionMenuIn { from { opacity: 0; transform: translateY(5px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
.post-reactions { display: flex; align-items: center; gap: 3px; min-height: 0; margin: 5px 0 0 8px; }
.post-reactions:empty { display: none; }
.post-reactions img { width: 21px; height: 21px; object-fit: contain; }
.post-reactions span { color: var(--color-text-secondary); font-size: .76rem; }
.post-reaction-selected { filter: none; }
.ban-user-btn { display: inline-flex; align-items: center; gap: 3px; padding: 5px 7px; border: 1px solid #e4b3b3; border-radius: 7px; background: #fff7f7; color: #b42318; cursor: pointer; font-size: .7rem; font-weight: 700; }
.ban-user-btn img { width: 14px; height: 14px; }
.ban-user-btn:hover { background: #ffe8e8; }
.ban-field { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; color: var(--color-text-secondary); font-size: .83rem; }
.ban-field input, .ban-field select { width: 100%; box-sizing: border-box; padding: 10px 11px; border: 1px solid var(--color-border-soft); border-radius: 8px; background: var(--color-input-bg); color: var(--color-text); font: inherit; }
.admin-ban-modal { width: min(100% - 32px, 420px); }
@media (max-width: 560px) { .reaction-menu { gap: 2px; padding: 6px; } .reaction-option { width: 42px; height: 42px; } .post-reactions { margin-left: 8px; } }
.like-icon-pop {
    animation: likePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes likePop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .like-icon-pop {
        animation: none;
    }
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.feed-end {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    padding: 16px 0;
}

/* ===== Описание профиля (bio) ===== */
.profile-bio {
    max-width: 420px;
    margin: 6px auto 0;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* ===== Комментарии: ответы, удаление ===== */
.comment {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-soft);
}

.comment-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.comment-main .author-link {
    font-weight: bold;
}

.comment-actions {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    margin-left: 42px;
}

.comment-reply-btn,
.comment-delete-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px 0;
}

.comment-reply-btn:hover,
.comment-delete-btn:hover {
    text-decoration: underline;
    color: var(--color-text);
}

.comment-delete-btn {
    color: var(--color-danger);
}

.comment-replies {
    margin-left: 42px;
    margin-top: 6px;
    border-left: 2px solid var(--color-border-soft);
    padding-left: 12px;
}

.comment-reply-form-container {
    margin-left: 42px;
    margin-top: 8px;
}

/* ===== Кроппер изображений ===== */
.cropper-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.cropper-box {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    max-width: 380px;
    width: 90%;
    text-align: center;
}

.cropper-title {
    margin-bottom: 12px;
}

.cropper-canvas-wrap {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: #111;
    touch-action: none;
}

.cropper-canvas {
    width: 320px;
    height: 320px;
    cursor: grab;
    display: block;
}

.cropper-canvas:active {
    cursor: grabbing;
}

.cropper-mask {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.001);
    border: 2px solid rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

.cropper-zoom {
    width: 100%;
    margin-top: 14px;
    accent-color: var(--color-accent);
}

.cropper-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.cropper-cancel,
.cropper-confirm {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.cropper-cancel {
    background: #f0f0f0;
    color: #000;
}

.cropper-confirm {
    background: #000;
    color: #fff;
}

/* ===== Регистрация: выбор аватара ===== */
.register-avatar-picker {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

/* ===== Модальное окно бана ===== */
.ban-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
}

.ban-modal {
    background: var(--color-bg-elevated);
    border-radius: 16px;
    padding: 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
}

.ban-modal h2 {
    margin-bottom: 12px;
    color: var(--color-danger);
}

.ban-modal-until {
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.ban-modal-reason {
    background: var(--color-bg-secondary);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    text-align: left;
    white-space: pre-wrap;
}

.ban-modal-contact {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 20px;
}

.ban-modal-contact a {
    color: var(--color-text);
    font-weight: bold;
}

.ban-modal-logout {
    display: inline-block;
    padding: 10px 24px;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
}

/* ===== Настройки: опасная зона (удаление аккаунта / выход) ===== */
.settings-admin-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    margin-top: 4px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-elevated);
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.settings-admin-link:hover { background: var(--color-bg-hover); transform: translateY(-1px); }
.terms-consent-row { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--color-text-secondary); font-size: .82rem; line-height: 1.35; }
.terms-consent-row input { width: 17px !important; height: 17px; flex: 0 0 auto; margin: 1px 0 0 !important; }
.terms-consent-row a { color: var(--color-text); font-weight: 700; }
.legal-page { width: min(100% - 32px, 760px); margin: 30px auto 64px; color: var(--color-text); }
.legal-back { display: inline-block; margin-bottom: 28px; color: var(--color-text-secondary); text-decoration: none; font-size: .88rem; }
.legal-back:hover { color: var(--color-text); text-decoration: underline; }
.legal-header { padding-bottom: 24px; border-bottom: 1px solid var(--color-border-soft); }
.legal-kicker { margin: 0 0 8px; color: var(--color-text-muted); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.legal-header h1 { margin: 0; font-size: 2.2rem; letter-spacing: 0; }
.legal-meta { margin: 10px 0 0; color: var(--color-text-muted); font-size: .85rem; }
.legal-section { padding: 22px 0; border-bottom: 1px solid var(--color-border-soft); }
.legal-section h2 { margin: 0 0 10px; font-size: 1.05rem; }
.legal-section p, .legal-section li { color: var(--color-text-secondary); font-size: .92rem; line-height: 1.65; }
.legal-section p { margin: 0 0 9px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { margin: 8px 0 0; padding-left: 22px; }
.legal-section a { color: var(--color-text); font-weight: 600; }

.settings-danger-zone {
    margin: 30px 0 100px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-danger-outline {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    font-weight: bold;
    transition: background 0.2s;
}

.btn-danger-outline:hover {
    background: var(--color-bg-secondary);
}

.btn-danger {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: #b33;
    color: var(--color-accent-contrast);
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-danger:hover {
    background: #922;
}

.btn-secondary {
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-bg-secondary);
    color: var(--color-text);
    cursor: pointer;
    font-weight: bold;
}

/* ===== Универсальные модальные окна (удаление аккаунта) ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 35, 0.34);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10003;
    padding: 16px;
    animation: modalOverlayFadeIn 0.18s ease-out;
}

.modal-box {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
    box-shadow: var(--glass-shadow);
    border-radius: 16px;
    padding: 26px;
    max-width: 420px;
    width: 100%;
    animation: modalBoxPopIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalBoxPopIn {
    from { opacity: 0; transform: scale(0.94) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .modal-overlay, .modal-box, .notification, .alert {
        animation: none;
    }
}

.modal-box h3 {
    margin-bottom: 10px;
}

.modal-text {
    color: var(--color-text-secondary);
    margin-bottom: 14px;
    font-size: 0.95rem;
}

.math-challenge {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 14px;
}

.modal-error {
    color: var(--color-danger);
    font-size: 0.85rem;
    margin-top: 8px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.field-hint {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: -6px 0 6px;
}

/* ===== Игровой хаб ===== */
.games-hub h3 {
    margin: 20px 0 16px;
}

.games-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 480px;
    margin: 0 auto;
}

.game-card {
    display: block;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: transform 0.15s ease;
}

.game-card:hover {
    transform: translateY(-2px);
}

.game-card-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #111;
    overflow: hidden;
}

.game-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.game-card-info {
    padding: 12px 16px;
}

.game-card-info h4 {
    margin: 0 0 4px;
}

.game-card-info p {
    margin: 0;
    font-size: 0.85rem;
    color: #777;
}

.games-empty {
    text-align: center;
    color: #999;
    padding: 40px 0;
}

/* ===== Детали игры ===== */
.game-detail {
    max-width: 480px;
    margin: 20px auto 0;
    text-align: center;
}

.game-detail-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #111;
}

.game-detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.game-detail-desc {
    color: #777;
    margin: 10px 0 18px;
}

.game-play-btn {
    padding: 12px 32px;
    font-size: 1rem;
}

.play-menu-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-menu-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
}

.play-menu-panel {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    width: 90%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.play-menu-option {
    padding: 12px;
}

.play-menu-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #999;
}

/* ===== Лобби комнаты ===== */
.game-lobby {
    max-width: 420px;
    margin: 20px auto 0;
    text-align: center;
}

.lobby-pre {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

.lobby-join-row {
    display: flex;
    gap: 8px;
}

.lobby-join-row input {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    text-transform: uppercase;
    letter-spacing: 2px;
    width: 160px;
}

.lobby-room-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.lobby-room-code {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 3px;
}

.lobby-copy-btn {
    border: none;
    background: #eee;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.8rem;
}

.lobby-players {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.lobby-player-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f6f6f6;
    border-radius: 10px;
}

.lobby-player-name {
    font-weight: 600;
}

.lobby-host-badge {
    margin-left: auto;
    font-size: 0.75rem;
    background: #ffd76a;
    color: #4a3a00;
    padding: 2px 8px;
    border-radius: 6px;
}

.lobby-kick-btn {
    margin-left: auto;
    border: none;
    background: #e74c3c;
    color: #fff;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    cursor: pointer;
}

.lobby-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lobby-status {
    margin-top: 14px;
    color: #e74c3c;
    font-size: 0.85rem;
    min-height: 20px;
}

/* ===== Экран игры (iframe + HUD мультиплеера) ===== */
.game-play-wrap {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #05060a;
    z-index: 900;
}

.game-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.game-play-hud {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 950;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
}

.gp-players {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.gp-player-chip {
    background: rgba(20,22,32,0.6);
    color: #e8e6f0;
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 10px;
    backdrop-filter: blur(6px);
}

.gp-ping {
    background: rgba(20,22,32,0.6);
    color: #9fe89f;
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 10px;
    backdrop-filter: blur(6px);
}

/* ===== \u041a\u043d\u043e\u043f\u043a\u0430 "\u043d\u0430\u0437\u0430\u0434" \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0438\u0433\u0440 ===== */
.games-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #000;
    text-decoration: none;
    font-size: 1.1rem;
    transition: background 0.15s ease;
}

.games-back-btn:hover {
    background: rgba(0, 0, 0, 0.12);
}

.games-hub-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 16px;
}

.games-hub-header h3 {
    margin: 0;
}

.game-detail-back,
.game-lobby-back {
    margin-bottom: 12px;
}

/* ===== \u0431\u0435\u0439\u0434\u0436 "\u0434\u043e N \u0438\u0433\u0440\u043e\u043a\u043e\u0432" \u043d\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435 \u0438\u0433\u0440\u044b ===== */
.game-card-cover {
    position: relative;
}

.game-card-players-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
}

.games-empty {
    text-align: center;
    color: #999;
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.games-empty span {
    font-size: 0.85rem;
    opacity: 0.75;
}

.game-detail-meta {
    color: #999;
    font-size: 0.82rem;
    margin: -8px 0 16px;
}

.play-menu-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px;
}

.play-menu-option-title {
    font-weight: 700;
    font-size: 1rem;
}

.play-menu-option-hint {
    font-size: 0.78rem;
    color: #888;
    font-weight: 400;
}

/* ===== \u041b\u043e\u0431\u0431\u0438: \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u0439 \u0432\u0438\u0434 ===== */
.lobby-subtitle {
    color: #888;
    font-size: 0.85rem;
    margin: -10px 0 20px;
}

.lobby-create-btn {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
}

.lobby-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #aaa;
    font-size: 0.8rem;
    margin: 4px 0;
}

.lobby-divider::before,
.lobby-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e5e5;
}

.lobby-room-header-label {
    font-size: 0.78rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lobby-room-code-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}

.lobby-players-label {
    font-size: 0.78rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    text-align: left;
}

/* ===== \u041a\u043d\u043e\u043f\u043a\u0430 \u0432\u044b\u0445\u043e\u0434\u0430 \u0438\u0437 \u0438\u0433\u0440\u044b ===== */
.gp-exit-btn {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 950;
    background: rgba(20, 22, 32, 0.6);
    color: #fff;
    border: none;
    font-size: 0.78rem;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.gp-exit-btn:hover {
    background: rgba(20, 22, 32, 0.85);
}

@media (max-width: 480px) {
    .games-back-btn {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }
}

/* Product polish: stable media boxes, resilient headers and upload feedback. */
.avatar-nav,
.nav-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
}
.avatar-nav { object-fit: cover; object-position: center; display: block; }
.nav-avatar { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; }
.post-header { min-width: 0; gap: 10px; }
.post-header .author-link { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-header .date { flex: 0 0 auto; white-space: nowrap; }
.post-header-actions { flex: 0 0 auto; white-space: nowrap; }
.post-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 520px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
    border-radius: 10px;
}
.post-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.media-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 420px;
    overflow: hidden;
    border-radius: 10px;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.media-preview-thumb { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.upload-status { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 12px; color: var(--color-text-secondary); font-size: 0.9rem; }
.upload-status[hidden] { display: none; }
.upload-spinner { width: 16px; height: 16px; border: 2px solid #d7d7d7; border-top-color: #111; border-radius: 50%; animation: upload-spin .8s linear infinite; }
@keyframes upload-spin { to { transform: rotate(360deg); } }
.create-post button[type="submit"]:disabled { opacity: .55; cursor: wait; }
.comment-main { min-width: 0; }
.comment-main .author-link { max-width: 42%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.comment-text { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.comment-actions { flex: 0 0 auto; white-space: nowrap; }
.comment-replies { min-width: 0; }
.search-section-title { padding: 8px 12px 4px; color: var(--color-text-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.search-post-result { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; text-decoration: none; color: var(--color-text); border-top: 1px solid var(--color-border-soft); }
.search-post-result span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-secondary); }
/* Game shell is intentionally independent from the social navigation. */
body:has(.game-play-wrap) { overflow: hidden; }
body:has(.game-play-wrap) .navbar,
body:has(.game-play-wrap) main > .container > :not(.game-play-wrap),
body:has(.game-play-wrap) .fab-container { display: none; }
.game-play-wrap { z-index: 1000; background: #101216; }
.game-frame { position: absolute; inset: 0; border: 0; }
.game-menu-btn { position: fixed; top: 14px; right: 14px; z-index: 1100; width: 46px; height: 46px; padding: 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(14,16,20,.78); cursor: pointer; }
.game-menu-btn img { width: 100%; height: 100%; object-fit: contain; }
.game-menu-overlay { position: fixed; inset: 0; z-index: 1090; display: flex; justify-content: flex-end; background: rgba(3,4,6,.34); backdrop-filter: blur(8px); }
.game-menu-overlay[hidden] { display: none; }
.game-menu-panel { width: min(360px, 92vw); height: 100%; padding: 76px 22px 24px; color: #fff; background: rgba(19,22,28,.95); box-shadow: -20px 0 50px rgba(0,0,0,.28); }
.game-menu-logo { display: block; width: 150px; max-width: 100%; height: auto; margin: 0 0 20px; }
.game-menu-account { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: #fff; font-family: 'MainFont', sans-serif; }
.game-menu-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: center; border: 1px solid rgba(255,255,255,.35); }
.game-menu-panel h2 { margin: 0 0 20px; font-size: 1.3rem; }
.game-menu-panel button { width: 100%; margin-top: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: #fff; color: #111; cursor: pointer; }
.game-menu-players { margin: 8px 0 16px; padding: 0; list-style: none; color: #d8dce2; }
.game-menu-players li { display: flex; align-items: center; gap: 5px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.game-host-icon { width: 16px; height: 16px; object-fit: contain; }
.game-card-cover img, .game-detail-cover img { object-fit: cover; object-position: center; }
.game-play-btn, .lobby-create-btn, .lobby-actions .btn, #join-room-btn, .play-menu-option {
    min-height: 46px;
    border-radius: 10px;
    font-weight: 700;
    font-family: 'MainFont', sans-serif;
    background: #000;
    color: #fff;
    border: 2px solid #000;
}
.game-play-btn:hover, .lobby-create-btn:hover, .lobby-actions .btn:hover, #join-room-btn:hover, .play-menu-option:hover { background: #2d2d2d; color: #fff; }
.game-play-btn img, .lobby-create-btn img, #join-room-btn img { width: 20px; height: 20px; vertical-align: middle; margin-right: 6px; }
.nav-logout { background: transparent; border: 0; padding: 5px 0; cursor: pointer; }
.nav-logout:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.public-rooms-panel { margin: 18px 0 24px; padding: 16px; border: 2px solid #000; border-radius: 12px; text-align: left; background: #fff; }
.public-rooms-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.public-rooms-heading h4 { margin: 0; font-size: 1rem; }
.public-rooms-heading span { min-width: 26px; padding: 3px 8px; border-radius: 999px; background: #000; color: #fff; text-align: center; font-size: .75rem; }
.public-rooms-list { display: flex; flex-direction: column; gap: 8px; }
.public-rooms-empty { margin: 0; color: #777; font-size: .88rem; }
.public-room-row { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 11px 12px; border: 1px solid #ddd; border-radius: 9px; background: #f8f8f8; color: #111; cursor: pointer; text-align: left; }
.public-room-row:hover { border-color: #000; background: #fff; }
.public-room-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.public-room-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #666; }
.public-room-players { flex: 0 0 auto; color: #666; font-size: .8rem; }
.room-privacy-toggle { align-self: stretch; padding: 10px 12px; border: 1px solid #ddd; border-radius: 9px; text-align: left; }
.private-room-fields { display: flex; flex-direction: column; gap: 6px; align-self: stretch; text-align: left; font-size: .82rem; }
.private-room-fields[hidden] { display: none; }
.private-room-fields input, #join-room-password { min-height: 42px; padding: 9px 11px; border: 1px solid #ccc; border-radius: 8px; text-transform: uppercase; letter-spacing: 2px; }
.room-privacy-badge { padding: 4px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.room-privacy-badge.public { background: #e8f5e9; color: #1b5e20; }
.room-privacy-badge.private { background: #fff3cd; color: #856404; }
.lobby-host-badge { display: inline-flex; align-items: center; gap: 4px; }
.lobby-host-badge img { width: 16px; height: 16px; object-fit: contain; }
.play-menu-option { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.play-menu-option-hint { color: rgba(255,255,255,.7); }
.game-detail button, .game-lobby button, .game-play-wrap button { font-family: 'MainFont', sans-serif; background: #000; color: #fff; border-color: #000; }
.game-detail button:hover, .game-lobby button:hover, .game-play-wrap button:hover { background: #2d2d2d; color: #fff; }
.game-play-wrap .game-menu-btn { background: rgba(14,16,20,.9); border-color: rgba(255,255,255,.3); }
.game-menu-panel button { background: #000; color: #fff; border-color: #fff; }
.game-play-btn img, .lobby-create-btn img, #join-room-btn img { width: 20px; height: 20px; vertical-align: middle; margin-right: 6px; }
.gradient-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-height: 390px; overflow-y: auto; padding: 4px; }
.gradient-option { min-width: 0; cursor: pointer; }
.gradient-swatch { display: block; aspect-ratio: 1.35; border: 2px solid transparent; border-radius: 10px; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: transform .16s ease, border-color .16s ease; }
.gradient-option:hover .gradient-swatch { transform: translateY(-2px); }
.gradient-option input:checked + .gradient-swatch { border-color: #111; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; }
.gradient-name { display: block; overflow: hidden; margin-top: 5px; font-size: .74rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .gradient-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }

/* Final game UI: one aligned white work surface for lobby and menu. */
.game-lobby { width: min(100% - 32px, 460px); max-width: none; margin: 24px auto 40px; text-align: left; }
.game-lobby-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.game-lobby-header h3 { margin: 0; font-size: 1.2rem; }
.game-lobby-eyebrow { margin: 0 0 4px; color: #8a8a8a; font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.lobby-sheet { padding: 22px; border: 1px solid #e3e3e3; border-radius: 14px; background: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.07); }
.lobby-pre, .lobby-room { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.lobby-section-heading { display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
.lobby-section-heading h4 { margin: 0; color: #151515; font-size: .96rem; }
.lobby-section-heading span { min-width: 24px; padding: 3px 7px; border-radius: 999px; background: #111; color: #fff; font-size: .7rem; text-align: center; }
.room-privacy-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-self: stretch; padding: 4px; border: 1px solid #dedede; border-radius: 10px; background: #f5f5f5; }
.privacy-option { position: relative; display: block; cursor: pointer; }
.privacy-option input { position: absolute; opacity: 0; pointer-events: none; }
.privacy-option span { display: block; padding: 10px; border-radius: 7px; color: #666; font-size: .84rem; text-align: center; }
.privacy-option input:checked + span { background: #111; color: #fff; font-weight: 700; }
.private-room-fields { gap: 6px; }
.private-room-fields label { color: #777; font-size: .76rem; }
.private-room-fields input { width: 100%; box-sizing: border-box; }
.lobby-create-btn { width: 100%; padding: 12px; }
.lobby-rule { display: flex; align-items: center; gap: 10px; margin: 5px 0 1px; color: #999; font-size: .74rem; }
.lobby-rule::before, .lobby-rule::after { content: ''; flex: 1; height: 1px; background: #e6e6e6; }
.lobby-join-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; }
.lobby-join-row input { box-sizing: border-box; width: 100%; min-width: 0; padding: 11px 10px; border: 1px solid #d5d5d5; border-radius: 9px; background: #fff; font-size: .8rem; letter-spacing: 1.5px; }
.lobby-join-row input:focus, .private-room-fields input:focus { outline: 2px solid #111; outline-offset: 1px; border-color: #111; }
.lobby-join-row #join-room-btn { padding: 0 16px; white-space: nowrap; }
.lobby-public-heading { margin-top: 9px; padding-top: 15px; border-top: 1px solid #ededed; }
.public-rooms-list { gap: 6px; max-height: 210px; overflow-y: auto; }
.public-room-row { min-height: 42px; box-sizing: border-box; padding: 8px 10px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fafafa; }
.public-room-row:hover { border-color: #111; }
.lobby-room-topline { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid #ededed; }
.lobby-room-code-row { justify-content: flex-start; margin-top: 1px; }
.lobby-room-code { color: #111; font-size: 1.35rem; letter-spacing: 3px; }
.lobby-copy-btn { flex: 0 0 auto; padding: 9px 11px; border: 1px solid #111; border-radius: 8px; background: #111; color: #fff; font-size: .75rem; }
.lobby-players { gap: 6px; margin: 0 0 5px; }
.lobby-player-row { min-height: 46px; box-sizing: border-box; padding: 7px 10px; border: 1px solid #ededed; border-radius: 9px; background: #fafafa; }
.lobby-actions { gap: 8px; }
.lobby-actions .btn { width: 100%; padding: 11px; }
.lobby-status { min-height: 18px; margin: 9px auto 0; width: min(100% - 32px, 460px); text-align: center; }
.game-menu-overlay { background: rgba(0,0,0,.28); }
.game-menu-panel { overflow-y: auto; color: #111; background: #fff; box-shadow: -16px 0 42px rgba(0,0,0,.18); }
.game-menu-account { color: #111; }
.game-menu-panel h2 { color: #111; }
.game-menu-players { color: #444; }
.game-menu-players li { border-bottom-color: #e5e5e5; }
.game-menu-panel button { border-color: #111; background: #111; color: #fff; }
.game-menu-panel button:hover { background: #333; }
.game-orientation-lock { display: none; position: fixed; inset: 0; z-index: 1300; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; box-sizing: border-box; background: #fff; color: #111; text-align: center; }
.game-orientation-lock .orientation-icon { font-size: 44px; line-height: 1; }
.game-orientation-lock strong { font-size: 1.2rem; }
.game-orientation-lock span { color: #777; font-size: .88rem; }
@media screen and (max-width: 900px) and (orientation: portrait) {
    .game-orientation-lock { display: flex; }
    .game-play-wrap > :not(.game-orientation-lock) { visibility: hidden; }
}
@media (max-width: 520px) {
    .game-lobby { width: min(100% - 20px, 460px); margin-top: 14px; }
    .lobby-sheet { padding: 16px; }
    .lobby-join-row { grid-template-columns: 1fr 1fr; }
    .lobby-join-row #join-room-btn { grid-column: 1 / -1; min-height: 44px; }
}

/* The mode-picker close control is a symbol, not a filled action button. */
.play-menu-close,
.game-detail .play-menu-close { background: transparent !important; color: #111 !important; border: 0 !important; box-shadow: none; width: 34px; height: 34px; padding: 0; line-height: 30px; font-size: 28px; font-weight: 400; }
.play-menu-close:hover,
.game-detail .play-menu-close:hover { background: transparent !important; color: #555 !important; }


/* Post layout: actions always stay in the header instead of wrapping under it. */
.post-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
.post-header .author-link { display: flex; align-items: center; min-width: 0; gap: 5px; overflow: hidden; white-space: nowrap; }
.post-header .author-link .avatar-small { flex: 0 0 auto; }
.post-header .author-link .pin-icon-small { flex: 0 0 auto; }
.post-header .date { min-width: max-content; font-size: .74rem; white-space: nowrap; }
.post-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; min-width: 46px; white-space: nowrap; }
.download-btn, .delete-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 4px; border-radius: 7px; }
.download-btn img, .delete-btn img { width: 18px; height: 18px; }
.post-image { width: 100%; height: auto; min-height: 0; max-height: 520px; aspect-ratio: auto; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f3f3f3; }
.post-image img { display: block; width: auto; height: auto; max-width: 100%; max-height: 520px; object-fit: contain; object-position: center; }

/* Comments: author line, body text and actions are separate predictable rows. */
.comment { display: block; min-width: 0; padding: 13px 0; border-bottom: 1px solid var(--color-border-soft); }
.comment-author-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.comment-author-line .author-link { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: calc(100% - 88px); overflow: hidden; white-space: nowrap; }
.comment-author-line .comment-author-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comment-author-line .date { flex: 0 0 auto; color: var(--color-text-muted); font-size: .72rem; white-space: nowrap; }
.comment-text { margin: 7px 0 0 42px; min-width: 0; color: var(--color-text); line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; }
.comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 7px 0 0 42px; }
.comment-reply-btn, .comment-delete-btn { padding: 2px 0; font-size: .76rem; }
.comment-like-btn { display: inline-flex; min-width: 30px; padding: 2px 0; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--color-text-secondary); cursor: pointer; font: inherit; font-size: .76rem; }
.comment-like-btn img { width: 17px; height: 17px; object-fit: contain; }
.comment-like-btn.is-liked { color: var(--color-text); font-weight: 700; }
.comment-like-count { min-width: 1ch; }
.comment-replies { min-width: 0; margin: 10px 0 0 42px; padding-left: 12px; border-left: 2px solid var(--color-border-soft); }
.comment-replies .comment-text, .comment-replies .comment-actions { margin-left: 0; }
@media (max-width: 540px) {
    .post-header { grid-template-columns: minmax(0, 1fr) auto; }
    .post-header-actions { grid-column: 2; grid-row: 1; align-self: center; }
    .comment-author-line .author-link { max-width: calc(100% - 72px); }
    .comment-text, .comment-actions { margin-left: 34px; }
    .comment-replies { margin-left: 34px; }
}

/* Final post polish. */
.post-header { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; min-width: 0; gap: 10px; }
.post-header .author-link { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; }
.post-header-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 2px; min-width: 46px; margin: 0; white-space: nowrap; }
.post-date { display: block; width: 100%; margin: 5px 0 0; color: var(--color-text-secondary); font-size: .74rem; line-height: 1.2; white-space: nowrap; }
.post-image { display: block; width: 100%; height: auto; max-height: 520px; margin: 10px 0; overflow: hidden; background: transparent; border: 0; border-radius: 0; }
.post-image img { display: block; width: auto; height: auto; max-width: 100%; max-height: 520px; margin: 0 auto; border: 0; border-radius: 10px; object-fit: contain; }
.nav-avatar { width: 38px; height: 38px; min-width: 38px; min-height: 38px; aspect-ratio: 1; display: block; overflow: hidden; border-radius: 50%; }
.nav-avatar .avatar-nav { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: 1; object-fit: cover; object-position: center; border-radius: 50%; }
.media-preview { aspect-ratio: auto; min-height: 0; max-height: 420px; background: transparent; border: 0; }
.media-preview-thumb { width: auto; height: auto; max-width: 100%; max-height: 420px; object-fit: contain; }
.media-preview-remove { position: absolute; top: 6px; right: 6px; z-index: 2; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #111; color: #fff; font-size: 21px; line-height: 27px; cursor: pointer; }
.media-preview-remove:hover { background: #333; }

/* Compact create-post flow and bounded media preview. */
.create-post { padding: 16px; }
.create-post h3 { margin: 0 0 10px; }
.create-post form { display: flex; flex-direction: column; gap: 7px; }
.create-post textarea { display: block; margin: 0; }
.create-post .char-counter { margin: -3px 0 0; }
.create-post .file-upload-row, .create-post .file-upload { margin: 0; }
.create-post .file-upload-row { min-height: 38px; align-items: center; }
.create-post .upload-label { padding: 4px; }
.create-post .media-preview { display: flex; width: 180px; height: 180px; min-width: 180px; min-height: 180px; max-width: 180px; max-height: 180px; margin: 2px 0 0; padding: 0; align-items: center; justify-content: center; overflow: hidden; background: transparent; border: 0 !important; border-radius: 10px; }
.create-post .media-preview-thumb { display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; object-fit: cover !important; object-position: center; border: 0 !important; border-radius: 10px !important; }
.create-post .upload-status { padding: 4px 8px; }
.audio-title-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-input-bg); color: var(--color-text); font: inherit; }
.audio-preview { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px 38px 10px 12px; border: 1px solid var(--color-border-soft); border-radius: 10px; background: var(--color-bg-hover); }
.audio-preview[hidden] { display: none; }
.audio-preview-icon { width: 28px; height: 28px; flex: 0 0 auto; }
.audio-preview-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.audio-preview-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-preview-info span { color: var(--color-text-secondary); font-size: .8rem; }
.music-player { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; margin: 12px 0; padding: 12px 14px; border: 1px solid var(--color-border-soft); border-radius: 12px; background: var(--color-bg-elevated); }
.music-play-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; padding: 8px; border: 0; border-radius: 50%; background: var(--color-accent); cursor: pointer; }
.music-play-btn img { width: 24px; height: 24px; }
.music-main { min-width: 0; flex: 1; }
.music-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-progress { display: block; width: 100%; height: 4px; margin: 9px 0 5px; accent-color: var(--color-accent); cursor: pointer; }
.music-time { display: flex; justify-content: space-between; color: var(--color-text-secondary); font-size: .72rem; }
.music-player audio { display: none; }
@media (max-width: 540px) { .music-player { gap: 9px; padding: 10px; } .music-play-btn { width: 40px; height: 40px; } }
.create-post button[type="submit"] { margin-top: 2px; }
.post .post-image { display: block !important; width: 100% !important; height: min(520px, 72vw) !important; min-height: 220px; max-height: 520px !important; aspect-ratio: 4 / 3; overflow: hidden !important; border-radius: 12px !important; }
.post .post-image img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; overflow: hidden !important; border: 1px solid rgba(0,0,0,.10) !important; border-radius: 14px !important; clip-path: inset(0 round 14px); -webkit-mask-image: -webkit-radial-gradient(white, black); object-fit: cover !important; object-position: center !important; }
@media (max-width: 540px) { .post .post-image { height: 72vw !important; min-height: 0; } }

/* Профиль */
.profile-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.password-change-card { margin-top: 16px; }
.password-change-note { margin: 6px 0 14px; }
.password-change-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.password-change-fields label { display: grid; gap: 5px; color: var(--color-text-secondary); font-size: .8rem; }
.password-change-fields input { width: 100%; min-height: 40px; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--color-border-soft); border-radius: 7px; background: var(--color-bg-elevated); color: inherit; }
@media (max-width: 700px) { .password-change-fields { grid-template-columns: 1fr; } }

/* Админская карточка пользователя */
.admin-user-page { max-width: 960px; margin: 0 auto; padding: 28px 20px 60px; }
.admin-user-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.admin-user-head h1 { margin: 0; font-size: 1.45rem; }
.admin-user-profile { display: flex; gap: 18px; align-items: center; padding: 20px; border: 1px solid var(--color-border-soft); border-radius: 8px; background: var(--color-bg-elevated); }
.admin-user-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.admin-user-profile h2 { margin: 0; font-size: 1.35rem; }
.admin-user-username { margin: 4px 0 8px; color: var(--color-text-secondary); }
.admin-user-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge-online { background: #e6f4ea; color: #1e7e34; }
.admin-user-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.admin-user-grid > div { padding: 12px; border: 1px solid var(--color-border-soft); border-radius: 6px; background: var(--color-bg-elevated); }
.admin-user-grid span { display: block; color: var(--color-text-secondary); font-size: .76rem; }
.admin-user-grid strong { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.admin-user-actions, .admin-user-posts { padding: 18px 0; margin-top: 18px; border-top: 1px solid var(--color-border-soft); }
.admin-user-actions h2, .admin-user-posts h2 { margin: 0 0 14px; font-size: 1.05rem; }
.admin-action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.admin-ban-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 12px 0; }
.admin-ban-form label { display: grid; gap: 5px; color: var(--color-text-secondary); font-size: .8rem; }
.admin-ban-form input, .admin-ban-form select { min-height: 38px; padding: 7px 10px; border: 1px solid var(--color-border-soft); border-radius: 6px; background: var(--color-bg-elevated); color: inherit; }
.admin-user-post { padding: 10px 0; border-top: 1px solid var(--color-border-soft); }
.admin-user-post time { color: var(--color-text-secondary); font-size: .8rem; }
.admin-user-post p { margin: 5px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-user-row { cursor: pointer; transition: background .15s ease; }
.admin-user-row:hover { background: var(--color-bg-hover); }
.admin-user-link { display: flex; align-items: center; color: inherit; text-decoration: none; }

/* ===== Теги публикаций ===== */
.post { position: relative; }
.post-tag { flex: 0 1 auto; max-width: 128px; overflow: hidden; padding: 4px 9px; border: 1px solid rgba(0,0,0,.12); border-radius: 999px; color: #263238; font-size: .68rem; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.post-tag[data-tag="Мемы"] { background: #E8C7B8; }
.post-tag[data-tag="Вопрос"] { background: #C6D8E8; }
.post-tag[data-tag="История"] { background: #D8C9E5; }
.post-tag[data-tag="Новости"] { background: #C8DED2; }
.post-tag[data-tag="Музыка"] { background: #E2D3A8; }
.post-tag[data-tag="Арт"] { background: #E4C8D3; }
.post-tag[data-tag="Обсуждение"] { background: #C8D6D8; }
.post-tag[data-tag="Совет"] { background: #D8D2C2; }
.post-tag-field { display: grid; gap: 6px; margin: 10px 0 14px; color: var(--color-text-secondary); font-size: .78rem; font-weight: 700; }
.post-tag-field select { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-bg-elevated); color: var(--color-text); font: inherit; cursor: pointer; }
.post-tag-field select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
@media (max-width: 540px) { .post-header { gap: 6px; } .post-tag { max-width: 84px; padding: 4px 7px; font-size: .64rem; } .post-header-actions { min-width: auto; } }
@media (max-width: 620px) { .admin-user-head { align-items: flex-start; flex-direction: column; } .admin-user-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-user-profile { align-items: flex-start; } }

/* ===== Пошаговая регистрация ===== */
.register-standalone-body { min-height: 100vh; margin: 0; background: var(--color-bg); color: var(--color-text); }
.register-flashes { position: fixed; top: 14px; left: 50%; z-index: 5; width: min(420px, calc(100% - 28px)); transform: translateX(-50%); }
.register-flow { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 28px 12px; box-sizing: border-box; }
.register-flow-card { width: min(100%, 480px); padding: 24px; border: 1px solid var(--color-border-soft); border-radius: 12px; background: var(--color-bg-elevated); box-shadow: 0 14px 40px rgba(0,0,0,.08); }
.register-flow-progress { display: flex; gap: 7px; margin: 0 auto 30px; }
.register-flow-progress span { height: 3px; flex: 1; background: var(--color-border-soft); transition: background .35s ease, transform .35s ease; }
.register-flow-progress span.is-active { background: var(--color-accent); transform: scaleY(1.7); }
.register-flow-form { position: relative; min-height: 470px; }
.register-step { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; filter: blur(12px); transform: translateX(24px); pointer-events: none; transition: opacity .32s ease, filter .32s ease, transform .32s ease; }
.register-step.is-active { position: relative; opacity: 1; filter: blur(0); transform: translateX(0); pointer-events: auto; }
.register-flow-logo { width: 104px; height: 104px; margin: 8px auto 24px; object-fit: contain; }
.register-kicker { margin: 0 0 10px; color: var(--color-text-secondary); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.register-step h1, .register-step h2 { margin: 0 0 12px; font-family: 'MainFont', sans-serif; font-size: 1.7rem; line-height: 1.12; }
.register-step h1 { text-align: center; }
.register-lead, .register-step-copy { max-width: 370px; margin: 0 0 22px; color: var(--color-text-secondary); line-height: 1.5; }
.register-step:first-child .register-lead { margin-right: auto; margin-left: auto; text-align: center; }
.register-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; }
.register-features span { display: flex; min-height: 74px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--color-border-soft); border-radius: 8px; color: var(--color-text-secondary); font-size: .72rem; text-align: center; }
.register-features img { width: 24px; height: 24px; object-fit: contain; }
.register-fields { display: grid; gap: 12px; }
.register-fields label { display: grid; gap: 5px; color: var(--color-text-secondary); font-size: .78rem; font-weight: 600; }
.register-fields input { width: 100%; box-sizing: border-box; min-height: 46px; padding: 11px 14px; border: 1px solid var(--color-border); border-radius: 10px; outline: none; background: var(--color-bg-elevated); color: var(--color-text); font: inherit; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.register-fields input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.register-fields input::placeholder { color: var(--color-text-muted); }
.register-fields label > span { font-size: .8rem; }
.register-fields .field-hint { margin-top: -7px; color: var(--color-text-muted); font-size: .72rem; }
.register-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 22px; }
.register-next, .register-submit, .register-back, .register-back-final { min-height: 44px; padding: 0 18px; border-radius: 8px; cursor: pointer; font-family: 'MainFont', sans-serif; font-weight: 700; }
.register-next, .register-submit { border: 0; background: var(--color-accent); color: var(--color-accent-contrast); }
.register-back, .register-back-final { font-family: 'MainFont', sans-serif; }
.register-step:first-child .register-next { width: 100%; margin-top: 0; }
.register-actions .register-next { flex: 1; }
.register-back, .register-back-final { min-height: 44px; padding: 0 16px; border: 1px solid var(--color-border); border-radius: 8px; background: transparent; color: var(--color-text); cursor: pointer; font: inherit; }
.register-avatar-picker { margin: 8px auto 12px; }
.register-avatar-note { margin: 0; color: var(--color-text-secondary); font-size: .8rem; text-align: center; }
.register-checks { display: grid; gap: 14px; margin: 18px 0 auto; }
.register-check { display: flex; align-items: flex-start; gap: 10px; color: var(--color-text-secondary); font-size: .9rem; line-height: 1.4; }
.register-check input { width: 18px; height: 18px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--color-accent); }
.register-check a { color: var(--color-text); font-weight: 700; }
.register-submit { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; }
.register-submit img { width: 19px; height: 19px; filter: invert(1); }
.register-back-final { display: block; margin: 10px auto 0; border: 0; color: var(--color-text-secondary); }
.register-login-link { margin: 18px 0 0; text-align: center; }
.register-login-link a { color: var(--color-text); font-weight: 700; }
@media (max-width: 520px) { .register-flow { min-height: calc(100vh - 40px); padding: 14px 8px; } .register-flow-card { padding: 20px 16px; } .register-flow-form { min-height: 500px; } .register-features { gap: 5px; } .register-features span { font-size: .66rem; } }
@media (prefers-reduced-motion: reduce) { .register-step { transition: opacity .15s ease; filter: none; transform: none; } .register-flow-progress span { transition: none; } }

/* ===== Короткое обучение Кэрри ===== */
.onboarding-layer { position: fixed; inset: 0; z-index: 11000; display: flex; align-items: flex-end; justify-content: center; padding: 18px; background: rgba(0,0,0,.28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: onboarding-in .32s ease both; }
.onboarding-layer.is-closing { opacity: 0; filter: blur(10px); transition: opacity .24s ease, filter .24s ease; }
.onboarding-card { position: relative; display: block; width: min(700px, 100%); min-height: 300px; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: onboarding-card-in .42s cubic-bezier(.2,.8,.2,1) both; }
.onboarding-mascot { position: absolute; bottom: -18px; left: -18px; z-index: 1; width: min(43vw, 340px); height: min(68vh, 480px); object-fit: contain; object-position: center bottom; pointer-events: none; }
.onboarding-pin-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.onboarding-pin { position: absolute; left: 112px; bottom: 150px; width: 30px; height: 30px; object-fit: contain; opacity: 0; animation: onboarding-pin-float 1.8s ease-in-out infinite alternate, onboarding-pin-in .55s var(--pin-delay) ease-out forwards; transform: rotate(var(--pin-angle)); }
.onboarding-layer.is-changing .onboarding-pin { animation: onboarding-pin-out .35s ease forwards; }
.onboarding-copy { position: relative; z-index: 3; display: flex; width: min(430px, calc(100% - 118px)); min-height: 220px; margin-left: auto; flex-direction: column; justify-content: center; padding: 28px 30px; border: 1px solid rgba(0,0,0,.16); border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.24); }
.onboarding-step { margin-bottom: 9px; color: #777; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.onboarding-copy h2 { margin: 0 0 10px; font-family: 'MainFont', sans-serif; font-size: 1.55rem; }
.onboarding-copy p { margin: 0; color: #555; line-height: 1.5; }
.onboarding-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.onboarding-actions button { position: relative; z-index: 5; min-height: 40px; border-radius: 8px; cursor: pointer; pointer-events: auto; font-family: 'MainFont', sans-serif; font-weight: 700; }
.onboarding-skip { padding: 0 4px; border: 0; background: transparent; color: #777; }
.onboarding-next { padding: 0 16px; border: 0; background: #111; color: #fff; }
.onboarding-layer.is-changing .onboarding-copy { opacity: 0; filter: blur(7px); transform: translateY(5px); transition: opacity .15s ease, filter .15s ease, transform .15s ease; }
@keyframes onboarding-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes onboarding-pin-in { from { opacity: 0; transform: scale(.4) rotate(var(--pin-angle)); } to { opacity: .9; transform: scale(1) rotate(var(--pin-angle)); } }
@keyframes onboarding-pin-float { from { margin-top: -3px; } to { margin-top: 5px; } }
@keyframes onboarding-pin-out { to { opacity: 0; transform: scale(.2) rotate(80deg); } }
@keyframes onboarding-card-in { from { opacity: 0; filter: blur(10px); transform: translateY(18px) scale(.98); } to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }
@media (max-width: 520px) { .onboarding-layer { padding: 10px; align-items: flex-end; } .onboarding-card { width: 100%; min-height: 500px; } .onboarding-mascot { bottom: -4px; left: 50%; z-index: 2; width: 172px; height: 235px; transform: translateX(-50%); } .onboarding-copy { z-index: 4; width: 100%; min-height: 300px; box-sizing: border-box; margin: 0; padding: 22px 18px; border-radius: 12px; background: #fff; } .onboarding-copy h2 { font-size: 1.25rem; } .onboarding-copy p { font-size: .88rem; } .onboarding-actions { margin-top: 18px; } .onboarding-pin-layer { z-index: 3; } .onboarding-pin { width: 22px; height: 22px; } }

/* ===== Постоянное нападение Кэрри ===== */
.ransom-attack-layer { position: fixed; inset: 0; z-index: 12000; display: none; overflow: hidden; pointer-events: none; background: rgba(16, 20, 27, .16); }
.ransom-attack-layer.is-active { display: block; }
.ransom-screamer { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; background: #050505; transition: opacity .12s ease; }
.ransom-screamer img { width: min(78vw, 560px); height: min(78vh, 560px); object-fit: contain; filter: contrast(1.25) saturate(.85); }
.ransom-attack-layer.is-screamer .ransom-screamer { opacity: 1; animation: ransom-screamer-pulse .16s steps(2, end) infinite; }
.ransom-attack-noise { position: absolute; inset: 0; display: none; overflow: hidden; opacity: 1; pointer-events: none; background-color: #8ba5bd; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.72) 0 1px, rgba(43,88,126,.45) 1px 3px, rgba(207,92,91,.38) 3px 5px), repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 3px, rgba(31,93,137,.34) 3px 8px, rgba(222,156,68,.3) 8px 11px), repeating-linear-gradient(17deg, transparent 0 9px, rgba(255,255,255,.5) 9px 12px, transparent 12px 23px); mix-blend-mode: normal; animation: ransom-noise-jump .09s steps(2, end) infinite; }
.ransom-attack-layer.is-interference .ransom-attack-noise { display: grid; place-items: center; }
.ransom-loading-label { color: #fff; font: 700 clamp(34px, 7vw, 54px)/1 'Segoe UI', Tahoma, sans-serif; letter-spacing: 0; text-align: center; text-shadow: 2px 2px rgba(0,0,0,.55), 0 0 5px rgba(255,255,255,.7); animation: ransom-loading-glitch .14s steps(2, end) infinite; }
.ransom-window-field { position: absolute; inset: 0; }
.ransom-window { position: absolute; display: block; width: min(360px, calc(100vw - 24px)); min-height: 170px; overflow: hidden; border: 1px solid #71859a; border-radius: 5px 5px 3px 3px; background: #eef4fb; box-shadow: 4px 5px 0 rgba(10, 20, 32, .25), 0 8px 24px rgba(0,0,0,.25); pointer-events: none; opacity: 0; transform: translateY(12px) rotate(var(--window-tilt, 0deg)); transition: opacity .25s ease, transform .25s ease; }
.ransom-window.is-visible { opacity: 1; transform: translateY(0) rotate(var(--window-tilt, 0deg)); }
.ransom-window.is-waiting { opacity: 0; transform: scale(.98) rotate(var(--window-tilt, 0deg)); }
.ransom-window.demand-window { z-index: 20; width: min(430px, calc(100vw - 24px)); min-height: 220px; }
.ransom-window.demand-window .demand-frame { gap: 18px; min-height: 188px; padding: 18px; background: linear-gradient(135deg, #fff, #e7f0f9); }
.ransom-window.demand-window .ransom-window-mascot { flex: 0 0 116px; width: 116px; height: 150px; object-fit: contain; }
.ransom-window.demand-window .ransom-window-text { font-size: 15px; }
.ransom-window.demand-window .ransom-window-text strong { font-size: 17px; }
.ransom-window.demand-window .ransom-window-text span { font-size: 13px; padding: 5px 8px; }
.ransom-window.instruction-window { z-index: 20; width: min(470px, calc(100vw - 24px)); min-height: 240px; }
.ransom-window.instruction-window .instruction-frame { gap: 20px; min-height: 208px; padding: 20px; background: linear-gradient(135deg, #fff, #e7f0f9); }
.ransom-window.instruction-window .ransom-window-mascot { flex: 0 0 128px; width: 128px; height: 170px; object-fit: contain; }
.ransom-window.instruction-window .ransom-window-text { font-size: 16px; }
.ransom-window.instruction-window .ransom-window-text strong { font-size: 18px; }
.ransom-window.instruction-window .ransom-window-text span { font-size: 13px; padding: 6px 8px; }
.ransom-reference { display: block; width: 86px; height: 64px; margin: 6px 0 8px; border: 2px solid #c4a227; border-radius: 3px; object-fit: fill; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.ransom-attack-layer.is-windows .ransom-window-field { animation: ransom-camera-shake .18s steps(2, end) infinite; }
.ransom-window-titlebar { display: flex; align-items: center; justify-content: space-between; min-height: 28px; padding: 0 6px 0 9px; color: #fff; font: 700 12px/1 'Segoe UI', Tahoma, sans-serif; text-shadow: 1px 1px rgba(0,0,0,.35); background: linear-gradient(#6da5df, #2869ad 52%, #1e5796); }
.ransom-window-app { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ransom-window-controls { display: flex; gap: 3px; align-items: center; }
.ransom-window-controls b { display: inline-grid; width: 18px; height: 18px; place-items: center; border: 1px solid rgba(255,255,255,.65); border-radius: 3px; background: rgba(255,255,255,.16); font: 700 12px/1 Arial, sans-serif; }
.ransom-window-body { display: flex; align-items: stretch; min-height: 138px; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; color: #1d2835; background: #d9e4ef; }
.ransom-window-image { display: block; width: 100%; height: 138px; border: 0; object-fit: fill; }
.ransom-demand-panel { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 9px 10px; border: 1px solid rgba(80, 20, 20, .45); border-radius: 3px; color: #211719; background: rgba(255, 242, 232, .94); box-shadow: 2px 3px 8px rgba(0,0,0,.25); font: 12px/1.25 'Segoe UI', Tahoma, sans-serif; }
.ransom-demand-panel strong { color: #9b2424; font-size: 13px; }
.ransom-demand-panel p { margin: 4px 0 7px; }
.ransom-demand-panel span { display: inline-block; padding: 3px 6px; border: 1px solid #b9c9d9; border-radius: 2px; background: #f6f9fc; font-size: 11px; font-weight: 700; }
.ransom-window-text { min-width: 0; font-size: 12px; }
.ransom-window-text strong { color: #9b2424; font-size: 13px; }
.ransom-window-text p { margin: 5px 0 8px; line-height: 1.25; }
.ransom-window-text span { display: inline-block; padding: 3px 6px; border: 1px solid #b9c9d9; border-radius: 2px; background: #f6f9fc; font-size: 11px; font-weight: 700; }
@keyframes ransom-screamer-pulse { 0% { transform: translate(0, 0) scale(1, 1) skew(0); filter: contrast(1.15) saturate(.8); } 16% { transform: translate(-13px, 5px) scale(1.08, .93) skewX(-4deg); filter: contrast(2.2) brightness(1.3) saturate(1.8) hue-rotate(12deg); } 33% { transform: translate(9px, -7px) scale(.92, 1.08) skewX(5deg); filter: contrast(1.7) brightness(.65) saturate(2.2) hue-rotate(-18deg); } 50% { transform: translate(-5px, 3px) scale(1.04, .97) skewY(-3deg); filter: contrast(2.5) brightness(1.15) saturate(.5); } 68% { transform: translate(11px, 1px) scale(.96, 1.05) skewX(-6deg); filter: contrast(1.4) brightness(.8) saturate(2) hue-rotate(24deg); } 84% { transform: translate(-7px, -4px) scale(1.06, .94) skewY(4deg); filter: contrast(2.1) brightness(1.2); } 100% { transform: translate(0, 0) scale(1, 1) skew(0); filter: contrast(1.15) saturate(.8); } }
@keyframes ransom-noise-jump { 0% { transform: translate(0); } 33% { transform: translate(-8px, 3px); } 66% { transform: translate(6px, -2px); } 100% { transform: translate(-3px, 1px); } }
@keyframes ransom-loading-glitch { 0% { font-size: clamp(34px, 7vw, 48px); font-weight: 700; transform: translate(-3px, 2px) skewX(-3deg); } 25% { font-size: clamp(39px, 8vw, 56px); font-weight: 800; transform: translate(3px, -1px) skewX(3deg); } 50% { font-size: clamp(36px, 7.5vw, 52px); font-weight: 600; transform: translate(-2px, 3px) skewX(4deg); } 75% { font-size: clamp(42px, 8vw, 58px); font-weight: 700; transform: translate(2px, -2px) skewX(-2deg); } 100% { font-size: clamp(34px, 7vw, 48px); font-weight: 700; transform: translate(0); } }
@keyframes ransom-camera-shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1px, 1px); } 50% { transform: translate(1px, -1px); } 75% { transform: translate(0, 1px); } }
.ransom-attack-layer.is-completing .ransom-success-window { position: absolute; top: 50%; left: 50%; z-index: 4; width: min(500px, calc(100vw - 28px)); overflow: hidden; border: 1px solid #71859a; border-radius: 5px; background: #eef4fb; box-shadow: 7px 8px 0 rgba(10, 20, 32, .25), 0 14px 36px rgba(0,0,0,.34); transform: translate(-50%, -50%) scale(.92); animation: ransom-success-in .45s ease-out forwards; }
.ransom-success-body { display: grid; min-height: 285px; place-items: center; padding: 18px; color: #1d2835; background: #e7f0f9; font: 700 17px 'Segoe UI', Tahoma, sans-serif; }
.ransom-success-body strong { align-self: start; color: #9b2424; }
.ransom-success-image { display: grid; width: min(420px, 100%); height: 230px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); overflow: hidden; opacity: 0; }
.ransom-success-image.is-revealing { opacity: 1; }
.ransom-success-image i { display: block; opacity: 0; background-image: var(--success-image); background-size: 400% 400%; background-position: calc(var(--block-x) * 33.333%) calc(var(--block-y) * 33.333%); transform: scale(.7); }
.ransom-success-image.is-revealing i { animation: ransom-block-reveal .38s var(--block-delay) ease-out forwards; }
.ransom-attack-layer.is-fading-out { opacity: 0; transition: opacity .7s ease; }
@keyframes ransom-success-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes ransom-block-reveal { to { opacity: 1; transform: scale(1); } }
.ransom-hunt-target { position: relative; z-index: 2; box-shadow: 0 0 0 4px #f5c542, 0 0 18px rgba(245,197,66,.9); animation: ransom-target-pulse .8s ease-in-out infinite alternate; cursor: pointer; }
@keyframes ransom-target-pulse { from { filter: brightness(1); } to { filter: brightness(1.18) saturate(1.15); } }
body.ransom-page-shake > * { animation: ransom-page-shake .16s steps(2, end) infinite; }
body.ransom-page-frozen > * { animation-play-state: paused !important; }
.ransom-hunt-target { cursor: crosshair; animation: ransom-target-jitter .2s steps(2, end) infinite; }
.ransom-generated-target { position: relative; z-index: 2; }
@keyframes ransom-page-shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1px, 0); } 50% { transform: translate(1px, 1px); } 75% { transform: translate(0, -1px); } }
@keyframes ransom-target-jitter { 0%, 100% { transform: translate(0) rotate(0); } 50% { transform: translate(1px, -1px) rotate(.4deg); } }
.ransom-hunt-target { box-shadow: none; }
@media (max-width: 540px) { .ransom-window { width: min(310px, calc(100vw - 18px)); min-height: 155px; } .ransom-window.demand-window { width: min(350px, calc(100vw - 18px)); min-height: 190px; } .ransom-window.instruction-window { width: min(370px, calc(100vw - 18px)); min-height: 205px; } .ransom-window.instruction-window .instruction-frame { gap: 10px; min-height: 173px; padding: 13px; } .ransom-window.instruction-window .ransom-window-mascot { flex-basis: 88px; width: 88px; height: 130px; } .ransom-window.instruction-window .ransom-window-text { font-size: 12px; } .ransom-window.instruction-window .ransom-window-text strong { font-size: 14px; } .ransom-window.demand-window .demand-frame { gap: 9px; min-height: 158px; padding: 12px; } .ransom-window.demand-window .ransom-window-mascot { flex-basis: 82px; width: 82px; height: 125px; } .ransom-window.demand-window .ransom-window-text { font-size: 12px; } .ransom-window.demand-window .ransom-window-text strong { font-size: 14px; } .ransom-window-body { min-height: 138px; } .ransom-window-image { height: 138px; } .ransom-demand-panel { left: 7px; right: 7px; bottom: 7px; padding: 7px 8px; } }