/* Bright silver surfaces, champagne accents, and readable system type. */
:root {
  color-scheme: light;
  --ink: #2d3337;
  --muted: #626b70;
  --line: #c7ced2;
  --silver: #e9edef;
  --gold: #ad873f;
  --gold-dark: #72531d;
  --gold-soft: #efe5ce;
  --surface: linear-gradient(130deg, #fafbfc, #e4e8eb 58%, #f3f5f6);
  --number-font: "DIN Alternate", "Roboto Condensed", "Arial Narrow", ui-monospace, monospace;
  font-family: "vivo Sans", "MiSans", "HarmonyOS Sans SC", "PingFang SC", system-ui, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Base and shared controls. */
* { box-sizing: border-box; }
html { min-width: 280px; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  background: radial-gradient(ellipse at 15% 0, #ffffffb3, transparent 46%), linear-gradient(120deg, #e7ebee, #f1f3f5 52%, #e1e6e9);
}
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button, a { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #a7823e;
  outline-offset: 3px;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.soft-button, .primary-button, .text-button, .icon-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  border-radius: 11px;
  transition: background-color .17s, transform .17s, border-color .17s;
}
.soft-button { padding: 0 14px; border: 1px solid #c2cacf; background: linear-gradient(145deg, #fff, #e6ebee); font-size: 13px; font-weight: 650; box-shadow: inset 0 1px 0 #fff; }
.primary-button { padding: 0 17px; border: 1px solid #a88a4b; background: linear-gradient(145deg, #ecddb7, #c4a56b); color: #4e3d1d; font-size: 14px; font-weight: 750; box-shadow: inset 0 1px 0 #ffffff75; }
.text-button { padding: 0 7px; border: 0; background: transparent; color: var(--gold-dark); font-size: 13px; font-weight: 650; }
.icon-button { width: 42px; height: 42px; flex-shrink: 0; padding: 0; border: 1px solid transparent; background: transparent; font-size: 26px; color: #535d64; }
.soft-button:hover, .icon-button:hover { border-color: #b8ac90; background: #faf8f2; }
.primary-button:hover { filter: brightness(1.035); }
button:active, .soft-button:active, .primary-button:active { transform: scale(.97); }

/* Main navigation and date header. */
.app-topbar { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid #c7cdd1b3; background: #eef1f3f0; backdrop-filter: blur(14px); }
.topbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; width: min(1120px, calc(100% - 48px)); min-height: 72px; margin: auto; padding: 10px 0; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 42px; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid #b8c0c5; border-radius: 11px; background: linear-gradient(135deg, #fff, #ccd4d9); box-shadow: inset 0 1px 0 #fff; color: #836b3d; font-size: 22px; }
.brand > span:last-child { display: grid; gap: 2px; }
.brand strong { font-size: 15px; letter-spacing: .04em; }
.brand small { font-size: 12px; color: var(--muted); }
.topbar-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.connection-chip { padding: 4px 8px; border: 1px solid #c2ccc5; border-radius: 20px; color: #5f6e61; font-size: 12px; }
.connection-chip.is-offline { color: #785a26; border-color: #d3bf91; background: #f5ecd7; }
.main-column { width: min(1080px, calc(100% - 48px)); margin: auto; padding: 28px 0; }
.preview-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; margin: 0 0 23px; padding: 12px 16px; border: 1px solid #d1bc8c; border-radius: 12px; background: linear-gradient(115deg, #f8efd9, #f6f4ed); color: #715627; font-size: 12px; line-height: 1.6; }
.preview-notice strong { font-size: 13px; font-weight: 750; }
.preview-notice span { color: #756a55; }
.page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 25px; }
.headline-copy { min-width: 0; }
.eyebrow-line { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 12px; font-weight: 750; color: #735e39; }
.term-week { padding-left: 9px; border-left: 1px solid #bfb59e; color: #657074; font-weight: 500; }
.page-header h1 { margin: 6px 0 5px; font-size: 42px; font-weight: 850; letter-spacing: .025em; line-height: 1.2; }
.page-subtitle { margin: 0; font-size: 13px; color: var(--muted); }
.date-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.date-control { display: flex; align-items: center; padding: 3px; border: 1px solid #c0c9ce; border-radius: 13px; background: var(--surface); box-shadow: inset 0 1px 0 #fff; }
.date-trigger { display: flex; justify-content: center; align-items: center; gap: 7px; min-height: 42px; padding: 0 10px; border: 0; background: transparent; font-size: 13px; font-weight: 700; }
.date-trigger svg { width: 17px; height: 17px; color: #876b37; }

/* Two-column desktop workspace; priority order changes on mobile. */
.today-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 28px; }
.day-sidebar { display: grid; gap: 16px; position: sticky; top: 96px; min-width: 0; }
.status-card { position: relative; isolation: isolate; overflow: hidden; padding: 20px; border: 1px solid #bdc6cd; border-radius: 20px; background: linear-gradient(120deg, #fafcfd, #dfe5e9 58%, #f0f3f5); box-shadow: inset 0 1px 0 #fff, 0 10px 26px #3e454b0b; }
.status-card > * { position: relative; z-index: 1; }
.status-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.status-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 750; color: #655b48; }
.status-pulse { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #a48b58; }
.live-clock { margin-left: auto; color: #626c73; font-family: var(--number-font); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.status-title-group { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.status-title-group h2 { min-width: 0; margin: 0; font-size: 27px; font-weight: 820; letter-spacing: .015em; line-height: 1.3; overflow-wrap: anywhere; }
.status-detail { margin: 7px 0 0; color: #5e686e; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.countdown-block { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 7px 12px; margin-top: 15px; }
.countdown-block > span { padding-bottom: 3px; color: #6d624c; font-size: 12px; }
.countdown-value { max-width: 100%; color: #41494c; font-family: var(--number-font); font-size: clamp(29px, 2.6vw, 35px); font-weight: 750; line-height: 1.05; letter-spacing: .015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.status-progress { height: 7px; margin-top: 15px; overflow: hidden; border: 1px solid #c6c8bd; border-radius: 8px; background: #d7ddd9; box-shadow: inset 0 1px 2px #68706212; }
.status-progress > span { position: relative; display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, #9e7529, #cfae60 60%, #f3dc9b); transition: width 1s linear; }
.status-progress > span::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 15%, #fff9 48%, transparent 75%); opacity: .5; transform: translateX(-110%); animation: progress-gleam 3.8s ease-in-out infinite; }
.status-progress > span::after { content: ""; position: absolute; top: 50%; right: 0; width: 5px; height: 5px; border-radius: 50%; background: #fff8de; box-shadow: 0 0 7px 2px #e9c770; transform: translate(0, -50%); }
.day-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 8px; margin-top: 16px; color: #646e74; font-size: 12px; }
.day-summary strong { color: #4d5960; font-weight: 650; }
.day-progress { display: flex; gap: 5px; margin-top: 8px; }
.day-progress i { position: relative; height: 5px; flex: 1; overflow: hidden; border-radius: 3px; background: #c6ced3; }
.day-progress i.is-done { background: linear-gradient(90deg, #ab8a4c, #cbb77f, #a78a50); }
.day-progress i.is-now { background: #b28b43; }
.status-card[data-state=done] .day-progress i.is-done::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent, #fff9, transparent); transform: translateX(-120%); animation: completed-gleam 1.2s .4s ease-out both; }
.next-day-hint { margin-top: 12px; padding-top: 11px; border-top: 1px solid #c1cbd0; color: #5d686e; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.next-day-hint:empty { display: none; }
.status-jump { display: flex; justify-content: space-between; align-items: center; gap: 5px; flex-shrink: 0; min-height: 40px; padding: 6px 8px; border: 1px solid #c2b086; border-radius: 9px; background: #f4ecd9; color: #745821; font-size: 12px; font-weight: 700; text-align: left; }
.status-jump::after { content: "↓"; font-size: 16px; }
.status-jump:hover { background: #eee1c0; }
.status-card[data-state=class] { --live-surface: linear-gradient(120deg, #f2efe4, #fcfaf3 43%, #dce3e6); --live-radius: 20px; padding-top: 22px; padding-bottom: 22px; border-color: #a78035; background: #c0a05b; box-shadow: inset 0 1px 0 #fff, 0 10px 28px #95712c24, 0 0 0 1px #d6bf812b; }
.status-card[data-state=class] .status-label { padding: 7px 10px; border: 1px solid #a88743; border-radius: 8px; color: #fffaf0; background: linear-gradient(125deg, #6e4c1f, #a47e37); box-shadow: inset 0 1px 0 #e8ce8840, 0 3px 8px #8b6b2d1f; }
.status-card[data-state=class] .status-pulse { background: #f4dfac; animation: live-pulse 1.5s ease-in-out infinite; }
.status-card[data-state=class] .status-title-group { margin-top: 19px; }
.status-card[data-state=class] .status-title-group h2 { font-size: 29px; }
.status-card[data-state=done] { border-color: #c3ac77; background: linear-gradient(130deg, #fbfaf5, #e7e5dc); box-shadow: inset 0 1px 0 #fff, 0 9px 24px #8670370e; }
.status-complete-mark { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid #ae8740; border-radius: 50%; color: #745018; background: radial-gradient(circle at 32% 24%, #fffefa, #f1e0ae 44%, #c3a164 77%, #f3e6c6); box-shadow: inset 0 0 0 3px #fffbebaa, inset 0 0 0 4px #bc9a5540, 0 4px 11px #9a783629; animation: complete-pop .6s cubic-bezier(.2,.85,.25,1.25); }
.status-complete-mark::before { content: ""; position: absolute; inset: -5px; border: 1px solid #c8a454; border-radius: inherit; opacity: 0; pointer-events: none; animation: badge-ring .85s .15s ease-out both; }
.status-complete-mark svg { width: 21px; height: 21px; stroke-width: 2.6; filter: drop-shadow(0 1px 0 #fff6); }
.status-complete-mark path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: draw-check .35s .18s forwards; }

/* Notes and installation entry. */
.memo-card { padding: 18px; border: 1px solid #c6ced3; border-radius: 18px; background: linear-gradient(130deg, #f8fafb, #e7ecef); box-shadow: inset 0 1px 0 #fff; }
.section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 9px 12px; }
.section-heading h2 { margin: 0; font-size: 18px; font-weight: 780; }
.quiet-text { color: var(--muted); font-size: 12px; }
.memo-date { margin: 6px 0 12px; color: #667178; font-size: 12px; line-height: 1.6; }
.task-form { display: flex; gap: 7px; }
.task-form input { flex: 1; min-width: 0; height: 43px; padding: 0 10px; border: 1px solid #c4cdd2; border-radius: 10px; background: #ffffffb3; font-size: 13px; }
.task-form input::placeholder { color: #68737b; }
.add-task { width: 42px; min-height: 43px; flex-shrink: 0; border: 1px solid #bfab7e; border-radius: 10px; background: linear-gradient(145deg, #eee3c9, #d7c396); color: #6e5420; font-size: 24px; }
.task-list { display: grid; gap: 5px; margin-top: 10px; }
.task-item { display: flex; align-items: start; gap: 6px; min-width: 0; padding: 6px 0; border-bottom: 1px solid #ced6db; }
.task-item:last-child { border: 0; }
.task-item > label { display: flex; align-items: start; gap: 8px; flex: 1; min-width: 0; min-height: 40px; padding-top: 8px; font-size: 13px; line-height: 1.7; }
.task-item input { width: 17px; height: 17px; flex-shrink: 0; margin: 3px 0 0; accent-color: #a98642; }
.task-item span { overflow-wrap: anywhere; }
.task-item.is-done span { color: #69757d; text-decoration: line-through; }
.task-delete { width: 40px; height: 40px; flex-shrink: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #66747e; font-size: 21px; }
.task-delete:hover { background: #dce2e5; }
.empty-memo { margin: 3px 0 0; color: #637079; font-size: 12px; line-height: 1.7; }
.install-link { display: flex; justify-content: space-between; align-items: center; gap: 9px; min-height: 44px; padding: 0 7px; border: 0; background: transparent; color: #626d71; font-size: 12px; text-align: left; }
.install-link svg { width: 18px; height: 18px; flex-shrink: 0; color: #92763c; }
.install-link > span:first-of-type { margin-right: auto; }

/* Course cards share one silver surface and two aligned lesson columns. */
.courses-section { min-width: 0; }
.schedule-heading { align-items: center; }
.schedule-heading h2 { font-size: 24px; letter-spacing: .025em; }
.section-kicker { margin: 0 0 7px; color: #7c6b49; font-size: 11px; font-weight: 750; letter-spacing: .13em; }
.courses-section .section-kicker { display: none; }
.group-heading small { font-size: 12px; font-weight: 500; color: var(--muted); }
.section-count { padding: 6px 10px; border: 1px solid #c2cbd1; border-radius: 20px; background: #eef2f4; color: #5c6971; font-size: 12px; line-height: 1.4; white-space: nowrap; }
.schedule-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 17px; }
.schedule-toolbar > span { max-width: 65%; color: #647079; font-size: 12px; line-height: 1.6; }
.schedule-toolbar .soft-button, .schedule-toolbar .text-button { flex-shrink: 0; min-height: 40px; padding: 0 12px; border: 1px solid #cbb582; border-radius: 10px; background: linear-gradient(145deg, #f5edda, #e8d9b5); color: #715522; font-size: 12px; font-weight: 750; }
.course-list { display: grid; gap: 23px; }
.course-group { display: grid; gap: 11px; }
.group-heading { display: flex; align-items: center; gap: 10px; padding-left: 2px; color: #5d6a72; font-size: 13px; font-weight: 700; letter-spacing: .03em; }
.group-heading::after { content: ""; height: 1px; flex: 1; background: #c6ced3; }
.course-card { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #bec9d0; border-radius: 17px; background: linear-gradient(125deg, #f9fbfc, #e1e7eb 60%, #eff3f5); box-shadow: inset 0 1px 0 #fff, 0 4px 15px #4d576009; transition: border-color .22s, box-shadow .22s, transform .22s; scroll-margin-top: 105px; }
.course-card:has(.course-open:active) { transform: translateY(1px) scale(.988); box-shadow: inset 0 2px 9px #66788413, 0 2px 5px #4d576009; }
.course-open { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; padding: 18px 20px; border: 0; background: transparent; text-align: left; }
.course-open:active { transform: none; background: #ffffff26; }
.course-copy { display: block; min-width: 0; }
.course-topline { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 7px; }
.course-period { color: #62717b; font-size: 12px; line-height: 1.4; }
.course-chevron { margin-left: auto; color: #7b858b; font-size: 18px; line-height: 1; }
.course-state { display: inline-flex; align-items: center; min-height: 23px; padding: 4px 7px; border-radius: 6px; color: #70531d; background: #e7dabc; font-size: 12px; font-weight: 750; line-height: 1.2; }
.course-state.is-past { color: #5f6d76; background: #dae2e7; }
.course-state.is-next { color: #775d29; background: #eee3c9; }
.course-name { display: block; max-width: 100%; font-size: 24px; font-weight: 800; letter-spacing: .015em; line-height: 1.35; overflow-wrap: anywhere; }
.course-meta { display: block; margin-top: 7px; color: #5c6b75; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.course-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; padding-top: 12px; border-top: 1px solid #c5cfd6; }
.lesson-row { display: grid; align-content: start; justify-content: start; gap: 6px; min-width: 0; }
.lesson-row + .lesson-row { padding-left: 13px; border-left: 1px solid #c5cfd6; }
.lesson-name { color: #606f78; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.lesson-time { color: #35444e; font-family: var(--number-font); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; line-height: 1.25; white-space: nowrap; }
.lesson-time em { padding: 0 3px; color: #7e8b93; font-size: .8em; font-style: normal; }
.lesson-row.is-current .lesson-name { color: #735016; font-weight: 750; }
.lesson-row.is-current .lesson-time { color: #735016; }
.course-card.is-active { --live-surface: linear-gradient(125deg, #f6f0e2, #e7e7de 60%, #f8f5ec); --live-radius: 17px; border-color: #a68138; background: #c0a05b; box-shadow: inset 0 1px 0 #fff, 0 7px 24px #97733024, 0 0 0 1px #d6bf8133; }
.course-card.is-active .course-state { background: linear-gradient(125deg, #6d4b1d, #a57f38); color: #fffaf0; box-shadow: inset 0 1px 0 #e8ce8859, 0 2px 6px #98733325; }
.course-card.is-active .course-state::before { content: ""; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #f4dfac; animation: live-pulse 1.5s ease-in-out infinite; }
.course-card.is-active .course-chevron { color: #8c6a2d; }
.course-card.is-past { border-color: #c1ccd3; }
.course-card.is-next { border-color: #b5a780; }
.course-card.is-located { outline: 3px solid #b58b3e; outline-offset: 4px; box-shadow: 0 0 0 7px #b9974e26, 0 7px 24px #8d6d2b22; animation: located-settle .8s ease-out; }
/* A rotating metal ring stays behind a fully opaque inner surface. */
.status-card[data-state=class]::before, .course-card.is-active::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: calc(100% + 120px); aspect-ratio: 1; pointer-events: none; background: conic-gradient(from 35deg, #b28d41 0deg, #e9d395 35deg, #fffce8 64deg, #ab7b29 100deg, #d1b775 145deg, #e9edf0 178deg, #fdf9e3 210deg, #bd9141 250deg, #fff7ca 292deg, #b28d41 360deg); transform: translate(-50%, -50%) rotate(0turn); animation: metal-orbit 8s linear infinite; }
.status-card[data-state=class]::after, .course-card.is-active::after { content: ""; position: absolute; z-index: 0; inset: 2px; border: 1px solid #ffffffbd; border-radius: calc(var(--live-radius) - 3px); background: var(--live-surface); pointer-events: none; }
.course-card.is-active::before { animation-duration: 10s; animation-direction: reverse; }
.course-live-progress { position: relative; z-index: 1; display: block; margin: -4px 20px 13px; line-height: 0; }
.course-live-progress > span { position: relative; display: block; height: 6px; overflow: hidden; border: 1px solid #c8b38280; border-radius: 8px; background: #d5d8cd; }
.course-live-progress > span > i { position: absolute; inset: 0; display: block; border-radius: inherit; background: linear-gradient(90deg, #97702c, #c9a45d 65%, #f2d58d); transform: scaleX(var(--lesson-progress, 0)); transform-origin: left center; transition: transform 1s linear; }
.course-live-progress > span > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 10%, #fff8 50%, transparent 85%); opacity: .65; transform: translateX(-110%); animation: progress-gleam 4.5s ease-in-out infinite; }
/* Five-minute cues are bright and steady, rather than flashing. */
.status-card.is-urgent, .course-card.is-urgent { border-color: #a17626; box-shadow: 0 0 0 2px #e7c57566, 0 8px 25px #9a70252b; }
.status-card.is-urgent .status-label, .course-card.is-urgent .course-state { color: #fffbee; background: linear-gradient(120deg, #72501b, #a77b2e); border-color: #9f782f; }
.status-card.is-urgent .countdown-value { color: #7d5418; }
.course-card.is-next.is-urgent { background: linear-gradient(120deg, #f5eddc, #e9e8df 64%, #f8f3e7); }
.status-card.is-urgent::before, .course-card.is-active.is-urgent::before { animation-duration: 5s; }
.override-notice { margin-bottom: 15px; padding: 11px 13px; border: 1px solid #cdb787; border-radius: 11px; background: #f1e8d3; color: #715829; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.school-notices:empty { display: none; }
.school-notices { margin-bottom: 15px; }
.school-notice { margin-bottom: 7px; padding: 10px 12px; border: 1px solid #c9d3ca; border-radius: 11px; background: #edf1ec; color: #526955; font-size: 12px; }
.school-notice summary { min-height: 30px; cursor: pointer; font-weight: 650; line-height: 1.7; }
.school-notice p { margin: 7px 0 0; font-size: 12px; line-height: 1.8; }
.empty-state { display: grid; justify-items: center; gap: 10px; padding: 31px 20px; border: 1px dashed #b7c4cc; border-radius: 17px; background: #f4f7f9b3; text-align: center; }
.empty-state strong { font-size: 19px; }
.empty-state p { max-width: 350px; margin: 0; color: #5e707c; font-size: 13px; line-height: 1.85; }
.empty-symbol { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 3px; border-radius: 12px; background: var(--gold-soft); color: var(--gold-dark); font-size: 18px; }
.page-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 30px; color: #69757d; font-size: 12px; line-height: 1.5; }

/* Dialog shells and the complete-course preview. */
.app-dialog { width: min(850px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; overflow: auto; border: 1px solid #c0cbd2; border-radius: 23px; background: linear-gradient(125deg, #f8fafc, #e6edf1); color: var(--ink); box-shadow: 0 35px 100px #1d252843; }
.app-dialog::backdrop { background: #29343e55; backdrop-filter: blur(5px); }
.dialog-shell { padding: 26px; }
.app-dialog[open] .dialog-shell { animation: dialog-arrive .22s cubic-bezier(.2,.75,.25,1) backwards; }
.app-dialog[open]::backdrop { animation: backdrop-arrive .2s ease-out both; }
.dialog-header { display: flex; justify-content: space-between; align-items: start; gap: 14px; margin-bottom: 23px; }
.dialog-header > div { min-width: 0; }
.dialog-header h2 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: .02em; overflow-wrap: anywhere; }
.dialog-header p:not(.section-kicker) { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.dialog-close { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; padding: 0; border: 1px solid #c2cdd4; border-radius: 50%; background: #f9fbfcc4; color: #5e6e7b; font-size: 27px; }
.compact-dialog { max-width: 470px; }
.calendar-dialog, .settings-dialog { max-width: 650px; }
.effects-preview-dialog { max-width: 680px; }
.effects-preview-dialog .status-card { max-width: 100%; margin: 0 0 18px; }
.effects-preview-dialog .course-card { margin: 0; }
.effects-preview-dialog .course-open { cursor: default; }
.effects-preview-dialog .course-card:has(.course-open:active) { transform: none; }
.week-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.week-preview-day { overflow: hidden; border: 1px solid #c2cfd7; border-radius: 13px; background: #f2f6f8; }
.week-preview-day > header { padding: 13px 15px; border-bottom: 1px solid #c8d3da; background: #e3eaee; }
.week-preview-day h3 { margin: 0; font-size: 15px; }
.preview-course-list { padding: 0 13px; }
.preview-course { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 7px 10px; width: 100%; min-height: 50px; padding: 13px 1px; border: 0; border-bottom: 1px solid #d2dde3; background: transparent; text-align: left; }
.preview-course:last-child { border: 0; }
.preview-course strong { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.preview-course time { color: #5f7482; font-family: var(--number-font); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preview-empty { padding: 19px; color: #627786; font-size: 13px; }

/* Calendar, school events, and date details. */
.calendar-month-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.calendar-month-bar strong { font-size: 18px; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.calendar-weekdays { margin-bottom: 7px; }
.calendar-weekdays span { padding: 5px 0; color: #617480; font-size: 12px; text-align: center; }
.calendar-weekdays span:nth-last-child(-n+2) { color: #8d713b; }
.calendar-day { position: relative; display: grid; place-items: center; align-content: start; gap: 5px; min-width: 0; min-height: 82px; padding: 8px 3px; border: 1px solid #c4d1d966; border-radius: 10px; background: #f8fbfcad; }
.calendar-day:hover { border-color: #a98b50; }
.calendar-day.is-selected { border-color: #9a793c; box-shadow: inset 0 0 0 1px #ad8a4759; background: #efe5ce; }
.calendar-day.is-today .day-number { border-bottom: 2px solid #aa8643; }
.calendar-day.is-outside { opacity: .5; }
.calendar-day.is-dayoff { background: #f1ebdf; }
.day-number { font-family: var(--number-font); font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.3; }
.day-marker { max-width: 100%; overflow: hidden; color: #80622b; font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.day-marker.is-adjusted { color: #8b5f40; }
.day-course-mark { color: #5e7583; font-size: 11px; line-height: 1.3; white-space: nowrap; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 8px 17px; margin: 15px 0; color: #627784; font-size: 12px; }
.calendar-legend span { display: flex; align-items: center; gap: 5px; }
.calendar-legend i { width: 6px; height: 6px; border-radius: 50%; }
.legend-class { background: #758d9b; }
.legend-holiday { background: #ad8c46; }
.legend-override { background: #ad785b; }
.calendar-day-detail { padding: 16px; border: 1px solid #c3d1d9; border-radius: 13px; background: #f4f8fab3; }
.calendar-detail-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.detail-date-label { font-size: 14px; font-weight: 750; }
.detail-tag, .term-week-chip { padding: 3px 6px; border: 1px solid #c8b47f; border-radius: 6px; background: #f4ebd7; color: #795c23; font-size: 12px; line-height: 1.5; }
.detail-tag.is-school-event { border-color: #bbcabc; background: #e7ede7; color: #55705a; }
.detail-tag.is-override { border-color: #d0b39b; background: #eee2d8; color: #845a3b; }
.detail-course-list { display: grid; gap: 8px; margin-top: 13px; }
.detail-course { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 10px; font-size: 13px; line-height: 1.7; }
.detail-course strong { min-width: 0; overflow-wrap: anywhere; }
.detail-course time { color: #5e7685; font-family: var(--number-font); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.detail-empty, .calendar-context-line { margin: 10px 0 0; color: #607785; font-size: 12px; line-height: 1.85; overflow-wrap: anywhere; }
.school-calendar-note { margin-top: 14px; color: #627684; font-size: 12px; line-height: 1.85; }
.school-calendar-note summary { display: list-item; min-height: 40px; padding-top: 8px; color: #7b602d; cursor: pointer; }
.school-calendar-note p { margin: 7px 0 0; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 19px; }
.dialog-actions button { padding-right: 13px; padding-left: 13px; font-size: 13px; }

/* Course editing, schedule changes, preferences, and feedback. */
.stack-form { display: grid; gap: 16px; }
.stack-form label { display: grid; min-width: 0; gap: 7px; font-size: 13px; font-weight: 650; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.stack-form input, .stack-form select, .stack-form textarea, .setting-row select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 11px; border: 1px solid #bacbd5; border-radius: 10px; background: #fafcfdde; font-size: 14px; }
.stack-form input::placeholder, .stack-form textarea::placeholder { color: #687b87; }
.stack-form textarea { resize: vertical; line-height: 1.7; }
.form-help { margin: 0; color: #617684; font-size: 12px; line-height: 1.85; overflow-wrap: anywhere; }
.stack-form .primary-button { justify-self: end; min-width: 130px; }
.settings-section { padding: 19px 0; border-top: 1px solid #c5d3dc; }
.settings-section:first-of-type { padding-top: 0; border-top: 0; }
.settings-section h3 { margin: 0 0 13px; font-size: 16px; font-weight: 750; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 11px 0; font-size: 13px; }
.setting-row label { min-width: 0; line-height: 1.6; }
.setting-row select { width: auto; max-width: 190px; min-height: 42px; flex-shrink: 0; padding: 8px 10px; font-size: 13px; }
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 13px; font-size: 13px; }
.switch-row input { appearance: none; position: relative; width: 44px; height: 28px; flex-shrink: 0; margin: 0; border-radius: 16px; background: #c1cfd8; cursor: pointer; }
.switch-row input::after { content: ""; position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0002; transition: transform .18s; }
.switch-row input:checked { background: #b0965f; }
.switch-row input:checked::after { transform: translateX(16px); }
.checkbox-options { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0; font-size: 13px; }
.checkbox-options label { display: flex; align-items: center; gap: 7px; min-height: 40px; }
.checkbox-options input { width: 17px; height: 17px; accent-color: #a98339; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 13px 0; }
.button-row .soft-button, .button-row .text-button { font-size: 13px; }
.install-instructions { display: grid; gap: 19px; }
.install-instructions h3 { margin: 0 0 7px; font-size: 16px; }
.install-instructions p { margin: 0; color: #5e7686; font-size: 13px; line-height: 1.9; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(25px + env(safe-area-inset-bottom)); max-width: calc(100vw - 30px); padding: 12px 18px; border-radius: 12px; background: #354149; color: #fff; font-size: 13px; line-height: 1.7; box-shadow: 0 5px 24px #0003; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Composited metal, progress, and short arrival animations. */
@keyframes metal-orbit { to { transform: translate(-50%, -50%) rotate(1turn); } }
@keyframes progress-gleam { 0%, 25% { transform: translateX(-110%); opacity: 0; } 40% { opacity: .7; } 80%, 100% { transform: translateX(110%); opacity: 0; } }
@keyframes completed-gleam { from { transform: translateX(-120%); opacity: 0; } 25% { opacity: .7; } to { transform: translateX(120%); opacity: 0; } }
@keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }
@keyframes complete-pop { 0% { transform: scale(.6) rotate(-16deg); opacity: 0; } 70% { transform: scale(1.13) rotate(4deg); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes badge-ring { from { transform: scale(.8); opacity: .65; } to { transform: scale(1.3); opacity: 0; } }
@keyframes draw-check { to { stroke-dashoffset: 0; } }
@keyframes located-settle { 0% { transform: scale(.99); } 40% { transform: scale(1.008); } 100% { transform: scale(1); } }
@keyframes dialog-arrive { from { opacity: 0; transform: translateY(7px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backdrop-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) {
  .course-card:hover { transform: translateY(-3px); border-color: #ae9866; box-shadow: inset 0 1px 0 #fff, 0 9px 25px #63727c17; }
  .course-card.is-active:hover { border-color: #9d752d; box-shadow: 0 11px 29px #9773302e; }
  .course-card:hover .course-chevron { transform: translateX(2px); color: #806126; }
  .effects-preview-dialog .course-card:hover { transform: none; }
}
.course-chevron { transition: transform .2s, color .2s; }

/* One column on tablets and phones; courses precede notes. */
@media (max-width: 900px) {
  .today-layout { display: flex; flex-direction: column; gap: 24px; }
  .day-sidebar { display: contents; position: static; }
  .status-card { order: 0; width: 100%; }
  .courses-section { order: 1; width: 100%; }
  .memo-card { order: 2; width: 100%; }
  .install-link { order: 3; width: 100%; margin-top: -14px; }
  .countdown-value { font-size: 34px; }
  .course-open { padding: 18px 20px; }
}
@media (max-width: 700px) {
  .topbar-inner { width: calc(100% - 32px); min-height: 66px; gap: 9px; }
  .brand { gap: 7px; }
  .brand-mark { width: 33px; height: 33px; border-radius: 10px; font-size: 20px; }
  .brand strong { font-size: 14px; }
  .brand small { font-size: 12px; }
  .all-courses-button { min-height: 42px; gap: 5px; padding: 0 10px; font-size: 12px; }
  .all-courses-button svg { width: 15px; height: 15px; }
  .topbar-tools { gap: 0; }
  .connection-chip { display: none; }
  .main-column { width: calc(100% - 32px); padding: 22px 0 24px; }
  .preview-notice { padding: 10px 12px; margin-bottom: 19px; }
  .page-header { align-items: end; gap: 14px; margin-bottom: 20px; }
  .page-header h1 { font-size: 35px; }
  .page-subtitle { font-size: 12px; }
  .date-navigation { flex-direction: column; align-items: end; gap: 3px; }
  .date-control { padding: 2px; border-radius: 11px; }
  .date-control .icon-button { width: 40px; height: 42px; }
  .date-trigger { min-height: 42px; padding: 0 7px; gap: 5px; font-size: 12px; }
  .date-trigger svg { width: 15px; height: 15px; }
  .today-layout { gap: 23px; }
  .status-card { padding: 17px 18px; border-radius: 18px; }
  .status-title-group { margin-top: 12px; }
  .status-title-group h2 { font-size: 27px; }
  .countdown-block { margin-top: 12px; }
  .countdown-value { font-size: 34px; }
  .day-summary { margin-top: 13px; }
  .status-card[data-state=class] { --live-radius: 18px; padding: 20px 18px; }
  .status-card[data-state=class] .status-title-group h2 { font-size: 29px; }
  .schedule-heading h2 { font-size: 22px; }
  .schedule-toolbar { margin: 11px 0 15px; gap: 8px; }
  .schedule-toolbar > span { max-width: 64%; }
  .schedule-toolbar .soft-button, .schedule-toolbar .text-button { padding: 0 11px; }
  .course-list { gap: 21px; }
  .course-card { border-radius: 16px; scroll-margin-top: 100px; }
  .course-card.is-active { --live-radius: 16px; }
  .course-open { gap: 12px; padding: 16px; }
  .course-live-progress { margin: -3px 16px 12px; }
  .course-name { font-size: 24px; }
  .course-times { gap: 10px; padding-top: 11px; }
  .lesson-row { gap: 6px; }
  .lesson-row + .lesson-row { padding-left: 11px; }
  .lesson-time { font-size: 16px; letter-spacing: 0; }
  .lesson-time em { padding: 0 2px; }
  .memo-card { padding: 17px; }
  .install-link { margin-top: -13px; padding: 0 2px; }
  .page-footer { padding-top: 22px; }
  .app-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); border-radius: 19px; }
  .dialog-shell { padding: 21px 18px; }
  .dialog-header { gap: 10px; margin-bottom: 20px; }
  .dialog-header h2 { font-size: 23px; }
  .week-preview-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .calendar-grid, .calendar-weekdays { gap: 3px; }
  .calendar-day { min-height: 72px; padding: 6px 2px; gap: 5px; border-radius: 8px; }
  .day-number { font-size: 17px; }
  .day-marker, .day-course-mark { font-size: 10px; }
  .calendar-day-detail { padding: 13px; }
  .dialog-actions { gap: 7px; }
  .dialog-actions button { min-height: 42px; padding: 0 10px; font-size: 12px; }
  .setting-row select { max-width: 165px; }
  .task-form input, .stack-form input, .stack-form select, .stack-form textarea, .setting-row select { font-size: 16px; }
  .form-grid { gap: 10px; }
  .toast { bottom: calc(15px + env(safe-area-inset-bottom)); }
}
@media (max-width: 430px) {
  .page-header { align-items: start; }
  .date-navigation { align-items: start; width: 100%; flex-direction: row; }
  .date-control { flex: 1; justify-content: space-between; }
  .date-trigger { flex: 1; }
  #return-today { align-self: center; padding: 0 9px; }
}
@media (max-width: 350px) {
  .topbar-inner, .main-column { width: calc(100% - 28px); }
  .topbar-inner { gap: 7px; }
  .brand { gap: 5px; }
  .brand-mark { display: none; }
  .all-courses-button { padding: 0 8px; }
  .page-header h1 { font-size: 33px; }
  .status-title-group h2 { font-size: 25px; }
  .countdown-value { font-size: 31px; }
  .course-open { padding: 15px 14px; }
  .course-name { font-size: 23px; }
  .course-times { gap: 8px; }
  .lesson-row + .lesson-row { padding-left: 8px; }
  .lesson-time { font-size: 15px; }
  .lesson-time em { padding: 0 1px; }
  .dialog-shell { padding: 20px 14px; }
  .calendar-day { min-height: 69px; }
  .day-marker, .day-course-mark { font-size: 9px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .setting-row { flex-wrap: wrap; gap: 7px; }
  .setting-row select { width: 100%; max-width: none; }
  .schedule-toolbar { align-items: start; }
  .section-count { font-size: 12px; padding: 5px 8px; }
}

/* User preferences remain compatible with saved settings. */
body[data-font-size=large] .course-name { font-size: 28px; }
body[data-font-size=large] .lesson-time { font-size: 19px; }
body[data-font-size=large] .lesson-name, body[data-font-size=large] .course-meta, body[data-font-size=large] .task-item > label { font-size: 14px; }
body[data-font-size=large] .status-title-group h2 { font-size: 30px; }
body[data-font-size=large] .status-detail, body[data-font-size=large] .next-day-hint { font-size: 14px; }
@media (max-width: 700px) {
  body[data-font-size=large] .course-name { font-size: 27px; }
  body[data-font-size=large] .lesson-time { font-size: 18px; }
}
@media (max-width: 350px) {
  body[data-font-size=large] .lesson-time { font-size: 16px; }
}
body[data-theme=warm] { --ink: #35342e; --muted: #6d6a5e; --line: #cec7b7; background: radial-gradient(ellipse at 15% 0, #fffaf2b5, transparent 46%), linear-gradient(120deg, #eae7df, #f4f1e9 52%, #e6e3db); }
body[data-theme=warm] .app-topbar { background: #f2eee5f0; border-color: #d0c9b9; }
body[data-theme=warm] .status-card { background: linear-gradient(120deg, #fbf9f2, #e4dfd3 56%, #f2eee5); border-color: #cbc1ac; }
body[data-theme=warm] .status-card[data-state=class] { --live-surface: linear-gradient(120deg, #f4ead4, #fcf7eb 43%, #dedbce); border-color: #ad8840; background: #bfa263; }
body[data-theme=warm] .course-card { background: linear-gradient(125deg, #f5f2ea, #e6e1d5 60%, #f2efe7); border-color: #d0c7b5; }
body[data-theme=warm] .course-card.is-active { --live-surface: linear-gradient(116deg, #f2e6cc, #f6f1e1 40%, #e3dece); border-color: #a98238; background: #bfa263; }
body[data-theme=warm] .memo-card, body[data-theme=warm] .app-dialog { background: linear-gradient(130deg, #f8f5ed, #ede7db); border-color: #d0c7b5; }
body[data-theme=warm] .course-times, body[data-theme=warm] .lesson-row + .lesson-row { border-color: #cfc6b2; }
body[data-theme=warm] .date-control { background: linear-gradient(145deg, #fffaf1, #e9e2d4); }
body[data-theme=warm] .course-card.is-next.is-urgent { background: linear-gradient(120deg, #f7ebd0, #e9e4d4 64%, #f7efde); border-color: #a57a2e; }
body[data-theme=warm] .status-card.is-urgent, body[data-theme=warm] .course-card.is-active.is-urgent { border-color: #9c7023; }
body.effects-paused *, body.effects-paused *::before, body.effects-paused *::after { animation-play-state: paused !important; }
body:has(.app-dialog[open]) .main-column *, body:has(.app-dialog[open]) .main-column *::before, body:has(.app-dialog[open]) .main-column *::after { animation-play-state: paused !important; }
body[data-motion=reduced] *, body[data-motion=reduced] *::before, body[data-motion=reduced] *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
body[data-motion=reduced] .status-complete-mark path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  .status-complete-mark path { stroke-dashoffset: 0; }
}