/* 工具 02 · 职场PUA自测
   独立视觉：深石板蓝问卷台 + 琥珀警示色；等宽大分数、点阵进度、手绘 SVG 雷达。 */
.pua {
    --a1: #33546f; --a1b: #c47a31; --a1s: #e8eff5; --a1i: #27445d;
    --a2: #7cb6e6; --a2b: #f0b06a; --a2s: rgba(124, 182, 230, .15); --a2i: #a9d3f2;
    --h15-h1: clamp(30px, 3.6vw, 42px);
    --h15-h2: 20px;
}
.pua .pua-h1 { letter-spacing: -.02em; }
.pua-hero {
    border-color: #244058;
    background:
        radial-gradient(620px 240px at 88% -10%, rgba(240, 176, 106, .22), transparent 70%),
        linear-gradient(120deg, #244058 0%, #2f5571 60%, #35607c 100%);
    color: #eaf2f7;
}
.pua-hero::before { background: linear-gradient(180deg, #f0b06a, #c47a31); }
.pua-hero .h15-h1, .pua-hero .h15-sub, .pua-hero .h15-eyebrow, .pua-hero .h15-hero-meta { color: #eaf2f7; }
.pua-hero .h15-sub strong { color: #ffd39c; }
.pua-hero .h15-eyebrow { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); }
.pua-hero .h15-hero-meta { border-top-color: rgba(255, 255, 255, .2); }
.pua-hero .h15-btn { background: #f0b06a; color: #172a38; }
.pua-hero .h15-btn--ghost { background: transparent; color: #eaf2f7; border-color: rgba(255, 255, 255, .4); }
.pua-hero .h15-btn--ghost:hover { background: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .pua .pua-hero { background: radial-gradient(620px 240px at 88% -10%, rgba(240, 176, 106, .16), transparent 70%), linear-gradient(120deg, #101d27 0%, #162c3b 100%); }
:root[data-theme="dark"] .pua .pua-hero .h15-btn { color: #172a38; }

.pua-hero-num {
    position: absolute; right: 34px; top: 28px; font-family: var(--h15-font-num);
    font-size: 74px; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, .16); letter-spacing: -.06em;
}
.pua-hero-num span { font-size: 20px; margin-left: 4px; }
.pua-quick { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pua-quick-tip { font-size: var(--h15-fs-12); color: rgba(234, 242, 247, .75); }

.pua-quiz-top { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; }
.pua-progress { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.pua-progress-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--h15-line-2); overflow: hidden; }
.pua-progress-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--h15-accent), var(--h15-accent-2)); transition: width .22s; }
.pua-progress span { font-family: var(--h15-font-num); font-size: var(--h15-fs-12); font-weight: 700; color: var(--h15-ink-2); }

.pua-dots { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 18px; }
.pua-dot {
    width: 26px; height: 26px; display: grid; place-items: center;
    border: 1px solid var(--h15-line); border-radius: 7px; background: var(--h15-card);
    color: var(--h15-ink-3); font-family: var(--h15-font-num); font-size: var(--h15-fs-11); cursor: pointer;
}
.pua-dot.is-done { background: var(--h15-accent-soft); border-color: var(--h15-accent); color: var(--h15-accent-ink); font-weight: 700; }
.pua-dot.is-cur { outline: 2px solid var(--h15-accent-2); outline-offset: 1px; color: var(--h15-ink); font-weight: 700; }

.pua-qcard { position: relative; padding: 22px 24px 18px 30px; border: 1px solid var(--h15-line); border-radius: 14px; background: var(--h15-card-2); overflow: hidden; }
.pua-qcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--h15-accent); }
.pua-qhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pua-qno { font-family: var(--h15-font-num); font-size: var(--h15-fs-22); font-weight: 800; color: var(--h15-accent-ink); }
.pua-qdim { padding: 2px 10px; border-radius: 999px; background: var(--h15-accent-soft); color: var(--h15-accent-ink); font-size: var(--h15-fs-12); font-weight: 700; }
.pua-qtext { margin: 0 0 18px; font-size: 21px; font-weight: 650; line-height: 1.6; color: var(--h15-ink); }
.pua-opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.pua-opt {
    padding: 11px 6px; border: 1px solid var(--h15-line); border-radius: 11px;
    background: var(--h15-card); color: var(--h15-ink-2);
    font-family: inherit; font-size: var(--h15-fs-13); font-weight: 650; cursor: pointer; transition: all .14s;
}
.pua-opt small { display: block; font-family: var(--h15-font-num); font-size: var(--h15-fs-11); font-weight: 400; color: var(--h15-ink-3); }
.pua-opt:hover { border-color: var(--h15-accent); }
.pua-opt.is-on { background: var(--h15-accent); border-color: var(--h15-accent); color: #fff; }
.pua-opt.is-on small { color: rgba(255, 255, 255, .8); }
:root[data-theme="dark"] .pua .pua-opt.is-on { color: #0b1820; }
:root[data-theme="dark"] .pua .pua-opt.is-on small { color: rgba(11, 24, 32, .75); }
@media (max-width: 620px) { .pua-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pua-qtext { font-size: 18px; } .pua-hero-num { display: none; } }
.pua-nav { border-top: 1px dashed var(--h15-line); padding-top: 15px; margin-top: 16px; }

.pua-report { margin-top: 20px; }
.pua-report-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; }
@media (max-width: 900px) { .pua-report-grid { grid-template-columns: 1fr; } }
.pua-radar-wrap { padding: 8px; border: 1px solid var(--h15-line); border-radius: 14px; background: var(--h15-card-2); text-align: center; }
.pua-radar { width: 100%; max-width: 280px; height: auto; }
.pua-radar-grid { fill: none; stroke: var(--h15-line); stroke-width: 1; }
.pua-radar-axis { stroke: var(--h15-line); stroke-width: 1; }
.pua-radar-poly { fill: var(--h15-accent-soft); stroke: var(--h15-accent); stroke-width: 2; stroke-linejoin: round; }
.pua-radar-dot { fill: var(--h15-accent-2); }
.pua-radar-label { fill: var(--h15-ink-2); font-size: 11px; font-family: var(--h15-font); }
.pua-score { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pua-score-v { font-size: 62px; font-weight: 800; line-height: 1.1; color: var(--h15-accent-ink); letter-spacing: -.04em; }
.pua-score-u { font-family: var(--h15-font-num); font-size: var(--h15-fs-16); color: var(--h15-ink-3); }
.pua-score-l { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: var(--h15-accent-soft); color: var(--h15-accent-ink); font-size: var(--h15-fs-13); font-weight: 700; }
.pua-summary { margin: 12px 0 16px; font-size: var(--h15-fs-14); line-height: 1.9; color: var(--h15-ink-2); }
.pua-bars { display: grid; gap: 9px; margin-top: 18px; }
.pua-bar { display: grid; grid-template-columns: 84px minmax(0, 1fr) 46px; gap: 10px; align-items: center; font-size: var(--h15-fs-12); }
.pua-bar-t { color: var(--h15-ink-2); }
.pua-bar-track { height: 9px; border-radius: 999px; background: var(--h15-line-2); overflow: hidden; }
.pua-bar-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--h15-accent), var(--h15-accent-2)); }
.pua-bar-v { font-family: var(--h15-font-num); text-align: right; color: var(--h15-ink); font-weight: 700; }
.pua-review { margin-top: 22px; }
.pua-review .h15-h3 small { font-weight: 400; color: var(--h15-ink-3); }
.pua-review .h15-tbl td:nth-child(3) { white-space: normal; min-width: 260px; }
.pua-tools { align-items: center; }
.pua-esc-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.pua-esc-label .h15-select { width: 118px; padding: 5px 8px; }
.pua-report .h15-note { margin-top: 16px; }
.pua-history { margin-top: 20px; }
.pua-faq .h15-faq-q::before { content: "Q"; display: inline-block; margin-right: 8px; font-family: var(--h15-font-num); color: var(--h15-accent-2); font-weight: 800; }