:root{
  --ink:#16242f;
  --ink-2:#22394a;
  --ink-3:#3d5668;
  --paper:#eef1ee;
  --card:#ffffff;
  --line:#d6dbd8;
  --teal:#0f766a;
  --teal-dk:#0b564d;
  --amber:#c8891d;
  --rose:#a8412f;
  --text:#1c2b24;
  --muted:#657872;
  --radius:4px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper);
  color:var(--text);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal-dk)}
button{font:inherit}
input,select{font:inherit}

/* ============ login ============ */
.auth-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    linear-gradient(180deg,rgba(22,36,47,.94),rgba(22,36,47,.94)),
    repeating-linear-gradient(135deg,#1d3040 0 14px,#1a2b39 14px 28px);
}
.auth-card{
  width:100%;
  max-width:380px;
  background:var(--card);
  border-radius:var(--radius);
  padding:36px 32px 28px;
  border-top:5px solid var(--teal);
}
.auth-card.super{border-top-color:var(--amber)}
.auth-card h1{
  margin:0 0 4px;
  font-size:22px;
  font-weight:650;
  letter-spacing:-.01em;
}
.auth-card p.sub{margin:0 0 26px;color:var(--muted);font-size:14px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--ink-3);margin-bottom:6px}
.field input{
  width:100%;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:#fbfcfb;
}
.field input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.btn{
  display:inline-block;width:100%;
  padding:11px 16px;border:0;border-radius:var(--radius);
  background:var(--teal);color:#fff;font-weight:600;cursor:pointer;
}
.btn:hover{background:var(--teal-dk)}
.btn.amber{background:var(--amber)}
.btn.amber:hover{background:#a8710f}
.btn.ghost{
  width:auto;background:transparent;color:var(--ink-3);
  border:1px solid var(--line);font-weight:500;
}
.btn.ghost:hover{background:#f3f5f3}
.alert{
  padding:10px 12px;border-radius:var(--radius);
  background:#fbeceb;color:var(--rose);font-size:14px;margin-bottom:18px;
  border-left:3px solid var(--rose);
}
.alert.ok{background:#e9f4ef;color:var(--teal-dk);border-left-color:var(--teal)}
.switch-link{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);text-align:center;
}

/* ============ shell ============ */
.shell{display:flex;min-height:100vh}

.side{
  width:230px;flex:0 0 230px;
  background:var(--ink);color:#c8d4dc;
  display:flex;flex-direction:column;
}
.brand{padding:22px 22px 18px;border-bottom:1px solid #2b4356}
.brand strong{display:block;color:#fff;font-size:15.5px;font-weight:650;letter-spacing:-.01em}
.brand span{font-size:12.5px;color:#7f97a8}

.side-head{
  padding:20px 22px 8px;font-size:12.5px;color:#7f97a8;
}
.grade-list{padding:0 14px 20px;display:flex;flex-direction:column;gap:2px}
.grade-btn{
  display:flex;align-items:center;gap:12px;
  width:100%;text-align:left;
  padding:11px 12px;border:0;border-radius:var(--radius);
  background:transparent;color:#c8d4dc;cursor:pointer;
}
.grade-btn:hover{background:#22394a;color:#fff}
.grade-btn.active{background:var(--teal);color:#fff}
.grade-btn .num{
  font-size:17px;font-weight:650;min-width:22px;color:#fff;
}
.grade-btn .lbl{font-size:14px}

.side-foot{margin-top:auto;padding:18px 22px;border-top:1px solid #2b4356;font-size:13px}
.side-foot .who{color:#fff;font-weight:600}
.side-foot .role{color:#7f97a8;font-size:12.5px;margin-bottom:10px}
.side-foot a{display:block;color:#9fb6c4;text-decoration:none;padding:4px 0}
.side-foot a:hover{color:#fff;text-decoration:underline}

.main{flex:1;min-width:0;padding:26px 34px 60px}
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:13.5px;color:var(--muted);margin-bottom:6px;min-height:22px;
}
.crumbs button{
  background:none;border:0;padding:0;color:var(--teal-dk);
  cursor:pointer;text-decoration:underline;
}
.crumbs .sep{color:#aab6b1}
h2.stage{margin:0 0 4px;font-size:25px;font-weight:650;letter-spacing:-.015em}
p.stage-sub{margin:0 0 26px;color:var(--muted)}

.empty{
  background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);
  padding:60px 30px;text-align:center;color:var(--muted);
}
.empty strong{display:block;color:var(--text);font-size:17px;margin-bottom:6px;font-weight:600}

/* subject tiles */
.subject-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.subject-tile{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--teal);
  border-radius:var(--radius);padding:16px 18px;
}
.subject-tile:hover{border-color:var(--teal);background:#f8fbfa}
.subject-tile .name{font-weight:600;font-size:15.5px}
.subject-tile .meta{font-size:12.5px;color:var(--muted);margin-top:3px}

/* week strip — weeks are a real sequence, so numbers carry meaning */
.week-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.week-btn{
  cursor:pointer;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 14px;text-align:left;
}
.week-btn:hover{border-color:var(--teal);background:#f8fbfa}
.week-btn .wk{font-size:12.5px;color:var(--muted)}
.week-btn .wn{font-size:26px;font-weight:650;line-height:1.1;letter-spacing:-.02em}

/* test choice */
.test-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;max-width:660px}
.test-card{
  cursor:pointer;text-align:left;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;
}
.test-card:hover{border-color:var(--teal);background:#f8fbfa}
.test-card .t{font-size:18px;font-weight:650;margin-bottom:4px}
.test-card .d{font-size:13.5px;color:var(--muted)}
.test-card .c{font-size:13px;color:var(--teal-dk);margin-top:10px}

/* score entry */
.entry{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);max-width:620px}
.entry-head{padding:18px 22px;border-bottom:1px solid var(--line)}
.entry-head .t{font-weight:650;font-size:16.5px}
.entry-head .d{font-size:13px;color:var(--muted)}
.score-row{
  display:flex;align-items:center;gap:16px;
  padding:12px 22px;border-bottom:1px solid #edf0ee;
}
.score-row:last-of-type{border-bottom:0}
.score-chip{
  width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;
  border-radius:var(--radius);font-size:19px;font-weight:650;color:#fff;
}
.s5{background:#0f766a}.s4{background:#3f8f5e}.s3{background:#c8891d}
.s2{background:#c06a2a}.s1{background:#a8412f}
.score-row .cap{flex:1;font-size:14px;color:var(--ink-3)}
.score-row .bar{
  flex:0 0 120px;height:6px;background:#eceeec;border-radius:3px;overflow:hidden;
}
.score-row .bar i{display:block;height:100%;background:var(--teal);width:0;transition:width .18s}
.score-row input{
  width:84px;padding:8px 10px;text-align:right;
  border:1px solid var(--line);border-radius:var(--radius);background:#fbfcfb;
}
.score-row input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.entry-foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 22px;border-top:1px solid var(--line);background:#f8faf9;
}
.entry-foot .stat{font-size:13.5px;color:var(--muted)}
.entry-foot .stat b{color:var(--text);font-size:15px}
.entry-foot .spacer{flex:1}
.entry-foot .btn{width:auto;padding:9px 20px}
.saved-note{font-size:13.5px;color:var(--teal-dk)}

/* accounts page */
.page{max-width:900px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:24px}
.panel h3{margin:0;padding:16px 20px;border-bottom:1px solid var(--line);font-size:16px;font-weight:650}
.panel .body{padding:20px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 20px;border-bottom:1px solid #edf0ee}
th{font-size:12.5px;color:var(--muted);font-weight:600}
tbody tr:last-child td{border-bottom:0}
.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;background:#e9f4ef;color:var(--teal-dk)}
.tag.super{background:#fbf1de;color:#8a5c05}
.tag.off{background:#f1eded;color:var(--rose)}
.inline-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inline-form .full{grid-column:1/-1}
.inline-form .btn{width:auto;padding:10px 22px}

@media (max-width:860px){
  .shell{flex-direction:column}
  .side{width:100%;flex:none}
  .grade-list{flex-direction:row;flex-wrap:wrap}
  .grade-btn{width:auto}
  .side-foot{margin-top:0}
  .main{padding:20px 18px 50px}
  .inline-form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}