/* ============================================================
 * 命理测算客户端 - 样式表
 * 开发日期：2026-03-26
 * 设计风格：深色渐变 + 毛玻璃效果 + 柔和光影
 * ============================================================ */

/* ============================================================
 * 第一部分：全局样式重置
 * 移除浏览器默认边距，统一盒模型
 * ============================================================ */

/* 通配符选择器：应用于所有元素 */
* {
    margin: 0;
    /* 移除所有外边距 */
    padding: 0;
    /* 移除所有内边距 */
    box-sizing: border-box;
    /* 盒模型：宽度包含padding和border，方便布局计算 */
}

:root {
    --app-bg-deep: #aeb9d2;
    --app-bg-mid: #bad0e2;
    --app-bg-soft: #c5d0e7;
    --app-overlay-strong: rgba(231, 238, 250, 0.30);
    --app-overlay-soft: rgba(212, 227, 245, 0.28);
    --app-surface: rgba(56, 74, 110, 0.36);
    --app-surface-2: rgba(64, 82, 120, 0.46);
    --app-border: rgba(220, 232, 250, 0.42);
    --app-text-main: #f4f8ff;
}

/* ============================================================
 * 第二部分：页面主体样式
 * 背景渐变、字体、整体布局
 * ============================================================ */

body {
    /* 字体栈：优先使用Segoe UI（Windows），然后是微软雅黑，最后回退到通用字体 */
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;

    /* 
     * 背景渐变：135度对角线渐变
     * 从深紫色 (#1a1a2e) 开始
     * 过渡到深蓝紫色 (#16213e)
     * 最后到更深的海军蓝 (#0f0f1f)
     * 营造神秘深邃的算命氛围
     */
    background:
        linear-gradient(180deg, var(--app-overlay-strong) 0%, var(--app-overlay-soft) 62%, rgba(188, 203, 228, 0.42) 100%),
        url('https://fortunetell.ai/images/home/bg.jpg') center top / cover fixed no-repeat,
        linear-gradient(145deg, var(--app-bg-soft) 0%, var(--app-bg-mid) 50%, var(--app-bg-deep) 100%);
    color: var(--app-text-main);
    /* 文字颜色：白色，在深色背景上清晰可见 */
    min-height: 100vh;
    /* 最小高度为视口高度，确保背景填满整个屏幕 */
    padding: 20px;
    /* 内边距，让内容不贴边 */
}

.home-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.home-bg-image {
    position: absolute;
    inset: -8%;
    background:
        linear-gradient(rgba(222, 233, 248, 0.42), rgba(184, 203, 230, 0.32)),
        url('https://fortunetell.ai/images/home/bg.jpg') center/cover no-repeat,
        radial-gradient(circle at 22% 20%, rgba(181, 206, 242, 0.44), rgba(181, 206, 242, 0) 42%),
        radial-gradient(circle at 78% 24%, rgba(197, 219, 246, 0.38), rgba(197, 219, 246, 0) 45%),
        radial-gradient(circle at 50% 78%, rgba(180, 202, 235, 0.28), rgba(180, 202, 235, 0) 46%),
        linear-gradient(145deg, var(--app-bg-soft) 0%, var(--app-bg-mid) 50%, var(--app-bg-deep) 100%);
    filter: blur(1px);
    transform: scale(1.05);
}

.home-bg-radial {
    position: absolute;
    inset: 0;
    background: radial-gradient(at 50% 45%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 82%);
}

.home-bg-canvas-wrap {
    position: absolute;
    inset: 60px 0 0;
    z-index: 1;
}

#bgOrbCanvas {
    width: 100%;
    height: calc(100% - 60px);
    display: block;
}

.home-bg-fade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(rgba(255, 255, 255, 0.42) 0%, rgba(220, 233, 251, 0.24) 56%, rgba(174, 191, 220, 0.16) 100%);
    opacity: 0.36;
}

/* ============================================================
 * 第三部分：主容器（内容卡片）
 * 毛玻璃效果 + 圆角 + 阴影
 * ============================================================ */

.container {
    margin: 0 auto;
    /* 水平居中：上下为0，左右自动 */

    /* 
     * 毛玻璃背景效果
     * rgba(255,255,255,0.08) 表示白色，透明度8%
     * 配合 backdrop-filter 实现半透明模糊效果
     */
    background: var(--app-surface);

    /* 背景模糊：10px，产生毛玻璃效果 */
    backdrop-filter: blur(10px);

    border-radius: 2px;
    /* 大圆角，让卡片更柔和 */
    padding: 30px;
    /* 内边距，内容与卡片边缘保持距离 */

    /* 外阴影：向下8px，模糊32px，黑色半透明，产生立体感 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    /* 边框：1px半透明白色，增强玻璃质感 */
    border: 1px solid var(--app-border);
}

/* ============================================================
 * 第四部分：标题样式
 * ============================================================ */

h1 {
    text-align: center;
    /* 文字居中 */
    margin-bottom: 30px;
    /* 下边距，与表单保持距离 */
    font-size: 28px;
    /* 字体大小 */
    letter-spacing: 2px;
    /* 字间距，增加大气感 */

    /* 
     * 文字渐变效果
     * 从金色 (#ffd89b) 渐变到淡蓝色 (#c7e9fb)
     * 需要配合 background-clip 实现
     */
    background: linear-gradient(135deg, #fff6d9, #e8f4ff);

    /* 
     * 关键属性：让背景渐变只应用于文字区域
     * -webkit-background-clip 是 Chrome/Safari 的私有属性
     * background-clip 是标准属性，text 值表示只裁剪到文字
     */
    -webkit-background-clip: text;
    background-clip: text;

    /* 文字颜色透明，让背景渐变透出来 */
    color: transparent;
    text-shadow: 0 2px 10px rgba(20, 30, 52, 0.24);
}

#heroTitle {
    letter-spacing: 1px;
    font-size: clamp(26px, 3vw, 34px);
    display: inline-block;
    margin: 0 auto;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(241, 207, 125, 0.45);
    background: linear-gradient(120deg, rgba(241, 207, 125, 0.18), rgba(196, 220, 255, 0.2));
    color: #f4f8ff;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    -webkit-background-clip: initial;
    background-clip: initial;
    text-shadow: 0 1px 2px rgba(20, 30, 52, 0.35);
}

/* ============================================================
 * 第五部分：表单组（标签+输入框的组合）
 * ============================================================ */

.form-group {
    margin-bottom: 18px;
    /* 每个表单组之间的下边距 */
}

/* 
 * 表单行：用于将多个表单组横向排列
 * 例如：年份、月份、日期并排显示
 */
.form-row {
    display: flex;
    /* 弹性布局，子元素水平排列 */
    gap: 20px;
    /* 子元素之间的间距 */
    margin-bottom: 0;
    /* 移除默认下边距，由内部.form-group控制 */
}

/* 表单行内部的表单组自动占满宽度 */
.form-row .form-group {
    flex: 1;
    /* 弹性增长系数为1，平均分配剩余空间 */
    margin-bottom: 18px;
    /* 保留下边距 */
}

/* ============================================================
 * 第六部分：标签样式
 * ============================================================ */

label {
    display: block;
    /* 块级元素，独占一行 */
    margin-bottom: 8px;
    /* 下边距，与输入框保持距离 */
    font-weight: 600;
    /* 字重：中等粗细（500） */
    font-size: 14px;
    /* 字体大小 */
    color: #eef4ff;
    /* 浅灰色，比纯白柔和 */
    text-shadow: 0 1px 2px rgba(28, 42, 66, 0.28);
}

/* ============================================================
 * 第七部分：输入框和下拉框样式
 * ============================================================ */

input,
select {
    width: 100%;
    /* 宽度占满父容器 */
    padding: 12px 14px;
    /* 内边距：上下12px，左右14px，让输入框有舒适的空间 */
    border: 1px solid rgba(138, 170, 210, 0.46);
    /* 移除默认边框 */
    border-radius: 14px;
    /* 圆角，与现代UI风格一致 */
    font-size: 16px;
    /* 字体大小，避免移动端缩放 */

    /* 背景：90%不透明的白色，略微透出底层 */
    background: rgba(243, 248, 255, 0.92);
    color: #20304a;

    /* 过渡动画：所有属性变化时平滑过渡，时长0.2秒 */
    transition: all 0.2s;

    font-family: inherit;
    /* 继承父元素的字体 */
}

input::placeholder {
    color: rgba(66, 84, 113, 0.66);
}

/* 输入框获得焦点时的样式 */
input:focus,
select:focus {
    outline: none;
    /* 移除浏览器默认的聚焦外框（通常为蓝色） */
    background: #fdfefe;
    /* 聚焦时变为纯白色背景 */

    /* 
     * 外阴影模拟聚焦效果
     * 0 0 0 3px 表示向外扩散3px
     * rgba(255, 107, 107, 0.3) 是半透明的红色
     * 这样聚焦时会有一圈红色光晕，与主题色呼应
     */
    border-color: rgba(138, 170, 210, 0.9);
    box-shadow: 0 0 0 3px rgba(157, 190, 230, 0.36);
}

/* ============================================================
 * 第八部分：按钮样式
 * ============================================================ */

button {
    width: 100%;
    /* 宽度占满父容器 */
    padding: 14px;
    /* 内边距，让按钮有足够高度 */

    /* 渐变背景：从亮红色渐变到深红色，增加立体感 */
    background: linear-gradient(135deg, #ff6b6b, #ee5a5a);

    color: white;
    /* 文字颜色白色 */
    border: none;
    /* 移除默认边框 */
    border-radius: 40px;
    /* 大圆角，形成胶囊形状 */
    font-size: 18px;
    /* 字体稍大，突出按钮 */
    font-weight: bold;
    /* 粗体 */
    cursor: pointer;
    /* 鼠标悬停时显示手型，表示可点击 */
    margin-top: 15px;
    /* 上边距，与表单保持距离 */

    /* 过渡动画 */
    transition: transform 0.2s, box-shadow 0.2s;

    letter-spacing: 2px;
    /* 字间距，让文字更舒展 */
}

/* 按钮悬停效果 */
button:hover {
    transform: translateY(-2px);
    /* 向上移动2px，产生浮起效果 */

    /* 悬停时阴影加深，增强立体感 */
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
}

/* 按钮点击效果（鼠标按下时） */
button:active {
    transform: translateY(0);
    /* 恢复原位，模拟按下效果 */
}

/* ============================================================
 * 第九部分：结果展示区域
 * ============================================================ */

.result-box {
    margin-top: 30px;
    /* 上边距，与按钮保持距离 */
    padding: 24px;
    /* 内边距，让内容不贴边 */

    /* 半透黑背景，让文字更清晰 */
    background: rgba(0, 0, 0, 0.5);

    border-radius: 20px;
    /* 圆角 */
    line-height: 1.7;
    /* 行高1.7倍，增加可读性 */
    font-size: 15px;
    /* 字体大小 */

    /* 左侧边框：4px红色实线，作为强调装饰 */
    border-left: 4px solid #ff6b6b;

    /* 长单词或URL自动换行 */
    word-wrap: break-word;

    /* 动画在末尾定义，等待后面的 @keyframes */
    animation: fadeIn 0.3s ease;
}

.main-content {
    position: relative;
    flex: 1;
    padding: 20px;
}

/* 结果框内的标题样式 */
.result-box h3 {
    color: #ffd93d;
    /* 金色，突出显示 */
    margin-bottom: 12px;
    /* 下边距 */
    font-size: 18px;
    /* 字体大小 */
}

/* 结果框内的段落样式 */
.result-box p {
    margin: 10px 0;
    /* 上下边距10px */
}

/* 结果框内的分隔线样式 */
.result-box hr {
    margin: 15px 0;
    border-color: rgba(255, 255, 255, 0.2);
}

/* ============================================================
 * 第十部分：加载动画
 * ============================================================ */

.loading {
    text-align: center;
    /* 文字居中 */
    margin-top: 25px;
    /* 上边距 */
    font-size: 16px;
    /* 字体大小 */
    color: #ffd93d;
    /* 金色文字 */

    /* 应用脉冲动画，无限循环 */
    animation: pulse 1.5s infinite;

    padding: 12px;
    /* 内边距 */
    background: rgba(0, 0, 0, 0.4);
    /* 半透黑背景 */
    border-radius: 40px;
    /* 胶囊圆角 */
    letter-spacing: 2px;
    /* 字间距 */
}

/* ============================================================
 * 第十一部分：动画关键帧定义
 * ============================================================ */

/**
 * 淡入动画
 * 用于结果出现时的渐显效果
 */
@keyframes fadeIn {
    from {
        opacity: 0;
        /* 起始：完全透明 */
        transform: translateY(10px);
        /* 起始：向下偏移10px */
    }

    to {
        opacity: 1;
        /* 结束：完全不透明 */
        transform: translateY(0);
        /* 结束：回到原位 */
    }
}

/**
 * 脉冲动画
 * 用于加载状态的闪烁效果
 */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        /* 起始和结束：完全不透明 */
    }

    50% {
        opacity: 0.6;
        /* 中间：半透明，形成闪烁感 */
    }
}

/* ============================================================
 * 第十二部分：响应式设计（移动端适配）
 * 当屏幕宽度小于 600px 时，调整部分样式
 * ============================================================ */

@media (max-width: 600px) {

    /* 主容器内边距减小，适应小屏幕 */
    .container {
        padding: 20px;
    }

    /* 标题字体缩小 */
    h1 {
        font-size: 24px;
    }

    /* 表单行改为垂直排列 */
    .form-row {
        flex-direction: column;
        /* 改为列方向（上下排列） */
        gap: 0;
        /* 移除间距，由内部的.form-group控制 */
    }

    /* 按钮字体稍小 */
    button {
        font-size: 16px;
        padding: 12px;
    }

    /* 结果框内边距减小 */
    .result-box {
        padding: 16px;
    }
}

/* ============================================================
 * 第十三部分：辅助样式（可选，便于调试）
 * ============================================================ */

/* 禁用状态样式（用于按钮禁用时，但通常由JS控制，这里预留） */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    /* 禁用时显示禁止光标 */
    transform: none;
    /* 禁用时无悬停效果 */
    box-shadow: none;
}

/* 错误状态样式（可用于输入框错误时，预留） */
input.error,
select.error {
    border: 2px solid #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

/* ============================================================
 * 第十四部分：启动加载动画（Splash Screen）
 * ============================================================ */

/* 启动遮罩层：全屏覆盖，居中显示 */
.splash-screen {
    position: fixed;
    /* 固定定位，覆盖整个窗口 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f1f 100%);
    z-index: 9999;
    /* 最高层级，覆盖所有内容 */
    display: flex;
    /* 弹性布局，用于居中 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    transition: opacity 0.5s ease, visibility 0.5s ease;
    /* 淡出过渡效果 */
}

/* 启动内容容器 */
.splash-content {
    text-align: center;
    /* 文字居中 */
    animation: splashFadeIn 0.8s ease;
    /* 淡入动画 */
}

/* 启动图标（大号水晶球） */
.splash-icon {
    font-size: 80px;
    /* 大图标 */
    margin-bottom: 20px;
    animation: iconFloat 2s ease-in-out infinite;
    /* 浮动动画 */
    filter: drop-shadow(0 0 20px rgba(255, 107, 107, 0.5));
    /* 发光效果 */
}

/* 启动标题 */
.splash-title {
    font-size: 32px;
    font-weight: bold;
    background: linear-gradient(135deg, #ffd89b, #c7e9fb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 12px;
    letter-spacing: 4px;
}

/* 启动副标题 */
.splash-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
    letter-spacing: 2px;
}

/* 旋转加载器（圆圈） */
.splash-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top: 3px solid #ff6b6b;
    border-right: 3px solid #ffd93d;
    border-radius: 50%;
    animation: spinnerRotate 0.8s linear infinite;
}

/* 隐藏启动屏幕（JS控制添加此类） */
.splash-screen.hide {
    opacity: 0;
    /* 透明 */
    visibility: hidden;
    /* 隐藏，不再响应点击 */
    pointer-events: none;
    /* 禁止交互 */
}

/* ============================================================
 * 第十五部分：启动动画关键帧
 * ============================================================ */

/* 启动内容淡入动画 */
@keyframes splashFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 图标浮动动画 */
@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* 旋转加载器动画 */
@keyframes spinnerRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ============================================================
 * 首页重构补充：顶部导航
 * ============================================================ */

body {
    padding-top: 108px;
}

.site-header {
    position: fixed;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 30;
}

.site-header-inner {
    width: min(1500px, calc(100% - 48px));
    margin: 0 auto;
    min-height: 64px;
    border-radius: 24px;
    background: linear-gradient(120deg, rgba(170, 191, 217, 0.55), rgba(128, 145, 177, 0.44));
    border: 1px solid rgba(230, 243, 255, 0.32);
    backdrop-filter: blur(12px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.site-brand {
    font-size: 28px;
    font-style: italic;
    color: #2b2036;
    opacity: 0.88;
    font-family: Georgia, "Times New Roman", serif;
    white-space: nowrap;
}

.site-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.tool-btn {
    appearance: none;
    border: 1px solid rgba(205, 226, 255, 0.28);
    background: rgba(44, 56, 86, 0.44);
    color: #eef7ff;
    border-radius: 999px;
    min-height: 30px;
    padding: 4px 12px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.tool-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(241, 207, 125, 0.72);
}

.login-btn {
    color: #f3df9c;
}
.login-btn.is-logged-in {
    color: #a8d4ff;
    background: rgba(80, 130, 220, 0.18);
    border-radius: 8px;
    padding: 4px 12px;
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lang-btn {
    min-width: 44px;
    padding: 4px 10px;
    font-weight: 600;
}

.lang-btn[data-lang="zh-CN"] { color: #f8edcb; }
.lang-btn[data-lang="zh-TW"] { color: #f8e0be; }
.lang-btn[data-lang="en"] { color: #d9ecff; }

/* ===== 登录弹窗 ===== */
.member-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(4, 10, 30, 0.78);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.member-modal {
    width: min(560px, 100%);
    border-radius: 20px;
    border: 1px solid rgba(120, 170, 240, 0.32);
    background: linear-gradient(145deg, rgba(18, 30, 62, 0.97), rgba(28, 46, 88, 0.95));
    padding: 36px 40px 30px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    position: relative;
}

.member-subbrand {
    text-align: center;
    font-size: 13px;
    color: rgba(180, 210, 255, 0.65);
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.member-title {
    text-align: center;
    margin: 0 0 28px;
    color: #eef6ff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* 资料面板标题更小 */
.member-modal.is-profile .member-title {
    font-size: 20px;
    margin-bottom: 20px;
}

.member-close {
    position: absolute;
    right: 14px;
    top: 12px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 999px;
    padding: 0;
    margin: 0;
    font-size: 20px;
    line-height: 1;
    background: rgba(255,255,255,0.08);
    color: #b0c8ef;
    border: none;
}
.member-close:hover { background: rgba(255,255,255,0.15); }

/* 手机号输入框 */
.member-phone-input {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    font-size: 17px;
    border-radius: 12px;
    border: 1.5px solid rgba(200, 220, 255, 0.25);
    background: rgba(240, 246, 255, 0.96);
    color: #1a2540;
    outline: none;
    margin-bottom: 14px;
    transition: border-color .2s;
}
.member-phone-input::placeholder { color: #9aaac4; }
.member-phone-input:focus { border-color: #6aa6f0; }

/* 验证码行 */
.member-code-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-bottom: 14px;
    align-items: stretch;
}

.member-code-input {
    box-sizing: border-box;
    padding: 14px 16px;
    font-size: 15px;
    border-radius: 12px;
    border: 1.5px solid rgba(120, 160, 220, 0.35);
    background: rgba(25, 40, 75, 0.82);
    color: #dceeff;
    outline: none;
    transition: border-color .2s;
}
.member-code-input::placeholder { color: rgba(180, 210, 255, 0.45); }
.member-code-input:focus { border-color: #6aa6f0; }

.member-get-code-btn {
    white-space: nowrap;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, #1f5dbf, #2a7be4);
    color: #dff0ff;
    border: none;
    cursor: pointer;
    transition: opacity .2s;
    min-width: 110px;
    margin-top: 0;
}
.member-get-code-btn:hover:not(:disabled) { opacity: 0.85; }
.member-get-code-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 同意协议 */
.member-agree {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 13px;
    color: rgba(180, 210, 255, 0.7);
    cursor: pointer;
    line-height: 1.5;
}
.member-agree input[type="checkbox"] {
    margin: 2px 0 0;
    accent-color: #4a90e2;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.member-agree a { color: #80b8ff; text-decoration: none; }
.member-agree a:hover { text-decoration: underline; }

/* 主登录按钮 */
.member-login-main {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 4px;
    border-radius: 12px;
    background: linear-gradient(135deg, #d4a429, #f0c84a, #c8901c);
    color: #2a1d00;
    border: none;
    cursor: pointer;
    margin-top: 0;
    margin-bottom: 14px;
    transition: opacity .2s, transform .1s;
    box-shadow: 0 4px 18px rgba(200, 150, 20, 0.4);
}
.member-login-main:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
.member-login-main:active:not(:disabled) { transform: translateY(0); }
.member-login-main:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* 消息提示 */
.member-message {
    min-height: 20px;
    color: #ffaaa0;
    font-size: 13px;
    text-align: center;
    line-height: 1.5;
}
.member-message.ok { color: #80f0b8; }

/* 调试提示 */
.member-debug-tip {
    font-size: 12px;
    color: rgba(180, 210, 255, 0.45);
    text-align: center;
    margin-top: 6px;
}

/* 面板切换 */
.member-panel { display: none; }
.member-panel.active { display: block; }

/* 资料面板 */
.member-profile-block {
    border-radius: 12px;
    border: 1px solid rgba(165, 198, 241, 0.28);
    background: rgba(15, 28, 58, 0.7);
    padding: 16px 18px;
    color: #dceaff;
    line-height: 1.9;
    font-size: 14px;
    margin-bottom: 14px;
}
.member-profile-block strong {
    color: #a8d0ff;
    font-weight: 500;
}
.member-profile-logout {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background: rgba(200, 60, 60, 0.22);
    border: 1px solid rgba(220, 100, 100, 0.3);
    color: #ffaaa0;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s;
    margin-top: 0;
}
.member-profile-logout:hover { background: rgba(200, 60, 60, 0.36); }

/* ===== 用户下拉菜单 ===== */
.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(10, 20, 60, 0.22), 0 1px 4px rgba(0,0,0,0.12);
    overflow: hidden;
    z-index: 10100;
    display: none;
    flex-direction: column;
    border: 1px solid rgba(180, 200, 230, 0.4);
}
.user-dropdown.open { display: flex; }

.user-dropdown-header {
    padding: 12px 16px 10px;
    font-size: 13px;
    color: #6b7a99;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 14px;
    color: #2c3e6a;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background .15s;
    border-radius: 0;
    margin-top: 0;
    min-height: unset;
    letter-spacing: 0;
    font-weight: 400;
}
.user-dropdown-item:hover { background: rgba(80, 130, 220, 0.1); color: #1a3a80; }
.user-dropdown-item .dd-icon {
    width: 18px;
    text-align: center;
    color: #6e8cbf;
    flex-shrink: 0;
}
.user-dropdown-item.dd-logout { color: #c0392b; }
.user-dropdown-item.dd-logout .dd-icon { color: #c0392b; }
.user-dropdown-item.dd-logout:hover { background: rgba(192, 57, 43, 0.08); }

.site-tools { position: relative; }

.container {
    width: min(1100px, calc(100% - 32px));
    margin: 10px auto 28px;
    padding: 24px;
        position: relative;
        z-index: 20;
    border: 1px solid var(--app-border);
    border-radius: 22px;
}

body.app-huangli .container {
    width: min(1248px, calc(100% - 32px));
}

body.app-huangli .main-content {
    width: min(1200px, 100%);
    margin: 0 auto;
}

.hero-header {
    margin-bottom: 16px;
}

body.app-huangli .hero-header {
    width: min(1200px, 100%);
    margin: 0 auto 16px;
}

body.app-huangli #heroTitle {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 18px;
}

.feature-stage {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.feature-main-card,
.feature-side-card {
    border-radius: 18px;
    border: 1px solid var(--app-border);
    background: linear-gradient(145deg, rgba(20, 31, 52, 0.78), rgba(32, 47, 76, 0.68));
    padding: 16px;
}

.feature-main-card {
    position: relative;
    overflow: hidden;
}

.feature-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 24px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #2e291d;
    background: linear-gradient(120deg, #ffd87f, #ffedbf);
}

.feature-main-card h2 {
    margin-top: 10px;
    color: #f7fbff;
    font-size: 30px;
    line-height: 1.08;
}

.feature-en {
    margin-top: 6px;
    color: #b8cfef;
    letter-spacing: 0.16em;
    font-size: 12px;
}

.feature-desc {
    margin-top: 10px;
    color: #deebff;
    line-height: 1.7;
    max-width: 420px;
}

.feature-action {
    margin-top: 14px;
    width: auto;
    min-width: 128px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    background: linear-gradient(120deg, #ffd58a, #ccddff);
    color: #2f3142;
    letter-spacing: 0.06em;
    box-shadow: none;
}

.feature-side-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.feature-side-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    opacity: 0.95;
}
.intro-stage {
    margin-bottom: 16px;
    display: grid;
    gap: 12px;
}
.hot-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(250, 215, 132, 0.4);
    background: linear-gradient(120deg, rgba(38, 53, 88, 0.62), rgba(57, 79, 122, 0.55));
}
.hot-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 28px;
    border-radius: 999px;
    color: #2f2b1e;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: linear-gradient(120deg, #ffd97e, #ffebb9);
}
.hot-text-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.hot-title {
    color: #f5f8ff;
    font-size: 18px;
    font-weight: 700;
}
.hot-sub {
    color: #b3c8ea;
    font-size: 12px;
    letter-spacing: 0.14em;
}
.hot-action {
    margin-top: 0;
    width: auto;
    min-height: 34px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: 0.04em;
    background: linear-gradient(120deg, #f3d387, #c8dcff);
    color: #2e3142;
    font-weight: 700;
    box-shadow: none;
}
.insight-block {
    border-radius: 14px;
    padding: 14px;
    border: 1px solid rgba(153, 192, 240, 0.33);
    background: linear-gradient(135deg, rgba(39, 58, 96, 0.58), rgba(27, 42, 74, 0.52));
}
.insight-block h2 {
    color: #f2f7ff;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.2;
    margin-bottom: 8px;
}
.insight-block p {
    color: #c6d7f3;
    font-size: 14px;
}
.question-ticker {
    margin-top: 10px;
    overflow: hidden;
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
}
.ticker-item {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(183, 211, 250, 0.38);
    background: rgba(31, 45, 75, 0.62);
    color: #d9e8ff;
    font-size: 13px;
    animation: tickerSlide 12s linear infinite;
}
.ticker-item:nth-child(2) { animation-delay: 1.6s; }
.ticker-item:nth-child(3) { animation-delay: 3.2s; }
.ticker-item:nth-child(4) { animation-delay: 4.8s; }
@keyframes tickerSlide {
    0%, 20% { transform: translateY(0); opacity: 0.9; }
    24%, 44% { transform: translateY(-2px); opacity: 1; }
    48%, 100% { transform: translateY(0); opacity: 0.9; }
}
.mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.mode-card {
    width: 100%;
    margin-top: 0;
    border-radius: 14px;
    border: 1px solid rgba(161, 197, 242, 0.32);
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    background: linear-gradient(140deg, rgba(34, 51, 82, 0.66), rgba(44, 68, 108, 0.56));
    letter-spacing: normal;
    box-shadow: none;
}
.mode-card:hover {
    transform: translateY(-2px);
    border-color: rgba(241, 207, 125, 0.72);
    box-shadow: 0 8px 22px rgba(18, 29, 52, 0.28);
}
.mode-index {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #9fc0ee;
}
.mode-name {
    font-size: 16px;
    color: #eef6ff;
}
.mode-desc {
    font-size: 12px;
    color: #bfd2ef;
}
.mode-card.is-disabled {
    opacity: 0.72;
    cursor: not-allowed;
    filter: grayscale(0.12);
}

.hero-kicker {
    margin: 0 0 8px;
    color: #6ff3d8;
    letter-spacing: 0.2em;
    font-size: 12px;
}

.hero-subtitle {
    margin-top: 10px;
    margin-bottom: 0;
    color: #acbddf;
    max-width: 760px;
    line-height: 1.7;
}

.top-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-width: 0;
}

.top-nav .main-menu {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 2px;
}

.top-nav .main-menu::-webkit-scrollbar {
    display: none;
}

.top-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    color: #eef7ff;
    text-decoration: none;
    border: 1px solid rgba(205, 226, 255, 0.25);
    background: rgba(44, 56, 86, 0.42);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    font-size: 13px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.top-nav a:hover {
    transform: translateY(-1px);
    border-color: rgba(241, 207, 125, 0.72);
    background: linear-gradient(120deg, rgba(241, 207, 125, 0.65), rgba(196, 220, 255, 0.58));
    color: #2e2b35;
}

.top-nav a.active {
    border: 1px solid transparent;
    background: linear-gradient(120deg, #f1cf7d, #c4dcff);
    color: #2e2b35;
    box-shadow: 0 4px 14px rgba(206, 223, 255, 0.42);
}

.top-nav a.is-disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.top-nav a.is-disabled:hover {
    transform: none;
    color: #eef7ff;
    border-color: rgba(205, 226, 255, 0.25);
    background: rgba(44, 56, 86, 0.42);
    box-shadow: none;
}

.main-content {
    border-radius: 0;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
}


.app-form {
    display: none;
    position: relative;
    z-index: 1;
}

.app-form.active {
    display: block;
}

.bazi-workspace {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.huangli-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 16px;
}

.huangli-intro-card,
.huangli-query-card {
    border-radius: 16px;
    border: 1px solid rgba(166, 201, 244, 0.28);
    background: linear-gradient(140deg, rgba(31, 48, 81, 0.76), rgba(39, 62, 100, 0.62));
    padding: 18px;
}

.huangli-kicker {
    color: #f0d28e;
    letter-spacing: 0.12em;
    font-size: 12px;
    margin-bottom: 8px;
}

.huangli-title {
    color: #f6f9ff;
    font-size: 28px;
    line-height: 1.25;
}

.huangli-desc {
    margin-top: 10px;
    color: #cadcf6;
    line-height: 1.8;
}

.huangli-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.huangli-tag-list span {
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(200, 223, 252, 0.3);
    background: rgba(33, 49, 82, 0.56);
    color: #e4efff;
    font-size: 13px;
}

.huangli-query-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.huangli-action-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}

.secondary-action {
    margin-top: 0;
    border-radius: 14px;
    background: rgba(229, 239, 255, 0.12);
    border: 1px solid rgba(176, 208, 245, 0.35);
    color: #e7f1ff;
    box-shadow: none;
}

.secondary-action:hover {
    box-shadow: none;
    border-color: rgba(241, 207, 125, 0.72);
}

.bazi-solution-panel,
.bazi-input-panel {
    border-radius: 16px;
    border: 1px solid rgba(166, 201, 244, 0.28);
    background: linear-gradient(140deg, rgba(31, 48, 81, 0.76), rgba(39, 62, 100, 0.62));
    padding: 16px;
}

.bazi-solution-kicker {
    color: #9cc1f0;
    letter-spacing: 0.12em;
    font-size: 12px;
    margin-bottom: 8px;
}

.bazi-solution-title {
    color: #f2f7ff;
    font-size: 28px;
    line-height: 1.25;
}

.bazi-solution-metrics {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #d2e1f8;
    font-size: 15px;
}

.bazi-solution-metrics strong {
    color: #fef4cf;
}

.bazi-cta {
    margin-top: 16px;
    width: auto;
    min-width: 210px;
    padding: 12px 24px;
    border-radius: 14px;
    background: linear-gradient(120deg, #111824, #263752);
    color: #f9fbff;
    letter-spacing: 0.04em;
    box-shadow: none;
}

.bazi-benefit-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.bazi-benefit-card {
    border-radius: 12px;
    border: 1px solid rgba(178, 208, 246, 0.24);
    background: rgba(230, 241, 255, 0.08);
    padding: 12px;
    text-align: center;
}

.bazi-benefit-card h3 {
    font-size: 22px;
    color: #f3f8ff;
}

.bazi-benefit-card p {
    margin-top: 8px;
    color: #c5d7f2;
}

.bazi-benefit-card small {
    display: block;
    margin-top: 8px;
    color: #a8bcd9;
}

.bazi-safe-tip {
    margin-top: 16px;
    color: #b9cbe7;
    text-align: center;
}

.bazi-input-head {
    margin-bottom: 14px;
}

.bazi-input-head h3 {
    color: #f4f9ff;
    font-size: 32px;
    line-height: 1.1;
}

.bazi-input-head p {
    margin-top: 8px;
    color: #c8dbf5;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.choice-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choice-chip {
    margin-top: 0;
    padding: 10px 8px;
    border-radius: 12px;
    border: 1px solid rgba(166, 201, 244, 0.34);
    background: rgba(236, 245, 255, 0.1);
    color: #e8f2ff;
    font-size: 16px;
    letter-spacing: 0;
    box-shadow: none;
}

.choice-chip.active {
    border-color: rgba(132, 201, 245, 0.82);
    background: rgba(121, 196, 244, 0.24);
    color: #ddf2ff;
}

.form-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-check-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

.form-check-row label {
    margin: 0;
}

.form-help {
    display: block;
    margin-top: 6px;
    color: #abc2df;
    font-size: 13px;
}

.timezone-tip {
    margin-top: 8px;
    border-radius: 12px;
    border: 1px solid rgba(129, 179, 240, 0.45);
    background: rgba(123, 171, 237, 0.18);
    padding: 10px 12px;
    color: #dbecff;
}

.timezone-tip small {
    display: block;
    margin-top: 4px;
    color: #b9d3f4;
}

.hidden-field {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

#submitBtnHehun,
#submitBtnHuangli {
    margin-top: 16px;
    border-radius: 14px;
    background: linear-gradient(120deg, #4e9cb0, #4d8cae);
    letter-spacing: 0.04em;
}

/* ===== BAZI CONFIRM CARD ===== */
.bazi-confirm-card {
    background: #fff;
    border-radius: 20px;
    padding: 22px 20px 20px;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 6px 32px rgba(0,0,0,0.18);
    color: #1a1a1a;
    position: relative;
}
.bazi-confirm-top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
}
.bazi-confirm-title {
    font-size: 20px;
    font-weight: 700;
    color: #b87018;
    letter-spacing: 0.06em;
}
.bazi-confirm-close {
    position: absolute;
    right: 0;
    top: -2px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #888;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    cursor: pointer;
}
.bazi-confirm-field {
    display: flex;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
    gap: 12px;
    min-height: 52px;
}
.bazi-confirm-field:last-of-type { border-bottom: none; }
.bazi-confirm-label {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    min-width: 52px;
    flex-shrink: 0;
}
.bazi-confirm-name {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: #bbb;
    background: transparent;
}
.bazi-confirm-name:focus { color: #1a1a1a; }
.bazi-confirm-gender {
    display: flex;
    gap: 10px;
    flex: 1;
}
.bazi-gender-btn {
    padding: 7px 18px;
    border-radius: 10px;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    color: #888;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.15s;
}
.bazi-gender-btn.active {
    background: rgba(245,160,48,0.12);
    border-color: #f5a030;
    color: #e07200;
}
.bazi-confirm-field--link { cursor: pointer; }
.bazi-confirm-value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    color: #bbb;
    gap: 6px;
}
.bazi-confirm-value span:first-child { flex: 1; }
.bazi-confirm-chevron {
    color: #ccc;
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.bazi-confirm-loc {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #bbb;
    background: transparent;
}
.bazi-confirm-loc:focus { color: #1a1a1a; }
.bazi-confirm-submit {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    background: #f5a030;
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.06em;
    transition: background 0.15s;
}
.bazi-confirm-submit:hover { background: #e49020; }

.app-extra-fields {
    width: 100%;
}

.app-extra-group {
    display: block;
    min-height: auto;
    align-items: initial;
}

.app-extra-group .bazi-confirm-label {
    display: block;
    min-width: 0;
    margin-bottom: 8px;
}

.app-extra-group .bazi-confirm-name,
.app-extra-group input,
.app-extra-group select {
    width: 100%;
    border: 1px solid #d9e1ec;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    color: #1a1a1a;
    pointer-events: auto;
}

.app-extra-group .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.app-extra-group .form-group {
    margin-bottom: 0;
}

.app-extra-group .form-group label {
    color: #4d5e79;
    text-shadow: none;
    font-size: 13px;
    margin-bottom: 6px;
}

@media (max-width: 680px) {
    .app-extra-group .form-row {
        grid-template-columns: 1fr;
    }
}

/* ===== BAZI PICKER MODAL ===== */
.bazi-picker-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.48);
    z-index: 10100;
    align-items: flex-end;
    justify-content: center;
}
.bazi-picker-modal.open { display: flex; }
.bazi-picker-dialog {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    animation: slideUpSheet 0.28s ease;
}
@keyframes slideUpSheet {
    from { transform: translateY(100%); }
    to   { transform: translateY(0);    }
}
.bazi-picker-tabs-row {
    display: flex;
    align-items: center;
    padding: 16px 16px 8px;
    gap: 4px;
    border-bottom: 1px solid #f0f0f0;
}
.bazi-picker-tab {
    padding: 7px 18px;
    border-radius: 100px;
    background: transparent;
    color: #888;
    font-size: 15px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}
.bazi-picker-tab.active {
    background: #f5a030;
    color: #fff;
}
.bazi-picker-x {
    margin-left: auto;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #888;
    font-size: 14px;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
/* Scroll picker panes */
.bazi-picker-pane {
    display: none;
    position: relative;
    height: 280px; /* 7 × 40px */
    overflow: hidden;
    user-select: none;
}
.bazi-picker-pane.active { display: block; }
.bazi-picker-cols {
    display: flex;
    height: 280px;
}
.bazi-picker-col {
    flex: 1;
    overflow: hidden;
    height: 280px;
    position: relative;
    cursor: grab;
}
.bazi-picker-col:active { cursor: grabbing; }
.bazi-col-list {
    will-change: transform;
}
.bazi-col-item {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #bbb;
    pointer-events: auto;
    transition: font-size 0.08s, color 0.08s;
}
.bazi-col-item.bazi-col-active {
    color: #1a1a1a;
    font-size: 17px;
    font-weight: 600;
}
.bazi-col-pad { pointer-events: none; }
/* Selection indicator: two horizontal lines around center item */
.bazi-picker-selector {
    position: absolute;
    top: 120px; /* (280/2) - 20 = 120 */
    left: 8px; right: 8px;
    height: 40px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    pointer-events: none;
    z-index: 2;
}
/* Fade masks */
.bazi-picker-mask-top,
.bazi-picker-mask-bottom {
    position: absolute;
    left: 0; right: 0;
    height: 110px;
    pointer-events: none;
    z-index: 3;
}
.bazi-picker-mask-top {
    top: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);
}
.bazi-picker-mask-bottom {
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);
}
/* GanZhi picker pane */
#pickerPaneGanzhi.bazi-picker-pane {
    height: auto;
    display: none;
    padding: 8px 16px 0;
}
#pickerPaneGanzhi.bazi-picker-pane.active { display: block; }
.bazi-ganzhi-labels {
    display: flex;
    justify-content: space-around;
    padding: 8px 16px 0;
    color: #aaa;
    font-size: 13px;
}
.bazi-ganzhi-labels span { flex: 1; text-align: center; }
.bazi-ganzhi-grid {
    padding: 12px 16px 8px;
}
.bazi-gz-row {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    margin-bottom: 14px;
}
.bazi-gz-circle {
    width: 68px; height: 68px;
    border-radius: 50%;
    border: 2.5px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: transform 0.12s, box-shadow 0.12s;
}
.bazi-gz-circle:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.bazi-ganzhi-note {
    text-align: center;
    color: #aaa;
    font-size: 12px;
    padding: 4px 16px 12px;
    margin: 0;
}
/* Picker footer */
.bazi-picker-footer {
    padding: 12px 16px 28px;
    border-top: 1px solid #f0f0f0;
}
.bazi-picker-confirm-btn {
    display: block;
    width: 100%;
    padding: 14px;
    background: #f5a030;
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.04em;
}
.bazi-picker-confirm-btn:hover { background: #e49020; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.error-box {
    display: none;
    margin-top: 12px;
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(255, 111, 125, 0.16);
    border: 1px solid rgba(255, 143, 153, 0.42);
    color: #ffd7dc;
}

.feedback-block {
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(20, 33, 57, 0.46);
    border: 1px solid rgba(155, 197, 255, 0.24);
}

.feedback-block .error-box {
    margin-top: 0;
}

.feedback-block .result-box {
    margin-top: 0;
    padding: 8px 4px;
    background: transparent;
    border-left: none;
    border-radius: 0;
}

.hero-footer {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #93acd9;
    font-size: 12px;
    opacity: 0.9;
}

@keyframes spherePulse {
    0%,
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(0.95);
    }

    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@media (max-width: 900px) {
    .info-strip {
        grid-template-columns: 1fr;
    }

    .home-bg-canvas-wrap {
        inset: 84px 0 0;
    }

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

    .feature-stage {
        grid-template-columns: 1fr;
    }

    .bazi-workspace {
        grid-template-columns: 1fr;
    }

    .huangli-layout {
        grid-template-columns: 1fr;
    }

    .bazi-benefit-grid {
        grid-template-columns: 1fr;
    }

    .hero-footer {
        gap: 10px;
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    body {
        padding-top: 132px;
    }
    .mode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-header {
        top: 8px;
    }

    .site-header-inner {
        width: calc(100% - 16px);
        border-radius: 18px;
        grid-template-columns: 1fr;
        row-gap: 6px;
        justify-items: center;
        padding: 10px 12px;
    }

    .site-brand {
        font-size: 24px;
    }

    .site-tools {
        justify-content: center;
        width: 100%;
    }

    .top-nav {
        width: 100%;
        justify-content: flex-start;
    }

    .top-nav .main-menu {
        width: 100%;
    }

    .container {
        width: calc(100% - 20px);
        margin: 10px auto;
        padding: 14px;
    }

    .bazi-solution-title {
        font-size: 24px;
    }

    .bazi-input-head h3 {
        font-size: 28px;
    }

    .huangli-title {
        font-size: 24px;
    }

    .huangli-action-row {
        grid-template-columns: 1fr;
    }

    .choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.result-profile-card {
    background: rgba(94, 108, 130, 0.64);
    border: 1px solid rgba(173, 212, 255, 0.2);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
}

.result-page {
    color: #eaf3ff;
    display: grid;
    gap: 14px;
}

.result-content {
    border: 1px solid rgba(173, 212, 255, 0.2);
    border-radius: 14px;
    background: rgba(14, 25, 45, 0.42);
    padding: 16px;
}

.result-content > p,
.result-content > h3,
.result-content > ul,
.result-content > ol {
    margin: 0 0 12px;
}

.result-content > p:last-child,
.result-content > h3:last-child,
.result-content > ul:last-child,
.result-content > ol:last-child {
    margin-bottom: 0;
}

.result-content p {
    color: #deebff;
    line-height: 1.75;
    word-break: break-word;
}

.result-content p strong {
    color: #f6d898;
    font-weight: 700;
}

.result-content h3 {
    color: #f2f7ff;
    font-size: 18px;
    line-height: 1.35;
}

.result-subtitle {
    margin-top: 18px;
}

.result-content ul,
.result-content ol {
    padding-left: 20px;
    color: #d8e8ff;
}

.result-content li {
    line-height: 1.7;
    margin-bottom: 6px;
}

.result-content li:last-child {
    margin-bottom: 0;
}

.result-footer {
    border: 1px solid rgba(173, 212, 255, 0.2);
    border-radius: 14px;
    background: rgba(14, 25, 45, 0.35);
    padding: 12px 14px 16px;
}

.result-footer hr {
    border: none;
    border-top: 1px solid rgba(173, 212, 255, 0.18);
    margin: 0 0 10px;
}

.result-elapsed {
    font-size: 12px;
    color: #c2d8f4;
    text-align: right;
}

.result-reset-btn {
    display: block;
    margin: 14px auto 0;
    padding: 10px 22px;
    background: #ff6b6b;
    border: none;
    border-radius: 40px;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}

.result-reset-btn:hover {
    background: #f35555;
}

.liuyao-result {
    display: grid;
    gap: 14px;
}

.liuyao-question-card {
    border: 1px solid rgba(173, 212, 255, 0.26);
    border-radius: 14px;
    background: rgba(192, 206, 232, 0.22);
    padding: 16px;
}

.ly-question-label {
    color: #c36fff;
    font-size: 16px;
    font-weight: 700;
}

.liuyao-question-card h2 {
    margin: 10px 0 8px;
    font-size: 38px;
    line-height: 1.25;
    color: #304866;
}

.liuyao-question-card p {
    margin: 0;
    color: #6d83a5;
    font-size: 14px;
}

.liuyao-legend-card {
    border: 1px solid rgba(182, 171, 243, 0.42);
    border-radius: 16px;
    background: rgba(214, 209, 237, 0.34);
    padding: 14px;
}

.ly-legend-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ly-legend-grid > div {
    border: 1px solid rgba(192, 206, 235, 0.55);
    background: rgba(236, 241, 249, 0.68);
    border-radius: 12px;
    padding: 12px 14px;
}

.ly-legend-grid h4 {
    margin: 0 0 10px;
    color: #374d71;
    font-size: 22px;
}

.ly-legend-grid ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 7px;
}

.ly-legend-grid li {
    color: #3f5375;
    font-size: 24px;
}

.ly-legend-grid li small {
    margin-left: 8px;
    color: #63799d;
    font-size: 21px;
}

.liuyao-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ly-panel {
    border: 1px solid rgba(180, 201, 235, 0.5);
    border-radius: 16px;
    background: rgba(220, 228, 245, 0.28);
    padding: 14px;
}

.ly-panel-head {
    text-align: center;
    margin-bottom: 10px;
}

.ly-panel-head .ly-phase {
    display: inline-block;
    color: #7f56d9;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 4px;
}

.ly-panel-head strong {
    display: block;
    color: #253e63;
    font-size: 43px;
    line-height: 1.25;
}

.ly-panel-head small {
    color: #61779c;
    font-size: 23px;
}

.ly-table-head,
.ly-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.2fr 0.8fr 0.8fr;
    align-items: center;
    gap: 6px;
}

.ly-table-head {
    border-top: 1px solid rgba(180, 201, 235, 0.5);
    border-bottom: 1px solid rgba(180, 201, 235, 0.5);
    padding: 8px 6px;
    color: #6f84a8;
    font-size: 21px;
}

.ly-table-body {
    display: grid;
}

.ly-row {
    min-height: 56px;
    padding: 6px;
    border-bottom: 1px dashed rgba(179, 199, 232, 0.42);
}

.ly-row:last-child {
    border-bottom: 0;
}

.ly-row.is-moving {
    background: rgba(255, 239, 239, 0.46);
    border-radius: 10px;
    border: 1px solid rgba(244, 168, 168, 0.52);
}

.ly-col {
    color: #375074;
    font-size: 24px;
}

.ly-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.ly-state b {
    font-size: 24px;
    font-weight: 800;
}

.ly-state em {
    color: #5e7394;
    font-style: normal;
    font-size: 20px;
}

.ly-kin {
    font-weight: 700;
}

.ly-yao-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ly-yao-line i {
    display: inline-block;
    height: 4px;
    border-radius: 999px;
    background: #233a5f;
}

.ly-yao-line.yang i {
    width: 42px;
}

.ly-yao-line.yin i {
    width: 16px;
}

.ly-marker i {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(241, 207, 125, 0.5);
    color: #6d4c0d;
    font-style: normal;
    font-weight: 700;
    font-size: 19px;
}

.ly-move {
    color: #ef6c00;
    font-size: 25px;
    text-align: center;
}

@media (max-width: 900px) {
    .ly-legend-grid,
    .liuyao-compare {
        grid-template-columns: 1fr;
    }

    .liuyao-question-card h2 {
        font-size: 30px;
    }

    .ly-panel-head strong {
        font-size: 32px;
    }

    .ly-table-head,
    .ly-row {
        grid-template-columns: 1fr 1fr 1fr 1.1fr 0.8fr 0.6fr;
    }

    .ly-col,
    .ly-state b,
    .ly-legend-grid li {
        font-size: 18px;
    }

    .ly-table-head,
    .ly-state em,
    .ly-marker i,
    .ly-legend-grid li small {
        font-size: 14px;
    }
}

.result-title-band {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(94, 108, 130, 0.6);
    border: 1px solid rgba(173, 212, 255, 0.2);
}

.result-title-band h1 {
    margin: 0;
    text-align: center;
    font-size: clamp(28px, 4.6vw, 50px);
    line-height: 1.1;
    letter-spacing: 1px;
    color: #f3f7ff;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    text-shadow: 0 2px 8px rgba(24, 35, 55, 0.5);
}

.profile-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-main h2 {
    margin: 0;
    font-size: 22px;
    color: #eef6ff;
}

.profile-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.profile-chip {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(143, 176, 218, 0.2);
    border: 1px solid rgba(173, 212, 255, 0.36);
    color: #deedff;
    font-size: 12px;
}

.profile-meta {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    color: #dceaff;
    font-size: 13px;
}

.bazi-panel {
    border-radius: 14px;
    border: 1px solid rgba(173, 212, 255, 0.24);
    background: rgba(18, 30, 53, 0.42);
    overflow: hidden;
    margin-bottom: 14px;
}

.bazi-panel-head {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: #f2f7ff;
    border-bottom: 1px solid rgba(173, 212, 255, 0.2);
}

.bazi-panel-title {
    line-height: 1.2;
}

.bazi-toggle-btn {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(173, 212, 255, 0.35);
    background: rgba(120, 168, 220, 0.16);
    color: #d8ebff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.bazi-toggle-btn:hover {
    background: rgba(120, 168, 220, 0.28);
}

.bazi-toggle-icon {
    font-size: 14px;
    line-height: 1;
}

.bazi-panel.collapsed .bazi-panel-head {
    border-bottom: none;
}

.bazi-panel.collapsed .bazi-panel-body {
    display: none;
}

.bazi-grid {
    width: 100%;
    border-collapse: collapse;
}

.bazi-grid thead th {
    text-align: left;
    color: #bcd2ee;
    font-weight: 600;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(173, 212, 255, 0.18);
}

.bazi-grid tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(173, 212, 255, 0.12);
    vertical-align: top;
    color: #ecf4ff;
}

.bazi-grid .row-label {
    color: #a9c1df;
    width: 92px;
    white-space: nowrap;
}

.bazi-grid .cell {
    font-size: 16px;
    font-weight: 700;
}

.bazi-grid .cell-line {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.bazi-grid .cell-line + .cell-line {
    margin-top: 3px;
}

.bazi-grid .cell.tiangan {
    color: #f0c46b;
}

.bazi-grid .cell.dizhi {
    color: #7adf9f;
}

.bazi-grid .cell.is-main {
    color: #ffeec2;
}

.result-block {
    margin-top: 16px;
    border: 1px solid rgba(173, 212, 255, 0.2);
    border-radius: 14px;
    background: rgba(14, 25, 45, 0.42);
    overflow: hidden;
}

.result-block:not(.bazi-panel):not(.core-block):not(.trait-block):not(.energy-block):not(.xys-block) > div,
.result-block:not(.bazi-panel):not(.core-block):not(.trait-block):not(.energy-block):not(.xys-block) > p,
.result-block:not(.bazi-panel):not(.core-block):not(.trait-block):not(.energy-block):not(.xys-block) > ul,
.result-block:not(.bazi-panel):not(.core-block):not(.trait-block):not(.energy-block):not(.xys-block) > ol {
    padding: 12px 14px;
}

.result-block:not(.bazi-panel):not(.core-block):not(.trait-block):not(.energy-block):not(.xys-block) p {
    line-height: 1.7;
}

.result-block-head {
    padding: 12px 14px;
    font-size: 18px;
    font-weight: 700;
    color: #eaf4ff;
    border-bottom: 1px solid rgba(173, 212, 255, 0.15);
}

.core-block {
    padding-bottom: 14px;
}

.core-diagram {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 12px 8px;
}

.core-center {
    width: 116px;
    height: 116px;
    border-radius: 999px;
    background: linear-gradient(155deg, #64bfd6 0%, #4b90be 100%);
    color: #f5fcff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px rgba(38, 83, 122, 0.35);
}

.core-master {
    font-size: 44px;
    font-weight: 900;
    line-height: 1;
    margin-top: 8px;
}

.core-wuxing {
    font-size: 14px;
    opacity: 0.95;
    margin-bottom: 10px;
}

.core-meta {
    padding: 6px 14px 0;
}

.core-meta-label {
    font-size: 13px;
    color: #afc7e4;
    margin-bottom: 8px;
}

.core-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.core-shishen-chip {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(145, 188, 235, 0.35);
    background: rgba(148, 193, 236, 0.14);
    color: #deecff;
    font-size: 12px;
    font-weight: 600;
}

.huangli-result {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 20px;
    align-items: stretch;
}

.huangli-direct-shell {
    min-height: 240px;
}

.huangli-direct-placeholder {
    padding: 32px 28px;
    border-radius: 24px;
    border: 1px solid rgba(201, 213, 235, 0.32);
    background: rgba(201, 205, 218, 0.24);
    box-shadow: 0 28px 60px rgba(12, 18, 33, 0.28);
}

.huangli-result-page {
    padding: 8px 0 24px;
}

.huangli-page-shell {
    display: grid;
    gap: 26px;
}

.hl-calendar-card,
.hl-month-card,
.hl-time-card {
    border-radius: 20px;
    border: 1px solid var(--app-border);
    background: var(--app-surface-2);
    box-shadow: 0 26px 56px rgba(15, 22, 37, 0.2);
    overflow: hidden;
}

.hl-query-strip {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
    padding: 18px 22px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.hl-query-field {
    display: grid;
    gap: 8px;
}

.hl-query-field label {
    color: #2c3850;
    font-size: 13px;
    font-weight: 700;
}

.hl-query-field input {
    width: 240px;
    min-width: 0;
    border-radius: 12px;
    border: 1px solid rgba(226, 233, 245, 0.35);
    background: rgba(239, 243, 250, 0.92);
    color: #273554;
    padding: 12px 14px;
    font-size: 16px;
}

.hl-query-festival {
    flex: 1;
    min-width: 220px;
    align-self: stretch;
    display: grid;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(148, 171, 214, 0.3);
    background: rgba(228, 236, 249, 0.56);
}

.hl-query-festival-label {
    font-size: 12px;
    font-weight: 700;
    color: #4f6385;
}

.hl-query-festival strong {
    font-size: 14px;
    line-height: 1.4;
    color: #273554;
    font-weight: 700;
}

.hl-query-festival.is-festival {
    border-color: rgba(122, 165, 222, 0.45);
    background: rgba(214, 232, 255, 0.56);
}

.hl-query-festival.is-fallback {
    border-color: rgba(160, 174, 206, 0.4);
    background: rgba(228, 233, 244, 0.62);
}

.hl-query-actions {
    display: flex;
    gap: 12px;
}

.hl-query-actions button,
.hl-lucky-btn,
.hl-month-nav {
    border: 0;
    cursor: pointer;
}

.hl-query-actions button {
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(135deg, #6db6dc, #4a8fc8);
}

.hl-query-actions button:first-child {
    background: rgba(105, 122, 158, 0.78);
}

.hl-calendar-card {
    height: 100%;
    background: rgba(8, 18, 52, 0.86);
    background-image:
        radial-gradient(circle at 15% 18%, rgba(80, 140, 220, 0.09) 2%, transparent 2.4%),
        radial-gradient(circle at 80% 72%, rgba(60, 100, 180, 0.07) 1.5%, transparent 2%);
    background-size: 28px 28px, 34px 34px;
    border: 1px solid rgba(90, 148, 220, 0.42);
    border-radius: 30px;
    box-shadow: 0 18px 40px -12px rgba(0, 10, 50, 0.55), inset 0 1px 0 rgba(140, 195, 250, 0.22);
    color: #dceeff;
    backdrop-filter: blur(6px);
}

.hl-calendar-card .card-inner {
    padding: 20px 22px 22px;
}

.hl-calendar-card .gregorian-header {
    text-align: center;
    border-bottom: 2px solid rgba(80, 148, 220, 0.32);
    padding-bottom: 14px;
    margin-bottom: 16px;
}

.hl-calendar-card .gregorian-header h1 {
    margin: 0;
    color: #b8d8fc;
    font-size: 33px;
    line-height: 1.35;
    font-weight: 700;
}

.hl-calendar-card .date-week {
    margin-top: 8px;
    display: inline-block;
    font-size: 18px;
    color: #a0c8f0;
    background: rgba(30, 60, 120, 0.62);
    padding: 4px 16px;
    border-radius: 999px;
}

.hl-calendar-card .lucky-zodiac {
    margin: 10px auto 0;
    display: flex;
    justify-content: center;
    gap: 18px;
    font-size: 16px;
    color: #88bce8;
    background: rgba(18, 42, 100, 0.68);
    width: fit-content;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(70, 130, 210, 0.3);
}

.hl-calendar-card .lunar-central {
    text-align: center;
    margin: 8px 0 12px;
}

.hl-calendar-card .lunar-badge {
    display: inline-flex;
    align-items: baseline;
    background: rgba(22, 48, 108, 0.82);
    padding: 6px 24px;
    border-radius: 999px;
    gap: 16px;
    color: #c8e2fc;
    box-shadow: inset 0 1px 2px rgba(120, 180, 255, 0.18), 0 3px 8px rgba(0, 10, 50, 0.35);
    border: 1px solid rgba(80, 140, 220, 0.38);
}

.hl-calendar-card .lunar-month {
    font-size: 27px;
    font-weight: 700;
}

.hl-calendar-card .lunar-day {
    font-size: 33px;
    font-weight: 800;
    letter-spacing: 1px;
}

.hl-lucky-btn {
    margin-top: 10px;
    padding: 12px 32px;
    border: 3px solid rgba(100, 170, 240, 0.55);
    border-radius: 999px;
    background: linear-gradient(135deg, #1e50b8 0%, #1230 78%, #1530a8 100%);
    background: linear-gradient(135deg, #1a48b0, #0d2e88);
    color: #d8eeff;
    font-size: 18px;
    font-weight: 800;
    box-shadow: inset 0 0 0 2px rgba(80, 150, 230, 0.3), 0 4px 14px rgba(10, 30, 100, 0.45);
}

.hl-calendar-card .yiji-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 8px 0 12px;
}

.hl-calendar-card .yiji-col {
    background: rgba(12, 28, 75, 0.7);
    border-radius: 22px;
    padding: 14px 14px 12px;
    border: 1px solid rgba(60, 110, 190, 0.3);
}

.hl-calendar-card .yi-title,
.hl-calendar-card .ji-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
}

.hl-calendar-card .yi-title {
    color: #3dd4c4;
    text-align: left;
}

.hl-calendar-card .ji-title {
    color: #f07878;
    text-align: right;
}

.hl-calendar-card .sub-title {
    margin-top: 10px;
    margin-bottom: 6px;
    color: #90b8e0;
    font-size: 17px;
    font-weight: 700;
}

.hl-calendar-card .yi-list,
.hl-calendar-card .ji-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.hl-calendar-card .yi-list .core-shishen-chip,
.hl-calendar-card .ji-list .core-shishen-chip {
    font-size: 15px;
    color: #a0d4e8;
    font-weight: 650;
    background: rgba(20, 50, 110, 0.78);
    border: 1px solid rgba(60, 120, 200, 0.35);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

.hl-calendar-card .ji-list .core-shishen-chip {
    background: rgba(60, 18, 30, 0.7);
    color: #f0a0a0;
    border-color: rgba(200, 80, 80, 0.3);
}

.hl-calendar-card .yi-list.is-meta .core-shishen-chip,
.hl-calendar-card .ji-list.is-meta .core-shishen-chip {
    font-size: 14px;
}

.hl-calendar-card .detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    background: rgba(6, 16, 48, 0.6);
    border-radius: 18px;
    padding: 12px;
    border: 1px solid rgba(50, 100, 180, 0.28);
}

.hl-calendar-card .detail-item {
    background: rgba(18, 40, 100, 0.72);
    border: 1px solid rgba(60, 118, 200, 0.28);
    border-radius: 12px;
    padding: 8px 10px;
}

.hl-calendar-card .detail-label {
    color: #6a9fd0;
    font-size: 12px;
    margin-bottom: 4px;
    font-weight: 700;
}

.hl-calendar-card .detail-value {
    color: #c0dcf8;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
}

.hl-calendar-card .god-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    background: rgba(10, 26, 72, 0.68);
    border: 1px solid rgba(58, 108, 188, 0.3);
    padding: 10px 12px;
    border-radius: 999px;
    margin-top: 10px;
}

.hl-calendar-card .god-item {
    color: #a0c4e8;
    font-size: 14px;
    font-weight: 600;
}

.hl-calendar-card .god-label {
    color: #60a8e0;
    font-weight: 700;
}

.hl-calendar-card .bottom-notes {
    margin-top: 10px;
    background: rgba(8, 20, 60, 0.65);
    border: 1px solid rgba(50, 100, 180, 0.28);
    border-left: 6px solid rgba(70, 140, 220, 0.7);
    border-radius: 14px;
    padding: 10px 12px;
}

.hl-calendar-card .pengzu {
    color: #88b4d8;
    font-size: 14px;
    line-height: 1.5;
}

.hl-calendar-card .pengzu strong {
    color: #60a8e0;
}

.hl-calendar-top {
    position: relative;
    background: linear-gradient(180deg, #d08a4c 0%, #c97d42 100%);
    min-height: 118px;
    border-bottom: 2px solid #e0c888;
}

.hl-calendar-top-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.16), transparent 24%),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.18), transparent 18%),
        radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.16), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 45%);
    opacity: 0.9;
}

.hl-calendar-top-content {
    position: relative;
    z-index: 1;
    padding: 22px 26px 16px;
}

.hl-calendar-top h3 {
    margin: 0;
    color: #fffef9;
    font-size: 30px;
    line-height: 1.35;
    font-weight: 800;
}

.hl-calendar-top div {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
}

.hl-calendar-top div span {
    color: #fff5e9;
    font-size: 18px;
    font-weight: 700;
}

.hl-calendar-main {
    display: grid;
    grid-template-columns: 1fr minmax(160px, 200px) 1fr;
    gap: 16px;
    align-items: start;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(206, 156, 104, 0.66);
}

.hl-calendar-side {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hl-calendar-side.is-right {
    align-items: flex-start;
}

.hl-mark {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 44px;
    font-weight: 900;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.hl-mark.yi {
    background: #c73045;
}

.hl-mark.ji {
    background: #21873f;
}

.hl-calendar-side h5 {
    margin: 18px 0 10px;
    color: #1f2430;
    font-size: 17px;
    font-weight: 800;
}

.hl-word-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    line-height: 1.55;
}

.hl-word-list .core-shishen-chip {
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    color: #26272d;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.hl-word-list.is-meta-list .core-shishen-chip {
    font-size: 14px;
    font-weight: 600;
    color: #30333b;
    white-space: nowrap;
}

.hl-calendar-center {
    text-align: center;
    align-self: stretch;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 22px;
}

.hl-lunar-date-box {
    display: grid;
    gap: 6px;
}

.hl-lunar-month,
.hl-lunar-day {
    margin: 0;
    color: #212225;
    font-size: 74px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1px;
}

.hl-lucky-btn {
    padding: 14px 34px;
    border: 4px solid rgba(255, 223, 223, 0.9);
    border-radius: 999px;
    background: #c83046;
    color: #fff8f4;
    font-size: 20px;
    font-weight: 800;
    box-shadow: inset 0 0 0 2px rgba(164, 20, 41, 0.58), 0 2px 0 rgba(128, 16, 32, 0.2);
}

.hl-calendar-bottom {
    display: grid;
    grid-template-columns: 180px 1fr 190px;
    border-top: 1px solid rgba(206, 156, 104, 0.66);
}

.hl-bottom-col {
    min-height: 226px;
}

.hl-bottom-col.is-left,
.hl-bottom-col.is-right {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
}

.hl-bottom-col.is-center {
    padding: 14px 16px;
    border-left: 1px solid rgba(206, 156, 104, 0.66);
    border-right: 1px solid rgba(206, 156, 104, 0.66);
}

.hl-bottom-item {
    display: grid;
    place-items: center;
    text-align: center;
    border-bottom: 1px solid rgba(206, 156, 104, 0.66);
    padding: 10px 8px;
}

.hl-bottom-col.is-left .hl-bottom-item,
.hl-bottom-col.is-right .hl-bottom-item {
    border-right: 1px solid rgba(206, 156, 104, 0.66);
}

.hl-bottom-col.is-right .hl-bottom-item {
    border-right: 0;
    border-left: 1px solid rgba(206, 156, 104, 0.66);
}

.hl-bottom-item:last-child {
    border-bottom: 0;
}

.hl-bottom-item span:first-child {
    display: block;
    color: #2f3138;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
}

.hl-bottom-item span:last-child {
    display: block;
    color: #2a2c31;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 700;
}

.hl-position-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 18px;
}

.hl-position-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hl-position-item div {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
}

.hl-position-item:nth-child(1) div {
    background: #d9b66e;
}

.hl-position-item:nth-child(2) div {
    background: #a36ccf;
}

.hl-position-item:nth-child(3) div {
    background: #ef6357;
}

.hl-position-item span {
    color: #292b30;
    font-size: 16px;
    font-weight: 700;
}

.hl-bottom-col.is-center p {
    margin: 0;
    color: #292b31;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 600;
}

.hl-month-card {
    padding: 0;
    height: 100%;
    background: rgba(8, 18, 52, 0.86);
    background-image:
        radial-gradient(circle at 12% 20%, rgba(80, 140, 220, 0.09) 2%, transparent 2.4%),
        radial-gradient(circle at 78% 68%, rgba(60, 100, 180, 0.07) 1.5%, transparent 2%);
    background-size: 28px 28px, 34px 34px;
    border: 1px solid rgba(90, 148, 220, 0.42);
    border-radius: 30px;
    box-shadow: 0 18px 40px -12px rgba(0, 10, 50, 0.55), inset 0 1px 0 rgba(140, 195, 250, 0.22);
    color: #dceeff;
    overflow: hidden;
    backdrop-filter: blur(6px);
}

.hl-month-toolbar {
    display: grid;
    grid-template-columns: 52px 52px 1fr 1fr 52px 52px;
    gap: 14px;
    align-items: center;
    background: rgba(6, 14, 50, 0.96);
    padding: 16px 18px;
}

.hl-month-nav {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(30, 65, 150, 0.55);
    color: #a0c8f0;
    font-size: 34px;
    line-height: 1;
    border: 1px solid rgba(70, 130, 210, 0.35);
}

.hl-month-toolbar select {
    height: 52px;
    border-radius: 8px;
    border: 1px solid rgba(70, 130, 210, 0.3);
    background: rgba(18, 42, 110, 0.82);
    color: #c0dcf8;
    font-size: 18px;
    font-weight: 700;
    padding: 0 14px;
}

.hl-month-week,
.hl-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.hl-month-week {
    background: rgba(16, 38, 100, 0.82);
}

.hl-month-week span {
    text-align: center;
    padding: 14px 0;
    color: #78b0e0;
    font-size: 17px;
    font-weight: 700;
}

.hl-month-day {
    min-height: 110px;
    padding: 14px 10px 12px;
    border: 0;
    background: transparent;
    text-align: center;
    color: #c8e0f8;
    border-top: 1px solid rgba(50, 90, 168, 0.28);
}

.hl-month-day.is-empty {
    pointer-events: none;
}

.hl-day-solar {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.hl-day-lunar {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    min-height: 36px;
}

.hl-day-lunar b,
.hl-day-note {
    display: block;
    font-style: normal;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 500;
}

.hl-day-note {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hl-day-note.is-festival {
    color: #f08090;
}

.hl-day-note.is-solar-term {
    color: #60c0f4;
}

.hl-day-note.is-holiday {
    color: #50d898;
}

.hl-month-day.active {
    position: relative;
}

.hl-month-day.active::after {
    content: '';
    position: absolute;
    inset: 14px 14px 16px;
    border: 3px solid rgba(70, 148, 230, 0.8);
    border-radius: 10px;
    pointer-events: none;
}

.hl-month-day.active .hl-day-solar,
.hl-month-day.active .hl-day-lunar b,
.hl-month-day.active .hl-day-note {
    color: #70b8f0;
}

.hl-time-card {
    padding: 20px 26px 24px;
    background: rgba(8, 18, 52, 0.86);
    backdrop-filter: blur(6px);
}

.hl-time-card > h4 {
    margin: 0 0 14px;
    color: #b8d8fc;
    font-size: 28px;
}

.hl-time-tabs {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 16px;
}

.hl-time-tab {
    border: 1px solid rgba(60, 110, 190, 0.3);
    background: rgba(12, 28, 75, 0.7);
    color: #88b4d8;
    border-radius: 10px;
    padding: 10px 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

.hl-time-tab.active {
    background: rgba(25, 70, 180, 0.85);
    color: #d0ecff;
    border-color: rgba(80, 148, 230, 0.6);
    box-shadow: 0 2px 10px rgba(20, 60, 160, 0.4);
}

.hl-time-detail {
    margin-top: 8px;
}

.hl-time-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 26px;
}

.hl-time-poster {
    position: relative;
    min-height: 560px;
    background: linear-gradient(180deg, rgba(116, 100, 84, 0.56), rgba(87, 70, 50, 0.7));
    overflow: hidden;
}

.hl-time-poster-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 28%),
        radial-gradient(circle at 50% 50%, rgba(46, 34, 21, 0.35) 0 38%, transparent 39%),
        repeating-radial-gradient(circle at 50% 50%, rgba(52, 39, 25, 0.6) 0 2px, transparent 2px 22px),
        linear-gradient(180deg, rgba(53, 42, 30, 0.18), rgba(44, 35, 24, 0.4));
    opacity: 0.9;
}

.hl-time-poster-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(2, 118px);
    gap: 10px;
}

.hl-time-poster-text span {
    display: grid;
    place-items: center;
    height: 118px;
    border: 2px solid rgba(255, 255, 255, 0.56);
    color: #fff;
    font-size: 72px;
    font-weight: 800;
}

.hl-time-main {
    min-width: 0;
    border-radius: 16px;
    border: 1px solid rgba(80, 130, 210, 0.28);
    background: rgba(8, 18, 52, 0.52);
    padding: 14px 16px;
}

.hl-time-relation {
    margin: 2px 0 20px;
    color: #d4e6ff;
    font-size: 18px;
    line-height: 1.75;
}

.hl-time-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-bottom: 20px;
}

.hl-time-meta-grid span {
    color: #cde1ff;
    font-size: 17px;
    line-height: 1.6;
}

.hl-time-meta-grid span span {
    color: #ffd88f;
    font-weight: 800;
}

.hl-wx-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 22px;
    margin-bottom: 24px;
}

.hl-wx-row {
    display: grid;
    grid-template-columns: 30px 1fr 72px;
    gap: 10px;
    align-items: center;
}

.hl-wx-name {
    color: #dbeaff;
    font-size: 18px;
    font-weight: 700;
}

.hl-wx-bar {
    height: 28px;
    border-radius: 999px;
    background: rgba(194, 214, 244, 0.16);
    overflow: hidden;
}

.hl-wx-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.hl-wx-value {
    color: #d2e5ff;
    font-size: 16px;
    font-weight: 700;
    text-align: right;
}

.hl-time-yi-ji {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.hl-time-side {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 14px;
    align-items: start;
}

.hl-time-items .core-shishen-chip {
    color: #d8e9ff;
    font-size: 16px;
    font-weight: 700;
    background: rgba(116, 160, 228, 0.18);
    border: 1px solid rgba(145, 185, 240, 0.34);
}

.hl-time-position-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hl-time-position-list span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid rgba(145, 185, 240, 0.34);
    border-radius: 999px;
    background: rgba(103, 140, 205, 0.22);
    color: #dbeaff;
    font-size: 13px;
}

.hl-time-position-list em {
    font-style: normal;
    color: #ffd9a2;
}

.hl-time-empty {
    color: #c6dbf8;
    margin: 0;
}

@media (max-width: 750px) {
    .hl-time-tabs {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .huangli-result {
        grid-template-columns: 1fr;
    }

    .hl-time-layout {
        grid-template-columns: 1fr;
    }

    .hl-time-poster {
        min-height: 360px;
    }
}

@media (max-width: 860px) {
    .hl-query-strip {
        flex-direction: column;
        align-items: stretch;
    }

    .hl-query-festival {
        min-width: 0;
    }

    .hl-query-field input {
        width: 100%;
    }

    .hl-calendar-side {
        min-height: 0;
    }

    .hl-calendar-bottom {
        grid-template-columns: 1fr;
    }

    .hl-bottom-col.is-center,
    .hl-bottom-col.is-right .hl-bottom-item,
    .hl-bottom-col.is-left .hl-bottom-item {
        border-left: 0;
        border-right: 0;
    }

    .hl-month-toolbar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hl-month-toolbar select {
        grid-column: span 2;
    }

    .hl-wx-grid,
    .hl-time-yi-ji {
        grid-template-columns: 1fr;
    }

    .hl-calendar-card .yiji-row {
        grid-template-columns: 1fr;
    }

    .hl-calendar-card .detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .result-content {
        padding: 12px;
    }

    .result-block-head {
        font-size: 16px;
        padding: 10px 12px;
    }

    .profile-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-main h2 {
        font-size: 20px;
    }

    .profile-chip {
        font-size: 11px;
    }

    .hl-calendar-top-content,
    .hl-calendar-main,
    .hl-time-card,
    .hl-query-strip {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hl-calendar-top h3 {
        font-size: 18px;
    }

    .hl-calendar-card .card-inner {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hl-calendar-card .gregorian-header h1 {
        font-size: 24px;
    }

    .hl-calendar-card .date-week,
    .hl-calendar-card .lucky-zodiac {
        font-size: 14px;
    }

    .hl-calendar-card .detail-grid {
        grid-template-columns: 1fr;
    }

    .hl-calendar-card .lunar-month {
        font-size: 22px;
    }

    .hl-calendar-card .lunar-day {
        font-size: 27px;
    }

    .hl-calendar-main {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hl-lunar-month,
    .hl-lunar-day {
        font-size: 64px;
    }

    .hl-query-actions {
        width: 100%;
    }

    .hl-query-actions button {
        flex: 1;
    }

    .hl-month-day {
        min-height: 86px;
        padding: 10px 6px;
    }

    .hl-day-solar {
        font-size: 18px;
    }

    .hl-day-lunar b,
    .hl-day-note {
        font-size: 11px;
    }

    .hl-time-poster-text {
        grid-template-columns: repeat(2, 92px);
    }

    .hl-time-poster-text span {
        height: 92px;
        font-size: 56px;
    }
}

.section-article-feed {
    margin-top: 12px;
    border: 1px solid rgba(173, 212, 255, 0.2);
    border-radius: 12px;
    background: rgba(24, 38, 66, 0.5);
    padding: 12px;
}

.section-article-head h3 {
    margin: 0 0 8px;
    color: #eef6ff;
}

.section-article-list {
    display: grid;
    gap: 10px;
}

.section-article-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    align-items: stretch;
    border: 1px solid rgba(173, 212, 255, 0.2);
    border-radius: 10px;
    padding: 10px 12px;
    background: rgba(90, 112, 146, 0.22);
}

.section-article-thumb {
    width: 100%;
    height: 88px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(164, 186, 220, 0.18);
    display: grid;
    place-items: center;
    color: #d6e6fb;
    font-size: 13px;
}

.section-article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.section-article-body {
    min-width: 0;
}

.section-article-item h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
}

.section-article-item h4 a {
    color: #f4f9ff;
    text-decoration: none;
}

.section-article-item h4 a:hover {
    text-decoration: underline;
}

.section-article-date {
    margin: 6px 0 0;
    color: #b9d0ee;
    font-size: 12px;
}

.section-article-summary {
    margin: 6px 0 0;
    color: #d9e8ff;
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trait-block {
    padding-bottom: 10px;
}

.trait-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
}

.trait-card {
    background: rgba(24, 39, 67, 0.56);
    border: 1px solid rgba(173, 212, 255, 0.16);
    border-radius: 12px;
    padding: 10px;
}

.trait-head {
    color: #f1f7ff;
    font-weight: 700;
    font-size: 14px;
}

.trait-wuxing {
    margin-top: 4px;
    color: #89d3ff;
    font-size: 12px;
}

.trait-tags {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.trait-tag {
    background: rgba(104, 156, 222, 0.15);
    border: 1px solid rgba(135, 188, 255, 0.28);
    border-radius: 999px;
    color: #d8ebff;
    padding: 2px 8px;
    font-size: 11px;
}

.trait-summary {
    margin: 8px 0 0;
    color: #cddff3;
    font-size: 12px;
    line-height: 1.5;
}

.energy-block {
    padding-bottom: 10px;
}

.energy-list {
    padding: 12px 12px 4px;
}

.energy-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) 86px;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.energy-label {
    color: #e7f2ff;
    font-size: 13px;
    font-weight: 600;
}

.energy-state {
    margin-left: 4px;
    color: #9fbbdb;
    font-size: 11px;
}

.energy-bar-track {
    width: 100%;
    height: 9px;
    border-radius: 999px;
    background: rgba(215, 230, 248, 0.16);
    overflow: hidden;
}

.energy-bar-fill {
    height: 100%;
    border-radius: 999px;
}

.energy-value {
    color: #c9dcf5;
    font-size: 12px;
    text-align: right;
}

.energy-summary {
    padding: 2px 12px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    color: #d6e8fb;
    font-size: 13px;
}

.energy-advice {
    margin: 10px 12px 0;
    padding-top: 10px;
    border-top: 1px solid rgba(173, 212, 255, 0.18);
    color: #cfe4fa;
    font-size: 13px;
    line-height: 1.55;
}

.xys-block {
    padding-bottom: 12px;
}

.xys-strength-row {
    margin: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(170, 196, 228, 0.26);
    background: rgba(156, 174, 198, 0.16);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.xys-strength-left {
    color: #c7dbf5;
    font-size: 15px;
    font-weight: 700;
}

.xys-strength-right {
    color: #f2f7ff;
    font-size: 22px;
    font-weight: 800;
}

.xys-grid {
    padding: 8px 12px 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.xys-card {
    border-radius: 12px;
    border: 1px solid rgba(169, 201, 236, 0.3);
    background: rgba(213, 229, 247, 0.08);
    padding: 10px 12px;
}

.xys-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.xys-role {
    color: #e6f1ff;
    font-size: 14px;
    font-weight: 700;
}

.xys-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.xys-element {
    font-size: 38px;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 6px;
}

.xys-desc {
    margin: 0;
    color: #c4d8ef;
    font-size: 13px;
    line-height: 1.45;
}

.role-yongshen {
    background: rgba(255, 84, 84, 0.09);
    border-color: rgba(255, 130, 130, 0.4);
}

.role-xishen {
    background: rgba(90, 152, 255, 0.1);
    border-color: rgba(122, 175, 255, 0.45);
}

.role-jishen {
    background: rgba(180, 188, 201, 0.12);
    border-color: rgba(171, 186, 208, 0.38);
}

.role-choushen {
    background: rgba(255, 196, 84, 0.12);
    border-color: rgba(255, 207, 117, 0.42);
}

.role-xianshen {
    background: rgba(86, 193, 128, 0.12);
    border-color: rgba(114, 220, 154, 0.36);
}

.xys-summary {
    margin: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(138, 183, 234, 0.38);
    background: rgba(105, 150, 219, 0.14);
    color: #d9ebff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.xys-advice-title {
    margin: 2px 12px 0;
    color: #d8ebff;
    font-size: 18px;
    font-weight: 700;
}

.xys-advice-list {
    margin: 8px 12px 2px;
    padding-left: 18px;
    color: #cfe2f7;
}

.xys-advice-list li {
    margin-bottom: 8px;
    line-height: 1.5;
    font-size: 15px;
}

.element-wrap {
    display: flex;
    align-items: center;
}

.element-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.element-char {
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}

.element-icon {
    font-size: 20px;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.15));
}

.canggan-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.canggan-line {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.wuxing-char {
    display: inline-block;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    margin-right: 2px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.empty-mark {
    opacity: 0.7;
}

@media (max-width: 900px) {
    .profile-meta {
        grid-template-columns: 1fr;
    }

    .hot-banner {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }
    .hot-action {
        width: 100%;
    }
    .mode-grid {
        grid-template-columns: 1fr;
    }
    .bazi-grid {
        font-size: 13px;
    }

    .trait-grid {
        grid-template-columns: 1fr;
    }

    .energy-row {
        grid-template-columns: 70px minmax(0, 1fr) 72px;
        gap: 8px;
    }

    .xys-grid {
        grid-template-columns: 1fr 1fr;
    }

    .xys-strength-right {
        font-size: 18px;
    }

    .xys-element {
        font-size: 32px;
    }

    .core-center {
        width: 98px;
        height: 98px;
    }

    .core-master {
        font-size: 36px;
    }

    .element-char {
        font-size: 30px;
    }

    .element-icon {
        font-size: 17px;
    }

    .result-title-band h1 {
        font-size: 34px;
    }

    .wuxing-char {
        font-size: 22px;
    }
}

@media (max-width: 600px) {
    .result-title-band {
        padding: 10px 12px;
    }

    .result-title-band h1 {
        font-size: 28px;
    }

    .xys-grid {
        grid-template-columns: 1fr;
    }

    .xys-strength-row {
        flex-direction: column;
        align-items: flex-start;
    }

}