:root {
  --navy: #0b2e63;
  --navy-deep: #08234d;
  --blue: #1763b5;
  --blue-soft: #eaf3ff;
  --teal: #16998e;
  --teal-dark: #087a72;
  --ink: #17233b;
  --muted: #6f7d91;
  --line: #dfe7f2;
  --paper: #ffffff;
  --page: #f3f7fc;
  --peach: #fff0e6;
  --green: #e6f6ef;
  --yellow: #fff8dc;
  --coral: #fff0f0;
  --shadow: 0 18px 50px rgb(24 57 98 / 9%);
  --radius: 22px;
}

* { box-sizing: border-box; }

html { min-width: 320px; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.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;
}

.eyebrow {
  display: inline-block;
  color: var(--blue);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.brand-check {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #e7f8f5;
  color: var(--teal-dark);
  font-size: 1.1rem;
  font-weight: 900;
}

/* Login */
.login-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(420px, .93fr) minmax(520px, 1.07fr);
  background: #fff;
}

.login-hero {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 29%, rgb(64 134 218 / 28%), transparent 28%),
    linear-gradient(145deg, #123e83 0%, #0c2e66 54%, #071f47 100%);
  color: #fff;
  padding: 42px clamp(30px, 5vw, 82px) 30px;
}

.login-hero::after {
  position: absolute;
  right: -18%;
  bottom: -24%;
  width: 72%;
  height: 60%;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  content: "";
  transform: rotate(-18deg);
}

.brand-light, .app-brand {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.brand-light .brand-check { background: rgb(255 255 255 / 14%); color: #fff; }

.hero-copy { position: relative; z-index: 3; max-width: 530px; margin-top: clamp(65px, 11vh, 130px); }
.hero-kicker { display: block; color: #9dc6f5; font-size: .9rem; font-weight: 700; letter-spacing: .04em; }
.hero-copy h1 { margin: 15px 0 18px; font-size: clamp(2.5rem, 4.6vw, 4.25rem); line-height: 1.03; letter-spacing: -.065em; }
.hero-copy h1 em { color: #98ded3; font-style: normal; }
.hero-copy p { max-width: 390px; margin: 0; color: #c8dbf4; font-size: 1rem; }

.hero-stage { position: absolute; right: 0; bottom: 68px; left: 0; height: 46%; min-height: 280px; }
.hero-school { position: absolute; bottom: -4px; left: -4%; width: 48%; max-width: 380px; opacity: .94; }
.blackboard-wrap { position: absolute; right: 7%; bottom: 0; width: min(53%, 460px); }
.blackboard-wrap img { display: block; width: 100%; filter: drop-shadow(0 16px 18px rgb(0 0 0 / 22%)); }
.blackboard-wrap span { position: absolute; top: 23%; left: 27%; color: #f8f1c9; font-family: Georgia, serif; font-size: clamp(1rem, 2vw, 1.7rem); line-height: 1.12; text-align: center; transform: rotate(-2deg); }
.blackboard-wrap strong { color: #f3d96b; font-size: .9em; }
.blackboard-wrap b { display: block; color: #f3a6a6; font-size: 1.45em; }
.hero-spark { position: absolute; color: #a7e3d8; font-size: 2rem; }
.spark-one { top: 12%; right: 8%; }
.spark-two { top: 38%; left: 44%; color: #f5da77; font-size: 1.4rem; }
.hero-footer { position: absolute; z-index: 3; right: clamp(30px, 5vw, 82px); bottom: 32px; left: clamp(30px, 5vw, 82px); display: flex; justify-content: space-between; color: #a8c4e8; font-size: .78rem; font-weight: 700; }
.hero-footer span { display: inline-flex; align-items: center; gap: 7px; }

.login-panel { display: flex; width: min(100%, 690px); flex-direction: column; justify-content: center; padding: clamp(34px, 6vw, 92px) clamp(30px, 8vw, 130px); }
.login-heading { max-width: 530px; }
.login-heading h2 { margin: 8px 0 8px; color: var(--ink); font-size: clamp(1.85rem, 3.2vw, 2.65rem); line-height: 1.08; letter-spacing: -.055em; }
.login-heading p { margin: 0; color: var(--muted); font-size: .97rem; }
.role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 30px 0 16px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: #f5f8fc; }
.role-tab { border: 0; border-radius: 10px; background: transparent; color: #708098; padding: 12px 10px; font-size: .9rem; font-weight: 750; }
.role-tab.active { background: #fff; box-shadow: 0 5px 16px rgb(25 67 117 / 9%); color: var(--navy); }
.selected-role-card { display: flex; align-items: center; gap: 17px; min-height: 112px; border: 1px solid #dbe8f8; border-radius: 18px; background: linear-gradient(135deg, #f0f7ff, #fff); padding: 12px 17px 12px 12px; }
.role-art { display: grid; width: 90px; height: 88px; flex: 0 0 auto; place-items: end center; overflow: hidden; border-radius: 14px; background: #dfeefe; }
.role-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.role-card-copy { min-width: 0; }
.role-label { color: var(--teal-dark); font-size: .73rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.role-card-copy h3 { margin: 2px 0 2px; color: var(--ink); font-size: 1.13rem; }
.role-card-copy p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.35; }
.role-arrow { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; margin-left: auto; border-radius: 50%; background: #e7f6f5; color: var(--teal-dark); }
.login-form { display: grid; gap: 15px; margin-top: 23px; }
.form-field { display: grid; gap: 7px; color: #45556e; font-size: .78rem; font-weight: 750; }
.input-with-icon { display: flex; align-items: center; gap: 10px; min-height: 51px; border: 1px solid #d9e2ee; border-radius: 13px; background: #fff; color: #9caabd; padding: 0 14px; transition: border-color .2s, box-shadow .2s; }
.input-with-icon:focus-within { border-color: #8bb9e9; box-shadow: 0 0 0 4px rgb(43 116 190 / 10%); }
.input-with-icon input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .92rem; }
.input-with-icon input::placeholder { color: #a6b1c0; }
.input-action { display: inline-grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #8c9aab; padding: 0; }
.input-action:hover { background: #eef4fb; color: var(--blue); }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border: 0; border-radius: 13px; background: linear-gradient(135deg, var(--teal), #0f847b); box-shadow: 0 9px 18px rgb(17 137 126 / 18%); color: #fff; padding: 0 20px; font-size: .93rem; font-weight: 800; transition: transform .2s, box-shadow .2s, opacity .2s; }
.primary-button:hover:not(:disabled) { box-shadow: 0 12px 24px rgb(17 137 126 / 28%); transform: translateY(-1px); }
.primary-button:disabled { cursor: not-allowed; opacity: .58; }
.primary-button.compact { min-height: 45px; padding: 0 17px; font-size: .84rem; }
.form-error { margin: 0; color: #c24e4e; font-size: .82rem; font-weight: 650; }
.forgot-password-link { align-self: flex-end; margin-top: 13px; color: var(--blue); font-size: .8rem; font-weight: 800; }
.forgot-password-link:hover { color: var(--teal-dark); text-decoration: underline; }
.login-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 31px; border-top: 1px solid #edf1f5; color: #8290a2; padding-top: 18px; font-size: .78rem; line-height: 1.45; }
.login-note strong { color: var(--teal-dark); }
.note-star { color: #f2ca5d; font-size: 1.2rem; }
.note-heart { color: #e9969d; font-size: 1.3rem; }

/* Authenticated application surfaces */
.app-shell { min-height: 100vh; background: var(--page); }
.app-topbar { display: flex; min-height: 72px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e4ebf3; background: rgb(255 255 255 / 93%); padding: 0 clamp(18px, 5vw, 80px); }
.app-brand { color: var(--navy); }
.app-nav { display: flex; align-items: center; gap: clamp(13px, 2.5vw, 30px); color: #738299; font-size: .82rem; font-weight: 720; }
.app-nav a { padding: 8px 0; }
.app-nav a:hover, .app-nav a.active { color: var(--blue); }
.app-nav a.active { border-bottom: 2px solid var(--teal); }
.app-nav button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 50%; background: #eef4fb; color: var(--blue); }
.app-content { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 38px 0 50px; }
.narrow-content { width: min(1180px, calc(100% - 40px)); }
.profile-banner { position: relative; display: flex; min-height: 240px; align-items: center; overflow: hidden; border: 1px solid #d9e8f7; border-radius: var(--radius); background: linear-gradient(110deg, #e9f3ff 0%, #f5fbff 54%, #eff9f5 100%); padding: 34px 42px; }
.profile-copy { position: relative; z-index: 1; }
.profile-copy h1 { margin: 6px 0 3px; color: var(--navy); font-size: clamp(1.8rem, 4vw, 2.75rem); letter-spacing: -.06em; }
.profile-copy p { margin: 0; color: #6c7f99; }
.separator { margin: 0 7px; color: #a2b3c8; }
.profile-message { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; border-radius: 999px; background: rgb(255 255 255 / 72%); color: var(--teal-dark); padding: 9px 13px; font-size: .8rem; font-weight: 750; }
.profile-banner > img { position: absolute; right: 15px; bottom: -35px; width: min(43%, 430px); max-height: 270px; object-fit: contain; object-position: right bottom; }
.content-heading, .section-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.content-heading { margin: 42px 2px 10px; }
.content-heading h2, .section-row h2 { margin: 5px 0 3px; color: var(--ink); font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.12; letter-spacing: -.045em; }
.content-heading p, .section-row p { margin: 0; color: var(--muted); font-size: .87rem; }
.heading-actions { display: flex; align-items: center; gap: 12px; }
.view-switch { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line); border-radius: 12px; background: #f6f9fc; padding: 4px; }
.view-choice { display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; color: #8090a4; padding: 7px 9px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.view-choice:hover { color: var(--blue); }
.view-choice.active { background: #fff; box-shadow: 0 3px 10px rgb(25 67 117 / 9%); color: var(--navy); }
.completion-badge { border-radius: 999px; background: #e7f7f2; color: var(--teal-dark); padding: 9px 13px; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.date-control, .month-control { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--blue); padding: 8px 10px; }
.date-control input, .month-control input { border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .82rem; }
.editable-hint { display: flex; align-items: center; gap: 8px; margin: 0 2px 17px; color: #7c8da4; font-size: .78rem; }
.hint-dot { width: 7px; height: 7px; border-radius: 50%; background: #5dc1a6; box-shadow: 0 0 0 4px rgb(93 193 166 / 14%); }
.task-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.task-card { position: relative; display: flex; min-height: 190px; flex-direction: column; align-items: flex-start; overflow: hidden; border: 1px solid transparent; border-radius: 18px; padding: 18px; text-align: left; transition: transform .2s, box-shadow .2s, border-color .2s; }
.task-card:hover:not(:disabled) { border-color: rgb(28 91 152 / 14%); box-shadow: 0 14px 30px rgb(34 70 110 / 10%); transform: translateY(-2px); }
.task-card:disabled { cursor: default; opacity: .82; }
.task-peach { background: var(--peach); }
.task-blue { background: var(--blue-soft); }
.task-green { background: var(--green); }
.task-coral { background: var(--coral); }
.task-icon { position: relative; z-index: 1; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: rgb(255 255 255 / 72%); color: var(--navy); }
.task-card > img { position: absolute; right: -3px; bottom: 43px; width: 104px; height: 91px; object-fit: contain; }
.task-text { position: relative; z-index: 1; display: grid; gap: 3px; margin-top: auto; max-width: 76%; }
.task-text strong { color: var(--ink); font-size: .98rem; }
.task-text small { color: #78889b; font-size: .72rem; line-height: 1.35; }
.check-circle { position: absolute; right: 16px; bottom: 17px; display: grid; width: 25px; height: 25px; place-items: center; border: 2px solid #c8d4df; border-radius: 50%; background: rgb(255 255 255 / 68%); color: #fff; }
.task-card.checked .check-circle { border-color: var(--teal); background: var(--teal); }
.task-card.checked { box-shadow: inset 0 0 0 2px rgb(22 153 142 / 16%); }
.tracking-list { display: grid; gap: 10px; }
.task-list-item { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 69px; border: 1px solid transparent; border-radius: 15px; padding: 11px 15px 11px 12px; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; }
.task-list-item:hover { border-color: rgb(28 91 152 / 14%); box-shadow: 0 8px 22px rgb(34 70 110 / 8%); transform: translateY(-1px); }
.task-list-item input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.list-task-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: rgb(255 255 255 / 76%); color: var(--navy); font-size: 1.05rem; font-weight: 800; }
.list-task-copy { display: grid; gap: 1px; min-width: 0; }
.list-task-copy strong { color: var(--ink); font-size: .91rem; }
.list-task-copy small { overflow: hidden; color: #78889b; font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.list-task-state { display: inline-flex; align-items: center; gap: 9px; color: #8a98a8; font-size: .72rem; font-weight: 800; }
.list-check { display: grid; width: 27px; height: 27px; place-items: center; border: 2px solid #c8d4df; border-radius: 50%; background: rgb(255 255 255 / 68%); color: transparent; font-size: .74rem; }
.task-list-item.checked { box-shadow: inset 0 0 0 2px rgb(22 153 142 / 16%); }
.task-list-item.checked .list-check { border-color: var(--teal); background: var(--teal); color: #fff; }
.task-list-item.checked .list-state-text { color: var(--teal-dark); }
.task-list-item:has(input:disabled) { cursor: default; opacity: .82; }
.task-list-item:has(input:disabled):hover { transform: none; box-shadow: none; }
.note-card { position: relative; display: grid; gap: 14px; margin-top: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 20px 22px; box-shadow: 0 8px 28px rgb(33 73 114 / 4%); }
.note-card > div:first-child { display: flex; align-items: flex-start; gap: 11px; }
.note-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: #fff7d9; color: #bc8d1c; }
.note-card h3 { margin: 0; font-size: .98rem; }
.note-card p { margin: 2px 0 0; color: var(--muted); font-size: .76rem; }
.note-card textarea { width: 100%; min-height: 62px; resize: vertical; border: 1px solid #e2e9f2; border-radius: 11px; outline: 0; color: var(--ink); padding: 11px 13px; font-size: .84rem; }
.note-card textarea:focus { border-color: #8bb9e9; box-shadow: 0 0 0 4px rgb(43 116 190 / 9%); }
.note-card textarea:disabled { background: #f5f7fa; color: #8390a0; }
.character-count { position: absolute; right: 33px; bottom: 27px; color: #9ba8b8; font-size: .68rem; }
.save-bar { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 18px; }
.save-message { color: var(--teal-dark); font-size: .8rem; font-weight: 700; }
.week-card, .month-card, .teacher-table-card { margin-top: 27px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 25px; box-shadow: 0 8px 28px rgb(33 73 114 / 4%); }
.week-card .section-row { align-items: center; }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-size: .8rem; font-weight: 800; }
.text-link:hover { color: var(--teal-dark); }
.week-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 22px; }
.week-day { position: relative; display: grid; min-height: 82px; place-items: center; border: 1px solid #e5ebf3; border-radius: 13px; background: #fbfcfe; color: #7c8ca2; padding: 9px 4px; }
.week-day span { font-size: .68rem; text-transform: uppercase; }
.week-day strong { color: var(--ink); font-size: 1.15rem; }
.week-day i { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: #edf1f5; color: #fff; font-size: .68rem; font-style: normal; }
.week-day.selected { border-color: #70b8b0; box-shadow: 0 0 0 3px rgb(22 153 142 / 10%); }
.week-day.selected span { color: var(--teal-dark); font-weight: 800; }
.week-day.done i { background: var(--teal); }
.app-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 26px; color: #8492a4; font-size: .77rem; }
.app-footer a { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); font-weight: 750; }
.app-footer a svg { transform: rotate(180deg); }
.loading-screen { display: grid; min-height: 100vh; place-items: center; background: var(--page); color: var(--navy); font-weight: 750; }
.loading-dot { width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 6px rgb(22 153 142 / 12%); }

/* Monthly page */
.back-link { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-size: .82rem; font-weight: 800; }
.back-link:hover { color: var(--teal-dark); }
.subpage-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin: 31px 0 20px; }
.subpage-heading h1, .teacher-hero h1 { margin: 5px 0 6px; color: var(--navy); font-size: clamp(1.85rem, 4vw, 2.75rem); line-height: 1.05; letter-spacing: -.065em; }
.subpage-heading p, .teacher-hero p { margin: 0; color: var(--muted); font-size: .9rem; }
.month-control { flex-direction: column; align-items: flex-start; min-width: 150px; color: #71839b; font-size: .72rem; font-weight: 800; }
.month-control input { width: 100%; font-weight: 750; }
.range-callout { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; border: 1px solid #cfece3; border-radius: 14px; background: #f2fcf8; color: var(--teal-dark); padding: 13px 15px; }
.callout-icon { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #d7f2e8; }
.range-callout div { display: grid; gap: 1px; }
.range-callout strong { font-size: .8rem; }
.range-callout span { color: #5e8f84; font-size: .76rem; }
.month-card { margin-top: 0; padding: 0; overflow: hidden; }
.month-card-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #edf1f5; padding: 23px 25px; }
.month-card-header h2 { margin: 4px 0 0; font-size: 1.3rem; letter-spacing: -.04em; }
.legend { display: flex; align-items: center; gap: 7px; color: #8492a4; font-size: .72rem; white-space: nowrap; }
.legend i { width: 9px; height: 9px; border-radius: 50%; }
.legend-edit { background: #69baa9; }
.legend-read { background: #d6dde6; margin-left: 7px; }
.month-table-wrap, .teacher-table-wrap { overflow-x: auto; }
.month-table, .teacher-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.month-table th, .month-table td, .teacher-table th, .teacher-table td { border-bottom: 1px solid #edf1f5; padding: 12px 13px; text-align: left; }
.month-table th, .teacher-table th { background: #fbfcfe; color: #8290a2; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.month-table td { color: #5e6c7e; font-size: .78rem; }
.month-table td:first-child { width: 185px; color: var(--ink); }
.month-table td:first-child strong, .month-table td:first-child small { display: block; }
.month-table td:first-child small { margin-top: 2px; color: var(--teal-dark); font-size: .68rem; font-weight: 800; }
.row-future { opacity: .52; }
.mini-check { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #d4dce6; border-radius: 8px; background: #fff; color: #fff; padding: 0; }
.mini-check:disabled { cursor: default; background: #f7f9fb; }
.mini-check.checked { border-color: var(--teal); background: var(--teal); }
.table-note { width: 145px; border: 1px solid #e6ebf1; border-radius: 7px; outline: 0; background: transparent; padding: 6px 8px; color: var(--ink); font-size: .74rem; }
.table-note:focus { border-color: #94c9c1; }
.table-note:disabled { background: #f8fafc; color: #9ba7b5; }
.table-save { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 8px; background: #e7f7f2; color: var(--teal-dark); padding: 0; }
.table-save:hover:not(:disabled) { background: #ccefe3; }
.table-save:disabled { opacity: .5; }
.read-only-label { color: #a0abb8; font-size: .68rem; white-space: nowrap; }
.month-footnote { color: #8997a7; padding: 15px 25px; font-size: .72rem; }
.month-footnote span { color: var(--teal); font-weight: 900; }
.month-message { min-height: 26px; margin: 12px 2px 0; }

/* Teacher page */
.teacher-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 22px; }
.teacher-date { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--blue); padding: 10px 12px; }
.teacher-date label { display: grid; gap: 1px; }
.teacher-date label span { color: #8492a4; font-size: .67rem; font-weight: 800; text-transform: uppercase; }
.teacher-date input { border: 0; outline: 0; color: var(--ink); font-size: .82rem; }
.teacher-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.teacher-stats article { display: grid; min-height: 106px; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 17px; background: #fff; padding: 16px 18px; }
.teacher-stats article svg { grid-row: span 2; color: var(--teal); }
.teacher-stats article strong { color: var(--navy); font-size: 1.27rem; line-height: 1.1; }
.teacher-stats article span { color: #8190a1; font-size: .74rem; }
.teacher-stats .stat-percent { color: var(--teal-dark); font-size: 1.2rem; font-weight: 900; }
.teacher-table-card { margin-top: 18px; }
.teacher-readonly { border-radius: 999px; background: #f1f5f9; color: #8290a2; padding: 7px 11px; font-size: .7rem; font-weight: 750; }
.teacher-table { min-width: 790px; margin-top: 20px; }
.teacher-table td { color: #657386; font-size: .8rem; }
.teacher-table td:first-child strong, .teacher-table td:first-child small { display: block; }
.teacher-table td:first-child strong { color: var(--ink); }
.teacher-table td:first-child small { margin-top: 3px; color: #94a1b0; font-size: .68rem; }
.status-check { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; background: #f0f3f6; color: #b3bdc8; font-size: .78rem; }
.status-check.done { background: #e1f5ec; color: var(--teal-dark); }
.teacher-note { max-width: 260px; color: #718096 !important; }
.empty-state { display: grid; place-items: center; margin: 38px auto 24px; color: #9aa7b5; text-align: center; }
.empty-state svg { color: #9ecfc3; }
.empty-state h3 { margin: 11px 0 3px; color: var(--ink); font-size: 1rem; }
.empty-state p { max-width: 360px; margin: 0; font-size: .8rem; }

@media (max-width: 980px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-hero { min-height: 440px; padding-bottom: 28px; }
  .hero-copy { margin-top: 54px; }
  .hero-copy h1 { font-size: clamp(2.3rem, 8vw, 3.5rem); }
  .hero-stage { right: 3%; height: 50%; min-height: 210px; }
  .hero-school { width: 30%; }
  .blackboard-wrap { right: 9%; width: min(43%, 350px); }
  .login-panel { width: min(100%, 680px); margin: 0 auto; padding: 55px 32px 50px; }
  .task-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 650px) {
  .login-hero { min-height: 430px; padding: 25px 22px; }
  .hero-copy { margin-top: 50px; }
  .hero-copy h1 { font-size: 2.5rem; }
  .hero-copy p { max-width: 300px; font-size: .9rem; }
  .hero-stage { bottom: 47px; height: 42%; }
  .hero-school { left: -6%; width: 39%; }
  .blackboard-wrap { right: 2%; width: 54%; }
  .blackboard-wrap span { top: 22%; left: 25%; font-size: 1rem; }
  .hero-footer { right: 22px; bottom: 19px; left: 22px; }
  .login-panel { padding: 37px 22px 35px; }
  .login-heading h2 { font-size: 1.85rem; }
  .selected-role-card { min-height: 103px; }
  .role-art { width: 76px; height: 78px; }
  .role-card-copy p { font-size: .75rem; }
  .app-topbar { min-height: 64px; padding: 0 16px; }
  .app-brand { font-size: .88rem; }
  .app-brand .brand-check { width: 28px; height: 28px; }
  .app-nav { gap: 12px; font-size: .74rem; }
  .app-nav a:nth-child(2) { display: none; }
  .app-content, .narrow-content { width: min(100% - 28px, 1120px); padding-top: 24px; }
  .profile-banner { min-height: 285px; align-items: flex-start; padding: 26px 23px; }
  .profile-banner > img { right: -4px; bottom: -19px; width: 72%; max-height: 180px; }
  .profile-copy h1 { font-size: 1.85rem; }
  .content-heading, .subpage-heading, .teacher-hero { align-items: flex-start; flex-direction: column; margin-top: 31px; }
  .heading-actions { width: 100%; flex-wrap: wrap; justify-content: space-between; }
  .date-control { margin-left: auto; }
  .task-grid { gap: 10px; }
  .task-card { min-height: 176px; padding: 14px; }
  .task-card > img { width: 90px; height: 80px; }
  .task-text strong { font-size: .86rem; }
  .task-text small { font-size: .68rem; }
  .note-card { padding: 16px; }
  .character-count { right: 25px; bottom: 23px; }
  .save-bar { align-items: stretch; flex-direction: column; padding: 8px 0; }
  .save-bar .primary-button { width: 100%; }
  .week-card, .month-card, .teacher-table-card { padding: 17px; }
  .week-card .section-row { align-items: flex-start; flex-direction: column; gap: 12px; }
  .week-strip { gap: 5px; }
  .week-day { min-height: 72px; }
  .week-day strong { font-size: 1rem; }
  .app-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
  .subpage-heading { gap: 16px; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-grid-wide { grid-column: auto; }
  .profile-card { padding: 18px; }
  .profile-actions { align-items: stretch; flex-direction: column; }
  .profile-actions .primary-button { width: 100%; }
  .profile-lock { white-space: normal; }
  .month-control { width: 100%; }
  .month-control input { width: auto; }
  .month-card-header { align-items: flex-start; flex-direction: column; padding: 18px; }
  .legend { flex-wrap: wrap; white-space: normal; }
  .month-footnote { padding: 13px 18px; }
  .teacher-stats { gap: 8px; }
  .teacher-stats-four { grid-template-columns: repeat(2, 1fr); }
  .teacher-stats article { min-height: 92px; padding: 12px 10px; }
  .teacher-stats article strong { font-size: 1rem; }
  .teacher-stats article span { font-size: .65rem; }
  .teacher-date { width: 100%; }
  .teacher-date label { flex: 1; }
  .task-list-item { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding-right: 10px; }
  .list-task-icon { width: 35px; height: 35px; }
  .list-task-copy strong { font-size: .84rem; }
  .list-task-copy small { font-size: .68rem; }
  .list-task-state { gap: 5px; font-size: .66rem; }
  .list-check { width: 24px; height: 24px; }
  .teacher-list-toolbar { align-items: flex-start; flex-direction: column; padding: 12px 16px; }
  .pagination-bar { justify-content: space-between; gap: 8px; padding: 14px 8px; }
  .pagination-current { font-size: .7rem; }
  .student-info-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .detail-summary { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .detail-item-grid { grid-template-columns: 1fr; }
  .week-picker-actions { align-items: center; justify-content: space-between; width: 100%; flex-wrap: wrap; gap: 10px; }
  .week-picker-actions .text-link { margin-bottom: 0; }
  .week-navigation { align-items: stretch; flex-direction: column; text-align: center; }
  .weekly-day-card .section-row { padding: 16px; }
  .weekly-parent-card .month-card-header { padding: 18px; }
}

@media (max-width: 410px) {
  .task-grid { grid-template-columns: 1fr; }
  .task-card { min-height: 142px; }
  .task-card > img { width: 108px; height: 95px; }
  .role-art { width: 65px; height: 70px; }
  .role-arrow { display: none; }
  .teacher-stats article svg { display: none; }
}

/* ASP/MSSQL çizelge görünümü */
.tracking-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.tracking-grid .task-card { min-height: 175px; }
.task-card input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.task-emoji { position: absolute; right: 18px; bottom: 49px; font-size: 2.7rem; filter: drop-shadow(0 5px 5px rgb(30 60 90 / 9%)); }
.task-yellow { background: var(--yellow); }
.task-mint { background: #e8f7f3; }
.task-card .check-circle { font-size: .82rem; font-weight: 900; }
.reading-note-row { display: flex; justify-content: flex-end; margin-top: 13px; }
.small-field { display: grid; gap: 5px; color: #65758a; font-size: .75rem; font-weight: 800; }
.small-field input { width: 180px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: #fff; color: var(--ink); padding: 9px 11px; font-size: .84rem; }
.small-field input:focus { border-color: #8bb9e9; box-shadow: 0 0 0 4px rgb(43 116 190 / 9%); }
.small-field input:disabled { background: #f5f7fa; color: #8b98a8; }
.notice-error, .success-message { margin: 10px 0 14px; border-radius: 12px; padding: 11px 14px; font-size: .82rem; font-weight: 700; }
.notice-error { background: #fff0f0; }
.success-message { border: 1px solid #cdece1; background: #effbf6; color: var(--teal-dark); }
.paper-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin: 31px 0 22px; }
.paper-heading h1 { margin: 5px 0 0; color: var(--navy); font-size: clamp(1.65rem, 3.5vw, 2.45rem); line-height: 1.05; letter-spacing: -.06em; }
.paper-heading h2 { margin: 5px 0 7px; color: #a76c65; font-size: clamp(1rem, 2vw, 1.3rem); letter-spacing: .01em; text-transform: uppercase; }
.paper-heading p { margin: 0; color: var(--muted); font-size: .84rem; }
.paper-heading p strong { color: var(--ink); }
.paper-instruction { max-width: 780px; margin-top: 12px !important; color: #78879b !important; font-style: italic; }
.paper-card { border-color: #cfdae8; box-shadow: 0 12px 33px rgb(33 73 114 / 7%); }
.paper-card .month-card-header { background: linear-gradient(90deg, #f8fbff, #fff); }
.monthly-grid { min-width: 980px; }
.monthly-grid th { background: #496fa9; color: #fff; text-align: center; vertical-align: middle; font-size: .68rem; line-height: 1.25; letter-spacing: .02em; text-transform: none; }
.monthly-grid th small { color: #e3edfb; font-size: .62rem; font-weight: 600; text-transform: none; }
.monthly-grid td { min-width: 78px; height: 51px; padding: 8px 7px; text-align: center; vertical-align: middle; }
.monthly-grid .date-cell { width: 92px; min-width: 92px; text-align: left; }
.date-cell strong, .date-cell small { display: block; }
.date-cell strong { color: var(--navy); font-size: 1.06rem; }
.date-cell small { color: #8090a4; font-size: .67rem; font-weight: 750; text-transform: uppercase; }
.monthly-mark { display: inline-grid; width: 29px; height: 29px; place-items: center; border: 1px solid #dfe6ee; border-radius: 50%; background: #fbfcfe; color: #a6b1bd; font-size: 1rem; font-weight: 900; }
.monthly-mark.mark-done { border-color: #8ed3bd; background: #e2f7ee; color: #15906f; }
.monthly-mark.mark-missing { border-color: #f2b6b6; background: #fff0f0; color: #c75d62; }
.page-value { display: block; margin-top: 2px; color: var(--blue); font-size: .63rem; font-weight: 800; }
.note-cell { min-width: 150px !important; color: #718096 !important; font-size: .7rem !important; }
.note-cell span { display: block; }
.note-cell .edit-day { display: inline-block; margin-top: 4px; color: var(--blue); font-size: .66rem; font-weight: 800; }
.muted-dash { color: #acb7c3; }
.row-today td { background: #f3fbf8; }
.legend-success { background: #62b99f; }
.legend-missing { background: #dc8d91; margin-left: 7px; }
.legend-edit { background: #4d72aa; margin-left: 7px; }
.teacher-hero.paper-heading { margin-top: 31px; }
.teacher-stats article .stat-symbol { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: #e7f7f2; color: var(--teal-dark); font-size: 1.1rem; font-weight: 900; }
.monthly-summary td { text-align: center; }
.monthly-summary td:first-child { min-width: 205px; text-align: left; }
.monthly-summary td:first-child strong, .monthly-summary td:first-child small { display: block; }
.monthly-summary td:first-child small { margin-top: 3px; color: #91a0b0; font-size: .68rem; }
.count-pill { display: inline-grid; min-width: 31px; height: 27px; place-items: center; border-radius: 8px; background: #eef4fb; color: var(--blue); font-size: .77rem; font-weight: 800; }
.total-pill { color: var(--teal-dark); font-size: .78rem; }
.daily-view-card { margin-top: 18px; }
.daily-view-card .section-row { align-items: center; }
.teacher-date { margin: 0; }
.teacher-stats-four { grid-template-columns: repeat(4, 1fr); }
.teacher-period-note { display: flex; align-items: center; gap: 9px; margin: 0 0 17px; border: 1px solid #cfece3; border-radius: 12px; background: #f2fcf8; color: #5e8f84; padding: 11px 14px; font-size: .77rem; }
.teacher-period-note strong { color: var(--teal-dark); }
.hint-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--teal); }
.teacher-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid #edf1f5; border-bottom: 1px solid #edf1f5; padding: 12px 22px; }
.list-range { color: #8290a2; font-size: .74rem; }
.list-range strong { color: var(--navy); }
.page-select-form { display: flex; align-items: center; gap: 8px; color: #8290a2; font-size: .72rem; font-weight: 800; }
.page-select-form select { min-height: 32px; border: 1px solid #d9e2ee; border-radius: 8px; outline: 0; background: #fff; color: var(--ink); padding: 0 8px; font-size: .76rem; }
.readable-summary { min-width: 960px; }
.readable-summary th, .readable-summary td { padding: 13px 12px; }
.student-detail-link { display: grid; gap: 3px; color: inherit; text-decoration: none; }
.student-detail-link strong { transition: color .15s ease; }
.student-detail-link small { margin-top: 0 !important; }
.student-detail-link em { color: var(--blue); font-size: .66rem; font-style: normal; font-weight: 800; }
.student-detail-link:hover strong { color: var(--blue); }
.compact-student-link em { display: none; }
.count-stack { display: inline-flex; align-items: baseline; gap: 4px; }
.count-stack small { color: #91a0b0; font-size: .66rem; }
.percent-mini { display: block; margin-top: 3px; color: var(--teal-dark); font-size: .68rem; font-weight: 800; }
.table-empty { color: #8997a7 !important; padding: 30px !important; text-align: center !important; }
.pagination-bar { display: flex; align-items: center; justify-content: center; gap: 18px; border-top: 1px solid #edf1f5; padding: 16px 22px; }
.pagination-link { color: var(--blue); font-size: .75rem; font-weight: 800; text-decoration: none; }
.pagination-link:hover { color: var(--navy); }
.pagination-link.disabled { opacity: .4; pointer-events: none; }
.pagination-current { color: #8290a2; font-size: .78rem; }
.pagination-current strong { color: var(--navy); }

/* Student detail */
.student-detail-heading { align-items: flex-end; }
.student-info-card { margin-top: 2px; border: 1px solid #dce7f1; border-radius: 16px; background: linear-gradient(110deg, #f5faff, #f4fcf9); padding: 18px 20px; }
.student-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.student-info-item { display: grid; gap: 4px; }
.student-info-item span { color: #8290a2; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.student-info-item strong { color: var(--navy); font-size: .87rem; }
.detail-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 17px; }
.detail-summary-card { display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 15px; background: #fff; padding: 16px; }
.detail-summary-card span { color: #8290a2; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.detail-summary-card strong { color: var(--navy); font-size: 1.35rem; line-height: 1; }
.detail-summary-card small { color: #9aa7b5; font-size: .68rem; }
.detail-summary-card.highlight { border-color: #cbe9df; background: #f2fcf8; }
.detail-summary-card.highlight strong { color: var(--teal-dark); }
.detail-item-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 17px; }
.detail-item-card { display: grid; gap: 9px; border: 1px solid var(--line); border-radius: 13px; background: #fff; padding: 14px; }
.detail-item-card > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.detail-item-card span { color: #657386; font-size: .76rem; font-weight: 750; }
.detail-item-card strong { color: var(--navy); font-size: .8rem; }
.detail-item-card > small { color: var(--teal-dark); font-size: .7rem; font-weight: 900; text-align: right; }
.detail-item-bar { height: 7px; overflow: hidden; border-radius: 99px; background: #edf2f6; }
.detail-item-bar i { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: var(--teal); }
.detail-days-card { margin-top: 18px; }
.student-detail-table { min-width: 930px; }
.detail-mark { display: inline-grid; width: 27px; height: 27px; place-items: center; border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfcfe; color: #a3afbc; font-size: .85rem; font-weight: 900; }
.detail-future { opacity: .45; }
.detail-not-found { min-height: 300px; }

/* Weekly teacher and parent view */
.weekly-teacher-heading, .weekly-parent-heading { align-items: flex-end; }
.week-picker-actions { display: flex; align-items: flex-end; gap: 18px; }
.week-picker-actions .month-control { min-width: 174px; }
.week-picker-actions .text-link { margin-bottom: 10px; white-space: nowrap; }
.week-navigation { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; border: 1px solid #dce7f1; border-radius: 13px; background: #f8fbfe; padding: 12px 16px; color: var(--navy); font-size: .78rem; }
.week-navigation strong { color: var(--navy); font-size: .82rem; text-align: center; }
.weekly-teacher-form { display: grid; gap: 18px; }
.weekly-day-card { margin-top: 0; overflow: hidden; padding: 0; }
.weekly-day-card .section-row { margin: 0; border-bottom: 1px solid #edf1f5; padding: 18px 22px 15px; }
.weekly-day-card .teacher-table { min-width: 730px; margin-top: 0; }
.weekly-check-table th, .weekly-check-table td { text-align: center; vertical-align: middle; }
.weekly-check-table td:first-child { min-width: 235px; text-align: left; }
.weekly-check-table td:first-child strong, .weekly-check-table td:first-child small { display: block; }
.weekly-check-table td:first-child small { margin-top: 3px; color: #91a0b0; font-size: .68rem; }
.weekly-check { display: inline-grid; place-items: center; cursor: pointer; }
.weekly-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.weekly-check span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #d4dce6; border-radius: 9px; background: #fff; color: transparent; font-size: .9rem; font-weight: 900; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.weekly-check input:focus-visible + span { outline: 3px solid rgb(43 116 190 / 20%); outline-offset: 2px; }
.weekly-check input:checked + span { border-color: #8ed3bd; background: #e2f7ee; color: var(--teal-dark); }
.weekly-save-bar { margin-top: 0; }
.weekly-parent-card { margin-top: 0; overflow: hidden; padding: 0; }
.weekly-parent-table { min-width: 720px; margin-top: 0; }
.weekly-parent-table thead th:not(:first-child) { text-align: center; }
.weekly-parent-table thead th small { display: block; margin-top: 3px; color: #e3edfb; font-size: .64rem; font-weight: 600; text-transform: none; }
.weekly-parent-table tbody th { width: 210px; color: var(--ink); font-size: .82rem; }
.weekly-parent-table tbody td { min-width: 90px; text-align: center; }
.weekly-mark { display: inline-grid; width: 31px; height: 31px; place-items: center; border: 1px solid #dfe6ee; border-radius: 9px; background: #fbfcfe; color: #a6b1bd; font-size: 1rem; font-weight: 900; }
.weekly-readonly-note { margin-top: 0; }

.setup-shell { min-height: 100vh; background: linear-gradient(135deg, #edf5ff, #f9fcfb); padding: 38px 20px 60px; }
.setup-wrap { width: min(1040px, 100%); margin: 0 auto; }
.setup-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); font-weight: 850; }
.setup-card { margin-top: 24px; border: 1px solid #d9e5f1; border-radius: 22px; background: #fff; padding: clamp(22px, 4vw, 42px); box-shadow: var(--shadow); }
.setup-card h1 { margin: 5px 0 8px; color: var(--navy); font-size: clamp(1.7rem, 3.5vw, 2.5rem); letter-spacing: -.055em; }
.setup-lead { max-width: 760px; margin: 0; color: var(--muted); font-size: .87rem; }
.setup-key-form { display: grid; max-width: 450px; gap: 15px; margin-top: 28px; }
.setup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 25px; }
.setup-form { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fbfdff; padding: 19px; }
.setup-form h2 { margin: 0 0 4px; color: var(--navy); font-size: 1.1rem; }
.setup-form .form-field { gap: 5px; }
.setup-form .form-field small { color: #98a5b4; font-size: .68rem; font-weight: 500; }
.setup-form input, .setup-key-form input { min-height: 43px; border: 1px solid #d9e2ee; border-radius: 10px; outline: 0; background: #fff; color: var(--ink); padding: 0 11px; font-size: .86rem; }
.setup-form input:focus, .setup-key-form input:focus { border-color: #8bb9e9; box-shadow: 0 0 0 4px rgb(43 116 190 / 9%); }
.setup-message { margin-top: 20px; }
.setup-warning { margin: 22px 0 18px; border: 1px solid #f1dfa0; border-radius: 12px; background: #fff9df; color: #876d28; padding: 12px 14px; font-size: .77rem; }

/* Password recovery */
.simple-auth-shell { display: grid; min-height: 100vh; place-items: center; background: linear-gradient(135deg, #eef6ff, #f9fcfb); padding: 30px 16px; }
.simple-auth-card { width: min(520px, 100%); border: 1px solid #d8e5f2; border-radius: 24px; background: #fff; padding: clamp(24px, 5vw, 42px); box-shadow: var(--shadow); }
.simple-auth-card .back-link { margin-bottom: 25px; }
.simple-auth-art { display: grid; width: 88px; height: 88px; place-items: end center; overflow: hidden; margin-bottom: 22px; border-radius: 22px; background: #e7f2ff; }
.simple-auth-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.simple-auth-card h1 { margin: 6px 0 8px; color: var(--navy); font-size: clamp(1.85rem, 4vw, 2.55rem); letter-spacing: -.06em; }
.simple-auth-lead { margin: 0; color: var(--muted); font-size: .88rem; }
.simple-auth-form { display: grid; gap: 16px; margin-top: 25px; }
.simple-auth-note { margin: 22px 0 0; border-top: 1px solid #edf1f5; color: #8290a2; padding-top: 16px; font-size: .74rem; line-height: 1.45; }

/* Veli profile */
.profile-heading { align-items: center; }
.profile-lock { border-radius: 999px; background: #eef8f5; color: var(--teal-dark); padding: 9px 13px; font-size: .74rem; font-weight: 800; white-space: nowrap; }
.profile-layout { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 18px; align-items: start; }
.profile-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 25px; box-shadow: 0 8px 28px rgb(33 73 114 / 4%); }
.profile-summary-card { background: linear-gradient(145deg, #edf7ff, #f5fcfa); }
.profile-avatar { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 20px; border-radius: 15px; background: #d9efff; color: var(--blue); font-size: 1.3rem; font-weight: 900; }
.profile-summary-card h2, .profile-form-heading h2 { margin: 4px 0 0; color: var(--navy); font-size: 1.3rem; letter-spacing: -.04em; }
.profile-summary-line { margin: 14px 0 0; color: #71839a; font-size: .8rem; }
.profile-summary-line strong { color: var(--ink); }
.profile-summary-note { margin-top: 24px; border-top: 1px solid rgb(119 165 196 / 20%); color: #71889d; padding-top: 16px; font-size: .73rem; line-height: 1.45; }
.profile-form { display: grid; gap: 18px; }
.profile-form-heading { display: flex; align-items: center; justify-content: space-between; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.profile-grid-wide { grid-column: 1 / -1; }
.profile-form input { width: 100%; min-height: 45px; border: 1px solid #d9e2ee; border-radius: 10px; outline: 0; background: #fff; color: var(--ink); padding: 0 11px; font-size: .86rem; }
.profile-form input:focus { border-color: #8bb9e9; box-shadow: 0 0 0 4px rgb(43 116 190 / 9%); }
.profile-form .form-field small { color: #98a5b4; font-size: .68rem; font-weight: 500; }
.profile-help { margin: -9px 0 0; color: #8290a2; font-size: .75rem; }
.profile-divider { height: 1px; background: #edf1f5; }
.profile-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; }

@media (max-width: 820px) {
  .tracking-grid { grid-template-columns: repeat(2, 1fr); }
  .student-info-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-summary { grid-template-columns: repeat(2, 1fr); }
  .detail-item-grid { grid-template-columns: repeat(2, 1fr); }
  .paper-heading { align-items: flex-start; flex-direction: column; }
  .paper-heading .month-control { width: 100%; }
  .setup-grid { grid-template-columns: 1fr; }
  .profile-layout { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .tracking-grid { grid-template-columns: 1fr; }
  .reading-note-row { justify-content: stretch; }
  .small-field, .small-field input { width: 100%; }
  .setup-shell { padding: 22px 14px 40px; }
  .setup-card { padding: 20px 16px; }
}