/* ============================================================================
   app.css — DeepTouch 手写样式层（设计语言 + 安全区 + 动画 + 兼容回退）

   结构：
   1. 全局基础          — 字体 / 选择 / 触控
   2. 安全区与视口       — safe-area 三级降级（普通值 → constant() → env()）
   3. 交互反馈          — 按压 / 悬停 / 触控目标
   4. Blazor 运行时     — 错误 UI / 加载进度环
   5. 设计语言          — Apple 风格排版 / 卡片 / 答题组件 / 毛玻璃组件
   6. 动画              — 全部使用 transform/opacity，前缀双写
   7. 兼容回退层        — 旧内核（微信 X5 / iOS 14）不认识的语法，一次性类级回退

   说明：原子类由 tailwind.css（Tailwind v4 + lightningcss 降级）提供；
   本文件在其之前加载，同优先级冲突时 tailwind.css 覆盖本文件 ——
   旧内核丢弃 tailwind 的新语法声明后，会自然回退到本文件的基础值。
   ============================================================================ */

/* ============================================================================
   1. 全局基础
   ============================================================================ */
html, body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
}

::selection {
    background: rgba(225, 29, 72, 0.18);
}

* {
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    -webkit-tap-highlight-color: transparent;
}

h1:focus {
    outline: none;
}

button,
a,
[role="button"] {
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

/* ============================================================================
   2. 安全区与视口（Apple 规范三级降级：普通值 → constant()（iOS 11.0）→ env()（iOS 11.2+））
   ============================================================================ */
html {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: constant(safe-area-inset-top);
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.safe-area-bottom {
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-top {
    padding-top: 0;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

/* 视口高度适配：动态视口高度（移动端工具栏） */
.min-h-screen-safe {
    min-height: 100vh;
    min-height: 100dvh;
}

/* 底部安全区（Home 指示条）留白 */
.pb-safe {
    padding-bottom: 0.75rem;
    padding-bottom: calc(0.75rem + constant(safe-area-inset-bottom));
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
}

html {
    scroll-behavior: smooth;
}

/* 平滑滚动（移动端惯性） */
.scroll-smooth-page {
    -webkit-overflow-scrolling: touch;
}

/* ============================================================================
   3. 交互反馈
   ============================================================================ */
/* 禁用用户选择（提升 PWA 原生应用感） */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 触控目标最小尺寸（Apple HIG 44pt） */
.min-touch {
    min-height: 44px;
    min-width: 44px;
}

/* 悬停提升：仅在有 hover 能力的设备生效（触屏不误触发） */
.hover-lift {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@media (hover: hover) {
    .hover-lift:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.14);
    }
}

/* 按压缩放反馈（原生 App 手感） */
.press {
    transition: transform 0.12s ease, opacity 0.15s ease;
}

.press:active {
    transform: scale(0.965);
}

/* ============================================================================
   4. Blazor 运行时
   ============================================================================ */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* 加载进度环（长手定位属性，兼容旧内核） */
.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    top: 20vh;
    right: 0;
    bottom: auto;
    left: 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #e11d48;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    top: calc(20vh + 3.25rem);
    right: 0;
    bottom: auto;
    left: 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

@media (max-width: 480px) {
    .loading-progress {
        width: 6.5rem;
        height: 6.5rem;
        top: 24vh;
    }

    .loading-progress-text {
        top: calc(24vh + 3rem);
    }

    .watermark-text {
        font-size: 2rem;
    }
}

/* ============================================================================
   5. 设计语言（Apple 风格：大留白、超大标题、克制配色、柔和阴影）
   ============================================================================ */
/* ---------- Hero 区（首页顶部，柔和玫瑰渐变 + 光斑） ---------- */
.hero-gradient {
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.9) 0%, transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(255, 182, 199, 0.55) 0%, transparent 46%),
        radial-gradient(circle at 78% 86%, rgba(244, 114, 182, 0.28) 0%, transparent 50%),
        linear-gradient(150deg, #fff5f7 0%, #ffe4e8 45%, #ffd6dd 100%);
}

/* ---------- Apple 式超大标题（clamp 前补固定值回退） ---------- */
.display-title {
    font-size: 2.1rem;
    font-size: clamp(2.1rem, 6.5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: #1d1d1f;
}

.hero-eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e11d48;
}

.hero-subtitle {
    font-size: 0.95rem;
    font-size: clamp(0.95rem, 2.6vw, 1.15rem);
    line-height: 1.55;
    color: #6e6e73;
}

/* ---------- 分区标题 ---------- */
.section-title {
    font-size: 1.15rem;
    font-size: clamp(1.15rem, 3.4vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1d1d1f;
}

.section-count {
    font-size: 0.8rem;
    color: #86868b;
}

/* ---------- Apple 柔和阴影 ---------- */
.apple-shadow {
    box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.16), 0 4px 14px -8px rgba(0, 0, 0, 0.08);
}

.apple-shadow-sm {
    box-shadow: 0 8px 28px -14px rgba(0, 0, 0, 0.12), 0 2px 8px -4px rgba(0, 0, 0, 0.06);
}

/* 细分割线 */
.hairline {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* ---------- 结果页身份卡（Apple 渐变 Hero） ---------- */
.result-hero {
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.18) 0%, transparent 40%);
}

/* ---------- 问卷卡片（手机横向左图右文，桌面竖向） ---------- */
.quiz-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .quiz-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

.question-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-radius: 1.25rem;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}

    .question-card:active {
        transform: scale(0.98);
    }

.card-cover {
    width: 108px;
    min-height: 108px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.card-body {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0.875rem;
}

.card-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.card-subtitle {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 640px) {
    .question-card {
        flex-direction: column;
    }

    .card-cover {
        width: 100%;
        height: 110px;
        min-height: 110px;
    }

    .card-body {
        padding: 0.75rem 1rem;
    }
}

.tag {
    background: #f3e8ff;
    color: #7c3aed;
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
}

.fake-stat {
    color: #9ca3af;
}

/* ---------- 答题组件 ---------- */
.option-item {
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.option-item:active {
    transform: scale(0.985);
}

@keyframes ripple {
    from {
        opacity: 0.45;
        transform: scale(0.3);
    }

    to {
        opacity: 0;
        transform: scale(2.2);
    }
}

.option-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(225, 29, 72, 0.16) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
}

.option-item.is-selected::after {
    animation: ripple 0.5s ease-out;
}

.option-item.is-selected .option-letter {
    background: #e11d48;
    color: #fff;
    border-color: #e11d48;
}

/* 进度条渐变填充 */
.progress-bar-fill {
    background: linear-gradient(90deg, #e11d48, #fb7185);
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 10px rgba(225, 29, 72, 0.35);
}

/* 恢复进度后的定位落点 */
.quiz-question {
    scroll-margin-top: 12px;
}

@keyframes resumeTargetPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.5);
    }

    35% {
        box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.28);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(225, 29, 72, 0);
    }
}

.is-resume-target {
    border-radius: 0.75rem;
    animation: resumeTargetPulse 1.5s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .is-resume-target {
        animation: none;
        outline: 2px solid rgba(225, 29, 72, 0.45);
        outline-offset: 6px;
    }
}

/* 粘性分类标题（毛玻璃胶囊） */
.sticky-cat-header {
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.08);
}

/* 维度条形图（从 0 生长，--bar-delay 控制交错） */
@keyframes growBar {
    from {
        width: 0;
    }
}

.dim-bar {
    animation: growBar 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--bar-delay, 0ms);
}

.dim-bar-rose {
    background-image: linear-gradient(90deg, #fda4af, #f43f5e);
}

.dim-bar-emerald {
    background-image: linear-gradient(90deg, #6ee7b7, #10b981);
}

.dim-bar-amber {
    background-image: linear-gradient(90deg, #fcd34d, #f59e0b);
}

/* 命中维度卡片背景 */
.dim-card-match {
    background-image: linear-gradient(90deg, rgba(236, 253, 245, 0.65), #fff);
    border-color: #a7f3d0;
}

/* ---------- 毛玻璃组件（@supports 特性检测守卫：不支持时用纯色底） ---------- */
/* 主 CTA 按钮 */
.btn-cta {
    background-image: linear-gradient(90deg, #e11d48, #fb7185);
    color: #fff;
    box-shadow: 0 10px 24px -8px rgba(225, 29, 72, 0.45);
}

.btn-cta:disabled {
    background-image: none;
    background-color: #d1d5db;
    box-shadow: none;
    cursor: not-allowed;
}

/* 玻璃小按钮（悬浮分享等） */
.glass-chip {
    background-color: rgba(255, 255, 255, 0.9);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass-chip {
        background-color: rgba(255, 255, 255, 0.74);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
}

/* 底部操作栏（三级 bottom 降级 + 毛玻璃增强） */
.bottom-bar {
    bottom: 0;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    background-color: rgba(255, 255, 255, 0.94);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, 0.12);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .bottom-bar {
        background-color: rgba(255, 255, 255, 0.82);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }
}

/* 答题面板遮罩 */
.overlay-mask {
    background-color: rgba(0, 0, 0, 0.5);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .overlay-mask {
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
}

/* 猴子悬浮按钮（三级 bottom 降级） */
.float-monkey {
    bottom: 70px;
    bottom: calc(70px + constant(safe-area-inset-bottom));
    bottom: calc(70px + env(safe-area-inset-bottom));
}

/* ---------- Toast（顶部安全区三级降级） ---------- */
@keyframes toastIn {
    from {
        opacity: 0;
        transform: translate(-50%, -14px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translate(-50%, -10px) scale(0.96);
    }
}

.toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 1rem;
    top: calc(1rem + constant(safe-area-inset-top));
    top: calc(1rem + env(safe-area-inset-top));
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: calc(100vw - 2.5rem);
    padding: 0.65rem 1.1rem;
    border-radius: 9999px;
    background: rgba(17, 24, 39, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 0.875rem;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.35);
    animation: toastIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.toast-leaving {
    animation: toastOut 0.28s ease-in forwards;
}

/* ---------- DevHub 开关滑块（v4 的 translate-* 类改用 translate 属性，旧内核不支持，此处用 transform 实现） ---------- */
.switch-knob-off {
    transform: translateX(0.125rem);
}

.switch-knob-on {
    transform: translateX(1rem);
}

/* ============================================================================
   6. 动画
   ============================================================================ */
/* 猴子修改文字时的抖动动效 */
.monkey-jitter {
    animation: jitter 0.15s ease-in-out;
}

@keyframes jitter {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(2px, -2px) rotate(1deg);
    }

    50% {
        transform: translate(-2px, 1px) rotate(-1deg);
    }

    75% {
        transform: translate(-1px, -1px) rotate(0.5deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

/* 警告弹窗 */
.animate-warning-popup {
    animation: warningPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes warningPop {
    0% {
        transform: scale(0) rotate(-10deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.2) rotate(3deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* 卡片交错入场 */
@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-rise {
    animation: riseIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 底部面板滑入 */
@keyframes sheetUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.sheet-slide-up {
    animation: sheetUp 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 遮罩淡入 */
@keyframes overlayFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.overlay-fade-in {
    animation: overlayFadeIn 0.25s ease-out;
}

/* 结果身份卡入场 */
@keyframes identityIn {
    0% {
        opacity: 0;
        transform: scale(0.94) translateY(22px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-identity-in {
    animation: identityIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 结果页内容区块依次浮现 */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 滚动显现（配合 js/reveal.js） */
.reveal-hidden {
    opacity: 0;
    -webkit-transform: translateY(28px);
    transform: translateY(28px);
    -webkit-transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-visible {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

/* ============================================================================
   7. 兼容回退层
   ----------------------------------------------------------------------------
   Tailwind v4 对旧内核（Chrome < 88 的微信 X5、iOS < 15 的 Safari）存在
   三类无法自动降级的语法，这里一次性补齐（类级，仅覆盖实际使用的类）：

   a) :where() / :is() 选择器（Chrome 88+）→ 展开为无 :where 的等价选择器
      - space-y-* / divide-y：同时把逻辑属性 margin-block 换回物理 margin
      - group-open:* / open:*：展开为 [open] 属性选择器
   b) 渐变插值语法（`to right in oklab`，Chrome 111+）→ 传统写法
   c) 逻辑属性（margin-block-*，Chrome 87+）→ 物理属性（随 space-y 一并处理）

   原则：本区块在 tailwind.css 之前加载；旧内核丢弃 tailwind 的新语法
   声明后回退到这里；现代浏览器则被 tailwind.css 的声明覆盖（同属性
   后者生效），因此不会双重生效。
   ============================================================================ */

/* ---------- space-y-*（去 :where、逻辑属性 → 物理属性） ---------- */
.space-y-0\.5 > :not(:last-child) {
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
    margin-bottom: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
}

.space-y-1 > :not(:last-child) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing) * var(--tw-space-y-reverse));
    margin-bottom: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
}

.space-y-2 > :not(:last-child) {
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-bottom: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
}

.space-y-2\.5 > :not(:last-child) {
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
    margin-bottom: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
}

.space-y-3 > :not(:last-child) {
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-bottom: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
}

.space-y-4 > :not(:last-child) {
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-bottom: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}

.space-y-5 > :not(:last-child) {
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-bottom: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
}

.space-y-6 > :not(:last-child) {
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-bottom: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}

.space-y-8 > :not(:last-child) {
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-bottom: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
}

/* ---------- divide-y（去 :where） ---------- */
.divide-y > :not(:last-child) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
}

/* ---------- group-open:* / open:*（展开 [open] 选择器） ---------- */
[open] .group-open\:hidden {
    display: none;
}

[open] .group-open\:inline {
    display: inline;
}

[open].open\:bg-white {
    background-color: var(--color-white);
}

[open].open\:shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

/* ---------- 渐变（去 `in oklab` 插值语法） ---------- */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-pink-400,
.from-purple-50,
.from-purple-500 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

/* 整卡链接：绝对定位铺满卡片（QuestionCard.razor / index.html 静态卡片共用） */
.card-hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}