body{
  font-family: 'Inter', sans-serif;
  background:#f5f7fb;
  margin:0;
  padding:40px;
}

h1{
  margin-bottom:10px;
}

p{
  color:#555;
}

/* -----------------------------
SYSTEM GRID
----------------------------- */

.systems-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
  gap:16px;
  margin-top:30px;
}

/* -----------------------------
CATEGORY CARD
----------------------------- */

.category-card{

  background:white;
  border-radius:8px;
  padding:18px;

  box-shadow:0 2px 6px rgba(0,0,0,0.08);

  cursor:pointer;
  transition:all .2s ease;

}

.category-card:hover{

  transform:translateY(-3px);
  box-shadow:0 6px 14px rgba(0,0,0,0.12);

}


.category-card h3{
  font-size:15px;
  font-weight:600;
  margin:0 0 8px 0;
}

.category-card p{
  font-size:13px;
  color:#888;
}

/* -----------------------------
QUESTION BLOCK
----------------------------- */

.question-block{

  background:white;
  padding:20px;
  border-radius:8px;
  margin-top:20px;

  box-shadow:0 2px 6px rgba(0,0,0,0.08);

}

.question{
  font-size:18px;
  margin-bottom:18px;
}

/* -----------------------------
ANSWER BUTTONS
----------------------------- */

.answers{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:16px;
}

.answers button{

  padding:12px;
  border-radius:6px;

  border:1px solid #d9dee8;

  background:white;
  color:#1a1a1a;

  font-weight:500;

  cursor:pointer;
  transition:all .15s ease;

}

.answers button:hover{

  background:#f3f6fb;
  border-color:#c9d2e3;

}

/* -----------------------------
LOCKED MESSAGE
----------------------------- */

.locked{

  margin-top:16px;
  font-size:13px;
  color:#999;

}

/* -----------------------------
INSPECTOR RESPONSE
----------------------------- */

.inspector-answer{

  font-weight:bold;
  font-size:18px;
  margin:10px 0;

}

button{
  padding:12px 18px;
  border-radius:6px;
  border:none;
  background:#2f6df6;
  color:white;
  cursor:pointer;
}

button:hover{
  background:#2456c9;
}

#questionBox > button{
  padding:12px 18px;
  border-radius:6px;
  border:none;
  background:#2f6df6;
  color:white;
  cursor:pointer;
}

/* -----------------------------
ICONS
----------------------------- */

.system-header{

  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:6px;

}

.system-icon{

  font-size:20px;

}

/* -----------------------------
 VERDICT
----------------------------- */
.verdict{

  background:white;
  padding:24px;
  border-radius:10px;

  box-shadow:0 2px 8px rgba(0,0,0,0.1);

  margin-top:20px;

}

.verdict h3{

  margin-top:20px;

}