/* 复用既有暖纸、墨黑与朱砂语义；所有组件规则限定 vp，避免改写现有页面。 */
:is(.vp-tool,.vp-integration), body[data-value-preferences-tool] {
  --vp-bg: #0b0d12; --vp-card: #161a22; --vp-raised: #1f242e;
  --vp-text: #f4eee4; --vp-muted: #b0b4bd; --vp-line: #3b404a;
  --vp-accent: #f0645a; --vp-accent-soft: #302026; --vp-gold: #d1b779;
  --vp-focus: #e2c687; color: var(--vp-text); font-family: var(--ft-font-sans, Inter, 'Noto Sans SC', 'Microsoft YaHei', sans-serif);
}
:root.light-mode :is(.vp-tool,.vp-integration), :root[data-ft-mode='paper'] :is(.vp-tool,.vp-integration),
:root.light-mode body[data-value-preferences-tool], :root[data-ft-mode='paper'] body[data-value-preferences-tool] {
  --vp-bg: #fcf9f4; --vp-card: #fffdf8; --vp-raised: #f4efe7;
  --vp-text: #262a33; --vp-muted: #625c55; --vp-line: #d9d1c5;
  --vp-accent: #b32629; --vp-accent-soft: #f7e8e9; --vp-gold: #88631e; --vp-focus: #b32629;
}
body[data-value-preferences-tool] { margin: 0; background: var(--vp-bg); font-size: 16px; line-height: 1.65; }
:is(.vp-tool,.vp-integration,.vp-site-header,.vp-site-footer) * { box-sizing: border-box; }
:is(.vp-tool,.vp-integration) :is(h1,h2,h3,p,ol) { margin-top: 0; }
:is(.vp-tool,.vp-integration) :is(button,a,input):focus-visible, .vp-site-header :is(button,a):focus-visible {
  outline: 3px solid var(--vp-focus); outline-offset: 4px; border-radius: 4px;
}
:is(.vp-tool,.vp-integration) button { font: inherit; cursor: pointer; }
:is(.vp-tool,.vp-integration) button:disabled { opacity: .55; cursor: wait; }
:is(.vp-tool,.vp-integration) a { color: var(--vp-accent); text-underline-offset: 4px; }
.vp-site-header { max-width: 1240px; margin: auto; min-height: 80px; padding: 16px 28px; display: flex; gap: 24px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--vp-line); }
.vp-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; letter-spacing: .08em; font-weight: 750; color: var(--vp-text); text-decoration: none; }
.vp-brand > span { background: #b32629; color: #fff8f0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 5px; font-size: 24px; }
.vp-brand small { font-size: 11px; color: var(--vp-muted); font-weight: 500; letter-spacing: .05em; }
.vp-site-header nav { display: flex; align-items: center; gap: 24px; }
.vp-site-header nav a { color: var(--vp-text); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.vp-site-header button { border: 1px solid var(--vp-line); border-radius: 5px; min-height: 44px; padding: 6px 12px; font: inherit; color: var(--vp-text); background: var(--vp-card); cursor: pointer; }
.vp-tool { max-width: 1020px; padding: 42px 28px 64px; margin: auto; background: var(--vp-bg); min-height: 75vh; }
.vp-masthead { padding-bottom: 26px; border-bottom: 1px solid var(--vp-line); margin-bottom: 26px; }
.vp-eyebrow { color: var(--vp-gold); font-size: 12px; font-weight: 650; letter-spacing: .09em; margin-bottom: 12px; }
.vp-masthead h1 { font-family: var(--ft-font-serif, Georgia, 'Noto Serif SC', serif); font-size: clamp(30px, 4.8vw, 44px); line-height: 1.28; margin-bottom: 18px; font-weight: 650; letter-spacing: .02em; }
.vp-lead { font-size: 17px; color: var(--vp-muted); max-width: 780px; margin-bottom: 20px; }
.vp-account-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.vp-account { color: var(--vp-muted); font-size: 14px; }
.vp-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 9px 18px; border: 1px solid var(--vp-line); border-radius: 6px; background: var(--vp-card); color: var(--vp-text); text-decoration: none; font: inherit; }
.vp-button:hover:not(:disabled) { background: var(--vp-raised); border-color: var(--vp-accent); }
.vp-button-primary { background: var(--vp-accent); border-color: var(--vp-accent); color: var(--vp-bg); font-weight: 650; }
:root.light-mode .vp-button-primary, :root[data-ft-mode='paper'] .vp-button-primary { color: #fffdf8; }
.vp-button-primary:hover:not(:disabled) { background: var(--vp-accent); filter: brightness(1.08); }
.vp-button-small { min-height: 44px; padding: 5px 12px; font-size: 14px !important; }
.vp-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 14px; }
.vp-progress { display: block; width: 100%; height: 6px; appearance: none; border: 0; border-radius: 10px; overflow: hidden; background: var(--vp-line); accent-color: var(--vp-accent); margin-bottom: 22px; }
.vp-progress::-webkit-progress-bar { background: var(--vp-line); }
.vp-progress::-webkit-progress-value { background: var(--vp-accent); }
.vp-progress::-moz-progress-bar { background: var(--vp-accent); }
.vp-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 30px; }
.vp-group { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; min-height: 52px; padding: 10px 12px; color: var(--vp-muted); border: 1px solid var(--vp-line); border-radius: 6px; background: var(--vp-card); font-size: 14px !important; }
.vp-group[aria-current='step'] { color: var(--vp-accent); border-color: var(--vp-accent); background: var(--vp-accent-soft); }
.vp-group small { white-space: nowrap; font-size: 12px; }
.vp-question-section { scroll-margin-top: 24px; outline: none; }
.vp-question-section > h2, .vp-results > h2, .vp-history > h2 { font-family: var(--ft-font-serif, Georgia, 'Noto Serif SC', serif); font-size: 26px; line-height: 1.4; margin-bottom: 10px; }
.vp-question { min-width: 0; margin: 30px 0 0; padding: 18px 20px 22px; border: 1px solid var(--vp-line); border-radius: 10px; background: var(--vp-card); scroll-margin-top: 22px; }
.vp-question:focus { outline: 2px solid var(--vp-accent); outline-offset: 3px; }
.vp-question legend { max-width: 100%; padding: 0 8px; font-size: 17px; font-weight: 650; line-height: 1.65; }
.vp-question-anchors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-bottom: 16px; }
.vp-question-anchors p { display: flex; align-items: flex-start; gap: 10px; color: var(--vp-muted); margin: 0; font-size: 14px; }
.vp-question-anchors strong { color: var(--vp-accent); border: 1px solid var(--vp-line); border-radius: 4px; min-width: 24px; line-height: 24px; text-align: center; }
.vp-choices { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 7px; }
.vp-choice { position: relative; min-width: 0; min-height: 66px; padding: 10px 2px; border: 1px solid var(--vp-line); border-radius: 6px; text-align: center; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 3px; background: var(--vp-bg); }
.vp-choice input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.vp-choice strong { font-size: 18px; line-height: 1.2; }
.vp-choice span { font-size: 12px; color: var(--vp-muted); line-height: 1.35; overflow-wrap: anywhere; }
.vp-choice:has(:checked) { color: var(--vp-accent); background: var(--vp-accent-soft); border: 2px solid var(--vp-accent); padding: 9px 1px; }
.vp-choice:has(:checked) span { color: var(--vp-accent); }
.vp-choice:has(:focus-visible) { outline: 3px solid var(--vp-focus); outline-offset: 3px; }
.vp-draft-status { color: var(--vp-muted); font-size: 13px; margin: 20px 0; }
.vp-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.vp-note, .vp-version { color: var(--vp-muted); font-size: 13px; line-height: 1.7; }
.vp-quiz > .vp-note { margin: 22px 0 0; }
.vp-muted { color: var(--vp-muted); }
.vp-error, .vp-resume { padding: 16px 18px; border: 1px solid var(--vp-accent); background: var(--vp-accent-soft); border-radius: 8px; margin: 18px 0; }
.vp-error { color: var(--vp-accent); }
.vp-state { padding: 30px 0; color: var(--vp-muted); }
.vp-result-summary { font-size: 18px; line-height: 1.8; max-width: 800px; }
.vp-axes { display: grid; gap: 22px; margin: 26px 0; }
.vp-axis { min-width: 0; }
.vp-axis-heading, .vp-axis-labels { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.vp-axis-heading h3 { font-size: 16px; margin: 0; font-weight: 650; }
.vp-axis-leaning { color: var(--vp-accent); font-size: 14px; text-align: right; }
.vp-axis-labels { margin: 9px 0 8px; font-size: 13px; color: var(--vp-muted); }
.vp-axis-labels > span { max-width: 47%; }
.vp-axis-labels > span:last-child { text-align: right; }
.vp-axis-track { position: relative; height: 7px; margin: 10px 8px 12px; border-radius: 8px; background: linear-gradient(to right,var(--vp-gold),var(--vp-line) 50%,var(--vp-accent)); }
.vp-axis-track::after { content: ''; position: absolute; left: 50%; top: -4px; height: 15px; width: 1px; background: var(--vp-muted); }
.vp-axis-marker { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--vp-card); background: var(--vp-text); box-shadow: 0 0 0 1px var(--vp-text); top: -4px; transform: translateX(-50%); z-index: 1; }
.vp-axis-description { font-size: 14px; margin: 10px 0 0; }
.vp-axis-position { color: var(--vp-muted); font-size: 12px; margin: 8px 0 0; }
.vp-answer-review { margin: 24px 0; padding: 16px 18px; border: 1px solid var(--vp-line); border-radius: 8px; background: var(--vp-card); }
.vp-answer-review summary { min-height: 44px; cursor: pointer; font-weight: 650; }
.vp-answer-review > p { font-size: 14px; margin: 10px 0; }
.vp-answer-items { padding-left: 24px; font-size: 14px; }
.vp-answer-items li { padding: 12px 0; border-bottom: 1px solid var(--vp-line); }
.vp-answer-items li:last-child { border-bottom: 0; }
.vp-answer-items p { margin: 6px 0 0; }
.vp-answer-choice { color: var(--vp-accent); font-weight: 650; }
.vp-consent { display: flex; align-items: flex-start; gap: 12px; padding: 18px; background: var(--vp-raised); border: 1px solid var(--vp-line); border-radius: 8px; font-size: 14px; margin-top: 24px; }
.vp-consent input { width: 20px; height: 20px; min-width: 20px; margin: 3px 0 0; accent-color: var(--vp-accent); }
.vp-privacy { border: 1px solid var(--vp-line); padding: 20px; border-radius: 8px; margin-top: 28px; background: var(--vp-card); }
.vp-privacy h3 { font-size: 17px; margin-bottom: 10px; }
.vp-version { margin: 26px 0 0; }
.vp-history { border-top: 1px solid var(--vp-line); padding-top: 26px; margin-top: 36px; }
.vp-history ol { list-style: none; padding: 0; display: grid; gap: 8px; }
.vp-history .vp-button { justify-content: flex-start; width: 100%; text-align: left; }
.vp-history [aria-current='true'] { border-color: var(--vp-accent); color: var(--vp-accent); }
.vp-site-footer { max-width: 1020px; margin: auto; padding: 24px 28px 40px; border-top: 1px solid var(--vp-line); color: var(--vp-muted); font-size: 13px; }
.vp-skip { position: fixed; left: 12px; top: -100px; z-index: 100; background: var(--vp-card); color: var(--vp-accent); padding: 12px; }
.vp-skip:focus { top: 12px; }
.vp-integration { padding: 20px 22px; margin: 20px 0; border: 1px solid var(--vp-line); border-radius: 10px; background: var(--vp-card); min-width: 0; }
.vp-integration-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 12px; }
.vp-integration-heading h2 { font-family: var(--ft-font-serif, Georgia, 'Noto Serif SC', serif); font-size: 21px; line-height: 1.4; margin: 0; }
.vp-integration-heading a { font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.vp-integration-summary { font-size: 14px; margin-bottom: 12px; }
.vp-axes-compact { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 24px; margin: 16px 0; }
.vp-axes-compact .vp-axis-heading h3 { font-size: 14px; }
.vp-axes-compact .vp-axis-leaning, .vp-axes-compact .vp-axis-labels { font-size: 12px; }
.profile-capability-canvas .pc-layout[data-pc-view='overview'] .vp-integration { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .vp-site-header { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
  .vp-brand small { display: none; }
  .vp-site-header nav { gap: 16px; width: 100%; justify-content: space-between; font-size: 14px; }
  .vp-site-header button { font-size: 13px; }
  .vp-tool { padding: 28px 16px 44px; }
  .vp-lead { font-size: 15px; }
  .vp-groups { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-bottom: 24px; }
  .vp-group { padding: 9px 10px; font-size: 12px !important; }
  .vp-question { padding: 15px 6px 16px; margin-top: 24px; }
  .vp-question legend { font-size: 16px; padding: 0 4px; }
  .vp-question-anchors { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .vp-question-anchors p { font-size: 13px; }
  .vp-choices { gap: 3px; }
  .vp-choice { min-height: 68px; padding: 8px 1px; }
  .vp-choice:has(:checked) { padding: 7px 0; }
  .vp-choice span { font-size: 10px; line-height: 1.6; }
  .vp-choice strong { font-size: 17px; }
  .vp-progress-head { font-size: 12px; }
  .vp-actions > .vp-button { flex: 1 1 auto; padding: 10px 12px; }
  .vp-integration { padding: 18px 16px; }
  .vp-axes-compact { grid-template-columns: minmax(0,1fr); }
  .vp-result-summary { font-size: 16px; }
  .vp-axis-leaning { max-width: 52%; font-size: 13px; }
  .vp-site-footer { padding: 22px 16px 32px; }
}
@media (max-width: 359px) { .vp-choices { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; } }
@media (prefers-reduced-motion: reduce) { :is(.vp-tool,.vp-integration) * { scroll-behavior: auto !important; } }