/* ═══════════════════════════════════════════════════════════════
   Smart Course Scheduling — design tokens
   Light/dark via [data-theme], primary/accent/radius via CSS vars.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* primary palette: deep blue (default) */
  --primary-50:  #f1f5fa;
  --primary-100: #dbe6f1;
  --primary-200: #b7cce3;
  --primary-300: #88a8c9;
  --primary-400: #5a82af;
  --primary-500: #3a6190;
  --primary-600: #2a4a73;
  --primary-700: #1e3a5f;   /* hero */
  --primary-800: #16294a;
  --primary-900: #0e1c34;

  /* accent: amber */
  --accent-50:  #fef8ec;
  --accent-100: #fcecc7;
  --accent-200: #f8d68a;
  --accent-300: #f3b94c;
  --accent-400: #ec9f24;
  --accent-500: #d97706;   /* hero */
  --accent-600: #b45c04;
  --accent-700: #8a4406;
  --accent-800: #66330a;

  /* destructive (conflict / error) */
  --danger-50:  #fdf2f0;
  --danger-100: #fbdbd5;
  --danger-200: #f5b3a8;
  --danger-300: #ec8775;
  --danger-400: #de5d47;
  --danger-500: #c2410c;
  --danger-600: #9c310a;
  --danger-700: #6f2207;

  /* success (used in graduation progress) */
  --success-500: #15803d;
  --success-600: #14532d;

  /* warm-cool neutral grays — slightly cool */
  --gray-0:   #ffffff;
  --gray-50:  #f7f8fa;
  --gray-100: #eef0f3;
  --gray-200: #dde1e7;
  --gray-300: #c5cbd4;
  --gray-400: #9ba3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #0a0e17;

  /* semantic surfaces (light) */
  --bg:           var(--gray-50);
  --bg-elevated: var(--gray-0);
  --bg-subtle:   var(--gray-100);
  --bg-hover:    var(--gray-100);
  --border:      var(--gray-200);
  --border-strong: var(--gray-300);
  --text:        var(--gray-900);
  --text-muted:  var(--gray-600);
  --text-soft:   var(--gray-500);
  --text-on-primary: #ffffff;

  /* radius */
  --radius-sharp: 2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius:      var(--radius-md);
  --radius-card: var(--radius-lg);

  /* shadows — keep light per brief */
  --shadow-sm:  0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
  --shadow-md:  0 4px 12px -2px rgba(15,23,42,.1), 0 2px 4px -2px rgba(15,23,42,.06);
  --shadow-lg:  0 14px 30px -8px rgba(15,23,42,.18), 0 4px 8px -4px rgba(15,23,42,.08);
  --shadow-focus: 0 0 0 3px rgba(58, 97, 144, .25);

  /* type — stack only; weights & sizes via Tailwind */
  --font-sans: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;

  /* spacing scale (Tailwind compatible) — exposed for raw CSS only */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
}

/* ── Primary swap: ink green ── */
[data-primary="green"] {
  --primary-50:  #eef5f1;
  --primary-100: #d1e3d8;
  --primary-200: #a3c8b3;
  --primary-300: #6ea587;
  --primary-400: #3f8462;
  --primary-500: #2a6649;
  --primary-600: #1f5439;
  --primary-700: #1a4731;
  --primary-800: #123524;
  --primary-900: #0a2117;
}

/* ── Primary swap: plum ── */
[data-primary="plum"] {
  --primary-50:  #f6f1f7;
  --primary-100: #e6d6ea;
  --primary-200: #cdaad4;
  --primary-300: #aa78b6;
  --primary-400: #864e94;
  --primary-500: #6b3a78;
  --primary-600: #553060;
  --primary-700: #43274d;
  --primary-800: #321c39;
  --primary-900: #1f1124;
}

/* ── Primary swap: slate ── */
[data-primary="slate"] {
  --primary-50:  #f3f4f6;
  --primary-100: #dee1e7;
  --primary-200: #b8bdc9;
  --primary-300: #8a91a3;
  --primary-400: #5d6577;
  --primary-500: #424a5c;
  --primary-600: #333a4a;
  --primary-700: #262d3c;
  --primary-800: #1a202c;
  --primary-900: #0f1219;
}

/* ── Accent swaps ── */
[data-accent="amber"] {
  --accent-50:  #fef8ec;
  --accent-100: #fcecc7;
  --accent-200: #f8d68a;
  --accent-300: #f3b94c;
  --accent-400: #ec9f24;
  --accent-500: #d97706;
  --accent-600: #b45c04;
  --accent-700: #8a4406;
}
[data-accent="coral"] {
  --accent-50:  #fdf1ee;
  --accent-100: #fad8cf;
  --accent-200: #f3aa9a;
  --accent-300: #e9785f;
  --accent-400: #d9523a;
  --accent-500: #c2410c;
  --accent-600: #9c310a;
  --accent-700: #6f2207;
}
[data-accent="teal"] {
  --accent-50:  #eefaf6;
  --accent-100: #c8efe2;
  --accent-200: #8edcc1;
  --accent-300: #54c39d;
  --accent-400: #2da683;
  --accent-500: #0f8a6c;
  --accent-600: #0a6e57;
  --accent-700: #085842;
}
[data-accent="vermilion"] {
  --accent-50:  #fdf1ee;
  --accent-100: #fad8cf;
  --accent-200: #f3aa9a;
  --accent-300: #e9785f;
  --accent-400: #d9523a;
  --accent-500: #c2410c;
  --accent-600: #9c310a;
  --accent-700: #6f2207;
}
[data-accent="orange"] {
  --accent-50:  #fff1e8;
  --accent-100: #fdd7bd;
  --accent-200: #fab184;
  --accent-300: #f48342;
  --accent-400: #ed6920;
  --accent-500: #ea580c;
  --accent-600: #b8430a;
  --accent-700: #8a3309;
}

/* ── Radius variants ── */
[data-radius="sharp"]   { --radius: var(--radius-sharp); --radius-card: var(--radius-sharp); }
[data-radius="medium"]  { --radius: var(--radius-md);    --radius-card: var(--radius-lg); }
[data-radius="rounded"] { --radius: var(--radius-lg);    --radius-card: var(--radius-xl); }
[data-radius="soft"]    { --radius: var(--radius-lg);    --radius-card: var(--radius-xl); }

/* ── Density variants ── */
[data-density="compact"] {
  --row-h: 32px;
  --card-pad: 12px;
}
[data-density="comfortable"] {
  --row-h: 40px;
  --card-pad: 16px;
}

/* ── Dark theme ──
   Warm-neutral deep gray base (not cold-blue). Three clear elevation layers:
   bg (canvas) → bg-elevated (cards) → bg-subtle (inset / table headers).
   Borders stronger than before so card footprints read clearly. */
[data-theme="dark"] {
  --bg:           #0f1115;   /* canvas — near-black, slightly warm */
  --bg-elevated: #181b22;   /* cards lift above canvas */
  --bg-subtle:   #20242d;   /* inset (table headers, code, chips) */
  --bg-hover:    #262b35;
  --border:      #2c313c;   /* visible on bg-elevated */
  --border-strong: #3a414f;
  --text:        #ecedf0;
  --text-muted:  #a8adb8;   /* was #a0a5b1 — slight lift for readability */
  --text-soft:   #7c8290;   /* was #6f7582 — too dim for placeholders */
  --text-on-primary: #ffffff;

  /* Lift the entire primary/accent/danger/success ramps in dark.
     -500 is used in body text/icons/borders, -700 in solid buttons.
     Both must shift brighter so they read against the dark canvas. */
  --primary-500: #6da4dc;   /* body text / focus ring / chart bars */
  --primary-600: #5e95cd;
  --primary-700: #5589c2;   /* button bg in dark — vivid enough to feel "primary" */
  --primary-800: #4a78b0;
  --primary-900: #3c6594;

  /* Dark grays — neutral chips/avatars need a real surface, not pure light gray */
  --gray-100: #20242d;
  --gray-200: #2c313c;
  --gray-300: #3a414f;
  --gray-700: #c5cbd4;
  --gray-600: #a8adb8;
  --primary-50:  rgba(96,150,210,.12);
  --primary-100: rgba(96,150,210,.20);

  --accent-500: #f5a623;    /* body text / icons in dark */
  --accent-600: #d97706;
  --accent-700: #f5b556;    /* used as fg on tinted bg */
  --accent-50:   rgba(245,158,11,.10);
  --accent-100: rgba(245,158,11,.18);

  --danger-500: #e8745c;    /* alert text/icons in dark */
  --danger-600: #d65a42;
  --danger-700: #f0a896;    /* fg on danger tint */
  --danger-300: #f0a896;
  --danger-400: #e58874;
  --danger-50:   rgba(239,68,68,.10);
  --danger-100: rgba(239,68,68,.20);

  --success-500: #4ea876;   /* "無衝堂" text, charts, progress */
  --success-600: #5fb582;

  --shadow-sm:  0 1px 2px rgba(0,0,0,.45);
  --shadow-md:  0 6px 16px -4px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.3);
  --shadow-lg:  0 18px 40px -12px rgba(0,0,0,.6), 0 6px 12px -4px rgba(0,0,0,.35);
  --shadow-focus: 0 0 0 3px rgba(120, 165, 220, .35);
}

/* Primary swap overrides under dark — keep tonal shift consistent across hues */
[data-theme="dark"][data-primary="green"] {
  --primary-500: #5fbf8a;
  --primary-600: #4eaf7a;
  --primary-700: #3f8a63;
  --primary-800: #347051;
  --primary-50:  rgba(80,170,120,.12);
  --primary-100: rgba(80,170,120,.20);
}
[data-theme="dark"][data-primary="plum"] {
  --primary-500: #b487c4;
  --primary-600: #a378b6;
  --primary-700: #9a6cab;
  --primary-800: #7e5a90;
  --primary-50:  rgba(170,120,180,.12);
  --primary-100: rgba(170,120,180,.20);
}
[data-theme="dark"][data-primary="slate"] {
  --primary-500: #8a92a5;
  --primary-600: #7c8499;
  --primary-700: #6f7689;
  --primary-800: #5a6175;
  --primary-50:  rgba(140,150,170,.12);
  --primary-100: rgba(140,150,170,.20);
}

/* base reset on body */
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ───────── Component primitives ───────── */
.app-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition: box-shadow .15s, border-color .15s;
}
.app-card-hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.app-card-shadow { box-shadow: var(--shadow-sm); }

/* Selected app-card ring — pages hardcode rgba(58,97,144,.18) which vanishes on dark.
   This override lifts the ring + boosts the border in dark. */
[data-theme="dark"] .app-card[style*="rgba(58,97,144"] {
  box-shadow: 0 0 0 3px rgba(109, 164, 220, .28) !important;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border-radius: var(--radius);
  font-size: 14px; font-weight: 500; line-height: 1;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
  cursor: pointer; user-select: none;
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 13px; }
.btn-lg { height: 44px; padding: 0 18px; font-size: 15px; }

.btn-primary {
  background: var(--primary-700);
  color: var(--text-on-primary);
}
.btn-primary:hover { background: var(--primary-800); }
.btn-primary:active { background: var(--primary-900); }
[data-theme="dark"] .btn-primary:hover { background: #5a8ac3; }

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); }

.btn-ghost {
  background: transparent; color: var(--text-muted);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }

.btn-destructive {
  background: var(--danger-500); color: #fff;
}
.btn-destructive:hover { background: var(--danger-600); }

.btn-accent {
  background: var(--accent-500); color: #fff;
}
.btn-accent:hover { background: var(--accent-600); }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* form fields */
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label {
  font-size: 13px; font-weight: 500; color: var(--text);
}
.field-input {
  height: 36px; padding: 0 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
  width: 100%;
}
.field-input:focus { border-color: var(--primary-500); box-shadow: var(--shadow-focus); }
.field-input::placeholder { color: var(--text-soft); }
.field-help { font-size: 12px; color: var(--text-muted); }
.field-error { font-size: 12px; color: var(--danger-500); }
.field[data-state="error"] .field-input { border-color: var(--danger-400); }

/* chip / tag */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.chip:hover { background: var(--bg-hover); color: var(--text); }
.chip[data-selected="true"] {
  background: var(--primary-700); color: #fff; border-color: var(--primary-700);
}
.chip-removable .chip-x {
  display: inline-flex; width: 14px; height: 14px;
  align-items: center; justify-content: center;
  margin-right: -4px; opacity: .7;
}
.chip-removable .chip-x:hover { opacity: 1; }

/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); }
.tabs-tab {
  padding: 10px 14px;
  font-size: 14px; font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.tabs-tab:hover { color: var(--text); }
.tabs-tab[data-active="true"] {
  color: var(--primary-700); border-bottom-color: var(--primary-700);
}
[data-theme="dark"] .tabs-tab[data-active="true"] { color: #cfe1f5; border-bottom-color: #6996c8; }

/* avatar */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--primary-100);
  color: var(--primary-800);
  font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}
[data-theme="dark"] .avatar { background: var(--primary-800); color: var(--primary-100); }
.avatar-sm { width: 24px; height: 24px; font-size: 11px; }
.avatar-lg { width: 44px; height: 44px; font-size: 16px; }

/* toast */
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: 13.5px;
  min-width: 260px;
}
.toast-success { border-left: 3px solid var(--success-500); }
.toast-error   { border-left: 3px solid var(--danger-500); }
.toast-info    { border-left: 3px solid var(--primary-500); }
.toast-warning { border-left: 3px solid var(--accent-500); }

/* badges */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 7px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle); color: var(--text-muted);
}
.badge-aplus { background: var(--accent-100); color: var(--accent-700); }
[data-theme="dark"] .badge-aplus { background: rgba(245,158,11,.16); color: #f5cf85; }
.badge-conflict { background: var(--danger-100); color: var(--danger-600); }
[data-theme="dark"] .badge-conflict { background: rgba(239,90,60,.18); color: #f0a896; }

/* nav */
.nav-bar {
  height: 56px;
  display: flex; align-items: center;
  padding: 0 20px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.nav-link {
  height: 36px; padding: 0 12px;
  display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.nav-link:hover { background: var(--bg-hover); color: var(--text); }
.nav-link[data-active="true"] {
  color: var(--primary-700); background: var(--primary-50);
}
[data-theme="dark"] .nav-link[data-active="true"] { color: #cfe1f5; background: rgba(96,150,210,.18); }
[data-theme="dark"] .nav-link:hover { color: var(--text); }

/* progress */
.progress-track {
  height: 8px; width: 100%;
  background: var(--bg-subtle);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%;
  background: var(--primary-700);
  transition: width .25s ease-out;
  border-radius: 999px;
}
.progress-fill-overlay {
  position: absolute; top: 0; height: 100%;
  background: repeating-linear-gradient(45deg,
    var(--accent-300) 0 4px,
    transparent 4px 8px);
  opacity: .55;
}

/* TimeSlot Grid */
.tsg {
  display: grid;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
  user-select: none;
}
.tsg-cell {
  position: relative;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: background .08s;
  min-width: 0;
}
.tsg-cell:last-child { border-right: none; }
.tsg-cell-header, .tsg-cell-rowhead {
  background: var(--bg-subtle);
  cursor: default;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  letter-spacing: .02em;
}
.tsg-cell:hover:not([data-state="header"]):not([data-state="existing"]) {
  background: var(--bg-hover);
}
.tsg-cell[data-state="selected"]  { background: var(--primary-100); }
[data-theme="dark"] .tsg-cell[data-state="selected"] { background: rgba(58,97,144,.35); }
.tsg-cell[data-state="preview"]   { background: var(--primary-50); }
[data-theme="dark"] .tsg-cell[data-state="preview"] { background: rgba(58,97,144,.18); }
.tsg-cell[data-state="conflict"]  { background: var(--danger-100); }
[data-theme="dark"] .tsg-cell[data-state="conflict"] { background: rgba(194,65,12,.28); }
.tsg-cell[data-state="existing"]  {
  background: var(--accent-100);
  cursor: default;
  border-right-color: var(--accent-200);
  border-bottom-color: var(--accent-200);
}
[data-theme="dark"] .tsg-cell[data-state="existing"] { background: rgba(217,119,6,.22); }
.tsg-cell-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600;
  color: var(--accent-800); padding: 2px;
  text-align: center; line-height: 1.15;
  pointer-events: none;
}
[data-theme="dark"] .tsg-cell-label { color: var(--accent-200); }
.tsg-cell-conflict-x {
  position: absolute; top: 2px; right: 3px;
  width: 12px; height: 12px;
  color: var(--danger-600);
}

/* hot map overlay */
.hotmap-on .hot {
  position: relative;
  outline: 1.5px dashed rgba(217,119,6,.7);
  outline-offset: -1px;
  border-radius: 3px;
}
.hotmap-on .hot::before {
  content: attr(data-hot);
  position: absolute;
  top: -16px; left: 0;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 600;
  background: var(--accent-500); color: #fff;
  padding: 1px 4px; border-radius: 2px;
  letter-spacing: .02em;
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
}

/* small util */
.divider { height: 1px; background: var(--border); border: none; margin: 0; }
.dot { display:inline-block; width:6px; height:6px; border-radius:999px; background: currentColor; }
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 1.5px;
  border-radius: 3px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  background: var(--bg-subtle);
  color: var(--text-muted);
}

/* scrollbars */
.scroll-thin { scrollbar-width: thin; }
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }

/* artboard frames */
.artboard {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  overflow: hidden;
  position: relative;
}

/* ── Course color chips (used by ScheduleGrid in Planner & Compare) ──
   Light: low-alpha tint + dark ink, looks calm on white canvas.
   Dark : higher-alpha tint + light ink, lifts cleanly off #0e1320.
   Always uses border-on-tint so the cell footprint is legible even when bg is similar. */
.course-c0 { background: rgba(58,97,144,.14);  color: var(--primary-800); border: 1px solid rgba(58,97,144,.4);  }
.course-c1 { background: rgba(217,119,6,.14);  color: var(--accent-700);  border: 1px solid rgba(217,119,6,.4);  }
.course-c2 { background: rgba(21,128,61,.14);  color: var(--success-600); border: 1px solid rgba(21,128,61,.4);  }
.course-c3 { background: rgba(124,58,237,.12); color: #5b21b6;            border: 1px solid rgba(124,58,237,.35); }
.course-c4 { background: rgba(15,118,110,.14); color: #0f766e;            border: 1px solid rgba(15,118,110,.4); }
.course-c5 { background: rgba(190,18,60,.12);  color: #9f1239;            border: 1px solid rgba(190,18,60,.35); }
.course-c6 { background: rgba(202,138,4,.14);  color: #854d0e;            border: 1px solid rgba(202,138,4,.4);  }

/* Dark mode course tints — lower alpha + softer borders so a row of 6 colors
   doesn't read as a Christmas tree. Text is bright, not saturated. */
[data-theme="dark"] .course-c0 { background: rgba(96,150,210,.16);  color: #c8dcf2; border-color: rgba(96,150,210,.38); }
[data-theme="dark"] .course-c1 { background: rgba(245,158,11,.14);  color: #f7d99a; border-color: rgba(245,158,11,.36); }
[data-theme="dark"] .course-c2 { background: rgba(74,180,120,.16);  color: #b8e6c9; border-color: rgba(74,180,120,.38); }
[data-theme="dark"] .course-c3 { background: rgba(167,139,250,.16); color: #d6c8f5; border-color: rgba(167,139,250,.38); }
[data-theme="dark"] .course-c4 { background: rgba(60,190,175,.16);  color: #a6dfd2; border-color: rgba(60,190,175,.38); }
[data-theme="dark"] .course-c5 { background: rgba(230,120,170,.16); color: #ecbcd2; border-color: rgba(230,120,170,.38); }
[data-theme="dark"] .course-c6 { background: rgba(220,180,40,.14);  color: #ead89a; border-color: rgba(220,180,40,.36); }