:root {
    --primary-color: #e5e97f;
    --primary-strong: #c9cf4f;
    --secondary-color: #d4d86e;
    --background: #ffffff;
    --panel-bg: #f7f7ee;
    --card-bg: #ffffff;
    --text: #2f2f2b;
    --muted: #6f6f66;
    --border-color: #e2e2d4;
    --rail-hover: rgba(229, 233, 127, 0.35);
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    --overlay: rgba(28, 28, 24, 0.45);
    --danger: #b3402f;
    --danger-bg: rgba(179, 64, 47, 0.1);
    --success: #2f7d43;
    --success-bg: rgba(47, 125, 67, 0.12);
    --info-bg: rgba(229, 233, 127, 0.25);
    --radius: 14px;
    --header-height: 68px;
}

[data-theme="dark"] {
    --background: #161613;
    --panel-bg: #1d1d19;
    --card-bg: #232320;
    --text: #f0f0e7;
    --muted: #a5a599;
    --border-color: #35352d;
    --rail-hover: rgba(217, 221, 106, 0.16);
    --shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
    --overlay: rgba(0, 0, 0, 0.55);
    --primary-color: #d9dd6a;
    --primary-strong: #b9bd52;
    --secondary-color: #b9bd52;
    --info-bg: rgba(217, 221, 106, 0.12);
}

[data-theme="traditional"] {
    --background: #f5f5dc;
    --panel-bg: #f0f0cf;
    --card-bg: #fffdf0;
}

[data-theme="light"] {
    --background: #ffffff;
    --panel-bg: #f7f7f2;
    --card-bg: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--background);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.modal-open { overflow: hidden; }

.icon { flex: 0 0 auto; vertical-align: -0.15em; }

/* ---------- Шапка ---------- */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.header-content {
    max-width: 1440px;
    min-height: var(--header-height);
    margin: 0 auto;
    padding: 0.6rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #2f2f2b;
    text-decoration: none;
    white-space: nowrap;
}

/* Название и строка под ним. Строка короткая и стоячая: сайт живёт в режиме
   временного доступа, и это полезно видеть сразу, но перетягивать на себя взгляд
   она не должна. На телефоне надпись скрывает правило `.logo span`. */
.logo-text {
    display: grid;
    gap: 0.1rem;
    line-height: 1.15;
}

.logo-tag {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: rgba(47, 47, 43, 0.6);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-user {
    display: inline-block;
    vertical-align: middle;
    font-weight: 600;
    color: #2f2f2b;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.header-user:hover { text-decoration: underline; }

.header-user-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

/* ---------- Значки автора ---------- */

.badges {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    vertical-align: middle;
}

.verified-flower {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -0.18em;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.42rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

.badge-admin {
    border-color: rgba(47, 47, 43, 0.25);
    background: rgba(47, 47, 43, 0.12);
    color: inherit;
}

.badge-age {
    border-color: var(--border-color);
    background: var(--panel-bg);
    color: var(--muted);
}

.badge-age-kids {
    border-color: rgba(47, 125, 67, 0.35);
    background: rgba(47, 125, 67, 0.13);
    color: var(--success);
}

.badge-age-select {
    border-color: rgba(180, 112, 16, 0.35);
    background: rgba(180, 112, 16, 0.13);
    color: #94600f;
}

.badge-age-infinity {
    border-color: rgba(47, 111, 237, 0.32);
    background: rgba(47, 111, 237, 0.12);
    color: #2f6fed;
}

.header-user-wrap .badge { font-size: 0.62rem; padding: 0.05rem 0.35rem; }

.token-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(47, 47, 43, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    color: #2f2f2b;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.token-chip:hover { background: rgba(255, 255, 255, 0.75); }
.token-chip .icon { opacity: 0.8; }

.header .btn-secondary {
    color: #2f2f2b;
    border-color: rgba(47, 47, 43, 0.45);
}

.header .btn-secondary:hover { background: rgba(255, 255, 255, 0.45); }

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(47, 47, 43, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.35);
    color: #2f2f2b;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.icon-button:hover { background: rgba(255, 255, 255, 0.65); }
.icon-button:active { transform: scale(0.96); }

/* ---------- Каркас с основной панелью и боковой колонкой ---------- */

.app-shell {
    width: 100%;
    max-width: 1440px;
    margin: 1.5rem auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    flex: 1 0 auto;
}

.panel { min-width: 0; }

.panel-middle {
    /* Первый столбец держит и разделы, и карточку защиты: место под карточку
       занимает сетка, поэтому она ничего не перекрывает. */
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    /* Большое поле-обёртка убрано: остаются только раскладка и отступы. */
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* Левая колонка средней панели: разделы, а под ними карточка защиты. Обе части
   прилипают к верху экрана, поэтому карточка стоит в потоке страницы и ничего
   не перекрывает: место под неё занимает сетка. */
.panel-side {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-self: start;
    position: sticky;
    top: calc(var(--header-height) + 1.25rem);
    min-width: 0;
    padding-right: 1rem;
    border-right: 1px solid var(--border-color);
}

.panel-side .section-rail {
    position: static;
    top: auto;
}

.section-rail {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-self: start;
    position: sticky;
    top: calc(var(--header-height) + 1.25rem);
}

.rail-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.rail-link:hover { background: var(--rail-hover); }

.rail-link.is-active {
    background: var(--primary-color);
    color: #2f2f2b;
    font-weight: 600;
}

.rail-label { min-width: 0; }
.rail-lock { margin-left: auto; opacity: 0.55; }

.mobile-nav { display: none; }

.post-title a {
    color: inherit;
    text-decoration: none;
}

.post-title a:hover { text-decoration: underline; }

.panel-content { min-width: 0; }

/* ---------- Карточки ---------- */

.card,
.post-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}

.post-card { margin-bottom: 1.25rem; scroll-margin-top: calc(var(--header-height) + 1rem); }

.side-card { display: grid; gap: 0.7rem; }

.side-card-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1rem;
    line-height: 1.3;
}

.side-list {
    padding-left: 1.2rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.9;
}

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

.side-link {
    color: var(--text);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 2px solid var(--primary-color);
    justify-self: start;
}

.mini-profile {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    text-align: center;
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #2f2f2b;
    font-size: 1.4rem;
    font-weight: 700;
}

.avatar-user { background: var(--primary-color); }

.mini-profile-name { font-weight: 700; font-size: 1.05rem; }
.mini-profile-text { color: var(--muted); font-size: 0.9rem; }

.mini-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
    margin: 0.35rem 0;
}

.mini-stat {
    background: var(--panel-bg);
    border-radius: 10px;
    padding: 0.5rem 0.25rem;
    display: grid;
    gap: 0.05rem;
}

.mini-stat-value { font-weight: 700; }
.mini-stat-label { font-size: 0.72rem; color: var(--muted); }

/* ---------- Заголовки и посты ---------- */

h1 { font-size: 1.7rem; line-height: 1.25; margin-bottom: 1rem; }
h2 { font-size: 1.3rem; line-height: 1.3; margin-bottom: 0.85rem; }
h3 { font-size: 1.05rem; }

.post-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.post-title { font-size: 1.1rem; }

.post-author { color: var(--muted); font-size: 0.85rem; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }

.author-name { font-weight: 600; color: var(--text); text-decoration: none; }
.author-name:hover { text-decoration: underline; }

.profile-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0;
}

/* ---------- Профиль ---------- */

.profile-page { display: grid; gap: 1rem; }

.profile-card {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    padding: 1.75rem 1.25rem 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    text-align: center;
}

.profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--primary-color);
    color: #2f2f2b;
    font-size: 2.4rem;
    font-weight: 700;
    box-shadow: var(--shadow);
}

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

.profile-avatar-small { width: 72px; height: 72px; font-size: 1.8rem; }

.profile-name {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.35rem 0 0;
    font-size: 1.45rem;
}

.profile-username { margin: 0; color: var(--muted); font-size: 0.92rem; }

.verify-hint-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.verify-hint-button:hover { background: var(--rail-hover); }
.verify-hint-button:focus-visible { outline: 2px solid var(--primary-strong); outline-offset: 2px; }
.verified-flower-grey { opacity: 0.9; }

.verify-hint-popover {
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 2600;
    width: min(92vw, 330px);
    padding: 0.95rem 1.05rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-bg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

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

.verify-hint-close {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.verify-hint-close:hover { background: var(--panel-bg); color: var(--text); }

.verify-hint-title { margin: 0 0 0.3rem; font-size: 1.02rem; }
.verify-hint-lead { margin: 0 0 0.6rem; color: var(--muted); font-size: 0.85rem; }

.verify-hint-list {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.verify-hint-row {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.86rem;
}

.verify-hint-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 0.05rem;
    border-radius: 50%;
    background: var(--danger-bg);
    color: var(--danger);
    flex: 0 0 auto;
}

.verify-hint-row.is-done .verify-hint-mark { background: var(--success-bg); color: var(--success); }
.verify-hint-note { margin: 0.65rem 0 0; color: var(--muted); font-size: 0.82rem; }

.profile-bio {
    max-width: 560px;
    margin: 0.45rem 0 0;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.profile-bio-empty { color: var(--muted); font-style: italic; }

.profile-stats {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 0.9rem;
}

.profile-stat { display: grid; gap: 0.1rem; }
.profile-stat-value { font-size: 1.25rem; }
.profile-stat-label { color: var(--muted); font-size: 0.8rem; }

.profile-links { display: grid; gap: 0.5rem; }

.profile-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--primary-strong);
    border-radius: 12px;
    background: var(--primary-color);
    color: #2f2f2b;
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.profile-link:hover { filter: brightness(0.97); }
.profile-link-arrow { margin-left: auto; opacity: 0.7; }

.profile-posts { display: grid; gap: 0.75rem; }

.profile-posts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.profile-posts-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
}

.profile-posts-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--info-bg);
    color: var(--muted);
    font-size: 0.78rem;
}

.profile-post-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--muted);
    font-size: 0.8rem;
    text-decoration: none;
    white-space: nowrap;
}

.profile-post-link:hover { color: var(--text); }

.profile-post-meta {
    display: flex;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.profile-post-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }

.profile-empty {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: 2rem 1rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
    color: var(--muted);
    text-align: center;
}

.profile-empty p { margin: 0; }

.profile-edit-card { max-width: 560px; }

.profile-edit-avatar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.profile-edit-avatar-fields { flex: 1; min-width: 0; }

.profile-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    z-index: 3000;
    max-width: min(90vw, 420px);
    padding: 0.7rem 1.1rem;
    border-radius: 12px;
    background: #2f7d4f;
    color: #fff;
    font-size: 0.88rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 1rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.profile-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.profile-toast-error { background: var(--danger); }

.cinquain-text {
    font-style: italic;
    line-height: 2;
    padding: 1rem;
    background: var(--info-bg);
    border-left: 3px solid var(--primary-color);
    border-radius: 0 10px 10px 0;
    margin-bottom: 1rem;
    overflow-wrap: anywhere;
}

.post-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.action-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.88rem;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.action-button:hover {
    color: var(--text);
    border-color: var(--primary-strong);
    background: var(--rail-hover);
    text-decoration: none;
}

/* ---------- Страница одного синквейна ---------- */

.post-page-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.post-page-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.post-page-back:hover {
    color: var(--text);
    border-color: var(--primary-strong);
    background: var(--rail-hover);
}

.post-page-author {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

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

.post-page-feed {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.88rem;
    text-decoration: none;
    white-space: nowrap;
}

.post-page-feed:hover { color: var(--text); text-decoration: underline; }

.hero { padding: 0.5rem 0 1.75rem; }
.hero p { color: var(--muted); }

/* ---------- Кнопки ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.7rem 1.4rem;
    border: 2px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #2f2f2b;
}

.btn-primary:hover {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
}

.btn-secondary {
    background: transparent;
    border-color: var(--primary-strong);
    color: var(--text);
}

.btn-secondary:hover { background: var(--rail-hover); }

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
}

.btn-ghost:hover { color: var(--text); background: var(--rail-hover); }

.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.88rem; }
.btn-block { width: 100%; }

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.btn-danger:hover { filter: brightness(0.94); }

/* ---------- Формы ---------- */

.form-group { margin-bottom: 1rem; }

.form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--background);
    color: var(--text);
    font: inherit;
}

.form-input:focus,
.form-textarea:focus {
    outline: 2px solid var(--primary-strong);
    outline-offset: 1px;
}

.form-textarea { resize: vertical; min-height: 120px; }

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--muted);
    cursor: pointer;
}

.checkbox-row input { width: 18px; height: 18px; accent-color: var(--primary-strong); }

.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.2rem 0 0.9rem;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.45;
    cursor: pointer;
}

.terms-check input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 0.12rem;
    accent-color: var(--primary-strong);
}

.terms-check a { color: var(--text); font-weight: 600; }

/* --- Пароль с кнопкой показа --- */

.password-field { position: relative; }

.password-field .form-input { padding-right: 3rem; }

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.password-toggle:hover { color: var(--text); background: var(--rail-hover); }
.password-toggle .pw-show,
.password-toggle .pw-hide { display: inline-flex; }
.password-toggle .pw-hide { display: none; }
.password-toggle[aria-pressed="true"] .pw-show { display: none; }
.password-toggle[aria-pressed="true"] .pw-hide { display: inline-flex; }

/* --- Дата рождения --- */

.birth-group { min-width: 0; border: 0; padding: 0; }

.birth-selects {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 0.5rem;
}

.birth-selects select {
    padding-right: 0.4rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 14px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.form-hint {
    margin-top: 0.4rem;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.auth-page-card { max-width: 480px; margin: 0 auto; }

/* Знак гимназии на входах: сайт сделан для конкретного класса людей, и на
   экранах входа это видно. Знак нарисован тёмными линиями по прозрачному фону,
   поэтому подложка всегда светлая — иначе в тёмной теме его не разглядеть. */
.auth-school {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}

.auth-school-mark {
    width: 64px;
    height: 64px;
    object-fit: contain;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
}

.auth-school-text { display: grid; gap: 0.1rem; }

.auth-school-text strong { font-size: 0.95rem; }

.auth-school-text span { color: var(--muted); font-size: 0.82rem; }

/* ---------- Сообщения ---------- */

.alert {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    font-size: 0.92rem;
}

.alert-success { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.alert-error { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.alert-info { background: var(--info-bg); border-color: var(--primary-strong); }

/* ---------- Модальные окна ---------- */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    padding: 1.5rem;
    overflow-y: auto;
    background: var(--overlay);
    -webkit-backdrop-filter: blur(8px) saturate(0.9);
    backdrop-filter: blur(8px) saturate(0.9);
}

.modal.active { display: flex; align-items: center; justify-content: center; }

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 3rem);
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    color: var(--text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    animation: modal-in 0.18s ease-out;
}

/* Прокручивается не сама карточка, а эта область. Отступ сверху и снизу равен
   радиусу рамки (18px), поэтому полоса прокрутки и содержимое не заезжают в
   скруглённые углы. Внутреннее поле подобрано так, чтобы текст по-прежнему
   отстоял от края на 2rem: 18px отступа + 14px поля. */
.modal-body {
    overflow-y: auto;
    margin-block: 18px;
    padding: 0.875rem 2rem;
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.modal-close:hover { color: var(--text); background: var(--rail-hover); }

.auth-title { padding-right: 2.5rem; margin-bottom: 1rem; }

.auth-note {
    padding: 0.65rem 0.85rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    background: var(--info-bg);
    font-size: 0.9rem;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1.25rem;
    border-radius: 12px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
}

.auth-tab {
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.auth-tab:hover { color: var(--text); }

.auth-tab.is-active {
    background: var(--card-bg);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.auth-error {
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    border: 1px solid var(--danger);
    border-radius: 10px;
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 0.9rem;
}

.auth-error.auth-success {
    border-color: var(--success);
    background: var(--success-bg);
    color: var(--success);
}

.auth-form { display: grid; }
.auth-form[hidden] { display: none; }

.auth-switch {
    margin-top: 0.9rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--muted);
}

.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--primary-strong);
    text-underline-offset: 3px;
    cursor: pointer;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

/* ---------- Мессенджер ---------- */

.messenger {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    height: clamp(480px, calc(100vh - 150px), 920px);
    min-height: 480px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card-bg);
}

.messenger-list {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--border-color);
    background: var(--panel-bg);
}

.messenger-list-head {
    display: grid;
    gap: 0.7rem;
    padding: 1rem 1rem 0.75rem;
}

.messenger-title { font-size: 1.3rem; margin: 0; }

.messenger-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--muted);
}

.messenger-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    outline: none;
}

.messenger-search input::-webkit-search-cancel-button { cursor: pointer; }

.chat-items {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.35rem 0.5rem;
    display: grid;
    align-content: start;
    gap: 0.15rem;
}

.chat-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.6rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.chat-item:hover { background: var(--rail-hover); }
.chat-item.is-active { background: var(--info-bg); }
.chat-item.is-active .chat-item-name { font-weight: 700; }

.chat-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    color: #2f2f2b;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-strong));
}

.chat-avatar-creator { background: var(--primary-strong); }
.chat-avatar-support { background: linear-gradient(135deg, var(--primary-color), var(--primary-strong)); }

.chat-item-body { min-width: 0; flex: 1 1 auto; display: grid; gap: 0.1rem; }

.chat-item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.chat-item-name { font-weight: 600; font-size: 0.95rem; }
.chat-item-time { font-size: 0.72rem; color: var(--muted); flex: 0 0 auto; }

.chat-item-preview {
    font-size: 0.82rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list-empty {
    padding: 1rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
}

.messenger-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.messenger-conversation {
    display: grid;
    /* header, предупреждение об ИИ, переписка, поле ввода, подсказка */
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    min-width: 0;
    min-height: 0;
    background: var(--card-bg);
}

/* Строка о том, что отвечает программа: видна, пока открыт чат, и не прячется
   при прокрутке переписки. */
.ai-warning {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--info-bg);
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.4;
}

.ai-warning .icon { flex: none; color: var(--primary-strong); }

/* На телефоне та же мысль в одну строку: длинный текст занимал пол-экрана. */
.ai-warning-short { display: none; }

/* Схема синквейна в «Помощнике»: свёрнутая строка вместо предупреждения. На
   телефоне её нет — там каждый пиксель по высоте занят перепиской. */
.chat-scheme {
    margin: 0;
    padding: 0.45rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--panel-bg);
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.4;
}

.chat-scheme-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.chat-scheme-title::-webkit-details-marker { display: none; }

.chat-scheme-title .icon { flex: none; color: var(--primary-strong); }

.chat-scheme-arrow {
    display: inline-flex;
    margin-left: auto;
    color: var(--muted);
    transition: transform 0.15s ease;
}

.chat-scheme[open] .chat-scheme-arrow { transform: rotate(90deg); }

.chat-scheme-list {
    margin: 0.45rem 0 0;
    padding-left: 1.35rem;
    color: var(--muted);
}

.chat-scheme-list li { margin: 0.12rem 0; }

/* Младшая возрастная группа: нейро-чаты закрыты, в списке — только пояснение. */
.chat-locked {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.8rem 1rem;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.chat-locked .icon { flex: none; margin-top: 0.15rem; }

/* Младшая группа: чатов нет, поэтому поле ввода и предупреждение об ИИ убираем —
   писать некуда и предупреждать не о чем. Остаётся список с пояснением. */
.messenger.is-ai-locked .composer,
.messenger.is-ai-locked .composer-hint,
.messenger.is-ai-locked .ai-warning,
.messenger.is-ai-locked .chat-scheme { display: none; }

.messenger.is-ai-locked .messenger-conversation { grid-template-rows: auto minmax(0, 1fr); }

.conversation-placeholder {
    display: none;
    grid-row: 1 / -1;
    grid-column: 1;
    place-items: center;
    align-content: center;
    gap: 0.5rem;
    padding: 2rem;
    text-align: center;
    color: var(--muted);
}

.conversation-placeholder p {
    margin: 0;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 600;
}

.conversation-placeholder span {
    font-size: 0.86rem;
}

.messenger:not(.is-chat-open) .messenger-conversation > :not(.conversation-placeholder) {
    display: none;
}

.messenger:not(.is-chat-open) .conversation-placeholder {
    display: grid;
}

/* Явные строки: переписка и поле ввода не сдвигаются. */
.messenger-conversation > .conversation-head { grid-row: 1; }
.messenger-conversation > .messages-wrap { grid-row: 3; }
.messenger-conversation > .composer { grid-row: 4; }
.messenger-conversation > .composer-hint { grid-row: 5; }

.conversation-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
}

.conversation-back {
    display: none;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--text);
}

.conversation-person {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
}

.conversation-name {
    font-weight: 700;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-status {
    font-size: 0.78rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-menu { position: relative; }

.chat-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 30;
    min-width: 220px;
    padding: 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.chat-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--danger);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.chat-menu-item:hover { background: var(--danger-bg); }
.chat-menu-item:disabled { opacity: 0.5; cursor: default; }

.messages-wrap {
    position: relative;
    min-height: 0;
    display: flex;
    background: var(--panel-bg);
}

.messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.message {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-width: 78%;
}

.message-assistant { align-self: flex-start; align-items: flex-start; }
.message-user { align-self: flex-end; align-items: flex-end; }

.message-bubble {
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-assistant .message-bubble {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
}

.message-user .message-bubble {
    background: var(--primary-color);
    color: #2f2f2b;
    border-bottom-right-radius: 4px;
}

.message-meta { font-size: 0.68rem; color: var(--muted); padding: 0 0.2rem; }

.message-error .message-bubble {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger);
}

.search-hit {
    background: var(--primary-color);
    color: #2f2f2b;
    border-radius: 3px;
    padding: 0 0.1em;
}

.typing-bubble {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.2rem;
}

.typing-bubble span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted);
    animation: typing 1s infinite ease-in-out;
}

.typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
.typing-bubble span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.messages-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 2rem;
    text-align: center;
    color: var(--muted);
    background: var(--panel-bg);
}

.messages-empty-title { font-weight: 600; color: var(--text); }

.messages-empty-text { font-size: 0.88rem; max-width: 32ch; }

.composer {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem 0.25rem;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
}

.composer-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.55rem;
    max-height: 132px;
    resize: none;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.45;
}

.composer-input:focus { outline: 2px solid var(--primary-strong); outline-offset: 1px; }

.composer-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--primary-color);
    color: #2f2f2b;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.composer-send:hover { background: var(--primary-strong); }
.composer-send:active { transform: scale(0.95); }
.composer-send:disabled { opacity: 0.55; cursor: default; }

.composer-hint {
    padding: 0 1rem 0.55rem;
    color: var(--muted);
    font-size: 0.7rem;
    background: var(--card-bg);
}

.chat-choice-title { padding-right: 2rem; margin-bottom: 0.75rem; font-size: 1.2rem; }

.chat-choice-preview {
    padding: 0.7rem 0.85rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    background: var(--info-bg);
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.chat-choice-actions { display: grid; gap: 0.5rem; }

.chat-choice-note {
    margin-top: 0.9rem;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.button-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }

/* ---------- Рецензии ---------- */

.reviews-list {
    display: grid;
    gap: 0.6rem;
    max-height: 320px;
    margin-bottom: 1rem;
    overflow-y: auto;
    color: var(--muted);
    font-size: 0.9rem;
}

.reviews-list:empty { display: none; }

.review {
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-bg);
}

.review-head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
    color: var(--muted);
    font-size: 0.76rem;
}

.review-author { font-weight: 700; color: var(--text); }

.review-author-wrap {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-width: 0;
}

.review-author-wrap .badge { font-size: 0.62rem; }

.review-text {
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.reviews-empty {
    margin-bottom: 1rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.review-form { display: grid; gap: 0.25rem; }
.review-form .form-textarea { min-height: 84px; margin-bottom: 0.25rem; }
.review-form .auth-error { margin-bottom: 0.5rem; }

/* ---------- Схема синквейна ---------- */

.scheme-card { padding: 1rem; }
.scheme-card .side-list { line-height: 1.6; }
.scheme-card .side-list b { color: var(--text); }

.scheme-card-compact {
    box-shadow: none;
    background: var(--panel-bg);
    margin-bottom: 1rem;
    padding: 0.85rem;
}

.scheme-card-compact .side-card-title { font-size: 0.95rem; }

.scheme-card-compact .side-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    padding-left: 0;
    list-style: none;
    line-height: 1.35;
}

.scheme-card-compact .side-list li {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.8rem;
}

/* Схема нужна внутри модалок «Создать» и «Изменить» — там она своей колонкой не дублируется. */

/* ---------- Меню поста ---------- */

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

.post-card-heading { display: grid; gap: 0.15rem; min-width: 0; }

.post-menu { position: relative; flex: 0 0 auto; }

.post-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.post-menu-button:hover { background: var(--rail-hover); color: var(--text); }

/* 160, а не 60: карточка защиты (150) висит внизу экрана и не закрывается,
   поэтому меню последнего синквейна не должно прятаться под ней. */
.post-menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 0.3rem);
    z-index: 160;
    display: grid;
    gap: 0.15rem;
    min-width: 180px;
    padding: 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.post-menu-list[hidden] { display: none; }

.post-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.post-menu-item:hover { background: var(--rail-hover); }
.post-menu-danger { color: var(--danger); }
.post-menu-danger:hover { background: var(--danger-bg); }

/* ---------- Лайк ---------- */

.like-button .icon { transition: fill 0.18s ease, color 0.18s ease, transform 0.18s ease; }

.like-button.is-liked {
    color: #c98a00;
    border-color: #f0c14b;
    background: rgba(245, 179, 1, 0.12);
}

.like-button.is-liked .icon {
    fill: #f5b301;
    stroke: #f5b301;
    color: #f5b301;
}

.like-button.is-animating .icon {
    animation: star-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

@keyframes star-pop {
    0% { transform: scale(1); }
    35% { transform: scale(1.45) rotate(-10deg); }
    65% { transform: scale(0.92) rotate(4deg); }
    100% { transform: scale(1) rotate(0); }
}

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

/* ---------- Рецензии под постом ---------- */

.post-reviews {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.post-reviews[hidden] { display: none; }

.reviews-head {
    display: flex;
    /* Перенос — страховка: заголовок с числом рецензий тоже бывает длинным. */
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.reviews-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 1rem;
}

.reviews-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--panel-bg);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

/* Сортировка — один выпадающий список: две подписи не влезали в узкую строку
   заголовка и вылезали за карточку. main.js подменяет <select> своим .cselect,
   поэтому здесь же стили нативного select — без JS список остаётся рабочим. */
.reviews-sort {
    display: flex;
    min-width: 0;
    max-width: 100%;
}

.reviews-sort-select {
    max-width: 100%;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background);
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
}

.post-reviews .reviews-list { max-height: 420px; margin-bottom: 0.75rem; }
.reviews-list:empty { display: none; }

.review-audio { width: 100%; height: 36px; margin-top: 0.4rem; }

.reviews-login {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.review-compose { display: flex; align-items: flex-end; gap: 0.5rem; }
.review-compose .review-input { min-height: 56px; margin: 0; }

.review-send {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: var(--primary-color);
    color: #2f2f2b;
    cursor: pointer;
}

.review-send:hover { background: var(--primary-strong); }
.review-send:disabled { opacity: 0.55; cursor: default; }

.review-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.45rem;
}

.review-mic {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.84rem;
    cursor: pointer;
}

.review-mic:hover { color: var(--text); border-color: var(--primary-strong); }
.review-mic:disabled { opacity: 0.55; cursor: default; }

.review-hint { color: var(--muted); font-size: 0.75rem; }
.review-voice-note { margin-top: 0.55rem; color: var(--muted); font-size: 0.74rem; }

.voice-recorder {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding: 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-bg);
}

.voice-recorder[hidden] { display: none; }
.voice-status { font-size: 0.85rem; font-weight: 600; }
.voice-preview { width: 100%; height: 36px; }
.voice-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* ---------- Уведомление ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 3000;
    max-width: min(92vw, 520px);
    padding: 0.8rem 1.1rem;
    border-radius: 12px;
    background: #2f2f2b;
    color: #fff;
    font-size: 0.9rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.toast[hidden] { display: none; }
.toast-error { background: var(--danger); }
.toast-success { background: #2f7d4f; }

/* ---------- Модерация ---------- */

.moderation-note { margin-bottom: 1rem; }
.report-card { display: grid; gap: 0.4rem; }

.report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.report-verdict {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.report-verdict-violation {
    border: 1px solid var(--danger);
    background: var(--danger-bg);
    color: var(--danger);
}

.report-verdict-clean {
    border: 1px solid var(--success);
    background: var(--success-bg);
    color: var(--success);
}

.report-title { font-weight: 700; }
.report-meta { color: var(--muted); font-size: 0.82rem; }

.report-content {
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    background: var(--panel-bg);
    font: inherit;
    font-size: 0.9rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.delete-text { margin-bottom: 1rem; color: var(--muted); line-height: 1.5; }

/* ---------- Админ-панель ---------- */

body.admin-open { overflow: hidden; }

.admin-auth-note { margin-bottom: 1rem; }

.admin-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2600;
    flex-direction: column;
    background: var(--background);
    color: var(--text);
}

.admin-panel.active { display: flex; }

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.8rem 1.5rem;
    border-bottom: 1px solid rgba(47, 47, 43, 0.18);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #2f2f2b;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.admin-brand-site {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.7;
}

.admin-topbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-session,
.admin-me {
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.admin-tabs {
    display: flex;
    gap: 0.3rem;
    padding: 0.55rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--panel-bg);
    overflow-x: auto;
    scrollbar-width: thin;
}

.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.admin-tab:hover { background: var(--rail-hover); }

.admin-tab.is-active {
    border-color: var(--primary-strong);
    background: var(--primary-color);
    color: #2f2f2b;
}

.admin-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(47, 47, 43, 0.12);
    font-size: 0.72rem;
}

.admin-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 3rem;
}

.admin-pane-head {
    max-width: 1100px;
    margin: 0 auto 0.9rem;
}

.admin-pane-head h2 { margin-bottom: 0.25rem; }
.admin-pane-head p { color: var(--muted); font-size: 0.88rem; }
.admin-pane-head .admin-clear { margin-top: 0.6rem; }

.admin-search {
    max-width: 420px;
    margin-top: 0.6rem;
}

.admin-fake-form {
    margin-top: 0.8rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--panel-bg);
}

.admin-fake-head {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: 0.6rem;
}

.admin-fake-head p { margin: 0; color: var(--muted); font-size: 0.8rem; }

.admin-fake-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.admin-fake-fields .form-input { flex: 1 1 180px; }

.admin-card-fake {
    border-color: #c9971a;
    box-shadow: 0 0 0 1px rgba(201, 151, 26, 0.25), var(--shadow);
}

.admin-chip-fake {
    border-color: #c9971a;
    background: rgba(201, 151, 26, 0.14);
    color: #8f6a0a;
}

.admin-list {
    display: grid;
    gap: 0.75rem;
    max-width: 1100px;
    margin: 0 auto;
}

.admin-card {
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--card-bg);
    box-shadow: var(--shadow);
}

.admin-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.admin-card-title { font-weight: 700; line-height: 1.35; }
.admin-id { color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.admin-meta { color: var(--muted); font-size: 0.8rem; line-height: 1.45; }

.admin-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.45rem 0;
}

.admin-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--panel-bg);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.admin-chip-warn { border-color: #c9971a; background: rgba(201, 151, 26, 0.14); color: #8f6a0a; }
.admin-chip-ok { border-color: #2f7d4f; background: rgba(47, 125, 79, 0.12); color: #2f7d4f; }
.admin-chip-danger { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.admin-chip-root { border-color: #2f6fed; background: rgba(47, 111, 237, 0.12); color: #2f6fed; }

.admin-snippet {
    max-height: 150px;
    margin: 0.5rem 0;
    padding: 0.6rem 0.7rem;
    overflow: auto;
    border-radius: 10px;
    background: var(--panel-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.admin-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.55rem;
}

.admin-inline {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.admin-number {
    width: 96px;
    padding: 0.42rem 0.55rem;
    font-size: 0.85rem;
}

.admin-state {
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.admin-state-new { border: 1px solid #c9971a; background: rgba(201, 151, 26, 0.14); color: #8f6a0a; }
.admin-state-ok { border: 1px solid var(--success); background: var(--success-bg); color: var(--success); }

.admin-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #2f6fed;
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-unverified { color: var(--muted); font-size: 0.78rem; }

.admin-reasons {
    padding-left: 1.1rem;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.admin-empty { padding: 1rem; color: var(--muted); text-align: center; }

.admin-action-card .admin-card-head { margin-bottom: 0.15rem; }

.admin-toast {
    position: fixed;
    top: 5.4rem;
    right: 1.5rem;
    z-index: 2700;
    max-width: min(90vw, 420px);
    padding: 0.7rem 1rem;
    border-radius: 12px;
    color: #fff;
    font-size: 0.88rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.admin-toast-success { background: #2f7d4f; }
.admin-toast-error { background: var(--danger); }

.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;
}

/* ---------- Подвал ---------- */

.footer {
    flex: 0 0 auto;
    padding: 1.5rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.1rem;
    margin-top: 0.35rem;
    font-size: 0.8rem;
}

.footer-links a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.footer-links a:hover {
    color: var(--text);
    border-color: var(--primary-strong);
}

/* ---------- Юридическая страница ---------- */

.legal-page {
    display: grid;
    gap: 1rem;
    max-width: 860px;
}

.legal-head h1 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.legal-nav a {
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.85rem;
    text-decoration: none;
}

.legal-nav a:hover {
    border-color: var(--primary-strong);
    background: var(--rail-hover);
}

.legal-section {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.legal-section h2 { margin-bottom: 0.6rem; }

.legal-section h3 {
    margin: 1rem 0 0.35rem;
    font-size: 1rem;
}

.legal-section p {
    margin-bottom: 0.7rem;
    color: var(--text);
}

.legal-list {
    padding-left: 1.2rem;
    margin-bottom: 0.7rem;
    color: var(--muted);
    line-height: 1.8;
}

.legal-contact {
    margin-top: 0.8rem;
    color: var(--muted);
    font-size: 0.9rem;
}
.legal-contact a { color: var(--text); }
.legal-contact-sep { margin: 0 0.35rem; color: var(--muted); }
.legal-contact .icon { vertical-align: -3px; margin-right: 0.15rem; }

/* ---------- Объявление администрации ----------
   Окно обязательное: своей кнопки закрытия у него нет, Esc его тоже не закрывает
   (main.js, data-persistent). Отдельная страница нужна затем, чтобы ссылку на
   объявление можно было дать саму по себе. */

.announce-card { max-width: 520px; }

.announce-card h2 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}

.announce-date {
    color: var(--muted);
    font-size: 0.82rem;
    margin-bottom: 0.6rem;
}

/* Текст объявления — просто текст: ссылок и разметки в нём нет, переносы строк
   сохраняем, длинные слова переносим, чтобы окно не расползалось. */
.announce-text {
    white-space: pre-line;
    line-height: 1.55;
    overflow-wrap: anywhere;
    color: var(--text);
}

.announce-card .button-row { margin-top: 1.1rem; }

.announcement-page {
    display: grid;
    gap: 1rem;
    max-width: 860px;
}

.announcement-section h1 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.announcement-body { margin-top: 0.8rem; }

/* Форма объявления в панели: лимит знаков стоит и в maxlength поля, и на сервере,
   значение приходит из одного места, чтобы подсказка не отстала от проверки. */
.admin-announce-form {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.8rem;
    max-width: 640px;
}

.admin-announce-form .form-hint { color: var(--muted); font-size: 0.8rem; }

.admin-announce-form .btn { justify-self: start; }

/* ---------- Согласие на необязательные cookie ----------
   Окно не блокирует страницу и лежит ниже модальных окон (z-index у .modal —
   2000): ответ добровольный, а «Отклонить» оставляет сайт полностью рабочим. */

.cookies-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 900;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.cookies-banner-inner {
    display: grid;
    gap: 0.55rem;
    width: 100%;
    max-width: 620px;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-bg);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
    pointer-events: auto;
}

.cookies-banner-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.98rem;
}

.cookies-banner-text {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.cookies-banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cookies-banner-link { color: var(--text); font-size: 0.85rem; }

/* ---------- Поиск в ленте ---------- */

.feed-search {
    position: relative;
    margin-bottom: 1rem;
}

.feed-search-field {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
    box-shadow: var(--shadow);
}

.feed-search-field .icon { color: var(--muted); }

.feed-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
    font: inherit;
}

.feed-search-input::placeholder { color: var(--muted); }

.feed-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.feed-search-clear:hover { background: var(--rail-hover); color: var(--text); }

.feed-search-results {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    left: 0;
    z-index: 160;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--card-bg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.search-group + .search-group {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-color);
}

.search-group-title {
    display: block;
    padding: 0.3rem 0.55rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.search-result {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.55rem;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
}

.search-result:hover { background: var(--rail-hover); }

.search-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--primary-color);
    color: #2f2f2b;
    font-size: 0.9rem;
    font-weight: 700;
}

.search-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-text {
    display: grid;
    min-width: 0;
    line-height: 1.25;
}

.search-result-text b,
.search-result-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-text b { font-size: 0.9rem; }
.search-result-text small { color: var(--muted); font-size: 0.78rem; }

.search-badges {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.badge-verified-text { color: #2f6fed; font-weight: 700; }

.search-empty {
    padding: 0.9rem;
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
}

.action-static { cursor: default; }

.action-static:hover {
    border-color: var(--border-color);
    background: transparent;
    color: var(--muted);
}

/* ---------- Колокольчик и уведомления ---------- */

.profile-card { position: relative; }

/* Кнопки над профилем: серый цветок подсказки о верификации и колокольчик.
   Обе одного размера, чтобы пара выглядела одинаково. */
.profile-card-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.profile-verify-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-bg);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.profile-verify-hint:hover { border-color: var(--primary-strong); background: var(--rail-hover); }

.profile-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-bg);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.profile-bell:hover {
    border-color: var(--primary-strong);
    background: var(--rail-hover);
}

.profile-bell-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.3rem;
    border: 2px solid var(--card-bg);
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}

.profile-report {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.profile-report:hover {
    border-color: var(--danger);
    background: var(--rail-hover);
}

.report-reasons {
    display: grid;
    gap: 0.35rem;
    padding: 0;
    border: 0;
}

.report-reason {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
}

.report-reason:hover { background: var(--rail-hover); }

.report-reason input { accent-color: var(--primary-strong); }

.notifications-card { max-width: 560px; }

.notifications-card h2 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-right: 2.5rem;
}

.notifications-list {
    display: grid;
    gap: 0.45rem;
    max-height: min(60vh, 520px);
    overflow-y: auto;
}

.notification {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-bg);
}

.notification.is-unread {
    border-color: var(--primary-strong);
    background: var(--info-bg);
}

.notification-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--muted);
}

.notification.is-unread .notification-icon { color: var(--text); }

.notification-body {
    flex: 1;
    min-width: 0;
}

.notification-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.notification-time { color: var(--muted); font-size: 0.72rem; }

.notification-link {
    align-self: center;
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
}

.notification-link:hover { color: var(--text); }

.notifications-empty {
    padding: 1.4rem 0.5rem;
    color: var(--muted);
    text-align: center;
}

/* ---------- Разделы настроек ---------- */

.settings-wrap {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
    max-width: 940px;
}

.settings-nav {
    position: sticky;
    top: calc(var(--header-height) + 0.75rem);
    display: grid;
    gap: 0.4rem;
}

.settings-nav-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-bg);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.settings-nav-btn:hover { background: var(--rail-hover); }

.settings-nav-btn:focus-visible {
    outline: 2px solid var(--primary-strong);
    outline-offset: 2px;
}

.settings-nav-btn.is-active {
    border-color: var(--primary-strong);
    background: var(--primary-color);
    color: #2f2f2b;
    font-weight: 700;
}

.settings-panels { min-width: 0; }
.settings-panels .post-card { margin-bottom: 0.9rem; }

.access-password-state { font-weight: 600; }
.access-password-state.is-on { color: var(--success); }

.code-input {
    letter-spacing: 0.35rem;
    font-size: 1.15rem;
    text-align: center;
}

.profile-edit-age {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-color);
}

/* ---------- Настройки уведомлений ---------- */

.settings-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    margin-top: 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-bg);
    cursor: pointer;
}

.settings-toggle input {
    width: 18px;
    height: 18px;
    margin-top: 0.2rem;
    accent-color: var(--primary-strong);
}

.settings-toggle-text { display: grid; gap: 0.1rem; }
.settings-toggle-text small { color: var(--muted); font-size: 0.8rem; }

/* Поле, которое уточняет тумблер выше (например, формат сообщений о койнах). */
.settings-subfield {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.55rem;
    padding: 0.65rem 0.75rem;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
}

.settings-subfield select { max-width: 340px; }

.settings-subfield select:disabled { opacity: 0.55; }

/* ---------- Активные сеансы ---------- */

.session-list {
    display: grid;
    gap: 0.45rem;
    margin: 0.6rem 0;
    padding: 0;
    list-style: none;
}

.session-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-bg);
}

.session-body { display: grid; gap: 0.1rem; min-width: 0; }

.session-device { font-weight: 600; }

.session-meta {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.session-current {
    flex: none;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(47, 125, 67, 0.13);
    color: var(--success);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.session-row .btn { flex: none; }

@media (max-width: 600px) {
    /* На телефоне подпись «Этот браузер» и кнопка уезжают под устройство. */
    .session-row { flex-wrap: wrap; }
    .session-body { flex: 1 1 100%; }
}

/* ---------- Возраст ---------- */

.age-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.4rem 0 0.6rem;
}

.age-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: var(--primary-color);
    color: #2f2f2b;
    font-size: 0.8rem;
    font-weight: 700;
}

.age-state { color: var(--muted); font-size: 0.82rem; }

.age-form { display: grid; gap: 0.7rem; margin-top: 0.7rem; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

/* ---------- Удаление уведомлений ---------- */

.notification-delete {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.notification-delete:hover {
    color: var(--danger);
    background: var(--danger-bg);
}

.notifications-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.7rem;
}

/* ---------- Удаление сообщения в чате ---------- */

.message-delete {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.message:hover .message-delete,
.message-delete:focus-visible {
    opacity: 1;
}

.message-delete:hover {
    color: var(--danger);
    background: var(--danger-bg);
}

@media (hover: none) {
    .message-delete { opacity: 1; }
}

/* ---------- Админка: возраст и голос ---------- */

.admin-voice-row,
.admin-age-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

.admin-voice-row .btn.is-active {
    border-color: var(--primary-strong);
    background: var(--info-bg);
}

.admin-age-input {
    max-width: 170px;
    padding: 0.4rem 0.55rem;
}

.admin-card-actions .admin-record-delete { margin-left: auto; }

/* ---------- Сайтовые диалоги ---------- */

.app-dialog-modal { z-index: 2800; }

.app-dialog { max-width: 460px; }

.app-dialog h2 { padding-right: 2.5rem; }

.app-dialog p {
    margin-bottom: 1rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.app-dialog .form-group { margin-bottom: 1rem; }

/* ---------- Режим телефона ---------- */

.phone-modal {
    z-index: 2900;
    padding: 0.75rem;
}

.phone-frame {
    display: flex;
    flex-direction: column;
    width: min(390px, 94vw);
    height: min(844px, calc(100vh - 1.5rem));
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 26px;
    background: #111;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    animation: modal-in 0.18s ease-out;
}

.phone-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    background: #1d1d19;
    color: #f0f0e7;
    font-size: 0.78rem;
}

.phone-bar-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.phone-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
    cursor: pointer;
}

.phone-close:hover { background: rgba(255, 255, 255, 0.22); }

.phone-screen {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: #fff;
}

/* ---------- Тестовый аккаунт в админке ---------- */

.admin-fake-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.8rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--panel-bg);
}

.admin-fake-cta .admin-fake-head { margin-bottom: 0; }

.admin-fake-modal { z-index: 2800; }
.admin-fake-card { max-width: 520px; }
.admin-fake-card .auth-note { font-size: 0.85rem; }

/* ---------- Статистика админки ---------- */

.admin-stats {
    max-width: 1100px;
    margin: 0 auto;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.admin-stat-card {
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--panel-bg);
}

.admin-stat-label {
    display: block;
    color: var(--muted);
    font-size: 0.85rem;
}

.admin-stat-value {
    display: block;
    margin: 0.15rem 0;
    font-size: 1.7rem;
    line-height: 1.2;
}

/* Обнуление чисел: у каждой карточки свой набор кнопок, гости и авторизованные отдельно. */
.admin-stat-resets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.7rem;
}

.admin-stat-reset-hint {
    margin-right: 0.15rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.admin-stat-resets .btn-sm { padding: 0.3rem 0.65rem; font-size: 0.78rem; }

.admin-stats-subtitle {
    margin: 1.4rem 0 0.6rem;
    font-size: 1rem;
}

.admin-activity {
    display: grid;
    gap: 0.4rem;
}

.admin-activity-row {
    display: grid;
    grid-template-columns: 48px minmax(80px, 1fr) minmax(220px, auto);
    align-items: center;
    gap: 0.7rem;
    font-size: 0.85rem;
}

.admin-activity-date { color: var(--muted); }

.admin-activity-bar-wrap {
    display: block;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--rail-hover);
}

.admin-activity-bar {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 999px;
    background: var(--primary-strong);
}

.admin-activity-values { color: var(--muted); }
.admin-activity-values b { color: var(--text); }

.admin-comment {
    margin-top: 0.35rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: var(--rail-hover);
    font-size: 0.88rem;
    white-space: pre-wrap;
}

/* ---------- Защита аккаунта: карточка, поля кода, окно с файлом ---------- */

/* Карточка защиты стоит в левой колонке страницы (.panel-side), под разделами.
   Место под неё занимает сетка, поэтому она ничего не перекрывает: ни навигацию,
   ни кнопки лайков и рецензий, ни подвал. Свернуть можно — остаётся полоска с числом
   дел; на следующей странице карточка снова открыта, поэтому спрятать её навсегда
   нельзя. Модальные окна (2000) и админка (2600) перекрывают страницу целиком,
   а при открытом окне карточка становится inert вместе с фоном (main.js). */
.protect-card {
    padding: 0.7rem 0.75rem 0.8rem;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-strong);
    border-radius: var(--radius);
    background: var(--card-bg);
    box-shadow: var(--shadow);
}

.protect-card-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.protect-card-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
}

.protect-card-title svg {
    flex: none;
    color: var(--primary-strong);
}

.protect-count {
    flex: none;
    min-width: 1.45rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: var(--info-bg);
    color: var(--text);
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
}

.protect-collapse {
    flex: none;
    padding: 0.2rem 0.35rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 0.78rem;
    cursor: pointer;
}

.protect-collapse:hover {
    background: var(--rail-hover);
    color: var(--text);
}

.protect-body {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

/* Свёрнутое состояние: видна только полоска с числом дел. */
.protect-card.is-collapsed .protect-body { display: none; }
.protect-card.is-collapsed { padding-bottom: 0.6rem; }

.protect-row {
    display: grid;
    gap: 0.15rem;
    padding: 0.5rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--panel-bg);
    color: inherit;
    text-decoration: none;
}

a.protect-row:hover { border-color: var(--primary-strong); }

.protect-row-text {
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
}

.protect-row-note {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.protect-row .btn { margin-top: 0.35rem; justify-self: start; }

.protect-more {
    border-top: 1px solid var(--border-color);
    padding-top: 0.45rem;
}

.protect-more summary {
    color: var(--muted);
    font-size: 0.78rem;
    cursor: pointer;
}

.protect-more p {
    margin-top: 0.4rem;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* Блок «Как защитить доступ» в регистрации, настройках и окне тестового аккаунта. */
.protection-fields {
    padding: 0.85rem;
    margin-bottom: 1rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
    background: var(--panel-bg);
}

.protection-lead {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
}

.protection-lead svg { flex: none; color: var(--primary-strong); }

.protection-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.4rem;
    font-size: 0.85rem;
}

/* Строка над формой кода в «Настройках»: есть ли код и когда выпущен. */
.recovery-state { color: var(--text); font-weight: 600; }

/* Окно с только что выпущенным кодом: путь один — скачать файл. */
.recovery-file-card { max-width: 520px; }

.recovery-file-body { display: grid; gap: 0.75rem; }

.recovery-file-meta {
    display: grid;
    gap: 0.2rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.recovery-file-meta b { color: var(--text); }

.recovery-code-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-bg);
}

.recovery-code-box code {
    flex: 1 1 auto;
    color: var(--text);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    word-break: break-word;
}

.recovery-file-card[data-downloaded='1'] .recovery-code-box { border-color: var(--primary-strong); }

/* Путь восстановления: код → секретное слово и дата рождения → новый пароль.
   Карточка шире обычной входной: список шагов с длинными подписями. */
.recover-card { max-width: 560px; }

.recover-steps {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 1.1rem;
    list-style: none;
    counter-reset: recover-step;
}

.recover-steps li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.86rem;
}

.recover-steps li::before {
    counter-increment: recover-step;
    content: counter(recover-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.45rem;
    height: 1.45rem;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.recover-steps li.is-current { color: var(--text); font-weight: 700; }

.recover-steps li.is-current::before {
    border-color: var(--primary-strong);
    background: var(--info-bg);
    color: var(--text);
}

.recover-steps li.is-done { color: var(--text); }

.recover-steps li.is-done::before {
    content: '\2713';
    border-color: var(--success);
    color: var(--success);
}

/* Статусы защиты в карточке пользователя админ-панели. */
.admin-protection-row { margin-top: 0.4rem; }

.admin-protection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

/* ---------- Адаптивность ---------- */

@media (max-width: 1240px) {
    .app-shell { gap: 1rem; }
}

@media (max-width: 1024px) {
    .app-shell {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 1rem;
        margin: 1rem auto;
    }

    .panel-middle {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 1rem;
    }

    /* Колонка разделов на планшете раскрывается: её дети становятся блоками сетки,
       карточка защиты занимает всю ширину под полосой разделов. */
    .panel-side {
        display: contents;
    }

    .section-rail,
    .panel-side .section-rail {
        position: sticky;
        top: var(--header-height);
        z-index: 20;
        flex-direction: row;
        gap: 0.4rem;
        padding: 0 0 0.75rem;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
        overflow-x: auto;
        background: var(--card-bg);
        scrollbar-width: thin;
    }

    .rail-link { width: auto; white-space: nowrap; padding: 0.5rem 0.8rem; }
    .rail-lock { margin-left: 0.1rem; }
}

@media (max-width: 760px) {
    body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

    .section-rail,
    .panel-side .section-rail { display: none; }

    .mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        gap: 0.15rem;
        padding: 0.3rem 0.35rem calc(0.3rem + env(safe-area-inset-bottom));
        background: var(--card-bg);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }

    .mobile-nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 0;
        min-width: 0;
        padding: 0.55rem 0;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--text);
        cursor: pointer;
        text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .mobile-nav-link:hover { background: var(--rail-hover); }

    .mobile-nav-link.is-active {
        background: var(--primary-color);
        color: #2f2f2b;
    }

    .mobile-nav-link svg { width: 22px; height: 22px; }

    /* Окно cookie не должно налезать на нижнюю навигацию телефона. Тосты живут
       выше него по слоям (z-index у них 3000), поэтому короткое перекрытие ничего
       не ломает: тост живёт несколько секунд, а окно никуда не девается. */
    .cookies-banner {
        bottom: calc(62px + env(safe-area-inset-bottom) + 0.5rem);
    }

    /* Карточка защиты на телефоне идёт обычным блоком над содержимым: она не
       накладывается ни на нижнюю навигацию, ни на текст. */
    .protect-card {
        padding: 0.7rem 0.8rem 0.8rem;
    }

    /* Тосты уезжают выше карточки защиты, иначе два блока слипаются в одну кашу. */
    .profile-toast,
    .toast { bottom: calc(66px + env(safe-area-inset-bottom)); }

    .settings-wrap { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }

    .settings-nav {
        position: static;
        grid-auto-flow: column;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .settings-nav-btn {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.5rem 0.3rem;
        font-size: 0.82rem;
        text-align: center;
    }

    .messenger {
        grid-template-columns: minmax(0, 1fr);
        height: calc(100vh - var(--header-height) - 120px);
        min-height: 440px;
    }

    .messenger-list { border-right: 0; }

    .messenger-conversation { display: none; }

    .messenger.is-chat-open .messenger-list { display: none; }
    .messenger.is-chat-open .messenger-conversation { display: grid; }

    .conversation-back { display: inline-flex; }
    .message { max-width: 88%; }

    /* Возрастная группа остаётся в профиле: в шапке на узком экране подпись
       «Select» налезала на кнопку «?». */
    .header-brand .badge-age { display: none; }

    /* Схема синквейна — подсказка для широкого экрана. На телефоне переписка
       важнее: свёрнутая строка всё равно отнимает высоту у сообщений. */
    .chat-scheme { display: none; }
}

@media (max-width: 600px) {
    .header-content { padding: 0.5rem 1rem; }
    .logo span { display: none; }
    .header-user-wrap { display: none; }

    /* В поддержке длинное предупреждение занимало пол-экрана — оставляем суть. */
    .ai-warning-full { display: none; }
    .ai-warning-short { display: inline; }
    .token-chip { padding: 0.3rem 0.55rem; font-size: 0.82rem; }
    .panel-middle { padding: 0; }
    .post-card, .card { padding: 1rem; }
    .modal { padding: 0.75rem; }
    .modal-content { max-height: calc(100vh - 1.5rem); }
    .modal-body { padding: 0.375rem 1.1rem; }
    h1 { font-size: 1.4rem; }
    .messenger { height: calc(100vh - var(--header-height) - 100px); }
    .birth-selects { grid-template-columns: 1fr 1.25fr 1fr; }
    .profile-card { padding: 1.35rem 1rem 1.15rem; }
    .profile-stats { gap: 1.5rem; }
    .profile-edit-avatar { flex-direction: column; align-items: flex-start; }
    .profile-card-actions { top: 0.7rem; right: 0.7rem; gap: 0.3rem; }
    .profile-bell, .profile-verify-hint { width: 38px; height: 38px; }
    .profile-report { top: 0.7rem; right: 0.7rem; padding: 0.4rem 0.55rem; font-size: 0.78rem; }
    .profile-report span { display: none; }
    .phone-frame { height: calc(100vh - 1.5rem); border-radius: 18px; }
    .feed-search-results { max-height: 60vh; }
    .legal-nav a { font-size: 0.8rem; }
}

/* ---------- Анимация появления ---------- */

.fade-in { animation: fade-in 0.35s ease-out; }

@keyframes fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Свои выпадающие списки ---------- */

.cselect {
    position: relative;
    min-width: 0;
}

.cselect.is-open { z-index: 160; }

.cselect-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.cselect-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--background);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cselect-trigger:hover { border-color: var(--primary-strong); }

.cselect-trigger:focus-visible {
    outline: 2px solid var(--primary-strong);
    outline-offset: 1px;
}

.cselect-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cselect-value.is-placeholder { color: var(--muted); }

.cselect-arrow {
    display: inline-flex;
    color: var(--muted);
    transition: transform 0.15s ease;
}

.cselect.is-open .cselect-arrow { transform: rotate(180deg); }

.cselect.is-invalid .cselect-trigger {
    border-color: var(--danger);
    box-shadow: 0 0 0 1px var(--danger);
}

.cselect-menu {
    position: absolute;
    z-index: 60;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 264px;
    overflow-y: auto;
    padding: 0.3rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.cselect-option {
    display: block;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cselect-option:hover,
.cselect-option:focus-visible {
    background: var(--rail-hover);
    outline: none;
}

.cselect-option.is-selected {
    background: var(--info-bg);
    font-weight: 600;
}

.cselect-option:disabled {
    color: var(--muted);
    cursor: default;
}

.cselect-compact .cselect-trigger {
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    font-size: 0.82rem;
}

.cselect-compact .cselect-menu {
    min-width: 170px;
    right: auto;
}

/* Список сортировки рецензий стоит у правого края карточки, поэтому и меню
   цепляется правым краем: иначе на телефоне оно выглядывает за карточку. */
.reviews-sort .cselect-menu {
    left: auto;
    right: 0;
}


/* ---------- Спрятанная страница про соцсеть «ИТД» (пасхалка) ----------
   Отдельный стиль, а не обычная лента: страница должна читаться как шуточный
   стенд, а не как раздел сайта. */

.itd-room {
    max-width: 660px;
    margin: 0 auto;
}

.itd-hero {
    text-align: center;
}

.itd-name {
    margin: 0;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-indent: 0.35em;
}

.itd-slogan {
    margin: 0.2rem 0 0.8rem;
    color: var(--muted);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
}

.itd-verse {
    margin: 0.4rem 0;
    text-align: center;
    line-height: 1.9;
    font-size: 1.05rem;
}

.itd-rules { margin-bottom: 0.6rem; }

.itd-count {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
    letter-spacing: 0.04em;
}

.itd-invite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0.6rem 0;
}

.itd-code {
    padding: 0.3rem 0.7rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
    font-family: monospace;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.itd-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

@media (max-width: 600px) {
    .itd-name { font-size: 2rem; }
}