/* ============================================================
   EDEN Education Center — ColloRosso Warm Wine/Gold Theme
   Matches the Rotation Portal design language
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Primary palette — warm wine/maroon/gold (matching rotation portal) */
  --primary:    #8B2332;
  --primary-l:  #A83245;
  --primary-d:  #6B1A27;
  --primary-rgb: 139,35,50;
  --accent:     #C5A572;
  --accent-l:   #D4BA8E;
  --accent-d:   #A8884F;
  --accent-rgb: 197,165,114;
  --accent-subtle: rgba(197, 165, 114, 0.12);
  --accent-glow: rgba(197, 165, 114, 0.25);

  /* Semantic */
  --success:    #2E7D4F;
  --success-l:  rgba(46, 125, 79, 0.12);
  --warning:    #EF6C00;
  --warning-l:  rgba(239, 108, 0, 0.12);
  --danger:     #D32F2F;
  --danger-l:   rgba(211, 47, 47, 0.12);

  /* Light app interior with warm accents */
  --bg:         #F8F6F4;
  --bg-card:    #FFFFFF;
  --bg-hover:   #FAF6F2;
  --border:     #E5E1DC;
  --border-l:   #F0ECE8;
  --text:       #1A1A1A;
  --text-sec:   #4B4543;
  --text-muted: #9A9490;
  --text-on-dark: #F9FAFB;

  /* Layout */
  --sidebar-w:  240px;
  --header-h:   56px;
  --radius:     6px;
  --radius-lg:  10px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow:     0 2px 8px rgba(0,0,0,.1);
  --shadow-lg:  0 4px 16px rgba(0,0,0,.12);
  --transition: .2s ease;

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C8C0B8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9A9490; }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.tp-layout {
  display: flex;
  min-height: 100vh;
}

/* --- Sidebar (dark wine, matches rotation portal) --- */
.tp-sidebar {
  width: var(--sidebar-w);
  background: #1A0A0E;
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: width .25s ease, transform var(--transition);
  overflow: hidden;
}
/* ── Collapsed state (desktop/tablet only) ── */
.tp-sidebar--collapsed {
  width: 64px;
}
.tp-sidebar--collapsed .tp-sidebar__brand > span,
.tp-sidebar--collapsed .tp-sidebar__link span,
.tp-sidebar--collapsed .tp-sidebar__section,
.tp-sidebar--collapsed .tp-sidebar__divider,
.tp-sidebar--collapsed .tp-sidebar__footer span {
  display: none;
}
/* Tenant row: hide label, center avatar */
.tp-sidebar--collapsed .tp-sidebar__tenant-label { display: none; }
.tp-sidebar--collapsed .tp-sidebar__tenant { justify-content: center; padding: 8px 0; }
/* Toggle button: flip chevron to point right (expand) */
.tp-sidebar--collapsed .tp-sidebar__toggle .icon-collapse { display: block; transform: rotate(180deg); }
.tp-sidebar--collapsed .tp-sidebar__toggle .icon-close    { display: none; }
/* Brand: center the icon, keep toggle accessible */
.tp-sidebar--collapsed .tp-sidebar__brand {
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  gap: 8px;
}
.tp-sidebar--collapsed .tp-sidebar__brand img { width: 28px; height: 28px; }
.tp-sidebar--collapsed .tp-sidebar__toggle { margin-left: 0; }
/* Links: center icon only */
.tp-sidebar--collapsed .tp-sidebar__link {
  justify-content: center;
  padding: 10px 0;
  border-left-width: 0;
  position: relative;
}
.tp-sidebar--collapsed .tp-sidebar__link.active {
  border-left-width: 0;
  background: rgba(197,165,114,.12);
  border-radius: 0;
}
/* Sidebar tooltip (appended to body via JS) */
.tp-sidebar-tooltip {
  position: fixed;
  background: #2a1015;
  color: #fff;
  font-size: .78rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10000;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  opacity: 0;
  transition: opacity .12s;
}
.tp-sidebar-tooltip.visible {
  opacity: 1;
}
/* Footer: center icons */
.tp-sidebar--collapsed .tp-sidebar__footer {
  padding: 12px 0;
}
.tp-sidebar--collapsed .tp-sidebar__footer a {
  justify-content: center;
  padding: 8px 0;
}
.tp-sidebar--collapsed .tp-sidebar__footer a svg { margin: 0; }

/* ── Collapse/expand toggle button ── */
.tp-sidebar__toggle {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.35);
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.tp-sidebar__toggle:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.07); }
.tp-sidebar__toggle svg { width: 18px; height: 18px; }
.tp-sidebar__toggle .icon-collapse { display: block; }
.tp-sidebar__toggle .icon-close    { display: none; }

.tp-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  min-height: 56px;
}
.tp-sidebar__brand img {
  width: 32px; height: 32px;
  border-radius: 6px;
  flex-shrink: 0;
}
.tp-sidebar__brand span {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 0.3px;
  color: var(--accent);
  line-height: 1.2;
  min-width: 0;
}

/* ── Tenant info row ── */
.tp-sidebar__tenant {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  overflow: hidden;
  transition: padding .25s ease;
}
.tp-sidebar__tenant-logo {
  width: 24px; height: 24px;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
}
.tp-sidebar__tenant-avatar {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.tp-sidebar__tenant-label {
  font-size: .7rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tp-sidebar__nav {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
}

.tp-sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  color: rgba(255,255,255,.6);
  font-size: .875rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
  text-decoration: none;
}
.tp-sidebar__link:hover {
  color: #fff;
  background: rgba(255,255,255,.05);
  text-decoration: none;
}
.tp-sidebar__link.active {
  color: var(--accent);
  background: rgba(197,165,114,.08);
  border-left-color: var(--accent);
  font-weight: 600;
}
.tp-sidebar__link svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  opacity: .85;
}

.tp-sidebar__section {
  padding: 20px 18px 6px;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.3);
  font-weight: 600;
}

.tp-sidebar__divider {
  border-top: 1px solid rgba(255,255,255,.06);
  margin: 8px 18px;
}

.tp-sidebar__footer {
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.tp-sidebar__footer a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.45);
  font-size: .8rem;
  padding: 6px 0;
  text-decoration: none;
}
.tp-sidebar__footer a:hover { color: var(--accent); }

/* --- Main content area --- */
.tp-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  transition: margin-left .25s ease;
}

/* --- Header --- */
.tp-header {
  height: var(--header-h);
  background: #FFFFFF;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.tp-header__left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1 1 auto;
}

.tp-hamburger {
  display: none;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
}
.tp-hamburger svg { width: 24px; height: 24px; }

/* ── Back button pill (all breakpoints) ── */
.tp-back-btn {
  display: none; /* JS sets display:flex when history exists */
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--primary, #6b1d2a);
  color: #fff;
  border: none;
  padding: 7px 14px 7px 10px;
  cursor: pointer;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: .01em;
  transition: background .15s, box-shadow .15s;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(107,29,42,.2);
  z-index: 10;
}
.tp-back-btn:hover { background: #551620; box-shadow: 0 2px 8px rgba(107,29,42,.3); }
.tp-back-btn:active { transform: scale(.97); }
.tp-back-btn svg { width: 15px; height: 15px; stroke: #fff; }
.tp-back-btn::after { content: 'Back'; }
/* Tablet: slightly smaller */
@media (min-width: 769px) and (max-width: 1024px) {
  .tp-back-btn { padding: 6px 12px 6px 9px; font-size: .75rem; }
}
/* Mobile: icon only, circular */
@media (max-width: 768px) {
  .tp-back-btn {
    padding: 8px;
    border-radius: 50%;
    min-width: 36px;
    min-height: 36px;
  }
  .tp-back-btn::after { display: none; }
  .tp-back-btn svg { width: 18px; height: 18px; }
}

.tp-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: var(--text-sec);
  white-space: nowrap;
}
/* Ancestor segments (all items except the last) — hide on tablet, hide on mobile */
.tp-breadcrumbs a { color: var(--text-sec); transition: color var(--transition); }
.tp-breadcrumbs a:hover { color: var(--primary); text-decoration: none; }
.tp-breadcrumbs__sep { opacity: .4; }
/* Ancestor links + separators are lower priority — hide them as space shrinks */
.tp-breadcrumbs__ancestor { display: inline; }
.tp-breadcrumbs__sep      { display: inline; }

.tp-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.tp-notif-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-sec);
  padding: 4px;
}
.tp-notif-btn svg { width: 20px; height: 20px; }
.tp-notif-badge {
  position: absolute;
  top: 0; right: 0;
  width: 16px; height: 16px;
  background: var(--danger);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tp-user-menu {
  position: relative;
}
.tp-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: background var(--transition);
}
.tp-user-btn:hover { background: var(--bg); }
.tp-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 600;
}
.tp-user-name {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
}
.tp-user-role {
  font-size: .7rem;
  color: var(--text-muted);
}

.tp-user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  display: none;
  z-index: 200;
  overflow: hidden;
}
.tp-user-dropdown.open { display: block; }
.tp-user-dropdown__header {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border-l);
}
.tp-user-dropdown__header .tp-user-avatar--lg {
  width: 40px; height: 40px;
  font-size: .9rem;
}
.tp-user-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
.tp-user-dropdown__item svg { width: 16px; height: 16px; opacity: .6; }
.tp-user-dropdown__item:hover { background: var(--bg); }
.tp-user-dropdown__item--danger { color: var(--danger); }
.tp-user-dropdown__divider { border-top: 1px solid var(--border-l); }

.tp-role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-d);
  margin-top: 4px;
}

/* --- Content --- */
.tp-content {
  flex: 1;
  padding: 24px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* ============================================================
   LOGIN — matches ColloRosso Rotation Portal design language
   ============================================================ */
.tp-login-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #0F0A0C;
  color: #1F2937;
  position: relative;
  overflow: hidden;
}

/* Subtle radial glow background */
.tp-login-page::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(ellipse, rgba(var(--accent-rgb), 0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* Top gradient line (rotation portal style) */
.tp-login-page::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--primary) 30%, var(--accent) 70%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* Login header bar */
.tp-login-header {
  background: #1A1A1A;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.tp-login-header .logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.tp-login-header .logo-icon { height: 32px; width: auto; }
.tp-login-header .logo-text { display: flex; flex-direction: column; }
.tp-login-header .logo-main {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.tp-login-header .logo-sub {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: -1px;
}

.tp-login-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
}

/* Auth card — white card on dark background */
.tp-login-card {
  width: 440px;
  max-width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
}

.tp-login-card .card-body { padding: 40px 36px; }

/* "EDUCATION CENTER" badge at top of card */
.tp-login-badge {
  display: block;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-d);
  background: rgba(var(--accent-rgb), 0.1);
  padding: 6px 16px;
  border-radius: 20px;
  margin: 0 auto 20px;
  width: fit-content;
}

/* Card heading */
.tp-login-card-header {
  text-align: center;
  margin-bottom: 28px;
}
.tp-login-card-header h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 28px;
  color: #1A1A1A;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.tp-login-card-header p {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.5;
}

/* Form elements in login card */
.tp-login-form-group {
  margin-bottom: 18px;
}
.tp-login-form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #4B5563;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.tp-login-form-group label .required {
  color: var(--danger);
  margin-left: 2px;
}

.tp-login-card input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 14px;
  color: #1A1A1A;
  background: #F9FAFB;
  border: 1.5px solid #D1D5DB;
  border-radius: 5px;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.tp-login-card input::placeholder { color: #9CA3AF; }
.tp-login-card input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
  background: #FFFFFF;
}

/* Password field */
.tp-password-field {
  position: relative;
}
.tp-password-field input {
  padding-right: 44px;
}
.tp-password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #9CA3AF;
  padding: 4px;
  display: flex;
  align-items: center;
}
.tp-password-toggle:hover { color: var(--accent); }

/* Login options row */
.tp-login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 13px;
}

.tp-remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #4B5563;
  user-select: none;
}
.tp-remember-me input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
  padding: 0;
}

.tp-forgot-link {
  color: var(--accent-d) !important;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s;
}
.tp-forgot-link:hover {
  color: var(--primary) !important;
}

/* Primary button — burgundy/maroon */
.tp-login-card .tp-btn--primary {
  background: linear-gradient(135deg, var(--primary-d), var(--primary)) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 13px 24px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
}
.tp-login-card .tp-btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--primary), var(--primary-l)) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.2);
}

/* Outline button (Register with Access Code) */
.tp-login-card .tp-btn--outline {
  background: transparent !important;
  color: var(--accent-d) !important;
  border: 1.5px solid var(--accent) !important;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
}
.tp-login-card .tp-btn--outline:hover:not(:disabled) {
  background: var(--accent) !important;
  color: #1A1A1A !important;
}

/* OR divider */
.tp-login-divider {
  text-align: center;
  position: relative;
  margin: 20px 0 16px;
  color: #9CA3AF;
  font-size: 12px;
}
.tp-login-divider::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: #E5E7EB;
}
.tp-login-divider span {
  background: #FFFFFF;
  padding: 0 12px;
  position: relative;
}

/* Error / success alerts */
.tp-login-error {
  background: rgba(211,47,47,0.08);
  border: 1px solid rgba(211,47,47,0.2);
  color: #D32F2F;
  padding: 10px 14px;
  border-radius: 5px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}
.tp-login-error.visible { display: block; }

.tp-login-success {
  background: rgba(46,125,79,0.08);
  border: 1px solid rgba(46,125,79,0.2);
  color: #2E7D4F;
  padding: 10px 14px;
  border-radius: 5px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}
.tp-login-success.visible { display: block; }

/* Security badge */
.tp-security-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #E5E7EB;
}
.tp-security-badge span {
  font-size: 11px;
  color: #6B7280;
  letter-spacing: 0.03em;
}
.tp-security-badge svg {
  width: 14px;
  height: 14px;
  color: #2E7D4F;
}

/* Login helper text */
.tp-login-helper {
  font-size: 12px;
  color: #9CA3AF;
  text-align: center;
  margin-top: 8px;
}

/* Back to EHR link */
.tp-back-to-ehr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  color: #6B7280 !important;
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 8px;
  transition: color 0.2s;
  text-decoration: none !important;
}
.tp-back-to-ehr:hover { color: var(--accent-d) !important; }

/* Login footer */
.tp-login-footer {
  position: relative;
  z-index: 1;
  background: #1A1A1A;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
  text-align: center;
  padding: 20px 32px;
  font-size: 11px;
}
.tp-login-footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.tp-login-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tp-login-footer-brand img {
  height: 24px;
  width: auto;
  opacity: 0.6;
}
.tp-login-footer-text {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}
.tp-login-footer-text a {
  color: rgba(255,255,255,0.7);
  transition: color 0.2s;
}
.tp-login-footer-text a:hover { color: #FFFFFF; }
.tp-login-footer-links {
  display: flex;
  gap: 20px;
  align-items: center;
}
.tp-login-footer-links a {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.tp-login-footer-links a:hover { color: var(--accent); }

/* App Footer (inside shell) */
.tp-app-footer {
  background: #FFFFFF;
  border-top: 1px solid var(--border);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.tp-app-footer a { color: var(--text-sec); }
.tp-app-footer a:hover { color: var(--primary); text-decoration: none; }
.tp-app-footer__left { display: flex; align-items: center; gap: 6px; }
.tp-app-footer__left img { width: 16px; height: 16px; border-radius: 3px; opacity: 0.6; }
.tp-app-footer__right { display: flex; gap: 16px; }
.tp-app-footer__right a { font-size: 0.75rem; }

/* Form groups (used in login and throughout app) */
.tp-form-group {
  text-align: left;
  margin-bottom: 16px;
}
.tp-form-group label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}
.tp-form-group input,
.tp-form-group select,
.tp-form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--text);
  background: var(--bg-card);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tp-form-group input:focus,
.tp-form-group select:focus,
.tp-form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
}
.tp-btn:hover { text-decoration: none; }
.tp-btn:disabled { opacity: .5; cursor: not-allowed; }

.tp-btn--primary {
  background: var(--primary);
  color: #fff;
}
.tp-btn--primary:hover:not(:disabled) { background: var(--primary-d); }

.tp-btn--secondary {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border-l);
}
.tp-btn--secondary:hover:not(:disabled) { background: var(--bg-hover); }

.tp-btn--success {
  background: var(--success);
  color: #fff;
}
.tp-btn--success:hover:not(:disabled) { background: #245F3D; }

.tp-btn--danger {
  background: var(--danger);
  color: #fff;
}
.tp-btn--danger:hover:not(:disabled) { background: #B71C1C; }

.tp-btn--ghost {
  background: transparent;
  color: var(--primary);
  padding: 10px 12px;
}
.tp-btn--ghost:hover:not(:disabled) { background: rgba(var(--primary-rgb),.06); }

.tp-btn--sm { padding: 6px 12px; font-size: .8rem; }
.tp-btn--lg { padding: 12px 28px; font-size: 1rem; }
.tp-btn--block { width: 100%; }

.tp-btn svg { width: 16px; height: 16px; }

/* ============================================================
   CARDS
   ============================================================ */
.tp-card {
  background: var(--bg-card);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.tp-card:hover { box-shadow: var(--shadow); }

.tp-card__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-l);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tp-card__title {
  font-size: 1rem;
  font-weight: 700;
}
.tp-card__body {
  padding: 20px;
}

/* ============================================================
   DASHBOARD
   ============================================================ */
.tp-welcome-banner {
  background: linear-gradient(135deg, #6B1A27 0%, #8B2332 50%, #A83245 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.tp-welcome-banner h1 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.tp-welcome-banner p {
  opacity: .8;
  font-size: .9rem;
}

.tp-compliance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
}
.tp-compliance-chip--green   { background: rgba(46,125,79,.2); color: #8BFFB8; }
.tp-compliance-chip--yellow  { background: rgba(239,108,0,.2); color: #FFC18A; }
.tp-compliance-chip--red     { background: rgba(211,47,47,.2); color: #FF9A9F; }
.tp-compliance-chip--blue    { background: rgba(37,99,235,.2); color: #93C5FD; }
.tp-compliance-chip--neutral { background: rgba(100,116,139,.2); color: #CBD5E1; }

.tp-stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.tp-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  text-align: center;
}
.tp-stat-card__value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.tp-stat-card__label {
  font-size: .75rem;
  color: var(--text-sec);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.tp-stat-card--accent .tp-stat-card__value { color: var(--accent-d); }
.tp-stat-card--success .tp-stat-card__value { color: var(--success); }
.tp-stat-card--danger .tp-stat-card__value { color: var(--danger); }

.tp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.tp-section-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
}

.tp-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

/* --- Course Card --- */
.tp-course-card {
  background: var(--bg-card);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.tp-course-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.tp-course-card--overdue { border-left: 4px solid var(--danger); }
.tp-course-card--due-soon { border-left: 4px solid var(--warning); }

.tp-course-card__top {
  padding: 20px 20px 0;
  flex: 1;
}

.tp-course-card__cat {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.tp-cat--compliance      { background: #EBE5D8; color: #8B6914; }
.tp-cat--clinical        { background: #E6F5ED; color: #2E7D4F; }
.tp-cat--hipaa           { background: #F5E0E3; color: #8B2332; }
.tp-cat--safety          { background: #FFF3E0; color: #E65100; }
.tp-cat--hr              { background: #F3E5F5; color: #7B1FA2; }
.tp-cat--onboarding      { background: #E0F7FA; color: #00838F; }
.tp-cat--default         { background: var(--bg); color: var(--text-sec); }

.tp-course-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.35;
}
.tp-course-card__desc {
  font-size: .82rem;
  color: var(--text-sec);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}

.tp-course-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .75rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.tp-course-card__meta svg { width: 14px; height: 14px; opacity: .6; }

.tp-course-card__bottom {
  padding: 0 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Progress bar */
.tp-progress {
  flex: 1;
  height: 6px;
  background: var(--border-l);
  border-radius: 3px;
  overflow: hidden;
}
.tp-progress__bar {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width .4s ease;
}
.tp-progress__bar--complete { background: var(--success); }

.tp-progress-label {
  font-size: .7rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

/* Status badges */
.tp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: .72rem;
  font-weight: 600;
}
.tp-badge--overdue   { background: var(--danger-l);  color: var(--danger); }
.tp-badge--due-soon  { background: var(--warning-l); color: var(--warning); }
.tp-badge--complete  { background: var(--success-l); color: var(--success); }
.tp-badge--assigned  { background: rgba(var(--accent-rgb), 0.12); color: var(--accent-d); }
.tp-badge--renewal   { background: #ede9fe; color: #7c3aed; }
.tp-badge--renewal svg { width: 12px; height: 12px; stroke: #7c3aed; vertical-align: -1px; margin-right: 2px; }
.tp-badge--expired   { background: var(--danger-l);  color: var(--danger); }
.tp-badge--valid     { background: var(--success-l); color: var(--success); }
.tp-badge--expiring  { background: var(--warning-l); color: var(--warning); }

/* Collapsible completed */
.tp-collapsible__header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 12px;
}
.tp-collapsible__header h2 { font-size: 1.1rem; font-weight: 700; }
.tp-collapsible__chevron {
  transition: transform var(--transition);
  width: 20px; height: 20px;
  color: var(--text-sec);
}
.tp-collapsible__chevron.open { transform: rotate(180deg); }
.tp-collapsible__body {
  display: none;
}
.tp-collapsible__body.open { display: block; }

/* ============================================================
   COURSE VIEWER
   ============================================================ */
.tp-course-header {
  margin-bottom: 24px;
}
.tp-course-header h1 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.tp-course-header__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--text-sec);
}

/* Step indicator */
/* ── Course completion banner ── */
.tp-complete-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  margin-bottom: 16px;
}
.tp-complete-banner__icon {
  width: 36px;
  height: 36px;
  background: #16a34a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tp-complete-banner__icon svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2.5; }
.tp-complete-banner strong { font-size: .92rem; color: #15803d; }
.tp-complete-banner__date { font-size: .78rem; color: #4ade80; margin-left: 8px; }
.tp-complete-banner__actions { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 600px) {
  .tp-complete-banner { flex-wrap: wrap; padding: 12px 16px; }
  .tp-complete-banner__date { display: block; margin-left: 0; margin-top: 2px; }
  .tp-complete-banner__actions { margin-left: 0; width: 100%; margin-top: 8px; }
}

.tp-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.tp-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  position: relative;
}
.tp-step::after {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--border);
  margin-left: 8px;
}
.tp-step:last-child::after { display: none; }
.tp-step__icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  background: var(--bg-card);
}
.tp-step--active { color: var(--primary); }
.tp-step--active .tp-step__icon { border-color: var(--primary); background: rgba(var(--primary-rgb),.08); }
.tp-step--done { color: var(--success); }
@media (max-width: 480px) {
  .tp-step { padding: 6px 10px; font-size: .75rem; gap: 6px; }
  .tp-step__icon { width: 20px; height: 20px; font-size: .6rem; }
  .tp-step::after { width: 12px; margin-left: 4px; }
  .tp-step span { display: none; }
}
.tp-step--done .tp-step__icon {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}

/* Reading container */
.tp-reading {
  background: var(--bg-card);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  max-width: 800px;
  margin: 0 auto 24px;
  line-height: 1.7;
  font-size: .95rem;
}
.tp-reading h1, .tp-reading h2, .tp-reading h3 {
  margin: 1.5em 0 .5em;
  line-height: 1.3;
  font-weight: 700;
}
.tp-reading h1 { font-size: 1.4rem; }
.tp-reading h2 { font-size: 1.2rem; }
.tp-reading h3 { font-size: 1.05rem; }
.tp-reading p { margin-bottom: 1em; }
.tp-reading ul, .tp-reading ol { margin: 0 0 1em 1.5em; }
.tp-reading li { margin-bottom: .4em; }
.tp-reading img {
  border-radius: var(--radius);
  margin: 1em 0;
}
.tp-reading table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}
.tp-reading th, .tp-reading td {
  padding: 10px 14px;
  border: 1px solid var(--border);
  text-align: left;
  font-size: .85rem;
}
.tp-reading th { background: var(--bg); font-weight: 600; color: var(--text); }
.tp-reading .comparison-table th { background: var(--primary); color: #fff; }

/* Responsive video */
.tp-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: 0 auto 24px;
  max-width: 800px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
}
.tp-video-wrap iframe,
.tp-video-wrap video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

.tp-course-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 8px;
}

/* ============================================================
   QUIZ ENGINE
   ============================================================ */
.tp-quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.tp-quiz-counter {
  font-size: .9rem;
  font-weight: 600;
}
.tp-quiz-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  padding: 6px 12px;
  background: var(--bg);
  border-radius: var(--radius);
}
.tp-quiz-timer.warning { color: var(--danger); background: var(--danger-l); }

.tp-quiz-progress {
  height: 4px;
  background: var(--border-l);
  border-radius: 2px;
  margin-bottom: 24px;
  overflow: hidden;
}
.tp-quiz-progress__bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .3s ease;
}

/* Question dots */
.tp-quiz-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  justify-content: center;
}
.tp-quiz-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg-card);
}
.tp-quiz-dot:hover { border-color: var(--accent); }
.tp-quiz-dot.active { border-color: var(--accent); color: var(--accent-d); background: rgba(var(--accent-rgb),.06); }
.tp-quiz-dot.answered { border-color: var(--success); background: var(--success-l); color: var(--success); }

/* Question card */
.tp-question-card {
  background: var(--bg-card);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  max-width: 700px;
  margin: 0 auto 24px;
}
.tp-question-card__text {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Answer options */
fieldset[role="radiogroup"], fieldset[aria-label] {
  border: none;
  padding: 0;
  margin: 0;
  min-inline-size: auto;
}
.tp-option input[type="radio"],
.tp-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.tp-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid var(--border-l);
  border-radius: var(--radius);
  margin-bottom: 10px;
  cursor: pointer;
  transition: all var(--transition);
}
.tp-option:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb),.03);
}
.tp-option.selected {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb),.06);
}
.tp-option.correct {
  border-color: var(--success);
  background: var(--success-l);
}
.tp-option.incorrect {
  border-color: var(--danger);
  background: var(--danger-l);
}

.tp-option__radio,
.tp-option__check {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.tp-option__check { border-radius: 4px; }
.tp-option.selected .tp-option__radio {
  border-color: var(--accent);
}
.tp-option.selected .tp-option__radio::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.tp-option.selected .tp-option__check {
  border-color: var(--accent);
  background: var(--accent);
}
.tp-option.selected .tp-option__check::after {
  content: '';
  width: 6px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

.tp-option__label {
  font-size: .9rem;
  line-height: 1.5;
}

/* True/False toggles */
.tp-tf-group {
  display: flex;
  gap: 16px;
}
.tp-tf-btn {
  flex: 1;
  padding: 16px;
  border: 2px solid var(--border-l);
  border-radius: var(--radius);
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg-card);
}
.tp-tf-btn:hover { border-color: var(--accent); }
.tp-tf-btn.selected {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb),.06);
  color: var(--accent-d);
}

/* Short answer */
.tp-short-answer {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border-l);
  border-radius: var(--radius);
  font-size: .95rem;
  transition: border-color var(--transition);
}
.tp-short-answer:focus {
  outline: none;
  border-color: var(--accent);
}

/* Image hotspot */
.tp-hotspot-image {
  position: relative;
  display: inline-block;
  max-width: 100%;
  cursor: crosshair;
  border-radius: var(--radius);
  overflow: hidden;
}
.tp-hotspot-marker {
  position: absolute;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb),.7);
  border: 3px solid #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* Quiz navigation */
.tp-quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 700px;
  margin: 0 auto;
}

/* Quiz results */
.tp-results {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.tp-score-circle {
  width: 150px; height: 150px;
  margin: 0 auto 20px;
  position: relative;
}
.tp-score-circle svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.tp-score-circle__bg {
  fill: none;
  stroke: var(--border-l);
  stroke-width: 10;
}
.tp-score-circle__fg {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}
.tp-score-circle__text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: 800;
}

.tp-results__status {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.tp-results__status.pass { color: var(--success); }
.tp-results__status.fail { color: var(--danger); }

.tp-results__msg {
  color: var(--text-sec);
  margin-bottom: 24px;
}

/* Review list */
.tp-review-list {
  text-align: left;
  margin: 24px 0;
}
.tp-review-item {
  padding: 16px 20px;
  border: 1px solid var(--border-l);
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: var(--bg-card);
}
.tp-review-item__q {
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.tp-review-item__icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.tp-review-item__icon.correct { background: var(--success-l); color: var(--success); }
.tp-review-item__icon.incorrect { background: var(--danger-l); color: var(--danger); }
.tp-review-item__answers {
  font-size: .85rem;
  color: var(--text-sec);
  padding-left: 28px;
}
.tp-review-item__explanation {
  font-size: .82rem;
  color: var(--text-sec);
  font-style: italic;
  padding-left: 28px;
  margin-top: 6px;
}

/* ============================================================
   CONSENT FORM
   ============================================================ */
.tp-consent-doc {
  background: #fff;
  border: 1px solid #d4d0cb;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.03);
  max-width: 800px;
  margin: 0 auto 24px;
  max-height: 520px;
  overflow-y: auto;
  padding: 48px 56px;
  line-height: 1.85;
  font-size: .9rem;
  font-family: 'Times New Roman', 'Georgia', serif;
  color: #1a1a1a;
  position: relative;
}
.tp-consent-doc h1, .tp-consent-doc h2, .tp-consent-doc h3 {
  margin: 1.5em 0 .6em;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .85rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 6px;
  color: #333;
}
.tp-consent-doc h1 { font-size: 1rem; text-align: center; border-bottom: 2px solid #333; }
.tp-consent-doc p { margin-bottom: 1em; text-align: justify; }
.tp-consent-doc ol, .tp-consent-doc ul { margin-bottom: 1em; padding-left: 28px; }
.tp-consent-doc li { margin-bottom: .4em; }

.tp-scroll-indicator {
  text-align: center;
  color: var(--text-muted);
  font-size: .8rem;
  padding: 6px;
  background: linear-gradient(transparent, var(--bg) 80%);
  position: sticky;
  bottom: 0;
  margin: 0 -40px -32px;
  padding: 20px 40px 12px;
}

.tp-consent-sign {
  background: var(--bg-card);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  max-width: 800px;
  margin: 0 auto 24px;
}
.tp-consent-sign.disabled {
  opacity: .5;
  pointer-events: none;
}
.tp-consent-sign h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.tp-sig-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border-l);
}
.tp-sig-tab {
  padding: 8px 20px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-sec);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.tp-sig-tab:hover { color: var(--text); }
.tp-sig-tab.active {
  color: var(--accent-d);
  border-bottom-color: var(--accent);
}

.tp-sig-typed {
  font-family: 'Brush Script MT', 'Segoe Script', 'Dancing Script', cursive;
  font-size: 1.8rem;
  color: #1a1a6b;
  padding: 8px 0;
  min-height: 50px;
}

.tp-sig-canvas-wrap {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fafafa;
  position: relative;
}
.tp-sig-canvas-wrap canvas {
  display: block;
  cursor: crosshair;
  touch-action: none;
}
.tp-sig-canvas-placeholder {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-muted);
  font-size: .85rem;
  pointer-events: none;
}

.tp-consent-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0;
  font-size: .88rem;
  cursor: pointer;
}
.tp-consent-agree input[type="checkbox"] {
  margin-top: 3px;
  width: 18px; height: 18px;
  accent-color: var(--primary);
}

/* ============================================================
   CREDENTIALS / CME / CERTIFICATES
   ============================================================ */
.tp-cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.tp-cred-card {
  background: var(--bg-card);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: box-shadow var(--transition);
}
.tp-cred-card:hover { box-shadow: var(--shadow); }

.tp-cred-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent-d);
}
.tp-cred-icon svg { width: 22px; height: 22px; }

.tp-cred-info { flex: 1; min-width: 0; }
.tp-cred-info__title {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.tp-cred-info__sub {
  font-size: .8rem;
  color: var(--text-sec);
  margin-bottom: 8px;
}
.tp-cred-info__number {
  font-size: .78rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.tp-cred-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* CME Summary */
.tp-cme-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.tp-cme-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-l);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: center;
}
.tp-cme-chip__hours {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent-d);
}
.tp-cme-chip__type {
  font-size: .75rem;
  color: var(--text-sec);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 600;
}

/* Data table */
.tp-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tp-table {
  width: 100%;
  border-collapse: collapse;
}
.tp-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-sec);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.tp-table td {
  padding: 12px 16px;
  font-size: .88rem;
  border-bottom: 1px solid var(--border-l);
}
.tp-table tr:last-child td { border-bottom: none; }
.tp-table tr:hover td { background: var(--bg-hover); }

/* Certificate card */
.tp-cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.tp-cert-card {
  background: var(--bg-card);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  transition: box-shadow var(--transition);
}
.tp-cert-card:hover { box-shadow: var(--shadow); }
.tp-cert-card__icon {
  width: 48px; height: 48px;
  background: var(--success-l);
  color: var(--success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.tp-cert-card__icon svg { width: 24px; height: 24px; }
.tp-cert-card__title {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.tp-cert-card__date {
  font-size: .8rem;
  color: var(--text-sec);
  margin-bottom: 6px;
}
.tp-cert-card__score {
  font-size: .8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.tp-cert-card__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ============================================================
   MODAL
   ============================================================ */
.tp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 24px;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.tp-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.tp-modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform var(--transition);
}
.tp-modal-overlay.open .tp-modal {
  transform: translateY(0);
}

.tp-modal__header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-l);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tp-modal__header h3 {
  font-size: 1.1rem;
  font-weight: 700;
}
.tp-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-sec);
  padding: 4px;
}
.tp-modal__close:hover { color: var(--text); }
.tp-modal__close svg { width: 20px; height: 20px; }

.tp-modal__body {
  padding: 20px 24px;
}
.tp-modal__footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-l);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.tp-toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tp-toast {
  background: var(--bg-card);
  border: 1px solid var(--border-l);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px 20px 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 300px;
  max-width: 400px;
  animation: toastIn .3s ease;
  border-left: 4px solid var(--accent);
}
.tp-toast--success { border-left-color: var(--success); }
.tp-toast--error   { border-left-color: var(--danger); }
.tp-toast--warning { border-left-color: var(--warning); }
.tp-toast.exiting { animation: toastOut .3s ease forwards; }

.tp-toast__msg {
  flex: 1;
  font-size: .88rem;
}
.tp-toast__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  line-height: 1;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.tp-skeleton {
  background: linear-gradient(90deg, var(--border-l) 25%, #e8e4e0 50%, var(--border-l) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}
.tp-skeleton--text { height: 14px; width: 60%; margin-bottom: 10px; }
.tp-skeleton--title { height: 20px; width: 40%; margin-bottom: 12px; }
.tp-skeleton--card { height: 180px; border-radius: var(--radius-lg); }
.tp-skeleton--circle { border-radius: 50%; }

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

/* ============================================================
   EMPTY STATES
   ============================================================ */
.tp-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-sec);
}
.tp-empty__icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  color: var(--text-muted);
  opacity: .5;
}
.tp-empty__icon svg {
  width: 64px;
  height: 64px;
  max-width: 64px;
  max-height: 64px;
}
.tp-empty__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.tp-empty__msg {
  font-size: .88rem;
  margin-bottom: 20px;
}

/* ============================================================
   ERROR STATE
   ============================================================ */
.tp-error-state {
  text-align: center;
  padding: 48px 24px;
}
.tp-error-state__icon {
  width: 48px; height: 48px;
  margin: 0 auto 16px;
  color: var(--danger);
}
.tp-error-state__icon svg { width: 48px; height: 48px; }
.tp-error-state__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.tp-error-state__msg {
  font-size: .88rem;
  color: var(--text-sec);
  margin-bottom: 20px;
}

/* ============================================================
   SUCCESS ANIMATION
   ============================================================ */
.tp-success-anim {
  text-align: center;
  padding: 40px 0;
}
.tp-checkmark {
  width: 80px; height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--success-l);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleIn .4s ease;
}
.tp-checkmark svg {
  width: 40px; height: 40px;
  color: var(--success);
  animation: checkDraw .3s .2s ease both;
}

@keyframes scaleIn {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
@keyframes checkDraw {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   PAGE TRANSITION
   ============================================================ */
.tp-page-enter {
  animation: pageIn .25s ease;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --sidebar-w: 0px;
  }
  .tp-sidebar {
    transform: translateX(-100%);
    width: 260px;
    z-index: 200;
  }
  .tp-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
  }
  /* Never apply collapsed state on mobile - sidebar is a full drawer */
  .tp-sidebar.tp-sidebar--collapsed {
    width: 260px;
  }
  .tp-sidebar.tp-sidebar--collapsed .tp-sidebar__brand {
    flex-direction: row;
    padding: 14px 16px;
    gap: 10px;
  }
  .tp-sidebar.tp-sidebar--collapsed .tp-sidebar__brand > span,
  .tp-sidebar.tp-sidebar--collapsed .tp-sidebar__link span,
  .tp-sidebar.tp-sidebar--collapsed .tp-sidebar__section,
  .tp-sidebar.tp-sidebar--collapsed .tp-sidebar__divider,
  .tp-sidebar.tp-sidebar--collapsed .tp-sidebar__footer span,
  .tp-sidebar.tp-sidebar--collapsed .tp-sidebar__tenant-label {
    display: inline;
  }
  .tp-sidebar.tp-sidebar--collapsed .tp-sidebar__tenant {
    justify-content: flex-start;
    padding: 8px 16px;
  }
  .tp-sidebar.tp-sidebar--collapsed .tp-sidebar__link {
    justify-content: flex-start;
    padding: 10px 18px;
    border-left-width: 3px;
  }
  .tp-sidebar.tp-sidebar--collapsed .tp-sidebar__footer a {
    justify-content: flex-start;
    padding: 6px 0;
  }
  .tp-sidebar.tp-sidebar--collapsed .tp-sidebar__toggle { margin-left: auto; }
  .tp-main {
    margin-left: 0;
  }
  .tp-hamburger { display: block; }

  /* On mobile the sidebar toggle button becomes a close (X) button */
  .tp-sidebar__toggle .icon-collapse { display: none; }
  .tp-sidebar__toggle .icon-close    { display: block; }

  .tp-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 99;
    display: none;
  }
  .tp-sidebar-overlay.open { display: block; }

  .tp-content { padding: 16px; }

  .tp-welcome-banner { padding: 20px; }
  .tp-welcome-banner h1 { font-size: 1.2rem; }

  .tp-course-grid { grid-template-columns: 1fr; }
  .tp-cred-grid { grid-template-columns: 1fr; }
  .tp-cert-grid { grid-template-columns: 1fr; }

  .tp-reading,
  .tp-question-card {
    padding: 20px;
  }

  .tp-consent-doc {
    padding: 20px;
    max-height: 350px;
  }

  .tp-user-name,
  .tp-user-role { display: none; }

  .tp-stats-bar { grid-template-columns: repeat(2, 1fr); }

  .tp-login-header { padding: 0 16px; }
  .tp-login-header .logo-main { font-size: 16px; }
  .tp-login-card .card-body { padding: 32px 24px; }
}

@media (max-width: 480px) {
  .tp-stats-bar { grid-template-columns: 1fr; }
  .tp-tf-group { flex-direction: column; }
  .tp-quiz-dots { gap: 4px; }
  .tp-quiz-dot { width: 24px; height: 24px; font-size: .6rem; }
  .tp-login-card .card-body { padding: 28px 20px; }
  .tp-login-footer-inner { flex-direction: column; text-align: center; }
}

/* ============================================================
   PRINT (certificates)
   ============================================================ */
@media print {
  .tp-sidebar,
  .tp-header,
  .tp-toast-container,
  .tp-sidebar-overlay,
  .tp-notif-panel,
  .tp-footer { display: none !important; }
  .tp-main { margin: 0 !important; }
  .tp-content { padding: 0; max-width: 100%; }
  body { background: #fff; color: #000; }
  .tp-card, .tp-cert-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}


/* ============================================================
   Extended Feature Styles
   ============================================================ */

/* --- Extended CSS Variables --- */
:root {
  --border-light: var(--border-l);
  --primary-light: rgba(var(--primary-rgb), 0.08);
  --bg-light:      #FAF8F5;
  --text-primary:  var(--text);
  --text-secondary: var(--text-sec);
}


/* --- 1. Calendar View --- */
.tp-calendar { max-width: 900px; margin: 0 auto; }
/* Calendar nav */
.tp-calendar__nav { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tp-calendar__month { font-size: 1.2rem; font-weight: 700; color: var(--text); min-width: 180px; text-align: center; }
/* Calendar header row (Sun-Sat) */
.tp-cal-header, .tp-calendar__header { display: grid; grid-template-columns: repeat(7, 1fr); }
.tp-cal-header-cell { padding: 10px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-sec); background: var(--bg); border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.05em; }
/* Calendar grid (7-column) */
.tp-cal-grid, .tp-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
/* Calendar cells */
.tp-cal-cell { min-height: 90px; padding: 8px; border: 1px solid var(--border-l); cursor: pointer; transition: background 0.15s; position: relative; background: var(--bg-card); }
.tp-cal-cell:hover { background: rgba(139, 35, 50, 0.04); }
.tp-cal-cell--today { background: rgba(197, 165, 114, 0.08) !important; }
.tp-cal-cell--today .tp-cal-day { color: var(--accent-d); font-weight: 700; }
.tp-cal-cell--other { opacity: 0.35; }
.tp-cal-day { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
/* Calendar dots */
.tp-cal-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin: 1px; }
.tp-cal-dot--red, .tp-cal-dot.overdue { background: var(--danger); }
.tp-cal-dot--yellow, .tp-cal-dot.due-soon { background: var(--warning); }
.tp-cal-dot--blue, .tp-cal-dot--green, .tp-cal-dot.upcoming { background: var(--success); }
.tp-cal-dot__count { font-size: 10px; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
/* Calendar legend */
.tp-calendar__legend { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.tp-cal-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-sec); }
.tp-cal-event { font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Filter Bar (My Courses) --- */
.tp-filter-bar { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.tp-filter-btn {
  padding: 8px 18px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-sec); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
}
.tp-filter-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(139, 35, 50, 0.04); }
.tp-filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* --- Library Search --- */
.tp-library-search { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.tp-library-search svg { width: 20px; height: 20px; color: var(--text-muted); flex-shrink: 0; }
.tp-library-search input {
  flex: 1; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 14px; background: var(--bg-card); color: var(--text); transition: border-color 0.2s;
}
.tp-library-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(139, 35, 50, 0.1); }
.tp-library-search input::placeholder { color: var(--text-muted); }


/* --- 2. Grades Table --- */
.tp-grades-table { width: 100%; border-collapse: collapse; }
.tp-grades-table th { text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); border-bottom: 2px solid var(--border); background: var(--bg-light); }
.tp-grades-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-light); font-size: 13px; }
.tp-grades-table tr:hover { background: rgba(var(--accent-rgb), 0.03); }
.tp-grade-score { font-weight: 700; font-size: 14px; }
.tp-grade-pass { color: var(--success); }
.tp-grade-fail { color: var(--danger); }
.tp-grade-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.tp-grade-badge.pass { background: rgba(46, 125, 79, 0.1); color: var(--success); }
.tp-grade-badge.fail { background: rgba(211, 47, 47, 0.1); color: var(--danger); }


/* --- 3. Reference Library --- */
.tp-library-search { width: 100%; max-width: 500px; margin: 0 auto 24px; }
.tp-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tp-library-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; transition: all 0.2s; cursor: pointer; }
.tp-library-card:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
.tp-library-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-size: 24px; }
.tp-library-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.tp-library-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; }
.tp-library-meta { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); }
.tp-library-cat-header { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--primary); margin: 24px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--primary-light); }


/* --- 4. Notification Center --- */
.tp-notif-bell { position: relative; cursor: pointer; padding: 8px; border-radius: 8px; transition: background 0.15s; }
.tp-notif-bell:hover { background: rgba(0,0,0,0.05); }
.tp-notif-panel { position: absolute; top: 100%; right: 0; width: 360px; max-height: 480px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.15); z-index: 100; overflow: hidden; display: none; }
.tp-notif-panel.open { display: block; }
.tp-notif-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 700; }
.tp-notif-list { max-height: 400px; overflow-y: auto; }
.tp-notif-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-light); transition: background 0.15s; cursor: pointer; }
.tp-notif-item:hover { background: var(--bg-light); }
.tp-notif-item--unread { background: rgba(var(--accent-rgb), 0.04); }
.tp-notif-item__icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent-d); }
.tp-notif-item__icon svg { width: 16px; height: 16px; }
.tp-notif-item__body { flex: 1; min-width: 0; }
.tp-notif-item__title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.tp-notif-item__msg { font-size: 12px; color: var(--text-sec); margin-top: 2px; }
.tp-notif-item__time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.tp-notif-item__dismiss { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px; opacity: 0; transition: opacity 0.15s; }
.tp-notif-item:hover .tp-notif-item__dismiss { opacity: 1; }
.tp-notif-item__dismiss svg { width: 14px; height: 14px; }
.tp-notif-empty { padding: 40px; text-align: center; color: var(--text-muted); font-size: 13px; }
.tp-notif-wrap { position: relative; }


/* --- 5. Course TOC Sidebar --- */
/* Course Layout */
.tp-course-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }

/* TOC Sidebar -- Vertical Stepper Design */
.tp-course-toc { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; }
.tp-course-toc__header { padding: 16px 20px 12px; border-bottom: 1px solid var(--border-l); display: flex; justify-content: space-between; align-items: center; }
.tp-course-toc__header h4 { font-size: .85rem; font-weight: 700; color: var(--text); margin: 0; }
.tp-course-toc__list { padding: 8px 0; }
.tp-course-toc__item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; font-size: .85rem; color: var(--text-sec); cursor: pointer; transition: all .15s; text-decoration: none; position: relative; border-left: 3px solid transparent; }
.tp-course-toc__item:hover { background: rgba(0,0,0,.02); color: var(--text); }
.tp-course-toc__item--active { background: rgba(139,35,50,0.06); color: var(--primary); font-weight: 600; border-left-color: var(--primary); }
.tp-course-toc__item--done { color: var(--success); }
.tp-course-toc__item--done:hover { color: var(--success); }
.tp-course-toc__item--locked { opacity: 0.5; cursor: not-allowed; }
.tp-course-toc__item--locked:hover { color: var(--text-muted); }

/* TOC Circles */
.tp-course-toc__bullet { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-card); color: var(--text-muted); font-size: .7rem; font-weight: 700; flex-shrink: 0; transition: all .2s; }
.tp-course-toc__item--active .tp-course-toc__bullet { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 3px rgba(139,35,50,0.15); }
.tp-course-toc__item--done .tp-course-toc__bullet { background: #2E7D4F; border-color: #2E7D4F; color: #fff; }
.tp-course-toc__check { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #2E7D4F; color: #fff; flex-shrink: 0; }
.tp-course-toc__check svg { width: 14px; height: 14px; }

/* Connecting line between TOC items */
.tp-course-toc__item:not(:last-child)::after { content: ''; position: absolute; left: 31px; top: 36px; width: 2px; height: calc(100% - 16px); background: var(--border-l); }
.tp-course-toc__item--done:not(:last-child)::after { background: #2E7D4F; }

/* TOC item text */
.tp-course-toc__item span:last-child { line-height: 1.3; }

/* TOC toggle button + current-page label (hidden on desktop, visible on mobile/tablet) */
.tp-course-toc__toggle { display: none; }
.tp-course-toc__current { display: none; }

/* Tablet: narrower sidebar */
@media (max-width: 1024px) {
  .tp-course-layout { grid-template-columns: 220px 1fr; gap: 16px; }
}

/* Mobile + small tablet: collapsible TOC bar */
@media (max-width: 768px) {
  .tp-course-layout { grid-template-columns: 1fr; gap: 0; }
  .tp-course-toc { position: sticky; top: 56px; z-index: 20; max-height: none; border-radius: var(--radius-md); margin-bottom: 16px; overflow: hidden; }
  .tp-course-toc__header { cursor: pointer; user-select: none; padding: 12px 16px; }
  .tp-course-toc__header h4 { font-size: .8rem; }
  .tp-course-toc__toggle { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: none; color: var(--text-muted); transition: transform .2s; flex-shrink: 0; padding: 0; }
  .tp-course-toc.is-open .tp-course-toc__toggle { transform: rotate(180deg); }
  .tp-course-toc__list { max-height: 0; overflow: hidden; transition: max-height .25s ease; padding: 0; }
  .tp-course-toc.is-open .tp-course-toc__list { max-height: 600px; padding: 4px 0 8px; }
  .tp-course-toc__item { padding: 8px 16px; font-size: .8rem; gap: 10px; }
  .tp-course-toc__bullet { width: 22px; height: 22px; font-size: .65rem; }
  .tp-course-toc__check { width: 22px; height: 22px; }
  .tp-course-toc__check svg { width: 12px; height: 12px; }
  .tp-course-toc__item:not(:last-child)::after { left: 27px; }
  /* Show current page indicator in header */
  .tp-course-toc__current { display: inline; font-size: .75rem; color: var(--text-muted); font-weight: 400; margin-left: 6px; }
}


/* --- 6. Success Animation --- */
.tp-success-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.95); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; animation: tp-fade-in 0.3s ease; opacity: 0; pointer-events: none; }
.tp-success-overlay.open { opacity: 1; pointer-events: auto; }
@keyframes tp-fade-in { from { opacity: 0; } to { opacity: 1; } }
.tp-success-overlay__content { text-align: center; }
.tp-success-overlay__checkmark { width: 100px; height: 100px; margin-bottom: 24px; }
.tp-success-overlay__circle { fill: none; stroke: var(--success); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 283; animation: tp-circle-draw 0.6s ease 0.2s forwards; }
.tp-success-overlay__check { fill: none; stroke: var(--success); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: tp-check-draw 0.3s ease 0.7s forwards; }
@keyframes tp-circle-draw { to { stroke-dashoffset: 0; } }
@keyframes tp-check-draw { to { stroke-dashoffset: 0; } }
.tp-success-overlay__heading { font-size: 28px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.tp-success-overlay__score { font-size: 14px; color: var(--text-muted); margin-bottom: 4px; }
.tp-success-overlay__cert { font-size: 14px; color: var(--accent-d); margin-bottom: 4px; }
.tp-success-overlay__cme { font-size: 14px; color: var(--success); margin-bottom: 16px; }
.tp-success-overlay__btn { margin-top: 16px; }


/* --- 7. Admin Panel --- */
.tp-admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.tp-admin-tabs { display: flex; gap: 4px; background: var(--bg-light); border-radius: 8px; padding: 4px; margin-bottom: 20px; }
.tp-admin-tab { padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; color: var(--text-muted); border: none; background: none; }
.tp-admin-tab.active { background: var(--bg-card); color: var(--primary); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.tp-admin-table { width: 100%; border-collapse: collapse; }
.tp-admin-table th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); border-bottom: 2px solid var(--border); }
.tp-admin-table td { padding: 10px 14px; border-bottom: 1px solid var(--border-light); font-size: 13px; }
.tp-admin-table tr:hover { background: rgba(var(--accent-rgb), 0.03); }
.tp-admin-stat { text-align: center; padding: 20px; }
.tp-admin-stat-value { font-size: 32px; font-weight: 800; color: var(--primary); }
.tp-admin-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.tp-review-card { background: var(--bg-card); border: 1px solid var(--warning); border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.tp-review-actions { display: flex; gap: 8px; margin-top: 12px; }


/* --- 8. Focus Trap + Accessibility --- */
.tp-btn:focus-visible, .tp-sidebar__link:focus-visible, .tp-option:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tp-skip-link { position: absolute; top: -100px; left: 16px; background: var(--primary); color: #fff; padding: 8px 16px; border-radius: 6px; z-index: 10000; font-size: 13px; transition: top 0.2s; }
.tp-skip-link:focus { top: 16px; }
.tp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }


/* --- 9. Mobile Sidebar Drawer (consolidated into main responsive block above) --- */


/* --- 10. Print Styles (consolidated with block at line ~2460) --- */

/* ─── Education Center Search ─── */
.tp-header__center { flex: 1; max-width: 500px; margin: 0 16px; }
.tp-search-wrap { position: relative; }
.tp-search-bar { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 12px; transition: border-color .15s, box-shadow .15s; }
.tp-search-bar:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(139,35,50,0.1); }
.tp-search-bar svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.tp-search-bar input { flex: 1; border: none; background: transparent; outline: none; font-size: .85rem; color: var(--text); min-width: 0; }
.tp-search-bar input::placeholder { color: var(--text-muted); }
.tp-search-kbd { font-size: .65rem; padding: 2px 6px; border-radius: 3px; background: var(--border-l); color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; }
.tp-search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 1000; max-height: 400px; overflow-y: auto; }
.tp-search-cat { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); padding: 10px 14px 4px; }
.tp-search-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; text-decoration: none; transition: background .1s; cursor: pointer; }
.tp-search-item:hover { background: var(--bg); }
.tp-search-item__icon { color: var(--primary); flex-shrink: 0; }
.tp-search-item__icon svg { width: 18px; height: 18px; }
.tp-search-item__text { flex: 1; min-width: 0; }
.tp-search-item__title { display: block; font-weight: 600; font-size: .85rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-search-item__sub { display: block; font-size: .75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-search-see-all { display: block; text-align: center; padding: 10px; font-size: .8rem; color: var(--primary); text-decoration: none; border-top: 1px solid var(--border-l); font-weight: 600; }
.tp-search-see-all:hover { background: var(--bg); }
/* Course image thumbnails in search */
.tp-search-item__img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--bg); }
.tp-search-item__icon--page { width: 28px; height: 28px; border-radius: 6px; background: color-mix(in srgb, var(--primary) 10%, transparent); display: flex; align-items: center; justify-content: center; }
.tp-search-item__icon--page svg { width: 14px; height: 14px; color: var(--primary); }
/* Full results page */
.tp-search-result { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; text-decoration: none; transition: border-color .15s, transform .1s; }
.tp-search-result:hover { border-color: var(--primary); transform: translateX(2px); }
.tp-search-result__icon { color: var(--primary); flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 8%, transparent); display: flex; align-items: center; justify-content: center; }
.tp-search-result__icon svg { width: 20px; height: 20px; }
.tp-search-result__icon--page { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.tp-search-result__icon--page svg { color: var(--accent); }
.tp-search-result__text { flex: 1; min-width: 0; }
.tp-search-result__title { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-search-result__sub { font-size: .8rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-search-result__badge { font-size: .7rem; padding: 3px 10px; border-radius: 10px; background: var(--bg); color: var(--text-sec); white-space: nowrap; font-weight: 600; text-transform: capitalize; }
.tp-search-item__img + .tp-search-result__icon { display: none; }
/* Mobile search button (hidden on desktop) */
.tp-mobile-search-btn { display: none; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 6px; border-radius: var(--radius); transition: color .15s; }
.tp-mobile-search-btn:hover { color: var(--text); }
.tp-mobile-search-btn svg { width: 20px; height: 20px; }

/* Mobile search overlay */
.tp-mobile-search-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000;
  background: var(--bg-card, #1a1f2e); display: flex; flex-direction: column;
  animation: tp-float-in .2s ease-out;
}
.tp-mobile-search-overlay__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.tp-mobile-search-overlay__bar svg { width: 20px; height: 20px; color: var(--text-muted); flex-shrink: 0; }
.tp-mobile-search-overlay__bar input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 1rem; color: var(--text); min-width: 0;
}
.tp-mobile-search-overlay__bar input::placeholder { color: var(--text-muted); }
.tp-mobile-search-overlay__bar button {
  background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px;
}
.tp-mobile-search-overlay__results {
  flex: 1; overflow-y: auto; padding: 0;
}
.tp-mobile-search-overlay__results .tp-search-cat { padding: 12px 16px 6px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
.tp-mobile-search-overlay__results .tp-search-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; transition: background .1s; }
.tp-mobile-search-overlay__results .tp-search-item:active { background: rgba(139,35,50,0.08); }

@media (max-width: 768px) {
  .tp-header__center { display: none; }
  .tp-mobile-search-btn { display: flex; }
}

/* ─── Filter Chips ─── */
.tp-filter-chip { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-sec); font-size: .8rem; font-weight: 500; cursor: pointer; transition: all .15s; }
.tp-filter-chip:hover { border-color: var(--primary-l); color: var(--primary); }
.tp-filter-chip--active { background: var(--primary); color: #fff; border-color: var(--primary); }
.tp-filter-chip--active:hover { background: var(--primary-l); border-color: var(--primary-l); }

/* ═══════════════════════════════════════════════════
   COURSE CONTENT TEMPLATE SYSTEM
   Professional, branded course content styling
   ═══════════════════════════════════════════════════ */

/* Course Header */
.course-header { background: linear-gradient(135deg, var(--primary-d), var(--primary)); color: #fff; padding: 32px; border-radius: var(--radius-lg); margin-bottom: 24px; position: relative; overflow: hidden; }
.course-header::after { content: ''; position: absolute; right: -20px; top: -20px; width: 140px; height: 140px; background: rgba(255,255,255,0.05); border-radius: 50%; }
.course-header h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 8px; }
.course-header .course-meta { font-size: .85rem; opacity: .85; display: flex; gap: 16px; flex-wrap: wrap; }
.course-header .course-meta span { display: inline-flex; align-items: center; gap: 4px; }
.course-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.15); padding: 4px 12px; border-radius: 20px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }

/* Learning Objectives */
.course-objectives { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 24px; }
.course-objectives h2 { font-size: 1rem; font-weight: 700; color: var(--primary); margin: 0 0 12px; }
.course-objectives ul { list-style: none; padding: 0; margin: 0; }
.course-objectives li { padding: 6px 0; padding-left: 28px; position: relative; color: var(--text); font-size: .9rem; line-height: 1.5; }
.course-objectives li::before { content: ''; position: absolute; left: 0; top: 10px; width: 18px; height: 18px; background: var(--success); border-radius: 50%; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; }

/* Content Sections */
.course-section { margin-bottom: 28px; }
.course-section h2 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--border-l); }
.course-section h3 { font-size: 1rem; font-weight: 600; color: var(--text); margin: 16px 0 8px; }
.course-section p { color: var(--text-sec); line-height: 1.8; margin: 0 0 12px; font-size: .9rem; }
.course-section ul, .course-section ol { color: var(--text-sec); line-height: 1.8; padding-left: 20px; margin: 0 0 12px; font-size: .9rem; }
.course-section li { margin-bottom: 4px; }
.course-section strong { color: var(--text); }

/* Callout Boxes */
.callout { padding: 16px 20px; border-radius: var(--radius); margin: 16px 0; display: flex; gap: 12px; align-items: flex-start; font-size: .875rem; line-height: 1.6; }
.callout::before { content: ''; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; }
.callout--info { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E40AF; }
.callout--info::before { background: #3B82F6; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01' stroke='%23EFF6FF' stroke-width='2'/%3E%3C/svg%3E") center/24px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01' stroke='%23EFF6FF' stroke-width='2'/%3E%3C/svg%3E") center/24px no-repeat; }
.callout--warning { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }
.callout--warning::before { background: #F59E0B; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cpath d='M12 9v4M12 17h.01' stroke='%23FFFBEB' stroke-width='2'/%3E%3C/svg%3E") center/24px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cpath d='M12 9v4M12 17h.01' stroke='%23FFFBEB' stroke-width='2'/%3E%3C/svg%3E") center/24px no-repeat; }
.callout--danger { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.callout--danger::before { background: #EF4444; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6' stroke='%23FEF2F2' stroke-width='2'/%3E%3C/svg%3E") center/24px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6' stroke='%23FEF2F2' stroke-width='2'/%3E%3C/svg%3E") center/24px no-repeat; }
.callout--tip { background: #F0FDF4; border: 1px solid #BBF7D0; color: #166534; }
.callout--tip::before { background: #22C55E; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2a7 7 0 017 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 01-1 1H9a1 1 0 01-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 017-7z'/%3E%3Cpath d='M9 21h6M10 17h4' stroke='%23F0FDF4' stroke-width='1.5'/%3E%3C/svg%3E") center/24px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2a7 7 0 017 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 01-1 1H9a1 1 0 01-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 017-7z'/%3E%3Cpath d='M9 21h6M10 17h4' stroke='%23F0FDF4' stroke-width='1.5'/%3E%3C/svg%3E") center/24px no-repeat; }
.callout--regulation { background: #F5F3FF; border: 1px solid #DDD6FE; color: #5B21B6; }
.callout--regulation::before { background: #8B5CF6; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8' stroke='%23F5F3FF' stroke-width='1.5'/%3E%3C/svg%3E") center/24px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8' stroke='%23F5F3FF' stroke-width='1.5'/%3E%3C/svg%3E") center/24px no-repeat; }

/* Key Takeaways Grid */
.takeaway-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.takeaway-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; }
.takeaway-card__icon { width: 40px; height: 40px; margin: 0 auto 8px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.takeaway-card__icon svg { width: 20px; height: 20px; }
.takeaway-card__text { font-size: .85rem; color: var(--text); font-weight: 500; line-height: 1.4; }

/* Summary Box */
.course-summary { background: linear-gradient(135deg, #F8F6F4, #FAF6F2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin: 24px 0; }
.course-summary h2 { font-size: 1.1rem; font-weight: 700; color: var(--primary); margin: 0 0 16px; }

/* References */
.course-references { margin-top: 24px; padding-top: 20px; border-top: 2px solid var(--border-l); }
.course-references h2 { font-size: .9rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 12px; }
.course-references ul { list-style: none; padding: 0; }
.course-references li { padding: 4px 0; font-size: .85rem; }
.course-references a { color: var(--primary); text-decoration: none; }
.course-references a:hover { text-decoration: underline; }

/* Stat Grid (for showing numbers/data) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; }
.stat-card__value { font-size: 1.5rem; font-weight: 800; color: var(--primary); }
.stat-card__label { font-size: .75rem; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }

/* External Course Card */
.external-course-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; text-align: center; margin: 24px 0; }
.external-course-card__icon { width: 64px; height: 64px; margin: 0 auto 16px; background: var(--primary); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; }
.external-course-card__icon svg { width: 32px; height: 32px; }
.external-course-card h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.external-course-card p { color: var(--text-sec); font-size: .9rem; margin: 0 0 20px; line-height: 1.6; }
.external-course-card .tp-btn { font-size: 1rem; padding: 12px 32px; }

/* Process/Steps */
.process-steps { counter-reset: step; margin: 16px 0; }
.process-step { display: flex; gap: 16px; padding: 12px 0; position: relative; }
.process-step::before { counter-increment: step; content: counter(step); width: 32px; height: 32px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.process-step__content { flex: 1; }
.process-step__content h4 { font-weight: 600; color: var(--text); margin: 0 0 4px; font-size: .9rem; }
.process-step__content p { color: var(--text-sec); margin: 0; font-size: .85rem; line-height: 1.5; }

/* Two Column Layout */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
@media (max-width: 600px) { .two-col { grid-template-columns: 1fr; } }

/* Comparison Table */
.comparison-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .85rem; }
.comparison-table th { background: var(--primary); color: #fff; padding: 10px 14px; text-align: left; font-weight: 600; }
.comparison-table td { padding: 10px 14px; border-bottom: 1px solid var(--border-l); color: var(--text-sec); }
.comparison-table tr:nth-child(even) td { background: rgba(0,0,0,0.02); }
.comparison-table .check { color: var(--success); font-weight: 700; }
.comparison-table .cross { color: var(--danger); font-weight: 700; }

/* ─── Library Search ─── */
.tp-lib-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 16px;
  margin-bottom: 12px;
}
.tp-lib-search svg { flex-shrink: 0; color: var(--text-muted); }
.tp-lib-search input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: .95rem; color: var(--text);
}
.tp-lib-search input::placeholder { color: var(--text-muted); }
.tp-lib-search__clear {
  background: none; border: none; font-size: 1.2rem; color: var(--text-muted);
  cursor: pointer; padding: 4px 8px;
}

/* Result Count */
.tp-lib-result-count {
  font-size: .8rem; color: var(--text-muted); margin-bottom: 16px; padding-left: 4px;
}

/* Filter Bar */
.tp-lib-filters { margin-bottom: 20px; }
.tp-lib-filter-group { margin-bottom: 12px; }
.tp-lib-filter-group label { font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; display: block; }
.tp-lib-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-lib-chip {
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-sec); font-size: .8rem; font-weight: 500;
  cursor: pointer; transition: all .15s;
}
.tp-lib-chip:hover { border-color: var(--primary); color: var(--primary); }
.tp-lib-chip--active { background: var(--primary); color: #fff; border-color: var(--primary); }
.tp-lib-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-lib-select {
  padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); font-size: .8rem; cursor: pointer;
}

/* Featured Section */
.tp-lib-featured { margin-bottom: 28px; }
.tp-lib-featured-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tp-lib-section-title { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0; }

/* Carousel */
.tp-lib-carousel { position: relative; display: flex; align-items: center; gap: 8px; }
.tp-lib-carousel-viewport { flex: 1; overflow: hidden; border-radius: 12px; }
.tp-lib-carousel-track { display: flex; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.tp-lib-carousel-slide { flex: 0 0 100%; min-width: 0; }
.tp-lib-carousel-slide .tp-lib-card { margin: 0; border-radius: 12px; }

/* Arrow buttons */
.tp-lib-carousel-btn {
  flex-shrink: 0; width: 36px; height: 36px;
  background: var(--bg-card); border: 1px solid var(--border-l);
  border-radius: 50%; color: var(--text); font-size: 1.4rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  padding: 0;
}
.tp-lib-carousel-btn:hover { background: var(--bg-hover, #f1f5f9); border-color: var(--accent, #6366f1); }
.tp-lib-carousel-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Dots */
.tp-lib-carousel-dots { display: flex; gap: 6px; align-items: center; }
.tp-lib-carousel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-l, #e2e8f0); border: none; padding: 0;
  cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.tp-lib-carousel-dot--active { background: var(--accent, #6366f1); transform: scale(1.3); }
.tp-lib-carousel-dot:hover:not(.tp-lib-carousel-dot--active) { background: var(--text-muted, #94a3b8); }

/* Category Sections */
.tp-lib-category { margin-bottom: 24px; }
.tp-lib-category__header {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 0; margin-bottom: 12px; border-bottom: 1px solid var(--border-l);
}
.tp-lib-category__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tp-lib-category__header h3 { font-size: .95rem; font-weight: 700; color: var(--text); margin: 0; }
.tp-lib-category__count { font-size: .75rem; color: var(--text-muted); margin-left: auto; }
.tp-lib-category__chevron { width: 16px; height: 16px; transition: transform .2s; color: var(--text-muted); }
.tp-lib-category__header[aria-expanded="false"] .tp-lib-category__chevron { transform: rotate(-90deg); }
.tp-lib-category__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tp-lib-category__more {
  display: block; margin-top: 8px; font-size: .8rem; color: var(--primary); font-weight: 600;
  background: none; border: none; cursor: pointer; padding: 4px 0;
}
.tp-lib-category__more:hover { text-decoration: underline; }

/* ─── Library Course Cards (Image Style) ─── */
.tp-lib-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; cursor: pointer; transition: all .15s;
}
.tp-lib-card:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); }
.tp-lib-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tp-lib-card__img { position: relative; height: 160px; overflow: hidden; background: var(--bg); }
.tp-lib-card__img img { width: 100%; height: 100%; object-fit: cover; }
.tp-lib-card__img-icon { color: rgba(255,255,255,0.25); }
.tp-lib-card__img-icon svg { width: 48px; height: 48px; }
.tp-lib-card__duration {
  position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.7); color: #fff;
  font-size: .7rem; font-weight: 600; padding: 3px 8px; border-radius: 4px;
}
.tp-lib-card__badge {
  position: absolute; top: 8px; right: 8px; font-size: .65rem; font-weight: 700;
  padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .5px;
}
.tp-lib-card__badge--external { background: #1D4ED8; color: #fff; }
.tp-lib-card__badge--completed { background: #16A34A; color: #fff; }
.tp-lib-card__badge--progress { background: #D97706; color: #fff; }
.tp-lib-card__badge--consent { background: #7C3AED; color: #fff; }
.tp-lib-card__badge--overdue { background: #dc2626; color: #fff; }
.tp-lib-card__badge--due-soon { background: #f59e0b; color: #fff; }
.tp-lib-card__badge--renewal { background: #7c3aed; color: #fff; }
.tp-lib-card__ext-badge { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); color: #fff; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 4px; }
.tp-lib-card__body { padding: 14px; }
.tp-lib-card__cat {
  display: inline-block; font-size: .65rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--primary); margin-bottom: 6px;
}
.tp-lib-card__title { font-size: .9rem; font-weight: 700; color: var(--text); margin: 0 0 6px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tp-lib-card__desc {
  font-size: .8rem; color: var(--text-sec); line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tp-lib-card__meta { display: flex; gap: 12px; margin-top: 10px; font-size: .75rem; color: var(--text-muted); }
.tp-lib-card__meta span { display: flex; align-items: center; gap: 4px; }
.tp-lib-card__meta svg { width: 12px; height: 12px; }
.tp-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tp-library-section { margin-bottom: 28px; }
.tp-library-section__title { font-size: .95rem; font-weight: 700; color: var(--text); margin: 0 0 12px; }

/* Page Navigation */
.tp-page-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-card); color: var(--text-muted); font-size: .75rem; font-weight: 600; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; justify-content: center; }
.tp-page-dot:hover { border-color: var(--primary); color: var(--primary); }
.tp-page-dot--active { background: var(--primary); border-color: var(--primary); color: #fff; }
.tp-page-dot--viewed { border-color: var(--success); color: var(--success); }
.tp-page-dot--viewed.tp-page-dot--active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* TOC bullet numbers */
.tp-course-toc__bullet { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--border-l); color: var(--text-muted); font-size: .7rem; font-weight: 600; flex-shrink: 0; }
.tp-course-toc__item--active .tp-course-toc__bullet { background: var(--primary); color: #fff; }
.tp-course-toc__item--done .tp-course-toc__bullet { background: var(--success); color: #fff; }

/* Completed Course Card Overlay */
.tp-lib-card--completed { position: relative; }
/* ── Course card hover panel ───────────────────────────── */
.tp-card-hover {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.93);
  color: #f1f5f9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
}
.tp-lib-card:hover .tp-card-hover,
.tp-lib-card:focus-within .tp-card-hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.tp-card-hover__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tp-card-hover__row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #cbd5e1;
}
.tp-card-hover__row svg { flex-shrink: 0; opacity: 0.7; }
.tp-card-hover__prereqs {
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 8px;
}
.tp-card-hover__prereq-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #94a3b8;
  margin-bottom: 5px;
}
.tp-card-hover__prereq-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #e2e8f0;
  line-height: 1.4;
  margin-bottom: 2px;
}
.tp-card-hover__prereq-item svg { flex-shrink: 0; color: #f59e0b; }
.tp-card-hover__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #991b1b;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 6px;
  margin-top: 8px;
  letter-spacing: 0.3px;
}

.tp-lib-card--completed .tp-lib-card__img { position: relative; }
.tp-lib-card--completed .tp-lib-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(22, 163, 74, 0.15);
  z-index: 1;
}
.tp-lib-card__complete-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2E7D4F;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(46,125,79,0.4);
}
.tp-lib-card__complete-badge svg { width: 20px; height: 20px; }
.tp-lib-card--completed .tp-lib-card__body { border-left: 3px solid #2E7D4F; }
.tp-lib-card__score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .75rem;
  font-weight: 600;
  color: #2E7D4F;
  background: rgba(46,125,79,0.1);
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 6px;
}
.tp-lib-card__score svg { width: 14px; height: 14px; stroke: #2E7D4F; }
.tp-lib-card__progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.tp-lib-card__progress .tp-progress { flex: 1; }
.tp-lib-card__progress .tp-progress-label { font-size: .75rem; font-weight: 600; color: var(--text-sec); }

/* Completion Code Display */
.tp-completion-code {
  background: linear-gradient(135deg, #2E7D4F, #059669);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  margin: 24px 0;
}
.tp-completion-code__number {
  font-family: var(--font-mono, monospace);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 3px;
  margin: 12px 0;
  padding: 12px 24px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius);
  display: inline-block;
}
.tp-completion-code__label {
  font-size: .85rem;
  opacity: .85;
  margin-bottom: 4px;
}

/* ============================================================
   COURSE CREATOR WIZARD
   ============================================================ */

.tp-wizard {
  max-width: 900px;
  margin: 0 auto;
}

/* Step indicator */
.tp-wizard__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  padding: 0 16px;
}

.tp-wizard__step {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: default;
}

.tp-wizard__step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  border: 2px solid var(--border);
  color: var(--text-muted);
  background: var(--bg-card);
  transition: all var(--transition);
  flex-shrink: 0;
}

.tp-wizard__step--active .tp-wizard__step-circle {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), .3);
}

.tp-wizard__step--completed .tp-wizard__step-circle {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}

.tp-wizard__step--clickable {
  cursor: pointer;
}
.tp-wizard__step--clickable:hover .tp-wizard__step-circle {
  transform: scale(1.05);
}

.tp-wizard__step-label {
  font-size: .7rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 4px;
  white-space: nowrap;
  display: none;
}

.tp-wizard__step--active .tp-wizard__step-label {
  color: var(--primary);
  font-weight: 600;
}

.tp-wizard__step--completed .tp-wizard__step-label {
  color: var(--success);
}

.tp-wizard__step-line {
  width: 40px;
  height: 2px;
  background: var(--border);
  flex-shrink: 0;
  transition: background var(--transition);
}

.tp-wizard__step--completed + .tp-wizard__step-line,
.tp-wizard__step-line--done {
  background: var(--success);
}

@media (min-width: 768px) {
  .tp-wizard__step-label {
    display: block;
  }
  .tp-wizard__step {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .tp-wizard__steps {
    gap: 0;
  }
  .tp-wizard__step-line {
    width: 48px;
    margin-top: -14px;
  }
}

/* Wizard content area */
.tp-wizard__content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  min-height: 300px;
}

.tp-wizard__content h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-l);
}

/* Wizard navigation */
.tp-wizard__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border-l);
}

.tp-wizard__nav-left,
.tp-wizard__nav-right {
  display: flex;
  gap: 8px;
}

/* Form groups (reuse existing but add wizard-specific tweaks) */
.tp-wizard .tp-form-group {
  margin-bottom: 16px;
}

.tp-wizard .tp-form-group label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.tp-wizard .tp-form-group label .required {
  color: var(--danger);
}

.tp-wizard .tp-form-input,
.tp-wizard .tp-form-select,
.tp-wizard .tp-form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--text);
  background: var(--bg-card);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.tp-wizard .tp-form-input:focus,
.tp-wizard .tp-form-select:focus,
.tp-wizard .tp-form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.tp-wizard .tp-form-textarea {
  min-height: 100px;
  resize: vertical;
}

.tp-wizard .tp-form-help {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.tp-wizard .tp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .tp-wizard .tp-form-row {
    grid-template-columns: 1fr;
  }
}

/* Drop zone */
.tp-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg);
}

.tp-dropzone:hover,
.tp-dropzone--active {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), .04);
}

.tp-dropzone__icon {
  font-size: 2rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.tp-dropzone__text {
  font-size: .9rem;
  color: var(--text-sec);
  margin-bottom: 4px;
}

.tp-dropzone__hint {
  font-size: .75rem;
  color: var(--text-muted);
}

.tp-dropzone__file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
  border-radius: var(--radius);
  margin-top: 12px;
  text-align: left;
}

.tp-dropzone__file-info {
  flex: 1;
  min-width: 0;
}

.tp-dropzone__file-name {
  font-weight: 600;
  font-size: .85rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tp-dropzone__file-meta {
  font-size: .75rem;
  color: var(--text-muted);
}

/* Content type tabs */
.tp-content-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}

.tp-content-tab {
  padding: 10px 20px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all var(--transition);
}

.tp-content-tab:hover {
  color: var(--text);
}

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

/* Quiz builder */
.tp-quiz-question-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}

.tp-quiz-question-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tp-quiz-question-card__number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tp-quiz-question-card__text {
  flex: 1;
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
}

.tp-quiz-question-card__type {
  font-size: .7rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--accent-subtle);
  color: var(--accent-d);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.tp-quiz-question-card__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.tp-quiz-question-card__actions .tp-btn {
  padding: 4px 6px;
}

/* Question inline form */
.tp-question-form {
  background: var(--bg-card);
  border: 2px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.tp-question-form__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.tp-question-form__option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tp-question-form__option input[type="text"] {
  flex: 1;
}

.tp-question-form__option input[type="radio"],
.tp-question-form__option input[type="checkbox"] {
  flex-shrink: 0;
}

/* Role checkboxes */
.tp-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.tp-role-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  font-size: .85rem;
}

.tp-role-checkbox:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
}

.tp-role-checkbox input:checked + span {
  font-weight: 600;
  color: var(--primary);
}

.tp-role-checkbox input {
  flex-shrink: 0;
}

/* Quick select buttons */
.tp-quick-select {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.tp-quick-select .tp-btn {
  font-size: .75rem;
  padding: 4px 12px;
}

/* Toggle switch */
.tp-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-l);
}

.tp-toggle-row__label {
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
}

.tp-toggle-row__desc {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.tp-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.tp-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.tp-toggle__slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition);
}

.tp-toggle__slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.tp-toggle input:checked + .tp-toggle__slider {
  background: var(--primary);
}

.tp-toggle input:checked + .tp-toggle__slider::before {
  transform: translateX(20px);
}

/* Slider input */
.tp-slider-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tp-slider-wrap input[type="range"] {
  flex: 1;
  accent-color: var(--primary);
  height: 6px;
}

.tp-slider-wrap__value {
  font-weight: 700;
  font-size: .9rem;
  color: var(--primary);
  min-width: 40px;
  text-align: right;
}

/* Preview summary */
.tp-preview-section {
  margin-bottom: 20px;
}

.tp-preview-section__title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}

.tp-preview-section__content {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 16px;
}

.tp-preview-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: .85rem;
  border-bottom: 1px solid var(--border-l);
}

.tp-preview-row:last-child {
  border-bottom: none;
}

.tp-preview-row__label {
  color: var(--text-muted);
  font-weight: 500;
}

.tp-preview-row__value {
  color: var(--text);
  font-weight: 600;
}

/* Rich text toolbar */
.tp-rich-toolbar {
  display: flex;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg);
}

.tp-rich-toolbar .tp-btn {
  padding: 4px 8px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Upload progress */
.tp-upload-progress {
  width: 100%;
  height: 6px;
  background: var(--border-l);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}

.tp-upload-progress__bar {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width .3s ease;
}

/* Conditional sections that show/hide */
.tp-wizard__conditional {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-l);
}

.tp-wizard__conditional--hidden {
  display: none;
}

/* ============================================================
   ADMIN PANEL v2 — Comprehensive Instructor/Admin Panel
   ============================================================ */

/* --- Admin Page Layout --- */
.adm-page {
  max-width: 1200px;
  margin: 0 auto;
}
.adm-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.adm-page-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text);
}
.adm-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Admin Tabs --- */
.adm-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.adm-tab {
  padding: 10px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-sec);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.adm-tab:hover {
  color: var(--primary);
}
.adm-tab--active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

/* --- Admin Status Badges --- */
.adm-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.adm-badge--assigned { background: rgba(59, 130, 246, .12); color: #3B82F6; }
.adm-badge--in-progress { background: rgba(245, 158, 11, .12); color: #D97706; }
.adm-badge--completed { background: rgba(34, 197, 94, .12); color: #16A34A; }
.adm-badge--overdue { background: rgba(239, 68, 68, .12); color: #EF4444; }
.adm-badge--waived { background: rgba(107, 114, 128, .12); color: #6B7280; }

/* --- Admin Cards --- */
.adm-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-l);
  overflow: hidden;
}
.adm-card__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-l);
}
.adm-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.adm-card__body {
  padding: 16px 20px;
}

/* --- Stat Cards --- */
.adm-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.adm-stat-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-l);
  padding: 20px;
  text-align: center;
}
.adm-stat-card--danger {
  border-color: rgba(239, 68, 68, .3);
}
.adm-stat-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.adm-stat-card__icon svg { width: 22px; height: 22px; }
.adm-stat-card__icon--courses { background: rgba(139, 35, 50, .1); color: var(--primary); }
.adm-stat-card__icon--students { background: rgba(59, 130, 246, .1); color: #3B82F6; }
.adm-stat-card__icon--compliance { background: rgba(34, 197, 94, .1); color: #22C55E; }
.adm-stat-card__icon--overdue { background: rgba(239, 68, 68, .1); color: #EF4444; }
.adm-stat-card__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.adm-stat-card__label {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* --- Dashboard Grid --- */
.adm-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* --- Pending Items --- */
.adm-pending-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  color: var(--text);
  font-size: .9rem;
  text-decoration: none;
  border-bottom: 1px solid var(--border-l);
  transition: color var(--transition);
}
.adm-pending-item:last-child { border-bottom: none; }
.adm-pending-item:hover { color: var(--primary); text-decoration: none; }
.adm-pending-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.adm-pending-item__dot--warn { background: #F59E0B; }
.adm-pending-item__dot--info { background: #3B82F6; }
.adm-pending-item__dot--danger { background: #EF4444; }

/* --- Activity Feed --- */
.adm-activity-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-l);
}
.adm-activity-item:last-child { border-bottom: none; }
.adm-activity-item__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-l));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.adm-activity-item__text {
  font-size: .85rem;
  color: var(--text-sec);
  line-height: 1.4;
}
.adm-activity-item__text strong { color: var(--text); }
.adm-activity-item__text em { color: var(--primary); font-style: normal; }
.adm-activity-item__time {
  display: block;
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.adm-empty-hint {
  color: var(--text-muted);
  font-size: .9rem;
  text-align: center;
  padding: 20px 0;
}

/* --- Filter Bar --- */
.adm-filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.adm-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  font-size: .85rem;
  cursor: pointer;
  min-width: 140px;
}
.adm-select--full { width: 100%; }
.adm-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .15); }
.adm-search-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  flex: 1;
  min-width: 200px;
}
.adm-search-input svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.adm-search-input input {
  border: none;
  outline: none;
  background: none;
  color: var(--text);
  width: 100%;
  font-size: .85rem;
}
.adm-input {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  font-size: .85rem;
  width: 100%;
  max-width: 300px;
}
.adm-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .15); }
.adm-input--inline { width: auto; flex: 1; max-width: none; }
.adm-label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.adm-label--inline {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.adm-form-group { margin-bottom: 16px; }
.adm-help-text {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* --- Course Grid --- */
.adm-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.adm-course-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-l);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.adm-course-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.adm-course-card__cover {
  height: 140px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-hover);
  position: relative;
}
.adm-course-card__status {
  position: absolute;
  top: 10px;
  right: 10px;
}
.adm-course-card__body {
  padding: 14px 16px;
}
.adm-course-card__cat {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.adm-course-card__title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.3;
  text-decoration: none;
}
.adm-course-card__title:hover { color: var(--primary); text-decoration: none; }
.adm-course-card__stats {
  display: flex;
  gap: 12px;
  font-size: .78rem;
  color: var(--text-muted);
}
.adm-course-card__stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.adm-course-card__stats svg { width: 14px; height: 14px; }
.adm-course-card__actions {
  display: flex;
  gap: 4px;
  padding: 8px 16px 12px;
  border-top: 1px solid var(--border-l);
}

/* --- Tables --- */
.adm-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.adm-table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--text-sec);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.adm-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-l);
  color: var(--text);
  vertical-align: middle;
}
.adm-table tbody tr:hover {
  background: var(--bg-hover);
}
.adm-table a { color: var(--primary); }
.adm-table a:hover { text-decoration: underline; }
.adm-table--compact th,
.adm-table--compact td { padding: 6px 10px; }
.adm-sortable {
  cursor: pointer;
  user-select: none;
}
.adm-sortable:hover { color: var(--primary); }
.adm-actions-cell {
  display: flex;
  gap: 4px;
}

/* --- Bulk Toolbar --- */
.adm-bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(var(--primary-rgb), .06);
  border: 1px solid rgba(var(--primary-rgb), .15);
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: .85rem;
  color: var(--primary);
  font-weight: 600;
}

/* --- Bar Chart (CSS only) --- */
.adm-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 180px;
  padding: 10px 0;
}
.adm-bar-chart__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}
.adm-bar-chart__bar {
  width: 100%;
  max-width: 60px;
  background: linear-gradient(180deg, var(--primary), var(--primary-l));
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  position: relative;
  transition: height .3s ease;
}
.adm-bar-chart__val {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .75rem;
  font-weight: 600;
  color: var(--text);
}
.adm-bar-chart__label {
  font-size: .7rem;
  color: var(--text-muted);
  text-align: center;
}

/* --- Percentage indicator --- */
.adm-pct { font-weight: 600; }
.adm-pct--low { color: #EF4444; }

/* --- Progress Bar --- */
.adm-progress-bar {
  height: 8px;
  background: var(--border-l);
  border-radius: 4px;
  overflow: hidden;
  flex: 1;
}
.adm-progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-l));
  border-radius: 4px;
  transition: width .3s ease;
}

/* --- Student Grid --- */
.adm-student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.adm-student-card {
  display: block;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-l);
  padding: 16px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow var(--transition), transform var(--transition);
}
.adm-student-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  text-decoration: none;
}
.adm-student-card__top {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.adm-student-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-l));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.adm-student-card__name {
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 2px;
}
.adm-student-card__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.adm-student-card__pct {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-sec);
  flex-shrink: 0;
}
.adm-student-card__stats {
  display: flex;
  gap: 12px;
  font-size: .78rem;
  color: var(--text-muted);
}
.adm-text--danger { color: #EF4444; font-weight: 600; }

/* --- Student Detail Header --- */
.adm-student-header {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-l);
  flex-wrap: wrap;
}
.adm-student-header__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-l));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
}
.adm-student-header__info { flex: 1; }
.adm-student-header__info h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
}
.adm-student-header__compliance {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: .85rem;
  color: var(--text-sec);
}

/* --- Review Cards --- */
.adm-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
.adm-review-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-l);
  padding: 16px;
}
.adm-review-card__top {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.adm-review-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-l));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.adm-review-card__name {
  font-weight: 600;
  font-size: .9rem;
}
.adm-review-card__meta {
  font-size: .78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.adm-review-card__title {
  font-size: .95rem;
  font-weight: 500;
  margin-bottom: 10px;
}
.adm-review-card__proof {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .82rem;
  color: var(--primary);
  margin-bottom: 10px;
}
.adm-review-card__proof svg { width: 14px; height: 14px; }
.adm-review-card__notes {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .82rem;
  resize: vertical;
  margin-bottom: 12px;
  min-height: 40px;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
}
.adm-review-card__notes:focus { outline: none; border-color: var(--primary); }
.adm-review-card__actions {
  display: flex;
  gap: 8px;
}

/* --- Report Controls --- */
.adm-report-controls {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.adm-report-custom {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

/* --- Report Type Cards --- */
.adm-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.adm-report-type-card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-l);
  transition: box-shadow var(--transition);
}
.adm-report-type-card:hover { box-shadow: var(--shadow); }
.adm-report-type-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(var(--primary-rgb), .08);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.adm-report-type-card__icon svg { width: 22px; height: 22px; }
.adm-report-type-card__info { flex: 1; }
.adm-report-type-card__info h4 { font-size: .95rem; font-weight: 600; margin-bottom: 4px; }
.adm-report-type-card__info p { font-size: .8rem; color: var(--text-muted); line-height: 1.4; }

/* --- Settings --- */
.adm-settings-form { max-width: 500px; }
.adm-category-list { display: flex; flex-direction: column; gap: 10px; }
.adm-category-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.adm-color-pick {
  width: 36px;
  height: 36px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 2px;
  background: var(--bg-card);
}
.adm-color-pick::-webkit-color-swatch-wrapper { padding: 0; }
.adm-color-pick::-webkit-color-swatch { border: none; border-radius: 3px; }

/* --- Modal --- */
.adm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: admFadeIn .15s ease;
}
.adm-modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  animation: admSlideUp .2s ease;
}
.adm-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-l);
}
.adm-modal__header h3 {
  font-size: 1.1rem;
  font-weight: 600;
}
.adm-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 4px;
}
.adm-modal__close:hover { background: var(--bg-hover); color: var(--text); }
.adm-modal__close svg { width: 18px; height: 18px; }
.adm-modal__body { padding: 20px; }
.adm-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-l);
}

/* --- Skeleton Loaders --- */
.adm-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.adm-skeleton-card {
  padding: 20px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-l);
}
.adm-skeleton-table {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-l);
}
.adm-skel {
  background: linear-gradient(90deg, var(--border-l) 25%, var(--bg-hover) 50%, var(--border-l) 75%);
  background-size: 200% 100%;
  animation: admShimmer 1.5s infinite;
  border-radius: 4px;
}
.adm-skel--circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-bottom: 12px;
}
.adm-skel--text {
  height: 14px;
  margin-bottom: 8px;
}
.adm-skel--row {
  height: 40px;
  width: 100%;
}

/* --- Animations --- */
@keyframes admShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes admFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes admSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
  .adm-dash-grid {
    grid-template-columns: 1fr;
  }
  .adm-course-grid {
    grid-template-columns: 1fr;
  }
  .adm-student-grid {
    grid-template-columns: 1fr;
  }
  .adm-review-grid {
    grid-template-columns: 1fr;
  }
  .adm-report-grid {
    grid-template-columns: 1fr;
  }
  .adm-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .adm-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .adm-filter-bar {
    flex-direction: column;
  }
  .adm-search-input {
    min-width: 100%;
  }
  .adm-bulk-toolbar {
    flex-wrap: wrap;
  }
  .adm-student-header {
    flex-direction: column;
    text-align: center;
  }
  /* Tables become scrollable on mobile */
  .adm-table-wrap {
    margin: 0 -16px;
    padding: 0 16px;
  }
  .adm-report-controls {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .adm-stat-grid {
    grid-template-columns: 1fr;
  }
  .adm-tabs {
    gap: 0;
  }
  .adm-tab {
    padding: 8px 12px;
    font-size: .82rem;
  }
}

/* ============================================================
   ACCESS CODE CARDS
   ============================================================ */
.adm-code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.adm-code-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: box-shadow var(--transition);
}
.adm-code-card:hover {
  box-shadow: var(--shadow);
}

.adm-code-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.adm-code-card__code {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}

.adm-code-card__name {
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
  margin-bottom: 6px;
}

.adm-code-card__meta {
  display: flex;
  gap: 16px;
  font-size: .82rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.adm-code-card__program {
  font-size: .82rem;
  color: var(--text-sec);
  margin-bottom: 12px;
}

.adm-code-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   REGISTRATION FORM (login page)
   ============================================================ */
.tp-form-row {
  margin-bottom: 0;
}
.tp-form-row--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .tp-form-row--half {
    grid-template-columns: 1fr;
  }
}

.tp-login-success {
  background: var(--success-l);
  color: var(--success);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: .88rem;
  font-weight: 500;
  margin-bottom: 12px;
  display: none;
}

/* ============================================================
   LEARNER BADGE (purple/violet)
   ============================================================ */
.adm-badge--learner {
  background: rgba(124, 58, 237, 0.1);
  color: #7C3AED;
  font-weight: 600;
  font-size: .78rem;
  padding: 2px 10px;
  border-radius: 12px;
  letter-spacing: .3px;
}

/* Student card - program info row */
.adm-student-card__program-info {
  display: flex;
  gap: 8px;
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: 4px;
  padding: 4px 0;
  border-top: 1px solid var(--border-l);
}
.adm-student-card__program-info span:first-child {
  font-weight: 600;
  color: #7C3AED;
}

/* ============================================================
   MODAL FORM INPUTS (shared)
   ============================================================ */
.tp-modal-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--text);
  background: var(--bg);
  transition: border-color var(--transition);
}
.tp-modal-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}
textarea.tp-modal-input {
  resize: vertical;
}

/* Checkbox group for modal forms */
.tp-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.tp-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  color: var(--text-sec);
  cursor: pointer;
}
.tp-checkbox-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Form group spacing in modals */
.tp-modal .tp-form-group {
  margin-bottom: 14px;
}
.tp-modal .tp-form-group label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-sec);
  margin-bottom: 4px;
}

/* Danger button variant */
.tp-btn--danger {
  background: var(--danger);
  color: #fff;
  border: none;
}
.tp-btn--danger:hover {
  background: #B71C1C;
}

@media (max-width: 600px) {
  .adm-code-grid {
    grid-template-columns: 1fr;
  }
}

/* Guest Mode */
.tp-sidebar__guest-badge {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; margin: 0 12px 16px;
  background: rgba(197, 165, 114, 0.1);
  border: 1px solid rgba(197, 165, 114, 0.2);
  border-radius: 8px;
  font-size: .75rem; font-weight: 600;
  color: var(--accent); text-transform: uppercase; letter-spacing: .5px;
}
.eden-guest-cta-banner {
  background: linear-gradient(135deg, var(--primary), var(--primary-l, #A83245));
  color: #fff; padding: 16px 24px; border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 20px; font-size: .85rem;
}
.eden-guest-cta-banner strong { display: block; margin-bottom: 2px; }
.eden-guest-watermark { position: relative; }
.eden-guest-watermark::after {
  content: 'EDEN Education Center';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 3rem; font-weight: 800;
  color: rgba(139, 35, 50, 0.05);
  pointer-events: none; z-index: 1;
  white-space: nowrap;
}
.tp-login-guest-btn {
  border-color: rgba(255,255,255,0.3) !important;
  color: rgba(255,255,255,0.8) !important;
}
.tp-login-guest-btn:hover {
  border-color: rgba(255,255,255,0.6) !important;
  color: #fff !important;
  background: rgba(255,255,255,0.05) !important;
}
@media (max-width: 768px) {
  .eden-guest-cta-banner { flex-direction: column; text-align: center; }
}

/* ================================================================
   MOBILE RESPONSIVENESS FIXES (P0 + P1)
   Applied: March 2026
   ================================================================ */

/* Global overflow protection */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Touch target minimum 44px */
button, a, [role="button"], .tp-btn {
  touch-action: manipulation;
}

/* 600px intermediate breakpoint */
@media (max-width: 600px) {
  .tp-btn { min-height: 44px; padding: 10px 14px; }
  .tp-btn--sm { min-height: 40px; padding: 8px 12px; }
  .tp-modal { max-height: calc(100vh - 120px); overflow-y: auto; }
  .tp-course-grid { grid-template-columns: 1fr; }
  .adm-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 480px phone fixes */
@media (max-width: 480px) {
  /* Touch targets */
  .tp-btn { min-height: 44px; padding: 10px 14px; font-size: 13px; }
  .tp-btn--sm { min-height: 40px; padding: 8px 12px; }
  
  /* Quiz dots -- CRITICAL fix */
  .tp-quiz-dot { width: 44px; height: 44px; font-size: 0.7rem; margin: 3px; }
  .tp-quiz-dots { gap: 3px; flex-wrap: wrap; }
  
  /* Quiz options */
  .tp-option { min-height: 44px; padding: 12px; }
  .tp-option__radio, .tp-option__check { width: 24px; height: 24px; min-width: 44px; min-height: 44px; padding: 10px; box-sizing: content-box; }
  
  /* Calendar cells */
  .tp-cal-cell { min-height: 80px; padding: 6px; }
  
  /* Text sizes */
  .tp-sidebar__link span { font-size: 14px; }
  
  /* Form spacing */
  .tp-form-group { margin-bottom: 18px; }
  .tp-form-group label { margin-bottom: 8px; }
  
  /* Admin tables horizontal scroll */
  .adm-table-wrap, .tp-table-wrap, table.adm-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }
  
  /* Modal height */
  .tp-modal { max-height: calc(100vh - 100px); }
  
  /* Input font size 16px to prevent Safari zoom */
  input, textarea, select { font-size: 16px; }
  
  /* Course card grid single column */
  .tp-course-grid, .adm-course-grid, .adm-student-grid, .adm-code-grid { grid-template-columns: 1fr; }
  
  /* Library cards & filters */
  .tp-lib-grid { grid-template-columns: 1fr; }
  .tp-lib-filter-row { flex-direction: column; }
  .tp-lib-select { width: 100%; }
  .tp-lib-featured-grid, .tp-lib-category__grid { grid-template-columns: 1fr; }
  .tp-library-grid { grid-template-columns: 1fr; }
  
  /* Wizard steps */
  .tp-wizard__steps { gap: 4px; }
  .tp-wizard__step-circle { width: 28px; height: 28px; font-size: .7rem; }
  .tp-wizard__step-label { font-size: .65rem; }
}

/* Landscape phone */
@media (max-height: 500px) and (orientation: landscape) {
  .tp-modal { max-height: 50vh; overflow-y: auto; }
  .tp-login-card { max-width: 95vw; }
  input, textarea, select { padding: 8px 10px; font-size: 16px; min-height: 40px; }
}

/* Small screen modal height */
@media (max-height: 667px) {
  .tp-modal { max-height: 70vh; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   DISCUSSION BOARDS
   ============================================================ */
.tp-disc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.tp-disc-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.tp-disc-section {
  margin: 16px 0 8px;
}
.tp-disc-section__label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.tp-disc-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tp-disc-card:hover, .tp-disc-card:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .1);
  outline: none;
}
.tp-disc-card__left { flex-shrink: 0; }
.tp-disc-card__body { flex: 1; min-width: 0; }
.tp-disc-card__title {
  font-weight: 600;
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tp-disc-card__preview {
  color: var(--text-sec);
  font-size: .85rem;
  margin-top: 4px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-disc-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-size: .78rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.tp-disc-card__author { font-weight: 600; color: var(--text-sec); }
.tp-disc-card__replies, .tp-disc-card__upvotes {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Avatars */
.tp-disc-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.tp-disc-avatar--lg { width: 44px; height: 44px; }
.tp-disc-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .5px;
}

/* Badges */
.tp-disc-instructor-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
}
.tp-disc-pin { display: inline-flex; align-items: center; }

/* Upvote button */
.tp-disc-upvote-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  cursor: pointer;
  font-size: .8rem;
  color: var(--text-sec);
  transition: all var(--transition);
}
.tp-disc-upvote-btn:hover { border-color: var(--primary); color: var(--primary); }
.tp-disc-upvote-btn--active {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), .06);
  color: var(--primary);
  font-weight: 600;
}

/* Thread view */
.tp-disc-thread-post {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}
.tp-disc-thread-post__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.tp-disc-thread-post__author {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tp-disc-thread-post__time { font-size: .78rem; color: var(--text-muted); }
.tp-disc-thread-post__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 12px;
}
.tp-disc-thread-post__body {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text);
}
.tp-disc-thread-post__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-l);
}

/* Replies */
.tp-disc-replies-header {
  margin-bottom: 12px;
}
.tp-disc-replies-header h3 { font-size: 1rem; font-weight: 600; }
.tp-disc-reply {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 8px;
}
.tp-disc-reply__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.tp-disc-reply__author { font-weight: 600; font-size: .875rem; }
.tp-disc-reply__time { font-size: .75rem; color: var(--text-muted); margin-left: 4px; }
.tp-disc-reply__body { font-size: .9rem; line-height: 1.55; }
.tp-disc-reply__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

/* Reply form */
.tp-disc-reply-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 20px;
}
.tp-disc-reply-form h4 { margin: 0 0 12px; font-size: .95rem; }

/* Discussion modal */
.tp-disc-modal { max-width: 560px; }

/* ============================================================
   COMING SOON STUBS (SCORM, xAPI, Patient Education)
   ============================================================ */
.tp-coming-soon-stub {
  text-align: center;
  padding: 48px 24px;
  background: var(--bg-card);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
}
.tp-coming-soon-stub__icon { margin-bottom: 16px; opacity: .8; }
.tp-coming-soon-stub__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.tp-coming-soon-stub__badge {
  display: inline-block;
  padding: 3px 14px;
  border-radius: 12px;
  background: var(--accent-subtle);
  color: var(--accent-d);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
}
.tp-coming-soon-stub__text {
  color: var(--text-sec);
  font-size: .9rem;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 400px;
}

/* GPU hints */
.tp-modal, .tp-sidebar, .tp-dropdown {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Safe area padding */
@media (max-width: 768px) {
  .tp-header { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .tp-content { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
}

/* ================================================================
   BREAKPOINT AUDIT FIXES (March 2026)
   Addresses 26 issues across 320px - 768px
   ================================================================ */

/* Notification panel: constrain on smaller screens */
@media (max-width: 768px) {
  .tp-notif-panel { width: min(360px, calc(100vw - 16px)); right: 0; max-height: 400px; }
}
@media (max-width: 480px) {
  .tp-notif-panel { width: calc(100vw - 16px); right: -40px; }
}

/* CRITICAL: Login card padding on very small screens */
@media (max-width: 375px) {
  .tp-login-card .card-body { padding: 20px 16px; }
  .tp-login-card-header h1 { font-size: 20px; }
  .tp-login-card-header p { font-size: 12px; }
}

/* CRITICAL: Calendar month label min-width overflow */
@media (max-width: 480px) {
  .tp-calendar__month { min-width: auto; font-size: 1rem; }
  .tp-calendar__nav { gap: 8px; }
  .tp-cal-grid { font-size: 11px; }
  .tp-cal-cell { min-height: 70px; padding: 4px; }
  .tp-calendar__legend { font-size: 11px; gap: 8px; flex-wrap: wrap; }
}

/* Quiz dots: slightly larger touch targets on tablet-phone, then smaller on phone */
@media (max-width: 600px) and (min-width: 481px) {
  .tp-quiz-dot { width: 32px; height: 32px; font-size: 0.65rem; }
  .tp-quiz-dots { gap: 4px; flex-wrap: wrap; }
}

/* HIGH: All grids collapse to single column at 500px */
@media (max-width: 500px) {
  .tp-library-grid,
  .tp-lib-featured-grid,
  .tp-lib-category__grid,
  .tp-course-grid,
  .tp-cred-grid,
  .adm-student-grid,
  .adm-course-grid { grid-template-columns: 1fr; }
}

/* HIGH: Course grid intermediate */
@media (max-width: 600px) {
  .tp-course-grid { grid-template-columns: 1fr; }
  .tp-cred-grid { grid-template-columns: 1fr; }
}

/* MEDIUM: Modal padding on very small screens */
@media (max-width: 768px) {
  .tp-consent-doc { padding: 28px 24px; font-size: .88rem; }
  .tp-consent-sign { padding: 20px 20px; }
}
@media (max-width: 480px) {
  .tp-modal { width: calc(100% - 32px); margin: 0 16px; max-height: 85vh; }
  .tp-consent-doc { padding: 16px 14px; font-size: 0.85rem; }
  .tp-consent-sign { padding: 16px 14px; }
  .tp-question-card { padding: 16px 12px; margin: 0 auto 16px; }
  .tp-reading { padding: 16px 12px; }
  .tp-form-group { margin-bottom: 14px; }
}

/* Stats bar: 3 cols on tablet (769-1024), 2 cols on mobile-tablet (481-768), 1 col on phone (<=480) */

/* MEDIUM: Filter chips smaller on mobile */
@media (max-width: 480px) {
  .tp-lib-chip { padding: 6px 12px; font-size: 0.75rem; }
  .tp-lib-chips { gap: 4px; }
}

/* MEDIUM: Table font size reduction on mobile */
@media (max-width: 768px) {
  table { font-size: 0.85rem; }
  table th, table td { padding: 8px 12px; }
}
@media (max-width: 480px) {
  table { font-size: 0.75rem; }
  table th, table td { padding: 6px 8px; white-space: nowrap; }
}

/* LOW: Hamburger touch target */
@media (max-width: 768px) {
  .tp-hamburger { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
}

/* LOW: Guest CTA banner stack earlier */
@media (max-width: 600px) {
  .eden-guest-cta-banner { flex-direction: column; text-align: center; gap: 12px; }
}

/* LOW: Admin filter bar wrapping at 600px */
@media (max-width: 600px) {
  .adm-filter-bar { flex-direction: column; gap: 8px; }
  .adm-search-input { width: 100%; }
}

/* Course Code Badge */
.tp-course-code {
  display: inline-block;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .65rem;
  font-weight: 700;
  color: var(--text-muted, #888);
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* Difficulty Badges */
.tp-difficulty { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 12px; }
.tp-difficulty--beginner { background: rgba(34,197,94,0.1); color: #166534; }
.tp-difficulty--beginner::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #22C55E; }
.tp-difficulty--intermediate { background: rgba(245,158,11,0.1); color: #92400E; }
.tp-difficulty--intermediate::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #F59E0B; }
.tp-difficulty--advanced { background: rgba(239,68,68,0.1); color: #991B1B; }
.tp-difficulty--advanced::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #EF4444; }

/* Learning Track Cards */
.tp-tracks { margin-bottom: 24px; }
.tp-tracks__title { font-size: 1.1rem; font-weight: 700; color: var(--text, #1a1a1a); margin-bottom: 12px; }
.tp-tracks__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tp-track-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: all .15s;
}
.tp-track-card:hover { border-color: var(--primary, #8B2332); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.tp-track-card__name { font-size: .85rem; font-weight: 700; color: var(--text, #1a1a1a); margin-bottom: 4px; }
.tp-track-card__count { font-size: .75rem; color: var(--text-muted, #888); margin-bottom: 8px; }
.tp-track-card__bar { height: 6px; border-radius: 3px; background: rgba(0,0,0,0.06); overflow: hidden; }
.tp-track-card__fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--primary, #8B2332), var(--primary-l, #A83245)); transition: width .3s; }
.tp-track-card__pct { font-size: .7rem; color: var(--primary, #8B2332); font-weight: 600; margin-top: 4px; text-align: right; }

@media (max-width: 480px) {
  .tp-tracks__grid { grid-template-columns: 1fr 1fr; }
  .tp-track-card { padding: 12px; }
}
@media (max-width: 320px) {
  .tp-tracks__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LEARNING TRACK DETAIL VIEW
   ============================================================ */
.tp-track-detail {
  max-width: 800px;
  margin: 0 auto;
}
.tp-track-detail__header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}
.tp-track-detail__progress {
  position: relative;
  flex-shrink: 0;
}
.tp-track-detail__pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary, #6b1d2a);
}
.tp-track-detail__info h1 {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--text);
}
.tp-track-detail__stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--text-sec);
}
.tp-track-detail__stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tp-track-detail__stats svg { width: 16px; height: 16px; opacity: .6; }
.tp-track-detail__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Step item */
.tp-track-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-lg);
  margin-bottom: 2px;
  position: relative;
  transition: box-shadow .15s;
}
.tp-track-step:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.tp-track-step__connector {
  position: absolute;
  left: 37px;
  top: 48px;
  bottom: -4px;
  width: 2px;
}
.tp-track-step__line {
  width: 2px;
  height: 100%;
  background: var(--border-l);
}
.tp-track-step--done .tp-track-step__line { background: var(--primary, #6b1d2a); }
.tp-track-step__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg);
  border: 2px solid var(--border-l);
  color: var(--text-muted);
  font-size: .8rem;
  font-weight: 700;
  z-index: 1;
}
.tp-track-step__icon svg { width: 18px; height: 18px; }
.tp-track-step--done .tp-track-step__icon {
  background: var(--primary, #6b1d2a);
  border-color: var(--primary, #6b1d2a);
  color: #fff;
}
.tp-track-step--done .tp-track-step__icon svg { stroke: #fff; }
.tp-track-step--active .tp-track-step__icon {
  background: #fff;
  border-color: var(--primary, #6b1d2a);
  color: var(--primary, #6b1d2a);
}
.tp-track-step--active .tp-track-step__icon svg { stroke: var(--primary, #6b1d2a); }
.tp-track-step__body {
  flex: 1;
  min-width: 0;
}
.tp-track-step__title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.tp-track-step--done .tp-track-step__title { color: var(--text-sec); }
.tp-track-step__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.tp-track-step__meta svg { width: 14px; height: 14px; }
.tp-track-step__status { font-weight: 600; }
.tp-track-step--done .tp-track-step__status { color: var(--success, #16a34a); }
.tp-track-step--active .tp-track-step__status { color: var(--primary, #6b1d2a); }
.tp-track-step__desc {
  font-size: .82rem;
  color: var(--text-sec);
  line-height: 1.5;
}
.tp-track-step__action {
  flex-shrink: 0;
  align-self: center;
}
@media (max-width: 768px) {
  .tp-track-detail__header { flex-direction: column; text-align: center; padding: 20px; gap: 16px; }
  .tp-track-detail__stats { justify-content: center; }
  .tp-track-step { padding: 12px 14px; gap: 10px; }
  .tp-track-step__icon { width: 30px; height: 30px; }
  .tp-track-step__icon svg { width: 15px; height: 15px; }
  .tp-track-step__connector { left: 28px; top: 42px; }
  .tp-track-step__action { display: none; }
  .tp-track-step__body { cursor: pointer; }
}
@media (max-width: 480px) {
  .tp-track-detail__info h1 { font-size: 1.1rem; }
}

/* ─── Mobile sidebar toggle ─── */
.tp-sidebar--open {
  transform: translateX(0) !important;
  visibility: visible !important;
}

/* ─── Tablet breakpoint (769px-1024px) ─── */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-w: 200px; }
  .tp-content { padding: 20px; }
  .tp-stats-bar { grid-template-columns: repeat(3, 1fr); }
  .tp-course-grid { grid-template-columns: repeat(2, 1fr); }
  .tp-tracks__grid { grid-template-columns: repeat(3, 1fr); }
  .tp-notif-panel { width: 340px; }
  /* Sidebar: tighten padding */
  .tp-sidebar__brand { padding: 12px 14px; gap: 8px; }
  .tp-sidebar__brand span { font-size: .9rem; }
  .tp-sidebar__tenant { padding: 6px 14px; }
  .tp-sidebar__link { padding: 9px 14px; gap: 10px; }
  .tp-sidebar__section { padding: 16px 14px 4px; }
  /* Breadcrumbs: hide ancestor segments, show only current page */
  .tp-breadcrumbs__ancestor,
  .tp-breadcrumbs__sep { display: none; }
}

/* ─── Mobile (<=768px): sidebar is a drawer, no positional conflict ─── */
@media (max-width: 768px) {
  .tp-breadcrumbs__ancestor,
  .tp-breadcrumbs__sep { display: none; }
  /* Mobile drawer: show full brand with text (drawer is 260px wide, plenty of room) */
  .tp-sidebar__brand { padding: 14px 16px; gap: 10px; flex-direction: row; }
  .tp-sidebar__brand span { display: inline; }
  .tp-sidebar__brand img { width: 32px; height: 32px; }
  /* Toggle acts as close (X) on mobile */
  .tp-sidebar__toggle .icon-collapse { display: none; }
  .tp-sidebar__toggle .icon-close    { display: block; }
  .tp-sidebar__toggle { margin-left: auto; }
  /* Tenant row: full display in drawer */
  .tp-sidebar__tenant { padding: 8px 16px; }
  .tp-sidebar__tenant-label { display: inline; }
}

/* ─── Very narrow (≤375px) ─── */
@media (max-width: 375px) {
  /* Current page breadcrumb also hidden at very small — header shows page title elsewhere */
  .tp-breadcrumbs { display: none; }
}

/* ─── Form validation states ─── */
input:invalid:not(:placeholder-shown) { border-color: var(--danger, #dc3545); }
input:valid:not(:placeholder-shown) { border-color: var(--success, #28a745); }
select:invalid { border-color: var(--danger, #dc3545); }

/* ─── Disabled button states ─── */
.tp-btn:disabled, .tp-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Active link state ─── */
a:active { opacity: 0.8; }

/* ─── Empty calendar cell accessibility ─── */
.tp-cal-cell--empty { pointer-events: none; }

/* ─── Leaderboard ─── */
.tp-lb-wrap { max-width: 800px; margin: 0 auto; }

.tp-lb-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  padding: 32px 16px 0;
  margin-bottom: 32px;
}

.tp-lb-podium__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px 16px;
  min-width: 140px;
  position: relative;
  transition: transform .15s;
}
.tp-lb-podium__slot--1 {
  transform: translateY(-20px);
  border-color: #C5A572;
  box-shadow: 0 4px 24px rgba(197,165,114,.18);
  min-width: 160px;
}
.tp-lb-podium__slot--me { outline: 2px solid var(--primary); }

.tp-lb-podium__medal { font-size: 1.8rem; line-height: 1; margin-bottom: 4px; }
.tp-lb-podium__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.tp-lb-podium__slot--1 .tp-lb-podium__avatar { width: 64px; height: 64px; font-size: 1.4rem; }
.tp-lb-podium__name { font-weight: 700; font-size: .9rem; color: var(--text); text-align: center; }
.tp-lb-podium__stat { font-size: .85rem; font-weight: 600; color: var(--primary); }
.tp-lb-podium__pct { font-size: .78rem; color: var(--text-muted); }
.tp-lb-podium__score { font-size: .75rem; color: var(--text-muted); }

.tp-lb-you {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.tp-lb-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tp-lb-avatar--sm { width: 32px; height: 32px; font-size: .78rem; }

.tp-lb-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.tp-lb-bar {
  height: 6px;
  background: var(--primary);
  border-radius: 3px;
  min-width: 4px;
  max-width: 80px;
  opacity: .7;
  flex-shrink: 0;
}

.tp-lb-row--me { background: rgba(197,165,114,.07); }
.tp-lb-row--me td { font-weight: 600; }

.tp-lb-my-rank {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin-top: 24px;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
}

@media (max-width: 600px) {
  .tp-lb-podium { gap: 8px; }
  .tp-lb-podium__slot { min-width: 100px; padding: 14px 10px 12px; }
  .tp-lb-podium__slot--1 { min-width: 120px; }
  .tp-lb-podium__avatar { width: 44px; height: 44px; font-size: 1rem; }
  .tp-lb-bar { max-width: 48px; }
}

/* ─── Turnstile Gate (hide-until-human-verified) ─── */
@keyframes tsShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

.ts-gate {
  padding: 4px 0 8px;
}

.ts-gate__skels {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.ts-gate__skel {
  flex: 1 1 100%;
  min-height: 42px;
  border-radius: 8px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.04) 75%
  );
  background-size: 200% 100%;
  animation: tsShimmer 1.6s ease-in-out infinite;
}

.ts-gate__skel--btn {
  height: 48px;
  border-radius: 8px;
  background: linear-gradient(90deg,
    rgba(139,35,50,.15) 25%,
    rgba(139,35,50,.30) 50%,
    rgba(139,35,50,.15) 75%
  );
  background-size: 200% 100%;
  animation: tsShimmer 1.6s ease-in-out infinite;
}

.ts-gate__msg {
  text-align: center;
  font-size: .78rem;
  color: var(--text-muted);
  margin: 6px 0 0;
  letter-spacing: .02em;
}

/* fade-in animation for revealed fields */
#loginFields, #regFields {
  animation: tsFadeIn .3s ease both;
}

/* Badges & Achievements */
.tp-badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.tp-badge-card { background: var(--bg-card); border: 1px solid var(--border-l); border-radius: 12px; padding: 20px 16px; text-align: center; transition: transform .15s; }
.tp-badge-card--earned { border-color: var(--accent, #6366f1); box-shadow: 0 0 0 1px var(--accent, #6366f1)22; }
.tp-badge-card--locked { opacity: .45; filter: grayscale(1); }
.tp-badge-card:hover { transform: translateY(-2px); }
.tp-badge-card__icon { font-size: 2.5rem; line-height: 1; margin-bottom: 8px; }
.tp-badge-card__title { font-size: .875rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.tp-badge-card__desc { font-size: .75rem; color: var(--text-muted); line-height: 1.4; }
.tp-badge-card__date { font-size: .7rem; color: var(--accent, #6366f1); margin-top: 6px; font-weight: 600; }

/* ── Quiz timer pulse animation ─────────────────────────── */
@keyframes tp-timer-pulse {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0.7; transform: scale(1.04); }
}

/* ── Floating quiz timer pill (persists across navigation) ─ */
.tp-quiz-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card, #1e293b); border: 1px solid var(--border, #334155);
  border-radius: 40px; padding: 8px 16px 8px 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);
  cursor: pointer; text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .2s;
  animation: tp-float-in .3s ease-out;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tp-quiz-float:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,.5); border-color: var(--primary, #8B2332); }
.tp-quiz-float__icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary, #8B2332); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tp-quiz-float__icon svg { width: 16px; height: 16px; }
.tp-quiz-float__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tp-quiz-float__course { font-size: .7rem; color: var(--text-muted, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; line-height: 1.2; }
.tp-quiz-float__time { font-size: .85rem; font-weight: 700; color: var(--text, #e2e8f0); font-variant-numeric: tabular-nums; line-height: 1.2; }
.tp-quiz-float__label { font-size: .65rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: .5px; }
.tp-quiz-float--warning { border-color: #c0392b; }
.tp-quiz-float--warning .tp-quiz-float__icon { background: #c0392b; animation: tp-timer-pulse .8s ease-in-out infinite alternate; }
.tp-quiz-float--warning .tp-quiz-float__time { color: #ef4444; }
.tp-quiz-float--hide { animation: tp-float-out .25s ease-in forwards; pointer-events: none; }
@keyframes tp-float-in { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tp-float-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(20px) scale(.9); } }
@media (max-width: 480px) {
  .tp-quiz-float { bottom: 16px; right: 12px; left: 12px; padding: 10px 14px 10px 10px; }
  .tp-quiz-float__course { max-width: none; }
}

/* ── Audio waveform loading shimmer ─────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ============================================================
   PUBLIC CERTIFICATE VERIFICATION PAGE
   ============================================================ */
.tp-verify-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f5f2 0%, #ede4dc 100%);
  padding: 24px;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}
.tp-verify-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(107,29,42,.10), 0 2px 8px rgba(0,0,0,.06);
  max-width: 520px;
  width: 100%;
  overflow: hidden;
}
.tp-verify-header {
  background: linear-gradient(135deg, #6b1d2a 0%, #8a2a3a 100%);
  color: #fff;
  padding: 32px 24px 28px;
  text-align: center;
}
.tp-verify-logo-img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  margin: 0 auto 12px;
  display: block;
  object-fit: contain;
}
.tp-verify-header h1 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
.tp-verify-subtitle {
  font-size: .85rem;
  opacity: .8;
  margin: 0;
}
.tp-verify-body {
  padding: 32px 28px;
}
.tp-verify-loading {
  text-align: center;
  padding: 24px 0;
  color: #888;
}
.tp-verify-loading .tp-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e5e5;
  border-top-color: #6b1d2a;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tp-verify-valid {
  text-align: center;
  margin-bottom: 24px;
}
.tp-verify-valid h2 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #16a34a;
  margin: 8px 0 0;
}
.tp-verify-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #dcfce7;
}
.tp-verify-badge svg { width: 28px; height: 28px; stroke: #16a34a; stroke-width: 2.5; }
.tp-verify-badge--invalid { background: #fee2e2; }
.tp-verify-badge--invalid svg { stroke: #dc2626; }
.tp-verify-invalid {
  text-align: center;
  padding: 12px 0;
}
.tp-verify-invalid h2 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #dc2626;
  margin: 8px 0 8px;
}
.tp-verify-invalid p {
  color: #666;
  font-size: .9rem;
  line-height: 1.6;
  margin: 0;
}
.tp-verify-details {
  border-top: 1px solid #f0ebe7;
  padding-top: 16px;
}
.tp-verify-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid #f7f3f0;
}
.tp-verify-row:last-child { border-bottom: none; }
.tp-verify-label {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #999;
  flex-shrink: 0;
  margin-right: 16px;
}
.tp-verify-value {
  font-size: .95rem;
  font-weight: 500;
  color: #333;
  text-align: right;
}
.tp-verify-footer {
  text-align: center;
  margin-top: 24px;
  font-size: .78rem;
  color: #aaa;
}
.tp-verify-footer strong { color: #6b1d2a; }

@media (max-width: 480px) {
  .tp-verify-page { padding: 16px; }
  .tp-verify-header { padding: 24px 20px; }
  .tp-verify-body { padding: 24px 20px; }
  .tp-verify-row { flex-direction: column; gap: 2px; }
  .tp-verify-value { text-align: left; }
}

/* ================================================================
   COURSE MODAL - Fullscreen immersive player (JKO-style)
   ================================================================ */
.ecm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
  animation: ecmFadeIn .2s ease;
}
@keyframes ecmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ecm-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  z-index: 9999;
  background: var(--bg);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ecmIn .2s ease;
}
@keyframes ecmIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ---- Header ---- */
.ecm-header {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.ecm-header__exit {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sec);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.ecm-header__exit:hover { background: var(--bg-hover); color: var(--text); }
.ecm-header__exit svg { width: 14px; height: 14px; }
.ecm-header__title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.ecm-header__title h2 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.ecm-header__steps {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.ecm-header__step {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.ecm-header__step svg { width: 13px; height: 13px; flex-shrink: 0; }
.ecm-header__step--active { color: var(--primary); background: rgba(var(--primary-rgb), .08); }
.ecm-header__step--done { color: var(--success); }
.ecm-header__step-sep { width: 20px; height: 1px; background: var(--border); margin: 0 -4px; }

/* ---- Body (TOC + Content) ---- */
.ecm-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* ---- TOC Sidebar ---- */
.ecm-toc {
  width: 228px;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}
.ecm-toc__header {
  padding: 13px 16px 9px;
  border-bottom: 1px solid var(--border-l);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ecm-toc__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}
.ecm-toc__count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border-l);
  border-radius: 10px;
  padding: 1px 7px;
}
.ecm-toc__list { padding: 6px 0; flex: 1; }
.ecm-toc__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--text-sec);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  border-left: 3px solid transparent;
  position: relative;
  transition: background .12s, color .12s;
}
.ecm-toc__item:hover { background: rgba(0,0,0,.025); color: var(--text); }
.ecm-toc__item--active { background: rgba(var(--primary-rgb), .06); color: var(--primary); font-weight: 600; border-left-color: var(--primary); }
.ecm-toc__item--done { color: var(--success); }
.ecm-toc__item--done:hover { color: var(--success); }
.ecm-toc__item--locked { opacity: .45; cursor: not-allowed; pointer-events: none; }
.ecm-toc__icon {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--bg-card);
  font-size: 10px; font-weight: 700; flex-shrink: 0;
  color: var(--text-muted); transition: all .15s;
  margin-top: 2px;
}
.ecm-toc__item--active .ecm-toc__icon { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); }
.ecm-toc__item--done .ecm-toc__icon { background: #2E7D4F; border-color: #2E7D4F; color: #fff; }
.ecm-toc__icon svg { width: 12px; height: 12px; }
.ecm-toc__name { flex: 1; min-width: 0; line-height: 1.35; white-space: normal; word-break: break-word; }
/* vertical connector lines */
.ecm-toc__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 27px; top: 33px;
  width: 2px; height: calc(100% - 16px);
  background: var(--border-l);
}
.ecm-toc__item--done:not(:last-child)::after { background: rgba(46,125,79,.3); }
.ecm-toc__divider { border-top: 1px solid var(--border-l); margin: 6px 0; }

/* ---- Content Area ---- */
.ecm-content {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Scrollable variant for title/objectives/video/summary/consent pages */
.ecm-content--scroll {
  overflow-y: auto;
  scroll-behavior: smooth;
}
.ecm-page {
  padding: 32px 48px 28px;
  max-width: 840px;
  margin: 0 auto;
  box-sizing: border-box;
  min-height: 100%;
}
/* Video pages: fill ALL available space - no scrolling, no black bars.
   flex:1 + min-height:0 fills the vertical space (ecm-content is already a flex column).
   margin:0 + width:100% overrides .ecm-page margin:0 auto, fixing the width.
   Inner tp-video-wrap gets flex:1 so it takes the remaining height after the heading.
   padding-bottom:0 + height:auto disables the aspect-ratio trick; the absolute video fills the flex height. */
.ecm-page--video {
  max-width: none;
  margin: 0;
  width: 100%;
  padding: 24px 32px 20px;
  box-sizing: border-box;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ecm-page--video .ecm-page-type {
  flex-shrink: 0;
}
.ecm-page--video .tp-reading {
  flex-shrink: 0;
}
.ecm-page--video .tp-video-wrap {
  max-width: none;
  margin: 0;
  flex: 1;
  min-height: 0;
  padding-bottom: 0;
  height: auto;
  /* position:relative and overflow:hidden from base .tp-video-wrap still apply */
  /* video is position:absolute top:0 left:0 width:100% height:100% - fills the flex height */
}

/* Panel mode: fills height, no padding on sides (panel-body handles it) */
.ecm-page--panel {
  flex: 1;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 0 0;
  max-width: none;
}
.ecm-page--panel .ecm-page-type {
  padding: 0 48px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
/* Panel body fills remaining height */
.ecm-panel-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 4px 48px 20px;
  display: flex;
  flex-direction: column;
}
.ecm-panel-body--image {
  align-items: center;
  justify-content: flex-start;
  padding: 8px 32px 16px;
  overflow-y: auto;
}
.ecm-panel-body--image img {
  max-width: 100%;
  max-height: 60%;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.ecm-panel-caption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  text-align: center;
  max-width: 680px;
  width: 100%;
}
.ecm-panel-body--text {
  overflow-y: auto;
  padding-top: 0;
}
/* TOC panel sub-items */
.ecm-toc__panels {
  padding: 2px 0 6px 20px;
  border-left: 2px solid var(--border-l);
  margin: 2px 0 2px 20px;
}
.ecm-toc__panel-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
  transition: background .12s, color .12s;
}
.ecm-toc__panel-item:hover { background: rgba(var(--primary-rgb),.06); color: var(--text); }
.ecm-toc__panel-item--active {
  color: var(--primary);
  font-weight: 600;
  background: rgba(var(--primary-rgb),.08);
}
/* Footer panel pills (replaces page dots on multi-panel pages) */
.ecm-footer__panels {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ecm-panel-pills {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ecm-panel-pill {
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background: var(--border);
  transition: all .2s ease;
  flex-shrink: 0;
}
.ecm-panel-pill--active {
  background: var(--primary);
  width: 18px;
}
.ecm-panel-counter {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: .03em;
}
.ecm-page-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ecm-page-type::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-l);
}

/* ---- Footer Nav ---- */
.ecm-footer {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.ecm-footer__dots {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ecm-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: all .15s;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.ecm-dot:hover { border-color: var(--primary); color: var(--primary); background: rgba(var(--primary-rgb), .06); }
.ecm-dot--viewed { border-color: rgba(46,125,79,.45); color: #2E7D4F; background: rgba(46,125,79,.05); }
.ecm-dot--active { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .2); }

/* Title page - no top padding so hero bleeds to edge */
.ecm-page--title { padding-top: 0; }

/* ---- Title page specific ---- */
.ecm-title-hero { position: relative; }
.ecm-title-body { padding: 20px 0 8px; }
.ecm-title-desc {
  font-size: 14px;
  color: var(--text-sec);
  line-height: 1.75;
  margin: 0 0 14px;
}
.ecm-title-instructor {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.ecm-title-instructor svg { flex-shrink: 0; }
.ecm-title-extra {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  line-height: 1.6;
}

/* Meta chips */
.ecm-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.ecm-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-sec);
  white-space: nowrap;
}
.ecm-meta-chip svg { flex-shrink: 0; }
.ecm-meta-chip--advanced { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); color: #D32F2F; }
.ecm-meta-chip--intermediate { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.3); color: #B45309; }
.ecm-meta-chip--beginner { background: rgba(46,125,79,.08); border-color: rgba(46,125,79,.25); color: #2E7D4F; }
.ecm-meta-chip--code { background: rgba(var(--primary-rgb),.06); border-color: rgba(var(--primary-rgb),.2); color: var(--primary); font-family: monospace; letter-spacing: .03em; }

/* Completed banner */
.ecm-completed-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(46,125,79,.08);
  border: 1px solid rgba(46,125,79,.25);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #2E7D4F;
  margin-bottom: 14px;
}
.ecm-completed-banner svg { flex-shrink: 0; }

/* Prerequisites block */
.ecm-prereq-block {
  border-radius: 12px;
  border: 1px solid;
  overflow: hidden;
  margin-top: 20px;
}
.ecm-prereq-block--ok {
  border-color: rgba(46,125,79,.3);
  background: rgba(46,125,79,.04);
}
.ecm-prereq-block--locked {
  border-color: rgba(211,47,47,.3);
  background: rgba(211,47,47,.04);
}
.ecm-prereq-block__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.ecm-prereq-block__icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ecm-prereq-block--ok .ecm-prereq-block__icon { background: rgba(46,125,79,.12); }
.ecm-prereq-block--locked .ecm-prereq-block__icon { background: rgba(211,47,47,.12); }
.ecm-prereq-block__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.ecm-prereq-block--ok .ecm-prereq-block__title { color: #2E7D4F; }
.ecm-prereq-block--locked .ecm-prereq-block__title { color: #D32F2F; }
.ecm-prereq-block__sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.ecm-prereq-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.ecm-prereq-badge--ok { background: rgba(46,125,79,.12); color: #2E7D4F; }
.ecm-prereq-badge--fail { background: rgba(211,47,47,.1); color: #D32F2F; }
.ecm-prereq-list { padding: 4px 0; }
.ecm-prereq-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  font-size: 13px;
}
.ecm-prereq-row:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.05); }
.ecm-prereq-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ecm-prereq-icon--done { background: #2E7D4F; }
.ecm-prereq-icon--fail { background: #D32F2F; }
.ecm-prereq-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  overflow: hidden;
}
.ecm-prereq-code {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border-l);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  font-family: monospace;
}
.ecm-prereq-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.ecm-prereq-status--done { background: rgba(46,125,79,.1); color: #2E7D4F; }
.ecm-prereq-status--required { background: rgba(211,47,47,.1); color: #D32F2F; }

/* Responsive */
@media (max-width: 800px) {
  .ecm-toc { display: none; }
  .ecm-page { padding: 20px 16px 16px; }
  .ecm-header__title h2 { font-size: 13px; }
  .ecm-header__steps { display: none; }
  .ecm-footer { padding: 0 16px; }
}

/* Tenant picker skeleton shimmer */
@keyframes tp-pulse { 0%,100% { opacity:1; } 50% { opacity:.55; } }
@keyframes tp-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }