/**
 * UI v2 shell styles — Header / Footer / Nav redesign.
 * Loaded after common.css; scoped by .app-header-shell / #app-footer / #app-nav.app-nav-shell.
 *
 * 壳层内容宽（一处改，Header/Footer/Nav/Mega 同步）：
 *   --ui-v2-shell-min  1256px  笔记本 / 常规屏
 *   --ui-v2-shell-max  1440px  大屏上限（设计稿）
 *   < 1600px 视口 → min；≥ 1600px → max
 *
 * ── 主题色（PC v2）────────────────────────────────────────────────
 * 全站主色 token：common.css :root --dx-primary-color（= --ui-v2-primary）。
 * 本文件以下选择器仍写死 #f93c79，改主色时需同步或改为 var(--ui-v2-primary)。
 *
 * 【硬编码 #f93c79 清单 — 全局搜索本文件】
 *   #app-footer .footer-address a
 *   #app-nav .app-nav-item-wrap.is-active / :hover .app-nav-item
 *   #app-nav .app-nav-subpanel__link:hover / .is-active
 *   .list-page-v2__sidebar-link:hover / .is-active
 *   .list-page-v2__sidebar-link.is-active::before（圆点 background）
 *   .list-page-v2__crumb-link:hover / .list-page-v2__crumb-current
 *   .list-page-v2 .dx-pager 翻页钮 background（含 hover）
 */
:root {
    --ui-v2-shell-min: 1256px;
    --ui-v2-shell-max: 1440px;
    --ui-v2-shell-width: var(--ui-v2-shell-min);
    /* --ui-v2-primary / --ui-v2-primary-hover 定义在 common.css :root */
}

@media (min-width: 1600px) {
    :root {
        --ui-v2-shell-width: var(--ui-v2-shell-max);
    }
}

/* ===== Header v2 ===== */
/*
 * 结构说明（headerv3.phtml）：
 *   #app-header.app-header-shell  → 文档流占位 + 全宽背景
 *   .header                        → fixed 可视顶栏（铺满视口）
 *   .app-header-container           → 壳层内容区居中（见 --ui-v2-shell-width）
 *   .app-header-inner.app-header--v2 → 实际行内布局（勿用 .app-header，common.css 锁死 60px）
 */
#app-header.app-header-shell {
    --ui-v2-header-bg: #1a1a1a;
    --dx-header-height: 65px;
    width: 100%;
    background-color: var(--ui-v2-header-bg);
    padding-top: var(--dx-header-height);
}

#app-header.app-header-shell .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* 不用 100vw：100vw 含滚动条槽宽，会被 :root{overflow-x:hidden} 裁掉右侧（user 图标） */
    width: auto;
    max-width: none;
    box-sizing: border-box;
    z-index: var(--dx-header-index);
    background-color: var(--ui-v2-header-bg);
}

#app-header.app-header-shell .app-header-container,
#app-footer .footer-container,
#app-nav.app-nav-shell .app-nav-container {
    display: block;
    width: 100%;
    max-width: var(--ui-v2-shell-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

#app-header.app-header-shell .app-header-inner {
    position: relative;
    width: 100%;
    height: 65px;
    min-height: 65px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    box-sizing: border-box;
}

#app-header.app-header-shell .app-header-logo {
    flex: 1;
    display: flex;
    justify-content: center;
}

#app-header.app-header-shell .app-header-logo .app-logo {
    width: 91px;
    height: 47px;
    display: block;
}

#app-header.app-header-shell .app-header-search {
    display: none;
}

#app-header.app-header-shell .app-header-search-control {
    position: relative;
    width: 499px;
    height: 35.5px;
    background: #2a2a2a;
    border: 1px solid #3b3b3b;
    border-radius: 20px;
    box-sizing: border-box;
}

#app-header.app-header-shell .app-header-search-control .input-control-icon-left {
    position: absolute;
    left: 14px;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    margin: 0;
    padding: 0;
    line-height: 0;
    opacity: 1;
    transform: translateY(-50%);
}

#app-header.app-header-shell .app-header-search-control .app-header-search-icon {
    display: block;
    width: 13px;
    height: 13px;
}

#app-header.app-header-shell .app-header-search-control .form-control {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 14px 0 35px;
    background: transparent;
    border: none;
    color: #fff;
    font-weight: 400;
    font-size: 13px;
    line-height: 19.5px;
    letter-spacing: 0;
}

#app-header.app-header-shell .app-header-search-control.has-icon-left > .form-control {
    padding-left: 35px;
}

#app-header.app-header-shell .app-header-search-control .form-control::placeholder {
    color: #888;
    font-weight: 400;
    font-size: 13px;
    line-height: 19.5px;
}

#app-header.app-header-shell .app-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

#app-header.app-header-shell .header-user-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

#app-header.app-header-shell .header-user-icon,
#app-header.app-header-shell .header-user-avatar {
    display: block;
    width: 34px;
    height: 34px;
}

@media (min-width: 768px) {
    #app-header.app-header-shell .app-header-inner {
        display: grid;
        grid-template-columns: 91px 1fr auto;
        grid-template-areas: "logo search actions";
        align-items: center;
        gap: 0;
        height: 65px;
        min-height: 65px;
        padding: 0;
    }

    #app-header.app-header-shell .btn-menu-collapse {
        display: none;
    }

    #app-header.app-header-shell .app-header-logo {
        grid-area: logo;
        flex: none;
        justify-content: flex-start;
    }

    #app-header.app-header-shell .app-header-search {
        grid-area: search;
        display: flex;
        justify-content: center;
        justify-self: center;
    }

    #app-header.app-header-shell .app-header-actions {
        grid-area: actions;
        justify-self: end;
    }
}

@media (max-width: 767px) {
    #app-header.app-header-shell .app-header-container,
    #app-footer .footer-container,
    #app-nav.app-nav-shell .app-nav-container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

.dx-drawer .app-logo--drawer {
    height: 26px;
    width: auto;
}

/* ===== Footer v2 ===== */
/*
 * @ai-modified 2026-07-29 底栏留白收敛：原写死 height/min-height 305px，
 * 内容（Logo 73 + 版权 + 三行地址 ≈ 215px）之下空出近 90px。改为内容自适应 +
 * 24px 收尾留白；两列顶距同步 78px → 32px，与 Logo 区 padding-top 对齐。
 */
#app-footer .footer-main {
    background: #111;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    margin-top: 16px;
    padding: 0 0 24px;
}

#app-footer .footer-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #app-footer .footer-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
}

#app-footer .footer-brand {
    padding-top: 32px;
}

#app-footer .footer-brand .footer-logo {
    display: block;
    margin: 0 0 10px;
}

#app-footer .footer-brand .footer-logo img {
    width: 140px;
    height: 73px;
    display: block;
}

#app-footer .footer-copyright {
    margin: 0;
    font-weight: 400;
    font-size: 12px;
    line-height: 21.6px;
    letter-spacing: 0;
    color: #555555;
}

#app-footer .footer-address {
    margin-top: 12px;
    font-weight: 400;
    font-size: 12px;
    line-height: 21.6px;
    letter-spacing: 0;
    color: #555555;
}

#app-footer .footer-address p {
    margin: 0;
}

#app-footer .footer-address a {
    color: #f93c79;
    text-decoration: none;
}

#app-footer .footer-address a:hover {
    text-decoration: underline;
}

#app-footer .footer-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 60px;
    padding-top: 32px;
    box-sizing: border-box;
}

#app-footer .footer-col--other {
    width: 80px;
    flex-shrink: 0;
    box-sizing: border-box;
}

#app-footer .footer-col-title {
    margin: 0 0 12px;
    font-weight: 600;
    font-size: 16px;
    line-height: 19.5px;
    letter-spacing: 0.5px;
    color: #dddddd;
}

#app-footer .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#app-footer .footer-col li + li {
    margin-top: 8px;
}

#app-footer .footer-col a {
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0;
    color: #656565;
    text-decoration: none;
}

#app-footer .footer-col a:hover {
    color: #dddddd;
}

@media (max-width: 767px) {
    #app-footer .footer-nav {
        padding-top: 24px;
    }
}

/* 主体内容区与壳层同宽：后续页面改版时给 main 加此类，覆盖 common.css 的 1280px dx-container */
.app-shell-container {
    width: 100%;
    max-width: var(--ui-v2-shell-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (min-width: 1280px) {
    .app-shell-container.dx-container {
        width: 100%;
        max-width: var(--ui-v2-shell-width);
    }
}

@media (max-width: 767px) {
    .app-shell-container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ===== Nav v2（一级栏 + 二级面板） ===== */
/*
 * 隔离约定：两个二级面板均使用 app-nav-subpanel-wrap + app-nav-subpanel__*
 *   NAV_SUBPANEL_VIDEO_*    → 好色视频（$hots）
 *   NAV_SUBPANEL_FEATURED_* → 精选分类（UI 静态 6 项，链接降级匹配 $cs）
 */
/*
 * @ai-modified 2026-07-29 一级导航（含二级分类面板）滚动时常驻：
 * position:sticky 吸附在 fixed 顶栏（.header 高 65px = --dx-header-height）下沿。
 * 顶栏 z-index 101（common.css --dx-header-index），此处 100，滚动时顶栏仍压住导航。
 * H5 导航本就 `hide md:block`，无需断点隔离。
 */
#app-nav.app-nav-shell {
    position: sticky;
    top: 65px;
    z-index: 100;
    background: #1a1a1a;
    border-top: 1px solid #ffd21a1f;
    border-bottom: 1px solid #ffd21a1f;
    box-sizing: border-box;
}

#app-nav.app-nav-shell .app-nav-list {
    display: flex;
    align-items: center;
    gap: 60px;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 44px;
}

#app-nav.app-nav-shell .app-nav-item-wrap {
    position: relative;
    flex: none;
    height: 100%;
}

#app-nav.app-nav-shell .app-nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 16px;
    line-height: 19.5px;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
}

#app-nav.app-nav-shell .app-nav-item-wrap.is-active .app-nav-item,
#app-nav.app-nav-shell .app-nav-item-wrap:hover .app-nav-item {
    color: #f93c79;
    background: transparent;
    border-color: transparent;
}

#app-nav.app-nav-shell .app-nav-caret {
    display: block;
    width: 10px;
    height: 6px;
    flex-shrink: 0;
    color: inherit;
    transition: transform 0.2s ease;
}

#app-nav.app-nav-shell .app-nav-item-wrap.is-enter .app-nav-caret,
#app-nav.app-nav-shell .app-nav-item-wrap:hover .app-nav-caret {
    transform: rotate(180deg);
}

#app-nav.app-nav-shell .app-nav-item:hover {
    background: transparent;
    border-color: transparent;
}

#app-nav.app-nav-shell .app-nav-item:hover .app-nav-caret {
    color: inherit;
}

/* --- 二级 subpanel（好色视频 / 精选分类共用） --- */
#app-nav.app-nav-shell .app-nav-subpanel-wrap {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: auto;
    width: auto;
    margin: 0;
    padding: 0;
    transform: none;
    background: transparent;
    font-size: 16px;
    z-index: 101;
}

#app-nav.app-nav-shell .app-nav-item-wrap.has-items > .app-nav-subpanel-wrap {
    margin-top: 0;
    padding-top: 0;
}

#app-nav.app-nav-shell .has-items:hover > .app-nav-subpanel-wrap,
#app-nav.app-nav-shell .has-items.is-enter > .app-nav-subpanel-wrap {
    display: block;
}

#app-nav.app-nav-shell .app-nav-subpanel {
    box-sizing: border-box;
    width: auto;
    min-width: 308px;
    max-width: min(760px, calc(100vw - 32px));
    height: auto;
    min-height: 165px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding: 20px 50px 25px 25px;
    border-radius: 8px;
    background: #1a1a1a;
}

#app-nav.app-nav-shell .app-nav-subpanel__cols {
    height: 100%;
}

/* ≤6 项：保持 2 列 × 3 行的原有版式（好色视频） */
#app-nav.app-nav-shell .app-nav-subpanel__list {
    display: grid;
    grid-template-rows: repeat(3, minmax(24px, auto));
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, max-content);
    justify-content: space-between;
    column-gap: 32px;
    row-gap: 24px;
    align-content: start;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* >6 项：4 列按行铺开、行数不限，条目再多也能全部展示（精选分类） */
#app-nav.app-nav-shell .app-nav-subpanel-wrap--wide .app-nav-subpanel__list {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(4, minmax(88px, 1fr));
    justify-content: start;
    column-gap: 40px;
    row-gap: 18px;
}

#app-nav.app-nav-shell .app-nav-subpanel__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ffffff;
    font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.48px;
    text-decoration: none;
    white-space: nowrap;
    pointer-events: auto;
    cursor: pointer;
    background: transparent;
}

#app-nav.app-nav-shell .app-nav-subpanel__link:hover,
#app-nav.app-nav-shell .app-nav-subpanel__link.is-active {
    color: #f93c79;
    background: transparent;
}

#app-nav.app-nav-shell .app-nav-subpanel__label {
    color: inherit;
}

#app-nav.app-nav-shell .app-nav-subpanel__icon {
    display: block;
    width: 18px !important;
    height: 18px !important;
    max-width: none;
    flex-shrink: 0;
    object-fit: contain;
}

#app-nav.app-nav-shell .app-nav-subpanel__icon--on {
    display: none;
}

#app-nav.app-nav-shell .app-nav-subpanel__link:hover .app-nav-subpanel__icon:not(.app-nav-subpanel__icon--on),
#app-nav.app-nav-shell .app-nav-subpanel__link.is-active .app-nav-subpanel__icon:not(.app-nav-subpanel__icon--on) {
    display: none;
}

#app-nav.app-nav-shell .app-nav-subpanel__link:hover .app-nav-subpanel__icon--on,
#app-nav.app-nav-shell .app-nav-subpanel__link.is-active .app-nav-subpanel__icon--on {
    display: block;
}

/* ===== List page v2（PC 列表主体 · 好色视频/精选分类） ===== */
@media (min-width: 768px) {
    /* videov3 保留老 PC 结构不动，用 v2 壳层覆盖展示 */
    main.dx-container > .grid.grid-cols-6 {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .list-page-v2 {
        display: none !important;
    }
}

.list-page-v2 {
    box-sizing: border-box;
    padding-bottom: 32px;
}

.list-page-v2__layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.list-page-v2__sidebar {
    flex: 0 0 191px;
    width: 191px;
    min-height: 610px;
    box-sizing: border-box;
    padding: 12px;
    background: #222222;
}

.list-page-v2__sidebar-label {
    margin: 0 0 12px;
    font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 16.5px;
    letter-spacing: 0.94px;
    color: #999999;
}

.list-page-v2__sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.list-page-v2__sidebar-nav > li {
    width: 100%;
}

.list-page-v2__sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 20px 8px 10px;
    border-radius: 10px;
    font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #cccccc;
    text-decoration: none;
    background: transparent;
    transition: color 0.15s ease, background 0.15s ease;
}

.list-page-v2__sidebar-link:hover,
.list-page-v2__sidebar-link.is-active {
    color: #f93c79;
    background: #8b8b8b1f;
}

/* 竖条：距链接右缘 12px */
.list-page-v2__sidebar-link:hover::after,
.list-page-v2__sidebar-link.is-active::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    border-radius: 9999px;
    background: #f93c79;
    opacity: 1;
}

.list-page-v2__sidebar-icon {
    display: block;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    object-fit: contain;
}

.list-page-v2__sidebar-icon--on {
    display: none;
}

.list-page-v2__sidebar-link:hover .list-page-v2__sidebar-icon:not(.list-page-v2__sidebar-icon--on),
.list-page-v2__sidebar-link.is-active .list-page-v2__sidebar-icon:not(.list-page-v2__sidebar-icon--on) {
    display: none;
}

.list-page-v2__sidebar-link:hover .list-page-v2__sidebar-icon--on,
.list-page-v2__sidebar-link.is-active .list-page-v2__sidebar-icon--on {
    display: block;
}

.list-page-v2__main {
    flex: 1;
    min-width: 0;
    padding-top: 13px;
}

.list-page-v2__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 13px;
    font-size: 13px;
    line-height: 20px;
    color: #999999;
}

.list-page-v2__crumb-link {
    color: #999999;
    text-decoration: none;
}

.list-page-v2__crumb-link:hover {
    color: #f93c79;
}

.list-page-v2__crumb-current {
    color: #f93c79;
}

.list-page-v2__title {
    margin: 0 0 15px;
    font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.3;
    color: #ffffff;
}

.list-page-v2__desc {
    margin: 0 0 21px;
    font-size: 14px;
    line-height: 22px;
    color: #999999;
}

/*
 * 栅格小节标题（H2，video_list_v2.phtml）：PC 20px，比 H1 的 28px 低一级
 * @ai-modified 2026-07-30 列表页原本 h1→h3 跳级，补一个描述视频栅格的 H2
 */
.list-page-v2__section-title {
    margin: 0 0 15px;
    font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    color: #eeeeee;
}

.list-page-v2__body {
    min-height: 1px;
}

.list-page-v2__pager-wrap {
    display: flex;
    justify-content: center;
    margin-top: 17px;
    width: 100%;
    overflow: hidden;
}

/* 分页色系：粉 #F93C79 / 深灰 #222222 */
.list-page-v2 .dx-pager .pager-item-left,
.list-page-v2 .dx-pager .pager-item-right,
.list-page-v2 .dx-pager .pager-item-left > .pager-item,
.list-page-v2 .dx-pager .pager-item-right > .pager-item,
.list-page-v2 .dx-pager .pager-item-left.pager-item,
.list-page-v2 .dx-pager .pager-item-right.pager-item {
    background-color: #f93c79;
    color: #ffffff;
    border-radius: 4px;
}

.list-page-v2 .dx-pager .pager-item-left:hover,
.list-page-v2 .dx-pager .pager-item-right:hover,
.list-page-v2 .dx-pager .pager-item-left > .pager-item:hover,
.list-page-v2 .dx-pager .pager-item-right > .pager-item:hover {
    background-color: #f93c79;
    color: #ffffff;
}

.list-page-v2 .dx-pager .pager-goto .form-control {
    background-color: #222222;
    color: #ffffff;
    border: 1px solid #333333;
}

.list-page-v2 .dx-pager .pager-goto-btn {
    background-color: #222222;
    color: #ffffff;
    border: 1px solid #333333;
}

.list-page-v2 .dx-pager .pager-label {
    color: #cccccc;
}

/* ===== 404 page（error/404.phtml） ===== */
/*
 * 错误页复用壳层：headerv3 + .page-404 + footerv3。
 * 主色用 var(--ui-v2-primary)，不再新增硬编码 #f93c79。
 */
.page-404 {
    display: block;
    padding: 72px 0 88px;
    color: #ffffff;
}

.page-404__inner {
    text-align: center;
}

.page-404__code {
    margin: 0;
    font-weight: 700;
    font-size: 120px;
    line-height: 1;
    letter-spacing: 4px;
    color: var(--ui-v2-primary);
}

.page-404__title {
    margin: 20px 0 0;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.4;
    color: #ffffff;
}

.page-404__desc {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #999999;
}

.page-404__actions {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.page-404__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    height: 44px;
    padding: 0 28px;
    box-sizing: border-box;
    border: 1px solid #333333;
    border-radius: 100px;
    font-size: 14px;
    line-height: 1;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
}

.page-404__btn:hover,
.page-404__btn:focus {
    border-color: var(--ui-v2-primary);
    color: var(--ui-v2-primary);
    text-decoration: none;
}

.page-404__btn--primary {
    background-color: var(--ui-v2-primary);
    border-color: var(--ui-v2-primary);
    color: #ffffff;
}

.page-404__btn--primary:hover,
.page-404__btn--primary:focus {
    opacity: 0.88;
    color: #ffffff;
}

.page-404__hot {
    margin-top: 56px;
    text-align: center;
}

.page-404__hot-title {
    margin: 0 0 16px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #ffffff;
}

.page-404__hot-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-404__hot-link {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 4px;
    background-color: #222222;
    font-size: 13px;
    line-height: 1.4;
    color: #cccccc;
    text-decoration: none;
    transition: all 0.2s ease;
}

.page-404__hot-link:hover,
.page-404__hot-link:focus {
    background-color: var(--ui-v2-primary);
    color: #ffffff;
    text-decoration: none;
}

@media (max-width: 767px) {
    .page-404 {
        padding: 48px 0 56px;
    }

    .page-404__code {
        font-size: 80px;
    }

    .page-404__title {
        font-size: 22px;
    }

    .page-404__actions {
        margin-top: 24px;
        gap: 12px;
    }

    .page-404__btn {
        min-width: 140px;
        height: 40px;
        padding: 0 20px;
    }

    .page-404__hot {
        margin-top: 40px;
    }
}