.console { max-width: 1040px; margin: 0 auto; padding: 28px 24px 40px; }
.loading { color: var(--ink-soft); }
.who { font-size: 0.9rem; opacity: 0.85; }
.icon-btn.text { padding: 0 14px; }
.console h1 { font-family: var(--font-read); font-size: 2rem; line-height: 1.15; margin: 0 0 14px; }
.console h2 { font-family: var(--font-read); font-size: 1.3rem; margin: 26px 0 12px; }
.card { background: #fff; border: 1px solid var(--mist); border-radius: var(--radius); padding: 22px 24px; }
.card.narrow { max-width: 460px; margin: 20px auto; }
.card h2 { margin-top: 0; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label { font-weight: 600; font-size: 0.92rem; }
.field input, .field select, textarea {
  font: inherit; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--mist); border-radius: 8px; background: var(--pearl); color: var(--navy);
}
textarea { width: 100%; min-height: 150px; resize: vertical; font-family: var(--font-ui); }
.field input:focus, .field select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(195, 149, 59, 0.25); }
.hint { margin: 2px 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.two { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.switch { margin: 14px 0 0; font-size: 0.92rem; }
.link-btn { background: none; border: 0; padding: 4px 2px; color: #7A5A1C; text-decoration: underline; cursor: pointer; font-size: 0.9rem; }
.link-btn.danger, .btn.danger { color: var(--wrong); }
.btn.small { min-height: 38px; padding: 0 16px; font-size: 0.9rem; }
.note { padding: 10px 14px; border-radius: 8px; margin: 0 0 14px; }
.note.error { background: var(--wrong-bg); color: #7E2A25; }
.note.ok { background: var(--correct-bg); color: #1E5A40; }
.greet { margin-top: 6px; }
.empty { color: var(--ink-soft); }

.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.class-card {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--mist); border-left: 4px solid var(--gold); text-decoration: none; color: inherit;
}
.class-card:hover { border-color: var(--gold); }
.cc-name { font-family: var(--font-read); font-size: 1.25rem; font-weight: 600; }
.cc-ds { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }
.cc-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 0.88rem; }
.code { font-family: var(--font-read); font-weight: 600; letter-spacing: 0.12em; background: var(--navy); color: var(--gold); padding: 2px 10px; border-radius: 6px; }
.code.big { font-size: 1.8rem; padding: 4px 16px; letter-spacing: 0.18em; }
.new-class { margin-top: 26px; }
.archived { margin-top: 26px; }
.archived summary { cursor: pointer; color: var(--ink-soft); margin-bottom: 12px; }

.back { font-size: 0.9rem; color: var(--ink-soft); }
.class-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 10px 0 18px; }
.class-head h1 { margin: 0; }
.code-box { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.code-label { font-size: 0.85rem; color: var(--ink-soft); }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.status-area:empty { display: none; }
.progress p { margin: 0 0 6px; }
.bar-track { height: 10px; border-radius: 99px; background: #EEE7D6; overflow: hidden; margin-bottom: 14px; }
.bar-track span { display: block; height: 100%; background: linear-gradient(90deg, #E0C27F, var(--gold)); transition: width 0.3s; }
.card.add textarea { margin: 10px 0 6px; }
.card.add .btn { margin-top: 10px; }

.roster-wrap { overflow-x: auto; }
.roster { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--mist); border-radius: var(--radius); }
.roster th, .roster td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--mist); font-size: 0.93rem; }
.roster th { background: var(--pearl); font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; }
.roster select { font: inherit; padding: 4px 6px; border: 1px solid var(--mist); border-radius: 6px; background: var(--pearl); max-width: 210px; }
.roster .pin { font-variant-numeric: tabular-nums; letter-spacing: 0.12em; font-weight: 600; }
.roster .actions { white-space: nowrap; display: flex; gap: 12px; }
.tag { font-size: 0.8rem; padding: 2px 10px; border-radius: 999px; }
.tag.ok { background: var(--correct-bg); color: #1E5A40; }
.tag.pending { background: #FBF1D6; color: #7A5A1C; }

@media (max-width: 640px) {
  .two { grid-template-columns: 1fr; }
  .code-box { align-items: flex-start; }
  .who { display: none; }
}

/* P4: tabs and progress dashboard */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--mist); margin: 0 0 18px; }
.tab { padding: 10px 18px; text-decoration: none; color: var(--ink-soft); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tab[aria-current="page"] { color: var(--navy); border-bottom-color: var(--gold); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: #fff; border: 1px solid var(--mist); border-radius: var(--radius); padding: 14px 16px; }
.kpi strong { display: block; font-family: var(--font-read); font-size: 1.8rem; }
.kpi span { font-size: 0.88rem; color: var(--ink-soft); }
.help ul { margin: 0; padding-left: 18px; }
.help li { margin: 4px 0; }
.table-wrap { overflow-x: auto; }
.heat { border-collapse: collapse; background: #fff; border: 1px solid var(--mist); font-size: 0.88rem; }
.heat th, .heat td { border: 1px solid var(--mist); padding: 6px 8px; text-align: left; }
.heat thead th { background: var(--pearl); vertical-align: bottom; }
.heat th.rot { min-width: 72px; }
.heat th.rot span { display: block; font-weight: 600; }
.heat th.rot small { color: var(--ink-soft); font-weight: 400; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell { text-align: center; }
.cell.hi { background: #DDEFE5; }
.cell.mid { background: #FBF1D6; }
.cell.lo { background: #F6E0DD; }
.cell.none { color: var(--ink-soft); }
.student-link { text-align: left; font-weight: 600; color: var(--navy); }
.detail:empty { display: none; }
.card.student { margin: 16px 0; border-left: 4px solid var(--gold); }
.st-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.st-head h2 { margin: 0; }
.st-head .link-btn { margin-left: auto; }
.st-line { color: var(--ink-soft); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.st-texts { list-style: none; margin: 0; padding: 0; }
.st-texts li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--mist); font-size: 0.9rem; }
.st-texts .cell { padding: 0 8px; border-radius: 6px; white-space: nowrap; }
.skills { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.skills li { display: grid; grid-template-columns: 9rem 1fr 3rem; gap: 8px; align-items: center; font-size: 0.88rem; }
.meter { height: 8px; border-radius: 99px; background: #EEE7D6; overflow: hidden; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, #E0C27F, var(--gold)); }
.note-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--mist); }
.presets { border: 1px solid var(--mist); border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.presets legend { font-weight: 600; font-size: 0.92rem; padding: 0 4px; }
.presets label { font-size: 0.9rem; }
.note-form input[type="text"], .card.student input[type="text"], .card.student select { width: 100%; }
@media (max-width: 760px) { .two-col, .presets { grid-template-columns: 1fr; } }

.card.school { margin-top: 26px; }
.card.school .row input { flex: 0 1 180px; min-height: 42px; padding: 0 12px; border: 1.5px solid var(--mist); border-radius: 8px; font: inherit; text-transform: uppercase; letter-spacing: 0.1em; }
.teacher-block h3 { margin: 0 0 8px; font-family: var(--font-read); }
.class-list { list-style: none; margin: 0; padding: 0; }
.class-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--mist); }
.card + .card.teacher-block, .card.teacher-block { margin-bottom: 12px; }
.pill.lvl-support { background: #E8F1EC; border-color: #BFD8C9; }
.pill.lvl-stretch { background: #FBF1D6; border-color: var(--gold); }

/* ===== Gulf Gold: consoles (teacher, admin, coordinator, feedback) ===== */
.console { max-width: 1200px; padding: 48px 32px 40px; }
.console h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 600; line-height: 1.02; color: var(--navy); }
.console h2 { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: var(--navy); }
.card { border: 1px solid var(--line); border-radius: 22px; padding: 30px 34px; background: #FFFDF9; box-shadow: 0 16px 40px rgba(11, 31, 58, 0.06); }
.card.narrow { border-radius: 24px; }
.field label { font-size: 0.85rem; font-weight: 700; color: var(--navy); }
.field input, .field select, textarea { border-radius: 14px; border: 1.5px solid #E4DCCB; background: #fff; min-height: 50px; transition: border-color 0.2s, box-shadow 0.2s; }
.field input:focus, .field select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201, 161, 74, 0.2); }
.class-card {
  border: 1px solid var(--line); border-left-width: 1px; border-radius: 22px; padding: 26px 28px; background: #fff;
  box-shadow: 0 16px 40px rgba(11, 31, 58, 0.07); transition: transform 0.2s, box-shadow 0.25s, border-color 0.2s;
}
.class-card:hover { transform: translateY(-3px); border-color: #D9BD78; box-shadow: 0 24px 50px rgba(11, 31, 58, 0.12); }
.cc-name { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--navy); }
.cc-meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid #F0E8D6; }
.code {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.18em; color: var(--gold-hi);
  background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%); padding: 4px 14px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(231, 200, 120, 0.45), 0 4px 10px rgba(11, 31, 58, 0.2);
}
.code.big { font-size: 2rem; padding: 6px 20px; }
.card.student { border-left: 1px solid var(--line); }
.kpi { border-radius: 18px !important; border-color: var(--line) !important; box-shadow: var(--shadow-card); }
.kpi strong { font-family: var(--font-display); }
table.roster { border-radius: 16px; overflow: hidden; }
.class-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.btn.danger { background: #fff; color: var(--wrong); border: 1.5px solid #E2B4B0; box-shadow: 0 2px 6px rgba(11, 31, 58, 0.06); }
.btn.danger:hover { background: #FDF3F2; }

/* ===== P20: print centre ===== */
.pc-lede { max-width: 60rem; color: var(--ink-soft); }
.pc-choose h2, .pc-texts h2 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #6B4E12; margin: 18px 0 10px; }
.pc-choose h2:first-child { margin-top: 0; }
.pc-grades, .pc-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); font-weight: 600;
  transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.pc-chip:hover:not([disabled]) { border-color: #D9BD78; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11, 31, 58, 0.08); }
.pc-chip[aria-pressed="true"] { background: var(--navy); color: var(--gold-hi); border-color: var(--navy); }
.pc-chip[disabled] { opacity: 0.45; cursor: not-allowed; }
.pc-n { font-size: 0.78rem; opacity: 0.7; }
.pc-unit + .pc-unit { margin-top: 22px; }
.pc-unit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.pc-unit-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; }
.pc-list { list-style: none; margin: 10px 0 0; padding: 0; }
.pc-list li { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px dotted #E8DCC2; }
.pc-list input { width: 19px; height: 19px; accent-color: #B98B2F; flex: none; }
.pc-list label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; cursor: pointer; flex: 1; }
.pc-lesson { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); min-width: 9.5em; }
.pc-title { font-family: var(--font-display); font-size: 1.12rem; color: var(--navy); }
.pc-lvl { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); }
.pc-lvl.lvl-core { background: var(--navy); color: var(--gold-hi); border-color: var(--navy); }
.pc-lvl.lvl-support { background: #EFF6EC; color: #2F5D33; border-color: #CDE2C6; }
.pc-lvl.lvl-stretch { background: #F3EEFA; color: #4A3A73; border-color: #DDD2EE; }
.pc-words { font-size: 0.82rem; color: var(--ink-soft); margin-left: auto; }
.pc-bar {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 22px; padding: 14px 18px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(18, 48, 90, 0.97), rgba(11, 31, 58, 0.97));
  border: 1px solid rgba(231, 200, 120, 0.4); color: var(--ivory);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}
.pc-count strong { font-family: var(--font-display); font-size: 1.8rem; color: var(--gold-hi); margin-right: 4px; }
.pc-opt { display: flex; align-items: center; gap: 8px; }
.pc-opt input { width: 19px; height: 19px; accent-color: #E7C878; }
.pc-bar .btn.ghost { background: rgba(246, 241, 230, 0.08); color: var(--ivory); border-color: rgba(231, 200, 120, 0.45); }
.pc-bar .btn.ghost:hover { background: rgba(246, 241, 230, 0.16); }
.pc-bar .btn.gold { margin-left: auto; }
.card.print-centre { border-left: 3px solid #C9A14A; }
@media (max-width: 640px) {
  .pc-words { display: none; }
  .pc-lesson { min-width: 0; }
  .pc-bar { gap: 10px; padding: 12px; }
  .pc-bar .btn.gold { margin-left: 0; width: 100%; }
}
.admin-search { min-width: 18rem; }
.acct-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.92rem; }
.acct-table th { text-align: left; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #6B4E12; border-bottom: 1px solid var(--line); padding: 8px 10px 8px 0; }
.acct-table td { padding: 9px 10px 9px 0; border-bottom: 1px dotted #E8DCC2; vertical-align: top; }
.acct-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem; word-break: break-all; }
.acct-table tr:hover td { background: #FCF9F1; }

/* ===== P21: nothing here needs a code ===== */
.hint.free {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 10px 14px;
  border-radius: 12px; background: #F4F8F2; border: 1px solid #D6E6CE; color: #2F5D33; font-size: 0.9rem;
}
.hint.free::before { content: "✓"; font-weight: 700; color: #4C8A54; }
.card.school.optional { padding: 0; }
.card.school.optional > summary {
  display: flex; align-items: center; gap: 12px; padding: 18px 22px; cursor: pointer; list-style: none;
}
.card.school.optional > summary::-webkit-details-marker { display: none; }
.card.school.optional > summary::after {
  content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--gold-deep);
  border-bottom: 2px solid var(--gold-deep); transform: rotate(45deg); transition: transform 0.2s;
}
.card.school.optional[open] > summary::after { transform: rotate(-135deg); }
.card.school.optional > summary:hover { background: #FBF7EC; }
.opt-h { font-family: var(--font-display); font-size: 1.4rem; color: var(--navy); }
.opt-tag {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.card.school.optional > *:not(summary) { padding-left: 22px; padding-right: 22px; }
.card.school.optional > *:last-child { padding-bottom: 20px; }

/* ===== P23: Mourad's links, for signed-in teachers only ===== */
.connect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.connect-link {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px 10px 10px;
  border-radius: 16px; border: 1px solid var(--line); background: #fff; color: var(--navy); text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.connect-link:hover { border-color: #D9BD78; box-shadow: 0 8px 20px rgba(11, 31, 58, 0.08); transform: translateY(-2px); }
.cl-icon { flex: none; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gold-leaf); color: var(--navy); }
.cl-icon svg { width: 21px; height: 21px; }
.cl-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cl-text b { font-size: 0.98rem; }
.cl-text small { font-size: 0.8rem; color: var(--ink-soft); }
@media (max-width: 640px) { .connect-grid { grid-template-columns: 1fr; } }

/* ===== M4: Assignment Centre ===== */
.a-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.a-head h2 { margin: 0 0 4px; }
.a-head .hint { margin: 0; max-width: 60ch; }
.a-empty { text-align: center; }
.a-section { margin: 18px 0; }
.a-section h3, .a-section > summary { font-size: 1rem; color: var(--ink-soft); margin: 0 0 10px; cursor: default; }
.a-section > summary { cursor: pointer; }
.a-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.a-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: var(--radius); background: #fff; border: 1px solid var(--mist); border-left: 4px solid var(--gold); color: var(--navy); text-decoration: none; }
.a-card:hover { border-color: var(--gold); }
.a-card.st-draft { border-left-color: var(--mist); }
.a-card.st-archived { opacity: 0.8; border-left-color: var(--mist); }
.a-card-top { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.a-title { font-family: var(--font-read); font-size: 1.08rem; }
.a-meta { font-size: 0.88rem; color: var(--ink-soft); }
.a-progress { display: flex; flex-direction: column; gap: 4px; }
.a-progress .bar-track { height: 8px; }
.a-count { font-size: 0.85rem; }
.pill.a-status { font-size: 0.75rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--mist); background: var(--pearl); white-space: nowrap; font-family: var(--font-ui); vertical-align: middle; }
.pill.a-status.published { background: var(--correct-bg); border-color: #BFD8C9; color: #1E5A40; }
.pill.a-status.draft { background: #fff; }
.a-detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 20px; margin: 6px 0 12px; }
.a-detail-head h2 { margin: 0 0 4px; }
.a-instruction { margin: 8px 0 0; font-family: var(--font-read); font-style: italic; }
.a-readings { margin: 0 0 16px; padding-left: 22px; line-height: 1.6; }
.a-state { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.a-state .a-icon { font-weight: 700; }
.a-state.s-completed { background: var(--correct-bg); color: #1E5A40; }
.a-state.s-started { background: #FBF1D6; color: #6A4E16; }
.a-state.s-not-started { background: var(--pearl); color: var(--ink-soft); border-color: var(--mist); }
.a-state.s-overdue { background: #fff; color: #7E2A25; border-color: #D9A9A4; }
.a-nick { color: var(--ink-soft); font-weight: 400; }
.a-table th[scope="row"] { font-weight: 600; background: #fff; color: var(--navy); font-size: 0.93rem; }
.a-actions { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--mist); }
.btn.danger { color: #7E2A25; border-color: #D9A9A4; }
.a-inline { margin: 12px 0; }
.a-inline h3 { margin: 0 0 6px; }
.a-fieldset { border: 0; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.a-radio, .a-check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.a-radio:hover, .a-check:hover { background: var(--pearl); }
.a-radio input, .a-check input, .a-pair input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--navy); }
.a-radio.big { border: 1px solid var(--mist); padding: 12px 14px; }
.a-radio.big span { display: flex; flex-direction: column; gap: 2px; }
.a-radio.big small { color: var(--ink-soft); }
.a-radio:has(input:checked) { border-color: var(--gold); background: #FBF4E4; }
.a-bulk { display: flex; gap: 16px; align-items: center; margin: 4px 0 8px; }
.a-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 10px; max-height: 360px; overflow: auto; padding: 4px; border: 1px solid var(--mist); border-radius: 8px; }
/* wizard */
.wizard { max-width: 880px; }
.eyebrow-sm { margin: 0 0 8px; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.wz-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 14px; flex-wrap: wrap; }
.wz-steps li { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--pearl); color: var(--ink-soft); font-size: 0.88rem; }
.wz-steps .wz-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid var(--mist); font-weight: 600; }
.wz-steps li.on { background: var(--navy); color: var(--ivory); }
.wz-steps li.on .wz-n { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.wz-steps li.done .wz-n::before { content: "✓"; }
.wz-steps li.done .wz-n { font-size: 0; }
.wz-steps li.done .wz-n::before { font-size: 0.8rem; }
.wz-h { font-size: 1.25rem; margin: 0 0 12px; }
.wz-h:focus { outline: none; }
.wz-h:focus-visible { outline: 3px solid var(--focus); }
.wz-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--mist); }
.a-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; align-items: end; }
.a-filters .link-btn { margin-bottom: 18px; justify-self: start; }
.a-chosen { margin: 4px 0 10px; }
.a-chosen ol { margin: 0; padding-left: 22px; }
.a-pairs { display: grid; gap: 6px; max-height: 460px; overflow: auto; padding: 2px; }
.a-pair { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--mist); border-radius: 8px; background: #fff; cursor: pointer; }
.a-pair.on { border-color: var(--gold); background: #FBF4E4; }
.a-pair span { display: flex; flex-direction: column; gap: 2px; }
.a-pair small { color: var(--ink-soft); }
.a-review { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0 0 12px; }
.a-review dt { font-weight: 600; color: var(--ink-soft); }
.a-review dd { margin: 0; }
.a-review ol { margin: 0; padding-left: 20px; }
@media (max-width: 700px) {
  .a-review { grid-template-columns: 1fr; gap: 2px; }
  .a-review dd { margin-bottom: 8px; }
  /* progress table becomes one card per student */
  .a-table, .a-table tbody, .a-table tr, .a-table th, .a-table td { display: block; width: 100%; }
  .a-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .a-table tr { border-bottom: 1px solid var(--mist); padding: 8px 0; }
  .a-table th[scope="row"], .a-table td { border: 0; padding: 4px 12px; }
  .a-table td { display: flex; justify-content: space-between; gap: 12px; }
  .a-table td::before { content: attr(data-label); color: var(--ink-soft); font-size: 0.85rem; }
  .wz-steps li span:not(.wz-n) { display: none; }
  .wz-steps li.on span:not(.wz-n) { display: inline; }
}

/* ===== M5: groups and suggestions ===== */
.tabs { flex-wrap: wrap; }
.g-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.g-card { padding: 16px 18px; background: #fff; border: 1px solid var(--mist); border-radius: var(--radius); display: flex; flex-direction: column; gap: 6px; }
.g-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.g-top h3 { margin: 0; font-family: var(--font-read); font-size: 1.1rem; }
.g-members { margin: 0; font-size: 0.92rem; }
.g-card .toolbar { margin: 6px 0 0; }
.card.help .sug { border-top: 1px solid var(--mist); padding: 10px 0; }
.card.help .sug:first-of-type { border-top: 0; }
.sug > summary { cursor: pointer; font-size: 1rem; padding: 4px 0; }
.sug-n { color: var(--ink-soft); font-weight: 400; }
.sug-students { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 4px; }
.sug-students li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sug-students input { width: 18px; height: 18px; accent-color: var(--navy); }
.sug .toolbar { margin-bottom: 6px; }
.sug-preview { font-style: italic; }

/* ===== M9: roster upgrades ===== */
.imp-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.imp-preview { margin-top: 10px; }
.imp-names { columns: 3 200px; margin: 6px 0 10px; padding-left: 22px; font-size: 0.92rem; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 10px; border-radius: var(--radius); background: #FBF4E4; border: 1px solid var(--gold); position: sticky; top: calc(var(--header-h) + 4px); z-index: 3; }
.bulk-bar select { min-height: 38px; font: inherit; border: 1px solid var(--mist); border-radius: 8px; padding: 0 8px; }
.roster tr.picked td { background: #FFFBEF; }
.roster input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--navy); }
.pending-banner { background: #FBF1D6; color: #5E4513; border: 1px solid #E8D29A; }

/* deleting */
.danger-zone { border: 1.5px solid #D9A9A4; background: #FFF8F7; }
.danger-zone h2 { color: #7E2A25; margin-top: 0; }
.btn.danger-solid { background: #8E2F28; color: #fff; border: 1px solid #8E2F28; }
.btn.danger-solid:disabled { opacity: 0.45; cursor: not-allowed; }

/* quick access to Today's lesson */
.class-card-wrap { display: flex; flex-direction: column; gap: 6px; }
.class-card-wrap .class-card { flex: 1; }
.cc-present { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gold); background: #fff; color: var(--navy); font-weight: 600; text-decoration: none; font-size: 0.9rem; }
.cc-present:hover { background: #FBF4E4; }
.icon-btn.lesson-link { border-color: var(--gold); }

/* =====================================================================
   P21: the gilded staff room (teacher, school, admin, print centre, feedback)
   The page is the navy lacquer room; the working area is one large pearl
   folio edged in gold, so every panel, table and form inside keeps its
   light, legible ground. Cards inside get a gold hairline, and labels
   move from spaced capitals to gold italics.
   ===================================================================== */
.console-page {
  --lacquer: #07152A;
  --folio: #FFFDF8; --folio-2: #FBF6EA;
  --gilt: rgba(201, 161, 74, 0.55); --gilt-soft: rgba(201, 161, 74, 0.28);
  --emerald: #1D6A4E;
  background: linear-gradient(180deg, #0B1F3A 0, #0A1C36 800px, var(--lacquer) 100%);
  min-height: 100vh;
}
.console-page .console {
  position: relative; margin: 30px auto 44px; padding: 56px clamp(22px, 4vw, 60px) 52px; border-radius: 26px;
  width: calc(100% - 40px); box-sizing: border-box;
  background: radial-gradient(ellipse 70% 22% at 50% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--folio) 0%, var(--folio-2) 100%);
  box-shadow: 0 0 0 1px var(--gilt), inset 0 0 0 10px var(--folio), inset 0 0 0 11px var(--gilt-soft), inset 0 0 0 15px var(--folio), inset 0 0 0 16px rgba(201, 161, 74, 0.14), 0 40px 90px rgba(0, 0, 0, 0.45);
}
/* a lone sign-in or sign-up card needs no folio around it: it is the folio */
.console-page .console:has(> .card.narrow) { background: none; box-shadow: none; padding-top: 40px; }
.console-page .console:has(> .card.narrow) .card.narrow {
  background: radial-gradient(ellipse 80% 30% at 50% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--folio), var(--folio-2));
  border: 0; box-shadow: 0 0 0 1px var(--gilt), inset 0 0 0 9px var(--folio), inset 0 0 0 10px var(--gilt-soft), 0 40px 90px rgba(0, 0, 0, 0.45);
  padding: 44px 44px 36px;
}
.console-page .console > .loading, .console-page .console:has(> .loading:only-child) { color: var(--navy); }

/* headings: the page title gets a gold rule with a pearl at its head */
.console-page .console h1::after {
  content: ""; display: block; width: 200px; height: 12px; margin-top: 14px;
  background:
    radial-gradient(circle at 6px 6px, #FFFFFF 0, #F1E8D4 2.5px, #C9B891 5px, rgba(201, 161, 74, 0.7) 5.6px, rgba(0, 0, 0, 0) 6.2px) no-repeat,
    linear-gradient(90deg, #C9A14A, rgba(201, 161, 74, 0)) 12px 50% / calc(100% - 12px) 1px no-repeat;
}
.console-page .card.narrow h1::after { width: 160px; }

/* cards: white with a gold hairline and a faint inner rule */
.console-page .card {
  border: 0; border-radius: 20px; background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF8 100%);
  box-shadow: 0 0 0 1px var(--gilt-soft), inset 0 0 0 6px rgba(255, 255, 255, 0.9), inset 0 0 0 7px rgba(201, 161, 74, 0.12), 0 14px 34px rgba(11, 31, 58, 0.07);
}
.console-page .card.print-centre { border-left: 0; box-shadow: 0 0 0 1px var(--gilt-soft), inset 3px 0 0 var(--gold), 0 14px 34px rgba(11, 31, 58, 0.07); }
.console-page .class-card {
  border: 0; border-radius: 20px; background: radial-gradient(ellipse 90% 50% at 20% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(165deg, #FFFDF8, #F7F0E1);
  box-shadow: 0 0 0 1px var(--gilt-soft), inset 0 0 0 6px rgba(255, 253, 248, 0.9), inset 0 0 0 7px rgba(201, 161, 74, 0.16), 0 14px 34px rgba(11, 31, 58, 0.08);
}
.console-page .class-card:hover { border: 0; box-shadow: 0 0 0 1px var(--gold), inset 0 0 0 6px rgba(255, 253, 248, 0.9), inset 0 0 0 7px rgba(201, 161, 74, 0.3), 0 24px 50px rgba(11, 31, 58, 0.14); }
.console-page .cc-ds { font-family: var(--font-display); font-style: italic; font-size: 1.08rem; color: var(--gold-deep); }
.console-page .cc-meta { border-top-color: var(--gilt-soft); }
.console-page .cc-present { background: #fff; border-color: var(--gilt); }

/* the class tabs: a quiet row with a gold underline and a pearl on the current one */
.console-page .tabs { border-bottom: 1px solid var(--gilt-soft); gap: 6px; }
.console-page .tab { position: relative; font-size: 1rem; padding: 12px 20px; color: var(--ink-soft); border-bottom: 2px solid transparent; transition: color 0.2s; }
.console-page .tab:hover { color: var(--navy); }
.console-page .tab[aria-current="page"] { color: var(--navy); border-bottom-color: var(--gold); }
.console-page .tab[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #F1E8D4 50%, #C9B891 100%); box-shadow: 0 0 0 1px rgba(201, 161, 74, 0.7);
}

/* figures */
.console-page .kpi { border: 0 !important; border-radius: 18px !important; background: linear-gradient(180deg, #FFFFFF, #FFFDF8);
  box-shadow: 0 0 0 1px var(--gilt-soft), 0 10px 24px rgba(11, 31, 58, 0.06); }
.console-page .kpi strong { font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--navy); margin-bottom: 6px; }
.console-page .kpi span { font-family: var(--font-display); font-style: italic; font-size: 1.02rem; color: var(--ink-soft); }

/* tables */
.console-page table.roster, .console-page .roster { border: 0; box-shadow: 0 0 0 1px var(--gilt-soft), 0 10px 24px rgba(11, 31, 58, 0.05); }
.console-page .roster th { background: #F8F1E1; color: var(--gold-deep); font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1rem; border-bottom-color: var(--gilt-soft); }
.console-page .roster td { border-bottom-color: #F1E9D8; }
.console-page .roster tbody tr:hover td { background: #FFFBF1; }

/* labels in spaced capitals become gold italics */
.console-page .eyebrow-sm, .console-page .pc-choose h2, .console-page .pc-texts h2, .console-page .pc-lesson {
  font-family: var(--font-display); font-style: italic; font-weight: 600; letter-spacing: 0.01em; text-transform: none; color: var(--gold-deep);
}
.console-page .eyebrow-sm, .console-page .pc-choose h2, .console-page .pc-texts h2 { font-size: 1.15rem; }
.console-page .pc-lesson { font-size: 1rem; }
.console-page .pc-lvl { font-size: 0.72rem; letter-spacing: 0.02em; text-transform: none; }
.console-page .field label { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.08rem; color: var(--gold-deep); }
.console-page .field input, .console-page .field select, .console-page textarea { border: 0; box-shadow: 0 0 0 1px var(--gilt), inset 0 2px 4px rgba(11, 31, 58, 0.04); }
.console-page .field input:focus, .console-page .field select:focus, .console-page textarea:focus { border: 0; box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px rgba(201, 161, 74, 0.2); }
.console-page .hint.free { border-radius: 12px; }

/* the header's Today's lesson link glows gold */
.console-page .icon-btn.lesson-link { background: var(--gold-leaf); color: var(--navy); border-color: #A87E2A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 14px rgba(0, 0, 0, 0.28); }
.console-page .icon-btn.lesson-link:hover { filter: brightness(1.05); background: var(--gold-leaf); }
.console-page .who { font-family: var(--font-display); font-style: italic; font-size: 1.08rem; color: var(--champagne); }
.console-page .footer { background: transparent; }

@media (max-width: 760px) {
  .console-page .console { width: calc(100% - 16px); margin: 12px auto 28px; padding: 36px 18px 30px; border-radius: 20px;
    box-shadow: 0 0 0 1px var(--gilt), inset 0 0 0 6px var(--folio), inset 0 0 0 7px var(--gilt-soft), 0 24px 50px rgba(0, 0, 0, 0.4); }
  .console-page .console:has(> .card.narrow) .card.narrow { padding: 32px 22px 26px; }
  .console-page .card { padding: 22px 18px; }
  .console-page .tab { padding: 10px 12px; }
}
.console-page .card.narrow h1 { font-size: clamp(2.2rem, 4vw, 2.8rem); }
@media (max-width: 640px) {
  .console-page .bar { gap: 6px; }
  .console-page .icon-btn.text { padding: 0 11px; font-size: 0.8rem; }
  .console-page .icon-btn.lesson-link { font-size: 0; min-width: 40px; padding: 0; }
  .console-page .icon-btn.lesson-link span { font-size: 0.9rem; }
  .console-page .who { display: none; }
}
.console-page .roster tbody th { background: #fff; font-family: var(--font-display); font-style: normal; font-weight: 600; font-size: 1.05rem; color: var(--navy); }

/* ===== Reset progress and Your data ===== */
.reset-zone { margin: 18px 0; border: 0 !important; background: linear-gradient(180deg, #FFFDF6, #FBF4E4) !important;
  box-shadow: 0 0 0 1px rgba(201, 161, 74, 0.55), inset 3px 0 0 #C9A14A, 0 14px 34px rgba(11, 31, 58, 0.08) !important; }
.reset-zone h2 { margin-top: 0; }
.rs-parts { border: 0; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.rs-parts legend { margin-bottom: 8px; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.15rem; color: var(--gold-deep); }
.rs-part { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(201, 161, 74, 0.3); transition: box-shadow 0.2s, background 0.2s; }
.rs-part:hover { box-shadow: 0 0 0 1px var(--gold); }
.rs-part:has(input:checked) { background: #FBF3DF; box-shadow: 0 0 0 1.5px var(--gold); }
.rs-part input { width: 20px; height: 20px; margin-top: 2px; accent-color: #B98B2F; flex: none; }
.rs-part strong { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.rs-part small { display: block; color: var(--ink-soft); font-size: 0.88rem; }
.your-data .toolbar { margin-top: 6px; }
.da-panel { margin-top: 18px; padding: 22px 24px; border-radius: 16px; }
.da-panel h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.5rem; color: #7E2A25; }
.console-page .danger-zone { border: 0; background: #FFF8F7; box-shadow: 0 0 0 1px #D9A9A4, 0 12px 28px rgba(126, 42, 37, 0.06); }