html {
            scrollbar-gutter: stable;
            overflow-x: hidden;
        }

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

        :root {
            --primary: #FF1744;
            --secondary: #00E5FF;
            --accent: #FFD600;
            --dark: #0A0E27;
            --dark-blue: #1A1F3A;
            --purple: #B388FF;
            --pink: #FF4081;
            /* Fluid spacing */
            --pad-x: clamp(1rem, 5vw, 6%);
            --gap: clamp(0.6rem, 2vw, 1.5rem);
            --header-h: clamp(56px, 8vw, 80px);
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #0F1528 0%, #171D32 55%, #1D2038 100%);
            background-attachment: fixed;
            color: #fff;
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
        }

        /* ─── PARTICLES ─── */
        .particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
        .particle {
            position: absolute; width: 3px; height: 3px;
            background: var(--secondary); border-radius: 50%;
            animation: float 15s infinite; opacity: 0.3;
        }
        @keyframes float {
            0%,100% { transform: translate(0,0); }
            25% { transform: translate(50px,-100px); }
            50% { transform: translate(-50px,-200px); }
            75% { transform: translate(100px,-100px); }
        }

        /* ─── HEADER ─── */
        header {
            position: fixed; top: 0; left: 0; right: 0;
            z-index: 1000;
            height: var(--header-h);
            padding: 0 var(--pad-x);
            backdrop-filter: blur(24px);
            background: rgba(10,14,39,0.95);
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        nav {
            display: flex; align-items: center; justify-content: space-between;
            height: 100%; max-width: 1200px; margin: 0 auto;
            gap: clamp(0.5rem, 2vw, 2rem);
        }
        .logo {
            display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; line-height: 0;
        }
        .logo img {
            height: clamp(22px, 3.5vw, 32px); width: auto; display: block;
        }
        .nav-links {
            display: flex; gap: clamp(1rem, 2.5vw, 2rem); list-style: none;
        }
        .nav-links a {
            color: rgba(255,255,255,0.7); text-decoration: none;
            font-weight: 500; font-size: clamp(0.8rem, 1.5vw, 0.9rem);
            transition: color 0.25s; white-space: nowrap;
        }
        .nav-links a:hover, .nav-links a.active { color: var(--secondary); }

        .header-right { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

        /* Search bar */
        .search-bar {
            display: flex; align-items: center;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 24px; padding: 0 1rem; height: 40px;
            transition: all 0.3s; gap: 0.5rem;
            width: clamp(38px, 25vw, 205px);
            cursor: pointer; overflow: hidden;
        }
        .search-bar:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
        .search-icon { color: rgba(255,255,255,0.4); font-size: 0.9rem; flex-shrink: 0; display: flex; align-items: center; line-height: 1; }
        .search-bar-label {
            color: rgba(255,255,255,0.35); font-size: 0.875rem;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
        }

        /* Auth buttons */
        .auth-buttons { display: flex; align-items: center; gap: 0.5rem; }
        .auth-btn {
            font-family: 'Inter', sans-serif;
            font-size: clamp(0.75rem, 1.5vw, 0.85rem);
            font-weight: 600;
            padding: 0 clamp(0.7rem, 2vw, 1.4rem);
            height: 40px; border-radius: 8px; cursor: pointer; border: none;
            transition: all 0.25s; white-space: nowrap;
        }
        .login-btn {
            background: transparent; color: rgba(255,255,255,0.8);
            border: 1px solid rgba(255,255,255,0.18);
        }
        .login-btn:hover { background: rgba(255,255,255,0.08); border-color: var(--secondary); color: var(--secondary); }
        .register-btn {
            background: linear-gradient(135deg, var(--primary), #ff5577);
            color: #fff; border: 1px solid transparent;
            box-shadow: 0 2px 10px rgba(255,23,68,0.25);
        }
        .register-btn:hover { background: linear-gradient(135deg, #ff3355, #ff1744); box-shadow: 0 4px 16px rgba(255,23,68,0.4); }

        /* ─── BURGER MENU ─── */
        .burger-btn {
            display: none; flex-direction: column; justify-content: center; align-items: center;
            width: 40px; height: 40px; cursor: pointer; gap: 5px;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
            border-radius: 8px; flex-shrink: 0; transition: background 0.2s;
        }
        .burger-btn:hover { background: rgba(255,255,255,0.1); }
        .burger-btn span {
            width: 20px; height: 2px; background: rgba(255,255,255,0.8);
            border-radius: 2px; transition: all 0.3s;
        }
        .burger-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
        .burger-btn.open span:nth-child(2) { opacity: 0; }
        .burger-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

        /* Mobile nav drawer */
        .mobile-nav {
            display: none; position: fixed; top: var(--header-h); left: 0; right: 0;
            background: rgba(10,14,39,0.98); backdrop-filter: blur(24px);
            border-bottom: 1px solid rgba(255,255,255,0.1);
            z-index: 999; padding: 1.2rem var(--pad-x);
            flex-direction: column; gap: 0.5rem;
            animation: slideDown 0.25s ease-out;
        }
        .mobile-nav.open { display: flex; }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.mobile-nav a {
    color: rgba(255,255,255,0.8); text-decoration: none; font-size: 1rem;
    font-weight: 500; padding: 0.75rem 1rem;
    border-radius: 10px;
    transition: all 0.2s;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 0.85rem; /* совпадает с кнопками */
    justify-content: center;
}
.mobile-nav a:last-child { border-bottom: none; } /* оставь если есть, не мешает */
.mobile-nav a:hover { 
    color: var(--secondary); 
    background: rgba(0,229,255,0.07);
    border-color: rgba(0,229,255,0.2);
}
        /* Скрываем ссылки Каталог/Подписка в бургере когда они видны в хедере (>680px) */
        @media (min-width: 681px) {
            .mobile-nav-page-link { display: none !important; }
        }
        .mobile-nav-auth {
            display: flex; gap: 0.8rem;
        }
        .mobile-nav-auth .auth-btn { flex: 1; text-align: center; display: flex; align-items: center; justify-content: center; }

        /* ─── SEARCH MODAL ─── */
        .search-modal-overlay {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,0.75); z-index: 4000; backdrop-filter: blur(2px);
        }
        .search-modal-overlay.open {
            display: flex; flex-direction: column; align-items: center;
            padding: var(--header-h) clamp(0.5rem, 3vw, 1.5rem) 0;
            animation: fadeIn 0.2s ease-out;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .search-modal-box {
            width: 100%; max-width: 680px;
            animation: slideDown 0.25s ease-out;
        }
        .search-modal-input-wrap {
            display: flex; align-items: center; gap: 0.9rem;
            background: rgba(18,22,48,0.99);
            border: 1px solid rgba(0,229,255,0.35); border-bottom: none;
            border-radius: 16px 16px 0 0; padding: 0 1.4rem; height: 58px;
        }
        .search-modal-icon { color: rgba(0,229,255,0.55); font-size: 1.1rem; flex-shrink: 0; display: flex; align-items: center; line-height: 1; }
        .search-modal-input {
            background: none; border: none; color: #fff; outline: none;
            width: 100%; font-size: clamp(0.9rem, 2.5vw, 1.05rem); font-family: 'Inter', sans-serif;
        }
        .search-modal-input::placeholder { color: rgba(255,255,255,0.28); }
        .search-modal-close {
            background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 50%; color: rgba(255,255,255,0.5); cursor: pointer;
            font-size: 0.75rem; width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s;
        }
        .search-modal-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
        .search-modal-body {
            background: rgba(14,18,40,0.99);
            border: 1px solid rgba(0,229,255,0.35);
            border-radius: 0 0 16px 16px;
            box-shadow: 0 24px 60px rgba(0,0,0,0.5);
            overflow: hidden;
        }
        .search-modal-scroll {
            padding: 1.3rem 1.6rem 1.6rem;
            max-height: calc(100dvh - var(--header-h) - 58px - 2.5rem);
            overflow-y: auto;
            scroll-behavior: smooth;
            overscroll-behavior: contain;
        }
        .search-modal-scroll::-webkit-scrollbar { width: 4px; }
        .search-modal-scroll::-webkit-scrollbar-track { background: transparent; }
        .search-modal-scroll::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.25); border-radius: 2px; }
        .search-modal-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
        .search-modal-tab {
            padding: 0.38rem 1rem; border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.12);
            background: transparent; color: rgba(255,255,255,0.6);
            font-size: 0.85rem; font-family: 'Inter', sans-serif; cursor: pointer; transition: all 0.2s;
        }
        .search-modal-tab:hover { border-color: rgba(255,255,255,0.28); color: #fff; background: rgba(255,255,255,0.05); }
        .search-modal-tab.active { background: var(--secondary); border-color: var(--secondary); color: #000; font-weight: 700; }
        .search-modal-section-label { font-size: 0.72rem; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; margin-bottom: 0.75rem; }
        .search-history-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
        .search-history-clear { background: none; border: none; color: rgba(255,255,255,0.3); font-size: 0.75rem; cursor: pointer; font-family: 'Inter', sans-serif; transition: color 0.2s; padding: 0; }
        .search-history-clear:hover { color: var(--primary); }
        .search-history-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
        .search-history-tag {
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
            border-radius: 20px; padding: 0.38rem 1rem; font-size: 0.85rem;
            color: rgba(255,255,255,0.55); cursor: pointer; transition: all 0.2s;
            display: flex; align-items: center; gap: 0.45rem;
        }
        .search-history-tag:hover { background: rgba(0,229,255,0.08); border-color: var(--secondary); color: var(--secondary); }
        .search-modal-popular { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
        .search-modal-popular-tag {
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 20px; padding: 0.38rem 1rem; font-size: 0.85rem;
            color: rgba(255,255,255,0.7); cursor: pointer; transition: all 0.2s;
        }
        .search-modal-popular-tag:hover { background: rgba(0,229,255,0.1); border-color: var(--secondary); color: var(--secondary); }
        .search-results { display: none; }
        .search-results.visible { display: block; }
        .search-static.hidden { display: none; }
        .search-result-item {
            display: flex; align-items: center; gap: 0.9rem;
            padding: 0.6rem 0.5rem; border-radius: 10px; cursor: pointer; transition: background 0.15s;
        }
        .search-result-item:hover { background: rgba(255,255,255,0.05); }
        .search-result-img { width: 38px; height: 52px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.07); }
        .search-result-info { flex: 1; min-width: 0; }
        .search-result-name { font-size: 0.92rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.2rem; }
        .search-result-meta { font-size: 0.75rem; color: rgba(255,255,255,0.4); }
        .search-result-rating { font-size: 0.8rem; color: var(--accent); font-weight: 600; flex-shrink: 0; display: flex; align-items: center; gap: 5px; }
        .search-empty { text-align: center; padding: 1.5rem 0 0.5rem; }
        .search-empty-emoji { font-size: 2.2rem; margin-bottom: 0.6rem; }
        .search-empty-text { font-size: 0.92rem; margin-bottom: 0.3rem; }
        .search-empty-hint { font-size: 0.8rem; color: rgba(255,255,255,0.3); }
        .search-dropdown, .search-overlay { display: none !important; }

        /* ─── AUTH MODALS ─── */
        .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 5000; backdrop-filter: blur(4px); align-items: center; justify-content: center; }
        .modal-content { background: linear-gradient(135deg, rgba(18,22,50,0.99), rgba(28,18,50,0.99)); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: clamp(1.5rem, 5vw, 2.5rem); width: min(90vw, 440px); position: relative; animation: slideDown 0.3s ease-out; max-height: 92dvh; overflow-y: auto; }
        .modal-close { position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,0.08); border: none; color: rgba(255,255,255,0.5); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1rem; transition: all 0.2s; flex-shrink: 0; }
        .modal-close:hover { background: rgba(255,255,255,0.15); color: #fff; }
        .modal-header { margin-bottom: 1.8rem; padding-right: 2.5rem; }
        .modal-header h2 { font-family: 'Unbounded', cursive; font-size: clamp(1.1rem, 5vw, 1.5rem); margin-bottom: 0.4rem; background: linear-gradient(135deg,var(--secondary),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height: 1.3; }
        .modal-header p { color: rgba(255,255,255,0.5); font-size: clamp(0.8rem, 3vw, 0.9rem); }
        .form-group { margin-bottom: 1.2rem; }
        .form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; color: rgba(255,255,255,0.8); }
        .input-icon-wrapper { position: relative; }
        .input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 0.9rem; }
        .input-icon-wrapper input { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 0.75rem 1rem 0.75rem 2.8rem; color: #fff; font-family: 'Inter',sans-serif; font-size: 0.9rem; outline: none; transition: border-color 0.2s; }
        .input-icon-wrapper input:focus { border-color: var(--secondary); }
        .input-icon-wrapper input::placeholder { color: rgba(255,255,255,0.25); }
        .validation-error { color: var(--primary); font-size: 0.78rem; margin-top: 0.35rem; display: none; }
        .form-options { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
        .form-checkbox { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: rgba(255,255,255,0.7); }
        .form-checkbox input { accent-color: var(--secondary); }
        .forgot-password { color: var(--secondary); text-decoration: none; font-size: 0.85rem; }
        .modal-button { width: 100%; padding: 0.9rem; background: linear-gradient(135deg, var(--primary), #ff5577); border: none; border-radius: 10px; color: #fff; font-weight: 700; font-size: 1rem; font-family: 'Inter',sans-serif; cursor: pointer; transition: all 0.25s; }
        .modal-button:hover { background: linear-gradient(135deg, #ff3355, var(--primary)); box-shadow: 0 4px 16px rgba(255,23,68,0.4); }
        .modal-switch { text-align: center; margin-top: 1.2rem; font-size: 0.85rem; color: rgba(255,255,255,0.5); }
        .modal-switch a { color: var(--secondary); text-decoration: none; font-weight: 600; }
        .back-to-login { text-align: center; margin-top: 1rem; }
        .back-to-login a { color: var(--secondary); text-decoration: none; font-size: 0.85rem; }
        .modal-message { background: rgba(0,229,255,0.07); border: 1px solid rgba(0,229,255,0.2); border-radius: 10px; padding: 0.9rem; font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-bottom: 1.5rem; line-height: 1.5; }
        .link-cyan { color: var(--secondary); }

        /* ─── INFO PANEL ─── */
        .info-panel {
            margin-top: var(--header-h);
            padding: clamp(1rem, 3vw, 2rem) var(--pad-x) 0;
            position: relative; z-index: 10;
        }

        /* ═══ INFO CONTAINER ═══ */
        .info-container {
            max-width: 1200px; margin: 0 auto;
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(0.8rem, 2vw, 1.2rem);
            align-items: stretch;
        }
        /* Каждая grid-ячейка не должна быть шире своей колонки */
        .popular-today-block,
        .reading-now {
            min-width: 0;
            width: 100%;
        }

        a.category-card, a.popular-item, a.reading-item, a.card { text-decoration: none; color: inherit; }
        .section-more-link {
            font-size: 0.72rem; color: rgba(255,255,255,0.3);
            text-decoration: none; transition: color 0.2s;
        }
        .section-more-link:hover { color: var(--secondary); }

        /* ── Топ сегодня ── */
        .popular-today-block {
            background: linear-gradient(135deg, rgba(26,31,58,0.6), rgba(45,27,61,0.4));
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            padding: clamp(0.9rem, 2vw, 1.3rem);
            backdrop-filter: blur(12px);
        }
        .popular-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 0.9rem;
            padding-bottom: 0.65rem;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .popular-title {
            font-family: 'Unbounded', cursive;
            font-size: 1rem;
            font-weight: 700; color: #fff;
            display: flex; align-items: center; gap: 0.45rem;
        }
        .popular-title::before {
            content: '';
            display: inline-block;
            width: 0.8em; height: 0.8em; flex-shrink: 0;
            background-color: var(--secondary);
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5 3v16h16v2H3V3h2zm15.293 3.293 1.414 1.414L16 13.414l-3-2.999-4.293 4.292-1.414-1.414L13 7.586l3 2.999 4.293-4.292z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5 3v16h16v2H3V3h2zm15.293 3.293 1.414 1.414L16 13.414l-3-2.999-4.293 4.292-1.414-1.414L13 7.586l3 2.999 4.293-4.292z'/%3E%3C/svg%3E");
            -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
            -webkit-mask-size: contain; mask-size: contain;
        }

        .popular-list { display: flex; flex-direction: column; gap: 2px; }

        .popular-item {
            display: flex; align-items: center; gap: 10px;
            padding: 7px 8px;
            border-radius: 10px; cursor: pointer;
            transition: background 0.15s;
        }
        .popular-item:hover { background: rgba(255,255,255,0.05); }

        .popular-rank {
            font-family: 'Unbounded', cursive;
            font-size: 0.72rem; font-weight: 700;
            min-width: 16px; text-align: center; flex-shrink: 0;
            color: rgba(255,255,255,0.2);
        }
        .popular-item:nth-child(1) .popular-rank { color: #FFD600; font-size: 0.82rem; }
        .popular-item:nth-child(2) .popular-rank { color: rgba(200,210,220,0.65); }
        .popular-item:nth-child(3) .popular-rank { color: #c8834a; }
        .popular-item:nth-child(4) .popular-rank { color: rgba(0,229,255,0.55); }
        .popular-item:nth-child(5) .popular-rank { color: rgba(179,136,255,0.55); }

        .popular-cover {
            width: 44px; height: 60px;
            border-radius: 7px; overflow: hidden; flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }
        .popular-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .popular-card-rating, .popular-card-views { display: none; }

        .popular-info { flex: 1; min-width: 0; }
        .popular-name {
            font-weight: 600; font-size: clamp(0.8rem, 1.3vw, 0.92rem);
            color: #fff; line-height: 1.3;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            margin-bottom: 3px;
        }
        .popular-genre {
            font-size: clamp(0.65rem, 1vw, 0.72rem);
            color: rgba(255,255,255,0.35);
        }
        .popular-stats { display: none; }
        .popular-badge { display: none; }

        .popular-score {
            display: flex; align-items: center; gap: 5px;
            font-size: clamp(0.75rem, 1.2vw, 0.85rem);
            font-weight: 700; color: rgba(255,255,255,0.8);
            flex-shrink: 0;
            white-space: nowrap; line-height: 1;
        }
        .score-star { color: #FFD600; font-size: 0.7rem; display: inline-flex; align-items: center; vertical-align: middle; }

        /* ── Читают сейчас ── */
        .reading-now {
            background: linear-gradient(135deg, rgba(26,31,58,0.6), rgba(45,27,61,0.4));
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            padding: clamp(0.9rem, 2vw, 1.3rem);
            backdrop-filter: blur(12px);
        }
        .reading-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 0.9rem;
            padding-bottom: 0.65rem;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .reading-title {
            font-family: 'Unbounded', cursive;
            font-size: 1rem;
            font-weight: 700; color: #fff;
            display: inline-flex; align-items: center; gap: 0.45rem;
        }
        .reading-title::before {
            content: '';
            display: inline-block;
            width: 0.8em; height: 0.8em; flex-shrink: 0;
            background-color: var(--secondary);
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M2 22C2 17.5817 5.58172 14 10 14C14.4183 14 18 17.5817 18 22H16C16 18.6863 13.3137 16 10 16C6.68629 16 4 18.6863 4 22H2ZM10 13C6.685 13 4 10.315 4 7C4 3.685 6.685 1 10 1C13.315 1 16 3.685 16 7C16 10.315 13.315 13 10 13ZM10 11C12.21 11 14 9.21 14 7C14 4.79 12.21 3 10 3C7.79 3 6 4.79 6 7C6 9.21 7.79 11 10 11ZM18.2837 14.7028C21.0644 15.9561 23 18.752 23 22H21C21 19.564 19.5483 17.4671 17.4628 16.5271L18.2837 14.7028ZM17.5962 3.41321C19.5944 4.23703 21 6.20361 21 8.5C21 11.3702 18.8042 13.7252 16 13.9776V11.9646C17.6967 11.7222 19 10.264 19 8.5C19 7.11935 18.2016 5.92603 17.041 5.35635L17.5962 3.41321Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M2 22C2 17.5817 5.58172 14 10 14C14.4183 14 18 17.5817 18 22H16C16 18.6863 13.3137 16 10 16C6.68629 16 4 18.6863 4 22H2ZM10 13C6.685 13 4 10.315 4 7C4 3.685 6.685 1 10 1C13.315 1 16 3.685 16 7C16 10.315 13.315 13 10 13ZM10 11C12.21 11 14 9.21 14 7C14 4.79 12.21 3 10 3C7.79 3 6 4.79 6 7C6 9.21 7.79 11 10 11ZM18.2837 14.7028C21.0644 15.9561 23 18.752 23 22H21C21 19.564 19.5483 17.4671 17.4628 16.5271L18.2837 14.7028ZM17.5962 3.41321C19.5944 4.23703 21 6.20361 21 8.5C21 11.3702 18.8042 13.7252 16 13.9776V11.9646C17.6967 11.7222 19 10.264 19 8.5C19 7.11935 18.2016 5.92603 17.041 5.35635L17.5962 3.41321Z'/%3E%3C/svg%3E");
            -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
            -webkit-mask-size: contain; mask-size: contain;
        }
        .reading-count {
            font-size: clamp(0.6rem, 1vw, 0.82rem);
            color: rgba(255,255,255,0.35);
            white-space: nowrap;
        }
        .reading-count::before { content: ''; }
        .reading-live-dot {
            display: inline-block; width: 6px; height: 6px;
            border-radius: 50%; background: #00e676;
            margin-right: 5px; vertical-align: middle;
            animation: livePulse 1.8s ease-in-out infinite;
        }
        @keyframes livePulse {
            0%,100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.6); }
        }
        .reading-list { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden; }
        .reading-item {
            display: flex; align-items: center; gap: 10px;
            padding: 7px 8px; border-radius: 10px;
            cursor: pointer; transition: background 0.15s;
        }
        .reading-item:hover { background: rgba(255,255,255,0.05); }
        .reading-cover {
            width: 44px; height: 60px;
            border-radius: 7px; overflow: hidden; flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }
        .reading-cover img { width: 100%; height: 100%; object-fit: cover; }
        .reading-info { flex: 1; min-width: 0; }
        .reading-name {
            font-size: clamp(0.8rem, 1.3vw, 0.92rem);
            font-weight: 600; color: #fff;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            margin-bottom: 3px;
        }
        .reading-readers { font-size: clamp(0.65rem, 1vw, 0.72rem); color: rgba(255,255,255,0.35); }
        .reading-bar-wrap { width: 38px; flex-shrink: 0; }
        .reading-bar-bg {
            height: 2px; background: rgba(255,255,255,0.07);
            border-radius: 2px; overflow: hidden; margin-bottom: 3px;
        }
        .reading-bar-fill {
            height: 100%; border-radius: 2px;
            background: linear-gradient(90deg, var(--secondary), var(--purple));
        }
        .reading-bar-label { font-size: 0.58rem; color: rgba(255,255,255,0.22); text-align: right; }


        /* ─── CONTENT CATEGORIES ─── */
        .content-categories {
            padding: clamp(1.5rem, 4vw, 3rem) var(--pad-x) clamp(1rem, 3vw, 2.5rem);
            position: relative; z-index: 10;
        }
        .categories-container { max-width: 1200px; margin: 0 auto; }
        .category-section { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
        .category-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: clamp(1rem, 2.5vw, 1.5rem); gap: 0.8rem; flex-wrap: wrap;
        }
        /* На маленьких экранах — заголовок и кнопка в колонку (только до 374px) */
        @media (max-width: 374px) {
            .category-header { flex-direction: column; align-items: flex-start; }
        }
        .category-title {
            font-family: 'Unbounded', cursive;
            font-size: clamp(1.2rem, 3.5vw, 1.8rem);
            font-weight: 700;
            background: linear-gradient(135deg, var(--secondary), var(--purple));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-flex; align-items: center;
        }
        
        
        
        
        .view-all-btn {
            padding: clamp(0.5rem,1.5vw,0.8rem) clamp(1rem,2.5vw,2rem);
            background: linear-gradient(135deg, rgba(0,229,255,0.1), rgba(179,136,255,0.1));
            border: 2px solid rgba(0,229,255,0.3); border-radius: 30px;
            color: var(--secondary); font-family: 'Unbounded', cursive; font-weight: 600;
            font-size: clamp(0.65rem, 1.3vw, 0.75rem);
            cursor: pointer; transition: all 0.3s; text-decoration: none;
            display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
        }
        .view-all-btn::after { content: '→'; font-size: 1rem; font-weight: 900; }
        .view-all-btn:hover { background: linear-gradient(135deg, rgba(0,229,255,0.2), rgba(179,136,255,0.2)); border-color: var(--secondary); }

        /* Category grid — 6 col на десктопе */
        .category-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: var(--gap);
        }
        .category-card {
            background: linear-gradient(135deg, rgba(26,31,58,0.5), rgba(45,27,61,0.5));
            border-radius: 16px; overflow: hidden; cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid rgba(255,255,255,0.1); position: relative;
            display: flex; flex-direction: column;
        }
        .category-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.4); border-color: var(--secondary); z-index: 2; }
        .category-card-image-wrap {
            position: relative; overflow: hidden;
            aspect-ratio: 3/3.7;
            clip-path: inset(0 0 10px 0);
            margin-bottom: -10px;
        }
        .category-card-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
        .category-card:hover .category-card-image { transform: scale(1.08); }
        .category-card-rating-badge {
            position: absolute; bottom: clamp(1rem,2vw,1.3rem); left: clamp(0.5rem,1.5vw,0.8rem);
            background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); color: #fff;
            padding: 0.25rem 0.5rem; border-radius: 12px;
            font-size: clamp(0.62rem,1.2vw,0.75rem); font-weight: 600; z-index: 2;
            display: flex; align-items: center; gap: 2px;
        }
        .category-card-overlay { display: none; }
        .category-card-content { padding: clamp(0.55rem,1.5vw,0.85rem) clamp(0.6rem,1.5vw,0.9rem) clamp(0.6rem,1.5vw,0.85rem); }
        .category-name { font-weight: 700; font-size: clamp(0.72rem, 1.4vw, 0.95rem); color: #fff; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .category-count { font-size: clamp(0.62rem, 1.1vw, 0.78rem); color: rgba(255,255,255,0.55); margin-top: 0.2rem; }

        /* ─── RECENTLY VIEWED ─── */
        #recentlyViewedSection { display: none; padding: calc(clamp(2rem, 5vw, 4rem) - 2px) var(--pad-x) 0; }
        #recentlyViewedSection .category-card-image-wrap { background: linear-gradient(135deg,#1a1f3a,#2d1b3d); }
        #recentlyViewedSection .recent-scroll-wrap { display: none; }
        #recentGrid .category-card:nth-child(n+7) { display: none; }
        .clear-recent-btn {
            padding: 0.45rem 1.1rem;
            background: linear-gradient(135deg, rgba(0,229,255,0.07), rgba(179,136,255,0.07));
            border: 1px solid rgba(0,229,255,0.25); border-radius: 20px;
            color: rgba(0,229,255,0.7); font-family: 'Unbounded', cursive; font-weight: 600;
            font-size: clamp(0.55rem, 1vw, 0.65rem);
            cursor: pointer; transition: all 0.2s; white-space: nowrap;
        }
        .clear-recent-btn:hover { background: linear-gradient(135deg, rgba(0,229,255,0.15), rgba(179,136,255,0.15)); border-color: rgba(0,229,255,0.6); color: var(--secondary); }

        /* ─── SECTION (Trending, Genres, Recent) ─── */
        section {
            padding: clamp(1rem, 3vw, 2.5rem) var(--pad-x);
            position: relative; z-index: 10;
        }
        .section-header { max-width: 1200px; margin: 0 auto clamp(1rem, 2vw, 1.5rem); }
        .section-title {
            font-family: 'Unbounded', cursive;
            font-size: clamp(1.2rem, 3.5vw, 1.8rem);
            font-weight: 700;
            background: linear-gradient(135deg, var(--secondary), var(--purple));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            display: inline-flex; align-items: center;
        }
        
        
        .section-nav { display: flex; gap: clamp(0.4rem,1.5vw,1rem); margin-bottom: clamp(1rem,2vw,2rem); flex-wrap: wrap; }
        .section-nav button {
            padding: clamp(0.5rem,1.5vw,0.7rem) clamp(0.8rem,2.5vw,1.8rem);
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 30px; color: #fff; font-weight: 600;
            font-size: clamp(0.78rem,1.5vw,0.9rem); cursor: pointer; transition: all 0.3s;
        }
        .section-nav button:hover, .section-nav button.active { background: var(--secondary); border-color: var(--secondary); color: #000; }

        /* Trending cards — 4 col на десктопе */
        .cards-grid {
            max-width: 1200px; margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--gap);
        }
        .card {
            background: linear-gradient(135deg, rgba(26,31,58,0.5), rgba(45,27,61,0.5));
            border-radius: 20px; overflow: hidden; cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid rgba(255,255,255,0.1); position: relative;
            display: flex; flex-direction: column;
        }
        .card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.4); border-color: var(--secondary); }
        .card-image {
            position: relative; overflow: hidden;
            /* Fluid height tied to card width: 3:4 ratio */
            aspect-ratio: 3/4;
        }
        .card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
        .card:hover .card-image img { transform: scale(1.08); }
        .card-badge {
            position: absolute; top: clamp(0.5rem,1.5vw,1rem); right: clamp(0.5rem,1.5vw,1rem);
            background: var(--primary); color: #fff;
            padding: 0.3rem 0.6rem; border-radius: 20px;
            font-size: clamp(0.6rem,1.2vw,0.7rem); font-weight: 700; z-index: 2;
        }
        .card-rating {
            position: absolute; bottom: clamp(0.5rem,1.5vw,1rem); left: clamp(0.5rem,1.5vw,1rem);
            background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); color: #fff;
            padding: 0.3rem 0.6rem; border-radius: 15px;
            font-size: clamp(0.7rem,1.3vw,0.8rem); font-weight: 600; z-index: 2;
            display: flex; align-items: center; gap: 5px; line-height: 0;
        }
        .card-rating svg { display: block; flex-shrink: 0; }
        .card-rating span { line-height: normal; }
        .card-content { padding: clamp(0.8rem,2vw,1.5rem); flex: 1; }
        .card-title { font-size: clamp(0.85rem,2vw,1.1rem); font-weight: 700; margin-bottom: 0.6rem; color: #fff; line-height: 1.3; }
        .card-meta { display: flex; gap: 0.4rem; font-size: clamp(0.72rem,1.3vw,0.85rem); color: rgba(255,255,255,0.6); margin-bottom: 0.6rem; align-items: center; flex-wrap: wrap; }
        .card-description { font-size: clamp(0.75rem,1.3vw,0.85rem); color: rgba(255,255,255,0.7); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

        /* ─── GENRES ─── */
        .genres-grid {
            max-width: 1200px; margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: var(--gap);
        }
        .genre-card {
            background: linear-gradient(135deg, rgba(26,31,58,0.7), rgba(45,27,61,0.7));
            border: 1px solid rgba(255,255,255,0.1); border-radius: 15px;
            padding: clamp(1rem,2.5vw,2rem) clamp(0.5rem,1.5vw,1rem);
            text-align: center; cursor: pointer; transition: all 0.3s;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            min-height: clamp(90px, 14vw, 130px);
            overflow: hidden;
        }
        .genre-card { transition: border-color 0.3s ease, background 0.3s ease; }
        .genre-card:hover { background: rgba(255,255,255,0.04); border-color: color-mix(in srgb, var(--kc, var(--secondary)) 40%, transparent) !important; }
        .genre-card-k .genre-icon { transition: transform 0.4s ease, text-shadow 0.4s ease; text-shadow: none; }
        .genre-card-k:hover .genre-icon { transform: scale(1.22); text-shadow: 0 0 40px color-mix(in srgb, var(--kc) 35%, transparent), 0 0 80px color-mix(in srgb, var(--kc) 18%, transparent); }
        .genre-icon { font-size: clamp(1.5rem, 4vw, 3rem); margin-bottom: clamp(0.3rem,1vw,1rem); flex-shrink: 0; }
        .genre-name { font-weight: 600; font-size: clamp(0.72rem,1.3vw,0.9rem); word-break: break-word; hyphens: auto; line-height: 1.3; }

        /* ─── RECENT UPDATES ─── */
        .recent-updates {
            padding: clamp(1rem, 3vw, 2.5rem) var(--pad-x);
            position: relative; z-index: 10; overflow: hidden;
        }
        .recent-container {
            max-width: 1200px; margin: 0 auto;
            background: linear-gradient(135deg, rgba(26,31,58,0.7), rgba(45,27,61,0.7));
            border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
            padding: clamp(1rem,3vw,2rem); backdrop-filter: blur(10px);
            overflow: hidden; box-sizing: border-box; max-width: min(1200px, 100%);
        }
        .recent-header { margin-bottom: clamp(1rem,2.5vw,2rem); }
        .recent-title {
            font-family: 'Unbounded', cursive;
            font-size: clamp(1.1rem, 3vw, 1.8rem);
            font-weight: 700;
            background: linear-gradient(135deg, var(--secondary), var(--purple));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-flex; align-items: center;
        }
        

        /* Fluid recent list — fills viewport nicely at any width */
        .recent-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(240px, 30vw, 340px)), 1fr));
            gap: clamp(0.8rem, 2vw, 1.5rem);
        }
        .recent-item {
            display: flex; gap: clamp(0.8rem, 1.5vw, 1rem);
            padding: clamp(0.8rem, 1.5vw, 1.2rem);
            background: rgba(255,255,255,0.03); border-radius: 15px;
            border: 1px solid rgba(255,255,255,0.05); transition: all 0.3s; cursor: pointer;
            align-items: center; overflow: hidden; min-width: 0;
        }
        .recent-item:hover { background: rgba(0,229,255,0.1); border-color: var(--secondary); transform: translateX(4px); }
        .recent-cover {
            width: clamp(50px, 8vw, 70px); height: clamp(68px, 11vw, 95px);
            border-radius: 10px; overflow: hidden; flex-shrink: 0;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }
        .recent-cover img { width: 100%; height: 100%; object-fit: cover; }
        .recent-info { flex: 1; min-width: 0; }
        .recent-name { font-weight: 600; font-size: clamp(0.85rem,1.8vw,1rem); margin-bottom: 0.4rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .recent-chapter { font-size: clamp(0.78rem,1.5vw,0.85rem); color: var(--secondary); margin-bottom: 0.4rem; }
        .recent-time { font-size: clamp(0.68rem,1.2vw,0.75rem); color: rgba(255,255,255,0.5); display: flex; align-items: center; }

                /* ─── FOOTER ─── */
        footer {
            background: rgba(10,14,39,0.8);
            border-top: 1px solid rgba(255,255,255,0.1);
            padding: 48px 0 24px;
            position: relative; z-index: 10;
        }
        .footer-content {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 48px;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 2fr;
            gap: 32px;
            box-sizing: border-box;
        }
        .footer-section h3 {
            font-family: 'Unbounded', cursive;
            font-size: 0.88rem;
            margin-bottom: 14px;
            background: linear-gradient(135deg, var(--secondary), var(--purple));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .footer-logo { height: 28px; width: auto; display: block; }
        .footer-section p { color: rgba(255,255,255,0.7); line-height: 1.6; font-size: 0.82rem; }
        .footer-links { list-style: none; }
        .footer-links li { margin-bottom: 8px; }
        .footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.3s; font-size: 0.82rem; }
        .footer-links a:hover { color: var(--secondary); }
        @media (max-width: 900px) {
            .footer-content { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 480px) {
            .footer-content { padding-left: 20px; padding-right: 20px; }
            .footer-content { grid-template-columns: 1fr; }
        }

        /* ─── BREAKPOINTS ─── */

        /* Строка поиска под хедером — только ≤680px */
        .header-search-row {
            display: none;
            position: fixed; top: var(--header-h); left: 0; right: 0;
            padding: 6px var(--pad-x) 8px;
            background: rgba(10,14,39,0.97); backdrop-filter: blur(24px);
            border-bottom: 1px solid rgba(255,255,255,0.06);
            z-index: 1001;
        }
        .header-search-row .search-bar {
            width: 100%; max-width: 100%; border-radius: 12px; height: 40px;
        }

        /* ═══ 901–1100px (~1024px) ═══ */
        @media (min-width: 901px) and (max-width: 1100px) {
            .burger-btn { display: flex; }

            /* Популярные: скрываем 6+ */
            .popular-item:nth-child(n+6) { display: none; }

            /* Читают сейчас: handled by JS for absolute positioning */

            /* Категории: 5 карточек, 1 ряд */
            .category-grid { grid-template-columns: repeat(5, 1fr) !important; }
            .category-section .category-card:nth-child(n+6) { display: none; }
            #recentGrid .category-card:nth-child(n+6) { display: none; }

            /* Тренды: 4 col × 2 rows = 8 */
            .cards-grid { grid-template-columns: repeat(4, 1fr) !important; }

            /* Жанры: 6 col × 3 rows = 18 (скрываем 19, 20, 21) */
            .genres-grid { grid-template-columns: repeat(6, 1fr) !important; }
            .genre-card:nth-child(n+19) { display: none; }
        }

        /* ═══ 681–900px (планшет-порт) ═══ */
        @media (min-width: 681px) and (max-width: 900px) {
            .burger-btn { display: flex; }

            /* Популярные: скрываем 6+ */
            .popular-item:nth-child(n+6) { display: none; }

            /* Читают сейчас: handled by JS */

            /* Категории: 4 карточки */
            .category-grid { grid-template-columns: repeat(4, 1fr) !important; }
            .category-section .category-card:nth-child(n+5) { display: none; }
            #recentGrid .category-card:nth-child(n+5) { display: none; }

            /* Тренды: 3 col × 2 rows = 6 */
            .cards-grid { grid-template-columns: repeat(3, 1fr) !important; }
            .cards-grid .card:nth-child(n+7) { display: none; }

            /* Жанры: 5 колонок */
            .genres-grid { grid-template-columns: repeat(5, 1fr) !important; }
        }

        /* ═══ Горизонтальный скролл для category-grid на мобилках ═══ */
        .category-section .category-grid-scroll-wrap { display: none; }

        @media (max-width: 680px) {
            /* Прячем стандартный grid */
            .category-section > .category-grid { display: none !important; }
            #recentlyViewedSection > .categories-container > .category-grid { display: none !important; }

            /* Контейнер скролла */
            .category-section .category-grid-scroll-wrap,
            #recentlyViewedSection .recent-scroll-wrap {
                display: block;
                overflow-x: auto;
                overflow-y: visible;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            .category-section .category-grid-scroll-wrap::-webkit-scrollbar,
            #recentlyViewedSection .recent-scroll-wrap::-webkit-scrollbar { display: none; }

            /* Flex-строка карточек */
            .category-section .category-grid-scroll-wrap .category-grid,
            #recentlyViewedSection .recent-scroll-wrap .category-grid {
                display: flex !important;
                flex-wrap: nowrap;
                gap: 8px;
                width: max-content;
            }

            /* Фиксированная ширина карточки */
            .category-section .category-grid-scroll-wrap .category-card,
            #recentlyViewedSection .recent-scroll-wrap .category-card {
                display: flex !important;
                flex-shrink: 0;
                flex-grow: 0;
                flex-basis: 130px;
                width: 130px;
                scroll-snap-align: start;
            }
        }

        /* 375px — 3 карточки видны */
        @media (min-width: 375px) and (max-width: 680px) {
            .category-section .category-grid-scroll-wrap .category-card,
            #recentlyViewedSection .recent-scroll-wrap .category-card {
                flex-basis: 145px; width: 145px;
            }
        }

        /* 414px+ */

        /* ═══ ≤680px (мобилка) ═══ */
        @media (max-width: 680px) {
            .nav-links { display: none; }
            nav .search-bar { display: none; }
            .header-search-row { display: block; }
            .info-panel {
                margin-top: calc(var(--header-h) + 54px);
                padding-left: var(--pad-x);
                padding-right: var(--pad-x);
            }
            .mobile-nav { top: calc(var(--header-h) + 54px); }

            .info-container { grid-template-columns: 1fr; }
            .reading-now { align-self: start; }

            /* На мобилке показываем только 3 в каждом блоке */
            .popular-item:nth-child(n+4) { display: none; }
            /* reading-item count handled by JS */

            .cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
            .cards-grid .card:nth-child(n+5) { display: none; }

            .genres-grid { grid-template-columns: repeat(4, 1fr) !important; }
            .recent-list { grid-template-columns: 1fr; }
        }

        /* ═══ ≤540px ═══ */
        @media (max-width: 540px) {
            .cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
            .cards-grid .card:nth-child(n+5) { display: none; }

            .genres-grid { grid-template-columns: repeat(3, 1fr) !important; }
            .genre-card:last-child:nth-child(3n+1) { display: none; }
        }

        /* ═══ ≤400px ═══ */
        @media (max-width: 400px) {
            .welcome-stats { gap: 0.8rem; }

            .cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
            .cards-grid .card:nth-child(n+5) { display: none; }

            .genres-grid { grid-template-columns: repeat(2, 1fr) !important; }
            .genre-card:last-child:nth-child(odd) { display: none; }
        }

        /* 414px+ — 4 карточки в окне */
        @media (min-width: 414px) and (max-width: 680px) {
            .category-section .category-grid-scroll-wrap .category-card,
            #recentlyViewedSection .category-grid-scroll-wrap .category-card {
                flex-basis: 155px; width: 155px;
            }
        }

        .genre-card.genre-hidden { display: none; }

        /* ═══ info-container мобилка ≤680px ═══ */
        @media (max-width: 680px) {
            .popular-today-block,
            .reading-now {
                padding: 0.85rem 0.9rem;
            }
            .popular-item,
            .reading-item {
                gap: 9px;
                padding: 6px 6px;
            }
            .popular-cover,
            .reading-cover {
                width: 38px; height: 52px;
                border-radius: 6px;
            }
            .popular-rank {
                min-width: 14px;
                font-size: 0.65rem;
            }
            .popular-item:nth-child(1) .popular-rank { font-size: 0.75rem; }
            .popular-name,
            .reading-name {
                font-size: 0.82rem;
            }
            .popular-genre,
            .reading-readers {
                font-size: 0.62rem;
            }
            .popular-score {
                font-size: 0.75rem;
                min-width: auto;
            }
            .reading-bar-wrap { width: 30px; }
            .reading-bar-label { font-size: 0.55rem; }
        }


        /* ─── USER MENU ─── */
        .user-menu-wrap { position: relative; flex-shrink: 0; }
        .user-chip {
            display: flex; align-items: center; gap: 0.55rem;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
            border-radius: 50px; padding: 4px 14px 4px 4px;
            cursor: pointer; transition: all 0.25s; max-width: 220px;
            user-select: none;
        }
        .user-chip:hover { background: rgba(0,229,255,0.06); border-color: var(--secondary); }
        .user-chip-avatar {
            width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
            flex-shrink: 0; background: rgba(255,255,255,0.07); position: relative;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.7rem; font-weight: 700; overflow: visible;
            border: 2px solid rgba(255,255,255,0.18);
        }
        .user-chip-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; overflow: hidden; }
        .chip-notif-dot { position: absolute; top: -2px; right: -7px; min-width: 14px; height: 14px; background: var(--primary); border-radius: 7px; font-size: 0.52rem; font-weight: 700; color: #fff; display: none; align-items: center; justify-content: center; padding: 0 3px 1px; }
        .user-chip-name {
            font-size: 0.83rem; font-weight: 600; color: rgba(255,255,255,0.9);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px;
        }
        @media (min-width: 801px) and (max-width: 1000px) { .user-chip-name { max-width: 60px; } }
        @media (min-width: 1000px) { .user-chip-name { max-width: 135px; } }
        @media (max-width: 374px) { .user-chip-name { max-width: 60px; } }
        .user-chip-arrow { font-size: 0.55rem; color: rgba(255,255,255,0.4); flex-shrink: 0; transition: transform 0.2s; margin-left: 0; }
        .user-menu-wrap:hover .user-chip-arrow,
        .user-menu-wrap.mobile-open .user-chip-arrow { transform: rotate(180deg); }
        .user-dropdown {
            position: fixed; top: var(--header-h); right: 0;
            background: rgba(13,17,38,0.98);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 18px; padding: 0.6rem;
            min-width: 268px; z-index: 2000;
            box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.05);
            backdrop-filter: blur(32px);
            opacity: 0; pointer-events: none;
            transform: translateY(6px);
            transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
            transform-origin: top right;
        }
        .user-menu-wrap:hover .user-dropdown,
        .user-menu-wrap.mobile-open .user-dropdown { opacity: 1; pointer-events: all; transform: translateY(0); }
        @media (max-width: 1024px) {
            .user-menu-wrap:hover .user-dropdown { opacity: 0; pointer-events: none; transform: translateY(6px); }
            .user-menu-wrap.mobile-open .user-dropdown { opacity: 1 !important; pointer-events: all !important; transform: translateY(0) !important; }
            .user-menu-wrap:hover .user-chip-arrow { transform: none; }
            .user-menu-wrap.mobile-open .user-chip-arrow { transform: rotate(180deg) !important; }
        }
        .user-dropdown::before { content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 20px; }
        .dropdown-header {
            display: flex; align-items: stretch; gap: 0.75rem;
            padding: 0.8rem; margin-bottom: 0.45rem;
            border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);
            overflow: hidden; position: relative; isolation: isolate; min-height: 64px;
        }
        .dropdown-header-bg {
            position: absolute; inset: 0;
            background-position: center; background-size: 110%; background-repeat: no-repeat;
        }
        .dropdown-header-bg::after { content: ''; position: absolute; inset: 0; background: rgba(6,9,26,0.85); }
        .dropdown-avatar {
            width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
            background: rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: center;
            font-size: 0.75rem; font-weight: 700; border: 2px solid rgba(255,255,255,0.25);
            position: relative; z-index: 1; align-self: center;
        }
        .dropdown-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
        .dropdown-user-info { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 1; }
        .dropdown-username { font-size: 0.88rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 145px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
        .dropdown-plan-badge {
            display: inline-flex; align-items: center; gap: 0.25rem;
            font-size: 0.66rem; font-weight: 700; align-self: flex-start;
            background: linear-gradient(135deg, rgba(0,229,255,0.15), rgba(179,136,255,0.15));
            border: 1px solid rgba(0,229,255,0.4);
            box-shadow: 0 0 10px rgba(0,229,255,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
            border-radius: 5px; padding: 2px 7px; position: relative; overflow: hidden;
        }
        .dropdown-plan-badge .badge-text {
            background: linear-gradient(135deg, var(--secondary), var(--purple));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .dropdown-plan-badge::after {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(90deg, transparent 0%, rgba(0,229,255,0.1) 50%, transparent 100%);
            background-size: 200% 100%; animation: badgeShimmer 3s linear infinite; pointer-events: none;
        }
        .dropdown-plan-badge.ultimate {
            background: linear-gradient(135deg, rgba(255,170,0,0.15), rgba(255,56,100,0.15));
            border: 1px solid rgba(255,170,0,0.4);
            box-shadow: 0 0 10px rgba(255,170,0,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
        }
        .dropdown-plan-badge.ultimate .badge-text {
            background: linear-gradient(135deg, var(--accent), var(--primary));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .dropdown-plan-badge.ultimate::after {
            background: linear-gradient(90deg, transparent 0%, rgba(255,170,0,0.1) 50%, transparent 100%);
            background-size: 200% 100%;
        }
        .dropdown-plan-badge.free { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); box-shadow: none; }
        .dropdown-plan-badge.free .badge-text { background: none; -webkit-background-clip: unset; -webkit-text-fill-color: rgba(255,255,255,0.70); background-clip: unset; }
        .dropdown-plan-badge.free::after { display: none; }
        @keyframes badgeShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
        .dropdown-item {
            display: flex; align-items: center; gap: 0.6rem;
            padding: 0.5rem 0.85rem; border-radius: 10px;
            color: rgba(255,255,255,0.62); font-size: 0.82rem;
            cursor: pointer; transition: all 0.15s; text-decoration: none;
        }
        .dropdown-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
        .dropdown-item.active { color: #fff; background: rgba(255,255,255,0.05); }
        .dropdown-item-icon { font-size: 0.88rem; flex-shrink: 0; width: 20px; display: flex; align-items: center; justify-content: center; }
        .dropdown-item-badge { margin-left: auto; background: var(--primary); color: #fff; font-size: 0.6rem; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px 1px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .dropdown-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 0.35rem 0.4rem; }
        .dropdown-item.logout { color: rgba(255,80,80,0.6); }
        .dropdown-item.logout:hover { background: rgba(255,23,68,0.08); color: rgba(255,90,90,0.9); }
        .dropdown-item.mobile-only { display: none; }
        /* ─── LOGOUT MODAL ─── */
        .logout-modal-overlay { display: none; position: fixed; inset: 0; z-index: 6000; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); align-items: center; justify-content: center; }
        .logout-modal-overlay.open { display: flex; animation: fadeIn 0.2s ease-out; }
        .logout-modal { background: rgba(13,17,38,0.99); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 2rem 2.5rem; text-align: center; max-width: 360px; width: 90%; box-shadow: 0 24px 60px rgba(0,0,0,0.6); }
        .logout-modal-icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,23,68,0.08); border: 1px solid rgba(255,23,68,0.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
        .logout-modal-title { font-family: 'Unbounded', cursive; font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
        .logout-modal-text { font-size: 0.85rem; color: rgba(255,255,255,0.55); margin-bottom: 1.5rem; line-height: 1.6; }
        .logout-modal-btns { display: flex; gap: 0.75rem; justify-content: center; }
        .logout-btn-confirm { background: linear-gradient(135deg, var(--primary), #ff5577); border: none; border-radius: 10px; color: #fff; font-size: 0.85rem; font-weight: 700; padding: 0.65rem 1.5rem; cursor: pointer; font-family: 'Inter', sans-serif; }
        .logout-btn-confirm:hover { box-shadow: 0 4px 16px rgba(255,23,68,0.4); }
        .logout-btn-cancel { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; color: rgba(255,255,255,0.8); font-size: 0.85rem; font-weight: 600; padding: 0.65rem 1.5rem; cursor: pointer; font-family: 'Inter', sans-serif; }
        .logout-btn-cancel:hover { background: rgba(255,255,255,0.1); color: #fff; }

        /* Auth modal */
        .auth-modal-overlay { display:none; position:fixed; inset:0; z-index:6000; background:rgba(0,0,0,0.75); backdrop-filter:blur(8px); align-items:center; justify-content:center; padding:1rem; animation:authOverlayIn .25s ease-out; transition:background-image .3s; }
        .auth-modal-overlay.open { display:flex; }
        @keyframes authOverlayIn { from { opacity:0; } to { opacity:1; } }
        .auth-modal {
            background:linear-gradient(180deg,rgba(15,20,42,0.99) 0%,rgba(10,14,26,0.99) 100%);
            border:1px solid rgba(255,255,255,0.08); border-radius:24px;
            padding:2.2rem 2rem 1.8rem; max-width:400px; width:100%;
            box-shadow:0 32px 80px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.04),0 0 120px rgba(0,229,255,0.03);
            position:relative; animation:authSlideUp .35s ease-out;
        }
        @keyframes authSlideUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
        .auth-form-in { transition: opacity .70s ease; }
        .auth-modal-close { position:absolute; top:0.8rem; right:1rem; background:none; border:none; color:rgba(255,255,255,0.3); font-size:1.6rem; cursor:pointer; transition:color .2s; line-height:1; }
        .auth-modal-close:hover { color:#fff; }
        .auth-modal-logo { text-align:center; margin-bottom:0.3rem; }
        .auth-logo-img { height: 26px; width: auto; display: inline-block; }
        .auth-modal-sub { text-align:center; font-size:0.75rem; color:rgba(255,255,255,0.35); margin-bottom:1.5rem; letter-spacing:0.04em; }
        .auth-tabs { display:flex; gap:0; margin-bottom:1.2rem; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); }
        .auth-tab { flex:1; padding:0.6rem; background:transparent; border:none; color:rgba(255,255,255,0.4); font-family:'Inter',sans-serif; font-size:0.82rem; font-weight:600; cursor:pointer; transition:all .25s; }
        .auth-tab.active { background:rgba(255,255,255,0.08); color:#fff; }
        .auth-tab:hover:not(.active) { color:rgba(255,255,255,0.7); }
        .auth-field { margin-bottom:0.75rem; }
        .auth-field label { display:block; font-size:0.72rem; color:rgba(255,255,255,0.45); margin-bottom:0.35rem; font-weight:600; letter-spacing:0.03em; }
        .auth-input { width:100%; padding:0.65rem 0.85rem; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:11px; color:#fff; font-size:0.84rem; font-family:'Inter',sans-serif; outline:none; transition:border-color .2s,box-shadow .2s; box-sizing:border-box; }
        .auth-input:focus { border-color:var(--secondary); box-shadow:0 0 0 3px rgba(0,229,255,0.08); }
        .auth-input.error { border-color:rgba(255,23,68,0.5); }
        .auth-input:-webkit-autofill,
        .auth-input:-webkit-autofill:hover,
        .auth-input:-webkit-autofill:focus,
        .auth-input:-webkit-autofill:active { -webkit-text-fill-color:#fff !important; -webkit-box-shadow:0 0 0 1000px #101428 inset !important; box-shadow:0 0 0 1000px #101428 inset !important; transition:background-color 5000s ease-in-out 0s; font-family:'Inter',sans-serif !important; font-size:0.84rem !important; caret-color:#fff; }
        .auth-btn { width:100%; padding:0.7rem; background:linear-gradient(135deg,var(--primary),#ff5577); border:none; border-radius:11px; color:#fff; font-size:0.88rem; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif; margin-top:0.5rem; transition:box-shadow .2s,transform .15s; }
        .auth-btn:hover { box-shadow:0 6px 20px rgba(255,23,68,0.35); transform:translateY(-1px); }
        .auth-btn:active { transform:translateY(0); }
        .auth-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
        .auth-link { background:none; border:none; color:var(--secondary); font-size:0.78rem; cursor:pointer; font-family:'Inter',sans-serif; padding:0; font-weight:500; }
        .auth-link:hover { text-decoration:underline; }
        .auth-checkbox { display:flex; align-items:flex-start; gap:0.6rem; margin:0.6rem 0 0.3rem; cursor:pointer; user-select:none; }
        .auth-checkbox input[type="checkbox"] { position:absolute; opacity:0; width:0; height:0; }
        .auth-checkbox .cb-box { width:15px; height:15px; flex-shrink:0; margin-top:2px; border-radius:4px; border:1.5px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.04); transition:border-color .15s, background .15s; position:relative; }
        .auth-checkbox:hover .cb-box { border-color:rgba(0,229,255,0.45); }
        .auth-checkbox .cb-box::after { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolyline points='1.5,5.5 4,8 8.5,2' fill='none' stroke='%2300e5ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/7px 7px no-repeat; opacity:0; transition:opacity .15s; }
        .auth-checkbox input[type="checkbox"]:checked ~ .cb-box { background:rgba(0,229,255,0.1); border-color:rgba(0,229,255,0.9); }
        .auth-checkbox input[type="checkbox"]:checked ~ .cb-box::after { opacity:1; }
        .auth-checkbox span { font-size:0.72rem; color:rgba(255,255,255,0.45); line-height:1.4; }
        .auth-checkbox a { color:var(--secondary); text-decoration:none; }
        .auth-checkbox a:hover { text-decoration:underline; }
        .auth-alert { display:none; background:rgba(255,23,68,0.08); border:1px solid rgba(255,23,68,0.2); border-radius:10px; padding:0.55rem 0.8rem; color:rgba(255,100,100,0.9); font-size:0.78rem; margin-bottom:0.7rem; line-height:1.4; }
        .auth-alert.visible { display:block; }
        .auth-divider { display:flex; align-items:center; gap:0.7rem; margin:0.6rem 0; }
        .auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,0.07); }
        .auth-divider span { font-size:0.7rem; color:rgba(255,255,255,0.25); }
        .auth-forgot { text-align:right; margin:-0.3rem 0 0.4rem; }
        .header-auth-btns { display:flex; align-items:center; gap:0.5rem; }
        .login-btn-header { display:flex; align-items:center; gap:0.4rem; padding:0 1.1rem; height:40px; background:linear-gradient(135deg,var(--primary),#ff5577); border:none; border-radius:8px; color:#fff; font-size:0.82rem; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif; white-space:nowrap; transition:box-shadow .2s; }
        .login-btn-header:hover { box-shadow:0 4px 14px rgba(255,23,68,0.35); }
        .register-btn-header { display:flex; align-items:center; gap:0.4rem; padding:0 1.1rem; height:40px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:8px; color:rgba(255,255,255,0.8); font-size:0.82rem; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; white-space:nowrap; transition:all .2s; }
        .register-btn-header:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.2); color:#fff; }
        @media(max-width:480px) {
            .auth-modal { padding:1.5rem 1.3rem 1.3rem; border-radius:18px; }
            .header-auth-btns .register-btn-header { display:none; }
        }
        /* ─── TOAST ─── */
        #toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(80px); background: rgba(16,20,46,0.97); border: 1px solid rgba(0,229,255,0.28); border-radius: 12px; padding: 0.7rem 1.4rem; color: #fff; font-size: 0.86rem; font-weight: 600; z-index: 9999; transition: transform 0.3s ease; pointer-events: none; backdrop-filter: blur(16px); }
        #toast.show { transform: translateX(-50%) translateY(0); }
        /* Burger: show only on mobile for non-logged users */
        .burger-btn { display: none; }
        .guest-burger { display:none; flex-direction:column; justify-content:center; align-items:center; width:40px; height:40px; cursor:pointer; gap:5px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:8px; flex-shrink:0; transition:background .2s; }
        .guest-burger:hover { background:rgba(255,255,255,0.1); }
        .guest-burger span { width:18px; height:2px; background:rgba(255,255,255,0.8); border-radius:2px; transition:all .3s; }
        .guest-burger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
        .guest-burger.open span:nth-child(2) { opacity:0; }
        .guest-burger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
        .guest-mobile-nav { display:none; position:fixed; top:calc(var(--header-h) + 54px); left:0; right:0; background:rgba(10,14,39,0.98); backdrop-filter:blur(24px); border-bottom:1px solid rgba(255,255,255,0.1); z-index:2100; padding:0.6rem var(--pad-x) 0.7rem; flex-direction:column; gap:0.4rem; animation:slideDown .25s ease-out; }
        .guest-mobile-nav.open { display:flex; }
        .guest-mobile-nav .gmn-auth-row { display:flex; gap:0.5rem; margin-bottom:0.25rem; }
        .guest-mobile-nav .gmn-auth-row .login-btn-header,
        .guest-mobile-nav .gmn-auth-row .register-btn-header { flex:1; justify-content:center; }
        .guest-mobile-nav .gmn-sep { height:1px; background:rgba(255,255,255,0.07); margin:0.15rem 0; }
        .guest-mobile-nav a { color:rgba(255,255,255,0.8); text-decoration:none; font-size:0.85rem; font-weight:500; padding:0.7rem 1rem; border-radius:10px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; gap:0.5rem; transition:all .2s; }
        .guest-mobile-nav a:hover { color:var(--secondary); background:rgba(0,229,255,0.07); border-color:rgba(0,229,255,0.2); }
        @media(max-width:800px) {
            .header-auth-btns .guest-burger { display:flex; }
            .header-auth-btns .login-btn-header,
            .header-auth-btns .register-btn-header { display:none; }
        }
        @media (max-width: 800px) {
            /* On mobile: show user-chip as the menu trigger, hide burger */
            .user-menu-wrap { display: flex !important; }
            nav .search-bar { display: none; }
            nav .nav-links { display: none; }
            .header-search-row { display: block; }
            .info-panel { margin-top: calc(var(--header-h) + 54px); }
            .mobile-nav { top: calc(var(--header-h) + 54px); }
            /* Compact chip on mobile - always show name */
            .user-chip { padding: 4px 10px 4px 4px; max-width: 160px; }
            .user-chip-name { display: block; font-size: 0.78rem; }
            .dropdown-item.mobile-only { display: flex; }
            .user-dropdown { position: fixed; top: calc(var(--header-h) + 54px) !important; right: 0 !important; left: 0 !important; width: 100vw !important; min-width: unset !important; border-radius: 0 0 18px 18px; max-height: calc(100vh - var(--header-h) - 54px - 20px); overflow-y: auto; border-top: 1px solid rgba(255,255,255,0.06) !important; padding-left: var(--pad-x) !important; padding-right: var(--pad-x) !important; }
            .dropdown-header { margin-left: -1px; margin-right: -1px; }
        }
        @media (min-width: 600px) and (max-width: 800px) {
            .user-chip { max-width: 200px; }
            .user-chip-name { max-width: 130px; }
        }
        /* Mobile dropdown: click-driven (JS handles) */
        .user-menu-wrap.mobile-open .user-dropdown {
            opacity: 1 !important;
            pointer-events: all !important;
            transform: translateY(0) !important;
        }
        /* Dropdown z-index above search row */
        .user-dropdown { z-index: 2100 !important; }

#headerAuthArea { display: flex; align-items: center; justify-content: flex-end; }

/* ── Hero list modal (atl-box reuse) ── */
.atl-overlay { display:none; position:fixed; inset:0; z-index:5000; background:rgba(0,0,0,0.78); backdrop-filter:blur(6px); align-items:center; justify-content:center; padding:1rem; animation:fadeIn 0.18s ease-out; overscroll-behavior:contain; }
.atl-overlay.open { display:flex; }
.atl-box { background:linear-gradient(135deg,#0d1124,#111a36); border:1px solid rgba(255,255,255,0.1); border-radius:20px; width:100%; max-width:540px; max-height:92dvh; overflow:hidden; box-shadow:0 32px 80px rgba(0,0,0,0.7); animation:slideDown 0.28s cubic-bezier(0.22,1,0.36,1); display:flex; flex-direction:column; }
.atl-head { display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.4rem 1rem; border-bottom:1px solid rgba(255,255,255,0.06); background:linear-gradient(135deg,rgba(13,17,36,0.99),rgba(17,26,54,0.99)); border-radius:20px 20px 0 0; backdrop-filter:blur(20px); flex-shrink:0; }
.atl-head-left { display:flex; align-items:center; gap:1rem; min-width:0; flex:1; overflow:hidden; padding-right:0.75rem; }
.atl-cover { width:44px; height:60px; border-radius:8px; object-fit:cover; flex-shrink:0; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); }
.atl-head h3 { font-family:'Unbounded',cursive; font-size:0.92rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
.atl-close { width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09); border-radius:50%; cursor:pointer; transition:all 0.2s; color:rgba(255,255,255,0.45); flex-shrink:0; }
.atl-close:hover { background:rgba(255,255,255,0.1); color:#fff; }
.atl-body { padding:1.4rem 1.6rem 1rem; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.atl-body::-webkit-scrollbar { width:4px; }
.atl-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.09); border-radius:2px; }
.atl-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.35); margin-bottom:0.55rem; display:flex; align-items:center; gap:0.4rem; }
.atl-f-row { margin-bottom:1.2rem; }
.atl-status-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.4rem; }
.atl-status-btn { display:flex; align-items:center; gap:0.45rem; padding:0.55rem 0.75rem; border-radius:9px; cursor:pointer; font-size:0.8rem; font-weight:600; font-family:'Inter',sans-serif; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); color:rgba(255,255,255,0.6); transition:all 0.18s; text-align:left; }
.atl-status-btn:hover { background:rgba(255,255,255,0.08); color:#fff; border-color:rgba(255,255,255,0.18); }
.atl-status-btn.active { font-weight:700; }
.atl-status-btn[data-s="reading"].active { background:rgba(0,229,255,0.1); border-color:rgba(0,229,255,0.35); color:var(--secondary); }
.atl-status-btn[data-s="planned"].active { background:rgba(179,136,255,0.1); border-color:rgba(179,136,255,0.35); color:var(--purple); }
.atl-status-btn[data-s="completed"].active { background:rgba(62,207,142,0.1); border-color:rgba(62,207,142,0.35); color:#3ecf8e; }
.atl-status-btn[data-s="on-hold"].active { background:rgba(255,214,0,0.1); border-color:rgba(255,214,0,0.35); color:var(--accent); }
.atl-status-btn[data-s="dropped"].active { background:rgba(255,23,68,0.08); border-color:rgba(255,23,68,0.3); color:var(--primary); }
.atl-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.atl-num-wrap { position:relative; width:90px; }
.atl-num-input { width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); border-radius:9px; padding:0.55rem 1.8rem 0.55rem 0.75rem; color:#fff; font-family:'Inter',sans-serif; font-size:0.85rem; outline:none; transition:all 0.2s; text-align:center; -moz-appearance:textfield; appearance:textfield; }
.atl-num-input::-webkit-outer-spin-button, .atl-num-input::-webkit-inner-spin-button { -webkit-appearance:none; }
.atl-num-input:focus { border-color:rgba(0,229,255,0.35); background:rgba(0,229,255,0.025); }
.atl-num-arrows { position:absolute; right:0; top:0; bottom:0; width:1.6rem; display:flex; flex-direction:column; border-left:1px solid rgba(255,255,255,0.07); }
.atl-num-arrow { flex:1; display:flex; align-items:center; justify-content:center; cursor:pointer; color:rgba(255,255,255,0.3); transition:all 0.15s; user-select:none; }
.atl-num-arrow:first-child { border-bottom:1px solid rgba(255,255,255,0.07); border-radius:0 9px 0 0; }
.atl-num-arrow:last-child { border-radius:0 0 9px 0; }
.atl-num-arrow:hover { background:rgba(0,229,255,0.12); color:var(--secondary); }
.atl-num-arrow svg { pointer-events:none; }
.atl-chapters-row { display:flex; align-items:center; gap:0.55rem; }
.atl-chapters-sep { color:rgba(255,255,255,0.3); font-weight:700; }
.atl-chapters-total-lbl { font-size:0.8rem; color:rgba(255,255,255,0.45); font-weight:600; }
.atl-chapters-progress { height:4px; background:rgba(255,255,255,0.07); border-radius:2px; overflow:hidden; margin-top:0.55rem; }
.atl-chapters-progress-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--secondary),var(--purple)); transition:width 0.3s; }
.atl-ratings-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; margin-bottom:0; }
.atl-r-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:0.75rem; user-select:none; -webkit-user-select:none; }
.atl-r-card-top { display:flex; align-items:center; gap:0.4rem; margin-bottom:0.55rem; }
.atl-r-card-icon { display:flex; align-items:center; flex-shrink:0; }
.atl-r-card-label { font-size:0.72rem; color:rgba(255,255,255,0.55); flex:1; }
.atl-r-card-val { font-size:0.82rem; font-weight:700; min-width:1.2rem; text-align:right; }
.atl-r-slider { width:100%; height:4px; border-radius:2px; outline:none; cursor:pointer; appearance:none; -webkit-appearance:none; background:rgba(255,255,255,0.1); touch-action:none; display:block; }
.atl-r-slider::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--thumb-color,var(--accent)); cursor:grab; box-shadow:0 0 8px var(--thumb-color,var(--accent)); }
.atl-r-slider:active::-webkit-slider-thumb { cursor:grabbing; }
.atl-r-slider::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--thumb-color,var(--accent)); cursor:grab; border:none; box-shadow:0 0 8px var(--thumb-color,var(--accent)); }
@media (max-width:540px) { .atl-ratings-grid { grid-template-columns:1fr; } .atl-r-card { min-width:0; overflow:hidden; } }
.atl-footer { display:flex; align-items:center; gap:0.6rem; padding:1rem 1.6rem 1.4rem; border-top:1px solid rgba(255,255,255,0.06); background:linear-gradient(135deg,rgba(13,17,36,0.99),rgba(17,26,54,0.99)); border-radius:0 0 20px 20px; backdrop-filter:blur(20px); flex-shrink:0; }
.atl-btn-del { background:rgba(255,23,68,0.07); border:1px solid rgba(255,23,68,0.2); border-radius:10px; color:rgba(255,80,80,0.7); font-size:0.82rem; font-weight:600; padding:0.65rem 1rem; cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.2s; display:none; align-items:center; gap:0.4rem; white-space:nowrap; }
.atl-btn-del:hover { background:rgba(255,23,68,0.15); border-color:rgba(255,23,68,0.4); color:rgba(255,80,80,1); }
.atl-btn-del.visible { display:flex; }
.atl-btn-cancel { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:10px; color:rgba(255,255,255,0.8); font-size:0.85rem; font-weight:600; padding:0.65rem 1.2rem; cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.2s; margin-left:auto; white-space:nowrap; }
.atl-btn-cancel:hover { background:rgba(255,255,255,0.1); color:#fff; }
.atl-btn-save { background:linear-gradient(135deg,#3ecf8e,#2db87a); border:none; border-radius:10px; color:#fff; font-size:0.85rem; font-weight:700; padding:0.65rem 1.4rem; cursor:pointer; font-family:'Inter',sans-serif; transition:box-shadow 0.2s; white-space:nowrap; }
.atl-btn-save:hover { box-shadow:0 4px 16px rgba(62,207,142,0.4); }
@media (max-width:540px) {
    .atl-overlay { align-items:center; padding:0.75rem; overflow:hidden; }
    .atl-box { border-radius:16px !important; width:calc(100vw - 1.5rem) !important; max-width:calc(100vw - 1.5rem) !important; margin:0 !important; max-height:88dvh !important; }
    .atl-head { padding:0.9rem 1rem; border-radius:16px 16px 0 0; }
    .atl-body { padding:1rem 1rem 0.75rem; }
    .atl-footer { padding:0.75rem 1rem 1rem; border-radius:0 0 16px 16px; }
}

/* ── Ad banner ── */
.ad-banner-wrap { padding: clamp(1rem, 2vw, 1.5rem) var(--pad-x) 0; }
.ad-banner { position: relative; max-width: 1200px; margin: 0 auto; height: 210px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
.ad-banner-link { display: block; width: 100%; height: 100%; }
.ad-banner-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: opacity 0.2s; }
.ad-banner-link:hover .ad-banner-img { opacity: 0.9; }
.ad-label { position: absolute; bottom: 4px; right: 6px; font-size: 10px; color: rgba(255,255,255,0.3); pointer-events: none; user-select: none; letter-spacing: 0.02em; }
@media (max-width: 480px) { .ad-banner { height: 126px; } }

/* ═══════════════════════════════════════
   TELEGRAM PROMO BANNER
   ═══════════════════════════════════════ */
.tg-promo-wrap { padding: clamp(1rem, 2vw, 1.5rem) var(--pad-x) 0; }
.tg-promo {
    position: relative;
    display: block;
    max-width: 1200px;
    margin: 0 auto;
    height: 210px;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(135deg, rgba(26,31,58,0.6), rgba(45,27,61,0.4));
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    transition: border-color 0.3s, box-shadow 0.3s;
    isolation: isolate;
}
.tg-promo:hover {
    border-color: rgba(0,229,255,0.35);
    box-shadow: 0 12px 40px -16px rgba(0,229,255,0.22);
}

.tg-promo-art {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-20%, -50%) scale(1.3);
    height: 100%;
    width: 320px;
    background: url('/media/tgbanner.png') no-repeat center center;
    background-size: contain;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
    transition: transform 0.4s;
}
.tg-promo:hover .tg-promo-art {
    transform: translate(-20%, -50%) scale(1.36);
}

.tg-promo-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.tg-promo-orbs span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0; transition: opacity 0.4s ease; }
.tg-promo-orbs span:nth-child(1) {
    width: 260px; height: 260px;
    background: rgba(41,182,246,0.22);
    top: -80px; left: -40px;
    animation: tgPromoFloat 11s ease-in-out infinite;
}
.tg-promo-orbs span:nth-child(2) {
    width: 200px; height: 200px;
    background: rgba(41,182,246,0.18);
    bottom: -70px; right: -20px;
    animation: tgPromoFloat 14s ease-in-out infinite reverse;
}
.tg-promo:hover .tg-promo-orbs span { opacity: 1; }
@keyframes tgPromoFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(24px, -18px); }
}

.tg-promo-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 100%;
    padding: 0 2.2rem;
}

.tg-promo-icon {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
    color: rgba(255,255,255,0.82);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.tg-promo:hover .tg-promo-icon {
    background: linear-gradient(135deg, #29b6f6 0%, #0288d1 100%);
    color: #fff;
    animation: tgPromoPulse 1.6s ease-in-out infinite;
}
@keyframes tgPromoPulse {
    0%, 100% { box-shadow: 0 10px 28px rgba(41,182,246,0.45), inset 0 1px 0 rgba(255,255,255,0.25); }
    50% { box-shadow: 0 14px 38px rgba(41,182,246,0.7), inset 0 1px 0 rgba(255,255,255,0.25); }
}

.tg-promo-text { flex: 0 1 auto; max-width: 360px; min-width: 0; }

.tg-promo-cta {
    flex-shrink: 0;
    margin-left: auto;
    padding: clamp(0.5rem,1.5vw,0.8rem) clamp(1rem,2.5vw,2rem);
    background: linear-gradient(135deg, rgba(0,229,255,0.1), rgba(179,136,255,0.1));
    border: 2px solid rgba(0,229,255,0.3);
    border-radius: 30px;
    color: var(--secondary);
    font-family: 'Unbounded', cursive;
    font-weight: 600;
    font-size: clamp(0.65rem, 1.3vw, 0.75rem);
    transition: background 0.3s, border-color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}
.tg-promo-cta::after { content: '→'; font-size: 1rem; font-weight: 900; }
.tg-promo:hover .tg-promo-cta {
    background: linear-gradient(135deg, rgba(0,229,255,0.2), rgba(179,136,255,0.2));
    border-color: var(--secondary);
}
.tg-promo-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #29b6f6;
    margin-bottom: 0.45rem;
}
.tg-promo-title {
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(1.05rem, 2.1vw, 1.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 0.45rem;
}
.tg-promo-sub {
    font-size: clamp(0.78rem, 1.3vw, 0.92rem);
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
}

/* ── Tablet large: art hidden, banner height reduced ── */
@media (max-width: 1100px) {
    .tg-promo { height: 160px; }
    .tg-promo-art { display: none; }
    .tg-promo-text { max-width: none; flex: 1 1 auto; }
}

/* ── Tablet/medium: banner shrinks, layout still split (icon+text ← → cta) ── */
@media (max-width: 900px) {
    .tg-promo { height: 150px; min-height: 0; }
    .tg-promo-content { padding: 0 1.6rem; gap: 1.1rem; align-items: center; }
    .tg-promo-text { max-width: none; flex: 1 1 auto; }
    .tg-promo-sub { max-width: 520px; }
    .tg-promo-icon { width: 60px; height: 60px; border-radius: 16px; }
    .tg-promo-icon svg { width: 30px; height: 30px; }
}

/* ── Phone landscape / small tablet: shorter banner, no sub ── */
@media (max-width: 700px) {
    .tg-promo {
        height: auto;
        min-height: 0;
        border-radius: 12px;
    }
    .tg-promo-content { padding: 1rem 1.2rem; gap: 0.95rem; align-items: center; }
    .tg-promo-icon { width: 52px; height: 52px; border-radius: 14px; }
    .tg-promo-icon svg { width: 26px; height: 26px; }
    .tg-promo-eyebrow { font-size: 0.62rem; margin-bottom: 0.2rem; letter-spacing: 0.1em; }
    .tg-promo-title { font-size: 1rem; margin-bottom: 0; line-height: 1.25; }
    .tg-promo-sub { display: none; }
    .tg-promo-cta { padding: 0.45rem 0.95rem; font-size: 0.62rem; border-width: 1.5px; }
    .tg-promo-cta::after { font-size: 0.85rem; }
}

/* ── Phone portrait: hide button, only icon + title ── */
@media (max-width: 520px) {
    .tg-promo-content { padding: 0.9rem 1rem; gap: 0.8rem; }
    .tg-promo-icon { width: 46px; height: 46px; border-radius: 12px; }
    .tg-promo-icon svg { width: 24px; height: 24px; }
    .tg-promo-title { font-size: 0.92rem; }
    .tg-promo-eyebrow { font-size: 0.58rem; }
    .tg-promo-cta { display: none; }
}

/* ── Very small (≤360px): tighten further ── */
@media (max-width: 360px) {
    .tg-promo-content { padding: 0.8rem 0.9rem; gap: 0.7rem; }
    .tg-promo-icon { width: 42px; height: 42px; border-radius: 11px; }
    .tg-promo-icon svg { width: 22px; height: 22px; }
    .tg-promo-title { font-size: 0.85rem; }
}

/* ═══════════════════════════════════════
   HERO SECTION — ВЫБОР РЕДАКЦИИ
   ═══════════════════════════════════════ */

.hero-section {
    position: relative;
    margin-top: var(--header-h);
    height: calc(100vh - var(--header-h));
    min-height: 560px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero-section[hidden] {
    display: none !important;
}
.hero-section:not([hidden]) + .info-panel {
    margin-top: 0;
}

/* ── BG wrapper: clips scaled backgrounds, lets art overflow freely ── */
.hero-bg-wrap {
    position: absolute; inset: 0; overflow: hidden; z-index: 0;
}

/* ── Backgrounds: two layers for crossfade ── */
.hero-bg-a,
.hero-bg-b {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center 18%;
    filter: blur(3px) brightness(0.38);
    transform: scale(1.06);
    transition: opacity 0.9s ease;
    will-change: opacity;
}
.hero-bg-initial {
    background:
        radial-gradient(circle at 68% 24%, rgba(0,229,255,0.18), transparent 32%),
        radial-gradient(circle at 82% 64%, rgba(179,136,255,0.14), transparent 34%),
        linear-gradient(135deg, #0a0e27 0%, #111831 48%, #05070d 100%);
    filter: none;
    transform: none;
}
.hero-bg-b { opacity: 0; }

/* ── Gradient overlay: heavy on left + bottom ── */
.hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(to right,
            rgba(10,14,39,0.97) 0%,
            rgba(10,14,39,0.85) 35%,
            rgba(10,14,39,0.45) 62%,
            rgba(10,14,39,0.1)  100%),
        linear-gradient(to top,
            rgba(10,14,39,0.96) 0%,
            rgba(10,14,39,0.1)  40%,
            transparent 60%),
        linear-gradient(to bottom,
            rgba(10,14,39,0.6) 0%,
            transparent 18%);
}

/* ── Large Folio-style decorative circle (top-right) ── */

/* ── Character/hero art image — позиция задаётся через HERO_ART_CONFIG в JS ── */
.hero-art {
    position: absolute;
    bottom: 0;
    max-height: 580px;
    z-index: 3;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 14%);
    mask-image: linear-gradient(to top, transparent 0%, black 14%);
    transition: opacity 0.45s ease;
}
.hero-art.fading { opacity: 0; }
.hero-art img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
    object-position: bottom center;
}
.hero-art-initial-kagura {
    right: 40%;
    height: 76%;
    bottom: 0;
}

/* ── Content wrapper ── */
.hero-content-wrap {
    position: relative;
    z-index: 4;
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ── Top meta bar (magazine-style) ── */
.hero-top-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: clamp(0.9rem, 2.2vh, 1.4rem);
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.htm-left {
    color: rgba(255,255,255,0.33);
    white-space: nowrap;
}
.htm-line {
    flex: 1;
    height: 1px;
    margin: 0 1rem;
    background: linear-gradient(to right, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
}
.htm-right {
    color: rgba(255,255,255,0.33);
    white-space: nowrap;
}
.htm-right .htm-sep {
    margin: 0 0.55rem;
    color: rgba(255,255,255,0.33);
}
.htm-right .htm-accent {
    color: rgba(255,255,255,0.33);
}

/* ── Main row: text block (left) + dots column (right) ── */
.hero-main-row {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Content block — left side */
.hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 560px;
    min-height: 340px;
}
.hero-inner.hero-fade-out {
    opacity: 0;
    transition: opacity 0.28s ease;
}
.hero-inner.hero-fade-in {
    animation: heroFadeIn 0.48s ease forwards;
}
@keyframes heroFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Dots row — right side, horizontal ── */
.hero-dots-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-shrink: 0;
    align-self: flex-end;
    margin: 0 0 clamp(1rem, 2.2vh, 1.6rem);
    padding: 0;
    height: 7px;
    box-sizing: content-box;
}
.hero-dot {
    position: relative; overflow: hidden;
    height: 7px; width: 28px;
    background: rgba(255,255,255,0.15);
    border: none; border-radius: 4px;
    cursor: pointer; padding: 0; flex-shrink: 0;
    transition: width 0.35s ease;
    box-sizing: border-box;
}
.hero-dot::before {
    content: ''; position: absolute; left: 0; right: 0;
    top: -8px; bottom: -8px;
}
.hero-dot.active { width: 52px; }
.hero-dot.active::after {
    content: ''; position: absolute; inset: 0;
    background: var(--secondary); border-radius: 4px;
    transform: scaleX(0); transform-origin: left center;
    animation: heroDotFill 7s linear forwards;
}
@keyframes heroDotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
body.hero-modal-open .hero-dot.active::after { animation-play-state: paused; }
.hero-dot:hover:not(.active) { background: rgba(255,255,255,0.38); }

/* ── "Выбор читателей" label ── */
.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.67rem; font-weight: 700; line-height: 1;
    letter-spacing: 0.18em; color: var(--purple);
    text-transform: uppercase; margin-bottom: 1rem;
}
.hero-pick-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--purple); box-shadow: 0 0 8px var(--purple);
    flex-shrink: 0; position: relative; top: -1px;
    animation: heroPulse 2.4s ease-in-out infinite;
}
@keyframes heroPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--purple); }
    50%       { opacity: 0.35; box-shadow: 0 0 2px var(--purple); }
}

/* ── Type + status badges ── */
.hero-badges {
    display: flex; align-items: center;
    gap: 0.4rem; margin-bottom: 0.6rem; flex-wrap: wrap;
}
.hero-badge-type {
    font-size: 0.63rem; font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.2rem 0.55rem; border-radius: 4px; border: 1px solid;
}
.hero-badge-status {
    font-size: 0.63rem; font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.2rem 0.55rem; border-radius: 4px; border: 1px solid;
}

/* ── Genres ── */
.hero-genres {
    font-size: 0.69rem; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255,255,255,0.35); margin-bottom: 0.85rem;
}

/* ── Title ── */
.hero-title {
    font-family: 'Unbounded', cursive;
    font-size: clamp(1.75rem, 3.6vw, 3rem);
    line-height: 1.18; margin: 0 0 0.55rem; font-weight: 900; color: #fff;
}
.hero-title-thin { font-weight: 900; color: #fff; }
.hero-title-bold  { font-weight: 900; color: #fff; }

/* ── Description ── */
.hero-desc {
    font-size: clamp(0.82rem, 1.35vw, 0.92rem);
    line-height: 1.7; color: rgba(255,255,255,0.52);
    margin-bottom: 1.5rem; max-width: 450px;
    display: -webkit-box; -webkit-line-clamp: 4;
    -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(clamp(0.82rem, 1.35vw, 0.92rem) * 1.7 * 4);
}

/* ── Actions ── */
.hero-actions {
    display: flex; align-items: center;
    gap: 0.65rem; flex-wrap: wrap;
}
.hero-btn-read {
    display: inline-flex; align-items: center; gap: 0.45rem;
    background: linear-gradient(135deg, rgba(0,229,255,0.15), rgba(179,136,255,0.15));
    border: 1px solid rgba(0,229,255,0.4);
    box-shadow: 0 0 14px rgba(0,229,255,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
    color: #fff; font-family: 'Unbounded', cursive;
    font-weight: 700; font-size: 0.72rem;
    padding: 0.72rem 1.45rem; border-radius: 10px;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    position: relative; overflow: hidden;
    transition: all 0.22s;
}
.hero-btn-read-text {
    background: linear-gradient(135deg, var(--secondary), var(--purple));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; font-weight: 700;
}
@keyframes heroReadShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.hero-btn-read::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(0,229,255,0.1) 50%, transparent 100%);
    background-size: 200% 100%; animation: heroReadShimmer 2.5s linear infinite; pointer-events: none;
}
.hero-btn-read:hover {
    background: linear-gradient(135deg, rgba(0,229,255,0.25), rgba(179,136,255,0.25));
    border-color: rgba(0,229,255,0.7);
    box-shadow: 0 0 22px rgba(0,229,255,0.28), inset 0 1px 0 rgba(255,255,255,0.1);
}
.hero-btn-list {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.17);
    color: rgba(255,255,255,0.8); font-family: 'Inter', sans-serif;
    font-weight: 600; font-size: 0.84rem;
    padding: 0.72rem 1.15rem; border-radius: 10px;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.hero-btn-list:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); }
.hero-btn-list[style*="--hero-btn-list-accent"] { color: var(--hero-btn-list-accent); border-color: color-mix(in srgb, var(--hero-btn-list-accent) 40%, transparent); background: color-mix(in srgb, var(--hero-btn-list-accent) 14%, transparent); }
.hero-badge-rating {
    display: inline-flex; align-items: baseline; gap: 0.32rem;
    font-size: 0.63rem; font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.55rem; border-radius: 4px;
    color: #FFD600; border: 1px solid rgba(255,214,0,0.35);
    background: rgba(255,214,0,0.09);
    line-height: 1;
}
.hero-badge-rating .hbr-star {
    font-size: 0.7rem; line-height: 1;
}

/* ── 1025–1700px: JS применяет rightMedium, CSS подгоняет размеры ── */
@media (max-width: 1700px) {
    .hero-inner { max-width: 480px; min-height: 300px; }
    .hero-title { font-size: clamp(1.6rem, 3vw, 2.5rem); }
    .hero-art-initial-kagura { right: 28%; }
}

/* ── ≤1024px — колонка: арт вправо, контент слева, точки под ним ── */
@media (max-width: 1024px) {
    .hero-main-row {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .hero-dots-row {
        justify-content: flex-start;
        align-self: flex-start;
        margin: 1.2rem 0 0;
    }
    .hero-inner { max-width: 44%; min-height: 0; }
    .hero-art { max-height: 520px; }
    .hero-art-initial-kagura { right: 5%; }
    .hero-title { font-size: clamp(1.4rem, 2.8vw, 2rem); }
    .hero-desc { -webkit-line-clamp: 3; line-clamp: 3; }
}

/* ── ≤800px — 90vh, арт по центру снизу ── */
@media (max-width: 800px) {
    .hero-section {
        margin-top: calc(var(--header-h) + 54px);
        height: calc(90vh - var(--header-h) - 54px);
        min-height: 500px;
        max-height: 700px;
    }
    .hero-overlay {
        background:
            linear-gradient(to bottom, rgba(10,14,39,0.6) 0%, rgba(10,14,39,0.08) 28%, rgba(10,14,39,0.08) 52%, rgba(10,14,39,0.94) 100%),
            linear-gradient(to right, rgba(10,14,39,0.55) 0%, transparent 55%);
    }
    .hero-main-row {
        justify-content: flex-start;
        padding-top: clamp(0.8rem, 2vh, 1.4rem);
    }
    .hero-title {
        margin-top: 0.7rem;
    }
    .hero-dots-row {
        margin: 1.1rem 0 0;
        height: 6px;
        gap: 6px;
    }
    .hero-dot { height: 6px; }
    .htm-line { display: none; }
    .hero-inner { max-width: 78%; }
    .hero-art {
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%);
        height: 48% !important;
        max-height: 360px;
    }
    .hero-art-initial-kagura { transform: translateX(-62%); }
    .hero-title { font-size: clamp(1.3rem, 4vw, 1.8rem); }
    .hero-desc { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; }
    .hero-genres { display: none; }
    .hero-actions { flex-wrap: nowrap; gap: 0.5rem; }
    .hero-btn-read { padding: 0.6rem 1.1rem; font-size: 0.67rem; }
    .hero-btn-list { padding: 0.6rem 0.95rem; font-size: 0.76rem; }
    .hero-pick-dot { width: 5px; height: 5px; position: static; }
}

/* ── ≤600px ── */
@media (max-width: 600px) {
    .hero-section { max-height: 640px; }
    .hero-inner { max-width: 88%; }
    .hero-art { height: 46% !important; }
    .hero-title { font-size: clamp(1.15rem, 4.5vw, 1.5rem); }
    .hero-desc { -webkit-line-clamp: 2; line-clamp: 2; }
    .hero-btn-read { padding: 0.55rem 0.9rem; font-size: 0.62rem; }
    .hero-btn-list { padding: 0.55rem 0.8rem; font-size: 0.72rem; }
}

/* ── ≤480px ── */
@media (max-width: 480px) {
    .hero-section { max-height: 580px; }
    .hero-inner { max-width: 92%; }
    .hero-art { height: 42% !important; }
    .hero-title { font-size: clamp(1.05rem, 4.5vw, 1.3rem); }
    .hero-desc { -webkit-line-clamp: 2; line-clamp: 2; }
    .hero-label { font-size: 0.58rem; margin-bottom: 0.5rem; }
    .hero-badges { margin-bottom: 0.3rem; }
    .hero-badge-type, .hero-badge-status { font-size: 0.56rem; padding: 0.14rem 0.38rem; }
    .hero-badge-rating { font-size: 0.56rem; padding: 0.26rem 0.38rem 0.18rem; align-items: center; }
    .hero-badge-rating .hbr-star { font-size: 0.56rem; }
}

/* ── ≤360px ── */
@media (max-width: 360px) {
    .hero-section { max-height: 520px; overflow: hidden; }
    .hero-inner { max-width: 95%; }
    .hero-art { height: 38% !important; }
    .hero-title { font-size: clamp(1rem, 4.5vw, 1.15rem); }
    .hero-desc { -webkit-line-clamp: 2; line-clamp: 2; }
}