/* шрифты лежат на сервере (fonts/): Onest — текст и интерфейс, Unbounded — логотип и крупные заголовки */
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/onest-cyrillic-wght-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/onest-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/unbounded-cyrillic-wght-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/unbounded-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================
   nota. — index.css (v3)
   Фирменный жёлтый #FFD600 остаётся, вокруг — свежая
   «мессенджерная» подача: парящие стеклянные панели,
   круглые аватары с кольцом как у историй, пузырьки
   комментариев, плавающее нижнее меню на телефоне
   и автоматическая тёмная тема.
   ========================================================== */

:root {
    color-scheme: light dark;

    --accent: #FFD600;
    --accent-hover: #ffe24a;
    --accent-ink: #1a1600;
    --accent-soft: rgba(255, 214, 0, 0.22);
    --accent-glow: rgba(255, 196, 0, 0.45);
    --accent-text: #b58300;              /* жёлтый, читаемый на белом */

    /* кольцо «историй» вокруг аватаров */
    --ring: linear-gradient(135deg, #FFE600 0%, #FFB000 45%, #FF5C8A 100%);

    --ink: #121212;
    --ink-2: #3c3b38;
    --muted: #87857f;

    --line: rgba(18, 18, 18, 0.07);
    --line-2: rgba(18, 18, 18, 0.13);

    --bg: #e5e3dc;
    --dot: rgba(18, 18, 18, 0.06);
    --surface: #ffffff;
    --surface-2: #f2f1ec;
    --surface-3: #e8e7e1;
    --glass: rgba(255, 255, 255, 0.88);
    --glow: rgba(255, 214, 0, 0.14);
    --glow-2: rgba(255, 92, 138, 0.05);

    --danger: #e5484d;
    --danger-soft: rgba(229, 72, 77, 0.12);
    --like: #ff3b5c;
    --like-soft: rgba(255, 59, 92, 0.12);
    --fav: #f0a500;
    --fav-soft: rgba(240, 165, 0, 0.14);
    --comment: #2f8cff;
    --comment-soft: rgba(47, 140, 255, 0.12);

    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 18px;
    --r-xl: 22px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px -12px rgba(0, 0, 0, 0.10);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.05), 0 18px 40px -16px rgba(0, 0, 0, 0.18);

    --font: "Onest", "Inter", system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --display: "Unbounded", "Onest", system-ui, sans-serif;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* отступ парящих панелей от краёв окна */
    --gap: 12px;

    /* ширина боковых панелей (меняется в медиазапросах) */
    --left: 15%;
    --right: 15%;

    /* ширина колонки с постами */
    --col: 720px;
}

/* тёмная тема: по системе, если в настройках не выбрана светлая */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --accent-ink: #1a1600;
        --accent-soft: rgba(255, 214, 0, 0.16);
        --accent-glow: rgba(255, 214, 0, 0.28);
        --accent-text: #ffd600;

        --ink: #f2f1ee;
        --ink-2: #c9c8c3;
        --muted: #8b8a86;

        --line: rgba(255, 255, 255, 0.07);
        --line-2: rgba(255, 255, 255, 0.14);

        --bg: #0d0d0f;
        --dot: rgba(255, 255, 255, 0.045);
        --surface: #17171a;
        --surface-2: #212125;
        --surface-3: #2b2b30;
        --glass: rgba(23, 23, 26, 0.9);
        --glow: rgba(255, 214, 0, 0.06);
        --glow-2: rgba(255, 92, 138, 0.035);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
        --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 48px -16px rgba(0, 0, 0, 0.7);
    }
}

/* тёмная тема, выбранная вручную в настройках */
:root[data-theme="dark"] {
    color-scheme: dark;
    --accent-ink: #1a1600;
    --accent-soft: rgba(255, 214, 0, 0.16);
    --accent-glow: rgba(255, 214, 0, 0.28);
    --accent-text: #ffd600;

    --ink: #f2f1ee;
    --ink-2: #c9c8c3;
    --muted: #8b8a86;

    --line: rgba(255, 255, 255, 0.07);
    --line-2: rgba(255, 255, 255, 0.14);

    --bg: #0d0d0f;
    --dot: rgba(255, 255, 255, 0.045);
    --surface: #17171a;
    --surface-2: #212125;
    --surface-3: #2b2b30;
    --glass: rgba(23, 23, 26, 0.9);
    --glow: rgba(255, 214, 0, 0.06);
    --glow-2: rgba(255, 92, 138, 0.035);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 48px -16px rgba(0, 0, 0, 0.7);
}

:root[data-theme="light"] {
    color-scheme: light;
}

/* тема «Тёплая» */
:root[data-theme="warm"] {
    color-scheme: light;
    --accent-ink: #2a1a00;
    --accent-soft: rgba(255, 190, 30, 0.28);
    --accent-glow: rgba(255, 190, 30, 0.5);
    --accent-text: #a8620f;

    --ink: #3a2318;
    --ink-2: #5c3d2e;
    --muted: #9c7860;

    --line: rgba(90, 50, 25, 0.1);
    --line-2: rgba(90, 50, 25, 0.18);

    --bg: #efdcc5;
    --dot: rgba(150, 90, 40, 0.09);
    --surface: #fff8ef;
    --surface-2: #f8e6d2;
    --surface-3: #f0d6bc;
    --glass: rgba(255, 248, 239, 0.9);
    --glow: rgba(240, 150, 70, 0.20);
    --glow-2: rgba(217, 119, 87, 0.10);

    --danger: #c9402f;
    --danger-soft: rgba(201, 64, 47, 0.12);
    --like: #e0573b;
    --like-soft: rgba(224, 87, 59, 0.13);
    --fav: #d98a0b;
    --fav-soft: rgba(217, 138, 11, 0.15);
    --comment: #3f8f8a;
    --comment-soft: rgba(63, 143, 138, 0.13);

    --shadow-sm: 0 1px 2px rgba(90, 40, 10, 0.06), 0 6px 20px -12px rgba(90, 40, 10, 0.16);
    --shadow-md: 0 2px 6px rgba(90, 40, 10, 0.07), 0 18px 40px -16px rgba(90, 40, 10, 0.26);
}

/* тема «Голубая» */
:root[data-theme="sky"] {
    color-scheme: light;
    --accent-ink: #1a1600;
    --accent-soft: rgba(255, 190, 30, 0.28);
    --accent-glow: rgba(255, 190, 30, 0.5);
    --accent-text: #8f6a00;

    --ink: #2d2a26;
    --ink-2: #5a5248;
    --muted: #8f877c;

    --line: rgba(70, 60, 40, 0.1);
    --line-2: rgba(70, 60, 40, 0.18);

    --bg: #d6e0e4;
    --dot: rgba(120, 130, 120, 0.10);
    --surface: #fdfaf3;
    --surface-2: #e0e8ea;
    --surface-3: #cddde3;
    --glass: rgba(253, 250, 243, 0.9);
    --glow: rgba(120, 185, 225, 0.20);
    --glow-2: rgba(255, 195, 90, 0.26);

    --danger: #c9402f;
    --danger-soft: rgba(201, 64, 47, 0.12);
    --like: #ef476f;
    --like-soft: rgba(239, 71, 111, 0.13);
    --fav: #c27a00;
    --fav-soft: rgba(194, 122, 0, 0.15);
    --comment: #3a8bc4;
    --comment-soft: rgba(58, 139, 196, 0.13);

    --shadow-sm: 0 1px 2px rgba(60, 55, 40, 0.06), 0 6px 20px -12px rgba(60, 55, 40, 0.16);
    --shadow-md: 0 2px 6px rgba(60, 55, 40, 0.07), 0 18px 40px -16px rgba(60, 55, 40, 0.26);
}

/* тема «Мятная» */
:root[data-theme="mint"] {
    color-scheme: light;
    --accent-ink: #1a1600;
    --accent-soft: rgba(255, 190, 30, 0.28);
    --accent-glow: rgba(255, 190, 30, 0.5);
    --accent-text: #8f6a00;

    --ink: #2e2f14;
    --ink-2: #555a2c;
    --muted: #8b9158;

    --line: rgba(90, 90, 20, 0.1);
    --line-2: rgba(90, 90, 20, 0.18);

    --bg: #dde2bd;
    --dot: rgba(150, 150, 40, 0.10);
    --surface: #fcfcf0;
    --surface-2: #e3e8c4;
    --surface-3: #d2d9a5;
    --glass: rgba(252, 252, 240, 0.9);
    --glow: rgba(190, 200, 80, 0.24);
    --glow-2: rgba(255, 195, 80, 0.20);

    --danger: #c9402f;
    --danger-soft: rgba(201, 64, 47, 0.12);
    --like: #e8505b;
    --like-soft: rgba(232, 80, 91, 0.13);
    --fav: #c27a00;
    --fav-soft: rgba(194, 122, 0, 0.15);
    --comment: #4a8fa0;
    --comment-soft: rgba(74, 143, 160, 0.13);

    --shadow-sm: 0 1px 2px rgba(70, 70, 15, 0.06), 0 6px 20px -12px rgba(70, 70, 15, 0.16);
    --shadow-md: 0 2px 6px rgba(70, 70, 15, 0.07), 0 18px 40px -16px rgba(70, 70, 15, 0.26);
}

/* тема «Сиреневая» */
:root[data-theme="lilac"] {
    color-scheme: light;
    --accent-ink: #1a1600;
    --accent-soft: rgba(255, 190, 30, 0.28);
    --accent-glow: rgba(255, 190, 30, 0.5);
    --accent-text: #8f6a00;

    --ink: #3b1c33;
    --ink-2: #66384f;
    --muted: #a37790;

    --line: rgba(120, 40, 90, 0.1);
    --line-2: rgba(120, 40, 90, 0.18);

    --bg: #e9d6e3;
    --dot: rgba(190, 90, 150, 0.09);
    --surface: #fef8fb;
    --surface-2: #eed9e8;
    --surface-3: #e1c1d9;
    --glass: rgba(254, 248, 251, 0.9);
    --glow: rgba(190, 110, 210, 0.20);
    --glow-2: rgba(255, 190, 90, 0.20);

    --danger: #c9402f;
    --danger-soft: rgba(201, 64, 47, 0.12);
    --like: #e0506a;
    --like-soft: rgba(224, 80, 106, 0.13);
    --fav: #c27a00;
    --fav-soft: rgba(194, 122, 0, 0.15);
    --comment: #3f8f8f;
    --comment-soft: rgba(63, 143, 143, 0.13);

    --shadow-sm: 0 1px 2px rgba(90, 30, 60, 0.06), 0 6px 20px -12px rgba(90, 30, 60, 0.16);
    --shadow-md: 0 2px 6px rgba(90, 30, 60, 0.07), 0 18px 40px -16px rgba(90, 30, 60, 0.26);
}

/* тема «Тёмно-синяя» */
:root[data-theme="navy"] {
    color-scheme: dark;
    --accent-ink: #1a1600;
    --accent-soft: rgba(255, 214, 0, 0.16);
    --accent-glow: rgba(255, 214, 0, 0.28);
    --accent-text: #ffd600;

    --ink: #f5ead6;
    --ink-2: #d6c8ad;
    --muted: #a39d94;

    --line: rgba(255, 255, 255, 0.07);
    --line-2: rgba(255, 255, 255, 0.14);

    --bg: #141a2b;
    --dot: rgba(255, 225, 180, 0.04);
    --surface: #1d2336;
    --surface-2: #272e46;
    --surface-3: #343c58;
    --glass: rgba(29, 35, 54, 0.9);
    --glow: rgba(120, 130, 220, 0.12);
    --glow-2: rgba(255, 175, 70, 0.10);

    --danger: #ff6b6b;
    --danger-soft: rgba(255, 107, 107, 0.16);
    --like: #ff5c7a;
    --like-soft: rgba(255, 92, 122, 0.13);
    --fav: #f0b429;
    --fav-soft: rgba(240, 180, 41, 0.15);
    --comment: #4aa3ff;
    --comment-soft: rgba(74, 163, 255, 0.13);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 48px -16px rgba(0, 0, 0, 0.7);
}

/* тема «Тёмно-тёплая» */
:root[data-theme="warmd"] {
    color-scheme: dark;
    --accent-ink: #1a1600;
    --accent-soft: rgba(255, 214, 0, 0.16);
    --accent-glow: rgba(255, 214, 0, 0.28);
    --accent-text: #ffd600;

    --ink: #f6e7d4;
    --ink-2: #d8c3a8;
    --muted: #a38d76;

    --line: rgba(255, 240, 220, 0.07);
    --line-2: rgba(255, 240, 220, 0.14);

    --bg: #1c1410;
    --dot: rgba(255, 210, 160, 0.04);
    --surface: #261b15;
    --surface-2: #32241c;
    --surface-3: #413027;
    --glass: rgba(38, 27, 21, 0.9);
    --glow: rgba(240, 150, 70, 0.14);
    --glow-2: rgba(217, 119, 87, 0.07);

    --danger: #ff6b6b;
    --danger-soft: rgba(255, 107, 107, 0.16);
    --like: #ff7a59;
    --like-soft: rgba(255, 122, 89, 0.13);
    --fav: #f0b429;
    --fav-soft: rgba(240, 180, 41, 0.15);
    --comment: #4fb3a8;
    --comment-soft: rgba(79, 179, 168, 0.13);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 48px -16px rgba(0, 0, 0, 0.7);
}

/* тема «Тёмно-розовая» */
:root[data-theme="rosed"] {
    color-scheme: dark;
    --accent-ink: #1a1600;
    --accent-soft: rgba(255, 214, 0, 0.16);
    --accent-glow: rgba(255, 214, 0, 0.28);
    --accent-text: #ffd600;

    --ink: #fbe6e6;
    --ink-2: #e0bcbe;
    --muted: #ab8488;

    --line: rgba(255, 240, 220, 0.07);
    --line-2: rgba(255, 240, 220, 0.14);

    --bg: #1f1316;
    --dot: rgba(255, 190, 190, 0.04);
    --surface: #2a1a1e;
    --surface-2: #372329;
    --surface-3: #482f37;
    --glass: rgba(42, 26, 30, 0.9);
    --glow: rgba(255, 120, 140, 0.13);
    --glow-2: rgba(255, 190, 80, 0.06);

    --danger: #ff6b6b;
    --danger-soft: rgba(255, 107, 107, 0.16);
    --like: #ff6b8b;
    --like-soft: rgba(255, 107, 139, 0.13);
    --fav: #f0b429;
    --fav-soft: rgba(240, 180, 41, 0.15);
    --comment: #4fb3a8;
    --comment-soft: rgba(79, 179, 168, 0.13);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 48px -16px rgba(0, 0, 0, 0.7);
}

/* тема «Тёмно-голубая» */
:root[data-theme="skyd"] {
    color-scheme: dark;
    --accent-ink: #1a1600;
    --accent-soft: rgba(255, 214, 0, 0.16);
    --accent-glow: rgba(255, 214, 0, 0.28);
    --accent-text: #ffd600;

    --ink: #ece8de;
    --ink-2: #c3c9c8;
    --muted: #8aa0aa;

    --line: rgba(255, 240, 220, 0.07);
    --line-2: rgba(255, 240, 220, 0.14);

    --bg: #0f1a22;
    --dot: rgba(170, 210, 240, 0.04);
    --surface: #16242f;
    --surface-2: #1f3240;
    --surface-3: #2b4457;
    --glass: rgba(22, 36, 47, 0.9);
    --glow: rgba(100, 170, 230, 0.13);
    --glow-2: rgba(255, 190, 80, 0.07);

    --danger: #ff6b6b;
    --danger-soft: rgba(255, 107, 107, 0.16);
    --like: #ff6b81;
    --like-soft: rgba(255, 107, 129, 0.13);
    --fav: #f0b429;
    --fav-soft: rgba(240, 180, 41, 0.15);
    --comment: #5ab0f0;
    --comment-soft: rgba(90, 176, 240, 0.13);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 48px -16px rgba(0, 0, 0, 0.7);
}

/* тема «Тёмно-мятная» */
:root[data-theme="mintd"] {
    color-scheme: dark;
    --accent-ink: #1a1600;
    --accent-soft: rgba(255, 214, 0, 0.16);
    --accent-glow: rgba(255, 214, 0, 0.28);
    --accent-text: #ffd600;

    --ink: #eef0dc;
    --ink-2: #c9d0aa;
    --muted: #8f9a74;

    --line: rgba(255, 240, 220, 0.07);
    --line-2: rgba(255, 240, 220, 0.14);

    --bg: #141b12;
    --dot: rgba(210, 230, 160, 0.04);
    --surface: #1c2619;
    --surface-2: #263321;
    --surface-3: #33452c;
    --glass: rgba(28, 38, 25, 0.9);
    --glow: rgba(170, 200, 70, 0.12);
    --glow-2: rgba(255, 190, 80, 0.07);

    --danger: #ff6b6b;
    --danger-soft: rgba(255, 107, 107, 0.16);
    --like: #ff7a6b;
    --like-soft: rgba(255, 122, 107, 0.13);
    --fav: #f0b429;
    --fav-soft: rgba(240, 180, 41, 0.15);
    --comment: #5ab0b0;
    --comment-soft: rgba(90, 176, 176, 0.13);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 48px -16px rgba(0, 0, 0, 0.7);
}

/* тема «Тёмно-сиреневая» */
:root[data-theme="lilacd"] {
    color-scheme: dark;
    --accent-ink: #1a1600;
    --accent-soft: rgba(255, 214, 0, 0.16);
    --accent-glow: rgba(255, 214, 0, 0.28);
    --accent-text: #ffd600;

    --ink: #f3e6f2;
    --ink-2: #d6bcd6;
    --muted: #a287a6;

    --line: rgba(255, 240, 220, 0.07);
    --line-2: rgba(255, 240, 220, 0.14);

    --bg: #1a1220;
    --dot: rgba(230, 190, 240, 0.04);
    --surface: #241a2c;
    --surface-2: #312339;
    --surface-3: #413049;
    --glass: rgba(36, 26, 44, 0.9);
    --glow: rgba(190, 110, 220, 0.13);
    --glow-2: rgba(255, 190, 90, 0.06);

    --danger: #ff6b6b;
    --danger-soft: rgba(255, 107, 107, 0.16);
    --like: #ff6b9a;
    --like-soft: rgba(255, 107, 154, 0.13);
    --fav: #f0b429;
    --fav-soft: rgba(240, 180, 41, 0.15);
    --comment: #5ab0c0;
    --comment-soft: rgba(90, 176, 192, 0.13);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 48px -16px rgba(0, 0, 0, 0.7);
}

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

.body {
    min-height: 100vh;
    margin: 0;
    font-family: var(--font);
    background-color: var(--bg);
    /* мягкое жёлтое свечение + точечный узор, как обои в мессенджерах */
    background-image:
        radial-gradient(900px 600px at 0% 0%, var(--glow), transparent 60%),
        radial-gradient(700px 500px at 100% 100%, var(--glow-2), transparent 60%),
        radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
    background-size: auto, auto, 22px 22px;
    background-attachment: fixed;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background-color: var(--accent);
    color: var(--accent-ink);
}

a:focus-visible,
button:focus-visible,
label:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* У полей ввода кольцо фокуса рисует сам контейнер (:focus-within) */
.input-comm:focus,
.input-comm:focus-visible,
.input-post:focus,
.input-post:focus-visible {
    outline: none;
}

.post-text,
.photos,
.comms,
.comm-content,
.bio,
.hot-bar {
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
}

/* ==========================================================
   Левая панель
   ========================================================== */

.hot-bar {
    position: fixed;
    top: var(--gap);
    left: var(--gap);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: calc(var(--left) - var(--gap) * 2);
    height: calc(100vh - var(--gap) * 2);
    padding: 22px 12px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background-color: var(--glass);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    backdrop-filter: blur(24px) saturate(1.6);
    box-shadow: var(--shadow-sm);
}

.logo {
    align-self: flex-start;
    padding: 4px 14px;
    font-family: "Onest", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 2.3rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.45s var(--ease);
}

/* пока мышь на логотипе, он плавно наклоняется и чуть вырастает;
   когда мышь уходит — так же плавно возвращается */
.logo:hover {
    /* наклон от «основания» надписи */
    transform-origin: 50% 85%;
    transform: rotate(-6deg) scale(1.08);
}

/* пасхалка: точку из логотипа можно выбить кликом (js/dot.js) */
.logo span {
    cursor: pointer;
}

.nota-ball {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    border-radius: 50%;
    background-color: #FFD600;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.25);
    transform-origin: 50% 100%;
    cursor: pointer;
    touch-action: none;
}

/* мячик крошечный — область для клика пошире */
.nota-ball::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
}

.hot-bar-2 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.btn-hb {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    background-color: transparent;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.btn-hb svg {
    flex-shrink: 0;
    margin: 0;
    stroke: var(--muted);
    transition: stroke 0.25s var(--ease), transform 0.4s var(--spring);
}

.btn-hb:hover {
    background-color: var(--surface-2);
    color: var(--ink);
}

.btn-hb:hover svg {
    stroke: var(--ink);
    transform: scale(1.12);
}

.btn-hb:active svg {
    transform: scale(0.9);
}

.btn-hb.active {
    background-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 650;
    box-shadow: 0 8px 22px -8px var(--accent-glow);
}

.btn-hb.active svg,
.btn-hb svg.active {
    stroke: var(--accent-ink);
    stroke-width: 2.2;
}

/* ---------- Пасхалка: сменяющиеся фразы над мини-карточкой ---------- */

.quip {
    display: block;
    margin: auto 4px 0;
    padding: 10px 12px;
    border: 1px dashed var(--line-2);
    border-radius: 16px;
    background-color: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.quip:hover {
    border-color: var(--accent);
    background-color: var(--surface-2);
    color: var(--ink);
}

.quip-text {
    display: block;
    transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), filter 0.26s var(--ease);
}

/* старая фраза уходит вверх, новая выплывает снизу */
.quip.out .quip-text {
    opacity: 0;
    transform: translateY(-6px);
    filter: blur(3px);
}

.quip.in .quip-text {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(3px);
    transition: none;
}

/* мини-карточка встаёт прямо под фразой (отступ сжимается только у самой
   карточки: в профиле её нет, и тогда фраза сама опускается к низу панели) */
.quip + .mini-card {
    margin-top: -12px;
}

/* ---------- Мини-карточка профиля (низ левой панели) ---------- */

.mini-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding: 8px 10px 8px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.mini-card:hover {
    border-color: var(--line-2);
    background-color: var(--surface-2);
}

.mini-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 50%;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        var(--ring) border-box;
    object-fit: cover;
}

.mini-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mini-name {
    overflow: hidden;
    font-size: 0.94rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* пока профиль загружается — переливающиеся заглушки */
.mini-card.loading .mini-name,
.mini-card.loading .mini-sub {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    color: transparent;
    animation: shimmer 1.2s linear infinite;
}

@keyframes shimmer {
    to { background-position: -200% 0; }
}

/* ==========================================================
   Правая панель (карточка профиля)
   ========================================================== */

.right-hot-bar {
    position: fixed;
    top: var(--gap);
    right: var(--gap);
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: calc(var(--right) - var(--gap) * 2);
    max-height: calc(100vh - var(--gap) * 2);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background-color: var(--glass);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    backdrop-filter: blur(24px) saturate(1.6);
    box-shadow: var(--shadow-sm);
}

/* на страницах без карточки и без виджетов панель не рисуем вовсе */
.right-hot-bar:not(:has(.card)):not(:has(.rw-stack)) {
    display: none;
}

/* ---------- Виджеты правой колонки (js/widgets.js) ---------- */

/* сама панель прозрачная — каждый виджет отдельной стеклянной карточкой */
.right-hot-bar:has(.rw-stack) {
    /* чуть шире и немного отодвинута от края окна; поля вокруг карточки
       не дают панели срезать её тень и скругления */
    right: calc(var(--gap) + 8px);
    width: calc(var(--right) - var(--gap) * 2 + 36px);
    padding: 4px 6px;
    overflow-x: hidden;
    overflow-y: auto;
    border: none;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    scrollbar-width: none;
}

.rw-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rw {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background-color: var(--glass);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    backdrop-filter: blur(24px) saturate(1.6);
    box-shadow: var(--shadow-sm);
}

/* приветствие: сверху «небо за окном» по времени суток, ниже текст */
.rw-hello {
    gap: 0;
    padding: 0;
    border: none;
    overflow: hidden;
}

/* Небо живёт по времени (js/sky.js ставит переменные --sky-*, --sun-*, --moon-*…).
   Цвета неба одни во всех темах: это картинка, а не интерфейс */
.rw-sky {
    --sky-top: #58a0e4;
    --sky-mid: #8cc4f0;
    --sky-bot: #d6e8f6;
    --sky-ink: #0e223e;
    position: relative;
    height: 140px;
    overflow: hidden;
    container-type: inline-size;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 62%, var(--sky-bot) 100%);
    color: var(--sky-ink);
}

.rw-sky > * {
    position: absolute;
    pointer-events: none;
}

/* звёзды: общая яркость задаёт js, мерцает каждая по-своему */
.rw-stars {
    inset: 0;
    opacity: var(--star-op, 0);
}

.rw-stars i {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    animation: rw-twinkle 4s ease-in-out infinite;
}

@keyframes rw-twinkle {
    50% { opacity: 0.35; }
}

/* солнце и луна: центр на (--x, --y) в процентах карточки; когда дуга уходит
   за холмы, они скрываются; раз в 30 секунд положение чуть меняется плавно */
.rw-sun,
.rw-moon {
    margin: 0;
    transform: translate(-50%, -50%);
}

.rw-sun {
    left: var(--sun-x, 50%);
    top: var(--sun-y, 30%);
    width: 96px;
    height: 96px;
    opacity: var(--sun-op, 1);
    background: radial-gradient(circle,
        var(--sun-core, #fff8dc) 0 17%,
        color-mix(in srgb, var(--sun-halo, #ffeaa0) 85%, transparent) 18% 29%,
        color-mix(in srgb, var(--sun-halo, #ffeaa0) 34%, transparent) 30% 54%,
        transparent 72%);
}

.rw-moon {
    left: var(--moon-x, 50%);
    top: var(--moon-y, 30%);
    width: 26px;
    height: 26px;
    opacity: var(--moon-op, 0);
    filter: drop-shadow(0 0 8px rgba(241, 238, 223, 0.45));
}

.rw-moon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.rw-moon-dark { fill: rgba(241, 238, 223, 0.1); }
.rw-moon-lit  { fill: #f1eedf; }

.rw-sky-ready .rw-sun,
.rw-sky-ready .rw-moon {
    transition: left 30s linear, top 30s linear, opacity 3s;
}

/* Пасхалка: изредка (js/sky.js) вместо солнца и луны по небу идёт искра
   терракотового цвета. Путь и яркость те же, что у солнца и луны. */
.rw-sky-spark .rw-sun {
    background: radial-gradient(circle, rgba(217, 119, 87, 0.3) 0 14%, rgba(217, 119, 87, 0.12) 15% 38%, transparent 68%);
}

.rw-sky-spark .rw-moon {
    filter: drop-shadow(0 0 9px rgba(217, 119, 87, 0.55));
}

.rw-sky-spark .rw-moon svg {
    display: none;
}

.rw-sky-spark .rw-sun::after,
.rw-sky-spark .rw-moon::after {
    content: "";
    position: absolute;
    background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cg stroke=%27%23D97757%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 fill=%27%23D97757%27%3E%3Cpath d=%27M12 12L12.00 1.60 M12 12L15.70 5.59 M12 12L19.97 7.40 M12 12L18.60 12.00 M12 12L21.18 17.30 M12 12L15.50 18.06 M12 12L12.00 21.60 M12 12L8.60 17.89 M12 12L3.17 17.10 M12 12L4.80 12.00 M12 12L3.86 7.30 M12 12L8.70 6.28%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%272.4%27 stroke=%27none%27/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    animation: rw-spark-spin 90s linear infinite;
}

.rw-sky-spark .rw-sun::after { inset: 22px; }
.rw-sky-spark .rw-moon::after { inset: -4px; }

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

@media (prefers-reduced-motion: reduce) {
    .rw-sky-spark .rw-sun::after,
    .rw-sky-spark .rw-moon::after { animation: none; }
}

/* облака плывут слева направо, каждое со своей скоростью */
.rw-cloud {
    left: 0;
    opacity: var(--cloud-op, 0.8);
    fill: var(--cloud, #fff);
    animation: rw-drift 160s linear infinite;
}

.rw-cloud svg {
    display: block;
    width: 100%;
    height: auto;
}

@keyframes rw-drift {
    from { transform: translateX(-110%); }
    to   { transform: translateX(100cqw); }
}

/* холмы внизу: за ними встаёт и садится солнце */
.rw-hills {
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 34px;
}

.rw-hills .h1 { fill: var(--hill-1, #1c2a3a); }
.rw-hills .h2 { fill: var(--hill-2, #121c28); }

@media (prefers-reduced-motion: reduce) {
    .rw-cloud { animation: none; transform: translateX(40cqw); }
    .rw-stars i { animation: none; }
    .rw-sky-ready .rw-sun,
    .rw-sky-ready .rw-moon { transition: none; }
}

.rw-date {
    position: absolute;
    z-index: 3;
    top: 14px;
    left: 20px;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
}

.rw-hello-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 22px 24px;
}

.rw-hi {
    margin: 0;
    font-family: var(--display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* иконка «Факта дня» (js/widgets.js) */
.rw-ico {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    color: var(--accent-text);
}

.rw-fact-label .rw-ico {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.rw-fact-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--accent-text);
    font-size: 0.88rem;
    font-weight: 700;
}

.rw-fact-text {
    margin: 0;
    color: var(--ink-2);
    font-size: 1rem;
    line-height: 1.5;
}

/* те же виджеты полосой над лентой — там, где нет правой колонки */
.rw-strip {
    display: none;
}

@media (max-width: 1200px) {
    /* полоса во всю ширину справа от меню, а отступы по бокам выравнивают
       первую карточку по краю колонки с постами */
    /* (у padding проценты — от ширины страницы, у scroll-padding — от ширины
       самой полосы, поэтому формулы разные, а результат одинаковый) */
    .rw-strip {
        --rw-side: max(24px, (100% - var(--left) - var(--col)) / 2);
        --rw-snap: max(24px, (100% - var(--col)) / 2);
        display: flex;
        gap: 10px;
        margin-left: var(--left);
        padding: 92px var(--rw-side) 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 var(--rw-snap);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .rw-strip::-webkit-scrollbar {
        display: none;
    }

    /* карточка занимает колонку целиком; если карточек опять станет несколько,
       им нужен flex-basis поменьше (~82%), чтобы следующая выглядывала сбоку */
    .rw-strip .rw {
        flex: 1 1 auto;
        min-width: 0;
        max-width: var(--col);
        margin: 0 auto;
        scroll-snap-align: start;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: var(--surface);
    }

    .rw-strip + .posts {
        padding-top: 14px;
    }
}

@media (max-width: 720px) {
    .rw-strip {
        --rw-side: 10px;
        --rw-snap: 10px;
        padding-top: 76px;
    }
}

.field-for-crad {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 56px 18px 20px;
    /* обложка (шапка) профиля; другие варианты — [data-cover] в profile.css */
    --cover:
        radial-gradient(120% 90% at 0% 0%, #FFE600 0%, transparent 60%),
        radial-gradient(120% 90% at 100% 0%, #FF8A5C 0%, transparent 65%),
        linear-gradient(135deg, #FFD600, #FFB000);
    --cover-h: 104px;   /* высота шапки; в profile.css меняется под размер экрана */
    background-image: var(--cover);
    background-position: top;
    background-size: 100% var(--cover-h);
    background-repeat: no-repeat;
    transition: background-image 0.4s var(--ease);
}

/* на страницах без карточки (например, главная) блок не показываем */
.field-for-crad:not(:has(.card)) {
    display: none;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: auto;
}

.avatar-prof {
    width: 104px;
    height: 104px;
    padding: 0;
    border: 4px solid var(--surface);
    border-radius: 50%;
    background-color: var(--surface-2);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3);
    object-fit: cover;
}

.name-prof {
    margin: 4px 0 0;
    font-size: 1.2rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    text-align: center;
    overflow-wrap: anywhere;
}

.login {
    font-size: 0.8rem;
    color: var(--muted);
}

/* значок подтверждённого аккаунта (js/verified.js) */
.vbadge {
    display: inline-block;
    flex-shrink: 0;
    width: 0.95em;
    height: 0.95em;
    margin-left: 0.28em;
    vertical-align: -0.12em;
    animation: vpop 0.6s var(--spring) both;
}

.vbadge svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 1px 3px var(--accent-glow));
}

.vb-seal { fill: var(--accent); }

.vb-check {
    fill: none;
    stroke: var(--accent-ink);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes vpop {
    from { opacity: 0; transform: scale(0.4) rotate(-25deg); }
    to   { opacity: 1; transform: none; }
}

/* имя с «…» на конце и значком: текст сжимается, значок остаётся */
.mini-name:has(.vn-text),
.name:has(.vn-text) {
    display: flex;
    align-items: center;
}

.vn-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-name .vbadge,
.name .vbadge {
    vertical-align: 0;
    margin-left: 0.3em;
}

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

.bio {
    width: 100%;
    height: auto;
    min-height: 64px;
    max-height: 26vh;
    padding: 12px 14px;
    overflow: auto;
    border-radius: var(--r-md);
    background-color: var(--surface-2);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-2);
    text-align: center;
    overflow-wrap: anywhere;
}

/* ==========================================================
   Переключатель лент (вверху)
   ========================================================== */

.feed {
    position: fixed;
    top: 0;
    left: var(--left);
    right: var(--right);
    z-index: 1000;
    display: flex;
    justify-content: center;
    height: 76px;
    pointer-events: none;
}

.feed-2 {
    display: flex;
    gap: 4px;
    width: min(calc(100% - 32px), 320px);
    height: 48px;
    margin: auto;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
}

.btn-feed {
    flex: 1;
    height: 100%;
    border: none;
    border-radius: 999px;
    background-color: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.btn-feed:hover {
    color: var(--ink);
}

.btn-feed.active {
    background-color: var(--ink);
    color: var(--surface);
}

/* ==========================================================
   Лента постов
   ========================================================== */

.posts {
    margin: 0 var(--right) 0 var(--left);
    padding: 92px 24px 60px;
}

/* Заглушка «В разработке» (вставляется из JS без .post-comm) */
.posts > .post {
    max-width: var(--col);
    margin: 0 auto;
    animation: rise 0.5s var(--ease) both;
}

.posts > .post .post-text {
    justify-content: center;
    padding: 64px 20px;
    text-align: center;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--muted);
}

/* иконка-гаечный ключ (SVG вместо эмодзи) */
.posts > .post .post-text::before {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    background-color: var(--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.post-comm {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--col);
    margin: 0 auto 16px;
    /* посты выезжают по очереди: --i задаёт js/request.js (номер в пачке) */
    animation: post-in 0.6s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes post-in {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.985);
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

/* ---------- Карточка поста ---------- */

.post {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 80px;
    height: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
    font-size: 1rem;
    transition: transform 0.4s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.post:hover {
    border-color: var(--line-2);
    box-shadow: var(--shadow-md);
}

.post.active {
    border-color: var(--line-2);
    box-shadow: var(--shadow-md), 0 0 0 4px var(--accent-soft);
}

/* шапка поста */

.info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 18px 20px 0;
    border: none;
}

.avatar {
    flex-shrink: 0;
    cursor: pointer;
    width: 50px;
    height: 50px;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 50%;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        var(--ring) border-box;
    object-fit: cover;
    transition: transform 0.4s var(--spring);
}

.post:hover .avatar {
    transform: rotate(-6deg);
}

.name-id {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

.name {
    height: auto;
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.name:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 3px;
    text-underline-offset: 3px;
}

.id-date {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    height: auto;
}

.id-date p {
    margin: 0;
}

.username,
.date {
    color: var(--muted);
    font-size: 0.84rem;
}

.date:not(:empty)::before {
    content: "·";
    margin-right: 6px;
}

/* Подписка пока не работает на бэкенде — кнопку временно прячем.
   Чтобы вернуть, удалите это правило «display: none». */
.subscribe {
    display: none !important;
}

.subscribe {
    height: 36px;
    min-width: 0;
    margin: 0 0 0 auto;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    background-color: var(--accent);
    color: var(--accent-ink);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.2s var(--spring);
}

.subscribe:hover {
    background-color: var(--accent-hover);
    box-shadow: 0 6px 18px -6px var(--accent-glow);
}

.subscribe:active {
    transform: scale(0.94);
}

.subscribe.sub {
    background-color: transparent;
    box-shadow: inset 0 0 0 1.5px var(--line-2);
    color: var(--ink-2);
}

.subscribe.sub:hover {
    background-color: var(--surface-2);
}

.btn-del-post {
    display: none;
    align-self: center;
    height: 36px;
    margin: 0 0 0 auto;
    padding: 0 8px;
    border: none;
    border-radius: 999px;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s var(--ease);
}

.btn-del-post.view {
    display: flex;
    align-items: center;
}

.btn-del-post svg path,
.btn-del-post svg line {
    stroke: var(--muted);
    transition: stroke 0.3s var(--ease);
}

.btn-del-post:hover {
    background-color: var(--danger-soft);
}

.btn-del-post:hover svg path,
.btn-del-post:hover svg line {
    stroke: var(--danger);
}

/* содержимое */

.post-text {
    display: block;
    margin: 0;
    padding: 14px 22px 6px;
    font-size: 1.04rem;
    line-height: 1.6;
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.post-text:empty {
    display: none;
}

/* текст проступает по словам: каждое слово выходит из лёгкого размытия
   (js/request.js, revealWords); начинает, когда выехала карточка —
   её задержка --i × 70 мс плюс 220 мс */
.post-text.revealing .w {
    display: inline-block;
    max-width: 100%;
    animation: word-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms + 220ms + var(--d, 0ms));
}

/* хвост длинного поста — большой inline-кусок: без inline-block и сдвига,
   иначе он не переносился бы по строкам */
.post-text.revealing .w.tail {
    display: inline;
    animation-name: tail-in;
}

@keyframes tail-in {
    from {
        opacity: 0;
        filter: blur(6px);
    }
}

@keyframes word-in {
    from {
        opacity: 0;
        filter: blur(6px);
        transform: translateY(0.3em);
    }
}

/* длинный пост сворачивается до 14 строк, остальное — по кнопке:
   так лента листается сплошным потоком, без прокрутки внутри поста.
   Низ свёрнутого текста растворяется — намёк, что это ещё не всё */
/* --fade — высота затухания; её анимирует js, когда текст раскрывается */
@property --fade {
    syntax: "<length>";
    inherits: false;
    initial-value: 80px;   /* em тут нельзя: у @property значение не должно зависеть от шрифта */
}

.post-text.folded {
    max-height: calc(1.6em * 14 + 14px);
    padding-bottom: 0;
    margin-bottom: 6px;
}

.post-text.folded,
.post-text.fading {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent);
}

.more-btn {
    display: block;
    margin: 0 22px 6px;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--accent-text);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.more-btn:hover {
    text-decoration: underline;
}

.more-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (max-width: 720px) {
    .more-btn {
        margin-inline: 16px;
    }
}

@media (pointer: coarse) {
    .more-btn {
        padding-block: 12px;
    }
}

.photos {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    width: auto;
    margin: 0;
    padding: 10px 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.photos:empty {
    display: none;
}

.post-photo {
    flex-shrink: 0;
    width: auto;
    height: min(38vh, 320px);
    max-width: 100%;
    border-radius: 16px;
    background-color: var(--surface-2);
    object-fit: cover;
    scroll-snap-align: start;
    cursor: zoom-in;
    transition: transform 0.4s var(--ease), filter 0.3s var(--ease);
}

.post-photo:hover {
    filter: brightness(0.94);
}

/* одно фото показываем целиком, без обрезки: широкое — на всю ширину,
   высокое — вписывается по высоте, по бокам остаётся фон карточки */
.post-photo:only-child {
    width: auto;
    height: auto;
    max-width: min(100%, 540px);
    max-height: min(54vh, 500px);
    object-fit: contain;
}

/* несколько фото — коллаж по 2 в ряд: пара в ряду — квадраты 1:1,
   одиночное фото в последнем ряду — на всю ширину, 2:1 (высота вдвое меньше ширины) */
.photos:has(> .post-photo:nth-child(2)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    max-width: 540px;
    margin-inline: auto;
    overflow: visible;
}

.photos:has(> .post-photo:nth-child(2)) > .post-photo {
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    object-fit: cover;
}

.photos:has(> .post-photo:nth-child(2)) > .post-photo:nth-child(odd):last-child {
    grid-column: 1 / -1;
    aspect-ratio: 2 / 1;
}

/* кнопки под постом — «таблетки» как в современных лентах */

.interactive {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 14px 14px;
    border: none;
}

.box-inter {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    margin: 0;
    padding-right: 12px;
    border-radius: 999px;
    background-color: var(--surface-2);
    transition: background-color 0.25s var(--ease);
}

.count {
    min-width: 1ch;
    color: var(--ink-2);
    font-size: 0.88rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    transition: color 0.25s var(--ease);
}

.like,
.comment,
.favorite {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 38px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background-color: transparent;
    cursor: pointer;
}

/* кнопку лайка можно зажать (js/likefx.js): без меню и выделения на телефоне */
.like {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.box-inter:has(.like):hover { background-color: var(--like-soft); }
.box-inter:has(.comment):hover { background-color: var(--comment-soft); }
.box-inter:has(.favorite):hover { background-color: var(--fav-soft); }

.box-inter:has(.icon-like.active) { background-color: var(--like-soft); }
.box-inter:has(.icon-comment.active) { background-color: var(--comment-soft); }
.box-inter:has(.icon-favorite.active) { background-color: var(--fav-soft); }

.box-inter:has(.icon-like.active) .count { color: var(--like); }
.box-inter:has(.icon-comment.active) .count { color: var(--comment); }
.box-inter:has(.icon-favorite.active) .count { color: var(--fav); }

/* открытые комментарии подсвечивают свою кнопку */
.post.active .box-inter:has(.comment) { background-color: var(--comment-soft); }
.post.active .icon-comment { stroke: var(--comment); }
.post.active .box-inter:has(.comment) .count { color: var(--comment); }

.icon-like,
.icon-comment,
.icon-favorite {
    width: 21px;
    height: 21px;
    fill: transparent;
    stroke: var(--ink-2);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: fill 0.3s var(--ease), stroke 0.3s var(--ease), transform 0.4s var(--spring);
}

.like:active .icon-like,
.comment:active .icon-comment,
.favorite:active .icon-favorite {
    transform: scale(0.8);
}

.like:hover .icon-like {
    stroke: var(--like);
}

.comment:hover .icon-comment {
    stroke: var(--comment);
}

.favorite:hover .icon-favorite {
    stroke: var(--fav);
}

.icon-like.active {
    fill: var(--like);
    stroke: var(--like);
    animation: pop 0.5s var(--spring);
}

.icon-comment.active {
    fill: var(--comment);
    stroke: var(--comment);
}

.icon-favorite.active {
    fill: var(--fav);
    stroke: var(--fav);
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: bookmark-snap 0.6s var(--ease);
}

/* закладка «защёлкивается»: чуть вытягивается вверх, с хлопком садится вниз и дрожит */
@keyframes bookmark-snap {
    0%   { transform: scale(1, 1); }
    25%  { transform: translateY(-3px) scale(0.86, 1.22); }
    50%  { transform: translateY(1px) scale(1.16, 0.8); }
    72%  { transform: translateY(0) scale(0.97, 1.07); }
    100% { transform: scale(1, 1); }
}

/* комментарии открыты: пузырёк надувается, подкрашивается и покачивается */
.post.active .icon-comment {
    fill: var(--comment);
    stroke: var(--comment);
    transform-box: fill-box;
    transform-origin: 20% 80%;
    animation: bubble-inflate 0.65s var(--ease);
}

@keyframes bubble-inflate {
    0%   { transform: scale(1) rotate(0deg); }
    28%  { transform: scale(1.32, 0.9) rotate(-8deg); }
    52%  { transform: scale(0.92, 1.14) rotate(5deg); }
    76%  { transform: scale(1.06, 0.98) rotate(-2deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* ==========================================================
   Панель комментариев — как чат в мессенджере
   ========================================================== */

/* Комментарии — часть карточки поста: она растёт вниз, а комментарии появляются внутри */
.comments {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* высоту плавно меняет index.js (animate_comments) */
    height: 0;
    margin: 0;
    overflow: hidden;
    border: 0 solid var(--line);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    background-color: var(--surface-2);
    background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
    background-size: 18px 18px;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s var(--ease), visibility 0.45s var(--ease);
}

.comments.active {
    border-top-width: 1px;
    opacity: 1;
    visibility: visible;
}

.comments-head {
    padding: 16px 22px 2px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.comms {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    flex: 1;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: 360px;
    padding: 10px 18px 12px;
    overflow-y: auto;
}

/* пустые комментарии: иконка-облачко (та же, что на кнопке поста) и подпись */
.comms:empty {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-top: 28px;
    padding-bottom: 28px;
}

.comms:empty::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-color: var(--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.comms:empty::after {
    content: "Комментариев пока нет — будьте первым";
    color: var(--muted);
    font-size: 0.9rem;
}

.comm-wrap {
    width: 100%;
    animation: rise 0.35s var(--ease) both;
}

/* аватар слева, имя и текст — в пузырьке справа */
.comm {
    display: grid;
    grid-template-columns: 32px minmax(0, auto) 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 0;
    width: 100%;
}

.info-comment {
    display: contents;
}

.info-comment img {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: end;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--surface-3);
    object-fit: cover;
}

.comm a {
    grid-column: 2;
    grid-row: 1;
    z-index: 1;
    padding: 8px 14px 0;
    border-radius: 18px 18px 0 0;
    background-color: var(--surface);
    color: var(--accent-text);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.comm a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.comm-content {
    grid-column: 2;
    grid-row: 2;
    max-height: 20vh;
    margin: 0;
    padding: 2px 14px 9px;
    overflow: auto;
    /* верх прямой — стыкуется с плашкой имени без зазубрин */
    border-radius: 0 0 18px 6px;
    background-color: var(--surface);
    color: var(--ink);
    font-size: 0.93rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* имя и текст одной ширины, чтобы пузырь выглядел цельным */
.comm a,
.comm-content {
    min-width: 0;
    justify-self: stretch;
}

/* поле ввода */

.input-comment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    height: 48px;
    margin: 4px 14px 14px;
    padding: 0 5px 0 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: var(--surface);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.input-comment:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.input-comm {
    flex: 1;
    align-self: center;
    width: auto;
    height: 100%;
    min-width: 0;
    margin: 0;
    border: none;
    outline: none;
    background-color: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.94rem;
}

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

.send-comm {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    margin: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--accent);
    cursor: pointer;
    transition: background-color 0.25s var(--ease), transform 0.25s var(--spring), box-shadow 0.25s var(--ease);
}

.send-comm:hover {
    background-color: var(--accent-hover);
    box-shadow: 0 6px 16px -6px var(--accent-glow);
    transform: rotate(-12deg);
}

.send-comm:active {
    transform: scale(0.88);
}

.send-icon-comm {
    width: 15px;
    height: 15px;
    margin-left: 2px;
    fill: var(--accent-ink);
}

/* ==========================================================
   Публикация поста
   ========================================================== */

/* новый пост раздвигает ленту (.making-room) и «приземляется»
   с жёлтым свечением (.just-posted). Классы ставит js/loadpng.js
   и снимает после анимации; обрезка нужна только пока лента
   раздвигается — иначе она срезала бы свечение */
.post-comm.making-room {
    overflow: hidden;
    animation: post-make-room 0.5s var(--ease) backwards;
}

.post-comm.just-posted > .post {
    animation:
        post-land 0.75s var(--spring) 0.12s backwards,
        post-glow 1.6s ease-out 0.3s backwards;
}

@keyframes post-make-room {
    from {
        max-height: 0;
        margin-bottom: 0;
        opacity: 0;
    }
    to {
        max-height: 1200px;
    }
}

@keyframes post-land {
    from {
        opacity: 0;
        transform: translateY(-28px) scale(0.94);
    }
}

@keyframes post-glow {
    from {
        border-color: var(--accent);
        box-shadow: var(--shadow-md), 0 0 0 5px var(--accent-soft), 0 12px 40px -8px var(--accent-glow);
    }
}

/* ==========================================================
   Удаление поста — «шредер» (js/shred.js)
   ========================================================== */

/* оригинал прячем: вместо него падают полоски-копии */
.post-comm.shredding {
    pointer-events: none;
}

.post-comm.shredding > .post {
    visibility: hidden;
}

.shred {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.shred-strip {
    position: absolute;
    inset: 0;
    animation: shred-fall 0.9s linear both;
    will-change: transform, opacity;
}

.shred-strip > .post {
    height: 100%;
    box-shadow: none;
}

/* в копиях не должны заново проигрываться анимации появления */
.shred-strip *,
.shred-strip *::before,
.shred-strip *::after {
    animation: none !important;
    transition: none !important;
}

@keyframes shred-fall {
    0% {
        animation-timing-function: ease-out;
    }
    /* надрез: полоски чуть расходятся, между ними появляются щели */
    18% {
        animation-timing-function: cubic-bezier(0.45, 0, 0.7, 0.45);
        transform: translate(calc(var(--dx) * 0.25), 4px);
        opacity: 1;
        filter: none;
    }
    /* осыпаются вниз и растворяются */
    100% {
        transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
        opacity: 0;
        filter: blur(3px);
    }
}

/* место в ленте плавно смыкается */
.post-comm.shred-collapse {
    height: 0 !important;
    margin-bottom: 0;
    transition: height 0.4s var(--ease), margin 0.4s var(--ease);
}

/* ==========================================================
   Просмотр фото на весь экран (js/lightbox.js)
   ========================================================== */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    background-color: rgba(8, 8, 10, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.25s var(--ease);
    /* щипок и перетаскивание обрабатывает js/lightbox.js, а не браузер */
    touch-action: none;
}

.lightbox.open {
    opacity: 1;
}

.lightbox img {
    max-width: 100%;
    max-height: 100%;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
    border-radius: 14px;
    object-fit: contain;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.94);
    transition: transform 0.35s var(--spring);
}

.lightbox.open img {
    transform: scale(1);
}

/* фото приближено: его можно тянуть; рамка и тень не нужны, фото во весь экран */
.lightbox.zoomed img {
    cursor: grab;
    border-radius: 0;
    box-shadow: none;
    will-change: transform;
}

.lightbox.zoomed.panning img {
    cursor: grabbing;
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.2s var(--ease);
}

.lightbox-close:hover,
.lightbox-nav:hover {
    background-color: rgba(255, 255, 255, 0.26);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.2s var(--ease), opacity 0.2s var(--ease);
}

.lightbox-nav.prev { left: 20px; }
.lightbox-nav.next { right: 20px; }

.lightbox-nav[hidden] {
    display: none;
}

.lightbox-nav:disabled {
    opacity: 0;
    pointer-events: none;
}

.lightbox-count {
    position: absolute;
    top: 24px;
    left: 50%;
    padding: 6px 14px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transform: translateX(-50%);
}

/* смена фото: новое въезжает с той стороны, куда листаем */
.lightbox img.slide-next { animation: lb-from-right 0.3s var(--ease); }
.lightbox img.slide-prev { animation: lb-from-left 0.3s var(--ease); }

@keyframes lb-from-right {
    from { opacity: 0; transform: translateX(40px); }
}

@keyframes lb-from-left {
    from { opacity: 0; transform: translateX(-40px); }
}

/* на телефоне листают свайпом, стрелки — поменьше и у самого края */
@media (max-width: 720px) {
    .lightbox {
        padding: 12px;
    }

    .lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .lightbox-nav.prev { left: 8px; }
    .lightbox-nav.next { right: 8px; }
}

/* ==========================================================
   Панель смайликов — только компьютер (js/emoji.js)
   ========================================================== */

.emoji-btn {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.3s var(--spring);
}

/* у поля нового поста — такая же круглая кнопка, как «добавить фото» */
.emoji-btn-post {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--surface-2);
    color: var(--ink-2);
}

.emoji-btn-post svg {
    width: 22px;
    height: 22px;
}

.emoji-btn-post:hover,
.emoji-btn-post.active {
    background-color: var(--accent);
    color: var(--accent-ink);
    transform: rotate(-10deg);
}

/* в поле комментария — маленькая и неприметная, рядом с «отправить» */
.emoji-btn-comm {
    width: 34px;
    height: 34px;
    margin-right: 4px;
    border-radius: 50%;
    background-color: transparent;
    color: var(--muted);
}

.emoji-btn-comm:hover,
.emoji-btn-comm.active {
    background-color: var(--surface-2);
    color: var(--ink);
    transform: rotate(-10deg) scale(1.08);
}

/* в описании профиля — в левом нижнем углу поля, напротив счётчика символов */
.emoji-btn-bio {
    position: absolute;
    left: 10px;
    bottom: 6px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: transparent;
    color: var(--muted);
}

.emoji-btn-bio:hover,
.emoji-btn-bio.active {
    background-color: var(--surface);
    color: var(--ink);
    transform: rotate(-10deg) scale(1.08);
}

.emoji-btn.active {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.emoji-panel {
    position: fixed;
    z-index: 4000;
    display: flex;
    flex-direction: column;
    width: 360px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background-color: var(--glass);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    backdrop-filter: blur(24px) saturate(1.6);
    box-shadow: var(--shadow-md), 0 24px 60px -20px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.92);
    transition: opacity 0.2s var(--ease), visibility 0.2s var(--ease), transform 0.3s var(--spring);
}

.emoji-panel.below {
    transform: translateY(-8px) scale(0.92);
}

.emoji-panel.open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.emoji-title {
    padding: 14px 18px 6px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: 40px;
    align-content: start;
    gap: 2px;
    height: 264px;
    padding: 4px 10px 10px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
}

.emoji-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background-color: transparent;
    overflow: hidden;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s var(--ease), transform 0.25s var(--spring);
}

.emoji-cell:hover {
    background-color: var(--surface-2);
    transform: scale(1.22);
}

.emoji-cell:active {
    transform: scale(0.9);
}

.emoji-empty {
    grid-column: 1 / -1;
    padding: 60px 20px;
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
}

.emoji-tabs {
    display: flex;
    justify-content: space-between;
    padding: 6px 8px;
    border-top: 1px solid var(--line);
}

/* иконки разделов серые; цвет раздела (--tab-color из js/emoji.js)
   появляется только у выбранной вкладки */
.emoji-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background-color: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.25s var(--spring);
}

.emoji-tab:hover {
    color: var(--ink-2);
    background-color: var(--surface-2);
}

.emoji-tab:active {
    transform: scale(0.9);
}

.emoji-tab.active {
    color: var(--tab-color);
    background-color: color-mix(in srgb, var(--tab-color) 14%, transparent);
}

.emoji-tab.active svg {
    stroke-width: 2.2;
}

@media (max-width: 720px) {
    .emoji-btn,
    .emoji-panel {
        display: none;
    }
}

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

/* ноутбуки: левая панель сворачивается в узкую полосу с иконками */
@media (max-width: 1400px) {
    :root {
        --left: 92px;
    }

    .hot-bar {
        align-items: center;
        padding: 20px 0 10px;
    }

    .logo {
        align-self: center;
        padding: 4px 0;
        /* узкая панель с одними значками: логотип крупнее не влезает */
        font-size: 1.65rem;
    }

    .hot-bar-2 {
        align-items: center;
    }

    .btn-hb {
        justify-content: center;
        width: 50px;
        height: 50px;
        padding: 0;
    }

    .btn-hb-label,
    .quip {
        display: none;
    }

    .mini-card {
        margin-top: auto;
        justify-content: center;
        padding: 0;
        border-color: transparent;
        background-color: transparent;
    }

    .mini-card:hover {
        border-color: transparent;
        background-color: transparent;
        transform: scale(1.06);
    }

    .mini-avatar {
        width: 48px;
        height: 48px;
    }

    .mini-info {
        display: none;
    }
}

/* правая панель скрывается */
@media (max-width: 1200px) {
    :root {
        --right: 0px;
    }

    .right-hot-bar {
        display: none;
    }
}

/* телефоны: меню становится плавающей «таблеткой» внизу */
@media (max-width: 720px) {
    :root {
        --left: 0px;
        --gap: 10px;
    }

    .hot-bar {
        top: auto;
        bottom: calc(var(--gap) + env(safe-area-inset-bottom, 0px));
        left: var(--gap);
        right: var(--gap);
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0;
        width: auto;
        height: 64px;
        padding: 6px;
        overflow: hidden;
        border-radius: 999px;
        box-shadow: var(--shadow-md);
    }

    .logo {
        display: none;
    }

    .hot-bar-2 {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        gap: 2px;
    }

    .btn-hb {
        flex: 1;
        width: auto;
        max-width: 56px;
        height: 50px;
    }

    .btn-hb:hover svg {
        transform: none;
    }

    .mini-card {
        display: none;
    }

    .feed {
        height: 68px;
    }

    .posts {
        padding: 76px 10px 100px;
    }

    .post-comm {
        margin-bottom: 12px;
    }

    .post {
        border-radius: 16px;
    }

    .info {
        padding: 14px 14px 0;
    }

    .avatar {
        width: 44px;
        height: 44px;
    }

    .post-text {
        padding: 10px 16px 4px;
        font-size: 1rem;
    }

    .photos {
        padding: 8px 12px;
    }

    .post-photo {
        border-radius: 16px;
    }

    .interactive {
        padding: 6px 10px 12px;
    }

    .comments {
        border-radius: 0 0 22px 22px;
    }

    .comments-head {
        padding: 14px 16px 2px;
    }

    .comms {
        padding: 8px 12px 12px;
    }

    .input-comment {
        margin: 4px 10px 12px;
    }
}

/* ==========================================================
   Переход между страницами: мини-карточка ⇄ карточка профиля.
   Мини-карточка сжимается в жёлтую каплю, капля перелетает
   на место большой карточки и раскрывается в неё (и обратно).
   Работает в Chrome / Edge / Safari 18+, в остальных браузерах
   страницы просто открываются как обычно.
   ========================================================== */

@view-transition {
    navigation: auto;
}

/* Какой элемент становится каплей, решает js/transition.js —
   только при переходе в профиль или из профиля. */

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
}

::view-transition-group(profile-card) {
    animation-duration: 0.9s;
    animation-timing-function: cubic-bezier(0.65, 0, 0.25, 1);
}

/* сама капля. Её жёлтый цвет не стоит под карточкой с самого начала,
   а плавно набирается, пока карточка тает, и так же плавно уходит,
   пока проявляется новая карточка — без резких переходов белый ⇄ жёлтый */
::view-transition-image-pair(profile-card) {
    overflow: hidden;
    /* мягкий блик поверх цвета — капля выглядит объёмной */
    background-image: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%);
    animation: card-drop 0.9s cubic-bezier(0.65, 0, 0.25, 1) both;
}

::view-transition-old(profile-card) {
    mix-blend-mode: normal;
    animation: card-melt 0.42s ease-in-out both;
}

::view-transition-new(profile-card) {
    mix-blend-mode: normal;
    animation: card-appear 0.42s ease-in-out 0.46s both;
}

@keyframes card-drop {
    0% {
        border-radius: 18px;
        transform: scale(1);
        background-color: rgba(255, 214, 0, 0);
        box-shadow: 0 18px 40px -12px rgba(255, 176, 0, 0);
    }
    /* карточка стягивается в каплю и постепенно желтеет */
    30% {
        border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
        transform: scale(0.42, 0.5);
        background-color: rgba(255, 200, 0, 1);
        box-shadow: 0 18px 40px -12px rgba(255, 176, 0, 0.6);
    }
    /* в полёте капля немного вытягивается и темнеет к оранжевому */
    55% {
        border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
        transform: scale(0.36, 0.56);
        background-color: rgba(255, 176, 0, 1);
        box-shadow: 0 18px 40px -12px rgba(255, 176, 0, 0.6);
    }
    /* «шлёп» — капля расплющивается перед раскрытием */
    68% {
        border-radius: 46% 46% 46% 46% / 50% 50% 50% 50%;
        transform: scale(0.6, 0.48);
        background-color: rgba(255, 200, 0, 1);
        box-shadow: 0 18px 40px -12px rgba(255, 176, 0, 0.5);
    }
    /* раскрываясь, цвет плавно уходит — его сменяет новая карточка */
    100% {
        border-radius: 18px;
        transform: scale(1);
        background-color: rgba(255, 214, 0, 0);
        box-shadow: 0 18px 40px -12px rgba(255, 176, 0, 0);
    }
}

@keyframes card-melt {
    to {
        opacity: 0;
        filter: blur(6px);
    }
}

@keyframes card-appear {
    from {
        opacity: 0;
        filter: blur(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    ::view-transition-group(*),
    ::view-transition-image-pair(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* плавный переход при переключении темы */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, fill 0.35s ease, stroke 0.35s ease !important;
}

/* ---------- Сенсорные экраны: зоны нажатия не меньше 44 px ----------
   Внешний вид не меняется: нажимаемая область расширяется невидимой рамкой. */
@media (pointer: coarse) {
    .btn-feed,
    .like,
    .comment,
    .favorite {
        position: relative;
    }

    .btn-feed::after {
        content: "";
        position: absolute;
        inset: -6px 0;
    }

    .like::after,
    .comment::after,
    .favorite::after {
        content: "";
        position: absolute;
        inset: -3px -2px;
    }

    /* ссылка с именем автора: выше для пальца, раскладка прежняя */
    .name {
        padding-block: 11px;
        margin-block: -11px;
    }
}

/* ---------- Окно для гостя: «войдите, чтобы …» (js/authgate.js) ---------- */

.gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.25s var(--ease);
}

.gate-overlay.show {
    opacity: 1;
}

.gate {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 400px);
    padding: 30px 26px 20px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-xl);
    background-color: var(--surface);
    box-shadow: var(--shadow-md);
    text-align: center;
    transform: translateY(18px) scale(0.96);
    transition: transform 0.4s var(--spring);
}

.gate-overlay.show .gate {
    transform: none;
}

.gate-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 14px;
    border-radius: 50%;
    background-color: var(--accent-soft);
    color: var(--accent-text);
}

/* карточка в цвет раздела, как пустое состояние: значок и лёгкое свечение сверху */
.gate-t-like    { --gate-tone: var(--like); }
.gate-t-fav     { --gate-tone: var(--fav); }
.gate-t-comment { --gate-tone: var(--comment); }

.gate[class*="gate-t-"] {
    background-image: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--gate-tone) 10%, transparent), transparent 70%);
}

.gate[class*="gate-t-"] .gate-ico {
    background-color: color-mix(in srgb, var(--gate-tone) 16%, transparent);
    color: var(--gate-tone);
}

.gate-ico svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gate-title {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    font-family: var(--display);
}

.gate-text {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.gate-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.gate-primary,
.gate-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s var(--spring), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.gate-primary {
    background-color: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 8px 20px -10px var(--accent-glow);
}

.gate-primary:hover {
    background-color: var(--accent-hover);
}

.gate-secondary {
    background-color: var(--surface-2);
    color: var(--ink);
}

.gate-secondary:hover {
    background-color: var(--surface-3);
}

.gate-primary:active,
.gate-secondary:active {
    transform: scale(0.97);
}

.gate-later {
    margin-top: 6px;
    padding: 10px 14px;
    border: 0;
    background: none;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.gate-later:hover {
    color: var(--ink);
}

.gate-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.gate-close:hover {
    background-color: var(--surface-2);
    color: var(--ink);
}

.gate-close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.gate a:focus-visible,
.gate button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (pointer: coarse) {
    .gate-close {
        width: 44px;
        height: 44px;
        top: 8px;
        right: 8px;
    }
}

/* заглушка вместо страницы для гостя (js/authgate.js: showGuestPage) */
.gate-static {
    margin: 56px auto;
    transform: none;
    animation: rise 0.5s var(--ease) both;
}

/* у гостя нет ни формы поста, ни карточки профиля */
.guest-view .compose,
.guest-view .right-hot-bar {
    display: none;
}

/* чужой профиль: формы нового поста нет; если профиля нет, то и карточки */
.other-profile .compose,
.profile-missing .right-hot-bar {
    display: none;
}

/* пока ленивое фото не загрузилось, место под него уже занято: лента не прыгает,
   а подгрузка постов по прокрутке не срабатывает раньше времени */
.post-photo:not(.loaded) {
    min-width: min(100%, 240px);
    min-height: 180px;
}

/* ==========================================================
   Надпись над лентой на главной (index.html): «Они дуреют с этой прикормки»
   Градиент насыщенный и средней яркости — читается и на тёмных, и на светлых темах.
   Двигается только поплавок: покачивается, от него расходятся круги.
   ========================================================== */

.bait {
    box-sizing: border-box;
    max-width: var(--col);
    margin: 4px auto 18px;
    padding: 0 6px;
    container-type: inline-size;
}

.bait-text {
    margin: 0;
    /* всегда в одну строку: надпись с поплавком шириной ~20,8 кегля,
       поэтому кегль = ширина колонки / 21,4 (но не больше 2,5rem) */
    font: 800 min(2.5rem, 4.67cqi)/1.12 var(--display);
    letter-spacing: -0.02em;
    white-space: nowrap;
    filter: drop-shadow(0 4px 18px rgba(255, 46, 126, 0.28));
}

.bait-words {
    background: linear-gradient(100deg, #FF6A00 0%, #FF2E7E 52%, #A64DFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: transparent;
}

/* поплавок стоит сразу за последним словом и переносится вместе с ним */
.bait-float {
    display: inline-block;
    width: 1.15em;
    height: 1.45em;
    margin-left: 0.3em;
    vertical-align: -0.35em;
    color: var(--ink-2);
    overflow: visible;
}

.bait-bob {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: bait-bob 2.4s ease-in-out infinite;
}

.bait-ripple {
    fill: none;
    stroke: #FF2E7E;
    stroke-width: 1.6;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: bait-ripple 2.4s ease-out infinite;
}

.bait-ripple-2 {
    animation-delay: 1.2s;
}

@keyframes bait-bob {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    30%      { transform: translateY(7px) rotate(3deg); }
    55%      { transform: translateY(-2px) rotate(-1deg); }
}

@keyframes bait-ripple {
    0%   { opacity: 0.7; transform: scale(0.35); }
    100% { opacity: 0;   transform: scale(1.25); }
}

@media (max-width: 720px) {
    .bait {
        margin: 2px auto 14px;
        padding: 0 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bait-bob,
    .bait-ripple {
        animation: none;
    }
}