/* ===== Smart School Timetable Pro — UI ===== */
:root {
  --bg: #f2f5f7; --surface: #ffffff; --surface-2: #f7f9fa; --surface-3: #eef2f4;
  --ink: #0e1d28; --ink-2: #2a3f4c; --muted: #4f6573; --line: #dde5ea; --line-2: #c9d5dc;
  --brand: #0e6f86; --brand-ink: #0b5466; --brand-soft: #e3f3f6; --navy: #10324a;
  --gold: #c99a2e; --gold-soft: #fbf3df;
  --ok: #15803d; --ok-soft: #e6f6ec; --warn: #b45309; --warn-soft: #fff4e2; --err: #c0262d; --err-soft: #fdeaea; --info: #1d5fa8; --info-soft: #e8f0fb;
  --shadow-sm: 0 1px 2px rgba(16, 50, 74, .06), 0 1px 1px rgba(16, 50, 74, .04);
  --shadow: 0 4px 18px rgba(16, 50, 74, .08), 0 1px 3px rgba(16, 50, 74, .06);
  --shadow-lg: 0 18px 50px rgba(16, 50, 74, .18);
  --r: 12px; --r-sm: 8px; --r-lg: 16px;
  --font: 'Cairo', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif;
  --fs: 1.08;
  --side: 248px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d151b; --surface: #141f27; --surface-2: #18252e; --surface-3: #1e2d37;
    --ink: #e4edf2; --ink-2: #b9c8d1; --muted: #8aa0ad; --line: #26363f; --line-2: #33464f;
    --brand: #3cb4cc; --brand-ink: #7fd3e3; --brand-soft: #123441; --navy: #0a1f2d;
    --gold: #e0b44f; --gold-soft: #2c2512;
    --ok: #4ade80; --ok-soft: #12301f; --warn: #fbbf24; --warn-soft: #33270e; --err: #f87171; --err-soft: #3a1618; --info: #7cb4f5; --info-soft: #14263c;
    --shadow: 0 4px 18px rgba(0, 0, 0, .35); --shadow-lg: 0 18px 50px rgba(0, 0, 0, .5); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d151b; --surface: #141f27; --surface-2: #18252e; --surface-3: #1e2d37;
  --ink: #e4edf2; --ink-2: #b9c8d1; --muted: #8aa0ad; --line: #26363f; --line-2: #33464f;
  --brand: #3cb4cc; --brand-ink: #7fd3e3; --brand-soft: #123441; --navy: #0a1f2d;
  --gold: #e0b44f; --gold-soft: #2c2512;
  --ok: #4ade80; --ok-soft: #12301f; --warn: #fbbf24; --warn-soft: #33270e; --err: #f87171; --err-soft: #3a1618; --info: #7cb4f5; --info-soft: #14263c;
  --shadow: 0 4px 18px rgba(0, 0, 0, .35); --shadow-lg: 0 18px 50px rgba(0, 0, 0, .5); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: calc(14.5px * var(--fs)); line-height: 1.6; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); }
.ic { width: 18px; height: 18px; flex: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 700; }
p { margin: 0 0 .6em; }
.muted { color: var(--muted); } .small { font-size: calc(12.5px * var(--fs)); } .lead { font-size: calc(15.5px * var(--fs)); }
.nowrap { white-space: nowrap; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* ---- layout ---- */
.app { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--navy); color: #d8e6ee; display: flex; flex-direction: column; padding: 16px 12px; gap: 4px; z-index: 30; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 8px; }
.brand-mark { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, #17a2bd, #0d5b70); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.brand-mark svg { width: 24px; height: 24px; color: #fff; }
.brand b { display: block; color: #fff; font-size: calc(15px * var(--fs)); }
.brand small { color: #8fb3c4; font-size: calc(11.5px * var(--fs)); }
.nav-group { font-size: calc(11px * var(--fs)); color: #7f9fb0; padding: 12px 10px 4px; letter-spacing: .02em; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: #cfdee7; text-decoration: none; cursor: pointer; border: 0; background: none; width: 100%; text-align: right; font-size: calc(14px * var(--fs)); position: relative; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: rgba(23,162,189,.18); color: #fff; box-shadow: inset -3px 0 0 #2fc0dc; }
.nav-item .badge { margin-inline-start: auto; }
.side-foot { margin-top: auto; padding: 12px 8px 0; font-size: calc(11.5px * var(--fs)); color: #7f9fb0; border-top: 1px solid rgba(255,255,255,.08); }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 10px 22px; min-height: 60px; flex-wrap: wrap; }
.topbar .school-pick { display: flex; align-items: center; gap: 8px; }
.topbar .school-pick select { font-weight: 700; max-width: 260px; }
.topbar .spacer { flex: 1; }
.save-state { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12.5px * var(--fs)); color: var(--muted); }
.save-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.save-state.dirty i { background: var(--warn); }
.content { padding: 22px; max-width: 1500px; width: 100%; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head .eyebrow { color: var(--brand); font-size: calc(12.5px * var(--fs)); font-weight: 600; }
.page-head h2 { font-size: calc(24px * var(--fs)); }
.page-head p { color: var(--muted); margin: 4px 0 0; max-width: 760px; }
.menu-btn { display: none; }

/* ---- cards ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: 18px; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.card-head h3 { font-size: calc(16px * var(--fs)); }
.card-head .sub { color: var(--muted); font-size: calc(12.5px * var(--fs)); }
.card-head .tools { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card-head .tools .input { width: auto; min-width: 150px; }
.card-body { padding: 18px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
details.card > summary { list-style: none; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary .chev { transition: transform .2s; margin-inline-start: auto; }
details.card[open] > summary .chev { transform: rotate(-90deg); }

/* ---- stats ---- */
.stat { padding: 16px 18px; display: flex; gap: 14px; align-items: center; }
.stat .s-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.stat .s-ic .ic { width: 22px; height: 22px; }
.stat b { font-size: calc(24px * var(--fs)); display: block; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: calc(12.5px * var(--fs)); }
.stat.gold .s-ic { background: var(--gold-soft); color: var(--gold); }
.stat.ok .s-ic { background: var(--ok-soft); color: var(--ok); }
.stat.err .s-ic { background: var(--err-soft); color: var(--err); }
.stat.warn .s-ic { background: var(--warn-soft); color: var(--warn); }
.meter { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #2fc0dc); border-radius: 99px; }

/* ---- forms ---- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > span { font-size: calc(12.5px * var(--fs)); color: var(--ink-2); font-weight: 600; }
.field small { color: var(--muted); font-size: calc(12px * var(--fs)); }
.input, select.input, textarea.input { width: 100%; border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-sm); padding: 8px 11px; min-height: 38px; outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.input.sm { min-height: 32px; padding: 4px 8px; font-size: calc(13px * var(--fs)); }
textarea.input { min-height: 70px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.check input { width: 17px; height: 17px; accent-color: var(--brand); }
.seg { display: inline-flex; background: var(--surface-3); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 6px 13px; border-radius: 8px; cursor: pointer; color: var(--ink-2); font-size: calc(13.5px * var(--fs)); }
.seg button.on { background: var(--surface); color: var(--brand-ink); box-shadow: var(--shadow-sm); font-weight: 700; }
.day-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.day-picks label { position: relative; }
.day-picks input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.day-picks span { display: inline-block; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 99px; font-size: calc(13px * var(--fs)); background: var(--surface); }
.day-picks input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.day-picks input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; background: var(--surface-3); font-size: calc(12.5px * var(--fs)); border: 1px solid var(--line); }
.chip-x { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 2px; font-size: calc(15px * var(--fs)); line-height: 1; }
.chip.subj { border-color: transparent; color: #182a36; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); padding: 8px 14px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: calc(13.5px * var(--fs)); min-height: 38px; white-space: nowrap; transition: background .15s, border-color .15s, transform .05s; }
.btn:hover { background: var(--surface-2); border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-ink); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #1d1606; }
.btn.danger { background: var(--err); border-color: var(--err); color: #fff; }
.btn.danger-ghost { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent); }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 30px; padding: 4px 10px; font-size: calc(12.5px * var(--fs)); }
.btn.lg { min-height: 46px; padding: 10px 20px; font-size: calc(15px * var(--fs)); }
.icon-btn { border: 0; background: none; width: 34px; height: 34px; border-radius: 8px; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink-2); }
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.icon-btn.sm { width: 28px; height: 28px; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 7px; border-radius: 99px; font-size: calc(11.5px * var(--fs)); font-weight: 700; background: var(--surface-3); color: var(--ink-2); }
.badge.err { background: var(--err); color: #fff; } .badge.warn { background: var(--warn-soft); color: var(--warn); } .badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.info { background: var(--info-soft); color: var(--info); } .badge.brand { background: var(--brand-soft); color: var(--brand-ink); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; font-size: calc(12.5px * var(--fs)); font-weight: 600; }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.err { background: var(--err-soft); color: var(--err); } .pill.info { background: var(--info-soft); color: var(--info); } .pill.gold { background: var(--gold-soft); color: var(--gold); }

/* ---- tables ---- */
.table-wrap { overflow: auto; border-radius: var(--r); border: 1px solid var(--line); }
table.tbl { width: 100%; border-collapse: collapse; font-size: calc(13.5px * var(--fs)); }
.tbl th { background: var(--surface-2); color: var(--ink-2); font-weight: 700; text-align: right; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.tbl td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl .num { text-align: center; font-variant-numeric: tabular-nums; }
.tbl .acts { white-space: nowrap; text-align: left; }
.tbl.compact td, .tbl.compact th { padding: 5px 8px; }

/* ---- timetable grid ---- */
.tt-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table.tt { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; table-layout: fixed; }
.tt th { background: var(--surface-2); font-size: calc(12.5px * var(--fs)); padding: 8px 6px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); color: var(--ink-2); position: sticky; top: 0; z-index: 2; }
.tt th.rowh { width: 96px; position: sticky; right: 0; z-index: 3; }
.tt td { border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); padding: 3px; height: 62px; vertical-align: top; position: relative; }
.tt td.rowh { background: var(--surface-2); font-weight: 700; font-size: calc(13px * var(--fs)); text-align: center; vertical-align: middle; position: sticky; right: 0; z-index: 1; }
.lesson { height: 100%; min-height: 54px; border-radius: 8px; padding: 5px 7px; display: flex; flex-direction: column; justify-content: center; gap: 1px; cursor: grab; border: 1px solid rgba(0,0,0,.08); color: #15232d; position: relative; transition: transform .08s, box-shadow .12s; user-select: none; }
.lesson:hover { box-shadow: 0 2px 8px rgba(0,0,0,.14); z-index: 2; }
.lesson b { font-size: calc(13px * var(--fs)); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson span { font-size: calc(11.5px * var(--fs)); opacity: .82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson.dragging { opacity: .4; }
.lesson.flag-err { box-shadow: 0 0 0 2px var(--err) inset; }
.lesson.flag-warn::after { content: ''; position: absolute; top: 5px; left: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.lesson.selected { box-shadow: 0 0 0 2.5px var(--brand), 0 6px 16px rgba(0,0,0,.2); transform: scale(1.02); z-index: 3; }
.lesson.locked::before { content: '🔒'; position: absolute; top: 2px; left: 4px; font-size: calc(9px * var(--fs)); }
.cell-empty { height: 100%; min-height: 54px; border-radius: 8px; border: 1.5px dashed transparent; display: grid; place-items: center; color: var(--muted); font-size: calc(18px * var(--fs)); cursor: pointer; }
.tt td:hover .cell-empty { border-color: var(--line-2); }
.tt td.drop-ok .lesson, .tt td.drop-ok .cell-empty { outline: 2.5px solid var(--ok); outline-offset: -2px; }
.tt td.drop-warn .lesson, .tt td.drop-warn .cell-empty { outline: 2.5px solid var(--warn); outline-offset: -2px; }
.tt td.drop-bad { background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--err) 9%, transparent) 6px 12px); }
.tt td.drop-bad .lesson { opacity: .55; }
.tt td.over { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.tt td.unavail { background: repeating-linear-gradient(-45deg, transparent 0 5px, var(--surface-3) 5px 10px); }
.tt.school td { height: 44px; } .tt.school .lesson { min-height: 38px; padding: 2px 4px; } .tt.school .lesson b { font-size: calc(11px * var(--fs)); } .tt.school .lesson span { font-size: calc(10px * var(--fs)); }
.tt.school th { font-size: calc(11px * var(--fs)); padding: 5px 2px; }
.tt.school th.dayh { background: var(--brand-soft); color: var(--brand-ink); }
.tt .day-sep { border-left: 2px solid var(--line-2); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: calc(12.5px * var(--fs)); color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-inline-end: 4px; }

/* ---- schedule layout ---- */
.sched-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.sched-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 92px); overflow-y: auto; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.entity-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.entity-tabs button { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 4px 12px; font-size: calc(12.5px * var(--fs)); white-space: nowrap; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.entity-tabs button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.entity-tabs .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.alt-list { display: flex; flex-direction: column; gap: 8px; }
.alt { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; background: var(--surface); display: grid; gap: 4px; }
.alt:hover { border-color: var(--brand); }
.alt.on { border-color: var(--brand); background: var(--brand-soft); }
.alt-head { display: flex; align-items: center; gap: 8px; }
.alt-head b { font-size: calc(14px * var(--fs)); }
.alt-head .q { margin-inline-start: auto; font-weight: 800; color: var(--brand-ink); }
.qring { --v: 0; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--brand) calc(var(--v) * 1%), var(--surface-3) 0); display: grid; place-items: center; flex: none; }
.qring span { width: 50px; height: 50px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 800; font-size: calc(16px * var(--fs)); }
.lesson-panel .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: calc(13px * var(--fs)); }
.lesson-panel .kv span { color: var(--muted); }

/* ---- issues ---- */
.issue-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.issue-list li { padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font-size: calc(13.5px * var(--fs)); display: flex; gap: 10px; align-items: flex-start; }
.issue-list li .ic { margin-top: 2px; }
.issue-list li.lvl-error { border-color: color-mix(in srgb, var(--err) 35%, transparent); background: var(--err-soft); }
.issue-list li.lvl-error .ic { color: var(--err); }
.issue-list li.lvl-warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); }
.issue-list li.lvl-warn .ic { color: var(--warn); }
.issue-list li.lvl-info .ic { color: var(--info); }
.issue-list li .acts { margin-inline-start: auto; display: flex; gap: 6px; }
.issue-group > summary { padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.issue-group > div { padding: 0 16px 14px; }
.alert-box { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); align-items: flex-start; }
.alert-box.err { background: var(--err-soft); border-color: color-mix(in srgb, var(--err) 30%, transparent); }
.alert-box.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.alert-box.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.alert-box.info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.note { background: var(--surface-2); border-inline-start: 3px solid var(--brand); padding: 10px 14px; border-radius: 8px; color: var(--ink-2); font-size: calc(13.5px * var(--fs)); }

/* ---- modal ---- */
.modal-back { position: fixed; inset: 0; background: rgba(8, 20, 30, .5); display: grid; place-items: center; z-index: 200; opacity: 0; transition: opacity .18s; padding: 16px; }
.modal-back.in { opacity: 1; }
.modal { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column; transform: translateY(10px) scale(.98); transition: transform .2s; }
.modal-back.in .modal { transform: none; }
.modal-sm { max-width: 420px; } .modal-md { max-width: 580px; } .modal-lg { max-width: 860px; } .modal-xl { max-width: 1180px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); gap: 10px; }
.modal-head h3 { font-size: calc(17px * var(--fs)); }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-start; padding: 14px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; flex-direction: row-reverse; }

/* ---- toast ---- */
#toasts { position: fixed; top: 70px; left: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 260; max-width: min(420px, calc(100vw - 36px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; background: var(--navy); color: #fff; padding: 11px 15px; border-radius: 11px; box-shadow: var(--shadow-lg); font-size: calc(13.5px * var(--fs)); transform: translateY(12px); opacity: 0; transition: all .25s; }
.toast.in { transform: none; opacity: 1; }
.toast-ok .ic { color: #6ee7a0; } .toast-error { background: #7f1d1d; } .toast-warn .ic { color: #fcd34d; }

/* ---- generation ---- */
.gen-progress { display: grid; gap: 16px; justify-items: center; text-align: center; }
.gen-orbit { position: relative; width: 120px; height: 120px; }
.gen-ring { position: absolute; inset: 0; border-radius: 50%; border: 6px solid var(--surface-3); border-top-color: var(--brand); border-left-color: var(--gold); animation: spin 1.1s linear infinite; }
.gen-pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(24px * var(--fs)); font-weight: 800; color: var(--brand-ink); }
@keyframes spin { to { transform: rotate(360deg); } }
.gen-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.gen-stats div { background: var(--surface-2); border-radius: 10px; padding: 8px; display: grid; }
.gen-stats span { font-size: calc(12px * var(--fs)); color: var(--muted); } .gen-stats b { font-size: calc(15px * var(--fs)); }
.bar { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; width: 100%; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--gold)); transition: width .3s; }

/* ---- hero / dashboard ---- */
.hero { background: linear-gradient(120deg, #0d4f63 0%, #10324a 60%, #0f2a3f 100%); color: #fff; border-radius: var(--r-lg); padding: 24px 26px; display: flex; gap: 22px; align-items: center; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.hero::after { content: ''; position: absolute; inset: auto -60px -80px auto; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(201,154,46,.35), transparent 70%); }
.hero h2 { font-size: calc(22px * var(--fs)); } .hero p { color: #bcd5e0; margin: 6px 0 0; }
.hero .hero-tt { display: grid; grid-template-columns: repeat(5, 22px); gap: 4px; flex: none; }
.hero .hero-tt i { width: 22px; height: 16px; border-radius: 4px; background: rgba(255,255,255,.12); }
.hero .btn { position: relative; z-index: 1; }
.steps { counter-reset: s; display: grid; gap: 10px; }
.step { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.step::before { counter-increment: s; content: counter(s); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-weight: 800; flex: none; font-size: calc(13px * var(--fs)); }
.step.done::before { content: '✓'; background: var(--ok); color: #fff; }
.step .grow { flex: 1; }
.empty { text-align: center; padding: 34px 16px; color: var(--muted); }
.empty-ic { width: 54px; height: 54px; border-radius: 16px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; margin: 0 auto 10px; }
.empty-ic .ic { width: 26px; height: 26px; }
.empty h4 { color: var(--ink); margin-bottom: 4px; }

/* ---- teacher editor ---- */
.split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; }
.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.list-item:hover { background: var(--surface-2); }
.list-item.on { background: var(--brand-soft); box-shadow: inset -3px 0 0 var(--brand); }
.avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: calc(14px * var(--fs)); flex: none; color: #fff; }
.list-item .grow { flex: 1; min-width: 0; }
.list-item .grow b { display: block; font-size: calc(14px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .grow small { color: var(--muted); font-size: calc(12px * var(--fs)); }
.rule-table td, .rule-table th { padding: 6px 8px; }
.period-toggle { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.period-toggle button { width: 28px; height: 26px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--surface); font-size: calc(12px * var(--fs)); cursor: pointer; padding: 0; }
.period-toggle button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.matrix td input { width: 52px; text-align: center; }
.matrix td.has { background: var(--brand-soft); }

/* ---- guide ---- */
.guide-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.guide-toc { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; }
.guide-toc a { display: block; padding: 6px 14px; font-size: calc(13px * var(--fs)); color: var(--ink-2); text-decoration: none; border-radius: 6px; }
.guide-toc a:hover { background: var(--surface-2); color: var(--brand); }
.guide-ch { scroll-margin-top: 80px; }
.guide-ch h3 { font-size: calc(18px * var(--fs)); margin-bottom: 8px; color: var(--brand-ink); }
.guide-ch h4 { margin: 14px 0 6px; font-size: calc(15px * var(--fs)); }
.guide-ch ul, .guide-ch ol { padding-inline-start: 22px; margin: 6px 0 10px; }
.guide-ch li { margin: 3px 0; }
mark { background: var(--gold-soft); color: inherit; padding: 0 2px; border-radius: 3px; }

/* ---- misc ---- */
.kbd { font-family: ui-monospace, monospace; font-size: calc(11.5px * var(--fs)); background: var(--surface-3); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 10px 16px; cursor: pointer; color: var(--muted); font-weight: 600; border-bottom: 2.5px solid transparent; white-space: nowrap; }
.tabs button.on { color: var(--brand-ink); border-bottom-color: var(--brand); }
.report-tile { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: right; width: 100%; }
.report-tile:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.report-tile .r-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; }
.report-tile b { display: block; font-size: calc(14px * var(--fs)); } .report-tile small { color: var(--muted); font-size: calc(12.5px * var(--fs)); }
.duty-day { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface); }
.duty-day h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.scroll-x { overflow-x: auto; }
.tag-src { font-size: calc(10.5px * var(--fs)); padding: 1px 6px; border-radius: 4px; background: var(--surface-3); color: var(--muted); }

/* ---- responsive ---- */
@media (max-width: 1180px) { .sched-layout { grid-template-columns: 1fr; } .sched-side { position: static; max-height: none; } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 0 0 auto; width: 270px; transform: translateX(100%); transition: transform .25s; box-shadow: var(--shadow-lg); }
  .app.nav-open .side { transform: none; }
  .app.nav-open::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 25; }
  .menu-btn { display: inline-grid; }
  .split, .guide-layout { grid-template-columns: 1fr; }
  .guide-toc { position: static; max-height: 260px; }
  .g3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .content { padding: 14px 16px; } .topbar { padding: 8px 16px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .page-head h2 { font-size: calc(20px * var(--fs)); }
  .hero { flex-direction: column; align-items: flex-start; } .hero .hero-tt { display: none; }
  .topbar .school-pick select { max-width: 150px; }
  .hide-sm { display: none !important; }
}
@media print { .side, .topbar, #toasts { display: none !important; } .app { display: block; } }

/* ---- auth gate & cloud ---- */
.boot-loading { position: fixed; inset: 0; z-index: 160; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--bg); color: var(--ink-2); }
.cloud-chip { border: 0; cursor: pointer; font: inherit; font-size: calc(12.5px * var(--fs)); }
.cloud-chip .ic { width: 15px; height: 15px; }
.report-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.report-opts { position: sticky; top: 76px; }
.report-tile.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset -3px 0 0 var(--brand); }
@media (max-width: 1000px) { .report-layout { grid-template-columns: 1fr; } .report-opts { position: static; } }
.rc-panel .card-head{align-items:flex-start;gap:10px;flex-wrap:nowrap}.rc-panel .card-head>div{flex:1;min-width:0}.rc-panel .card-head small{display:block;margin-top:3px;line-height:1.6}
.rc-num{flex:none;width:34px;height:34px;border-radius:10px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800}
.sec-title{font-size: calc(15px * var(--fs));color:var(--ink)}

/* ===== Readability layer (v2.4.1): larger, bolder text; centred & coloured tables and dropdowns ===== */
body { font-size: calc(15.5px * var(--fs)); font-weight: 600; }
h1, h2, h3, h4, b, strong, th { font-weight: 700; }
.page-head h2 { font-size: calc(27px * var(--fs)); } .page-head p { font-size: calc(15px * var(--fs)); color: var(--ink-2); } .page-head .eyebrow { font-size: calc(13.5px * var(--fs)); font-weight: 700; }
.card-head h3 { font-size: calc(17.5px * var(--fs)); }
.muted { color: var(--muted); font-weight: 600; } .small, small { font-size: calc(13.5px * var(--fs)); }
.field > span { font-size: calc(14px * var(--fs)); font-weight: 700; color: var(--ink); }
.nav-item { font-size: calc(15.5px * var(--fs)); font-weight: 600; padding: 10px 12px; } .nav-item.active, .nav-item.on { font-weight: 700; }
.nav-group { font-size: calc(12.5px * var(--fs)); font-weight: 700; color: #9db8c6; }
.brand b { font-size: calc(16.5px * var(--fs)); }
.btn { font-size: calc(14.5px * var(--fs)); font-weight: 700; } .btn.sm { font-size: calc(13.5px * var(--fs)); } .btn.lg { font-size: calc(16px * var(--fs)); }
.tabs button { font-size: calc(15.5px * var(--fs)); font-weight: 700; padding: 11px 18px; }
.seg button { font-size: calc(14.5px * var(--fs)); font-weight: 700; }
.chip { font-size: calc(13.5px * var(--fs)); font-weight: 700; } .badge { font-size: calc(12.5px * var(--fs)); font-weight: 800; }
.input, select.input, textarea.input { font-size: calc(15px * var(--fs)); font-weight: 700; min-height: 42px; }
select.input, .topbar select, .tbl select { text-align: center; text-align-last: center; cursor: pointer; }
select option, select optgroup { font-weight: 700; font-size: calc(15px * var(--fs)); text-align: center; color: #10283a; }

.input.sm { font-size: calc(14px * var(--fs)); min-height: 36px; }
/* app tables */
.table-wrap { border: 1.5px solid #b9cfd8; }
table.tbl { font-size: calc(15px * var(--fs)); font-weight: 700; }
.tbl th { background: linear-gradient(180deg, #14697a, #0f4c5c); color: #fff; text-align: center; font-size: calc(14.5px * var(--fs)); padding: 11px 12px; border-bottom: 0; }
.tbl td { text-align: center; padding: 9px 12px; border-bottom: 1px solid #d3e0e6; }
.tbl td .row, .tbl td .acts { justify-content: center; }
.tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.tbl input.input { text-align: center; }
/* timetable grid */
.tt th { font-size: calc(14px * var(--fs)); font-weight: 800; background: linear-gradient(180deg, #14697a, #0f4c5c); color: #fff; }
.tt td.rowh { font-size: calc(14.5px * var(--fs)); font-weight: 800; }
.lesson { align-items: center; text-align: center; }
.lesson b { font-size: calc(14.5px * var(--fs)); font-weight: 800; } .lesson span { font-size: calc(13px * var(--fs)); font-weight: 700; }
.tt.school .lesson b { font-size: calc(12px * var(--fs)); } .tt.school .lesson span { font-size: calc(11px * var(--fs)); } .tt.school th { font-size: calc(12px * var(--fs)); }
[data-theme="dark"] select option, [data-theme="dark"] select optgroup { color: #10283a; }

/* ---- login (v2.4.1) ---- */
.auth-gate { position: fixed; inset: 0; z-index: 150; display: grid; grid-template-columns: minmax(440px, 1fr) 1.15fr; background: #f3f7f9; overflow: hidden; }
.auth-panel { display: grid; place-items: center; padding: 28px 20px; overflow-y: auto; background: radial-gradient(900px 500px at 100% 0%, #e3f3f7 0%, transparent 60%), radial-gradient(700px 420px at 0% 100%, #f6efdc 0%, transparent 60%), #f6f9fb; }
.auth-shell { width: 100%; max-width: 470px; display: flex; flex-direction: column; gap: 16px; }
.auth-top { display: flex; align-items: center; gap: 12px; }
.auth-top b { display: block; font-size: calc(19px * var(--fs)); color: #0b3a4c; font-weight: 800; } .auth-top small { color: #3d6676; font-weight: 700; font-size: calc(13px * var(--fs)); font-family: 'Segoe UI', Arial, sans-serif; letter-spacing: .02em; }
.auth-mark { width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(135deg, #1fb2cf, #0b4f63); display: grid; place-items: center; color: #fff; box-shadow: 0 8px 20px rgba(13,91,112,.35); flex: none; }
.auth-mark svg { width: 27px; height: 27px; }
.auth-card { display: flex; flex-direction: column; gap: 16px; background: #fff; border: 1px solid #d9e6ec; border-radius: 22px; padding: 30px 30px 26px; box-shadow: 0 1px 2px rgba(16,40,58,.06), 0 24px 60px -18px rgba(16,50,74,.28); color: #0e1d28; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #eef4f7; border-radius: 13px; padding: 5px; gap: 4px; }
.auth-tabs button { border: 0; background: none; border-radius: 10px; padding: 10px; font: inherit; font-weight: 800; font-size: calc(15.5px * var(--fs)); color: #4a6372; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.auth-tabs button.on { background: #fff; color: #0b4659; box-shadow: 0 2px 8px rgba(16,50,74,.14); }
.auth-head h1 { font-size: calc(27px * var(--fs)); font-weight: 800; color: #0b2f3e; margin: 0; }
.auth-head p { margin: 6px 0 0; color: #3e5866; font-size: calc(15px * var(--fs)); font-weight: 600; line-height: 1.7; }
.auth-field { display: flex; flex-direction: column; gap: 7px; } .auth-field > span { font-size: calc(14.5px * var(--fs)); font-weight: 800; color: #17323f; }
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input > svg { position: absolute; inset-inline-start: 14px; width: 20px; height: 20px; color: #5b7c8b; pointer-events: none; }
.auth-input input { width: 100%; height: 52px; border: 1.5px solid #c9dae2; border-radius: 13px; background: #f9fcfd; padding: 0 46px; font: inherit; font-size: calc(16px * var(--fs)); font-weight: 700; color: #0e1d28; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; text-align: right; }
.auth-input input::placeholder { color: #9bb0ba; font-weight: 600; }
.auth-input input:focus { border-color: #138aa6; background: #fff; box-shadow: 0 0 0 4px rgba(19,138,166,.16); }
.auth-eye { position: absolute; inset-inline-end: 8px; width: 36px; height: 36px; border: 0; background: none; border-radius: 9px; color: #5b7c8b; cursor: pointer; display: grid; place-items: center; }
.auth-eye svg { width: 20px; height: 20px; } .auth-eye:hover, .auth-eye.on { background: #e6f2f6; color: #0b4659; }
.auth-hint { color: #5b7381; font-weight: 600; font-size: calc(13px * var(--fs)); }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: calc(14.5px * var(--fs)); font-weight: 700; }
.auth-row .check input { width: 17px; height: 17px; accent-color: #0f6f86; }
.auth-link { border: 0; background: none; padding: 2px 0; color: #0f6f86; font: inherit; font-weight: 800; font-size: calc(14.5px * var(--fs)); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(15,111,134,.35); }
.auth-link.center { align-self: center; }
.auth-submit { height: 54px; font-size: calc(17px * var(--fs)) !important; font-weight: 800; border-radius: 13px; background: linear-gradient(135deg, #1696b3, #0b4f63) !important; border: 0 !important; box-shadow: 0 10px 24px -8px rgba(11,79,99,.6); }
.auth-submit:hover { filter: brightness(1.07); }
.auth-or { display: flex; align-items: center; gap: 12px; color: #7d929d; font-weight: 700; font-size: calc(13.5px * var(--fs)); } .auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: #dbe6eb; }
.auth-guest { height: 50px; border-radius: 13px; border: 1.5px dashed #a9c4cf !important; background: #f7fbfc !important; color: #24424f !important; font-weight: 800; white-space: normal; }
.auth-guest:hover { border-color: #0f6f86 !important; background: #eef7fa !important; }
.auth-secure { display: flex; align-items: center; gap: 9px; justify-content: center; margin: 0; color: #4a6372; font-size: calc(13.5px * var(--fs)); font-weight: 700; text-align: center; }
.auth-secure svg { width: 19px; height: 19px; color: #1a8a5a; flex: none; }
.auth-ver { margin: -8px 0 0; text-align: center; color: #8aa0ab; font-size: calc(12.5px * var(--fs)); font-weight: 700; }
.auth-gate.busy .auth-card { opacity: .7; pointer-events: none; }
.auth-msg { display: none; padding: 12px 14px; border-radius: 11px; font-size: calc(14.5px * var(--fs)); font-weight: 700; line-height: 1.7; }
.auth-msg.show { display: block; }
.auth-msg.ok { background: #e3f6ea; color: #17673e; } .auth-msg.error { background: #fde6e4; color: #a12a20; } .auth-msg.info { background: #e4f1fb; color: #1d5b8a; }
.auth-art { position: relative; overflow: hidden; color: #fff; background: radial-gradient(800px 600px at 15% 10%, rgba(47,192,220,.28), transparent 60%), radial-gradient(600px 500px at 90% 95%, rgba(201,154,46,.32), transparent 60%), linear-gradient(150deg, #0d566b 0%, #0f3a52 50%, #0a2434 100%); display: grid; place-items: center; padding: 40px 56px; }
.auth-art::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.auth-art-inner { position: relative; z-index: 1; width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 22px; }
.auth-visual { position: relative; height: 290px; margin-bottom: 8px; }
.auth-visual img { position: absolute; inset-inline-end: 0; top: 0; width: 72%; height: 250px; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); border: 4px solid rgba(255,255,255,.14); }
.auth-mini { position: absolute; inset-inline-start: 0; bottom: 0; width: 56%; background: #fff; color: #10283a; border-radius: 18px; padding: 14px; box-shadow: 0 24px 50px -16px rgba(0,0,0,.55); }
.auth-mini-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .auth-mini-head b { font-size: calc(14px * var(--fs)); font-weight: 800; color: #0b4659; } .auth-mini-head span { font-size: calc(11.5px * var(--fs)); color: #5b7381; font-weight: 700; }
.auth-mini-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.auth-mini-grid i { height: 19px; border-radius: 5px; border: 1px solid rgba(0,0,0,.06); animation: authPulse 5s ease-in-out infinite; animation-delay: var(--d); }
@keyframes authPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.auth-float { position: absolute; background: rgba(255,255,255,.95); color: #0b3a4c; border-radius: 14px; padding: 9px 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 14px 30px -10px rgba(0,0,0,.5); }
.auth-float b { font-size: calc(20px * var(--fs)); font-weight: 800; color: #0f6f86; } .auth-float span { font-size: calc(13px * var(--fs)); font-weight: 800; }
.auth-float.f1 { inset-inline-end: 6%; bottom: 8px; } .auth-float.f2 { inset-inline-start: 6%; top: 18px; } .auth-float.f2 b { color: #1a8a5a; }
.auth-art h2 { font-size: calc(38px * var(--fs)); line-height: 1.35; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.auth-lead { margin: 0; color: #c7dde6; font-size: calc(17px * var(--fs)); font-weight: 600; line-height: 1.8; max-width: 540px; }
.auth-feats { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-feats li { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 15px; padding: 13px; backdrop-filter: blur(6px); }
.auth-feats li > span { width: 38px; height: 38px; border-radius: 11px; background: rgba(47,192,220,.22); color: #8fe3f3; display: grid; place-items: center; flex: none; } .auth-feats li > span svg { width: 20px; height: 20px; }
.auth-feats b { display: block; font-size: calc(15.5px * var(--fs)); font-weight: 800; } .auth-feats small { display: block; color: #b4cdd8; font-size: calc(13px * var(--fs)); font-weight: 600; line-height: 1.6; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .auth-mini-grid i { animation: none; } }
@media (max-width: 1100px) { .auth-feats { grid-template-columns: 1fr; } .auth-art { padding: 32px; } .auth-art h2 { font-size: calc(30px * var(--fs)); } }
@media (max-width: 900px) { .auth-gate { grid-template-columns: 1fr; overflow-y: auto; } .auth-art { display: none; } .auth-card { padding: 24px 20px; } }

/* ===== On-screen timetables styled exactly like the printed reports (v2.4.2) ===== */
.rpt-head { padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 9px; }
.rpt-head .band { background: linear-gradient(90deg, #e2f4f8, #eef9fb, #e2f4f8); border-radius: 12px; border-bottom: 2px solid #c7e6ee; text-align: center; font-weight: 800; font-size: calc(18px * var(--fs)); color: #0d4d60; padding: 7px 0; }
.rpt-head .ichips { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
.rpt-head .rchip { border: 1.5px solid #8fbfcc; border-radius: 7px; padding: 2px 10px; font-size: calc(13.5px * var(--fs)); font-weight: 700; color: #20414f; background: #fff; white-space: nowrap; }
.rpt-head .rchip.hi { background: #c4e8f0; border-color: #5fa9bb; } .rpt-head .rchip.hi b { color: #0b3a4c; }
.rpt-head .rchip .sj { border: 1.5px solid rgba(0,0,0,.25); border-radius: 5px; padding: 0 5px; color: #14303d; }
.rpt-wrap { border: 0; border-radius: 0; padding: 6px 14px 14px; background: var(--surface); }
table.tt.rpt { border-collapse: collapse; table-layout: fixed; width: 100%; min-width: 620px; border: 2.5px solid #33505c; }
.tt.rpt th { background: #145c6b; color: #fff; font-size: calc(14.5px * var(--fs)); font-weight: 800; padding: 9px 4px; border: 1px solid #0b3a46; text-align: center; position: sticky; top: 0; z-index: 2; line-height: 1.3; }
.tt.rpt td { border: 1px solid #6f8794; padding: 0; height: 50px; vertical-align: middle; background: #fff; position: relative; }
.tt.rpt td.pnum { background: #E3F3F7; color: #10283a; font-size: calc(14.5px * var(--fs)); font-weight: 800; text-align: center; line-height: 1.25; }
.tt.rpt td.pnum small { display: block; font-size: calc(11px * var(--fs)); font-weight: 700; color: #4d6a77; }
.tt.rpt.sheet tr.brk td, .tt.rpt.matrix tr.daystart td { border-top: 2.5px solid #33505c; }
.tt.rpt td.vday { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: calc(17px * var(--fs)); font-weight: 800; color: #10283a; border-left: 2.5px solid #33505c; border-right: 2.5px solid #33505c; }
.tt.rpt .lesson.rl { height: 100%; min-height: 49px; border-radius: 0; border: 0; flex-direction: row; flex-wrap: nowrap; overflow: hidden; font-size: calc(14.5px * var(--fs)); align-items: center; justify-content: center; align-content: center; gap: 2px 6px; padding: 3px 5px; color: #14303d; text-align: center; }
.tt.rpt .lesson.rl b { font-size: 1em; font-weight: 800; white-space: nowrap; overflow: visible; }
.tt.rpt .lesson.rl i { font-style: normal; font-weight: 400; color: #24404e; }
.tt.rpt .lesson.rl span { font-size: .93em; font-weight: 700; color: #14303d; white-space: nowrap; overflow: visible; opacity: 1; }
.tt.rpt .lesson.rl.wrap { flex-direction: column; gap: 1px; line-height: 1.3; } .tt.rpt .lesson.rl.wrap i { display: none; } .tt.rpt .lesson.rl.wrap span { white-space: normal; }
.tt.rpt .lesson.rl:hover { filter: brightness(.96); }
.tt.rpt .lesson.selected { box-shadow: 0 0 0 3px var(--brand) inset; transform: none; }
.tt.rpt .cell-empty { min-height: 49px; border-radius: 0; border: 0; background: #fff; color: #9fb0ba; font-size: calc(16px * var(--fs)); font-weight: 700; }
.tt.rpt .cell-empty.alt { background: #ecf7fa; }
.tt.rpt .cell-empty em { display: none; font-style: normal; color: var(--brand); font-size: calc(20px * var(--fs)); }
.tt.rpt td:hover .cell-empty[title] span { display: none; } .tt.rpt td:hover .cell-empty[title] em { display: inline; }
.tt.rpt td.unavail .cell-empty { background: transparent; }
.tt.rpt.matrix td { height: 44px; }
.tt.rpt.matrix th { font-size: calc(12.5px * var(--fs)); padding: 7px 2px; }
.tt.rpt.matrix td.pnum { font-size: calc(13.5px * var(--fs)); background: #eef3f6; border-left: 2.5px solid #33505c; }
.tt.rpt.matrix .lesson.rl, .tt.rpt.matrix .cell-empty { min-height: 43px; padding: 2px 3px; gap: 0 4px; }

.tt.rpt.matrix .lesson.rl b, .tt.rpt.matrix .lesson.rl span { line-height: 1.3; }
[data-theme="dark"] .rpt-wrap { background: #fff; }
/* account controls */
.acct { display: flex; align-items: center; gap: 6px; padding-inline-start: 6px; border-inline-start: 1px solid var(--line); margin-inline-start: 2px; }
.acct-who { display: flex; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; font-size: calc(13.5px * var(--fs)); color: var(--ink-2); padding: 3px 6px; border-radius: 99px; max-width: 230px; }
.acct-who span[dir] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-who:hover { background: var(--surface-2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #1fb2cf, #0b4f63); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: calc(15px * var(--fs)); flex: none; }
.avatar svg { width: 17px; height: 17px; } .avatar.guest { background: #5b7381; }
.logout-btn { color: var(--err) !important; border-color: color-mix(in srgb, var(--err) 35%, transparent) !important; }
.logout-btn:hover { background: var(--err-soft) !important; }
.side-acct { margin: 8px 10px 0; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 10px; }
.side-acct .sa-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.side-acct .sa-row > div { min-width: 0; } .side-acct small { display: block; color: #9db8c6; font-size: calc(12px * var(--fs)); font-weight: 700; }
.side-acct b { display: block; color: #fff; font-size: calc(13.5px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-acct .btn { width: 100%; background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
.side-acct .sa-out:hover { background: rgba(220,60,50,.35); } .side-acct .sa-in:hover { background: rgba(47,192,220,.3); }
.side-acct:empty { display: none; }
.topbar { flex-wrap: nowrap; }
@media (max-width: 1500px) { .acct-who span[dir] { display: none; } }
@media (max-width: 1250px) { .logout-btn span { display: none; } .save-state { display: none; } }
/* academic-year calendar picker */
.year-btn { display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: right; }
.year-btn b { font-size: calc(16px * var(--fs)); font-weight: 800; color: var(--ink); direction: ltr; } .year-btn small { margin-inline-start: auto; color: var(--brand); font-weight: 700; font-size: calc(12.5px * var(--fs)); }
.year-btn .ic { color: var(--brand); }
.yp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .yp-nav b { font-size: calc(15px * var(--fs)); direction: ltr; }
.yp-nav [data-step="-12"] svg { transform: scaleX(-1); }
.yp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.yp-year { border: 1.5px solid var(--line-2); background: var(--surface); border-radius: 12px; padding: 10px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; color: var(--ink); transition: border-color .15s, background .15s; }
.yp-year b { font-size: calc(16px * var(--fs)); font-weight: 800; direction: ltr; } .yp-year small { font-size: calc(11.5px * var(--fs)); color: var(--muted); font-weight: 700; }
.yp-year:hover { border-color: var(--brand); background: var(--brand-soft); }
.yp-year.now { border-color: color-mix(in srgb, var(--brand) 55%, transparent); }
.yp-year.on { background: linear-gradient(135deg, #1696b3, #0b4f63); border-color: transparent; color: #fff; } .yp-year.on small { color: #d5eef4; }
/* ===== User guide v2 ===== */
.g-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 30px 32px; margin-bottom: 18px; color: #fff; background: radial-gradient(600px 300px at 10% 0%, rgba(47,192,220,.3), transparent 60%), radial-gradient(500px 300px at 95% 100%, rgba(201,154,46,.3), transparent 60%), linear-gradient(140deg, #0d566b, #0f3a52 55%, #0a2434); display: grid; gap: 22px; }
.g-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: #9fe3f1; font-weight: 800; font-size: calc(13.5px * var(--fs)); }
.g-hero h2 { font-size: calc(32px * var(--fs)); font-weight: 800; margin: 6px 0 6px; } .g-hero p { color: #c7dde6; font-size: calc(16px * var(--fs)); max-width: 820px; margin: 0; line-height: 1.8; }
.g-hero-tools { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.g-search { flex: 1; min-width: 260px; max-width: 560px; position: relative; display: flex; align-items: center; }
.g-search .ic { position: absolute; inset-inline-start: 14px; color: #5b7c8b; }
.g-search input { width: 100%; height: 48px; border-radius: 13px; border: 0; padding: 0 44px; font: inherit; font-weight: 700; font-size: calc(15px * var(--fs)); color: #0e1d28; background: #fff; outline: none; box-shadow: 0 8px 20px -8px rgba(0,0,0,.45); }
.g-hero-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.g-hero-parts a { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; transition: background .15s, transform .15s; }
.g-hero-parts a:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.g-hero-parts a span { width: 34px; height: 34px; border-radius: 10px; background: var(--c); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.g-hero-parts a b { font-size: calc(15px * var(--fs)); } .g-hero-parts a small { color: #b4cdd8; font-weight: 700; font-size: calc(12px * var(--fs)); }
.g2col { grid-template-columns: 290px minmax(0, 1fr); }
.guide-toc nav { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.g-toc-part b { display: flex; align-items: center; gap: 7px; color: var(--c); font-size: calc(14px * var(--fs)); font-weight: 800; padding: 4px 8px; }
.g-toc-part b .ic { width: 16px; height: 16px; }
.g-toc-part a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--ink-2); text-decoration: none; border-radius: 8px; border-inline-start: 3px solid transparent; }
.g-toc-part a i { font-style: normal; min-width: 24px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: calc(11.5px * var(--fs)); font-weight: 800; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.g-toc-part a:hover { background: color-mix(in srgb, var(--c) 8%, transparent); color: var(--c); border-inline-start-color: var(--c); }
.g-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.g-part { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 80px; }
.g-part-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #000)); box-shadow: 0 10px 24px -14px var(--c); }
.g-part-head > span { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: none; } .g-part-head > span .ic { width: 26px; height: 26px; }
.g-part-head small { font-weight: 800; opacity: .85; font-size: calc(12.5px * var(--fs)); } .g-part-head h3 { font-size: calc(21px * var(--fs)); margin: 0; } .g-part-head p { margin: 2px 0 0; opacity: .92; font-size: calc(14px * var(--fs)); font-weight: 600; }
.g-ch { background: var(--surface); border: 1px solid var(--line); border-inline-start: 5px solid var(--c); border-radius: 14px; padding: 18px 22px; scroll-margin-top: 80px; box-shadow: 0 2px 10px -6px rgba(16,40,58,.18); }
.g-ch-title { display: flex; align-items: center; gap: 10px; font-size: calc(18.5px * var(--fs)); font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.g-ch-title i { font-style: normal; min-width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #fff; font-size: calc(14px * var(--fs)); }
.g-body { font-size: calc(15px * var(--fs)); line-height: 1.95; } .g-body p { margin: 6px 0; }
.g-body h4 { color: var(--c); font-size: calc(16px * var(--fs)); margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 1.5px dashed color-mix(in srgb, var(--c) 35%, transparent); }
.g-body ul, .g-body ol { padding-inline-start: 24px; margin: 6px 0 10px; } .g-body li { margin: 4px 0; } .g-body li::marker { color: var(--c); font-weight: 800; }
.g-body table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: calc(14.5px * var(--fs)); border-radius: 10px; overflow: hidden; border: 1.5px solid #c9dbe3; }
.g-body table th { background: var(--c); color: #fff; padding: 9px 12px; text-align: right; }
.g-body table td { padding: 9px 12px; border-bottom: 1px solid #dde8ed; vertical-align: top; text-align: right; }
.g-body table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--c) 5%, var(--surface)); }
.g-body table td:first-child { white-space: nowrap; color: var(--ink); } .g-body table tr.g-sub td { background: color-mix(in srgb, var(--c) 14%, var(--surface)) !important; color: var(--c); font-weight: 800; text-align: center; }
.g-steps { counter-reset: gs; list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.g-steps > li { counter-increment: gs; position: relative; padding: 10px 52px 10px 14px; background: color-mix(in srgb, var(--c) 6%, var(--surface)); border-radius: 12px; margin: 0 !important; }
.g-steps > li::before { content: counter(gs); position: absolute; inset-inline-start: 12px; top: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: calc(14px * var(--fs)); }
.g-note, .g-tip, .g-warn { border-radius: 12px; padding: 11px 14px; margin: 10px 0; font-size: calc(14.5px * var(--fs)); border-inline-start: 4px solid; }
.g-note { background: #e8f1fb; border-color: #1d6fb8; color: #163f63; } .g-tip { background: #e6f6ec; border-color: #1a8a5a; color: #155235; } .g-warn { background: #fdf0dc; border-color: #c2700f; color: #6b3d05; }
.g-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.g-card { border: 1.5px solid color-mix(in srgb, var(--c) 30%, transparent); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--c) 5%, var(--surface)); } .g-card b { display: block; color: var(--c); font-size: calc(15.5px * var(--fs)); } .g-card span { font-size: calc(13.5px * var(--fs)); color: var(--ink-2); }
.g-path { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .g-path b { background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: var(--c); border-radius: 7px; padding: 1px 8px; font-size: calc(13.5px * var(--fs)); } .g-path i { font-style: normal; color: var(--muted); }
.g-badge { display: inline-block; border-radius: 99px; padding: 1px 10px; font-size: calc(12.5px * var(--fs)); font-weight: 800; white-space: nowrap; }
.g-badge.err { background: #fde2e1; color: #a12a20; } .g-badge.warn { background: #fff1d6; color: #9a5b00; } .g-badge.info { background: #e4f1fb; color: #1d5b8a; } .g-badge.ok { background: #ddf3e4; color: #17673e; } .g-badge.mute { background: repeating-linear-gradient(45deg, #eef1f3 0 4px, #dfe5e8 4px 8px); color: #3c4f59; }
.g-check { list-style: none; padding: 0 !important; } .g-check li { padding-inline-start: 30px; position: relative; } .g-check li::before { content: '✓'; position: absolute; inset-inline-start: 4px; color: #fff; background: var(--c); border-radius: 6px; width: 20px; height: 20px; display: grid; place-items: center; font-size: calc(12px * var(--fs)); top: 6px; }
.g-faq dt { font-weight: 800; color: var(--c); margin-top: 10px; } .g-faq dd { margin: 2px 0 0; padding-inline-start: 14px; border-inline-start: 2px solid color-mix(in srgb, var(--c) 30%, transparent); }
.g-body mark { background: #ffe58a; border-radius: 3px; }
@media (max-width: 900px) { .g2col { grid-template-columns: 1fr; } .g-hero { padding: 22px 18px; } .g-hero h2 { font-size: calc(25px * var(--fs)); } }

/* ===== v2.4.4: full-width layout, darker grid lines, clearer move/swap feedback, unified bold text ===== */
.content { max-width: none; }
:where(body *) { font-weight: 600; }
b, strong, th, h1, h2, h3, h4, h5, .btn, .tabs button, .badge { font-weight: 700; }
.entity-tabs { flex-wrap: wrap; overflow: visible; row-gap: 7px; }
.entity-tabs button { font-size: calc(13.5px * var(--fs)); font-weight: 700; padding: 5px 13px; }
.sched-layout.wide { grid-template-columns: minmax(0, 1fr); }
.sched-layout.wide .sched-side { position: static; max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.sched-layout.wide .sched-side > * { margin: 0; }
/* darker, clearer lines */
table.tt.rpt { border: 3px solid #102a35; }
.tt.rpt th { border: 1px solid #08303b; border-bottom: 2.5px solid #102a35; }
.tt.rpt td { border: 1.3px solid #3d5764; }
.tt.rpt td.pnum { border-left: 2.5px solid #102a35; }
.tt.rpt.sheet tr.brk td, .tt.rpt.matrix tr.daystart td { border-top: 3.5px solid #102a35; }
.tt.rpt td.vday { border-left: 3px solid #102a35; border-right: 3px solid #102a35; background-clip: padding-box; }
.tt.rpt.sheet td.pnum { border-left: 3px solid #102a35; }
.tt.rpt.sheet thead th:first-child, .tt.rpt.matrix thead th:nth-child(2) { border-left: 3px solid #102a35; }
/* full matrix fits the width */
table.tt.rpt.matrix { min-width: 0; width: 100%; }
.tt.rpt.matrix th { font-size: calc(12px * var(--fs)); white-space: normal; line-height: 1.25; padding: 6px 2px; }
.tt.rpt.matrix td { height: 46px; }
/* move / swap feedback */
.move-hint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 14px 0; padding: 9px 12px; border-radius: 12px; background: #eaf8f0; border: 1.5px solid #8fd3ab; font-size: calc(14px * var(--fs)); }
.move-hint[hidden] { display: none; }
.move-hint .mh-les { padding: 3px 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,.15); font-weight: 800; color: #14303d; }
.move-hint .mh-at { color: var(--ink-2); font-weight: 700; }
.move-hint .mh-ok { color: #0f7a3f; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
.move-hint .mh-warn { color: #a85e00; font-weight: 800; } .move-hint .mh-none { color: #a12a20; font-weight: 800; }
.move-hint .btn { margin-inline-start: auto; }
.tt td.drop-ok, .tt td.drop-warn { cursor: pointer; }
.tt.rpt td.drop-ok { box-shadow: inset 0 0 0 3px #12a150; }
.tt.rpt td.drop-ok .cell-empty { background: #d4f5df !important; }
.tt.rpt td.drop-ok .lesson, .tt.rpt td.drop-warn .lesson { outline: none; }
.tt.rpt td.drop-warn { box-shadow: inset 0 0 0 3px #e08a00; }
.tt.rpt td.drop-warn .cell-empty { background: #fdebc8 !important; }
.tt.rpt td.drop-ok::after, .tt.rpt td.drop-warn::after { position: absolute; top: 3px; inset-inline-end: 3px; width: 17px; height: 17px; border-radius: 50%; color: #fff; font-size: calc(11px * var(--fs)); font-weight: 800; display: grid; place-items: center; z-index: 2; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.tt.rpt td.drop-ok::after { content: '✓'; background: #12a150; } .tt.rpt td.drop-warn::after { content: '!'; background: #e08a00; }
.tt.rpt td.drop-bad .lesson { opacity: .38; filter: grayscale(.6); }
.tt.rpt td.drop-bad .cell-empty { opacity: .5; }
.tt.rpt .lesson.selected { box-shadow: inset 0 0 0 3px #0b4f63, 0 0 0 3px #2fc0dc; z-index: 3; animation: selPulse 1.2s ease-in-out infinite; }
@keyframes selPulse { 50% { box-shadow: inset 0 0 0 3px #0b4f63, 0 0 0 6px rgba(47,192,220,.45); } }
.tt.rpt td.over { box-shadow: inset 0 0 0 5px #0a8a44 !important; }
.tt.rpt td.over .lesson, .tt.rpt td.over .cell-empty { filter: brightness(.93); }
.tt.rpt td.drop-ok:hover { box-shadow: inset 0 0 0 5px #0a8a44; } .tt.rpt td.drop-warn:hover { box-shadow: inset 0 0 0 5px #c47600; }
@media (prefers-reduced-motion: reduce) { .tt.rpt .lesson.selected { animation: none; } }
.tt.rpt td.drop-ok > .lesson, .tt.rpt td.drop-ok > .cell-empty { box-shadow: inset 0 0 0 3px #12a150; }
.tt.rpt td.drop-warn > .lesson, .tt.rpt td.drop-warn > .cell-empty { box-shadow: inset 0 0 0 3px #e08a00; }
.tt.rpt td.drop-ok:hover > *, .tt.rpt td.over.drop-ok > * { box-shadow: inset 0 0 0 5px #0a8a44; }
.tt.rpt td.drop-warn:hover > *, .tt.rpt td.over.drop-warn > * { box-shadow: inset 0 0 0 5px #c47600; }
.move-hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 120; margin: 0; max-width: min(1100px, calc(100vw - 32px)); box-shadow: 0 14px 36px -10px rgba(10,40,55,.45); background: #f2fbf6; }
/* dropdown colours: readable options and group labels */
select optgroup { background: #e2f4f8; color: #0b4659; font-weight: 800; font-style: normal; }
select option { background-color: #fff; color: #10283a; font-weight: 700; }
select option:checked { background-color: #c4e8f0; color: #0b3a4c; }
/* back navigation */
.back-btn { gap: 6px; border-color: color-mix(in srgb, var(--brand) 45%, transparent); color: var(--brand-ink); background: var(--brand-soft); font-weight: 800; }
.back-btn .ic { transform: scaleX(-1); }
.back-btn small { color: var(--ink-2); font-weight: 700; font-size: calc(12.5px * var(--fs)); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back-btn small::before { content: '— '; }
.back-btn[hidden] { display: none; }
.back-btn:hover { background: var(--brand); color: #fff; } .back-btn:hover small { color: #e0f4f8; }
.move-hint { pointer-events: none; } .move-hint .btn { pointer-events: auto; }
.auth-help { background: #f3f8fa; border: 1px solid #d6e5eb; border-radius: 12px; padding: 10px 14px; font-size: calc(13.5px * var(--fs)); color: #24424f; line-height: 1.8; }
.auth-help b { color: #0b4659; } .auth-help ul { margin: 4px 0 0; padding-inline-start: 18px; }
.auth-help span[dir] { display: inline-block; white-space: nowrap; font-size: calc(12.5px * var(--fs)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* ===== onboarding wizard ===== */
.ob-overlay { position: fixed; inset: 0; z-index: 180; background: rgba(8,28,40,.55); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 18px; animation: obIn .2s ease; }
@keyframes obIn { from { opacity: 0; } }
.ob-shell { width: min(1180px, 100%); height: min(860px, calc(100vh - 36px)); background: var(--surface); border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 270px minmax(0, 1fr); box-shadow: 0 30px 80px -20px rgba(0,0,0,.55); }
.ob-side { color: #fff; padding: 24px 18px; display: flex; flex-direction: column; gap: 22px; background: radial-gradient(400px 300px at 0% 0%, rgba(47,192,220,.28), transparent 60%), linear-gradient(160deg, #0d566b, #0f3a52 60%, #0a2434); }
.ob-brand { display: flex; align-items: center; gap: 10px; } .ob-brand > span { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, #1fb2cf, #0b4f63); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.ob-brand b { display: block; font-size: calc(17px * var(--fs)); } .ob-brand small { color: #b4cdd8; font-size: calc(12px * var(--fs)); font-weight: 700; }
.ob-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ob-steps button { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; color: #c7dde6; font: inherit; font-weight: 700; font-size: calc(15px * var(--fs)); padding: 9px 10px; border-radius: 12px; cursor: pointer; text-align: right; }
.ob-steps button i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); display: grid; place-items: center; font-size: calc(13px * var(--fs)); font-weight: 800; flex: none; }
.ob-steps button i .ic { width: 15px; height: 15px; }
.ob-steps li.ok button i { background: #1a8a5a; border-color: #1a8a5a; color: #fff; }
.ob-steps li.on button { background: rgba(255,255,255,.12); color: #fff; } .ob-steps li.on button i { background: #fff; color: #0b4659; border-color: #fff; }
.ob-steps button:hover { background: rgba(255,255,255,.08); }
.ob-side-foot { margin-top: auto; font-size: calc(12.5px * var(--fs)); color: #b4cdd8; line-height: 1.8; }
.ob-main { display: flex; flex-direction: column; min-height: 0; }
.ob-head { display: flex; align-items: center; gap: 14px; padding: 20px 26px 14px; }
.ob-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; } .ob-ic .ic { width: 24px; height: 24px; }
.ob-head small { color: var(--brand); font-weight: 800; font-size: calc(13px * var(--fs)); } .ob-head h2 { margin: 0; font-size: calc(23px * var(--fs)); } .ob-head .icon-btn { margin-inline-start: auto; }
.ob-progress { height: 5px; background: var(--surface-3); margin: 0 26px; border-radius: 99px; overflow: hidden; } .ob-progress i { display: block; height: 100%; background: linear-gradient(90deg, #1fb2cf, #0b4f63); border-radius: 99px; transition: width .3s; }
.ob-body { flex: 1; overflow-y: auto; padding: 20px 26px; display: flex; flex-direction: column; gap: 14px; }
.ob-foot { display: flex; align-items: center; gap: 10px; padding: 14px 26px; border-top: 1px solid var(--line); background: var(--surface-2); }
.ob-foot .ob-msg { flex: 1; text-align: center; font-weight: 800; } .ob-foot .ob-msg.err { color: var(--err); }
.ob-foot #obPrev .ic { transform: scaleX(-1); } .ob-foot #obNext .ic { order: 2; }
.ob-lead { margin: 0; font-size: calc(16px * var(--fs)); color: var(--ink-2); line-height: 1.9; }
.ob-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ob-card { border: 1.5px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
.ob-card > span { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; } .ob-card b { font-size: calc(16px * var(--fs)); } .ob-card small { color: var(--ink-2); font-size: calc(13.5px * var(--fs)); }
.ob-alt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px dashed var(--line-2); }
.ob-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.ob-list-head { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .ob-list-head b { font-size: calc(15.5px * var(--fs)); }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 99px; border: 1px solid rgba(0,0,0,.1); font-weight: 800; color: #14303d; }
.ob-chip button, .ob-req span button { border: 0; background: rgba(0,0,0,.08); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: calc(15px * var(--fs)); line-height: 1; color: #14303d; }
.ob-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ob-formcard { border: 1.5px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--surface-2); }
.ob-subs { display: flex; flex-wrap: wrap; gap: 7px; }
.ob-sub { border: 1.5px solid var(--line-2); background: var(--surface); border-radius: 99px; padding: 5px 12px; font: inherit; font-weight: 700; font-size: calc(14px * var(--fs)); cursor: pointer; color: var(--ink); }
.ob-sub.on { background: var(--sc); border-color: #14303d; color: #14303d; box-shadow: inset 0 0 0 1px #14303d; }
.ob-tlist { display: flex; flex-direction: column; gap: 8px; max-height: 470px; overflow-y: auto; }
.ob-t { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ob-t > div { flex: 1; min-width: 0; } .ob-t b { display: block; } .ob-t small { color: var(--ink-2); font-size: calc(12.5px * var(--fs)); }
.ob-t small i { font-style: normal; padding: 0 6px; border-radius: 6px; margin-inline-end: 3px; color: #14303d; }
.ob-qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ob-qgrid .tbl { font-size: calc(14px * var(--fs)); }
.ob-reqs { display: flex; flex-direction: column; gap: 8px; }
.ob-req { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; }
.ob-req b { min-width: 110px; } .ob-req span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 10px; border-radius: 99px; font-size: calc(13px * var(--fs)); font-weight: 800; color: #14303d; }
.ob-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ob-sum > div { border-radius: 16px; padding: 16px; background: var(--brand-soft); display: flex; flex-direction: column; gap: 4px; }
.ob-sum span { color: var(--brand); } .ob-sum b { font-size: calc(24px * var(--fs)); font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ob-sum small { color: var(--ink-2); font-weight: 700; }
.ob-next { border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 18px; } .ob-next ol { margin: 6px 0; padding-inline-start: 22px; line-height: 2; }
.ob-tip { margin: 0; }
@media (max-width: 900px) { .ob-shell { grid-template-columns: 1fr; height: calc(100vh - 20px); } .ob-side { display: none; } .ob-split, .ob-qgrid { grid-template-columns: 1fr; } .ob-head, .ob-body, .ob-foot { padding-inline: 16px; } }
.ob-qpick span { color: #14303d !important; border: 1.5px solid rgba(0,0,0,.15) !important; font-weight: 700; }
.ob-qpick input:checked + span { box-shadow: inset 0 0 0 2.5px #0b4659; font-weight: 800; }
.ob-qpick input:checked + span::before { content: '✓ '; color: #0b4659; font-weight: 800; }

/* =====================================================================
   v2.6 — Colourful professional theme: per-screen accents, bigger type,
   animated feedback (toasts, save, undo/redo), lively cards & tabs.
   ===================================================================== */
.app { --accent: #0f7c93; --accent-2: color-mix(in srgb, var(--accent) 72%, #000); --accent-soft: color-mix(in srgb, var(--accent) 11%, var(--surface)); --accent-soft-2: color-mix(in srgb, var(--accent) 20%, var(--surface)); --accent-line: color-mix(in srgb, var(--accent) 35%, transparent); --accent-ink: var(--accent-2); }
body { font-size: calc(16px * var(--fs)); }
.main { background: radial-gradient(1100px 500px at 100% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%), var(--bg); transition: background .4s; }
/* page enter animation */
#view > * { animation: viewIn .38s cubic-bezier(.2,.7,.2,1) both; }
#view > *:nth-child(2) { animation-delay: .04s; } #view > *:nth-child(3) { animation-delay: .08s; } #view > *:nth-child(4) { animation-delay: .12s; } #view > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } }
/* page header banner */
.page-head { position: relative; overflow: hidden; padding: 20px 24px; border-radius: 20px; background: linear-gradient(120deg, var(--accent-soft-2), var(--accent-soft) 45%, var(--surface) 100%); border: 1px solid var(--accent-line); box-shadow: 0 10px 30px -22px var(--accent); }
.page-head::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 7px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.page-head::after { content: ''; position: absolute; inset-inline-end: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); pointer-events: none; }
.page-head > * { position: relative; z-index: 1; }
.page-head .eyebrow { display: inline-block; background: var(--accent); color: #fff; padding: 2px 12px; border-radius: 99px; font-size: calc(13px * var(--fs)); font-weight: 800; box-shadow: 0 4px 12px -4px var(--accent); }
.page-head h2 { font-size: calc(32px * var(--fs)); font-weight: 800; color: var(--accent-ink); margin-top: 6px; letter-spacing: -.01em; }
[data-theme="dark"] .page-head h2 { color: color-mix(in srgb, var(--accent) 55%, #fff); }
.page-head p { font-size: calc(15.5px * var(--fs)); }
/* cards */
.card { border-top: 3px solid var(--accent-line); transition: box-shadow .2s, transform .2s, border-color .2s; }
.card:hover { box-shadow: 0 14px 34px -20px color-mix(in srgb, var(--accent) 60%, #000); border-top-color: var(--accent); }
.card-head { background: linear-gradient(90deg, var(--accent-soft), transparent 75%); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.card-head h3 { font-size: calc(19px * var(--fs)); font-weight: 800; color: var(--accent-ink); display: flex; align-items: center; gap: 8px; }
.card-head h3::before { content: ''; width: 5px; height: 20px; border-radius: 4px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); flex: none; }
[data-theme="dark"] .card-head h3 { color: color-mix(in srgb, var(--accent) 50%, #fff); }
.rc-panel .card-head h3::before, .lesson-panel .card-head h3::before { display: none; }
/* tabs */
.tabs { gap: 6px; border-bottom: 0; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; width: fit-content; max-width: 100%; box-shadow: var(--shadow-sm); }
.tabs button { border-radius: 11px; border-bottom: 0 !important; padding: 10px 18px; color: var(--ink-2); font-size: calc(15.5px * var(--fs)); transition: background .18s, color .18s, transform .12s, box-shadow .18s; }
.tabs button:hover { background: var(--accent-soft); color: var(--accent-ink); }
.tabs button.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 8px 18px -8px var(--accent); }
.tabs button.on .badge { background: rgba(255,255,255,.25); color: #fff; }
.seg { background: var(--accent-soft); border-color: var(--accent-line); }
.seg button.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; color: #fff !important; box-shadow: 0 6px 14px -6px var(--accent); }
.topbar .seg { background: var(--surface-2); } 
.entity-tabs button.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 6px 14px -8px var(--accent); }
.entity-tabs button:hover:not(.on) { border-color: var(--accent); color: var(--accent-ink); }
/* buttons */
.btn { transition: transform .12s, box-shadow .18s, background .18s, filter .18s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -10px var(--accent); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 12px 24px -10px var(--accent); }
.btn.gold { box-shadow: 0 8px 18px -10px #b7791f; }
/* inputs */
.input:focus, select.input:focus, textarea.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.field > span { color: var(--accent-ink); }
[data-theme="dark"] .field > span { color: color-mix(in srgb, var(--accent) 45%, #fff); }
.day-picks input:checked + span { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 4px 10px -5px var(--accent); }
/* tables follow the screen colour */
.tbl th { background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.table-wrap { border-color: var(--accent-line); }
/* stat cards — each a different colour */
.stat { position: relative; overflow: hidden; border-top: 0; color: #fff; --sc: #0f7c93; background: linear-gradient(135deg, var(--sc), color-mix(in srgb, var(--sc) 65%, #000)); box-shadow: 0 12px 26px -16px var(--sc); }
.grid > .stat:nth-child(4n+1) { --sc: #0f7c93; } .grid > .stat:nth-child(4n+2) { --sc: #7c3aed; } .grid > .stat:nth-child(4n+3) { --sc: #d9730d; } .grid > .stat:nth-child(4n+4) { --sc: #c026d3; }
.stat::after { content: ''; position: absolute; inset-inline-end: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.1); }
.stat .s-ic { background: rgba(255,255,255,.18) !important; color: #fff !important; }
.stat b { font-size: calc(30px * var(--fs)); color: #fff; } .stat span { color: rgba(255,255,255,.88); font-size: calc(14px * var(--fs)); font-weight: 700; }
.stat:hover { transform: translateY(-3px); }
/* sidebar navigation with coloured icons */
.nav-item { gap: 11px; transition: background .15s, transform .15s; }
.nav-item .nav-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--nc) 30%, transparent); color: #fff; flex: none; transition: background .15s, box-shadow .15s; }
.nav-item .nav-ic .ic { width: 17px; height: 17px; }
.nav-item:hover { background: rgba(255,255,255,.06); transform: translateX(-2px); }
.nav-item:hover .nav-ic { background: color-mix(in srgb, var(--nc) 60%, transparent); }
.nav-item.active { background: linear-gradient(90deg, color-mix(in srgb, var(--nc) 38%, transparent), color-mix(in srgb, var(--nc) 12%, transparent)); box-shadow: inset -4px 0 0 var(--nc); color: #fff; }
.nav-item.active .nav-ic { background: var(--nc); box-shadow: 0 6px 14px -4px var(--nc); }
.nav-group { color: #8fb3c4; letter-spacing: .02em; text-transform: none; }
/* report tiles & misc */
.report-tile { transition: transform .15s, box-shadow .15s, border-color .15s; }
.report-tile:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 26px -18px var(--accent); }
.report-tile.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.report-tile .r-ic, .rc-num { background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; color: #fff !important; }
.badge { transition: transform .2s; }
.pill { font-weight: 800; }
.hero { background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 55%, #0f2a3f 100%); box-shadow: 0 18px 40px -24px var(--accent); }
.alert-box { border-inline-start-width: 5px; }
/* ===== toasts ===== */
#toasts { top: 76px; left: 20px; gap: 10px; max-width: min(440px, calc(100vw - 40px)); }
.toast { --tc: #0f7c93; position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 12px 12px 14px 14px; border-radius: 16px; background: var(--surface); color: var(--ink); border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent); border-inline-start: 6px solid var(--tc); box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--tc) 60%, #000); opacity: 0; transform: translateX(-30px) scale(.96); transition: transform .35s cubic-bezier(.2,.9,.3,1.3), opacity .25s; cursor: default; }
.toast.in { opacity: 1; transform: none; } .toast.out { opacity: 0; transform: translateX(-30px) scale(.96); transition-duration: .25s; }
.toast .t-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--tc); color: #fff; box-shadow: 0 6px 14px -6px var(--tc); animation: tPop .45s cubic-bezier(.2,.9,.3,1.5) both .05s; }
.toast .t-ic .ic { width: 20px; height: 20px; color: #fff !important; }
@keyframes tPop { from { transform: scale(.3) rotate(-25deg); opacity: 0; } }
.toast .t-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .toast .t-txt b { font-size: calc(14.5px * var(--fs)); color: var(--tc); font-weight: 800; } .toast .t-txt span { font-size: calc(14px * var(--fs)); line-height: 1.6; }
.toast .t-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 8px; align-self: flex-start; } .toast .t-x:hover { background: var(--surface-2); color: var(--ink); } .toast .t-x .ic { width: 15px; height: 15px; }
.toast .t-bar { position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: var(--tc); transform-origin: right; animation: tBar linear forwards; opacity: .75; }
.toast.hold .t-bar { animation-play-state: paused; }
@keyframes tBar { to { transform: scaleX(0); } }
.toast-ok, .toast-save { --tc: #16a34a; } .toast-error { --tc: #dc2626; background: var(--surface); } .toast-warn { --tc: #d97706; } .toast-info { --tc: #2563eb; } .toast-undo { --tc: #7c3aed; } .toast-redo { --tc: #0891b2; }
.toast-error .t-ic { animation: tShake .5s both .05s; } @keyframes tShake { 0%,100% { transform: none; } 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }
/* save indicator */
.save-state { padding: 4px 10px; border-radius: 99px; background: var(--surface-2); font-weight: 700; transition: background .3s, color .3s; }
.save-state.dirty { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); }
.save-state.dirty i { animation: sPulse 1s ease-in-out infinite; }
@keyframes sPulse { 50% { transform: scale(1.6); opacity: .5; } }
.save-state.just-saved { animation: sSaved 1.2s ease; } .save-state.just-saved i { animation: sPop .6s cubic-bezier(.2,.9,.3,1.6); }
@keyframes sSaved { 0% { background: color-mix(in srgb, var(--ok) 28%, var(--surface)); color: var(--ok); } 100% { background: var(--surface-2); } }
@keyframes sPop { 0% { transform: scale(.2); } 60% { transform: scale(1.8); } }
.cloud-chip.ok { animation: none; }
/* undo / redo / ok flash on the work area */
#view { position: relative; }
#view.fx-undo::after, #view.fx-redo::after, #view.fx-ok::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 90; animation: fxFlash .7s ease-out forwards; }
#view.fx-undo::after { background: radial-gradient(circle at 50% 40%, rgba(124,58,237,.18), transparent 60%); box-shadow: inset 0 0 0 4px rgba(124,58,237,.45); }
#view.fx-redo::after { background: radial-gradient(circle at 50% 40%, rgba(8,145,178,.18), transparent 60%); box-shadow: inset 0 0 0 4px rgba(8,145,178,.45); }
#view.fx-ok::after { background: radial-gradient(circle at 50% 40%, rgba(22,163,74,.16), transparent 60%); box-shadow: inset 0 0 0 4px rgba(22,163,74,.4); }
@keyframes fxFlash { from { opacity: 1; } to { opacity: 0; } }
/* modals */
.modal { border-top: 5px solid var(--accent, #0f7c93); transform: translateY(16px) scale(.97); transition: transform .28s cubic-bezier(.2,.9,.3,1.25); overflow: hidden; }
.modal-back { backdrop-filter: blur(3px); }
.modal-head { background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #0f7c93) 12%, var(--surface)), var(--surface)); }
.modal-head h3 { font-size: calc(19px * var(--fs)); font-weight: 800; color: color-mix(in srgb, var(--accent, #0f7c93) 75%, #000); }
[data-theme="dark"] .modal-head h3 { color: #fff; }
.modal.danger { border-top-color: #dc2626; } .modal.danger .modal-head { background: linear-gradient(90deg, #fde6e4, var(--surface)); } .modal.danger .modal-head h3 { color: #a12a20; }
.modal.danger .modal-body { animation: tShake .4s .15s; }
@media (prefers-reduced-motion: reduce) { #view > *, .toast, .toast .t-ic, .modal, .stat, .btn { animation: none !important; transition: none !important; } }
/* semantic stat colours win over the rotating palette */
.grid > .stat.ok { --sc: #16a34a; } .grid > .stat.err { --sc: #dc2626; } .grid > .stat.warn { --sc: #d97706; } .grid > .stat.gold { --sc: #b7791f; }
/* move explanation tooltip */
.move-tip { position: fixed; z-index: 300; width: min(360px, calc(100vw - 16px)); background: var(--surface); color: var(--ink); border-radius: 14px; box-shadow: 0 20px 44px -14px rgba(8,30,44,.5); border: 1px solid var(--line); padding: 0 0 10px; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; pointer-events: none; font-size: calc(14px * var(--fs)); line-height: 1.7; overflow: hidden; }
.move-tip.show { opacity: 1; transform: none; }
.mt-head { display: flex; align-items: center; gap: 9px; padding: 9px 14px; color: #fff; font-size: calc(15px * var(--fs)); }
.mt-head i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-weight: 800; }
.mt-head.ok { background: linear-gradient(135deg, #16a34a, #0f7a3f); } .mt-head.warn { background: linear-gradient(135deg, #e08a00, #b45f00); } .mt-head.bad { background: linear-gradient(135deg, #dc2626, #9f1d1d); }
.move-tip .mt-what { margin: 8px 14px 4px; } .move-tip .mt-at { color: var(--muted); font-size: calc(13px * var(--fs)); }
.mt-sec { margin: 6px 14px; padding: 7px 10px; border-radius: 10px; font-size: calc(13.5px * var(--fs)); }
.mt-sec ul { margin: 2px 0 0; padding-inline-start: 18px; }
.mt-sec.warn { background: #fff4e0; color: #7a4300; } .mt-sec.ok { background: #e3f6ea; color: #17673e; } .mt-sec.bad { background: #fde6e4; color: #8f1f17; }
.move-tip .mt-res { margin: 6px 14px 0; font-weight: 700; font-size: calc(13.5px * var(--fs)); }
.move-tip .mt-foot { display: block; margin: 6px 14px 0; color: var(--muted); font-size: calc(12.5px * var(--fs)); }
.lg-b { display: inline-grid !important; place-items: center; width: 17px !important; height: 17px !important; border-radius: 50% !important; color: #fff; font-style: normal; font-size: calc(11px * var(--fs)); font-weight: 800; margin-inline-end: 4px; }
.lg-b.ok { background: #12a150 !important; } .lg-b.warn { background: #e08a00 !important; }
.legend .lg-tip { color: var(--accent-ink); font-weight: 700; }
.move-hint .mh-help { color: var(--muted); font-size: calc(13px * var(--fs)); }
/* accent variables also available to dialogs, toasts and tooltips (they live outside .app) */
:root { --accent: #0f7c93; --accent-2: color-mix(in srgb, var(--accent) 72%, #000); --accent-soft: color-mix(in srgb, var(--accent) 11%, var(--surface)); --accent-soft-2: color-mix(in srgb, var(--accent) 20%, var(--surface)); --accent-line: color-mix(in srgb, var(--accent) 35%, transparent); --accent-ink: var(--accent-2); }
.modal .btn.primary, .modal-foot .btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; }
.modal-foot .btn { min-width: 96px; }
.modal-foot .btn.danger, .modal .btn.danger { background: linear-gradient(135deg, #dc2626, #9f1d1d) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 8px 18px -10px #dc2626; }
.modal-foot .btn.danger-ghost { color: #b42318; border-color: #f3b4ae; background: #fff5f4; }
#view.no-anim > * { animation: none; }
/* ===== login v3: one unified card (form + visual) on an immersive background ===== */
.auth-gate { display: block; overflow-y: auto; background: #0a2434; }
.auth-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(900px 600px at 85% 10%, rgba(47,192,220,.35), transparent 60%), radial-gradient(800px 600px at 10% 95%, rgba(201,154,46,.3), transparent 60%), linear-gradient(150deg, #0d566b 0%, #0f3a52 50%, #0a2434 100%); }
.auth-bg img { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(26px) saturate(1.2); opacity: .22; }
.auth-bg::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%); }
.auth-stage { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 30px 18px; }
.auth-wrap { width: min(1160px, 100%); display: grid; grid-template-columns: minmax(380px, 460px) minmax(0, 1fr); border-radius: 30px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08); animation: authIn .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes authIn { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.auth-wrap .auth-panel { display: block; padding: 36px 40px 32px; background: #fff; overflow: visible; }
.auth-wrap .auth-shell { max-width: none; gap: 20px; }
.auth-wrap .auth-card { border: 0; box-shadow: none; padding: 0; border-radius: 0; background: transparent; gap: 15px; }
.auth-wrap .auth-top b { font-size: calc(18px * var(--fs)); }
.auth-wrap .auth-art { position: relative; display: flex; align-items: center; padding: 36px 40px; overflow: hidden; border-radius: 0; background: radial-gradient(600px 420px at 15% 5%, rgba(47,192,220,.32), transparent 60%), radial-gradient(500px 400px at 95% 100%, rgba(201,154,46,.32), transparent 60%), linear-gradient(155deg, #0e6178 0%, #0f3f58 55%, #0b2a3c 100%); }
.auth-wrap .auth-art::after { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.25), transparent); }
.auth-wrap .auth-art-inner { max-width: 600px; gap: 18px; margin: 0 auto; }
.auth-wrap .auth-visual { height: 250px; margin-bottom: 4px; }
.auth-wrap .auth-visual img { width: 74%; height: 215px; border-radius: 20px; }
.auth-wrap .auth-mini { width: 58%; }
.auth-wrap .auth-art h2 { font-size: calc(31px * var(--fs)); }
.auth-wrap .auth-lead { font-size: calc(15.5px * var(--fs)); }
.auth-wrap .auth-feats { gap: 10px; }
.auth-wrap .auth-feats li { padding: 11px; } .auth-wrap .auth-feats b { font-size: calc(14.5px * var(--fs)); } .auth-wrap .auth-feats small { font-size: calc(12.5px * var(--fs)); }
.auth-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.auth-foot .auth-secure { color: #cfe3ea; } .auth-foot .auth-secure svg { color: #6ee7a0; }
.auth-foot .auth-ver { margin: 0; color: #8fb0bf; }
@media (max-width: 1100px) { .auth-wrap .auth-feats { grid-template-columns: 1fr 1fr; } .auth-wrap .auth-art h2 { font-size: calc(26px * var(--fs)); } }
@media (max-width: 980px) {
  .auth-wrap { grid-template-columns: 1fr; max-width: 560px; }
  .auth-wrap .auth-art { display: flex; order: -1; padding: 22px 24px 20px; }
  .auth-wrap .auth-art::after { display: none; }
  .auth-wrap .auth-visual { height: 150px; } .auth-wrap .auth-visual img { height: 140px; width: 70%; } .auth-wrap .auth-mini { width: 55%; padding: 10px; } .auth-wrap .auth-mini-grid i { height: 12px; }
  .auth-wrap .auth-float { display: none; }
  .auth-wrap .auth-art h2 { font-size: calc(22px * var(--fs)); } .auth-wrap .auth-lead, .auth-wrap .auth-feats { display: none; }
  .auth-wrap .auth-panel { padding: 26px 22px; }
}
@media (max-width: 520px) { .auth-stage { padding: 12px 10px; } .auth-wrap { border-radius: 22px; } .auth-wrap .auth-visual { display: none; } .auth-wrap .auth-art { padding: 18px 20px; } }
@media (max-height: 800px) and (min-width: 981px) { .auth-stage { padding: 16px 18px; } .auth-wrap .auth-panel { padding: 24px 34px; } .auth-wrap .auth-card { gap: 11px; } .auth-wrap .auth-shell { gap: 14px; } .auth-wrap .auth-visual { height: 190px; } .auth-wrap .auth-visual img { height: 165px; } .auth-wrap .auth-mini-grid i { height: 14px; } .auth-wrap .auth-art h2 { font-size: calc(25px * var(--fs)); } .auth-wrap .auth-art-inner { gap: 12px; } .auth-input input { height: 46px; } .auth-submit { height: 48px; } }
@media (max-height: 800px) and (min-width: 981px) { .auth-wrap .auth-float.f2 { top: auto; bottom: 6px; inset-inline-start: auto; inset-inline-end: 36%; } }
/* ===== app shell scrolling: the far-right bar scrolls the menu, the inner bar scrolls the screen ===== */
html, body { overflow: hidden; }
.app { height: 100vh; min-height: 0; overflow: hidden; }
.app > .main { height: 100vh; overflow-y: auto; overflow-x: hidden; direction: ltr; scrollbar-gutter: stable; scroll-behavior: auto; }
.app > .main > * { direction: rtl; }
.side { direction: ltr; scrollbar-gutter: stable; } .side > * { direction: rtl; }
.app > .main::-webkit-scrollbar, .side::-webkit-scrollbar { width: 11px; }
.app > .main::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 45%, #9aa9b3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.app > .main::-webkit-scrollbar-track { background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.side::-webkit-scrollbar-track { background: rgba(0,0,0,.15); }
@media print { html, body { overflow: visible; } .app, .app > .main { height: auto; overflow: visible; } }
/* quality ring number visible on coloured stat cards */
.stat .qring span { color: var(--ink) !important; font-size: calc(17px * var(--fs)); font-weight: 800; }
/* ===== reports studio ===== */
.rs-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.rs-qc { --gc: #0f7c93; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--gc) 30%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 10%, var(--surface)), var(--surface)); cursor: pointer; font: inherit; color: var(--ink); text-align: right; transition: transform .15s, box-shadow .15s; }
.rs-qc span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--gc); color: #fff; flex: none; box-shadow: 0 6px 14px -6px var(--gc); }
.rs-qc b { font-size: calc(15px * var(--fs)); font-weight: 800; } .rs-qc:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px var(--gc); }
.rs-qc.on { background: linear-gradient(135deg, var(--gc), color-mix(in srgb, var(--gc) 70%, #000)); color: #fff; border-color: transparent; } .rs-qc.on span { background: rgba(255,255,255,.22); }
.rs-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; align-items: start; }
.rs-cat { position: sticky; top: 76px; max-height: calc(100vh - 92px); display: flex; flex-direction: column; overflow: hidden; border-top-width: 3px; }
.rs-search { position: relative; padding: 12px; border-bottom: 1px solid var(--line); } .rs-search .ic { position: absolute; inset-inline-start: 24px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.rs-search input { width: 100%; height: 44px; border-radius: 12px; border: 1.5px solid var(--line-2); padding: 0 40px; font: inherit; font-weight: 700; background: var(--surface-2); color: var(--ink); outline: none; } .rs-search input:focus { border-color: var(--accent); background: var(--surface); }
.rs-groups { overflow-y: auto; padding: 8px 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.rs-gh { --gc: #0f7c93; width: 100%; display: flex; align-items: center; gap: 9px; border: 0; background: color-mix(in srgb, var(--gc) 10%, var(--surface)); color: var(--gc); padding: 9px 11px; border-radius: 12px; font: inherit; font-weight: 800; font-size: calc(15px * var(--fs)); cursor: pointer; }
.rs-g { --gc: #0f7c93; } .rs-gh span { width: 28px; height: 28px; border-radius: 9px; background: var(--gc); color: #fff; display: grid; place-items: center; } .rs-gh span .ic { width: 15px; height: 15px; }
.rs-gh i { font-style: normal; margin-inline-start: auto; background: var(--gc); color: #fff; border-radius: 99px; padding: 0 9px; font-size: calc(12.5px * var(--fs)); }
.rs-g.closed .rs-items { display: none; }
.rs-items { display: flex; flex-direction: column; gap: 4px; padding: 6px 2px 2px; }
.rs-item { display: flex; gap: 10px; align-items: flex-start; border: 1px solid transparent; background: none; padding: 9px 10px; border-radius: 12px; cursor: pointer; font: inherit; color: var(--ink); text-align: right; transition: background .12s, border-color .12s; }
.rs-item:hover { background: color-mix(in srgb, var(--gc) 7%, var(--surface)); }
.rs-item.on { background: color-mix(in srgb, var(--gc) 13%, var(--surface)); border-color: color-mix(in srgb, var(--gc) 45%, transparent); box-shadow: inset -4px 0 0 var(--gc); }
.rs-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--gc) 16%, var(--surface)); color: var(--gc); flex: none; } .rs-ic .ic { width: 16px; height: 16px; }
.rs-item.on .rs-ic { background: var(--gc); color: #fff; }
.rs-tx { display: flex; flex-direction: column; min-width: 0; } .rs-tx b { font-size: calc(14.5px * var(--fs)); font-weight: 800; } .rs-tx small { font-size: calc(12.5px * var(--fs)); color: var(--muted); line-height: 1.55; }
.rs-tx em { font-style: normal; font-size: calc(11px * var(--fs)); background: #16a34a; color: #fff; border-radius: 99px; padding: 0 7px; margin-inline-start: 6px; vertical-align: 2px; }
.rs-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rs-opts { --gc: #0f7c93; border-top: 4px solid var(--gc); overflow: hidden; }
.rs-oh { display: flex; gap: 14px; align-items: center; padding: 18px 20px; background: linear-gradient(110deg, color-mix(in srgb, var(--gc) 14%, var(--surface)), var(--surface) 70%); border-bottom: 1px solid var(--line); }
.rs-big { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, var(--gc), color-mix(in srgb, var(--gc) 65%, #000)); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 10px 22px -10px var(--gc); } .rs-big .ic { width: 28px; height: 28px; }
.rs-oh small { color: var(--gc); font-weight: 800; } .rs-oh h3 { margin: 0; font-size: calc(22px * var(--fs)); font-weight: 800; } .rs-oh p { margin: 2px 0 0; color: var(--ink-2); font-size: calc(14.5px * var(--fs)); }
.rs-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 16px; padding: 18px 20px; align-items: end; }
.rs-full { grid-column: 1 / -1; }
.rs-seg { display: flex; flex-wrap: wrap; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); padding: 5px; border-radius: 13px; }
.rs-seg button { flex: 1; min-width: max-content; border: 0; background: none; padding: 9px 14px; border-radius: 10px; font: inherit; font-weight: 800; font-size: calc(14.5px * var(--fs)); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s, color .15s; }
.rs-seg button:hover { background: color-mix(in srgb, var(--gc, var(--accent)) 10%, var(--surface)); }
.rs-seg button.on { background: linear-gradient(135deg, var(--gc, var(--accent)), color-mix(in srgb, var(--gc, var(--accent)) 70%, #000)); color: #fff; box-shadow: 0 6px 14px -8px var(--gc, var(--accent)); }
#rsOrient button[data-o="landscape"] .ic { transform: rotate(90deg); }
.rs-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 20px 18px; border-top: 1px dashed var(--line); }
.rs-actions .btn.primary { background: linear-gradient(135deg, var(--gc), color-mix(in srgb, var(--gc) 70%, #000)); box-shadow: 0 10px 22px -12px var(--gc); }
.rs-info { margin-inline-start: auto; color: var(--ink-2); font-weight: 700; } .rs-info b { color: var(--accent-ink); font-size: calc(18px * var(--fs)); }
.rs-prev { overflow: hidden; }
.rs-ph { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .rs-ph b { display: inline-flex; align-items: center; gap: 6px; } .rs-ph small { margin-inline-start: auto; color: var(--muted); font-weight: 700; }
.rs-frame-wrap { background: repeating-linear-gradient(45deg, #e6edf1 0 12px, #edf2f5 12px 24px); padding: 0; }
#rsFrame { display: block; width: 100%; height: 640px; border: 0; background: transparent; }
.rs-empty { padding: 60px 20px; text-align: center; color: var(--muted); font-weight: 700; }
@media (max-width: 1100px) { .rs-layout { grid-template-columns: 1fr; } .rs-cat { position: static; max-height: 420px; } }

/* ===== v2.8: unified scrollbars — every scrolling screen/list keeps its scrollbar on its own right edge ===== */
.side, .sched-side, .modal-body, .guide-toc, .ob-body, .ob-tlist, .rs-groups, .auth-panel, .auth-gate, #tList, .report-list, .cond-scroll,
[style*="max-height"][style*="overflow:auto"], [style*="max-height"][style*="overflow-y:auto"] { direction: ltr; }
.side > *, .sched-side > *, .modal-body > *, .guide-toc > *, .ob-body > *, .ob-tlist > *, .rs-groups > *, .auth-panel > *, .auth-gate > *, #tList > *, .report-list > *, .cond-scroll > *,
[style*="max-height"][style*="overflow:auto"] > *, [style*="max-height"][style*="overflow-y:auto"] > * { direction: rtl; }
.sched-side, .modal-body, .guide-toc, .ob-body, .ob-tlist, .rs-groups, #tList, .report-list, .cond-scroll, [style*="max-height"][style*="overflow:auto"] { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent, #0f7c93) 55%, #9aa9b3) transparent; }
.sched-side::-webkit-scrollbar, .modal-body::-webkit-scrollbar, .guide-toc::-webkit-scrollbar, .ob-body::-webkit-scrollbar, .ob-tlist::-webkit-scrollbar, .rs-groups::-webkit-scrollbar, #tList::-webkit-scrollbar, .report-list::-webkit-scrollbar, .cond-scroll::-webkit-scrollbar, [style*="max-height"][style*="overflow:auto"]::-webkit-scrollbar { width: 9px; height: 9px; }
.sched-side::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb, .guide-toc::-webkit-scrollbar-thumb, .ob-body::-webkit-scrollbar-thumb, .ob-tlist::-webkit-scrollbar-thumb, .rs-groups::-webkit-scrollbar-thumb, #tList::-webkit-scrollbar-thumb, .report-list::-webkit-scrollbar-thumb, .cond-scroll::-webkit-scrollbar-thumb, [style*="max-height"][style*="overflow:auto"]::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent, #0f7c93) 50%, #9aa9b3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

/* ===== v2.8: full timetable — stronger day / grade separators ===== */
.tt.rpt.matrix tr.daystart td { border-top: 5px solid #0b2530 !important; }
.tt.rpt.matrix tbody tr:first-child td { border-top-width: 2px !important; }
.tt.rpt.matrix td.vday { border-top: 5px solid #0b2530 !important; border-bottom: 5px solid #0b2530; border-left: 3px solid #0b2530; }
.tt.rpt.matrix td.pnum { border-left: 3px solid #0b2530; font-weight: 900; }
.tt.rpt.matrix td.gs, .tt.rpt.matrix th.gs { border-right: 4px solid #0b2530 !important; }
.tt.rpt.matrix thead th { border-bottom: 3px solid #0b2530; }
.tt.rpt.matrix td { border-left-width: 1.6px; }

/* ===== v2.8: custom conditions ===== */
.cond-bar .card-body { gap: 10px; align-items: center; }
.cond-legend { flex: 1 1 360px; font-size: calc(13.5px * var(--fs)); color: var(--muted); line-height: 1.9; }
.cl { display: inline-block; padding: 1px 10px; border-radius: 999px; font-weight: 800; font-size: calc(12.5px * var(--fs)); }
.cl.hard, .cc-str.hard { background: #FCE8D8; color: #a2470a; }
.cl.soft, .cc-str.soft { background: #E3EEFB; color: #1d4f91; }
.cond-group { margin-top: 18px; }
.cond-gh { display: flex; align-items: center; gap: 8px; color: var(--cc); font-size: calc(18px * var(--fs)); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 3px solid color-mix(in srgb, var(--cc) 30%, transparent); }
.cond-gh svg { width: 20px; height: 20px; } .cond-gh em { font-style: normal; background: var(--cc); color: #fff; border-radius: 999px; padding: 0 10px; font-size: calc(13px * var(--fs)); }
.cond-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.cond-card { background: var(--surface); border: 1.5px solid var(--line); border-right: 6px solid var(--cc); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 2px 10px rgba(16,40,58,.06); transition: transform .15s, box-shadow .15s; animation: condIn .35s ease both; }
.cond-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16,40,58,.12); }
.cond-card.off { opacity: .62; filter: grayscale(.5); }
.cond-card.lv-err { border-color: #f1b5b2; background: linear-gradient(180deg, #fff7f6, var(--surface)); }
@keyframes condIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cc-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cc-type { font-weight: 900; color: var(--cc); font-size: calc(14px * var(--fs)); flex: 1; }
.cc-str { padding: 2px 10px; border-radius: 999px; font-weight: 800; font-size: calc(12px * var(--fs)); cursor: pointer; user-select: none; }
.cc-st { display: inline-flex; align-items: center; gap: 4px; font-size: calc(12px * var(--fs)); font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.cc-st i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: calc(11px * var(--fs)); }
.cc-st.ok { background: #DDF3E4; color: #17663a; } .cc-st.ok i { background: #1f9d55; }
.cc-st.warn { background: #FFF1CC; color: #8a5a00; } .cc-st.warn i { background: #d99a00; }
.cc-st.err { background: #FDE2E1; color: #a1241f; } .cc-st.err i { background: #d63c4a; }
.cc-text { margin: 0; font-size: calc(15.5px * var(--fs)); font-weight: 800; line-height: 1.7; color: var(--ink); }
.cc-msgs { margin: 0; padding: 0 18px 0 0; font-size: calc(13px * var(--fs)); line-height: 1.8; }
.cc-msgs li.error { color: #b42318; } .cc-msgs li.warn { color: #8a5a00; }
.cc-note { margin: 0; font-size: calc(13px * var(--fs)); color: var(--muted); background: var(--bg); border-radius: 8px; padding: 4px 8px; }
.cc-foot { display: flex; align-items: center; gap: 4px; border-top: 1px dashed var(--line); padding-top: 8px; }
.cc-foot .sp { flex: 1; }
.cc-live { font-size: calc(13px * var(--fs)); font-weight: 800; border: 0; background: none; padding: 3px 8px; border-radius: 8px; }
.cc-live.good { color: #17663a; background: #E8F7EE; } .cc-live.bad { color: #a1241f; background: #FDE2E1; cursor: pointer; } .cc-live.bad:hover { background: #fbcfcc; }
.icon-btn.danger { color: #c0362c; }
.cond-sub { margin: 18px 0 10px; color: var(--accent-ink); font-size: calc(16px * var(--fs)); }
.cond-examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cond-ex, .cond-type { text-align: right; border: 1.5px solid color-mix(in srgb, var(--cc) 35%, var(--line)); border-right: 5px solid var(--cc); background: color-mix(in srgb, var(--cc) 6%, var(--surface)); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; font: inherit; color: var(--ink); transition: transform .12s, box-shadow .12s; }
.cond-ex:hover, .cond-type:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16,40,58,.12); }
.cond-ex b, .cond-type b { color: var(--cc); font-size: calc(14.5px * var(--fs)); } .cond-ex span, .cond-type small { font-size: calc(13px * var(--fs)); color: var(--muted); font-weight: 700; }
.cond-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cond-tg { display: flex; flex-direction: column; gap: 8px; } .cond-tg h5 { margin: 0; display: flex; gap: 6px; align-items: center; color: var(--cc); font-size: calc(15px * var(--fs)); } .cond-tg h5 svg { width: 18px; height: 18px; }
.cond-editor { display: flex; flex-direction: column; gap: 14px; }
.ce-type { display: grid; grid-template-columns: minmax(240px, 1fr) 1.2fr; gap: 12px; align-items: end; }
.ce-ex { display: flex; gap: 6px; align-items: center; background: #EEF7FA; color: #0f5566; border-radius: 10px; padding: 9px 12px; font-weight: 700; font-size: calc(13.5px * var(--fs)); } .ce-ex svg { width: 17px; height: 17px; flex: none; }
.ce-fields .field.wide { grid-column: 1 / -1; }
.cond-picks { max-height: 190px; overflow-y: auto; }
.ce-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; } .ce-row .grow { flex: 1 1 260px; }
.ce-preview { border: 2px dashed color-mix(in srgb, var(--accent, #0f7c93) 40%, var(--line)); border-radius: 14px; padding: 12px 14px; background: color-mix(in srgb, var(--accent, #0f7c93) 4%, #fff); display: flex; flex-direction: column; gap: 8px; }
.ce-sent { font-weight: 900; font-size: calc(15.5px * var(--fs)); color: var(--ink); }
.ce-status { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--fs)); } .ce-status i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 900; }
.ce-status.ok i { background: #1f9d55; } .ce-status.ok b { color: #17663a; } .ce-status.warn i { background: #d99a00; } .ce-status.warn b { color: #8a5a00; } .ce-status.err i { background: #d63c4a; } .ce-status.err b { color: #a1241f; }
.ce-status span { color: var(--muted); font-weight: 700; }
.ce-live { font-weight: 800; font-size: calc(13.5px * var(--fs)); border-radius: 8px; padding: 6px 10px; } .ce-live.good { background: #E8F7EE; color: #17663a; } .ce-live.bad { background: #FFF1CC; color: #8a5a00; }
.cond-how { line-height: 2; padding-right: 18px; }
@media (max-width: 700px) { .ce-type { grid-template-columns: 1fr; } .cond-grid { grid-template-columns: 1fr; } }
.ce-status.todo i { background: #8a9aa6; } .ce-status.todo b { color: #4a5a66; } .cc-msgs li.todo { color: #4a5a66; }

/* ===== v2.9: responsive type scale (all app text grows with the screen) + Cairo ===== */
@media (min-width: 1280px) { :root { --fs: 1.12; } }
@media (min-width: 1500px) { :root { --fs: 1.2; } }
@media (min-width: 1750px) { :root { --fs: 1.27; } }
@media (min-width: 1900px) { :root { --fs: 1.3; } }
@media (max-width: 700px) { :root { --fs: 1.06; } }
body { letter-spacing: 0; font-feature-settings: "kern" 1; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, .page-head h2, .brand b, .stat b, .card-head h3 { font-family: var(--font); font-weight: 800; }
input, select, textarea, button { font-family: var(--font); }
@media (min-width: 1000px) { :root { --side: min(calc(228px * var(--fs)), 300px); } }
.nav-item { white-space: nowrap; }
.nav-item > span:not(.nav-ic):not(.badge) { overflow: hidden; text-overflow: ellipsis; }
.nav-item .nav-ic { width: calc(30px * var(--fs)); height: calc(30px * var(--fs)); }
.nav-item .nav-ic .ic { width: calc(16px * var(--fs)); height: calc(16px * var(--fs)); }
.btn .ic, .icon-btn .ic { width: calc(16px * var(--fs)); height: calc(16px * var(--fs)); }

.topbar { flex-wrap: nowrap; gap: 8px; } .topbar > * { flex-shrink: 0; } .topbar .school-pick { flex-shrink: 1; min-width: 0; } .topbar .school-pick select { min-width: 0; }
.topbar .btn, .topbar .seg button, .save-state, .topbar .pill { white-space: nowrap; }
.rpt-head > div, .rpt-head .rchips { flex-wrap: wrap; }

/* ===== v2.9.1: professional app header (top bar) ===== */
.topbar { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 92%, var(--accent))); border-bottom: 0; box-shadow: 0 1px 0 var(--line), 0 10px 24px -20px rgba(16,40,58,.55); padding: 9px 22px; position: sticky; }
.topbar::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #c99a2e) 50%, #c99a2e); opacity: .9; }
.tb-id { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); min-width: 0; }
.tb-logo { width: calc(36px * var(--fs)); height: calc(36px * var(--fs)); border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; flex: none; box-shadow: 0 6px 14px -6px var(--accent); }
.tb-logo .ic { width: calc(19px * var(--fs)); height: calc(19px * var(--fs)); }
.tb-idtx { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.topbar .tb-idtx select { border: 0; background: transparent; padding: 0 2px 0 22px; min-height: 0; height: auto; font-weight: 900; font-size: calc(15px * var(--fs)); color: var(--ink); text-align: right; text-align-last: right; box-shadow: none; max-width: 300px; }
.topbar .tb-idtx select:focus { box-shadow: none; }
.tb-idtx small { font-size: calc(11.5px * var(--fs)); color: var(--muted); font-weight: 700; padding-inline-start: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .school-pick > .ic { display: none; }
.topbar .icon-btn { background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; width: calc(36px * var(--fs)); height: calc(36px * var(--fs)); }
.topbar .icon-btn:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.topbar .seg { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.topbar .back-btn { border-radius: 11px; }

/* ===== v2.9.1: professional screen headers ===== */
.page-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 22px; border: 0; color: #fff;
  background: radial-gradient(500px 220px at 0% 0%, rgba(255,255,255,.16), transparent 60%), radial-gradient(420px 260px at 100% 120%, rgba(201,154,46,.35), transparent 65%), linear-gradient(115deg, var(--accent-2) 0%, var(--accent) 60%, color-mix(in srgb, var(--accent) 75%, #fff) 100%);
  box-shadow: 0 18px 40px -24px var(--accent); }
.page-head::before { content: ''; position: absolute; inset: 0; width: auto; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(90deg, transparent, #000 70%); pointer-events: none; }
.page-head::after { display: none; }
.ph-ic { width: calc(58px * var(--fs)); height: calc(58px * var(--fs)); border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 24px -12px rgba(0,0,0,.45); }
.ph-ic .ic { width: calc(30px * var(--fs)); height: calc(30px * var(--fs)); color: #fff; }
.ph-crumb { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--fs)); font-weight: 800; color: rgba(255,255,255,.82); }
.ph-crumb i { font-style: normal; opacity: .7; }
.page-head .ph-crumb .eyebrow { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; border: 1px solid rgba(255,255,255,.35); padding: 1px 12px; border-radius: 99px; font-size: calc(12.5px * var(--fs)); }
.page-head h2 { color: #fff !important; margin-top: 4px; text-shadow: 0 2px 12px rgba(0,0,0,.18); }
.page-head p { color: rgba(255,255,255,.9) !important; font-weight: 700; max-width: 900px; }
.page-head .ph-actions { justify-content: flex-end; }
.page-head .btn { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); box-shadow: none; }
.page-head .btn:hover:not(:disabled) { background: rgba(255,255,255,.26); }
.page-head .btn.primary { background: #fff; color: var(--accent-2); border-color: #fff; box-shadow: 0 10px 22px -12px rgba(0,0,0,.5); }
.page-head .btn.gold { background: #c99a2e; color: #1d1606; border-color: #c99a2e; }
.page-head .pill { box-shadow: 0 4px 12px -6px rgba(0,0,0,.4); }
@media (max-width: 760px) { .page-head { grid-template-columns: auto 1fr; } .page-head .ph-actions { grid-column: 1 / -1; justify-content: flex-start; } }

/* ===== v2.9.1: login uses the app font everywhere ===== */
.auth-gate, .auth-gate * { font-family: var(--font); }
.auth-gate .auth-top small { font-family: var(--font); letter-spacing: .04em; }
.auth-gate input[dir="ltr"] { font-family: var(--font); }

/* report live preview: the wrapper scrolls (scrollbar on the right like every list) */
.rs-frame-wrap { max-height: min(78vh, 900px); overflow-y: auto; overflow-x: hidden; direction: ltr; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 55%, #9aa9b3) transparent; }
.rs-frame-wrap > * { direction: rtl; }
.rs-frame-wrap::-webkit-scrollbar { width: 11px; } .rs-frame-wrap::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 50%, #9aa9b3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
#rsFrame { overflow: hidden; }
.auth-guest { height: auto !important; min-height: 50px; padding: 8px 14px; line-height: 1.5; }

/* ===== v2.9.2: bold, readable text in every table cell ===== */
.tbl td, .tt td, .tt.rpt td { font-weight: 800; }
.tt.rpt .lesson.rl b { font-weight: 900; } .tt.rpt .lesson.rl span { font-weight: 800; }
.lesson b { font-weight: 900; } .lesson span { font-weight: 800; opacity: 1; }
/* user guide: larger bold text with the part colours */
.g-body { font-size: calc(15.5px * var(--fs)); font-weight: 700; color: var(--ink); line-height: 2; }
.g-body b, .g-body strong { color: var(--c); font-weight: 900; }
.g-body table td { font-weight: 700; } .g-body table td:first-child { font-weight: 900; color: var(--c); background: color-mix(in srgb, var(--c) 7%, var(--surface)); }
.g-body li::marker { color: var(--c); }
.g-ch { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 5%, var(--surface)), var(--surface) 120px); }
.g-ch-title { color: var(--c); }
.g-body p { color: var(--ink-2); }

/* ===== v2.9.2: duties & cover — colourful professional layout ===== */
.duty-stats { margin-bottom: 14px; }
.duty-bar .card-body { gap: 14px; align-items: flex-end; }
.duty-target { flex-direction: row !important; align-items: center; gap: 8px !important; } .duty-target .input { width: 84px; text-align: center; }
.duty-legend { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.dl { padding: 3px 12px; border-radius: 99px; font-size: calc(12.5px * var(--fs)); font-weight: 800; }
.dl.auto { background: #E3F1F6; color: #0f5566; } .dl.flex { background: #FFF1CC; color: #8a5a00; } .dl.manual { background: #EDE4FB; color: #5b3aa5; }
.duty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-top: 14px; }
.duty-day2 { background: var(--surface); border-radius: 18px; border: 1px solid color-mix(in srgb, var(--dc) 30%, var(--line)); box-shadow: 0 10px 26px -20px var(--dc); overflow: hidden; display: flex; flex-direction: column; animation: condIn .35s ease both; }
.duty-day2 header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; color: #fff; background: linear-gradient(120deg, var(--dc), color-mix(in srgb, var(--dc) 70%, #000)); }
.duty-day2 header b { display: block; font-size: calc(18px * var(--fs)); font-weight: 900; } .duty-day2 header small { color: rgba(255,255,255,.85); font-weight: 700; }
.dd-count { min-width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: calc(18px * var(--fs)); font-weight: 900; }
.dd-meter { height: 5px; background: var(--dbg); } .dd-meter i { display: block; height: 100%; background: var(--dc); transition: width .4s; }
.duty-day2 ul { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dd-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--dbg) 45%, var(--surface)); border: 1px solid color-mix(in srgb, var(--dc) 18%, transparent); border-inline-start: 4px solid #0f7c93; }
.dd-item.src-auto-flex { border-inline-start-color: #d99a00; } .dd-item.src-manual { border-inline-start-color: #7c3aed; }
.dd-item .avatar { width: 36px; height: 36px; border-radius: 11px; font-size: calc(15px * var(--fs)); }
.dd-tx { flex: 1; min-width: 0; } .dd-tx b { display: block; font-size: calc(15px * var(--fs)); font-weight: 900; color: var(--ink); }
.dd-ps { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 3px; } .dd-ps i { font-style: normal; min-width: 21px; height: 21px; border-radius: 6px; display: grid; place-items: center; font-size: calc(11.5px * var(--fs)); font-weight: 800; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); }
.dd-ps i.p7 { background: #FDE2E1; border-color: #f1b5b2; color: #a1241f; } .dd-ps em { font-style: normal; color: var(--muted); font-size: 12px; }
.dd-note { display: block; margin-top: 3px; color: #5b3aa5; font-weight: 700; font-size: calc(12px * var(--fs)); }
.dd-acts { display: flex; gap: 2px; } .dd-empty { text-align: center; color: var(--muted); padding: 14px; font-weight: 700; }
.dd-add { margin: 0 10px 12px; border: 1.5px dashed color-mix(in srgb, var(--dc) 45%, var(--line)); background: color-mix(in srgb, var(--dbg) 30%, var(--surface)); color: var(--dc); border-radius: 12px; padding: 8px; font: inherit; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.dd-add:hover { background: var(--dbg); } .dd-add .ic { width: 16px; height: 16px; }
.chip.duty-free { border-inline-start: 4px solid var(--tc); font-weight: 800; }
.cv-tools { display: flex; gap: 8px; margin: 4px 0 12px; }
.cv-day { margin-bottom: 12px; overflow: hidden; border-top: 0 !important; }
.cv-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: #fff; background: linear-gradient(120deg, var(--dc), color-mix(in srgb, var(--dc) 70%, #000)); }
.cv-sum::-webkit-details-marker { display: none; }
.cv-dname { font-size: calc(18px * var(--fs)); font-weight: 900; } .cv-sum .sub { color: rgba(255,255,255,.85); font-weight: 700; }
.cv-sum .chev { margin-inline-start: auto; transition: transform .2s; } .cv-day[open] .cv-sum .chev { transform: rotate(-90deg); }
.cv-tbl th { background: linear-gradient(180deg, var(--dc), color-mix(in srgb, var(--dc) 72%, #000)) !important; }
.cv-tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--dbg) 40%, var(--surface)) !important; }
.cv-tbl tr.src-manual td:first-child { box-shadow: inset -4px 0 0 #7c3aed; } .cv-tbl tr.src-cleared td { opacity: .7; }
.cv-p { display: inline-block; padding: 2px 10px; border-radius: 8px; background: var(--dbg); color: var(--ink); font-weight: 900; }
.cv-t { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 4px; border-radius: 99px; background: color-mix(in srgb, var(--tc) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent); font-weight: 800; white-space: nowrap; }
.cv-t i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--tc); color: #fff; font-size: 12px; }
.cv-t.first { font-size: calc(14.5px * var(--fs)); font-weight: 900; } .cv-t.alt { font-size: calc(12.5px * var(--fs)); opacity: .9; }
.cv-alts { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.cv-fair { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; }
.cv-bar { display: grid; grid-template-columns: 120px 1fr 30px; align-items: center; gap: 8px; font-weight: 800; } .cv-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cv-bar i { height: 12px; border-radius: 99px; min-width: 6px; opacity: .85; } .cv-bar b { text-align: center; }
.cv-slot { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; color: #fff; background: linear-gradient(120deg, var(--dc), color-mix(in srgb, var(--dc) 70%, #000)); } .cv-slot b { font-size: 18px; }
.cv-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 360px; overflow-y: auto; direction: ltr; } .cv-pick > * { direction: rtl; }
.cv-pick label { position: relative; } .cv-pick input { position: absolute; opacity: 0; }
.cv-pick span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--line); cursor: pointer; background: var(--surface); }
.cv-pick span i { grid-row: 1 / 3; font-style: normal; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--tc); color: #fff; font-weight: 900; }
.cv-pick span b { font-weight: 900; } .cv-pick span small { color: var(--muted); font-weight: 700; }
.cv-pick input:checked + span { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 10%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 25%, transparent); }

/* ===== v2.9.8: keep the active school name readable in the top bar; secondary labels collapse to icons on narrower screens ===== */
.topbar .school-pick { flex-shrink: 0; min-width: 0; max-width: min(340px, 34vw); }
@media (max-width: 1500px) { .topbar .cloud-chip span { display: none; } }
@media (max-width: 1760px) { .topbar .save-state > span, .topbar .back-btn small { display: none; } }
@media (max-width: 1150px) { .topbar .school-pick { flex-shrink: 1; } }

/* ===== v2.9.8: screenshots inside the user guide ===== */
.g-figs { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 18px 0 4px; }
.g-fig { margin: 0; width: 100%; max-width: min(var(--fw, 100%), 100%); border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 28%, var(--line)); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 10px 28px -16px rgba(16,40,58,.45); }
.g-fig.narrow { max-width: min(var(--fw, 100%), 620px); }
.g-fig img { display: block; width: 100%; height: auto; cursor: zoom-in; background: var(--surface-2); }
.g-fig figcaption { padding: 10px 16px; font-size: calc(13.5px * var(--fs)); line-height: 1.8; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--c, var(--accent)) 7%, var(--surface)); border-top: 1px solid color-mix(in srgb, var(--c, var(--accent)) 20%, var(--line)); }
.g-fig figcaption b { color: var(--c, var(--accent)); font-weight: 900; margin-inline-end: 8px; white-space: nowrap; }
.g-fig-ph { aspect-ratio: 16/10; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); font-weight: 700; background: var(--surface-2); }
.g-fig-ph .ic { width: 34px; height: 34px; opacity: .6; }
.g-lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(8,20,30,.82); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 28px; cursor: zoom-out; }
.g-lightbox figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.g-lightbox img { max-width: min(1500px, 100%); max-height: calc(100vh - 120px); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #fff; }
.g-lightbox figcaption { color: #fff; font-weight: 700; font-size: calc(14px * var(--fs)); text-align: center; max-width: 900px; line-height: 1.8; }
.g-lightbox > .icon-btn { position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); }

/* ===== v2.9.9: unified responsive layer (phones & tablets) ===== */
.app > .main > .topbar, .app > .main > .content { flex-shrink: 0; }
@media (max-width: 1180px) { .sched-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 980px) { .split, .guide-layout, .g2col { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }
.grid > *, .split > *, .sched-layout > *, .g2col > *, .guide-layout > * { min-width: 0; }
@media (max-width: 760px) {
  /* top bar: two tidy rows — controls on the first, the active school on the second */
  .topbar { flex-wrap: wrap; row-gap: 8px; padding: 8px 12px; gap: 6px; }
  .topbar .school-pick { order: 20; flex: 1 1 100%; max-width: none; flex-shrink: 1; }
  .topbar .school-pick select { max-width: 100%; width: 100%; }
  .topbar .spacer { display: none; }
  .topbar #sysSeg { margin-inline-start: auto; }
  .topbar .save-state, .topbar .back-btn small, .topbar .cloud-chip span { display: none; }
  .topbar .icon-btn, .topbar .cloud-chip { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; }
  .topbar { gap: 4px; }
  .topbar .back-btn span { display: none; } .topbar .back-btn { padding: 0 8px; min-height: 32px; }
  .topbar #sysSeg button { padding: 4px 9px; }
  /* compact screen headers */
  .page-head { padding: 16px; gap: 12px; border-radius: 18px; }
  .page-head h2 { font-size: calc(22px * var(--fs)) !important; line-height: 1.3; }
  .page-head p { font-size: calc(13px * var(--fs)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .page-head .ph-ic { width: 46px; height: 46px; border-radius: 14px; }
  .page-head .ph-actions { flex-wrap: wrap; gap: 8px; }
  .page-head .ph-actions .btn { flex: 1 1 auto; justify-content: center; }
  .g-body { overflow-x: auto; }
  .card-head { flex-wrap: wrap; row-gap: 8px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; }
}

/* ===== v2.9.9: dark theme — day-coloured cards use a dark tint instead of the light pastel ===== */
:root[data-theme="dark"] .duty-day2, :root[data-theme="dark"] .cv-day { --dbg: color-mix(in srgb, var(--dc) 22%, var(--surface)) !important; }
:root[data-theme="dark"] .dd-item { background: color-mix(in srgb, var(--dc) 12%, var(--surface)); }
:root[data-theme="dark"] .dd-add { color: color-mix(in srgb, var(--dc) 55%, #fff); background: color-mix(in srgb, var(--dc) 10%, var(--surface)); }
:root[data-theme="dark"] .cv-p { color: #fff; background: color-mix(in srgb, var(--dc) 45%, var(--surface)); }
:root[data-theme="dark"] .cv-tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--dc) 7%, var(--surface)) !important; }
:root[data-theme="dark"] .dd-ps i { background: var(--surface-3); color: var(--ink); border-color: var(--line-2); }
:root[data-theme="dark"] .dd-ps i.p7 { background: #4a1d1c; color: #ffb4ae; border-color: #7a2c28; }
:root[data-theme="dark"] .dd-note { color: #c4b5fd; }
/* dark theme: coloured headings/labels lighten so they stay readable on dark surfaces */
:root[data-theme="dark"] .g-toc-part b, :root[data-theme="dark"] .g-toc-part a i { color: color-mix(in srgb, var(--c) 50%, #fff); }
:root[data-theme="dark"] .cond-ex b, :root[data-theme="dark"] .cond-type b { color: color-mix(in srgb, var(--cc) 50%, #fff); }
:root[data-theme="dark"] .rs-gh b { color: color-mix(in srgb, var(--gc) 45%, #fff); }
:root[data-theme="dark"] .chip.subj .chip-x { color: rgba(16, 40, 58, .7); }
:root[data-theme="dark"] .ce-ex { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--ink); }
:root[data-theme="dark"] .ce-preview { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
:root[data-theme="dark"] .modal.danger .modal-head { background: linear-gradient(90deg, #4a1d1c, var(--surface)); }
:root[data-theme="dark"] .modal.danger .modal-head h3 { color: #ffb4ae; }
:root[data-theme="dark"] .modal-foot .btn.danger-ghost { color: #ffb4ae; border-color: #7a2c28; background: #2a1514; }

:root[data-theme="dark"], :root[data-theme="dark"] .app { --accent-ink: color-mix(in srgb, var(--accent) 50%, #fff); }
:root[data-theme="dark"] .ce-status.todo b, :root[data-theme="dark"] .cc-msgs li.todo { color: var(--ink-2); }
:root { --gold-ink: #85600d; } :root[data-theme="dark"] { --gold-ink: #e8c46a; }
.pill.gold, .badge.gold { color: var(--gold-ink); }
.tt.rpt .lesson.rl.wrap b, .tt.rpt .lesson.rl.wrap span { white-space: normal; text-align: center; overflow-wrap: anywhere; line-height: 1.2; }
/* unified control radii */
.btn { border-radius: 10px; } .btn.sm { border-radius: 9px; } .btn.lg { border-radius: 12px; }
.icon-btn, .topbar .icon-btn, .topbar .back-btn { border-radius: 10px; } .icon-btn.sm { border-radius: 8px; }
/* dark theme: login card follows the theme */
:root[data-theme="dark"] .auth-wrap .auth-panel { /* the sign-in card keeps its light design in both themes */
  --bg: #f2f5f7; --surface: #ffffff; --surface-2: #f7f9fa; --surface-3: #eef2f4; --ink: #0e1d28; --ink-2: #2a3f4c; --muted: #4f6573; --line: #dde5ea; --line-2: #c9d5dc;
  --brand: #0e6f86; --brand-ink: #0b5466; --brand-soft: #e3f3f6; --ok: #15803d; --ok-soft: #e6f6ec; --warn: #b45309; --warn-soft: #fff4e2; --err: #c0262d; --err-soft: #fdeaea; --info: #1d5fa8; --info-soft: #e8f0fb; color-scheme: light; color: var(--ink); }

/* accessibility: visible focus ring for keyboard users, consistent across all controls */
:where(button, .btn, a, input, select, textarea, [tabindex]):focus-visible { outline: 2.5px solid color-mix(in srgb, var(--accent) 70%, #fff); outline-offset: 2px; }
.kbd-tbl td { padding: 8px 10px; } .kbd-tbl td:first-child { width: 120px; white-space: nowrap; }
.kbd { display: inline-block; min-width: 26px; padding: 2px 8px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 7px; background: var(--surface-2); font-family: ui-monospace, Consolas, monospace; font-size: .9em; font-weight: 700; direction: ltr; text-align: center; color: var(--ink); }

/* ===== v2.9.9: local-only data guard ===== */
.lg-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; border-radius: 16px; background: var(--warn-soft); border: 1.5px solid color-mix(in srgb, var(--warn) 45%, transparent); color: var(--ink); }
.lg-banner.danger { background: var(--err-soft); border-color: color-mix(in srgb, var(--err) 55%, transparent); box-shadow: 0 10px 24px -18px var(--err); }
.lg-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--warn); color: #fff; flex: none; } .lg-banner.danger .lg-ic { background: var(--err); animation: lgPulse 2s ease-in-out infinite; }
.lg-ic .ic { width: 22px; height: 22px; }
.lg-tx { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; } .lg-tx b { font-size: calc(15.5px * var(--fs)); font-weight: 900; } .lg-tx span { font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--ink-2); }
.lg-acts { display: flex; gap: 8px; flex-wrap: wrap; }
@keyframes lgPulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--err) 20%, transparent); } }
.lg-warn { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--err-soft); border: 1px solid color-mix(in srgb, var(--err) 40%, transparent); }
.lg-warn > .ic { width: 28px; height: 28px; color: var(--err); flex: none; } .lg-warn b { font-size: calc(16px * var(--fs)); font-weight: 900; color: var(--err); } .lg-warn p { margin: 4px 0 0; font-weight: 700; }
.lg-list { margin: 0; padding-inline-start: 20px; line-height: 2; font-weight: 700; }
.lg-ack { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1.5px dashed var(--line-2); font-weight: 800; }
@media print { .lg-banner { display: none !important; } }