/* 顶部导航栏 - 简洁毛玻璃风格 */

:root {
    --nav-height: 56px;
    --nav-bg: rgba(255, 255, 255, 0.72);
    --nav-border: rgba(255, 255, 255, 0.78);
    --nav-text: #0f172a;
    --btn-size: 36px;
    --spacer-size: 36px;
}

/* 页面头部 */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: var(--nav-height);
    min-height: var(--nav-height);
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--nav-border);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.page-header::before,
.page-header::after {
    display: none;
}

/* 返回按钮 */
.back-btn {
    width: var(--btn-size);
    height: var(--btn-size);
    border: none;
    background: rgba(255, 255, 255, 0.55);
    color: var(--nav-text);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
    flex-shrink: 0;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}

.back-btn::before,
.back-btn::after {
    display: none;
}

.back-btn:hover {
    background: rgba(59, 130, 246, 0.08);
}

.back-btn:active {
    background: rgba(0, 0, 0, 0.08);
}

.back-btn i {
    color: var(--nav-text);
    font-size: 1rem;
    line-height: 1;
}

.back-btn:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.back-btn:focus:not(:focus-visible) {
    outline: none;
}

/* 页面标题 */
.page-header h1 {
    font-size: 17px;
    font-weight: 700;
    color: var(--nav-text);
    text-align: center;
    flex: 1;
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 头部占位元素 */
.header-spacer {
    width: var(--spacer-size);
    height: var(--spacer-size);
    flex-shrink: 0;
}

/* 头部内容区域 */
.header-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

/* 头部发光效果 - 保留类但不可见 */
.header-glow {
    display: none;
}

/* 页面特定样式 - 统一简洁风格 */
.benchmark-page .page-header,
.private-card-page .page-header,
.viral-creation .page-header,
.note-creator .page-header,
.product-creation .page-header,
.image-enhancement .page-header,
.image-enhancement-page .page-header {
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: none;
    height: var(--nav-height);
    min-height: var(--nav-height);
    padding: 0 16px;
}

.benchmark-page .back-btn,
.private-card-page .back-btn,
.viral-creation .back-btn,
.note-creator .back-btn,
.product-creation .back-btn,
.image-enhancement .back-btn,
.image-enhancement-page .back-btn {
    background: transparent;
    border: none;
    color: var(--nav-text);
    width: var(--btn-size);
    height: var(--btn-size);
    border-radius: 10px;
    box-shadow: none;
}

.benchmark-page .back-btn:hover,
.private-card-page .back-btn:hover,
.viral-creation .back-btn:hover,
.note-creator .back-btn:hover,
.product-creation .back-btn:hover,
.image-enhancement .back-btn:hover,
.image-enhancement-page .back-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: none;
    box-shadow: none;
}

.benchmark-page .page-header h1,
.private-card-page .page-header h1,
.viral-creation .page-header h1,
.note-creator .page-header h1,
.product-creation .page-header h1,
.image-enhancement .page-header h1,
.image-enhancement-page .page-header h1 {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: var(--nav-text);
    color: var(--nav-text);
    filter: none;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    animation: none;
    text-shadow: none;
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
    :root {
        --nav-bg: rgba(15, 17, 23, 0.78);
        --nav-border: rgba(255, 255, 255, 0.12);
        --nav-text: #f0f0f0;
    }
}

/* 响应式 - 平板 */
@media screen and (max-width: 768px) {
    :root {
        --nav-height: 52px;
        --btn-size: 34px;
        --spacer-size: 34px;
    }

    .page-header {
        padding: 0 14px;
    }

    .page-header h1 {
        font-size: 16px;
    }
}

/* 响应式 - 小屏手机 */
@media screen and (max-width: 375px) {
    :root {
        --nav-height: 48px;
        --btn-size: 32px;
        --spacer-size: 32px;
    }

    .page-header {
        padding: 0 12px;
    }

    .page-header h1 {
        font-size: 15px;
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    .page-header {
        background: rgba(255, 255, 255, 0.98);
        border-bottom-color: rgba(0, 0, 0, 0.3);
    }

    .back-btn {
        color: #000;
    }

    .page-header h1 {
        color: #000;
    }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
    .back-btn {
        transition: none;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .back-btn:hover {
        background: transparent;
    }

    .back-btn:active {
        background: rgba(0, 0, 0, 0.08);
    }
}

/**
 * 子页顶栏统一 — 与 benchmark.html 一致（须在本文件末尾以保证覆盖上方 .page-header）
 * 源文件：page-header-unified.css
 */

main.main-content:not(.home-page):not(.template-page) .page-header,
.app-container > .page-header,
.clone-container > .page-header,
.container > .page-header,
.analyze-container > .page-header,
.observation-container > .page-header,
.viral-page-container > .page-header,
.extract-text-page .page-header,
body.product-note-page .page-header,
main.private-domain-page .page-header,
main.private-domain-page header.page-header,
.page-container.ecommerce-scene-page header.page-header,
.page-container.ecommerce-scene-page .page-header,
body > .page-header:first-child,
.benchmark-max-app .page-header,
body > header.page-header:first-of-type {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 10px 18px !important;
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 10px !important;
    min-height: 52px !important;
    height: auto !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(18px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
    border: none !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 0 !important;
    margin: 0 0 24px 0 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    overflow: visible !important;
}

main.main-content:not(.home-page):not(.template-page) .page-header h1,
main.main-content:not(.home-page):not(.template-page) .page-header .page-title,
.app-container > .page-header h1,
.app-container > .page-header .page-title,
.clone-container > .page-header h1,
.container > .page-header h1,
.analyze-container > .page-header h1,
.observation-container > .page-header h1,
.viral-page-container > .page-header .header-title h1,
.extract-text-page .page-header h1,
body.product-note-page .page-header h1,
main.private-domain-page .page-header h1,
.page-container.ecommerce-scene-page .page-header .page-title,
body > .page-header:first-child h1,
.benchmark-max-app .page-header h1,
body > header.page-header:first-of-type h1,
main.main-content:not(.home-page):not(.template-page) .page-header .header-title,
.app-container > .page-header .header-title,
body > .page-header:first-child .header-title {
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
    color: #0f172a !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    -webkit-text-fill-color: #0f172a !important;
    background: none !important;
    filter: none !important;
    text-shadow: none !important;
}

main.main-content:not(.home-page):not(.template-page) .page-header .header-content,
.app-container > .page-header .header-content,
.viral-page-container > .page-header .header-title {
    flex: 1 !important;
    min-width: 0 !important;
    text-align: center !important;
}

main.main-content:not(.home-page):not(.template-page) .page-header .header-content h1,
.app-container > .page-header .header-content h1,
.viral-page-container > .page-header .header-title h1 {
    white-space: normal !important;
    text-overflow: unset !important;
}

main.main-content:not(.home-page):not(.template-page) .page-header .header-content .page-subtitle,
.app-container > .page-header .header-content .page-subtitle {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin: 4px 0 0 !important;
    -webkit-text-fill-color: #64748b !important;
}

main.main-content:not(.home-page):not(.template-page) .page-header .back-btn,
main.main-content:not(.home-page):not(.template-page) .page-header a.back-btn,
.app-container > .page-header .back-btn,
.app-container > .page-header a.back-btn,
.clone-container > .page-header .back-btn,
.container > .page-header .back-btn,
.analyze-container > .page-header .back-btn,
.observation-container > .page-header .back-btn,
.viral-page-container > .page-header .back-btn,
.extract-text-page .page-header .back-btn,
body.product-note-page .page-header .back-btn,
main.private-domain-page .page-header .back-btn,
.page-container.ecommerce-scene-page .page-header .back-btn,
.page-container.ecommerce-scene-page .page-header a.back-btn,
body > .page-header:first-child .back-btn,
.benchmark-max-app .page-header .back-btn,
body > header.page-header:first-of-type .back-btn {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.45) !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    text-decoration: none !important;
    transform: none !important;
}

main.main-content:not(.home-page):not(.template-page) .page-header .back-btn:hover,
.app-container > .page-header .back-btn:hover,
.clone-container > .page-header .back-btn:hover,
.container > .page-header .back-btn:hover,
.analyze-container > .page-header .back-btn:hover,
.observation-container > .page-header .back-btn:hover,
.viral-page-container > .page-header .back-btn:hover,
.extract-text-page .page-header .back-btn:hover,
body.product-note-page .page-header .back-btn:hover,
main.private-domain-page .page-header .back-btn:hover,
.page-container.ecommerce-scene-page .page-header .back-btn:hover,
body > .page-header:first-child .back-btn:hover,
.benchmark-max-app .page-header .back-btn:hover,
body > header.page-header:first-of-type .back-btn:hover {
    background: rgba(255, 255, 255, 0.72) !important;
    color: #0f172a !important;
}

main.main-content:not(.home-page):not(.template-page) .page-header .back-btn:active,
.app-container > .page-header .back-btn:active,
.clone-container > .page-header .back-btn:active,
.container > .page-header .back-btn:active,
.observation-container > .page-header .back-btn:active,
.viral-page-container > .page-header .back-btn:active,
body > .page-header:first-child .back-btn:active,
body > header.page-header:first-of-type .back-btn:active {
    transform: scale(0.98) !important;
}

main.main-content:not(.home-page):not(.template-page) .page-header .back-btn i,
.app-container > .page-header .back-btn i,
.clone-container > .page-header .back-btn i,
.container > .page-header .back-btn i,
.analyze-container > .page-header .back-btn i,
.observation-container > .page-header .back-btn i,
.viral-page-container > .page-header .back-btn i,
.extract-text-page .page-header .back-btn i,
body.product-note-page .page-header .back-btn i,
main.private-domain-page .page-header .back-btn i,
.page-container.ecommerce-scene-page .page-header .back-btn i,
.benchmark-max-app .page-header .back-btn i,
body > .page-header:first-child .back-btn i,
body > header.page-header:first-of-type .back-btn i {
    font-size: 14px !important;
    line-height: 1 !important;
    color: inherit !important;
}

main.main-content:not(.home-page):not(.template-page) .page-header .header-spacer,
.app-container > .page-header .header-spacer,
.clone-container > .page-header .header-spacer,
.container > .page-header .header-spacer,
.observation-container > .page-header .header-spacer,
.viral-page-container > .page-header .header-spacer,
body > .page-header:first-child .header-spacer,
main.private-domain-page .page-header .header-spacer:not(.header-content),
.page-container.ecommerce-scene-page .header-placeholder,
body > header.page-header:first-of-type .header-right {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
}

.page-container.ecommerce-scene-page .header-placeholder:empty {
    display: block !important;
}

@media (max-width: 375px) {
    main.main-content:not(.home-page):not(.template-page) .page-header,
    .app-container > .page-header,
    .clone-container > .page-header,
    .container > .page-header,
    .observation-container > .page-header,
    .viral-page-container > .page-header,
    body > .page-header:first-child,
    body > header.page-header:first-of-type {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    main.main-content:not(.home-page):not(.template-page) .page-header h1,
    .app-container > .page-header h1,
    .container > .page-header h1,
    body > .page-header:first-child h1 {
        font-size: 15px !important;
        padding: 0 8px !important;
    }
}

@media (prefers-color-scheme: dark) {
    main.main-content:not(.home-page):not(.template-page) .page-header,
    .app-container > .page-header,
    .clone-container > .page-header,
    .container > .page-header,
    .analyze-container > .page-header,
    .observation-container > .page-header,
    .viral-page-container > .page-header,
    .extract-text-page .page-header,
    body.product-note-page .page-header,
    main.private-domain-page .page-header,
    .page-container.ecommerce-scene-page .page-header,
    body > .page-header:first-child,
    body > header.page-header:first-of-type {
        background: rgba(26, 29, 39, 0.85) !important;
        border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    }

    main.main-content:not(.home-page):not(.template-page) .page-header h1,
    .app-container > .page-header h1,
    body > .page-header:first-child h1,
    .page-header .header-title {
        color: #f3f4f6 !important;
        -webkit-text-fill-color: #f3f4f6 !important;
    }
}