:root{
  --bg:#0b1020;
  --card:#101a35;
  --muted:#a9b3d1;
  --text:#eef2ff;
  --accent:#ffcc66;
  --good:#b6f3c2;
  --bad:#ffb3b3;
  --missing:#b6d6ff;
  --ink:#0b1020;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:linear-gradient(180deg,#070a16, var(--bg));color:var(--text)}
a{color:var(--accent)}
.wrap{max-width:1000px;margin:0 auto;padding:16px}
.topbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:.2px}
.pill{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.04);color:var(--muted);font-size:13px}
.grid{display:grid;gap:12px}
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px}
.card h2{margin:0 0 10px;font-size:16px}
.muted{color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.btn{appearance:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--text);border-radius:12px;padding:10px 12px;font-weight:650;cursor:pointer}
.btn:hover{background:rgba(255,255,255,.1)}
.btn.primary{border-color:rgba(255,204,102,.55);background:rgba(255,204,102,.12)}
.btn.danger{border-color:rgba(255,140,140,.6);background:rgba(255,140,140,.12)}
input,select,textarea{width:100%;padding:10px 11px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);color:var(--text)}
textarea{min-height:90px;resize:vertical}
label{font-size:13px;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:720px){.two{grid-template-columns:1fr}}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tab{padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);cursor:pointer;font-size:13px;color:var(--muted)}
.tab.active{color:var(--text);border-color:rgba(255,204,102,.55);background:rgba(255,204,102,.10)}

.note{padding:10px 11px;border-radius:12px;color:var(--ink);font-weight:650;line-height:1.2}
.note small{display:block;font-weight:600;opacity:.75;margin-top:6px}
.note.good{background:var(--good)}
.note.bad{background:var(--bad)}
.note.missing{background:var(--missing)}
.note.gray{background:#e5e7eb}

.board{display:grid;grid-template-columns:repeat(5, 1fr);gap:10px}
@media(max-width:980px){.board{grid-template-columns:1fr 1fr}}
.col{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px;min-height:160px}
.col h3{margin:0 0 8px;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.stack{display:flex;flex-direction:column;gap:8px}

.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:720px){.kpi{grid-template-columns:1fr}}
.kpi .box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:12px}
.kpi .num{font-size:24px;font-weight:850}

.hr{height:1px;background:rgba(255,255,255,.10);margin:12px 0}
.tiny{font-size:12px}

/* Mobile tap targets */
.btn, input, select, textarea{min-height:44px}

/* Improve select dropdown contrast across browsers */
select{background:rgba(0,0,0,.28);color:var(--text);color-scheme:dark}
select:focus{outline:2px solid rgba(255,204,102,.55);outline-offset:2px}
select option, select optgroup{background:#0b1020;color:var(--text)}


/* wizard */
.steps{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.step{appearance:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03);color:var(--muted);
  border-radius:12px;padding:8px 10px;font-weight:700;font-size:13px}
.step.active{border-color:rgba(255,204,102,.7);color:var(--text);background:rgba(255,204,102,.12)}
.codebox{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background:rgba(0,0,0,.25);border:1px dashed rgba(255,255,255,.25);border-radius:12px;padding:10px;word-break:break-all}
.timelineFeed{display:grid;gap:10px}
.tlBlock{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px}
.tlItems{display:grid;gap:6px;margin-top:8px}
.tlItem{display:flex;gap:8px;align-items:flex-start;padding:8px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.02)}
.tlItem.good{border-color:rgba(182,243,194,.4);background:rgba(182,243,194,.10)}
.tlItem.bad{border-color:rgba(255,179,179,.35);background:rgba(255,179,179,.10)}
.tlMeta{font-size:12px;color:var(--muted);min-width:58px}
.voteGrid{display:grid;gap:12px}
@media(min-width:900px){.voteGrid{grid-template-columns:repeat(3,1fr)}}
.card.soft{background:rgba(255,255,255,.03)}
dialog{border:none;background:transparent}
dialog::backdrop{background:rgba(0,0,0,.55)}
.dialogCard{max-width:640px;margin:0 auto;background:var(--card);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px;color:var(--text)}
textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.18);color:var(--text);min-height:70px}

.tbl{width:100%;border-collapse:separate;border-spacing:0 8px}
.tbl th{font-size:12px;color:var(--muted);text-align:left;padding:0 8px}
.tbl td{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);padding:10px 8px;vertical-align:top}
.tbl td:first-child{border-radius:12px 0 0 12px}
.tbl td:last-child{border-radius:0 12px 12px 0}

.btn.good{border-color:rgba(182,243,194,.45)}
.btn.bad{border-color:rgba(255,179,179,.45)}
.btn.active{outline:2px solid rgba(255,204,102,.55)}


/* Admin/Teacher tables */
.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table th, .table td{ border-top:1px solid rgba(255,255,255,.08); padding:8px 10px; vertical-align:top; }
.table th{ text-align:left; color:rgba(255,255,255,.78); font-weight:600; }
.table tr:hover td{ background:rgba(255,255,255,.03); }
.nowrap{ white-space:nowrap; }



/* --- Contrast improvements for selects (dropdowns) --- */
select, option {
  color: #f9fafb;
}
select {
  background: #111827;
  border: 1px solid #374151;
}
select:focus {
  outline: none;
  border-color: #6b7280;
}