/* ════════════════════════════════════════════════════════════════
   CAMPUSOS ERP — MODERN PUBLIC NAVBAR
   Theme: CampusOS Royal Blue, Amber Gold & Glassmorphic Surface
   ════════════════════════════════════════════════════════════════ */

:root {
  --royal-blue: #014aa2;
  --deep-navy: #080c1e;
  --accent-gold: #facd12;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-100: #f1f5f9;
  --topbar-height: 36px;
  --header-height: 76px;
}

/* ── Fixed Wrapper & Spacer ─────────────────────────────────────── */
.navbar-fixed-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 11000;
  background: transparent;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.navbar-fixed-wrapper.is-scrolled {
  box-shadow: 0 10px 30px -10px rgba(1, 74, 162, 0.12);
}

.nav-spacer {
  height: calc(var(--topbar-height) + var(--header-height));
  width: 100%;
}

.nav-container-flex {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  width: 100%;
}

/* ── 1. Top Bar ─────────────────────────────────────────────────── */
.top-bar-blue {
  background: linear-gradient(90deg, #080c1e 0%, #0f1c3f 50%, #014aa2 100%);
  color: #ffffff;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-links {
  display: flex;
  gap: 16px;
  align-items: center;
}

.contact-links a.info-link {
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: opacity 0.2s ease;
  font-size: 12.5px;
}

.contact-links a.info-link:hover {
  opacity: 0.9;
}

.info-icon {
  color: #38bdf8;
  flex-shrink: 0;
}

.call-label {
  color: var(--accent-gold);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.contact-val {
  color: #f1f5f9;
  font-weight: 600;
}

.contact-links a.info-link:hover .contact-val {
  text-decoration: underline;
}

.line-sep {
  opacity: 0.25;
  margin: 0 4px;
  color: #94a3b8;
}

.social-icons-wrap {
  display: flex;
  gap: 14px;
  align-items: center;
}

.social-icons-wrap a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.2s ease;
  text-decoration: none;
}

.social-icons-wrap a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border-color: #38bdf8;
  transform: translateY(-1px);
}

/* ── 2. Main Header ─────────────────────────────────────────────── */
.main-header-wrap {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  height: var(--header-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  transition: background 0.3s ease, height 0.3s ease;
}

/* ── Brand Logo ─────────────────────────────────────────────────── */
.site-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.site-brand__logo {
  display: block;
  width: 195px;
  height: auto;
  max-width: 195px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.site-brand:hover .site-brand__logo {
  transform: scale(1.02);
}

/* ── Navigation Links ───────────────────────────────────────────── */
.nav-links-outer {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-menu-list {
  display: flex;
  list-style: none;
  gap: 6px;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-link-anchor {
  color: var(--slate-600);
  text-decoration: none;
  font-weight: 650;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: -0.01em;
}

.nav-link-anchor:hover {
  color: var(--royal-blue);
  background: rgba(1, 74, 162, 0.05);
  transform: translateY(-1px);
}

.nav-link-anchor.active {
  color: var(--royal-blue);
  font-weight: 800;
  background: #e0f2fe;
  box-shadow: inset 0 0 0 1px #bae6fd;
}

/* ── Desktop Auth Actions ───────────────────────────────────────── */
.auth-action-btns {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--royal-blue);
  font-weight: 750;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.login-link:hover {
  background: #f1f5f9;
  color: #1e40af;
}

.register-btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #014aa2 0%, #1e40af 100%);
  color: #ffffff;
  padding: 9px 22px;
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 13.5px;
  box-shadow: 0 4px 14px rgba(1, 74, 162, 0.28);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.01em;
}

.register-btn-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(1, 74, 162, 0.42);
  background: linear-gradient(135deg, #014aa2 0%, #1d4ed8 100%);
}

/* ── Mobile Drawer (Hidden on Desktop) ──────────────────────────── */
.mobile-auth-drawer {
  display: none;
}

/* ── Responsive Rules ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav-menu-list {
    gap: 2px;
  }
  .nav-link-anchor {
    padding: 8px 12px;
    font-size: 13.5px;
  }
  .site-brand__logo {
    width: 175px;
  }
}

@media (max-width: 1024px) {
  /* Hide top login link on mobile since fixed bottom tab bar already provides dedicated Login tab */
  .login-link,
  .hide-mobile {
    display: none !important;
  }

  .nav-links-outer {
    position: fixed;
    top: calc(var(--topbar-height) + var(--header-height));
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1.5px solid #e2e8f0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 24px;
    display: none;
    flex-direction: column;
    z-index: 10000;
  }

  .nav-links-outer.is-open {
    display: flex;
  }

  .nav-menu-list {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    gap: 8px;
  }

  .nav-link-anchor {
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 15px;
  }

  .mobile-auth-drawer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
  }

  .mob-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--royal-blue);
    text-decoration: none;
    font-weight: 750;
    font-size: 14px;
    padding: 12px;
    border: 1.5px solid #bfdbfe;
    background: #eff6ff;
    border-radius: 10px;
  }

  .mob-reg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--royal-blue);
    color: #ffffff;
    padding: 12px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(1, 74, 162, 0.25);
  }
}

/* 📱 MOBILE TAB BAR FOR PUBLIC SITE */
.public-mobile-tab-bar {
  display: none !important;
}

@media (max-width: 1024px) {
  .public-mobile-tab-bar {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid #e2e8f0;
    height: 65px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: content-box;
    z-index: 180000;
  }

  .public-mobile-tab-bar .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #64748b;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .public-mobile-tab-bar .tab-item span {
    font-size: 18px;
  }

  .public-mobile-tab-bar .tab-item label {
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
  }

  .public-mobile-tab-bar .tab-item.active,
  .public-mobile-tab-bar .tab-item:hover {
    color: var(--royal-blue);
  }
}

@media (max-width: 640px) {
  .top-bar-blue {
    display: none;
  }
  :root {
    --topbar-height: 0px;
    --header-height: 64px;
  }
  .site-brand__logo {
    width: 150px;
  }
  .nav-container-flex {
    padding: 0 14px;
  }
  .register-btn-solid {
    padding: 7px 15px;
    font-size: 12px;
    gap: 5px;
  }
}/* ════════════════════════════════════════════════════════════════
   CAMPUSOS ERP — MODERN FOOTER (Pixel-Matched to Navbar Design)
   Theme: CampusOS Royal Blue, Midnight Navy & Amber Gold Highlights
   ════════════════════════════════════════════════════════════════ */

.main-footer {
  --footer-bg: #0a1128;
  --footer-bg-deep: #050814;
  --brand-blue: #014aa2;
  --brand-blue-hover: #1e40af;
  --brand-blue-glow: #38bdf8;
  --brand-gold: #facd12;
  --text-primary: #ffffff;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(56, 189, 248, 0.35);

  background: linear-gradient(180deg, var(--footer-bg) 0%, var(--footer-bg-deep) 100%);
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
  padding-top: 76px;
  border-top: 2.5px solid var(--brand-gold);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  width: 100%;
}

.footer-top-accent-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(250, 205, 18, 0.6) 50%, transparent 100%);
  pointer-events: none;
}

.footer-ambient-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 260px;
  background: radial-gradient(circle, rgba(1, 74, 162, 0.22) 0%, rgba(56, 189, 248, 0.08) 50%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.footer-container {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr 1.35fr;
  gap: 48px;
  padding: 0 28px;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* ── Columns Standard ───────────────────────────────────────────── */
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

/* ── 1. Brand Column ────────────────────────────────────────────── */
.brand-col {
  padding-right: 12px;
}

.footer-logo-wrap {
  display: inline-block;
  margin-bottom: 18px;
  text-decoration: none;
  line-height: 0;
}

.footer-brand-logo {
  display: block;
  width: min(100%, 225px);
  height: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.footer-logo-wrap:hover .footer-brand-logo {
  transform: scale(1.02);
}

.brand-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 24px;
  max-width: 360px;
  text-align: left;
}

/* Social links matching Navbar's top bar social circles */
.social-links-row {
  display: flex;
  gap: 12px;
  margin-bottom: 26px;
  align-items: center;
}

.social-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.2s ease;
}

.social-circle:hover {
  color: #ffffff;
  background: var(--brand-blue);
  border-color: var(--brand-blue-glow);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(1, 74, 162, 0.4);
}

/* App Store Download Badges */
.app-download-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.store-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  padding: 8px 14px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(6px);
}

.store-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.store-icon {
  font-size: 20px;
  color: #ffffff;
  flex-shrink: 0;
}

.store-icon.play-icon {
  color: #38bdf8;
}

.store-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.store-tagline {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.store-name {
  font-size: 12.5px;
  font-weight: 750;
  color: #ffffff;
}

/* ── 2. Column Titles & Links ───────────────────────────────────── */
.footer-col-title {
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 20px;
  position: relative;
  display: inline-block;
  text-align: left;
}

.footer-col-title::after {
  content: "";
  display: block;
  width: 28px;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-gold));
  margin-top: 7px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 12px;
  width: 100%;
}

.footer-links li {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: left;
  justify-content: flex-start;
}

.footer-nav-link {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 2px 0;
}

.footer-link-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-blue-glow);
  opacity: 0.6;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.footer-nav-link:hover {
  color: #ffffff;
  transform: translateX(4px);
}

.footer-nav-link:hover .footer-link-dot {
  opacity: 1;
  box-shadow: 0 0 8px var(--brand-blue-glow);
}

/* ── 3. Newsletter (Matching Navbar Register CTA) ───────────────── */
.contact-col {
  width: 100%;
}

.newsletter-box {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  padding: 4px 6px 4px 16px;
  border-radius: 9999px;
  margin-bottom: 12px;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.newsletter-box:focus-within {
  border-color: var(--brand-blue-glow);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.25);
}

.newsletter-box input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 0;
  outline: none;
  font-size: 13.5px;
  color: #ffffff;
  min-width: 0;
}

.newsletter-box input::placeholder {
  color: var(--text-dim);
}

.newsletter-btn {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-hover) 100%);
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(1, 74, 162, 0.3);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.newsletter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(1, 74, 162, 0.45);
}

.newsletter-success-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #34d399;
  margin: 0 0 14px;
}

/* Contact information matching Navbar top bar */
.footer-contact-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.footer-contact-item {
  font-size: 13.5px;
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}

.footer-contact-item:hover {
  color: #ffffff;
}

.contact-prefix {
  color: var(--brand-gold);
  font-weight: 700;
  font-size: 12px;
}

.contact-value {
  color: #f1f5f9;
  font-weight: 600;
}

.contact-icon {
  color: var(--brand-blue-glow);
  flex-shrink: 0;
}

/* Language selector capsule */
.language-selector-wrap {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  padding: 7px 16px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: border-color 0.2s ease;
}

.language-selector-wrap:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.lang-globe-icon {
  color: var(--brand-blue-glow);
  flex-shrink: 0;
}

.language-dropdown-select {
  background: transparent;
  color: #ffffff;
  border: none;
  outline: none;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.language-dropdown-select option {
  background-color: #080c1e;
  color: #ffffff;
  padding: 6px;
}

/* ── 4. Horizontal Divider ──────────────────────────────────────── */
.footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.08) 80%, transparent 100%);
  margin-top: 56px;
}

/* ── 5. Footer Bottom Bar ───────────────────────────────────────── */
.footer-bottom {
  padding: 24px 0;
  font-size: 13px;
  color: var(--text-dim);
}

.bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-template-columns: 1fr auto;
}

.highlight-brand {
  color: #ffffff;
  font-weight: 700;
}

.bottom-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bottom-links a {
  text-decoration: none;
  color: var(--text-dim);
  transition: color 0.2s ease;
  font-weight: 500;
}

.bottom-links a:hover {
  color: var(--brand-gold);
}

.footer-dot-sep {
  color: var(--text-dim);
  opacity: 0.4;
  font-size: 9px;
}

/* ── Responsive Rules ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .main-footer {
    padding-top: 52px;
  }
  .footer-container {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .bottom-flex {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}/* ══════════════════════════════════════════════════════════════
   Course Feedback — student experience (mobile-first redesign)
   Official Brand Color Scheme Alignment (Royal Navy & Blue)
   ══════════════════════════════════════════════════════════════ */

@keyframes cfp-progress { from { width: 0%; } to { width: 100%; } }
@keyframes cfp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cfp-float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(20px,-24px); } }
@keyframes cfp-pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

.cfp-fullscreen {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(160deg, #f0f7ff 0%, #f8fafc 45%, #eff6ff 100%);
  display: flex;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px) clamp(12px, 4vw, 24px) 120px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}
.cfp-fullscreen::before,
.cfp-fullscreen::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}
.cfp-fullscreen::before { width: 320px; height: 320px; background: #93c5fd; top: -80px; left: -90px; animation: cfp-float 14s ease-in-out infinite; }
.cfp-fullscreen::after  { width: 360px; height: 360px; background: #bfdbfe; bottom: -120px; right: -100px; animation: cfp-float 18s ease-in-out infinite reverse; }

.cfp-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
}

.cfp-loading {
  margin: auto;
  font-size: 16px;
  font-weight: 600;
  color: #014aa2;
  padding-top: 80px;
  text-align: center;
}

/* ── Hero header ── */
.cfp-header {
  text-align: center;
  background: linear-gradient(135deg, #1a365d 0%, #014aa2 60%, #2563eb 100%);
  color: #fff;
  border-radius: 22px;
  padding: clamp(24px, 5vw, 38px) 22px;
  margin-bottom: 18px;
  box-shadow: 0 18px 40px -16px rgba(1, 74, 162, 0.45);
  animation: cfp-rise 0.5s ease both;
}
.cfp-logo {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #bfdbfe;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.cfp-title {
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.2;
  text-transform: capitalize;
}
.cfp-deadline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.cfp-deadline-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fca5a5;
  box-shadow: 0 0 0 4px rgba(252, 165, 165, 0.3);
}
.cfp-subtitle {
  font-size: 13.5px;
  color: #dbeafe;
  margin: 14px 0 0;
  line-height: 1.6;
}

/* ── Batch selector ── */
.cfp-batch-bar {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 4px 18px -10px rgba(1, 74, 162, 0.2);
  animation: cfp-rise 0.5s 0.05s ease both;
}
.cfp-batch-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.cfp-batch-bar-label {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}
.cfp-batch-count {
  font-size: 11px;
  font-weight: 800;
  color: #014aa2;
  background: #eff6ff;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.cfp-batch-progress {
  height: 6px;
  background: #eef2f7;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.cfp-batch-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.cfp-batch-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cfp-batch-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s, border-color 0.15s, background 0.15s, color 0.15s;
}
.cfp-batch-chip:hover:not(:disabled) { border-color: #93c5fd; color: #014aa2; transform: translateY(-1px); }
.cfp-batch-chip-icon { font-size: 11px; opacity: 0.7; }
.cfp-batch-chip--active {
  background: linear-gradient(135deg, #014aa2, #1e3a8a);
  border-color: #014aa2;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(1, 74, 162, 0.5);
}
.cfp-batch-chip--active .cfp-batch-chip-icon { opacity: 1; }
.cfp-batch-chip--done {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
  cursor: default;
}
.cfp-batch-chip--done .cfp-batch-chip-icon { color: #16a34a; opacity: 1; }
.cfp-batch-chip:disabled { cursor: default; }

/* ── Cards ── */
.cfp-form { display: flex; flex-direction: column; }
.cfp-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: clamp(18px, 4vw, 26px);
  margin-bottom: 16px;
  box-shadow: 0 6px 22px -14px rgba(30, 41, 59, 0.25);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  animation: cfp-rise 0.5s 0.08s ease both;
}
.cfp-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #2563eb, #014aa2);
}
.cfp-card-title {
  font-size: clamp(15px, 3.6vw, 18px);
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 6px;
}
.cfp-card-hint {
  font-size: 11.5px;
  color: #94a3b8;
  margin: 0 0 16px;
  line-height: 1.6;
}

/* Info row */
.cfp-info-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cfp-info-label { font-size: 12.5px; color: #64748b; font-weight: 600; }
.cfp-info-value { font-size: 14px; font-weight: 700; color: #1e293b; }
.cfp-badge {
  background: #eff6ff;
  color: #014aa2;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* Single-batch course list */
.cfp-course-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.cfp-course-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.cfp-course-card:hover { border-color: #93c5fd; background: #f0f7ff; }
.cfp-course-card input[type="radio"] { accent-color: #014aa2; width: 18px; height: 18px; flex-shrink: 0; }
.cfp-course-selected { border-color: #014aa2 !important; background: #f0f7ff !important; }
.cfp-course-info { display: flex; flex-direction: column; gap: 2px; }
.cfp-course-name { font-size: 14px; font-weight: 700; color: #1e293b; }
.cfp-batch-name { font-size: 12px; color: #94a3b8; }
.cfp-empty { color: #94a3b8; font-size: 14px; padding: 12px 0; }

/* Currently filling */
.cfp-current {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: linear-gradient(135deg, #f0f7ff, #eff6ff);
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.cfp-current-label {
  font-size: 11px; font-weight: 700; color: #014aa2;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.cfp-current-value { font-size: 15px; font-weight: 800; color: #1e293b; }

/* Trainer display */
.cfp-trainer-display {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
}
.cfp-trainer-name { font-size: 14px; font-weight: 700; }
.cfp-trainer-filled { color: #059669; }
.cfp-trainer-empty { color: #94a3b8; font-style: italic; font-weight: 500; }

/* ── Rating — mobile-first flex (no rigid grid) ── */
.cfp-rating-header { display: none; }   /* per-option labels make this redundant */

.cfp-rating-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #f1f5f9;
}
.cfp-rating-row:first-of-type { padding-top: 4px; }
.cfp-rating-row:last-child { border-bottom: none; padding-bottom: 4px; }

.cfp-rating-label {
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  line-height: 1.45;
}

.cfp-rating-options {
  display: flex;
  gap: 6px;
}
.cfp-rating-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  cursor: pointer;
  padding: 10px 4px;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  transition: all 0.14s;
  text-align: center;
}
.cfp-rating-cell:hover { border-color: #93c5fd; background: #eff6ff; }
.cfp-rating-cell input[type="radio"] { display: none; }

.cfp-rating-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #64748b;
  background: #fff;
  transition: all 0.14s;
}
.cfp-rating-text {
  font-size: 9.5px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  line-height: 1.2;
}
.cfp-selected {
  border-color: #014aa2;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  box-shadow: 0 6px 16px -8px rgba(1, 74, 162, 0.4);
}
.cfp-selected .cfp-rating-num {
  background: linear-gradient(135deg, #014aa2, #1d4ed8);
  border-color: #1e3a8a;
  color: #fff;
  animation: cfp-pop 0.25s ease;
}
.cfp-selected .cfp-rating-text { color: #014aa2; font-weight: 800; }

/* Open text */
.cfp-text-group { margin-bottom: 16px; }
.cfp-text-group:last-child { margin-bottom: 0; }
.cfp-text-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 8px;
}
.cfp-textarea {
  width: 100%;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 13px;
  font-size: 13.5px;
  color: #334155;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  background: #fcfcff;
}
.cfp-textarea:focus {
  outline: none;
  border-color: #014aa2;
  box-shadow: 0 0 0 4px rgba(1, 74, 162, 0.15);
  background: #fff;
}

/* Error */
.cfp-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* Submit — sticky on mobile so it's always reachable */
.cfp-submit-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #014aa2, #1d4ed8);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
  letter-spacing: 0.3px;
  margin: 6px 0 28px;
  box-shadow: 0 14px 28px -12px rgba(1, 74, 162, 0.55);
}
.cfp-submit-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(1, 74, 162, 0.65); }
.cfp-submit-btn:active:not(:disabled) { transform: translateY(0); }
.cfp-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Phone ── */
@media (max-width: 560px) {
  .cfp-rating-cell { padding: 9px 2px; gap: 5px; border-radius: 12px; }
  .cfp-rating-num { width: 30px; height: 30px; font-size: 13px; }
  .cfp-rating-text { font-size: 8px; letter-spacing: 0; }
  .cfp-rating-options { gap: 5px; }
  .cfp-card::before { width: 3px; }

  .cfp-submit-btn {
    position: sticky;
    bottom: 12px;
    margin-bottom: 12px;
    box-shadow: 0 10px 26px -8px rgba(1, 74, 162, 0.6);
  }
}

@media (max-width: 380px) {
  .cfp-rating-num { width: 27px; height: 27px; font-size: 12px; }
  .cfp-rating-text { display: none; }   /* number alone stays tappable & clear */
}

@media (prefers-reduced-motion: reduce) {
  .cfp-fullscreen::before,
  .cfp-fullscreen::after,
  .cfp-card, .cfp-header, .cfp-batch-bar,
  .cfp-selected .cfp-rating-num { animation: none; }
}
/* ============================================================================
   AI Language Tutor — module styles. Reuses the project's blue/navy palette.
   ============================================================================ */
:root {
  --lt-navy: #0f2156;
  --lt-blue: #2563eb;
  --lt-blue-lt: #eff6ff;
  --lt-green: #16a34a;
  --lt-amber: #d97706;
  --lt-purple: #7c3aed;
  --lt-text: #1e293b;
  --lt-muted: #64748b;
  --lt-border: #e2e8f0;
  --lt-bg: #f1f5fb;
  --lt-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
}

.lt-wrap {
  --lt-navy: #0f2156;
  --lt-blue: #2563eb;
  --lt-blue-lt: #eff6ff;
  --lt-green: #16a34a;
  --lt-amber: #d97706;
  --lt-purple: #7c3aed;
  --lt-text: #1e293b;
  --lt-muted: #64748b;
  --lt-border: #e2e8f0;
  --lt-bg: #f1f5fb;
  --lt-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  color: var(--lt-text);
}

/* Hero */
.lt-hero {
  background: linear-gradient(135deg, #0f2156 0%, #1e3a8a 50%, #1d4ed8 100%);
  border-radius: 18px;
  padding: 28px 32px;
  color: #fff;
  box-shadow: 0 8px 32px rgba(30, 58, 138, 0.35);
  margin-bottom: 22px;
}
.lt-hero h1 { margin: 0 0 6px; font-size: 1.7rem; font-weight: 800; }
.lt-hero p { margin: 0; opacity: 0.9; }

/* Action card grid */
.lt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.lt-card {
  background: #fff;
  border: 1px solid var(--lt-border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--lt-shadow);
  text-decoration: none;
  color: var(--lt-text);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lt-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); }
.lt-card .lt-card-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.4rem;
  background: var(--lt-blue-lt); color: var(--lt-blue);
}
.lt-card h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.lt-card p { margin: 0; color: var(--lt-muted); font-size: 0.86rem; }

/* Section heading */
.lt-section-title { font-size: 1.15rem; font-weight: 700; margin: 26px 0 12px; }

/* Generic panel */
.lt-panel {
  background: #fff; border: 1px solid var(--lt-border);
  border-radius: 16px; padding: 20px; box-shadow: var(--lt-shadow);
}

/* Usage badge */
.lt-usage { display: flex; flex-wrap: wrap; gap: 10px; }
.lt-usage-item {
  background: var(--lt-blue-lt); border: 1px solid #dbeafe; color: var(--lt-navy);
  border-radius: 10px; padding: 8px 12px; font-size: 0.82rem; font-weight: 600;
}
.lt-usage-item .lt-usage-num { color: var(--lt-blue); }
.lt-usage-item.lt-full { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* Chat window */
.lt-chat { display: flex; flex-direction: column; height: calc(100vh - 220px); min-height: 420px; }
.lt-chat-scroll {
  flex: 1; overflow-y: auto; padding: 16px;
  background: var(--lt-bg); border-radius: 14px; border: 1px solid var(--lt-border);
}
.lt-bubble-row { display: flex; margin-bottom: 12px; }
.lt-bubble-row.user { justify-content: flex-end; }
.lt-bubble {
  max-width: 78%; padding: 11px 15px; border-radius: 14px;
  font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.lt-bubble.ai { background: #fff; border: 1px solid var(--lt-border); border-top-left-radius: 4px; }
.lt-bubble.user { background: var(--lt-blue); color: #fff; border-top-right-radius: 4px; }
.lt-bubble.system { background: #f8fafc; color: var(--lt-muted); font-style: italic; }

/* Inline correction under an AI bubble */
.lt-correction {
  margin-top: 6px; max-width: 78%;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px;
  padding: 10px 12px; font-size: 0.84rem;
}
.lt-correction b { color: var(--lt-amber); }
.lt-correction .lt-corr-line { margin: 2px 0; }
.lt-correction .lt-confidence { margin-top: 4px; color: var(--lt-green); font-weight: 600; }

/* Weakness tags + scores + practice-again (communication coaching) */
.lt-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lt-weak-tag {
  font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: #fee2e2; color: #b91c1c;
}
.lt-score-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lt-mini-score {
  font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: var(--lt-blue-lt); color: var(--lt-blue);
}
.lt-practice-again {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed #fde68a;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lt-practice-btn { padding: 4px 12px !important; font-size: 0.78rem !important; }

/* Voice / Talk Mode */
.lt-voice-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; min-height: 24px;
}
.lt-voice-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--lt-border); background: #fff; color: var(--lt-muted);
  border-radius: 999px; padding: 5px 12px; font-size: 0.8rem; font-weight: 700; cursor: pointer;
  transition: all 0.15s ease;
}
.lt-voice-toggle.on { background: var(--lt-green); border-color: var(--lt-green); color: #fff; }
.lt-listening-hint { font-size: 0.8rem; font-weight: 600; color: #dc2626; }
.lt-bubble.lt-speaking { font-style: italic; color: var(--lt-blue); }

.lt-mic {
  background: var(--lt-blue-lt); color: var(--lt-blue);
  display: grid; place-items: center; padding: 0 14px;
}
.lt-mic.listening {
  background: #fee2e2; color: #dc2626;
  animation: lt-pulse 1.1s ease-in-out infinite;
}
@keyframes lt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* Composer */
.lt-composer { display: flex; gap: 10px; margin-top: 12px; }
.lt-composer textarea {
  flex: 1; resize: none; border: 1px solid var(--lt-border); border-radius: 12px;
  padding: 11px 14px; font-size: 0.92rem; font-family: inherit; min-height: 48px;
}
.lt-composer textarea:focus { outline: none; border-color: var(--lt-blue); }

/* Buttons */
.lt-btn {
  border: none; border-radius: 12px; padding: 11px 18px; font-weight: 700;
  cursor: pointer; font-size: 0.9rem; transition: opacity 0.15s ease;
}
.lt-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.lt-btn-primary { background: var(--lt-blue); color: #fff; }
.lt-btn-ghost { background: var(--lt-blue-lt); color: var(--lt-blue); }
.lt-btn-success { background: var(--lt-green); color: #fff; }

/* Forms */
.lt-input, .lt-textarea, .lt-select {
  width: 100%; border: 1px solid var(--lt-border); border-radius: 12px;
  padding: 11px 14px; font-size: 0.95rem; font-family: inherit;
}
.lt-input:focus, .lt-textarea:focus, .lt-select:focus { outline: none; border-color: var(--lt-blue); }
.lt-textarea { resize: vertical; min-height: 80px; }
.lt-label { font-weight: 600; font-size: 0.85rem; margin-bottom: 6px; display: block; }

/* Result / correction card */
.lt-result {
  border: 1px solid var(--lt-border); border-radius: 14px; padding: 16px; margin-top: 16px;
  background: #fff;
}
.lt-result .lt-row { margin: 6px 0; font-size: 0.92rem; }
.lt-result .lt-row .lt-k { font-weight: 700; color: var(--lt-navy); }
.lt-score-pill {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  font-weight: 800; font-size: 0.85rem; background: var(--lt-blue-lt); color: var(--lt-blue);
}
.lt-correct { color: var(--lt-green); font-weight: 800; }
.lt-incorrect { color: #dc2626; font-weight: 800; }

/* Scenario cards */
.lt-scenario-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.lt-scenario {
  background: #fff; border: 1px solid var(--lt-border); border-radius: 14px;
  padding: 18px; box-shadow: var(--lt-shadow); display: flex; flex-direction: column; gap: 8px;
}
.lt-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 9px;
  border-radius: 999px; background: #ede9fe; color: var(--lt-purple); width: fit-content;
}
.lt-tag.BEGINNER { background: #dcfce7; color: var(--lt-green); }
.lt-tag.INTERMEDIATE { background: #fef3c7; color: var(--lt-amber); }
.lt-tag.ADVANCED { background: #fee2e2; color: #dc2626; }

/* Flashcard */
.lt-flashcard {
  background: #fff; border: 1px solid var(--lt-border); border-radius: 16px;
  padding: 26px; box-shadow: var(--lt-shadow); text-align: center; min-height: 220px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.lt-flashcard .lt-word { font-size: 1.8rem; font-weight: 800; color: var(--lt-navy); }
.lt-flashcard .lt-meaning { font-size: 1.05rem; }
.lt-flashcard .lt-example { color: var(--lt-muted); font-style: italic; }

/* Stat tiles (dashboard / progress) */
.lt-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.lt-stat {
  background: #fff; border: 1px solid var(--lt-border); border-radius: 14px;
  padding: 16px; box-shadow: var(--lt-shadow);
}
.lt-stat .lt-stat-num { font-size: 1.6rem; font-weight: 800; color: var(--lt-blue); }
.lt-stat .lt-stat-label { color: var(--lt-muted); font-size: 0.82rem; font-weight: 600; }

/* States */
.lt-empty, .lt-loading {
  text-align: center; color: var(--lt-muted); padding: 40px 20px; font-size: 0.95rem;
}
.lt-spinner {
  width: 22px; height: 22px; border: 3px solid #cbd5e1; border-top-color: var(--lt-blue);
  border-radius: 50%; display: inline-block; animation: lt-spin 0.7s linear infinite;
}
@keyframes lt-spin { to { transform: rotate(360deg); } }

.lt-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.lt-back { color: var(--lt-blue); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.lt-page-title { font-size: 1.4rem; font-weight: 800; margin: 0 0 4px; }
.lt-page-sub { color: var(--lt-muted); margin: 0 0 18px; }

/* ============================================================================
   Call Mode — dashboard CTA + full-screen voice-call experience
   ============================================================================ */

/* Featured CTA on the dashboard */
.lt-call-cta {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(120deg, #16a34a 0%, #0ea5e9 55%, #2563eb 100%);
  border-radius: 18px; padding: 20px 24px; margin-bottom: 18px;
  color: #fff; text-decoration: none;
  box-shadow: 0 10px 30px rgba(14, 165, 233, 0.35);
  position: relative; overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lt-call-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(14, 165, 233, 0.45); }
.lt-call-cta::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.lt-call-cta-icon {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.22); color: #fff;
  animation: lt-call-wiggle 2.4s ease-in-out infinite;
}
.lt-call-cta-icon svg { width: 28px; height: 28px; }
.lt-call-cta-text { display: flex; flex-direction: column; gap: 3px; z-index: 1; }
.lt-call-cta-text strong { font-size: 1.25rem; font-weight: 800; }
.lt-call-cta-text em { font-style: normal; opacity: 0.92; font-size: 0.9rem; }
.lt-call-cta-go { margin-left: auto; font-weight: 800; font-size: 0.95rem; z-index: 1; white-space: nowrap; }
@keyframes lt-call-wiggle {
  0%, 92%, 100% { transform: rotate(0deg); }
  94% { transform: rotate(-12deg); }
  96% { transform: rotate(12deg); }
  98% { transform: rotate(-8deg); }
}

/* Full-screen call surface */
.lt-call {
  /* The call page renders outside .lt-wrap, so re-declare the palette here — otherwise the
     shared bubble/correction styles (which use these vars) lose their colours and inherit the
     dark theme's white text, making the coaching panel unreadable. */
  --lt-navy: #0f2156; --lt-blue: #2563eb; --lt-blue-lt: #eff6ff; --lt-green: #16a34a;
  --lt-amber: #d97706; --lt-purple: #7c3aed; --lt-text: #1e293b; --lt-muted: #64748b;
  --lt-border: #e2e8f0; --lt-bg: #f1f5fb;

  position: relative;
  min-height: calc(100vh - 90px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 18px;
  padding: 22px 20px 36px;
  border-radius: 22px;
  background: radial-gradient(120% 120% at 50% 0%, #1e3a8a 0%, #0f2156 45%, #070d24 100%);
  color: #fff; overflow: hidden;
}
.lt-call.live { background: radial-gradient(120% 120% at 50% 0%, #155e75 0%, #0f2156 50%, #070d24 100%); }

.lt-call-back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.12); color: #fff; border: none;
  border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 0.85rem; cursor: pointer;
  backdrop-filter: blur(6px); transition: background 0.15s ease;
}
.lt-call-back:hover { background: rgba(255, 255, 255, 0.22); }

.lt-call-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: 26px 20px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px; backdrop-filter: blur(8px);
}

/* Pre-call centered screen */
.lt-call-center {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; width: 100%; max-width: 520px;
}
.lt-call-answer-btn {
  margin-top: 18px; width: 76px; height: 76px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: #16a34a; box-shadow: 0 10px 30px rgba(22, 163, 74, 0.55);
  animation: lt-call-answer-pulse 1.8s ease-in-out infinite;
  transition: transform 0.12s ease, background 0.15s ease;
}
.lt-call-answer-btn:hover:not(:disabled) { background: #15803d; }
.lt-call-answer-btn:active { transform: scale(0.93); }
.lt-call-answer-btn:disabled { opacity: 0.6; cursor: not-allowed; animation: none; }
.lt-call-answer-label { font-weight: 800; font-size: 0.95rem; margin-top: 4px; }
@keyframes lt-call-answer-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
  70%  { box-shadow: 0 0 0 16px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* In-call two-pane layout: coaching panel (left) + call stage (right) */
.lt-call-live-grid {
  flex: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px; align-items: stretch;
}
.lt-call-transcript {
  background: #fff; color: #1e293b; border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; min-height: 0;
}
/* Keep coaching bubbles tight & readable on the light panel */
.lt-call-transcript .lt-bubble-row { margin-bottom: 8px; }
.lt-call-transcript .lt-bubble { max-width: 92%; }
.lt-call-transcript .lt-correction { max-width: 92%; }
.lt-call-transcript-head {
  padding: 13px 16px; font-weight: 800; font-size: 0.9rem; color: var(--lt-navy);
  background: var(--lt-blue-lt); border-bottom: 1px solid var(--lt-border);
}
.lt-call-transcript-scroll {
  flex: 1; overflow-y: auto; padding: 14px; background: var(--lt-bg);
  min-height: 320px; max-height: calc(100vh - 220px);
}
.lt-call-you-live {
  font-size: 0.95rem; font-style: italic; color: #bfdbfe; margin: 4px 0 0;
  max-width: 280px;
}

@media (max-width: 860px) {
  .lt-call-live-grid { grid-template-columns: 1fr; }
  .lt-call-stage { order: -1; }
  .lt-call-transcript-scroll { max-height: 50vh; }
}

/* Avatar with animated rings */
.lt-call-avatar {
  position: relative; width: 132px; height: 132px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 8px;
  background: linear-gradient(145deg, #2563eb, #0ea5e9);
  box-shadow: 0 12px 40px rgba(37, 99, 235, 0.5);
}
.lt-call-emoji { font-size: 3.4rem; line-height: 1; }
.lt-call-avatar::before, .lt-call-avatar::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5); opacity: 0;
}
.lt-call-avatar.listening { background: linear-gradient(145deg, #16a34a, #22c55e); box-shadow: 0 12px 40px rgba(34, 197, 94, 0.55); }
.lt-call-avatar.listening::before { animation: lt-call-ring 1.6s ease-out infinite; }
.lt-call-avatar.listening::after  { animation: lt-call-ring 1.6s ease-out infinite 0.8s; }
.lt-call-avatar.speaking { background: linear-gradient(145deg, #2563eb, #38bdf8); }
.lt-call-avatar.speaking::before { animation: lt-call-ring 1.1s ease-out infinite; }
.lt-call-avatar.speaking::after  { animation: lt-call-ring 1.1s ease-out infinite 0.55s; }
.lt-call-avatar.thinking { background: linear-gradient(145deg, #7c3aed, #a78bfa); }
.lt-call-avatar.thinking { animation: lt-call-pulse 1s ease-in-out infinite; }
@keyframes lt-call-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes lt-call-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.lt-call-name { margin: 0; font-size: 1.45rem; font-weight: 800; }
.lt-call-status { font-size: 0.98rem; opacity: 0.88; font-weight: 600; letter-spacing: 0.2px; }
.lt-call-timer { font-size: 1.05rem; font-weight: 700; opacity: 0.7; font-variant-numeric: tabular-nums; }

/* Live captions */
.lt-call-captions {
  margin-top: 14px; width: 100%; display: flex; flex-direction: column; gap: 10px;
}
.lt-cap-you, .lt-cap-ai {
  margin: 0; padding: 12px 16px; border-radius: 16px; font-size: 0.95rem; line-height: 1.45;
}
.lt-cap-you {
  align-self: flex-end; max-width: 85%;
  background: rgba(37, 99, 235, 0.85); border-bottom-right-radius: 5px;
}
.lt-cap-you.live { background: rgba(37, 99, 235, 0.45); font-style: italic; }
.lt-cap-ai {
  align-self: flex-start; max-width: 90%;
  background: rgba(255, 255, 255, 0.14); border-bottom-left-radius: 5px;
  backdrop-filter: blur(4px);
}
.lt-call-error { color: #fecaca; font-weight: 600; }
.lt-call-hint { opacity: 0.7; font-size: 0.84rem; }
.lt-call-tagline { opacity: 0.78; font-size: 0.92rem; margin: 0; text-align: center; max-width: 420px; }

/* Controls */
.lt-call-controls { display: flex; gap: 26px; align-items: center; justify-content: center; margin-top: 18px; }
.lt-call-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: none; background: none; color: #fff; cursor: pointer;
  font-size: 0.8rem; font-weight: 700;
}
.lt-call-btn svg { padding: 18px; border-radius: 50%; transition: transform 0.12s ease, background 0.15s ease; }
.lt-call-btn:active svg { transform: scale(0.92); }
.lt-call-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.lt-call-answer svg { background: #16a34a; box-shadow: 0 8px 24px rgba(22, 163, 74, 0.5); }
.lt-call-answer:hover:not(:disabled) svg { background: #15803d; }
.lt-call-end svg { background: #dc2626; box-shadow: 0 8px 24px rgba(220, 38, 38, 0.5); }
.lt-call-end:hover svg { background: #b91c1c; }
.lt-call-mute svg { background: rgba(255, 255, 255, 0.16); }
.lt-call-mute.on svg { background: #f59e0b; }
.lt-call-mute:hover:not(:disabled) svg { background: rgba(255, 255, 255, 0.28); }

@media (max-width: 640px) {
  .lt-wrap { padding: 12px; }
  .lt-hero { padding: 20px; }
  .lt-bubble { max-width: 88%; }
  .lt-call-cta { flex-wrap: wrap; }
  .lt-call-cta-go { margin-left: 0; }
  .lt-call-avatar { width: 110px; height: 110px; }
  .lt-call-emoji { font-size: 2.8rem; }
}

/* ============================================================================
   Visual Vocabulary Exercise (Phase A)
   ============================================================================ */
.lt-hero-voc { position: relative; }
.lt-hero-back {
  display: inline-flex; align-items: center; gap: 5px; color: #fff; opacity: 0.85;
  text-decoration: none; font-weight: 600; font-size: 0.85rem; margin-bottom: 10px;
}
.lt-hero-back:hover { opacity: 1; }
.lt-hero-voc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* XP badge */
.lt-xp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.18); color: #fde68a; font-weight: 800;
  border-radius: 999px; padding: 7px 14px; font-size: 0.92rem;
  animation: lt-xp-pop 0.4s ease;
}
.lt-xp-badge.sm { background: #fef3c7; color: #b45309; padding: 2px 9px; font-size: 0.72rem; }
@keyframes lt-xp-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Progress row + dots */
.lt-voc-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.lt-dots { display: flex; gap: 7px; flex: 1; }
.lt-dot { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; transition: all 0.2s ease; }
.lt-dot.done { background: var(--lt-green); }
.lt-dot.active { background: var(--lt-blue); transform: scale(1.35); box-shadow: 0 0 0 4px rgba(37,99,235,0.18); }
.lt-voc-difficulty {
  font-size: 0.72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  background: #dcfce7; color: var(--lt-green);
}
.lt-voc-difficulty.INTERMEDIATE { background: #fef3c7; color: var(--lt-amber); }
.lt-voc-difficulty.ADVANCED { background: #fee2e2; color: #dc2626; }

/* Exercise card */
.lt-voc-card {
  background: #fff; border: 1px solid var(--lt-border); border-radius: 20px;
  box-shadow: var(--lt-shadow); overflow: hidden;
}
.lt-voc-top { display: grid; grid-template-columns: 260px 1fr; }

/* Image / illustration panel */
.lt-voc-image {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 26px 18px; color: #fff; text-align: center; min-height: 220px;
}
.lt-voc-image-img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.lt-voc-image-emoji { font-size: 4.6rem; line-height: 1; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25)); }
.lt-voc-image-word { font-size: 1.3rem; font-weight: 800; z-index: 1; }
.lt-voc-image-hint { font-size: 0.78rem; opacity: 0.9; z-index: 1; max-width: 200px; }

/* Word details */
.lt-voc-detail { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.lt-voc-word-row { display: flex; align-items: center; gap: 10px; }
.lt-voc-word { margin: 0; font-size: 2rem; font-weight: 800; color: var(--lt-navy); }
.lt-icon-btn {
  border: 1px solid var(--lt-border); background: var(--lt-blue-lt); color: var(--lt-blue);
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; cursor: pointer;
  transition: background 0.15s ease;
}
.lt-icon-btn:hover:not(:disabled) { background: #dbeafe; }
.lt-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.lt-voc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lt-voc-pos { font-style: italic; color: var(--lt-muted); font-size: 0.86rem; }
.lt-voc-pron { color: var(--lt-purple); font-weight: 600; font-size: 0.9rem; }
.lt-voc-meaning { margin: 4px 0 0; font-size: 1.05rem; color: var(--lt-text); }
.lt-voc-example { margin: 0; color: var(--lt-muted); font-style: italic; }
.lt-voc-actions { display: flex; gap: 8px; margin-top: 10px; }

/* Mode tabs */
.lt-voc-modes {
  display: flex; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--lt-border);
  background: var(--lt-bg); flex-wrap: wrap;
}
.lt-voc-mode {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--lt-border);
  background: #fff; color: var(--lt-muted); border-radius: 999px; padding: 7px 14px;
  font-size: 0.84rem; font-weight: 700; cursor: pointer; transition: all 0.15s ease;
}
.lt-voc-mode:hover { border-color: var(--lt-blue); color: var(--lt-blue); }
.lt-voc-mode.on { background: var(--lt-blue); border-color: var(--lt-blue); color: #fff; }

/* Mode body */
.lt-voc-body { padding: 18px 24px 22px; min-height: 90px; }
.lt-muted { color: var(--lt-muted); font-size: 0.9rem; }
.lt-k { font-weight: 700; color: var(--lt-navy); }
.lt-voc-synrow { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 0.9rem; }
.lt-voc-listen-btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.lt-voc-heard { font-size: 1rem; font-weight: 600; color: var(--lt-blue); }
.lt-voc-good { color: var(--lt-green); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.lt-voc-bad { color: #dc2626; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.lt-voc-use { display: flex; flex-direction: column; gap: 10px; }
.lt-voc-use .lt-btn { align-self: flex-start; }

/* Quiz */
.lt-voc-quiz-q { font-weight: 700; font-size: 1rem; margin: 0 0 12px; }
.lt-voc-quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lt-quiz-opt {
  border: 1px solid var(--lt-border); background: #fff; color: var(--lt-text);
  border-radius: 12px; padding: 12px 14px; font-size: 0.9rem; text-align: left; cursor: pointer;
  transition: all 0.15s ease;
}
.lt-quiz-opt:hover { border-color: var(--lt-blue); background: var(--lt-blue-lt); }
.lt-quiz-opt.correct { border-color: var(--lt-green); background: #dcfce7; color: #166534; font-weight: 700; }
.lt-quiz-opt.wrong { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }

/* Nav */
.lt-voc-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.lt-voc-complete { color: var(--lt-green); font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }

/* AI feedback card */
.lt-feedback { border-radius: 14px; padding: 14px 16px; margin-top: 6px; border: 1px solid; }
.lt-feedback.ok { background: #f0fdf4; border-color: #bbf7d0; }
.lt-feedback.retry { background: #fffbeb; border-color: #fde68a; }
.lt-feedback-head { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin-bottom: 6px; }
.lt-feedback.ok .lt-feedback-head { color: var(--lt-green); }
.lt-feedback.retry .lt-feedback-head { color: var(--lt-amber); }
.lt-feedback-line { margin: 3px 0; font-size: 0.9rem; color: var(--lt-text); }
.lt-feedback-tip {
  margin: 8px 0 0; font-size: 0.86rem; color: var(--lt-navy);
  background: rgba(37,99,235,0.08); border-radius: 10px; padding: 8px 10px;
  display: flex; align-items: center; gap: 6px;
}

/* Saved word cards */
.lt-saved-card { gap: 6px; }
.lt-saved-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lt-saved-head h3 { margin: 0; }

@media (max-width: 720px) {
  .lt-voc-top { grid-template-columns: 1fr; }
  .lt-voc-image { min-height: 150px; }
  .lt-voc-image-emoji { font-size: 3.4rem; }
  .lt-voc-quiz-opts { grid-template-columns: 1fr; }
  .lt-voc-word { font-size: 1.6rem; }
}

/* ============================================================================
   Gamified dashboard — hero player strip + colourful feature board
   ============================================================================ */
.lt-hero-game {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.lt-hero-game-main { display: flex; align-items: center; gap: 16px; }
.lt-mascot {
  font-size: 2.6rem; width: 70px; height: 70px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 20px;
  background: rgba(255,255,255,0.16); backdrop-filter: blur(6px);
  animation: lt-mascot-bob 3.5s ease-in-out infinite;
}
@keyframes lt-mascot-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Player panel (level + chips) inside the hero */
.lt-player {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px; padding: 14px 16px; min-width: 260px; backdrop-filter: blur(8px);
}
.lt-player-level-top { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.95rem; }
.lt-level-bar {
  height: 9px; border-radius: 999px; background: rgba(255,255,255,0.22);
  margin: 8px 0 4px; overflow: hidden;
}
.lt-level-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b); transition: width 0.5s ease;
}
.lt-player small { opacity: 0.85; font-size: 0.74rem; }
.lt-player-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.16); border-radius: 999px; padding: 5px 11px;
  font-size: 0.8rem; font-weight: 700;
}

/* Colourful feature board */
.lt-gx-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px;
}
.lt-gx-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid var(--lt-border); border-top: 4px solid var(--gx);
  border-radius: 22px; padding: 20px; text-decoration: none; color: var(--lt-text);
  box-shadow: var(--lt-shadow); overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.lt-gx-card::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px;
  border-radius: 50%; background: var(--gx-soft); opacity: 0.7; z-index: 0;
}
.lt-gx-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--gx) 30%, transparent);
}
.lt-gx-card > * { position: relative; z-index: 1; }
.lt-gx-icon {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gx), color-mix(in srgb, var(--gx) 65%, #fff));
  color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--gx) 35%, transparent);
}
.lt-gx-icon svg { width: 26px; height: 26px; }
.lt-gx-card h3 { margin: 4px 0 0; font-size: 1.1rem; font-weight: 800; color: var(--lt-navy); }
.lt-gx-card p { margin: 0; color: var(--lt-muted); font-size: 0.85rem; flex: 1; }

.lt-gx-progress { margin-top: 6px; }
.lt-gx-bar { height: 7px; border-radius: 999px; background: var(--gx-soft); overflow: hidden; }
.lt-gx-bar span { display: block; height: 100%; border-radius: 999px; background: var(--gx); transition: width 0.5s ease; }
.lt-gx-bar-label { font-size: 0.72rem; font-weight: 700; color: var(--gx); margin-top: 4px; display: inline-block; }
.lt-gx-bar-label.full { color: #b91c1c; }
.lt-gx-foot { font-size: 0.74rem; font-weight: 700; color: var(--gx); background: var(--gx-soft); border-radius: 999px; padding: 3px 10px; width: fit-content; }

.lt-gx-cta {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: 0.82rem; font-weight: 800; color: var(--gx);
}
.lt-gx-cta svg { transition: transform 0.16s ease; }
.lt-gx-card:hover .lt-gx-cta svg { transform: translateX(4px); }

@media (max-width: 640px) {
  .lt-hero-game { flex-direction: column; align-items: stretch; }
  .lt-player { min-width: 0; }
}

/* ============================================================================
   Grammar Fix — conversational "say it like this" coaching card
   ============================================================================ */
.lt-fix-card {
  margin-top: 16px; border: 1px solid var(--lt-border); border-radius: 16px;
  padding: 18px; background: #fff; display: flex; flex-direction: column; gap: 10px;
}
.lt-fix-lead { margin: 0 0 2px; font-weight: 700; color: var(--lt-navy); font-size: 0.98rem; }
.lt-fix-lead.good { color: var(--lt-green); }

.lt-fix-wrong, .lt-fix-right {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-radius: 12px; padding: 12px 14px;
}
.lt-fix-wrong { background: #fef2f2; border: 1px solid #fecaca; }
.lt-fix-right { background: #f0fdf4; border: 1px solid #bbf7d0; }
.lt-fix-right.natural { background: #eff6ff; border-color: #bfdbfe; }
.lt-fix-tag {
  font-size: 0.72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.lt-fix-tag.wrong { background: #fee2e2; color: #b91c1c; }
.lt-fix-tag.right { background: #dcfce7; color: #166534; }
.lt-fix-tag.natural { background: #dbeafe; color: #1d4ed8; }
.lt-fix-tag.sm { padding: 1px 7px; font-size: 0.7rem; }
.lt-fix-text { font-size: 1rem; font-weight: 600; color: var(--lt-text); flex: 1; min-width: 120px; }
.lt-fix-text.strike { text-decoration: line-through; text-decoration-color: #f87171; color: #9ca3af; font-weight: 500; }

.lt-fix-details { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.lt-fix-detail { margin: 0; font-size: 0.9rem; color: var(--lt-text); }
.lt-fix-detail .lt-k {
  display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--lt-navy);
}

.lt-fix-score {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 0.9rem; border-radius: 999px; padding: 6px 14px; margin-top: 2px;
}
.lt-fix-score small { font-weight: 700; opacity: 0.7; }
.lt-fix-score.good { background: #dcfce7; color: #166534; }
.lt-fix-score.ok   { background: #fef3c7; color: #92400e; }
.lt-fix-score.low  { background: #fee2e2; color: #b91c1c; }

/* History */
.lt-fix-history {
  border: 1px solid var(--lt-border); border-radius: 12px; padding: 12px 14px; margin-top: 10px;
  background: #fff; font-size: 0.92rem;
}
.lt-fix-history-row { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.lt-fix-history-row .strike { text-decoration: line-through; color: #9ca3af; }
.lt-fix-history-why { color: var(--lt-muted); font-size: 0.84rem; margin-top: 4px; }

/* ============================================================================
   Talkpal-style app shell (sidebar) + Home + full-screen players
   ============================================================================ */
.lt-shell, .lt-player {
  --lt-navy: #0f2156; --lt-blue: #2563eb; --lt-blue-lt: #eff6ff; --lt-green: #16a34a;
  --lt-amber: #d97706; --lt-purple: #7c3aed; --lt-text: #1e293b; --lt-muted: #64748b;
  --lt-border: #e2e8f0; --lt-bg: #f1f5fb;
}

.lt-shell { display: flex; align-items: flex-start; min-height: calc(100vh - 90px); color: var(--lt-text); }
.lt-shell-side {
  width: 210px; flex-shrink: 0; align-self: stretch;
  background: #fff; border-right: 1px solid var(--lt-border);
  display: flex; flex-direction: column; gap: 6px; padding: 18px 12px;
  position: sticky; top: 0;
}
.lt-shell-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 6px 8px 14px; }
.lt-shell-brand-mark { font-size: 1.6rem; }
.lt-shell-brand-name { font-weight: 800; color: var(--lt-navy); font-size: 1rem; line-height: 1.1; }
.lt-shell-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.lt-shell-link {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px;
  color: var(--lt-muted); text-decoration: none; font-weight: 700; font-size: 0.92rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.lt-shell-link:hover { background: var(--lt-bg); color: var(--lt-navy); }
.lt-shell-link.active { background: var(--lt-blue-lt); color: var(--lt-blue); }
.lt-shell-back {
  display: flex; align-items: center; gap: 6px; color: var(--lt-muted); text-decoration: none;
  font-size: 0.82rem; font-weight: 600; padding: 10px 13px; border-top: 1px solid var(--lt-border); margin-top: 6px;
}
.lt-shell-back:hover { color: var(--lt-blue); }
.lt-shell-main { flex: 1; min-width: 0; padding: 22px; }

/* Home */
.lt-home { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
.lt-home-main { display: flex; flex-direction: column; gap: 14px; }
.lt-mode-card {
  display: flex; align-items: stretch; background: #fff; border: 1px solid var(--lt-border);
  border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--lt-text);
  box-shadow: var(--lt-shadow); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lt-mode-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15,23,42,0.12); }
.lt-mode-body { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.lt-mode-body h3 { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--lt-navy); }
.lt-mode-body p { margin: 0; color: var(--lt-muted); font-size: 0.9rem; }
.lt-mode-tags { display: flex; gap: 10px; margin-top: 6px; }
.lt-mode-tag { color: var(--lt-blue); font-weight: 700; font-size: 0.82rem; }
.lt-mode-art { position: relative; width: 160px; flex-shrink: 0; display: grid; place-items: center; }
.lt-mode-emoji { font-size: 3.2rem; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.18)); }
.lt-mode-badge {
  position: absolute; bottom: 12px; right: 12px; background: rgba(255,255,255,0.85);
  color: var(--lt-navy); font-size: 0.7rem; font-weight: 800; padding: 3px 10px; border-radius: 999px;
}
.lt-home-rail { display: flex; flex-direction: column; gap: 14px; }
.lt-rail-courses {
  position: relative; display: block; text-decoration: none; color: #fff; border-radius: 18px;
  padding: 22px; background: linear-gradient(135deg, #1e3a8a, #2563eb); overflow: hidden;
  box-shadow: 0 10px 26px rgba(37,99,235,0.35);
}
.lt-rail-courses h3 { margin: 0 0 8px; font-size: 1.3rem; font-weight: 800; }
.lt-rail-courses p { margin: 0; opacity: 0.9; font-size: 0.86rem; }
.lt-rail-courses-go {
  position: absolute; right: 18px; bottom: 18px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.22); display: grid; place-items: center;
}
.lt-rail-card { background: #fff; border: 1px solid var(--lt-border); border-radius: 16px; padding: 16px; box-shadow: var(--lt-shadow); }
.lt-rail-level { display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--lt-navy); }
.lt-rail-stat { display: flex; align-items: center; justify-content: space-between; }
.lt-rail-stat span { display: flex; align-items: center; gap: 8px; color: var(--lt-muted); font-weight: 600; font-size: 0.9rem; }
.lt-rail-stat b { font-size: 1.1rem; color: var(--lt-navy); }
.lt-stat-fire { color: #ef4444; }
.lt-stat-star { color: #f59e0b; }

/* Full-screen player */
.lt-player { min-height: calc(100vh - 90px); background: #fff; display: flex; flex-direction: column; color: var(--lt-text); }
.lt-player-header {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--lt-border);
}
.lt-player-brand { font-size: 1.5rem; }
.lt-player-title { flex: 1; text-align: center; margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--lt-navy); }
.lt-player-close {
  border: none; background: var(--lt-bg); color: var(--lt-muted); width: 38px; height: 38px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer;
}
.lt-player-close:hover { background: #e2e8f0; color: var(--lt-text); }
.lt-player-progress { display: flex; align-items: center; gap: 14px; padding: 16px 24px 0; max-width: 900px; width: 100%; margin: 0 auto; }
.lt-player-count {
  background: #fff; border: 1px solid var(--lt-border); border-radius: 999px; padding: 4px 14px;
  font-weight: 800; font-size: 0.85rem; color: var(--lt-navy); white-space: nowrap;
}
.lt-player-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--lt-bg); overflow: hidden; }
.lt-player-bar span { display: block; height: 100%; background: var(--lt-blue); border-radius: 999px; transition: width 0.4s ease; }
.lt-player-stage {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 12px; padding: 30px 20px; max-width: 720px; width: 100%; margin: 0 auto;
}
.lt-player-kicker { color: var(--lt-blue); font-weight: 800; }
.lt-player-label { color: var(--lt-muted); font-weight: 600; }
.lt-player-target { font-size: 2rem; font-weight: 800; color: var(--lt-navy); line-height: 1.3; }
.lt-player-tools { display: flex; gap: 10px; }
.lt-chip-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--lt-border);
  background: #fff; color: var(--lt-muted); border-radius: 999px; padding: 7px 14px;
  font-weight: 700; font-size: 0.84rem; cursor: pointer;
}
.lt-chip-btn:hover:not(:disabled) { border-color: var(--lt-blue); color: var(--lt-blue); }
.lt-chip-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.lt-player-hint { background: var(--lt-blue-lt); border-radius: 12px; padding: 10px 14px; color: var(--lt-navy); font-size: 0.9rem; max-width: 560px; }
.lt-player-mic-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 12px; }
.lt-player-mic {
  width: 84px; height: 84px; border-radius: 50%; border: none; cursor: pointer; color: #fff;
  background: var(--lt-blue); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(37,99,235,0.4);
  transition: transform 0.12s ease, background 0.15s ease;
  margin: 0 auto;
}
.lt-player-mic svg { display: block; margin: 0 auto; flex-shrink: 0; }
.lt-player-mic:active { transform: scale(0.93); }
.lt-player-mic:disabled { opacity: 0.5; cursor: not-allowed; }
.lt-player-mic.listening { background: #dc2626; animation: lt-pulse 1.1s ease-in-out infinite; }
.lt-player-heard { font-size: 1rem; font-weight: 600; color: var(--lt-blue); font-style: italic; }
.lt-player-result {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 16px;
  font-weight: 700; font-size: 0.92rem;
}
.lt-player-result.ok { background: #dcfce7; color: #166534; }
.lt-player-result.retry { background: #fef3c7; color: #92400e; }
.lt-player-result-pct { opacity: 0.7; font-size: 0.8rem; }
.lt-player-skip { background: none; border: none; color: var(--lt-muted); font-weight: 700; cursor: pointer; padding: 6px 10px; font-size: 0.95rem; }
.lt-player-skip:hover { color: var(--lt-blue); }

/* Talkpal-style pronunciation result screen */
.lt-result { width: 100%; max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.lt-result-card, .lt-result-sentence {
  background: #fff; border: 1px solid var(--lt-border, #e5e7eb); border-radius: 16px; padding: 20px 22px; text-align: left;
}
.lt-result-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--lt-muted); text-transform: capitalize; }
.lt-result-overall { font-size: 1.55rem; font-weight: 800; color: var(--lt-navy); margin-top: 4px; }
.lt-result-overall b { font-size: 1.9rem; }
.lt-result-overall span { color: var(--lt-muted); font-weight: 700; font-size: 1.2rem; }
.lt-result-faces { margin-top: 16px; border: 2px solid; border-radius: 14px; padding: 14px 12px 10px; background: #f0fdf4; }
.lt-result-face-row { display: flex; justify-content: space-around; font-size: 1.7rem; }
.lt-result-face { filter: grayscale(0.7); opacity: 0.5; transition: transform 0.2s; }
.lt-result-face.active { filter: none; opacity: 1; transform: scale(1.25); }
.lt-result-face-bar { display: flex; gap: 4px; margin-top: 12px; }
.lt-result-face-bar span { flex: 1; height: 8px; border-radius: 999px; }
.lt-result-said { font-size: 1.3rem; font-weight: 700; margin: 10px 0 6px; line-height: 1.5; }
.lt-result-said .hit { color: #16a34a; }
.lt-result-said .miss { color: #94a3b8; }
.lt-result-target { font-size: 1.05rem; color: var(--lt-navy); }
.lt-result-next { width: 100%; padding: 14px; font-size: 1.05rem; }
.lt-result-retry { width: 100%; }
.lt-player-card { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lt-player-card .lt-voc-image { width: 280px; border-radius: 18px; min-height: 200px; }
.lt-player-word { font-size: 2rem; font-weight: 800; color: var(--lt-blue); }
.lt-player-continue { padding: 12px 40px !important; }
.lt-player-done { gap: 14px; }
.lt-player-done-emoji { font-size: 3.5rem; }

/* Leave modal */
.lt-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.5); display: grid; place-items: center; z-index: 1000; padding: 20px; }
.lt-modal { background: #fff; border-radius: 18px; padding: 26px; max-width: 380px; width: 100%; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.lt-modal-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--lt-blue-lt); color: var(--lt-blue); font-size: 1.4rem; font-weight: 800; display: grid; place-items: center; margin: 0 auto 4px; }
.lt-modal h3 { margin: 0; color: var(--lt-navy); }
.lt-modal .lt-btn { width: 100%; }

/* Explore */
.lt-explore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.lt-daily-pick {
  border: none; cursor: pointer; color: #fff; border-radius: 18px; padding: 22px; text-align: left;
  display: flex; flex-direction: column; gap: 6px; min-height: 220px;
}
.lt-daily-kicker { font-weight: 800; opacity: 0.9; }
.lt-daily-emoji { font-size: 3rem; margin: 6px 0; }
.lt-daily-title { font-size: 1.4rem; font-weight: 800; }
.lt-daily-desc { opacity: 0.92; font-size: 0.9rem; }
.lt-explore-today h3 { margin: 0 0 12px; color: var(--lt-navy); }
.lt-scenario-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lt-scenario-tile {
  border: none; cursor: pointer; color: #fff; border-radius: 14px; padding: 14px; min-height: 110px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; text-align: left; position: relative;
}
.lt-scenario-tile-emoji { position: absolute; top: 12px; left: 14px; font-size: 1.6rem; }
.lt-scenario-tile-title { font-weight: 800; }
.lt-scenario-tile-badge { font-size: 0.68rem; font-weight: 800; background: rgba(255,255,255,0.25); border-radius: 999px; padding: 2px 8px; width: fit-content; }

/* Courses — Talkpal-style horizontal cards (image-left, text-right) */
.lt-courses-note { background: var(--lt-blue-lt); border: 1px solid #dbeafe; color: var(--lt-navy); border-radius: 14px; padding: 12px 16px; font-size: 0.9rem; margin-bottom: 16px; }
.lt-course-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.lt-course-card {
  display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--lt-border);
  border-radius: 16px; padding: 18px 22px; text-decoration: none; color: var(--lt-text);
  box-shadow: var(--lt-shadow); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lt-course-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(37,99,235,0.12); }
.lt-course-thumb { flex: none; width: 88px; height: 88px; border-radius: 14px; display: grid; place-items: center; font-size: 2.4rem; }
.lt-course-body { flex: 1; min-width: 0; }
.lt-course-body h3 { margin: 0 0 5px; color: var(--lt-navy); font-weight: 800; font-size: 1.15rem; }
.lt-course-body p { margin: 0 0 12px; color: var(--lt-muted); font-size: 0.9rem; }
.lt-course-cefr { display: inline-block; background: var(--lt-bg); color: var(--lt-muted); font-weight: 800; font-size: 0.74rem; border-radius: 7px; padding: 4px 12px; }
@media (max-width: 900px) { .lt-course-grid { grid-template-columns: 1fr; } }

/* Learn path */
.lt-learn-course { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--lt-border); border-radius: 14px; padding: 12px 16px; margin-bottom: 12px; }
.lt-learn-course-emoji { font-size: 1.6rem; }
.lt-learn-course-name { font-weight: 800; color: var(--lt-navy); flex: 1; }
.lt-learn-bar { position: relative; height: 22px; border-radius: 999px; background: var(--lt-bg); margin-bottom: 18px; }
.lt-learn-bar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--lt-blue); border-radius: 999px; }
.lt-learn-bar em { position: absolute; left: 12px; top: 0; line-height: 22px; font-style: normal; font-weight: 800; font-size: 0.78rem; color: var(--lt-navy); }
.lt-learn-unit { background: #fff; border: 1px solid var(--lt-border); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.lt-learn-unit-head { display: flex; align-items: center; justify-content: space-between; color: var(--lt-blue); }
.lt-learn-unit-tag { background: var(--lt-blue); color: #fff; font-weight: 800; font-size: 0.8rem; border-radius: 999px; padding: 4px 14px; }
.lt-learn-unit-title { margin: 8px 0 14px; color: var(--lt-navy); }
.lt-learn-exercises { display: flex; flex-direction: column; gap: 10px; }
.lt-learn-exercise { display: flex; align-items: center; gap: 12px; border: 1px solid var(--lt-border); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--lt-text); transition: all 0.15s ease; }
.lt-learn-exercise:hover { border-color: var(--lt-blue); background: var(--lt-blue-lt); }
.lt-learn-ex-emoji { font-size: 1.5rem; }
.lt-learn-ex-text { display: flex; flex-direction: column; flex: 1; }
.lt-learn-ex-text b { color: var(--lt-navy); }
.lt-learn-ex-text em { font-style: normal; color: var(--lt-muted); font-size: 0.85rem; }
.lt-learn-ex-go { color: var(--lt-blue); font-weight: 800; font-size: 1.1rem; }

@media (max-width: 900px) {
  .lt-shell { flex-direction: column; }
  .lt-shell-side {
    width: 100%; flex-direction: row; align-items: center; gap: 4px; position: static;
    border-right: none; border-bottom: 1px solid var(--lt-border); overflow-x: auto; padding: 10px;
  }
  .lt-shell-brand { padding: 6px; display: none; }
  .lt-shell-nav { flex-direction: row; flex: 1; }
  .lt-shell-link span { display: none; }
  .lt-shell-link { padding: 10px; }
  .lt-shell-back { border-top: none; }
  .lt-home { grid-template-columns: 1fr; }
  .lt-mode-art { width: 110px; }
  .lt-explore-grid { grid-template-columns: 1fr; }
  .lt-player-target { font-size: 1.5rem; }
}

/* ─── Word Mode: units/decks landing ─── */
.lt-wm-overall { display: flex; align-items: center; gap: 14px; margin: 18px 0 26px; }
.lt-wm-overall-pct { font-weight: 800; color: var(--lt-blue); font-size: 1.05rem; min-width: 44px; }
.lt-wm-overall-bar { flex: 1; height: 12px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.lt-wm-overall-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,var(--lt-blue),#0ea5e9); transition: width 0.4s; }
.lt-wm-unit { border: 2px solid var(--lt-border,#e5e7eb); border-radius: 18px; padding: 16px 18px 20px; margin-bottom: 22px; }
.lt-wm-unit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lt-wm-unit-tag { background: var(--lt-blue); color: #fff; font-weight: 800; font-size: 0.85rem; padding: 5px 14px; border-radius: 999px; }
.lt-wm-unit-title { font-weight: 700; color: var(--lt-navy); }
.lt-wm-unit-count { margin-left: auto; font-weight: 800; color: var(--lt-muted); background: #eef2ff; padding: 4px 12px; border-radius: 999px; font-size: 0.85rem; }
.lt-wm-deck-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 12px; }
.lt-wm-deck {
  display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: center;
  min-height: 120px; border: 1.5px solid var(--lt-border,#e5e7eb); border-radius: 14px; background: #fff;
  color: var(--lt-blue); cursor: pointer; padding: 12px; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.lt-wm-deck:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(37,99,235,0.14); border-color: var(--lt-blue); }
.lt-wm-deck.done { border-color: #22c55e; color: #16a34a; background: #f0fdf4; }
.lt-wm-deck-title { font-weight: 700; font-size: 0.9rem; color: var(--lt-navy); text-align: center; }
.lt-wm-deck-count { font-size: 0.75rem; color: var(--lt-muted); }

/* ─── Word Mode: deck game (full-screen) ─── */
.lt-wm-stagebar { display: flex; gap: 8px; max-width: 620px; margin: 18px auto 0; padding: 0 20px; }
.lt-wm-stagebar span { flex: 1; height: 6px; border-radius: 999px; background: #e5e7eb; transition: background 0.3s; }
.lt-wm-stagebar span.on { background: var(--lt-blue); }
.lt-wm-kicker { color: var(--lt-muted); font-weight: 600; font-size: 0.95rem; }
.lt-wm-word { font-size: 2.2rem; font-weight: 800; color: var(--lt-blue); }
.lt-wm-match-word { margin: 6px 0 18px; }
.lt-wm-meaning { color: var(--lt-navy); font-size: 1.05rem; max-width: 420px; text-align: center; }
.lt-wm-learn { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lt-wm-replay { background: #eef2ff; }
.lt-wm-continue { min-width: 220px; margin-top: 8px; }

.lt-wm-pic-art {
  display: flex; align-items: center; justify-content: center; font-size: 3rem;
  width: 130px; height: 130px; border-radius: 16px; background: linear-gradient(135deg,#dbeafe,#eef2ff);
}
.lt-wm-pic-art.big { width: 180px; height: 180px; font-size: 4.6rem; }
.lt-wm-pic-art.small { width: 64px; height: 64px; font-size: 2rem; border-radius: 12px; }

.lt-wm-match { display: flex; flex-direction: column; align-items: center; }
.lt-wm-pic-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; max-width: 460px; width: 100%; }
.lt-wm-pic {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px;
  border: 2px solid var(--lt-border,#e5e7eb); border-radius: 16px; background: #fff; cursor: pointer; transition: 0.15s;
  min-height: 150px;
}
.lt-wm-pic:hover:not(:disabled) { border-color: var(--lt-blue); transform: translateY(-2px); }
.lt-wm-pic.right { border-color: #22c55e; background: #f0fdf4; }
.lt-wm-pic.wrong { border-color: #ef4444; background: #fef2f2; animation: lt-shake 0.3s; }
.lt-wm-pic-label { font-weight: 700; color: var(--lt-navy); }
@keyframes lt-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.lt-wm-correct { display: inline-flex; align-items: center; gap: 8px; color: #16a34a; font-weight: 800; font-size: 1.2rem; margin: 18px 0 4px; }
.lt-wm-tryagain { color: #b91c1c; font-weight: 700; margin: 16px 0 4px; }

.lt-wm-pairs { width: 100%; max-width: 560px; margin: 0 auto; }
.lt-wm-pairs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.lt-wm-pairs-col { display: flex; flex-direction: column; gap: 12px; }
.lt-wm-audio, .lt-wm-label {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px;
  border: 2px solid var(--lt-blue); border-radius: 14px; background: #fff; color: var(--lt-blue);
  font-weight: 700; font-size: 1rem; cursor: pointer; transition: 0.15s;
}
.lt-wm-audio .lt-wm-wave { width: 90px; height: 18px; background:
  repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5px); opacity: 0.5; border-radius: 3px; }
.lt-wm-audio.sel { background: #eef2ff; box-shadow: 0 0 0 3px rgba(37,99,235,0.18); }
.lt-wm-audio.matched, .lt-wm-label.matched { border-color: #22c55e; color: #16a34a; background: #f0fdf4; cursor: default; }
.lt-wm-label.wrong { border-color: #ef4444; color: #b91c1c; animation: lt-shake 0.3s; }

.lt-wm-complete { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lt-wm-complete-star { color: var(--lt-blue); }
.lt-wm-complete-pics { display: flex; gap: 6px; margin: 6px 0; }
.lt-wm-streak { display: inline-flex; align-items: center; gap: 6px; color: #ea580c; font-weight: 700; background: #fff7ed; padding: 6px 14px; border-radius: 999px; }

/* ─── Talkpal-style Chat: tutor picker ─── */
.lt-tutor-pick { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 20px; gap: 8px; }
.lt-tutor-pick h1 { font-size: 1.8rem; font-weight: 800; color: var(--lt-navy); margin: 0; }
.lt-tutor-pick > p { max-width: 520px; }
.lt-tutor-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin: 28px 0; max-width: 760px; width: 100%; }
.lt-tutor-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--lt-border,#e5e7eb); border-radius: 18px; background: #fff; cursor: pointer; transition: 0.15s; }
.lt-tutor-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(37,99,235,0.12); }
.lt-tutor-card.sel { border-color: var(--lt-blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.18); }
.lt-tutor-av { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: 14px; font-size: 3.4rem; overflow: hidden; position: relative; }
.lt-tutor-img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; transition: transform 0.2s ease; }
.lt-tutor-card:hover .lt-tutor-img { transform: scale(1.05); }
.lt-tutor-name { font-weight: 700; color: var(--lt-navy); margin-bottom: 2px; }
.lt-tutor-role { font-size: 0.78rem; color: #64748b; font-weight: 500; text-align: center; line-height: 1.25; }
.lt-tutor-start { min-width: 320px; padding: 14px; font-size: 1.05rem; }

/* ─── Chat layout (chat card + feedback rail) ─── */
.lt-chat-layout { flex: 1; display: grid; grid-template-columns: 1fr 320px; gap: 18px; max-width: 1100px; width: 100%; margin: 12px auto; padding: 0 20px; align-items: start; }
.lt-chat-card { border: 1px solid var(--lt-border,#e5e7eb); border-radius: 18px; background: #fff; padding: 14px 16px; }
.lt-chat-tutor { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--lt-border,#e5e7eb); margin-bottom: 8px; }
.lt-chat-tutor-av { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; font-size: 1.3rem; overflow: hidden; }
.lt-chat-tutor-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.lt-chat-tutor-name { font-weight: 800; color: var(--lt-navy); display: inline-flex; align-items: center; gap: 7px; }
.lt-chat-online { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; display: inline-block; }
.lt-chat-tutor-speak { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--lt-muted); padding: 6px; border-radius: 10px; }
.lt-chat-tutor-speak.on { color: var(--lt-blue); background: #eef2ff; }
.lt-bubble-speak { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: #94a3b8; margin-left: 6px; padding: 3px 5px; border-radius: 6px; transition: all 0.15s ease; vertical-align: middle; }
.lt-bubble-speak:hover { color: #2563eb; background: #eef2ff; }

/* Quick Tutor Switcher Dropdown in Chat */
.lt-tutor-dropdown {
  position: absolute;
  top: 54px;
  left: 0;
  z-index: 100;
  width: 290px;
  background: #ffffff;
  border: 1px solid var(--lt-border, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  animation: ltFadeIn 0.15s ease-out;
}
.lt-tutor-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 8px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.85rem;
  color: var(--lt-navy, #1e293b);
}
.lt-tutor-dropdown-header button {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  padding: 2px;
}
.lt-tutor-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.lt-tutor-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.lt-tutor-dropdown-item:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.lt-tutor-dropdown-item.active {
  background: #eff6ff;
  border-color: #93c5fd;
}
.lt-tutor-av-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  overflow: hidden;
  flex-shrink: 0;
}
.lt-tutor-av-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lt-tutor-dropdown-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.lt-tutor-dropdown-meta .name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
}
.lt-tutor-dropdown-meta .role {
  font-size: 0.72rem;
  color: #64748b;
}
.lt-tutor-dropdown-item .check {
  color: #2563eb;
  font-weight: 800;
  font-size: 0.9rem;
}

.lt-chat-suggestions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin: 10px 4px; }
.lt-chat-chip { border: 1.5px solid var(--lt-blue); color: var(--lt-blue); background: #fff; border-radius: 999px; padding: 9px 22px; font-weight: 700; cursor: pointer; transition: 0.15s; }
.lt-chat-chip:hover:not(:disabled) { background: var(--lt-blue); color: #fff; }

.lt-feedback-rail { border: 1px solid var(--lt-border,#e5e7eb); border-radius: 18px; background: #fff; padding: 22px 18px; text-align: center; position: sticky; top: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.03); }
.lt-feedback-icons { display: inline-flex; gap: 8px; border: 1px solid var(--lt-border,#e5e7eb); border-radius: 12px; padding: 8px 12px; margin-bottom: 16px; }
.lt-feedback-icons span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: var(--lt-muted); background: #f1f5f9; }
.lt-feedback-icons .ok { color: #16a34a; background: #dcfce7; }
.lt-feedback-icons .warn { color: #d97706; background: #fef3c7; }
.lt-feedback-rail h3 { font-size: 1.05rem; font-weight: 800; color: var(--lt-navy); margin: 0 0 6px; }
.lt-feedback-body { text-align: left; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; font-size: 0.88rem; color: var(--lt-navy); }
.lt-fb-item { padding: 10px 12px; border-radius: 12px; border-left: 3px solid #cbd5e1; background: #f8fafc; line-height: 1.45; word-break: break-word; }
.lt-fb-item.corr { border-left-color: #f59e0b; background: #fffbeb; color: #92400e; }
.lt-fb-item.nat { border-left-color: #8b5cf6; background: #f5f3ff; color: #5b21b6; }
.lt-fb-item.vocab { border-left-color: #3b82f6; background: #eff6ff; color: #1e40af; }
.lt-fb-item.tip { border-left-color: #06b6d4; background: #ecfeff; color: #155e75; }
.lt-fb-item.why { border-left-color: #eab308; background: #fefce8; color: #854d0e; }
.lt-fb-item.conf { border-left-color: #22c55e; background: #f0fdf4; color: #166534; font-weight: 600; }
.lt-fb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lt-fb-scores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lt-fb-practice { margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: #f0fdf4; border: 1px dashed #86efac; }

@media (max-width: 900px) {
  .lt-tutor-grid { grid-template-columns: repeat(2,1fr); }
  .lt-tutor-start { min-width: 0; width: 100%; }
  .lt-chat-layout { grid-template-columns: 1fr; }
  .lt-feedback-rail { position: static; }
}

/* ─── Talkpal-style Progress page ─── */
.lt-prog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 22px; }
.lt-prog-col { display: flex; flex-direction: column; gap: 20px; }
.lt-prog-card { border: 1px solid var(--lt-border,#e5e7eb); border-radius: 18px; background: #fff; padding: 22px; }
.lt-prog-card h2 { font-size: 1.4rem; font-weight: 800; color: var(--lt-navy); margin: 0 0 4px; }

.lt-prog-feedback {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-radius: 18px; padding: 24px; text-decoration: none;
  background: linear-gradient(120deg,#fbbf24,#f59e0b); color: #422006;
}
.lt-prog-feedback h2 { color: #422006; font-size: 1.5rem; margin: 0; }
.lt-prog-feedback p { margin: 4px 0 0; font-weight: 600; opacity: 0.85; }
.lt-prog-feedback-go { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.4); }

.lt-prog-level { border-radius: 18px; padding: 24px; background: linear-gradient(135deg,#3730a3,#4f46e5); color: #fff; }
.lt-prog-level h2, .lt-prog-level h3 { color: #fff; margin: 0; }
.lt-prog-level > p { opacity: 0.8; margin: 4px 0; }
.lt-prog-level h3 { font-size: 1.2rem; margin-top: 14px; }
.lt-prog-level-line { height: 1px; background: rgba(255,255,255,0.25); margin: 14px 0; }
.lt-prog-level-bar { display: flex; align-items: center; gap: 12px; margin-top: 18px; background: rgba(255,255,255,0.12); border-radius: 14px; padding: 14px 18px; font-weight: 800; }
.lt-prog-level-bar span { flex: 1; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.25); overflow: hidden; }
.lt-prog-level-bar span i { display: block; height: 100%; background: #fff; border-radius: 999px; }

.lt-prog-range { display: flex; gap: 8px; margin: 14px 0 6px; }
.lt-prog-range button { border: none; background: #f1f5f9; color: var(--lt-muted); font-weight: 700; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 0.85rem; }
.lt-prog-range button.on { background: var(--lt-blue); color: #fff; }
.lt-prog-rangelabel { color: var(--lt-muted); font-size: 0.9rem; margin-top: 6px; }
.lt-prog-rangelabel b { color: var(--lt-navy); }

.lt-prog-stat { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--lt-border,#eef2f7); }
.lt-prog-stat:first-of-type { margin-top: 8px; }
.lt-prog-stat-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #eef2ff; color: var(--lt-blue); flex: none; }
.lt-prog-stat-value { font-size: 1.3rem; font-weight: 800; color: var(--lt-navy); }
.lt-prog-stat-label { color: var(--lt-muted); font-size: 0.88rem; }

.lt-prog-badges { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.lt-prog-badge { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lt-prog-badge-hex {
  display: flex; align-items: center; justify-content: center; width: 64px; height: 64px;
  border-radius: 18px; background: #f1f5f9; color: #cbd5e1; border: 2px dashed #cbd5e1;
}
.lt-prog-badge.got .lt-prog-badge-hex { background: linear-gradient(135deg,#fbbf24,#f59e0b); color: #fff; border: none; box-shadow: 0 8px 20px rgba(245,158,11,0.35); }
.lt-prog-badge-name { font-size: 0.8rem; font-weight: 700; color: var(--lt-navy); }
.lt-prog-badge:not(.got) .lt-prog-badge-name { color: var(--lt-muted); }

.lt-prog-streak-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--lt-border,#eef2f7); }
.lt-prog-streak-row:first-of-type { margin-top: 8px; }
.lt-prog-streak-row span { font-weight: 700; color: var(--lt-navy); }
.lt-prog-streak-pill { display: inline-flex; align-items: center; gap: 5px; background: #eef2ff; color: var(--lt-blue); border-radius: 999px; padding: 7px 16px; font-weight: 800; }
.lt-prog-streak-pill.on { background: var(--lt-blue); color: #fff; }

.lt-prog-cal { margin-top: 8px; }
.lt-prog-cal-month { font-weight: 700; color: var(--lt-navy); margin-bottom: 10px; }
.lt-prog-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; text-align: center; }
.lt-prog-cal-wd { font-weight: 800; color: var(--lt-muted); font-size: 0.85rem; padding-bottom: 4px; }
.lt-prog-cal-day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 50%; font-size: 0.9rem; color: var(--lt-navy); }
.lt-prog-cal-day.active { background: #dbeafe; color: var(--lt-blue); font-weight: 700; }
.lt-prog-cal-day.today { background: var(--lt-blue); color: #fff; font-weight: 800; }

@media (max-width: 900px) {
  .lt-prog-grid { grid-template-columns: 1fr; }
}

/* ─── Daily Feedback page ─── */
.lt-df-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.lt-df-head .lt-back { display: inline-flex; align-items: center; gap: 8px; color: var(--lt-navy); }
.lt-df-datenav { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; color: var(--lt-navy); }
.lt-df-datenav button { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--lt-border,#e5e7eb); background: #fff; color: var(--lt-navy); cursor: pointer; }
.lt-df-datenav button:hover:not(:disabled) { background: #eef2ff; color: var(--lt-blue); }
.lt-df-datenav button:disabled { opacity: 0.4; cursor: not-allowed; }
.lt-df-card { border: 1px solid var(--lt-border,#e5e7eb); border-radius: 18px; background: #fff; padding: 26px 28px; margin-top: 18px; }
.lt-df-card h2 { font-size: 1.3rem; font-weight: 800; color: var(--lt-navy); margin: 0; }
.lt-df-divider { height: 1px; background: var(--lt-border,#eef2f7); margin: 16px 0 20px; }
.lt-df-text { font-size: 1.08rem; line-height: 1.75; color: var(--lt-navy); margin: 0; }
.lt-df-modes { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 22px; }
.lt-df-mode { display: flex; align-items: center; gap: 14px; }
.lt-df-mode-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; font-size: 1.5rem; flex: none; }
.lt-df-mode-count { font-size: 1.25rem; font-weight: 800; color: var(--lt-navy); }
.lt-df-mode-name { color: var(--lt-muted); font-size: 0.9rem; }

/* ─── Course detail (learning path) ─── */
.lt-cd-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lt-cd-head .lt-back { display: inline-flex; align-items: center; gap: 10px; color: var(--lt-navy); }
.lt-cd-badge { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #dcfce7; color: #16a34a; }
.lt-cd-progress { display: flex; align-items: center; gap: 14px; margin: 18px 0 26px; }
.lt-cd-progress-pct { font-weight: 800; color: var(--lt-blue); min-width: 44px; }
.lt-cd-progress-bar { flex: 1; height: 12px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.lt-cd-progress-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,var(--lt-blue),#0ea5e9); }
.lt-cd-unit { margin-bottom: 28px; }
.lt-cd-unit-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.lt-cd-unit-tag { color: var(--lt-blue); font-weight: 800; font-size: 0.95rem; }
.lt-cd-unit-title { font-size: 1.5rem; font-weight: 800; color: var(--lt-navy); margin: 2px 0 0; }
.lt-cd-unit-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: #eef2ff; color: var(--lt-blue); flex: none; }
.lt-cd-exercises { display: flex; flex-direction: column; gap: 12px; position: relative; }
.lt-cd-exercise {
  display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--lt-border,#e5e7eb);
  border-radius: 16px; padding: 14px 18px; text-decoration: none; color: var(--lt-text); transition: 0.15s; position: relative;
}
.lt-cd-exercise:hover { transform: translateX(3px); box-shadow: 0 8px 20px rgba(37,99,235,0.1); border-color: var(--lt-blue); }
/* connector line between exercises */
.lt-cd-exercise:not(:last-child)::after {
  content: ""; position: absolute; left: 36px; bottom: -12px; width: 2px; height: 12px; background: var(--lt-border,#e5e7eb);
}
.lt-cd-ex-av { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-size: 1.4rem; flex: none; }
.lt-cd-ex-text { display: flex; flex-direction: column; }
.lt-cd-ex-text b { color: var(--lt-navy); font-weight: 800; font-size: 1.05rem; }
.lt-cd-ex-text em { color: var(--lt-muted); font-style: normal; font-size: 0.9rem; }

/* Word-Mode deck: read-aloud sub-step — centered column so text + mic share one axis */
.lt-wm-read { width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lt-wm-read-head { color: var(--lt-blue); font-weight: 700; font-size: 1rem; margin-bottom: 22px; }
.lt-wm-read-head b { color: var(--lt-blue); }
.lt-wm-read-label { color: var(--lt-muted); font-weight: 600; margin-bottom: 8px; }
.lt-wm-read-target { font-size: 1.8rem; font-weight: 800; color: var(--lt-navy); margin-bottom: 18px; }
.lt-wm-read .lt-player-mic { margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: center; }
.lt-wm-read .lt-player-skip { display: block; margin: 16px auto 0; }
.lt-wm-correct.miss { color: #b45309; }

/* ─── Debate Mode ─── */
.lt-debate-setup { flex: 1; max-width: 640px; margin: 0 auto; padding: 24px 20px; width: 100%; }
.lt-debate-setup h1 { font-size: 1.9rem; font-weight: 800; color: var(--lt-navy); margin: 0 0 4px; text-align: center; }
.lt-debate-setup > p { text-align: center; }
.lt-debate-topics { display: flex; flex-direction: column; gap: 10px; }
.lt-debate-topic { text-align: left; border: 1.5px solid var(--lt-border,#e5e7eb); background: #fff; border-radius: 14px; padding: 14px 16px; font-weight: 600; color: var(--lt-navy); cursor: pointer; transition: 0.15s; }
.lt-debate-topic:hover { border-color: var(--lt-blue); }
.lt-debate-topic.sel { border-color: var(--lt-blue); background: #eff6ff; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.lt-debate-sides { display: flex; gap: 14px; }
.lt-debate-side { flex: 1; border: 2px solid var(--lt-border,#e5e7eb); background: #fff; border-radius: 14px; padding: 16px; font-weight: 800; font-size: 1.05rem; cursor: pointer; color: var(--lt-navy); transition: 0.15s; }
.lt-debate-side.for.sel { border-color: #22c55e; background: #f0fdf4; color: #16a34a; }
.lt-debate-side.against.sel { border-color: #ef4444; background: #fef2f2; color: #b91c1c; }
.lt-debate-start { width: 100%; padding: 14px; font-size: 1.05rem; margin-top: 22px; }
.lt-debate-prec { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.lt-debate-prec li { background: #f8fafc; border-radius: 10px; padding: 10px 12px; font-size: 0.9rem; color: var(--lt-navy); }
.lt-debate-prec b { color: var(--lt-blue); }

/* ─── Photo Mode ─── */
.lt-photo-scene { width: 100%; max-width: 420px; aspect-ratio: 16/10; border-radius: 18px; display: grid; place-items: center; }
.lt-photo-emoji { font-size: 5rem; }
.lt-photo-prompt { color: var(--lt-navy); font-size: 1.05rem; margin: 4px 0; }
.lt-photo-input { width: 100%; max-width: 520px; }
.lt-photo-input textarea { width: 100%; resize: none; border: 1.5px solid var(--lt-border,#e5e7eb); border-radius: 14px; padding: 14px; font-size: 1rem; font-family: inherit; }
.lt-photo-input textarea:focus { outline: none; border-color: var(--lt-blue); }
.lt-photo-tools { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.lt-photo-count { color: var(--lt-muted); font-weight: 700; font-size: 0.85rem; }
.lt-photo-count.ok { color: #16a34a; }
.lt-photo-tools .lt-btn-primary { margin-left: auto; }
.lt-photo-result { width: 100%; max-width: 540px; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.lt-photo-score { font-size: 1.4rem; font-weight: 800; color: var(--lt-navy); text-align: center; }
.lt-photo-score b { color: var(--lt-blue); font-size: 1.7rem; }
.lt-photo-score span { color: var(--lt-muted); font-weight: 700; }
.lt-photo-fb { background: #fff; border: 1px solid var(--lt-border,#e5e7eb); border-radius: 14px; padding: 14px 16px; }
.lt-photo-fb p { margin: 4px 0 0; color: var(--lt-navy); }
.lt-photo-result .lt-btn { width: 100%; }

/* ─── Roleplay: Talkpal-style cover-card grid ─── */
.lt-rp-section { margin-bottom: 28px; }
.lt-rp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.lt-rp-card {
  position: relative; overflow: hidden; border: none; cursor: pointer; text-align: left;
  aspect-ratio: 16 / 9; border-radius: 18px; padding: 0; color: #fff; transition: transform 0.15s, box-shadow 0.15s;
}
.lt-rp-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(15,23,42,0.22); }
.lt-rp-emoji {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 5.5rem;
  opacity: 0.85; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}
.lt-rp-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0.05) 30%, rgba(15,23,42,0.72) 100%); }
.lt-rp-title { position: absolute; left: 20px; right: 20px; bottom: 52px; font-size: 1.5rem; font-weight: 800; line-height: 1.15; z-index: 1; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.lt-rp-badge { position: absolute; left: 20px; bottom: 18px; z-index: 1; background: #fff; color: var(--lt-navy); font-weight: 800; font-size: 0.8rem; padding: 6px 16px; border-radius: 999px; }

.lt-rp-scene-art, .lt-rp-loading-art { display: grid; place-items: center; border-radius: 16px; }
.lt-rp-scene-art { width: 100%; aspect-ratio: 16/9; margin-bottom: 12px; }
.lt-rp-scene-art span { font-size: 3.4rem; }
.lt-rp-loading-art { width: 200px; height: 130px; margin: 0 auto 16px; }
.lt-rp-loading-art span { font-size: 3.6rem; }

@media (max-width: 900px) { .lt-rp-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   Premium Home hero  (.lth-*)  — sits above the existing .lt-home card system.
   Additive only: reuses --lt-* vars from .lt-shell; never overrides .lt-* rules.
   ============================================================================ */
.lth-page { display: flex; flex-direction: column; gap: 18px; }
.lth-page > * { animation: lth-rise .5s cubic-bezier(.22,1,.36,1) both; }
.lth-page > *:nth-child(2) { animation-delay: .06s; }
.lth-page > *:nth-child(3) { animation-delay: .12s; }
@keyframes lth-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Hero shell */
.lth-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  border-radius: 24px; padding: 30px 34px; color: #fff;
  background: linear-gradient(125deg, #0b1b46 0%, #1e3a8a 46%, #2563eb 100%);
  box-shadow: 0 20px 50px rgba(15, 33, 86, 0.38);
}
.lth-hero::after { /* corner sheen */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,.14), transparent 55%);
}
/* drifting aurora blobs */
.lth-aurora { position: absolute; z-index: -1; border-radius: 50%; filter: blur(34px); opacity: .55; }
.lth-aurora.a1 { width: 240px; height: 240px; right: -50px; top: -90px; background: #38bdf8; animation: lth-drift 14s ease-in-out infinite; }
.lth-aurora.a2 { width: 200px; height: 200px; left: 30%; bottom: -120px; background: #818cf8; animation: lth-drift 18s ease-in-out infinite reverse; }
.lth-aurora.a3 { width: 160px; height: 160px; right: 28%; top: -60px; background: #22d3ee; opacity: .4; animation: lth-drift 22s ease-in-out infinite; }
@keyframes lth-drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-26px, 24px) scale(1.12); } }

.lth-hero-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.lth-hero-mascot {
  font-size: 3.2rem; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.3)); animation: lth-float 4.5s ease-in-out infinite;
}
@keyframes lth-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.lth-hero-greet { min-width: 0; }
.lth-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #bfdbfe; background: rgba(255,255,255,.12); padding: 4px 11px; border-radius: 999px; }
.lth-hero-greet h1 { margin: 10px 0 4px; font-size: 1.85rem; font-weight: 800; line-height: 1.1; }
.lth-hero-greet p { margin: 0; opacity: .9; font-size: .96rem; }

.lth-hero-cta { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.lth-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 11px 18px; font-weight: 800; font-size: .92rem; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.lth-btn.primary { background: #fff; color: #1d4ed8; box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.lth-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.3); }
.lth-btn.ghost { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.lth-btn.ghost:hover { background: rgba(255,255,255,.24); transform: translateY(-2px); }

/* Stats glass card */
.lth-hero-stats {
  display: flex; flex-direction: column; gap: 14px; align-items: stretch;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 18px; padding: 16px 18px; backdrop-filter: blur(8px); min-width: 250px;
}
.lth-goal { display: flex; align-items: center; gap: 14px; }
.lth-goal-meta { display: flex; flex-direction: column; gap: 8px; }
.lth-goal-label { font-size: .8rem; font-weight: 700; color: #dbeafe; }
.lth-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.lth-cefr { font-size: .74rem; font-weight: 800; background: #fbbf24; color: #422006; padding: 3px 10px; border-radius: 999px; }
.lth-lvl { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 800; background: rgba(255,255,255,.18); color: #fff; padding: 3px 10px; border-radius: 999px; }

/* Conic progress ring */
.lth-ring {
  --p: 0; width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255,255,255,.18) 0);
  transition: background .8s ease;
}
.lth-ring.done { background: conic-gradient(#4ade80 100%, #4ade80 0); }
.lth-ring-hole { width: 64px; height: 64px; border-radius: 50%; background: #15327d; display: grid; place-items: center; text-align: center; }
.lth-ring-hole b { font-size: 1.15rem; font-weight: 800; color: #fff; line-height: 1; }
.lth-ring-hole small { display: block; font-size: .62rem; color: #bfdbfe; margin-top: 2px; }
.lth-ring-check { color: #4ade80; }

.lth-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.lth-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: #e5edff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); padding: 6px 11px; border-radius: 999px; }
.lth-pill b { color: #fff; font-weight: 800; }
.lth-fire { color: #fb923c; } .lth-star { color: #fcd34d; } .lth-ok { color: #4ade80; }

/* Jump back in */
.lth-quick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lth-quick-label { font-size: .82rem; font-weight: 800; color: var(--lt-muted); text-transform: uppercase; letter-spacing: .04em; }
.lth-quick-row { display: flex; gap: 10px; flex-wrap: wrap; }
.lth-quick-chip {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: #fff; border: 1px solid var(--lt-border); border-radius: 999px; padding: 8px 16px 8px 8px;
  font-weight: 700; color: var(--lt-navy); box-shadow: var(--lt-shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lth-quick-chip:hover { transform: translateY(-2px); border-color: var(--qc); box-shadow: 0 10px 24px rgba(15,23,42,.14); }
.lth-quick-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--qc); }

/* Rail: today's focus + progress link */
.lth-focus {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: linear-gradient(135deg, #fff7ed, #ffedd5); border: 1px solid #fed7aa;
  border-radius: 16px; padding: 14px 16px; box-shadow: var(--lt-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.lth-focus:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(234,88,12,.18); }
.lth-focus-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #f97316; color: #fff; flex-shrink: 0; }
.lth-focus small { display: block; font-size: .72rem; font-weight: 700; color: #9a3412; text-transform: uppercase; letter-spacing: .03em; }
.lth-focus b { font-size: 1.05rem; color: #7c2d12; }
.lth-focus-go { margin-left: auto; color: #c2410c; }
.lth-progress-link { display: flex; align-items: center; justify-content: space-between; text-decoration: none; color: var(--lt-navy); font-weight: 700; }
.lth-progress-link span { display: flex; align-items: center; gap: 8px; }
.lth-progress-link:hover { border-color: var(--lt-blue); color: var(--lt-blue); }

@media (max-width: 760px) {
  .lth-hero { padding: 24px 20px; gap: 18px; }
  .lth-hero-greet h1 { font-size: 1.5rem; }
  .lth-hero-stats { width: 100%; min-width: 0; }
  .lth-quick { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================================
   Reusable premium page header (.ltx-head)  — used by Progress, Mistake Bank…
   ============================================================================ */
.ltx-head {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border-radius: 20px; padding: 22px 26px; color: #fff; margin-bottom: 20px;
  background: linear-gradient(120deg, #0b1b46 0%, #1e3a8a 55%, #2563eb 100%);
  box-shadow: 0 14px 36px rgba(15, 33, 86, .3);
  animation: lth-rise .5s cubic-bezier(.22,1,.36,1) both;
}
.ltx-head::after { content: ""; position: absolute; right: -40px; top: -55px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.1); z-index: -1; }
.ltx-head-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ltx-head-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.16); flex-shrink: 0; }
.ltx-head-main h1 { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.ltx-head-main p { margin: 3px 0 0; opacity: .88; font-size: .9rem; }
.ltx-head-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.ltx-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); padding: 6px 12px; border-radius: 999px; }
.ltx-chip b { font-weight: 800; }
.ltx-chip.amber { background: #fbbf24; color: #422006; border-color: transparent; }
.ltx-fire { color: #fb923c; } .ltx-star { color: #fcd34d; }
@media (max-width: 640px) { .ltx-head { padding: 18px 18px; } .ltx-head-main h1 { font-size: 1.25rem; } }

/* ============================================================================
   Mistake Bank — premium "turn weak → strong" board (.ltm-*)
   ============================================================================ */
.ltm-mastery { background: #fff; border: 1px solid var(--lt-border); border-radius: 16px; padding: 16px 18px; box-shadow: var(--lt-shadow); margin-bottom: 16px; }
.ltm-mastery-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.ltm-mastery-top h3 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--lt-navy); }
.ltm-mastery-pct { font-size: 1.35rem; font-weight: 800; color: #16a34a; }
.ltm-mastery-bar { height: 10px; border-radius: 999px; background: #eef0f4; overflow: hidden; }
.ltm-mastery-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #16a34a); transition: width .8s cubic-bezier(.22,1,.36,1); }
.ltm-mastery-sub { margin: 8px 0 0; font-size: .82rem; color: var(--lt-muted); }

.ltm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.ltm-stat { background: #fff; border: 1px solid var(--lt-border); border-radius: 14px; padding: 14px; text-align: center; box-shadow: var(--lt-shadow); }
.ltm-stat-num { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.ltm-stat-label { font-size: .78rem; font-weight: 700; color: var(--lt-muted); margin-top: 5px; }
.ltm-stat.new .ltm-stat-num { color: #d97706; }
.ltm-stat.reviewing .ltm-stat-num { color: #2563eb; }
.ltm-stat.resolved .ltm-stat-num { color: #16a34a; }

.ltm-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ltm-fbtn { border: 1px solid var(--lt-border); background: #fff; color: var(--lt-muted); font-weight: 700; font-size: .85rem; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: all .15s ease; }
.ltm-fbtn:hover { border-color: var(--lt-blue); color: var(--lt-blue); }
.ltm-fbtn.on { background: var(--lt-navy); color: #fff; border-color: var(--lt-navy); }

.ltm-card { position: relative; background: #fff; border: 1px solid var(--lt-border); border-radius: 16px; padding: 16px 18px 16px 22px; margin-top: 12px; box-shadow: var(--lt-shadow); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.ltm-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15,23,42,.1); }
.ltm-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--lt-blue); }
.ltm-card.new::before { background: #f59e0b; }
.ltm-card.reviewing::before { background: #3b82f6; }
.ltm-card.resolved::before { background: #16a34a; }
.ltm-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ltm-src { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #475569; background: #f1f5f9; padding: 3px 10px; border-radius: 999px; }
.ltm-status { margin-left: auto; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; }
.ltm-status.new { background: #fef3c7; color: #b45309; }
.ltm-status.reviewing { background: #dbeafe; color: #1d4ed8; }
.ltm-status.resolved { background: #dcfce7; color: #15803d; }
.ltm-line { font-size: .92rem; line-height: 1.5; margin: 4px 0; }
.ltm-line .ltm-k { font-weight: 700; color: var(--lt-muted); margin-right: 6px; }
.ltm-wrong { color: #b91c1c; text-decoration: line-through; text-decoration-color: rgba(185,28,28,.4); }
.ltm-right { color: #15803d; font-weight: 600; }
.ltm-explain { color: var(--lt-muted); font-size: .86rem; line-height: 1.5; margin: 6px 0; }
.ltm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.ltm-tag { font-size: .72rem; font-weight: 700; color: #7c2d12; background: #ffedd5; padding: 3px 10px; border-radius: 999px; }
.ltm-practice { background: #f5f3ff; border: 1px solid #ede9fe; border-radius: 10px; padding: 9px 12px; margin-top: 8px; font-size: .86rem; color: #5b21b6; }
.ltm-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ltm-act { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid var(--lt-border); background: #fff; color: var(--lt-text); font-weight: 700; font-size: .82rem; padding: 6px 12px; border-radius: 10px; cursor: pointer; transition: all .15s ease; text-align: center; }
.ltm-act:hover { transform: translateY(-1px); }
.ltm-act.ok { background: #16a34a; color: #fff; border-color: #16a34a; }
.ltm-act.ok:hover { background: #15803d; }
.ltm-act.forgot { color: #b91c1c; border-color: #fecaca; } .ltm-act.forgot:hover { background: #fef2f2; }
.ltm-act.hard { color: #c2410c; border-color: #fed7aa; } .ltm-act.hard:hover { background: #fff7ed; }
.ltm-act.easy { color: #0369a1; border-color: #bae6fd; } .ltm-act.easy:hover { background: #f0f9ff; }
.ltm-act.master { color: #6d28d9; border-color: #ddd6fe; background: #faf5ff; } .ltm-act.master:hover { background: #f3e8ff; }
.ltm-act.del { color: #dc2626; flex-direction: row; } .ltm-act.del:hover { background: #fef2f2; border-color: #fecaca; }
.ltm-badge-sub { font-size: 0.66rem; font-weight: 600; opacity: 0.85; display: block; line-height: 1; }
.ltm-empty { text-align: center; padding: 48px 20px; background: #fff; border: 1px dashed var(--lt-border); border-radius: 18px; box-shadow: var(--lt-shadow); }
.ltm-empty-emoji { font-size: 3rem; }
.ltm-empty h3 { margin: 12px 0 4px; color: var(--lt-navy); }
.ltm-empty p { margin: 0; color: var(--lt-muted); }

/* SRS additions */
.ltm-status.learning { background: #dbeafe; color: #1d4ed8; }
.ltm-status.review_due { background: #fef3c7; color: #b45309; }
.ltm-status.mastered { background: #dcfce7; color: #15803d; }
.ltm-status.archived { background: #f1f5f9; color: #64748b; }
.ltm-card.learning::before { background: #3b82f6; }
.ltm-card.review_due::before { background: #f59e0b; }
.ltm-card.mastered::before { background: #16a34a; }
.ltm-card.archived::before { background: #94a3b8; }
.ltm-groups { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ltm-groups-label { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 800; color: var(--lt-muted); text-transform: uppercase; letter-spacing: .03em; }
.ltm-group-chip { font-size: .78rem; font-weight: 700; color: #7c2d12; background: #ffedd5; border: 1px solid #fed7aa; padding: 5px 11px; border-radius: 999px; }
.ltm-group-chip b { color: #c2410c; margin-left: 4px; }
.ltm-srs { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; }
.ltm-srs-bar { flex: 1; height: 7px; border-radius: 999px; background: #eef0f4; overflow: hidden; }
.ltm-srs-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #16a34a); transition: width .7s ease; }
.ltm-srs-meta { font-size: .74rem; font-weight: 700; color: var(--lt-muted); white-space: nowrap; }
.ltm-mastered-tag { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; color: #15803d; }
.ltm-due-flag { display: inline-block; margin-top: 8px; font-size: .7rem; font-weight: 800; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; padding: 2px 9px; border-radius: 999px; }
@media (max-width: 560px) { .ltm-stats { grid-template-columns: 1fr; } }

/* RAG citations under an AI answer (Phase 5) */
.lt-citations { max-width: 90%; background: #f8fafc; border: 1px solid var(--lt-border); border-left: 3px solid #6366f1; border-radius: 10px; padding: 9px 12px; margin-top: 4px; }
.lt-cite-head { font-size: .72rem; font-weight: 800; color: #4338ca; margin-bottom: 6px; }
.lt-cite { font-size: .8rem; color: #334155; margin-bottom: 5px; line-height: 1.4; }
.lt-cite-type { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #6366f1; background: #eef2ff; padding: 1px 7px; border-radius: 6px; margin-right: 6px; }
.lt-cite-rel { font-size: .62rem; font-weight: 800; color: #15803d; background: #f0fdf4; padding: 1px 7px; border-radius: 6px; margin-right: 6px; }
.lt-cite-title { color: var(--lt-navy); margin-right: 6px; }
.lt-cite-snip { color: var(--lt-muted); }

/* ============================================================
   REAL HIGH-DEFINITION PHOTOGRAPHIC IMAGE STYLES (AI TUTOR)
   ============================================================ */
.lt-wm-pic-art {
  width: 140px;
  height: 140px;
  border-radius: 20px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lt-wm-pic-art.big {
  width: 220px;
  height: 220px;
  border-radius: 24px;
  margin-bottom: 20px;
  box-shadow: 0 14px 32px -6px rgba(15, 23, 42, 0.14);
}

.lt-wm-pic-art.small {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  margin: 0;
}

/* Flashcard and Exercise Image Container Sizing */
.lt-wm-pic-wrap {
  width: 220px;
  height: 220px;
  max-width: 90vw;
  max-height: 220px;
  border-radius: 20px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.12);
}

.lt-wm-pic-wrap.big {
  width: 240px;
  height: 240px;
  max-height: 240px;
  border-radius: 24px;
  margin-bottom: 20px;
  box-shadow: 0 14px 32px -6px rgba(15, 23, 42, 0.14);
}

.lt-wm-pic-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lt-wm-real-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.lt-wm-real-img.loaded {
  opacity: 1;
}

.lt-wm-pic-art:hover .lt-wm-real-img {
  transform: scale(1.06);
}

.lt-wm-emoji-fallback {
  font-size: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lt-wm-pic-art.big .lt-wm-emoji-fallback {
  font-size: 5rem;
}

.lt-wm-pic-art.small .lt-wm-emoji-fallback {
  font-size: 1.8rem;
}

/* ============================================================
   ROLEPLAY CARDS WITH REAL WORLD HIGH-DEFINITION PHOTOGRAPHY
   ============================================================ */
.lt-rp-section {
  margin-bottom: 32px;
}

.lt-rp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 14px;
}

.lt-rp-card {
  position: relative;
  height: 200px;
  border-radius: 20px;
  border: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.lt-rp-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 35px -8px rgba(15, 23, 42, 0.22);
}

.lt-rp-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.5s ease;
  z-index: 1;
}

.lt-rp-bg-img.loaded {
  opacity: 1;
}

.lt-rp-card:hover .lt-rp-bg-img {
  transform: scale(1.08);
}

.lt-rp-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.88) 100%);
  z-index: 2;
  transition: background 0.3s ease;
}

.lt-rp-card:hover .lt-rp-overlay {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.94) 100%);
}

.lt-rp-topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.lt-rp-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lt-rp-badge {
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.lt-rp-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lt-rp-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.lt-rp-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #60a5fa;
  font-size: 0.82rem;
  font-weight: 700;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.lt-rp-card:hover .lt-rp-cta {
  opacity: 1;
  transform: translateX(4px);
  color: #93c5fd;
}

.lt-chat-tutor-av {
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lt-chat-tutor-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.lt-rp-loading-cover {
  width: 260px;
  height: 180px;
  margin: 0 auto 16px;
}

.lt-rp-sidebar-cover {
  width: 100%;
  height: 180px;
  margin-bottom: 12px;
  cursor: default;
}

.lt-rp-sidebar-cover:hover {
  transform: none;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12);
}



/* ════════════════════════════════════════════════════════════════
   AIEngineHero — Interactive 3D "AI ENGINE" Feature Orbit
   ----------------------------------------------------------------
   Features:
   - Perfectly scaled 420×420px orbit with optimal spacing
   - Compact, high-contrast active feature information panel
   - Zero overlap with the STATS section
   - Floating, stable AI ENGINE robot center with glowing core & pedestal
   - 8 capability orbit nodes with active highlighting & dimmed inactives
   - Dynamic energetic beams connecting the core to the active card
   - Automatic 3.8s rotation, hover-pause, click navigation & scroll sync
   - Full responsive layout: 3D orbit on desktop/tablet, interactive carousel on mobile
   - Pure CSS transforms & transitions, GPU accelerated, prefers-reduced-motion safe
   ════════════════════════════════════════════════════════════════ */

.aeh-stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: visible;
  padding: 4px 0 0;
}

/* 420×420 3D orbital scene */
.aeh-scene {
  position: relative;
  width: 420px;
  height: 420px;
  flex-shrink: 0;
  transform-style: preserve-3d;
  perspective: 1100px;
}

/* ── Ambient Background Glow & Tech Grid ────────────────────────── */
.aeh-radial {
  position: absolute;
  top: 50%; left: 50%;
  width: 380px; height: 380px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.42) 0%, rgba(6, 182, 212, 0.16) 40%, transparent 70%);
  filter: blur(14px);
  z-index: 0;
  animation: aeh-glow-pulse 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes aeh-glow-pulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

.aeh-tech-grid {
  position: absolute;
  top: 50%; left: 50%;
  width: 280px; height: 280px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(129, 140, 248, 0.12) 0 1px, transparent 1px 22px);
  -webkit-mask: radial-gradient(circle, #000 52%, transparent 72%);
          mask: radial-gradient(circle, #000 52%, transparent 72%);
  opacity: 0.65;
  z-index: 0;
  animation: aeh-grid-spin 40s linear infinite;
  pointer-events: none;
}
@keyframes aeh-grid-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── Tilted 3D Orbit Rings ──────────────────────────────────────── */
.aeh-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(129, 140, 248, 0.28);
  transform-style: preserve-3d;
  z-index: 1;
  pointer-events: none;
}
.aeh-ring::after {
  content: '';
  position: absolute;
  top: -3.5px; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #c7d2fe;
  box-shadow: 0 0 10px 2px rgba(165, 180, 252, 0.95);
}
.aeh-ring-1 {
  width: 240px; height: 240px; margin: -120px 0 0 -120px;
  border-color: rgba(129, 140, 248, 0.35);
  animation: aeh-spin 16s linear infinite;
}
.aeh-ring-2 {
  width: 320px; height: 320px; margin: -160px 0 0 -160px;
  border-color: rgba(56, 189, 248, 0.25);
  animation: aeh-spin-rev 24s linear infinite;
}
.aeh-ring-3 {
  width: 400px; height: 400px; margin: -200px 0 0 -200px;
  border-color: rgba(129, 140, 248, 0.15);
  animation: aeh-spin 34s linear infinite;
}
@keyframes aeh-spin     { from { transform: rotateX(72deg) rotateZ(0deg);   } to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes aeh-spin-rev { from { transform: rotateX(72deg) rotateZ(360deg); } to { transform: rotateX(72deg) rotateZ(0deg);   } }

/* ── Floating Data Particles ────────────────────────────────────── */
.aeh-particles { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.aeh-particle {
  position: absolute;
  width: 3.5px; height: 3.5px;
  border-radius: 50%;
  background: #a5b4fc;
  box-shadow: 0 0 6px 1px rgba(165, 180, 252, 0.85);
  opacity: 0;
  animation: aeh-particle-float 6.5s ease-in-out infinite;
}
.aeh-particle:nth-child(2n) { background: #67e8f9; box-shadow: 0 0 6px 1px rgba(103, 232, 249, 0.85); }
.aeh-particle:nth-child(5n) { background: #fbbf24; box-shadow: 0 0 6px 1px rgba(251, 191, 36, 0.75); }
@keyframes aeh-particle-float {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.5); }
  20%  { opacity: 0.9; }
  70%  { opacity: 0.6; }
  100% { opacity: 0;   transform: translate(var(--dx, 10px), -24px) scale(1); }
}
.aeh-particle.p1  { top: 14%; left: 24%; --dx: 12px;  animation-duration: 6.5s; animation-delay: 0s;   }
.aeh-particle.p2  { top: 22%; left: 74%; --dx: -10px; animation-duration: 7.2s; animation-delay: .6s;  }
.aeh-particle.p3  { top: 38%; left: 12%; --dx: 8px;   animation-duration: 6.8s; animation-delay: 1.1s; }
.aeh-particle.p4  { top: 30%; left: 88%; --dx: -12px; animation-duration: 7.6s; animation-delay: .3s;  }
.aeh-particle.p5  { top: 60%; left: 18%; --dx: 10px;  animation-duration: 6.2s; animation-delay: 1.5s; }
.aeh-particle.p6  { top: 70%; left: 80%; --dx: -8px;  animation-duration: 7.0s; animation-delay: .9s;  }
.aeh-particle.p7  { top: 48%; left: 50%; --dx: 6px;   animation-duration: 5.8s; animation-delay: 2.0s; }
.aeh-particle.p8  { top: 82%; left: 40%; --dx: -6px;  animation-duration: 7.4s; animation-delay: .4s;  }
.aeh-particle.p9  { top: 16%; left: 55%; --dx: 8px;   animation-duration: 6.6s; animation-delay: 1.8s; }
.aeh-particle.p10 { top: 54%; left: 70%; --dx: -10px; animation-duration: 7.1s; animation-delay: 1.2s; }
.aeh-particle.p11 { top: 66%; left: 34%; --dx: 10px;  animation-duration: 6.0s; animation-delay: .7s;  }
.aeh-particle.p12 { top: 26%; left: 40%; --dx: -8px;  animation-duration: 7.3s; animation-delay: 2.2s; }
.aeh-particle.p13 { top: 74%; left: 60%; --dx: 6px;   animation-duration: 6.4s; animation-delay: 1.0s; }
.aeh-particle.p14 { top: 40%; left: 30%; --dx: -10px; animation-duration: 6.9s; animation-delay: .2s;  }

/* ── Glowing Energy Beams: Core → Each Card ──────────────────────── */
.aeh-beams { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; z-index: 2; }
.aeh-beam {
  position: absolute;
  top: 0; left: 0;
  width: 152px; height: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0) 0%, rgba(129, 140, 248, 0.45) 32%, rgba(103, 232, 249, 0.6) 100%);
  opacity: 0.2;
  transition: opacity 0.35s ease, height 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.aeh-beam::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #a5f3fc;
  box-shadow: 0 0 8px 2px rgba(103, 232, 249, 0.95);
  animation: aeh-beam-travel 2.8s linear infinite;
}

/* Active Energy Beam */
.aeh-beam.aeh-beam-active {
  opacity: 1;
  height: 2.5px;
  margin-top: -0.5px;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.9) 0%, rgba(56, 189, 248, 1) 60%, #ffffff 100%);
  box-shadow: 0 0 14px 2px rgba(56, 189, 248, 0.85);
  z-index: 4;
}
.aeh-beam.aeh-beam-active::after {
  width: 9px; height: 9px;
  margin-top: -4.5px;
  background: #ffffff;
  box-shadow: 0 0 16px 4px #38bdf8, 0 0 22px 6px rgba(6, 182, 212, 0.8);
  animation: aeh-beam-travel-active 1.4s linear infinite;
}
.aeh-beam.aeh-beam-inactive {
  opacity: 0.12;
}

@keyframes aeh-beam-travel {
  0%   { transform: translateX(4px);   opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(138px); opacity: 0; }
}
@keyframes aeh-beam-travel-active {
  0%   { transform: translateX(4px);   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(140px); opacity: 0; }
}

.aeh-beam.beam-1 { transform: rotate(-90deg);  } /* top: AI Chat */
.aeh-beam.beam-2 { transform: rotate(-45deg);  } /* top-right: Dashboards */
.aeh-beam.beam-3 { transform: rotate(0deg);    } /* right: Lead CRM */
.aeh-beam.beam-4 { transform: rotate(45deg);   } /* bottom-right: English Tutor */
.aeh-beam.beam-5 { transform: rotate(90deg);   } /* bottom: JWT Auth */
.aeh-beam.beam-6 { transform: rotate(135deg);  } /* bottom-left: Assessments */
.aeh-beam.beam-7 { transform: rotate(180deg);  } /* left: Mock Interview */
.aeh-beam.beam-8 { transform: rotate(225deg);  } /* top-left: Certificates */

/* ════════════════════════════════════════════════════════════════
   CENTER AI ENGINE — Robot Mascot On Glowing Core
   ════════════════════════════════════════════════════════════════ */
.aeh-engine {
  position: absolute;
  top: 50%; left: 50%;
  width: 140px; height: 175px;
  transform: translate(-50%, -50%);
  z-index: 6;
  animation: aeh-float 4.6s ease-in-out infinite;
  transition: transform 0.3s ease;
}
.aeh-engine.aeh-engine-focused {
  animation-play-state: paused;
}
@keyframes aeh-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-8px); }
}

/* Glowing Core Sphere */
.aeh-core {
  position: absolute;
  top: 4px; left: 50%;
  width: 122px; height: 122px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 34%, #a5b4fc 0%, #6366f1 38%, #4338ca 70%, #1e1b6b 100%);
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.45),
    0 0 55px rgba(99, 102, 241, 0.7),
    inset 0 5px 15px rgba(255, 255, 255, 0.25),
    inset 0 -12px 24px rgba(30, 27, 107, 0.65);
  z-index: 0;
  animation: aeh-core-pulse 3.4s ease-in-out infinite;
  transition: box-shadow 0.4s ease;
}
.aeh-core.aeh-core-active {
  box-shadow:
    0 0 0 2px rgba(56, 189, 248, 0.8),
    0 0 75px rgba(6, 182, 212, 0.9),
    inset 0 6px 20px rgba(255, 255, 255, 0.38),
    inset 0 -12px 24px rgba(30, 27, 107, 0.65);
}
@keyframes aeh-core-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(139, 92, 246, 0.45),
      0 0 45px rgba(99, 102, 241, 0.6),
      inset 0 5px 15px rgba(255, 255, 255, 0.25),
      inset 0 -12px 24px rgba(30, 27, 107, 0.65);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(56, 189, 248, 0.7),
      0 0 70px rgba(129, 140, 248, 0.95),
      inset 0 5px 18px rgba(255, 255, 255, 0.35),
      inset 0 -12px 24px rgba(30, 27, 107, 0.65);
  }
}

/* 3D WebGL Robot Canvas Container */
.aeh-3d-canvas-wrap {
  position: absolute;
  top: -4px; left: 50%;
  width: 154px; height: 160px;
  transform: translateX(-50%);
  z-index: 3;
  cursor: pointer;
  outline: none;
  filter: drop-shadow(0 12px 20px rgba(15, 23, 42, 0.6))
          drop-shadow(0 0 24px rgba(56, 189, 248, 0.45));
  transition: transform 0.25s ease, filter 0.25s ease;
}
.aeh-3d-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  pointer-events: auto;
}
.aeh-3d-canvas-wrap:hover {
  transform: translateX(-50%) scale(1.04);
  filter: drop-shadow(0 14px 24px rgba(15, 23, 42, 0.7))
          drop-shadow(0 0 32px rgba(103, 232, 249, 0.65));
}
.aeh-3d-canvas-wrap:focus-visible {
  border-radius: 50%;
  box-shadow: 0 0 0 2px #38bdf8;
}
.aeh-3d-canvas-wrap.aeh-3d-waving {
  animation: aeh-wave-pulse 0.6s ease-in-out infinite alternate;
}
@keyframes aeh-wave-pulse {
  from { filter: drop-shadow(0 12px 20px rgba(15, 23, 42, 0.6)) drop-shadow(0 0 24px rgba(56, 189, 248, 0.5)); }
  to   { filter: drop-shadow(0 14px 24px rgba(15, 23, 42, 0.7)) drop-shadow(0 0 36px rgba(103, 232, 249, 0.85)); }
}

/* Robot Mascot Image (AI background-removed fallback) */
.aeh-robot-img {
  position: absolute;
  top: 4px; left: 50%;
  width: 132px; height: 132px;
  object-fit: contain;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
  filter:
    drop-shadow(0 10px 18px rgba(15, 23, 42, 0.5))
    drop-shadow(0 0 20px rgba(103, 232, 249, 0.6));
  animation: aeh-robot-sway 5s ease-in-out infinite;
}
@keyframes aeh-robot-sway {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25%      { transform: translateX(-50%) rotate(-2deg); }
  75%      { transform: translateX(-50%) rotate(2deg); }
}

/* AI ENGINE Wordmark */
.aeh-name {
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  white-space: nowrap;
  background: linear-gradient(90deg, #c7d2fe, #67e8f9 55%, #a5b4fc);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(103, 232, 249, 0.5));
  animation: aeh-name-glow 3.2s ease-in-out infinite;
}
@keyframes aeh-name-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.35)); }
  50%      { filter: drop-shadow(0 0 14px rgba(129, 140, 248, 0.85)); }
}

/* Glowing Pedestal */
.aeh-pedestal {
  position: absolute;
  bottom: -6px; left: 50%;
  width: 130px; height: 28px;
  transform: translateX(-50%) rotateX(64deg);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(129, 140, 248, 0.6) 0%, transparent 70%);
  filter: blur(3px);
  z-index: 0;
  animation: aeh-pedestal 4.6s ease-in-out infinite;
}
@keyframes aeh-pedestal {
  0%, 100% { opacity: 0.8; transform: translateX(-50%) rotateX(64deg) scaleX(1); }
  50%      { opacity: 1;   transform: translateX(-50%) rotateX(64deg) scaleX(1.1); }
}

/* ════════════════════════════════════════════════════════════════
   ORBITING CAPABILITY CARDS (8 Nodes, 162px Radius)
   ════════════════════════════════════════════════════════════════ */
.aeh-card-pos {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 4;
  transition: z-index 0.3s ease;
}
.aeh-card-pos.aeh-pos-active {
  z-index: 8;
}

.aeh-card-pos.pos-1 { transform: translate(-50%, -50%) translate(0,     -164px); } /* top: AI Chat */
.aeh-card-pos.pos-2 { transform: translate(-50%, -50%) translate(116px, -116px); } /* top-right: Dashboards */
.aeh-card-pos.pos-3 { transform: translate(-50%, -50%) translate(164px,  0    ); } /* right: Lead CRM */
.aeh-card-pos.pos-4 { transform: translate(-50%, -50%) translate(116px,  116px); } /* bottom-right: English Tutor */
.aeh-card-pos.pos-5 { transform: translate(-50%, -50%) translate(0,      164px); } /* bottom: JWT Auth */
.aeh-card-pos.pos-6 { transform: translate(-50%, -50%) translate(-116px, 116px); } /* bottom-left: Assessments */
.aeh-card-pos.pos-7 { transform: translate(-50%, -50%) translate(-164px, 0    ); } /* left: Mock Interview */
.aeh-card-pos.pos-8 { transform: translate(-50%, -50%) translate(-116px,-116px); } /* top-left: Certificates */

.aeh-card-bob { animation: aeh-card-float 5.2s ease-in-out infinite; }
.pos-2 .aeh-card-bob { animation-delay: .4s; }
.pos-3 .aeh-card-bob { animation-delay: .8s; }
.pos-4 .aeh-card-bob { animation-delay: 1.2s; }
.pos-5 .aeh-card-bob { animation-delay: 1.6s; }
.pos-6 .aeh-card-bob { animation-delay: 2.0s; }
.pos-7 .aeh-card-bob { animation-delay: 2.4s; }
.pos-8 .aeh-card-bob { animation-delay: 2.8s; }
@keyframes aeh-card-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Base Card Button */
.aeh-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 114px;
  padding: 7px 11px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(40, 38, 90, 0.7), rgba(20, 18, 52, 0.6));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(129, 140, 248, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  cursor: pointer;
  outline: none;
  font-family: inherit;
  text-align: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease, opacity 0.35s ease, background 0.35s ease;
}
.aeh-card:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* Active State Card */
.aeh-card.aeh-card-active {
  transform: scale(1.08) translateY(-4px);
  border-color: #38bdf8;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
  box-shadow:
    0 12px 32px rgba(6, 182, 212, 0.45),
    0 0 20px rgba(56, 189, 248, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  opacity: 1;
}

/* Inactive State Card */
.aeh-card.aeh-card-inactive {
  opacity: 0.55;
  transform: scale(0.96);
}
.aeh-card.aeh-card-inactive:hover {
  opacity: 0.95;
  transform: scale(1.03) translateY(-3px);
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 10px 26px rgba(79, 70, 229, 0.45);
}

.aeh-card-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: linear-gradient(145deg, rgba(129, 140, 248, 0.40), rgba(34, 211, 238, 0.16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.aeh-card.aeh-card-active .aeh-card-icon {
  background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.65);
  transform: scale(1.08);
}

.aeh-card-info { display: flex; flex-direction: column; gap: 0px; }
.aeh-card-name {
  color: #f1f5f9;
  font-weight: 700;
  font-size: 11.5px;
  white-space: nowrap;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.aeh-card.aeh-card-active .aeh-card-name {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}
.aeh-card-sub {
  color: #a5b4fc;
  font-size: 9.5px;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.aeh-card.aeh-card-active .aeh-card-sub {
  color: #38bdf8;
  font-weight: 600;
}

/* Active indicator dot */
.aeh-active-indicator {
  position: absolute;
  top: -3px; right: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 10px 2px #38bdf8;
  animation: aeh-indicator-pulse 1.8s ease-in-out infinite;
}
@keyframes aeh-indicator-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.7; }
}

/* ════════════════════════════════════════════════════════════════
   ACTIVE FEATURE INFORMATION PANEL (Sleek, Compact)
   ════════════════════════════════════════════════════════════════ */
.aeh-active-panel-wrap {
  width: 100%;
  max-width: 440px;
  position: relative;
  z-index: 7;
}

.aeh-active-panel {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.90) 0%, rgba(30, 41, 59, 0.84) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(6, 182, 212, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  animation: aeh-panel-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes aeh-panel-enter {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.aeh-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.aeh-panel-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}
.aeh-panel-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.55);
  flex-shrink: 0;
}
.aeh-panel-titles {
  display: flex;
  flex-direction: column;
}
.aeh-panel-name {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.aeh-panel-sub {
  font-size: 12px;
  font-weight: 600;
  color: #38bdf8;
  line-height: 1.25;
}

/* Stepper Controls */
.aeh-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 3px 8px;
}
.aeh-step-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 10px;
  cursor: pointer;
  padding: 1px 3px;
  transition: color 0.2s ease, transform 0.2s ease;
  line-height: 1;
}
.aeh-step-btn:hover {
  color: #38bdf8;
  transform: scale(1.2);
}
.aeh-step-count {
  font-size: 11px;
  font-weight: 700;
  color: #cbd5e1;
}

.aeh-panel-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0 0 10px;
}

/* Benefits Grid */
.aeh-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px 8px;
  margin-bottom: 10px;
}
.aeh-benefit-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #e2e8f0;
}
.aeh-check {
  color: #10b981;
  font-weight: 900;
  font-size: 11.5px;
  flex-shrink: 0;
}

/* Progress Track Dots */
.aeh-progress-bar-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.aeh-dot-btn {
  width: 18px; height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.aeh-dot-btn.aeh-dot-active {
  width: 36px;
  background: linear-gradient(90deg, #6366f1, #38bdf8);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.7);
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE LAYOUTS
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .aeh-scene {
    width: 380px;
    height: 380px;
    transform: scale(0.9);
  }
  .aeh-active-panel-wrap {
    max-width: 400px;
  }
}

@media (max-width: 768px) {
  .aeh-stage {
    gap: 12px;
  }
  .aeh-scene {
    width: 300px;
    height: 300px;
    transform: scale(0.72);
  }
  .aeh-active-panel-wrap {
    max-width: 100%;
    padding: 0 10px;
  }
  .aeh-active-panel {
    padding: 14px 16px;
  }
  .aeh-benefits-grid {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

@media (max-width: 480px) {
  .aeh-scene {
    width: 260px;
    height: 260px;
    transform: scale(0.62);
  }
  .aeh-panel-name { font-size: 15px; }
  .aeh-panel-sub  { font-size: 11.5px; }
  .aeh-panel-desc { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION (Accessibility)
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .aeh-stage *,
  .aeh-stage *::before,
  .aeh-stage *::after {
    animation: none !important;
    transition: none !important;
  }
  .aeh-ring-1, .aeh-ring-2, .aeh-ring-3 { transform: rotateX(72deg); }
  .aeh-card.aeh-card-active { transform: scale(1); }
  .aeh-card.aeh-card-inactive { opacity: 1; transform: scale(1); }
}
/* ═══════════════════════════════════════════════════════════
   CAMPUSOS ERP — HOME PAGE (Modern Design System)
   Theme: CampusOS Royal Blue, Amber Gold & Crisp Light Surfaces
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
}

.hp-wrap {
  --brand-blue: #014aa2;
  --brand-blue-dark: #080c1e;
  --brand-blue-mid: #0f1c3f;
  --brand-gold: #facd12;
  --brand-gold-dark: #f59e0b;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--slate-900);
  background: var(--slate-50);
  overflow-x: hidden;
  width: 100%;
}

.hp-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* ── Section Header Components ──────────────────────────────────── */
.hp-sec-head {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.hp-sec-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue);
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  padding: 6px 18px;
  border-radius: 9999px;
  margin-bottom: 16px;
}

.hp-sec-badge.hp-badge-active {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.hp-sec-title {
  font-size: 36px;
  font-weight: 850;
  color: var(--slate-900);
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  line-height: 1.25;
  text-align: center;
  position: relative;
  display: inline-block;
}

.hp-sec-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 56px;
  height: 3.5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #014aa2, #3b82f6);
}

.hp-sec-sub {
  font-size: 16px;
  color: var(--slate-600);
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   1. MARQUEE TICKER
   ═══════════════════════════════════════════════════════════ */
.hp-ticker {
  background: linear-gradient(90deg, #080c1e 0%, #0f1c3f 50%, #014aa2 100%);
  border-bottom: 2.5px solid var(--brand-gold);
  height: 42px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.hp-ticker-badge {
  background: var(--brand-gold);
  color: #0f172a;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 18px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
}

.hp-ticker-icon {
  color: #0f172a;
}

.hp-ticker-scroll {
  overflow: hidden;
  flex: 1;
}

.hp-ticker-inner {
  display: inline-flex;
  gap: 48px;
  animation: scrollTicker 28s linear infinite;
  white-space: nowrap;
  padding-left: 30px;
}

.hp-ticker-inner span {
  color: rgba(241, 245, 249, 0.9);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

@keyframes scrollTicker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════
   2. HERO SECTION
   ═══════════════════════════════════════════════════════════ */
.hp-hero {
  background: linear-gradient(135deg, #080c1e 0%, #0f1c3f 45%, #014aa2 100%);
  padding: 72px 0 60px;
  position: relative;
  overflow: hidden;
  color: #ffffff;
}

.hp-hero-bg-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  width: 800px;
  height: 500px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, rgba(1, 74, 162, 0.14) 45%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

.hp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.hp-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

.hp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #38bdf8;
  padding: 5px 16px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 20px;
  backdrop-filter: blur(6px);
}

.hp-eyebrow-sparkle {
  color: var(--brand-gold);
}

.hp-h1 {
  font-size: 48px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.14;
  margin: 0 0 6px;
  letter-spacing: -0.03em;
}

.hp-h1-accent {
  background: linear-gradient(110deg, #93c5fd 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hp-h2-yellow {
  font-size: 38px;
  font-weight: 900;
  color: var(--brand-gold);
  margin: 0 0 20px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-shadow: 0 0 24px rgba(250, 205, 18, 0.25);
}

.hp-desc {
  font-size: 16px;
  color: rgba(226, 232, 240, 0.9);
  line-height: 1.7;
  margin: 0 0 26px;
  max-width: 520px;
}

.hp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.hp-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f1f5f9;
  border-radius: 9999px;
  padding: 6px 15px;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.hp-tag:hover {
  transform: translateY(-2px);
  border-color: #38bdf8;
}

.hp-hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.hp-btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #080c1e;
  font-weight: 850;
  font-size: 16px;
  padding: 14px 34px;
  border-radius: 12px;
  text-decoration: none;
}

.hp-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hp-btn-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.4);
}

.hp-tech {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hp-tech-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

.hp-tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hp-tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
}

.hp-tech-icon {
  color: #38bdf8;
}

.hp-hero-right {
  position: relative;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Hero Stats Row ─────────────────────────────────────────────── */
.hp-stats {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
}

.hp-stat-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 24px 18px;
  text-align: center;
  backdrop-filter: blur(8px);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.hp-stat-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-gold);
}

.hp-stat-val {
  font-size: 38px;
  font-weight: 900;
  color: var(--brand-gold);
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.hp-stat-lbl {
  font-size: 12.5px;
  font-weight: 750;
  color: #cbd5e1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   3. FEATURES BENTO GRID
   ═══════════════════════════════════════════════════════════ */
.hp-features {
  background: var(--slate-50);
  padding: 96px 0 108px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.hp-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
  z-index: 1;
}

.hp-bento-span-2 {
  grid-column: span 2;
}

.hp-bento-card {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.hp-bento-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.hp-bento-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.24s ease;
}

.hp-bento-card:hover .hp-bento-icon-wrap {
  transform: scale(1.08);
}

.hp-bento-tags {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hp-bento-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.hp-bento-metric {
  font-size: 12px;
  color: var(--slate-500);
  font-weight: 600;
}

.hp-bento-body {
  flex: 1;
  margin-bottom: 20px;
}

.hp-bento-title {
  font-size: 18.5px;
  font-weight: 850;
  color: var(--slate-900);
  margin: 0 0 9px;
  letter-spacing: -0.015em;
}

.hp-bento-desc {
  font-size: 13.8px;
  color: var(--slate-600);
  line-height: 1.65;
  margin: 0;
}

.hp-bento-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

.hp-bento-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-800);
  background: var(--slate-50);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
}

.hp-bento-sparkle {
  color: #eab308;
}

.hp-bento-arrow {
  color: var(--slate-500);
  display: flex;
  align-items: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

.hp-bento-card:hover .hp-bento-arrow {
  color: var(--brand-blue);
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════
   4. ROLES SECTION
   ═══════════════════════════════════════════════════════════ */
.hp-roles {
  background: #ffffff;
  padding: 96px 0;
}

.hp-roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.hp-role-spotlight-card {
  min-height: 240px;
  background: #ffffff;
}

.hp-role-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.hp-role-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.hp-role-badge-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hp-role-name {
  font-size: 19px;
  font-weight: 850;
  color: var(--slate-900);
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}

.hp-role-desc {
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.65;
  margin: 0 0 20px;
  flex: 1;
}

.hp-role-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  font-size: 12.5px;
  font-weight: 750;
}

/* ═══════════════════════════════════════════════════════════
   5. HOW IT WORKS
   ═══════════════════════════════════════════════════════════ */
.hp-how {
  background: var(--slate-50);
  padding: 96px 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.hp-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.hp-step-card {
  background: #ffffff;
  min-height: 220px;
}

.hp-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.hp-step-num-badge {
  font-size: 14px;
  font-weight: 900;
  color: var(--brand-blue);
  background: #dbeafe;
  padding: 4px 12px;
  border-radius: 8px;
  letter-spacing: 0.06em;
}

.hp-step-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.hp-step-title {
  font-size: 18px;
  font-weight: 850;
  color: var(--slate-900);
  margin: 0 0 10px;
}

.hp-step-desc {
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.65;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   6. FLAGSHIP AI MODULES
   ═══════════════════════════════════════════════════════════ */
.hp-soon-band {
  background: #ffffff;
  padding: 96px 0;
}

.hp-soon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.hp-soon-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.hp-soon-card {
  background: #ffffff;
  min-height: 220px;
}

.hp-soon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.hp-soon-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.hp-soon-tag-pill {
  font-size: 11px;
  font-weight: 800;
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  padding: 4px 12px;
  border-radius: 9999px;
  text-transform: uppercase;
}

.hp-soon-card-title {
  font-size: 20px;
  font-weight: 850;
  color: var(--slate-900);
  margin: 0 0 10px;
}

.hp-soon-card-desc {
  font-size: 14.5px;
  color: var(--slate-600);
  line-height: 1.65;
  margin: 0 0 20px;
}

.hp-soon-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
  font-size: 13.5px;
  font-weight: 750;
  color: var(--brand-blue);
}

/* ═══════════════════════════════════════════════════════════
   7. FINAL CTA
   ═══════════════════════════════════════════════════════════ */
.hp-cta {
  background: var(--slate-50);
  padding: 90px 0;
}

.hp-cta-box {
  background: linear-gradient(135deg, #014aa2 0%, #0f1c3f 60%, #080c1e 100%);
  border-radius: 28px;
  padding: 64px 40px;
  text-align: center;
  color: #ffffff;
  box-shadow: 0 20px 48px rgba(1, 74, 162, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.hp-cta-badge {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-gold);
  display: inline-block;
  margin-bottom: 14px;
}

.hp-cta-title {
  color: #ffffff;
  font-size: 38px;
  font-weight: 850;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}

.hp-cta-sub {
  color: #cbd5e1;
  font-size: 16.5px;
  margin: 0 auto 36px;
  max-width: 520px;
  line-height: 1.6;
}

.hp-cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.hp-cta-primary {
  color: #080c1e;
  font-weight: 850;
  font-size: 16px;
  padding: 14px 34px;
  border-radius: 12px;
  text-decoration: none;
}

.hp-cta-ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-weight: 750;
  font-size: 15px;
  padding: 14px 30px;
  border-radius: 12px;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, background 0.2s ease;
}

.hp-cta-ghost:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.18);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE QUERIES
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hp-hero-inner {
    grid-template-columns: 1fr;
  }
  .hp-hero-right {
    min-height: 420px;
  }
  .hp-h1 {
    font-size: 38px;
  }
  .hp-h2-yellow {
    font-size: 30px;
  }
  .hp-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .hp-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hp-bento-span-2 {
    grid-column: span 2;
  }
  .hp-roles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hp-steps-grid {
    grid-template-columns: 1fr;
  }
  .hp-soon-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hp-hero {
    padding: 48px 0 40px;
  }
  .hp-h1 {
    font-size: 30px;
  }
  .hp-h2-yellow {
    font-size: 24px;
  }
  .hp-stats {
    grid-template-columns: 1fr;
  }
  .hp-bento-grid {
    grid-template-columns: 1fr;
  }
  .hp-bento-span-2 {
    grid-column: span 1;
  }
  .hp-roles-grid {
    grid-template-columns: 1fr;
  }
  .hp-cta-box {
    padding: 40px 24px;
  }
  .hp-cta-title {
    font-size: 28px;
  }
}
/* ============================================================
   Button primitive — design-system component
   ------------------------------------------------------------
   All values come from styles/tokens.css. No hardcoded hex.
   ============================================================ */

.ui-btn {
  /* layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  /* typography */
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  text-decoration: none;

  /* shape */
  border: 1px solid transparent;
  border-radius: var(--radius-md);

  /* interaction */
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    filter var(--transition-fast);

  /* prevent iOS tap-highlight flash */
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------
   Icon slot — keeps the lucide SVG aligned with text baseline
   ------------------------------------------------------------ */
.ui-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ui-btn__icon > svg,
.ui-btn__icon.ui-btn__spinner {
  width: 1em;
  height: 1em;
}

.ui-btn__label {
  display: inline-block;
}

/* ------------------------------------------------------------
   SIZES
   ------------------------------------------------------------ */
.ui-btn--sm {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
}

.ui-btn--md {
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
}

.ui-btn--lg {
  font-size: var(--font-size-base);
  padding: var(--space-3) var(--space-6);
}

/* ------------------------------------------------------------
   VARIANT: primary — solid purple action
   ------------------------------------------------------------ */
.ui-btn--primary {
  background-color: var(--tone-primary-bg);
  color: var(--tone-primary-fg);
  border-color: var(--tone-primary-border);
  box-shadow: var(--shadow-xs);
}

.ui-btn--primary:hover:not(:disabled) {
  filter: brightness(0.94);
}

.ui-btn--primary:active:not(:disabled) {
  filter: brightness(0.88);
}

/* ------------------------------------------------------------
   VARIANT: secondary — surface card with neutral border
   ------------------------------------------------------------ */
.ui-btn--secondary {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}

.ui-btn--secondary:hover:not(:disabled) {
  background-color: var(--color-slate-50);
  border-color: var(--border-strong);
}

.ui-btn--secondary:active:not(:disabled) {
  background-color: var(--color-slate-100);
}

/* ------------------------------------------------------------
   VARIANT: ghost — transparent, hover gets a subtle wash
   ------------------------------------------------------------ */
.ui-btn--ghost {
  background-color: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.ui-btn--ghost:hover:not(:disabled) {
  background-color: var(--color-slate-100);
  color: var(--text-primary);
}

.ui-btn--ghost:active:not(:disabled) {
  background-color: var(--color-slate-200);
}

/* ------------------------------------------------------------
   VARIANT: danger — solid red destructive action
   ------------------------------------------------------------ */
.ui-btn--danger {
  background-color: var(--tone-danger-bg);
  color: var(--tone-danger-fg);
  border-color: var(--tone-danger-border);
  box-shadow: var(--shadow-xs);
}

.ui-btn--danger:hover:not(:disabled) {
  filter: brightness(0.94);
}

.ui-btn--danger:active:not(:disabled) {
  filter: brightness(0.88);
}

/* ------------------------------------------------------------
   VARIANT: link — looks like a hyperlink, no chrome
   ------------------------------------------------------------ */
.ui-btn--link {
  background-color: transparent;
  color: var(--color-blue-700);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.ui-btn--link:hover:not(:disabled) {
  color: var(--color-blue-800);
  text-decoration-thickness: 2px;
}

.ui-btn--link:active:not(:disabled) {
  color: var(--color-blue-900);
}

/* ------------------------------------------------------------
   MODIFIERS
   ------------------------------------------------------------ */
.ui-btn--full {
  width: 100%;
}

/* ------------------------------------------------------------
   FOCUS — keyboard only (:focus-visible)
   ------------------------------------------------------------ */
.ui-btn:focus {
  outline: none;
}

.ui-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

/* ------------------------------------------------------------
   LOADING state
   ------------------------------------------------------------ */
.ui-btn--loading {
  opacity: 0.7;
  cursor: wait;
}

.ui-btn__spinner {
  animation: ui-btn-spin 800ms linear infinite;
}

@keyframes ui-btn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ------------------------------------------------------------
   DISABLED state — also covers loading because we set disabled
   ------------------------------------------------------------ */
.ui-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  filter: none;
  box-shadow: none;
}

/* Loading overrides plain :disabled opacity so the spinner is
   visible but the button still reads as busy, not greyed-out. */
.ui-btn--loading:disabled {
  opacity: 0.7;
  cursor: wait;
}

/* ------------------------------------------------------------
   Respect users who prefer reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ui-btn {
    transition: none;
  }
  .ui-btn__spinner {
    animation-duration: 2s;
  }
}
/* ============================================================
   Badge — design-system primitive
   ------------------------------------------------------------
   Inline-flex chip. Tone colors come from semantic tokens
   (--tone-<name>-bg / -fg / -border) so the component itself
   contains no color literals.
   ============================================================ */

.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);

  border: 1px solid transparent;
  border-radius: var(--radius-full);

  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  white-space: nowrap;

  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

/* ---------- Sizes ---------- */
.ui-badge--size-sm {
  padding: 1px var(--space-2);
}

.ui-badge--size-md {
  padding: var(--space-1) var(--space-3);
}

/* ---------- Icon & dot ---------- */
.ui-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.ui-badge__icon > svg {
  width: 1em;
  height: 1em;
  display: block;
}

.ui-badge__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex: 0 0 auto;
}

.ui-badge__label {
  display: inline-block;
}

/* ---------- Tones ---------- */
.ui-badge--tone-cold {
  background-color: var(--tone-cold-bg);
  color: var(--tone-cold-fg);
  border-color: var(--tone-cold-border);
}

.ui-badge--tone-warm {
  background-color: var(--tone-warm-bg);
  color: var(--tone-warm-fg);
  border-color: var(--tone-warm-border);
}

.ui-badge--tone-hot {
  background-color: var(--tone-hot-bg);
  color: var(--tone-hot-fg);
  border-color: var(--tone-hot-border);
}

.ui-badge--tone-deferred {
  background-color: var(--tone-deferred-bg);
  color: var(--tone-deferred-fg);
  border-color: var(--tone-deferred-border);
}

.ui-badge--tone-registered {
  background-color: var(--tone-registered-bg);
  color: var(--tone-registered-fg);
  border-color: var(--tone-registered-border);
}

.ui-badge--tone-neutral {
  background-color: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
  border-color: var(--tone-neutral-border);
}

.ui-badge--tone-primary {
  background-color: var(--tone-primary-bg);
  color: var(--tone-primary-fg);
  border-color: var(--tone-primary-border);
}

.ui-badge--tone-danger {
  background-color: var(--tone-danger-bg);
  color: var(--tone-danger-fg);
  border-color: var(--tone-danger-border);
}

.ui-badge--tone-success {
  background-color: var(--tone-success-bg);
  color: var(--tone-success-fg);
  border-color: var(--tone-success-border);
}

.ui-badge--tone-info {
  background-color: var(--tone-info-bg);
  color: var(--tone-info-fg);
  border-color: var(--tone-info-border);
}
/* ============================================================
   PageHeader — primitive page header
   ------------------------------------------------------------
   Used at the top of any page/route view. Pure layout +
   semantic tokens; no hardcoded colours or sizes. Sticky mode
   pins to the top of its scroll container and elevates a
   shadow once it enters the sticky state.
   ============================================================ */

.page-header {
  width: 100%;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-4) var(--space-6);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

/* Sticky variant — pinned to top with elevation cue */
.page-header--sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------
   Inner layout — flex row, gap = --space-4
   Left cluster: icon + (breadcrumb / title / subtitle)
   Right cluster: actions
   ------------------------------------------------------------ */
.page-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
}

.page-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;            /* allow title to truncate inside flex */
  flex: 1 1 auto;
}

.page-header__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

/* ------------------------------------------------------------
   Icon block — 56px square, rounded, centred content
   ------------------------------------------------------------ */
.page-header__icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  color: var(--text-on-accent);
  font-size: var(--font-size-xl);
  line-height: 1;
}

/* Icon backgrounds — driven by iconBg prop */
.page-header__icon--bg-primary {
  background: var(--tone-primary-bg);
  color: var(--tone-primary-fg);
}
.page-header__icon--bg-neutral {
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}
.page-header__icon--bg-tone-cold {
  background: var(--tone-cold-bg);
  color: var(--tone-cold-fg);
}
.page-header__icon--bg-tone-warm {
  background: var(--tone-warm-bg);
  color: var(--tone-warm-fg);
}
.page-header__icon--bg-tone-hot {
  background: var(--tone-hot-bg);
  color: var(--tone-hot-fg);
}
.page-header__icon--bg-tone-deferred {
  background: var(--tone-deferred-bg);
  color: var(--tone-deferred-fg);
}
.page-header__icon--bg-tone-registered {
  background: var(--tone-registered-bg);
  color: var(--tone-registered-fg);
}
.page-header__icon--bg-tone-neutral {
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}
.page-header__icon--bg-tone-primary {
  background: var(--tone-primary-bg);
  color: var(--tone-primary-fg);
}
.page-header__icon--bg-tone-danger {
  background: var(--tone-danger-bg);
  color: var(--tone-danger-fg);
}
.page-header__icon--bg-tone-success {
  background: var(--tone-success-bg);
  color: var(--tone-success-fg);
}
.page-header__icon--bg-tone-info {
  background: var(--tone-info-bg);
  color: var(--tone-info-fg);
}

/* ------------------------------------------------------------
   Title & subtitle
   ------------------------------------------------------------ */
.page-header__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-header__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
}

/* ------------------------------------------------------------
   Breadcrumb — chevron-separated trail above the title
   ------------------------------------------------------------ */
.page-header__breadcrumb {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: var(--line-height-tight);
}

.page-header__crumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-header__crumb-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.page-header__crumb {
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
a.page-header__crumb:hover,
a.page-header__crumb:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
}
a.page-header__crumb:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

.page-header__crumb--current {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

.page-header__crumb-sep {
  color: var(--text-muted);
  flex: 0 0 auto;
}

/* ------------------------------------------------------------
   Actions cluster — right-aligned slot
   ------------------------------------------------------------ */
.page-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 0 0 auto;
}

/* ------------------------------------------------------------
   Mobile (< 768px) — stack vertically, actions wrap, icon shrinks
   Breakpoint matches --bp-tablet documented in tokens.css.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .page-header {
    padding: var(--space-4);
  }

  .page-header__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .page-header__left {
    width: 100%;
  }

  .page-header__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    font-size: var(--font-size-lg);
  }

  .page-header__actions {
    width: 100%;
    justify-content: flex-start;
  }
}
/* ============================================================
   StatCard — design-system primitive
   ------------------------------------------------------------
   Surface card for one dashboard metric. Layout:
     ┌──────────────────────────────┐
     │ [icon-box]        [delta]    │  top row
     │                              │
     │ 1,234 %                      │  big value (+ optional suffix)
     │ Active students              │  caption
     └──────────────────────────────┘

   Tone colours the icon box tint and the left accent border only;
   the card surface itself stays neutral so multiple cards in a
   row read as a calm grid, not a rainbow.

   Everything is driven by tokens.css — no colour literals.
   ============================================================ */

.ui-statcard {
  /* layout */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);

  /* surface */
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);

  /* spacing */
  padding: var(--space-5);

  /* typography baseline */
  font-family: var(--font-sans);
  color: var(--text-primary);
  text-align: left;
  text-decoration: none;

  /* reset for button/anchor variants */
  width: 100%;
  appearance: none;
  cursor: default;

  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-fast);
}

/* Left accent stripe — coloured by tone, visible on every variant. */
.ui-statcard::before {
  content: '';
  position: absolute;
  top: var(--space-4);
  bottom: var(--space-4);
  left: 0;
  width: 3px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background-color: var(--statcard-accent, var(--tone-neutral-border));
}

/* ----- Top row: icon box + delta pill ----- */
.ui-statcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 40px;
}

.ui-statcard__icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: var(--radius-md);
  background-color: var(--statcard-icon-bg, var(--tone-neutral-bg));
  color: var(--statcard-icon-fg, var(--tone-neutral-fg));
}

.ui-statcard__icon-box > svg {
  width: 20px;
  height: 20px;
  display: block;
}

.ui-statcard__icon-spacer {
  display: inline-block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.ui-statcard__delta {
  display: inline-flex;
  align-items: center;
}

.ui-statcard__delta-arrow {
  margin-right: 2px;
  font-weight: var(--font-weight-bold);
}

/* ----- Value row ----- */
.ui-statcard__value-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: calc(var(--font-size-3xl) * var(--line-height-tight));
}

.ui-statcard__value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.ui-statcard__suffix {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  line-height: var(--line-height-tight);
}

/* ----- Label ----- */
.ui-statcard__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
}

/* ----- Loading shimmer (value slot only) ----- */
@keyframes ui-statcard-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.ui-statcard__skeleton {
  display: inline-block;
  width: 60%;
  max-width: 180px;
  height: calc(var(--font-size-3xl) * var(--line-height-tight));
  border-radius: var(--radius-md);
  background: linear-gradient(
    90deg,
    var(--color-slate-200) 0%,
    var(--color-slate-100) 50%,
    var(--color-slate-200) 100%
  );
  background-size: 200% 100%;
  animation: ui-statcard-shimmer 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ui-statcard__skeleton {
    animation: none;
    background: var(--color-slate-200);
  }
}

/* ----- Tone variants (tint the icon box + accent stripe only) -----
   We pipe tone choices through CSS custom properties so the box and
   the accent stripe always stay in sync. */

.ui-statcard--tone-primary {
  --statcard-icon-bg: var(--tone-deferred-bg);
  --statcard-icon-fg: var(--tone-deferred-fg);
  --statcard-accent:  var(--color-purple-500);
}

.ui-statcard--tone-success {
  --statcard-icon-bg: var(--tone-registered-bg);
  --statcard-icon-fg: var(--tone-registered-fg);
  --statcard-accent:  var(--color-emerald-500);
}

.ui-statcard--tone-warn {
  --statcard-icon-bg: var(--tone-warm-bg);
  --statcard-icon-fg: var(--tone-warm-fg);
  --statcard-accent:  var(--color-amber-500);
}

.ui-statcard--tone-danger {
  --statcard-icon-bg: var(--tone-hot-bg);
  --statcard-icon-fg: var(--tone-hot-fg);
  --statcard-accent:  var(--color-red-500);
}

.ui-statcard--tone-info {
  --statcard-icon-bg: var(--color-blue-50);
  --statcard-icon-fg: var(--color-blue-800);
  --statcard-accent:  var(--color-blue-500);
}

.ui-statcard--tone-neutral {
  --statcard-icon-bg: var(--tone-neutral-bg);
  --statcard-icon-fg: var(--tone-neutral-fg);
  --statcard-accent:  var(--color-slate-400);
}

/* ----- Clickable variant (button / anchor) ----- */
.ui-statcard--clickable {
  cursor: pointer;
}

.ui-statcard--clickable:hover {
  background-color: var(--color-slate-50);
  box-shadow: var(--shadow-md);
}

.ui-statcard--clickable:active {
  transform: translateY(1px);
}

.ui-statcard--clickable:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring), var(--shadow-md);
  border-color: var(--border-focus);
}

/* Anchor reset: kill the default underline that <a> inherits. */
a.ui-statcard,
a.ui-statcard:hover,
a.ui-statcard:focus,
a.ui-statcard:active {
  text-decoration: none;
  color: var(--text-primary);
}

/* Button reset: lose UA chrome so the card looks the same regardless of element. */
button.ui-statcard {
  font: inherit;
  border-style: solid;
  text-align: left;
}
/* ============================================================
   EmptyState — UI primitive
   Centered column for empty / no-results states.
   Tokens: see frontend/src/styles/tokens.css
   ============================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  max-width: 28rem;
  gap: var(--space-3);
  color: var(--text-primary);
}

/* ---- Size variants (outer padding only) ---- */
.empty-state--sm { padding: var(--space-6); }
.empty-state--md { padding: var(--space-10); }
.empty-state--lg { padding: var(--space-16); }

/* ---- Icon: 48px neutral circle ---- */
.empty-state__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-1);
  flex-shrink: 0;
}

/* Normalise any svg / lucide-react icon dropped inside the circle */
.empty-state__icon > svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* ---- Title ---- */
.empty-state__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
}

/* ---- Description ---- */
.empty-state__description {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
  max-width: 65ch; /* "prose"-ish cap so long copy doesn't sprawl */
}

/* ---- Action row ---- */
.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
/*
 * Skeleton.css — the SINGLE shimmer system for the whole app.
 *
 * One @keyframes (shared-shimmer) drives every loading placeholder. Future
 * phases must reuse this animation rather than introducing new keyframes;
 * keeping the pulse in one place guarantees a consistent loading rhythm
 * across the entire product.
 */

/* ---------------------------------------------------------------------------
 * The ONE shimmer keyframe.
 * Pulses background between slate-100 and slate-200 over 1.4s linear infinite.
 * ------------------------------------------------------------------------- */
@keyframes shared-shimmer {
  0% {
    background-color: var(--color-slate-100, #f1f5f9);
  }
  50% {
    background-color: var(--color-slate-200, #e2e8f0);
  }
  100% {
    background-color: var(--color-slate-100, #f1f5f9);
  }
}

/* ---------------------------------------------------------------------------
 * <Skeleton /> — single shimmering block.
 * ------------------------------------------------------------------------- */
.ui-skeleton {
  display: block;
  border-radius: var(--ui-skeleton-radius, 8px);
  background-color: var(--color-slate-100, #f1f5f9);
  background-image: linear-gradient(
    90deg,
    var(--color-slate-100, #f1f5f9) 0%,
    var(--color-slate-200, #e2e8f0) 50%,
    var(--color-slate-100, #f1f5f9) 100%
  );
  animation: shared-shimmer 1.4s linear infinite;
}

/* ---------------------------------------------------------------------------
 * <SkeletonCard /> — padded card matching StatCard footprint.
 *   - 16px padding, 12px gap, 12px radius, white bg, slate-200 border
 *   - optional 40px circular avatar on the left
 *   - body holds N rows with decreasing widths (100%, 80%, 60%)
 * ------------------------------------------------------------------------- */
.ui-skeleton-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--color-slate-200, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
}

.ui-skeleton-card__avatar {
  flex: 0 0 40px;
}

.ui-skeleton-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Respect users with reduced-motion preferences — freeze the shimmer. */
@media (prefers-reduced-motion: reduce) {
  .ui-skeleton {
    animation: none;
    background-image: none;
    background-color: var(--color-slate-100, #f1f5f9);
  }
}
/* DataTable — self-contained styles (no dependency on app-level CSS variables so it
   renders consistently wherever it's dropped in). Tune via the `className` prop. */

.dt {
  width: 100%;
  font-size: 0.875rem;
  color: #1f2937;
}

/* ── Toolbar (search) ───────────────────────────────────────────────────── */
.dt__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.dt__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 220px;
  max-width: 360px;
}

.dt__search-icon {
  position: absolute;
  left: 0.6rem;
  font-size: 0.85rem;
  opacity: 0.55;
  pointer-events: none;
}

.dt__search-input {
  width: 100%;
  padding: 0.5rem 0.65rem 0.5rem 2rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  background: #fff;
}

.dt__search-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.dt__count {
  font-size: 0.8rem;
  color: #6b7280;
  white-space: nowrap;
}

/* ── Table ──────────────────────────────────────────────────────────────── */
.dt__scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

.dt__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.dt__th {
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6b7280;
  background: #f9fafb;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.dt__th--sortable {
  cursor: pointer;
  user-select: none;
}

.dt__th--sortable:hover {
  color: #374151;
}

.dt__th-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.dt__sort {
  font-size: 0.7rem;
  opacity: 0.7;
}

.dt__row {
  border-bottom: 1px solid #f1f3f5;
  transition: background-color 0.12s ease;
}

.dt__row:last-child {
  border-bottom: none;
}

.dt__row--click {
  cursor: pointer;
}

.dt__row--click:hover {
  background: #f9fafb;
}

.dt__td {
  padding: 0.7rem 1rem;
  vertical-align: middle;
  color: #1f2937;
}

.dt--dense .dt__th {
  padding: 0.5rem 0.75rem;
}

.dt--dense .dt__td {
  padding: 0.45rem 0.75rem;
}

/* ── State rows (loading uses real skeletons; these are error/empty) ─────── */
.dt__state {
  padding: 1.25rem 1rem;
  text-align: center;
}

.dt__error {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #b91c1c;
  font-size: 0.85rem;
}

.dt__retry {
  appearance: none;
  border: 1px solid #ef4444;
  background: #fff;
  color: #b91c1c;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.dt__retry:hover {
  background: #fef2f2;
}

/* ── Pager ──────────────────────────────────────────────────────────────── */
.dt__pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.dt__pager-info {
  font-size: 0.8rem;
  color: #6b7280;
}

.dt__pager-btn {
  appearance: none;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.dt__pager-btn:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.dt__pager-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .dt__toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .dt__search {
    max-width: none;
  }
}
/* ============================================================
   FilterTabs — design-system primitive
   ------------------------------------------------------------
   Horizontal row of pill-shaped filter tabs. All values come
   from styles/tokens.css; no hardcoded colours. Tone tokens
   mirror the Badge vocabulary.
   ============================================================ */

.ui-filter-tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  /* Container itself never gets a focus ring — focus lives on the tabs. */
  max-width: 100%;
}

/* ---------- Horizontal scroll (overflow) ---------- */
.ui-filter-tabs--scroll {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;

  /* Hide scrollbar — Firefox */
  scrollbar-width: none;
  /* Hide scrollbar — IE/Edge legacy */
  -ms-overflow-style: none;
  /* Smooth momentum scroll on iOS */
  -webkit-overflow-scrolling: touch;
}

.ui-filter-tabs--scroll::-webkit-scrollbar {
  display: none;
}

/* ============================================================
   Tab button
   ============================================================ */
.ui-filter-tabs__tab {
  /* layout */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;

  /* typography */
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  white-space: nowrap;

  /* shape — pill */
  background-color: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);

  /* interaction */
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    filter var(--transition-fast);
}

.ui-filter-tabs__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ui-filter-tabs__icon > svg {
  width: 1em;
  height: 1em;
  display: block;
}

.ui-filter-tabs__label {
  display: inline-block;
}

/* Inset count badge sits flush to the right of the label. */
.ui-filter-tabs__count {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-1);
}

/* ============================================================
   SIZES
   ============================================================ */
.ui-filter-tabs--size-sm .ui-filter-tabs__tab {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-3);
}

.ui-filter-tabs--size-md .ui-filter-tabs__tab {
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
}

/* ============================================================
   HOVER (inactive only)
   ============================================================ */
.ui-filter-tabs__tab:hover:not(.is-active):not(:disabled) {
  background-color: var(--color-slate-50);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.ui-filter-tabs__tab:active:not(.is-active):not(:disabled) {
  background-color: var(--color-slate-100);
}

/* ============================================================
   ACTIVE — tone-driven background/foreground/border.
   Default falls back to --tone-primary-*; per-option tone
   overrides via the modifier class on the tab element.
   ============================================================ */
.ui-filter-tabs__tab.is-active {
  background-color: var(--tone-primary-bg);
  color: var(--tone-primary-fg);
  border-color: var(--tone-primary-border);
  box-shadow: var(--shadow-xs);
}

.ui-filter-tabs__tab--tone-primary.is-active {
  background-color: var(--tone-primary-bg);
  color: var(--tone-primary-fg);
  border-color: var(--tone-primary-border);
}

.ui-filter-tabs__tab--tone-neutral.is-active {
  background-color: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
  border-color: var(--tone-neutral-border);
}

.ui-filter-tabs__tab--tone-success.is-active {
  background-color: var(--tone-success-bg);
  color: var(--tone-success-fg);
  border-color: var(--tone-success-border);
}

.ui-filter-tabs__tab--tone-danger.is-active {
  background-color: var(--tone-danger-bg);
  color: var(--tone-danger-fg);
  border-color: var(--tone-danger-border);
}

.ui-filter-tabs__tab--tone-info.is-active {
  background-color: var(--tone-info-bg);
  color: var(--tone-info-fg);
  border-color: var(--tone-info-border);
}

.ui-filter-tabs__tab--tone-warm.is-active {
  background-color: var(--tone-warm-bg);
  color: var(--tone-warm-fg);
  border-color: var(--tone-warm-border);
}

.ui-filter-tabs__tab--tone-hot.is-active {
  background-color: var(--tone-hot-bg);
  color: var(--tone-hot-fg);
  border-color: var(--tone-hot-border);
}

.ui-filter-tabs__tab--tone-cold.is-active {
  background-color: var(--tone-cold-bg);
  color: var(--tone-cold-fg);
  border-color: var(--tone-cold-border);
}

.ui-filter-tabs__tab--tone-deferred.is-active {
  background-color: var(--tone-deferred-bg);
  color: var(--tone-deferred-fg);
  border-color: var(--tone-deferred-border);
}

.ui-filter-tabs__tab--tone-registered.is-active {
  background-color: var(--tone-registered-bg);
  color: var(--tone-registered-fg);
  border-color: var(--tone-registered-border);
}

/* ============================================================
   FOCUS — keyboard only (:focus-visible)
   ============================================================ */
.ui-filter-tabs__tab:focus {
  outline: none;
}

.ui-filter-tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

/* ============================================================
   DISABLED
   ============================================================ */
.ui-filter-tabs__tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  filter: none;
  box-shadow: none;
}

/* ============================================================
   Respect users who prefer reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ui-filter-tabs__tab {
    transition: none;
  }
}
/* ============================================================
   Modal primitive — design-system component
   ------------------------------------------------------------
   Portal-rendered dialog with backdrop, focus trap, scroll
   lock and reduced-motion support. All values come from
   styles/tokens.css. No hardcoded hex.
   ============================================================ */

/* ------------------------------------------------------------
   Backdrop — full-viewport overlay that centres the dialog
   ------------------------------------------------------------ */
.ui-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);

  background-color: var(--bg-overlay);

  /* Fade in */
  animation: ui-modal-backdrop-in var(--transition-base) ease-out;
}

@keyframes ui-modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ------------------------------------------------------------
   Dialog box
   ------------------------------------------------------------ */
.ui-modal {
  position: relative;
  z-index: var(--z-modal);

  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 90vh;

  background-color: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);

  outline: none; /* tabIndex=-1 focus is announced via aria, no ring */

  /* Slide-up + fade in */
  animation: ui-modal-in var(--transition-base) ease-out;
}

@keyframes ui-modal-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------
   SIZES — fixed pixel widths up to full (95vw)
   ------------------------------------------------------------ */
.ui-modal--sm   { max-width: 400px; }
.ui-modal--md   { max-width: 560px; }
.ui-modal--lg   { max-width: 720px; }
.ui-modal--xl   { max-width: 960px; }
.ui-modal--full { max-width: 95vw; }

/* ------------------------------------------------------------
   Header — title + description + close X
   ------------------------------------------------------------ */
.ui-modal__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);

  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}

.ui-modal__header-text {
  flex: 1;
  min-width: 0; /* allows the title to truncate inside flex */
}

.ui-modal__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
}

.ui-modal__description {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
}

/* Close X button — square ghost icon */
.ui-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;
  padding: 0;
  flex-shrink: 0;

  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);

  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);

  -webkit-tap-highlight-color: transparent;
}

.ui-modal__close > svg {
  width: 18px;
  height: 18px;
}

.ui-modal__close:hover {
  background-color: var(--color-slate-100);
  color: var(--text-primary);
}

.ui-modal__close:active {
  background-color: var(--color-slate-200);
}

.ui-modal__close:focus {
  outline: none;
}

.ui-modal__close:focus-visible {
  box-shadow: var(--shadow-focus-ring);
}

/* ------------------------------------------------------------
   Body — the scrollable region between header and footer
   ------------------------------------------------------------ */
.ui-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-6);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

/* ------------------------------------------------------------
   Footer — sticky action row, top border separates from body
   ------------------------------------------------------------ */
.ui-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);

  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-default);
  background-color: var(--bg-surface);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   Reduced-motion — strip the entry animation entirely
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ui-modal__backdrop,
  .ui-modal {
    animation: none;
  }
}

/* ------------------------------------------------------------
   Mobile — pull the dialog flush with screen edges on small screens
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .ui-modal__backdrop {
    padding: var(--space-2);
  }
  .ui-modal__header,
  .ui-modal__body,
  .ui-modal__footer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}
/* ============================================================
   Drawer — design-system primitive
   ------------------------------------------------------------
   Side-sliding overlay panel. Mirrors Modal behaviour (portal +
   backdrop + scroll-lock + focus-trap + ESC) but the panel is
   anchored to one edge and slides in. All values come from
   styles/tokens.css; no hardcoded colours.
   ============================================================ */

/* ---------- Backdrop ---------- */
.ui-drawer__backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--bg-overlay);
  z-index: var(--z-drawer);

  /* Backdrop fade-in */
  animation: ui-drawer-backdrop-in var(--transition-slow) both;
}

@keyframes ui-drawer-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   Panel — common
   ============================================================ */
.ui-drawer {
  position: fixed;
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  font-family: var(--font-sans);
  color: var(--text-primary);

  /* The panel itself never gets a visible outline — keyboard
     focus lives on its inner controls. */
  outline: none;

  /* Slide-in motion is set per-side below. */
  animation-duration: var(--transition-slow);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   SIDES — anchoring + slide direction
   ============================================================ */

/* RIGHT */
.ui-drawer--side-right {
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  max-width: 100vw;
  border-left: 1px solid var(--border-default);
  animation-name: ui-drawer-slide-right;
}
@keyframes ui-drawer-slide-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* LEFT */
.ui-drawer--side-left {
  top: 0;
  left: 0;
  bottom: 0;
  height: 100vh;
  max-width: 100vw;
  border-right: 1px solid var(--border-default);
  animation-name: ui-drawer-slide-left;
}
@keyframes ui-drawer-slide-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* BOTTOM */
.ui-drawer--side-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  max-height: 100vh;
  border-top: 1px solid var(--border-default);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  animation-name: ui-drawer-slide-bottom;
}
@keyframes ui-drawer-slide-bottom {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* TOP */
.ui-drawer--side-top {
  left: 0;
  right: 0;
  top: 0;
  width: 100vw;
  max-height: 100vh;
  border-bottom: 1px solid var(--border-default);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
  animation-name: ui-drawer-slide-top;
}
@keyframes ui-drawer-slide-top {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* ============================================================
   SIZES — width for right/left, height for top/bottom
   ============================================================ */

/* Right/Left widths */
.ui-drawer--side-right.ui-drawer--size-sm,
.ui-drawer--side-left.ui-drawer--size-sm   { width: 320px; }
.ui-drawer--side-right.ui-drawer--size-md,
.ui-drawer--side-left.ui-drawer--size-md   { width: 480px; }
.ui-drawer--side-right.ui-drawer--size-lg,
.ui-drawer--side-left.ui-drawer--size-lg   { width: 640px; }
.ui-drawer--side-right.ui-drawer--size-xl,
.ui-drawer--side-left.ui-drawer--size-xl   { width: 800px; }
.ui-drawer--side-right.ui-drawer--size-full,
.ui-drawer--side-left.ui-drawer--size-full { width: 95vw; }

/* Top/Bottom heights */
.ui-drawer--side-top.ui-drawer--size-sm,
.ui-drawer--side-bottom.ui-drawer--size-sm   { height: 240px; }
.ui-drawer--side-top.ui-drawer--size-md,
.ui-drawer--side-bottom.ui-drawer--size-md   { height: 400px; }
.ui-drawer--side-top.ui-drawer--size-lg,
.ui-drawer--side-bottom.ui-drawer--size-lg   { height: 600px; }
.ui-drawer--side-top.ui-drawer--size-xl,
.ui-drawer--side-bottom.ui-drawer--size-xl   { height: 80vh; }
.ui-drawer--side-top.ui-drawer--size-full,
.ui-drawer--side-bottom.ui-drawer--size-full { height: 95vh; }

/* ============================================================
   Header
   ============================================================ */
.ui-drawer__header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-default);
  background-color: var(--bg-surface);
}

.ui-drawer__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.ui-drawer__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
}

.ui-drawer__description {
  margin: var(--space-1) 0 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
}

/* ---------- Close button ---------- */
.ui-drawer__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.ui-drawer__close > svg {
  width: 18px;
  height: 18px;
  display: block;
}

.ui-drawer__close:hover {
  background-color: var(--color-slate-100);
  color: var(--text-primary);
}

.ui-drawer__close:active {
  background-color: var(--color-slate-200);
}

.ui-drawer__close:focus {
  outline: none;
}

.ui-drawer__close:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

/* ============================================================
   Tabs slot — sits between header and body
   ============================================================ */
.ui-drawer__tabs {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--border-default);
  background-color: var(--bg-surface);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ui-drawer__tabs::-webkit-scrollbar {
  display: none;
}

/* ============================================================
   Body — scrollable content area
   ============================================================ */
.ui-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-6);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);

  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Footer — sticky action bar
   ============================================================ */
.ui-drawer__footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-default);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   Mobile — collapse fixed widths so the panel fits the viewport
   ============================================================ */
@media (max-width: 480px) {
  .ui-drawer--side-right,
  .ui-drawer--side-left {
    width: 95vw !important;
  }

  .ui-drawer__header,
  .ui-drawer__tabs,
  .ui-drawer__body,
  .ui-drawer__footer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ============================================================
   Respect users who prefer reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ui-drawer__backdrop,
  .ui-drawer {
    animation: none;
  }
  .ui-drawer__close {
    transition: none;
  }
}
/* ============================================================
   ConfirmDialog — design-system component
   ------------------------------------------------------------
   All values come from styles/tokens.css. No hardcoded hex.
   Rendered inside <Modal size="sm">.
   ============================================================ */

.ui-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4) var(--space-4);
}

/* ------------------------------------------------------------
   Icon — large, top-centered
   ------------------------------------------------------------ */
.ui-confirm__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-info-soft, var(--color-bg-muted, #eef2ff));
  color: var(--color-info, var(--color-primary, #2563eb));
  margin-bottom: var(--space-1);
}

.ui-confirm__icon svg {
  width: 28px;
  height: 28px;
}

.ui-confirm__icon--danger {
  background: var(--color-danger-soft, #fee2e2);
  color: var(--color-danger, #dc2626);
}

/* ------------------------------------------------------------
   Title + description
   ------------------------------------------------------------ */
.ui-confirm__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-tight, 1.25);
  color: var(--color-text-strong, var(--color-text, #111827));
}

.ui-confirm__description {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-normal, 1.5);
  color: var(--color-text-muted, #6b7280);
  max-width: 42ch;
}

/* ------------------------------------------------------------
   Footer — cancel + confirm
   ------------------------------------------------------------ */
.ui-confirm__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
}

.ui-confirm__footer > * {
  min-width: 96px;
}

/* On narrow screens stack the buttons full-width, cancel below confirm
   (confirm stays the primary visual action, cancel remains reachable). */
@media (max-width: 480px) {
  .ui-confirm__footer {
    flex-direction: column-reverse;
    gap: var(--space-2);
  }
  .ui-confirm__footer > * {
    width: 100%;
  }
}
/* ============================================================
   Toast — design-system primitive
   ------------------------------------------------------------
   Single toast card. Rendered inside a fixed bottom-right
   portal by ToastProvider. Tone is communicated via a 4px
   tinted left border + matching icon color. No color literals
   live here — everything routes through tokens.css.
   ============================================================ */

/* ---------- Portal viewport (the stack on screen) ---------- */
.ui-toast-viewport {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--z-toast);

  display: flex;
  flex-direction: column;
  gap: var(--space-2);

  /* Don't intercept clicks on empty area; individual toasts re-enable */
  pointer-events: none;

  /* Keep things sane on narrow viewports */
  max-width: calc(100vw - 48px);
}

/* ---------- Card ---------- */
.ui-toast {
  pointer-events: auto;

  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: flex-start;
  gap: var(--space-3);

  width: 360px;
  max-width: 100%;
  padding: var(--space-3) var(--space-4);

  background-color: var(--surface-elevated, #ffffff);
  color: var(--text-primary, inherit);

  border: 1px solid var(--border-default, var(--tone-neutral-border));
  border-left-width: 4px;
  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-lg);

  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);

  /* Enter animation: slide in from bottom-right */
  animation: ui-toast-enter var(--transition-base) both;
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

/* ---------- Tones (left border + icon color) ---------- */
.ui-toast--info {
  border-left-color: var(--tone-info-bg);
}
.ui-toast--info .ui-toast__icon {
  color: var(--tone-info-bg);
}

.ui-toast--success {
  border-left-color: var(--tone-success-bg);
}
.ui-toast--success .ui-toast__icon {
  color: var(--tone-success-bg);
}

.ui-toast--warn {
  border-left-color: var(--tone-warm-fg);
}
.ui-toast--warn .ui-toast__icon {
  color: var(--tone-warm-fg);
}

.ui-toast--error {
  border-left-color: var(--tone-danger-bg);
}
.ui-toast--error .ui-toast__icon {
  color: var(--tone-danger-bg);
}

/* ---------- Icon column ---------- */
.ui-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 1px;
}

.ui-toast__icon > svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ---------- Text column ---------- */
.ui-toast__body {
  min-width: 0; /* allow text-wrap inside grid */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ui-toast__title {
  font-weight: var(--font-weight-bold);
  color: var(--text-primary, inherit);
  word-wrap: break-word;
}

.ui-toast__desc {
  color: var(--text-secondary, inherit);
  font-size: var(--font-size-sm);
  word-wrap: break-word;
}

.ui-toast__action {
  margin-top: var(--space-2);
  align-self: flex-start;
}

/* ---------- Close button ---------- */
.ui-toast__close {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary, var(--tone-neutral-fg));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ui-toast__close:hover {
  background-color: var(--tone-neutral-bg);
  color: var(--text-primary, inherit);
}

.ui-toast__close:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

.ui-toast__close > svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ---------- Exit state (applied via .is-leaving) ---------- */
.ui-toast.is-leaving {
  animation: ui-toast-leave var(--transition-base) both;
}

/* ---------- Animations ---------- */
@keyframes ui-toast-enter {
  from {
    opacity: 0;
    transform: translate(16px, 16px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes ui-toast-leave {
  from {
    opacity: 1;
    transform: translate(0, 0);
  }
  to {
    opacity: 0;
    transform: translate(0, 16px);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ui-toast,
  .ui-toast.is-leaving {
    animation: none;
  }
}
.eb-root {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 32px 16px;
  width: 100%;
  box-sizing: border-box;
}

.eb-card {
  width: 100%;
  max-width: 480px;
  background: #ffffff;
  border: 1px solid #f1d5d5;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  padding: 28px 24px;
  text-align: center;
  color: #0f172a;
}

.eb-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef2f2;
  color: #dc2626;
}

.eb-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #111827;
}

.eb-subtitle {
  font-size: 14px;
  color: #4b5563;
  margin: 0 0 18px;
  line-height: 1.5;
}

.eb-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 10px;
  background: #2563eb;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.eb-btn:hover {
  background: #1d4ed8;
}

.eb-btn:active {
  transform: translateY(1px);
}

.eb-btn:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.eb-details {
  margin-top: 18px;
  text-align: left;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: #374151;
}

.eb-details summary {
  cursor: pointer;
  font-weight: 600;
  color: #111827;
  user-select: none;
}

.eb-pre {
  margin: 10px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #b91c1c;
  max-height: 240px;
  overflow: auto;
}
/* ════════════════════════════════════════════════════════════════
   SpotlightCard — Inspira / Aceternity UI interactive spotlight card
   Adaptive to CampusOS website theme (light & dark support)
   ════════════════════════════════════════════════════════════════ */

.spotlight-card {
  position: relative;
  border-radius: 20px;
  background: var(--spotlight-bg, #ffffff);
  border: 1.5px solid var(--spotlight-border, #e2e8f0);
  box-shadow: var(--spotlight-shadow, 0 4px 20px -2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02));
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.spotlight-card:hover {
  transform: translateY(-4px);
  border-color: var(--spotlight-hover-border, #93c5fd);
  box-shadow: 0 18px 38px -4px rgba(1, 74, 162, 0.09),
              0 0 0 1px rgba(1, 74, 162, 0.08);
}

/* Cursor ambient spotlight glow */
.spotlight-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.35s ease;
}

/* Cursor border highlight layer */
.spotlight-border-highlight {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  transition: opacity 0.35s ease;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}

/* Card internal content container */
.spotlight-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}

/* Accessible reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .spotlight-card {
    transition: none !important;
    transform: none !important;
  }
  .spotlight-glow,
  .spotlight-border-highlight {
    display: none !important;
  }
}
/* ════════════════════════════════════════════════════════════════
   ShimmerButton — Iridescent metallic light beam CTA button
   ════════════════════════════════════════════════════════════════ */

.shimmer-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  border-radius: var(--shimmer-radius, 14px);
  background: var(--shimmer-bg, linear-gradient(135deg, #f59e0b 0%, #d97706 100%));
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 14px 34px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 8px 24px -4px rgba(245, 158, 11, 0.35),
              0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.shimmer-btn:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 14px 32px -4px rgba(245, 158, 11, 0.5),
              0 0 20px rgba(251, 191, 36, 0.35),
              0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}

.shimmer-btn:active {
  transform: translateY(0) scale(0.99);
}

/* Shimmer beam effect container */
.shimmer-spark-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

.shimmer-spark {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 42%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 58%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: shimmer-sweep var(--shimmer-duration, 2.8s) infinite linear;
}

@keyframes shimmer-sweep {
  0% {
    transform: translateX(-100%) rotate(25deg);
  }
  100% {
    transform: translateX(100%) rotate(25deg);
  }
}

.shimmer-content {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .shimmer-spark {
    animation: none;
    display: none;
  }
  .shimmer-btn {
    transition: none;
  }
}
.pwa-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
  animation: pwaFadeIn 0.25s ease-out;
}

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

.pwa-modal-container {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 30px rgba(26, 45, 74, 0.12);
  border-radius: 20px;
  width: 100%;
  max-width: 580px;
  overflow: hidden;
  color: #0f172a;
  animation: pwaSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Header with Navy Blue Theme */
.pwa-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: linear-gradient(135deg, #1a2d4a 0%, #0f172a 100%);
  border-bottom: 1px solid #1a2d4a;
}

.pwa-modal-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pwa-modal-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.pwa-modal-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.2);
  color: #60a5fa;
  padding: 2px 10px;
  border-radius: 999px;
  margin-bottom: 4px;
  border: 1px solid rgba(96, 165, 250, 0.4);
}

.pwa-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

.pwa-modal-close {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.pwa-modal-close:hover {
  background: rgba(239, 68, 68, 0.8);
  color: #ffffff;
}

.pwa-modal-body {
  padding: 24px;
  background: #ffffff;
}

/* Banner Box with Light Navy/Blue Tint */
.pwa-direct-banner {
  background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 20px;
}

.pwa-banner-text strong {
  display: block;
  font-size: 15px;
  color: #1a2d4a;
  margin-bottom: 4px;
}

.pwa-banner-text p {
  font-size: 13px;
  color: #334155;
  margin: 0 0 14px 0;
  line-height: 1.4;
}

.pwa-banner-actions {
  display: flex;
  gap: 10px;
}

/* Primary Install Button with Navy Blue Theme */
.pwa-btn-primary {
  background: linear-gradient(90deg, #1a2d4a, #2563eb);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(26, 45, 74, 0.25);
  width: 100%;
  justify-content: center;
}

.pwa-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26, 45, 74, 0.4);
  background: linear-gradient(90deg, #0f172a, #1d4ed8);
}

.pwa-btn-shortcut {
  background: linear-gradient(90deg, #059669, #10b981);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.pwa-btn-shortcut:hover {
  background: linear-gradient(90deg, #047857, #059669);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

/* Tab Selector with White & Navy Blue Styling */
.pwa-tab-selector {
  display: flex;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
  margin-bottom: 16px;
}

.pwa-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: #64748b;
  padding: 10px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.pwa-tab-btn:hover {
  color: #1a2d4a;
}

.pwa-tab-btn.active {
  background: #1a2d4a;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(26, 45, 74, 0.25);
}

/* Instructions Card */
.pwa-instructions-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
}

.pwa-steps-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pwa-step-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.pwa-step-num {
  width: 28px;
  height: 28px;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  color: #1a2d4a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.pwa-step-info h5 {
  margin: 0 0 3px 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.pwa-step-info p {
  margin: 0;
  font-size: 12px;
  color: #475569;
  line-height: 1.4;
}

.pwa-step-info strong {
  color: #1a2d4a;
}

.pwa-success-state {
  padding: 40px 24px;
  text-align: center;
  background: #ffffff;
}

.pwa-success-icon {
  font-size: 54px;
  color: #10b981;
  margin-bottom: 14px;
  animation: pwaPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pwaPop {
  0% { transform: scale(0); }
  80% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.pwa-success-state h4 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #0f172a;
}

.pwa-success-state p {
  margin: 0;
  font-size: 14px;
  color: #475569;
}

.pwa-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.pwa-footer-note {
  font-size: 11px;
  color: #64748b;
}

.pwa-btn-secondary {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.pwa-btn-secondary:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.demo-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 120px 16px 40px 16px;
  overflow-y: auto;
  animation: modalFadeIn 0.25s ease-out;
}

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

.demo-modal-card {
  background: #ffffff;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
  border: 1px solid #e2e8f0;
  padding: 24px 28px;
  position: relative;
  margin: 0 auto;
  animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.demo-modal-card::-webkit-scrollbar {
  width: 5px;
}
.demo-modal-card::-webkit-scrollbar-track {
  background: transparent;
}
.demo-modal-card::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 9999px;
}

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

.demo-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #f1f5f9;
  border: none;
  color: #64748b;
  font-size: 16px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  z-index: 10;
}

.demo-modal-close:hover {
  background-color: #e2e8f0;
  color: #0f172a;
}

.demo-modal-header {
  text-align: center;
  margin-bottom: 16px;
  padding-top: 4px;
}

.demo-modal-badge {
  display: inline-block;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #1e40af;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  border: 1px solid #bfdbfe;
}

.demo-modal-header h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
  letter-spacing: -0.4px;
}

.demo-modal-header p {
  font-size: 0.86rem;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

.demo-modal-error {
  background-color: #fff1f2;
  border: 1px solid #fecdd3;
  color: #e11d48;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.82rem;
  margin-bottom: 14px;
  text-align: center;
}

.demo-modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demo-modal-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.demo-modal-group label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
}

.demo-modal-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.demo-modal-input-icon {
  position: absolute;
  left: 12px;
  color: #94a3b8;
  font-size: 13px;
}

.demo-modal-input-wrap input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.9rem;
  background-color: #f8fafc;
  outline: none;
  transition: all 0.2s;
  color: #0f172a;
}

.demo-modal-input-wrap input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  background-color: #ffffff;
}

.demo-modal-submit-btn {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
  margin-top: 4px;
}

.demo-modal-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 12px -1px rgba(37, 99, 235, 0.3);
}

.demo-modal-submit-btn:active {
  transform: translateY(0);
}

.demo-modal-submit-btn:disabled {
  background: #cbd5e1;
  color: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* ── Google Sign-In Button ── */
.demo-google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 12px;
}

.demo-google-btn:hover {
  background-color: #f8fafc;
  border-color: #94a3b8;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07);
}

.demo-google-btn:active {
  background-color: #f1f5f9;
}

.google-icon-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ── Modal Divider ── */
.demo-modal-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 12px;
}

.demo-modal-divider::before,
.demo-modal-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #e2e8f0;
}

.demo-modal-divider span {
  padding: 0 10px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.8px;
}

.opt-tag {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 400;
}
/* ════════════════════════════════════════════════════════════════
   CAMPUSOS ERP — MODERN AUTHENTICATION & LOGIN
   Theme: CampusOS Royal Blue, Midnight Navy & Amber Gold Highlights
   ════════════════════════════════════════════════════════════════ */

:root {
  --brand-blue: #014aa2;
  --brand-blue-hover: #1e40af;
  --brand-blue-glow: #38bdf8;
  --brand-gold: #facd12;
  --midnight-navy: #080c1e;
  --deep-navy: #0f1c3f;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
}

.login-page-wrapper {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  min-height: calc(100vh - 112px);
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(56, 189, 248, 0.22) 0%, transparent 70%),
    linear-gradient(180deg, var(--midnight-navy) 0%, #0c1633 45%, var(--brand-blue) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  overflow: hidden;
  isolation: isolate;
}

.login-bg-glow {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 450px;
  background: radial-gradient(circle, rgba(1, 74, 162, 0.35) 0%, rgba(56, 189, 248, 0.12) 50%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
}

.login-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.85;
  pointer-events: none;
  z-index: -1;
}

/* Matched directly to Navbar max-width (1320px) and padding (28px) */
.login-layout-container {
  width: 100%;
  max-width: 1320px;
  padding: 0 28px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* ── 1. Left Brand Showcase Panel ───────────────────────────────── */
.login-brand-panel {
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.login-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(250, 205, 18, 0.12);
  border: 1px solid rgba(250, 205, 18, 0.35);
  color: var(--brand-gold);
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
  width: fit-content;
  backdrop-filter: blur(8px);
}

.badge-sparkle-icon {
  color: var(--brand-gold);
}

.brand-title {
  font-size: clamp(2.1rem, 3.5vw, 3.1rem);
  font-weight: 850;
  line-height: 1.18;
  margin: 0 0 16px;
  letter-spacing: -0.025em;
  color: #ffffff;
}

.grad-text {
  background: linear-gradient(90deg, #ffffff 0%, #93c5fd 50%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-desc {
  font-size: 1.02rem;
  color: #cbd5e1;
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 520px;
}

.brand-highlights {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
  max-width: 520px;
}

.brand-feat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 18px;
  border-radius: 14px;
  backdrop-filter: blur(6px);
  transition: all 0.2s ease;
}

.brand-feat-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(56, 189, 248, 0.35);
  transform: translateX(4px);
}

.feat-icon-sq {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.18);
  color: var(--brand-blue-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-feat-item strong {
  display: block;
  font-size: 0.94rem;
  font-weight: 750;
  color: #f8fafc;
  margin-bottom: 2px;
}

.brand-feat-item p {
  margin: 0;
  font-size: 0.82rem;
  color: #cbd5e1;
}

.brand-social-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 520px;
}

.avatar-group {
  display: flex;
  align-items: center;
}

.avatar-group .av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--deep-navy);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -8px;
  color: #ffffff;
}

.avatar-group .av:first-child { margin-left: 0; }
.av1 { background: #0284c7; }
.av2 { background: #7c3aed; }
.av3 { background: #059669; }
.av4 {
  background: #facd12;
  color: #080c1e !important;
  font-size: 9.5px;
  font-weight: 800;
  min-width: 34px;
  padding: 0 4px;
  border-radius: 18px;
}

.proof-text strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
}

.proof-text span {
  display: block;
  font-size: 0.8rem;
  color: #94a3b8;
}

/* ── 2. Right Side Structured Auth Card ─────────────────────────── */
.login-card-panel {
  display: flex;
  justify-content: flex-end; /* Perfectly aligned to the right margin of Navbar */
  width: 100%;
}

.login-card {
  background: #ffffff;
  width: 100%;
  max-width: 490px; /* Spacious, elegant form container */
  padding: 34px 38px;
  border-radius: 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4);
  position: relative;
}

.login-card-header {
  text-align: center;
  margin-bottom: 22px;
}

.login-brand-squircle {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-hover) 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  box-shadow: 0 10px 25px -6px rgba(1, 74, 162, 0.45);
  border: 2px solid var(--brand-gold);
}

.brand-cap-icon {
  color: #ffffff;
  position: relative;
  z-index: 2;
}

.portal-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-blue);
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  padding: 3px 12px;
  border-radius: 9999px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 6px #16a34a;
}

.login-card-header h2 {
  font-size: 1.55rem;
  font-weight: 850;
  color: var(--slate-900);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.login-card-header p {
  font-size: 0.9rem;
  color: var(--slate-500);
  margin: 0;
}

/* Banners */
.session-expired-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: 12px;
  padding: 9px 14px;
  margin-bottom: 18px;
  font-size: 0.86rem;
  font-weight: 600;
}

.session-icon {
  color: #d97706;
  flex-shrink: 0;
}

.error-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 18px;
  font-size: 0.86rem;
  font-weight: 600;
}

.error-icon {
  color: #dc2626;
  flex-shrink: 0;
}

/* ── 3. Structured Input Groups (Icon Addon Cell) ────────────────── */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--slate-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.forgot-link {
  font-size: 12px;
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 750;
  transition: color 0.18s ease;
}

.forgot-link:hover {
  color: var(--brand-blue-hover);
  text-decoration: underline;
}

/* The Outer Input Group Container */
.input-group-box {
  display: flex;
  align-items: stretch;
  background: var(--slate-50);
  border: 1.5px solid var(--slate-200);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.input-group-box:focus-within {
  border-color: var(--brand-blue);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(1, 74, 162, 0.12);
}

/* Structured Left Icon Addon Cell */
.input-icon-addon {
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: var(--brand-blue);
  border-right: 1.5px solid var(--slate-200);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.input-group-box:focus-within .input-icon-addon {
  background: #e0f2fe;
  color: var(--brand-blue);
  border-right-color: #bae6fd;
}

/* The Actual Text Input */
.structured-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  color: var(--slate-900);
  outline: none;
  min-width: 0;
}

.structured-input::placeholder {
  color: #94a3b8;
}

/* Action Button on the Right (Show/Hide Password) */
.input-action-addon {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--slate-400);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.18s ease;
  padding: 0;
}

.input-action-addon:hover {
  color: var(--brand-blue);
}

/* Submit Action Button */
.btn-signin-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12.5px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-hover) 100%);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(1, 74, 162, 0.35);
  transition: all 0.2s ease;
  margin-top: 4px;
}

.btn-signin-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(1, 74, 162, 0.45);
}

.btn-signin-primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* Divider */
.login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 16px 0;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--slate-200);
}

.login-divider span {
  padding: 0 12px;
  color: var(--slate-400);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* Structured Demo Action Button */
.btn-demo-trigger {
  width: 100%;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  border: none;
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
  transition: all 0.2s ease;
}

.btn-demo-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.45);
}

.btn-demo-trigger:disabled {
  opacity: 0.75;
  cursor: wait;
}

.demo-icon-badge {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}

.demo-btn-text {
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff;
}

.demo-arrow {
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.btn-demo-trigger:hover .demo-arrow {
  transform: translateX(3px);
  color: #ffffff;
}

/* Footer Links */
.login-card-footer {
  margin-top: 18px;
  text-align: center;
}

.login-card-footer p {
  margin: 0;
  font-size: 13px;
  color: var(--slate-600);
}

.register-link {
  color: var(--brand-blue);
  font-weight: 800;
  text-decoration: none;
}

.register-link:hover {
  text-decoration: underline;
}

/* Security Tag */
.login-security-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--slate-100);
  color: var(--slate-400);
  font-size: 11px;
  font-weight: 650;
}

.sec-icon {
  color: #16a34a;
}

/* ── 4. Full-Screen Account-Terminated Notice ────────────────────── */
.terminated-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: radial-gradient(circle at top, #7f1d1d, #450a0a 60%, #1c0303);
  animation: termFade 0.4s ease;
}

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

.terminated-content {
  max-width: 760px;
  width: 100%;
  animation: termPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes termPop {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.terminated-icon {
  font-size: clamp(64px, 12vw, 120px);
  line-height: 1;
  margin-bottom: 18px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
  animation: termPulse 1.8s ease-in-out infinite;
}

@keyframes termPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.terminated-title {
  font-size: clamp(20px, 3.5vw, 32px);
  font-weight: 900;
  letter-spacing: 6px;
  color: #fca5a5;
  text-transform: uppercase;
  margin: 0 0 22px;
}

.terminated-headline {
  font-size: clamp(28px, 6vw, 58px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0 0 26px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

.terminated-sub {
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 600;
  color: #fecaca;
  margin: 0 0 40px;
  line-height: 1.5;
}

.terminated-sub strong {
  color: #ffffff;
  font-weight: 900;
  border-bottom: 3px solid #f87171;
  padding-bottom: 1px;
}

.terminated-btn {
  background: #ffffff;
  color: #7f1d1d;
  border: none;
  padding: 16px 44px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6);
}

.terminated-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.7);
}

/* ── 5. Responsive Rules ────────────────────────────────────────── */
@media (max-width: 1040px) {
  .login-layout-container {
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 520px;
    padding: 0 20px;
  }
  .login-brand-panel {
    text-align: center;
    align-items: center;
  }
  .brand-desc,
  .brand-highlights,
  .brand-social-proof {
    margin-left: auto;
    margin-right: auto;
  }
  .brand-highlights {
    display: none;
  }
  .brand-social-proof {
    justify-content: center;
  }
  .login-card-panel {
    justify-content: center;
  }
  .login-card {
    padding: 30px 24px;
  }
}

@media (max-width: 480px) {
  .login-page-wrapper {
    padding: 24px 12px;
  }
  .login-card {
    padding: 24px 18px;
    border-radius: 20px;
  }
}/* Skeleton.css — premium content-shaped loading shimmers.
 * Pure CSS animation (no JS), GPU-accelerated transform, ~1KB gzip.
 * Layout sizing matches typical dashboard/list/form pages so the upcoming
 * content slots into the same boxes — no layout shift (CLS) when it arrives.
 *
 * Visual style: subtle slate gradient on light, slightly darker on dark.
 * Prefers-reduced-motion: animation paused for accessibility.
 */

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

.sk-bar {
  display: inline-block;
  background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  vertical-align: middle;
}

.sk-circle { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .sk-bar { animation: none; background: #e2e8f0; }
}

/* ── Stat card row (dashboard summary tiles) ────────────────────────────── */
.sk-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 16px 0 22px;
}

.sk-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.sk-stat-card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* ── Table (admin/student list pages) ───────────────────────────────────── */
.sk-table {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.sk-table__head,
.sk-table__row {
  display: grid;
  grid-template-columns: repeat(var(--sk-cols, 5), 1fr);
  gap: 16px;
  padding: 12px 16px;
  align-items: center;
}

.sk-table__head { background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.sk-table__row  { border-bottom: 1px solid #f1f5f9; }
.sk-table__row:last-child { border-bottom: none; }

/* ── Card grid (course/batch lists) ─────────────────────────────────────── */
.sk-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.sk-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

/* ── Form (create/edit pages) ───────────────────────────────────────────── */
.sk-form {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 16px;
}

.sk-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sk-form__actions { margin-top: 8px; }

/* ── Chart ──────────────────────────────────────────────────────────────── */
.sk-chart {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}

.sk-chart__inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}

/* ── Page layouts ───────────────────────────────────────────────────────── */
.sk-page {
  padding: 20px 24px;
  min-height: 60vh;
}

.sk-page__title { margin-bottom: 14px; }

.sk-page__filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sk-page__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0;
}

@media (max-width: 760px) {
  .sk-page { padding: 14px 12px; }
  .sk-page__row { grid-template-columns: 1fr; }
}

/* ── Compact route fallback (public/auth) ───────────────────────────────── */
.sk-route-fallback {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  margin: 80px auto;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
/* ============================================================================
   AssessmentLab — premium LIGHT theme (indigo/white design system)
   ----------------------------------------------------------------------------
   Co-located stylesheet for frontend/src/pages/student/AssessmentLab.jsx.
   Purely presentational: NO logic relies on these classes. Mirrors the
   .ax-lab* reference aesthetic from assessment-ui/assessment-ui.css but is
   self-contained (lab- prefix) so it never leaks into other pages.

   The code editor + coding terminal stay DARK on purpose (a code surface
   should read as a code surface even in a light app).
   ============================================================================ */

.lab-root {
  /* ---- palette tokens (premium indigo, light theme) ---- */
  --lab-primary:      #4f46e5;
  --lab-primary-2:    #6366f1;
  --lab-primary-dark: #3730a3;
  --lab-primary-soft: #eef0fe;
  --lab-primary-soft2:#f5f6ff;
  --lab-primary-line: #c7d2fe;
  --lab-grad:         linear-gradient(135deg, #4f46e5, #6366f1);

  --lab-text:   #0f172a;
  --lab-text-2: #475569;
  --lab-text-3: #64748b;
  --lab-text-4: #94a3b8;
  --lab-line:   #e6e8f0;
  --lab-surface:#ffffff;

  --lab-ok:    #16a34a;  --lab-ok-bg:#f0fdf4;  --lab-ok-line:#bbf7d0;
  --lab-warn:  #d97706;  --lab-warn-bg:#fffbeb; --lab-warn-line:#fde68a;
  --lab-danger:#dc2626;  --lab-danger-bg:#fef2f2;--lab-danger-line:#fecaca;
  --lab-info:  #2563eb;  --lab-info-bg:#eff6ff; --lab-info-line:#bfdbfe;
  --lab-purple:#7c3aed;

  --lab-sh-card: 0 1px 2px rgba(16,24,40,.04), 0 14px 30px -16px rgba(79,70,229,.18);
  --lab-sh-soft: 0 1px 3px rgba(16,24,40,.06);
  --lab-sh-btn:  0 10px 20px -8px rgba(79,70,229,.55);

  /* ---- the fixed full-screen shell ---- */
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--lab-text);
  background:
    radial-gradient(1100px 480px at 12% -8%, #eef0ff 0%, rgba(238,240,255,0) 60%),
    radial-gradient(900px 560px at 100% 0%, #f3eefe 0%, rgba(243,238,254,0) 55%),
    #f4f5fb;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- loading */
.lab-loading {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lab-text-3);
  font-weight: 600;
  background:
    radial-gradient(1100px 480px at 12% -8%, #eef0ff 0%, rgba(238,240,255,0) 60%),
    #f4f5fb;
}

/* ----------------------------------------------------------------- spinner */
@keyframes lab-spin { to { transform: rotate(360deg); } }
@keyframes lab-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ====================================================== FULLSCREEN GATE === */
.lab-gate {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.lab-gate__card {
  background: #fff;
  border: 1px solid var(--lab-line);
  border-radius: 16px;
  box-shadow: 0 30px 70px -20px rgba(15,23,42,.45);
  padding: 38px 44px;
  max-width: 480px;
}
.lab-gate__icon { font-size: 52px; margin-bottom: 14px; }
.lab-gate__title { font-size: 22px; font-weight: 800; color: var(--lab-text); margin-bottom: 10px; }
.lab-gate__text { font-size: 14px; color: var(--lab-text-3); line-height: 1.6; margin-bottom: 24px; }

/* ============================================================== BUTTONS === */
.lab-btn {
  font-family: inherit;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.lab-btn:active { transform: translateY(1px); }
.lab-btn--primary {
  background: var(--lab-grad);
  color: #fff;
  box-shadow: var(--lab-sh-btn);
  border: none;
}
.lab-btn--primary:hover { box-shadow: 0 14px 26px -8px rgba(79,70,229,.7); }
.lab-btn--lg { padding: 13px 32px; font-size: 15px; font-weight: 800; border-radius: 12px; }

/* ====================================================== TOAST / BANNERS === */
.lab-phone-banner {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(640px, 92vw);
  width: auto;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #ffffff;
  border: 1.5px solid #ef4444;
  border-radius: 12px;
  padding: 12px 20px;
  z-index: 100002;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  pointer-events: auto;
  animation: labPhoneBannerSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1), labPulseRed 1.8s infinite alternate;
}
@keyframes labPhoneBannerSlide {
  from {
    opacity: 0;
    transform: translate(-50%, -12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes labPulseRed {
  0% { box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2); }
  100% { box-shadow: 0 14px 32px -4px rgba(220, 38, 38, 0.75), 0 0 0 3px rgba(239, 68, 68, 0.4); }
}
.lab-phone-banner__icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.lab-phone-banner__text {
  flex: 1;
  line-height: 1.4;
  letter-spacing: 0.2px;
}
.lab-phone-banner__close {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.1s ease;
}
.lab-phone-banner__close:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.08);
}

.lab-voice-toast {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lab-warn-bg);
  border: 1.5px solid var(--lab-warn-line);
  border-radius: 12px;
  padding: 10px 22px;
  z-index: 99998;
  font-size: 13px;
  font-weight: 700;
  color: var(--lab-warn);
  box-shadow: var(--lab-sh-card);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.lab-skip-toast {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lab-info-bg);
  color: var(--lab-info);
  border: 1px solid var(--lab-info-line);
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  z-index: 9999;
  white-space: nowrap;
  box-shadow: var(--lab-sh-card);
}

/* full-width status strips below the top bar */
.lab-strip {
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.lab-strip--offline { background: var(--lab-warn-bg); color: var(--lab-warn); border-bottom: 1px solid var(--lab-warn-line); }
.lab-strip--error   { background: var(--lab-danger-bg); color: var(--lab-danger); border-bottom: 1px solid var(--lab-danger-line); }
.lab-strip--viol    { background: var(--lab-danger-bg); color: var(--lab-danger); border-bottom: 1px solid var(--lab-danger-line); }
.lab-strip--viol-final { background: #fee2e2; color: #b91c1c; border-bottom: 1px solid #fca5a5; }

/* =============================================================== MODALS === */
.lab-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
.lab-modal {
  background: #fff;
  border: 1px solid var(--lab-line);
  border-radius: 16px;
  padding: 32px 40px;
  max-width: 460px;
  text-align: center;
  box-shadow: 0 30px 70px -20px rgba(15,23,42,.5);
}
.lab-modal--wide { max-width: 500px; }
.lab-modal__icon { font-size: 40px; margin-bottom: 12px; }
.lab-modal__title { font-size: 18px; font-weight: 800; color: var(--lab-text); margin-bottom: 8px; }
.lab-modal__text { font-size: 14px; color: var(--lab-text-3); line-height: 1.6; margin-bottom: 24px; }
.lab-modal__text--tight { margin-bottom: 8px; }
.lab-modal__actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }

/* severity accents for warning modals — kept on a LIGHT card */
.lab-modal--warn   { border-color: var(--lab-warn-line); box-shadow: 0 30px 70px -20px rgba(217,119,6,.4); }
.lab-modal--final  { border-color: var(--lab-danger-line); box-shadow: 0 30px 70px -20px rgba(220,38,38,.45); }
.lab-modal--critical { border-color: var(--lab-danger); box-shadow: 0 0 0 4px rgba(220,38,38,.16), 0 30px 70px -20px rgba(220,38,38,.5); }
.lab-modal--warn .lab-modal__title   { color: var(--lab-warn); }
.lab-modal--final .lab-modal__title  { color: var(--lab-danger); }
.lab-modal--critical .lab-modal__title { color: #b91c1c; }
.lab-modal--warn .lab-modal__text,
.lab-modal--final .lab-modal__text,
.lab-modal--critical .lab-modal__text { color: var(--lab-text-2); }

/* modal buttons */
.lab-mbtn {
  border: none;
  border-radius: 10px;
  padding: 11px 28px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
}
.lab-mbtn:active { transform: translateY(1px); }
.lab-mbtn--primary { background: var(--lab-grad); color: #fff; box-shadow: var(--lab-sh-btn); }
.lab-mbtn--primary:hover { box-shadow: 0 14px 26px -8px rgba(79,70,229,.7); }
.lab-mbtn--ghost { background: #fff; color: var(--lab-text-2); border: 1px solid var(--lab-line); box-shadow: var(--lab-sh-soft); }
.lab-mbtn--ghost:hover { border-color: var(--lab-primary-line); color: var(--lab-primary-dark); }
.lab-mbtn--danger { background: var(--lab-danger); color: #fff; }
.lab-mbtn--danger:hover { background: #b91c1c; }
.lab-mbtn--warn { background: var(--lab-warn); color: #fff; }
.lab-mbtn--warn:hover { background: #b45309; }
.lab-mbtn--crit { background: #b91c1c; color: #fff; }
.lab-mbtn--crit:hover { background: #991b1b; }

.lab-submit-note {
  background: var(--lab-warn-bg);
  border: 1px solid var(--lab-warn-line);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--lab-warn);
  line-height: 1.5;
  text-align: left;
}
.lab-strong-ok { color: var(--lab-ok); font-weight: 800; }
.lab-strong-ink { color: var(--lab-text); font-weight: 800; }

/* =============================================================== TOP BAR === */
.lab-top {
  background: #fff;
  border-bottom: 1px solid var(--lab-line);
  box-shadow: 0 2px 12px rgba(16,24,40,.05);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
  gap: 16px;
}
.lab-top__title { font-weight: 800; font-size: 16px; color: var(--lab-text); }
.lab-top__sub { font-size: 12px; color: var(--lab-text-3); margin-top: 2px; }
.lab-top__right { display: flex; align-items: center; gap: 18px; }

/* timer pill */
.lab-timer { text-align: center; }
.lab-timer__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 7px 16px;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  background: var(--lab-primary-soft);
  color: var(--lab-primary-dark);
  border: 1px solid var(--lab-primary-line);
}
.lab-timer__pill--warn { background: var(--lab-warn-bg); color: var(--lab-warn); border-color: var(--lab-warn-line); }
.lab-timer__pill--danger { background: var(--lab-danger-bg); color: var(--lab-danger); border-color: var(--lab-danger-line); animation: lab-pulse 1.3s ease-in-out infinite; }
.lab-timer__label { font-size: 11px; color: var(--lab-text-3); margin-top: 3px; font-weight: 600; }

/* answered indicator */
.lab-answered { text-align: center; }
.lab-answered__count { font-size: 16px; font-weight: 800; color: var(--lab-text-2); }
.lab-answered__label { font-size: 11px; color: var(--lab-text-3); transition: color .3s; font-weight: 600; }
.lab-answered__label--saved { color: var(--lab-ok); }

/* submit button (top) */
.lab-submit-btn {
  background: var(--lab-grad);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 20px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  box-shadow: var(--lab-sh-btn);
  transition: box-shadow .2s ease, opacity .2s ease, transform .12s ease;
}
.lab-submit-btn:hover { box-shadow: 0 14px 26px -8px rgba(79,70,229,.7); }
.lab-submit-btn:active { transform: translateY(1px); }
.lab-submit-btn--disabled {
  background: #e2e8f0;
  color: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
}

/* ================================================================== BODY === */
.lab-body { display: flex; flex: 1; overflow: hidden; }

/* ----------------------------------------------------------- LEFT sidebar */
.lab-side {
  width: 224px;
  background: #fff;
  border-right: 1px solid var(--lab-line);
  padding: 18px 16px;
  overflow-y: auto;
  flex-shrink: 0;
}
.lab-side__title {
  font-size: 11px;
  font-weight: 800;
  color: var(--lab-text-4);
  margin-bottom: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.lab-progress {
  height: 6px;
  border-radius: 999px;
  background: #eef1f6;
  margin-bottom: 14px;
  overflow: hidden;
}
.lab-progress__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #16a34a, #22c55e);
  transition: width .4s ease;
}
.lab-nav__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lab-nav__cell {
  aspect-ratio: 1;
  border-radius: 9px;
  border: 1.5px solid var(--lab-line);
  background: #fff;
  font-weight: 800;
  font-size: 13px;
  color: var(--lab-text-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  transition: all .12s ease;
  font-family: inherit;
}
.lab-nav__cell:hover { border-color: var(--lab-primary-line); }
.lab-nav__cell.is-answered { background: var(--lab-ok-bg); border-color: var(--lab-ok-line); color: var(--lab-ok); }
.lab-nav__cell.is-flagged { background: var(--lab-warn-bg); border-color: var(--lab-warn-line); color: var(--lab-warn); }
.lab-nav__cell.is-current { border-color: var(--lab-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.18); color: var(--lab-primary-dark); }
.lab-flag-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 9px;
  line-height: 1;
}
.lab-legend { margin-top: 16px; font-size: 11px; color: var(--lab-text-3); }
.lab-legend__row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-weight: 600; }
.lab-legend__row:last-child { margin-bottom: 0; }
.lab-legend__swatch { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; border: 1.5px solid var(--lab-line); }
.lab-legend__swatch--ok { background: var(--lab-ok-bg); border-color: var(--lab-ok-line); }
.lab-legend__swatch--flag { background: var(--lab-warn-bg); border-color: var(--lab-warn-line); }
.lab-legend__swatch--none { background: #fff; }

/* ------------------------------------------------------------ MAIN column */
.lab-main-col { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.lab-main { flex: 1; overflow: auto; padding: 26px 32px 16px; }
.lab-qcard { max-width: 860px; margin: 0 auto; }

/* question header row */
.lab-qhead { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.lab-qcount {
  background: #f1f5f9;
  color: var(--lab-text-2);
  border-radius: 8px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 700;
}
.lab-badge {
  color: #fff;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
}
.lab-badge--type { background: var(--lab-grad); }
.lab-badge--coding { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.lab-badge--easy { background: var(--lab-ok); }
.lab-badge--medium { background: var(--lab-warn); }
.lab-badge--hard { background: var(--lab-danger); }
.lab-marks {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--lab-primary-soft);
  color: var(--lab-primary-dark);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 800;
}
.lab-flag-btn {
  margin-left: auto;
  background: #fff;
  border: 1px solid var(--lab-line);
  color: var(--lab-text-3);
  border-radius: 9px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--lab-sh-soft);
  transition: all .15s ease;
}
.lab-flag-btn:hover { border-color: var(--lab-primary-line); color: var(--lab-primary-dark); }
.lab-flag-btn.is-on {
  background: var(--lab-warn-bg);
  border-color: var(--lab-warn-line);
  color: var(--lab-warn);
}

.lab-qtext {
  font-size: 18px;
  font-weight: 700;
  color: var(--lab-text);
  margin-bottom: 24px;
  line-height: 1.55;
}

/* ---------------------------------------------------------------- MCQ opts */
.lab-opts { display: flex; flex-direction: column; gap: 11px; }
.lab-opt {
  text-align: left;
  width: 100%;
  padding: 15px 18px;
  border-radius: 12px;
  border: 2px solid var(--lab-line);
  background: #fff;
  color: var(--lab-text);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: inherit;
  transition: all .14s ease;
}
.lab-opt:hover { border-color: var(--lab-primary-line); background: var(--lab-primary-soft2); }
.lab-opt.is-selected { border-color: var(--lab-primary); background: var(--lab-primary-soft); }
.lab-opt__key {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  background: #f1f5f9;
  color: var(--lab-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  transition: all .14s ease;
}
.lab-opt.is-selected .lab-opt__key { background: var(--lab-grad); color: #fff; }
.lab-opt__saved { font-size: 12px; color: var(--lab-ok); font-weight: 700; margin-top: 4px; }

/* ------------------------------------------------- coding info call-outs */
.lab-info-box {
  background: #fff;
  border: 1px solid var(--lab-line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  box-shadow: var(--lab-sh-soft);
}
.lab-info-box--bug { background: var(--lab-warn-bg); border-color: var(--lab-warn-line); }
.lab-info-box__title { font-size: 12px; font-weight: 800; margin-bottom: 4px; }
.lab-info-box__title--bug { color: var(--lab-warn); }
.lab-info-box__title--constraints { color: var(--lab-primary-dark); }
.lab-info-box__text { font-size: 13px; color: var(--lab-text-2); line-height: 1.5; }
.lab-info-box--bug .lab-info-box__text { color: #92400e; }

/* web preview split (HTML/CSS) */
.lab-webgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lab-web__label {
  font-size: 11px;
  color: var(--lab-text-4);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.lab-web__frame {
  width: 100%;
  height: 400px;
  border: 1px solid var(--lab-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--lab-sh-soft);
}

/* --------------------------------------------------------------- FOOTER nav */
.lab-foot {
  border-top: 1px solid var(--lab-line);
  background: #fff;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.lab-foot__pos { font-size: 12px; color: var(--lab-text-3); font-weight: 600; }
.lab-nav-btn {
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
.lab-nav-btn--prev {
  background: #fff;
  border: 1px solid var(--lab-line);
  color: var(--lab-text-2);
  box-shadow: var(--lab-sh-soft);
}
.lab-nav-btn--prev:hover { border-color: var(--lab-primary-line); color: var(--lab-primary-dark); }
.lab-nav-btn--next {
  background: var(--lab-grad);
  color: #fff;
  border: none;
  box-shadow: var(--lab-sh-btn);
}
.lab-nav-btn--next:hover { box-shadow: 0 14px 26px -8px rgba(79,70,229,.7); }
.lab-nav-btn:disabled {
  background: #f1f5f9;
  border: 1px solid var(--lab-line);
  color: #cbd5e1;
  box-shadow: none;
  cursor: not-allowed;
}

/* ============================================================ DARK TERMINAL */
/* Code surfaces stay dark on purpose. Lightly refined borders/tabs/buttons. */
.lab-term {
  margin-top: 12px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #1e293b;
  background: #0d1117;
  box-shadow: 0 10px 30px -16px rgba(15,23,42,.6);
  font-family: 'Cascadia Code','Fira Code',Consolas,'Courier New',monospace;
}
.lab-term__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  background: #161b22;
  border-bottom: 1px solid #21262d;
}
.lab-term__head-left { display: flex; align-items: center; gap: 10px; }
.lab-term__lights { display: flex; gap: 5px; }
.lab-term__light { width: 11px; height: 11px; border-radius: 50%; }
.lab-term__name { color: #8b949e; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.lab-term__lang {
  background: #21262d;
  color: #58a6ff;
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}
.lab-term__waiting { color: #f0883e; font-size: 11px; font-weight: 700; }
.lab-term__head-right { display: flex; gap: 6px; align-items: center; }
.lab-term__btn {
  background: none;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #8b949e;
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  font-family: inherit;
}
.lab-term__btn:hover { border-color: #484f58; color: #c9d1d9; }
.lab-term__run {
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .2s;
  font-family: inherit;
  background: #238636;
  color: #fff;
  cursor: pointer;
}
.lab-term__run:hover { background: #2ea043; }
.lab-term__run--running {
  background: #1f2937;
  color: #6b7280;
  cursor: not-allowed;
}
.lab-term__spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #4b5563;
  border-top-color: #9ca3af;
  border-radius: 50%;
  animation: lab-spin .8s linear infinite;
}
.lab-term__run-stack { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.lab-term__run-hint { font-size: 9px; opacity: .65; font-weight: 500; }
.lab-term__surface {
  min-height: 160px;
  max-height: 340px;
  overflow-y: auto;
  padding: 10px 16px;
  background: #0d1117;
  font-size: 13px;
  line-height: 1.65;
  cursor: text;
}
.lab-term__placeholder { color: #3d4450; font-style: italic; font-size: 12px; }
.lab-term__running-note { color: #8b949e; font-size: 12px; margin-top: 4px; }
.lab-term__running-note span { color: #f0883e; }
.lab-term__prompt-row { display: flex; align-items: flex-start; gap: 8px; }
.lab-term__caret {
  font-weight: 700;
  user-select: none;
  line-height: 1.65;
  flex-shrink: 0;
  color: #3fb950;
}
.lab-term__caret--waiting { color: #f0883e; }
.lab-term__input {
  flex: 1;
  box-sizing: border-box;
  background: transparent;
  color: #e6edf3;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  font-family: 'Cascadia Code','Fira Code',Consolas,'Courier New',monospace;
  font-size: 13px;
  line-height: 1.65;
  resize: none;
  overflow: hidden;
}

/* ── Interactive (LIVE) xterm.js terminal ───────────────────────────────────
   CRITICAL: index.css applies a global `html { zoom: 0.9 }` on desktop. CSS zoom
   breaks xterm's per-character cell measurement → spurious gaps INSIDE words
   ("py thon mai n.py"). Neutralise the zoom on the xterm subtree ONLY, and only
   where the parent zoom is actually applied (same media query as index.css), so
   the terminal renders at net 1.0 and stays pixel-accurate. 1 / 0.9 = 1.1111. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .lab-term__xterm { zoom: 1.1111111111; }
}
.lab-term__xterm { width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; }
.lab-term__xterm .xterm,
.lab-term__xterm .xterm-viewport,
.lab-term__xterm .xterm-screen { width: 100% !important; }
.lab-term__xterm .xterm-viewport { overflow-y: auto !important; }
/* Defend against any global text-spacing/ligature rule leaking into the grid */
.lab-term__xterm .xterm-rows,
.lab-term__xterm .xterm-rows span,
.lab-term__xterm textarea {
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  font-variant-ligatures: none !important;
}

/* ----------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .lab-side { display: none; }
  .lab-webgrid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .lab-main { padding: 18px 14px; }
  .lab-top { gap: 10px; }
  .lab-top__right { gap: 10px; }
}

/* ========================================================== SQL WORKBENCH */
.sql-wb {
  display: flex;
  flex-direction: column;
  background: #1e1e1e;
  border: 1.5px solid #2d2d2d;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Toolbar styles */
.sql-wb-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #252526;
  border-bottom: 1.5px solid #2d2d2d;
  flex-shrink: 0;
}

.sql-wb-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #cccccc;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 150ms ease;
}

.sql-wb-btn:hover {
  background: #37373d;
  color: #ffffff;
  border-color: #444444;
}

.sql-wb-btn.is-active {
  background: #007acc;
  color: #ffffff;
}

.sql-wb-btn--execute {
  color: #4af626 !important;
}
.sql-wb-btn--execute:hover {
  background: rgba(35, 134, 54, 0.2);
  border-color: #238636;
}

.sql-wb-btn--execute-current {
  color: #ffaa44 !important;
}
.sql-wb-btn--execute-current:hover {
  background: rgba(240, 136, 62, 0.2);
  border-color: #f0883e;
}

.sql-wb-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent !important;
  border-color: transparent !important;
}

.sql-wb-divider {
  width: 1px;
  height: 18px;
  background: #3c3c3c;
  margin: 0 4px;
}

.sql-wb-spacer {
  flex-grow: 1;
}

.sql-wb-schema-selector {
  display: flex;
  align-items: center;
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  padding: 3px 8px;
}

/* Workspace layout (Sidebar + main editor wrapper) */
.sql-wb-workspace {
  display: flex;
  height: 480px; /* fixed height for sql workbench panel */
  background: #1e1e1e;
}

/* Sidebar Styles */
.sql-wb-sidebar {
  width: 210px;
  border-right: 1.5px solid #2d2d2d;
  background: #252526;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sql-wb-sidebar-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: #858585;
  border-bottom: 1px solid #2d2d2d;
  letter-spacing: 0.5px;
}

.sql-wb-sidebar-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 8px;
}

/* Schema tree styling */
.sql-tree-db {
  display: flex;
  align-items: center;
  padding: 4px 6px;
  font-weight: 700;
  font-size: 12px;
  color: #e1e1e1;
}

.sql-tree-tables {
  padding-left: 14px;
  margin-top: 2px;
}

.sql-tree-table-item {
  margin-bottom: 2px;
}

.sql-tree-table-header {
  display: flex;
  align-items: center;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 100ms;
}

.sql-tree-table-header:hover {
  background: #2a2d2e;
}

.sql-tree-expand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  color: #858585;
  margin-right: 2px;
}

.sql-tree-table-name {
  font-size: 11.5px;
  color: #cccccc;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sql-tree-table-columns {
  padding-left: 20px;
  margin-top: 1px;
}

.sql-tree-column-item {
  display: flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10.5px;
  color: #aaaaaa;
  font-family: var(--lab-font-mono, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.sql-tree-column-item:hover {
  background: #2a2d2e;
  color: #ffffff;
}

.sql-tree-column-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Main workspace area styling */
.sql-wb-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sql-wb-editor {
  flex-shrink: 0;
  padding: 8px;
  background: #1e1e1e;
}

/* Tabs output area */
.sql-wb-output-panel {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border-top: 1.5px solid #2d2d2d;
  background: #1e1e1e;
  min-height: 0;
}

.sql-wb-tabs {
  display: flex;
  background: #252526;
  border-bottom: 1px solid #2d2d2d;
  flex-shrink: 0;
}

.sql-wb-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-right: 1px solid #2d2d2d;
  color: #969696;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 120ms ease;
}

.sql-wb-tab:hover {
  background: #2d2d2d;
  color: #e1e1e1;
}

.sql-wb-tab.is-active {
  background: #1e1e1e;
  color: #ffffff;
  border-bottom: 2px solid #007acc;
  font-weight: 700;
}

.sql-wb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #007acc;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 5px;
  margin-left: 6px;
  min-width: 12px;
}

/* Tab contents container */
.sql-wb-tab-content {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}

/* Grid Wrapper & Table */
.sql-wb-grid-wrapper {
  height: 100%;
  overflow: auto;
  padding: 8px;
  background: #1e1e1e;
}

.sql-wb-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--lab-font-mono, monospace);
  font-size: 12px;
  background: #1e1e1e;
}

.sql-wb-grid-table th {
  position: sticky;
  top: 0;
  background: #252526;
  color: #c5c5c5;
  font-weight: 600;
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1.5px solid #2d2d2d;
  border-right: 1px solid #2d2d2d;
  white-space: nowrap;
}

.sql-wb-grid-table td {
  padding: 5px 10px;
  color: #e1e1e1;
  border-bottom: 1px solid #2d2d2d;
  border-right: 1px solid #2d2d2d;
  white-space: pre;
}

.sql-wb-grid-table tr:nth-child(even) {
  background: #252526;
}

.sql-wb-grid-table tr:hover {
  background: #2a2d2e;
}

/* Console tab wrapper */
.sql-wb-console-wrapper {
  height: 100%;
  overflow: auto;
}

/* Action History Log tab */
.sql-wb-action-log-wrapper {
  height: 100%;
  overflow: auto;
  padding: 8px;
}

.sql-wb-action-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  color: #cccccc;
}

.sql-wb-action-log-table th {
  position: sticky;
  top: 0;
  background: #252526;
  color: #858585;
  font-weight: 600;
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1.5px solid #2d2d2d;
}

.sql-wb-action-log-table td {
  padding: 4px 8px;
  border-bottom: 1px solid #2d2d2d;
  white-space: nowrap;
  vertical-align: middle;
}

.sql-wb-action-log-table tr:hover {
  background: #2a2d2e;
}

.sql-wb-action-log-text {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--lab-font-mono, monospace);
  color: #9cdcfe;
}

/* Empty output state styling */
.sql-wb-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6b7280;
  font-size: 12px;
  font-style: italic;
  padding: 24px;
  text-align: center;
}

/* Language selector dropdown in coding editor header */
.lab-lang-selector {
  background: #0f172a;
  color: #38bdf8;
  border: 1px solid #0284c7;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lab-lang-selector:hover {
  background: #1e293b;
  border-color: #38bdf8;
}

.lab-lang-selector:focus {
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35);
}

.lab-lang-selector option {
  background: #0f172a;
  color: #f1f5f9;
  padding: 4px;
}


/* ════════════════════════════════════════════════════════════════
   CAMPUSOS ERP — MODERN AI ASSISTANT CHAT WIDGET
   Theme: CampusOS Royal Blue, Midnight Navy & Amber Gold Highlights
   ════════════════════════════════════════════════════════════════ */

:root {
    --brand-blue: #014aa2;
    --brand-blue-hover: #1e40af;
    --brand-blue-glow: #38bdf8;
    --brand-gold: #facd12;
    --midnight-navy: #080c1e;
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-100: #f1f5f9;
    --slate-50: #f8fafc;
}

.etms-chat-wrapper {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 12000;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── 1. Floating Trigger & Status Pill ──────────────────────────── */
.chat-badge-pill {
    position: absolute;
    bottom: 70px;
    right: 0;
    background: rgba(8, 12, 30, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 7px 16px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(56, 189, 248, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    animation: pillFloat 3s ease-in-out infinite;
    transition: transform 0.2s ease;
}

.chat-badge-pill:hover {
    transform: translateY(-2px);
}

@keyframes pillFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.live-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px #22c55e;
    animation: livePulse 1.8s infinite;
}

@keyframes livePulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Floating Trigger Button */
.chat-toggle-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-hover) 100%);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(1, 74, 162, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.chat-toggle-btn:hover {
    transform: scale(1.06) translateY(-2px);
    box-shadow: 0 14px 34px rgba(1, 74, 162, 0.55);
}

.chat-toggle-btn.active {
    background: var(--midnight-navy);
    border-color: var(--brand-blue-glow);
    box-shadow: 0 10px 28px rgba(8, 12, 30, 0.5);
    transform: rotate(90deg);
}

.toggle-chat-icon {
    color: #ffffff;
}

.toggle-close-icon {
    color: #ffffff;
}

.notification-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    background: #ef4444;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

/* ── 2. Chat Window Container ───────────────────────────────────── */
.chat-window {
    position: absolute;
    bottom: 76px;
    right: 0;
    width: 390px;
    height: 610px;
    max-height: 84vh;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 25px 60px -10px rgba(1, 74, 162, 0.28), 0 0 0 1px rgba(226, 232, 240, 0.9);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(24px) scale(0.96);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-window.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}

/* ── 3. Modern Header ───────────────────────────────────────────── */
.chat-header {
    background: linear-gradient(135deg, #080c1e 0%, #0f1c3f 55%, #014aa2 100%);
    border-bottom: 2.5px solid var(--brand-gold);
    color: #ffffff;
    padding: 20px 20px 32px;
    position: relative;
    flex-shrink: 0;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.back-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

.header-info-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.header-avatar-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue-glow);
    position: relative;
    flex-shrink: 0;
}

.avatar-online-ping {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #080c1e;
}

.header-text-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.header-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-title-row h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-version-tag {
    font-size: 10px;
    font-weight: 800;
    background: rgba(56, 189, 248, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    padding: 1px 6px;
    border-radius: 9999px;
    letter-spacing: 0.02em;
}

.header-text-block p {
    margin: 2px 0 0;
    font-size: 12px;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.header-close-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* ── 4. Chat Body ───────────────────────────────────────────────── */
.chat-body {
    flex: 1;
    padding: 0 16px;
    margin-top: -18px;
    overflow-y: auto;
    position: relative;
    z-index: 10;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.chat-body::-webkit-scrollbar {
    width: 5px;
}

.chat-body::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 9999px;
}

/* ── 5. Home View Cards ─────────────────────────────────────────── */
.chat-home-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
}

.new-convo-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 25px rgba(1, 74, 162, 0.08);
    border: 1.5px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.new-convo-card:hover {
    border-color: var(--brand-blue-glow);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(1, 74, 162, 0.14);
}

.card-convo-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-icon-squircle {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #e0f2fe;
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 750;
    color: var(--slate-900);
}

.card-text p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--slate-500);
    line-height: 1.35;
}

.card-arrow-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eff6ff;
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.new-convo-card:hover .card-arrow-btn {
    background: var(--brand-blue);
    color: #ffffff;
    transform: translateX(2px);
}

/* Suggested Question Starter Pills */
.starter-questions-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-micro-label {
    font-size: 11px;
    font-weight: 750;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.starter-pills-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.starter-question-pill {
    background: var(--slate-50);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--slate-800);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: left;
}

.starter-question-pill:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: var(--brand-blue);
    transform: translateX(3px);
}

.pill-arrow {
    opacity: 0.4;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.starter-question-pill:hover .pill-arrow {
    opacity: 1;
}

/* Active Session Card */
.recent-activity-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.activity-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.live-status-chip {
    font-size: 10px;
    font-weight: 800;
    background: #dcfce7;
    color: #15803d;
    padding: 2px 7px;
    border-radius: 9999px;
    text-transform: uppercase;
}

.recent-chat-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--slate-50);
    transition: background 0.2s ease;
}

.recent-chat-preview:hover {
    background: #eff6ff;
}

.preview-bot-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e0f2fe;
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.preview-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-blue);
}

.preview-info p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--slate-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 6. Form Container ──────────────────────────────────────────── */
.chat-form-container {
    background: #ffffff;
    padding: 20px;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    border: 1.5px solid #e2e8f0;
}

.form-intro h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--slate-900);
}

.form-intro p {
    margin: 4px 0 16px;
    font-size: 12.5px;
    color: var(--slate-500);
}

.tawk-form-group {
    margin-bottom: 14px;
}

.tawk-form-group label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--slate-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.tawk-form-group input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.tawk-form-group input:focus {
    border-color: var(--brand-blue);
}

.tawk-start-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-hover) 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-weight: 750;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(1, 74, 162, 0.25);
    transition: all 0.2s ease;
}

.tawk-start-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(1, 74, 162, 0.4);
}

/* ── 7. Messages Thread ─────────────────────────────────────────── */
.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
}

.message-bubble {
    max-width: 82%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 13.5px;
    line-height: 1.55;
}

.message-bubble.bot {
    background: var(--slate-100);
    color: var(--slate-900);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    border: 1px solid #e2e8f0;
}

.message-bubble.bot p {
    margin: 0 0 6px 0;
}

.message-bubble.bot p:last-child {
    margin-bottom: 0;
}

.message-bubble.user {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-hover) 100%);
    color: #ffffff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 12px rgba(1, 74, 162, 0.22);
}

.message-bubble.user p {
    margin: 0;
}

.handoff-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    width: 100%;
}

.wa-btn, .call-btn {
    flex: 1;
    text-decoration: none !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    padding: 8px 10px !important;
    border-radius: 9999px !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.2s ease;
}

.wa-btn {
    background: #16a34a !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}

.call-btn {
    background: var(--brand-blue) !important;
    box-shadow: 0 4px 12px rgba(1, 74, 162, 0.25);
}

.wa-btn:hover, .call-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

/* Typing Indicator */
.typing-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
}

.typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    animation: typingBounce 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* ── 8. Voice Status Indicator ──────────────────────────────────── */
.voice-status-bar {
    margin-top: 8px;
    min-height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.voice-listening-indicator,
.voice-speaking-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    padding: 5px 12px;
    border-radius: 9999px;
    backdrop-filter: blur(6px);
}

.voice-status-text {
    font-size: 11.5px;
    font-weight: 600;
    color: #ffffff;
}

.voice-wave {
    display: flex;
    align-items: center;
    gap: 3px;
}

.voice-wave span {
    width: 3px;
    height: 12px;
    background: #38bdf8;
    border-radius: 3px;
    animation: waveAnim 0.8s infinite ease-in-out alternate;
}

.voice-wave span:nth-child(2) { animation-delay: 0.15s; height: 16px; }
.voice-wave span:nth-child(3) { animation-delay: 0.3s; height: 10px; }
.voice-wave span:nth-child(4) { animation-delay: 0.45s; height: 14px; }
.voice-wave span:nth-child(5) { animation-delay: 0.6s; height: 8px; }

@keyframes waveAnim {
    from { transform: scaleY(0.4); }
    to { transform: scaleY(1); }
}

.stop-speak-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #ffffff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ── 9. Chat Input Area ─────────────────────────────────────────── */
.chat-input-wrapper {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.voice-error {
    font-size: 11.5px;
    color: #dc2626;
    text-align: center;
    padding: 5px 14px;
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
}

.chat-input-area {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-input-area input {
    flex: 1;
    border: 1.5px solid #e2e8f0;
    padding: 9px 14px;
    border-radius: 9999px;
    outline: none;
    font-size: 13.5px;
    background: var(--slate-50);
    transition: border-color 0.2s ease;
}

.chat-input-area input:focus {
    border-color: var(--brand-blue);
    background: #ffffff;
}

.voice-toggle-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #eff6ff;
    color: var(--brand-blue);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.voice-toggle-btn.disabled {
    background: var(--slate-100);
    color: var(--slate-500);
}

.mic-btn {
    background: var(--slate-100);
    color: var(--slate-600);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.mic-btn:hover {
    background: #e0f2fe;
    color: var(--brand-blue);
}

.mic-btn.listening {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    animation: micPulse 1.2s infinite;
}

@keyframes micPulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.send-btn {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-hover) 100%);
    color: #ffffff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(1, 74, 162, 0.3);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.send-btn:hover {
    transform: scale(1.05);
}

.send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* ── 10. Bottom Navigation Bar ──────────────────────────────────── */
.chat-footer-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.nav-item {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--slate-500);
    cursor: pointer;
    min-width: 80px;
    transition: all 0.2s ease;
    padding: 4px 12px;
    border-radius: 12px;
}

.nav-item span {
    font-size: 11.5px;
    font-weight: 650;
}

.nav-item.active {
    color: var(--brand-blue);
    font-weight: 750;
}

.nav-item:hover {
    color: var(--brand-blue);
    background: #eff6ff;
}

/* 📱 Mobile rules */
@media (max-width: 768px) {
    .etms-chat-wrapper {
        bottom: 95px;
        right: 16px;
    }
    .chat-window {
        right: -8px;
        width: calc(100vw - 32px);
        max-width: 380px;
        height: 560px;
    }
}
/* ════════════════════════════════════════════════════════════════
   CAMPUSOS ERP — MODERN PRIVACY & COOKIE CONSENT CENTER
   Theme: CampusOS Royal Blue, Midnight Navy & Amber Gold Highlights
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Floating Banner (Bottom-Left) ───────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  max-width: 400px;
  background: rgba(8, 12, 30, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(56, 189, 248, 0.25);
  border-radius: 20px;
  padding: 22px;
  color: #ffffff;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(1, 74, 162, 0.2);
  z-index: 9999;
  animation: cookieSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

@keyframes cookieSlideUp {
  from {
    transform: translateY(60px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.cookie-banner-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cookie-banner-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cookie-banner h3 {
  font-size: 1.05rem;
  font-weight: 750;
  margin: 0;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.cookie-banner p {
  font-size: 0.86rem;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0 0 18px 0;
}

.cookie-banner-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cookie-banner-btn {
  padding: 10px 14px;
  border-radius: 9999px;
  font-size: 0.84rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-align: center;
}

.cookie-btn-primary {
  grid-column: span 2;
  background: linear-gradient(135deg, #014aa2 0%, #1e40af 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(1, 74, 162, 0.35);
}

.cookie-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(1, 74, 162, 0.5);
}

.cookie-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.cookie-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

.cookie-btn-ghost {
  background: transparent;
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cookie-btn-ghost:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

/* ── 2. Settings Modal (Overlay) ────────────────────────────────── */
.cookie-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 30, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
  animation: cookieFadeIn 0.25s ease both;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

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

.cookie-modal {
  width: 100%;
  max-width: 580px;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 25px 60px -15px rgba(1, 74, 162, 0.25), 0 0 0 1px rgba(226, 232, 240, 0.9);
  overflow: hidden;
  margin: auto;
  display: flex;
  flex-direction: column;
  animation: cookiePop 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cookiePop {
  from {
    transform: translateY(24px) scale(0.97);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Modal Header with CampusOS Navy & Gold Trim */
.cookie-modal-header {
  background: linear-gradient(135deg, #080c1e 0%, #0f1c3f 55%, #014aa2 100%);
  border-bottom: 2.5px solid #facd12;
  color: #ffffff;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.cookie-modal-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cookie-modal-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  flex-shrink: 0;
}

.cookie-modal-header h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.cookie-modal-subtitle {
  font-size: 11px;
  font-weight: 600;
  color: #93c5fd;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-top: 2px;
}

.cookie-modal-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.cookie-modal-close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: rotate(90deg);
}

/* ── 3. Modal Body & Category Cards ─────────────────────────────── */
.cookie-modal-body {
  padding: 20px 24px;
  max-height: 64vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.cookie-modal-body::-webkit-scrollbar {
  width: 5px;
}

.cookie-modal-body::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 9999px;
}

.cookie-notice-box {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.notice-icon {
  color: #0284c7;
  flex-shrink: 0;
  margin-top: 2px;
}

.cookie-notice-box p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #0369a1;
}

/* Category Cards */
.cookie-category-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: all 0.2s ease;
}

.cookie-category-card:hover {
  background: #ffffff;
  border-color: #93c5fd;
  box-shadow: 0 4px 12px rgba(1, 74, 162, 0.05);
}

.cookie-cat-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.cookie-cat-icon-squircle {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.cookie-cat-icon-squircle.essential {
  background: #e0f2fe;
  color: #0284c7;
}

.cookie-cat-icon-squircle.preferences {
  background: #f3e8ff;
  color: #9333ea;
}

.cookie-cat-icon-squircle.analytics {
  background: #dcfce7;
  color: #16a34a;
}

.cookie-cat-icon-squircle.marketing {
  background: #fef3c7;
  color: #d97706;
}

.cookie-cat-info {
  flex: 1;
}

.cookie-cat-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cookie-cat-name {
  font-size: 14px;
  font-weight: 750;
  color: #0f172a;
  margin: 0;
}

.cookie-badge-req {
  font-size: 10px;
  font-weight: 800;
  background: #dbeafe;
  color: #0369a1;
  padding: 2px 7px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.cookie-cat-desc {
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
  margin: 4px 0 0 0;
}

/* ── 4. Toggle Switch ───────────────────────────────────────────── */
.cookie-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #cbd5e1;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 9999px;
}

.cookie-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

input:checked + .cookie-slider {
  background: linear-gradient(135deg, #014aa2 0%, #1e40af 100%);
}

input:disabled + .cookie-slider {
  opacity: 0.65;
  cursor: not-allowed;
}

input:checked + .cookie-slider:before {
  transform: translateX(20px);
}

.cookie-switch.is-disabled {
  cursor: not-allowed;
}

/* ── 5. Modal Footer Actions ────────────────────────────────────── */
.cookie-modal-footer {
  padding: 16px 24px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.cookie-btn-cancel {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.cookie-btn-cancel:hover {
  color: #0f172a;
  background: #f1f5f9;
}

.cookie-footer-action-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cookie-btn-outline {
  background: #ffffff;
  border: 1.5px solid #014aa2;
  color: #014aa2;
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cookie-btn-outline:hover {
  background: #eff6ff;
  transform: translateY(-1px);
}

.cookie-btn-accept-all {
  background: linear-gradient(135deg, #014aa2 0%, #1e40af 100%);
  color: #ffffff;
  border: none;
  padding: 9px 20px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(1, 74, 162, 0.28);
  transition: all 0.2s ease;
}

.cookie-btn-accept-all:hover {
  box-shadow: 0 6px 18px rgba(1, 74, 162, 0.42);
  transform: translateY(-1px);
}

/* ── 6. Floating Cookie Trigger Button ──────────────────────────── */
.cookie-floating-widget {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #014aa2 0%, #1e40af 100%);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 24px rgba(1, 74, 162, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9990;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-floating-widget:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 28px rgba(1, 74, 162, 0.45);
}

/* Responsive Rules */
@media (max-width: 600px) {
  .cookie-modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .cookie-footer-action-group {
    flex-direction: column;
    width: 100%;
  }
  .cookie-btn-outline,
  .cookie-btn-accept-all,
  .cookie-btn-cancel {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .cookie-banner {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }
}
/* ============================================================
   DESIGN TOKENS — Phase B
   ------------------------------------------------------------
   Convention:
     1. PRIMITIVES  – raw colour scales / numeric values.
                      Never reference these directly in
                      component CSS.
     2. SEMANTIC    – role-based aliases that point at the
                      primitives. Components reference these
                      so the role is obvious from the name
                      (e.g. --text-primary, --tone-hot-bg).
     3. COMPONENT   – defined inside the component CSS itself,
                      referencing the semantic layer above.
                      (Not in this file.)

   Loaded once at the top of frontend/src/index.css.
   No component CSS should contain hardcoded colour literals;
   reach for a semantic token instead.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     1. COLOURS — PRIMITIVES (raw HSL scales, light theme)
     ---------------------------------------------------------- */

  /* Slate — neutral surface & text */
  --color-slate-50:  hsl(210, 40%, 98%);
  --color-slate-100: hsl(210, 40%, 96%);
  --color-slate-200: hsl(214, 32%, 91%);
  --color-slate-300: hsl(213, 27%, 84%);
  --color-slate-400: hsl(215, 20%, 65%);
  --color-slate-500: hsl(215, 16%, 47%);
  --color-slate-600: hsl(215, 19%, 35%);
  --color-slate-700: hsl(215, 25%, 27%);
  --color-slate-800: hsl(217, 33%, 17%);
  --color-slate-900: hsl(222, 47%, 11%);

  /* Blue — info / link */
  --color-blue-50:  hsl(214, 100%, 97%);
  --color-blue-100: hsl(214,  95%, 93%);
  --color-blue-200: hsl(213,  97%, 87%);
  --color-blue-300: hsl(212,  96%, 78%);
  --color-blue-400: hsl(213,  94%, 68%);
  --color-blue-500: hsl(217,  91%, 60%);
  --color-blue-600: hsl(221,  83%, 53%);
  --color-blue-700: hsl(224,  76%, 48%);
  --color-blue-800: hsl(226,  71%, 40%);
  --color-blue-900: hsl(224,  64%, 33%);

  /* Emerald — success / registered */
  --color-emerald-50:  hsl(152, 81%, 96%);
  --color-emerald-100: hsl(149, 80%, 90%);
  --color-emerald-200: hsl(152, 76%, 80%);
  --color-emerald-300: hsl(156, 72%, 67%);
  --color-emerald-400: hsl(158, 64%, 52%);
  --color-emerald-500: hsl(160, 84%, 39%);
  --color-emerald-600: hsl(161, 94%, 30%);
  --color-emerald-700: hsl(163, 94%, 24%);
  --color-emerald-800: hsl(163, 88%, 20%);
  --color-emerald-900: hsl(164, 86%, 16%);

  /* Amber — warm / warning */
  --color-amber-50:  hsl(48, 100%, 96%);
  --color-amber-100: hsl(48,  96%, 89%);
  --color-amber-200: hsl(48,  97%, 77%);
  --color-amber-300: hsl(46,  97%, 65%);
  --color-amber-400: hsl(43,  96%, 56%);
  --color-amber-500: hsl(38,  92%, 50%);
  --color-amber-600: hsl(32,  95%, 44%);
  --color-amber-700: hsl(26,  90%, 37%);
  --color-amber-800: hsl(23,  83%, 31%);
  --color-amber-900: hsl(22,  78%, 26%);

  /* Red — hot / danger */
  --color-red-50:  hsl(0, 86%, 97%);
  --color-red-100: hsl(0, 93%, 94%);
  --color-red-200: hsl(0, 96%, 89%);
  --color-red-300: hsl(0, 94%, 82%);
  --color-red-400: hsl(0, 91%, 71%);
  --color-red-500: hsl(0, 84%, 60%);
  --color-red-600: hsl(0, 72%, 51%);
  --color-red-700: hsl(0, 74%, 42%);
  --color-red-800: hsl(0, 70%, 35%);
  --color-red-900: hsl(0, 63%, 31%);

  /* Purple — primary action / deferred */
  --color-purple-50:  hsl(270, 100%, 98%);
  --color-purple-100: hsl(269, 100%, 95%);
  --color-purple-200: hsl(269,  100%, 92%);
  --color-purple-300: hsl(269,  97%, 85%);
  --color-purple-400: hsl(270,  95%, 75%);
  --color-purple-500: hsl(271,  91%, 65%);
  --color-purple-600: hsl(271,  81%, 56%);
  --color-purple-700: hsl(272,  72%, 47%);
  --color-purple-800: hsl(273,  67%, 39%);
  --color-purple-900: hsl(274,  66%, 32%);

  /* Cyan — cold / cool informational */
  --color-cyan-50:  hsl(183, 100%, 96%);
  --color-cyan-100: hsl(185,  96%, 90%);
  --color-cyan-200: hsl(186,  94%, 82%);
  --color-cyan-300: hsl(187,  92%, 69%);
  --color-cyan-400: hsl(188,  86%, 53%);
  --color-cyan-500: hsl(189,  94%, 43%);
  --color-cyan-600: hsl(192,  91%, 36%);
  --color-cyan-700: hsl(193,  82%, 31%);
  --color-cyan-800: hsl(194,  70%, 27%);
  --color-cyan-900: hsl(196,  64%, 24%);

  /* ----------------------------------------------------------
     1b. COLOURS — SEMANTIC SURFACES
     Role-based aliases. Components use ONLY these.
     ---------------------------------------------------------- */

  /* App-level surfaces */
  --bg-app:            var(--color-slate-50);
  --bg-surface:        #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-overlay:        hsla(222, 47%, 11%, 0.5);   /* modal backdrop */

  /* Text */
  --text-primary:    var(--color-slate-900);
  --text-secondary:  var(--color-slate-600);
  --text-muted:      var(--color-slate-500);
  --text-on-accent:  #ffffff;
  --text-disabled:   var(--color-slate-400);

  /* Borders */
  --border-default:  var(--color-slate-200);
  --border-strong:   var(--color-slate-300);
  --border-focus:    var(--color-blue-500);

  /* ----------------------------------------------------------
     1c. COLOURS — STATUS TONES (bg / fg / border per status)
     One self-contained trio per lead status / action role.
     ---------------------------------------------------------- */

  /* Cold lead — cool cyan/blue */
  --tone-cold-bg:     var(--color-cyan-50);
  --tone-cold-fg:     var(--color-cyan-800);
  --tone-cold-border: var(--color-cyan-200);

  /* Warm lead — amber */
  --tone-warm-bg:     var(--color-amber-50);
  --tone-warm-fg:     var(--color-amber-800);
  --tone-warm-border: var(--color-amber-200);

  /* Hot lead — red */
  --tone-hot-bg:      var(--color-red-50);
  --tone-hot-fg:      var(--color-red-800);
  --tone-hot-border:  var(--color-red-200);

  /* Deferred lead — purple */
  --tone-deferred-bg:     var(--color-purple-50);
  --tone-deferred-fg:     var(--color-purple-800);
  --tone-deferred-border: var(--color-purple-200);

  /* Registered lead — emerald */
  --tone-registered-bg:     var(--color-emerald-50);
  --tone-registered-fg:     var(--color-emerald-800);
  --tone-registered-border: var(--color-emerald-200);

  /* Neutral fallback — slate */
  --tone-neutral-bg:     var(--color-slate-100);
  --tone-neutral-fg:     var(--color-slate-700);
  --tone-neutral-border: var(--color-slate-200);

  /* Action tones (buttons, banners, badges by intent) */
  --tone-primary-bg:     var(--color-purple-600);
  --tone-primary-fg:     #ffffff;
  --tone-primary-border: var(--color-purple-700);

  --tone-danger-bg:      var(--color-red-600);
  --tone-danger-fg:      #ffffff;
  --tone-danger-border:  var(--color-red-700);

  --tone-success-bg:     var(--color-emerald-600);
  --tone-success-fg:     #ffffff;
  --tone-success-border: var(--color-emerald-700);

  --tone-info-bg:        var(--color-blue-600);
  --tone-info-fg:        #ffffff;
  --tone-info-border:    var(--color-blue-700);

  /* ----------------------------------------------------------
     2. SPACING — 4px baseline grid
     ---------------------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ----------------------------------------------------------
     3. RADII — corner-radius scale
     ---------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     4. SHADOWS — elevation + a11y focus ring
     ---------------------------------------------------------- */
  --shadow-xs:  0 1px 2px hsla(222, 47%, 11%, 0.04);
  --shadow-sm:  0 1px 3px hsla(222, 47%, 11%, 0.08),
                0 1px 2px hsla(222, 47%, 11%, 0.04);
  --shadow-md:  0 4px 6px -1px hsla(222, 47%, 11%, 0.10),
                0 2px 4px -2px hsla(222, 47%, 11%, 0.06);
  --shadow-lg:  0 10px 15px -3px hsla(222, 47%, 11%, 0.10),
                0 4px 6px  -4px hsla(222, 47%, 11%, 0.05);
  --shadow-xl:  0 20px 25px -5px hsla(222, 47%, 11%, 0.12),
                0  8px 10px -6px hsla(222, 47%, 11%, 0.06);
  --shadow-focus-ring: 0 0 0 4px var(--border-focus);

  /* ----------------------------------------------------------
     5. TYPOGRAPHY — families, sizes, line-heights, weights
     ---------------------------------------------------------- */
  --font-sans: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont,
               'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace;

  --font-size-xs:   12px;
  --font-size-sm:   13px;
  --font-size-base: 14px;
  --font-size-lg:   16px;
  --font-size-xl:   18px;
  --font-size-2xl:  22px;
  --font-size-3xl:  28px;

  --line-height-tight:   1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ----------------------------------------------------------
     6. Z-INDEX — layered UI stack
     ---------------------------------------------------------- */
  --z-base:           0;
  --z-sticky:         10;
  --z-dropdown:       100;
  --z-modal-backdrop: 1000;
  --z-modal:          1010;
  --z-drawer:         1020;
  --z-toast:          1030;
  --z-tooltip:        1040;

  /* ----------------------------------------------------------
     7. MOTION — transition presets
     ---------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ----------------------------------------------------------
     8. BREAKPOINTS — documentation only.
     CSS custom properties cannot be used inside @media queries,
     so components must hardcode these exact values to stay in
     sync. Update here AND in components together.

     --bp-mobile:  480px;
     --bp-tablet:  768px;
     --bp-desktop: 1024px;
     --bp-wide:    1280px;
     ---------------------------------------------------------- */
}

/* index.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Roboto, sans-serif;
}

html {
  /* No zoom and no reserved scrollbar gutter by DEFAULT — safe on every phone
     and tablet. The desktop scaling is opt-in below. */
  scrollbar-gutter: auto;
  overflow-x: hidden; /* prevents de.scrollWidth inflation from inner flex overflow */
}

/* Desktop ONLY: apply the 0.9 scaling + a stable scrollbar gutter.
   Inverting the logic (opt-IN for real desktops instead of reset-FOR-mobile)
   makes it impossible for a touch device to get stuck zoomed. The old
   `html{zoom:0.9}` + width-based reset was fragile: CSS `zoom` changes the
   width its own reset media query measures, so on some phones the reset never
   fired and the page stayed scaled to 90% — leaving a blank strip on the
   right and pushing controls (e.g. the AM/PM dropdown) off-screen.
   `hover:hover` + `pointer:fine` reliably identify a mouse-driven desktop. */

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  html {
    zoom: 0.9; /* Global scaling for desktop view as requested */
    scrollbar-gutter: stable; /* prevents navbar shift when a dropdown opens */
  }
}

body {
  background-color: #f8fafc;
  color: #1e293b;
  overflow-x: hidden;
  width: 100%;
  -webkit-text-size-adjust: 100%; /* Fix iOS zoom issue */
}

/* ── Project-wide responsive safety nets ── */

/* Media never forces horizontal scroll on small screens */

img, video, canvas {
  max-width: 100%;
}

/* Remove the grey tap flash on touch devices for a more app-like feel */

button, a, input, textarea, select {
  -webkit-tap-highlight-color: transparent;
}

/* Tables can't push the page wider than its container. A table that sets its
   own min-width still wins (min-width > max-width in CSS) and scrolls inside a
   wrapper, so this only reins in tables that would otherwise overflow. */

table { max-width: 100%; }

/* Code / preformatted blocks scroll instead of stretching the layout. */

pre { max-width: 100%; overflow-x: auto; }

/* ─────────────────────────────────────────────────────────────
   OPT-IN RESPONSIVE UTILITIES
   These do NOTHING unless a page adds the class — safe to ship
   project-wide. Adopt them gradually where a page needs help.
   ───────────────────────────────────────────────────────────── */

/* Wrap any wide/data table in this for contained horizontal scroll on phones:
   <div class="table-scroll-x"><table>…</table></div> */

.table-scroll-x,
.table-responsive,
.table-container,
.table-wrapper,
.table-scroll,
.overflow-x-auto,
.data-table-container,
.hub-table-container,
.crm-table-container,
.stl-history-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.table-scroll-x::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.table-container::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar,
.data-table-container::-webkit-scrollbar,
.hub-table-container::-webkit-scrollbar,
.crm-table-container::-webkit-scrollbar {
  height: 6px;
}

.table-scroll-x::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb,
.data-table-container::-webkit-scrollbar-thumb,
.hub-table-container::-webkit-scrollbar-thumb,
.crm-table-container::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 999px;
}

/* Long unbroken strings (emails, URLs, IDs) wrap instead of overflowing. */

.break-text {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Notch / home-indicator safe-area padding. */

.safe-top    { padding-top: max(0px, env(safe-area-inset-top)); }

.safe-bottom { padding-bottom: max(0px, env(safe-area-inset-bottom)); }

@media (max-width: 640px) {
  .search-box, .filter-bar, .toolbar-row, .modal-content, .card {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
  /* Make a specific control / element full-width on phones. */
  .mobile-full { width: 100%; }
  /* Stack a flex row vertically on phones. */
  .mobile-stack { flex-direction: column; align-items: stretch; }
  /* Let a button/toolbar row wrap instead of overflowing sideways. */
  .actions-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensures footer stays at the bottom */
}

/* Main Content Area */

.main-content-wrapper {
  flex: 1; 
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Standardise positioning */
  align-items: stretch;
  padding: 10px 20px;
  width: 100%;
  min-width: 0;
}

@media (max-width: 768px) {
  .main-content-wrapper {
    padding: 10px;
    padding-bottom: 90px; /* Buffer for bottom navs */
  }
}

/* Professional Footer */

footer {
  background-color: #0f172a; 
  color: #cbd5e1;
  text-align: center;
  padding: 20px 0;
  font-size: 0.9rem;
  border-top: 1px solid #1e293b;
}

/* --- Table to Card Transformation (Premium Mobile UI) --- */

@media (max-width: 768px) {
  .responsive-card-table {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }
  
  .responsive-card-table thead, 
  .responsive-card-table colgroup {
    display: none !important; /* Hide headers on mobile */
  }
  
  .responsive-card-table tbody {
    display: block !important;
    width: 100% !important;
  }
  
  .responsive-card-table tr {
    display: block !important;
    background: white !important;
    margin-bottom: 20px !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    border: 1px solid #eef2f7 !important;
    position: relative;
    overflow: hidden;
  }
  
  .responsive-card-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    text-align: right !important;
    font-size: 14px !important;
    width: 100% !important;
    min-height: 48px;
  }

  .responsive-card-table td:last-child {
    border-bottom: 0 !important;
    padding-top: 16px !important;
    margin-top: 4px;
  }

  /* Data Label Utility */
  .responsive-card-table td::before {
    content: attr(data-label);
    font-weight: 800;
    color: #64748b;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: 1;
    margin-right: 15px;
  }

  /* Primary Identifier Row (First TD) */
  .responsive-card-table td:first-child {
    justify-content: center !important;
    border-bottom: 2px solid #eff6ff !important;
    padding-bottom: 16px !important;
    margin-bottom: 8px !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    background: #f8fafc !important;
    margin: -20px -20px 15px -20px !important; /* Burst out of card padding */
    padding: 16px 20px !important;
    border-radius: 16px 16px 0 0 !important;
    color: #1e3a8a !important;
  }

  .responsive-card-table td:first-child::before {
    display: none !important;
  }

  /* Action Buttons Group */
  .responsive-card-table td[data-label*="Action"],
  .responsive-card-table td[data-label*="action"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    padding-top: 16px !important;
    border-top: 1px solid #eef2f7 !important;
  }
  
  .responsive-card-table td[data-label*="Action"]::before {
    display: none !important;
  }

  /* Force buttons to fill width or share space in cards */
  .responsive-card-table td[data-label*="Action"] button,
  .responsive-card-table td[data-label*="Action"] a {
    flex: 1 1 calc(50% - 8px);
    min-width: 100px;
    justify-content: center;
    border-radius: 10px !important;
    font-size: 13px !important;
  }
}

/* ── Global Layout Resets ── */

@media (max-width: 992px) {
  .sa-wrapper, .um-wrapper-extra, .sl-wrapper-extra {
    grid-template-columns: 1fr !important;
    margin: 10px !important;
    max-width: calc(100% - 20px) !important;
    border-radius: 16px !important;
  }
  
  .sa-side-panel {
    display: none !important;
  }
  
  .um-main-panel, .sl-main-panel {
    padding: 15px !important;
  }

  /* 3. Global CSS Grid Collapse */
  /* Any explicit 2+ column grids naturally collapse to 1 column */
  .um-form-row, .ca-form-row, .ad-form-row, .pf-grid {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .um-header,
  .adm-hub__header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  /* Page-header action button rows must wrap (and share the row) instead of
     forcing the page wider than the viewport. Covers the reused "hub" header
     on Student/Trainer registries and similar admin hubs. */
  .hub-actions {
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100%;
  }
  .hub-actions > * {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Force everything into viewport */
  .um-table-container, .ta-table-container, .sl-table-card, .aa-card,
  .sa-card, .adm-card, .mk-stat-card, .cr-card, .session-card {
    border-radius: 12px !important;
    margin: 5px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Universal Dashboard Bottom Offset for Mobile Nav */
  .sa-content, .adm-page, .mk-content, .cr-content, .trainer-content, .student-content,
  .main-content-wrapper, .dashboard-view-content {
    padding-bottom: 120px !important;
  }
}

/* ── Universal Responsive Data Table Container ── */

.table-responsive-container,
.table-responsive,
.table-scroll-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

/* ── Universal Mobile Modal & Drawer Viewport Bound ── */

@media (max-width: 768px) {
  .ui-modal,
  .modal-dialog,
  .modal-content,
  .som-modal,
  .platform-gov-modal,
  .recording-player-modal,
  .report-builder-modal {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 10px auto !important;
  }

  .ui-drawer,
  .drawer-panel {
    max-width: 100vw !important;
  }

  /* Table cells must never clip on mobile */
  table {
    min-width: 600px;
  }
  
  .table-responsive-container table,
  .table-responsive table {
    margin-bottom: 0;
  }
}
/* ── Shared page layout primitives used across admin / student / trainer pages ── */

/* Page wrapper */
.admin-page { padding: 24px; }

/* Page header row */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.header-left { display: flex; align-items: center; gap: 16px; }
.page-subtitle { color: #64748b; font-size: 14px; margin-top: 4px; }

/* Icon badge */
.icon-wrapper {
  width: 50px; height: 50px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff;
}
.bg-green { background: linear-gradient(135deg, #10b981, #059669); }
.bg-blue  { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.bg-red   { background: linear-gradient(135deg, #ef4444, #dc2626); }
.bg-gold  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.bg-purple{ background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

/* Buttons */
.primary-btn {
  background: #2563eb; color: #fff; border: none; padding: 10px 20px;
  border-radius: 8px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 8px; font-size: 14px;
  transition: background 0.2s;
}
.primary-btn:hover { background: #1d4ed8; }
.secondary-btn {
  background: #f1f5f9; color: #475569; border: none; padding: 10px 20px;
  border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px;
}
.secondary-btn:hover { background: #e2e8f0; }
.action-btn {
  padding: 8px 14px; border: none; border-radius: 6px; font-size: 13px;
  font-weight: 600; cursor: pointer; background: #f1f5f9; color: #0f172a; transition: 0.2s;
}
.action-btn:hover { background: #e2e8f0; }
.icon-btn {
  background: none; border: none; cursor: pointer; padding: 6px;
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  color: #64748b; transition: 0.2s;
}
.icon-btn:hover { background: #f1f5f9; color: #0f172a; }
.icon-btn.text-error { color: #ef4444; }
.icon-btn.text-error:hover { background: #fee2e2; color: #dc2626; }

/* Table */
.table-container {
  background: #fff; border-radius: 12px;
  border: 1px solid #e2e8f0; overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; padding: 14px 20px; background: #f8fafc;
  color: #475569; font-weight: 600; font-size: 13px;
  text-transform: uppercase; border-bottom: 1px solid #e2e8f0;
}
.data-table td {
  padding: 16px 20px; border-bottom: 1px solid #e2e8f0;
  color: #334155; font-size: 14px;
}
.data-table tr:last-child td { border-bottom: none; }
.text-center { text-align: center; }

/* Loading state */
.loading-state {
  padding: 48px; text-align: center;
  color: #94a3b8; font-size: 15px; font-weight: 500;
}

/* Status badges */
.status-badge {
  padding: 5px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 700; display: inline-block;
}
.st-paid       { background: #dcfce7; color: #16a34a; }
.st-pending    { background: #fef3c7; color: #d97706; }
.st-partial    { background: #fef3c7; color: #d97706; }
.st-approved   { background: #dcfce7; color: #16a34a; }
.st-rejected   { background: #fee2e2; color: #dc2626; }
.st-cancelled  { background: #fee2e2; color: #dc2626; }
.st-conditional{ background: #eff6ff; color: #2563eb; }
.st-active     { background: #dcfce7; color: #16a34a; }
.st-inactive   { background: #f1f5f9; color: #64748b; }
.st-closed     { background: #f1f5f9; color: #64748b; }
.st-scheduled  { background: #eff6ff; color: #2563eb; }
.st-completed  { background: #dcfce7; color: #16a34a; }
.st-published  { background: #dcfce7; color: #16a34a; }

/* Alert messages */
.alert-msg { padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* Modal */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; animation: sl-fadeIn 0.25s ease;
}
.modal-content {
  background: #fff; width: 520px; max-width: 95%; max-height: 90vh;
  border-radius: 16px; display: flex; flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  animation: sl-modalSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; flex-shrink: 0;
}
.modal-header h2 { font-size: 18px; font-weight: 700; color: #0f172a; margin: 0; }
.modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.modal-actions {
  display: flex; justify-content: flex-end; gap: 12px;
  padding: 16px 24px; background: #f8fafc; border-top: 1px solid #e2e8f0; flex-shrink: 0;
}
.close-btn {
  background: #f1f5f9; border: none; width: 32px; height: 32px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer; color: #64748b; transition: 0.2s;
}
.close-btn:hover { background: #e2e8f0; color: #0f172a; }

/* Form */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block; margin-bottom: 8px; font-weight: 600; font-size: 13px;
  color: #475569; text-transform: uppercase; letter-spacing: 0.5px;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 16px; border: 1px solid #e2e8f0;
  border-radius: 10px; font-size: 14px; color: #1e293b; background: #fff;
  transition: all 0.2s ease; box-sizing: border-box;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-group textarea { height: 100px; resize: vertical; }

/* Utility */
.text-blue   { color: #2563eb; }
.text-green  { color: #10b981; }
.text-red    { color: #ef4444; }
.text-error  { color: #ef4444; }
.fw-600      { font-weight: 600; }

/* Animations */
@keyframes sl-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sl-modalSlide {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Responsive */
@media (max-width: 768px) {
  .admin-page { padding: 14px 12px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .table-container { overflow-x: auto; }
  .data-table { min-width: 600px; }
  .modal-content { width: 95%; }
}
@media (max-width: 480px) {
  .modal-actions { flex-direction: column-reverse; gap: 8px; }
  .modal-actions .primary-btn,
  .modal-actions .secondary-btn { width: 100%; justify-content: center; }
}