:root {
  --bg: #f5f9ff;
  --primary: #14306b;
  --accent-cyan: #22c3e6;
  --accent-yellow: #ffd23f;
  --toy-red: #e2483a;
  --toy-green: #22a06b;
  --toy-wood: #f3c678;
  --danger: #e2483a;
  --ink: #1c2433;
  --muted: #6b7280;
}
body {
  background:
    linear-gradient(135deg, rgba(34, 195, 230, 0.035) 0 10%, transparent 10% 100%),
    linear-gradient(225deg, rgba(255, 210, 63, 0.055) 0 8%, transparent 8% 100%),
    linear-gradient(180deg, #f8fcff 0%, var(--bg) 72%, #fffaf0 100%);
  color: var(--ink);
  font-family: system-ui, sans-serif;
}
.brand-title { color: var(--primary); }

/* Teacher alert cards */
.alert { border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; font-size: 0.95rem; }
.alert-warning { background: #fff7dd; border: 1px solid rgba(255, 210, 63, 0.55); }
.alert-critical { background: #fdecea; border: 1px solid rgba(226, 72, 58, 0.32); }

/* Class matrix scatter */
.matrix { position: relative; width: 100%; height: 360px; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 12px; }
.matrix .danger-zone { position: absolute; right: 0; bottom: 0; width: 50%; height: 50%;
  background: rgba(226,72,58,0.06); border-top: 1px dashed var(--danger);
  border-left: 1px dashed var(--danger); }
.dot { position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); transform: translate(-50%, 50%); }
.dot-danger { background: var(--danger); box-shadow: 0 0 0 4px rgba(226,72,58,0.2); }

/* Parent portal */
.badge { display: inline-block; background: var(--accent-cyan); color: var(--primary);
  font-weight: 600; padding: 8px 14px; border-radius: 999px; margin: 4px; }
.replay-pane { background: #0f172a; color: #e2e8f0; font-family: ui-monospace, monospace;
  white-space: pre; padding: 16px; border-radius: 10px; min-height: 220px; }