:root {
  --bg: #eef3f4;
  --ink: #16323a;
  --muted: #5f7a82;
  --line: #d5e1e5;
  --card: #fff;
  --accent: #0b6e99;
  --accent-ink: #073b52;
  --skip: #b42318;
  --shadow: 0 10px 30px rgba(22, 50, 58, .07);
  --radius: 14px;
  font-family: "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { min-height: 100vh; overflow-x: hidden; }
a { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font: inherit; }

.shell {
  max-width: 1180px; margin: 0 auto; padding: 16px 16px 24px;
  min-height: 100vh; display: flex; flex-direction: column;
}
.top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 10px 14px; box-shadow: var(--shadow);
}
.brand {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  color: var(--accent-ink);
}
.brand__mark { display: block; flex: none; }
.brand__text { display: grid; line-height: 1; }
.brand__text strong { font-size: 15px; font-weight: 800; letter-spacing: -.035em; }
.brand__text small {
  margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 700;
  letter-spacing: .075em; text-transform: uppercase;
}
.top__group {
  display: inline-flex; align-items: baseline; gap: 6px;
  color: var(--accent-ink); font-weight: 650; font-size: 14px;
  padding: 6px 10px; border-radius: 10px; background: #e7f4f8;
}
.top__group span { color: var(--muted); font-weight: 500; font-size: 12px; }
.top__group.is-active { outline: 2px solid var(--accent); }
.catalog-faculty .panel__head { margin-bottom: 4px; }
.catalog-faculty .panel__head h2 { font-size: 18px; letter-spacing: -.02em; line-height: 1.3; }
.catalog-course {
  margin: 16px 0 10px; font-size: 13px; font-weight: 700;
  color: var(--accent-ink); letter-spacing: -.01em;
}
.catalog-course:first-of-type { margin-top: 8px; }
.catalog-groups {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.catalog-group {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  background: #fff; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.catalog-group:hover { border-color: #b7cdd4; background: #f8fbfc; }
.catalog-group.is-current { box-shadow: inset 0 0 0 2px var(--accent); background: #f4fafc; }
.catalog-group.is-archived { background: #f4f5f6; }
.catalog-group.is-archived .catalog-group__link { color: var(--muted); }
.catalog-group__link { display: block; color: inherit; }
.catalog-group__link strong {
  display: block; font-size: 16px; letter-spacing: -.02em; line-height: 1.3;
  overflow-wrap: anywhere;
}
.catalog-group__meta {
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center;
}
.catalog-admin, .catalog-status {
  margin: 0; font-size: 12px; font-weight: 650; line-height: 1.3;
  white-space: nowrap;
}
.catalog-admin {
  color: var(--accent-ink); background: #e7f4f8;
  border-radius: 999px; padding: 3px 8px;
}
.catalog-status { color: var(--muted); }
.catalog-group__actions {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
  margin-top: auto;
}
.catalog-group__actions a,
.catalog-group__actions button {
  white-space: nowrap; font-size: 13px;
}
.catalog-group__actions form { margin: 0; }
.catalog-missing {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #e7f4f8;
  border: 1px solid #c5e0ea;
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow);
  color: var(--accent-ink);
}
.catalog-missing p {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}
.catalog-missing a { font-weight: 800; }
.catalog-missing a:hover { text-decoration: underline; text-underline-offset: 3px; }
.catalog-missing__icon { flex: none; margin-top: 2px; color: #229ed9; }

.nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; min-width: 0; }
.nav:empty { display: none; }
.nav__link, .logout {
  color: var(--muted); padding: 8px 10px; border-radius: 10px; font-size: 14px;
}
.nav__link.is-active { background: #e7f4f8; color: var(--accent-ink); font-weight: 650; }
.top__extra { margin-left: auto; }
.logout { margin-left: auto; }
.top__nick {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 12rem; padding: 6px 10px; border-radius: 999px;
  background: #e7f4f8; color: var(--accent-ink);
  font-size: 13px; font-weight: 650; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.top__nick:hover, a.top__nick:focus-visible { background: #d5eef6; color: var(--accent); }
a.top__nick.is-active { outline: 2px solid var(--accent); }
.top__nick-icon { flex: none; color: #229ed9; }
.top__extra + .logout,
.top__extra + .top__nick,
.top__nick + .logout { margin-left: 0; }

.main { margin-top: 18px; display: grid; gap: 14px; flex: 1; align-content: start; }

.site-foot {
  margin-top: 28px; padding: 16px 6px 4px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  color: var(--muted); font-size: 13px; line-height: 1.45;
}
.site-foot__made, .site-foot__contacts { margin: 0; }
.site-foot__contacts { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.site-foot__link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-ink);
}
.site-foot__link:hover { color: var(--accent); }
.site-foot__icon { flex: none; }
.hero, .panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
}
.hero { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.hero--compact { padding: 10px 14px; gap: 10px; align-items: center; }
.hero--compact h1 { margin: 2px 0 0; font-size: 20px; }
.hero--subject, .hero--teacher {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px 16px;
  padding: 16px 18px;
}
.hero--subject .hero__main, .hero--teacher .hero__main { min-width: 0; }
.hero--subject h1, .hero--teacher h1 { margin: 2px 0 0; font-size: 24px; }
.hero--subject .muted, .hero--teacher .muted { margin: 6px 0 0; }
.hero--subject .hero__actions, .hero--teacher .hero__actions { justify-content: flex-end; }
.hero--subject .subject__teachers,
.hero--teacher .teacher__contacts { grid-column: 1 / -1; margin: 2px 0 0; }
.teacher-card__rooms { margin: 8px 0 0; }
.teacher-card__rooms strong { font-size: 18px; letter-spacing: -.04em; }
.teacher-subjects { display: grid; gap: 12px; }
.teacher-subjects__group {
  margin: 4px 0 0; color: var(--muted); font-size: 13px; font-weight: 700;
  letter-spacing: -.01em;
}
.teacher h3 a { color: inherit; overflow-wrap: anywhere; }
.teacher h3 a:hover { color: var(--accent); }
.kicker, .login-kicker { margin: 0; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.kicker a { color: inherit; }
.kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1 { margin: 4px 0 0; font-size: 28px; letter-spacing: -.04em; overflow-wrap: anywhere; }
h2 { margin: 0; font-size: 16px; }
h3 { margin: 0 0 4px; font-size: 16px; }
.muted { color: var(--muted); }
.panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 8px; flex-wrap: wrap; }
.panel__head h2 a { color: inherit; }
.panel__head h2 a:hover { color: var(--accent); }
.quiet { color: var(--muted); font-size: 13px; }
.empty { margin: 0; color: var(--muted); }

.flash { background: #e8f7ee; color: #146c3a; border-radius: 12px; padding: 10px 14px; }

.grid-2 { display: grid; gap: 14px; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.cards, .list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.list li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border: 0; }
.muted-list { color: var(--muted); }

.pair {
  display: grid; gap: 10px; grid-template-columns: 120px 1fr;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  color: inherit;
}
a.pair:hover { background: #e7f4f8; }
.pair.is-now { box-shadow: inset 0 0 0 2px var(--accent); background: #f4fafc; }
@media (max-width: 640px) { .pair { grid-template-columns: 1fr; } }
.pair__time { display: grid; align-content: start; gap: 6px; }
.pair__no {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px;
  background: #e7f4f8; color: var(--accent-ink); font-weight: 700; font-size: 13px;
}
.tag { display: inline-flex; width: max-content; background: #f4eee4; color: #7a4e12; border-radius: 999px; padding: 2px 8px; font-size: 12px; }
.row-actions { display: flex; gap: 12px; align-items: center; margin: 8px 0 0; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; }
.danger { color: var(--skip); }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.chip, .tabs__item, button[type="submit"] {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 8px 12px; cursor: pointer;
  max-width: 100%; overflow-wrap: anywhere;
}
.chip.is-active { background: #e7f4f8; color: var(--accent-ink); }
.tabs__item.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
button[type="submit"] { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 650; min-height: 36px; }
.danger-btn { background: #fff !important; color: var(--skip) !important; border-color: #f5c2c0 !important; }
.hint { margin: 0; color: var(--muted); }

.faq-list { display: grid; gap: 0; }
.faq-item {
  display: grid; gap: 6px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.faq-item h3 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.faq-where { margin: 0; font-size: 13px; font-weight: 650; color: var(--accent-ink); }
.faq-item p { margin: 0; color: var(--muted); line-height: 1.45; }
.faq-item ul, .faq-item ol {
  margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--ink);
}
.faq-item li { line-height: 1.4; }
.faq-item code {
  font-size: 12px; background: #e7f4f8; border-radius: 6px; padding: 1px 6px;
}

.week {
  display: grid; gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) { .week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .week { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.week__day {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; min-height: 140px; box-shadow: var(--shadow);
  min-width: 0;
}
.week__day.is-today { box-shadow: var(--shadow); outline: 2px solid var(--accent); outline-offset: -2px; }
.week__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.week__head h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.day-pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.day-pairs > li { min-width: 0; }
.day-pair {
  display: grid; gap: 2px; color: inherit; padding: 8px; border-radius: 10px; background: #f8fbfc;
  min-width: 0; max-width: 100%; overflow-wrap: anywhere;
}
a.day-pair:hover { background: #e7f4f8; }
.day-pairs .quiet { display: inline-block; padding: 0 8px 6px; }

.teacher-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.teacher {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
.teacher:target { border-color: var(--accent); background: #f4fafc; }
.teacher.is-editing {
  grid-template-columns: 1fr;
  align-items: stretch;
  border-color: var(--accent);
  background: #f4fafc;
}
.teacher__contacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.teacher__room { text-align: right; max-width: 12rem; }
.teacher__room strong { font-size: 18px; letter-spacing: -.04em; overflow-wrap: anywhere; }
@media (max-width: 640px) { .teacher:not(.is-editing) { grid-template-columns: 1fr auto; } }
.form { display: grid; gap: 12px; }
.form-grid { display: grid; gap: 12px; }
@media (min-width: 700px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .span-2 { grid-column: span 2; }
}
label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 650; }
input, select, textarea {
  border: 1px solid var(--line); border-radius: 10px; min-height: 40px; padding: 0 10px;
  background: #f8fbfc; color: var(--ink);
}
input[type="hidden"] { display: none; }
textarea { min-height: 96px; padding: 10px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 0; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,110,153,.15); }
.form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.profile-rows { display: grid; gap: 16px; }
.profile-row { display: grid; gap: 4px; }
.profile-row__label { margin: 0; color: var(--muted); font-size: 13px; font-weight: 650; }
.profile-row__value { margin: 0; font-size: 16px; }
.profile-notify { margin: 0; }
.switch {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #f8fbfc;
  cursor: pointer; color: var(--ink); font-weight: 650;
}
.switch input {
  position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.switch__track {
  position: relative; flex: none; width: 48px; height: 28px; border-radius: 999px;
  background: #c5d4d8; transition: background .2s ease;
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(22, 50, 58, .25);
  transition: transform .2s ease;
}
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px rgba(11, 110, 153, .2); }
.switch__copy { display: grid; gap: 4px; min-width: 0; }
.switch__title { font-size: 15px; }
.switch__hint { color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.4; }

.admin-grant { display: grid; gap: 12px; }
@media (min-width: 760px) {
  .admin-grant { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: end; }
  .admin-grant .form-actions { margin: 0; }
}
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table th {
  color: var(--muted); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.admin-table td form { margin: 0; }
.admin-table th a { color: inherit; }
.admin-table th a:hover { color: var(--accent); }
.admin-table .admin-person__name { margin: 0; }
.admin-table .admin-person__nick { margin-top: 0; }
.admin-table .admin-person__grant select { min-width: 10rem; max-width: 18rem; }
.admin-people-hint { margin: 0 0 12px; }
.admin-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.dash {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.dash__card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); min-width: 0;
}
.dash__label {
  margin: 0; color: var(--muted); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.dash__value {
  margin: 6px 0 0; font-size: 28px; font-weight: 750; letter-spacing: -.04em;
  color: var(--accent-ink); line-height: 1.1;
}
.dash__hint { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.audit-filters { margin: 0 0 14px; }
.audit-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.audit-log__item {
  display: grid; gap: 2px 12px; padding: 10px 0;
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(8.5rem, max-content) minmax(5rem, 9rem) minmax(0, 1fr) auto;
  align-items: baseline;
}
.audit-log__item:last-child { border-bottom: 0; }
.audit-log__when, .audit-log__who, .audit-log__ip {
  margin: 0; color: var(--muted); font-size: 12px; white-space: nowrap;
}
.audit-log__who { font-weight: 650; color: var(--accent-ink); overflow: hidden; text-overflow: ellipsis; }
.audit-log__text { margin: 0; overflow-wrap: anywhere; }
.audit-log__ip { font-variant-numeric: tabular-nums; }
.audit-pager {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin: 12px 0 0;
}
@media (max-width: 760px) {
  .audit-log__item {
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
  }
  .audit-log__when { grid-column: 1; }
  .audit-log__who { grid-column: 2; justify-self: end; }
  .audit-log__text { grid-column: 1 / -1; }
  .audit-log__ip { grid-column: 1 / -1; }
}

.admin-person {
  display: grid; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #f8fbfc;
}
@media (min-width: 760px) {
  .admin-person {
    grid-template-columns: minmax(9rem, .9fr) minmax(0, 1.4fr) minmax(8rem, 1fr);
    align-items: start;
  }
}
.admin-person__who { min-width: 0; }
.admin-person__name { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.admin-person__nick { display: inline-block; margin-top: 2px; font-size: 13px; }
.admin-person__field { min-width: 0; }
.admin-person__label {
  margin: 0 0 4px; color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.admin-person__value { margin: 0; font-weight: 650; }
.admin-person__none { margin: 0; color: var(--muted); }
.admin-person__grant { margin: 0; }
.admin-person__grant select { width: 100%; min-height: 36px; }
.admin-person__grant noscript { display: block; margin-top: 8px; }
.admin-person__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.admin-person__tag {
  display: inline-flex; margin: 0; background: #e7f4f8; color: var(--accent-ink);
  border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 650;
}

.login-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.login-card {
  width: min(420px, 100%); background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 28px; display: grid; gap: 12px; box-shadow: var(--shadow);
}
.login-card h1 { margin: 0; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.login-brand img { display: block; flex: none; }
.login-brand div { display: grid; line-height: 1; }
.login-brand strong { color: var(--accent-ink); font-size: 24px; letter-spacing: -.045em; }
.login-brand span {
  margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.error { color: var(--skip); margin: 0; }
.login-card form { display: grid; gap: 12px; }
.login-card button { width: 100%; }
button.login-tg, a.login-tg {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; background: #229ed9; color: #fff; border: 0;
  border-radius: 12px; padding: 12px 14px; font-weight: 650; cursor: pointer;
  text-decoration: none; min-height: 44px;
}
button.login-tg:hover, button.login-tg:focus-visible,
a.login-tg:hover, a.login-tg:focus-visible { background: #1b8ec4; color: #fff; }
.login-or {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 0;
  color: var(--muted); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-admin summary {
  cursor: pointer; color: var(--muted); font-size: 14px;
}
.login-admin__form { display: grid; gap: 12px; margin-top: 12px; }
.login-wait { text-align: center; }
.login-wait a.login-tg { margin: 0; }

.now {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(circle at 88% -10%, rgba(243, 210, 122, .35), transparent 42%),
    linear-gradient(135deg, #073b52 0%, #0b6e99 58%, #1788b5 100%);
  border-radius: var(--radius); padding: 22px 22px 18px; box-shadow: var(--shadow);
}
.now .kicker { color: rgba(255,255,255,.72); }
.now__status {
  margin: 6px 0 0; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #f3d27a;
}
.now h2 { margin: 4px 0 6px; font-size: 30px; letter-spacing: -.04em; }
.now__subject,
.now__teacher { color: inherit; text-decoration: none; }
.now__subject:hover,
.now__subject:focus-visible,
.now__teacher:hover,
.now__teacher:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.now__lead .now__subject,
.now__lead .now__teacher,
.now__fact .now__subject,
.now__fact .now__teacher {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.now__note { margin: 0 0 10px; color: rgba(255,255,255,.78); font-size: 14px; }
.now__lead { margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.92); max-width: 40em; }
.now__facts { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .now__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.now__fact {
  background: rgba(255,255,255,.12); border-radius: 12px; padding: 10px 12px; min-width: 0;
}
.now__fact span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(255,255,255,.68); margin-bottom: 4px;
}
.now__fact strong {
  display: block; font-size: 18px; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.now__bar { margin-top: 16px; height: 5px; background: rgba(255,255,255,.18); border-radius: 99px; overflow: hidden; }
.now__bar i { display: block; height: 100%; background: #f3d27a; border-radius: 99px; }
.now.is-soon {
  color: var(--ink);
  background:
    radial-gradient(circle at 88% -10%, rgba(243, 210, 122, .3), transparent 44%),
    var(--card);
  border: 1px solid var(--line);
}
.now.is-soon .kicker { color: var(--accent); }
.now.is-soon .now__status { color: #7a4e12; }
.now.is-soon h2 { color: var(--accent-ink); }
.now.is-soon .now__note,
.now.is-soon .now__lead { color: var(--muted); }
.now.is-soon .now__fact { background: #f4fafc; }
.now.is-soon .now__fact span { color: var(--muted); }
.now.is-soon .now__fact strong { color: var(--accent-ink); }
.now--idle { padding: 16px 18px; }
.now--idle h2 { margin: 4px 0 0; font-size: 22px; }
.now.is-done .now__lead { margin-bottom: 18px; font-size: 17px; }
.now__facts--done {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) {
  .now__facts--done { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

.bells {
  display: grid; gap: 18px; align-items: center;
  background:
    radial-gradient(circle at 12% 20%, rgba(243, 210, 122, .35), transparent 42%),
    var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
}
@media (min-width: 700px) { .bells { grid-template-columns: 140px 1fr; } }
.bells__art { display: grid; place-items: center; }
.bells__body h2 { margin: 4px 0 12px; font-size: 22px; letter-spacing: -.03em; }
.bells__table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 12px; }
.bells__table th, .bells__table td {
  border: 1px solid var(--line); padding: 10px 12px; text-align: left;
}
.bells__table th { background: #f4eee4; color: #7a4e12; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.bells__table td:last-child { font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: -.02em; }
.bells__table tbody tr:nth-child(odd) td { background: #fbfaf6; }
.bells__table tr.is-now td { background: #e7f4f8; color: var(--accent-ink); }
.bells__table em { font-style: normal; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }

.hw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hw-list--live .hw-row.is-done { display: none; }
.hw-row { display: grid; gap: 0; }
.hw {
  position: relative;
  display: grid; gap: 8px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: #f8fbfc; color: inherit;
}
.hw__link {
  display: grid; gap: 10px 18px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(11.5rem, auto);
  color: inherit;
}
.hw:has(.hw__link:hover) { background: #e7f4f8; }
.hw__link:not(:has(.hw__meta)) { grid-template-columns: 1fr; }
.hw__main { display: grid; gap: 4px; min-width: 0; }
.hw__main h3 { margin: 0; }
.hw__subject { margin: 0; color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; width: max-content; }
.hw__subject:hover { color: var(--accent); }
.hw__teaser { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.hw__meta {
  display: grid; gap: 6px; justify-items: end; align-content: start;
  text-align: right; min-width: 0;
}
.hw__when { margin: 0; color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.hw__pairs { margin: 0; color: var(--accent-ink); font-size: 16px; font-weight: 650; line-height: 1.3; }
.hw.is-overdue .hw__when { color: #7a4e12; }
.hw-overdue-badge {
  display: inline-flex; align-items: center;
  background: #f6e3a1; color: #7a4e12;
  border-radius: 999px; padding: 4px 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .03em; line-height: 1.2;
  pointer-events: none;
}
.hw-row.is-done .hw { opacity: .78; }
.hw__due { margin: 4px 0 0; color: var(--muted); font-size: 16px; font-weight: 650; }
.is-overdue-text { color: var(--skip); font-weight: 650; }
.hw__body { margin: 0; white-space: pre-wrap; line-height: 1.45; }
.hw__links, .hw__files { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hw-remove { display: grid; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 650; }
.hw-remove__item { display: flex; gap: 8px; align-items: center; font-weight: 500; color: var(--ink); }
.hw-remove__item input { min-height: 0; width: 16px; height: 16px; }
.hw__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hw__actions .hw-done { display: inline-flex; align-items: center; margin: 0; }
.hw-done { margin: 0; }
.hw-done__input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}
label.chip.hw-done__btn {
  display: inline-flex; align-items: center; gap: 0; margin: 0;
  user-select: none; font-size: inherit; font-weight: 400; line-height: inherit;
}
.hw-done__mark { display: none; }
.hw-done.is-on .hw-done__btn,
.hw-done:has(.hw-done__input:checked) .hw-done__btn {
  gap: 7px;
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.hw-done.is-on .hw-done__mark,
.hw-done:has(.hw-done__input:checked) .hw-done__mark {
  width: 12px; height: 12px; flex: none;
  display: grid; place-items: center;
}
.hw-done.is-on .hw-done__mark::after,
.hw-done:has(.hw-done__input:checked) .hw-done__mark::after {
  content: ""; width: 5px; height: 9px; margin: -2px 0 0;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.hw-done__btn:hover { background: #e7f4f8; color: var(--accent-ink); }
.hw-done.is-on .hw-done__btn:hover,
.hw-done:has(.hw-done__input:checked) .hw-done__btn:hover {
  background: var(--accent-ink); border-color: var(--accent-ink); color: #fff;
}
.hw-done__btn:focus-within {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.hw-done noscript { display: inline; margin-left: 6px; }
.hw-filters { display: grid; gap: 12px; }
.hw-filters__tabs { flex-wrap: wrap; }
.hero--compact.is-done h1 { opacity: .78; }
.hero__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hw-card__note { font-size: 16px; }
.hw-card__photos { display: grid; gap: 16px; }
.hw-card__photo { margin: 0; }
.hw-card__photo a { display: block; border-radius: 12px; overflow: hidden; background: #0f2a33; }
.hw-card__photo img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }
.hw-card__photo figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }
.hw-card__files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.now__links { display: grid; gap: 6px; margin: 8px 0 12px; }
.now__url {
  color: #f3d27a; font-weight: 650; word-break: break-all; text-decoration: underline;
  text-underline-offset: 3px;
}
.now__url:hover { color: #fff; }
.now.is-soon .now__url { color: var(--accent); }
.now.is-soon .now__url:hover { color: var(--accent-ink); }

.subject {
  display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; background: #f8fbfc; color: inherit;
}
a.subject:hover { background: #e7f4f8; }
.subject h3 { margin: 0; }
.subject__meta { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.subject__teachers {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.subject__teacher {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none; max-width: 100%;
  padding: 5px 10px 5px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #f8fbfc;
}
.subject__teacher a {
  color: var(--accent-ink); font-weight: 650; font-size: 14px;
  min-width: 0; white-space: nowrap;
}
.subject__teacher form { display: inline-flex; margin: 0; flex: none; }
.subject__teacher .linkish {
  font-size: 12px; color: var(--muted); white-space: nowrap;
}
.subject__teacher .linkish:hover, .subject__teacher .linkish:focus-visible { color: var(--skip); }
button.linkish[type="submit"] {
  background: none; border: 0; min-height: 0; padding: 0;
  color: var(--accent); font-weight: 500; box-shadow: none;
}
.subject-teacher-panel { margin: 0; }
.subject-teacher-forms { display: grid; gap: 18px; }
.subject-teacher-form { margin: 0; align-items: end; }
.subject-teacher-form label { min-width: 0; }
.subject-teacher-form .form-actions { margin: 0; }
@media (min-width: 640px) {
  .subject-teacher-form--bind {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .subject-teacher-form--create {
    grid-template-columns: minmax(0, 1.4fr) minmax(7rem, .75fr) auto;
  }
}
@media (min-width: 900px) {
  .subject-teacher-forms:has(> .subject-teacher-form + .subject-teacher-form) {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
    gap: 18px 28px;
    align-items: start;
  }
  .subject-teacher-forms:has(> .subject-teacher-form + .subject-teacher-form) .subject-teacher-form--create {
    grid-template-columns: minmax(0, 1.4fr) minmax(7rem, .75fr);
    padding-left: 28px;
    border-left: 1px solid var(--line);
  }
  .subject-teacher-forms:has(> .subject-teacher-form + .subject-teacher-form) .subject-teacher-form--create .form-actions {
    grid-column: 1 / -1;
  }
}
.slot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.slot {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #f8fbfc;
}
.slot strong { font-size: 15px; letter-spacing: -.02em; }
.slot p { margin: 0; color: var(--muted); font-size: 14px; }
.note {
  display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: #f8fbfc; color: inherit;
}
.note--form { background: #fff; scroll-margin-top: 12px; }
.panel[id^="subject-"], #notes, #homework { scroll-margin-top: 12px; }
.note__head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.note__head h3 { margin: 0; }
.note__body { margin: 0; white-space: pre-wrap; line-height: 1.45; }
.note__links, .note__files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.panel > .note__links { margin: 0 0 12px; }
.note__photos { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.note__photos a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #0f2a33; }
.note__photos img { display: block; width: 100%; height: 140px; object-fit: cover; }

.due-box {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px;
}
.due-box legend { font-weight: 650; padding: 0 6px; }
.due-none { display: flex; gap: 8px; align-items: center; font-weight: 500; color: var(--ink); }
.due-none input, .due-slot input { min-height: 0; width: 16px; height: 16px; flex: none; }
.due-board { display: grid; gap: 12px; }
@media (min-width: 760px) { .due-board { grid-template-columns: 1fr 1fr; } }
.due-col {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px; max-height: 420px;
  overflow: auto; background: #f8fbfc;
}
.due-col h3 { margin: 0 0 8px; font-size: 14px; }
.due-week {
  margin: 10px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.due-slot {
  display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-radius: 10px;
  font-weight: 500; color: var(--ink); font-size: 13px; line-height: 1.35;
}
.due-slot input { margin-top: 3px; }
.due-slot:has(input:checked) { background: #e7f4f8; }

.hw-shot-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-shot-preview[hidden] { display: none; }
.hw-shot-preview img {
  width: 96px; height: 96px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line); background: #0f2a33;
}

@media (max-width: 760px) {
  .shell {
    padding: 12px max(12px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left));
  }
  .top {
    gap: 8px 10px;
    padding: 8px 10px;
  }
  .brand__mark { width: 34px; height: 34px; }
  .top__group { min-width: 0; }
  .nav {
    flex: 1 0 100%;
    order: 10;
    gap: 2px;
  }
  .nav__link, .logout {
    padding: 10px 12px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .top__extra, .top__nick { order: 3; }
  .logout { order: 4; margin-left: auto; }
  .top__nick { max-width: 8rem; }
  h1 { font-size: 22px; }
  .hero { padding: 14px; gap: 10px; }
  .hero--compact { padding: 10px 12px; }
  .hero--compact h1 { font-size: 18px; }
  .hero--subject, .hero--teacher { grid-template-columns: 1fr; padding: 14px; }
  .hero--subject h1, .hero--teacher h1 { font-size: 20px; }
  .hero--subject .hero__actions, .hero--teacher .hero__actions { justify-content: flex-start; }
  .hw__link { grid-template-columns: 1fr; }
  .hw__meta { justify-items: start; text-align: left; }
  .subject__teacher a { white-space: normal; }
  .panel, .bells { padding: 14px; }
  .now { padding: 16px 14px 14px; }
  .now h2 { font-size: 22px; }
  .now__fact strong { font-size: 16px; }
  .now__facts .now__fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tabs { width: 100%; }
  .tabs__item { flex: 1 1 auto; text-align: center; justify-content: center; display: inline-flex; }
  .bells__art svg { width: 110px; height: auto; }
  .bells__table th, .bells__table td { padding: 8px 10px; }
  .teacher { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .teacher h3, .panel__head h2 { overflow-wrap: anywhere; }
  .teacher__room { min-width: 0; }
  .hw__head, .note__head { flex-wrap: wrap; align-items: flex-start; }
  .site-foot { gap: 10px 14px; }
  .login-body {
    padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .login-card { padding: 22px 16px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; font-size: 16px; }
  textarea { min-height: 96px; }
}

@media (max-width: 380px) {
  .nav__link, .logout {
    font-size: 13px;
    padding: 8px 9px;
    min-height: 36px;
  }
}