/* HEADER
----------------------------------------------- */
 #header {
     background-color: hsl(240deg 10% 95% / 56%);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     position: sticky;
     top: 0;
     z-index: 100;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

 [data-theme="dark"] #header {
     background-color: hsl(240 10% 20% / 0.8);
 }

 .header__inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 30px;
     padding: 20px 0;
 }

 /* Logo */
 .header__logo {
     flex-shrink: 0;
     order: 0;
     margin-right: auto;
 }

 .logo {
     display: flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
     transition: opacity 0.2s;
 }

 .logo:hover {
     opacity: 0.8;
 }

 .logo__img {
     height: 40px;
     width: auto;
     display: block;
 }

 .logo__text {
     font-size: 24px;
     font-weight: var(--ui-fw-bolder);
     color: var(--accent);
 }

 .logo__text--black {
     color: var(--tt);
 }

 .logo__litres {
     height: 15px;
     width: 55px;
     display: block;
 }

 /* Search */
 .header__search {
     flex: 1 1 0;
     max-width: 500px;
     order: 2;
 }

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

 .search-form__input {
     width: 100%;
     height: 40px;
     padding: 0 45px 0 15px;
     border: 1px solid var(--bdc);
     border-radius: 20px;
     background-color: var(--bg-darker);
     color: var(--tt);
     font-size: 14px;
     transition: all 0.2s;
 }

 .search-form__input:focus {
     outline: none;
 }

 .search-form__btn {
     position: absolute;
     right: 5px;
     width: 30px;
     height: 30px;
     border: none;
     background: none;
     color: var(--tt-fade);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: color 0.2s;
     border-radius: 50%;
 }

 .search-form__btn:hover {
     color: var(--accent);
     background-color: var(--bg-darker);
 }

 /* Theme Toggle */
 .header__theme {
     flex-shrink: 0;
     order: 4;
 }

 .theme-toggle {
     width: 40px;
     height: 40px;
     border: 1px solid var(--bdc);
     border-radius: 50%;
     background-color: var(--bg-darker);
     color: var(--tt);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
     position: relative;
 }

 .theme-toggle:hover {
     border-color: var(--accent);
     color: var(--accent);
     background-color: var(--bg);
 }

 .theme-icon {
     font-size: 18px;
     position: absolute;
     transition: opacity 0.2s, transform 0.2s;
 }

 .theme-icon--light {
     opacity: 1;
     transform: rotate(0deg);
 }

 .theme-icon--dark {
     opacity: 0;
     transform: rotate(90deg);
 }

 [data-theme="dark"] .theme-icon--light {
     opacity: 0;
     transform: rotate(-90deg);
 }

 [data-theme="dark"] .theme-icon--dark {
     opacity: 1;
     transform: rotate(0deg);
 }

 /* Navigation */
 .header__nav {
     flex-shrink: 0;
     order: 2;
 }

 .nav-list {
     display: flex;
     gap: 20px;
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .nav-list__link {
     color: var(--tt);
     text-decoration: none;
     font-size: 15px;
     font-weight: var(--ui-fw-normal);
     transition: color 0.2s;
     padding: 8px 0;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .nav-list__link i {
     font-size: 16px;
 }

 .nav-list__link:hover {
     color: var(--accent);
 }

 /* Mobile Menu Button */
 .header__mobile-btn {
     display: none;
     width: 40px;
     height: 40px;
     border: 1px solid var(--bdc);
     border-radius: 8px;
     background: var(--bg-darker);
     color: var(--tt);
     cursor: pointer;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
 }

 .header__mobile-btn:hover {
     background: var(--accent);
     border-color: var(--accent);
     color: #fff;
 }

 .header__mobile-btn .fas {
     font-size: 18px;
 }

 /* Overlay */
 .overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(4px);
     z-index: 9999;
 }

 /* Mobile Menu */
 .mobile-menu {
     position: fixed;
     top: 0;
     left: 0;
     width: 280px;
     max-width: 85%;
     min-height: 100vh;
     min-height: -webkit-fill-available;
     height: 100vh;
     height: -webkit-fill-available;
     background: var(--bg);
     box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
     z-index: 10000;
     overflow-y: auto;
     transform: translateX(-100%);
     transition: transform 0.3s ease;
     visibility: hidden;
     display: flex;
     flex-direction: column;
 }

 .mobile-menu.is-active {
     visibility: visible;
     transform: translateX(0);
 }

 .mobile-menu__header {
     padding: 20px;
     border-bottom: 1px solid var(--bdc);
     display: flex;
     align-items: center;
     flex-shrink: 0;
 }

 .mobile-menu__content {
     padding: 20px;
     flex: 1;
     overflow-y: auto;
 }


 body.mobile-menu-is-opened {
     overflow: hidden;
 }

 .mobile-menu__content .header__nav {
     padding: 0;
     margin: 0;
     display: block !important;
 }

 .mobile-menu__content .nav-list,
 .mobile-menu__content .nav-list--mobile {
     display: flex !important;
     flex-direction: column !important;
     gap: 10px;
     margin: 0;
     padding: 0;
 }

 .mobile-menu__content .nav-list__link {
     padding: 12px 0;
     font-weight: var(--ui-fw-medium);
     display: flex !important;
     align-items: center;
     gap: 12px;
     color: var(--tt);
     transition: color 0.2s;
 }

 .mobile-menu__content .nav-list__link:hover {
     color: var(--accent);
     background: transparent;
 }


 /* Auth */
 .header__auth {
     flex-shrink: 0;
 }

 .auth-user__link {
     display: flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
     color: var(--tt);
     transition: opacity 0.2s;
 }

 .auth-user__link:hover {
     opacity: 0.8;
 }

 .auth-user__avatar {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background-size: cover;
     background-position: center;
     background-color: var(--bg-darker);
     border: 2px solid var(--bdc);
 }

 .auth-user__name {
     font-size: 14px;
     font-weight: var(--ui-fw-normal);
 }

 .auth-login__link {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 16px;
     border: 1px solid var(--bdc);
     border-radius: 20px;
     background-color: var(--bg-darker);
     color: var(--tt);
     text-decoration: none;
     font-size: 14px;
     transition: all 0.2s;
 }

 .auth-login__link:hover {
     border-color: var(--accent);
     color: var(--accent);
     background-color: var(--bg);
 }

 .auth-login__link i {
     font-size: 16px;
 }

 /* CONTENT
----------------------------------------------- */
 .content {
     padding: 40px 0;
 }

 /* CAROUSEL
----------------------------------------------- */
 .carousel {
     margin-bottom: 40px;
 }

 .carousel__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 20px;
 }

 .carousel__title {
     font-size: 24px;
     font-weight: var(--ui-fw-bolder);
     color: var(--tt);
     margin: 0;
 }

 .carousel__nav {
     display: flex;
     gap: 10px;
 }

 .carousel__btn {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     border: 1px solid var(--bdc);
     background: var(--bg);
     color: var(--tt);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
 }

 .carousel__btn:hover {
     background: var(--accent);
     color: #fff;
     border-color: var(--accent);
 }

 .carousel__btn:disabled {
     opacity: 0.5;
     cursor: default;
 }

 .carousel__btn:disabled:hover {
     background: var(--bg);
     color: var(--tt);
     border-color: var(--bdc);
 }

 .carousel__container {
     position: relative;
     overflow: hidden;
 }

 .carousel__track {
     display: flex;
     gap: 20px;
     transition: transform 0.3s ease;
 }

 .carousel__track .book-card {
     flex: 0 0 153px;
     min-width: 0;
 }

 .book-card.book-carousel .book-card__cover {
     max-height: 220px;
 }

 /* SECTIONS, TABS
----------------------------------------------- */
 .sect {
     margin-bottom: 40px;
 }

 .sect__tabs {
     display: flex;
     gap: 10px;
     margin-bottom: 30px;
     border-bottom: 2px solid var(--bdc);
 }

 .sect__tabs-btn {
     padding: 12px 10px;
     border: none;
     background: none;
     color: var(--tt-fade);
     font-size: 16px;
     font-weight: var(--ui-fw-normal);
     cursor: pointer;
     position: relative;
     transition: all 0.2s;
     border-bottom: 2px solid transparent;
     margin-bottom: -2px;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .sect__tabs-btn i {
     font-size: 16px;
 }

 .sect__tabs-btn:hover {
     color: var(--tt);
 }

 .sect__tabs-btn.is-active {
     color: var(--accent);
     font-weight: 500;
     border-bottom-color: var(--accent);
 }

 .sect__content {
     display: none;
 }

 .sect__content.is-active {
     display: block;
 }

 /* TABS BLOCK (Player & YouTube)
----------------------------------------------- */
 .tabs-block {
     margin: 40px 0;
 }

 .tabs-block__tabs {
     display: flex;
     gap: 10px;
     margin-bottom: 30px;
     border-bottom: 2px solid var(--bdc);
 }

 .tabs-block__tabs-btn {
     padding: 12px 24px;
     border: none;
     background: none;
     color: var(--tt-fade);
     font-size: 16px;
     font-weight: var(--ui-fw-normal);
     cursor: pointer;
     position: relative;
     transition: all 0.2s;
     border-bottom: 2px solid transparent;
     margin-bottom: -2px;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .tabs-block__tabs-btn i {
     font-size: 16px;
 }

 .tabs-block__tabs-btn:hover {
     color: var(--tt);
 }

 .tabs-block__tabs-btn.is-active {
     color: var(--accent);
     font-weight: var(--ui-fw-bolder);
     border-bottom-color: var(--accent);
 }

 .tabs-block__content-item {
     display: none;
 }

 .tabs-block__content-item.is-active {
     display: block;
 }

 .tabs-block__youtube iframe {
     width: 100%;
     height: 350px;
     border: none;
     border-radius: 8px;
 }

 .tabs-block__player-placeholder,
 .tabs-block__youtube-placeholder {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     min-height: 200px;
     color: var(--tt-fade);
     gap: 15px;
 }

 .tabs-block__player-placeholder i,
 .tabs-block__youtube-placeholder i {
     font-size: 48px;
 }

 .tabs-block__player-placeholder p,
 .tabs-block__youtube-placeholder p {
     margin: 0;
     font-size: 16px;
     font-weight: var(--ui-fw-medium);
 }

 /* BOOKS GRID
----------------------------------------------- */
 .books-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
     gap: 20px;
 }

 .books-grid3 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     margin-bottom: 30px;
 }

 .books-grid3__item {
     background: var(--bg-darker);
     border-radius: 8px;
     padding: 20px;
 }

 .books-grid3__item-title {
     font-size: 18px;
     font-weight: var(--ui-fw-bolder);
     color: var(--tt);
     margin: 0 0 15px 0;
     line-height: 1.3;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .books-grid3__item-title .fas {
     font-size: 18px;
     color: var(--accent);
 }

 .books-grid3__item-content {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 /* BOOK CARD
----------------------------------------------- */
 .book-card {
     border-radius: 8px;
     overflow: hidden;
 }

 .book-card>.book-card__link {
     display: flex;
     flex-direction: column;
     text-decoration: none;
     color: inherit;
 }

 .book-card__cover {
     position: relative;
     width: 100%;
     max-height: 265px;
     overflow: hidden;
     background-color: var(--bg-darker);
     border-radius: 8px;
 }

 .book-card__img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     border-radius: 8px;
     transition: transform 0.3s ease;
 }

 .book-card:hover .book-card__img {
     transform: scale(1.05);
     border-radius: 8px;
 }

 /* Рейтинг */
 .book-card__rating {
     position: absolute;
     bottom: 8px;
     right: 8px;
     background: rgba(0, 0, 0, 0.75);
     color: #fff;
     padding: 4px 10px;
     border-radius: 20px;
     font-size: 13px;
     font-weight: var(--ui-fw-bolder);
     z-index: 10;
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .book-card__rating i {
     font-size: 12px;
     color: #fff;
 }


 /* Контент карточки */
 .book-card__content {
     padding: 12px;
     display: flex;
     flex-direction: column;
     gap: 6px;
 }

 .book-card__title {
     margin: 0;
 }

 .book-card__title h3 {
     font-size: 15px;
     line-height: 1.3;
     margin: 0;
     color: var(--tt);
     font-weight: var(--ui-fw-medium);
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .book-card__meta {
     display: flex;
     flex-direction: column;
     gap: 4px;
 }

 .book-card__author,
 .book-card__readers {
     font-size: 12px;
     color: var(--tt-fade);
 }

 .book-card__author a,
 .book-card__author span a {
     color: var(--tt-fade);
     text-decoration: none;
     transition: color 0.2s;
     display: inline;
 }

 .book-card__author a:hover,
 .book-card__author span a:hover {
     color: var(--accent);
 }

 .book-card__author .book-card__link {
     display: inline;
     flex-direction: row;
 }

 .book-card__readers span {
     color: var(--tt-fade);
 }

 /* FOOTER
----------------------------------------------- */
 #footer {
     border-top: 1px solid var(--bdc);
     margin-top: 60px;
     padding: 40px 0 20px;
 }

 .footer__inner {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 40px;
     margin-bottom: 20px;
 }

 .footer__age-restriction {
     display: flex;
     align-items: center;
     gap: 15px;
     flex-shrink: 0;
 }

 .footer__age-icon {
     width: 40px;
     height: 40px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     font-weight: var(--ui-fw-bolder);
     background: var(--tt);
     color: var(--bg-content);
 }

 [data-theme="dark"] .footer__age-icon {
     background: var(--tt-fade-0);
     color: var(--tt);
 }

 .footer__age-text {
     font-size: 13px;
     color: var(--tt-fade);
 }

 .footer__links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     gap: 20px;
     flex: 1;
     max-width: 50%;
 }

 .footer__links-col {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .footer__link {
     font-size: 14px;
     color: var(--tt-fade);
     text-decoration: none;
     transition: color 0.2s;
 }

 .footer__link:hover {
     color: var(--accent);
 }

 .footer__bottom {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
 }

 .footer__copyright p {
     margin: 0;
     font-size: 14px;
     color: var(--tt-fade);
 }

 .footer__counter {
     text-align: right;
 }

 /* SCROLL TO TOP
----------------------------------------------- */
 .scroll-to-top {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 45px;
     height: 45px;
     border-radius: 50%;
     background: var(--accent);
     color: #fff;
     cursor: pointer;
     display: none;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     z-index: 1000;
     box-shadow: var(--bsh);
     transition: all 0.3s ease;
     border: none;
 }

 .scroll-to-top.show {
     display: flex;
     opacity: 1;
     transform: translateY(0);
 }

 .scroll-to-top:hover {
     background: var(--accent-2);
     transform: translateY(-3px);
     box-shadow: var(--bsh-popover);
 }

 /* SEO TEXT
----------------------------------------------- */
 .sect h1:not(.sect__title) {
     font-size: 28px;
     font-weight: var(--ui-fw-bolder);
     color: var(--tt);
     margin: 0 0 20px 0;
     line-height: 1.3;
 }

 .sect p {
     font-size: 15px;
     color: var(--tt);
     line-height: 1.6;
     margin: 0 0 15px 0;
 }

 .sect p:last-child {
     margin-bottom: 0;
 }

 /* CATEGORY/FAVORITES HEADER
----------------------------------------------- */
 .sect__header {
     margin-bottom: 30px;
 }

 .sect__header-info {
     display: flex;
     align-items: center;
     gap: 5px;
     flex-wrap: wrap;
 }

 .sect__header-actions {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 5px;
     flex-wrap: wrap;
     margin-left: auto;
 }

 @media screen and (max-width: 760px) {
     .sect__header-actions {
         width: 100%;
         margin-left: 0;
         margin-top: 10px;
     }
 }

 .sect__title {
     font-size: 28px;
     font-weight: var(--ui-fw-bolder);
     color: var(--tt);
     margin: 0;
     line-height: 1.3;
 }

 .sect__descr {
     font-size: 14px;
     color: var(--tt-fade);
     margin: 0;
     line-height: 1.6;
     white-space: nowrap;
 }

 .sect__btn {
     padding: 10px;
     background: var(--bg-darker);
     border: 1px solid var(--bdc);
     border-radius: 8px;
     color: var(--tt);
     font-size: 14px;
     font-weight: var(--ui-fw-medium);
     cursor: pointer;
     transition: all 0.2s;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: inherit;
 }

 .sect__btn:hover {
     background: var(--accent);
     border-color: var(--accent);
     color: #fff;
 }

 .sect__btn .fas {
     font-size: 16px;
 }

 .btn-nobg {
     font-size: 17px;
 }

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

 /* SORTER
----------------------------------------------- */
 .sorter {
     position: relative;
     cursor: pointer;
     height: 40px;
     display: flex;
     align-items: center;
     gap: 10px;
     min-width: 162px;
 }

 .sorter form {
     display: none;
     background-color: var(--bg);
     border: 1px solid var(--bdc);
     padding: 0px;
     box-shadow: var(--bsh);
     position: absolute;
     right: 0;
     top: 100%;
     width: 100%;
     z-index: 99;
     border-radius: 10px;
     margin-top: 5px;
 }

 .sorter .sort {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .sorter a {
     display: block;
     border-bottom: 1px solid var(--bdc);
     padding: 6px 10px;
     color: var(--tt);
     text-decoration: none;
     transition: all 0.2s;
 }

 .sorter a:hover {
     background-color: var(--bg-darker);
     color: var(--accent);
 }

 .sorter .sort li:last-child a {
     border-bottom: none;
 }

 .sort li.asc a,
 .sort li.desc a {
     background-color: var(--bg-darker);
     color: var(--accent);
     font-weight: var(--ui-fw-medium);
 }

 .sort li.asc a::after,
 .sort li.desc a::after {
     content: "\f063";
     font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'FontAwesome';
     font-weight: 900;
     font-style: normal;
     font-variant: normal;
     text-rendering: auto;
     display: inline-block;
     margin-left: 10px;
 }

 .sort li.desc a::after {
     content: "\f062";
 }

 /* PAGINATION
----------------------------------------------- */
 .pagination {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     margin-top: 40px;
     margin-bottom: 40px;
     gap: 20px;
 }

 /* Номера страниц (слева) */
 .pagination__pages {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
 }

 .pagination__pages a,
 .pagination__pages span {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: var(--bg);
     border: 1px solid var(--bdc);
     color: var(--tt);
     text-decoration: none;
     font-size: 14px;
     font-weight: var(--ui-fw-medium);
     transition: all 0.2s;
 }

 .pagination__pages a:hover {
     background: var(--accent);
     border-color: var(--accent);
     color: #fff;
     transform: scale(1.05);
 }

 .pagination__pages span {
     background: var(--accent);
     border-color: var(--accent);
     color: #fff;
     cursor: default;
 }

 /* Кнопки навигации (справа) */
 .pagination__nav {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .pagination__nav a,
 .pagination__nav span {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: var(--bg);
     border: 1px solid var(--bdc);
     color: var(--tt);
     text-decoration: none;
     transition: all 0.2s;
     cursor: pointer;
 }

 .pagination__nav a:hover {
     background: var(--accent);
     border-color: var(--accent);
     color: #fff;
     transform: scale(1.05);
 }

 .pagination__nav span {
     opacity: 0.5;
     cursor: default;
 }

 .pagination__btn {
     font-size: 14px;
 }

 /* Кнопка "Загрузить еще" (внизу по центру) */
 .pagination__btn-loader {
     flex-basis: 100%;
     width: 100%;
     display: flex;
     justify-content: center;
     margin-top: 0;
 }

 .pagination__btn-loader a {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 24px;
     border-radius: 8px;
     background: var(--bg);
     border: 1px solid var(--bdc);
     color: var(--tt);
     text-decoration: none;
     font-size: 14px;
     font-weight: var(--ui-fw-medium);
     transition: all 0.2s;
 }

 .pagination__btn-loader a:hover {
     background: var(--accent);
     border-color: var(--accent);
     color: #fff;
 }

 .pagination__btn-loader a.loading {
     cursor: wait;
     opacity: 0.7;
 }

 .pagination__btn-loader a span {
     font-size: 14px;
 }

 .pagination__btn-loader a span:not(.fas) {
     color: #ff9800;
 }

 /* FULL STORY PAGE
----------------------------------------------- */
 .page {
     margin-bottom: 40px;
 }

 /* Book Header with Blur Background */
 .book-header {
     position: relative;
     margin-bottom: 40px;
 }

 .book-header__bg {
     position: absolute;
     top: 0;
     left: 50%;
     width: 100vw;
     height: 100%;
     min-height: 160px;
     margin-left: -50vw;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     filter: blur(20px);
     transform: scale(1.3);
     opacity: 0.2;
     z-index: 0;
 }

 .book-header__wrapper {
     position: relative;
     z-index: 2;
     display: grid;
     grid-template-columns: 200px 1fr 250px;
     gap: 30px;
     align-items: start;
 }

 .book-header__left {
     position: sticky;
     top: 90px;
     z-index: 4;
 }

 .book-header__cover {
     width: 200px;
     height: 300px;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
     background: var(--bg-darker);
     position: relative;
 }

 .book-header__age {
     position: absolute;
     top: 8px;
     right: 8px;
     background: var(--accent);
     color: #fff;
     font-size: 12px;
     font-weight: 600;
     padding: 4px 8px;
     border-radius: 4px;
     z-index: 2;
 }

 .book-header__center {
     display: flex;
     flex-direction: column;
     padding: 30px 30px 0 0;
 }

 /* Book Header Right - Author Books */
 .book-header__right {
     position: sticky;
     top: 90px;
     z-index: 4;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .book-header__right .book-card__cover {
     aspect-ratio: 2 / 3;
     height: auto;
 }

 .book-header__right .book-card__img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* Author Book Card */
 .author-book-card {
     display: grid;
     grid-template-columns: 70px 1fr;
     gap: 15px;
     align-items: flex-start;
 }

 .author-book-card__cover {
     width: 70px;
     height: 100px;
     border-radius: 8px;
     overflow: hidden;
     text-decoration: none;
     display: block;
     transition: opacity 0.2s;
 }

 .author-book-card__cover:hover {
     opacity: 0.8;
 }

 .author-book-card__cover img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .author-book-card__content {
     display: flex;
     flex-direction: column;
     gap: 8px;
     min-width: 0;
 }

 .author-book-card__title {
     margin: 0;
     font-size: 15px;
     line-height: 1.4;
     color: var(--tt);
     font-weight: var(--ui-fw-bolder);
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     text-decoration: none;
     transition: color 0.2s;
 }

 .author-book-card__title:hover {
     color: var(--accent);
 }

 .author-book-card__meta {
     display: flex;
     flex-direction: column;
     gap: 6px;
 }

 .author-book-card__item {
     font-size: 14px;
     display: flex;
     align-items: center;
     gap: 8px;
     color: var(--tt-fade);
 }

 .author-book-card__item i {
     font-size: 14px;
     color: var(--tt-fade);
     flex-shrink: 0;
 }

 .author-book-card__item span {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .author-book-card__item span a {
     color: var(--tt-fade);
     text-decoration: none;
     transition: color 0.2s;
 }

 .author-book-card__item span a:hover {
     color: var(--accent);
 }

 .author-book-card__item .fa-star {
     color: #ffc107;
 }

 .book-header__right-title {
     font-size: 18px;
     font-weight: var(--ui-fw-bolder);
     color: var(--tt);
     margin: 0;
 }

 .book-header__right-list {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .book-header__right .author-book-card {
     width: 100%;
 }

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


 .book-header__title {
     position: relative;
     z-index: 2;
     font-size: 30px;
     font-weight: var(--ui-fw-bolder);
     color: var(--tt);
     margin: 0 0 20px 0;
     line-height: 1.4;
 }

 .book-header__title .fas.fa-pencil {
     font-size: 16px;
     color: var(--tt-fade);
     margin-left: 8px;
 }

 .book-header__center ul {
     list-style: none;
     padding: 0;
     margin: 0 0 20px 0;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .book-header__center li {
     font-size: 16px;
     font-weight: var(--ui-fw-medium);
     color: var(--tt);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .book-header__center li span {
     font-size: 16px;
     color: var(--tt-fade);
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .book-header__center li a {
     color: var(--accent);
     text-decoration: none;
     transition: color 0.2s;
     font-weight: var(--ui-fw-normal);
 }

 .book-header__center li a:hover {
     color: var(--tt-fade);
 }

 .book-header__bottom {
     position: relative;
     padding: 20px 0 0 0;
     display: flex;
     flex-direction: column;
     gap: 15px;
     width: 100%;
 }


 .book-header__tags {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
 }

 .book-header__tag {
     display: inline-flex;
     align-items: center;
     padding: 6px 12px;
     border-radius: 20px;
     font-size: 13px;
     font-weight: var(--ui-fw-medium);
     color: #fff;
     transition: opacity 0.2s;
 }

 .book-header__tag:hover {
     opacity: 0.9;
 }

 .book-header__tag--new {
     background: var(--green);
 }

 .book-header__tag--hit {
     background: var(--accent);
 }

 .book-header__rating {
     display: flex;
     align-items: center;
     gap: 15px;
     flex-wrap: wrap;
 }

 .book-header__rating-stars {
     display: flex;
     align-items: center;
     gap: 5px;
     color: var(--tt);
     font-size: 14px;
     font-weight: var(--ui-fw-medium);
 }


 .book-header__info-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 20px;
     margin-bottom: 20px;
 }

 .book-header__meta {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 20px;
     font-size: 13px;
     color: var(--tt-fade);
 }

 .book-header__meta-item {
     display: flex;
     align-items: center;
     gap: 6px;
     font-weight: var(--ui-fw-normal);
     color: var(--tt-fade);
 }

 .book-header__meta-item .fas,
 .book-header__meta-item .fal {
     font-size: 14px;
     color: var(--tt-fade);
 }


 /* Полный текст */
 .full-text {
     text-align: left;
     font-size: 16px;
     line-height: 1.7;
     color: var(--tt);
 }

 .full-text p {
     margin: 0 0 15px 0;
 }

 .full-text p:last-child {
     margin-bottom: 0;
 }

 .full-text img {
     max-width: 100%;
     height: auto;
     border-radius: 8px;
     margin: 20px 0;
 }

 .full-text a {
     color: var(--accent);
     text-decoration: none;
     transition: color 0.2s;
 }

 .full-text a:hover {
     color: var(--accent-2);
     text-decoration: underline;
 }

 /* Теги */
 .tags {
     font-size: 0;
 }

 .tags a {
     display: inline-flex;
     align-items: center;
     padding: 6px 12px;
     border-radius: 20px;
     background: var(--bg-darker);
     border: 1px solid var(--bdc);
     color: var(--tt);
     text-decoration: none;
     font-size: 13px;
     transition: all 0.2s;
     margin: 5px 0;
     margin-right: 5px;
 }

 .tags a:hover {
     background: var(--accent);
     border-color: var(--accent);
     color: #fff;
 }

 /* Связанные новости */
 .gtr__related {
     margin-top: 40px;
 }

 .grid-items {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
     gap: 20px;
 }

 /* Комментарии */
 .page__comments {
     margin-top: 40px;
     padding-top: 40px;
     border-top: 1px solid var(--bdc);
 }

 .page__comments-info {
     margin-top: 15px;
     padding: 12px 15px;
     background: var(--bg-darker);
     border-left: 3px solid var(--accent);
     border-radius: 4px;
     font-size: 13px;
     color: var(--tt-fade);
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .page__comments-info .fal {
     font-size: 16px;
     color: var(--accent);
 }

 .page__ac {
     margin-top: 20px;
 }

 .page__comments-list {
     margin-top: 30px;
 }

 .page__comments-list--not-comments {
     padding: 20px;
     text-align: center;
 }

 /* TITLE STYLES */
 h1.title,
 .h2.title {
     color: var(--tt);
 }

 /* AUTHORS PAGE */
 .a-area {
     margin-top: 20px;
 }

 .a-search {
     width: 100%;
     height: 40px;
     padding: 0 15px;
     margin: 0 0 20px 0;
     border: 1px solid var(--bdc);
     border-radius: 20px;
     background-color: var(--bg-darker);
     color: var(--tt);
     font-size: 14px;
     font-family: inherit;
     transition: all 0.2s;
     box-sizing: border-box;
 }

 .a-search:focus {
     outline: none;
     border-color: var(--accent);
     background-color: var(--bg);
 }

 .a-search::placeholder {
     color: var(--tt-fade);
 }

 .alfabet {
     list-style: none;
     display: flex;
     flex-wrap: wrap;
     padding: 0;
     margin: 0 0 15px 0;
     gap: 5px;
 }

 .alfabet li {
     margin: 0;
 }

 .alfabet li a {
     display: flex;
     align-items: center;
     justify-content: center;
     min-width: 20px;
     height: 25px;
     padding: 0 5px;
     color: var(--accent);
     text-decoration: none;
     font-size: 13px;
     font-weight: var(--ui-fw-medium);
     transition: all 0.2s;
 }

 .alfabet li a:hover,
 .alfabet li a.active {
     background: var(--accent);
     color: #fff;
     text-decoration: none;
 }


 .a-nav {
     list-style: none;
     padding: 0;
     margin: 40px 0;
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
     justify-content: center;
 }

 .a-nav li {
     margin: 0;
 }

 .a-nav li a,
 .a-nav li span {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: var(--bg);
     border: 1px solid var(--bdc);
     color: var(--tt);
     text-decoration: none;
     font-size: 14px;
     font-weight: var(--ui-fw-medium);
     transition: all 0.2s;
 }

 .a-nav li.active span {
     background: var(--accent);
     border-color: var(--accent);
     color: #fff;
     cursor: default;
 }

 .a-nav li a:hover {
     background: var(--accent);
     border-color: var(--accent);
     color: #fff;
     transform: scale(1.05);
 }