:root {
    --bg-color: #0f172a;      /* 深海蓝 */
    --card-bg: #1e293b;       /* 蓝灰 */
    --text-main: #f1f5f9;     /* 柔白 */
    --text-sub: #94a3b8;      /* 浅灰 */
    --gold: #fbbf24;          /* 亮金 */
    --blue-accent: #38bdf8;   /* 科技蓝 */
    --border-color: #334155;
    --radius: 12px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0;
    font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-color);
    background-image: linear-gradient(160deg, #0f172a 0%, #172554 100%);
    color: var(--text-main);
    min-height: 100vh;
    /* 底部留白稍微减小 */
    padding-bottom: 20px;
}

/* 跑马灯提示条 */
.marquee-bar {
    background: #020617; color: #a5b4fc;
    font-size: 0.75rem; padding: 8px 0; overflow: hidden;
    border-bottom: 1px solid #1e293b; position: sticky; top: 0; z-index: 999;
}
.marquee-content {
    white-space: nowrap; animation: scroll 15s linear infinite; padding-left: 100%;
}
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

.app-container {
    width: 100%; max-width: 480px; margin: 0 auto; padding: 15px;
}

.page { display: none; opacity: 0; transition: opacity 0.4s ease; }
.page.active { display: block; opacity: 1; }

/* 主卡片 */
.main-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: 25px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    position: relative;
}

/* 头部 */
.card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
.org-badge {
    background: var(--gold); color: #000; font-size: 0.7rem; font-weight: 800;
    padding: 3px 6px; border-radius: 4px;
}
.case-id { font-family: monospace; color: var(--text-sub); font-size: 0.7rem; }

/* 标题区 */
.hero-section { text-align: center; margin-bottom: 20px; }
.logo-circle { font-size: 3rem; margin-bottom: 10px; display: inline-block; }
.pulse-slow { animation: pulse 3s infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } }

.main-title { 
    font-size: 1.8rem; margin: 0; color: #fff; line-height: 1.2;
    margin-bottom: 10px;
}
.main-title span { color: var(--gold); }

/* 通俗标签 */
.tags-row {
    display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.tags-row span {
    background: rgba(255,255,255,0.05); color: var(--blue-accent);
    font-size: 0.7rem; padding: 4px 8px; border-radius: 20px; border: 1px solid rgba(56, 189, 248, 0.3);
}

/* 信任背书 */
.trust-box { background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; margin: 20px 0; }
.trust-title { font-size: 0.7rem; color: var(--text-sub); text-align: center; margin: 0 0 10px 0; }
.trust-badges { display: flex; justify-content: space-around; font-size: 0.8rem; color: #e2e8f0; }

.intro-text {
    font-size: 0.9rem; color: #cbd5e1; line-height: 1.6; text-align: justify; margin-bottom: 25px;
}
.divider { height: 1px; background: var(--border-color); margin: 20px 0; }

/* 表单 */
.form-container { margin-bottom: 20px; }
.input-wrapper { margin-bottom: 15px; }
.input-wrapper label {
    display: block; font-size: 0.85rem; color: var(--gold); margin-bottom: 8px;
}
.input-wrapper label .tip { color: var(--text-sub); font-size: 0.7rem; font-weight: normal; margin-left: 5px; }

input[type="tel"], select {
    width: 100%; padding: 14px;
    background: #0f172a; border: 1px solid #475569;
    color: #fff; border-radius: 6px; font-size: 1rem;
    outline: none; transition: border 0.3s;
}
input[type="tel"]:focus, select:focus { border-color: var(--gold); }

.agreement-box {
    display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-sub);
    margin-bottom: 20px;
}
.check-icon { color: var(--gold); }

.btn-primary {
    width: 100%; background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #000; border: none; padding: 16px; font-size: 1.05rem; font-weight: bold;
    border-radius: 6px; cursor: pointer; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
    transition: transform 0.1s;
}
.btn-primary:active { transform: scale(0.98); }
.footer-note { text-align: center; font-size: 0.6rem; color: #475569; margin-top: 20px; }

/* 答题页 */
.quiz-header { margin-bottom: 20px; }
.progress-info { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--blue-accent); margin-bottom: 8px; }
.progress-track { height: 6px; background: #334155; border-radius: 3px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--gold); width: 0%; transition: width 0.3s; }

.question-box { min-height: 100px; margin-bottom: 25px; }
.q-label { font-size: 0.8rem; color: var(--text-sub); margin-bottom: 5px; }
#q-text { font-size: 1.15rem; line-height: 1.5; font-weight: normal; }

.options-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.btn-option {
    background: rgba(255,255,255,0.05); border: 1px solid #334155;
    padding: 16px; color: #e2e8f0; text-align: left; border-radius: 6px;
    font-size: 1rem; cursor: pointer; transition: all 0.2s; display: flex; align-items: center;
}
.btn-option:active { background: #334155; }
.btn-option.selected { border-color: var(--gold); background: rgba(251, 191, 36, 0.15); color: #fff; }
.btn-option .emoji { font-size: 1.2rem; margin-right: 10px; }

.control-bar { display: flex; gap: 10px; margin-bottom: 15px; }
.ctrl-btn { flex: 1; padding: 10px; background: transparent; border: 1px solid #475569; color: var(--text-sub); border-radius: 4px; cursor: pointer; }
.next-wrapper { margin-top: 10px; }
.btn-next { width: 100%; padding: 14px; background: #334155; color: #fff; border: none; border-radius: 6px; font-size: 1rem; }

/* 结果页调整 - 核心修改区域 */
.stamp-verified {
    position: absolute; top: 20px; right: 20px;
    border: 3px solid #ef4444; color: #ef4444;
    font-size: 1rem; font-weight: bold; padding: 5px 10px;
    transform: rotate(-15deg); opacity: 0.5; pointer-events: none;
    z-index: 1;
}

/* 1. 减小标题下方的间距 */
.result-top { text-align: center; margin-bottom: 15px; } 
.small-label { font-size: 0.8rem; color: var(--gold); margin-bottom: 5px; }
.result-name { font-size: 1.6rem; color: #fff; margin: 0; }

/* 2. 减小图表高度和下方间距 */
.chart-box { height: 240px; margin-bottom: 15px; } 

/* 3. 减小锁定区域的最小高度，让内容更紧凑 */
.locked-section {
    border: 1px dashed #475569; background: #0f172a;
    position: relative; border-radius: 6px; overflow: hidden;
    min-height: 280px; /* 从320px减小到280px */
}
.blurred-content { filter: blur(6px); padding: 20px; opacity: 0.6; font-size: 0.9rem; }

/* 4. 紧凑化遮罩层内部元素间距 */
.lock-mask {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.94); /* 稍微加深一点背景色 */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 15px; text-align: center;
}
/* 缩小锁图标和间距 */
.lock-circle { font-size: 2rem; margin-bottom: 8px; } 
/* 减小标题间距 */
.lock-mask h3 { color: var(--gold); margin: 0 0 8px 0; font-size: 1.1rem; } 
/* 减小提示语间距 */
.lock-tip { font-size: 0.85rem; color: #94a3b8; margin-bottom: 12px; line-height: 1.4; } 
.code-box { background: #334155; color: var(--gold); padding: 3px 8px; border-radius: 4px; font-weight: bold; }
/* 二维码容器保持不变 */
.qr-container { width: 170px; height: 170px; background: #fff; padding: 6px; border-radius: 8px; }
.qr-container img { width: 100%; height: 100%; }

/* 模态框 */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.hidden { display: none; }
.modal-card { width: 90%; max-width: 400px; background: var(--card-bg); border: 1px solid var(--border-color); padding: 20px; border-radius: var(--radius); }
.modal-head { display: flex; justify-content: space-between; margin-bottom: 15px; color: var(--text-main); }
.close-x { font-size: 1.5rem; cursor: pointer; }
.grid-body { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.grid-item { aspect-ratio: 1; background: #0f172a; border: 1px solid #334155; color: #64748b; display: flex; justify-content: center; align-items: center; border-radius: 4px; font-size: 0.8rem; cursor: pointer; }
.grid-item.answered { background: #172554; color: #fff; border-color: var(--blue-accent); }
.grid-item.active-q { background: var(--gold); color: #000; border-color: var(--gold); font-weight: bold; }