:root{font-family:system-ui,sans-serif;color:#e4eaf2;background:#0b1019;color-scheme:dark}
*{box-sizing:border-box}body{margin:0}main{max-width:1600px;margin:auto;padding:34px 28px}
header p{color:#9aaac0}header p:first-child{color:#7dd3c4;font-size:12px;letter-spacing:.12em;font-weight:700}h1{font-size:36px;margin:12px 0;letter-spacing:-.035em}h2{font-size:23px;letter-spacing:-.02em}
.controls{display:flex;gap:16px;align-items:end;flex-wrap:wrap;background:#131c2a;border:1px solid #263348;padding:20px;border-radius:14px}
label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;color:#b8c7d9}
input,select,button{font:inherit;border:1px solid #35465f;border-radius:8px;background:#0d1522;padding:11px;color:#e4eaf2;min-height:44px}
input{width:210px}input::placeholder{color:#8193ad}#professor{min-width:240px}nav{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
button{cursor:pointer}button:hover{background:#22344a;border-color:#739bb0}button:disabled{opacity:.4;cursor:default}#today{color:#9ce5d8}option{background:#131c2a}
:focus-visible{outline:3px solid #74cbbb;outline-offset:3px}#status{font-size:14px;min-height:22px;color:#a6b8cf}
.refresh-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}.refresh-controls button{color:#9ce5d8;border-color:#3b746f;background:#132b2d}#refresh-status{font-size:12px;color:#a6b8cf}
.timetable-scroll{max-width:100%;overflow:auto;max-height:78vh;border:1px solid #2b3b51;border-radius:12px;background:#101925;scrollbar-color:#40546e #101925;scroll-padding-left:100px}
.timetable-scroll:empty{display:none}
.week-grid{width:100%;min-width:960px;table-layout:fixed;border-collapse:separate;border-spacing:0;text-align:left;font-size:13px}
.week-grid th,.week-grid td{border-right:1px solid #29384d;border-bottom:1px solid #29384d}.week-grid tr>:last-child{border-right:0}.week-grid tbody tr:last-child>*{border-bottom:0}
.week-grid thead th{position:sticky;top:0;z-index:3;background:#192638;padding:17px 12px;text-transform:capitalize;color:#e1ebf6;font-size:14px}
.week-grid .hour-heading{width:100px;left:0;z-index:4;text-transform:none;color:#a8bcd4;padding-left:16px}.day-date{display:block;color:#98adc8;font-size:12px;font-weight:400;margin-top:5px}
.week-grid .hour{position:sticky;left:0;z-index:2;background:#152132;vertical-align:top;padding:14px 8px 14px 14px;color:#d3e2f3}
.hour strong{display:inline-block;font-size:25px;font-weight:650;line-height:1.2}.hour-label{margin-left:4px;color:#a0b3ca;font-size:12px;font-weight:400}.bell-time{display:block;font-size:10px;font-weight:500;color:#a7bad1;white-space:nowrap;margin-top:8px;font-variant-numeric:tabular-nums}
.period-cell{vertical-align:top;padding:7px;height:115px;background:#101925}.week-grid tbody tr:nth-child(even) .period-cell{background:#121d2b}
.lesson{background:#1a3041;border:1px solid #2d4b5e;border-left:3px solid #6ed5bf;padding:10px;border-radius:6px;overflow-wrap:anywhere}.lesson+.lesson{margin-top:7px}
.lesson p{margin:5px 0 0;font-size:12px;color:#bbcedf}.lesson .time{margin:0 0 6px;font-weight:600;color:#91dfd0;font-size:11px;font-variant-numeric:tabular-nums}.lesson strong{display:block;font-size:15px;color:#f0f6fa}.lesson .tag{font-weight:600;color:#f0bd77}
.lesson.cancelled{background:#282536;border-color:#494257;border-left-color:#bd8291}.lesson.cancelled .time{color:#c6b8ce}.lesson.cancelled .tag{color:#e0a6b6}
.empty{display:block;text-align:center;padding:28px 0;color:#506681;font-size:18px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
footer{margin-top:24px;display:flex;gap:18px;flex-wrap:wrap;color:#96a8bf;font-size:12px}footer p{width:100%;margin:0}a{color:#8ddacc}
@media(max-width:1100px){nav{margin-left:0}}
.view-switch,#day{display:none}
dialog{background:#131c2a;color:#e4eaf2;border:1px solid #40546e;border-radius:14px;width:min(480px,94vw);max-height:85dvh;padding:18px}dialog::backdrop{background:#000a}dialog form{display:flex;justify-content:end}dialog h2{font-size:20px}
@media(max-width:650px),(max-width:950px) and (max-height:500px){
  main{padding:12px 10px}header p{display:none}h1{font-size:23px;margin:0 0 10px}h2{font-size:18px;margin:12px 0}
  .controls{padding:8px;gap:8px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .controls label{font-size:11px;gap:3px;min-width:0}#professor{width:100%;min-width:0}
  input,select,button{padding:7px;min-height:40px;font-size:13px}
  .view-switch{display:flex;gap:3px}.view-switch button[aria-pressed=true]{background:#235148;border-color:#7dd3c4;color:#bff9ea}
  nav{grid-column:1/-1;width:100%;display:flex;flex-wrap:nowrap;gap:4px;min-width:0}
  #week,#day{flex:1;width:0;min-width:0;max-width:none}#today{width:auto;white-space:nowrap}
  .mobile-day #week{display:none}.mobile-day #day{display:block}
  .refresh-controls{margin-top:8px;gap:6px;flex-wrap:nowrap}#refresh{white-space:nowrap}#refresh-status{font-size:10px}
  #status{font-size:11px;margin:7px 0;min-height:0}
  .week-grid{min-width:0}.week-grid .hour-heading{width:80px}.week-grid .hour{padding:10px 6px}
  .timetable-scroll{max-height:none}.period-cell{height:65px}.empty{padding:12px 0}.week-grid thead th{padding:10px}
  footer{font-size:10px;margin-top:8px}
}
  /* Fixed viewport overview: each of the nine school hours gets equal space. */
  .week-overview main{height:100dvh;display:flex;flex-direction:column;gap:5px;padding:8px}
  .week-overview main>*{flex-shrink:0}.week-overview h1{font-size:18px;margin:0}
  .week-overview .controls{padding:5px;gap:4px}.week-overview .controls label{font-size:0;gap:0}
  .week-overview .refresh-controls{margin:0}.week-overview #refresh{min-height:28px;padding:4px 7px;font-size:11px}
  .week-overview #refresh-status{line-height:1.2;max-height:24px;overflow:auto}
  .week-overview #status{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}
  .week-overview #heading{display:none}.week-overview footer{margin:0;font-size:9px}
  .week-overview .timetable-scroll{flex:1;min-height:0;max-height:none;overflow:hidden;border-radius:6px}
  .week-overview .week-grid{min-width:0;height:100%;font-size:10px;display:flex;flex-direction:column}
  .week-overview thead{flex:0 0 32px}.week-overview tbody{flex:1;min-height:0;display:grid;grid-template-rows:repeat(var(--periods),minmax(0,1fr))}
  .week-overview tr{display:flex;min-height:0;height:100%}.week-overview tr>*{flex:1;min-width:0;overflow:hidden}
  .week-overview .week-grid .hour-heading,.week-overview .week-grid .hour{flex:0 0 43px;width:43px;padding:2px;position:static}
  .week-overview .week-grid thead th{position:static;padding:2px;font-size:10px;text-align:center;line-height:1.15}
  .week-overview .day-date{font-size:9px;margin-top:2px}
  .week-overview .hour strong{font-size:14px;line-height:1}.week-overview .hour-label{display:none}
  .week-overview .bell-time{font-size:8px;white-space:normal;line-height:1.1;margin-top:2px;overflow-wrap:anywhere}
  .week-overview .period-cell{height:auto;padding:2px}.week-overview .empty{font-size:12px;padding:0;display:grid;place-items:center;height:100%}
  .lesson-summary{position:relative;width:100%;height:100%;min-height:0;padding:2px;border-radius:3px;border:1px solid #31576a;border-left:2px solid #6ed5bf;background:#1a3041;display:flex;flex-direction:column;justify-content:center;overflow:hidden;text-align:left;line-height:1.2}
  .lesson-summary strong,.lesson-summary span{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}
  .lesson-summary span{font-size:9px;color:#bbcedf}.lesson-summary.has-tags{border-left-color:#f0bd77}
  .entry-count{position:absolute;right:0;top:0;padding:0 2px;background:#31576a;font-size:8px;border-radius:0 0 0 3px}
  .lesson-summary:focus-visible{outline-offset:-3px}

@media(max-width:950px) and (max-height:500px){
  .week-overview header,.week-overview footer{display:none}
  .week-overview .controls{grid-template-columns:minmax(120px,1fr) auto minmax(240px,2fr)}
  .week-overview nav{grid-column:auto}.week-overview input,.week-overview select,.week-overview .controls button{min-height:32px}
  .week-overview .bell-time{display:none}.week-overview .lesson-summary{flex-direction:row;gap:4px;align-items:center;justify-content:start}
  .week-overview .lesson-summary strong,.week-overview .lesson-summary span{width:auto}
}

/* Desktop uses the same full-week overview with roomier type and controls. */
@media(min-width:651px) and (min-height:501px),(min-width:951px){
  .week-overview main{max-width:1600px;padding:18px 24px;gap:10px}
  .week-overview header p{display:none}.week-overview h1{font-size:28px}
  .week-overview .controls{padding:10px 14px;gap:16px}
  .week-overview .controls label{font-size:12px;gap:4px}
  .week-overview nav{margin-left:auto}
  .week-overview #refresh{min-height:34px;font-size:13px}
  .week-overview #status,.week-overview footer{font-size:12px}
  .week-overview thead{flex-basis:46px}
  .week-overview .week-grid thead th{font-size:14px;padding:5px}
  .week-overview .day-date{font-size:12px}
  .week-overview .week-grid .hour-heading,.week-overview .week-grid .hour{flex-basis:92px;width:92px;padding:5px}
  .week-overview .hour strong{font-size:20px}.week-overview .bell-time{font-size:10px}
  .week-overview .period-cell{padding:4px}
  .week-overview .lesson-summary{padding:4px 8px;border-radius:5px}
  .week-overview .lesson-summary strong{font-size:14px}.week-overview .lesson-summary span{font-size:12px}
  .week-overview .entry-count{font-size:10px;padding:1px 4px}
}