/* ====================== */
/* 1. CSS Variables - 极致iOS毛玻璃风（这里修改颜色/字体等全局参数） */
/* ====================== */
:root {
    --glass: rgba(255, 255, 255, 0.04);          /* 毛玻璃透明度 */
    --glass-stroke: rgba(255, 255, 255, 0.19);   /* 边框高光 */
    --glass-heavy: rgba(10, 10, 10, 0.96);
    --text-main: #ffffff;
    --text-sub: #8a8a90;
    --gold: #d4af37;                            /* 金色主色调（可改成其他颜色） */
    --font-main: "SF Pro Display", -apple-system, system-ui, sans-serif;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    -webkit-font-smoothing: antialiased; 
}

body { 
    font-family: var(--font-main); 
    background: #000; 
    color: var(--text-main); 
    overflow: hidden; 
    height: 100vh; 
    width: 100vw; 
}

/* ====================== */
/* 2. 星空背景（无需修改，除非想改流星密度） */
/* ====================== */
#grok-canvas {
    position: fixed; 
    inset: 0; 
    z-index: -1; 
    pointer-events: none; 
    opacity: 0.95;
    /* 层级：设置为 -1，确保它在所有文字和按钮的下面 */
    z-index: -1;
    /* 禁止点击：防止 canvas 拦截掉页面上按钮的点击事件 */
    pointer-events: none;
}

/* ====================== */
/* 3. Loading 界面（可改 loading 文字、进度条颜色、动画时长） */
/* ====================== */
#loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    background: radial-gradient(circle at 50% 50%, rgba(212,175,55,0.04) 0%, transparent 70%);
    pointer-events: none;
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-content {
    text-align: center;
    width: 100%;
    max-width: 320px;
}

.loading-mobius {
    font-size: 96px;
    margin-bottom: 40px;
    animation: mobiusGlow 4s infinite ease-in-out;
    filter: drop-shadow(0 0 35px rgba(212,175,55,0.9));
}

.progress-wrapper {
    width: 86%;
    margin: 0 auto 18px;
}
.progress-container {
    height: 3.5px;
    background: rgba(255,255,255,0.09);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 0 8px rgba(212,175,55,0.2);
}
.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold), #ffffff);
    border-radius: 999px;
    box-shadow: 0 0 12px var(--gold), 0 0 22px var(--gold), 0 0 40px rgba(212,175,55,0.6);
    animation: progressGlow 2.8s infinite ease-in-out;
    transition: width 2.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes progressGlow {
    0%, 100% { box-shadow: 0 0 12px var(--gold), 0 0 22px var(--gold); }
    50% { box-shadow: 0 0 18px var(--gold), 0 0 32px rgba(212,175,55,0.85); }
}

.loading-text {
    font-size: 14.2px;
    color: var(--text-sub);
    letter-spacing: 2.8px;
    height: 22px;
    transition: opacity 0.4s ease;
    animation: hintBreath 4s infinite ease-in-out;
}

/* ====================== */
/* 4. 诊断报告卡片（可改卡片宽度、圆角、阴影强度） */
/* ====================== */
#main-report {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 6vw, 48px);
}

.report-card {
    width: 100%;
    max-width: 520px;
    background: linear-gradient(148deg, rgba(255,255,255,0.072) 0%, rgba(255,255,255,0.008) 100%);
    border: 1px solid var(--glass-stroke);
    border-radius: 36px;
    padding: clamp(34px, 6.5vw, 48px);
    backdrop-filter: blur(34px);
    -webkit-backdrop-filter: blur(34px);
    box-shadow: 0 32px 80px rgba(0,0,0,0.68), inset 0 1px 0 rgba(255,255,255,0.15);
    opacity: 0;
    transform: translateY(45px) scale(0.94);
    transition: all 1.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

#main-report.show .report-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 报告头部 */
.report-header {
    text-align: center;
    margin-bottom: 36px;
}
.report-header .brand {
    font-size: 42px;
    color: var(--gold);
    margin-bottom: 10px;
    display: inline-block;
    animation: mobiusGlow 4s infinite ease-in-out;
}
.report-header h1 {
    font-size: clamp(24.5px, 5.4vw, 30px);
    font-weight: 700;
    letter-spacing: 1.6px;
    margin-bottom: 4px;
}
.report-header p {
    font-size: 12.6px;
    color: var(--gold);
    letter-spacing: 4.2px;
    opacity: 0.93;
}

/* 报告区块 */
.report-section {
    margin-bottom: 26px;
    padding: 24px;
    background: var(--glass);
    border: 1px solid var(--glass-stroke);
    border-radius: 26px;
    position: relative;
}
.report-section::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255,255,255,0.03), transparent);
    pointer-events: none;
}
.section-title {
    font-size: 11.6px;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 2.9px;
    margin-bottom: 12px;
    font-weight: 400;
}
.section-content {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-main);
}
.highlight {
    color: var(--gold);
    font-weight: 600;
    position: relative;
}
.highlight::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* 行动按钮 */
.action-btn {
    display: block;
    width: 100%;
    padding: 17px;
    background: #fff;
    color: #000;
    text-align: center;
    text-decoration: none;
    font-size: clamp(14px, 3.5vw, 15.4px);
    font-weight: 600;
    letter-spacing: 1.9px;
    border-radius: 22px;
    margin-top: 16px;
    transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 11px 32px rgba(0,0,0,0.48);
}
.action-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 48px rgba(212,175,55,0.42);
}

/* ====================== */
/* 5. 关键帧动画（可改呼吸动画速度） */
/* ====================== */
@keyframes mobiusGlow {
    0%, 100% { 
        filter: drop-shadow(0 0 22px rgba(255,255,255,0.5)) 
                drop-shadow(0 0 42px rgba(212,175,55,0.78)); 
    }
    50% { filter: drop-shadow(0 0 8px rgba(212,175,55,0.35)); }
}
@keyframes hintBreath {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-2px); }
}