/* Homepage styles — preserved source block 1. */
:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f9fafc;
  --text: #656565;
  --muted: #656565;
  --line: #e6eaf0;
  --brand: #bf3543;
  --brand-dark: #982934;
  --brand-soft: #fbecef;
  --empower-red: #bf3543;
  --empower-gray: #969394;
  --ink: #656565;
  --danger: #d92d20;
  --shadow: 0 18px 50px rgba(22, 32, 51, 0.08);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-size: 17px;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(200,31,43, .08), transparent 36%),
    var(--bg);
}
button, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  border-bottom: 1px solid rgba(230, 234, 240, .9);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 30;
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -.02em; font-size: 18px; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 12px;
  display: grid; place-items: center;
  color: white; background: linear-gradient(135deg, var(--brand), #c81f2b);
  box-shadow: 0 9px 22px rgba(200,31,43,.25);
}
.top-meta { font-size: 15px; color: var(--muted); }

main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; flex: 1; padding: 52px 0 72px; }
.screen { display: none; animation: enter .28s ease; }
.screen.active { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: stretch; }
.hero-copy, .form-card, .assessment-card, .result-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-copy { padding: 50px; position: relative; overflow: hidden; }
.hero-copy::after {
  content: ""; position: absolute; width: 240px; height: 240px; right: -90px; bottom: -110px;
  border-radius: 999px; background: radial-gradient(circle, rgba(200,31,43,.16), rgba(200,31,43,0));
}
.eyebrow { margin: 0 0 14px; color: var(--brand); font-weight: 800; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -.045em; }
.hero-subtitle { margin: 22px 0 0; color: var(--muted); line-height: 1.75; font-size: 20px; max-width: 650px; }
.dimension-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 34px; }
.dimension-pill { border-radius: 15px; padding: 16px 14px; border: 1px solid var(--line); background: var(--surface-2); }
.dimension-pill strong { display: block; font-size: 21px; }
.dimension-pill span { display: block; margin-top: 5px; font-size: 14px; color: var(--muted); line-height: 1.35; }
.notice { margin-top: 28px; padding: 16px 18px; background: #f8f9fb; border-left: 3px solid var(--brand); border-radius: 10px; color: #656565; font-size: 15px; line-height: 1.6; }

.form-card { padding: 34px; }
.form-card h2, .assessment-card h2, .result-card h2 { margin: 0; letter-spacing: -.025em; }
.form-card > p { margin: 10px 0 26px; color: var(--muted); line-height: 1.6; font-size: 17px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 15px; font-weight: 750; margin-bottom: 8px; }
.field input, .field select {
  width: 100%; border: 1px solid #fff3f4; border-radius: 12px; background: white; color: var(--text);
  padding: 15px 16px; font-size: 17px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.field-note { font-size: 14px; color: var(--muted); margin-top: 7px; line-height: 1.45; }
.role-suggestions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.role-suggestions-label { font-size: 13px; color: var(--muted); font-weight: 750; margin-right: 2px; flex-basis: 100%; }
.role-chip { border: 1px solid #fff3f4; background: var(--surface-2); color: #656565; border-radius: 999px; padding: 8px 14px; font-size: 13.5px; font-weight: 650; transition: border-color .15s, background .15s, color .15s; }
.role-chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.role-chip.selected { background: var(--brand); border-color: var(--brand); color: white; }
.role-category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.role-category-tab { border: 1px solid #fff3f4; background: #fff; color: #656565; border-radius: 10px; padding: 9px 16px; font-size: 13.5px; font-weight: 750; transition: border-color .15s, background .15s, color .15s; }
.role-category-tab:hover { border-color: var(--brand); color: var(--brand-dark); }
.role-category-tab.selected { background: var(--brand-dark, var(--brand)); border-color: var(--brand-dark, var(--brand)); color: #fff; }
.role-category-hint { flex-basis: 100%; font-size: 12.5px; color: var(--muted); margin: -2px 0 2px; }
.checkbox-row { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: #656565; line-height: 1.5; margin: 18px 0 22px; }
.checkbox-row input { margin-top: 3px; }

.btn { border: 0; border-radius: 12px; padding: 14px 20px; font-size: 16px; font-weight: 800; transition: transform .15s, box-shadow .15s, background .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--brand); color: white; box-shadow: 0 9px 18px rgba(200,31,43,.22); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-primary:disabled { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary { background: white; color: var(--text); border: 1px solid var(--line); }
.btn-ghost { background: transparent; color: var(--muted); padding-inline: 8px; }
.btn-danger { background: #fff1f0; color: var(--danger); }
.full { width: 100%; }

.assessment-wrap { max-width: 1040px; margin: 0 auto; }
.progress-header { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 16px; }
.progress-header h2 { margin: 0; font-size: 28px; }
.progress-meta { font-size: 15px; color: var(--muted); text-align: right; }
.progress-track { height: 8px; background: #e9edf3; border-radius: 999px; overflow: hidden; margin-bottom: 22px; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), #c81f2b); border-radius: inherit; transition: width .3s ease; }
.assessment-card { padding: 36px; }
.context-badge { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 12px; background: var(--brand-soft); color: var(--brand-dark); font-size: 14px; font-weight: 800; }
.context-dot { width: 7px; height: 7px; background: var(--brand); border-radius: 50%; }
.question-focus { margin: 20px 0 8px; font-size: 15px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.question-title { font-size: clamp(28px, 3vw, 38px); line-height: 1.2; margin: 0; letter-spacing: -.03em; }
.question-help { color: var(--muted); margin: 12px 0 26px; line-height: 1.65; font-size: 17px; font-weight: 600; }
.rank-legend { display: grid; grid-template-columns: 1fr auto; gap: 14px; font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.rank-scale { display: grid; grid-template-columns: repeat(4, 50px); gap: 9px; text-align: center; }
.option-list { display: grid; gap: 14px; }

/* Giữ phần làm trắc nghiệm trung tính: không hiển thị nhãn phân loại trước khi có kết quả. */
#screen-assessment .dimension-badge,
#screen-assessment .style-badge,
#screen-assessment .behavior-badge,
#screen-assessment .animal-badge,
#screen-assessment .option-icon,
#screen-assessment .option-code {
  display: none !important;
}
.option-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 22px; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; background: white; transition: border-color .15s, box-shadow .15s, background .15s; }
.option-card.answered { border-color: #c81f2b; background: #fbfcff; }
.option-text { line-height: 1.5; font-weight: 680; font-size: 21px; }
.rank-buttons { display: grid; grid-template-columns: repeat(4, 50px); gap: 9px; }
.rank-btn { width: 50px; height: 50px; font-size: 19px; border-radius: 11px; border: 1px solid #fff3f4; background: white; color: #656565; font-weight: 800; }
.rank-btn:hover { border-color: var(--brand); color: var(--brand); }
.rank-btn.selected { background: var(--brand); color: white; border-color: var(--brand); box-shadow: 0 6px 16px rgba(200,31,43,.22); }
.rank-btn.unavailable { visibility: hidden; pointer-events: none; }
.validation-msg { min-height: 24px; color: var(--danger); font-size: 15px; margin-top: 13px; }
.nav-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }

.results-wrap { display: grid; gap: 22px; }
.result-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; }
.result-card { padding: 30px; }
.report-kicker { color: var(--brand); font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.report-title { margin: 8px 0 8px; font-size: clamp(28px, 4vw, 46px); line-height: 1.08; }
.report-meta { color: var(--muted); line-height: 1.7; font-size: 16px; }
.profile-code { display: flex; gap: 10px; margin: 24px 0 16px; flex-wrap: wrap; }
.code-chip { border-radius: 14px; padding: 13px 16px; font-weight: 900; font-size: 17px; border: 1px solid var(--line); }
.summary-text { color: #656565; line-height: 1.75; font-size: 17px; }
.chart-shell { display: grid; place-items: center; min-height: 360px; }
.radar { width: min(100%, 360px); height: auto; overflow: visible; }
.radar .grid { fill: none; stroke: #fff3f4; stroke-width: 1; }
.radar .axis { stroke: #fff3f4; stroke-width: 1; }
.radar .natural-shape { fill: rgba(200,31,43,.14); stroke: #c81f2b; stroke-width: 3; }
.radar .stress-shape { fill: rgba(232,93,93,.09); stroke: #e85d5d; stroke-width: 2.5; stroke-dasharray: 7 5; }
.radar text { font-size: 16px; font-weight: 800; fill: #656565; }
.chart-legend { display: flex; justify-content: center; gap: 18px; font-size: 14px; color: var(--muted); margin-top: 8px; }
.legend-item { display: flex; align-items: center; gap: 7px; }
.legend-line { width: 22px; height: 3px; border-radius: 99px; }
.legend-line.natural { background: #c81f2b; }
.legend-line.stress { background: repeating-linear-gradient(90deg, #e85d5d 0 7px, transparent 7px 11px); }

.section-title { margin: 0 0 18px; font-size: 24px; }
.score-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.score-box { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.score-label { display: flex; justify-content: space-between; gap: 8px; font-weight: 900; font-size: 18px; align-items: center; }
.score-name { color: var(--muted); font-size: 14px; margin-top: 4px; }
.score-number { font-size: 30px; font-weight: 900; margin: 13px 0 8px; letter-spacing: -.03em; }
.mini-track { height: 7px; background: #e8ecf2; border-radius: 999px; overflow: hidden; }
.mini-fill { height: 100%; border-radius: inherit; }
.delta { margin-top: 10px; font-size: 14px; font-weight: 750; }
.delta.up { color: #b54708; }
.delta.down { color: #027a48; }
.delta.flat { color: var(--muted); }

.two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.insight-list { display: grid; gap: 10px; }
.insight-item { display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; color: #656565; font-size: 16px; }
.insight-icon { flex: 0 0 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 900; font-size: 12px; }
.callout { padding: 18px 20px; border-radius: 14px; background: #f8fafc; color: #656565; line-height: 1.7; font-size: 16px; border: 1px solid var(--line); }
.role-box { padding: 20px; border-radius: 16px; font-size: 16px; background: linear-gradient(135deg, #f4f7ff, #ffffff); border: 1px solid #fff3f4; line-height: 1.65; color: #656565; }
.action-row { display: flex; gap: 10px; flex-wrap: wrap; }
.quality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.quality-item { border: 1px solid var(--line); border-radius: 14px; padding: 15px; background: var(--surface-2); }
.quality-value { font-size: 26px; font-weight: 900; }
.quality-label { color: var(--muted); font-size: 14px; margin-top: 4px; }
.footer-note { color: var(--muted); font-size: 14px; line-height: 1.6; text-align: center; margin-top: 20px; }
.hidden { display: none !important; }

/* Nhãn kết quả bằng linh vật, giữ khóa D/I/S/C hoàn toàn ở tầng dữ liệu nội bộ. */
.dimension-pill { position: relative; overflow: hidden; }
.dimension-pill::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; border-radius: 15px 0 0 15px; }
.dimension-pill.animal-d { background: #FDECEC; border-color: #F7C8C8; }
.dimension-pill.animal-d::before { background: #E85D5D; }
.dimension-pill.animal-d strong { color: #C83F3F; }
.dimension-pill.animal-i { background: #FFF7DF; border-color: #F3D98B; }
.dimension-pill.animal-i::before { background: #E6B84B; }
.dimension-pill.animal-i strong { color: #A87708; }
.dimension-pill.animal-s { background: #E9F8F1; border-color: #BFE7D2; }
.dimension-pill.animal-s::before { background: #53B987; }
.dimension-pill.animal-s strong { color: #23835B; }
.dimension-pill.animal-c { background: #fff3f4; border-color: #fff3f4; }
.dimension-pill.animal-c::before { background: #c81f2b; }
.dimension-pill.animal-c strong { color: #656565; }
.animal-score-label { display: inline-flex; align-items: center; gap: 7px; }
.animal-score-icon { font-size: 22px; line-height: 1; }

@media (max-width: 860px) {
  .topbar { padding: 0 18px; }
  main { padding-top: 28px; }
  .hero, .result-hero, .two-col { grid-template-columns: 1fr; }
  .hero-copy { padding: 34px 26px; }
  .form-card, .assessment-card, .result-card { padding: 24px; }
  .option-text { font-size: 19px; }
  .dimension-row, .score-grid { grid-template-columns: repeat(2, 1fr); }
  .quality-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .top-meta { display: none; }
  main { width: min(100% - 20px, 1120px); }
  .option-card { grid-template-columns: 1fr; }
  .rank-legend { display: none; }
  .rank-buttons { width: 100%; grid-template-columns: repeat(4, 1fr); }
  .rank-btn { width: 100%; min-height: 52px; }
  .nav-row { position: static; bottom: auto; background: rgba(245,247,251,.92); backdrop-filter: blur(8px); padding: 10px; margin-inline: -10px; border-radius: 15px; }
  .score-grid { grid-template-columns: 1fr; }
}

@media print {
  body { background: white; }
  .topbar, #screen-intro, #screen-instructions, #screen-assessment, .no-print { display: none !important; }
  main { width: 100%; padding: 0; }
  #screen-results { display: block !important; }
  .result-card { box-shadow: none; break-inside: avoid; }
  .results-wrap { gap: 12px; }
  .result-hero, .two-col { grid-template-columns: 1fr 1fr; }
  .footer-note { margin-top: 8px; }
}

/* =============================
   v1.4 — 3 mức độ + trải nghiệm ngắn gọn
   ============================= */
.intro-experience { display: grid; gap: 22px; }
.intro-copy {
  padding: 44px 46px 38px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 10%, rgba(200,31,43,.11), transparent 24%),
    radial-gradient(circle at 12% 95%, rgba(83,185,135,.10), transparent 28%),
    #fff;
  box-shadow: var(--shadow);
}
.intro-copy h1 { max-width: 890px; font-size: clamp(38px, 5.3vw, 66px); }
.accent-word { color: var(--brand); }
.animal-mini-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.animal-mini {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 15px; background: #fff; box-shadow: 0 5px 16px rgba(22,32,51,.04);
}
.animal-mini.animal-d { color:#C83F3F; background:#FDECEC; border-color:#F7C8C8; }
.animal-mini.animal-i { color:#9A6B06; background:#FFF7DF; border-color:#F3D98B; }
.animal-mini.animal-s { color:#23835B; background:#E9F8F1; border-color:#BFE7D2; }
.animal-mini.animal-c { color:#656565; background:#fff3f4; border-color:#fff3f4; }

.choice-shell, .profile-card {
  border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow);
}
.choice-shell { padding: 28px; }
.choice-heading, .profile-heading {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px;
}
.choice-heading h2, .profile-heading h2 { margin: 3px 0 0; font-size: 26px; letter-spacing: -.025em; }
.choice-step { display: block; font-size: 12px; font-weight: 900; letter-spacing: .13em; color: var(--brand); }
.choice-hint { color: var(--muted); font-size: 14px; }

.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mode-card {
  position: relative; min-height: 200px; text-align: left; display: flex; flex-direction: column;
  padding: 22px; border: 1.5px solid #dfe4ec; border-radius: 20px; background: #fff; color: var(--text);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.mode-card:hover { transform: translateY(-2px); border-color: #c81f2b; box-shadow: 0 12px 28px rgba(200,31,43,.08); }
.mode-card.selected { border-color: var(--brand); background: linear-gradient(180deg,#f7f9ff 0%,#fff 100%); box-shadow: 0 0 0 4px rgba(200,31,43,.08), 0 14px 30px rgba(200,31,43,.10); }
.mode-card.recommended { padding-top: 30px; }
.recommended-tag {
  position: absolute; top: -10px; right: 16px; padding: 6px 10px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .04em;
}
.mode-icon { font-size: 24px; line-height: 1; margin-bottom: 14px; color: var(--brand); }
.mode-title { font-size: 23px; font-weight: 900; letter-spacing: -.025em; }
.mode-time { margin-top: 5px; color: var(--brand); font-size: 15px; font-weight: 850; }
.mode-desc { margin-top: 13px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.mode-cta { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 850; color: var(--brand); }

.mode-summary {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px;
  border-radius: 14px; background: #f7f9ff; border: 1px solid #fff3f4;
}
.mode-summary-icon { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: #fff; color: var(--brand); font-weight: 900; }
.mode-summary strong { display:block; font-size: 15px; }
.mode-summary span:last-child { display:block; margin-top:3px; color:var(--muted); font-size:14px; line-height:1.5; }

.profile-card { padding: 28px; }
.selected-mode-pill { padding: 8px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: 13px; font-weight: 850; white-space: nowrap; }
.profile-fields { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; align-items: start; }
.profile-fields .field { margin-bottom: 0; }
.profile-fields .field:last-child { grid-column: 1 / -1; }
.custom-role-inline { max-width: 460px; margin-top: 14px; }
.start-row {
  display: flex; align-items: center; justify-content: flex-end; gap: 18px;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
}
.compact-consent { margin: 0; max-width: 650px; }
.start-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.start-btn { min-width: 240px; padding-block: 15px; }
.intro-footnote { text-align:center; color:var(--muted); font-size:13px; padding: 0 14px; }

.assessment-journey { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.mode-progress-chip, .remaining-time {
  display:inline-flex; align-items:center; min-height:34px; padding:7px 11px; border-radius:999px; font-size:13px; font-weight:850;
}
.mode-progress-chip { color:var(--brand-dark); background:var(--brand-soft); }
.remaining-time { color:var(--muted); background:#fff; border:1px solid var(--line); }
.progress-header { align-items:center; margin-bottom: 12px; }
.progress-header h2 { font-size: 24px; }
.progress-track { height: 10px; margin-bottom: 18px; background:#e8edf5; }
.progress-fill { background: linear-gradient(90deg,#c81f2b,#c81f2b); }
#screen-assessment .assessment-card { box-shadow: 0 16px 44px rgba(22,32,51,.07); }
#screen-assessment .context-badge { font-size: 13px; }
#screen-assessment .question-focus { margin-top: 16px; }
#screen-assessment .question-title { font-size: clamp(26px, 3vw, 34px); }
#screen-assessment .option-card { min-height: 82px; }
#screen-assessment .option-text { font-size: 20px; }
#screen-assessment .rank-btn { width: 54px; height: 54px; font-size: 20px; }
#screen-assessment .rank-buttons, #screen-assessment .rank-scale { grid-template-columns: repeat(4,54px); }

.deep-break { text-align:center; padding: 54px 42px; }
.break-check { width:64px; height:64px; margin:0 auto 18px; display:grid; place-items:center; border-radius:50%; background:#e9f8f1; color:#23835b; font-size:30px; font-weight:900; }
.deep-break .context-badge { margin-bottom:16px; }
.deep-break h3 { max-width:860px; margin:0 auto; font-size:28px; line-height:1.35; letter-spacing:-.025em; }
.deep-break p { max-width:680px; margin:14px auto 26px; color:var(--muted); font-size:18px; line-height:1.7; }
.break-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.single-col { grid-template-columns: 1fr !important; }
.single-col > .result-card { max-width: 100%; }

@media (max-width: 860px) {
  .intro-copy { padding: 34px 26px; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-card { min-height: 0; padding: 18px 20px; }
  .mode-card.recommended { padding-top: 24px; }
  .profile-fields { grid-template-columns: 1fr 1fr; }
  .profile-fields .field:last-child { grid-column: 1 / -1; }
  .start-row { align-items:flex-start; flex-direction:column; }
  .start-actions { width:100%; justify-content:stretch; }
  .start-actions .btn { flex:1; }
}

@media (max-width: 620px) {
  main { padding-top: 18px; }
  .intro-experience { gap: 14px; }
  .intro-copy, .choice-shell, .profile-card { border-radius: 18px; padding: 20px; }
  .intro-copy h1 { font-size: 38px; }
  .hero-subtitle { font-size: 17px; line-height:1.65; }
  .animal-mini-strip { margin-top: 20px; }
  .choice-heading, .profile-heading { align-items:flex-start; flex-direction:column; margin-bottom:16px; }
  .choice-hint { display:none; }
  .mode-card { border-radius: 16px; }
  .mode-desc { margin-top:8px; }
  .profile-fields { grid-template-columns: 1fr; }
  .profile-fields .field:last-child { grid-column:auto; }
  .selected-mode-pill { white-space:normal; }
  .start-actions { flex-direction:column-reverse; }
  .start-actions .btn { width:100%; }
  .assessment-journey { margin-bottom:8px; }
  .remaining-time { font-size:12px; }
  .progress-header { display:block; }
  .progress-header h2 { font-size:22px; }
  .progress-header > .progress-meta { text-align:left; margin-top:5px; }
  #screen-assessment .assessment-card { padding:18px; }
  #screen-assessment .option-card { padding:16px; gap:14px; }
  #screen-assessment .option-text { font-size:18px; }
  #screen-assessment .rank-buttons { grid-template-columns:repeat(4,1fr); }
  #screen-assessment .rank-btn { width:100%; height:52px; }
  .deep-break { padding: 38px 22px !important; }
  .deep-break h3 { font-size:23px; }
  .deep-break p { font-size:16px; }
}

/* =============================
   v1.6 — Chỉ hiển thị nhóm của người dùng + icon khuôn mặt + bố cục in 2x2
   ============================= */
.test-instruction {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid #fff3f4;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfcff 0%, #f7f9ff 100%);
}
.instruction-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -.02em;
}
.test-instruction strong { display:block; font-size:16px; margin-bottom:4px; }
.test-instruction span { display:block; color:var(--muted); font-size:15px; line-height:1.55; }
.test-instruction span b { color:var(--text); }

.role-reminder {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 15px;
  border: 1px solid #fff3f4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(22,32,51,.04);
}
.role-reminder > span {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.role-reminder strong { font-size:16px; line-height:1.35; }
#screen-assessment .question-focus { margin-bottom: 18px; }
#screen-assessment .rank-legend { margin-top: 2px; }

#screen-results { position: relative; }
.results-wrap { position: relative; z-index: 2; }
.report-watermark {
  position: fixed;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%) rotate(-24deg);
  z-index: 1;
  pointer-events: none;
  user-select: none;
  color: #656565;
  opacity: .035;
  font-size: clamp(72px, 14vw, 190px);
  font-weight: 950;
  letter-spacing: .02em;
  white-space: nowrap;
}

.behavior-group-card {
  --group-color: #c81f2b;
  --group-light: #fff3f4;
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--group-color) 28%, white);
  background: linear-gradient(135deg, var(--group-light) 0%, #fff 64%);
}
.behavior-group-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--group-color);
}
.behavior-group-kicker {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
}
.behavior-group-result {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
  margin-top: 16px;
}
.behavior-group-icon {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(22,32,51,.08);
  box-shadow: 0 12px 28px rgba(22,32,51,.07);
  font-size: 42px;
}
.behavior-group-label { color:var(--muted); font-size:14px; font-weight:800; }
.behavior-group-name {
  margin: 5px 0 5px;
  color: var(--group-color);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.behavior-group-formula { font-size:16px; font-weight:900; }
.behavior-group-description { max-width:830px; margin:10px 0 0; color:var(--muted); font-size:16px; line-height:1.65; }
.stress-group-result {
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(22,32,51,.08);
  font-size: 15px;
  line-height: 1.5;
}

.catalog-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.catalog-heading .section-title { margin-top:4px; }
.catalog-note { color:var(--muted); font-size:13px; font-weight:750; }
.behavior-catalog { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.behavior-family {
  border: 1px solid color-mix(in srgb, var(--family) 24%, white);
  border-radius: 18px;
  padding: 16px;
  background: var(--family-light);
}
.behavior-family-title {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--family);
  font-size:13px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:10px;
}
.family-dot { width:10px; height:10px; border-radius:50%; background:var(--family); }
.behavior-family-list { display:grid; gap:8px; }
.behavior-catalog-item {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:9px;
  min-height:46px;
  padding:9px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(22,32,51,.06);
}
.behavior-catalog-item.active {
  background:#fff;
  border-color:var(--family);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--family) 13%, transparent);
}
.catalog-icon { font-size:18px; }
.catalog-name { font-size:14px; line-height:1.35; font-weight:780; }
.your-group {
  padding:4px 7px;
  border-radius:999px;
  background:var(--family);
  color:#fff;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}

@media (max-width: 760px) {
  .behavior-group-result { grid-template-columns:1fr; }
  .behavior-group-icon { width:82px; height:82px; border-radius:22px; font-size:34px; }
  .behavior-catalog { grid-template-columns:1fr; }
  .catalog-heading { align-items:flex-start; flex-direction:column; gap:6px; }
  .role-reminder { align-items:flex-start; flex-direction:column; gap:7px; }
}

@media (max-width: 520px) {
  .test-instruction { padding:14px; }
  .instruction-icon { width:42px; height:42px; flex-basis:42px; }
  .behavior-catalog-item { grid-template-columns:auto 1fr; }
  .your-group { grid-column:2; justify-self:start; }
}

@media print {
  .report-watermark {
    display:block !important;
    position:fixed;
    top:52%;
    left:50%;
    opacity:.045;
    font-size:118px;
    z-index:0;
  }
  .results-wrap { position:relative; z-index:1; }
  .behavior-catalog { grid-template-columns:1fr 1fr; }
  .behavior-family, .behavior-group-card { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}


/* =============================
   v1.6 — Result focus + hand-drawn animal faces
   ============================= */
.animal-face-svg { display:block; width:100%; height:100%; overflow:visible; }
.animal-mini-face { width:28px; height:28px; display:inline-grid; place-items:center; flex:0 0 28px; }
.mini-face-svg { width:28px; height:28px; }
.group-face-pair { display:inline-flex; align-items:center; justify-content:center; }
.group-face-pair .animal-face-svg { width:58px; height:58px; }
.group-face-pair:not(.single) .animal-face-svg + .animal-face-svg { margin-left:-12px; }
.hero-face-svg { width:64px !important; height:64px !important; }
.chip-face-svg { width:28px !important; height:28px !important; }
.inline-face-svg { width:25px !important; height:25px !important; }
.score-face-svg { width:34px !important; height:34px !important; }
.code-chip { display:inline-flex; align-items:center; gap:8px; }
.code-chip .group-face-pair:not(.single) .animal-face-svg + .animal-face-svg { margin-left:-7px; }
.behavior-group-icon { color:var(--group-color); }
.inline-group-face, .inline-style-title { display:inline-flex; align-items:center; gap:6px; vertical-align:middle; }
.inline-group-face .group-face-pair { vertical-align:middle; }
.inline-group-face .group-face-pair:not(.single) .animal-face-svg + .animal-face-svg { margin-left:-6px; }

/* Bốn ô luôn theo thứ tự thị giác: Hổ | Khỉ / Kiến | Voi. */
.score-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "tiger monkey"
    "ant elephant";
  gap:14px;
}
.score-box[data-style="D"] { grid-area:tiger; }
.score-box[data-style="I"] { grid-area:monkey; }
.score-box[data-style="C"] { grid-area:ant; }
.score-box[data-style="S"] { grid-area:elephant; }
.score-box { min-height:178px; }
.animal-score-icon { width:34px; height:34px; display:inline-grid; place-items:center; }
.animal-score-label { gap:9px; }

/* Bản đồ 16 nhóm không còn xuất hiện trong báo cáo; chỉ giữ nhóm của người dùng. */
.behavior-catalog-card { display:none !important; }

@media (max-width: 620px) {
  .score-grid {
    grid-template-columns:1fr;
    grid-template-areas:"tiger" "monkey" "ant" "elephant";
  }
}

@media print {
  .score-grid {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-areas:
      "tiger monkey"
      "ant elephant" !important;
    gap:10px !important;
  }
  .score-box { min-height:150px; break-inside:avoid; page-break-inside:avoid; }
  .score-box[data-style="D"] { grid-area:tiger !important; }
  .score-box[data-style="I"] { grid-area:monkey !important; }
  .score-box[data-style="C"] { grid-area:ant !important; }
  .score-box[data-style="S"] { grid-area:elephant !important; }
  .animal-face-svg { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}


/* v1.7 — Icon minh hoạ mới từ ảnh gốc */
.animal-face-svg {
  object-fit: contain;
  object-position: center;
  filter: none;
}
.animal-mini-face .animal-face-svg,
.group-face-pair .animal-face-svg,
.animal-score-icon .animal-face-svg {
  border-radius: 0;
}
.behavior-group-icon .animal-face-svg {
  width: 96px;
  height: 96px;
}


/* =========================================================
   v1.8 — Empower branded 4-page report
   ========================================================= */
.brand-with-logo { gap: 16px; }

.topbar-product-name { font-weight: 800; color: #656565; font-size: 15px; letter-spacing: -.01em; }
.topbar-product-name span { color: var(--empower-red); }
.topbar { height: 72px; }
.brand-mark, .top-meta { display:none !important; }

.report-shell {
  display: grid;
  gap: 26px;
  max-width: 940px;
  margin: 0 auto;
}
.report-page {
  position: relative;
  min-height: 1120px;
  padding: 44px 48px 52px;
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  box-shadow: 0 18px 55px rgba(31,41,55,.09);
  overflow: hidden;
}
.report-page::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--empower-red);
}
.report-page-header {
  height: 58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:14px;
  border-bottom:1px solid #ececec;
}
.report-cover-header { height: 72px; align-items:flex-start; }
.report-logo { width: 154px; max-height: 42px; object-fit:contain; object-position:left center; display:block; }
.report-logo-large { width: 214px; max-height: 58px; }
.report-brand-copy { text-align:right; padding-top:3px; }
.report-eyebrow { color:var(--empower-red); font-size:12px; font-weight:900; letter-spacing:.14em; }
.report-edition { margin-top:5px; color:#60646c; font-size:12px; font-weight:750; letter-spacing:.06em; }
.page-header-title { color:#7a7e85; font-size:11px; font-weight:800; letter-spacing:.12em; }

.cover-identity {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:end;
  padding:28px 0 22px;
}
.cover-label, .section-kicker {
  color:var(--empower-red);
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.cover-name { margin:7px 0 7px; color:#20242b; font-size:44px; line-height:1.02; letter-spacing:-.04em; }
.cover-meta { color:#656565; font-size:14px; line-height:1.55; }
.cover-code { justify-content:flex-end; margin:0; align-self:end; }
.cover-code .code-chip { max-width:100%; font-size:12px; padding:8px 10px; border-radius:10px; }

.cover-main-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:stretch;
}
.report-panel {
  border:1px solid #e6e8ec;
  border-radius:18px;
  background:#fff;
}
.cover-chart-panel { padding:20px 20px 16px; }
.panel-heading-row { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.report-section-heading { margin:5px 0 0; font-size:22px; letter-spacing:-.025em; }
.cover-chart-panel .report-section-heading { text-align:center; }
.cover-chart-panel .section-kicker { display:block; text-align:center; }
.cover-radar { display:grid; place-items:center; min-height:320px; }
.cover-radar .radar { width:min(100%, 330px); }
.chart-legend-strong {
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:0;
}
.legend-item {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid #e7e8eb;
  border-radius:999px;
  background:#fff;
  color:#656565;
  font-size:12px;
  font-weight:850;
}
.legend-swatch {
  width:32px;
  height:12px;
  position:relative;
  display:inline-block;
}
.legend-swatch::before {
  content:"";
  position:absolute;
  left:0; right:0; top:5px;
  height:3px;
  border-radius:9px;
}
.legend-swatch::after {
  content:"";
  position:absolute;
  left:13px; top:2px;
  width:8px; height:8px;
  background:#fff;
}
.legend-swatch.natural::before { background:var(--swatch-color, #c81f2b); }
.legend-swatch.natural::after { border:3px solid var(--swatch-color, #c81f2b); border-radius:50%; box-sizing:border-box; }
.legend-swatch.stress::before {
  height:0;
  border-top:3px dashed var(--swatch-color, #d64b55);
}
.legend-swatch.stress::after {
  width:7px; height:7px; top:2px;
  border:2px solid var(--swatch-color, #d64b55);
  transform:rotate(45deg);
}
.chart-note { margin:10px 0 0; color:#656565; font-size:11px; line-height:1.45; text-align:center; }

.cover-results-stack { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch; }
.outcome-card {
  --outcome-color:#c81f2b;
  --outcome-light:#fff3f4;
  border:1px solid color-mix(in srgb, var(--outcome-color) 26%, white);
  border-radius:18px;
  padding:18px;
  background:linear-gradient(145deg,var(--outcome-light),#fff 72%);
  position:relative;
  overflow:hidden;
}
.outcome-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--outcome-color); }
.cover-results-stack .outcome-card { height:100%; }
.outcome-topline { display:flex; align-items:center; gap:9px; color:#656565; font-size:10px; font-weight:900; letter-spacing:.11em; }
.outcome-number { color:var(--outcome-color); font-size:13px; }
.outcome-main { display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:center; margin-top:12px; }
.outcome-icon { width:72px; height:72px; display:grid; place-items:center; border-radius:16px; background:rgba(255,255,255,.85); border:1px solid rgba(31,41,55,.07); }
.outcome-icon .group-face-pair .animal-face-svg { width:46px; height:46px; }
.outcome-icon .group-face-pair:not(.single) .animal-face-svg + .animal-face-svg { margin-left:-10px; }
.outcome-name { margin:0; color:var(--outcome-color); font-size:23px; line-height:1.08; letter-spacing:-.03em; text-transform:uppercase; }
.outcome-formula { margin-top:5px; color:#656565; font-weight:850; font-size:13px; }
.outcome-desc { margin:12px 0 0; color:#656565; font-size:13px; line-height:1.55; }

.cover-summary-box {
  margin-top:18px;
  padding:17px 19px;
  border-radius:15px;
  background:#f7f7f8;
  border:1px solid #e8e8ea;
}
.cover-summary-title { color:#4a4f57; font-size:10px; font-weight:950; letter-spacing:.12em; }
.cover-summary-box .summary-text { margin:7px 0 0; font-size:13px; line-height:1.6; color:#656565; }

.page-title-block { padding:25px 0 18px; }
.page-title-block.compact { padding-bottom:14px; }
.page-title-block h2 { margin:6px 0 8px; font-size:31px; letter-spacing:-.035em; line-height:1.08; color:#22262c; }
.page-title-block p { max-width:760px; margin:0; color:#656565; line-height:1.55; font-size:13px; }

.style-explain-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.style-guide-card {
  --style-color:#c81f2b;
  --style-light:#fff3f4;
  display:grid;
  grid-template-columns:72px 1fr;
  gap:13px;
  padding:16px;
  min-height:188px;
  border:1px solid color-mix(in srgb,var(--style-color) 24%,white);
  border-radius:17px;
  background:linear-gradient(145deg,var(--style-light),#fff 76%);
}
.style-guide-icon { width:72px; height:72px; display:grid; place-items:center; background:#fff; border-radius:16px; border:1px solid rgba(31,41,55,.07); }
.style-guide-icon .animal-face-svg { width:64px !important; height:64px !important; }
.style-guide-name { color:var(--style-color); font-weight:950; font-size:18px; }
.style-guide-sub { color:#656565; font-weight:850; font-size:13px; margin-top:2px; }
.style-guide-summary { margin:7px 0 0; color:#656565; font-size:11.5px; line-height:1.45; }
.style-keywords { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.style-keywords span { padding:4px 6px; border-radius:7px; background:#fff; border:1px solid rgba(31,41,55,.07); color:#656565; font-size:9.5px; font-weight:750; }
.style-guide-points { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.style-point { padding-top:8px; border-top:1px solid rgba(31,41,55,.08); }
.style-point b { display:block; font-size:10px; color:#343941; margin-bottom:3px; }
.style-point span { display:block; color:#656565; font-size:10px; line-height:1.4; }

.distribution-section { margin-top:16px; padding-top:15px; border-top:1px solid #ececee; }
.distribution-heading, .group-map-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:10px; }
.distribution-heading h3, .group-map-heading h3 { margin:4px 0 0; font-size:18px; }
.distribution-note, .group-map-note { color:#656565; font-size:10px; }
.report-score-grid {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  grid-template-areas:none !important;
  gap:9px !important;
}
.report-score-grid .score-box {
  grid-area:auto !important;
  min-height:118px !important;
  padding:12px !important;
  border-radius:13px;
}
.report-score-grid .score-label { font-size:13px; }
.report-score-grid .animal-score-icon { width:26px; height:26px; }
.report-score-grid .score-face-svg { width:26px !important; height:26px !important; }
.report-score-grid .score-number { font-size:24px; margin:8px 0 6px; }
.report-score-grid .score-name { font-size:10px; }
.report-score-grid .delta { font-size:9.5px; margin-top:6px; }

.combination-rule {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}
.combo-rule-box {
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px;
  align-items:center;
  padding:11px 13px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fafafa;
}
.combo-rule-index { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:var(--empower-red); color:#fff; font-weight:900; }
.combo-rule-box strong { display:block; color:#333840; font-size:12px; }
.combo-rule-box span:last-child { display:block; margin-top:2px; color:#656565; font-size:10px; line-height:1.35; }
.combo-plus { color:#9aa0a8; font-weight:950; font-size:22px; }

.combination-results { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.combination-result-card {
  --combo-color:#c81f2b;
  --combo-light:#fff3f4;
  padding:15px 16px;
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--combo-color) 26%,white);
  background:linear-gradient(145deg,var(--combo-light),#fff 76%);
}
.combination-context { color:#656565; font-size:9.5px; letter-spacing:.12em; font-weight:950; }
.combination-result-head { display:grid; grid-template-columns:62px 1fr; gap:12px; align-items:center; margin-top:9px; }
.combination-icon { width:62px; height:62px; display:grid; place-items:center; border-radius:14px; background:#fff; border:1px solid rgba(31,41,55,.07); }
.combination-icon .group-face-pair .animal-face-svg { width:42px; height:42px; }
.combination-icon .group-face-pair:not(.single) .animal-face-svg + .animal-face-svg { margin-left:-9px; }
.combination-result-card h3 { margin:0; color:var(--combo-color); font-size:18px; line-height:1.08; }
.combination-formula { margin-top:4px; color:#656565; font-size:11px; font-weight:850; }
.combination-result-card p { margin:9px 0 0; color:#656565; font-size:10.5px; line-height:1.45; }
.combination-meaning { margin-top:8px; padding-top:8px; border-top:1px solid rgba(31,41,55,.08); color:#656565; font-size:10px; line-height:1.45; }
.combination-meaning b { color:#2f343b; }
.context-shift-summary {
  margin-top:11px;
  padding:10px 13px;
  border-radius:12px;
  border-left:4px solid var(--empower-red);
  background:#faf7f7;
  color:#656565;
  font-size:10.5px;
  line-height:1.45;
}

.group-map-section { margin-top:13px; padding-top:12px; border-top:1px solid #ececee; }
.behavior-group-map { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.group-family {
  --family-color:#c81f2b;
  --family-light:#fff3f4;
  padding:9px;
  border-radius:12px;
  background:var(--family-light);
  border:1px solid color-mix(in srgb,var(--family-color) 22%,white);
}
.group-family-title { color:var(--family-color); font-size:9px; font-weight:950; letter-spacing:.09em; margin-bottom:6px; }
.group-family-list { display:grid; gap:4px; }
.group-map-item {
  position:relative;
  min-height:36px;
  display:grid;
  grid-template-columns:29px 1fr;
  gap:5px;
  align-items:center;
  padding:5px;
  border-radius:8px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(31,41,55,.05);
}
.group-map-item.active-natural, .group-map-item.active-stress {
  background:#fff;
  border-color:var(--family-color);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--family-color) 14%,transparent);
}
.group-map-faces { width:28px; display:flex; align-items:center; }
.group-map-faces .group-face-pair .animal-face-svg { width:20px; height:20px; }
.group-map-faces .group-face-pair:not(.single) .animal-face-svg + .animal-face-svg { margin-left:-5px; }
.group-map-name { color:#656565; font-size:8.6px; line-height:1.18; font-weight:760; }
.group-map-badge { grid-column:2; justify-self:start; margin-top:1px; color:var(--family-color); font-size:7.5px; font-weight:950; }

.application-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.application-card { padding:15px 16px; }
.application-card h3, .role-guidance-panel h3 { margin:0 0 10px; font-size:17px; letter-spacing:-.02em; }
.application-card .insight-list { gap:7px; }
.application-card .insight-item { font-size:10.8px; line-height:1.4; gap:7px; }
.application-card .insight-icon { width:20px; height:20px; flex-basis:20px; border-radius:6px; font-size:9px; }
.clean-callout { padding:0; border:0; background:transparent; font-size:10.8px; line-height:1.5; }
.clean-callout .inline-face-svg { width:19px !important; height:19px !important; }

.role-guidance-panel {
  padding:14px 16px;
  border-radius:15px;
  border:1px solid #ead8da;
  background:linear-gradient(135deg,#fff8f8,#fff);
  margin-bottom:12px;
}
.role-guidance-panel .section-kicker { margin-bottom:5px; }
.report-role-box { padding:0; border:0; background:transparent; font-size:10.8px; line-height:1.5; }

.development-plan { padding:13px 15px; border:1px solid #e6e7e9; border-radius:15px; background:#fafafa; margin-bottom:10px; }
.development-plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:9px; }
.development-plan-grid > div { padding:9px; border-radius:10px; background:#fff; border:1px solid #e7e8ea; }
.development-plan-grid strong { display:block; color:var(--empower-red); font-size:11px; }
.development-plan-grid span { display:block; margin-top:3px; color:#656565; font-size:8.8px; line-height:1.35; }
.development-plan-grid i { display:block; height:18px; border-bottom:1px solid #bfc3c9; }

.quality-footer-block { display:flex; align-items:center; gap:12px; padding-top:8px; border-top:1px solid #ececee; }
.quality-heading { flex:0 0 auto; color:#6f747c; font-size:9px; font-weight:900; }
.compact-quality-grid { flex:1; grid-template-columns:repeat(3,1fr); gap:7px; }
.compact-quality-grid .quality-item { padding:7px 9px; border-radius:9px; background:#fafafa; }
.compact-quality-grid .quality-value { font-size:14px; }
.compact-quality-grid .quality-label { margin-top:1px; font-size:7.8px; }
.report-disclaimer { margin:8px 0 0; color:#656565; font-size:8.5px; line-height:1.4; }

.report-page-footer {
  position:absolute;
  left:48px;
  right:48px;
  bottom:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:9px;
  border-top:1px solid #ececee;
  color:#92969d;
  font-size:9px;
  font-weight:700;
}
.report-actions {
  max-width:940px;
  margin:0 auto;
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:16px;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:var(--shadow);
}
.technical-export { margin-left:auto; color:#656565; font-size:12px; }
.technical-export summary { cursor:pointer; font-weight:750; }
.technical-export .btn { margin-top:8px; padding:9px 12px; font-size:12px; }

.radar .natural-shape { fill:var(--natural-fill, rgba(200,31,43,.08)); stroke:var(--natural-color, #c81f2b); stroke-width:1.8; }
.radar .stress-shape { fill:var(--stress-fill, rgba(214,75,85,.045)); stroke:var(--stress-color, #d64b55); stroke-width:1.6; stroke-dasharray:7 6; }
.radar .natural-point { fill:#fff; stroke:var(--natural-color, #c81f2b); stroke-width:1.8; }
.radar .stress-point { fill:#fff; stroke:var(--stress-color, #d64b55); stroke-width:1.6; }
.radar .radar-scale-label { font-size:9px; font-weight:750; fill:#656565; }
.radar .radar-context-label { font-size:10px; font-weight:850; fill:#656565; letter-spacing:.02em; }
.radar .radar-value-label {
  font-size:9.5px;
  font-weight:950;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:4px;
  stroke-linejoin:round;
}
.radar .radar-value-label.natural { fill:var(--natural-color, #c81f2b); }
.radar .radar-value-label.stress { fill:var(--stress-color, #d64b55); }
.radar .radar-value-marker line { stroke-width:1.15; opacity:.58; }
.radar .radar-value-marker rect { fill:rgba(255,255,255,.97); stroke-width:1.3; }
.radar .radar-value-marker.natural line,
.radar .radar-value-marker.natural rect { stroke:var(--natural-color, #c81f2b); }
.radar .radar-value-marker.stress line,
.radar .radar-value-marker.stress rect { stroke:var(--stress-color, #d64b55); }

@media (max-width: 860px) {
  
  .topbar-product-name { display:none; }
  .report-page { min-height:0; padding:28px 24px 54px; }
  .report-page-footer { left:24px; right:24px; }
  .cover-identity, .cover-main-grid { grid-template-columns:1fr; }
  .cover-results-stack { grid-template-columns:1fr; }
  .cover-code { justify-content:flex-start; }
  .style-explain-grid, .combination-results, .application-grid { grid-template-columns:1fr; }
  .behavior-group-map { grid-template-columns:1fr 1fr; }
  .report-score-grid { grid-template-columns:1fr 1fr !important; }
  .development-plan-grid { grid-template-columns:1fr; }
  .report-actions { margin-inline:10px; flex-wrap:wrap; }
}
@media (max-width: 520px) {
  .report-page { padding:22px 16px 52px; }
  .report-page-footer { left:16px; right:16px; }
  .report-cover-header { height:auto; flex-direction:column; }
  .report-brand-copy { text-align:left; }
  .cover-name { font-size:34px; }
  .style-guide-card { grid-template-columns:58px 1fr; }
  .style-guide-icon { width:58px; height:58px; }
  .style-guide-icon .animal-face-svg { width:52px !important; height:52px !important; }
  .behavior-group-map { grid-template-columns:1fr; }
  .combination-rule { grid-template-columns:1fr; }
  .combo-plus { text-align:center; }
  .report-score-grid { grid-template-columns:1fr !important; }
}

@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { background:#fff !important; }
  body { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .topbar, #screen-intro, #screen-instructions, #screen-assessment, .report-actions, .no-print { display:none !important; }
  main { width:100% !important; margin:0 !important; padding:0 !important; }
  #screen-results { display:block !important; }
  .report-shell { display:block !important; max-width:none !important; margin:0 !important; }
  .report-page {
    width:210mm !important;
    height:297mm !important;
    min-height:297mm !important;
    margin:0 !important;
    padding:11mm 12mm 13mm !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    break-after:page;
    page-break-after:always;
    overflow:hidden !important;
  }
  .report-page:last-child { break-after:auto; page-break-after:auto; }
  .report-page-header { height:14mm; padding-bottom:2.5mm; }
  .report-cover-header { height:17mm; }
  .report-logo { width:37mm; max-height:10mm; }
  .report-logo-large { width:50mm; max-height:14mm; }
  .cover-identity { padding:6mm 0 4mm; gap:5mm; }
  .cover-name { font-size:27pt; }
  .cover-main-grid { grid-template-columns:1fr; gap:4mm; }
  .cover-chart-panel { padding:4mm; }
  .cover-radar { min-height:102mm; }
  .cover-radar .radar { width:102mm; }
  .cover-results-stack { grid-template-columns:1fr 1fr; gap:4mm; align-items:stretch; }
  .outcome-card { padding:4mm; }
  .outcome-main { grid-template-columns:18mm 1fr; gap:3mm; }
  .outcome-icon { width:18mm; height:18mm; }
  .outcome-name { font-size:14pt; }
  .cover-summary-box { margin-top:4mm; padding:4mm; }
  .page-title-block { padding:5mm 0 3.5mm; }
  .page-title-block h2 { font-size:20pt; }
  .style-explain-grid { gap:3mm; }
  .style-guide-card { min-height:45mm; padding:3.5mm; gap:3mm; grid-template-columns:18mm 1fr; }
  .style-guide-icon { width:18mm; height:18mm; }
  .distribution-section { margin-top:3mm; padding-top:3mm; }
  .report-score-grid { gap:2mm !important; }
  .report-score-grid .score-box { min-height:28mm !important; padding:2.5mm !important; }
  .combination-rule { gap:2.5mm; margin-bottom:3mm; }
  .combo-rule-box { padding:2.5mm 3mm; }
  .combination-results { gap:3mm; }
  .combination-result-card { padding:3mm; }
  .context-shift-summary { margin-top:2.5mm; }
  .group-map-section { margin-top:2.5mm; padding-top:2.5mm; }
  .behavior-group-map { gap:1.8mm; }
  .group-family { padding:2mm; }
  .group-map-item { min-height:8.5mm; }
  .application-grid { gap:3mm; margin-bottom:3mm; }
  .application-card { padding:3.5mm; }
  .role-guidance-panel { padding:3mm 3.5mm; margin-bottom:3mm; }
  .development-plan { padding:3mm; margin-bottom:2.5mm; }
  .development-plan-grid { gap:2.5mm; }
  .quality-footer-block { padding-top:2mm; }
  .report-page-footer { left:12mm; right:12mm; bottom:6mm; }
}


/* =========================================================
   v1.8.1 — Alignment refinement requested
   ========================================================= */

/* Mode choices: text-only, no decorative symbols. */
.mode-card { padding-top:22px !important; }
.mode-card.recommended { padding-top:30px !important; }
.mode-summary { grid-template-columns:1fr; }
.mode-summary > div { width:100%; }
.mode-icon, .mode-summary-icon { display:none !important; }

/* PAGE 1: stacked chart on top, result cards in a horizontal row below. */
.cover-main-grid {
  grid-template-columns:minmax(0,1fr) !important;
}
.cover-results-stack {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
}
.cover-results-stack .outcome-card {
  height:100%;
  min-width:0;
  border-color:#e2e4e7 !important;
  background:linear-gradient(180deg,#fbfbfc 0%,#ffffff 100%) !important;
}
.cover-results-stack .outcome-card::before {
  background:#a3a7ad !important;
}
.cover-results-stack .outcome-number {
  color:#4b5057 !important;
}
.cover-results-stack .outcome-context {
  color:#656565 !important;
}

/* Icon gets its own row; result text is a separate full-width row below. */
.outcome-main {
  display:block !important;
  margin-top:12px;
}
.outcome-icon {
  width:72px;
  height:72px;
  margin:0 0 13px 0;
}
.outcome-main > div:last-child {
  display:block;
  width:100%;
  min-width:0;
}
.outcome-name {
  display:block;
  width:100%;
  margin:0 !important;
  color:#252a31 !important;
  font-size:21px;
  line-height:1.16;
  overflow-wrap:anywhere;
}
.outcome-formula {
  display:block;
  width:100%;
  margin-top:6px;
  color:#656565 !important;
  overflow-wrap:anywhere;
}
.outcome-desc {
  color:#656565 !important;
}

/* PAGE 3 result cards: neutral typography; icon and text never share a row. */
.combination-result-card {
  border-color:#e2e4e7 !important;
  background:linear-gradient(180deg,#fbfbfc 0%,#ffffff 100%) !important;
}
.combination-context {
  color:#656565 !important;
}
.combination-result-head {
  display:block !important;
  margin-top:9px;
}
.combination-icon {
  width:62px;
  height:62px;
  margin:0 0 11px 0;
}
.combination-result-head > div:last-child {
  display:block;
  width:100%;
  min-width:0;
}
.combination-result-card h3 {
  display:block;
  width:100%;
  margin:0 !important;
  color:#252a31 !important;
  line-height:1.16;
  overflow-wrap:anywhere;
}
.combination-formula {
  display:block;
  width:100%;
  margin-top:5px;
  color:#656565 !important;
  overflow-wrap:anywhere;
}
.combination-result-card p,
.combination-meaning {
  color:#656565 !important;
}
.combination-meaning b {
  color:#30353c !important;
}

/* PAGE 3 reference map: neutral text and a dedicated line for labels under icons. */
.group-family {
  border-color:#e1e3e6 !important;
  background:#f7f7f8 !important;
}
.group-family-title {
  color:#373c43 !important;
}
.group-map-item {
  display:block !important;
  min-height:64px;
  padding:7px;
  background:#fff !important;
  border-color:#e5e6e8 !important;
}
.group-map-item.active-natural,
.group-map-item.active-stress {
  border-color:#777d85 !important;
  box-shadow:0 0 0 2px rgba(71,76,84,.08) !important;
}
.group-map-faces {
  width:100%;
  min-height:25px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:5px;
}
.group-map-name {
  display:block;
  width:100%;
  color:#373c43 !important;
  font-size:8.8px;
  line-height:1.24;
  font-weight:780;
  overflow-wrap:anywhere;
}
.group-map-badge {
  display:block;
  width:max-content;
  max-width:100%;
  margin-top:4px;
  color:#686e76 !important;
  font-size:7.3px;
  font-weight:950;
}

/* Keep print layout aligned with the on-screen refinements. */
@media print {
  .cover-main-grid {
    grid-template-columns:1fr !important;
  }
  .cover-results-stack {
    grid-template-columns:1fr 1fr !important;
  }
  .outcome-main {
    display:block !important;
  }
  .outcome-icon {
    width:18mm !important;
    height:18mm !important;
    margin:0 0 2.6mm 0 !important;
  }
  .outcome-name {
    font-size:13pt !important;
  }
  .combination-result-head {
    display:block !important;
  }
  .combination-icon {
    margin-bottom:2.2mm !important;
  }
  .group-map-item {
    min-height:15.5mm !important;
  }
}


/* =========================================================
   v1.9 — Professional 7-page A4 report
   Fixes print overflow and responsive/print conflicts.
   ========================================================= */
.report-page { min-height:1120px; }
.report-note-box {
  margin-top:18px; padding:15px 18px; border:1px solid #e5e7eb; border-radius:14px;
  background:#f8f9fa; color:#656565; font-size:13px; line-height:1.55;
}
.report-note-box strong { color:#30353b; }
.style-explain-grid { grid-template-columns:1fr 1fr !important; gap:14px; }
.style-guide-card { min-height:232px; }
.report-page-foundation .style-guide-card { padding:18px; }
.report-page-foundation .style-guide-summary { font-size:12px; }
.report-page-foundation .style-point span { font-size:10.5px; }

.report-page-distribution .report-score-grid {
  grid-template-columns:1fr 1fr !important;
  grid-template-areas:none !important;
  gap:14px !important;
}
.report-page-distribution .report-score-grid .score-box {
  grid-area:auto !important; min-height:166px !important; padding:17px !important;
}
.report-page-distribution .report-score-grid .score-label { font-size:16px; }
.report-page-distribution .report-score-grid .score-number { font-size:31px; }
.report-page-distribution .report-score-grid .score-name { font-size:12px; }
.report-page-distribution .report-score-grid .delta { font-size:11px; }

.profile-reading-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.profile-reading-card { padding:18px; min-height:128px; }
.profile-reading-card h3 { margin:5px 0 10px; font-size:18px; }
.leading-summary { display:flex; align-items:flex-start; gap:10px; color:#656565; font-size:12px; line-height:1.5; }
.leading-summary .inline-face-svg { width:32px !important; height:32px !important; }
.leading-summary strong { display:block; color:#252a30; font-size:13px; }
.leading-summary span { display:block; margin-top:3px; }
#profile-shift-summary { color:#656565; font-size:12px; line-height:1.5; }
#profile-shift-summary strong { display:block; color:#252a30; font-size:13px; }
#profile-shift-summary span { display:block; margin:2px 0 5px; font-weight:800; color:#4f555d; }
#profile-shift-summary p { margin:0; }

.comparison-table-wrap { margin-top:16px; border:1px solid #e5e7eb; border-radius:15px; overflow:hidden; }
.comparison-table-title { padding:11px 14px; background:#f8f9fa; border-bottom:1px solid #e5e7eb; font-size:12px; font-weight:900; color:#3e444c; }
.score-comparison-table { display:grid; }
.score-table-row {
  display:grid; grid-template-columns:1.55fr .7fr .7fr .7fr; align-items:center;
  min-height:46px; padding:7px 14px; border-bottom:1px solid #eceef0;
  color:#656565; font-size:11px;
}
.score-table-row:last-child { border-bottom:0; }
.score-table-head { min-height:36px; background:#fcfcfd; color:#656565; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.score-table-style { display:flex; align-items:center; gap:7px; color:#30353b; }
.score-table-style .inline-face-svg { width:25px !important; height:25px !important; }
.score-table-style small { display:block; color:#7a8088; font-size:9px; margin-left:2px; }
.delta-plus { color:#b54708; font-weight:850; }
.delta-minus { color:#027a48; font-weight:850; }
.delta-flat { color:#7a8088; font-weight:750; }

.report-page-combination .combination-results { grid-template-columns:1fr 1fr !important; gap:16px; }
.report-page-combination .combination-result-card { min-height:300px; padding:20px; }
.report-page-combination .combination-result-card h3 { font-size:21px; }
.report-page-combination .combination-result-card p { font-size:12px; line-height:1.55; }
.report-page-combination .combination-meaning { font-size:11px; line-height:1.55; }
.combination-explainer {
  margin-top:16px; padding:17px 19px; border:1px solid #e5e7eb; border-radius:15px; background:#fafafa;
}
.combination-explainer h3 { margin:0 0 6px; font-size:16px; color:#30353b; }
.combination-explainer p { margin:0; color:#656565; font-size:12px; line-height:1.55; }

.map-legend { display:flex; gap:10px; margin:-4px 0 14px; }
.map-legend span { padding:7px 10px; border:1px solid #e5e7eb; border-radius:999px; color:#656565; font-size:10px; background:#fff; }
.report-page-map .behavior-group-map {
  grid-template-columns:1fr 1fr !important; gap:14px !important;
}
.report-page-map .group-family { padding:13px !important; }
.report-page-map .group-family-title { font-size:10px !important; margin-bottom:8px; }
.report-page-map .group-family-list { gap:7px; }
.report-page-map .group-map-item {
  min-height:62px !important; padding:8px !important; display:grid !important;
  grid-template-columns:64px 1fr !important; grid-template-rows:auto auto; align-items:center;
}
.report-page-map .group-map-faces {
  width:60px !important; min-height:34px; margin:0 !important; grid-row:1 / span 2;
  box-sizing:border-box; justify-content:center;
}
.report-page-map .group-map-faces .group-face-pair .animal-face-svg { width:29px; height:29px; }
.report-page-map .group-map-faces .group-face-pair:not(.single) .animal-face-svg + .animal-face-svg { margin-left:-8px; }
.report-page-map .group-map-name { font-size:10.5px !important; line-height:1.25; align-self:end; }
.report-page-map .group-map-badge { grid-column:2 !important; margin-top:3px; font-size:8px !important; align-self:start; }
.report-page-map .group-map-item:not(.active-natural):not(.active-stress) {
  opacity:.58;
  filter:saturate(.5);
}
.report-page-map .group-map-item.active-natural,
.report-page-map .group-map-item.active-stress {
  opacity:1;
  filter:none;
  border-width:2px !important;
  transform:scale(1.025);
}
.report-page-map .group-map-item.active-natural {
  background:linear-gradient(135deg,#c81f2b,#c81f2b) !important;
  border-color:#656565 !important;
  box-shadow:0 7px 17px rgba(200,31,43,.32),0 0 0 2px rgba(200,31,43,.18) !important;
}
.report-page-map .group-map-item.active-stress {
  background:linear-gradient(135deg,#bd3443,#e36670) !important;
  border-color:#a92a37 !important;
  box-shadow:0 7px 17px rgba(214,75,85,.32),0 0 0 2px rgba(214,75,85,.18) !important;
}
.report-page-map .group-map-item.active-both {
  background:linear-gradient(135deg,#c81f2b 0%,#c81f2b 46%,#d64b55 54%,#d64b55 100%) !important;
  border-color:#fff !important;
  box-shadow:0 7px 17px rgba(64,66,119,.35),0 0 0 2px rgba(78,72,126,.22) !important;
}
.report-page-map .group-map-item.active-natural .group-map-name,
.report-page-map .group-map-item.active-stress .group-map-name {
  color:#fff !important;
  font-weight:950;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.report-page-map .group-map-item.active-natural .group-map-faces,
.report-page-map .group-map-item.active-stress .group-map-faces {
  padding:2px 4px;
  border-radius:8px;
  background:rgba(255,255,255,.94);
}
.report-page-map .group-map-item.active-natural .group-map-badge,
.report-page-map .group-map-item.active-stress .group-map-badge {
  padding:2px 6px;
  border-radius:999px;
  background:#fff;
  color:#656565 !important;
  font-weight:950;
}
.map-note { margin-top:14px; }

.report-page-application .application-grid { grid-template-columns:1fr 1fr !important; gap:14px; margin-bottom:14px; }
.report-page-application .application-card { padding:19px; min-height:212px; }
.report-page-application .application-card h3 { font-size:18px; margin-bottom:13px; }
.report-page-application .insight-item { font-size:11.5px; line-height:1.48; }
.report-page-application .clean-callout { font-size:11.5px; line-height:1.58; }
.practical-reflection { margin-top:4px; padding:17px; border:1px solid #e5e7eb; border-radius:15px; background:#fafafa; }
.reflection-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px; }
.reflection-grid > div { padding:12px; background:#fff; border:1px solid #e7e8ea; border-radius:11px; }
.reflection-grid strong { display:block; color:#3b4047; font-size:11px; line-height:1.4; }
.reflection-grid i { display:block; height:21px; border-bottom:1px solid #c7cbd0; }

.report-page-development .role-guidance-panel { padding:21px; margin-bottom:18px; }
.report-page-development .role-guidance-panel h3 { font-size:21px; }
.report-page-development .report-role-box { font-size:12.5px; line-height:1.65; }
.report-page-development .development-plan { padding:18px; margin-bottom:18px; }
.report-page-development .development-plan-grid { grid-template-columns:1fr; gap:11px; }
.report-page-development .development-plan-grid > div { padding:13px 14px; min-height:90px; }
.report-page-development .development-plan-grid strong { font-size:13px; }
.report-page-development .development-plan-grid span { font-size:10.5px; }
.report-page-development .development-plan-grid i { height:24px; }
.report-page-development .quality-footer-block { display:block; padding:14px 0 0; }
.report-page-development .quality-heading { margin-bottom:8px; }
.report-page-development .compact-quality-grid { grid-template-columns:repeat(3,1fr); gap:9px; }
.report-page-development .compact-quality-grid .quality-item { padding:11px; }
.report-page-development .compact-quality-grid .quality-value { font-size:18px; }
.report-page-development .compact-quality-grid .quality-label { font-size:9px; }

/* On-screen: preserve the report-page metaphor without clipping. */
@media (max-width: 860px) {
  .style-explain-grid,
  .profile-reading-grid,
  .report-page-combination .combination-results,
  .report-page-map .behavior-group-map,
  .report-page-application .application-grid,
  .reflection-grid {
    grid-template-columns:1fr !important;
  }
  .report-page-distribution .report-score-grid { grid-template-columns:1fr !important; }
  .score-table-row { grid-template-columns:1.25fr .65fr .65fr .65fr; padding-inline:9px; }
  .score-table-style small { display:none; }
}

/* Print is authoritative. Do NOT let screen max-width media rules collapse columns. */
@media print {
  @page { size:A4 portrait; margin:0; }
  html, body { width:210mm !important; background:#fff !important; }
  .report-page {
    box-sizing:border-box !important;
    width:210mm !important;
    height:297mm !important;
    min-height:297mm !important;
    max-height:297mm !important;
    padding:10mm 12mm 13mm !important;
    overflow:hidden !important;
    break-after:page !important;
    page-break-after:always !important;
  }
  .report-page:last-child { break-after:auto !important; page-break-after:auto !important; }
  .report-page-header { height:13mm !important; }
  .report-cover-header { height:16mm !important; }
  .report-page-footer { left:12mm !important; right:12mm !important; bottom:5.5mm !important; }

  .page-title-block { padding:4.5mm 0 3.2mm !important; }
  .page-title-block h2 { font-size:19pt !important; margin-bottom:2mm !important; }
  .page-title-block p { font-size:9.5pt !important; line-height:1.45 !important; }

  /* Page 1 */
  .cover-identity { padding:5mm 0 3.5mm !important; }
  .cover-main-grid { grid-template-columns:1fr !important; gap:4mm !important; }
  .cover-chart-panel { padding:4mm !important; }
  .cover-radar { min-height:102mm !important; }
  .cover-radar .radar { width:102mm !important; }
  .cover-results-stack { grid-template-columns:1fr 1fr !important; gap:4mm !important; }
  .outcome-card { padding:3.6mm !important; }
  .outcome-icon { width:17mm !important; height:17mm !important; margin-bottom:2.4mm !important; }
  .outcome-name { font-size:12.5pt !important; }
  .outcome-desc { font-size:8.6pt !important; line-height:1.4 !important; }
  .cover-summary-box { margin-top:3.5mm !important; padding:3.5mm !important; }
  .cover-summary-box .summary-text { font-size:9pt !important; }

  /* Page 2 */
  .report-page-foundation .style-explain-grid { grid-template-columns:1fr 1fr !important; gap:3mm !important; }
  .report-page-foundation .style-guide-card {
    min-height:49mm !important; padding:3.6mm !important; gap:2.5mm !important; grid-template-columns:17mm 1fr !important;
  }
  .report-page-foundation .style-guide-icon { width:17mm !important; height:17mm !important; }
  .report-page-foundation .style-guide-name { font-size:13pt !important; }
  .report-page-foundation .style-guide-sub { font-size:9.5pt !important; }
  .report-page-foundation .style-guide-summary { font-size:8.2pt !important; }
  .report-page-foundation .style-keywords span { font-size:7.2pt !important; padding:1mm 1.4mm !important; }
  .report-page-foundation .style-guide-points { gap:2mm !important; }
  .report-page-foundation .style-point span { font-size:7.3pt !important; }
  .report-page-foundation .report-note-box { margin-top:3mm !important; padding:3mm !important; font-size:8.2pt !important; }

  /* Page 3 */
  .report-page-distribution .report-score-grid { grid-template-columns:1fr 1fr !important; gap:3mm !important; }
  .report-page-distribution .report-score-grid .score-box { min-height:36mm !important; padding:3.5mm !important; }
  .profile-reading-grid { grid-template-columns:1fr 1fr !important; gap:3mm !important; margin-top:3mm !important; }
  .profile-reading-card { min-height:31mm !important; padding:3.5mm !important; }
  .comparison-table-wrap { margin-top:3mm !important; }
  .score-table-row { min-height:9mm !important; padding:1.3mm 3mm !important; grid-template-columns:1.55fr .7fr .7fr .7fr !important; }
  .score-table-style small { display:inline !important; }

  /* Page 4 */
  .report-page-combination .combination-rule { grid-template-columns:1fr auto 1fr !important; gap:3mm !important; margin-bottom:3mm !important; }
  .report-page-combination .combination-results { grid-template-columns:1fr 1fr !important; gap:3.5mm !important; }
  .report-page-combination .combination-result-card { min-height:74mm !important; padding:4mm !important; }
  .report-page-combination .combination-icon { width:16mm !important; height:16mm !important; }
  .report-page-combination .combination-result-card h3 { font-size:13.5pt !important; }
  .report-page-combination .context-shift-summary { margin-top:3mm !important; padding:3mm !important; font-size:8.5pt !important; }
  .combination-explainer { margin-top:3mm !important; padding:3.5mm !important; }
  .combination-explainer p { font-size:8.5pt !important; }

  /* Page 5 */
  .report-page-map .behavior-group-map { grid-template-columns:1fr 1fr !important; gap:3mm !important; }
  .report-page-map .group-family { padding:3mm !important; }
  .report-page-map .group-family-list { gap:1.5mm !important; }
  .report-page-map .group-map-item {
    min-height:13.5mm !important; padding:1.8mm !important;
    display:grid !important; grid-template-columns:15mm 1fr !important; grid-template-rows:auto auto !important;
  }
  .report-page-map .group-map-faces { width:14mm !important; min-height:8mm !important; grid-row:1 / span 2 !important; margin:0 !important; box-sizing:border-box !important; justify-content:center !important; }
  .report-page-map .group-map-faces .group-face-pair .animal-face-svg { width:7mm !important; height:7mm !important; }
  .report-page-map .group-map-name { font-size:7.8pt !important; }
  .report-page-map .group-map-badge { grid-column:2 !important; font-size:6.2pt !important; }
  .map-legend { margin-bottom:2.5mm !important; }
  .map-note { margin-top:3mm !important; padding:3mm !important; font-size:8pt !important; }

  /* Page 6 */
  .report-page-application .application-grid { grid-template-columns:1fr 1fr !important; gap:3.5mm !important; margin-bottom:3.5mm !important; }
  .report-page-application .application-card { min-height:55mm !important; padding:4mm !important; }
  .report-page-application .insight-item { font-size:8.5pt !important; line-height:1.4 !important; }
  .report-page-application .clean-callout { font-size:8.5pt !important; line-height:1.5 !important; }
  .practical-reflection { margin-top:2mm !important; padding:3.5mm !important; }
  .reflection-grid { grid-template-columns:1fr 1fr !important; gap:3mm !important; }

  /* Page 7 */
  .report-page-development .role-guidance-panel { padding:5mm !important; margin-bottom:4mm !important; }
  .report-page-development .report-role-box { font-size:9pt !important; }
  .report-page-development .development-plan { padding:4mm !important; margin-bottom:4mm !important; }
  .report-page-development .development-plan-grid { grid-template-columns:1fr !important; gap:2.5mm !important; }
  .report-page-development .development-plan-grid > div { min-height:24mm !important; padding:3mm !important; }
  .report-page-development .development-plan-grid i { height:6mm !important; }
  .report-page-development .compact-quality-grid { grid-template-columns:repeat(3,1fr) !important; }
}



/* =========================================================
   v1.9 — Homepage title, mobile animal layout & instruction screen
   ========================================================= */
.assessment-product-title {
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.18;
}
.assessment-product-title strong {
  display:block;
  color:#111111;
  font-size:15px;
  font-weight:850;
}
.assessment-product-title small {
  display:block;
  margin-top:3px;
  color:#656565;
  font-size:11px;
  font-weight:600;
  font-style:italic;
}
.assessment-name-block { margin:0 0 18px; }
.assessment-name-block strong {
  display:block;
  color:var(--brand);
  font-size:17px;
  font-weight:900;
  letter-spacing:.01em;
}
.assessment-name-block em {
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
  font-weight:600;
}

.instruction-screen-wrap { max-width:900px; margin:0 auto; }
.instruction-page-card {
  padding:46px 50px;
  border:1px solid var(--line);
  border-radius:26px;
  background:#fff;
  box-shadow:var(--shadow);
}
.instruction-kicker {
  color:var(--brand);
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
}
.instruction-page-card h2 {
  margin:8px 0 12px;
  font-size:clamp(34px,5vw,52px);
  line-height:1.06;
  letter-spacing:-.04em;
}
.instruction-lead {
  max-width:760px;
  margin:0;
  color:#656565;
  font-size:19px;
  line-height:1.7;
}
.instruction-scale-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:30px 0;
}
.instruction-scale-item {
  min-height:112px;
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  border:1px solid #dfe4ec;
  border-radius:18px;
  background:#fafbfc;
}
.instruction-scale-item b {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  margin-bottom:9px;
  border-radius:13px;
  background:var(--brand);
  color:#fff;
  font-size:22px;
}
.instruction-scale-item span { color:#656565; font-size:14px; font-weight:750; line-height:1.35; }
.instruction-rules { display:grid; gap:12px; }
.instruction-rule {
  display:grid;
  grid-template-columns:52px 1fr;
  gap:16px;
  align-items:flex-start;
  padding:17px 18px;
  border:1px solid #e4e7ec;
  border-radius:16px;
}
.instruction-rule > span {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--brand-soft);
  color:var(--brand-dark);
  font-size:12px;
  font-weight:950;
}
.instruction-rule strong { display:block; font-size:17px; }
.instruction-rule p { margin:5px 0 0; color:var(--muted); font-size:15px; line-height:1.55; }
.instruction-context-box {
  margin-top:22px;
  padding:17px 19px;
  border-radius:16px;
  background:#f7f9ff;
  border:1px solid #fff3f4;
}
.instruction-context-box span { display:block; color:var(--muted); font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.instruction-context-box strong { display:block; margin-top:5px; font-size:19px; color:#656565; }
.instruction-context-box small { display:block; margin-top:5px; color:var(--brand); font-size:13px; font-weight:800; }
.instruction-actions {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.instruction-actions .btn-primary { min-width:290px; }

@media (max-width:620px) {
  .animal-mini-strip {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .animal-mini {
    width:100%;
    justify-content:center;
    min-height:48px;
  }
  .instruction-page-card { padding:28px 20px; border-radius:20px; }
  .instruction-page-card h2 { font-size:36px; }
  .instruction-lead { font-size:17px; line-height:1.6; }
  .instruction-scale-grid { grid-template-columns:repeat(2,1fr); gap:10px; margin:24px 0; }
  .instruction-scale-item { min-height:104px; padding:13px 10px; }
  .instruction-rule { grid-template-columns:44px 1fr; gap:12px; padding:15px; }
  .instruction-rule > span { width:38px; height:38px; }
  .instruction-actions { flex-direction:column-reverse; }
  .instruction-actions .btn { width:100%; min-width:0; }
}


/* v2.0 — Custom Language Dropdown */
.topbar-language { 
  margin-left: auto; 
  margin-right: 16px;
  position: relative;
  display: flex; 
  align-items: center; 
}
.language-wrapper {
  position: relative; width: 38px; height: 38px; 
  display: flex; align-items: center; justify-content: center; 
  border-radius: 50%; background: #fff; border: 1px solid #fff3f4; 
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.language-wrapper:hover { 
  border-color: var(--brand); 
  box-shadow: 0 0 0 3px var(--brand-soft); 
}
.lang-icon { 
  width: 20px; height: 20px; 
  color: var(--muted);
  pointer-events: none; 
  transition: color 0.2s;
}
.language-wrapper:hover .lang-icon {
  color: var(--brand); 
}
.lang-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(22,32,51,.08);
  min-width: 140px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 6px;
}
.topbar-language:hover .lang-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-dropdown-item {
  padding: 10px 14px;
  font-size: 13px; 
  color: var(--muted); 
  font-weight: 750;
  text-align: right; 
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lang-dropdown-item:hover {
  background: var(--surface-2);
  color: var(--brand-dark);
}
.language-select-hidden {
  display: none;
}
html[lang="km"] body { font-family: "Noto Sans Khmer", "Khmer OS System", Inter, ui-sans-serif, system-ui, sans-serif; }
html[lang="km"] .report-page, html[lang="km"] .option-text { line-height:1.65; }
@media (max-width:620px) { .language-label { display:none; } .language-select { max-width:132px; }  .topbar-product-name { display:none; } }


/* v2.1 — direct PDF export (mobile-friendly, no printer required) */
.pdf-download-btn { min-width:190px; }
.print-report-btn { background:#fff; color:var(--text); border:1px solid var(--line); }
.pdf-status { min-height:20px; flex:1 1 240px; color:var(--muted); font-size:12px; line-height:1.45; }
.pdf-status.is-error { color:var(--danger); font-weight:750; }
.pdf-status.is-success { color:#027a48; font-weight:750; }
.pdf-working { opacity:.72; pointer-events:none; }
@media (max-width:620px) {
  .report-actions { align-items:stretch; }
  .report-actions > .btn { width:100%; }
  .pdf-status { order:5; width:100%; flex-basis:100%; }
  .technical-export { margin-left:0; }
}



/* =========================================================
   v1.10 — Balanced PDF report: hero radar + adaptive results
   ========================================================= */
/* Page 1: give the chart visual priority; one result spans full width. */
.report-page-cover .cover-radar { min-height:430px; }
.report-page-cover .cover-radar .radar { width:min(100%, 470px); }
.report-page-cover .cover-results-stack.single-result { grid-template-columns:1fr !important; }
.report-page-cover .outcome-main {
  display:grid !important;
  grid-template-columns:72px 1fr !important;
  gap:14px !important;
  align-items:center !important;
}
.report-page-cover .outcome-icon { margin:0 !important; }
.report-page-cover .outcome-desc { margin-top:10px; }

/* Page 2 now carries the quick personal reading plus the four-style foundation. */
.report-page-foundation .cover-summary-box {
  margin:0 0 18px;
  padding:18px 20px;
  border-left:5px solid var(--empower-red);
}
.report-page-foundation .style-guide-card { min-height:218px; }

/* Page 3 uses the full page: larger 2x2 score blocks and more breathing room. */
.report-page-distribution .report-score-grid {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:13px !important;
}
.report-page-distribution .report-score-grid .score-box {
  min-height:150px !important;
  padding:16px !important;
}
.report-page-distribution .profile-reading-grid { margin-top:18px; }
.report-page-distribution .profile-reading-card { min-height:150px; }
.report-page-distribution .comparison-table-wrap { margin-top:18px; }

@media (max-width:860px) {
  .report-page-cover .cover-radar { min-height:360px; }
  .report-page-cover .cover-radar .radar { width:min(100%, 420px); }
  .report-page-cover .cover-results-stack { grid-template-columns:1fr !important; }
  .report-page-distribution .report-score-grid { grid-template-columns:1fr 1fr !important; }
}
@media (max-width:520px) {
  .report-page-cover .cover-radar { min-height:320px; }
  .report-page-cover .cover-radar .radar { width:min(100%, 360px); }
  .report-page-distribution .report-score-grid { grid-template-columns:1fr !important; }
}

@media print {
  /* Page 1: deliberately sparse, visual and readable on a phone. */
  .report-page-cover .cover-identity { padding:4mm 0 2.5mm !important; }
  .report-page-cover .cover-name { font-size:25pt !important; }
  .report-page-cover .cover-main-grid { grid-template-columns:1fr !important; gap:3mm !important; }
  .report-page-cover .cover-chart-panel { padding:3.5mm 4mm 3mm !important; }
  .report-page-cover .cover-chart-panel .section-kicker { font-size:8pt !important; }
  .report-page-cover .report-section-heading { font-size:16pt !important; margin-top:1mm !important; }
  .report-page-cover .cover-radar { min-height:145mm !important; }
  .report-page-cover .cover-radar .radar { width:145mm !important; max-width:145mm !important; }
  .report-page-cover .chart-legend-strong { gap:2mm !important; }
  .report-page-cover .legend-item { padding:1.5mm 2.5mm !important; font-size:8pt !important; }
  .report-page-cover .chart-note { margin-top:1.5mm !important; font-size:7.5pt !important; }
  .report-page-cover .cover-results-stack { grid-template-columns:1fr 1fr !important; gap:3mm !important; }
  .report-page-cover .cover-results-stack.single-result { grid-template-columns:1fr !important; }
  .report-page-cover .outcome-card { padding:3mm 3.5mm !important; min-height:0 !important; }
  .report-page-cover .outcome-main {
    display:grid !important;
    grid-template-columns:15mm 1fr !important;
    gap:3mm !important;
    align-items:center !important;
    margin-top:2mm !important;
  }
  .report-page-cover .outcome-icon { width:15mm !important; height:15mm !important; margin:0 !important; }
  .report-page-cover .outcome-name { font-size:11.5pt !important; }
  .report-page-cover .outcome-formula { font-size:8pt !important; }
  .report-page-cover .outcome-desc { margin-top:2mm !important; font-size:7.8pt !important; line-height:1.35 !important; }

  /* Page 2: use the space recovered from page 1. */
  .report-page-foundation .page-title-block { padding-bottom:2.5mm !important; }
  .report-page-foundation .cover-summary-box {
    margin:0 0 3.5mm !important;
    padding:3.5mm 4mm !important;
    min-height:24mm !important;
  }
  .report-page-foundation .cover-summary-title { font-size:8pt !important; }
  .report-page-foundation .cover-summary-box .summary-text { font-size:9.2pt !important; line-height:1.5 !important; }
  .report-page-foundation .style-explain-grid { gap:3.5mm !important; }
  .report-page-foundation .style-guide-card {
    min-height:84mm !important;
    padding:4mm !important;
    gap:3mm !important;
  }
  .report-page-foundation .style-guide-icon { width:18mm !important; height:18mm !important; }
  .report-page-foundation .style-guide-name { font-size:14pt !important; }
  .report-page-foundation .style-guide-sub { font-size:9.5pt !important; }
  .report-page-foundation .style-guide-summary { font-size:8.4pt !important; line-height:1.45 !important; }
  .report-page-foundation .style-keywords span { font-size:7.4pt !important; }
  .report-page-foundation .style-point span { font-size:7.7pt !important; }
  .report-page-foundation .report-note-box { margin-top:3.5mm !important; }

  /* Page 3: 2x2 distribution blocks are easier to scan and fill the A4 page evenly. */
  .report-page-distribution .report-score-grid {
    grid-template-columns:1fr 1fr !important;
    gap:3.5mm !important;
  }
  .report-page-distribution .report-score-grid .score-box {
    min-height:44mm !important;
    padding:3.5mm !important;
  }
  .report-page-distribution .report-score-grid .score-number { font-size:20pt !important; margin:2mm 0 1.5mm !important; }
  .report-page-distribution .report-score-grid .score-name { font-size:8pt !important; }
  .report-page-distribution .report-score-grid .delta { font-size:8pt !important; margin-top:2mm !important; }
  .report-page-distribution .profile-reading-grid { margin-top:4mm !important; gap:3.5mm !important; }
  .report-page-distribution .profile-reading-card { min-height:50mm !important; padding:4mm !important; }
  .report-page-distribution .comparison-table-wrap { margin-top:4mm !important; }
  .report-page-distribution .score-table-row { min-height:11mm !important; }
}

.score-comparison-table.single-context .score-table-row {
  grid-template-columns:minmax(0,1.55fr) minmax(110px,.7fr) !important;
}
.score-comparison-table.single-context .score-table-row > span:last-child {
  text-align:right;
  font-size:13px;
}
@media print {
  .score-comparison-table.single-context .score-table-row {
    grid-template-columns:1.7fr .6fr !important;
  }
  .score-comparison-table.single-context .score-table-row > span:last-child {
    font-size:9.5pt !important;
  }
}


/* =========================================================
   v1.11 — Radar emphasis + adaptive six-page compact report
   ========================================================= */
/* Radar: reduce internal whitespace and make data points unmistakable. */
.report-page-cover .cover-chart-panel { overflow:hidden; }
.report-page-cover .cover-radar { min-height:420px; margin:-10px 0 -8px; }
.report-page-cover .cover-radar .radar { width:min(100%, 520px); }
.radar .natural-point { fill:#fff; stroke:var(--natural-color, #c81f2b); stroke-width:2; }
.radar .stress-point { fill:#fff; stroke:var(--stress-color, #d64b55); stroke-width:1.8; }

/* Result card below radar: dedicated icon column, safer padding, smaller title. */
.report-page-cover .outcome-card { padding:18px 22px; }
.report-page-cover .outcome-topline { font-size:9px; margin-bottom:2px; }
.report-page-cover .outcome-main {
  display:grid !important;
  grid-template-columns:92px minmax(0,1fr) !important;
  gap:22px !important;
  align-items:start !important;
  margin-top:8px !important;
}
.report-page-cover .outcome-icon { width:82px; height:82px; margin:0 !important; }
.report-page-cover .outcome-icon .group-face-pair .animal-face-svg { width:54px !important; height:54px !important; }
.report-page-cover .outcome-icon .group-face-pair:not(.single) .animal-face-svg + .animal-face-svg { margin-left:-12px !important; }
.report-page-cover .outcome-name { font-size:18px !important; line-height:1.15 !important; margin:0 !important; }
.report-page-cover .outcome-formula { font-size:12px !important; margin-top:4px !important; }
.report-page-cover .outcome-desc { margin-top:8px !important; }

/* Quick/basic: page 3 absorbs the useful combination result; comparison table disappears. */
.compact-combination-section { margin-top:18px; }
.compact-combination-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:10px; }
.compact-combination-heading h3 { margin:3px 0 0; font-size:20px; }
.compact-combination-card {
  min-height:0 !important;
  display:grid;
  grid-template-columns:92px minmax(0,1fr) minmax(0,1.35fr);
  grid-template-areas:"context context context" "icon title desc" "icon meaning meaning";
  gap:10px 24px;
  align-items:center;
  padding:18px 20px !important;
}
.compact-combination-card .combination-context { grid-area:context; }
.compact-combination-card .combination-result-head { display:contents !important; }
.compact-combination-card .combination-icon { grid-area:icon; width:76px; height:76px; margin:0 !important; overflow:hidden; }
.compact-combination-card .combination-result-head > div:last-child { grid-area:title; align-self:center; min-width:0; padding-left:4px; }
.compact-combination-card > p { grid-area:desc; margin:0 !important; font-size:12px; line-height:1.5; }
.compact-combination-card .combination-meaning { grid-area:meaning; margin-top:0 !important; padding-top:8px; border-top:1px solid #e6e8ec; }

/* The two explanatory blocks below the combination cards are intentionally removed. */
#context-shift-summary, #combination-explainer { display:none !important; }

/* Deep report: let the two core combination cards use the space freed below. */
.report-page-combination .combination-result-card { min-height:355px; }

@media (max-width:860px) {
  .compact-combination-card { grid-template-columns:70px 1fr; grid-template-areas:"context context" "icon title" "desc desc" "meaning meaning"; }
}
@media (max-width:520px) {
  .report-page-cover .outcome-main { grid-template-columns:76px 1fr !important; gap:14px !important; }
  .report-page-cover .outcome-icon { width:68px; height:68px; }
  .compact-combination-card { display:block; }
  .compact-combination-card .combination-icon { margin-bottom:10px !important; }
  .compact-combination-card > p { margin-top:10px !important; }
}

@media print {
  /* Page 1 — actual polygon is enlarged inside the SVG, so the radar fills the card without wasting A4 space. */
  .report-page-cover .cover-chart-panel { padding:2.2mm 3mm 2.2mm !important; }
  .report-page-cover .cover-chart-panel .section-kicker { font-size:7pt !important; }
  .report-page-cover .report-section-heading { font-size:13.5pt !important; margin:0.4mm 0 0 !important; }
  .report-page-cover .cover-radar { min-height:140mm !important; margin:-3mm 0 -4mm !important; }
  .report-page-cover .cover-radar .radar { width:142mm !important; max-width:142mm !important; }
  .report-page-cover .chart-legend-strong { margin-top:-1mm !important; }
  .report-page-cover .chart-note { margin-top:0.8mm !important; }

  .report-page-cover .cover-results-stack { margin-top:-1.5mm !important; }
  .report-page-cover .outcome-card { padding:2.8mm 4mm !important; }
  .report-page-cover .outcome-topline { font-size:6.6pt !important; margin-bottom:0 !important; }
  .report-page-cover .outcome-main {
    grid-template-columns:15mm minmax(0,1fr) !important;
    gap:3mm !important;
    align-items:center !important;
    margin-top:0.8mm !important;
  }
  .report-page-cover .outcome-icon { width:13mm !important; height:13mm !important; }
  .report-page-cover .outcome-icon .group-face-pair .animal-face-svg { width:7.5mm !important; height:7.5mm !important; }
  .report-page-cover .outcome-icon .group-face-pair:not(.single) .animal-face-svg + .animal-face-svg { margin-left:-2mm !important; }
  .report-page-cover .outcome-name { font-size:10.2pt !important; line-height:1.12 !important; }
  .report-page-cover .outcome-formula { font-size:7.4pt !important; margin-top:1mm !important; }
  .report-page-cover .outcome-desc { font-size:7.4pt !important; line-height:1.35 !important; margin-top:1.4mm !important; }

  /* Single-context page 3: no comparison table; use the recovered space for one full-width interpretation card. */
  .report-page-distribution.single-context-report .report-score-grid .score-box { min-height:37mm !important; }
  .report-page-distribution.single-context-report .profile-reading-grid { margin-top:3mm !important; }
  .report-page-distribution.single-context-report .profile-reading-card { min-height:35mm !important; padding:3.5mm !important; }
  .report-page-distribution.single-context-report .compact-combination-section { margin-top:3.5mm !important; }
  .report-page-distribution.single-context-report .compact-combination-heading { margin-bottom:2mm !important; }
  .report-page-distribution.single-context-report .compact-combination-heading h3 { font-size:13pt !important; }
  .report-page-distribution.single-context-report .compact-combination-card {
    min-height:52mm !important;
    grid-template-columns:24mm minmax(0,.9fr) minmax(0,1.35fr) !important;
    gap:2mm 5mm !important;
    padding:4mm !important;
  }
  .report-page-distribution.single-context-report .compact-combination-card .combination-icon { width:20mm !important; height:20mm !important; }
  .report-page-distribution.single-context-report .compact-combination-card h3 { font-size:12pt !important; }
  .report-page-distribution.single-context-report .compact-combination-card > p { font-size:8.3pt !important; line-height:1.45 !important; }
  .report-page-distribution.single-context-report .compact-combination-card .combination-meaning { font-size:8pt !important; line-height:1.45 !important; }

  .report-page-combination .combination-result-card { min-height:88mm !important; }
}


/* =========================================================
   v2.2 — EBSA identity reinforcement + radar label alignment
   ========================================================= */
.ebsa-tool-badge {
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:9px; padding:6px 10px; border-radius:999px;
  background:var(--brand); color:#fff; font-size:12px; font-weight:950;
  letter-spacing:.14em; box-shadow:0 6px 16px rgba(191,53,67,.16);
}
.choice-step-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ebsa-inline-mark {
  display:inline-flex; align-items:center; min-height:20px; padding:3px 7px;
  border-radius:999px; background:var(--brand-soft); color:var(--brand-dark);
  font-size:9px; font-weight:950; letter-spacing:.12em;
}
.intro-footnote { display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap; }
.ebsa-footnote-mark { color:var(--brand); font-size:11px; letter-spacing:.12em; }
.instruction-kicker { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.ebsa-kicker-mark {
  display:inline-flex; align-items:center; padding:4px 7px; border-radius:999px;
  background:var(--brand); color:#fff; font-size:9px; line-height:1; letter-spacing:.12em;
}
.report-eyebrow, .cover-label, .cover-chart-panel .section-kicker {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.report-brand-copy .report-eyebrow { justify-content:flex-end; }
.cover-chart-panel .section-kicker { justify-content:center; }
.ebsa-prefix {
  display:inline-flex; align-items:center; padding:3px 6px; border-radius:999px;
  background:var(--empower-red); color:#fff; font-size:.86em; line-height:1;
  font-weight:950; letter-spacing:.1em;
}
.ebsa-footer-mark { color:var(--empower-red); font-weight:950; letter-spacing:.08em; }
@media print {
  .ebsa-prefix, .ebsa-tool-badge, .ebsa-inline-mark, .ebsa-kicker-mark, .ebsa-footer-mark {
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
}


/* ============ Swiss Create — click-to-rank option UI (thay lưới nút số) ============ */
.option-card { cursor: pointer; user-select: none; position: relative; }
.option-card.picked { border-color: var(--brand); background: #f7f9ff; box-shadow: 0 0 0 3px rgba(200,31,43,.10); }
.rank-badge {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 17px; color: #fff; background: #fff3f4;
  opacity: 0; transform: scale(.7); transition: opacity .15s, transform .15s, background .15s;
  flex: 0 0 auto;
}
.option-card.picked .rank-badge { opacity: 1; transform: scale(1); background: var(--brand); }
.rank-placeholder { font-size: 13px; color: #c81f2b; font-weight: 700; flex: 0 0 auto; }
.option-card.picked .rank-placeholder { display: none; }
@media (max-width: 620px) {
  .option-card { grid-template-columns: 1fr auto !important; }
  .rank-badge { width: 34px; height: 34px; font-size: 15px; }
}

/* ============ Swiss Create — quadrant target chart (kết quả) ============ */
.sc-chart-wrap { max-width: 380px; margin: 0 auto; }
.sc-score-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 12px 0 4px; }
.sc-score-box { border-radius: 10px; padding: 8px 6px; color: #fff; text-align:center; }
.sc-score-box .n { font-size: 10px; font-weight: 800; opacity: .92; text-transform: uppercase; letter-spacing: .03em; }
.sc-score-box .v { font-size: 18px; font-weight: 900; margin-top: 1px; }
.sc-score-delta { font-size: 9.5px; font-weight: 700; margin-top: 2px; opacity: .92; }
@media (max-width: 620px) { .sc-score-grid { grid-template-columns: repeat(2,1fr); } }
.sc-chart-legend { display:flex; justify-content:center; gap:16px; margin-top:6px; flex-wrap:wrap; }
.sc-chart-legend span { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
.sc-legend-swatch { display:inline-block; width:14px; height:14px; border-radius:4px; }
.sc-legend-fill { background:linear-gradient(135deg,#53B987,#E9F8F1); }
.sc-legend-line { display:inline-block; width:14px; height:0; border-top:2px dashed #656565; border-radius:0; background:transparent; }
.trait-panel-compact { padding: 10px 14px 6px; }
.trait-heading-compact { margin:0 0 8px; font-size:14px; font-weight:800; text-align:center; letter-spacing:-.01em; color:#20242b; }
.trait-item { padding:7px 9px; border:1px solid var(--line); border-radius:8px; margin-bottom:5px; }
.trait-item-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:2px; font-size:10.5px; }
.trait-item-head span { color: var(--muted); }
.trait-item p { margin:2px 0 0; font-size:9.5px; line-height:1.32; color: var(--text); }
.trait-item .trait-summary { color: var(--muted); }
.section-kicker .ebsa-prefix, .report-eyebrow .ebsa-prefix, .cover-label .ebsa-prefix { margin-right: 7px; }

/* ============ Swiss Create — 2-mode selector (Cơ bản / Chuyên sâu) ============ */
.mode-grid.two-col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .mode-grid.two-col { grid-template-columns: 1fr; } }
.mode-points { list-style:none; padding:0; margin:12px 0 0; }
.mode-points li { font-size:13.5px; color:var(--muted); padding-left:18px; position:relative; margin-bottom:6px; }
.mode-points li::before { content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:900; }


/* ============ V2.4 Step 1 — Minimal B2B-first conversion UI ============ */
body{background:#fff;color:#171717}
.topbar{height:84px;background:#fff;border-bottom:1px solid #ededed;backdrop-filter:none;padding:0 34px}

main{width:100%;max-width:none;padding:0 0 72px}
#screen-intro{width:100%}
.v24-split-hero{min-height:calc(100vh - 84px);display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #ececec;background:#fff}
.v24-hero-side{position:relative;display:flex;align-items:center;justify-content:center;padding:72px 7vw;overflow:hidden}
.v24-personal{border-right:1px solid #ececec;background:#fff}
.v24-business{background:linear-gradient(180deg,#fff 0%,#fff 68%,#faf7f7 100%)}
.v24-business::after{content:"";position:absolute;top:0;right:0;width:7px;height:100%;background:#c81f2b}
.v24-hero-inner{max-width:520px;width:100%;position:relative;z-index:1}
.v24-eyebrow{font-size:12px;font-weight:850;letter-spacing:.16em;color:#7a7a7a;margin-bottom:18px}
.v24-business .v24-eyebrow{color:#a51721}
.v24-split-hero h1,.v24-split-hero h2{margin:0;font-size:clamp(44px,5vw,72px);line-height:1.02;letter-spacing:-.045em;font-weight:850;color:#151515}
.v24-split-hero p{max-width:430px;margin:24px 0 32px;font-size:18px;line-height:1.55;color:#666}
.v24-hero-cta{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 28px;border-radius:12px;font-size:17px;font-weight:850;text-decoration:none;transition:.18s ease}
.v24-hero-cta:hover{text-decoration:none;transform:translateY(-1px)}
.v24-personal-cta{background:#f3f3f3;color:#202020;border:1px solid #dedede}
.v24-personal-cta:hover{background:#e9e9e9}
.v24-business-cta{background:#c81f2b;color:#fff;border:1px solid #c81f2b;box-shadow:0 14px 34px rgba(200,31,43,.16)}
.v24-business-cta:hover{background:#a51721;color:#fff;box-shadow:0 18px 38px rgba(200,31,43,.22)}
.v24-premium{position:absolute;top:28px;right:34px;font-size:11px;letter-spacing:.14em;font-weight:850;color:#a51721}
.v24-quality{margin-top:22px;max-width:410px;font-size:13px;line-height:1.5;color:#8b8b8b}
#assessment-setup{width:min(1080px,calc(100% - 32px));margin:0 auto;padding-top:64px;scroll-margin-top:100px}
.v24-legacy-intro-copy{display:none!important}
.choice-shell,.profile-card{box-shadow:none;border-color:#e7e7e7;background:#fff}
.choice-step{color:#a51721}
.mode-card.selected{border-color:#c81f2b;background:#fffafa;box-shadow:0 0 0 3px rgba(200,31,43,.07)}
.mode-card:hover{border-color:#d6a7aa;box-shadow:none}
.mode-card.selected .mode-cta,.role-chip.selected,.role-category-tab.selected{background:#c81f2b!important;border-color:#c81f2b!important;color:#fff!important}
.btn-primary{background:#c81f2b;box-shadow:none}.btn-primary:hover{background:#a51721}
.field input:focus,.field select:focus{border-color:#c81f2b;box-shadow:0 0 0 4px rgba(200,31,43,.08)}
.role-chip:hover,.role-category-tab:hover{border-color:#c81f2b;color:#a51721}
.intro-footnote{color:#999}
@media(max-width:850px){
 .topbar{height:72px;padding:0 16px}
 .v24-split-hero{min-height:auto;grid-template-columns:1fr}
 .v24-hero-side{min-height:calc((100vh - 72px)/2);padding:46px 24px}
 .v24-personal{border-right:0;border-bottom:1px solid #ececec}
 .v24-business::after{width:100%;height:5px;top:auto;bottom:0}
 .v24-split-hero h1,.v24-split-hero h2{font-size:42px}
 .v24-split-hero p{font-size:16px;margin:18px 0 24px}
 .v24-hero-cta{width:100%;min-height:54px}
 .v24-premium{top:18px;right:20px}
 #assessment-setup{padding-top:36px}
}

/* Homepage styles — preserved source block 2. */
/* V4.0.3 — Trang chủ: lựa chọn rõ ràng, hai bước cân đối, gợi ý vai trò luôn mở */
.mode-card{position:relative}
.mode-card.selected{border:2px solid #c81f2b!important;background:linear-gradient(180deg,#fff7f7 0%,#fff 100%)!important;box-shadow:0 0 0 4px rgba(200,31,43,.10),0 14px 30px rgba(200,31,43,.10)!important}
.mode-selected-tag{display:none;position:absolute;top:10px;left:12px;padding:4px 8px;border-radius:999px;background:#c81f2b;color:#fff;font-size:9px;font-weight:900;letter-spacing:.06em;line-height:1}
.mode-card.selected .mode-selected-tag{display:inline-flex}
.mode-card.selected .mode-cta{display:inline-flex;align-items:center;width:max-content;margin-top:auto;padding:6px 10px!important;border-radius:999px;background:#c81f2b!important;color:#fff!important}
.mode-card.selected .mode-title{color:#a51721}
.role-input-help{margin:3px 0 7px;font-size:10.5px;line-height:1.4;color:#777}.role-input-help strong{color:#333}
.role-helper{margin-top:8px;border:1px solid #e3e3e3;border-radius:11px;background:#fafafa;padding:9px 10px}
.role-helper-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:7px}
.role-helper-heading strong{display:block;font-size:11.5px;color:#333}.role-helper-heading span{display:block;margin-top:2px;font-size:9.5px;color:#888}.role-helper-heading small{font-size:9.5px;color:#a51721;font-weight:800;white-space:nowrap}
.role-helper .role-category-tabs{margin-top:0;gap:5px}.role-helper .role-category-tab{padding:6px 8px;font-size:10px;border-radius:8px}.role-helper .role-suggestions{margin-top:7px;gap:5px}.role-helper .role-suggestions-label{font-size:10px;margin-bottom:1px}.role-helper .role-chip{padding:5px 7px;font-size:9.7px}.role-helper .field-note{margin-top:7px;font-size:9.5px;line-height:1.35;color:#888}
@media(min-width:900px){
 #assessment-setup{width:min(1180px,calc(100% - 40px));padding-top:28px;padding-bottom:28px}
 #assessment-setup{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
 #assessment-setup .choice-shell,#assessment-setup .profile-card{padding:16px 18px;border-radius:16px;height:100%}
 #assessment-setup .choice-shell{display:flex;flex-direction:column}
 #assessment-setup .choice-heading,#assessment-setup .profile-heading{margin-bottom:10px}
 #assessment-setup .choice-heading h2,#assessment-setup .profile-heading h2{font-size:19px}
 #assessment-setup .choice-hint{font-size:11px}
 #assessment-setup .mode-grid.two-col{grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:8px;flex:1}
 #assessment-setup .mode-card{min-height:116px;padding:13px 15px}
 #assessment-setup .mode-card.recommended{padding-top:18px}
 #assessment-setup .mode-card.selected{padding-top:27px}
 #assessment-setup .mode-icon{display:none}
 #assessment-setup .mode-title{font-size:17px}
 #assessment-setup .mode-time{font-size:12px;margin-top:1px}
 #assessment-setup .mode-desc{font-size:12px;line-height:1.38;margin-top:6px}
 #assessment-setup .mode-cta{padding-top:6px;font-size:11px}
 #assessment-setup .recommended-tag{top:-7px;right:10px;font-size:9px;padding:4px 7px}
 #assessment-setup .mode-summary{margin-top:8px;padding:8px 10px}
 #assessment-setup .profile-card{display:flex;flex-direction:column}
 #assessment-setup .profile-fields{grid-template-columns:1fr 1fr;gap:8px 10px}
 #assessment-setup .profile-fields .field:last-child{grid-column:1/-1}
 #assessment-setup .field label{font-size:11px}
 #assessment-setup .field input,#assessment-setup .field select{padding:8px 9px;margin-top:3px;font-size:12px}
 #assessment-setup .start-row{margin-top:auto;padding-top:10px}
 #assessment-setup .start-btn{min-width:210px;padding:10px 16px;font-size:13px}
 #assessment-setup .intro-footnote{grid-column:1/-1;font-size:10.5px;padding-top:0}
}
@media(max-width:899px){.role-helper{padding:12px}.role-helper-heading{flex-direction:column;gap:3px}.role-helper .role-category-tab{font-size:12px;padding:8px 10px}.role-helper .role-chip{font-size:12px;padding:7px 10px}.role-helper .role-suggestions-label{font-size:12px}.role-input-help{font-size:12px}}
@media(min-width:900px) and (min-height:700px){#assessment-setup{min-height:calc(100vh - 150px)}}


/* =========================================================
   V6.1 - One-page A4 PDF / A4+Letter print-safe report
   Common safe area: 184 mm x 254 mm.  The A4 page keeps
   21.5 mm top/bottom and 13 mm side margins so content also
   remains inside a 0.5 inch safe zone when printed on Letter.
   ========================================================= */
.report-client-brand{display:none;align-items:center;justify-content:flex-end;gap:7px;min-width:0;margin-left:auto}
.report-client-brand img{display:block;max-width:150px;max-height:46px;width:auto;height:auto;object-fit:contain}
.report-client-brand.is-square img{max-width:46px;max-height:46px}
.report-client-brand span{max-width:135px;font-size:10px;line-height:1.2;font-weight:750;color:#55575b;text-align:right}
@media print {
  @page { size:A4 portrait; margin:0 !important; }
  html,body{width:210mm !important;min-width:210mm !important;margin:0 !important;padding:0 !important;background:#fff !important;}
  body{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;}
  .topbar,#screen-intro,#screen-instructions,#screen-break,#screen-assessment,.report-actions,.footer-actions,.no-print{display:none !important;}
  main,#screen-results,.report-shell{width:210mm !important;max-width:210mm !important;margin:0 !important;padding:0 !important;}
  #screen-results .report-page{
    box-sizing:border-box !important;
    width:210mm !important;
    height:297mm !important;
    min-height:297mm !important;
    max-height:297mm !important;
    margin:0 !important;
    padding:21.5mm 13mm !important;
    border:0 !important;border-radius:0 !important;box-shadow:none !important;
    overflow:hidden !important;
    break-after:auto !important;page-break-after:auto !important;
  }
  /* One PDF page only. Defensive in case legacy report-page nodes are reintroduced. */
  #screen-results .report-page ~ .report-page{display:none !important;}
  .report-page-cover::before{display:none !important;}
  .report-cover-header{
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:42mm minmax(0,1fr) 42mm !important;
    align-items:center !important;
    gap:4mm !important;
    height:14mm !important;
    min-height:14mm !important;
    padding:0 0 2.5mm !important;
    border-bottom:1px solid #e7e5e2 !important;
  }
  .report-logo-large,.report-logo{width:auto !important;max-width:42mm !important;height:auto !important;max-height:10mm !important;object-fit:contain !important;object-position:left center !important;}
  .report-brand-copy{text-align:center !important;min-width:0 !important;}
  .report-brand-copy .report-eyebrow{justify-content:center !important;font-size:6.8pt !important;line-height:1.1 !important;}
  .report-edition{font-size:6.6pt !important;line-height:1.15 !important;letter-spacing:.05em !important;}
  .report-client-brand{display:flex !important;max-width:42mm !important;height:10mm !important;overflow:hidden !important;}
  .report-client-brand img{max-width:28mm !important;max-height:9mm !important;}
  .report-client-brand.is-square img{max-width:9mm !important;max-height:9mm !important;}
  .report-client-brand span{max-width:17mm !important;font-size:5.8pt !important;line-height:1.12 !important;color:#55575b !important;}
  .cover-identity{padding:3.5mm 0 3mm !important;min-height:0 !important;}
  .cover-label{margin-bottom:1.3mm !important;font-size:6.5pt !important;}
  .cover-name{font-size:20pt !important;line-height:1.05 !important;margin:0 0 1.5mm !important;}
  .cover-meta{font-size:7.5pt !important;line-height:1.35 !important;}
  #results-body{
    display:grid !important;
    grid-template-columns:88mm minmax(0,1fr) !important;
    gap:5mm !important;
    align-items:start !important;
    margin:0 !important;
  }
  #results-body > .report-panel{min-width:0 !important;margin:0 !important;break-inside:avoid !important;page-break-inside:avoid !important;box-shadow:none !important;}
  .cover-chart-panel{padding:3mm !important;border-radius:2mm !important;}
  .sc-chart-wrap{width:78mm !important;max-width:78mm !important;height:78mm !important;margin:0 auto !important;}
  .sc-chart-wrap svg{width:78mm !important;height:78mm !important;display:block !important;}
  .sc-chart-legend{gap:3mm !important;margin:0 0 1.5mm !important;}
  .sc-chart-legend span{font-size:6.3pt !important;gap:1mm !important;}
  .trait-panel-compact{padding:0 !important;border:0 !important;background:transparent !important;}
  .trait-heading-compact{font-size:9.5pt !important;text-align:left !important;margin:0 0 2mm !important;}
  .trait-item{padding:2.2mm 2.4mm !important;margin:0 0 1.7mm !important;border-radius:1.5mm !important;break-inside:avoid !important;}
  .trait-item-head{font-size:7.2pt !important;margin-bottom:.7mm !important;gap:2mm !important;align-items:flex-start !important;}
  .trait-item p{font-size:6.65pt !important;line-height:1.28 !important;margin:.55mm 0 0 !important;}
  .trait-item .trait-summary{display:none !important;}
}\n