/* Goal Quest — kid-friendly theme */
:root {
  --bg: #fff8f0;
  --card-bg: #ffffff;
  --primary: #6c5ce7;
  --teacher: #00b894;
  --student: #ff9f43;
  --accent: #fd79a8;
  --success: #10ac84;
  --text: #2d3436;
  --radius-card: 18px;
  --radius-btn: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Baloo 2", "Comic Sans MS", "Segoe UI Rounded", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

/* Cards */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-card);
  border: 3px solid var(--accent);
  padding: 24px;
  margin: 16px auto;
  max-width: 720px;
  box-shadow: 0 6px 18px rgba(45, 52, 54, 0.12);
}

/* Buttons */
.btn {
  display: inline-block;
  border: none;
  border-radius: var(--radius-btn);
  padding: 12px 22px;
  font-family: inherit;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(45, 52, 54, 0.18);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(45, 52, 54, 0.22); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--primary); }
.btn-teacher { background: var(--teacher); }
.btn-student { background: var(--student); }

/* Login */
.login-box {
  max-width: 420px;
  margin: 10vh auto 0;
  text-align: center;
}
.login-box h1 {
  color: var(--primary);
  font-size: 40px;
  margin-bottom: 8px;
}
.login-box .tagline { color: var(--accent); font-weight: bold; margin-bottom: 24px; }
.login-box input {
  width: 100%;
  padding: 14px 16px;
  margin: 10px 0;
  border: 3px solid var(--primary);
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 18px;
  color: var(--text);
  background: #fff;
}
.login-box input:focus { outline: none; border-color: var(--accent); }
.login-box .btn { width: 100%; margin-top: 14px; font-size: 20px; }
.login-error { color: #d63031; font-weight: bold; margin-top: 10px; }

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--primary);
  color: #fff;
  padding: 14px 24px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: 0 4px 12px rgba(45, 52, 54, 0.15);
}
.topbar .app-name { font-size: 26px; font-weight: bold; }
.topbar .user-info { display: flex; align-items: center; gap: 12px; }
.topbar .role-badge {
  background: var(--accent);
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: bold;
  text-transform: capitalize;
}
.topbar .btn { background: rgba(255, 255, 255, 0.25); }

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 16px;
  max-width: 960px;
  margin: 0 auto;
}
.grid .card { margin: 0; }

/* View placeholder */
#view { text-align: center; padding: 48px 16px; }
#view h2 { color: var(--primary); font-size: 30px; }

/* Student dashboard (T21) */
.hero {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 60%, #ffd180 100%);
  border: 3px solid var(--student);
  text-align: left;
}
.hero-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-name { font-size: 2rem; font-weight: bold; color: var(--text); }
.level-badge {
  background: var(--student);
  color: #fff;
  border-radius: 999px;
  padding: 6px 18px;
  font-weight: bold;
  font-size: 1.1rem;
  box-shadow: 0 3px 8px rgba(45, 52, 54, 0.18);
}
.xp-row { display: flex; align-items: baseline; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.xp { font-size: 1.6rem; font-weight: bold; color: var(--student); }
.xp-next { color: #8a7f72; font-weight: bold; }

.grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.path-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.path-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(45, 52, 54, 0.18); }
.path-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.path-name { font-size: 1.3rem; margin: 0; color: var(--text); }
.path-card-finished { background: linear-gradient(180deg,#f0fdf4 0%,#fff 60%); }
.path-card-finished .path-name { color: var(--success, #4caf50); }
.path-hide {
  border: 1px solid #cdebd4; background: #ecfdf5; color: #15803d;
  font-weight: 700; font-size: 0.8rem; padding: 6px 12px; border-radius: 999px;
  cursor: pointer; white-space: nowrap; transition: .15s;
}
.path-hide:hover { background: #d1fae5; transform: translateY(-1px); }
/* Collapsed "completed paths" section */
.path-hidden { margin-top: 18px; padding: 16px 18px; border-style: dashed; }
.path-hidden-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.path-hidden-title { font-weight: 700; font-size: 1rem; color: var(--text); }
.path-hidden-list { display: flex; flex-direction: column; gap: 6px; }
.path-hidden-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #f7faf8; }
.path-hidden-emoji { font-size: 1.2rem; }
.path-hidden-name { font-weight: 600; flex: 1; }

.goal-row { margin: 12px 0; }
.goal-row.done .goal-title { color: var(--success); }
.goal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.goal-title { font-weight: 600; }
.goal-meta { color: #8a7f72; font-size: 0.9rem; font-weight: bold; }

.progress {
  height: 12px;
  background: #f1e9e0;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.prizes { text-align: left; }
.prize-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.prize-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 2px solid var(--student);
  border-radius: var(--radius-btn);
  padding: 10px 16px;
  font-weight: bold;
  box-shadow: 0 3px 8px rgba(45, 52, 54, 0.1);
}
.prize-emoji { font-size: 1.8rem; }
.no-prizes, .no-goals { color: #8a7f72; font-weight: bold; }
.loading { text-align: center; color: #8a7f72; font-weight: bold; padding: 32px 0; }

/* Teacher view (T22) */
.teacher-student-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.ts-name { font-size: 1.2rem; font-weight: bold; }
.ts-meta { display: flex; gap: 10px; align-items: center; }
.ts-xp { font-weight: bold; color: #00b894; }
.level-badge.small { font-size: 0.8rem; padding: 3px 10px; }

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.toolbar-name { font-weight: bold; font-size: 1.2rem; }

.update-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.val-input, .note-input {
  padding: 8px 10px;
  border: 2px solid #e0d5c8;
  border-radius: 10px;
  font-family: inherit;
}
.val-input { width: 90px; }
/* − value + stepper: value input flanked by the bump buttons */
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper .val-input { width: 64px; text-align: center; }

/* ===== Management console (redesign) — sidebar + topbar + content ===== */
:root {
  --c-indigo:#4f46e5; --c-indigo-dark:#4338ca; --c-indigo-50:#eef2ff;
  --c-green:#16a34a; --c-green-50:#f0fdf4;
  --c-amber:#d97706; --c-amber-50:#fffbeb;
  --c-rose:#e11d48; --c-rose-50:#fff1f2;
  --c-s900:#0f172a; --c-s700:#334155; --c-s500:#64748b; --c-s400:#94a3b8;
  --c-s200:#e2e8f0; --c-s100:#f1f5f9; --c-s50:#f8fafc;
  --c-r:12px; --c-rs:8px;
  --c-shadow:0 1px 3px rgba(15,23,42,.08),0 4px 16px rgba(15,23,42,.06);
  --c-shadow-lg:0 10px 40px rgba(15,23,42,.2);
}
body.console-mode { background: var(--c-s50); }
.console { display: flex; min-height: 100vh; font-family: "Inter","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; font-size:14px; color: var(--c-s900); }
.console #view { display:flex; align-items:stretch; text-align:left; padding:0; max-width:none; width:100%; }

/* sidebar */
.c-side { width:246px; background:linear-gradient(180deg,#1e1b4b,#312e81); color:#e2e8f0; display:flex; flex-direction:column; flex-shrink:0; }
.c-brand { display:flex; align-items:center; gap:10px; padding:20px 20px 18px; }
.c-brand .c-logo { width:38px; height:38px; border-radius:11px; background:var(--c-indigo); display:flex; align-items:center; justify-content:center; font-size:20px; }
.c-brand .c-name { font-weight:700; font-size:16px; color:#fff; line-height:1.2; }
.c-brand .c-sub { font-size:11px; color:#a5b4fc; font-weight:500; }
.c-nav { padding:8px 12px; display:flex; flex-direction:column; gap:2px; }
.c-nav .c-sec-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#818cf8; padding:14px 12px 6px; font-weight:700; }
.c-nav a { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px; color:#cbd5e1; text-decoration:none; font-weight:500; font-size:13.5px; cursor:pointer; }
.c-nav a .c-ic { width:20px; text-align:center; font-size:16px; }
.c-nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.c-nav a.active { background:var(--c-indigo); color:#fff; box-shadow:0 4px 12px rgba(79,70,229,.45); }
.c-foot { margin-top:auto; padding:14px 18px; border-top:1px solid rgba(255,255,255,.08); }
.c-foot .c-who { display:flex; align-items:center; gap:10px; }
.c-avatar { width:34px; height:34px; border-radius:50%; background:#6366f1; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.c-foot .c-meta { line-height:1.25; }
.c-foot .c-meta b { color:#fff; font-size:13px; display:block; }
.c-foot .c-meta span { font-size:11px; color:#a5b4fc; }
.c-foot .c-logout { margin-top:10px; width:100%; }

/* main + topbar */
.c-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.c-top { height:64px; background:#fff; border-bottom:1px solid var(--c-s200); display:flex; align-items:center; justify-content:space-between; padding:0 28px; gap:16px; }
.c-top .c-crumb { font-size:13px; color:var(--c-s500); }
.c-top .c-crumb b { color:var(--c-s900); font-size:15px; }
.c-top .c-right { display:flex; align-items:center; gap:14px; }
.c-org { display:flex; align-items:center; gap:9px; }
.c-org .c-org-lbl { font-size:12px; color:var(--c-s500); font-weight:600; }
.c-org select { border:1.5px solid #c7d2fe; background:var(--c-indigo-50); color:var(--c-indigo-dark); border-radius:9px; padding:8px 10px; font-weight:600; font-size:13px; font-family:inherit; min-width:180px; }
.c-org select:disabled { background:var(--c-s100); color:var(--c-s500); border-color:var(--c-s200); }
.c-content { padding:26px 30px; flex:1; }

/* teacher console: goal progress cell + completed rows */
.c-progress-wrap { display:flex; align-items:center; gap:10px; }
.c-progress-wrap .progress { flex:1; }
.c-table tr.tv-row-done .c-cell-main { color:var(--c-green); }
.c-table tr.tv-row-done td { background:var(--c-green-50); }
/* single-student panel: learning-path subheading rows inside the one shared table
   (keeps every goal row across all paths in the same columns) */
.c-table tr.tv-path-head td { background:var(--c-s50); padding:11px 18px; border-top:1px solid var(--c-s200); }
.c-table tr.tv-path-head b { font-size:13.5px; color:var(--c-s900); font-weight:700; }
.tv-path-dot { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:9px; vertical-align:-1px; }
/* Status column holds either "in progress" (wide) or the "done" pill (narrow).
   With auto table layout the column is content-sized to the widest cell, so it
   collapses when the last in-progress goal flips to done and the freed space
   redistributes, nudging the XP/Status columns to the right. Pin a constant
   width (wide enough for "in progress" on one line) so the column — and every
   column before it — stays put across state changes. */
.tv-table .tv-status { width:140px; min-width:140px; white-space:nowrap; }

/* − / + bump buttons (used in the bulk path view and the single-student panel).
   Sized + centered on the bump classes themselves so they work in either container;
   `.c-btn.tvb-bump-*` is higher specificity than the base `.c-btn-*` so the
   green/red colors win. */
.tvb-bump { display:flex; align-items:center; gap:6px; justify-content:center; }
.c-btn.tvb-bump-up, .c-btn.tvb-bump-down {
  min-width:36px; padding:6px 0; font-size:15px; font-weight:700;
  justify-content:center; gap:0; line-height:1;
}
.c-btn.tvb-bump-up { background:var(--c-green); color:#fff; box-shadow:0 2px 8px rgba(22,163,74,.28); }
.c-btn.tvb-bump-up:hover { background:#15803d; }
.c-btn.tvb-bump-down { background:var(--c-rose); color:#fff; box-shadow:0 2px 8px rgba(225,29,72,.28); }
.c-btn.tvb-bump-down:hover { background:#be123c; }
.c-btn.tvb-bump-up:disabled, .c-btn.tvb-bump-down:disabled {
  background:var(--c-s200); color:var(--c-s400); box-shadow:none; cursor:not-allowed;
}
/* bulk update by path: the path-selector card body (matches other cards' height) */
.tvb-path-body { padding:16px 18px; }
.tvb-path-body select { width:100%; max-width:460px; padding:10px 12px; border:1.5px solid var(--c-s200); border-radius:var(--c-rs); font-family:inherit; font-size:14px; color:var(--c-s900); background:#fff; }
/* bulk update by path: keep the student checkbox column narrow + left-aligned
   (the 2-column table otherwise spreads its width and the checkbox cell balloons) */
.tvb-check { width:44px; min-width:44px; max-width:44px; text-align:left; }
.tvb-check input { margin:0; width:16px; height:16px; cursor:pointer; }
/* bulk update by path: one column per goal. The header holds the goal's
   title + target/XP and the − / + bump buttons (which act on all selected
   students); each student's row shows their own current value in that column,
   so no student ever has to read a comma-joined list to find their number. */
.tvb-table { min-width:640px; }
.tvb-goal-th { min-width:150px; text-align:left; }
.tvb-goal-hd { display:flex; flex-direction:column; gap:4px; }
.tvb-goal-title { font-size:12.5px; font-weight:700; color:var(--c-s900); text-transform:none; letter-spacing:0; }
.tvb-goal-meta { font-size:11px; color:var(--c-s500); font-weight:600; text-transform:none; letter-spacing:0; }
.tvb-goal-th .tvb-bump { justify-content:flex-start; margin-top:2px; }
.tvb-val { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; color:var(--c-s900); min-width:52px; }
.tvb-val-done { color:var(--c-green); }

/* section header + actions */
.c-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; gap:16px; }
.c-head h1 { font-size:22px; font-weight:700; letter-spacing:-.01em; }
.c-head p { color:var(--c-s500); font-size:13px; margin-top:4px; }
.c-head .c-acts { display:flex; gap:10px; }

/* buttons (console) */
.c-btn { display:inline-flex; align-items:center; gap:7px; border:1px solid transparent; border-radius:9px; padding:9px 15px; font-weight:600; font-size:13px; cursor:pointer; font-family:inherit; transition:.12s; }
.c-btn-primary { background:var(--c-indigo); color:#fff; box-shadow:0 2px 8px rgba(79,70,229,.28); }
.c-btn-primary:hover { background:var(--c-indigo-dark); }
.c-btn-ghost { background:#fff; color:var(--c-s700); border-color:var(--c-s200); }
.c-btn-ghost:hover { border-color:var(--c-s400); background:var(--c-s50); }
.c-btn-danger { background:var(--c-rose-50); color:var(--c-rose); border-color:#fecdd3; }
.c-btn-danger:hover { background:var(--c-rose); color:#fff; }
.c-btn-save { background:var(--c-green); color:#fff; box-shadow:0 2px 8px rgba(22,163,74,.28); }
.c-btn-save:hover { background:#15803d; }
.c-btn-sm { padding:6px 11px; font-size:12px; border-radius:7px; }

/* toolbar: search + chips */
.c-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.c-search { display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--c-s200); border-radius:9px; padding:9px 12px; min-width:260px; }
.c-search input { border:none; outline:none; font-family:inherit; font-size:13px; flex:1; background:transparent; color:var(--c-s900); }
.c-chip { display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--c-s200); border-radius:20px; padding:7px 13px; font-size:12.5px; font-weight:600; color:var(--c-s700); cursor:pointer; }
.c-chip.on { background:var(--c-indigo); color:#fff; border-color:var(--c-indigo); }
.c-chip .c-n { background:rgba(0,0,0,.06); border-radius:10px; padding:1px 7px; font-size:11px; }
.c-chip.on .c-n { background:rgba(255,255,255,.25); }

/* card / table */
.c-card { background:#fff; border:1px solid var(--c-s200); border-radius:var(--c-r); box-shadow:var(--c-shadow); overflow:hidden; }
.c-table { width:100%; border-collapse:collapse; }
.c-table thead th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-s500); font-weight:700; padding:13px 18px; background:var(--c-s50); border-bottom:1px solid var(--c-s200); white-space:nowrap; }
.c-table tbody td { padding:13px 18px; border-bottom:1px solid var(--c-s100); font-size:13.5px; vertical-align:middle; }
.c-table tbody tr:last-child td { border-bottom:none; }
.c-table tbody tr:hover { background:var(--c-s50); }
.c-row-acts { display:flex; gap:6px; justify-content:flex-end; }
.c-cell-main { font-weight:600; }
.c-cell-sub { font-size:11.5px; color:var(--c-s500); margin-top:2px; }
.c-empty { text-align:center; color:var(--c-s400); font-weight:600; padding:30px !important; }

/* role pills */
.c-pill { display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:20px; text-transform:capitalize; }
.c-pill.superadmin { background:var(--c-rose-50); color:var(--c-rose); }
.c-pill.admin { background:var(--c-indigo-50); color:var(--c-indigo-dark); }
.c-pill.teacher { background:var(--c-green-50); color:var(--c-green); }
.c-pill.student { background:var(--c-amber-50); color:var(--c-amber); }
.c-emoji-chip { width:30px; height:30px; border-radius:8px; background:var(--c-s100); display:inline-flex; align-items:center; justify-content:center; font-size:18px; }
.c-path-dot { display:inline-flex; align-items:center; gap:8px; }
.c-path-dot i { width:11px; height:11px; border-radius:4px; display:inline-block; }
.c-mut { color:var(--c-s400); }
.c-xp { font-weight:700; color:var(--c-indigo-dark); }

/* dashboard */
.c-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.c-stat { background:#fff; border:1px solid var(--c-s200); border-radius:var(--c-r); padding:18px; box-shadow:var(--c-shadow); }
.c-stat .c-k { font-size:12px; color:var(--c-s500); font-weight:600; }
.c-stat .c-v { font-size:26px; font-weight:800; letter-spacing:-.02em; margin-top:6px; }
.c-stat .c-d { font-size:11.5px; color:var(--c-s400); margin-top:4px; }
.c-grid2 { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; }
.c-panel { background:#fff; border:1px solid var(--c-s200); border-radius:var(--c-r); box-shadow:var(--c-shadow); }
.c-panel .c-ph { padding:15px 18px; border-bottom:1px solid var(--c-s100); font-weight:700; font-size:14px; }
.c-panel .c-pb { padding:8px 18px 14px; }
.c-mini { display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--c-s100); }
.c-mini:last-child { border-bottom:none; }
.c-mini .c-nm { flex:1; }
.c-mini .c-nm b { font-size:13.5px; display:block; }
.c-mini .c-nm span { font-size:11.5px; color:var(--c-s400); }
.c-quick { display:flex; flex-direction:column; gap:9px; padding:14px 18px 16px; }

/* ===== Modal (floating) ===== */
.c-modal-bg { position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; z-index:50; backdrop-filter:blur(2px); }
.c-modal { width:460px; max-width:calc(100% - 40px); max-height:90vh; overflow:auto; background:#fff; border-radius:16px; box-shadow:var(--c-shadow-lg); }
.c-modal.wide { width:520px; }
.c-mhead { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--c-s200); }
.c-mhead h2 { font-size:17px; font-weight:700; }
.c-mhead .c-x { width:30px; height:30px; border-radius:8px; border:1px solid var(--c-s200); background:#fff; cursor:pointer; color:var(--c-s500); font-size:15px; }
.c-mbody { padding:22px; display:flex; flex-direction:column; gap:15px; }
.c-field label { display:block; font-size:12.5px; font-weight:600; color:var(--c-s700); margin-bottom:6px; }
.c-field .c-hint { font-weight:400; color:var(--c-s400); }
.c-field input, .c-field select { width:100%; border:1.5px solid var(--c-s200); border-radius:9px; padding:10px 12px; font-family:inherit; font-size:13.5px; color:var(--c-s900); background:#fff; }
.c-field input:focus, .c-field select:focus { outline:none; border-color:var(--c-indigo); box-shadow:0 0 0 3px rgba(79,70,229,.12); }
.c-field input[readonly] { background:var(--c-s100); color:var(--c-s500); }
.c-grid2f { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.c-mfoot { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--c-s200); background:var(--c-s50); }
.c-mfoot .c-sp { flex:1; }
.c-merr { color:var(--c-rose); font-size:12.5px; font-weight:600; }
.c-mtitle-err { color:var(--c-rose); font-size:12.5px; margin-top:8px; }

/* ===== Goal-complete celebration (student) ===== */
/* --- Goal-complete (claim) modal — same centered layout as level-up/prize --- */
.c-modal.gcp {
  width:440px; text-align:center; padding:14px 0 8px;
  background:linear-gradient(180deg,#f5fff8 0%,#fff 100%);
  border-radius:22px;
}
.c-modal.gcp .c-mbody { display:none; }
.gcp-emoji {
  font-size:88px; line-height:1.1; margin:26px auto 6px;
  width:150px; height:150px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%,#d1fae5 0%,#86efac 60%,#34d399 100%);
  box-shadow:0 10px 30px rgba(34,197,94,.35), inset 0 0 0 6px #fff;
  animation:gcp-pop .5s ease;
}
.gcp-title { font-size:28px; font-weight:800; color:var(--c-s900); margin:10px 0 0; padding:0 24px; }
.gcp-sub { font-size:15px; color:var(--c-s600); margin:8px 0 0; padding:0 28px; min-height:1.2em; }
.gcp-xp {
  margin:18px auto 0; width:fit-content; max-width:86%;
  background:var(--c-green-50); border:1.5px solid var(--c-green);
  color:#14532d; font-weight:800; font-size:26px;
  border-radius:999px; padding:10px 26px;
}
.gcp-foot { padding:26px 30px 30px; }
/* The claim button: a big, glowing gradient pill with a travelling shine and a
   gentle pulse so it reads as "tap me" — not a flat square with a drop shadow. */
.gcp-foot .gcp-continue {
  position:relative; overflow:hidden;
  width:100%; justify-content:center; gap:9px;
  font-size:19px; font-weight:800; letter-spacing:.3px;
  padding:16px 26px; border-radius:999px; border:none; color:#fff;
  background:linear-gradient(100deg,#22c55e 0%,#16a34a 45%,#0d9488 100%);
  box-shadow:0 10px 24px rgba(16,185,129,.45), 0 2px 0 rgba(255,255,255,.25) inset;
  animation:gcp-btn-pulse 1.8s ease-in-out infinite;
}
.gcp-foot .gcp-continue:hover { filter:brightness(1.06); transform:translateY(-1px); }
.gcp-foot .gcp-continue:active { transform:translateY(1px) scale(.99); }
.gcp-foot .gcp-continue::after {
  content:""; position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);
  animation:gcp-btn-shine 2.6s ease-in-out infinite;
}
.gcp-foot .gcp-continue .gcp-btn-emoji { font-size:22px; }
@keyframes gcp-btn-pulse {
  0%,100% { box-shadow:0 10px 24px rgba(16,185,129,.40), 0 2px 0 rgba(255,255,255,.25) inset; }
  50% { box-shadow:0 14px 34px rgba(16,185,129,.65), 0 2px 0 rgba(255,255,255,.30) inset; }
}
@keyframes gcp-btn-shine { 0% { left:-60%; } 55%,100% { left:130%; } }
@keyframes gcp-pop { 0% { transform:scale(.3); opacity:0; } 65% { transform:scale(1.12); opacity:1; } 100% { transform:scale(1); } }

/* --- Level-up reveal modal (two-phase: star -> emoji) --- */
.c-modal.lvu {
  width:440px; text-align:center; padding:14px 0 8px;
  background:linear-gradient(180deg,#fffdf7 0%,#fff 100%);
  border-radius:22px;
}
.lvu-emoji {
  font-size:88px; line-height:1.1; margin:26px auto 6px;
  width:150px; height:150px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%,#fff3c4 0%,#ffe08a 60%,#ffd24d 100%);
  box-shadow:0 10px 30px rgba(255,180,40,.35), inset 0 0 0 6px #fff;
  animation:lvu-in .45s ease;
}
.lvu-emoji.lvu-revealed { animation:lvu-reveal .55s cubic-bezier(.2,1.4,.4,1); }
.lvu-title { font-size:28px; font-weight:800; color:var(--c-s900); margin:10px 0 0; padding:0 24px; }
.lvu-sub { font-size:15px; color:var(--c-s600); margin:8px 0 0; padding:0 28px; min-height:1.2em; }
.lvu-xpnext {
  margin:18px auto 0; width:fit-content; max-width:86%;
  background:var(--c-amber-50); border:1.5px solid var(--c-amber);
  color:#8a5a00; font-weight:700; font-size:15px;
  border-radius:999px; padding:9px 22px;
}
.lvu-xpnext.top { background:var(--c-green-50); border-color:var(--c-green); color:#14532d; }
.lvu-foot { padding:22px 30px 26px; }
.lvu-btn {
  width:100%; justify-content:center; font-size:18px; font-weight:700;
  padding:14px 26px; border-radius:14px; letter-spacing:.2px;
}
@keyframes lvu-in { 0% { transform:scale(.3); opacity:0; } 65% { transform:scale(1.12); opacity:1; } 100% { transform:scale(1); } }
@keyframes lvu-reveal { 0% { transform:scale(.6) rotate(-14deg); } 60% { transform:scale(1.18) rotate(6deg); } 100% { transform:scale(1) rotate(0deg); } }

/* --- Prize-reveal modal (two-phase: "?" -> prize emoji) --- */
.c-modal.prr {
  width:440px; text-align:center; padding:14px 0 8px;
  background:linear-gradient(180deg,#fff8f4 0%,#fff 100%);
  border-radius:22px;
}
.prr-emoji {
  font-size:88px; line-height:1.1; margin:26px auto 6px;
  width:150px; height:150px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%,#ffe7d6 0%,#ffbf94 60%,#ff9f5e 100%);
  box-shadow:0 10px 30px rgba(255,140,70,.35), inset 0 0 0 6px #fff;
  animation:lvu-in .45s ease;
}
.prr-emoji.prr-q { color:#b45309; font-weight:800; }
.prr-emoji.prr-revealed { animation:lvu-reveal .55s cubic-bezier(.2,1.4,.4,1); }
.prr-title { font-size:26px; font-weight:800; color:var(--c-s900); margin:10px 0 0; padding:0 24px; }
.prr-sub { font-size:15px; color:var(--c-s600); margin:8px 0 0; padding:0 28px; min-height:1.2em; }
.prr-desc { font-size:15px; color:var(--c-s700); margin:14px auto 0; max-width:86%; line-height:1.45; }
.prr-foot { padding:22px 30px 26px; }
.prr-btn {
  width:100%; justify-content:center; font-size:18px; font-weight:700;
  padding:14px 26px; border-radius:14px; letter-spacing:.2px;
}

/* --- XP reward modal (direct teacher XP): amount + reason --- */
.c-modal.xpr {
  width:440px; text-align:center; padding:14px 0 8px;
  background:linear-gradient(180deg,#f6f5ff 0%,#fff 100%);
  border-radius:22px;
}
.xpr-emoji {
  font-size:88px; line-height:1.1; margin:26px auto 6px;
  width:150px; height:150px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%,#e0e7ff 0%,#a5b4fc 60%,#6366f1 100%);
  box-shadow:0 10px 30px rgba(79,70,229,.32), inset 0 0 0 6px #fff;
  animation:gcp-pop .5s ease;
}
.xpr-title { font-size:26px; font-weight:800; color:var(--c-s900); margin:10px 0 0; padding:0 24px; }
.xpr-xp {
  margin:18px auto 0; width:fit-content; max-width:86%;
  background:var(--c-indigo-50); border:1.5px solid var(--c-indigo);
  color:var(--c-indigo-dark); font-weight:800; font-size:26px;
  border-radius:999px; padding:10px 26px;
}
.xpr-reason { font-size:15px; color:var(--c-s700); margin:14px auto 0; max-width:86%; line-height:1.45; padding:0 12px; }
.xpr-foot { padding:22px 30px 26px; }
.xpr-btn {
  width:100%; justify-content:center; font-size:18px; font-weight:700;
  padding:14px 26px; border-radius:14px; letter-spacing:.2px;
}

/* Level badge in the student hero now carries the level's emoji */
.level-badge { display:inline-flex; align-items:center; gap:8px; }
.level-badge-emoji { font-size:1.35rem; line-height:1; }

/* role segmented control */
.c-seg { display:flex; gap:6px; flex-wrap:wrap; }
.c-seg .c-opt { flex:1; min-width:72px; text-align:center; border:1.5px solid var(--c-s200); border-radius:9px; padding:9px 6px; font-size:12.5px; font-weight:600; color:var(--c-s500); cursor:pointer; text-transform:capitalize; }
.c-seg .c-opt.on { border-color:var(--c-indigo); background:var(--c-indigo-50); color:var(--c-indigo-dark); }

/* emoji picker */
.c-emod { position:relative; }
.c-emod .c-trig { width:100%; display:flex; align-items:center; justify-content:space-between; border:1.5px solid var(--c-s200); border-radius:9px; padding:9px 12px; cursor:pointer; background:#fff; }
.c-emod .c-trig .c-em { font-size:18px; }
.c-emod .c-panel { position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid var(--c-s200); border-radius:12px; box-shadow:var(--c-shadow-lg); padding:12px; z-index:10; }
.c-emod .c-panel .c-plt { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-s400); font-weight:700; margin-bottom:9px; }
.c-emogrid { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; max-height:150px; overflow:auto; }
.c-emogrid span { width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:19px; border-radius:7px; cursor:pointer; }
.c-emogrid span:hover { background:var(--c-indigo-50); }
.c-emogrid span.sel { background:var(--c-indigo); }

/* color swatches */
.c-swatches { display:flex; gap:8px; flex-wrap:wrap; }
.c-sw { width:30px; height:30px; border-radius:8px; cursor:pointer; border:2px solid transparent; }
.c-sw.on { border-color:var(--c-s900); box-shadow:0 0 0 2px #fff inset; }

/* ===== Legacy admin (T23) compat — kept for tests, unused by console ===== */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  justify-content: center;
}
.tab {
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  color: var(--primary);
  background: #fff;
  border: 2px solid var(--primary);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}
.tab:hover { transform: translateY(-2px); }
.tab.active { background: var(--primary); color: #fff; }

.admin-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
}
.field {
  padding: 10px 12px;
  border: 2px solid #e0d5c8;
  border-radius: 10px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  background: #fff;
}
.field:focus { outline: none; border-color: var(--primary); }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.admin-table th, .admin-table td {
  padding: 10px 12px;
  border-bottom: 2px solid #f1e9e0;
}
.admin-table th { color: var(--primary); font-size: 0.95rem; }
.row-actions { display: flex; gap: 8px; align-items: center; }
.row-actions .btn { padding: 6px 14px; font-size: 14px; }
.admin-edit { background: #f0ad4e; color: #fff; }
.admin-edit:hover { background: #e09b3d; }

.scope-card { max-width: 720px; }
.scope-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f3f0ff;
  border: 2px solid var(--primary);
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: bold;
}
.scope-chip .btn { padding: 2px 10px; font-size: 12px; }

/* U3 — goal activation: reveal + glow */
.goal-card { position: relative; margin: 12px 0; }
/* A reached, not-yet-activated goal is tappable; the claim CTA pill is the
   affordance (no surrounding glow/dropshadow on the card itself). */
.goal-card.tap-hint { cursor: pointer; }
.goal-card.revealing { animation: reveal-burst 0.8s ease-out; }
@keyframes reveal-burst {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.goal-card.revealing::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,215,0,0.45) 0%, transparent 70%);
  animation: confetti-fade 0.8s ease-out forwards;
}
@keyframes confetti-fade {
  0% { opacity: 1; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(2.2); }
}
.goal-card.activated { opacity: 0.75; border-color: #4caf50; }
.activated-badge {
  position: absolute; top: 6px; right: 8px; background: #4caf50; color: #fff;
  border-radius: 50%; width: 22px; height: 22px; display: flex;
  align-items: center; justify-content: center; font-size: 0.9rem;
}
/* The "claim" call-to-action shown under a completed (not yet activated) goal.
   A glowing green gradient pill — the in-path equivalent of the claim-modal
   button — with a soft pulse so it reads as "tap me". */
.claim-cta {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin-top: 12px;
  border: none; border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 0.95rem; font-weight: 800; letter-spacing: .2px; color: #fff;
  padding: 12px 16px;
  background: linear-gradient(100deg,#22c55e 0%,#16a34a 45%,#0d9488 100%);
  box-shadow: 0 8px 18px rgba(16,185,129,.45);
  animation: claim-cta-pulse 1.6s ease-in-out infinite;
}
.claim-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.claim-cta:active { transform: translateY(1px) scale(.99); }
.claim-cta::after {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform: skewX(-18deg);
  animation: claim-cta-shine 2.4s ease-in-out infinite;
}
.claim-cta-spark { font-size: 1.1rem; }
@keyframes claim-cta-pulse {
  0%,100% { box-shadow: 0 8px 18px rgba(16,185,129,.40); }
  50% { box-shadow: 0 12px 26px rgba(16,185,129,.65); }
}
@keyframes claim-cta-shine { 0% { left: -60%; } 55%,100% { left: 130%; } }
#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: #4f46e5; color: #fff; padding: 10px 18px; border-radius: 22px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25); z-index: 99; opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }