/* Shared refinements for the live dashboard and its sample preview. */
:root {
  color-scheme: light;
  --bg: #f7f8f5;
  --paper: #fff;
  --ink: #202b2a;
  --muted: #82908b;
  --line: #e8ece7;
  --green: #246e57;
  --mint: #e7f4ed;
  --shadow: 0 10px 30px #1f39220b;
  scroll-padding-bottom: 96px;
}
.web-app-header {
  position: sticky;
  z-index: 12;
  top: 0;
  display: grid;
  width: 100%;
  min-height: 68px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 clamp(24px, 4.2vw, 68px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  color: var(--ink);
  backdrop-filter: blur(18px);
}
.web-app-brand { display: inline-flex; width: fit-content; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; font-weight: 700; }
.web-app-logo { display: block; height: 22px; width: auto; max-width: min(210px, 100%); object-fit: contain; }
.sidebar-brand-logo { display: block; height: 18px; width: auto; max-width: 100%; object-fit: contain; }
:root:not([data-theme="dark"]) .web-app-brand,
:root:not([data-theme="dark"]) .sidebar .brand:has(.sidebar-brand-logo) { padding: 7px 10px; border-radius: 11px; background: #080809; }
:root #authScreen .authContent > .brand:has(.auth-logo) { width: fit-content; max-width: 100%; margin: 0 auto 14px; padding: 0 !important; background: transparent; }
.auth-logo { position: relative; display: block; width: min(220px, 70vw); aspect-ratio: 2189 / 240; }
.auth-logo img { display: block; width: 100%; height: 100%; object-fit: contain; clip-path: inset(0 87% 0 0); }
.auth-logo .auth-logo-lettering { position: absolute; inset: 0; clip-path: inset(0 0 0 13%); filter: brightness(0); }
.web-app-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: var(--ink); color: var(--bg); font-size: 14px; }
.web-app-header nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 42px); }
.web-app-header nav a, .web-app-home { color: var(--muted); font-size: 13px; font-weight: 550; transition: color 140ms ease; }
.web-app-header nav a:hover, .web-app-home:hover { color: var(--ink); }
/* Back arrow pinned hard left, wordmark centred in the middle grid track. */
.web-app-home {
  grid-column: 1;
  justify-self: start;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}
.web-app-home svg { display: block; width: 19px; height: 19px; overflow: visible; }
.web-app-home svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.web-app-home:hover {
  border-color: color-mix(in srgb, var(--green) 46%, var(--line));
  background: var(--mint);
  transform: translateX(-2px);
}
.web-app-brand { grid-column: 2; justify-self: center; }
@media (max-width: 760px) { .web-app-header { display: none; } }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101513;
  --paper: #191f1c;
  --ink: #f2f5f2;
  --muted: #a0aca5;
  --line: #2b332f;
  --green: #84c5a2;
  --mint: #20352a;
  --shadow: 0 10px 30px #0003;
}
:root[data-school-theme] { --green: var(--school-accent); --mint: var(--school-tint); }
:root[data-school-theme] .smallbtn.primary, :root[data-school-theme] .logo { color:var(--school-on-accent,#fff); }
.college-picker-hint { display:block;color:var(--muted);font-size:11px;line-height:1.45;margin-top:6px; }
.authContent .college-picker-hint { color:#72807a; }
.authContent input[type="search"] { margin-top:4px; }
:root[data-theme="dark"] .authContent .college-picker-hint { color:var(--muted); }

body { background: var(--bg); color: var(--ink); }
.top {
  padding: 20px 22px;
  margin: 0 0 26px;
  border-radius: 18px;
  background: #246e57;
  color: #fff;
}
.top .date { color: #c7dfd0; }
.top h1 { color: #fff; font-size: 29px; }
.top .actions { gap: 11px; }
.top .actions .smallbtn,
.top .actions .iconbtn {
  min-height: 44px;
  border: 1px solid #ffffff55;
  border-radius: 12px;
  background: #ffffff14;
  color: #fff;
  font-size: 12px;
  padding: 0 15px;
}
.top .actions .iconbtn { width: 44px; padding: 0; font-size: 18px; }
.top .actions button:hover { background: #ffffff27; }
.sidebar, .mobilebar { background: var(--paper); border-color: var(--line); }
.card, .section-card, .day-card { background: var(--paper); border-color: var(--line); color: var(--ink); }
.smallbtn, .iconbtn, .field, .chat-compose input { background: var(--paper); color: var(--ink); border-color: var(--line); }
.hero { background: var(--mint); }
.hero p, .section-card p, .list-row small { color: var(--muted); }
.move, .day-card.today { background: var(--mint); }
.time, .tag, .moods button { background: var(--bg); color: var(--ink); }
.ring:before { background: var(--paper); }
.coach { background: #20372d; }
.mobile-menu { color: var(--ink); background: var(--paper); border-color: var(--line); }
.mobile-menu button { color: var(--ink); background: transparent; }
.mobile-menu button:hover { background: var(--mint); }
.paywall, .mail-connect { color: var(--ink); background: var(--mint); border-color: var(--line); }
.smallbtn.primary, .addbtn { background: #246e57; color: #fff; border-color: #246e57; }
.nav button.active { color: var(--green); background: var(--mint); }
.task.done .taskname { color: var(--muted); }
.bubble.ai { background: var(--mint); color: var(--ink); }
.bubble.user { background: #203c33; color: #fff; }
.task { border-color: var(--line); }
.course-resource { margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line); }
.course-resource .head { margin-bottom: 8px; }
.course-resource h4 { margin: 0; font-size: 12px; }
.profile-trigger { width: 100%; border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; text-decoration: none; }
.profile-trigger:hover { background: var(--mint); }
.profile-trigger.active { background: var(--mint); color: var(--green); }
.profile-trigger:focus-visible { background: var(--mint); }
.profile-edit-mark { margin-left: auto; color: var(--muted); opacity: 0; transition: opacity .15s ease; }
.profile-trigger:hover .profile-edit-mark, .profile-trigger:focus-visible .profile-edit-mark { opacity: 1; }
.avatar { overflow: hidden; flex: 0 0 34px; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-overlay { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 18px; background: #10151388; backdrop-filter: blur(5px); }
.profile-dialog { width: min(520px, 100%); max-height: min(88dvh, 760px); overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 80px #0004; }
.profile-dialog .head { align-items: flex-start; }
.profile-dialog .head h2 { margin: 3px 0 0; font: 800 25px Satoshi, sans-serif; }
.profile-dialog .eyebrow { margin: 0; }
.profile-dialog .profile-close { width: 42px; height: 42px; font-size: 22px; }
.profile-dialog label { display: block; margin: 14px 0 6px; font-size: 12px; font-weight: 700; }
.profile-dialog .field { display: block; width: 100%; background: var(--bg); }
.profile-photo-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.profile-photo-preview { width: 78px; height: 78px; flex: 0 0 78px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--mint); color: var(--green); font-size: 26px; font-weight: 800; }
.profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-upload { display: inline-flex !important; align-items: center; min-height: 40px; margin: 0 !important; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); cursor: pointer; }
.profile-photo-row .link { display: block; margin-top: 7px; padding-left: 0; }
.profile-photo-row .subtle { margin: 5px 0 0; }
.profile-email { margin: 0; color: var(--muted); font-size: 13px; }
.profile-error { color: #a64831; font-size: 12px; }
.profile-actions { display: flex; align-items: center; gap: 8px; margin-top: 22px; }
.profile-actions > span { flex: 1; }
.profile-actions button { min-height: 40px; }
.profile-actions .danger { color: #a53d3d; border-color: #dfa5a5; }
.recoveryLinks { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 12px !important; font-size: 12px; }
.recoveryLinks .link, .recoveryBack .link { width: auto; margin: 0; padding: 2px; background: transparent; color: inherit; text-decoration: underline; }
.recoveryStatus { margin: 12px 0; color: var(--ink); font-size: 13px; line-height: 1.5; }
.recoveryBack { margin-top: 18px !important; }
:root[data-theme="dark"] .profile-upload { color: var(--ink); }
.assignment-row { cursor: pointer; }
.assignment-row > span:first-child { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 7px; }
.assignment-row small { grid-column: 2; margin-top: -4px; }
.assignment-row .pill { align-self: center; }
.note-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.note-row:last-child { border-bottom: 0; }
.note-row b { font-size: 12px; }
.note-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.note-row p { margin: 6px 0 0; white-space: pre-wrap; }
.class-form { max-width: 780px; }
.class-form .subtle { margin: 0 0 15px; }
.class-form label { display: block; margin: 12px 0 6px; color: var(--ink); font-size: 12px; font-weight: 700; }
.class-form .field { width: 100%; background: var(--bg); }
.class-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
.form-error { color: #a64831; margin: 10px 0; font-size: 12px; }
.assistant-view { min-height: calc(100dvh - 125px); grid-template-rows: auto 1fr; }
.assistant-view > .section-intro { align-items: flex-start; }
.assistant-workspace {
  min-height: min(680px, calc(100dvh - 230px));
  display: flex; flex-direction: column; align-items: stretch;
  padding: clamp(22px, 4vw, 44px); border: 1px solid var(--line);
  border-radius: 24px; background: radial-gradient(ellipse at 50% 0, var(--mint), var(--paper) 62%);
  box-shadow: var(--shadow);
}
.assistant-welcome { max-width: 680px; margin: 0 auto 24px; text-align: center; }
.assistant-orbit { width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 22px; background: var(--mint); color: var(--green); font-size: 34px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--mint) 45%, transparent); }
.assistant-welcome .eyebrow { margin: 0 0 8px; }
.assistant-welcome h2 { margin: 0; font: 800 clamp(24px, 3vw, 34px) Satoshi, sans-serif; letter-spacing: -.7px; }
.assistant-welcome > p:last-child { max-width: 520px; margin: 10px auto 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.assistant-locked { justify-content: center; }
.assistant-locked .paywall { width: min(460px, 100%); margin: 22px auto 0; text-align: left; }
.assistant-view .chat-log { width: min(860px, 100%); max-height: none; flex: 1; min-height: 100px; align-content: end; overflow: auto; margin: 0 auto 16px; }
.assistant-view .bubble { padding: 14px 17px; font-size: 14px; }
.assistant-starters { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin: 0 auto 18px; }
.starter-chip { padding: 11px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 12px; }
.starter-chip:hover { border-color: var(--green); background: var(--mint); }
.assistant-view .assistant-compose { width: min(860px, 100%); margin: auto auto 0; align-items: flex-end; gap: 10px; }
.assistant-compose textarea { flex: 1; min-width: 0; resize: vertical; max-height: 150px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); color: var(--ink); font: inherit; line-height: 1.45; }
.assistant-compose button { min-height: 48px; border-radius: 15px; padding: 0 18px; }
.assistant-privacy { width: min(860px, 100%); margin: 10px auto 0; color: var(--muted); font-size: 10px; text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mobile-menu .menu-divider { height: 1px; background: var(--line); margin: 5px 8px; }
.mobile-menu button[aria-pressed="true"]::after { content: "On"; margin-left: auto; color: var(--green); font-size: 11px; }
:where(button, input, textarea, a):focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 55%, transparent); outline-offset: 2px; }

/* Keep each desktop view anchored to the top instead of vertically centering short pages. */
@media (min-width: 761px) {
  .app { align-items: start !important; }
  .sidebar { min-height: 100vh; }
  .main { align-self: start !important; margin: 0 auto !important; }
  .main > .top,
  .main > .section-view { align-self: stretch; }
}

/* Use the full desktop canvas and keep the two dashboard columns balanced. */
@media (min-width: 1101px) {
  .app {
    width: 100%;
    max-width: none;
    grid-template-columns: clamp(224px, 17vw, 280px) minmax(0, 1fr);
  }
  .main {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: clamp(28px, 2.2vw, 44px) clamp(28px, 3vw, 64px) 64px;
  }
  .grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .95fr);
    gap: clamp(18px, 1.5vw, 28px);
  }
}

/* Small, consistent motion helps controls feel responsive without delaying navigation. */
.nav button,
.smallbtn,
.iconbtn,
.task,
.list-row,
.mobilebar button,
.mobile-menu {
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease,
    transform 180ms cubic-bezier(.2, .75, .25, 1), opacity 180ms ease;
}
.app { transition: opacity 220ms ease; }
html:not(.live-ready) .app { opacity: 0; }
html.live-ready .app { opacity: 1; }
@keyframes cld-view-enter {
  from { opacity: .55; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.googleSignIn.is-loading { cursor: wait; opacity: .82; pointer-events: none; }
.googleSignIn.is-loading::before {
  content: "";
  width: 15px;
  height: 15px;
  margin-right: 10px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cld-spin 700ms linear infinite;
}
@keyframes cld-spin { to { transform: rotate(360deg); } }

:root[data-theme="dark"] .smallbtn.primary,
:root[data-theme="dark"] .addbtn { background: #28744f; color: #fff; border-color: #28744f; }
:root[data-theme="dark"] .tag.urgent { background: #4b3023; color: #f2b27c; }
:root[data-theme="dark"] .hero h2,
:root[data-theme="dark"] .hero .eyebrow,
:root[data-theme="dark"] .signal b { color: #b7e4c8; }
:root[data-theme="dark"] .hero p { color: #c2d0c7; }
:root[data-theme="dark"] .ring { background: conic-gradient(var(--green) 0 78%, #354039 78% 100%); }
:root[data-theme="dark"] .hero .chip { background: #17231c; color: #b7e4c8; }
:root[data-theme="dark"] .hero:after { color: #b7e4c8; opacity: 0; }
:root[data-theme="dark"] .top { background: transparent; color: var(--ink); }
:root[data-theme="dark"] .top h1 { color: var(--ink); }
:root[data-theme="dark"] .top .date { color: var(--muted); }
:root[data-theme="dark"] .top .actions .smallbtn,
:root[data-theme="dark"] .top .actions .iconbtn { background: var(--paper); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] #authScreen { background: #1a1f1c !important; color: #f5fff8; }
:root[data-theme="dark"] #authScreen .authContent { background: transparent !important; color: #f5fff8; border: 0; box-shadow: none; }
:root[data-theme="dark"] #authScreen .authContent p { color: #d0e9da; }
:root[data-theme="dark"] #authScreen .authContent label { color: #e7f5ec; }
:root[data-theme="dark"] #authScreen .authContent input { color: #fff; background: transparent; border: 0; border-bottom: 1px solid #9dcbb0; border-radius: 0; }
:root[data-theme="dark"] #authScreen .authContent a { color: #fff; text-decoration: underline; }

/* Profile is a real workspace page; keep its layout calm and aligned with the dashboard grid. */
.profile-view { gap: 18px; }
.profile-hero { display: flex; align-items: center; gap: 18px; padding: 24px; }
.profile-large-avatar { width: 88px; height: 88px; flex: 0 0 88px; overflow: hidden; display: grid; place-items: center; border-radius: 50%; background: var(--mint); color: var(--green); font: 800 34px Satoshi, sans-serif; }
.profile-large-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-hero-copy { min-width: 0; flex: 1; }
.profile-hero-copy .eyebrow { margin: 0 0 7px; }
.profile-hero-copy h3 { margin: 0; font: 800 24px Satoshi, sans-serif; letter-spacing: -.5px; }
.profile-hero-copy > p:last-child { margin: 5px 0 0; color: var(--muted); }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.profile-grid .section-card { min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: var(--shadow); }
.profile-grid .eyebrow { margin: 0 0 7px; }
.profile-grid h3 { margin: 0 0 12px; font: 700 16px Satoshi, sans-serif; }
.profile-grid p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }
.profile-details { margin: 0; }
.profile-details > div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.profile-details > div:last-child { border-bottom: 0; }
.profile-details dt { color: var(--muted); }
.profile-details dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-weight: 600; }
.calendar-providers { display: grid; gap: 9px; margin: 12px 0; }
.calendar-provider { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg); }
.calendar-provider > span { min-width: 0; }
/* School calendar feed (Canvas, Blackboard, Brightspace, Moodle) */
.calendar-connect { display: grid; gap: 12px; }
.calendar-connect > h3, .calendar-connect > p { margin: 0; }
.connect-label { margin: 6px 0 -4px !important; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.connect-list { display: grid; gap: 8px; }
.connect-tile { border: 1px solid var(--line); border-radius: 14px; background: var(--bg); padding: 12px; transition: border-color .2s; }
.connect-tile.open { border-color: var(--green); }
.connect-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.connect-text { display: grid; min-width: 0; }
.connect-text b { font-size: 15px; }
.connect-text small, .plus-sources small, .plus-highlight small, .free-option small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.connect-icon { text-transform: none !important; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-style: normal; font-weight: 900; font-size: 18px; color: #fff; }
.connect-icon.school { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.connect-icon.google { background: linear-gradient(135deg, #4285f4, #34a853); }
.connect-icon.apple { background: linear-gradient(135deg, #ff5f6d, #ffc371); }
.connect-icon.outlook { background: linear-gradient(135deg, #0078d4, #50b0f0); }
.connect-body { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.connect-body .link { justify-self: start; white-space: nowrap; }
.apple-steps { margin: 0; padding-left: 20px; display: grid; gap: 5px; font-size: 13px; line-height: 1.5; }
.plus-chip { font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 999px; color: #1a1306; background: linear-gradient(120deg, #f5d27a, #fff3c4, #e0b347); white-space: nowrap; }
.plus-hero { position: relative; overflow: hidden; display: grid; gap: 12px; padding: 22px 18px; border-radius: 20px; color: #fff; background: radial-gradient(120% 90% at 0% 0%, rgba(124, 92, 255, .55), transparent 60%), radial-gradient(100% 80% at 100% 100%, rgba(255, 112, 166, .45), transparent 60%), #0e0b1a; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 50px -18px rgba(124, 92, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .15); isolation: isolate; }
.plus-hero::before { content: ""; position: absolute; inset: -40% -60%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .16) 50%, transparent 58%); animation: plus-shine 4.5s ease-in-out infinite; z-index: -1; pointer-events: none; }
@keyframes plus-shine { 0% { transform: translateX(-45%); } 60%, 100% { transform: translateX(45%); } }
@media (prefers-reduced-motion: reduce) { .plus-hero::before { animation: none; opacity: 0; } }
.plus-hero h3 { margin: 0; font-size: 24px; line-height: 1.15; color: #fff; }
.plus-hero p { margin: 0; color: rgba(255, 255, 255, .78); }
.plus-hero small { color: rgba(255, 255, 255, .66) !important; }
.plus-badge { justify-self: start; font-size: 12px; font-weight: 900; letter-spacing: .06em; padding: 6px 12px; border-radius: 999px; color: #1a1306; background: linear-gradient(120deg, #f5d27a, #fff6d1, #e0b347); box-shadow: 0 0 18px rgba(245, 210, 122, .55); }
.plus-highlight { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.plus-highlight i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-style: normal; font-size: 20px; background: linear-gradient(135deg, #7c5cff, #ff70a6); }
.plus-highlight span, .plus-sources span { display: grid; min-width: 0; }
.plus-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plus-sources li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.plus-btn { width: 100%; min-height: 52px; border: 0; border-radius: 14px; font: inherit; font-weight: 900; font-size: 16px; cursor: pointer; color: #1a1306; background: linear-gradient(120deg, #f5d27a, #fff3c4 45%, #e0b347); box-shadow: 0 10px 30px -8px rgba(245, 210, 122, .75); }
.plus-btn:active { transform: translateY(1px); }
.plus-fine { font-size: 12px; text-align: center; }
.plus-fine .link { color: #f5d27a; font-size: 12px; }
.free-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 14px; }
.free-option span { display: grid; }
.free-option .smallbtn { white-space: nowrap; }
.school-feed { display: grid; gap: 10px; margin: 12px 0; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg); }
.school-feed .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.school-feed .head small, .calendar-provider small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; line-height: 1.45; }
.school-feed .calendar-provider { background: var(--paper); }
.feed-form { display: flex; gap: 8px; }
.feed-form .field { flex: 1; min-width: 0; }
.feed-help { display: grid; gap: 8px; padding: 12px; border-radius: 11px; background: var(--paper); border: 1px solid var(--line); font-size: 12px; }
.feed-help p { margin: 0; }
.feed-help details { border-top: 1px solid var(--line); padding-top: 8px; }
.feed-help summary { cursor: pointer; font-weight: 700; }
.feed-help ol { margin: 8px 0 2px; padding-left: 20px; display: grid; gap: 5px; line-height: 1.5; }
.school-feed .manual-classes { justify-self: start; }
@media (max-width: 760px) { .feed-form .field { font-size: 16px; } }
.school-feed .head .link { white-space: nowrap; flex: 0 0 auto; }
.calendar-provider b, .calendar-provider small { display: block; }
.calendar-provider small { margin-top: 3px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .profile-hero { align-items: flex-start; flex-wrap: wrap; padding: 19px; gap: 13px; }
  .profile-large-avatar { width: 68px; height: 68px; flex-basis: 68px; font-size: 27px; }
  .profile-hero-copy { flex: 1 1 calc(100% - 84px); align-self: center; }
  .profile-hero-copy h3 { font-size: 20px; }
  .profile-hero > button { margin-left: 81px; }
  .profile-grid { grid-template-columns: 1fr; gap: 12px; }
  .profile-grid .section-card { padding: 17px; }
}

@media (max-width: 760px) {
  html, body { min-height: 100%; }
  body { background: var(--bg); }
  .app { min-height: 100dvh; padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .main { padding: 22px 16px calc(24px + env(safe-area-inset-bottom)); }
  .top { align-items: center; gap: 10px; margin-bottom: 20px; }
  .top { padding: 17px 16px; border-radius: 17px; }
  .date { font-size: 9px; letter-spacing: .75px; }
  .top h1 { font-size: clamp(21px, 6vw, 27px); line-height: 1.16; }
  .actions { flex: none; }
  .actions #planButton, .actions #accountButton, .actions #themeToggle { display: none; }
  .hero { padding: 21px 19px; border-radius: 20px; }
  .hero h2 { max-width: 88%; }
  .grid { gap: 14px; }
  .col { gap: 14px; }
  .card, .section-card { border-radius: 17px; }
  .mobilebar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: fixed;
    z-index: 10;
    left: 0; right: 0; bottom: 0;
    height: calc(66px + env(safe-area-inset-bottom));
    padding: 5px 12px calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px #17231c0a;
    justify-content: initial;
  }
  .mobilebar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; min-width: 0; height: 100%; padding: 4px 8px;
    border-radius: 14px; background: transparent; color: var(--muted);
    font-size: 21px; -webkit-tap-highlight-color: transparent;
  }
  .mobilebar button small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; }
  .mobilebar button.active { color: var(--green); }
  .mobilebar button { font-size: 23px; }
  .mobilebar button small { font-size: 11px; }
  .mobilebar button.active span { transform: translateY(-1px); }
  .mobile-menu {
    position: fixed; z-index: 11; right: 12px;
    bottom: calc(74px + env(safe-area-inset-bottom));
    width: min(290px, calc(100vw - 24px)); max-height: min(70dvh, 520px); overflow: auto;
    padding: 9px; border: 1px solid var(--line); border-radius: 20px;
    background: var(--paper); color: var(--ink); box-shadow: 0 18px 50px #14221924;
  }
  .mobile-menu button {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px;
    padding: 11px 13px; border-radius: 12px; background: transparent;
    color: var(--ink); text-align: left; font-weight: 600;
  }
  .mobile-menu button .menu-icon { width: 22px; color: var(--muted); text-align: center; font-size: 18px; }
  .mobile-menu button[data-section].active { color: var(--green); background: var(--mint); }
  .mobile-menu .menu-divider { margin: 7px 9px; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); text-align: center; }
  .coach { display: none; }
  .section-intro { align-items: flex-start; }
  .section-intro > button { flex: none; }
  .class-form-grid { grid-template-columns: 1fr; }
  .assistant-view { min-height: calc(100dvh - 150px); }
  .assistant-workspace { min-height: calc(100dvh - 265px); padding: 24px 16px; border-radius: 19px; }
  .assistant-welcome { margin-bottom: 18px; }
  .assistant-orbit { width: 52px; height: 52px; border-radius: 18px; font-size: 28px; }
  .assistant-view .bubble { font-size: 13px; }
  .assistant-compose { gap: 6px; }
  .assistant-compose button { min-height: 46px; padding: 0 12px; }
  .starter-chip { font-size: 11px; padding: 10px 12px; }
  .calendar-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  .main { padding-left: 12px; padding-right: 12px; }
  .date { font-size: 8px; }
  .actions #addTask { width: 38px; height: 38px; }
  .card, .section-card { padding: 15px; }
  .hero { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
#profileButton, #profileButton * { text-decoration: none !important; }

.assistant-context-control{display:flex;align-items:flex-start;gap:9px;margin-top:14px;color:var(--ink);font-size:12px;font-weight:600;line-height:1.45}.assistant-context-control input{flex:0 0 auto;width:16px;height:16px;margin:1px 0 0;accent-color:var(--green)}

/* Visual direction from the supplied mobile references: high contrast, clear
   type, paper-grey outlines, and rounded controls with almost no shadow. */
:root {
  --bg: #fff;
  --paper: #fff;
  --ink: #111113;
  --muted: #85858c;
  --line: #e6e6e9;
  --shadow: none;
}
body, html { background: var(--bg); color: var(--ink); }
.card, .section-card, .day-card, .profile-grid .section-card {
  border: 2px solid var(--line);
  border-radius: 22px;
  box-shadow: none;
}
.smallbtn, .iconbtn, .field, .chat-compose input, .assistant-compose textarea,
.calendar-provider, .mobile-menu {
  border-radius: 15px;
  box-shadow: none;
}
.smallbtn.primary, .addbtn, .send { border-radius: 15px; }
.top h1 { font-weight: 800; letter-spacing: -1px; }
.top .date { color: #85858c; }
.top .actions .smallbtn, .top .actions .iconbtn { border-radius: 15px; }
.profile-hero { border-radius: 26px; }
.profile-large-avatar { background: #111113; color: #fff; }
.section-intro h2 { letter-spacing: -.7px; }
.move, .calendar-provider { border: 1px solid var(--line); }
.mobilebar { box-shadow: none; }

:root[data-theme="dark"] {
  --bg: #080809;
  --paper: #111113;
  --ink: #f4f4f6;
  --muted: #a0a0a8;
  --line: #303035;
  --shadow: none;
}
:root[data-theme="dark"] body,
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .top { background: var(--bg); }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .section-card,
:root[data-theme="dark"] .day-card,
:root[data-theme="dark"] .profile-grid .section-card {
  background: #111113;
  border-color: #303035;
  box-shadow: none;
}
:root[data-theme="dark"] .profile-large-avatar { background: #f4f4f6; color: #111113; }

/* A dark surround and a clean white form sheet echo the supplied sign-in view. */
:root #authScreen {
  align-items: end;
  padding: 0;
  background: #080809 !important;
  color: #111113 !important;
}
:root #authScreen .authContent {
  align-self: end;
  width: min(660px, 100%);
  height: min(76dvh, 790px);
  max-height: 82dvh;
  margin: 0;
  padding: 34px clamp(22px, 5vw, 56px) calc(30px + env(safe-area-inset-bottom));
  overflow: auto;
  border: 2px solid #e6e6e9 !important;
  border-bottom: 0 !important;
  border-radius: 30px 30px 0 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #111113 !important;
  text-align: left;
}
:root #authScreen .authContent > .brand { justify-content: flex-start; color: #111113; }
:root #authScreen .authContent .logo { background: #111113 !important; color: #fff !important; }
:root #authScreen .authContent h1 { color: #111113; font-size: clamp(27px, 5vw, 36px); }
:root #authScreen .authContent p,
:root #authScreen .authContent small { color: #77777f; }
:root #authScreen .authContent label { color: #414149; }
:root #authScreen .authContent input {
  min-height: 54px;
  padding: 13px 14px !important;
  border: 2px solid #e6e6e9 !important;
  border-radius: 14px !important;
  background: #f7f7f8 !important;
  color: #111113 !important;
}
:root #authScreen .authContent input::placeholder { color: #9999a0; }
:root #authScreen .authContent button {
  min-height: 52px;
  border-radius: 15px;
  background: #111113;
  color: #fff;
}
:root #authScreen .authContent button:hover { background: #303035; }
:root #authScreen .authContent .passwordReveal,
:root #authScreen .authContent button.passwordReveal { min-height: 0; background: transparent; color: #55555d; }
:root #authScreen .authContent a { color: #76568b; }
:root #authScreen .authWelcome .welcomeActions button { background: #111113; color: #fff; }
:root #authScreen .authWelcome .googleSignIn {
  border: 2px solid #e6e6e9;
  border-radius: 15px;
  background: #fff;
  color: #111113;
}
:root #authScreen .authWelcome .welcomeFooter { color: #77777f; }
:root #authScreen .authBack {
  top: max(16px, env(safe-area-inset-top));
  left: max(20px, calc((100vw - 660px)/2));
  border-color: #ffffff40;
  color: #fff;
}
@media (max-width: 760px) {
  :root #authScreen .authContent {
    width: 100%;
    height: min(80dvh, 790px);
    max-height: calc(100dvh - 15vh);
    padding: 28px 24px calc(24px + env(safe-area-inset-bottom));
  }
}
/* Monochrome surfaces with restrained lilac and cyan accents. */
:root {
  --bg: #f6f6f7;
  --paper: #fff;
  --ink: #202024;
  --muted: #77777f;
  --line: #e1e1e5;
  --green: #8d69a4;
  --mint: #f0ebf3;
  --lime: #d8a6ed;
  --orange: #a884bc;
  --coral: #b9a0c8;
  --blue: #64d9e4;
  --shadow: 0 10px 30px #14141a0a;
  color-scheme: light;
}
html, body { background: var(--bg); color: var(--ink); }
body { background: var(--bg); }
.app { max-width: none; }
.sidebar { background: #fafafa; border-color: var(--line); }
.brand, .brand span, .user, .user b { color: var(--ink); }
.logo { background: #202024; color: #fff; border-radius: 10px; }
.label { color: #77777f; }
.nav button { color: #66666e; }
.nav button.active { color: #76568b; background: #f2edf5; box-shadow: inset 2px 0 #d8a6ed; }
.nav button:hover { background: #f0f0f2; }
.semester { background: #f0f0f1; border: 1px solid var(--line); }
.progress { background: #dedee2; }
.progress i { background: #8d69a4; }
.avatar { background: #e7e7e9; color: #45454a; }
.main { max-width: none; width: 100%; padding: 0 0 48px; }
.top {
  position: relative;
  isolation: isolate;
  padding: 18px clamp(10px, 1.15vw, 22px);
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fafafa;
  box-shadow: none;
}
.top:before { content: none; }
.top .date { color: #707078; font-size: 10px; letter-spacing: 1.35px; font-weight: 700; }
.top h1 { color: #202024; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -.7px; }
.top .actions .smallbtn, .top .actions .iconbtn { background: #fff; border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
.top .actions button:hover { background: #f2edf5; border-color: #d8a6ed; }
.card, .section-card, .day-card { background: var(--paper); border-color: var(--line); box-shadow: var(--shadow); color: var(--ink); }
.hero { background: #fff; border: 1px solid var(--line); border-left: 3px solid #d8a6ed; }
.hero .eyebrow { color: #846397; }
.hero h2, .signal b { color: #242428; }
.hero p, .section-card p, .list-row small { color: #66666e; }
.hero .chip { background: #f5f3f7; color: #75598a; }
.hero:after { color: #64d9e4; opacity: .22; }
.move, .time, .tag, .moods button, .calendar-provider, .class-form .field, .field, input, textarea, select { background: #f7f7f8; color: var(--ink); border-color: var(--line); }
.move { border: 1px solid #e9e9ec; }
.num { background: #f2edf5; color: #76568b; }
.smallbtn.primary, .addbtn, .send { background: #202024; color: #fff; border-color: #202024; }
.ring { background: conic-gradient(#8d69a4 0 78%, #e5e5e8 78% 100%); }
.ring:before { background: #fff; }
.tag.urgent { background: #f3eff5; color: #76568b; }
.coach { background: #f1f1f3; color: #202024; border: 1px solid #e1e1e5; border-top: 2px solid #64d9e4; }
.coach .eyebrow, .coach:after { color: #76568b; }
.coach p { color: #55555d; }
.coach .prompt { background: #fff; color: #303036; border-color: #dedee3; }
.coach .send { background: #202024; color: #fff; }
.mobilebar { background: #fff; border-color: var(--line); }
.mobilebar button, .mobile-menu button { color: #66746b; }
.mobilebar button.active { color: #76568b; }
.mobile-menu { background: #fff; border-color: var(--line); }
.mobile-menu button { background: transparent; }
.mobile-menu button:hover { background: #f2edf5; }
.toast { background: #25252a; border: 1px solid #53535b; }
.grid, #sectionView { margin: 22px clamp(10px, 1.15vw, 22px) 0; }
 #authScreen { background: #f6f6f7 !important; color: #202024; }
#authScreen .authContent { color: #202024; }
#authScreen .authContent p { color: #66666e; }
#authScreen .authContent label { color: #414149; }
#authScreen .authContent input { color: #202024; border-color: #8d69a4; }
#authScreen .authWelcome .welcomeActions button { background: #202024; color: #fff; }
#authScreen .authWelcome .googleSignIn { border-color: #d2c2dc; color: #303036; }
#authScreen .authContent .logo { background: #202024 !important; color: #fff !important; }
/* Dark mode keeps the same restrained lilac and cyan accents. */
:root[data-theme="dark"] {
  --bg: #050506;
  --paper: #111113;
  --ink: #f3f3f5;
  --muted: #a0a0a8;
  --line: #303035;
  --green: #d8a6ed;
  --mint: #211c24;
  --lime: #d8a6ed;
  --orange: #bca3ca;
  --coral: #bca3ca;
  --blue: #64d9e4;
  --shadow: 0 12px 34px #0007;
  color-scheme: dark;
}
:root[data-theme="dark"] body { background: #050506; color: var(--ink); }
:root[data-theme="dark"] .sidebar { background: #0b0b0d; border-color: var(--line); }
:root[data-theme="dark"] .label { color: #92929a; }
:root[data-theme="dark"] .nav button { color: #b6b6be; }
:root[data-theme="dark"] .nav button.active { color: #e0b9f0; background: #241d29; box-shadow: inset 2px 0 #64d9e4; }
:root[data-theme="dark"] .nav button:hover { background: #ffffff0a; }
:root[data-theme="dark"] .semester { background: #131316; border-color: var(--line); }
:root[data-theme="dark"] .progress { background: #36363c; }
:root[data-theme="dark"] .top { background: #0b0b0d; border-color: var(--line); }
:root[data-theme="dark"] .top .date { color: #aaaab2; }
:root[data-theme="dark"] .top h1 { color: #f3f3f5; }
:root[data-theme="dark"] .top .actions .smallbtn, :root[data-theme="dark"] .top .actions .iconbtn { background: #161619; border-color: #39393f; color: #f3f3f5; }
:root[data-theme="dark"] .top .actions button:hover { background: #242429; border-color: #80658e; }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .section-card, :root[data-theme="dark"] .day-card { background: linear-gradient(145deg, #141416, #101012); border-color: #303035; color: var(--ink); }
:root[data-theme="dark"] .hero { background: #111113; border-color: #303035; border-left-color: #d8a6ed; }
:root[data-theme="dark"] .hero .eyebrow { color: #d8a6ed; }
:root[data-theme="dark"] .hero h2, :root[data-theme="dark"] .signal b { color: #f2f2f4; }
:root[data-theme="dark"] .hero p, :root[data-theme="dark"] .section-card p, :root[data-theme="dark"] .list-row small { color: #b4b4bc; }
:root[data-theme="dark"] .hero .chip { background: #211c24; color: #dfb8ee; }
:root[data-theme="dark"] .hero:after { color: #64d9e4; opacity: .15; }
:root .hero:after { content: none !important; display: none !important; }


:root[data-theme="dark"] .move, :root[data-theme="dark"] .time, :root[data-theme="dark"] .tag, :root[data-theme="dark"] .moods button, :root[data-theme="dark"] .calendar-provider, :root[data-theme="dark"] .class-form .field, :root[data-theme="dark"] .field, :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: #1b1b1f; color: var(--ink); border-color: #38383e; }
:root[data-theme="dark"] .move { border-color: #303035; }
:root[data-theme="dark"] .num { background: #2b2430; color: #e0b9f0; }
:root[data-theme="dark"] .smallbtn.primary, :root[data-theme="dark"] .addbtn, :root[data-theme="dark"] .send { background: #f3f3f5; border-color: #f3f3f5; color: #17171a; }
:root[data-theme="dark"] .ring { background: conic-gradient(#d8a6ed 0 78%, #38383e 78% 100%); }
:root[data-theme="dark"] .ring:before { background: #141416; }
:root[data-theme="dark"] .tag.urgent { background: #2b2430; color: #e0b9f0; }
:root[data-theme="dark"] .coach { background: #111113; color: #f3f3f5; border-color: #303035; border-top-color: #64d9e4; }
:root[data-theme="dark"] .coach .eyebrow, :root[data-theme="dark"] .coach:after { color: #d8a6ed; }
:root[data-theme="dark"] .coach p { color: #b4b4bc; }
:root[data-theme="dark"] .coach .prompt { background: #1b1b1f; color: #f3f3f5; border-color: #38383e; }
:root[data-theme="dark"] .coach .send { background: #f3f3f5; color: #17171a; }
:root[data-theme="dark"] .mobilebar { background: #0b0b0d; border-color: var(--line); }
:root[data-theme="dark"] .mobilebar button, :root[data-theme="dark"] .mobile-menu button { color: #b6b6be; }
:root[data-theme="dark"] .mobilebar button.active { color: #e0b9f0; }
:root[data-theme="dark"] .mobile-menu { background: #141416; border-color: #38383e; }
:root[data-theme="dark"] .mobile-menu button:hover { background: #242429; }
:root[data-theme="dark"] .toast { background: #1d1a20; border-color: #55475e; }
:root[data-theme="dark"] #authScreen { background: #050506 !important; color: #f3f3f5; }
:root[data-theme="dark"] #authScreen .authContent { color: #f3f3f5; }
:root[data-theme="dark"] #authScreen .authContent p { color: #b4b4bc; }
:root[data-theme="dark"] #authScreen .authContent label { color: #e0e0e4; }
:root[data-theme="dark"] #authScreen .authContent input { color: #fff; border-color: #8d69a4; }
:root[data-theme="dark"] #authScreen .authWelcome .welcomeActions button { background: #f3f3f5; color: #17171a; }
:root[data-theme="dark"] #authScreen .authWelcome .googleSignIn { border-color: #5f5365; color: #f3f3f5; }
:root[data-theme="dark"] #authScreen .authContent .logo { background: #f3f3f5 !important; color: #17171a !important; }
:root[data-school-theme] { --green: var(--school-accent, #8d69a4); --mint: var(--school-tint, #f0ebf3); }
:root[data-theme="dark"][data-school-theme] { --green: var(--school-accent, #d8a6ed); --mint: var(--school-tint, #211c24); }
:root[data-theme="dark"] .event .bar { background: #8d8d96; }
:root[data-theme="dark"] .event:nth-child(3) .bar { background: #64d9e4; }
.event .bar { background: #aaaab1; }
.event:nth-child(3) .bar { background: #64d9e4; }

/* Desktop is a fixed dashboard canvas: navigation stays put and each page fits
   between the shared header and the bottom of the viewport. Long collections
   scroll inside their own panel so the page itself never moves. */
@media (min-width: 761px) {
  html, body { width: 100%; height: 100%; min-height: 0; overflow: hidden; }
  .app {
    width: 100%; height: 100dvh; min-height: 0; overflow: hidden;
    grid-template-rows: minmax(0, 1fr);
  }
  .previewbar + .app { height: calc(100dvh - 51px); }
  .sidebar { height: 100%; min-height: 0; overflow: hidden; }
  .main {
    height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column;
    padding: 0 0 12px;
  }
  .top { flex: 0 0 auto; min-height: 76px; padding: 13px clamp(12px, 1.15vw, 22px); }
  .top h1 { font-size: clamp(20px, 1.75vw, 27px); }
  .grid, #sectionView {
    width: auto; min-width: 0; min-height: 0; flex: 1 1 auto;
    margin: 12px clamp(12px, 1.15vw, 22px) 0;
  }
  .grid { grid-template-columns: minmax(0, 1.65fr) minmax(300px, .95fr); gap: 12px; }
  .grid > .col { min-height: 0; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .grid .card {
    min-height: 0; overflow: auto; padding: clamp(11px, 1vw, 16px);
    border-radius: 15px; box-shadow: none;
  }
  .grid .hero { min-height: 0; }
  .grid .hero h2 { font-size: clamp(17px, 1.5vw, 22px); margin: 6px 0 4px; }
  .grid .hero p { font-size: 12px; line-height: 1.4; }
  .grid .hero .chip { margin-top: 8px; }
  .grid .head { margin-bottom: 8px; }
  .grid .task { padding: 6px 1px; }
  .grid .moves, .grid .inbox { gap: 5px; }
  .grid .move { padding: 6px 8px; }
  .grid .signal { gap: 10px; }
  .grid .ring { width: 56px; height: 56px; }
  .grid .ring:before { inset: 5px; }
  .grid .schedule { gap: 6px; }

  #sectionView { display: flex; flex-direction: column; gap: 10px; }
  #sectionView[hidden] { display: none; }
  .section-view { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 10px; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; padding-bottom: 12px; }
  .section-intro { flex: 0 0 auto; align-items: center; }
  .section-intro h2 { font-size: 21px; }
  .section-intro p { margin-top: 4px; }
  .section-view > .toolbar { flex: 0 0 auto; }
  .section-view > .section-card, .section-view > .card { min-height: 0; flex: 1 1 0; overflow: auto; }
  .section-grid { min-height: 0; flex: 1 1 auto; grid-auto-rows: minmax(0, 1fr); gap: 10px; overflow: auto; }
  .section-grid > .section-card { min-height: 0; overflow: auto; padding: 14px; }
  .section-grid .course-resource { margin-top: 9px; padding-top: 8px; }
  .section-grid .note-row { padding: 6px 0; }
  .calendar-days { flex: 0 0 auto; gap: 6px; }
  .day-card { min-height: 0; max-height: 128px; overflow: auto; padding: 8px; }
  .day-event { margin-top: 5px; padding: 4px; }
  .profile-view .profile-hero { flex: 0 0 auto; padding: 16px; }
  .profile-view .profile-grid { flex: 1 1 auto; min-height: 0; }
  .more-view .more-options { grid-auto-flow: column; grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .assistant-view { min-height: 0; }
  .assistant-workspace { min-height: 0; flex: 1 1 auto; overflow: hidden; padding: 20px; }
}

@media (max-width: 760px) {
  .top { padding: 16px 14px; border-radius: 0; }
  .main { padding: 0 0 48px; }
  .grid, #sectionView { margin: 16px 14px 0; }
  .grid { display: flex; flex-direction: column; }
  .col.left { display: contents; }
  .col.left > .card:nth-of-type(3) { order: -1; }
}

/* Preserve the white input sheet in dark mode as well. */
:root[data-theme="dark"] #authScreen .authContent {
  background: #fff !important;
  border-color: #e6e6e9 !important;
  color: #111113 !important;
}
:root[data-theme="dark"] #authScreen .authContent h1,
:root[data-theme="dark"] #authScreen .authContent label { color: #111113; }
:root[data-theme="dark"] #authScreen .authContent p,
:root[data-theme="dark"] #authScreen .authContent small { color: #77777f; }
:root[data-theme="dark"] #authScreen .authContent input {
  background: #f7f7f8 !important;
  border: 2px solid #e6e6e9 !important;
  color: #111113 !important;
}
:root[data-theme="dark"] #authScreen .authContent button { background: #111113; color: #fff; }
:root[data-theme="dark"] #authScreen .authContent button.passwordReveal { background: transparent; color: #55555d; }
:root[data-theme="dark"] #authScreen .authContent a { color: #76568b; }
:root[data-theme="dark"] #authScreen .authWelcome .googleSignIn { background: #fff; color: #111113; border-color: #e6e6e9; }

/* Final shared surfaces sit after both theme palettes so this direction is
   consistent on every route and in both themes. */
:root { --bg: #fff; --paper: #fff; --ink: #111113; --muted: #85858c; --line: #e6e6e9; --shadow: none; }
:root[data-theme="dark"] { --bg: #080809; --paper: #111113; --ink: #f4f4f6; --muted: #a0a0a8; --line: #303035; --shadow: none; }
html, body { background: var(--bg); color: var(--ink); }
.card, .section-card, .day-card, .profile-grid .section-card {
  border: 2px solid var(--line); border-radius: 22px; box-shadow: none;
}
.smallbtn, .iconbtn, .field, .chat-compose input, .assistant-compose textarea,
.calendar-provider, .mobile-menu { border-radius: 15px; box-shadow: none; }
.smallbtn.primary, .addbtn, .send { border-radius: 15px; }
.top h1 { font-weight: 800; letter-spacing: -1px; }
.top .date { color: var(--muted); }
.top .actions .smallbtn, .top .actions .iconbtn { border-radius: 15px; }
.profile-hero { border-radius: 26px; }
.profile-large-avatar { background: #111113; color: #fff; }
.move, .calendar-provider { border: 1px solid var(--line); }
.mobilebar { box-shadow: none; }
:root[data-theme="dark"] .sidebar, :root[data-theme="dark"] .top { background: #0b0b0d; }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .section-card,
:root[data-theme="dark"] .day-card,
:root[data-theme="dark"] .profile-grid .section-card {
  background: #111113; border-color: #303035; box-shadow: none;
}
:root[data-theme="dark"] .profile-large-avatar { background: #f4f4f6; color: #111113; }
:root[data-theme="dark"] .top { border-color: #303035; }

/* Keep signup as one focused form, with provider sign-in as the alternative. */
:root #authScreen .authContent {
  height: auto;
  max-height: min(92dvh, 820px);
  padding-top: 30px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}
:root #authScreen .authContent h1 { margin-bottom: 6px; }
:root #authScreen .authContent > p:not(.authAccountToggle) { margin: 0 0 12px; }
:root #authScreen .authContent label { margin: 12px 0 5px; }
:root #authScreen .authContent .college-picker-hint { margin-top: 5px; font-size: 11px; }
:root #authScreen .authContent .authSubmit { margin-top: 16px; }
:root #authScreen .authContent .authDivider {
  margin: 14px 0 2px;
  color: #85858c;
}
:root #authScreen .authContent .authDivider::before,
:root #authScreen .authContent .authDivider::after { background: #e6e6e9; }
:root #authScreen .authContent .googleSignIn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  border: 2px solid #e6e6e9;
  border-radius: 15px;
  background: #fff;
  color: #111113;
  font-weight: 700;
  text-decoration: none;
}
:root #authScreen .authContent .googleSignIn:hover { background: #f7f7f8; }
:root #authScreen .authContent a.googleSignIn {
  color: #111113 !important;
  text-decoration: none !important;
}
:root #authScreen .authContent #googleSetupButton {
  background: #fff !important;
  color: #111113 !important;
  border: 2px solid #e6e6e9 !important;
}
:root #authScreen .authContent .authAccountToggle { margin: 18px 0 0; text-align: center; }
:root #authScreen .authContent.authSignup > .brand { justify-content: center; }
:root #authScreen .authContent.authSignup h1,
:root #authScreen .authContent.authSignup > p:not(.authAccountToggle):not(#authError) {
  text-align: center;
}
@media (max-width: 760px) {
  :root #authScreen .authContent { width: 100%; max-height: 92dvh; }
}
:root #authScreen .authContent > .brand {
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 0 0 8px !important;
  color: #85858c;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
:root #authScreen .authContent {
  min-height: min(88dvh, 800px);
  max-height: min(90dvh, 820px);
}
@media (max-width: 760px) {
  :root #authScreen .authContent {
    min-height: 86dvh;
    max-height: 90dvh;
  }
}
.auth-dashboard-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 158px;
  margin: 4px 0 14px;
  overflow: hidden;
  border: 1px solid #ececf0;
  border-radius: 22px;
  background: #f7f7f9;
  isolation: isolate;
}
.auth-art-orbit {
  position: absolute;
  width: 220px;
  height: 220px;
  border: 1px solid #d8a6ed55;
  border-radius: 50%;
  animation: auth-orbit-turn 22s linear infinite;
  will-change: transform;
}
.auth-art-orbit-one { transform: rotate(-25deg) scaleX(1.3); }
.auth-art-orbit-two { width: 290px; height: 112px; border-color: #64d9e455; animation-duration: 28s; animation-direction: reverse; }
.auth-art-orbit::after { position: absolute; top: 50%; left: -4px; width: 7px; height: 7px; border: 2px solid #f7f7f9; border-radius: 50%; background: #b77ad0; content: ""; }
.auth-art-orbit-two::after { left: auto; right: 12%; background: #64d9e4; }
.auth-art-panel {
  position: relative;
  z-index: 1;
  width: min(70%, 430px);
  padding: 10px 12px;
  border: 1px solid #dedee4;
  border-radius: 16px;
  background: #fff;
  transform-origin: 50% 65%;
  animation: auth-panel-arrive .9s cubic-bezier(.2,.8,.2,1) both, auth-panel-drift 7s 1s ease-in-out infinite;
  will-change: transform, opacity;
}
.auth-art-phone {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 7%;
  width: 55px;
  height: 102px;
  padding: 3px;
  border: 2px solid #26262b;
  border-radius: 13px;
  background: #202024;
  box-shadow: 0 5px 12px #16161a1c;
  animation: auth-phone-arrive .75s .45s cubic-bezier(.2,.8,.2,1) both, auth-phone-drift 6s 1.2s ease-in-out infinite;
  will-change: transform, opacity;
}
.auth-art-phone-screen { position: relative; height: 100%; overflow: hidden; padding: 11px 5px 5px; border-radius: 9px; background: #fff; }
.auth-art-phone-notch { position: absolute; top: 4px; left: 50%; width: 17px; height: 3px; border-radius: 4px; background: #26262b; translate: -50% 0; }
.auth-art-phone-heading { display: grid; gap: 3px; padding-bottom: 5px; border-bottom: 1px solid #eeeeF0; animation: auth-content-arrive .45s .75s both; }
.auth-art-phone-heading small { color: #77777f; font-size: 4px; font-weight: 800; letter-spacing: .3px; }
.auth-art-phone-heading b { color: #17171a; font-size: 9px; line-height: 1; }
.auth-art-phone-focus { display: flex; align-items: center; gap: 4px; margin: 5px 0; padding: 4px 3px; border-radius: 5px; background: #f5f2f8; animation: auth-content-arrive .45s .9s both; }
.auth-art-phone-focus > i { width: 3px; height: 17px; border-radius: 3px; background: #b77ad0; }
.auth-art-phone-focus span { display: grid; gap: 2px; }
.auth-art-phone-focus b { color: #29292d; font-size: 5px; }
.auth-art-phone-focus small { color: #86868d; font-size: 4px; }
.auth-art-phone-task { display: flex; align-items: center; gap: 3px; margin-top: 4px; animation: auth-task-arrive .4s 1.05s both; }
.auth-art-phone-task:nth-of-type(5) { animation-delay: 1.2s; }
.auth-art-phone-task:nth-of-type(6) { animation-delay: 1.35s; }
.auth-art-phone-task i { display: grid; width: 6px; height: 6px; place-items: center; border: 1px solid #c9c9cf; border-radius: 2px; color: #fff; font-size: 5px; font-style: normal; }
.auth-art-phone-task:nth-of-type(3) i { border-color: #b77ad0; background: #b77ad0; }
.auth-art-phone-task b { width: 25px; height: 3px; border-radius: 3px; background: #e2e2e7; }
.auth-art-phone-nav { position: absolute; right: 5px; bottom: 4px; left: 5px; display: flex; justify-content: space-around; padding-top: 4px; border-top: 1px solid #eeeef0; }
.auth-art-phone-nav i { width: 5px; height: 5px; border-radius: 50%; background: #d7d7dc; }
.auth-art-phone-nav i:nth-child(2) { background: #b77ad0; }
.auth-art-top { display: flex; align-items: center; gap: 4px; height: 14px; color: #77777f; font-size: 8px; font-weight: 800; letter-spacing: .8px; }
.auth-art-top span { margin-right: auto; }
.auth-art-top i { width: 5px; height: 5px; border-radius: 50%; background: #d8a6ed; }
.auth-art-top i:last-child { background: #64d9e4; }
.auth-art-summary { display: flex; align-items: center; gap: 9px; margin: 7px 0; animation: auth-content-arrive .55s .25s both; }
.auth-art-ring { position: relative; display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; color: #17171a; font-size: 10px; background: conic-gradient(#64d9e4 0 79deg, #b77ad0 79deg var(--auth-ring-progress), #ececf0 var(--auth-ring-progress) 360deg); animation: auth-ring-fill 1.25s .45s cubic-bezier(.22,.8,.2,1) both; }
.auth-art-ring::before { position: absolute; content: ""; inset: 4px; border-radius: 50%; background: #fff; }
.auth-art-ring b { position: relative; z-index: 1; }
.auth-art-lines { display: grid; flex: 1; gap: 5px; }
.auth-art-lines i, .auth-art-task i, .auth-art-task b { display: block; height: 5px; border-radius: 5px; background: #e5e5e9; transform-origin: left center; }
.auth-art-lines i { animation: auth-line-grow .7s .55s cubic-bezier(.2,.8,.2,1) both; }
.auth-art-lines i:first-child { width: 45%; background: #b8b8c0; }
.auth-art-lines i:last-child { width: 70%; height: 4px; }
.auth-art-task { display: flex; align-items: center; gap: 7px; padding-top: 5px; border-top: 1px solid #efeff2; }
.auth-art-task-one { animation: auth-task-arrive .5s .7s both; }
.auth-art-task-two { animation: auth-task-arrive .5s .92s both; }
.auth-art-task + .auth-art-task { margin-top: 5px; }
.auth-art-check { display: grid; width: 13px; height: 13px; place-items: center; border-radius: 4px; background: #d8a6ed; color: #17171a; font-size: 9px; font-style: normal; }
.auth-art-check-cyan { background: #64d9e4; }
.auth-art-task i { width: 45%; height: 4px; }
.auth-art-task b { width: 18%; height: 4px; margin-left: auto; background: #f0ebf3; }
.auth-art-caption { display: flex; align-items: center; gap: 5px; margin-top: 6px; padding: 5px 7px; border-radius: 7px; background: #f6f1f8; color: #686870; animation: auth-content-arrive .5s 1.05s both; }
.auth-art-caption span { color: #8d69a4; font-size: 9px; }
.auth-art-caption b { font-size: 7px; font-weight: 700; letter-spacing: .1px; }
.auth-art-float { position: absolute; z-index: 2; display: grid; place-items: center; border: 1px solid #e1e1e5; border-radius: 12px; background: #fff; animation: auth-float 5s 1s ease-in-out infinite, auth-chip-arrive .65s .2s cubic-bezier(.2,.8,.2,1) both; will-change: translate; }
.auth-art-calendar { top: 20px; left: 9%; width: 48px; height: 58px; rotate: -7deg; }
.auth-art-calendar small { color: #85858c; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.auth-art-calendar b { color: #17171a; font-size: 22px; line-height: 1; }
.auth-art-calendar i { width: 20px; height: 3px; border-radius: 4px; background: #64d9e4; }
.auth-art-streak { right: 7%; bottom: 20px; grid-template-columns: 18px auto; gap: 5px; padding: 8px 10px; rotate: 3deg; animation-delay: 1.35s, .45s; }
.auth-art-streak span { color: #8d69a4; font-size: 17px; }
.auth-art-streak b { color: #686870; font-size: 8px; line-height: 1.25; letter-spacing: 0; text-align: left; white-space: nowrap; }
@keyframes auth-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes auth-panel-drift { 0%,100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@keyframes auth-panel-arrive { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes auth-content-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-chip-arrive { from { opacity: 0; scale: .72; } to { opacity: 1; scale: 1; } }
@keyframes auth-task-arrive { from { opacity: 0; translate: 10px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes auth-phone-arrive { from { opacity: 0; transform: translateY(10px) scale(.88); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes auth-phone-drift { 0%,100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@keyframes auth-line-grow { from { scale: 0 1; } to { scale: 1 1; } }
@property --auth-ring-progress { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes auth-ring-fill { from { --auth-ring-progress: 0deg; } to { --auth-ring-progress: 281deg; } }
@keyframes auth-orbit-turn { to { rotate: 360deg; } }
@media (max-width: 760px) {
  .auth-dashboard-art { height: 172px; margin: 2px 0 12px; }
  .auth-art-orbit-one { width: 150px; height: 150px; }
  .auth-art-orbit-two { width: 250px; height: 118px; }
  .auth-art-panel { width: 60%; padding: 8px; }
  .auth-art-calendar { top: 17px; left: 5%; width: 42px; height: 52px; }
  .auth-art-phone { top: 10px; right: 4%; width: 62px; height: 108px; padding: 3px; border-radius: 15px; }
  .auth-art-phone-screen { padding: 12px 5px 5px; border-radius: 10px; }
  .auth-art-phone-notch { top: 4px; width: 20px; height: 3px; }
  .auth-art-phone-heading { gap: 3px; padding-bottom: 5px; }
  .auth-art-phone-heading small { font-size: 4px; }
  .auth-art-phone-heading b { font-size: 10px; }
  .auth-art-phone-focus { gap: 4px; margin: 5px 0; padding: 4px 3px; }
  .auth-art-phone-focus > i { width: 3px; height: 17px; }
  .auth-art-phone-focus b { font-size: 5px; }
  .auth-art-phone-focus small { font-size: 4px; }
  .auth-art-phone-task { gap: 3px; margin-top: 4px; }
  .auth-art-phone-task i { width: 6px; height: 6px; }
  .auth-art-phone-task b { width: 24px; height: 3px; }
  .auth-art-phone-nav { right: 5px; bottom: 4px; left: 5px; padding-top: 4px; }
  .auth-art-phone-nav i { width: 5px; height: 5px; }
  .auth-art-caption { gap: 4px; margin-top: 5px; padding: 4px 5px; }
  .auth-art-caption span { font-size: 8px; }
  .auth-art-caption b { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-art-orbit, .auth-art-panel, .auth-art-phone, .auth-art-float, .auth-art-caption { animation: none; }
  .auth-art-summary, .auth-art-task, .auth-art-lines i, .auth-art-ring,
  .auth-art-phone-heading, .auth-art-phone-focus { animation: none; }
}

/* Keep account creation centered and fully visible without an inner scroll area. */
html:has(#authScreen:not([hidden])),
html:has(#authScreen:not([hidden])) body {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
:root #authScreen {
  place-items: center;
  align-items: center;
  padding: 20px;
  overflow: hidden;
}
:root #authScreen .authContent {
  align-self: center;
  width: min(660px, calc(100vw - 40px));
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 20px clamp(24px, 4vw, 46px);
  overflow: hidden;
  border: 2px solid #e6e6e9 !important;
  border-bottom: 2px solid #e6e6e9 !important;
  border-radius: 28px !important;
}
:root #authScreen .authContent > .brand {
  padding: 0 0 8px !important;
  color: #66666e;
}
:root #authScreen .authContent > p { margin-bottom: 12px; }
:root #authScreen .authContent label { margin: 11px 0 4px; }
:root #authScreen .authContent input { min-height: 48px; }
:root #authScreen .authContent .authSubmit { margin-top: 14px; }
:root #authScreen .authContent .authAccountToggle { margin: 12px 0 0; }
:root #authScreen .authContent .authDivider { margin: 12px 0 0; }
:root #authScreen .authContent .googleSignIn { margin-top: 10px; }
@media (max-height: 900px) {
  .auth-dashboard-art { height: 138px; margin: 2px 0 10px; }
  :root #authScreen .authContent { padding-top: 16px; padding-bottom: 16px; }
  :root #authScreen .authContent input { min-height: 44px; }
  :root #authScreen .authContent label { margin-top: 8px; }
  :root #authScreen .authContent > p { margin-bottom: 8px; }
}
@media (max-height: 760px) {
  .auth-dashboard-art { height: 110px; margin: 0 0 6px; }
  .auth-art-panel { padding: 7px; }
  :root #authScreen { padding: 10px; }
  :root #authScreen .authContent { width: min(620px, calc(100vw - 28px)); max-height: calc(100dvh - 20px); padding: 10px 26px; }
  :root #authScreen .authContent h1 { margin-bottom: 4px; font-size: 26px; }
  :root #authScreen .authContent > p { margin-bottom: 5px; }
  :root #authScreen .authContent label { margin: 5px 0 2px; }
  :root #authScreen .authContent input { min-height: 38px; padding-top: 8px !important; padding-bottom: 8px !important; }
  :root #authScreen .authContent .authSubmit { min-height: 42px; margin-top: 8px; }
  :root #authScreen .authContent .authAccountToggle,
  :root #authScreen .authContent .authDivider { margin-top: 6px; }
  :root #authScreen .authContent .googleSignIn { min-height: 42px; margin-top: 6px; }
}
@media (max-width: 760px) {
  /* iOS Safari zooms the page when a focused form control uses text under 16px. */
  :root { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select,
  #authScreen .authContent input { font-size: 16px !important; }
  :root #authScreen { padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); }
  :root #authScreen .authContent {
    width: min(520px, calc(100vw - 24px));
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 14px 22px;
  }
}
@media (max-width: 760px) and (max-height: 760px) {
  .auth-dashboard-art { height: 118px; margin-bottom: 5px; }
  :root #authScreen .authContent { padding: 8px 18px; }
  :root #authScreen .authContent h1 { font-size: 24px; }
}

.mobile-settings { display: none; }
.settings-view { display: flex; flex-direction: column; gap: 18px; }
.main.settings-active .top { display: none; }
.settings-heading { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; min-height: 60px; margin: 0 0 12px; }
.settings-heading h2 { margin: 0; text-align: center; font: 700 25px/1.2 Satoshi, sans-serif; }
.settings-back { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.settings-back svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.settings-upgrade, .settings-account, .settings-row { width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; font: inherit; cursor: pointer; }
.settings-upgrade { min-height: 112px; padding: 22px 24px; border: 0; border-radius: 25px; background: #09090a; color: #fff; }
.settings-diamond { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; }
.settings-diamond svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-upgrade-copy, .settings-account-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.settings-upgrade-copy strong { font-size: 22px; line-height: 1.18; }
.settings-upgrade-copy small { color: #aaa; font-size: 14px; line-height: 1.35; }
.settings-chevron { color: #999; font-size: 30px; font-weight: 300; line-height: 1; }
.settings-account { min-height: 112px; padding: 18px 20px; border: 2px solid var(--line); border-radius: 25px; background: #f8f8f8; color: #111113; }
.settings-avatar { width: 68px; height: 68px; flex: 0 0 68px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #09090a; color: #fff; font-size: 25px; font-weight: 700; }
.settings-avatar img { width: 100%; height: 100%; object-fit: cover; }
.settings-account-copy strong { overflow: hidden; text-overflow: ellipsis; font-size: 21px; line-height: 1.15; white-space: nowrap; }
.settings-account-copy small { overflow: hidden; color: #929297; font-size: 15px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.settings-edit { width: 25px; height: 25px; flex: 0 0 25px; fill: none; stroke: #999; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-row { min-height: 58px; justify-content: space-between; padding: 0 18px; border: 2px solid var(--line); border-radius: 18px; background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .settings-account { background: #111113; border-color: #303035; color: #f4f4f6; }
:root[data-theme="dark"] .settings-account-copy small { color: #a0a0a8; }
:root[data-theme="dark"] .settings-upgrade { background: #f3f3f5; color: #111113; }
:root[data-theme="dark"] .settings-upgrade-copy small,
:root[data-theme="dark"] .settings-chevron { color: #65656c; }

/* Keep the desktop greeting and its actions aligned across the full dashboard. */
@media (min-width: 761px) {
  .main > .top { align-self: stretch; width: 100%; }
  .top { justify-content: space-between; }
  .top h1 { font-size: clamp(34px, 2.65vw, 48px); line-height: 1.08; letter-spacing: -1.7px; }
}

@media (max-width: 760px) {
  .top { display: flex; align-items: flex-start; gap: 8px; padding: 18px 20px 14px; border-bottom: 0; background: var(--bg); }
  .top > div:first-child { min-width: 0; flex: 1; }
  .top .date { margin-bottom: 6px; color: #999; font-size: 11px; letter-spacing: 1.5px; }
  .top .date span:first-child { display: none; }
  .top h1 { max-width: 100%; margin: 0; overflow: visible; padding-left: 3px; color: var(--ink); font-size: clamp(20px, 5.5vw, 26px); line-height: 1.12; letter-spacing: -.8px; white-space: nowrap; }
  .mobile-settings { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; margin: 10px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mobile-settings svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .settings-view { gap: 18px; }
  .settings-heading { grid-template-columns: 44px 1fr 44px; min-height: 52px; margin: 0 0 10px; }
  .settings-heading h2 { font-size: 24px; }
  .settings-back { width: 42px; height: 42px; }
  .settings-upgrade { min-height: 98px; gap: 13px; padding: 17px 18px; border-radius: 24px; }
  .settings-upgrade-copy strong { font-size: 21px; }
  .settings-upgrade-copy small { font-size: 13px; }
  .settings-account { min-height: 98px; gap: 14px; padding: 14px 15px; border-radius: 24px; }
  .settings-avatar { width: 60px; height: 60px; flex-basis: 60px; font-size: 22px; }
  .settings-account-copy strong { font-size: 20px; }
  .settings-account-copy small { font-size: 13px; }
}

/* Sign-in recovery actions are links, not competing primary buttons. */
#authScreen .authContent .recoveryLinks {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 12px 0 0;
  color: #b8b8bf;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
#authScreen .authContent .recoveryLinks button.link {
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 8px 3px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: #76568b;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
#authScreen .authContent .recoveryLinks button.link:hover { color: #52376a; }
#authScreen .authContent .recoveryLinks button.link:focus-visible {
  outline: 2px solid #76568b;
  outline-offset: 2px;
  border-radius: 3px;
}
#authScreen .authContent input:-webkit-autofill,
#authScreen .authContent input:-webkit-autofill:hover,
#authScreen .authContent input:-webkit-autofill:focus,
#authScreen .authContent input:autofill {
  -webkit-box-shadow: 0 0 0 1000px #f7f7f8 inset !important;
  box-shadow: 0 0 0 1000px #f7f7f8 inset !important;
  -webkit-text-fill-color: #111113 !important;
  caret-color: #111113;
  border-color: #dedee3 !important;
}

/* Recovery screens use a compact centered card and a quiet back link. */
:root #authScreen .authContent.authRecovery {
  align-self: center;
  width: min(560px, calc(100vw - 40px));
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 30px clamp(24px, 4vw, 44px);
  overflow-y: auto;
  border: 1px solid #e6e6e9 !important;
  border-bottom: 1px solid #e6e6e9 !important;
  border-radius: 26px !important;
  background: #fff !important;
  box-shadow: 0 18px 54px #0002 !important;
  color: #111113 !important;
  text-align: left;
}
:root #authScreen .authContent.authRecovery > .brand {
  justify-content: flex-start;
  margin: 0 0 18px;
  padding: 0 !important;
  color: #505058;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
:root #authScreen .authContent.authRecovery h1 {
  margin: 0 0 8px;
  color: #111113;
  font-size: clamp(27px, 4vw, 34px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
:root #authScreen .authContent.authRecovery > p:not(.recoveryBack) {
  margin: 0 0 22px;
  color: #686870;
  font-size: 15px;
  line-height: 1.5;
}
:root #authScreen .authContent.authRecovery form label {
  display: block;
  margin: 14px 0 6px;
  color: #414149;
  font-size: 13px;
  font-weight: 650;
}
:root #authScreen .authContent.authRecovery form input.field {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px !important;
  border: 1px solid #dcdce2 !important;
  border-radius: 13px !important;
  background: #f7f7f8 !important;
  color: #111113 !important;
}
:root #authScreen .authContent.authRecovery form > button {
  width: 100%;
  min-height: 52px;
  margin: 16px 0 0;
  border-radius: 14px;
  background: #111113;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
:root #authScreen .authContent.authRecovery .recoveryStatus {
  margin: 10px 0 0;
  color: #686870;
  font-size: 13px;
  line-height: 1.45;
}
:root #authScreen .authContent.authRecovery .recoveryBack {
  margin: 10px 0 0;
  text-align: left;
}
:root #authScreen .authContent.authRecovery .recoveryBack button.link {
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: #66666e;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
:root #authScreen .authContent.authRecovery .recoveryBack button.link:hover {
  color: #76568b;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 760px) {
  :root #authScreen .authContent.authRecovery {
    width: min(520px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 24px 20px;
    border-radius: 24px !important;
  }
  :root #authScreen .authContent.authRecovery > .brand { margin-bottom: 14px; }
  :root #authScreen .authContent.authRecovery > p:not(.recoveryBack) { margin-bottom: 16px; }
}

:root #authScreen .authContent .passwordField { position: relative; width: 100%; }
:root #authScreen .authContent .passwordField input { width: 100%; padding-right: 88px !important; }
:root #authScreen .authContent button.passwordReveal {
  top: 50%;
  right: 14px;
  min-height: 44px;
  padding: 0;
  transform: translateY(-50%);
}

/* Give the account form matching top and bottom insets at every viewport size. */
:root #authScreen .authContent:not(.authRecovery) {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
@media (max-height: 900px) {
  :root #authScreen .authContent:not(.authRecovery) {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}
@media (max-height: 760px) {
  :root #authScreen .authContent:not(.authRecovery) {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}
@media (max-width: 760px) {
  :root #authScreen .authContent:not(.authRecovery) {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: clamp(18px, 5vw, 24px);
    padding-right: clamp(18px, 5vw, 24px);
  }
  .auth-dashboard-art { height: 132px; margin: 2px 0 10px; }
}
@media (max-width: 760px) and (max-height: 760px) {
  :root #authScreen .authContent:not(.authRecovery) {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .auth-dashboard-art { height: 112px; margin: 0 0 6px; }
}
:root #authScreen .authContent .authAccountToggle {
  margin: 16px 0 16px !important;
  text-align: center;
}
@media (max-height: 760px) {
  :root #authScreen .authContent .authAccountToggle {
    margin: 12px 0 10px !important;
  }
}

/* Home layout: one full-width daily timeline, then the student's priorities. */
.home-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.home-dashboard > .home-timeline { grid-column: 1 / -1; min-width: 0; }
.home-dashboard > .home-card { min-width: 0; }
.home-dashboard .head { align-items: flex-start; }
.home-dashboard .head h2 { margin: 0; font: 700 15px/1.3 Satoshi, sans-serif; }
.quick-task-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 18px; }
.quick-task-form input { width: 100%; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; }
.quick-task-form input:focus { outline: 2px solid color-mix(in srgb, var(--green) 45%, transparent); outline-offset: 1px; }
.quick-task-form .smallbtn { min-height: 46px; white-space: nowrap; }
.plan-empty { margin: 0; }
.home-timeline .head { align-items: center; margin-bottom: 16px; }
.home-timeline .head p { margin: 4px 0 0; }
.timeline-scroll { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.timeline-axis {
  display: flex;
  justify-content: space-between;
  min-width: 620px;
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 10px;
}
.timeline-axis span { transform: none; }
.timeline-axis span:last-child { text-align: right; }
.timeline-track {
  position: relative;
  min-width: 620px;
  min-height: max(72px, calc(var(--timeline-lanes) * 58px + 14px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
}
.timeline-tick {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: var(--tick);
  width: 1px;
  background: var(--line);
}
.timeline-event {
  position: absolute;
  z-index: 1;
  top: calc(8px + var(--event-lane) * 54px);
  left: var(--event-left);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--event-width);
  height: 46px;
  min-width: 50px;
  overflow: hidden;
  padding: 5px 8px;
  border: 1px solid var(--green);
  border-radius: 9px;
  background: var(--mint);
  color: var(--ink);
  animation: timeline-arrive .45s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--event-delay);
}
.timeline-event.is-connected { background: var(--mint); }
.timeline-event > span { color: var(--muted); font-size: 9px; line-height: 1.2; }
.timeline-event > b { overflow: hidden; font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.timeline-now {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--now);
  width: 2px;
  background: #e37d63;
  box-shadow: 0 0 0 3px #e37d6320;
  pointer-events: none;
}
.timeline-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 12px; color: var(--muted); font-size: 12px; text-align: center; }
.life-updates { display: grid; gap: 10px; }
.life-update { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; gap: 9px; }
.life-update > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--mint); color: var(--green); font-size: 13px; font-weight: 700; }
.life-update p { margin: 3px 0 0; color: var(--ink); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
@keyframes timeline-arrive { from { opacity: 0; transform: translateY(7px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 760px) {
  .home-dashboard { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .home-dashboard > .home-timeline { grid-column: auto; }
  .home-dashboard .head h2 { font-size: 14px; }
  .home-dashboard .home-timeline .head { gap: 8px; }
  .home-dashboard .home-timeline .head .link { flex: 0 0 auto; }
  .timeline-scroll { min-width: 0; overflow-x: hidden; overscroll-behavior-inline: none; }
  .timeline-axis, .timeline-track { width: 100%; min-width: 0; }
  .timeline-axis { font-size: 9px; }
  .timeline-event { min-width: 0; padding: 4px 5px; }
  .timeline-event > span { font-size: 8px; }
  .timeline-event > b { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-event { animation: none; }
}
.main > .grid > .home-dashboard {
  grid-column: 1 / -1;
  width: auto;
  min-width: 0;
  gap: 14px;
}
.top h1 {
  font-size: clamp(34px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -1px;
}
@media (max-width: 760px) {
  .top { padding-top: calc(26px + env(safe-area-inset-top, 0px)); }
  .top .date { font-size: 12px; letter-spacing: 1.6px; }
  .top h1 { font-size: clamp(20px, 5.5vw, 26px); }
}

/* Give the desktop home view a clearer, roomier editorial hierarchy. */
@media (min-width: 761px) {
  .main > .top {
    padding: 30px clamp(24px, 2.2vw, 40px) 26px;
  }
  .top .date { font-size: 12px; letter-spacing: 1.7px; }
  .top h1 { font-size: clamp(42px, 3.8vw, 58px); letter-spacing: -2px; }
  .main > .grid > .home-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 26px clamp(24px, 2.2vw, 40px) 0;
  }
  .home-dashboard > .home-tasks { grid-column: 1 / -1; }
  .home-dashboard > .home-card {
    min-height: 160px;
    padding: 20px;
  }
  .home-dashboard .head { margin-bottom: 16px; }
  .home-dashboard .head h2 { font-size: 19px; }
  .home-dashboard .home-card > p,
  .home-dashboard .home-card .subtle { font-size: 14px; line-height: 1.55; }
  .home-dashboard .home-timeline { padding: 24px; }
  .home-dashboard .home-timeline .head h2 { font-size: 20px; }
  .home-dashboard .task { min-height: 62px; padding: 12px 4px; }
  .home-dashboard .taskname { font-size: 15px; }
  .home-dashboard .check { width: 19px; height: 19px; }
}
/* Keep today's task panel compact when the list is short or empty. */
.home-dashboard > .home-tasks { min-height: 0; padding-block: 16px; }
.home-dashboard > .home-tasks .quick-task-form { margin-top: 12px; }
@media (min-width: 761px) {
  .main > .grid > .home-dashboard { row-gap: 16px; }
}
@media (max-width: 760px) {
  .home-dashboard > .home-tasks { padding-block: 14px; }
}
@media (max-width: 420px) {
  .quick-task-form { grid-template-columns: minmax(0, 1fr); }
  .quick-task-form .smallbtn { width: 100%; }
}
.profile-icon-btn { display: grid; place-items: center; width: 48px; min-width: 48px; height: 48px; padding: 0; border-radius: 50%; }
.profile-icon-btn svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Final product design system: shared tokens and components for every view. */
:root {
  --bg: #f5f7f4;
  --paper: #ffffff;
  --ink: #19231d;
  --muted: #68766e;
  --line: #e1e8e2;
  --green: var(--school-accent, #246e57);
  --mint: var(--school-tint, #eaf4ed);
  --shadow: 0 8px 24px rgba(25, 45, 32, .055);
  --card-radius: 18px;
  --control-radius: 12px;
  --primary-ink: var(--school-on-accent, #fff);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0a0e0c;
  --paper: #121714;
  --ink: #edf3ee;
  --muted: #a1ada5;
  --line: #28322b;
  --green: var(--school-accent, #8bc8a1);
  --mint: var(--school-tint, #1c3024);
  --shadow: 0 8px 24px rgba(0, 0, 0, .2);
  --primary-ink: var(--school-on-accent, #102017);
  color-scheme: dark;
}
:root[data-school-theme] { --green: var(--school-accent, #246e57); --mint: var(--school-tint, #eaf4ed); }
:root[data-theme="dark"][data-school-theme] { --green: var(--school-accent, #8bc8a1); --mint: var(--school-tint, #1c3024); }

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: "Satoshi", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; }
button, input, textarea, select { font-family: inherit; }
.brand, .top h1, .section-intro h2, .section-card h3, .home-dashboard h2 { font-family: Satoshi, "Satoshi", sans-serif; }
.sidebar { background: var(--paper); border-color: var(--line); }
.brand { min-height: 42px; letter-spacing: -.35px; }
.logo { background: var(--green); color: var(--primary-ink); }
.label { margin-bottom: 11px; color: var(--muted); font-size: 11px; letter-spacing: 1.25px; }
.nav { gap: 5px; }
.nav button { min-height: 46px; border-radius: 12px; color: var(--muted); }
.nav button.active { color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--paper)); box-shadow: inset 3px 0 var(--green); }
.nav button:hover { background: color-mix(in srgb, var(--green) 7%, var(--paper)); }
.semester { border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--bg); }
.progress { background: color-mix(in srgb, var(--line) 74%, var(--paper)); }
.progress i { background: var(--green); }
.user { min-height: 52px; border-radius: 14px; }
.user:hover { background: color-mix(in srgb, var(--green) 7%, var(--paper)); }
.avatar { background: var(--mint); color: var(--green); }

.top { background: var(--bg); border-color: var(--line); }
.top .date { color: var(--muted); line-height: 1.4; }
.top h1 { color: var(--ink); }
.top .actions .smallbtn, .top .actions .iconbtn { min-height: 46px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); }
.top .actions .iconbtn { width: 46px; }
.top .actions button:hover { border-color: color-mix(in srgb, var(--green) 42%, var(--line)); background: var(--mint); }
.profile-icon-btn svg { stroke-width: 1.9; }

.card, .section-card, .day-card, .profile-grid .section-card {
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.card, .section-card { padding: 22px; }
.card, .section-card, .day-card, .move, .list-row { transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.card:hover, .section-card:hover { border-color: color-mix(in srgb, var(--green) 20%, var(--line)); }
.head { gap: 14px; }
.head h3, .home-dashboard .head h2 { color: var(--ink); }
.section-view { gap: 20px; }
.section-intro { align-items: center; gap: 20px; }
.section-intro h2 { margin: 0; color: var(--ink); font-size: clamp(26px, 2.2vw, 32px); line-height: 1.12; letter-spacing: -.9px; }
.section-intro p { max-width: 680px; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.section-grid { gap: 18px; }
.section-card h3 { font-size: 17px; letter-spacing: -.25px; }
.section-card p, .list-row small { color: var(--muted); font-size: 14px; line-height: 1.55; }
.eyebrow { color: var(--green); }
.subtle { color: var(--muted); font-size: 12px; line-height: 1.45; }
.link { min-height: 36px; border-radius: 9px; color: var(--green); font-size: 12px; }
.link:hover { background: color-mix(in srgb, var(--green) 9%, var(--paper)); }

.smallbtn, .iconbtn, .field, .chat-compose input, .assistant-compose textarea,
.calendar-provider, .mobile-menu { border-radius: var(--control-radius); }
.smallbtn { min-height: 42px; padding: 0 15px; border-color: var(--line); background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 650; }
.smallbtn.primary, .addbtn, .send { border-color: var(--green); border-radius: var(--control-radius); background: var(--green); color: var(--primary-ink); }
.smallbtn.primary:hover, .addbtn:hover, .send:hover { filter: brightness(.96); }
:root[data-theme="dark"] .smallbtn.primary,
:root[data-theme="dark"] .addbtn,
:root[data-theme="dark"] .send { border-color: var(--green); background: var(--green); color: var(--primary-ink); }
.iconbtn { min-width: 42px; min-height: 42px; border-color: var(--line); background: var(--paper); color: var(--ink); }
#themeToggle { font-size: 25px; line-height: 1; }
.main input:not([type="checkbox"]), .main textarea, .main select, .profile-dialog .field {
  min-height: 44px; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--bg); color: var(--ink);
}
.main input::placeholder, .main textarea::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); }
.main input:focus, .main textarea:focus, .main select:focus { border-color: var(--green); outline: 3px solid color-mix(in srgb, var(--green) 16%, transparent); }
.toolbar { gap: 9px; }
.filter.active { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); background: var(--mint); color: var(--green); }
.list-row { min-height: 48px; border-color: var(--line); color: var(--ink); font-size: 14px; }
.list-row:hover { background: color-mix(in srgb, var(--green) 5%, var(--paper)); }
.pill, .tag { border-radius: 999px; background: var(--mint); color: var(--green); font-size: 11px; }
.task { min-height: 54px; border-color: var(--line); }
.taskname { color: var(--ink); font-size: 14px; }
.tasktime, .event time, .event small, .note-row small { color: var(--muted); font-size: 12px; }
.check { width: 19px; height: 19px; border-color: color-mix(in srgb, var(--muted) 50%, var(--line)); }
.check:checked { background: var(--green); border-color: var(--green); }
.move { border: 1px solid var(--line); border-radius: 13px; background: var(--bg); }
.move b, .event b, .mail b, .note-row b { color: var(--ink); font-size: 14px; }
.move small { color: var(--muted); font-size: 12px; }
.calendar-days { gap: 10px; }
.day-card { min-height: 120px; padding: 13px; }
.day-card.today { border-color: var(--green); background: var(--mint); }
.day-card b { color: var(--ink); font-size: 13px; }
.day-card small { color: var(--muted); font-size: 11px; }
.day-event { border-radius: 8px; background: var(--mint); color: var(--ink); font-size: 11px; line-height: 1.4; }
.goal-meter { height: 8px; border-radius: 999px; background: var(--line); }
.goal-meter i { background: var(--green); }
.journal-entry { border-left-color: var(--green); }
.journal-entry p { color: var(--ink); font-size: 14px; line-height: 1.6; }
.moods { gap: 8px; }
.moods button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); }
.moods button:hover, .moods button.selected { border-color: var(--green); background: var(--mint); }
.paywall, .mail-connect { border-radius: var(--card-radius); }
.toast { z-index: 40; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); font-size: 13px; }
.mobilebar { border-color: var(--line); background: var(--paper); }
.mobilebar button { min-height: 58px; color: var(--muted); }
.mobilebar button.active { color: var(--green); }
.mobile-menu { background: var(--paper); color: var(--ink); box-shadow: 0 14px 36px rgba(0,0,0,.16); }
.mobile-menu button { min-height: 44px; border-radius: 10px; color: var(--ink); }
.profile-dialog { border-color: var(--line); border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.profile-hero { border-radius: 22px; }
.profile-grid .section-card { padding: 22px; }
.section-card, .card { overflow-wrap: anywhere; }

:where(button, a, input, textarea, select):focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 54%, transparent); outline-offset: 3px; }
@media (max-width: 760px) {
  .card, .section-card { padding: 18px; }
  .section-view { gap: 16px; }
  .section-intro { align-items: flex-start; }
  .section-intro h2 { font-size: 25px; }
  .section-intro p { font-size: 13px; }
  .section-grid { gap: 12px; }
  .day-card { min-height: 92px; padding: 10px; }
  .home-dashboard .home-card { min-height: 0; }
  .home-dashboard .head h2 { font-size: 16px; }
  .top { background: var(--bg); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Fit the account editor to narrow screens without clipping its controls. */
@media (max-width: 520px) {
  .profile-overlay { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); background: rgba(8, 12, 10, .72); backdrop-filter: blur(3px); }
  .profile-dialog { width: 100%; max-width: 460px; max-height: 90dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 20px; border-radius: 22px; }
  .profile-dialog .head { gap: 12px; }
  .profile-dialog .head h2 { font-size: 24px; }
  .profile-photo-row { gap: 12px; }
  .profile-photo-preview { width: 68px; height: 68px; flex-basis: 68px; }
  .profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 9px; margin-top: 20px; }
  .profile-actions > span { display: none; }
  .profile-actions button { width: 100%; min-width: 0; min-height: 44px; height: auto; padding: 8px 9px; white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }
}

/* Focus the sign-in view on the form, with a distinct light primary action. */
:root #authScreen .authContent.authLogin { align-self: center; width: min(660px, calc(100vw - 40px)); height: auto; min-height: 0; max-height: calc(100dvh - 40px); overflow-x: hidden; overflow-y: auto; padding: 32px; border: 2px solid #e6e6e9 !important; border-bottom: 2px solid #e6e6e9 !important; border-radius: 26px !important; background: #fff !important; color: #111113 !important; text-align: left; }
:root #authScreen .authContent.authLogin > .brand { justify-content: center; padding-bottom: 18px !important; }
:root #authScreen .authContent.authLogin h1 { margin: 0 0 18px; color: #111113; text-align: center; }
:root #authScreen .authContent.authLogin .googleSignIn { margin-top: 0; }
:root #authScreen .authContent.authLogin .authDivider { margin: 16px 0 4px; }
:root #authScreen .authContent.authLogin label { margin-top: 14px; }
:root #authScreen .authContent.authLogin .authSubmit { min-height: 52px; margin-top: 20px; border: 1px solid #c8e2d1; background: #e8f4ec; color: #14583f; }
:root #authScreen .authContent.authLogin .authSubmit:hover { background: #d9eddf; }
:root #authScreen .authContent.authLogin .authAccountToggle { margin: 18px 0 0; text-align: center; }
@media (max-width: 760px) {
  :root #authScreen .authContent.authLogin { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); padding: 26px 22px calc(22px + env(safe-area-inset-bottom)); border-radius: 24px !important; }
}

/* Match the desktop heading to the schedule card after the grid's outer gutter. */
@media (min-width: 761px) {
  .main > .top { padding-left: calc(clamp(10px, 1.15vw, 22px) + clamp(24px, 2.2vw, 40px)); }
}

/* Give the account editor the same crisp, neutral dark treatment as the app. */
:root[data-theme="dark"] .profile-overlay {
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(8px) saturate(.7);
}
:root[data-theme="dark"] .profile-dialog {
  background: #09090b;
  border-color: #303035;
  border-radius: 24px;
  color: #f4f4f6;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .68), 0 0 0 1px rgba(255, 255, 255, .025);
}
:root[data-theme="dark"] .profile-dialog .head {
  padding-bottom: 17px;
  border-bottom: 1px solid #27272d;
}
:root[data-theme="dark"] .profile-dialog .eyebrow { color: #d8a6ed; }
:root[data-theme="dark"] .profile-dialog .head h2 { color: #f4f4f6; letter-spacing: -.7px; }
:root[data-theme="dark"] .profile-dialog .profile-close {
  border: 1px solid #33333a;
  background: #151518;
  color: #f4f4f6;
}
:root[data-theme="dark"] .profile-dialog .profile-close:hover { background: #222228; border-color: #55545d; }
:root[data-theme="dark"] .profile-dialog label { color: #e5e5ea; }
:root[data-theme="dark"] .profile-dialog .field,
:root[data-theme="dark"] .profile-dialog input,
:root[data-theme="dark"] .profile-dialog select {
  background: #141417;
  border-color: #33333a;
  color: #f4f4f6;
}
:root[data-theme="dark"] .profile-dialog .field:focus,
:root[data-theme="dark"] .profile-dialog input:focus,
:root[data-theme="dark"] .profile-dialog select:focus {
  border-color: #bb8ad0;
  box-shadow: 0 0 0 3px rgba(216, 166, 237, .14);
}
:root[data-theme="dark"] .profile-photo-row { border-color: #27272d; }
:root[data-theme="dark"] .profile-photo-preview { background: #211c24; color: #e4c5f1; }
:root[data-theme="dark"] .profile-upload {
  background: #17171a;
  border-color: #38383f;
  color: #f4f4f6;
  transition: background-color .16s ease, border-color .16s ease;
}
:root[data-theme="dark"] .profile-upload:hover { background: #222228; border-color: #55545d; }
:root[data-theme="dark"] .profile-dialog .subtle,
:root[data-theme="dark"] .profile-dialog .profile-email { color: #a0a0a8; }
:root[data-theme="dark"] .profile-actions { padding-top: 16px; border-top: 1px solid #27272d; }
:root[data-theme="dark"] .profile-actions button {
  min-height: 44px;
  border: 1px solid #35353c;
  border-radius: 12px;
  background: #151518;
  color: #efeff2;
  font-weight: 650;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
:root[data-theme="dark"] .profile-actions button:hover { background: #222228; border-color: #55545d; }
:root[data-theme="dark"] .profile-actions .danger {
  border-color: #704347;
  background: #1d1215;
  color: #f0a2a8;
}
:root[data-theme="dark"] .profile-actions .danger:hover { background: #2a171b; border-color: #9d5961; }
:root[data-theme="dark"] .profile-actions .primary {
  border-color: #d8a6ed;
  background: #d8a6ed;
  color: #17131a;
}
:root[data-theme="dark"] .profile-actions .primary:hover { background: #e2baf1; border-color: #e2baf1; }
:root[data-theme="dark"] .profile-dialog :where(button, a, input, select):focus-visible {
  outline-color: #d8a6ed;
}
@media (max-width: 520px) {
  :root[data-theme="dark"] .profile-dialog { padding: 21px; }
  :root[data-theme="dark"] .profile-actions { margin-top: 17px; padding-top: 15px; }
}

/* Shared motion system: brief, purposeful feedback with no perpetual decoration. */
:root {
  --motion-quick: 140ms;
  --motion-control: 200ms;
  --motion-panel: 300ms;
  --motion-section: 320ms;
  --motion-number: 400ms;
  --motion-progress: 800ms;
  --motion-enter: cubic-bezier(.16, 1, .3, 1);
  --motion-exit: cubic-bezier(.4, 0, 1, 1);
  --motion-state: cubic-bezier(.4, 0, .2, 1);
}
.nav button, .smallbtn, .iconbtn, .addbtn, .link, .mobilebar button,
.mobile-menu, .starter-chip, .profile-actions button, .profile-close,
.profile-upload, .task, .list-row, .card, .section-card, .day-card, .move {
  transition-duration: var(--motion-control);
  transition-timing-function: var(--motion-enter);
}
.nav button, .smallbtn, .iconbtn, .addbtn, .mobilebar button,
.profile-actions button, .profile-close, .profile-upload, .starter-chip,
.card, .section-card, .day-card, .move, .list-row {
  transition-property: transform, opacity, color, background-color, border-color, box-shadow;
}
@media (hover: hover) and (pointer: fine) {
  .nav button:hover { transform: translateY(-1px); }
  .smallbtn:hover, .iconbtn:hover, .addbtn:hover, .profile-actions button:hover,
  .profile-close:hover, .profile-upload:hover, .starter-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  }
}
.smallbtn:active, .iconbtn:active, .addbtn:active, .link:active,
.profile-actions button:active, .profile-close:active, .profile-upload:active,
.starter-chip:active, .mobilebar button:active { transform: translateY(1px); opacity: .9; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--lilac, #d8a6ed) 78%, white);
  outline-offset: 3px;
  transition: outline-color var(--motion-quick) var(--motion-state), box-shadow var(--motion-quick) var(--motion-state);
}
.section-view { animation: none; }
.check { transition: background-color var(--motion-quick) var(--motion-state), border-color var(--motion-quick) var(--motion-state); }
.taskname { transition: color var(--motion-quick) var(--motion-state), opacity var(--motion-quick) var(--motion-state); }
.timeline-event { animation: none; }
.progress i { transition: width var(--motion-progress) var(--motion-enter); }
.profile-dialog { animation-duration: var(--motion-panel); animation-timing-function: var(--motion-enter); }
.googleSignIn.is-loading::before { animation-duration: 900ms; }

/* Keep the sign-up illustration calm at rest, with one short entrance. */
.auth-art-orbit { animation: none; }
.auth-art-panel { animation: auth-panel-arrive 300ms var(--motion-enter) both; }
.auth-art-phone { animation: auth-phone-arrive 300ms 40ms var(--motion-enter) both; }
.auth-art-float { animation: auth-chip-arrive 280ms 40ms var(--motion-enter) both; }
.auth-art-summary { animation-duration: 280ms; animation-delay: 30ms; }
.auth-art-ring { animation-duration: 400ms; animation-delay: 30ms; animation-timing-function: var(--motion-enter); }
.auth-art-lines i { animation-duration: 300ms; animation-delay: 40ms; animation-timing-function: var(--motion-enter); }
.auth-art-task-one, .auth-art-phone-heading { animation-duration: 260ms; animation-delay: 40ms; }
.auth-art-task-two, .auth-art-phone-focus { animation-duration: 260ms; animation-delay: 80ms; }
.auth-art-phone-task { animation-duration: 240ms; animation-delay: 40ms; }
.auth-art-phone-task:nth-of-type(5) { animation-delay: 75ms; }
.auth-art-phone-task:nth-of-type(6) { animation-delay: 110ms; }
.auth-art-caption { animation-duration: 260ms; animation-delay: 110ms; }
.auth-art-streak { animation-delay: 80ms; }
@keyframes auth-panel-arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-chip-arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-phone-arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-content-arrive { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-task-arrive { from { opacity: 0; translate: 3px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes auth-line-grow { from { opacity: .5; } to { opacity: 1; } }
@keyframes cld-view-enter { from { opacity: .72; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes timeline-arrive { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  .nav button:hover, .smallbtn:hover, .iconbtn:hover, .addbtn:hover,
  .profile-actions button:hover, .profile-close:hover, .profile-upload:hover,
  .starter-chip:hover, .card:hover, .section-card:hover, .day-card:hover,
  .move:hover, .list-row:hover, :active { transform: none !important; }
}

/* Shared account card dimensions keep sign-in and account creation consistent. */
:root #authScreen .authContent:is(.authLogin, .authSignup) {
  width: min(660px, calc(100vw - 40px));
  height: min(900px, calc(100dvh - 100px));
  min-height: 0;
  max-height: calc(100dvh - 100px);
  padding-inline: clamp(24px, 4vw, 46px);
  overflow-y: auto;
  border-radius: 28px !important;
}
@media (max-width: 760px) {
  :root #authScreen .authContent:is(.authLogin, .authSignup) {
    width: min(520px, calc(100vw - 24px));
    height: min(900px, calc(100dvh - 84px));
    min-height: 0;
    max-height: calc(100dvh - 84px);
    padding-inline: clamp(18px, 5vw, 24px);
    border-radius: 24px !important;
  }
}

/* Lowercase visible text throughout the app, including the sign-in screens. */
body, body * { text-transform: lowercase !important; }

/* --- Account card: remove the dead space above and below the form. ---------
   Two separate causes, both fixed here because this is the end of the file and
   the account card is restyled in six earlier places.

   1. Top. The sidebar-collapse rule `.brand span { display: none }` under
      `@media (max-width: 1000px)` also matched `.auth-logo`, so on every phone
      the logo vanished but its `.brand` wrapper kept `min-height: 42px` plus
      its padding and margin — roughly 74px of blank white above the heading.
      The logo is shown again here, scoped to the auth screen so the sidebar
      keeps collapsing as intended.
   2. Bottom. The card was pinned to `height: calc(100dvh - 84px)` regardless of
      content. Sign-in has far fewer fields than signup, so ~120px of empty
      white sat under the last link. Height is content-driven now, with the same
      value kept as `max-height` so a long form still scrolls instead of
      overflowing the screen. */
:root #authScreen .authContent > .brand .auth-logo { display: block; width: min(190px, 56vw); }
:root #authScreen .authContent > .brand {
  min-height: 0;
  margin-bottom: 10px;
  padding-bottom: 0 !important;
}
:root #authScreen .authContent:is(.authLogin, .authSignup) {
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - 100px);
}
@media (max-width: 760px) {
  :root #authScreen .authContent > .brand .auth-logo { width: min(170px, 50vw); }
  :root #authScreen .authContent:is(.authLogin, .authSignup) {
    max-height: calc(100dvh - 84px);
  }
}

/* Google's own G beside the provider button's label. The button is already a
   centred flex row, so the mark just needs a fixed size and a gap — `flex: none`
   stops it being squashed if the label ever wraps. */
:root #authScreen .googleSignIn { gap: 10px; }
:root #authScreen .googleSignIn .googleMark {
  flex: none;
  width: 19px;
  height: 19px;
  display: block;
}

/* ===========================================================================
   Gold accent pass.
   Two things made the app read green/purple even with a school theme applied:
   1. The neutral greys were deliberately green-tinted (--bg hue 150,
      --line hue 138), so every border, track and input had a green cast.
   2. The older `:root[data-theme="dark"] ...` accent rules above are
      (0,4,1) specificity, which beats the newer design-system rules at
      (0,2,1) regardless of source order — so lilac #d8a6ed and cyan
      #64d9e4 kept winning over var(--green).
   Fixed here by neutralising the greys and re-pointing every accent at the
   school-accent tokens, so Stanford/Berkeley/UCLA/CSU still theme correctly.
   The unthemed fallback is now CU gold instead of green.
   =========================================================================== */
:root {
  --bg: #f6f6f7;
  --paper: #ffffff;
  --ink: #1b1d1f;
  --muted: #6e7175;
  --line: #e5e5e8;
  --green: var(--school-accent, #8d7334);
  --mint: var(--school-tint, #f7f1e3);
  --lilac: var(--school-accent, #8d7334);
  --lime: var(--school-accent, #8d7334);
  --blue: var(--school-accent, #8d7334);
  --shadow: 0 8px 24px rgba(20, 20, 24, .055);
  --primary-ink: var(--school-on-accent, #fff);
}
:root[data-theme="dark"] {
  --bg: #0a0a0b;
  --paper: #131315;
  --ink: #f0f0f2;
  --muted: #a4a4ac;
  --line: #2b2b2f;
  --green: var(--school-accent, #cfb87c);
  --mint: var(--school-tint, #342f22);
  --lilac: var(--school-accent, #cfb87c);
  --lime: var(--school-accent, #cfb87c);
  --blue: var(--school-accent, #cfb87c);
  --primary-ink: var(--school-on-accent, #342f22);
}
:root[data-school-theme] { --green: var(--school-accent, #8d7334); --mint: var(--school-tint, #f7f1e3); }
:root[data-theme="dark"][data-school-theme] { --green: var(--school-accent, #cfb87c); --mint: var(--school-tint, #342f22); }

/* Light-theme accents that still carried the old lilac/cyan hexes. */
:root .nav button.active { color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--paper)); box-shadow: inset 3px 0 var(--green); }
:root .progress i, :root .goal-meter i { background: var(--green); }
:root .top .actions button:hover { border-color: color-mix(in srgb, var(--green) 42%, var(--line)); background: var(--mint); }
:root .hero { border-left: 3px solid var(--green); }
:root .hero .eyebrow, :root .coach .eyebrow { color: var(--green); }
:root .hero .chip { background: var(--mint); color: var(--green); }
:root .ring { background: conic-gradient(var(--green) 0 78%, color-mix(in srgb, var(--line) 80%, var(--paper)) 78% 100%); }
:root .coach { border-top: 2px solid var(--green); }
:root .event:nth-child(3) .bar { background: var(--green); }
:root .num, :root .tag.urgent { background: var(--mint); color: var(--green); }

/* Dark-theme accents, at matching specificity so they actually land. */
:root[data-theme="dark"] .nav button.active { color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--paper)); box-shadow: inset 3px 0 var(--green); }
:root[data-theme="dark"] .mobilebar button.active { color: var(--green); }
:root[data-theme="dark"] .top .actions button:hover { background: var(--mint); border-color: color-mix(in srgb, var(--green) 46%, var(--line)); }
:root[data-theme="dark"] .hero { background: var(--paper); border-color: var(--line); border-left-color: var(--green); }
:root[data-theme="dark"] .hero .eyebrow { color: var(--green); }
:root[data-theme="dark"] .hero .chip { background: var(--mint); color: var(--green); }
:root[data-theme="dark"] .hero:after, :root[data-theme="dark"] .coach:after { color: var(--green); }
:root[data-theme="dark"] .num, :root[data-theme="dark"] .tag.urgent { background: var(--mint); color: var(--green); }
:root[data-theme="dark"] .ring { background: conic-gradient(var(--green) 0 78%, var(--line) 78% 100%); }
:root[data-theme="dark"] .ring:before { background: var(--paper); }
:root[data-theme="dark"] .coach { background: var(--paper); border-color: var(--line); border-top-color: var(--green); }
:root[data-theme="dark"] .coach .eyebrow { color: var(--green); }
:root[data-theme="dark"] .toast { background: var(--paper); border-color: var(--line); }
:root[data-theme="dark"] .event:nth-child(3) .bar { background: var(--green); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .section-card, :root[data-theme="dark"] .day-card {
  background: var(--paper); border-color: var(--line);
}
:root[data-theme="dark"] .sidebar, :root[data-theme="dark"] .top, :root[data-theme="dark"] .mobilebar { background: var(--paper); border-color: var(--line); }
:root[data-theme="dark"] .semester, :root[data-theme="dark"] .move, :root[data-theme="dark"] .moods button,
:root[data-theme="dark"] .field, :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select {
  background: var(--bg); border-color: var(--line);
}
:root[data-theme="dark"] .tag, :root[data-theme="dark"] .pill { background: var(--mint); color: var(--green); }
:root[data-theme="dark"] .profile-dialog .eyebrow { color: var(--green); }
:root[data-theme="dark"] .profile-photo-preview { background: var(--mint); color: var(--green); }
:root[data-theme="dark"] .profile-actions .primary { border-color: var(--green); background: var(--green); color: var(--primary-ink); }
:root[data-theme="dark"] .profile-dialog .field:focus { outline-color: var(--green); border-color: var(--green); }

/* Today is a fixed desktop dashboard: account for the 68px web header so the
   app canvas ends at the viewport bottom, then divide the home cards into rows
   that fit the remaining space instead of making the page scroll. */
@media (min-width: 1101px) {
  .app { height: calc(100dvh - 68px); }
  .previewbar + .app { height: calc(100dvh - 119px); }
  .main:has(> .grid:not([hidden])) { overflow: hidden; }
  .main:has(> .grid:not([hidden])) > .top { position: relative; top: auto; }
  .main:has(> .grid:not([hidden])) > .grid { flex: 1 1 auto; min-height: 0; }
  .main > .grid > .home-dashboard {
    height: 100%; min-height: 0; align-content: stretch;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) auto minmax(0, .9fr);
    grid-auto-rows: 0; gap: 12px; overflow: hidden;
  }
  .main > .grid > .home-dashboard > .home-timeline,
  .main > .grid > .home-dashboard > .home-tasks { grid-column: 1 / -1; min-height: 0; overflow: hidden; }
  .main > .grid > .home-dashboard > .home-card { grid-column: span 2; min-width: 0; min-height: 0; overflow: hidden; }
  .main > .grid > .home-dashboard > .home-tasks { align-self: start; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .app { height: calc(100dvh - 68px); }
  .previewbar + .app { height: calc(100dvh - 119px); }
  .main:has(> .grid:not([hidden])) { overflow: hidden; }
  .main:has(> .grid:not([hidden])) > .top { position: relative; top: auto; }
  .main:has(> .grid:not([hidden])) > .grid { flex: 1 1 auto; min-height: 0; }
  .main > .grid > .home-dashboard {
    height: 100%; min-height: 0; align-content: stretch;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, .8fr) minmax(0, .65fr);
    grid-auto-rows: 0; gap: 10px; overflow: hidden;
  }
  .main > .grid > .home-dashboard > .home-timeline,
  .main > .grid > .home-dashboard > .home-tasks { grid-column: 1 / -1; min-height: 0; overflow: hidden; }
  .main > .grid > .home-dashboard > .home-card { min-height: 0; overflow: hidden; }
  .main > .grid > .home-dashboard > .home-card:last-child { grid-column: 1 / -1; }
  .main > .grid > .home-dashboard > .home-tasks { align-self: start; }
}
@media (min-width: 761px) and (max-height: 700px) {
  .top { min-height: 54px; margin-bottom: 8px; padding-block: 7px; }
  .main { padding-bottom: 4px; }
  .main:has(> .grid:not([hidden])) > .grid { margin-top: 8px; }
  .main > .grid > .home-dashboard { gap: 8px; }
  .main > .grid > .home-dashboard > .home-timeline,
  .main > .grid > .home-dashboard > .home-card { padding: clamp(8px, 1.2vh, 12px); }
  .home-dashboard .head { margin-bottom: 6px; }
  .home-dashboard .home-timeline .head { margin-bottom: 4px; }
  .home-dashboard .task { padding-block: 4px; }
  .home-dashboard > .home-tasks .quick-task-form { margin-top: 6px; }
}
@media (min-width: 1101px) and (max-height: 700px) {
  .main > .grid > .home-dashboard { grid-template-rows: minmax(0, .9fr) auto minmax(0, .7fr); }
}
@media (min-width: 761px) and (max-width: 1100px) and (max-height: 700px) {
  .main > .grid > .home-dashboard { grid-template-rows: minmax(0, .8fr) auto minmax(0, .65fr) minmax(0, .45fr); }
}

/* Keep plan, profile, and appearance controls in the global app bar. */
.web-app-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.web-app-actions .smallbtn,
.web-app-actions .iconbtn {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
}
.web-app-actions .iconbtn { width: 46px; min-width: 46px; padding: 0; }
.web-app-actions .iconbtn svg { display: block; width: 20px; height: 20px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.web-app-actions button:hover { border-color: color-mix(in srgb, var(--green) 46%, var(--line)); background: var(--mint); }
@media (min-width: 761px) and (max-width: 880px) {
  .web-app-header { gap: 14px; padding-inline: 18px; }
  .web-app-actions { gap: 8px; }
  .web-app-actions .smallbtn { padding-inline: 12px; white-space: nowrap; }
  .web-app-brand { max-width: min(190px, 26vw); }
  .web-app-logo { max-width: 100%; }
}
@media (max-width: 760px) { .web-app-actions { display: none; } }

/* Custom dropdowns and inline class forms (avoid native iOS pickers and prompts) */
.cld-picker { position: relative; min-width: 0; }
.cld-picker-button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; font: inherit; }
.cld-picker-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cld-picker-button i { font-style: normal; color: var(--muted); }
.cld-picker-button[aria-expanded="true"] { border-color: var(--green); }
.cld-picker-menu { margin-top: 6px; max-height: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 6px; }
.cld-picker-menu[hidden] { display: none; }
.cld-picker-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); padding: 11px 12px; border-radius: 8px; font: inherit; font-size: 14px; cursor: pointer; }
.cld-picker-menu button:hover, .cld-picker-menu button[aria-selected="true"] { background: var(--bg); color: var(--green); font-weight: 700; }
.day-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.day-chip { min-width: 52px; height: 42px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.day-chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--primary-ink, #111); }
.schedule-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.schedule-day { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: grid; gap: 8px; }
.schedule-day h3 { margin: 0 0 2px; font-size: 15px; }
.schedule-day.is-today { border-color: var(--green); }
.schedule-day.is-today h3 { color: var(--green); }
.schedule-day .subtle { margin: 0; }
.schedule-class { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 12px; padding: 10px 12px; font: inherit; cursor: pointer; }
.schedule-class:hover { border-color: var(--green); }
.schedule-time { display: grid; gap: 2px; line-height: 1.25; }
.schedule-time b { font-size: 14px; color: var(--green); white-space: nowrap; }
.schedule-time small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.schedule-info { display: grid; min-width: 0; }
.schedule-info b, .schedule-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-info small { color: var(--muted); font-size: 12px; }
.assignment-group { margin-bottom: 14px; }
.assignment-group h3 { margin: 0 0 8px; font-size: 15px; }
.assignment-group.late h3 { color: var(--red, #e5484d); }
.assignment-group summary { list-style: none; cursor: pointer; }
.assignment-group summary::-webkit-details-marker { display: none; }
.assignment-form { margin-bottom: 14px; }
.smallbtn.danger { color: var(--red, #e5484d); }
@media (max-width: 760px) { .schedule-week { grid-template-columns: 1fr; } .schedule-class { grid-template-columns: 80px minmax(0, 1fr); } }
.inline-form { display: grid; gap: 8px; margin: 4px 0 12px; }
.inline-form .field { width: 100%; background: var(--bg); font: inherit; }
.inline-form textarea.field { resize: vertical; }
.inline-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 760px) { .class-form .field, .inline-form .field { font-size: 16px; } }

/* College picker dropdown */
.college-combo { position: relative; display: flex; align-items: center; }
.college-combo .field { width: 100%; padding-right: 36px; }
.college-combo > .college-swatch { position: absolute; left: 12px; pointer-events: none; }
.college-combo > .college-swatch:not([hidden]) + .field { padding-left: 34px; }
.college-chevron { position: absolute; right: 13px; color: var(--muted); pointer-events: none; }
.college-swatch { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(127,127,127,.35); }
.college-results { margin-top: 6px; max-height: 280px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 6px; text-align: left; }
.college-results[hidden] { display: none; }
.college-results-heading { margin: 4px 8px 6px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.college-results button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: var(--ink); text-align: left; padding: 10px; border-radius: 8px; font: inherit; cursor: pointer; }
.college-results button:hover, .college-results button[aria-selected="true"] { background: var(--bg); }
.college-results b { display: block; font-size: 14px; font-weight: 600; }
.college-results small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
@media (max-width: 760px) { .college-combo .field { font-size: 16px; } }
:root .college-results button, :root #authScreen .authContent .college-results button { min-height: 0; height: auto; box-shadow: none; margin: 0; justify-content: flex-start; background: transparent; color: var(--ink); font-weight: 400; }
:root .college-combo .college-swatch:not([hidden]) ~ .field, :root #authScreen .authContent .college-combo .college-swatch:not([hidden]) ~ .field { padding-left: 36px; }
:root #authScreen .authContent .college-results, :root[data-theme="dark"] #authScreen .authContent .college-results { background: #fff; border-color: #e4e4e7; }
:root #authScreen .authContent .college-results button, :root[data-theme="dark"] #authScreen .authContent .college-results button { background: transparent; color: #18181b; }
:root #authScreen .authContent .college-results button:hover, :root[data-theme="dark"] #authScreen .authContent .college-results button:hover, :root #authScreen .authContent .college-results button[aria-selected="true"] { background: #f4f4f5; }
:root #authScreen .authContent .college-results small, :root #authScreen .authContent .college-results-heading { color: #71717a; }

/* School badge (short name in school colors; no school logos) */
.school-badge { display: inline-flex; align-items: center; margin: 0 0 8px; padding: 5px 11px; border-radius: 9px; background: var(--school-accent, var(--green)); color: var(--school-on-accent, #fff); font-size: 12px; font-weight: 800; letter-spacing: .02em; line-height: 1.2; }
.school-badge[hidden] { display: none; }