/* Quiz Sensei — professional ed-tech theme (Kognity/Stile idiom: flat surfaces, restrained indigo accent, soft shadows) */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #17203a;
  background: #f4f6fa url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><g fill='none' stroke='%23ccd4e6' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'><circle cx='65' cy='65' r='5' fill='%23ccd4e6'/><ellipse cx='65' cy='65' rx='28' ry='12'/><ellipse cx='65' cy='65' rx='28' ry='12' transform='rotate(60 65 65)'/><ellipse cx='65' cy='65' rx='28' ry='12' transform='rotate(-60 65 65)'/><path d='M185 35h20M189 35v18l-13 24a7 7 0 0 0 6 10h26a7 7 0 0 0 6-10l-13-24V35'/><path d='M182 70h26'/><path d='M186 80h18'/><path d='M38 172h44v40H38z'/><path d='M82 172h38v40H82'/><path d='M82 172v40'/><path d='M46 183h28M46 192h28M90 183h22M90 192h22'/><path d='M172 202l28-28 12 12-28 28-16 4z'/><path d='M200 174l6-6a6 6 0 0 1 8 8l-6 6'/></g></svg>") repeat fixed;
  min-height: 100vh;
}
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }

.brand { padding: 28px 16px 4px; text-align: center; }
.brand .logo {
  display: inline-block; font-weight: 800; font-size: 1.05rem; letter-spacing: .3px; color: #fff;
  background: #1b2a6b;
  padding: 10px 22px; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(27, 42, 107, .28);
}
.brand .tagline { display: block; margin-top: 9px; color: #5d6b82; font-size: .78rem; letter-spacing: 1.8px; text-transform: uppercase; }

.wrap { max-width: 720px; margin: 0 auto; padding: 18px 16px 64px; animation: rise .35s ease both; }
h1 { font-size: 1.65rem; letter-spacing: -.01em; margin: .4em 0 .3em; color: #101a33; }
h2 { font-size: 1.12rem; margin-top: 2rem; color: #1b2a6b; }

.card {
  background: #fff;
  border: 1px solid #e4e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  margin: 14px 0;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05);
}
label { display: block; font-weight: 600; margin: 12px 0 4px; color: #33405c; font-size: .95rem; }
input[type=text], input[type=password], input[type=number], textarea, select {
  width: 100%; padding: 10px 12px; border: 1.5px solid #d2d9e5; border-radius: 10px;
  font-size: 1rem; background: #fff; transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79, 70, 229, .12);
}
input[type=file] { padding: 8px 0; }
textarea { min-height: 90px; font-family: inherit; }

button, .btn {
  display: inline-block; background: #4f46e5;
  color: #fff; border: 0; border-radius: 10px; padding: 11px 22px; font-size: .98rem;
  font-weight: 700; letter-spacing: .1px; cursor: pointer; text-decoration: none; margin-top: 12px;
  box-shadow: 0 1px 3px rgba(79, 70, 229, .3);
  transition: background .12s, transform .12s, box-shadow .12s;
}
button:hover, .btn:hover { background: #4338ca; box-shadow: 0 3px 10px rgba(79, 70, 229, .35); }
button:active, .btn:active { transform: translateY(1px); }
.btn.secondary, button.secondary {
  background: #fff; color: #4f46e5; border: 1.5px solid #c9d2f6; box-shadow: none;
}
.btn.secondary:hover, button.secondary:hover { background: #eef1fd; }
.btn.secondary.requested, button.secondary.requested {
  background: #33405c; color: #e2e8f0; border-color: #33405c;
}
.btn.secondary.requested:hover { background: #232f45; }

.opt {
  display: block; background: #fff; border: 1.5px solid #dde3ec; border-radius: 10px;
  padding: 12px 15px; margin: 8px 0; cursor: pointer; font-weight: 400;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.opt:hover { border-color: #4f46e5; background: #f6f7fe; }
.opt:has(input:checked) {
  border-color: #4f46e5; background: #eef0fe;
  font-weight: 600; box-shadow: 0 1px 6px rgba(79, 70, 229, .15);
}
.opt input { accent-color: #4f46e5; margin-right: 9px; transform: scale(1.15); }

table {
  width: 100%; border-collapse: separate; border-spacing: 0; background: #fff;
  border: 1px solid #e4e8f0; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05);
}
th, td { padding: 11px 13px; border-bottom: 1px solid #eef1f6; text-align: left; font-size: .95rem; }
th {
  background: #f7f9fd; font-weight: 700; color: #33405c;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .5px;
}
tr:last-child td { border-bottom: 0; }
tr:hover td { background: #f7f8fc; }

.pass { color: #15803d; font-weight: 700; }
.fail { color: #dc2626; font-weight: 700; }
.muted { color: #5d6b82; font-size: .9rem; }
.flash {
  background: #ecfdf3; border: 1px solid #b9e7c8;
  border-radius: 10px; padding: 12px 16px; margin: 12px 0;
}
.error {
  background: #fef2f2; border: 1px solid #f3c2c2;
  border-radius: 10px; padding: 12px 16px; margin: 12px 0;
}
.badge {
  display: inline-block; background: #f59e0b;
  color: #fff; border-radius: 999px; padding: 3px 11px; font-size: .78rem; font-weight: 800;
}
.review { border-left: 4px solid #cbd5e1; }
.review.right { border-left-color: #16a34a; background: #f4fbf6; }
.review.wrong { border-left-color: #dc2626; background: #fef5f5; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 10px; }
.topbar h1 { margin: 0; }
.topbar a { color: #4f46e5; text-decoration: none; font-size: .9rem; font-weight: 600; }
a { color: #4f46e5; }
code.mono {
  background: #eef1fd; padding: 3px 10px; border-radius: 8px;
  font-size: 1.05rem; letter-spacing: 2.5px; font-weight: 800; color: #1b2a6b;
  border: 1px solid #c9d2f6;
}
.scorebig { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; margin: 2px 0; color: #1b2a6b; }
.medal { font-size: 1.15rem; }
.small { font-size: .85rem; }
.gsi-wrap { display: flex; justify-content: center; padding: 6px 0 2px; }
.credit { text-align: center; padding: 1.4em 0 1.8em; font-size: .8rem; color: #5d6b82; }
.credit a { color: #4f46e5; text-decoration: none; font-weight: 600; }
details.card summary { cursor: pointer; font-weight: 600; }
.optlist { margin-top: 10px; }
.optrow { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: .9rem; }
.optkey { min-width: 22px; font-weight: 800; color: #5d6b82; text-align: center; }
.optrow.optcorrect .optkey { color: #16a34a; }
.opttext { flex: 0 1 45%; }
.optbar { flex: 1; background: #e7ebf2; border-radius: 6px; height: 10px; overflow: hidden; }
.optbar > span { display: block; height: 100%; background: #4f46e5; }
.optrow.optcorrect .optbar > span { background: #16a34a; }
.optrow.optdistractor .optbar > span { background: #dc2626; }
.optpct { min-width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.optrow.optdistractor .optpct { color: #dc2626; font-weight: 700; }
.qimg { display: block; max-width: 100%; border-radius: 12px; margin: 4px 0 10px; border: 1px solid #e4e8f0; background: #fff; }