/*
 * Copyright: YC-2025Copyright
 * Description: 全站顶部导航栏（替代原左侧菜单）+ 移动端抽屉菜单样式
 * 配套：common/site_nav.php（标记）、assets/js/site-nav.js（交互）
 */

:root {
    --hp-primary: #3d7bfd;
    --hp-primary-deep: #2f66f5;
}

/* ===== 大屏等比缩放：≥2560px 视口整体放大 4/3，呈现比例与 1920px 一致 ===== */
@media (min-width: 2560px) {
    body { zoom: calc(4 / 3); }
}

/* ===== 顶部导航 ===== */
.hp-nav {
    position: sticky;
    top: 0;
    /* 高于各工具页自有顶条（z-index 30~130），低于 bootstrap 弹层（1050+）与全屏遮罩 */
    z-index: 500;
    background: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .06);
    transition: box-shadow .25s ease;
}
.hp-nav.scrolled { box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
.hp-nav-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
    height: 64px;
}
.hp-nav-logo { flex-shrink: 0; display: flex; align-items: center; }
.hp-nav-logo img { height: 34px; width: auto; display: block; }
.hp-nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.hp-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 13px;
    border-radius: 8px;
    color: #374151;
    font-size: .95rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease, background .15s ease;
}
.hp-nav-link:hover { color: var(--hp-primary); background: #f2f7ff; }
.hp-nav-link.active { color: var(--hp-primary); font-weight: 700; }
.hp-nav-more { position: relative; }
.hp-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    padding: 8px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, .14);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
}
.hp-dropdown a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    color: #374151;
    font-size: .92rem;
    text-decoration: none;
    white-space: nowrap;
}
.hp-dropdown a:hover { color: var(--hp-primary); background: #f2f7ff; }
.hp-nav-more:hover .hp-dropdown,
.hp-nav-more.open .hp-dropdown { display: block; }
.hp-nav-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.hp-nav-search { position: relative; }
.hp-nav-search input {
    width: 260px;
    height: 38px;
    padding: 0 40px 0 18px;
    border-radius: 999px;
    border: 1px solid #e5e9f2;
    background: #f6f8fc;
    color: #0f172a;
    font-size: .9rem;
    outline: none;
    transition: border-color .2s ease, background .2s ease, width .25s ease;
}
.hp-nav-search input::placeholder { color: #94a3b8; }
.hp-nav-search input:focus { border-color: rgba(61, 123, 253, .45); background: #fff; }
.hp-nav-search button {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.hp-nav-search button:hover { color: var(--hp-primary); }
.hp-btn-login {
    display: inline-flex;
    align-items: center;
    padding: 9px 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, #4c84ff, var(--hp-primary-deep));
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(61, 123, 253, .28);
    transition: transform .15s ease, box-shadow .15s ease;
}
.hp-btn-login:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 12px 24px rgba(61, 123, 253, .36); }
.hp-nav-burger {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 10px;
    background: #fff;
    color: var(--hp-primary);
    font-size: 1.25rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
/* 「首页 ▾」菜单入口：仅 H5（≤767px）显示，桌面/平板仍是汉堡图标（样式见底部响应式区） */
.hp-nav-burger-label { display: none; }
.hp-nav-burger-caret { display: none; font-size: .72rem; }

/* ===== 移动端抽屉菜单 ===== */
.hp-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    /* 高于 .hp-nav(z:500)：透明顶栏时代抽屉须完整覆盖顶栏区域 */
    z-index: 600;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    transition: opacity .25s ease;
}
.hp-drawer-overlay.show { opacity: 1; }
.hp-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 610;
    width: 284px;
    max-width: 84vw;
    background: #fff;
    transform: translateX(100%);
    transition: transform .28s ease;
    overflow-y: auto;
    padding: 18px 14px 28px;
}
.hp-drawer.show { transform: translateX(0); }
.hp-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 6px;
}
.hp-drawer-head img { height: 30px; }
.hp-drawer-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: #f3f5f9;
    color: #475569;
    font-size: 1.05rem;
}
.hp-drawer a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 10px;
    color: #374151;
    font-size: .95rem;
    text-decoration: none;
}
.hp-drawer a:hover, .hp-drawer a.active { color: var(--hp-primary); background: #f2f7ff; }
.hp-drawer-group {
    padding: 14px 12px 6px;
    color: #94a3b8;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
}

/* ===== H5「首页 ▾」下拉菜单（≤767px）：面板吸附按钮下方，与抽屉同款菜单排版 ===== */
.hp-nav-menu-wrap { position: relative; }
.hp-nav-mobile-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: -10px;
    z-index: 40;
    min-width: 232px;
    max-width: min(320px, 84vw);
    max-height: min(64vh, 540px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
}
.hp-nav-menu-wrap.open .hp-nav-mobile-menu { display: block; animation: hp-nav-menu-in .16s ease; }
@keyframes hp-nav-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
.hp-nav-mobile-menu a {
    display: flex;
    align-items: center;
    padding: 11px 12px;
    border-radius: 10px;
    color: #374151;
    font-size: .93rem;
    text-decoration: none;
    white-space: nowrap;
}
.hp-nav-mobile-menu a:hover,
.hp-nav-mobile-menu a.active { color: var(--hp-primary); background: #f2f7ff; }
.hp-nav-mobile-menu .hp-drawer-group {
    padding: 12px 12px 6px;
    color: #94a3b8;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
}
/* 展开时角标翻转；平板/桌面一律不出下拉（防止手机展开后旋转屏幕残留） */
.hp-nav-burger-caret { transition: transform .18s ease; }
.hp-nav-menu-wrap.open .hp-nav-burger-caret { transform: rotate(180deg); }
@media (min-width: 768px) {
    .hp-nav-mobile-menu { display: none !important; }
}

/* ===== 响应式 ===== */
/* 中等宽度：收紧链接内边距与搜索框，保证 8 个主导航项 + 搜索 + 头像不挤不叠 */
@media (max-width: 1360px) {
    .hp-nav-link { padding: 8px 10px; }
    .hp-nav-search input { width: 180px; }
}
@media (max-width: 1200px) {
    .hp-nav-link { padding: 8px 9px; font-size: .9rem; }
    .hp-nav-search input { width: 150px; }
}
@media (max-width: 1129.98px) {
    .hp-nav-links { display: none; }
    .hp-nav-burger { display: inline-flex; }
    .hp-nav-inner { height: 58px; padding: 0 16px; gap: 12px; }
    .hp-nav-search { margin-left: auto; }
}
/* ≤768 对齐 H5 改版设计稿顶栏：白底 + logo + 「首页 ▾」+ 常驻紧凑搜索框 + 登录/注册；
   「首页 ▾」点击在按钮下方弹出下拉菜单，平板仍为汉堡图标 + 抽屉 */
@media (max-width: 767.98px) {
    /* 顶栏白底（透明顶栏在内容上滚会出现 logo 叠字），滚动阴影沿用桌面规则 */
    body.cyber-glass .hp-nav,
    body.cyber-glass .hp-nav.scrolled {
        background: #fff;
    }
    .hp-nav-inner { height: auto; min-height: 52px; padding: 8px 12px 6px; gap: 8px; }
    /* logo 回归（此前 H5 隐藏），整行元素统一收小 */
    .hp-nav-logo { display: flex; }
    .hp-nav-logo img { height: 22px; }
    .hp-nav-right { flex: 1 1 auto; min-width: 0; gap: 8px; }

    /* 「首页 ▾」：紧凑文字钮，点开 H5 下拉菜单 */
    .hp-nav-menu-wrap { position: relative; order: -1; flex: 0 0 auto; }
    .hp-nav-burger {
        flex: 0 0 auto;
        width: auto;
        height: 32px;
        padding: 0 2px;
        gap: 4px;
        border: 0;
        background: transparent;
        border-radius: 8px;
        box-shadow: none;
        color: var(--hp-primary);
        font-size: .92rem;
        font-weight: 600;
        align-items: center;
    }
    .hp-nav-burger-label { display: inline; }
    .hp-nav-burger-caret { display: inline-block; font-size: .68rem; color: #6b7280; }
    .hp-nav-burger .bi-list { display: none; }

    /* 搜索：紧凑输入框常驻头部行内，撑满中段 */
    .hp-nav-search { flex: 1 1 auto; min-width: 0; position: relative; }
    .hp-nav-search input {
        display: block;
        width: 100%;
        height: 34px;
        min-height: 34px;
        padding: 0 36px 0 14px;
        border-color: transparent;
        background: #f3f5f9;
        color: #111827;
        font-size: 16px; /* 防 iOS 聚焦整页缩放 */
    }
    .hp-nav-search input::placeholder { color: #94a3b8; }
    .hp-nav-search input:focus { border-color: transparent; background: #eef1f7; }
    .hp-nav-search button {
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: transparent;
        color: #5b7cff;
        font-size: .95rem;
        cursor: pointer;
    }

    /* 登录/头像紧凑件靠右；顶栏隐藏搜索的页面用 auto 外边距推到最右 */
    .hp-btn-login { flex-shrink: 0; order: 2; padding: 6px 10px; min-height: 32px; font-size: .8rem; }
    .hp-nav-user { order: 2; }
    .hp-nav-right:not(.has-nav-search) .hp-btn-login,
    .hp-nav-right:not(.has-nav-search) .hp-nav-user { margin-left: auto; }
    .hp-nav-user .hp-nav-avatar-btn { width: 32px; height: 32px; }

    /* 搜索联想面板固定铺满顶栏下方一行（紧凑表单不再作为定位基准） */
    .hp-nav-search .hp-search-drop {
        position: fixed;
        top: 54px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }
}
@media (max-width: 575.98px) {
    .hp-nav-avatar-btn { width: 30px; height: 30px; }
}
/* 320 级小屏（iPhone SE 等）：四件套再收一档保住搜索框可用宽度 */
@media (max-width: 359.98px) {
    .hp-nav-logo img { height: 20px; }
    .hp-nav-inner { padding: 8px 10px 6px; gap: 6px; }
    .hp-btn-login { padding: 5px 8px; }
    .hp-nav-search input { padding: 0 30px 0 12px; }
}

/* ===== 登录态：头像按钮 + 下拉菜单 ===== */
.hp-nav-user { position: relative; }
.hp-nav-avatar-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, .9);
    background: #e2e8f0;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .14);
    transition: box-shadow .15s ease;
}
.hp-nav-avatar-btn:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .22); }
.hp-nav-avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-nav-user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 168px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    z-index: 130;
}
.hp-nav-user.is-open .hp-nav-user-menu { opacity: 1; visibility: visible; transform: none; }
.hp-nav-user-name {
    font-size: .88rem;
    font-weight: 700;
    color: #17233d;
    padding: 8px 10px 10px;
    border-bottom: 1px solid #eef2f8;
    margin-bottom: 6px;
    max-width: 210px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hp-nav-user-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: .86rem;
    color: #334155;
    text-decoration: none;
}
.hp-nav-user-menu a:hover { background: #f1f5f9; color: #2563eb; }
.hp-nav-user-menu a i { color: #94a3b8; font-size: .95rem; }
.hp-nav-user-menu a:hover i { color: #2563eb; }

/* ===== 全站内页内容容器统一宽度（与首页 .hp-container 一致：1240px 居中、左右留白相等） =====
   所有引入全站导航的子页面共用本规则；页面内不再单独写宽度/居中覆盖。 */
body .cg-main { margin-left: 0; }
body .cg-content {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}
body .report-page-content {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== 工具工作台类页面的应用容器（100vh 应用型布局）同样纳入统一宽度 =====
   新增工具页若顶层容器不是 .cg-content，把其容器类追加到下方选择器列表即可。 */
body .cr-page,
body .chat-area,
body .cs-main {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}