/* ============================================================
   测评站前台样式
   —— 卡片式画廊 + 逐题答题 + 结果海报
   ============================================================ */

:root {
    --bg: #f6f5fa;
    --card: #ffffff;
    --ink: #1f1b2e;
    --ink-2: #4a4560;
    --muted: #8b86a6;
    --line: #e8e5f0;
    --accent: #6c5dd3;
    --accent-2: #2ab8c6;
    --radius: 20px;
    --shadow: 0 2px 8px rgba(31, 27, 46, .04), 0 12px 32px rgba(31, 27, 46, .06);
    --shadow-hover: 0 4px 12px rgba(31, 27, 46, .06), 0 20px 48px rgba(31, 27, 46, .12);
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---------------- 顶部导航 ---------------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(246, 245, 250, .88);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.nav-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 60px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .02em;
    flex: none;
}
.brand-mark {
    width: 28px; height: 28px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: grid; place-items: center;
    color: #fff; font-size: 15px;
}
.nav-links {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13.5px;
    color: var(--ink-2);
    white-space: nowrap;
    transition: .18s;
}
.nav-links a:hover { background: #fff; color: var(--ink); }
.nav-links a.on { background: var(--ink); color: #fff; }

/* ---------------- 首页 hero ---------------- */
.hero {
    padding: 56px 0 32px;
    text-align: center;
}
.hero h1 {
    font-size: 40px;
    line-height: 1.25;
    margin: 0 0 14px;
    letter-spacing: -.02em;
    font-weight: 800;
}
.hero h1 em {
    font-style: normal;
    background: linear-gradient(115deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero p {
    margin: 0 auto 26px;
    max-width: 560px;
    color: var(--muted);
    font-size: 15.5px;
}
.search {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
}
.search input {
    width: 100%;
    height: 50px;
    padding: 0 48px 0 46px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
    color: var(--ink);
    outline: none;
    box-shadow: var(--shadow);
    transition: .2s;
}
.search input:focus { border-color: #cfc8ee; box-shadow: 0 0 0 4px rgba(108, 93, 211, .1); }
.search .ico {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: 16px;
}
.search button {
    position: absolute; right: 6px; top: 6px;
    height: 38px; padding: 0 18px;
    border: 0; border-radius: 999px;
    background: var(--ink); color: #fff;
    font-size: 14px; cursor: pointer;
}

/* ---------------- 统计条 ---------------- */
.stats {
    display: flex;
    justify-content: center;
    gap: 36px;
    margin: 26px 0 0;
    color: var(--muted);
    font-size: 13px;
}
.stats b { display: block; color: var(--ink); font-size: 22px; font-weight: 700; line-height: 1.3; }

/* ---------------- 分类筛选 ---------------- */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 44px 0 18px;
}
.section-head h2 {
    font-size: 21px;
    margin: 0;
    letter-spacing: -.01em;
}
.section-head span { color: var(--muted); font-size: 13px; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 15px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 13.5px;
    cursor: pointer;
    transition: .18s;
}
.chip:hover { border-color: #d6d0ea; transform: translateY(-1px); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip i { font-style: normal; opacity: .55; font-size: 12px; }

/* ---------------- 模块卡片 ---------------- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid rgba(31, 27, 46, .05);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card-top {
    position: relative;
    padding: 26px 22px 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--c1, #6c5dd3), var(--c2, #2ab8c6));
    overflow: hidden;
}
.card-top::after {
    content: "";
    position: absolute;
    right: -40px; top: -50px;
    width: 150px; height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
}
.card-emoji { font-size: 34px; line-height: 1; margin-bottom: 12px; }
.card-top h3 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.card-top p {
    margin: 6px 0 0;
    font-size: 12.5px;
    opacity: .86;
    line-height: 1.5;
    min-height: 38px;
}
.card-body { padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.card-desc { color: var(--ink-2); font-size: 13.5px; margin: 0; flex: 1; }
.card-meta {
    display: flex; flex-wrap: wrap; gap: 8px;
    color: var(--muted); font-size: 12px;
}
.card-meta span {
    background: #f4f2fa;
    border-radius: 7px;
    padding: 3px 9px;
}
.card-go {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13.5px; font-weight: 600;
    color: var(--ink);
}
.card-go i { font-style: normal; transition: transform .2s; }
.card:hover .card-go i { transform: translateX(4px); }

/* ---------------- 通用面板 ---------------- */
.panel {
    background: #fff;
    border: 1px solid rgba(31, 27, 46, .05);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 30px;
}
.panel + .panel { margin-top: 18px; }
.panel h2 { font-size: 18px; margin: 0 0 14px; }
.panel p { color: var(--ink-2); }
.panel p:last-child { margin-bottom: 0; }

.crumb {
    display: flex; align-items: center; gap: 8px;
    color: var(--muted); font-size: 13px;
    padding: 22px 0 0;
}
.crumb a:hover { color: var(--ink); }

/* ---------------- 模块详情 ---------------- */
.mod-hero {
    position: relative;
    margin-top: 16px;
    border-radius: 26px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(130deg, var(--c1), var(--c2));
    box-shadow: 0 18px 44px rgba(31, 27, 46, .18);
}
.mod-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 80% at 85% 0%, rgba(255,255,255,.28), transparent 60%);
}
.mod-hero-in {
    position: relative;
    padding: 40px 36px 34px;
    display: flex;
    gap: 30px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.mod-hero .em { font-size: 54px; line-height: 1; }
.mod-hero h1 { margin: 10px 0 8px; font-size: 34px; letter-spacing: -.02em; }
.mod-hero .sub { margin: 0; font-size: 14.5px; opacity: .9; max-width: 560px; }
.mod-meta {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;
}
.mod-meta span {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .22);
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    backdrop-filter: blur(4px);
}
.cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--ink);
    padding: 13px 30px;
    border-radius: 999px;
    font-weight: 700; font-size: 15px;
    border: 0; cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    transition: .2s;
    margin-left: auto;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); }
.cta.ghost {
    background: transparent; color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .6);
    box-shadow: none;
}
.cta.ghost:hover { background: rgba(255, 255, 255, .12); }

/* 介绍页底部那排按钮：查看结果 + 开始测评 */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.dims {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.dim {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 18px 16px;
}
.dim .em { font-size: 22px; }
.dim h4 { margin: 8px 0 4px; font-size: 15px; }
.dim p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.intro-block p { color: var(--ink-2); }
.tips { list-style: none; padding: 0; margin: 14px 0 0; }
.tips li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
    color: var(--ink-2);
    font-size: 14px;
}
.tips li::before {
    content: "·";
    position: absolute; left: 8px; top: -2px;
    color: var(--accent); font-weight: 700; font-size: 20px;
}

/* ---------------- 答题 ---------------- */
.quiz-page { min-height: 100vh; display: flex; flex-direction: column; }
.quiz-bar {
    position: sticky; top: 60px; z-index: 40;
    background: rgba(246, 245, 250, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.quiz-bar-in {
    height: 58px;
    display: flex; align-items: center; gap: 16px;
}
.quiz-bar .back { color: var(--muted); font-size: 13px; }
.quiz-bar .back:hover { color: var(--ink); }
.progress {
    flex: 1;
    height: 6px;
    border-radius: 99px;
    background: #e6e3f0;
    overflow: hidden;
}
.progress b {
    display: block; height: 100%; width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--c1, #6c5dd3), var(--c2, #2ab8c6));
    transition: width .32s cubic-bezier(.2,.8,.3,1);
}
.progress-num { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.quiz-main { flex: 1; padding: 42px 0 60px; }
.q-card {
    max-width: 660px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    border: 1px solid rgba(31, 27, 46, .05);
    box-shadow: var(--shadow);
    padding: 34px 34px 28px;
    animation: qIn .32s cubic-bezier(.2,.8,.3,1);
}
.q-img {
    display: block;
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    margin: 4px 0 20px;
    background: #f2f0fa;
}
/* 示例导入模块的配图是 750×1624 的竖构图，本来就是当整屏背景画的：卡片按这个比例定高、
   图铺满整张卡片，题号/题干/选项浮在上部约 1/3。实测每张图从上往下 33%–55% 才是白色留白的
   尽头，所以字基本落在留白里；再垫一层顶部白色渐隐兜底，保证选项压到画时仍读得清。
   卡片比例 = 图比例 → 一张都不裁。 */
.dm-page .q-card {
    position: relative;
    padding: 0;
    aspect-ratio: 750 / 1624;
    min-height: max-content;
    overflow: hidden;
}
.dm-page .q-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: 50% 100%;
    margin: 0;
    border-radius: 0;
    background: none;
    z-index: 0;
}
.dm-page .q-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 46%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, #fff 0, #fff 52%, rgba(255, 255, 255, .82) 74%, rgba(255, 255, 255, 0) 100%);
}
.dm-page .q-card > :is(.q-idx, .q-title, .q-note, .opts) {
    position: relative;
    z-index: 2;
    padding-inline: 34px;
}
.dm-page .q-idx { padding-top: 30px; }
@media (max-width: 720px) {
    .dm-page .q-card > :is(.q-idx, .q-title, .q-note, .opts) { padding-inline: 22px; }
}
@keyframes qIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.q-idx {
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.q-title {
    font-size: 22px;
    line-height: 1.5;
    margin: 0 0 6px;
    font-weight: 700;
    letter-spacing: -.01em;
}
.q-note { color: var(--muted); font-size: 13px; margin: 0 0 22px; }
.opts { display: flex; flex-direction: column; gap: 10px; }
.opt {
    display: flex; align-items: center; gap: 13px;
    padding: 15px 17px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    color: var(--ink);
    font-family: inherit;
    transition: .16s;
}
.opt:hover { border-color: #cfc8ee; background: #fbfaff; transform: translateX(2px); }
.opt .key {
    flex: none;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: #f2f0f9;
    color: var(--muted);
    display: grid; place-items: center;
    font-size: 12.5px; font-weight: 700;
    transition: .16s;
}
.opt.sel { border-color: var(--c1, #6c5dd3); background: #f7f5ff; box-shadow: 0 0 0 3px rgba(108, 93, 211, .1); }
.opt.sel .key { background: var(--c1, #6c5dd3); color: #fff; }

.quiz-foot {
    max-width: 660px;
    margin: 20px auto 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 46px; padding: 0 26px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-2);
    font-size: 14.5px; font-family: inherit;
    cursor: pointer;
    transition: .18s;
}
.btn:hover { border-color: #d6d0ea; color: var(--ink); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary {
    background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600;
}
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(31, 27, 46, .18); }
.btn.small { height: 36px; padding: 0 16px; font-size: 13px; }

/* ---------------- 结果 ---------------- */
.result-wrap { max-width: 720px; margin: 0 auto; }
.result-hero {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(130deg, var(--c1), var(--c2));
    padding: 40px 34px 34px;
    text-align: center;
    box-shadow: 0 18px 44px rgba(31, 27, 46, .18);
}
.result-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(100% 70% at 50% 0%, rgba(255,255,255,.26), transparent 62%);
}
.result-hero > * { position: relative; }
.result-hero .tier {
    font-size: 11.5px; letter-spacing: .22em; opacity: .8; text-transform: uppercase;
}
.result-hero .score {
    font-size: 72px; font-weight: 800; line-height: 1.05; margin: 10px 0 2px;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.result-hero .score span { font-size: 26px; font-weight: 600; opacity: .85; }
.result-hero h1 { font-size: 28px; margin: 12px 0 8px; letter-spacing: -.01em; }
.result-hero .lead { margin: 0; font-size: 14.5px; opacity: .92; }
.result-hero .en {
    font-size: 13px; letter-spacing: .14em; opacity: .7; text-transform: uppercase; margin-top: 4px;
}
.axes { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.axis { text-align: left; }
.axis .row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; margin-bottom: 6px;
}
.axis .row b { font-variant-numeric: tabular-nums; }
.axis .track {
    height: 8px; border-radius: 99px;
    background: rgba(255, 255, 255, .26);
    overflow: hidden;
}
.axis .track i {
    display: block; height: 100%;
    border-radius: 99px;
    background: #fff;
    opacity: .92;
}

.read-box {
    background: #fff;
    border-radius: 22px;
    border: 1px solid rgba(31, 27, 46, .05);
    box-shadow: var(--shadow);
    padding: 28px 30px;
    margin-top: 18px;
}
.read-box h3 {
    font-size: 15px; margin: 0 0 12px;
    letter-spacing: .02em;
    display: flex; align-items: center; gap: 8px;
}
.read-box h3::before {
    content: ""; width: 3px; height: 15px; border-radius: 2px;
    background: var(--accent);
}
.read-box p { color: var(--ink-2); margin: 0 0 12px; }
.read-box p:last-child { margin-bottom: 0; }
.advice {
    background: linear-gradient(135deg, #f7f5ff, #f2fbfa);
    border: 1px solid #eee9fb;
}
.advice h3::before { background: var(--accent-2); }

/* ---------------- 匹配型结果：城市偏好 / 景点 / 美食 / 备选 ---------------- */
.pref-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 28px;
}
.pref .row {
    display: flex; align-items: baseline; justify-content: space-between;
    font-size: 13px; color: var(--ink-2); margin-bottom: 6px;
}
.pref .row b { font-variant-numeric: tabular-nums; color: var(--ink); }
.pref .track {
    height: 8px; border-radius: 99px;
    background: #efeef6;
    overflow: hidden;
}
.pref .track i {
    display: block; height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, var(--c1, #6c5dd3), var(--c2, #2ab8c6));
}
.pref .hint { margin-top: 5px; font-size: 11.5px; color: var(--muted); }

.poi-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.poi {
    display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start;
    padding: 14px 16px; border-radius: 16px;
    background: #faf9fe; border: 1px solid #ece8f8;
}
.poi .n {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #efeafd, #e0d8f7);
    color: #6c5dd3; font-weight: 800; font-size: 14px;
}
.poi b { display: block; font-size: 14.5px; margin-bottom: 4px; color: var(--ink); }
.poi p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.65; }

.food-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.food-chip2 {
    display: inline-flex; align-items: center;
    padding: 8px 14px; border-radius: 14px;
    background: #f6f2ff; border: 1px solid #e5dcfa;
    color: #5a5190; font-size: 13.5px; font-weight: 700;
}
.food-chip2::before { content: "🍴"; margin-right: 6px; font-size: 13px; }

.others { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.other {
    border: 1px solid #ece8f8; border-radius: 18px;
    padding: 16px 16px 14px; background: #fbfaff;
}
.other-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.other-top b { font-size: 16px; }
.other-top span { font-size: 12px; color: var(--muted); margin-left: 6px; }
.other-top i { font-style: normal; font-weight: 800; color: #6c5dd3; font-variant-numeric: tabular-nums; }
.other .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.other .tags span {
    font-size: 11.5px; padding: 3px 9px; border-radius: 99px;
    background: #efeafd; color: #6c5dd3;
}
.other p { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.7; }

.city-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.city-chip {
    padding: 6px 13px; border-radius: 99px;
    background: #f4f2fc; border: 1px solid #e8e3f7;
    color: #5c5480; font-size: 12.5px;
}

/* ---------------- 历史人物结果：核心轮廓 / 蛛网图 / 相照 ---------------- */
.result-hero .hf-score-label {
    font-size: 12.5px; letter-spacing: .12em; opacity: .82; margin-top: -2px;
}
.hf-page .result-hero .tier span {
    display: block; margin-top: 3px;
    font-size: 12px; letter-spacing: .18em;
}
.result-hero .hf-tier { font-size: 12px; }
.result-hero .hf-hero-id {
    font-size: 13.5px; letter-spacing: .04em; opacity: .9; margin-top: 2px;
}
.hf-hero-tags {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin-top: 18px;
}
.hf-hero-tags span {
    padding: 6px 14px; border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, .5);
    font-size: 12.5px; color: #fff; letter-spacing: .02em;
}
.hf-hero-tags span.on {
    background: rgba(255, 255, 255, .93);
    border-color: transparent;
    color: var(--c1, #3d4a63); font-weight: 600;
}
.hf-arch { display: flex; flex-direction: column; gap: 10px; }
.hf-arch-badge {
    align-self: flex-start;
    padding: 5px 13px; border-radius: 99px;
    background: linear-gradient(120deg, #3d4a63, #b0894a);
    color: #fff; font-size: 12px; letter-spacing: .08em;
}
.hf-arch h2 {
    font-size: 21px; line-height: 1.45; letter-spacing: -.01em;
    margin: 2px 0 0; color: var(--ink);
}
.hf-arch p { margin: 0; }
.hf-arch-dim { font-size: 13px; color: var(--muted); }
.hf-arch-dim b { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hf-arch-figure { font-size: 13.5px; color: var(--ink-2); line-height: 1.75; }

.hf-lead { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }
.hf-radar { max-width: 420px; margin: 4px auto 0; }
.hf-radar svg { display: block; width: 100%; height: auto; }
.hf-grid polygon { fill: none; stroke: #e8e5f1; stroke-width: 1; }
.hf-grid line { stroke: #e8e5f1; stroke-width: 1; }
.hf-poly-figure { fill: rgba(176, 137, 74, .1); stroke: #b0894a; stroke-width: 1.6; stroke-dasharray: 5 4; }
.hf-poly-user { fill: rgba(61, 74, 99, .16); stroke: #3d4a63; stroke-width: 2; stroke-linejoin: round; }
.hf-axis-labels text {
    font-size: 14px; fill: #6b6480; font-family: inherit; letter-spacing: .02em;
}
.hf-legend {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
    font-size: 12.5px; color: var(--ink-2); margin: 2px 0 22px;
}
.hf-legend span { display: inline-flex; align-items: center; gap: 7px; }
.hf-legend i { width: 16px; height: 3px; border-radius: 2px; background: #3d4a63; }
.hf-legend .gold i { background: #b0894a; }

.hf-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.hf-bar .row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    font-size: 13px; color: var(--ink-2); margin-bottom: 6px;
}
.hf-bar .row b { color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 3px; }
.hf-bar .row em { font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hf-bar .track {
    position: relative; height: 8px; border-radius: 99px;
    background: #efeef6; overflow: visible;
}
.hf-bar .track i {
    display: block; height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, #3d4a63, #7b86a8);
}
.hf-bar .track u {
    position: absolute; top: -4px; width: 2px; height: 16px; border-radius: 2px;
    background: #b0894a; transform: translateX(-1px);
}
.hf-bar .hint { margin-top: 6px; font-size: 12px; color: var(--muted); }

.hf-shares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 4px; }
.hf-share {
    border: 1px solid #ece8f8; border-radius: 14px;
    padding: 12px 14px; background: #fbfaff;
}
.hf-share b { display: block; font-size: 13.5px; margin-bottom: 6px; color: var(--ink); }
.hf-share .nums { font-size: 12px; color: var(--muted); line-height: 1.7; font-variant-numeric: tabular-nums; }
.hf-share .nums i { font-style: normal; color: #a17c3d; }
.hf-context {
    margin: 16px 0 0; padding: 14px 16px; border-radius: 14px;
    background: #f7f6fb; font-size: 13px; color: var(--ink-2); line-height: 1.75;
}
.hf-context b {
    display: block; margin-bottom: 5px;
    font-size: 12px; letter-spacing: .08em; color: var(--muted); font-weight: 600;
}
.hf-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 0; }
.hf-pair {
    border: 1px solid #ece8f8; border-radius: 16px;
    padding: 14px 16px; background: #faf9fe;
}
.hf-pair span {
    display: block; margin-bottom: 6px;
    font-size: 12px; letter-spacing: .08em; color: var(--muted);
}
.hf-pair p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--ink-2); }
.hf-watch {
    margin: 14px 0 0; padding: 14px 16px; border-radius: 14px;
    background: #fffaf0; border: 1px solid #f3e6cb;
    font-size: 13px; line-height: 1.75; color: var(--ink-2);
}
.hf-watch b { color: #8a6a2f; }
.hf-cost {
    padding: 14px 16px; border-radius: 14px;
    background: #f7f6fb; font-size: 13px; line-height: 1.75; color: var(--ink-2);
}
.hf-cost b { color: var(--ink); }
.hf-note {
    font-size: 12.5px; line-height: 1.75;
    color: var(--muted); border-top: 1px dashed #e8e5f1; padding-top: 12px;
}
/* 这两块是 <p>，`.read-box p { margin: 0 0 12px }`（0,1,1）会盖掉单类名（0,1,0）的上边距，
   结果「强项/代价」两张卡、代价框、边界行全贴在一起，所以间距必须写在同样的层级上。 */
.read-box p.hf-cost { margin: 16px 0 12px; }
.read-box p.hf-note { margin-top: 14px; }
.hf-note b { color: var(--ink-2); }
.hf-other-dim { margin-top: 6px !important; font-size: 12px !important; color: #8a6a2f !important; }
.hf-tags span { font-size: 12px !important; }

/* ---------------- 历史人物介绍页：能做什么 / 怎么用 / 情境 / FAQ ---------------- */
.hf-about { font-size: 14px; line-height: 1.85; color: var(--ink-2); margin: 0 0 20px; }
.hf-example {
    display: grid; grid-template-columns: 300px 1fr; gap: 22px;
    align-items: start; padding-top: 20px; border-top: 1px dashed #e8e5f1;
}
.hf-example-card {
    border-radius: 18px; padding: 18px 18px 14px;
    background: linear-gradient(160deg, #3d4a63, #55607d);
    color: #fff; box-shadow: 0 12px 30px rgba(61, 74, 99, .22);
}
.hf-example-tag {
    font-size: 12px; letter-spacing: .12em; opacity: .72;
}
.hf-example-name {
    font-size: 22px; font-weight: 800; margin-top: 6px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.hf-example-name i { font-style: normal; font-size: 16px; color: #e4c78e; font-variant-numeric: tabular-nums; }
.hf-example-sub { font-size: 12.5px; opacity: .78; margin-top: 2px; }
.hf-example-bars { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.hf-example-bars div {
    display: grid; grid-template-columns: 36px 1fr 28px;
    align-items: center; gap: 10px; font-size: 12.5px;
}
.hf-example-bars .track {
    position: relative; display: block; height: 7px; border-radius: 99px;
    background: rgba(255, 255, 255, .22); overflow: visible;
}
.hf-example-bars .track i {
    display: block; height: 100%; border-radius: 99px; background: #fff; opacity: .9;
}
.hf-example-bars .track u {
    position: absolute; top: -3px; width: 2px; height: 13px; border-radius: 2px;
    background: #e4c78e; transform: translateX(-1px);
}
.hf-example-bars b { font-variant-numeric: tabular-nums; text-align: right; }
.hf-example-note { margin: 12px 0 0; font-size: 12px; opacity: .82; line-height: 1.6; }
.hf-example-copy b { font-size: 15px; color: var(--ink); }
.hf-example-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hf-example-list li {
    position: relative; padding-left: 16px;
    font-size: 13px; line-height: 1.7; color: var(--ink-2);
}
.hf-example-list li::before {
    content: ""; position: absolute; left: 0; top: 9px;
    width: 6px; height: 6px; border-radius: 50%; background: #b0894a;
}
.hf-example-list li b { color: var(--ink); }

.hf-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.hf-steps li { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); padding-left: 4px; }
.hf-steps li::marker { color: #b0894a; font-weight: 700; }

.hf-scenes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hf-scene {
    border: 1px solid #ece8f8; border-radius: 16px;
    padding: 16px 16px 14px; background: #fbfaff;
}
.hf-scene .n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px; margin-bottom: 8px;
    background: linear-gradient(135deg, #eae6f5, #dcd5ee);
    color: #4a4368; font-size: 12.5px; font-weight: 800;
}
.hf-scene b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.hf-scene p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--muted); }

.hf-cases { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.hf-cases li {
    position: relative; padding: 11px 14px 11px 34px;
    border-radius: 12px; background: #faf9fe; border: 1px solid #efebfa;
    font-size: 13px; line-height: 1.7; color: var(--ink-2);
}
.hf-cases li::before {
    content: "✓"; position: absolute; left: 13px; top: 11px;
    color: #b0894a; font-size: 12.5px; font-weight: 700;
}

.hf-faq { display: flex; flex-direction: column; gap: 8px; }
.hf-faq details {
    border: 1px solid #ece8f8; border-radius: 14px; background: #fbfaff;
    padding: 0 16px; transition: background .16s;
}
.hf-faq details[open] { background: #f7f5fc; }
.hf-faq summary {
    cursor: pointer; padding: 13px 0; font-size: 13.5px; font-weight: 600;
    color: var(--ink); list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.hf-faq summary::-webkit-details-marker { display: none; }
.hf-faq summary::after {
    content: "+"; flex: none; font-size: 15px; color: #b0894a; font-weight: 700;
}
.hf-faq details[open] summary::after { content: "−"; }
.hf-faq details p {
    margin: 0; padding: 0 0 14px; font-size: 13px; line-height: 1.78; color: var(--ink-2);
}

.hf-page.hf-standard {
    --card: #fffef8;
    --ink: #203c37;
    --ink-2: #49615b;
    --muted: #6c7a71;
    --line: #dce4da;
    --accent: #1a9e5a;
    --accent-2: #57bd85;
    --hf-soft: #edf2e8;
    --hf-ref: #738570;
    --hf-user-fill: rgba(26, 158, 90, .15);
    --hf-ref-fill: rgba(115, 133, 112, .08);
    --hf-button-ink: #fffef8;
    --hf-nav: rgba(246, 245, 250, .88);
    --hf-hero: linear-gradient(135deg, #fffdf3, #e8efe2);
    --shadow: 0 2px 5px rgba(32, 60, 55, .025), 0 16px 40px rgba(32, 60, 55, .045);
    --shadow-hover: 0 8px 28px rgba(32, 60, 55, .1);
}
.hf-page.hf-vip {
    --bg: #11110f;
    --card: #1b1b17;
    --ink: #eee5d4;
    --ink-2: #c9c0ac;
    --muted: #a29984;
    --line: #3b382d;
    --accent: #e3c990;
    --accent-2: #b6965c;
    --hf-soft: #24231d;
    --hf-ref: #a39271;
    --hf-user-fill: rgba(227, 201, 144, .16);
    --hf-ref-fill: rgba(163, 146, 113, .06);
    --hf-button-ink: #242015;
    --hf-nav: rgba(17, 17, 15, .94);
    --hf-hero: linear-gradient(135deg, #181814, #302a1d 65%, #1b1b16);
    --shadow: 0 2px 5px rgba(0, 0, 0, .12), 0 16px 40px rgba(0, 0, 0, .18);
    --shadow-hover: 0 8px 28px rgba(0, 0, 0, .3);
    color-scheme: dark;
}
/* VIP 报告页不铺黑底：底色 / 卡片 / 正文回到全站默认，只把金色身份留在强调色上。
   介绍页与答题页仍是暗色主题，只有 result 页带 hf-vip-light。 */
.hf-page.hf-vip.hf-vip-light {
    --bg: #f6f5fa;
    --card: #fff;
    --ink: #1f1b2e;
    --ink-2: #4a4560;
    --muted: #8b86a6;
    --line: #e8e5f0;
    --accent: #8a6a1f;
    --accent-2: #c9a763;
    --hf-soft: #f7f2e4;
    --hf-ref: #9c8553;
    --hf-user-fill: rgba(138, 106, 31, .15);
    --hf-ref-fill: rgba(156, 133, 83, .10);
    --hf-button-ink: #fffdf4;
    --hf-nav: rgba(246, 245, 250, .88);
    --hf-hero: linear-gradient(135deg, #fffdf4, #f3e9d5);
    --shadow: 0 2px 8px rgba(31, 27, 46, .04), 0 12px 32px rgba(31, 27, 46, .06);
    --shadow-hover: 0 4px 12px rgba(31, 27, 46, .06), 0 20px 48px rgba(31, 27, 46, .12);
    color-scheme: light;
}
.hf-page.hf-vip.hf-vip-light :is(.btn.primary, .cta) { background: var(--accent); }
.hf-page .nav, .hf-page .quiz-bar { background: var(--hf-nav); }
.hf-page .brand-mark { background: var(--accent); color: var(--hf-button-ink); }
.hf-page .nav-links a:hover { background: var(--hf-soft); color: var(--ink); }
.hf-page .nav-links a.on, .hf-page .nav-links a.on:hover { background: var(--accent); color: var(--hf-button-ink); }
.hf-page .crumb { flex-wrap: wrap; }
.hf-page :is(.panel, .read-box, .q-card, .dim, .card) { background: var(--card); border-color: var(--line); }
.hf-page :is(.mod-hero, .result-hero) { background: var(--hf-hero); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hf-page .mod-hero::before, .hf-page .result-hero::before { background: none; pointer-events: none; }
.hf-page .mod-hero h1 { margin: 16px 0 12px; }
.hf-page .hf-hero-copy { flex: 1; min-width: 0; }
.hf-page .hf-eyebrow { font-size: 11px; letter-spacing: .17em; color: var(--accent); }
.hf-page .mod-meta span { background: var(--hf-soft); border-color: var(--line); color: var(--ink-2); }
.hf-page .hf-access-note { font-size: 12.5px; line-height: 1.8; color: var(--accent); margin: 16px 0 0; }
.hf-page .poster-box .hf-access-note { padding: 12px 16px; margin: 0 0 20px; background: var(--hf-soft); border: 1px solid var(--line); border-radius: 12px; }
.hf-page .hf-vip-badge { display: inline-flex; align-items: center; padding: 5px 13px; border: 1px solid var(--accent-2); border-radius: 999px; background: var(--hf-soft); color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .14em; white-space: nowrap; }
.hf-page .result-hero { padding-top: 44px; padding-bottom: 38px; }
.hf-page .result-hero .hf-vip-badge { margin-bottom: 22px; }
.hf-page .result-hero .tier { color: var(--muted); opacity: 1; }
.hf-page .result-hero .score { color: var(--accent); font-size: clamp(64px, 9vw, 88px); margin: 24px 0 6px; letter-spacing: -.045em; }
.hf-page .result-hero .score span { color: inherit; opacity: 1; margin-left: 3px; }
.hf-page .result-hero .hf-score-label { color: var(--muted); opacity: 1; }
.hf-page .result-hero h1 { font-family: "Songti SC", "Noto Serif SC", "SimSun", serif; font-size: clamp(30px, 5vw, 38px); margin: 20px 0 8px; letter-spacing: .06em; }
.hf-page.hf-vip .result-hero h1, .hf-page.hf-vip .mod-hero h1 { color: var(--accent); }
.hf-page .result-hero .hf-hero-id { color: var(--ink-2); opacity: 1; }
.hf-page .hf-hero-tags span { color: var(--accent); border-color: var(--line); background: var(--card); }
.hf-page .hf-hero-tags span.on { color: var(--hf-button-ink); background: var(--accent); border-color: var(--accent); }
.hf-page .hf-arch-badge { color: var(--accent); background: var(--hf-soft); border: 1px solid var(--line); }
.hf-page .hf-arch-dim b, .hf-page .hf-bar .row b, .hf-page .hf-match-score { color: var(--accent); }
.hf-page .hf-grid polygon, .hf-page .hf-grid line { stroke: var(--line); }
.hf-page .hf-poly-user { fill: var(--hf-user-fill); stroke: var(--accent); stroke-width: 2.4; }
.hf-page .hf-poly-figure { fill: var(--hf-ref-fill); stroke: var(--hf-ref); stroke-width: 2; }
.hf-page .hf-axis-labels text { fill: var(--ink-2); }
.hf-page .hf-legend i { background: var(--accent); }
.hf-page .hf-legend .gold i { height: 0; background: none; border-top: 2px dashed var(--hf-ref); border-radius: 0; }
.hf-page .hf-bar .track, .hf-page .hf-example-bars .track, .hf-page .progress { background: var(--line); }
.hf-page .hf-bar .track i, .hf-page .hf-example-bars .track i, .hf-page .progress b { background: linear-gradient(90deg, var(--accent-2), var(--accent)); opacity: 1; }
.hf-page .hf-bar .track u, .hf-page .hf-example-bars .track u { background: var(--hf-ref); }
.hf-page .hf-bar .hint { color: var(--accent); }
.hf-page :is(.hf-share, .hf-pair, .hf-scene, .hf-cases li, .hf-faq details, .other) { background: var(--hf-soft); border-color: var(--line); }
.hf-page .hf-share .nums i { color: var(--hf-ref); }
.hf-page .hf-context, .hf-page .hf-cost { background: var(--hf-soft); }
.hf-page .hf-note, .hf-page .hf-example { border-color: var(--line); }
.hf-page .hf-other-dim { color: var(--muted) !important; }
.hf-page .other-top i { color: var(--accent); font-size: 18px; }
.hf-page .other .tags span, .hf-page .city-chip { background: var(--card); border-color: var(--line); color: var(--accent); }
.hf-page .hf-example-card { background: var(--hf-hero); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hf-page .hf-example-name i, .hf-page .hf-example-bars b { color: var(--accent); }
.hf-page .hf-example-sub, .hf-page .hf-example-tag { color: var(--muted); opacity: 1; }
.hf-page .hf-example-list li::before { background: var(--accent); }
.hf-page .hf-steps li::marker, .hf-page .hf-cases li::before, .hf-page .hf-faq summary::after { color: var(--accent); }
.hf-page .hf-scene .n { background: var(--card); color: var(--accent); border: 1px solid var(--line); }
.hf-page .hf-faq details[open] { background: var(--card); }
.hf-page .hf-dim-label { color: var(--accent); font-size: 10px; letter-spacing: .12em; }
.hf-page .card-top { background: var(--hf-soft); color: var(--ink); }
.hf-page .card-top::after { display: none; }
.hf-page .btn { background: var(--card); color: var(--ink-2); border-color: var(--line); }
.hf-page .btn:hover { border-color: var(--accent-2); color: var(--accent); }
.hf-page .btn.primary, .hf-page .cta { background: var(--accent); border-color: var(--accent); color: var(--hf-button-ink); box-shadow: none; }
.hf-page.hf-vip .btn.primary, .hf-page.hf-vip .cta { background: linear-gradient(115deg, #ebd8ac, #c9aa6b); }
.hf-page .btn.primary:hover, .hf-page .cta:hover { box-shadow: var(--shadow-hover); color: var(--hf-button-ink); }
.hf-page .cta.ghost { background: transparent; border: 1.5px solid var(--accent-2); color: var(--accent); box-shadow: none; }
.hf-page .cta.ghost:hover { background: var(--hf-soft); color: var(--accent); box-shadow: none; }
.hf-page .hf-quiz-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 13px; }
.hf-page .q-idx { color: var(--accent); letter-spacing: .08em; }
.hf-page .q-img { background: var(--hf-soft); }
.hf-page .opt { background: var(--card); color: var(--ink); border-color: var(--line); }
.hf-page .opt .key { background: var(--hf-soft); color: var(--muted); }
.hf-page .opt:hover { background: var(--hf-soft); border-color: var(--accent-2); }
.hf-page .opt.sel, .hf-page .opt.sel:hover { background: var(--hf-soft); border-color: var(--accent); box-shadow: 0 0 0 2px var(--hf-user-fill); }
.hf-page .opt.sel .key { background: var(--accent); color: var(--hf-button-ink); }
.hf-page :is(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.hf-page .poster-modal { background: rgba(12, 14, 12, .95); }
@media (max-width: 720px) {
    .hf-page .section-head { flex-direction: column; align-items: flex-start; gap: 5px; }
    .hf-page .quiz-bar { top: 56px; }
    .hf-page .result-hero { padding: 32px 22px 28px; }
    .hf-page .mod-hero-in { flex-direction: column; align-items: stretch; }
    .hf-page .hf-hero-copy { width: 100%; }
    .hf-page .hf-dim-label { font-size: 9px; letter-spacing: .04em; }
}

.poster-box { text-align: center; }
.poster-box img {
    width: 100%; max-width: 340px;
    height: auto;                     /* 必须：标签上有 width/height 属性，不写 auto 会被撑成 340×1000 */
    margin: 0 auto 16px;
    box-shadow: 0 16px 40px rgba(31, 27, 46, .18);
    cursor: zoom-in;
    -webkit-touch-callout: default;   /* 不拦长按，手机可直接「存储到照片」 */
}
.poster-hint { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.share-row {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    margin-top: 6px;
}

/* 海报大图弹层 */
.poster-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    background: rgba(15, 12, 26, .94);
    -webkit-overflow-scrolling: touch;
}
.poster-modal.on { display: flex; }
.poster-modal img {
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    height: auto;                     /* 同上，按原图比例缩放而非拉伸 */
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.poster-modal p {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 12.5px;
    text-align: center;
}

/* ---------------- 页脚 ---------------- */
.footer {
    margin-top: 64px;
    padding: 34px 0 46px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12.5px;
    text-align: center;
}
.footer a { color: var(--ink-2); }
.footer .links { display: flex; gap: 16px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }

/* ---------------- 空状态 ---------------- */
.empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}
.empty .em { font-size: 42px; display: block; margin-bottom: 12px; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 720px) {
    .hero { padding: 36px 0 24px; }
    .hero h1 { font-size: 28px; }
    .hero p { font-size: 14px; }
    .stats { gap: 22px; }
    .stats b { font-size: 18px; }
    .mod-hero-in { padding: 28px 22px 26px; gap: 18px; }
    .mod-hero h1 { font-size: 26px; }
    .mod-hero .em { font-size: 40px; }
    .cta { margin-left: 0; width: 100%; justify-content: center; }
    .q-card { padding: 24px 20px 20px; border-radius: 20px; }
    .q-img { max-height: 200px; border-radius: 14px; margin-bottom: 16px; }
    .q-title { font-size: 19px; }
    .panel { padding: 22px 20px; }
    .result-hero { padding: 32px 22px 28px; }
    .result-hero .score { font-size: 56px; }
    .result-hero h1 { font-size: 23px; }
    .read-box { padding: 22px 20px; }
    .nav-links { mask-image: linear-gradient(90deg, #000 85%, transparent); }

    /* 手机端触控：按钮不小于 42px，分享按钮两列铺满更好按 */
    .nav-inner { height: 56px; gap: 14px; }
    .btn { height: 46px; }
    .btn.small { height: 42px; padding: 0 18px; font-size: 13.5px; }
    .share-row { gap: 10px; }
    .share-row .btn { flex: 1 1 calc(50% - 5px); min-width: 0; }
    .poster-box img { max-width: 100%; }
    .poster-modal { padding: 16px 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
    .poster-modal img { max-height: 76vh; }
    .poster-modal p { font-size: 12px; }

    /* 匹配型结果：画像条与备选城市都改成单列 */
    .pref-grid { grid-template-columns: 1fr; gap: 14px; }
    .others { grid-template-columns: 1fr; }
    .result-hero .score { font-size: 60px; }

    /* 历史人物结果：蛛网图上下留白收紧，卡片全改单列 */
    .hf-arch h2 { font-size: 19px; }
    .hf-legend { margin-bottom: 18px; }
    .hf-bars { grid-template-columns: 1fr; gap: 14px; }
    .hf-shares { grid-template-columns: 1fr; }
    .hf-pairs { grid-template-columns: 1fr; }
    .hf-example { grid-template-columns: 1fr; gap: 18px; }
    .hf-scenes { grid-template-columns: 1fr 1fr; gap: 10px; }
    .hf-dims { grid-template-columns: 1fr 1fr; gap: 10px; }
    .hf-dims .dim { padding: 14px 14px 12px; }
    .hf-dims .dim p { font-size: 12.5px; }

    /* 底部安全区，避免 iPhone 小白条挡住页脚与按钮 */
    .footer { margin-top: 48px; padding-bottom: calc(38px + env(safe-area-inset-bottom, 0px)); }
    .quiz-main { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* 触屏设备不保留 hover 位移，避免点了之后一直「浮」着 */
@media (hover: none) {
    .opt:hover { border-color: var(--line); background: #fff; transform: none; }
    .opt.sel:hover { border-color: var(--c1, #6c5dd3); background: #f7f5ff; }
    .btn.primary:hover { transform: none; box-shadow: none; }
    .card:hover { transform: none; box-shadow: var(--shadow); }
    .nav-links a:hover { background: transparent; color: var(--ink-2); }
    .nav-links a.on:hover { background: var(--ink); color: #fff; }
}