:root{
  --bg: #0b1220;
  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.08);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.7);
  --muted2: rgba(255,255,255,0.55);
  --accent: #7c5cff;
  --accent2: #20e3b2;
  --danger: #ff5c7a;
  --good: #20e3b2;
  --shadow: 0 18px 50px rgba(0,0,0,0.45);
  --radius: 18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1100px 700px at 15% 10%, rgba(124,92,255,0.35), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(32,227,178,0.28), transparent 55%),
    radial-gradient(900px 600px at 60% 95%, rgba(255,92,122,0.18), transparent 50%),
    var(--bg);
}

.app{max-width: 980px; margin: 0 auto; padding: 18px; min-height: 100%; display:flex; flex-direction:column; gap:16px}

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.brand{display:flex; gap:12px; align-items:center}
.logo{
  width:42px; height:42px; border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: rgba(0,0,0,0.85);
  font-weight: 900;
}
.title{font-weight: 800; letter-spacing: 0.2px}
.subtitle{color: var(--muted2); font-size: 12px; margin-top: 2px}

.card{
  flex:1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  backdrop-filter: blur(10px);
}

.screen{animation: fadeIn 180ms ease-out}
.hidden{display:none}

h1{margin: 6px 0 10px; font-size: 34px}
h2{margin: 0 0 10px; font-size: 18px}
.lead{color: var(--muted); margin: 0 0 14px}
.hint{color: var(--muted2); margin: 8px 0 0; font-size: 13px}

.grid{display:grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 18px}
.panel{
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

.row{display:flex; gap:10px; align-items:center; padding: 8px 6px; user-select:none}
.row input{transform: scale(1.15)}

.segmented{display:flex; gap:8px}
.seg{
  flex:1;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 700;
}
.seg[aria-pressed="true"]{
  background: linear-gradient(135deg, rgba(124,92,255,0.38), rgba(32,227,178,0.22));
  border-color: rgba(124,92,255,0.55);
}

.stats{display:flex; gap:10px}
.stat{flex:1; padding: 10px; border-radius: 14px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06)}
.statLabel{color: var(--muted2); font-size: 12px}
.statValue{font-weight: 900; font-size: 22px; font-family: var(--mono)}

.primary{
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: rgba(0,0,0,0.86);
  font-weight: 900;
  padding: 12px 14px;
  border-radius: 16px;
}
.primary.big{width:100%; padding: 16px 18px; font-size: 16px}

.ghost{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
}

.quizHeader{display:flex; gap:10px; align-items:center; margin-bottom: 14px}
.pill{padding: 8px 10px; border-radius: 999px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08); color: var(--muted)}
.progress{flex:1; height: 12px; border-radius: 999px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08); overflow:hidden}
.progressBar{height:100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent2));}

.problem{
  font-size: 52px;
  font-weight: 900;
  text-align:center;
  padding: 18px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  margin: 10px 0 14px;
}

.answer{display:flex; gap: 10px; justify-content:center; align-items:center}
#answerInput{
  width: min(320px, 60vw);
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  color: var(--text);
  font-size: 18px;
  text-align:center;
  font-family: var(--mono);
}

.opChoices{display:flex; gap:10px; justify-content:center; margin-top: 10px}
.opBtn{min-width: 64px; font-size: 20px; font-weight: 900; padding: 12px 14px}

.feedback{min-height: 26px; text-align:center; margin-top: 10px; font-weight: 800}
.feedback.good{color: var(--good)}
.feedback.bad{color: var(--danger)}

.actions{display:flex; justify-content:space-between; margin-top: 14px}

.results{padding: 12px 0 0}
.resultBig{font-size: 26px; font-weight: 900; margin: 8px 0 6px}
.resultSmall{color: var(--muted); margin: 4px 0}

.footer{color: var(--muted2); text-align:center; font-size: 12px; padding-bottom: 8px}

button{cursor:pointer}
button:active{transform: translateY(1px)}

@media (max-width: 880px){
  .grid{grid-template-columns: 1fr}
  .problem{font-size: 44px}
}

@keyframes fadeIn{from{opacity:0; transform: translateY(3px)} to{opacity:1; transform: translateY(0)}}