/* nav-mobile.css — 手机端导航统一层（2026-11-13）
   对齐参考站 www.xiazaitu.com 手机端头部的两个可点项：
     ① 账号胶囊（头像 + 下拉箭头）→ 下拉「个人中心 / 退出登录」，箭头 180° 翻转；
     ② 汉堡 / 关闭按钮 → 图标旋转切换 + 按下缩放，悬停变蓝；
   以及下拉面板的滑入淡入（translateY + scale）与逐项 hover 底色。
   本文件由 main.py::_inject_tidy_base() 全站注入（含首页），是手机导航的唯一来源：
   首页 tidy.css / 内页 tidy-base.css 里旧的 .td-nav-toggle 规则已被本层覆盖，
   旧的「display:none ↔ flex」开关方式也改成透明度 + 位移过渡（见下）。
   作用域只到 ≤860px，桌面端不受影响。

   特异性说明：首页 tidy.css 用 `body.home .site-header .nav`（0,3,1）且给面板挂了
   tdPop 入场动画（animation 会盖掉一切过渡），因此本层统一用
   `.site-header.td-nav-mobile`（JS 给 header 加）同特异性 + 后加载取胜，
   并对 animation / 几何量加 !important，避免被首页旧规则压回固定 top:64px。*/

@media (max-width: 860px) {
    /* ---------- 下拉面板（复用 .nav 容器，不新增 DOM） ---------- */
    .site-header.td-nav-mobile .nav {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap !important;
        gap: 2px;
        position: absolute;
        left: 14px !important;
        right: 14px !important;
        top: calc(100% + 8px) !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 8px !important;
        max-height: calc(100dvh - 88px);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 1px solid var(--border, #e5e9f2);
        border-radius: 18px;
        box-shadow: 0 28px 56px -28px rgba(15, 23, 42, .55), 0 0 0 1px rgba(255, 255, 255, .6);
        animation: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-10px) scale(.98);
        transform-origin: top center;
        transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .3, 1), visibility .22s;
        z-index: 99;
    }
    /* 打开态：位移归零，关闭时反向播一次 */
    .site-header.td-nav-mobile.td-nav-open .nav {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    .site-header.td-nav-mobile .nav a {
        display: flex !important;
        align-items: center;
        height: 46px;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 12px;
        font-size: 14.5px !important;
        font-weight: 600;
        color: #475569 !important;
        white-space: nowrap;
        text-decoration: none;
        transition: background .18s ease, color .18s ease;
    }
    .site-header.td-nav-mobile .nav a:hover,
    .site-header.td-nav-mobile .nav a:active {
        color: var(--primary, #1F4FFF) !important;
        background: rgba(31, 79, 255, .09);
        text-decoration: none;
    }
    .site-header.td-nav-mobile .nav .lang-btn { display: none !important; }

    /* 菜单底部「开通会员」主按钮（参考站 mobile-menu-cta） */
    .site-header.td-nav-mobile .nav .td-nav-cta {
        justify-content: center;
        margin-top: 6px !important;
        height: 46px;
        color: #fff !important;
        background: linear-gradient(135deg, #1F4FFF, #8B5CF6);
        box-shadow: 0 12px 24px -14px rgba(31, 79, 255, 1);
    }
    .site-header.td-nav-mobile .nav .td-nav-cta:hover,
    .site-header.td-nav-mobile .nav .td-nav-cta:active {
        color: #fff !important;
        background: linear-gradient(135deg, #1F4FFF, #8B5CF6);
        filter: brightness(1.06);
    }
    /* 有头像胶囊时不再显示文字版「登录 / 个人中心」，同一位不放两个入口 */
    .site-header.td-has-user .hd-right .nav-acct { display: none !important; }

    /* 登录 / 注册胶囊：与参考站手机端同尺寸（34 高、左右 14 内边距、13px）
       首页 tidy.css 用 body.home .site-header .nav-acct（0,3,1）锁了 38px，这里 4 个类压过去 */
    .site-header.td-nav-mobile .hd-right .nav-acct {
        height: 34px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }
    .site-header.td-nav-mobile .hd-right .nav-acct:active { transform: scale(.97); }

    /* ---------- ① 账号胶囊 ---------- */
    .td-nav-user { position: relative; flex: 0 0 auto; }
    .site-header .td-nav-user-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 38px;
        padding: 0 12px 0 5px;
        border: 1px solid var(--border, #e5e9f2);
        border-radius: 999px;
        background: #f8fafd;
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--sub, #475569);
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .14s cubic-bezier(.2, .8, .3, 1);
    }
    .site-header .td-nav-user-btn:hover {
        background: #fff;
        border-color: rgba(31, 79, 255, .4);
        box-shadow: 0 10px 22px -18px rgba(31, 79, 255, 1);
    }
    .site-header .td-nav-user-btn:active { transform: scale(.96); }
    .td-nav-user-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        background: linear-gradient(135deg, #1F4FFF, #8B5CF6);
        text-transform: uppercase;
    }
    .td-nav-user-name {
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .td-nav-user-caret {
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
        color: #94a3b8;
        transition: transform .24s cubic-bezier(.2, .8, .3, 1), color .2s ease;
    }
    .td-nav-user.open .td-nav-user-caret {
        transform: rotate(180deg);
        color: var(--primary, #1F4FFF);
    }
    .td-nav-user-menu {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        min-width: 152px;
        padding: 6px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 24px 50px -22px rgba(15, 23, 42, .55), 0 0 0 1px var(--border, #e5e9f2);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .3, 1), visibility .22s;
        z-index: 120;
    }
    .td-nav-user.open .td-nav-user-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .td-nav-user-menu a,
    .td-nav-user-menu button {
        display: block;
        width: 100%;
        padding: 9px 12px;
        border: 0;
        border-radius: 10px;
        background: none;
        font-family: inherit;
        font-size: 13.5px;
        text-align: left;
        color: var(--sub, #475569);
        cursor: pointer;
        transition: background .18s ease, color .18s ease;
    }
    .td-nav-user-menu a:hover,
    .td-nav-user-menu button:hover,
    .td-nav-user-menu a:active,
    .td-nav-user-menu button:active {
        background: rgba(31, 79, 255, .09);
        color: var(--primary, #1F4FFF);
        text-decoration: none;
    }

    /* ---------- ② 汉堡 / 关闭按钮 ---------- */
    .site-header .td-nav-toggle {
        position: relative;
        display: grid !important;
        place-items: center;
        flex: 0 0 auto;
        order: 3;
        width: 38px;
        height: 38px;
        margin-left: 0 !important;
        padding: 0;
        border: 1px solid var(--border, #e5e9f2);
        border-radius: 11px;
        background: #f8fafd;
        color: var(--sub, #475569);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2, .8, .3, 1);
    }
    .site-header .td-nav-toggle:hover {
        background: #fff;
        color: var(--primary, #1F4FFF);
        border-color: rgba(31, 79, 255, .4);
        box-shadow: 0 10px 22px -18px rgba(31, 79, 255, 1);
    }
    .site-header .td-nav-toggle:active { transform: scale(.94); }
    /* 两个图标叠在同一格：关闭态显示汉堡，打开态汉堡转出、叉号转入 */
    .site-header .td-nav-toggle .td-nt-ic {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 19px;
        height: 19px;
        transition: transform .26s cubic-bezier(.2, .8, .3, 1), opacity .18s ease;
    }
    .site-header .td-nav-toggle .td-nt-close {
        opacity: 0;
        transform: rotate(-90deg) scale(.7);
    }
    .site-header .td-nav-toggle.is-open {
        background: #fff;
        color: var(--primary, #1F4FFF);
        border-color: rgba(31, 79, 255, .4);
    }
    .site-header .td-nav-toggle.is-open .td-nt-menu {
        opacity: 0;
        transform: rotate(90deg) scale(.7);
    }
    .site-header .td-nav-toggle.is-open .td-nt-close {
        opacity: 1;
        transform: rotate(0) scale(1);
    }

}

@media (max-width: 640px) {
    .site-header.td-nav-mobile .nav {
        left: 10px !important;
        right: 10px !important;
        border-radius: 16px;
    }
    .site-header.td-nav-mobile .nav a { height: 44px; font-size: 14px !important; }
    .site-header.td-nav-mobile .nav .td-nav-cta { height: 44px; }
    .site-header .td-nav-user-btn { height: 34px; padding: 0 10px 0 4px; gap: 6px; }
    .td-nav-user-avatar { width: 26px; height: 26px; font-size: 11px; }
    .td-nav-user-name { display: none; }
    .site-header .td-nav-toggle { width: 36px; height: 36px; border-radius: 10px; }
    .site-header .td-nav-toggle .td-nt-ic { width: 18px; height: 18px; }
}

/* 桌面端：胶囊与主按钮都归零，桌面导航保持原样 */
@media (min-width: 861px) {
    .td-nav-user,
    .td-nav-user-menu,
    .site-header .nav .td-nav-cta { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .site-header.td-nav-mobile .nav,
    .site-header .td-nav-toggle,
    .site-header .td-nav-toggle .td-nt-ic,
    .td-nav-user-caret,
    .td-nav-user-menu { transition: none !important; }
}