:root {
  --ink: #252525;
  --muted: #60656a;
  --paper: #f8f9fa;
  --surface: #fff;
  --line: #e3e5e6;
  --accent: #455d50;
  --accent-soft: #f0f4f0;
}

body { background: var(--paper); color: var(--ink); font-family: "Montserrat", Arial, sans-serif; line-height: 1.7; }
.site-nav { background: #fff; box-shadow: 0 0 15px rgba(0,0,0,.1); padding: 1.1rem 0; }
.site-nav .navbar-brand { color: var(--ink); font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; }
.site-nav a.nav-link { color: var(--ink); font-size: .8rem; font-weight: 600; letter-spacing: .035em; text-decoration: none; text-transform: uppercase; }
.site-nav a.nav-link:hover { color: var(--accent); }
.site-nav a.nav-link:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.small-muted, .muted { color: var(--muted); }

.article-shell { background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,.075); }
.hero-image { display: block; width: 100%; height: clamp(200px, 28vw, 330px); object-fit: cover; object-position: center 55%; }
.article-inner { padding: clamp(1.4rem, 5vw, 4rem); }
.intro-panel { min-width: 0; }
.brand-mark { display: block; width: 160px; height: auto; margin: 0 0 1.25rem; }
.eyebrow { display: inline-block; color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
h1 { max-width: 25ch; font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 700; line-height: 1.25; }
.intro-copy { max-width: 72ch; font-size: .94rem; line-height: 1.8; }
.intro-copy p { margin-bottom: 1.15rem; }
.instruction { border-left: 4px solid var(--accent); background: #f7f8f6; padding: 1rem 1.25rem; }
.instruction p { margin: 0; font-size: .9rem; }
.section-title { margin: 2.75rem 0 1.15rem; padding: 0 0 .75rem; border-bottom: 1px solid var(--line); font-size: 1.15rem; font-weight: 700; }

.q-card { border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem; margin-bottom: .8rem; background: var(--surface); }
.q-card legend { float: none; width: auto; margin: 0 0 1rem; padding: 0; font-size: .95rem; font-weight: 600; line-height: 1.5; }
.question-heading { display: flex; align-items: flex-start; gap: .8rem; }
.q-num { flex: 0 0 auto; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .8rem; font-weight: 700; }
.choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .55rem; }
.choice { position: relative; cursor: pointer; margin: 0; }
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice-label { display: flex; align-items: center; justify-content: center; min-height: 3.35rem; height: 100%; padding: .55rem; border: 1px solid #d9dddb; border-radius: 8px; background: #fff; color: var(--ink); text-align: center; font-size: .76rem; line-height: 1.4; transition: background .15s, border-color .15s, box-shadow .15s; }
.choice:hover .choice-label { border-color: var(--accent); background: var(--accent-soft); }
.choice input:checked + .choice-label { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 700; }
.choice input:focus-visible + .choice-label { outline: 3px solid var(--accent); outline-offset: 2px; }

.side-panel { padding: 1.35rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.sticky-score { position: sticky; top: 1.5rem; }
.progress { background: #e8ece9; height: .6rem; border-radius: 20px; }
.progress-bar { background: var(--accent); }
.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: #354b3e; --bs-btn-hover-border-color: #354b3e; --bs-btn-active-bg: #354b3e; --bs-btn-active-border-color: #354b3e; }
.btn-outline-secondary, .btn-outline-dark { --bs-btn-color: var(--ink); --bs-btn-border-color: #aeb8b1; --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-border-color: var(--accent); --bs-btn-hover-color: var(--ink); }
a { color: var(--accent); } a:hover { color: #354b3e; }
.help-box { background: #f7f8f6; border-radius: 8px; padding: 1rem; }
.help-box ul { padding-left: 1.25rem; }
.result-badge { white-space: normal; text-align: left; }
.result-badge.text-bg-info { background: #e8eee7 !important; color: var(--ink) !important; }
#resultArea { scroll-margin-top: 1.5rem; }
.site-footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 2rem 1rem 3rem; }

@media (max-width: 767px) {
  .choice-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sticky-score { position: static; }
  .article-inner { padding: 1.35rem; }
  .hero-image { height: 190px; }
  .site-nav { padding: .65rem 0; }
  .site-nav .navbar-brand { font-size: 1.3rem; }
}
@media print {
  .site-nav, .sticky-score, .actions, .site-footer { display: none !important; }
  body { background: #fff; }
  .article-shell, .q-card { box-shadow: none; break-inside: avoid; }
  .hero-image { height: 160px; }
}