/* batch26 · holland-interest-test 职业蓝图风 */
.hol-wrap {
  --hol-bg: #eef1f8;
  --hol-ink: #1c2740;
  --hol-ink-soft: #5a6683;
  --hol-card: #ffffff;
  --hol-line: #d7dcec;
  --hol-blue: #24356e;
  --hol-blue-2: #3b5bdb;
  --hol-accent: #e8b23a;
  --hol-err: #c0392b;
  max-width: 1000px;
  margin: 0 auto;
  padding: 18px 14px 60px;
  color: var(--hol-ink);
  font-size: 15.5px;
  line-height: 1.8;
}
html[data-theme="dark"] .hol-wrap {
  --hol-bg: #0e1526;
  --hol-ink: #dde4f5;
  --hol-ink-soft: #8b96b5;
  --hol-card: #16203a;
  --hol-line: #2c3a5e;
  --hol-blue: #0c1224;
  --hol-blue-2: #5c7cfa;
  --hol-accent: #f0c05a;
  --hol-err: #ff7b6b;
}
.hol-wrap b { color: var(--hol-blue-2); font-weight: 700; }
html[data-theme="dark"] .hol-wrap b { color: var(--hol-accent); }

/* hero: blueprint */
.hol-hero { position: relative; background: var(--hol-blue); color: #eaf0ff; border-radius: 6px; padding: 40px 34px; overflow: hidden; display: flex; gap: 24px; align-items: center; }
.hol-grid-bg { position: absolute; inset: 0; background-image:
  linear-gradient(rgba(120,150,255,.14) 1px, transparent 1px),
  linear-gradient(90deg, rgba(120,150,255,.14) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none; }
.hol-hero-copy { position: relative; flex: 1; }
.hol-kicker { font-family: "Courier New", monospace; font-size: 12px; letter-spacing: 3px; color: var(--hol-accent); display: block; margin-bottom: 10px; }
.hol-hero-copy h1 { font-size: 28px; line-height: 1.4; margin: 0 0 10px; color: #fff; }
.hol-sub { color: #b9c6ee; margin: 0 0 18px; max-width: 560px; }
.hol-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hol-note { font-size: 13px; color: #93a3d4; margin: 14px 0 0; }
.hol-hero b { color: var(--hol-accent); }
.hol-hex { position: relative; flex: 0 0 210px; text-align: center; color: var(--hol-accent); }
.hol-hex-line { stroke: currentColor; }
.hol-hex-t { font-family: "Courier New", monospace; font-size: 15px; fill: #cdd9ff; }
.hol-hex-c { fill: var(--hol-accent); font-size: 20px; font-weight: 700; }
.hol-hex-cap { display: block; font-size: 11px; font-family: "Courier New", monospace; letter-spacing: 2px; color: #8fa0d6; margin-top: 6px; }

/* progress */
.hol-progress-bar { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; background: var(--hol-card); border: 1px solid var(--hol-line); border-radius: 4px; padding: 10px 16px; position: sticky; top: 8px; z-index: 5; box-shadow: 0 2px 8px rgba(20,30,70,.08); }
.hol-progress-track { flex: 1; height: 8px; background: var(--hol-line); border-radius: 4px; overflow: hidden; }
.hol-progress-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hol-blue-2), var(--hol-accent)); transition: width .3s; }
.hol-progress-num { font-family: "Courier New", monospace; font-size: 13px; color: var(--hol-ink-soft); white-space: nowrap; }

/* cards */
.hol-card { background: var(--hol-card); border: 1px solid var(--hol-line); border-top: 3px solid var(--hol-blue-2); border-radius: 4px; padding: 24px 26px; margin-top: 18px; box-shadow: 0 2px 10px rgba(20,30,70,.06); }
.hol-h2 { font-size: 19px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px dashed var(--hol-line); padding-bottom: 10px; }
.hol-no { font-family: "Courier New", monospace; font-size: 12px; background: var(--hol-blue); color: #fff; padding: 2px 8px; border-radius: 2px; }
.hol-tip { color: var(--hol-ink-soft); font-size: 14px; margin: 0 0 12px; }

/* questions */
.hol-group { margin-top: 20px; }
.hol-group-h h3 { margin: 0; font-size: 16.5px; color: var(--hol-blue-2); }
html[data-theme="dark"] .hol-group-h h3 { color: var(--hol-accent); }
.hol-group-h p { margin: 2px 0 8px; font-size: 13px; color: var(--hol-ink-soft); }
.hol-q { border: 1px solid var(--hol-line); border-radius: 4px; padding: 10px 14px; margin-bottom: 8px; transition: border-color .15s; }
.hol-q.miss { border-color: var(--hol-err); background: rgba(192,57,43,.05); }
.hol-q-txt { margin: 0 0 8px; font-size: 14.5px; }
.hol-q-txt i { font-style: normal; font-family: "Courier New", monospace; color: var(--hol-blue-2); margin-right: 8px; font-weight: 700; }
.hol-opts { display: flex; gap: 6px; }
.hol-opt { flex: 1; }
.hol-opt input { position: absolute; opacity: 0; }
.hol-opt span { display: block; text-align: center; border: 1px solid var(--hol-line); border-radius: 4px; padding: 6px 0; font-size: 13px; cursor: pointer; background: var(--hol-bg); color: var(--hol-ink); transition: all .12s; }
.hol-opt input:checked + span { background: var(--hol-blue-2); border-color: var(--hol-blue-2); color: #fff; font-weight: 700; }
.hol-err { display: block; color: var(--hol-err); font-size: 13.5px; margin-top: 10px; min-height: 20px; }
.hol-err a { color: var(--hol-err); text-decoration: underline; margin-right: 4px; }

/* buttons */
.hol-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.hol-btn { border: 1px solid var(--hol-line); background: var(--hol-card); color: var(--hol-ink); border-radius: 4px; padding: 10px 20px; font-size: 15px; cursor: pointer; font-family: inherit; transition: all .15s; }
.hol-btn.primary { background: var(--hol-blue-2); border-color: var(--hol-blue-2); color: #fff; }
.hol-btn.primary:hover { filter: brightness(1.1); }
.hol-btn.line { border-color: var(--hol-blue-2); color: var(--hol-blue-2); background: transparent; }
html[data-theme="dark"] .hol-btn.line { color: var(--hol-accent); border-color: var(--hol-accent); }
.hol-btn.ghost { color: var(--hol-ink-soft); }
.hol-btn.ai { background: linear-gradient(90deg, var(--hol-blue-2), var(--hol-accent)); border: none; color: #fff; font-weight: 700; }
.hol-btn:disabled { opacity: .55; cursor: not-allowed; }

/* result */
.hol-code-row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.hol-code-box { flex: 0 0 220px; background: var(--hol-blue); color: #fff; border-radius: 4px; padding: 20px; text-align: center; }
.hol-code-lb { font-size: 12px; font-family: "Courier New", monospace; letter-spacing: 2px; color: #9fb0e0; display: block; }
.hol-code { display: block; font-family: "Courier New", monospace; font-size: 52px; color: var(--hol-accent); line-height: 1.2; }
.hol-code-names { font-size: 13px; color: #cdd9ff; }
.hol-rank-box { flex: 1; min-width: 260px; }
.hol-rank-box h3 { margin: 0 0 8px; font-size: 15px; }
.hol-rank { list-style: none; margin: 0; padding: 0; font-family: "Courier New", monospace; }
.hol-rank li { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13.5px; }
.hol-rank .rk { width: 46px; color: var(--hol-blue-2); font-weight: 700; }
.hol-rank .bar { flex: 1; height: 10px; background: var(--hol-bg); border-radius: 3px; overflow: hidden; }
.hol-rank .bar i { display: block; height: 100%; background: var(--hol-blue-2); }
.hol-rank .sc { width: 40px; text-align: right; color: var(--hol-ink-soft); }
.hol-radar-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.hol-radar-note { flex: 1; min-width: 240px; }
.hol-radar-note h3 { margin: 0 0 8px; font-size: 15px; }
.hol-radar-note p { margin: 0; color: var(--hol-ink-soft); font-size: 14px; }

/* career table */
.hol-career h3 { margin: 0 0 10px; font-size: 15.5px; }
.hol-career-scroll { overflow-x: auto; }
.hol-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.hol-table th, .hol-table td { border: 1px solid var(--hol-line); padding: 8px 12px; text-align: left; }
.hol-table th { background: var(--hol-bg); font-family: "Courier New", monospace; }
.hol-table td:first-child { font-family: "Courier New", monospace; font-weight: 700; color: var(--hol-blue-2); white-space: nowrap; }
html[data-theme="dark"] .hol-table td:first-child { color: var(--hol-accent); }
.hol-career .hol-tip { margin-top: 10px; }

/* ai */
.hol-ai-box { margin-top: 18px; border: 1px dashed var(--hol-blue-2); border-radius: 4px; padding: 16px; }
html[data-theme="dark"] .hol-ai-box { border-color: var(--hol-accent); }
.hol-ai-tip { display: inline-block; margin-left: 10px; font-size: 13px; color: var(--hol-ink-soft); }
.hol-ai-out { margin-top: 12px; white-space: pre-wrap; background: var(--hol-bg); border-radius: 4px; padding: 14px; font-size: 14.5px; line-height: 1.8; }
.hol-ai-err { color: var(--hol-err); font-size: 13.5px; margin-top: 8px; min-height: 18px; }
.hol-msg { margin-top: 10px; font-size: 14px; color: var(--hol-blue-2); min-height: 20px; }

/* docs */
.hol-steps { margin: 0; padding-left: 22px; }
.hol-steps li { margin-bottom: 10px; }
.hol-faq-item { border-bottom: 1px dashed var(--hol-line); padding: 10px 0; }
.hol-faq-item summary { cursor: pointer; font-weight: 700; }
.hol-faq-item p { margin: 8px 0 2px; color: var(--hol-ink-soft); }
.hol-disclaimer p { color: var(--hol-ink-soft); font-size: 14px; margin: 0; }

/* radar helpers */
.hol-rad-grid { color: var(--hol-ink-soft); opacity: .5; }
.hol-rad-t { fill: var(--hol-ink); }
html[data-theme="dark"] .hol-rad-grid { color: #8b96b5; }
html[data-theme="dark"] .hol-rad-t { fill: var(--hol-ink); }
html[data-theme="dark"] #holRadar polygon[fill="rgba(59,91,219,.28)"] { fill: rgba(240,192,90,.25); }
html[data-theme="dark"] #holRadar polygon[stroke="#3b5bdb"] { stroke: var(--hol-accent); }
html[data-theme="dark"] #holRadar circle { fill: var(--hol-accent); }
.hol-table tr.hit td { background: rgba(59,91,219,.1); font-weight: 600; }
html[data-theme="dark"] .hol-table tr.hit td { background: rgba(240,192,90,.12); }

@media (max-width: 768px) {
  .hol-hero { flex-direction: column; padding: 26px 20px; }
  .hol-hex { flex: none; }
  .hol-hero-copy h1 { font-size: 23px; }
  .hol-q { padding: 10px; }
  .hol-opts { gap: 4px; }
  .hol-opt span { padding: 8px 0; }
  .hol-code-box { flex: 1 1 100%; }
}

/* ===== v1.1 新增组件 ===== */
.hol-navmap { margin: 0 auto 16px; max-width: 1000px; padding: 12px 14px; background: var(--hol-card); border: 1px solid var(--hol-line); border-radius: 10px; }
.hol-navmap-t { font-size: 13px; color: var(--hol-ink-soft); display: block; margin-bottom: 8px; }
.hol-navmap-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hol-navchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hol-line); background: var(--hol-bg); color: var(--hol-ink); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; cursor: pointer; transition: all .15s; }
.hol-navchip b { font-family: "Courier New", Consolas, monospace; color: var(--hol-blue-2); }
.hol-navchip:hover { border-color: var(--hol-blue-2); transform: translateY(-1px); }
.hol-navcnt { font-size: 12px; color: var(--hol-ink-soft); background: rgba(59,91,219,.1); border-radius: 999px; padding: 1px 8px; }
.hol-navcnt.full { background: rgba(46,166,88,.15); color: #2ea658; }
html[data-theme="dark"] .hol-navmap { background: #20293f; border-color: #37415c; }
html[data-theme="dark"] .hol-navchip { background: #26304a; border-color: #37415c; color: var(--hol-ink); }
html[data-theme="dark"] .hol-navcnt { background: rgba(240,192,90,.14); color: #c8b273; }
html[data-theme="dark"] .hol-navcnt.full { color: #7fce9d; }

.hol-compare { border: 1px dashed var(--hol-blue-2); border-radius: 10px; padding: 14px 16px; margin: 18px 0; background: rgba(59,91,219,.05); }
.hol-compare h3 { margin: 0 0 10px; font-size: 16px; }
.hol-delta-code { margin: 0 0 10px; font-size: 14.5px; }
.hol-delta-grid { display: flex; flex-direction: column; gap: 6px; }
.hol-delta-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.hol-delta-item b { min-width: 120px; }
.hol-delta { font-style: normal; font-size: 13px; padding: 1px 8px; border-radius: 999px; }
.hol-delta.up { color: #1e9e52; background: rgba(30,158,82,.12); }
.hol-delta.dn { color: #d0442e; background: rgba(208,68,46,.12); }
.hol-delta.eq { color: var(--hol-ink-soft); background: rgba(120,130,160,.12); }
html[data-theme="dark"] .hol-compare { background: rgba(240,192,90,.06); border-color: var(--hol-accent); }
html[data-theme="dark"] .hol-delta.up { color: #7fce9d; background: rgba(127,206,157,.12); }
html[data-theme="dark"] .hol-delta.dn { color: #ff9b8a; background: rgba(255,155,138,.12); }
.hol-delta-note { margin: 10px 0 0; font-size: 13px; color: var(--hol-ink-soft); }

.hol-table tr.hol-main-row { cursor: pointer; }
.hol-table tr.hol-main-row:hover td { background: rgba(59,91,219,.06); }
html[data-theme="dark"] .hol-table tr.hol-main-row:hover td { background: rgba(240,192,90,.08); }
.hol-table tr.hol-career-detail td { background: var(--hol-bg); font-size: 13.5px; line-height: 1.8; color: var(--hol-ink-soft); padding: 12px 14px; }
html[data-theme="dark"] .hol-table tr.hol-career-detail td { background: #20293f; }