/* ==========================================================================
   COMPONENTS — All reusable UI components
   ADHD Screening Portal — components.css

   Table of Contents:
   01. Navigation
   02. Buttons
   03. Cards
   04. Progress Bar
   05. Form Elements / Option Buttons
   06. Score Circle (SVG)
   07. Badges / Severity Labels
   08. Modals
   09. Toast Notifications
   10. Tabs
   11. Tooltip
   12. Skeleton Loader
   13. Radar Chart Container
   14. Bar Chart (Horizontal)
   15. Footer
   16. Donate Button (Floating)
   ========================================================================== */


/* ==========================================================================
   01. NAVIGATION
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: var(--z-nav);
  background: var(--nav-bg);
  backdrop-filter: var(--nav-blur) var(--glass-saturate);
  -webkit-backdrop-filter: var(--nav-blur) var(--glass-saturate);
  border-bottom: 1px solid var(--nav-border);
  transition:
    background var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}

/* Scrolled state — slightly darker */
.nav.scrolled {
  background: var(--glass-bg-heavy);
  box-shadow: var(--shadow-md);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--spacing-page-x);
  gap: var(--space-4);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.nav-logo:hover {
  opacity: 0.85;
}

.nav-logo-icon {
  width: 2rem;
  height: 2rem;
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-glow-sm);
}

.nav-logo-text {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
}

.nav-logo-text span,
.nav-logo-dot {
  color: var(--color-primary);
}

/* Nav Links list */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}

/* Nav item (li wrapper) */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* Dropdown container */
.nav-item--dropdown {
  position: relative;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--nav-link-color);
  border-radius: var(--radius-lg);
  transition: var(--transition-fast);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
  font-family: var(--font-sans);
}

.nav-link:hover {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}

.nav-link--emergency {
  color: var(--color-danger);
  font-weight: var(--weight-semibold);
}

.nav-link--emergency:hover {
  color: var(--color-danger);
  background: var(--color-danger-subtle);
}

.mobile-menu-item--emergency {
  color: var(--color-danger);
  font-weight: var(--weight-semibold);
}

.nav-link.active {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}

/* Animated underline on hover */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transform: translateX(-50%);
  transition: width var(--duration-normal) var(--ease-spring);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: calc(100% - var(--space-6));
}

/* Chevron arrow inside dropdown trigger */
.nav-chevron {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform var(--duration-fast) var(--ease-out);
}

.nav-item--dropdown:hover .nav-chevron,
.nav-item--dropdown.open .nav-chevron {
  transform: rotate(180deg);
}

/* Dropdown trigger button */
.nav-dropdown-trigger {
  /* inherits .nav-link styles */
}

/* Dropdown panel — uses ::before bridge to prevent hover gap */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 13rem;
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2);
  padding-top: calc(var(--space-2) + 0.5rem);
  margin-top: 0.5rem;
  z-index: var(--z-dropdown);

  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring),
    visibility 0s linear var(--duration-normal);
}

/* Invisible bridge to keep hover alive across the gap */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -0.75rem;
  left: 0;
  right: 0;
  height: 0.75rem;
}

.nav-item--dropdown:hover > .nav-dropdown,
.nav-item--dropdown.open > .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring),
    visibility 0s linear 0s;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-2-5) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  border-radius: var(--radius-lg);
  transition: var(--transition-fast);
  text-decoration: none;
  cursor: pointer;
}

.nav-dropdown-item:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

/* Dropdown item icon wrapper */
.nav-dropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  opacity: 0.7;
  color: var(--color-primary);
}

.nav-dropdown-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.nav-dropdown-item svg {
  width: 1.125rem;
  height: 1.125rem;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Dropdown item label & description */
.nav-dropdown-label {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.nav-dropdown-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: 1px;
  line-height: var(--leading-snug);
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-1-5) var(--space-2);
}

/* Right-side nav controls */
.nav-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Language Switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  padding: var(--space-0-5);
  gap: var(--space-0-5);
  border: 1px solid var(--color-border);
}

.lang-pill,
.lang-btn {
  padding: var(--space-1) var(--space-2-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border: none;
  background: none;
  line-height: 1;
  font-family: var(--font-sans);
}

.lang-pill:hover,
.lang-btn:hover {
  color: var(--color-primary);
}

.lang-pill.active,
.lang-btn.active {
  background: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-glow-sm);
}

/* Theme Toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-lg);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-color: var(--color-border-primary);
}

.theme-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--duration-normal) var(--ease-spring);
}

.theme-toggle:hover svg {
  transform: rotate(20deg);
}

/* Legacy icon class names */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* HTML uses .theme-icon--sun / .theme-icon--moon */
.theme-icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--duration-normal) var(--ease-spring);
}

.theme-icon--sun  { display: none; }
.theme-icon--moon { display: block; }

[data-theme="dark"] .theme-icon--sun  { display: block; }
[data-theme="dark"] .theme-icon--moon { display: none; }

/* Hamburger Menu (Mobile) */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2.25rem;
  height: 2.25rem;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: var(--radius-lg);
  transition: background var(--duration-fast);
  padding: var(--space-2);
}

.nav-hamburger:hover {
  background: var(--color-bg-muted);
}

/* Hamburger bar lines (.hamburger-bar replaces span) */
.nav-hamburger span,
.hamburger-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: var(--radius-full);
  transition:
    transform var(--duration-normal) var(--ease-spring),
    opacity var(--duration-fast) var(--ease-out),
    width var(--duration-normal) var(--ease-out);
  transform-origin: center;
}

/* Hamburger open state */
.nav-hamburger.open span:nth-child(1),
.nav-hamburger.open .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2),
.nav-hamburger.open .hamburger-bar:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open span:nth-child(3),
.nav-hamburger.open .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Menu Panel */
.mobile-menu {
  position: fixed;
  inset: 0;
  top: var(--nav-height);
  z-index: calc(var(--z-nav) - 1);
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  overflow-y: auto;
  padding: var(--space-4) 0;

  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--duration-normal) var(--ease-out),
    visibility 0s linear var(--duration-normal);
}

.mobile-menu.open {
  display: flex;
  flex-direction: column;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity var(--duration-normal) var(--ease-out),
    visibility 0s linear 0s;
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--spacing-page-x);
}

.mobile-menu-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mobile-menu-heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-2) var(--space-3);
  margin: 0;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  border-radius: var(--radius-xl);
  transition: var(--transition-fast);
  text-decoration: none;
  width: 100%;
  text-align: left;
}

.mobile-menu-item:hover,
.mobile-menu-item.active {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

@media (max-width: 767px) {
  .nav-links,
  .lang-switcher { display: none; }
  .nav-hamburger { display: flex; }
}

@media (min-width: 768px) {
  .mobile-menu { display: none; }
}


/* ==========================================================================
   02. BUTTONS
   ========================================================================== */

/* Base button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--btn-font-weight);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  border-radius: var(--btn-radius);
  transition: var(--transition-fast);
  text-decoration: none;
  user-select: none;
  position: relative;
  overflow: hidden;
  letter-spacing: var(--tracking-wide);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

/* Ripple effect overlay */
.btn:active::before {
  opacity: 0.1;
  background: white;
}

/* Primary — gradient sky blue */
.btn-primary {
  background: var(--gradient-sky);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-sm), 0 0 0 0 rgba(14, 165, 233, 0);
}

.btn-primary:hover {
  background: var(--gradient-primary-h);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), var(--shadow-glow-sm);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Secondary — glass */
.btn-secondary {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  color: var(--color-primary);
  border-color: var(--color-border-primary);
}

.btn-secondary:hover {
  background: var(--color-primary-subtle);
  border-color: var(--color-primary-xlight);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.btn-ghost:active {
  background: var(--color-border);
}

/* Danger */
.btn-danger {
  background: var(--color-danger);
  color: white;
  border-color: transparent;
}

.btn-danger:hover {
  background: var(--color-danger-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-danger);
}

/* Success */
.btn-success {
  background: var(--color-success);
  color: white;
  border-color: transparent;
}

.btn-success:hover {
  background: var(--color-success-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-success);
}

/* Icon button */
.btn-icon {
  padding: var(--space-2);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-lg);
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.btn-icon:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-color: var(--color-border-primary);
}

.btn-icon.btn-icon-lg {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-xl);
}

/* Sizes */
.btn-sm {
  font-size: var(--text-xs);
  padding: var(--space-1-5) var(--space-3-5);
  border-radius: var(--radius-md);
}

.btn-lg {
  font-size: var(--text-base);
  padding: var(--space-3-5) var(--space-7);
  border-radius: var(--radius-xl);
}

.btn-xl {
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-2xl);
  letter-spacing: var(--tracking-wide);
}

/* Full width */
.btn-block {
  width: 100%;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* Loading state */
.btn.loading {
  cursor: wait;
  pointer-events: none;
}

.btn.loading::after {
  content: '';
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
  margin-left: var(--space-2);
}

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

/* Button group */
.btn-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.btn-group .btn {
  border-radius: 0;
}

.btn-group .btn:first-child { border-radius: var(--btn-radius) 0 0 var(--btn-radius); }
.btn-group .btn:last-child  { border-radius: 0 var(--btn-radius) var(--btn-radius) 0; }
.btn-group .btn + .btn      { border-left-width: 0; }


/* ==========================================================================
   03. CARDS
   ========================================================================== */

/* Base card */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-pad);
  transition:
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring),
    border-color var(--duration-normal) var(--ease-out);
}

/* Glass card */
.card-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur) var(--glass-saturate);
  -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-pad);
  transition:
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring);
}

/* Hover lift effect */
.card-hover:hover,
.card-glass.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--color-border-primary);
}

/* Feature card (icon + title + desc) */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--card-shadow);
  transition:
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring),
    border-color var(--duration-normal) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 8rem;
  height: 8rem;
  background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--color-border-primary);
}

.feature-card__icon,
.feature-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-xl);
  background: var(--color-primary-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.feature-card__icon svg,
.feature-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.feature-card:hover .feature-card__icon,
.feature-card:hover .feature-icon {
  background: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-glow-sm);
  transform: scale(1.05);
}

/* Title: BEM class or bare h3 inside feature-card */
.feature-card__title,
.feature-card h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin: 0;
  max-width: none;
}

/* Desc: BEM class or bare p inside feature-card */
.feature-card__desc,
.feature-card p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: none;
  margin: 0;
}

/* Test card (test selector) */
.test-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition:
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring),
    border-color var(--duration-normal) var(--ease-out);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.test-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-spring);
}

.test-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--color-border-primary);
}

.test-card:hover::after {
  transform: scaleX(1);
}

/* test-card header row — BEM and kebab aliases */
.test-card__header,
.test-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

/* test-card icon — BEM and kebab aliases */
.test-card__icon,
.test-card-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--text-2xl);
  background: var(--gradient-hero);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

/* Color variants for the icon box */
.test-card-icon--primary { background: linear-gradient(135deg, var(--color-primary-subtle), rgba(14,165,233,0.25)); color: var(--color-primary); }
.test-card-icon--accent  { background: linear-gradient(135deg, var(--color-accent-subtle),  rgba(99,102,241,0.25));  color: var(--color-accent);  }
.test-card-icon--info    { background: linear-gradient(135deg, rgba(14,165,233,0.08),         rgba(14,165,233,0.2));  color: var(--color-primary); }

.test-card:hover .test-card__icon,
.test-card:hover .test-card-icon {
  transform: scale(1.08) rotate(-3deg);
  box-shadow: var(--shadow-glow-sm);
}

/* test-card badge ribbon (e.g. "Most Complete") — BEM and kebab */
.test-card__badge,
.test-card-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-full);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  white-space: nowrap;
  align-self: flex-start;
}

/* When .test-card-badge is a direct child of .test-card (ribbon at top) */
.test-card > .test-card-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

/* Featured card accent */
.test-card--featured {
  border-color: var(--color-border-primary);
  background: linear-gradient(160deg, var(--card-bg) 60%, var(--color-primary-subtle) 100%);
}

/* test-card title — BEM and kebab */
.test-card__title,
.test-card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin: 0;
}

/* test-card desc — BEM and kebab */
.test-card__desc,
.test-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  flex: 1;
  margin: 0;
  max-width: none;
}

/* test-card meta row — BEM and kebab */
.test-card__meta,
.test-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* meta items — BEM and HTML kebab variants (.test-meta-badge, .test-meta-questions) */
.test-card__meta-item,
.test-meta-badge,
.test-meta-questions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--weight-medium);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-2-5);
  white-space: nowrap;
}

.test-card__meta-item svg {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.7;
}

/* Legacy BEM CTA wrapper */
.test-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.test-card__cta-link {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  transition: gap var(--duration-fast) var(--ease-spring);
}

.test-card:hover .test-card__cta-link {
  gap: var(--space-3);
}

.test-card__cta-link svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--duration-fast) var(--ease-spring);
}

.test-card:hover .test-card__cta-link svg {
  transform: translateX(3px);
}

/* Kebab-case CTA button — direct .btn inside test-card */
.test-card-btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

/* Card sizes */
.card-sm { padding: var(--space-4); border-radius: var(--radius-xl); }
.card-lg { padding: var(--space-8); border-radius: var(--radius-3xl); }


/* ==========================================================================
   04. PROGRESS BAR
   ========================================================================== */

.progress-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.progress-label__title  { color: var(--color-text-primary); }
.progress-label__value  { color: var(--color-primary); font-weight: var(--weight-semibold); }

/* .progress-bar is the class used in test-runner HTML;
   .progress-track is kept for backwards compatibility with other components. */
.progress-track,
.progress-bar {
  height: var(--progress-height);
  background: var(--progress-bg);
  border-radius: var(--progress-radius);
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--progress-radius);
  position: relative;
  transition: width var(--duration-slow) var(--ease-out);
  will-change: width;
}

/* Shimmer effect on fill */
.progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  animation: shimmer 2s ease-in-out infinite;
}

/* Larger progress (section progress) */
.progress-lg .progress-track,
.progress-lg .progress-bar {
  height: 0.875rem;
  border-radius: var(--radius-full);
}

/* Colored variants */
.progress-success .progress-fill { background: linear-gradient(90deg, var(--color-success-light), var(--color-success)); }
.progress-warning .progress-fill { background: linear-gradient(90deg, var(--color-warning-light), var(--color-warning)); }
.progress-danger  .progress-fill { background: linear-gradient(90deg, var(--color-danger-light), var(--color-danger));  }

/* Test progress bar */
.test-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-light);
  border-bottom: 1px solid var(--color-border);
}

.test-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.test-progress__step {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.test-progress__pct {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}


/* ==========================================================================
   05. FORM ELEMENTS / OPTION BUTTONS
   ========================================================================== */

/* Option button — for test questions */
.option-btn {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: left;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  position: relative;
  overflow: hidden;
  min-height: 3.5rem;   /* Touch-friendly 56px */
}

.option-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.option-btn:hover {
  border-color: var(--color-border-primary);
  background: var(--color-primary-subtle);
  transform: translateX(4px);
}

/* Option indicator circle */
.option-btn__indicator {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-strong);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  background: white;
}

.option-btn__label {
  flex: 1;
  line-height: var(--leading-snug);
}

/* Option number */
.option-btn__num {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

/* Selected state */
.option-btn.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  box-shadow: var(--shadow-glow-sm);
}

.option-btn.selected .option-btn__indicator {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

/* Checkmark icon */
.option-btn.selected .option-btn__indicator::after {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(45deg) translate(-1px, -1px);
}

.option-btn.selected .option-btn__num {
  background: var(--color-primary);
  color: white;
}

/* Frequency labels (Never/Always type) */
.option-scale {
  display: flex;
  gap: var(--space-2);
}

.option-scale .option-btn {
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-2);
  text-align: center;
  min-height: 4rem;
}

.option-scale .option-btn__label {
  font-size: var(--text-xs);
  text-align: center;
}

/* Standard form input */
.form-input {
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--space-4);
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: var(--input-radius);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  transition: var(--transition-fast);
  outline: none;
}

.form-input:hover {
  border-color: var(--color-border-strong);
}

.form-input:focus {
  border-color: var(--input-focus-border);
  box-shadow: var(--input-focus-ring);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1-5);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1-5);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin-top: var(--space-1-5);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.form-group + .form-group {
  margin-top: var(--space-5);
}


/* ==========================================================================
   06. SCORE CIRCLE (SVG)
   ========================================================================== */

.score-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--score-circle-size);
  height: var(--score-circle-size);
}

.score-circle svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.score-circle__track {
  fill: none;
  stroke: var(--color-bg-muted);
  stroke-width: var(--score-circle-stroke);
}

.score-circle__fill {
  fill: none;
  stroke: url(#score-gradient);
  stroke-width: var(--score-circle-stroke);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--duration-slowest) var(--ease-out);
  animation: drawCircle var(--duration-slowest) var(--ease-out) forwards;
}

.score-circle__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
}

.score-circle__number {
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: 1;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: var(--tracking-tighter);
}

.score-circle__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-top: var(--space-1);
}

.score-circle__max {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  line-height: 1;
}

/* Size variants */
.score-circle-sm {
  --score-circle-size: 7rem;
  --score-circle-stroke: 8;
}

.score-circle-sm .score-circle__number { font-size: var(--text-2xl); }

.score-circle-lg {
  --score-circle-size: 14rem;
  --score-circle-stroke: 12;
}

.score-circle-lg .score-circle__number { font-size: var(--text-5xl); }

/* Severity colors */
.score-circle.minimal  .score-circle__fill { stroke: var(--color-severity-minimal);  }
.score-circle.low      .score-circle__fill { stroke: var(--color-severity-low);      }
.score-circle.moderate .score-circle__fill { stroke: var(--color-severity-moderate); }
.score-circle.high     .score-circle__fill { stroke: var(--color-severity-high);     }
.score-circle.very-high .score-circle__fill { stroke: var(--color-severity-very-high); }

/* Glow by severity */
.score-circle.minimal  { filter: drop-shadow(0 0 12px rgba(16,185,129,0.35)); }
.score-circle.moderate { filter: drop-shadow(0 0 12px rgba(245,158,11,0.35)); }
.score-circle.high     { filter: drop-shadow(0 0 12px rgba(249,115,22,0.35)); }
.score-circle.very-high{ filter: drop-shadow(0 0 12px rgba(239,68,68,0.35));  }


/* ==========================================================================
   07. BADGES / SEVERITY LABELS
   ========================================================================== */

/* Base badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: var(--tracking-wide);
}

.badge-primary {
  background: var(--color-primary-subtle);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary-xlight);
}

.badge-accent {
  background: var(--color-accent-subtle);
  color: var(--color-accent-dark);
}

.badge-success {
  background: var(--color-success-subtle);
  color: var(--color-success-dark);
}

.badge-warning {
  background: var(--color-warning-subtle);
  color: var(--color-warning-dark);
}

.badge-danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger-dark);
}

.badge-muted {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
}

/* Severity badges */
.severity-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-3-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  line-height: 1;
  white-space: nowrap;
}

.severity-badge::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

.severity-minimal {
  background: var(--color-severity-minimal-bg);
  color: var(--color-severity-minimal);
}

.severity-low {
  background: var(--color-severity-low-bg);
  color: var(--color-severity-low);
}

.severity-moderate {
  background: var(--color-severity-moderate-bg);
  color: var(--color-severity-moderate);
}

.severity-high {
  background: var(--color-severity-high-bg);
  color: var(--color-severity-high);
}

.severity-very-high {
  background: var(--color-severity-very-high-bg);
  color: var(--color-severity-very-high);
}

/* BEM-style severity badge modifiers (alias for .severity-* classes) */
.severity-badge--minimal {
  background: var(--color-severity-minimal-bg);
  color: var(--color-severity-minimal);
}

.severity-badge--low {
  background: var(--color-severity-low-bg);
  color: var(--color-severity-low);
}

.severity-badge--moderate {
  background: var(--color-severity-moderate-bg);
  color: var(--color-severity-moderate);
}

.severity-badge--high {
  background: var(--color-severity-high-bg);
  color: var(--color-severity-high);
}

.severity-badge--very-high {
  background: var(--color-severity-very-high-bg);
  color: var(--color-severity-very-high);
}

/* Large severity badge (for result interpretation card) */
.severity-badge-lg {
  font-size: var(--text-base);
  padding: var(--space-2-5) var(--space-5);
  border-radius: var(--radius-xl);
  font-weight: var(--weight-bold);
}

.severity-badge-lg::before {
  width: 0.625rem;
  height: 0.625rem;
}

/* Dot indicator */
.dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
}

.dot-primary   { background: var(--color-primary);            }
.dot-success   { background: var(--color-severity-minimal);   }
.dot-warning   { background: var(--color-severity-moderate);  }
.dot-danger    { background: var(--color-severity-very-high); }


/* ==========================================================================
   08. MODALS
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--color-bg-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);

  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--duration-normal) var(--ease-out),
    visibility 0s linear var(--duration-normal);
}

.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity var(--duration-normal) var(--ease-out),
    visibility 0s linear 0s;
}

.modal {
  position: relative;
  z-index: var(--z-modal);
  width: 100%;
  max-width: var(--modal-max-w);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border: 1px solid var(--glass-border);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);

  transform: scale(0.95) translateY(8px);
  transition: transform var(--duration-normal) var(--ease-spring);
}

.modal-backdrop.open .modal {
  transform: scale(1) translateY(0);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.modal__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-lg);
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.modal__close:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.modal__body {
  padding: var(--space-6);
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* Modal sizes */
.modal-sm { max-width: 22rem; }
.modal-lg { max-width: 44rem; }
.modal-xl { max-width: 56rem; }


/* ==========================================================================
   09. TOAST NOTIFICATIONS
   ========================================================================== */

.toast-region {
  position: fixed;
  top: calc(var(--nav-height) + var(--space-4));
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
  max-width: var(--toast-width);
  width: calc(100vw - 2rem);
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border: 1px solid var(--glass-border);
  border-radius: var(--toast-radius);
  box-shadow: var(--toast-shadow);
  pointer-events: auto;
  cursor: pointer;
  transition: var(--transition-normal);

  /* Entry animation */
  animation: slideInRight var(--duration-normal) var(--ease-spring) forwards;
}

.toast.toast-exit {
  animation: slideOutRight var(--duration-normal) var(--ease-in) forwards;
}

.toast__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.1em;
}

.toast__content {
  flex: 1;
  min-width: 0;
}

.toast__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.toast__message {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-0-5);
  line-height: var(--leading-normal);
}

.toast__close {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-tertiary);
  transition: var(--transition-fast);
  cursor: pointer;
}

.toast__close:hover { color: var(--color-text-primary); }

/* Toast types */
.toast-success {
  border-left: 3px solid var(--color-success);
}

.toast-success .toast__icon { color: var(--color-success); }

.toast-warning {
  border-left: 3px solid var(--color-warning);
}

.toast-warning .toast__icon { color: var(--color-warning); }

.toast-error {
  border-left: 3px solid var(--color-danger);
}

.toast-error .toast__icon { color: var(--color-danger); }

.toast-info {
  border-left: 3px solid var(--color-primary);
}

.toast-info .toast__icon { color: var(--color-primary); }

/* Progress bar inside toast */
.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.3;
  border-radius: 0 0 var(--toast-radius) var(--toast-radius);
  animation: toastProgress linear forwards;
}


/* ==========================================================================
   10. TABS
   ========================================================================== */

.tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.tabs__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tabs__nav::-webkit-scrollbar { display: none; }

.tab-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-fast);
  margin-bottom: -1px;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.tab-btn:hover {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}

.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.tab-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Pill tabs variant */
.tabs-pill .tabs__nav {
  border-bottom: none;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  padding: var(--space-1);
  gap: var(--space-1);
}

.tabs-pill .tab-btn {
  border-radius: var(--radius-full);
  border: none;
  margin: 0;
}

.tabs-pill .tab-btn.active {
  background: var(--color-bg-card);
  color: var(--color-primary);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

.tab-panel {
  display: none;
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

.tab-panel.active {
  display: block;
}


/* ==========================================================================
   11. TOOLTIP
   ========================================================================== */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  z-index: var(--z-tooltip);
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%) translateY(4px);
}

[data-tooltip]::after {
  content: '';
  border: 5px solid transparent;
  border-top-color: var(--color-text-primary);
  bottom: calc(100% + 0.15rem);
  transform: translateX(-50%) translateY(4px);
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Bottom tooltip */
[data-tooltip-pos="bottom"]::before,
[data-tooltip-pos="bottom"]::after {
  top: calc(100% + 0.5rem);
  bottom: auto;
  transform: translateX(-50%) translateY(-4px);
}

[data-tooltip-pos="bottom"]::after {
  border-top-color: transparent;
  border-bottom-color: var(--color-text-primary);
  top: calc(100% + 0.15rem);
}

[data-tooltip-pos="bottom"]:hover::before,
[data-tooltip-pos="bottom"]:hover::after {
  transform: translateX(-50%) translateY(0);
}


/* ==========================================================================
   12. SKELETON LOADER
   ========================================================================== */

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

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  animation: shimmer 1.5s ease-in-out infinite;
}

[data-theme="dark"] .skeleton::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
}

.skeleton-text {
  height: 1em;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
}

.skeleton-text-sm { height: 0.75em; }
.skeleton-text-lg { height: 1.5em;  }

.skeleton-title {
  height: 2rem;
  width: 60%;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.skeleton-circle {
  border-radius: var(--radius-full);
  aspect-ratio: 1;
}

.skeleton-card {
  border-radius: var(--radius-2xl);
  height: 16rem;
}

/* Skeleton card layout */
.skeleton-card-inner {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
}

/* Page skeleton */
.page-skeleton {
  padding: var(--space-8) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}


/* ==========================================================================
   13. RADAR CHART CONTAINER
   ========================================================================== */

.radar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  aspect-ratio: 1;
  position: relative;
}

.radar-canvas {
  width: 100%;
  height: 100%;
}

/* Radar legend */
.radar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}

.radar-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}

.radar-legend-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Radar labels (SVG text) */
.radar-label {
  font-size: 11px;
  font-family: var(--font-sans);
  fill: var(--color-text-secondary);
  font-weight: 500;
}


/* ==========================================================================
   14. BAR CHART (HORIZONTAL)
   ========================================================================== */

.bar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bar-chart__row {
  display: grid;
  grid-template-columns: 8rem 1fr 3.5rem;
  align-items: center;
  gap: var(--space-3);
}

@media (max-width: 480px) {
  .bar-chart__row {
    grid-template-columns: 6rem 1fr 3rem;
    gap: var(--space-2);
  }
}

.bar-chart__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-chart__track {
  height: 0.75rem;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.bar-chart__fill {
  height: 100%;
  border-radius: var(--radius-full);
  position: relative;
  transition: width var(--duration-slow) var(--ease-out);
  min-width: 4px;
  background: var(--gradient-primary);
}

.bar-chart__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2.5s ease-in-out infinite;
}

.bar-chart__value {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  text-align: left;
  white-space: nowrap;
}

/* Color variants */
.bar-chart__fill.success { background: linear-gradient(90deg, var(--color-success-light), var(--color-success)); }
.bar-chart__fill.warning { background: linear-gradient(90deg, var(--color-warning-light), var(--color-warning)); }
.bar-chart__fill.danger  { background: linear-gradient(90deg, var(--color-danger-light), var(--color-danger));  }
.bar-chart__fill.accent  { background: linear-gradient(90deg, var(--color-accent-light), var(--color-accent));  }


/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-8);
  margin-top: auto;
}

.footer-inner {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 14rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  text-decoration: none;
}

.footer-logo:hover {
  color: var(--color-primary);
}

.footer-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  max-width: 30ch;
  margin: 0;
}

/* Footer nav links row */
.footer-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: center;
  flex: 1 1 auto;
}

.footer-links a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.footer-links a:hover {
  color: var(--color-primary);
}

/* Donate block in footer */
.footer-donate {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.btn-donate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  font-family: var(--font-sans);
}

.btn-donate:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-color: var(--color-border-primary);
  box-shadow: var(--shadow-glow-sm);
}

.btn-donate svg {
  color: var(--color-danger);
  flex-shrink: 0;
}

.footer-bottom {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-copy {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin: 0;
}

.footer-disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin: 0;
  max-width: 55ch;
}

@media (min-width: 640px) {
  .footer-disclaimer { text-align: right; }
}

/* Sticky minimal footer */
.footer-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--spacing-footer-h);
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--color-border);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding-inline: var(--spacing-page-x);
}

.footer-sticky__text {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}


/* ==========================================================================
   16. DONATE BUTTON (FLOATING)
   ========================================================================== */

.donate-float {
  position: fixed;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  right: var(--space-6);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-4);
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-normal);
  text-decoration: none;
  white-space: nowrap;
  animation: float 4s ease-in-out infinite;
}

.donate-float:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-color: var(--color-border-primary);
  box-shadow: var(--shadow-glow-sm);
  transform: translateY(-2px);
  animation-play-state: paused;
}

.donate-float__icon {
  font-size: var(--text-base);
  flex-shrink: 0;
}

/* Collapsed state (icon only, text hidden) */
.donate-float.collapsed .donate-float__text {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-width var(--duration-normal) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.donate-float:hover .donate-float__text,
.donate-float.expanded .donate-float__text {
  max-width: 8rem;
  opacity: 1;
}


/* ==========================================================================
   ADDITIONAL SHARED COMPONENTS
   ========================================================================== */

/* --- Chip / Tag --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: default;
  transition: var(--transition-fast);
}

.chip-interactive:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-color: var(--color-border-primary);
  cursor: pointer;
}

/* --- Divider with text --- */
.divider-text {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  margin-block: var(--space-4);
}

.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* --- Avatar --- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: white;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-sm { width: 2rem;    height: 2rem;    font-size: var(--text-xs);  }
.avatar-lg { width: 3.5rem;  height: 3.5rem;  font-size: var(--text-xl);  }
.avatar-xl { width: 5rem;    height: 5rem;    font-size: var(--text-2xl); }

/* --- Accordion --- */
.accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow var(--duration-fast);
}

.accordion-item + .accordion-item {
  margin-top: var(--space-2);
}

.accordion-item.open {
  box-shadow: var(--shadow-sm);
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-card);
  border: none;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  text-align: left;
  transition: background var(--duration-fast);
}

.accordion-trigger:hover {
  background: var(--color-bg-muted);
}

.accordion-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-spring);
  color: var(--color-text-tertiary);
}

.accordion-item.open .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  padding: 0 var(--space-5) var(--space-5);
  background: var(--color-bg-card);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  display: none;
}

.accordion-item.open .accordion-content {
  display: block;
  animation: fadeInDown var(--duration-normal) var(--ease-out);
}

/* --- Step Indicator --- */
.steps {
  display: flex;
  align-items: center;
  gap: 0;
}

.step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}

.step:last-child { flex: none; }

.step__circle {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-tertiary);
  background: var(--color-bg-card);
  flex-shrink: 0;
  transition: var(--transition-normal);
}

.step.completed .step__circle {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.step.active .step__circle {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--btn-focus-ring);
}

.step__line {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  margin-inline: var(--space-2);
  transition: background var(--duration-normal);
}

.step.completed .step__line {
  background: var(--color-primary);
}

.step__label {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.step.active .step__label,
.step.completed .step__label {
  color: var(--color-primary);
}