:root{
  --bg: linear-gradient(135deg,#e3f2fd 0%, #f3e5f5 50%, #fff3e0 100%);
  --card:#fff;
  --text:#2c3e50;
  --muted:#546e7a;
  --accent:#29b6f6;
  --accent2:#66bb6a;
  --warn:#ffb300;
  --danger:#e53935;
  --radius:18px;
  --shadow:0 10px 28px rgba(0,0,0,.10);
  --font:'Nunito','Comic Sans MS',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --touch:56px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg)}
.wrapper{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px}
.card{width:100%;max-width:920px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;position:relative;overflow:hidden}

/* Choice buttons */
.btn.choice{min-width:140px}
.btn.choice.selected{outline:4px solid #e53935; outline-offset:2px}
.btn.choice.selected{box-shadow:0 10px 26px rgba(229,57,53,.25)}
.header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.titleBox{flex:1;text-align:center}
.h1{margin:0;font-size:1.7rem;font-weight:900;letter-spacing:.5px}
.sub{margin:4px 0 0 0;color:var(--muted);font-size:.95rem}
.btn{min-height:var(--touch);border:none;border-radius:16px;padding:10px 14px;font-weight:900;font-size:1rem;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.12);transition:.15s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:linear-gradient(45deg,#607d8b,#78909c);color:#fff}
.btn.primary{background:linear-gradient(45deg,var(--accent2),#4caf50);color:#fff}
.btn.blue{background:linear-gradient(45deg,var(--accent),#1e88e5);color:#fff}
.btn.ghost{background:#eef6ff;color:var(--text);box-shadow:none;border:2px solid #d7ecff}
.btn.ghost.selected{outline:4px solid #e53935; outline-offset:2px; box-shadow:0 10px 26px rgba(229,57,53,.18)}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:10px 0 14px}
.pill{background:linear-gradient(45deg,#74b9ff,#6c5ce7);color:#fff;border-radius:999px;padding:6px 12px;font-weight:900}
.pill.muted{background:linear-gradient(45deg,#90a4ae,#607d8b)}
.pill.ok{background:linear-gradient(45deg,#00b894,#00cec9)}
.pill.warn{background:linear-gradient(45deg,#ffd166,#ffb300);color:#4a3b00}
.panel{background:linear-gradient(45deg,#e8f5e9,#e3f2fd);border-radius:var(--radius);padding:16px;box-shadow:0 8px 22px rgba(0,0,0,.08)}
.problem{font-size:3rem;font-weight:900;letter-spacing:2px;text-align:center;margin:6px 0 14px}
.row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.input{font-size:2.5rem;font-weight:900;text-align:center;width:160px;min-height:72px;border-radius:16px;border:4px solid var(--accent);outline:none}
.input:focus{border-color:var(--accent2);box-shadow:0 10px 26px rgba(102,187,106,.25)}
.feedback{min-height:54px;margin-top:10px;text-align:center;font-weight:900;font-size:1.2rem;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}
.feedback.ok{color:#1b5e20}
.feedback.ng{color:#b71c1c}
.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:12px}
.small{font-size:.9rem;color:var(--muted);text-align:center;margin-top:10px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#f6fbff;border:2px solid #d7ecff;font-weight:900;color:#1e88e5}
@media (max-width:420px){
  .problem{font-size:2.5rem}
  .input{width:140px;font-size:2.2rem}
  .h1{font-size:1.45rem}
}