*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold:        #EF9F27;
  --gold-light:  #FDF3E0;
  --gold-border: #F5C97A;
  --green:       #639922;
  --green-light: #EAF3D8;
  --amber:       #BA7517;
  --amber-light: #FEF3DC;
  --red:         #A32D2D;
  --red-light:   #FDEAEA;
  --gray-50:     #FAFAFA;
  --gray-100:    #F5F5F5;
  --gray-200:    #E8E8E8;
  --gray-400:    #AAAAAA;
  --gray-600:    #666666;
  --gray-800:    #333333;
  --text:        #1A1A1A;
  --white:       #FFFFFF;
  --radius:      14px;
  --radius-sm:   8px;
  --shadow:      0 2px 12px rgba(0,0,0,0.07);
  --shadow-lg:   0 6px 28px rgba(0,0,0,0.11);
}

html { scroll-behavior: auto; }

body {
  font-family: 'DM Sans', sans-serif;
  background-color: var(--gray-100);
  background-image: url('../data/icons/background.png');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.88);
  z-index: 0;
  pointer-events: none;
}
header, main, #page-welcome, #page-assessment, #page-results, #page-booking {
  position: relative;
  z-index: 1;
}

/* ── Utility ── */
.hidden { display: none !important; }

/* ── Header ── */
header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
/* Clickable logos (those with an onclick handler) read as interactive on hover. */
.logo[onclick] {
  transition: transform 0.15s ease, opacity 0.15s ease;
  transform-origin: left center;
}
.logo[onclick]:hover { transform: scale(1.04); opacity: 0.85; }
.logo[onclick]:active { transform: scale(0.98); }
.logo-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--gold) 0%, #F5C97A 100%);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.logo-name { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; }
.logo-sub  { font-size: 11px; color: var(--gray-600); font-weight: 400; }

.lang-toggle { display: inline-flex; gap: 4px; flex-shrink: 0; }
.lang-toggle button {
  font-size: 11px; font-weight: 600; padding: 4px 8px;
  border: 1px solid var(--gray-200); background: var(--white);
  border-radius: 6px; cursor: pointer; color: var(--gray-600);
  font-family: inherit;
}
.lang-toggle button.active { border-color: var(--gold); color: var(--gold); }

/* ── Pages ── */
.page { display: none; }
.page.active { display: block; }

/* ════════════════════════════════════════
   WELCOME PAGE
════════════════════════════════════════ */
#page-welcome {
  min-height: calc(100vh - 60px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
#page-welcome.active { display: flex; }

.welcome-card {
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 56px 48px;
  max-width: 560px;
  width: 100%;
  text-align: center;
}
.welcome-star {
  font-size: 52px; margin-bottom: 20px; line-height: 1;
}
.welcome-title {
  font-size: 36px; font-weight: 700; letter-spacing: -0.8px;
  margin-bottom: 6px; color: var(--text);
}
.welcome-sub {
  font-size: 16px; color: var(--gold); font-weight: 600;
  margin-bottom: 20px;
}
.welcome-desc {
  font-size: 15px; color: var(--gray-600); line-height: 1.7;
  margin-bottom: 32px;
}
.welcome-meta {
  display: flex; justify-content: center; gap: 24px;
  margin-bottom: 36px; flex-wrap: wrap;
}
.meta-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.meta-num { font-size: 24px; font-weight: 700; color: var(--gold); }
.meta-lbl { font-size: 12px; color: var(--gray-600); }

@media (max-width: 560px) {
  .welcome-card { padding: 36px 24px; }
  .welcome-title { font-size: 28px; }
}

/* ════════════════════════════════════════
   ASSESSMENT PAGE
════════════════════════════════════════ */
#page-assessment {
  min-height: calc(100vh - 60px);
  display: flex; flex-direction: column;
}
#page-assessment.active { display: flex; }

/* Progress bar */
.progress-bar-wrap {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 14px 24px;
}
.progress-bar-inner {
  max-width: 700px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
}
.progress-track {
  flex: 1; height: 6px; background: var(--gray-200);
  border-radius: 100px; overflow: hidden;
}
.progress-fill {
  height: 100%; background: var(--gold);
  border-radius: 100px;
  transition: width 0.35s cubic-bezier(.4,0,.2,1);
}
.progress-label {
  font-size: 12px; font-weight: 600; color: var(--gray-600);
  white-space: nowrap;
}
.area-badge {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--gold-light); color: var(--gold);
  border: 1px solid var(--gold-border);
  border-radius: 100px; padding: 2px 10px;
  white-space: nowrap;
}

/* Question card */
.question-stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 32px 24px;
}
.question-card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 40px 44px;
  max-width: 700px; width: 100%;
}
.q-area-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gray-400);
  margin-bottom: 14px;
}

/* Area badge + label row in the question header */
.q-area-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.q-area-head .q-area-label { margin-bottom: 0; }
.q-area-img {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 50%; display: block;
  object-fit: contain;
  transition: opacity 0.25s ease;
}
.q-area-head.no-img .q-area-img,
.q-area-head.no-img picture { display: none; }

@media (max-width: 600px) {
  .q-area-head { gap: 10px; margin-bottom: 14px; }
  .q-area-img { width: 46px; height: 46px; }
}

/* Assessment intro screen */
.intro-card { text-align: center; }
.intro-logo {
  display: block; width: auto; max-height: 76px;
  margin: 0 auto 22px; opacity: 0.92;
}
.intro-heading {
  font-size: 24px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text);
  margin-bottom: 22px;
}
.intro-p {
  font-size: 15px; line-height: 1.7; color: var(--gray-600);
  margin-bottom: 16px; text-align: left;
}
.intro-cta { margin-top: 28px; }
.intro-cta .btn { min-width: 180px; }

@media (max-width: 600px) {
  .intro-heading { font-size: 20px; }
  .intro-p { font-size: 14px; }
  .intro-logo { max-height: 64px; margin-bottom: 18px; }
}
.q-text {
  font-size: 22px; font-weight: 600; line-height: 1.4;
  color: var(--text); margin-bottom: 36px;
  letter-spacing: -0.2px;
}

/* Slider */
.slider-section { margin-bottom: 28px; }
.slider-value-display {
  text-align: center; margin-bottom: 16px;
}
.slider-val {
  font-size: 48px; font-weight: 700; color: var(--gold);
  line-height: 1; display: inline-block;
  transition: color 0.2s;
}
.slider-val-max { font-size: 20px; color: var(--gray-400); font-weight: 400; }

input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  background: var(--gray-200); border-radius: 100px;
  outline: none; cursor: pointer;
  transition: background 0.2s;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 2px 8px rgba(239,159,39,0.4);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 12px rgba(239,159,39,0.5);
}
input[type=range]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); border: none;
  box-shadow: 0 2px 8px rgba(239,159,39,0.4);
  cursor: pointer;
}
.slider-labels {
  display: flex; justify-content: space-between;
  margin-top: 10px; gap: 8px;
}
.slider-lbl-0 { font-size: 12px; color: var(--gray-400); max-width: 45%; line-height: 1.3; }
.slider-lbl-10 { font-size: 12px; color: var(--gray-400); max-width: 45%; text-align: right; line-height: 1.3; }

.q-nav {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 8px; flex-wrap: wrap;
}

@media (max-width: 600px) {
  .question-card { padding: 28px 20px; }
  .q-text { font-size: 18px; }
  .slider-val { font-size: 38px; }
}

/* ════════════════════════════════════════
   RESULTS PAGE
════════════════════════════════════════ */
#page-results { padding: 32px 24px 80px; }

.results-wrap { max-width: 1100px; margin: 0 auto; }

/* Results header */
.results-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
  margin-bottom: 32px; flex-wrap: wrap;
}
.results-title { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 4px; }
.results-score-summary { font-size: 15px; color: var(--gray-600); }
.results-score-num { font-weight: 700; color: var(--gold); }

/* Chart + top cards */
.results-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
  align-items: stretch;
}
@media (max-width: 800px) { .results-top { grid-template-columns: 1fr; } }

.chart-card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px;
  padding-top: 64px;
  padding-bottom: 100px;
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.chart-title { font-size: 13px; font-weight: 600; color: var(--gray-600); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.chart-canvas-wrap { width: 100%; max-width: 340px; }

/* Radar wrap (no icon overlay — clean chart only) */
.radar-wrap {
  position: relative;
  width: 100%;
  max-width: 340px;
}

/* Card icon + progress ring unit */
.ac-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ac-icon-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 90px; height: 90px;
  flex-shrink: 0;
}
.ac-icon-ring svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.ac-icon-ring img {
  width: 70px; height: 70px;
  object-fit: contain;
  position: relative; z-index: 1;
  border-radius: 8px;
}
.ac-pct {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  flex: 1;
}

/* Total score circle — in right column above ODPORÚČANIE */
.radar-total {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.radar-total-ring {
  position: relative;
  width: 100px; height: 100px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.radar-total-ring svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.radar-total-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
}
.radar-total-big {
  font-size: 32px; font-weight: 700; line-height: 1;
}
.radar-total-denom {
  font-size: 13px; color: var(--gray-400); font-weight: 400; margin-top: 2px;
}
.radar-total-sub {
  font-size: 15px; font-weight: 500;
  line-height: 1.3; text-align: left; max-width: none;
  white-space: normal;
}

/* Radar icon overlay */
.radar-icons-layer {
  position: absolute; inset: 0; pointer-events: none;
}
.radar-icon-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; pointer-events: all; cursor: pointer;
}
.radar-icon-pin-ring {
  position: relative;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.radar-icon-pin-ring svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.radar-icon-pin-ring img {
  width: 34px; height: 34px;
  object-fit: contain; position: relative; z-index: 1;
  border-radius: 6px;
}
.radar-icon-pin-label {
  font-size: 10px; font-weight: 600; color: var(--gray-800);
  text-align: center; max-width: 80px;
  line-height: 1.2; white-space: nowrap;
}

/* Radar tooltip */
.radar-tooltip {
  position: absolute;
  background: rgba(30,30,30,0.92);
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
  z-index: 200;
  white-space: nowrap;
  transform: translate(-50%, -110%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  display: none;
}
.radar-tooltip.visible { display: block; }

/* Global logo */
.global-logo {
  display: block;
  max-height: 60px;
  margin: 0 auto 20px;
}

.highlights-card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px;
}
.highlights-title { font-size: 13px; font-weight: 600; color: var(--gray-600); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.06em; }

.highlight-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px; border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.highlight-row.best  { background: var(--green-light); }
.highlight-row.worst { background: var(--red-light); }
.hl-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.hl-label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 3px; }
.highlight-row.best  .hl-label { color: var(--green); }
.highlight-row.worst .hl-label { color: var(--red); }
.hl-name  { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.hl-score { font-size: 13px; color: var(--gray-600); }

.cta-block {
  margin-top: 20px; padding: 16px;
  background: var(--gold-light); border: 1px solid var(--gold-border);
  border-radius: var(--radius-sm);
}
.cta-heading { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.cta-text { font-size: 13px; color: var(--gray-600); margin-bottom: 12px; line-height: 1.5; }

/* Premium pill-shaped Deep Dive CTA — the anchor itself is the button */
.cta-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 20px;
  padding: 16px 20px;
  min-height: 100px;
  border-radius: 60px;
  background: linear-gradient(135deg, #F4C842 0%, #EF9F27 50%, #E8832A 100%);
  box-shadow: 0 8px 24px rgba(232, 131, 42, 0.35);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cta-pill:hover {
  background: linear-gradient(135deg, #F8D45E 0%, #F4A832 50%, #F0903A 100%);
  transform: scale(1.02);
  box-shadow: 0 12px 30px rgba(232, 131, 42, 0.45);
}
.cta-pill-logo {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 50%;
}
.cta-pill-text { display: flex; flex-direction: column; gap: 4px; }
.cta-pill-title { font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 1.25; text-align: center; }
.cta-pill-sub { font-size: 13px; font-style: italic; color: #fff; line-height: 1.45; opacity: 0.95; text-align: center; }

@media (max-width: 480px) {
  .cta-pill { gap: 6px; padding: 12px 16px; }
  .cta-pill-logo { width: 75px; height: 75px; }
  .cta-pill-title { font-size: 0.95rem; }
  .cta-pill-sub { font-size: 0.78rem; }
}

/* AI summary cards — mirror the recommendation card style (.highlight-row) */
.ai-card {
  background: var(--gold-light);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 10px;
}
.ai-card-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: #EF9F27;
  margin-bottom: 6px;
}
.ai-card-text {
  font-size: 14px; color: var(--text); line-height: 1.5;
  margin: 0 0 6px;
}
.ai-card-text:last-child { margin-bottom: 0; }

/* Per-section card themes (sections render in fixed order 1–5) */
.ai-card:nth-child(1) { background: #F3E8FF; }   /* Celkové zhodnotenie */
.ai-card:nth-child(1) .ai-card-label { color: #7C3AED; }
.ai-card:nth-child(2) { background: #E8F4FF; }   /* Súvis medzi oblasťami */
.ai-card:nth-child(2) .ai-card-label { color: #2563EB; }
.ai-card:nth-child(3) { background: #E8F8EF; }   /* Najsilnejšia oblasť */
.ai-card:nth-child(3) .ai-card-label { color: #1E9E54; }
.ai-card:nth-child(4) { background: #FFE8E8; }   /* Najslabšia oblasť */
.ai-card:nth-child(4) .ai-card-label { color: #C0392B; }
.ai-card:nth-child(5) { background: #FFF8E8; }   /* Odporúčaný krok */
.ai-card:nth-child(5) .ai-card-label { color: #EF9F27; }

/* Area grid */
.section-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--gray-400);
  margin-bottom: 14px;
}
.area-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 12px;
}
@media (max-width: 960px) { .area-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) {
  .area-grid {
    grid-template-columns: 1fr;
  }
}

.area-card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  padding: 14px 14px 12px;
  cursor: pointer; transition: all 0.18s;
  user-select: none;
}
.area-card:hover { border-color: var(--gold-border); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.ac-num   { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--gray-400); margin-bottom: 4px; }
.ac-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; line-height: 1.25; }
.ac-sign  { font-size: 11px; color: var(--gray-600); margin-bottom: 8px; }
.ac-interp { font-size: 11px; color: var(--gray-600); line-height: 1.4; }
.ac-score { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.ac-score.score-red    { color: var(--red); }
.ac-score.score-amber  { color: var(--amber); }
.ac-score.score-green  { color: var(--green); }

.score-bar-track { height: 4px; background: var(--gray-200); border-radius: 100px; overflow: hidden; }
.score-bar-fill  { height: 100%; border-radius: 100px; transition: width 0.5s ease; }
.score-bar-fill.score-red   { background: var(--red); }
.score-bar-fill.score-amber { background: var(--amber); }
.score-bar-fill.score-green { background: var(--green); }

/* Detail panel (used by area.html) */
.detail-panel {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200);
  margin-top: 12px; margin-bottom: 24px;
  overflow: hidden;
}
.detail-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; background: var(--gold-light);
  border-bottom: 1px solid var(--gold-border); gap: 12px;
}
.detail-header-info { flex: 1; min-width: 0; }
.detail-title  { font-size: 20px; font-weight: 700; margin-bottom: 2px; }
.detail-sign   { font-size: 13px; color: var(--gray-600); }
.detail-score-badge {
  font-size: 18px; font-weight: 700; flex-shrink: 0;
  padding: 6px 14px; border-radius: 8px;
}
.detail-score-badge.score-red   { background: var(--red-light);   color: var(--red); }
.detail-score-badge.score-amber { background: var(--amber-light);  color: var(--amber); }
.detail-score-badge.score-green { background: var(--green-light); color: var(--green); }

.close-btn {
  width: 34px; height: 34px; border: none;
  background: var(--white); border-radius: 50%;
  cursor: pointer; font-size: 16px; color: var(--gray-600);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.close-btn:hover { background: var(--gray-100); color: var(--text); }

.detail-body { padding: 24px; }

.interpretation {
  padding: 12px 16px; border-radius: var(--radius-sm);
  margin-bottom: 20px; font-size: 14px; line-height: 1.6;
}
.interpretation.score-red   { background: var(--red-light);   border-left: 3px solid var(--red);   color: var(--gray-800); }
.interpretation.score-amber { background: var(--amber-light);  border-left: 3px solid var(--amber); color: var(--gray-800); }
.interpretation.score-green { background: var(--green-light); border-left: 3px solid var(--green); color: var(--gray-800); }

.reflection-q {
  font-size: 15px; font-weight: 500; color: var(--text);
  margin-bottom: 8px; line-height: 1.4;
}
.reflection-ta {
  width: 100%; min-height: 90px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: 10px 12px; font-family: inherit; font-size: 14px;
  color: var(--text); resize: vertical;
  background: var(--gray-50);
  transition: border-color 0.18s, background 0.18s;
  display: block;
}
.reflection-ta:focus { outline: none; border-color: var(--gold); background: var(--white); }

/* ── Coaching step flow (area detail panel) ── */
.dp-step { animation: fadeIn 0.25s ease; }

.dp-context { text-align: center; }
.dp-context-icon { width: 72px; height: 72px; object-fit: contain; border-radius: 12px; margin: 4px auto 14px; display: block; }
.dp-context-score { font-size: 40px; font-weight: 700; line-height: 1; margin-bottom: 16px; }
.dp-context .interpretation { text-align: left; margin-bottom: 24px; }
.dp-context .btn { width: 100%; }

.dp-progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dp-progress-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-400); }
.dp-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-200); }
.dp-dot.active { background: var(--gold); }
.dp-dot.done   { background: var(--gold-border); }

.dp-nav { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.dp-skip { margin-left: auto; font-size: 13px; color: var(--gray-600); cursor: pointer; text-decoration: underline; }
.dp-skip:hover { color: var(--text); }
.dp-complete-nav { justify-content: center; flex-wrap: wrap; }

.dp-action-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; }
.dp-action-ta {
  width: 100%; min-height: 100px;
  border: 1.5px solid var(--gold-border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-family: inherit; font-size: 14px;
  color: var(--text); resize: vertical; background: var(--gold-light);
  transition: border-color 0.18s, background 0.18s; display: block;
}
.dp-action-ta:focus { outline: none; border-color: var(--gold); background: var(--white); }

.dp-complete { text-align: center; }
.dp-complete-head { font-size: 22px; font-weight: 700; color: var(--green); margin-bottom: 18px; }
.dp-summary { text-align: left; margin-bottom: 20px; }
.dp-summary-item { padding: 12px 14px; background: var(--gray-50); border-radius: var(--radius-sm); margin-bottom: 10px; }
.dp-summary-q { font-size: 13px; font-weight: 600; color: var(--gray-600); margin-bottom: 4px; }
.dp-summary-a { font-size: 14px; color: var(--text); line-height: 1.5; white-space: pre-wrap; }
.dp-summary-empty { font-size: 14px; color: var(--gray-600); margin-bottom: 20px; }

/* Completed area card checkmark */
.area-card { position: relative; }
.ac-done {
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

/* Recommendation section */
.recommendation-section {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px;
  margin-bottom: 24px;
}
.rec-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.rec-row   { display: flex; gap: 12px; flex-wrap: wrap; }
.rec-item  {
  flex: 1; min-width: 200px;
  padding: 14px 16px; border-radius: var(--radius-sm);
}
.rec-item.rec-start { background: var(--red-light);   border-left: 3px solid var(--red); }
.rec-item.rec-base  { background: var(--green-light); border-left: 3px solid var(--green); }
.rec-item-label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 4px; }
.rec-item.rec-start .rec-item-label { color: var(--red); }
.rec-item.rec-base  .rec-item-label { color: var(--green); }
.rec-item-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.rec-item-text { font-size: 13px; color: var(--gray-600); line-height: 1.4; }

.cta-section {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px 24px;
  text-align: center;
}
.cta-section-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.cta-section-text  { font-size: 14px; color: var(--gray-600); max-width: 420px; margin: 0 auto 20px; line-height: 1.6; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 22px; border-radius: var(--radius-sm);
  border: none; font-family: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer;
  transition: all 0.15s; text-decoration: none;
}
.btn-primary { background: var(--gold); color: var(--white); }
.btn-primary:hover { background: #D98E1F; }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary { background: var(--gray-100); color: var(--gray-800); border: 1px solid var(--gray-200); }
.btn-secondary:hover { background: var(--gray-200); }
.btn-ghost { background: transparent; color: var(--gray-600); border: 1px solid transparent; }
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-800); }
.btn-outline { background: transparent; border: 1.5px solid var(--gold); color: var(--gold); }
.btn-outline:hover { background: var(--gold-light); }
.btn-lg { padding: 14px 32px; font-size: 16px; border-radius: var(--radius); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Transition animation */
.fade-in {
  animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reset confirm */
.reset-bar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; margin-bottom: 20px; flex-wrap: wrap;
}
@media (max-width: 600px) {
  .reset-bar { flex-direction: row; gap: 8px; }
  .reset-bar .btn { flex: 1; font-size: 13px; padding: 8px 12px; }
}

@media (max-width: 480px) {
  .results-title { font-size: 22px; }
  .detail-header { padding: 16px; }
  .detail-body   { padding: 16px; }
}

/* ── Score comparison indicators ── */
.score-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700;
  margin-left: 6px; vertical-align: middle;
}
.score-delta.up   { color: var(--green); }
.score-delta.down { color: var(--red); }
.score-delta.same { color: var(--gray-400); }

/* ── História section ── */
.history-section {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px;
  margin-bottom: 24px;
}
.history-title {
  font-size: 15px; font-weight: 700; margin-bottom: 16px;
}
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px;
  background: var(--gray-50); border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200); flex-wrap: wrap;
}
.history-row.current-session {
  border-color: var(--gold-border); background: var(--gold-light);
}
.history-date  { font-size: 13px; font-weight: 600; color: var(--text); }
.history-score { font-size: 13px; color: var(--gray-600); }
.history-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--gold);
  background: var(--white); border: 1px solid var(--gold-border);
  border-radius: 100px; padding: 2px 8px;
}
.history-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-xs {
  padding: 5px 10px; font-size: 12px; border-radius: 6px;
}

/* ── Print stylesheet ── */
@media print {
  header,
  #page-welcome,
  #page-assessment,
  .reset-bar,
  .detail-panel,
  .history-section,
  .cta-section,
  .cta-block,
  .cta-pill,
  .area-grid,
  .section-label,
  #ai-summary-section,
  .results-header .reset-bar,
  .radar-icons-layer,
  .radar-total,
  .global-logo,
  .btn,
  button { display: none !important; }

  body::before { display: none !important; }
  body { background-image: none !important; }

  @page {
    size: A4 portrait;
    margin: 18mm 16mm 18mm 16mm;
  }

  *, *::before, *::after { box-sizing: border-box; }

  html, body {
    background: #fff !important;
    color: #111 !important;
    font-family: 'DM Sans', Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.5;
  }

  #page-results {
    display: block !important;
    padding: 0 !important;
  }

  .results-wrap { max-width: 100% !important; }

  .print-header {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 2px solid #111;
    padding-bottom: 10pt;
    margin-bottom: 14pt;
  }
  .print-header-title { font-size: 18pt; font-weight: 700; }
  .print-header-sub   { font-size: 10pt; color: #555; margin-top: 2pt; }
  .print-header-date  { font-size: 10pt; color: #555; text-align: right; }

  .results-header { display: none !important; }

  .results-top {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14pt !important;
    margin-bottom: 14pt !important;
    page-break-inside: avoid;
  }

  .chart-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    padding: 10pt !important;
    justify-content: center !important;
  }
  .chart-title { font-size: 9pt !important; }
  .chart-canvas-wrap { max-width: 240pt !important; }
  /* Keep the radar compact so radar + recommendations + table fit on page 1.
     (Point labels are off in print, so scaling the canvas loses nothing.) */
  .radar-wrap { max-width: 220pt !important; margin: 0 auto !important; }
  .radar-wrap canvas { width: 100% !important; height: auto !important; }

  .highlights-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    padding: 10pt !important;
  }
  .highlights-title { font-size: 9pt !important; }
  .highlight-row { padding: 8pt !important; margin-bottom: 6pt !important; }
  .hl-name  { font-size: 11pt !important; }
  .hl-score { font-size: 10pt !important; }
  .hl-icon  { font-size: 16pt !important; }

  .print-area-table {
    display: block !important;
    width: 100%;
    margin-bottom: 14pt;
  }
  /* Let the table flow directly under the radar on page 1; keep individual
     rows from splitting across a page break rather than forcing the whole
     table to the next page. */
  .print-area-table tr { page-break-inside: avoid; }
  .print-area-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5pt;
    table-layout: fixed;
  }
  /* Tight name + % columns; the assessment text gets the remaining width so it
     fits in fewer lines. */
  .print-area-table col.pcol-area   { width: 23%; }
  .print-area-table col.pcol-pct    { width: 8%;  }
  .print-area-table col.pcol-rating { width: 69%; }
  .print-area-table td {
    padding: 3pt 7pt 3pt 0;
    border-bottom: 0.5pt solid #e0e0e0;
    vertical-align: top;
    line-height: 1.3;
  }
  .print-area-table td.pc-area-name { font-weight: 600; padding-left: 0; }
  .print-area-table td.pc-pct { font-weight: 700; white-space: nowrap; }
  /* Assessment text colored by the 5-level satisfaction palette. The lighter
     levels (orange/gold/light-green) are darkened from the on-screen colors so
     they stay legible printed on white paper. */
  .print-rating {
    font-weight: 600;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .print-rating.pscore-l1 { color: #C0392B; } /*  0–20%  red            */
  .print-rating.pscore-l2 { color: #C2611A; } /* 21–40%  orange (dark)  */
  .print-rating.pscore-l3 { color: #A97B06; } /* 41–60%  gold (dark)    */
  .print-rating.pscore-l4 { color: #6E8B1E; } /* 61–80%  light grn(dark)*/
  .print-rating.pscore-l5 { color: #1F8B4C; } /* 81–100% green (dark)   */

  .print-footer {
    display: flex !important;
    justify-content: space-between;
    border-top: 1pt solid #ccc;
    padding-top: 6pt;
    margin-top: 14pt;
    font-size: 9pt;
    color: #999;
  }

  #print-ai-summary {
    display: block !important;
    border-top: 1pt solid #ccc;
    padding-top: 10pt;
    margin-top: 14pt;
  }
  #print-ai-summary .ai-card {
    padding: 8pt 10pt;
    margin-bottom: 8pt;
    border-left: 3pt solid #ccc;
    border-radius: 4pt;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #print-ai-summary .ai-card-label {
    font-size: 9pt; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 4pt;
  }
  #print-ai-summary .ai-card-text {
    font-size: 10pt; color: #111; line-height: 1.5;
    margin: 0 0 4pt;
  }
  #print-ai-summary .ai-card-text:last-child { margin-bottom: 0; }

  /* Per-section card themes (sections render in fixed order 1–5) */
  #print-ai-summary .ai-card:nth-child(1) { background: #F3E8FF; border-left-color: #9B59B6; }
  #print-ai-summary .ai-card:nth-child(1) .ai-card-label { color: #9B59B6; }
  #print-ai-summary .ai-card:nth-child(2) { background: #E8F4FF; border-left-color: #3498DB; }
  #print-ai-summary .ai-card:nth-child(2) .ai-card-label { color: #3498DB; }
  #print-ai-summary .ai-card:nth-child(3) { background: #E8F8EF; border-left-color: #27AE60; }
  #print-ai-summary .ai-card:nth-child(3) .ai-card-label { color: #27AE60; }
  #print-ai-summary .ai-card:nth-child(4) { background: #FFE8E8; border-left-color: #E74C3C; }
  #print-ai-summary .ai-card:nth-child(4) .ai-card-label { color: #E74C3C; }
  #print-ai-summary .ai-card:nth-child(5) { background: #FFF8E8; border-left-color: #EF9F27; }
  #print-ai-summary .ai-card:nth-child(5) .ai-card-label { color: #EF9F27; }

  .print-journal {
    display: block !important;
    margin-top: 14pt;
  }
  .pj-area {
    margin-bottom: 12pt;
    page-break-inside: avoid;
  }
  .pj-area-head {
    font-size: 12pt; font-weight: 700;
    border-bottom: 0.5pt solid #999;
    padding-bottom: 3pt; margin-bottom: 6pt;
  }
  .pj-qa { margin-bottom: 6pt; }
  .pj-q { font-size: 10pt; font-weight: 600; color: #333; }
  .pj-a { font-size: 10pt; color: #111; margin-top: 1pt; white-space: pre-wrap; }
  .pj-action { font-size: 10pt; font-weight: 600; color: #111; margin-top: 4pt; }

  /* Coaching answers section (wl2_coaching_answers) */
  .pc-section-head {
    font-size: 14pt; font-weight: 700;
    margin-top: 16pt; margin-bottom: 8pt;
    border-bottom: 1pt solid #999; padding-bottom: 4pt;
  }
  .pc-area + .pc-area { page-break-before: always; }
  .pc-area-head {
    font-size: 13pt; font-weight: 700;
    border-bottom: 0.75pt solid #333;
    padding-bottom: 3pt; margin-top: 14pt; margin-bottom: 6pt;
  }
  .pc-decan {
    font-size: 11pt; font-weight: 700; color: #EF9F27;
    margin-top: 8pt; margin-bottom: 2pt;
  }
  .pc-question {
    font-size: 10pt; font-style: italic; color: #333;
    margin-top: 6pt;
  }
  .pc-answer { margin-left: 16px; margin-top: 2pt; page-break-inside: avoid; }
  .pc-date { font-size: 8.5pt; color: #999; }
  .pc-text { font-size: 10pt; color: #111; white-space: pre-wrap; }

  .score-delta { display: none !important; }
}

/* Print-only elements hidden on screen */
.print-header,
.print-area-table,
.print-journal,
.print-footer,
#print-ai-summary { display: none; }