/* ════════════════════════════════════════════════════════════
   CampusMatch v3.1 — 清晨湾区 · 轻科幻
   柔和浅色底 + 粉蓝光晕 + 大湾区天际线 + 渐变科技点缀
   ════════════════════════════════════════════════════════════ */

:root {
    --bg-top: #eef4ff;
    --bg-mid: #fdf5fa;
    --bg-bot: #fff8f1;
    --card-bg: rgba(255, 255, 255, 0.74);
    --card-border: rgba(99, 102, 241, 0.14);
    --card-border-hover: rgba(99, 102, 241, 0.38);

    --text: #273349;
    --text-secondary: #5f6f8a;

    --accent: #6366f1;         /* 靛蓝 */
    --accent-deep: #4f46e5;
    --accent-2: #06b6d4;       /* 青色 */
    --match: #ec4899;          /* 粉 */
    --match-2: #8b5cf6;        /* 紫 */
    --dealbreaker: #dc2626;

    --success: #059669;
    --error: #dc2626;
    --warn: #b45309;

    --grad: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
    --grad-match: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);

    --border: rgba(99, 102, 241, 0.16);   /* 旧类名兼容 */
    --primary: #4f46e5;
    --primary-hover: #4338ca;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif;
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 55%, var(--bg-bot) 100%) fixed;
    color: var(--text);
    font-size: 16px; line-height: 1.85; min-height: 100vh;
    overflow-x: hidden;
}

::selection { background: rgba(99, 102, 241, 0.22); }

/* ── 动态背景层：柔光晕 ── */
.bg-decor { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.orb {
    position: absolute; border-radius: 50%;
    filter: blur(90px); opacity: 0.55;
    animation: orbDrift 24s ease-in-out infinite alternate;
    will-change: transform;
}
.orb-a { width: 560px; height: 560px; background: #bfd4ff; top: -180px; left: -140px; }
.orb-b { width: 460px; height: 460px; background: #c8f3fb; top: 28%; right: -180px; animation-delay: -8s; }
.orb-c { width: 440px; height: 440px; background: #ffd6ec; bottom: -140px; left: 20%; animation-delay: -15s; }

@keyframes orbDrift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(60px, -40px) scale(1.08); }
    100% { transform: translate(-40px, 50px) scale(0.95); }
}

.grid-overlay {
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.055) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 75%);
}

/* ── 大湾区地标（上半屏主视觉）：澳门塔 / 新葡京 / 大三巴 / 科学馆 + 香港楼群 ── */
.gba-hero {
    position: fixed; left: 0; right: 0; top: 0; z-index: -1;
    pointer-events: none; opacity: 0.22;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
}
.gba-hero svg { width: 100%; height: auto; max-height: 76vh; display: block; }

/* ── 下侧：海面波浪 + 港珠澳大桥 ── */
.sea {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: -1;
    pointer-events: none; overflow: hidden; height: 150px;
}
.sea .bridge {
    position: absolute; left: 0; right: 0; bottom: 52px;
    color: #6d74e8; opacity: 0.20;
}
.sea .bridge svg { width: 100%; height: 80px; display: block; }
.sea .wave {
    position: absolute; bottom: 0; left: 0; width: 200%; height: 78px;
}
.sea .wave svg { width: 100%; height: 100%; display: block; }
.sea .w1 { color: #8fd8ee; opacity: 0.35; animation: seaDrift 22s linear infinite; }
.sea .w2 { color: #a5b4fc; opacity: 0.28; animation: seaDrift 14s linear infinite reverse; bottom: -14px; }
@keyframes seaDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── 右上角语言切换 ── */
.lang-select {
    appearance: none; -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(109, 116, 232, 0.35);
    color: #37415c; font-size: 13px; font-weight: 600;
    border-radius: 999px; padding: 5px 26px 5px 12px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236d74e8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    transition: border-color .2s, box-shadow .2s;
}
.lang-select:hover, .lang-select:focus {
    border-color: #6d74e8; outline: none;
    box-shadow: 0 0 0 3px rgba(109, 116, 232, 0.14);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Nav ── */
.nav {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--card-border);
    padding: 0 16px;
    position: sticky; top: 0; z-index: 30;
}
.nav-inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 58px; }
.nav-brand {
    font-size: 1.15em; font-weight: 800; text-decoration: none; letter-spacing: 0.2px;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-right { display: flex; align-items: center; gap: 20px; font-size: 0.95em; }
.nav-link { color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }
.nav-link:hover { color: var(--accent-deep); }

/* ── Main ── */
.main { max-width: 900px; margin: 36px auto; padding: 0 20px 130px; }

/* ── Hero ── */
.hero { text-align: center; margin: 26px 0 40px; }
.hero h1 {
    font-size: 2.5em; line-height: 1.3; margin-bottom: 14px; font-weight: 800; letter-spacing: -0.5px;
}
.hero .grad-text {
    background: linear-gradient(120deg, #4f46e5, #0891b2 45%, #db2777 90%);
    background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shimmer 8s linear infinite;
}
@keyframes shimmer { to { background-position: 220% center; } }
.hero-sub { color: var(--text-secondary); font-size: 1.12em; line-height: 1.8; max-width: 560px; margin: 0 auto; }

.kicker {
    display: inline-block; font-size: 0.78em; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; color: #0891b2; margin-bottom: 8px;
}
.stat-chip {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 16px; padding: 7px 18px; border-radius: 99px;
    background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(99, 102, 241, 0.28);
    font-size: 0.9em; color: #4338ca;
    box-shadow: 0 4px 18px rgba(99, 102, 241, 0.10);
}

/* 闪烁绿点（在线感/人数徽标） */
.live-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.9);
    animation: blinkDot 1.6s ease-in-out infinite;
}
@keyframes blinkDot {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(34, 197, 94, 0.9); }
    50%      { opacity: 0.35; box-shadow: 0 0 2px rgba(34, 197, 94, 0.4); }
}
.stat-chip .dot {
    width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.9); animation: blinkDot 1.6s ease-in-out infinite;
}

/* 学校列表（带闪烁绿点） */
.school-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.school-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; border-radius: 99px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(99, 102, 241, 0.2);
    font-size: 0.88em; color: var(--text);
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.07);
    transition: transform 0.15s, box-shadow 0.15s;
}
.school-pill:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.15); }
.school-pill .cnt { font-weight: 800; color: var(--accent-deep); }

/* ── Card（亮色玻璃）── */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-radius: 16px; padding: 24px 28px; margin-bottom: 18px;
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.07);
    animation: cardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.card:hover { border-color: var(--card-border-hover); box-shadow: 0 10px 36px rgba(99, 102, 241, 0.12); }
@keyframes cardIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
.card h2 { font-size: 1.3em; margin-bottom: 16px; }
.card h3 { font-size: 1.1em; margin-bottom: 10px; }

/* ── 区块标题 ── */
.section-head { text-align: center; margin: 46px 0 22px; }
.section-head h2 { font-size: 1.6em; font-weight: 800; }

/* ── 步骤卡 ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step-card { text-align: left; position: relative; overflow: hidden; }
.step-num {
    font-size: 2.2em; font-weight: 800; line-height: 1;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
    margin-bottom: 10px; display: block;
}
.step-card h3 { margin-bottom: 6px; }
.step-card p { font-size: 0.92em; color: var(--text-secondary); }

/* ── 特性网格 ── */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.feature-card h4 { font-size: 1.02em; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.feature-card p { font-size: 0.9em; color: var(--text-secondary); }
.feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; font-size: 0.95em;
    background: rgba(99, 102, 241, 0.10); border: 1px solid rgba(99, 102, 241, 0.22);
    color: var(--accent-deep);
}

/* ── Form ── */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; font-size: 0.95em; margin-bottom: 6px; color: var(--text); }
.form-group input, .form-group select, .form-group textarea,
input[type="text"], input[type="email"] {
    width: 100%; padding: 12px 14px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #d7deee;
    color: var(--text);
    border-radius: 10px; font-size: 1em; font-family: inherit;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.form-group input::placeholder, input::placeholder { color: #9aa7bd; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
input[type="text"]:focus, input[type="email"]:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16), 0 0 20px rgba(99, 102, 241, 0.08);
}
.hint { font-size: 0.9em; color: var(--text-secondary); margin-top: 6px; line-height: 1.65; }
.error { color: var(--error); }

/* 状态文本 */
.t-ok { color: var(--success); }
.t-err { color: var(--error); }
.t-dim { color: var(--text-secondary); }
.code-chip {
    display: inline-block; background: #fef3c7;
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #92400e; padding: 8px 12px; border-radius: 10px;
}

/* ── Buttons ── */
.btn {
    display: inline-block; padding: 12px 26px; border: none; border-radius: 10px;
    font-size: 1em; font-weight: 700; cursor: pointer; text-decoration: none;
    color: var(--text); position: relative;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s, opacity 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary {
    background: var(--grad); color: #fff;
    box-shadow: 0 4px 18px rgba(99, 102, 241, 0.32);
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 6px 26px rgba(6, 182, 212, 0.35); }

.btn-secondary {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #d7deee;
    color: var(--text);
}
.btn-secondary:hover { background: #fff; border-color: #b9c4dd; }

.btn-match {
    background: var(--grad-match); color: #fff;
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.32);
    animation: matchGlow 2.8s ease-in-out infinite;
}
.btn-match:hover:not(:disabled) { box-shadow: 0 8px 30px rgba(236, 72, 153, 0.45); }
@keyframes matchGlow {
    50% { box-shadow: 0 4px 30px rgba(139, 92, 246, 0.45); }
}

/* ── Tags ── */
.tag-badge {
    display: inline-block; padding: 3px 12px;
    background: rgba(255, 255, 255, 0.8); border: 1px solid #dbe2f0;
    border-radius: 99px; font-size: 0.85em; margin: 2px 4px; color: var(--text-secondary);
}
.tag {
    display: inline-block; padding: 3px 12px;
    background: #e0e7ff; border: 1px solid rgba(99, 102, 241, 0.3);
    color: #4338ca; border-radius: 99px; font-size: 0.85em; margin: 2px;
}

/* ── Progress Bar ── */
.progress-bar-container {
    background: #e5eaf5; border-radius: 99px; height: 10px; margin-bottom: 8px; flex: 1;
    overflow: hidden;
}
.progress-bar-fill {
    background: var(--grad); height: 10px; border-radius: 99px;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.progress-sticky {
    position: sticky; top: 58px; z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.10);
}

/* 匹配度条 */
.meter { background: #e5eaf5; border-radius: 99px; height: 6px; margin: 8px 0; overflow: hidden; }
.meter-fill {
    height: 100%; border-radius: 99px;
    background: var(--grad);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.45);
    animation: meterIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes meterIn { from { width: 0; } }

/* 信息面板 */
.box { border-radius: 12px; padding: 12px 14px; margin-top: 10px; border: 1px solid; }
.box-info { background: rgba(59, 130, 246, 0.07);  border-color: rgba(59, 130, 246, 0.25); }
.box-ice  { background: rgba(236, 72, 153, 0.06);  border-color: rgba(236, 72, 153, 0.25); }
.box-ok   { background: rgba(16, 185, 129, 0.07);  border-color: rgba(16, 185, 129, 0.3); }
.box-warn { background: rgba(245, 158, 11, 0.08);  border-color: rgba(245, 158, 11, 0.35); }
.box-dim  { background: rgba(99, 102, 241, 0.04);  border-color: rgba(99, 102, 241, 0.14); }

.wechat-line { color: #0e7490; font-weight: 700; font-size: 1.05em; margin-top: 12px; }

.list-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #e8edf7; }
.list-row:last-child { border-bottom: none; }

/* ── Form Row (profile) ── */
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ════════════════════════════════════════
   Questionnaire
   ════════════════════════════════════════ */
.dimension-card { padding: 16px 24px; margin-bottom: 12px; }
.dimension-card h3 { font-size: 1.1em; }
.dim-count { font-weight: 500; font-size: 0.85em; opacity: 0.75; }

.q-item { padding: 18px 12px; border-bottom: 1px solid #eef2fa; border-radius: 10px; transition: background 0.15s; }
.q-item:last-child { border-bottom: none; }
.q-dealbreaker { border-left: 3px solid var(--dealbreaker); padding-left: 14px; }
.q-todo .q-num { background: #94a3b8; }
.q-done .q-num { background: #10b981; }
.q-error {
    background: #fef2f2;
    box-shadow: inset 0 0 0 1px #fecaca;
}

.q-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.95em; flex-wrap: wrap; }
.q-text { flex: 1; min-width: 140px; }
.q-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent); color: #fff; font-size: 0.75em; font-weight: 700;
}
.q-db {
    font-size: 0.7em; padding: 2px 8px; background: #fef2f2;
    color: var(--dealbreaker); border: 1px solid #fecaca;
    border-radius: 99px; font-weight: 700; flex-shrink: 0;
}
.q-db-hint {
    margin: 4px 0 8px 2.2em;
    color: #b91c1c;
    font-size: 0.82em;
}
.q-status {
    font-size: 0.72em; padding: 2px 8px; border-radius: 99px; flex-shrink: 0;
    background: #eef2fa; color: var(--text-secondary); font-weight: 600;
}
.q-done .q-status { background: #d1fae5; color: #047857; }
.q-todo .q-status { background: #fef3c7; color: #b45309; }

/* Likert 1-5 按钮 */
.likert-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.scale-l { font-size: 0.78em; color: var(--text-secondary); max-width: 140px; line-height: 1.45; flex-shrink: 0; }
.scale-l-left { text-align: right; }
.scale-l-right { text-align: left; }
.likert-opts { display: flex; gap: 8px; flex: 1; justify-content: center; min-width: 180px; }
.likert-btn {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: #fff; color: var(--text);
    font-weight: 700; font-size: 0.95em;
    cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none; appearance: none;
    outline: none;
    overflow: hidden;
    touch-action: manipulation;
}
.likert-btn:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.18); }
.likert-btn:focus, .likert-btn:focus-visible, .likert-btn:active {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.likert-btn.on {
    background: var(--grad); border-color: transparent; color: #fff;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35);
}

/* 兼容旧滑块类名 */
.scale-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.scale-mid { flex: 1; }
.scale-rng {
    width: 100%; -webkit-appearance: none; appearance: none;
    height: 6px; background: #e5eaf5; border-radius: 3px; outline: none; cursor: pointer;
}
.scale-rng::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); cursor: pointer; border: 2px solid #fff;
}

/* Multi select */
.multi-row { display: flex; flex-wrap: wrap; gap: 7px; }
.multi-tag {
    display: inline-block; padding: 6px 14px;
    border: 1.5px solid #d7deee;
    background: #fff;
    border-radius: 99px; font-size: 0.88em; cursor: pointer; user-select: none;
    transition: all 0.15s; line-height: 1.4; color: var(--text);
}
.multi-tag:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15); }
.multi-tag.on {
    background: #e0e7ff; border-color: #818cf8; color: #4338ca; font-weight: 600;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
}

textarea.open-letter {
    width: 100%; min-height: 140px; padding: 12px 14px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #d7deee; border-radius: 12px;
    color: var(--text); font-size: 0.98em; line-height: 1.65;
    font-family: inherit; resize: vertical;
    transition: border-color 0.18s, box-shadow 0.18s;
}
textarea.open-letter:focus {
    outline: none; border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
}

.ice-card {
    margin-top: 10px; padding: 10px 12px;
    background: rgba(253, 242, 248, 0.7);
    border: 1px solid rgba(244, 114, 182, 0.35);
    border-radius: 12px; text-align: left;
}
.ice-send { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ice-send-label { font-size: 0.85em; color: #9d174d; font-weight: 700; }
.ice-send-text {
    flex: 1; min-width: 160px; padding: 8px 10px;
    background: #fff; border-radius: 8px; border: 1px dashed #f9a8d4;
    font-size: 0.92em; color: var(--text); white-space: pre-wrap;
}
.ice-copy { padding: 6px 12px !important; font-size: 0.85em !important; }

/* Important button */
.imp-btn {
    margin-top: 8px; padding: 4px 14px;
    border: 1.5px solid #fbbf24;
    background: transparent; color: #92400e; border-radius: 99px;
    font-size: 0.8em; cursor: pointer; transition: all 0.15s;
}
.imp-btn:hover { background: #fef3c7; }
.imp-btn.on {
    background: #fbbf24; color: #78350f;
    border-color: #f59e0b; font-weight: 700;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
}

/* ════════════════════════════════════════
   Match Result
   ════════════════════════════════════════ */
.insight-box {
    background: var(--card-bg); border: 1px solid var(--card-border);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-radius: 16px; padding: 20px 24px;
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.07);
}
.insight-box h3 { font-size: 1em; margin-bottom: 10px; }
.insight-box table td {
    padding: 6px 10px; border-bottom: 1px solid #eef2fa; font-size: 0.9em;
}

/* Footer */
.footer {
    text-align: center; padding: 28px 16px; color: var(--text-secondary);
    font-size: 0.88em; border-top: 1px solid var(--card-border); margin-top: 48px; line-height: 1.7;
    position: relative; z-index: 1;
}

/* ── Responsive ── */
.db-explain-compact { display: none; }
.db-explain-compact summary {
    font-weight: 700;
    font-size: 0.9em;
    cursor: pointer;
    list-style: none;
}
.db-explain-compact summary::-webkit-details-marker { display: none; }
.db-explain-compact summary::after {
    content: ' ▾';
    font-weight: 500;
    opacity: 0.65;
}
.db-explain-compact[open] summary::after { content: ' ▴'; }

@media (max-width: 720px) {
    .steps, .features { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .nav {
        padding: 0 10px;
    }
    .nav-inner {
        height: auto;
        min-height: 52px;
        padding: 8px 0;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
    }
    .nav-brand { font-size: 0.95em; flex-shrink: 0; }
    .nav-right {
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        font-size: 0.82em;
        overflow: visible;
    }
    .nav-link {
        white-space: nowrap;
        font-size: 0.8em;
        padding: 4px 2px;
        flex-shrink: 0;
    }
    /* 避免 max-width 裁切文字/箭头，看起来像被挡住 */
    .lang-select {
        font-size: 12px;
        padding: 5px 24px 5px 10px;
        max-width: none;
        flex-shrink: 0;
        background-position: right 8px center;
        line-height: 1.2;
    }

    .hero h1 { font-size: 1.65em; }
    .card { padding: 16px; }
    .form-row { flex-direction: column; gap: 0; }

    /* 粘性顶栏：进度 + 折叠版一票否决（PC 仍用完整说明） */
    .progress-sticky { top: 52px; }
    .db-explain-full { display: none !important; }
    .db-explain-compact {
        display: block;
        padding: 8px 10px;
        margin-top: 8px !important;
    }
    .db-explain-compact .hint {
        font-size: 0.8em;
        line-height: 1.45;
    }

    /*
      Likert 手机：标签在按钮上方左右对齐（左=1，右=5），
      避免长文案挤在两侧重叠按钮；PC 仍两侧横排。
    */
    .likert-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "left right"
            "opts opts";
        gap: 6px 10px;
        align-items: end;
    }
    .scale-l {
        max-width: none;
        font-size: 0.72em;
        line-height: 1.35;
        flex-shrink: 0;
    }
    .scale-l-left {
        grid-area: left;
        text-align: left !important;
    }
    .scale-l-right {
        grid-area: right;
        text-align: right !important;
    }
    .likert-opts {
        grid-area: opts;
        gap: 6px;
        flex: none;
        width: 100%;
        min-width: 0;
        justify-content: space-between;
    }
    .likert-btn {
        width: 40px;
        height: 40px;
        font-size: 0.9em;
        flex-shrink: 0;
    }

    .q-head { gap: 8px; }
    .orb { filter: blur(60px); }
}