/* Lumen Chen's existing light material system, adapted for a reading workspace. */
.inactive-course { opacity: .67; }
:root {
  --bg: #f3f5f7;
  --paper: rgba(255, 255, 255, 0.66);
  --ink: #07111f;
  --muted: #596c7d;
  --line: rgba(7, 17, 31, 0.12);
  --green: #193c59;
  --mint: #edf3f7;
  --sand: #eff3f7;
  --radius: 22px;
}
body {
  background:
    radial-gradient(
      68rem 46rem at 50% -18rem,
      rgba(173, 202, 224, 0.4),
      transparent 65%
    ),
    linear-gradient(145deg, #fbfcfd 0%, #eef2f5 52%, #f8fafb 100%);
  font-family:
    var(--study-font, -apple-system, BlinkMacSystemFont, "Segoe UI"),
    "PingFang SC", Arial, sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: auto -15rem -25rem auto;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(107, 30, 50, 0.045),
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}
.sidebar {
  background: rgba(248, 250, 251, 0.72);
  backdrop-filter: blur(20px);
}
.brand {
  letter-spacing: 0.22em;
  font-weight: 500;
}
.brand-mark {
  background: transparent;
  color: #0b2942;
  font-style: normal;
  font-family: inherit;
  border: 1px solid rgba(7, 17, 31, 0.14);
  border-radius: 50%;
  font-size: 21px;
}
.topbar {
  background: linear-gradient(
    to bottom,
    rgba(248, 250, 251, 0.78),
    rgba(248, 250, 251, 0.2)
  );
  backdrop-filter: blur(10px);
}
.nav-item.active,
.course-link.active {
  background: rgba(173, 202, 224, 0.24);
  color: #0b2942;
}
.nav-item:hover,
.course-link:hover {
  background: rgba(173, 202, 224, 0.14);
}
.semester-label {
  color: #667a8e;
  font-size: 9px;
  letter-spacing: 0.2em;
}
#course-count {
  background: #e6edf2;
}
.course-label,
.course-link {
  color: #52677a;
}
.course-link.active .dot {
  box-shadow: 0 0 0 3px rgba(143, 188, 218, 0.15);
}
h1 {
  font-size: 34px;
  letter-spacing: -0.045em;
  font-weight: 550;
}
h2 {
  font-weight: 550;
  letter-spacing: -0.035em;
}
.eyebrow {
  color: #6b1e32;
  letter-spacing: 0.23em;
  font-size: 9px;
}
.page-heading {
  margin-bottom: 30px;
}
.page-heading p {
  line-height: 1.8;
}
.card {
  border: 1px solid rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.52);
  box-shadow:
    0 12px 36px rgba(15, 42, 61, 0.035),
    inset 0 1px 0 #fff;
  backdrop-filter: blur(20px);
}
.summary-card:first-child {
  background: linear-gradient(
    135deg,
    rgba(213, 231, 241, 0.65),
    rgba(255, 255, 255, 0.72)
  );
  border-color: rgba(255, 255, 255, 0.8);
}
.stat-number {
  font-weight: 500;
  letter-spacing: -0.06em;
}
.progress-track {
  background: rgba(25, 60, 89, 0.11);
}
.progress-fill {
  background: linear-gradient(90deg, #193c59, #6097b9);
}
.task {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(7, 17, 31, 0.08);
  border-radius: 15px;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.task:hover {
  border-color: rgba(25, 60, 89, 0.24);
}
.task.done {
  background: rgba(224, 236, 243, 0.38);
}
.task.done .task-title {
  color: #6b8090;
}
.task-check {
  border-color: #adbecc;
}
.task-check:checked {
  background: #193c59;
  border-color: #193c59;
}
.task summary {
  color: #486f89;
}
.task-title {
  font-weight: 500;
}
.pill {
  background: rgba(173, 202, 224, 0.2);
  color: #3a607b;
}
.text-button {
  color: #214f70;
}
.button {
  border-radius: 999px;
  background: #0b2942;
  font-weight: 500;
  padding: 10px 18px;
}
.button:hover {
  background: #173e5c;
}
.button.soft {
  background: #deebf3;
  color: #173e5c;
}
.button.secondary {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(7, 17, 31, 0.12);
}
.note-card {
  background: linear-gradient(
    135deg,
    rgba(236, 243, 248, 0.9),
    rgba(255, 255, 255, 0.68)
  );
  border-color: rgba(255, 255, 255, 0.9);
}
.note-card .eyebrow {
  color: #6b1e32;
}
.note-card p {
  color: #5c7082;
}
.mini-row {
  border-color: var(--line);
}
.workflow li:before {
  background: #e5edf3;
  color: #193c59;
}
.empty {
  border-color: #c5d5e0;
  background: rgba(227, 237, 244, 0.4);
  color: #526d83;
}
.notice,
.answer {
  background: rgba(222, 235, 244, 0.6);
  color: #405f77;
}
.notice {
  border: 1px solid rgba(25, 60, 89, 0.06);
}
.course-card:hover,
.resource:hover {
  border-color: #abc4d5;
}
.tab.active {
  color: #0b2942;
  border-color: #6b1e32;
}
.field input,
.field textarea {
  border-color: #cbd7e0;
  background: rgba(255, 255, 255, 0.75);
}
.practice-output {
  border-color: #6097b9;
}
.status-dot {
  background: #668ead;
}
.search-label input {
  background: rgba(255, 255, 255, 0.75);
}
footer {
  color: #738699;
}
#toast {
  background: #0b2942;
}
.sidebar-bottom {
  color: #64788a;
}
.skip-link {
  color: #0b2942;
}
.status-warning {
  color: #a14732;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: #79aacb;
}
body.embedded .brand {
  display: none;
}
body.embedded .sidebar {
  padding-top: 18px;
}
body.embedded .semester-label {
  margin-top: 14px;
}
body.embedded .topbar-right a {
  display: none;
}
@media (max-width: 650px) {
  h1 {
    font-size: 29px;
  }
  .sidebar {
    padding-top: 15px;
  }
  body.embedded .sidebar {
    padding-top: 0;
  }
  .page-heading {
    margin-bottom: 24px;
  }
  .card {
    border-radius: 18px;
  }
  .nav-item {
    font-size: 12px;
  }
  .course-card {
    border-radius: 18px;
  }
  .topbar-right {
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}