:root {
  color-scheme: light;
  --bg: #f4f7fb;
  --card: rgba(255, 255, 255, 0.92);
  --text: #111827;
  --muted: #667085;
  --line: #d9e2ef;
  --primary: #0f2a5f;
  --primary-2: #174ea6;
  --success: #0f8a5f;
  --danger: #c2410c;
  --shadow: 0 18px 50px rgba(15, 42, 95, 0.12);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: radial-gradient(circle at top, #dce9ff 0, var(--bg) 42%, #eef3f9 100%);
  color: var(--text);
}
.app-shell { width: min(100%, 760px); margin: 0 auto; padding: 18px 14px 42px; }
.card {
  background: var(--card); border: 1px solid rgba(217, 226, 239, 0.8); border-radius: 24px;
  box-shadow: var(--shadow); padding: 20px; margin: 14px 0; backdrop-filter: blur(12px);
}
.hero { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.eyebrow { color: var(--primary-2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px; }
h1, h2 { margin: 0 0 10px; }
h1 { font-size: clamp(28px, 8vw, 44px); }
h2 { font-size: 20px; }
.subtitle, .summary, .notice { color: var(--muted); margin: 0; line-height: 1.6; }
.status-pill { white-space: nowrap; border-radius: 999px; padding: 8px 12px; background: #edf4ff; color: var(--primary); font-weight: 700; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
label { display: grid; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 700; }
input, textarea, select {
  width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px;
  font: inherit; color: var(--text); background: #fff; outline: none;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--primary-2); box-shadow: 0 0 0 4px rgba(23, 78, 166, 0.12); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
button {
  border: 0; border-radius: 16px; padding: 13px 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
}
button.ghost { background: #eef4ff; color: var(--primary); }
button.small { padding: 8px 12px; border-radius: 12px; font-size: 13px; }
button:disabled { opacity: 0.55; cursor: not-allowed; }
.hidden { display: none; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.courses, .orders { display: grid; gap: 10px; margin-top: 12px; }
.course-card, .order-card { border: 1px solid var(--line); border-radius: 18px; padding: 14px; background: #fff; }
.course-card { cursor: pointer; }
.course-card.selected { border-color: var(--primary-2); background: #edf4ff; }
.meta { color: var(--muted); font-size: 13px; line-height: 1.6; word-break: break-all; }
.success { color: var(--success); }
.danger { color: var(--danger); }
@media (min-width: 680px) { .form-grid { grid-template-columns: 1fr 1fr; } .full { grid-column: 1 / -1; } }