:root {
  --canvas: #f4f5f1;
  --panel: #ffffff;
  --ink: #171917;
  --soft-ink: #70736f;
  --line: #dfE1dc;
  --acid: #d7ff40;
  --acid-ink: #394018;
  --day-hover: #f6f7f2;
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body { -webkit-font-smoothing: antialiased; background: var(--canvas); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; min-width: 320px; }
button { color: inherit; cursor: pointer; font: inherit; }
.app-shell { margin: 0 auto; max-width: 1260px; padding: 22px 30px 48px; }
.site-header { align-items: center; display: flex; justify-content: space-between; min-height: 40px; }
.wordmark { align-items: center; color: var(--ink); display: inline-flex; font-size: 16px; font-weight: 800; gap: 8px; letter-spacing: -.55px; text-decoration: none; }
.wordmark-mark { align-items: center; background: var(--ink); border-radius: 7px; color: var(--acid); display: inline-flex; font-size: 16px; height: 28px; justify-content: center; line-height: 1; width: 28px; }
.sync-state { align-items: center; color: #70736f; display: flex; font-size: 11px; font-weight: 600; gap: 6px; }
.sync-state span { background: #78aa36; border-radius: 99px; display: block; height: 7px; width: 7px; }
.intro { align-items: end; border-bottom: 1px solid var(--line); display: flex; gap: 20px; justify-content: space-between; padding: 76px 0 28px; }
.eyebrow { color: #777a74; font-size: 10px; font-weight: 800; letter-spacing: .12em; margin: 0 0 9px; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(34px, 4.6vw, 62px); font-weight: 750; letter-spacing: -.07em; line-height: .98; margin-bottom: 0; }
h2 { font-size: 20px; font-weight: 750; letter-spacing: -.04em; margin-bottom: 0; }
.intro-note { color: var(--soft-ink); font-size: 13px; font-weight: 500; line-height: 1.55; margin: 0 0 2px; max-width: 266px; }
.student-tabs-wrap { overflow-x: auto; padding: 21px 0; }
.student-tabs { display: flex; gap: 7px; min-width: max-content; }
.student-tab { background: transparent; border: 1px solid transparent; border-radius: 100px; color: #61645f; font-size: 12px; font-weight: 650; padding: 8px 11px; transition: background .13s ease, border-color .13s ease; white-space: nowrap; }
.student-tab:hover { background: #eaebe6; }.student-tab.active { background: var(--ink); color: #fff; }.student-tab.active .student-tab-dot { opacity: 1; }
.student-tab-dot { border-radius: 50%; display: inline-block; height: 6px; margin: 0 6px 1px 0; opacity: .85; vertical-align: middle; width: 6px; }
.workspace { align-items: stretch; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) 330px; }
.calendar-panel, .agenda-panel { background: var(--panel); border: 1px solid var(--line); }
.calendar-panel { border-radius: 14px; padding: 24px; }.agenda-panel { border-radius: 14px; padding: 21px; }
.calendar-head, .agenda-heading { align-items: center; display: flex; justify-content: space-between; }
.calendar-navigation { align-items: center; display: flex; gap: 5px; }.icon-button, .today-button { border-radius: 7px; height: 31px; }
.icon-button { background: #fff; border: 1px solid var(--line); font-size: 16px; line-height: 1; width: 31px; }.icon-button:hover { background: #f0f1ed; }
.today-button { background: var(--acid); border: 1px solid var(--acid); color: var(--acid-ink); font-size: 11px; font-weight: 800; padding: 0 10px; }.today-button:hover { filter: brightness(.96); }
.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }.weekdays { border-bottom: 1px solid var(--line); margin-top: 28px; padding-bottom: 9px; }.weekdays span { color: #9b9e97; font-size: 10px; font-weight: 750; text-align: center; }
.calendar-grid { grid-auto-rows: minmax(96px, 1fr); }.calendar-day { background: #fff; border: 0; border-bottom: 1px solid #eceee9; border-right: 1px solid #eceee9; color: var(--ink); min-width: 0; overflow: hidden; padding: 8px; text-align: left; transition: background .12s ease; }.calendar-day:nth-child(7n) { border-right: 0; }.calendar-day:nth-last-child(-n+7) { border-bottom: 0; }.calendar-day:hover { background: var(--day-hover); }.calendar-day.selected { background: #f3f6e5; }.calendar-day.outside { background: #fafbf8; color: #b6b9b3; }.calendar-day.today .date-number { background: var(--ink); color: var(--acid); }
.date-number { align-items: center; border-radius: 6px; display: inline-flex; font-size: 11px; font-weight: 750; height: 23px; justify-content: center; min-width: 23px; padding: 0 4px; }
.calendar-task { border-left: 3px solid var(--ink); color: #535750; display: block; font-size: 10px; font-weight: 700; margin-top: 6px; overflow: hidden; padding: 2px 3px 2px 5px; text-overflow: ellipsis; white-space: nowrap; }.calendar-more { color: #969993; display: block; font-size: 10px; margin: 5px; }
.agenda-heading { border-bottom: 1px solid var(--line); padding-bottom: 14px; }.agenda-heading .eyebrow { color: var(--ink); font-size: 11px; letter-spacing: -.01em; margin: 0; text-transform: none; }.task-total { align-items: center; background: var(--acid); border-radius: 100px; color: var(--acid-ink); display: inline-flex; font-size: 10px; font-weight: 800; height: 22px; justify-content: center; min-width: 22px; padding: 0 7px; }
.task-list { display: grid; gap: 8px; margin-top: 14px; }.task-card { border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 9px; padding: 11px; }.task-card-meta { align-items: center; display: flex; gap: 8px; justify-content: space-between; margin-bottom: 6px; }.task-subject { font-size: 11px; font-weight: 800; }.task-student { color: #91948e; font-size: 9px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.task-body { font-size: 11px; line-height: 1.55; white-space: pre-line; }
.empty-state { color: #94978f; display: grid; font-size: 12px; min-height: 120px; place-content: center; text-align: center; }.empty-state p { margin: 0; }.empty-mark { color: #a7bb61; font-size: 22px; margin-bottom: 5px; }
.upcoming-block { border-top: 1px solid var(--line); margin-top: 17px; padding-top: 17px; }.upcoming-block .eyebrow { margin-bottom: 9px; }.upcoming-list { display: grid; gap: 2px; }.upcoming-item { align-items: baseline; display: grid; gap: 8px; grid-template-columns: 39px 1fr; padding: 7px 0; }.upcoming-date { color: #858880; font-size: 10px; font-weight: 700; }.upcoming-main { min-width: 0; }.upcoming-subject { font-size: 11px; font-weight: 800; }.upcoming-task { color: #73766f; font-size: 10px; line-height: 1.4; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.upcoming-student { color: #999c95; font-size: 9px; margin-top: 3px; }.upcoming-empty { color: #94978f; font-size: 11px; margin: 4px 0 0; }
@media (max-width: 820px) { .workspace { grid-template-columns: 1fr; }.agenda-panel { min-height: 260px; }.task-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.upcoming-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.upcoming-item { display: block; }.upcoming-main { margin-top: 3px; } }
@media (max-width: 560px) { .app-shell { padding: 15px 12px 32px; }.sync-state { font-size: 9px; }.intro { align-items: flex-start; flex-direction: column; gap: 16px; padding: 50px 3px 21px; }.intro-note { font-size: 12px; }.student-tabs-wrap { padding: 14px 0; }.calendar-panel { border-radius: 11px; padding: 15px 8px; }.agenda-panel { border-radius: 11px; padding: 16px; }.calendar-head { align-items: flex-start; flex-direction: column; gap: 14px; }.calendar-navigation { align-self: stretch; justify-content: space-between; }.calendar-grid { grid-auto-rows: 68px; }.calendar-day { padding: 5px 3px; }.calendar-task { font-size: 0; height: 5px; margin: 4px 3px; padding: 0; }.calendar-more { font-size: 8px; margin: 2px 4px; }.task-list, .upcoming-list { grid-template-columns: 1fr; }.weekdays { margin-top: 18px; } }