* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    color: #222;
    background: #f5f5f5;
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

.container {
    width: min(100% - 32px, 1200px);
    margin-inline: auto;
}

.header {
    color: #fff;
    background: #222;
}

.header-top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.header-top {
    padding: 16px 0;
}

.logo {
    color: inherit;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.support-link,
.icon-link,
.navigation a {
    color: inherit;
    text-decoration: none;
}

.support-link:hover,
.support-link:focus-visible,
.navigation a:hover,
.navigation a:focus-visible {
    text-decoration: underline;
}

.icon-link {
    position: relative;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 50%;
}

.icon-link:hover,
.icon-link:focus-visible,
.user-menu__button:hover,
.user-menu__button:focus-visible {
    background: #3a3a3a;
}

.icon-link svg {
    width: 24px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    display: grid;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: #e44d4d;
    font-size: 11px;
    font-weight: 700;
}

.dropdown {
    position: relative;
}

.user-menu__button,
.menu-button,
.mobile-menu-toggle {
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.user-menu__button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 10px 5px 5px;
    border-radius: 24px;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.chevron {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: transform 0.2s ease;
}

.is-open > .dropdown-toggle .chevron {
    transform: rotate(180deg);
}

.header-nav {
    border-top: 1px solid #404040;
    background: #2b2b2b;
}

.menu,
.submenu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu {
    display: flex;
    align-items: stretch;
}

.menu > li > a,
.menu > li > .menu-button {
    display: flex;
    min-height: 54px;
    align-items: center;
    gap: 7px;
    padding: 0 18px;
    font-weight: 600;
}

.menu > li > a:hover,
.menu > li > a:focus-visible,
.menu > li > .menu-button:hover,
.menu > li > .menu-button:focus-visible,
.menu > .is-open > .menu-button {
    outline: none;
    background: #414141;
    text-decoration: none;
}

.submenu {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    display: none;
    width: max-content;
    min-width: 220px;
    max-width: 320px;
    padding: 7px;
    border: 1px solid #dedede;
    border-radius: 8px;
    color: #222;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.is-open > .submenu {
    display: block;
}

.submenu .submenu {
    top: -8px;
    left: calc(100% + 8px);
}

.submenu li > a,
.submenu li > .menu-button {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 11px;
    border-radius: 5px;
    color: inherit;
    text-align: left;
    text-decoration: none;
}

.submenu li > a:hover,
.submenu li > a:focus-visible,
.submenu li > .menu-button:hover,
.submenu li > .menu-button:focus-visible,
.submenu .is-open > .menu-button {
    outline: none;
    background: #f0f0f0;
    text-decoration: none;
}

.submenu .dropdown > .menu-button .chevron {
    transform: rotate(-90deg);
}

.submenu .dropdown.is-open > .menu-button .chevron {
    transform: rotate(90deg);
}

.user-submenu {
    right: 0;
    left: auto;
    min-width: 180px;
}

.mobile-menu-toggle {
    display: none;
    min-height: 52px;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.burger,
.burger::before,
.burger::after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
}

.burger {
    position: relative;
}

.burger::before,
.burger::after {
    position: absolute;
    left: 0;
    content: "";
}

.burger::before {
    top: -7px;
}

.burger::after {
    top: 7px;
}

.news-slider-section {
    padding-top: 32px;
}

.news-slider {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #222;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

.news-slider:focus-visible {
    outline: 3px solid rgba(228, 77, 77, 0.55);
    outline-offset: 3px;
}

.news-slider__viewport {
    position: relative;
    min-height: 380px;
}

.news-slide {
    position: absolute;
    inset: 0;
    display: flex;
    visibility: hidden;
    align-items: flex-end;
    opacity: 0;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

.news-slide.is-active {
    visibility: visible;
    opacity: 1;
}

.news-slide > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

.news-slide:nth-child(2) > img {
    object-position: center 39%;
}

.news-slide--graphic {
    background:
        radial-gradient(circle at 72% 35%, rgba(228, 77, 77, 0.72), transparent 26%),
        radial-gradient(circle at 20% 15%, rgba(68, 137, 218, 0.75), transparent 30%),
        linear-gradient(125deg, #131927, #38233c 58%, #17171c);
}

.news-slide--graphic::before {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 32px 32px;
    content: "";
}

.news-slide__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(9, 9, 12, 0.9) 0%, rgba(9, 9, 12, 0.62) 50%, rgba(9, 9, 12, 0.12) 100%);
}

.news-slide__content {
    position: relative;
    z-index: 1;
    width: min(720px, calc(100% - 150px));
    padding: 42px 64px;
    color: #fff;
}

.news-slide__category {
    display: inline-block;
    margin-right: 10px;
    padding: 5px 9px;
    border-radius: 4px;
    background: #e44d4d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.news-slide time {
    color: #dedede;
    font-size: 13px;
}

.news-slide h2 {
    margin: 15px 0 8px;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.12;
}

.news-slide h2 a {
    color: inherit;
    text-decoration: none;
}

.news-slide h2 a:hover,
.news-slide h2 a:focus-visible {
    text-decoration: underline;
}

.news-slide p {
    max-width: 620px;
    margin: 0;
    color: #e8e8e8;
    font-size: 16px;
}

.slider-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    place-items: center;
    color: #fff;
    background: rgba(15, 15, 15, 0.55);
    cursor: pointer;
    transform: translateY(-50%);
}

.slider-arrow:hover,
.slider-arrow:focus-visible {
    background: #e44d4d;
    outline: none;
}

.slider-arrow--prev {
    left: 16px;
}

.slider-arrow--next {
    right: 16px;
}

.slider-arrow svg {
    width: 24px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.slider-dots {
    position: absolute;
    z-index: 3;
    right: 24px;
    bottom: 20px;
    display: flex;
    gap: 8px;
}

.slider-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.slider-dots button.is-active {
    background: #fff;
}

.page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    flex: 1;
    gap: 24px;
    padding-block: 32px;
}

.main-content {
    padding: 24px;
    border-radius: 8px;
    background: #fff;
}

.footer p {
    margin-top: 0;
}

.content-heading {
    margin-bottom: 24px;
}

.content-heading h1 {
    margin: 0 0 5px;
    font-size: 30px;
    line-height: 1.2;
}

.content-heading p {
    margin: 0;
    color: #707070;
}

.article-list {
    display: grid;
    gap: 24px;
}

.preview-section-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
}

.posts-container--classic-list {
    display: grid;
    gap: 24px;
}

.laravel-pagination {
    display: block;
    margin: 8px 0 0;
    padding-top: 24px;
    border-top: 1px solid #ededed;
}

.laravel-pagination nav {
    display: flex;
    justify-content: center;
}

.laravel-pagination nav > .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.laravel-pagination .page-link {
    display: grid;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #dedede;
    border-radius: 6px;
    place-items: center;
    color: #555;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.laravel-pagination a.page-link:hover,
.laravel-pagination a.page-link:focus-visible,
.laravel-pagination .page-item.active .page-link {
    border-color: #e44d4d;
    color: #fff;
    background: #e44d4d;
    outline: none;
}

.laravel-pagination .page-item.disabled .page-link {
    color: #aaa;
    background: #f3f3f3;
}

.article-card {
    display: grid;
    overflow: hidden;
    grid-template-columns: minmax(210px, 34%) minmax(0, 1fr);
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.article-card:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.article-card__image {
    display: block;
    min-height: 245px;
    overflow: hidden;
    background: #ddd;
}

.article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.article-card:hover .article-card__image img {
    transform: scale(1.035);
}

.article-card__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 22px;
}

.article-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    color: #777;
    font-size: 13px;
}

.article-card__meta a {
    padding: 3px 8px;
    border-radius: 4px;
    color: #fff;
    background: #e44d4d;
    font-weight: 700;
    text-decoration: none;
}

.article-card h2 {
    margin: 12px 0 9px;
    font-size: 23px;
    line-height: 1.25;
}

.article-card h2 a {
    color: #252525;
    text-decoration: none;
}

.article-card h2 a:hover,
.article-card h2 a:focus-visible {
    color: #c83d3d;
}

.article-card__body > p {
    margin: 0 0 18px;
    color: #606060;
    font-size: 15px;
}

.article-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 17px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #ededed;
    color: #777;
    font-size: 13px;
}

.article-card__footer time,
.article-card__footer span,
.article-card__footer a,
.article-card__favorite {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.article-card__footer a {
    color: inherit;
    text-decoration: none;
}

.article-card__footer a:hover,
.article-card__footer a:focus-visible {
    color: #c83d3d;
}

.article-card__favorite {
    width: 34px;
    height: 34px;
    margin: -7px 0 -7px auto;
    padding: 0;
    border: 1px solid #dedede;
    border-radius: 50%;
    justify-content: center;
    color: #777;
    background: #fff;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.article-card__favorite:hover,
.article-card__favorite:focus-visible {
    border-color: #e44d4d;
    color: #e44d4d;
    outline: none;
}

.article-card__favorite.is-favorite {
    border-color: #e44d4d;
    color: #fff;
    background: #e44d4d;
}

.article-card__favorite.is-favorite svg {
    fill: currentColor;
}

.article-card__footer svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.sidebar {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 20px;
}

.widget {
    padding: 20px;
    border-radius: 8px;
    background: #fff;
}

.widget-title {
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e44d4d;
    font-size: 20px;
    line-height: 1.25;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.search-form {
    display: flex;
}

.search-form input,
.subscribe-form input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    color: #222;
    background: #fff;
    font: inherit;
}

.search-form input {
    border-radius: 6px 0 0 6px;
}

.search-form input:focus,
.subscribe-form input:focus {
    border-color: #e44d4d;
    outline: 2px solid rgba(228, 77, 77, 0.18);
}

.search-form button {
    display: grid;
    width: 46px;
    flex: 0 0 46px;
    border: 0;
    border-radius: 0 6px 6px 0;
    place-items: center;
    color: #fff;
    background: #e44d4d;
    cursor: pointer;
}

.search-form button:hover,
.search-form button:focus-visible,
.subscribe-form button:hover,
.subscribe-form button:focus-visible {
    background: #c83d3d;
}

.search-form svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

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

.widget-list li + li {
    border-top: 1px solid #ededed;
}

.widget-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    color: #333;
    text-decoration: none;
}

.widget-list li:first-child a {
    padding-top: 0;
}

.widget-list li:last-child a {
    padding-bottom: 0;
}

.widget-list a:hover,
.widget-list a:focus-visible {
    color: #c83d3d;
}

.widget-list span {
    display: grid;
    min-width: 25px;
    height: 25px;
    padding: 0 6px;
    border-radius: 13px;
    place-items: center;
    color: #666;
    background: #f1f1f1;
    font-size: 12px;
}

.subscribe-widget {
    color: #fff;
    background: #333;
}

.subscribe-widget .widget-title {
    border-color: #e96a6a;
}

.subscribe-widget p {
    margin: -3px 0 14px;
    color: #d8d8d8;
    font-size: 14px;
}

.subscribe-form {
    display: grid;
    gap: 10px;
}

.subscribe-form button {
    min-height: 44px;
    padding: 0 15px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: #e44d4d;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-cloud a {
    padding: 6px 10px;
    border-radius: 4px;
    color: #444;
    background: #f0f0f0;
    font-size: 13px;
    text-decoration: none;
}

.tag-cloud a:hover,
.tag-cloud a:focus-visible {
    color: #fff;
    background: #e44d4d;
}

.single-page-layout {
    padding-top: 32px;
}

.single-content {
    overflow: hidden;
    padding: 0;
}

.article-breadcrumbs {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    padding: 17px 44px;
    border-bottom: 1px solid #e8e8e8;
    color: #858585;
    background: #fff;
    font-size: 12px;
    white-space: nowrap;
}

.article-breadcrumbs a {
    color: #c83d3d;
    text-decoration: none;
}

.article-breadcrumbs a:hover,
.article-breadcrumbs a:focus-visible {
    text-decoration: underline;
}

.article-breadcrumbs span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-breadcrumbs svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    fill: none;
    stroke: #aaa;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.single-article__hero {
    position: relative;
    display: flex;
    min-height: 520px;
    align-items: flex-end;
    overflow: hidden;
}

.single-article__hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.single-article__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(8, 8, 10, 0.92) 0%, rgba(8, 8, 10, 0.48) 48%, rgba(8, 8, 10, 0.08) 100%);
}

.single-article__heading {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 44px 270px 44px 44px;
    color: #fff;
}

.single-article__category {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    color: #fff;
    background: #e44d4d;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.single-article__heading h1 {
    max-width: 720px;
    margin: 14px 0 16px;
    font-size: clamp(36px, 6vw, 58px);
    line-height: 1.08;
}

.single-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    color: #e4e4e4;
    font-size: 13px;
}

.single-article__meta span,
.single-article__meta time,
.single-article__meta a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.single-article__meta a {
    color: inherit;
    text-decoration: none;
}

.single-article__meta a:hover,
.single-article__meta a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.single-article__meta svg,
.single-article__favorite svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.single-article__favorite {
    position: absolute;
    z-index: 2;
    top: 22px;
    right: 22px;
    width: 44px;
    height: 44px;
    margin: 0;
    border-color: rgba(255, 255, 255, 0.65);
    color: #fff;
    background: rgba(20, 20, 20, 0.55);
}

.article-rating {
    position: absolute;
    right: 44px;
    bottom: 42px;
    min-width: 190px;
    padding: 0;
    border: 0;
    background: transparent;
}

.article-rating__summary {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 5px;
    color: #d8d8d8;
    font-size: 12px;
}

.article-rating__summary strong {
    color: #fff;
    font-size: 15px;
}

.article-rating__summary small {
    margin-left: 2px;
    color: #bfbfbf;
    font-size: 10px;
}

.article-rating__stars {
    display: flex;
    gap: 2px;
}

.article-rating__stars button {
    display: grid;
    width: 29px;
    height: 29px;
    padding: 3px;
    border: 0;
    place-items: center;
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
    cursor: pointer;
}

.article-rating__stars button:hover,
.article-rating__stars button:focus-visible,
.article-rating__stars button.is-selected {
    color: #ffd166;
    outline: none;
}

.article-rating__stars svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-width: 1.2;
}

.single-article__body {
    padding: 42px 44px 52px;
    color: #3e3e3e;
    font-size: 17px;
    line-height: 1.75;
}

.single-article__body h2,
.single-article__body h3 {
    color: #222;
    line-height: 1.25;
}

.single-article__body h2 {
    margin: 0 0 20px;
    font-size: 32px;
}

.single-article__body h3 {
    margin: 34px 0 14px;
    font-size: 24px;
}

.single-article__body p {
    margin: 0 0 20px;
}

.article-lead {
    padding-bottom: 24px;
    border-bottom: 1px solid #e8e8e8;
    color: #555;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.6;
}

.article-content {
    overflow-wrap: anywhere;
}

.article-content img,
.article-content video,
.article-content iframe {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.article-content a {
    color: #c83d3d;
}

.article-feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 34px;
    padding: 20px 22px;
    border-radius: 8px;
    background: #f3f3f3;
}

.article-feedback > div:first-child {
    display: grid;
    gap: 3px;
}

.article-feedback strong {
    color: #292929;
    font-size: 16px;
}

.article-feedback span {
    color: #747474;
    font-size: 13px;
}

.article-votes > div {
    display: flex !important;
    gap: 8px !important;
    margin-top: 0 !important;
}

.article-votes .btn {
    min-width: 64px;
    padding: 9px 13px;
    border: 1px solid #d9d9d9;
    border-radius: 18px;
    color: #555;
    background: #fff;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.article-votes .btn:hover,
.article-votes .btn-success,
.article-votes .btn-danger {
    border-color: #e44d4d;
    color: #fff;
    background: #e44d4d;
}

.article-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 28px 0;
    padding: 18px 20px;
    border-left: 5px solid #e87916;
    border-radius: 6px;
    color: #713b0b;
    background: #ffedd5;
}

.article-alert > svg {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    fill: none;
    stroke: #d7660d;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.article-alert strong {
    display: block;
    margin-bottom: 3px;
    color: #8b450c;
    font-size: 16px;
}

.article-alert p {
    margin: 0;
    color: inherit;
    font-size: 14px;
    line-height: 1.55;
}

.article-quote {
    position: relative;
    margin: 32px 0;
    padding: 28px 30px 24px 68px;
    border: 0;
    border-radius: 8px;
    color: #363636;
    background: #f3f3f3;
    font-size: 20px;
    font-style: italic;
    line-height: 1.55;
}

.article-quote::before {
    position: absolute;
    top: 13px;
    left: 22px;
    color: #e44d4d;
    content: "“";
    font-family: Georgia, serif;
    font-size: 70px;
    font-style: normal;
    line-height: 1;
}

.article-quote p {
    margin: 0 0 10px;
}

.article-quote footer {
    color: #777;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
}

.article-tags {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
}

.article-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.article-tags__list a {
    padding: 5px 10px;
    border: 1px solid #dedede;
    border-radius: 15px;
    color: #555;
    background: #f7f7f7;
    font-size: 12px;
    line-height: 1.2;
    text-decoration: none;
}

.article-tags__list a:hover,
.article-tags__list a:focus-visible {
    border-color: #e44d4d;
    color: #fff;
    background: #e44d4d;
    outline: none;
}

.share-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e6e6e6;
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.share-button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.share-button--vk {
    background: #2787f5;
}

.share-button--vk span {
    font-size: 17px;
    font-weight: 900;
}

.share-button--zen {
    background: #181818;
}

.share-button--telegram {
    background: #229ed9;
}

.share-button--zen svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.share-button--telegram svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.share-button:hover,
.share-button:focus-visible {
    filter: brightness(0.88);
    outline: none;
}

.related-posts,
.comments-section {
    padding: 42px 44px;
    border-top: 1px solid #e5e5e5;
}

.section-heading {
    margin-bottom: 22px;
}

.section-heading > span {
    color: #e44d4d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.section-heading h2 {
    margin: 3px 0 0;
    color: #222;
    font-size: 28px;
    line-height: 1.2;
}

.section-heading h2 small {
    color: #777;
    font-size: 16px;
}

.related-posts__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.related-card {
    overflow: hidden;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
}

.related-card__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #ddd;
}

.related-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-card:hover .related-card__image img {
    transform: scale(1.04);
}

.related-card__body {
    padding: 14px;
}

.related-card__body > span {
    color: #e44d4d;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.related-card h3 {
    margin: 6px 0 12px;
    font-size: 16px;
    line-height: 1.3;
}

.related-card h3 a {
    color: #292929;
    text-decoration: none;
}

.related-card h3 a:hover,
.related-card h3 a:focus-visible {
    color: #c83d3d;
}

.related-card time {
    color: #888;
    font-size: 12px;
}

.author-card {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0 44px 42px;
    padding: 24px;
    border-left: 4px solid #e44d4d;
    border-radius: 6px;
    background: #f4f4f4;
}

.author-card__avatar {
    width: 100px;
    height: 100px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

.author-card__content > span {
    color: #e44d4d;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.author-card h2 {
    margin: 3px 0 7px;
    font-size: 24px;
}

.author-card p {
    margin: 0 0 8px;
    color: #606060;
    font-size: 14px;
}

.author-card a {
    color: #c83d3d;
    font-size: 13px;
    font-weight: 700;
}

.comment-list {
    display: grid;
    gap: 22px;
}

.comment {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.comment > img {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

.comment__body {
    min-width: 0;
    flex: 1;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
}

.comment__body header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 5px 15px;
}

.comment__body time {
    color: #888;
    font-size: 12px;
}

.comment__body p {
    margin: 8px 0;
    color: #555;
    font-size: 14px;
}

.comment__body button {
    padding: 0;
    border: 0;
    color: #c83d3d;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.comment-form {
    display: grid;
    gap: 16px;
    margin-top: 34px;
    padding: 24px;
    border-radius: 8px;
    background: #f4f4f4;
}

.comment-form h3 {
    margin: 0;
    font-size: 22px;
}

.comment-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.comment-form label {
    display: grid;
    gap: 6px;
    color: #444;
    font-size: 13px;
    font-weight: 700;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    color: #222;
    background: #fff;
    font: inherit;
}

.comment-form input {
    height: 44px;
    padding: 0 12px;
}

.comment-form textarea {
    min-height: 130px;
    padding: 10px 12px;
    resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: #e44d4d;
    outline: 2px solid rgba(228, 77, 77, 0.18);
}

.comment-form > button {
    width: fit-content;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: #e44d4d;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.comment-form > button:hover,
.comment-form > button:focus-visible {
    background: #c83d3d;
}

.author-page-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
}

.author-content > .article-list {
    display: block;
}

.profile-sidebar {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 18px;
}

.profile-card,
.profile-social-widget,
.profile-nav {
    border-radius: 8px;
    background: #fff;
}

.profile-card {
    padding: 26px 22px 22px;
    text-align: center;
}

.profile-card__avatar {
    width: 150px;
    height: 150px;
    border: 5px solid #f0f0f0;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.13);
}

.profile-card h1 {
    margin: 15px 0 2px;
    font-size: 26px;
    line-height: 1.2;
}

.profile-card__role {
    margin: 0 0 15px;
    color: #777;
    font-size: 13px;
}

.profile-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 7px;
    margin-bottom: 18px;
}

.profile-rating__stars {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 2px;
}

.profile-rating__stars svg {
    width: 19px;
    height: 19px;
    fill: #f6b91e;
    stroke: #e9a900;
    stroke-linejoin: round;
    stroke-width: 1;
}

.profile-rating strong {
    color: #333;
    font-size: 16px;
}

.profile-rating > span {
    color: #888;
    font-size: 11px;
}

.profile-subscribe {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: #e44d4d;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.profile-subscribe:hover,
.profile-subscribe:focus-visible {
    background: #c83d3d;
}

.profile-subscribe.is-subscribed {
    color: #3f6747;
    background: #e2f3e5;
}

.profile-subscribe svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.profile-subscribe--link {
    text-decoration: none;
}

.profile-social-widget {
    padding: 18px 20px;
}

.profile-social-widget h2 {
    margin: 0 0 13px;
    font-size: 16px;
    line-height: 1.25;
}

.profile-social-widget .author-socials {
    justify-content: flex-start;
}

.profile-nav {
    overflow: hidden;
    padding: 8px;
}

.profile-nav a {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 5px;
    color: #444;
    font-size: 14px;
    text-decoration: none;
}

.profile-nav a:hover,
.profile-nav a:focus-visible,
.profile-nav a.is-active {
    color: #c83d3d;
    background: #f5f0f0;
}

.profile-nav svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.profile-nav strong {
    min-width: 23px;
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 12px;
    color: #777;
    background: #ededed;
    font-size: 11px;
    text-align: center;
}

.author-content__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
}

.author-content__header span {
    color: #e44d4d;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.author-content__header h2 {
    margin: 3px 0 0;
    font-size: 30px;
}

.author-content__header p {
    max-width: 310px;
    margin: 0;
    color: #777;
    font-size: 13px;
    text-align: right;
}

.author-about {
    margin-bottom: 24px;
    padding: 20px;
    border-left: 4px solid #e44d4d;
    border-radius: 6px;
    background: #f5f5f5;
}

.author-about__text {
    margin-bottom: 0;
}

.author-about h2 {
    margin: 0 0 7px;
    font-size: 20px;
}

.author-about p {
    margin: 0;
    color: #555;
    font-size: 14px;
}

.author-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: -8px 0 9px;
    padding: 9px 0;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
}

.author-profile-stats > div {
    padding: 0 10px;
    text-align: center;
}

.author-profile-stats > div + div {
    border-left: 1px solid #dedede;
}

.author-profile-stats dt {
    color: #888;
    font-size: 9px;
    text-transform: uppercase;
}

.author-profile-stats dd {
    margin: 1px 0 0;
    color: #292929;
    font-size: 15px;
    font-weight: 700;
}

.author-socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.author-socials__link {
    display: grid;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    place-items: center;
    color: #fff;
    text-decoration: none;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.author-socials__link:hover,
.author-socials__link:focus-visible {
    filter: brightness(0.88);
    outline: none;
    transform: translateY(-2px);
}

.author-socials__link--vk {
    background: #2787f5;
}

.author-socials__link--vk strong {
    font-size: 12px;
}

.author-socials__link--telegram {
    background: #229ed9;
}

.author-socials__link--zen {
    background: #181818;
}

.author-socials__link svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.2;
}

.author-tabs__nav {
    display: flex;
    overflow-x: auto;
    margin-bottom: 24px;
    border-bottom: 1px solid #dedede;
}

.author-tabs__nav button {
    position: relative;
    display: flex;
    min-height: 48px;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 8px 17px;
    border: 0;
    color: #666;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.author-tabs__nav button::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: transparent;
    content: "";
}

.author-tabs__nav button:hover,
.author-tabs__nav button:focus-visible,
.author-tabs__nav button.is-active {
    color: #c83d3d;
    outline: none;
}

.author-tabs__nav button.is-active::after {
    background: #e44d4d;
}

.author-tabs__nav button span {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 12px;
    color: #777;
    background: #ededed;
    font-size: 10px;
    text-align: center;
}

.author-tab-panel[hidden] {
    display: none;
}

.author-comments-list,
.favorite-collection {
    display: grid;
    gap: 16px;
}

.author-comment {
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.author-comment__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    color: #888;
    font-size: 12px;
}

.author-comment__top span {
    color: #e44d4d;
    font-weight: 700;
}

.author-comment h3 {
    margin: 7px 0 10px;
    font-size: 18px;
}

.author-comment h3 a,
.favorite-item h3 a {
    color: #292929;
    text-decoration: none;
}

.author-comment h3 a:hover,
.author-comment h3 a:focus-visible,
.favorite-item h3 a:hover,
.favorite-item h3 a:focus-visible {
    color: #c83d3d;
}

.author-comment blockquote {
    margin: 0;
    padding: 12px 15px;
    border-left: 3px solid #e44d4d;
    color: #555;
    background: #f5f5f5;
    font-size: 14px;
}

.favorite-item {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
    padding: 14px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.favorite-item__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    background: #ddd;
}

.favorite-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.favorite-item > div {
    align-self: center;
}

.favorite-item > div > span {
    color: #e44d4d;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.favorite-item h3 {
    margin: 5px 0 9px;
    font-size: 19px;
    line-height: 1.3;
}

.favorite-item p {
    margin: 0;
    color: #888;
    font-size: 12px;
}

.footer {
    padding: 20px 0;
    color: #fff;
    background: #222;
}

.footer p {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .header-top__inner {
        gap: 12px;
    }

    .header-actions {
        gap: 7px;
    }

    .support-link,
    .user-name {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .navigation {
        display: none;
        padding-bottom: 12px;
    }

    .navigation.is-open {
        display: block;
    }

    .menu {
        display: block;
    }

    .menu > li > a,
    .menu > li > .menu-button {
        width: 100%;
        min-height: 44px;
        justify-content: space-between;
        padding: 8px 10px;
        border-radius: 5px;
    }

    .submenu,
    .submenu .submenu {
        position: static;
        width: 100%;
        max-width: none;
        margin: 3px 0 6px;
        padding: 4px 4px 4px 14px;
        border: 0;
        border-left: 1px solid #555;
        border-radius: 0;
        color: #fff;
        background: transparent;
        box-shadow: none;
    }

    .submenu li > a:hover,
    .submenu li > a:focus-visible,
    .submenu li > .menu-button:hover,
    .submenu li > .menu-button:focus-visible,
    .submenu .is-open > .menu-button {
        background: #414141;
    }

    .submenu .dropdown > .menu-button .chevron {
        transform: none;
    }

    .submenu .dropdown.is-open > .menu-button .chevron {
        transform: rotate(180deg);
    }

    .news-slider-section {
        padding-top: 18px;
    }

    .news-slider__viewport {
        min-height: 410px;
    }

    .news-slide__overlay {
        background: linear-gradient(0deg, rgba(9, 9, 12, 0.92), rgba(9, 9, 12, 0.18));
    }

    .news-slide__content {
        width: 100%;
        padding: 30px 24px 58px;
    }

    .news-slide h2 {
        font-size: 27px;
    }

    .news-slide p {
        display: none;
    }

    .slider-arrow {
        top: 18px;
        width: 38px;
        height: 38px;
        transform: none;
    }

    .slider-arrow--prev {
        right: 62px;
        left: auto;
    }

    .slider-arrow--next {
        right: 16px;
    }

    .slider-dots {
        right: auto;
        bottom: 24px;
        left: 24px;
    }

    .page-layout {
        grid-template-columns: 1fr;
    }

    .author-page-layout {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        order: 0;
    }

    .author-content {
        order: 1;
    }

    .author-content__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .author-content__header p {
        max-width: none;
        text-align: left;
    }

    .author-profile-stats > div {
        padding-inline: 7px;
    }

    .author-profile-stats dd {
        font-size: 17px;
    }

    .author-tabs__nav button {
        padding-inline: 12px;
    }

    .favorite-item {
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 12px;
    }

    .favorite-item h3 {
        font-size: 16px;
    }

    .main-content {
        padding: 18px;
    }

    .article-card {
        grid-template-columns: 1fr;
    }

    .posts-container--classic-list {
        gap: 18px;
    }

    .laravel-pagination {
        margin-top: 4px;
        padding-top: 20px;
    }

    .article-card__image {
        min-height: 220px;
        aspect-ratio: 16 / 9;
    }

    .article-card__body {
        padding: 18px;
    }

    .article-card h2 {
        font-size: 21px;
    }

    .single-page-layout {
        padding-top: 18px;
    }

    .single-content {
        padding: 0;
    }

    .article-breadcrumbs {
        padding: 14px 22px;
    }

    .single-article__hero {
        min-height: 460px;
    }

    .single-article__heading {
        padding: 28px 22px;
    }

    .single-article__heading h1 {
        font-size: 38px;
    }

    .single-article__meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .article-rating {
        position: static;
        width: fit-content;
        margin-top: 18px;
    }

    .single-article__body {
        padding: 30px 22px 38px;
        font-size: 16px;
    }

    .article-lead {
        font-size: 18px;
    }

    .article-feedback {
        align-items: flex-start;
        flex-direction: column;
    }

    .article-alert {
        padding: 15px;
    }

    .article-quote {
        padding: 24px 20px 22px 52px;
        font-size: 18px;
    }

    .article-quote::before {
        left: 14px;
        font-size: 58px;
    }

    .share-block {
        align-items: flex-start;
        flex-direction: column;
    }

    .article-tags {
        align-items: flex-start;
        flex-direction: column;
    }

    .related-posts,
    .comments-section {
        padding: 32px 22px;
    }

    .related-posts__grid {
        grid-template-columns: 1fr;
    }

    .author-card {
        align-items: flex-start;
        flex-direction: column;
        margin: 0 22px 32px;
    }

    .comment-form__row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .news-slide {
        transition: none;
    }
}

/* Forum */
.menu > li > a.is-current { background: #414141; }
.forum-page-heading { padding-top: 26px; }
.breadcrumbs { display: flex; gap: 7px; margin-bottom: 14px; color: #888; font-size: 12px; }
.breadcrumbs a { color: #c83d3d; text-decoration: none; }
.forum-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.forum-title-row h1 { margin: 0 0 3px; font-size: 34px; line-height: 1.2; }
.forum-title-row p { margin: 0; color: #777; }
.forum-new-topic { display: inline-flex; min-height: 42px; align-items: center; padding: 8px 15px; border-radius: 6px; color: #fff; background: #e44d4d; font-size: 14px; font-weight: 700; text-decoration: none; }
.forum-new-topic:hover, .forum-new-topic:focus-visible { background: #c83d3d; }
.forum-page-layout { align-items: start; padding-top: 24px; }
.forum-content { display: grid; min-width: 0; gap: 24px; }
.forum-category { overflow: hidden; border: 1px solid #dedede; border-radius: 8px; background: #fff; }
.forum-category__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 20px; color: #fff; background: #333; }
.forum-category__header div > span { color: #bbb; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.forum-category__header h2 { margin: 1px 0 0; font-size: 21px; line-height: 1.2; }
.forum-category__header > span { color: #ccc; font-size: 12px; }
.forum-row { display: grid; grid-template-columns: 48px minmax(190px, 1fr) 125px 180px; align-items: center; gap: 14px; padding: 18px 20px; }
.forum-row + .forum-row { border-top: 1px solid #e8e8e8; }
.forum-row__icon { display: grid; width: 46px; height: 46px; border-radius: 50%; place-items: center; color: #e44d4d; background: #fbe8e8; }
.forum-row__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.forum-row__main h3 { margin: 0 0 4px; font-size: 17px; }
.forum-row__main h3 a { color: #282828; text-decoration: none; }
.forum-row__main h3 a:hover, .forum-row__main h3 a:focus-visible { color: #c83d3d; }
.forum-row__main > p { margin: 0 0 9px; color: #777; font-size: 12px; }
.forum-subcategories { display: flex; flex-wrap: wrap; gap: 5px; }
.forum-subcategories a { padding: 3px 7px; border-radius: 3px; color: #666; background: #f0f0f0; font-size: 10px; text-decoration: none; }
.forum-subcategories a:hover, .forum-subcategories a:focus-visible { color: #fff; background: #e44d4d; }
.forum-row__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin: 0; text-align: center; }
.forum-row__stats dt { color: #999; font-size: 9px; text-transform: uppercase; }
.forum-row__stats dd { margin: 1px 0 0; color: #444; font-size: 13px; font-weight: 700; }
.forum-row__last { display: flex; min-width: 0; align-items: center; gap: 9px; }
.forum-row__last img { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.forum-row__last div { min-width: 0; }
.forum-row__last a { display: block; overflow: hidden; color: #444; font-size: 12px; font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.forum-row__last span { display: block; margin-top: 2px; color: #999; font-size: 10px; }
.forum-widget-topics ul { margin: 0; padding: 0; list-style: none; }
.forum-widget-topics li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ededed; }
.forum-widget-topics a { display: block; color: #444; font-size: 13px; font-weight: 700; line-height: 1.35; text-decoration: none; }
.forum-widget-topics a:hover, .forum-widget-topics a:focus-visible { color: #c83d3d; }
.forum-widget-topics li span { color: #999; font-size: 10px; }
.forum-statistics dl { display: grid; gap: 9px; margin: 0; }
.forum-statistics dl > div { display: flex; justify-content: space-between; gap: 15px; }
.forum-statistics dt { color: #666; font-size: 13px; }
.forum-statistics dd { margin: 0; font-size: 14px; font-weight: 700; }

@media (max-width: 1100px) and (min-width: 769px) {
    .forum-row { grid-template-columns: 46px minmax(180px, 1fr) 110px; }
    .forum-row__last { display: none; }
}

@media (max-width: 768px) {
    .forum-title-row { align-items: flex-start; flex-direction: column; }
    .forum-title-row h1 { font-size: 29px; }
    .forum-row { grid-template-columns: 42px minmax(0, 1fr); align-items: start; padding: 16px; }
    .forum-row__icon { width: 40px; height: 40px; }
    .forum-row__stats { grid-column: 2; width: 150px; text-align: left; }
    .forum-row__last { grid-column: 2; padding-top: 10px; border-top: 1px dashed #dedede; }
}

/* Forum category */
.child-categories, .topic-section { overflow: hidden; border: 1px solid #dedede; border-radius: 8px; background: #fff; }
.child-categories > header, .topic-section__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 20px; border-bottom: 1px solid #e5e5e5; }
.child-categories > header h2, .topic-section__header h2 { margin: 0; font-size: 21px; }
.child-categories > header > span, .topic-section__header div > span { color: #888; font-size: 11px; }
.child-categories__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.child-category { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 13px; border: 1px solid #e5e5e5; border-radius: 7px; color: #444; text-decoration: none; }
.child-category:hover, .child-category:focus-visible { border-color: #e44d4d; box-shadow: 0 5px 15px rgba(0,0,0,.08); }
.child-category > b { display: grid; width: 42px; height: 42px; grid-row: span 2; border-radius: 50%; place-items: center; color: #e44d4d; background: #fbe8e8; font-size: 11px; }
.child-category span { min-width: 0; }
.child-category strong, .child-category small { display: block; }
.child-category strong { font-size: 14px; }
.child-category small { margin-top: 2px; color: #888; font-size: 10px; }
.child-category em { grid-column: 2; color: #999; font-size: 10px; font-style: normal; }
.topic-filters { display: flex; gap: 5px; }
.topic-filters button { padding: 6px 10px; border: 0; border-radius: 4px; color: #666; background: #eee; font: inherit; font-size: 11px; cursor: pointer; }
.topic-filters button.is-active, .topic-filters button:hover { color: #fff; background: #e44d4d; }
.topic-row { display: grid; grid-template-columns: 40px minmax(210px,1fr) 125px 155px; align-items: center; gap: 14px; padding: 16px 20px; }
.topic-row + .topic-row { border-top: 1px solid #e8e8e8; }
.topic-row--pinned { background: #fffbf1; }
.topic-status { display: grid; width: 38px; height: 38px; border-radius: 50%; place-items: center; color: #c83d3d; background: #fbe8e8; font-size: 15px; font-weight: 800; }
.topic-main h3 { margin: 3px 0; font-size: 15px; }
.topic-main h3 a { color: #292929; text-decoration: none; }
.topic-main h3 a:hover, .topic-main h3 a:focus-visible { color: #c83d3d; }
.topic-main p { margin: 0; color: #999; font-size: 10px; }
.topic-badges { display: flex; gap: 4px; }
.topic-badges span { padding: 2px 5px; border-radius: 3px; color: #fff; background: #e87916; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.topic-badges span.is-closed { background: #777; }
.topic-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; margin: 0; text-align: center; }
.topic-stats dt { color: #999; font-size: 8px; text-transform: uppercase; }
.topic-stats dd { margin: 1px 0 0; font-size: 12px; font-weight: 700; }
.topic-last { display: flex; min-width: 0; align-items: center; gap: 8px; }
.topic-last img { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.topic-last span, .topic-last strong, .topic-last small { display: block; min-width: 0; }
.topic-last strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.topic-last small { color: #999; font-size: 9px; }
.forum-pagination { display: flex; flex-wrap: wrap; gap: 5px; padding: 16px 20px; border-top: 1px solid #e5e5e5; }
.forum-pagination a, .forum-pagination span { display: grid; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 4px; place-items: center; color: #555; background: #eee; font-size: 11px; text-decoration: none; }
.forum-pagination a.is-current, .forum-pagination a:hover { color: #fff; background: #e44d4d; }

@media (max-width: 1100px) and (min-width: 769px) {
    .topic-row { grid-template-columns: 38px minmax(190px,1fr) 110px; }
    .topic-last { display: none; }
    .child-categories__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .child-categories__grid { grid-template-columns: 1fr; }
    .topic-section__header { align-items: flex-start; flex-direction: column; }
    .topic-row { grid-template-columns: 38px minmax(0,1fr); align-items: start; padding: 14px; }
    .topic-stats, .topic-last { grid-column: 2; }
    .topic-stats { width: 140px; text-align: left; }
}

/* Forum theme */
.theme-page { flex: 1; padding-block: 26px 38px; }
.theme-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.theme-heading h1 { margin: 7px 0 5px; font-size: 32px; line-height: 1.2; }
.theme-heading p { margin: 0; color: #888; font-size: 12px; }
.theme-actions { display: flex; gap: 7px; }
.theme-actions button { min-height: 38px; padding: 7px 12px; border: 1px solid #d4d4d4; border-radius: 5px; color: #555; background: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.theme-actions button:hover { border-color: #e44d4d; color: #c83d3d; }
.theme-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.theme-toolbar > span { color: #666; font-size: 12px; font-weight: 700; }
.theme-toolbar .forum-pagination { padding: 0; border: 0; }
.forum-posts { display: grid; gap: 14px; }
.forum-post { display: grid; grid-template-columns: 190px minmax(0,1fr); overflow: hidden; border: 1px solid #dcdcdc; border-radius: 8px; background: #fff; }
.forum-post--author { border-color: #e8c4c4; }
.post-author { padding: 22px 18px; border-right: 1px solid #e5e5e5; background: #f5f5f5; text-align: center; }
.post-author > img { width: 86px; height: 86px; border: 4px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.post-author h2 { margin: 9px 0 1px; font-size: 16px; }
.post-author h2 a { color: #292929; text-decoration: none; }
.post-author > span { display: inline-block; color: #777; font-size: 10px; }
.post-author > span.is-moderator { padding: 2px 6px; border-radius: 3px; color: #fff; background: #e44d4d; }
.post-author dl { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; margin: 15px 0 0; padding-top: 12px; border-top: 1px solid #ddd; }
.post-author dt { color: #999; font-size: 8px; text-transform: uppercase; }
.post-author dd { margin: 1px 0 0; font-size: 11px; font-weight: 700; }
.post-content { display: flex; min-width: 0; flex-direction: column; }
.post-content > header { display: flex; justify-content: space-between; gap: 15px; padding: 10px 17px; border-bottom: 1px solid #ededed; color: #999; background: #fafafa; font-size: 10px; }
.post-content > header a { color: #c83d3d; font-weight: 700; text-decoration: none; }
.post-message { flex: 1; padding: 22px; color: #444; font-size: 14px; line-height: 1.65; }
.post-message p { margin: 0 0 14px; }
.post-message blockquote { margin: 0 0 16px; padding: 12px 15px; border-left: 3px solid #e44d4d; background: #f4f4f4; font-size: 12px; }
.post-message blockquote p { margin: 4px 0 0; }
.post-message pre { overflow-x: auto; margin: 16px 0; padding: 14px; border-radius: 5px; color: #eee; background: #292929; font-size: 12px; line-height: 1.5; }
.post-message code { font-family: Consolas, monospace; }
.post-content > footer { display: flex; justify-content: flex-end; gap: 6px; padding: 9px 15px; border-top: 1px solid #ededed; background: #fafafa; }
.post-content > footer button { padding: 5px 8px; border: 0; border-radius: 4px; color: #666; background: #e9e9e9; font: inherit; font-size: 10px; cursor: pointer; }
.post-content > footer button:hover { color: #fff; background: #e44d4d; }
.theme-reply { margin-top: 22px; padding: 22px; border: 1px solid #dedede; border-radius: 8px; background: #fff; }
.theme-reply h2 { margin: 0 0 15px; font-size: 21px; }
.theme-reply form { display: grid; gap: 10px; }
.reply-tools { display: flex; gap: 4px; }
.reply-tools button { min-width: 34px; height: 30px; border: 1px solid #ddd; border-radius: 4px; background: #f3f3f3; font: inherit; font-size: 11px; cursor: pointer; }
.theme-reply textarea { width: 100%; min-height: 160px; padding: 12px; border: 1px solid #d4d4d4; border-radius: 5px; font: inherit; resize: vertical; }
.theme-reply textarea:focus { border-color: #e44d4d; outline: 2px solid rgba(228,77,77,.18); }
.theme-reply form > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #666; font-size: 12px; }
.theme-reply form > div:last-child > button { min-height: 40px; padding: 7px 15px; border: 0; border-radius: 5px; color: #fff; background: #e44d4d; font: inherit; font-weight: 700; cursor: pointer; }

@media (max-width: 768px) {
    .theme-heading { align-items: flex-start; flex-direction: column; }
    .theme-heading h1 { font-size: 27px; }
    .forum-post { grid-template-columns: 1fr; }
    .post-author { display: grid; grid-template-columns: 58px minmax(0,1fr); column-gap: 12px; padding: 14px; border-right: 0; border-bottom: 1px solid #e5e5e5; text-align: left; }
    .post-author > img { width: 58px; height: 58px; grid-row: span 3; }
    .post-author h2 { margin: 4px 0 0; }
    .post-author dl { display: none; }
    .post-message { padding: 17px; }
    .post-content > footer { flex-wrap: wrap; }
    .theme-reply form > div:last-child { align-items: flex-start; flex-direction: column; }
}

/* Feed */
.feed-heading { padding-top: 26px; }
.feed-heading > span { color: #e44d4d; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.feed-heading h1 { margin: 2px 0 3px; font-size: 34px; }
.feed-heading p { margin: 0; color: #777; }
.feed-page-layout { align-items: start; padding-top: 22px; }
.feed-content { display: grid; min-width: 0; gap: 18px; }
.feed-composer { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 13px; padding: 18px; border-radius: 8px; background: #fff; }
.feed-composer > img, .feed-post__header img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.feed-composer form { min-width: 0; }
.feed-composer textarea { width: 100%; min-height: 82px; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font: inherit; resize: vertical; }
.feed-composer textarea:focus { border-color: #e44d4d; outline: 2px solid rgba(228,77,77,.15); }
.feed-composer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 9px; }
.feed-attachments { display: flex; gap: 5px; }
.feed-attachments button { padding: 6px 8px; border: 0; border-radius: 4px; color: #666; background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
.feed-attachments button:hover { background: #eee; }
.feed-publish { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 5px; color: #fff; background: #e44d4d; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.feed-stream { display: grid; gap: 16px; }
.feed-post { overflow: hidden; border-radius: 8px; background: #fff; }
.feed-post.is-new { border-left: 3px solid #e44d4d; }
.feed-post__header { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 16px 18px 10px; }
.feed-post__header h2 { margin: 0 0 2px; font-size: 15px; }
.feed-post__header h2 a { color: #292929; text-decoration: none; }
.feed-post__header p { margin: 0; color: #999; font-size: 10px; }
.feed-post__header > button { border: 0; color: #888; background: transparent; font-size: 16px; cursor: pointer; }
.feed-post__content { padding: 5px 18px 17px 77px; color: #444; font-size: 14px; line-height: 1.6; }
.feed-post__content > p { margin: 0 0 13px; }
.feed-post__media { display: block; width: 100%; max-height: 380px; border-radius: 7px; object-fit: cover; }
.feed-reply-context { margin-bottom: 12px; padding: 10px 12px; border-left: 3px solid #e44d4d; background: #f5f5f5; }
.feed-reply-context span, .feed-reply-context a { display: block; }
.feed-reply-context span { color: #888; font-size: 9px; }
.feed-reply-context a { color: #333; font-size: 12px; font-weight: 700; text-decoration: none; }
.feed-link-card { display: grid; gap: 2px; padding: 14px; border: 1px solid #ddd; border-radius: 6px; color: #444; text-decoration: none; }
.feed-link-card span { color: #e44d4d; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.feed-link-card small { color: #999; }
.feed-post__actions { display: flex; gap: 5px; padding: 9px 18px 9px 77px; border-top: 1px solid #ededed; }
.feed-post__actions button { padding: 6px 9px; border: 0; border-radius: 4px; color: #666; background: transparent; font: inherit; font-size: 10px; cursor: pointer; }
.feed-post__actions button:hover, .feed-post__actions button.is-active { color: #e44d4d; background: #f8eaea; }
.feed-empty { padding: 30px; border-radius: 8px; color: #777; background: #fff; text-align: center; }
.feed-filters { display: grid; gap: 5px; }
.feed-filters button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 7px 10px; border: 0; border-radius: 5px; color: #555; background: transparent; font: inherit; font-size: 13px; cursor: pointer; }
.feed-filters button:hover, .feed-filters button.is-active { color: #c83d3d; background: #f5eaea; }
.feed-filters strong { min-width: 23px; padding: 2px 5px; border-radius: 10px; color: #777; background: #eee; font-size: 9px; }
.feed-new-only { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; color: #555; font-size: 12px; cursor: pointer; }
.feed-new-only input { accent-color: #e44d4d; }
.feed-sort-select select { width: 100%; height: 40px; padding: 0 10px; border: 1px solid #ddd; border-radius: 5px; background: #fff; font: inherit; font-size: 12px; }
.feed-following > div { display: flex; align-items: center; gap: 9px; }
.feed-following > div + div { margin-top: 9px; }
.feed-following img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.feed-following > div a { color: #444; font-size: 12px; font-weight: 700; text-decoration: none; }
.feed-following__all { display: block; margin-top: 13px; color: #c83d3d; font-size: 11px; font-weight: 700; }

@media (max-width: 768px) {
    .feed-heading h1 { font-size: 29px; }
    .feed-composer { grid-template-columns: 38px minmax(0,1fr); padding: 14px; }
    .feed-composer > img { width: 38px; height: 38px; }
    .feed-attachments span { display: none; }
    .feed-post__content, .feed-post__actions { padding-left: 18px; }
    .feed-post__actions { flex-wrap: wrap; }
    .feed-post__actions button span { display: none; }
}

/* Media */
.media-page-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); flex: 1; gap: 28px; padding-block: 28px 40px; }
.media-sidebar { display: flex; min-width: 0; flex-direction: column; gap: 18px; }
.media-nav, .channel-widget { padding: 10px; border-radius: 8px; background: #fff; }
.media-nav { display: grid; gap: 3px; }
.media-nav a { display: flex; min-height: 42px; align-items: center; gap: 11px; padding: 8px 11px; border-radius: 5px; color: #444; font-size: 13px; font-weight: 700; text-decoration: none; }
.media-nav a:hover, .media-nav a.is-active { color: #c83d3d; background: #f6eaea; }
.media-nav a span { width: 20px; text-align: center; }
.channel-widget { padding: 18px; }
.channel-widget h2 { margin: 0 0 14px; font-size: 16px; }
.channel-list { display: grid; gap: 11px; }
.channel-list > a { display: grid; grid-template-columns: 38px minmax(0,1fr) 7px; align-items: center; gap: 9px; color: #444; text-decoration: none; }
.channel-list img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.channel-list strong, .channel-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-list strong { font-size: 12px; }
.channel-list small { color: #999; font-size: 9px; }
.channel-list i { width: 7px; height: 7px; border-radius: 50%; background: #e44d4d; }
.channel-widget__all { display: block; margin-top: 15px; color: #c83d3d; font-size: 10px; font-weight: 700; }
.media-content { min-width: 0; }
.media-heading > span { color: #e44d4d; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.media-heading h1 { margin: 2px 0 3px; font-size: 34px; }
.media-heading p { margin: 0; color: #777; }
.media-type-tabs { display: flex; gap: 24px; margin-top: 22px; border-bottom: 1px solid #d8d8d8; }
.media-type-tabs button { position: relative; min-height: 44px; padding: 7px 2px; border: 0; color: #777; background: transparent; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.media-type-tabs button::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: transparent; content: ""; }
.media-type-tabs button:hover, .media-type-tabs button:focus-visible, .media-type-tabs button.is-active { color: #c83d3d; outline: none; }
.media-type-tabs button.is-active::after { background: #e44d4d; }
.media-search { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 10px; margin: 20px 0 14px; padding-left: 16px; border: 1px solid #d7d7d7; border-radius: 8px; background: #fff; box-shadow: 0 5px 18px rgba(0,0,0,.06); }
.media-search > svg { width: 22px; fill: none; stroke: #777; stroke-linecap: round; stroke-width: 1.8; }
.media-search input { width: 100%; height: 54px; border: 0; outline: 0; font: inherit; font-size: 14px; }
.media-search button { align-self: stretch; min-width: 90px; border: 0; border-radius: 0 7px 7px 0; color: #fff; background: #e44d4d; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.media-chips { display: flex; overflow-x: auto; gap: 7px; padding-bottom: 6px; }
.media-chips button { flex: 0 0 auto; padding: 7px 12px; border: 0; border-radius: 16px; color: #555; background: #e8e8e8; font: inherit; font-size: 11px; cursor: pointer; }
.media-chips button:hover, .media-chips button.is-active { color: #fff; background: #333; }
.video-section { margin-top: 21px; }
.video-section__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.video-section__heading h2 { margin: 0; font-size: 22px; }
.video-section__heading span { color: #999; font-size: 10px; }
.video-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 17px; }
.video-card { min-width: 0; }
.video-card__thumbnail { position: relative; display: block; overflow: hidden; aspect-ratio: 16/9; border-radius: 8px; background: #222; }
.video-card__thumbnail > img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.video-card:hover .video-card__thumbnail > img { transform: scale(1.04); }
.video-card__play { position: absolute; top: 50%; left: 50%; display: grid; width: 42px; height: 42px; border-radius: 50%; place-items: center; color: #fff; background: rgba(0,0,0,.65); opacity: 0; transform: translate(-50%,-50%); transition: opacity .2s ease; }
.video-card:hover .video-card__play, .video-card__thumbnail:focus-visible .video-card__play { opacity: 1; }
.video-card__thumbnail time, .video-card__live { position: absolute; right: 7px; bottom: 7px; padding: 2px 5px; border-radius: 3px; color: #fff; background: rgba(0,0,0,.8); font-size: 9px; font-weight: 700; }
.video-card__live { right: auto; left: 7px; background: #e00000; }
.video-card__info { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 9px; padding-top: 10px; }
.video-card__info img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.video-card h3 { margin: 0 0 5px; font-size: 14px; line-height: 1.35; }
.video-card h3 a { color: #222; text-decoration: none; }
.video-card__channel { color: #777; font-size: 10px; text-decoration: none; }
.video-card__info p { margin: 1px 0 0; color: #999; font-size: 9px; }
.media-empty { padding: 40px; border-radius: 8px; color: #777; background: #fff; text-align: center; }
.podcast-section { margin-top: 21px; }
.podcast-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px 17px; }
.podcast-card { min-width: 0; }
.podcast-card__cover { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: 9px; background: #222; box-shadow: 0 5px 15px rgba(0,0,0,.12); }
.podcast-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, filter .3s ease; }
.podcast-card__cover > span { position: absolute; right: 12px; bottom: 12px; display: grid; width: 44px; height: 44px; border-radius: 50%; place-items: center; color: #fff; background: #e44d4d; box-shadow: 0 5px 14px rgba(0,0,0,.28); transition: transform .2s ease; }
.podcast-card:hover .podcast-card__cover img { filter: brightness(.82); transform: scale(1.04); }
.podcast-card:hover .podcast-card__cover > span { transform: scale(1.08); }
.podcast-card__info { padding-top: 11px; }
.podcast-card__info > span { color: #e44d4d; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.podcast-card h3 { margin: 4px 0 7px; font-size: 14px; line-height: 1.35; }
.podcast-card h3 a { color: #222; text-decoration: none; }
.podcast-card h3 a:hover, .podcast-card h3 a:focus-visible { color: #c83d3d; }
.podcast-card__info p { margin: 0; color: #888; font-size: 9px; }

@media (max-width: 1050px) and (min-width: 769px) {
    .video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .podcast-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 768px) {
    .media-page-layout { grid-template-columns: 1fr; padding-top: 18px; }
    .media-sidebar { order: 1; }
    .media-content { order: 0; }
    .media-heading h1 { font-size: 29px; }
    .video-grid { grid-template-columns: 1fr; }
    .podcast-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .media-search { grid-template-columns: 22px minmax(0,1fr); padding-right: 8px; }
    .media-search button { grid-column: 1/-1; min-height: 42px; margin: 0 -8px 0 -16px; border-radius: 0 0 7px 7px; }
}

@media (max-width: 480px) {
    .podcast-grid { grid-template-columns: 1fr; }
}

/* Media channel */
.channel-page { flex: 1; padding-block: 24px 40px; }
.channel-hero { overflow: hidden; border-radius: 10px 10px 0 0; background: #fff; }
.channel-banner { height: 250px; overflow: hidden; }
.channel-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 36%; }
.channel-profile { display: flex; align-items: center; gap: 18px; padding: 18px 28px; }
.channel-profile__avatar { width: 112px; height: 112px; margin-top: -52px; border: 5px solid #fff; border-radius: 50%; object-fit: cover; }
.channel-profile__info { min-width: 0; flex: 1; }
.channel-profile__info h1 { margin: 0 0 2px; font-size: 27px; }
.channel-profile__info h1 span { color: #2787f5; font-size: 16px; }
.channel-profile__info p, .channel-profile__info small { display: block; margin: 0; color: #777; font-size: 11px; }
.channel-subscribe { min-height: 40px; padding: 7px 16px; border: 0; border-radius: 20px; color: #fff; background: #e44d4d; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.channel-subscribe.is-active { color: #444; background: #e5e5e5; }
.channel-tabs { display: flex; overflow-x: auto; padding-inline: 20px; border-top: 1px solid #eee; border-radius: 0 0 10px 10px; background: #fff; }
.channel-tabs button { position: relative; min-height: 48px; flex: 0 0 auto; padding: 8px 15px; border: 0; color: #666; background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.channel-tabs button::after { position: absolute; right: 10px; bottom: 0; left: 10px; height: 3px; background: transparent; content: ""; }
.channel-tabs button:hover, .channel-tabs button.is-active { color: #c83d3d; }
.channel-tabs button.is-active::after { background: #e44d4d; }
.channel-search { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 9px; margin-top: 16px; padding-left: 14px; border: 1px solid #d8d8d8; border-radius: 7px; background: #fff; }
.channel-search svg { width: 20px; fill: none; stroke: #777; stroke-linecap: round; stroke-width: 1.8; }
.channel-search input { width: 100%; height: 44px; border: 0; outline: 0; font: inherit; font-size: 12px; }
.channel-search button { align-self: stretch; min-width: 76px; border: 0; border-radius: 0 6px 6px 0; color: #fff; background: #e44d4d; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.channel-body-layout { display: grid; grid-template-columns: minmax(0,1fr) 270px; align-items: start; gap: 20px; }
.channel-main-panels { min-width: 0; }
.channel-panel { margin-top: 22px; }
.channel-featured { display: grid; grid-template-columns: minmax(320px, 48%) minmax(0,1fr); gap: 24px; align-items: center; padding: 22px; border-radius: 9px; background: #fff; }
.channel-featured__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16/9; border-radius: 7px; }
.channel-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.channel-featured__media span { position: absolute; top: 50%; left: 50%; display: grid; width: 52px; height: 52px; border-radius: 50%; place-items: center; color: #fff; background: rgba(228,77,77,.9); transform: translate(-50%,-50%); }
.channel-featured > div > span { color: #e44d4d; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.channel-featured h2 { margin: 6px 0 10px; font-size: 23px; line-height: 1.3; }
.channel-featured h2 a { color: #222; text-decoration: none; }
.channel-featured p { margin: 0 0 12px; color: #666; font-size: 13px; }
.channel-featured small { color: #999; }
.channel-section { margin-top: 20px; padding: 20px; border-radius: 9px; background: #fff; }
.channel-section > header, .channel-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.channel-section > header h2, .channel-panel-heading h2 { margin: 0; font-size: 21px; }
.channel-section > header button { border: 0; color: #c83d3d; background: transparent; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.channel-video-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.channel-tile-info { padding-top: 8px; }
.channel-tile-info h3 { margin: 0 0 4px; font-size: 13px; line-height: 1.35; }
.channel-tile-info h3 a { color: #222; text-decoration: none; }
.channel-tile-info p { margin: 0; color: #999; font-size: 9px; }
.home-podcast { display: grid; grid-template-columns: 84px 38px minmax(0,1fr); align-items: center; gap: 14px; }
.home-podcast img { width: 84px; height: 84px; border-radius: 7px; object-fit: cover; }
.home-podcast button, .channel-podcast button { display: grid; width: 38px; height: 38px; border: 0; border-radius: 50%; place-items: center; color: #fff; background: #e44d4d; cursor: pointer; }
.home-podcast span { color: #e44d4d; font-size: 9px; font-weight: 700; }
.home-podcast h3 { margin: 3px 0; font-size: 16px; }
.home-podcast p { margin: 0; color: #888; font-size: 10px; }
.channel-home-mix { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.channel-home-mix button { display: grid; gap: 3px; padding: 14px; border: 1px solid #ddd; border-radius: 6px; color: #444; background: #fafafa; text-align: left; cursor: pointer; }
.channel-home-mix button:hover { border-color: #e44d4d; }
.channel-home-mix strong { font-size: 13px; }
.channel-home-mix span { color: #888; font-size: 9px; }
.channel-panel-heading { padding: 16px 19px; border-radius: 8px; background: #fff; }
.channel-panel-heading select { height: 34px; padding: 0 8px; border: 1px solid #ddd; border-radius: 4px; background: #fff; font-size: 10px; }
.channel-all-videos { grid-template-columns: repeat(4,minmax(0,1fr)); }
.channel-body-layout .channel-all-videos { grid-template-columns: repeat(3,minmax(0,1fr)); }
.channel-photo-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.channel-photo-card { overflow: hidden; border-radius: 8px; background: #fff; }
.channel-photo-card > a { display: block; overflow: hidden; aspect-ratio: 16/9; }
.channel-photo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.channel-photo-card:hover img { transform: scale(1.04); }
.channel-photo-card > div { padding: 10px 12px 12px; }
.channel-photo-card strong, .channel-photo-card span { display: block; }
.channel-photo-card strong { overflow: hidden; color: #333; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.channel-photo-card span { margin-top: 3px; color: #999; font-size: 9px; }
.library-tabs { display: flex; gap: 6px; margin-bottom: 14px; padding: 8px; border-radius: 8px; background: #fff; }
.library-tabs button { min-height: 36px; padding: 6px 13px; border: 0; border-radius: 5px; color: #666; background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.library-tabs button:hover, .library-tabs button.is-active { color: #fff; background: #e44d4d; }
.library-panel[hidden] { display: none; }
.playlist-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.playlist-card { padding: 12px; border-radius: 8px; background: #fff; }
.playlist-card a { color: #333; text-decoration: none; }
.playlist-card a > div { position: relative; aspect-ratio: 16/9; margin-bottom: 11px; }
.playlist-card a > div::before, .playlist-card a > div::after { position: absolute; right: 9px; bottom: 100%; left: 9px; height: 4px; border-radius: 4px 4px 0 0; background: #aaa; content: ""; }
.playlist-card a > div::after { right: 17px; left: 17px; height: 8px; background: #777; }
.playlist-card img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; }
.playlist-card a > div span { position: absolute; right: 7px; bottom: 7px; padding: 3px 6px; border-radius: 3px; color: #fff; background: rgba(0,0,0,.75); font-size: 9px; }
.playlist-card h3 { margin: 0 0 4px; font-size: 15px; }
.playlist-card p { margin: 0; color: #888; font-size: 10px; }
.album-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.album-card { padding: 12px; border-radius: 8px; background: #fff; }
.album-card a { color: #333; text-decoration: none; }
.album-card a > div { position: relative; overflow: hidden; aspect-ratio: 1; margin-bottom: 10px; border-radius: 7px; }
.album-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.album-card:hover img { transform: scale(1.04); }
.album-card a > div span { position: absolute; right: 7px; bottom: 7px; padding: 3px 6px; border-radius: 3px; color: #fff; background: rgba(0,0,0,.75); font-size: 9px; }
.album-card h3 { margin: 0 0 4px; font-size: 15px; }
.album-card p { margin: 0; color: #888; font-size: 10px; }
.channel-podcast-list { display: grid; gap: 12px; }
.channel-podcast { position: relative; display: grid; grid-template-columns: 116px 42px minmax(0,1fr); align-items: center; gap: 16px; padding: 14px; border-radius: 8px; background: #fff; }
.channel-podcast > img { width: 116px; height: 116px; border-radius: 7px; object-fit: cover; }
.channel-podcast > div > span { color: #e44d4d; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.channel-podcast h3 { margin: 4px 0 6px; font-size: 18px; }
.channel-podcast h3 a { color: #222; text-decoration: none; }
.channel-podcast p { margin: 0 0 8px; color: #666; font-size: 12px; }
.channel-podcast small { color: #999; }
.live-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; overflow: hidden; border-radius: 9px; background: #fff; }
.live-main { min-width: 0; padding-bottom: 16px; }
.live-player { position: relative; aspect-ratio: 16/9; background: #111; }
.live-player img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.live-player > span { position: absolute; top: 12px; left: 12px; padding: 4px 7px; border-radius: 3px; color: #fff; background: #e00000; font-size: 9px; font-weight: 700; }
.live-player > button { position: absolute; top: 50%; left: 50%; display: grid; width: 58px; height: 58px; border: 0; border-radius: 50%; place-items: center; color: #fff; background: #e44d4d; transform: translate(-50%,-50%); }
.live-main h2 { margin: 14px 18px 4px; font-size: 20px; }
.live-main p { margin: 0 18px; color: #888; font-size: 10px; }
.live-chat { display: flex; min-height: 520px; flex-direction: column; border-left: 1px solid #ddd; }
.live-chat > header { display: flex; justify-content: space-between; gap: 10px; padding: 14px; border-bottom: 1px solid #ddd; }
.live-chat h3 { margin: 0; font-size: 14px; }
.live-chat header span { color: #888; font-size: 9px; }
.live-chat__messages { flex: 1; overflow-y: auto; padding: 13px; font-size: 11px; }
.live-chat__messages p { margin: 0 0 10px; }
.live-chat__messages strong { color: #c83d3d; }
.live-chat form { display: grid; grid-template-columns: minmax(0,1fr) 36px; gap: 6px; padding: 11px; border-top: 1px solid #ddd; }
.live-chat input { min-width: 0; height: 36px; padding: 0 9px; border: 1px solid #ddd; border-radius: 5px; }
.live-chat form button { border: 0; border-radius: 5px; color: #fff; background: #e44d4d; }
.channel-thought-list { display: grid; width: 100%; gap: 15px; }
.channel-thought-composer { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 11px; margin-bottom: 15px; padding: 17px; border-radius: 8px; background: #fff; }
.channel-thought-composer > img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.channel-thought-composer form { min-width: 0; }
.channel-thought-composer textarea { width: 100%; min-height: 96px; padding: 11px; border: 1px solid #ddd; border-radius: 6px; font: inherit; resize: vertical; }
.channel-thought-composer textarea:focus { border-color: #e44d4d; outline: 2px solid rgba(228,77,77,.16); }
.channel-thought-composer form > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.channel-thought-composer form > div > div { display: flex; gap: 4px; }
.channel-thought-composer form > div button { padding: 6px 8px; border: 0; border-radius: 4px; color: #666; background: transparent; font: inherit; font-size: 10px; cursor: pointer; }
.channel-thought-composer form > div button:hover { background: #eee; }
.channel-thought-composer form > div > button { min-height: 35px; padding-inline: 13px; color: #fff; background: #e44d4d; font-weight: 700; }
.channel-thought { padding: 18px; border-radius: 8px; background: #fff; }
.channel-thought > header { display: flex; align-items: center; gap: 10px; }
.channel-thought > header img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.channel-thought header strong, .channel-thought header span { display: block; }
.channel-thought header span { color: #999; font-size: 9px; }
.channel-thought > p { margin: 15px 0; font-size: 14px; }
.thought-poll { display: grid; gap: 6px; }
.thought-poll button { display: flex; justify-content: space-between; padding: 9px 11px; border: 1px solid #ddd; border-radius: 5px; background: #fafafa; font: inherit; font-size: 11px; cursor: pointer; }
.thought-poll button:hover { border-color: #e44d4d; }
.thought-image { width: 100%; max-height: 360px; border-radius: 7px; object-fit: cover; }
.channel-thought > footer { display: flex; gap: 7px; margin-top: 13px; padding-top: 10px; border-top: 1px solid #eee; }
.channel-thought > footer button { border: 0; color: #666; background: transparent; font-size: 11px; }
.channel-sidebar { display: grid; gap: 15px; margin-top: 22px; }
.channel-stat-widget { padding: 17px; border-radius: 8px; background: #fff; }
.channel-stat-widget h2 { margin: 0 0 13px; font-size: 15px; }
.channel-stat-widget dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 8px; margin: 0; }
.channel-stat-widget dt { color: #999; font-size: 8px; text-transform: uppercase; }
.channel-stat-widget dd { margin: 2px 0 0; color: #333; font-size: 15px; font-weight: 700; }
.channel-stat-widget ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.channel-stat-widget li { display: flex; justify-content: space-between; gap: 10px; color: #888; font-size: 10px; }
.channel-stat-widget li strong { color: #444; font-weight: 700; text-align: right; }
.channel-stat-widget--live { display: grid; grid-template-columns: 9px minmax(0,1fr); align-items: center; gap: 9px; }
.channel-stat-widget--live > span { width: 9px; height: 9px; border-radius: 50%; background: #e00000; box-shadow: 0 0 0 4px rgba(224,0,0,.12); }
.channel-stat-widget--live strong, .channel-stat-widget--live small { display: block; }
.channel-stat-widget--live strong { font-size: 12px; }
.channel-stat-widget--live small { color: #888; font-size: 9px; }
.channel-stat-widget--live button { grid-column: 1/-1; min-height: 34px; border: 0; border-radius: 5px; color: #fff; background: #e44d4d; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.channel-about-panel { padding: 22px; border-radius: 8px; background: #fff; }
.channel-about-panel h2 { margin: 0 0 12px; font-size: 22px; }
.channel-about-panel h3 { margin: 24px 0 9px; font-size: 16px; }
.channel-about-panel p { margin: 0; color: #555; font-size: 13px; line-height: 1.65; }
.channel-about-panel a { color: #c83d3d; }
.channel-about-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.channel-about-tags span { padding: 5px 8px; border-radius: 4px; color: #555; background: #eee; font-size: 10px; }

@media (max-width: 900px) {
    .channel-body-layout { grid-template-columns: 1fr; }
    .channel-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .channel-stat-widget--live { grid-column: 1/-1; }
    .channel-all-videos { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .channel-photo-grid, .album-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .live-layout { grid-template-columns: 1fr; }
    .live-chat { min-height: 380px; border-top: 1px solid #ddd; border-left: 0; }
}

@media (max-width: 768px) {
    .channel-banner { height: 160px; }
    .channel-profile { align-items: flex-start; flex-wrap: wrap; padding: 14px 18px; }
    .channel-profile__avatar { width: 84px; height: 84px; margin-top: -42px; }
    .channel-subscribe { width: 100%; }
    .channel-tabs { padding-inline: 5px; }
    .channel-featured { grid-template-columns: 1fr; padding: 15px; }
    .channel-video-row, .playlist-grid { grid-template-columns: 1fr; }
    .channel-photo-grid, .album-grid { grid-template-columns: 1fr; }
    .channel-sidebar { grid-template-columns: 1fr; }
    .channel-body-layout .channel-all-videos { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .channel-home-mix { grid-template-columns: 1fr; }
    .channel-podcast { grid-template-columns: 84px 36px minmax(0,1fr); gap: 10px; }
    .channel-podcast > img { width: 84px; height: 84px; }
    .channel-podcast p { display: none; }
}

@media (max-width: 480px) {
    .channel-all-videos { grid-template-columns: 1fr; }
    .channel-body-layout .channel-all-videos { grid-template-columns: 1fr; }
    .channel-podcast { grid-template-columns: 68px minmax(0,1fr); }
    .channel-podcast > img { width: 68px; height: 68px; }
    .channel-podcast > button { position: absolute; margin: 16px; }
    .channel-podcast > div { grid-column: 2; }
    .channel-thought-composer { grid-template-columns: 1fr; }
    .channel-thought-composer > img { display: none; }
    .channel-thought-composer form > div { align-items: flex-end; }
    .channel-thought-composer form > div > div button { font-size: 0; }
    .channel-thought-composer form > div > div button::first-letter { font-size: 13px; }
}

/* Video watch */
.video-watch-page { display: grid; grid-template-columns: minmax(0,1fr) 350px; align-items: start; flex: 1; gap: 24px; padding-block: 28px 42px; }
.video-watch-main { min-width: 0; }
.watch-player { position: relative; overflow: hidden; aspect-ratio: 16/9; border-radius: 9px; background: #111; }
.watch-player > img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
.watch-player.is-playing > img { filter: brightness(.42); }
.watch-player__center { position: absolute; top: 50%; left: 50%; display: grid; width: 64px; height: 64px; border: 0; border-radius: 50%; place-items: center; color: #fff; background: rgba(228,77,77,.92); font-size: 22px; cursor: pointer; transform: translate(-50%,-50%); }
.watch-player__controls { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 8px; padding: 28px 13px 10px; color: #fff; background: linear-gradient(transparent,rgba(0,0,0,.85)); }
.watch-player__controls button { border: 0; color: inherit; background: transparent; cursor: pointer; }
.watch-player__controls span { font-size: 10px; }
.watch-player__controls div { height: 3px; flex: 1; border-radius: 2px; background: rgba(255,255,255,.5); }
.watch-title { margin: 16px 0 12px; font-size: 23px; line-height: 1.3; }
.watch-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.watch-channel { display: flex; min-width: 0; align-items: center; gap: 10px; }
.watch-channel img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.watch-channel h2 { margin: 0; font-size: 14px; }
.watch-channel h2 a { color: #222; text-decoration: none; }
.watch-channel span { color: #888; font-size: 9px; }
.watch-channel > button { min-height: 36px; margin-left: 7px; padding: 6px 13px; border: 0; border-radius: 18px; color: #fff; background: #e44d4d; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.watch-channel > button.is-active { color: #444; background: #ddd; }
.watch-actions { display: flex; gap: 5px; }
.watch-actions button { min-height: 34px; padding: 6px 9px; border: 0; border-radius: 17px; color: #555; background: #e7e7e7; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.watch-actions button:hover, .watch-actions button.is-active { color: #c83d3d; background: #f7dddd; }
.watch-description { margin-top: 16px; padding: 15px; border-radius: 7px; background: #e9e9e9; color: #444; font-size: 12px; line-height: 1.55; }
.watch-description > strong { font-size: 11px; }
.watch-description p { margin: 8px 0 0; }
.watch-description > button { margin-top: 8px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.watch-comments { margin-top: 24px; }
.watch-comments > header { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.watch-comments > header h2 { margin: 0; font-size: 18px; }
.watch-comments > header button { border: 0; background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
.watch-comment-form { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 11px; margin-bottom: 23px; }
.watch-comment-form > img, .watch-comment > img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.watch-comment-form textarea { width: 100%; min-height: 42px; padding: 9px 2px; border: 0; border-bottom: 1px solid #bbb; background: transparent; font: inherit; resize: vertical; }
.watch-comment-form textarea:focus { border-color: #e44d4d; outline: 0; }
.watch-comment-form form, .watch-comment-form > div > div { display: flex; justify-content: flex-end; gap: 7px; margin-top: 7px; }
.watch-comment-form button { padding: 7px 10px; border: 0; border-radius: 14px; color: #555; background: #ddd; font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; }
.watch-comment-form button[type="submit"] { color: #fff; background: #e44d4d; }
.watch-comment-list { display: grid; gap: 22px; }
.watch-comment { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 11px; }
.watch-comment header { display: flex; align-items: baseline; gap: 8px; }
.watch-comment header strong { font-size: 11px; }
.watch-comment header time { color: #999; font-size: 9px; }
.watch-comment p { margin: 6px 0; color: #444; font-size: 12px; line-height: 1.5; }
.watch-comment footer { display: flex; gap: 4px; }
.watch-comment footer button { padding: 4px 6px; border: 0; color: #666; background: transparent; font-size: 9px; cursor: pointer; }
.watch-recommendations { display: grid; gap: 12px; }
.watch-autoplay { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid #ddd; font-size: 10px; font-weight: 700; }
.watch-autoplay label { color: #777; font-weight: 400; }
.watch-autoplay input { accent-color: #e44d4d; }
.watch-recommendation { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: 9px; }
.watch-recommendation > a { position: relative; display: block; overflow: hidden; aspect-ratio: 16/9; border-radius: 6px; }
.watch-recommendation > a img { width: 100%; height: 100%; object-fit: cover; }
.watch-recommendation > a time { position: absolute; right: 5px; bottom: 5px; padding: 2px 4px; border-radius: 2px; color: #fff; background: rgba(0,0,0,.8); font-size: 8px; }
.watch-recommendation h2 { margin: 0 0 5px; font-size: 12px; line-height: 1.35; }
.watch-recommendation h2 a { color: #222; text-decoration: none; }
.watch-recommendation p, .watch-recommendation div > span { margin: 0; color: #888; font-size: 9px; }

@media (max-width: 1050px) {
    .video-watch-page { grid-template-columns: minmax(0,1fr) 290px; }
    .watch-recommendation { grid-template-columns: 130px minmax(0,1fr); }
    .watch-actions button span { display: none; }
}

/* Podcast episode */
.cast-page { display: grid; grid-template-columns: minmax(0,1fr) 320px; align-items: start; flex: 1; gap: 24px; padding-block: 26px 42px; }
.cast-main { min-width: 0; }
.cast-hero { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 25px; padding: 22px; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#34242d,#17191f); }
.cast-cover { width: 250px; height: 250px; border-radius: 9px; object-fit: cover; box-shadow: 0 10px 30px rgba(0,0,0,.32); }
.cast-hero__content { align-self: center; }
.cast-hero__content > span { color: #f1a3a3; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.cast-hero h1 { margin: 7px 0 10px; font-size: 28px; line-height: 1.18; }
.cast-hero__content > p { margin: 0 0 13px; color: #d5d5d5; font-size: 12px; }
.cast-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: #aaa; font-size: 9px; }
.cast-author { display: flex; align-items: center; gap: 9px; margin-top: 18px; }
.cast-author img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.cast-author strong, .cast-author small { display: block; }
.cast-author strong a { color: #fff; font-size: 11px; text-decoration: none; }
.cast-author small { color: #999; font-size: 8px; }
.cast-author button { min-height: 32px; margin-left: auto; padding: 5px 11px; border: 1px solid #777; border-radius: 16px; color: #fff; background: transparent; font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; }
.cast-author button.is-active { border-color: #e44d4d; background: #e44d4d; }
.cast-player { display: grid; grid-template-columns: 48px 34px minmax(0,1fr) 34px 34px 34px; align-items: center; gap: 7px; margin-top: 15px; padding: 13px 15px; border-radius: 8px; background: #fff; }
.cast-player > button { display: grid; height: 34px; padding: 0; border: 0; border-radius: 50%; place-items: center; color: #555; background: #eee; font-size: 11px; cursor: pointer; }
.cast-player > .cast-player__play { width: 48px; height: 48px; color: #fff; background: #e44d4d; font-size: 16px; }
.cast-player button small { font-size: 7px; }
.cast-player__timeline > div { overflow: hidden; height: 5px; border-radius: 3px; background: #ddd; }
.cast-player__timeline > div span { display: block; width: 0; height: 100%; background: #e44d4d; }
.cast-player__timeline p { display: flex; justify-content: space-between; margin: 4px 0 0; color: #888; font-size: 8px; }
.cast-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cast-actions button { padding: 7px 10px; border: 0; border-radius: 16px; color: #555; background: #e5e5e5; font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; }
.cast-actions button:hover, .cast-actions button.is-active { color: #c83d3d; background: #f7dddd; }
.cast-description, .cast-program, .cast-discussion { margin-top: 18px; padding: 20px; border-radius: 8px; background: #fff; }
.cast-description h2, .cast-program h2, .cast-discussion h2 { margin: 0 0 10px; font-size: 20px; }
.cast-description p { margin: 0; color: #555; font-size: 12px; line-height: 1.65; }
.cast-program > header, .cast-discussion > header { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.cast-program > header span, .cast-discussion h2 small { color: #999; font-size: 9px; }
.cast-program ol { margin: 0; padding: 0; list-style: none; }
.cast-program li + li { border-top: 1px solid #eee; }
.cast-program li button { display: grid; grid-template-columns: 45px minmax(0,1fr) 38px; align-items: center; gap: 10px; width: 100%; padding: 11px 5px; border: 0; color: #444; background: transparent; text-align: left; cursor: pointer; }
.cast-program li button:hover { color: #c83d3d; background: #faf3f3; }
.cast-program time { color: #e44d4d; font-size: 10px; font-weight: 700; }
.cast-program strong, .cast-program small { display: block; }
.cast-program strong { font-size: 12px; }
.cast-program small, .cast-program em { color: #999; font-size: 8px; font-style: normal; }
.cast-discussion > header > button { border: 0; color: #666; background: transparent; font-size: 9px; cursor: pointer; }
.cast-discussion > form { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; margin-bottom: 22px; }
.cast-discussion form img, .cast-comment-list article > img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.cast-discussion textarea { width: 100%; padding: 9px; border: 1px solid #ddd; border-radius: 5px; font: inherit; resize: vertical; }
.cast-discussion form div > button { float: right; margin-top: 6px; padding: 7px 10px; border: 0; border-radius: 14px; color: #fff; background: #e44d4d; font-size: 9px; font-weight: 700; }
.cast-comment-list { display: grid; gap: 18px; }
.cast-comment-list article { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; }
.cast-comment-list header { display: flex; gap: 8px; }
.cast-comment-list header strong { font-size: 10px; }
.cast-comment-list header time { color: #999; font-size: 8px; }
.cast-comment-list p { margin: 5px 0; color: #555; font-size: 11px; }
.cast-comment-list footer button { padding: 4px 5px; border: 0; color: #666; background: transparent; font-size: 8px; }
.cast-sidebar { display: grid; gap: 17px; margin-top: 25px; }
.cast-sidebar > section { padding: 16px; border-radius: 8px; background: #fff; }
.cast-sidebar section > header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.cast-sidebar h2 { margin: 0; font-size: 15px; }
.cast-sidebar header > a { color: #c83d3d; font-size: 9px; font-weight: 700; }
.cast-recommend-list { display: grid; gap: 13px; }
.cast-recommend-list article { display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 9px; }
.cast-recommend-list article > a { position: relative; display: block; overflow: hidden; width: 78px; height: 78px; border-radius: 6px; }
.cast-recommend-list img { width: 100%; height: 100%; object-fit: cover; }
.cast-recommend-list article > a span { position: absolute; top: 50%; left: 50%; display: grid; width: 28px; height: 28px; border-radius: 50%; place-items: center; color: #fff; background: rgba(228,77,77,.9); transform: translate(-50%,-50%); }
.cast-recommend-list small { color: #e44d4d; font-size: 7px; font-weight: 700; text-transform: uppercase; }
.cast-recommend-list h3 { margin: 2px 0 4px; font-size: 11px; line-height: 1.3; }
.cast-recommend-list h3 a { color: #333; text-decoration: none; }
.cast-recommend-list p { margin: 0; color: #999; font-size: 8px; }

@media (max-width: 900px) {
    .cast-page { grid-template-columns: 1fr; }
    .cast-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 0; }
}

@media (max-width: 768px) {
    .cast-hero { grid-template-columns: 150px minmax(0,1fr); gap: 17px; padding: 16px; }
    .cast-cover { width: 150px; height: 150px; }
    .cast-hero h1 { font-size: 21px; }
    .cast-hero__content > p { display: none; }
    .cast-player { grid-template-columns: 44px 30px minmax(0,1fr) 30px; }
    .cast-player > button:nth-last-child(-n+2) { display: none; }
    .cast-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .cast-hero { grid-template-columns: 1fr; }
    .cast-cover { width: 100%; height: auto; aspect-ratio: 1; }
    .cast-player { grid-template-columns: 44px 30px minmax(0,1fr); }
    .cast-player > button:nth-last-child(-n+3) { display: none; }
    .cast-program li button { grid-template-columns: 42px minmax(0,1fr); }
    .cast-program em { display: none; }
}

@media (max-width: 768px) {
    .video-watch-page { grid-template-columns: 1fr; padding-top: 18px; }
    .watch-title { font-size: 20px; }
    .watch-meta-row { align-items: flex-start; flex-direction: column; }
    .watch-actions { width: 100%; overflow-x: auto; }
    .watch-actions button span { display: inline; }
    .watch-recommendations { margin-top: 8px; }
    .watch-recommendation { grid-template-columns: 160px minmax(0,1fr); }
}

@media (max-width: 480px) {
    .watch-player { margin-inline: -16px; border-radius: 0; }
    .watch-recommendation { grid-template-columns: 130px minmax(0,1fr); }
    .watch-actions button span { display: none; }
}

/* Playlist page */
.playlist-page { display: grid; grid-template-columns: 320px minmax(0,1fr); align-items: start; gap: 24px; flex: 1; padding-block: 28px 42px; }
.playlist-summary { position: sticky; top: 20px; overflow: hidden; padding: 18px; border-radius: 14px; color: #fff; background: linear-gradient(155deg,#303030 0%,#181818 62%,#121212 100%); box-shadow: 0 12px 28px rgba(0,0,0,.14); }
.playlist-summary__cover { position: relative; overflow: hidden; aspect-ratio: 16/9; margin-bottom: 17px; border-radius: 10px; background: #222; }
.playlist-summary__cover img { width: 100%; height: 100%; object-fit: cover; }
.playlist-summary__cover::after { position: absolute; inset: 0; content: ""; background: linear-gradient(transparent 45%,rgba(0,0,0,.78)); }
.playlist-summary__cover > div { position: absolute; right: 12px; bottom: 10px; left: 12px; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.playlist-summary__cover span { font-size: 11px; font-weight: 700; }
.playlist-summary__cover small { color: #ddd; font-size: 8px; }
.playlist-summary__type { color: #ff8c8c; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.playlist-summary h1 { margin: 6px 0 9px; font-size: 23px; line-height: 1.18; }
.playlist-summary > p { margin: 0 0 15px; color: #cfcfcf; font-size: 10px; line-height: 1.55; }
.playlist-summary__author { display: flex; align-items: center; gap: 9px; }
.playlist-summary__author img { display: block; border-radius: 50%; object-fit: cover; }
.playlist-summary__author strong, .playlist-summary__author span { display: block; }
.playlist-summary__author a { color: #fff; font-size: 10px; text-decoration: none; }
.playlist-summary__author span { margin-top: 2px; color: #aaa; font-size: 8px; }
.playlist-summary dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 16px 0; }
.playlist-summary dl div { padding: 9px 6px; border-radius: 7px; background: rgba(255,255,255,.08); text-align: center; }
.playlist-summary dt { color: #aaa; font-size: 7px; }
.playlist-summary dd { margin: 3px 0 0; font-size: 10px; font-weight: 700; }
.playlist-summary__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.playlist-summary__buttons button { min-height: 36px; padding: 8px 10px; border: 0; border-radius: 18px; color: #222; background: #fff; font-size: 9px; font-weight: 800; cursor: pointer; }
.playlist-summary__buttons button:last-child { color: #fff; background: rgba(255,255,255,.14); }
.playlist-summary__buttons button:hover { background: #f3caca; }
.playlist-summary__actions { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 10px; }
.playlist-summary__actions button { padding: 6px 8px; border: 0; color: #bbb; background: transparent; font-size: 8px; cursor: pointer; }
.playlist-summary__actions button:hover { color: #fff; }
.playlist-content { overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.06); }
.playlist-content > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 20px; border-bottom: 1px solid #eee; }
.playlist-content h2 { margin: 0; font-size: 19px; }
.playlist-content header p { margin: 3px 0 0; color: #999; font-size: 9px; }
.playlist-content select { min-width: 130px; padding: 8px 28px 8px 10px; border: 1px solid #ddd; border-radius: 6px; color: #555; background: #fff; font: inherit; font-size: 9px; cursor: pointer; }
.playlist-video-list { padding: 8px; }
.playlist-video { display: grid; grid-template-columns: 24px 180px minmax(0,1fr) 26px; align-items: center; gap: 11px; padding: 8px; border-left: 3px solid transparent; border-radius: 7px; transition: background .18s,border-color .18s; }
.playlist-video:hover { background: #f7f7f7; }
.playlist-video.is-playing { border-left-color: #e44d4d; background: #fff1f1; }
.playlist-video__number { color: #999; font-size: 10px; text-align: center; }
.playlist-video.is-playing .playlist-video__number { color: transparent; }
.playlist-video.is-playing .playlist-video__number::before { color: #e44d4d; content: "▶"; }
.playlist-video__thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 16/9; border-radius: 6px; background: #ddd; }
.playlist-video__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s; }
.playlist-video__thumb > span { position: absolute; top: 50%; left: 50%; display: grid; width: 34px; height: 34px; border-radius: 50%; place-items: center; color: #fff; background: rgba(0,0,0,.64); opacity: 0; transform: translate(-50%,-50%); transition: opacity .18s; }
.playlist-video:hover .playlist-video__thumb > span { opacity: 1; }
.playlist-video:hover .playlist-video__thumb img { transform: scale(1.025); }
.playlist-video__thumb time { position: absolute; right: 5px; bottom: 5px; padding: 2px 4px; border-radius: 3px; color: #fff; background: rgba(0,0,0,.8); font-size: 8px; }
.playlist-video__info { align-self: start; padding-top: 3px; }
.playlist-video__info h3 { margin: 0 0 7px; font-size: 13px; line-height: 1.35; }
.playlist-video__info h3 a { color: #292929; text-decoration: none; }
.playlist-video__info > a { color: #777; font-size: 9px; text-decoration: none; }
.playlist-video__info p { margin: 4px 0 0; color: #999; font-size: 8px; }
.playlist-video > button { align-self: start; padding: 7px 3px; border: 0; color: #777; background: transparent; cursor: pointer; }

@media (max-width: 900px) {
    .playlist-page { grid-template-columns: 270px minmax(0,1fr); gap: 17px; }
    .playlist-video { grid-template-columns: 22px 145px minmax(0,1fr) 22px; gap: 8px; }
}

@media (max-width: 768px) {
    .playlist-page { grid-template-columns: 1fr; padding-top: 18px; }
    .playlist-summary { position: static; display: grid; grid-template-columns: minmax(180px,280px) minmax(0,1fr); column-gap: 18px; }
    .playlist-summary__cover { grid-row: 1/8; margin: 0; }
    .playlist-summary dl, .playlist-summary__buttons, .playlist-summary__actions { grid-column: 1/-1; }
    .playlist-video { grid-template-columns: 22px 145px minmax(0,1fr); }
    .playlist-video > button { display: none; }
}

@media (max-width: 520px) {
    .playlist-summary { display: block; }
    .playlist-summary__cover { margin-bottom: 16px; }
    .playlist-content > header { align-items: flex-start; flex-direction: column; }
    .playlist-content select { width: 100%; }
    .playlist-content header label { width: 100%; }
    .playlist-video { grid-template-columns: 18px 112px minmax(0,1fr); padding: 6px 3px; }
    .playlist-video__info h3 { margin-bottom: 4px; font-size: 10px; }
    .playlist-video__info > a { font-size: 8px; }
    .playlist-video__info p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Single photo page */
.photo-page { display: grid; grid-template-columns: minmax(0,1fr) 310px; align-items: start; gap: 24px; flex: 1; padding-block: 28px 42px; }
.photo-main { min-width: 0; }
.photo-viewer { position: relative; display: grid; min-height: 460px; margin: 0; overflow: hidden; border-radius: 12px; background: #171717; place-items: center; }
.photo-viewer img { display: block; width: 100%; max-height: 680px; object-fit: contain; }
.photo-viewer > button { position: absolute; right: 14px; bottom: 14px; display: grid; width: 38px; height: 38px; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.65); font-size: 17px; place-items: center; cursor: pointer; }
.photo-details, .photo-comments { margin-top: 18px; padding: 20px; border-radius: 10px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.photo-details > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid #eee; }
.photo-details h1 { margin: 0; font-size: 22px; line-height: 1.25; }
.photo-details header p { margin: 5px 0 0; color: #999; font-size: 9px; }
.photo-reactions { display: flex; flex: none; overflow: hidden; border-radius: 18px; background: #f2f2f2; }
.photo-reactions button { min-width: 64px; padding: 9px 12px; border: 0; color: #555; background: transparent; font-size: 10px; cursor: pointer; }
.photo-reactions button + button { border-left: 1px solid #ddd; }
.photo-reactions button:hover, .photo-reactions button.is-active { color: #c83d3d; background: #f8dddd; }
.photo-author { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.photo-author img { display: block; border-radius: 50%; object-fit: cover; }
.photo-author strong, .photo-author span { display: block; }
.photo-author strong a { color: #333; font-size: 11px; text-decoration: none; }
.photo-author span { margin-top: 2px; color: #999; font-size: 8px; }
.photo-author > button { margin-left: auto; padding: 9px 15px; border: 0; border-radius: 18px; color: #fff; background: #e44d4d; font-size: 9px; font-weight: 700; cursor: pointer; }
.photo-author > button.is-active { color: #555; background: #e9e9e9; }
.photo-details > p { margin: 0; color: #555; font-size: 11px; line-height: 1.65; }
.photo-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.photo-tags a { padding: 5px 8px; border-radius: 12px; color: #c83d3d; background: #fff0f0; font-size: 8px; text-decoration: none; }
.photo-detail-actions { display: flex; gap: 6px; margin-top: 14px; }
.photo-detail-actions button { padding: 7px 9px; border: 0; border-radius: 5px; color: #666; background: #f4f4f4; font-size: 8px; cursor: pointer; }
.photo-comments > header, .photo-related > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.photo-comments h2, .photo-related h2 { margin: 0; font-size: 17px; }
.photo-comments > header > button { border: 0; color: #777; background: transparent; font-size: 9px; cursor: pointer; }
.photo-comments > form { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; margin: 18px 0 24px; }
.photo-comments form > img, .photo-comment-list article > img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.photo-comments textarea { width: 100%; padding: 9px; border: 1px solid #ddd; border-radius: 5px; font: inherit; resize: vertical; }
.photo-comments form div > div { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.photo-comments form button { padding: 7px 10px; border: 0; border-radius: 14px; color: #666; background: #eee; font-size: 8px; cursor: pointer; }
.photo-comments form button[type="submit"] { color: #fff; background: #e44d4d; }
.photo-comment-list { display: grid; gap: 20px; }
.photo-comment-list article { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; }
.photo-comment-list article header { display: flex; gap: 8px; }
.photo-comment-list article strong { font-size: 10px; }
.photo-comment-list article time { color: #999; font-size: 8px; }
.photo-comment-list article p { margin: 5px 0; color: #555; font-size: 10px; line-height: 1.5; }
.photo-comment-list article footer button { padding: 4px 5px; border: 0; color: #777; background: transparent; font-size: 8px; cursor: pointer; }
.photo-related { position: sticky; top: 20px; padding: 18px; border-radius: 10px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.photo-related > header { padding-bottom: 14px; border-bottom: 1px solid #eee; }
.photo-related > header a { color: #c83d3d; font-size: 9px; font-weight: 700; text-decoration: none; }
.photo-related-list { display: grid; gap: 14px; margin-top: 14px; }
.photo-related-list article { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 10px; }
.photo-related-list article > a { display: block; overflow: hidden; aspect-ratio: 4/3; border-radius: 6px; background: #ddd; }
.photo-related-list img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.photo-related-list article:hover img { transform: scale(1.035); }
.photo-related-list h3 { margin: 2px 0 6px; font-size: 11px; line-height: 1.35; }
.photo-related-list h3 a { color: #333; text-decoration: none; }
.photo-related-list p { margin: 0; color: #999; font-size: 8px; line-height: 1.35; }

@media (max-width: 900px) {
    .photo-page { grid-template-columns: minmax(0,1fr) 260px; gap: 17px; }
    .photo-related-list article { grid-template-columns: 90px minmax(0,1fr); }
}

@media (max-width: 768px) {
    .photo-page { grid-template-columns: 1fr; padding-top: 18px; }
    .photo-viewer { min-height: 320px; }
    .photo-related { position: static; }
    .photo-related-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .photo-related-list article { grid-template-columns: 110px minmax(0,1fr); }
}

@media (max-width: 520px) {
    .photo-viewer { min-height: 230px; margin-inline: -16px; border-radius: 0; }
    .photo-details, .photo-comments { padding: 15px; }
    .photo-details > header { flex-direction: column; }
    .photo-details h1 { font-size: 19px; }
    .photo-reactions { width: 100%; }
    .photo-reactions button { flex: 1; }
    .photo-related-list { grid-template-columns: 1fr; }
    .photo-related-list article { grid-template-columns: 112px minmax(0,1fr); }
}

/* Purchased files and keys */
.downloads-page { display: grid; grid-template-columns: 230px minmax(0,1fr); align-items: start; gap: 24px; flex: 1; padding-block: 28px 42px; }
.downloads-sidebar { display: grid; gap: 14px; }
.downloads-user, .downloads-user-menu, .downloads-help { padding: 18px; border-radius: 10px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.downloads-user { text-align: center; }
.downloads-user > img { display: block; margin: 0 auto 10px; border: 4px solid #f8e2e2; border-radius: 50%; object-fit: cover; }
.downloads-user h1 { margin: 0; font-size: 17px; }
.downloads-user p { margin: 4px 0 10px; color: #999; font-size: 8px; }
.downloads-user > a { color: #c83d3d; font-size: 8px; font-weight: 700; text-decoration: none; }
.downloads-user-menu { display: grid; gap: 4px; padding: 10px; }
.downloads-user-menu a { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 6px; color: #555; font-size: 9px; font-weight: 700; text-decoration: none; }
.downloads-user-menu a span { width: 18px; color: #999; text-align: center; }
.downloads-user-menu a:hover, .downloads-user-menu a.is-current { color: #c83d3d; background: #fff0f0; }
.downloads-user-menu a.is-current span { color: #c83d3d; }
.downloads-help { background: linear-gradient(145deg,#373737,#202020); }
.downloads-help strong { color: #fff; font-size: 11px; }
.downloads-help p { margin: 5px 0 10px; color: #bbb; font-size: 8px; line-height: 1.45; }
.downloads-help a { color: #ff9191; font-size: 8px; font-weight: 700; text-decoration: none; }
.downloads-content { min-width: 0; overflow: hidden; border-radius: 11px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.downloads-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px; }
.downloads-heading > div > span { color: #e44d4d; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.downloads-heading h2 { margin: 4px 0; font-size: 22px; }
.downloads-heading p { margin: 0; color: #999; font-size: 9px; }
.downloads-total { flex: none; padding: 7px 10px; border-radius: 14px; color: #777; background: #f3f3f3; font-size: 8px; font-weight: 700; }
.downloads-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 22px 14px; border-bottom: 1px solid #eee; }
.downloads-tabs { display: flex; gap: 4px; }
.downloads-tabs button { padding: 9px 14px; border: 0; border-radius: 17px; color: #666; background: #f3f3f3; font-size: 9px; font-weight: 800; cursor: pointer; }
.downloads-tabs button span { margin-left: 4px; color: #999; }
.downloads-tabs button:hover, .downloads-tabs button.is-active { color: #fff; background: #e44d4d; }
.downloads-tabs button.is-active span { color: #ffdede; }
.downloads-search { display: flex; align-items: center; gap: 7px; width: min(280px,42%); padding: 8px 11px; border: 1px solid #ddd; border-radius: 18px; color: #999; }
.downloads-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: #444; background: transparent; font: inherit; font-size: 9px; }
.downloads-panel { padding: 10px 14px 20px; }
.download-file-list { display: grid; }
.download-file { display: grid; grid-template-columns: 76px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 12px 8px; border-bottom: 1px solid #eee; }
.download-file[hidden], .download-keys tr[hidden] { display: none; }
.download-file > img { width: 76px; height: 58px; border-radius: 6px; object-fit: cover; }
.download-file h3 { margin: 0 0 5px; font-size: 12px; }
.download-file p { margin: 0; color: #777; font-size: 8px; }
.download-file div > span { display: block; margin-top: 5px; color: #aaa; font-size: 7px; }
.download-file__actions { display: flex; align-items: center; gap: 5px; }
.download-file__actions a { padding: 8px 12px; border-radius: 16px; color: #fff; background: #e44d4d; font-size: 8px; font-weight: 700; text-decoration: none; }
.download-file__actions button { padding: 7px; border: 0; color: #777; background: transparent; cursor: pointer; }
.downloads-empty { margin: 30px 0; color: #999; font-size: 10px; text-align: center; }
.downloads-pagination { display: flex; justify-content: center; gap: 5px; margin-top: 18px; }
.downloads-pagination button { display: grid; width: 30px; height: 30px; border: 1px solid #ddd; border-radius: 50%; color: #666; background: #fff; font-size: 8px; place-items: center; cursor: pointer; }
.downloads-pagination button.is-current { border-color: #e44d4d; color: #fff; background: #e44d4d; }
.downloads-pagination button:disabled { opacity: .45; cursor: default; }
.download-keys-wrap { overflow-x: auto; }
.download-keys { width: 100%; border-collapse: collapse; }
.download-keys th { padding: 10px; color: #999; background: #fafafa; font-size: 7px; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.download-keys td { padding: 12px 10px; border-bottom: 1px solid #eee; color: #666; font-size: 8px; white-space: nowrap; }
.download-key-product { display: flex; align-items: center; gap: 9px; min-width: 165px; }
.download-key-product img { width: 46px; height: 38px; border-radius: 5px; object-fit: cover; }
.download-key-product strong { color: #333; font-size: 9px; }
.download-keys code { display: inline-block; min-width: 140px; padding: 6px 8px; border-radius: 5px; color: #555; background: #f3f3f3; font-family: Consolas,monospace; font-size: 8px; }
.download-key-actions { display: flex; gap: 5px; }
.download-key-actions button { padding: 6px 8px; border: 1px solid #ddd; border-radius: 5px; color: #666; background: #fff; font-size: 7px; cursor: pointer; }
.download-key-actions button:hover, .download-key-actions button.is-active { border-color: #e44d4d; color: #c83d3d; }

@media (max-width: 900px) {
    .downloads-page { grid-template-columns: 200px minmax(0,1fr); gap: 17px; }
    .download-file { grid-template-columns: 66px minmax(0,1fr); }
    .download-file > img { width: 66px; height: 52px; }
    .download-file__actions { grid-column: 2; }
}

@media (max-width: 768px) {
    .downloads-page { grid-template-columns: 1fr; padding-top: 18px; }
    .downloads-sidebar { grid-template-columns: 180px minmax(0,1fr); }
    .downloads-help { display: none; }
    .downloads-user-menu { align-content: center; }
}

@media (max-width: 520px) {
    .downloads-sidebar { grid-template-columns: 1fr; }
    .downloads-user { display: grid; grid-template-columns: 62px minmax(0,1fr); align-items: center; column-gap: 10px; text-align: left; }
    .downloads-user > img { grid-row: 1/4; width: 62px; height: 62px; margin: 0; }
    .downloads-user p { margin: 2px 0; }
    .downloads-user-menu { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .downloads-heading { align-items: flex-start; }
    .downloads-heading h2 { font-size: 18px; }
    .downloads-total { display: none; }
    .downloads-toolbar { align-items: stretch; flex-direction: column; }
    .downloads-tabs button { flex: 1; }
    .downloads-search { width: 100%; }
    .download-file { grid-template-columns: 58px minmax(0,1fr); gap: 9px; }
    .download-file > img { width: 58px; height: 48px; }
    .download-file p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .download-file__actions { grid-column: 1/-1; justify-content: flex-end; }
}

/* Purchase history */
.history-content { min-width: 0; }
.history-heading { padding: 21px 22px; border-radius: 11px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.history-heading span { color: #e44d4d; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.history-heading h2 { margin: 4px 0; font-size: 22px; }
.history-heading p { margin: 0; color: #999; font-size: 9px; }
.balance-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 22px; overflow: hidden; border-radius: 11px; color: #fff; background: linear-gradient(135deg,#e44d4d 0%,#bd3030 58%,#8f2424 100%); box-shadow: 0 8px 22px rgba(190,48,48,.22); }
.balance-card > div > span, .balance-card strong, .balance-card small { display: block; }
.balance-card > div > span { color: #ffd7d7; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.balance-card strong { margin: 5px 0 3px; font-size: 29px; line-height: 1; }
.balance-card small { color: #ffd9d9; font-size: 8px; }
.balance-card > a { flex: none; padding: 10px 15px; border-radius: 18px; color: #a32626; background: #fff; font-size: 9px; font-weight: 800; text-decoration: none; }
.balance-card > a:hover { background: #fff0f0; }
.history-transactions { margin-top: 16px; padding: 18px 14px 20px; overflow: hidden; border-radius: 11px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.history-transactions > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 8px 15px; }
.history-transactions h3 { margin: 0; font-size: 17px; }
.history-transactions header p { margin: 3px 0 0; color: #999; font-size: 8px; }
.history-search { display: flex; align-items: center; gap: 7px; width: min(300px,45%); padding: 8px 11px; border: 1px solid #ddd; border-radius: 18px; color: #999; }
.history-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: #444; background: transparent; font: inherit; font-size: 9px; }
.history-table-wrap { overflow-x: auto; }
.history-table { width: 100%; border-collapse: collapse; }
.history-table th { padding: 10px; color: #999; background: #fafafa; font-size: 7px; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.history-table td { padding: 12px 10px; border-bottom: 1px solid #eee; color: #777; font-size: 8px; white-space: nowrap; }
.history-table tr[hidden] { display: none; }
.history-operation { display: flex; align-items: center; gap: 9px; min-width: 215px; }
.history-operation__icon { display: grid; flex: none; width: 34px; height: 34px; border-radius: 50%; color: #b43939; background: #fde8e8; font-size: 13px; place-items: center; }
.history-operation__icon--income { color: #268358; background: #e3f5eb; }
.history-operation__icon--refund { color: #756326; background: #f8f0d9; }
.history-operation strong, .history-operation small { display: block; }
.history-operation strong { color: #333; font-size: 9px; }
.history-operation small { margin-top: 3px; color: #999; font-size: 7px; }
.history-table code { color: #666; font-family: Consolas,monospace; font-size: 8px; }
.transaction-status { display: inline-block; padding: 5px 8px; border-radius: 11px; font-size: 7px; font-weight: 700; }
.transaction-status--success { color: #27734e; background: #e4f5eb; }
.transaction-status--pending { color: #8a6c15; background: #fff4d2; }
.transaction-status--failed { color: #a63737; background: #fbe6e6; }
.transaction-amount { color: #555; font-size: 9px; }
.transaction-amount--minus { color: #b33e3e; }
.transaction-amount--plus { color: #268358; }
.history-empty { margin: 32px 0; color: #999; font-size: 10px; text-align: center; }

@media (max-width: 768px) {
    .history-table { min-width: 700px; }
}

@media (max-width: 520px) {
    .history-heading h2 { font-size: 18px; }
    .balance-card { align-items: flex-start; flex-direction: column; }
    .balance-card > a { width: 100%; text-align: center; }
    .history-transactions > header { align-items: stretch; flex-direction: column; }
    .history-search { width: 100%; }
}

/* Shop */
.shop-page { display: grid; grid-template-columns: 230px minmax(0,1fr); align-items: start; gap: 26px; flex: 1; padding-block: 28px 42px; }
.shop-sidebar { display: grid; gap: 16px; }
.shop-main-nav, .shop-categories { padding: 11px; border-radius: 10px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.shop-main-nav { display: grid; gap: 3px; }
.shop-main-nav a { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 10px; border-radius: 6px; color: #555; font-size: 9px; font-weight: 700; text-decoration: none; }
.shop-main-nav a > span { color: #999; font-size: 11px; text-align: center; }
.shop-main-nav a > strong { display: grid; min-width: 18px; height: 18px; padding-inline: 4px; border-radius: 9px; color: #fff; background: #e44d4d; font-size: 7px; place-items: center; }
.shop-main-nav a:hover, .shop-main-nav a.is-active { color: #c83d3d; background: #fff0f0; }
.shop-main-nav a:hover > span, .shop-main-nav a.is-active > span { color: #c83d3d; }
.shop-categories { padding: 17px 11px; }
.shop-categories h2 { margin: 0 8px 10px; font-size: 13px; }
.shop-categories button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 8px; border: 0; border-radius: 5px; color: #666; background: transparent; font-size: 9px; text-align: left; cursor: pointer; }
.shop-categories button strong { color: #aaa; font-size: 8px; }
.shop-categories button:hover, .shop-categories button.is-active { color: #c83d3d; background: #fff4f4; }
.shop-content { min-width: 0; }
.shop-promo { position: relative; overflow: hidden; min-height: 250px; border-radius: 14px; color: #fff; background: #d44343; box-shadow: 0 9px 24px rgba(171,49,49,.18); }
.shop-promo__slide { display: grid; grid-template-columns: minmax(0,1fr) 210px; align-items: center; min-height: 250px; padding: 30px 38px 48px; background: radial-gradient(circle at 85% 25%,rgba(255,255,255,.2),transparent 32%),linear-gradient(135deg,#ec5a5a,#ad2929); }
.shop-promo__slide--dark { background: radial-gradient(circle at 85% 25%,rgba(255,255,255,.12),transparent 32%),linear-gradient(135deg,#3c3c43,#17171b); }
.shop-promo__slide--gold { color: #3d3216; background: radial-gradient(circle at 85% 25%,rgba(255,255,255,.38),transparent 32%),linear-gradient(135deg,#f7d876,#d7a938); }
.shop-promo__slide[hidden] { display: none; }
.shop-promo__slide > div:first-child > span { font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.shop-promo__slide h1, .shop-promo__slide h2 { max-width: 490px; margin: 7px 0 9px; font-size: 27px; line-height: 1.15; }
.shop-promo__slide p { max-width: 470px; margin: 0 0 18px; color: rgba(255,255,255,.82); font-size: 10px; line-height: 1.55; }
.shop-promo__slide--gold p { color: rgba(61,50,22,.75); }
.shop-promo__slide > div:first-child > a { display: inline-block; padding: 10px 14px; border-radius: 18px; color: #b52e2e; background: #fff; font-size: 9px; font-weight: 800; text-decoration: none; }
.shop-promo__slide--gold > div:first-child > a { color: #fff; background: #3d3216; }
.shop-promo__visual { text-align: center; transform: rotate(-5deg); }
.shop-promo__visual strong, .shop-promo__visual small { display: block; }
.shop-promo__visual strong { font-size: 44px; line-height: 1; text-shadow: 0 5px 14px rgba(0,0,0,.16); }
.shop-promo__visual small { margin-top: 7px; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.shop-promo__controls { position: absolute; right: 22px; bottom: 15px; left: 22px; display: flex; align-items: center; justify-content: space-between; }
.shop-promo__controls > button { display: grid; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; background: rgba(0,0,0,.12); place-items: center; cursor: pointer; }
.shop-promo__controls > div { display: flex; gap: 5px; }
.shop-promo__controls > div button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; }
.shop-promo__controls > div button.is-active { width: 18px; border-radius: 4px; background: #fff; }
.shop-search { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 7px; margin: 18px 0; padding: 7px 7px 7px 13px; border: 1px solid #ddd; border-radius: 22px; background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.04); }
.shop-search > span { color: #999; font-size: 16px; }
.shop-search input { min-width: 0; border: 0; outline: 0; color: #444; background: transparent; font: inherit; font-size: 10px; }
.shop-search button { padding: 9px 18px; border: 0; border-radius: 17px; color: #fff; background: #e44d4d; font-size: 9px; font-weight: 800; cursor: pointer; }
.shop-products > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.shop-products h2 { margin: 0; font-size: 19px; }
.shop-products header p { margin: 3px 0 0; color: #999; font-size: 8px; }
.shop-products select { padding: 8px 28px 8px 10px; border: 1px solid #ddd; border-radius: 6px; color: #666; background: #fff; font: inherit; font-size: 8px; }
.shop-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.shop-product { min-width: 0; overflow: hidden; border-radius: 9px; background: #fff; box-shadow: 0 3px 14px rgba(0,0,0,.06); transition: transform .2s,box-shadow .2s; }
.shop-product[hidden] { display: none; }
.shop-product:hover { transform: translateY(-3px); box-shadow: 0 9px 22px rgba(0,0,0,.11); }
.shop-product__image { position: relative; overflow: hidden; aspect-ratio: 4/3; background: #ddd; }
.shop-product__image > img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.shop-product:hover .shop-product__image > img { transform: scale(1.035); }
.shop-product__badge { position: absolute; top: 9px; left: 9px; padding: 5px 7px; border-radius: 11px; color: #fff; background: #e44d4d; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.shop-product__badge--new { background: #333; }
.shop-product__badge--free { background: #25835a; }
.shop-product__image > button { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; width: 31px; height: 31px; border: 0; border-radius: 50%; color: #555; background: rgba(255,255,255,.92); font-size: 17px; place-items: center; cursor: pointer; }
.shop-product__image > button.is-active { color: #d83939; }
.shop-product__hover { position: absolute; inset: 0; z-index: 1; display: grid; padding: 18px; background: rgba(20,20,20,.58); opacity: 0; place-items: end center; pointer-events: none; transition: opacity .2s; }
.shop-product:hover .shop-product__hover, .shop-product:focus-within .shop-product__hover { opacity: 1; pointer-events: auto; }
.shop-product__hover button, .shop-product__hover a { width: 100%; padding: 10px 12px; border: 0; border-radius: 18px; color: #fff; background: #e44d4d; font-size: 9px; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; }
.shop-product__hover button.is-added { background: #27835a; }
.shop-product__body { padding: 13px; }
.shop-product__body > span { color: #e44d4d; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.shop-product__body h3 { margin: 5px 0 6px; font-size: 12px; line-height: 1.3; }
.shop-product__body h3 a { color: #333; text-decoration: none; }
.shop-product__body > p { min-height: 28px; margin: 0 0 12px; color: #888; font-size: 8px; line-height: 1.45; }
.shop-product__body footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid #eee; }
.shop-product__body footer div strong, .shop-product__body footer div del { display: block; }
.shop-product__body footer div strong { color: #333; font-size: 13px; }
.shop-product__body footer div del { margin-top: 2px; color: #aaa; font-size: 7px; }
.shop-product__body footer > span { color: #db9d27; font-size: 8px; font-weight: 700; }
.shop-product__body footer > span small { color: #aaa; font-weight: 400; }
.shop-empty { padding: 35px 0; color: #999; font-size: 10px; text-align: center; }

@media (max-width: 1020px) {
    .shop-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 768px) {
    .shop-page { grid-template-columns: 1fr; padding-top: 18px; }
    .shop-sidebar { grid-template-columns: 1fr 1fr; order: 1; }
    .shop-main-nav, .shop-categories { align-content: start; }
    .shop-promo__slide { grid-template-columns: minmax(0,1fr) 150px; padding-inline: 24px; }
    .shop-promo__slide h1, .shop-promo__slide h2 { font-size: 22px; }
    .shop-promo__visual strong { font-size: 34px; }
}

@media (max-width: 520px) {
    .shop-sidebar { grid-template-columns: 1fr; }
    .shop-promo { min-height: 280px; margin-inline: -16px; border-radius: 0; }
    .shop-promo__slide { grid-template-columns: 1fr; min-height: 280px; padding: 25px 22px 53px; }
    .shop-promo__visual { display: none; }
    .shop-search { grid-template-columns: 20px minmax(0,1fr); }
    .shop-search button { grid-column: 1/-1; }
    .shop-products > header { align-items: flex-start; flex-direction: column; }
    .shop-products select { width: 100%; }
    .shop-product-grid { gap: 10px; }
    .shop-product__body { padding: 10px; }
    .shop-product__body > p { display: none; }
    .shop-product__hover { position: static; padding: 0 10px 10px; background: #fff; opacity: 1; pointer-events: auto; }
    .shop-product__hover button, .shop-product__hover a { padding: 8px; }
}

/* Single product */
.product-page { flex: 1; padding-block: 18px 42px; }
.product-breadcrumbs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; color: #aaa; font-size: 8px; }
.product-breadcrumbs a { color: #777; text-decoration: none; }
.product-breadcrumbs a:hover { color: #c83d3d; }
.product-hero { display: grid; grid-template-columns: minmax(0,1.22fr) minmax(330px,.78fr); align-items: start; gap: 25px; }
.product-gallery, .product-summary, .product-information > article, .product-information > aside, .product-reviews { border-radius: 11px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.product-gallery { min-width: 0; padding: 14px; }
.product-gallery__stage { position: relative; display: grid; overflow: hidden; aspect-ratio: 4/3; border-radius: 8px; background: #222; place-items: center; }
.product-gallery__stage > img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery__stage > img[hidden] { display: none; }
.product-gallery__controls { position: absolute; right: 12px; bottom: 12px; left: 12px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.product-gallery__controls[hidden] { display: none; }
.product-gallery__controls button { display: grid; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.68); place-items: center; pointer-events: auto; cursor: pointer; }
.product-gallery__controls span { padding: 5px 8px; border-radius: 11px; color: #fff; background: rgba(0,0,0,.66); font-size: 8px; }
.product-gallery__thumbs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 10px; }
.product-gallery__thumbs[hidden] { display: none; }
.product-gallery__thumbs button { overflow: hidden; aspect-ratio: 4/3; padding: 0; border: 2px solid transparent; border-radius: 6px; background: #ddd; cursor: pointer; }
.product-gallery__thumbs button.is-active { border-color: #e44d4d; }
.product-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.product-summary { padding: 22px; }
.product-summary__labels { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product-summary__labels span { color: #e44d4d; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.product-summary__labels strong { padding: 5px 8px; border-radius: 11px; color: #fff; background: #e44d4d; font-size: 8px; }
.product-summary h1 { margin: 8px 0; font-size: 26px; line-height: 1.16; }
.product-summary__rating { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.product-summary__rating > span { color: #e5a72f; font-size: 11px; letter-spacing: 1px; }
.product-summary__rating strong { font-size: 9px; }
.product-summary__rating a { color: #c83d3d; font-size: 8px; }
.product-summary__rating small { color: #999; font-size: 8px; }
.product-summary > p { margin: 15px 0; color: #666; font-size: 10px; line-height: 1.6; }
.product-summary__features { display: grid; gap: 7px; margin: 0 0 16px; padding: 14px; border-radius: 7px; color: #555; background: #fafafa; font-size: 9px; list-style: none; }
.product-summary__features li::first-letter { color: #27835a; }
.product-summary__author { display: flex; align-items: center; gap: 9px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.product-summary__author img { border-radius: 50%; object-fit: cover; }
.product-summary__author span, .product-summary__author strong { display: block; }
.product-summary__author span { color: #999; font-size: 7px; }
.product-summary__author strong a { color: #333; font-size: 9px; text-decoration: none; }
.product-summary__price { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; }
.product-summary__price div strong, .product-summary__price div small { display: block; }
.product-summary__price div strong { font-size: 24px; line-height: 1; }
.product-summary__price del { margin-left: 5px; color: #aaa; font-size: 9px; }
.product-summary__price div small { margin-top: 5px; color: #999; font-size: 7px; }
.product-summary__price > span { padding: 5px 7px; border-radius: 10px; color: #27734e; background: #e3f5eb; font-size: 7px; font-weight: 700; }
.product-summary__actions { display: grid; grid-template-columns: minmax(0,1fr) 42px; gap: 8px; }
.product-summary__actions button { min-height: 42px; border: 0; border-radius: 21px; cursor: pointer; }
.product-summary__actions button:first-child { color: #fff; background: #e44d4d; font-size: 10px; font-weight: 800; }
.product-summary__actions button:first-child.is-added { background: #27835a; }
.product-summary__actions button:last-child { color: #666; background: #f0f0f0; font-size: 18px; }
.product-summary__actions button:last-child.is-active { color: #d43636; background: #ffe8e8; }
.product-trailer-button { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 9px; padding: 9px; border: 1px solid #ddd; border-radius: 21px; color: #555; background: #fff; text-align: left; cursor: pointer; }
.product-trailer-button > span { display: grid; width: 27px; height: 27px; border-radius: 50%; color: #fff; background: #333; place-items: center; }
.product-trailer-button strong, .product-trailer-button small { display: block; }
.product-trailer-button strong { font-size: 9px; }
.product-trailer-button small { margin-top: 2px; color: #999; font-size: 7px; }
.product-summary .product-summary__secure { margin: 10px 0 0; color: #999; font-size: 7px; text-align: center; }
.product-information { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.6fr); align-items: start; gap: 18px; margin-top: 18px; }
.product-information > article, .product-information > aside { padding: 20px; }
.product-information h2, .product-reviews h2 { margin: 0 0 12px; font-size: 17px; }
.product-information article p { margin: 0; color: #666; font-size: 10px; line-height: 1.7; }
.product-information article p + p { margin-top: 10px; }
.product-information dl { margin: 0; }
.product-information dl div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #eee; font-size: 8px; }
.product-information dt { color: #999; }
.product-information dd { margin: 0; color: #444; font-weight: 700; }
.product-reviews { margin-top: 18px; padding: 20px; }
.product-reviews > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-reviews > header a { color: #c83d3d; font-size: 8px; font-weight: 700; }
.product-reviews > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.product-reviews article { padding: 14px; border-radius: 7px; background: #fafafa; }
.product-reviews article header { display: flex; align-items: center; gap: 8px; }
.product-reviews article img { border-radius: 50%; object-fit: cover; }
.product-reviews article strong, .product-reviews article span { display: block; }
.product-reviews article strong { font-size: 9px; }
.product-reviews article span { margin-top: 3px; color: #d99b26; font-size: 7px; }
.product-reviews article p { margin: 9px 0 0; color: #666; font-size: 9px; line-height: 1.55; }
.product-trailer { width: min(760px,calc(100% - 30px)); padding: 0; overflow: hidden; border: 0; border-radius: 11px; color: #fff; background: #191919; box-shadow: 0 18px 60px rgba(0,0,0,.4); }
.product-trailer::backdrop { background: rgba(0,0,0,.72); }
.product-trailer__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; }
.product-trailer__header h2 { margin: 0; font-size: 13px; }
.product-trailer__header button { border: 0; color: #fff; background: transparent; font-size: 22px; cursor: pointer; }
.product-trailer__player { position: relative; aspect-ratio: 16/9; background: #000; }
.product-trailer__player > img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.product-trailer__player > button { position: absolute; top: 50%; left: 50%; display: grid; width: 58px; height: 58px; border: 0; border-radius: 50%; color: #fff; background: rgba(228,77,77,.92); font-size: 20px; place-items: center; transform: translate(-50%,-50%); cursor: pointer; }
.product-trailer__player.is-playing > img { opacity: .9; }
.product-trailer__player > div { position: absolute; right: 14px; bottom: 12px; left: 14px; display: flex; align-items: center; gap: 10px; font-size: 8px; }
.product-trailer__player > div i { height: 3px; flex: 1; border-radius: 2px; background: linear-gradient(90deg,#e44d4d 20%,rgba(255,255,255,.35) 20%); }

@media (max-width: 850px) {
    .product-hero { grid-template-columns: 1fr; }
    .product-information { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .product-page { padding-top: 12px; }
    .product-gallery { margin-inline: -16px; padding: 0; border-radius: 0; }
    .product-gallery__stage { border-radius: 0; }
    .product-gallery__thumbs { padding: 0 10px 10px; }
    .product-summary { padding: 17px; }
    .product-summary h1 { font-size: 22px; }
    .product-reviews > div { grid-template-columns: 1fr; }
}

/* Cart */
.cart-page { flex: 1; padding-block: 18px 42px; }
.cart-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.cart-heading > div > span { color: #e44d4d; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cart-heading h1 { margin: 4px 0; font-size: 27px; }
.cart-heading p { margin: 0; color: #999; font-size: 9px; }
.cart-heading > a { color: #c83d3d; font-size: 9px; font-weight: 700; text-decoration: none; }
.cart-layout { display: grid; grid-template-columns: minmax(0,1fr) 310px; align-items: start; gap: 22px; }
.cart-products, .cart-order { border-radius: 11px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.cart-products { overflow: hidden; }
.cart-products__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 19px; border-bottom: 1px solid #eee; }
.cart-products__title h2, .cart-order > h2 { margin: 0; font-size: 16px; }
.cart-products__title button { border: 0; color: #999; background: transparent; font-size: 8px; cursor: pointer; }
.cart-products__title button:hover { color: #c83d3d; }
.cart-list { display: grid; }
.cart-item { position: relative; display: grid; grid-template-columns: 104px minmax(0,1fr) 92px 85px 20px; align-items: center; gap: 13px; padding: 16px 17px; }
.cart-item + .cart-item { border-top: 1px solid #eee; }
.cart-item__cover { position: relative; display: block; overflow: hidden; width: 104px; aspect-ratio: 4/3; border-radius: 7px; background: #ddd; }
.cart-item__cover img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__cover > span { position: absolute; top: 6px; left: 6px; padding: 4px 6px; border-radius: 9px; color: #fff; background: #e44d4d; font-size: 6px; font-weight: 800; }
.cart-item__cover > span.cart-item__new { background: #333; }
.cart-item__info > span { color: #e44d4d; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.cart-item__info h2 { margin: 4px 0; font-size: 12px; line-height: 1.3; }
.cart-item__info h2 a { color: #333; text-decoration: none; }
.cart-item__info p { margin: 0; color: #999; font-size: 7px; line-height: 1.4; }
.cart-item__info button { margin-top: 7px; padding: 0; border: 0; color: #888; background: transparent; font-size: 7px; cursor: pointer; }
.cart-item__info button.is-active { color: #d63838; }
.cart-item__quantity { display: grid; grid-template-columns: 28px 34px 28px; align-items: center; overflow: hidden; border: 1px solid #ddd; border-radius: 16px; }
.cart-item__quantity button { height: 28px; border: 0; color: #777; background: #f7f7f7; cursor: pointer; }
.cart-item__quantity input { width: 34px; height: 28px; padding: 0; border: 0; outline: 0; color: #444; background: #fff; font: inherit; font-size: 9px; text-align: center; -moz-appearance: textfield; }
.cart-item__quantity input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.cart-item__price { text-align: right; }
.cart-item__price strong, .cart-item__price del { display: block; }
.cart-item__price strong { color: #333; font-size: 11px; }
.cart-item__price del { margin-top: 3px; color: #aaa; font-size: 7px; }
.cart-item__remove { align-self: start; padding: 0; border: 0; color: #aaa; background: transparent; font-size: 18px; cursor: pointer; }
.cart-item__remove:hover { color: #c83d3d; }
.cart-empty { padding: 48px 20px; text-align: center; }
.cart-empty > span { font-size: 35px; }
.cart-empty h2 { margin: 12px 0 5px; font-size: 18px; }
.cart-empty p { margin: 0 0 17px; color: #999; font-size: 9px; }
.cart-empty a { display: inline-block; padding: 9px 14px; border-radius: 17px; color: #fff; background: #e44d4d; font-size: 8px; font-weight: 700; text-decoration: none; }
.cart-layout.is-empty { grid-template-columns: 1fr; }
.cart-layout.is-empty .cart-products__title, .cart-layout.is-empty .cart-order { display: none; }
.cart-order { position: sticky; top: 20px; padding: 19px; }
.cart-order > h2 { padding-bottom: 14px; border-bottom: 1px solid #eee; }
.cart-order dl { margin: 10px 0; }
.cart-order dl div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: #777; font-size: 8px; }
.cart-order dl dd { margin: 0; color: #444; }
.cart-order dl div[data-discount-row] dd { color: #27835a; font-weight: 700; }
.cart-order__total { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 13px 0; border-top: 1px solid #eee; }
.cart-order__total span { color: #555; font-size: 10px; font-weight: 700; }
.cart-order__total strong { font-size: 20px; }
.cart-promo { padding: 12px 0; }
.cart-promo > label { display: block; margin-bottom: 6px; color: #666; font-size: 8px; font-weight: 700; }
.cart-promo > div { display: grid; grid-template-columns: minmax(0,1fr) auto; }
.cart-promo input { min-width: 0; padding: 8px 9px; border: 1px solid #ddd; border-right: 0; border-radius: 5px 0 0 5px; outline: 0; font: inherit; font-size: 8px; }
.cart-promo button { padding: 8px 9px; border: 0; border-radius: 0 5px 5px 0; color: #fff; background: #555; font-size: 7px; cursor: pointer; }
.cart-promo small { display: block; margin-top: 5px; color: #999; font-size: 7px; }
.cart-promo small.is-success { color: #27835a; }
.cart-checkout { width: 100%; padding: 11px; border: 0; border-radius: 19px; color: #fff; background: #e44d4d; font-size: 9px; font-weight: 800; cursor: pointer; }
.cart-checkout:hover { background: #c83d3d; }
.cart-order__secure { margin: 10px 0 14px; color: #999; font-size: 7px; line-height: 1.55; text-align: center; }
.cart-order__balance { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 8px; padding: 10px; border-radius: 6px; background: #f7f7f7; }
.cart-order__balance span { color: #999; font-size: 7px; }
.cart-order__balance strong { grid-row: 2; font-size: 11px; }
.cart-order__balance a { grid-column: 2; grid-row: 1/3; align-self: center; color: #c83d3d; font-size: 7px; font-weight: 700; }
.cart-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin-top: 18px; }
.cart-benefits article { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 8px; background: #fff; }
.cart-benefits article > span { display: grid; flex: none; width: 34px; height: 34px; border-radius: 50%; color: #c83d3d; background: #fff0f0; place-items: center; }
.cart-benefits strong { display: block; font-size: 9px; }
.cart-benefits p { margin: 3px 0 0; color: #999; font-size: 7px; }

@media (max-width: 900px) {
    .cart-layout { grid-template-columns: minmax(0,1fr) 270px; gap: 16px; }
    .cart-item { grid-template-columns: 80px minmax(0,1fr) 82px 20px; }
    .cart-item__cover { width: 80px; }
    .cart-item__quantity { grid-column: 2; width: 92px; }
    .cart-item__price { grid-column: 3; grid-row: 1/3; }
    .cart-item__remove { grid-column: 4; grid-row: 1/3; }
}

@media (max-width: 768px) {
    .cart-layout { grid-template-columns: 1fr; }
    .cart-order { position: static; }
}

@media (max-width: 520px) {
    .cart-heading { align-items: flex-start; flex-direction: column; }
    .cart-heading h1 { font-size: 23px; }
    .cart-item { grid-template-columns: 70px minmax(0,1fr) 18px; gap: 9px; padding: 13px 10px; }
    .cart-item__cover { width: 70px; }
    .cart-item__info { align-self: start; }
    .cart-item__info p { display: none; }
    .cart-item__quantity { grid-column: 2; grid-row: 2; }
    .cart-item__price { grid-column: 2; grid-row: 3; text-align: left; }
    .cart-item__remove { grid-column: 3; grid-row: 1/4; }
    .cart-benefits { grid-template-columns: 1fr; }
}

/* Checkout and payment result */
.checkout-page { flex: 1; padding-block: 18px 42px; }
.checkout-heading { margin-bottom: 18px; }
.checkout-heading > span { color: #e44d4d; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.checkout-heading h1 { margin: 4px 0; font-size: 27px; }
.checkout-heading p { margin: 0; color: #999; font-size: 9px; }
.checkout-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; align-items: start; gap: 22px; }
.checkout-main { display: grid; gap: 16px; }
.checkout-section, .checkout-digital, .checkout-order { border-radius: 11px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.checkout-section { padding: 20px; }
.checkout-section > header { display: flex; align-items: center; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.checkout-section > header > span { display: grid; flex: none; width: 29px; height: 29px; border-radius: 50%; color: #fff; background: #e44d4d; font-size: 9px; font-weight: 800; place-items: center; }
.checkout-section h2 { margin: 0; font-size: 16px; }
.checkout-section header p { margin: 3px 0 0; color: #999; font-size: 8px; }
.checkout-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; padding-top: 15px; }
.checkout-fields label > span { display: block; margin-bottom: 6px; color: #555; font-size: 8px; font-weight: 700; }
.checkout-fields label b { color: #e44d4d; }
.checkout-fields input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; outline: 0; color: #444; font: inherit; font-size: 9px; }
.checkout-fields input:focus { border-color: #e44d4d; box-shadow: 0 0 0 3px rgba(228,77,77,.09); }
.payment-methods { display: grid; gap: 8px; padding-top: 15px; }
.payment-methods label { position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr) 18px; align-items: center; gap: 10px; padding: 11px; border: 1px solid #ddd; border-radius: 7px; cursor: pointer; }
.payment-methods label:has(input:checked) { border-color: #e44d4d; background: #fff8f8; }
.payment-methods input { position: absolute; opacity: 0; }
.payment-methods__icon { display: grid; width: 38px; height: 32px; border-radius: 5px; color: #555; background: #eee; font-size: 8px; font-weight: 800; place-items: center; }
.payment-methods strong, .payment-methods small { display: block; }
.payment-methods strong { font-size: 9px; }
.payment-methods small { margin-top: 3px; color: #999; font-size: 7px; }
.payment-methods i { display: grid; width: 16px; height: 16px; border: 1px solid #bbb; border-radius: 50%; place-items: center; }
.payment-methods input:checked ~ i { border: 5px solid #e44d4d; }
.checkout-digital { display: flex; align-items: flex-start; gap: 11px; padding: 16px; border-left: 3px solid #e44d4d; }
.checkout-digital > span { font-size: 18px; }
.checkout-digital strong { font-size: 10px; }
.checkout-digital p { margin: 4px 0 0; color: #777; font-size: 8px; line-height: 1.5; }
.checkout-order { position: sticky; top: 20px; padding: 19px; }
.checkout-order > h2 { margin: 0; padding-bottom: 14px; border-bottom: 1px solid #eee; font-size: 16px; }
.checkout-products { display: grid; gap: 11px; padding: 13px 0; }
.checkout-products article { display: grid; grid-template-columns: 45px minmax(0,1fr) auto; align-items: center; gap: 8px; }
.checkout-products img { width: 45px; height: 37px; border-radius: 5px; object-fit: cover; }
.checkout-products strong, .checkout-products span { display: block; }
.checkout-products strong { overflow: hidden; color: #444; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.checkout-products span { margin-top: 3px; color: #999; font-size: 6px; }
.checkout-products article > b { color: #555; font-size: 8px; }
.checkout-order dl { margin: 0; padding: 9px 0; border-top: 1px solid #eee; }
.checkout-order dl div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; color: #777; font-size: 8px; }
.checkout-order dl dd { margin: 0; }
.checkout-order .checkout-discount { color: #27835a; font-weight: 700; }
.checkout-order__total { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 13px 0; border-top: 1px solid #eee; }
.checkout-order__total span { font-size: 10px; font-weight: 700; }
.checkout-order__total strong { font-size: 20px; }
.checkout-offer { display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: start; gap: 8px; margin: 6px 0 13px; color: #777; font-size: 7px; line-height: 1.5; cursor: pointer; }
.checkout-offer input { width: 14px; height: 14px; margin: 1px 0 0; accent-color: #e44d4d; }
.checkout-offer a { color: #c83d3d; }
.checkout-submit { width: 100%; padding: 11px; border: 0; border-radius: 19px; color: #fff; background: #e44d4d; font-size: 9px; font-weight: 800; cursor: pointer; }
.checkout-submit:hover { background: #c83d3d; }
.checkout-submit:disabled { opacity: .7; cursor: wait; }
.checkout-order > p { margin: 10px 0 0; color: #999; font-size: 7px; line-height: 1.5; text-align: center; }
.payment-result-page { display: grid; flex: 1; padding-block: 45px; place-items: center; }
.payment-result { width: min(590px,100%); padding: 34px; border-radius: 13px; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.08); text-align: center; }
.payment-result__icon { display: grid; width: 68px; height: 68px; margin: 0 auto 15px; border-radius: 50%; color: #fff; background: #2d9667; box-shadow: 0 7px 18px rgba(45,150,103,.23); font-size: 30px; place-items: center; }
.payment-result--fail .payment-result__icon { background: #d54646; box-shadow: 0 7px 18px rgba(213,70,70,.23); }
.payment-result > span { color: #999; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.payment-result h1 { margin: 7px 0 9px; font-size: 25px; }
.payment-result > p { max-width: 470px; margin: 0 auto; color: #666; font-size: 10px; line-height: 1.6; }
.payment-result__summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 22px 0; border: 1px solid #eee; border-radius: 8px; }
.payment-result__summary div { padding: 13px 8px; }
.payment-result__summary div + div { border-left: 1px solid #eee; }
.payment-result__summary span, .payment-result__summary strong { display: block; }
.payment-result__summary span { color: #999; font-size: 7px; }
.payment-result__summary strong { margin-top: 4px; font-size: 9px; }
.payment-result__notice { max-width: 440px; margin: 20px auto; padding: 15px; border-radius: 7px; background: #fff5f5; text-align: left; }
.payment-result__notice strong { font-size: 9px; }
.payment-result__notice ul { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 17px; color: #777; font-size: 8px; }
.payment-result__actions { display: flex; justify-content: center; gap: 8px; margin: 20px 0 13px; }
.payment-result__actions a { padding: 10px 14px; border-radius: 18px; color: #fff; background: #e44d4d; font-size: 8px; font-weight: 800; text-decoration: none; }
.payment-result__actions a + a { color: #666; background: #eee; }
.payment-result > small { color: #999; font-size: 7px; }

@media (max-width: 800px) {
    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-order { position: static; }
}

@media (max-width: 520px) {
    .checkout-heading h1 { font-size: 23px; }
    .checkout-fields { grid-template-columns: 1fr; }
    .checkout-section, .checkout-order { padding: 15px; }
    .payment-result { padding: 25px 16px; }
    .payment-result h1 { font-size: 21px; }
    .payment-result__summary { grid-template-columns: 1fr; }
    .payment-result__summary div + div { border-top: 1px solid #eee; border-left: 0; }
    .payment-result__actions { flex-direction: column; }
}

/* Personal messenger */
.sms-header-link { color: #666; text-decoration: none; }
.sms-header-link > span:first-child { font-size: 17px; }
.messenger-page { position: relative; display: grid; grid-template-columns: 285px minmax(0,1fr) 250px; min-height: 680px; max-height: calc(100vh - 145px); flex: 1; margin-block: 24px 32px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.messenger-chats { display: flex; min-width: 0; overflow: hidden; border-right: 1px solid #eee; flex-direction: column; }
.messenger-chats > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 17px 12px; }
.messenger-chats > header span { color: #e44d4d; font-size: 7px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.messenger-chats h1 { margin: 3px 0 0; font-size: 19px; }
.messenger-chats > header button { display: grid; width: 33px; height: 33px; border: 0; border-radius: 50%; color: #fff; background: #e44d4d; font-size: 17px; place-items: center; cursor: pointer; }
.messenger-search { display: flex; align-items: center; gap: 7px; margin: 0 13px 10px; padding: 8px 10px; border-radius: 17px; color: #999; background: #f3f3f3; }
.messenger-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: #444; background: transparent; font: inherit; font-size: 8px; }
.messenger-filters { display: flex; gap: 4px; padding: 0 13px 10px; border-bottom: 1px solid #eee; }
.messenger-filters button { padding: 6px 9px; border: 0; border-radius: 13px; color: #777; background: transparent; font-size: 8px; cursor: pointer; }
.messenger-filters button.is-active { color: #c83d3d; background: #fff0f0; font-weight: 700; }
.messenger-filters button span { color: #e44d4d; }
.messenger-chat-list { overflow-y: auto; flex: 1; }
.messenger-chat { display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: center; gap: 9px; width: 100%; padding: 10px 12px; border: 0; border-left: 3px solid transparent; color: #444; background: #fff; text-align: left; cursor: pointer; }
.messenger-chat[hidden] { display: none; }
.messenger-chat:hover { background: #fafafa; }
.messenger-chat.is-active { border-left-color: #e44d4d; background: #fff4f4; }
.messenger-avatar { position: relative; display: block; flex: none; width: 46px; height: 46px; }
.messenger-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.messenger-avatar.is-online::after { position: absolute; right: 1px; bottom: 1px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; content: ""; background: #28a86b; }
.messenger-chat__body { min-width: 0; }
.messenger-chat__body > span { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.messenger-chat__body > span + span { margin-top: 5px; }
.messenger-chat__body strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.messenger-chat.has-unread .messenger-chat__body strong { color: #222; }
.messenger-chat__body time { color: #aaa; font-size: 7px; }
.messenger-chat__body small { overflow: hidden; color: #999; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.messenger-chat.has-unread .messenger-chat__body small { color: #555; font-weight: 700; }
.messenger-chat__body b { display: grid; flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; color: #fff; background: #e44d4d; font-size: 7px; place-items: center; }
.messenger-chat__body i { color: #e44d4d; font-size: 7px; font-style: normal; }
.messenger-chat-empty { margin: 25px 0; color: #999; font-size: 8px; text-align: center; }
.messenger-conversation { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0,1fr) auto; background: #f6f4f2; }
.conversation-header { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #eee; background: rgba(255,255,255,.96); }
.conversation-header .messenger-avatar { width: 42px; height: 42px; }
.conversation-header h2 { margin: 0; font-size: 11px; }
.conversation-header p { margin: 3px 0 0; color: #279266; font-size: 7px; }
.conversation-header__actions { display: flex; gap: 3px; }
.conversation-header__actions button, .conversation-back { display: grid; width: 31px; height: 31px; border: 0; border-radius: 50%; color: #777; background: transparent; place-items: center; cursor: pointer; }
.conversation-header__actions button:hover { background: #f1f1f1; }
.conversation-back { display: none; }
.conversation-messages { overflow-y: auto; padding: 17px clamp(15px,4vw,50px); background-image: radial-gradient(rgba(140,120,100,.06) 1px,transparent 1px); background-size: 17px 17px; }
.message-day { display: flex; justify-content: center; margin: 4px 0 17px; }
.message-day span { padding: 5px 9px; border-radius: 11px; color: #888; background: rgba(255,255,255,.92); font-size: 7px; box-shadow: 0 2px 7px rgba(0,0,0,.05); }
.message { display: flex; align-items: flex-end; gap: 7px; max-width: min(76%,520px); margin: 5px 0; }
.message > img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.message > div { position: relative; padding: 9px 11px 6px; border-radius: 5px 13px 13px 13px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.message p { margin: 0; color: #454545; font-size: 9px; line-height: 1.5; }
.message time { display: block; margin-top: 4px; color: #aaa; font-size: 6px; text-align: right; }
.message time span { color: #de4a4a; }
.message--outgoing { justify-content: flex-end; margin-left: auto; }
.message--outgoing > div { border-radius: 13px 5px 13px 13px; background: #ffe7e7; }
.message-file { display: grid !important; grid-template-columns: 35px minmax(0,1fr) 25px; align-items: center; gap: 8px; min-width: 235px; }
.message-file > span { display: grid; width: 35px; height: 35px; border-radius: 6px; color: #fff; background: #e44d4d; font-size: 10px; font-weight: 800; place-items: center; }
.message-file strong, .message-file small { display: block; }
.message-file strong { font-size: 8px; }
.message-file small { margin-top: 3px; color: #999; font-size: 6px; }
.message-file button { border: 0; color: #c83d3d; background: transparent; cursor: pointer; }
.message-file time { grid-column: 2/4; margin: 0; }
.message-typing { display: flex; align-items: center; gap: 3px; margin: 11px 0 0 39px; }
.message-typing > span { width: 5px; height: 5px; border-radius: 50%; background: #aaa; animation: messenger-dot 1.2s infinite ease-in-out; }
.message-typing > span:nth-child(2) { animation-delay: .15s; }
.message-typing > span:nth-child(3) { animation-delay: .3s; }
.message-typing small { margin-left: 4px; color: #999; font-size: 6px; }
@keyframes messenger-dot { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
.message-composer { display: grid; grid-template-columns: 34px minmax(0,1fr) 37px; align-items: end; gap: 8px; padding: 10px 13px; border-top: 1px solid #eee; background: #fff; }
.message-composer > button { display: grid; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #777; background: #f1f1f1; place-items: center; cursor: pointer; }
.message-composer > div { display: grid; grid-template-columns: minmax(0,1fr) 31px; align-items: end; min-height: 37px; padding: 5px 5px 5px 11px; border-radius: 19px; background: #f3f3f3; }
.message-composer textarea { align-self: center; width: 100%; max-height: 110px; padding: 4px 0; overflow-y: auto; border: 0; outline: 0; background: transparent; font: inherit; font-size: 9px; line-height: 1.45; resize: none; }
.message-composer > div button { display: grid; width: 28px; height: 28px; border: 0; border-radius: 50%; color: #888; background: transparent; place-items: center; cursor: pointer; }
.message-composer button.message-send { width: 37px; height: 37px; color: #fff; background: #e44d4d; }
.messenger-contact { position: relative; overflow-y: auto; border-left: 1px solid #eee; background: #fff; }
.messenger-contact__close { display: none; position: absolute; top: 10px; right: 10px; z-index: 2; border: 0; color: #777; background: transparent; font-size: 19px; cursor: pointer; }
.messenger-contact__profile { padding: 24px 16px 16px; border-bottom: 1px solid #eee; text-align: center; }
.messenger-contact__profile .messenger-avatar { width: 76px; height: 76px; margin: 0 auto 9px; }
.messenger-contact__profile h2 { margin: 0; font-size: 13px; }
.messenger-contact__profile p { margin: 4px 0 8px; color: #999; font-size: 7px; }
.messenger-contact__profile > a { color: #c83d3d; font-size: 7px; font-weight: 700; }
.messenger-contact__actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 12px; border-bottom: 1px solid #eee; }
.messenger-contact__actions button { padding: 7px 3px; border: 0; color: #777; background: transparent; font-size: 7px; cursor: pointer; }
.messenger-contact__actions span { display: grid; width: 29px; height: 29px; margin: 0 auto 4px; border-radius: 50%; background: #f1f1f1; place-items: center; }
.messenger-shared { padding: 14px 12px; border-bottom: 1px solid #eee; }
.messenger-shared header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.messenger-shared h3 { margin: 0; font-size: 9px; }
.messenger-shared header a { color: #c83d3d; font-size: 7px; }
.messenger-shared > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.messenger-shared img { width: 100%; aspect-ratio: 1; border-radius: 4px; object-fit: cover; }
.messenger-contact__menu { display: grid; padding: 9px; }
.messenger-contact__menu a, .messenger-contact__menu button { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 9px 6px; border: 0; border-radius: 5px; color: #666; background: transparent; font-size: 8px; text-align: left; text-decoration: none; cursor: pointer; }
.messenger-contact__menu strong { color: #aaa; font-size: 7px; }
.messenger-contact__menu button:last-child { color: #c83d3d; }

@media (max-width: 1050px) {
    .messenger-page { grid-template-columns: 285px minmax(0,1fr); }
    .messenger-contact { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; width: 270px; box-shadow: -8px 0 24px rgba(0,0,0,.12); transform: translateX(105%); transition: transform .2s; }
    .messenger-page.is-contact-open .messenger-contact { transform: translateX(0); }
    .messenger-contact__close { display: block; }
}

@media (max-width: 700px) {
    .messenger-page { display: block; min-height: 650px; max-height: calc(100vh - 120px); margin: 12px 0 20px; border-radius: 0; }
    .messenger-chats, .messenger-conversation { height: 100%; min-height: 650px; }
    .messenger-conversation { display: none; }
    .messenger-page.is-conversation-open .messenger-chats { display: none; }
    .messenger-page.is-conversation-open .messenger-conversation { display: grid; }
    .conversation-header { grid-template-columns: 31px 39px minmax(0,1fr) auto; }
    .conversation-header .messenger-avatar { width: 39px; height: 39px; }
    .conversation-back { display: grid; }
    .conversation-header__actions button:first-child { display: none; }
    .messenger-contact { width: min(290px,88vw); }
}

/* Login */
.auth-body { min-height: 100vh; background: radial-gradient(circle at 15% 15%,#fff 0,#f6eeee 32%,transparent 58%),#f4f4f4; }
.auth-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.auth-header > a:last-child { color: #777; font-size: 9px; font-weight: 700; text-decoration: none; }
.auth-header > a:last-child:hover { color: #c83d3d; }
.login-page { display: grid; flex: 1; padding-block: 20px 35px; place-items: center; }
.login-card { display: grid; grid-template-columns: minmax(360px,1fr) minmax(330px,.9fr); width: min(900px,100%); min-height: 570px; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 18px 55px rgba(65,38,38,.13); }
.login-form-column { align-self: center; padding: 44px clamp(35px,6vw,65px); }
.login-form-column > header > span { color: #e44d4d; font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.login-form-column h1 { margin: 6px 0 7px; font-size: 27px; }
.login-form-column > header p { margin: 0; color: #999; font-size: 9px; }
.login-form { display: grid; gap: 14px; margin-top: 25px; }
.login-form > label > span { display: block; margin-bottom: 6px; color: #555; font-size: 8px; font-weight: 700; }
.login-form > label > input, .login-password { width: 100%; border: 1px solid #ddd; border-radius: 7px; background: #fff; transition: border-color .18s,box-shadow .18s; }
.login-form > label > input { padding: 11px; outline: 0; color: #444; font: inherit; font-size: 9px; }
.login-form > label > input:focus, .login-password:focus-within { border-color: #e44d4d; box-shadow: 0 0 0 3px rgba(228,77,77,.09); }
.login-password { display: grid; grid-template-columns: minmax(0,1fr) 38px; }
.login-password input { min-width: 0; padding: 11px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 9px; }
.login-password button { border: 0; color: #888; background: transparent; cursor: pointer; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.login-options label { display: flex; align-items: center; gap: 6px; color: #777; font-size: 8px; cursor: pointer; }
.login-options input { accent-color: #e44d4d; }
.login-options a { color: #c83d3d; font-size: 8px; font-weight: 700; }
.login-submit { width: 100%; padding: 11px; border: 0; border-radius: 20px; color: #fff; background: #e44d4d; box-shadow: 0 6px 16px rgba(228,77,77,.2); font-size: 9px; font-weight: 800; cursor: pointer; }
.login-submit:hover { background: #c83d3d; }
.login-submit:disabled { opacity: .7; cursor: wait; }
.login-message { min-height: 12px; margin: -6px 0 0; color: #27835a; font-size: 7px; text-align: center; }
.login-divider { display: flex; align-items: center; gap: 9px; margin: 15px 0; color: #aaa; font-size: 7px; }
.login-divider::before, .login-divider::after { height: 1px; flex: 1; content: ""; background: #eee; }
.login-socials { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.login-social { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border: 1px solid #ddd; border-radius: 19px; color: #555; font-size: 8px; font-weight: 700; text-decoration: none; }
.login-social:hover { border-color: #bbb; background: #fafafa; }
.login-social strong { display: grid; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 8px; place-items: center; }
.login-social--vk strong { background: #2787f5; }
.login-social--yandex strong { color: #fff; background: #fc3f1d; }
.login-register { margin: 19px 0 0; color: #999; font-size: 8px; text-align: center; }
.login-register a { color: #c83d3d; font-weight: 700; }
.login-qr-column { position: relative; display: grid; overflow: hidden; padding: 40px; color: #fff; background: radial-gradient(circle at 80% 15%,rgba(255,255,255,.15),transparent 28%),linear-gradient(145deg,#e25252,#9f2525); place-items: center; }
.login-qr-decoration { position: absolute; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }
.login-qr-decoration--one { top: -90px; right: -80px; width: 260px; height: 260px; }
.login-qr-decoration--two { bottom: -110px; left: -100px; width: 300px; height: 300px; }
.login-qr-content { position: relative; z-index: 1; max-width: 300px; text-align: center; }
.login-qr-label { font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.login-qr-content h2 { margin: 7px 0; font-size: 23px; }
.login-qr-content > p { margin: 0 auto 18px; color: rgba(255,255,255,.78); font-size: 9px; line-height: 1.55; }
.login-qr-code { position: relative; width: 190px; height: 190px; margin: 0 auto 20px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 10px 26px rgba(82,13,13,.22); }
.login-qr-code img { width: 100%; height: 100%; object-fit: contain; image-rendering: crisp-edges; }
.login-qr-code i { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; border: 5px solid #fff; border-radius: 8px; background: #e44d4d; transform: translate(-50%,-50%); }
.login-qr-content ol { display: grid; gap: 8px; margin: 0; padding: 0; text-align: left; list-style: none; }
.login-qr-content li { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); font-size: 8px; }
.login-qr-content li span { display: grid; flex: none; width: 20px; height: 20px; border-radius: 50%; color: #a72a2a; background: #fff; font-size: 7px; font-weight: 800; place-items: center; }
.login-qr-content > small { display: block; margin-top: 16px; color: rgba(255,255,255,.7); font-size: 7px; }
.login-qr-content > small b { color: #fff; }
.login-side-mark { display: grid; width: 120px; height: 120px; margin: 20px auto; border: 10px solid rgba(255,255,255,.22); border-radius: 28px; color: #d94242; background: #fff; box-shadow: 0 12px 28px rgba(82,13,13,.2); font-size: 48px; font-weight: 900; place-items: center; transform: rotate(-3deg); }
.login-qr-placeholder { position: relative; display: grid; grid-template-columns: repeat(2,1fr); width: 190px; height: 190px; gap: 38px; margin: 20px auto; padding: 22px; border: 10px solid rgba(255,255,255,.2); border-radius: 22px; background: rgba(255,255,255,.95); box-shadow: 0 12px 28px rgba(82,13,13,.2); }
.login-qr-placeholder > span { border: 8px solid #d94242; border-radius: 5px; box-shadow: inset 0 0 0 5px #fff,inset 0 0 0 10px #d94242; }
.login-qr-placeholder > strong { position: absolute; inset: 50% auto auto 50%; display: grid; width: 52px; height: 34px; border-radius: 17px; color: #fff; background: #d94242; font-size: 10px; letter-spacing: .12em; place-items: center; transform: translate(-50%,-50%); }
.auth-inline-error { display: block !important; margin-top: 5px !important; color: #c83d3d !important; font-size: 7px !important; line-height: 1.35; }
.auth-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 58px; color: #999; font-size: 7px; }
.auth-footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
.auth-footer a { color: #888; text-decoration: none; }

@media (max-width: 760px) {
    .login-card { grid-template-columns: 1fr; width: min(500px,100%); }
    .login-qr-column { min-height: 480px; }
}

@media (max-width: 480px) {
    .auth-header { min-height: 60px; }
    .login-page { padding-inline: 0; padding-top: 5px; }
    .login-card { border-radius: 0; }
    .login-form-column { padding: 32px 20px; }
    .login-form-column h1 { font-size: 23px; }
    .login-qr-column { min-height: 450px; padding: 30px 20px; }
    .auth-footer { align-items: flex-start; flex-direction: column; padding-block: 16px; }
}

/* Password recovery */
.password-page { display: grid; flex: 1; padding-block: 25px 40px; place-items: center; }
.password-card { width: min(480px,100%); padding: 38px 45px 28px; border-radius: 15px; background: #fff; box-shadow: 0 18px 55px rgba(65,38,38,.12); }
.password-card__icon { display: grid; width: 54px; height: 54px; margin: 0 auto 15px; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#ed6262,#bd3232); box-shadow: 0 7px 18px rgba(211,57,57,.2); font-size: 23px; place-items: center; }
.password-card > header { text-align: center; }
.password-card > header > span { color: #e44d4d; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.password-card h1 { margin: 6px 0 8px; font-size: 25px; }
.password-card > header p { max-width: 360px; margin: 0 auto; color: #888; font-size: 9px; line-height: 1.55; }
.password-form { display: grid; gap: 14px; margin-top: 23px; }
.password-form label > span, .password-form legend { display: block; margin-bottom: 6px; color: #555; font-size: 8px; font-weight: 700; }
.password-form label b { color: #e44d4d; }
.password-form label > input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 7px; outline: 0; color: #444; font: inherit; font-size: 9px; }
.password-form label > input:focus { border-color: #e44d4d; box-shadow: 0 0 0 3px rgba(228,77,77,.09); }
.password-form fieldset { display: grid; gap: 11px; margin: 0; padding: 14px; border: 1px solid #eee; border-radius: 9px; background: #fafafa; }
.password-form legend { margin: 0 0 0 -5px; padding: 0 5px; }
.password-captcha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; overflow: hidden; border-radius: 7px; color: #fff; background: radial-gradient(circle at 80% 20%,rgba(255,255,255,.16),transparent 35%),linear-gradient(135deg,#4a4a4f,#252529); }
.password-captcha small, .password-captcha strong { display: block; }
.password-captcha small { color: #bbb; font-size: 7px; }
.password-captcha strong { margin-top: 4px; font-family: Georgia,serif; font-size: 19px; letter-spacing: 3px; }
.password-captcha button { display: grid; width: 31px; height: 31px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); font-size: 15px; place-items: center; cursor: pointer; }
.password-error { min-height: 12px; margin: -5px 0; color: #c83d3d; font-size: 7px; text-align: center; }
.password-submit { width: 100%; padding: 11px; border: 0; border-radius: 20px; color: #fff; background: #e44d4d; font-size: 9px; font-weight: 800; cursor: pointer; }
.password-submit:hover { background: #c83d3d; }
.password-success { padding: 20px 0 5px; text-align: center; }
.password-success > span { display: grid; width: 58px; height: 58px; margin: 0 auto 13px; border-radius: 50%; color: #fff; background: #2e9768; font-size: 24px; place-items: center; }
.password-success h2 { margin: 0 0 7px; font-size: 22px; }
.password-success p { margin: 0 0 18px; color: #777; font-size: 9px; line-height: 1.55; }
.password-success > a { display: inline-block; padding: 10px 15px; border-radius: 18px; color: #fff; background: #e44d4d; font-size: 8px; font-weight: 800; text-decoration: none; }
.password-card > footer { margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; text-align: center; }
.password-card > footer p { margin: 0; color: #999; font-size: 8px; }
.password-card > footer a { color: #c83d3d; font-weight: 700; }

@media (max-width: 480px) {
    .password-page { padding-inline: 0; padding-top: 5px; }
    .password-card { padding: 30px 19px 23px; border-radius: 0; }
    .password-card h1 { font-size: 22px; }
}

/* Account verification */
.verify-card { width: min(540px,100%); }
.verify-card__icon { background: linear-gradient(145deg,#ef6666,#b92f2f); }
.verify-card > header strong { color: #555; }
.verify-code-fieldset { gap: 9px !important; }
.verify-code { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; }
.verify-code input { min-width: 0; width: 100%; height: 48px; padding: 0; border: 1px solid #ddd; border-radius: 7px; outline: 0; color: #333; background: #fff; font: inherit; font-size: 18px; font-weight: 800; text-align: center; }
.verify-code input:focus { border-color: #e44d4d; box-shadow: 0 0 0 3px rgba(228,77,77,.09); }
.verify-resend { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.verify-resend > span { color: #999; font-size: 7px; }
.verify-resend button { padding: 0; border: 0; color: #c83d3d; background: transparent; font-size: 7px; font-weight: 700; cursor: pointer; }
.verify-resend button:disabled { color: #999; cursor: default; }
.verify-success p { max-width: 330px; margin-inline: auto; }
.auth-notice { margin-top: 18px; padding: 11px 13px; border-radius: 7px; font-size: 8px; line-height: 1.5; text-align: center; }
.auth-notice--success { color: #24734f; background: #ebf8f1; }
.auth-resend-form { text-align: center; }
.auth-resend-form > p { margin: 0; color: #888; font-size: 8px; }

/* Password reset */
.reset-card { width: min(540px,100%); }
.reset-card__icon { font-size: 27px; }
.reset-card > header strong { color: #555; }
.reset-password { display: grid; grid-template-columns: minmax(0,1fr) 38px; width: 100%; border: 1px solid #ddd; border-radius: 7px; background: #fff; transition: border-color .18s,box-shadow .18s; }
.reset-password:focus-within { border-color: #e44d4d; box-shadow: 0 0 0 3px rgba(228,77,77,.09); }
.reset-password input { min-width: 0; padding: 10px; border: 0; outline: 0; color: #444; background: transparent; font: inherit; font-size: 9px; }
.reset-password button { border: 0; color: #888; background: transparent; cursor: pointer; }
.reset-form label > small { display: block; margin-top: 5px; color: #aaa; font-size: 6px; line-height: 1.45; }
.reset-resend a { color: #c83d3d; font-size: 7px; font-weight: 700; }
.reset-success p { max-width: 330px; margin-inline: auto; }

@media (max-width: 480px) {
    .verify-code { gap: 5px; }
    .verify-code input { height: 43px; font-size: 15px; }
    .verify-resend { align-items: flex-start; flex-direction: column; }
}

/* Registration */
.register-page { display: grid; flex: 1; padding-block: 20px 40px; place-items: center; }
.register-card { width: min(700px,100%); padding: 36px 45px 27px; border-radius: 15px; background: #fff; box-shadow: 0 18px 55px rgba(65,38,38,.12); }
.register-card > header { text-align: center; }
.register-card > header > span { color: #e44d4d; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.register-card h1 { margin: 5px 0 7px; font-size: 26px; }
.register-card > header p { margin: 0; color: #888; font-size: 9px; }
.register-form { display: grid; gap: 14px; margin-top: 22px; }
.register-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.register-form label > span, .register-form legend { display: block; margin-bottom: 6px; color: #555; font-size: 8px; font-weight: 700; }
.register-form label b { color: #e44d4d; }
.register-form label > input, .register-password { width: 100%; border: 1px solid #ddd; border-radius: 7px; background: #fff; }
.register-form label > input { padding: 10px; outline: 0; color: #444; font: inherit; font-size: 9px; }
.register-form label > input:focus, .register-password:focus-within { border-color: #e44d4d; box-shadow: 0 0 0 3px rgba(228,77,77,.09); }
.register-password { display: grid; grid-template-columns: minmax(0,1fr) 38px; }
.register-password input { min-width: 0; padding: 10px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 9px; }
.register-password button { border: 0; color: #888; background: transparent; cursor: pointer; }
.password-strength { overflow: hidden; height: 3px; margin-top: 6px; border-radius: 2px; background: #eee; }
.password-strength i { display: block; width: 0; height: 100%; background: #d84a4a; transition: width .2s,background .2s; }
.password-strength i[data-score="3"] { background: #d79c2d; }
.password-strength i[data-score="4"] { background: #299568; }
.register-form label > small { display: block; margin-top: 4px; color: #aaa; font-size: 6px; }
.register-form fieldset { display: grid; grid-template-columns: minmax(210px,.8fr) minmax(0,1fr); align-items: end; gap: 13px; margin: 0; padding: 13px; border: 1px solid #eee; border-radius: 9px; background: #fafafa; }
.register-form legend { grid-column: 1/-1; margin: 0 0 0 -5px; padding: 0 5px; }
.register-policy { display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: start; gap: 8px; color: #777; font-size: 8px; line-height: 1.5; cursor: pointer; }
.register-policy input { width: 14px; height: 14px; margin: 1px 0 0; accent-color: #e44d4d; }
.register-policy a { color: #c83d3d; }
.register-error { min-height: 12px; margin: -5px 0; color: #c83d3d; font-size: 7px; text-align: center; }
.register-submit { width: 100%; padding: 11px; border: 0; border-radius: 20px; color: #fff; background: #e44d4d; font-size: 9px; font-weight: 800; cursor: pointer; }
.register-submit:hover { background: #c83d3d; }
.register-card > footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid #eee; text-align: center; }
.register-card > footer p { margin: 0; color: #999; font-size: 8px; }
.register-card > footer a { color: #c83d3d; font-weight: 700; }
.register-success { padding: 35px 0 15px; text-align: center; }
.register-success > span { display: grid; width: 60px; height: 60px; margin: 0 auto 13px; border-radius: 50%; color: #fff; background: #2e9768; font-size: 25px; place-items: center; }
.register-success h2 { margin: 0 0 7px; font-size: 22px; }
.register-success p { margin: 0 0 18px; color: #777; font-size: 9px; }
.register-success a { display: inline-block; padding: 10px 15px; border-radius: 18px; color: #fff; background: #e44d4d; font-size: 8px; font-weight: 800; text-decoration: none; }

/* Legal document */
.doc-login-link { padding: 8px 14px; border-radius: 17px; color: #fff; background: #e44d4d; font-size: 9px; font-weight: 700; text-decoration: none; }
.document-page { display: grid; grid-template-columns: 230px minmax(0,1fr); align-items: start; gap: 25px; flex: 1; padding-block: 28px 42px; }
.document-page > .document-content { grid-column: 2; grid-row: 1; }
.document-page > .document-sidebar { grid-column: 1; grid-row: 1; }
.document-sidebar { position: sticky; top: 20px; display: block; padding: 18px 14px; border-radius: 10px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.document-sidebar > span { color: #e44d4d; font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.document-sidebar h2 { margin: 5px 5px 10px; font-size: 15px; }
.document-sidebar nav { display: grid; }
.document-sidebar nav a { padding: 8px 6px; border-left: 2px solid transparent; color: #777; font-size: 9px; line-height: 1.35; text-decoration: none; }
.document-sidebar nav a:hover, .document-sidebar nav a.is-active { border-left-color: #e44d4d; color: #c83d3d; background: #fff6f6; }
.document-sidebar > button { width: 100%; margin-top: 13px; padding: 8px; border: 1px solid #ddd; border-radius: 5px; color: #666; background: #fff; font-size: 8px; cursor: pointer; }
.document-content { padding: clamp(25px,5vw,55px); border-radius: 11px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.document-content > header { padding-bottom: 22px; border-bottom: 1px solid #eee; }
.document-content > header > span { color: #e44d4d; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.document-content h1 { margin: 7px 0 8px; color: #292929; font-size: 31px; line-height: 1.18; }
.document-content > header p { margin: 0; color: #999; font-size: 11px; }
.document-notice { margin: 24px 0; padding: 16px 18px; border-left: 3px solid #e44d4d; border-radius: 0 7px 7px 0; background: #fff5f5; }
.document-notice strong { font-size: 13px; }
.document-notice p { margin: 5px 0 0; color: #666; font-size: 12px; line-height: 1.65; }
.document-content section { scroll-margin-top: 25px; padding: 9px 0 14px; }
.document-content section h2 { margin: 0 0 10px; color: #333; font-size: 19px; }
.document-content section p, .document-content section li { color: #555; font-size: 13px; line-height: 1.75; }
.document-content section p { margin: 0; }
.document-content section p + p { margin-top: 9px; }
.document-content section ul { margin: 10px 0 0; padding-left: 20px; }
.document-content section a { color: #c83d3d; }
.document-content blockquote { margin: 15px 0 0; padding: 13px 16px; border-left: 3px solid #d79c2d; color: #655b40; background: #fff9e9; font-size: 12px; line-height: 1.65; }
.document-body h2 { scroll-margin-top: 25px; margin: 18px 0 10px; color: #333; font-size: 19px; }
.document-body h3 { margin: 16px 0 8px; color: #3d3d3d; font-size: 16px; }
.document-body p, .document-body li { color: #555; font-size: 13px; line-height: 1.75; }
.document-body p { margin: 0 0 9px; }
.document-body ul, .document-body ol { margin: 10px 0; padding-left: 20px; }
.document-body a { color: #c83d3d; }
.document-content > footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 15px; padding-top: 18px; border-top: 1px solid #eee; }
.document-content > footer p { margin: 0; color: #999; font-size: 9px; }
.document-content > footer a { color: #c83d3d; font-size: 9px; font-weight: 700; }

@media (max-width: 768px) {
    .register-fields { grid-template-columns: 1fr; }
    .register-form fieldset { grid-template-columns: 1fr; }
    .document-page { grid-template-columns: 1fr; }
    .document-page > .document-content, .document-page > .document-sidebar { grid-column: 1; }
    .document-page > .document-sidebar { grid-row: 1; }
    .document-page > .document-content { grid-row: 2; }
    .document-sidebar { position: static; }
    .document-sidebar nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 480px) {
    .register-page { padding-inline: 0; padding-top: 5px; }
    .register-card { padding: 30px 19px 23px; border-radius: 0; }
    .register-card h1 { font-size: 22px; }
    .document-content { margin-inline: -16px; padding: 25px 18px; border-radius: 0; }
    .document-content h1 { font-size: 25px; }
    .document-sidebar nav { grid-template-columns: 1fr; }
    .document-content > footer { align-items: flex-start; flex-direction: column; }
}

@media print {
    .header, .footer, .document-sidebar { display: none !important; }
    .document-page { display: block; padding: 0; }
    .document-content { padding: 0; box-shadow: none; }
}

/* Static information page */
.static-page-layout { display: grid; grid-template-columns: minmax(0,1fr) 245px; align-items: start; gap: 25px; flex: 1; padding-block: 28px 42px; }
.static-page { min-width: 0; overflow: hidden; padding: 0; border-radius: 11px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.static-page__hero { position: relative; display: flex; min-height: 330px; overflow: hidden; padding: 28px clamp(24px,5vw,50px); color: #fff; flex-direction: column; justify-content: space-between; }
.static-page__hero > img, .static-page__hero > div:first-of-type { position: absolute; inset: 0; width: 100%; height: 100%; }
.static-page__hero > img { object-fit: cover; }
.static-page__hero > div:first-of-type { background: linear-gradient(120deg,rgba(15,15,15,.83),rgba(20,20,20,.32)); }
.static-page__hero nav, .static-page__heading { position: relative; z-index: 1; }
.static-page__hero nav { display: flex; gap: 7px; color: rgba(255,255,255,.65); font-size: 8px; }
.static-page__hero nav a { color: #fff; text-decoration: none; }
.static-page__heading > span { color: #ff9999; font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.static-page__heading h1 { max-width: 650px; margin: 7px 0 8px; font-size: clamp(30px,5vw,48px); line-height: 1.08; }
.static-page__heading p { margin: 0; color: rgba(255,255,255,.8); font-size: 11px; }
.static-page__body { padding: clamp(25px,5vw,52px); }
.static-page__body > p { margin: 0; color: #555; font-size: 13px; line-height: 1.8; }
.static-page__body > p + p { margin-top: 13px; }
.static-page__body p.static-page__lead { color: #333; font-size: 17px; font-weight: 500; line-height: 1.65; }
.static-page__body h2 { margin: 32px 0 11px; color: #2d2d2d; font-size: 22px; }
.static-page__body > figure { margin: 28px 0; }
.static-page__body > figure img { display: block; width: 100%; max-height: 430px; border-radius: 8px; object-fit: cover; }
.static-page__body > figure figcaption { margin-top: 7px; color: #999; font-size: 9px; text-align: center; }
.static-page__body blockquote { margin: 28px 0; padding: 20px 23px; border-left: 4px solid #e44d4d; border-radius: 0 8px 8px 0; background: #fff5f5; }
.static-page__body blockquote p { margin: 0; color: #594545; font-family: Georgia,serif; font-size: 16px; font-style: italic; line-height: 1.65; }
.static-page__features { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.static-page__features li { padding: 15px; border: 1px solid #eee; border-radius: 7px; background: #fafafa; }
.static-page__features strong, .static-page__features span { display: block; }
.static-page__features strong { color: #333; font-size: 12px; }
.static-page__features span { margin-top: 5px; color: #777; font-size: 10px; line-height: 1.5; }
.static-page__body > ol { display: grid; gap: 8px; margin: 0; padding-left: 22px; color: #555; font-size: 12px; line-height: 1.65; }
.static-page__body > ol li::marker { color: #e44d4d; font-weight: 800; }
.static-page__rich-text { color: #555; font-size: 13px; line-height: 1.8; }
.static-page__rich-text > :first-child { margin-top: 0; }
.static-page__rich-text > :last-child { margin-bottom: 0; }
.static-page__rich-text h2 { margin: 32px 0 11px; color: #2d2d2d; font-size: 22px; }
.static-page__rich-text h3 { margin: 25px 0 9px; color: #333; font-size: 18px; }
.static-page__rich-text p { margin: 0 0 13px; }
.static-page__rich-text img { max-width: 100%; height: auto; border-radius: 8px; }
.static-page__rich-text a { color: #c83d3d; }
.static-page__rich-text blockquote { margin: 28px 0; padding: 20px 23px; border-left: 4px solid #e44d4d; border-radius: 0 8px 8px 0; background: #fff5f5; }
.static-page__rich-text ul, .static-page__rich-text ol { padding-left: 22px; }
.static-page__note { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px 18px; margin-top: 32px; padding: 19px; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#3a3a3f,#1f1f23); }
.static-page__note strong { font-size: 14px; }
.static-page__note p { grid-column: 1; margin: 0; color: #bbb; font-size: 10px; }
.static-page__note a { grid-column: 2; grid-row: 1/3; padding: 9px 13px; border-radius: 17px; color: #fff; background: #e44d4d; font-size: 8px; font-weight: 800; text-decoration: none; }
.static-page__body > footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 30px; padding-top: 17px; border-top: 1px solid #eee; color: #999; font-size: 8px; }
.static-page__body > footer a { color: #c83d3d; font-weight: 700; text-decoration: none; }
.static-page-sidebar { position: sticky; top: 20px; display: grid; gap: 15px; }
.static-page-sidebar > nav, .static-page-sidebar > section { padding: 17px; border-radius: 9px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.static-page-sidebar h2 { margin: 0 0 10px; font-size: 14px; }
.static-page-sidebar > nav { display: grid; }
.static-page-sidebar > nav h2 { padding-inline: 7px; }
.static-page-sidebar > nav a { padding: 8px 7px; border-left: 2px solid transparent; color: #666; font-size: 9px; text-decoration: none; }
.static-page-sidebar > nav a:hover, .static-page-sidebar > nav a.is-active { border-left-color: #e44d4d; color: #c83d3d; background: #fff5f5; }
.static-page-sidebar > section { color: #fff; background: linear-gradient(145deg,#e04b4b,#a82929); }
.static-page-sidebar > section > span { color: #ffd2d2; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.static-page-sidebar > section h2 { margin: 5px 0; }
.static-page-sidebar > section p { margin: 0 0 10px; color: #ffd6d6; font-size: 8px; }
.static-page-sidebar > section a { color: #fff; font-size: 9px; font-weight: 700; }

@media (max-width: 800px) {
    .static-page-layout { grid-template-columns: 1fr; }
    .static-page-sidebar { position: static; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    .static-page-layout { padding-top: 15px; }
    .static-page { margin-inline: -16px; border-radius: 0; }
    .static-page__hero { min-height: 280px; }
    .static-page__body p.static-page__lead { font-size: 15px; }
    .static-page__features { grid-template-columns: 1fr; }
    .static-page__note { grid-template-columns: 1fr; }
    .static-page__note a { grid-column: 1; grid-row: auto; margin-top: 8px; text-align: center; }
    .static-page-sidebar { grid-template-columns: 1fr; }
}

/* Product catalog and article category archive */
.category-page-layout { display: block; padding-block: 0; }
.category-page-content { padding: 0; background: transparent; }
.category-page-content > .article-list { display: block; }
.catalog-layout { display: grid; grid-template-columns: 230px minmax(0,1fr); align-items: start; gap: 26px; flex: 1; padding-block: 24px 42px; }
.catalog-content { min-width: 0; }
.archive-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding: 21px 23px; border-radius: 11px; color: #fff; background: linear-gradient(135deg,#3b3b40,#1e1e22); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.archive-heading > div > span { color: #ff9292; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.archive-heading h1 { margin: 5px 0; font-size: 25px; }
.archive-heading p { margin: 0; color: #bbb; font-size: 9px; }
.archive-heading > strong { flex: none; padding: 7px 10px; border-radius: 14px; color: #fff; background: rgba(255,255,255,.1); font-size: 8px; }
.catalog-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; margin-bottom: 17px; }
.catalog-toolbar .shop-search { margin: 0; }
.catalog-toolbar select, .article-archive-toolbar select { padding: 10px 30px 10px 11px; border: 1px solid #ddd; border-radius: 7px; color: #666; background: #fff; font: inherit; font-size: 8px; }
.catalog-product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.catalog-pagination { margin-top: 22px; }
.blog-category-sidebar { position: sticky; top: 20px; display: grid; gap: 15px; }
.blog-category-sidebar > nav, .blog-category-sidebar > section { padding: 16px 11px; border-radius: 9px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.blog-category-sidebar h2 { margin: 0 7px 10px; font-size: 13px; }
.blog-category-sidebar nav button, .blog-category-sidebar nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 8px; border: 0; border-radius: 5px; color: #666; background: transparent; font-size: 9px; text-align: left; text-decoration: none; cursor: pointer; }
.blog-category-sidebar nav button strong, .blog-category-sidebar nav a strong { color: #aaa; font-size: 8px; }
.blog-category-sidebar nav button:hover, .blog-category-sidebar nav button.is-active, .blog-category-sidebar nav a:hover, .blog-category-sidebar nav a.is-active { color: #c83d3d; background: #fff4f4; }
.blog-category-sidebar section > div { display: flex; flex-wrap: wrap; gap: 5px; padding-inline: 6px; }
.blog-category-sidebar section a { padding: 5px 7px; border-radius: 11px; color: #777; background: #f3f3f3; font-size: 7px; text-decoration: none; }
.blog-category-sidebar section a:hover, .blog-category-sidebar section a.is-active { color: #fff; background: #e44d4d; }
.archive-heading--blog { background: linear-gradient(135deg,#e45454,#a82b2b); }
.archive-heading--blog > div > span { color: #ffd0d0; }
.archive-heading--blog p { color: #ffd7d7; }
.article-archive-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; margin-bottom: 15px; }
.article-archive-toolbar form { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; padding: 6px 6px 6px 12px; border: 1px solid #ddd; border-radius: 20px; background: #fff; }
.article-archive-toolbar form > span { color: #999; }
.article-archive-toolbar input { min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 9px; }
.article-archive-toolbar form button { padding: 8px 15px; border: 0; border-radius: 16px; color: #fff; background: #e44d4d; font-size: 8px; font-weight: 700; cursor: pointer; }
.blog-archive-list { display: grid; gap: 13px; }
.blog-archive-card { display: grid; grid-template-columns: 235px minmax(0,1fr); min-height: 180px; overflow: hidden; border-radius: 9px; background: #fff; box-shadow: 0 3px 14px rgba(0,0,0,.05); transition: transform .2s,box-shadow .2s; }
.blog-archive-card[hidden] { display: none; }
.blog-archive-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.09); }
.blog-archive-card__image { position: relative; display: block; min-height: 180px; overflow: hidden; background: #ddd; }
.blog-archive-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.blog-archive-card:hover .blog-archive-card__image img { transform: scale(1.025); }
.blog-archive-card__image span { position: absolute; top: 11px; left: 11px; padding: 5px 8px; border-radius: 11px; color: #fff; background: #e44d4d; font-size: 7px; font-weight: 800; }
.blog-archive-card > div { display: flex; min-width: 0; padding: 17px 18px 14px; flex-direction: column; }
.blog-archive-card__meta { display: flex; flex-wrap: wrap; gap: 8px; color: #999; font-size: 7px; }
.blog-archive-card h2 { margin: 7px 0; font-size: 16px; line-height: 1.3; }
.blog-archive-card h2 a { color: #333; text-decoration: none; }
.blog-archive-card > div > p { margin: 0; color: #777; font-size: 9px; line-height: 1.55; }
.blog-archive-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.blog-archive-card footer > a { display: flex; align-items: center; gap: 6px; color: #555; font-size: 8px; font-weight: 700; text-decoration: none; }
.blog-archive-card__author { display: flex; align-items: center; gap: 6px; color: #555; font-size: 8px; font-weight: 700; }
.blog-archive-card footer img { width: 25px; height: 25px; border-radius: 50%; object-fit: cover; }
.blog-archive-card footer button { border: 0; color: #888; background: transparent; font-size: 7px; cursor: pointer; }
.blog-archive-card footer button.is-favorite { color: #d83d3d; }
.category-pagination { margin-top: 22px; }

@media (max-width: 1020px) {
    .catalog-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .blog-archive-card { grid-template-columns: 190px minmax(0,1fr); }
}

@media (max-width: 768px) {
    .catalog-layout { grid-template-columns: 1fr; padding-top: 18px; }
    .catalog-layout > .shop-sidebar { grid-template-columns: 1fr 1fr; order: 1; }
    .blog-category-sidebar { position: static; grid-template-columns: 1fr 1fr; order: 1; }
}

@media (max-width: 540px) {
    .archive-heading { align-items: flex-start; }
    .archive-heading h1 { font-size: 21px; }
    .archive-heading > strong { display: none; }
    .catalog-toolbar, .article-archive-toolbar { grid-template-columns: 1fr; }
    .catalog-toolbar select, .article-archive-toolbar select { width: 100%; }
    .catalog-product-grid { gap: 10px; }
    .catalog-layout > .shop-sidebar, .blog-category-sidebar { grid-template-columns: 1fr; }
    .blog-archive-card { grid-template-columns: 125px minmax(0,1fr); min-height: 150px; }
    .blog-archive-card__image { min-height: 150px; }
    .blog-archive-card > div { padding: 12px; }
    .blog-archive-card h2 { font-size: 12px; }
    .blog-archive-card > div > p { display: none; }
    .blog-archive-card__meta span:last-child { display: none; }
    .blog-archive-card footer button { font-size: 0; }
    .blog-archive-card footer button::before { content: "☆"; font-size: 15px; }
}

/* User settings */
.settings-page { grid-template-columns: 230px minmax(0,1fr); }
.settings-page > .settings-content { grid-column: 2; grid-row: 1; padding: 0; background: transparent; }
.settings-page > .settings-sidebar { grid-column: 1; grid-row: 1; }
.settings-content > .article-list, .settings-profile-form { display: grid; gap: 16px; }
.settings-anchor-nav { display: grid; padding: 10px; border-radius: 9px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.settings-anchor-nav a { padding: 8px; border-left: 2px solid transparent; color: #777; font-size: 8px; text-decoration: none; }
.settings-anchor-nav a:hover { border-left-color: #e44d4d; color: #c83d3d; background: #fff5f5; }
.settings-content { display: grid; min-width: 0; gap: 16px; }
.settings-heading { padding: 21px 23px; border-radius: 11px; color: #fff; background: linear-gradient(135deg,#3b3b40,#1e1e22); box-shadow: 0 5px 18px rgba(0,0,0,.1); }
.settings-heading > span { color: #ff9292; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.settings-heading h1 { margin: 5px 0; font-size: 24px; }
.settings-heading p { margin: 0; color: #bbb; font-size: 9px; }
.settings-card { scroll-margin-top: 20px; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.settings-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 18px 20px; border-bottom: 1px solid #eee; }
.settings-card > header h2 { margin: 0; font-size: 16px; }
.settings-card > header p { margin: 4px 0 0; color: #999; font-size: 8px; }
.settings-card > header > span { padding: 5px 8px; border-radius: 11px; color: #c83d3d; background: #fff0f0; font-size: 7px; font-weight: 700; }
.settings-avatar { display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: center; gap: 15px; padding: 18px 20px; border-bottom: 1px solid #eee; }
.settings-avatar > img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
.settings-avatar strong { font-size: 10px; }
.settings-avatar p { margin: 4px 0 10px; color: #999; font-size: 7px; }
.settings-avatar div > div { display: flex; gap: 6px; }
.settings-avatar label span, .settings-avatar button { display: inline-block; padding: 7px 10px; border: 1px solid #ddd; border-radius: 14px; color: #666; background: #fff; font-size: 7px; font-weight: 700; cursor: pointer; }
.settings-avatar label span { color: #fff; border-color: #e44d4d; background: #e44d4d; }
.settings-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 19px 20px; }
.settings-fields label > span, .settings-signature > span, .settings-social-links label > span { display: block; margin-bottom: 6px; color: #555; font-size: 8px; font-weight: 700; }
.settings-fields input, .settings-fields select, .settings-fields textarea, .settings-signature textarea, .settings-social-links input { width: 100%; padding: 9px 10px; border: 1px solid #ddd; border-radius: 6px; outline: 0; color: #444; background: #fff; font: inherit; font-size: 9px; }
.settings-fields textarea, .settings-signature textarea { line-height: 1.55; resize: vertical; }
.settings-fields input:focus, .settings-fields select:focus, .settings-fields textarea:focus, .settings-signature textarea:focus, .settings-social-links input:focus { border-color: #e44d4d; box-shadow: 0 0 0 3px rgba(228,77,77,.08); }
.settings-field-wide { grid-column: 1/-1; }
.settings-fields label > small, .settings-signature > small { display: block; margin-top: 4px; color: #aaa; font-size: 7px; text-align: right; }
.settings-password { display: grid; grid-template-columns: minmax(0,1fr) 35px; border: 1px solid #ddd; border-radius: 6px; }
.settings-password:focus-within { border-color: #e44d4d; box-shadow: 0 0 0 3px rgba(228,77,77,.08); }
.settings-password input { border: 0; box-shadow: none !important; }
.settings-password button { border: 0; color: #888; background: transparent; cursor: pointer; }
.settings-card > footer, .settings-social-links > footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 13px 20px; border-top: 1px solid #eee; background: #fafafa; }
.settings-card > footer > a { margin-right: auto; color: #c83d3d; font-size: 8px; font-weight: 700; text-decoration: none; }
.settings-card > footer span, .settings-social-links > footer span { color: #27835a; font-size: 8px; }
.settings-card > footer span.is-error { color: #c83d3d; }
.settings-card > footer button, .settings-social-links > footer button { padding: 8px 12px; border: 0; border-radius: 16px; color: #fff; background: #e44d4d; font-size: 8px; font-weight: 700; cursor: pointer; }
.settings-social-login { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 18px 20px; border-bottom: 1px solid #eee; }
.settings-social-login article { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 12px; border: 1px solid #eee; border-radius: 7px; }
.settings-social-icon { display: grid; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-size: 9px; place-items: center; }
.settings-social-icon--vk { background: #2787f5; }
.settings-social-icon--ya { background: #fc3f1d; }
.settings-social-login h3 { margin: 0; font-size: 10px; }
.settings-social-login p { margin: 3px 0 0; color: #999; font-size: 7px; }
.settings-connection-state { display: grid; width: 24px; height: 24px; border-radius: 50%; color: #888; background: #eee; font-size: 9px; place-items: center; }
.settings-connection-state.is-connected { color: #fff; background: #2e9768; }
.settings-alert { padding: 12px 15px; border-radius: 8px; font-size: 9px; line-height: 1.5; }
.settings-alert ul { margin: 6px 0 0; padding-left: 18px; }
.settings-alert--success { color: #246b4b; background: #eaf7ef; }
.settings-alert--error { color: #9c2929; background: #fff0f0; }
.settings-field-error { display: block !important; margin-top: 5px !important; color: #c83d3d !important; font-size: 7px !important; text-align: left !important; }
.settings-switch { position: relative; display: block; flex: none; width: 34px; height: 19px; cursor: pointer; }
.settings-switch input { position: absolute; opacity: 0; }
.settings-switch i { position: absolute; inset: 0; border-radius: 10px; background: #ccc; transition: background .18s; }
.settings-switch i::after { position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; content: ""; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .18s; }
.settings-switch input:checked + i { background: #e44d4d; }
.settings-switch input:checked + i::after { transform: translateX(15px); }
.settings-social-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; padding: 18px 20px 0; }
.settings-social-links label > div { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; overflow: hidden; border: 1px solid #ddd; border-radius: 6px; }
.settings-social-links label > div b { padding-left: 9px; color: #999; font-size: 8px; font-weight: 400; }
.settings-social-links label > div input { border: 0; box-shadow: none; }
.settings-social-links > footer { grid-column: 1/-1; margin-inline: -20px; }
.settings-signature { display: block; padding: 19px 20px; }
.settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 20px; border-bottom: 1px solid #eee; }
.settings-toggle-row strong, .settings-theme > strong { font-size: 10px; }
.settings-toggle-row p, .settings-theme > p { margin: 4px 0 0; color: #999; font-size: 7px; }
.settings-theme { padding: 18px 20px 20px; }
.settings-theme > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin-top: 12px; }
.settings-theme label { cursor: pointer; }
.settings-theme input { position: absolute; opacity: 0; }
.theme-preview { display: block; overflow: hidden; padding: 9px; border: 2px solid transparent; border-radius: 8px; color: #444; background: #f2f2f2; }
.theme-preview > i { display: block; height: 72px; margin-bottom: 8px; border-radius: 5px; background: linear-gradient(#fff 0 22%,#f1f1f1 22%); box-shadow: inset 20px 0 #e4e4e4; }
.theme-preview--dark { color: #fff; background: #2a2a2e; }
.theme-preview--dark > i { background: linear-gradient(#28282c 0 22%,#202024 22%); box-shadow: inset 20px 0 #37373c; }
.theme-preview b { font-size: 8px; }
.settings-theme input:checked + .theme-preview { border-color: #e44d4d; }
.settings-page[data-selected-theme="dark"] .settings-heading { background: linear-gradient(135deg,#27272b,#111); }

@media (max-width: 768px) {
    .settings-page { grid-template-columns: 1fr; }
    .settings-page > .settings-content, .settings-page > .settings-sidebar { grid-column: 1; }
    .settings-page > .settings-sidebar { grid-row: 1; }
    .settings-page > .settings-content { grid-row: 2; }
}

@media (max-width: 540px) {
    .settings-fields, .settings-social-login, .settings-social-links { grid-template-columns: 1fr; }
    .settings-field-wide { grid-column: auto; }
    .settings-avatar { grid-template-columns: 75px minmax(0,1fr); padding-inline: 15px; }
    .settings-avatar > img { width: 75px; height: 75px; }
    .settings-social-links > footer { grid-column: 1; }
    .settings-card > header { padding-inline: 15px; }
    .settings-card > header > span { display: none; }
    .settings-fields, .settings-signature, .settings-social-login, .settings-theme, .settings-toggle-row { padding-inline: 15px; }
}