:root {
  color-scheme: light;
  --accent: #ffca00;
  --ink: #15181f;
  --canvas: #f4f4f0;
  --surface: #fff;
  --line: #e6e6e0;
  --muted: #737983;
  --green: #23865c;
  --red: #c94f43;
  --purple: #6d43a3;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow-x: hidden; background: var(--canvas); color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
.shell { width: 100%; max-width: 520px; min-height: 100dvh; margin: 0 auto; padding-bottom: calc(88px + env(safe-area-inset-bottom)); background: var(--canvas); }
.topbar { position: relative; display: flex; align-items: center; gap: 9px; width: 100vw; max-width: none; margin-left: calc((100% - 100vw) / 2); padding: calc(11px + env(safe-area-inset-top)) 14px 10px; overflow: hidden; background: var(--accent); color: var(--ink); }
.topbar:after { position: absolute; right: 20px; bottom: -37px; width: 110px; height: 82px; border: 1px solid #15181f13; content: ""; pointer-events: none; transform: rotate(45deg); }
.mark { position: relative; z-index: 1; flex: 0 0 auto; width: auto; height: auto; padding: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 16px; font-weight: 900; letter-spacing: -.07em; }
.group-heading { position: relative; z-index: 1; order: 1; display: grid; min-width: 0; gap: 2px; }
.group-heading strong { overflow: hidden; color: var(--ink); font-size: 13px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.group-heading small { color: #42454b; font-size: 10px; }
.mark { order: 0; }
.brand-spark { position: relative; z-index: 1; order: 2; margin-left: auto; color: var(--ink); font-size: 17px; font-weight: 900; letter-spacing: -.12em; white-space: nowrap; }
.role-pill { position: relative; z-index: 1; order: 3; flex: 0 0 auto; margin-left: 0; padding: 5px 9px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--accent); font-size: 10px; font-weight: 700; white-space: nowrap; }
.screen { min-width: 0; padding: 0 14px 28px; overflow-x: clip; background: var(--canvas); }
.screen > .title, .screen > .subtitle, .screen > .week-strip { width: 100vw; max-width: none; margin-left: calc((100% - 100vw) / 2); padding-right: 14px; padding-left: 14px; background: var(--accent); }
.title { margin-top: 0; margin-bottom: 0; padding-top: 5px; padding-bottom: 3px; color: var(--ink); font-size: 23px; font-weight: 800; letter-spacing: -.035em; line-height: 1.13; }
.subtitle { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 15px; border-radius: 0 0 20px 20px; color: #4a4b4a; font-size: 11px; line-height: 1.4; }
.screen[data-view="home"] > .title, .screen[data-view="home"] > .subtitle { border-radius: 0; }
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; padding-top: 5px; padding-bottom: 14px; border-radius: 0 0 20px 20px; }
.week-day { display: grid; min-width: 0; min-height: 42px; align-content: center; justify-items: center; gap: 3px; border: 1px solid #15181f18; border-radius: 11px; color: #55575b; font-size: 9px; text-transform: uppercase; }
.week-day strong { color: var(--ink); font-size: 12px; }
.week-day.today { border-color: var(--ink); background: var(--ink); color: var(--accent); }
.week-day.today strong { color: var(--accent); }
.eyebrow { margin: 0 0 8px; color: #8d6b00; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.section-title { display: flex; align-items: center; gap: 7px; margin: 20px 0 9px; color: #24272d; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.section-title:before { color: var(--accent); content: "◆"; font-size: 9px; }
.title + .section-title { margin-top: 16px; }
.card { margin: 8px 0; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 2px 8px #15181f08; }
.card h2, .card h3 { margin: 0 0 7px; color: var(--ink); }
.card h2 { font-size: 18px; }
.card h3 { font-size: 14px; line-height: 1.35; }
.meta, .muted { color: var(--muted); font-size: 11px; line-height: 1.45; }
.card .meta { margin: 3px 0 6px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stack { display: grid; gap: 8px; }
.stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.stat { min-width: 0; padding: 7px; border-radius: 9px; background: var(--ink); }
.stat strong { display: block; color: #fff; font-size: 18px; }
.stat span { color: #d5d8dd; font-size: 9px; }
.stat.green strong { color: #43d3a0; }
.stat.amber strong { color: var(--accent); }
.stat.red strong { color: #ff8178; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quick { display: grid; min-width: 0; min-height: 84px; align-content: space-between; gap: 6px; padding: 10px; border: 1px solid #eceef1; border-radius: 14px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 2px 8px #15181f08; }
.quick .icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: #fff2bd; color: var(--ink); font-size: 16px; }
.quick:nth-child(2n) .icon { background: #def4e9; }
.quick:nth-child(3n) .icon { background: #e7edff; }
.quick:nth-child(4n) .icon { background: #ffe9e5; }
.quick strong { font-size: 12px; }
.quick small { color: var(--muted); font-size: 10px; }
.date-head { margin: 17px 0 7px; color: #252a33; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.btn { min-height: 39px; padding: 9px 11px; border: 0; border-radius: 9px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; }
.btn:hover { filter: brightness(1.08); }
.btn.secondary { border: 1px solid #d7d9dd; background: #fff; color: var(--ink); }
.btn.soft { border: 1px solid var(--accent); background: var(--accent); color: var(--ink); }
.btn.green { border: 1px solid #dff4e9; background: #dff4e9; color: #187c56; }
.btn.red { border: 1px solid #ffe7e4; background: #ffe7e4; color: #b94338; }
.btn.full { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.actions .btn { flex: 1 1 auto; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 6px; background: #e8ebef; color: #47505c; font-size: 9px; line-height: 1.25; }
.badge.green { background: #dff4e9; color: #187c56; }
.badge.amber { background: #fff1b8; color: #765b00; }
.badge.red { background: #ffe7e4; color: #b94338; }
.list { display: grid; gap: 9px; }
.list-item { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.list-item strong { font-size: 13px; }
.list-item .meta { margin-top: 4px; }
.list-item.row { display: flex; }
.list-item.row > strong { min-width: 0; overflow-wrap: anywhere; }
.list-item.row > .btn { flex: 0 0 auto; }
.card > .list-item + .list-item { margin-top: 9px; }
.empty { margin: 8px 0; padding: 30px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }
.progress { height: 8px; margin: 12px 0 4px; overflow: hidden; border-radius: 999px; background: #e6e8eb; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.field { display: grid; gap: 6px; margin: 11px 0; }
.field label { color: #424953; font-size: 11px; }
.field input, .field textarea, .field select, .attendance-controls select { width: 100%; min-width: 0; min-height: 42px; padding: 10px 11px; border: 1px solid #d7d9dd; border-radius: 10px; outline: 0; background: #fff; color: var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #b28d00; box-shadow: 0 0 0 2px #ffca0033; }
.field textarea { min-height: 86px; resize: vertical; }
.field input[type="datetime-local"] { font-size: 12px; }
.field input[type="number"] { appearance: textfield; }
.field input[type="number"]::-webkit-inner-spin-button { appearance: none; }
.form-card { padding: 16px; }
.form-card .btn.full { min-height: 43px; margin-top: 3px; background: var(--accent); color: var(--ink); font-size: 13px; }
.schedule-filters, .homework-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 12px 0; }
.schedule-filter, .homework-filter { min-height: 38px; padding: 7px 5px; border-radius: 9px; font-size: 11px; }
.schedule-filter.selected { border-color: var(--ink); background: var(--ink); color: #fff; }
.homework-progress { margin: 4px 0 11px; padding: 11px 13px; border-radius: 12px; background: var(--ink); color: #fff; }
.homework-progress .row { color: #fff; font-size: 11px; }
.homework-progress .row span { color: var(--accent); font-weight: 800; }
.homework-track { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #383e48; }
.homework-track span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.lesson-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; column-gap: 10px; }
.lesson-card > *:not(.lesson-time) { grid-column: 2; min-width: 0; }
.lesson-card .lesson-time { display: grid; grid-row: 1 / span 10; grid-column: 1; min-height: 58px; align-content: center; justify-items: center; gap: 4px; padding: 6px 2px; border-radius: 9px; background: var(--ink); color: #fff; text-align: center; }
.lesson-time strong { font-size: 10px; }
.lesson-time span { color: #d2d6dc; font-size: 8px; }
.lesson-card h3 { margin: 0; font-size: 13px; }
.lesson-card > .meta { margin: 1px 0 4px; }
.lesson-card > .actions, .lesson-card > .btn { margin-top: 7px; }
.minute-select { min-height: 39px; padding: 8px; border: 1px solid #d7d9dd; border-radius: 9px; background: #fff; color: var(--ink); }
.home-today-item { display: flex; width: 100%; align-items: center; gap: 9px; padding: 10px; border: 0; border-bottom: 1px solid #ecece8; background: #fff; color: var(--ink); text-align: left; }
.home-today-item:first-of-type { border-radius: 12px 12px 0 0; }
.home-today-item:last-of-type { border-radius: 0 0 12px 12px; }
.home-today-time { flex: 0 0 39px; font-size: 10px; }
.home-today-subject { flex: 1; min-width: 0; font-size: 11px; font-weight: 650; }
.report-stats, .admin-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 10px 0; }
.report-stat, .admin-summary-tile { min-width: 0; padding: 9px 7px; border-radius: 10px; background: var(--ink); color: #fff; }
.report-stat strong, .admin-summary-tile strong { display: block; color: var(--accent); font-size: 17px; }
.report-stat span, .admin-summary-tile span { display: block; color: #d4d7dc; font-size: 9px; }
.attendance-card { display: grid; gap: 10px; min-width: 0; margin: 8px 0; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.attendance-card-top { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 8px; }
.attendance-trigger { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; flex-wrap: wrap; }
.attendance-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.attendance-name { min-width: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.35; }
.attendance-card-top .badge { flex: 0 0 auto; max-width: 50%; white-space: normal; text-align: center; }
.attendance-edit-hint { margin-left: auto; color: var(--muted); font-size: 10px; }
.attendance-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; min-width: 0; }
.attendance-controls[hidden] { display: none; }
.attendance-controls .btn { width: 100%; }
.attendance-heatmap { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin: 12px 0; }
.attendance-day { aspect-ratio: 1; border-radius: 4px; background: #ecece7; }
.attendance-day.present { background: var(--ink); }
.attendance-day.late { background: #ffca00; }
.attendance-day.absent { background: #f6a89e; }
.attendance-day.excused { background: #8bcdb0; }
.attendance-day.unmarked { background: #c7cbd0; }
.profile-identity { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 11px; border: 0; background: var(--ink); color: #fff; }
.profile-identity h3 { margin: 0; color: #fff; font-size: 14px; }
.profile-identity > .meta { grid-column: 2; margin: 1px 0; color: #c2c8d2; }
.profile-identity > .profile-avatar { display: grid; width: 44px; height: 44px; grid-row: 1 / span 2; grid-column: 1; place-items: center; border-radius: 50%; background: var(--accent); color: var(--ink); font-weight: 800; }
.announcement-message { margin: 8px 0 0; color: #39414d; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.toast { position: fixed; z-index: 10; bottom: calc(92px + env(safe-area-inset-bottom)); left: 50%; display: none; max-width: min(90vw, 480px); padding: 11px 15px; transform: translateX(-50%); border: 1px solid #333944; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: 0 8px 28px #0003; }
.toast.visible { display: block; }
.loading, .error-state { padding: 54px 18px; color: var(--muted); line-height: 1.5; text-align: center; }
.error-state h2 { color: var(--ink); }
.nav { position: fixed; z-index: 5; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); left: 12px; display: flex; width: auto; max-width: 496px; margin: 0 auto; padding: 6px 5px; border: 1px solid #282b31; border-radius: 999px; background: #15181f; box-shadow: 0 6px 22px #15181f25; }
.nav button { display: grid; flex: 1; min-width: 0; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; color: #aeb2ba; font-size: 9px; }
.nav button .icon { display: grid; min-width: 32px; height: 26px; place-items: center; padding: 0 7px; border-radius: 999px; font-size: 17px; }
.nav button.active { color: #fff; font-weight: 700; }
.nav button.active .icon { background: var(--accent); color: var(--ink); }
.attendance-card:focus-within, button:focus-visible { outline-color: #b28d00; }
@media (max-width: 390px) {
  .shell { max-width: none; }
  .screen { padding-right: 13px; padding-left: 13px; }
  .screen > .title, .screen > .subtitle, .screen > .week-strip { padding-right: 13px; padding-left: 13px; }
  .title { font-size: 22px; }
  .card { padding: 12px; }
  .stats { gap: 5px; }
  .stat { padding: 6px; }
  .role-pill { padding: 5px 7px; }
  .nav { right: 10px; left: 10px; }
}
@media (min-width: 520px) {
  .attendance-controls { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .attendance-controls .btn { width: auto; }
}