:root {
  --motion-fast: 160ms;
  --motion-normal: 240ms;
  --motion-slow: 360ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --shell-blue: #2563eb;
  --shell-system-red: #ff3b30;
  --shell-ink: #14213d;
  --shell-muted: #667085;
  --shell-line: rgba(154, 174, 204, .34);
  --shell-page: #f3f7fc;
  --shell-glass: rgba(255, 255, 255, .72);
  --shell-glass-strong: rgba(255, 255, 255, .88);
  --shell-shadow: 0 18px 54px rgba(20, 48, 92, .11);
  --shell-shadow-raised: 0 24px 68px rgba(16, 42, 86, .2);
  --hero-primary: #14213d;
  --hero-secondary: #344054;
  --hero-muted: #667085;
  --hero-accent: #1746a2;
  --hero-chip-bg: rgba(37, 99, 235, .08);
  --hero-chip-line: rgba(37, 99, 235, .14);
  --hero-title-shadow: none;
  --completed-primary: #344054;
  --completed-secondary: #526174;
  --completed-muted: #667085;
  --app-dock-height: 66px;
  --app-dock-gap: 22px;
  --safe-bottom-content: var(--app-dock-clearance, calc(var(--app-dock-height) + var(--app-dock-gap) + max(10px, env(safe-area-inset-bottom))));
  --page-max-width: 1240px;
  --page-wide-max-width: 1400px;
  --page-gutter-desktop: 32px;
  --page-gutter-mobile: 12px;
  --section-gap: 18px;
  --panel-gap: 14px;
  --panel-padding-desktop: 24px;
  --hero-desktop-gap: 40px;
  --shell-safe-area-top: #f8fbff;
}
*,*::before,*::after { box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html:root { min-width:100%; min-height:100%; background: var(--shell-safe-area-top); scroll-behavior: smooth; }
body[data-shell-page] {
  position:relative;
  isolation:isolate;
  width:100%;
  min-width:0;
  min-height: 100vh;
  min-height: 100dvh;
  margin:0;
  padding-bottom: var(--safe-bottom-content);
  color: var(--shell-ink);
  background:var(--shell-safe-area-top);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body[data-shell-page]::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 18%,rgba(79,140,255,.15),transparent 32rem),linear-gradient(180deg,transparent 0%,rgba(243,247,252,.82) 22%,rgba(238,243,250,.68) 72%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);
}
/* Keep document-bound artwork behind the notch while masking scrolling content from iOS system status text. */
body[data-shell-page]::after {
  content:"";
  position:fixed;
  z-index:60;
  top:0;
  right:0;
  left:0;
  height:env(safe-area-inset-top);
  pointer-events:none;
  background:var(--shell-safe-area-top);
}
body[data-shell-page]>main { max-width:100%; }
[hidden] { display:none!important; }
.glass-surface, .panel, .card {
  background: var(--shell-glass-strong);
  border-color: var(--shell-line);
  box-shadow: var(--shell-shadow);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}
.glass-dock { backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%); }
.glass-sheet { backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%); }
.shell-header { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1100px; margin:0 auto; padding:22px 24px 4px; }
.shell-brand { color:var(--shell-ink); font-weight:850; letter-spacing:-.025em; text-decoration:none; }
.shell-more { position:relative; }
.shell-more summary { list-style:none; cursor:pointer; color:var(--shell-muted); font-weight:750; min-width:48px; min-height:44px; display:grid; place-items:center; padding:8px 12px; border-radius:14px; transition:background var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard); }
.shell-more summary::-webkit-details-marker { display:none; }
.shell-more summary:hover,.shell-more[open] summary { color:#1d4ed8; background:rgba(219,234,254,.78); }
.shell-more summary:active { transform:scale(.97); }
.shell-more-menu { position:absolute; z-index:40; top:calc(100% + 8px); right:0; width:184px; padding:7px; background:var(--shell-glass-strong); border:1px solid var(--shell-line); border-radius:17px; box-shadow:var(--shell-shadow-raised); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); transform-origin:top right; animation:shell-menu-enter var(--motion-fast) var(--ease-enter) both; }
.shell-more-menu a { display:flex; align-items:center; min-height:44px; color:var(--shell-ink); text-decoration:none; font-weight:700; padding:10px 12px; border-radius:11px; transition:background var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard); }
.shell-more-menu a:hover { background:rgba(219,234,254,.68); }
.shell-more-menu a:active { transform:scale(.98); }
.shell-network { display:none; position:relative; z-index:5; max-width:1052px; margin:8px auto 0; padding:10px 14px; color:#854d0e; background:rgba(255,251,235,.86); border:1px solid rgba(245,158,11,.26); border-radius:12px; box-shadow:0 8px 24px rgba(146,64,14,.06); font-size:13px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
html[data-connectivity="OFFLINE"] .shell-network[data-state="OFFLINE"] { display:block; animation:shell-status-enter var(--motion-normal) var(--ease-enter) both; }
.shell-runtime-failure { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:24px; background:rgba(238,243,250,.86); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.shell-runtime-failure[hidden] { display:none; }
.shell-runtime-failure>div { width:min(460px,100%); padding:26px; border:1px solid rgba(239,68,68,.22); border-radius:22px; background:var(--shell-glass-strong); box-shadow:var(--shell-shadow-raised); animation:shell-sheet-enter var(--motion-normal) var(--ease-enter) both; }
.shell-runtime-failure h1 { margin:0 0 8px; font-size:24px; }
.shell-runtime-failure p { color:#7f1d1d; line-height:1.55; }
.shell-runtime-failure button,.runtime-retry { border:0; border-radius:12px; min-height:44px; padding:11px 16px; background:var(--shell-blue); color:#fff; font-weight:750; cursor:pointer; transition:transform var(--motion-fast) var(--ease-standard),filter var(--motion-fast) var(--ease-standard); }
.runtime-error { border-color:rgba(239,68,68,.3)!important; }
.shell-bottom-nav { --active-index:0; position:fixed; z-index:30; left:50%; bottom:max(10px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:grid; grid-template-columns:repeat(3,1fr); width:min(430px,calc(100% - 20px)); padding:6px; isolation:isolate; background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(241,247,255,.68)); border:1px solid rgba(255,255,255,.82); border-radius:22px; box-shadow:0 18px 50px rgba(16,42,86,.24),inset 0 1px 0 rgba(255,255,255,.9); transition:opacity var(--motion-normal) var(--ease-standard),transform var(--motion-normal) var(--ease-standard); }
.shell-bottom-nav::before { content:""; position:absolute; z-index:-1; left:6px; top:6px; bottom:6px; width:calc((100% - 12px)/3); border:1px solid rgba(147,180,255,.3); border-radius:16px; background:linear-gradient(145deg,rgba(219,234,254,.98),rgba(242,247,255,.8)); box-shadow:0 7px 18px rgba(37,99,235,.11),inset 0 1px 0 rgba(255,255,255,.75); transform:translateX(calc(var(--active-index)*100%)); transition:transform var(--motion-normal) var(--ease-enter); }
.shell-bottom-nav[data-active="none"]::before { opacity:0; }
.shell-bottom-nav a { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:0; min-height:52px; border-radius:16px; color:var(--shell-muted); font-size:12px; font-weight:800; text-decoration:none; transition:color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard); }
.shell-dock-icon { width:20px; height:20px; display:grid; place-items:center; line-height:1; transform:scale(.92); opacity:.76; transition:transform var(--motion-normal) var(--ease-enter),opacity var(--motion-fast) var(--ease-standard); }
.shell-dock-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.shell-dock-label { opacity:.78; transition:opacity var(--motion-fast) var(--ease-standard); }
.shell-bottom-nav a:hover { color:#284b7a; transform:translateY(-1px); }
.shell-bottom-nav a[aria-current="page"] { color:#1d4ed8; }
.shell-bottom-nav a[aria-current="page"] .shell-dock-icon { transform:scale(1.08); opacity:1; }
.shell-bottom-nav a[aria-current="page"] .shell-dock-label { opacity:1; }
.shell-bottom-nav[data-keyboard="true"] { opacity:0; pointer-events:none; transform:translate(-50%,calc(100% + 28px)); }
.shell-page-enter { animation:shell-page-enter var(--motion-normal) var(--ease-enter) both; }
.shell-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:16px 0 22px; }
.shell-choice { display:flex; flex-direction:column; gap:7px; min-height:128px; padding:18px; color:var(--shell-ink); text-decoration:none; background:rgba(255,255,255,.72); border:1px solid var(--shell-line); border-radius:17px; box-shadow:0 10px 28px rgba(28,53,87,.06); transition:transform var(--motion-fast) var(--ease-standard),box-shadow var(--motion-normal) var(--ease-standard),border-color var(--motion-normal) var(--ease-standard); }
.shell-choice:hover { transform:translateY(-2px); border-color:#b8cdf8; box-shadow:0 16px 34px rgba(37,99,235,.12); }
.shell-choice:active { transform:scale(.985); }
.shell-choice strong { font-size:18px; }
.shell-choice span { color:var(--shell-muted); line-height:1.5; }
.shell-secondary-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.shell-secondary-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 14px; border-radius:12px; background:rgba(232,241,255,.82); color:#1d4ed8; font-weight:750; text-decoration:none; transition:transform var(--motion-fast) var(--ease-standard),background var(--motion-fast) var(--ease-standard); }
.shell-disclosure { margin-top:16px; border:1px solid var(--shell-line); border-radius:16px; background:rgba(255,255,255,.58); }
.shell-disclosure>summary { min-height:48px; display:flex; align-items:center; padding:11px 15px; cursor:pointer; color:var(--shell-ink); font-weight:800; }
.shell-disclosure-toggle { width:100%; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 15px; border:0; border-radius:15px; color:var(--shell-ink); background:transparent; font:inherit; font-weight:800; text-align:left; cursor:pointer; }
.shell-disclosure-toggle:focus-visible { outline:3px solid #2563eb; outline-offset:3px; }
.shell-disclosure-indicator { display:inline-flex; transition:transform var(--motion-fast); }
.shell-disclosure-toggle[aria-expanded="true"] .shell-disclosure-indicator { transform:rotate(180deg); }
.shell-disclosure-content { padding:0 15px 15px; }
.import-method-button { width:100%; border:0; text-align:left; font:inherit; cursor:pointer; }
.import-method-button[aria-expanded="true"] { border-color:#7aa2f7; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
body[data-shell-page="import"] h1,body[data-shell-page="import"] h2,body[data-shell-page="import"] .card strong { color:var(--shell-ink); }
.import-copy-status,.import-receiver-message { margin:10px 0 0; font-weight:700; }
.import-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.import-preview-heading h2 { margin:0; }
.import-reselect { min-height:40px; padding:8px 4px; border:0; background:transparent; color:var(--shell-muted); font:inherit; font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.import-reselect:hover { color:var(--shell-ink); }
.conflict-help { position:relative; }
.conflict-help summary { list-style:none; cursor:pointer; }
.conflict-help summary::-webkit-details-marker { display:none; }
.conflict-help p { position:absolute; z-index:10; top:calc(100% + 7px); right:0; width:min(300px,calc(100vw - 52px)); margin:0; padding:12px 14px; color:#3f2a0b; background:#fff8e8; border:1px solid rgba(245,158,11,.38); border-radius:12px; box-shadow:0 14px 34px rgba(8,24,55,.22); font-size:13px; line-height:1.55; }
.export-recommended { display:grid; gap:12px; }
.export-recommended .shell-secondary-actions { margin-top:0; }
.export-recommended .shell-secondary-actions a { background:rgba(232,241,255,.92); }
button,.button,.quick-link,.file-box { transition:transform var(--motion-fast) var(--ease-standard),box-shadow var(--motion-normal) var(--ease-standard),filter var(--motion-fast) var(--ease-standard); }
button:not(:disabled):active,.button:active,.quick-link:active,.file-box:active { transform:scale(.98); }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,.course-row:focus-visible { outline:3px solid rgba(37,99,235,.48); outline-offset:3px; }

/* Today presentation only. */
.date-bar { align-items:center; }
.date-primary { color:var(--hero-primary); text-shadow:var(--hero-title-shadow); }
.date-secondary span { color:var(--hero-secondary); background:var(--hero-chip-bg); border:1px solid var(--hero-chip-line); }
.hero-card { isolation:isolate; min-height:248px; color:var(--hero-primary); border-radius:24px; box-shadow:0 24px 64px rgba(23,70,162,.25); animation:shell-hero-enter var(--motion-slow) var(--ease-enter) both; }
.hero-card::before,.hero-card::after { content:""; position:absolute; z-index:-1; border-radius:50%; pointer-events:none; }
.hero-card::before { width:280px; height:280px; right:-84px; top:-128px; background:radial-gradient(circle,rgba(255,255,255,.28),transparent 68%); }
.hero-card::after { width:210px; height:210px; left:-96px; bottom:-132px; background:radial-gradient(circle,rgba(137,190,255,.28),transparent 70%); }
.hero-kicker { color:var(--hero-secondary); }
.hero-content>.course-name,.no-class-title { color:var(--hero-primary); text-wrap:balance; }
.hero-detail .detail-label,.future-label,.hero-empty { color:var(--hero-muted); }
.hero-countdown { color:var(--hero-accent); box-shadow:0 10px 28px rgba(8,35,90,.18); }
.stats { gap:10px; }
.stat { border:1px solid rgba(154,174,204,.18); background:rgba(245,248,253,.82); }
.course-row { position:relative; border-radius:14px; transition:opacity var(--motion-fast) var(--ease-standard),background var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard); }
.course-row:not(.completed):hover { background:rgba(242,247,255,.82); transform:translateX(2px); }
.course-row.completed { opacity:1; filter:none; background:rgba(245,248,253,.56); }
.course-row.completed .course-name { color:var(--completed-primary); }
.course-row.completed .course-time { color:var(--completed-secondary); }
.course-row.completed .course-meta { color:var(--completed-muted); }
.course-row.completed .status-chip { opacity:.66; color:var(--completed-muted); background:rgba(232,238,247,.74); }
.course-row.current { box-shadow:inset 3px 0 0 var(--shell-blue),0 8px 22px rgba(37,99,235,.08); }
body[data-shell-page="today"] .course-list { gap:6px; }
body[data-shell-page="today"] .course-row { border-top:0; padding-left:12px; padding-right:12px; }
.course-row.adjusted,.course-card.adjusted,.mobile-course.adjusted { border-color:#f59e0b; box-shadow:inset 3px 0 0 #f59e0b; }
.course-card.adjusted strong,.mobile-course.adjusted strong,.course-row.adjusted .course-name { color:#7a2e0e; }
.refresh-button { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:8px 12px; border:1px solid var(--shell-line); border-radius:999px; color:var(--shell-ink); background:var(--shell-glass); font:inherit; font-weight:750; cursor:pointer; }
.refresh-button span { display:inline-block; }
.refresh-button.is-refreshing span { animation:shell-refresh-spin var(--motion-slow) linear infinite; }
.refresh-notice { margin:0 0 12px; color:#b54708; font-weight:650; }
.timetable-actions { display:flex; justify-content:center; gap:10px; margin-top:12px; }
@keyframes shell-refresh-spin { to { transform:rotate(1turn); } }
.desktop-import-steps { display:grid; gap:8px; padding-left:24px; color:var(--shell-ink); }
.local-status-shell { width:min(100%,820px); }
.local-status-heading { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.local-status-heading h1 { margin:0; }
.back-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 14px; border:1px solid var(--shell-line); border-radius:999px; color:var(--shell-ink); background:var(--shell-glass); font:inherit; font-weight:750; cursor:pointer; text-decoration:none; }
.back-button:visited,.back-button:hover,.back-button:active,.back-button:focus-visible { color:var(--shell-ink); text-decoration:none; }
.local-status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.status-card { min-width:0; padding:16px; border:1px solid var(--shell-line); border-radius:16px; background:rgba(244,247,251,.8); }
.status-card span { display:block; color:var(--shell-muted); font-size:13px; }
.status-card strong { display:block; margin-top:5px; overflow-wrap:anywhere; }
.local-advanced { margin-top:16px; }
.local-advanced dl { margin-bottom:0; }
.local-advanced dd { margin:2px 0 10px; overflow-wrap:anywhere; }
.name-editor { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; }
.name-editor input { min-width:0; min-height:44px; padding:10px 12px; border:1px solid var(--shell-line); border-radius:12px; color:var(--shell-ink); background:var(--shell-glass-strong); font:inherit; }
.quick-link { min-height:82px; justify-content:center; }
.quick-link:hover { transform:translateY(-2px); border-color:#b8cdf8; box-shadow:0 13px 28px rgba(37,99,235,.1); }

/* Timetable presentation only. */
.week-toolbar button { min-width:44px; min-height:44px; transition:transform var(--motion-fast) var(--ease-standard),background var(--motion-fast) var(--ease-standard),box-shadow var(--motion-normal) var(--ease-standard); }
.week-toolbar button:not(:disabled):hover { background:#dce8f9; box-shadow:0 7px 18px rgba(37,99,235,.12); transform:translateY(-1px); }
.return-now { position:static; min-height:44px; padding:10px 15px; border:1px solid rgba(255,59,48,.28); border-radius:999px; color:#b42318; background:var(--shell-glass-strong); box-shadow:0 8px 22px rgba(20,48,92,.08); font-weight:800; cursor:pointer; animation:shell-status-enter var(--motion-normal) var(--ease-enter) both; }
.return-now[hidden] { display:none; }
.grid-scroll { scrollbar-color:#c6d6ed transparent; scrollbar-width:thin; }
.week-grid { grid-template-columns:88px repeat(7,minmax(128px,1fr)); min-width:996px; overflow:hidden; border:1px solid #e1e8f2; border-radius:15px; }
.period-label { width:52px; justify-self:start; justify-content:center; }
.day-head { position:sticky; top:0; z-index:4; }
.day-head.today { box-shadow:inset 0 -3px 0 var(--shell-blue); }
.course-card,.mobile-course { transition:transform var(--motion-fast) var(--ease-standard),box-shadow var(--motion-normal) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard); }
.course-card { box-shadow:0 5px 14px rgba(37,99,235,.09); }
.course-card.current,.mobile-course.current { border-color:rgba(255,59,48,.48); box-shadow:inset 3px 0 0 var(--shell-system-red),0 8px 22px rgba(255,59,48,.08); }
.live-label { color:#b42318!important; font-size:11px; font-weight:850; letter-spacing:.02em; }
.course-card:hover { z-index:5; transform:translateY(-2px); box-shadow:0 11px 24px rgba(37,99,235,.17); border-color:#8db1f8; }
.course-card.conflicting { background-image:linear-gradient(135deg,rgba(247,144,9,.09) 25%,transparent 25%,transparent 50%,rgba(247,144,9,.09) 50%,rgba(247,144,9,.09) 75%,transparent 75%); background-size:12px 12px; }
.mobile-day h2 { z-index:auto; }
.mobile-course { position:relative; min-height:76px; box-shadow:0 7px 18px rgba(23,49,92,.07); }
.mobile-course::after { content:"›"; position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#9aabc1; font-size:21px; }
.mobile-course:hover { border-color:#b8cdf8; box-shadow:0 12px 26px rgba(37,99,235,.11); transform:translateY(-1px); }
dialog { background:transparent; overflow:visible; }
dialog .dialog-body { position:relative; color:var(--shell-ink); background:var(--shell-glass-strong); border:1px solid rgba(255,255,255,.58); box-shadow:var(--shell-shadow-raised); }
dialog[open] .dialog-body { animation:shell-sheet-enter var(--motion-normal) var(--ease-enter) both; }
dialog[open]::backdrop { animation:shell-backdrop-enter var(--motion-fast) var(--ease-enter) both; }
dialog[data-closing="true"] .dialog-body { animation:shell-sheet-exit var(--motion-fast) var(--ease-exit) both; }
dialog[data-closing="true"]::backdrop { animation:shell-backdrop-exit var(--motion-fast) var(--ease-exit) both; }
.dialog-close { min-width:44px; min-height:44px; }
.current-time-indicator { --indicator-red:var(--shell-system-red); display:flex; align-items:center; gap:0; min-height:18px; color:var(--indicator-red); font-size:11px; font-variant-numeric:tabular-nums; font-weight:800; pointer-events:none; transition:transform var(--motion-fast) var(--ease-standard); }
.current-time-text { flex:0 0 auto; margin-right:5px; }
.current-time-dot { flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--indicator-red); }
.current-time-rule { flex:1 1 auto; height:1px; background:var(--indicator-red); opacity:.72; }
.current-time-now { margin-left:6px; font-size:10px; }
.current-time-track { display:flex; align-items:center; min-width:0; }
.desktop-time { position:absolute; z-index:3; top:calc(42px + var(--time-y)); left:0; width:100%; display:grid; grid-template-columns:88px repeat(7,minmax(0,1fr)); transform:translateY(-50%); }
.desktop-time .current-time-text { grid-column:1; justify-self:end; padding-right:4px; margin:0; text-align:right; white-space:nowrap; }
.desktop-time .current-time-track { padding-right:4px; }
.mobile-time { display:none; margin:7px 0; }
.today-time { margin:7px 0; padding-right:4px; }

/* Import/export and runtime state alignment. */
body[data-shell-page^="import"] main,body[data-shell-page="export"] main,body[data-shell-page="about"] main { width:min(100%,900px); }
body[data-shell-page^="import"] .card,body[data-shell-page^="import"] .panel,body[data-shell-page="export"] .panel,body[data-shell-page="about"] .panel { border-radius:22px; }
.file-box { cursor:pointer; background:rgba(248,251,255,.7)!important; }
.file-box:hover { border-color:#8db1f8!important; box-shadow:0 12px 28px rgba(37,99,235,.09); }
.error,.runtime-error,.warning { border-radius:14px; }

@keyframes shell-page-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes shell-menu-enter { from { opacity:0; transform:translateY(-5px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes shell-status-enter { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@keyframes shell-hero-enter { from { opacity:0; transform:translateY(10px) scale(.992); } to { opacity:1; transform:none; } }
@keyframes shell-sheet-enter { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes shell-sheet-exit { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(10px) scale(.99); } }
@keyframes shell-backdrop-enter { from { opacity:0; } to { opacity:1; } }
@keyframes shell-backdrop-exit { from { opacity:1; } to { opacity:0; } }

@media(max-width:700px) {
  .shell-header { padding:calc(14px + env(safe-area-inset-top)) 14px 2px; }
  .shell-network { margin-inline:12px; }
  .shell-choice-grid { grid-template-columns:1fr; }
  .shell-choice { min-height:0; }
  body[data-shell-page] .shell { padding:var(--page-gutter-mobile); }
  .panel,.card { padding:17px; border-radius:20px; }
  .hero-card { min-height:252px; padding:20px 17px; }
  .date-secondary { gap:6px; }
  .date-secondary span { padding:7px 9px; }
  .hero-detail { grid-template-columns:48px minmax(0,1fr); gap:8px; }
  .stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stat { min-width:0; padding:10px; }
  .course-row { padding:14px 4px; }
  .course-row.current { padding:14px 12px; }
  .quick-link { min-height:70px; }
  .local-status-grid { grid-template-columns:1fr; }
  .name-editor { grid-template-columns:1fr; }
  .name-editor label { font-weight:700; }
  .grid-panel { padding:14px; }
  .week-toolbar { gap:10px; }
  .week-toolbar button { width:46px; height:44px; padding:0; font-size:24px; }
  .mobile-day { margin-bottom:20px; }
  .mobile-day h2 { position:static; padding:4px 3px 8px; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .mobile-day h2.today { color:#b42318; }
  .mobile-course { padding:14px 42px 14px 14px; border-radius:15px; }
  .desktop-time { display:none; }
  .mobile-time { display:flex; }
  dialog { width:100%; max-width:none; margin:auto 0 0; border-radius:25px 25px 0 0; }
  dialog .dialog-body { border-radius:25px 25px 0 0; padding:26px 18px calc(20px + env(safe-area-inset-bottom)); }
  dialog .dialog-body::before { content:""; position:absolute; top:9px; left:50%; width:38px; height:4px; border-radius:99px; background:#bac5d3; transform:translateX(-50%); }
}
@media(max-width:390px) {
  body[data-shell-page] .shell { padding-inline:10px; }
  .shell-header { padding-inline:12px; }
  .hero-content>.course-name,.no-class-title { font-size:27px; }
  .stat strong { font-size:20px; }
  .shell-bottom-nav { width:calc(100% - 16px); }
}
@media(prefers-color-scheme:dark) {
  :root { color-scheme:dark; --shell-ink:#edf4ff; --shell-muted:#a8b5c8; --shell-line:rgba(158,179,211,.2); --shell-page:#09111f; --shell-glass:rgba(17,28,46,.72); --shell-glass-strong:rgba(17,28,46,.88); --shell-shadow:0 18px 54px rgba(0,0,0,.28); --shell-shadow-raised:0 24px 68px rgba(0,0,0,.48); --hero-primary:#f8fbff; --hero-secondary:rgba(255,255,255,.88); --hero-muted:rgba(255,255,255,.72); --hero-accent:#1746a2; --hero-chip-bg:rgba(255,255,255,.15); --hero-chip-line:rgba(255,255,255,.12); --hero-title-shadow:0 1px 12px rgba(6,24,61,.18); --completed-primary:#dbe6f5; --completed-secondary:#bdc9da; --completed-muted:#a8b5c8; --shell-safe-area-top:#0d1728; }
  html:root { background:var(--shell-safe-area-top); }
  body[data-shell-page] { background:var(--shell-safe-area-top); }
  body[data-shell-page]::before { background:radial-gradient(circle at 50% 18%,rgba(37,99,235,.22),transparent 32rem),linear-gradient(180deg,transparent 0%,rgba(9,17,31,.82) 22%,rgba(7,13,24,.7) 72%,transparent 100%); }
  .shell-brand,.shell-more-menu a,.shell-choice,.quick-link strong { color:var(--shell-ink); }
  .shell-more summary:hover,.shell-more[open] summary,.shell-more-menu a:hover { background:rgba(53,91,148,.26); }
  .shell-bottom-nav { background:linear-gradient(145deg,rgba(22,35,57,.86),rgba(12,22,38,.72)); border-color:rgba(152,175,211,.2); box-shadow:0 18px 50px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.08); }
  .shell-bottom-nav::before { background:linear-gradient(145deg,rgba(37,99,235,.32),rgba(36,61,99,.32)); border-color:rgba(96,165,250,.28); box-shadow:0 7px 18px rgba(0,0,0,.18); }
  .shell-choice,.quick-link,.mobile-course,.stat,.metric { background:rgba(25,39,62,.74)!important; }
  .panel,.card { background:rgba(17,28,46,.94); }
  .shell-disclosure { background:rgba(17,28,46,.92); }
  .status-card { background:rgba(25,39,62,.74); }
  .shell-secondary-actions a,.export-recommended .shell-secondary-actions a { color:#bfdbfe; background:rgba(37,72,125,.5); border:1px solid rgba(96,165,250,.28); }
  .notice,.note,.privacy,.warning { color:#e6eefb!important; background:rgba(25,39,62,.96)!important; border:1px solid rgba(158,179,211,.3)!important; }
  .warning { color:#ffe7c2!important; border-color:rgba(245,158,11,.5)!important; }
  .conflict-help p { color:#ffe7c2; background:#3b2b12; border-color:rgba(245,158,11,.5); }
  .mobile-course { color:var(--shell-ink); }
  .course-row:not(.completed):hover,.course-row.current { background:rgba(37,72,125,.3); }
  .course-row.completed { background:rgba(20,33,53,.62); }
  .course-row.completed .status-chip { background:rgba(47,65,92,.72); }
  .course-row.adjusted,.course-card.adjusted,.mobile-course.adjusted { background:#3a2517!important; border-color:#fb923c!important; box-shadow:inset 3px 0 0 #fb923c; }
  .course-card.adjusted strong,.mobile-course.adjusted strong,.course-row.adjusted .course-name { color:#fff1df!important; }
  .course-card.adjusted span,.mobile-course.adjusted span,.course-row.adjusted .course-meta { color:#ffd2a6!important; }
  .return-now { color:#ff8a82; border-color:rgba(255,59,48,.34); }
  .live-label { color:#ff8a82!important; }
  .week-grid,.day-column,.corner,.day-head,.period-label { border-color:rgba(158,179,211,.16); }
  .corner,.day-head,.period-label { background:#111d30; color:var(--shell-ink); }
  .day-column { background-color:#0d1728; background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 57px,rgba(158,179,211,.14) 57px,rgba(158,179,211,.14) 58px); }
  .course-card { background-color:#172d50; color:#edf4ff; }
  .course-card span,.mobile-course span { color:#b3c0d3; }
  .dialog-row dt { color:var(--shell-muted); }
  .dialog-row { border-color:var(--shell-line); }
  .mobile-day h2 { background:transparent; }
  .file-box,.schema { background-color:rgba(9,17,31,.8)!important; }
  .shell-runtime-failure { background:rgba(5,10,18,.88); }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .shell-page-enter,.shell-more-menu,.shell-network,.hero-card,.hero-card::before,dialog[open] .dialog-body,dialog[open]::backdrop,dialog[data-closing="true"] .dialog-body,dialog[data-closing="true"]::backdrop { animation:none!important; }
  .shell-bottom-nav,.shell-bottom-nav::before,.shell-bottom-nav a,.shell-dock-icon,.shell-dock-label,.shell-choice,.shell-more summary,.shell-more-menu a,button,.button,.quick-link,.course-row,.course-card,.mobile-course,.file-box,.current-time-indicator { transition-duration:.01ms!important; animation-duration:.01ms!important; }
}

/* Current-release import readability and settings. */
@media (min-width:900px){
  #computer-import{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:24px;align-items:start;max-width:1180px;margin-inline:auto}
  #computer-import[hidden]{display:none}
  .import-preview{min-width:0;padding:20px;border:1px solid var(--shell-line);border-radius:18px;background:var(--shell-surface-strong)}
  body[data-shell-page="import"] main.shell{max-width:1180px}
}
.import-table-wrap,.table-wrap{max-height:520px;overflow:auto;border:1px solid var(--shell-line);border-radius:14px;background:var(--shell-surface-strong)}
.import-table-wrap table,.table-wrap table{color:var(--shell-ink)}
.import-table-wrap th,.table-wrap th{position:sticky;top:0;background:var(--shell-surface-strong);z-index:1}
.import-table-wrap td,.table-wrap td{color:var(--shell-ink);border-color:var(--shell-line)}
.metric{background:var(--shell-surface-soft)!important;color:var(--shell-ink)}
.metric span,.muted{color:var(--shell-muted)}
.settings-section+.settings-section{margin-top:22px;padding-top:20px;border-top:1px solid var(--shell-line)}.field-label{display:block;margin-bottom:7px;font-weight:750}.custom-period-end{display:flex;align-items:center;gap:8px;margin-top:12px}.custom-period-end[hidden]{display:none}.custom-period-end input{width:90px}.period-settings{display:grid;gap:5px;margin:12px 0 16px}.period-setting-row{display:grid;grid-template-columns:74px minmax(170px,1fr) minmax(170px,1fr) 104px;gap:8px;align-items:center;min-height:52px;padding:6px 9px;border:1px solid var(--shell-line);border-radius:11px;background:var(--shell-surface-soft)}.period-setting-row strong{font-size:14px;white-space:nowrap}.period-setting-row label{display:grid;grid-template-columns:34px minmax(112px,1fr);align-items:center;gap:6px;color:var(--shell-muted);font-size:13px}.period-setting-row input,select,#customEnd{min-height:38px;border:1px solid var(--shell-line);border-radius:9px;background:var(--shell-surface-strong);color:var(--shell-ink);padding:6px 8px}.period-setting-row.is-default::after{content:"";width:104px}.remove-period{border:0;background:transparent;color:var(--shell-muted);text-decoration:underline;text-underline-offset:3px;padding:7px 5px;cursor:pointer;font-size:12px;white-space:nowrap}.period-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding:16px 0 calc(10px + var(--safe-bottom-content))}.period-actions-secondary{display:flex;align-items:center;gap:8px}.period-actions .button{min-height:42px}.period-reset{background:transparent!important;color:var(--shell-muted)!important;border:1px solid transparent!important}.period-save{min-width:176px;box-shadow:0 9px 22px rgba(37,99,235,.2)}.welcome-logo{display:block;width:min(260px,80%);height:auto;margin:0 auto 22px}.holiday-reminder{padding:10px 14px;border:1px solid #f6c453;border-radius:12px;background:#fff7db;color:#725000;font-weight:700}.support-list{display:grid;gap:9px}.support-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--shell-line);border-radius:14px;background:var(--shell-surface-soft)}.support-status{padding:4px 9px;border-radius:999px;font-size:12px;white-space:nowrap}.support-status.verified{background:#dcfae6;color:#067647}.support-status.unsupported{background:var(--shell-surface-strong);color:var(--shell-muted);border:1px solid var(--shell-line)}
@media(max-width:700px){.settings-section+.settings-section{margin-top:19px;padding-top:18px}.period-settings{gap:7px;margin-top:10px}.period-setting-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0;padding:9px 10px;gap:7px 10px;border-radius:12px}.period-setting-row strong{grid-column:1/-1;font-size:14px;line-height:1.25}.period-setting-row label{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:4px;min-width:0;min-inline-size:0;overflow:hidden;font-size:12px}.period-setting-row label span{display:block;line-height:1.2}.period-setting-row input[type="time"]{display:block;width:100%;inline-size:100%;max-width:100%;max-inline-size:100%;min-width:0;min-inline-size:0;min-height:36px;padding:5px 6px;box-sizing:border-box;-webkit-appearance:none;appearance:none;text-align:center}.period-setting-row.is-default::after{display:none}.period-setting-row .remove-period{grid-column:1/-1;justify-self:start;padding:2px 0 0}.period-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:16px;padding:14px 0 calc(22px + var(--safe-bottom-content))}.period-save{grid-row:1;width:100%;min-height:48px}.period-actions-secondary{display:grid;grid-template-columns:1fr auto;gap:8px}.period-actions-secondary .button{min-height:40px;padding:9px 11px}.period-reset{justify-self:end;font-size:13px}.period-add{width:100%}}
@media(prefers-color-scheme:dark){.holiday-reminder{background:#3b2f10;color:#ffe59a;border-color:#7f641d}.support-status.verified{background:#123b2a;color:#75e0a7}.support-status.unsupported{background:#17243a;color:#b8c7dc}}
@media(prefers-color-scheme:dark){body[data-shell-page="import"] .code{background:#24334a!important;color:#f3f7ff!important;border-color:#455a78!important;box-shadow:none!important}body[data-shell-page="import"] .note{background:#18263a!important;color:#d8e5f7!important;border-color:#344a68!important}body[data-shell-page="import"] .privacy{background:#123326!important;color:#b7f5d0!important}body[data-shell-page="import"] .schema{background:#0a1322!important;color:#edf4ff!important}}

/* The page shell already reserves Dock clearance; keep the module footer compact without double-counting it. */
.period-actions{padding-bottom:28px}
@media(max-width:700px){.period-actions{padding-bottom:calc(30px + env(safe-area-inset-bottom))}}

/* Final period-editor action rhythm: separate controls from rows without enlarging the editor. */
.period-settings{margin-bottom:0}
.period-preferences-panel select{color:var(--shell-ink);background:var(--shell-glass-strong);color-scheme:light}
.period-preferences-panel select option{color:var(--shell-ink);background:#fff}
.period-actions{margin-top:22px;padding-top:0;padding-bottom:26px}
@media(max-width:700px){
  .period-actions{gap:11px;margin-top:22px;padding-top:0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .period-actions-secondary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .period-actions-secondary .button{width:100%;min-width:0}
  .period-reset{justify-self:stretch}
}
@media(max-width:340px){.period-actions-secondary{grid-template-columns:1fr}}

/* Secondary settings information architecture. */
.shell-more-link{display:inline-flex;align-items:center;justify-content:center;min-width:56px;min-height:44px;padding:9px 14px;border:1px solid var(--shell-line);border-radius:999px;color:var(--shell-ink);background:var(--shell-glass);font-weight:800;text-decoration:none;transition:background var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard)}
.shell-more-link:hover,.shell-more-link:focus-visible{background:rgba(37,99,235,.1);transform:translateY(-1px)}
.settings-shell{width:min(100%,820px)}
.settings-page-heading{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px}
.settings-page-heading h1{margin:3px 0 0}
.settings-page-heading p{margin:7px 0 0}
.settings-hub{width:min(100%,760px)}
.settings-hub-section{margin-top:22px}
.settings-hub-section:first-of-type{margin-top:0}
.settings-hub-section>h2{margin:0 0 8px;padding-left:4px;color:var(--shell-muted);font-size:13px;font-weight:850;letter-spacing:.06em}
.settings-link-list{overflow:hidden;border:1px solid var(--shell-line);border-radius:18px;background:var(--shell-glass-strong);box-shadow:0 10px 28px rgba(23,49,92,.06)}
.settings-link-row{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:72px;padding:15px 17px;color:var(--shell-ink);text-decoration:none;transition:background var(--motion-fast) var(--ease-standard)}
.settings-link-row+.settings-link-row{border-top:1px solid var(--shell-line)}
.settings-link-row:hover,.settings-link-row:focus-visible{background:rgba(37,99,235,.08)}
.settings-link-row>span:first-child{min-width:0}
.settings-link-row strong,.settings-link-row small{display:block}
.settings-link-row strong{font-size:16px}
.settings-link-row small{margin-top:4px;color:var(--shell-muted);line-height:1.45}
.settings-chevron{flex:0 0 auto;color:var(--shell-muted);font-size:28px;font-weight:300}
.about-shell{width:min(100%,1180px)}
.about-intro{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,480px);align-items:center;justify-content:center;gap:clamp(32px,5vw,64px);padding-block:22px}
.about-brand-lockup{display:block;min-width:0}
.about-logo{display:block;width:100%;height:auto;margin:0}
.about-intro p{max-width:480px;margin:0;color:var(--shell-muted);font-size:16px;line-height:1.7}
.about-main-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:var(--panel-gap);align-items:start}
.about-main-grid>.panel{margin-bottom:0}
.about-main-grid h2{margin:0 0 14px;font-size:20px}
.privacy-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.privacy-facts article{min-width:0;padding:13px 14px;border:1px solid var(--shell-line);border-radius:13px;background:var(--shell-surface-soft)}
.privacy-facts h3{margin:0 0 7px;font-size:14px}
.privacy-facts p{margin:0;color:var(--shell-muted);font-size:13px;line-height:1.58}
.product-version-list{display:grid;grid-template-columns:112px minmax(0,1fr);gap:9px 14px;margin:0 0 15px}
.product-version-list dt{color:var(--shell-muted)}
.product-version-list dd{margin:0;font-weight:750}
.about-advanced{margin-top:14px}
.about-advanced summary{padding:12px 14px;cursor:pointer;font-weight:800}
.about-advanced dl{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 12px;margin:0;padding:0 14px 14px}
.about-advanced dt{color:var(--shell-muted)}
.about-advanced dd{min-width:0;margin:0;font-weight:700;overflow-wrap:anywhere}
.compatibility-explainer{margin-top:16px}
.compatibility-explainer dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:0}
.compatibility-explainer dl>div{min-width:0;padding:12px 13px;border:1px solid var(--shell-line);border-radius:12px;background:var(--shell-surface-soft)}
.compatibility-explainer dt{font-weight:800}
.compatibility-explainer dd{margin:4px 0 0;color:var(--shell-muted);line-height:1.5}
.local-data-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body[data-shell-page="settings-timetable"] .period-preferences-panel{padding-bottom:0}
@media(max-width:700px){
  .settings-page-heading{flex-direction:column;align-items:flex-start;gap:9px;margin-bottom:15px}
  .settings-page-heading h1{margin:0;font-size:27px}
  .settings-page-heading p{font-size:13px}
  .settings-hub-section{margin-top:18px}
  .settings-link-row{min-height:68px;padding:13px 15px}
  .settings-link-row small{font-size:13px}
  .about-intro{display:flex;flex-direction:column;align-items:center;padding:20px 17px;text-align:center}
  .about-brand-lockup{display:block;width:min(220px,68%);margin:0 auto}
  .about-logo{width:100%;margin:0}
  .about-intro p{max-width:310px;margin:0 auto;font-size:15px;line-height:1.65}
  .about-main-grid{grid-template-columns:1fr;gap:12px}
  .privacy-facts{grid-template-columns:1fr}
  .privacy-facts article{padding:12px 13px}
  .product-version-list{grid-template-columns:1fr;gap:4px}
  .product-version-list dd{margin-bottom:9px}
  .local-data-grid{grid-template-columns:1fr}
  .compatibility-explainer dl{grid-template-columns:1fr}
}
@media(min-width:701px) and (max-width:1099px){.privacy-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-color-scheme:dark){
  .shell-more-link:hover,.shell-more-link:focus-visible,.settings-link-row:hover,.settings-link-row:focus-visible{background:rgba(53,91,148,.28)}
  .settings-link-list{background:rgba(17,28,46,.94)}
  .privacy-facts article{background:rgba(25,39,62,.74)}
  body[data-shell-page="settings-timetable"] select{color:#edf4ff;background:#17243a;border-color:#455a78;color-scheme:dark}
  body[data-shell-page="settings-timetable"] select option{color:#edf4ff;background:#17243a}
  body[data-shell-page="settings-timetable"] select:disabled{color:#8290a5;background:#111d30}
}

/* First-run welcome uses the existing modal/sheet language and leaves the normal empty state underneath. */
.welcome-dialog{width:min(520px,calc(100% - 28px));max-width:520px;padding:0;border:0}
.welcome-dialog::backdrop{background:rgba(5,15,31,.62);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.welcome-dialog-body{position:relative;padding:34px;text-align:center;border-radius:25px}
.welcome-close{position:absolute;right:14px;top:14px}
.welcome-dialog .welcome-logo{width:min(260px,76%);margin:8px auto 24px}
.welcome-dialog h1{margin:0 0 8px}
.welcome-tagline{margin:0 0 10px;font-size:18px;font-weight:800}
.welcome-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.welcome-actions .button{display:flex;align-items:center;justify-content:center;min-height:48px}
@media(max-width:700px){.welcome-dialog{width:100%;max-width:none;margin:auto 0 0}.welcome-dialog-body{padding:34px 18px calc(22px + env(safe-area-inset-bottom));border-radius:25px 25px 0 0}.welcome-actions{grid-template-columns:1fr}.welcome-dialog .welcome-logo{width:min(230px,70%)}}
@media(max-width:540px){.import-preview-heading{align-items:flex-start;flex-direction:column;gap:5px}.import-reselect{min-height:36px}}

/* v0.1.0 desktop composition: one shared outer grid, with an intentional wide timetable variant. */
@media(min-width:701px){
  .shell-header,
  .shell-network,
  body[data-shell-page]>main.shell{
    width:100%;
    max-width:var(--page-max-width);
    margin-inline:auto;
    padding-left:var(--page-gutter-desktop);
    padding-right:var(--page-gutter-desktop);
  }
  body[data-shell-page="timetable"] .shell-header,
  body[data-shell-page="timetable"] .shell-network,
  body[data-shell-page="timetable"]>main.shell{
    max-width:var(--page-wide-max-width);
  }
  body[data-shell-page^="import"] main,
  body[data-shell-page="export"] main,
  body[data-shell-page="about"] main,
  .export-shell,
  .local-status-shell,
  .settings-shell,
  .settings-hub{
    width:100%;
    max-width:var(--page-max-width);
  }
  body[data-shell-page]>main.shell>.panel,
  body[data-shell-page]>main.shell>.card{
    padding:var(--panel-padding-desktop);
    margin-bottom:var(--section-gap);
  }
  body[data-shell-page="today"] .hero-card{
    display:grid;
    grid-template-columns:minmax(0,780px) minmax(220px,1fr);
    grid-template-areas:
      "date meta"
      "status meta"
      "content meta";
    column-gap:var(--hero-desktop-gap);
    align-content:start;
    min-height:224px;
    padding:28px 32px;
  }
  body[data-shell-page="today"] .hero-card>.date-bar{display:contents}
  body[data-shell-page="today"] .hero-card .date-primary{grid-area:date}
  body[data-shell-page="today"] .hero-card .date-secondary{
    grid-area:meta;
    align-self:start;
    justify-self:end;
    justify-content:flex-end;
    max-width:260px;
  }
  body[data-shell-page="today"] .hero-card .hero-top{grid-area:status;margin-top:14px}
  body[data-shell-page="today"] .hero-card .hero-content{grid-area:content;margin-top:14px;max-width:760px}
  body[data-shell-page="today"] .stats{
    grid-template-columns:repeat(3,minmax(150px,220px));
    justify-content:start;
    gap:var(--panel-gap);
    max-width:688px;
  }
  body[data-shell-page="today"] .course-row{
    grid-template-columns:96px minmax(0,1fr) auto;
    gap:18px;
  }
}

@media(min-width:1000px){
  .settings-hub{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 24px;
  }
  .settings-hub>.settings-page-heading{grid-column:1/-1;margin-bottom:0}
  .settings-hub>.settings-hub-section{margin-top:0}
}