/* ==============================================================================
   qqzeng-ip · 全站上线打磨层 (site-polish.css)
   ------------------------------------------------------------------------------
   定位：纯增强补丁。上线前统一收口浏览器体验细节，不改动任何既有视觉设计。
   加载顺序：必须位于页面自身 <style> 与 Tailwind CDN 之后。

   1) 声明深色配色方案，消除表单控件 / 下拉面板 / 滚动条 / 自动填充的浅色闪白
   2) iOS 刘海屏与底部 Home 指示条安全区适配（配合 viewport-fit=cover）
   3) 移动端输入焦点不再被自动缩放
   4) 粗指针设备下保障 44px 最小触摸目标
   5) 长内容（代码块 / 表格 / 图片）统一防溢出
   ============================================================================== */

/* ── 1. 深色配色方案声明 ──────────────────────────────────────────────────────
   缺这一条时，深色站点里的 <select> 下拉面板、日期选择器、滚动条与
   Chrome 自动填充背景都会以系统浅色绘制，是全站最容易被忽略的破面。 */
html {
    color-scheme: dark;
}

/* ── 2. 安全区变量 ──────────────────────────────────────────────────────────── */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

/* 固定悬浮控件：避开 Home 指示条与其左右圆角，避免被系统手势区域吃掉点击 */
.back-to-top,
#toTop,
#focusToast,
#contact-panel-toggle,
.scrollUp {
    bottom: calc(24px + var(--sab));
    right: calc(24px + var(--sar));
}

.back-to-top,
#toTop,
.scrollUp {
    margin-bottom: 0;
}

/* 底部横向居中的浮层（Toast / 提示条）：只抬升纵向 */
#focusToast {
    right: auto;
    bottom: calc(24px + var(--sab));
}

/* 移动端全屏菜单：保留底部余量，避免最后一项被 Home 指示条压住 */
#mobile-menu-overlay {
    padding-bottom: calc(20px + var(--sab));
    padding-left: var(--sal);
    padding-right: var(--sar);
}

/* 下拉式移动端导航面板：同样让出左右安全区 */
.nav-links {
    left: calc(12px + var(--sal));
    right: calc(12px + var(--sar));
}

/* ── 3. iOS/Android 聚焦不缩放 ────────────────────────────────────────────────
   移动端浏览器在输入框字号 < 16px 时会强制放大整页，且不会自动还原。
   此处仅对文本输入类生效，不影响展示型文本与按钮排布。 */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {

        input[type="text"],
        input[type="search"],
        input[type="tel"],
        input[type="number"],
        input[type="url"],
        input[type="email"],
        textarea,
        select {
            font-size: 16px;
        }
    }
}

/* ── 4. 触摸目标保障 ──────────────────────────────────────────────────────────
   仅对粗指针（手指）设备生效，鼠标环境保持原有紧凑排版。 */
@media (pointer: coarse) {
    .nav-pill-link {
        min-height: 44px;
        padding-left: 16px;
        padding-right: 16px;
    }

    #mobile-menu-button {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .copy,
    .rcopy,
    .copy-btn {
        min-height: 40px;
    }
}

/* ── 5. 长内容防溢出兜底 ────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* 图片等比例收缩，避免在窄屏撑破容器 */
    img {
        max-width: 100%;
        height: auto;
    }

    /* 代码块横向滚动而非截断 */
    pre {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 无滚动容器的裸表格兜底：允许横向滚动查看完整列。
       注意：必须排除自带滚动包壳的表格（.vfield-table-wrapper 等），
       否则 thead/tbody 会被拆成两张独立表，列宽各自计算，
       表头与数据列错位（全板碎裂）。 */
    :not(.vfield-table-wrapper, .luxury-table-wrap, .tbl-wrap, .cmp-scroll, .tbl-scroll) > table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    :not(.vfield-table-wrapper, .luxury-table-wrap, .tbl-wrap, .cmp-scroll, .tbl-scroll) > table thead,
    :not(.vfield-table-wrapper, .luxury-table-wrap, .tbl-wrap, .cmp-scroll, .tbl-scroll) > table tbody {
        display: table;
        width: 100%;
        min-width: max-content;
    }
}

/* ── 6. 全站统一滚动条（曜石黑 × 香槟金体系） ───────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 169, 97, 0.55) rgba(255, 255, 255, 0.04);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #c9a961, #8b6d36);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #e5c07b, #a8834a);
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* ── 7. 图片解码不阻塞渲染 ──────────────────────────────────────────────────── */
img {
    content-visibility: auto;
}

/* ── 9. 内联 SVG 图标（取代 Font Awesome 字体图标） ────────────────────────────
   Tailwind preflight 会把 svg 设成 display:block，而原先的 <i> 是 inline，
   不改会在按钮/标题里把图标挤到单独一行。这里对齐 Font Awesome 官方的
   竖向偏移（-0.125em），并用 1em 尺寸跟随父级 font-size —— 与图标字体的
   排版行为保持一致，因此原有的 text-xs / text-2xl 等字号类照常生效。 */
.fa-icon {
    display: inline-block !important;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0;
    overflow: visible;
}

/* ── 8. 平静滚动与现代 Web 平台动效规范（Chrome Modern Web Guidance） ────────── */
:root {
    accent-color: #c9a961;
    interpolate-size: allow-keywords;
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.qz-vt-scope {
    view-transition-scope: all;
}

.qz-vt-card {
    view-transition-class: qz-vt-card;
}

::view-transition-group(*.qz-vt-card) {
    animation-duration: 260ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* CSS Anchor Positioning：顶部导航胶囊零 JS 丝滑跟随滑块 */
@supports (anchor-name: --qz-pill-active) {
    .nav-pill-container {
        position: relative;
        anchor-scope: --qz-pill-active;
    }

    .nav-pill-container .nav-pill-link.active {
        anchor-name: --qz-pill-active;
    }

    .nav-pill-container:has(.nav-pill-link:hover, .nav-pill-link:focus-visible) .nav-pill-link.active {
        anchor-name: none;
    }

    .nav-pill-container .nav-pill-link:is(:hover, :focus-visible) {
        anchor-name: --qz-pill-active;
    }

    .nav-pill-container::before {
        content: "";
        position: absolute;
        position-anchor: --qz-pill-active;
        top: anchor(top);
        bottom: anchor(bottom);
        left: anchor(left);
        right: anchor(right);
        border-radius: 9999px;
        background: radial-gradient(circle at 50% 0%, rgba(201, 169, 97, 0.16), rgba(201, 169, 97, 0.04) 75%);
        border: 1px solid rgba(201, 169, 97, 0.22);
        opacity: 0;
        pointer-events: none;
        transition: top 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                    bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                    left 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                    right 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                    opacity 0.22s ease;
    }

    .nav-pill-container:has(.nav-pill-link.active, .nav-pill-link:hover, .nav-pill-link:focus-visible)::before {
        opacity: 1;
    }
}

/* 滚动状态容器查询（@container scroll-state）：表格横向未滑到底时自动呈现右侧渐隐提示 */
@supports (container-type: scroll-state) {
    .vfield-table-wrapper,
    .luxury-table-wrap,
    .tbl-wrap,
    .cmp-scroll,
    .tbl-scroll {
        container-type: scroll-state;
    }

    @container scroll-state(scrollable: right) {
        .vfield-table-wrapper > table,
        .luxury-table-wrap > table,
        .tbl-wrap > table,
        .cmp-scroll > table,
        .tbl-scroll > table {
            -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
        }
    }
}

/* 视口入场时间线（animation-timeline: view()）：数据分布条随滚动进入视口平滑生长 */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .bar-fill,
        .qz-view-grow {
            transform-origin: 0 50%;
            animation: qz-scroll-progress-grow cubic-bezier(0.22, 1, 0.36, 1) both;
            animation-timeline: view();
            animation-range: entry 0% cover 28%;
        }
    }
}

html {
    scroll-behavior: auto !important;
    scrollbar-gutter: auto;
}

html,
body {
    overflow-x: clip;
}

h1, h2, h3, h4 {
    text-wrap: balance;
}

p, li {
    text-wrap: pretty;
}

/* 自适应文本域高度（field-sizing: content） */
textarea {
    field-sizing: content;
    min-block-size: 3.5lh;
    resize: vertical;
}

/* 延迟表单校验反馈：仅在用户实际交互失焦后标记异常（:user-invalid + :has()） */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    border-color: rgba(239, 68, 68, 0.78) !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.28) !important;
}

/* 模态层与横向滚动容器边界隔离（防止滚动穿透与触控板双指横向误触浏览器返回） */
#mobile-menu-overlay,
.lightbox-overlay,
dialog,
dialog::backdrop,
[popover] {
    overscroll-behavior: contain;
}

pre,
.vfield-table-wrapper,
.luxury-table-wrap,
.tbl-wrap,
.cmp-scroll,
.tbl-scroll,
.sdk-tabs {
    overscroll-behavior-x: contain;
}

/* 原生 <details> 手风琴固有尺寸过渡（排除已有自定义 WAAPI 的 .faq-list） */
:not(.faq-list) > details::details-content {
    block-size: 0;
    overflow-y: clip;
    content-visibility: hidden;
    transition: block-size 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                content-visibility 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    transition-behavior: allow-discrete;
}

:not(.faq-list) > details[open]::details-content {
    block-size: auto;
    content-visibility: visible;
}

@starting-style {
    dialog[open],
    [popover]:popover-open {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

/* 顶部阅读进度金丝：纯 CSS Scroll-Driven Animations 合成器线程驱动 */
.qz-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5px;
    z-index: 9999;
    pointer-events: none;
    transform-origin: 0 50%;
    transform: scaleX(0);
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.55) 20%, rgba(242, 222, 197, 0.9) 50%, rgba(201, 169, 97, 0.55) 80%, transparent);
}

@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .qz-scroll-progress {
            opacity: 0.75;
            animation: qz-scroll-progress-grow linear both;
            animation-timeline: scroll(root block);
        }
    }
}

@keyframes qz-scroll-progress-grow {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* 顶部导航栏平静过渡：禁止滚动时宽高、padding 或圆角变化，仅淡入背景色与底边线 */
#header,
#nav,
.nav,
.site-header,
.topbar {
    transition: background-color 0.3s ease-out, border-color 0.3s ease-out !important;
}

#header.scrolled {
    padding-top: max(14px, env(safe-area-inset-top)) !important;
    padding-bottom: 14px !important;
}

#header::before {
    transition: opacity 0.3s ease-out !important;
}

/* 区块预触发入场动画（提前 120px 触发，500ms 平滑落位） */
.qz-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.qz-reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* 横向跑马灯：80s 匀速循环、两侧羽化遮罩、悬停暂停 */
.ticker-inner,
.qz-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ticker-track,
.qz-marquee-track {
    animation-duration: 80s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
}

.ticker-inner:hover .ticker-track,
.qz-marquee:hover .qz-marquee-track {
    animation-play-state: paused;
}

/* ── 9. 尊重用户的减弱动效偏好 ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    @view-transition {
        navigation: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .qz-reveal,
    .rv,
    .reveal,
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}