:root {
  color-scheme: dark;
  --bg: #071116;
  --bg-soft: #0a171d;
  --surface: #0d1a21;
  --surface-2: #12232b;
  --surface-3: #192f38;
  --surface-raised: #17272f;
  --text: #f5faf8;
  --muted: #91a5ad;
  --muted-2: #6f858e;
  --line: rgba(223, 244, 237, .09);
  --line-strong: rgba(223, 244, 237, .16);
  --accent: #5be6a5;
  --accent-strong: #26c77c;
  --accent-deep: #0d7148;
  --accent-soft: rgba(91, 230, 165, .12);
  --amber: #ffc862;
  --amber-soft: rgba(255, 200, 98, .13);
  --red: #ff8588;
  --red-soft: rgba(255, 133, 136, .12);
  --blue: #75bfff;
  --blue-soft: rgba(117, 191, 255, .12);
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
  --shadow-small: 0 10px 34px rgba(0, 0, 0, .16);
  --radius-xl: 24px;
  --radius-lg: 19px;
  --radius-md: 15px;
  --radius-sm: 11px;
  --nav-height: 76px;
  --mobile-browser-bottom: 0px;
  --mobile-browser-fallback: 0px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.light {
  color-scheme: light;
  --bg: #edf2ef;
  --bg-soft: #e6edea;
  --surface: #fbfcfb;
  --surface-2: #eef5f1;
  --surface-3: #e4ece7;
  --surface-raised: #ffffff;
  --text: #12221d;
  --muted: #4d5f57;
  --muted-2: #6a7b73;
  --line: rgba(20, 37, 31, .16);
  --line-strong: rgba(20, 37, 31, .28);
  --accent: #2f8f62;
  --accent-strong: #236f4d;
  --accent-deep: #1b563b;
  --accent-soft: rgba(47, 143, 98, .11);
  --amber: #9d6b12;
  --amber-soft: rgba(157, 107, 18, .12);
  --red: #b44a54;
  --red-soft: rgba(180, 74, 84, .11);
  --blue: #2d6f9f;
  --blue-soft: rgba(45, 111, 159, .11);
  --shadow: 0 22px 52px rgba(34, 57, 45, .09);
  --shadow-small: 0 8px 22px rgba(34, 57, 45, .06);
}

body.light {
  background:
    radial-gradient(circle at 84% -10%, rgba(47, 143, 98, .06), transparent 30rem),
    radial-gradient(circle at -8% 58%, rgba(45, 111, 159, .045), transparent 26rem),
    var(--bg);
}

body.light .sidebar,
body.light .mobile-header,
body.light .bottom-nav {
  background: rgba(251, 252, 251, .97);
  border-color: var(--line-strong);
  box-shadow: 0 8px 22px rgba(31, 65, 49, .05);
}

body.light .card,
body.light .quick-action,
body.light .pupil-row,
body.light .diary-mobile-event,
body.light .sheet-card,
body.light .profile-stat,
body.light .attention-item,
body.light .sidebar-profile,
body.light .day-item,
body.light .icon-button,
body.light .secondary-button {
  border-width: 1.5px;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-small), inset 0 1px 0 rgba(255, 255, 255, .55);
}

body.light .next-card {
  background: linear-gradient(145deg, #ffffff 0%, #f7fbf9 55%, #eef5f1 100%);
  border-width: 1.5px;
  border-color: rgba(27, 86, 59, .22);
  box-shadow: 0 16px 34px rgba(27, 86, 59, .08), inset 0 1px 0 rgba(255,255,255,.65);
}

body.light .meta-chip {
  background: rgba(255, 255, 255, .94);
  border-color: var(--line-strong);
  color: #364a42;
}

body.light .nav-item.active,
body.light .bottom-nav button.active {
  background: rgba(47, 143, 98, .11);
  color: var(--accent-deep);
}

body.light .day-item.current {
  background: linear-gradient(90deg, rgba(47, 143, 98, .08), var(--surface-2) 60%);
  border-color: rgba(27, 86, 59, .30);
}

body.light input,
body.light textarea,
body.light select {
  border-width: 1.5px;
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--text);
}

body.light .primary-button {
  color: #f8fffb;
  background: linear-gradient(135deg, #2f8f62, #236f4d);
  box-shadow: 0 9px 20px rgba(35, 111, 77, .18);
}


body.light .sidebar-profile,
body.light .profile-stat,
body.light .attention-item,
body.light .quick-action,
body.light .pupil-row,
body.light .diary-mobile-event,
body.light .card {
  background: var(--surface);
}

body.light .quick-action,
body.light .profile-stat,
body.light .attention-item,
body.light .sidebar-profile {
  background: linear-gradient(180deg, #ffffff 0%, #f6faf7 100%);
}

body.light .bottom-nav button,
body.light .icon-button.quiet {
  background: var(--surface-2);
  border-color: var(--line-strong);
}

body.light .icon-button,
body.light .secondary-button {
  background: #f7faf8;
}

body.light .secondary-button:hover,
body.light .icon-button:hover,
body.light .quick-action:hover {
  background: #eef5f1;
}

body.light .nav-item:hover,
body.light .bottom-nav button:hover {
  background: rgba(20, 37, 31, .04);
}

body.light .attention-copy strong,
body.light .day-main strong,
body.light .pupil-main strong,
body.light .profile-tab.active,
body.light .card-header h2,
body.light .card-header h3,
body.light .next-card h2,
body.light .next-time strong {
  color: var(--text);
}

body.light .attention-item > .icon,
body.light .pupil-secondary,
body.light .day-main small,
body.light .event-copy small,
body.light .card-header p,
body.light .subtle,
body.light .next-focus,
body.light .next-label,
body.light .next-time small,
body.light .profile-stat span,
body.light .pupil-status-line .pill,
body.light .attention-copy small,
body.light .meta-chip,
body.light .quick-action span:last-child {
  color: var(--muted);
}

body.light .card,
body.light .sidebar,
body.light .bottom-nav,
body.light .mobile-header {
  backdrop-filter: blur(14px);
}

body.light .attention-icon {
  background: rgba(47, 143, 98, .10);
}

body.light .attention-icon.warning {
  background: rgba(157, 107, 18, .10);
}

body.light .attention-icon.blue {
  background: rgba(45, 111, 159, .10);
}


body.light .sidebar-profile,
body.light .profile-stat,
body.light .attention-item,
body.light .quick-action,
body.light .pupil-row,
body.light .diary-mobile-event,
body.light .card {
  background: var(--surface);
}

body.light .quick-action,
body.light .profile-stat,
body.light .attention-item,
body.light .sidebar-profile {
  background: linear-gradient(180deg, #ffffff 0%, #f6faf7 100%);
}

body.light .bottom-nav button,
body.light .icon-button.quiet {
  background: var(--surface-2);
  border-color: var(--line-strong);
}

body.light .icon-button,
body.light .secondary-button {
  background: #f7faf8;
}

body.light .secondary-button:hover,
body.light .icon-button:hover,
body.light .quick-action:hover {
  background: #eef5f1;
}

body.light .nav-item:hover,
body.light .bottom-nav button:hover {
  background: rgba(20, 37, 31, .04);
}

body.light .attention-copy strong,
body.light .day-main strong,
body.light .pupil-main strong,
body.light .profile-tab.active {
  color: var(--text);
}

body.light .attention-item > .icon,
body.light .pupil-secondary,
body.light .day-main small,
body.light .event-copy small {
  color: var(--muted);
}


* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); -webkit-text-size-adjust: 100%; }
@supports (height: 100dvh) {
  :root:not(.mobile-viewport-ready) { --mobile-browser-fallback: max(0px, calc(100vh - 100dvh)); }
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 82% -12%, rgba(91, 230, 165, .09), transparent 28rem),
    radial-gradient(circle at -10% 55%, rgba(117, 191, 255, .035), transparent 25rem),
    var(--bg);
  color: var(--text);
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(91, 230, 165, .36);
  outline-offset: 2px;
}
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { letter-spacing: -.035em; }
p { line-height: 1.55; }
svg { display: block; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon.small { width: 17px; height: 17px; }

.app-shell { min-height: 100vh; }
.sidebar, .desktop-header { display: none; }
.main-content { min-width: 0; padding: 0 14px calc(var(--nav-height) + 30px); }

.mobile-header {
  position: sticky;
  top: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(62px + env(safe-area-inset-top));
  margin: 0 -14px 13px;
  padding: env(safe-area-inset-top) 14px 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 96%, transparent) 70%, transparent);
  backdrop-filter: blur(16px);
}
.mobile-brand { border: 0; background: transparent; display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; font-weight: 800; letter-spacing: -.025em; }
.mini-brand-mark { position: relative; width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(145deg, var(--accent), var(--accent-strong)); box-shadow: 0 8px 22px rgba(38, 199, 124, .22); }
.mini-brand-mark::before, .mini-brand-mark::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-radius: 99px; background: #07140d; }
.mini-brand-mark::before { width: 2px; height: 22px; top: 6px; box-shadow: -7px 4px 0 -0.4px #07140d, 7px 4px 0 -0.4px #07140d; }
.mini-brand-mark::after { width: 2px; height: 4px; top: 10px; background: var(--accent); box-shadow: 0 8px 0 var(--accent); }
.mobile-header-actions { display: flex; gap: 7px; align-items: center; }
.avatar-button, .avatar {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, var(--surface-3), var(--surface));
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 850;
}
.avatar-button { width: 38px; height: 38px; border-radius: 13px; cursor: pointer; }
.avatar { width: 43px; height: 43px; border-radius: 14px; }
.large-avatar { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; font-size: 20px; font-weight: 850; background: linear-gradient(145deg, var(--surface-3), var(--surface)); color: var(--accent); border: 1px solid var(--line); }

.view-container { min-height: 60vh; animation: view-in .2s ease both; }
@keyframes view-in { from { opacity: .2; transform: translateY(5px); } }
.mobile-page-intro { margin: 6px 2px 17px; }
.mobile-page-intro .eyebrow { margin-bottom: 6px; }
.mobile-page-intro h1 { margin: 0; font-size: clamp(27px, 8vw, 35px); line-height: 1.03; }
.eyebrow { margin: 0 0 7px; color: var(--accent); font-size: 11px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.subtle { color: var(--muted); }

.grid { display: grid; gap: 13px; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.card {
  background: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--surface) 90%, var(--surface-2)));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-small);
}
.card-pad { padding: 17px; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.card-header h2, .card-header h3 { margin: 0; }
.card-header h2 { font-size: 20px; }
.card-header h3 { font-size: 17px; }
.card-header p { margin: 5px 0 0; color: var(--muted); font-size: 12.5px; }
.card-divider { height: 1px; background: var(--line); margin: 16px 0; }

.icon-button { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.icon-button.quiet { width: 39px; height: 39px; border: 0; background: var(--surface-2); }
.primary-button, .secondary-button, .danger-button, .text-button {
  border: 0;
  min-height: 46px;
  border-radius: 14px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  cursor: pointer;
}
.primary-button { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #06150e; box-shadow: 0 10px 25px rgba(38, 199, 124, .18); }
.secondary-button { background: var(--surface-3); border: 1px solid var(--line); color: var(--text); }
.danger-button { background: var(--red-soft); color: var(--red); }
.text-button { min-height: auto; padding: 4px; background: transparent; color: var(--accent); }
.compact { min-height: 42px; padding: 0 15px; }
.full-button { width: 100%; }
.button-row { display: flex; gap: 9px; flex-wrap: wrap; }
.button-row > button { flex: 1 1 auto; }

/* Today */
.today-stack { display: grid; gap: 13px; }
.next-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  background:
    linear-gradient(145deg, rgba(91, 230, 165, .10), transparent 57%),
    linear-gradient(155deg, #12272a, #0d1c22 65%, #10241f);
}

.next-card::after { content: ""; position: absolute; width: 260px; height: 260px; border: 1px solid rgba(91, 230, 165, .17); border-radius: 50%; right: -130px; top: -115px; box-shadow: inset 0 0 70px rgba(91, 230, 165, .05); }
.next-card > * { position: relative; z-index: 2; }
.next-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.next-label { color: var(--muted); font-size: 12px; }
.next-time { text-align: right; }
.next-time strong { display: block; font-size: 25px; letter-spacing: -.045em; }
.next-time small { color: var(--muted); font-size: 11px; }
.next-card h2 { margin: 16px 0 6px; font-size: 30px; }
.next-focus { margin: 0; color: var(--muted); font-size: 14px; max-width: 34rem; }
.next-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.meta-chip { min-height: 41px; padding: 8px 10px; border-radius: 12px; display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .045); border: 1px solid var(--line); color: var(--muted); font-size: 12px; }

.meta-chip .icon { color: var(--accent); flex: 0 0 auto; }
.next-actions { display: grid; grid-template-columns: 1.25fr .85fr; gap: 9px; }
.next-actions button { min-width: 0; padding: 0 11px; }

.quick-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.quick-action { min-height: 84px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); padding: 12px 8px; display: grid; place-items: center; align-content: center; gap: 6px; cursor: pointer; color: var(--text); }
.quick-action .icon { color: var(--accent); width: 22px; height: 22px; }
.quick-action span:last-child { font-size: 11px; font-weight: 750; text-align: center; }

.day-list { display: grid; gap: 9px; }
.day-item { position: relative; display: grid; grid-template-columns: 55px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 13px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.day-item.current { border-color: rgba(91, 230, 165, .26); background: linear-gradient(90deg, var(--accent-soft), var(--surface-2) 58%); }
.day-item.completed { opacity: .72; }
.day-time strong { display: block; }
.day-time small { color: var(--muted); font-size: 10px; }
.day-main { min-width: 0; }
.day-main strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-main span { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-item .status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.day-item.completed .status-dot { background: var(--accent); }
.day-item.current .status-dot { background: var(--amber); box-shadow: 0 0 0 5px var(--amber-soft); }

.attention-list { display: grid; gap: 9px; }
.attention-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 1px solid var(--line); background: var(--surface-2); padding: 11px; border-radius: 15px; cursor: pointer; }
.attention-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.attention-icon.warning { background: var(--amber-soft); color: var(--amber); }
.attention-icon.blue { background: var(--blue-soft); color: var(--blue); }
.attention-copy { min-width: 0; }
.attention-copy strong { display: block; font-size: 13px; }
.attention-copy small { display: block; color: var(--muted); margin-top: 3px; font-size: 11.5px; line-height: 1.35; }
.attention-item > .icon { color: var(--muted-2); }

.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.metric { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.metric span { color: var(--muted); font-size: 11px; }
.metric strong { display: block; margin: 6px 0 3px; font-size: 22px; letter-spacing: -.04em; }
.metric small { display: block; color: var(--accent); font-size: 10.5px; }

/* Diary */
.toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 13px; }
.toolbar-row { display: flex; gap: 9px; align-items: center; justify-content: space-between; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 4px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; }
.segmented button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 700; }
.segmented button.active { background: var(--surface-3); color: var(--text); }
.date-control { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.date-control strong { font-size: 16px; }
.date-arrows { display: flex; gap: 7px; }
.date-arrows .icon-button { width: 38px; height: 38px; }
.diary-mobile-list { display: grid; gap: 9px; }
.diary-date-label { display: flex; align-items: center; justify-content: space-between; padding: 8px 3px 3px; }
.diary-date-label strong { font-size: 13px; }
.diary-date-label small { color: var(--muted); }
.diary-mobile-event { border: 1px solid var(--line); background: var(--surface); border-radius: 17px; padding: 13px; display: grid; grid-template-columns: 53px minmax(0, 1fr) auto; gap: 10px; align-items: center; cursor: pointer; }
.diary-mobile-event .event-time { color: var(--muted); font-size: 12px; }
.diary-mobile-event .event-copy strong { display: block; }
.diary-mobile-event .event-copy small { display: block; color: var(--muted); margin-top: 4px; font-size: 11px; }
.diary-mobile-event .event-colour { width: 5px; align-self: stretch; border-radius: 99px; background: var(--accent); }
.diary-mobile-event.test .event-colour { background: var(--amber); }
.diary-mobile-event.open-slot { border-style: dashed; background: transparent; }
.diary-mobile-event.open-slot .event-colour { background: var(--blue); }
.diary-mobile-event.open-slot strong { color: var(--blue); }
.diary-desktop-grid { display: none; }

/* Pupils */
.search-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 11px; }
.search { position: relative; }
.search .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search input { width: 100%; min-height: 46px; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 14px; padding: 0 13px 0 41px; }
.filter-button { width: 46px; height: 46px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; display: grid; place-items: center; cursor: pointer; }
.pupil-list { display: grid; gap: 9px; }
.pupil-row { border: 1px solid var(--line); background: var(--surface); border-radius: 18px; padding: 13px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; cursor: pointer; }
.pupil-avatar { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, var(--surface-3), var(--surface-2)); color: var(--accent); border: 1px solid var(--line); font-weight: 850; }
.pupil-copy { min-width: 0; }
.pupil-copy strong { display: block; }
.pupil-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pupil-side { display: grid; justify-items: end; gap: 5px; }
.progress-ring { --progress: 50; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--progress) * 1%), var(--surface-3) 0); position: relative; font-size: 9px; font-weight: 850; }
.progress-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }
.progress-ring span { position: relative; z-index: 1; }
.pupil-status-line { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.pupil-status-line .pill { min-height: 23px; font-size: 9.5px; padding: 0 8px; }

.pill { min-height: 27px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.pill.success { background: var(--accent-soft); color: var(--accent); }
.pill.warning { background: var(--amber-soft); color: var(--amber); }
.pill.danger { background: var(--red-soft); color: var(--red); }
.pill.blue { background: var(--blue-soft); color: var(--blue); }

/* Money / reports */
.money-hero { display: grid; gap: 11px; padding: 19px; }
.money-total span { color: var(--muted); font-size: 11px; }
.money-total strong { display: block; margin-top: 4px; font-size: 36px; letter-spacing: -.05em; }
.money-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.money-summary div { border: 1px solid var(--line); border-radius: 14px; padding: 11px; background: var(--surface-2); }
.money-summary span { color: var(--muted); font-size: 10px; }
.money-summary strong { display: block; margin-top: 5px; }
.transaction-list { display: grid; }
.transaction { display: grid; grid-template-columns: 39px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.transaction:last-child { border: 0; }
.transaction-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.transaction-copy strong { display: block; font-size: 13px; }
.transaction-copy small { display: block; color: var(--muted); margin-top: 3px; font-size: 11px; }
.amount { text-align: right; }
.amount strong { display: block; font-size: 13px; }
.amount small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.amount.positive strong { color: var(--accent); }
.amount.pending strong { color: var(--amber); }
.report-list { display: grid; gap: 9px; }
.report-item { width: 100%; border: 1px solid var(--line); background: var(--surface-2); border-radius: 16px; padding: 13px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 11px; text-align: left; cursor: pointer; }
.report-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.report-item strong { display: block; }
.report-item small { display: block; color: var(--muted); margin-top: 3px; font-size: 11px; }
.report-item > .icon { color: var(--muted-2); }

/* Settings/forms */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 13px; }
.field { display: grid; gap: 7px; }
.field label { color: var(--muted); font-size: 11.5px; font-weight: 750; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 47px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 14px; padding: 12px 13px;
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.field-hint { color: var(--muted); font-size: 10.5px; }
.inline-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.toggle-row:last-child { border: 0; }
.toggle-copy strong { display: block; font-size: 13px; }
.toggle-copy small { display: block; color: var(--muted); margin-top: 4px; font-size: 11px; line-height: 1.35; }
.toggle { width: 48px; height: 28px; flex: 0 0 auto; border-radius: 99px; border: 0; background: var(--surface-3); position: relative; cursor: pointer; }
.toggle::after { content: ""; position: absolute; top: 3.5px; left: 4px; width: 21px; height: 21px; border-radius: 50%; background: var(--muted); transition: .2s; }
.toggle.on { background: var(--accent-soft); }
.toggle.on::after { left: 23px; background: var(--accent); }

/* Dialogs / sheets */
.sheet-dialog { width: 100%; max-width: none; max-height: 94dvh; margin: auto 0 0; padding: 0; border: 0; border-radius: 26px 26px 0 0; background: transparent; color: var(--text); overflow: visible; }
.sheet-dialog::backdrop { background: rgba(1, 8, 11, .76); backdrop-filter: blur(8px); }
.sheet-card { max-height: 94dvh; overflow: auto; overscroll-behavior: contain; padding: 9px 15px calc(22px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; border: 1px solid var(--line); border-bottom: 0; background: var(--surface); box-shadow: var(--shadow); }
.sheet-handle { width: 43px; height: 4px; border-radius: 99px; margin: 2px auto 13px; background: var(--line-strong); }
.sheet-header { position: sticky; top: -9px; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 13px; margin: 0 -1px 15px; padding: 8px 1px 10px; background: linear-gradient(var(--surface) 75%, transparent); }
.sheet-header h2 { margin: 0; font-size: 25px; }
.stepper { display: flex; align-items: center; justify-content: center; padding: 2px 0 18px; }
.stepper .step { width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 850; }
.stepper .step.active { background: var(--accent); color: #06140d; }
.stepper i { width: 54px; height: 2px; background: var(--line); }
.record-panel { padding: 18px 15px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-2); text-align: center; }
.record-button { width: 92px; height: 92px; border: 0; border-radius: 50%; display: grid; place-items: center; margin: 2px auto 14px; color: #07140d; background: radial-gradient(circle, var(--accent) 0 36%, var(--accent-soft) 38% 100%); box-shadow: 0 0 0 9px rgba(91, 230, 165, .04); cursor: pointer; }
.record-button .icon { width: 31px; height: 31px; }
.record-button.listening { animation: pulse 1.15s infinite; }
@keyframes pulse { 50% { transform: scale(1.035); box-shadow: 0 0 0 18px rgba(91, 230, 165, .035); } }
.record-panel h3 { margin: 0 0 6px; }
.record-panel p { margin: 0; color: var(--muted); font-size: 12px; }
.ai-review { display: grid; gap: 10px; }
.ai-section { padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.ai-section h3 { margin: 0 0 10px; color: var(--muted); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; }
.ai-section p { margin: 7px 0; font-size: 12px; }
.ai-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-tag { display: inline-flex; align-items: center; min-height: 30px; padding: 0 9px; border-radius: 10px; background: var(--surface-3); font-size: 11px; }
.suggestion { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.suggestion:last-child { border: 0; }
.suggestion strong { display: block; font-size: 12.5px; }
.suggestion small { display: block; color: var(--muted); margin-top: 3px; font-size: 10.5px; }
.confidence { color: var(--accent); font-size: 10px; font-weight: 850; }
.evidence { margin-top: 7px; padding: 8px 10px; border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 10.5px; border-left: 2px solid var(--accent); }

/* Pupil detail */
.pupil-profile-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.pupil-profile-head .pupil-avatar { width: 58px; height: 58px; border-radius: 19px; font-size: 18px; }
.pupil-profile-head h2 { margin: 0 0 4px; }
.pupil-profile-head p { margin: 0; color: var(--muted); font-size: 11px; }
.profile-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 15px 0; }
.profile-actions button { min-height: 52px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); display: grid; place-items: center; gap: 3px; cursor: pointer; }
.profile-actions .icon { color: var(--accent); }
.profile-actions small { font-size: 9.5px; color: var(--muted); }
.profile-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 13px; }
.profile-stat { padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.profile-stat span { color: var(--muted); font-size: 10px; }
.profile-stat strong { display: block; margin-top: 4px; font-size: 14px; }
.profile-tabs { position: sticky; top: 65px; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 0 -3px 12px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); }
.profile-tabs button { min-height: 35px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 10.5px; font-weight: 750; cursor: pointer; }
.profile-tabs button.active { background: var(--surface-3); color: var(--text); }
.skill-overview { display: grid; gap: 9px; }
.skill-group { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.skill-group summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px; background: var(--surface-2); cursor: pointer; }
.skill-group summary::-webkit-details-marker { display: none; }
.skill-group summary strong { font-size: 12px; }
.skill-list { display: grid; }
.skill-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 11px 13px; border-top: 1px solid var(--line); }
.skill-row span { font-size: 11px; }
.level-dots { display: flex; gap: 4px; }
.level-dot { width: 13px; height: 7px; border-radius: 99px; background: var(--surface-3); }
.level-dot.filled { background: var(--accent); }
.lesson-history { display: grid; gap: 8px; }
.history-item { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.history-item header { display: flex; justify-content: space-between; gap: 10px; }
.history-item strong { font-size: 12.5px; }
.history-item small { color: var(--muted); font-size: 10px; }
.history-item p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }

/* Menus */
.profile-summary { display: flex; align-items: center; gap: 13px; padding: 2px 0 16px; }
.profile-summary strong, .profile-summary small { display: block; }
.profile-summary small { color: var(--muted); margin-top: 4px; }
.menu-list { display: grid; gap: 8px; }
.menu-list button { width: 100%; min-height: 63px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 16px; padding: 10px 12px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; cursor: pointer; }
.menu-list button > .icon:first-child { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.menu-list strong, .menu-list small { display: block; }
.menu-list small { color: var(--muted); margin-top: 3px; font-size: 10.5px; }
.menu-list button > .icon:last-child { color: var(--muted); }
.menu-plan { margin-top: 13px; padding: 13px; border: 1px solid var(--line); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: linear-gradient(130deg, var(--accent-soft), var(--surface-2)); }
.menu-plan span, .menu-plan strong { display: block; }
.menu-plan div > span { color: var(--muted); font-size: 10px; }
.menu-plan div > strong { margin-top: 4px; }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.quick-grid button { min-height: 125px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-2); padding: 13px; display: grid; justify-items: start; align-content: start; gap: 5px; text-align: left; cursor: pointer; }
.quick-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 5px; }
.quick-grid strong { font-size: 13px; }
.quick-grid small { color: var(--muted); font-size: 10.5px; line-height: 1.35; }

/* Bottom navigation */
.mobile-nav {
  position: fixed;
  z-index: 45;
  left: 8px;
  right: 8px;
  bottom: calc(7px + env(safe-area-inset-bottom) + var(--mobile-browser-bottom) + var(--mobile-browser-fallback));
  min-height: var(--nav-height);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  isolation: isolate;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: bottom;
  visibility: visible;
  opacity: 1;
}
.mobile-nav-item, .mobile-finish { border: 0; background: transparent; border-radius: 17px; display: grid; place-items: center; align-content: center; gap: 3px; color: var(--muted); cursor: pointer; }
.mobile-nav-item .icon { width: 20px; height: 20px; }
.mobile-nav-item small, .mobile-finish small { font-size: 9.5px; font-weight: 700; }
.mobile-nav-item.active { color: var(--accent); background: var(--accent-soft); }
.mobile-finish { min-height: 0; align-self: stretch; transform: none; color: var(--muted); background: transparent; box-shadow: none; }
.mobile-finish .icon { width: 20px; height: 20px; }
.mobile-finish small { color: inherit; }
.mobile-finish:focus-visible { color: var(--accent); background: var(--accent-soft); outline: 0; }
@media (hover:hover) { .mobile-finish:hover { color: var(--accent); background: var(--accent-soft); } }

.toast { position: fixed; z-index: 100; left: 14px; right: 14px; bottom: calc(var(--nav-height) + 18px + env(safe-area-inset-bottom) + var(--mobile-browser-bottom) + var(--mobile-browser-fallback)); padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-raised); box-shadow: var(--shadow); text-align: center; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s; font-size: 12px; }
.toast.show { opacity: 1; transform: translateY(0); }
.empty-state { padding: 37px 15px; text-align: center; color: var(--muted); }

@media (min-width: 700px) {
  .main-content { padding-left: 24px; padding-right: 24px; }
  .mobile-header { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field.full { grid-column: 1 / -1; }
  .sheet-dialog { width: min(650px, calc(100vw - 28px)); margin: auto; border-radius: 25px; }
  .wide-dialog { width: min(930px, calc(100vw - 28px)); }
  .sheet-card { border-radius: 25px; border-bottom: 1px solid var(--line); padding: 20px; }
  .sheet-handle { display: none; }
  .sheet-header { top: -20px; padding-top: 5px; }
  .profile-stats { grid-template-columns: repeat(4, 1fr); }
  .button-row > button { flex: 0 1 auto; }
}

@media (min-width: 960px) {
  :root { --sidebar-width: 238px; }
  .app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-width); display: flex; flex-direction: column; padding: 22px 16px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 93%, transparent); backdrop-filter: blur(19px); }
  .brand { border: 0; background: transparent; display: flex; align-items: center; gap: 11px; padding: 2px 7px 24px; text-align: left; cursor: pointer; }
  .brand-mark { width: 43px; height: 43px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, var(--accent), var(--accent-strong)); box-shadow: 0 10px 27px rgba(38, 199, 124, .20); }
  .brand-mark svg { width: 27px; fill: none; stroke: #07140d; stroke-width: 3; stroke-linecap: round; }
  .brand-copy strong, .brand-copy small { display: block; }
  .brand-copy strong { font-size: 16px; }
  .brand-copy small { color: var(--muted); margin-top: 3px; font-size: 10px; }
  .nav-list { display: grid; gap: 6px; }
  .nav-item { min-height: 48px; border: 0; border-radius: 14px; background: transparent; color: var(--muted); padding: 0 13px; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; }
  .nav-item .icon { width: 19px; height: 19px; }
  .nav-item:hover { color: var(--text); background: var(--surface-2); }
  .nav-item.active { color: var(--text); background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
  .sidebar-profile { margin-top: auto; min-height: 62px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 16px; padding: 8px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; text-align: left; cursor: pointer; }
  .sidebar-profile strong, .sidebar-profile small { display: block; }
  .sidebar-profile strong { font-size: 12px; }
  .sidebar-profile small { color: var(--muted); margin-top: 3px; font-size: 9.5px; }
  .sidebar-profile > .icon { color: var(--muted); width: 16px; }
  .sync-state { display: flex; gap: 9px; align-items: center; padding: 13px 8px 2px; }
  .sync-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
  .sync-state strong, .sync-state small { display: block; }
  .sync-state strong { font-size: 10px; }
  .sync-state small { color: var(--muted); margin-top: 2px; font-size: 9px; }
  .main-content { grid-column: 2; padding: 27px clamp(24px, 4vw, 54px) 55px; }
  .mobile-header, .mobile-page-intro, .mobile-nav { display: none; }
  .desktop-header { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin-bottom: 27px; }
  .desktop-header h1 { margin: 0; font-size: clamp(30px, 3vw, 42px); line-height: 1.02; }
  .desktop-actions { display: flex; align-items: center; gap: 9px; }
  .today-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .72fr); gap: 17px; align-items: start; }
  .today-stack { gap: 17px; }
  .next-card { padding: 26px; min-height: 257px; }
  .next-card h2 { font-size: 38px; }
  .next-meta { display: flex; flex-wrap: wrap; }
  .meta-chip { min-width: 135px; }
  .quick-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-action { min-height: 90px; }
  .day-item { grid-template-columns: 72px minmax(0, 1fr) auto; padding: 14px; }
  .toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
  .diary-mobile-list { display: none; }
  .diary-desktop-grid { display: block; overflow-x: auto; }
  .week-grid { min-width: 760px; display: grid; grid-template-columns: 62px repeat(5, minmax(120px, 1fr)); }
  .week-head { min-height: 56px; border-bottom: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); font-size: 11px; }
  .week-head strong { display: block; color: var(--text); font-size: 15px; }
  .week-time { padding: 12px 6px; border-right: 1px solid var(--line); color: var(--muted); font-size: 10px; }
  .week-cell { min-height: 78px; padding: 5px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .week-event { height: 100%; padding: 9px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); border-left: 3px solid var(--accent); font-size: 10px; }
  .week-event strong { display: block; color: var(--text); font-size: 11px; margin-bottom: 3px; }
  .pupil-list.desktop-table { gap: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
  .pupil-list.desktop-table .pupil-row { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); grid-template-columns: auto minmax(190px, 1.4fr) 1fr 1fr 1fr auto; }
  .pupil-list.desktop-table .pupil-row:last-child { border-bottom: 0; }
  .pupil-list.desktop-table .desktop-pupil-col {
    min-width: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    column-gap: 10px;
    row-gap: 3px;
  }
  .pupil-list.desktop-table .desktop-pupil-col .subtle {
    display: block;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
  }
  .pupil-list.desktop-table .desktop-pupil-col strong {
    display: block;
    min-width: 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .pupil-list.desktop-table .pupil-side { justify-items: center; }
  .mobile-only { display: none !important; }
  .desktop-only { display: block !important; }
  .grid-2.desktop-split { grid-template-columns: minmax(0, 1.5fr) minmax(300px, .7fr); }
  .toast { left: auto; right: 26px; bottom: 26px; width: auto; max-width: 400px; }
}

@media (min-width: 960px) and (max-width: 1279px) {
  .pupil-list.desktop-table .desktop-pupil-col {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 959px) {
  .desktop-only, .desktop-pupil-col { display: none !important; }
}

@media (max-width: 380px) {
  .main-content { padding-left: 10px; padding-right: 10px; }
  .mobile-header { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
  .next-card { padding: 17px; }
  .next-card h2 { font-size: 27px; }
  .next-actions { grid-template-columns: 1fr; }
  .quick-strip { gap: 6px; }
  .quick-action { min-height: 76px; padding: 8px 5px; }
  .mobile-nav { left: 5px; right: 5px; }
}


/* v0.2.4 visual accents and diary clarity */
.page-accent-band {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 76%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--surface-2)), var(--surface));
  box-shadow: var(--shadow-small);
}
.page-accent-band.compact { margin-top: -2px; }
.accent-item {
  position: relative;
  min-height: 72px;
  padding: 11px 13px 11px 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
  overflow: hidden;
}
.accent-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), transparent 88%);
}
.accent-item span, .accent-item strong, .accent-item small { display: block; }
.accent-item span { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.accent-item strong { margin-top: 7px; font-size: 16px; letter-spacing: -.03em; }
.accent-item small { margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.35; }

.accent-card { position: relative; overflow: hidden; }
.accent-card::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, var(--line)), transparent);
}
.accent-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft) 70%, transparent), transparent 26%);
  opacity: .8;
}

.quick-action,
.day-item,
.attention-item,
.diary-mobile-event,
.pupil-row,
.metric,
.icon-button,
.filter-button,
.search input {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.quick-action:hover,
.day-item:hover,
.attention-item:hover,
.diary-mobile-event:hover,
.pupil-row:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: var(--shadow-small);
  transform: translateY(-1px);
}
.search-row.accent-search .search input,
.search-row.accent-search .filter-button,
.pupil-filters,
.diary-accent-band,
.pupils-accent-band {
  box-shadow: var(--shadow-small);
}
.search-row.accent-search .search input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 90%, transparent);
}
.pupil-filters button.active,
.segmented button.active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.diary-date-label {
  margin-top: 6px;
  padding: 10px 5px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}
.diary-mobile-event {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, var(--surface-2)), var(--surface));
}
.diary-mobile-event .event-time {
  font-weight: 800;
  color: var(--text);
  opacity: .76;
}
.diary-mobile-event .event-colour {
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}

@media (min-width: 700px) {
  .page-accent-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .page-accent-band.compact { margin-bottom: 17px; }
  .week-grid.enhanced-week-grid {
    min-width: 900px;
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), var(--surface));
  }
  .week-grid.enhanced-week-grid .week-head {
    min-height: 74px;
    padding: 11px 14px;
    align-content: center;
    justify-items: start;
    background: color-mix(in srgb, var(--surface) 92%, var(--surface-2));
  }
  .week-grid.enhanced-week-grid .time-corner { justify-items: center; }
  .week-grid.enhanced-week-grid .week-head span,
  .week-grid.enhanced-week-grid .week-head small { color: var(--muted); }
  .week-grid.enhanced-week-grid .week-head strong { margin-top: 5px; }
  .week-grid.enhanced-week-grid .week-head small { margin-top: 4px; font-size: 10px; }
  .week-grid.enhanced-week-grid .week-head.current {
    background: linear-gradient(180deg, var(--accent-soft), color-mix(in srgb, var(--surface) 94%, var(--surface-2)) 68%);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 60%, transparent);
  }
  .week-grid.enhanced-week-grid .week-time {
    position: sticky;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 7px;
    background: color-mix(in srgb, var(--surface) 95%, var(--surface-2));
  }
  .week-grid.enhanced-week-grid .week-time span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 30px;
    padding: 0 9px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 800;
  }
  .week-grid.enhanced-week-grid .week-time.alt { background: color-mix(in srgb, var(--surface-2) 90%, transparent); }
  .week-grid.enhanced-week-grid .week-cell {
    min-height: 88px;
    padding: 6px;
    background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  }
  .week-grid.enhanced-week-grid .week-cell.alt { background: color-mix(in srgb, var(--surface-2) 76%, var(--surface)); }
  .week-grid.enhanced-week-grid .week-cell.current-col {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 55%, transparent), color-mix(in srgb, var(--surface-raised) 92%, transparent));
  }
  .week-grid.enhanced-week-grid .week-cell.busy { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-soft) 26%, transparent); }
  .week-grid.enhanced-week-grid .week-event {
    width: 100%;
    height: 100%;
    padding: 10px 11px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
    border-left: 4px solid var(--accent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 94%, transparent), color-mix(in srgb, var(--accent-soft) 45%, var(--surface)));
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
    display: grid;
    align-content: start;
    gap: 4px;
  }
  .week-grid.enhanced-week-grid .week-event.test {
    border-left-color: var(--amber);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 95%, transparent), color-mix(in srgb, var(--amber-soft) 58%, var(--surface)));
  }
  .week-grid.enhanced-week-grid .week-event.info {
    border-left-color: var(--blue);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 95%, transparent), color-mix(in srgb, var(--blue-soft) 56%, var(--surface)));
  }
  .week-grid.enhanced-week-grid .week-event-time {
    font-size: 10px;
    font-weight: 800;
    color: var(--muted);
  }
  .week-grid.enhanced-week-grid .week-event strong {
    display: block;
    color: var(--text);
    font-size: 12px;
    margin: 1px 0 0;
  }
  .week-grid.enhanced-week-grid .week-event span {
    color: var(--accent-deep);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
  }
  .week-grid.enhanced-week-grid .week-event em {
    font-style: normal;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.3;
  }
}

body.light .page-accent-band,
body.light .accent-item,
body.light .week-grid.enhanced-week-grid .week-event,
body.light .diary-mobile-event,
body.light .pupil-row,
body.light .day-item,
body.light .attention-item {
  box-shadow: var(--shadow-small), inset 0 1px 0 rgba(255,255,255,.65);
}
body.light .week-grid.enhanced-week-grid .week-head.current {
  box-shadow: inset 0 -2px 0 rgba(47, 143, 98, .32);
}


/* v0.2.5 richer light-mode contrast and diary colour system */
:root {
  --violet: #9c83ef;
  --violet-soft: rgba(156, 131, 239, .14);
}
body.light {
  --violet: #8065da;
  --violet-soft: rgba(128, 101, 218, .13);
}

body.light .card,
body.light .quick-action,
body.light .pupil-row,
body.light .diary-mobile-event,
body.light .sheet-card,
body.light .profile-stat,
body.light .attention-item,
body.light .sidebar-profile,
body.light .day-item,
body.light .icon-button,
body.light .secondary-button,
body.light .metric,
body.light .search input,
body.light .filter-button,
body.light .segmented,
body.light .page-accent-band,
body.light .accent-item {
  box-shadow:
    0 10px 22px rgba(32, 52, 42, .06),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -1px 0 rgba(17, 34, 28, .045);
}
body.light .card,
body.light .page-accent-band,
body.light .accent-item,
body.light .search input,
body.light .filter-button,
body.light .segmented {
  border-color: rgba(18, 34, 29, .34);
}
body.light .quick-action,
body.light .day-item,
body.light .attention-item,
body.light .pupil-row,
body.light .diary-mobile-event,
body.light .metric {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,247,244,.98));
}
body.light .accent-item:nth-child(2) {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,255,.96));
}
body.light .accent-item:nth-child(3) {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,247,241,.96));
}
body.light .pupil-avatar,
body.light .attention-icon,
body.light .quick-icon,
body.light .transaction-icon,
body.light .report-icon,
body.light .menu-list button > .icon:first-child {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 6px 14px rgba(30, 52, 42, .07);
}

.diary-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 12px;
}
.legend-chip,
.event-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .01em;
}
.legend-chip.default,
.event-badge { background: var(--accent-soft); color: var(--accent-deep); }
.legend-chip.warning,
.diary-mobile-event.warning .event-badge { background: var(--amber-soft); color: var(--amber); }
.legend-chip.test,
.diary-mobile-event.test .event-badge { background: var(--amber-soft); color: var(--amber); }
.legend-chip.info,
.diary-mobile-event.info .event-badge { background: var(--blue-soft); color: var(--blue); }
.legend-chip.violet,
.diary-mobile-event.violet .event-badge { background: var(--violet-soft); color: var(--violet); }

.diary-mobile-event {
  grid-template-columns: 58px minmax(0, 1fr) auto auto;
  gap: 11px;
  align-items: center;
}
.diary-mobile-event .event-time {
  border-radius: 12px;
  padding: 10px 7px;
  text-align: center;
  background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
  border: 1px solid var(--line);
}
.diary-mobile-event .event-copy strong {
  margin-bottom: 2px;
}
.diary-mobile-event .event-colour {
  width: 6px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-soft) 62%, transparent);
}
.diary-mobile-event.warning .event-colour { background: var(--amber); box-shadow: 0 0 0 5px color-mix(in srgb, var(--amber-soft) 75%, transparent); }
.diary-mobile-event.info .event-colour { background: var(--blue); box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue-soft) 75%, transparent); }
.diary-mobile-event.violet .event-colour { background: var(--violet); box-shadow: 0 0 0 5px color-mix(in srgb, var(--violet-soft) 78%, transparent); }
.diary-mobile-event.test .event-colour { background: var(--amber); box-shadow: 0 0 0 5px color-mix(in srgb, var(--amber-soft) 75%, transparent); }
.diary-mobile-event.default { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--accent-soft) 46%, var(--surface))); }
.diary-mobile-event.warning { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--amber-soft) 56%, var(--surface))); }
.diary-mobile-event.info { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--blue-soft) 52%, var(--surface))); }
.diary-mobile-event.violet { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--violet-soft) 54%, var(--surface))); }
.diary-mobile-event.test { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--amber-soft) 58%, var(--surface))); }
body.light .diary-mobile-event .event-time,
body.light .legend-chip,
body.light .event-badge {
  border-color: rgba(18, 34, 29, .28);
}
body.light .legend-chip.default,
body.light .diary-mobile-event.default .event-badge { background: rgba(47, 143, 98, .12); color: #20573d; }
body.light .legend-chip.warning,
body.light .legend-chip.test,
body.light .diary-mobile-event.warning .event-badge,
body.light .diary-mobile-event.test .event-badge { background: rgba(157, 107, 18, .13); color: #8b5f11; }
body.light .legend-chip.info,
body.light .diary-mobile-event.info .event-badge { background: rgba(45, 111, 159, .13); color: #265c84; }
body.light .legend-chip.violet,
body.light .diary-mobile-event.violet .event-badge { background: rgba(128, 101, 218, .12); color: #6b50c7; }

body.light .week-grid.enhanced-week-grid {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,244,.98));
  box-shadow: 0 14px 28px rgba(28, 45, 37, .06), inset 0 1px 0 rgba(255,255,255,.75);
}
body.light .week-grid.enhanced-week-grid .week-head {
  border-bottom-color: rgba(18, 34, 29, .20);
  box-shadow: inset -1px 0 0 rgba(18, 34, 29, .11), inset 0 -1px 0 rgba(18, 34, 29, .12);
}
body.light .week-grid.enhanced-week-grid .week-head.current {
  background: linear-gradient(180deg, rgba(47,143,98,.12), rgba(45,111,159,.05) 55%, rgba(255,255,255,.98));
}
body.light .week-grid.enhanced-week-grid .week-time {
  box-shadow: inset -1px 0 0 rgba(18,34,29,.14), inset 0 -1px 0 rgba(18,34,29,.12);
}
body.light .week-grid.enhanced-week-grid .week-time span {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,247,244,.98));
  border-color: rgba(18,34,29,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 10px rgba(32, 52, 42, .05);
}
body.light .week-grid.enhanced-week-grid .week-cell {
  box-shadow: inset -1px 0 0 rgba(18,34,29,.13), inset 0 -1px 0 rgba(18,34,29,.12);
}
body.light .week-grid.enhanced-week-grid .week-cell.alt {
  background: linear-gradient(180deg, rgba(248,250,249,.98), rgba(241,246,243,.98));
}
body.light .week-grid.enhanced-week-grid .week-cell.current-col {
  background: linear-gradient(180deg, rgba(47,143,98,.06), rgba(45,111,159,.035) 58%, rgba(255,255,255,.96));
}
body.light .week-grid.enhanced-week-grid .week-event {
  border-width: 1.5px;
  box-shadow: 0 8px 16px rgba(28, 45, 37, .07), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(18,34,29,.04);
}
body.light .week-grid.enhanced-week-grid .week-event.default {
  border-left-color: #2f8f62;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(47,143,98,.09));
}
body.light .week-grid.enhanced-week-grid .week-event.warning {
  border-left-color: #9d6b12;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(157,107,18,.12));
}
body.light .week-grid.enhanced-week-grid .week-event.info {
  border-left-color: #2d6f9f;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(45,111,159,.12));
}
body.light .week-grid.enhanced-week-grid .week-event.violet {
  border-left-color: #8065da;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(128,101,218,.12));
}
body.light .week-grid.enhanced-week-grid .week-event.test {
  border-left-color: #c28a1d;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(194,138,29,.13));
}
body.light .week-grid.enhanced-week-grid .week-event span { color: var(--text); opacity: .86; }
body.light .week-grid.enhanced-week-grid .week-event em { color: var(--muted); opacity: .92; }

body.light .pill.success { background: rgba(47,143,98,.12); color: #20573d; }
body.light .pill.warning { background: rgba(157,107,18,.13); color: #8b5f11; }
body.light .pill.danger { background: rgba(180,74,84,.12); color: #a33b45; }
body.light .pill.blue { background: rgba(45,111,159,.13); color: #265c84; }
body.light .progress-ring {
  box-shadow: 0 5px 12px rgba(31, 53, 43, .06);
}


/* v0.2.6 stronger light readability + pupil profile step */
body.light .eyebrow,
body.light .card-header h2,
body.light .card-header h3,
body.light .mobile-intro h1,
body.light .toolbar strong,
body.light .sheet-header h2,
body.light .profile-tabs button.active,
body.light .nav-item.active {
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
body.light .sidebar::after,
body.light .card::after,
body.light .page-accent-band::after,
body.light .diary-mobile-list::before,
body.light .pupil-list::before {
  opacity: .95;
}
body.light .card,
body.light .page-accent-band,
body.light .accent-item,
body.light .pupil-list,
body.light .diary-mobile-list,
body.light .week-grid.enhanced-week-grid,
body.light .profile-tabs,
body.light .search input,
body.light .filter-button,
body.light .segmented {
  box-shadow:
    0 14px 28px rgba(24, 40, 33, .055),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(17, 34, 28, .055);
}
body.light .search input::placeholder {
  color: #6a7b73;
}
body.light .page-accent-band,
body.light .mini-overview-card.emphasis,
body.light .profile-stat,
body.light .attention-item {
  border-color: rgba(18, 34, 29, .36);
}
body.light .profile-tabs button.active,
body.light .segmented button.active {
  border-color: rgba(18, 34, 29, .32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 10px rgba(24, 40, 33, .05);
}
body.light .quick-action:hover,
body.light .day-item:hover,
body.light .attention-item:hover,
body.light .pupil-row:hover,
body.light .diary-mobile-event:hover,
body.light .week-grid.enhanced-week-grid .week-event:hover {
  box-shadow:
    0 12px 22px rgba(24, 40, 33, .075),
    inset 0 1px 0 rgba(255,255,255,.72);
}

body.light .week-grid.enhanced-week-grid .week-head,
body.light .week-grid.enhanced-week-grid .week-time,
body.light .week-grid.enhanced-week-grid .week-cell {
  border-color: rgba(18, 34, 29, .18);
}
body.light .week-grid.enhanced-week-grid .week-cell {
  box-shadow: inset -1px 0 0 rgba(18,34,29,.16), inset 0 -1px 0 rgba(18,34,29,.14);
}
body.light .week-grid.enhanced-week-grid .week-cell.busy {
  box-shadow: inset -1px 0 0 rgba(18,34,29,.16), inset 0 -1px 0 rgba(18,34,29,.14), inset 0 0 0 1px rgba(18,34,29,.06);
}
body.light .week-grid.enhanced-week-grid .week-event {
  border-width: 2px;
  border-left-width: 5px;
}
body.light .week-grid.enhanced-week-grid .week-event.default {
  border-color: rgba(47,143,98,.28);
  border-left-color: #2f8f62;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(47,143,98,.12));
}
body.light .week-grid.enhanced-week-grid .week-event.warning {
  border-color: rgba(157,107,18,.30);
  border-left-color: #9d6b12;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(157,107,18,.16));
}
body.light .week-grid.enhanced-week-grid .week-event.info {
  border-color: rgba(45,111,159,.30);
  border-left-color: #2d6f9f;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(45,111,159,.15));
}
body.light .week-grid.enhanced-week-grid .week-event.violet {
  border-color: rgba(128,101,218,.30);
  border-left-color: #8065da;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(128,101,218,.16));
}
body.light .week-grid.enhanced-week-grid .week-event.test {
  border-color: rgba(194,138,29,.30);
  border-left-color: #c28a1d;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(194,138,29,.18));
}
body.light .week-grid.enhanced-week-grid .week-event strong { color: #13231e; }
body.light .week-grid.enhanced-week-grid .week-event span { color: #23342d; }
body.light .week-grid.enhanced-week-grid .week-event em { color: #53655d; }

body.light .diary-mobile-event {
  border-width: 1.5px;
}
body.light .diary-mobile-event.default {
  border-color: rgba(47,143,98,.24);
}
body.light .diary-mobile-event.warning,
body.light .diary-mobile-event.test {
  border-color: rgba(157,107,18,.26);
}
body.light .diary-mobile-event.info {
  border-color: rgba(45,111,159,.24);
}
body.light .diary-mobile-event.violet {
  border-color: rgba(128,101,218,.25);
}
body.light .diary-mobile-event .event-time {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 8px rgba(24, 40, 33, .04);
}

.mini-overview-strip {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.mini-overview-card {
  position: relative;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 94%, transparent), color-mix(in srgb, var(--surface) 95%, var(--surface-2)));
  box-shadow: var(--shadow-small);
  overflow: hidden;
}
.mini-overview-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), transparent 92%);
}
.mini-overview-card.emphasis::before {
  background: linear-gradient(180deg, var(--blue), transparent 92%);
}
.mini-overview-card span,
.mini-overview-card strong,
.mini-overview-card small { display: block; }
.mini-overview-card span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}
.mini-overview-card strong {
  margin-top: 6px;
  font-size: 15px;
  color: var(--text);
}
.mini-overview-card small {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.35;
  font-size: 11.5px;
}
body.light .mini-overview-card {
  border-color: rgba(18, 34, 29, .34);
  box-shadow: 0 10px 22px rgba(24, 40, 33, .06), inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(17,34,28,.05);
}
body.light .mini-overview-card.emphasis {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,247,255,.98));
}
@media (min-width: 760px) {
  .mini-overview-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* v0.3.0 Pupil Profile 2.0 + Finish Lesson 2.0 */
.pupil-profile-header-v2 { align-items: center; }
.profile-head-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.profile-next-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2) 58%);
  box-shadow: var(--shadow-small);
}
.profile-next-context span, .profile-next-context strong, .profile-next-context small { display: block; }
.profile-next-context span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.profile-next-context strong { margin-top: 5px; font-size: 15px; }
.profile-next-context small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.profile-progress-orb {
  --progress: 50;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  background: conic-gradient(var(--accent) calc(var(--progress) * 1%), var(--surface-3) 0);
  position: relative;
  overflow: hidden;
}
.profile-progress-orb::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); }
.profile-progress-orb strong, .profile-progress-orb small { position: relative; z-index: 1; text-align: center; }
.profile-progress-orb strong { font-size: 14px; margin: 0; }
.profile-progress-orb small { font-size: 8px; margin: 0; color: var(--muted); text-transform: none; letter-spacing: 0; }
.profile-actions-v2 { grid-template-columns: repeat(4, 1fr); }
.profile-sticky-actions {
  position: sticky;
  z-index: 4;
  bottom: calc(-20px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 8px;
  margin: 16px -4px -4px;
  padding: 10px 4px 5px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 96%, transparent) 28%);
  backdrop-filter: blur(14px);
}
.training-snapshot {
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(150deg, var(--surface-2), var(--surface));
}
.training-snapshot-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.training-snapshot-head h3 { margin: 0 0 5px; }
.training-snapshot-head p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.priority-grid { display: grid; gap: 8px; margin-top: 13px; }
.priority-card { position: relative; padding: 11px 12px 11px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.priority-card::before { content: ''; position: absolute; inset: 8px auto 8px 0; width: 4px; border-radius: 10px; background: var(--amber); }
.priority-card.tone-2::before { background: var(--blue); }
.priority-card.tone-3::before { background: var(--violet); }
.priority-card span, .priority-card strong, .priority-card small { display: block; }
.priority-card span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.priority-card strong { margin-top: 5px; font-size: 12.5px; }
.priority-card small { margin-top: 4px; color: var(--muted); font-size: 10.5px; line-height: 1.3; }
.overview-focus-grid { display: grid; gap: 10px; }
.focus-title { font-size: 16px !important; margin-top: 0 !important; }
.priority-mini-list { display: grid; gap: 7px; margin-top: 11px; }
.priority-mini-list > span { display: flex; justify-content: space-between; gap: 10px; padding-top: 7px; border-top: 1px solid var(--line); }
.priority-mini-list strong, .priority-mini-list small { font-size: 10.5px; }
.priority-mini-list small { color: var(--muted); }
.timeline-history { position: relative; }
.timeline-history::before { content: ''; position: absolute; left: 8px; top: 9px; bottom: 9px; width: 1px; background: linear-gradient(var(--accent), var(--line)); }
.timeline-history .history-item { position: relative; margin-left: 18px; }
.timeline-history .history-item header > div { display: flex; align-items: center; gap: 8px; }
.history-dot { width: 9px; height: 9px; margin-left: -22px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.history-dot.lesson { background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.history-plan { display: grid; gap: 3px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.history-plan span { color: var(--muted); text-transform: uppercase; font-size: 8.5px; letter-spacing: .08em; font-weight: 800; }
.history-plan small { font-size: 10.5px; }
.money-balance-card { display: grid; gap: 13px; padding: 15px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-2); }
.money-balance-card span, .money-balance-card strong, .money-balance-card small { display: block; }
.money-balance-card span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.money-balance-card strong { margin-top: 5px; font-size: 24px; letter-spacing: -.04em; }
.money-balance-card small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.money-balance-card.due { background: linear-gradient(135deg, var(--red-soft), var(--surface-2) 58%); }
.money-balance-card.credit { background: linear-gradient(135deg, var(--accent-soft), var(--surface-2) 58%); }

.finish-context-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: linear-gradient(135deg, var(--blue-soft), var(--surface-2) 62%);
}
.finish-context-card span, .finish-context-card strong, .finish-context-card small { display: block; }
.finish-context-card div > span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.finish-context-card strong { margin-top: 4px; font-size: 14px; }
.finish-context-card small { margin-top: 4px; color: var(--muted); font-size: 10.5px; line-height: 1.3; }
.last-record-context { padding: 11px 13px; margin-bottom: 10px; border: 1px solid var(--line); border-left: 4px solid var(--violet); border-radius: 15px; background: linear-gradient(135deg, var(--violet-soft), var(--surface-2) 70%); }
.last-record-context span { color: var(--violet); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; font-weight: 850; }
.last-record-context p { margin: 6px 0 4px; font-size: 11.5px; }
.last-record-context small { color: var(--muted); font-size: 9.5px; }
.record-panel-v2 { background: linear-gradient(145deg, var(--surface-2), color-mix(in srgb, var(--accent-soft) 34%, var(--surface))); }
.capture-prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.capture-prompts span { padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--muted); font-size: 9.5px; font-weight: 750; }
.finish-note { min-height: 132px; }
.field-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; }
.field-meta > span:last-child { color: var(--muted-2); font-size: 9.5px; }
.ai-guardrail { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: center; margin-top: 11px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, var(--blue-soft), var(--surface-2) 70%); }
.guardrail-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--blue-soft); color: var(--blue); }
.ai-guardrail strong, .ai-guardrail small { display: block; }
.ai-guardrail strong { font-size: 11.5px; }
.ai-guardrail small { margin-top: 3px; color: var(--muted); font-size: 9.5px; line-height: 1.35; }
.ai-review-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 11px; }
.ai-review-header h3 { margin: 0 0 5px; font-size: 18px; }
.ai-review-header p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 10.5px; }
.section-title-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 5px; }
.section-title-row h3 { margin-bottom: 0; }
.section-title-row > span { color: var(--muted); font-size: 8.5px; }
.approval-control { display: grid; justify-items: center; gap: 3px; }
.approval-control input { width: 20px; height: 20px; accent-color: var(--accent-strong); }
.approval-control small { color: var(--muted); font-size: 8.5px; }
.plan-editor { min-height: 112px; }
.finish-summary-card { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, var(--accent-soft), var(--surface-2) 68%); }
.finish-success-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.finish-summary-card h3 { margin: 0 0 4px; }
.finish-summary-card p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 10.5px; }
.save-preview-grid { display: grid; gap: 10px; margin: 10px 0; }
.save-change { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.save-change:last-child { border-bottom: 0; }
.save-change strong { font-size: 11.5px; }
.save-change small { color: var(--muted); font-size: 9.5px; }
.save-safety { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 9px; align-items: center; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.save-safety > span { color: var(--blue); }
.save-safety p { margin: 0; color: var(--muted); font-size: 9.5px; line-height: 1.4; }
.save-safety strong { color: var(--text); }

body.light .profile-next-context,
body.light .training-snapshot,
body.light .priority-card,
body.light .money-balance-card,
body.light .finish-context-card,
body.light .last-record-context,
body.light .record-panel-v2,
body.light .ai-guardrail,
body.light .finish-summary-card,
body.light .save-safety {
  border-color: rgba(18,34,29,.32);
  box-shadow: 0 10px 22px rgba(24,40,33,.055), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(17,34,28,.045);
}
body.light .profile-next-context { background: linear-gradient(135deg, rgba(47,143,98,.10), rgba(255,255,255,.98) 62%); }
body.light .finish-context-card { background: linear-gradient(135deg, rgba(45,111,159,.10), rgba(255,255,255,.98) 66%); }
body.light .last-record-context { background: linear-gradient(135deg, rgba(128,101,218,.10), rgba(255,255,255,.98) 72%); }
body.light .ai-guardrail { background: linear-gradient(135deg, rgba(45,111,159,.08), rgba(255,255,255,.98) 72%); }

@media (min-width: 700px) {
  .priority-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .overview-focus-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .money-balance-card { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
  .save-preview-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 960px) {
  .profile-sticky-actions { display: none; }
}


/* v0.3.1 desktop hover clarity + booking step */
.pupil-list.desktop-table .pupil-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.pupil-list.desktop-table .pupil-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--blue) 35%, var(--accent)));
  opacity: 0;
  transform: scaleY(.7);
  transition: opacity .18s ease, transform .18s ease;
}
.pupil-list.desktop-table .pupil-row::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 42%, transparent), transparent 24%, transparent 76%, color-mix(in srgb, var(--blue-soft) 28%, transparent));
  opacity: 0;
  transition: opacity .18s ease;
}
.pupil-list.desktop-table .pupil-row:hover,
.pupil-list.desktop-table .pupil-row:focus-visible {
  transform: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 28%, var(--surface)) 0%, color-mix(in srgb, var(--surface-raised) 92%, transparent) 52%, color-mix(in srgb, var(--blue-soft) 18%, var(--surface)) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, var(--line)), 0 14px 22px rgba(0, 0, 0, .12);
}
.pupil-list.desktop-table .pupil-row:hover::before,
.pupil-list.desktop-table .pupil-row:focus-visible::before {
  opacity: 1;
  transform: scaleY(1);
}
.pupil-list.desktop-table .pupil-row:hover::after,
.pupil-list.desktop-table .pupil-row:focus-visible::after {
  opacity: 1;
}
.pupil-list.desktop-table .pupil-row:hover .pupil-avatar,
.pupil-list.desktop-table .pupil-row:focus-visible .pupil-avatar {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  box-shadow: 0 8px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06);
}
.pupil-list.desktop-table .pupil-row:hover .progress-ring,
.pupil-list.desktop-table .pupil-row:focus-visible .progress-ring {
  transform: scale(1.04);
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}
body.light .pupil-list.desktop-table .pupil-row:hover,
body.light .pupil-list.desktop-table .pupil-row:focus-visible {
  background: linear-gradient(90deg, rgba(47,143,98,.09) 0%, rgba(255,255,255,.98) 48%, rgba(45,111,159,.08) 100%);
  box-shadow: inset 0 0 0 1px rgba(18,34,29,.18), 0 12px 20px rgba(24,40,33,.08);
}
body.light .pupil-list.desktop-table .pupil-row:hover .pupil-avatar,
body.light .pupil-list.desktop-table .pupil-row:focus-visible .pupil-avatar {
  box-shadow: 0 8px 16px rgba(24,40,33,.08), inset 0 1px 0 rgba(255,255,255,.75);
}

.week-grid.enhanced-week-grid .week-event {
  position: relative;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}
.week-grid.enhanced-week-grid .week-event::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.week-grid.enhanced-week-grid .week-event:hover,
.week-grid.enhanced-week-grid .week-event:focus-visible {
  transform: translateY(-2px) scale(1.012);
  box-shadow: 0 12px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.1);
  filter: saturate(1.05);
}
.week-grid.enhanced-week-grid .week-event.default:hover,
.week-grid.enhanced-week-grid .week-event.default:focus-visible { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.week-grid.enhanced-week-grid .week-event.warning:hover,
.week-grid.enhanced-week-grid .week-event.warning:focus-visible,
.week-grid.enhanced-week-grid .week-event.test:hover,
.week-grid.enhanced-week-grid .week-event.test:focus-visible { border-color: color-mix(in srgb, var(--amber) 44%, var(--line)); }
.week-grid.enhanced-week-grid .week-event.info:hover,
.week-grid.enhanced-week-grid .week-event.info:focus-visible { border-color: color-mix(in srgb, var(--blue) 44%, var(--line)); }
.week-grid.enhanced-week-grid .week-event.violet:hover,
.week-grid.enhanced-week-grid .week-event.violet:focus-visible { border-color: color-mix(in srgb, var(--violet) 44%, var(--line)); }
body.light .week-grid.enhanced-week-grid .week-event:hover,
body.light .week-grid.enhanced-week-grid .week-event:focus-visible {
  box-shadow: 0 10px 18px rgba(24,40,33,.10), inset 0 1px 0 rgba(255,255,255,.82), inset 0 -1px 0 rgba(17,34,28,.04);
}

.booking-insight {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 52%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--surface-2)), var(--surface));
  box-shadow: var(--shadow-small);
}
.booking-insight-grid {
  display: grid;
  gap: 10px;
}
.booking-summary,
.booking-pill {
  position: relative;
  min-height: 66px;
  padding: 11px 12px 11px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  overflow: hidden;
}
.booking-summary::before,
.booking-pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), transparent 90%);
}
.booking-summary span,
.booking-summary strong,
.booking-summary small,
.booking-pill span,
.booking-pill strong,
.booking-pill small { display: block; }
.booking-summary span,
.booking-pill span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}
.booking-summary strong,
.booking-pill strong {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text);
}
.booking-summary small,
.booking-pill small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.booking-pill.success::before { background: linear-gradient(180deg, var(--accent), transparent 90%); }
.booking-pill.warning::before { background: linear-gradient(180deg, var(--amber), transparent 90%); }
.booking-pill.blue::before { background: linear-gradient(180deg, var(--blue), transparent 90%); }
.booking-pill.danger::before { background: linear-gradient(180deg, var(--red), transparent 90%); }
.booking-pill.neutral::before { background: linear-gradient(180deg, var(--muted-2), transparent 90%); }
.booking-hint {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
body.light .booking-insight,
body.light .booking-summary,
body.light .booking-pill {
  box-shadow: 0 10px 20px rgba(24,40,33,.06), inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(17,34,28,.04);
}
body.light .booking-summary,
body.light .booking-pill {
  border-color: rgba(18, 34, 29, .28);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,244,.98));
}
@media (min-width: 760px) {
  .booking-insight-grid {
    grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, .8fr));
  }
}


/* v0.3.2 homepage hover polish + lesson prep step */
body.light .today-layout .primary-button,
body.light .today-layout .secondary-button,
body.light .today-layout .quick-action,
body.light .today-layout .day-item,
body.light .today-layout .metric,
body.light .today-layout .attention-item,
body.light .today-layout .text-button {
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease, color .18s ease;
}
body.light .today-layout .primary-button:hover,
body.light .today-layout .secondary-button:hover,
body.light .today-layout .quick-action:hover,
body.light .today-layout .day-item:hover,
body.light .today-layout .metric:hover,
body.light .today-layout .attention-item:hover,
body.light .today-layout .text-button:hover {
  border-color: rgba(24, 87, 58, .46);
  box-shadow: 0 12px 20px rgba(23, 59, 42, .09), inset 0 1px 0 rgba(255,255,255,.75);
}
body.light .today-layout .primary-button:hover,
body.light .today-layout .secondary-button:hover,
body.light .today-layout .quick-action:hover,
body.light .today-layout .day-item:hover,
body.light .today-layout .attention-item:hover {
  transform: translateY(-1px);
}
body.light .today-layout .metric:hover,
body.light .today-layout .quick-action:hover,
body.light .today-layout .day-item:hover,
body.light .today-layout .attention-item:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,246,242,.98));
}
body.light .today-layout .primary-button:hover {
  background: linear-gradient(180deg, rgba(58, 149, 104, .98), rgba(41, 122, 83, .98));
}
body.light .today-layout .secondary-button:hover,
body.light .today-layout .text-button:hover {
  color: #184d35;
}
body.light .today-layout .next-card:hover,
body.light .today-layout .card:hover {
  border-color: rgba(24, 87, 58, .18);
}

.today-prep-card {
  position: relative;
  overflow: hidden;
}
.today-prep-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--blue-soft) 52%, transparent), transparent 28%);
  opacity: .8;
}
.prep-grid {
  display: grid;
  gap: 10px;
}
.prep-tile {
  position: relative;
  min-height: 92px;
  padding: 13px 14px 13px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 95%, transparent), color-mix(in srgb, var(--surface) 94%, var(--surface-2)));
  box-shadow: var(--shadow-small);
  overflow: hidden;
}
.prep-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), transparent 92%);
}
.prep-tile.emphasis::before {
  background: linear-gradient(180deg, var(--blue), transparent 92%);
}
.prep-tile.warning::before {
  background: linear-gradient(180deg, var(--amber), transparent 92%);
}
.prep-tile span,
.prep-tile strong,
.prep-tile small {
  display: block;
}
.prep-tile span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}
.prep-tile strong {
  margin-top: 6px;
  font-size: 15px;
  color: var(--text);
}
.prep-tile small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}
body.light .today-prep-card,
body.light .prep-tile {
  box-shadow: 0 10px 20px rgba(24,40,33,.06), inset 0 1px 0 rgba(255,255,255,.76), inset 0 -1px 0 rgba(17,34,28,.04);
}
body.light .prep-tile {
  border-color: rgba(18, 34, 29, .28);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,244,.98));
}
body.light .prep-tile:hover {
  border-color: rgba(24, 87, 58, .34);
  box-shadow: 0 12px 20px rgba(23,59,42,.08), inset 0 1px 0 rgba(255,255,255,.78);
}
body.light .prep-tile.emphasis {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,247,255,.98));
}
body.light .prep-tile.warning {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,244,232,.98));
}
@media (min-width: 760px) {
  .prep-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* v0.3.3 mobile-first QA + smarter booking */
.slot-check { display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; align-items:center; margin:-4px 0 14px; padding:11px 12px; border:1px solid var(--line); border-radius:15px; background:var(--surface-2); box-shadow:var(--shadow-small); }
.slot-check-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:var(--surface-3); color:var(--muted); }
.slot-check strong,.slot-check small { display:block; }
.slot-check strong { color:var(--text); font-size:13px; }
.slot-check small { margin-top:4px; color:var(--muted); font-size:11.5px; line-height:1.4; }
.slot-check.success { border-color:color-mix(in srgb,var(--accent) 34%,var(--line)); background:linear-gradient(180deg,color-mix(in srgb,var(--accent-soft) 54%,var(--surface)),var(--surface)); }
.slot-check.success .slot-check-icon { background:var(--accent-soft); color:var(--accent); }
.slot-check.warning { border-color:color-mix(in srgb,var(--amber) 38%,var(--line)); background:linear-gradient(180deg,color-mix(in srgb,var(--amber-soft) 60%,var(--surface)),var(--surface)); }
.slot-check.warning .slot-check-icon { background:var(--amber-soft); color:var(--amber); }
.slot-check.danger { border-color:color-mix(in srgb,var(--red) 40%,var(--line)); background:linear-gradient(180deg,color-mix(in srgb,var(--red-soft) 62%,var(--surface)),var(--surface)); }
.slot-check.danger .slot-check-icon { background:var(--red-soft); color:var(--red); }
body.light .slot-check { box-shadow:0 8px 18px rgba(24,40,33,.055),inset 0 1px 0 rgba(255,255,255,.8); }
@media (max-width:959px) {
  .main-content { padding-bottom:calc(var(--nav-height) + 34px + env(safe-area-inset-bottom) + var(--mobile-browser-bottom) + var(--mobile-browser-fallback)); }
  .mobile-header { min-height:60px; backdrop-filter:blur(20px); }
  .mobile-page-intro { margin-top:2px; }
  .page-accent-band,.today-prep-card,.card,.sheet-card { border-radius:20px; }
  .next-card { min-height:auto; }
  .next-card h2 { font-size:clamp(28px,8vw,34px); }
  .next-meta { grid-template-columns:1fr; }
  .next-actions { grid-template-columns:1fr; }
  .quick-strip { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .quick-action { min-height:78px; padding:10px 6px; }
  .day-item { grid-template-columns:58px minmax(0,1fr) auto; gap:9px; padding:12px; }
  .day-main span { white-space:normal; line-height:1.35; }
  .metric-grid { gap:8px; }
  .metric { min-height:96px; }
  .metric strong { font-size:21px; }
  .attention-item { min-height:72px; }
  .diary-mobile-event { min-height:78px; grid-template-columns:54px minmax(0,1fr) auto; }
  .diary-mobile-event .event-badge { display:none; }
  .diary-legend { overflow-x:auto; flex-wrap:nowrap; padding-bottom:3px; scrollbar-width:none; }
  .diary-legend::-webkit-scrollbar { display:none; }
  .legend-chip { flex:0 0 auto; }
  .pupil-row { min-height:78px; }
  .profile-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-tabs { overflow-x:auto; grid-auto-columns:minmax(90px,1fr); scrollbar-width:none; }
  .profile-tabs::-webkit-scrollbar { display:none; }
  .profile-actions button { min-height:58px; }
  .booking-insight { padding:10px; }
  .booking-insight-grid { grid-template-columns:1fr 1fr; }
  .booking-summary { grid-column:1 / -1; }
  .booking-pill { min-height:72px; }
  .field input,.field select,.field textarea { font-size:16px; }
  .sheet-dialog { max-height:calc(100dvh - env(safe-area-inset-top)); }
  .sheet-card { padding-bottom:calc(22px + env(safe-area-inset-bottom)); }
  .button-row > button,.primary-button,.secondary-button,.danger-button { min-height:48px; }
}
@media (max-width:520px) {
  .page-accent-band { padding:9px; }
  .accent-item { min-height:68px; }
  .prep-grid,.mini-overview-strip { grid-template-columns:1fr; }
  .today-layout,.today-stack { gap:11px; }
  .card-pad { padding:14px; }
  .quick-action span:last-child { font-size:10px; }
  .metric { padding:12px; }
  .attention-copy small { font-size:11px; }
  .booking-insight-grid { grid-template-columns:1fr; }
  .booking-summary { grid-column:auto; }
  .slot-check { grid-template-columns:38px minmax(0,1fr); }
  .slot-check-icon { width:38px; height:38px; }
}


/* v0.3.4 light-mode readability polish + slot suggestions */
body.light {
  --line: rgba(20, 37, 31, .18);
  --line-strong: rgba(20, 37, 31, .34);
}

body.light .sidebar,
body.light .mobile-header,
body.light .bottom-nav,
body.light .card,
body.light .next-card,
body.light .quick-action,
body.light .pupil-row,
body.light .diary-mobile-event,
body.light .sheet-card,
body.light .profile-stat,
body.light .attention-item,
body.light .sidebar-profile,
body.light .day-item,
body.light .icon-button,
body.light .secondary-button,
body.light .metric,
body.light .page-accent-band,
body.light .accent-item,
body.light .mini-overview-card,
body.light .prep-tile,
body.light .booking-insight,
body.light .booking-summary,
body.light .booking-pill,
body.light .slot-check,
body.light .slot-suggestions-card,
body.light .segmented,
body.light .search input,
body.light .filter-button,
body.light .pupil-list,
body.light .diary-mobile-list,
body.light .profile-tabs,
body.light .week-grid.enhanced-week-grid {
  border-width: 1.75px;
}
body.light .week-grid.enhanced-week-grid .week-head,
body.light .week-grid.enhanced-week-grid .week-time,
body.light .week-grid.enhanced-week-grid .week-cell,
body.light .pupil-row,
body.light .day-item,
body.light .attention-item,
body.light .metric {
  box-shadow: inset -1px 0 0 rgba(18,34,29,.18), inset 0 -1px 0 rgba(18,34,29,.16);
}
body.light .card-header,
body.light .section-divider,
body.light .profile-tabs,
body.light .sheet-header,
body.light .toolbar,
body.light .diary-date-label {
  border-color: rgba(18,34,29,.22);
}

/* keep large non-clickable panels visually static */
body.light .today-layout .card:hover,
body.light .today-layout .next-card:hover,
body.light .today-layout .metric:hover,
body.light .prep-tile:hover,
body.light .today-prep-card:hover {
  border-color: var(--line-strong);
  transform: none;
  background: unset;
  box-shadow: inherit;
}
body.light .today-layout .metric:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,244,.98));
}
body.light .today-layout .card:hover,
body.light .today-layout .next-card:hover,
body.light .today-prep-card:hover {
  box-shadow: var(--shadow-small), inset 0 1px 0 rgba(255,255,255,.55);
}
body.light .prep-tile:hover {
  box-shadow: 0 10px 20px rgba(24,40,33,.06), inset 0 1px 0 rgba(255,255,255,.76), inset 0 -1px 0 rgba(17,34,28,.04);
}

/* stronger interactive hover only for clickable controls */
body.light .primary-button,
body.light .secondary-button,
body.light .icon-button,
body.light .quick-action,
body.light .day-item,
body.light .attention-item,
body.light .text-button,
body.light .filter-button,
body.light .slot-suggestion,
body.light .nav-item,
body.light .bottom-nav button {
  position: relative;
  overflow: hidden;
}
body.light .primary-button::after,
body.light .secondary-button::after,
body.light .icon-button::after,
body.light .quick-action::after,
body.light .day-item::after,
body.light .attention-item::after,
body.light .text-button::after,
body.light .filter-button::after,
body.light .slot-suggestion::after,
body.light .nav-item::after,
body.light .bottom-nav button::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 4%, rgba(255,255,255,.06) 28%, rgba(47,143,98,.16) 48%, rgba(255,255,255,.14) 58%, transparent 82%);
  transform: translateX(-120%);
  opacity: 0;
  transition: transform .42s ease, opacity .24s ease;
}
body.light .primary-button:hover::after,
body.light .secondary-button:hover::after,
body.light .icon-button:hover::after,
body.light .quick-action:hover::after,
body.light .day-item:hover::after,
body.light .attention-item:hover::after,
body.light .text-button:hover::after,
body.light .filter-button:hover::after,
body.light .slot-suggestion:hover::after,
body.light .nav-item:hover::after,
body.light .bottom-nav button:hover::after,
body.light .nav-item.active::after,
body.light .bottom-nav button.active::after {
  transform: translateX(12%);
  opacity: 1;
}
body.light .primary-button:hover,
body.light .secondary-button:hover,
body.light .icon-button:hover,
body.light .quick-action:hover,
body.light .day-item:hover,
body.light .attention-item:hover,
body.light .text-button:hover,
body.light .filter-button:hover,
body.light .slot-suggestion:hover,
body.light .nav-item:hover,
body.light .bottom-nav button:hover {
  border-color: rgba(19, 84, 56, .55);
  box-shadow: 0 14px 24px rgba(23, 59, 42, .10), inset 0 1px 0 rgba(255,255,255,.8);
}
body.light .primary-button:hover {
  background: linear-gradient(135deg, #41a574 0%, #2f8f62 48%, #236f4d 100%);
  box-shadow: 0 16px 26px rgba(26, 92, 62, .19), inset 0 1px 0 rgba(255,255,255,.15);
}
body.light .secondary-button:hover,
body.light .icon-button:hover,
body.light .quick-action:hover,
body.light .filter-button:hover,
body.light .text-button:hover,
body.light .slot-suggestion:hover,
body.light .day-item:hover,
body.light .attention-item:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(235,245,239,.98));
  color: #164d34;
}
body.light .primary-button:hover,
body.light .secondary-button:hover,
body.light .icon-button:hover,
body.light .quick-action:hover,
body.light .day-item:hover,
body.light .attention-item:hover,
body.light .filter-button:hover,
body.light .slot-suggestion:hover,
body.light .nav-item:hover,
body.light .bottom-nav button:hover {
  transform: translateY(-1px);
}

/* stronger active sidebar gradient with fog */
body.light .nav-item {
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}
body.light .nav-item.active,
body.light .bottom-nav button.active {
  background: linear-gradient(90deg, rgba(47,143,98,.24) 0%, rgba(47,143,98,.14) 52%, rgba(45,111,159,.10) 100%);
  color: #163f2d;
  box-shadow: inset 4px 0 #2f8f62, 0 10px 18px rgba(23,59,42,.08), inset 0 1px 0 rgba(255,255,255,.76);
}
body.light .nav-item.active::before,
body.light .bottom-nav button.active::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 50%, rgba(47,143,98,.14), transparent 34%), radial-gradient(circle at 84% 50%, rgba(45,111,159,.10), transparent 28%);
  filter: blur(6px);
  opacity: .95;
}
body.light .nav-item.active .icon,
body.light .bottom-nav button.active .icon {
  color: #1b563b;
}

.slot-suggestions {
  margin-bottom: 14px;
}
.slot-suggestions-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue-soft) 42%, transparent), transparent 68%), linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--surface-2)), var(--surface));
  box-shadow: var(--shadow-small);
}
.slot-suggestions-copy strong,
.slot-suggestions-copy small {
  display: block;
}
.slot-suggestions-copy small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.slot-suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.slot-suggestion {
  min-width: 112px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.slot-suggestion strong,
.slot-suggestion small {
  display: block;
}
.slot-suggestion strong {
  font-size: 14px;
}
.slot-suggestion small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.slot-suggestion.active {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 55%, var(--surface-raised)), color-mix(in srgb, var(--surface) 95%, var(--surface-2)));
  box-shadow: 0 10px 18px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.08);
}
body.light .slot-suggestions-card,
body.light .slot-suggestion {
  box-shadow: 0 10px 20px rgba(24,40,33,.06), inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(17,34,28,.04);
}
body.light .slot-suggestion.active {
  border-color: rgba(24, 87, 58, .40);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(232,245,238,.98));
}


/* v0.3.5 pupil detail hover + filter emphasis */
.pupil-filters button,
.profile-tabs button,
.profile-actions button {
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}
.pupil-filters button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.filter-label,
.filter-count { display: inline-block; }
.filter-count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.profile-actions button:hover,
.profile-tabs button:hover,
.pupil-filters button:hover {
  transform: translateY(-1px);
}
.profile-actions button:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: var(--shadow-small);
}
.profile-tabs button:hover,
.pupil-filters button:hover {
  background: color-mix(in srgb, var(--surface-3) 82%, var(--surface-2));
  color: var(--text);
}
.profile-tabs button:focus-visible,
.pupil-filters button:focus-visible,
.profile-actions button:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 92%, transparent);
}
.pupil-filters button.active .filter-count,
.profile-tabs button.active .filter-count {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 54%, var(--surface-2));
  color: var(--text);
}

body.light .profile-actions button,
body.light .profile-tabs button,
body.light .pupil-filters button {
  position: relative;
  overflow: hidden;
}
body.light .profile-actions button::after,
body.light .profile-tabs button::after,
body.light .pupil-filters button::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 8%, rgba(255,255,255,.10) 32%, rgba(47,143,98,.16) 48%, rgba(255,255,255,.14) 62%, transparent 88%);
  transform: translateX(-125%);
  opacity: 0;
  transition: transform .4s ease, opacity .22s ease;
}
body.light .profile-actions button:hover::after,
body.light .profile-tabs button:hover::after,
body.light .pupil-filters button:hover::after,
body.light .profile-tabs button.active::after,
body.light .pupil-filters button.active::after {
  transform: translateX(10%);
  opacity: 1;
}
body.light .profile-actions button {
  border-width: 1.6px;
  border-color: rgba(18,34,29,.24);
  background: linear-gradient(180deg, #ffffff 0%, #f4f9f6 100%);
  box-shadow: 0 8px 18px rgba(24,40,33,.05), inset 0 1px 0 rgba(255,255,255,.78);
}
body.light .profile-actions button:hover {
  border-color: rgba(24,87,58,.42);
  background: linear-gradient(180deg, #ffffff 0%, #eef7f2 100%);
  box-shadow: 0 14px 24px rgba(23,59,42,.08), inset 0 1px 0 rgba(255,255,255,.82);
}
body.light .profile-actions button:hover small,
body.light .profile-actions button:hover .icon {
  color: #184d35;
}
body.light .profile-tabs button,
body.light .pupil-filters button {
  border: 1.4px solid transparent;
}
body.light .profile-tabs button:hover,
body.light .pupil-filters button:hover {
  border-color: rgba(24,87,58,.30);
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(237,246,241,.98));
  color: #164d34;
  box-shadow: 0 12px 20px rgba(24,40,33,.06), inset 0 1px 0 rgba(255,255,255,.8);
}
body.light .profile-tabs button.active,
body.light .pupil-filters button.active {
  background: linear-gradient(135deg, rgba(47,143,98,.20) 0%, rgba(47,143,98,.12) 56%, rgba(45,111,159,.08) 100%);
  color: #163f2d;
  border-color: rgba(18,34,29,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 8px 16px rgba(24,40,33,.06);
}
body.light .profile-tabs button.active:hover,
body.light .pupil-filters button.active:hover {
  border-color: rgba(24,87,58,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 10px 18px rgba(24,40,33,.08);
}
body.light .pupil-filters .filter-count {
  border-color: rgba(18,34,29,.20);
  background: rgba(247,250,248,.94);
  color: #4a5d55;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(17,34,28,.04);
}
body.light .pupil-filters button:hover .filter-count,
body.light .profile-tabs button:hover .filter-count {
  border-color: rgba(24,87,58,.32);
  color: #184d35;
}
body.light .pupil-filters button.active .filter-count,
body.light .profile-tabs button.active .filter-count {
  border-color: rgba(24,87,58,.36);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(232,245,238,.96));
  color: #184d35;
}


/* v0.3.6 diary mode emphasis + stronger time contrast */
.planner-insight {
  margin: 10px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.planner-insight-copy { min-width: 0; }
.planner-insight-copy strong,
.planner-insight-copy small,
.planner-label { display: block; }
.planner-label {
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.planner-insight-copy strong { font-size: 15px; }
.planner-insight-copy small { margin-top: 4px; color: var(--muted); }

body.light .toolbar [data-diary-modes] {
  border-color: rgba(18,34,29,.30);
  box-shadow: 0 10px 18px rgba(24,40,33,.06), inset 0 1px 0 rgba(255,255,255,.82), inset 0 -1px 0 rgba(17,34,28,.05);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,247,244,.98));
}
body.light .toolbar [data-diary-modes] button {
  min-height: 42px;
  border: 1.4px solid transparent;
  font-size: 12.5px;
  color: #58685f;
}
body.light .toolbar [data-diary-modes] button.active {
  background: linear-gradient(135deg, rgba(47,143,98,.24) 0%, rgba(47,143,98,.14) 60%, rgba(45,111,159,.10) 100%);
  border-color: rgba(24,87,58,.32);
  color: #153f2d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 18px rgba(24,40,33,.08);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
body.light .toolbar [data-diary-modes] button.active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 16% 50%, rgba(47,143,98,.12), transparent 34%), radial-gradient(circle at 82% 50%, rgba(45,111,159,.08), transparent 28%);
  filter: blur(5px);
  pointer-events: none;
}
body.light .toolbar [data-diary-modes] button:hover:not(.active) {
  border-color: rgba(24,87,58,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(239,246,242,.98));
  color: #184d35;
}

body.light .week-grid.enhanced-week-grid .time-corner span,
body.light .week-grid.enhanced-week-grid .time-corner small {
  color: #406454;
}
body.light .week-grid.enhanced-week-grid .week-time {
  background: linear-gradient(180deg, rgba(247,250,248,.98), rgba(239,245,241,.98));
}
body.light .week-grid.enhanced-week-grid .week-time span {
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(236,244,239,.99));
  border-color: rgba(24,87,58,.28);
  color: #2a5a44;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 6px 12px rgba(23,59,42,.07), inset 3px 0 0 rgba(47,143,98,.22);
}
body.light .week-grid.enhanced-week-grid .week-time.alt span {
  background: linear-gradient(180deg, rgba(252,254,253,.99), rgba(233,243,237,.99));
}
body.light .planner-insight {
  border-width: 1.75px;
  border-color: rgba(18,34,29,.24);
  background: linear-gradient(135deg, rgba(47,143,98,.07), rgba(45,111,159,.03) 40%, rgba(255,255,255,.98) 100%);
  box-shadow: 0 12px 22px rgba(24,40,33,.06), inset 0 1px 0 rgba(255,255,255,.82), inset 0 -1px 0 rgba(17,34,28,.04);
}
body.light .planner-insight .secondary-button {
  border-color: rgba(24,87,58,.24);
}

@media (max-width: 959px) {
  .planner-insight {
    flex-direction: column;
    align-items: stretch;
  }
}


/* v0.3.7 mobile-first QA + post-save continuity */
.finish-saved-hero {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 13px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2) 70%);
  box-shadow: var(--shadow-small);
}
.finish-saved-hero h3 { margin: 0 0 5px; font-size: 19px; }
.finish-saved-hero p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.finish-next-actions { display: grid; gap: 10px; margin: 11px 0; }
.finish-next-plan {
  position: relative;
  padding: 13px 14px 13px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
  overflow: hidden;
}
.finish-next-plan::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 4px;
  border-radius: 99px;
  background: linear-gradient(180deg,var(--accent),transparent 92%);
}
.finish-next-plan.secondary::before { background: linear-gradient(180deg,var(--blue),transparent 92%); }
.finish-next-plan span,.finish-next-plan strong,.finish-next-plan small { display:block; }
.finish-next-plan span { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.09em; font-weight:800; }
.finish-next-plan strong { margin-top:6px; font-size:14px; }
.finish-next-plan small { margin-top:5px; color:var(--muted); font-size:10.5px; line-height:1.4; }
body.light .finish-saved-hero,
body.light .finish-next-plan {
  border-color:rgba(18,34,29,.30);
  box-shadow:0 10px 20px rgba(24,40,33,.055),inset 0 1px 0 rgba(255,255,255,.8);
}
body.light .finish-saved-hero { background:linear-gradient(135deg,rgba(47,143,98,.11),rgba(255,255,255,.98) 70%); }

@media (max-width: 959px) {
  /* keep the top of each page compact and thumb-friendly */
  .main-content { padding-left:14px; padding-right:14px; }
  .mobile-page-intro h1 { max-width:18ch; line-height:1.03; }
  .mobile-header-actions .icon-button { width:44px; height:44px; }
  .quick-action,.day-item,.attention-item,.pupil-row,.diary-mobile-event { -webkit-tap-highlight-color:transparent; }
  .profile-next-context { position:sticky; top:0; z-index:3; backdrop-filter:blur(16px); }
  .profile-sticky-actions { bottom:calc(-8px + env(safe-area-inset-bottom)); padding-bottom:calc(7px + env(safe-area-inset-bottom)); }
  .finish-action-bar {
    position:sticky;
    z-index:5;
    bottom:calc(-10px + env(safe-area-inset-bottom));
    margin-left:-5px !important;
    margin-right:-5px !important;
    padding:12px 5px calc(8px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--surface) 93%,transparent) 24%,var(--surface) 56%);
    backdrop-filter:blur(18px);
  }
  .finish-action-bar > button { min-height:50px; }
  .slot-suggestions-list { flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:4px; scrollbar-width:none; }
  .slot-suggestions-list::-webkit-scrollbar { display:none; }
  .slot-suggestion { flex:0 0 124px; scroll-snap-align:start; }
}

@media (max-width: 520px) {
  /* turn dense summary cards into short horizontal carousels instead of a very long page */
  .page-accent-band {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:9px;
    padding:9px;
    scrollbar-width:none;
  }
  .page-accent-band::-webkit-scrollbar { display:none; }
  .page-accent-band .accent-item {
    flex:0 0 min(78vw,290px);
    scroll-snap-align:start;
  }
  .today-prep-card .prep-grid {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    gap:9px;
    padding-bottom:3px;
    scrollbar-width:none;
  }
  .today-prep-card .prep-grid::-webkit-scrollbar { display:none; }
  .today-prep-card .prep-tile {
    flex:0 0 min(80vw,300px);
    scroll-snap-align:start;
  }
  .profile-next-context { grid-template-columns:minmax(0,1fr) 58px; padding:12px; }
  .profile-progress-orb { width:58px; height:58px; }
  .profile-actions-v2 { gap:6px; }
  .profile-actions-v2 button { min-height:60px; padding:7px 4px; }
  .profile-stats { gap:7px; }
  .profile-stat { min-height:72px; padding:10px; }
  .profile-tabs { top:0; margin-top:9px; }
  .capture-prompts { grid-template-columns:1fr 1fr; }
  .record-panel-v2 { padding:14px; }
  .finish-context-card { grid-template-columns:1fr; }
  .finish-context-card > .pill { justify-self:start; }
  .ai-review-header { display:grid; grid-template-columns:1fr; }
  .ai-review-header > .pill { justify-self:start; }
  .suggestion { grid-template-columns:minmax(0,1fr) 48px; gap:8px; }
  .finish-review-actions,.finish-saved-actions { grid-template-columns:1fr 1.35fr; display:grid; gap:8px; }
  .finish-action-bar .text-button { border:1px solid var(--line); border-radius:13px; background:var(--surface-2); }
  .finish-saved-hero { grid-template-columns:48px minmax(0,1fr); padding:13px; }
  .finish-saved-hero .finish-success-icon { width:48px; height:48px; }
}

@media (max-width: 380px) {
  .quick-strip { grid-template-columns:1fr 1fr 1fr; }
  .quick-action { min-height:72px; }
  .profile-actions-v2 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .profile-actions-v2 small { font-size:8.5px; }
  .finish-review-actions,.finish-saved-actions { grid-template-columns:1fr; }
}


/* v0.3.8 stronger diary selection + Highway Code reader foundation */
body.light .toolbar [data-diary-modes] button.active {
  background: linear-gradient(135deg, rgba(31,105,70,.30) 0%, rgba(47,143,98,.20) 54%, rgba(45,111,159,.12) 100%);
  border-color: rgba(18,74,49,.48);
  color: #103a28;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 12px 20px rgba(20,72,49,.10), inset 4px 0 0 rgba(31,105,70,.34);
}
body.light .week-grid.enhanced-week-grid .week-time {
  background: linear-gradient(180deg, rgba(241,247,243,.99), rgba(228,239,232,.99));
}
body.light .week-grid.enhanced-week-grid .week-time span {
  min-width: 52px;
  min-height: 34px;
  border-width: 1.7px;
  border-color: rgba(18,74,49,.34);
  color: #214f3a;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(226,239,231,.99));
  box-shadow: inset 4px 0 0 rgba(31,105,70,.28), 0 7px 14px rgba(20,72,49,.08), inset 0 1px 0 rgba(255,255,255,.88);
}
body.light .week-grid.enhanced-week-grid .time-corner {
  background: linear-gradient(180deg, rgba(231,241,235,.98), rgba(220,233,225,.98));
  box-shadow: inset -1px 0 0 rgba(18,74,49,.20), inset 0 -2px 0 rgba(18,74,49,.18);
}
body.light .week-grid.enhanced-week-grid .time-corner span,
body.light .week-grid.enhanced-week-grid .time-corner small {
  color: #214f3a;
  font-weight: 800;
}

.code-status-strip {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 66%, transparent), transparent 58%), var(--surface);
  box-shadow: var(--shadow-small);
}
.code-status-strip > div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
}
.code-status-strip span,
.code-status-strip strong,
.code-status-strip small { display: block; }
.code-status-strip span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.code-status-strip strong { margin-top: 5px; }
.code-status-strip small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.code-source-link { align-self: center; justify-self: stretch; text-decoration: none; }
.highway-reader-shell { display: grid; gap: 14px; }
.code-toc { padding: 12px; }
.code-search { margin-bottom: 10px; }
.code-search input { width: 100%; }
.code-mode-switch { margin-bottom: 10px; }
.code-section-list { display: grid; gap: 7px; max-height: 610px; overflow: auto; padding-right: 3px; }
.code-section-button {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.code-section-button strong,
.code-section-button small { display: block; }
.code-section-button small { margin-top: 4px; color: var(--muted); font-size: 10.5px; }
.code-section-button.active { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: linear-gradient(90deg, var(--accent-soft), var(--surface-2)); }
.code-reader { overflow: hidden; }
.code-reader-toolbar {
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.code-reader-tools { display: flex; align-items: center; gap: 7px; }
.code-reader-tools:last-child { justify-content: flex-end; }
.code-zoom,
.code-page-indicator { color: var(--muted); font-size: 11px; font-weight: 750; }
.code-page-stage { padding: 18px; background: linear-gradient(180deg, var(--bg-soft), color-mix(in srgb, var(--bg) 88%, #000)); overflow: auto; }
.code-paper {
  width: min(760px, 100%);
  min-height: 760px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 54px);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 5px;
  background: #fff;
  color: #17221d;
  box-shadow: 0 22px 54px rgba(0,0,0,.22);
}
.code-paper-header,
.code-paper footer { display: flex; justify-content: space-between; gap: 12px; color: #64736b; font-size: 10px; }
.code-paper-header { padding-bottom: 14px; border-bottom: 1px solid #dce4df; }
.code-paper h2 { margin: 14px 0 10px; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.04em; }
.code-lead { color: #44544c; font-size: 15px; line-height: 1.65; }
.code-rule-card {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #cfdad3;
  border-left: 5px solid #2f8f62;
  border-radius: 12px;
  background: #f7faf8;
}
.code-rule-card.must { border-left-color: #9d6b12; background: #fcf8ef; }
.code-rule-card span { color: #5d6f66; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.code-rule-card h3 { margin: 7px 0; }
.code-rule-card p { margin: 0; color: #405149; line-height: 1.55; }
.code-legal-note { margin-top: 22px; padding: 16px; border-radius: 12px; background: #eef4f0; }
.code-legal-note p { margin: 6px 0 0; color: #42534a; line-height: 1.55; }
.code-paper footer { margin-top: 34px; padding-top: 14px; border-top: 1px solid #dce4df; }
body.light .code-status-strip,
body.light .code-status-strip > div,
body.light .code-toc,
body.light .code-reader,
body.light .code-section-button { border-color: rgba(18,34,29,.28); box-shadow: 0 10px 20px rgba(24,40,33,.05), inset 0 1px 0 rgba(255,255,255,.78); }
body.light .code-section-button:hover { border-color: rgba(24,87,58,.38); background: linear-gradient(180deg,#fff,#eef7f2); }
body.light .code-section-button.active { border-color: rgba(24,87,58,.44); background: linear-gradient(90deg,rgba(47,143,98,.18),rgba(45,111,159,.07),#f5f8f6); }
@media (min-width: 760px) {
  .code-status-strip { grid-template-columns: 1fr 1fr auto; align-items: stretch; }
  .highway-reader-shell { grid-template-columns: minmax(250px,.72fr) minmax(0,2fr); }
}
@media (max-width: 759px) {
  .code-section-list { max-height: 260px; }
  .code-reader-toolbar { grid-template-columns: 1fr auto; }
  .code-page-indicator { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .code-page-stage { padding: 10px; }
  .code-paper { min-height: 620px; padding: 22px 18px; }
  .code-paper footer { flex-direction: column; }
}


/* v0.3.9 bundled dual-document PDF readers */
.reader-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  min-width: 260px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.reader-switch button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}
.reader-switch button.active {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--blue-soft) 45%, var(--surface-3)));
  color: var(--text);
  box-shadow: var(--shadow-small);
}
.code-status-strip.signs-accent {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue-soft) 72%, transparent), transparent 58%), var(--surface);
}
.reader-search-note {
  margin: -2px 2px 10px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}
.reader-page-chip {
  min-width: 34px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.pdf-reader-card { min-width: 0; }
.pdf-reader-toolbar { grid-template-columns: minmax(0,1fr) minmax(160px,.72fr) minmax(0,1fr); }
.reader-page-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}
.reader-page-control input {
  width: 62px;
  min-height: 38px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  text-align: center;
  font-weight: 800;
}
.reader-current-section { min-width: 0; text-align: center; }
.reader-current-section strong,
.reader-current-section small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reader-current-section strong { font-size: 12px; }
.reader-current-section small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.reader-zoom-select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text);
}
.reader-open-link { text-decoration: none; }
.pdf-frame-wrap {
  position: relative;
  min-height: 760px;
  background: #252a28;
}
.pdf-reader-frame {
  display: block;
  width: 100%;
  height: 78vh;
  min-height: 760px;
  border: 0;
  background: #333;
}
.reader-source-note {
  display: grid;
  gap: 10px;
  padding: 13px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.reader-source-note > div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.reader-source-note strong,
.reader-source-note p { display: block; }
.reader-source-note p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
body.light .reader-switch,
body.light .reader-page-chip,
body.light .reader-page-control input,
body.light .reader-zoom-select,
body.light .reader-source-note > div {
  border-color: rgba(18,34,29,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 14px rgba(24,40,33,.045);
}
body.light .reader-switch button.active {
  border-color: rgba(24,87,58,.38);
  background: linear-gradient(135deg, rgba(47,143,98,.20), rgba(45,111,159,.09), rgba(255,255,255,.94));
}
@media (min-width: 760px) {
  .reader-source-note { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 959px) {
  .document-reader-shell { grid-template-columns: 1fr; }
  .code-section-list { max-height: 250px; }
  .pdf-reader-toolbar { grid-template-columns: 1fr auto; }
  .reader-current-section { grid-column: 1 / -1; grid-row: 2; padding-top: 3px; }
  .pdf-frame-wrap,
  .pdf-reader-frame { min-height: 66vh; height: 66vh; }
}
@media (max-width: 620px) {
  .code-status-strip { padding: 10px; }
  .reader-switch { min-width: 0; width: 100%; }
  .pdf-reader-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .pdf-reader-toolbar .code-reader-tools { flex: 1 1 auto; }
  .pdf-reader-toolbar .code-reader-tools:last-child { justify-content: flex-end; }
  .reader-current-section { order: 3; flex: 1 0 100%; }
  .reader-page-control span:first-child { display: none; }
  .pdf-frame-wrap,
  .pdf-reader-frame { min-height: 62vh; height: 62vh; }
}


/* v0.4.0 compliance-safe document readers */
.pdf-frame-wrap.empty {
  min-height: 580px;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at top, color-mix(in srgb, var(--accent-soft) 44%, transparent), transparent 34%), var(--surface-2);
}
.reader-compliance-state {
  width: min(680px, 100%);
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), var(--surface));
  box-shadow: var(--shadow);
  text-align: center;
}
.reader-compliance-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  padding: 15px;
  border-radius: 18px;
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-small);
}
.reader-compliance-state h2 { margin: 4px 0 10px; }
.reader-compliance-state > p:not(.eyebrow):not(.reader-local-file) { color: var(--muted); line-height: 1.6; }
.reader-compliance-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}
.reader-file-button { cursor: pointer; }
.reader-legal-note {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
  text-align: left;
}
.reader-legal-note p { margin-top: 6px; color: var(--muted); line-height: 1.5; }
.reader-local-file { margin-top: 14px; color: var(--accent); font-weight: 800; }
.pdf-reader-toolbar.disabled { opacity: .72; }
.pdf-reader-toolbar :disabled { cursor: not-allowed; opacity: .55; }
body.light .reader-compliance-state,
body.light .reader-legal-note {
  border-color: rgba(18,34,29,.30);
  box-shadow: 0 14px 28px rgba(24,40,33,.07), inset 0 1px 0 rgba(255,255,255,.8);
}
@media (max-width: 720px) {
  .pdf-frame-wrap.empty { min-height: 0; padding: 12px; }
  .reader-compliance-state { padding: 18px; }
  .reader-compliance-actions { display: grid; }
  .reader-compliance-actions > * { width: 100%; }
}

/* v0.4.1 read-only rendered document readers */
.readonly-reader-card {
  min-width: 0;
  overflow: hidden;
}
.readonly-reader-stage {
  position: relative;
  min-height: 68vh;
  max-height: 74vh;
  padding: 22px;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent-soft) 48%, transparent), transparent 34%),
    #07120f;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x pan-y;
}
.readonly-reader-stage:fullscreen {
  max-height: none;
  height: 100vh;
  padding: 28px;
  background: #06100d;
}
.readonly-page-surface {
  position: relative;
  width: min(100%, 940px);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 22px 32px rgba(0,0,0,.34));
}
.readonly-page-image {
  display: block;
  max-width: none;
  height: auto;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.12);
  background: #fff;
}
.reader-protection-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
}
.reader-view-only-badge {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  color: rgba(255,255,255,.84);
  background: rgba(5,17,13,.68);
  backdrop-filter: blur(9px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}
.readonly-reader-stage.zoom-fit-width .readonly-page-surface,
.readonly-reader-stage.zoom-fit-width .readonly-page-image {
  width: min(100%, 940px);
}
.readonly-reader-stage.zoom-fit-page {
  align-items: center;
}
.readonly-reader-stage.zoom-fit-page .readonly-page-image {
  width: auto;
  max-width: 100%;
  max-height: calc(74vh - 44px);
}
.readonly-reader-stage.zoom-75 .readonly-page-image { width: 75%; }
.readonly-reader-stage.zoom-100 .readonly-page-image { width: min(100%, 893px); }
.readonly-reader-stage.zoom-125 .readonly-page-image { width: 1116px; }
.readonly-reader-stage.zoom-150 .readonly-page-image { width: 1340px; }

.reader-page-results {
  display: grid;
  gap: 7px;
  max-height: 270px;
  margin: 8px 0 12px;
  overflow: auto;
  padding-right: 3px;
}
.reader-search-result {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 9px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.reader-search-result:hover,
.reader-search-result:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 36%, var(--surface-2));
  box-shadow: var(--shadow-small);
}
.reader-search-result strong,
.reader-search-result small { display: block; }
.reader-search-result small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.reader-search-empty {
  margin: 8px 0 12px;
  padding: 11px 12px;
  border: 1px dashed var(--line);
  border-radius: 13px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 11px;
}

body.light .readonly-reader-stage {
  background:
    radial-gradient(circle at 50% 0%, rgba(47,143,98,.11), transparent 34%),
    linear-gradient(180deg, #dbe5df, #cfdad4);
  border-color: rgba(18,34,29,.24);
}
body.light .readonly-page-surface {
  filter: drop-shadow(0 22px 32px rgba(24,40,33,.20));
}
body.light .reader-search-result,
body.light .reader-search-empty {
  border-color: rgba(18,34,29,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
body.light .reader-search-result:hover,
body.light .reader-search-result:focus-visible {
  border-color: rgba(24,87,58,.38);
  background: linear-gradient(180deg, #ffffff, #edf6f1);
  box-shadow: 0 10px 18px rgba(24,40,33,.07), inset 0 1px 0 rgba(255,255,255,.82);
}

@media (max-width: 959px) {
  .readonly-reader-stage {
    min-height: 64vh;
    max-height: 68vh;
    padding: 10px;
  }
  .readonly-reader-stage.zoom-fit-page .readonly-page-image {
    max-height: calc(68vh - 20px);
  }
  .reader-view-only-badge {
    right: 7px;
    bottom: 7px;
    padding: 6px 8px;
  }
}

@media (max-width: 620px) {
  .readonly-reader-stage {
    min-height: 58vh;
    max-height: 62vh;
    padding: 6px;
  }
  .readonly-reader-stage.zoom-fit-page .readonly-page-image {
    max-height: calc(62vh - 12px);
  }
  .reader-page-results { max-height: 220px; }
  .readonly-reader-card .pdf-reader-toolbar {
    position: sticky;
    top: 0;
    z-index: 4;
  }
}

/* v0.4.2 Highway Code-only reference status */
.reader-version-status {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  min-width: 0;
}
.reader-version-status > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.reader-version-status > strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}
.reader-official-link {
  margin-top: 3px;
  padding: 0;
  min-height: auto;
  text-decoration: none;
}
body.light .reader-version-status {
  padding: 10px 12px;
  border: 1.5px solid rgba(18,34,29,.24);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,246,242,.98));
  box-shadow: 0 8px 16px rgba(24,40,33,.05), inset 0 1px 0 rgba(255,255,255,.8);
}
@media (max-width: 760px) {
  .reader-version-status {
    width: 100%;
  }
}

/* v0.4.4 original interactive PDF + source-grounded Highway Code AI */
.pdf-ai-layout {
  display: grid;
  gap: 14px;
  align-items: start;
}
.native-pdf-reader-card {
  min-width: 0;
  overflow: hidden;
}
.native-toolbar {
  position: relative;
  z-index: 2;
}
.native-pdf-stage {
  min-height: 74vh;
  height: 74vh;
  background: #171d20;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.native-pdf-stage:fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  background: #101517;
}
.native-pdf-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #f2f2f2;
}
.highway-ai-panel {
  position: sticky;
  top: 20px;
  padding: 16px;
  min-width: 0;
}
.highway-ai-panel .card-header {
  align-items: flex-start;
}
.highway-ai-panel .card-header > .icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
}
.highway-ai-search {
  margin: 13px 0 10px;
}
.highway-ai-modes {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.highway-ai-modes button {
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
}
.highway-ai-modes button:hover,
.highway-ai-modes button.active {
  color: var(--text);
  border-color: color-mix(in srgb,var(--accent) 30%,var(--line));
  background: linear-gradient(180deg,color-mix(in srgb,var(--accent-soft) 56%,var(--surface-raised)),var(--surface));
}
#highwayAiResult {
  margin-top: 12px;
}
.highway-ai-empty,
.highway-ai-answer {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg,color-mix(in srgb,var(--surface-raised) 94%,transparent),var(--surface));
}
.highway-ai-empty {
  color: var(--muted);
  line-height: 1.5;
  font-size: 12px;
}
.highway-ai-answer > p {
  margin: 10px 0;
  line-height: 1.55;
  color: var(--text);
  font-size: 13px;
}
.highway-ai-sources {
  display: grid;
  gap: 7px;
}
.highway-ai-sources button,
.highway-ai-topic-list button {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.highway-ai-sources button:hover,
.highway-ai-topic-list button:hover {
  border-color: color-mix(in srgb,var(--accent) 40%,var(--line));
  background: color-mix(in srgb,var(--accent-soft) 38%,var(--surface-2));
}
.highway-ai-sources strong,
.highway-ai-sources small,
.highway-ai-topic-list strong,
.highway-ai-topic-list small {
  display: block;
}
.highway-ai-sources small,
.highway-ai-topic-list small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
  font-size: 10.5px;
}
.highway-ai-disclaimer {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.45;
}
.highway-ai-topic-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
  margin-top: 12px;
}
.highway-review-reference {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.highway-review-reference:last-child {
  border-bottom: 0;
}
.highway-review-reference > span:first-child strong,
.highway-review-reference > span:first-child small {
  display: block;
}
.highway-review-reference > span:first-child small {
  margin-top: 4px;
  color: var(--muted);
}
.highway-reference-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.highway-reference-actions > button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--accent);
  font-weight: 800;
  cursor: pointer;
}
.highway-reference-actions > button:hover {
  border-color: color-mix(in srgb,var(--accent) 40%,var(--line));
  background: var(--accent-soft);
}
body.light .native-pdf-reader-card,
body.light .highway-ai-panel,
body.light .highway-ai-empty,
body.light .highway-ai-answer,
body.light .highway-ai-sources button,
body.light .highway-ai-topic-list button,
body.light .highway-ai-modes {
  border-color: rgba(18,34,29,.27);
  box-shadow: 0 10px 22px rgba(24,40,33,.055),inset 0 1px 0 rgba(255,255,255,.78);
}
body.light .highway-ai-modes button.active {
  background: linear-gradient(135deg,rgba(47,143,98,.20),rgba(45,111,159,.08));
  color: #163f2d;
}
@media (min-width: 1180px) {
  .pdf-ai-layout {
    grid-template-columns: minmax(0,2.3fr) minmax(300px,.85fr);
  }
}
@media (max-width: 1179px) {
  .highway-ai-panel {
    position: static;
  }
  .pdf-ai-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .native-pdf-stage {
    height: 68vh;
    min-height: 68vh;
  }
  .native-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .native-toolbar .reader-current-section {
    order: 3;
    flex: 1 0 100%;
  }
  .highway-ai-topic-list {
    grid-template-columns: 1fr;
  }
  .highway-review-reference {
    align-items: flex-start;
    flex-direction: column;
  }
  .highway-reference-actions {
    width: 100%;
    justify-content: space-between;
  }
}

.highway-ai-assign {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.highway-ai-assign label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.highway-ai-assign select {
  width: 100%;
}
.pupil-highway-references {
  margin-top: 12px;
}
.pupil-highway-references > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.pupil-highway-references > button:last-child {
  border-bottom: 0;
}
.pupil-highway-references > button strong,
.pupil-highway-references > button small {
  display: block;
}
.pupil-highway-references > button small {
  margin-top: 4px;
  color: var(--muted);
}
.pupil-highway-references > button:hover {
  color: var(--accent);
}
body.light .highway-ai-assign {
  border-color: rgba(18,34,29,.27);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}


/* v0.4.5 exact contents drawer and multi-page quick preview */
.reader-browse-button { white-space: nowrap; }
.reader-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 119;
  background: rgba(1, 10, 12, .54);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.reader-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.reader-drawer {
  position: fixed;
  z-index: 120;
  inset: 0 auto 0 0;
  width: min(450px, 94vw);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 97%, transparent), var(--surface));
  border-right: 1px solid var(--line-strong);
  box-shadow: 28px 0 70px rgba(0,0,0,.32);
  transform: translateX(-104%);
  visibility: hidden;
  transition: transform .26s ease, visibility .26s step-end;
}
.reader-drawer.open { transform: translateX(0); visibility: visible; transition: transform .26s ease, visibility 0s; }
.reader-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: max(20px, env(safe-area-inset-top)) 20px 16px;
  border-bottom: 1px solid var(--line);
}
.reader-drawer-header h2 { margin: 3px 0 0; }
.reader-drawer-header small { display: block; margin-top: 5px; color: var(--muted); }
.reader-drawer-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 14px 16px 10px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}
.reader-drawer-tabs button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}
.reader-drawer-tabs button.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 74%, var(--surface-raised)), var(--surface-raised));
  box-shadow: var(--shadow-small);
}
.reader-drawer-pane { display: none; min-height: 0; flex: 1; overflow: auto; padding: 0 16px max(20px, env(safe-area-inset-bottom)); }
.reader-drawer-pane.active { display: block; }
.reader-toc-search { position: sticky; top: 0; z-index: 2; margin: 0 0 10px; padding-top: 6px; background: linear-gradient(180deg, var(--surface) 82%, transparent); }
.reader-toc-group {
  padding: 15px 6px 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.reader-toc-list { padding-bottom: 16px; }
.reader-toc-item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background .17s ease, border-color .17s ease, transform .17s ease, box-shadow .17s ease;
}
.reader-toc-item + .reader-toc-item { margin-top: 4px; }
.reader-toc-item strong,
.reader-toc-item small { display: block; }
.reader-toc-item strong { font-size: 12.5px; line-height: 1.35; }
.reader-toc-item small { margin-top: 4px; color: var(--muted); font-size: 10.5px; }
.reader-toc-item:hover,
.reader-toc-item:focus-visible {
  outline: none;
  transform: translateX(2px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 44%, var(--surface-2));
}
.reader-toc-item.active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 76%, var(--surface-2)), var(--surface-2));
  box-shadow: inset 3px 0 var(--accent), var(--shadow-small);
}
.reader-toc-page {
  min-width: 34px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: var(--surface-raised);
  font-size: 10.5px;
  font-weight: 900;
}
.reader-preview-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 12px;
  background: linear-gradient(180deg, var(--surface) 80%, transparent);
}
.reader-preview-toolbar strong,
.reader-preview-toolbar small { display: block; }
.reader-preview-toolbar small { margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.reader-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  padding-bottom: 20px;
}
.reader-thumbnail {
  position: relative;
  padding: 6px 6px 8px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-small);
  transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease;
}
.reader-thumbnail:hover,
.reader-thumbnail:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  box-shadow: 0 13px 24px rgba(0,0,0,.18);
}
.reader-thumbnail.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow-small);
}
.reader-thumbnail-image {
  display: block;
  aspect-ratio: 500 / 710;
  overflow: hidden;
  border-radius: 7px;
  background: #fff;
}
.reader-thumbnail-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.reader-thumbnail-label { display: block; padding-top: 6px; text-align: center; color: var(--muted); font-size: 10.5px; font-weight: 900; }
.reader-thumbnail.active .reader-thumbnail-label { color: var(--accent); }
body.light .reader-drawer {
  background: linear-gradient(180deg, #fbfcfb, #eef4f0);
  border-right-color: rgba(18,34,29,.32);
  box-shadow: 28px 0 64px rgba(24,40,33,.20);
}
body.light .reader-drawer-tabs,
body.light .reader-toc-page,
body.light .reader-thumbnail {
  border-color: rgba(18,34,29,.25);
}
body.light .reader-toc-item.active {
  background: linear-gradient(90deg, rgba(47,143,98,.17), rgba(255,255,255,.97));
}
@media (max-width: 620px) {
  .reader-browse-button { padding-inline: 10px; }
  .reader-drawer { width: 100%; max-width: none; }
  .reader-drawer-header { padding-inline: 16px; }
  .reader-thumbnail-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
  .reader-drawer-pane { padding-inline: 12px; }
}


/* v0.4.6 reliable native PDF navigation */
.native-pdf-stage { position: relative; }
.reader-navigation-feedback {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 18px;
  width: min(360px, calc(100% - 28px));
  min-height: 76px;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: 0 18px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -10px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility .18s step-end;
  pointer-events: none;
}
.reader-navigation-feedback.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.reader-navigation-feedback img {
  width: 52px;
  height: 58px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.reader-navigation-feedback strong,
.reader-navigation-feedback small { display: block; }
.reader-navigation-feedback strong { font-size: 13px; color: var(--text); }
.reader-navigation-feedback small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.reader-toc-item,
.reader-thumbnail { touch-action: manipulation; }
.reader-toc-item:active,
.reader-thumbnail:active { transform: scale(.985); }
body.light .reader-navigation-feedback {
  border-color: rgba(24,87,58,.36);
  background: rgba(251,253,252,.96);
  box-shadow: 0 18px 36px rgba(24,40,33,.15), inset 0 1px 0 rgba(255,255,255,.86);
}

/* v0.4.7 Highway Code reading library and direct lesson-plan references */
.reader-drawer-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.reader-drawer-tabs button {
  min-width: 0;
  padding-inline: 8px;
  font-size: 11px;
}
.reader-drawer-tabs button .icon {
  flex: 0 0 auto;
}
.reader-saved-list {
  display: grid;
  gap: 18px;
  padding-bottom: 22px;
}
.reader-saved-section {
  display: grid;
  gap: 7px;
}
.reader-saved-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.reader-saved-heading span {
  min-width: 25px;
  height: 23px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 10px;
}
.reader-saved-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 94%, transparent), var(--surface-2));
  overflow: hidden;
  box-shadow: var(--shadow-small);
}
.reader-saved-row.active {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  box-shadow: inset 3px 0 var(--accent), var(--shadow-small);
}
.reader-saved-main {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.reader-saved-main strong,
.reader-saved-main small {
  display: block;
}
.reader-saved-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.reader-saved-main small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10.5px;
}
.reader-saved-main:hover,
.reader-saved-main:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
}
.reader-saved-remove {
  width: 43px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.reader-saved-remove:hover,
.reader-saved-remove:focus-visible {
  outline: none;
  color: var(--red);
  background: var(--red-soft);
}
.reader-saved-remove .icon {
  width: 16px;
  height: 16px;
}
.reader-saved-empty {
  padding: 15px;
  border: 1px dashed var(--line-strong);
  border-radius: 13px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  font-size: 11.5px;
  line-height: 1.5;
}
.reader-current-page-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue-soft) 35%, transparent), color-mix(in srgb, var(--surface-2) 94%, transparent));
}
.reader-current-page-card > div {
  min-width: 0;
}
.reader-current-page-card span,
.reader-current-page-card strong,
.reader-current-page-card small {
  display: block;
}
.reader-current-page-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.reader-current-page-card strong {
  margin-top: 4px;
  font-size: 14px;
}
.reader-current-page-card small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reader-current-page-card button.active,
#readerBookmark.active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface-2));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}
.highway-assign-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
body.light .reader-saved-row,
body.light .reader-current-page-card,
body.light .reader-saved-heading span {
  border-color: rgba(18, 34, 29, .27);
  box-shadow: 0 9px 18px rgba(24,40,33,.055), inset 0 1px 0 rgba(255,255,255,.78);
}
body.light .reader-saved-row.active {
  border-color: rgba(24,87,58,.42);
  box-shadow: inset 3px 0 #2f8f62, 0 10px 20px rgba(24,40,33,.07), inset 0 1px 0 rgba(255,255,255,.78);
}
body.light .reader-current-page-card {
  background: linear-gradient(135deg, rgba(45,111,159,.08), rgba(255,255,255,.98));
}
@media (max-width: 620px) {
  .reader-drawer-tabs {
    gap: 5px;
    margin-inline: 12px;
  }
  .reader-drawer-tabs button {
    min-height: 40px;
    gap: 5px;
    padding-inline: 5px;
    font-size: 10px;
  }
  .reader-drawer-tabs button .icon {
    width: 15px;
    height: 15px;
  }
  .reader-current-page-card {
    align-items: stretch;
    flex-direction: column;
  }
  .reader-current-page-card button {
    width: 100%;
  }
  .highway-assign-actions {
    grid-template-columns: 1fr;
  }
}


/* v0.4.8 grounded lesson materials + pupil resources */
.highway-ai-answer-head {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.highway-ai-source {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.highway-ai-source.selected {
  border-color: color-mix(in srgb,var(--accent) 50%,var(--line));
  background: linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 65%,var(--surface-2)),color-mix(in srgb,var(--blue-soft) 30%,var(--surface-2)));
  box-shadow: 0 10px 20px rgba(0,0,0,.11), inset 0 1px 0 rgba(255,255,255,.05);
}
.highway-ai-source .highway-source-open {
  width: 100%;
  padding: 5px 6px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.highway-source-open strong,
.highway-source-open small { display:block; }
.highway-source-open small { margin-top:4px; color:var(--muted); line-height:1.4; font-size:10.5px; }
.highway-source-use {
  align-self: center;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.highway-ai-source.selected .highway-source-use {
  border-color: color-mix(in srgb,var(--accent) 46%,var(--line));
  background: var(--accent-soft);
  color: var(--text);
}
.highway-material-builder {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg,color-mix(in srgb,var(--blue-soft) 24%,var(--surface)),var(--surface));
}
.highway-material-builder h3 { margin: 3px 0 0; font-size: 14px; }
.highway-material-fields {
  display: grid;
  gap: 8px;
  margin-top: 11px;
}
.highway-material-fields label > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
}
.highway-material-fields select {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-raised);
  color: var(--text);
}
.highway-material-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.highway-material-empty {
  margin-top: 10px;
  padding: 11px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.highway-material-empty.success {
  border-style: solid;
  border-color: color-mix(in srgb,var(--accent) 42%,var(--line));
  background: var(--accent-soft);
  color: var(--text);
}
.highway-material-preview-card {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb,var(--accent) 32%,var(--line));
  border-radius: 13px;
  background: var(--surface-raised);
}
.highway-material-preview-card h4 { margin: 8px 0 0; font-size: 13px; }
.highway-material-preview-card p { margin: 10px 0 0; color: var(--muted); line-height: 1.55; font-size: 11.5px; }

.resource-summary-strip {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.resource-summary-strip > div {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.resource-summary-strip span,
.resource-summary-strip strong { display:block; }
.resource-summary-strip span { color:var(--muted); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; }
.resource-summary-strip strong { margin-top:5px; font-size:18px; }
.pupil-resource-list { display:grid; gap:9px; margin-top:10px; }
.pupil-resource-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-2);
}
.pupil-resource-card.completed { opacity:.78; }
.pupil-resource-card h4 { margin:8px 0 0; font-size:13px; }
.pupil-resource-card header small { display:block; margin-top:5px; color:var(--muted); font-size:10.5px; }
.pupil-resource-card > p { margin:10px 0 0; color:var(--muted); line-height:1.55; font-size:11.5px; }
.pupil-resource-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.pupil-resource-reference {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
  border-bottom:1px solid var(--line);
}
.pupil-resource-reference:last-child { border-bottom:0; }
.pupil-resource-reference > button:first-child {
  min-height:54px;
  padding:9px 3px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}
.pupil-resource-reference strong,
.pupil-resource-reference small { display:block; }
.pupil-resource-reference small { margin-top:4px; color:var(--muted); font-size:10px; }
.profile-tabs { grid-template-columns: repeat(5,minmax(0,1fr)); }

body.light .highway-ai-source,
body.light .highway-material-builder,
body.light .highway-material-preview-card,
body.light .resource-summary-strip > div,
body.light .pupil-resource-card {
  border-color: rgba(18,34,29,.27);
  box-shadow: 0 10px 20px rgba(24,40,33,.055), inset 0 1px 0 rgba(255,255,255,.78);
}
body.light .highway-ai-source.selected {
  border-color: rgba(24,87,58,.40);
  background: linear-gradient(135deg,rgba(47,143,98,.12),rgba(45,111,159,.07),rgba(255,255,255,.98));
}
@media (min-width:700px) {
  .highway-material-fields { grid-template-columns:1fr 1fr; }
}
@media (max-width:700px) {
  .highway-ai-source { grid-template-columns:1fr; }
  .highway-source-use { width:100%; }
  .highway-material-actions { grid-template-columns:1fr; }
  .resource-summary-strip { overflow-x:auto; grid-template-columns:repeat(3,minmax(110px,1fr)); scrollbar-width:none; }
  .resource-summary-strip::-webkit-scrollbar { display:none; }
  .profile-tabs { display:flex; overflow-x:auto; }
  .profile-tabs button { flex:0 0 92px; }
  .pupil-resource-actions > button:not(.icon-button) { flex:1 1 140px; }
}


/* v0.4.9 lesson-prep and finish-lesson Highway Code workflow */
.prep-materials-section {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.prep-materials-section h3 { margin: 0; font-size: 14px; }
.prep-material-list { display: grid; gap: 8px; margin-top: 10px; }
.prep-material-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.prep-material-card.lesson-specific {
  border-color: color-mix(in srgb,var(--accent) 38%,var(--line));
  background: linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 52%,var(--surface-2)),var(--surface-2));
}
.prep-material-meta { display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:var(--muted); font-size:10px; }
.prep-material-copy > strong { display:block; margin-top:7px; font-size:12.5px; }
.prep-material-copy > p { margin:5px 0 0; color:var(--muted); font-size:10.5px; line-height:1.45; }
.prep-material-empty {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px dashed var(--line-strong);
  border-radius:14px;
  color:var(--muted);
}
.prep-material-empty strong,.prep-material-empty small { display:block; }
.prep-material-empty small { margin-top:3px; line-height:1.4; }

.finish-planned-materials {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb,var(--blue) 26%,var(--line));
  border-radius: 16px;
  background: linear-gradient(145deg,color-mix(in srgb,var(--blue-soft) 25%,var(--surface)),var(--surface));
}
.finish-planned-materials h3 { margin:0; font-size:14px; }
.finish-material-select-list { display:grid; gap:8px; margin-top:10px; }
.finish-material-select {
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  min-height:58px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface-2);
  cursor:pointer;
}
.finish-material-select.selected {
  border-color:color-mix(in srgb,var(--accent) 46%,var(--line));
  background:color-mix(in srgb,var(--accent-soft) 55%,var(--surface-2));
  box-shadow:inset 3px 0 var(--accent);
}
.finish-material-select input { accent-color:var(--accent); }
.finish-material-select strong,.finish-material-select small { display:block; }
.finish-material-select strong { font-size:11.5px; }
.finish-material-select small { margin-top:4px; color:var(--muted); font-size:10px; }
.finish-material-select > button { width:34px; height:34px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); cursor:pointer; }

.finish-material-outcome-list { display:grid; gap:9px; margin-top:10px; }
.finish-material-outcome {
  padding:11px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-2);
}
.finish-material-outcome > div > strong,.finish-material-outcome > div > small { display:block; }
.finish-material-outcome > div > strong { margin-top:7px; font-size:12px; }
.finish-material-outcome > div > small { margin-top:4px; color:var(--muted); font-size:10px; }
.material-discussed-control {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px;
  align-items:start;
  margin-top:10px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface);
  cursor:pointer;
}
.material-discussed-control input { margin-top:2px; accent-color:var(--accent); }
.material-discussed-control strong,.material-discussed-control small { display:block; }
.material-discussed-control strong { font-size:10.5px; }
.material-discussed-control small { margin-top:3px; color:var(--muted); font-size:9.5px; }
.material-outcome-note { display:block; margin-top:9px; }
.material-outcome-note > span { display:block; margin-bottom:5px; color:var(--muted); font-size:9.5px; font-weight:800; }
.material-outcome-note input { width:100%; min-height:38px; padding:0 9px; border:1px solid var(--line); border-radius:10px; background:var(--surface-raised); color:var(--text); }
.save-change.approved { border-color:color-mix(in srgb,var(--accent) 36%,var(--line)); background:var(--accent-soft); }
.finish-material-save-result {
  display:grid;
  grid-template-columns:minmax(170px,1fr) repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
.finish-material-save-result > div,.finish-material-save-result > button {
  min-height:76px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface-2);
  color:var(--text);
  text-align:left;
}
.finish-material-save-result > div span,.finish-material-save-result > div strong,.finish-material-save-result > div small,
.finish-material-save-result > button span,.finish-material-save-result > button small { display:block; }
.finish-material-save-result > div span { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.finish-material-save-result > div strong { margin-top:5px; font-size:16px; }
.finish-material-save-result small { margin-top:4px; color:var(--muted); font-size:9.5px; line-height:1.35; }
.finish-material-save-result > button { cursor:pointer; }
.resource-outcome-note { display:block; margin-top:6px; color:var(--accent); font-size:10px; font-weight:700; }
body.light .prep-material-card,body.light .finish-planned-materials,body.light .finish-material-select,body.light .finish-material-outcome,body.light .finish-material-save-result > div,body.light .finish-material-save-result > button {
  border-color:rgba(18,34,29,.27);
  box-shadow:0 9px 18px rgba(24,40,33,.055),inset 0 1px 0 rgba(255,255,255,.78);
}
@media (max-width:700px) {
  .prep-material-card { grid-template-columns:1fr; }
  .prep-material-card > button { width:100%; }
  .prep-material-empty { grid-template-columns:auto minmax(0,1fr); }
  .prep-material-empty > button { grid-column:1/-1; width:100%; }
  .finish-material-save-result { grid-template-columns:1fr; }
}

/* v0.5.0 — evidence-linked next lesson planning */
.smart-plan-card {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--accent-soft) 75%, transparent), transparent 12rem),
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 38%, var(--surface)), var(--surface-2));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 72%, transparent);
}
.smart-plan-card.approved {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  box-shadow: inset 3px 0 0 var(--accent), var(--shadow-small);
}
.smart-plan-card.empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  background: var(--surface-2);
  border-style: dashed;
  box-shadow: none;
}
.smart-plan-card.empty strong,
.smart-plan-card.empty small { display: block; }
.smart-plan-card.empty strong { margin-top: 5px; }
.smart-plan-card.empty small { margin-top: 4px; color: var(--muted); line-height: 1.45; }
.smart-plan-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}
.smart-plan-head h3 { margin: 6px 0 0; font-size: 18px; line-height: 1.25; }
.smart-plan-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.smart-plan-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.smart-plan-kicker .icon { width: 14px; height: 14px; }
.smart-plan-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
  gap: 11px;
  margin-top: 13px;
}
.smart-plan-objectives,
.smart-plan-outcome {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-raised) 70%, transparent);
}
.smart-plan-objectives > span,
.smart-plan-outcome > span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.smart-plan-objectives > div {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  margin-top: 7px;
}
.smart-plan-objectives i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-style: normal;
}
.smart-plan-objectives i .icon { width: 12px; height: 12px; }
.smart-plan-objectives small { color: var(--text); font-size: 10.5px; line-height: 1.4; }
.smart-plan-outcome strong { display: block; font-size: 12px; line-height: 1.45; }
.smart-plan-outcome small { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.smart-plan-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}
.smart-plan-evidence span {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}
.smart-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.smart-plan-actions .text-button { display: inline-flex; align-items: center; gap: 6px; }
.smart-plan-actions .text-button .icon { width: 14px; height: 14px; }

.pupil-plan-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--line));
  border-radius: 15px;
  background: linear-gradient(135deg, var(--amber-soft), var(--surface-2));
}
.pupil-plan-summary.approved {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
}
.pupil-plan-summary > div > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pupil-plan-summary > div > span .icon { width: 13px; height: 13px; }
.pupil-plan-summary strong,
.pupil-plan-summary small { display: block; }
.pupil-plan-summary strong { margin-top: 5px; font-size: 13px; }
.pupil-plan-summary small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }

.plan-edit-context {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 14px;
  background: var(--accent-soft);
}
.plan-edit-context > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--accent);
}
.plan-edit-context strong,
.plan-edit-context small { display: block; }
.plan-edit-context small { margin-top: 4px; color: var(--muted); line-height: 1.4; }
.plan-approve-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 750;
}
.plan-approve-checkbox input { accent-color: var(--accent); }

.finish-generated-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: 15px;
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
}
.finish-generated-plan span,
.finish-generated-plan strong,
.finish-generated-plan small { display: block; }
.finish-generated-plan span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.finish-generated-plan span .icon { width: 13px; height: 13px; }
.finish-generated-plan strong { margin-top: 6px; font-size: 14px; }
.finish-generated-plan small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }

body.light .smart-plan-card,
body.light .pupil-plan-summary,
body.light .finish-generated-plan,
body.light .plan-edit-context {
  border-color: rgba(24, 75, 51, .25);
  box-shadow: 0 10px 22px rgba(24, 75, 51, .06), inset 0 1px 0 rgba(255, 255, 255, .8);
}
body.light .smart-plan-objectives,
body.light .smart-plan-outcome,
body.light .smart-plan-evidence span,
body.light .plan-approve-checkbox {
  border-color: rgba(18, 34, 29, .22);
}

@media (max-width: 760px) {
  .smart-plan-head { align-items: flex-start; }
  .smart-plan-body { grid-template-columns: 1fr; }
  .smart-plan-card.empty,
  .pupil-plan-summary,
  .finish-generated-plan { grid-template-columns: 1fr; }
  .smart-plan-actions .primary-button,
  .smart-plan-actions .secondary-button { flex: 1 1 140px; }
  .finish-generated-plan > button,
  .pupil-plan-summary > button { width: 100%; }
}


/* v0.5.1 live lesson plan workspace */
.lesson-plan-dialog .sheet-card{width:min(980px,calc(100vw - 28px));max-height:min(94vh,980px);overflow:auto;padding-bottom:0}
.lesson-plan-workspace-header{position:sticky;top:0;z-index:5;background:var(--surface);padding-bottom:16px;border-bottom:1px solid var(--line)}
.lesson-plan-workspace-header p:last-child{margin:5px 0 0;color:var(--muted);font-size:.84rem}
.lesson-plan-progress-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;margin:18px 0;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,var(--surface-2),rgba(54,221,152,.08))}
.lesson-plan-progress-copy{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.lesson-plan-progress-copy strong{font-size:1.25rem}.lesson-plan-progress-copy small{color:var(--muted)}
.lesson-plan-progress-ring{--plan-progress:0%;width:88px;height:88px;flex:0 0 88px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) var(--plan-progress),var(--surface-3) 0);position:relative}
.lesson-plan-progress-ring:before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--surface)}.lesson-plan-progress-ring span{position:relative;font-weight:800}
.plan-workspace-warning{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid rgba(245,180,70,.35);border-radius:18px;background:rgba(245,180,70,.08);margin-bottom:18px}.plan-workspace-warning>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(245,180,70,.14)}.plan-workspace-warning>div{display:flex;flex-direction:column;gap:3px;flex:1}.plan-workspace-warning small{color:var(--muted)}
.lesson-plan-workspace-section{padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--surface-2);margin-bottom:16px}.lesson-plan-workspace-section .section-title-row{margin-bottom:14px}
.lesson-plan-objective-list{display:grid;gap:12px}.lesson-plan-objective{padding:15px;border:1px solid var(--line);border-radius:17px;background:var(--surface);transition:.18s ease}.lesson-plan-objective.achieved{border-color:rgba(54,221,152,.4)}.lesson-plan-objective.practised{border-color:rgba(245,180,70,.38)}.lesson-plan-objective.carry{border-color:rgba(93,165,255,.38)}
.lesson-plan-objective header{display:flex;align-items:flex-start;gap:11px}.lesson-plan-objective header>div{display:flex;flex-direction:column;gap:4px}.lesson-plan-objective header small{color:var(--muted)}.lesson-plan-objective-number{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:var(--surface-3);font-weight:800;flex:0 0 auto}
.plan-outcome-segmented{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:13px}.plan-outcome-button{border:1px solid var(--line);background:var(--surface-2);color:var(--muted);padding:9px 8px;border-radius:12px;font-size:.76rem;font-weight:750;cursor:pointer}.plan-outcome-button:hover{border-color:var(--accent);color:var(--text)}.plan-outcome-button.active{color:var(--text);border-color:var(--accent);box-shadow:0 0 0 2px rgba(54,221,152,.08)}.plan-outcome-button.active.warning{border-color:rgba(245,180,70,.7)}.plan-outcome-button.active.blue{border-color:rgba(93,165,255,.7)}
.plan-workspace-note{display:flex;flex-direction:column;gap:7px;margin-top:12px}.plan-workspace-note span,.plan-workspace-notes>span{font-size:.78rem;font-weight:750;color:var(--muted)}.plan-workspace-note input{width:100%}
.independence-goal-copy{display:block;font-size:1.05rem;line-height:1.5}.plan-workspace-notes{display:flex;flex-direction:column;gap:8px}.plan-workspace-notes textarea{width:100%;resize:vertical}.plan-workspace-notes small{color:var(--muted)}
.workspace-highway-list{display:grid;gap:8px}.workspace-highway-list button{display:grid;grid-template-columns:36px 1fr 20px;align-items:center;gap:10px;width:100%;text-align:left;padding:11px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);cursor:pointer}.workspace-highway-list button>span:nth-child(2){display:flex;flex-direction:column;gap:3px}.workspace-highway-list small{color:var(--muted)}
.lesson-plan-workspace-actions{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:10px;padding:16px 0 18px;background:linear-gradient(to top,var(--surface) 75%,transparent)}
.smart-plan-live-progress{display:grid;gap:7px;padding:12px 14px;border:1px solid var(--line);border-radius:15px;background:var(--surface);margin-top:12px}.smart-plan-live-progress>div:first-child{display:flex;align-items:center;justify-content:space-between}.smart-plan-live-progress span,.smart-plan-live-progress small{color:var(--muted)}.smart-plan-progress-track{height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden}.smart-plan-progress-track i{display:block;height:100%;background:var(--accent);border-radius:inherit}
.finish-plan-outcome-compact,.finish-plan-outcome-review{border:1px solid var(--line);border-radius:18px;background:var(--surface-2);padding:16px;margin-bottom:14px}.finish-plan-outcome-list{display:grid;gap:8px}.finish-plan-outcome-row{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:10px;padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}.finish-plan-outcome-row>span:last-child{display:flex;flex-direction:column;gap:3px}.finish-plan-outcome-row small{color:var(--muted)}.finish-plan-independence{display:flex;flex-direction:column;gap:4px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}.finish-plan-independence>span{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
body.light .lesson-plan-progress-hero{background:linear-gradient(135deg,#fff,rgba(13,116,81,.08))}
@media(max-width:720px){.lesson-plan-dialog .sheet-card{width:100vw;max-height:96vh;border-radius:24px 24px 0 0;padding:16px}.lesson-plan-progress-hero{padding:16px}.lesson-plan-progress-ring{width:70px;height:70px;flex-basis:70px}.lesson-plan-workspace-section{padding:14px}.plan-outcome-segmented{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-plan-workspace-actions{display:grid;grid-template-columns:1fr}.lesson-plan-workspace-actions button{width:100%}.plan-workspace-warning{align-items:flex-start;flex-wrap:wrap}.plan-workspace-warning button{width:100%}.finish-plan-outcome-row{grid-template-columns:1fr}.finish-plan-outcome-row .pill{justify-self:start}}


/* v0.5.2 quick observations and timestamped lesson timeline */
.lesson-live-metrics{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.lesson-live-metrics span{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.72rem;font-weight:800;color:var(--muted)}.lesson-live-metrics .icon{width:14px;height:14px;color:var(--accent)}
.start-lesson-timeline{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:13px 14px;margin-bottom:13px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface));color:var(--text);text-align:left;cursor:pointer}.start-lesson-timeline>span:first-child{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);color:var(--accent)}.start-lesson-timeline>span:nth-child(2){display:flex;flex-direction:column;gap:2px}.start-lesson-timeline small{color:var(--muted)}.start-lesson-timeline>.icon{color:var(--muted)}
.lesson-timeline-live{display:flex;align-items:center;gap:8px;margin-bottom:13px;padding:10px 12px;border:1px solid rgba(60,210,154,.28);border-radius:14px;background:rgba(60,210,154,.07)}.lesson-timeline-live small{margin-left:auto;color:var(--muted)}.live-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent);animation:lessonLivePulse 1.8s ease-in-out infinite}@keyframes lessonLivePulse{50%{box-shadow:0 0 0 9px transparent}}
.quick-observation-target{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;margin-bottom:11px}.quick-observation-target label{font-size:.77rem;font-weight:800;color:var(--muted)}.quick-observation-target select{min-width:0}
.quick-observation-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.quick-observation-button{min-height:80px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:11px;border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;transition:.18s ease}.quick-observation-button>span{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:var(--surface-2)}.quick-observation-button .icon{width:17px;height:17px}.quick-observation-button strong{font-size:.78rem}.quick-observation-button small{font-size:.64rem;line-height:1.25;color:var(--muted)}.quick-observation-button:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}.quick-observation-button.success>span{color:var(--accent);background:var(--accent-soft)}.quick-observation-button.warning>span{color:#f2b84b;background:rgba(242,184,75,.12)}.quick-observation-button.danger>span{color:#ff7b7b;background:rgba(255,90,90,.12)}.quick-observation-button.blue>span{color:#73a9ff;background:rgba(80,135,255,.12)}
.quick-observation-note{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}.quick-observation-note input{min-width:0}
.lesson-timeline-list{display:grid;gap:9px}.lesson-timeline-empty{display:flex;align-items:center;gap:12px;padding:17px;border:1px dashed var(--line);border-radius:15px;color:var(--muted)}.lesson-timeline-empty>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--surface);color:var(--accent)}.lesson-timeline-empty>div{display:flex;flex-direction:column;gap:3px}.lesson-timeline-item{display:grid;grid-template-columns:58px 1fr auto;align-items:start;gap:10px;padding:11px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.lesson-timeline-marker{display:flex;flex-direction:column;align-items:center;gap:4px}.lesson-timeline-marker>span{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--surface-2)}.lesson-timeline-marker .icon{width:17px;height:17px}.lesson-timeline-marker small{font-size:.68rem;font-weight:850;color:var(--muted)}.lesson-timeline-item.success .lesson-timeline-marker>span{color:var(--accent);background:var(--accent-soft)}.lesson-timeline-item.warning .lesson-timeline-marker>span{color:#f2b84b;background:rgba(242,184,75,.12)}.lesson-timeline-item.danger .lesson-timeline-marker>span{color:#ff7b7b;background:rgba(255,90,90,.12)}.lesson-timeline-item.blue .lesson-timeline-marker>span{color:#73a9ff;background:rgba(80,135,255,.12)}.lesson-timeline-copy{display:flex;flex-direction:column;gap:7px;min-width:0}.lesson-timeline-meta{display:flex;align-items:center;gap:7px}.lesson-timeline-meta select{min-width:0;max-width:390px;padding:6px 28px 6px 8px;font-size:.72rem}.lesson-timeline-copy input{width:100%;padding:9px 10px}.lesson-timeline-copy>small{color:var(--muted);font-size:.7rem}.lesson-timeline-delete{margin-top:2px}
.finish-timeline-summary{display:grid;gap:7px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}.finish-timeline-summary>div:first-child{display:flex;align-items:center;justify-content:space-between}.finish-timeline-summary>div:first-child span{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.finish-timeline-row{display:grid;grid-template-columns:44px 1fr;gap:9px;padding:8px 9px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.finish-timeline-row>span{font-size:.7rem;font-weight:850;color:var(--accent)}.finish-timeline-row>div{display:flex;flex-direction:column;gap:2px}.finish-timeline-row small{color:var(--muted)}
.history-live-observations{display:flex;flex-direction:column;gap:3px;margin-top:8px;padding:8px 10px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}.history-live-observations span{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800}.history-live-observations .icon{width:14px;height:14px;color:var(--accent)}.history-live-observations small{color:var(--muted)}
body.light .quick-observation-button,body.light .lesson-timeline-item,body.light .finish-timeline-row{box-shadow:0 4px 14px rgba(22,69,50,.05)}
@media(max-width:820px){.quick-observation-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.quick-observation-button:nth-child(4),.quick-observation-button:nth-child(5){min-height:68px}.lesson-timeline-live{align-items:flex-start;flex-wrap:wrap}.lesson-timeline-live small{width:100%;margin-left:17px}.lesson-timeline-item{grid-template-columns:48px 1fr auto}.lesson-timeline-meta{align-items:flex-start;flex-direction:column}.lesson-timeline-meta select{width:100%;max-width:none}}
@media(max-width:520px){.lesson-live-metrics{justify-content:flex-start}.quick-observation-target{grid-template-columns:1fr}.quick-observation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-observation-button{min-height:72px}.quick-observation-button:last-child{grid-column:1/-1;min-height:60px}.quick-observation-note{grid-template-columns:1fr}.quick-observation-note button{width:100%}.lesson-timeline-item{grid-template-columns:42px 1fr}.lesson-timeline-delete{grid-column:2;justify-self:end;margin-top:-38px}.lesson-timeline-copy{padding-right:2px}.lesson-plan-workspace-section.quick-observation-workspace,.lesson-plan-workspace-section.lesson-timeline-section{padding:13px}}

/* v0.5.4 immediate passenger-seat instructor capture */
.instructor-capture-note{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;padding:12px 13px;margin-bottom:13px;border:1px solid color-mix(in srgb,var(--blue) 30%,var(--line));border-radius:15px;background:linear-gradient(135deg,color-mix(in srgb,var(--blue-soft) 60%,var(--surface)),var(--surface))}.instructor-capture-note>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:var(--blue);background:var(--blue-soft)}.instructor-capture-note>div{display:flex;flex-direction:column;gap:3px;min-width:0}.instructor-capture-note small{color:var(--muted);line-height:1.35}.quick-observation-note{grid-template-columns:minmax(0,1fr) auto auto}.voice-observation-button.listening{border-color:#ff7b7b;color:#ff9a9a;background:rgba(255,90,90,.1)}.voice-capture-privacy{display:block;margin-top:8px;color:var(--muted);font-size:.7rem;line-height:1.35}
@media(max-width:720px){.quick-observation-note{grid-template-columns:1fr 1fr}.quick-observation-note input{grid-column:1/-1}.quick-observation-note button{width:100%}}
@media(max-width:420px){.quick-observation-note{grid-template-columns:1fr}.quick-observation-note input{grid-column:auto}}


/* v0.5.7 — freedom without layout modes */
.form-freedom-note{margin-top:12px;padding:11px 13px;border:1px solid var(--line);border-radius:13px;color:var(--muted);background:var(--surface-2);font-size:.84rem;line-height:1.45}
.profile-history-heading{margin-bottom:12px}.contact-note-history{border-color:color-mix(in srgb,var(--blue) 26%,var(--line))}.history-dot.note{background:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 14%,transparent)}
.finish-capture-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
@media(max-width:640px){.finish-capture-actions{width:100%;display:grid;grid-template-columns:1fr}.finish-capture-actions button{width:100%}.finish-action-bar{align-items:stretch;flex-direction:column}.finish-action-bar>button{width:100%}}

/* v0.5.8 — functional Diary modes and unified short-note AI */
.diary-mode-content { min-width: 0; }
.diary-mode-content > * { animation: diary-mode-in .18s ease-out; }
@keyframes diary-mode-in { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.diary-toolbar .date-arrows { display: flex; align-items: center; gap: 7px; }
.diary-toolbar .date-arrows [data-diary-today] { width: auto; min-width: 58px; padding: 0 11px; font-size: 11px; font-weight: 800; }
.diary-mode-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.diary-mode-heading h2 { margin: 4px 0 3px; font-size: clamp(19px, 2vw, 25px); }
.diary-mode-heading small { color: var(--muted); }
.diary-day-events, .diary-list-stack, .diary-week-mobile { display: grid; gap: 10px; }
.diary-list-day { display: grid; gap: 9px; }
.diary-list-day + .diary-list-day { margin-top: 8px; padding-top: 7px; border-top: 1px solid color-mix(in srgb, var(--line) 74%, transparent); }
.diary-date-label > span { min-width: 0; }
.diary-date-label > span strong, .diary-date-label > span small { display: block; }
.diary-date-label > span small { margin-top: 3px; }
.diary-empty-row { border: 1px dashed var(--line); border-radius: 15px; padding: 15px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); }
.diary-empty-row strong, .diary-empty-row small { display: block; }
.diary-empty-row small { margin-top: 3px; color: var(--muted); }
.diary-week-desktop { display: none; overflow-x: auto; }
.week-grid.enhanced-week-grid .week-day-button { appearance: none; width: auto; border: 0; color: inherit; font: inherit; cursor: pointer; }
.week-grid.enhanced-week-grid .week-day-button:hover { background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface-2)); }
.week-grid.enhanced-week-grid .week-event { appearance: none; width: 100%; text-align: left; color: inherit; cursor: pointer; font: inherit; }
.shorthand-interpretation { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--blue-soft) 42%, var(--surface)), var(--surface)); }
.shorthand-interpretation > p { margin: 10px 0 7px; font-weight: 700; line-height: 1.55; }
.shorthand-interpretation > small { color: var(--muted); }
@media (min-width: 800px) {
  .diary-week-mobile { display: none; }
  .diary-week-desktop { display: block; }
  .diary-day-events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diary-list-view .diary-mobile-event { grid-template-columns: 75px minmax(0, 1fr) auto 6px; }
}
@media (max-width: 799px) {
  .diary-mode-heading { align-items: stretch; flex-direction: column; }
  .diary-mode-heading .secondary-button { width: 100%; }
  .diary-toolbar .date-control { align-items: flex-start; }
  .diary-toolbar .date-arrows { flex-shrink: 0; }
  .diary-toolbar .date-arrows [data-diary-today] { min-width: 50px; padding: 0 8px; }
}

/* v0.5.9 — full seven-day compact Diary calendar, 06:00–22:00 */
.compact-week-card {
  padding: 12px;
  overflow-x: auto;
  overflow-y: hidden;
}
.week-calendar-shell {
  min-width: 800px;
}
.week-calendar-range-note {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 1px 2px 10px;
  color: var(--muted);
}
.week-calendar-range-note > span {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.week-calendar-range-note strong { color: var(--text); font-size: 12px; }
.week-calendar-range-note small { margin-left: auto; font-size: 10px; }
.week-calendar.compact-week-calendar {
  display: grid;
  grid-template-columns: 50px repeat(7, minmax(98px, 1fr));
  grid-template-rows: 57px var(--week-calendar-height);
  min-width: 790px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
}
.week-calendar-corner,
.week-calendar-day-head {
  min-width: 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 91%, var(--surface-2));
}
.week-calendar-corner {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  color: var(--muted);
}
.week-calendar-corner span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.week-calendar-corner strong { color: var(--text); font-size: 11px; }
.week-calendar-day-head {
  appearance: none;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-content: center;
  justify-content: center;
  column-gap: 5px;
  padding: 7px 5px;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.week-calendar-day-head span { align-self: end; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.week-calendar-day-head strong { color: var(--text); font-size: 16px; line-height: 1; }
.week-calendar-day-head small { grid-column: 1 / -1; margin-top: 3px; font-size: 8.5px; line-height: 1; }
.week-calendar-day-head:hover,
.week-calendar-day-head:focus-visible { background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface-2)); outline: none; }
.week-calendar-day-head.current {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 72%, var(--surface)), color-mix(in srgb, var(--surface) 94%, var(--surface-2)));
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 72%, transparent);
}
.week-calendar-day-head.weekend:not(.current) { background: color-mix(in srgb, var(--surface-2) 90%, var(--surface)); }
.week-calendar-time-axis {
  position: relative;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-2));
}
.week-hour-label {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  transform: translateY(-50%);
  padding-right: 7px;
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 800;
  text-align: right;
  line-height: 1;
}
.week-hour-label.start { transform: translateY(1px); }
.week-hour-label.end { transform: translateY(calc(-100% - 1px)); }
.week-calendar-day-column {
  position: relative;
  min-width: 0;
  border-right: 1px solid var(--line);
  background-color: color-mix(in srgb, var(--surface-raised) 90%, transparent);
  background-image:
    linear-gradient(to bottom, transparent calc(var(--week-hour-height) - 1px), color-mix(in srgb, var(--line) 84%, transparent) 1px),
    linear-gradient(to bottom, transparent calc(var(--week-half-hour-height) - 1px), color-mix(in srgb, var(--line) 35%, transparent) 1px);
  background-size: 100% var(--week-hour-height), 100% var(--week-half-hour-height);
  background-repeat: repeat-y;
}
.week-calendar-day-column:last-child { border-right: 0; }
.week-calendar-day-column.weekend { background-color: color-mix(in srgb, var(--surface-2) 82%, var(--surface)); }
.week-calendar-day-column.current {
  background-color: color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
}
.week-timeline-event {
  --event-accent: var(--accent);
  position: absolute;
  top: var(--event-top);
  left: 3px;
  width: calc(100% - 6px);
  height: var(--event-height);
  min-height: 27px;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 1px;
  padding: 4px 5px 4px 7px;
  border: 1px solid color-mix(in srgb, var(--event-accent) 40%, var(--line));
  border-left: 3px solid var(--event-accent);
  border-radius: 8px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 92%, var(--event-accent) 8%), color-mix(in srgb, var(--event-accent) 14%, var(--surface)));
  color: var(--text);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .10);
  text-align: left;
  font: inherit;
  cursor: pointer;
  z-index: 3;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.week-timeline-event:hover,
.week-timeline-event:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--event-accent) 72%, var(--line));
  box-shadow: 0 5px 13px rgba(0, 0, 0, .16);
  outline: none;
  z-index: 5;
}
.week-timeline-event small {
  color: var(--muted);
  font-size: 7.5px;
  font-weight: 850;
  line-height: 1.05;
}
.week-timeline-event strong {
  overflow: hidden;
  color: var(--text);
  font-size: 9.5px;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.week-timeline-event span {
  display: -webkit-box;
  overflow: hidden;
  color: color-mix(in srgb, var(--event-accent) 68%, var(--text));
  font-size: 8px;
  font-weight: 750;
  line-height: 1.12;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.week-timeline-event.short span { display: none; }
.week-timeline-event.medium span { -webkit-line-clamp: 1; }
.week-timeline-event.warning,
.week-timeline-event.test { --event-accent: var(--amber); }
.week-timeline-event.info { --event-accent: var(--blue); }
.week-timeline-event.violet { --event-accent: var(--violet); }
body.light .week-calendar.compact-week-calendar {
  background: #fff;
  box-shadow: 0 10px 24px rgba(28, 45, 37, .06), inset 0 1px 0 rgba(255,255,255,.9);
}
body.light .week-calendar-corner,
body.light .week-calendar-day-head { background: linear-gradient(180deg, #fff, #f2f7f4); }
body.light .week-calendar-day-head.weekend:not(.current) { background: linear-gradient(180deg, #f7faf8, #edf3ef); }
body.light .week-calendar-day-column { background-color: #fbfdfc; }
body.light .week-calendar-day-column.weekend { background-color: #f4f8f5; }
body.light .week-calendar-day-column.current { background-color: rgba(47, 143, 98, .055); }
body.light .week-timeline-event { box-shadow: 0 3px 9px rgba(28,45,37,.08), inset 0 1px 0 rgba(255,255,255,.78); }

@media (max-width: 959px) and (min-width: 800px) {
  .week-calendar-shell { min-width: 770px; }
  .week-calendar.compact-week-calendar { min-width: 760px; grid-template-columns: 47px repeat(7, minmax(92px, 1fr)); }
  .week-calendar-range-note small { display: none; }
}
@media (max-width: 799px) {
  .diary-week-mobile { gap: 6px; }
  .diary-week-mobile .diary-list-day { gap: 6px; }
  .diary-week-mobile .diary-list-day + .diary-list-day { margin-top: 3px; padding-top: 5px; }
  .diary-week-mobile .diary-date-label { padding-top: 5px; padding-bottom: 3px; }
  .diary-week-mobile .diary-mobile-event { min-height: 58px; padding: 9px; }
  .diary-week-mobile .diary-empty-row { padding: 11px 12px; }
}

/* v0.6.0 — compact pupil sorting without changing the classic layout */
.pupil-search-tools {
  grid-template-columns: minmax(220px, 1fr) minmax(188px, auto) auto;
  align-items: stretch;
}
.pupil-sort-control {
  min-width: 188px;
  min-height: 46px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--muted);
}
.pupil-sort-control > .icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.pupil-sort-control > span {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pupil-sort-control select {
  min-width: 0;
  width: 100%;
  padding: 0 22px 0 2px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 750;
  outline: 0;
  cursor: pointer;
}
.pupil-sort-control:focus-within {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 68%, transparent);
}
body.light .pupil-sort-control {
  background: linear-gradient(180deg, #fff, #f5f8f6);
  box-shadow: 0 4px 12px rgba(28, 45, 37, .04);
}
@media (max-width: 720px) {
  .pupil-search-tools { grid-template-columns: minmax(0, 1fr) auto; }
  .pupil-sort-control {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }
}

/* v0.6.1 - functional report previews and exports */
.report-kpi-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:13px}.report-kpi-strip>div{padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--surface-2)}.report-kpi-strip span,.report-kpi-strip strong,.report-kpi-strip small{display:block}.report-kpi-strip span{color:var(--muted);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em}.report-kpi-strip strong{margin-top:5px;font-size:17px}.report-kpi-strip small{margin-top:3px;color:var(--muted);font-size:9.5px}.report-history-button{width:100%;color:var(--text);text-align:left;cursor:pointer}.report-history-button header>span strong,.report-history-button header>span small{display:block}.report-history-button header>span small{margin-top:3px}.report-row-link{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:8px;color:var(--accent);font-size:9.5px;font-weight:800}.report-row-link .icon{width:13px;height:13px}.report-builder-intro{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:11px;margin-bottom:15px;padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--surface-2)}.report-builder-intro>span{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:var(--accent-soft);color:var(--accent)}.report-builder-intro strong,.report-builder-intro small{display:block}.report-builder-intro small{margin-top:4px;color:var(--muted);font-size:10.5px;line-height:1.4}.report-builder-note{margin-top:13px;padding:10px 12px;border-left:2px solid var(--accent);border-radius:10px;background:var(--surface-2);color:var(--muted);font-size:10.5px;line-height:1.45}.report-dialog{width:min(1040px,calc(100vw - 24px))}.report-dialog .sheet-card{max-height:96dvh}.report-dialog-header small{display:block;margin-top:4px;color:var(--muted);font-size:10px}.report-preview-actions{position:sticky;top:58px;z-index:4;display:flex;gap:7px;flex-wrap:wrap;margin:-5px 0 10px;padding:8px 0;background:linear-gradient(var(--surface) 80%,transparent)}.report-preview-actions button{min-height:40px}.report-preview-status{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;color:var(--muted);font-size:10px}.report-printable{width:100%;max-width:920px;margin:0 auto;padding:26px;border-radius:16px;background:#fff;color:#14201b;box-shadow:0 18px 45px rgba(0,0,0,.18);font-family:Arial,Helvetica,sans-serif}.print-report-header{display:flex;justify-content:space-between;gap:24px;padding-bottom:20px;border-bottom:3px solid #1d9d65}.print-report-header>div:first-child>span{color:#1d9d65;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.13em}.print-report-header h1{margin:7px 0 4px;font-size:25px;color:#14201b}.print-report-header p{margin:0;color:#52625b;font-size:11px}.print-report-meta{display:grid;gap:3px;align-content:start;text-align:right}.print-report-meta strong,.print-report-meta span,.print-report-meta small{display:block;font-size:9px}.print-report-meta span{color:#14201b}.print-report-meta small{color:#6f7e77}.report-person-summary,.report-finance-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px 0}.report-person-summary>div,.report-finance-summary>div{padding:11px;border:1px solid #d8e1dc;border-radius:9px;background:#f6f9f7}.report-person-summary span,.report-finance-summary span{display:block;color:#697770;font-size:8.5px}.report-person-summary strong,.report-finance-summary strong{display:block;margin-top:4px;color:#14201b;font-size:11px}.print-report-section{margin:21px 0}.print-report-section h2{margin:0 0 10px;color:#14201b;font-size:15px}.report-progress-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.report-progress-group{padding:10px;border:1px solid #d8e1dc;border-radius:9px}.report-progress-group span,.report-progress-group strong,.report-progress-group small{display:block}.report-progress-group span{color:#14201b;font-size:9.5px;font-weight:750}.report-progress-group strong{margin:4px 0;color:#14201b;font-size:14px}.report-progress-group small{margin-top:5px;color:#697770;font-size:8px}.report-progress-group i{display:block;height:5px;border-radius:99px;overflow:hidden;background:#e5ece8}.report-progress-group i b{display:block;height:100%;background:#1d9d65}.report-skill-table{border:1px solid #d8e1dc;border-radius:9px;overflow:hidden}.report-skill-table>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 9px;border-bottom:1px solid #e5ece8;font-size:9px}.report-skill-table>div:last-child{border:0}.report-skill-table span{display:flex;gap:7px;color:#14201b}.report-skill-table span b{width:16px;color:#1d9d65}.report-level{color:#52625b;font-size:8px}.report-level.level-0{color:#8d9993}.report-record-card,.report-history-card{margin-bottom:7px;padding:10px;border:1px solid #d8e1dc;border-radius:9px}.report-record-card header,.report-history-card header{display:flex;justify-content:space-between;gap:10px}.report-record-card header strong,.report-history-card header strong{color:#14201b;font-size:9.5px}.report-record-card header span,.report-history-card header span,.report-history-card header em{color:#697770;font-size:8px;font-style:normal}.report-record-card p,.report-history-card p,.report-main-copy{color:#33433b;font-size:9.5px;line-height:1.55}.report-record-card small,.report-history-card small{color:#697770;font-size:8px}.report-history-card header div span,.report-history-card header div strong{display:block}.report-record-meta{display:flex;gap:8px;flex-wrap:wrap;margin:7px 0;color:#697770;font-size:8px}.report-next-plan,.report-observation-summary{display:grid;gap:3px;margin-top:7px;padding:7px;border-radius:7px;background:#f6f9f7;color:#33433b;font-size:8px}.report-ledger,.report-balance-list{border:1px solid #d8e1dc;border-radius:9px;overflow:hidden}.report-ledger-row,.report-balance-row{display:flex;justify-content:space-between;gap:14px;padding:9px;border-bottom:1px solid #e5ece8}.report-ledger-row:last-child,.report-balance-row:last-child{border:0}.report-ledger-row span strong,.report-ledger-row span small{display:block}.report-ledger-row span strong{color:#14201b;font-size:9px}.report-ledger-row span small{margin-top:3px;color:#697770;font-size:8px}.report-ledger-row em{color:#14201b;font-size:9px;font-style:normal;font-weight:800;text-align:right}.report-ledger-row em small{display:block;color:#697770;font-size:7px}.report-ledger-row em.positive,.report-balance-row .positive{color:#167b50}.report-ledger-row em.negative,.report-ledger-row em.due,.report-balance-row .due{color:#b24b32}.report-balance-row{color:#14201b;font-size:9px}.report-balance-totals{display:flex;justify-content:flex-end;gap:14px;margin-top:8px;color:#52625b;font-size:8.5px}.report-chip-list{display:flex;gap:5px;flex-wrap:wrap}.report-chip-list span{padding:5px 8px;border-radius:99px;background:#edf5f1;color:#33433b;font-size:8px}.report-number-list{color:#33433b;font-size:9.5px;line-height:1.6}.report-observation-list{display:grid;gap:5px}.report-observation-list div{display:grid;grid-template-columns:45px minmax(0,1fr);gap:7px;padding:7px;border-radius:7px;background:#f6f9f7;color:#33433b;font-size:8px}.report-disclaimer{margin-top:21px;padding:10px;border-left:3px solid #1d9d65;background:#f6f9f7}.report-disclaimer strong{color:#14201b;font-size:9px}.report-disclaimer p{margin:4px 0 0;color:#52625b;font-size:8px;line-height:1.5}.report-empty{padding:16px;color:#697770;font-size:9px;text-align:center}@media(max-width:699px){.report-kpi-strip{grid-template-columns:1fr}.report-dialog{width:100%}.report-preview-actions{top:50px;display:grid;grid-template-columns:1fr 1fr}.report-preview-actions .primary-button{grid-column:1/-1}.report-preview-status{display:grid}.report-printable{padding:15px;border-radius:12px}.print-report-header{display:block}.print-report-meta{margin-top:10px;text-align:left}.report-person-summary,.report-finance-summary,.report-progress-grid{grid-template-columns:1fr 1fr}.report-skill-table>div{align-items:flex-start}.report-skill-table>div>strong{text-align:right}}


/* v0.6.2 - pupil desktop metadata spacing */


/* v0.7.0 simplification pass — daily work first, advanced tools on demand */
.today-summary-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 13px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--line);
}
.today-summary-bar > span {
  min-width: 0;
  padding: 13px 10px;
  background: var(--surface);
  text-align: center;
}
.today-summary-bar strong,
.today-summary-bar small { display: block; }
.today-summary-bar strong { font-size: 17px; }
.today-summary-bar small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.today-simple-layout { display: grid; gap: 13px; }
.simple-next-card { min-height: 0; }
.simple-next-card .next-focus { font-size: 15px; color: var(--text); }
.simple-next-card .next-meta { margin-bottom: 17px; }
.simple-more-card { display: grid; gap: 14px; }
.simple-more-card h3 { margin-bottom: 5px; }
.simple-more-card p { margin: 0; color: var(--muted); font-size: 12px; }
.compact-empty { padding: 20px 12px; }

.simple-diary-toolbar { margin-top: 0; }
.simple-diary-legend { margin: 9px 0 13px; }

.pupil-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}
.pupil-page-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.simple-pupil-search { margin-bottom: 9px; }
.simple-pupil-filters { margin-bottom: 11px; width: min(100%, 420px); }
.simple-pupil-list .pupil-row { min-height: 76px; }
.pupil-row-mobile-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; color: var(--muted); font-size: 10px; }
.pupil-row-mobile-meta em { padding: 3px 7px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-style: normal; font-weight: 750; }
.pupil-row-mobile-meta em.danger { background: var(--red-soft); color: var(--red); }
.pupil-row-mobile-meta em.warning { background: var(--amber-soft); color: var(--amber); }
.pupil-attention { min-width: 120px; text-align: left; }
.pupil-attention small,
.pupil-attention strong { display: block; }
.pupil-attention small { color: var(--muted); font-size: 9.5px; }
.pupil-attention strong { margin-top: 4px; font-size: 12px; }
.pupil-attention.danger strong { color: var(--red); }
.pupil-attention.warning strong { color: var(--amber); }
.pupil-attention.quiet strong { color: var(--muted); }
.pupil-row-chevron { color: var(--muted-2); }
.pupil-row-chevron .icon { width: 17px; height: 17px; }

.simple-profile-header { margin-bottom: 12px; }
.simple-profile-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 11px;
}
.simple-profile-summary > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.simple-profile-summary span,
.simple-profile-summary strong,
.simple-profile-summary small { display: block; }
.simple-profile-summary span { color: var(--muted); font-size: 9.5px; }
.simple-profile-summary strong { margin-top: 5px; font-size: 13px; overflow-wrap: anywhere; }
.simple-profile-summary small { margin-top: 4px; color: var(--muted); font-size: 9.5px; }
.simple-profile-summary strong.danger { color: var(--red); }
.simple-profile-summary strong.success { color: var(--accent); }
.simple-profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 11px; }
.simple-profile-actions button { min-width: 0; padding-inline: 10px; }
.simple-focus-card { padding: 16px; margin-bottom: 11px; }
.simple-focus-card > div > span,
.simple-last-record > span { color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.simple-focus-card h3 { margin: 6px 0; font-size: 20px; }
.simple-focus-card p { margin: 0; color: var(--muted); font-size: 12px; }
.simple-last-record { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.simple-last-record p { margin-top: 6px; color: var(--text); }
.simple-profile-sections { display: grid; gap: 8px; padding-bottom: 6px; }
.profile-disclosure,
.settings-disclosure { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.profile-disclosure > summary,
.settings-disclosure > summary {
  min-height: 58px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.profile-disclosure > summary::-webkit-details-marker,
.settings-disclosure > summary::-webkit-details-marker { display: none; }
.profile-disclosure > summary strong,
.profile-disclosure > summary small,
.settings-disclosure > summary strong,
.settings-disclosure > summary small { display: block; }
.profile-disclosure > summary strong,
.settings-disclosure > summary strong { font-size: 13px; }
.profile-disclosure > summary small,
.settings-disclosure > summary small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.profile-disclosure > summary .icon,
.settings-disclosure > summary .icon { color: var(--muted); transition: transform .18s ease; }
.profile-disclosure[open] > summary .icon,
.settings-disclosure[open] > summary .icon { transform: rotate(90deg); }
.profile-disclosure-content,
.settings-disclosure-content { padding: 0 14px 14px; border-top: 1px solid var(--line); }
.profile-disclosure-content > :first-child,
.settings-disclosure-content > :first-child { margin-top: 14px; }
.simple-pupil-details { display: grid; gap: 10px; }
.simple-pupil-details p { display: flex; justify-content: space-between; gap: 15px; margin: 0; padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: 11px; }
.simple-pupil-details p span { color: var(--muted); text-align: right; }
.simple-settings-layout { display: grid; gap: 11px; max-width: 880px; }
.settings-save-row { margin-top: 15px; }
.simple-plan-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 13px; background: var(--surface-2); }
.simple-plan-row span:first-child,
.simple-plan-row strong { display: block; }
.simple-plan-row strong { color: var(--muted); font-size: 10px; }
.simple-plan-row .pill { grid-column: 2; grid-row: 1 / span 2; }

@media (min-width: 700px) {
  .simple-profile-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .simple-profile-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .today-simple-layout { grid-template-columns: minmax(0, 1.55fr) minmax(280px, .68fr); gap: 17px; align-items: start; }
  .today-summary-bar { max-width: 640px; }
  .simple-next-card { padding: 24px; }
  .simple-next-card h2 { font-size: 34px; }
  .pupil-list.desktop-table .pupil-row { grid-template-columns: auto minmax(220px, 1.5fr) minmax(180px, .9fr) minmax(120px, .62fr) auto; }
  .pupil-list.desktop-table .desktop-pupil-col { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pupil-list.desktop-table .desktop-pupil-col .subtle { font-size: 10px; }
  .simple-profile-actions button { min-height: 44px; }
}

@media (max-width: 520px) {
  .today-summary-bar strong { font-size: 15px; }
  .today-summary-bar > span { padding-inline: 6px; }
  .pupil-page-heading { align-items: flex-start; }
  .pupil-page-heading p { max-width: 190px; }
  .simple-profile-actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 959px) {
  .simple-more-card { display: none; }
}


/* v0.7.1 — one-note Finish Lesson workflow */
.finish-dialog { width:min(720px,calc(100vw - 28px)); }
.finish-dialog .sheet-card { max-height:min(94dvh,900px); }
.finish-flow-hint {
  margin:-4px 0 15px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-2);
  color:var(--muted);
  font-size:10.5px;
  text-align:center;
}
.finish-context-compact { margin-bottom:12px; }
.finish-capture-main {
  padding:17px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--accent-soft) 28%,var(--surface)));
  box-shadow:var(--shadow-small);
}
.finish-capture-heading { display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px; align-items:center; margin-bottom:13px; }
.finish-capture-heading h3 { margin:0 0 4px; font-size:18px; }
.finish-capture-heading p { margin:0; color:var(--muted); font-size:10.5px; line-height:1.45; }
.finish-capture-icon,.finish-review-icon {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--accent-soft);
  color:var(--accent);
}
.finish-note-shell { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.finish-note-shell:focus-within { border-color:color-mix(in srgb,var(--accent) 70%,var(--line)); box-shadow:0 0 0 3px var(--accent-soft); }
.finish-note-shell .finish-note {
  width:100%;
  min-height:150px;
  padding:14px;
  border:0;
  border-radius:0;
  resize:vertical;
  background:transparent;
  box-shadow:none;
  line-height:1.55;
}
.finish-note-controls {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:7px 9px;
  border-top:1px solid var(--line);
  background:var(--surface-2);
}
.finish-note-controls > span { color:var(--muted); font-size:9.5px; }
.finish-note-controls > span:last-child { text-align:right; white-space:nowrap; }
.finish-voice-button {
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));
  border-radius:11px;
  background:var(--accent-soft);
  color:var(--accent);
  font:inherit;
  font-size:10px;
  font-weight:850;
  cursor:pointer;
}
.finish-voice-button .icon { width:16px; height:16px; }
.finish-voice-button.listening { border-color:rgba(235,83,83,.65); background:rgba(235,83,83,.12); color:#ff8d8d; }
.finish-voice-button.unavailable { border-color:var(--line); background:var(--surface-3); color:var(--muted); }
.finish-prompt-line { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.finish-prompt-line span { padding:5px 8px; border-radius:999px; background:var(--surface); color:var(--muted); font-size:9px; }
.finish-ai-choice {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin-top:11px;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface-2);
  cursor:pointer;
}
.finish-ai-choice > input { position:absolute; opacity:0; pointer-events:none; }
.finish-ai-switch { position:relative; width:39px; height:23px; border-radius:99px; background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line); transition:.18s ease; }
.finish-ai-switch::after { content:''; position:absolute; width:17px; height:17px; left:3px; top:3px; border-radius:50%; background:var(--muted); transition:.18s ease; }
.finish-ai-choice > input:checked + .finish-ai-switch { background:var(--accent-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,var(--line)); }
.finish-ai-choice > input:checked + .finish-ai-switch::after { transform:translateX(16px); background:var(--accent); }
.finish-ai-choice strong,.finish-ai-choice small { display:block; }
.finish-ai-choice strong { font-size:11.5px; }
.finish-ai-choice small { margin-top:3px; color:var(--muted); font-size:9.5px; line-height:1.35; }
.finish-optional-details,.finish-review-details { margin-top:10px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); overflow:hidden; }
.finish-optional-details > summary,.finish-review-details > summary {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  padding:12px 13px;
  cursor:pointer;
  list-style:none;
}
.finish-optional-details > summary::-webkit-details-marker,.finish-review-details > summary::-webkit-details-marker { display:none; }
.finish-optional-details summary strong,.finish-optional-details summary small,.finish-review-details summary strong,.finish-review-details summary small { display:block; }
.finish-optional-details summary strong,.finish-review-details summary strong { font-size:11.5px; }
.finish-optional-details summary small,.finish-review-details summary small { margin-top:3px; color:var(--muted); font-size:9.5px; }
.finish-optional-details summary > .icon,.finish-review-details summary > .icon { width:16px; height:16px; color:var(--muted); transition:.18s ease; }
.finish-optional-details[open] summary > .icon,.finish-review-details[open] summary > .icon { transform:rotate(90deg); }
.finish-optional-details-body,.finish-review-details-body { display:grid; gap:10px; padding:0 12px 12px; border-top:1px solid var(--line); }
.finish-optional-details-body > :first-child,.finish-review-details-body > :first-child { margin-top:12px; }
.finish-compact-context,.finish-review-note { padding:11px 12px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.finish-compact-context span,.finish-review-note span { color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.finish-compact-context p,.finish-review-note p { margin:6px 0 0; font-size:10.5px; line-height:1.45; }
.finish-primary-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
}
.finish-primary-footer > span { color:var(--muted); font-size:9.5px; line-height:1.35; }
.finish-primary-footer .primary-button { min-width:190px; }
.finish-review-hero {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:center;
  margin-bottom:11px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(135deg,var(--accent-soft),var(--surface-2) 70%);
}
.finish-review-hero h3 { margin:0 0 4px; font-size:18px; }
.finish-review-hero p:not(.eyebrow) { margin:0; color:var(--muted); font-size:10.5px; }
.finish-review-simple { display:grid; gap:10px; }
.finish-review-field { display:grid; gap:6px; padding:13px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); }
.finish-review-field > span { font-size:11px; font-weight:850; }
.finish-review-field > span small { color:var(--muted); font-weight:600; }
.finish-review-field textarea { min-height:94px; line-height:1.5; }
.finish-review-field > small { color:var(--muted); font-size:9.5px; line-height:1.35; }
.finish-review-field.compact { padding:0; border:0; background:transparent; }
.finish-review-field.compact textarea { min-height:76px; }
.finish-progress-options { gap:7px; }
.finish-progress-option,.finish-reference-option,.finish-material-quick {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface);
}
.finish-progress-option input,.finish-reference-option input,.finish-material-quick input { width:19px; height:19px; accent-color:var(--accent); }
.finish-progress-option strong,.finish-progress-option small,.finish-reference-option strong,.finish-reference-option small,.finish-material-quick strong,.finish-material-quick small { display:block; }
.finish-progress-option strong,.finish-reference-option strong,.finish-material-quick strong { font-size:10.5px; }
.finish-progress-option small,.finish-reference-option small,.finish-material-quick small { margin-top:3px; color:var(--muted); font-size:9px; }
.finish-reference-option button { border:0; background:transparent; color:var(--accent); font:inherit; font-size:9.5px; font-weight:850; cursor:pointer; }
.finish-review-mini-section { padding:11px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.finish-review-mini-section h3 { margin:0 0 8px; font-size:11.5px; }
.finish-review-mini-section p { margin:5px 0; color:var(--muted); font-size:10px; line-height:1.4; }
.finish-evidence-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.finish-guardrail-compact { margin-top:10px; }
.finish-review-footer { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:8px; margin-top:12px; }
.finish-review-footer button { width:100%; }
body.light .finish-capture-main,body.light .finish-ai-choice,body.light .finish-optional-details,body.light .finish-review-details,body.light .finish-review-hero,body.light .finish-review-field {
  border-color:rgba(18,34,29,.30);
  box-shadow:0 8px 20px rgba(24,40,33,.045),inset 0 1px 0 rgba(255,255,255,.78);
}
@media(max-width:699px){
  .finish-dialog { width:100%; }
  .finish-capture-main { padding:13px; }
  .finish-capture-heading h3,.finish-review-hero h3 { font-size:16px; }
  .finish-note-shell .finish-note { min-height:170px; }
  .finish-note-controls { grid-template-columns:1fr auto; }
  .finish-note-controls > span:nth-child(2) { grid-column:1/-1; grid-row:2; }
  .finish-voice-button { justify-self:start; }
  .finish-ai-choice { grid-template-columns:auto minmax(0,1fr) auto; }
  .finish-ai-choice > input { position:absolute; }
  .finish-ai-choice .finish-ai-switch { grid-column:1; }
  .finish-primary-footer { display:grid; grid-template-columns:1fr; }
  .finish-primary-footer .primary-button { width:100%; min-width:0; }
  .finish-primary-footer > span { text-align:center; }
  .finish-evidence-grid { grid-template-columns:1fr; }
  .finish-review-footer { grid-template-columns:1fr; }
}
@media(max-width:380px){
  .finish-ai-choice { grid-template-columns:auto minmax(0,1fr); }
  .finish-ai-choice > .pill { grid-column:2; justify-self:start; }
  .finish-prompt-line span { font-size:8.5px; }
}

/* v0.7.1 mobile capture refinement */
@media(max-width:699px){
  .finish-note-shell .finish-note { min-height:145px; }
  .finish-primary-footer.finish-action-bar {
    position:static;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:0;
    background:transparent;
    backdrop-filter:none;
  }
}


/* v0.7.2 — diary list, pupil ordering, manual progress and border-only button hover */
.diary-list-control > span { display:grid; gap:3px; }
.diary-list-control small { color:var(--muted); font-size:9.5px; font-weight:600; }
.diary-list-view .diary-list-stack { display:grid; gap:13px; margin-top:14px; }
.diary-list-view .diary-list-day { display:grid; gap:7px; }
.diary-list-view .diary-date-label { position:sticky; top:0; z-index:2; padding:7px 4px; background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(10px); }

.progress-overview-card {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:14px;
  margin-bottom:11px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:17px;
  background:linear-gradient(135deg,var(--accent-soft),var(--surface-2) 72%);
}
.progress-overall-score {
  width:82px;
  height:82px;
  display:grid;
  place-content:center;
  text-align:center;
  border:1px solid color-mix(in srgb,var(--accent) 46%,var(--line));
  border-radius:24px;
  background:var(--surface);
  box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--accent-soft) 74%,transparent);
}
.progress-overall-score strong { color:var(--accent); font-size:23px; line-height:1; }
.progress-overall-score span { margin-top:5px; color:var(--muted); font-size:8.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.progress-overview-card h3 { margin:2px 0 5px; font-size:17px; }
.progress-overview-card p:not(.eyebrow) { margin:0; color:var(--muted); font-size:10.5px; line-height:1.5; }
.progress-level-guide { margin-bottom:11px; padding:12px; border:1px solid var(--line); border-radius:15px; background:var(--surface-2); }
.progress-level-guide > strong { display:block; margin-bottom:8px; font-size:10.5px; }
.progress-level-guide > div { display:flex; flex-wrap:wrap; gap:6px; }
.progress-level-guide span { display:inline-flex; align-items:center; gap:5px; padding:6px 8px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted); font-size:8.5px; }
.progress-level-guide span b { color:var(--text); font-size:9px; }
.progress-level-guide span i { width:8px; height:8px; border-radius:50%; background:var(--surface-3); }
.progress-level-guide span i:not(.guide-level-0) { background:var(--accent); opacity:.35; }
.progress-level-guide .guide-level-2 { opacity:.5; }
.progress-level-guide .guide-level-3 { opacity:.65; }
.progress-level-guide .guide-level-4 { opacity:.82; }
.progress-level-guide .guide-level-5 { opacity:1; }
.clearer-snapshot { margin-bottom:11px; }
.readable-skill-group > summary { min-height:58px; }
.readable-skill-group > summary > span:first-child { min-width:0; }
.readable-skill-group > summary strong,.readable-skill-group > summary small { display:block; }
.readable-skill-group > summary small { margin-top:4px; color:var(--muted); font-size:9px; font-weight:650; }
.editable-skill-row {
  grid-template-columns:minmax(170px,1fr) auto minmax(154px,auto);
  gap:12px;
  min-height:62px;
  padding:10px 12px;
}
.skill-copy { min-width:0; }
.skill-copy strong,.skill-copy small { display:block; }
.skill-copy strong { font-size:10.5px; line-height:1.35; }
.skill-copy small { margin-top:4px; color:var(--muted); font-size:9px; }
.skill-level-editor select {
  width:154px;
  min-height:36px;
  padding:0 30px 0 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text);
  font:inherit;
  font-size:9.5px;
  font-weight:750;
  cursor:pointer;
  outline:0;
}
.skill-level-editor select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
body.light .progress-overview-card,body.light .progress-level-guide,body.light .skill-level-editor select { border-color:rgba(20,46,36,.28); }

/* A consistent hover language: the border turns green, while the button fill stays unchanged. */
@media (hover:hover) {
  .primary-button,.secondary-button,.danger-button,.icon-button,.text-button,.segmented button,.filter-button,.finish-voice-button,.pupil-sort-control {
    transition:border-color .16s ease,box-shadow .16s ease,color .16s ease;
  }
  .secondary-button:hover,.icon-button:hover,.danger-button:hover,.finish-voice-button:hover,.pupil-sort-control:hover,
  .secondary-button:focus-visible,.icon-button:focus-visible,.danger-button:focus-visible,.finish-voice-button:focus-visible,.pupil-sort-control:focus-within {
    border-color:var(--accent) !important;
    box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 72%,transparent) !important;
    transform:none !important;
  }
  .primary-button:hover,.primary-button:focus-visible {
    box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 70%,transparent),0 10px 25px rgba(38,199,124,.18) !important;
    transform:none !important;
  }
  .text-button:hover,.text-button:focus-visible {
    box-shadow:inset 0 0 0 1px var(--accent) !important;
    border-radius:9px;
    background:transparent !important;
    color:var(--accent) !important;
    transform:none !important;
  }
  .segmented button:hover,.segmented button:focus-visible {
    box-shadow:inset 0 0 0 1px var(--accent) !important;
    background:transparent !important;
    color:var(--text) !important;
    transform:none !important;
  }
  .segmented button.active:hover,.segmented button.active:focus-visible { background:var(--surface-3) !important; }
  .secondary-button:hover { background:var(--surface-3) !important; color:var(--text) !important; }
  .icon-button:hover { background:var(--surface) !important; color:inherit !important; }
  .icon-button.quiet:hover { background:var(--surface-2) !important; }
  .danger-button:hover { background:var(--red-soft) !important; color:var(--red) !important; }
  .primary-button:hover { background:linear-gradient(135deg,var(--accent),var(--accent-strong)) !important; color:#06150e !important; }
  body.light .secondary-button:hover { background:var(--surface-3) !important; color:var(--text) !important; }
  body.light .icon-button:hover { background:var(--surface) !important; color:inherit !important; }
  body.light .icon-button.quiet:hover { background:var(--surface-2) !important; }
  body.light .primary-button:hover { background:linear-gradient(135deg,var(--accent),var(--accent-strong)) !important; }
  body.light .text-button:hover { background:transparent !important; color:var(--accent) !important; }
  .primary-button:hover::after,.secondary-button:hover::after,.icon-button:hover::after,.text-button:hover::after,.danger-button:hover::after,.segmented button:hover::after { opacity:0 !important; transform:none !important; }
}

@media(max-width:720px){
  .simple-diary-toolbar [data-diary-modes] { width:100%; }
  .diary-list-control { align-items:flex-start; }
  .progress-overview-card { grid-template-columns:1fr; }
  .progress-overall-score { width:74px; height:74px; }
  .editable-skill-row { grid-template-columns:minmax(0,1fr) auto; gap:8px; }
  .editable-skill-row .level-dots { justify-self:end; }
  .skill-level-editor { grid-column:1/-1; }
  .skill-level-editor select { width:100%; }
}

/* v0.7.2 — Money and Reports restored to the desktop sidebar. */
@media (min-width:700px){
  .menu-list .mobile-more-only{display:none;}
  .nav-list{gap:5px;}
  .nav-item{min-height:44px;}
}

.progress-calculation{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:9px;padding-top:9px;border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent);font-size:9.5px;}
.progress-calculation strong{color:var(--text);}
.progress-calculation span{color:var(--muted);}

/* Final hover rule: green outline only; normal fills and positions remain unchanged. */
.primary-button,.danger-button,.text-button,.nav-item{border:1px solid transparent;}
.icon-button.quiet{border:1px solid transparent;}
@media (hover:hover){
  .primary-button:hover,.secondary-button:hover,.danger-button:hover,.icon-button:hover,.text-button:hover,
  .filter-button:hover,.segmented button:hover,.finish-voice-button:hover,.pupil-sort-control:hover,
  .quick-action:hover,.day-item:hover,.attention-item:hover,.diary-mobile-event:hover,.pupil-row:hover,
  .slot-suggestion:hover,.menu-list button:hover,.quick-grid button:hover,.nav-item:hover,.sidebar-profile:hover,
  .primary-button:focus-visible,.secondary-button:focus-visible,.danger-button:focus-visible,.icon-button:focus-visible,.text-button:focus-visible,
  .filter-button:focus-visible,.segmented button:focus-visible,.finish-voice-button:focus-visible,.pupil-sort-control:focus-within,
  .quick-action:focus-visible,.day-item:focus-visible,.attention-item:focus-visible,.diary-mobile-event:focus-visible,.pupil-row:focus-visible,
  .slot-suggestion:focus-visible,.menu-list button:focus-visible,.quick-grid button:focus-visible,.nav-item:focus-visible,.sidebar-profile:focus-visible{
    border-color:var(--accent)!important;
    box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 70%,transparent)!important;
    transform:none!important;
  }
  .primary-button:hover,.primary-button:focus-visible{background:linear-gradient(135deg,var(--accent),var(--accent-strong))!important;color:#06150e!important;}
  .secondary-button:hover,.secondary-button:focus-visible{background:var(--surface-3)!important;color:var(--text)!important;}
  .danger-button:hover,.danger-button:focus-visible{background:var(--red-soft)!important;color:var(--red)!important;}
  .text-button:hover,.text-button:focus-visible{background:transparent!important;color:var(--accent)!important;}
  .icon-button:hover,.icon-button:focus-visible{background:var(--surface)!important;color:inherit!important;}
  .icon-button.quiet:hover,.icon-button.quiet:focus-visible{background:var(--surface-2)!important;}
  .filter-button:hover,.filter-button:focus-visible{background:var(--surface)!important;}
  .segmented button:hover,.segmented button:focus-visible{background:transparent!important;color:var(--text)!important;}
  .segmented button.active:hover,.segmented button.active:focus-visible{background:var(--surface-3)!important;}
  .finish-voice-button:hover,.finish-voice-button:focus-visible{background:var(--accent-soft)!important;color:var(--accent)!important;}
  .quick-action:hover,.quick-action:focus-visible{background:var(--surface)!important;}
  .day-item:hover,.day-item:focus-visible,.attention-item:hover,.attention-item:focus-visible,.menu-list button:hover,.menu-list button:focus-visible,.quick-grid button:hover,.quick-grid button:focus-visible{background:var(--surface-2)!important;color:var(--text)!important;}
  .nav-item:hover,.nav-item:focus-visible{background:transparent!important;color:var(--text)!important;}
  .nav-item.active:hover,.nav-item.active:focus-visible{background:var(--accent-soft)!important;}
  .primary-button:hover::after,.secondary-button:hover::after,.danger-button:hover::after,.icon-button:hover::after,.text-button:hover::after,
  .filter-button:hover::after,.quick-action:hover::after,.day-item:hover::after,.attention-item:hover::after,.nav-item:hover::after{opacity:0!important;transform:none!important;}
}

/* v0.7.3 — enlarged pupil workspace and large, touch-first Progress editor */
.pupil-profile-dialog {
  width:min(1320px,calc(100vw - 36px));
  max-height:96dvh;
}
.pupil-profile-dialog .sheet-card {
  max-height:96dvh;
  padding:26px;
}
.pupil-profile-dialog .simple-profile-header {
  position:sticky;
  top:-26px;
  z-index:12;
  margin:-26px -26px 18px;
  padding:22px 26px 17px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 82%,transparent);
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(18px);
}
.pupil-profile-dialog .pupil-profile-head { gap:16px; }
.pupil-profile-dialog .pupil-profile-head .pupil-avatar {
  width:72px;
  height:72px;
  border-radius:22px;
  font-size:22px;
}
.pupil-profile-dialog .pupil-profile-head h2 { font-size:28px; line-height:1.08; }
.pupil-profile-dialog .profile-head-badges { margin-top:9px; gap:7px; }
.pupil-profile-dialog .simple-profile-summary { gap:12px; margin-bottom:14px; }
.pupil-profile-dialog .simple-profile-summary > div {
  min-height:104px;
  padding:16px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.pupil-profile-dialog .simple-profile-summary span { font-size:11px; }
.pupil-profile-dialog .simple-profile-summary strong { margin-top:7px; font-size:18px; line-height:1.15; }
.pupil-profile-dialog .simple-profile-summary small { margin-top:6px; font-size:10.5px; line-height:1.4; }
.pupil-profile-dialog .simple-profile-actions { gap:12px; margin-bottom:14px; }
.pupil-profile-dialog .simple-profile-actions button { min-height:52px; font-size:13px; }
.pupil-profile-dialog .simple-focus-card {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  gap:22px;
  align-items:start;
  padding:20px;
  margin-bottom:14px;
  border-radius:20px;
}
.pupil-profile-dialog .simple-focus-card h3 { font-size:24px; }
.pupil-profile-dialog .simple-focus-card p { font-size:12.5px; line-height:1.55; }
.pupil-profile-dialog .simple-last-record { margin:0; padding:0 0 0 22px; border-top:0; border-left:1px solid var(--line); }
.pupil-profile-dialog .simple-profile-sections { gap:10px; }

.profile-progress-featured {
  border-color:color-mix(in srgb,var(--accent) 34%,var(--line));
  border-radius:21px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent-soft) 28%,var(--surface)),var(--surface) 24%);
  box-shadow:0 18px 48px rgba(0,0,0,.12);
}
.profile-progress-featured > summary {
  min-height:82px;
  padding:16px 18px;
  border-bottom-color:color-mix(in srgb,var(--accent) 20%,var(--line));
}
.profile-progress-featured > summary > span:first-child { min-width:0; }
.profile-progress-featured > summary > span:first-child strong { font-size:17px; }
.profile-progress-featured > summary > span:first-child small { margin-top:5px; font-size:10.5px; }
.profile-progress-featured > summary .profile-progress-summary {
  margin-left:auto;
  min-width:76px;
  padding:8px 11px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
  border-radius:14px;
  background:var(--surface-2);
  text-align:center;
}
.profile-progress-featured > summary .profile-progress-summary strong { color:var(--accent); font-size:18px; line-height:1; }
.profile-progress-featured > summary .profile-progress-summary small { margin-top:3px; font-size:8.5px; text-transform:uppercase; letter-spacing:.07em; }
.profile-progress-featured .profile-disclosure-content { padding:0 18px 20px; }

.progress-overview-large {
  grid-template-columns:120px minmax(0,1fr);
  gap:20px;
  padding:20px;
  margin-bottom:15px;
  border-radius:20px;
}
.progress-overview-large .progress-overall-score {
  width:112px;
  height:112px;
  border-radius:32px;
  box-shadow:inset 0 0 0 8px color-mix(in srgb,var(--accent-soft) 78%,transparent),0 12px 28px rgba(0,0,0,.13);
}
.progress-overview-large .progress-overall-score strong { font-size:31px; }
.progress-overview-large .progress-overall-score span { font-size:9px; }
.progress-overview-copy h3 { margin:3px 0 7px; font-size:24px; }
.progress-overview-copy p:not(.eyebrow) { max-width:760px; font-size:12px; line-height:1.55; }
.progress-overview-large .progress-calculation { font-size:10.5px; }
.progress-key-metrics {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.progress-key-metrics > div {
  min-height:74px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:15px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);
}
.progress-key-metrics strong { font-size:21px; }
.progress-key-metrics span { margin-top:4px; color:var(--muted); font-size:9.5px; font-weight:750; text-transform:uppercase; letter-spacing:.055em; }

.progress-level-guide-large,
.progress-groups-section,
.progress-priority-section,
.progress-skill-editor {
  margin:0 0 15px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface-2);
}
.progress-section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.progress-section-heading h3 { margin:3px 0 0; font-size:19px; }
.progress-section-heading > span { color:var(--muted); font-size:10px; text-align:right; }
.progress-level-guide-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
}
.progress-level-guide-item {
  min-width:0;
  min-height:88px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
}
.progress-level-guide-item > b {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface-3);
  font-size:14px;
}
.progress-level-guide-item:not(.level-0) > b { border-color:color-mix(in srgb,var(--accent) 48%,var(--line)); color:var(--accent); }
.progress-level-guide-item strong,.progress-level-guide-item small { display:block; }
.progress-level-guide-item strong { font-size:10px; line-height:1.25; }
.progress-level-guide-item small { margin-top:4px; color:var(--muted); font-size:8.5px; line-height:1.35; }

.progress-group-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.progress-group-card {
  min-width:0;
  min-height:148px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--surface);
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.progress-group-card-head {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:12px;
}
.progress-group-card-head > span { min-width:0; }
.progress-group-card-head small,.progress-group-card-head strong { display:block; }
.progress-group-card-head small { color:var(--muted); font-size:8.5px; text-transform:uppercase; letter-spacing:.065em; }
.progress-group-card-head strong { margin-top:6px; font-size:12px; line-height:1.35; }
.progress-group-card-head > b { flex:0 0 auto; color:var(--accent); font-size:22px; }
.progress-group-track {
  display:block;
  height:10px;
  margin:16px 0 12px;
  overflow:hidden;
  border-radius:999px;
  background:var(--surface-3);
}
.progress-group-track > i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-strong)); }
.progress-group-card-meta em,.progress-group-card-meta small { display:block; }
.progress-group-card-meta em { color:var(--text); font-size:9.5px; font-style:normal; font-weight:800; }
.progress-group-card-meta small { margin-top:4px; color:var(--muted); font-size:8.5px; line-height:1.35; }
@media (hover:hover) {
  .progress-group-card:hover,.progress-group-card:focus-visible { border-color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 65%,transparent); outline:0; }
}

.progress-priority-section { background:var(--surface); }
.progress-priority-section .training-snapshot-head { margin-bottom:13px; }
.progress-skill-editor { margin-bottom:0; background:var(--surface); }
.editable-skill-overview { display:grid; gap:11px; }
.large-skill-group {
  scroll-margin-top:90px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--surface-2);
  overflow:hidden;
}
.large-skill-group > summary {
  min-height:76px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  cursor:pointer;
  list-style:none;
}
.large-skill-group > summary::-webkit-details-marker { display:none; }
.skill-group-title { min-width:0; display:flex; align-items:center; gap:12px; }
.skill-group-title > b {
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:13px;
}
.skill-group-title strong,.skill-group-title small { display:block; }
.skill-group-title strong { font-size:13px; line-height:1.35; }
.skill-group-title small { margin-top:4px; color:var(--muted); font-size:9.5px; }
.skill-group-score { min-width:70px; text-align:right; }
.skill-group-score strong,.skill-group-score small { display:block; }
.skill-group-score strong { color:var(--accent); font-size:18px; }
.skill-group-score small { margin-top:2px; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.06em; }
.large-skill-group > summary > .icon { color:var(--muted); transition:transform .18s ease; }
.large-skill-group[open] > summary > .icon { transform:rotate(90deg); }
.large-skill-list { display:grid; gap:9px; padding:0 12px 12px; border-top:1px solid var(--line); }
.large-editable-skill-row {
  min-height:118px;
  display:grid;
  grid-template-columns:minmax(210px,.8fr) minmax(430px,1.2fr);
  align-items:center;
  gap:18px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface);
}
.large-editable-skill-row:first-child { margin-top:12px; }
.large-editable-skill-row .skill-copy { display:flex; align-items:center; gap:12px; }
.large-editable-skill-row .skill-number {
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--surface-3);
  color:var(--accent);
  font-size:11px;
  font-weight:850;
}
.large-editable-skill-row .skill-copy strong { font-size:12px; }
.large-editable-skill-row .skill-copy small { margin-top:5px; font-size:9.5px; }
.large-editable-skill-row .skill-copy small b { color:var(--text); }
.skill-level-scale {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
}
.skill-level-choice {
  min-width:0;
  min-height:58px;
  padding:7px 4px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface-2);
  color:var(--muted);
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}
.skill-level-choice b,.skill-level-choice small { display:block; }
.skill-level-choice b { color:var(--text); font-size:14px; }
.skill-level-choice small { margin-top:4px; overflow:hidden; text-overflow:ellipsis; font-size:7.5px; white-space:nowrap; }
.skill-level-choice.active {
  border-color:var(--accent);
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent);
  color:var(--accent);
}
.skill-level-choice.active b { color:var(--accent); }
@media (hover:hover) {
  .skill-level-choice:hover,.skill-level-choice:focus-visible { border-color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent); outline:0; }
}

body.light .profile-progress-featured,
body.light .progress-level-guide-large,
body.light .progress-groups-section,
body.light .progress-priority-section,
body.light .progress-skill-editor,
body.light .progress-group-card,
body.light .large-skill-group,
body.light .large-editable-skill-row,
body.light .skill-level-choice { border-color:rgba(20,46,36,.25); }

@media (max-width:1180px) {
  .progress-level-guide-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .progress-group-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .large-editable-skill-row { grid-template-columns:1fr; }
}

@media (max-width:699px) {
  .pupil-profile-dialog {
    width:100vw;
    height:100dvh;
    max-height:100dvh;
    margin:0;
    border-radius:0;
  }
  .pupil-profile-dialog .sheet-card {
    width:100%;
    height:100dvh;
    max-height:100dvh;
    padding:12px 13px calc(22px + env(safe-area-inset-bottom));
    border:0;
    border-radius:0;
  }
  .pupil-profile-dialog .sheet-handle { display:none; }
  .pupil-profile-dialog .simple-profile-header {
    top:-12px;
    margin:-12px -13px 13px;
    padding:calc(12px + env(safe-area-inset-top)) 13px 12px;
  }
  .pupil-profile-dialog .pupil-profile-head { gap:11px; }
  .pupil-profile-dialog .pupil-profile-head .pupil-avatar { width:54px; height:54px; border-radius:17px; font-size:17px; }
  .pupil-profile-dialog .pupil-profile-head h2 { font-size:22px; }
  .pupil-profile-dialog .simple-profile-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .pupil-profile-dialog .simple-profile-summary > div { min-height:94px; padding:12px; border-radius:15px; }
  .pupil-profile-dialog .simple-profile-summary strong { font-size:15px; }
  .pupil-profile-dialog .simple-profile-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .pupil-profile-dialog .simple-profile-actions button { min-height:48px; font-size:11px; }
  .pupil-profile-dialog .simple-focus-card { display:block; padding:15px; }
  .pupil-profile-dialog .simple-focus-card h3 { font-size:20px; }
  .pupil-profile-dialog .simple-last-record { margin-top:13px; padding:13px 0 0; border-top:1px solid var(--line); border-left:0; }
  .profile-progress-featured > summary { min-height:76px; padding:13px; gap:8px; }
  .profile-progress-featured > summary > span:first-child strong { font-size:15px; }
  .profile-progress-featured > summary > span:first-child small { font-size:9px; line-height:1.35; }
  .profile-progress-featured > summary .profile-progress-summary { min-width:62px; padding:7px 8px; }
  .profile-progress-featured > summary .profile-progress-summary strong { font-size:16px; }
  .profile-progress-featured .profile-disclosure-content { padding:0 10px 12px; }
  .progress-overview-large { grid-template-columns:86px minmax(0,1fr); gap:12px; padding:14px; }
  .progress-overview-large .progress-overall-score { width:82px; height:82px; border-radius:24px; box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--accent-soft) 78%,transparent); }
  .progress-overview-large .progress-overall-score strong { font-size:23px; }
  .progress-overview-copy h3 { font-size:18px; }
  .progress-overview-copy p:not(.eyebrow) { font-size:10px; }
  .progress-overview-large .progress-calculation { display:grid; gap:3px; font-size:9px; }
  .progress-key-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .progress-key-metrics > div { min-height:64px; padding:9px; text-align:center; }
  .progress-key-metrics strong { font-size:18px; }
  .progress-key-metrics span { font-size:7.5px; }
  .progress-level-guide-large,.progress-groups-section,.progress-priority-section,.progress-skill-editor { padding:13px; border-radius:17px; }
  .progress-section-heading { display:block; }
  .progress-section-heading h3 { font-size:17px; }
  .progress-section-heading > span { display:block; margin-top:5px; text-align:left; font-size:9px; }
  .progress-level-guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .progress-level-guide-item { min-height:72px; grid-template-columns:30px minmax(0,1fr); padding:9px; }
  .progress-level-guide-item > b { width:30px; height:30px; }
  .progress-level-guide-item strong { font-size:9px; }
  .progress-level-guide-item small { font-size:7.5px; }
  .progress-group-grid { grid-template-columns:1fr; gap:8px; }
  .progress-group-card { min-height:126px; padding:13px; }
  .progress-group-card-head strong { font-size:11.5px; }
  .large-skill-group { scroll-margin-top:82px; }
  .large-skill-group > summary { min-height:72px; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; padding:12px; }
  .skill-group-title { gap:9px; }
  .skill-group-title > b { width:34px; height:34px; flex-basis:34px; }
  .skill-group-title strong { font-size:11px; }
  .skill-group-title small { font-size:8px; }
  .skill-group-score { min-width:52px; }
  .skill-group-score strong { font-size:15px; }
  .large-skill-list { padding:0 8px 8px; }
  .large-editable-skill-row { min-height:0; grid-template-columns:1fr; gap:13px; padding:12px; }
  .large-editable-skill-row .skill-copy strong { font-size:11.5px; }
  .skill-level-scale { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .skill-level-choice { min-height:54px; }
  .skill-level-choice small { font-size:8px; }
}

@media (max-width:390px) {
  .pupil-profile-dialog .simple-profile-summary { grid-template-columns:1fr 1fr; }
  .progress-overview-large { grid-template-columns:1fr; }
  .progress-overview-large .progress-overall-score { width:88px; height:88px; }
  .progress-level-guide-grid { grid-template-columns:1fr; }
}
.simple-profile-summary small .inline-progress-value { display:inline; }


/* v0.7.4 — premium Progress and universal lesson checklist */
.profile-progress-featured {
  background:
    radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 30%),
    linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 92%,var(--accent-soft)),var(--surface) 58%);
  box-shadow:0 22px 64px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.025);
}
.progress-overview-large,.progress-level-guide-large,.progress-groups-section,.progress-priority-section,.progress-skill-editor {
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--line) 76%,var(--accent) 24%);
  box-shadow:0 14px 38px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.018);
}
.progress-overview-large::before,.progress-level-guide-large::before,.progress-skill-editor::before {
  content:"";position:absolute;inset:0 auto auto 0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 58%,transparent),transparent);
}
.progress-level-guide-grid { grid-template-columns:repeat(6,minmax(0,1fr)) !important; gap:9px; }
.progress-level-guide-item {
  min-height:76px;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:10px 8px;text-align:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--accent-soft)),var(--surface));
}
.progress-level-guide-item > b { width:32px;height:32px;margin:0 auto;border-radius:10px;font-size:15px; }
.progress-level-guide-item strong { font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.progress-level-guide-item small { display:none; }
.progress-group-card { background:linear-gradient(150deg,var(--surface),color-mix(in srgb,var(--surface-2) 92%,var(--accent-soft))); }
.large-editable-skill-row { box-shadow:inset 0 1px 0 rgba(255,255,255,.02); }
.skill-level-choice { min-height:60px;background:linear-gradient(180deg,var(--surface-2),color-mix(in srgb,var(--surface-2) 92%,#000)); }
.skill-level-choice.active { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 68%,transparent),0 0 22px color-mix(in srgb,var(--accent) 9%,transparent); }

.next-actions.three-actions { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
.next-actions.three-actions > button { min-width:0; width:100%; min-height:84px; padding:0 14px; border-radius:17px; }
.quick-strip { align-items:stretch; }
.quick-strip > .quick-action { width:100%; min-height:84px; }
.lesson-coverage-launch {
  width:100%;min-height:64px;display:grid;grid-template-columns:42px minmax(0,1fr) auto 18px;align-items:center;gap:12px;
  margin:0 0 14px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 55%,var(--surface-2)),var(--surface-2));color:var(--text);text-align:left;cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.lesson-coverage-launch:disabled { opacity:.58;cursor:not-allowed; }
.coverage-launch-icon,.coverage-hero-icon { width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--accent-soft);color:var(--accent); }
.lesson-coverage-launch strong,.lesson-coverage-launch small { display:block; }
.lesson-coverage-launch strong { font-size:13px; }
.lesson-coverage-launch small { margin-top:4px;color:var(--muted);font-size:9.5px;line-height:1.35; }
.coverage-launch-count { min-width:34px;height:34px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));border-radius:11px;color:var(--accent);font-weight:850; }
@media (hover:hover){.lesson-coverage-launch:not(:disabled):hover,.lesson-coverage-launch:not(:disabled):focus-visible{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),0 12px 28px rgba(0,0,0,.12);outline:0}}

.lesson-coverage-dialog { width:min(1120px,calc(100vw - 24px));max-height:96dvh; }
.lesson-coverage-dialog .sheet-card { width:100%;max-height:96dvh;padding:22px;overflow:auto; }
.lesson-coverage-header small { display:block;margin-top:5px;color:var(--muted);font-size:10px; }
.lesson-coverage-hero { display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:15px;margin:2px 0 14px;padding:17px;border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 62%,var(--surface-2)),var(--surface-2)); }
.lesson-coverage-hero h3 { margin:0 0 5px;font-size:19px; }
.lesson-coverage-hero p { margin:0;color:var(--muted);font-size:10.5px;line-height:1.45; }
.lesson-coverage-hero > strong { min-width:52px;height:52px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:16px;color:var(--accent);font-size:20px; }
.lesson-coverage-toolbar { display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px; }
.lesson-coverage-groups { display:grid;gap:9px; }
.lesson-coverage-group { border:1px solid var(--line);border-radius:16px;background:var(--surface-2);overflow:hidden; }
.lesson-coverage-group > summary { min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;list-style:none;cursor:pointer; }
.lesson-coverage-group > summary::-webkit-details-marker { display:none; }
.lesson-coverage-group > summary > span { display:flex;align-items:center;gap:10px;min-width:0; }
.lesson-coverage-group > summary b { width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:11px; }
.lesson-coverage-group > summary strong,.lesson-coverage-group > summary small { display:block; }
.lesson-coverage-group > summary strong { font-size:11.5px; }
.lesson-coverage-group > summary small { margin-top:3px;color:var(--muted);font-size:8.5px; }
.lesson-coverage-group > summary > .icon { color:var(--muted);transition:transform .16s ease; }
.lesson-coverage-group[open] > summary > .icon { transform:rotate(90deg); }
.lesson-coverage-skill-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 10px 10px;border-top:1px solid var(--line); }
.lesson-coverage-skill { min-height:58px;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:10px;margin-top:10px;padding:9px 10px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.coverage-skill-check { width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;color:var(--accent); }
.lesson-coverage-skill strong,.lesson-coverage-skill small { display:block; }
.lesson-coverage-skill strong { font-size:10.5px;line-height:1.3; }
.lesson-coverage-skill small { margin-top:3px;color:var(--muted);font-size:8px; }
.lesson-coverage-skill.selected { border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 66%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 48%,transparent); }
.lesson-coverage-skill.selected .coverage-skill-check { border-color:var(--accent);background:var(--accent);color:#04100b; }
.lesson-coverage-skill.ai-suggested:not(.selected) { border-style:dashed;border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); }
@media (hover:hover){.lesson-coverage-skill:hover,.lesson-coverage-skill:focus-visible{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 48%,transparent);outline:0}}
.lesson-coverage-footer { position:sticky;bottom:-22px;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:15px;margin:14px -22px -22px;padding:13px 22px calc(13px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(18px); }
.lesson-coverage-footer > span { color:var(--muted);font-size:10px; }
.lesson-coverage-footer > span strong { color:var(--accent);font-size:16px; }
.lesson-coverage-footer > div { display:flex;gap:8px; }

.finish-coverage-card { margin:0 0 14px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent-soft) 34%,var(--surface-2)),var(--surface-2));overflow:hidden; }
.finish-coverage-card > summary { min-height:70px;display:grid;grid-template-columns:minmax(0,1fr) auto 20px;align-items:center;gap:12px;padding:13px 15px;list-style:none;cursor:pointer; }
.finish-coverage-card > summary::-webkit-details-marker { display:none; }
.finish-coverage-card > summary strong,.finish-coverage-card > summary small { display:block; }
.finish-coverage-card > summary strong { font-size:13px; }
.finish-coverage-card > summary small { margin-top:4px;color:var(--muted);font-size:9px; }
.finish-coverage-count { min-width:54px;padding:7px 9px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:12px;text-align:center;color:var(--muted);font-size:9px; }
.finish-coverage-count b { color:var(--accent);font-size:16px; }
.finish-coverage-card > summary > .icon { color:var(--muted);transition:transform .16s ease; }
.finish-coverage-card[open] > summary > .icon { transform:rotate(90deg); }
.finish-coverage-body { padding:0 10px 10px;border-top:1px solid var(--line); }
.finish-coverage-body .lesson-coverage-toolbar { margin-top:10px; }
.lesson-coverage-groups.compact .lesson-coverage-group > summary { min-height:52px; }
.lesson-coverage-groups.compact .lesson-coverage-skill-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lesson-coverage-groups.compact .lesson-coverage-skill { min-height:52px; }
.finish-ai-coverage .lesson-coverage-groups { margin-top:2px; }

body.light .lesson-coverage-launch,body.light .lesson-coverage-hero,body.light .lesson-coverage-group,body.light .lesson-coverage-skill,body.light .finish-coverage-card { border-color:rgba(20,46,36,.24); }

@media(max-width:1180px){
  .progress-level-guide-grid { grid-template-columns:repeat(6,minmax(0,1fr)) !important; }
  .progress-level-guide-item { min-height:72px;padding:8px 5px; }
  .progress-level-guide-item strong { font-size:8.5px; }
}
@media(max-width:699px){
  .next-actions.three-actions { grid-template-columns:1fr 1fr; }
  .next-actions.three-actions .primary-button { grid-column:1/-1; }
  .lesson-coverage-launch { grid-template-columns:38px minmax(0,1fr) auto 16px;min-height:60px;padding:9px 10px;gap:9px;border-radius:15px; }
  .coverage-launch-icon { width:38px;height:38px;border-radius:11px; }
  .lesson-coverage-launch small { font-size:8.5px; }
  .lesson-coverage-dialog { width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0; }
  .lesson-coverage-dialog .sheet-card { height:100dvh;max-height:100dvh;padding:12px 12px calc(18px + env(safe-area-inset-bottom));border:0;border-radius:0; }
  .lesson-coverage-dialog .sheet-handle { display:none; }
  .lesson-coverage-header { position:sticky;top:-12px;z-index:7;margin:-12px -12px 10px;padding:calc(12px + env(safe-area-inset-top)) 12px 11px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 95%,transparent);backdrop-filter:blur(18px); }
  .lesson-coverage-hero { grid-template-columns:42px minmax(0,1fr) auto;padding:12px;gap:10px;border-radius:16px; }
  .lesson-coverage-hero .coverage-hero-icon { width:42px;height:42px; }
  .lesson-coverage-hero h3 { font-size:16px; }
  .lesson-coverage-hero p { font-size:9px; }
  .lesson-coverage-hero > strong { min-width:42px;height:42px;border-radius:13px;font-size:17px; }
  .lesson-coverage-skill-grid,.lesson-coverage-groups.compact .lesson-coverage-skill-grid { grid-template-columns:1fr;gap:6px;padding:0 7px 7px; }
  .lesson-coverage-skill { margin-top:7px;min-height:55px; }
  .lesson-coverage-footer { bottom:calc(-18px - env(safe-area-inset-bottom));margin:12px -12px calc(-18px - env(safe-area-inset-bottom));padding:10px 12px calc(10px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr; }
  .lesson-coverage-footer > div { display:grid;grid-template-columns:1fr 1fr; }
  .finish-coverage-card > summary { min-height:64px;padding:11px; }
  .finish-coverage-body { padding:0 7px 7px; }
  .progress-level-guide-large { padding:12px 8px !important; }
  .progress-level-guide-large .progress-section-heading { padding:0 4px; }
  .progress-level-guide-grid { grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:4px; }
  .progress-level-guide-item { min-height:66px;padding:7px 2px;border-radius:11px;gap:5px; }
  .progress-level-guide-item > b { width:28px;height:28px;border-radius:9px;font-size:14px; }
  .progress-level-guide-item strong { font-size:7px;letter-spacing:-.02em; }
  .skill-level-scale { grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:4px; }
  .skill-level-choice { min-height:48px;padding:5px 1px;border-radius:9px; }
  .skill-level-choice b { font-size:13px; }
  .skill-level-choice small { display:none; }
}
@media(max-width:390px){
  .progress-level-guide-grid { grid-template-columns:repeat(6,minmax(0,1fr)) !important; }
  .progress-level-guide-item strong { font-size:6.5px; }
}
/* Ensure the premium six-level scale is a real equal-width grid, overriding legacy pill rules. */
.progress-level-guide > .progress-level-guide-grid { display:grid !important; flex-wrap:nowrap; }
.progress-level-guide-grid .progress-level-guide-item > span {
  display:block;
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font-size:inherit;
}


/* Connected pupil and mock test — v0.8.0 */
.bank-settings-card .card-header{align-items:center}.bank-safety-note{margin-top:14px;padding:11px 13px;border:1px solid var(--line);border-radius:13px;color:var(--muted);font-size:.8rem;background:color-mix(in srgb,var(--panel) 88%,transparent)}
.pupil-connect-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:16px}.pupil-share-card{grid-column:1/-1}.sync-badge{padding:8px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.75rem;font-weight:800}.sync-badge.online{border-color:rgba(79,226,156,.42);color:var(--green)}.pupil-pair-controls{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;margin-top:16px}.pupil-pair-controls .field{margin:0}.pairing-result{display:flex;align-items:center;gap:14px;margin-top:15px;padding:16px;border:1px solid rgba(79,226,156,.28);border-radius:18px;background:linear-gradient(135deg,rgba(54,203,137,.09),rgba(54,203,137,.025))}.pairing-result>span,.pairing-result>small{color:var(--muted);font-size:.78rem}.pairing-result>strong{font-size:1.65rem;letter-spacing:.08em;color:var(--text)}.pairing-result>button{margin-left:auto}.pairing-result.empty{display:block;border-color:var(--line);background:var(--panel-2)}.pairing-result.empty p{margin:5px 0 0;color:var(--muted)}.pupil-app-address{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px}.pupil-app-address span{color:var(--muted);font-size:.75rem}.pupil-app-address strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem}.pupil-inbox-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}.pupil-inbox-summary span{padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}.pupil-inbox-summary strong,.pupil-inbox-summary small{display:block}.pupil-inbox-summary strong{font-size:1.35rem}.pupil-inbox-summary small{color:var(--muted)}.pupil-inbox-list{display:grid;gap:9px}.pupil-inbox-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:14px}.pupil-inbox-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(54,203,137,.1);color:var(--green)}.pupil-inbox-icon svg{width:19px;height:19px}.pupil-inbox-item p{margin:4px 0 0;color:var(--muted);font-size:.78rem;line-height:1.45}.empty-state.compact{padding:18px}
.mock-test-shell{display:grid;gap:14px}.mock-test-head{display:flex;justify-content:space-between;gap:28px;align-items:end}.mock-test-head h2{margin:4px 0}.mock-test-head p{margin:0;color:var(--muted)}.mock-test-fields{display:grid;grid-template-columns:minmax(190px,1fr) 155px;gap:10px;min-width:420px}.mock-test-fields label{display:grid;gap:6px;color:var(--muted);font-size:.72rem;font-weight:800}.mock-test-grid{columns:3 310px;column-gap:14px}.mock-group{break-inside:avoid;margin:0 0 14px;padding:13px;border:1px solid var(--line);border-radius:17px;background:var(--panel)}.mock-group header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.mock-group h3{margin:0;font-size:.96rem}.mock-group header span{color:var(--muted);font-size:.65rem}.mock-row-list{display:grid;gap:6px}.mock-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 8px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2)}.mock-row>strong{font-size:.75rem}.mock-row-controls{display:flex;align-items:center;gap:4px}.mock-step,.mock-severity{display:grid;place-items:center;width:29px;height:29px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--text);font-weight:900}.mock-count{display:grid;place-items:center;width:24px;font-weight:900}.mock-severity.selected.serious{border-color:#ffc55c;background:rgba(255,197,92,.16);color:#ffd77e}.mock-severity.selected.dangerous{border-color:#ff7b7b;background:rgba(255,90,90,.15);color:#ff9b9b}.mock-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.mock-check{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);color:var(--text);text-align:left}.mock-check strong{font-size:.72rem}.mock-check .check-box{display:grid;place-items:center;flex:0 0 25px;height:25px;border:1px solid var(--line);border-radius:8px}.mock-check.selected{border-color:rgba(79,226,156,.65)}.mock-check.selected .check-box{background:var(--green);color:#05120d}.mock-check svg{width:15px;height:15px}.mock-test-result-bar{position:static;bottom:calc(14px + var(--mobile-browser-bottom,0px));z-index:8;display:grid;grid-template-columns:repeat(4,minmax(90px,1fr)) auto auto;gap:8px;align-items:center;padding:10px 12px;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.mock-test-result-bar>div{padding:7px 10px;border-right:1px solid var(--line)}.mock-test-result-bar span,.mock-test-result-bar strong{display:block}.mock-test-result-bar span{color:var(--muted);font-size:.65rem}.mock-test-result-bar strong{margin-top:2px}.mock-result.pass strong{color:var(--green)}.mock-result.fail strong{color:#ff9b9b}
@media(max-width:1050px){.pupil-connect-layout{grid-template-columns:1fr}.pupil-share-card{grid-column:auto}.mock-test-grid{columns:2 300px}.mock-test-result-bar{grid-template-columns:repeat(4,1fr)}.mock-test-result-bar button{grid-column:span 2}}
@media(max-width:700px){.pupil-pair-controls{grid-template-columns:1fr}.pairing-result{display:grid;grid-template-columns:1fr auto}.pairing-result>strong{grid-column:1/-1}.pairing-result>button{grid-column:2;grid-row:1;margin:0}.pupil-app-address{grid-template-columns:1fr auto}.pupil-app-address strong{grid-column:1/-1;grid-row:2}.pupil-inbox-summary{grid-template-columns:repeat(3,1fr)}.pupil-inbox-item{grid-template-columns:auto 1fr}.pupil-inbox-item button{grid-column:2;justify-self:start}.mock-test-head{display:grid}.mock-test-fields{grid-template-columns:1fr 1fr;min-width:0}.mock-test-grid{columns:1}.mock-group{padding:12px}.mock-row{grid-template-columns:1fr}.mock-row-controls{justify-content:space-between}.mock-step,.mock-severity{width:40px;height:38px}.mock-count{width:34px}.mock-test-result-bar{bottom:calc(80px + var(--mobile-browser-bottom,0px));grid-template-columns:repeat(2,1fr)}.mock-test-result-bar button{grid-column:span 1}.mock-check-grid{grid-template-columns:1fr 1fr}}
@media(min-width:701px){.mock-test-result-bar{position:static}}
.profile-mock-summary{display:grid;grid-template-columns:1.4fr repeat(3,.65fr) auto;gap:10px;align-items:center;width:100%;margin:0 0 14px;padding:14px 16px;border:1px solid var(--line);border-radius:17px;background:var(--panel);color:var(--text);text-align:left}.profile-mock-summary span small,.profile-mock-summary span strong{display:block}.profile-mock-summary span small{color:var(--muted);font-size:.68rem}.profile-mock-summary span strong{margin-top:3px}.profile-mock-summary svg{width:18px}.pupil-inbox-actions{display:flex;gap:7px;align-items:center}
@media(max-width:700px){.profile-mock-summary{grid-template-columns:1.2fr repeat(3,.6fr)}.profile-mock-summary svg{display:none}.pupil-inbox-actions{grid-column:2;justify-self:start;flex-wrap:wrap}}
.mock-subdivider{height:1px;margin:10px 0;background:var(--line)}

/* Acceptance and pairing polish — v0.8.1 */
.pairing-qr{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;margin-top:14px;padding:15px;border:1px solid rgba(79,226,156,.28);border-radius:18px;background:rgba(4,17,19,.34)}
.pairing-qr img{display:block;width:150px;height:150px;padding:8px;border-radius:15px;background:#fff}
.pairing-qr strong{display:block;font-size:1rem}
.pairing-qr p{margin:6px 0 12px;color:var(--muted);line-height:1.45}
@media(max-width:700px){.pairing-qr{grid-template-columns:112px 1fr}.pairing-qr img{width:112px;height:112px}}
@media(max-width:430px){.pairing-qr{grid-template-columns:1fr;text-align:center}.pairing-qr img{width:154px;height:154px;margin:auto}.pairing-qr button{width:100%}}

/* InstructorLane v0.8.5 — discreet pupil activity notice on Today */
.today-pupil-notice{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 8px 18px;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:62px;
  margin-bottom:14px;
  padding:10px 13px;
  border:1px solid rgba(74,214,145,.28);
  border-radius:17px;
  background:linear-gradient(135deg,rgba(49,194,126,.11),rgba(16,37,43,.72));
  color:var(--text);
  text-align:left;
  box-shadow:0 12px 30px rgba(0,0,0,.10);
}
.today-pupil-notice:hover,.today-pupil-notice:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px rgba(60,222,147,.08)}
.today-pupil-notice-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(60,222,147,.13);color:var(--accent)}
.today-pupil-notice-icon svg{width:19px;height:19px}.today-pupil-notice-copy{min-width:0}.today-pupil-notice-copy small,.today-pupil-notice-copy strong{display:block}.today-pupil-notice-copy small{color:var(--muted);font-size:.68rem}.today-pupil-notice-copy strong{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem}.today-pupil-notice-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(60,222,147,.10)}.today-pupil-notice>svg{width:17px;height:17px;color:var(--muted)}
html[data-theme="light"] .today-pupil-notice{border-color:rgba(15,137,82,.36);background:linear-gradient(135deg,rgba(15,137,82,.09),#fff);box-shadow:0 10px 24px rgba(28,78,57,.08)}
@media(max-width:720px){.today-pupil-notice{margin:0 0 12px;grid-template-columns:36px minmax(0,1fr) 7px 16px}.today-pupil-notice-copy strong{font-size:.81rem}}

/* v0.8.7 logo refresh */
.brand-mark,
.mini-brand-mark {
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
}
.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}
.mini-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: block;
}
.mini-brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}
.mini-brand-mark::before,
.mini-brand-mark::after {
  content: none !important;
  display: none !important;
}

/* InstructorLane 1.1 cloud account shell */
.cloud-auth-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(3,12,16,.84);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.cloud-auth-card{width:min(100%,450px);padding:28px;border:1px solid color-mix(in srgb,var(--line) 68%,var(--accent) 32%);border-radius:28px;background:linear-gradient(155deg,var(--surface),color-mix(in srgb,var(--surface-2) 92%,var(--accent-soft)));box-shadow:0 30px 100px rgba(0,0,0,.45);text-align:center}
.cloud-auth-logo{width:72px;height:72px;border-radius:23px;object-fit:cover;box-shadow:0 16px 34px rgba(0,0,0,.22)}
.cloud-auth-card h1{margin:14px 0 8px;font-size:clamp(24px,5vw,32px);line-height:1.05}
.cloud-auth-intro{margin:0 auto 20px;max-width:34rem;color:var(--muted);font-size:13px;line-height:1.55}
.cloud-auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 16px;padding:5px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.cloud-auth-tabs button{min-height:42px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-weight:850;cursor:pointer}
.cloud-auth-tabs button.active{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.cloud-auth-form{display:grid;gap:12px;text-align:left}
.cloud-auth-form label{display:grid;gap:6px;color:var(--muted);font-size:11px;font-weight:800}
.cloud-auth-form input{min-height:50px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--text);padding:0 14px;outline:none}
.cloud-auth-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.cloud-auth-form .primary-button{width:100%;margin-top:2px}
.cloud-auth-message{min-height:20px;margin:0;text-align:center;color:var(--red);font-size:11px}
.cloud-auth-footnote{display:block;margin-top:13px;color:var(--muted);font-size:9.5px}
html[data-cloud="online"] .sync-state strong::after{content:" · Cloud";color:var(--accent)}
html[data-cloud="offline"] .sync-state strong::after{content:" · Offline";color:var(--amber)}
@media(max-width:520px){.cloud-auth-backdrop{padding:12px}.cloud-auth-card{padding:22px 17px;border-radius:23px}.cloud-auth-logo{width:64px;height:64px;border-radius:20px}}

/* v1.2.0 instructor availability */
.diary-heading-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.availability-card{margin:14px 0 16px;padding:15px;border:1px solid color-mix(in srgb,var(--blue) 36%,var(--line));border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--blue) 9%,var(--surface)),var(--surface))}
.availability-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.availability-card-head h3{margin:3px 0 0;font-size:16px}
.availability-clear{display:grid;gap:4px;padding:13px;border:1px dashed var(--line);border-radius:14px;color:var(--muted)}
.availability-clear strong{color:var(--text)}
.availability-list{display:grid;gap:8px}
.availability-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.availability-row strong,.availability-row small{display:block}.availability-row small{margin-top:3px;color:var(--muted)}
.availability-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 5px color-mix(in srgb,var(--danger) 13%,transparent)}
.danger-text{color:var(--danger)!important}
.availability-toggle{display:flex!important;grid-template-columns:auto 1fr!important;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--surface-2);color:var(--text)!important}
.availability-toggle input{width:auto;margin-top:3px}.availability-toggle strong,.availability-toggle small{display:block}.availability-toggle small{margin-top:4px;color:var(--muted)}
.availability-privacy-note{display:grid;gap:4px;margin:12px 0;padding:12px;border-radius:13px;background:color-mix(in srgb,var(--blue) 10%,var(--surface));color:var(--muted);font-size:12px}.availability-privacy-note strong{color:var(--text)}
@media(max-width:620px){.diary-heading-actions{width:100%;justify-content:stretch}.diary-heading-actions button{flex:1}.availability-card-head{display:grid}.availability-row{grid-template-columns:auto minmax(0,1fr)}.availability-row button{grid-column:2;justify-self:start}}


/* InstructorLane 1.2.1 — date-range availability, diary visibility and product showcase */
.availability-date-range{grid-template-columns:repeat(2,minmax(0,1fr))}
.diary-availability-event{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr) auto 5px;gap:10px;align-items:center;margin:8px 0;padding:12px;border:1px solid color-mix(in srgb,var(--danger) 48%,var(--line));border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--danger) 11%,var(--surface)),var(--surface));overflow:hidden}
.diary-availability-event .event-time{color:var(--danger);font-size:11px;font-weight:850;line-height:1.35}.diary-availability-event .event-copy strong,.diary-availability-event .event-copy small{display:block}.diary-availability-event .event-copy small{margin-top:3px;color:var(--muted);font-size:10px}.diary-availability-event .event-colour{align-self:stretch;border-radius:99px;background:var(--danger)}
.legend-chip.unavailable{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--surface))}
.week-calendar-day-head.has-unavailability{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--danger) 10%,var(--surface)),var(--surface))}.week-calendar-day-head.has-unavailability small{color:var(--danger)}
.week-unavailable-event,.week-unavailable-all-day{position:absolute;z-index:1;left:3px;right:3px;border:1px dashed color-mix(in srgb,var(--danger) 65%,transparent);border-radius:8px;background:color-mix(in srgb,var(--danger) 16%,transparent);color:color-mix(in srgb,var(--danger) 85%,white);pointer-events:none;overflow:hidden}.week-unavailable-event{top:var(--event-top);height:var(--event-height);padding:3px}.week-unavailable-event span{font-size:7.5px;font-weight:900}.week-unavailable-all-day{inset:3px;display:grid;place-items:center}.week-unavailable-all-day span{padding:4px 6px;border-radius:7px;background:color-mix(in srgb,var(--danger) 88%,#000);color:#fff;font-size:8px;font-weight:900;writing-mode:vertical-rl}
.cloud-auth-backdrop{overflow:auto;align-items:start}.cloud-auth-experience{display:grid;grid-template-columns:minmax(330px,450px) minmax(0,900px);gap:24px;width:min(100%,1390px);margin:auto;align-items:start}.cloud-auth-card{position:sticky;top:20px}.cloud-product-showcase{padding:28px;border:1px solid color-mix(in srgb,var(--line) 68%,var(--accent) 32%);border-radius:28px;background:linear-gradient(155deg,var(--surface),color-mix(in srgb,var(--surface-2) 94%,var(--accent-soft)));box-shadow:0 30px 100px rgba(0,0,0,.35)}.cloud-showcase-heading{text-align:left;margin-bottom:20px}.cloud-showcase-heading h2{margin:8px 0 8px;font-size:clamp(25px,4vw,42px);line-height:1.04}.cloud-showcase-heading>p:last-child{max-width:760px;margin:0;color:var(--muted);line-height:1.6}.cloud-showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.cloud-showcase-feature{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:20px;background:var(--surface-2);overflow:hidden}.cloud-showcase-feature img{width:150px;height:210px;display:block;object-fit:cover;object-position:top;border-radius:14px;border:1px solid var(--line);box-shadow:0 14px 28px rgba(0,0,0,.24)}.cloud-showcase-feature strong,.cloud-showcase-feature span{display:block}.cloud-showcase-feature strong{font-size:15px;line-height:1.25}.cloud-showcase-feature span{margin-top:7px;color:var(--muted);font-size:11px;line-height:1.55}
@media(max-width:1050px){.cloud-auth-experience{grid-template-columns:1fr;max-width:820px}.cloud-auth-card{position:static;width:100%;max-width:none}.cloud-product-showcase{padding:22px}.cloud-showcase-feature{grid-template-columns:125px minmax(0,1fr)}.cloud-showcase-feature img{width:125px;height:178px}}
@media(max-width:620px){.availability-date-range{grid-template-columns:1fr}.diary-availability-event{grid-template-columns:50px minmax(0,1fr) 5px}.diary-availability-event button{grid-column:2;justify-self:start}.diary-availability-event .event-colour{grid-column:3;grid-row:1/3}.cloud-auth-backdrop{padding:10px}.cloud-auth-experience{gap:12px}.cloud-product-showcase{padding:18px 14px;border-radius:23px}.cloud-showcase-grid{grid-template-columns:1fr}.cloud-showcase-feature{grid-template-columns:105px minmax(0,1fr);padding:10px;gap:12px}.cloud-showcase-feature img{width:105px;height:150px}.cloud-showcase-feature strong{font-size:13px}.cloud-showcase-feature span{font-size:9.5px}}

/* 1.3.1 trial, recovery and billing */
.cloud-auth-forgot,.text-button{background:none;border:0;color:var(--accent);font:inherit;font-weight:700;cursor:pointer;padding:.45rem}.cloud-auth-trial-note{display:block;color:var(--muted);line-height:1.5}.cloud-subscription-lock{position:fixed;inset:0;z-index:10050;background:rgba(3,10,14,.94);backdrop-filter:blur(18px);display:grid;place-items:center;padding:24px}.cloud-subscription-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.cloud-subscription-actions a{text-decoration:none}.cloud-subscription-lock .cloud-auth-card{max-width:580px}.cloud-subscription-lock small{color:var(--muted)}@media(max-width:560px){.cloud-subscription-actions{grid-template-columns:1fr}}
.settings-help-copy{margin:14px 0 0;color:var(--muted);font-size:.86rem;line-height:1.55}.settings-link-list{display:grid;gap:10px}.settings-link-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft);font-weight:750}.settings-link-list a:hover{border-color:var(--accent);color:var(--accent)}.settings-link-list svg{width:18px;height:18px}