:root {
  --surface-sky: #f1f7ff;
  --surface-ice: #effafb;
  --surface-mint: #f0faf5;
  --surface-lilac: #f6f3ff;
  --surface-sun: #fff8ec;
  --surface-rose: #fff4f6;
  --surface-border: #d8e6f1;
  --surface-shadow: 0 14px 34px rgba(45, 83, 116, .08);
}

/* The interface stays predominantly white; these quiet washes separate
   sections without competing with learning content. */
body {
  background:
    radial-gradient(circle at 6% 12%, rgba(91, 134, 229, .10), transparent 24rem),
    radial-gradient(circle at 94% 30%, rgba(54, 209, 220, .09), transparent 27rem),
    radial-gradient(circle at 73% 88%, rgba(60, 190, 139, .07), transparent 25rem),
    linear-gradient(180deg, #eef6ff 0%, #f8fbff 48%, #eef8f7 100%);
  background-attachment: fixed;
}

header {
  background: linear-gradient(90deg, rgba(255, 255, 255, .94), rgba(246, 250, 255, .92) 55%, rgba(243, 252, 249, .93));
  border-bottom-color: rgba(89, 137, 176, .15);
  box-shadow: 0 5px 20px rgba(47, 86, 122, .045);
}

.card,
.accordion-item,
.glass-panel {
  background: linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(246, 250, 255, .96));
  border-color: var(--surface-border);
  box-shadow: var(--surface-shadow);
}

.page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.45rem 1.25rem;
  border: 1px solid rgba(140, 180, 211, .19);
  border-radius: 24px;
  background: linear-gradient(120deg, rgba(248, 251, 255, .82), rgba(235, 248, 252, .72), rgba(241, 250, 246, .76));
}

.page-header::before,
.page-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.page-header::before {
  width: 11rem;
  height: 11rem;
  right: -4rem;
  top: -6rem;
  background: rgba(77, 200, 210, .13);
}

.page-header::after {
  width: 8rem;
  height: 8rem;
  left: -3rem;
  bottom: -5rem;
  background: rgba(91, 134, 229, .10);
}

/* Forms and workspaces: a restrained color edge makes neighboring panels
   easier to scan while keeping their working areas neutral. */
.problem-panel {
  background: linear-gradient(150deg, #ffffff 0%, var(--surface-sky) 100%);
  border-top: 4px solid #5b8fe5;
}

.editor-panel {
  background: linear-gradient(150deg, #ffffff 0%, var(--surface-lilac) 100%);
  border-top: 4px solid #806dd7;
}

.login-card,
.register-card,
.identity-card,
.profile-card {
  background: linear-gradient(145deg, #ffffff 0%, var(--surface-sky) 74%, var(--surface-mint) 100%);
  border-top: 4px solid #5b8fe5;
  box-shadow: 0 24px 55px rgba(53, 93, 128, .12);
}

input,
textarea,
select {
  border-color: #d6e3ed;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #72a6e8;
  box-shadow: 0 0 0 4px rgba(91, 134, 229, .10);
  outline: none;
}

/* Repeated information uses a small, predictable pastel palette. */
.metric-grid > .metric-card.blue,
.course-dashboard > .course-metric:nth-child(4n + 1),
.learning-overview-metrics > .learning-overview-metric:nth-child(4n + 1),
.admin-stats > .card:nth-child(4n + 1) {
  background: linear-gradient(145deg, #ffffff 12%, var(--surface-sky) 100%);
  border-color: #cfe2f6;
}

.metric-grid > .metric-card.cyan,
.course-dashboard > .course-metric:nth-child(4n + 2),
.learning-overview-metrics > .learning-overview-metric:nth-child(4n + 2),
.admin-stats > .card:nth-child(4n + 2) {
  background: linear-gradient(145deg, #ffffff 12%, var(--surface-ice) 100%);
  border-color: #ccebed;
}

.metric-grid > .metric-card.green,
.course-dashboard > .course-metric:nth-child(4n + 3),
.learning-overview-metrics > .learning-overview-metric:nth-child(4n + 3),
.admin-stats > .card:nth-child(4n + 3) {
  background: linear-gradient(145deg, #ffffff 12%, var(--surface-mint) 100%);
  border-color: #cfeadc;
}

.metric-grid > .metric-card.orange,
.course-dashboard > .course-metric:nth-child(4n + 4),
.learning-overview-metrics > .learning-overview-metric:nth-child(4n + 4),
.admin-stats > .card:nth-child(4n + 4) {
  background: linear-gradient(145deg, #ffffff 12%, var(--surface-sun) 100%);
  border-color: #f0dfbd;
}

.metric-grid > .metric-card.purple {
  background: linear-gradient(145deg, #ffffff 12%, var(--surface-lilac) 100%);
  border-color: #ddd5f4;
}

.course-grid > .course-card:nth-child(4n + 1),
.knowledge-grid > .knowledge-card:nth-child(4n + 1) {
  background: linear-gradient(150deg, #ffffff 24%, var(--surface-sky) 100%);
  border-top: 3px solid #79a9e8;
}

.course-grid > .course-card:nth-child(4n + 2),
.knowledge-grid > .knowledge-card:nth-child(4n + 2) {
  background: linear-gradient(150deg, #ffffff 24%, var(--surface-mint) 100%);
  border-top: 3px solid #65c49d;
}

.course-grid > .course-card:nth-child(4n + 3),
.knowledge-grid > .knowledge-card:nth-child(4n + 3) {
  background: linear-gradient(150deg, #ffffff 24%, var(--surface-lilac) 100%);
  border-top: 3px solid #9b88dc;
}

.course-grid > .course-card:nth-child(4n + 4),
.knowledge-grid > .knowledge-card:nth-child(4n + 4) {
  background: linear-gradient(150deg, #ffffff 24%, var(--surface-sun) 100%);
  border-top: 3px solid #e2b65f;
}

.community-toolbar,
.weekly-course-plan {
  background: linear-gradient(125deg, rgba(242, 248, 255, .96), rgba(239, 250, 247, .96));
  border-color: #cfe2ed;
}

.detail-layout > .card:first-child {
  background: linear-gradient(150deg, #ffffff 0%, var(--surface-sky) 100%);
}

.teacher-sidebar,
.admin-nav {
  background: linear-gradient(180deg, #ffffff, var(--surface-sky));
  border: 1px solid var(--surface-border);
}

.teacher-content,
.admin-panel {
  background: linear-gradient(150deg, #ffffff 0%, #fbfdff 60%, var(--surface-mint) 160%);
  border: 1px solid var(--surface-border);
}

.overview-grid > section:nth-child(odd),
.analytics-side > section:nth-child(odd) {
  background: linear-gradient(145deg, #ffffff, var(--surface-sky));
}

.overview-grid > section:nth-child(even),
.analytics-side > section:nth-child(even) {
  background: linear-gradient(145deg, #ffffff, var(--surface-mint));
}

table thead,
table thead th {
  background: #edf6ff;
}

table tbody tr:nth-child(even) {
  background: rgba(241, 247, 253, .52);
}

@media (max-width: 640px) {
  body {
    background-attachment: scroll;
  }

  .page-header {
    padding: 1.15rem .8rem;
    border-radius: 18px;
  }

  .page-header::before,
  .page-header::after {
    opacity: .65;
  }
}