body {
  font-family: Arial, sans-serif;
  background: #ffffff;
  color: #0a0a0a;
  display: flex;
  justify-content: center;
  padding: 20px;
}

.aeb-container {
  width: 100%;
  max-width: 960px;
}

h1 {
  color: #22c55e; /* green */
}

.subtitle {
  color: #ca8a04; /* yellow */
  margin-bottom: 10px;
}

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

select,
input {
  padding: 8px;
  border-radius: 10px;
  border: 2px solid #22c55e;
}

button {
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  background: #22c55e;
  color: white;
}

button:hover {
  background: #65dd84;
}

.timer-box b {
  color: #ca8a04;
}

.card {
  background: white;
  border: 2px solid #22c55e;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
}

.level {
  color: #ca8a04;
  margin-bottom: 6px;
}

.equation {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
}

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

input.correct {
  background: #eaffef;
  border-color: #22c55e;
}

input.wrong {
  background: #fff7d1;
  border-color: #ca8a04;
}

.feedback {
  font-weight: bold;
  min-height: 22px;
}

svg {
  width: 100%;
  height: 400px;
  border: 2px solid #22c55e;
  border-radius: 14px;
  background: white;
}

/* Responsive for WordPress post/page */
@media(max-width:700px){
  .toolbar { flex-direction: column; }
  .input-row { flex-direction: column; align-items:flex-start; }
}