/* =============================================
   PICRAT Suite — Shared Stylesheet
   ============================================= */

/* --- Google Font (loaded via <link> in header.ejs) --- */

/* --- CSS Custom Properties --- */
:root {
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-gradient: linear-gradient(135deg, #3b82f6, #60a5fa);
  --hover-gradient: linear-gradient(135deg, #2563eb, #3b82f6);
  --background-gradient: linear-gradient(130deg, #f7fafc 0%, #edf2f7 100%);
  --text-main: #2d3748;
  --text-muted: #718096;
  --text-light: #a0aec0;
  --white: #ffffff;
  --bg-light: #f7fafc;
  --border-light: #edf2f7;
  --border: #e2e8f0;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Tool accent colours */
  --accent-analyse: #3b82f6;
  --accent-generate: #10b981;
  --accent-generate-dark: #059669;
  --accent-generate-bg: #ecfdf5;
  --accent-practice: #f59e0b;
  --accent-practice-dark: #d97706;
  --accent-practice-bg: #fffbeb;
  --accent-coach: #8b5cf6;
  --accent-coach-light: #a78bfa;
  --accent-coach-dark: #5b21b6;
  --accent-coach-mid: #7c3aed;
  --accent-coach-bg: #f5f3ff;
  --accent-success: #059669;
  --accent-success-light: #10b981;
  --accent-audit: #ef4444;
  --accent-audit-light: #f87171;
  --accent-audit-dark: #dc2626;
  --accent-audit-bg: #fef2f2;

  /* PICRAT cell colours */
  --cell-pr: #F2F7FC;
  --cell-pa: #E3EEF9;
  --cell-pt: #D5E6F6;
  --cell-ir: #C7DDF3;
  --cell-ia: #B8D4F0;
  --cell-it: #AAC9EB;
  --cell-cr: #9CC0E8;
  --cell-ca: #8EB7E5;
  --cell-ct: #80AEE2;
}

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

/* --- Global focus-visible fallback for keyboard users --- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* Inputs with custom focus styles already override this via specificity */

body {
  font-family: var(--font-main);
  color: var(--text-main);
  background: var(--background-gradient);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  overflow-x: hidden;
}


/* =============================================
   NAVIGATION
   ============================================= */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border-light);
}

.nav-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 800;
  font-size: 1.1rem;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}
.nav-brand-logo {
  width: 22px;
  height: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1.5px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.nav-brand-logo span {
  border-radius: 1px;
}
.nav-brand-logo span:nth-child(1) { background: #3b82f6; }
.nav-brand-logo span:nth-child(2) { background: #4a8df7; }
.nav-brand-logo span:nth-child(3) { background: #5898f8; }
.nav-brand-logo span:nth-child(4) { background: #60a5fa; }
.nav-brand-logo span:nth-child(5) { background: #6db0fb; }
.nav-brand-logo span:nth-child(6) { background: #7abbfb; }
.nav-brand-logo span:nth-child(7) { background: #8bc5fc; }
.nav-brand-logo span:nth-child(8) { background: #9bcffd; }
.nav-brand-logo span:nth-child(9) { background: #aed8fe; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-links a {
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #5a6a7e;
  transition: var(--transition);
}

.nav-links a:hover {
  background: var(--border-light);
  color: var(--text-main);
}

.nav-links a.active {
  background: #eff6ff;
  color: #2b6cb0;
  font-weight: 600;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.nav-share-btn:hover {
  color: var(--primary);
  background: #eff6ff;
}

/* --- Avatar dropdown --- */
.nav-avatar-dropdown { position: relative; }
.nav-avatar-btn {
  background: none; border: none; cursor: pointer; padding: 0;
}
.nav-avatar-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 150px; padding: 0.375rem; z-index: 1000;
}
.nav-avatar-dropdown.open .nav-avatar-menu { display: block; }
.nav-avatar-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
  font-size: 0.8125rem; font-weight: 500;
  color: var(--text-light); text-decoration: none;
}
.nav-avatar-menu a:hover { background: var(--border-light); color: var(--text-main); }

/* "Share PICRAT" contextual nudge */
.share-picrat-nudge {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 1rem 0 0.5rem;
}
.share-picrat-nudge a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.share-picrat-nudge a:hover {
  text-decoration: underline;
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.nav-user:hover {
  color: var(--text-main);
}

.nav-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
}

.nav-logout {
  font-size: 0.8rem;
  color: var(--text-light);
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.nav-logout:hover {
  color: var(--text-main);
  border-color: var(--text-muted);
}

/* Mobile hamburger */
.hamburger-btn {
  display: none;
  background: var(--primary-gradient);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.6rem;
  cursor: pointer;
  line-height: 0;
}

.mobile-nav {
  display: none;
  position: fixed;
  top: 0; right: 0;
  width: 280px;
  height: 100vh;
  background: white;
  box-shadow: -4px 0 15px rgba(0,0,0,0.1);
  z-index: 200;
  padding: 5rem 0 2rem;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-nav.open { transform: translateX(0); }

.mobile-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  color: var(--text-main);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.2s;
}

.mobile-nav a:hover { background: var(--bg-light); color: var(--primary); }
.mobile-nav a.active { color: var(--primary); background: #eff6ff; }

.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 150;
}
.mobile-overlay.show { display: block; }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-right .nav-user,
  .nav-right .nav-logout { display: none; }
  .hamburger-btn { display: flex; }
  .mobile-nav { display: flex; }
}


/* =============================================
   FOOTER
   ============================================= */

.site-footer {
  flex-shrink: 0;
  width: 100%;
  padding: 0.5rem 1.5rem;
  background: linear-gradient(to right, #006EB6, #00A97A);
  color: rgba(255,255,255,0.9);
  text-align: center;
  font-size: 0.78rem;
}

.site-footer a {
  color: #fff;
  text-decoration: underline;
}

.site-footer a:hover {
  text-decoration: none;
  opacity: 0.85;
}

.footer-secondary {
  margin-top: 0.2rem;
  opacity: 0.7;
}


/* =============================================
   MAIN CONTENT WRAPPER
   ============================================= */

.main-content {
  flex: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

@media (min-width: 1200px) {
  .main-content { max-width: 1100px; }
}

@media (max-width: 480px) {
  .main-content {
    padding: 1.25rem 0.85rem;
  }
}


/* =============================================
   HOMEPAGE — Compact Grid Layout
   ============================================= */

.home-content {
  padding: 0 1.5rem 1rem;
  max-width: 900px;
}

/* ── Profile completion nudge ── */
.profile-nudge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  color: #92400e;
  margin-top: 0.35rem;
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
  animation: fadeInDown 0.4s ease-out;
}
.profile-nudge .nudge-link {
  font-weight: 600;
  color: #d97706;
  text-decoration: none;
  white-space: nowrap;
}
.profile-nudge .nudge-link:hover { text-decoration: underline; }
.profile-nudge .nudge-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #b45309;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
}

/* ── Slim hero ── */
/* ── Public nav (unauthenticated visitors) ── */
.site-nav--public .nav-right-public {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-link-public {
  text-decoration: none;
  color: var(--text-main);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-link-public:hover { color: var(--primary); }

.btn-register {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 0.5rem 1.15rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.2s;
}
.btn-register:hover { background: var(--primary-dark); }

/* ── Home subtitle (public visitors) ── */
.home-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0.85rem auto 0;
  line-height: 1.6;
}

/* ── Guest CTA section ── */
.home-guest-cta {
  text-align: center;
  padding: 2.5rem 2rem;
  margin-top: 1.5rem;
  background: linear-gradient(135deg, #f0f7ff 0%, #faf5ff 100%);
  border-radius: var(--radius-lg);
  border: 1px solid #e8e0f0;
}
.home-guest-cta-inner {
  max-width: 500px;
  margin: 0 auto;
}
.home-guest-cta h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.6rem;
}
.home-guest-cta p {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 1.5rem;
}
.home-guest-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}
.btn-register--lg {
  padding: 0.75rem 2rem;
  font-size: 1.05rem;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}
.btn-register--lg:hover {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
  transform: translateY(-1px);
}
.btn-signin {
  display: inline-block;
  padding: 0.75rem 2rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary);
  background: white;
  border: 2px solid var(--primary);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.btn-signin:hover {
  background: var(--primary);
  color: white;
}

.home-hero {
  text-align: center;
  padding: 2rem 0 1.5rem;
  animation: fadeInDown 0.4s ease-out;
}

.home-greeting {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
  font-weight: 500;
}

.home-headline {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-main);
  max-width: 520px;
  margin: 0 auto;
}

/* ── Smart nudge ── */
.home-nudge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  color: #1e40af;
  margin-bottom: 1rem;
  animation: fadeInDown 0.3s ease-out;
}
.home-nudge .nudge-try {
  margin-left: auto;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}
.home-nudge .nudge-try:hover { text-decoration: underline; }

/* ── 5-card grid ── */
.home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

/* Analyse spans 2 columns */
.home-card--wide {
  grid-column: span 2;
}

.home-card {
  display: flex;
  background: var(--white);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}
.home-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.home-card-accent {
  width: 4px;
  flex-shrink: 0;
}

.home-card-body {
  flex: 1;
  padding: 1.1rem 1.15rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.home-card-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.home-card-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.home-card-icon i,
.home-card-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}
.home-card:hover .home-card-icon {
  transform: scale(1.1) rotate(-3deg);
}

.home-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

.home-card-desc {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.home-card-go {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  font-size: 0.82rem;
  margin-top: auto;
  transition: gap 0.2s ease;
}
.home-card:hover .home-card-go {
  gap: 0.45rem;
}

/* Wide card (Analyse) gets slightly larger text */
.home-card--wide .home-card-name {
  font-size: 1.15rem;
}
.home-card--wide .home-card-desc {
  font-size: 0.88rem;
}

/* ── Journey strip (below cards, quiet) ── */
.home-journey {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 0.65rem 1rem;
  margin-bottom: 1rem;
  box-shadow: none;
}

.home-journey-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.home-journey-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.home-journey-link:hover { color: var(--primary); }
.home-journey-link strong { font-weight: 700; color: var(--text-main); }

.home-journey-counts {
  font-size: 0.78rem;
  color: var(--text-light);
}

/* ── Footer ── */
.home-footer {
  text-align: center;
  padding: 0.25rem 0 0.75rem;
}

.home-proof {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 0.35rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .home-content { padding: 0 1rem 1.5rem; }
  .home-hero { padding: 1.5rem 0 1.25rem; }
  .home-headline { font-size: 1.35rem; }
  .home-subtitle { font-size: 0.9rem; }
  .home-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }
  .home-card--wide { grid-column: span 2; }
  .home-journey-inner { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .home-guest-cta { padding: 2rem 1rem; }
}

@media (max-width: 600px) {
  .home-grid {
    grid-template-columns: 1fr;
  }
  .home-card--wide { grid-column: span 1; }
  .home-headline { font-size: 1.25rem; }
}

@media (max-width: 480px) {
  .home-headline { font-size: 1.15rem; }
  .home-card-body { padding: 0.9rem 1rem; }
  .home-guest-cta { padding: 1.75rem 1.25rem; }
  .home-guest-cta-actions { flex-direction: column; gap: 0.65rem; }
  .btn-register--lg, .btn-signin { width: 100%; text-align: center; }
}


/* =============================================
   AUTH PAGES (login, register)
   ============================================= */

.auth-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  background: var(--background-gradient);
}

.auth-card {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 2.5rem;
  width: 100%;
  max-width: 440px;
}

.auth-brand {
  text-align: center;
  margin-bottom: 2rem;
}

.auth-brand h1 {
  font-size: 1.75rem;
  font-weight: 800;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.auth-brand p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

/* Tabs for password / magic link */
.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--border-light);
}

.auth-tab {
  flex: 1;
  padding: 0.75rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition);
}

.auth-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.auth-tab:hover:not(.active) {
  color: var(--text-main);
}

.auth-panel { display: none; }
.auth-panel.active { display: block; }

/* Form elements */
.form-group {
  margin-bottom: 1.25rem;
}
.form-group-row {
  display: flex; gap: 0.75rem;
}
.form-group-row .form-group { flex: 1; }

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.4rem;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 0.95rem;
  color: var(--text-main);
  transition: var(--transition);
  background: white;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

.form-input::placeholder { color: var(--text-light); }

.btn-primary {
  width: 100%;
  padding: 0.85rem;
  background: var(--primary-gradient);
  color: white;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-main);
}

.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.auth-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.auth-footer a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.auth-footer a:hover { text-decoration: underline; }

/* ── Auth responsive ── */
@media (max-width: 480px) {
  .auth-wrapper {
    padding: 1rem 0.75rem;
    align-items: flex-start;
    padding-top: 2rem;
  }
  .auth-card {
    padding: 1.5rem 1.25rem;
    border-radius: var(--radius-lg);
  }
  .auth-brand {
    margin-bottom: 1.25rem;
  }
  .auth-brand h1 {
    font-size: 1.4rem;
  }
  .auth-brand p {
    font-size: 0.88rem;
  }
  .auth-tab {
    padding: 0.65rem 0.5rem;
    font-size: 0.85rem;
  }
  .form-group-row {
    flex-direction: column;
    gap: 0;
  }
  .btn-primary {
    padding: 0.9rem;
    font-size: 1rem;
    min-height: 48px;
  }
}

/* ═══ REGISTRATION: School matching ═══ */
.school-match-card {
  background: #f0f7ff;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: 14px 16px;
}
.school-match-text {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
}
.school-match-change {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.role-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.role-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: border-color 0.15s;
}
.role-option:hover {
  border-color: var(--primary);
}
.role-option input[type="radio"] {
  accent-color: var(--primary);
}
.school-results {
  position: relative;
  z-index: 10;
}
.school-result-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-top: none;
  padding: 10px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
}
.school-result-item:first-child {
  border-top: 1px solid #e2e8f0;
  border-radius: 8px 8px 0 0;
}
.school-result-item:last-child {
  border-radius: 0 0 8px 8px;
}
.school-result-item:only-child {
  border-radius: 8px;
  border-top: 1px solid #e2e8f0;
}
.school-result-item:hover {
  background: #f0f7ff;
}
.school-result-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}
.school-result-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.school-result-empty {
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fafafa;
}
.school-result-empty a {
  color: var(--primary);
}

/* Alert messages */
.alert {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.alert-error {
  background: #fecaca;
  color: #9b2c2c;
  border: 1px solid #fecaca;
}

.alert-success {
  background: #a7f3d0;
  color: #276749;
  border: 1px solid #9ae6b4;
}


/* =============================================
   TOOL PAGES — shared container
   ============================================= */

.tool-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

.tool-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-main);
  text-align: center;
  margin-bottom: 0.5rem;
}

.tool-subtitle {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* Consistent tool page header — title left, action button right, line underneath */
.tool-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.tool-page-header h1 {
  font-size: 1.75rem;
  font-weight: 800;
  color: #1a202c;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0;
}

.tool-page-header .header-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.tool-page-header .header-buttons {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.tool-page-header .clear-button,
.tool-page-header .reset-button {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: all 0.2s ease;
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 500;
}
.tool-page-header .clear-button:hover,
.tool-page-header .reset-button:hover {
  background: var(--bg-light);
  color: var(--text-main);
  border-color: var(--text-light);
}

/* Start-over link — subtle, consistent across all tools */
.start-over-link {
  text-align: center;
  padding: 1rem 0 0.25rem;
}
.start-over-link button {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-main);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}
.start-over-link button:hover {
  color: var(--text-main);
  background: var(--bg-light);
}
.start-over-link button svg,
.start-over-link button i {
  width: 0.8rem;
  height: 0.8rem;
}

/* Legacy .tool-header (keep for backwards compat) */
.tool-header {
  text-align: center;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .tool-container { padding: 1.25rem; border-radius: var(--radius-lg); }
  .tool-title { font-size: 1.35rem; }
}

@media (max-width: 480px) {
  .tool-container { padding: 1rem 0.85rem; }
  .tool-title { font-size: 1.2rem; }
}


/* =============================================
   SHARED — Slide / Wizard Layout (Analyse, Generate)
   ============================================= */

h2.slide-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: #1a202c;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 0.4rem;
  max-width: 80%;
}

.slide-content {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-main);
  margin-bottom: 1.5rem;
  max-width: 100%;
}

.subheading {
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  color: var(--text-main);
}

.slide-question {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 1.75rem;
  line-height: 1.4;
  max-width: 100%;
  letter-spacing: -0.01em;
  padding: 1rem 1.25rem;
  background: #f8fbff;
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Legacy .hint — kept for fallback */
.hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0.5rem 0.85rem;
  line-height: 1.5;
  background: var(--bg-light);
  border-left: 2px solid var(--border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Choice path grid (Analyse wizard) */
.choices-grid {
  display: grid;
  gap: 1rem;
  max-width: 100%;
}
.choices-grid--2 { grid-template-columns: 1fr 1fr; }
.choices-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 768px) {
  .choices-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .choices-grid--2,
  .choices-grid--3 { grid-template-columns: 1fr; }
}

.choice-path {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 1.25rem 1.35rem;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-main);
  gap: 0.65rem;
  min-width: 0;
  position: relative;
  border-left: 4px solid var(--border);
}

.choice-path-main {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.45;
}

.choice-path-examples {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.choice-path-examples li {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.45;
  padding-left: 1rem;
  position: relative;
}
.choice-path-examples li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border);
}

.choice-path:hover {
  border-color: var(--primary);
  border-left-color: var(--primary);
  background: #f8fbff;
  box-shadow: var(--shadow-md);
}
.choice-path:hover .choice-path-main {
  color: var(--primary);
}
.choice-path:hover .choice-path-examples li::before {
  background: var(--primary);
}

.choice-path:active {
  box-shadow: var(--shadow-sm);
  transform: scale(0.99);
}

/* Legacy .option-button kept for Generate tool compatibility */
.options-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.option-button {
  position: relative;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  background: var(--primary-gradient);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: #ffffff;
  text-align: left;
  min-height: 3rem;
  transition: var(--transition);
  font-family: var(--font-main);
}

.option-button i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.option-button span:nth-of-type(1) {
  flex: 1;
  line-height: 1.3;
}

.option-button span:last-child {
  flex-shrink: 0;
}

.option-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.option-button:active {
  background: var(--hover-gradient);
  transform: translateY(1px);
}

.option-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Navigation buttons (Analyse prev/next) */
.nav-buttons {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0 0.25rem;
  margin-top: auto;
  border-top: 1px solid var(--border);
}

.nav-button {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 1.125rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-family: var(--font-main);
}

.nav-button:disabled {
  color: #cbd5e0;
}


/* =============================================
   SHARED — Modal
   ============================================= */

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #ffffff;
  margin: 5% auto;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  width: 90%;
  max-width: 700px;
  box-shadow: var(--shadow-lg);
  position: relative;
  line-height: 1.6;
  color: var(--text-main);
}

.modal-content h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text-main);
}

.modal-content p {
  margin-bottom: 1rem;
}

.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-muted);
}

.modal-close:hover {
  color: var(--text-main);
}

/* PICRAT diagram in modal */
.picrat-diagram {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 1.5rem 0;
}

.picrat-diagram-cell {
  padding: 0.75rem;
  border-radius: 0.25rem;
  text-align: center;
  font-size: 0.875rem;
}

.picrat-diagram-header {
  background: #e2e8f0;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal diagram cell colors */
.picrat-cell-c-r { background-color: var(--cell-cr); }
.picrat-cell-c-a { background-color: var(--cell-ca); }
.picrat-cell-c-t { background-color: var(--cell-ct); }
.picrat-cell-i-r { background-color: var(--cell-ir); }
.picrat-cell-i-a { background-color: var(--cell-ia); }
.picrat-cell-i-t { background-color: var(--cell-it); }
.picrat-cell-p-r { background-color: var(--cell-pr); }
.picrat-cell-p-a { background-color: var(--cell-pa); }
.picrat-cell-p-t { background-color: var(--cell-pt); }

/* Question icon (used by Generate, Analyse) */
.question-icon {
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #D5E6F6;
  color: #2C5282;
  transition: background 0.2s ease;
  font-size: 1rem;
}

.question-icon:hover {
  background-color: #87BCEA;
  color: #ffffff;
}

.question-icon:active {
  background-color: #6BA5D7;
}

/* Status / error messages */
.status-message {
  padding: 1rem;
  border-radius: var(--radius-sm);
  margin: 1rem 0;
  font-size: 1rem;
  line-height: 1.5;
}

.error-message {
  background-color: #FFF5F5;
  border: 1px solid #FEB2B2;
  color: #C53030;
}

.info-message {
  background-color: #EBF8FF;
  border: 1px solid #BEE3F8;
  color: #2B6CB0;
}


/* =============================================
   ANALYSE — Results Sections (themed)
   ============================================= */

/* Section base */
.section {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: white;
  margin-bottom: 1rem;
}
.section:last-child { margin-bottom: 0; }
.section + .section { margin-top: 1rem; }

.section-header {
  padding: 0.7rem 1.15rem;
  border-bottom: 1px solid;
}

.section-title {
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.section-content {
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.section-spacing {
  margin-bottom: 1rem !important;
}

/* Next Steps: Green theme */
.section--green .section-header { background-color: #F6FBF6; border-bottom-color: #E8F5E9; }
.section--green .section-title { color: #2E7D32; }
.section--green .icon { color: rgb(22 163 74); }
.section.section--green { border: 1px solid rgb(220 252 231); }

.next-step-toggle-button {
  background: transparent;
  color: #2E7D32;
  border: 1px solid #C8E6C9;
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 0.35rem;
  transition: var(--transition);
  font-family: var(--font-main);
}
.next-step-toggle-button:hover {
  background: #F6FBF6;
  border-color: #A5D6A7;
}

/* Quick Wins: Blue theme */
.section--blue { border: 1px solid #E3F2FD; }
.section--blue .section-header { background-color: #F5FBFF; border-bottom-color: #E3F2FD; }
.section--blue .section-title { color: #1976D2; }

.quick-win {
  background-color: rgb(239 246 255);
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.number {
  width: 1.35rem;
  height: 1.35rem;
  background-color: rgb(219 234 254);
  color: rgb(37 99 235);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.7rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.quick-win .content h3 { color: rgb(30 58 138); font-weight: 600; margin: 0; font-size: 0.9rem; }
.quick-win .content p { color: rgb(59 100 180); margin: 0.15rem 0 0; font-size: 0.85rem; line-height: 1.5; }

/* Tools: Purple theme */
.section--purple { border: 1px solid #F3E5F5; }
.section--purple .section-header { background-color: #FCF6FD; border-bottom-color: #F3E5F5; }
.section--purple .section-title { color: #7B1FA2; }
.section--purple .section-note {
  background-color: #F8F3FC;
  border-left: 3px solid #7B1FA2;
  padding: 0.6rem 0.85rem;
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
  border-radius: 0.25rem;
  font-style: italic;
  color: #4a5568;
  font-size: 0.8rem;
  line-height: 1.5;
}

.tool-item {
  border: 1px solid rgb(243 232 255);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.tool-item:hover { border-color: rgb(216 180 254); }
.tool-header {
  position: relative;
  background-color: rgb(250 245 255);
  padding: 0.7rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.tool-header i[data-lucide] {
  width: 1.5rem !important;
  height: 1.5rem !important;
}
.tool-name {
  color: rgb(88 28 135);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
}
.tool-description {
  color: rgb(107 50 170);
  font-size: 0.82rem;
  margin: 0.15rem 0 0;
  line-height: 1.5;
}
.tool-details {
  padding: 0.6rem 0.85rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.tool-detail {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: rgb(147 51 234);
  font-size: 0.78rem;
}
.tool-detail i[data-lucide] {
  width: 0.85rem !important;
  height: 0.85rem !important;
}
.tool-tag {
  background-color: rgb(250 245 255);
  color: rgb(147 51 234);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}
.tool-icon {
  width: 2rem;
  height: 2rem;
  color: rgb(147 51 234);
  flex-shrink: 0;
}
.tool-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.tool-link:hover { color: rgb(126 34 206); text-decoration: underline; }

.external-link-icon {
  display: inline-block;
  margin-left: 0.25rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  vertical-align: middle;
}
.tool-link:hover .external-link-icon {
  transform: translate(1px, -1px);
  transition: transform 0.2s ease;
}

.tool-badges {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.5rem;
}
.tool-badges i svg {
  width: 16px !important;
  height: 16px !important;
  margin-right: 0 !important;
  stroke-width: 1.5;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.4rem;
  font-size: 0.65rem;
  border-radius: 0.2rem;
  background-color: rgba(147, 51, 234, 0.05);
  color: #6930c3;
  font-weight: 600;
}
.paid-badge { background-color: #fee2e2; color: #dc2626; font-weight: bold; }
.os-badge img { width: 16px; height: 16px; }

/* Challenges: Amber theme */
.section--amber { border: 1px solid #FFF3E0; }
.section--amber .section-header { background-color: #FFF8F0; border-bottom-color: #FFF3E0; }
.section--amber .section-title { color: #E65100; }

/* (legacy challenge-item styles removed — now using .challenge-card layout) */

/* Goals: Indigo theme */
.section--indigo { border: 1px solid #C5CAE9 !important; }
.section--indigo .section-header { background-color: #F5F6FA; border-bottom-color: #C5CAE9; }
.section--indigo .section-title { color: #3949AB; }

.goals-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.goal-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.check-icon {
  color: #22c55e;
  flex-shrink: 0;
  margin-top: 0.1rem;
  width: 16px;
  height: 16px;
}
.goal-item p {
  color: rgb(67 56 202);
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Growth paths */
.growth-paths {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.growth-path {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background-color: rgb(240 253 244);
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
}
.growth-path i[data-lucide] {
  width: 1.1rem !important;
  height: 1.1rem !important;
  color: #2E7D32;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.growth-path h3 { color: rgb(21 128 61); margin: 0; font-size: 0.9rem; font-weight: 600; }
.growth-path p { color: rgb(60 150 80); margin: 0.1rem 0 0; font-size: 0.82rem; line-height: 1.5; }

/* Gemini AI Section Theme */
.section--gemini { border: 1px solid #D1C4E9; }
.section--gemini .section-header { background-color: #F8F7FA; border-bottom-color: #D1C4E9; }
.section--gemini .section-title { color: #5E35B1; }

.gemini-button {
  background: linear-gradient(135deg, #5E35B1, #4527A0);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.15rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-main);
}
.gemini-button i[data-lucide] {
  width: 0.9rem !important;
  height: 0.9rem !important;
}
.gemini-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, #7E57C2, #5E35B1);
}
.gemini-button:disabled { background: #BDBDBD; cursor: not-allowed; }

#gemini-loader {
  text-align: center;
  margin: 1rem 0;
  font-style: italic;
  color: #5E35B1;
}

.gemini-result-container {
  display: none;
  background-color: #F8F7FA;
  border: 1px solid #D1C4E9;
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-top: 1rem;
  line-height: 1.6;
  color: #311B92;
  white-space: pre-wrap;
}

.gemini-user-input {
  width: 100%;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid #D1C4E9;
  font-family: var(--font-main);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  resize: vertical;
}
.gemini-user-input:focus {
  outline: none;
  border-color: #5E35B1;
  box-shadow: 0 0 0 3px rgba(94, 53, 177, 0.15);
}


/* =============================================
   ANALYSE — Final Slide: Hero + Grid Layout
   ============================================= */

/* --- Result Hero Banner --- */
.result-hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.5rem 1rem 1rem;
  background: linear-gradient(135deg, #f0f7ff 0%, #f5f3ff 100%);
  border: 1px solid #d0e3f7;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}

.result-hero-matrix {
  flex-shrink: 0;
}
.result-hero-matrix .picrat-container {
  box-shadow: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

.result-hero-info {
  flex: 1;
  min-width: 0;
}

.result-hero-position {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.result-hero-pic {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
}
.result-hero-rat {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
}
.result-hero-sep {
  font-size: 0.85rem;
  color: var(--text-light);
  font-weight: 300;
}

.result-hero-desc {
  font-size: 1.02rem;
  color: #4a5568;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}

.result-hero-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
}
.result-hero-pill {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  background: white;
  border: 1px solid #d0e3f7;
  border-radius: 2rem;
  color: var(--primary);
}
.result-hero-pill--lesson {
  font-weight: 400;
  color: var(--text-muted);
  border-color: var(--border);
  font-style: italic;
}
.result-hero-insight {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: #5a6577;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.5);
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(200, 215, 235, 0.4);
}

@media (max-width: 600px) {
  .result-hero {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
    padding: 1rem;
  }
  .result-hero-position { justify-content: center; }
  .result-hero-context { justify-content: center; }
}

/* --- Action card (groups growth + quick wins) --- */
.result-action-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

/* --- Growth Direction (single statement, no tabs) --- */
.result-growth {
  background: #f8fbff;
  border: none;
  border-left: 4px solid #276749;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
}

.result-growth-body {
  padding: 1rem 1.25rem;
}
.result-growth-target {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.3rem;
}
.result-growth-position {
  color: #276749;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.result-growth-desc {
  font-size: 0.93rem;
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

/* --- Start Here (promoted quick wins) --- */
.result-start-here {
  margin-bottom: 0;
}
.result-start-here-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.75rem;
}
.result-start-here-item {
  padding: 0.85rem 1.25rem;
  background: #f8fbff;
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: 0.5rem;
}
.result-start-here-item:last-child {
  margin-bottom: 0;
}
.result-start-here-desc {
  font-size: 0.92rem;
  color: #4a5568;
  line-height: 1.6;
}
.result-start-here-desc strong {
  color: #2b6cb0;
}
.result-start-here-desc br + strong {
  display: inline-block;
  margin-top: 0.3rem;
}

/* --- Go Deeper zone (subtle background band) --- */
.result-deeper-zone {
  background: #f7f8fa;
  border-top: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  margin-bottom: 0.5rem;
}

/* --- Closing area (bridges + footer) --- */
.result-closing {
  padding-top: 1.25rem;
}

/* --- Result content (clean, hierarchical) --- */
.result-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Section titles — quiet labels */
.result-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 1rem;
}

/* Quiet sections (tools, goals) get less visual weight */
.result-section--quiet .result-section-title {
  font-size: 0.8rem;
  color: #a0aec0;
}

/* (Next Steps styles removed — merged into Ideas section as compact wins) */

/* --- AI Ideas (editorial — the main event) --- */
.result-section--ideas {
  padding: 0;
}
.result-section--ideas .result-section-title {
  font-size: 0.88rem;
  color: var(--text-main);
}

.ai-idea strong { color: #2b6cb0; }
.ai-idea em {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.84rem;
  color: var(--text-muted);
  font-style: italic;
}


/* Tier labels for AI ideas — quiet inline labels matching section title style */
.ai-tier-badge {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.ai-tier-quick,
.ai-tier-tweak,
.ai-tier-next,
.ai-tier-big {
  color: var(--text-muted);
}

/* Each AI idea gets the blue left-border accent */
.ai-idea {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-main);
  padding: 0.85rem 1.25rem;
  background: #f8fbff;
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
}
.ai-idea:last-child {
  margin-bottom: 0;
}

.result-text-btn {
  font-size: 0.8rem;
  font-family: var(--font-main);
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-top: 0.5rem;
}
.result-text-btn:hover { color: var(--primary); }

/* --- Tools (card grid) --- */
.result-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}
.result-tool-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.1rem 0.75rem 0.9rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-main);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.result-tool-card:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(66, 153, 225, 0.1);
}
.result-tool-card-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  border-radius: 50%;
  color: var(--primary);
  margin-bottom: 0.6rem;
}
.result-tool-card-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}
.result-tool-card-initial {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.result-tool-card-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}
.result-tool-card-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.result-tool-card-cost {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.4rem;
  padding: 0.1rem 0.4rem;
  background: var(--bg-light);
  border-radius: 2rem;
}
@media (max-width: 480px) {
  .result-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Goals (aspirational, understated) --- */
.result-goals-list-clean {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.result-goal-clean {
  font-size: 0.95rem;
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
  padding: 0.3rem 0;
}

/* --- Common pitfalls (collapsed) --- */
.result-challenges-toggle {
  cursor: pointer;
}
.result-challenges-toggle summary {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.5rem 0;
  list-style: none;
}
.result-challenges-toggle summary::before {
  content: '+ ';
  font-weight: 700;
}
.result-challenges-toggle[open] summary::before {
  content: '\2212  ';
}
.result-challenges-toggle summary:hover { color: var(--text-main); }
.result-challenges-list {
  padding-top: 0.5rem;
}
.result-challenge-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  line-height: 1.55;
}
.result-challenge-item:last-child { border-bottom: none; }
.result-challenge-q {
  display: block;
  color: var(--text-main);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.result-challenge-a {
  display: block;
  color: var(--text-muted);
}

/* --- Footer / Export (clean button only) --- */
.result-footer-clean {
  text-align: center;
  padding: 1rem 0 0.5rem;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}
.result-export-btn-clean {
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-main);
  color: var(--primary);
  background: none;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 0.65rem 1.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.result-export-btn-clean:hover {
  background: var(--primary);
  color: #fff;
}

.result-share-btn {
  color: #276749;
  border-color: #10b981;
}
.result-share-btn:hover {
  background: #10b981;
  color: #fff;
}
.result-analyse-another-btn {
  color: var(--text-muted);
  border-color: var(--border);
}
.result-analyse-another-btn:hover {
  background: var(--bg-light);
  color: var(--text-main);
  border-color: var(--text-muted);
}

/* Cross-tool bridge cards */
.result-bridges {
  padding: 0.25rem 0 0.75rem;
}
.result-bridges-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.result-bridges-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}
.result-bridge-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.result-bridge-card:hover {
  border-color: var(--primary);
  box-shadow: 0 1px 4px rgba(66, 153, 225, 0.12);
}
.result-bridge-card--alt {
  background: #fff;
  border-style: dashed;
}
.result-bridge-card--alt .result-bridge-icon {
  color: var(--text-muted);
}
.result-bridge-card--alt:hover .result-bridge-icon {
  color: var(--primary);
}
.result-bridge-icon {
  color: var(--primary);
  flex-shrink: 0;
  display: flex;
}
.result-bridge-text {
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: left;
}
@media (max-width: 600px) {
  .result-bridges-row {
    grid-template-columns: 1fr;
  }
}


/* =============================================
   ANALYSE — PICRAT Matrix (in-tool, small)
   ============================================= */

/* Matrix toggle button in header */
.matrix-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.matrix-toggle-btn:hover,
.matrix-toggle-btn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: #f0f7ff;
}

/* Clean matrix variant (hero — no heatmap, no counts) */
.picrat-container.picrat-container--clean {
  box-shadow: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}
.picrat-container.picrat-container--clean .picrat-table {
  border-collapse: collapse;
  border-spacing: 0;
}
.picrat-container.picrat-container--clean .picrat-table td.matrix-cell {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(200, 215, 235, 0.6);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.picrat-container.picrat-container--clean .picrat-table td.matrix-cell:hover {
  background-color: rgba(66, 153, 225, 0.1);
}
.picrat-container.picrat-container--clean td.matrix-cell.current-cell {
  background: rgba(66, 153, 225, 0.15);
  box-shadow: inset 0 0 0 2.5px var(--primary);
}
.picrat-container.picrat-container--clean td.matrix-cell.current-cell:hover {
  background: rgba(66, 153, 225, 0.2);
}
.picrat-container.picrat-container--clean .row-label {
  font-size: 0.65rem;
  padding: 0 0.3rem 0 0;
}
.picrat-container.picrat-container--clean .col-label {
  font-size: 0.65rem;
  padding-top: 0.2rem;
}
.picrat-container.picrat-container--clean .col-labels-row td {
  min-width: 0;
  padding: 0;
  width: auto;
}
.picrat-container.picrat-container--clean td {
  min-width: 0;
}

.picrat-container {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.85rem;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}

/* Override shared picrat-table styles for the Analyse reference grid */
.picrat-container .picrat-table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
}
.picrat-container .picrat-table td.matrix-cell {
  border: 1px solid #e2e8f0;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  font-size: 0.8rem;
  font-weight: 500;
  background: #ffffff;
  border-radius: 0;
  transition: background-color 0.3s ease;
  position: relative;
}
.picrat-container .picrat-table td.matrix-cell:hover {
  background-color: rgba(66, 153, 225, 0.15);
  cursor: pointer;
}

/* Row and column labels */
.picrat-container .row-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
  padding-right: 0.5rem;
  border: none;
  background: none;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.picrat-container .col-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  padding-top: 0.35rem;
  border: none;
  background: none;
  letter-spacing: 0.02em;
}
.picrat-container .col-labels-row td {
  border: none;
  background: none;
}

/* Top cell highlight */
.picrat-container td.top-cell {
  box-shadow: inset 0 0 0 2px var(--primary);
}

/* Insight line below matrix */
.matrix-insight {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
}
.matrix-insight strong {
  color: var(--text-main);
}

/* Tooltip styles for analyse matrix */
.tooltip-container {
  position: relative;
}
.tooltip-text {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  background: var(--bg-light);
  color: var(--text-main);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  white-space: nowrap;
}
.tooltip-container:hover .tooltip-text { display: block; }

.tooltip-container-row {
  position: relative;
  cursor: default;
  user-select: none;
}
.tooltip-container-row .tooltip-text {
  display: none;
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  background: var(--bg-light);
  color: var(--text-main);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  white-space: nowrap;
}
.tooltip-container-col {
  position: relative;
  cursor: default;
  user-select: none;
}
.tooltip-container-col .tooltip-text {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-light);
  color: var(--text-main);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  white-space: nowrap;
  min-width: max-content;
  pointer-events: none;
}
.tooltip-container-col:hover .tooltip-text,
.tooltip-container-row:hover .tooltip-text { display: block; }

/* Analyse matrix highlighting classes */
.highlight-creative tr[data-row="creative"] td { background-color: rgba(66, 153, 225, 0.1); }
.highlight-interactive tr[data-row="interactive"] td { background-color: rgba(48, 187, 144, 0.1); }
.highlight-passive tr[data-row="passive"] td { background-color: rgba(255, 193, 7, 0.1); }
.highlight-interactive-passive tr[data-row="interactive"] td,
.highlight-interactive-passive tr[data-row="passive"] td { background-color: rgba(100, 100, 100, 0.1); }

.highlight-passive-replace tr[data-row="passive"] td[data-col="replace"] { background-color: rgba(255, 193, 7, 0.1); }
.highlight-passive-amplify tr[data-row="passive"] td[data-col="amplify"] { background-color: rgba(255, 193, 7, 0.1); }
.highlight-passive-transform tr[data-row="passive"] td[data-col="transform"] { background-color: rgba(255, 193, 7, 0.1); }
.highlight-interactive-replace tr[data-row="interactive"] td[data-col="replace"] { background-color: rgba(48, 187, 144, 0.1); }
.highlight-interactive-amplify tr[data-row="interactive"] td[data-col="amplify"] { background-color: rgba(48, 187, 144, 0.1); }
.highlight-interactive-transform tr[data-row="interactive"] td[data-col="transform"] { background-color: rgba(48, 187, 144, 0.1); }
.highlight-creative-replace tr[data-row="creative"] td[data-col="replace"] { background-color: rgba(66, 153, 225, 0.1); }
.highlight-creative-amplify tr[data-row="creative"] td[data-col="amplify"] { background-color: rgba(66, 153, 225, 0.1); }
.highlight-creative-transform tr[data-row="creative"] td[data-col="transform"] { background-color: rgba(66, 153, 225, 0.1); }

/* Animated X in matrix */
.picrat-x {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: transparent;
  font-weight: 700;
  width: 18px;
  height: 18px;
}
.picrat-x::before,
.picrat-x::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2.5px;
  background: #ef4444;
  border-radius: 1px;
  transform-origin: center;
}
.picrat-x::before { transform: rotate(45deg) scaleX(0); animation: drawFirstLine 0.3s ease forwards; }
.picrat-x::after { transform: rotate(-45deg) scaleX(0); animation: drawSecondLine 0.3s ease 0.3s forwards; }
@keyframes drawFirstLine { to { transform: rotate(45deg) scaleX(1); } }
@keyframes drawSecondLine { to { transform: rotate(-45deg) scaleX(1); } }

/* Animated arrows — color matches the growth direction accent */
.picrat-arrow-up,
.picrat-arrow-right {
  position: relative;
  color: #276749;
  font-weight: 700;
  font-size: 1.3em;
}
.picrat-arrow-up {
  opacity: 0;
  display: inline-block;
  animation: slideUpArrow 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.6s;
}
.picrat-arrow-right {
  opacity: 0;
  display: inline-block;
  animation: slideRightArrow 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.6s;
}
@keyframes slideUpArrow {
  0% { transform: translateY(20px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes slideRightArrow {
  0% { transform: translateX(-20px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

@media (max-width: 768px) {
  .matrix-inline .picrat-container {
    margin: 0 auto;
  }
  h2.slide-title, .slide-content, .slide-question {
    max-width: 100%;
    text-align: center;
  }
  h2.slide-title { font-size: 1.5rem; }
  .slide-question { font-size: 1.15rem; }
}

@media (max-width: 480px) {
  .slide-question { font-size: 1.05rem; }
  h2.slide-title { font-size: 1.25rem; }
  .result-tools-grid { grid-template-columns: 1fr; }
}


/* =============================================
   PICRAT MATRIX (shared for analyse, practice, generate)
   ============================================= */

.picrat-table {
  border-collapse: separate;
  border-spacing: 4px;
  margin: 1rem auto;
}

.picrat-table th {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 4px;
  text-align: center;
}

.picrat-table td {
  text-align: center;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition);
  min-width: 90px;
}

.picrat-table td:hover {
  filter: brightness(0.95);
  transform: scale(1.03);
}

.picrat-table td.selected {
  outline: 3px solid var(--primary);
  outline-offset: -1px;
  font-weight: 700;
}

.axis-label-y {
  writing-mode: vertical-rl;
  font-weight: 800;
  color: var(--text-main);
  padding: 0 8px;
  letter-spacing: 1px;
  font-size: 0.85rem;
}

.axis-label-x {
  font-weight: 800;
  color: var(--text-main);
  font-size: 0.85rem;
}

/* ── Shared PICRAT matrix responsive ── */
@media (max-width: 480px) {
  .picrat-table td {
    min-width: 60px;
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
  }
  .picrat-table th {
    font-size: 0.72rem;
    padding: 2px;
  }
  .axis-label-y {
    font-size: 0.72rem;
    padding: 0 4px;
  }
  .axis-label-x {
    font-size: 0.72rem;
  }
}


/* =============================================
   GENERATE — Full Redesign
   ============================================= */

/* Generate accent overrides — green instead of blue */

/* Green matrix cells for Generate */
#generatorApp {
  --cell-pr: #e7f2ed;
  --cell-pa: #dceee6;
  --cell-pt: #d1e9e0;
  --cell-ir: #bddfcf;
  --cell-ia: #b1dcc9;
  --cell-it: #a5d8c4;
  --cell-cr: #91cdb1;
  --cell-ca: #85caac;
  --cell-ct: #79c8a8;
}
#generatorApp .picrat-table td.selected {
  outline-color: var(--accent-generate);
}

#generatorApp .context-button-primary {
  background: linear-gradient(135deg, var(--accent-generate) 0%, var(--accent-generate-dark) 100%);
}
#generatorApp .context-button-primary:hover {
  box-shadow: 0 4px 16px rgba(72,187,120,0.3);
}
#generatorApp .context-button-secondary {
  color: var(--accent-generate);
}
#generatorApp .pill-option:hover {
  border-color: var(--accent-generate);
  background: var(--accent-generate-bg);
}
#generatorApp .pill-option.active {
  background: #a7f3d0;
  border-color: #34d399;
  color: #276749;
}
#generatorApp .form-textarea:focus,
#generatorApp .form-input:focus {
  border-color: var(--accent-generate);
  box-shadow: 0 0 0 3px rgba(72,187,120,0.15);
}
#generatorApp .context-slide-form {
  background: var(--accent-generate-bg);
  border-left-color: var(--accent-generate);
}

/* Step labels */
.gen-step { margin-bottom: 1.25rem; }
.gen-step-label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.88rem; font-weight: 600; color: var(--text-main);
  margin-bottom: 0.6rem;
}
.gen-step-num {
  width: 1.4rem; height: 1.4rem; background: var(--accent-generate); color: #fff;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}

/* Subject/age buttons */
.generator-buttons-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.subject-btn, .age-btn {
  padding: 0.45rem 0.85rem; background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius-md); cursor: pointer; font-size: 0.88rem;
  font-family: var(--font-main); display: inline-flex; align-items: center;
  gap: 0.4rem; transition: all 0.2s ease; color: var(--text-main);
}
.subject-btn:hover, .age-btn:hover {
  border-color: var(--accent-generate); background: var(--accent-generate-bg);
}
.subject-btn.active, .age-btn.active {
  background: #a7f3d0; border-color: #34d399;
  color: #276749; font-weight: 600;
  box-shadow: 0 2px 8px rgba(72,187,120,0.15);
}

/* Generate action row */
.gen-action-row {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.25rem 0 0.75rem;
}
.gen-generate-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.8rem; font-size: 0.95rem; font-weight: 600;
  color: #fff; background: linear-gradient(135deg, var(--accent-generate) 0%, var(--accent-generate-dark) 100%);
  border: none; border-radius: var(--radius-md); cursor: pointer;
  font-family: var(--font-main); transition: all 0.25s ease;
  box-shadow: 0 2px 10px rgba(72,187,120,0.3);
}
.gen-generate-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(72,187,120,0.4);
}
.gen-generate-btn:disabled {
  background: #cbd5e0; color: #a0aec0; cursor: not-allowed;
  box-shadow: none; transform: none;
}

/* Scenario hero — minimal inline label */
.gen-scenario-hero {
  background: none; border: none; border-radius: 0;
  padding: 0; margin: 0;
  font-size: 0.82rem; line-height: 1.4; color: var(--text-muted);
  display: none;
}
.gen-scenario-hero h3 { display: none; }
.gen-scenario-hero p { margin: 0; }

/* Matrix wrapper */
.gen-matrix-wrap { margin-top: 0.5rem; }
.gen-matrix-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.6rem; flex-wrap: wrap; gap: 0.5rem;
}
.gen-matrix-title-group {
  display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; flex: 1; flex-wrap: wrap;
}
.gen-matrix-title {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 1.1rem; font-weight: 700; color: var(--text-main); margin: 0;
  white-space: nowrap; flex-shrink: 0;
}
.gen-matrix-lesson {
  font-size: 0.82rem; color: var(--text-muted); font-weight: 400;
  line-height: 1.4;
}
.gen-matrix-actions {
  display: flex; align-items: center; gap: 0.5rem;
}
.gen-refresh-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.85rem; font-size: 0.78rem; font-weight: 600;
  border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font-main); transition: all 0.2s ease;
  border: 1.5px solid var(--border); background: #fff; color: var(--text-muted);
}
.gen-refresh-btn:hover { border-color: var(--accent-generate); color: var(--accent-generate); }

/* CSS Grid matrix (4 cols: label + 3 cells) */
.gen-grid {
  display: grid;
  grid-template-columns: 90px repeat(3, 1fr);
  gap: 0.6rem;
}
.gen-grid-corner { /* empty top-left */ }
.gen-col-header {
  text-align: center; font-weight: 700; font-size: 0.82rem;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
  padding-bottom: 0.3rem;
}
.gen-row-label {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.82rem; color: var(--text-main);
  text-transform: uppercase; letter-spacing: 0.03em;
  writing-mode: horizontal-tb; padding-right: 0.25rem;
}

/* Cell styling */
.gen-cell {
  border-radius: var(--radius-md); padding: 0.9rem;
  font-size: 0.85rem; color: var(--text-main); line-height: 1.5;
  transition: all 0.25s ease; min-height: 130px;
  display: flex; flex-direction: column;
  border: 1.5px solid rgba(0,0,0,0.06);
  cursor: pointer; position: relative;
  box-shadow: var(--shadow-sm);
}
.gen-cell:hover {
  box-shadow: var(--shadow-md); transform: translateY(-2px);
  border-color: rgba(72,187,120,0.3);
}
.gen-cell::after {
  content: ''; position: absolute; bottom: 0.5rem; right: 0.5rem;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: rgba(255,255,255,0.7); display: flex; align-items: center;
  justify-content: center; opacity: 0; transition: opacity 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2348bb78' stroke-width='2.5'%3E%3Cpath d='M7 17l9.2-9.2M17 17V7H7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 0.7rem;
}
.gen-cell:hover::after { opacity: 1; }
.gen-cell-loading {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 80px;
}

/* Cell colour classes */
.cell-pr { background-color: var(--cell-pr); }
.cell-pa { background-color: var(--cell-pa); }
.cell-pt { background-color: var(--cell-pt); }
.cell-ir { background-color: var(--cell-ir); }
.cell-ia { background-color: var(--cell-ia); }
.cell-it { background-color: var(--cell-it); }
.cell-cr { background-color: var(--cell-cr); }
.cell-ca { background-color: var(--cell-ca); }
.cell-ct { background-color: var(--cell-ct); }

/* Cell inner elements */
.gen-cell-tool {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-weight: 700; font-size: 0.88rem; margin-bottom: 0.4rem;
  color: var(--text-main);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.gen-cell-tool .tool-icon {
  width: 0.85rem; height: 0.85rem; opacity: 0.7;
}
.gen-cell-desc {
  font-size: 0.82rem; line-height: 1.5; flex-grow: 1; color: var(--text-main);
  overflow: hidden; overflow-wrap: break-word; word-wrap: break-word;
}
.gen-cell-regen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.08);
  cursor: pointer; position: absolute; top: 0.5rem; right: 0.5rem;
  opacity: 0; transition: opacity 0.2s; z-index: 2;
}
.gen-cell:hover .gen-cell-regen { opacity: 1; }
.gen-cell-regen:hover { background: #fff; border-color: var(--accent-generate); }

/* Matrix hint */
.gen-matrix-hint {
  display: flex; align-items: center; gap: 0.35rem; justify-content: center;
  font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem;
  font-style: italic;
}

/* Tool resources box */
.gen-tools-box {
  margin-top: 1.75rem; padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #f0f7ff 0%, #f0fdf4 100%);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.gen-tools-title {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 1rem; font-weight: 700; color: var(--text-main);
  margin: 0 0 0.85rem;
}
.gen-tools-grid {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
}
.gen-tools-grid button {
  padding: 0.5rem 0.9rem; background: #fff;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  color: var(--accent-generate); cursor: pointer; transition: all 0.2s ease;
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-main); font-size: 0.82rem; font-weight: 600;
}
.gen-tools-grid button:hover {
  border-color: var(--accent-generate); background: var(--accent-generate-bg);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.tool-link-icon { width: 14px; height: 14px; }

/* Tips card */
.gen-tips-card {
  margin-top: 1.75rem; padding: 1.1rem 1.25rem;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: var(--radius-lg);
}
.gen-tips-title {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.95rem; font-weight: 700; color: var(--text-main);
  margin: 0 0 0.75rem;
}
.gen-tips-content { display: flex; flex-direction: column; gap: 0.6rem; }
.gen-tip {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.85rem; line-height: 1.55; color: var(--text-main);
}
.gen-tip-icon {
  width: 1.5rem; height: 1.5rem; min-width: 1.5rem;
  background: #fef3c7; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #b45309; margin-top: 0.1rem;
}

/* Footer / start over */
.gen-footer {
  margin-top: 1.5rem; text-align: center;
}
.gen-bridges {
  margin-bottom: 1rem; text-align: left;
}
.gen-start-over {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.45rem 1rem; font-size: 0.8rem; font-weight: 600;
  color: var(--text-muted); background: none; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font-main); transition: all 0.2s;
}
.gen-start-over:hover { border-color: var(--accent-generate); color: var(--accent-generate); }

/* Cell detail drawer */
.gen-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.gen-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.gen-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 90vw); background: #fff;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  z-index: 1000; transform: translateX(100%);
  transition: transform 0.3s ease; display: flex; flex-direction: column;
  overflow: hidden;
}
.gen-drawer.open { transform: translateX(0); }
.gen-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.gen-drawer-title {
  font-size: 1rem; font-weight: 700; color: var(--text-main); margin: 0;
}
.gen-drawer-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 0.25rem; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s;
}
.gen-drawer-close:hover { color: var(--text-main); }
.gen-drawer-body {
  padding: 1.25rem; overflow-y: auto; flex-grow: 1;
}

/* ── Drawer hero header ── */
.gen-drawer-hero {
  margin: -1.25rem -1.25rem 1.25rem;
  padding: 1.5rem 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.gen-drawer-hero-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(0,0,0,0.55);
  background: rgba(255,255,255,0.7);
  margin-bottom: 0.6rem;
}
.gen-drawer-hero-tool {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 0.35rem;
  line-height: 1.2;
}
.gen-drawer-hero-partner {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #9A4B16;
  background: rgba(232,113,43,0.1);
  border-radius: 3px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.gen-drawer-hero-desc {
  font-size: 0.78rem;
  color: rgba(0,0,0,0.5);
  line-height: 1.4;
}
.gen-drawer-hero-sep {
  margin: 0 0.35rem;
  opacity: 0.5;
}

/* ── Content cards ── */
.gen-drawer-card {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
}
.gen-drawer-card-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-generate-bg);
  color: var(--accent-generate);
  margin-top: 0.1rem;
}
.gen-drawer-card-content {
  flex: 1;
  min-width: 0;
}
.gen-drawer-card-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}
.gen-drawer-card-content p {
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--text-main);
  margin: 0;
}

/* ── Actions section ── */
.gen-drawer-actions {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.gen-drawer-action-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-family: var(--font-main);
  text-align: left;
  text-decoration: none;
  color: var(--text-main);
  transition: all 0.2s;
}
.gen-drawer-action-btn:hover {
  border-color: var(--accent-generate);
  box-shadow: 0 1px 4px rgba(72,187,120,0.12);
}
.gen-drawer-action-btn svg {
  flex-shrink: 0;
}
.gen-drawer-action-btn span {
  display: flex;
  flex-direction: column;
}
.gen-drawer-action-btn strong {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
}
.gen-drawer-action-btn small {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.3;
  margin-top: 0.1rem;
}
/* Flint variant */
.gen-drawer-action-btn--flint {
  background: #FEF5EE;
  border-color: #FBCDA8;
  color: #9A4B16;
}
.gen-drawer-action-btn--flint:hover {
  border-color: #E8712B;
  box-shadow: 0 1px 4px rgba(232,113,43,0.15);
}
.gen-drawer-action-btn--flint strong { color: #9A4B16; }
.gen-drawer-action-btn--flint small { color: #C47A3A; }
/* Open tool variant */
.gen-drawer-action-btn--open {
  background: var(--accent-generate-bg);
  border-color: #9ae6b4;
  color: var(--accent-generate-dark);
}
.gen-drawer-action-btn--open:hover {
  border-color: var(--accent-generate);
  box-shadow: 0 1px 4px rgba(72,187,120,0.15);
}
.gen-drawer-action-btn--open strong { color: var(--accent-generate-dark); }
/* Training variant */
.gen-drawer-action-btn--training {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.gen-drawer-action-btn--training:hover {
  border-color: #22c55e;
  box-shadow: 0 1px 4px rgba(34,197,94,0.15);
}
.gen-drawer-action-btn--training strong { color: #166534; }
.gen-drawer-action-btn--training small { color: #15803d; }
/* Auto-lookup loading variant */
.gen-drawer-action-btn--add {
  background: var(--bg-light); border-style: dashed; cursor: default;
}
.gen-drawer-action-btn--add strong { color: var(--text-muted); }
.gen-drawer-action-btn--add small { color: var(--text-light); }
/* Regen variant */
.gen-drawer-action-btn--regen {
  background: var(--bg-surface);
}
.gen-drawer-action-btn--regen strong { color: var(--text-main); }

/* Loading spinner (for generate button) */
.loading-spinner {
  display: inline-block; width: 1.2rem; height: 1.2rem;
  margin-right: 0.35rem;
  border: 2.5px solid rgba(255,255,255,0.3); border-radius: 50%;
  border-top-color: #fff; animation: spin 1s ease-in-out infinite;
}

/* Generate responsive */
@media (max-width: 768px) {
  .gen-grid { grid-template-columns: 70px repeat(3, 1fr); gap: 0.4rem; }
  .gen-cell { padding: 0.7rem; min-height: 120px; }
  .gen-row-label { font-size: 0.7rem; }
  .gen-col-header { font-size: 0.7rem; }
}
@media (max-width: 640px) {
  .gen-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .gen-grid-corner, .gen-col-header { display: none; }
  .gen-row-label {
    writing-mode: horizontal-tb; justify-content: flex-start;
    padding: 0.5rem 0 0.2rem; font-size: 0.78rem;
  }
  .gen-cell { min-height: auto; }
  .gen-matrix-header { flex-direction: column; align-items: flex-start; }
  /* Show R/A/T labels on each cell when column headers are hidden */
  .gen-cell.cell-cr::before,
  .gen-cell.cell-ir::before,
  .gen-cell.cell-pr::before { content: 'Replace'; }
  .gen-cell.cell-ca::before,
  .gen-cell.cell-ia::before,
  .gen-cell.cell-pa::before { content: 'Amplify'; }
  .gen-cell.cell-ct::before,
  .gen-cell.cell-it::before,
  .gen-cell.cell-pt::before { content: 'Transform'; }
  .gen-cell::before {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(0,0,0,0.45);
    background: rgba(255,255,255,0.5);
    padding: 0.15rem 0.5rem;
    border-radius: 2rem;
    margin-bottom: 0.35rem;
    align-self: flex-start;
  }
}


/* =============================================
   PRACTICE — header right: level bar + start over
   ============================================= */

.practice-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: #b45309;
  background: linear-gradient(135deg, #fef3c7, #fff7ed);
  border: 1px solid #fde68a;
  border-radius: 20px;
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
  margin-left: auto;
}

.level-bar {
  min-width: 200px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
}

.level-bar-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

/* Inline gem SVG icons */
.gem-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.level-bar-name {
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

.level-bar-points {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.level-bar-track {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.level-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease, background 0.4s ease;
}

.level-bar-next {
  display: block;
  font-size: 0.6rem;
  color: var(--text-muted);
  opacity: 0.65;
  margin-top: 0.45rem;
  line-height: 1;
}

.level-bar:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}

/* =============================================
   PROGRESS DRAWER
   ============================================= */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.progress-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 90vw;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.progress-drawer.open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.drawer-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.25rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.drawer-close:hover {
  background: #f1f5f9;
  color: var(--text-primary);
}

.drawer-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
}

/* Level hero section */
.drawer-level-hero {
  text-align: center;
  padding: 1.25rem 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #f1f5f9;
}

.drawer-level-gem {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.drawer-level-name {
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}

.drawer-level-points {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Weekly streak hero */
.drawer-weekly-streak {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: linear-gradient(135deg, #fef3c7, #fff7ed);
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 1rem;
}

.drawer-weekly-flame {
  font-size: 1.6rem;
  line-height: 1;
}

.drawer-weekly-info {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.drawer-weekly-count {
  font-size: 1.35rem;
  font-weight: 800;
  color: #b45309;
}

.drawer-weekly-label {
  font-size: 0.7rem;
  color: #92400e;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.drawer-weekly-best {
  font-size: 0.6rem;
  color: #b45309;
  opacity: 0.7;
  white-space: nowrap;
}

/* Stats grid */
.drawer-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.drawer-stat {
  text-align: center;
  padding: 0.65rem 0.25rem;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
}

.drawer-stat-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.drawer-stat-label {
  font-size: 0.6rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
}

/* Section title */
.drawer-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 0.75rem 0;
}

/* Quiz insight card */
.drawer-insight-card {
  background: #f0f7ff;
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
}
.drawer-insight-card--pending {
  background: var(--bg-light);
  border-left-color: var(--border);
}
.drawer-insight-header {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.drawer-insight-icon { font-size: 0.875rem; }
.drawer-insight-text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-main);
  margin: 0;
}
.drawer-insight-text + .drawer-insight-text {
  margin-top: 0.625rem;
}
.drawer-insight-card--pending .drawer-insight-text {
  color: var(--text-muted);
}

/* Gem ladder */
.drawer-gem-ladder {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.gem-ladder-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  position: relative;
}

.gem-ladder-row.gem-ladder-unlocked {
  background: #f8fafc;
}

.gem-ladder-row.gem-ladder-current {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
}

.gem-ladder-row.gem-ladder-locked {
  opacity: 0.45;
}

.gem-ladder-emoji {
  font-size: 1.25rem;
  width: 2rem;
  text-align: center;
  flex-shrink: 0;
}

.gem-ladder-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.gem-ladder-name {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.gem-ladder-threshold {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.gem-ladder-date {
  font-size: 0.6rem;
  color: var(--text-muted);
  opacity: 0.7;
  font-style: italic;
}

.gem-ladder-status {
  flex-shrink: 0;
  font-size: 0.8rem;
  min-width: 3.5rem;
  text-align: right;
}

.gem-ladder-connector {
  width: 2px;
  height: 0.5rem;
  background: #e2e8f0;
  margin-left: calc(0.75rem + 1rem);
}

.gem-ladder-connector-unlocked {
  background: #93c5fd;
}

/* Mobile: drawer from bottom */
@media (max-width: 480px) {
  .progress-drawer {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 85vh;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }

  .progress-drawer.open {
    transform: translateY(0);
  }

  .drawer-header {
    position: relative;
  }

  .drawer-header::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 4px;
    background: #d1d5db;
    border-radius: 999px;
  }
}

/* =============================================
   ANALYSE DRAWER
   ============================================= */
.analyse-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 90vw;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.analyse-drawer.open {
  transform: translateX(0);
}

/* Coach drawer */
.coach-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 90vw;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.coach-drawer.open {
  transform: translateX(0);
}
/* Coach drawer items now use shared .history-card styles */

/* Matrix hero inside drawer */
.drawer-matrix-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}
.drawer-matrix-hero .picrat-container {
  box-shadow: none;
  border: none;
  padding: 0;
}
.drawer-matrix-hero .matrix-insight {
  margin-top: 0.5rem;
  border-top: none;
  padding-top: 0;
}

/* Smart insight nudge */
.drawer-insight {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #744210;
}
.drawer-insight i { color: #d69e2e; margin-top: 0.1rem; }
.drawer-insight strong { color: #744210; }
.drawer-insight--success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #276749;
}
.drawer-insight--success i { color: #10b981; }
.drawer-insight--success strong { color: #276749; }
.drawer-insight--loading {
  background: #f7fafc;
  border-color: #e2e8f0;
  color: var(--text-muted);
}
.drawer-insight--loading i { color: var(--primary); }
@keyframes insightPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.drawer-insight--loading span {
  animation: insightPulse 1.5s ease-in-out infinite;
}

/* Matrix subtitle (replaces stat cards) */
.drawer-matrix-subtitle {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
  font-weight: 500;
}

/* Next step buttons */
.drawer-next-steps {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.drawer-next-step-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
  background: var(--primary);
  color: #fff;
}
.drawer-next-step-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.drawer-next-step-btn--secondary {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.drawer-next-step-btn--secondary:hover {
  background: #eff6ff;
}

/* Mini distribution bars */
.drawer-bars {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.drawer-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.drawer-bar-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  width: 5.5rem;
  text-align: right;
  flex-shrink: 0;
}
.drawer-bar-track {
  flex: 1;
  height: 0.5rem;
  background: #f1f5f9;
  border-radius: 1rem;
  overflow: hidden;
}
.drawer-bar-fill {
  height: 100%;
  border-radius: 1rem;
  transition: width 0.4s ease;
  min-width: 2px;
}
.drawer-bar-value {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-main);
  width: 2rem;
  text-align: right;
  flex-shrink: 0;
}

/* Recent history list */
.drawer-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.drawer-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.65rem;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
}
.drawer-history-cell {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
}
.drawer-history-meta {
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* Analyse history list in drawer */
.analyse-history-section {
  padding: 0 0.2rem;
}
.analyse-history-heading {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 1rem 0 0.5rem 0.3rem;
}
.analyse-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.analyse-history-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.analyse-history-card:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.analyse-history-card-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.analyse-history-card-body {
  flex: 1;
  min-width: 0;
}
.analyse-history-card-title {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.analyse-history-card-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}
.analyse-history-delete {
  background: none;
  border: none;
  padding: 0.3rem;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
}
.analyse-history-card:hover .analyse-history-delete {
  opacity: 1;
}
.analyse-history-delete:hover {
  color: #ef4444;
}

/* Mobile: analyse drawer from bottom */
@media (max-width: 480px) {
  .analyse-drawer {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 85vh;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .analyse-drawer.open {
    transform: translateY(0);
  }
}

/* =============================================
   PRACTICE — two-column game layout
   ============================================= */

.practice-columns {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: start;
}

.practice-col-left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.practice-col-right {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* =============================================
   PRACTICE — summary stats
   ============================================= */

.summary-stats {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.25rem 0;
  flex-wrap: wrap;
}

.summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  min-width: 100px;
}

.summary-stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}

.summary-stat-value.perfect-glow {
  color: #d97706;
  text-shadow: 0 0 8px rgba(217, 119, 6, 0.3);
}

.summary-stat-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.15rem;
}

.summary-stat-detail {
  font-size: 0.7rem;
  color: var(--text-light);
  margin-top: 0.1rem;
}

/* Level progress in summary */
.summary-level-progress {
  width: 100%;
  max-width: 360px;
  margin: 0.75rem auto 1rem;
  padding: 0.75rem 1rem;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: var(--radius-md);
}

.summary-level-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.summary-level-detail {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  font-weight: 600;
}

/* Summary messages */
.summary-message {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
}

.summary-perfect {
  color: #92400e;
  background: #fef3c7;
}

.summary-great {
  color: #065f46;
  background: #d1fae5;
}

.summary-good {
  color: #1e40af;
  background: #dbeafe;
}

.summary-keep {
  color: #6b7280;
  background: #f3f4f6;
}

/* =============================================
   PRACTICE — scenario card, matrix, feedback
   ============================================= */

/* Game view wrapper */
#game-view, .game-view {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
}

.scenario-card {
  background: var(--accent-practice-bg);
  border: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--accent-practice);
  margin-bottom: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.scenario-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.scenario-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-practice);
  font-weight: 800;
  margin-bottom: 0;
}

.tier-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  transition: all 0.4s ease;
}

.tier-label.tier-1 {
  background: #dbeafe;
  color: #1e40af;
}

.tier-label.tier-2 {
  background: #fef3c7;
  color: #92400e;
}

.tier-label.tier-3 {
  background: #fce7f3;
  color: #9d174d;
}

/* Tier escalation pulse */
@keyframes tierPulse {
  0% { transform: scale(1); box-shadow: none; }
  30% { transform: scale(1.25); box-shadow: 0 0 12px rgba(99, 102, 241, 0.4); }
  100% { transform: scale(1); box-shadow: none; }
}

.tier-pulse {
  animation: tierPulse 0.8s ease-out;
}

/* Level-up glow on summary */
@keyframes levelUpGlow {
  0% { text-shadow: none; transform: scale(1); }
  30% { text-shadow: 0 0 16px currentColor; transform: scale(1.1); }
  100% { text-shadow: none; transform: scale(1); }
}

.level-up-glow {
  animation: levelUpGlow 1s ease-out;
}

.scenario-text {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
}

.progress-bar-track {
  width: 100%;
  background: var(--border-light);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.progress-bar-fill {
  width: 0;
  height: 100%;
  background: var(--primary-gradient);
  transition: width 0.3s ease;
  border-radius: 4px;
}

/* Matrix wrapper */
.matrix-wrapper {
  display: flex;
  justify-content: center;
  margin: 0;
}

/* Practice matrix cells — force equal squares */
.matrix-cell {
  width: 5.5rem;
  height: 5.5rem;
  min-width: 5.5rem;
  min-height: 5.5rem;
  aspect-ratio: 1;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: #ffffff;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  vertical-align: middle;
  font-weight: 800;
  color: #4a5568;
  font-size: 1.1rem;
  padding: 0;
}

.matrix-cell:hover {
  background-color: #eff6ff;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.matrix-cell:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  background-color: #eff6ff;
  border-color: var(--primary);
}

.matrix-cell.correct {
  background-color: #C6F6D5 !important;
  border-color: #38A169 !important;
  color: #064e3b;
  animation: pulse-green 0.5s;
}

.matrix-cell.incorrect {
  background-color: #FED7D7 !important;
  border-color: #E53E3E !important;
}

.matrix-cell.nearmiss {
  background-color: #FEF3C7 !important;
  border-color: #D97706 !important;
  color: #7f1d1d;
  animation: shake 0.4s;
}

.matrix-cell.dimmed {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* Feedback area */
#feedback-area {
  display: none;
  padding: 1rem;
  border-radius: var(--radius-sm);
  margin-top: 0.25rem;
  animation: slideUp 0.3s ease-out;
  font-size: 1rem;
}

.feedback-card {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  margin-top: 0.5rem;
}

.feedback-card.correct, .feedback-correct { background: #ecfdf5; border: 1px solid #a7f3d0; color: #064e3b; }
.feedback-card.incorrect, .feedback-incorrect { background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; }
.feedback-card.feedback-nearmiss { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }

.feedback-title {
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#feedback-text { line-height: 1.5; }

.nearmiss-actions {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid #fde68a;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Next button */
.next-btn {
  background: linear-gradient(135deg, var(--accent-practice) 0%, var(--accent-practice-dark) 100%);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  margin-top: auto;
  transition: var(--transition);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-md);
  font-family: var(--font-main);
}
.next-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* Summary view (results) */
#summary-view, .results-summary {
  display: none;
  text-align: center;
  padding: 2rem 1rem;
}

.trophy-icon {
  margin-bottom: 1rem;
  color: #48BB78;
}

/* Practice animations */
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes pulse-green { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* Practice mobile responsive */
@media (max-width: 900px) {
  .practice-columns {
    grid-template-columns: 1fr;
  }
  /* Reorder: scenario card first, matrix second, feedback + next below */
  .practice-col-left { order: 1; }
  .practice-col-right { order: 2; justify-content: center; }
  /* Move feedback and next button below the matrix */
  .practice-col-left {
    display: contents;
  }
  .scenario-card { order: 1; }
  .feedback-card { order: 3; }
  .next-btn { order: 4; }
  .practice-col-right { order: 2; }
  .practice-header-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
  }
  .level-bar { min-width: 150px; }
}

@media (max-width: 768px) {
  .scenario-text { font-size: 1rem; }
  .scenario-card { padding: 0.75rem 1rem; }
  .matrix-cell { width: 4rem; height: 4rem; min-width: 4rem; min-height: 4rem; font-size: 0.85rem; border-width: 2px; aspect-ratio: 1; }
  .feedback-card { padding: 0.75rem 1rem; font-size: 0.92rem; }
  .feedback-title { font-size: 1rem; }
  .next-btn { font-size: 0.95rem; padding: 0.6rem; }
  .summary-stats { gap: 0.75rem; }
  .summary-stat { padding: 0.5rem 0.75rem; min-width: 80px; }
  .summary-stat-value { font-size: 1.4rem; }
  /* Tighter quiz layout at tablet */
  .progress-bar-track { height: 6px; margin-bottom: 0.6rem; }
  #game-view, .game-view { gap: 0.35rem; }
  .practice-columns { gap: 0.75rem; }
}

@media (max-width: 600px) {
  .matrix-cell { width: 3.5rem; height: 3.5rem; min-width: 3.5rem; min-height: 3.5rem; font-size: 0.8rem; aspect-ratio: 1; }
  .scenario-text { font-size: 0.95rem; }
  /* Compact quiz header: inline level bar beside title */
  #practiceApp .tool-page-header {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
  }
  #practiceApp .tool-page-header h1 { font-size: 1.15rem; }
  #practiceApp .tool-page-header .header-subtitle { display: none; }
  .practice-header-right {
    width: auto;
    flex-direction: row;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
  }
  .level-bar {
    min-width: unset;
    width: auto;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
  }
  .level-bar-info { gap: 0.35rem; margin-bottom: 0.2rem; }
  .level-bar-name { font-size: 0.75rem; }
  .level-bar-points { font-size: 0.6rem; }
  .level-bar-track { height: 5px; }
  .level-bar-next { display: none; }
  /* Shrink progress bar */
  .progress-bar-track { height: 4px; margin-bottom: 0.4rem; }
  /* Compact scenario card */
  .scenario-card { padding: 0.6rem 0.85rem; }
  .scenario-header { margin-bottom: 0.3rem; }
  .scenario-label { font-size: 0.75rem; }
  .tier-label { font-size: 0.7rem; padding: 0.15rem 0.5rem; }
  /* Tighten game view spacing */
  #game-view, .game-view { gap: 0.25rem; }
  .practice-columns { gap: 0.5rem; }
  /* Compact feedback */
  .feedback-card { padding: 0.5rem 0.75rem; margin-top: 0.25rem; }
  .feedback-title { font-size: 0.9rem; gap: 0.3rem; }
  #feedback-text { font-size: 0.85rem; }
  .nearmiss-actions { margin-top: 0.4rem; padding-top: 0.4rem; font-size: 0.82rem; }
  /* Compact next button */
  .next-btn { padding: 0.5rem; font-size: 0.9rem; margin-top: 0.25rem; }
  /* Shrink start-over in quiz to save space */
  #practiceApp .start-over-link { padding: 0.35rem 0 0.15rem; }
  #practiceApp .start-over-link button { font-size: 0.72rem; }
}

@media (max-width: 480px) {
  .scenario-text { font-size: 0.9rem; line-height: 1.35; }
  .matrix-cell { width: 3.2rem; height: 3.2rem; min-width: 3.2rem; min-height: 3.2rem; font-size: 0.75rem; aspect-ratio: 1; }
  .axis-label-y, .axis-label-x { font-size: 0.7rem; }
  .feedback-card { font-size: 0.85rem; }
  .summary-stats { flex-direction: column; align-items: center; gap: 0.5rem; }
  .summary-stat { width: 100%; max-width: 200px; }
  .practice-header-right { width: auto; }
  .level-bar { min-width: unset; }
  #practiceApp .tool-page-header h1 { font-size: 1.05rem; }
  .scenario-card { padding: 0.5rem 0.75rem; }
  .scenario-text { font-size: 0.88rem; }
  /* Even tighter progress bar */
  .progress-bar-track { height: 3px; margin-bottom: 0.3rem; }
}


/* =============================================
   COACH — chat interface
   ============================================= */

.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 240px);
  min-height: 400px;
  gap: 1rem;
}

/* Legacy .chat-header — now handled by .tool-page-header */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-header h1 {
  font-size: 1.75rem;
  font-weight: 800;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background-color: var(--bg-light);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Message class (used by coach.js — generates .message .icon .text structure) */
.message {
  display: flex;
  gap: 0.75rem;
  max-width: 85%;
  animation: msgSlideIn 0.25s ease-out both;
}

@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.message .icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.85rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.message .text {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  line-height: 1.65;
  font-size: 0.95rem;
}

/* --- User messages --- */
.message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.message.user .icon {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
}
.message.user .text {
  background-color: #eff6ff;
  color: #2c5282;
  box-shadow: 0 1px 4px rgba(66,153,225,0.1);
  border-bottom-right-radius: 4px;
}

/* --- Bot messages --- */
.message.bot { align-self: flex-start; }
.message.bot .icon {
  background: linear-gradient(135deg, var(--accent-coach), var(--accent-coach-light));
}
.message.bot .text {
  background-color: #ffffff;
  color: var(--text-main);
  border-left: 3px solid var(--accent-coach);
  box-shadow: 0 1px 4px rgba(159,122,234,0.08);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.message.bot .text strong { color: var(--accent-coach-dark); }
.message.bot .text em { color: var(--accent-coach-mid); font-style: italic; }
.message.bot .text p { margin: 0.5rem 0; }
.message.bot .text p:first-child { margin-top: 0; }
.message.bot .text p:last-child { margin-bottom: 0; }


/* Typing indicator — animated dots */
.typing-indicator {
  align-self: flex-start;
}
.typing-indicator .text {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.85rem 1.1rem;
  min-height: 2.5rem;
}
.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--accent-coach);
  opacity: 0.4;
  animation: typingBounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Chat input area */
.chat-input-area {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--border-light);
  padding-top: 0.75rem;
  flex-shrink: 0;
}

.chat-input-row, .main-input-row {
  display: flex;
  gap: 0.5rem;
}

.chat-input-row textarea,
#userInput {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: 0.95rem;
  resize: none;
  min-height: 48px;
  max-height: 120px;
  transition: var(--transition);
  background: var(--white);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}

.chat-input-row textarea:focus,
#userInput:focus {
  outline: none;
  border-color: var(--accent-coach);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04), 0 0 0 3px rgba(159,122,234,0.12);
}

#userInput.shake {
  animation: shake 0.4s ease;
  border-color: #ef4444;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.chat-send-btn,
#sendButton {
  padding: 0 1rem;
  background: linear-gradient(135deg, var(--accent-coach), var(--accent-coach-light));
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-send-btn:hover,
#sendButton:hover { filter: brightness(1.08); transform: translateY(-1px); }
#sendButton:disabled { background: #cbd5e0; cursor: not-allowed; transform: none; }

/* Summary button */
#summaryButton {
  display: none;
  width: 100%;
  background: linear-gradient(135deg, var(--accent-success), var(--accent-success-light));
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.25rem;
  transition: var(--transition);
  font-family: var(--font-main);
  letter-spacing: 0.01em;
}
#summaryButton:hover { filter: brightness(1.06); transform: translateY(-1px); }
#summaryButton:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Summary modal — redesigned */
#summaryModalOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}
#summaryModalContent {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  width: 92%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideUp 0.3s ease-out;
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero header band */
.summary-hero {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--accent-coach);
  color: white;
  position: relative;
}
.summary-close-x {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: background 0.15s ease;
}
.summary-close-x:hover {
  background: rgba(255,255,255,0.35);
}
.summary-hero-grid { flex-shrink: 0; }
.summary-mini-matrix { border-collapse: collapse; }
.summary-mini-matrix th {
  width: 22px;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
}
.summary-mini-matrix td {
  width: 22px;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}
.summary-mini-matrix td.active-cell {
  background: rgba(255,255,255,0.9);
}
.summary-mini-matrix .grid-x {
  color: #ef4444;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.summary-hero-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.summary-hero-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.summary-hero-classification {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Summary body — structured sections */
.summary-body-sections {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.summary-section {
  padding: 0.85rem 1rem 0.85rem 1.1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-light);
  border-left: 3.5px solid #64748b;
}
.summary-section h4 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 0.4rem;
}
.summary-section p {
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--text-main);
  margin: 0;
}
.summary-section--analysis {
  border-left-color: var(--primary);
}
.summary-section--analysis h4 {
  color: var(--primary-dark);
}
.summary-section--next-steps {
  border-left-color: #10b981;
  background: var(--bg-light);
}
.summary-section--next-steps h4 {
  color: #276749;
}
.summary-section--classification {
  border-left-color: var(--accent-coach);
}
.summary-section--classification h4 {
  color: var(--accent-coach-dark);
}

/* Summary loading state */
.summary-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  gap: 1rem;
  color: var(--text-muted);
}
.summary-loading .typing-dot {
  display: inline-block;
}

/* Bridge card */
.summary-bridges {
  padding: 1rem 2rem;
  border-top: 1px solid var(--border-light);
}
.summary-bridges .result-bridge-card {
  max-width: 100%;
}

/* Action bar */
.summary-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--border-light);
  background: #fafbfc;
}
.summary-btn {
  border: none;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.2s ease;
  font-family: var(--font-main);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.summary-btn--pdf {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.summary-btn--pdf:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }
.summary-btn--share {
  background: transparent;
  color: #276749;
  border: 1.5px solid #10b981;
}
.summary-btn--share:hover { background: #10b981; color: #fff; transform: translateY(-1px); }
.summary-btn--copy {
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
}
.summary-btn--copy:hover { background: var(--bg-light); color: var(--text-main); transform: translateY(-1px); }
.summary-btn--close {
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
}
.summary-btn--close:hover { color: var(--text-main); background: var(--bg-light); }

.grid-x { color: #ef4444; font-size: 24px; font-weight: 800; }

/* Inline classification card in chat */
.classification-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  align-self: center;
  background: linear-gradient(135deg, var(--accent-coach-bg), #ede9fe);
  border: 1px solid #e9d8fd;
  border-radius: var(--radius-md);
  padding: 0.6rem 1.25rem;
  margin: 0.25rem 0;
  animation: msgSlideIn 0.3s ease-out both;
}
.classification-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-coach), var(--accent-coach-light));
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.classification-card-text {
  display: flex;
  flex-direction: column;
}
.classification-card-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.classification-card-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-coach-dark);
}

/* Summary button pulse */
@keyframes pulseAttention {
  0% { box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.35); }
  70% { box-shadow: 0 0 0 10px rgba(56, 161, 105, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 161, 105, 0); }
}
#summaryButton.pulse-attention {
  animation: pulseAttention 0.8s ease-out 2;
}

.chat-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-secondary {
  padding: 0.6rem 1rem;
  background: white;
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-main);
}

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

/* Coach mobile responsive */
@media (max-width: 768px) {
  .chat-header { font-size: 1.5rem; padding-bottom: 0.75rem; }
  .chat-container { height: calc(100vh - 200px); }
  .message { max-width: 92%; }
  .message .icon { width: 1.8rem; height: 1.8rem; font-size: 0.75rem; }
  .message .text { padding: 0.65rem 0.85rem; font-size: 0.9rem; }
  #summaryModalContent { width: 96%; max-height: 90vh; }
  .summary-hero { flex-direction: column; gap: 0.6rem; padding: 1rem 1.25rem; }
  .summary-hero-classification { font-size: 1.1rem; }
  .summary-body-sections { padding: 1rem 1.25rem; }
  .summary-actions { padding: 0.75rem 1.25rem; flex-wrap: wrap; }
  .classification-card { padding: 0.5rem 0.85rem; }
  .classification-card-value { font-size: 0.88rem; }
  .coach-drawer { width: 300px; }
}

@media (max-width: 600px) {
  .message { max-width: 95%; }
  .chat-input-row textarea, #userInput { font-size: 0.92rem; }
  .coach-drawer { width: 100vw; max-width: 100vw; }
  .tool-page-header {
    flex-wrap: wrap;
  }
  .tool-page-header .header-buttons {
    width: 100%;
    justify-content: flex-start;
  }
  .result-footer-clean {
    flex-wrap: wrap;
  }
  .result-export-btn-clean {
    padding: 0.55rem 1.25rem;
    font-size: 0.88rem;
  }
}

@media (max-width: 480px) {
  .chat-container { height: calc(100vh - 180px); }
  .message { max-width: 96%; gap: 0.4rem; }
  .message .icon { width: 1.6rem; height: 1.6rem; font-size: 0.65rem; }
  .message .text { padding: 0.55rem 0.7rem; font-size: 0.88rem; line-height: 1.55; }
  .chat-input-row textarea, #userInput { font-size: 0.9rem; min-height: 42px; }
  #summaryModalContent { width: 100%; max-height: 95vh; border-radius: var(--radius-sm); }
  .summary-hero { padding: 0.85rem 1rem; }
  .summary-hero-classification { font-size: 0.95rem; }
  .summary-body-sections { padding: 0.75rem 1rem; gap: 0.5rem; }
  .summary-section { padding: 0.65rem 0.75rem; }
  .summary-actions { gap: 0.35rem; padding: 0.6rem 1rem; }
  .summary-btn { padding: 0.45rem 0.7rem; font-size: 0.82rem; }
  .coach-drawer { width: 100vw; max-width: 100vw; }
  .classification-card { padding: 0.4rem 0.7rem; gap: 0.5rem; }
  .classification-card-badge { width: 1.8rem; height: 1.8rem; font-size: 0.65rem; }
  .classification-card-value { font-size: 0.82rem; }
  .tool-page-header h1 { font-size: 1.3rem; }
  .header-subtitle { font-size: 0.82rem; }
  .tool-page-header {
    flex-wrap: wrap;
  }
  .tool-page-header .header-buttons {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .tool-page-header .reset-button,
  .tool-page-header .clear-button {
    padding: 0.4rem 0.65rem;
    font-size: 0.8rem;
  }
  .pill-option {
    padding: 0.4rem 0.75rem;
    font-size: 0.88rem;
  }
  .pill-select {
    gap: 0.35rem;
  }
  .form-textarea {
    min-height: 120px;
  }
  .result-footer-clean {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .result-export-btn-clean {
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
    text-align: center;
    justify-content: center;
  }
}


/* =============================================
   ADMIN DASHBOARD
   ============================================= */

/* Admin uses tool-container but wider */
.admin-container {
  max-width: 1100px;
}

.admin-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}

.admin-header {
  margin-bottom: 2rem;
}

.admin-header h1 {
  font-size: 1.75rem;
  font-weight: 800;
}

.admin-header p {
  color: var(--text-muted);
}

/* Stat cards */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-main);
}

/* Admin tabs */
.admin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-light);
  margin-bottom: 1.5rem;
  overflow-x: auto;
}

.admin-tab {
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition);
  white-space: nowrap;
  font-family: var(--font-main);
}

.admin-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.admin-tab:hover:not(.active) { color: var(--text-main); }

.admin-panel { display: none; }
.admin-panel.active { display: block; }

/* Smooth fade for date-filter reloads */
.admin-panel, .stat-grid {
  transition: opacity 0.25s ease;
}
.admin-panel.reloading, .stat-grid.reloading {
  opacity: 0.35;
  pointer-events: none;
}

/* Admin tables */
.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border-light);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-light);
}

.admin-table tr:hover td { background: var(--bg-light); }

.admin-table a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.admin-table a:hover { text-decoration: underline; }

/* Heatmap grid */
.heatmap-grid {
  display: grid;
  grid-template-columns: auto repeat(3, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: 4px;
  max-width: 500px;
  margin: 1.5rem auto;
}

.heatmap-cell {
  padding: 1rem;
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
}

.heatmap-header {
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Admin date filter */
.admin-date-filter {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.date-filter-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-right: 0.25rem;
}

.date-pill {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  background: white;
  font-size: 0.72rem;
  font-family: var(--font-main);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}

.date-pill:hover { border-color: var(--primary); color: var(--primary); }
.date-pill.active { background: var(--primary); color: white; border-color: var(--primary); }

/* Admin two-column layout */
.admin-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .admin-two-col { grid-template-columns: 1fr; }
}

/* Confusion matrix grid */
.confusion-grid {
  display: grid;
  grid-template-columns: auto repeat(9, 1fr);
  gap: 2px;
  font-size: 0.7rem;
  max-width: 600px;
}

.confusion-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  border-radius: 3px;
  font-weight: 600;
  min-height: 32px;
}

.confusion-header {
  font-weight: 800;
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Engagement filter pills */
.engagement-filters {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.filter-pill {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  background: white;
  font-size: 0.75rem;
  font-family: var(--font-main);
  cursor: pointer;
  transition: var(--transition);
}

.filter-pill:hover { border-color: var(--primary); }
.filter-pill.active { background: var(--primary); color: white; border-color: var(--primary); }

/* Engagement teacher cards */
.engagement-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: 0.5rem;
  transition: var(--transition);
}

.engagement-card:hover { border-color: var(--primary); background: #f7fafc; }

.engagement-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.engagement-info { flex: 1; min-width: 0; }
.engagement-name { font-weight: 600; font-size: 0.85rem; }
.engagement-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.15rem; }

.engagement-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.engagement-stat-val { font-weight: 700; color: var(--text-main); }

.engagement-actions { flex-shrink: 0; }

.nudge-btn {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
  font-size: 0.7rem;
  font-family: var(--font-main);
  cursor: pointer;
  transition: var(--transition);
}

.nudge-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Nudge modal */
.nudge-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nudge-overlay.hidden { display: none; }

.nudge-modal {
  background: white;
  border-radius: var(--radius-lg, 12px);
  padding: 1.5rem;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* Invite form card */
.invite-form-card {
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}

/* Empty state message */
.admin-empty-msg {
  text-align: center;
  color: var(--text-light);
  padding: 2rem 1rem;
  font-size: 0.9rem;
}

/* Gem level bar in admin */
.admin-gem-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.admin-gem-label {
  font-size: 0.7rem;
  font-weight: 600;
  width: 70px;
  text-align: right;
  flex-shrink: 0;
}

.admin-gem-track {
  flex: 1;
  height: 8px;
  background: #edf2f7;
  border-radius: 4px;
  overflow: hidden;
}

.admin-gem-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.admin-gem-count {
  font-size: 0.7rem;
  color: var(--text-muted);
  width: 30px;
  flex-shrink: 0;
}

/* Coach conversation viewer */
.conv-list-item {
  padding: 1rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: var(--transition);
}

.conv-list-item:hover {
  border-color: var(--primary);
  background: #f7fafc;
}

.conv-title { font-weight: 600; margin-bottom: 0.25rem; }
.conv-meta { font-size: 0.8rem; color: var(--text-muted); }

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.pagination button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0.85rem;
  transition: var(--transition);
}

.pagination button:hover { border-color: var(--primary); color: var(--primary); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination span { font-size: 0.85rem; color: var(--text-muted); }

/* Data Strategy tab */
.data-stat-grid {
  grid-template-columns: repeat(3, 1fr);
}

.data-highlight-card {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: var(--radius-md);
  padding: 1.25rem;
  text-align: center;
}

.data-highlight-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
}

.data-highlight-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

@media (max-width: 640px) {
  .data-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Teacher Profile View */
.profile-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.profile-ai-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

.profile-header-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.profile-identity {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #6366f1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

.profile-name {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 0.15rem 0;
}

.profile-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.profile-tags {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.profile-tag {
  background: #f0f9ff;
  color: #0369a1;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
}

.profile-quick-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.profile-quick-stat {
  text-align: center;
  min-width: 70px;
}

.profile-quick-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
}

.profile-quick-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Profile tabs */
.profile-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--border-light);
  margin-bottom: 1rem;
  overflow-x: auto;
}

.profile-tab {
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition);
  white-space: nowrap;
}

.profile-tab:hover { color: var(--primary); }
.profile-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.profile-panel { display: none; }
.profile-panel.active { display: block; }

/* AI Summary card */
.profile-ai-summary {
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 50%, #fef3c7 100%);
  border: 1px solid #fcd34d;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.profile-ai-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
}

.profile-ai-badge {
  font-weight: 700;
  font-size: 0.85rem;
  color: #92400e;
}

.profile-ai-meta-pills {
  display: flex;
  gap: 0.35rem;
}

.profile-ai-pill {
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
}

.profile-ai-summary-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #78350f;
  margin: 0;
}

.profile-chip {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  font-size: 0.8rem;
  margin: 0.2rem 0.2rem 0.2rem 0;
  background: #f1f5f9;
  color: var(--text-main);
}

.profile-chip--green { background: #ecfdf5; color: #065f46; }
.profile-chip--amber { background: #fffbeb; color: #92400e; }

.profile-ai-insights { display: flex; flex-direction: column; gap: 0.5rem; }
.profile-ai-insight {
  background: white;
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid #f59e0b;
}
.profile-ai-insight-text { font-size: 0.85rem; font-weight: 600; color: var(--text-main); }
.profile-ai-insight-evidence { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.2rem; }

.profile-ai-recs { display: flex; flex-direction: column; gap: 0.5rem; }
.profile-ai-rec {
  background: white;
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid #3b82f6;
}
.profile-ai-rec-action { font-size: 0.85rem; font-weight: 600; color: var(--text-main); }
.profile-ai-rec-rationale { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.2rem; }

.profile-teaching-info {
  background: #f8fafc;
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Confidence timeline */
.confidence-timeline {
  position: relative;
  padding-left: 1.5rem;
}

.confidence-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-light);
}

.confidence-timeline-item {
  position: relative;
  padding-bottom: 1rem;
  display: flex;
  gap: 0.75rem;
}

.confidence-timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: -1.5rem;
  margin-top: 2px;
  border: 2px solid white;
  box-shadow: 0 0 0 1px var(--border-light);
}

.confidence-timeline-content { flex: 1; }
.confidence-timeline-date { font-size: 0.8rem; font-weight: 600; color: var(--text-main); }

@media (max-width: 640px) {
  .profile-header-card { flex-direction: column; }
  .profile-quick-stats { justify-content: flex-start; }
}

/* ── Admin Dashboard responsive ── */
@media (max-width: 768px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .stat-card {
    padding: 1rem;
  }
  .stat-value {
    font-size: 1.5rem;
  }
  .admin-tab {
    padding: 0.6rem 0.85rem;
    font-size: 0.82rem;
  }
  .admin-table th,
  .admin-table td {
    padding: 0.5rem 0.65rem;
    font-size: 0.8rem;
  }
  .confusion-grid {
    font-size: 0.6rem;
    max-width: 100%;
  }
  .confusion-cell {
    padding: 0.2rem;
    min-height: 24px;
  }
  .engagement-card {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .engagement-stats {
    width: 100%;
    justify-content: flex-start;
    gap: 0.75rem;
  }
  .admin-date-filter {
    flex-wrap: wrap;
    gap: 0.3rem;
  }
}

@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
  }
  .stat-card {
    padding: 0.75rem;
  }
  .stat-value {
    font-size: 1.25rem;
  }
  .stat-label {
    font-size: 0.7rem;
  }
  .admin-tabs {
    gap: 0;
    -webkit-overflow-scrolling: touch;
  }
  .admin-tab {
    padding: 0.55rem 0.65rem;
    font-size: 0.78rem;
  }
  .heatmap-grid {
    max-width: 100%;
  }
  .heatmap-cell {
    padding: 0.5rem 0.25rem;
    font-size: 0.72rem;
  }
  .filter-pill {
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  .date-pill {
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  .pagination button {
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
    min-height: 40px;
  }
}


/* =============================================
   UTILITIES
   ============================================= */

/* Generic .btn base (used in practice.ejs) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-main);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--transition);
}

.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 0.85rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.hidden { display: none; }

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-15px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cellFadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Loading spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin: 2rem auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =============================================
   TEACHER ONBOARDING MODAL
   ============================================= */

.onboarding-overlay {
  display: none;
  position: fixed;
  z-index: 10000;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  animation: obFadeIn 0.3s ease;
}
.onboarding-overlay.active {
  display: flex;
}

@keyframes obFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.onboarding-modal {
  background: var(--white);
  width: 94%;
  max-width: 580px;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 90vh;
}

/* --- Top bar (progress + skip) --- */
.onboarding-top-bar {
  position: relative;
}
.onboarding-skip {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  transition: color 0.2s;
  z-index: 1;
}
.onboarding-skip:hover {
  color: var(--text-main);
}

/* --- Progress bar --- */
.onboarding-progress {
  height: 4px;
  background: var(--border-light);
}
.onboarding-progress-bar {
  height: 100%;
  background: var(--primary-gradient);
  transition: width 0.4s ease;
  border-radius: 0 2px 2px 0;
}

/* --- Screens --- */
.onboarding-screen {
  display: none;
  padding: 2rem 2rem 1.5rem;
  animation: obSlideIn 0.3s ease;
  box-sizing: border-box;
  max-width: 100%;
  height: 540px;
  flex-direction: column;
  overflow-y: auto;
}
.onboarding-screen.active {
  display: flex;
}

@keyframes obSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.onboarding-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.2rem;
}
.onboarding-subtitle {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

/* --- Navigation --- */
.onboarding-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-light);
}
.onboarding-nav button {
  padding: 0.7rem 1.25rem;
  font-size: 0.9rem;
}
.onboarding-nav .btn-primary,
.onboarding-nav .onboarding-finish {
  min-width: 120px;
  width: auto;
}
.onboarding-nav .btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Screen 1: Age groups --- */
.age-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.age-group-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
.age-group-btn:hover {
  border-color: var(--primary);
  background: #eff6ff;
}
.age-group-btn.active {
  border-color: var(--primary);
  background: var(--primary-gradient);
  color: var(--white);
}
.age-label {
  font-size: 1.05rem;
  font-weight: 600;
}
.age-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
.age-group-btn.active .age-hint {
  color: rgba(255, 255, 255, 0.8);
}

/* --- Screen 2: Role fork --- */
.role-fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
}
.role-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}
.role-btn:hover {
  border-color: var(--primary);
  background: #eff6ff;
}
.role-btn.active {
  border-color: var(--primary);
  background: var(--primary-gradient);
  color: var(--white);
}
.role-btn.active .role-icon { color: var(--white); }
.role-icon {
  color: var(--primary);
  flex-shrink: 0;
}
.role-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.role-text strong {
  font-size: 0.95rem;
}
.role-text small {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.role-btn.active .role-text small {
  color: rgba(255, 255, 255, 0.8);
}

/* --- Screen 2: Subject grid --- */
.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
  gap: 0.35rem;
}
.subject-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.3rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  min-height: 60px;
}
.subject-btn:hover {
  border-color: var(--primary);
  background: #eff6ff;
}
.subject-btn.active {
  border-color: var(--primary);
  background: #eff6ff;
  box-shadow: 0 0 0 2px var(--primary);
}
.subject-btn.primary-subject {
  border-color: var(--primary);
  background: #eff6ff;
  box-shadow: 0 0 0 2px var(--primary);
}

/* Star toggle for marking main subject */
.subject-star {
  display: none;
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-light);
  transition: color 0.2s, transform 0.2s;
  z-index: 1;
}
.subject-star:hover {
  color: var(--primary);
  transform: scale(1.2);
}
.subject-btn.active .subject-star {
  display: block;
}
.subject-btn.primary-subject .subject-star {
  display: block;
  color: var(--primary);
  font-size: 1rem;
}
.subject-btn {
  position: relative;
}
.subject-emoji {
  font-size: 1.3rem;
  line-height: 1;
  margin-bottom: 0.15rem;
}
.subject-name {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}
.subject-btn.primary-subject .subject-name {
  color: var(--text-main);
}

/* --- Screen 3: Confidence --- */
.confidence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.confidence-heading {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.6rem;
}
.confidence-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.confidence-option {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding: 0.85rem 0.75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}
.confidence-option:hover {
  border-color: var(--primary);
  background: #eff6ff;
}
.confidence-option.active {
  border-color: var(--primary);
  background: var(--primary-gradient);
  color: var(--white);
}
.confidence-label {
  font-weight: 600;
  font-size: 0.88rem;
}
.confidence-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  line-height: 1.3;
}
.confidence-option.active .confidence-sub {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Screen 4: Goals --- */
.goals-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.goal-btn {
  padding: 0.55rem 1rem;
  border: 2px solid var(--border);
  border-radius: 50px;
  background: var(--white);
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-main);
}
.goal-btn:hover {
  border-color: var(--primary);
  background: #eff6ff;
}
.goal-btn.active {
  border-color: var(--primary);
  background: var(--primary-gradient);
  color: var(--white);
}

.free-text-wrap {
  margin-bottom: 0.25rem;
}
.free-text-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.free-text-input {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 0.88rem;
  resize: vertical;
  transition: border-color 0.2s;
}
.free-text-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

/* --- Welcome screen (Screen 0) --- */
.welcome-screen {
  text-align: center;
  padding: 1.5rem 1rem 0.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.welcome-logo {
  margin-bottom: 1.25rem;
}
.welcome-grid {
  width: 72px;
  height: 72px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  border-radius: 8px;
  overflow: hidden;
}
.welcome-grid .hero-grid-cell:nth-child(1) { background: #9CC0E8; }
.welcome-grid .hero-grid-cell:nth-child(2) { background: #8EB7E5; }
.welcome-grid .hero-grid-cell:nth-child(3) { background: #80AEE2; }
.welcome-grid .hero-grid-cell:nth-child(4) { background: #B8D4F0; }
.welcome-grid .hero-grid-cell:nth-child(5) { background: #AAC9EB; }
.welcome-grid .hero-grid-cell:nth-child(6) { background: #9CC0E8; }
.welcome-grid .hero-grid-cell:nth-child(7) { background: #D5E6F6; }
.welcome-grid .hero-grid-cell:nth-child(8) { background: #C7DDF3; }
.welcome-grid .hero-grid-cell:nth-child(9) { background: #B8D4F0; }
.welcome-screen .onboarding-title {
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}
.welcome-body {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0 auto 1.5rem;
  max-width: 360px;
  line-height: 1.5;
}
.welcome-benefits {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 300px;
  margin: 0 auto 1.75rem;
  text-align: left;
}
.welcome-benefit {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--text-main);
  font-weight: 500;
}
.welcome-benefit i {
  color: var(--primary);
  flex-shrink: 0;
}
.welcome-start-btn {
  min-width: 180px;
  margin-bottom: 0.5rem;
}

/* --- Done screen --- */
.onboarding-done {
  text-align: center;
  padding: 2rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.done-icon {
  color: #10b981;
  margin-bottom: 1rem;
}
.onboarding-done .onboarding-title {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}
.onboarding-done .onboarding-subtitle {
  max-width: 360px;
  margin: 0 auto 1.5rem;
}
.onboarding-close-btn {
  min-width: 160px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .onboarding-modal {
    width: 96%;
    max-width: 520px;
  }
  .onboarding-screen {
    padding: 1.5rem 1.25rem 1.25rem;
  }
  .onboarding-title {
    font-size: 1.3rem;
  }
  .confidence-grid {
    gap: 1.25rem;
  }
}

@media (max-width: 600px) {
  .onboarding-modal {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    max-height: 95vh;
  }
  .onboarding-screen {
    padding: 1.5rem 1.25rem 1.25rem;
    height: 480px;
  }
  .age-group-grid {
    grid-template-columns: 1fr 1fr;
  }
  .confidence-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .role-fork {
    grid-template-columns: 1fr;
  }
  .subject-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
}

/* =============================================
   SETTINGS PAGE
   ============================================= */

.settings-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}
.settings-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 1.5rem;
}

/* Cards */
.settings-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.settings-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
.settings-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 1rem;
}
.settings-card-header .settings-card-title {
  margin-bottom: 0;
}
.settings-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
}
.settings-badge.complete {
  background: #a7f3d0;
  color: #276749;
}
.settings-badge.incomplete {
  background: #fefcbf;
  color: #975a16;
}

/* Account fields */
.settings-field {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border-light);
}
.settings-field:last-child {
  border-bottom: none;
}
.settings-field-row {
  flex-wrap: wrap;
}
.settings-field-half {
  flex: 1;
  min-width: 140px;
}
.settings-field-half .settings-label {
  display: block;
  margin-bottom: 0.25rem;
}
.settings-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 100px;
  flex-shrink: 0;
}
.settings-value {
  font-size: 0.95rem;
  color: var(--text-main);
}
.settings-hint {
  font-weight: 400;
  color: var(--text-light);
  margin-left: 0.25rem;
}

/* Profile sections */
.settings-section {
  margin-bottom: 1.25rem;
}
.settings-section .settings-label {
  display: block;
  margin-bottom: 0.5rem;
}

/* Chip grid (reusable toggle buttons) */
.settings-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.settings-chip {
  padding: 0.4rem 0.85rem;
  border: 2px solid var(--border);
  border-radius: 50px;
  background: var(--white);
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-main);
  white-space: nowrap;
}
.settings-chip:hover {
  border-color: var(--primary);
  background: #eff6ff;
}
.settings-chip.active {
  border-color: var(--primary);
  background: var(--primary-gradient);
  color: var(--white);
}
.settings-chip small {
  font-weight: 400;
  opacity: 0.75;
}

/* Subject grid on settings */
.settings-subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.45rem;
}
.settings-subject-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.65rem 0.4rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  min-height: 70px;
}
.settings-subject-btn:hover {
  border-color: var(--primary);
  background: #eff6ff;
}
.settings-subject-btn.active {
  border-color: var(--primary);
  background: #eff6ff;
  box-shadow: 0 0 0 2px var(--primary);
}
.settings-subject-btn.primary-subject {
  border-color: var(--primary);
  background: #eff6ff;
  box-shadow: 0 0 0 2px var(--primary);
}
.settings-subject-btn .subject-emoji {
  font-size: 1.4rem;
  margin-bottom: 0.15rem;
}
.settings-subject-btn .subject-name {
  font-size: 0.68rem;
  font-weight: 600;
}

/* Star for settings subjects */
.settings-subject-btn .subject-star {
  display: none;
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-light);
  transition: color 0.2s, transform 0.2s;
}
.settings-subject-btn .subject-star:hover {
  color: var(--primary);
  transform: scale(1.2);
}
.settings-subject-btn.active .subject-star {
  display: block;
}
.settings-subject-btn.primary-subject .subject-star {
  display: block;
  color: var(--primary);
}

/* Loading */
.settings-loading {
  text-align: center;
  padding: 2rem 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Actions */
.settings-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-light);
}
.settings-actions .btn-primary {
  min-width: 140px;
  width: auto;
}
.settings-actions .btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.settings-reset-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s;
}
.settings-reset-btn:hover {
  color: #ef4444;
}
.settings-save-msg {
  font-size: 0.82rem;
  margin-top: 0.5rem;
  min-height: 1.2em;
}
.settings-save-msg.success { color: #276749; }
.settings-save-msg.error { color: #ef4444; }

/* --- Research consent toggle --- */
.settings-consent-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
.settings-toggle-label {
  flex: 1;
  cursor: pointer;
}
.settings-hint-block {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  line-height: 1.5;
}
.settings-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.settings-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.settings-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: 24px;
  transition: var(--transition);
}
.settings-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: var(--transition);
}
.settings-toggle input:checked + .settings-toggle-slider {
  background: var(--primary);
}
.settings-toggle input:checked + .settings-toggle-slider::before {
  transform: translateX(20px);
}
.settings-consent-status {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  min-height: 1.2em;
}

/* Shared links management */
.shared-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border-light);
}
.shared-link-row:last-child { border-bottom: none; }
.shared-link-info { display: flex; flex-direction: column; gap: 0.15rem; }
.shared-link-tool { font-weight: 600; font-size: 0.9rem; color: var(--text-main); }
.shared-link-date { font-size: 0.78rem; color: var(--text-muted); }
.shared-link-actions { display: flex; gap: 0.35rem; }
.shared-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}
.shared-link-btn:hover { background: var(--bg-light); color: var(--text-main); border-color: var(--text-light); }
.shared-link-delete:hover { color: #ef4444; border-color: #fecaca; }

/* Responsive */
@media (max-width: 768px) {
  .settings-container {
    padding: 1.5rem 1rem 2.5rem;
  }
  .settings-heading {
    font-size: 1.3rem;
  }
  .settings-field {
    flex-direction: column;
    gap: 0.25rem;
  }
  .settings-label {
    min-width: unset;
  }
  .settings-consent-row {
    flex-direction: column;
    gap: 0.75rem;
  }
  .settings-actions {
    flex-direction: column;
  }
  .settings-actions .btn-primary,
  .settings-reset-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .shared-link-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

@media (max-width: 600px) {
  .settings-container {
    padding: 1.25rem 0.75rem 2rem;
  }
  .settings-card {
    padding: 1.25rem 1rem;
  }
  .settings-chip-grid {
    flex-wrap: wrap;
  }
  .settings-chip {
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .settings-subject-grid {
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
  }
  .settings-subject-btn {
    min-height: 44px;
  }
}

/* =============================================
   PROFILE NUDGE BANNER
   ============================================= */

.profile-nudge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 700px;
  margin: 0 auto 1rem;
  padding: 0.65rem 1rem;
  background: #eff6ff;
  border: 1px solid #bee3f8;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  color: var(--text-main);
}
.profile-nudge i { color: var(--primary); flex-shrink: 0; }
.nudge-link {
  margin-left: auto;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}
.nudge-link:hover { text-decoration: underline; }
.nudge-dismiss {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
}
.nudge-dismiss:hover { color: var(--text-main); }

/* =============================================
   STEP 3 ANALYSE - NEW STYLES
   ============================================= */

/* Context badge on final slides (shows subject/age if set) */
.context-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: #f0f7ff;
  border: 1px solid #d0e3f7;
  border-radius: 2rem;
  font-size: 0.8rem;
  color: var(--primary-dark);
  margin-bottom: 0.5rem;
}

.context-description {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

/* Heatmap count in matrix cells — always visible */
.heatmap-count {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.4);
  line-height: 1;
  position: absolute;
  top: 3px;
  right: 4px;
}

.heatmap-legend {
  text-align: center;
  font-size: 0.65rem;
  color: var(--text-light);
  margin-top: 0.25rem;
  cursor: pointer;
  user-select: none;
}
.heatmap-legend:hover {
  color: var(--text-muted);
}

/* =============================================
   AI IDEAS — shimmer loading + results
   ============================================= */
.ai-ideas-loading {
  padding: 0.5rem 0;
}

.shimmer-line {
  height: 0.85rem;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 0.6rem;
}

.shimmer-line.short {
  width: 65%;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ai-loading-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.ai-ideas-result {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Old .ai-idea-card and .ai-idea-num removed — replaced by .ai-idea */

.ai-ideas-error {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.ai-retry-link {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.9rem;
  padding: 0;
  font-family: var(--font-main);
}

.ai-retry-link:hover {
  color: var(--primary-dark);
}

.ai-regenerate-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: var(--font-main);
  cursor: pointer;
  transition: var(--transition);
}

.ai-regenerate-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #f0f7ff;
}

/* =============================================
   CONTEXT SLIDE FORM
   ============================================= */
.context-slide-form .form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-main);
  font-size: 1rem;
}

.context-slide-form {
  background: #f8fbff;
  padding: 1.75rem 2rem;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  border: none;
  border-left: 4px solid var(--primary);
  max-width: 100%;
  margin: 1rem 0;
}

.profile-prefill-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* Pill selector (replaces <select> dropdowns) */
.pill-select {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Mobile dropdown companion for pill selectors */
.pill-select-mobile {
  display: none;
  width: 100%;
  padding: 0.6rem 0.85rem;
  font-size: 0.95rem;
  font-family: var(--font-main);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: white;
  color: var(--text-main);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.85rem;
  padding-right: 2rem;
  cursor: pointer;
}
.pill-select-mobile:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

@media (max-width: 600px) {
  .pill-select { display: none !important; }
  .pill-select-mobile { display: block; }
}

.pill-option {
  padding: 0.55rem 1rem;
  font-size: 1rem;
  font-family: var(--font-main);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.pill-option:hover {
  border-color: var(--primary);
  background: #f0f7ff;
  color: var(--text-main);
}

.pill-option.active {
  background: #D5E6F6;
  border-color: #87BCEA;
  color: #2C5282;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(66,153,225,0.15);
}

.field-error {
  color: #ef4444;
  font-size: 0.8rem;
  margin: 0.35rem 0 0;
  font-weight: 500;
}

.pill-select-error {
  animation: pillShake 0.35s ease;
}
.pill-select-error .pill-option:not(.active) {
  border-color: #f87171;
}
.form-textarea-error {
  border-color: #f87171 !important;
  animation: pillShake 0.35s ease;
}

@keyframes pillShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}

.form-textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: 0.95rem;
  color: var(--text-main);
  transition: var(--transition);
  background: white;
  resize: vertical;
  line-height: 1.5;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

.form-textarea::placeholder {
  color: var(--text-light);
}

.context-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.context-button {
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  font-family: var(--font-main);
  transition: var(--transition);
}

.context-button-primary {
  background: var(--primary-gradient);
  color: white;
}

.context-button-primary:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.context-button-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

.context-button-secondary {
  background: var(--bg-light);
  color: var(--primary);
  border: 1px solid var(--border);
}

.context-button-secondary:hover {
  background: var(--border-light);
  transform: translateY(-1px);
}

/* History panel removed — replaced by heatmap on matrix */

/* =============================================
   LESSON AUDITOR
   ============================================= */

/* --- Input Divider --- */
.audit-input-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.audit-input-divider::before,
.audit-input-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* --- Drop Zone --- */
.audit-drop-zone {
  background: var(--white);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 2rem;
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
}

.audit-drop-zone:hover,
.audit-drop-zone.dragover {
  border-color: var(--accent-audit);
  background: var(--accent-audit-bg);
  transform: translateY(-2px);
}

.audit-drop-icon {
  color: var(--accent-audit);
  width: 36px;
  height: 36px;
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
}

.audit-drop-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.25rem;
}

.audit-drop-subtext {
  color: var(--text-light);
  font-size: 0.9rem;
}

/* --- Text input --- */
.audit-text-input {
  margin-top: 0;
}

.audit-text-input textarea {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: var(--font-main);
  font-size: 0.95rem;
  resize: vertical;
  min-height: 120px;
  transition: var(--transition);
  line-height: 1.6;
}

.audit-text-input textarea:focus {
  outline: none;
  border-color: var(--accent-audit);
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
}

/* --- Submit button --- */
.audit-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--accent-audit), var(--accent-audit-light));
  color: white;
  border: none;
  padding: 1rem;
  border-radius: var(--radius-sm);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: var(--transition);
  font-family: var(--font-main);
}

.audit-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.audit-submit-btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
}

/* --- Inline error --- */
.audit-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--accent-audit-bg);
  border: 1px solid var(--accent-audit-light);
  border-radius: var(--radius-sm);
  color: var(--accent-audit-dark);
  font-size: 0.9rem;
  animation: auditSlideUp 0.3s ease-out;
}

/* --- Loading / Progress Steps --- */
.audit-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}

.audit-progress-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 340px;
}

.audit-progress-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateY(8px);
}

.audit-progress-step.active {
  opacity: 1;
  transform: translateY(0);
  color: var(--accent-audit);
  font-weight: 600;
  background: var(--accent-audit-bg);
}

.audit-progress-step.done {
  opacity: 1;
  transform: translateY(0);
  color: var(--accent-generate);
}

.audit-progress-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.audit-progress-step.active .audit-progress-icon {
  animation: auditSpin 1.2s linear infinite;
}

.audit-progress-step.done .audit-progress-icon {
  animation: none;
}

.audit-progress-check {
  margin-left: auto;
  color: var(--accent-generate);
}

@keyframes auditSpin {
  to { transform: rotate(360deg); }
}

/* --- Results container --- */
.audit-results {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: auditSlideUp 0.5s ease-out;
}

@keyframes auditSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Hero Header Band --- */
.audit-hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #f0f7ff 0%, #f5f3ff 100%);
  border-bottom: 1px solid #d0e3f7;
}

/* Hero matrix uses shared .result-hero-matrix + .picrat-container--clean */

.audit-hero-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.audit-hero-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-light);
}

.audit-hero-classification {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-main);
}

.audit-hero-desc {
  font-size: 0.9rem;
  color: #4a5568;
  line-height: 1.5;
  max-width: 420px;
}

.audit-hero-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.audit-hero-pill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  background: white;
  border: 1px solid #d0e3f7;
  border-radius: 2rem;
  color: var(--primary);
}

/* X marker now uses shared .picrat-x from the table matrix */

/* --- Section Cards --- */
.audit-sections {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 2rem;
}

.audit-section {
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
}

.audit-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.audit-section-header h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
  color: inherit;
}

.audit-section-body {
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--text-main);
}

.audit-section-body p { margin: 0 0 0.5rem; }
.audit-section-body p:last-child { margin-bottom: 0; }
.audit-section-body ul { padding-left: 1.25rem; margin: 0.5rem 0; }
.audit-section-body li { margin-bottom: 0.3rem; }
.audit-section-body strong { color: #2b6cb0; }

/* --- Upgrade Options Grid --- */
.audit-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.6rem;
}

.audit-option-card {
  background: #f8fbff;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.85rem 1.1rem;
  border: none;
  border-left: 4px solid var(--primary);
}

.audit-option-card:first-child {
  border-left-color: #276749;
  background: #f0fdf8;
}

.audit-option-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--primary);
  margin-bottom: 0.4rem;
}

.audit-option-card:first-child .audit-option-header {
  color: #276749;
}

.audit-option-header h4 {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0;
}

.audit-option-body {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-main);
}

.audit-option-body p { margin: 0; }

/* --- Before & After --- */
.audit-before-after {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 0.6rem;
}

.audit-ba-card {
  flex: 1;
  padding: 0.85rem 1rem;
}

.audit-ba-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
}

.audit-ba-before {
  background: #fafbfc;
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.audit-ba-after {
  background: #f0fdf8;
  border: 1px solid #a7f3d0;
  border-left: 4px solid #276749;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.audit-ba-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}

.audit-ba-before .audit-ba-label { color: var(--text-muted); }
.audit-ba-after .audit-ba-label { color: #276749; }

.audit-ba-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  color: var(--text-light);
  flex-shrink: 0;
}

/* --- Audit Tool Cards --- */
.audit-tool-card {
  background: #f8fbff;
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1rem 1.25rem;
  margin-top: 0.35rem;
}

.audit-tool-card:first-child {
  margin-top: 0.5rem;
}

.audit-tool-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.audit-tool-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #2b6cb0;
}

.audit-tool-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-main);
}

.audit-tool-desc p { margin: 0 0 0.35rem; }
.audit-tool-desc p:last-child { margin-bottom: 0; }

.audit-tool-footer {
  margin-top: 0.5rem;
}

.audit-tool-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  background: #eff6ff;
  border: 1px solid #bee3f8;
  border-radius: 2rem;
  color: var(--primary);
  letter-spacing: 0.02em;
}

.audit-tool-links {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.audit-tool-link {
  font-size: 0.72rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1;
}

.audit-tool-link--app {
  color: #3b82f6;
  background: #eff6ff;
}
.audit-tool-link--app:hover {
  background: #bee3f8;
  color: #2b6cb0;
}

.audit-tool-link--training {
  color: #15803d;
  background: #f0fdf4;
}
.audit-tool-link--training:hover {
  background: #dcfce7;
  color: #166534;
}

.audit-tool-link--loading {
  color: var(--text-light);
  font-style: italic;
  animation: subtle-pulse 1.5s ease-in-out infinite;
}

/* Manual add form for audit tools */
.audit-tool-add-form {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.audit-tool-add-input {
  font-size: 0.72rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-main);
  width: 130px;
  outline: none;
  transition: border-color 0.15s;
}

.audit-tool-add-input:focus {
  border-color: var(--primary);
}

.audit-tool-add-save {
  color: #fff !important;
  background: var(--primary) !important;
  border: none !important;
  cursor: pointer;
  font-family: var(--font-main);
}

.audit-tool-add-save:hover {
  background: var(--primary-dark) !important;
}

/* --- Bridge Cards (Keep Going) --- */
.audit-bridges {
  padding: 1rem 2rem;
  border-top: 1px solid var(--border-light);
}

/* --- Action Bar --- */
.audit-actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  border-top: 1px solid var(--border-light);
}

.audit-action-btn {
  border: 1px solid var(--border);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  transition: all 0.2s ease;
  font-family: var(--font-main);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #fff;
  color: var(--text-muted);
}

.audit-action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--bg-light);
}

.audit-action-btn--pdf { }
.audit-action-btn--share { }
.audit-action-btn--copy { }

/* --- Feedback --- */
.audit-feedback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  margin-bottom: 0.5rem;
}
.audit-feedback-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.audit-feedback-btn {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
}
.audit-feedback-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--bg-light);
}
.audit-feedback-btn.selected {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--bg-light);
}
.audit-feedback-btn.selected[data-rating="-1"] {
  border-color: var(--accent-audit);
  color: var(--accent-audit);
  background: var(--accent-audit-bg);
}
.audit-feedback-thanks {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}

.audit-action-btn--reaudit { }

/* --- Drawer --- */
.audit-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 90vw;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  z-index: 1001;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.audit-drawer.open {
  transform: translateX(0);
}

/* Shared delete button for all history drawers */
.drawer-item-delete {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  opacity: 0;
  transition: all 0.2s ease;
}

.drawer-item-delete:hover {
  color: var(--accent-audit);
  background: var(--accent-audit-bg);
}

/* ── Shared history card (used by Generate, Review, Coach drawers) ── */
.history-card,
.gen-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.history-card:hover,
.gen-history-item:hover {
  border-color: var(--primary);
  box-shadow: 0 1px 4px rgba(66,153,225,0.1);
}
.history-card--active {
  border-color: var(--primary);
  background: #f0f7ff;
}
.history-card-body,
.gen-history-item-body {
  flex: 1;
  min-width: 0;
}
.history-card-title,
.gen-history-item-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-main);
  line-height: 1.4;
  margin-bottom: 0.25rem;
}
.history-card-meta,
.gen-history-item-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.history-card:hover .drawer-item-delete,
.gen-history-item:hover .drawer-item-delete {
  opacity: 1;
}

.drawer-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-light);
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════
   FLINT INTEGRATION — shared button styles
   ═══════════════════════════════════════════════ */
.flint-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-main);
  color: #E8712B;
  background: #FEF5EE;
  border: 1.5px solid #FBCDA8;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.flint-btn:hover {
  background: #FDE8D4;
  border-color: #E8712B;
  color: #C5601F;
}
.flint-btn svg { flex-shrink: 0; }

.flint-idea-hint {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* Small variant for inside idea cards */
.flint-btn--sm {
  padding: 0.3rem 0.65rem;
  font-size: 0.72rem;
  gap: 0.3rem;
}

/* Flint button inside idea cards (right-aligned) */
.ai-idea {
  position: relative;
}
.ai-idea .flint-btn--sm {
  margin-top: 0.5rem;
  margin-left: 0.5rem;
}

/* Analyse — inline tool links after "Enabling Tool:" */
.analyse-tool-links {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-left: 0.5rem;
}
.analyse-tool-link {
  font-size: 0.72rem; font-weight: 500;
  text-decoration: none; padding: 0.15rem 0.45rem;
  border-radius: 4px; transition: all 0.15s ease;
  white-space: nowrap; line-height: 1;
}
.analyse-tool-link:not(.analyse-tool-link--training) {
  color: #3b82f6; background: #eff6ff;
}
.analyse-tool-link:not(.analyse-tool-link--training):hover {
  background: #bee3f8; color: #2b6cb0;
}
.analyse-tool-link--training {
  color: #15803d; background: #f0fdf4;
}
.analyse-tool-link--training:hover {
  background: #dcfce7; color: #166534;
}
.analyse-tool-link--loading {
  color: var(--text-light); font-style: italic;
  animation: subtle-pulse 1.5s ease-in-out infinite;
}
@keyframes subtle-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
/* Manual add-link form (fallback after retries) */
.analyse-add-form {
  display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap;
}
.analyse-add-input {
  font-size: 0.72rem; padding: 0.15rem 0.35rem;
  border: 1px solid var(--border); border-radius: 4px;
  font-family: var(--font-main); width: 140px;
  outline: none; transition: border-color 0.15s;
}
.analyse-add-input:focus { border-color: var(--primary); }
.analyse-add-save {
  color: #fff !important; background: var(--primary) !important;
  border: none !important; cursor: pointer; font-family: var(--font-main);
}
.analyse-add-save:hover { background: var(--primary-dark) !important; }

/* Flint bridge card (for Review footer) */
.flint-bridge-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: #FEF5EE;
  border: 1.5px solid #FBCDA8;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 500;
  color: #E8712B;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  font-family: var(--font-main);
}
.flint-bridge-card:hover {
  background: #FDE8D4;
  border-color: #E8712B;
}
.flint-bridge-card .result-bridge-icon {
  color: #E8712B;
}

/* Toast notification */
.flint-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1B3A5C;
  color: white;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: var(--font-main);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.flint-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .audit-container { padding: 0; }
  .audit-drop-zone { padding: 2rem 1.5rem; }
  .audit-hero { flex-direction: column; gap: 0.75rem; padding: 1.25rem; }
  .audit-hero-classification { font-size: 1.2rem; }
  .audit-sections { padding: 0.75rem 1.25rem; }
  .audit-actions { padding: 0.75rem 1.25rem; flex-wrap: wrap; justify-content: center; }
  .audit-options-grid { grid-template-columns: 1fr; }
  .audit-tool-card { padding: 0.85rem 1rem; }
  .audit-before-after { flex-direction: column; }
  .audit-ba-arrow { transform: rotate(90deg); padding: 0.25rem 0; }
  .audit-hero-context { justify-content: center; }
  .audit-hero .result-hero-matrix { max-width: 100px; }
  .audit-drawer { width: 100%; }
}

@media (max-width: 480px) {
  .audit-drop-zone { padding: 1.5rem 1rem; }
  .audit-drop-text { font-size: 1.05rem; }
  .audit-hero { padding: 1rem; }
  .audit-hero-classification { font-size: 1rem; }
  .audit-hero-desc { font-size: 0.8rem; }
  .audit-sections { padding: 0.75rem 1rem; gap: 0.75rem; }
  .audit-section { padding: 0.75rem 1rem; }
}

/* =============================================
   CONFIDENCE CHECK-IN TOAST (Step 6)
   ============================================= */
.confidence-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.confidence-toast.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.confidence-toast-inner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem 1.5rem;
  max-width: 340px;
  position: relative;
}
.confidence-toast-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}
.confidence-toast-close:hover { color: var(--text-main); }
.confidence-toast-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}
.confidence-toast-q {
  font-size: 0.9rem;
  color: var(--text-main);
  margin-bottom: 0.6rem;
}
.confidence-toast-options {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.confidence-toast-btn {
  background: var(--bg-light);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  font-family: var(--font-main);
  color: var(--text-main);
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
}
.confidence-toast-btn:hover {
  border-color: var(--primary);
  background: var(--white);
}
.confidence-toast-btn.selected {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}
.confidence-toast-thanks {
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 500;
  text-align: center;
  padding: 0.5rem 0;
}

@media (max-width: 480px) {
  .confidence-toast {
    bottom: 0.75rem;
    right: 0.75rem;
    left: 0.75rem;
  }
  .confidence-toast-inner { max-width: none; }
}


/* ═══════════════════════════════════════
   SHARED PICRAT GRID COMPONENT
   ═══════════════════════════════════════ */

.picrat-grid { width: 100%; max-width: 400px; margin: 0 auto; }
.picrat-grid-inner { display: flex; flex-direction: column; gap: 0; }

.picrat-y-label {
  text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;
}
.picrat-x-label {
  text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.5rem;
}

.picrat-rows { display: flex; flex-direction: column; }
.picrat-header-row, .picrat-row {
  display: grid; grid-template-columns: 80px 1fr 1fr 1fr; gap: 2px;
}
.picrat-header-row { margin-bottom: 2px; }
.picrat-corner { }
.picrat-col-label {
  text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
  padding-bottom: 0.25rem;
}
.picrat-row-label {
  display: flex; align-items: center; font-size: 0.75rem; font-weight: 600;
  color: var(--text-muted); padding-right: 0.5rem;
}

.picrat-cell {
  position: relative; background: var(--surface-raised, #f8fafc); border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px; min-height: 64px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; transition: background 0.2s;
}
.picrat-cell-code {
  font-size: 0.75rem; font-weight: 600; color: var(--text-muted); opacity: 0.5;
}
.picrat-cell--active { background: #eff6ff; border-color: var(--accent-analyse); }



/* Journey narrative */
.dash-journey-narrative {
  display: flex; flex-direction: column; gap: 1rem;
}
.dash-narrative-text {
  font-size: 0.88rem; color: var(--text-secondary, #475569); line-height: 1.65; margin: 0;
  padding-left: 0.85rem; border-left: 2.5px solid #e2e8f0;
  overflow-wrap: break-word; word-wrap: break-word;
}
.dash-narrative-text:first-child { border-left-color: var(--accent-analyse); }
.dash-narrative-text:nth-child(2) { border-left-color: var(--accent-generate); }
.dash-narrative-text:nth-child(3) { border-left-color: var(--accent-practice); }
.dash-narrative-text:nth-child(4) { border-left-color: var(--accent-coach); }
.dash-narrative-text strong { color: var(--text-primary, #1e293b); }
.dash-narrative-link {
  font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor;
  padding-bottom: 0.5px;
}
.dash-narrative-link:hover { opacity: 0.8; }

/* Accuracy overlays */
.picrat-acc--strong    { background: #dcfce7; border-color: #22c55e; }
.picrat-acc--developing { background: #fef9c3; border-color: #eab308; }
.picrat-acc--gap       { background: #fee2e2; border-color: #ef4444; }
.picrat-acc-label {
  font-size: 0.8rem; font-weight: 700; margin-top: 2px;
}
.picrat-acc--strong .picrat-acc-label    { color: #16a34a; }
.picrat-acc--developing .picrat-acc-label { color: #ca8a04; }
.picrat-acc--gap .picrat-acc-label       { color: #dc2626; }


/* ═══════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════ */

.dash-page {
  max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 4rem;
  overflow-x: hidden; width: 100%;
}

/* Viewing banner (school lead viewing a teacher's dashboard) */
.dash-viewing-banner {
  margin-bottom: 0.75rem;
}
.dash-viewing-back {
  font-size: 0.82rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.dash-viewing-back:hover {
  text-decoration: underline;
}

/* Greeting */
.dash-greeting-compact {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.dash-greeting-hi { font-size: 1.125rem; font-weight: 700; color: var(--text-main); }
.dash-greeting-sep { color: var(--text-muted); }
.dash-greeting-meta { font-size: 0.85rem; color: var(--text-muted); }

/* Loading */
.dash-loading { text-align: center; padding: 4rem 0; color: var(--text-muted); }
.dash-loading-spinner {
  width: 32px; height: 32px; border: 3px solid var(--border, #e2e8f0);
  border-top-color: var(--accent-analyse); border-radius: 50%;
  animation: dashSpin 0.8s linear infinite; margin: 0 auto 1rem;
}
@keyframes dashSpin { to { transform: rotate(360deg); } }

/* Empty state */
.dash-empty { padding: 2rem 0; }
.dash-empty-inner { text-align: center; max-width: 700px; margin: 0 auto; }
.dash-empty-inner h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.dash-empty-inner > p { color: var(--text-muted); margin-bottom: 2rem; }
.dash-empty-tools {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem; text-align: left;
}

/* Content area */
.dash-content { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Top row: journey + activity side by side */
.dash-top-row {
  display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 1.5rem;
}

/* Card (shared across sections) */
.dash-card {
  background: #fff; border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  min-width: 0; overflow: hidden; max-width: 100%;
}
.dash-card-title {
  font-size: 1rem; font-weight: 700; margin: 0 0 1.25rem; display: flex; align-items: center; gap: 0.5rem;
}
.dash-card-icon { width: 18px; height: 18px; color: var(--text-muted); }

/* Journey section */
.dash-journey-grid { margin-bottom: 0.5rem; }
.dash-journey-cta { text-align: center; padding: 1rem 0; }
.dash-journey-cta p { color: var(--text-muted); margin-bottom: 0.75rem; }
.btn-sm { padding: 0.5rem 1.25rem; font-size: 0.85rem; }

/* Activity tool cards — 2-row grid: Analyse (wide) + Generate, then Quiz + Coach + Review */
.dash-tool-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}
.dash-tool-card:nth-child(1) { grid-column: 1 / 5; }
.dash-tool-card:nth-child(2) { grid-column: 5 / 7; }
.dash-tool-card:nth-child(3) { grid-column: 1 / 3; }
.dash-tool-card:nth-child(4) { grid-column: 3 / 5; }
.dash-tool-card:nth-child(5) { grid-column: 5 / 7; }

@media (max-width: 479px) {
  .dash-tool-cards { grid-template-columns: 1fr 1fr; }
  .dash-tool-card:nth-child(1) { grid-column: 1 / -1; }
  .dash-tool-card:nth-child(2) { grid-column: 1 / -1; }
  .dash-tool-card:nth-child(3),
  .dash-tool-card:nth-child(4),
  .dash-tool-card:nth-child(5) { grid-column: auto; }
}

.dash-tool-card {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--border, #e2e8f0);
  background: #fff; text-decoration: none; color: inherit;
  animation: cardIn 0.4s ease both; transition: transform 0.15s, box-shadow 0.15s;
}
.dash-tool-card:hover {
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.dash-tool-card--unused { opacity: 0.65; }
.dash-tool-card--unused:hover { opacity: 1; }

.dash-tool-card-accent { height: 3px; width: 100%; }
.dash-tool-card-body {
  padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1;
}
.dash-tool-card-top { display: flex; align-items: center; gap: 0.5rem; }
.dash-tool-card-icon {
  width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.dash-tool-card-icon svg { width: 16px; height: 16px; }
.dash-tool-card-name { font-size: 0.85rem; font-weight: 600; }
.dash-tool-card-stats { display: flex; gap: 0.5rem; align-items: baseline; }
.dash-tool-card-count { font-size: 0.78rem; color: var(--text-muted); }
.dash-tool-card-last { font-size: 0.72rem; color: var(--text-muted); opacity: 0.7; }
.dash-fav-badge { color: #f59e0b; font-size: 0.85rem; }

/* Quiz section */
.dash-quiz-section { margin-bottom: 1.5rem; }
.dash-quiz-grid { display: flex; justify-content: center; margin-bottom: 1rem; }
.dash-quiz-insight { font-size: 0.85rem; color: var(--text-secondary, #475569); line-height: 1.5; margin: 0; }
.dash-quiz-cta {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--accent-practice); font-weight: 500; text-decoration: none;
}
.dash-quiz-cta svg { width: 16px; height: 16px; }

/* PICRAT profile bars */
.dash-picrat-profile {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-light, #f1f5f9);
}
.dash-profile-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 0.75rem 0;
}
.dash-profile-bars {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dash-bar-group {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.dash-bar-axis {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  width: 2rem;
  text-align: right;
  flex-shrink: 0;
}
.dash-stacked-bar {
  flex: 1;
  display: flex;
  height: 1.75rem;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-light, #f8fafc);
}
.dash-bar-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  transition: width 0.5s ease;
}
.dash-bar-seg-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Recent activity timeline */
.dash-recent { margin-bottom: 1.5rem; }
.dash-timeline { display: flex; flex-direction: column; gap: 0; }
.dash-timeline-item {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.5rem;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
  text-decoration: none; color: inherit; border-radius: 6px;
  transition: background 0.15s;
}
.dash-timeline-item:hover { background: #f8fafc; }
.dash-timeline-item:last-child { border-bottom: none; }
.dash-timeline-icon { flex-shrink: 0; }
.dash-timeline-icon svg { width: 16px; height: 16px; }
.dash-timeline-body { flex: 1; min-width: 0; }
.dash-timeline-tool {
  font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
  display: flex; align-items: center; gap: 0.4rem;
}
.dash-timeline-badge {
  display: inline-block; font-size: 0.65rem; font-weight: 600; padding: 0.1rem 0.35rem;
  border-radius: 3px; background: #f1f5f9; color: #475569; letter-spacing: 0.02em;
}
.dash-timeline-desc {
  font-size: 0.85rem; color: var(--text-primary, #1e293b); display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-timeline-time {
  font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
  display: flex; align-items: center; gap: 0.25rem;
}
.dash-timeline-empty { color: var(--text-muted); text-align: center; padding: 1rem 0; }

/* ── Dashboard responsive ── */
@media (max-width: 768px) {
  .dash-page {
    padding: 1.25rem 1rem 3rem;
  }
  .dash-card {
    padding: 1.25rem;
  }
  .dash-tool-cards {
    grid-template-columns: 1fr 1fr;
  }
  .dash-tool-card:nth-child(1) { grid-column: 1 / -1; }
  .dash-tool-card:nth-child(2) { grid-column: 1 / -1; }
  .dash-tool-card:nth-child(3),
  .dash-tool-card:nth-child(4),
  .dash-tool-card:nth-child(5) { grid-column: auto; }
  .dash-timeline-item {
    gap: 0.5rem;
    padding: 0.6rem 0.25rem;
  }
  .dash-timeline-desc {
    font-size: 0.82rem;
  }
  .dash-timeline-time {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .dash-page {
    padding: 1rem 0.75rem 2.5rem;
  }
  .dash-greeting-hi {
    font-size: 1rem;
  }
  .dash-card {
    padding: 1rem 0.85rem;
  }
  .dash-card-title {
    font-size: 0.9rem;
  }
  .dash-tool-cards {
    grid-template-columns: 1fr;
  }
  .dash-tool-card:nth-child(1),
  .dash-tool-card:nth-child(2),
  .dash-tool-card:nth-child(3),
  .dash-tool-card:nth-child(4),
  .dash-tool-card:nth-child(5) { grid-column: auto; }
  .dash-empty-tools {
    grid-template-columns: 1fr;
  }
  .dash-timeline-item {
    flex-wrap: wrap;
  }
  .dash-timeline-time {
    width: 100%;
    margin-left: calc(16px + 0.5rem);
    font-size: 0.7rem;
  }
}

/* =============================================
   SCHOOL LEADER DASHBOARD
   ============================================= */
.school-dash-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}
.school-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
}
.school-dash-header-left {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.school-dash-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}
.school-dash-subtitle {
  color: var(--text-muted);
  margin: 0.25rem 0 1.5rem;
}
.school-dash-region {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.school-dash-loading {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.btn-sm {
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
}

/* Headline cards */
.school-dash-headlines {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.school-headline-card {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}
.school-headline-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
}
.school-headline-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Two-column row */
.school-dash-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Cards */
.school-dash-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
}
.school-dash-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 0 0 0.15rem;
}
.school-dash-card-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

/* ── School Journey Narrative ── */
.school-journey-card {
  border-left: 4px solid var(--primary);
  border-radius: 0 10px 10px 0;
  background: #ffffff;
}
.journey-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-light);
}
.journey-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.journey-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
}
.journey-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.journey-section {
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}
.journey-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.journey-section-heading {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.4rem;
}
.journey-section-body {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-main);
  margin: 0 0 0.5rem;
}
.journey-section-body strong {
  color: var(--primary-dark);
  font-weight: 600;
}
.journey-action {
  background: #f0f7ff;
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  margin-top: 0.4rem;
}
.journey-action-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}
.journey-action-body {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-main);
  margin: 0;
}
/* ── School Dashboard responsive ── */
@media (max-width: 768px) {
  .school-dash-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .school-dash-title {
    font-size: 1.25rem;
  }
  .school-dash-headlines {
    grid-template-columns: repeat(2, 1fr);
  }
  .school-dash-row {
    grid-template-columns: 1fr;
  }
  .school-dash-card {
    padding: 1rem;
  }
  .school-teacher-table th:nth-child(3),
  .school-teacher-table td:nth-child(3) {
    display: none;
  }
}

@media (max-width: 480px) {
  .school-dash-container {
    padding: 1rem 0.75rem 2rem;
  }
  .school-dash-title {
    font-size: 1.1rem;
  }
  .school-dash-headlines {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .school-headline-card {
    padding: 0.75rem 0.5rem;
  }
  .school-headline-value {
    font-size: 1.35rem;
  }
  .school-headline-label {
    font-size: 0.72rem;
  }
  .school-teacher-table {
    font-size: 0.78rem;
  }
  .school-teacher-table th:nth-child(4),
  .school-teacher-table td:nth-child(4),
  .school-teacher-table th:nth-child(5),
  .school-teacher-table td:nth-child(5) {
    display: none;
  }
}

@media (max-width: 600px) {
  .journey-stats {
    gap: 0.75rem;
  }
  .journey-stat-value {
    font-size: 1.1rem;
  }
}

/* ── Heatmap ── */
.heatmap-grid {
  display: grid;
  grid-template-columns: 2rem repeat(3, 1fr);
  gap: 3px;
}
.heatmap-corner {
  /* empty top-left cell */
}
.heatmap-col-header, .heatmap-row-header {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  cursor: default;
  transition: transform 0.15s;
}
.heatmap-cell:hover {
  transform: scale(1.06);
}
.heatmap-cell-count {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
}
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  justify-content: center;
}
.heatmap-legend-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.heatmap-legend-bar {
  width: 80px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #f1f5f9, #006eb6);
}

/* ── Journey heatmap (inside journey card) ── */
.journey-heatmap-wrap {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}

/* ── Teacher table ── */
.school-teacher-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.school-teacher-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.school-teacher-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.5rem 0.6rem;
  border-bottom: 2px solid var(--border-light);
  white-space: nowrap;
}
.school-teacher-table td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-main);
}
.teacher-name-cell {
  font-weight: 500;
}
.teacher-view-link {
  font-size: 0.7rem;
  color: var(--primary);
  opacity: 0;
  transition: opacity 0.15s;
  margin-left: 0.3rem;
}
.teacher-row {
  cursor: pointer;
  transition: background 0.12s;
}
.teacher-row:hover {
  background: rgba(59, 130, 246, 0.04);
}
.teacher-row:hover .teacher-view-link {
  opacity: 1;
}
.teacher-inactive td {
  opacity: 0.55;
}
.teacher-badge-inactive {
  font-size: 0.65rem;
  background: #fef2f2;
  color: #dc2626;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 500;
}
.teacher-badge-done {
  font-size: 0.7rem;
  background: #ecfdf5;
  color: #059669;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 500;
}
.teacher-badge-pending {
  font-size: 0.7rem;
  background: #fffbeb;
  color: #d97706;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 500;
}
.teacher-tools-cell {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.teacher-tool-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: var(--bg-light);
  color: var(--text-light);
  opacity: 0.35;
  transition: opacity 0.15s;
}
.teacher-tool-dot.teacher-tool-used {
  opacity: 1;
  background: #eff6ff;
  color: var(--primary);
}
.text-muted-sm {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 400;
}
.th-tool-icons {
  min-width: 140px;
}

/* ── Recent activity list ── */
.school-recent-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.school-recent-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border-light);
}
.school-recent-item:last-child {
  border-bottom: none;
}
.school-recent-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}
.school-recent-body {
  flex: 1;
  font-size: 0.82rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.school-recent-teacher {
  font-weight: 600;
  color: var(--text-main);
}
.school-recent-desc {
  color: var(--text-muted);
}
.school-recent-extra {
  font-size: 0.7rem;
  background: #eff6ff;
  color: var(--primary);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}
.school-recent-time {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.school-recent-toggle {
  display: block;
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.4rem;
  background: none;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.school-recent-toggle:hover {
  background: #f8fafc;
}
.school-recent-empty, .school-table-empty, .school-heatmap-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem 0;
}

/* ── School picker (admin) ── */
.school-dash-picker {
  max-width: 600px;
  margin: 0 auto;
  padding-top: 1rem;
}
.school-dash-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 1rem;
}
.school-picker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.school-picker-item:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}
.school-picker-name {
  font-weight: 600;
  color: var(--text-main);
  font-size: 0.9rem;
}
.school-picker-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.school-picker-all {
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border-color: var(--primary);
  margin-bottom: 0.5rem;
}
.school-picker-all .school-picker-name {
  color: var(--primary);
  font-size: 0.95rem;
}
.teacher-school-cell {
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Admin User Edit Modal ── */
.admin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.admin-modal-overlay.hidden {
  display: none;
}

.admin-modal {
  background: var(--card-bg, white);
  border-radius: var(--radius-lg, 12px);
  padding: 1.5rem;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.admin-modal h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.3rem;
  color: var(--text-main);
}

.admin-modal-form {
  margin-bottom: 1.5rem;
}

.admin-modal-form .form-group {
  margin-bottom: 1.2rem;
}

.admin-modal-form .form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.4rem;
}

.admin-modal-form .form-control {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border-light, #e0e0e0);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.9rem;
  background: var(--card-bg, white);
  color: var(--text-main);
  font-family: inherit;
}

.admin-modal-form .form-control:focus {
  outline: none;
  border-color: var(--primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.admin-modal-actions {
  display: flex;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.admin-modal-actions button {
  flex: 1;
  padding: 0.7rem;
  border: none;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--primary, #3b82f6);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-dark, #2563eb);
}

.btn-secondary {
  background: var(--border-light, #e0e0e0);
  color: var(--text-main);
}

.btn-secondary:hover {
  background: #d0d0d0;
}

.admin-modal-danger {
  border-top: 1px solid var(--border-light, #e0e0e0);
  padding-top: 1rem;
}

.btn-danger {
  width: 100%;
  padding: 0.7rem;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-danger:hover {
  background: #dc2626;
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .school-dash-headlines {
    grid-template-columns: repeat(2, 1fr);
  }
  .school-teacher-table {
    font-size: 0.75rem;
  }
  .teacher-tool-dot {
    width: 20px;
    height: 20px;
  }
  .th-tool-icons {
    min-width: 110px;
  }
}

/* =============================================
   CPD Report Modal
   ============================================= */
.school-dash-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-report {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-report:hover {
  background: var(--primary-dark);
}
.report-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.report-modal {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.75rem;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.report-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.5rem;
}
.report-modal-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}
.report-date-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.report-date-field {
  flex: 1;
}
.report-date-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.report-date-field input[type="date"] {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-main);
}
.report-presets {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.report-preset {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  background: #ffffff;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.report-preset:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.report-preset.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}
.report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.btn-report-download {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1.2rem;
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-report-download:hover {
  background: var(--primary-dark);
}
.btn-report-download:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =============================================
   Analyse History Page
   ============================================= */
.history-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}
.history-header {
  margin-bottom: 1.5rem;
}
.history-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--primary);
  text-decoration: none;
  margin-bottom: 0.5rem;
}
.history-back-link:hover {
  text-decoration: underline;
}
.history-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 0.25rem;
}
.history-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

/* Summary cards */
.history-summary-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.history-heatmap-card,
.history-stats-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
.history-card-heading {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

/* Mini heatmap */
.history-heatmap-grid {
  display: grid;
  grid-template-columns: auto repeat(3, 56px);
  gap: 3px;
  width: fit-content;
}
.hm-corner { width: 72px; }
.hm-col-head {
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-muted);
  padding-bottom: 0.2rem;
}
.hm-row-head {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  padding-right: 0.4rem;
  text-align: right;
  justify-content: flex-end;
}
.hm-cell {
  width: 56px;
  height: 40px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
}

/* Stats items */
.history-stat-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.history-stat-item {
  padding: 0.5rem;
  border-radius: 6px;
  background: #f8fafc;
}
.history-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.15rem;
}
.history-stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
}
.history-stat-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* PIC bar */
.history-pic-bar {
  grid-column: 1 / -1;
  padding: 0.5rem;
  border-radius: 6px;
  background: #f8fafc;
}
.history-pic-bar-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.history-pic-bar-track {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  gap: 2px;
}
.history-pic-bar-seg {
  border-radius: 3px;
  transition: width 0.3s;
}
.history-pic-bar-legend {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.2rem;
  vertical-align: middle;
}

/* Filters */
.history-filters {
  margin-bottom: 1.25rem;
}
.history-filter-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.history-filter-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 0.25rem;
}
.history-filter-group-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
}
.history-filter-divider {
  width: 1px;
  height: 20px;
  background: var(--border-light);
  margin: 0 0.3rem;
}
.history-filter-pill {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  background: #ffffff;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.history-filter-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.history-filter-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

/* Month groups */
.history-month-group {
  margin-bottom: 1.5rem;
}
.history-month-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-light);
}
.history-month-count {
  font-weight: 400;
  color: var(--text-muted);
}

/* Analysis cards */
.history-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  margin-bottom: 0.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.history-card:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.history-card-badge {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.history-card-body {
  flex: 1;
  min-width: 0;
}
.history-card-top {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.2rem;
}
.history-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
}
.history-card-cell-label {
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: 600;
}
.history-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 0.35rem;
}
.history-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.history-card-tag {
  font-size: 0.7rem;
  font-weight: 600;
  background: #f1f5f9;
  color: var(--text-muted);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
.history-card-date {
  font-size: 0.72rem;
  color: var(--text-light);
}
.history-card-arrow {
  flex-shrink: 0;
  color: var(--text-light);
  margin-top: 0.7rem;
}

/* Empty state */
.history-empty {
  text-align: center;
  padding: 3rem 1rem;
}
.history-empty-icon {
  margin-bottom: 1rem;
}
.history-empty h3 {
  font-size: 1.1rem;
  color: var(--text-main);
  margin: 0 0 0.5rem;
}
.history-empty p {
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 400px;
  margin: 0 auto 1.25rem;
  line-height: 1.5;
}
.history-cta-btn {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: var(--primary);
  color: #ffffff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}
.history-cta-btn:hover {
  background: var(--primary-dark);
}

/* Loading spinner */
.history-loading {
  text-align: center;
  padding: 3rem 0;
}

/* Responsive */
@media (max-width: 700px) {
  .history-summary-grid {
    grid-template-columns: 1fr;
  }
  .history-stat-items {
    grid-template-columns: 1fr 1fr;
  }
  .history-filter-row {
    gap: 0.3rem;
  }
  .history-card-badge {
    width: 36px;
    height: 36px;
    font-size: 0.75rem;
  }
}

/* =============================================
   RESEARCH DATA EXPORT PANEL
   ============================================= */
.research-date-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.research-date-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.research-date-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.research-date-field input[type="date"] {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: 0.85rem;
}
.research-datasets {
  background: var(--bg-light, #f8f9fa);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.research-cb-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-primary);
}
.research-cb-label + .research-cb-label {
  border-top: 1px solid var(--border-light);
}
.research-cb-label input[type="checkbox"] {
  margin-top: 0.15rem;
  flex-shrink: 0;
}
.research-cb-label strong {
  color: var(--text-primary);
}
.research-dict-table {
  width: 100%;
  font-size: 0.8rem;
  border-collapse: collapse;
  margin-top: 0.5rem;
}
.research-dict-table th,
.research-dict-table td {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-light);
  text-align: left;
}
.research-dict-table th {
  background: var(--bg-light, #f8f9fa);
  font-weight: 600;
}
.research-dict-table td:first-child {
  white-space: nowrap;
  font-weight: 600;
}
.research-stat-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Research Hub responsive ── */
@media (max-width: 768px) {
  .research-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .research-dict-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .research-dict-table td:first-child {
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .research-stat-grid {
    grid-template-columns: 1fr;
  }
  .research-date-row {
    flex-direction: column;
    gap: 0.75rem;
  }
  .research-date-field {
    width: 100%;
  }
  .research-date-field input[type="date"] {
    width: 100%;
  }
  .research-datasets {
    padding: 0.75rem;
  }
}