:root{
  --navy:#04213A;
  --gold:#C58C47;
  --cream:#F8F5E0;
  --ink:#1F2937;
  --muted:#6B7280;
  --line:#E5E7EB;
  --bg:#F7F6F2;
  --card:#FFFFFF;
  --green:#1F7A45;
  --amber:#A16207;
  --red:#B42318;
  --shadow:0 12px 28px rgba(4,33,58,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(180deg, #fbfaf6 0%, #f4f1e6 100%);
  color:var(--ink);
}

button,input,textarea,select{font:inherit}

.app-shell{
  max-width:1160px;
  margin:0 auto;
  padding:24px;
}

.topbar{
  background:var(--card);
  border:1px solid rgba(4,33,58,.08);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:24px 28px;
  margin-bottom:20px;
}

.brand{
  font-size:12px;
  letter-spacing:.16em;
  color:var(--gold);
  font-weight:700;
  text-transform:uppercase;
}

.headline{
  font-size:34px;
  line-height:1.08;
  color:var(--navy);
  font-weight:800;
  margin:8px 0 10px;
}

.subhead{
  color:var(--muted);
  line-height:1.6;
  max-width:760px;
}

.grid-2{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:20px;
  margin-top:20px;
}

.card{
  background:var(--card);
  border:1px solid rgba(4,33,58,.08);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:22px;
}

.card h3{
  margin:0 0 10px;
  color:var(--navy);
  font-size:22px;
}

.card p,.card li{
  line-height:1.55;
  color:var(--ink);
}

.kicker{
  font-size:12px;
  letter-spacing:.12em;
  color:var(--gold);
  text-transform:uppercase;
  font-weight:700;
}

.muted{color:var(--muted)}
.small{font-size:12px;color:var(--muted)}

.check-list{
  margin:12px 0 0;
  padding-left:18px;
}

.check-list li{margin:8px 0}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.field{margin-top:14px}
.field.full{grid-column:1 / -1}

.field label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}

.field input,
.field textarea,
.field select{
  width:100%;
  border:1px solid #D5DAE1;
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
  color:var(--ink);
}

.field textarea{
  min-height:96px;
  resize:vertical;
  line-height:1.45;
}

.hero-actions,.toolbar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.btn{
  border:none;
  background:var(--navy);
  color:#fff;
  padding:12px 18px;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
  transition:.15s transform ease,.15s opacity ease;
}

.btn:hover{transform:translateY(-1px)}
.btn.secondary{
  background:#fff;
  color:var(--navy);
  border:1px solid var(--line);
}
.btn.gold{
  background:var(--gold);
  color:#fff;
}
.btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

.progress-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.progress{
  flex:1;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:#E8EDF3;
}

.progress > span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--navy));
}

.section-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  color:var(--navy);
  font-weight:700;
  font-size:13px;
}

.question-title{
  font-size:28px;
  color:var(--navy);
  font-weight:800;
  margin:8px 0 6px;
}

.question-detail{
  color:var(--muted);
  line-height:1.6;
  margin-bottom:18px;
}

.option-list{
  display:grid;
  gap:12px;
  margin:16px 0 0;
}

.option{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  background:#fff;
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
}

.option:hover{border-color:#c9d3df}
.option input{margin-top:3px}

.option.selected{
  border-color:var(--gold);
  background:#fffaf4;
  box-shadow:0 0 0 3px rgba(197,140,71,.12);
}

.score-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}

.score-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
}

.score-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  font-weight:700;
}

.score-value{
  font-size:36px;
  font-weight:800;
  margin:8px 0 10px;
  color:var(--navy);
}

.bar{
  height:10px;
  background:#E8EDF3;
  border-radius:999px;
  overflow:hidden;
  margin-bottom:10px;
}

.bar > span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--navy));
}

.score-meaning{
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}

.result-section{
  margin-top:22px;
}

.result-section h3{
  margin:0 0 8px;
  color:var(--navy);
}

.action-list{
  margin:10px 0 0;
  padding-left:18px;
}

.action-list li{margin:8px 0}

.answer-summary{
  margin-top:14px;
  border-top:1px solid var(--line);
  padding-top:14px;
}

.answer-item{
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.answer-item:last-child{border-bottom:none}

.answer-q{
  font-weight:700;
  color:var(--ink);
  margin-bottom:4px;
}

.answer-a{
  color:var(--navy);
  font-weight:700;
  margin-bottom:4px;
}

.answer-note{
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.status-banner{
  border-radius:14px;
  padding:12px 14px;
  font-size:14px;
  margin:14px 0 0;
}

.status-banner.success{
  background:#edf8f1;
  color:var(--green);
  border:1px solid #b9e1c5;
}

.status-banner.error{
  background:#fff1ef;
  color:var(--red);
  border:1px solid #f6c8c1;

}
.results-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:22px 0 18px;
}

.results-tab-btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--navy);
  padding:11px 16px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
}

.results-tab-btn.active{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
}

.results-section-wrap{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  margin-top:4px;
}

.results-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px;
}

.results-section-title{
  font-size:28px;
  font-weight:800;
  color:var(--navy);
  line-height:1.1;
}

.results-section-sub{
  margin-top:8px;
  color:var(--muted);
  line-height:1.5;
  max-width:760px;
}

.results-section-score{
  text-align:right;
  min-width:120px;
}

.results-section-score-value{
  font-size:22px;
  font-weight:800;
}

.results-question-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.result-question-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:18px;
}

.result-question-title{
  font-size:18px;
  font-weight:800;
  color:var(--navy);
  margin-bottom:8px;
}

.result-question-detail{
  color:var(--muted);
  line-height:1.5;
  margin-bottom:16px;
}

.result-question-grid{
  display:grid;
  grid-template-columns:220px 1fr 1fr;
  gap:14px;
  align-items:start;
}

.result-field{
  min-width:0;
}

.result-label{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:8px;
}

.result-pill{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  background:#fff;
  font-weight:500;
  color:var(--ink);
}

.result-box{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  background:#fbfbfd;
  min-height:76px;
  line-height:1.5;
  color:var(--ink);
}

.result-actions-wrap{
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  background:#fcfcfc;
}

.result-actions-title{
  font-size:14px;
  font-weight:800;
  color:var(--navy);
  margin-bottom:10px;
}

.result-actions-list{
  margin:0;
  padding-left:20px;
}

.result-actions-list li{
  margin:8px 0;
  line-height:1.5;
}

@media (max-width: 900px){
  .results-section-head{
    flex-direction:column;
  }

  .results-section-score{
    text-align:left;
  }

  .result-question-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 920px){
  .grid-2,.form-grid,.score-grid{grid-template-columns:1fr}
  .headline{font-size:28px}
  .question-title{font-size:24px}
}