/* ═══════════════════════════════════════════════════════════════
   THE AI DIRECTOR — Signal Dark Template
   Space Grotesk + Inter + Space Mono
   ═══════════════════════════════════════════════════════════════ */

/* ─── Design tokens ──────────────────────────────────────────── */
:root {
  /* backgrounds */
  --bg:          #0a0a0f;
  --bg2:         #0f0f1a;
  --bg3:         #181825;
  --panel:       #141420;
  --panel2:      #1c1c2e;

  /* borders */
  --border:      rgba(255, 255, 255, 0.07);
  --border-md:   rgba(255, 255, 255, 0.12);
  --border-strong:rgba(255, 255, 255, 0.15);
  --border-lg:   rgba(255, 255, 255, 0.18);

  /* text */
  --text:        #f0f0ff;
  --text-soft:   rgba(240, 240, 255, 0.76);
  --muted:       rgba(240, 240, 255, 0.42);
  --muted2:      rgba(240, 240, 255, 0.28);

  /* brand accents */
  --violet:      #7c3aed;
  --violet-lt:   #a78bfa;
  --violet-dim:  rgba(124, 58, 237, 0.18);
  --cyan:        #06b6d4;
  --cyan-lt:     #67e8f9;
  --cyan-dim:    rgba(6, 182, 212, 0.14);
  --amber:       #f59e0b;
  --amber-dim:   rgba(245, 158, 11, 0.15);
  --emerald:     #10b981;
  --emerald-dim: rgba(16, 185, 129, 0.14);
  --rose:        #f43f5e;
  --rose-dim:    rgba(244, 63, 94, 0.14);

  /* alert text (lighter shades for dark backgrounds) */
  --success-text: #6ee7b7;
  --danger-text:  #fda4af;
  --warning-text: #fcd34d;

  /* gradients */
  --grad-signal: linear-gradient(90deg, var(--violet), var(--cyan));
  --grad-glow:   linear-gradient(135deg, rgba(124,58,237,.22) 0%, rgba(6,182,212,.12) 100%);

  /* typography */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  /* layout */
  --max-w:       1320px;
  --nav-h:       72px;
  --nav-h-sm:    60px;
  --subnav-h:    40px;
  --sticky-offset: calc(var(--nav-h) + var(--subnav-h));
  --radius:      4px;

  /* accent variants */
  --violet-dark: #6d28d9;

  /* icons */
  --chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238888a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");

  /* easing */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--sticky-offset) + 1.5rem);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
iframe, video, embed, object { max-width: 100%; }
hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
button { font-family: inherit; cursor: pointer; }

/* ─── Link hover background (toggle: body.taid-link-hover-bg) ── */
/* Excluded from modules with custom sidebar classes (.sidemenu-li-pa, .taid-sidebar-list) */
body.taid-link-hover-bg .taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlescategory > li:hover,
body.taid-link-hover-bg .taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articles-items li:hover,
body.taid-link-hover-bg .taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mostread li:hover,
body.taid-link-hover-bg .taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .latestlist li:hover,
body.taid-link-hover-bg .taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-userslatest li:hover,
body.taid-link-hover-bg .taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlesarchive li:hover,
body.taid-link-hover-bg .taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .feed .newsfeed li:hover,
body.taid-link-hover-bg .taid-col-panel .mod-articles-items li:hover,
body.taid-link-hover-bg .taid-col-panel .mod-tagssimilar li:hover,
body.taid-link-hover-bg .taid-col-panel .latestlist li:hover,
body.taid-link-hover-bg .taid-col-panel .mostread li:hover,
body.taid-link-hover-bg .taid-col-panel .mod-relateditems li:hover,
body.taid-link-hover-bg .taid-col-panel .mod-articlescategories li:hover,
body.taid-link-hover-bg .taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-tagssimilar li:hover,
body.taid-link-hover-bg .taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-relateditems li:hover {
  background: rgba(124, 58, 237, 0.06);
  border-radius: var(--radius);
  transition: background .2s ease;
}

/* ─── Rounded article images (toggle: body.taid-rounded-images) ── */
body.taid-rounded-images .item-image img,
body.taid-rounded-images .article-inline-image img,
body.taid-rounded-images .com-content-article__body figure img,
body.taid-rounded-images .blog-item .item-image img {
  border-radius: 6px;
}

/* ─── Accessibility ──────────────────────────────────────────── */
.taid-skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--violet);
  color: #fff;
  padding: .5rem 1rem;
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .06em;
  z-index: 9999;
}
.taid-skip-link:focus { top: .5rem; }

:focus-visible {
  outline: 1px solid var(--violet);
  outline-offset: 2px;
}
/* Inputs already have border-color + box-shadow on focus — suppress the outline */
.form-control:focus-visible,
.form-select:focus-visible { outline: none; }

/* ─── Scroll animations ──────────────────────────────────────── */
@keyframes taid-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.taid-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.taid-fade-up.is-visible { opacity: 1; transform: translateY(0); }

/* ─── Reading progress bar ───────────────────────────────────── */
.taid-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--grad-signal);
  z-index: 9999;
  transition: width .1s linear;
  pointer-events: none;
}

/* ─── Signal bar (2px brand fingerprint) ─────────────────────── */
.taid-signal-bar {
  height: 2px;
  background: var(--grad-signal);
  width: 100%;
}

/* ─── Container ──────────────────────────────────────────────── */
.taid-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.taid-container--tight { padding-top: 1rem; padding-bottom: 1rem; }

/* ─── Navigation ─────────────────────────────────────────────── */
.taid-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--nav-h);
  border-bottom: 1px solid var(--border);
  background: rgba(10, 10, 15, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
}
.taid-nav-wrap.is-scrolled {
  background: rgba(10, 10, 15, 0.97);
  border-bottom-color: var(--border-md);
  box-shadow: 0 4px 32px rgba(0,0,0,.6);
}

.taid-nav {
  position: relative;
  display: flex;
  align-items: stretch;          /* stretch so menu fills full nav height */
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
  gap: 1.5rem;
}

/* Logo and actions stay vertically centered */
.taid-logo       { align-self: center; }
.taid-nav-actions { align-self: center; }

/* Nav Search — fullscreen overlay */
.taid-nav-search {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5,5,10,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.taid-nav-search.is-open { display: flex; }
.taid-nav-search search { display: block; width: 100%; max-width: 560px; }
.taid-nav-search .mod-finder { display: flex; align-items: center; width: 100%; max-width: 560px; }
.taid-nav-search .mod-finder__search.input-group { width: 100%; }
.taid-nav-search .awesomplete { display: flex !important; align-items: center; width: 100%; }
.taid-nav-search .mod-finder__input,
.taid-nav-search input[type="search"],
.taid-nav-search input[type="text"] {
  background: var(--bg2);
  border: 1px solid var(--border-md);
  border-radius: 8px;
  color: var(--text);
  padding: .9rem 1.25rem;
  font-size: 1.1rem;
  width: 100%;
  transition: border-color .2s;
}
.taid-nav-search input:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 20px rgba(124,58,237,.15);
}
.taid-nav-search input::placeholder { color: var(--text-soft); }
.taid-nav-search button[type="submit"],
.taid-nav-search .mod-finder__submit { display: none; }
/* Awesomplete dropdown */
.taid-nav-search .awesomplete > ul {
  background: var(--bg2);
  border: 1px solid var(--border-md);
  border-radius: 8px;
  margin-top: .35rem;
  padding: .35rem 0;
  list-style: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  z-index: 10000;
}
.taid-nav-search .awesomplete > ul > li {
  padding: .55rem 1.25rem;
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
}
.taid-nav-search .awesomplete > ul > li:hover,
.taid-nav-search .awesomplete > ul > li[aria-selected="true"] {
  background: var(--bg3);
  color: var(--text);
}
.taid-nav-search .awesomplete > ul > li mark {
  background: transparent;
  color: var(--violet-lt);
  font-weight: 600;
}
.taid-nav-search label,
.taid-nav-search .finder,
.taid-nav-search label.finder { display: none !important; }

/* Awesomplete (com_finder search page) */
.com-finder .awesomplete > ul {
  background: var(--bg2) !important;
  background-image: none !important;
  border: 1px solid var(--border-md) !important;
  border-radius: 8px;
  margin-top: .35rem;
  padding: .35rem 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  list-style: none;
}
.com-finder .awesomplete > ul::before,
.com-finder .awesomplete > ul::after {
  display: none !important;
}
.com-finder .awesomplete > ul > li {
  padding: .55rem 1.25rem;
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
}
.com-finder .awesomplete > ul > li:hover,
.com-finder .awesomplete > ul > li[aria-selected="true"] {
  background: var(--bg3);
  color: var(--text);
}
.com-finder .awesomplete > ul > li mark {
  background: transparent;
  color: var(--violet-lt);
  font-weight: 600;
}

/* Logo */
.taid-logo { display: flex; align-items: center; flex-shrink: 0; }
.taid-logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  transition: opacity .2s ease;
}
.taid-logo:hover .taid-logo-text { opacity: .8; }
.taid-logo-ai,
.taid-logo-text span {
  background: var(--grad-signal);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Menu */
.taid-menu {
  flex: 1;
  display: flex;
  align-items: stretch;          /* stretch to full nav height */
  justify-content: center;
}

.taid-menu .navbar,
.taid-menu nav { padding: 0; background: transparent; border: 0; }

/* Strip the moduletable wrapper that Joomla inserts */
.taid-menu .moduletable {
  display: flex !important;
  align-items: stretch !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.taid-menu .moduletable:hover {
  border-color: transparent !important;
  box-shadow: none !important;
}

.taid-menu ul,
.taid-menu .mod-menu,
.taid-menu .nav {
  list-style: none;
  display: flex;
  align-items: stretch;          /* items fill full nav height */
  flex-wrap: nowrap;
  gap: clamp(.8rem, 2vw, 2rem);
}

/* Each nav item stretches full height — entire area is hoverable */
.taid-menu .mod-menu > li {
  position: relative;
  display: flex;
  align-items: stretch;
}
/* ── Dropdown panel ── */
.taid-menu .mod-menu > li > .mod-menu__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: var(--bg2);
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--violet);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(124,58,237,.08);
  z-index: 1001;
  padding: .4rem 0;
  list-style: none;
  margin: 0;
}
.taid-menu .mod-menu > li.parent:hover > .mod-menu__sub,
.taid-menu .mod-menu > li.parent:focus-within > .mod-menu__sub { display: block; }

/* ▾ arrow on parent trigger */
.taid-menu .mod-menu > li.parent > a::after {
  content: ' ▾';
  position: static;
  width: auto;
  height: auto;
  background: none;
  font-size: .65em;
  opacity: .6;
  transition: opacity .2s;
  display: inline;
}
.taid-menu .mod-menu > li.parent:hover > a::after { opacity: 1; }
/* Hide Joomla's toggle-sub button — we use the CSS ▾ arrow instead */
.taid-menu .mod-menu__toggle-sub { display: none; }

/* Dropdown links */
.taid-menu .mod-menu__sub .nav-item { display: block; }
.taid-menu .mod-menu__sub .nav-item > a {
  display: block;
  padding: .6rem 1.25rem;
  color: var(--text-soft);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, background .15s, padding-left .15s;
}
.taid-menu .mod-menu__sub .nav-item > a:hover {
  color: var(--violet-lt);
  background: rgba(124,58,237,.08);
  padding-left: 1.5rem;
}
.taid-menu .mod-menu__sub .nav-item > a::after { display: none; }
.taid-menu .mod-menu__sub .nav-item.active > a,
.taid-menu .mod-menu__sub .nav-item.current > a {
  color: var(--violet-lt);
  background: rgba(124,58,237,.1);
}

.taid-menu a {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s ease;
  position: relative;
  white-space: nowrap;          /* prevent items wrapping to multiple lines */
  /* Full-height clickable area — text centred vertically */
  display: flex;
  align-items: center;
  padding: 0 .25rem;
}
.taid-menu a::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--grad-signal);
  transition: width .28s var(--ease);
}
.taid-menu a:hover { color: var(--text); }
.taid-menu a:hover::after,
.taid-menu .active > a::after { width: 100%; }
.taid-menu .active > a { color: var(--text); }

/* Bootstrap navbar toggler (inside menu div) */
.taid-menu .navbar-toggler {
  background: transparent;
  border: 1px solid var(--border-md);
  color: var(--text-soft);
  padding: .4rem .65rem;
  transition: border-color .2s ease;
}
.taid-menu .navbar-toggler:hover { border-color: var(--border-lg); }

/* Nav actions (CTA + hamburger) */
.taid-nav-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.taid-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .65rem 1.4rem;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .25s var(--ease);
  white-space: nowrap;
}

.taid-btn--lg { font-size: .8rem; padding: .85rem 1.8rem; }

.taid-btn-primary {
  background: var(--violet);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, .4);
}
.taid-btn-primary:hover {
  background: var(--violet-dark);
  box-shadow: 0 0 18px rgba(124, 58, 237, .45), 0 0 0 1px rgba(124,58,237,.6);
  transform: translateY(-1px);
  color: #fff;
}

.taid-btn-ghost {
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--border-md);
}
.taid-btn-ghost:hover {
  border-color: var(--border-lg);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  transform: translateY(-1px);
}

/* Hamburger */
.taid-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  color: var(--text-soft);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.taid-search-toggle:hover { border-color: var(--border-lg); color: var(--text); }
.taid-search-toggle[aria-expanded="true"] { color: var(--violet-lt); border-color: var(--violet); }

.taid-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border-md);
  padding: 0 10px;
  border-radius: var(--radius);
  transition: border-color .2s ease;
}
.taid-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-soft);
  border-radius: 2px;
  transition: all .25s var(--ease);
}
.taid-hamburger:hover { border-color: var(--border-lg); }
.taid-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.taid-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.taid-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── Hero ───────────────────────────────────────────────────── */
.taid-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 90% 10%, rgba(124,58,237,.16) 0%, transparent 65%),
    radial-gradient(ellipse 50% 55% at 10% 85%, rgba(6,182,212,.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 60%, var(--bg) 100%);
}

.taid-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%);
}

/* ─── Hero Image Layouts ──────────────────────────────────── */
.taid-hero--has-image {
  position: relative;
}
.taid-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.taid-hero--has-image .taid-hero-inner {
  position: relative;
  z-index: 1;
  background: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.taid-hero--has-image .taid-hero-grid {
  display: none;
}
.taid-hero--side {
  display: flex;
  align-items: center;
}
.taid-hero--side .taid-hero-inner {
  flex: 1;
  max-width: 50%;
}
.taid-hero--side[style*="background-image"] {
  background-position: right center;
  background-size: 50% auto;
}

.taid-hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 7rem;
  padding-bottom: 6rem;
}

.taid-eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.taid-eyebrow::before {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 1px;
  background: var(--grad-signal);
  flex-shrink: 0;
}

.taid-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: .92;
  letter-spacing: -.03em;
  color: var(--text);
  max-width: 14ch;
  margin-bottom: 1.8rem;
}

.taid-hero-subtitle {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 56ch;
  margin-bottom: 2.4rem;
  font-weight: 300;
}

.taid-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.taid-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 640px;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.taid-stat { display: flex; flex-direction: column; gap: .2rem; }

.taid-stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  background: var(--grad-signal);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.taid-stat-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: .04em;
}

.taid-hero-modules { padding-bottom: 2rem; }

/* ─── Secondary category nav strip ──────────────────────────── */
/* Subnav — desktop only (≥992px) */
@media (max-width: 991px) {
  .taid-subnav { display: none !important; }
  :root { --sticky-offset: var(--nav-h); }
}
.taid-subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 999;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.taid-subnav .taid-container { padding-top: 0; padding-bottom: 0; }

.taid-subnav .mod-menu.nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.taid-subnav .mod-menu.nav::-webkit-scrollbar { display: none; }
.taid-subnav .mod-menu.nav .nav-item {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
/* Thin divider between items only — no outer frame */
.taid-subnav .mod-menu.nav .nav-item + .nav-item {
  border-left: 1px solid var(--border);
}

/* Target the bare <a> — Joomla mod_menu adds no class in this install */
.taid-subnav .mod-menu.nav .nav-item > a {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .75rem 1.25rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.taid-subnav .mod-menu.nav .nav-item > a:hover {
  color: var(--text-soft);
  background: rgba(255,255,255,.04);
  border-bottom-color: rgba(124,58,237,.5);
}
.taid-subnav .mod-menu.nav .nav-item.current > a,
.taid-subnav .mod-menu.nav .nav-item.active > a {
  color: var(--amber) !important;
  background: rgba(245,158,11,.06) !important;
  border-bottom-color: var(--amber) !important;
  font-weight: 600;
}

/* ─── Subnav: user bar (mod_login logged-in state) ─────────── */
/* mod_login in subnav uses style="none" — no wrapper div, so target
   the form directly by position context (.taid-subnav). */
.taid-subnav .taid-container {
  display: flex;
  align-items: center;
}
.taid-subnav .mod-login-logout {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0;
  margin: 0;
  margin-left: auto;
  flex-shrink: 0;
}
.taid-subnav .mod-login-logout .login-greeting {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-soft);
  white-space: nowrap;
}
.taid-subnav .mod-login-logout .mod-login-logout__options {
  display: none;
}
.taid-subnav .mod-login-logout .logout-button {
  margin: 0;
}
.taid-subnav .mod-login-logout .logout-button .btn {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  color: var(--muted) !important;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.taid-subnav .mod-login-logout .logout-button .btn:hover {
  color: var(--rose) !important;
  border-color: rgba(244,63,94,.4) !important;
  background: rgba(244,63,94,.06) !important;
}

/* ─── Announcement bar ───────────────────────────────────────── */
.taid-announce {
  border-bottom: 1px solid var(--border);
  background: rgba(124, 58, 237, .08);
  font-size: .82rem;
  text-align: center;
  color: var(--text-soft);
}
.taid-announce .moduletable,
.taid-announce .module { border: 0; padding: .6rem 0; }

/* ─── Section chrome ─────────────────────────────────────────── */
.taid-section {
  border-bottom: 1px solid var(--border);
  padding: 4.5rem 0;
}

.taid-section-title {
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--violet-lt);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.taid-section-title::after {
  content: '';
  flex: 0 0 3rem;
  height: 1px;
  background: var(--grad-signal);
  opacity: .6;
}

.taid-section-lead {
  font-size: 1.05rem;
  color: var(--text-soft);
  max-width: 60ch;
  margin-bottom: 2.5rem;
  font-weight: 300;
}
.taid-inline-link {
  color: var(--cyan-lt);
  text-decoration: none;
  font-weight: 400;
  white-space: nowrap;
  transition: color .15s;
}
.taid-inline-link:hover { color: var(--violet-lt); }

/* ─── Featured editorial cards (module 127) ──────────────────── */
.taid-feat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
}

.taid-feat-card {
  background: var(--panel);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: background .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.taid-feat-card:hover {
  background: var(--panel2);
  box-shadow: inset 0 0 0 1px rgba(124,58,237,.25);
}

.taid-feat-card--primary {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--panel2) 0%, rgba(124,58,237,.08) 100%);
  padding: 2.5rem;
  border-bottom: 1px solid var(--border);
}
.taid-feat-card--primary .taid-feat-title a {
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
}

.taid-feat-meta { display: flex; align-items: center; gap: .6rem; }

.taid-feat-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0;
}
.taid-feat-title a {
  color: var(--text);
  text-decoration: none;
  transition: color .2s ease;
}
.taid-feat-title a:hover { color: var(--violet-lt); }

.taid-feat-desc {
  font-size: .92rem;
  color: var(--text-soft);
  line-height: 1.7;
  font-weight: 300;
  margin: 0;
  flex: 1;
}

.taid-feat-link {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan-lt);
  text-decoration: none;
  align-self: flex-start;
  margin-top: auto;
  padding-top: .5rem;
  transition: color .2s ease;
}
.taid-feat-link:hover { color: var(--violet-lt); }

/* ─── Featured grid (module position wrapper) ────────────────── */
.taid-featured-grid {
  display: grid;
  gap: 1px;
  background: var(--border);
}

/* ─── Two-column layout ──────────────────────────────────────── */
.taid-two-col {
  display: grid;
  gap: 1px;
  background: var(--border);
}
.taid-two-col--1 { grid-template-columns: 1fr; }
.taid-two-col--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.taid-col-panel {
  background: var(--bg);
  padding: 2.5rem;
}

/* ─── Main content layout ────────────────────────────────────── */
.taid-main {
  border-bottom: 1px solid var(--border);
  padding: 4.5rem 0;
}

.taid-content-wrap { display: block; }

.taid-content-wrap--sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 25vw, 320px);
  gap: 2rem;
  align-items: start;
}
/* Left sidebar only — grid: sidebar-left | content */
.taid-content-wrap--sidebar-left {
  grid-template-columns: clamp(240px, 25vw, 320px) minmax(0, 1fr);
}
.taid-content-wrap--sidebar-left .taid-sidebar--left { order: -1; }
/* Both sidebars present: left | content | right */
.taid-content-wrap--sidebar-left.taid-content-wrap--sidebar:has(.taid-sidebar:not(.taid-sidebar--left)) {
  grid-template-columns: clamp(220px, 20vw, 260px) minmax(0, 1fr) clamp(220px, 20vw, 260px);
}
/* Stack sidebar below content on tablet and smaller */
@media (max-width: 1024px) {
  .taid-content-wrap--sidebar,
  .taid-content-wrap--sidebar-left,
  .taid-content-wrap--sidebar-left.taid-content-wrap--sidebar {
    grid-template-columns: 1fr;
  }
}

.taid-content-primary { display: grid; gap: 1.5rem; }

.taid-sidebar {
  display: grid;
  gap: 1.5rem;
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}

/* Position group: layout-transparent wrapper for Position Manager hide classes.
   display:contents makes it invisible to grid/flex layout so parent gap works.
   taid-hide-* rules override with display:none when a device is hidden. */
.taid-pos-group { display: contents; }

/* ─── Component panel (articles/blog/component output) ───────── */
.taid-component-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 2.5rem;
  overflow-x: hidden;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  transition: none;
}
.taid-component-panel table,
.taid-component-panel pre {
  overflow-x: auto;
  display: block;
  max-width: 100%;
}
.taid-component-panel:hover {
  border-color: var(--border);
  box-shadow: none;
}

.taid-component-panel,
.taid-component-panel p,
.taid-component-panel li {
  color: var(--text-soft);
  line-height: 1.78;
}

.taid-component-panel p { margin-top: 0; margin-bottom: 1.2em; }

.taid-component-panel ul,
.taid-component-panel ol {
  padding-left: 1.6em;
  margin-bottom: 1.2em;
}
.taid-component-panel ul { list-style: disc; }
.taid-component-panel ol { list-style: decimal; }
.taid-component-panel li { margin-bottom: .4em; }
.taid-component-panel li::marker { color: var(--violet-lt); }

/* ─── Table of contents ─────────────────────────────────────── */
.toc li a {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}
.toc li a:hover {
  color: var(--text);
}

/* ─── Article/blog typography ────────────────────────────────── */
.taid-component-panel h1,
.taid-component-panel h2,
.taid-component-panel h3,
.taid-component-panel h4,
.taid-component-panel h5,
.taid-component-panel h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-bottom: .75em;
  margin-top: 1.8em;
}
.taid-component-panel h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
.taid-component-panel h2 { font-size: clamp(1.4rem, 2.8vw, 2.2rem); }
.taid-component-panel h3 { font-size: clamp(1.15rem, 2vw, 1.6rem); }
.taid-component-panel h4 { font-size: 1.1rem; }
.taid-component-panel h5 { font-size: 1rem; }
.taid-component-panel h6 { font-size: .92rem; }

/* Article body links */
.taid-component-panel a {
  color: var(--violet-lt);
  text-decoration: none;
  transition: color .2s ease;
}
.taid-component-panel a:hover { color: var(--cyan-lt); }
/* Buttons are not links — strip the underline and inherit their own color */
.taid-component-panel a.btn { text-decoration: none; color: inherit; }
.taid-component-panel a.btn:hover { color: inherit; }
.taid-component-panel a.taid-btn { text-decoration: none !important; color: inherit; }
.taid-component-panel a.taid-btn:hover { text-decoration: none !important; }

/* Heading links + table links — no underline */
.taid-component-panel h1 a,
.taid-component-panel h2 a,
.taid-component-panel h3 a,
.taid-component-panel h4 a,
.taid-component-panel table a {
  color: var(--text-soft);
  text-decoration: none;
}
.taid-component-panel h1 a:hover,
.taid-component-panel h2 a:hover,
.taid-component-panel h3 a:hover,
.taid-component-panel h4 a:hover,
.taid-component-panel table a:hover { color: var(--violet-lt); }

/* Article lead paragraph — first <p> in article body */
.com-content-article__body > p:first-child {
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--text-soft);
}

/* Figures & image captions */
.taid-component-panel figure {
  margin: 1.5rem 0;
}
.taid-component-panel figure img {
  display: block;
  max-width: 100%;
  height: auto;
}
.taid-component-panel figcaption {
  font-size: .78rem;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: .02em;
  margin-top: .5rem;
  padding-top: .4rem;
  border-top: 1px solid var(--border);
}

/* Tables — responsive wrapper */
.taid-component-panel .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.taid-component-panel table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
}
.taid-component-panel table th,
.taid-component-panel table td {
  padding: .6rem .85rem;
  border: 1px solid var(--border);
  text-align: left;
}
@media (max-width: 640px) {
  .taid-component-panel table,
  .taid-component-panel table thead,
  .taid-component-panel table tbody,
  .taid-component-panel table tr,
  .taid-component-panel table th,
  .taid-component-panel table td { display: block; width: 100%; }
  .taid-component-panel table thead { display: none; }
  .taid-component-panel table td { padding: .4rem .85rem; border: 0; border-bottom: 1px solid var(--border); }
  .taid-component-panel table td::before { content: attr(data-label); font-weight: 600; display: block; font-size: .8rem; color: var(--text-soft); margin-bottom: .2rem; }
  .taid-component-panel table tr { border: 1px solid var(--border); margin-bottom: .5rem; border-radius: 6px; overflow: hidden; }
}
.taid-component-panel table th {
  background: var(--bg3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .85rem;
  color: var(--text);
}
.taid-component-panel table td { font-size: .9rem; }
.taid-component-panel table tbody tr:nth-child(even) { background: var(--bg2); }

/* Blockquote / pull quote */
.taid-component-panel blockquote {
  border-left: 3px solid var(--violet);
  background: var(--panel2);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.taid-component-panel blockquote p {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
  font-style: italic;
}

/* Code blocks */
.taid-component-panel pre,
.taid-component-panel code {
  font-family: var(--font-mono);
  font-size: .85rem;
}
.taid-component-panel code {
  background: var(--panel2);
  color: var(--emerald);
  padding: .15em .4em;
  border-radius: 3px;
}
.taid-component-panel pre {
  background: #0d1117;
  border: 1px solid var(--border);
  border-left: 3px solid var(--emerald);
  color: var(--emerald);
  padding: 1.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 100%;
}
.taid-component-panel pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* Copy button on code blocks */
.taid-copy-btn {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: rgba(124, 58, 237, .15);
  color: var(--violet-lt);
  border: 1px solid rgba(124, 58, 237, .25);
  border-radius: 4px;
  padding: .2rem .6rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background .2s, color .2s;
  z-index: 1;
}
.taid-copy-btn:hover {
  background: rgba(124, 58, 237, .3);
  color: #fff;
}
.taid-screenshot {
  margin: 1.5rem 0;
}
.taid-screenshot img {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: box-shadow .2s ease;
}
.taid-screenshot img:hover {
  box-shadow: 0 4px 20px rgba(124,58,237,.25), 0 2px 12px rgba(0,0,0,.4);
}
.taid-screenshot-toggle {
  margin: 1.25rem 0;
}
.taid-screenshot-toggle summary {
  cursor: pointer;
  color: var(--violet-lt);
  font-family: var(--font-mono);
  font-size: .85rem;
  letter-spacing: .02em;
  padding: .4rem 0;
  list-style: none;
}
.taid-screenshot-toggle summary::before {
  content: '\25B6';
  display: inline-block;
  margin-right: .5rem;
  font-size: .7rem;
  transition: transform .2s ease;
}
.taid-screenshot-toggle[open] summary::before {
  transform: rotate(90deg);
}
.taid-screenshot-toggle summary:hover {
  color: #fff;
}

/* Article rows (Joomla blog view) */
.taid-component-panel .blog-featured,
.taid-component-panel .blog-item,
.taid-component-panel .com-content-category-blog,
.taid-component-panel .com-content-article {
  background: transparent;
  color: inherit;
}

body:not(.view-article) .taid-component-panel article.com-content-article {
  border-bottom: 1px solid var(--border);
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  transition: padding-left .25s var(--ease), border-color .25s ease;
}
body:not(.view-article) .taid-component-panel article.com-content-article:hover {
  padding-left: .6rem;
  border-bottom-color: rgba(124, 58, 237, .3);
}
body:not(.view-article) .taid-component-panel article.com-content-article:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

/* Joomla page title / article title */
.taid-component-panel .page-header h1,
.taid-component-panel .item-title a {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  transition: color .2s ease;
}
.taid-component-panel .item-title a:hover { color: var(--violet-lt); }

/* Article metadata — show only category + date, hide noise */
.taid-component-panel dl.article-info {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  align-items: center;
  margin-bottom: .75rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
}
/* Hide the "Details" label, author byline, and hit counter */
.taid-component-panel .article-info-term,
.taid-component-panel .article-info .createdby,
.taid-component-panel .article-info .hits { display: none !important; }

/* Keep category and published date — muted mono style */
.taid-component-panel .article-info .category-name,
.taid-component-panel .article-info .published {
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .3rem;
}
/* Hide verbose Joomla icon spans (icomoon font not loaded) */
.taid-component-panel .article-info .icon-folder-open,
.taid-component-panel .article-info .icon-calendar,
.taid-component-panel .article-info .icon-user,
.taid-component-panel .article-info .icon-eye { display: none; }

.taid-component-panel .article-info a {
  color: var(--cyan-lt) !important;
  text-decoration: none;
}
.taid-component-panel .article-info a:hover { color: var(--violet-lt) !important; }

/* Tag pills — Joomla outputs .btn.btn-sm.btn-info (Bootstrap teal); override with violet */
.taid-component-panel .tags a,
.taid-component-panel .tags a.btn,
.taid-component-panel .tags a.btn-info,
.taid-component-panel .tags a.btn-sm {
  font-family: var(--font-mono) !important;
  font-size: .6rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: .18em .55em !important;
  border-radius: 2px !important;
  background: rgba(124,58,237,.12) !important;
  color: var(--violet-lt) !important;
  border: 1px solid rgba(124,58,237,.28) !important;
  text-decoration: none !important;
  transition: background .2s ease !important;
}
.taid-component-panel .tags a:hover,
.taid-component-panel .tags a.btn:hover {
  background: rgba(124,58,237,.24) !important;
  color: #fff !important;
}
.taid-component-panel .tags.list-inline {
  margin: .5rem 0 .75rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.taid-component-panel .tags .list-inline-item {
  display: inline-flex !important;
  margin: 0;
}

/* Read more — hidden; article title is already a link */
.taid-component-panel .readmore { display: none !important; }

/* Blog "More articles" link list */
.taid-component-panel .items-more {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.taid-component-panel .com-content-blog__links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.taid-component-panel .com-content-blog__link {
  border-bottom: 1px solid var(--border);
  padding: 1.4rem 0;
  transition: padding-left .2s var(--ease);
}
.taid-component-panel .com-content-blog__link:first-child { padding-top: 0; }
.taid-component-panel .com-content-blog__link:last-child { border-bottom: 0; padding-bottom: 0; }
.taid-component-panel .com-content-blog__link:hover { padding-left: .5rem; }
.taid-component-panel .com-content-blog__link a {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--text) !important;
  text-decoration: none !important;
  transition: color .2s ease;
}
.taid-component-panel .com-content-blog__link a:hover { color: var(--violet-lt) !important; }
.taid-component-panel .com-content-blog__link a::after {
  content: ' →';
  opacity: 0;
  transition: opacity .2s ease;
  color: var(--cyan-lt);
}
.taid-component-panel .com-content-blog__link a:hover::after { opacity: 1; }

/* ── Category intro (description block above blog items) ────── */
.taid-cat-intro {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.taid-cat-intro-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 1rem;
}
.taid-cat-intro-text {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--text-soft);
  margin-bottom: .75rem;
}
.taid-cat-intro-text:last-child { margin-bottom: 0; }

/* Blog items — separator between each article */
.taid-component-panel .blog-items .blog-item + .blog-item {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  margin-top: 2rem;
}

/* Icomoon icon spans used by Joomla in content — hide empty glyphs globally */
.icon-chevron-right,
.icon-chevron-left { display: none; }
.icon-chevron-right::before { content: '›'; display: inline; }
.icon-chevron-left::before  { content: '‹'; display: inline; }

/* Article prev/next navigation (Joomla outputs .btn-secondary) */
.taid-component-panel .btn.btn-secondary,
.taid-component-panel a.btn-secondary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border-md);
  color: var(--text-soft);
  padding: .55rem 1.2rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.taid-component-panel .btn.btn-secondary:hover,
.taid-component-panel a.btn-secondary:hover {
  border-color: var(--violet);
  color: var(--violet-lt);
  background: var(--violet-dim);
  box-shadow: 0 0 0 3px rgba(124,58,237,.20), 0 4px 14px rgba(0,0,0,.35);
}

/* ─── Custom Fields (com_fields) ─────────────────────────────── */
/* Fields container — author bio, metadata blocks */
.taid-component-panel ul.fields-container {
  list-style: none;
  padding: 0;
  margin: 2rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.taid-component-panel .field-entry {
  background: var(--bg3);
  border-left: 3px solid var(--violet);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
}
.taid-component-panel .field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--violet-lt);
  margin-bottom: .4rem;
  opacity: .8;
}
.taid-component-panel .field-value {
  display: block;
  color: var(--text-soft);
  font-size: .92rem;
  line-height: 1.65;
}
/* Field group title (when rendered) */
.taid-component-panel .fields-group-title,
.taid-component-panel .field-group-name {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin: 2rem 0 .5rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}

/* Buttons inside content (forms, submit buttons — NOT read-more, handled above) */
.taid-component-panel .btn-primary,
.taid-component-panel button[type="submit"] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--violet);
  border: none;
  color: #fff;
  padding: .65rem 1.4rem;
  border-radius: var(--radius);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.taid-component-panel .btn-primary:hover,
.taid-component-panel button[type="submit"]:hover {
  background: var(--violet-dark);
  box-shadow: 0 0 14px rgba(124,58,237,.4);
  transform: translateY(-1px);
}

/* ─── Module article list (mod_articles in top-a / top-b) ───── */
.taid-col-panel .moduletable { border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; }

.taid-col-panel .mod-articles-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.taid-col-panel .mod-articles-items li {
  border-bottom: 1px solid var(--border);
  padding: 1.4rem 0;
  transition: padding-left .2s var(--ease);
}
.taid-col-panel .mod-articles-items li:first-child { padding-top: 0; }
.taid-col-panel .mod-articles-items li:last-child { border-bottom: 0; padding-bottom: 0; }
.taid-col-panel .mod-articles-items li:hover { padding-left: .5rem; }

/* Category label — above the title */
.taid-col-panel .mod-articles-items .mod-articles-category {
  margin: 0 0 .4rem;
}
.taid-col-panel .mod-articles-items .mod-articles-category,
.taid-col-panel .mod-articles-items .mod-articles-category a {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan) !important;
  text-decoration: none !important;
  display: inline;
}
.taid-col-panel .mod-articles-items .mod-articles-category .icon-folder-open { display: none; }
.taid-col-panel .mod-articles-items .article-info-term { display: none; }

/* Article title */
.taid-col-panel .mod-articles-items .mod-articles-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.28;
  letter-spacing: -.015em;
  margin: 0 0 .5rem;
}
.taid-col-panel .mod-articles-items .mod-articles-link {
  color: var(--text) !important;
  text-decoration: none !important;
  transition: color .2s ease;
}
.taid-col-panel .mod-articles-items .mod-articles-link:hover { color: var(--violet-lt) !important; }

/* Intro text */
.taid-col-panel .mod-articles-items p:not(.readmore) {
  font-size: .85rem;
  color: var(--text-soft);
  line-height: 1.65;
  margin: 0 0 .6rem;
  font-weight: 300;
}

/* Read more — hidden; title is already the link. Arrow appears on hover. */
.taid-col-panel .mod-articles-items .readmore { display: none; }

/* Subtle arrow on title hover */
.taid-col-panel .mod-articles-items .mod-articles-link::after {
  content: ' →';
  opacity: 0;
  transition: opacity .2s ease, color .2s ease;
  color: var(--cyan-lt);
}
.taid-col-panel .mod-articles-items .mod-articles-link:hover::after { opacity: 1; }

/* ── Core module heading (general context) ── */
.taid-col-panel .moduletable > h3 {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0 0 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}

/* ── Core module list styles (shared by link-list modules) ── */
.moduletable.col-md-4 { max-width: 100%; flex: 1 1 100%; }

.moduletable ul.mod-tagssimilar,
.moduletable ul.latestlist,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mostread,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-userslatest {
  list-style: none;
  padding: 0;
  margin: 0;
}
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-tagssimilar li,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.latestlist li,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mostread li,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-userslatest li {
  border-bottom: 1px solid var(--border);
  padding: 1.4rem 0;
  transition: padding-left .2s var(--ease);
}
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-tagssimilar li:first-child,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.latestlist li:first-child,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mostread li:first-child,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-userslatest li:first-child { padding-top: 0; }
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-tagssimilar li:last-child,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.latestlist li:last-child,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mostread li:last-child,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-userslatest li:last-child { border-bottom: 0; padding-bottom: 0; }
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-tagssimilar li:hover,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.latestlist li:hover,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mostread li:hover,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-userslatest li:hover { padding-left: .5rem; }

.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-tagssimilar a,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.latestlist a,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mostread a,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-userslatest a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--text) !important;
  text-decoration: none !important;
  transition: color .2s ease;
}
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-tagssimilar a:hover,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.latestlist a:hover,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mostread a:hover,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-userslatest a:hover { color: var(--violet-lt) !important; }
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-tagssimilar a::after,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.latestlist a::after,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mostread a::after,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-userslatest a::after {
  content: ' →';
  opacity: 0;
  transition: opacity .2s ease;
  color: var(--cyan-lt);
}
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-tagssimilar a:hover::after,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.latestlist a:hover::after,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mostread a:hover::after,
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mod-userslatest a:hover::after { opacity: 1; }

/* ── Newsflash (mod_articles_news) ── */
.moduletable .mod-articlesnews .mod-articlesnews__item {
  border-bottom: 1px solid var(--border);
  padding: 1.2rem 0;
}
.moduletable .mod-articlesnews .mod-articlesnews__item:first-child { padding-top: 0; }
.moduletable .mod-articlesnews .mod-articlesnews__item:last-child { border-bottom: 0; padding-bottom: 0; }
.moduletable .mod-articlesnews h4,
.moduletable .mod-articlesnews h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0 0 .4rem;
}
.moduletable .mod-articlesnews h4 a,
.moduletable .mod-articlesnews h5 a {
  color: var(--text) !important;
  text-decoration: none !important;
  transition: color .2s ease;
}
.moduletable .mod-articlesnews h4 a:hover,
.moduletable .mod-articlesnews h5 a:hover { color: var(--violet-lt) !important; }
.moduletable .mod-articlesnews p {
  font-size: .85rem;
  color: var(--text-soft);
  line-height: 1.65;
  margin: 0 0 .5rem;
}
.moduletable .mod-articlesnews .readmore a {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan) !important;
  text-decoration: none !important;
}
.moduletable .mod-articlesnews .readmore a:hover { color: var(--cyan-lt) !important; }

/* ── Categories tree (mod_articles_categories) ── */
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlescategories {
  list-style: none;
  padding: 0;
  margin: 0;
}
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlescategories li {
  border-bottom: 1px solid var(--border);
  padding: .6rem 0;
}
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlescategories li:first-child { padding-top: 0; }
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlescategories li:last-child { border-bottom: 0; }
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlescategories a {
  color: var(--text) !important;
  text-decoration: none !important;
  font-size: .85rem;
  font-weight: 400;
  transition: color .2s ease;
}
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlescategories a:hover { color: var(--violet-lt) !important; }
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlescategories ul {
  list-style: none;
  padding-left: 1.2rem;
  margin: .3rem 0 0;
}
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlescategories ul li { border-bottom: 0; padding: .3rem 0; }
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlescategories ul a { font-size: .88rem; color: var(--text-soft) !important; }
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlescategories ul a:hover { color: var(--violet-lt) !important; }

/* ── Random Image (mod_random_image) ── */
.moduletable .mod-randomimage img,
.moduletable .random-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius, 6px);
  border: 1px solid var(--border);
}

/* ── Related Items (mod_related_items) ── */
.moduletable .mod-relateditems { list-style: none; padding: 0; margin: 0; }
.moduletable .mod-relateditems li {
  border-bottom: 1px solid var(--border);
  padding: 1.4rem 0;
  transition: padding-left .2s var(--ease);
}
.moduletable .mod-relateditems li:first-child { padding-top: 0; }
.moduletable .mod-relateditems li:last-child { border-bottom: 0; padding-bottom: 0; }
.moduletable .mod-relateditems li:hover { padding-left: .5rem; }
.moduletable .mod-relateditems a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--text) !important;
  text-decoration: none !important;
  transition: color .2s ease;
}
.moduletable .mod-relateditems a:hover { color: var(--violet-lt) !important; }
.moduletable .mod-relateditems a::after {
  content: ' →';
  opacity: 0;
  transition: opacity .2s ease;
  color: var(--cyan-lt);
}
.moduletable .mod-relateditems a:hover::after { opacity: 1; }

/* article-info dl (metadata wrapper) */
.taid-col-panel .mod-articles-items dl.list-unstyled { margin: 0; }

/* Block-linked list items (articles + all module lists) */
.taid-block-links .taid-col-panel .mod-articles-items li,
.taid-block-links .taid-col-panel .mod-tagssimilar li,
.taid-block-links .taid-col-panel .latestlist li,
.taid-block-links .taid-col-panel .mostread li,
.taid-block-links .taid-col-panel .mod-relateditems li {
  cursor: pointer;
  transition: padding-left .2s, background .2s;
}
.taid-block-links .taid-col-panel .mod-articles-items li:hover,
.taid-block-links .taid-col-panel .mod-tagssimilar li:hover,
.taid-block-links .taid-col-panel .latestlist li:hover,
.taid-block-links .taid-col-panel .mostread li:hover,
.taid-block-links .taid-col-panel .mod-relateditems li:hover {
  background: rgba(255,255,255,.02);
}
.taid-block-links .taid-sidebar .mod-articles-items li {
  cursor: pointer;
}
.taid-block-links .taid-sidebar .mod-articles-items li:hover {
  background: rgba(255,255,255,.02);
}

/* ─── Panels / cards ─────────────────────────────────────────── */
.taid-panel,
.moduletable {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 1.75rem;
  border-radius: var(--radius);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.taid-panel:hover,
.moduletable:hover {
  border-color: var(--border-md);
  box-shadow: 0 0 24px rgba(124,58,237,.08);
}
.taid-content-bottom .moduletable,
.taid-content-bottom .moduletable:hover {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* ── Disclaimer module ── */
.taid-disclaimer {
  margin-top: 2.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}
.taid-disclaimer p {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .02em;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
  padding: .75rem 1.5rem;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.card:hover {
  border-color: rgba(124,58,237,.35);
  box-shadow: 0 0 20px rgba(124,58,237,.10);
}

/* Sidebar modules */
.taid-sidebar .moduletable,
.taid-sidebar .taid-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 1.5rem;
}

/* ─── Category pills (custom styling) ───────────────────────── */
.taid-cat-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .22em .7em;
  border-radius: 2px;
  font-weight: 400;
}
.taid-cat-pill--violet  { background: var(--violet-dim); color: var(--violet-lt); border: 1px solid rgba(124,58,237,.25); }
.taid-cat-pill--cyan    { background: var(--cyan-dim);   color: var(--cyan-lt);   border: 1px solid rgba(6,182,212,.25); }
.taid-cat-pill--amber   { background: var(--amber-dim);  color: var(--amber);     border: 1px solid rgba(245,158,11,.25); }
.taid-cat-pill--emerald { background: var(--emerald-dim);color: var(--emerald);   border: 1px solid rgba(16,185,129,.25); }
.taid-cat-pill--rose    { background: var(--rose-dim);   color: var(--rose);      border: 1px solid rgba(244,63,94,.25); }

/* ─── Ad slots ───────────────────────────────────────────────── */
.taid-ad-strip {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.taid-ad-slot {
  border: 1px dashed rgba(124,58,237,.25);
  background: rgba(124,58,237,.04);
  text-align: center;
}
.taid-ad-slot .moduletable,
.taid-ad-slot .module { border: 0; padding: 0; background: transparent; }
.taid-ad-slot--banner { min-height: 90px; }
.taid-ad-slot--sidebar { min-height: 250px; }
.taid-ad-slot--article { min-height: 110px; margin-top: 1.5rem; }
/* Ad row — 3-up grid for smaller banners */
.taid-ad-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.taid-ad-row > * { min-height: 0; }
.taid-ad-strip--row { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.taid-ad-row--article { margin-top: 1rem; }
.taid-ad-strip--footer { padding: 1.5rem 0; border-top: 1px solid var(--border); }
@media (max-width: 640px) {
  .taid-ad-row { grid-template-columns: 1fr; gap: .75rem; }
}

/* ─── Menu Style Demos ───────────────────────────────────── */
/* Kill duplicate ::before label on UL (keep it on the wrapper div only) */
ul.mod-menu[class*="taid-menu-"]::before { display: none !important; }

/* Shared wrapper: standalone card container with label */
.taid-menu-grouped,
.taid-menu-pills,
.taid-menu-underline,
.taid-menu-tags,
.taid-menu-cards,
.taid-menu-bordered,
.taid-menu-sidebar,
.taid-menu-dots,
.taid-menu-grid {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg3);
}

/* Label header (::before) — shown in standalone context, hidden in sidebar and grid */
.taid-sidebar [class*="taid-menu-"]::before { display: none !important; }
.taid-menu-grouped::before,
.taid-menu-pills::before,
.taid-menu-underline::before,
.taid-menu-tags::before,
.taid-menu-cards::before,
.taid-menu-bordered::before,
.taid-menu-sidebar::before,
.taid-menu-dots::before,
.taid-menu-grid::before {
  display: block;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}

/* ── 1. Pill Nav (horizontal) ── */
/* Frosted glass capsules with gradient hover glow */
.taid-menu-pills::before { content: "Horizontal  ·  taid-menu-pills"; }
.taid-menu-pills ul {
  display: flex; flex-wrap: wrap; gap: .55rem;
  list-style: none; padding: 0; margin: 0;
}
.taid-menu-pills li a {
  display: inline-block;
  padding: .5rem 1.2rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-soft);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  text-decoration: none;
  transition: all .2s ease;
  backdrop-filter: blur(4px);
}
.taid-menu-pills li a:hover {
  background: rgba(124,58,237,.12);
  border-color: rgba(124,58,237,.4);
  color: var(--violet-lt);
  box-shadow: 0 0 16px rgba(124,58,237,.15);
  transform: translateY(-1px);
}
.taid-menu-pills li.active a,
.taid-menu-pills li.current a {
  background: linear-gradient(135deg, var(--violet), #9333ea);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(124,58,237,.35);
  font-weight: 600;
}

/* ── 2. Underline Nav (horizontal) ── */
/* Dark bar with animated underline indicators */
.taid-menu-underline::before { content: "Horizontal  ·  taid-menu-underline"; }
.taid-menu-underline ul {
  display: flex; flex-wrap: wrap; gap: 0;
  list-style: none; padding: 0; margin: 0;
  background: var(--bg2);
  border-radius: 6px;
  overflow: hidden;
}
.taid-menu-underline li a {
  display: inline-block;
  padding: .7rem 1.15rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all .2s ease;
  position: relative;
}
.taid-menu-underline li a:hover {
  color: var(--text);
  background: rgba(255,255,255,.03);
  border-bottom-color: rgba(124,58,237,.5);
}
.taid-menu-underline li.active a,
.taid-menu-underline li.current a {
  color: var(--violet-lt);
  border-bottom-color: var(--violet);
  background: rgba(124,58,237,.06);
  font-weight: 600;
  box-shadow: inset 0 -1px 6px rgba(124,58,237,.1);
}

/* ── 3. Tag Bar (horizontal) ── */
/* Terminal-style mono tags with # prefix and cyan glow */
.taid-menu-tags::before { content: "Horizontal  ·  taid-menu-tags"; }
.taid-menu-tags ul {
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; padding: 0; margin: 0;
}
.taid-menu-tags li a {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .4rem .75rem;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  transition: all .2s ease;
}
.taid-menu-tags li a::before {
  content: "#";
  color: rgba(6,182,212,.4);
  font-weight: 700;
}
.taid-menu-tags li a:hover {
  background: rgba(6,182,212,.06);
  border-color: rgba(6,182,212,.35);
  color: var(--cyan-lt);
  box-shadow: 0 0 10px rgba(6,182,212,.1);
}
.taid-menu-tags li a:hover::before { color: var(--cyan); }
.taid-menu-tags li.active a,
.taid-menu-tags li.current a {
  background: rgba(6,182,212,.12);
  border-color: var(--cyan);
  color: var(--cyan-lt);
  box-shadow: 0 0 12px rgba(6,182,212,.15);
}
.taid-menu-tags li.active a::before,
.taid-menu-tags li.current a::before { color: var(--cyan); }

/* ── 4. Card Stack (vertical) ── */
/* Elevated floating cards with gradient accent and lift on hover */
.taid-menu-cards::before { content: "Vertical  ·  taid-menu-cards"; }
.taid-menu-cards ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .5rem;
}
.taid-menu-cards li a {
  display: block;
  padding: .75rem 1rem;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-soft);
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid transparent;
  border-radius: 6px;
  text-decoration: none;
  transition: all .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.taid-menu-cards li a:hover {
  background: rgba(124,58,237,.05);
  border-color: rgba(124,58,237,.15);
  border-left-color: rgba(124,58,237,.5);
  color: var(--text);
  transform: translateY(-1px) translateX(2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3), 0 0 0 1px rgba(124,58,237,.1);
}
.taid-menu-cards li.active a,
.taid-menu-cards li.current a {
  background: rgba(124,58,237,.08);
  border-color: rgba(124,58,237,.2);
  border-left-color: var(--violet);
  color: var(--violet-lt);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 12px rgba(124,58,237,.08);
}

/* ── 5. Bordered List (vertical) ── */
/* Clean bordered container with animated dot bullets */
.taid-menu-bordered::before { content: "Vertical  ·  taid-menu-bordered"; }
.taid-menu-bordered ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
  border-radius: 6px;
  overflow: hidden;
}
.taid-menu-bordered li a {
  display: flex;
  align-items: center;
  padding: .7rem 1.1rem;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: all .2s ease;
}
.taid-menu-bordered li:last-child a { border-bottom: none; }
.taid-menu-bordered li a::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--muted2);
  margin-right: .75rem;
  flex-shrink: 0;
  transition: all .25s ease;
}
.taid-menu-bordered li a:hover {
  background: rgba(124,58,237,.04);
  color: var(--text);
  padding-left: 1.25rem;
}
.taid-menu-bordered li a:hover::before {
  background: var(--violet);
  box-shadow: 0 0 6px rgba(124,58,237,.4);
}
.taid-menu-bordered li.active a,
.taid-menu-bordered li.current a {
  background: rgba(124,58,237,.07);
  color: var(--violet-lt);
  font-weight: 600;
}
.taid-menu-bordered li.active a::before,
.taid-menu-bordered li.current a::before {
  background: var(--violet);
  width: 7px; height: 7px;
  box-shadow: 0 0 8px rgba(124,58,237,.5);
}

/* ── 6. Sidebar Nav (vertical) ── */
/* Rail navigator with glowing pip indicator */
.taid-menu-sidebar::before { content: "Vertical  ·  taid-menu-sidebar"; }
.taid-menu-sidebar ul {
  list-style: none; padding: .25rem 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
  border-left: 2px solid var(--border);
  margin-left: .5rem;
  position: relative;
}
.taid-menu-sidebar li a {
  display: block;
  padding: .6rem 1rem;
  margin-left: -2px;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 400;
  color: var(--text-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all .2s ease;
}
.taid-menu-sidebar li a:hover {
  color: var(--text);
  border-left-color: rgba(124,58,237,.5);
  background: linear-gradient(90deg, rgba(124,58,237,.04), transparent);
}
.taid-menu-sidebar li.active a,
.taid-menu-sidebar li.current a {
  color: var(--violet-lt);
  border-left-color: var(--violet);
  background: linear-gradient(90deg, rgba(124,58,237,.08), transparent);
  font-weight: 600;
  box-shadow: -4px 0 12px rgba(124,58,237,.12);
}

/* ── 7. Dot Nav (vertical) ── */
/* Connected timeline with glowing, pulsing dots */
.taid-menu-dots::before { content: "Vertical  ·  taid-menu-dots"; }
.taid-menu-dots ul {
  list-style: none; padding: .25rem 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
  padding-left: 1.4rem;
  position: relative;
}
/* Vertical connecting line */
.taid-menu-dots ul::after {
  content: "";
  position: absolute;
  left: .45rem;
  top: .7rem;
  bottom: .7rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-md) 10%, var(--border-md) 90%, transparent);
}
.taid-menu-dots li {
  position: relative;
}
.taid-menu-dots li a {
  display: block;
  padding: .5rem 0 .5rem .65rem;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 400;
  color: var(--text-soft);
  text-decoration: none;
  transition: all .2s ease;
}
.taid-menu-dots li a::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: 50%;
  transform: translate(0, -50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1.5px solid var(--border-md);
  z-index: 1;
  transition: all .25s ease;
}
.taid-menu-dots li a:hover { color: var(--text); }
.taid-menu-dots li a:hover::before {
  border-color: var(--violet);
  background: rgba(124,58,237,.3);
  box-shadow: 0 0 8px rgba(124,58,237,.3);
}
.taid-menu-dots li.active a,
.taid-menu-dots li.current a {
  color: var(--violet-lt);
  font-weight: 600;
}
.taid-menu-dots li.active a::before,
.taid-menu-dots li.current a::before {
  background: var(--violet);
  border-color: var(--violet);
  width: 9px; height: 9px;
  box-shadow: 0 0 10px rgba(124,58,237,.5), 0 0 20px rgba(124,58,237,.2);
}

/* ── 8. Card Grid (vertical 2-column) ── */
/* Compact card buttons in a responsive grid layout */
.taid-menu-grid::before { content: "Grid Layout  ·  taid-menu-grid"; }
.taid-menu-grid ul {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}
.taid-menu-grid li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .65rem .6rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-soft);
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  transition: all .2s ease;
}
.taid-menu-grid li a:hover {
  background: rgba(124,58,237,.08);
  border-color: rgba(124,58,237,.3);
  color: var(--violet-lt);
  box-shadow: 0 0 12px rgba(124,58,237,.1);
}
.taid-menu-grid li.active a,
.taid-menu-grid li.current a {
  background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(124,58,237,.08));
  border-color: rgba(124,58,237,.4);
  color: var(--violet-lt);
  font-weight: 600;
  box-shadow: 0 0 14px rgba(124,58,237,.12);
}

/* ── 9. Grouped Nav (vertical) ── */
/* The flagship sidebar menu — section headings, indented links, left-border active */
/* Variants: taid-menu-grouped (default), taid-menu-grouped-l (scrollbar left), taid-menu-grouped-r (scrollbar right) */
.taid-menu-grouped::before   { content: "Vertical  ·  taid-menu-grouped"; }
.taid-menu-grouped-l::before { content: "Vertical  ·  taid-menu-grouped-l"; }
.taid-menu-grouped-r::before { content: "Vertical  ·  taid-menu-grouped-r"; }
[class*="taid-menu-grouped"] ul {
  list-style: none; padding: .4rem 0 .6rem; margin: 0;
  display: flex; flex-direction: column; gap: 0;
}
[class*="taid-menu-grouped"] .nav-item { display: block; width: 100%; }
/* Section headings */
[class*="taid-menu-grouped"] .mod-menu__heading.nav-header {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--violet-lt);
  padding: .65rem .85rem .2rem;
  margin-top: .35rem;
  pointer-events: none;
  opacity: .85;
}
[class*="taid-menu-grouped"] .mod-menu__heading.nav-header::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--violet);
  border-radius: 50%;
  flex-shrink: 0;
}
[class*="taid-menu-grouped"] .nav-item:first-child .mod-menu__heading.nav-header {
  margin-top: 0;
  padding-top: .35rem;
}
/* Links */
[class*="taid-menu-grouped"] .nav-item > a {
  display: block;
  padding: .38rem .85rem .38rem 1.4rem;
  font-family: var(--font-display);
  font-size: .85rem;
  color: var(--text-soft);
  text-decoration: none;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
[class*="taid-menu-grouped"] .nav-item > a:hover {
  color: var(--text);
  background: rgba(255,255,255,.04);
  border-left-color: rgba(124,58,237,.4);
}
[class*="taid-menu-grouped"] .nav-item.current > a,
[class*="taid-menu-grouped"] .nav-item.active > a {
  color: var(--violet-lt);
  background: rgba(124,58,237,.12);
  border-left-color: var(--violet);
  font-weight: 500;
}
/* Separators */
[class*="taid-menu-grouped"] .nav-item.divider {
  border-top: 1px solid var(--border);
  margin: .4rem .7rem;
}
[class*="taid-menu-grouped"] .nav-item.divider .mod-menu__separator { display: none; }

/* ── Grouped Nav — left scrollbar variant ── */
/* direction:rtl on the scrollable list moves the native scrollbar to the left edge */
.taid-menu-grouped-l { direction: rtl; }
.taid-menu-grouped-l > * { direction: ltr; }

/* ─── Categories list view (com_content view=categories) ─────── */
.com-content-categories__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.com-content-categories__item {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  transition: border-color .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.com-content-categories__item:hover {
  border-color: rgba(124,58,237,.45);
  box-shadow: 0 0 18px rgba(124,58,237,.15);
}
.com-content-categories__item-title-wrapper {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.com-content-categories__item-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  flex: 1;
}
.com-content-categories__item-title a {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: color .15s;
  flex: 1;
}
.com-content-categories__item-title a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.com-content-categories__item-title a:hover { color: var(--violet-lt); }
.com-content-categories__item-title .badge {
  background: rgba(124,58,237,.12) !important;
  color: var(--violet-lt) !important;
  border: 1px solid rgba(124,58,237,.25);
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .04em;
  padding: .25em .6em;
  border-radius: 3px;
  white-space: nowrap;
}
/* Category description */
.com-content-categories__item .category-desc {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin-top: .75rem;
}
.com-content-categories__item .category-desc p {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0 0 .5rem;
}
.com-content-categories__item .category-desc p:last-child { margin-bottom: 0; }
/* Expand/collapse button */
.com-content-categories__item-title-wrapper button {
  background: rgba(124,58,237,.12);
  border: 1px solid rgba(124,58,237,.25);
  color: var(--violet-lt);
  border-radius: var(--radius);
  padding: .3rem .5rem;
  cursor: pointer;
  transition: background .15s;
  position: relative;
  z-index: 2;
}
.com-content-categories__item-title-wrapper button:hover {
  background: rgba(124,58,237,.25);
}
/* Children categories */
.com-content-categories__children {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}

/* ─── Newsletter ─────────────────────────────────────────────── */
.taid-newsletter {
  position: relative;
  padding: 6rem 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.taid-newsletter-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(124,58,237,.20) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 100%, rgba(6,182,212,.08) 0%, transparent 60%);
  pointer-events: none;
}

.taid-newsletter-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.taid-newsletter-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -.025em;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 1rem;
}

.taid-newsletter-sub {
  font-size: 1.05rem;
  color: var(--text-soft);
  max-width: 52ch;
  margin: 0 auto 2rem;
  font-weight: 300;
}

.taid-newsletter-form { max-width: 520px; margin: 0 auto; }

/* Newsletter module form — class-based selectors */
.taid-nl-row {
  display: flex;
  gap: .5rem;
}
.taid-nl-row .taid-nl-input { flex: 1; margin-bottom: 0; }
.taid-nl-row .taid-btn { flex: 0 0 auto; width: auto; }
.taid-nl-fine {
  font-size: .72rem;
  color: var(--muted);
  text-align: center;
  margin-top: .75rem;
}

/* Newsletter module form styling */
.taid-newsletter-form input[type="email"],
.taid-newsletter-form input[type="text"] {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border-md);
  color: var(--text);
  padding: .85rem 1.2rem;
  font-family: var(--font-body);
  font-size: .95rem;
  border-radius: var(--radius);
  margin-bottom: .75rem;
  transition: border-color .2s ease, background .2s ease;
}
.taid-newsletter-form input:focus {
  outline: none;
  border-color: var(--violet);
  background: rgba(124,58,237,.06);
}
.taid-newsletter-form button,
.taid-newsletter-form input[type="submit"] {
  width: 100%;
  background: var(--violet);
  color: #fff;
  border: none;
  padding: .85rem 1.8rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease;
}
.taid-newsletter-form button:hover,
.taid-newsletter-form input[type="submit"]:hover {
  background: var(--violet-dark);
  box-shadow: 0 0 20px rgba(124,58,237,.45);
}

/* ─── Shop Intro (above product cards) ───────────────────────── */
.taid-shop-intro {
  background: var(--bg2);
  padding-bottom: 2rem;
  text-align: center;
  border-bottom: none;
}
.taid-shop-intro-eyebrow {
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--violet-lt);
  margin-bottom: 1.25rem;
}
.taid-shop-intro-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text);
  max-width: 20ch;
  margin: 0 auto 2rem;
  background: linear-gradient(135deg, var(--text) 0%, var(--violet-lt) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.taid-shop-intro .taid-section-lead {
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--text-soft);
}
.taid-shop-intro-paradigm {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-soft);
  opacity: .45;
  margin-top: 1.5rem;
  margin-bottom: 0;
  text-align: center;
}

/* ─── Marketplace ────────────────────────────────────────────── */
.taid-marketplace { background: var(--bg2); }
.taid-marketplace .taid-section-title { text-align: center; }
.taid-marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* ─── Pricing grid (3 products) ─────────────────────────────── */
.taid-pricing-intro {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 2.5rem;
}
.taid-pricing-intro p { color: var(--text-soft); font-size: .92rem; margin: .5rem 0 0; }
.taid-pricing-intro a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(6,182,212,.4); }
.taid-pricing-intro a:hover { color: var(--cyan-lt); text-decoration-color: var(--cyan); }

.taid-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* Featured (middle) card — highlighted, no lift so buttons stay level */
.taid-product-card--featured {
  border-color: rgba(124,58,237,.5);
  box-shadow: 0 0 40px rgba(124,58,237,.14);
  background: rgba(124,58,237,.04);
  position: relative;
}
.taid-product-card--featured:hover {
  border-color: rgba(124,58,237,.7);
  box-shadow: 0 0 60px rgba(124,58,237,.22);
}

/* "Most Popular" badge */
.taid-product-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--violet);
  color: #fff;
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3rem .9rem;
  border-radius: 20px;
  white-space: nowrap;
}

/* Strikethrough original price on bundle */
.taid-product-price-was {
  font-family: var(--font-display);
  font-size: .8rem;
  color: var(--muted);
  text-decoration: line-through;
  margin-left: .35rem;
}

/* Saving pill */
.taid-product-saving {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(16,185,129,.12);
  color: var(--emerald);
  border: 1px solid rgba(16,185,129,.25);
  padding: .2rem .6rem;
  border-radius: 20px;
}

/* CTA button fills card width */
.taid-product-card .taid-btn { align-self: stretch; justify-content: center; }

/* Divider line above CTA */
.taid-product-cta-wrap {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
  .taid-pricing-grid { grid-template-columns: 1fr; }
  .taid-product-card--featured { transform: none; }
}

/* ─── Dynamic sections ───────────────────────────────────────── */
.taid-dynamic { background: var(--bg2); }

/* ─── Paywall block ──────────────────────────────────────────── */
.taid-paywall {
  margin: 2.5rem 0;
  padding: 2.5rem;
  background: var(--bg2);
  border: 1px solid rgba(124,58,237,.3);
  border-radius: var(--radius);
  box-shadow: 0 0 40px rgba(124,58,237,.08);
  text-align: center;
}
.taid-paywall-lock { font-size: 2rem; margin-bottom: 1rem; }
.taid-paywall-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .75rem;
}
.taid-paywall-desc { color: var(--text-soft); margin-bottom: 1.5rem; }
.taid-paywall-list {
  text-align: left;
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  color: var(--text-soft);
  font-size: .85rem;
  line-height: 1.8;
}
.taid-paywall-list li::before { content: '✓ '; color: var(--cyan); font-weight: 700; }
.taid-paywall-note { font-size: .75rem; color: var(--muted); margin-bottom: 1.5rem; }
.taid-paywall-cta {
  font-size: .85rem;
  padding: 1rem 2.6rem;
  background: linear-gradient(105deg, var(--violet) 0%, #0891b2 100%);
  box-shadow: 0 0 0 1px rgba(124,58,237,.5), 0 6px 28px rgba(124,58,237,.35);
  position: relative;
  overflow: hidden;
}
.taid-paywall-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}
.taid-paywall-cta:hover {
  background: linear-gradient(105deg, var(--violet-dark) 0%, #0e7490 100%) !important;
  box-shadow: 0 0 0 1px rgba(124,58,237,.7), 0 8px 40px rgba(124,58,237,.55), 0 4px 16px rgba(6,182,212,.25) !important;
  transform: translateY(-2px);
  color: #fff !important;
}
.taid-paywall-cta:hover::after { transform: translateX(120%); }
.taid-paywall-sub { margin-top: 1rem; font-size: .72rem; color: var(--muted); font-style: italic; }

/* ─── Marketplace product card ───────────────────────────────── */
.taid-product-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.taid-product-card:hover {
  border-color: rgba(124,58,237,.35);
  box-shadow: 0 0 30px rgba(124,58,237,.12);
}
.taid-product-meta { display: flex; align-items: center; gap: .75rem; }
.taid-product-price {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--violet-lt);
}
.taid-product-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.taid-product-desc { color: var(--text-soft); font-size: .85rem; line-height: 1.7; }
.taid-product-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .78rem;
  color: var(--text-soft);
}
.taid-product-features li::before { content: '→ '; color: var(--cyan); }

/* ─── Partner strip — Weblio ─────────────────────────────────── */
.taid-partner-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  padding: 2rem 0;
}
.taid-partner-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.taid-partner-brand {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex-shrink: 0;
  min-width: 120px;
}
.taid-partner-label {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.taid-partner-wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #c4431f;          /* Weblio terracotta brand colour */
  text-decoration: none;
  transition: opacity .2s ease;
  line-height: 1;
}
.taid-partner-wordmark:hover { opacity: .8; }
.taid-partner-tagline {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .06em;
  color: var(--muted);
  margin-top: .15rem;
}
.taid-partner-desc {
  flex: 1;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--text-soft);
  line-height: 1.65;
  margin: 0;
  min-width: 200px;
}
.taid-partner-cta { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 640px) {
  .taid-partner-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .taid-partner-cta { align-self: flex-start; }
}

/* ─── Footer ─────────────────────────────────────────────────── */
.taid-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 3rem 0 2rem;
}

.taid-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}

.taid-footer-grid h3,
.taid-footer-grid h4,
.taid-footer-grid .moduletable h3,
.taid-footer-heading {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
  margin-top: 0;
  font-weight: 400;
}

.taid-footer-grid p {
  font-size: .85rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: .75rem;
}

.taid-footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 .75rem;
}
.taid-footer-links li a {
  display: block;
  padding: .25rem 0;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-soft);
  text-decoration: none;
  transition: color .2s ease;
}
.taid-footer-links li:first-child a { padding-top: 0; }
.taid-footer-links li a:hover { color: var(--violet-lt); }

/* Generic footer links (non-list) */
.taid-footer-grid a,
.taid-footer-grid .moduletable a {
  color: var(--text-soft);
  font-size: .85rem;
  text-decoration: none;
  transition: color .2s ease;
}
.taid-footer-grid a:hover { color: var(--violet-lt); }

.taid-footer-grid .moduletable { border: 0; background: transparent; padding: 0; }

.taid-footer-btn,
.taid-footer-grid a.taid-footer-btn {
  display: inline;
  margin-top: .75rem;
  color: var(--violet-lt) !important;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(167,139,250,.35);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.taid-footer-btn:hover,
.taid-footer-grid a.taid-footer-btn:hover {
  color: #fff !important;
  text-decoration-color: rgba(255,255,255,.6);
}

.taid-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.taid-footer-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s ease;
}
.taid-footer-logo:hover { color: var(--text-soft); }
.taid-footer-bottom .mod-custom:has(.taid-footer-logo) {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted2);
  letter-spacing: .04em;
}
.taid-footer-bottom .mod-custom:has(.taid-footer-logo) a:not(.taid-footer-logo) {
  color: var(--muted2);
  text-decoration: none;
  transition: color .2s ease;
}
.taid-footer-bottom .mod-custom:has(.taid-footer-logo) a:not(.taid-footer-logo):hover {
  color: var(--text-soft);
}
.taid-footer-logo span {
  background: var(--grad-signal);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.taid-footer-copy {
  font-size: .72rem;
  color: var(--muted2);
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.taid-footer-powered {
  font-size: .72rem;
  color: var(--muted2);
  font-family: var(--font-mono);
  letter-spacing: .04em;
  margin: 0;
}
.taid-footer-powered a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.12);
  transition: color .2s ease, border-color .2s ease;
}
.taid-footer-powered a:hover {
  color: var(--text-soft);
  border-bottom-color: rgba(255,255,255,.3);
}
.taid-footer-powered a.taid-footer-pp {
  margin-left: .2em;
  border-bottom: none !important;
  color: var(--muted2) !important;
  font-weight: 700;
  letter-spacing: -.04em;
  transition: color .2s ease;
}
.taid-footer-powered a.taid-footer-pp:hover {
  color: var(--violet-lt) !important;
}

.taid-footer-support {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.taid-footer-support a {
  color: var(--muted2);
  opacity: .5;
  transition: opacity .2s, color .2s;
  line-height: 1;
}
.taid-footer-support a:hover {
  opacity: 1;
  color: var(--violet-lt);
}

/* ─── Back to top ────────────────────────────────────────────── */
.taid-back-top {
  position: fixed;
  bottom: 5rem;
  right: 1.75rem;
  width: 32px;
  height: 32px;
  font-size: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease, border-color .2s ease, color .2s ease;
  z-index: 500;
}
.taid-back-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.taid-back-top:hover {
  border-color: var(--violet);
  color: var(--violet-lt);
}

/* ─── Pagination (Joomla blog view) ─────────────────────────── */
/* Page counter — "Page 1 of 5" */
.taid-component-panel .counter {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--muted);
  letter-spacing: .04em;
}

.taid-component-panel .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  list-style: none;
  padding: 1.5rem 0 0;
  margin: 0;
}
.taid-component-panel .pagination .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .6rem;
  background: var(--panel2);
  border: 1px solid var(--border-md);
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.taid-component-panel .pagination .page-item .page-link:hover {
  border-color: var(--violet);
  color: var(--violet-lt);
  background: var(--violet-dim);
}
.taid-component-panel .pagination .page-item.active .page-link,
.taid-component-panel .pagination .active > .page-link {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}
.taid-component-panel .pagination .page-item.disabled .page-link {
  opacity: .35;
  pointer-events: none;
}

/* Joomla pagination icon font not loaded — replace with Unicode chevrons */
.icon-angle-double-left::before  { content: '«'; font-family: var(--font-mono); font-size: .8rem; }
.icon-angle-left::before         { content: '‹'; font-family: var(--font-mono); font-size: 1rem; }
.icon-angle-right::before        { content: '›'; font-family: var(--font-mono); font-size: 1rem; }
.icon-angle-double-right::before { content: '»'; font-family: var(--font-mono); font-size: .8rem; }

/* ─── Forms (general) ────────────────────────────────────────── */
.taid-component-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.taid-component-panel textarea,
.taid-component-panel select,
.taid-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.taid-panel textarea,
.taid-panel select {
  width: 100%;
  background-color: rgba(255,255,255,.04);
  border: 1px solid var(--border-md);
  color: var(--text);
  padding: .65rem .85rem;
  font-family: var(--font-body);
  font-size: .9rem;
  border-radius: var(--radius);
  transition: border-color .2s ease;
}
.taid-component-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,
.taid-component-panel textarea:focus,
.taid-component-panel select:focus,
.taid-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,
.taid-panel textarea:focus,
.taid-panel select:focus {
  outline: none;
  border-color: var(--violet);
  background: rgba(124,58,237,.05);
}

/* Inputs inside Bootstrap input-group must not be width:100% — let flex handle sizing */
.taid-component-panel .input-group input,
.taid-panel .input-group input { width: auto !important; }

/* ─── Module list menus (in panels) ─────────────────────────── */
.taid-component-panel .mod-menu,
.taid-panel .mod-menu,
.moduletable .mod-menu {
  list-style: none;
}
.taid-component-panel .mod-menu li,
.taid-panel .mod-menu li,
.moduletable .mod-menu li {
  border-bottom: 1px solid var(--border);
  padding: .35rem 0;
}
.taid-component-panel .mod-menu li:last-child,
.taid-panel .mod-menu li:last-child { border-bottom: 0; }
.taid-component-panel .mod-menu a,
.taid-panel .mod-menu a {
  color: var(--text-soft);
  font-size: .9rem;
  transition: color .2s ease;
}
.taid-component-panel .mod-menu a:hover,
.taid-panel .mod-menu a:hover { color: var(--violet-lt); }

/* ─── Feature Test Menu — sidebar (vertical) ─────────────────── */
.taid-sidebar .moduletable {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;           /* clip to rounded corners */
  max-height: calc(100vh - var(--nav-h) - 3rem);
  display: flex;
  flex-direction: column;
}
/* Scrollable body */
.taid-sidebar .moduletable > ul {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,.3) transparent;
}
/* Left-scrollbar variant — flip scrollbar to left edge */
.taid-sidebar .moduletable > ul.taid-menu-grouped-l {
  direction: rtl;
  text-align: left;
  align-items: stretch;
}
.taid-sidebar .moduletable > ul.taid-menu-grouped-l > li {
  direction: ltr;
  text-align: left;
}

/* Module title — styled header strip */
.taid-sidebar .moduletable h3 {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .6rem .85rem;
  margin: 0 0 .85rem;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* Custom HTML module text */
.taid-sidebar .mod-custom p {
  font-size: .82rem;
  line-height: 1.65;
  color: var(--text-soft);
  margin: 0 0 .6rem;
  padding: 0 .85rem;
}
.taid-sidebar .mod-custom p:last-child { margin-bottom: 0; }
.taid-sidebar .mod-custom a {
  color: var(--violet-lt);
  text-decoration: none;
  font-size: .82rem;
}
.taid-sidebar .mod-custom a:hover { color: var(--cyan-lt); }

/* Override Bootstrap .nav flex → vertical */
.taid-sidebar .mod-menu.nav {
  flex-direction: column;
  gap: 0;
  padding: .4rem 0 .6rem;
  margin: 0;
  list-style: none;
}
.taid-sidebar .mod-menu .nav-item { display: block; width: 100%; }

/* Section heading labels — violet accent with dot */
.taid-sidebar .mod-menu .mod-menu__heading.nav-header {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--violet-lt);
  padding: .65rem .85rem .2rem;
  margin-top: .35rem;
  pointer-events: none;
  opacity: .85;
}
.taid-sidebar .mod-menu .mod-menu__heading.nav-header::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--violet);
  border-radius: 50%;
  flex-shrink: 0;
}
.taid-sidebar .mod-menu .nav-item:first-child .mod-menu__heading.nav-header {
  margin-top: 0;
  padding-top: .35rem;
}

/* Clickable links — target bare <a>, no class in this Joomla install */
.taid-sidebar .mod-menu .nav-item > a {
  display: block;
  padding: .38rem .85rem .38rem 1.4rem;
  font-size: .85rem;
  color: var(--text-soft);
  text-decoration: none;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.taid-sidebar .mod-menu .nav-item > a:hover {
  color: var(--text);
  background: rgba(255,255,255,.04);
  border-left-color: rgba(124,58,237,.4);
}

/* Active/current item */
.taid-sidebar .mod-menu .nav-item.current > a,
.taid-sidebar .mod-menu .nav-item.active > a {
  color: var(--violet-lt) !important;
  background: rgba(124,58,237,.12) !important;
  border-left-color: var(--violet) !important;
  font-weight: 500;
}

/* Separator line */
.taid-sidebar .mod-menu .nav-item.divider {
  border-top: 1px solid var(--border);
  margin: .4rem .7rem;
}
.taid-sidebar .mod-menu .nav-item.divider .mod-menu__separator { display: none; }

/* ─── Sidebar: generic list modules ─────────────────────────── */
/* Archive, Categories, Popular, Latest Users, Related Items all render <ul> lists */
/* Excluded: modules with custom sidebar classes, and specific module ul classes */
.taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul:not(.mod-menu):not(.nav):not(.list-group):not(.pagination):not(.newsfeed):not(.mod-articlescategory):not(.mod-articlesarchive):not(.mod-articlescategories):not(.mostread):not(.latestlist):not(.mod-articles-items) {
  list-style: none;
  padding: .4rem 0 .6rem;
  margin: 0;
}
.taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul:not(.mod-menu):not(.nav):not(.list-group):not(.pagination):not(.newsfeed):not(.mod-articlescategory):not(.mod-articlesarchive):not(.mod-articlescategories):not(.mostread):not(.latestlist):not(.mod-articles-items) li {
  padding: 0;
  margin: 0;
}
.taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul:not(.mod-menu):not(.nav):not(.list-group):not(.pagination):not(.newsfeed):not(.mod-articlescategory):not(.mod-articlesarchive):not(.mod-articlescategories):not(.mostread):not(.latestlist):not(.mod-articles-items) li a {
  display: block;
  padding: .35rem .85rem;
  font-size: .85rem;
  color: var(--text-soft);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color .15s, border-color .2s;
}
.taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul:not(.mod-menu):not(.nav):not(.list-group):not(.pagination):not(.newsfeed):not(.mod-articlescategory):not(.mod-articlesarchive):not(.mod-articlescategories):not(.mostread):not(.latestlist):not(.mod-articles-items) li a:hover {
  color: var(--violet-lt);
  border-left-color: var(--violet, #7c5cfc);
}
/* Nested sub-lists (article categories children) */
.taid-sidebar .moduletable ul ul {
  padding-left: .85rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ─── Sidebar: mod_articles_category / mod_articles_news ────── */
.taid-sidebar .mod-articlescategory,
.taid-sidebar .mod-articlesnews {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Override global panel styles — the .moduletable parent is the card */
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
.taid-sidebar .mod-articlescategory > li,
.taid-sidebar .mod-articlescategory .mod-articles-category-group,
.taid-sidebar .mod-articlesnews__item {
  padding: .65rem 0 !important;
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
  color: var(--text);
  line-height: 1.4;
}
.taid-sidebar .mod-articlescategory > li:first-child { padding-top: 0 !important; }
.taid-sidebar .mod-articlescategory > li:last-child,
.taid-sidebar .mod-articlescategory .mod-articles-category-group:last-child,
.taid-sidebar .mod-articlesnews__item:last-child {
  border-bottom: none;
  padding-bottom: 0 !important;
}
/* Article titles (linked or plain text inside <li>) */
.taid-sidebar .mod-articlescategory > li > a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s ease;
}
.taid-sidebar .mod-articlescategory > li > a:hover { color: var(--violet-lt); }

.taid-sidebar .mod-articlescategory h4,
.taid-sidebar .mod-articlesnews__item h4 {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  margin: 0 0 .25rem;
  line-height: 1.4;
}
/* Written-by and introtext in sidebar */
.taid-sidebar .mod-articlescategory .mod-articles-category-writtenby {
  display: none;
}
.taid-sidebar .mod-articlescategory .mod-articles-category-introtext {
  font-size: .75rem;
  color: var(--text-soft);
  line-height: 1.5;
  margin-top: .3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.taid-sidebar .mod-articlescategory h4 a,
.taid-sidebar .mod-articlesnews__item h4 a {
  color: var(--text);
  text-decoration: none;
}
.taid-sidebar .mod-articlescategory h4 a:hover,
.taid-sidebar .mod-articlesnews__item h4 a:hover {
  color: var(--violet-lt);
}
.taid-sidebar .mod-articlescategory p,
.taid-sidebar .mod-articlesnews__item p {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.taid-sidebar .mod-articlescategory .readmore a,
.taid-sidebar .mod-articlesnews__item .readmore a {
  font-size: .7rem;
  font-family: var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--violet-lt);
  text-decoration: none;
}
.taid-sidebar .mod-articlescategory .mod-articles-category-date,
.taid-sidebar .mod-articlescategory .mod-articles-category-category,
.taid-sidebar .mod-articlesnews__item .mod-articles-category-date {
  display: block;
  font-size: .62rem;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: .04em;
  margin-top: .2rem;
  padding-left: .15rem;
}
.taid-sidebar .mod-articlescategory .mod-articles-category-category a {
  color: var(--cyan);
  text-decoration: none;
}

/* ─── Sidebar: mod_articles (unified Joomla 6 module) ──────── */
.taid-sidebar .mod-articles-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.taid-sidebar .mod-articles-items li {
  position: relative;
  border-bottom: 1px solid var(--border);
  padding: .75rem .85rem .75rem 1rem;
  border-left: 3px solid transparent;
  transition: border-color .2s ease, background .15s ease;
  cursor: pointer;
}
.taid-sidebar .mod-articles-items li:hover {
  border-left-color: var(--violet, #7c5cfc);
  background: rgba(124,58,237,.04);
}
.taid-sidebar .mod-articles-items li:last-child { border-bottom: 0; }
/* Stretch the title link to cover the full li — whole row is clickable */
.taid-sidebar .mod-articles-items .mod-articles-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* Hide "Details" dt, icons, and readmore in sidebar context */
.taid-sidebar .mod-articles-items .article-info-term { display: none; }
.taid-sidebar .mod-articles-items .icon-folder-open,
.taid-sidebar .mod-articles-items .icon-calendar { display: none; }
.taid-sidebar .mod-articles-items .readmore { display: none; }

/* Category + date metadata */
.taid-sidebar .mod-articles-items dl.list-unstyled {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .6rem;
  margin: 0 0 .3rem;
}
.taid-sidebar .mod-articles-items .mod-articles-category,
.taid-sidebar .mod-articles-items .mod-articles-date {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.taid-sidebar .mod-articles-items .mod-articles-hits {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0;
}
.taid-sidebar .mod-articles-items .mod-articles-hits .icon-eye {
  font-size: .58rem;
  opacity: .6;
}
.taid-sidebar .mod-articles-items .mod-articles-category {
  color: var(--cyan);
}
.taid-sidebar .mod-articles-items .mod-articles-category a {
  color: var(--cyan);
  text-decoration: none;
}

/* Intro text */
.taid-sidebar .mod-articles-items .mod-articles-item-content > p:not(.readmore),
.taid-sidebar .mod-articles-items .mod-articles-item-content > div:not(.readmore) {
  font-size: .78rem;
  color: var(--text-soft);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Article title link (if present) */
.taid-sidebar .mod-articles-items .mod-articles-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  margin: 0 0 .2rem;
  line-height: 1.35;
}
.taid-sidebar .mod-articles-items .mod-articles-link {
  color: var(--text);
  text-decoration: none;
}
.taid-sidebar .mod-articles-items .mod-articles-link:hover { color: var(--violet-lt); }

/* ─── Sidebar: mod_breadcrumbs ──────────────────────────────── */
.taid-sidebar .mod-breadcrumbs {
  padding: .6rem .85rem;
}
.taid-sidebar .mod-breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  padding: 0;
  margin: 0;
}
.taid-sidebar .mod-breadcrumbs .breadcrumb-item {
  font-size: .75rem;
  color: var(--muted);
}
.taid-sidebar .mod-breadcrumbs .breadcrumb-item a {
  color: var(--text-soft);
  text-decoration: none;
}
.taid-sidebar .mod-breadcrumbs .breadcrumb-item a:hover {
  color: var(--violet-lt);
}
.taid-sidebar .mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  color: var(--muted2);
}
.taid-sidebar .mod-breadcrumbs .breadcrumb-item.active {
  color: var(--muted);
}

/* ─── Sidebar: mod_feed (class="feed" or class="mod-feed") ─── */
.taid-sidebar .feed,
.taid-sidebar .mod-feed {
  font-size: .82rem;
  /* Strip global panel styles — .moduletable parent is the card */
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.taid-sidebar .feed > h2,
.taid-sidebar .mod-feed .feed-title {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .3rem;
  line-height: 1.35;
}
.taid-sidebar .feed > h2 a {
  color: var(--text);
  text-decoration: none;
}
.taid-sidebar .feed > h2 a:hover { color: var(--violet-lt); }
.taid-sidebar .feed > img {
  float: right;
  width: 28px;
  height: auto;
  opacity: .5;
  margin: 0 0 .5rem .5rem;
  border-radius: 2px;
}
.taid-sidebar .feed .newsfeed,
.taid-sidebar .mod-feed .newsfeed {
  list-style: none;
  padding: 0;
  margin: .75rem 0 0;
}
.taid-sidebar .feed .newsfeed li,
.taid-sidebar .mod-feed .feed-item {
  padding: .75rem 0;
  border-top: 1px solid var(--border);
}
.taid-sidebar .feed .feed-link a,
.taid-sidebar .mod-feed .feed-item-title a {
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  line-height: 1.4;
}
.taid-sidebar .feed .feed-link a:hover,
.taid-sidebar .mod-feed .feed-item-title a:hover {
  color: var(--violet-lt);
}
.taid-sidebar .feed .feed-item-description,
.taid-sidebar .mod-feed .feed-item-description {
  font-size: .68rem;
  color: var(--muted);
  line-height: 1.5;
  margin-top: .15rem;
}

/* ─── Sidebar: mod_articles_archive ────────────────────────── */
.taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlesarchive {
  list-style: none;
  padding: 0;
  margin: 0;
}
.taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlesarchive li {
  padding: .4rem 0;
  border-bottom: 1px solid var(--border);
}
.taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlesarchive li:first-child { padding-top: 0; }
.taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlesarchive li:last-child { border-bottom: none; padding-bottom: 0; }
.taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlesarchive a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: .82rem;
  transition: color .15s ease;
}
.taid-sidebar .moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) .mod-articlesarchive a:hover { color: var(--violet-lt); }

/* ─── Sidebar: mod_footer ───────────────────────────────────── */
.taid-sidebar .mod-footer {
  padding: .6rem .85rem;
}

/* ─── Sidebar: mod_stats (list-group) ───────────────────────── */
.taid-sidebar .mod-stats {
  padding: 0;
  list-style: none;
}
.taid-sidebar .mod-stats.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--border);
  border-radius: 0;
}
.taid-sidebar .mod-stats .list-group-item {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-soft);
  font-size: .82rem;
  padding: .5rem .85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.taid-sidebar .mod-stats .list-group-item:first-child { border-top: none; }
.taid-sidebar .mod-stats .list-group-item:last-child { border-bottom: none; }
.taid-sidebar .mod-stats .badge {
  background: var(--violet-dim) !important;
  color: var(--violet-lt) !important;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
}

/* ─── Sidebar: mod_whosonline ───────────────────────────────── */
.taid-sidebar .mod-whosonline {
  padding: .6rem .85rem;
  font-size: .82rem;
  color: var(--text-soft);
}
.taid-sidebar .mod-whosonline p { margin-bottom: .4rem; }
.taid-sidebar .mod-whosonline ul,
.taid-sidebar .mod-whosonline .nav { list-style: none; padding: 0; }
.taid-sidebar .mod-whosonline .nav li { padding: .2rem 0; }

/* ─── Sidebar list modules (via moduleclass_sfx) ─────────── */
/* Matches taid-menu-grouped link style exactly              */
.sidemenu-li-pa ul,
.taid-sidebar-list ul {
  list-style: none;
  padding: .4rem 0 .6rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sidemenu-li-pa ul li,
.taid-sidebar-list ul li {
  display: block;
  width: 100%;
}
.sidemenu-li-pa ul a,
.taid-sidebar-list ul a {
  display: block;
  padding: .38rem .85rem .38rem 1.4rem;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 400;
  color: var(--text-soft);
  text-decoration: none;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.sidemenu-li-pa ul a span,
.taid-sidebar-list ul a span {
  display: inline;
  font: inherit;
  color: inherit;
}
.sidemenu-li-pa ul a:hover {
  color: var(--text);
  background: rgba(255,255,255,.04);
  border-left-color: rgba(124,58,237,.4);
}
.taid-sidebar-list ul a:hover {
  color: var(--violet-lt);
  background: rgba(255,255,255,.04);
  border-left-color: var(--violet, #7c5cfc);
  border-left-width: 3px;
}
/* Nested sub-categories (Article Categories child lists) */
.taid-sidebar-list ul ul {
  padding: .1rem 0 .2rem;
}
.taid-sidebar-list ul ul a {
  padding-left: 2.2rem;
  font-size: .8rem;
  color: var(--text-soft);
  opacity: .75;
}
.taid-sidebar-list ul ul a:hover {
  opacity: 1;
}

/* ─── Sidebar: mod_users_latest (compact) ──────────────────── */
.taid-sidebar .mod-userslatest {
  padding: 0;
  list-style: none;
}
.taid-sidebar .mod-userslatest li {
  padding: .5rem 0;
  font-size: .82rem;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
}
.taid-sidebar .mod-userslatest li:first-child { padding-top: 0; }
.taid-sidebar .mod-userslatest li:last-child { border-bottom: none; padding-bottom: 0; }
.taid-sidebar .mod-userslatest li a {
  color: var(--text-soft) !important;
  text-decoration: none !important;
  transition: color .2s ease;
}
.taid-sidebar .mod-userslatest li a:hover { color: var(--violet-lt) !important; }

/* ─── Sidebar: mod_syndicate ────────────────────────────────── */
.taid-sidebar .mod-syndicate {
  padding: .6rem .85rem;
}
.taid-sidebar .mod-syndicate a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--violet-lt);
  text-decoration: none;
}
.taid-sidebar .mod-syndicate a:hover { color: var(--cyan-lt); }

/* ─── mod_syndicate (global — any position) ────────────────── */
.mod-syndicate.syndicate-module,
a.mod-syndicate.syndicate-module {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--violet-lt);
  text-decoration: none;
  font-size: .875rem;
}
a.mod-syndicate.syndicate-module:hover { color: var(--cyan-lt); }

/* ─── Sidebar: mod_wrapper (iFrame) ─────────────────────────── */
.taid-sidebar .mod-wrapper iframe {
  border: none;
  border-radius: var(--radius);
  width: 100%;
}

/* ─── Sidebar: mod_random_image ─────────────────────────────── */
.taid-sidebar .mod-randomimage {
  padding: .6rem .85rem;
}
.taid-sidebar .mod-randomimage img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* ─── Sidebar: mod_languages ────────────────────────────────── */
.taid-sidebar .mod-languages {
  padding: .6rem .85rem;
}
.taid-sidebar .mod-languages a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: .82rem;
}
.taid-sidebar .mod-languages a:hover { color: var(--violet-lt); }

/* ─── Sidebar: allow content scrolling (non-menu modules) ───── */
.taid-sidebar .moduletable > div:not(.mod-menu),
.taid-sidebar .moduletable > ul:not(.mod-menu):not(.nav) {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,.3) transparent;
}

/* ─── Sidebar: forms (global — login, search, any future form) ── */
/* Ensure every form control in sidebar cards fills the available width
   and uses consistent dark-theme sizing. This prevents tiny/collapsed
   inputs regardless of which module is placed in the sidebar.        */
.taid-sidebar .form-control,
.taid-sidebar .form-select {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  font-size: .85rem;
  padding: .5rem .75rem;
  border-radius: 4px;
}
.taid-sidebar .form-control::placeholder { color: var(--muted) !important; }
.taid-sidebar .input-group {
  display: flex;
  width: 100%;
}
.taid-sidebar .input-group .form-control {
  flex: 1 1 0%;
  min-width: 0;        /* prevent flex overflow */
  margin-bottom: 0 !important;
}
.taid-sidebar .input-group .btn,
.taid-sidebar .input-group .input-group-text,
.taid-sidebar .input-group .input-password-toggle {
  flex-shrink: 0;
}
.taid-sidebar .input-group-text {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
  font-size: .82rem;
  padding: .5rem .75rem;
}

/* ─── Sidebar: mod_login ───────────────────────────────────── */
.taid-sidebar .mod-login {
  padding: .6rem .85rem .85rem;
}
.taid-sidebar .mod-login .form-group {
  margin-bottom: .75rem;
}
.taid-sidebar .mod-login .form-group:last-child {
  margin-bottom: 0;
}
.taid-sidebar .mod-login .input-password-toggle {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
  font-size: .78rem;
  padding: .5rem .75rem;
}
.taid-sidebar .mod-login .form-check {
  margin: .5rem 0;
}
.taid-sidebar .mod-login .form-check-label {
  color: var(--text-soft);
  font-size: .82rem;
}
.taid-sidebar .mod-login .btn-primary {
  width: 100%;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .5rem 1rem;
  margin-top: .25rem;
}
.taid-sidebar .mod-login .btn-primary:hover {
  background: var(--violet-lt) !important;
  border-color: var(--violet-lt) !important;
}
.taid-sidebar .mod-login__options {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}
.taid-sidebar .mod-login__options li {
  padding: .15rem 0;
}
.taid-sidebar .mod-login__options a {
  color: var(--violet-lt);
  font-size: .78rem;
  text-decoration: none;
}
.taid-sidebar .mod-login__options a:hover {
  color: var(--cyan-lt);
}

/* ─── Sidebar: mod_finder / mod_search ─────────────────────── */
.taid-sidebar .mod-finder,
.taid-sidebar .mod-search {
  padding: .6rem .85rem .85rem;
}
.taid-sidebar .mod-finder label.finder {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .5rem;
}
.taid-sidebar .mod-finder .btn,
.taid-sidebar .mod-search .btn {
  font-size: .78rem;
  padding: .5rem .75rem;
}

/* ─── Top-a: mod_finder (search in top-a position) ─────────── */
.taid-section--top-a .mod-finder .form-control,
.taid-section--top-a .mod-search .form-control {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  font-size: .85rem;
  padding: .5rem .75rem;
}
.taid-section--top-a .mod-finder .input-group,
.taid-section--top-a .mod-search .input-group {
  display: flex;
  width: 100%;
}
.taid-section--top-a .mod-finder .input-group .form-control,
.taid-section--top-a .mod-search .input-group .form-control {
  flex: 1 1 0%;
  min-width: 0;
  margin-bottom: 0 !important;
}

/* ─── Content-area modules (main-top / main-bottom / top-a) ─── */
/* These positions use style="none", so modules render bare.
   Target by module class directly. */

/* Newsflash (mod_articles_news) — in main-top or main-bottom */
.taid-content-primary .mod-articlesnews,
.taid-main > .taid-container > .mod-articlesnews {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.mod-articlesnews .mod-articlesnews__item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.mod-articlesnews .mod-articlesnews__item:first-child { padding-top: 0; }
.mod-articlesnews .mod-articlesnews__item:last-child { border-bottom: none; padding-bottom: 0; }
.mod-articlesnews .mod-articlesnews__item h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .5rem;
}
.mod-articlesnews .mod-articlesnews__item h4 a {
  color: var(--text);
  text-decoration: none;
}
.mod-articlesnews .mod-articlesnews__item h4 a:hover { color: var(--violet-lt); }
.mod-articlesnews .mod-articlesnews__item p {
  font-size: .875rem;
  color: var(--text-soft);
  line-height: 1.7;
}
.mod-articlesnews .readmore a {
  font-size: .72rem;
  font-family: var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--violet-lt);
  text-decoration: none;
}
.mod-articlesnews .readmore a:hover { color: var(--cyan-lt); }

/* Articles by Category (mod_articles_category) — in main-bottom */
ul.mod-articlescategory.mod-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
ul.mod-articlescategory.mod-list > li {
  padding: 1rem 1.75rem;
  border-bottom: 1px solid var(--border);
  font-size: .875rem;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 500;
}
ul.mod-articlescategory.mod-list > li:last-child { border-bottom: none; }
.mod-articles-category-writtenby,
.mod-articles-category-category,
.mod-articles-category-date {
  display: inline-block;
  font-size: .72rem;
  font-family: var(--font-mono);
  color: var(--muted);
  margin-right: .5rem;
}
.mod-articles-category-category a {
  color: var(--violet-lt);
  text-decoration: none;
}
.mod-articles-category-introtext {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .82rem !important;
  color: var(--text-soft) !important;
  line-height: 1.6;
  margin-top: .35rem !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Feed Display (mod_feed) — in main-bottom */
.text-left.feed,
div.feed {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.feed h2.redirect-ltr {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .5rem;
}
.feed h2 a {
  color: var(--text) !important;
  text-decoration: none !important;
}
.feed h2 a:hover { color: var(--violet-lt) !important; }
.feed img {
  max-width: 48px;
  height: auto;
  border-radius: var(--radius);
  float: right;
  margin-left: 1rem;
}
ul.newsfeed {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
ul.newsfeed li {
  padding: .75rem 0;
  border-top: 1px solid var(--border);
}
ul.newsfeed .feed-link a {
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
}
ul.newsfeed .feed-link a:hover { color: var(--violet-lt); }
ul.newsfeed .feed-item-description {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.5;
  margin-top: .2rem;
}

/* Related Items (mod_related_items) — compact card variant for component area.
   Standard link-list pattern is at .moduletable .mod-relateditems (~line 1800). */
ul.mod-relateditems {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
ul.mod-relateditems li {
  padding: 0;
}
ul.mod-relateditems li a {
  display: block;
  padding: .5rem 1.75rem;
  font-size: .875rem;
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color .15s, background .15s;
}
ul.mod-relateditems li:last-child a { border-bottom: none; }
ul.mod-relateditems li a:hover {
  color: var(--violet-lt);
  background: rgba(255,255,255,.03);
}

/* Popular Articles (mod_articles_popular) — mostread list */
.moduletable:not(.sidemenu-li-pa):not(.taid-sidebar-list) ul.mostread.mod-list {
  list-style: none;
  padding: 0;
}

/* Random Image — in content area */
.mod-randomimage {
  margin-bottom: 1.5rem;
}
.mod-randomimage img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* Wrapper iFrame — in content area */
.mod-wrapper,
iframe.mod-wrapper {
  border: none;
  border-radius: var(--radius);
  max-width: 100%;
}

/* Footer module — in footer position */
.mod-footer {
  font-size: .72rem;
  color: var(--muted);
  font-family: var(--font-mono);
}
.mod-footer a {
  color: var(--violet-lt);
  text-decoration: none;
}
.mod-footer a:hover { color: var(--cyan-lt); }
.mod-footer .footer1,
.mod-footer .footer2 { margin-bottom: .25rem; }

/* Banners module */
.mod-banners {
  text-align: center;
}
.mod-banners .banneritem + .banneritem {
  margin-top: .75rem;
}
.mod-banners img {
  max-width: 100%;
  height: auto;
}

/* ─── Main-bottom module grid ─────────────────────────────────── */
.taid-main-bottom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.taid-main-bottom-grid > .moduletable,
.taid-main-bottom-grid > .mod-randomimage,
.taid-main-bottom-grid > .mod-wrapper,
.taid-main-bottom-grid > iframe,
.taid-main-bottom-grid > ul.mod-articlescategory,
.taid-main-bottom-grid > div.feed,
.taid-main-bottom-grid > ul.relateditems {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  overflow: hidden;
}
.taid-main-bottom-grid > .moduletable > h3 {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
/* Reset individual module panel styles when inside the grid (they get the card from .moduletable) */
.taid-main-bottom-grid ul.mod-articlescategory.mod-list,
.taid-main-bottom-grid div.feed,
.taid-main-bottom-grid .text-left.feed {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  color: var(--text-soft);
  font-size: .85rem;
}
/* Random image module */
.taid-main-bottom-grid .mod-random-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
/* Wrapper iframe in grid */
.taid-main-bottom-grid .mod-wrapper iframe,
.taid-main-bottom-grid iframe.mod-wrapper {
  width: 100%;
  min-height: 200px;
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: var(--radius);
}
/* Related items in grid */
.taid-main-bottom-grid .mod-related-items,
.taid-main-bottom-grid .relateditems {
  list-style: none;
  padding: 0;
  margin: 0;
}
.taid-main-bottom-grid .relateditems li {
  padding: .6rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .875rem;
}
.taid-main-bottom-grid .relateditems li:last-child { border-bottom: none; }
.taid-main-bottom-grid .relateditems a {
  color: var(--violet-lt);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
}
.taid-main-bottom-grid .relateditems a:hover { color: var(--cyan-lt); }

/* ─── Grid module cards — polished variant ───────────────────── */
/* Feed Display — matches Articles by Category rhythm */
.taid-main-bottom-grid .feed h2 {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 .5rem;
  letter-spacing: .02em;
}
.taid-main-bottom-grid .feed h2 a {
  color: var(--muted);
  text-decoration: none;
}
.taid-main-bottom-grid .feed h2 a:hover { color: var(--violet-lt); }
.taid-main-bottom-grid .feed > img {
  float: right;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  margin: 0 0 .5rem .5rem;
  object-fit: cover;
  opacity: .6;
}
.taid-main-bottom-grid .feed .newsfeed {
  list-style: none;
  padding: 0;
  margin: 0;
}
.taid-main-bottom-grid .feed .newsfeed li {
  padding: .85rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .875rem;
}
.taid-main-bottom-grid .feed .newsfeed li:first-child { padding-top: 0; }
.taid-main-bottom-grid .feed .newsfeed li:last-child { border-bottom: none; padding-bottom: 0; }
.taid-main-bottom-grid .feed .newsfeed .feed-link {
  display: block;
  margin-bottom: .25rem;
}
.taid-main-bottom-grid .feed .newsfeed .feed-link a {
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  line-height: 1.4;
}
.taid-main-bottom-grid .feed .newsfeed .feed-link a:hover { color: var(--violet-lt); }
.taid-main-bottom-grid .feed .newsfeed .feed-item-description {
  font-size: .78rem;
  color: var(--text-soft);
  line-height: 1.55;
}

/* Articles by Category — compact article list card */
.taid-main-bottom-grid ul.mod-articlescategory.mod-list {
  list-style: none;
}
.taid-main-bottom-grid ul.mod-articlescategory.mod-list > li {
  padding: .85rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .875rem;
}
.taid-main-bottom-grid ul.mod-articlescategory.mod-list > li:first-child { padding-top: 0; }
.taid-main-bottom-grid ul.mod-articlescategory.mod-list > li:last-child { border-bottom: none; padding-bottom: 0; }
.taid-main-bottom-grid .mod-articles-category-writtenby,
.taid-main-bottom-grid .mod-articles-category-date {
  display: inline;
  font-size: .68rem;
  font-family: var(--font-mono);
  color: var(--muted);
  letter-spacing: .02em;
}
.taid-main-bottom-grid .mod-articles-category-category {
  display: inline;
  font-size: .68rem;
  font-family: var(--font-mono);
}
.taid-main-bottom-grid .mod-articles-category-category a {
  color: var(--violet-lt);
  text-decoration: none;
  font-size: .68rem;
}
.taid-main-bottom-grid .mod-articles-category-introtext {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .78rem !important;
  color: var(--text-soft) !important;
  line-height: 1.55;
  margin-top: .25rem !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Random image — centered, rounded, subtle shadow */
.taid-main-bottom-grid .random-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.taid-main-bottom-grid .random-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}

/* Wrapper iframe — clean embed */
.taid-main-bottom-grid .mod-wrapper,
.taid-main-bottom-grid .wrapper {
  width: 100%;
  min-height: 220px;
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: var(--radius);
}

/* Site Statistics — grid card */
.taid-main-bottom-grid .mod-stats.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--border);
  list-style: none;
  padding: 0;
  margin: 0;
}
.taid-main-bottom-grid .mod-stats .list-group-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: .65rem 0;
  color: var(--text-soft);
  font-size: .85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.taid-main-bottom-grid .mod-stats .list-group-item:last-child { border-bottom: none; }
.taid-main-bottom-grid .mod-stats .badge {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  background: rgba(124,58,237,.15) !important;
  color: var(--violet-lt) !important;
}

/* Latest Users — grid card (matches mod-stats list-group style) */
.taid-main-bottom-grid .mod-userslatest {
  list-style: none;
  padding: 0;
  margin: 0;
}
.taid-main-bottom-grid .moduletable .mod-userslatest li,
.taid-main-bottom-grid .mod-userslatest li {
  padding: .65rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-soft);
  font-size: .85rem;
  transition: none;
}
.taid-main-bottom-grid .moduletable .mod-userslatest li:first-child,
.taid-main-bottom-grid .mod-userslatest li:first-child { padding-top: .65rem; }
.taid-main-bottom-grid .moduletable .mod-userslatest li:last-child,
.taid-main-bottom-grid .mod-userslatest li:last-child { border-bottom: none; padding-bottom: 0; }
.taid-main-bottom-grid .moduletable .mod-userslatest li:hover,
.taid-main-bottom-grid .mod-userslatest li:hover { padding-left: 0; }

/* Who's Online — grid card */
.taid-main-bottom-grid .mod-whosonline {
  font-size: .85rem;
  color: var(--text-soft);
}
.taid-main-bottom-grid .mod-whosonline p { margin-bottom: .5rem; }
.taid-main-bottom-grid .mod-whosonline ul,
.taid-main-bottom-grid .mod-whosonline .nav {
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
}
.taid-main-bottom-grid .mod-whosonline .nav li {
  padding: .3rem 0;
  color: var(--violet-lt);
  font-family: var(--font-display);
  font-weight: 500;
}

/* ─── Grid modules: Login Form ──────────────────────────────── */
.taid-main-bottom-grid .mod-login .form-group {
  margin-bottom: .75rem;
}
.taid-main-bottom-grid .mod-login .form-group:last-child {
  margin-bottom: 0;
}
.taid-main-bottom-grid .mod-login .input-group {
  display: flex;
}
.taid-main-bottom-grid .mod-login .form-control {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--text);
  font-size: .85rem;
}
.taid-main-bottom-grid .mod-login .form-control::placeholder {
  color: var(--muted);
}
.taid-main-bottom-grid .mod-login .input-group-text {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--muted);
}
.taid-main-bottom-grid .mod-login .input-password-toggle {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--muted);
  font-size: .78rem;
}
.taid-main-bottom-grid .mod-login .form-check-label {
  color: var(--text-soft);
  font-size: .82rem;
}
.taid-main-bottom-grid .mod-login .btn-primary {
  font-weight: 600;
  letter-spacing: .02em;
  margin-top: .25rem;
}
.taid-main-bottom-grid .mod-login__options {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}
.taid-main-bottom-grid .mod-login__options li {
  padding: 0;
}
.taid-main-bottom-grid .mod-login__options a {
  display: block;
  padding: .35rem 0;
  color: var(--violet-lt);
  font-size: .78rem;
  text-decoration: none;
}
.taid-main-bottom-grid .mod-login__options a:hover {
  color: var(--cyan-lt);
}

/* ─── Grid modules: Smart Search ────────────────────────────── */
.taid-main-bottom-grid .mod-finder label.finder {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .5rem;
}
.taid-main-bottom-grid .mod-finder .form-control {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--text);
  font-size: .85rem;
  width: 100%;
}
.taid-main-bottom-grid .mod-finder .form-control::placeholder {
  color: var(--muted);
}

/* ─── Popular Tags — cloud layout (span.tag elements) ──────── */
.tagscloud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .5rem;
}
.tagscloud .tag {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
}
.tagscloud .tag-name {
  font-family: var(--font-display);
  color: var(--text-soft) !important;
  text-decoration: none !important;
  transition: color .2s ease;
  /* Override Joomla's inline font-size with a controlled scale */
}
.tagscloud .tag-name:hover {
  color: var(--violet-lt) !important;
}
/* Tame Joomla's inline font sizes — cap the range */
.tagscloud .tag-name[style*="font-size: 2em"]   { font-size: 1.3em !important; }
.tagscloud .tag-name[style*="font-size: 1.8em"]  { font-size: 1.15em !important; }
.tagscloud .tag-name[style*="font-size: 1.6em"]  { font-size: 1.05em !important; }
.tagscloud .tag-name[style*="font-size: 1.4em"]  { font-size: .95em !important; }
.tagscloud .tag-name[style*="font-size: 1.2em"]  { font-size: .88em !important; }
.tagscloud .tag-name[style*="font-size: 1em"]    { font-size: .82em !important; }
/* Count badge */
.tagscloud .tag-count {
  font-family: var(--font-mono);
  font-size: .6rem !important;
  padding: .1rem .4rem !important;
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  color: var(--muted) !important;
  vertical-align: middle;
  line-height: 1.2;
}

/* ─── Grid modules: Popular Tags ────────────────────────────── */
.taid-main-bottom-grid .tagspopular ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.taid-main-bottom-grid .tagspopular li a {
  display: inline-block;
  padding: .25rem .65rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text-soft);
  text-decoration: none;
  transition: all .2s ease;
}
.taid-main-bottom-grid .tagspopular li a:hover {
  background: var(--violet-dim);
  border-color: var(--violet);
  color: var(--violet-lt);
}

/* ─── Grid modules: Menu (vertical) — generic unstyled menus only ───── */
.taid-main-bottom-grid .mod-menu.mod-list:not([class*="taid-menu-"]):not(.taid-demonav) {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.taid-main-bottom-grid .mod-menu.mod-list:not([class*="taid-menu-"]):not(.taid-demonav) .nav-item a {
  display: block;
  padding: .4rem 0;
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.taid-main-bottom-grid .mod-menu.mod-list:not([class*="taid-menu-"]):not(.taid-demonav) .nav-item:last-child a {
  border-bottom: none;
}
.taid-main-bottom-grid .mod-menu.mod-list:not([class*="taid-menu-"]):not(.taid-demonav) .nav-item a:hover {
  color: var(--violet-lt);
}
.taid-main-bottom-grid .mod-menu:not([class*="taid-menu-"]):not(.taid-demonav) .mod-menu__sub {
  padding-left: 1rem;
  margin: 0;
}
.taid-main-bottom-grid .mod-menu:not([class*="taid-menu-"]):not(.taid-demonav) .mod-menu__sub li a {
  font-size: .78rem;
  color: var(--muted);
}
.taid-main-bottom-grid .mod-menu:not([class*="taid-menu-"]) .mod-menu__toggle-sub {
  display: none;
}
/* Styled menu wrappers in grid: the grid card IS the container */
.taid-main-bottom-grid > .moduletable[class*="taid-menu-"] {
  padding: 1.5rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Strip the menu's own wrapper styles when inside a grid card */
.taid-main-bottom-grid > .moduletable[class*="taid-menu-"] > [class*="taid-menu-"] {
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
}
/* Horizontal styles span full width */
.taid-main-bottom-grid > .moduletable.taid-menu-pills,
.taid-main-bottom-grid > .moduletable.taid-menu-underline,
.taid-main-bottom-grid > .moduletable.taid-menu-tags {
  grid-column: 1 / -1;
}
/* Grouped + cards + bordered + sidebar + dots + grid are vertical — 1 col each */
/* Menu style label (module title) — replaces ::before in grid context */
.taid-main-bottom-grid > .moduletable[class*="taid-menu-"] > h3 {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--violet-lt);
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
/* Hide ::before label when module title is showing */
.taid-main-bottom-grid > .moduletable[class*="taid-menu-"] [class*="taid-menu-"]::before {
  display: none;
}
/* Dots menu in grid — allow dot markers to be visible */
.taid-main-bottom-grid > .moduletable.taid-menu-dots {
  overflow: visible;
}
/* Grouped menu in grid — constrain height, add scrollbar */
.taid-main-bottom-grid > .moduletable.taid-menu-grouped {
  max-height: 420px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.taid-main-bottom-grid > .moduletable.taid-menu-grouped > ul {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,.3) transparent;
}

/* ─── Grid modules: Breadcrumbs ──────────────────────────────── */
.taid-main-bottom-grid .mod-breadcrumbs {
  background: transparent;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
}
.taid-main-bottom-grid .mod-breadcrumbs .mod-breadcrumbs__here {
  font-size: .72rem;
  color: var(--muted);
  float: none;
  margin-right: .25rem;
}
.taid-main-bottom-grid .mod-breadcrumbs .breadcrumb-item {
  font-size: .78rem;
  color: var(--muted);
}
.taid-main-bottom-grid .mod-breadcrumbs .breadcrumb-item a {
  color: var(--violet-lt);
  text-decoration: none;
}
.taid-main-bottom-grid .mod-breadcrumbs .breadcrumb-item a:hover {
  color: var(--cyan-lt);
}
.taid-main-bottom-grid .mod-breadcrumbs .breadcrumb-item.active {
  color: var(--text-soft);
}
.taid-main-bottom-grid .mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  color: var(--muted2);
  content: "/";
  padding-right: .35rem;
}

/* ─── Grid modules: Banners ──────────────────────────────────── */
.taid-main-bottom-grid .mod-banners .banneritem {
  margin-bottom: .75rem;
}
.taid-main-bottom-grid .mod-banners .banneritem:last-child {
  margin-bottom: 0;
}

/* ─── Custom Fields — enhanced styling for demo page ─────────── */
/* Color field swatch */
.taid-component-panel .field-entry.demo-color .field-value {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
/* Editor field rich content */
.taid-component-panel .field-entry.demo-editor .field-value p {
  margin: 0;
}
.taid-component-panel .field-entry.demo-editor .field-value a {
  color: var(--violet-lt);
}
/* Media field image */
.taid-component-panel .field-entry.demo-media .field-value img {
  max-width: 80px;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg2);
}
/* URL field link */
.taid-component-panel .field-entry .field-value a {
  color: var(--violet-lt);
  text-decoration: none;
}
.taid-component-panel .field-entry .field-value a:hover {
  color: var(--cyan-lt);
  text-decoration: underline;
}

/* ─── Custom Fields Demo Page ────────────────────────────────── */
/* Shared components */
.taid-cf-demo-section { margin-bottom: 2.5rem; }
.taid-cf-note {
  background: rgba(244, 63, 94, .06);
  border: 1px solid rgba(244, 63, 94, .2);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  font-size: .88rem;
  color: var(--text-soft);
  margin-bottom: 1.75rem;
  line-height: 1.6;
}
.taid-cf-red { color: var(--rose); font-weight: 600; }
.taid-cf-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .52rem;
  color: var(--rose);
  padding: .12rem .4rem;
  border: 1px solid rgba(244, 63, 94, .35);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .06em;
  vertical-align: middle;
  line-height: 1;
}
.taid-cf-highlight {
  border-left: 3px solid var(--rose) !important;
  padding-left: .75rem !important;
  cursor: help;
}
.taid-cf-badge[title] { cursor: help; }
.taid-cf-pill {
  display: inline-block;
  padding: .22rem .6rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .72rem;
  color: var(--text-soft);
  margin-right: .25rem;
}

/* ── Mock Article Card ───────────────────────────────────────── */
.taid-cf-mock-article {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2rem;
  overflow: hidden;
}
.taid-cf-mock-cat {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--violet-lt);
  background: var(--violet-dim);
  padding: .2rem .6rem;
  border-radius: 999px;
  margin-bottom: .75rem;
}
.taid-cf-mock-article h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 1rem;
  line-height: 1.25;
}
.taid-cf-mock-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.taid-cf-meta-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--bg2);
  padding: .35rem .7rem;
  border-radius: 6px;
  font-size: .78rem;
  color: var(--text-soft);
}
.taid-cf-meta-item.taid-cf-highlight {
  border-left: 3px solid var(--rose) !important;
}
.taid-cf-mock-body {
  color: var(--text-soft);
  font-size: .92rem;
  line-height: 1.7;
}
.taid-cf-mock-body p { margin: 0 0 1rem; }
.taid-cf-mock-body h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 1.5rem 0 .75rem;
}
.taid-cf-mock-body ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.taid-cf-mock-body li { margin-bottom: .4rem; color: var(--text-soft); }
.taid-cf-mock-footer {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.taid-cf-mock-field {
  padding: .75rem 1rem;
  background: var(--bg2);
  border-radius: 6px;
}
.taid-cf-mock-field p { margin: .35rem 0 0; font-size: .88rem; color: var(--text-soft); line-height: 1.55; }
.taid-cf-mock-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .25rem;
}

/* ── Mock Registration Form ──────────────────────────────────── */
.taid-cf-mock-form {
  max-width: 540px;
}
.taid-cf-form-section { margin-bottom: 1.5rem; }
.taid-cf-mock-form h3 {
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0 0 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}
.taid-cf-form-group {
  margin-bottom: .85rem;
}
.taid-cf-form-group label {
  display: block;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-soft);
  margin-bottom: .35rem;
}
.taid-cf-form-group input[type="text"],
.taid-cf-form-group input[type="email"],
.taid-cf-form-group input[type="password"],
.taid-cf-form-group select,
.taid-cf-form-group textarea {
  width: 100%;
  padding: .55rem .75rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: .85rem;
  font-family: var(--font-body);
  box-sizing: border-box;
}
.taid-cf-form-group input::placeholder { color: var(--muted); }
.taid-cf-form-group textarea { resize: vertical; line-height: 1.55; }
.taid-cf-form-group select { appearance: none; cursor: default; }
.taid-cf-form-group.taid-cf-highlight {
  border-left: 3px solid var(--rose);
  padding-left: .75rem;
  border-radius: 0;
}
.taid-cf-checkboxes {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding-top: .15rem;
}
.taid-cf-checkboxes label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 400;
  font-size: .82rem;
  color: var(--text-soft);
  margin-bottom: 0;
}
.taid-cf-checkboxes input[type="checkbox"] {
  width: auto;
  accent-color: var(--violet);
  margin: 0;
  padding: 0;
}
.taid-cf-submit {
  margin-top: 1.25rem;
  padding: .65rem 2rem;
  background: var(--violet);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .02em;
  cursor: not-allowed;
  opacity: .6;
}

/* ── Field Types Reference Grid ──────────────────────────────── */
.taid-cf-ref-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
}
.taid-cf-ref-item {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: .5rem .75rem;
  align-items: baseline;
  padding: .65rem .85rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--violet);
  border-radius: 6px;
}
.taid-cf-ref-type {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--font-mono);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--violet-lt);
  background: var(--violet-dim);
  padding: .2rem .5rem;
  border-radius: 4px;
  text-align: center;
  white-space: nowrap;
}
.taid-cf-ref-label {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.taid-cf-ref-value {
  grid-column: 2;
  font-size: .88rem;
  color: var(--text-soft);
  line-height: 1.5;
}
.taid-cf-ref-value a { color: var(--violet-lt); text-decoration: none; }
.taid-cf-ref-value a:hover { color: var(--cyan-lt); }
.taid-cf-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: .25rem;
  border: 1px solid var(--border);
}
.taid-cf-media-thumb {
  max-height: 32px;
  width: auto;
  border-radius: 3px;
  vertical-align: middle;
}
.taid-cf-disabled {
  color: var(--muted);
  font-style: italic;
  font-size: .82rem;
}

/* ── Registration Form — Custom Fields Highlight ─────────────── */
/* Target the Profile Information fieldset (contains com_fields inputs) */
.com-users-registration__form fieldset:has([id*="com_fields"]) {
  border-left: 3px solid var(--rose);
  padding-left: 1.25rem;
  margin-left: 0;
  position: relative;
}
.com-users-registration__form fieldset:has([id*="com_fields"]) > legend {
  color: var(--rose);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}
.com-users-registration__form fieldset:has([id*="com_fields"]) > legend::after {
  content: "CUSTOM FIELDS";
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .52rem;
  color: var(--rose);
  padding: .12rem .4rem;
  border: 1px solid rgba(244, 63, 94, .35);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .06em;
  vertical-align: middle;
  margin-left: .5rem;
  line-height: 1;
}
/* Each custom field control group gets a subtle red accent on hover */
.com-users-registration__form fieldset:has([id*="com_fields"]) > .control-group {
  border-left: 2px solid transparent;
  padding-left: .65rem;
  transition: border-color .2s ease;
}
.com-users-registration__form fieldset:has([id*="com_fields"]) > .control-group:hover {
  border-left-color: var(--rose);
}
/* Custom field labels get a badge */
.com-users-registration__form [id*="com_fields"][id$="-lbl"]::after {
  content: "CF";
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .48rem;
  color: var(--rose);
  padding: .1rem .3rem;
  border: 1px solid rgba(244, 63, 94, .35);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .06em;
  vertical-align: middle;
  margin-left: .4rem;
  line-height: 1;
}
/* Description text under custom fields */
.com-users-registration__form [id*="com_fields"][id$="-desc"] .form-text {
  color: var(--muted);
  font-size: .75rem;
}

/* ── CF Demo responsive ──────────────────────────────────────── */
@media (max-width: 640px) {
  .taid-cf-mock-article { padding: 1.25rem; }
  .taid-cf-mock-article h2 { font-size: 1.2rem; }
  .taid-cf-mock-meta { gap: .35rem; }
  .taid-cf-meta-item { font-size: .72rem; padding: .25rem .5rem; }
  .taid-cf-ref-item { grid-template-columns: 1fr; gap: .25rem; }
  .taid-cf-ref-type { grid-column: 1; grid-row: auto; justify-self: start; }
  .taid-cf-ref-label { grid-column: 1; }
  .taid-cf-ref-value { grid-column: 1; }
}

/* ─── SDJ5 Overview — demo page index accordion ───────────── */
.taid-sdj5-index {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.taid-sdj5-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .2s;
}
.taid-sdj5-item[open] {
  border-color: var(--border-md);
}
.taid-sdj5-item summary {
  padding: .75rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--text-soft);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: color .2s, background .2s;
}
.taid-sdj5-item summary:hover {
  color: var(--text);
  background: rgba(255,255,255,.02);
}
.taid-sdj5-item summary::before {
  content: "▸";
  font-size: .7rem;
  color: var(--violet-lt);
  transition: transform .2s;
}
.taid-sdj5-item[open] summary::before {
  transform: rotate(90deg);
}
.taid-sdj5-item summary::-webkit-details-marker { display: none; }
.taid-sdj5-item p {
  padding: .35rem 1.25rem .5rem;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.6;
}
.taid-sdj5-link {
  display: inline-block;
  margin: 0 1.25rem .85rem;
  padding: .4rem 1rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  color: var(--violet-lt) !important;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.3);
  border-radius: 6px;
  text-decoration: none !important;
  letter-spacing: .04em;
  transition: background .2s, border-color .2s, color .2s;
}
.taid-sdj5-link:hover {
  background: rgba(124,58,237,.2);
  border-color: rgba(124,58,237,.5);
  color: #fff !important;
}

/* ─── Demo Navigation Bar ──────────────────────────────────── */
/* Horizontal button row shown on all demo/feature-test pages */
.taid-demonav {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .75rem 0;
  margin-bottom: 1rem;
}
.taid-demonav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Flatten nested submenu — items are children for URL routing but render as flat pills */
.taid-demonav .nav-item.parent { display: contents !important; }
.taid-demonav .mod-menu__toggle-sub { display: none !important; }
.taid-demonav .mod-menu__sub.list-unstyled { display: contents !important; }
.taid-demonav li a {
  display: inline-block;
  padding: .3rem .75rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.taid-demonav li a:hover {
  background: rgba(124,58,237,.1);
  border-color: var(--violet);
  color: var(--violet-lt);
}
/* Active page — filled violet (current only, not parent branch) */
.taid-demonav li.current > a {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}
@media (max-width: 640px) {
  .taid-demonav { gap: .3rem; padding: .5rem 0; }
  .taid-demonav li a { font-size: .6rem; padding: .25rem .5rem; }
}

/* ── Bottom demonav — end-of-article navigation ── */
.taid-main-bottom-grid > .taid-demonav-bottom,
.taid-main-bottom-grid > .moduletable.taid-demonav-bottom {
  grid-column: 1 / -1;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: none;
  border-radius: 0;
  margin-bottom: 0;
  padding: 1.5rem 0 .5rem;
}
/* Label above bottom pills */
.taid-main-bottom-grid > .taid-demonav-bottom::before,
.taid-main-bottom-grid > .moduletable.taid-demonav-bottom::before {
  content: "Continue exploring";
  display: block;
  width: 100%;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .6rem;
}
.taid-main-bottom-grid > .moduletable.taid-demonav-bottom > h3 { display: none; }

/* Override ft-bar-wrap styles when demonav is inside main-top position */
.taid-ft-bar-wrap:has(.taid-demonav) {
  background: transparent;
  border-top: none;
  border-bottom: none;
  margin-bottom: .5rem;
}
.taid-ft-bar-wrap .taid-demonav.mod-menu.nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .75rem 0;
  margin-bottom: 0;
  border-bottom: none;
}
.taid-ft-bar-wrap .taid-demonav.mod-menu.nav .nav-item {
  display: list-item;
  align-items: initial;
}
/* Override ft-bar-wrap nav-item styles that conflict with pill layout */
.taid-ft-bar-wrap .taid-demonav.mod-menu.nav .nav-item > a {
  display: inline-block;
  padding: .3rem .75rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  line-height: normal;
}
.taid-ft-bar-wrap .taid-demonav.mod-menu.nav .nav-item > a:hover {
  background: rgba(124,58,237,.1);
  border-color: var(--violet);
  color: var(--violet-lt);
}
.taid-ft-bar-wrap .taid-demonav.mod-menu.nav .nav-item.current > a {
  background: var(--violet) !important;
  border-color: var(--violet) !important;
  color: #fff !important;
}

/* ─── Embedded article list (inside article body) ────────── */
.com-content-article__body .mod-articlescategory {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}
.com-content-article__body .mod-articlescategory > li {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  transition: border-color .2s;
}
.com-content-article__body .mod-articlescategory > li:hover {
  border-color: var(--violet-dim);
}
.com-content-article__body .mod-articlescategory .mod-articles-category-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--violet-lt) !important;
  text-decoration: none;
  display: block;
  margin-bottom: .5rem;
}
.com-content-article__body .mod-articlescategory .mod-articles-category-title:hover {
  color: var(--text) !important;
}
.com-content-article__body .mod-articlescategory .mod-articles-category-introtext {
  font-size: .85rem;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.6;
}

/* ─── Colour Swatches (colours demo page) ────────────────── */
.taid-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.taid-swatch {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 6px;
  border: 1px solid var(--border-md);
  display: flex;
  align-items: flex-end;
  padding: .4rem;
  position: relative;
}
.taid-swatch--wide { width: 10rem; }
.taid-swatch--light .taid-swatch-label { color: #1a1a2e; }
.taid-swatch-label {
  font-family: var(--font-mono);
  font-size: .55rem;
  line-height: 1.3;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
@media (max-width: 640px) {
  .taid-swatch { width: 4.5rem; height: 4.5rem; }
  .taid-swatch--wide { width: 8rem; }
  .taid-swatch-label { font-size: .48rem; }
}

/* ─── Demo Hub Landing Page ───────────────────────────────── */
/* Hide article meta on the landing page */
.com-content-article:has(.taid-landing-hero) > .article-info {
  display: none;
}
/* Hero section */
.taid-landing-hero {
  text-align: center;
  padding: 3rem 0 1rem;
  position: relative;
}
.taid-landing-hero::before {
  content: "";
  position: absolute;
  inset: -5rem -4rem 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(124,58,237,.12) 0%, transparent 70%),
              radial-gradient(ellipse 50% 40% at 30% 20%, rgba(6,182,212,.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.taid-landing-hero > * { position: relative; z-index: 1; }
.taid-landing-tagline {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--violet-lt);
  margin-bottom: .75rem;
}
.taid-landing-title {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 1rem;
  background: linear-gradient(135deg, #fff 20%, var(--violet-lt) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.taid-landing-subtitle {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 36rem;
  margin: 0 auto 2rem;
}
/* Stats bar */
.taid-landing-stats {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  padding: 1.5rem 0;
  margin: 0 0 2rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.taid-landing-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}
.taid-landing-stat-number {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--violet-lt);
  letter-spacing: -.02em;
}
.taid-landing-stat-label {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Centered download CTA */
.taid-demo-hub-cta {
  text-align: center;
  margin: 2rem 0 1.5rem;
}
.taid-btn-gradient {
  display: inline-block;
  background: linear-gradient(135deg, var(--violet) 0%, var(--cyan) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  padding: .9rem 2.25rem;
  border-radius: 8px;
  text-decoration: none;
  letter-spacing: .03em;
  box-shadow: 0 0 28px rgba(124,58,237,.4), 0 2px 8px rgba(0,0,0,.4);
  transition: box-shadow .2s, transform .15s;
}
.taid-btn-gradient:hover {
  box-shadow: 0 0 36px rgba(124,58,237,.55), 0 4px 14px rgba(0,0,0,.5);
  transform: translateY(-1px);
  color: #fff;
}
/* Beat .taid-component-panel a specificity */
.taid-component-panel a.taid-btn-gradient {
  color: #fff;
  text-decoration: none;
}
.taid-component-panel a.taid-btn-gradient:hover {
  color: #fff;
  text-decoration: none;
}
.taid-demo-hub-download-meta {
  margin: .65rem 0 0;
  font-size: .78rem;
  color: var(--muted);
  font-family: var(--font-display);
  letter-spacing: .02em;
}
.taid-demo-hub-cta-sub {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-top: .85rem;
}
/* Description */
.taid-demo-hub-lead {
  font-size: .95rem;
  line-height: 1.75;
  color: var(--text-soft);
  margin-bottom: 1.5rem;
}
/* Demo login box */
.taid-demo-login {
  background: rgba(124,58,237,.08);
  border: 1px solid rgba(124,58,237,.25);
  border-left: 3px solid var(--violet);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1.75rem 0;
  font-family: var(--font-display);
  font-size: .9rem;
  line-height: 1.7;
}
.taid-demo-login-label { color: var(--violet-lt); }
.taid-demo-login code {
  background: rgba(124,58,237,.12);
  padding: .15rem .4rem;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--text);
}
.taid-demo-login-note { color: var(--muted); }
/* Version picker cards */
.taid-version-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}
.taid-version-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, box-shadow .2s;
}
.taid-version-card--active {
  border-color: rgba(124,58,237,.45);
  box-shadow: 0 0 30px rgba(124,58,237,.08), inset 0 1px 0 rgba(255,255,255,.04);
}
.taid-version-card--active:hover {
  border-color: var(--violet);
  box-shadow: 0 0 40px rgba(124,58,237,.14);
}
.taid-version-card--soon {
  opacity: .55;
}
.taid-version-badge {
  display: inline-block;
  padding: .2rem .65rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--violet);
  border-radius: 4px;
  margin-bottom: 1rem;
  width: fit-content;
}
.taid-version-badge--soon {
  background: var(--muted2);
  color: var(--text-soft);
}
.taid-version-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .75rem;
}
.taid-version-desc {
  font-size: .88rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.taid-version-features {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
  flex: 1;
}
.taid-version-features li {
  padding: .3rem 0;
  font-size: .82rem;
  color: var(--muted);
  padding-left: 1.2rem;
  position: relative;
}
.taid-version-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--violet-lt);
  font-weight: 600;
}
.taid-version-card--soon .taid-version-features li::before {
  content: "·";
  color: var(--muted2);
}
.taid-version-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.taid-btn--disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 640px) {
  .taid-version-grid { grid-template-columns: 1fr; }
}

/* Hub cards grid */
.taid-demo-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}
.taid-demo-hub-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  transition: border-color .2s, box-shadow .2s;
}
.taid-demo-hub-card:hover {
  border-color: var(--violet);
  box-shadow: 0 0 20px rgba(124,58,237,.12);
}
.taid-demo-hub-card h3 {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 600;
  color: var(--violet-lt);
  margin: 0 0 .5rem;
}
.taid-demo-hub-card p {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0;
}
/* Developer/Claude Code card */
.taid-demo-dev-card {
  border: 1px solid rgba(6,182,212,.25);
  border-left: 3px solid var(--cyan);
  border-radius: 8px;
  background: rgba(6,182,212,.05);
  padding: 1.5rem 1.6rem;
  margin: 2.5rem 0;
}
.taid-demo-dev-eyebrow {
  font-family: var(--font-display);
  font-size: .6rem;
  color: var(--muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.taid-demo-dev-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .65rem;
}
.taid-demo-dev-text {
  font-size: .875rem;
  line-height: 1.75;
  color: var(--text-soft);
  margin: 0 0 1rem;
}
.taid-demo-dev-highlight { color: var(--cyan-lt); }
.taid-demo-dev-btn {
  display: inline-block;
  background: rgba(6,182,212,.12);
  border: 1px solid rgba(6,182,212,.4);
  color: var(--cyan-lt) !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  padding: .55rem 1.2rem;
  border-radius: 6px;
  text-decoration: none !important;
  letter-spacing: .03em;
  transition: background .15s;
}
.taid-demo-dev-btn:hover {
  background: rgba(6,182,212,.2);
  color: var(--cyan-lt) !important;
  text-decoration: none !important;
}
/* Responsive */
/* Section titles inside demo hub */
.taid-demo-hub-section-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 2.5rem 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
  letter-spacing: .02em;
}
/* Feature grid (What's included) */
.taid-demo-hub-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 1.25rem 0 2rem;
}
.taid-demo-hub-feature {
  padding: 1rem 1.15rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.taid-demo-hub-feature h3 {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  color: var(--violet-lt);
  margin: 0 0 .4rem;
}
.taid-demo-hub-feature p {
  font-size: .8rem;
  line-height: 1.65;
  color: var(--text-soft);
  margin: 0;
}
/* Clickable hub cards */
a.taid-demo-hub-card {
  text-decoration: none;
  color: inherit;
  display: block;
}
a.taid-demo-hub-card:hover {
  border-color: var(--violet);
  box-shadow: 0 0 20px rgba(124,58,237,.12);
}
a.taid-demo-hub-card:hover h3 { color: var(--cyan-lt); }
/* Responsive */
@media (max-width: 992px) {
  .taid-demo-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .taid-landing-title { font-size: 2rem; }
  .taid-landing-subtitle { font-size: .9rem; }
  .taid-landing-stats { gap: 1.5rem; flex-wrap: wrap; }
  .taid-landing-stat-number { font-size: 1.2rem; }
}
@media (max-width: 640px) {
  .taid-demo-hub-grid { grid-template-columns: 1fr; }
  .taid-demo-hub-features { grid-template-columns: 1fr; }
  .taid-demo-hub-lead { font-size: .85rem; }
  .taid-btn-gradient { font-size: .88rem; padding: .75rem 1.5rem; }
  .taid-demo-dev-card { padding: 1.25rem; }
  .taid-demo-dev-title { font-size: 1rem; }
  .taid-landing-hero { padding: 2rem 0 .5rem; }
  .taid-landing-title { font-size: 1.75rem; }
  .taid-landing-stats { gap: 1rem; padding: 1rem 0; }
  .taid-landing-stat-number { font-size: 1rem; }
  .taid-landing-stat-label { font-size: .52rem; }
}

/* ─── Try It Live page ───────────────────────────────────── */
.taid-tryit-page {
  max-width: 52rem;
  margin: 0 auto;
}
.taid-tryit-page .taid-demo-login {
  max-width: 26rem;
  margin: 1.75rem auto;
}
.taid-tryit-login-area {
  max-width: 26rem;
  margin: 0 auto 2rem;
}
.taid-tryit-login-area .mod-login {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.75rem 1.5rem 1.5rem;
}
.taid-tryit-login-area .mod-login .form-group { margin-bottom: .75rem; }
.taid-tryit-login-area .mod-login .form-group:last-child { margin-bottom: 0; }
.taid-tryit-login-area .mod-login .input-group { display: flex; }
.taid-tryit-login-area .mod-login .form-control {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--text);
  font-size: .88rem;
}
.taid-tryit-login-area .mod-login .form-control::placeholder { color: var(--muted); }
.taid-tryit-login-area .mod-login .input-group-text {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--muted);
}
.taid-tryit-login-area .mod-login .input-password-toggle {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--muted);
  font-size: .82rem;
}
.taid-tryit-login-area .mod-login .form-check-label {
  color: var(--text-soft);
  font-size: .85rem;
}
.taid-tryit-login-area .mod-login .btn-primary {
  font-weight: 600;
  margin-top: .25rem;
}
.taid-tryit-login-area .mod-login__options {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
  list-style: none;
  padding-left: 0;
}
.taid-tryit-login-area .mod-login__options li {
  padding: .15rem 0;
  font-size: .82rem;
}
.taid-tryit-login-area .mod-login__options a {
  color: var(--muted);
  text-decoration: none;
  font-size: .82rem;
  transition: color .15s;
}
.taid-tryit-login-area .mod-login__options a:hover { color: var(--violet-lt); }

/* Logged-in action panel */
.taid-tryit-panel {
  margin: 2rem 0 1rem;
}
.taid-tryit-panel-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1.25rem;
}
.taid-tryit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.taid-tryit-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.taid-tryit-card:hover {
  border-color: var(--violet);
  box-shadow: 0 0 16px rgba(124,58,237,.1);
}
.taid-tryit-card-icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: .2rem;
}
.taid-tryit-card strong {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
}
.taid-tryit-card:hover strong { color: var(--violet-lt); }
.taid-tryit-card span:last-child {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.5;
}
@media (max-width: 768px) {
  .taid-tryit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .taid-tryit-grid { grid-template-columns: 1fr; }
  .taid-tryit-login-area { margin: 1.5rem auto; }
}

/* ─── Position Map (Modules & Positions article) ─────────────── */
.taid-posmap {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin: 2rem 0;
  font-family: var(--font-mono);
  font-size: .82rem;
  overflow: hidden;
}
.taid-posmap-row {
  display: flex;
  gap: .5rem;
  margin-bottom: .5rem;
}
.taid-posmap-row:last-child { margin-bottom: 0; }
.taid-posmap-slot {
  flex: 1;
  padding: .6rem .5rem;
  background: var(--bg2);
  border: 1px dashed var(--border);
  border-radius: 4px;
  text-align: center;
  color: var(--muted);
  letter-spacing: .04em;
  transition: border-color .15s, color .15s, background .15s;
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  flex-direction: column;
  scroll-margin-top: calc(var(--sticky-offset, 112px) + 1.5rem);
}
.taid-posmap-slot:hover {
  border-color: var(--violet);
  color: var(--violet-lt);
  background: rgba(124,58,237,.06);
}
a.taid-posmap-slot { color: var(--muted); }
a.taid-posmap-slot:hover .taid-posmap-label { color: var(--violet-lt); }
.taid-posmap-slot--nav, a.taid-posmap-slot--nav { color: var(--cyan-lt); border-color: rgba(6,182,212,.3); }
.taid-posmap-slot--content, a.taid-posmap-slot--content { color: var(--text-soft); border-color: rgba(255,255,255,.15); }
.taid-posmap-slot--ad, a.taid-posmap-slot--ad { color: var(--amber); border-color: rgba(252,211,77,.25); border-style: dotted; }
.taid-posmap-slot--commerce, a.taid-posmap-slot--commerce { color: var(--violet-lt); border-color: rgba(124,58,237,.3); }
.taid-posmap-slot--footer, a.taid-posmap-slot--footer { color: var(--muted); border-color: rgba(255,255,255,.08); }
.taid-posmap-slot--wide { flex: 1 1 100%; }
.taid-posmap-slot--sidebar { flex: 0 0 25%; max-width: 25%; }
.taid-posmap-slot--main { flex: 1; }
.taid-posmap-slot--third { flex: 0 0 calc(33.333% - .33rem); }
.taid-posmap-row--content { min-height: 5rem; }
.taid-posmap-label {
  display: block;
  font-size: .7rem;
  color: var(--muted);
  margin-top: .15rem;
  font-family: var(--font-body);
  letter-spacing: normal;
}
.taid-posmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .65rem;
}
.taid-posmap-legend-item {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.taid-posmap-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px dashed;
}
.taid-posmap-legend-swatch--nav { border-color: var(--cyan-lt); background: rgba(6,182,212,.1); }
.taid-posmap-legend-swatch--content { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.05); }
.taid-posmap-legend-swatch--ad { border-color: var(--amber); background: rgba(252,211,77,.08); border-style: dotted; }
.taid-posmap-legend-swatch--commerce { border-color: var(--violet-lt); background: rgba(124,58,237,.08); }
.taid-posmap-legend-swatch--footer { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
/* Reference cards — clickable anchors */
.taid-posmap-ref-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  scroll-margin-top: calc(var(--sticky-offset, 112px) + 1.5rem);
  transition: border-color .2s, box-shadow .2s;
}
.taid-posmap-ref-card:hover {
  border-color: var(--violet);
}
.taid-posmap-ref-card:target {
  border-color: var(--violet);
  box-shadow: 0 0 20px rgba(124,58,237,.15);
}
.taid-posmap-ref-card h3 { color: var(--violet-lt); }
.taid-posmap-ref-card p { color: var(--text-soft); }
@media (max-width: 640px) {
  .taid-posmap { font-size: .6rem; padding: .75rem; }
  .taid-posmap-row { flex-wrap: wrap; }
  .taid-posmap-slot--sidebar,
  .taid-posmap-slot--third { flex: 1 1 100%; max-width: 100%; }
  .taid-posmap-row--content { flex-direction: column; }
}

/* Hide empty component panel (e.g. featured view with no articles assigned) */
/* :not(:has(*)) matches elements with no child elements (whitespace text nodes don't count) */
.taid-component-panel:has(.blog-featured:not(:has(*))) {
  display: none;
}
/* When component is empty, sidebar goes full-width grid */
.taid-content-wrap--sidebar:has(.blog-featured:not(:has(*))) {
  display: block;
}
.taid-content-wrap--sidebar:has(.blog-featured:not(:has(*))) .taid-content-primary {
  display: none;
}
.taid-content-wrap--sidebar:has(.blog-featured:not(:has(*))) .taid-sidebar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* ─── Feature Test Menu — main-top (grouped wrap layout) ─────── */
/* Wrapper: edge-to-edge stripe */
.taid-ft-bar-wrap {
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}

/* UL — flex wrap so items flow into rows */
.taid-ft-bar-wrap .mod-menu.nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Every li */
.taid-ft-bar-wrap .mod-menu.nav .nav-item {
  display: flex;
  align-items: stretch;
}

/* Section heading li — full-width, uniform dark surface */
.taid-ft-bar-wrap .mod-menu.nav .nav-item:has(> .mod-menu__heading) {
  flex-basis: 100%;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.taid-ft-bar-wrap .mod-menu.nav .nav-item:first-child:has(> .mod-menu__heading) {
  border-top: none;
}

/* Section heading span */
.taid-ft-bar-wrap .mod-menu.nav .mod-menu__heading.nav-header {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--violet-lt);
  padding: .38rem .9rem;
  pointer-events: none;
  opacity: .85;
}
.taid-ft-bar-wrap .mod-menu.nav .mod-menu__heading.nav-header::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  background: var(--violet);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Link items — wrap within their section row */
.taid-ft-bar-wrap .mod-menu.nav .nav-item > a {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: .82rem;
  padding: .5rem .9rem;
  color: var(--text-soft);
  text-decoration: none;
  white-space: nowrap;
  border-right: 1px solid var(--border);
  border-bottom: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
  line-height: 1;
}
.taid-ft-bar-wrap .mod-menu.nav .nav-item > a:hover {
  color: var(--text);
  background: rgba(255,255,255,.04);
  border-bottom-color: rgba(124,58,237,.4);
}
.taid-ft-bar-wrap .mod-menu.nav:not(.taid-demonav) .nav-item.current > a,
.taid-ft-bar-wrap .mod-menu.nav:not(.taid-demonav) .nav-item.active > a {
  color: var(--violet-lt) !important;
  background: rgba(124,58,237,.1) !important;
  border-bottom-color: var(--violet) !important;
  font-weight: 600;
}

/* Separator item — thin vertical rule inline with other links */
.taid-ft-bar-wrap .mod-menu.nav .nav-item.divider {
  width: 1px;
  background: var(--border-strong);
  margin: .35rem 0;
  align-self: stretch;
  flex-shrink: 0;
}
.taid-ft-bar-wrap .mod-menu.nav .nav-item.divider .mod-menu__separator { display: none; }

/* ─── Newsflash article body inside ft-bar (modules-demo / signal-dark page) ─── */
.taid-ft-bar-wrap:has(.mod-articlesnews) {
  margin-left: 0;
  margin-right: 0;
  border: none;
  background: transparent;
}
.taid-ft-bar-wrap .mod-articlesnews {
  background: transparent;
  border: none;
  padding: 2rem 0 1.5rem;
}
.taid-ft-bar-wrap .mod-articlesnews__item {
  border-bottom: none;
  padding: 0 0 2rem;
}
.taid-ft-bar-wrap .mod-articlesnews__item:last-child { padding-bottom: 0; }

/* Paragraphs */
.taid-ft-bar-wrap .mod-articlesnews__item > p {
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.8;
  color: var(--text-soft);
  max-width: 72ch;
  margin-bottom: 1rem;
}

/* Section headings (h2) */
.taid-ft-bar-wrap .mod-articlesnews__item h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .02em;
  margin: 2.25rem 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.taid-ft-bar-wrap .mod-articlesnews__item h2:first-child { margin-top: 0; }

/* Lists */
.taid-ft-bar-wrap .mod-articlesnews__item ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.taid-ft-bar-wrap .mod-articlesnews__item ul li {
  position: relative;
  padding-left: 1.1rem;
  font-family: var(--font-body);
  font-size: .875rem;
  line-height: 1.7;
  color: var(--text-soft);
}
.taid-ft-bar-wrap .mod-articlesnews__item ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--violet);
  opacity: .6;
}
.taid-ft-bar-wrap .mod-articlesnews__item ul li a {
  color: var(--cyan-lt);
  text-decoration: none;
  font-weight: 500;
}
.taid-ft-bar-wrap .mod-articlesnews__item ul li a:hover {
  color: var(--text);
}

/* Horizontal rules */
.taid-ft-bar-wrap .mod-articlesnews__item hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

/* Code blocks (pre > code) */
.taid-ft-bar-wrap .mod-articlesnews__item pre {
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 1rem 0 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,.3) transparent;
}
.taid-ft-bar-wrap .mod-articlesnews__item pre code {
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.65;
  color: var(--emerald);
  background: transparent;
  padding: 0;
}

/* Inline code */
.taid-ft-bar-wrap .mod-articlesnews__item code {
  font-family: var(--font-mono);
  font-size: .82em;
  color: var(--cyan-lt);
  background: rgba(6,182,212,.08);
  padding: .15em .4em;
  border-radius: 3px;
}

/* ─── Feature links grid (modules-demo / signal-dark page) ──── */
.taid-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0 0 2rem;
}
.taid-demo-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 2px solid var(--violet);
  border-radius: 8px;
  padding: 1.25rem 1.35rem 1.35rem;
  transition: border-color .2s, box-shadow .2s;
}
.taid-demo-card:hover {
  border-color: var(--border-md);
  border-top-color: var(--violet-lt);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.taid-demo-card h3 {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 400;
  color: var(--violet-lt);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 .85rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}
.taid-demo-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.taid-demo-card li {
  font-size: .82rem;
  line-height: 1.3;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.taid-demo-card li:last-child { border-bottom: none; }
.taid-demo-card li a {
  display: block;
  color: var(--text-soft);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  padding: .35rem 0;
  transition: color .15s;
}
.taid-demo-card li a:hover { color: var(--cyan-lt); }
.taid-demo-card li span {
  display: block;
  color: var(--muted2);
  font-size: .7rem;
  line-height: 1.4;
  margin-top: .1rem;
}
.taid-demo-card li span::before { content: none; }
@media (max-width: 768px) {
  .taid-demo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .taid-demo-grid { grid-template-columns: 1fr; }
}

/* Newsflash readmore buttons */
.taid-ft-bar-wrap .readmore { margin-top: 1rem; }
.taid-ft-bar-wrap .readmore a.btn {
  gap: .4rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--violet-lt);
  background: var(--violet-dim);
  border: 1px solid rgba(124,58,237,.25);
  padding: .5rem 1rem;
}
.taid-ft-bar-wrap .readmore a.btn:hover {
  background: rgba(124,58,237,.2);
  color: var(--text);
  border-color: rgba(124,58,237,.4);
}
.taid-ft-bar-wrap .readmore a.btn .icon-chevron-right { font-size: .65em; }

/* Newsflash article items — separators */
.taid-ft-bar-wrap .mod-articlesnews__item + .mod-articlesnews__item {
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

/* ─── Hide empty module wrappers ──────────────────────────────── */
.taid-ad-strip:has(.bannergroup:not(:has(*))) { display: none; }
.taid-announce:has(.mod-languages__list:not(:has(li))) { display: none; }

/* ═══════════════════════════════════════════════════════════════
   Bootstrap component overrides — dark theme
   ═══════════════════════════════════════════════════════════════ */

/* ─── Badges ─────────────────────────────────────────────────── */
.badge { font-weight: 500; font-size: .68rem; border-radius: 3px; }
.badge.bg-primary, .badge.bg-info    { background: rgba(6,182,212,.15) !important; color: var(--cyan-lt) !important; border: 1px solid rgba(6,182,212,.25); }
.badge.bg-secondary                  { background: var(--bg3) !important; color: var(--text-soft) !important; border: 1px solid var(--border); }
.badge.bg-success                    { background: rgba(16,185,129,.15) !important; color: var(--emerald) !important; border: 1px solid rgba(16,185,129,.25); }
.badge.bg-danger                     { background: rgba(244,63,94,.15) !important; color: var(--rose) !important; border: 1px solid rgba(244,63,94,.25); }
.badge.bg-warning                    { background: rgba(245,158,11,.15) !important; color: var(--amber) !important; border: 1px solid rgba(245,158,11,.25); }
.badge.bg-dark                       { background: var(--bg3) !important; color: var(--muted) !important; border: 1px solid var(--border); }

/* ─── Breadcrumbs (global structural — Bootstrap not loaded) ─── */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: .5rem .75rem;
  margin: 0;
  gap: .15rem;
  font-size: .82rem;
}
.breadcrumb-item { color: var(--muted); }
.breadcrumb-item a { color: var(--violet-lt); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--cyan-lt); }
.breadcrumb-item.active { color: var(--text-soft); }
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding-right: .4rem;
  color: var(--muted2);
}
.mod-breadcrumbs__here {
  font-size: .72rem;
  color: var(--muted);
  float: none;
  margin-right: .25rem;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.5;
  padding: .45rem .9rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all .18s;
}
.btn + .btn                   { margin-left: 3px; }
.btn-group                    { display: inline-flex; align-items: center; }
.btn-group > .btn + .btn      { margin-left: -1px; }
.btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .btn + .btn    { margin-left: 0; }
.input-group > .btn           { border-radius: 0; }
.input-group > .btn:last-child { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.modal-footer                 { gap: .5rem; }
.btn-toolbar                  { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.btn-primary, .btn-info       { background: var(--violet) !important; border-color: var(--violet) !important; color: #fff !important; }
.btn-primary:hover, .btn-info:hover { background: #8b5cf6 !important; border-color: #8b5cf6 !important; box-shadow: 0 0 12px rgba(124,58,237,.35); }
.btn-secondary                { background: transparent !important; border-color: var(--border-strong) !important; color: var(--text-soft) !important; }
.btn-secondary:hover          { border-color: var(--violet) !important; color: var(--violet-lt) !important; background: rgba(124,58,237,.07) !important; }
.btn-success                  { background: rgba(16,185,129,.15) !important; border-color: rgba(16,185,129,.3) !important; color: var(--emerald) !important; }
.btn-success:hover            { background: rgba(16,185,129,.25) !important; }
.btn-danger                   { background: rgba(244,63,94,.12) !important; border-color: rgba(244,63,94,.3) !important; color: var(--rose) !important; }
.btn-danger:hover             { background: rgba(244,63,94,.22) !important; }
.btn-warning                  { background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.3) !important; color: var(--amber) !important; }
.btn-link                     { background: transparent !important; border-color: transparent !important; color: var(--violet-lt) !important; }
.btn-link:hover               { color: var(--cyan-lt) !important; }
.btn-sm                       { font-size: .72rem; padding: .25rem .6rem; }
.btn-lg                       { font-size: .92rem; padding: .65rem 1.4rem; }
/* btn-check — Bootstrap radio/checkbox toggle buttons */
.btn-check                    { position: absolute; clip: rect(0,0,0,0); pointer-events: none; }
.btn-check + .btn             { background: transparent; border-color: var(--border-strong); color: var(--text-soft); }
.btn-check + .btn:hover       { border-color: var(--violet); color: var(--violet-lt); background: rgba(124,58,237,.07); }
.btn-check:checked + .btn     { background: var(--violet) !important; border-color: var(--violet) !important; color: #fff !important; }
.btn-outline-secondary        { background: transparent !important; border-color: var(--border-strong) !important; color: var(--text-soft) !important; }
.btn-outline-secondary:hover  { border-color: var(--violet) !important; color: var(--violet-lt) !important; background: rgba(124,58,237,.07) !important; }
.btn-outline-primary          { background: transparent !important; border-color: var(--violet) !important; color: var(--violet-lt) !important; }
.btn-outline-primary:hover    { background: rgba(124,58,237,.12) !important; color: #fff !important; }

/* ─── Form controls ──────────────────────────────────────────── */
.form-control, .form-select, .form-check-input {
  background-color: var(--bg3) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  border-radius: 4px;
}
/* Sizing — Bootstrap doesn't load on frontend, so we define it here */
.form-control, .form-select {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  box-sizing: border-box;
}
.input-group {
  display: flex;
  width: 100%;
  position: relative;
}
.input-group > .form-control,
.input-group > .form-select {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group-text {
  display: flex;
  align-items: center;
  padding: .5rem .65rem;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 4px;
}
/* Adjoined borders — no double border between group items */
.input-group > :not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Global bottom gap on inputs/textareas — prevents buttons touching them */
.form-control, .form-select { margin-bottom: .5rem; }
/* Never add bottom margin inside .input-group — breaks inline button alignment */
.input-group .form-control,
.input-group .form-select { margin-bottom: 0 !important; }
/* Minicolors color picker — preserve swatch padding */
.minicolors .minicolors-input {
  padding-left: 44px !important;
}
.minicolors .minicolors-swatch {
  border-color: var(--border) !important;
}
/* Joomla media field preview — dark theme */
joomla-field-media .field-media-preview {
  background-color: var(--bg3) !important;
  border-color: var(--border) !important;
}
joomla-field-media .field-media-preview-icon {
  opacity: .3;
}
/* Control group spacing */
.control-group { margin-bottom: 1.1rem; }
/* Form grid — Joomla 5 field layout container */
.form-grid { display: grid; gap: 0; }
.form-grid > .control-group {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}
.form-grid > .control-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
/* Description / helper text below fields */
.form-text {
  font-size: .75rem;
  color: var(--muted);
  margin-top: .25rem;
}
/* Label above control — breathing room */
.control-label label,
.control-label .form-label {
  margin-bottom: .35rem;
}
/* Fieldset legend — section header */
fieldset > legend:not(.visually-hidden) {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: .5rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
/* Inline form checks — horizontal layout */
.form-check-inline,
.form-check.form-check-inline {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-right: 1rem;
}
/* Kunena search widget — compact to align with pagination */
#kunena .kunena-search .input-group { align-items: center; flex-wrap: nowrap; }
#kunena .kunena-search .form-control {
  padding: .35rem .65rem !important;
  font-size: .82rem !important;
  height: auto !important;
}
#kunena .kunena-search.search { margin-bottom: 1rem; }
/* search + pagination are floated siblings of .kfrontend — lower-specificity fallback */
#kunena .kfrontend { clear: both; }
/* Time filter block — hide entirely (h2.filter-sel "All" text + redundant select) */
#kunena #filter-time { display: none !important; }
/* Light chevron for all selects on dark theme */
.form-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: var(--chevron-icon) !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 14px 10px !important;
}
.form-control::placeholder { color: var(--muted) !important; }

/* Bootstrap collapse utility (Bootstrap CSS not loaded — define here) */
.collapse:not(.show) { display: none; }
.collapsing { height: 0; overflow: hidden; transition: height .35s ease; }

/* Bootstrap grid — minimal subset for Joomla component views */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--bs-gutter-x, 1.5rem) / -2);
  margin-left:  calc(var(--bs-gutter-x, 1.5rem) / -2);
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) / 2);
  padding-left:  calc(var(--bs-gutter-x, 1.5rem) / 2);
}
.col-md-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
  .col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-md-3  { flex: 0 0 25%; max-width: 25%; }
  .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-6  { flex: 0 0 50%; max-width: 50%; }
  .col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-md-9  { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
}
@media (min-width: 992px) {
  .col-lg-3  { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-lg-6  { flex: 0 0 50%; max-width: 50%; }
  .col-lg-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-lg-9  { flex: 0 0 75%; max-width: 75%; }
}
/* Bootstrap utilities — Joomla component markup depends on these */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }
.p-0  { padding: 0 !important; }
.p-2  { padding: .5rem !important; }
.p-3  { padding: 1rem !important; }
.p-4  { padding: 1.5rem !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-grid { display: grid !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
}
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
}
@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
}
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.w-100 { width: 100% !important; }
.list-unstyled { padding-left: 0; list-style: none; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.form-control:focus, .form-select:focus {
  background-color: var(--bg3) !important;
  border-color: var(--violet) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.20) !important;
  color: var(--text) !important;
}
.form-select option           { background: var(--bg3); color: var(--text); }
.form-label, label            { color: var(--text-soft); font-size: .875rem; display: block; }
/* Breathing room between form fields — scoped to editing views only */
.view-form .form-select:not(.input-group > .form-select),
.view-form .form-control:not(.input-group > .form-control),
.view-modules .form-select:not(.input-group > .form-select),
.view-modules .form-control:not(.input-group > .form-control),
.view-login .form-control:not(.input-group > .form-control) { margin-bottom: .6rem; }
.view-form .form-label, .view-form label,
.view-modules .form-label, .view-modules label,
.view-login .form-label, .view-login label { margin-top: .65rem; }
/* First label in a group needs no top gap */
.view-form legend label:first-child,
.view-form .control-group:first-child label,
.view-form fieldset > label:first-child,
.view-modules legend label:first-child,
.view-modules .control-group:first-child label,
.view-modules fieldset > label:first-child,
.view-login label:first-child { margin-top: 0; }

/* Utility com_users pages — smaller instructional text */
.view-reset .taid-component-panel p,
.view-remind .taid-component-panel p { font-size: .8rem; line-height: 1.6; color: var(--text-soft); }

/* ─── Sidebar: custom content blocks ─────────────────────── */
.taid-sidebar-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.taid-sidebar-links li a {
  display: block;
  padding: .35rem 0;
  color: var(--text-soft);
  text-decoration: none;
  font-size: .85rem;
  border-bottom: 1px solid var(--border);
  transition: color .15s;
}
.taid-sidebar-links li:last-child a { border-bottom: none; }
.taid-sidebar-links li a:hover { color: var(--violet-lt); }

.taid-sidebar-newsletter {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .75rem;
}

/* ─── Sidebar login module ───────────────────────────────── */
.taid-sidebar .com-users-login              { padding: .8rem .85rem 1rem; }
.taid-sidebar .com-users-login form         { display: flex; flex-direction: column; gap: .5rem; }
.taid-sidebar .com-users-login .control-group { margin: 0; }
.taid-sidebar .com-users-login .control-label { display: none; } /* inputs use placeholder */
.taid-sidebar .com-users-login button[type="submit"] {
  width: 100%; margin-top: .25rem;
}
/* Forgot links list */
.taid-sidebar .com-users-login__options.list-group {
  background: transparent !important;
  border: none !important;
  gap: 0 !important;
  margin-top: .65rem !important;
  padding: 0 !important;
}
.taid-sidebar .com-users-login__options .list-group-item {
  background: transparent !important;
  border: none !important;
  padding: .15rem 0 !important;
  font-size: .78rem;
}
.taid-sidebar .com-users-login__options .list-group-item a {
  color: var(--muted);
  text-decoration: none;
  font-size: .78rem;
  transition: color .15s;
}
.taid-sidebar .com-users-login__options .list-group-item a:hover { color: var(--violet-lt); }

.input-group-text             { background: var(--bg3) !important; border-color: var(--border-strong) !important; color: var(--muted) !important; }
/* Bootstrap .form-check layout (Bootstrap CSS not loaded on frontend) */
.form-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 1.5rem;
  margin-bottom: .25rem;
}
.form-check-inline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-right: 1rem;
}
.form-check-label {
  cursor: pointer;
}
.form-check-input:checked     { background-color: var(--violet) !important; border-color: var(--violet) !important; }
/* Ensure checkboxes/radios aren't stretched by any parent width rule */
.form-check-input             { width: 1em !important; height: 1em !important; padding: 0 !important; flex-shrink: 0; }
/* Native dark checkboxes/radios — don't fight browser rendering */
.form-check-input[type="checkbox"],
.form-check-input[type="radio"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  color-scheme: dark;
  accent-color: var(--violet);
  cursor: pointer;
}

/* ─── Bootstrap list-group dark theme ───────────────────────── */
.list-group {
  --bs-list-group-color:              var(--text-soft);
  --bs-list-group-bg:                 var(--bg3);
  --bs-list-group-border-color:       var(--border);
  --bs-list-group-action-color:       var(--text-soft);
  --bs-list-group-action-hover-color: var(--text);
  --bs-list-group-action-hover-bg:    rgba(255,255,255,.05);
  --bs-list-group-action-active-color:var(--text);
  --bs-list-group-action-active-bg:   rgba(255,255,255,.08);
  --bs-list-group-disabled-color:     var(--muted);
  --bs-list-group-disabled-bg:        var(--bg3);
  --bs-list-group-active-color:       var(--violet-lt);
  --bs-list-group-active-bg:          rgba(124,58,237,.2);
  --bs-list-group-active-border-color:var(--border-strong);
}
.list-group-item-action:hover,
.list-group-item-action:focus { color: var(--text) !important; background: rgba(255,255,255,.05) !important; }
/* ─── Full-page login form ───────────────────────────────── */
/* Strip Bootstrap .well chrome */
.com-users-login .com-users-login__form.well {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Remove fieldset border */
.taid-component-panel fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
/* Control group spacing */
.com-users-login .control-group { margin-bottom: 1.1rem; }
/* Labels — small uppercase (shared across all user + contact forms) */
.com-users-login .control-label label,
.com-users-reset .control-label label,
.com-users-remind .control-label label,
.profile-edit .control-label label,
.com-users-registration .control-label label,
.com_contact.view-contact .control-label label {
  display: block;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .35rem;
}
.control-label label .star { color: var(--rose); }
/* Validation feedback text */
.com-users-login .form-control-feedback {
  display: block;
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--rose);
  margin-top: .2rem;
}
/* Remember me row */
.com-users-login__remember {
  margin: 1.25rem 0 .5rem;
}
.com-users-login__remember .form-check {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.com-users-login__remember .form-check-input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.05em !important;
  height: 1.05em !important;
  background: var(--bg3);
  border: 1px solid var(--border-md);
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.com-users-login__remember .form-check-input:checked {
  background: var(--violet) !important;
  border-color: var(--violet) !important;
  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='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5 6.5 11.5 12.5 5'/%3E%3C/svg%3E") !important;
  background-size: .65em !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.com-users-login__remember .form-check-label {
  font-size: .82rem;
  color: var(--text-soft);
  cursor: pointer;
}
/* Submit buttons — full width, uppercase (shared) */
.com-users-login__submit .btn-primary,
.com-users-reset__submit .btn-primary,
.com-users-remind__submit .btn-primary,
.com-users-registration__submit .btn-primary {
  width: 100%;
  padding: .65rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.com-users-login__submit {
  margin-top: 1rem;
}

/* ─── Login form options (full-page, NOT sidebar) ────────── */
/* Strip box treatment — these are links, not panels */
.com-users-login .com-users-login__options.list-group {
  margin-top: 1.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  padding-top: 1.25rem !important;
}
.com-users-login .com-users-login__options .list-group-item {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: .3rem 0 !important;
  font-size: .82rem;
  color: var(--muted) !important;
  text-decoration: none;
  transition: color .15s, padding-left .15s;
}
.com-users-login .com-users-login__options .list-group-item:hover {
  background: transparent !important;
  color: var(--violet-lt) !important;
  padding-left: .35rem !important;
}

/* ─── Password Reset & Username Remind ──────────────────── */
/* Strip Bootstrap .well chrome */
.com-users-reset .well,
.com-users-remind .well {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.com-users-reset fieldset,
.com-users-remind fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
/* Legend is instructional text on these pages */
.com-users-reset legend,
.com-users-remind legend {
  float: none;
  width: auto;
  padding: 0 0 1.25rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-soft);
  line-height: 1.7;
  border-bottom: 1px solid var(--border);
}
.com-users-reset .control-group,
.com-users-remind .control-group { margin-bottom: 1.1rem; }
.com-users-reset__submit,
.com-users-remind__submit { margin-top: 1rem; }

/* ─── User Profile ─────────────────────────────────────────── */
/* Wrapper as positioning context for the absolutely-placed edit button */
.com-users-profile { position: relative; }

.com-users-profile .page-header {
  padding-bottom: 1.25rem;
  padding-right: 10rem; /* keep h1 clear of button */
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

/* Edit Profile button — absolute top-right, fully out of normal flow */
.com-users-profile .com-users-profile__edit {
  position: absolute;
  top: 0;
  right: 0;
  float: none !important;
  list-style: none;
  margin: 0;
  padding: 0;
}
.com-users-profile .com-users-profile__edit .btn-group { display: block; }

/* Fieldsets — no border-top (legend straddles the border by browser default) */
.com-users-profile fieldset {
  border: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

/* Legend — label with trailing rule extending right */
.com-users-profile legend {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  float: none;
  padding: 0 0 1.1rem 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.com-users-profile legend::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Definition list — two-column grid */
.com-users-profile .dl-horizontal {
  display: grid;
  grid-template-columns: minmax(130px, 180px) 1fr;
  gap: .65rem 1.5rem;
}
.com-users-profile .dl-horizontal dt {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-soft);
  margin: 0;
  align-self: center;
}
.com-users-profile .dl-horizontal dd {
  font-size: .88rem;
  color: var(--text);
  margin: 0;
  align-self: center;
}

/* ─── Edit User Profile ──────────────────────────────────────── */
/* Fix flex leak: archive filter gives display:flex to all form.form-validate */
.profile-edit form.form-validate,
.com-users-registration form.form-validate { display: block !important; }

/* Strip Bootstrap 3 .well chrome from the form */
.profile-edit .com-users-profile__edit-form.well {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Fieldsets */
.profile-edit form.form-validate fieldset {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.75rem 0 0;
  padding: 1.5rem 0 0;
  display: block; /* ensure no flex inheritance inside */
}
.profile-edit form.form-validate fieldset:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* Legend — small uppercase label */
.profile-edit legend {
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Control groups — label above control */
.profile-edit .control-group { margin-bottom: 1.1rem; }
.profile-edit .form-text { font-size: .75rem; color: var(--muted); }

/* Password strength meter (shared: profile edit + registration) */
.profile-edit meter,
.com-users-registration meter {
  width: 100%;
  height: 4px;
  margin-top: .4rem;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg3);
}
.profile-edit meter::-webkit-meter-bar,
.com-users-registration meter::-webkit-meter-bar { background: var(--bg3); border: none; border-radius: 2px; }
.profile-edit meter::-webkit-meter-optimum-value,
.com-users-registration meter::-webkit-meter-optimum-value     { background: var(--emerald); }
.profile-edit meter::-webkit-meter-suboptimum-value,
.com-users-registration meter::-webkit-meter-suboptimum-value  { background: var(--amber); }
.profile-edit meter::-webkit-meter-even-less-good-value,
.com-users-registration meter::-webkit-meter-even-less-good-value { background: var(--rose); }
.profile-edit meter::-moz-meter-bar,
.com-users-registration meter::-moz-meter-bar { border: none; border-radius: 2px; }
.profile-edit .text-center[id^="password-"],
.com-users-registration .text-center[id^="password-"] { font-size: .72rem; color: var(--muted); margin-top: .2rem; }

/* Password rules hint */
.profile-edit #jform\[password1\]-rules { font-size: .75rem; color: var(--muted); margin-bottom: .5rem; }

/* MFA "Add a new X" buttons — override Bootstrap blue → violet */
.profile-edit .btn-outline-primary,
.com-users-methods-list-method-addnew {
  --bs-btn-color: var(--violet-lt);
  --bs-btn-border-color: rgba(124,58,237,.45);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--violet);
  --bs-btn-hover-border-color: var(--violet);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--violet);
  color: var(--violet-lt) !important;
  border-color: rgba(124,58,237,.45) !important;
  background: transparent !important;
  text-decoration: none !important;
}
.profile-edit .btn-outline-primary:hover,
.com-users-methods-list-method-addnew:hover {
  color: #fff !important;
  background: var(--violet) !important;
  border-color: var(--violet) !important;
}
/* Dark border on the divider row above each Add button */
.com-users-methods-list-method-addnew-container.border-top {
  border-top-color: var(--border) !important;
}
/* Method list container spacing */
#com-users-methods-list-container { display: flex; flex-direction: column; gap: .25rem; }

/* MFA method cards — force dark even if plugin sets --bs-card-bg */
.profile-edit .card,
.com-users-mfa-select .card {
  background: var(--bg3) !important;
  --bs-card-bg: var(--bg3);
  border-color: var(--border) !important;
  color: var(--text-soft);
}
.profile-edit .card-header,
.com-users-mfa-select .card-header {
  background: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  padding: 1rem 1.25rem;
}
.profile-edit .card-body,
.com-users-mfa-select .card-body { color: var(--text-soft); padding: 1rem 1.25rem; }

/* MFA method icon — kill Bootstrap .bg-light white box */
.profile-edit .com-users-methods-list-method-image.bg-light,
.com-users-mfa-select .com-users-methods-list-method-image.bg-light {
  background: var(--bg2) !important;
  border: 1px solid var(--border);
}
.profile-edit .com-users-methods-list-method-image img { max-width: 40px; }

/* Save/Cancel toolbar — breathing room above buttons */
.profile-edit .btn-toolbar,
.profile-edit .com-users-profile__edit-submit { margin-top: 2rem; }

/* MFA section heading */
.profile-edit h2,
.profile-edit h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

/* ─── MFA Method Add/Edit Page ──────────────────────────── */
#com-users-method-edit { padding: 1rem 0; }
#com-users-method-edit h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1.75rem;
}
#com-users-method-edit h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  border-bottom-color: var(--border) !important;
  padding-bottom: .75rem;
}
#com-users-method-edit .row { margin-bottom: 1.25rem; }
#com-users-method-edit .col-form-label {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
#com-users-method-edit .form-text { font-size: .78rem; color: var(--muted); }
#com-users-method-edit .form-check-label { color: var(--text-soft); font-size: .9rem; }
/* Table — dark striping, more padding */
#com-users-method-edit .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.03);
  border-color: var(--border);
}
#com-users-method-edit .table td {
  padding: 1rem 1.25rem;
  border-color: var(--border);
  color: var(--text-soft);
  vertical-align: top;
}
#com-users-method-edit .table td:first-child {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .85rem;
  color: var(--muted);
  white-space: nowrap;
  width: 30%;
}
#com-users-method-edit .table a { color: var(--violet-lt); }
#com-users-method-edit .table a:hover { color: var(--cyan-lt); }
/* Card wrapper — generous padding */
.taid-component-panel > .card.card-body {
  padding: 2rem 2.25rem !important;
  background: var(--bg3) !important;
  border-color: var(--border) !important;
}

/* ─── Iframe Wrapper (com_wrapper) ───────────────────────── */
.com-wrapper iframe {
  border: 1px solid var(--border);
  background: var(--bg2);
  width: 100%;
  min-height: 400px;
}

/* ─── User Registration Form ─────────────────────────────── */

.com-users-registration fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.com-users-registration legend {
  float: none;
  width: auto;
  padding: 0 0 1rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.com-users-registration .control-group { margin-bottom: 1.1rem; }
.com-users-registration .form-text { font-size: .75rem; color: var(--muted); }

/* Password eye toggle — used in registration and profile edit */
.input-password-toggle {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
  padding: .375rem .65rem;
  transition: color .15s, border-color .15s;
}
.input-password-toggle:hover {
  border-color: var(--violet) !important;
  color: var(--violet-lt) !important;
}

/* Register button wrapper — extra spacing + border */
.com-users-registration__submit {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

/* Tables ─────────────────────────────────────────────────── */
.table                        { color: var(--text-soft); border-color: var(--border); --bs-table-border-color: var(--border); }
.table th                     { color: var(--text); font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .03em; border-color: var(--border); background: var(--bg3); }
.table td                     { border-color: var(--border); vertical-align: middle; font-size: .875rem; color: var(--text-soft) !important; }
.table > :not(caption) > * > * { background-color: transparent !important; }  /* kill Bootstrap's --bs-table-bg */
.table tbody tr               { background-color: transparent !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,.03) !important; color: var(--text-soft) !important; }
.table-hover > tbody > tr:hover > *              { background-color: rgba(124,58,237,.08) !important; color: var(--text) !important; }
.table-bordered               { border-color: var(--border); --bs-table-border-color: var(--border); }

/* Article browser modal — title links readable, metadata stays small */
body.taid-component-only .container-popup .table th a.select-link {
  font-size: .95rem !important;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
body.taid-component-only .container-popup .table td,
body.taid-component-only .container-popup .table th small,
body.taid-component-only .container-popup .table th div {
  font-size: .78rem !important;
  color: var(--muted) !important;
}

/* ─── Alerts (Bootstrap .alert-* fallbacks) ──────────────────── */
.alert {
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .85rem;
  line-height: 1.5;
}
.alert-info                   { background: rgba(6,182,212,.1); border-color: rgba(6,182,212,.25); color: var(--cyan-lt); }
.alert-success                { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.25); color: var(--success-text); }
.alert-danger, .alert-error   { background: rgba(244,63,94,.1); border-color: rgba(244,63,94,.25); color: var(--danger-text); }
.alert-warning                { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.25); color: var(--warning-text); }

/* ─── Joomla system alerts (<joomla-alert> web component) ───── */
#system-message-container     { margin-bottom: 1.5rem; }

joomla-alert {
  /* Override Joomla's built-in --jui-alert-* vars so its own rules don't pollute */
  --jui-alert-button-color-dark:  currentColor;
  --jui-alert-button-color-light: transparent;
  --jui-alert-success-color:            var(--success-text);
  --jui-alert-success-background-color: rgba(16,185,129,.08);
  --jui-alert-success-border-color:     rgba(16,185,129,.2);
  --jui-alert-warning-color:            var(--warning-text);
  --jui-alert-warning-background-color: rgba(245,158,11,.08);
  --jui-alert-warning-border-color:     rgba(245,158,11,.2);
  --jui-alert-danger-color:             var(--danger-text);
  --jui-alert-danger-background-color:  rgba(244,63,94,.08);
  --jui-alert-danger-border-color:      rgba(244,63,94,.2);
  --jui-alert-info-color:               var(--cyan-lt);
  --jui-alert-info-background-color:    rgba(6,182,212,.08);
  --jui-alert-info-border-color:        rgba(6,182,212,.2);

  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem .75rem 1.15rem;
  border-radius: 6px;
  border: 1px solid transparent;
  border-left-width: 3px;
  font-family: var(--font-display);
  font-size: .9rem;
  line-height: 1.5;
  margin-bottom: .75rem;
}
/* Hide the redundant icon/type heading */
joomla-alert .alert-heading   { display: none; }
/* Message takes all available space, pushing × to the far right */
joomla-alert .alert-wrapper   { flex: 1; }
joomla-alert .alert-message   { font-weight: 400; }

/* Close button — right side */
joomla-alert .joomla-alert--close {
  order: 999;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  padding: 0 .55rem 0 .2rem;
  color: inherit !important;
  text-shadow: none !important;
  opacity: .5;
  transition: opacity .15s ease;
  flex-shrink: 0;
}
joomla-alert .joomla-alert--close:hover { opacity: 1; color: inherit !important; }

/* Type colours — !important beats Joomla's var(--jui-alert-*-color) fallback */
joomla-alert[type="success"] {
  background: rgba(16,185,129,.08) !important;
  border-color: rgba(16,185,129,.2) !important;
  border-left-color: var(--emerald) !important;
  color: var(--success-text) !important;
}
joomla-alert[type="warning"] {
  background: rgba(245,158,11,.08) !important;
  border-color: rgba(245,158,11,.2) !important;
  border-left-color: var(--amber) !important;
  color: var(--warning-text) !important;
}
joomla-alert[type="danger"],
joomla-alert[type="error"] {
  background: rgba(244,63,94,.08) !important;
  border-color: rgba(244,63,94,.2) !important;
  border-left-color: var(--rose) !important;
  color: var(--danger-text) !important;
}
joomla-alert[type="info"],
joomla-alert[type="message"] {
  background: rgba(6,182,212,.08) !important;
  border-color: rgba(6,182,212,.2) !important;
  border-left-color: var(--cyan) !important;
  color: var(--cyan-lt) !important;
}

/* Fade-in keyframe */
@keyframes joomla-alert-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Pagination ─────────────────────────────────────────────── */
.pagination .page-link        { background: var(--bg3); border-color: var(--border); color: var(--text-soft); font-size: .82rem; }
.pagination .page-link:hover  { background: rgba(124,58,237,.1); border-color: rgba(124,58,237,.3); color: var(--violet-lt); }
.pagination .active .page-link{ background: var(--violet) !important; border-color: var(--violet) !important; color: #fff !important; }
.pagination .disabled .page-link { background: var(--bg2); color: var(--muted); border-color: var(--border); }

/* ─── Dropdowns ──────────────────────────────────────────────── */
.dropdown-menu                { background: var(--bg3); border-color: var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.dropdown-item                { color: var(--text-soft); font-size: .875rem; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(124,58,237,.1); color: var(--violet-lt); }
.dropdown-divider             { border-color: var(--border); }

/* ─── Cards (Bootstrap, not our custom) ─────────────────────── */
.card-header                  { background: var(--bg3); border-color: var(--border); color: var(--text); }
.card-body                    { color: var(--text-soft); }

/* ─── Tabs ───────────────────────────────────────────────────── */
.nav-tabs                     { border-color: var(--border); }
.nav-tabs .nav-link,
.nav-tabs a,
.nav-pills .nav-link,
.nav-pills a                  { text-decoration: none !important; }
.nav-tabs .nav-link           { color: var(--text-soft); border-color: transparent; }
.nav-tabs .nav-link:hover     { border-color: var(--border); color: var(--violet-lt); }
.nav-tabs .nav-link.active    { background: var(--panel); border-color: var(--border) var(--border) var(--panel); color: var(--violet-lt); }

/* ─── Accordion (Bootstrap) ──────────────────────────────────── */
.accordion {
  --bs-accordion-color:          var(--text-soft);
  --bs-accordion-bg:             var(--bg3);
  --bs-accordion-border-color:   var(--border);
  --bs-accordion-btn-color:      var(--text);
  --bs-accordion-btn-bg:         var(--bg3);
  --bs-accordion-active-color:   var(--violet-lt);
  --bs-accordion-active-bg:      rgba(124,58,237,.10);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(124,58,237,.15);
  /* Light chevron icons (muted grey + violet-lt when active) */
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238888a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}
/* Accordion structural styles (Bootstrap CSS not fully loaded in Joomla 5 frontend) */
.accordion-item {
  color: var(--bs-accordion-color);
  background-color: var(--bs-accordion-bg);
  border: 1px solid var(--bs-accordion-border-color);
}
.accordion-item:first-of-type { border-top-left-radius: .375rem; border-top-right-radius: .375rem; }
.accordion-item:last-of-type  { border-bottom-left-radius: .375rem; border-bottom-right-radius: .375rem; }
.accordion-item:not(:first-of-type) { border-top: 0; }
.accordion-header { margin-bottom: 0; }
.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: .85rem 1.25rem;
  font-family: var(--font-display);
  font-size: .875rem;
  letter-spacing: .02em;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  cursor: pointer;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.accordion-item:first-of-type > .accordion-header > .accordion-button { border-top-left-radius: calc(.375rem - 1px); border-top-right-radius: calc(.375rem - 1px); }
.accordion-item:last-of-type > .accordion-header > .accordion-button.collapsed { border-bottom-left-radius: calc(.375rem - 1px); border-bottom-right-radius: calc(.375rem - 1px); }
.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
}
.accordion-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform .2s ease-in-out;
}
.accordion-button:not(.collapsed)::after {
  background-image: var(--bs-accordion-btn-active-icon);
  transform: rotate(-180deg);
}
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(124,58,237,.15) !important; outline: 0; }
.accordion-collapse { border: 0; }
.accordion-body { background: var(--bg3); color: var(--text-soft); padding: 1.25rem 1.5rem !important; }
/* Spacing between form items inside accordion panels */
.accordion-body ul.nav.flex-column { gap: 0; }
.accordion-body .control-group     { padding: .65rem 0; border-bottom: 1px solid var(--border); }
.accordion-body li:last-child .control-group { border-bottom: none; padding-bottom: 0; }
.accordion-body .control-label label { display: block; margin-bottom: .3rem; }

/* ─── Joomla switcher (radio toggle pill) ────────────────────── */
/* Off state — dark track, muted knob */
.switcher .toggle-outside {
  background: var(--bg2) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4) !important;
}
.switcher .toggle-inside {
  background: var(--muted) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.35) !important;
}
/* On state — violet track, violet-lt knob */
.switcher.has-success .toggle-outside {
  background: rgba(124,58,237,.3) !important;
  border-color: rgba(124,58,237,.65) !important;
}
.switcher.has-success .toggle-inside {
  background: var(--violet-lt) !important;
}

/* ─── TinyMCE editor ─────────────────────────────────────────── */
.tox-tinymce                  { border-color: var(--border) !important; border-radius: 4px !important; }
.tox .tox-toolbar-overlord, .tox .tox-toolbar__primary { background: var(--bg3) !important; border-bottom-color: var(--border) !important; }
.tox .tox-statusbar           { background: var(--bg3) !important; border-top-color: var(--border) !important; color: var(--muted) !important; }
/* Prevent white flash on load */
.tox .tox-edit-area           { background: var(--bg) !important; }

/* ─── Module edit — header info bar (Module Name / Module Type) ── */
/* The outer text ("Module Name", "Module Type") are bare text nodes;
   we mute the container and tint the badges violet to stand out.   */
.view-modules .taid-component-panel .form-validate > .row:first-child > div > div {
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .02em;
  margin-bottom: 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--border);
}
.view-modules .taid-component-panel .form-validate > .row:first-child .badge.bg-secondary {
  background: rgba(124,58,237,.18) !important;
  color: var(--violet-lt) !important;
  border-color: rgba(124,58,237,.35) !important;
  font-size: .75rem;
  font-family: var(--font-display);
  letter-spacing: .03em;
  padding: .3em .7em;
}

/* ─── Joomla-specific component UI ──────────────────────────── */
/* Category list "New Article" toolbar */
.com_content .page-header     { border-color: var(--border); padding-bottom: .5rem; margin-bottom: .75rem; }
.com_content .page-header h1  { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 1.8rem; }
/* Article count in category list */
.category-count               { color: var(--muted); font-size: .8rem; }
/* Category list — article title column */
.com_content .list-title {
  text-align: left;
}
.com_content .list-title a {
  display: block;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
}
.com_content .list-title a:hover { color: var(--text); }

/* Category list — "Display #" select: auto width, right-aligned */
.com-content-category__pagination {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .75rem;
}
.taid-component-panel .com-content-category__pagination .form-select {
  width: auto !important;
  min-width: 5rem;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-soft) !important;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 500;
  padding: .45rem 2.2rem .45rem .85rem;
  background-image: var(--chevron-icon) !important;
  background-repeat: no-repeat !important;
  background-position: right .6rem center !important;
  background-size: 14px 10px !important;
}

/* Category list table */
.com-content-category__table {
  width: 100%;
  border-collapse: collapse;
}
.com-content-category__table thead th {
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--border-md);
  text-align: left;
}
.com-content-category__table thead th a {
  color: var(--muted);
  text-decoration: none;
}
.com-content-category__table thead th a:hover { color: var(--text-soft); }
.com-content-category__table tbody th,
.com-content-category__table tbody td {
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.com-content-category__table tbody tr:last-child th,
.com-content-category__table tbody tr:last-child td {
  border-bottom: none;
}
/* Block-link: make entire table row clickable */
.taid-block-links .com-content-category__table tbody tr {
  cursor: pointer;
}
.com-content-category__table .list-author {
  font-size: .82rem;
  color: var(--muted);
  white-space: nowrap;
}
.com-content-category__table .list-hits {
  text-align: center;
  white-space: nowrap;
}
.com-content-category__table .list-hits .badge {
  background: var(--violet-dim) !important;
  color: var(--violet-lt) !important;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  padding: .2rem .5rem;
  border-radius: 3px;
}

/* Strip Bootstrap table-striped/bordered/hover in dark theme */
.taid-component-panel .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: transparent;
  background: transparent;
}
.taid-component-panel .table-bordered > :not(caption) > * > * {
  border-width: 0;
}
.taid-component-panel .table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(255,255,255,.03);
  background: rgba(255,255,255,.03);
}

/* Blog layout read more */
.readmore a                   { color: var(--violet-lt) !important; font-size: .875rem; }
/* Article info strip */
.article-info, .article-info dd, .article-info dt { color: var(--muted); font-size: .8rem; }

/* Frontend admin edit/publish icons (shown to logged-in editors) */
.icons a,
.joomla-editable a,
.joomla-admin-icons a,
ul.joomla-icons a {
  text-decoration: none !important;
}

/* CSS tooltip on .jmodedit / .jmodpublish buttons */
.jmodedit,
.jmodpublish,
.jmodunpublish {
  position: relative !important;
}
.jmodedit::after,
.jmodpublish::after,
.jmodunpublish::after {
  content: attr(data-original-title);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg3);
  color: var(--text-soft);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: .2rem .55rem;
  font-size: .72rem;
  font-family: var(--font-display);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 9999;
}
/* Fallback when data-original-title is absent */
.jmodedit:not([data-original-title])::after    { content: 'Edit'; }
.jmodpublish:not([data-original-title])::after  { content: 'Publish'; }
.jmodunpublish:not([data-original-title])::after { content: 'Unpublish'; }
.jmodedit:hover::after,
.jmodpublish:hover::after,
.jmodunpublish:hover::after { opacity: 1; }

/* Joomla frontend-editing tooltips (role=tooltip, id=tip-*) —
   hidden by default; JS/hover shows them. Without this they render
   as plain visible text in the DOM. */
[role="tooltip"][id^="tip-"] {
  display: none !important;
}

/* ─── Archive / search filter form — spacing ─────────────────── */
/* Stack filter controls vertically with breathing room */
.taid-component-panel form.form-validate:not(#postform):not(.form-horizontal):not(.form-vertical),
.taid-component-panel .filters,
/* Archive filter — horizontal inline layout */
.com-content-archive__form .filter-search.form-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.com-content-archive__form .filter-search.form-inline span { margin: 0; }

/* Selects: auto width, light chevron for dark theme */
.com-content-archive__form .filter-search select.form-select {
  width: auto;
  min-width: 7rem;
  background-color: var(--bg2) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-soft) !important;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  padding: .55rem 2.2rem .55rem .85rem;
  background-image: var(--chevron-icon);
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 14px 10px;
  transition: border-color .15s, box-shadow .15s;
}
.com-content-archive__form .filter-search select.form-select:hover,
.com-content-archive__form .filter-search select.form-select:focus {
  border-color: var(--violet) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.20);
  outline: none;
}

/* Button — match select height, aligned */
.com-content-archive__form .filter-search .btn {
  margin-top: 0 !important;
  flex-shrink: 0;
  align-self: stretch;
  padding-top: 0;
  padding-bottom: 0;
  font-size: .75rem;
  letter-spacing: .06em;
}

/* ─── Archive article items ────────────────────────────────────── */
.com-content-archive__items .row0,
.com-content-archive__items .row1 {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}
.com-content-archive__items .row0:first-child,
.com-content-archive__items .row1:first-child {
  padding-top: .75rem;
}
.com-content-archive__items .row0:last-child,
.com-content-archive__items .row1:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Tighten title-to-metadata gap */
.com-content-archive__items .page-header {
  margin-bottom: .25rem;
}
.com-content-archive__items .page-header h2 {
  font-size: 1.3rem;
  line-height: 1.35;
}

/* Metadata line — compact inline */
.com-content-archive__items .article-info {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .75rem;
  margin-bottom: .5rem;
}

/* Intro text */
.com-content-archive__items .intro {
  margin-bottom: 0;
}
.com-content-archive__items .intro p {
  margin: 0;
}

/* Hide hits counter and second info block */
.com-content-archive__items .article-info + .intro + .article-info {
  display: none;
}

/* ─── Hide CTA at mid-widths where items fit but button overflows ── */
@media (min-width: 1441px) and (max-width: 1700px) {
  .taid-nav-actions .taid-btn-primary { display: none; }
}


/* ─── Mobile nav overlay ─────────────────────────────────────── */
@media (max-width: 1440px) {
  :root { --nav-h: var(--nav-h-sm); }

  /* Remove backdrop-filter on mobile — it creates a containing block for position:fixed children,
     which breaks the full-screen menu overlay (menu gets clipped to nav height instead of viewport) */
  .taid-nav-wrap {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10, 10, 15, 0.97);
  }

  .taid-hamburger { display: flex; }

  .taid-menu {
    position: fixed;
    top: var(--nav-h-sm);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10,10,15,.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-md);
    padding: 2rem 1.5rem;
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    z-index: 999;
  }
  .taid-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }


  /* Mobile menu — full-width rows so the entire line is clickable */
  .taid-menu ul,
  .taid-menu .mod-menu,
  .taid-menu .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    height: auto;
  }

  .taid-menu a {
    font-size: .9rem;
    display: flex;
    align-items: center;
    padding: .85rem 1rem .85rem 0;
    border-bottom: 1px solid var(--border);
    width: 100%;
    color: var(--text-soft);
    letter-spacing: .06em;
    height: auto;
  }
  .taid-menu a::after { display: none; }
  .taid-menu a:hover { color: var(--violet-lt); }

  .taid-menu .mod-menu > li,
  .taid-menu .nav > li {
    width: 100%;
    display: flex;
    align-items: stretch;
    height: auto;
  }

  /* Bootstrap collapse inside mobile menu — let it show */
  .taid-menu .navbar-collapse.show { display: block; }
  .taid-menu .navbar-toggler { display: none; }

  /* Hide nav CTA on mobile */
  .taid-nav-actions .taid-btn-primary { display: none; }

  .taid-feat-grid { grid-template-columns: 1fr; }
  .taid-feat-card--primary { grid-column: 1; }
  .taid-two-col--2 { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
  .taid-main-bottom-grid { grid-template-columns: repeat(2, 1fr); }

  .taid-section { padding: 3rem 0; }
  .taid-main { padding: 3rem 0; }
  .taid-newsletter { padding: 4rem 0; }
  .taid-hero-inner { padding-top: 5rem; padding-bottom: 4rem; }
  .taid-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .taid-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .com-users-profile .dl-horizontal { grid-template-columns: 1fr; }
}

/* ─── Phone ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Feature test bar: switch to horizontal scroll on mobile */
  .taid-ft-bar-wrap .mod-menu.nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .taid-ft-bar-wrap .mod-menu.nav .nav-item:has(> .mod-menu__heading) {
    flex-basis: auto;
    border-top: none;
    border-bottom: none;
  }
  .taid-ft-bar-wrap .mod-menu.nav .nav-item:first-child:has(> .mod-menu__heading) {
    border-top: none;
  }

  .taid-container { padding-left: 1rem; padding-right: 1rem; }
  .taid-section { padding: 2rem 0; }
  .taid-main { padding: 2rem 0; }
  .taid-component-panel { padding: 1.25rem; }
  .taid-col-panel { padding: 1.25rem; }
  /* Code blocks: tighter padding on mobile */
  .taid-component-panel pre { padding: 1rem; font-size: .78rem; }
  /* Force inline product card grids to single column on mobile */
  .taid-component-panel div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  .taid-hero { min-height: 50vh; }
  .taid-hero-inner { padding-top: 3.5rem; padding-bottom: 3rem; }
  .taid-hero-title { font-size: clamp(2rem, 10vw, 3rem); }
  .taid-hero-subtitle { font-size: .92rem; }
  .taid-hero-stats { grid-template-columns: 1fr; max-width: 280px; }
  .taid-hero--side .taid-hero-inner { max-width: 100%; }
  .taid-hero--side[style*="background-image"] { background-size: cover; }

  .taid-newsletter { padding: 3rem 0; }
  .taid-newsletter-title { font-size: 1.6rem; }
  .taid-nl-row { flex-direction: column; }
  .taid-nl-row .taid-btn { width: 100%; }

  .taid-back-top { bottom: 1rem; right: 1rem; }

  .taid-main-bottom-grid { grid-template-columns: 1fr; }
  .taid-footer-grid { grid-template-columns: 1fr; }
}

/* ─── Article-edit page — TinyMCE & nav fixes ───────────────────── */
/* Joomla renders body.view-form on all com_content edit/create pages. */

/* 1. Non-sticky nav — sentinel can reach true viewport top */
body.view-form .taid-nav-wrap,
body.view-form .taid-subnav {
  position: relative;
  top: auto;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 2. Force TinyMCE's toolbar header to stay static (non-sticky).
      The IntersectionObserver loop fires when the toolbar toggles
      sticky↔static, causing layout shifts that re-trigger the observer.
      position:static !important stops that cycle entirely.
      CSS !important overrides both TinyMCE's own stylesheet and any
      inline style="position:sticky" it writes. */
body.view-form .tox .tox-editor-header {
  position: static !important;
  top: auto !important;
}

/* 3. Hide the floating dock container TinyMCE appends to <body>
      in sticky mode (.tox-tinymce-aux). Removing it prevents the
      layout-shift that re-triggers the IntersectionObserver. */
body.view-form .tox-tinymce-aux {
  display: none !important;
}

/* ─── JCE editor toolbar — full brand styling ───────────────────── */

/* Toolbar: muted violet — toned down to integrate with the dark theme */
.mceDefaultSkin .mceToolbar,
.mceModernSkin .mceToolbar {
  background: rgba(124,58,237,.35) !important;
  border-bottom-color: rgba(124,58,237,.25) !important;
}
/* Toolbar icons — invert dark sprites to light for visibility on dark bg */
.mceDefaultSkin .mceIcon {
  filter: invert(1) brightness(2) !important;
  opacity: .8;
}
.mceDefaultSkin .mceIcon svg {
  fill: #f0f0ff !important;
}
/* Brighten on hover */
.mceDefaultSkin .mceButton:hover .mceIcon,
.mceDefaultSkin .mceButton:focus .mceIcon,
.mceDefaultSkin .mceButton.mceButtonActive .mceIcon {
  opacity: 1;
}
/* Disabled icons stay dim */
.mceDefaultSkin .mceButtonDisabled .mceIcon {
  opacity: .3 !important;
}
/* Split button dropdown arrows */
.mceDefaultSkin .mceSplitButton .mceOpen::after {
  color: rgba(240,240,255,.7) !important;
}
.mceDefaultSkin .mceSplitButton:hover .mceOpen::after {
  color: #f0f0ff !important;
}

/* Editor/Code/Preview tab strip */
.wf-editor-tabs.nav-tabs {
  background: var(--bg3) !important;
  border-bottom: 1px solid rgba(124,58,237,.3) !important;
}
.wf-editor-tabs .nav-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--muted) !important;
  font-family: var(--font-display) !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  letter-spacing: .05em !important;
  padding: .5rem 1rem !important;
  transition: color .15s, border-color .15s, background .15s !important;
}
.wf-editor-tabs .nav-item:hover {
  color: var(--violet-lt) !important;
  background: rgba(124,58,237,.1) !important;
  border-bottom-color: rgba(167,139,250,.5) !important;
}
.wf-editor-tabs .nav-item.active {
  color: var(--violet-lt) !important;
  background: rgba(124,58,237,.14) !important;
  border-bottom-color: var(--violet) !important;
}

/* Editor wrapper — bg match dark so no white line bleeds anywhere.
   Hardcoded hex because var(--bg) doesn't resolve in admin/JCE context
   and JCE's wildcard * rule resets background-color to transparent. */
.wf-editor-container,
.wf-editor-container .mceLayout,
.wf-editor-container .mceIframeContainer,
.wf-editor-container .mceEditor {
  background-color: #0a0a0f !important;
}

/* Code / Source view — dark panel with monospace code styling */
.wf-editor-source,
.wf-editor-preview {
  background: #0a0a0f !important;
  border-color: #0a0a0f !important;
}
.wf-editor-source textarea {
  background: #0a0a0f !important;
  color: var(--emerald, #10b981) !important;
  font-family: 'Space Mono', 'Courier New', monospace !important;
  font-size: .82rem !important;
  line-height: 1.65 !important;
  caret-color: var(--violet-lt) !important;
  /* Tone down browser spellcheck squiggles — HTML source isn't prose */
  text-decoration-color: rgba(124,58,237,.35) !important;
}
.wf-editor-source textarea::spelling-error {
  text-decoration: underline wavy rgba(124,58,237,.3);
}
.wf-editor-source textarea::grammar-error {
  text-decoration: underline wavy rgba(124,58,237,.2);
}
/* Preview iframe — block removes baseline gap, bg matches container */
.wf-editor-preview iframe {
  display: block !important;
  width: 100% !important;
  background: #0a0a0f !important;
  border: none !important;
}
/* Editor toolbar buttons (Article, Contact, Field, etc.) */
.editor-xtd-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}
/* Save / Save & Close / Cancel bar — space from editor above */
.edit.item-page form > .d-grid {
  margin-top: 1.25rem;
}
/* Button hover/active — slightly brighter than toolbar bg */
.mceDefaultSkin .mceButton:hover,
.mceDefaultSkin .mceButton:focus,
.mceDefaultSkin .mceButton.mceButtonActive,
.mceDefaultSkin .mceSplitButton:hover,
.mceDefaultSkin .mceSplitButton:hover .mceText,
.mceDefaultSkin .mceSplitButton:hover .mceOpen,
.mceDefaultSkin .mceSplitButton .mceText:hover,
.mceDefaultSkin .mceSplitButton .mceOpen:hover,
.mceDefaultSkin .mceListBox:hover {
  background: rgba(124,58,237,.55) !important;
  border-color: rgba(167,139,250,.5) !important;
}

/* Forecolor/backcolor "A" icon — skip invert so the color indicator stays true */
.mceDefaultSkin .mce_backcolor .mceAction,
.mceDefaultSkin .mce_forecolor .mceAction { filter: none !important; opacity: .85; }

/* SplitButtonActive — JCE shows white icon sprite; need dark bg to see it */
.mceDefaultSkin .mceSplitButtonActive .mceText,
.mceDefaultSkin .mceSplitButtonActive .mceOpen,
.mceModernSkin .mceSplitButtonActive .mceText,
.mceModernSkin .mceSplitButtonActive .mceOpen {
  background: rgba(124,58,237,.6) !important;
  border-color: rgba(167,139,250,.5) !important;
}

/* Separator bars — visible dividers between toolbar button groups */
.mceDefaultSkin .mceSeparator {
  background: rgba(167,139,250,.3) !important;
  margin: 2px 3px !important;
  width: 1px !important;
}

/* Listbox dropdowns (Format, Styles, Font family, Font size)
   Dark inset panel — contrasts beautifully against the lavender toolbar */
.mceDefaultSkin .mceListBox .mceText,
.mceDefaultSkin .mceListBox button.mceText,
.mceDefaultSkin .mceListBox button.mceTitle {
  background: rgba(20,10,55,.82) !important;
  border-color: rgba(124,58,237,.5) !important;
  color: var(--violet-lt) !important;
}
.mceDefaultSkin .mceListBox:hover .mceText {
  background: rgba(20,10,55,.95) !important;
  border-color: rgba(167,139,250,.6) !important;
}
.mceDefaultSkin .mceListBox .mceOpen {
  background: rgba(20,10,55,.82) !important;
  border-color: rgba(124,58,237,.5) !important;
}

/* Status bar — visible violet strip below editor */
.mceDefaultSkin .mceStatusbar {
  background: rgba(124,58,237,.18) !important;
  border-top: 1px solid rgba(124,58,237,.3) !important;
}
.mceDefaultSkin .mcePathRow a,
.mceDefaultSkin span.mcePathLabel {
  color: var(--violet-lt) !important;
}
.mceDefaultSkin .mceWordCount {
  color: var(--text-soft) !important;
}
.mceBranding {
  background: rgba(10,10,15,.82) !important;
  border-top: 1px solid rgba(124,58,237,.22) !important;
  color: var(--muted) !important;
  font-size: .72rem !important;
}
.mceBranding a {
  color: var(--violet-lt) !important;
}

/* TinyMCE editing area — suppress white iframe-cell border/bg */
.mceDefaultSkin td.mceIframe,
.mceDefaultSkin .mceIframe {
  border: none !important;
  background-color: #0a0a0f !important;
}
/* Kill ALL white borders/lines inside the editor layout — nuclear approach.
   JCE div-layout has toolbar / iframeContainer / statusbar / branding rows
   separated by borders that default to light colors. */
.mceDefaultSkin .mceLayout,
.mceDefaultSkin .mceLayout > div,
.mceDefaultSkin .mceLayout > div > div,
.mceDefaultSkin .mceIframeContainer,
.mceDefaultSkin .mceToolbar,
.mceDefaultSkin .mceToolbarGroup {
  border-color: transparent !important;
}
/* The <iframe> element itself is inline by default — baseline gap = white line.
   display:block eliminates it. Also kill any remaining border on the iframe. */
.wf-editor-container iframe,
.mceDefaultSkin iframe {
  display: block !important;
  border: none !important;
  outline: none !important;
}
/* The outer .wf-editor-container border can also bleed white */
.wf-editor-container,
.editor.wf-editor-container,
.wf-editor-container .mceLayout {
  border: none !important;
  outline: none !important;
}
/* Visual-aid guide lines — tone down from #787878 to violet-dim */
body#tinymce,
.mceContentBody {
  --mce-guidelines: rgba(124,58,237,.35) !important;
  border: none !important;
  outline: none !important;
}
/* mce-visualaid outlines on block elements — force our color */
body#tinymce.mce-visualaid p,
body#tinymce.mce-visualaid div,
body#tinymce.mce-visualaid td,
body#tinymce.mce-visualaid th,
.mceContentBody.mce-visualaid p {
  outline-color: rgba(124,58,237,.3) !important;
  border-color: rgba(124,58,237,.3) !important;
}

/* ─── TinyMCE content body — restore margins stripped by our * reset ── */
/* Our global reset (margin:0;padding:0 on *) kills paragraph spacing in the
   editor iframe. Restore browser-normal spacing so WYSIWYG matches frontend. */
body#tinymce p,
.mceContentBody p {
  margin-bottom: 1.2em;
}
body#tinymce h1, body#tinymce h2, body#tinymce h3,
body#tinymce h4, body#tinymce h5, body#tinymce h6,
.mceContentBody h1, .mceContentBody h2, .mceContentBody h3,
.mceContentBody h4, .mceContentBody h5, .mceContentBody h6 {
  margin-top: 1.8em;
  margin-bottom: .75em;
}
body#tinymce ul, body#tinymce ol,
.mceContentBody ul, .mceContentBody ol {
  margin-bottom: 1.2em;
  padding-left: 1.6em;
}
body#tinymce li,
.mceContentBody li {
  margin-bottom: .4em;
}
body#tinymce blockquote,
.mceContentBody blockquote {
  margin: 1.25em 0 1.25em 1.5em;
}
body#tinymce pre, body#tinymce code,
.mceContentBody pre, .mceContentBody code {
  margin-bottom: 1em;
}
/* Links inside the editor — restore violet so they're visible */
body#tinymce a,
.mceContentBody a {
  color: var(--violet-lt) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Pagebreak indicator inside editor — dark theme */
body#tinymce hr.mce-item-pagebreak,
.mceContentBody hr.mce-item-pagebreak {
  background: var(--bg3) !important;
  border-color: var(--border-md) !important;
  color: var(--muted) !important;
}

/* ─── JCE plugin modals (Link, Image, Table, etc.) ──────────────── */
/* The chrome (header + close button) lives in the main DOM — the
   iframe content is JCE-owned and can't be styled from here. */
.mceModal .mceModalFrame {
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(6px) !important;
}
.mceModalBody {
  background: var(--bg2) !important;
  border: 1px solid rgba(124,58,237,.3) !important;
  border-radius: 10px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.75), 0 0 0 1px rgba(124,58,237,.14) !important;
  overflow: hidden !important;
}
.mceModalHeader {
  background: var(--bg3) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: .875rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
}
.mceModalTitle {
  font-family: var(--font-display) !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  flex: 1 !important;
}
.mceModalClose {
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
  font-size: 1.25rem !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: .25rem !important;
  opacity: .6 !important;
  transition: opacity .15s !important;
}
.mceModalClose:hover {
  opacity: 1 !important;
  color: var(--rose) !important;
}
/* The iframe that holds the link/image form — no background bleed */
.mceModalContentIframe {
  background: transparent !important;
}

/* ─── JCE right-click context menu ──────────────────────────────── */
.mceMenu {
  background: var(--bg3) !important;
  border: 1px solid rgba(124,58,237,.35) !important;
  border-radius: 6px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.65), 0 0 0 1px rgba(124,58,237,.12) !important;
}
.mceMenu .mceMenuItem {
  color: var(--text-soft) !important;
  font-size: .85rem !important;
}
.mceMenu .mceMenuItem .mceText {
  color: var(--text-soft) !important;
}
.mceMenu .mceMenuItem.mceMenuSelected,
.mceMenu .mceMenuItem:hover {
  background: rgba(124,58,237,.18) !important;
}
.mceMenu .mceMenuItem.mceMenuSelected .mceText,
.mceMenu .mceMenuItem:hover .mceText {
  color: var(--violet-lt) !important;
}
.mceMenu .mceMenuItem.mceDisabled .mceText {
  color: var(--muted) !important;
  opacity: .5 !important;
}
.mceMenu .mceMenuItemSeparator {
  background: var(--border) !important;
  height: 1px !important;
  margin: 3px 0 !important;
}
/* Sub-menu arrow */
.mceMenu .mceMenuItemSub .mceText::after {
  color: var(--muted) !important;
}
/* ListBox dropdown filter (Styles, Paragraph, Font size, Font family, etc.) */
.mceListBoxMenu .mceMenuFilter,
.mceListBoxMenu .mceMenuFilterInput {
  background: var(--bg2) !important;
  border: none !important;
}
.mceListBoxMenu .mceMenuFilter input {
  background: var(--bg2) !important;
  color: var(--text-soft) !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ─── Frontend article form (joomla-tab / com_content edit) ────── */

/* Root fix: white #fefefe background causes repaint flash against dark body.
   Matching it to our dark surface eliminates the flicker. */
joomla-tab > joomla-tab-element {
  background: var(--bg2) !important;
  border-color: var(--border-strong) !important;
  border-top: none !important;
  box-shadow: none !important;
}

/* Tab nav bar — scoped to view="tabs" only; accordion view hides tablist via
   [hidden] and Joomla JS — do NOT include the broad joomla-tab [role="tablist"]
   selector or our display:flex !important overrides accordion's display:none */
joomla-tab[view="tabs"] > div[role="tablist"] {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 !important;
  gap: 0 !important;
  scrollbar-width: none !important;
}
joomla-tab[view="tabs"] > div[role="tablist"]::-webkit-scrollbar { display: none; }

/* Tab buttons */
joomla-tab [role="tab"] {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--muted) !important;
  font-family: var(--font-display) !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  letter-spacing: .05em !important;
  padding: .65rem 1.1rem !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: color .15s, border-color .15s !important;
}
joomla-tab [role="tab"]:hover {
  color: var(--text-soft) !important;
  border-bottom-color: var(--border-md) !important;
}
joomla-tab [role="tab"][aria-selected="true"],
joomla-tab [role="tab"].active {
  color: var(--violet-lt) !important;
  border-bottom-color: var(--violet) !important;
  background: transparent !important;
}

/* ─── joomla-tab accordion view (mobile/narrow) ─────────────── */
joomla-tab[view="accordion"] > button {
  background: var(--bg3) !important;
  color: var(--text-soft) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
  padding: .75rem 1rem !important;
  transition: background .15s, color .15s !important;
}
joomla-tab[view="accordion"] > button:hover {
  background: rgba(124,58,237,.1) !important;
  color: var(--text) !important;
}
joomla-tab[view="accordion"] > button[aria-expanded="true"] {
  background: rgba(124,58,237,.14) !important;
  color: var(--violet-lt) !important;
  border-bottom-color: rgba(124,58,237,.35) !important;
}
/* Accordion expand/collapse chevron */
joomla-tab[view="accordion"] > button .accordion-icon {
  color: var(--muted) !important;
}
joomla-tab[view="accordion"] > button[aria-expanded="true"] .accordion-icon {
  color: var(--violet-lt) !important;
}

/* Labels & legends */
.taid-component-panel label,
.taid-component-panel .control-label {
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .03em;
}
joomla-tab-element h3,
joomla-tab-element legend {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}

/* Text inside date/time inputs */
.taid-component-panel input[type="text"],
.taid-component-panel input[type="date"],
.taid-component-panel input[type="time"],
.taid-component-panel input[type="datetime-local"],
.taid-component-panel input[type="number"] {
  color: var(--text-soft);
}

/* Joomla's chosen.js / tom-select dropdowns */
/* .tom-select-custom is not always present — target .ts-control directly */
.taid-component-panel .chzn-container .chzn-single,
.taid-component-panel .chzn-container .chzn-drop,
.taid-component-panel .ts-control,
.taid-component-panel .ts-dropdown,
.taid-component-panel .ts-dropdown-content {
  background: var(--bg3) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-soft) !important;
}
.taid-component-panel .ts-control input { color: var(--text-soft) !important; }
.taid-component-panel .ts-dropdown .option {
  background: var(--bg3);
  color: var(--text-soft);
}
.taid-component-panel .ts-dropdown .option:hover,
.taid-component-panel .ts-dropdown .option.active {
  background: var(--violet-dim);
  color: var(--violet-lt);
}

/* "Remove item" tag in chosen / tom-select */
.taid-component-panel .ts-control .item,
.taid-component-panel .chzn-choices .search-choice {
  background: rgba(124,58,237,.18) !important;
  border-color: rgba(124,58,237,.3) !important;
  color: var(--violet-lt) !important;
}

/* Choices.js dropdowns (Category/Tags in main article form) */
.taid-component-panel .choices__inner,
body.taid-component-only .choices__inner {
  background: var(--bg3) !important;
  border-color: var(--border-md) !important;
  color: var(--text-soft) !important;
  border-radius: 6px !important;
}
.taid-component-panel .choices__input,
.taid-component-panel .choices__input--cloned,
body.taid-component-only .choices__input,
body.taid-component-only .choices__input--cloned {
  background: transparent !important;
  color: var(--text-soft) !important;
}
.taid-component-panel .choices__list--dropdown,
.taid-component-panel .choices__list[aria-expanded],
body.taid-component-only .choices__list--dropdown,
body.taid-component-only .choices__list[aria-expanded] {
  background: var(--bg3) !important;
  border-color: var(--border-md) !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
.taid-component-panel .choices__list--dropdown .choices__item,
body.taid-component-only .choices__list--dropdown .choices__item {
  color: var(--text-soft) !important;
}
.taid-component-panel .choices__list--dropdown .choices__item.is-highlighted,
.taid-component-panel .choices__list--dropdown .choices__item:hover,
body.taid-component-only .choices__list--dropdown .choices__item.is-highlighted,
body.taid-component-only .choices__list--dropdown .choices__item:hover {
  background: var(--violet-dim) !important;
  color: var(--violet-lt) !important;
}
.taid-component-panel .choices__list--multiple .choices__item,
.taid-component-panel .choices__list--single .choices__item {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-soft) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
.taid-component-panel .choices__button_joomla {
  flex-shrink: 0 !important;
  margin-left: .75rem !important;
  /* Hide "Remove item" text — show × via ::after instead */
  font-size: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1 !important;
  opacity: .5 !important;
  cursor: pointer !important;
  transition: opacity .15s !important;
}
.taid-component-panel .choices__button_joomla::after {
  content: '×' !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  color: var(--muted) !important;
  display: block !important;
}
.taid-component-panel .choices__button_joomla:hover {
  opacity: 1 !important;
}
.taid-component-panel .choices__button_joomla:hover::after {
  color: var(--rose) !important;
}
.taid-component-panel .choices__placeholder,
body.taid-component-only .choices__placeholder {
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* ─── Date picker calendar (Start/Finish Featured/Publishing) ─── */
.taid-component-panel .calendar-container,
.taid-component-panel .js-calendar .calendar-container {
  --calendar-bg: var(--bg3) !important;
}
.taid-component-panel .calendar-container table {
  background: var(--bg3) !important;
  border: 1px solid var(--border-md) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.6) !important;
  border-radius: 8px !important;
}
/* Header row — year/month navigation */
.taid-component-panel .calendar-header td,
.taid-component-panel .calendar-header .title {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}
.taid-component-panel .calendar-header a.js-btn {
  color: var(--violet-lt) !important;
  cursor: pointer !important;
}
.taid-component-panel .calendar-header a.js-btn:hover {
  color: var(--cyan) !important;
}
/* Day name row */
.taid-component-panel .daynames td,
.taid-component-panel .day-name {
  color: var(--muted) !important;
  background: var(--bg2) !important;
  font-size: .72rem !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
/* Week number column */
.taid-component-panel .day.wn {
  color: var(--muted) !important;
  background: var(--bg2) !important;
  font-size: .72rem !important;
}
/* Regular days */
.taid-component-panel .day {
  color: var(--text-soft) !important;
  background: transparent !important;
  border-radius: 4px !important;
  transition: background .12s, color .12s !important;
}
.taid-component-panel .day:not(.disabled):hover {
  background: rgba(124,58,237,.2) !important;
  color: var(--violet-lt) !important;
}
/* Weekend days */
.taid-component-panel .day.weekend {
  color: var(--cyan-lt, #67e8f9) !important;
}
/* Disabled / other-month days */
.taid-component-panel .day.disabled,
.taid-component-panel .day.othermonth {
  color: var(--muted) !important;
  opacity: .4 !important;
}
/* Today */
.taid-component-panel .day.today {
  background: rgba(124,58,237,.15) !important;
  color: var(--violet-lt) !important;
  font-weight: 600 !important;
}
/* Selected day */
.taid-component-panel .day.selected {
  background: var(--violet) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
/* Time row selects */
.taid-component-panel .calendar-container select.time {
  background: var(--bg2) !important;
  border: 1px solid var(--border-md) !important;
  color: var(--text-soft) !important;
  border-radius: 4px !important;
}
/* Now / None / OK action buttons at bottom */
.taid-component-panel .calendar-container .btn-now,
.taid-component-panel .calendar-container .btn-none,
.taid-component-panel .calendar-container .btn-ok,
.taid-component-panel .calendar-container tfoot button,
.taid-component-panel .calendar-container tfoot td {
  background: var(--bg2) !important;
  border: 1px solid var(--border-md) !important;
  color: var(--text-soft) !important;
  border-radius: 4px !important;
  font-size: .8rem !important;
}
.taid-component-panel .calendar-container .btn-ok {
  background: rgba(124,58,237,.2) !important;
  border-color: rgba(124,58,237,.5) !important;
  color: var(--violet-lt) !important;
}
.taid-component-panel .calendar-container .btn-ok:hover {
  background: var(--violet) !important;
  color: #fff !important;
}

/* Helper text, character counters */
joomla-tab-element .form-text,
joomla-tab-element .text-muted,
.taid-component-panel .form-text,
.taid-component-panel .text-muted {
  color: var(--muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   JOOMLA EDITOR-XTD DIALOG CHROME
   The <joomla-dialog> custom element is appended to <body> and contains
   a native <dialog> with an iframe (tmpl=component).
   We style the chrome here; iframe content is styled via component.php.
   ═══════════════════════════════════════════════════════════════════════ */

joomla-dialog dialog {
  width: min(1060px, 90vw);
  height: min(800px, 85vh);
  background: var(--bg2);
  border: 1px solid var(--border-md);
  border-radius: 12px;
  color: var(--text);
  padding: 0;
  overflow: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,.75), 0 0 0 1px rgba(124,58,237,.18);
  resize: both;
  min-width: 400px;
  min-height: 300px;
  max-width: 95vw;
  max-height: 95vh;
}

joomla-dialog dialog::backdrop {
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.joomla-dialog-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.joomla-dialog-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
  flex-shrink: 0;
}

.joomla-dialog-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  letter-spacing: .02em;
}

.joomla-dialog-header .header-icon {
  color: var(--violet-lt);
  font-size: 1.1rem;
}

/* Close button — Bootstrap CSS not loaded, must define from scratch */
.btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  opacity: .5;
  transition: opacity .15s;
}
.btn-close::before {
  content: '\00d7';             /* × multiplication sign */
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-soft);
}
.btn-close:hover { opacity: 1; }
.btn-close:hover::before { color: var(--text); }

.joomla-dialog-header .btn-close {
  opacity: .6;
  flex-shrink: 0;
}
.joomla-dialog-header .btn-close:hover { opacity: 1; }

.joomla-dialog-body {
  flex: 1;
  overflow: hidden;
  display: flex;
}

.joomla-dialog-body .iframe-content {
  border: 0;
  display: block;
  width: 100%;
  height: 100%;
  flex: 1;
}

.joomla-dialog-footer.empty {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPONENT-ONLY (tmpl=component) — IFRAME CONTENT DARK THEME
   Applies inside article/contact/media browser iframes loaded via
   component.php (body.taid-component-only).
   ═══════════════════════════════════════════════════════════════════════ */

body.taid-component-only {
  background: var(--bg) !important;
  color: var(--text);
}

body.taid-component-only .taid-main {
  padding: 0;
}

body.taid-component-only .taid-container {
  padding: .75rem 1rem;
  max-width: 100%;
}

body.taid-component-only .taid-component-panel {
  background: transparent;
  border: none;
  padding: 0;
}

/* Headings */
body.taid-component-only h1,
body.taid-component-only h2,
body.taid-component-only h3,
body.taid-component-only h4 {
  font-family: var(--font-display);
  color: var(--text);
}

/* Links */
body.taid-component-only a:not(.btn):not(.page-link) {
  color: var(--violet-lt);
  text-decoration: none;
}
body.taid-component-only a:not(.btn):not(.page-link):hover {
  color: var(--cyan);
  text-decoration: underline;
}

/* Bootstrap bg-white and card overrides */
body.taid-component-only .bg-white,
body.taid-component-only .card {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  color: var(--text-soft) !important;
}

/* Form controls */
body.taid-component-only input[type="text"],
body.taid-component-only input[type="search"],
body.taid-component-only input[type="number"],
body.taid-component-only select {
  background: var(--bg3) !important;
  border: 1px solid var(--border-md) !important;
  color: var(--text-soft) !important;
  border-radius: 6px;
}
body.taid-component-only input[type="text"]:focus,
body.taid-component-only input[type="search"]:focus,
body.taid-component-only select:focus {
  border-color: var(--violet) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(124,58,237,.2) !important;
}
body.taid-component-only select option {
  background: var(--bg3);
  color: var(--text-soft);
}

/* General text — keep everything readable */
body.taid-component-only p,
body.taid-component-only small,
body.taid-component-only span,
body.taid-component-only li,
body.taid-component-only div {
  color: inherit;
}
body.taid-component-only .text-muted,
body.taid-component-only .form-text {
  color: var(--text-soft) !important;
}

/* Labels */
body.taid-component-only label {
  color: var(--text-soft);
  font-size: .8rem;
  font-family: var(--font-display);
}

/* Buttons */
body.taid-component-only .btn {
  letter-spacing: .03em;
}
body.taid-component-only .btn-secondary,
body.taid-component-only .btn-outline-secondary {
  background: var(--bg3) !important;
  border-color: var(--border-lg) !important;
  color: var(--text) !important;
}
body.taid-component-only .btn-secondary:hover,
body.taid-component-only .btn-outline-secondary:hover {
  background: var(--bg2) !important;
  border-color: var(--violet) !important;
  color: var(--violet-lt) !important;
}
body.taid-component-only .btn-primary:hover {
  background: var(--violet-dark) !important;
  border-color: var(--violet-dark) !important;
}
/* btn-link (Filter Options, Search Articles, etc.) */
body.taid-component-only .btn-link {
  color: var(--violet-lt) !important;
  text-decoration: none !important;
  background: transparent !important;
  border-color: transparent !important;
}
body.taid-component-only .btn-link:hover {
  color: var(--cyan) !important;
  text-decoration: underline !important;
}
/* Searchtools filter/clear/search buttons — secondary, not violet CTA */
body.taid-component-only .js-stools-btn-filter,
body.taid-component-only .js-stools-btn-clear,
body.taid-component-only .filter-search-bar__button,
body.taid-component-only [type="submit"],
body.taid-component-only button[type="submit"] {
  background: var(--bg3) !important;
  border-color: var(--border-lg) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transform: none !important;
}
body.taid-component-only .js-stools-btn-filter:hover,
body.taid-component-only .js-stools-btn-clear:hover,
body.taid-component-only .filter-search-bar__button:hover,
body.taid-component-only [type="submit"]:hover,
body.taid-component-only button[type="submit"]:hover {
  background: var(--bg2) !important;
  border-color: var(--violet) !important;
  color: var(--violet-lt) !important;
  transform: none !important;
}

/* Joomla search-tools filter bar */
body.taid-component-only .js-stools-container-bar,
body.taid-component-only .js-stools-container-filters,
body.taid-component-only .js-stools-container-list {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
}
body.taid-component-only .js-stools-container-filters {
  border-top: 1px solid var(--border) !important;
  padding: .75rem 0 !important;
}
/* Toolbar / header rows that Bootstrap gives a white/light bg */
body.taid-component-only .toolbar,
body.taid-component-only .filter-search-bar,
body.taid-component-only .searchtools-bar {
  background: transparent !important;
}
body.taid-component-only .row {
  --bs-gutter-x: 1rem;
}

/* Table */
body.taid-component-only table > thead > tr > th {
  background: var(--bg2) !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border-md) !important;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .5rem .75rem;
}
body.taid-component-only table > thead > tr > th a {
  color: var(--muted) !important;
}
body.taid-component-only table > thead > tr > th a:hover {
  color: var(--text) !important;
}
body.taid-component-only table > tbody > tr > td {
  background: transparent !important;
  color: var(--text-soft) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: .5rem .75rem;
}
body.taid-component-only .table-striped > tbody > tr:nth-child(odd) > td {
  background: rgba(255,255,255,.02) !important;
}
body.taid-component-only table > tbody > tr:hover > td {
  background: var(--bg3) !important;
}

/* Pagination */
body.taid-component-only .pagination .page-link {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
  color: var(--text-soft) !important;
}
body.taid-component-only .pagination .page-item.active .page-link {
  background: var(--violet) !important;
  border-color: var(--violet) !important;
  color: #fff !important;
}
body.taid-component-only .pagination .page-item.disabled .page-link {
  background: var(--bg2) !important;
  color: var(--muted) !important;
}

/* Status badges */
body.taid-component-only .badge.bg-success { background: var(--emerald-dim) !important; color: var(--emerald) !important; border: 1px solid rgba(16,185,129,.25) !important; }
body.taid-component-only .badge.bg-danger  { background: var(--rose-dim) !important;    color: var(--rose) !important;    border: 1px solid rgba(244,63,94,.25) !important; }
body.taid-component-only .badge.bg-warning { background: var(--amber-dim) !important;   color: var(--amber) !important;   border: 1px solid rgba(245,158,11,.25) !important; }
body.taid-component-only .badge.bg-secondary{ background: var(--bg3) !important;        color: var(--muted) !important; }

/* Alert messages */
body.taid-component-only .alert-info {
  background: var(--cyan-dim);
  border-color: rgba(6,182,212,.25);
  color: var(--cyan-lt);
}
body.taid-component-only .alert-warning {
  background: var(--amber-dim);
  border-color: rgba(245,158,11,.25);
  color: var(--amber);
}

/* Filter/search bar — layout */
body.taid-component-only .filter-search-bar {
  flex: 1 1 auto;
  min-width: 0;
}
body.taid-component-only .filter-search-bar .input-group {
  flex-wrap: nowrap !important;
}
body.taid-component-only .filter-search-bar__button {
  color: var(--violet-lt) !important;
  padding: .4rem .75rem !important;
  line-height: 1 !important;
  flex-shrink: 0;
  margin-left: .4rem !important;
  border-radius: var(--radius) !important;
}
/* Search description text — hide in modal context */
body.taid-component-only .filter-search-bar .filter-search-bar__description {
  display: none;
}
/* Search/filter toolbar — single row */
body.taid-component-only .js-stools-container-bar .btn-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .5rem !important;
}
body.taid-component-only .js-stools-container-bar .btn-group,
body.taid-component-only .js-stools-container-bar .filter-search-bar {
  margin-right: 0 !important;
}
/* Ordering selects — inline with toolbar, not floating */
body.taid-component-only .ordering-select {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-left: auto;
  flex-shrink: 0;
}
body.taid-component-only .ordering-select .form-select {
  width: auto !important;
  min-width: 140px;
  margin-bottom: 0 !important;
  font-size: .82rem;
}
/* FILTER OPTIONS + CLEAR buttons — proper button look */
body.taid-component-only .filter-search-actions.btn-group {
  gap: .3rem;
}
body.taid-component-only .js-stools-btn-filter,
body.taid-component-only .js-stools-btn-clear {
  padding: .4rem .75rem !important;
  font-size: .78rem !important;
  white-space: nowrap;
  border-radius: var(--radius) !important;
}
/* Filter selects — 2-column grid */
body.taid-component-only .js-stools-container-filters {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: .5rem !important;
  padding: .75rem .5rem !important;
}
body.taid-component-only .js-stools-container-filters .js-stools-field-filter {
  margin-bottom: 0;
}
body.taid-component-only .js-stools-container-filters .js-stools-field-filter .form-select {
  margin-bottom: 0;
}
/* List limit/ordering — horizontal */
body.taid-component-only .js-stools-container-list {
  display: flex !important;
  gap: .5rem !important;
  padding: .5rem 0 !important;
}
body.taid-component-only .js-stools-container-list .js-stools-field-list {
  flex: 0 1 auto;
}
body.taid-component-only .js-stools-container-list .js-stools-field-list .form-select {
  margin-bottom: 0;
  max-width: 220px;
}
/* Table wrapper — scrollable on narrow modals */
body.taid-component-only .table-responsive,
body.taid-component-only table {
  width: 100%;
}
body.taid-component-only table {
  border-collapse: collapse;
}
/* Table links */
body.taid-component-only table a {
  color: var(--violet-lt);
  text-decoration: none;
}
body.taid-component-only table a:hover {
  color: var(--cyan-lt);
}
/* Small / muted text in table cells */
body.taid-component-only table small,
body.taid-component-only table .small {
  color: var(--muted) !important;
  font-size: .75rem;
}
/* Hidden fields inside table (e.g. alias line) */
body.taid-component-only table .break-word {
  word-break: break-all;
}

/* Page header */
body.taid-component-only .page-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: .75rem;
  margin-bottom: 1rem;
}

/* Scrollbar */
body.taid-component-only ::-webkit-scrollbar { width: 6px; height: 6px; }
body.taid-component-only ::-webkit-scrollbar-track { background: var(--bg2); }
body.taid-component-only ::-webkit-scrollbar-thumb { background: rgba(124,58,237,.3); border-radius: 3px; }
body.taid-component-only ::-webkit-scrollbar-thumb:hover { background: rgba(124,58,237,.55); }

/* Choices.js — component-only unique overrides (tags chips) */
body.taid-component-only .choices__list--multiple .choices__item {
  background: var(--violet-dim) !important;
  border-color: rgba(124,58,237,.3) !important;
  color: var(--violet-lt) !important;
  border-radius: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   MEDIA MANAGER (com_media Vue app — tmpl=component iframe)
   The media browser loads its own CSS with admin-template variables.
   We override the white backgrounds here.
   ═══════════════════════════════════════════════════════════════════════ */

/* Supply missing Atum admin template vars the media app expects */
body.taid-component-only {
  --template-bg-dark-3:  rgba(255,255,255,.03);
  --template-bg-dark-5:  rgba(255,255,255,.05);
  --template-bg-dark-7:  rgba(255,255,255,.07);
  --template-bg-dark-10: rgba(255,255,255,.10);
  --template-bg-dark-20: rgba(255,255,255,.20);
  --template-link-color: var(--violet-lt);
  --template-link-hover:  var(--cyan);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text-soft);
}

/* Main media manager containers */
body.taid-component-only .media-manager-main,
body.taid-component-only .media-container,
body.taid-component-only .media-manager-sidebar,
body.taid-component-only .media-browser,
body.taid-component-only .media-browser-container,
body.taid-component-only .media-browser-table,
body.taid-component-only .media-browser-infobar,
body.taid-component-only .media-browser-toolbar,
body.taid-component-only .media-browser-uploader,
body.taid-component-only .media-toolbar-filter,
body.taid-component-only .media-toolbar,
body.taid-component-only .media-sidebar {
  background: var(--bg) !important;
  color: var(--text-soft) !important;
  border-color: var(--border) !important;
}

/* Sidebar tree */
body.taid-component-only .media-tree,
body.taid-component-only .media-tree-item {
  background: transparent !important;
  color: var(--text-soft) !important;
}
body.taid-component-only .media-drive-name {
  color: var(--violet-lt) !important;
}
body.taid-component-only .media-drive-name:hover,
body.taid-component-only .media-drive-name:focus-visible {
  color: var(--cyan) !important;
}
body.taid-component-only .media-drive-name.active,
body.taid-component-only .media-tree-item .active {
  color: var(--cyan) !important;
  font-weight: 600;
}

/* File grid items */
body.taid-component-only .media-browser-item,
body.taid-component-only .media-browser-item-info,
body.taid-component-only .media-browser-item-preview {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  color: var(--text-soft) !important;
}
body.taid-component-only .media-browser-item:hover {
  background: var(--bg3) !important;
  border-color: var(--border-md) !important;
}
body.taid-component-only .media-browser-item.selected,
body.taid-component-only .media-browser-item.active {
  border-color: var(--violet) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.20) !important;
}

/* Toolbar buttons in media manager */
body.taid-component-only .media-toolbar .btn,
body.taid-component-only .media-browser-toolbar .btn {
  background: var(--bg3) !important;
  border-color: var(--border-lg) !important;
  color: var(--text) !important;
}
body.taid-component-only .media-toolbar .btn:hover,
body.taid-component-only .media-browser-toolbar .btn:hover {
  border-color: var(--violet) !important;
  color: var(--violet-lt) !important;
}

/* Upload / Insert button */
body.taid-component-only .media-toolbar .btn-success,
body.taid-component-only .media-browser-toolbar .btn-success {
  background: var(--emerald-dim) !important;
  border-color: var(--emerald) !important;
  color: var(--emerald) !important;
}
body.taid-component-only .media-toolbar .btn-danger,
body.taid-component-only .media-browser-toolbar .btn-danger {
  background: var(--rose-dim) !important;
  border-color: var(--rose) !important;
  color: var(--rose) !important;
}

/* Infobar / breadcrumb strip */
body.taid-component-only .media-breadcrumb,
body.taid-component-only .media-breadcrumb-item {
  background: var(--bg2) !important;
  color: var(--muted) !important;
}
body.taid-component-only .media-breadcrumb-item a {
  color: var(--violet-lt) !important;
}

/* Upload dropzone */
body.taid-component-only .media-upload-drop-zone,
body.taid-component-only .upload-select-container {
  background: var(--bg2) !important;
  border-color: var(--border-md) !important;
  color: var(--muted) !important;
}

/* Media sidebar disk panel — override Joomla's default white bg */
body.taid-component-only .media-disk {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  padding: .5rem;
}
body.taid-component-only .media-disk summary h2 {
  color: var(--text) !important;
  font-size: .85rem;
}
/* Media toolbar checkbox — dark theme */
body.taid-component-only .media-toolbar-select-all {
  accent-color: var(--violet);
}
/* File browser "Browse..." button and input */
body.taid-component-only input[type="file"] {
  color: var(--text-soft);
}

/* Pagination text in component-only popups (Contact, Module, etc.) */
body.taid-component-only .pagination__wrapper .text-end {
  color: var(--muted) !important;
  font-size: .8rem;
}

/* ─── Contact form (com_contact single view) ─────────────── */
/* Override archive-filter flex: form must be block so the submit
   button (direct form child, outside fieldset) stacks below fields */
.com_contact.view-contact form.form-validate {
  display: block;
}
/* Fields inside fieldset: flex column for even gap */
.com_contact.view-contact form.form-validate fieldset {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
/* Submit button row sits below the fieldset with clear separation */
.com_contact.view-contact form.form-validate > .control-group {
  margin-top: 1.5rem;
}
/* Validation feedback text: keep readable inline */
.com_contact.view-contact .control-label .form-control-feedback {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rose);
  margin-left: .4rem;
}
/* Strip Bootstrap 3 .well chrome */
.com_contact.view-contact .well {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* ─── Horizontal form reset (Joomla legacy) ──────────────── */
.form-horizontal .control-group {
  display: block;
}
.form-horizontal .control-group .control-label {
  float: none;
  width: auto;
  text-align: left;
  margin-bottom: .35rem;
}
.form-horizontal .control-group .controls {
  margin-left: 0;
}

/* ─── Contacts table (Category & Featured views) ─────────── */
/* Contact name link */
.com-contact-category .list-title a,
.com-contact-featured .item-title a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--violet-lt);
  text-decoration: none;
  transition: color .15s;
}
.com-contact-category .list-title a:hover,
.com-contact-featured .item-title a:hover { color: var(--cyan-lt); }
/* Column header sort links */
.com-contact-category table th a,
.com-contact-featured table th a {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.com-contact-category table th a:hover,
.com-contact-featured table th a:hover { color: var(--text-soft); }

/* ─── News Feeds — Root Categories list ─────────────────── */
/* view-categories: card grid matching com_content categories view */
.com-newsfeeds-categories .categories-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.com-newsfeeds-categories .categories-list > h1 {
  grid-column: 1 / -1;
}
.com-newsfeeds-categories__items {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.com-newsfeeds-categories__items:hover {
  border-color: rgba(6,182,212,.45);
  box-shadow: 0 0 18px rgba(6,182,212,.15);
}

.com-newsfeeds-categories__items h3.item-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.com-newsfeeds-categories__items h3.item-title a {
  color: var(--text);
  text-decoration: none;
  transition: color .15s;
}
.com-newsfeeds-categories__items h3.item-title a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.com-newsfeeds-categories__items h3.item-title a:hover { color: var(--cyan-lt); }

/* Feed count badge — cyan tint to match news feed colour language */
.com-newsfeeds-categories__items .badge.bg-info {
  background: rgba(6,182,212,.12) !important;
  color: var(--cyan-lt) !important;
  border: 1px solid rgba(6,182,212,.28);
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .03em;
  padding: .2rem .45rem;
}

/* ─── News Feeds Category view ───────────────────────────── */
/* Strip bg3 from items — transparent rows, border-only separation */
.com-newsfeeds-category .list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: transparent;
}
.com-newsfeeds-category .list-group-item {
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding: .85rem 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .3rem !important;
}
/* Kill the <br> float-clearers — flex handles stacking */
.com-newsfeeds-category .list-group-item br { display: none; }
/* Un-float the spans so flex layout takes over */
.com-newsfeeds-category .list-group-item span.list { float: none !important; }
/* Feed name link */
.com-newsfeeds-category span.list .list-title a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--violet-lt);
  text-decoration: none;
  transition: color .15s;
}
.com-newsfeeds-category span.list .list-title a:hover { color: var(--cyan-lt); }
/* Raw URL — mono, muted, smaller */
.com-newsfeeds-category span.list > a {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--muted);
  opacity: .75;
  text-decoration: none;
  word-break: break-all;
}
.com-newsfeeds-category span.list > a:hover { opacity: 1; color: var(--cyan-lt); }

/* News feed category — filter bar (search + display # select) */
.com-newsfeeds-category__filters {
  display: flex;
  align-items: center;
  gap: .75rem;
  border: none;
  margin: 0 0 1rem;
  padding: 0;
}
.com-newsfeeds-category__filters .btn-group.float-end {
  float: none !important;
  margin-left: auto;
}
.com-newsfeeds-category__filters .form-select {
  width: auto !important;
  min-width: 5rem;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-soft) !important;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 500;
  height: 30px;
  box-sizing: border-box;
  transform: translateY(-1.5px);
  padding: 0 2.2rem 0 .85rem;
  background-image: var(--chevron-icon) !important;
  background-repeat: no-repeat !important;
  background-position: right .6rem center !important;
  background-size: 14px 10px !important;
}
.com-newsfeeds-category__filters .inputbox {
  background-color: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: .75rem;
  height: 30px !important;
  box-sizing: border-box;
  padding: 0 1rem !important;
  transform: translateY(-5px);
  border-radius: var(--radius);
}
.com-newsfeeds-category__filters .inputbox::placeholder { color: var(--muted); }
.com-newsfeeds-category__filters .form-select { border-radius: var(--radius); }

/* ─── Single News Feed view ──────────────────────────────── */
/* Feed logo — absolute top-right, clear of text flow */
.com-newsfeeds-newsfeed {
  position: relative;
  padding-right: 5rem;
}
.com-newsfeeds-newsfeed__feed-image {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 0;
}
.com-newsfeeds-newsfeed__feed-image img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 6px;
  opacity: .65;
}
/* Feed title: links to the RSS URL — style as a heading, not a link */
.com-newsfeeds-newsfeed h2 {
  margin-bottom: .5rem;
}
.com-newsfeeds-newsfeed h2 a {
  color: var(--text) !important;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  transition: color .15s;
}
.com-newsfeeds-newsfeed h2 a::after {
  content: ' ↗';
  font-size: .6em;
  color: var(--muted);
  vertical-align: super;
  margin-left: .1em;
}
.com-newsfeeds-newsfeed h2 a:hover { color: var(--violet-lt) !important; }
/* Description div (empty container Joomla outputs) */
.com-newsfeeds-newsfeed__description { margin-bottom: .5rem; }
/* Items list — kill Bootstrap bullets and padding */
.com-newsfeeds-newsfeed__items {
  list-style: none !important;
  padding: 0 !important;
  margin: 1.25rem 0 0 !important;
}
.com-newsfeeds-newsfeed__items li {
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}
/* Article headline */
.com-newsfeeds-newsfeed__items h3.feed-link {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: .4rem;
  line-height: 1.4;
}
.com-newsfeeds-newsfeed__items h3.feed-link a {
  color: var(--text-soft);
  text-decoration: none;
  transition: color .15s;
}
.com-newsfeeds-newsfeed__items h3.feed-link a:hover { color: var(--cyan-lt); }
/* Article snippet — clamped to 3 lines */
.com-newsfeeds-newsfeed__items .feed-item-description {
  font-size: .82rem;
  line-height: 1.7;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Tags List (com_tags) ───────────────────────────────────── */
/* Each tag is in its own <ul> — collapse spacing, kill bullets */
.com-tags__items .com-tags__category.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: transparent;
  margin-bottom: 0;
  list-style: none;
}
.com-tags__items .com-tags__category + .com-tags__category {
  margin-top: 0;
}
/* Tag item — clean separator line, full-width click target */
.com-tags__items .list-group-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0;
  border-radius: 0 !important;
  list-style: none;
}
/* Tag name — block link for full-row clickable area */
.com-tags__items .list-group-item h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
}
.com-tags__items .list-group-item h3 a {
  color: var(--violet-lt);
  text-decoration: none;
  display: block;
  padding: 1rem .5rem;
}
.com-tags__items .list-group-item h3 a:hover {
  color: var(--cyan-lt);
}
/* Kill Bootstrap list-group-item-action hover on tag rows */
.com-tags__items .list-group-item.list-group-item-action:hover,
.com-tags__items .list-group-item.list-group-item-action:focus {
  background: transparent !important;
}
/* Filter bar — same pattern as other views */
.com-tags-tags__filter.btn-group {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.com-tags-tags__filter .inputbox {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: .82rem;
  padding: .4rem .85rem;
  border-radius: var(--radius);
  flex: 1;
}
.com-tags-tags__filter .inputbox::placeholder { color: var(--muted); }
/* "Display #" select — push right */
.com-tags__items .btn-group.float-end {
  margin-bottom: 1rem;
}
.com-tags__items .btn-group.float-end .form-select,
.taid-component-panel .btn-group .form-select {
  width: auto;
  padding-right: 2.25rem;
}
/* Tag description if present */
.com-tags__items .list-group-item .tag-body {
  color: var(--text-soft);
  font-size: .85rem;
  margin-top: .25rem;
}

/* ─── Privacy Request (com_privacy) ──────────────────────────────── */
.request-form .form-select,
.taid-component-panel .request-form .btn-primary {
  height: 38px !important;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}
.request-form .form-select { margin-bottom: 0; }

/* ─── Smart Search (com_finder) ──────────────────────────────── */
/* Spacing between search bar fieldset and advanced section */
.com-finder__search.word { margin-bottom: 1.5rem !important; }

/* Tips card — dark theme override for .card-outline-secondary */
.com-finder__tips.card {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  --bs-card-border-color: var(--border);
  margin: 1.5rem 0 2rem !important;
}
.com-finder__tips .card-body { color: var(--text-soft); padding: 1.25rem 1.5rem; font-size: .85rem; }
.com-finder__tips .card-body p { margin-bottom: .6rem; }
.com-finder__tips .card-body strong { color: var(--text); }

/* Search input group — match heights */
.com-finder .input-group {
  flex-wrap: wrap;
  gap: .5rem;
}
.com-finder .input-group .form-control {
  height: 40px;
  box-sizing: border-box;
  flex: 1 1 200px;
}
.com-finder .input-group .btn {
  height: 40px;
  box-sizing: border-box;
  white-space: nowrap;
  border-radius: var(--radius) !important;
}

/* Advanced search filter dropdowns */
.com-finder__filter .control-group {
  margin-bottom: 1.1rem;
}
.com-finder__filter .control-label label {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: .35rem;
}
.com-finder__filter .form-select {
  margin-bottom: 0;
}

/* Search results count */
.com-finder .search-results-description {
  color: var(--text-soft);
  font-size: .9rem;
  margin-bottom: 1.5rem;
}
.com-finder .search-results-description a {
  color: var(--violet-lt);
}

/* Result items list */
.com-finder .search-results {
  list-style: none;
  padding: 0;
}
.com-finder .result__item {
  padding: 1.25rem 0;
  border-bottom: none;
}
/* Joomla's finder.min.css sets border-top:1px solid (inherits white text color) — override */
.com-finder .result__item + .result__item {
  border-top-color: var(--border) !important;
}
.com-finder .result__item:first-child {
  border-top: 1px solid var(--border);
}

/* Result title — hide the cite URL, style the title */
.com-finder .result__title {
  margin: 0 0 .4rem;
}
.com-finder .result__title-url {
  display: none;
}
.com-finder .result__title-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
}
.com-finder .result__title-link {
  color: var(--violet-lt);
  text-decoration: none;
}
.com-finder .result__title-link:hover {
  color: var(--cyan-lt);
  text-decoration: none;
}
/* Joomla's finder.css underlines title-text on hover — kill it */
.com-finder .result__title-link:hover .result__title-text,
.com-finder .result__title-link:focus .result__title-text {
  text-decoration: none;
}

/* Result description / snippet */
.com-finder .result__description {
  color: var(--text-soft);
  font-size: .875rem;
  line-height: 1.55;
  margin: 0 0 .5rem;
}
.com-finder .result__date {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .75rem;
  margin-right: .4rem;
}

/* Taxonomy metadata (Type | Author | Category) */
.com-finder .result__taxonomy {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: .15rem .6rem;
  font-size: .78rem;
}
.com-finder .result__taxonomy-item {
  color: var(--muted);
}
.com-finder .result__taxonomy-item span {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .7rem;
  color: var(--muted);
  margin-right: .25rem;
}
.com-finder .result__taxonomy-item + .result__taxonomy-item::before {
  content: "│";
  margin-right: .6rem;
  color: var(--border-strong);
}

/* Highlight marks — dark theme override (kills yellow) */
.com-finder mark[data-markjs],
.com-finder mark {
  background: rgba(124, 58, 237, .2);
  color: var(--violet-lt);
  padding: .05em .15em;
  border-radius: 2px;
}

/* Pagination on search results */
.com-finder .pagination {
  margin-top: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KUNENA FORUM — Signal Dark
   Scoped to #kunena to avoid conflicts with Bootstrap globals
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset Bootstrap light surfaces inside Kunena ─────────────────────────── */
#kunena,
#kunena * {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: rgba(255,255,255,.07);
}

/* ── Kunena outer wrapper ─────────────────────────────────────────────────── */
#kunena.layout {
  padding: 0;
}

/* ── Top navbar (Kunena user bar / login) ─────────────────────────────────── */
#kunena .navbar.navbar-light.bg-light {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) !important;
  border-radius: .5rem !important;
  padding: .5rem 1rem;
  margin-bottom: 1.25rem;
}
#kunena .navbar-toggler {
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
#kunena .navbar-toggler-icon {
  filter: invert(1) opacity(.6);
}
/* Login button */
#kunena .btn.btn-light.dropdown-toggle {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-soft) !important;
  font-family: var(--font-display);
  font-size: .8rem;
  transition: border-color .15s, color .15s;
}
#kunena .btn.btn-light.dropdown-toggle svg,
#kunena .btn.btn-light.dropdown-toggle .bi {
  color: var(--text-soft) !important;
  fill: currentColor;
}
#kunena .btn.btn-light.dropdown-toggle:hover {
  border-color: var(--violet) !important;
  color: var(--violet-lt) !important;
}
#kunena .btn.btn-light.dropdown-toggle:hover svg,
#kunena .btn.btn-light.dropdown-toggle:hover .bi {
  color: var(--violet-lt) !important;
}
/* Login dropdown panel */
#kunena .dropdown-menu.dropdown-menu-end {
  background: var(--bg3) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: .5rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
  padding: 1.25rem !important;
  min-width: 240px;
}
#kunena .dropdown-menu .form-group {
  margin-bottom: .75rem;
}
#kunena .dropdown-menu .form-control,
#kunena .dropdown-menu .input-group-text {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
#kunena .dropdown-menu .form-control::placeholder {
  color: var(--muted) !important;
}
#kunena .dropdown-menu .input-group-text {
  color: var(--muted) !important;
}
#kunena .dropdown-menu label {
  color: var(--text-soft);
  font-size: .75rem;
}
#kunena .dropdown-menu a {
  color: var(--violet-lt);
  font-size: .78rem;
}
#kunena .dropdown-menu a.btn-link {
  display: block;
  text-align: left;
  padding: .35rem .5rem;
  text-decoration: none;
}
#kunena .dropdown-menu a:hover {
  color: var(--cyan-lt);
}
#kunena .dropdown-menu a.btn-link:hover {
  background: rgba(124,58,237,.1);
  border-radius: .25rem;
}
/* Remember me checkbox — dark themed */
#kunena .custom-control-label { color: var(--text-soft); font-size: .8rem; }
#kunena .dropdown-menu input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  background: var(--bg) !important;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
}
#kunena .dropdown-menu input[type="checkbox"]:checked {
  background: var(--violet) !important;
  border-color: var(--violet);
}
#kunena .dropdown-menu input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#kunena #kform-login-remember {
  margin: .9rem 0 .25rem;
}
#kunena #kform-login-desktop-submit {
  margin-top: .5rem;
}
#kunena #kform-login-desktop-submit p {
  margin-bottom: .6rem;
}
#kunena #kform-login-desktop-submit .btn {
  width: 100%;
  padding: .5rem 1rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
/* Links below login button — full-width clickable blocks */
#kunena #kform-login-desktop-submit p a {
  display: block;
  padding: .4rem .65rem;
  border-radius: .3rem;
  color: var(--violet-lt);
  font-size: .82rem;
  text-decoration: none;
  transition: background .2s, color .2s;
}
#kunena #kform-login-desktop-submit p a:hover {
  background: rgba(124,58,237,.1);
  color: var(--cyan-lt);
}
#kunena #kform-login-desktop-submit p br {
  display: none;  /* remove <br> between links — blocks handle spacing */
}
/* Same for full-page login form */
#kunena .kloginform #kform-login-submit p a {
  display: block;
  padding: .4rem .65rem;
  border-radius: .3rem;
  text-decoration: none;
  transition: background .2s, color .2s;
}
#kunena .kloginform #kform-login-submit p a:hover {
  background: rgba(124,58,237,.1);
  color: var(--cyan-lt);
}
#kunena .kloginform #kform-login-submit p br {
  display: none;
}

/* ── Offcanvas (mobile Kunena nav) ────────────────────────────────────────── */
.knav-offcanvas.offcanvas {
  background: var(--bg2) !important;
  border-right: 1px solid var(--border) !important;
}
.knav-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--border);
}
.knav-offcanvas .offcanvas-title {
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: .9rem;
}
.knav-offcanvas .btn-close {
  opacity: .6;
}

/* ── Breadcrumb nav ───────────────────────────────────────────────────────── */
.mod-kunena-breadcrumbs.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 1.25rem;
  list-style: none;
}
.mod-kunena-breadcrumbs__item.breadcrumb-item {
  font-family: var(--font-display);
  font-size: .75rem;
  color: var(--muted);
}
.mod-kunena-breadcrumbs__item.breadcrumb-item a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.mod-kunena-breadcrumbs__item.breadcrumb-item a:hover { color: var(--violet-lt); }
.mod-kunena-breadcrumbs__item.breadcrumb-item.active { color: var(--text-soft); }
.mod-kunena-breadcrumbs__item svg { display: none; }
.mod-kunena-breadcrumbs__item.breadcrumb-item + .breadcrumb-item::before {
  color: var(--border-strong);
}

/* ── Forum jump dropdown ──────────────────────────────────────────────────── */
#kunena #jumpto { margin-bottom: 1.25rem; }
#kunena #jumpto .form-select,
#kunena .selector .form-select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: var(--bg2) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-soft) !important;
  font-family: var(--font-display);
  font-size: .8rem;
  max-width: 240px;
  background-image: var(--chevron-icon) !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 14px 10px !important;
  padding-right: 2.5rem !important;
  color-scheme: dark;
}

/* ── kfrontend section panels ─────────────────────────────────────────────── */
#kunena .kfrontend {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  border-radius: .5rem !important;
  box-shadow: none !important;
  margin-bottom: 1.25rem;
  overflow: hidden;
  position: relative;
}

/* Section / category title (h1.card-header) */
#kunena .kfrontend h1.card-header,
#kunena .kfrontend h2.card-header {
  background: var(--bg3) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  padding: .85rem 1rem !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
}
#kunena .kfrontend h1.card-header a,
#kunena .kfrontend h2.card-header a {
  color: var(--text) !important;
  text-decoration: none;
  transition: color .15s;
}
#kunena .kfrontend h1.card-header a:hover,
#kunena .kfrontend h2.card-header a:hover { color: var(--violet-lt) !important; }

/* Topic/post count badge on section title */
#kunena .kfrontend h1.card-header small,
#kunena .kfrontend h2.card-header small {
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  padding: .15rem .5rem;
  border-radius: 2rem;
  margin-left: auto;
  white-space: nowrap;
}

/* Collapse toggle button on section header — hidden (not needed on public forum) */
#kunena .kfrontend h2.btn-toolbar.float-end {
  display: none !important;
}

/* ── Collapsible content panel ────────────────────────────────────────────── */
#kunena .kfrontend .collapse,
#kunena .kfrontend .collapsing {
  background: var(--bg2) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ── Category description (bg-faded) ─────────────────────────────────────── */
#kunena .bg-faded {
  background: rgba(255,255,255,.03) !important;
  color: var(--muted);
  font-size: .82rem;
  font-style: italic;
  padding: .65rem 1rem !important;
  border-bottom: 1px solid var(--border);
}

/* ── Topics table ─────────────────────────────────────────────────────────── */
#kunena .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: rgba(124,58,237,.04);
  --bs-table-border-color: var(--border);
  color: var(--text) !important;
  margin-bottom: 0 !important;
}
#kunena .table td,
#kunena .table th {
  border-color: var(--border) !important;
  vertical-align: middle;
}
#kunena .table thead td {
  background: transparent;
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .6rem 1rem;
  border-top: none;
}
/* Category rows */
#kunena .table tr.category { transition: background .15s; }
#kunena .table tr.category:hover { background: rgba(124,58,237,.05); }

/* Category icon cell */
#kunena #kcat-icon { padding: .75rem .5rem .75rem 1rem; }
#kunena #kcat-icon svg { color: var(--violet-lt); width: 1.5rem; height: 1.5rem; opacity: .7; }

/* Category name h3 */
#kunena .table tr.category h3 {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  margin: 0 0 .2rem;
}
#kunena .table tr.category h3 a {
  color: var(--text) !important;
  text-decoration: none;
  transition: color .15s;
}
#kunena .table tr.category h3 a:hover { color: var(--violet-lt) !important; }
#kunena .table tr.category h3 small { font-size: .72rem; font-weight: 400; color: var(--muted); margin-left: .5rem; }
#kunena span#kcatcount { color: var(--muted); font-family: var(--font-mono); font-size: .7rem; }

/* Category description */
#kunena .header-desc {
  font-size: .8rem;
  color: var(--muted);
  margin-top: .2rem;
}

/* Last post column */
#kunena .last-post-message {
  font-size: .78rem;
  color: var(--muted);
  font-style: italic;
}
#kunena .lastpostlink a {
  color: var(--text-soft) !important;
  font-size: .82rem;
  font-family: var(--font-display);
  text-decoration: none;
  transition: color .15s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#kunena .lastpostlink a:hover { color: var(--violet-lt) !important; }
#kunena .lastpostby { font-size: .72rem; color: var(--muted); margin-top: .2rem; }
#kunena .lastpostby a { color: var(--muted) !important; text-decoration: none; }
#kunena .lastpostby a:hover { color: var(--cyan-lt) !important; }

/* ── Topic list rows (in sub-category topic listing) ─────────────────────── */
#kunena .kunena-topic-item {
  transition: background .15s;
}
/* Only highlight topic rows in the category listing, not the full topic-view wrapper */
body:not(.view-topic) #kunena .kunena-topic-item:hover { background: rgba(124,58,237,.04); }
#kunena .topic-item-messages { font-size: .78rem; color: var(--muted); text-align: left; }
#kunena .klastpostphone { font-size: .72rem; color: var(--muted); }

/* Topic subject link */
#kunena .table a.ktopic-category {
  color: var(--muted);
  font-size: .75rem;
  text-decoration: none;
}
/* Topic title links — category list (a.topictitle) and topic view heading (h3/h4.klinktitle a) */
#kunena a.topictitle,
#kunena h3.klinktitle a,
#kunena h4.klinktitle a,
#kunena td a.message-subject {
  color: var(--violet-lt) !important;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}
#kunena a.topictitle:hover,
#kunena h3.klinktitle a:hover,
#kunena h4.klinktitle a:hover,
#kunena td a.message-subject:hover { color: var(--cyan-lt) !important; }

/* ── Forum post / message view ────────────────────────────────────────────── */
/* Message row wrapper */
#kunena .row.message {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: .5rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
  transition: box-shadow .45s ease;
}
#kunena .row.message.message-approved { border-left: 3px solid var(--violet); }
#kunena .row.message.message-deleted  { opacity: .5; }

/* Author pane (left column) */
#kunena .col-md-2.shadow {
  background: var(--bg3) !important;
  box-shadow: none !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 1rem .75rem;
}
#kunena .col-md-2 .kwho-user,
#kunena .col-md-2 .kwho-admin,
#kunena .col-md-2 .kwho-moderator,
#kunena .col-md-2 .kwho-globalmoderator {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-soft) !important;
  text-decoration: none;
  display: block;
  margin-bottom: .25rem;
}
#kunena .col-md-2 .kwho-admin { color: var(--violet-lt) !important; }
/* "Topic Author" / "Moderator" badge — strip Kunena's grey border and blue colour */
#kunena .topic-starter,
#kunena .topic-moderator {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: .65rem !important;
  letter-spacing: .06em;
  padding: 0 !important;
}
#kunena .col-md-2 .kwho-globalmoderator { color: var(--cyan-lt) !important; }

/* Message content pane (right column) */
#kunena .col-md-10 {
  padding: 1.25rem 1.25rem 1rem !important;
  background: var(--bg2) !important;
  box-shadow: none !important;
}
/* Post header: "Re: Topic Title" — styled version (default for fresh installs) */
#kunena .mykmsg-header {
  font-size: 0;
  background: transparent !important;
  border: none !important;
  padding: .35rem 0 .25rem !important;
  margin: 0 !important;
}
#kunena .mykmsg-header em:has(.kwho-user) { display: none; }
#kunena .mykmsg-header em:has(.topictitle) {
  font-size: .75rem;
  color: var(--muted);
  font-style: normal;
}
#kunena .mykmsg-header .topictitle {
  color: var(--muted) !important;
  text-decoration: none !important;
  font-weight: 400;
}
/* Toggle: hide post header entirely when switched off in template params */
.taid-kunena-no-post-header #kunena .mykmsg-header {
  display: none !important;
}
/* "The topic has been locked" — show only on last post when toggled on */
.taid-kunena-lock-once #kunena .kreplymessage { display: none; }
.taid-kunena-lock-once #kunena .message:last-child .kreplymessage,
.taid-kunena-lock-once #kunena .row.message:last-child .kreplymessage { display: block; }

/* Kill Kunena Bootstrap tooltips — they render as gray boxes */
#kunena .tooltip,
#kunena .mykmsg-header .hasTooltip + .tooltip,
.tooltip:has(.tooltip-inner) { display: none !important; }

/* Post body text */
#kunena .col-md-10 .ltr,
#kunena .kmessage-body {
  font-size: .9rem;
  line-height: 1.75;
  color: var(--text-soft);
}
#kunena .col-md-10 .ltr p { margin-bottom: .75rem; }
#kunena .col-md-10 .ltr a { color: var(--violet-lt); }
#kunena .col-md-10 .ltr a:hover { color: var(--cyan-lt); }

/* Post date/time */
#kunena .datepost,
#kunena td[data-bs-toggle="tooltip"] {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--muted);
}

/* ── Members / Who's Online / Stats panels ────────────────────────────────── */
/* clear: both here wins the specificity battle for the search→table gap */
#kunena .kfrontend.mt-4 { clear: both; margin-top: 2rem !important; }
/* Kunena hides all .btn inside .kfrontend, only shows on hover — make tfoot buttons always visible */
#kunena.layout .kfrontend tfoot .btn { visibility: visible !important; }
#kunena button[name="kcheckgo"] { margin-left: .5rem; }

#kunena .kfrontend .card-body {
  background: var(--bg2);
  padding: 1rem;
}
#kunena .kfrontend .card-body .btn-link {
  color: var(--violet-lt) !important;
  text-decoration: none;
}
#kunena .kfrontend .card-body .btn-link:hover { color: var(--cyan-lt) !important; }

/* Who's online user links */
#kunena .kwho-user a,
#kunena .kwho-admin a,
#kunena .kwho-guest {
  font-family: var(--font-display);
  font-size: .8rem;
}
#kunena .kwho-user a { color: var(--text-soft) !important; text-decoration: none; }
#kunena .kwho-admin a { color: var(--violet-lt) !important; text-decoration: none; }
#kunena .kwho-banned a { color: var(--rose) !important; text-decoration: none; }
#kunena .kwho-guest { color: var(--muted); }

/* ── Badges (new post indicator, etc.) ────────────────────────────────────── */
#kunena .badge.bg-info {
  background: rgba(6,182,212,.12) !important;
  color: var(--cyan-lt) !important;
  border: 1px solid rgba(6,182,212,.28);
  font-family: var(--font-mono);
  font-size: .62rem;
}
#kunena .badge.bg-warning {
  background: rgba(245,158,11,.12) !important;
  color: var(--amber) !important;
  border: 1px solid rgba(245,158,11,.28);
  font-family: var(--font-mono);
  font-size: .62rem;
}
#kunena .knewchar {
  color: var(--emerald) !important;
  font-family: var(--font-mono);
  font-size: .65rem;
}

/* ── Alert (info/warning messages in forum) ───────────────────────────────── */
#kunena .alert.alert-info {
  background: rgba(6,182,212,.08) !important;
  border-color: rgba(6,182,212,.25) !important;
  color: var(--text-soft) !important;
  border-radius: .4rem;
  font-size: .85rem;
}

/* ── Buttons (outline-primary) ────────────────────────────────────────────── */
/* Already have global violet override for btn-outline-primary;
   reinforce within Kunena to prevent Bootstrap light overrides */
#kunena .btn-outline-primary,
#kunena .btn.btn-outline-primary {
  --bs-btn-color: var(--violet-lt);
  --bs-btn-border-color: rgba(124,58,237,.4);
  --bs-btn-hover-bg: var(--violet);
  --bs-btn-hover-border-color: var(--violet);
  --bs-btn-hover-color: #fff;
  color: var(--violet-lt) !important;
  border-color: rgba(124,58,237,.4) !important;
}

/* ── Kunena credits footer line ───────────────────────────────────────────── */
#kunena ~ div[style*="text-align:center"] {
  font-family: var(--font-display);
  font-size: .7rem;
  color: var(--muted);
  margin-top: 1rem;
  opacity: .5;
}
#kunena ~ div[style*="text-align:center"] a { color: var(--muted) !important; }

/* ── Profiler / timing line ───────────────────────────────────────────────── */
#kunena .d-flex.justify-content-center {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--muted);
  opacity: .4;
  padding-top: .5rem;
}

/* ── RSS icon ─────────────────────────────────────────────────────────────── */
#kunena .pull-right.large-kicon { opacity: .35; }
#kunena .pull-right.large-kicon:hover { opacity: .7; }

/* ── Pagination (Kunena topics navigation) ────────────────────────────────── */
#kunena .pagination-container-links.pt-4 {
  padding-top: 1rem !important;
}
/* Kunena inline topic pagination — override hardcoded #ddd border */
#kunena.layout .pagination ul > li > a,
#kunena.layout .pagination ul > li > span {
  background-color: var(--panel2) !important;
  border-color: var(--border-md) !important;
  color: var(--text-soft) !important;
  font-family: var(--font-mono);
  font-size: .68rem;
  border-radius: var(--radius) !important;
  text-decoration: none;
}
#kunena.layout .pagination ul > li > a:hover {
  border-color: var(--violet) !important;
  color: var(--violet-lt) !important;
  background-color: rgba(124,58,237,.07) !important;
}

/* Search box in #posts aligned flush with pagination — match its bottom gap */
#kunena #posts .float-end .kunena-search.search { margin-bottom: 1rem; }

/* ── Selector / jump form ─────────────────────────────────────────────────── */
#kunena .selector { max-width: 260px; }

/* ── Search form ──────────────────────────────────────────────────────────── */
/* Kunena's own sheet has #kunena.layout .form-select { background: none !important }
   which nukes the chevron. Match that specificity (ID + 2 classes) to win. */
#kunena.layout .form-select, #kunena .form-select {
  background-color: var(--bg2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  background-image: var(--chevron-icon) !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 14px 10px !important;
  padding-right: 2.5rem !important;
  color-scheme: dark;
}
/* Search + Cancel button row — breathing room at bottom of accordion */
#kunena #main-search .text-center {
  padding-bottom: 1.5rem;
  padding-top: .5rem;
}

/* ── Multi-select list (search category picker) ──────────────────────────── */
#kunena select[multiple].form-select {
  background-image: none !important;
  padding: .5rem !important;
  height: auto;
  min-height: 180px;
}
#kunena select[multiple].form-select option {
  padding: .35rem .6rem;
  border-radius: .2rem;
  color: var(--text);
}
#kunena select[multiple].form-select option:checked {
  background: rgba(124,58,237,.2) !important;
  color: var(--violet-lt) !important;
}
#kunena select[multiple].form-select option:hover {
  background: rgba(124,58,237,.1);
}

/* ── Full-page login form (.kloginform) ──────────────────────────────────── */
#kunena .kloginform h1 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2rem;
  line-height: 1.4;
}
#kunena .kloginform .control-group {
  max-width: 480px;
  margin: 0 auto 1rem;
}
#kunena .kloginform input.input-small {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: .65rem .85rem;
  font-size: .9rem;
  border-radius: .25rem;
  font-family: var(--font-body);
}
#kunena .kloginform input.input-small:focus {
  border-color: var(--violet);
  outline: none;
  box-shadow: 0 0 0 3px rgba(124,58,237,.20);
}
#kunena .kloginform #kform-login-submit {
  margin-top: 1.25rem;
}
#kunena .kloginform #kform-login-submit .btn {
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .8rem;
  padding: .55rem 2rem;
}
#kunena .kloginform #kform-login-submit p {
  margin-bottom: .6rem;
}
#kunena .kloginform #kform-login-submit a {
  color: var(--violet-lt);
  font-size: .85rem;
  transition: color .25s;
}
#kunena .kloginform #kform-login-submit a:hover {
  color: var(--cyan-lt);
}
#kunena .kloginform .add-on {
  display: none;  /* hide the icon span — inputs have placeholders */
}

/* ── Datepicker dark theme ────────────────────────────────────────────────── */
/* Appended to body (outside #kunena), so global scope needed */
.datepicker.datepicker-dropdown {
  background: var(--bg3) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: .5rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.6) !important;
  padding: .5rem !important;
  color: var(--text-soft) !important;
}
/* Arrow caret — match panel bg */
.datepicker-dropdown::after                          { border-bottom-color: var(--bg3) !important; }
.datepicker-dropdown.datepicker-orient-top::after    { border-top-color: var(--bg3) !important; border-bottom: 0 !important; }
.datepicker-dropdown::before                         { border-bottom-color: var(--border-strong) !important; }
.datepicker-dropdown.datepicker-orient-top::before   { border-top-color: var(--border-strong) !important; border-bottom: 0 !important; }
/* Table base */
.datepicker table { background: transparent !important; width: 100%; }
/* Month/year title + prev/next arrows */
.datepicker th.datepicker-switch {
  color: var(--text) !important;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
}
.datepicker th.datepicker-switch:hover { color: var(--violet-lt) !important; background: transparent !important; }
.datepicker th.prev,
.datepicker th.next { color: var(--muted) !important; font-size: 1rem; }
.datepicker th.prev:hover,
.datepicker th.next:hover { color: var(--violet-lt) !important; background: transparent !important; }
/* Day-of-week headers */
.datepicker th.dow {
  color: var(--muted) !important;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Day cells */
.datepicker td.day                { color: var(--text-soft) !important; border-radius: .25rem; }
.datepicker td.day:hover          { background: rgba(124,58,237,.18) !important; color: var(--violet-lt) !important; }
.datepicker td.old,
.datepicker td.new                { color: var(--muted) !important; opacity: .4; }
.datepicker td.active,
.datepicker td.active:hover       { background: var(--violet) !important; color: #fff !important; }
.datepicker td.today              { background: rgba(6,182,212,.15) !important; color: var(--cyan-lt) !important; }
.datepicker td.focused            { background: rgba(124,58,237,.2) !important; }
/* Month / year / decade / century spans */
.datepicker .month,
.datepicker .year,
.datepicker .decade,
.datepicker .century              { color: var(--text-soft) !important; border-radius: .25rem; }
.datepicker .month:hover,
.datepicker .year:hover,
.datepicker .decade:hover,
.datepicker .century:hover        { background: rgba(124,58,237,.18) !important; color: var(--violet-lt) !important; }
.datepicker .focused              { background: rgba(124,58,237,.25) !important; color: var(--violet-lt) !important; }

/* ── Kunena user profile page ─────────────────────────────────────────────── */
/* list-group — Bootstrap light-mode bleed */
#kunena .list-group-item {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-soft) !important;
  padding: .55rem .25rem;
  font-size: .82rem;
}
#kunena .list-group-item strong {
  color: var(--muted);
  font-weight: 500;
  margin-right: .35rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-family: var(--font-mono);
}
#kunena .list-group-flush {
  border-radius: 0 !important;
}
/* Avatar icon — scale up the tiny default SVG */
#kunena .col-md-3 .kwho-user svg.bi-person {
  width: 3.5rem;
  height: 3.5rem;
  color: var(--muted);
}
/* Offline/Online badge */
#kunena .badge.bg-secondary {
  background: var(--bg3) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--muted) !important;
  font-size: .65rem;
  letter-spacing: .05em;
  text-decoration: none;
  margin-bottom: .5rem;
  display: inline-block;
}
/* More/Less toggle — breathing room above, subtle styling */
#kunena .profile-expand {
  margin-top: .85rem;
  padding-top: .6rem;
  border-top: 1px solid var(--border);
}
#kunena .profile-expand .btn-xs {
  font-size: .65rem;
  padding: .2rem .55rem;
  opacity: .55;
  transition: opacity .15s;
}
#kunena .profile-expand .btn-xs:hover { opacity: 1; }
/* Profile row top-level spacing */
#kunena .view-user .row,
#kunena > div.row:has(.list-group) {
  gap: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   KUNENA DEEP PASS — Signal Dark beauty improvements
   ═══════════════════════════════════════════════════════════════ */

/* ── Post body: .kmsg (actual text container, not .ltr) ──────── */
#kunena .kmsg {
  font-size: .92rem;
  line-height: 1.78;
  color: var(--text-soft);
}
/* Override Kunena's Segoe UI with template font (controlled by kunenaTemplateFont param) */
.taid-kunena-template-font #kunena .kmsg,
.taid-kunena-template-font #kunena .kmsg * {
  font-family: var(--font-body) !important;
}
#kunena .kmsg p { margin-bottom: .8rem; }
#kunena .kmsg ol,
#kunena .kmsg ul {
  padding-left: 1.5rem;
  margin: .5rem 0 1rem;
}
#kunena .kmsg li { margin-bottom: .25rem; }
#kunena .kmsg a { color: var(--violet-lt); text-decoration: underline; text-underline-offset: 3px; }
#kunena .kmsg a:hover { color: var(--cyan-lt); }
#kunena .kmsg code {
  font-family: var(--font-mono);
  font-size: .82em;
  color: var(--emerald);
  background: rgba(16,185,129,.1);
  padding: .1em .35em;
  border-radius: 3px;
}
#kunena .kmsg pre {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: .4rem;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--emerald);
  margin: 1rem 0;
}
#kunena .kmsg blockquote {
  border-left: 3px solid var(--violet);
  padding: .6rem 1rem;
  margin: .75rem 0;
  background: rgba(124,58,237,.06);
  color: var(--text-soft);
  font-style: italic;
  border-radius: 0 .4rem .4rem 0;
}

/* ── Kunena BBCode containers (hide, confidential, code, quote, article) ─── */
#kunena.layout div.kmsgtext-hide,
#kunena.layout div.kmsgtext-confidential,
#kunena.layout div.kmsgtext-article,
#kunena.layout div.kmsgtext-quote {
  background: var(--bg3) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--border-md) !important;
  border-radius: .4rem !important;
  color: var(--text-soft) !important;
  padding: 1rem !important;
  margin: .75rem 0 !important;
}
#kunena .kmsgtext-confidentialguests {
  color: var(--muted);
  font-style: italic;
}
/* Code blocks (bbcode_code) */
#kunena .bbcode_code {
  background: var(--bg3) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--border) !important;
  border-radius: .4rem !important;
  margin: .75rem 0 !important;
  overflow: hidden;
}
#kunena .bbcode_code_head {
  position: relative;
  background: rgba(16,185,129,.08) !important;
  color: var(--emerald) !important;
  padding: .4rem .8rem !important;
  font-size: .75rem !important;
  font-family: 'Space Mono', 'Courier New', monospace !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
}
/* Copy button injected by JS */
#kunena .bbcode_code_head .taid-copy-btn {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .25rem;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
}
#kunena .bbcode_code_head .taid-copy-btn:hover {
  color: var(--emerald);
  border-color: rgba(16,185,129,.3);
  background: rgba(16,185,129,.06);
}
#kunena .bbcode_code_head .taid-copy-btn.copied {
  color: var(--emerald);
  border-color: rgba(16,185,129,.4);
}
#kunena .bbcode_code_body {
  padding: .8rem 1rem;
  font-family: var(--font-mono) !important;
  font-size: .82rem !important;
  color: var(--emerald) !important;
  line-height: 1.6;
  overflow-x: auto;
}
/* Spoiler */
#kunena .kspoiler-wrapper {
  background: var(--bg3) !important;
  border-top-width: 1px !important;
  border-top-style: solid !important;
  border-top-color: var(--border-md) !important;
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: var(--border-md) !important;
}
#kunena .kspoiler-title {
  color: var(--text-soft);
}
#kunena .kspoiler-expand input,
#kunena .kspoiler-hide input {
  background: var(--violet) !important;
  border-color: var(--violet) !important;
  color: #fff !important;
  font-size: .75rem;
  padding: .25rem .6rem;
}
#kunena .kspoiler-content {
  color: var(--text-soft);
  padding: .65rem .75rem;
}
/* Tables in posts */
#kunena .kmsg table {
  width: 100%;
  border-collapse: collapse;
  margin: .75rem 0;
}
#kunena .kmsg table th {
  background: rgba(124,58,237,.12);
  color: var(--text);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .5rem .75rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-md);
}
#kunena .kmsg table td {
  padding: .45rem .75rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  color: var(--text-soft);
  font-size: .85rem;
}
#kunena .kmsg table tr:nth-child(even) td {
  background: rgba(255,255,255,.02);
}

/* ── Post content wrapper — strip Bootstrap's mb-5 + padding ─── */
#kunena .col-md-10 .shadow-none.p-4 {
  padding: .5rem 0 0 !important;
  margin-bottom: 0 !important;
}

/* ── Post card hover glow — subtle violet atmosphere (toggle via body class) */
.taid-kunena-post-glow #kunena .row.message:hover {
  box-shadow: 0 0 0 1px rgba(124,58,237,.10),
              0 0 14px rgba(124,58,237,.035),
              0 3px 18px rgba(0,0,0,.30) !important;
}

/* ── Topic h1 (thread title with doc icon) ────────────────────── */
#kunena .kunena-topic-item h1 {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem) !important;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 1.25rem;
}
#kunena .kunena-topic-item h1 svg {
  color: var(--violet-lt);
  opacity: .6;
  flex-shrink: 0;
  margin-top: .12em;
  width: 1.3em;
  height: 1.3em;
}

/* ── Profilebox (author pane list) ────────────────────────────── */
#kunena ul.profilebox {
  list-style: none !important;
  padding: .6rem 0 !important;
  margin: 0 !important;
}
#kunena ul.profilebox li {
  text-align: center;
  margin-bottom: .3rem;
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.4;
}
/* Avatar SVG — size up, circular bg */
#kunena .profilebox svg.bi-person {
  width: 3rem !important;
  height: 3rem !important;
  background: var(--bg2);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  padding: .3rem;
  color: var(--border-strong);
  display: block;
  margin: .4rem auto .6rem;
}
/* User rank text (e.g. "New Member") */
#kunena .profilebox li:not(:first-child):not(:has(a)):not(:has(img)):not(:has(svg)) {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
/* Rank image */
#kunena .krank img,
#kunena img[alt="New Member"] {
  opacity: .4;
  filter: grayscale(.5) brightness(.8);
  max-width: 70px;
}

/* Post container — softer corners on the shadow glow */
#kunena .message-published {
  border-radius: .6rem !important;
}

/* ── Post timestamp + post number anchor ──────────────────────── */
#kunena .message-published > small.float-end {
  display: block;
  padding: .4rem .5rem 0;
  text-align: right;
}
#kunena small.float-end .kdate {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--muted);
  cursor: default;
}
#kunena small.float-end .text-muted svg {
  color: var(--muted);
  opacity: .5;
  margin-right: .2rem;
  width: .8em;
  height: .8em;
}
/* Post number #1, #2 anchors */
#kunena small.float-end a[href^="#"] {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--muted);
  text-decoration: none;
  margin-left: .4rem;
  opacity: .5;
  transition: opacity .15s, color .15s;
}
#kunena small.float-end a[href^="#"]:hover {
  color: var(--violet-lt);
  opacity: 1;
}

/* ── "Please log in" prompt in posts ──────────────────────────── */
#kunena .message-published > p {
  font-size: .82rem;
  color: var(--muted);
  padding: .65rem .25rem;
  margin: 0 .25rem;
  border-top: 1px solid var(--border);
}
#kunena .message-published > p .btn-link {
  color: var(--violet-lt) !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: color .25s ease;
}
#kunena .message-published > p .btn-link:hover {
  color: var(--cyan-lt) !important;
}

/* ── Topic list: Replies/Views stats ──────────────────────────── */
#kunena .replies,
#kunena .views {
  font-size: .7rem;
  color: var(--muted);
  font-family: var(--font-mono);
  margin-bottom: .2rem;
}
#kunena .repliesnum,
#kunena .viewsnum {
  color: var(--cyan-lt);
  font-weight: 700;
  margin-left: .2rem;
}

/* ── Topic "started by" meta ──────────────────────────────────── */
#kunena .started {
  font-size: .72rem;
  color: var(--muted);
  margin-top: .4rem;
}
#kunena .started a { color: var(--muted) !important; text-decoration: none; }
#kunena .started a:hover { color: var(--violet-lt) !important; }

/* ── Table thead column headers ───────────────────────────────── */
#kunena .table thead th,
#kunena .table thead td:not(.bg-faded) {
  font-family: var(--font-mono);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 500;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--border-strong) !important;
}
/* Section description row (bg-faded) — italic muted */
#kunena .table .bg-faded {
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
  padding: .5rem 0 !important;
  background: transparent !important;
}
/* Down-arrow jump link */
#kunena .table thead a[href="#forumbottom"] svg { color: var(--muted); opacity: .4; }

/* ── Lock icon in category/topic lists ────────────────────────── */
#kunena .bi-lock {
  color: var(--muted) !important;
  opacity: .45;
  vertical-align: middle;
}

/* ── RSS icon — override Kunena's inline orange ───────────────── */
#kunena a[rel="alternate"] svg { color: var(--amber) !important; opacity: .5; }
#kunena a[rel="alternate"]:hover svg { opacity: .9; }

/* ── Topic icon (doc SVG in category topic list) ──────────────── */
#kunena #kcat-icon a svg,
#kunena .table tbody .bi-document-text {
  color: var(--muted);
  opacity: .55;
  width: 1.1rem;
  height: 1.1rem;
}
#kunena .table tbody tr.category:hover .bi-document-text { opacity: .9; color: var(--violet-lt); }

/* ── Who's Online / Statistics card body ──────────────────────── */
#kunena .kfrontend .card-body .list-unstyled {
  margin: 0;
  padding: 0;
}
#kunena .kfrontend .card-body .list-unstyled li {
  font-size: .82rem;
  color: var(--text-soft);
  padding: .18rem 0;
  list-style: none;
}
#kunena .kfrontend .card-body strong {
  color: var(--violet-lt);
  font-family: var(--font-mono);
  font-size: .85em;
}
/* Icon column in stats/online panels */
#kunena .kfrontend .card-body .col-md-1 svg {
  color: var(--muted);
  opacity: .5;
  width: 1.5rem;
  height: 1.5rem;
}
/* Who's online Members header link */
#kunena .kfrontend.mt-4 h2.card-header a {
  color: var(--text-soft);
  font-size: .85rem;
}
#kunena .kfrontend.mt-4 h2.card-header a:hover { color: var(--violet-lt); }

/* ── Forum index section (top-level topic count badge) ─────────── */
#kunena .kfrontend h1.card-header small.hidden-xs-down {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .06em;
  color: var(--muted);
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.2);
  padding: .15em .55em;
  border-radius: 999px;
  margin-left: .6rem;
}

/* ── Category row: Sub-category "X topics" pill ──────────────── */
#kunena .table tr.category h3 small .nowrap,
#kunena span#kcatcount {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  padding: .1em .45em;
  border-radius: 999px;
  margin-left: .35rem;
  display: inline-block;
}


/* ── Post row: tighten message spacing ────────────────────────── */
#kunena .topic-item-messages .row.message {
  margin-bottom: 1.75rem;
}
#kunena .topic-item-messages .row.message:last-child {
  margin-bottom: 0;
}

/* ── Reply / Create / Edit form (#postform) ───────────────────────────────── */
/* STRUCTURE (from real HTML):
   #postform
     div.shadow-lg.p-3.mb-5.rounded  ← Card 1: Subject + CKEditor
     h2 "Attachments"
     div.shadow-lg.p-3.mb-5.rounded  ← Card 2: Attachments
       div.krow2.p-3.mb-5#kpost-attachments  ← inner (has extra p-3 mb-5)
         span.badge.bg-info pills
         span.fileinput-button, div#dropzone > div.dropzone
     h2 "Subscribe"
     div.shadow-lg.p-3.mb-5.rounded  ← Card 3: Subscribe toggle
     div.form-group.row > div.col-md-10.center  ← Submit + Cancel (outside cards)
   (outside #postform)
   div.float-end > div.btn.btn-small  ← history toggle "X"
   h3 "Topic History of: ..."
   div#history.collapse.show  ← collapsible posts
*/

/* === Section headings between form cards (h2: Attachments, Subscribe) === */
#kunena #postform h2 {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin: 1.25rem 0 .4rem;
  padding-top: .25rem;
  border-top: 1px solid var(--border);
  clear: both;          /* prevent attachment floats from pushing h2 sideways */
  display: block;       /* explicit block in case any flex context leaks */
}

/* === Force all direct-child divs of #postform to be full-width blocks.
   Bootstrap .row context (flex) can cause cards to sit side-by-side.
   This reset ensures each card, h2 section label, and button row stacks vertically. === */
#kunena #postform > div {
  width: 100% !important;
  display: block !important;
  float: none !important;
  flex: none !important;
  box-sizing: border-box;
}

/* === Three main form cards === */
#kunena #postform .shadow-lg.p-3 {
  background: var(--bg2) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.4) !important;
  padding: 1.25rem !important;
  margin-bottom: 1rem !important;
  overflow: hidden;
  clear: both;
}

/* === Subject field label === */
#kunena #postform .col-form-label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding-top: .75rem;
}
/* Subject input */
#kunena #postform #subject {
  background: var(--bg3) !important;
  color: var(--text-soft) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: .4rem;
}
#kunena #postform #subject:focus {
  border-color: var(--violet) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.20) !important;
  outline: none;
}

/* === Nav tabs (Message / Private message) === */
#kunena #postform .nav-tabs {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
  gap: 0;
}
#kunena #postform .nav-tabs .nav-item .nav-link {
  color: var(--muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: .55rem 1.1rem;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  background: transparent;
  border-radius: 0;
  transition: color .15s, border-color .15s;
}
#kunena #postform .nav-tabs .nav-item .nav-link.active {
  color: var(--violet-lt);
  border-bottom-color: var(--violet-lt);
  background: transparent;
}
#kunena #postform .nav-tabs .nav-item .nav-link:hover:not(.active) {
  color: var(--text-soft);
  border-bottom-color: var(--border-strong);
}
#kunena #postform .tab-content { padding-top: .75rem; }

/* === Textarea (plain editor fallback when CKEditor not loaded) === */
#kunena #postform textarea.form-control {
  background: var(--bg3) !important;
  color: var(--text-soft) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: .4rem;
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.7;
  padding: .85rem 1rem;
  min-height: 200px;
  resize: vertical;
}
#kunena #postform textarea.form-control:focus {
  border-color: var(--violet) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.20) !important;
  outline: none;
}

/* === Attachments: strip inner krow2 excess spacing (it also has p-3 mb-5) === */
#kunena #postform .krow2 {
  padding: .25rem 0 0 !important;
  margin-bottom: 0 !important;
}

/* === Attachment info badges (bg-info = file types, max size) === */
#kunena #postform .badge.bg-info {
  background: rgba(6,182,212,.1) !important;
  color: var(--cyan-lt) !important;
  border: 1px solid rgba(6,182,212,.2) !important;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .02em;
  white-space: normal;
  line-height: 1.5;
  display: inline-block;
  margin-bottom: .4rem;
}

/* === Attachment action buttons === */
#kunena #postform .fileinput-button {
  font-size: .78rem !important;
  padding: .4rem .9rem !important;
  margin-right: .4rem;
}
#kunena #postform #insert-all,
#kunena #postform #set-secure-all {
  font-size: .78rem;
  padding: .4rem .9rem;
}
#kunena #postform #remove-all {
  background: transparent !important;
  border-color: rgba(244,63,94,.35) !important;
  color: var(--rose) !important;
  font-size: .78rem;
  padding: .4rem .9rem;
}
#kunena #postform #remove-all:hover {
  background: rgba(244,63,94,.1) !important;
}

/* === Drop zone === */
#kunena #postform .dropzone {
  background: var(--bg3) !important;
  border: 1px dashed var(--border-strong) !important;
  border-radius: .4rem;
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: .8rem;
  margin-top: .75rem;
}

/* === Upload progress bar === */
#kunena #postform .progress { background: var(--bg3) !important; }
#kunena #postform .progress-bar { background: var(--violet) !important; }

/* === Subscribe toggle (form-check-switch) === */
#kunena #postform .form-check-input[type="checkbox"] {
  background-color: var(--bg3);
  border-color: var(--border-strong);
}
#kunena #postform .form-check-input[type="checkbox"]:checked {
  background-color: var(--violet) !important;
  border-color: var(--violet) !important;
}
#kunena #postform .form-check-label {
  color: var(--text-soft);
  font-size: .88rem;
}

/* === Button row (Submit + Cancel — outside the 3 cards, inside form) === */
#kunena #postform .col-md-10.center {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem 0 .5rem;
}
/* Submit — violet filled, disabled via opacity */
#kunena #postform #form_submit_button {
  background: var(--violet) !important;
  border-color: var(--violet) !important;
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  padding: .6rem 1.6rem;
  border-radius: var(--radius);
  transition: background .18s, box-shadow .18s;
}
#kunena #postform #form_submit_button:disabled {
  opacity: .4 !important;
  cursor: not-allowed;
}
#kunena #postform #form_submit_button:not(:disabled):hover {
  background: var(--violet-dark) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.25), 0 4px 16px rgba(0,0,0,.35) !important;
}
/* Cancel — ghost, uses window.history.back() (type=reset) */
#kunena #postform button[type="reset"] {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--muted) !important;
  font-family: var(--font-display);
  font-size: .82rem;
  padding: .6rem 1.2rem;
  border-radius: var(--radius);
  transition: border-color .15s, color .15s;
}
#kunena #postform button[type="reset"]:hover {
  border-color: var(--violet) !important;
  color: var(--violet-lt) !important;
}

/* === Edit form: "Editing Reason" card (.pl-5 not .p-3 — different padding classes) === */
#kunena #postform .shadow-lg.pl-5 {
  background: var(--bg2) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.4) !important;
  padding: .85rem 1.25rem !important;  /* override Bootstrap .pl-5 */
  margin-bottom: 1rem !important;
}
#kunena #postform .shadow-lg.pl-5 input.form-control {
  background: var(--bg3) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-soft) !important;
}
#kunena #postform .shadow-lg.pl-5 input.form-control:focus {
  border-color: var(--violet) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.20) !important;
  outline: none;
}

/* === Edit form: Topic Icons picker (#iconset_topicList) === */
#kunena #postform #kpost-topicIcons {
  margin-bottom: .5rem;
}
#kunena #postform #iconset_topicList {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  padding: .25rem 0;
}
/* Hide native radio inputs — labels act as the clickable target */
#kunena #postform #iconset_topicList input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* Each label = clickable icon chip */
#kunena #postform #iconset_topicList label.radio.inline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--border-strong);
  border-radius: .4rem;
  background: var(--bg3);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  margin: 0;
  padding: .25rem;
}
#kunena #postform #iconset_topicList label.radio.inline:hover {
  border-color: var(--violet);
  background: rgba(124,58,237,.08);
}
/* Selected icon: input:checked + label sibling selector */
#kunena #postform #iconset_topicList input[type="radio"]:checked + label.radio.inline {
  border-color: var(--violet-lt);
  background: rgba(124,58,237,.15);
  box-shadow: 0 0 0 3px rgba(124,58,237,.20);
}
/* SVG / img inside icon labels */
#kunena #postform #iconset_topicList label.radio.inline svg,
#kunena #postform #iconset_topicList label.radio.inline img {
  max-width: 1.4rem;
  max-height: 1.4rem;
  display: block;
  pointer-events: none;
}

/* ── Topic History section (outside #postform, sibling elements) ─────────── */
/* Collapse toggle button "X" */
#kunena > .float-end .btn-small {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: .7rem;
  padding: .15rem .55rem;
  line-height: 1.4;
  border-radius: .3rem;
}
/* "Topic History of: ..." heading */
#kunena > h3 {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-soft);
  margin: 1.5rem 0 .75rem;
}
/* Intro text "Max. showing the last N posts" */
#kunena #history > p {
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 1rem;
  font-style: italic;
}

/* Each history entry row — card styling */
#kunena #history .row {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: .45rem;
  margin-bottom: .75rem;
  overflow: hidden;
}
/* col-md-10 inside history: adequate padding, no top-padding (::after heading occupies it) */
#kunena #history .col-md-10 {
  padding: 1rem 1.5rem 1.25rem !important;
}
/* Timestamp — stack above content, mono style */
#kunena #history .col-md-10 > small.text-muted {
  font-family: var(--font-mono) !important;
  font-size: .65rem !important;
  color: var(--muted) !important;
  display: block;
  margin-bottom: .5rem;
  margin-top: 0 !important;
  float: none !important;
}
#kunena #history .kdate { color: var(--muted) !important; }

/* .badger-left.badger-info — Kunena renders topic title via position:absolute ::after.
   Kunena's own CSS sets height:0 on ::after but leaves text visible as overflow.
   We: suppress the ::after entirely and show the title via ::before instead. */
#kunena .badger-left.badger-info {
  position: relative;
  border-left: 3px solid rgba(6,182,212,.22);
  padding: 0 0 0 1rem !important;  /* override Kunena's padding:0 19px 0 14px !important */
  margin: 0 !important;
  min-height: unset !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
/* Kill Kunena's ::after (position:absolute topic title bar) */
#kunena #history .badger-left[data-badger]::after {
  display: none !important;
}
/* Show topic title ourselves via ::before — clean mono caption above post text */
#kunena #history .badger-left[data-badger]::before {
  content: attr(data-badger);
  display: block;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .04em;
  color: var(--cyan-lt);
  opacity: .7;
  margin-bottom: .45rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* History post body text */
#kunena .khistory .kmessage,
#kunena .khistory .kmsg {
  font-size: .85rem;
  color: var(--text-soft);
  line-height: 1.65;
}
#kunena .khistory p.kmsg { margin-bottom: 0; }

/* ── CKEditor outer shell — Signal Dark ──────────────────────────────────── */
/* The iframe content is styled via /css/ckeditor-content.css (contentsCss).
   These rules style the outer chrome: toolbar, border, statusbar. */

/* Wrapper chrome */
#kunena .cke_chrome,
#kunena .cke_inner {
  background: var(--bg2) !important;
  border-color: rgba(255,255,255,.05) !important;
}
#kunena .cke_chrome {
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: .4rem;
  overflow: hidden;
  box-shadow: none !important;
}

/* Toolbar area */
#kunena .cke_top {
  background: rgba(167,139,250,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: none !important;
  padding: 4px 6px !important;
}
/* Toolbar buttons */
#kunena .cke_button__icon { opacity: .85; }
#kunena .cke_button:hover { background: rgba(124,58,237,.18) !important; }
#kunena .cke_button_on   { background: rgba(124,58,237,.28) !important; }
#kunena .cke_toolgroup {
  border: 1px solid rgba(255,255,255,.05) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}
#kunena .cke_toolbar_separator {
  background-color: rgba(255,255,255,.06) !important;
  box-shadow: none !important;
}
/* Combo dropdowns (font size etc.) */
#kunena .cke_combo__open { border-color: rgba(255,255,255,.12) !important; }
#kunena .cke_combo_text  { color: var(--text-soft) !important; }
#kunena .cke_combo_button {
  background: var(--bg2) !important;
  border-color: rgba(255,255,255,.05) !important;
}
#kunena .cke_combo_button:hover {
  background: rgba(124,58,237,.18) !important;
}

/* CKEditor floating combo panels (Font Size, Format, etc.) — rendered on body, outside #kunena.
   The panel wrapper is on the main page; the list inside is an iframe with its own document. */
.cke_combopanel {
  background: #0f0f1a !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}
.cke_panel {
  background: #0f0f1a !important;
  border-color: rgba(255,255,255,.1) !important;
}
.cke_panel_frame {
  background: #0f0f1a !important;
}

/* CKEditor dialogs (Video, Link, Image, Smiley, etc.) — rendered on body, outside #kunena */
.cke_dialog_body {
  background: #0f0f1a !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.6) !important;
}
.cke_dialog_title {
  background: #181825 !important;
  background-image: none !important;
  color: #f0f0ff !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.cke_dialog_close_button {
  filter: invert(1) !important;
}
.cke_dialog_tabs {
  background: transparent !important;
}
.cke_dialog_tab {
  background: #181825 !important;
  background-image: none !important;
  color: rgba(240,240,255,.6) !important;
  border-color: rgba(255,255,255,.08) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.cke_dialog_tab:hover {
  background: rgba(124,58,237,.15) !important;
  color: #f0f0ff !important;
}
.cke_dialog_tab_selected,
.cke_dialog_tab_selected:hover {
  background: #0f0f1a !important;
  color: #f0f0ff !important;
  border-bottom-color: #0f0f1a !important;
}
.cke_dialog_contents {
  background: #0f0f1a !important;
  border-top-color: rgba(255,255,255,.08) !important;
}
.cke_dialog_contents_body {
  background: #0f0f1a !important;
}
/* Labels */
.cke_dialog_body .cke_dialog_ui_labeled_label {
  color: #a78bfa !important;
}
/* Text inputs */
.cke_dialog_body .cke_dialog_ui_input_text {
  background: #181825 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}
.cke_dialog_body .cke_dialog_ui_input_text input {
  background: transparent !important;
  color: #f0f0ff !important;
}
/* Select dropdowns */
.cke_dialog_body .cke_dialog_ui_input_select select {
  background: #181825 !important;
  color: #f0f0ff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color-scheme: dark !important;
}
/* Footer (OK / Cancel) */
.cke_dialog_footer {
  background: #181825 !important;
  background-image: none !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
  filter: none !important;
}
.cke_dialog_footer_buttons {
  background: transparent !important;
}
a.cke_dialog_ui_button {
  background: #181825 !important;
  background-image: none !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f0f0ff !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
}
a.cke_dialog_ui_button:hover {
  background: rgba(124,58,237,.18) !important;
  border-color: rgba(124,58,237,.3) !important;
}
a.cke_dialog_ui_button_ok {
  background: #7c3aed !important;
  background-image: none !important;
  border-color: #7c3aed !important;
  color: #fff !important;
  filter: none !important;
}
a.cke_dialog_ui_button_ok:hover {
  background: #6d28d9 !important;
}
/* Dialog backdrop */
.cke_dialog_background_cover {
  background: rgba(0,0,0,.7) !important;
}

/* Content area height — JS config.height is authoritative; CSS matches it */
#kunena .cke_contents { height: 360px !important; }
#kunena .cke_contents iframe {
  border: 0 none !important;
}

/* Status bar */
#kunena .cke_bottom {
  background: var(--bg2) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: none !important;
}
#kunena .cke_path_item,
#kunena .cke_path_empty { color: var(--muted) !important; font-size: .65rem; }
#kunena .cke_resizer {
  border-top-color: transparent !important;
  border-right-color: rgba(240,240,255,.42) !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
  cursor: se-resize !important;
}

/* ── Quick reply modal card-footer (Submit + Cancel buttons) ─────────────── */
#kunena .card-footer {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  padding: .65rem 1rem !important;
  background: var(--bg2) !important;
  border-top: 1px solid var(--border) !important;
}
#kunena .card-footer small {
  flex: 1 1 auto;
  color: var(--muted);
  font-size: .72rem;
}
#kunena .card-footer .kreply-submit {
  background: var(--violet) !important;
  border-color: var(--violet) !important;
  color: #fff !important;
  font-weight: 600;
}
#kunena .card-footer .kreply-submit:hover {
  background: var(--violet-dark) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.25) !important;
}
#kunena .card-footer .kreply-cancel {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--muted) !important;
}
#kunena .card-footer .kreply-cancel:hover {
  border-color: var(--violet) !important;
  color: var(--violet-lt) !important;
}

/* ── Kunena section collapse toggle button — hidden ────────────────────────── */
#kunena .kfrontend > .btn-toolbar .btn {
  display: none !important;
}

/* ── Kunena compact index — hide Category/Last Post columns (template param) ── */
.taid-kunena-compact #kunena .kfrontend table.table > tbody > tr:not(.category) {
  display: none !important;  /* column header row ("Category" / "Last Post") */
}
.taid-kunena-compact #kunena .kfrontend tr.category > td:last-child {
  display: none !important;  /* last post data column */
}
.taid-kunena-compact #kunena .kfrontend tr.category > td[colspan="6"] {
  width: 100%;               /* let category name fill available space */
}

/* ═══════════════════════════════════════════════════════════════
   Akeeba Engage — comments dark theme
   ═══════════════════════════════════════════════════════════════ */

/* ── Outer container ── */
.akengage-outer-container {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* ── Section title ── */
.akengage-title {
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-bottom-color: var(--border) !important;
  padding-bottom: .75rem;
  margin-bottom: 1.5rem !important;
}

/* ── Comment cards ── */
.akengage-comment-item {
  margin-bottom: 1.25rem !important;
}

.akengage-comment--primary,
.akengage-comment--unpublished,
.akengage-comment--spam {
  background: var(--bg2);
  border-radius: .5rem;
  border-left: 3px solid var(--violet-lt) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding: 1rem 1.25rem !important;
  transition: border-color .2s ease, background .2s ease;
}

.akengage-comment--primary:hover {
  border-left-color: var(--cyan-lt) !important;
  background: rgba(124, 58, 237, .04);
}

/* ── Comment header / meta ── */
.akengage-comment-properties {
  background: transparent !important;
  border-bottom-color: var(--border) !important;
  padding: 0 0 .6rem 0 !important;
  margin-bottom: .75rem !important;
}

.akengange-commenter-name.mb-1 {
  margin-bottom: -.2rem !important;
}
.akengange-commenter-name span[itemprop="name"] {
  color: var(--cyan-lt);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 600;
}

.akengage-commenter-username {
  color: var(--violet-lt) !important;
  font-size: .8rem;
}

.akengage-commenter-isuser,
.akengage-commenter-ismoderator {
  font-size: .75rem;
}

/* ── Comment date / permalink ── */
.akengage-comment-permalink a {
  color: var(--text-soft) !important;
  font-size: .82rem;
  font-family: 'Space Mono', monospace;
  transition: color .2s ease;
}

.akengage-comment-permalink a:hover {
  color: var(--cyan-lt) !important;
}

/* ── Comment body ── */
.akengage-comment-body {
  color: var(--text);
  line-height: 1.7;
  padding-top: .25rem;
}

.akengage-comment-body p {
  margin-bottom: .5rem;
}

/* ── Comment IP (admin view) ── */
.akengage-comment-ip {
  font-size: .75rem;
  color: var(--text-soft);
}

.akengage-comment-ip a {
  color: var(--violet-lt);
}

/* ── Reply / action buttons ── */
.akengage-comment-reply-btn {
  background: transparent;
  color: var(--violet-lt) !important;
  border-color: var(--violet-lt) !important;
  font-size: .8rem;
  font-weight: 500;
  padding: .25rem .75rem;
  border-radius: .35rem;
  transition: all .2s ease;
}

.akengage-comment-reply-btn:hover {
  background: var(--violet-lt) !important;
  color: #fff !important;
}

.akengage-comment-actions .btn {
  font-size: .75rem;
  padding: .2rem .5rem;
}

/* ── Nested replies indent ── */
.akengage-comment-list--level2,
.akengage-comment-list--level3 {
  padding-left: 1.5rem;
  border-left: 1px solid rgba(124, 58, 237, .15);
  margin-top: .5rem;
}

.akengage-comment-list--level2 .akengage-comment--primary {
  border-left-color: rgba(124, 58, 237, .4) !important;
}

.akengage-comment-list--level3 .akengage-comment--primary {
  border-left-color: rgba(6, 182, 212, .3) !important;
}

/* ── Avatar ── */
.akengage-commenter-avatar {
  border-radius: .35rem !important;
  border: 1px solid var(--border);
}

/* ── Comment form ── */
#akengageCommentForm {
  margin-top: 2rem;
}

#akengageCommentForm .border-top {
  border-top-color: var(--border) !important;
}

#akengageCommentForm h3 {
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
}

#akengageCommentForm label {
  color: var(--text-soft);
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: .35rem;
}

#akengageCommentForm input[type="text"],
#akengageCommentForm input[type="email"],
#akengageCommentForm textarea,
#akengageCommentForm select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: .4rem;
  padding: .6rem .85rem;
  font-size: .95rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

#akengageCommentForm input:focus,
#akengageCommentForm textarea:focus,
#akengageCommentForm select:focus {
  border-color: var(--violet-lt);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, .15);
  outline: none;
}

#akengageCommentForm textarea {
  min-height: 120px;
  resize: vertical;
}

/* Submit button */
.akengage-comment-submit-btn {
  background: var(--violet-lt) !important;
  border-color: var(--violet-lt) !important;
  color: #fff !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: .75rem 1.5rem;
  border-radius: .4rem;
  transition: all .2s ease;
}

.akengage-comment-submit-btn:hover {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, .3);
}

/* "Show comment form" button (bad UX mode) */
#akengage-comment-hider-button {
  background: var(--violet-lt);
  border-color: var(--violet-lt);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
}

/* Reply-to alert */
#akengage-comment-inreplyto-wrapper {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: .4rem;
}

#akengage-comment-inreplyto-name {
  color: var(--cyan-lt) !important;
}

/* ── Login prompt ── */
.akengage-outer-container .alert-info {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: .4rem;
}

/* ── Pagination ── */
.akengage-pagination .pagination {
  gap: .25rem;
}

.akengage-pagination .page-link {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--text-soft);
  border-radius: .3rem;
}

.akengage-pagination .page-link:hover {
  background: var(--violet-lt);
  border-color: var(--violet-lt);
  color: #fff;
}

.akengage-pagination .page-item.active .page-link {
  background: var(--violet-lt);
  border-color: var(--violet-lt);
  color: #fff;
}

/* ── Override Bootstrap light-theme classes used in Engage markup ── */
.akengage-outer-container .bg-light {
  background-color: transparent !important;
}

.akengage-outer-container .text-body {
  color: var(--text-soft) !important;
}

.akengage-outer-container .text-muted {
  color: var(--text-soft) !important;
}

.akengage-outer-container .text-secondary {
  color: var(--text-soft) !important;
}

.akengage-outer-container .text-success {
  color: var(--cyan-lt) !important;
}

.akengage-outer-container .border-secondary {
  border-color: var(--violet-lt) !important;
}

.akengage-outer-container .border-bottom {
  border-bottom-color: var(--border) !important;
}

.akengage-outer-container .border-dark {
  border-color: var(--border) !important;
}

/* ── Spam / unpublished states ── */
.akengage-comment--spam {
  border-left-color: #f59e0b !important;
  opacity: .7;
}

.akengage-comment--unpublished {
  border-left-color: #ef4444 !important;
  opacity: .7;
}

/* ═══════════════════════════════════════════════════════════════
   Position Manager — responsive visibility utilities
   Applied dynamically from the positionMap template parameter.
   Breakpoints follow Bootstrap 5 standard device boundaries.
   ═══════════════════════════════════════════════════════════════ */

/* Desktop: 992px and above */
@media (min-width: 992px) {
  .taid-hide-desktop { display: none !important; }

  /* Grid collapse when a sidebar is hidden on desktop */
  .taid-content-wrap--sidebar:has(> .taid-sidebar:not(.taid-sidebar--left).taid-hide-desktop),
  .taid-content-wrap--sidebar-left:has(> .taid-sidebar--left.taid-hide-desktop),
  .taid-content-wrap--sidebar-left.taid-content-wrap--sidebar:has(> .taid-sidebar.taid-hide-desktop) {
    grid-template-columns: 1fr !important;
  }
}

/* Tablet: 768px – 991px */
@media (min-width: 768px) and (max-width: 991.98px) {
  .taid-hide-tablet { display: none !important; }

  .taid-content-wrap--sidebar:has(> .taid-sidebar:not(.taid-sidebar--left).taid-hide-tablet),
  .taid-content-wrap--sidebar-left:has(> .taid-sidebar--left.taid-hide-tablet),
  .taid-content-wrap--sidebar-left.taid-content-wrap--sidebar:has(> .taid-sidebar.taid-hide-tablet) {
    grid-template-columns: 1fr !important;
  }
}

/* Phone: below 768px */
@media (max-width: 767.98px) {
  .taid-hide-phone { display: none !important; }

  .taid-content-wrap--sidebar:has(> .taid-sidebar:not(.taid-sidebar--left).taid-hide-phone),
  .taid-content-wrap--sidebar-left:has(> .taid-sidebar--left.taid-hide-phone),
  .taid-content-wrap--sidebar-left.taid-content-wrap--sidebar:has(> .taid-sidebar.taid-hide-phone) {
    grid-template-columns: 1fr !important;
  }
}

/* ── Mobile order utility ────────────────────────────────────────
   The Position Manager outputs data-order on wrapper divs.
   index.php translates order values into inline style="order:N".
   ──────────────────────────────────────────────────────────────── */