:root{
  --bg:#f4f8fc;
  --panel:#ffffff;
  --panel-soft:#f8fbff;
  --line:#dbe7f5;
  --text:#142033;
  --muted:#61708a;
  --muted2:#8493aa;
  --blue:#1f7fd1;
  --blue2:#4aa9f5;
  --blue-soft:#eaf5ff;
  --orange:#f28c28;
  --orange2:#ffb15c;
  --orange-soft:#fff2e4;
  --green:#20a66b;
  --red:#e94b4b;
  --shadow:0 18px 45px rgba(31,82,130,.10);
  --shadow2:0 10px 28px rgba(31,82,130,.08);
  --radius:24px;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left,rgba(31,127,209,.13),transparent 28%),
    radial-gradient(circle at 85% 0%,rgba(242,140,40,.13),transparent 22%),
    linear-gradient(180deg,#f8fbff 0%,#eef5fc 100%);
}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
h1,h2,h3,p{margin:0}

.hidden{display:none!important}

.page{min-height:100vh}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:18px;
  padding:12px 18px;
  border-bottom:1px solid rgba(31,127,209,.16);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  box-shadow:0 10px 28px rgba(31,82,130,.08);
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:250px;
}

.brand-mark{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:950;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),#66baf7);
  box-shadow:0 12px 25px rgba(31,127,209,.22);
}

.brand-title{
  font-size:17px;
  font-weight:950;
  line-height:1.05;
  color:#12243b;
}

.brand-sub{
  margin-top:2px;
  color:var(--muted2);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:850;
}

.nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  overflow:auto;
  padding:3px 2px;
  scrollbar-width:none;
}

.nav::-webkit-scrollbar{display:none}

.nav a{
  white-space:nowrap;
  padding:10px 13px;
  border-radius:999px;
  color:#46627f;
  font-weight:850;
  font-size:13px;
  border:1px solid transparent;
  transition:.18s ease;
}

.nav a:hover{
  color:var(--blue);
  background:var(--blue-soft);
  border-color:#cde7fb;
  transform:translateY(-1px);
}

.nav a.active{
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  box-shadow:0 12px 25px rgba(31,127,209,.20);
}

.top-actions{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:max-content;
}

.school-select,.user-pill,.status-chip{
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #e0e9f5;
  border-radius:999px;
  background:#fff;
  box-shadow:var(--shadow2);
  font-size:12px;
  font-weight:850;
  color:#23496f;
}

.school-select{padding:9px 13px}
.user-pill{padding:7px 10px 7px 7px}
.status-chip{padding:9px 13px}
.status-chip.soft{background:var(--blue-soft);color:var(--blue);border-color:#cde7fb}

.avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  font-size:11px;
  font-weight:950;
}

.wrap{
  width:min(1460px,calc(100% - 36px));
  margin:22px auto 46px;
}

.dashboard-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}

.page-kicker,.mini-kicker{
  color:var(--blue);
  font-size:12px;
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.page-title{
  margin:3px 0 4px;
  color:#10243b;
  font-size:30px;
  letter-spacing:-.035em;
  line-height:1;
  font-weight:950;
}

.page-sub{
  color:var(--muted);
  font-size:13px;
  font-weight:650;
}

.head-actions,.actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.layout{
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:18px;
  align-items:start;
}

.side{
  display:grid;
  gap:16px;
  position:sticky;
  top:82px;
}

.section,.side-card{
  border:1px solid rgba(205,224,243,.92);
  border-radius:var(--radius);
  background:rgba(255,255,255,.94);
  box-shadow:var(--shadow);
}

.section{padding:20px}
.side-card{padding:18px}

.login-card{
  width:min(460px,100%);
  margin:42px auto 0;
}

.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.section-head h2{
  margin-top:3px;
  font-size:21px;
  letter-spacing:-.02em;
  color:#142033;
}

.section-head p{
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
  font-weight:650;
  line-height:1.45;
}

.form-grid{
  display:grid;
  gap:13px;
}

label{
  display:grid;
  gap:7px;
  color:#3f5570;
  font-size:12px;
  font-weight:900;
}

input,select,textarea{
  width:100%;
  border:1px solid #d5e3f1;
  border-radius:15px;
  padding:12px 13px;
  background:#fff;
  color:#13243a;
  outline:none;
  box-shadow:0 7px 18px rgba(31,82,130,.04);
}

textarea{resize:vertical}

input:focus,select:focus,textarea:focus{
  border-color:#86c6f6;
  box-shadow:0 0 0 4px rgba(31,127,209,.10);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 15px;
  border-radius:14px;
  border:1px solid #d8e5f3;
  color:#244361;
  background:#fff;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  box-shadow:var(--shadow2);
  transition:.18s ease;
}

.btn:hover{
  transform:translateY(-1px);
  border-color:#bddcf5;
}

.btn.primary{
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  border-color:transparent;
  box-shadow:0 14px 28px rgba(31,127,209,.20);
}

.btn.ghost{
  background:#edf4fb;
  color:#284663;
}

.btn.link{
  background:#fff;
  color:var(--blue);
}

.btn.wide{width:100%}

button:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none!important;
}

.event-box{
  border:1px dashed #cfe1f3;
  border-radius:20px;
  background:linear-gradient(180deg,#f8fbff,#ffffff);
  padding:15px;
  margin-bottom:14px;
}

.event-title{
  font-weight:950;
  font-size:13px;
  color:#244361;
  margin-bottom:8px;
}

.events{
  margin:0;
  padding-left:20px;
  color:#526d88;
  font-size:13px;
  font-weight:650;
  line-height:1.7;
}

.questions{
  display:grid;
  gap:14px;
}

.question{
  border:1px solid #dce9f6;
  border-radius:20px;
  background:#fff;
  padding:16px;
  box-shadow:var(--shadow2);
}

.question strong{
  display:block;
  margin-bottom:12px;
  color:#142033;
  font-size:15px;
  line-height:1.45;
}

.choices{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.choice{
  border:1px solid #d9e6f2;
  border-radius:14px;
  padding:10px 12px;
  background:#fbfdff;
  color:#334d68;
  font-size:13px;
  font-weight:750;
}

.choice.correct{
  border-color:#8dd9b4;
  background:#effbf5;
  color:#127044;
}

.empty-state{
  min-height:260px;
  place-items:center;
  text-align:center;
  border:1px dashed #cfe1f3;
  border-radius:22px;
  background:rgba(255,255,255,.62);
  padding:34px;
  color:var(--muted);
}

.empty-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  font-size:26px;
  font-weight:950;
  box-shadow:0 16px 30px rgba(31,127,209,.20);
}

.empty-state h3{
  margin-top:12px;
  color:#18324d;
  font-size:18px;
}

.empty-state p{
  margin-top:5px;
  font-size:13px;
  font-weight:650;
}

.check-list{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:grid;
  gap:9px;
  color:#526d88;
  font-size:13px;
  font-weight:750;
}

.check-list li{
  display:flex;
  gap:8px;
  align-items:flex-start;
}

.check-list li::before{
  content:"✓";
  color:var(--green);
  font-weight:950;
}

@media (max-width:1020px){
  .layout{grid-template-columns:1fr}
  .side{position:static}
  .topbar{align-items:flex-start;flex-wrap:wrap}
  .brand{min-width:0}
  .top-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}
}

@media (max-width:720px){
  .wrap{width:min(100% - 24px,1460px)}
  .dashboard-head,.review-head{align-items:flex-start;flex-direction:column}
  .choices{grid-template-columns:1fr}
  .nav{order:3;width:100%}
  .page-title{font-size:25px}
}

.message-box{
  margin:0 0 14px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid #d8e5f3;
  background:#fff;
  color:#284663;
  font-size:13px;
  font-weight:850;
  box-shadow:0 10px 28px rgba(31,82,130,.08);
}

.message-box:empty{display:none}

.message-box.success{
  border-color:#91d8b5;
  background:#effbf5;
  color:#127044;
}

.message-box.error{
  border-color:#f2b4b4;
  background:#fff1f1;
  color:#b42323;
}