/* Єдиний «людський» стиль для всіх сторінок. Підключається останнім. */
:root {
    --ink: #f4ede3;
    --muted: #b3aa9d;
    --accent: #5b9dff;
    --accent-soft: rgba(91, 157, 255, 0.14);
    --warm: #ffb454;
    --warm-soft: rgba(255, 180, 84, 0.16);
    --leaf: #7ed39a;
    --leaf-soft: rgba(126, 211, 154, 0.15);
    --panel: #201e1b;
    --bg: #161412;
    --line: rgba(255, 238, 215, 0.1);
    --r: 22px;
}
html[data-theme="light"] {
    --ink: #2b2620;
    --muted: #6d655a;
    --accent: #2563d9;
    --accent-soft: rgba(37, 99, 217, 0.1);
    --warm: #c9780f;
    --warm-soft: rgba(233, 150, 30, 0.16);
    --leaf: #2f8f55;
    --leaf-soft: rgba(47, 143, 85, 0.13);
    --panel: #fffaf1;
    --bg: #f5eee2;
    --line: rgba(60, 40, 15, 0.12);
}

body { font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; }
html:not([data-theme="light"]) body { background: #0e1015; }
html[data-theme="light"] body { background: #f7f4ee; }

/* Заголовки: суцільний колір, без градієнтів */
.hero-title, .block-title, .cta h2 { color: var(--ink); letter-spacing: -0.03em; }
.hero-title { font-family: inherit; font-size: clamp(56px, 8vw, 112px); white-space: normal; line-height: 1; }
.hero-title span, .block-title span {
    background: none; -webkit-text-fill-color: currentColor; color: var(--accent);
}
.hero-right h2 { color: var(--ink); font-weight: 700; }
.hero-right p { color: var(--muted); font-size: 19px; line-height: 1.7; }
.hero { margin: 80px auto; gap: 28px; }

/* Кнопки */
.btn { border-radius: 12px; font-weight: 600; }
.btn-register { background: var(--accent); border-color: var(--accent); }
.btn-register:hover { background: var(--accent); border-color: var(--accent); filter: brightness(1.12); }
.btn-login { color: var(--ink); border-color: var(--line); border-width: 1px; background: var(--accent-soft); }
.btn-login:hover { color: var(--ink); background: var(--accent-soft); border-color: var(--accent); }
html[data-theme="light"] .btn-login:hover { color: var(--ink); background: var(--accent-soft); border-color: var(--accent); }

/* Секції */
.block { text-align: left; }
.block-sub { color: var(--muted); font-size: 19px; margin-bottom: 32px; }

.card {
    background: var(--panel);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px;
    box-shadow: none;
}
.card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.5); }
html[data-theme="light"] .card { background: var(--panel); border-color: var(--line); }
.card h3 { color: var(--ink); font-size: 23px; letter-spacing: -0.01em; }
.card p { color: var(--muted); font-size: 16px; line-height: 1.65; }
.card-icon {
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--accent-soft); box-shadow: none; color: var(--accent);
}
.card-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card-more { color: var(--accent); }

.chips { justify-content: flex-start; }
.chip { color: var(--ink); background: var(--panel); border: 1px solid var(--line); font-weight: 500; }
.chip:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
html[data-theme="light"] .chip { color: var(--ink); }
html[data-theme="light"] .chip:hover { color: #fff; }

.cta {
    text-align: left; padding: 52px 48px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 24px;
}
html[data-theme="light"] .cta { background: var(--panel); }
.cta p { color: var(--muted); }
.cta-buttons { justify-content: flex-start; }

.footer { border-top-color: var(--line); }
.footer-links a { color: var(--muted); }

@media (max-width: 560px) {
    .cta { padding: 36px 24px; }
    .hero-title { font-size: 56px; }
}


/* =========================================================
   Усі сторінки
   ========================================================= */
body, button, input, textarea, select { font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; }
html:not([data-theme="light"]) body { background: var(--bg) !important; background-image: none !important; color: var(--ink); }
html[data-theme="light"] body { background: var(--bg) !important; background-image: none !important; color: var(--ink); }
.background_decor { display: none !important; }

/* Хедер: плоский, без свічення */
.header {
    background: var(--panel) !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 1px solid var(--line);
    box-shadow: none !important;
}
.header .middle_part { background: transparent; border: none; gap: 6px; }
.header .header_link { color: var(--muted); font-weight: 500; }
.header .header_link:hover { color: var(--ink); background: var(--accent-soft); }
.header .header_link[aria-current="page"] { color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.header .search_input { color: var(--ink); background-color: var(--accent-soft); }
.header .search_input::placeholder { color: var(--muted); }
.header .search_input:focus { box-shadow: none; }
.header .theme_switch, .header .logout { color: var(--ink); background: var(--accent-soft); border: none; }
.header .theme_switch:hover { background: var(--accent-soft); filter: brightness(1.3); }
html[data-theme="light"] .header .logo_img + .logo_img,
html[data-theme="light"] .footer-brand img + img { filter: brightness(0.2); }

/* ---------- Чат ---------- */
.main_chat, .rooms {
    background: var(--panel) !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: var(--line) !important;
    box-shadow: none !important;
}
.main_chat { border-radius: 20px; }
.rooms_title { color: var(--ink); }
.room { border-radius: 12px; color: var(--ink); }
.room:hover { background: var(--accent-soft) !important; }
.room.active { background: var(--accent) !important; color: #fff; }
.room_icon { background: var(--accent-soft) !important; color: var(--accent); }
.room.active .room_icon { background: rgba(255, 255, 255, 0.22) !important; color: #fff; }
.chat_head, .composer { border-color: var(--line) !important; }
.chat_title { color: var(--ink); }
.chat_status, .room_last { color: var(--muted) !important; }
.room.active .room_last { color: rgba(255, 255, 255, 0.85) !important; }
.bubble { border-radius: 16px; }
.bubble_in { background: var(--accent-soft) !important; color: var(--ink) !important; }
.bubble_out { background: var(--accent) !important; color: #fff; }
.massage_input { color: var(--ink) !important; background: var(--accent-soft) !important; border-radius: 14px; }
.massage_input:focus { box-shadow: none; border-color: var(--accent); }
.send { background: var(--accent); border-radius: 12px; }

/* ---------- Форум ---------- */
.forum { background: transparent !important; box-shadow: none !important; }
.cats, .board { background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: 18px; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; }
.cat { border-radius: 12px; }
.cat:hover { background: var(--accent-soft) !important; }
.cat.active { background: var(--accent) !important; color: #fff; }
.topic { background: transparent !important; border: 1px solid var(--line) !important; border-radius: 14px; }
.topic:hover { background: var(--accent-soft) !important; border-color: var(--accent) !important; }
.t_title, .toolbar h1 { color: var(--ink); }
.t_meta { color: var(--muted); }
.tab { border-radius: 10px; }
.tab.active { background: var(--accent) !important; color: #fff; }
.tag { background: var(--accent-soft) !important; color: var(--accent) !important; border-radius: 8px; }
.like.on { color: var(--accent); }
dialog { border-radius: 20px !important; }
.field input, .field textarea, .field select, .dlg_foot input, .filter { color: var(--ink); background: var(--accent-soft) !important; border-radius: 12px; }

/* ---------- Вхід / реєстрація ---------- */
.register_card, html[data-theme="light"] .register_card {
    background: var(--panel) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px;
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    font-family: inherit;
}
.register_title { font-weight: 700; letter-spacing: -0.02em; text-align: left; }
.register_subtitle, .login_text, .divider, .terms_text { color: var(--muted) !important; text-align: left; }
.form_label { color: var(--ink) !important; }
.form_input, html[data-theme="light"] .form_input { color: var(--ink) !important; background: var(--accent-soft) !important; border: 1px solid var(--line) !important; border-radius: 12px; }
.form_input:focus { border-color: var(--accent) !important; box-shadow: none !important; }
.social_button, html[data-theme="light"] .social_button { color: var(--ink) !important; background: transparent !important; border: 1px solid var(--line) !important; border-radius: 12px; }
.social_button:hover { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.register_button { background: var(--accent) !important; border-radius: 12px; box-shadow: none !important; }
.divider_line { background: var(--line) !important; }

/* ---------- Інструкція ---------- */
.doc_title { color: var(--ink); letter-spacing: -0.03em; }
.doc_lead { color: var(--muted) !important; }
.step, .faq, html[data-theme="light"] .faq {
    background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: 16px;
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important;
}
.step h2, .faq summary, .faq_title { color: var(--ink); }
.step p, .faq p { color: var(--muted); }
.step::before { background: var(--accent-soft) !important; color: var(--accent) !important; box-shadow: none !important; }
.doc_btn, html[data-theme="light"] .doc_btn { color: var(--ink); background: var(--accent-soft); border: 1px solid var(--line); border-radius: 12px; }
.doc_btn.primary, html[data-theme="light"] .doc_btn.primary { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ---------- Профіль ---------- */
.profile_card, html[data-theme="light"] .profile_card {
    background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: 20px;
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; color: var(--ink);
}
.profile_nick { color: var(--ink); letter-spacing: -0.02em; }
.profile_status, .profile_info dt, html[data-theme="light"] .profile_info dt { color: var(--muted); }
.profile_info dd { color: var(--ink); }
.profile_info div, html[data-theme="light"] .profile_info div { border-color: var(--line) !important; }
.btn_p { background: var(--accent); border-radius: 12px; }
.btn_p_ghost, html[data-theme="light"] .btn_p_ghost { color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 12px; }

/* ---------- Адмінка ---------- */
.admin, html[data-theme="light"] .admin { color: var(--ink); }
.adm_box, html[data-theme="light"] .adm_box { background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: 16px; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; }
.adm_tab { border-radius: 10px; color: var(--muted); }
.adm_tab.active, html[data-theme="light"] .adm_tab.active { background: var(--accent) !important; color: #fff; }
.adm_form input { color: var(--ink); background: var(--accent-soft) !important; border-radius: 10px; }
.adm_btn { background: var(--accent); border-radius: 10px; }
.adm_list li, html[data-theme="light"] .adm_list li { border-color: var(--line) !important; }
.adm_list li.sel { background: var(--accent-soft) !important; }

/* =========================================================
   Інше розташування
   ========================================================= */

/* Хедер: лого → навігація зліва, пошук і дії справа */
.header { grid-template-columns: auto 1fr auto; gap: 40px; }
.header .middle_part { justify-self: start; }

/* Головна: текст і телефон у двох колонках */
.hero_wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 24px;
    padding: 0 40px;
    box-sizing: border-box;
}
.hero { margin: 70px 0; padding: 0; max-width: none; }
.phone_img { position: static; transform: none; display: flex; justify-content: center; }
.phone_img img { height: auto; max-height: 600px; width: auto; max-width: 100%; transform: rotate(4deg); }

/* Можливості: одна велика картка і дві поруч */
.block { max-width: 1200px; padding: 70px 40px 10px; }
#features .cards { grid-template-columns: 1.25fr 1fr; grid-auto-rows: auto; }
#features .card:first-child { grid-row: span 2; padding: 40px; justify-content: flex-end; }
#features .card:first-child h3 { font-size: 34px; }
#features .card:first-child p { font-size: 18px; flex: 0; }
#features .card:first-child .card-icon { width: 60px; height: 60px; margin-bottom: auto; }

/* Напрямки: заголовок зліва, теми справа */
.block:not(#features) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: 48px;
    align-items: center;
}
.block:not(#features) .block-sub { margin-bottom: 0; }
.block:not(#features) .chips { grid-column: 2; grid-row: 1 / span 2; }

/* Заклик: текст зліва, кнопки справа */
.cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
    align-items: center;
}
.cta h2, .cta p { grid-column: 1; }
.cta .cta-buttons { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.cta p { margin-bottom: 0; }

@media (max-width: 900px) {
    .header { gap: 16px; }
    .hero_wrap { grid-template-columns: 1fr; padding: 0 20px; }
    .phone_img img { transform: none; max-height: 480px; }
    #features .cards { grid-template-columns: 1fr; }
    #features .card:first-child { grid-row: auto; }
    .block:not(#features), .cta { grid-template-columns: 1fr; }
    .block:not(#features) .chips { grid-column: 1; grid-row: auto; margin-top: 24px; }
    .cta .cta-buttons { grid-column: 1; grid-row: auto; margin-top: 24px; }
}
@media (max-width: 760px) {
    .header { grid-template-columns: auto 1fr; }
}
.hero_wrap { max-width: 1200px; }

/* Більший хедер і телефон */
.header { height: 96px; padding: 0 40px; }
.header .logo_img { height: 46px; }
.header .logo_img + .logo_img { height: 36px; }
.header .header_link { font-size: 20px; padding: 11px 24px; }
.header .search_input { height: 48px; width: 260px; font-size: 17px; padding-left: 46px; background-size: 20px; background-position: 16px center; }
.header .search_input:focus { width: 320px; }
.header .avatar_link img { width: 48px; height: 48px; }
.header .theme_switch { width: 48px; height: 48px; font-size: 20px; }
.header .logout { height: 48px; font-size: 16px; padding: 0 20px; }

.hero_wrap { max-width: 1320px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.phone_img img { max-height: none; width: min(100%, 720px); }

@media (max-width: 1000px) {
    .header { height: 72px; padding: 0 16px; }
    .header .logo_img { height: 36px; }
    .header .logo_img + .logo_img { height: 28px; }
    .header .header_link { font-size: 16px; padding: 8px 14px; }
    .header .search_input, .header .search_input:focus { width: 160px; height: 40px; }
}
@media (max-width: 900px) { .phone_img img { width: min(100%, 560px); } }
@media (max-width: 760px) { .header { height: 64px; } }
.hero_wrap { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.hero-title { font-size: clamp(52px, 6.4vw, 96px); white-space: nowrap; }
.phone_img img { width: min(125%, 900px); max-width: none; margin-right: -8%; }
@media (max-width: 900px) { .phone_img img { width: min(100%, 600px); margin-right: 0; } .hero-title { white-space: normal; } }

/* Форум: пошук по темах — лише саме поле, без підкладки */
.filter { background: none !important; border-radius: 0; }
.filter input { width: 100%; box-sizing: border-box; height: 44px; padding: 0 16px; border: 1px solid var(--line); outline: none; }
.filter input:focus { border-color: var(--accent); box-shadow: none; }

/* =========================================================
   Бокова панель замість верхнього хедера (десктоп)
   ========================================================= */
@media (min-width: 901px) {
    body { padding-left: 264px; box-sizing: border-box; }

    .header {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 264px; height: 100vh !important;
        display: flex !important; flex-direction: column; align-items: stretch;
        gap: 28px; padding: 28px 18px 24px !important;
        box-sizing: border-box; overflow-y: auto;
        border-bottom: none; border-right: 1px solid var(--line);
    }
    .header .left_part, .header .middle_part, .header .right_part { width: 100%; }
    .header .logo_img { height: 38px; }
    .header .logo_img + .logo_img { height: 30px; }
    .header .logo_div { padding-left: 6px; }

    .header .middle_part {
        flex-direction: column; align-items: stretch; justify-content: flex-start;
        justify-self: stretch; gap: 4px; padding: 0; flex: 1;
    }
    .header .header_link { display: block; font-size: 18px; padding: 12px 16px; border-radius: 12px; }

    .header .right_part {
        flex-direction: column-reverse; align-items: stretch; justify-content: flex-start; gap: 10px;
    }
    .header .search_input, .header .search_input:focus { width: 100%; height: 44px; font-size: 16px; }
    .header .theme_switch, .header .logout { width: 100%; height: 44px; border-radius: 12px; }
    .header .avatar_link { align-self: flex-start; }
    .header .avatar_link img { width: 44px; height: 44px; }

    .hero_wrap { padding: 0 32px; }
    .main_chat { height: calc(100vh - 80px) !important; }
    .forum { min-height: calc(100vh - 88px) !important; }
    .register_card { margin: 0 auto; }
}

/* Кнопка згортання панелі */
.sidebar_toggle { display: none; }
@media (min-width: 901px) {
    body, .header { transition: padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
    .sidebar_toggle {
        position: fixed; top: 20px; left: 276px; z-index: 120;
        display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
        color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
        cursor: pointer; transition: left 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s, background 0.2s;
    }
    .sidebar_toggle:hover { color: var(--ink); background: var(--accent-soft); }
    .sidebar_toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .sidebar_toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    html.sidebar-collapsed body { padding-left: 0; }
    html.sidebar-collapsed .header { transform: translateX(-100%); }
    html.sidebar-collapsed .sidebar_toggle { left: 16px; }
}

/* Кнопка згортання — всередині панелі, праворуч від логотипа */
@media (min-width: 901px) {
    .header .logo_img { height: 31px; }
    .header .logo_img + .logo_img { height: 24px; }
    .sidebar_toggle { left: 210px; top: 28px; width: 36px; height: 36px; background: transparent; border-color: transparent; }
    .sidebar_toggle:hover { background: var(--accent-soft); }
    html.sidebar-collapsed .sidebar_toggle { left: 16px; background: var(--panel); border-color: var(--line); }
}


/* =========================================================
   Повне оновлення: тепліший, м'якший, з характером
   ========================================================= */
body { line-height: 1.55; }
.card, .main_chat, .rooms, .cats, .board, .step, .faq, .profile_card, .register_card, .adm_box, .cta { border-radius: var(--r) !important; }
.btn, .doc_btn, .btn_p, .register_button, .adm_btn { border-radius: 999px !important; }
.card, .cta, .step, .faq, .profile_card, .register_card, .adm_box {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -28px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="light"] .card, html[data-theme="light"] .cta, html[data-theme="light"] .step,
html[data-theme="light"] .faq, html[data-theme="light"] .profile_card, html[data-theme="light"] .register_card,
html[data-theme="light"] .adm_box { box-shadow: 0 14px 34px -24px rgba(90, 60, 20, 0.35) !important; }

/* Бокова панель: м'які пігулки, теплий акцент */
.header { background: var(--panel) !important; }
.header .header_link { border-radius: 999px !important; }
.header .header_link[aria-current="page"] { background: var(--warm-soft); color: var(--warm); font-weight: 600; }
.header .search_input, .header .theme_switch, .header .logout { background-color: var(--line); }

/* Головна: бейдж, підкреслення, різнокольорові картки */
.hero-badge {
    display: inline-block; margin: 0 0 18px; padding: 7px 16px;
    font-size: 15px; font-weight: 600; color: var(--warm);
    background: var(--warm-soft); border-radius: 999px; transform: rotate(-2deg);
}
.hero-title span { position: relative; white-space: nowrap; }
.hero-title span::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -0.12em; height: 0.18em;
    background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 30 2, 50 12, 80 6 S 140 2, 170 7 S 195 6, 198 5' fill='none' stroke='%23ffb454' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
#features .card:nth-child(1) .card-icon { background: var(--accent-soft); color: var(--accent); }
#features .card:nth-child(2) .card-icon { background: var(--warm-soft); color: var(--warm); }
#features .card:nth-child(3) .card-icon { background: var(--leaf-soft); color: var(--leaf); }
#features .card:nth-child(2) .card-more { color: var(--warm); }
#features .card:nth-child(3) .card-more { color: var(--leaf); }
#features .card:nth-child(2):hover { border-color: var(--warm); }
#features .card:nth-child(3):hover { border-color: var(--leaf); }
.chip:nth-child(3n+1):hover { background: var(--accent); border-color: var(--accent); }
.chip:nth-child(3n+2):hover { background: var(--warm); border-color: var(--warm); color: #2b2620; }
.chip:nth-child(3n):hover { background: var(--leaf); border-color: var(--leaf); color: #14231a; }
.chip { padding: 13px 24px; }
.cta { background: var(--warm-soft) !important; border-color: transparent !important; }
.cta h2 { letter-spacing: -0.03em; }

/* Чат, форум, інструкція: теплі деталі */
.room.active, .cat.active, .tab.active, .adm_tab.active { background: var(--accent) !important; }
.bubble_out { background: var(--accent) !important; }
.bubble { border-radius: 18px; }
.step::before { background: var(--warm-soft) !important; color: var(--warm) !important; }
.tag { background: var(--warm-soft) !important; color: var(--warm) !important; }
.like.on { color: var(--warm); }
.faq summary { cursor: pointer; }
.register_title, .doc_title, .profile_nick { letter-spacing: -0.035em; }
.cta { width: calc(100% - 80px); max-width: 1120px; }
@media (max-width: 900px) { .cta { width: calc(100% - 32px); } }

/* =========================================================
   Інша перестановка блоків на всіх сторінках (десктоп)
   ========================================================= */
@media (min-width: 901px) {
    /* Чат: список кімнат справа */
    .main_chat { flex-direction: row-reverse; }
    .rooms { border-right: none !important; border-left: 1px solid var(--line) !important; }

    /* Форум: розділи справа */
    .forum { flex-direction: row-reverse; }
    .cats { border-right: none !important; border-left: 1px solid var(--line) !important; }

    /* Інструкція: заголовок зліва, кроки й питання справа */
    .doc { max-width: 1120px; display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 56px; align-items: start; }
    .doc > .doc_title { grid-column: 1; grid-row: 1; position: sticky; top: 56px; }
    .doc > .doc_lead { grid-column: 1; grid-row: 2; margin-top: 0; }
    .doc > .steps { grid-column: 2; grid-row: 1 / span 2; }
    .doc > .faq_title, .doc > .faq, .doc > .doc_cta { grid-column: 2; }

    /* Профіль: аватар і ім'я зліва, дані справа */
    .profile_card#profile {
        max-width: 860px; display: grid; grid-template-columns: 260px minmax(0, 1fr);
        column-gap: 40px; align-items: center; text-align: left;
    }
    #profile .profile_avatar { grid-column: 1; grid-row: 1; justify-self: center; }
    #profile .profile_nick { grid-column: 1; grid-row: 2; text-align: center; }
    #profile .profile_status { grid-column: 1; grid-row: 3; text-align: center; }
    #profile .profile_info { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
    #profile .profile_actions { grid-column: 1 / -1; grid-row: 4; margin-top: 28px; justify-content: center; }

    /* Вхід і реєстрація: привітання зліва, картка справа */
    .page_content { justify-content: center; gap: 80px; }
    .page_content::before {
        content: "Тут приємно вчитись, питати й ділитись знаннями.";
        max-width: 380px; font-size: 44px; font-weight: 800; line-height: 1.12;
        letter-spacing: -0.035em; color: var(--ink);
    }
    .page_content { padding-left: 40px; padding-right: 40px; }
    .register_card { margin: 0; flex: none; }
}
@media (min-width: 901px) { .doc { grid-template-rows: auto 1fr; } .doc > .doc_lead { align-self: start; } }

/* =========================================================
   Інша структура блоків (десктоп)
   ========================================================= */
@media (min-width: 901px) {

    /* ---------- Головна ---------- */
    .hero_wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
    .phone_img { order: -1; }
    .phone_img img { margin-right: 0; margin-left: -8%; transform: rotate(-5deg); }
    .hero { padding-left: 24px; }

    /* Можливості: широкі рядки замість карток */
    #features .cards { grid-template-columns: 1fr; gap: 14px; }
    #features .card, #features .card:first-child {
        display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: auto auto;
        column-gap: 24px; row-gap: 4px; align-items: center; grid-row: auto;
        padding: 24px 30px; justify-content: stretch;
    }
    #features .card .card-icon, #features .card:first-child .card-icon { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; margin: 0; }
    #features .card h3, #features .card:first-child h3 { grid-column: 2; grid-row: 1; font-size: 24px; align-self: end; }
    #features .card p, #features .card:first-child p { grid-column: 2; grid-row: 2; font-size: 16px; align-self: start; flex: none; }
    #features .card .card-more { grid-column: 3; grid-row: 1 / span 2; margin: 0; white-space: nowrap; }

    /* Напрямки: заголовок зверху, великі плитки в ряд */
    .block:not(#features) { display: block; }
    .block:not(#features) .block-sub { margin-bottom: 28px; }
    .block:not(#features) .chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
    .chip { padding: 36px 18px 18px; font-size: 20px; border-radius: 20px; text-align: left; }

    /* Заклик: по центру, одним стовпчиком */
    .cta { display: block; text-align: center; padding: 64px 40px; }
    .cta .cta-buttons { justify-content: center; margin-top: 28px; }

    /* ---------- Чат: кімнати зверху смугою ---------- */
    .main_chat { flex-direction: column; }
    .rooms { width: 100%; flex-direction: row; align-items: center; border: none !important; border-bottom: 1px solid var(--line) !important; }
    .rooms_title { padding: 0 8px 0 22px; white-space: nowrap; }
    .rooms_list { flex-direction: row; padding: 10px 12px; overflow-x: auto; overflow-y: hidden; }
    .room { width: 230px; flex: none; }
    .chat_view { flex: 1; min-height: 0; }

    /* ---------- Форум: розділи смугою зверху, теми у дві колонки ---------- */
    .forum { flex-direction: column; }
    .cats { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 20px; box-sizing: border-box; border: none !important; border-bottom: 1px solid var(--line) !important; }
    .cats h2 { margin: 0; white-space: nowrap; }
    #cats_list { display: flex; gap: 8px; overflow-x: auto; }
    .cat { width: auto; flex: none; }
    .topics { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }

    /* ---------- Інструкція: три кроки в ряд ---------- */
    .doc { display: block; max-width: 1100px; }
    .doc > .doc_title { position: static; }
    .doc > .doc_lead { margin: 12px 0 36px; }
    .doc > .steps { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .doc .step { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px; }
    .doc > .faq_title { margin-top: 56px; }
    .doc > .doc_cta { margin-top: 36px; }
}
@media (min-width: 901px) { .hero-title { font-size: clamp(44px, 5vw, 78px); } }

/* Верхній екран головної — як раніше: текст зліва, телефон справа */
@media (min-width: 901px) {
    .hero_wrap { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
    .phone_img { order: 0; }
    .phone_img img { margin-left: 0; margin-right: -8%; transform: rotate(4deg); }
    .hero { padding-left: 0; }
    .hero-title { font-size: clamp(52px, 6.4vw, 96px); }
}

/* Фон у клітинку, як у зошиті */
html:not([data-theme="light"]) body {
    background-image:
        linear-gradient(rgba(255, 238, 215, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 238, 215, 0.06) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
    background-attachment: fixed !important;
}
html[data-theme="light"] body {
    background-image:
        linear-gradient(rgba(70, 110, 190, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(70, 110, 190, 0.16) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
    background-attachment: fixed !important;
}

/* Масштаб 110% */
html { zoom: 1.1; }
/* vh не враховує zoom — компенсуємо */
@media (min-width: 901px) {
    .header { height: calc(100vh / 1.1) !important; }
    .main_chat { height: calc((100vh - 80px) / 1.1) !important; }
    .forum { min-height: calc((100vh - 88px) / 1.1) !important; }
}