:root{
  --brand:#223d71;
  --bg:#f4f6f8;
  --card:#ffffff;
  --text:#111827;
  --muted:#4b5563;
  --border:rgba(17,24,39,.10);
  --shadow:0 10px 28px rgba(0,0,0,.08);
  --r:14px;
  --max:1100px;
  --low:#9a3412;
  --mid:#92400e;
  --high:#166534;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ max-width:var(--max); margin:0 auto; padding:0 18px; }

.skip{
  position:absolute;
  left:-9999px;
  top:10px;
  background:var(--card);
  padding:10px 12px;
  border-radius:10px;
  box-shadow:var(--shadow);
}

.skip:focus{ left:12px; }

section{ scroll-margin-top:140px; }

.header{
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:1000;
}

.topbar-inner{
  min-height:106px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.logos{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo{
  height:56px;
  width:auto;
  object-fit:contain;
}

.logo-bifi{ height:66px; }

.brand-name{
  font-weight:900;
  letter-spacing:.2px;
  color:var(--brand);
}

.brand-sub{
  color:var(--muted);
  font-size:.92rem;
}

.nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.nav-link{
  color:var(--brand);
  padding:8px 10px;
  border-radius:10px;
  font-weight:800;
}

.nav-link:hover{
  background:rgba(34,61,113,.08);
  text-decoration:none;
}

.section{ padding:26px 0; }

.page-stack{
  display:grid;
  gap:14px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:18px;
}

h1{ margin:0 0 10px; font-size:2rem; }
h2{ margin:0 0 12px; font-size:1.35rem; }
h3{ margin:0 0 10px; font-size:1.08rem; }
h4{ margin:0 0 8px; font-size:1rem; }

.bio{ margin:0 0 10px; }
.desc{ margin:0 0 10px; color:var(--muted); }
.muted{ color:var(--muted); }
.small{ margin:0; font-size:.92rem; }

.selector-card{
  display:grid;
  gap:12px;
}

.selector-label{
  margin:0;
  font-weight:800;
  color:var(--text);
}

.scale-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.entity-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.selected-selection-line{
  margin:0;
  display:flex;
  gap:8px;
  align-items:center;
}

.selected-selection-line strong{ color:var(--brand); }

.btn{
  border:none;
  padding:10px 12px;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  font:inherit;
}

.btn:hover{ background:#1b325e; }

.btn.is-active{
  background:#1b325e;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}

.btn-alt{
  background:transparent;
  color:var(--brand);
  border:1px solid rgba(34,61,113,.35);
}

.btn-alt:hover{ background:rgba(34,61,113,.08); }
.btn-alt.is-active{
  background:#1b325e;
  border-color:#1b325e;
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}

.selector-btn{
  transition:background .16s ease, color .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.error-box{
  margin:0;
  border:1px solid rgba(154,52,18,.35);
  background:rgba(154,52,18,.08);
  color:var(--low);
  border-radius:10px;
  padding:10px 12px;
  font-weight:700;
}

.app-card,
.results-card{
  display:grid;
  gap:12px;
}

.questionnaire{
  display:grid;
  gap:12px;
}

.blocks{
  display:grid;
  gap:12px;
}

.block{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:#fff;
}

.question{
  border-top:1px solid var(--border);
  padding-top:10px;
  margin-top:10px;
}

.question:first-of-type{
  border-top:none;
  padding-top:0;
  margin-top:0;
}

.question-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.question p{ margin:0 0 6px; font-weight:700; }

.question.is-missing{
  outline:2px solid rgba(154,52,18,.30);
  outline-offset:4px;
  border-radius:10px;
  background:rgba(154,52,18,.06);
}

.question.is-missing .question-head p{
  color:var(--low);
}

.missing-note{
  margin:8px 0 0;
  color:var(--low);
  font-size:.86rem;
  font-weight:700;
}

.btn-info{
  border:1px solid rgba(34,61,113,.35);
  background:#fff;
  color:var(--brand);
  border-radius:999px;
  padding:4px 10px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}

.btn-info:hover{ background:rgba(34,61,113,.08); }

.info-text{
  margin:0 0 8px;
  color:var(--muted);
  font-size:.93rem;
}

.options{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
}

.choice{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 6px;
  background:#fff;
  cursor:pointer;
}

.choice input{ margin:0; accent-color:var(--brand); }

.choice span{
  font-size:.88rem;
  font-weight:700;
  color:var(--muted);
}

.choice.is-selected{
  border-color:rgba(34,61,113,.35);
  background:rgba(34,61,113,.08);
}

.choice.is-selected span{ color:var(--brand); }

.choice.choice-np{
  border-color:rgba(107,114,128,.45);
  background:rgba(107,114,128,.08);
}

.choice.choice-np input{
  accent-color:#6b7280;
}

.choice.choice-np span{
  color:#6b7280;
}

.choice.choice-np.is-selected{
  border-color:rgba(75,85,99,.55);
  background:rgba(107,114,128,.20);
}

.choice.choice-np.is-selected span{
  color:#4b5563;
}

.level{
  margin:0;
  font-weight:900;
  display:inline-block;
  border-radius:999px;
  padding:6px 12px;
}

.level.low{ background:rgba(154,52,18,.12); color:var(--low); }
.level.mid{ background:rgba(146,64,14,.12); color:var(--mid); }
.level.high{ background:rgba(22,101,52,.14); color:var(--high); }
.level.neutral{ background:rgba(75,85,99,.10); color:var(--muted); }

.result-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}

.result-list li{
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  background:#fff;
}

.result-list strong{ color:var(--brand); }

.footer{
  padding:18px 0;
  color:var(--muted);
}

@media (max-width:900px){
  .options{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:640px){
  .topbar-inner{
    min-height:92px;
    align-items:flex-start;
    padding-top:10px;
    padding-bottom:10px;
  }

  .brand{ flex-direction:column; align-items:flex-start; }
  .logos{ gap:8px; }
  .logo{ height:46px; }
  .logo-bifi{ height:52px; }
  h1{ font-size:1.55rem; }
  .question-head{ flex-direction:column; }
  .options{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}