/* ── LearnBright v1.0.3 ─────────────────────────────────────────────────── */
:root {
  --green:      #27ae60;
  --green-dark: #219150;
  --green-lt:   #e8f8ef;
  --blue:       #2980b9;
  --blue-lt:    #ebf5fb;
  --orange:     #e67e22;
  --red:        #e74c3c;
  --purple:     #6C63FF;
  --yellow:     #f1c40f;
  --gray-50:    #f9fafb;
  --gray-100:   #f3f4f6;
  --gray-200:   #e5e7eb;
  --gray-300:   #d1d5db;
  --gray-400:   #9ca3af;
  --gray-500:   #6b7280;
  --gray-600:   #4b5563;
  --gray-700:   #374151;
  --gray-800:   #1f2937;
  --gray-900:   #111827;
  --white:      #ffffff;
  --radius:     8px;
  --radius-lg:  12px;
  --shadow:     0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);
  --transition: 200ms ease;
  --sidebar-w:  240px;
  --header-h:   60px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { margin:0; padding:0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:15px; color:var(--gray-800); background:var(--gray-50); line-height:1.5; }
a { color:var(--green); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; }
input,select,textarea,button { font-family:inherit; font-size:inherit; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:var(--radius); font-weight:600; font-size:.88rem; cursor:pointer; border:none; transition:all var(--transition); text-decoration:none; white-space:nowrap; }
.btn:hover { text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-primary   { background:var(--green);  color:#fff; }
.btn-primary:hover { background:var(--green-dark); }
.btn-blue      { background:var(--blue);   color:#fff; }
.btn-blue:hover{ background:#2471a3; }
.btn-danger    { background:var(--red);    color:#fff; }
.btn-danger:hover{ background:#c0392b; }
.btn-ghost     { background:var(--white);  color:var(--gray-700); border:1px solid var(--gray-300); }
.btn-ghost:hover{ background:var(--gray-100); }
.btn-orange    { background:var(--orange); color:#fff; }
.btn-sm        { padding:5px 12px; font-size:.8rem; }
.btn-lg        { padding:13px 28px; font-size:1rem; }
.btn-icon      { padding:8px; width:36px; height:36px; justify-content:center; }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:var(--radius); margin-bottom:14px; font-size:.88rem; line-height:1.5; }
.alert-success { background:#d1fae5; border:1px solid #6ee7b7; color:#065f46; }
.alert-error   { background:#fee2e2; border:1px solid #fca5a5; color:#991b1b; }
.alert-info    { background:#dbeafe; border:1px solid #93c5fd; color:#1e40af; }
.alert-warning { background:#fef3c7; border:1px solid #fcd34d; color:#92400e; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card { background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }
.card-header { padding:16px 20px; border-bottom:1px solid var(--gray-100); display:flex; align-items:center; justify-content:space-between; }
.card-header h3 { font-size:1rem; font-weight:700; color:var(--gray-800); }
.card-body  { padding:20px; }
.card-body p { color:var(--gray-500); font-size:.88rem; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-group  { margin-bottom:16px; }
.form-label  { display:block; font-weight:600; font-size:.85rem; color:var(--gray-700); margin-bottom:6px; }
.form-control { display:block; width:100%; padding:9px 12px; border:1px solid var(--gray-300); border-radius:var(--radius); font-size:.92rem; color:var(--gray-800); background:var(--white); outline:none; transition:border-color var(--transition),box-shadow var(--transition); }
.form-control:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(39,174,96,.15); }
.form-hint { font-size:.78rem; color:var(--gray-400); margin-top:4px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table-wrap { background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th { background:var(--gray-50); padding:12px 16px; text-align:left; font-size:.8rem; font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--gray-200); }
tbody td { padding:12px 16px; border-bottom:1px solid var(--gray-100); font-size:.88rem; color:var(--gray-700); }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:var(--gray-50); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:.72rem; font-weight:700; }
.badge-green  { background:var(--green-lt); color:var(--green); }
.badge-blue   { background:var(--blue-lt);  color:var(--blue); }
.badge-red    { background:#fee2e2; color:var(--red); }
.badge-gray   { background:var(--gray-100); color:var(--gray-500); }
.badge-orange { background:#fef3c7; color:var(--orange); }

/* ── Modals ───────────────────────────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal { background:#fff; border-radius:var(--radius-lg); width:100%; max-width:520px; box-shadow:var(--shadow-lg); max-height:90vh; overflow-y:auto; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--gray-200); }
.modal-header h3 { font-size:1.05rem; font-weight:700; }
.modal-close { background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--gray-400); padding:4px; line-height:1; }
.modal-close:hover { color:var(--gray-800); }
.modal-body   { padding:20px 24px; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--gray-200); display:flex; justify-content:flex-end; gap:10px; }

/* ── Toggle ───────────────────────────────────────────────────────────────── */
.toggle-switch { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:var(--gray-300); border-radius:24px; transition:var(--transition); }
.toggle-slider::before { position:absolute; content:""; height:18px; width:18px; left:3px; bottom:3px; background:white; border-radius:50%; transition:var(--transition); }
input:checked + .toggle-slider { background:var(--green); }
input:checked + .toggle-slider::before { transform:translateX(20px); }
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--gray-100); }
.toggle-row:last-child { border-bottom:none; }
.toggle-label { font-weight:600; font-size:.9rem; }

/* ── Info grid ────────────────────────────────────────────────────────────── */
.info-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.info-item { display:flex; flex-direction:column; gap:2px; }
.info-label { font-size:.75rem; color:var(--gray-400); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.info-val   { font-size:.92rem; font-weight:600; color:var(--gray-800); }

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.stat-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; }
.stat-card { background:var(--white); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow); text-align:center; }
.stat-icon { font-size:1.8rem; margin-bottom:8px; }
.stat-val  { font-size:2rem; font-weight:800; color:var(--gray-800); }
.stat-label{ font-size:.8rem; color:var(--gray-400); font-weight:600; text-transform:uppercase; margin-top:4px; }

/* ── Admin layout ─────────────────────────────────────────────────────────── */
.admin-body { background:var(--gray-50); }
.admin-topbar { position:fixed; top:0; left:0; right:0; height:var(--header-h); background:var(--green); display:flex; align-items:center; padding:0 20px; z-index:100; box-shadow:var(--shadow-md); }
.admin-logo { color:#fff; font-size:1.1rem; font-weight:800; }
.admin-topbar-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.admin-topbar-right a { color:rgba(255,255,255,.85); font-size:.85rem; text-decoration:none; }
.admin-topbar-right a:hover { color:#fff; }
.admin-layout { display:flex; padding-top:var(--header-h); min-height:100vh; }
.admin-sidebar { width:220px; min-width:220px; background:var(--white); border-right:1px solid var(--gray-200); overflow-y:auto; z-index:50; display:flex; flex-direction:column; }
.sidebar-nav { padding:12px 0; }
.sidebar-section { padding:10px 16px 3px; font-size:.68rem; font-weight:700; color:var(--gray-400); text-transform:uppercase; letter-spacing:.8px; }
.sidebar-logo { padding:14px 16px 12px; font-size:1rem; font-weight:900; color:var(--primary); border-bottom:1px solid var(--gray-200); margin-bottom:4px; flex-shrink:0; }
.sidebar-logo a { color:var(--primary); text-decoration:none; }
.sidebar-link { display:flex; align-items:center; gap:8px; padding:9px 16px; font-size:.84rem; font-weight:500; color:var(--gray-700); text-decoration:none; border-radius:6px; margin:1px 6px; transition:background .12s,color .12s; white-space:nowrap; }
.sidebar-link:hover { background:var(--gray-100); color:var(--gray-900); text-decoration:none; }
.sidebar-link.active { background:#f0fdf4; color:#166534; font-weight:700; border-left:3px solid #22c55e; padding-left:13px; }
.sidebar-item { display:flex; align-items:center; gap:10px; padding:10px 16px; color:var(--gray-600); font-size:.88rem; font-weight:500; cursor:pointer; text-decoration:none; transition:all var(--transition); border-left:3px solid transparent; }
.sidebar-item:hover { background:var(--gray-50); color:var(--gray-900); text-decoration:none; }
.sidebar-item.active { background:var(--green-lt); color:var(--green); border-left-color:var(--green); font-weight:700; }
.sidebar-icon { font-size:1rem; width:20px; text-align:center; }
.admin-main { margin-left:var(--sidebar-w); flex:1; padding:28px; min-height:100vh; }

/* School admin / two-column layouts */
.sa-layout { display:grid; grid-template-columns:220px 1fr; min-height:100vh; }
.sa-main { padding:24px; background:#f8fafc; min-height:100vh; overflow-x:hidden; }
.sa-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px; }
.sa-org-name { font-size:1.3rem;font-weight:900;color:#1f2937; }
.sa-org-sub  { font-size:.82rem;color:#9ca3af;margin-top:2px; }
.stat-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:20px; }
.stat-card { background:#fff;border-radius:10px;padding:16px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.07); }
.stat-num  { font-size:1.7rem;font-weight:900; }
.stat-lbl  { font-size:.72rem;text-transform:uppercase;font-weight:700;color:#9ca3af;margin-top:3px; }

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; }
.page-header h1 { font-size:1.5rem; font-weight:800; color:var(--gray-900); }
.page-sub { color:var(--gray-400); font-size:.85rem; margin-top:2px; }

/* ── Engine modules ───────────────────────────────────────────────────────── */
.engine-module { border:1px solid var(--gray-200); border-radius:var(--radius-lg); margin-bottom:12px; background:var(--white); overflow:hidden; }
.engine-module-header { display:flex; align-items:center; gap:12px; padding:16px 20px; cursor:pointer; }
.engine-module-header:hover { background:var(--gray-50); }
.engine-module-body { padding:16px 20px; border-top:1px solid var(--gray-100); display:none; }
.engine-module.expanded .engine-module-body { display:block; }
.param-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.param-row  { display:flex; align-items:center; justify-content:space-between; }
.param-label { font-size:.82rem; color:var(--gray-600); }
.param-val   { width:80px; }

/* ── Front header (student/parent) ───────────────────────────────────────── */
.app-header { background:var(--green); height:54px; display:flex; align-items:center; padding:0 20px; position:sticky; top:0; z-index:200; box-shadow:var(--shadow-md); }
.app-logo { color:#fff; font-size:1.1rem; font-weight:900; margin-right:32px; text-decoration:none; }
.app-logo:hover { text-decoration:none; }
.app-nav { display:flex; align-items:center; gap:4px; flex:1; }
.nav-item { color:rgba(255,255,255,.85); padding:6px 14px; border-radius:var(--radius); font-size:.88rem; font-weight:600; cursor:pointer; text-decoration:none; position:relative; transition:background var(--transition); }
.nav-item:hover,.nav-item.active { background:rgba(255,255,255,.2); color:#fff; text-decoration:none; }
.nav-item .arrow { font-size:.6rem; margin-left:4px; }
.app-user { margin-left:auto; display:flex; align-items:center; gap:10px; }
.user-avatar { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.25); border:2px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.85rem; cursor:pointer; }
.role-badge { color:rgba(255,255,255,.9); font-size:.8rem; font-weight:600; background:rgba(0,0,0,.2); padding:3px 10px; border-radius:20px; }

/* Mega dropdown */
.mega-dropdown { position:absolute; top:54px; left:0; right:0; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.15); z-index:300; display:none; padding:28px 40px; }
.mega-dropdown.open { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.mega-col h4 { font-size:.8rem; font-weight:800; color:var(--green); text-transform:uppercase; letter-spacing:.6px; margin-bottom:10px; }
.mega-col a { display:block; color:var(--gray-700); font-size:.87rem; padding:4px 0; text-decoration:none; }
.mega-col a:hover { color:var(--green); }
.sub-tabs { display:flex; gap:0; border-bottom:1px solid var(--gray-200); background:#fff; padding:0 20px; overflow-x:auto; }
.sub-tab { padding:12px 18px; font-size:.87rem; font-weight:600; color:var(--gray-500); border-bottom:2px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap; }
.sub-tab:hover { color:var(--green); text-decoration:none; }
.sub-tab.active { color:var(--green); border-bottom-color:var(--green); }

/* ── Student practice ─────────────────────────────────────────────────────── */
.practice-layout { display:grid; grid-template-columns:1fr 180px; gap:20px; max-width:820px; margin:0 auto; padding:24px 16px; }
.practice-card { background:#fff; border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-md); }
.practice-sidebar { display:flex; flex-direction:column; gap:12px; }
.score-box { background:#fff; border-radius:var(--radius-lg); padding:16px; text-align:center; box-shadow:var(--shadow); }
.score-box .score-label { font-size:.7rem; font-weight:700; text-transform:uppercase; color:var(--gray-400); margin-bottom:4px; }
.score-box .score-val   { font-size:2.2rem; font-weight:900; color:var(--gray-800); }
.smart-box { background:var(--orange); border-radius:var(--radius-lg); padding:16px; text-align:center; color:#fff; box-shadow:var(--shadow); }
.smart-box .smart-label { font-size:.7rem; font-weight:700; text-transform:uppercase; opacity:.85; margin-bottom:4px; }
.smart-box .smart-val   { font-size:2.5rem; font-weight:900; }
.question-visual { text-align:center; margin-bottom:20px; }
.question-prompt { font-size:1.15rem; font-weight:600; color:var(--gray-800); margin-bottom:20px; }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice-btn { background:var(--gray-100); border:2px solid var(--gray-200); border-radius:var(--radius); padding:14px; font-size:1rem; font-weight:600; cursor:pointer; transition:all var(--transition); text-align:center; }
.choice-btn:hover { border-color:var(--green); background:var(--green-lt); color:var(--green); }
.choice-btn.correct { background:#d1fae5; border-color:var(--green); color:#065f46; }
.choice-btn.wrong   { background:#fee2e2; border-color:var(--red);   color:#991b1b; }
.fill-blank-wrap { display:flex; gap:10px; align-items:center; }
.fill-blank { width:100px; padding:10px; border:2px solid var(--gray-300); border-radius:var(--radius); font-size:1.1rem; font-weight:700; text-align:center; outline:none; }
.fill-blank:focus { border-color:var(--green); }
.feedback-bar { padding:14px 20px; border-radius:var(--radius); margin-top:16px; font-weight:600; display:none; border-left:4px solid transparent; }
.feedback-correct { background:#d1fae5; color:#065f46; border-left-color:#27ae60; }
.feedback-wrong   { background:#fee2e2; color:#991b1b; border-left-color:#e74c3c; }
.feedback-retry   { background:#fef3c7; color:#92400e; border-left-color:#f59e0b; font-size:.95rem; animation:retry-shake 0.3s ease; }
.feedback-maxout  { background:#f3f4f6; color:#4b5563; border-left-color:#9ca3af; font-style:italic; }
@keyframes retry-shake {
  0%,100% { transform:translateX(0); }
  25%     { transform:translateX(-4px); }
  75%     { transform:translateX(4px); }
}
/* Tried-wrong buttons — greyed out, crossed through, unclickable */
.choice-btn.tried-wrong {
  opacity:.3; text-decoration:line-through; pointer-events:none; cursor:not-allowed;
  background:#f9fafb !important; border-color:#e5e7eb !important; color:#9ca3af !important;
}
.breadcrumb { font-size:.82rem; color:var(--gray-400); padding:8px 20px; background:#fff; border-bottom:1px solid var(--gray-100); }
.breadcrumb a { color:var(--gray-400); }
.breadcrumb span { color:var(--green); }

/* ── Student dashboard ────────────────────────────────────────────────────── */
.dashboard-wrap { max-width:900px; margin:0 auto; padding:24px 16px; }
.greeting { font-size:1.4rem; font-weight:800; color:var(--gray-900); margin-bottom:6px; }
.greeting-sub { color:var(--gray-400); margin-bottom:24px; }
.what-section { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden; }
.section-title { font-size:1rem; font-weight:700; color:var(--gray-800); padding:16px 20px 0; border-left:4px solid var(--green); margin-left:20px; }
.skill-tabs { display:flex; gap:4px; padding:12px 20px; }
.skill-tab { padding:6px 16px; border-radius:20px; font-size:.82rem; font-weight:600; cursor:pointer; border:none; background:var(--gray-100); color:var(--gray-500); }
.skill-tab.active { background:var(--green); color:#fff; }
.skill-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 20px 20px; }
.skill-card-mini { border:1px solid var(--gray-200); border-radius:var(--radius); padding:14px; cursor:pointer; transition:all var(--transition); }
.skill-card-mini:hover { border-color:var(--green); box-shadow:var(--shadow-md); }
.skill-name { font-weight:700; font-size:.88rem; color:var(--gray-800); margin-bottom:4px; }
.skill-code { font-size:.7rem; color:var(--gray-400); }
.week-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:16px 20px; }
.week-stat { text-align:center; }
.week-val { font-size:1.6rem; font-weight:800; color:var(--gray-800); }
.week-label { font-size:.75rem; color:var(--gray-400); font-weight:600; margin-top:2px; }
.awards-strip { display:flex; gap:16px; padding:16px 20px; overflow-x:auto; }
.award-mini { text-align:center; flex-shrink:0; }
.award-mini-icon { font-size:2rem; }
.award-mini-label { font-size:.65rem; color:var(--gray-400); margin-top:4px; }

/* ── Learning browser ─────────────────────────────────────────────────────── */
.learning-wrap { max-width:1340px; margin:0 auto; padding:24px 16px; }
.view-tabs { display:flex; gap:0; border-bottom:2px solid var(--gray-200); margin-bottom:20px; }
.view-tab { padding:10px 20px; font-size:.88rem; font-weight:600; color:var(--gray-500); border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; text-decoration:none; }
.view-tab.active { color:var(--green); border-bottom-color:var(--green); }

/* Masonry column grid — topic cards waterfall into 3 columns */
.masonry-grid {
  column-count:3;
  column-gap:16px;
}
.masonry-grid .topic-group {
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  display:inline-block;  /* required for break-inside across all browsers */
  width:100%;
  margin-bottom:16px;
}
@media(max-width:1024px) { .masonry-grid { column-count:2; } }
@media(max-width:600px)  { .masonry-grid { column-count:1; } }

.topic-group { margin-bottom:16px; }
.topic-header { background:var(--green); color:#fff; padding:10px 16px; border-radius:var(--radius) var(--radius) 0 0; font-weight:700; font-size:.9rem; }
.skill-list { background:#fff; border:1px solid var(--gray-200); border-top:none; border-radius:0 0 var(--radius) var(--radius); counter-reset:skill-num; }
.skill-row { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--gray-100); }
.skill-row::before {
  counter-increment: skill-num;
  content: counter(skill-num) ".";
  font-weight: 700;
  color: #9ca3af;
  font-size: .85rem;
  flex-shrink: 0;
}
/* Text div must be flex:1 — without it, justify-content:space-between blows the gap wide open */
.skill-row > div:not(.skill-row-right) { flex:1; min-width:0; }
.skill-row:last-child { border-bottom:none; }
.skill-row:hover { background:var(--gray-50); }
.skill-row-name { font-weight:600; font-size:.9rem; color:var(--gray-800); }
.skill-row-sub  { font-size:.78rem; color:var(--gray-400); margin-top:2px; }
.skill-row-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.score-pill { padding:3px 10px; border-radius:20px; font-size:.75rem; font-weight:700; }
.score-100 { background:#d1fae5; color:#065f46; }
.score-high { background:#dbeafe; color:#1e40af; }
.score-mid  { background:#fef3c7; color:#92400e; }
.score-low  { background:var(--gray-100); color:var(--gray-500); }

/* ── Analytics ────────────────────────────────────────────────────────────── */
.analytics-wrap { max-width:900px; margin:0 auto; padding:24px 16px; }
.filter-bar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:20px; font-size:.85rem; }
.filter-bar select { padding:7px 10px; border:1px solid var(--gray-300); border-radius:var(--radius); background:#fff; font-size:.85rem; }
.big-stat { font-size:2.5rem; font-weight:900; color:var(--gray-800); }
.big-stat-label { font-size:.8rem; color:var(--gray-400); text-transform:uppercase; font-weight:600; }

/* ── Diagnostic ───────────────────────────────────────────────────────────── */
.diagnostic-wrap { max-width:800px; margin:0 auto; padding:24px 16px; }
.strand-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:24px; }
.strand-card { background:#fff; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); border:1px solid var(--gray-200); }
.strand-name { font-weight:700; font-size:.92rem; color:var(--gray-800); margin-bottom:8px; }
.strand-bar-bg { background:var(--gray-100); border-radius:20px; height:10px; overflow:hidden; }
.strand-bar    { height:10px; border-radius:20px; background:var(--green); transition:width 1s ease; }
.strand-score  { font-size:.8rem; color:var(--gray-500); margin-top:4px; }

/* ── Awards ───────────────────────────────────────────────────────────────── */
.awards-wrap { max-width:900px; margin:0 auto; padding:24px 16px; }
.awards-header-banner { background:linear-gradient(135deg,var(--green),#2ecc71); border-radius:var(--radius-lg); padding:28px; color:#fff; margin-bottom:24px; }
.awards-category { margin-bottom:28px; }
.awards-category-title { font-size:1rem; font-weight:700; padding:10px 0; border-bottom:2px solid var(--gray-200); margin-bottom:16px; }
.awards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:16px; }
.award-item { text-align:center; padding:16px 10px; border-radius:var(--radius); border:1px solid var(--gray-200); background:#fff; cursor:pointer; transition:all var(--transition); position:relative; }
.award-item.earned { border-color:var(--green); background:var(--green-lt); }
.award-item.locked { opacity:.45; }
.award-item:hover { box-shadow:var(--shadow-md); }
.award-icon   { font-size:2.2rem; margin-bottom:8px; }
.award-name   { font-size:.75rem; font-weight:700; color:var(--gray-700); }
.award-thresh { font-size:.68rem; color:var(--gray-400); margin-top:2px; }

/* ── Billing ──────────────────────────────────────────────────────────────── */
.billing-wrap { max-width:900px; margin:0 auto; padding:24px 16px; }
.billing-section-header { background:linear-gradient(135deg,var(--blue),#2471a3); color:#fff; padding:14px 20px; border-radius:var(--radius) var(--radius) 0 0; font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:8px; }
.billing-section-body { background:#fff; border:1px solid var(--gray-200); border-top:none; border-radius:0 0 var(--radius) var(--radius); padding:20px; margin-bottom:20px; }
.billing-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--gray-100); font-size:.9rem; }
.billing-row:last-child { border-bottom:none; }
.billing-key { color:var(--gray-500); }
.billing-val { font-weight:600; color:var(--gray-800); }

/* ── Login page ───────────────────────────────────────────────────────────── */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1a472a 0%,#27ae60 50%,#1a472a 100%); padding:20px; }
.login-box { background:#fff; border-radius:20px; padding:40px; width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.login-logo { text-align:center; margin-bottom:28px; }
.login-logo .logo-emoji { font-size:3rem; }
.login-logo h1 { font-size:1.6rem; font-weight:800; color:var(--gray-900); margin-top:8px; }
.login-logo p  { color:var(--gray-400); font-size:.88rem; }

/* ── Info tooltips ────────────────────────────────────────────────────────── */
.info-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; background:#e0e7ff;
  color:#4338ca; border:none; font-size:.72rem; font-weight:800;
  cursor:pointer; margin-left:6px; vertical-align:middle;
  line-height:1; transition:background var(--transition); flex-shrink:0;
}
.info-btn:hover { background:#c7d2fe; }
.info-tip-wrap  { display:inline-block; vertical-align:middle; }

/* Fixed positioning so overflow:hidden on parent cards cannot clip the balloon */
.info-tip-balloon {
  display:none !important;
  position:fixed;            /* set by JS — escapes any overflow:hidden ancestor */
  z-index:99999;
  background:#1e293b; color:#e2e8f0; border-radius:10px;
  padding:14px 16px; width:310px; font-size:.79rem; line-height:1.6;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  pointer-events:auto;
}
.info-tip-balloon::before {
  content:''; position:absolute; top:-7px; left:16px;
  border-left:7px solid transparent; border-right:7px solid transparent;
  border-bottom:7px solid #1e293b;
}
.info-tip-balloon.open { display:block !important; }
.info-tip-balloon h4   { color:#93c5fd; font-size:.83rem; margin-bottom:6px; font-weight:700; }
.info-tip-balloon p    { margin-bottom:6px; }
.info-tip-balloon ul   { padding-left:14px; margin:6px 0 0; }
.info-tip-balloon li   { margin-bottom:5px; }
.info-tip-balloon strong { color:#fcd34d; }

/* ── TTS (Text-to-Speech) ──────────────────────────────────────────────── */
.tts-speaker-btn {
  background:none; border:none; cursor:pointer; font-size:1rem;
  padding:3px 5px; border-radius:4px; vertical-align:middle;
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:4px; color:#9ca3af; flex-shrink:0;
  transition:color .15s;
}
.tts-speaker-btn:hover { color:#6b7280; }
.tts-speaker-btn.tts-playing { color:#374151; }

/* Loading: turn the button itself into a small spinner — no pseudo-elements */

@keyframes tts-spin  { to { transform:rotate(360deg); } }
 50% { transform:scale(1.2); } }

  50%      { transform:scale(1.2); }
}
/* Word highlight — green background + underline as requested */
.tts-word {
  display:inline;
  border-radius:3px;
  transition:background .06s;
}
.tts-word.tts-active {
  background:#bbf7d0;               /* bright green highlight */
  border-bottom:2px solid #16a34a; /* green underline */
  border-radius:3px;
  padding:0 2px;
  color:#065f46;
}
/* Speaker beside question prompt — flex row wrapper */
.tts-prompt-row { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.tts-prompt-row .question-prompt { flex:1; margin-bottom:0; }
/* Choice rows sit inside the existing .choices grid — no column override needed */
.choice-row { display:flex; align-items:center; gap:10px; }
.choice-row .tts-speaker-btn { flex-shrink:0; font-size:1rem; opacity:.7; }
.choice-row .tts-speaker-btn:hover { opacity:1; }
.choice-row .choice-btn { flex:1; }
@media(max-width:768px) {
  .admin-sidebar { transform:translateX(-100%); transition:transform var(--transition); position:fixed; top:0; bottom:0; }
  .admin-sidebar.open { transform:translateX(0); }
  .admin-main { margin-left:0; padding:16px; }
  .sa-layout { grid-template-columns:1fr; }
  .sa-layout .admin-sidebar { position:relative; transform:none; width:100%; }
  .grid-2,.grid-3 { grid-template-columns:1fr; }
  .stat-cards { grid-template-columns:1fr 1fr; }
  .practice-layout { grid-template-columns:1fr; }
  .skill-grid,.strand-grid { grid-template-columns:1fr; }
  .mega-dropdown.open { grid-template-columns:1fr 1fr; }
  .choices { grid-template-columns:1fr; }
}
@media(max-width:480px) {
  .stat-cards { grid-template-columns:1fr; }
  .awards-grid { grid-template-columns:repeat(3,1fr); }
  .app-nav .nav-item span { display:none; }
  .mega-dropdown.open { grid-template-columns:1fr; padding:20px; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:768px) {
  .admin-sidebar { transform:translateX(-100%); transition:transform var(--transition); }
  .admin-sidebar.open { transform:translateX(0); }
  .admin-main { margin-left:0; padding:16px; }
  .grid-2,.grid-3 { grid-template-columns:1fr; }
  .stat-cards { grid-template-columns:1fr 1fr; }
  .practice-layout { grid-template-columns:1fr; }
  .skill-grid,.strand-grid { grid-template-columns:1fr; }
  .mega-dropdown.open { grid-template-columns:1fr 1fr; }
  .choices { grid-template-columns:1fr; }
  .info-tip-balloon { width:260px; left:auto; right:0; }
  .info-tip-balloon::before { left:auto; right:12px; }
}
@media(max-width:480px) {
  .stat-cards { grid-template-columns:1fr; }
  .awards-grid { grid-template-columns:repeat(3,1fr); }
  .app-nav .nav-item span { display:none; }
  .mega-dropdown.open { grid-template-columns:1fr; padding:20px; }
  .info-tip-balloon { width:90vw; }
}