body { font-family: Arial; text-align:center; background:#f8faff; margin:0; }
.title { color:#00bfff; font-weight:bold; }
.btn { padding:10px 20px; border:none; cursor:pointer; border-radius:8px; margin:5px; }
.btn.yellow { background: #FFD700; }
.btn.blue { background: #00bfff; color:#fff; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:10px; margin:20px; }
.box { background:white; padding:20px; border-radius:12px; box-shadow:0 0 5px #ccc; cursor:pointer; font-weight:bold; font-size:1.2em; }
.login-box { width:300px; margin:100px auto; background:white; padding:20px; border-radius:12px; box-shadow:0 0 10px #ccc; }
.icon { font-size:3em; }
.copy { margin-top:15px; font-size:0.9em; }
.banner { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); display:flex; justify-content:center; align-items:center; }
.banner-content { background:white; padding:30px; border-radius:12px; text-align:center; }
.banner.hidden { display:none; }
.progress-bar { width:80%; height:20px; margin:10px auto; background:#ddd; border-radius:10px; }
#progress { height:100%; width:0%; background:linear-gradient(to right, red, orange, yellow, green); border-radius:10px; }
.question-box { margin:20px; font-weight:bold; color:#00bfff; }
.answer { background:white; margin:10px auto; padding:10px; border-radius:8px; width:80%; cursor:pointer; font-weight:bold; }
.answer.correct { background:#90ee90; }
.answer.incorrect { background:#ff4c4c; color:white; position:relative; }
.answer.incorrect::after { content:"Your Answer"; position:absolute; right:10px; top:50%; transform:translateY(-50%); color:white; font-weight:bold; border:1px solid black; padding:2px 6px; background:red; }