:root {
  --ink: #171b20;
  --muted: #68727b;
  --green: #087744;
  --green-dark: #056137;
  --green-soft: #edf8f2;
  --line-soft: #cfd5da;
  --canvas: #f5f6f7;
  --warning-soft: #fff4dc;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; min-height: 100vh; background: var(--canvas); }
button, input { font: inherit; }
button { color: inherit; }

.topbar {
  min-height: 46px;
  padding: 5px clamp(12px, 2vw, 30px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
  background: var(--green);
  border-bottom: 2px solid #1aa7d2;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.7); font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.brand-school { font-size: 9px; opacity: .78; }
.brand-title { font-size: 17px; font-weight: 700; line-height: 1.02; }

.page-shell { width: min(1920px, 100%); margin: 0 auto; padding: 7px clamp(7px, 1.2vw, 20px) 10px; }
.controls { position: relative; z-index: 10; display: flex; align-items: end; gap: 18px; padding: 0 0 6px; border-bottom: 1px solid #cbd2d8; }
.view-tabs { display: flex; align-items: center; gap: 1px; }
.view-tab { min-width: 86px; padding: 6px 11px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #4b535c; font-size: 12px; font-weight: 650; cursor: pointer; }
.view-tab:hover { color: var(--green); background: #eef4f0; }
.view-tab.is-active { color: var(--green-dark); border-bottom-color: #12a7d7; background: #edf7f2; }
.view-tab:focus-visible, .picker-input:focus-visible, .picker-option:focus-visible { outline: 3px solid rgba(20,147,190,.25); outline-offset: 1px; }

.picker { position: relative; width: min(330px, 100%); }
.picker-label { display: block; margin: 0 0 2px; color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.picker-control { position: relative; }
.picker-input { width: 100%; height: 31px; padding: 0 35px 0 9px; border: 1px solid #aab4bc; border-radius: 2px; color: var(--ink); background: #fff; font-size: 13px; }
.picker-input:focus { border-color: #1598c5; }
.picker-toggle { position: absolute; inset: 1px 1px 1px auto; width: 31px; border: 0; background: transparent; color: #5c6973; font-size: 17px; }
.picker-options { position: absolute; z-index: 30; inset: calc(100% + 3px) 0 auto 0; max-height: 300px; overflow: auto; padding: 3px; border: 1px solid #9ca9b3; border-radius: 2px; background: #fff; box-shadow: 0 10px 26px rgba(20,34,46,.18); }
.picker-option { width: 100%; padding: 6px 8px; border: 0; text-align: left; background: transparent; cursor: pointer; }
.picker-option:hover, .picker-option.is-keyboard-active { background: #eaf4f7; }
.picker-option.is-selected { color: #fff; background: var(--green); }
.picker-empty { padding: 12px; color: var(--muted); text-align: center; }

.schedule-heading { min-height: 53px; padding: 6px 2px 5px; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.eyebrow { color: var(--green); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
h1 { margin: 0; font-size: clamp(27px, 2.5vw, 38px); line-height: .96; font-weight: 500; letter-spacing: -.025em; }
.problem-indicator { padding: 4px 2px; display: inline-flex; align-items: center; gap: 4px; border: 0; color: #7a838a; background: transparent; font-size: 10px; cursor: pointer; }
.problem-indicator span { width: 8px; height: 8px; border-radius: 50%; background: #338653; box-shadow: 0 0 0 2px rgba(51,134,83,.1); }
.problem-indicator.has-problems span { background: #c72d34; box-shadow: 0 0 0 2px rgba(199,45,52,.1); }
.problem-indicator small { font-size: 10px; }
.problem-indicator:hover { color: #4d555b; }
.problem-indicator:focus-visible { outline: 3px solid rgba(20,147,190,.25); outline-offset: 2px; }

.global-warning { margin: 0 0 5px; padding: 4px 8px; border: 1px solid #e0b768; border-left: 4px solid #ce8018; color: #684512; background: var(--warning-soft); font-size: 9px; }
.global-warning code { font-family: Consolas, monospace; font-size: .95em; }

.week-grid { display: grid; grid-template-columns: 112px minmax(1000px, 1fr); grid-template-rows: 34px repeat(5, 128px); overflow: hidden; border: 1px solid #737b82; background: #fff; }
.board-corner { padding: 5px 7px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #737b82; border-bottom: 1px solid #737b82; background: #f4f5f5; }
.board-corner strong { font-size: 11px; }
.board-corner span { color: var(--muted); font-size: 8px; }
.time-ruler { position: relative; min-width: 1000px; border-bottom: 1px solid #737b82; background: #f7f8f8; }
.ruler-tick { position: absolute; top: 0; bottom: 0; width: 0; }
.ruler-tick i { position: absolute; top: 19px; bottom: 0; border-left: 1px solid #ced4d8; }
.ruler-tick.is-hour i { top: 16px; border-left-color: #89939a; }
.ruler-tick b { position: absolute; top: 5px; transform: translateX(-50%); color: #2d3338; font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ruler-tick:first-child b { transform: none; }
.ruler-tick:last-child b { transform: translateX(-100%); }

.day-label { position: relative; min-height: 128px; padding: 8px 7px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #737b82; border-bottom: 1px solid #aeb6bc; background: #fff; }
.day-label strong { font-size: 15px; font-weight: 500; }
.warning-badge { position: absolute; left: 7px; bottom: 6px; padding: 1px 4px; border: 1px solid #d99b3f; border-radius: 2px; color: #754b0a; background: #ffe1a5; font-size: 8px; font-style: normal; font-weight: 750; }
.day-label.is-today { color: var(--green-dark); background: var(--green-soft); box-shadow: inset 4px 0 0 var(--green); }

.day-track { position: relative; min-width: 1000px; min-height: 128px; overflow: hidden; border-bottom: 1px solid #aeb6bc; background: #fff; }
.day-track.is-today { background: #f5fbf7; }
.track-gridline { position: absolute; z-index: 0; top: 0; bottom: 0; width: 0; border-left: 1px solid #e3e6e8; }
.track-gridline.is-hour { border-left-color: #bec5ca; }
.lesson-layer { position: absolute; z-index: 3; inset: 5px 0; }
.has-unresolved .lesson-layer { bottom: 27px; }
.has-overlap-warning .lesson-layer { bottom: 34px; }
.lesson-group { position: absolute; z-index: 3; top: 0; bottom: 0; min-width: 38px; display: grid; grid-template-rows: 1fr; padding: 0 1px; }
.lesson-group.is-overlap-layout { bottom: auto; padding-block: 1px; }
.has-unresolved .break-slot, .has-unresolved .free-slot { bottom: 27px; }
.has-overlap-warning .break-slot, .has-overlap-warning .free-slot { bottom: 34px; }
.lesson-lanes { min-height: 0; display: grid; grid-template-rows: repeat(var(--group-lanes, 1), minmax(0, 1fr)); gap: 2px; }
.lesson-group.is-parallel { grid-template-rows: minmax(0, 1fr); }
.group-time { overflow: hidden; padding: 0 3px; color: #253039; font-size: 8px; font-weight: 800; line-height: 11px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lesson-card { --subject: #dfe4ff; min-width: 0; min-height: 0; overflow: hidden; padding: 4px 5px 3px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid color-mix(in srgb, var(--subject), #565f67 35%); background: color-mix(in srgb, var(--subject), #fff 64%); }
.lesson-card.is-long { background: color-mix(in srgb, var(--subject), #fff 52%); }
.lesson-card.has-time-conflict { border: 2px solid #d47a12; }
.card-head { display: flex; justify-content: space-between; gap: 3px; color: #39434b; font-size: 9px; line-height: 1.05; white-space: nowrap; }
.card-head span { font-weight: 760; font-variant-numeric: tabular-nums; }
.card-head em { overflow: hidden; text-overflow: ellipsis; font-style: normal; }
.lesson-card > strong { align-self: center; display: block; overflow: hidden; color: #111619; font-size: clamp(13px, 1.05vw, 19px); font-weight: 500; line-height: 1; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { overflow: hidden; color: #253039; font-size: 8.5px; line-height: 1.05; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.is-parallel .lesson-card { padding-block: 2px; }
.is-parallel .lesson-card > strong { font-size: clamp(11px, .85vw, 15px); }
.is-dense { grid-template-rows: 13px minmax(0, 1fr); }
.is-dense .lesson-lanes { gap: 1px; }
.is-dense .lesson-card { padding: 1px 4px; grid-template-columns: minmax(38px, .75fr) minmax(0, 1.75fr); grid-template-rows: 1fr; align-items: center; }
.is-dense .card-head { display: none; }
.is-dense .lesson-card > strong { font-size: clamp(10px, .72vw, 13px); text-align: left; }
.is-dense .card-meta { font-size: 7.5px; text-align: right; }

.break-slot, .free-slot { position: absolute; top: 5px; bottom: 5px; overflow: hidden; }
.break-slot { z-index: 2; min-width: 7px; display: grid; place-items: center; border-left: 1px solid #aab3ba; border-right: 1px solid #aab3ba; color: #535d64; background: #e1e5e7; }
.break-slot span { display: block; padding: 2px; font-size: 8px; font-weight: 750; line-height: 1.08; text-align: center; white-space: nowrap; transform: rotate(-90deg); }
.break-slot.is-long-break { min-width: 26px; color: #48545c; background: #e1e5e7; }
.break-slot.is-long-break span { transform: none; white-space: normal; }
.free-slot { z-index: 2; min-width: 36px; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #8a969f; color: #4e5961; background: repeating-linear-gradient(135deg,#fafbfb 0,#fafbfb 6px,#eef1f2 6px,#eef1f2 12px); text-align: center; }
.free-slot strong { font-size: 9px; line-height: 1; }
.free-slot span { margin-top: 3px; font-size: 7px; white-space: nowrap; }

.unresolved-band { position: absolute; z-index: 5; right: 4px; bottom: 3px; left: 4px; height: 20px; padding: 2px 5px; display: flex; align-items: center; gap: 6px; overflow: hidden; border: 1px solid #daaa54; color: #6a460e; background: #fff1d2; font-size: 7px; }
.unresolved-band > strong { flex: 0 0 auto; font-size: 8px; }
.unresolved-band > div { min-width: 0; display: flex; gap: 3px; overflow: hidden; }
.unresolved-band span { padding: 1px 3px; border: 1px solid #e5bf79; background: rgba(255,255,255,.5); white-space: nowrap; }
.unresolved-band.is-overlap { height: 27px; border-color: #cf8b25; background: #ffe7b8; }
.unresolved-band.is-overlap > strong { max-width: 210px; line-height: 1.05; }
.unresolved-band.is-overlap span { border-color: #d99c42; background: rgba(255,255,255,.65); }
.day-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #92999e; font-size: 10px; }

.now-line { position: absolute; z-index: 8; top: 0; bottom: 0; width: 2px; background: #d51f2e; box-shadow: 0 0 0 1px rgba(255,255,255,.65); pointer-events: none; }
.now-line::before { content: ""; position: absolute; top: 0; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #d51f2e; transform: translate(-50%,-1px); }
.now-line span { position: absolute; top: 4px; left: 4px; padding: 1px 3px; color: #fff; background: #d51f2e; font-size: 7px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty-state { grid-column: 1/-1; padding: 45px 20px; color: var(--muted); text-align: center; background: #fff; }

.problems-view { overflow: visible; padding: 0 0 12px; }
.problems-intro { margin: 0 0 8px; padding: 8px 10px; border: 1px solid #d4d9dc; color: #555f66; background: #fff; font-size: 11px; }
.problem-group { margin: 0 0 8px; border: 1px solid #cbd1d5; background: #fff; }
.problem-group h2 { margin: 0; padding: 7px 9px; border-bottom: 1px solid #d6dbde; color: #333a40; background: #f2f4f5; font-size: 13px; font-weight: 650; }
.problem-group h2 small { color: #747d84; font-size: 10px; font-weight: 550; }
.problem-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.problem-item { min-width: 0; padding: 8px 9px; border-right: 1px solid #e1e4e6; border-bottom: 1px solid #e1e4e6; }
.problem-title { display: flex; align-items: baseline; gap: 7px; }
.problem-title strong { color: #172027; font-size: 13px; }
.problem-title span { color: #6d767d; font-size: 9px; }
.problem-source { margin-top: 3px; color: #424b52; font-size: 10px; }
.problem-item p { margin: 4px 0 0; color: #5f3d13; font-size: 10px; line-height: 1.25; }
.problem-empty { margin: 0; padding: 8px 9px; color: #7b848a; font-size: 10px; }

@media (max-width: 1160px) { .week-grid { overflow-x: auto; } }

@media (max-width: 760px) {
  .topbar { min-height: 44px; }
  .brand-school { display: none; }
  .brand-title { font-size: 15px; }
  .controls { align-items: stretch; flex-direction: column; gap: 5px; }
  .view-tabs, .picker { width: 100%; }
  .view-tab { min-width: 0; flex: 1; padding-inline: 6px; }
  .schedule-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .week-grid { grid-template-columns: 94px 1000px; }
  .day-label { padding-inline: 6px; }
  .day-label strong { font-size: 13px; }
}

@media print {
  body { background: #fff; }
  .topbar { min-height: 40px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .controls, .global-warning { display: none !important; }
  .page-shell { width: 100%; padding: 4px 0; }
  .schedule-heading { min-height: 46px; }
  .week-grid { grid-template-columns: 100px minmax(900px,1fr); grid-template-rows: 32px repeat(5,96px); }
  .day-track, .day-label { min-height: 96px; }
  .lesson-card, .break-slot, .free-slot, .day-label.is-today { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .now-line { display: none; }
}