/* Clear Filters button: show an outer ring on hover/focus without color changes */
body.use-minimal #clearFiltersBtn {
  transition: box-shadow .18s ease, transform .18s ease;
  font-weight: 400 !important; /* ensure normal weight even if fw-semibold is present */
}

/* Colourful animated gradient text (React-free version of ColourfulText) */
body.use-minimal .colourful-text {
  /* Fallback color in case background-clip not supported */
  color: var(--text);
  background: linear-gradient(90deg,
    var(--primary) 0%,
    #22d3ee 20%,
    #a78bfa 40%,
    #f59e0b 60%,
    #10b981 80%,
    var(--primary) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: colourful-sheen 8s linear infinite;
}
@keyframes colourful-sheen {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  body.use-minimal .colourful-text { animation: none; }
}
/* Light mode: make the left icon pane visible on Clear Filters */
body.use-minimal[data-theme="light"] #clearFiltersBtn .btn-pane-left,
html[data-theme="light"] body.use-minimal #clearFiltersBtn .btn-pane-left {
  background: color-mix(in srgb, var(--text) 10%, #ffffff 90%);
  border: none;
  color: var(--text);
}

/* Rebalance filter form column widths on md+ screens */
@media (min-width: 768px) {
  /* Input field (first column) -> 40% */
  body.use-minimal #filterForm > .col-md-6:nth-child(1) {
    flex: 0 0 40% !important;
    max-width: 40% !important;
  }
  /* Category select (second column) -> 40% */
  body.use-minimal #filterForm > .col-md-3:nth-child(2) {
    flex: 0 0 40% !important;
    max-width: 40% !important;
  }
  /* Clear Filters button (third column) -> 20% */
  body.use-minimal #filterForm > .col-md-3:nth-child(3) {
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }
}
/* SVG stroke fallback (always visible) */
body.use-minimal .hero-glow .hero-glow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
}
body.use-minimal .hero-glow .hero-glow-rect,
body.use-minimal .hero-glow .hero-glow-rect-blur {
  stroke: #22d3ee; /* cyan */
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 300 700; /* 30% arc, 70% gap (normalized via pathLength) */
  stroke-dashoffset: 0;
  animation: hero-stroke-dash 6s linear infinite;
}
body.use-minimal .hero-glow .hero-glow-rect-blur {
  opacity: .35;
}
html[data-theme="dark"] body.use-minimal .hero-glow .hero-glow-rect,
html[data-theme="dark"] body.use-minimal .hero-glow .hero-glow-rect-blur {
  stroke: rgba(255,255,255,0.95);
}
@keyframes hero-stroke-dash {
  to { stroke-dashoffset: -1000; }
}
body.use-minimal #clearFiltersBtn:hover,
body.use-minimal #clearFiltersBtn:focus-visible {
  box-shadow: 0 0 0 2px rgba(2,6,23,0.22); /* subtle ring in light mode */
}
html[data-theme="dark"] body.use-minimal #clearFiltersBtn:hover,
html[data-theme="dark"] body.use-minimal #clearFiltersBtn:focus-visible {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.28) !important; /* subtle ring in dark mode */
}
/* Minimal theme (opt-in). Activated when body has .use-minimal */
/* Light/Dark tokens */
body.use-minimal {
  --bg: #0b0c0f;            /* default to dark until theme attr applied */
  --surface: #121418;
  --surface-2: #161922;
  --text: #e9edf1;
  /* use dim white as default muted since default state is dark */
  --muted: rgba(255,255,255,0.85);
  --primary: #006FEE; /* NextUI Primary */
  --primary-600: #005FCC; /* Hover/Darker */
  --danger: #ef4444;
  --success: #22c55e;
  --warning: #f59e0b;
  --divider: rgba(255,255,255,0.08);
  --focus-ring: 0 0 0 3px rgba(0,111,238,0.32);
  --radius: 10px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
/* Make inner containers transparent in floating state so the blur shows through */
html body.use-minimal nav.navbar.navbar-floating > .container-xxl,
html body.use-minimal nav.navbar.navbar-floating .navbar-collapse,
html body.use-minimal nav.navbar.navbar-floating .navbar-brand {
  background: transparent !important;
  box-shadow: none !important;
}

/* Guarantee nav links render and are readable */
body.use-minimal .navbar .navbar-nav .nav-link {
  display: block !important;
  opacity: 1 !important;
}
/* Extra safety: force color and visibility for all nav items */
body.use-minimal .navbar .navbar-brand,
body.use-minimal .navbar .nav-link {
  color: var(--text) !important;
  visibility: visible !important;
}
/* Ensure nav items lay out horizontally when expanded and inside collapse when shown */
body.use-minimal .navbar .navbar-collapse { overflow: visible; }
body.use-minimal .navbar .navbar-collapse.show .navbar-nav { display: flex !important; }
body.use-minimal .navbar .navbar-nav > .nav-item { display: inline-flex; align-items: center; }
body.use-minimal .navbar .navbar-nav > .nav-item > .nav-link { display: inline-flex !important; align-items: center; }

/* Ensure toggler is visible on dark navbar */
body.use-minimal .navbar.navbar-dark .navbar-toggler {
  border-color: rgba(255,255,255,0.25);
}
body.use-minimal .navbar.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Small screens: push the toggler to the far right and keep it above floating glass */
@media (max-width: 991.98px) {
  body.use-minimal .navbar .navbar-toggler { margin-left: auto; }
  body.use-minimal nav.navbar.navbar-floating .navbar-toggler { position: relative; z-index: 1040; }
  /* Add compact side padding when floating to prevent edge clipping */
  body.use-minimal nav.navbar.navbar-floating > .container-xxl,
  body.use-minimal nav.navbar.navbar-floating > .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Light mode overrides */
body.use-minimal[data-theme="light"],
html[data-theme="light"] body.use-minimal {
  /* Refined light palette for higher clarity and contrast */
  --bg: #ffffff;          /* clean white page */
  --surface: #ffffff;     /* white cards/nav */
  --surface-2: #f3f4f6;   /* soft panel/input bg */
  --text: #0b1220;        /* near-black */
  --muted: #64748b;       /* slate-500 */
  --primary: #006FEE;     /* NextUI primary */
  --primary-600: #005FCC; /* darker */
  --danger: #ef4444;      /* red-500 */
  --success: #16a34a;     /* green-600 */
  --warning: #f59e0b;     /* amber-500 */
  --divider: rgba(2, 6, 23, 0.08);
  --focus-ring: 0 0 0 3px rgba(0,111,238,0.28);
}

/* Dark mode overrides */
body.use-minimal[data-theme="dark"],
html[data-theme="dark"] body.use-minimal {
  --bg: #0b0c0f;
  --surface: #111318;
  --surface-2: #161a21;
  --text: #e9edf1;
  /* dim white for muted/secondary text across the site */
  --muted: rgba(255,255,255,0.85);
  /* Bootstrap token alignment for dark mode */
  --bs-secondary-color: rgba(255,255,255,0.90);
  --bs-secondary-color-rgb: 255,255,255;
  --bs-tertiary-color: rgba(255,255,255,0.82);
  --primary: #006FEE;
  --primary-600: #005FCC;
  --divider: rgba(255,255,255,0.08);
}

/* Base */
body.use-minimal {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
}
/* Prevent any horizontal overflow in minimal theme */
html { overflow-x: clip; }
body.use-minimal { overflow-x: clip; }
/* Also clamp main content to avoid row gutters causing scroll */
body.use-minimal .main-content { overflow-x: clip; }
/* If a Bootstrap .row is used directly under .main-content, remove negative margins */
body.use-minimal .main-content > .row { margin-left: 0 !important; margin-right: 0 !important; }

/* Full-width navbar edge spacing (logo left, toggle right) */
body.use-minimal nav.navbar:not(.navbar-floating) > .container-xxl,
body.use-minimal nav.navbar:not(.navbar-floating) > .container-fluid {
  padding-left: 64px !important;
  padding-right: 64px !important;
}
/* Extra edge room inside full-width bar */
body.use-minimal nav.navbar:not(.navbar-floating) .navbar-brand { margin-left: 0 !important; }
body.use-minimal nav.navbar:not(.navbar-floating) #theme-toggle-icon { margin-right: 0 !important; }

body.use-minimal .container, body.use-minimal .container-fluid {
  max-width: 1100px;
}

/* Cards */
body.use-minimal .card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
}
/* Dark mode: ensure base text in cards is not too dim */
html[data-theme="dark"] body.use-minimal .card {
  color: rgba(255,255,255,0.92) !important;
}
/* Animated gradient border ring ONLY for hero feature cards on home */
body.use-minimal .feature-card {
  position: relative;
  overflow: hidden; /* allow ring to clip to radius */
}
body.use-minimal .feature-card::before {
  content: "";
  position: absolute;
  inset: -1px;                      /* extend slightly to cover stroke */
  border-radius: inherit;
  padding: 2px;                      /* ring thickness */
  background: conic-gradient(
    from 0deg,
    #22c55e, #06b6d4, #3b82f6, #8b5cf6, #f97316, #ef4444, #22c55e
  );
  /* Show only the border by masking out the inner area */
  mask: 
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: minimal-card-gradient-rotate 6s linear infinite;
  opacity: 0.22;                     /* subtle by default */
  transition: opacity .25s ease;
  pointer-events: none;              /* don't block interactions */
}
/* Soft outer glow */
body.use-minimal .feature-card::after {
  content: "";
  position: absolute;
  inset: -8px;                       /* extend outward for glow */
  border-radius: inherit;
  background: radial-gradient(40% 40% at 50% 50%, rgba(59,130,246,0.12), transparent 70%);
  filter: blur(8px);
  opacity: 0.15;
  transition: opacity .25s ease;
  pointer-events: none;
}
/* Intensify on hover or when focused within */
body.use-minimal .feature-card:hover::before,
body.use-minimal .feature-card:focus-within::before {
  opacity: 0.35;
}
body.use-minimal .feature-card:hover::after,
body.use-minimal .feature-card:focus-within::after { opacity: 0.28; }
/* Dark mode: slightly stronger visibility */
html[data-theme="dark"] body.use-minimal .feature-card::before { opacity: 0.26; }
html[data-theme="dark"] body.use-minimal .feature-card:hover::before,
html[data-theme="dark"] body.use-minimal .feature-card:focus-within::before { opacity: 0.42; }
html[data-theme="dark"] body.use-minimal .feature-card::after { opacity: 0.18; }
html[data-theme="dark"] body.use-minimal .feature-card:hover::after,
html[data-theme="dark"] body.use-minimal .feature-card:focus-within::after { opacity: 0.32; }

@keyframes minimal-card-gradient-rotate {
  to { transform: rotate(360deg); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.use-minimal .feature-card::before { animation-duration: 24s; }
}
body.use-minimal .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--divider) !important;
}

/* Light mode: force readable text for headers that used bg-primary + text-white (e.g., Practice Tests) */
body.use-minimal[data-theme="light"] .card-header.bg-primary.text-white,
html[data-theme="light"] body.use-minimal .card-header.bg-primary.text-white {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-bottom-color: var(--divider) !important;
}
/* Ensure heading inside is dark as well */
body.use-minimal[data-theme="light"] .card-header.bg-primary.text-white h1,
body.use-minimal[data-theme="light"] .card-header.bg-primary.text-white h2,
body.use-minimal[data-theme="light"] .card-header.bg-primary.text-white h3,
body.use-minimal[data-theme="light"] .card-header.bg-primary.text-white h4,
body.use-minimal[data-theme="light"] .card-header.bg-primary.text-white h5,
body.use-minimal[data-theme="light"] .card-header.bg-primary.text-white h6,
html[data-theme="light"] body.use-minimal .card-header.bg-primary.text-white h1,
html[data-theme="light"] body.use-minimal .card-header.bg-primary.text-white h2,
html[data-theme="light"] body.use-minimal .card-header.bg-primary.text-white h3,
html[data-theme="light"] body.use-minimal .card-header.bg-primary.text-white h4,
html[data-theme="light"] body.use-minimal .card-header.bg-primary.text-white h5,
html[data-theme="light"] body.use-minimal .card-header.bg-primary.text-white h6 {
  color: var(--text) !important;
}

/* Light mode: ensure category/section badges are visible on Practice Tests cards */
body.use-minimal[data-theme="light"] .badge-reading,
html[data-theme="light"] body.use-minimal .badge-reading {
  background: var(--primary) !important;
  color: #fff !important;
}
body.use-minimal[data-theme="light"] .badge-writing,
html[data-theme="light"] body.use-minimal .badge-writing {
  background: var(--warning) !important;
  color: #111418 !important;
}
body.use-minimal[data-theme="light"] .badge-listening,
html[data-theme="light"] body.use-minimal .badge-listening {
  background: var(--success) !important;
  color: #fff !important;
}
body.use-minimal[data-theme="light"] .badge-speaking,
html[data-theme="light"] body.use-minimal .badge-speaking {
  background: var(--primary-600) !important; /* darker blue to differentiate */
  color: #fff !important;
}
body.use-minimal[data-theme="light"] .badge-default,
html[data-theme="light"] body.use-minimal .badge-default {
  background: color-mix(in srgb, var(--text) 35%, #ffffff 65%) !important;
  color: #111418 !important;
}

/* Dark mode: match site palette and ensure contrast */
body.use-minimal[data-theme="dark"] .badge-reading,
html[data-theme="dark"] body.use-minimal .badge-reading {
  background: var(--primary) !important;
  color: #fff !important;
}
body.use-minimal[data-theme="dark"] .badge-writing,
html[data-theme="dark"] body.use-minimal .badge-writing {
  background: var(--warning) !important;
  color: #111418 !important; /* dark text on warm/bright amber */
}
body.use-minimal[data-theme="dark"] .badge-listening,
html[data-theme="dark"] body.use-minimal .badge-listening {
  background: var(--success) !important;
  color: #fff !important;
}
body.use-minimal[data-theme="dark"] .badge-speaking,
html[data-theme="dark"] body.use-minimal .badge-speaking {
  background: var(--primary-600) !important; /* slightly darker variant */
  color: #fff !important;
}
body.use-minimal[data-theme="dark"] .badge-default,
html[data-theme="dark"] body.use-minimal .badge-default {
  background: color-mix(in srgb, #ffffff 22%, var(--surface) 78%) !important;
  color: #ffffff !important;
}

/* One-line moving glow for the hero illustration card */
body.use-minimal .hero-glow {
  position: relative;
  border-radius: 12px; /* ensure smooth corners */
  border-color: var(--divider) !important; /* keep a subtle base border visible */
  isolation: isolate; /* create a stacking context for pseudos */
  overflow: visible; /* avoid clipping the glow */
  /* theme-aware halo color */
  --hero-halo: rgba(34,211,238,0.25);
}
html[data-theme="dark"] body.use-minimal .hero-glow { --hero-halo: rgba(255,255,255,0.18); }
/* Outer halo around the card */
body.use-minimal .hero-glow::after {
  content: "";
  position: absolute;
  inset: -10px; /* extend slightly outside */
  border-radius: inherit;
  pointer-events: none;
  z-index: 80; /* below the border arc (120) but above background */
  box-shadow: 0 0 28px 10px var(--hero-halo);
}
/* Simple fallback: four animated edge segments */
body.use-minimal .hero-glow .glow-walker {
  display: none !important; /* use single-arc renderer instead */
}
html[data-theme="dark"] body.use-minimal .hero-glow .glow-walker {
  color: #ffffff;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.35));
}
body.use-minimal .hero-glow .glow-walker .edge {
  position: absolute;
  background-repeat: no-repeat;
  opacity: 0; /* default hidden; we reveal only one edge at a time */
  will-change: opacity, background-position;
}
/* Top edge */
body.use-minimal .hero-glow .glow-walker .edge.top {
  left: -2px; right: -2px; top: -2px; height: 4px;
  background-image: linear-gradient(90deg,
    rgba(0,0,0,0) 0 80%,
    #fde047 82%,
    #f59e0b 100%
  );
  background-size: 220% 100%;
  animation: glow-walk-x 4s linear infinite, glow-vis 4s linear infinite;
}
/* Right edge */
body.use-minimal .hero-glow .glow-walker .edge.right {
  right: -2px; top: -2px; bottom: -2px; width: 4px;
  background-image: linear-gradient(180deg,
    rgba(0,0,0,0) 0 80%,
    #fde047 82%,
    #f59e0b 100%
  );
  background-size: 100% 220%;
  animation: glow-walk-y 4s linear infinite, glow-vis 4s linear infinite; 
  animation-delay: 1s, 1s;
}
/* Bottom edge */
body.use-minimal .hero-glow .glow-walker .edge.bottom {
  left: -2px; right: -2px; bottom: -2px; height: 4px;
  background-image: linear-gradient(270deg,
    rgba(0,0,0,0) 0 80%,
    #fde047 82%,
    #f59e0b 100%
  );
  background-size: 220% 100%;
  animation: glow-walk-x 4s linear infinite, glow-vis 4s linear infinite; 
  animation-delay: 2s, 2s;
}
/* Left edge */
body.use-minimal .hero-glow .glow-walker .edge.left {
  left: -2px; top: -2px; bottom: -2px; width: 4px;
  background-image: linear-gradient(0deg,
    rgba(0,0,0,0) 0 80%,
    #fde047 82%,
    #f59e0b 100%
  );
  background-size: 100% 220%;
  animation: glow-walk-y 4s linear infinite, glow-vis 4s linear infinite; 
  animation-delay: 3s, 3s;
}
@keyframes glow-walk-x { from { background-position-x: 0%; } to { background-position-x: 200%; } }
@keyframes glow-walk-y { from { background-position-y: 0%; } to { background-position-y: 200%; } }
/* visibility cycle: only active for first quarter of its cycle */
@keyframes glow-vis {
  0% { opacity: 1; }
  22% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; }
}
/* Child span renderer: single moving arc via conic-gradient + mask ring */
@property --hero-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
body.use-minimal .hero-glow .hero-glow-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  display: block;
  pointer-events: none;
  z-index: 120; /* ensure above contents */
  padding: 4px; /* ring thickness */
  --hero-a: 0deg;
  color: #22d3ee; /* arc color in light */
  background: conic-gradient(from var(--hero-a),
              transparent 0turn 0.83turn,
              currentColor 0.83turn 0.97turn,
              transparent 0.97turn 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; /* ring */
  animation: hero-angle-spin 6s linear infinite;
  filter: drop-shadow(0 0 8px rgba(34,211,238,0.45));
}
html[data-theme="dark"] body.use-minimal .hero-glow .hero-glow-border { color: #ffffff; filter: drop-shadow(0 0 8px rgba(255,255,255,0.35)); }
@keyframes hero-angle-spin { to { --hero-a: 360deg; } }
/* Inner span renderer (highest compatibility) */
body.use-minimal .hero-glow .hero-glow-ring {
  position: absolute;
  inset: -1px;                       /* sits over the base border */
  border-radius: inherit;
  padding: 3px;                      /* ring thickness */
  background:
    conic-gradient(from 0deg,
      rgba(255,255,255,0) 0deg 290deg,
      rgba(59,130,246,1) 290deg 350deg,
      rgba(255,255,255,0) 350deg 360deg) border-box,
    var(--surface-2) padding-box; /* inner fill to create the ring */
  background-clip: border-box, padding-box;
  animation: hero-glow-rotate 6s linear infinite;
  pointer-events: none;
  z-index: 2;
  display: none; /* keep disabled */
}
/* Animated one-line ring on ::after (safe with Bootstrap .ratio) */
body.use-minimal .hero-glow::after { display: none !important; }
/* Dark mode: brighter arc */
html[data-theme="dark"] body.use-minimal .hero-glow::after { display: none !important; }
html[data-theme="dark"] body.use-minimal .hero-glow .hero-glow-ring {
  background:
    conic-gradient(from 0deg,
      rgba(255,255,255,0) 0deg 290deg,
      rgba(255,255,255,1) 290deg 350deg,
      rgba(255,255,255,0) 350deg 360deg) border-box,
    var(--surface-2) padding-box;
  background-clip: border-box, padding-box;
}

@keyframes hero-glow-rotate { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  body.use-minimal .hero-glow::after { animation-duration: 20s; }
}

/* Typography scale */
body.use-minimal h1, body.use-minimal .h1 { font-weight: 800; letter-spacing: -0.02em; }
body.use-minimal h2, body.use-minimal .h2 { font-weight: 700; letter-spacing: -0.01em; }
body.use-minimal h3, body.use-minimal .h3 { font-weight: 700; letter-spacing: -0.005em; }
/* Aceternity-like heading sizes */
body.use-minimal h1, body.use-minimal .h1 { font-size: clamp(2.25rem, 4vw + .5rem, 3.25rem); }
body.use-minimal h2, body.use-minimal .h2 { font-size: clamp(1.5rem, 2vw + .5rem, 2rem); }
body.use-minimal h3, body.use-minimal .h3 { font-size: clamp(1.25rem, 1.2vw + .5rem, 1.5rem); }
body.use-minimal .text-muted, body.use-minimal .muted { color: var(--muted) !important; }

/* Map common Bootstrap utilities to theme tokens */
body.use-minimal .bg-body-tertiary { background-color: var(--surface-2) !important; }
body.use-minimal .text-secondary { color: var(--muted) !important; }
body.use-minimal .border-top { border-top-color: var(--divider) !important; }
body.use-minimal .border-bottom { border-bottom-color: var(--divider) !important; }

/* Profile: Followers/Following counters (theme-aware) */
body.use-minimal .follow-counter,
body.use-minimal .follow-counter:link,
body.use-minimal .follow-counter:visited,
body.use-minimal .follow-counter:active {
  /* Remove transition to avoid stagger between anchor and its children */
  text-decoration: none !important;
}
/* Light: black text */
body.use-minimal[data-theme="light"] .follow-counter,
body.use-minimal[data-theme="light"] .follow-counter:link,
body.use-minimal[data-theme="light"] .follow-counter:visited,
html[data-theme="light"] body.use-minimal .follow-counter,
html[data-theme="light"] body.use-minimal .follow-counter:link,
html[data-theme="light"] body.use-minimal .follow-counter:visited {
  color: #111 !important;
}
/* Dark: white text */
body.use-minimal[data-theme="dark"] .follow-counter,
body.use-minimal[data-theme="dark"] .follow-counter:link,
body.use-minimal[data-theme="dark"] .follow-counter:visited,
html[data-theme="dark"] body.use-minimal .follow-counter,
html[data-theme="dark"] body.use-minimal .follow-counter:link,
html[data-theme="dark"] body.use-minimal .follow-counter:visited {
  color: #fff !important;
}
/* Hover: blue in both themes */
/* Stronger specificity so text within a muted container also turns blue */
body.use-minimal .follow-counter:hover,
body.use-minimal .follow-counter:focus-visible,
body.use-minimal .follow-counter:active,
body.use-minimal .follow-counter:visited:hover,
body.use-minimal .follow-counter:visited:focus-visible,
body.use-minimal .text-secondary .follow-counter:hover,
body.use-minimal .text-secondary .follow-counter:focus-visible,
body.use-minimal .text-secondary .follow-counter:active,
body.use-minimal .text-secondary .follow-counter:visited:hover,
body.use-minimal .text-secondary .follow-counter:visited:focus-visible,
body.use-minimal .small.text-secondary .follow-counter:hover,
body.use-minimal .small.text-secondary .follow-counter:focus-visible,
body.use-minimal .small.text-secondary .follow-counter:active,
body.use-minimal .small.text-secondary .follow-counter:visited:hover,
body.use-minimal .small.text-secondary .follow-counter:visited:focus-visible,
/* Ensure inside cards as well */
body.use-minimal .card .follow-counter:hover,
body.use-minimal .card .follow-counter:focus-visible,
body.use-minimal .card .follow-counter:active,
body.use-minimal .card .follow-counter:visited:hover,
body.use-minimal .card .follow-counter:visited:focus-visible,
/* Apply to descendants for label + number simultaneously (no transition set) */
body.use-minimal .follow-counter:hover *,
body.use-minimal .follow-counter:focus-visible *,
body.use-minimal .follow-counter:active *,
body.use-minimal .follow-counter:visited:hover *,
body.use-minimal .follow-counter:visited:focus-visible * {
  color: #2563eb !important;
}

/* Navbar surface and links */
body.use-minimal .navbar {
  /* Glassy background for standard (non-floating) navbar */
  background: rgba(255,255,255,0.7) !important;
  border-bottom: none !important;
  position: sticky; top: 0; z-index: 1030; /* stay on top */
  backdrop-filter: saturate(120%) blur(16px);
  -webkit-backdrop-filter: saturate(120%) blur(16px);
}
html[data-theme="dark"] body.use-minimal .navbar {
  background: rgba(17,19,24,0.6) !important;
}
/* (Border intentionally removed; shadow provides separation) */
body.use-minimal .navbar .navbar-brand,
body.use-minimal .navbar .nav-link,
body.use-minimal .navbar .dropdown-item {
  color: var(--text) !important;
}
body.use-minimal .navbar .navbar-brand { font-weight: 700; letter-spacing: -0.01em; }
body.use-minimal .navbar .nav-link { padding: .5rem .75rem; border-radius: 8px; font-weight: 500; font-size: .95rem; }
body.use-minimal .navbar .nav-link:hover,
body.use-minimal .navbar .dropdown-item:hover {
  color: var(--primary) !important;
}
body.use-minimal .navbar .nav-link:hover { background: transparent !important; }
body.use-minimal .navbar .nav-link.active {
  color: var(--primary) !important;
  background: transparent !important;
  font-weight: 600;
}
/* Keep active link clean on hover too */
body.use-minimal .navbar .nav-link.active:hover {
  color: var(--primary) !important;
  background: transparent !important;
}

/* Modals (Bootstrap) — dark mode adaptations for minimal theme */
body.use-minimal[data-theme="dark"] .modal-content,
html[data-theme="dark"] body.use-minimal .modal-content {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--divider) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45) !important;
}
body.use-minimal[data-theme="dark"] .modal-header,
html[data-theme="dark"] body.use-minimal .modal-header {
  border-bottom: 1px solid var(--divider) !important;
}
body.use-minimal[data-theme="dark"] .modal-footer,
html[data-theme="dark"] body.use-minimal .modal-footer {
  border-top: 1px solid var(--divider) !important;
}
body.use-minimal[data-theme="dark"] .modal-title,
html[data-theme="dark"] body.use-minimal .modal-title {
  color: var(--text) !important;
}
/* Close button: visible on dark */
body.use-minimal[data-theme="dark"] .btn-close,
html[data-theme="dark"] body.use-minimal .btn-close {
  filter: invert(1) grayscale(100%);
  opacity: .85;
}
body.use-minimal[data-theme="dark"] .btn-close:hover,
html[data-theme="dark"] body.use-minimal .btn-close:hover { opacity: 1; }

/* Items inside modal lists */
body.use-minimal[data-theme="dark"] .modal .list-group-item,
html[data-theme="dark"] body.use-minimal .modal .list-group-item {
  background-color: transparent !important;
  border-color: var(--divider) !important;
  color: var(--text) !important;
}

/* Links inside modal: keep readable; primary links remain blue via .link-primary */
body.use-minimal[data-theme="dark"] .modal a:not(.btn):not(.nav-link):not(.link-primary):not(.follow-counter),
html[data-theme="dark"] body.use-minimal .modal a:not(.btn):not(.nav-link):not(.link-primary):not(.follow-counter) {
  color: rgba(255,255,255,0.92) !important;
}

/* Backdrop for dark mode */
body.use-minimal[data-theme="dark"] .modal-backdrop.show,
html[data-theme="dark"] body.use-minimal .modal-backdrop.show {
  background-color: #000 !important;
  opacity: .35 !important;
}

/* Backdrop for light mode (less dim) */
body.use-minimal[data-theme="light"] .modal-backdrop.show,
html[data-theme="light"] body.use-minimal .modal-backdrop.show {
  background-color: #000 !important;
  opacity: .22 !important;
}

/* Outline danger button in dark: ensure contrast */
body.use-minimal[data-theme="dark"] .btn-outline-danger,
html[data-theme="dark"] body.use-minimal .btn-outline-danger {
  color: #ef4444 !important;
  border-color: rgba(239,68,68,0.7) !important;
}
body.use-minimal[data-theme="dark"] .btn-outline-danger:hover,
html[data-theme="dark"] body.use-minimal .btn-outline-danger:hover {
  background-color: rgba(239,68,68,0.1) !important;
  border-color: #ef4444 !important;
  color: #ff6b6b !important;
}

/* Toggler */
body.use-minimal .navbar .navbar-toggler { border-color: var(--divider); }
/* light icon */
body.use-minimal[data-theme="light"] .navbar .navbar-toggler-icon,
html[data-theme="light"] body.use-minimal .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230b1220' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* dark icon */
body.use-minimal[data-theme="dark"] .navbar .navbar-toggler-icon,
html[data-theme="dark"] body.use-minimal .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e9edf1' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Users table: align Action header left (80px from right) */
th.col-action { padding-right: 80px !important; }

/* Dropdown theming */
body.use-minimal .dropdown-menu {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--divider);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
body.use-minimal .dropdown-item { color: var(--text); }
body.use-minimal .dropdown-item:hover { color: var(--primary); background: var(--surface-2); }
body.use-minimal .dropdown-item:active,
body.use-minimal .dropdown-item.active { color: #fff; background: var(--primary); }
body.use-minimal .dropdown-divider { border-top-color: var(--divider); }

/* Contact page: circular icon chips with hover label */
.contact-ways { gap: 12px; }
.contact-ways .contact-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  text-decoration: none;
  outline: none;
}
.contact-ways .contact-chip .chip-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--divider);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.contact-ways .contact-chip:hover .chip-icon,
.contact-ways .contact-chip:focus-visible .chip-icon {
  transform: translateY(-2px);
  background: var(--surface-3);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.contact-ways .contact-chip .chip-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 8px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--divider);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms step-end;
  pointer-events: none;
}
.contact-ways .contact-chip:hover .chip-label,
.contact-ways .contact-chip:focus-visible .chip-label {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0ms step-start;
}

/* Accessible focus ring */
.contact-ways .contact-chip:focus-visible .chip-icon {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 30%, transparent), 0 8px 24px rgba(0,0,0,0.14);
}

/* About page: team hover overlay */
.team-card { position: relative; }
.team-card .team-photo { display:block; width:100%; height:auto; transition: filter 200ms ease, transform 200ms ease; }
.team-card .team-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(to top, color-mix(in oklab, var(--surface) 60%, transparent), transparent 40%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0ms linear 200ms;
}
.team-card:hover .team-photo { filter: blur(6px) brightness(0.7); }
.team-card:hover .team-overlay { opacity: 1; visibility: visible; transition-delay: 0ms; }
.team-socials { gap: 12px; }
.team-socials .contact-chip { width: 44px; height: 44px; }
.team-socials .contact-chip .chip-icon { width: 44px; height: 44px; }

/* Icon-only theme toggle button */
body.use-minimal #theme-toggle-icon {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  width: 36px;               /* square size */
  height: 36px;              /* square size */
  padding: 0 !important;     /* remove btn padding */
  display: inline-flex;      /* center the icon */
  align-items: center;
  justify-content: center;
}

/* Proximity glow card (homepage hero) */
.glow-card {
  position: relative;
  border-radius: 32px; /* increased radius */
  border: 1px solid rgba(255,255,255,0.08);
  background: color-mix(in oklab, var(--surface, #0b0b0c) 96%, black 4%);
  overflow: visible; /* allow glow to render outside */
}
.glow-card .glow-inner { position: relative; z-index: 1; }

/* Round the outer hero container so corners match the glow */
.landing-hero-group > .container {
  border-radius: 32px;
}
/* glowing border layer */
.glow-card::before {
  content: "";
  position: absolute;
  inset: -2px; /* minimal offset so glow touches the edge */
  border-radius: inherit;
  padding: 3px; /* thin stroke that hugs the edge */
  background:
    radial-gradient(240px 240px at var(--glow-x, 50%) var(--glow-y, 50%), rgba(59,130,246,.80), rgba(59,130,246,.40) 35%, transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude; /* show only the border */
  filter: blur(12px) saturate(1.1); /* bloom without a gap */
  opacity: var(--glow-opacity, 0);
  transition: opacity .18s ease;
  pointer-events: none;
}
/* Opacity is driven by JS via --glow-opacity to localize glow to the cursor */

/* Subtle inner shadow to lift card */
.glow-card::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 8px 24px rgba(0,0,0,0.35);
  pointer-events: none;
}
body.use-minimal #theme-toggle-icon:hover {
  background: var(--surface-2);
  border-color: var(--primary-600);
  color: var(--primary);
}

/* Neumorphic info cards (Mission/Vision) */
body.use-minimal .nv-card {
  position: relative;
  background: var(--surface);
  border-radius: 18px;
  border: 1px solid var(--divider);
  padding: 20px 20px 28px 20px;
  box-shadow:
    0 12px 24px rgba(2,6,23,0.10),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
html[data-theme="dark"] body.use-minimal .nv-card {
  box-shadow:
    0 10px 20px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.03);
}
body.use-minimal .nv-card .nv-title {
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--text);
  margin: 0 0 8px 0;
}
body.use-minimal .nv-card .nv-desc { color: var(--muted); margin: 0; }
body.use-minimal .nv-card .nv-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  border: 1px solid var(--primary-600);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
body.use-minimal .nv-card .nv-accent {
  position: absolute;
  left: 16px; right: 16px; bottom: 12px;
  height: 2px;
  background: linear-gradient(90deg, #8b5cf6 0%, #3b82f6 50%, #06b6d4 100%);
  border-radius: 2px;
  opacity: .9;
}
body.use-minimal .nv-card:hover { transform: translateY(-2px); transition: transform .15s ease; }

/* Contact CTA: preserve colors and no vertical movement on hover */
/* Use higher specificity to beat .btn-primary:hover (a and button) */
body.use-minimal a.btn.btn-primary.btn-contact-cta:hover,
body.use-minimal a.btn.btn-primary.btn-contact-cta:focus,
body.use-minimal a.btn.btn-primary.btn-contact-cta:focus-visible,
body.use-minimal a.btn.btn-primary.btn-contact-cta:active,
body.use-minimal button.btn.btn-primary.btn-contact-cta:hover,
body.use-minimal button.btn.btn-primary.btn-contact-cta:focus,
body.use-minimal button.btn.btn-primary.btn-contact-cta:focus-visible,
body.use-minimal button.btn.btn-primary.btn-contact-cta:active {
  transform: none;
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* Contact CTA: slide text out, keep icon centered */
body.use-minimal .btn-contact-cta {
  position: relative;
  overflow: hidden;
  gap: 8px; /* spacing between icon and label in normal state */
  display: inline-flex;
}
/* Flex spacers to center contents smoothly */
body.use-minimal .btn-contact-cta::before,
body.use-minimal .btn-contact-cta::after {
  content: "";
  flex: 0 0 0 !important; /* disable spacer growth */
  transition: none;
}
body.use-minimal .btn-contact-cta:hover::before,
body.use-minimal .btn-contact-cta:hover::after,
body.use-minimal .btn-contact-cta:focus-visible::before,
body.use-minimal .btn-contact-cta:focus-visible::after {
  flex-basis: 0 !important; /* keep content from re-centering */
}
body.use-minimal .btn-contact-cta .btn-label {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 140px;
  transition: transform .45s ease-in-out;
}
body.use-minimal .btn-contact-cta .btn-icon {
  transition: transform .45s ease-in-out, left .45s ease-in-out, opacity .45s ease-in-out;
}
/* On hover: label slides out fully; icon centers and stays visible */
body.use-minimal .btn-contact-cta.cta-hover .btn-label,
body.use-minimal .btn-contact-cta:hover .btn-label,
body.use-minimal .btn-contact-cta:focus-visible .btn-label {
  transform: translateX(calc(100% + 64px));
}
body.use-minimal .btn-contact-cta.cta-hover .btn-icon,
body.use-minimal .btn-contact-cta:hover .btn-icon,
body.use-minimal .btn-contact-cta:focus-visible .btn-icon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Reverse: when leaving, slide label back in from the right (same side it exited) */
@keyframes cta-label-in {
  from { transform: translateX(120%); }
  to   { transform: translateX(0); }
}
body.use-minimal .btn-contact-cta.cta-leave .btn-label {
  animation: cta-label-in .45s ease-in-out forwards;
}
/* During leave, keep icon visible and glide it back left; snap to static after */
body.use-minimal .btn-contact-cta.cta-leave .btn-icon {
  position: absolute;
  left: 16px;
  transform: translateX(0);
  transition: left .45s ease-in-out;
}

/* Theme toggle: show/hide icons (sun in dark, moon in light) */
html[data-theme="light"] body.use-minimal #theme-toggle-icon .icon-sun { display: none; }
html[data-theme="light"] body.use-minimal #theme-toggle-icon .icon-moon { display: inline; }
html[data-theme="dark"] body.use-minimal #theme-toggle-icon .icon-sun { display: inline; }
html[data-theme="dark"] body.use-minimal #theme-toggle-icon .icon-moon { display: none; }
/* Normalize sizes inside square button */
body.use-minimal #theme-toggle-icon .icon-sun { width: 20px; height: 20px; }
body.use-minimal #theme-toggle-icon .icon-moon { width: 20px; height: 20px; }

/* Form Select (dropdown) theming */
body.use-minimal .form-select {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--divider);
}
body.use-minimal .form-select:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
  color: var(--text);
}
/* Caret icon color per theme */
body.use-minimal[data-theme="light"] .form-select,
html[data-theme="light"] body.use-minimal .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230b1220' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
body.use-minimal[data-theme="dark"] .form-select,
html[data-theme="dark"] body.use-minimal .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e9edf1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
/* Option colors (limited browser support) */
body.use-minimal .form-select option { color: var(--text); background: var(--surface); }

/* Landing hero group */
body.use-minimal .landing-hero-group {
  position: relative;
  padding: 56px 0;
  /* Softer top tint for light mode */
  background: linear-gradient(180deg, rgba(59,130,246,0.06), transparent 55%);
}
body.use-minimal[data-theme="dark"] .landing-hero-group,
html[data-theme="dark"] body.use-minimal .landing-hero-group {
  /* Remove dark top fade to avoid a visible band under navbar */
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(59,130,246,0.08), transparent 38%),
    radial-gradient(900px 400px at 100% 0%, rgba(37,99,235,0.06), transparent 38%);
}

/* Glass hero card */
body.use-minimal .glass-hero {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid var(--divider);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  padding: 32px;
  position: relative;
  overflow: hidden;
}
@supports (backdrop-filter: blur(6px)) {
  body.use-minimal .glass-hero { backdrop-filter: blur(6px); }
}

/* Animated background accents */
body.use-minimal .landing-hero-group .animated-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 280px at 20% -10%, rgba(59,130,246,0.15), transparent 60%),
              radial-gradient(500px 240px at 90% 0%, rgba(37,99,235,0.12), transparent 60%);
  filter: saturate(120%);
}

/* Hero typography */
body.use-minimal .hero-title { font-size: clamp(2rem, 3vw + 1rem, 3rem); font-weight: 800; letter-spacing: -0.02em; }
body.use-minimal .hero-tagline { font-size: 1.125rem; color: var(--muted); }

/* CTA button (primary pill) */
body.use-minimal .landing-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.25rem; border-radius: 999px;
  color: #fff; background: var(--primary); border: 1px solid var(--primary-600);
  text-decoration: none; font-weight: 600; box-shadow: 0 6px 20px rgba(0,111,238,0.35);
}
body.use-minimal .landing-cta-btn:hover { background: var(--primary-600); color: #fff; }

/* Wide CTA/sections background */
body.use-minimal .cta-wide-section { background: var(--surface-2); }

/* Buttons */
body.use-minimal .btn { 
  border-radius: 999px; 
  box-shadow: none !important; 
  display: inline-flex;                /* center contents vertically */
  align-items: center;                 /* vertical center */
  justify-content: center;             /* horizontal center for equal padding */
  gap: .25rem;                         /* small gap between icon and text */
}
/* Normalize icons inside buttons */
body.use-minimal .btn .icon {
  display: block;                      /* avoid baseline misalignment */
  width: 18px;                         /* consistent icon size */
  height: 18px;
  flex: 0 0 auto;
}
/* Primary button to match landing style */
body.use-minimal .btn-primary {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
}
body.use-minimal .btn-primary:hover { background: var(--primary-600); border-color: var(--primary-600); }
body.use-minimal .btn-outline-primary {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--primary) 70%, transparent);
  color: var(--primary);
}
body.use-minimal .btn-outline-primary:hover { background: color-mix(in oklab, var(--primary) 10%, transparent); }
/* Taller buttons only for regular size, not .btn-sm */
body.use-minimal .btn:not(.btn-sm) { height: 44px; }
body.use-minimal .btn-secondary { background: var(--surface-2); border-color: var(--divider); color: var(--text); }
body.use-minimal .btn-secondary:hover,
body.use-minimal .btn-secondary:focus {
  background: var(--surface-2);
  border-color: var(--divider);
  color: var(--text);
}
body.use-minimal .btn-danger { background: var(--danger); border-color: var(--danger); }
body.use-minimal .btn-danger:hover { filter: brightness(0.95); }

/* Align other variants to site palette and ensure white text */
body.use-minimal .btn-info { background: var(--primary); border-color: var(--primary); color: #ffffff; }
body.use-minimal .btn-info:hover { background: var(--primary-600); border-color: var(--primary-600); color: #ffffff; }
body.use-minimal .btn-success { background: var(--success); border-color: var(--success); color: #ffffff; }
body.use-minimal .btn-success:hover { filter: brightness(0.95); color: #ffffff; }
body.use-minimal .btn-warning { background: var(--warning); border-color: var(--warning); color: #111418; }
body.use-minimal .btn-warning:hover { filter: brightness(0.95); color: #111418; }
/* Ensure anchor buttons do not revert to link blue */
body.use-minimal a.btn.btn-info,
body.use-minimal a.btn.btn-success,
body.use-minimal a.btn.btn-danger { color: #ffffff !important; }
/* Warning keeps dark text for contrast */
body.use-minimal a.btn.btn-warning { color: #111418 !important; }
/* Ensure label inherits button color */
body.use-minimal .btn .btn-label { color: currentColor; }

/* Ensure outline-dark anchor buttons do not turn blue like links */
body.use-minimal a.btn.btn-outline-dark,
body.use-minimal a.btn.btn-outline-dark:hover,
body.use-minimal a.btn.btn-outline-dark:focus,
body.use-minimal a.btn.btn-outline-dark:active {
  color: var(--text) !important;
}
body.use-minimal a.btn.btn-outline-dark i { color: inherit !important; }

/* Slightly taller primary CTA (regular size only) */
body.use-minimal .btn.btn-primary:not(.btn-sm) { height: 46px; }

/* Global showcase style for all non-small buttons using real inner pane */
body.use-minimal a.btn:not(.btn-sm):not(.btn-showcase):not(.btn-no-pane),
body.use-minimal button.btn:not(.btn-sm):not(.btn-showcase):not(.btn-no-pane) {
  position: relative;
  overflow: hidden;
  padding-left: 4.25rem; /* space for pane */
}
/* Left pane container that will host the icon (inserted via JS) */
body.use-minimal .btn .btn-pane-left {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  margin: 4px;
  height: calc(100% - 8px);
  width: 48px;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: width .3s ease;
  overflow: hidden;
}
/* Expand on hover/focus */
body.use-minimal a.btn:not(.btn-sm):not(.btn-showcase):not(.btn-no-pane):hover .btn-pane-left,
body.use-minimal a.btn:not(.btn-sm):not(.btn-showcase):not(.btn-no-pane):focus-visible .btn-pane-left,
body.use-minimal button.btn:not(.btn-sm):not(.btn-showcase):not(.btn-no-pane):hover .btn-pane-left,
body.use-minimal button.btn:not(.btn-sm):not(.btn-showcase):not(.btn-no-pane):focus-visible .btn-pane-left {
  width: calc(100% - 8px);
}
/* Ensure label sits under pane */
body.use-minimal .btn .btn-label { position: relative; z-index: 1; }
/* Normalize icon inside the pane */
body.use-minimal .btn .btn-pane-left svg,
body.use-minimal .btn .btn-pane-left img,
body.use-minimal .btn .btn-pane-left i { width: 18px; height: 18px; flex: 0 0 auto; display: block; }

/* Small buttons opt-in: keep pane within bounds */
body.use-minimal .btn.btn-sm.btn-pane-enable {
  position: relative;
  overflow: hidden;
  padding-left: 2.6rem; /* extra room for the small pane + small gap before label */
}
body.use-minimal .btn.btn-sm.btn-pane-enable .btn-pane-left {
  margin: 2px;                    /* tighter inset for small height */
  height: calc(100% - 4px);
  width: 34px;                    /* smaller pane width */
}
/* Expand on hover/focus for small opt-in */

/* ---------------------------------------------------------
   Homepage "Start" buttons (Uiverse.io by opMorn inspired)
   Applies to:
   - a.landing-cta-btn (hero + CTA "Start" buttons)
   - .feature-card a.btn.btn-outline-primary (Start Reading/Listening/...)
   Note: Implemented without extra HTML by using multiple background
   SVG layers to emulate stars.
--------------------------------------------------------- */
body.use-minimal a.landing-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 35px !important;
  background: #4c83fa !important;
  font-size: 17px !important;
  font-weight: 1000 !important;
  color: #ffffff !important;
  border: 3px solid #4c83fa !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 #ffffff !important;
  transition: all 0.3s ease-in-out !important;
  cursor: pointer;
  text-decoration: none !important;
  line-height: 1.2;
  isolation: isolate; /* create stacking context so ::before can sit behind */
  z-index: 1;
}

/* Star layers rendered outside via pseudo-element */
body.use-minimal a.landing-cta-btn::before {
  content: "";
  position: absolute;
  inset: -24px; /* tighter area so stars stay closer */
  pointer-events: none;
  z-index: 0; /* above button background, below text */
  /* Star layers */
  --star-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 784.11 815.53'%3E%3Cpath fill='%234c83fa' d='M392.05 0c-20.9 210.08-184.06 378.41-392.05 407.78 207.96 29.37 371.12 197.68 392.05 407.74 20.93-210.06 184.09-378.37 392.05-407.74C576.12 378.41 412.94 210.1 392.05 0z'/%3E%3C/svg%3E");
  background-image: var(--star-svg), var(--star-svg), var(--star-svg), var(--star-svg), var(--star-svg), var(--star-svg);
  background-repeat: no-repeat;
  /* initial positions relative to the enlarged box */
  background-position:
    30% 40%, /* star-1 */
    50% 55%, /* star-2 */
    45% 50%, /* star-3 */
    55% 35%, /* star-4 */
    60% 40%, /* star-5 */
    62% 28%; /* star-6 */
  background-size:
    25px auto,
    15px auto,
    5px auto,
    8px auto,
    15px auto,
    5px auto;
  opacity: 0; /* hidden until hover */
  filter: drop-shadow(0 0 0 rgba(76,131,250,0.0));
  transition: background-position 1s cubic-bezier(0.05, 0.83, 0.43, 0.96), opacity .3s ease-in-out, filter .3s ease-in-out;
}

/* Hover state: invert fill, animate star positions */
body.use-minimal a.landing-cta-btn:hover,
body.use-minimal a.landing-cta-btn:focus-visible {
  background: transparent !important;
  color: #4c83fa !important;
  box-shadow: 0 0 0px #4c83fa !important;
}

/* move stars outward on hover (adjust pseudo-element positions) */
body.use-minimal a.landing-cta-btn:hover::before,
body.use-minimal a.landing-cta-btn:focus-visible::before {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(76,131,250,0.75));
  background-position:
    10% 10%,   /* star-1 */
    35% 30%,   /* star-2 */
    40% 65%,   /* star-3 */
    80% 45%,   /* star-4 */
    95% 40%,   /* star-5 */
    70% 25%;   /* star-6 */
}

/* Smooth background-position transitions per star layer */
body.use-minimal a.landing-cta-btn {
  transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out, box-shadow .3s ease-in-out;
}

/* Ensure icons in these buttons inherit the correct color */
body.use-minimal a.landing-cta-btn i {
  color: inherit !important;
}

/* Permit effects to extend beyond elements inside the glass hero */
body.use-minimal .glass-hero { overflow: visible; }

/* =========================================================
   Voxybuns button (Uiverse) for hero "Learn more" link
   Scope: only the hero secondary CTA to avoid affecting others
   HTML target: <a class="btn btn-outline-primary btn-no-pane">Learn more</a>
========================================================= */
body.use-minimal .landing-hero-group a.btn.btn-outline-primary.btn-no-pane {
  /* Javierrocadev-inspired variables */
  --button_radius_px: 8px;
  --violet-500: #8b5cf6;
  --rose-300: #fda4af;
  --neutral-800: #1f2937; /* dark base */

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start; /* text-left */
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none !important;
  border-radius: var(--button_radius_px) !important;
  overflow: hidden; /* hide glow overflow inside button */

  /* Match Start button sizing */
  padding: 12px 35px !important;
  border: 1px solid var(--divider) !important;
  background: var(--neutral-800) !important;
  color: #f9fafb !important; /* near-white */
  isolation: isolate;
  top: 2px; /* nudge lower to align visually with Start button */
}

/* Glow orbs per Javierrocadev using pseudo-elements */
body.use-minimal .landing-hero-group a.btn.btn-outline-primary.btn-no-pane::before {
  content: "";
  position: absolute;
  width: 48px; height: 48px; /* w-12 h-12 */
  right: 8px; top: 6px; /* right-1/top-1 approx */
  border-radius: 50%;
  background: var(--violet-500);
  filter: blur(12px);
  transition: right .5s ease, bottom .5s ease, filter .5s ease;
  z-index: 0;
}

body.use-minimal .landing-hero-group a.btn.btn-outline-primary.btn-no-pane::after {
  content: "";
  position: absolute;
  width: 80px; height: 80px; /* w-20 h-20 */
  right: 32px; top: 12px; /* right-8 top-3 */
  border-radius: 50%;
  background: var(--rose-300);
  filter: blur(12px);
  transition: right .5s ease, filter .5s ease;
  z-index: 0;
}

/* Ensure text/icon appear above the glow orbs */
body.use-minimal .landing-hero-group a.btn.btn-outline-primary.btn-no-pane > * { position: relative; z-index: 1; }

/* Provide padding for the text consistent with Voxybuns */
/* Padding already set to match Start; no extra adjustments needed */

/* Hover: move glows and accent border/text */
body.use-minimal .landing-hero-group a.btn.btn-outline-primary.btn-no-pane:hover,
body.use-minimal .landing-hero-group a.btn.btn-outline-primary.btn-no-pane:focus-visible {
  border-color: var(--rose-300);
  color: var(--rose-300) !important; /* hover:text-rose-300 */
  text-decoration: underline;
  text-underline-offset: 4px; /* hover:underline-offset-4 */
  text-decoration-thickness: 2px; /* hover:decoration-2 */
}

body.use-minimal .landing-hero-group a.btn.btn-outline-primary.btn-no-pane:hover::before,
body.use-minimal .landing-hero-group a.btn.btn-outline-primary.btn-no-pane:focus-visible::before {
  right: 48px; /* hover:before:right-12 */
  bottom: -16px; /* hover:before:-bottom-8 */
  filter: blur(16px);
}

/* Active state: maintain legibility */
body.use-minimal .landing-hero-group a.btn.btn-outline-primary.btn-no-pane:active {
  opacity: 0.95;
}

/* Reset Bootstrap outline-primary extras */
body.use-minimal .landing-hero-group a.btn.btn-outline-primary.btn-no-pane:hover,
body.use-minimal .landing-hero-group a.btn.btn-outline-primary.btn-no-pane:focus-visible {
  background: var(--neutral-800) !important;
  box-shadow: none !important;
}

/* Ensure the icon inherits text color inside the Learn more button */
body.use-minimal .landing-hero-group a.btn.btn-outline-primary.btn-no-pane i {
  color: inherit !important;
}


body.use-minimal a.btn.btn-sm.btn-pane-enable:hover .btn-pane-left,
body.use-minimal a.btn.btn-sm.btn-pane-enable:focus-visible .btn-pane-left,
body.use-minimal button.btn.btn-sm.btn-pane-enable:hover .btn-pane-left,
body.use-minimal button.btn.btn-sm.btn-pane-enable:focus-visible .btn-pane-left {
  width: calc(100% - 4px);
}
/* Slightly smaller icon inside small pane */
body.use-minimal .btn.btn-sm.btn-pane-enable .btn-pane-left svg,
body.use-minimal .btn.btn-sm.btn-pane-enable .btn-pane-left img,
body.use-minimal .btn.btn-sm.btn-pane-enable .btn-pane-left i {
  width: 16px; height: 16px;
}
/* Variant colors for pane + icon */
/* Primary */
body.use-minimal .btn.btn-primary .btn-pane-left { background: color-mix(in srgb, var(--primary) 12%, #ffffff 88%); color: var(--primary); }
html[data-theme="dark"] body.use-minimal .btn.btn-primary .btn-pane-left { background: color-mix(in srgb, var(--primary) 22%, var(--surface) 78%); color: #ffffff; }
/* Secondary */
body.use-minimal .btn.btn-secondary .btn-pane-left { background: color-mix(in srgb, var(--surface-2) 80%, #ffffff 20%); color: var(--text); }
html[data-theme="dark"] body.use-minimal .btn.btn-secondary .btn-pane-left { background: color-mix(in srgb, var(--surface-2) 88%, #ffffff 12%); color: var(--text); }
/* Outline Primary */
body.use-minimal .btn.btn-outline-primary .btn-pane-left { background: color-mix(in srgb, var(--primary) 10%, #ffffff 90%); color: var(--primary); }
html[data-theme="dark"] body.use-minimal .btn.btn-outline-primary .btn-pane-left { background: color-mix(in srgb, var(--primary) 20%, var(--surface) 80%); color: var(--primary); }

/* Outline Danger */
body.use-minimal .btn.btn-outline-danger .btn-pane-left { background: color-mix(in srgb, var(--danger) 10%, #ffffff 90%); color: var(--danger); }
html[data-theme="dark"] body.use-minimal .btn.btn-outline-danger .btn-pane-left { background: color-mix(in srgb, var(--danger) 20%, var(--surface) 80%); color: var(--danger); }

/* Outline Secondary */
body.use-minimal .btn.btn-outline-secondary .btn-pane-left { background: color-mix(in srgb, var(--surface-2) 85%, #ffffff 15%); color: var(--text); }
html[data-theme="dark"] body.use-minimal .btn.btn-outline-secondary .btn-pane-left { background: color-mix(in srgb, var(--surface-2) 90%, var(--surface) 10%); color: var(--text); }
/* Outline Warning (for Block/Unblock) */
body.use-minimal .btn.btn-outline-warning .btn-pane-left {
  background: color-mix(in srgb, var(--warning) 12%, #ffffff 88%);
  color: var(--warning);
}
html[data-theme="dark"] body.use-minimal .btn.btn-outline-warning .btn-pane-left {
  background: color-mix(in srgb, var(--warning) 22%, var(--surface) 78%);
  color: #111418; /* dark text over warm amber pane to keep contrast */
}

/* Solid variants used on Dashboard */
/* Success */
body.use-minimal .btn.btn-success .btn-pane-left {
  background: color-mix(in srgb, #16a34a 18%, #ffffff 82%);
  color: #ffffff;
}
html[data-theme="dark"] body.use-minimal .btn.btn-success .btn-pane-left {
  background: color-mix(in srgb, #16a34a 26%, var(--surface) 74%);
  color: #ffffff;
}
/* Warning */
body.use-minimal .btn.btn-warning .btn-pane-left {
  background: color-mix(in srgb, #f59e0b 18%, #ffffff 82%);
  color: #ffffff;
}
html[data-theme="dark"] body.use-minimal .btn.btn-warning .btn-pane-left {
  background: color-mix(in srgb, #f59e0b 26%, var(--surface) 74%);
  color: #ffffff;
}
/* Danger */
body.use-minimal .btn.btn-danger .btn-pane-left {
  background: color-mix(in srgb, #ef4444 18%, #ffffff 82%);
  color: #ffffff;
}
html[data-theme="dark"] body.use-minimal .btn.btn-danger .btn-pane-left {
  background: color-mix(in srgb, #ef4444 26%, var(--surface) 74%);
  color: #ffffff;
}
/* Info (use site primary) */
body.use-minimal .btn.btn-info .btn-pane-left {
  background: color-mix(in srgb, var(--primary) 18%, #ffffff 82%);
  color: #ffffff;
}
html[data-theme="dark"] body.use-minimal .btn.btn-info .btn-pane-left {
  background: color-mix(in srgb, var(--primary) 26%, var(--surface) 74%);
  color: #ffffff;
}

/* --- Admin Glider Tabs (scoped) --- */
body.use-minimal .admin-glider-tabs .tabs {
  display: flex;
  position: relative;
  background-color: var(--surface);
  box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.12);
  padding: 0.5rem;
  border-radius: 99px;
  overflow: hidden;
}
html[data-theme="dark"] body.use-minimal .admin-glider-tabs .tabs {
  box-shadow: 0 0 1px 0 rgba(255,255,255,0.12), 0 6px 12px 0 rgba(0,0,0,0.45);
}
body.use-minimal .admin-glider-tabs .tabs * { z-index: 2; }
body.use-minimal .admin-glider-tabs input[type="radio"] { display: none; }

body.use-minimal .admin-glider-tabs .tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  width: 160px; /* equal widths to align the glider */
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
  border-radius: 99px;
  cursor: pointer;
  transition: color 0.15s ease-in;
  position: relative;
}
body.use-minimal .admin-glider-tabs .tab .icon { width: 18px; height: 18px; }
body.use-minimal .admin-glider-tabs .notification {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .95rem;
  height: .95rem;
  font-size: 10px;
  border-radius: 50%;
  margin-left: 6px;
  background-color: color-mix(in srgb, var(--primary) 12%, var(--surface-2) 88%);
  color: var(--text);
  transition: background-color 0.15s ease-in, color 0.15s ease-in;
}

/* Checked states: colorize label and badge */
body.use-minimal .admin-glider-tabs #admin-tab-users:checked + label { color: var(--primary); }
body.use-minimal .admin-glider-tabs #admin-tab-users:checked + label .notification { background-color: var(--primary); color: #fff; }
body.use-minimal .admin-glider-tabs #admin-tab-materials:checked + label { color: var(--primary); }
body.use-minimal .admin-glider-tabs #admin-tab-materials:checked + label .notification { background-color: var(--primary); color: #fff; }

/* Glider */
body.use-minimal .admin-glider-tabs .glider {
  position: absolute;
  height: 34px;
  width: 160px; /* same as .tab width */
  background-color: color-mix(in srgb, var(--primary) 14%, #e6eef9 86%);
  z-index: 1;
  border-radius: 99px;
  transition: transform 0.25s ease-out, background-color 0.2s ease;
}
html[data-theme="dark"] body.use-minimal .admin-glider-tabs .glider {
  background-color: color-mix(in srgb, var(--primary) 18%, var(--surface) 82%);
}
/* Positions for 2 tabs */
body.use-minimal .admin-glider-tabs #admin-tab-users:checked ~ .glider { transform: translateX(0); }
body.use-minimal .admin-glider-tabs #admin-tab-materials:checked ~ .glider { transform: translateX(100%); }

/* Responsive scaling */
@media (max-width: 700px) {
  body.use-minimal .admin-glider-tabs .tabs { transform: scale(0.9); transform-origin: left center; }
}

/* --- Alerts (Bootstrap) themed --- */
body.use-minimal .alert {
  border-radius: 12px;
  border: 1px solid var(--divider);
  background: var(--surface-2);
  color: var(--text);
}
/* Info variant aligned to primary palette, subtle tinted surface */
body.use-minimal .alert-info {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-2) 90%);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--surface-2) 72%);
  color: var(--text);
}
/* Links inside alerts: keep readable and on-brand */
body.use-minimal .alert a { color: var(--text); text-decoration: underline; }
body.use-minimal .alert a:hover { color: var(--primary); }

/* --- Fallback (no .use-minimal on body): ensure pane layout still works --- */
/* Regular buttons: reserve space and contain pane */
a.btn:not(.btn-sm):not(.btn-showcase):not(.btn-no-pane),
button.btn:not(.btn-sm):not(.btn-showcase):not(.btn-no-pane) {
  position: relative;
  overflow: hidden;
  padding-left: 4.25rem;
}
.btn .btn-pane-left {
  position: absolute; left: 0; top: 0; bottom: 0;
  margin: 4px; height: calc(100% - 8px); width: 48px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; z-index: 2; overflow: hidden;
  transition: width .3s ease;
}
a.btn:not(.btn-sm):not(.btn-showcase):not(.btn-no-pane):hover .btn-pane-left,
a.btn:not(.btn-sm):not(.btn-showcase):not(.btn-no-pane):focus-visible .btn-pane-left,
button.btn:not(.btn-sm):not(.btn-showcase):not(.btn-no-pane):hover .btn-pane-left,
button.btn:not(.btn-sm):not(.btn-showcase):not(.btn-no-pane):focus-visible .btn-pane-left {
  width: calc(100% - 8px);
}
.btn .btn-pane-left svg,
.btn .btn-pane-left img,
.btn .btn-pane-left i { width: 18px; height: 18px; display: block; }
/* Ensure label sits under pane globally as well */
.btn .btn-label { position: relative; z-index: 1; }
/* Global: outline variants (outside minimal scope) */
.btn.btn-outline-primary .btn-pane-left { background: color-mix(in srgb, var(--bs-primary, #0d6efd) 12%, #ffffff 88%); color: var(--bs-primary, #0d6efd); }
.btn.btn-outline-danger .btn-pane-left { background: color-mix(in srgb, var(--bs-danger, #dc3545) 12%, #ffffff 88%); color: var(--bs-danger, #dc3545); }
/* Global: outline warning */
.btn.btn-outline-warning .btn-pane-left { background: color-mix(in srgb, var(--bs-warning, #ffc107) 12%, #ffffff 88%); color: var(--bs-warning, #ffc107); }
/* Small opt-in */
.btn.btn-sm.btn-pane-enable { position: relative; overflow: hidden; padding-left: 2.6rem; }
.btn.btn-sm.btn-pane-enable .btn-pane-left { margin: 2px; height: calc(100% - 4px); width: 34px; }
a.btn.btn-sm.btn-pane-enable:hover .btn-pane-left,
a.btn.btn-sm.btn-pane-enable:focus-visible .btn-pane-left,
button.btn.btn-sm.btn-pane-enable:hover .btn-pane-left,
button.btn.btn-sm.btn-pane-enable:focus-visible .btn-pane-left { width: calc(100% - 4px); }
.btn.btn-sm.btn-pane-enable .btn-pane-left svg,
.btn.btn-sm.btn-pane-enable .btn-pane-left img,
.btn.btn-sm.btn-pane-enable .btn-pane-left i { width: 16px; height: 16px; }

/* --- Policy Pages --- */
.policy-page {
  color: var(--text);
  /* Responsive side gutters to avoid touching screen edges */
  padding-left: clamp(16px, 5vw, 28px);
  padding-right: clamp(16px, 5vw, 28px);
}
.policy-page .policy-hero {
  position: relative;
  border-radius: 18px;
  padding: 20px 20px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 16%, #ffffff 84%) 0%,
    color-mix(in srgb, var(--primary) 8%, var(--surface-2) 92%) 100%
  );
  border: 1px solid var(--divider);
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  overflow: hidden;
}
html[data-theme="dark"] .policy-page .policy-hero {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 28%, var(--surface) 72%) 0%,
    color-mix(in srgb, var(--primary) 12%, #000000 88%) 100%
  );
}
.policy-page .policy-hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--primary) 70%, var(--text) 30%);
}
.policy-page .policy-hero .kicker i {
  display: inline-block;
  width: 20px; height: 20px;
}
.policy-page h1 {
  margin: 6px 0 4px;
}
.policy-page .policy-hero .desc {
  color: color-mix(in srgb, var(--text) 72%, #6b7280 28%);
  margin-top: 6px;
}
.policy-page .policy-hero .last-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--text) 80%, #6b7280 20%);
  background: color-mix(in srgb, var(--surface) 96%, #ffffff 4%);
  border: 1px solid var(--divider);
  padding: 6px 10px;
  border-radius: 999px;
}
html[data-theme="dark"] .policy-page .policy-hero .last-updated {
  background: color-mix(in srgb, var(--surface) 94%, #000000 6%);
}

/* --- Dark mode: soften card borders --- */
html[data-theme="dark"] .card {
  border-color: color-mix(in srgb, var(--surface) 94%, #ffffff 6%) !important;
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
  border-color: color-mix(in srgb, var(--surface) 92%, #ffffff 8%) !important;
}

/* --- Dark mode: tables (Bootstrap) --- */
html[data-theme="dark"] .table {
  --bs-table-color: var(--text);
  --bs-table-bg: color-mix(in srgb, var(--surface) 96%, #000000 4%);
  --bs-table-border-color: color-mix(in srgb, var(--surface) 88%, #ffffff 12%);
}
html[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
  border-color: var(--bs-table-border-color) !important;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: color-mix(in srgb, var(--surface) 90%, #000000 10%) !important;
}
html[data-theme="dark"] .table-striped > tbody > tr:hover > * {
  background-color: color-mix(in srgb, var(--surface) 86%, #000000 14%) !important;
}
html[data-theme="dark"] .table thead.table-light th,
html[data-theme="dark"] .table thead.table-light td,
html[data-theme="dark"] .table .table-light th,
html[data-theme="dark"] .table .table-light td {
  background-color: color-mix(in srgb, var(--surface) 92%, #000000 8%) !important;
  color: color-mix(in srgb, var(--text) 92%, #e5e7eb 8%) !important;
  border-color: var(--bs-table-border-color) !important;
}
.policy-page h3 {
  font-size: 1.125rem;
  padding: 10px 12px;
  border: 1px solid var(--divider);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, #ffffff 8%);
  margin-top: 20px;
}
html[data-theme="dark"] .policy-page h3 {
  background: color-mix(in srgb, var(--surface) 92%, #000000 8%);
}
.policy-page p { line-height: 1.7; }
.policy-page ul { margin: 8px 0 0 0; }
.policy-page ul li { margin: 4px 0; }
.policy-page a.link-primary { color: var(--primary); text-decoration: none; border-bottom: 1px dashed color-mix(in srgb, var(--primary) 60%, transparent 40%); }
.policy-page a.link-primary:hover { text-decoration: underline; }

.policy-page .policy-card {
  background: color-mix(in srgb, var(--surface) 98%, #ffffff 2%);
  border: 1px solid var(--divider);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.05);
}
html[data-theme="dark"] .policy-page .policy-card {
  background: color-mix(in srgb, var(--surface) 96%, #000000 4%);
}
/* Success */
body.use-minimal .btn.btn-success .btn-pane-left { background: color-mix(in srgb, var(--success) 16%, #ffffff 84%); color: var(--success); }
html[data-theme="dark"] body.use-minimal .btn.btn-success .btn-pane-left { background: color-mix(in srgb, var(--success) 26%, var(--surface) 74%); color: var(--success); }
/* Warning */
body.use-minimal .btn.btn-warning .btn-pane-left { background: color-mix(in srgb, var(--warning) 16%, #ffffff 84%); color: var(--warning); }
html[data-theme="dark"] body.use-minimal .btn.btn-warning .btn-pane-left { background: color-mix(in srgb, var(--warning) 26%, var(--surface) 74%); color: var(--warning); }
/* Danger */
body.use-minimal .btn.btn-danger .btn-pane-left { background: color-mix(in srgb, var(--danger) 16%, #ffffff 84%); color: var(--danger); }
html[data-theme="dark"] body.use-minimal .btn.btn-danger .btn-pane-left { background: color-mix(in srgb, var(--danger) 26%, var(--surface) 74%); color: var(--danger); }
/* Dark */
body.use-minimal .btn.btn-dark .btn-pane-left { background: color-mix(in srgb, var(--text) 16%, #ffffff 84%); color: var(--text); }
html[data-theme="dark"] body.use-minimal .btn.btn-dark .btn-pane-left { background: color-mix(in srgb, #ffffff 14%, var(--surface) 86%); color: #ffffff; }
/* Outline Dark */
body.use-minimal .btn.btn-outline-dark .btn-pane-left { background: color-mix(in srgb, var(--text) 12%, #ffffff 88%); color: var(--text); }
html[data-theme="dark"] body.use-minimal .btn.btn-outline-dark .btn-pane-left { background: color-mix(in srgb, #ffffff 18%, var(--surface) 82%); color: #ffffff; }

/* Uiverse-style showcase button (inspired by provided Tailwind snippet) */
body.use-minimal .btn-showcase {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px; /* h-14 */
  padding-left: 5rem; /* pl-[5rem] */
  padding-right: 1.25rem; /* pr-5 */
  border-radius: 9999px; /* make pill */
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform .3s ease, box-shadow .3s ease, background-color .2s ease, color .2s ease;
  will-change: transform;
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 35%, transparent);
}
html[data-theme="dark"] body.use-minimal .btn-showcase { background: var(--primary); color: #ffffff; }
body.use-minimal .btn-showcase:hover,
body.use-minimal .btn-showcase:focus-visible {
  transform: none; /* no tilt on hover */
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 40%, transparent);
}
html[data-theme="dark"] body.use-minimal .btn-showcase:hover,
html[data-theme="dark"] body.use-minimal .btn-showcase:focus-visible {
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 45%, transparent);
}
/* Left expanding pane */
body.use-minimal .btn-showcase .btn-showcase-left {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  margin-top: 4px; margin-left: 4px; margin-bottom: 4px; /* mimic mt-1 ml-1 bottom-1 */
  height: calc(100% - 8px); /* h-12 vs h-14 */
  width: 48px; /* w-12 */
  border-radius: 9999px; /* circle when collapsed, pill when expanded */
  display: flex; align-items: center; justify-content: center;
  /* light mode: subtle primary-tinted white */
  background: color-mix(in srgb, var(--primary) 12%, #ffffff 88%);
  color: var(--primary);
  z-index: 2; /* sit above label */
  transition: width .3s ease;
  overflow: hidden;
}
html[data-theme="dark"] body.use-minimal .btn-showcase .btn-showcase-left {
  /* dark mode: subtle primary tint on surface */
  background: color-mix(in srgb, var(--primary) 22%, var(--surface) 78%);
  color: var(--primary);
}
body.use-minimal .btn-showcase:hover .btn-showcase-left,
body.use-minimal .btn-showcase:focus-visible .btn-showcase-left {
  width: calc(100% - 8px); /* group-hover:w-[calc(100%-0.5rem)] */
}
/* Label */
body.use-minimal .btn-showcase .btn-showcase-label { position: relative; z-index: 1; font-weight: 700; }

/* Ping/dot removed per design */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.use-minimal .btn-showcase { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
  body.use-minimal .btn-showcase:hover { transform: none; }
  body.use-minimal .btn-showcase .btn-showcase-ping { animation: none; display: none; }
}

/* Forms */
body.use-minimal .form-control {
  background: var(--surface-2) !important;
  border-color: rgba(2, 6, 23, 0.12) !important;
  color: var(--text) !important;
  border-radius: 8px;
}
body.use-minimal .form-control:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--primary) !important;
}
body.use-minimal .form-label { color: var(--muted); }
body.use-minimal .alert { border-radius: 10px; border: 1px solid var(--divider); }
/* Light mode alert tints */
body.use-minimal[data-theme="light"] .alert-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
body.use-minimal[data-theme="light"] .alert-danger { background: #fef2f2; color: #7f1d1d; border-color: #fecaca; }
body.use-minimal[data-theme="light"] .alert-warning { background: #fffbeb; color: #78350f; border-color: #fde68a; }

/* Tables */
body.use-minimal table { color: var(--text); }
body.use-minimal .table thead th { background: #f9fafb; border-bottom: 1px solid var(--divider); color: #475569; font-weight: 600; }
body.use-minimal .table td, body.use-minimal .table th { border-top: 1px solid var(--divider); }
body.use-minimal .table-hover tbody tr:hover { background-color: var(--surface-2); }

/* Navbar/Footer */
body.use-minimal .navbar { background: rgba(255,255,255,0.7) !important; border-bottom: none !important; padding-top: .25rem; padding-bottom: .25rem; position: sticky; top: 0; z-index: 1100; box-shadow: 0 2px 10px rgba(0,0,0,0.12); backdrop-filter: saturate(120%) blur(16px); -webkit-backdrop-filter: saturate(120%) blur(16px); }
html[data-theme="dark"] body.use-minimal .navbar { background: rgba(17,19,24,0.6) !important; }
/* Animate navbar changes (height, width, radius, bg, shadow) when floating toggles */
body.use-minimal .navbar {
  transition: top .28s ease, width .28s ease, border-radius .28s ease,
              background-color .22s ease, box-shadow .28s ease,
              padding .22s ease, transform .28s ease, opacity .22s ease;
  will-change: top, width, border-radius, background-color, box-shadow, transform, opacity;
  transform: translateY(0);
  opacity: 1;
}
/* Neutralize possible global navbar rules from main.css when minimal theme is active */
body.use-minimal .custom-navbar,
body.use-minimal .navbar {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.use-minimal nav.navbar.custom-navbar { position: sticky !important; top: 0; left: auto; right: auto; }
body.use-minimal .navbar { position: relative; z-index: 100; overflow: visible; }
/* Ensure brand + collapse share one row: brand left, collapse takes remaining space */
body.use-minimal .navbar .container-fluid { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; width: 100%; min-width: 0; }
body.use-minimal .navbar .navbar-brand, 
body.use-minimal .navbar .nav-link { color: var(--text) !important; }
body.use-minimal .navbar .nav-link { padding-top: .25rem; padding-bottom: .25rem; }
body.use-minimal .navbar .nav-link:hover { color: var(--primary) !important; }
body.use-minimal footer { border-top: 1px solid var(--divider); color: var(--muted); }
body.use-minimal footer a { color: var(--muted); text-decoration: none; }
body.use-minimal footer a:hover { color: var(--primary); text-decoration: none; }
/* Clip any footer child overflow to avoid right-side gaps */
body.use-minimal footer.site-footer { overflow-x: clip; }
/* Vertically center nav items consistently */
body.use-minimal .navbar .navbar-nav { align-items: center !important; }
/* Let collapse span the remaining width and use Bootstrap flex layout */
body.use-minimal .navbar .navbar-collapse {
  flex: 1 1 auto !important;
  min-width: 0;
  /* Do not force display here; Bootstrap controls visibility */
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  overflow: visible !important;
}
/* Base nav list styles (reset to clean Bootstrap-like flex) */
body.use-minimal .navbar .navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .75rem !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  list-style: none !important;
  position: relative !important;
  white-space: nowrap;
  flex-wrap: nowrap !important;
}
/* Fallback for browsers without flex-gap support */
body.use-minimal .navbar .navbar-nav > .nav-item + .nav-item { margin-left: 1rem; }
body.use-minimal .navbar .navbar-nav.me-auto > .nav-item,
body.use-minimal .navbar .navbar-nav.ms-auto > .nav-item {
  float: none !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  min-width: fit-content !important;
}
body.use-minimal .navbar .navbar-nav .nav-link {
  position: static !important;
  display: inline-block !important;
  padding: .25rem .5rem;
  line-height: 1.25 !important;
}
/* Keep brand from shrinking/overlapping */
body.use-minimal .navbar .navbar-brand { flex: 0 0 auto; margin-right: 1.25rem; }
/* Push right group to the edge in flex layout */
body.use-minimal .navbar .navbar-collapse > .navbar-nav.ms-auto { margin-left: auto !important; }
/* Force explicit colors for both left and right lists regardless of theme */
body.use-minimal .navbar .navbar-nav.me-auto .nav-link:not(.active):not(:hover),
body.use-minimal .navbar .navbar-nav.ms-auto .nav-link:not(.active):not(:hover) {
  color: var(--text) !important;
  opacity: 1 !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
}
/* Rendering reset to eliminate glyph overprint/flicker inside navbar */
body.use-minimal .navbar,
body.use-minimal .navbar * { 
  text-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-variant-ligatures: none !important;
}
/* (removed debug font override to preserve current minimal style) */
/* Simplify split behavior: no conflicting auto margins */
/* Left stays natural; right gets pushed to edge via auto margin + explicit order */
/* Clean flex rows for left/right groups (no grid leftovers) */
body.use-minimal .navbar .navbar-collapse > .navbar-nav.me-auto {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-right: 0 !important;
  grid-column: auto !important;
  justify-self: auto !important;
  flex: 0 1 auto !important; /* size to content next to brand */
}
body.use-minimal .navbar .navbar-collapse > .navbar-nav.ms-auto {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .75rem !important;
  margin-left: auto !important; /* push to right edge */
  flex: 0 0 auto !important;
  grid-column: auto !important;
  justify-self: auto !important;
  position: static !important;
  z-index: auto !important;
}

/* Desktop: standard Bootstrap split (me-auto left, ms-auto right) */
@media (min-width: 992px) {
  /* Hard enforce flex layout and positions on desktop */
  body.use-minimal .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1rem !important;
  }
  /* Neutralize any grid-specific leftovers */
  body.use-minimal .navbar .navbar-collapse > .navbar-nav.me-auto,
  body.use-minimal .navbar .navbar-collapse > .navbar-nav.ms-auto {
    grid-column: auto !important;
    justify-self: auto !important;
  }
  /* Left group sits after brand; right group pushed to edge */
  body.use-minimal .navbar .navbar-collapse > .navbar-nav.ms-auto { margin-left: auto !important; }
  /* Ensure items are laid out in a row without absolute positioning */
  body.use-minimal .navbar .navbar-nav { flex-direction: row !important; }
  body.use-minimal .navbar .navbar-nav .nav-item { position: static !important; display: block !important; }
  body.use-minimal .navbar .navbar-nav .nav-item .nav-link { position: static !important; display: inline-block !important; }
}

/* Strong, simple positioning overrides (apply at all sizes when visible) */
body.use-minimal nav.navbar .navbar-collapse { align-items: center !important; }
body.use-minimal nav.navbar .navbar-nav.me-auto { display: flex !important; position: static !important; }
body.use-minimal nav.navbar .navbar-nav.ms-auto { display: flex !important; position: static !important; margin-left: auto !important; }
body.use-minimal nav.navbar .navbar-nav > .nav-item { position: static !important; }
body.use-minimal nav.navbar .navbar-nav > .nav-item > .nav-link { position: static !important; display: inline-block !important; }

/* Floating rounded navbar style when scrolled */
html body.use-minimal nav.navbar.navbar-floating {
  position: fixed !important;
  top: 12px !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  margin-left: auto; margin-right: auto;
  display: flex !important;
  /* Fixed, centered bar width with viewport cap to preserve middle space */
  width: clamp(860px, calc(100% - 24px), 1100px) !important;
  box-sizing: border-box !important;
  z-index: 1200;
  /* Explicit semi-transparent backgrounds so backdrop-filter blurs behind reliably */
  /* Light mode default; dark overrides below */
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid var(--divider) !important;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.24);
  /* Stronger background blur */
  backdrop-filter: saturate(120%) blur(96px);
  -webkit-backdrop-filter: saturate(120%) blur(96px);
  /* Ensure a new stacking context for reliable backdrop rendering */
  isolation: isolate;
  /* Subtle entrance smoothness */
  transform: translateY(0);
  opacity: 1;
}
/* Dark mode: explicit semi-transparent dark surface */
html[data-theme="dark"] body.use-minimal nav.navbar.navbar-floating {
  background: rgba(17, 19, 24, 0.7) !important; /* approx of #111318 @ 70% opacity */
  border: 1px solid var(--divider) !important;
}
html[data-theme="dark"] body.use-minimal nav.navbar.navbar-floating,
html[data-theme="dark"] body.use-minimal nav.navbar.navbar-floating .navbar-brand,
html[data-theme="dark"] body.use-minimal nav.navbar.navbar-floating .navbar-brand *,
html[data-theme="dark"] body.use-minimal nav.navbar.navbar-floating .nav-link,
html[data-theme="dark"] body.use-minimal nav.navbar.navbar-floating .navbar-toggler,
html[data-theme="dark"] body.use-minimal nav.navbar.navbar-floating .navbar-toggler * {
  color: var(--text) !important;
}
/* Dark mode: ensure titles are white for better contrast */
html[data-theme="dark"] body.use-minimal h1,
html[data-theme="dark"] body.use-minimal h2,
html[data-theme="dark"] body.use-minimal h3,
html[data-theme="dark"] body.use-minimal h4,
html[data-theme="dark"] body.use-minimal h5,
html[data-theme="dark"] body.use-minimal h6,
html[data-theme="dark"] body.use-minimal .section-title,
/* Headings per theme */
html[data-theme="light"] body.use-minimal .card-title,
html[data-theme="light"] body.use-minimal .widget-title,
html[data-theme="light"] body.use-minimal .footer .footer-column h5 {
  color: var(--text) !important;
}
html[data-theme="dark"] body.use-minimal .card-title,
html[data-theme="dark"] body.use-minimal .widget-title,
html[data-theme="dark"] body.use-minimal .footer .footer-column h5 {
  color: #ffffff !important;
}
/* Dark mode: convert any .text-dark usages to white for readability (e.g., team member names) */
html[data-theme="dark"] body.use-minimal .text-dark {
  color: #ffffff !important;
}
/* Specifically ensure team member names in cards are white */
html[data-theme="dark"] body.use-minimal .card .fw-semibold.text-dark {
  color: #ffffff !important;
}
/* Dark mode: avatar initials inside light circle should be dark for contrast */
html[data-theme="dark"] body.use-minimal .card .rounded-circle.bg-light {
  color: #0f172a !important; /* slate-900 */
  opacity: 1 !important;
}
/* Dark mode: high-contrast for pastel icon badges on About page */
html[data-theme="dark"] body.use-minimal .card span[style*="#e9f2ff"] { /* blue badge */
  background: #dbeafe !important; /* slightly deeper pastel */
  color: #1e40af !important;      /* indigo-900 for contrast */
}
html[data-theme="dark"] body.use-minimal .card span[style*="#e6fff3"] { /* green badge */
  background: #d1fae5 !important; /* slightly deeper pastel */
  color: #065f46 !important;      /* emerald-900 for contrast */
}
/* Ensure the SVG inside these badges follows the new color (overrides generic svg whitening) */
html[data-theme="dark"] body.use-minimal .card span[style*="#e9f2ff"] svg,
html[data-theme="dark"] body.use-minimal .card span[style*="#e6fff3"] svg {
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none;
}
/* Dark mode: increase contrast for muted/secondary body text (e.g., contact details) */
html[data-theme="dark"] body.use-minimal .text-muted,
html[data-theme="dark"] body.use-minimal .text-secondary,
html[data-theme="dark"] body.use-minimal .text-body-secondary {
  /* dim white for better readability in dark mode */
  color: rgba(255,255,255,0.92) !important;
}
/* Bootstrap 5.3 muted color token */
html[data-theme="dark"] body.use-minimal .text-body-secondary {
  color: rgba(255,255,255,0.88) !important;
}
/* Muted links should remain readable in dark mode */
html[data-theme="dark"] body.use-minimal a.link-secondary,
html[data-theme="dark"] body.use-minimal .link-secondary {
  color: rgba(255,255,255,0.9) !important;
}
/* Inside cards/widgets, lift general paragraph/list/link text contrast while keeping primary links blue */
html[data-theme="dark"] body.use-minimal .card p,
html[data-theme="dark"] body.use-minimal .card li,
html[data-theme="dark"] body.use-minimal .card .card-text,
html[data-theme="dark"] body.use-minimal .card a:not(.btn):not(.nav-link):not(.link-primary):not(.follow-counter) {
  color: rgba(255,255,255,0.9) !important;
}
/* Ensure .link-primary remains blue across the site, regardless of theme */
body.use-minimal a.link-primary { color: var(--primary) !important; }
body.use-minimal a.link-primary:hover { color: var(--primary-600) !important; text-decoration: underline; }
/* If opacity utilities are used inside cards, lift them for readability */
html[data-theme="dark"] body.use-minimal .card .opacity-50 { opacity: 0.92 !important; color: rgba(255,255,255,0.88) !important; }
html[data-theme="dark"] body.use-minimal .card .opacity-75 { opacity: 0.96 !important; color: rgba(255,255,255,0.9) !important; }
/* Make subtle icons a bit brighter in dark mode (e.g., contact icons) */
html[data-theme="dark"] body.use-minimal .card .bi,
html[data-theme="dark"] body.use-minimal .card .icon,
html[data-theme="dark"] body.use-minimal .card svg { 
  color: rgba(255,255,255,0.9) !important;
  opacity: 1 !important;
}
/* Dark mode: ensure muted text within cards is sufficiently readable */
html[data-theme="dark"] body.use-minimal .card .text-muted,
html[data-theme="dark"] body.use-minimal .card .text-secondary,
html[data-theme="dark"] body.use-minimal .card .text-body-secondary {
  /* dim white a bit stronger inside cards */
  color: rgba(255,255,255,0.94) !important;
}
/* Dark mode: brighten common label elements */
html[data-theme="dark"] body.use-minimal strong,
html[data-theme="dark"] body.use-minimal b,
html[data-theme="dark"] body.use-minimal dt {
  color: rgba(255,255,255,0.98) !important;
}
/* Dark mode: additional common muted styles */
html[data-theme="dark"] body.use-minimal .lead { color: rgba(255,255,255,0.92) !important; }
html[data-theme="dark"] body.use-minimal small,
html[data-theme="dark"] body.use-minimal .small { color: rgba(255,255,255,0.82) !important; }
html[data-theme="dark"] body.use-minimal .form-text { color: rgba(255,255,255,0.82) !important; }
html[data-theme="dark"] body.use-minimal .list-group-item { color: rgba(255,255,255,0.88) !important; background: transparent !important; }
html[data-theme="dark"] body.use-minimal .card a.text-muted,
html[data-theme="dark"] body.use-minimal .card a.text-secondary,
html[data-theme="dark"] body.use-minimal .card a.text-body-secondary { color: rgba(255,255,255,0.92) !important; }
/* Ensure SVG icons also brighten in dark mode (except those marked to keep original colors) */
html[data-theme="dark"] body.use-minimal .card svg:not([data-keepcolor="true"]) [fill]:not([fill="none"]) { fill: rgba(255,255,255,0.9) !important; }
html[data-theme="dark"] body.use-minimal .card svg:not([data-keepcolor="true"]) [stroke]:not([stroke="none"]) { stroke: rgba(255,255,255,0.9) !important; }
/* Contact rows: make the text next to icons brighter in dark mode */
html[data-theme="dark"] body.use-minimal .card .d-flex span + span {
  color: rgba(255,255,255,0.94) !important;
  opacity: 1 !important;
}
/* Donate page: make CLICK wordmark white in dark mode */
html[data-theme="dark"] body.use-minimal .donate-click-wordmark { color: #ffffff !important; }
/* Keep active/hover state blue in floating navbar (overrides generic link color) */
body.use-minimal nav.navbar.navbar-floating .nav-link.active,
body.use-minimal nav.navbar.navbar-floating .nav-link:hover,
html[data-theme="dark"] body.use-minimal nav.navbar.navbar-floating .nav-link.active,
html[data-theme="dark"] body.use-minimal nav.navbar.navbar-floating .nav-link:hover {
  color: var(--primary) !important;
}
/* Theme helpers: show/hide light/dark assets */
.theme-light-only, .theme-dark-only { display: none !important; }
/* Scoped to minimal theme */
html[data-theme="light"] body.use-minimal .theme-light-only { display: inline-block !important; }
html[data-theme="light"] body.use-minimal .theme-dark-only { display: none !important; }
html[data-theme="dark"] body.use-minimal .theme-light-only { display: none !important; }
html[data-theme="dark"] body.use-minimal .theme-dark-only { display: inline-block !important; }
/* Global fallback (outside minimal scope) */
html[data-theme="light"] .theme-light-only { display: inline-block !important; }
html[data-theme="light"] .theme-dark-only { display: none !important; }
html[data-theme="dark"] .theme-light-only { display: none !important; }
html[data-theme="dark"] .theme-dark-only { display: inline-block !important; }
/* Constrain inner width to container-xxl for floating */
body.use-minimal nav.navbar.navbar-floating > .container-xxl,
body.use-minimal nav.navbar.navbar-floating > .container-fluid {
  /* Fill the bar width so .ms-auto creates the middle gap */
  display: flex !important;
  align-items: center;
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  /* Leave a little space at both edges so logo/toggle aren't flush */
}

/* Donate methods interaction */
.donate-methods .card {
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, outline-color .2s ease, opacity .2s ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.donate-methods:hover .card {
  filter: blur(6px);
  opacity: 0.85;
}
.donate-methods:focus-within .card {
  filter: blur(6px);
  opacity: 0.85;
}
.donate-methods .card:hover,
.donate-methods a.card:focus,
.donate-methods a.card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  outline-color: var(--primary);
  filter: none !important;
  opacity: 1 !important;
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .donate-methods .card { transition: none; }
}

/* Eliminate inner edge gaps while floating */
body.use-minimal nav.navbar.navbar-floating .navbar-brand {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
body.use-minimal nav.navbar.navbar-floating .navbar-collapse {
  padding-right: 0 !important;
  flex: 1 1 auto !important; /* allow space between nav and auth */
}
body.use-minimal nav.navbar.navbar-floating .navbar-collapse > .navbar-nav.ms-auto {
  margin-right: 0 !important;
}
/* Nudge the theme toggle slightly inward on floating bar */
body.use-minimal nav.navbar.navbar-floating #theme-toggle-icon {
  margin-right: 0; /* container padding provides the spacing */
}
/* On small screens keep bar full width and avoid rounding */
@media (max-width: 991.98px) {
  body.use-minimal nav.navbar.navbar-floating {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    border-radius: 0;
    border-left: none; border-right: none; border-top: none;
    width: 100% !important;
  }
}

/* Mobile: when collapse is open, stack items vertically with padding */
@media (max-width: 991.98px) {
  body.use-minimal .navbar .navbar-collapse.show {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding-top: 0.5rem;
  }
  body.use-minimal .navbar .navbar-collapse.show .navbar-nav {
    width: 100%;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
  }
  body.use-minimal .navbar .navbar-collapse.show .navbar-nav.ms-auto { margin-left: 0 !important; }
}

/* Scroll progress bar at very top */
body.use-minimal #scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--primary);
  z-index: 1200; /* above navbar (1100) */
  transition: width .12s ease-out, opacity .2s ease;
  pointer-events: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* Respect reduced motion: minimize transitions */
@media (prefers-reduced-motion: reduce) {
  body.use-minimal .navbar { transition: none; }
  body.use-minimal #scroll-progress-bar { transition: none; }
}

/* Profile dropdown - hidden by default, opens on hover/focus */
body.use-minimal .profile-dropdown { position: relative; display: inline-block; }
body.use-minimal .profile-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  color: var(--text);
  min-width: 220px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
  padding: 10px;
  z-index: 1000;
}
body.use-minimal .profile-dropdown:hover .profile-dropdown-content,
body.use-minimal .profile-dropdown:focus-within .profile-dropdown-content {
  display: block;
}
body.use-minimal .profile-info { padding: 8px 10px; border-bottom: 1px solid var(--divider); margin-bottom: 8px; }
body.use-minimal .profile-name { margin: 0; font-weight: 600; }
body.use-minimal .profile-dropdown-content small { color: var(--muted) !important; }

/* Media sizing */
/* Images scale down with container, but SVGs keep intrinsic size unless explicitly classed */
body.use-minimal img {
  max-width: 100%;
  height: auto;
}
body.use-minimal svg {
  width: auto;
  height: auto;
  max-width: none;
}
/* Defensive: inline SVGs without explicit size (and not .icon) default to 1em to avoid layout blowups */
body.use-minimal svg:not([width]):not([height]):not(.icon) {
  width: 1em;
  height: 1em;
  max-width: none;
}
/* Navbar brand logo sizing */
body.use-minimal .navbar-brand img { height: 40px; width: auto; display: inline-block; }
/* Generic icon utility (safe default) */
body.use-minimal .icon {
  width: 24px;
  height: 24px;
}
/* Profile pictures */
body.use-minimal .profile-pic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
body.use-minimal .profile-pic-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
/* Bootstrap Icons when used as avatars */
body.use-minimal .profile-pic.bi-person-circle {
  margin-bottom: 0 !important;
  margin-right: 0.5em;
  vertical-align: middle !important;
  line-height: normal !important;
  font-size: 32px;
}
body.use-minimal .profile-pic-lg.bi-person-circle {
  font-size: 64px;
  line-height: 64px;
}

/* Contextual icon sizes in nav and dropdowns */
body.use-minimal .navbar .icon,
body.use-minimal .navbar .bi,
body.use-minimal .profile-dropdown-content .icon,
body.use-minimal .profile-dropdown-content .bi,
body.use-minimal .dropdown-menu .icon,
body.use-minimal .dropdown-menu .bi {
  width: 18px;
  height: 18px;
  font-size: 18px;
  vertical-align: middle;
}
body.use-minimal .profile-dropdown-content a,
body.use-minimal .dropdown-menu a.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Links */
body.use-minimal a { color: var(--primary); text-decoration: none; }
body.use-minimal a:hover { color: var(--primary-600); text-decoration: none; }
/* Ensure nav links never underline on hover */
body.use-minimal .navbar .nav-link:hover { text-decoration: none !important; }

/* Recaptcha spacing */
body.use-minimal .g-recaptcha { transform: scale(1); transform-origin: left top; }

/* Utilities */
body.use-minimal .shadow-sm { box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important; }
body.use-minimal .shadow { box-shadow: 0 12px 28px rgba(0,0,0,0.06) !important; }

/* Focus ring for all focusable */
body.use-minimal :focus-visible { outline: none !important; box-shadow: var(--focus-ring); }

/* ===== Typewriter utility ===== */
/* Apply to inline text blocks you want to reveal like typing */
body.use-minimal .typewriter {
  display: inline-block;
  white-space: nowrap;          /* start as a single line while typing */
  overflow: hidden;
  /* Fast letter-by-letter typing; override via --typing-duration / --typing-steps if needed */
  --typing-duration: 2.5s;
  --typing-steps: 140;
  will-change: width;
  animation: minimal-typing var(--typing-duration) steps(var(--typing-steps), end) 1 both;
}
/* Use a small inline caret at the end of the last line instead of a full-height border */
body.use-minimal .typewriter::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;                 /* match line height */
  margin-left: 2px;
  background: color-mix(in srgb, var(--text) 70%, transparent);
  /* No blinking during typing to avoid flashing */
  opacity: 1;
  vertical-align: -0.125em;    /* visually center with text */
}
/* After typing is done: allow wrapping and hide caret */
body.use-minimal .typewriter.tw-done {
  white-space: normal;          /* now allow wrapping */
  word-break: break-word;       /* prevent overflow on long tokens */
}
body.use-minimal .typewriter.tw-done::after { display: none; }
@keyframes minimal-typing { from { width: 0 } to { width: 100% } }
@keyframes minimal-caret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Hero/logo and footer assets */
body.use-minimal .hero-logo-img {
  width: 120px;
  height: 120px;
  display: block;
}

/* Hero spacing adjustments */
body.use-minimal .hero-section {
  margin: 2rem auto 1rem auto;
}

/* ===== Cookie consent banner (dark mode) ===== */
html[data-theme="dark"] body.use-minimal #cookie-consent-banner .cookie-card {
  background: var(--surface-2) !important;
  border: 1px solid var(--divider) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] body.use-minimal #cookie-consent-banner .cookie-icon {
  background: color-mix(in srgb, var(--primary) 18%, transparent) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] body.use-minimal #cookie-consent-banner a {
  color: var(--primary-300) !important;
  text-decoration: underline;
}
/* Buttons in banner */
html[data-theme="dark"] body.use-minimal #cookie-consent-banner #cookie-more-btn {
  background: color-mix(in srgb, var(--surface) 85%, transparent) !important;
  color: var(--text) !important;
  border-color: var(--divider) !important;
}
html[data-theme="dark"] body.use-minimal #cookie-consent-banner #cookie-essential-btn {
  background: color-mix(in srgb, var(--surface) 80%, transparent) !important;
  color: var(--text) !important;
  border-color: var(--divider) !important;
}
html[data-theme="dark"] body.use-minimal #cookie-consent-banner #cookie-accept-btn {
  background: var(--primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--primary-600) !important;
}
/* Title and description colors */
html[data-theme="dark"] body.use-minimal #cookie-consent-banner .cookie-title { color: #ffffff !important; }
html[data-theme="dark"] body.use-minimal #cookie-consent-banner .cookie-desc { color: var(--muted) !important; }
@media (max-width: 900px) {
  body.use-minimal .hero-section { padding: 1.25rem 1rem; margin: 1.25rem auto 0.75rem; }
}
@media (max-width: 600px) {
  body.use-minimal .hero-section { padding: 1rem 0.75rem; }
}
body.use-minimal .footer-qr {
  width: 90px;
  height: 90px;
}

/* Section-leading icons appear subtle and aligned */
body.use-minimal h1 .icon,
body.use-minimal h2 .icon,
body.use-minimal h3 .icon,
body.use-minimal .section-title .icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: text-bottom;
}

/* Optional: subtle divider utility for sections */
body.use-minimal .section-divider { border-top: 1px solid var(--divider); margin: 1.5rem 0; }

/* ===== Landing Page Polishing ===== */
/* Group wrapper helps control spacing below navbar */
body.use-minimal .landing-hero-group { margin-top: 0; }
/* Sections & rhythm */
body.use-minimal section { padding: 56px 0; }
body.use-minimal .section-sm { padding: 32px 0; }
body.use-minimal .section-lg { padding: 72px 0; }

/* Hero glass card */
body.use-minimal .glass-hero {
  background: color-mix(in oklab, var(--surface) 85%, transparent);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 2rem 1.25rem;
  text-align: center;
}
@media (min-width: 900px) {
  body.use-minimal .glass-hero { padding: 2.5rem 2rem; }
}
body.use-minimal .hero-title { letter-spacing: -0.02em; }
body.use-minimal .hero-tagline { color: var(--muted); }

/* Ensure the exact hero card uses the larger rounding we set for glow-card */
body.use-minimal .glass-hero.glow-card {
  border-radius: 32px; /* override later generic .glass-hero rules */
}

/* Skills grid */
body.use-minimal .skills-showcase { max-width: 1100px; margin: 2rem auto 1rem; }
body.use-minimal .skill-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 1.25rem;
  min-width: 240px;
  color: var(--text) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.use-minimal .skill-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(2,6,23,.10); border-color: color-mix(in oklab, var(--primary) 35%, var(--divider)); }
body.use-minimal .skill-card .icon { width: 24px; height: 24px; color: var(--primary); }
body.use-minimal .skill-card h2 { font-weight: 700; color: var(--primary); }
body.use-minimal .skill-card p { color: var(--text); opacity: .9; }

/* Landing CTA button */
body.use-minimal .landing-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--primary); color: #fff !important; border: 1px solid var(--primary);
  box-shadow: 0 8px 22px rgba(0,111,238, .25);
  font-weight: 700; letter-spacing: .01em; text-decoration: none;
}
body.use-minimal .landing-cta-btn:hover { background: var(--primary-600); border-color: var(--primary-600); box-shadow: 0 10px 26px rgba(0, 95, 204, .30); }

/* Wide CTA section */
body.use-minimal .cta-wide-section { background: var(--surface-2); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }

/* Landing footer */
body.use-minimal .landing-footer { max-width: 1100px; margin: 1.25rem auto 0; color: var(--muted); text-align: center; }

/* Footer columns like Aceternity */
body.use-minimal footer.site-footer { background: var(--surface); border-top: 1px solid var(--divider); }
body.use-minimal footer.site-footer .footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
body.use-minimal footer.site-footer .footer-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) {
  body.use-minimal footer.site-footer .footer-grid { grid-template-columns: 1.2fr .8fr .8fr .8fr; }
}
body.use-minimal footer.site-footer h6 { font-size: .95rem; font-weight: 700; margin-bottom: .5rem; color: var(--text); }
body.use-minimal footer.site-footer ul { list-style: none; padding: 0; margin: 0; }
body.use-minimal footer.site-footer a { color: var(--muted); text-decoration: none; }
body.use-minimal footer.site-footer a:hover { color: var(--primary); }

/* Optional soft animated background */
body.use-minimal .animated-bg { position: absolute; inset: 0; pointer-events: none; opacity: .05; background: radial-gradient(600px 300px at 70% 10%, var(--primary), transparent 60%); }

/* ===== Centered Hero + Code Preview Card ===== */
body.use-minimal .hero-center h1 { font-weight: 800; letter-spacing: -0.02em; }
body.use-minimal .hero-center .lead { color: var(--muted); }

/* Mac-like code window */
body.use-minimal .code-preview-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
  max-width: 980px;
  overflow: hidden;
}
body.use-minimal .code-preview-card .code-toolbar {
  border-bottom: 1px solid var(--divider);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
body.use-minimal .code-preview-card .dot { width: 10px; height: 10px; display: inline-block; border-radius: 50%; }
body.use-minimal .code-preview-card .dot-red { background: #ff5f56; }
body.use-minimal .code-preview-card .dot-yellow { background: #ffbd2e; }
body.use-minimal .code-preview-card .dot-green { background: #27c93f; }
body.use-minimal .code-preview-card .code-body { background: color-mix(in srgb, var(--surface) 92%, transparent); }
body.use-minimal .code-preview-card pre { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Feature cards: heading colors per theme */
/* Light mode: use primary/text colors (not white) */
html[data-theme="light"] body.use-minimal .feature-card h3,
html[data-theme="light"] body.use-minimal .feature-card .h5,
html[data-theme="light"] body.use-minimal .feature-card h5 {
  color: var(--text) !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}
/* Dark mode: brighten to white for contrast */
html[data-theme="dark"] body.use-minimal .feature-card h3,
html[data-theme="dark"] body.use-minimal .feature-card .h5,
html[data-theme="dark"] body.use-minimal .feature-card h5 {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}
/* Align buttons on the same line across cards */
body.use-minimal .feature-card .card-body {
  display: flex;
  flex-direction: column;
  min-height: 230px;
}
body.use-minimal .feature-card .card-body > a.btn {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 575.98px) {
  body.use-minimal .feature-card .card-body { min-height: 200px; }
}

/* Max specificity to defeat any accidental overrides */
/* Ensure nested heading styles also respect theme */
html[data-theme="light"] body.use-minimal .feature-card .card-body h3.h5,
html[data-theme="light"] body.use-minimal .feature-card .card-body h3 {
  color: var(--text) !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}
html[data-theme="dark"] body.use-minimal .feature-card .card-body h3.h5,
html[data-theme="dark"] body.use-minimal .feature-card .card-body h3 {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

/* ===== Auth pages readability (dark mode) ===== */
/* Login heading inside card header */
html[data-theme="dark"] body.use-minimal .card .card-header h4,
html[data-theme="dark"] body.use-minimal .card .card-header .tw-text-slate-800 {
  color: #ffffff !important;
}
/* "Don't have an account?" helper text and link */
html[data-theme="dark"] body.use-minimal .card .mt-3.text-center span {
  color: #ffffff !important;
  opacity: 1 !important;
}
html[data-theme="dark"] body.use-minimal .card .mt-3.text-center a,
html[data-theme="dark"] body.use-minimal .card .mt-3.text-center span a {
  color: var(--primary) !important;
  opacity: 1 !important;
}

/* ===== FAQ / Accordion dark mode ===== */
/* Use Bootstrap 5 accordion CSS variables to adapt to minimal dark theme */
html[data-theme="dark"] body.use-minimal .accordion {
  --bs-accordion-color: var(--text);
  --bs-accordion-bg: var(--surface);
  --bs-accordion-border-color: var(--divider);
  --bs-accordion-btn-color: var(--text);
  --bs-accordion-btn-bg: var(--surface);
  --bs-accordion-active-color: #ffffff;
  --bs-accordion-active-bg: color-mix(in srgb, var(--surface-2) 85%, transparent);
  --bs-accordion-btn-focus-box-shadow: var(--focus-ring);
  --bs-accordion-icon-color: var(--muted);
  --bs-accordion-icon-active-color: #ffffff;
}
/* Ensure items and buttons pick up the dark surfaces explicitly */
html[data-theme="dark"] body.use-minimal .accordion .accordion-item {
  background-color: var(--surface) !important;
  border-color: var(--divider) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] body.use-minimal .accordion .accordion-button {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] body.use-minimal .accordion .accordion-button:not(.collapsed) {
  background-color: color-mix(in srgb, var(--surface-2) 85%, transparent) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.use-minimal .accordion .accordion-button:focus {
  box-shadow: var(--focus-ring) !important;
  border-color: var(--primary) !important;
}

/* Blue chevrons for accordion in dark mode */
html[data-theme="dark"] body.use-minimal .accordion {
  /* Override Bootstrap's icon SVGs with primary-colored chevrons */
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M1.5 5.5L8 12l6.5-6.5' stroke='%23006FEE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}

/* ===== Minimal theme: Highlight popup (take_test.php) ===== */
/* Widen popup and soften corners */
body.use-minimal .highlight-popup {
  min-width: 240px !important;
  max-width: 320px !important;
  padding: 0 !important; /* move padding to card so rounding is visible */
  background: transparent !important; /* let the card render the surface */
  border: 0 !important; /* avoid double borders */
  border-radius: 0 !important; /* card handles rounding */
  z-index: 2147483647 !important; /* ensure above any UI elements */
}
/* Card inside the popup */
body.use-minimal .highlight-popup .hp-card {
  border-radius: 18px !important;
  padding: 14px 16px !important;
  background: #111827 !important;
  border: 1px solid #374151 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.5) !important;
  z-index: 2147483647 !important;
}
/* Spacing for title and color row */
body.use-minimal .highlight-popup .hp-title { margin-bottom: 8px !important; text-align: center !important; }
body.use-minimal .highlight-popup .hp-colors {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 28px !important;
  margin-bottom: 14px !important;
  padding: 0 8px !important;
  justify-content: center !important;
}
body.use-minimal .highlight-popup .popup-actions { gap: 10px !important; }
/* Color chips: a bit larger, clearer selection */
body.use-minimal .highlight-popup .color-option {
  display: inline-block !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important; /* ensure perfect circle */
  border: 2px solid rgba(255,255,255,0.85) !important;
  margin: 0 !important; /* neutralize base margin to rely solely on gap */
}
body.use-minimal .highlight-popup .color-option.selected,
body.use-minimal .highlight-popup .color-option:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 3px !important; /* avoid visual crowding */
  border-color: #ffffff !important;
}

/* Extra highlight color options supported in minimal theme */
/* Light mode tokens */
body.use-minimal .highlighted-text[data-color="purple"] { background-color: #c084fc !important; color: #111318 !important; }
body.use-minimal .highlighted-text[data-color="teal"]   { background-color: #5eead4 !important; color: #111318 !important; }
body.use-minimal .highlighted-text[data-color="red"]    { background-color: #fecaca !important; color: #111318 !important; }
/* Dark mode variants */
html[data-theme="dark"] body.use-minimal .highlighted-text[data-color="purple"] { background-color: #a78bfa !important; color: #111318 !important; }
html[data-theme="dark"] body.use-minimal .highlighted-text[data-color="teal"]   { background-color: #2dd4bf !important; color: #111318 !important; }
html[data-theme="dark"] body.use-minimal .highlighted-text[data-color="red"]    { background-color: #ef4444 !important; color: #fff !important; }

/* Rounded corners for highlighted selections in minimal theme */
body.use-minimal .highlighted-text {
  border-radius: 6px !important;
  padding: 0.12em 0.22em !important; /* slightly increase to complement rounding */
}

/* Note indicator: replace emoji with a small red dot (minimal theme) */
body.use-minimal .highlighted-text[data-has-note="true"] {
  position: relative !important;
  box-shadow: none !important; /* neutralize any previous blue ring */
}
/* Default (light) ring uses white to separate the dot from highlight */
body.use-minimal .highlighted-text[data-has-note="true"]::after {
  content: "" !important;
  position: absolute !important;
  top: -0.28em !important;
  right: -0.28em !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #ef4444 !important; /* red */
  box-shadow: 0 0 0 2px #ffffff !important; /* ring for contrast in light */
}
/* Dark mode: ring matches dark surface to keep dot crisp */
html[data-theme="dark"] body.use-minimal .highlighted-text[data-has-note="true"]::after {
  box-shadow: 0 0 0 2px #111827 !important;
}

/* Inputs and buttons rounding to match card */
body.use-minimal .highlight-popup textarea {
  border-radius: 10px !important;
  display: block !important;
  width: 92% !important;
  margin: 0 auto 12px !important; /* center the textarea box */
  text-align: center !important; /* keep placeholder/content centered */
}
/* margin handled above with auto-centering */
body.use-minimal .highlight-popup .btn, 
body.use-minimal .highlight-popup button { border-radius: 10px !important; }
/* Ensure the three action buttons are centered as a group */
body.use-minimal .highlight-popup .popup-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ===== Stronger specificity to override main.css ===== */
/* Outer container: transparent, no border, visible overflow; keep rounded edges too to avoid clipping */
html[data-theme="light"] body.use-minimal .highlight-popup.highlight-popup {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.use-minimal .highlight-popup.highlight-popup {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}
/* Inner card: actual surface, border, shadow and rounding */
html[data-theme="light"] body.use-minimal .highlight-popup .hp-card.hp-card {
  border-radius: 18px !important;
  background: #ffffff !important;
  background-image: linear-gradient(#ffffff, #ffffff) !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12) !important;
}
/* Light mode text colors override dark defaults from main.css */
html[data-theme="light"] body.use-minimal .highlight-popup,
html[data-theme="light"] body.use-minimal .highlight-popup * {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}
html[data-theme="light"] body.use-minimal .highlight-popup strong {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
/* Light mode inputs */
html[data-theme="light"] body.use-minimal .highlight-popup textarea {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
  -webkit-text-fill-color: #111827 !important; /* actual typed text color */
}
html[data-theme="light"] body.use-minimal .highlight-popup textarea::placeholder {
  color: #808080 !important; /* standard gray */
  opacity: 1 !important;
}
/* Ensure WebKit honors grey placeholder even if parent sets -webkit-text-fill-color */
html[data-theme="light"] body.use-minimal .highlight-popup textarea::-webkit-input-placeholder {
  color: #808080 !important;
  -webkit-text-fill-color: #808080 !important;
  opacity: 1 !important;
}
/* Firefox */
html[data-theme="light"] body.use-minimal .highlight-popup textarea::-moz-placeholder {
  color: #808080 !important;
  opacity: 1 !important;
}
/* IE/Edge (legacy) */
html[data-theme="light"] body.use-minimal .highlight-popup textarea:-ms-input-placeholder {
  color: #808080 !important;
}

/* Strongest override scoped to the inner card */
html[data-theme="light"] body.use-minimal .highlight-popup .hp-card textarea::placeholder,
html[data-theme="light"] body.use-minimal .highlight-popup .hp-card textarea::-webkit-input-placeholder,
html[data-theme="light"] body.use-minimal .highlight-popup .hp-card textarea::-moz-placeholder,
html[data-theme="light"] body.use-minimal .highlight-popup .hp-card textarea:-ms-input-placeholder {
  color: #808080 !important;
  -webkit-text-fill-color: #808080 !important;
  opacity: 1 !important;
}
/* Light mode color chip borders */
html[data-theme="light"] body.use-minimal .highlight-popup .color-option {
  border-color: #94a3b8 !important;
}
html[data-theme="dark"] body.use-minimal .highlight-popup .hp-card.hp-card {
  border-radius: 18px !important;
  background: #111827 !important;
  background-image: linear-gradient(#111827, #111827) !important;
  border: 1px solid #374151 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.5) !important;
}

/* ===== 3D Donate Button (minimal theme) ===== */
body.use-minimal .donate-3d-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 0.95rem 2rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff !important;
  background: linear-gradient(90deg, #e53935 0%, #2563eb 100%);
  box-shadow: 0 10px 0 #223a8f, 0 10px 24px rgba(37,99,235,0.25);
  transform: translateY(0);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.3s ease;
  text-decoration: none !important;
}
body.use-minimal .donate-3d-btn:hover,
body.use-minimal .donate-3d-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 0 #1d327a, 0 18px 28px rgba(37,99,235,0.35);
}
body.use-minimal .donate-3d-btn:active {
  transform: translateY(4px);
  box-shadow: 0 6px 0 #1d327a, 0 8px 18px rgba(37,99,235,0.28);
}
body.use-minimal .donate-3d-btn .label-default,
body.use-minimal .donate-3d-btn .label-hover {
  display: block;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
/* Explicit initial states */
body.use-minimal .donate-3d-btn .label-default { opacity: 1; visibility: visible; }
body.use-minimal .donate-3d-btn .label-hover { opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none; }
/* Overlap labels so the hover label does not take space initially */
body.use-minimal .donate-3d-btn .label-wrap {
  position: relative;
  display: grid;
}
body.use-minimal .donate-3d-btn .label-wrap > .label-default,
body.use-minimal .donate-3d-btn .label-wrap > .label-hover {
  grid-area: 1 / 1;
}
body.use-minimal .donate-3d-btn .label-hover { opacity: 0; transform: translateY(4px); }
body.use-minimal .donate-3d-btn:hover .label-default,
body.use-minimal .donate-3d-btn:focus .label-default { opacity: 0; transform: translateY(-4px); visibility: hidden; }
body.use-minimal .donate-3d-btn:hover .label-hover,
body.use-minimal .donate-3d-btn:focus .label-hover { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }
body.use-minimal .donate-3d-btn .bi { color: #fff; }

/* Dark mode variant for minimal theme */
html[data-theme="dark"] body.use-minimal .donate-3d-btn {
  /* Match light mode gradient exactly */
  background: linear-gradient(90deg, #e53935 0%, #2563eb 100%);
  /* Same depth across themes */
  box-shadow: 0 10px 0 #223a8f, 0 10px 24px rgba(37,99,235,0.25);
}
/* Keep gradient constant on hover/focus in dark mode */
html[data-theme="dark"] body.use-minimal .donate-3d-btn:hover,
html[data-theme="dark"] body.use-minimal .donate-3d-btn:focus {
  background: linear-gradient(90deg, #e53935 0%, #2563eb 100%);
}