/* ---------- Surfaces ----------
   Solid, calm surfaces replace the former translucent "glass" material:
   depth comes from the dark sidebar frame against light working surfaces,
   which stays legible in both themes and is cheaper on low-end phones. */
.card,
.stat-card,
.toolbar,
.planner-panel,
.planner-note,
.planner-summary__item,
.student-overview__panel,
.ward-card,
.assignment-card,
.certificate-card,
.notifications-card,
.notif-live,
.leaderboard-summary__item,
.progress-health,
.auth__card {
  background-color: var(--surface);
  border-color: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.command-palette,
.feedback-dialog,
.analytics-dialog,
.confirm-dialog {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.command-palette::backdrop,
.feedback-dialog::backdrop,
.analytics-dialog::backdrop,
.confirm-dialog::backdrop {
  background: var(--overlay);
}

.form-actions--sticky {
  background: var(--surface);
  border-block-start: 1px solid var(--border);
}

@media (forced-colors: active) {
  .topbar,
  .mobile-nav,
  .sidebar,
  .card,
  .stat-card,
  .toolbar,
  .planner-panel,
  .student-overview__panel,
  .ward-card,
  .assignment-card,
  .certificate-card,
  .notifications-card,
  .notif-live,
  .auth__card,
  .analytics-consent,
  .analytics-dialog {
    background: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}