/* ============================================================
   星运 · 每日运势 — 设计系统
   基调：粉色精修（玫瑰粉 #EC4899 + 淡紫 #8B5CF6）
   玻璃仅用于 chrome（输入卡），内容卡片保持不透明以保证可读性
   ============================================================ */

:root {
    /* ---- 品牌色 ---- */
    --primary: #EC4899;
    --primary-dark: #BE185D;
    --primary-light: #F9A8D4;
    --primary-soft: #FCE7F3;
    --secondary: #7C3AED;          /* 5.70:1 on white —— 用于小字/图标均达标 */
    --secondary-light: #A78BFA;
    --secondary-soft: #EDE9FE;

    /* ---- 语义色 ---- */
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;

    /* ---- 表面 ---- */
    --bg: #FDF2F8;
    --bg-deep: #FCE7F3;
    --card: #FFFFFF;
    --card-soft: #FFF9FC;

    /* ---- 文字（对白底对比度：正文 9.9:1 / 次要 5.8:1 / 弱化 4.6:1，均 ≥4.5:1）---- */
    --text: #43384A;
    --text-light: #6B6275;
    --text-faint: #7C7286;
    --text-on-primary: #FFFFFF;

    /* ---- 描边与阴影 ---- */
    --border: #F3E4EF;
    --border-strong: #EBD3E4;
    --shadow-sm: 0 1px 2px rgba(131, 24, 67, .04), 0 2px 8px rgba(131, 24, 67, .04);
    --shadow-md: 0 4px 16px rgba(131, 24, 67, .07), 0 1px 3px rgba(131, 24, 67, .04);
    --shadow-lg: 0 12px 32px rgba(131, 24, 67, .10), 0 2px 8px rgba(131, 24, 67, .05);
    --shadow-primary: 0 8px 24px rgba(236, 72, 153, .28);

    /* ---- 圆角 ---- */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-full: 999px;

    /* ---- 节奏 ---- */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --t-fast: 160ms;
    --t-base: 260ms;
    --t-slow: 420ms;

    /* ---- 兼容旧变量（module 内联样式可能引用）---- */
    --primary-color: var(--primary);
    --secondary-color: var(--secondary);
    --bg-color: var(--bg);
    --text-color: var(--text);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
                 'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
}

/* ---- 星光背景（纯 CSS，不阻塞渲染）---- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(236, 72, 153, .16), transparent 60%),
        radial-gradient(ellipse 60% 40% at 85% 15%, rgba(139, 92, 246, .12), transparent 55%),
        radial-gradient(ellipse 70% 45% at 10% 30%, rgba(249, 168, 212, .16), transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, #FFF7FB 45%, var(--bg) 100%);
    pointer-events: none;
}

/* 细碎星点 */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, rgba(236, 72, 153, .30), transparent),
        radial-gradient(1.5px 1.5px at 78% 12%, rgba(139, 92, 246, .28), transparent),
        radial-gradient(1px 1px at 34% 42%, rgba(236, 72, 153, .22), transparent),
        radial-gradient(1.5px 1.5px at 88% 58%, rgba(249, 168, 212, .40), transparent),
        radial-gradient(1px 1px at 22% 72%, rgba(139, 92, 246, .22), transparent),
        radial-gradient(1.5px 1.5px at 62% 86%, rgba(236, 72, 153, .26), transparent),
        radial-gradient(1px 1px at 46% 8%, rgba(139, 92, 246, .20), transparent),
        radial-gradient(1px 1px at 92% 32%, rgba(236, 72, 153, .20), transparent);
    pointer-events: none;
}

.container {
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 16px 40px;
    position: relative;
}

/* ============================================================
   头部
   ============================================================ */
.header {
    text-align: center;
    padding: 20px 0 28px;
}

.header .logo,
#logoImg {
    width: 76px;
    height: 76px;
    margin: 0 auto 14px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(236, 72, 153, .28));
    animation: logoFloat 5s var(--ease-out) infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.header h1,
#siteTitle {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .5px;
    line-height: 1.3;
    background: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 45%, var(--secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary-dark); /* 不支持渐变文字时的回退 */
    margin-bottom: 8px;
}

.header p,
#siteSubtitle {
    font-size: 14px;
    color: var(--text-light);
    letter-spacing: .3px;
}

/* ============================================================
   输入卡片（唯一的玻璃层 — chrome）
   ============================================================ */
.input-card {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--r-lg);
    padding: 24px 20px 22px;
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .8);
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}

/* 玻璃上沿高光 */
.input-card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
}

.input-card h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.input-card h2 svg { color: var(--primary); flex-shrink: 0; }

/* ---- 图标槽（SVG 注入容器）---- */
.icon-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

.icon-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -3px;
    margin-right: 5px;
    color: var(--primary);
    line-height: 0;
}

.icon-inline svg { display: block; }

.h2-icon {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    line-height: 0;
}

.h2-icon svg { display: block; }

/* ---- 表单字段 ---- */
/* ============================================================
   折叠式选择器
   默认只显示「图标 + 名称 + 当前值」的文字提示行，
   点击后才展开对应的上下滑动滚轮（同时只展开一个）。
   ============================================================ */
.form-hint {
    margin: -4px 0 14px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-faint);
}

/* ---- 临时下线遮罩（后台开启后由脚本显示）---- */
.offline-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg);
}

.offline-gate[hidden] { display: none; }

.offline-box {
    max-width: 380px;
    text-align: center;
}

.offline-icon {
    display: inline-flex;
    margin-bottom: 18px;
    color: var(--primary);
}

.offline-box h2 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
}

.offline-msg {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-light);
}

.picker-field {
    margin-bottom: 8px;
    border-radius: var(--r-md);
    transition: background var(--t-fast);
}

/* ---- 折叠行（文字提示，也是展开触发器）---- */
.field-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;              /* ≥44pt 触控标准 */
    padding: 0 14px;
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    color: var(--text);
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.field-trigger:hover { border-color: var(--primary-light); }

.field-trigger:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(236, 72, 153, .14);
}

.field-icon {
    display: flex;
    flex: 0 0 auto;
    color: var(--primary);
    opacity: .85;
}

.field-icon svg { display: block; }

.field-label {
    flex: 0 0 auto;
    font-weight: 600;
    letter-spacing: .2px;
}

/* 当前值：右对齐，等宽数字避免跳动 */
.field-value {
    flex: 1 1 auto;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--primary-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-chevron {
    display: flex;
    flex: 0 0 auto;
    color: var(--text-faint);
    transition: transform var(--t-base), color var(--t-fast);
}

.field-chevron svg { display: block; }

/* ---- 展开态 ---- */
.picker-field.open { background: var(--primary-soft); }

.picker-field.open .field-trigger {
    border-color: var(--primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 0 0 4px rgba(236, 72, 153, .10);
}

.picker-field.open .field-chevron {
    transform: rotate(180deg);
    color: var(--primary);
}

/* ---- 展开面板：max-height 过渡（值精确，无跳变）----
   --panel-h 由 JS 在展开时按 scrollHeight 精确写入，
   HTML 上的内联值是禁用 JS 时的兜底（必须 ≥ 滚轮高 + 内边距）。
   visibility 用来把收起的滚轮移出 Tab 焦点链 —— 否则键盘用户会
   Tab 进一个看不见的控件。 */
.field-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    background: var(--card);
    border: 1.5px solid transparent;   /* 收起时不占视觉，展开时与触发行连成一体 */
    border-top: none;
    border-radius: 0 0 var(--r-md) var(--r-md);
    transition: max-height var(--t-base) cubic-bezier(.4, 0, .2, 1),
                opacity var(--t-fast),
                visibility 0s linear var(--t-base);
}

.picker-field.open .field-panel {
    max-height: var(--panel-h, 210px);
    opacity: 1;
    visibility: visible;
    border-color: var(--primary);
    transition: max-height var(--t-base) cubic-bezier(.4, 0, .2, 1),
                opacity var(--t-fast),
                visibility 0s;
}

.field-panel-inner { padding: 12px 12px 14px; }

/* 展开面板内的滚轮：去掉自带描边，融入面板 */
.field-panel .wheel { box-shadow: inset 0 0 0 1.5px var(--border); }

/* ---- 滑动音效/震动开关 ---- */
.feedback-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 44px;
    margin: 4px 0 14px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-faint);
    background: transparent;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--t-fast), background var(--t-fast);
}

.feedback-toggle:hover { background: var(--primary-soft); }

.feedback-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, .3);
}

.feedback-toggle.is-on { color: var(--primary-dark); }

/* 开/关两枚图标按状态切换 */
.feedback-toggle .ft-icon-off { display: none; }
.feedback-toggle:not(.is-on) .ft-icon-on { display: none; }
.feedback-toggle:not(.is-on) .ft-icon-off { display: inline-flex; }

.feedback-toggle span[data-icon] svg { display: block; }

/* 原生 select（非滚轮字段的降级/保留样式）*/
select {
    width: 100%;
    padding: 13px 40px 13px 16px;
    font-size: 16px;
    font-family: inherit;
    color: var(--text);
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23EC4899' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    min-height: 48px;
}

select:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(236, 72, 153, .14);
}

/* ============================================================
   iOS 风格滚轮选择器
   ============================================================ */
.wheel {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
    background: linear-gradient(180deg, var(--card-soft) 0%, var(--card) 50%, var(--card-soft) 100%);
    /* 用内阴影描边而非 border：box-sizing:border-box 下 border 会让
       clientHeight 比 style.height 少 2*border，导致选中行偏移。
       内阴影不占布局空间，clientHeight 精确等于设定高度。 */
    box-shadow: inset 0 0 0 1.5px var(--border);
    cursor: pointer;
    transition: box-shadow var(--t-fast);
    -webkit-tap-highlight-color: transparent;
}

.wheel:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1.5px var(--primary), 0 0 0 4px rgba(236, 72, 153, .14);
}

.wheel-scroll {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* 上下淡出，强化景深 */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
}

.wheel-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

.wheel-item {
    height: 44px;                     /* 44pt 触控标准 */
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    font-size: 17px;
    font-weight: 500;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
    transition: color var(--t-fast) var(--ease-out), transform 120ms var(--ease-out),
                opacity 120ms var(--ease-out), font-weight 120ms var(--ease-out);
    will-change: transform, opacity;
    user-select: none;
}

.wheel-item.is-active {
    color: var(--primary-dark);
    font-weight: 700;
    letter-spacing: .2px;
}

/* 中间选中带 */
.wheel-highlight {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    height: 44px;
    margin-top: -22px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(236, 72, 153, .10), rgba(139, 92, 246, .09));
    border-top: 1.5px solid rgba(236, 72, 153, .30);
    border-bottom: 1.5px solid rgba(236, 72, 153, .30);
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(236, 72, 153, .08);
    transition: transform 140ms var(--ease-out), background 140ms var(--ease-out),
                box-shadow 140ms var(--ease-out);
}

/* 按下时的轻微收缩加深：明确告诉用户"这一下点到了"。
   整块滚轮都是确认热区，没有这个反馈就不知道点击有没有被接收。 */
.wheel.is-pressed .wheel-highlight {
    transform: scale(.955);
    background: linear-gradient(90deg, rgba(236, 72, 153, .20), rgba(139, 92, 246, .18));
    box-shadow: 0 2px 14px rgba(236, 72, 153, .20);
}

/* 选中带两侧的刻度点 */
.wheel-highlight::before,
.wheel-highlight::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    border-radius: 50%;
    background: var(--primary);
    opacity: .5;
}

.wheel-highlight::before { left: -7px; }
.wheel-highlight::after  { right: -7px; }

/* 高亮带不做任何放大脉冲。
   滑动反馈只走声音 + 震动（SLFeedback），停下落位时不再有第二次反馈——
   之前那层 scaleY(1.16) 脉冲会让高亮带在选中瞬间"再放大一下"，已移除。 */

/* ============================================================
   按钮
   ============================================================ */
.btn-primary {
    width: 100%;
    min-height: 52px;
    padding: 15px 24px;
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: .5px;
    color: var(--text-on-primary);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: none;
    border-radius: var(--r-full);
    cursor: pointer;
    box-shadow: var(--shadow-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    position: relative;
    overflow: hidden;
    transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-base) var(--ease-out),
                filter var(--t-fast);
    -webkit-tap-highlight-color: transparent;
}

.btn-primary svg { flex-shrink: 0; }

.btn-primary:hover {
    filter: brightness(1.05);
    box-shadow: 0 10px 30px rgba(236, 72, 153, .36);
}

.btn-primary:active {
    transform: scale(.975);
    box-shadow: 0 4px 14px rgba(236, 72, 153, .30);
}

.btn-primary:focus-visible {
    outline: none;
    box-shadow: var(--shadow-primary), 0 0 0 4px rgba(236, 72, 153, .28);
}

/* 掠光效果 */
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
}

.btn-primary:hover::after { animation: sheen 900ms var(--ease-out); }

@keyframes sheen {
    from { left: -120%; }
    to   { left: 130%; }
}

.btn-submit { margin-top: 20px; }

/* ============================================================
   结果区
   ============================================================ */
.result-section { display: none; }
.result-section.active { display: block; }

/* ============================================================
   模块卡片（内容层 — 不透明，保证可读性）
   ============================================================ */
.module-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

/* 顶部品牌色细线 */
.module-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    opacity: .85;
}

.module-card:hover {
    box-shadow: var(--shadow-lg);
}

/* 各模块顶线配色微差，增强识别 */
.wuxing-card::before   { background: linear-gradient(90deg, #10B981, #34D399); }
.zonghe-card::before   { background: linear-gradient(90deg, var(--primary), var(--secondary)); }
.ganqing-card::before  { background: linear-gradient(90deg, #F472B6, #FB7185); }
.caiyun-card::before   { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.shiye-card::before    { background: linear-gradient(90deg, #3B82F6, #60A5FA); }
.jiankang-card::before { background: linear-gradient(90deg, #10B981, #6EE7B7); }
.huangli-card::before  { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }
.xingyun-card::before  { background: linear-gradient(90deg, #EC4899, #F472B6); }

.module-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--border);
}

.module-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--primary-soft), var(--secondary-soft));
    color: var(--primary-dark);
}

.module-icon svg { width: 19px; height: 19px; }

.module-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .3px;
}

/* ---- 八字命格 ---- */
.bazi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.bazi-item {
    background: linear-gradient(180deg, var(--card-soft), var(--primary-soft));
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 12px 6px;
    text-align: center;
    transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast);
}

.bazi-item.clickable { cursor: pointer; }

.bazi-item.clickable:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.bazi-item .label {
    font-size: 11px;
    color: var(--text-light);
    margin-bottom: 6px;
    letter-spacing: .5px;
}

.bazi-item .ganzhi {
    font-size: 19px;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: 1px;
    line-height: 1.25;
}

.bazi-item .shishen {
    font-size: 11px;
    color: var(--secondary);
    margin-top: 5px;
    font-weight: 600;
}

.personality-box {
    background: linear-gradient(135deg, var(--primary-soft), var(--secondary-soft));
    border-radius: var(--r-md);
    padding: 15px 16px;
    margin-bottom: 14px;
}

.personality-box .label {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.personality-box p {
    font-size: 14px;
    color: var(--text);
    line-height: 1.75;
}

.solar-info, .lunar-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text);
    background: var(--card-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 11px 14px;
    margin-bottom: 8px;
    line-height: 1.6;
}

.solar-info svg, .lunar-info svg { color: var(--primary); flex-shrink: 0; }

.lunar-info { color: var(--primary-dark); font-weight: 600; }

/* 展开详情 */
.zhu-detail-box {
    margin-top: 14px;
    padding: 16px;
    background: var(--card-soft);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-md);
    position: relative;
    animation: detailIn var(--t-base) var(--ease-out);
}

@keyframes detailIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.detail-content { font-size: 14px; line-height: 1.8; color: var(--text); }

.detail-section { margin-bottom: 12px; }
.detail-section:last-child { margin-bottom: 0; }

.detail-section .label {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 5px;
}

.close-detail {
    position: absolute;
    top: 9px; right: 10px;
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast);
}

.close-detail:hover { background: var(--primary-light); transform: rotate(90deg); }

.close-detail:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, .3);
}

/* ---- 五行分析 ---- */
.wuxing-chart { margin-bottom: 16px; }

.wuxing-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
}

.wx-label {
    width: 26px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    flex-shrink: 0;
    text-align: center;
}

.wx-bar {
    flex: 1;
    height: 9px;
    background: var(--primary-soft);
    border-radius: var(--r-full);
    overflow: hidden;
}

.wx-fill {
    height: 100%;
    border-radius: var(--r-full);
    transition: width 900ms var(--ease-out);
}

.wx-value {
    width: 34px;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.wuxing-summary, .wx-compare {
    font-size: 14px;
    color: var(--text);
    line-height: 1.75;
    background: var(--card-soft);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    margin-bottom: 10px;
}

.xiyong-box {
    background: linear-gradient(135deg, var(--secondary-soft), var(--primary-soft));
    border-radius: var(--r-md);
    padding: 15px 16px;
    margin-top: 12px;
}

.xiyong-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.xiyong-item:last-child { margin-bottom: 0; }

.xiyong-desc {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.75;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-strong);
}

/* ---- 评分圈 ---- */
.score-circle {
    width: 104px;
    height: 104px;
    margin: 4px auto 16px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--primary) calc(var(--score, 0) * 1%), var(--primary-soft) 0);
    position: relative;
    box-shadow: 0 8px 24px rgba(236, 72, 153, .18);
}

.score-circle::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: var(--card);
}

.score-num, .score-level {
    position: relative;
    z-index: 1;
}

.score-num {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-dark);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.score-level {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-light);
    margin-top: 4px;
    letter-spacing: .5px;
}

/* ---- 标签 ---- */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
    margin-bottom: 14px;
}

.yun-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 13px;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--r-full);
    letter-spacing: .3px;
    line-height: 1.5;
}

.tag-pink   { background: #FCE7F3; color: #9D174D; }
.tag-purple { background: #EDE9FE; color: #5B21B6; }
.tag-gray   { background: #F1F0F4; color: #4B5563; }
.tag-gold   { background: #FEF3C7; color: #92400E; }
.tag-blue   { background: #DBEAFE; color: #1E40AF; }
.tag-green  { background: #D1FAE5; color: #065F46; }
.tag-orange { background: #FFEDD5; color: #9A3412; }
.tag-yellow { background: #FEF9C3; color: #854D0E; }

.yun-text, .yunshi-desc {
    font-size: 14px;
    color: var(--text);
    line-height: 1.8;
    text-align: center;
    margin-bottom: 12px;
}

/* ---- 进度条（.yun-progress = 轨道，.progress-bar = 填充，与模块结构一致）---- */
.yun-progress {
    height: 8px;
    background: var(--primary-soft);
    border-radius: var(--r-full);
    overflow: hidden;
    margin-top: 14px;
}

.progress-bar {
    height: 100%;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 900ms var(--ease-out);
}

.progress-bar.gold { background: linear-gradient(90deg, #FBBF24, #F59E0B); }
.progress-bar.blue { background: linear-gradient(90deg, #60A5FA, #3B82F6); }

/* 兼容：若某模块使用独立的填充层 */
.progress-fill {
    height: 100%;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 900ms var(--ease-out);
}

/* ---- 黄历 ---- */
.jianchu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--secondary-soft), var(--primary-soft));
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 14px;
}

.jianchu-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: 1px;
}

.jianchu-type {
    padding: 4px 11px;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 700;
    background: var(--card);
    color: var(--primary-dark);
    border: 1px solid var(--border-strong);
}

.jianchu-desc {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 14px;
}

.yi-ji-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.yi-section, .ji-section {
    background: var(--card-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 13px 12px;
}

.yi-section { border-top: 3px solid var(--success); }
.ji-section { border-top: 3px solid var(--danger); }

.yi-section .label, .ji-section .label {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 9px;
    display: block;
}

.yi-section .label { color: #065F46; }
.ji-section .label { color: #991B1B; }

.yi-tag, .ji-tag {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 5px 6px 0;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--r-sm);
    line-height: 1.5;
}

.yi-tag { background: #D1FAE5; color: #065F46; }
.ji-tag { background: #FEE2E2; color: #991B1B; }

/* ---- 幸运元素 ---- */
.lucky-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    background: var(--card-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: 10px;
    transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-fast);
}

.lucky-item:hover {
    transform: translateX(3px);
    border-color: var(--primary-light);
}

.lucky-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--primary-soft), var(--secondary-soft));
    color: var(--primary-dark);
}

.lucky-icon svg { width: 19px; height: 19px; }

.lucky-info { flex: 1; min-width: 0; }

.lucky-info .label {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 3px;
    letter-spacing: .3px;
}

.lucky-info .value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.color-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.color-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-full);
}

/* 彩色圆点（颜色本身作为标记，文字始终保持可读）*/
.color-dot {
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, .12);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5);
}

/* ============================================================
   Banner / 页脚
   ============================================================ */
.banner-module {
    margin: 20px 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    display: none;
}

.banner-module.active { display: block; }

.banner-module img { width: 100%; display: block; }

.footer {
    text-align: center;
    padding: 26px 16px 18px;
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.9;
}

.footer p { margin-bottom: 4px; }

.footer a {
    color: var(--text-light);
    text-decoration: none;
    transition: color var(--t-fast);
}

.footer a:hover { color: var(--primary-dark); }

#disclaimer {
    font-size: 12px;
    color: var(--text-faint);
    margin-bottom: 8px;
}

/* ============================================================
   动效基态
   元素初始隐藏状态由 animations.js 通过 gsap.set() 施加，
   此处不预设隐藏规则 —— 保证 GSAP 缺失时内容始终可见。
   ============================================================ */

/* 3D 倾斜容器 */
.tilt {
    transform-style: preserve-3d;
    will-change: transform;
}

/* 数字滚动 */
.countup { font-variant-numeric: tabular-nums; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 480px) {
    .container { padding: 18px 13px 32px; }

    .header { padding: 14px 0 22px; }
    .header h1, #siteTitle { font-size: 23px; }
    .header .logo, #logoImg { width: 66px; height: 66px; }

    .input-card { padding: 20px 15px 18px; border-radius: var(--r-md); }

    /* 折叠行：窄屏收紧间距，但保持 ≥44pt 触控高度 */
    .field-trigger { min-height: 52px; padding: 0 12px; gap: 8px; font-size: 14.5px; }
    .field-panel-inner { padding: 10px 8px 12px; }

    .module-card { padding: 17px 14px; border-radius: var(--r-md); }
    .module-title { font-size: 16px; }

    .bazi-row { gap: 6px; }
    .bazi-item { padding: 10px 4px; }
    .bazi-item .ganzhi { font-size: 17px; }
    .bazi-item .shishen { font-size: 10px; }

    .score-circle { width: 92px; height: 92px; }
    .score-num { font-size: 28px; }

    .yi-ji-row { grid-template-columns: 1fr; }
}

/* 超窄屏 */
@media (max-width: 340px) {
    .bazi-item .ganzhi { font-size: 15px; }
    .wheel-item { font-size: 16px; }
}

/* ============================================================
   无障碍：动效降级
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .wheel-scroll { scroll-behavior: auto; }
    .wheel-item { transition: none; }
    /* 按下反馈直接到位，不做缩放过渡 */
    .wheel-highlight { transition: none; }
    /* 折叠面板改为瞬开瞬合（不做高度过渡） */
    .field-panel { transition: none; }
    .field-chevron { transition: none; }

    .header .logo, #logoImg { animation: none; }
    .tilt { transform: none !important; }
}

/* ============================================================
   无障碍：不支持 backdrop-filter 时的不透明回退
   ============================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .input-card {
        background: var(--card);
        border-color: var(--border);
    }
}

/* 高对比度偏好 */
@media (prefers-contrast: more) {
    .input-card {
        background: var(--card);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-color: var(--border-strong);
    }
    .wheel-item { color: var(--text); }
}