chore: rebuild dist with FAQ redesign

dist/css/adminlte.css

@@ -14563,6 +14563,462 @@ body:not(.app-loaded) .app-footer {
   background: rgba(255, 255, 255, 0.08);
 }
 
+.faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
+  max-width: 64rem;
+}
+@media (min-width: 1400px) {
+  .faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
+    max-width: 72rem;
+  }
+}
+.faq-page .faq-hero {
+  position: relative;
+  padding: 3rem 1.5rem 2.5rem;
+  margin-top: 1rem;
+  overflow: hidden;
+  background: radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), 0.12), transparent 60%), radial-gradient(ellipse at bottom right, rgba(var(--bs-info-rgb), 0.1), transparent 65%), var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+}
+.faq-page .faq-hero-eyebrow {
+  display: inline-flex;
+  gap: 0.4rem;
+  align-items: center;
+  padding: 0.35rem 0.85rem;
+  margin-bottom: 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--bs-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: var(--bs-primary-bg-subtle);
+  border: 1px solid var(--bs-primary-border-subtle);
+  border-radius: 50rem;
+}
+.faq-page .faq-hero-eyebrow .bi {
+  font-size: 0.9rem;
+}
+.faq-page .faq-hero-title {
+  margin: 0 0 0.5rem;
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.15;
+  color: var(--bs-emphasis-color);
+}
+@media (min-width: 768px) {
+  .faq-page .faq-hero-title {
+    font-size: 2.75rem;
+  }
+}
+.faq-page .faq-hero-lead {
+  max-width: 36rem;
+  margin: 0 auto 1.75rem;
+  font-size: 1.05rem;
+  line-height: 1.55;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-search {
+  position: relative;
+  max-width: 32rem;
+  margin: 0 auto;
+}
+.faq-page .faq-search .form-control {
+  height: 3rem;
+  padding-right: 3rem;
+  padding-left: 3rem;
+  font-size: 1rem;
+  background: var(--bs-body-bg);
+  border-radius: 50rem;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-search .form-control {
+    transition: none;
+  }
+}
+.faq-page .faq-search .form-control:focus {
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
+}
+.faq-page .faq-search-icon {
+  position: absolute;
+  top: 50%;
+  left: 1.2rem;
+  color: var(--bs-secondary-color);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+.faq-page .faq-search-clear {
+  position: absolute;
+  top: 50%;
+  right: 0.65rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border: 0;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-search-clear {
+    transition: none;
+  }
+}
+.faq-page .faq-search-clear:hover {
+  color: var(--bs-body-color);
+  background: var(--bs-secondary-bg);
+}
+.faq-page .faq-empty-state {
+  max-width: 32rem;
+  padding: 1rem;
+  margin: 1.5rem auto 0;
+  font-size: 0.95rem;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-empty-state .bi {
+  margin-right: 0.35rem;
+}
+.faq-page .faq-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+.faq-page .faq-chip {
+  display: inline-flex;
+  gap: 0.45rem;
+  align-items: center;
+  padding: 0.45rem 0.85rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--bs-body-color);
+  text-decoration: none;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 50rem;
+  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-chip {
+    transition: none;
+  }
+}
+.faq-page .faq-chip:hover {
+  color: var(--bs-emphasis-color);
+  background: var(--bs-tertiary-bg);
+  transform: translateY(-1px);
+}
+.faq-page .faq-chip .bi {
+  font-size: 1rem;
+}
+.faq-page .faq-chip-count {
+  padding: 0 0.45rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border-radius: 50rem;
+}
+.faq-page .faq-chip-primary:hover {
+  color: var(--bs-primary-text-emphasis);
+  background: var(--bs-primary-bg-subtle);
+  border-color: var(--bs-primary-border-subtle);
+}
+.faq-page .faq-chip-primary:hover .faq-chip-count {
+  color: var(--bs-primary-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-info:hover {
+  color: var(--bs-info-text-emphasis);
+  background: var(--bs-info-bg-subtle);
+  border-color: var(--bs-info-border-subtle);
+}
+.faq-page .faq-chip-info:hover .faq-chip-count {
+  color: var(--bs-info-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-warning:hover {
+  color: var(--bs-warning-text-emphasis);
+  background: var(--bs-warning-bg-subtle);
+  border-color: var(--bs-warning-border-subtle);
+}
+.faq-page .faq-chip-warning:hover .faq-chip-count {
+  color: var(--bs-warning-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-success:hover {
+  color: var(--bs-success-text-emphasis);
+  background: var(--bs-success-bg-subtle);
+  border-color: var(--bs-success-border-subtle);
+}
+.faq-page .faq-chip-success:hover .faq-chip-count {
+  color: var(--bs-success-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-danger:hover {
+  color: var(--bs-danger-text-emphasis);
+  background: var(--bs-danger-bg-subtle);
+  border-color: var(--bs-danger-border-subtle);
+}
+.faq-page .faq-chip-danger:hover .faq-chip-count {
+  color: var(--bs-danger-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-secondary:hover {
+  color: var(--bs-secondary-text-emphasis);
+  background: var(--bs-secondary-bg-subtle);
+  border-color: var(--bs-secondary-border-subtle);
+}
+.faq-page .faq-chip-secondary:hover .faq-chip-count {
+  color: var(--bs-secondary-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-section {
+  margin-bottom: 2.5rem;
+  scroll-margin-top: 5rem;
+}
+.faq-page .faq-section-header {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1rem;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-left: 4px solid var(--bs-primary);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-section-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  font-size: 1.35rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-section-title {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--bs-emphasis-color);
+}
+.faq-page .faq-section-count {
+  margin: 0.1rem 0 0;
+  font-size: 0.8rem;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-section-primary {
+  border-left-color: var(--bs-primary);
+}
+.faq-page .faq-section-primary .faq-section-icon {
+  color: var(--bs-primary-text-emphasis);
+  background: var(--bs-primary-bg-subtle);
+}
+.faq-page .faq-section-info {
+  border-left-color: var(--bs-info);
+}
+.faq-page .faq-section-info .faq-section-icon {
+  color: var(--bs-info-text-emphasis);
+  background: var(--bs-info-bg-subtle);
+}
+.faq-page .faq-section-warning {
+  border-left-color: var(--bs-warning);
+}
+.faq-page .faq-section-warning .faq-section-icon {
+  color: var(--bs-warning-text-emphasis);
+  background: var(--bs-warning-bg-subtle);
+}
+.faq-page .faq-section-success {
+  border-left-color: var(--bs-success);
+}
+.faq-page .faq-section-success .faq-section-icon {
+  color: var(--bs-success-text-emphasis);
+  background: var(--bs-success-bg-subtle);
+}
+.faq-page .faq-section-danger {
+  border-left-color: var(--bs-danger);
+}
+.faq-page .faq-section-danger .faq-section-icon {
+  color: var(--bs-danger-text-emphasis);
+  background: var(--bs-danger-bg-subtle);
+}
+.faq-page .faq-section-secondary {
+  border-left-color: var(--bs-secondary);
+}
+.faq-page .faq-section-secondary .faq-section-icon {
+  color: var(--bs-secondary-text-emphasis);
+  background: var(--bs-secondary-bg-subtle);
+}
+.faq-page .faq-section-items .faq-item {
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.375rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-section-items .faq-item {
+    transition: none;
+  }
+}
+.faq-page .faq-section-items .faq-item:hover {
+  border-color: var(--bs-primary-border-subtle);
+  transform: translateX(2px);
+}
+.faq-page .faq-section-items .faq-item[open] {
+  border-color: var(--bs-primary-border-subtle);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transform: none;
+}
+.faq-page .faq-section-items .faq-item summary {
+  display: flex;
+  gap: 0.85rem;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--bs-emphasis-color);
+  list-style: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.faq-page .faq-section-items .faq-item summary::-webkit-details-marker {
+  display: none;
+}
+.faq-page .faq-section-items .faq-item summary::marker {
+  content: "";
+}
+.faq-page .faq-section-items .faq-item summary::after {
+  content: none;
+}
+.faq-page .faq-section-items .faq-item .faq-q-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: 0.85rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 50%;
+}
+.faq-page .faq-section-items .faq-item .faq-q-text {
+  flex-grow: 1;
+}
+.faq-page .faq-section-items .faq-item .faq-q-chevron {
+  flex-shrink: 0;
+  color: var(--bs-secondary-color);
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-section-items .faq-item .faq-q-chevron {
+    transition: none;
+  }
+}
+.faq-page .faq-section-items .faq-item[open] .faq-q-chevron {
+  color: var(--bs-primary);
+  transform: rotate(180deg);
+}
+.faq-page .faq-section-items .faq-item[open] summary {
+  color: var(--bs-primary);
+  border-bottom: 1px solid var(--bs-border-color);
+}
+.faq-page .faq-section-items .faq-item .faq-answer {
+  padding: 1.1rem 1.25rem 1.1rem 3.85rem;
+  font-size: 0.95rem;
+  line-height: 1.65;
+  color: var(--bs-body-color);
+}
+.faq-page .faq-section-items .faq-item .faq-answer p:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer ul:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer ol:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer pre:last-child {
+  margin-bottom: 0;
+}
+.faq-page .faq-section-items .faq-item .faq-answer a {
+  color: var(--bs-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.faq-page .faq-section-items .faq-item .faq-answer a:hover {
+  text-decoration-thickness: 2px;
+}
+.faq-page .faq-section-items .faq-item .faq-answer code {
+  padding: 0.12em 0.35em;
+  font-size: 0.875em;
+  color: var(--bs-emphasis-color);
+  background: var(--bs-tertiary-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.25rem;
+}
+.faq-page .faq-section-items .faq-item .faq-answer pre.astro-code,
+.faq-page .faq-section-items .faq-item .faq-answer pre {
+  padding: 0.85rem 1rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  overflow-x: auto;
+  font-size: 0.85rem;
+  line-height: 1.55;
+  border-radius: 0.25rem;
+}
+.faq-page .faq-section-items .faq-item .faq-answer pre.astro-code code,
+.faq-page .faq-section-items .faq-item .faq-answer pre code {
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.faq-page .faq-cta {
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  background: radial-gradient(ellipse at top, rgba(var(--bs-primary-rgb), 0.08), transparent 60%), var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+}
+.faq-page .faq-cta-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-bottom: 1rem;
+  font-size: 1.6rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 50%;
+}
+.faq-page .faq-cta h2, .faq-page .faq-cta .h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--bs-emphasis-color);
+}
+.faq-page .faq-cta p {
+  max-width: 32rem;
+  margin: 0 auto 1.5rem;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-cta-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
 .progress {
   border-radius: 1px;
 }
@@ -16344,4 +16800,460 @@ fieldset legend {
   background: rgba(255, 255, 255, 0.08);
 }
 
+.faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
+  max-width: 64rem;
+}
+@media (min-width: 1400px) {
+  .faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
+    max-width: 72rem;
+  }
+}
+.faq-page .faq-hero {
+  position: relative;
+  padding: 3rem 1.5rem 2.5rem;
+  margin-top: 1rem;
+  overflow: hidden;
+  background: radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), 0.12), transparent 60%), radial-gradient(ellipse at bottom right, rgba(var(--bs-info-rgb), 0.1), transparent 65%), var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+}
+.faq-page .faq-hero-eyebrow {
+  display: inline-flex;
+  gap: 0.4rem;
+  align-items: center;
+  padding: 0.35rem 0.85rem;
+  margin-bottom: 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--bs-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: var(--bs-primary-bg-subtle);
+  border: 1px solid var(--bs-primary-border-subtle);
+  border-radius: 50rem;
+}
+.faq-page .faq-hero-eyebrow .bi {
+  font-size: 0.9rem;
+}
+.faq-page .faq-hero-title {
+  margin: 0 0 0.5rem;
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.15;
+  color: var(--bs-emphasis-color);
+}
+@media (min-width: 768px) {
+  .faq-page .faq-hero-title {
+    font-size: 2.75rem;
+  }
+}
+.faq-page .faq-hero-lead {
+  max-width: 36rem;
+  margin: 0 auto 1.75rem;
+  font-size: 1.05rem;
+  line-height: 1.55;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-search {
+  position: relative;
+  max-width: 32rem;
+  margin: 0 auto;
+}
+.faq-page .faq-search .form-control {
+  height: 3rem;
+  padding-right: 3rem;
+  padding-left: 3rem;
+  font-size: 1rem;
+  background: var(--bs-body-bg);
+  border-radius: 50rem;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-search .form-control {
+    transition: none;
+  }
+}
+.faq-page .faq-search .form-control:focus {
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
+}
+.faq-page .faq-search-icon {
+  position: absolute;
+  top: 50%;
+  left: 1.2rem;
+  color: var(--bs-secondary-color);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+.faq-page .faq-search-clear {
+  position: absolute;
+  top: 50%;
+  right: 0.65rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border: 0;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-search-clear {
+    transition: none;
+  }
+}
+.faq-page .faq-search-clear:hover {
+  color: var(--bs-body-color);
+  background: var(--bs-secondary-bg);
+}
+.faq-page .faq-empty-state {
+  max-width: 32rem;
+  padding: 1rem;
+  margin: 1.5rem auto 0;
+  font-size: 0.95rem;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-empty-state .bi {
+  margin-right: 0.35rem;
+}
+.faq-page .faq-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+.faq-page .faq-chip {
+  display: inline-flex;
+  gap: 0.45rem;
+  align-items: center;
+  padding: 0.45rem 0.85rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--bs-body-color);
+  text-decoration: none;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 50rem;
+  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-chip {
+    transition: none;
+  }
+}
+.faq-page .faq-chip:hover {
+  color: var(--bs-emphasis-color);
+  background: var(--bs-tertiary-bg);
+  transform: translateY(-1px);
+}
+.faq-page .faq-chip .bi {
+  font-size: 1rem;
+}
+.faq-page .faq-chip-count {
+  padding: 0 0.45rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border-radius: 50rem;
+}
+.faq-page .faq-chip-primary:hover {
+  color: var(--bs-primary-text-emphasis);
+  background: var(--bs-primary-bg-subtle);
+  border-color: var(--bs-primary-border-subtle);
+}
+.faq-page .faq-chip-primary:hover .faq-chip-count {
+  color: var(--bs-primary-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-info:hover {
+  color: var(--bs-info-text-emphasis);
+  background: var(--bs-info-bg-subtle);
+  border-color: var(--bs-info-border-subtle);
+}
+.faq-page .faq-chip-info:hover .faq-chip-count {
+  color: var(--bs-info-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-warning:hover {
+  color: var(--bs-warning-text-emphasis);
+  background: var(--bs-warning-bg-subtle);
+  border-color: var(--bs-warning-border-subtle);
+}
+.faq-page .faq-chip-warning:hover .faq-chip-count {
+  color: var(--bs-warning-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-success:hover {
+  color: var(--bs-success-text-emphasis);
+  background: var(--bs-success-bg-subtle);
+  border-color: var(--bs-success-border-subtle);
+}
+.faq-page .faq-chip-success:hover .faq-chip-count {
+  color: var(--bs-success-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-danger:hover {
+  color: var(--bs-danger-text-emphasis);
+  background: var(--bs-danger-bg-subtle);
+  border-color: var(--bs-danger-border-subtle);
+}
+.faq-page .faq-chip-danger:hover .faq-chip-count {
+  color: var(--bs-danger-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-secondary:hover {
+  color: var(--bs-secondary-text-emphasis);
+  background: var(--bs-secondary-bg-subtle);
+  border-color: var(--bs-secondary-border-subtle);
+}
+.faq-page .faq-chip-secondary:hover .faq-chip-count {
+  color: var(--bs-secondary-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-section {
+  margin-bottom: 2.5rem;
+  scroll-margin-top: 5rem;
+}
+.faq-page .faq-section-header {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1rem;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-left: 4px solid var(--bs-primary);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-section-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  font-size: 1.35rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-section-title {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--bs-emphasis-color);
+}
+.faq-page .faq-section-count {
+  margin: 0.1rem 0 0;
+  font-size: 0.8rem;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-section-primary {
+  border-left-color: var(--bs-primary);
+}
+.faq-page .faq-section-primary .faq-section-icon {
+  color: var(--bs-primary-text-emphasis);
+  background: var(--bs-primary-bg-subtle);
+}
+.faq-page .faq-section-info {
+  border-left-color: var(--bs-info);
+}
+.faq-page .faq-section-info .faq-section-icon {
+  color: var(--bs-info-text-emphasis);
+  background: var(--bs-info-bg-subtle);
+}
+.faq-page .faq-section-warning {
+  border-left-color: var(--bs-warning);
+}
+.faq-page .faq-section-warning .faq-section-icon {
+  color: var(--bs-warning-text-emphasis);
+  background: var(--bs-warning-bg-subtle);
+}
+.faq-page .faq-section-success {
+  border-left-color: var(--bs-success);
+}
+.faq-page .faq-section-success .faq-section-icon {
+  color: var(--bs-success-text-emphasis);
+  background: var(--bs-success-bg-subtle);
+}
+.faq-page .faq-section-danger {
+  border-left-color: var(--bs-danger);
+}
+.faq-page .faq-section-danger .faq-section-icon {
+  color: var(--bs-danger-text-emphasis);
+  background: var(--bs-danger-bg-subtle);
+}
+.faq-page .faq-section-secondary {
+  border-left-color: var(--bs-secondary);
+}
+.faq-page .faq-section-secondary .faq-section-icon {
+  color: var(--bs-secondary-text-emphasis);
+  background: var(--bs-secondary-bg-subtle);
+}
+.faq-page .faq-section-items .faq-item {
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.375rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-section-items .faq-item {
+    transition: none;
+  }
+}
+.faq-page .faq-section-items .faq-item:hover {
+  border-color: var(--bs-primary-border-subtle);
+  transform: translateX(2px);
+}
+.faq-page .faq-section-items .faq-item[open] {
+  border-color: var(--bs-primary-border-subtle);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transform: none;
+}
+.faq-page .faq-section-items .faq-item summary {
+  display: flex;
+  gap: 0.85rem;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--bs-emphasis-color);
+  list-style: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.faq-page .faq-section-items .faq-item summary::-webkit-details-marker {
+  display: none;
+}
+.faq-page .faq-section-items .faq-item summary::marker {
+  content: "";
+}
+.faq-page .faq-section-items .faq-item summary::after {
+  content: none;
+}
+.faq-page .faq-section-items .faq-item .faq-q-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: 0.85rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 50%;
+}
+.faq-page .faq-section-items .faq-item .faq-q-text {
+  flex-grow: 1;
+}
+.faq-page .faq-section-items .faq-item .faq-q-chevron {
+  flex-shrink: 0;
+  color: var(--bs-secondary-color);
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-section-items .faq-item .faq-q-chevron {
+    transition: none;
+  }
+}
+.faq-page .faq-section-items .faq-item[open] .faq-q-chevron {
+  color: var(--bs-primary);
+  transform: rotate(180deg);
+}
+.faq-page .faq-section-items .faq-item[open] summary {
+  color: var(--bs-primary);
+  border-bottom: 1px solid var(--bs-border-color);
+}
+.faq-page .faq-section-items .faq-item .faq-answer {
+  padding: 1.1rem 1.25rem 1.1rem 3.85rem;
+  font-size: 0.95rem;
+  line-height: 1.65;
+  color: var(--bs-body-color);
+}
+.faq-page .faq-section-items .faq-item .faq-answer p:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer ul:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer ol:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer pre:last-child {
+  margin-bottom: 0;
+}
+.faq-page .faq-section-items .faq-item .faq-answer a {
+  color: var(--bs-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.faq-page .faq-section-items .faq-item .faq-answer a:hover {
+  text-decoration-thickness: 2px;
+}
+.faq-page .faq-section-items .faq-item .faq-answer code {
+  padding: 0.12em 0.35em;
+  font-size: 0.875em;
+  color: var(--bs-emphasis-color);
+  background: var(--bs-tertiary-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.25rem;
+}
+.faq-page .faq-section-items .faq-item .faq-answer pre.astro-code,
+.faq-page .faq-section-items .faq-item .faq-answer pre {
+  padding: 0.85rem 1rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  overflow-x: auto;
+  font-size: 0.85rem;
+  line-height: 1.55;
+  border-radius: 0.25rem;
+}
+.faq-page .faq-section-items .faq-item .faq-answer pre.astro-code code,
+.faq-page .faq-section-items .faq-item .faq-answer pre code {
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.faq-page .faq-cta {
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  background: radial-gradient(ellipse at top, rgba(var(--bs-primary-rgb), 0.08), transparent 60%), var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+}
+.faq-page .faq-cta-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-bottom: 1rem;
+  font-size: 1.6rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 50%;
+}
+.faq-page .faq-cta h2, .faq-page .faq-cta .h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--bs-emphasis-color);
+}
+.faq-page .faq-cta p {
+  max-width: 32rem;
+  margin: 0 auto 1.5rem;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-cta-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
 /*# sourceMappingURL=adminlte.css.map */

dist/css/adminlte.rtl.css

@@ -14537,6 +14537,462 @@ body:not(.app-loaded) .app-footer {
   background: rgba(255, 255, 255, 0.08);
 }
 
+.faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
+  max-width: 64rem;
+}
+@media (min-width: 1400px) {
+  .faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
+    max-width: 72rem;
+  }
+}
+.faq-page .faq-hero {
+  position: relative;
+  padding: 3rem 1.5rem 2.5rem;
+  margin-top: 1rem;
+  overflow: hidden;
+  background: radial-gradient(ellipse at top right, rgba(var(--bs-primary-rgb), 0.12), transparent 60%), radial-gradient(ellipse at bottom left, rgba(var(--bs-info-rgb), 0.1), transparent 65%), var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+}
+.faq-page .faq-hero-eyebrow {
+  display: inline-flex;
+  gap: 0.4rem;
+  align-items: center;
+  padding: 0.35rem 0.85rem;
+  margin-bottom: 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--bs-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: var(--bs-primary-bg-subtle);
+  border: 1px solid var(--bs-primary-border-subtle);
+  border-radius: 50rem;
+}
+.faq-page .faq-hero-eyebrow .bi {
+  font-size: 0.9rem;
+}
+.faq-page .faq-hero-title {
+  margin: 0 0 0.5rem;
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.15;
+  color: var(--bs-emphasis-color);
+}
+@media (min-width: 768px) {
+  .faq-page .faq-hero-title {
+    font-size: 2.75rem;
+  }
+}
+.faq-page .faq-hero-lead {
+  max-width: 36rem;
+  margin: 0 auto 1.75rem;
+  font-size: 1.05rem;
+  line-height: 1.55;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-search {
+  position: relative;
+  max-width: 32rem;
+  margin: 0 auto;
+}
+.faq-page .faq-search .form-control {
+  height: 3rem;
+  padding-left: 3rem;
+  padding-right: 3rem;
+  font-size: 1rem;
+  background: var(--bs-body-bg);
+  border-radius: 50rem;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-search .form-control {
+    transition: none;
+  }
+}
+.faq-page .faq-search .form-control:focus {
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
+}
+.faq-page .faq-search-icon {
+  position: absolute;
+  top: 50%;
+  right: 1.2rem;
+  color: var(--bs-secondary-color);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+.faq-page .faq-search-clear {
+  position: absolute;
+  top: 50%;
+  left: 0.65rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border: 0;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-search-clear {
+    transition: none;
+  }
+}
+.faq-page .faq-search-clear:hover {
+  color: var(--bs-body-color);
+  background: var(--bs-secondary-bg);
+}
+.faq-page .faq-empty-state {
+  max-width: 32rem;
+  padding: 1rem;
+  margin: 1.5rem auto 0;
+  font-size: 0.95rem;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-empty-state .bi {
+  margin-left: 0.35rem;
+}
+.faq-page .faq-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+.faq-page .faq-chip {
+  display: inline-flex;
+  gap: 0.45rem;
+  align-items: center;
+  padding: 0.45rem 0.85rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--bs-body-color);
+  text-decoration: none;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 50rem;
+  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-chip {
+    transition: none;
+  }
+}
+.faq-page .faq-chip:hover {
+  color: var(--bs-emphasis-color);
+  background: var(--bs-tertiary-bg);
+  transform: translateY(-1px);
+}
+.faq-page .faq-chip .bi {
+  font-size: 1rem;
+}
+.faq-page .faq-chip-count {
+  padding: 0 0.45rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border-radius: 50rem;
+}
+.faq-page .faq-chip-primary:hover {
+  color: var(--bs-primary-text-emphasis);
+  background: var(--bs-primary-bg-subtle);
+  border-color: var(--bs-primary-border-subtle);
+}
+.faq-page .faq-chip-primary:hover .faq-chip-count {
+  color: var(--bs-primary-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-info:hover {
+  color: var(--bs-info-text-emphasis);
+  background: var(--bs-info-bg-subtle);
+  border-color: var(--bs-info-border-subtle);
+}
+.faq-page .faq-chip-info:hover .faq-chip-count {
+  color: var(--bs-info-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-warning:hover {
+  color: var(--bs-warning-text-emphasis);
+  background: var(--bs-warning-bg-subtle);
+  border-color: var(--bs-warning-border-subtle);
+}
+.faq-page .faq-chip-warning:hover .faq-chip-count {
+  color: var(--bs-warning-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-success:hover {
+  color: var(--bs-success-text-emphasis);
+  background: var(--bs-success-bg-subtle);
+  border-color: var(--bs-success-border-subtle);
+}
+.faq-page .faq-chip-success:hover .faq-chip-count {
+  color: var(--bs-success-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-danger:hover {
+  color: var(--bs-danger-text-emphasis);
+  background: var(--bs-danger-bg-subtle);
+  border-color: var(--bs-danger-border-subtle);
+}
+.faq-page .faq-chip-danger:hover .faq-chip-count {
+  color: var(--bs-danger-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-secondary:hover {
+  color: var(--bs-secondary-text-emphasis);
+  background: var(--bs-secondary-bg-subtle);
+  border-color: var(--bs-secondary-border-subtle);
+}
+.faq-page .faq-chip-secondary:hover .faq-chip-count {
+  color: var(--bs-secondary-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-section {
+  margin-bottom: 2.5rem;
+  scroll-margin-top: 5rem;
+}
+.faq-page .faq-section-header {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1rem;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-right: 4px solid var(--bs-primary);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-section-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  font-size: 1.35rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-section-title {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--bs-emphasis-color);
+}
+.faq-page .faq-section-count {
+  margin: 0.1rem 0 0;
+  font-size: 0.8rem;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-section-primary {
+  border-right-color: var(--bs-primary);
+}
+.faq-page .faq-section-primary .faq-section-icon {
+  color: var(--bs-primary-text-emphasis);
+  background: var(--bs-primary-bg-subtle);
+}
+.faq-page .faq-section-info {
+  border-right-color: var(--bs-info);
+}
+.faq-page .faq-section-info .faq-section-icon {
+  color: var(--bs-info-text-emphasis);
+  background: var(--bs-info-bg-subtle);
+}
+.faq-page .faq-section-warning {
+  border-right-color: var(--bs-warning);
+}
+.faq-page .faq-section-warning .faq-section-icon {
+  color: var(--bs-warning-text-emphasis);
+  background: var(--bs-warning-bg-subtle);
+}
+.faq-page .faq-section-success {
+  border-right-color: var(--bs-success);
+}
+.faq-page .faq-section-success .faq-section-icon {
+  color: var(--bs-success-text-emphasis);
+  background: var(--bs-success-bg-subtle);
+}
+.faq-page .faq-section-danger {
+  border-right-color: var(--bs-danger);
+}
+.faq-page .faq-section-danger .faq-section-icon {
+  color: var(--bs-danger-text-emphasis);
+  background: var(--bs-danger-bg-subtle);
+}
+.faq-page .faq-section-secondary {
+  border-right-color: var(--bs-secondary);
+}
+.faq-page .faq-section-secondary .faq-section-icon {
+  color: var(--bs-secondary-text-emphasis);
+  background: var(--bs-secondary-bg-subtle);
+}
+.faq-page .faq-section-items .faq-item {
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.375rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-section-items .faq-item {
+    transition: none;
+  }
+}
+.faq-page .faq-section-items .faq-item:hover {
+  border-color: var(--bs-primary-border-subtle);
+  transform: translateX(-2px);
+}
+.faq-page .faq-section-items .faq-item[open] {
+  border-color: var(--bs-primary-border-subtle);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transform: none;
+}
+.faq-page .faq-section-items .faq-item summary {
+  display: flex;
+  gap: 0.85rem;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--bs-emphasis-color);
+  list-style: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.faq-page .faq-section-items .faq-item summary::-webkit-details-marker {
+  display: none;
+}
+.faq-page .faq-section-items .faq-item summary::marker {
+  content: "";
+}
+.faq-page .faq-section-items .faq-item summary::after {
+  content: none;
+}
+.faq-page .faq-section-items .faq-item .faq-q-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: 0.85rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 50%;
+}
+.faq-page .faq-section-items .faq-item .faq-q-text {
+  flex-grow: 1;
+}
+.faq-page .faq-section-items .faq-item .faq-q-chevron {
+  flex-shrink: 0;
+  color: var(--bs-secondary-color);
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-section-items .faq-item .faq-q-chevron {
+    transition: none;
+  }
+}
+.faq-page .faq-section-items .faq-item[open] .faq-q-chevron {
+  color: var(--bs-primary);
+  transform: rotate(-180deg);
+}
+.faq-page .faq-section-items .faq-item[open] summary {
+  color: var(--bs-primary);
+  border-bottom: 1px solid var(--bs-border-color);
+}
+.faq-page .faq-section-items .faq-item .faq-answer {
+  padding: 1.1rem 3.85rem 1.1rem 1.25rem;
+  font-size: 0.95rem;
+  line-height: 1.65;
+  color: var(--bs-body-color);
+}
+.faq-page .faq-section-items .faq-item .faq-answer p:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer ul:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer ol:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer pre:last-child {
+  margin-bottom: 0;
+}
+.faq-page .faq-section-items .faq-item .faq-answer a {
+  color: var(--bs-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.faq-page .faq-section-items .faq-item .faq-answer a:hover {
+  text-decoration-thickness: 2px;
+}
+.faq-page .faq-section-items .faq-item .faq-answer code {
+  padding: 0.12em 0.35em;
+  font-size: 0.875em;
+  color: var(--bs-emphasis-color);
+  background: var(--bs-tertiary-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.25rem;
+}
+.faq-page .faq-section-items .faq-item .faq-answer pre.astro-code,
+.faq-page .faq-section-items .faq-item .faq-answer pre {
+  padding: 0.85rem 1rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  overflow-x: auto;
+  font-size: 0.85rem;
+  line-height: 1.55;
+  border-radius: 0.25rem;
+}
+.faq-page .faq-section-items .faq-item .faq-answer pre.astro-code code,
+.faq-page .faq-section-items .faq-item .faq-answer pre code {
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.faq-page .faq-cta {
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  background: radial-gradient(ellipse at top, rgba(var(--bs-primary-rgb), 0.08), transparent 60%), var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+}
+.faq-page .faq-cta-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-bottom: 1rem;
+  font-size: 1.6rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 50%;
+}
+.faq-page .faq-cta h2, .faq-page .faq-cta .h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--bs-emphasis-color);
+}
+.faq-page .faq-cta p {
+  max-width: 32rem;
+  margin: 0 auto 1.5rem;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-cta-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
 .progress {
   border-radius: 1px;
 }
@@ -16317,4 +16773,460 @@ fieldset legend {
 .docs-page[data-bs-theme=dark] .card > .card-body blockquote code, [data-bs-theme=dark] .docs-page .card > .card-body blockquote code {
   background: rgba(255, 255, 255, 0.08);
 }
+
+.faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
+  max-width: 64rem;
+}
+@media (min-width: 1400px) {
+  .faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
+    max-width: 72rem;
+  }
+}
+.faq-page .faq-hero {
+  position: relative;
+  padding: 3rem 1.5rem 2.5rem;
+  margin-top: 1rem;
+  overflow: hidden;
+  background: radial-gradient(ellipse at top right, rgba(var(--bs-primary-rgb), 0.12), transparent 60%), radial-gradient(ellipse at bottom left, rgba(var(--bs-info-rgb), 0.1), transparent 65%), var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+}
+.faq-page .faq-hero-eyebrow {
+  display: inline-flex;
+  gap: 0.4rem;
+  align-items: center;
+  padding: 0.35rem 0.85rem;
+  margin-bottom: 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--bs-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: var(--bs-primary-bg-subtle);
+  border: 1px solid var(--bs-primary-border-subtle);
+  border-radius: 50rem;
+}
+.faq-page .faq-hero-eyebrow .bi {
+  font-size: 0.9rem;
+}
+.faq-page .faq-hero-title {
+  margin: 0 0 0.5rem;
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.15;
+  color: var(--bs-emphasis-color);
+}
+@media (min-width: 768px) {
+  .faq-page .faq-hero-title {
+    font-size: 2.75rem;
+  }
+}
+.faq-page .faq-hero-lead {
+  max-width: 36rem;
+  margin: 0 auto 1.75rem;
+  font-size: 1.05rem;
+  line-height: 1.55;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-search {
+  position: relative;
+  max-width: 32rem;
+  margin: 0 auto;
+}
+.faq-page .faq-search .form-control {
+  height: 3rem;
+  padding-left: 3rem;
+  padding-right: 3rem;
+  font-size: 1rem;
+  background: var(--bs-body-bg);
+  border-radius: 50rem;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-search .form-control {
+    transition: none;
+  }
+}
+.faq-page .faq-search .form-control:focus {
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
+}
+.faq-page .faq-search-icon {
+  position: absolute;
+  top: 50%;
+  right: 1.2rem;
+  color: var(--bs-secondary-color);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+.faq-page .faq-search-clear {
+  position: absolute;
+  top: 50%;
+  left: 0.65rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border: 0;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-search-clear {
+    transition: none;
+  }
+}
+.faq-page .faq-search-clear:hover {
+  color: var(--bs-body-color);
+  background: var(--bs-secondary-bg);
+}
+.faq-page .faq-empty-state {
+  max-width: 32rem;
+  padding: 1rem;
+  margin: 1.5rem auto 0;
+  font-size: 0.95rem;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-empty-state .bi {
+  margin-left: 0.35rem;
+}
+.faq-page .faq-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+.faq-page .faq-chip {
+  display: inline-flex;
+  gap: 0.45rem;
+  align-items: center;
+  padding: 0.45rem 0.85rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--bs-body-color);
+  text-decoration: none;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 50rem;
+  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-chip {
+    transition: none;
+  }
+}
+.faq-page .faq-chip:hover {
+  color: var(--bs-emphasis-color);
+  background: var(--bs-tertiary-bg);
+  transform: translateY(-1px);
+}
+.faq-page .faq-chip .bi {
+  font-size: 1rem;
+}
+.faq-page .faq-chip-count {
+  padding: 0 0.45rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border-radius: 50rem;
+}
+.faq-page .faq-chip-primary:hover {
+  color: var(--bs-primary-text-emphasis);
+  background: var(--bs-primary-bg-subtle);
+  border-color: var(--bs-primary-border-subtle);
+}
+.faq-page .faq-chip-primary:hover .faq-chip-count {
+  color: var(--bs-primary-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-info:hover {
+  color: var(--bs-info-text-emphasis);
+  background: var(--bs-info-bg-subtle);
+  border-color: var(--bs-info-border-subtle);
+}
+.faq-page .faq-chip-info:hover .faq-chip-count {
+  color: var(--bs-info-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-warning:hover {
+  color: var(--bs-warning-text-emphasis);
+  background: var(--bs-warning-bg-subtle);
+  border-color: var(--bs-warning-border-subtle);
+}
+.faq-page .faq-chip-warning:hover .faq-chip-count {
+  color: var(--bs-warning-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-success:hover {
+  color: var(--bs-success-text-emphasis);
+  background: var(--bs-success-bg-subtle);
+  border-color: var(--bs-success-border-subtle);
+}
+.faq-page .faq-chip-success:hover .faq-chip-count {
+  color: var(--bs-success-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-danger:hover {
+  color: var(--bs-danger-text-emphasis);
+  background: var(--bs-danger-bg-subtle);
+  border-color: var(--bs-danger-border-subtle);
+}
+.faq-page .faq-chip-danger:hover .faq-chip-count {
+  color: var(--bs-danger-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-secondary:hover {
+  color: var(--bs-secondary-text-emphasis);
+  background: var(--bs-secondary-bg-subtle);
+  border-color: var(--bs-secondary-border-subtle);
+}
+.faq-page .faq-chip-secondary:hover .faq-chip-count {
+  color: var(--bs-secondary-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-section {
+  margin-bottom: 2.5rem;
+  scroll-margin-top: 5rem;
+}
+.faq-page .faq-section-header {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1rem;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-right: 4px solid var(--bs-primary);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-section-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  font-size: 1.35rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-section-title {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--bs-emphasis-color);
+}
+.faq-page .faq-section-count {
+  margin: 0.1rem 0 0;
+  font-size: 0.8rem;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-section-primary {
+  border-right-color: var(--bs-primary);
+}
+.faq-page .faq-section-primary .faq-section-icon {
+  color: var(--bs-primary-text-emphasis);
+  background: var(--bs-primary-bg-subtle);
+}
+.faq-page .faq-section-info {
+  border-right-color: var(--bs-info);
+}
+.faq-page .faq-section-info .faq-section-icon {
+  color: var(--bs-info-text-emphasis);
+  background: var(--bs-info-bg-subtle);
+}
+.faq-page .faq-section-warning {
+  border-right-color: var(--bs-warning);
+}
+.faq-page .faq-section-warning .faq-section-icon {
+  color: var(--bs-warning-text-emphasis);
+  background: var(--bs-warning-bg-subtle);
+}
+.faq-page .faq-section-success {
+  border-right-color: var(--bs-success);
+}
+.faq-page .faq-section-success .faq-section-icon {
+  color: var(--bs-success-text-emphasis);
+  background: var(--bs-success-bg-subtle);
+}
+.faq-page .faq-section-danger {
+  border-right-color: var(--bs-danger);
+}
+.faq-page .faq-section-danger .faq-section-icon {
+  color: var(--bs-danger-text-emphasis);
+  background: var(--bs-danger-bg-subtle);
+}
+.faq-page .faq-section-secondary {
+  border-right-color: var(--bs-secondary);
+}
+.faq-page .faq-section-secondary .faq-section-icon {
+  color: var(--bs-secondary-text-emphasis);
+  background: var(--bs-secondary-bg-subtle);
+}
+.faq-page .faq-section-items .faq-item {
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.375rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-section-items .faq-item {
+    transition: none;
+  }
+}
+.faq-page .faq-section-items .faq-item:hover {
+  border-color: var(--bs-primary-border-subtle);
+  transform: translateX(-2px);
+}
+.faq-page .faq-section-items .faq-item[open] {
+  border-color: var(--bs-primary-border-subtle);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transform: none;
+}
+.faq-page .faq-section-items .faq-item summary {
+  display: flex;
+  gap: 0.85rem;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--bs-emphasis-color);
+  list-style: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.faq-page .faq-section-items .faq-item summary::-webkit-details-marker {
+  display: none;
+}
+.faq-page .faq-section-items .faq-item summary::marker {
+  content: "";
+}
+.faq-page .faq-section-items .faq-item summary::after {
+  content: none;
+}
+.faq-page .faq-section-items .faq-item .faq-q-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: 0.85rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 50%;
+}
+.faq-page .faq-section-items .faq-item .faq-q-text {
+  flex-grow: 1;
+}
+.faq-page .faq-section-items .faq-item .faq-q-chevron {
+  flex-shrink: 0;
+  color: var(--bs-secondary-color);
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-section-items .faq-item .faq-q-chevron {
+    transition: none;
+  }
+}
+.faq-page .faq-section-items .faq-item[open] .faq-q-chevron {
+  color: var(--bs-primary);
+  transform: rotate(-180deg);
+}
+.faq-page .faq-section-items .faq-item[open] summary {
+  color: var(--bs-primary);
+  border-bottom: 1px solid var(--bs-border-color);
+}
+.faq-page .faq-section-items .faq-item .faq-answer {
+  padding: 1.1rem 3.85rem 1.1rem 1.25rem;
+  font-size: 0.95rem;
+  line-height: 1.65;
+  color: var(--bs-body-color);
+}
+.faq-page .faq-section-items .faq-item .faq-answer p:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer ul:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer ol:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer pre:last-child {
+  margin-bottom: 0;
+}
+.faq-page .faq-section-items .faq-item .faq-answer a {
+  color: var(--bs-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.faq-page .faq-section-items .faq-item .faq-answer a:hover {
+  text-decoration-thickness: 2px;
+}
+.faq-page .faq-section-items .faq-item .faq-answer code {
+  padding: 0.12em 0.35em;
+  font-size: 0.875em;
+  color: var(--bs-emphasis-color);
+  background: var(--bs-tertiary-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.25rem;
+}
+.faq-page .faq-section-items .faq-item .faq-answer pre.astro-code,
+.faq-page .faq-section-items .faq-item .faq-answer pre {
+  padding: 0.85rem 1rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  overflow-x: auto;
+  font-size: 0.85rem;
+  line-height: 1.55;
+  border-radius: 0.25rem;
+}
+.faq-page .faq-section-items .faq-item .faq-answer pre.astro-code code,
+.faq-page .faq-section-items .faq-item .faq-answer pre code {
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.faq-page .faq-cta {
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  background: radial-gradient(ellipse at top, rgba(var(--bs-primary-rgb), 0.08), transparent 60%), var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+}
+.faq-page .faq-cta-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-bottom: 1rem;
+  font-size: 1.6rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 50%;
+}
+.faq-page .faq-cta h2, .faq-page .faq-cta .h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--bs-emphasis-color);
+}
+.faq-page .faq-cta p {
+  max-width: 32rem;
+  margin: 0 auto 1.5rem;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-cta-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
 /*# sourceMappingURL=adminlte.rtl.css.map */

dist/docs/faq.html

@@ -1,6 +1,5 @@
 <!doctype html>
 <html lang="en">
-  <!--begin::Head-->
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>FAQ | AdminLTE 4</title>
@@ -62,10 +61,7 @@
     <link rel="stylesheet" href="../css/adminlte.css" />
     <!--end::Required Plugin(AdminLTE)-->
   </head>
-  <!--end::Head-->
-  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
-    <!--begin::App Wrapper-->
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page faq-page">
     <div class="app-wrapper">
       <!--begin::Header-->
       <nav class="app-header navbar navbar-expand bg-body">
@@ -588,13 +584,9 @@
         <!--end::Sidebar Wrapper-->
       </aside>
       <!--end::Sidebar (docs mode)-->
-      <!--begin::App Main-->
       <main class="app-main">
-        <!--begin::App Content Header-->
         <div class="app-content-header">
-          <!--begin::Container-->
           <div class="container-fluid">
-            <!--begin::Row-->
             <div class="row">
               <div class="col-sm-6">
                 <h3 class="mb-0">FAQ</h3>
@@ -606,245 +598,586 @@
                 </ol>
               </div>
             </div>
-            <!--end::Row-->
           </div>
-          <!--end::Container-->
         </div>
-        <!--end::App Content Header-->
-        <!--begin::App Content-->
         <div class="app-content">
-          <!--begin::Container-->
           <div class="container-fluid">
-            <p>
-              A grab bag of questions we get asked most often. Click any question to expand the
-              answer. If yours isn’t here,
-              <a href="https://github.com/ColorlibHQ/AdminLTE/discussions">open a Discussion</a> on
-              GitHub.
-            </p>
-            <h5 id="getting-started">Getting started</h5>
-            <details class="faq-item">
-              <summary>What is AdminLTE, exactly?</summary>
-              <p>
-                A free, MIT-licensed admin dashboard <em>template</em>. It’s a set of HTML, CSS, and
-                JavaScript files built on top of Bootstrap 5.3 — not a framework, not an npm
-                component library. You drop it into your project, modify the markup to suit your
-                app, and ship.
-              </p>
-            </details>
-            <details class="faq-item">
-              <summary>Do I need a build step to use it?</summary>
-              <p>
-                No. The <a href="getting-started.html">Getting Started</a> guide shows the CDN-only
-                approach — copy four <code>&lt;link&gt;</code> tags and four
-                <code>&lt;script&gt;</code> tags into your HTML and you’re done. The npm-based
-                workflow is there if you want to customise SCSS variables or tree-shake the
-                JavaScript.
-              </p>
-            </details>
-            <details class="faq-item">
-              <summary>Which Bootstrap version does v4 require?</summary>
-              <p>
-                Bootstrap 5.3.x. The current <code>package.json</code> pins 5.3.8 — older 5.3 minors
-                should work but aren’t tested. Bootstrap 5.0/5.1/5.2 will not work (the colour-mode
-                and <code>data-bs-theme</code> system landed in 5.3).
-              </p>
-            </details>
-            <details class="faq-item">
-              <summary>Can I use AdminLTE 4 with jQuery?</summary>
-              <p>
-                You don’t <em>need</em> jQuery — AdminLTE 4’s JavaScript is vanilla. If your
-                existing app already uses jQuery, it’ll coexist fine. But none of AdminLTE 4’s own
-                plugins call into jQuery, and there are no <code>$.fn.xxx()</code> plugin shims.
-              </p>
-            </details>
-            <h5 id="framework-integrations">Framework integrations</h5>
-            <details class="faq-item">
-              <summary>Can AdminLTE be used with WordPress?</summary>
-              <p>
-                Yes — it’s just HTML/CSS/JS. The typical path is to build a custom WordPress theme
-                that wraps AdminLTE’s markup around <code>wp_head()</code>,
-                <code>wp_footer()</code>, and WordPress’s loops. AdminLTE doesn’t ship a
-                WordPress-specific build; the work of porting nav-walker classes and authentication
-                forms is yours.
-              </p>
-            </details>
-            <details class="faq-item">
-              <summary>Laravel? Symfony? Yii? Django? Rails?</summary>
-              <p>
-                All workable. AdminLTE is a server-rendered template — copy the demo pages into your
-                views/templates, replace static content with your framework’s template variables,
-                and wire up routes/auth as usual. Community Composer/Packagist packages exist for
-                Laravel and Symfony, though they typically lag the upstream version — verify they
-                ship v4 before you depend on them.
-              </p>
-            </details>
-            <details class="faq-item">
-              <summary>React, Vue, Svelte, Angular?</summary>
-              <p>
-                Workable but less natural. AdminLTE’s JavaScript plugins use DOM lifecycle hooks
-                (<code>DOMContentLoaded</code>, MutationObserver patterns) which fight with
-                framework reconciliation. If you’re using a SPA framework, consider:
-              </p>
-              <ul>
-                <li>
-                  Using AdminLTE <em>only</em> for CSS — keep the visual style, but write your own
-                  React/Vue components for the interactive parts.
-                </li>
-                <li>
-                  Or pick a component library built for your framework (PrimeReact, Vuetify, etc.).
-                </li>
-              </ul>
-              <p>
-                We don’t recommend wrapping AdminLTE’s jQuery-era plugins in SPA framework
-                components — it’s a maintenance burden that outweighs the visual win.
-              </p>
-            </details>
-            <h5 id="customization">Customization</h5>
-            <details class="faq-item">
-              <summary>How do I change the primary colour?</summary>
-              <p>
-                Override <code>--bs-primary</code> (and its RGB counterpart) on <code>:root</code>:
-              </p>
-              <pre
-                class="astro-code dark-plus"
-                style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-                tabindex="0"
-                data-language="css"
-              ><code><span class="line"><span style="color:#D7BA7D">:root</span><span style="color:#D4D4D4"> {</span></span>
-<span class="line"><span style="color:#9CDCFE">  --bs-primary</span><span style="color:#D4D4D4">: </span><span style="color:#CE9178">#6610f2</span><span style="color:#D4D4D4">;</span></span>
-<span class="line"><span style="color:#9CDCFE">  --bs-primary-rgb</span><span style="color:#D4D4D4">: </span><span style="color:#B5CEA8">102</span><span style="color:#D4D4D4">, </span><span style="color:#B5CEA8">16</span><span style="color:#D4D4D4">, </span><span style="color:#B5CEA8">242</span><span style="color:#D4D4D4">;</span></span>
-<span class="line"><span style="color:#D4D4D4">}</span></span></code></pre>
-              <p>
-                For deeper control (sidebar width, breakpoints, spacing scale), see
-                <a href="customization.html">Customization &amp; Theming</a>.
-              </p>
-            </details>
-            <details class="faq-item">
-              <summary>How do I add a date picker / multi-select / rich text editor?</summary>
-              <p>
-                AdminLTE deliberately doesn’t bundle these — they’d bloat the framework. The
-                <a href="integrations.html">Recommended Integrations</a> page lists best-in-class
-                third-party libraries (Flatpickr, Tom Select, Quill, etc.) with copy-paste install
-                snippets.
-              </p>
-            </details>
-            <details class="faq-item">
-              <summary>Can I use FontAwesome instead of Bootstrap Icons?</summary>
-              <p>
-                Yes. Bootstrap Icons is the default in the demos because it’s MIT, ships with
-                Bootstrap, and is SVG-based — but nothing in AdminLTE’s CSS or JS requires it. Drop
-                in FontAwesome’s stylesheet and replace
-                <code>&lt;i class=&quot;bi bi-x&quot;&gt;</code> with
-                <code>&lt;i class=&quot;fas fa-x&quot;&gt;</code> throughout.
-              </p>
-            </details>
-            <h5 id="versions-and-updates">Versions and updates</h5>
-            <details class="faq-item">
-              <summary>How do I get notified of new versions?</summary>
-              <p>
-                <a href="https://github.com/ColorlibHQ/AdminLTE">Watch the GitHub repo</a>
-                (Releases-only mode) or subscribe to the RSS feed at
-                <code>https://github.com/ColorlibHQ/AdminLTE/releases.atom</code>.
+            <!-- Hero -->
+            <section class="faq-hero text-center mb-4">
+              <span class="faq-hero-eyebrow">
+                <i class="bi bi-patch-question-fill" aria-hidden="true"></i>
+                Frequently Asked Questions
+              </span>
+              <h1 class="faq-hero-title">How can we help?</h1>
+              <p class="faq-hero-lead">
+                Quick answers to the 21 questions we get asked most often. Use the search to jump to
+                anything, or click a topic below.
               </p>
-            </details>
-            <details class="faq-item">
-              <summary>Where’s the AdminLTE 3 documentation?</summary>
-              <p>
-                Still online at <a href="https://adminlte.io/docs/3.2/">adminlte.io/docs/3.2</a> and
-                earlier versions are linked there. The v3 branch on GitHub continues to receive
-                critical bug fixes; new features land in v4 only.
-              </p>
-            </details>
-            <details class="faq-item">
-              <summary>How do I upgrade from v3 to v4?</summary>
-              <p>
-                See the dedicated <a href="migration.html">Migration from v3</a> guide. The short
-                version: class names changed (<code>.wrapper</code> → <code>.app-wrapper</code>),
-                <code>data-toggle</code> → <code>data-bs-toggle</code>, dark mode uses
-                <code>data-bs-theme</code> instead of <code>.dark-mode</code>, and jQuery isn’t
-                required anymore.
-              </p>
-            </details>
-            <h5 id="licensing">Licensing</h5>
-            <details class="faq-item">
-              <summary>Is AdminLTE free for commercial use?</summary>
-              <p>
-                Yes — MIT licensed. You can use it in commercial products, SaaS apps, client work,
-                anything. The only requirement is preserving the copyright notice in the source
-                files (<code>adminlte.css</code> / <code>adminlte.js</code>). You don’t need to
-                display attribution in the UI.
-              </p>
-            </details>
-            <details class="faq-item">
-              <summary>Do I need to credit AdminLTE in my app?</summary>
-              <p>
-                No. The MIT license requires you to keep the licence notice in the source files you
-                distribute — that’s it. You don’t have to mention AdminLTE in the rendered UI, your
-                About page, or your README.
-              </p>
-            </details>
-            <details class="faq-item">
-              <summary>Can I sell a product made with AdminLTE?</summary>
-              <p>
-                Yes. The MIT license explicitly permits this. You can also resell modified versions
-                of AdminLTE itself (theme marketplaces frequently do this) — just preserve the
-                original copyright notice.
-              </p>
-            </details>
-            <h5 id="troubleshooting">Troubleshooting</h5>
-            <details class="faq-item">
-              <summary>The sidebar doesn’t collapse when I click the hamburger menu.</summary>
-              <p>
-                Check that the PushMenu plugin is loaded. It’s bundled into
-                <code>adminlte.js</code> — make sure the script tag is on the page and
-                <em>after</em> the markup it operates on. Also verify your hamburger button has
-                <code>data-lte-toggle=&quot;sidebar&quot;</code> (not
-                <code>data-widget=&quot;pushmenu&quot;</code>, which is the v3 attribute).
-              </p>
-            </details>
-            <details class="faq-item">
-              <summary>Dark mode doesn’t persist after refresh.</summary>
-              <p>
-                The included <a href="color-mode.html">Color Mode</a> toggle writes to
-                <code>localStorage</code> under the key <code>lte-theme</code>. If you’re using a
-                different toggle implementation, make sure it both sets
-                <code>document.documentElement.setAttribute(&#39;data-bs-theme&#39;, ...)</code> and
-                writes to localStorage on change.
-              </p>
-            </details>
-            <details class="faq-item">
-              <summary>
-                Bootstrap modal closes when I press Escape, but the AdminLTE sidebar closes too.
-              </summary>
-              <p>
-                Fixed in v4.0.0 (#5993). If you’re still seeing this, you’re on an older RC — update
-                to the latest.
-              </p>
-            </details>
-            <details class="faq-item">
-              <summary>My custom SCSS doesn’t override AdminLTE’s defaults.</summary>
-              <p>
-                Put your overrides <em>before</em> the <code>@import</code> of AdminLTE’s SCSS.
-                AdminLTE uses <code>!default</code> on its variables, which means the first
-                declaration wins. See
-                <a href="customization.html#scss-variables">Customization &amp; Theming</a> for the
-                import order.
+              <form class="faq-search" role="search" onsubmit="return false;">
+                <i class="bi bi-search faq-search-icon" aria-hidden="true"></i>
+                <input
+                  type="search"
+                  id="faq-search-input"
+                  class="form-control form-control-lg"
+                  placeholder="Search the FAQ…"
+                  aria-label="Search the FAQ"
+                  autocomplete="off"
+                />
+                <button
+                  type="button"
+                  class="faq-search-clear d-none"
+                  id="faq-search-clear"
+                  aria-label="Clear search"
+                >
+                  <i class="bi bi-x-lg" aria-hidden="true"></i>
+                </button>
+              </form>
+              <p class="faq-empty-state d-none" id="faq-empty-state">
+                <i class="bi bi-emoji-frown" aria-hidden="true"></i>
+                No questions match your search. Try a different keyword or
+                <a
+                  href="https://github.com/ColorlibHQ/AdminLTE/discussions"
+                  target="_blank"
+                  rel="noopener"
+                  >open a Discussion</a
+                >.
               </p>
-            </details>
-            <details class="faq-item">
-              <summary><code>npm install</code> fails with peer dependency errors.</summary>
+            </section>
+
+            <!-- Section nav chips -->
+            <nav class="faq-chips mb-4" aria-label="FAQ sections">
+              <a href="#getting-started" class="faq-chip faq-chip-primary">
+                <i class="bi bi-rocket-takeoff" aria-hidden="true"></i>
+                <span>Getting started</span>
+                <span class="faq-chip-count">4</span> </a
+              ><a href="#framework-integrations" class="faq-chip faq-chip-info">
+                <i class="bi bi-puzzle" aria-hidden="true"></i>
+                <span>Framework integrations</span>
+                <span class="faq-chip-count">3</span> </a
+              ><a href="#customization" class="faq-chip faq-chip-warning">
+                <i class="bi bi-palette" aria-hidden="true"></i>
+                <span>Customization</span>
+                <span class="faq-chip-count">3</span> </a
+              ><a href="#versions" class="faq-chip faq-chip-success">
+                <i class="bi bi-arrow-clockwise" aria-hidden="true"></i>
+                <span>Versions and updates</span>
+                <span class="faq-chip-count">3</span> </a
+              ><a href="#licensing" class="faq-chip faq-chip-secondary">
+                <i class="bi bi-shield-check" aria-hidden="true"></i>
+                <span>Licensing</span>
+                <span class="faq-chip-count">3</span> </a
+              ><a href="#troubleshooting" class="faq-chip faq-chip-danger">
+                <i class="bi bi-wrench-adjustable" aria-hidden="true"></i>
+                <span>Troubleshooting</span>
+                <span class="faq-chip-count">5</span>
+              </a>
+            </nav>
+
+            <!-- Sections -->
+            <div class="faq-sections">
+              <section id="getting-started" class="faq-section" data-faq-section>
+                <header class="faq-section-header faq-section-primary">
+                  <span class="faq-section-icon">
+                    <i class="bi bi-rocket-takeoff" aria-hidden="true"></i>
+                  </span>
+                  <div>
+                    <h2 class="faq-section-title">Getting started</h2>
+                    <p class="faq-section-count">4 questions</p>
+                  </div>
+                </header>
+                <div class="faq-section-items">
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text">What is AdminLTE, exactly?</span>
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      A free, MIT-licensed admin dashboard <em>template</em>. It's a set of HTML,
+                      CSS, and JavaScript files built on top of Bootstrap 5.3 — not a framework, not
+                      an npm component library. You drop it into your project, modify the markup to
+                      suit your app, and ship.
+                    </div>
+                  </details>
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text">Do I need a build step to use it?</span>
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      No. The <a href="getting-started.html">Getting Started</a> guide shows the
+                      CDN-only approach — copy four <code>&lt;link&gt;</code> tags and four
+                      <code>&lt;script&gt;</code> tags into your HTML and you're done. The npm-based
+                      workflow is there if you want to customise SCSS variables or tree-shake the
+                      JavaScript.
+                    </div>
+                  </details>
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text">Which Bootstrap version does v4 require?</span>
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      Bootstrap 5.3.x. The current <code>package.json</code> pins 5.3.8 — older 5.3
+                      minors should work but aren't tested. Bootstrap 5.0 / 5.1 / 5.2 will not work
+                      (the color-mode and <code>data-bs-theme</code> system landed in 5.3).
+                    </div>
+                  </details>
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text">Can I use AdminLTE 4 with jQuery?</span>
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      You don't <em>need</em> jQuery — AdminLTE 4's JavaScript is vanilla. If your
+                      existing app already uses jQuery, it'll coexist fine. But none of AdminLTE 4's
+                      own plugins call into jQuery, and there are no <code>$.fn.xxx()</code> plugin
+                      shims.
+                    </div>
+                  </details>
+                </div>
+              </section>
+              <section id="framework-integrations" class="faq-section" data-faq-section>
+                <header class="faq-section-header faq-section-info">
+                  <span class="faq-section-icon">
+                    <i class="bi bi-puzzle" aria-hidden="true"></i>
+                  </span>
+                  <div>
+                    <h2 class="faq-section-title">Framework integrations</h2>
+                    <p class="faq-section-count">3 questions</p>
+                  </div>
+                </header>
+                <div class="faq-section-items">
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text">Can AdminLTE be used with WordPress?</span>
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      Yes — it's just HTML/CSS/JS. The typical path is to build a custom WordPress
+                      theme that wraps AdminLTE's markup around <code>wp_head()</code>,
+                      <code>wp_footer()</code>, and WordPress's loops. AdminLTE doesn't ship a
+                      WordPress-specific build; the work of porting nav-walker classes and
+                      authentication forms is yours.
+                    </div>
+                  </details>
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text">Laravel? Symfony? Yii? Django? Rails?</span>
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      All workable. AdminLTE is a server-rendered template — copy the demo pages
+                      into your views/templates, replace static content with your framework's
+                      template variables, and wire up routes/auth as usual. Community
+                      Composer/Packagist packages exist for Laravel and Symfony, though they
+                      typically lag the upstream version — verify they ship v4 before you depend on
+                      them.
+                    </div>
+                  </details>
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text">React, Vue, Svelte, Angular?</span>
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      <p>
+                        Workable but less natural. AdminLTE's JavaScript plugins use DOM lifecycle
+                        hooks (<code>DOMContentLoaded</code>, MutationObserver patterns) which fight
+                        with framework reconciliation. If you're using a SPA framework, consider:
+                      </p>
+                      <ul>
+                        <li>
+                          Using AdminLTE <em>only</em> for CSS — keep the visual style, but write
+                          your own React/Vue components for the interactive parts.
+                        </li>
+                        <li>
+                          Or pick a component library built for your framework (PrimeReact, Vuetify,
+                          etc.).
+                        </li>
+                      </ul>
+                      <p class="mb-0">
+                        We don't recommend wrapping AdminLTE's jQuery-era plugins in SPA framework
+                        components — it's a maintenance burden that outweighs the visual win.
+                      </p>
+                    </div>
+                  </details>
+                </div>
+              </section>
+              <section id="customization" class="faq-section" data-faq-section>
+                <header class="faq-section-header faq-section-warning">
+                  <span class="faq-section-icon">
+                    <i class="bi bi-palette" aria-hidden="true"></i>
+                  </span>
+                  <div>
+                    <h2 class="faq-section-title">Customization</h2>
+                    <p class="faq-section-count">3 questions</p>
+                  </div>
+                </header>
+                <div class="faq-section-items">
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text">How do I change the primary colour?</span>
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      <p>
+                        Override <code>--bs-primary</code> (and its RGB counterpart) on
+                        <code>:root</code>:
+                      </p>
+                      <pre class="astro-code"><code>:root {
+  --bs-primary: #6610f2;
+  --bs-primary-rgb: 102, 16, 242;
+}</code></pre>
+                      <p class="mb-0">
+                        For deeper control (sidebar width, breakpoints, spacing scale), see
+                        <a href="customization.html">Customization &amp; Theming</a>.
+                      </p>
+                    </div>
+                  </details>
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text"
+                        >How do I add a date picker / multi-select / rich text editor?</span
+                      >
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      AdminLTE deliberately doesn't bundle these — they'd bloat the framework. The
+                      <a href="integrations.html">Recommended Integrations</a> page lists
+                      best-in-class third-party libraries (Flatpickr, Tom Select, Quill, etc.) with
+                      copy-paste install snippets.
+                    </div>
+                  </details>
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text"
+                        >Can I use FontAwesome instead of Bootstrap Icons?</span
+                      >
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      Yes. Bootstrap Icons is the default in the demos because it's MIT, ships with
+                      Bootstrap, and is SVG-based — but nothing in AdminLTE's CSS or JS requires it.
+                      Drop in FontAwesome's stylesheet and replace
+                      <code>&lt;i class="bi bi-x"&gt;</code> with
+                      <code>&lt;i class="fas fa-x"&gt;</code> throughout.
+                    </div>
+                  </details>
+                </div>
+              </section>
+              <section id="versions" class="faq-section" data-faq-section>
+                <header class="faq-section-header faq-section-success">
+                  <span class="faq-section-icon">
+                    <i class="bi bi-arrow-clockwise" aria-hidden="true"></i>
+                  </span>
+                  <div>
+                    <h2 class="faq-section-title">Versions and updates</h2>
+                    <p class="faq-section-count">3 questions</p>
+                  </div>
+                </header>
+                <div class="faq-section-items">
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text">How do I get notified of new versions?</span>
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      <a href="https://github.com/ColorlibHQ/AdminLTE">Watch the GitHub repo</a>
+                      (Releases-only mode) or subscribe to the RSS feed at
+                      <code>https://github.com/ColorlibHQ/AdminLTE/releases.atom</code>.
+                    </div>
+                  </details>
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text">Where's the AdminLTE 3 documentation?</span>
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      Still online at
+                      <a href="https://adminlte.io/docs/3.2/">adminlte.io/docs/3.2</a> and earlier
+                      versions are linked there. The v3 branch on GitHub continues to receive
+                      critical bug fixes; new features land in v4 only.
+                    </div>
+                  </details>
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text">How do I upgrade from v3 to v4?</span>
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      See the dedicated <a href="migration.html">Migration from v3</a> guide. The
+                      short version: class names changed (<code>.wrapper</code> →
+                      <code>.app-wrapper</code>), <code>data-toggle</code> →
+                      <code>data-bs-toggle</code>, dark mode uses <code>data-bs-theme</code> instead
+                      of <code>.dark-mode</code>, and jQuery isn't required anymore.
+                    </div>
+                  </details>
+                </div>
+              </section>
+              <section id="licensing" class="faq-section" data-faq-section>
+                <header class="faq-section-header faq-section-secondary">
+                  <span class="faq-section-icon">
+                    <i class="bi bi-shield-check" aria-hidden="true"></i>
+                  </span>
+                  <div>
+                    <h2 class="faq-section-title">Licensing</h2>
+                    <p class="faq-section-count">3 questions</p>
+                  </div>
+                </header>
+                <div class="faq-section-items">
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text">Is AdminLTE free for commercial use?</span>
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      Yes — MIT licensed. You can use it in commercial products, SaaS apps, client
+                      work, anything. The only requirement is preserving the copyright notice in the
+                      source files (<code>adminlte.css</code> / <code>adminlte.js</code>). You don't
+                      need to display attribution in the UI.
+                    </div>
+                  </details>
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text">Do I need to credit AdminLTE in my app?</span>
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      No. The MIT license requires you to keep the licence notice in the source
+                      files you distribute — that's it. You don't have to mention AdminLTE in the
+                      rendered UI, your About page, or your README.
+                    </div>
+                  </details>
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text">Can I sell a product made with AdminLTE?</span>
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      Yes. The MIT license explicitly permits this. You can also resell modified
+                      versions of AdminLTE itself (theme marketplaces frequently do this) — just
+                      preserve the original copyright notice.
+                    </div>
+                  </details>
+                </div>
+              </section>
+              <section id="troubleshooting" class="faq-section" data-faq-section>
+                <header class="faq-section-header faq-section-danger">
+                  <span class="faq-section-icon">
+                    <i class="bi bi-wrench-adjustable" aria-hidden="true"></i>
+                  </span>
+                  <div>
+                    <h2 class="faq-section-title">Troubleshooting</h2>
+                    <p class="faq-section-count">5 questions</p>
+                  </div>
+                </header>
+                <div class="faq-section-items">
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text"
+                        >The sidebar doesn't collapse when I click the hamburger menu.</span
+                      >
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      Check that the PushMenu plugin is loaded. It's bundled into
+                      <code>adminlte.js</code> — make sure the script tag is on the page and
+                      <em>after</em> the markup it operates on. Also verify your hamburger button
+                      has <code>data-lte-toggle="sidebar"</code> (not
+                      <code>data-widget="pushmenu"</code>, which is the v3 attribute).
+                    </div>
+                  </details>
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text">Dark mode doesn't persist after refresh.</span>
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      The included <a href="color-mode.html">Color Mode</a> toggle writes to
+                      <code>localStorage</code> under the key <code>lte-theme</code>. If you're
+                      using a different toggle implementation, make sure it both sets
+                      <code>document.documentElement.setAttribute('data-bs-theme', ...)</code> and
+                      writes to localStorage on change.
+                    </div>
+                  </details>
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text"
+                        >Bootstrap modal closes when I press Escape, but the AdminLTE sidebar closes
+                        too.</span
+                      >
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      Fixed in v4.0.0 (#5993). If you're still seeing this, you're on an older RC —
+                      update to the latest.
+                    </div>
+                  </details>
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text"
+                        >My custom SCSS doesn't override AdminLTE's defaults.</span
+                      >
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      Put your overrides <em>before</em> the <code>@import</code> of AdminLTE's
+                      SCSS. AdminLTE uses <code>!default</code> on its variables, which means the
+                      first declaration wins. See
+                      <a href="customization.html#scss-variables">Customization &amp; Theming</a>
+                      for the import order.
+                    </div>
+                  </details>
+                  <details class="faq-item" data-faq-item>
+                    <summary>
+                      <span class="faq-q-icon">
+                        <i class="bi bi-question-lg" aria-hidden="true"></i>
+                      </span>
+                      <span class="faq-q-text"
+                        ><code>npm install</code> fails with peer dependency errors.</span
+                      >
+                      <span class="faq-q-chevron">
+                        <i class="bi bi-chevron-down" aria-hidden="true"></i>
+                      </span>
+                    </summary>
+                    <div class="faq-answer">
+                      We use an npm <code>overrides</code> block in <code>package.json</code> to
+                      keep peers happy — make sure you're on npm 8.3+ which respects them. If you're
+                      on an older npm, install with <code>--legacy-peer-deps</code>.
+                    </div>
+                  </details>
+                </div>
+              </section>
+            </div>
+
+            <!-- CTA footer -->
+            <section class="faq-cta mt-5">
+              <div class="faq-cta-icon">
+                <i class="bi bi-chat-quote" aria-hidden="true"></i>
+              </div>
+              <h2>Still need help?</h2>
               <p>
-                We use an npm <code>overrides</code> block in <code>package.json</code> to keep
-                peers happy — make sure you’re on npm 8.3+ which respects them. If you’re on an
-                older npm, install with <code>--legacy-peer-deps</code>.
+                Open a discussion on GitHub or browse the documentation for more in-depth answers.
               </p>
-            </details>
+              <div class="faq-cta-actions">
+                <a
+                  href="https://github.com/ColorlibHQ/AdminLTE/discussions"
+                  target="_blank"
+                  rel="noopener"
+                  class="btn btn-primary"
+                >
+                  <i class="bi bi-github me-2" aria-hidden="true"></i>
+                  Open a Discussion
+                </a>
+                <a href="introduction.html" class="btn btn-outline-secondary">
+                  <i class="bi bi-book me-2" aria-hidden="true"></i>
+                  Browse Documentation
+                </a>
+              </div>
+            </section>
           </div>
-          <!--end::Container-->
         </div>
-        <!--end::App Content-->
       </main>
-      <!--end::App Main-->
       <!--begin::Footer-->
       <footer class="app-footer">
         <!--begin::To the end-->
@@ -860,8 +1193,6 @@
       </footer>
       <!--end::Footer-->
     </div>
-    <!--end::App Wrapper-->
-    <!--begin::Script-->
     <!--begin::Third Party Plugin(OverlayScrollbars)-->
     <script
       src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
@@ -973,7 +1304,65 @@
       })();
     </script>
     <!--end::Color Mode Toggle-->
-    <!--end::Script-->
+
+    <script>
+      // FAQ live search + clear button
+      (() => {
+        'use strict';
+        const input = document.getElementById('faq-search-input');
+        const clearBtn = document.getElementById('faq-search-clear');
+        const emptyState = document.getElementById('faq-empty-state');
+        if (!input) return;
+
+        const items = Array.from(document.querySelectorAll('[data-faq-item]'));
+        const sections = Array.from(document.querySelectorAll('[data-faq-section]'));
+
+        const normalize = (s) => s.toLowerCase().trim();
+
+        const filter = (query) => {
+          const q = normalize(query);
+          clearBtn.classList.toggle('d-none', q.length === 0);
+
+          let visibleTotal = 0;
+          for (const item of items) {
+            const text = item.textContent || '';
+            const matches = q === '' || normalize(text).includes(q);
+            item.classList.toggle('d-none', !matches);
+            // Open matching items when searching so users see context
+            item.open = q !== '' && matches;
+            if (matches) visibleTotal++;
+          }
+
+          // Hide entire sections that have no visible items
+          for (const section of sections) {
+            const hasVisible = section.querySelectorAll('[data-faq-item]:not(.d-none)').length > 0;
+            section.classList.toggle('d-none', !hasVisible);
+          }
+
+          emptyState.classList.toggle('d-none', visibleTotal !== 0);
+        };
+
+        input.addEventListener('input', (e) => filter(e.target.value));
+
+        clearBtn.addEventListener('click', () => {
+          input.value = '';
+          filter('');
+          input.focus();
+        });
+
+        // Smooth scroll to section on chip click + offset for sticky header
+        for (const chip of document.querySelectorAll('.faq-chip')) {
+          chip.addEventListener('click', (e) => {
+            const id = chip.getAttribute('href')?.replace('#', '');
+            if (!id) return;
+            const target = document.getElementById(id);
+            if (!target) return;
+            e.preventDefault();
+            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            history.replaceState(null, '', '#' + id);
+          });
+        }
+      })();
+    </script>
   </body>
-  <!--end::Body-->
 </html>

src/html/public/css/adminlte.css

@@ -14563,6 +14563,462 @@ body:not(.app-loaded) .app-footer {
   background: rgba(255, 255, 255, 0.08);
 }
 
+.faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
+  max-width: 64rem;
+}
+@media (min-width: 1400px) {
+  .faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
+    max-width: 72rem;
+  }
+}
+.faq-page .faq-hero {
+  position: relative;
+  padding: 3rem 1.5rem 2.5rem;
+  margin-top: 1rem;
+  overflow: hidden;
+  background: radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), 0.12), transparent 60%), radial-gradient(ellipse at bottom right, rgba(var(--bs-info-rgb), 0.1), transparent 65%), var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+}
+.faq-page .faq-hero-eyebrow {
+  display: inline-flex;
+  gap: 0.4rem;
+  align-items: center;
+  padding: 0.35rem 0.85rem;
+  margin-bottom: 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--bs-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: var(--bs-primary-bg-subtle);
+  border: 1px solid var(--bs-primary-border-subtle);
+  border-radius: 50rem;
+}
+.faq-page .faq-hero-eyebrow .bi {
+  font-size: 0.9rem;
+}
+.faq-page .faq-hero-title {
+  margin: 0 0 0.5rem;
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.15;
+  color: var(--bs-emphasis-color);
+}
+@media (min-width: 768px) {
+  .faq-page .faq-hero-title {
+    font-size: 2.75rem;
+  }
+}
+.faq-page .faq-hero-lead {
+  max-width: 36rem;
+  margin: 0 auto 1.75rem;
+  font-size: 1.05rem;
+  line-height: 1.55;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-search {
+  position: relative;
+  max-width: 32rem;
+  margin: 0 auto;
+}
+.faq-page .faq-search .form-control {
+  height: 3rem;
+  padding-right: 3rem;
+  padding-left: 3rem;
+  font-size: 1rem;
+  background: var(--bs-body-bg);
+  border-radius: 50rem;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-search .form-control {
+    transition: none;
+  }
+}
+.faq-page .faq-search .form-control:focus {
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
+}
+.faq-page .faq-search-icon {
+  position: absolute;
+  top: 50%;
+  left: 1.2rem;
+  color: var(--bs-secondary-color);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+.faq-page .faq-search-clear {
+  position: absolute;
+  top: 50%;
+  right: 0.65rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border: 0;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-search-clear {
+    transition: none;
+  }
+}
+.faq-page .faq-search-clear:hover {
+  color: var(--bs-body-color);
+  background: var(--bs-secondary-bg);
+}
+.faq-page .faq-empty-state {
+  max-width: 32rem;
+  padding: 1rem;
+  margin: 1.5rem auto 0;
+  font-size: 0.95rem;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-empty-state .bi {
+  margin-right: 0.35rem;
+}
+.faq-page .faq-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+.faq-page .faq-chip {
+  display: inline-flex;
+  gap: 0.45rem;
+  align-items: center;
+  padding: 0.45rem 0.85rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--bs-body-color);
+  text-decoration: none;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 50rem;
+  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-chip {
+    transition: none;
+  }
+}
+.faq-page .faq-chip:hover {
+  color: var(--bs-emphasis-color);
+  background: var(--bs-tertiary-bg);
+  transform: translateY(-1px);
+}
+.faq-page .faq-chip .bi {
+  font-size: 1rem;
+}
+.faq-page .faq-chip-count {
+  padding: 0 0.45rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border-radius: 50rem;
+}
+.faq-page .faq-chip-primary:hover {
+  color: var(--bs-primary-text-emphasis);
+  background: var(--bs-primary-bg-subtle);
+  border-color: var(--bs-primary-border-subtle);
+}
+.faq-page .faq-chip-primary:hover .faq-chip-count {
+  color: var(--bs-primary-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-info:hover {
+  color: var(--bs-info-text-emphasis);
+  background: var(--bs-info-bg-subtle);
+  border-color: var(--bs-info-border-subtle);
+}
+.faq-page .faq-chip-info:hover .faq-chip-count {
+  color: var(--bs-info-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-warning:hover {
+  color: var(--bs-warning-text-emphasis);
+  background: var(--bs-warning-bg-subtle);
+  border-color: var(--bs-warning-border-subtle);
+}
+.faq-page .faq-chip-warning:hover .faq-chip-count {
+  color: var(--bs-warning-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-success:hover {
+  color: var(--bs-success-text-emphasis);
+  background: var(--bs-success-bg-subtle);
+  border-color: var(--bs-success-border-subtle);
+}
+.faq-page .faq-chip-success:hover .faq-chip-count {
+  color: var(--bs-success-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-danger:hover {
+  color: var(--bs-danger-text-emphasis);
+  background: var(--bs-danger-bg-subtle);
+  border-color: var(--bs-danger-border-subtle);
+}
+.faq-page .faq-chip-danger:hover .faq-chip-count {
+  color: var(--bs-danger-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-secondary:hover {
+  color: var(--bs-secondary-text-emphasis);
+  background: var(--bs-secondary-bg-subtle);
+  border-color: var(--bs-secondary-border-subtle);
+}
+.faq-page .faq-chip-secondary:hover .faq-chip-count {
+  color: var(--bs-secondary-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-section {
+  margin-bottom: 2.5rem;
+  scroll-margin-top: 5rem;
+}
+.faq-page .faq-section-header {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1rem;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-left: 4px solid var(--bs-primary);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-section-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  font-size: 1.35rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-section-title {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--bs-emphasis-color);
+}
+.faq-page .faq-section-count {
+  margin: 0.1rem 0 0;
+  font-size: 0.8rem;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-section-primary {
+  border-left-color: var(--bs-primary);
+}
+.faq-page .faq-section-primary .faq-section-icon {
+  color: var(--bs-primary-text-emphasis);
+  background: var(--bs-primary-bg-subtle);
+}
+.faq-page .faq-section-info {
+  border-left-color: var(--bs-info);
+}
+.faq-page .faq-section-info .faq-section-icon {
+  color: var(--bs-info-text-emphasis);
+  background: var(--bs-info-bg-subtle);
+}
+.faq-page .faq-section-warning {
+  border-left-color: var(--bs-warning);
+}
+.faq-page .faq-section-warning .faq-section-icon {
+  color: var(--bs-warning-text-emphasis);
+  background: var(--bs-warning-bg-subtle);
+}
+.faq-page .faq-section-success {
+  border-left-color: var(--bs-success);
+}
+.faq-page .faq-section-success .faq-section-icon {
+  color: var(--bs-success-text-emphasis);
+  background: var(--bs-success-bg-subtle);
+}
+.faq-page .faq-section-danger {
+  border-left-color: var(--bs-danger);
+}
+.faq-page .faq-section-danger .faq-section-icon {
+  color: var(--bs-danger-text-emphasis);
+  background: var(--bs-danger-bg-subtle);
+}
+.faq-page .faq-section-secondary {
+  border-left-color: var(--bs-secondary);
+}
+.faq-page .faq-section-secondary .faq-section-icon {
+  color: var(--bs-secondary-text-emphasis);
+  background: var(--bs-secondary-bg-subtle);
+}
+.faq-page .faq-section-items .faq-item {
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.375rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-section-items .faq-item {
+    transition: none;
+  }
+}
+.faq-page .faq-section-items .faq-item:hover {
+  border-color: var(--bs-primary-border-subtle);
+  transform: translateX(2px);
+}
+.faq-page .faq-section-items .faq-item[open] {
+  border-color: var(--bs-primary-border-subtle);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transform: none;
+}
+.faq-page .faq-section-items .faq-item summary {
+  display: flex;
+  gap: 0.85rem;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--bs-emphasis-color);
+  list-style: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.faq-page .faq-section-items .faq-item summary::-webkit-details-marker {
+  display: none;
+}
+.faq-page .faq-section-items .faq-item summary::marker {
+  content: "";
+}
+.faq-page .faq-section-items .faq-item summary::after {
+  content: none;
+}
+.faq-page .faq-section-items .faq-item .faq-q-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: 0.85rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 50%;
+}
+.faq-page .faq-section-items .faq-item .faq-q-text {
+  flex-grow: 1;
+}
+.faq-page .faq-section-items .faq-item .faq-q-chevron {
+  flex-shrink: 0;
+  color: var(--bs-secondary-color);
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-section-items .faq-item .faq-q-chevron {
+    transition: none;
+  }
+}
+.faq-page .faq-section-items .faq-item[open] .faq-q-chevron {
+  color: var(--bs-primary);
+  transform: rotate(180deg);
+}
+.faq-page .faq-section-items .faq-item[open] summary {
+  color: var(--bs-primary);
+  border-bottom: 1px solid var(--bs-border-color);
+}
+.faq-page .faq-section-items .faq-item .faq-answer {
+  padding: 1.1rem 1.25rem 1.1rem 3.85rem;
+  font-size: 0.95rem;
+  line-height: 1.65;
+  color: var(--bs-body-color);
+}
+.faq-page .faq-section-items .faq-item .faq-answer p:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer ul:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer ol:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer pre:last-child {
+  margin-bottom: 0;
+}
+.faq-page .faq-section-items .faq-item .faq-answer a {
+  color: var(--bs-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.faq-page .faq-section-items .faq-item .faq-answer a:hover {
+  text-decoration-thickness: 2px;
+}
+.faq-page .faq-section-items .faq-item .faq-answer code {
+  padding: 0.12em 0.35em;
+  font-size: 0.875em;
+  color: var(--bs-emphasis-color);
+  background: var(--bs-tertiary-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.25rem;
+}
+.faq-page .faq-section-items .faq-item .faq-answer pre.astro-code,
+.faq-page .faq-section-items .faq-item .faq-answer pre {
+  padding: 0.85rem 1rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  overflow-x: auto;
+  font-size: 0.85rem;
+  line-height: 1.55;
+  border-radius: 0.25rem;
+}
+.faq-page .faq-section-items .faq-item .faq-answer pre.astro-code code,
+.faq-page .faq-section-items .faq-item .faq-answer pre code {
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.faq-page .faq-cta {
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  background: radial-gradient(ellipse at top, rgba(var(--bs-primary-rgb), 0.08), transparent 60%), var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+}
+.faq-page .faq-cta-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-bottom: 1rem;
+  font-size: 1.6rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 50%;
+}
+.faq-page .faq-cta h2, .faq-page .faq-cta .h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--bs-emphasis-color);
+}
+.faq-page .faq-cta p {
+  max-width: 32rem;
+  margin: 0 auto 1.5rem;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-cta-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
 .progress {
   border-radius: 1px;
 }
@@ -16344,4 +16800,460 @@ fieldset legend {
   background: rgba(255, 255, 255, 0.08);
 }
 
+.faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
+  max-width: 64rem;
+}
+@media (min-width: 1400px) {
+  .faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
+    max-width: 72rem;
+  }
+}
+.faq-page .faq-hero {
+  position: relative;
+  padding: 3rem 1.5rem 2.5rem;
+  margin-top: 1rem;
+  overflow: hidden;
+  background: radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), 0.12), transparent 60%), radial-gradient(ellipse at bottom right, rgba(var(--bs-info-rgb), 0.1), transparent 65%), var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+}
+.faq-page .faq-hero-eyebrow {
+  display: inline-flex;
+  gap: 0.4rem;
+  align-items: center;
+  padding: 0.35rem 0.85rem;
+  margin-bottom: 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--bs-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: var(--bs-primary-bg-subtle);
+  border: 1px solid var(--bs-primary-border-subtle);
+  border-radius: 50rem;
+}
+.faq-page .faq-hero-eyebrow .bi {
+  font-size: 0.9rem;
+}
+.faq-page .faq-hero-title {
+  margin: 0 0 0.5rem;
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.15;
+  color: var(--bs-emphasis-color);
+}
+@media (min-width: 768px) {
+  .faq-page .faq-hero-title {
+    font-size: 2.75rem;
+  }
+}
+.faq-page .faq-hero-lead {
+  max-width: 36rem;
+  margin: 0 auto 1.75rem;
+  font-size: 1.05rem;
+  line-height: 1.55;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-search {
+  position: relative;
+  max-width: 32rem;
+  margin: 0 auto;
+}
+.faq-page .faq-search .form-control {
+  height: 3rem;
+  padding-right: 3rem;
+  padding-left: 3rem;
+  font-size: 1rem;
+  background: var(--bs-body-bg);
+  border-radius: 50rem;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-search .form-control {
+    transition: none;
+  }
+}
+.faq-page .faq-search .form-control:focus {
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
+}
+.faq-page .faq-search-icon {
+  position: absolute;
+  top: 50%;
+  left: 1.2rem;
+  color: var(--bs-secondary-color);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+.faq-page .faq-search-clear {
+  position: absolute;
+  top: 50%;
+  right: 0.65rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border: 0;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-search-clear {
+    transition: none;
+  }
+}
+.faq-page .faq-search-clear:hover {
+  color: var(--bs-body-color);
+  background: var(--bs-secondary-bg);
+}
+.faq-page .faq-empty-state {
+  max-width: 32rem;
+  padding: 1rem;
+  margin: 1.5rem auto 0;
+  font-size: 0.95rem;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-empty-state .bi {
+  margin-right: 0.35rem;
+}
+.faq-page .faq-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+.faq-page .faq-chip {
+  display: inline-flex;
+  gap: 0.45rem;
+  align-items: center;
+  padding: 0.45rem 0.85rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--bs-body-color);
+  text-decoration: none;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 50rem;
+  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-chip {
+    transition: none;
+  }
+}
+.faq-page .faq-chip:hover {
+  color: var(--bs-emphasis-color);
+  background: var(--bs-tertiary-bg);
+  transform: translateY(-1px);
+}
+.faq-page .faq-chip .bi {
+  font-size: 1rem;
+}
+.faq-page .faq-chip-count {
+  padding: 0 0.45rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border-radius: 50rem;
+}
+.faq-page .faq-chip-primary:hover {
+  color: var(--bs-primary-text-emphasis);
+  background: var(--bs-primary-bg-subtle);
+  border-color: var(--bs-primary-border-subtle);
+}
+.faq-page .faq-chip-primary:hover .faq-chip-count {
+  color: var(--bs-primary-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-info:hover {
+  color: var(--bs-info-text-emphasis);
+  background: var(--bs-info-bg-subtle);
+  border-color: var(--bs-info-border-subtle);
+}
+.faq-page .faq-chip-info:hover .faq-chip-count {
+  color: var(--bs-info-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-warning:hover {
+  color: var(--bs-warning-text-emphasis);
+  background: var(--bs-warning-bg-subtle);
+  border-color: var(--bs-warning-border-subtle);
+}
+.faq-page .faq-chip-warning:hover .faq-chip-count {
+  color: var(--bs-warning-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-success:hover {
+  color: var(--bs-success-text-emphasis);
+  background: var(--bs-success-bg-subtle);
+  border-color: var(--bs-success-border-subtle);
+}
+.faq-page .faq-chip-success:hover .faq-chip-count {
+  color: var(--bs-success-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-danger:hover {
+  color: var(--bs-danger-text-emphasis);
+  background: var(--bs-danger-bg-subtle);
+  border-color: var(--bs-danger-border-subtle);
+}
+.faq-page .faq-chip-danger:hover .faq-chip-count {
+  color: var(--bs-danger-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-secondary:hover {
+  color: var(--bs-secondary-text-emphasis);
+  background: var(--bs-secondary-bg-subtle);
+  border-color: var(--bs-secondary-border-subtle);
+}
+.faq-page .faq-chip-secondary:hover .faq-chip-count {
+  color: var(--bs-secondary-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-section {
+  margin-bottom: 2.5rem;
+  scroll-margin-top: 5rem;
+}
+.faq-page .faq-section-header {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1rem;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-left: 4px solid var(--bs-primary);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-section-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  font-size: 1.35rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-section-title {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--bs-emphasis-color);
+}
+.faq-page .faq-section-count {
+  margin: 0.1rem 0 0;
+  font-size: 0.8rem;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-section-primary {
+  border-left-color: var(--bs-primary);
+}
+.faq-page .faq-section-primary .faq-section-icon {
+  color: var(--bs-primary-text-emphasis);
+  background: var(--bs-primary-bg-subtle);
+}
+.faq-page .faq-section-info {
+  border-left-color: var(--bs-info);
+}
+.faq-page .faq-section-info .faq-section-icon {
+  color: var(--bs-info-text-emphasis);
+  background: var(--bs-info-bg-subtle);
+}
+.faq-page .faq-section-warning {
+  border-left-color: var(--bs-warning);
+}
+.faq-page .faq-section-warning .faq-section-icon {
+  color: var(--bs-warning-text-emphasis);
+  background: var(--bs-warning-bg-subtle);
+}
+.faq-page .faq-section-success {
+  border-left-color: var(--bs-success);
+}
+.faq-page .faq-section-success .faq-section-icon {
+  color: var(--bs-success-text-emphasis);
+  background: var(--bs-success-bg-subtle);
+}
+.faq-page .faq-section-danger {
+  border-left-color: var(--bs-danger);
+}
+.faq-page .faq-section-danger .faq-section-icon {
+  color: var(--bs-danger-text-emphasis);
+  background: var(--bs-danger-bg-subtle);
+}
+.faq-page .faq-section-secondary {
+  border-left-color: var(--bs-secondary);
+}
+.faq-page .faq-section-secondary .faq-section-icon {
+  color: var(--bs-secondary-text-emphasis);
+  background: var(--bs-secondary-bg-subtle);
+}
+.faq-page .faq-section-items .faq-item {
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.375rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-section-items .faq-item {
+    transition: none;
+  }
+}
+.faq-page .faq-section-items .faq-item:hover {
+  border-color: var(--bs-primary-border-subtle);
+  transform: translateX(2px);
+}
+.faq-page .faq-section-items .faq-item[open] {
+  border-color: var(--bs-primary-border-subtle);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transform: none;
+}
+.faq-page .faq-section-items .faq-item summary {
+  display: flex;
+  gap: 0.85rem;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--bs-emphasis-color);
+  list-style: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.faq-page .faq-section-items .faq-item summary::-webkit-details-marker {
+  display: none;
+}
+.faq-page .faq-section-items .faq-item summary::marker {
+  content: "";
+}
+.faq-page .faq-section-items .faq-item summary::after {
+  content: none;
+}
+.faq-page .faq-section-items .faq-item .faq-q-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: 0.85rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 50%;
+}
+.faq-page .faq-section-items .faq-item .faq-q-text {
+  flex-grow: 1;
+}
+.faq-page .faq-section-items .faq-item .faq-q-chevron {
+  flex-shrink: 0;
+  color: var(--bs-secondary-color);
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-section-items .faq-item .faq-q-chevron {
+    transition: none;
+  }
+}
+.faq-page .faq-section-items .faq-item[open] .faq-q-chevron {
+  color: var(--bs-primary);
+  transform: rotate(180deg);
+}
+.faq-page .faq-section-items .faq-item[open] summary {
+  color: var(--bs-primary);
+  border-bottom: 1px solid var(--bs-border-color);
+}
+.faq-page .faq-section-items .faq-item .faq-answer {
+  padding: 1.1rem 1.25rem 1.1rem 3.85rem;
+  font-size: 0.95rem;
+  line-height: 1.65;
+  color: var(--bs-body-color);
+}
+.faq-page .faq-section-items .faq-item .faq-answer p:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer ul:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer ol:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer pre:last-child {
+  margin-bottom: 0;
+}
+.faq-page .faq-section-items .faq-item .faq-answer a {
+  color: var(--bs-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.faq-page .faq-section-items .faq-item .faq-answer a:hover {
+  text-decoration-thickness: 2px;
+}
+.faq-page .faq-section-items .faq-item .faq-answer code {
+  padding: 0.12em 0.35em;
+  font-size: 0.875em;
+  color: var(--bs-emphasis-color);
+  background: var(--bs-tertiary-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.25rem;
+}
+.faq-page .faq-section-items .faq-item .faq-answer pre.astro-code,
+.faq-page .faq-section-items .faq-item .faq-answer pre {
+  padding: 0.85rem 1rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  overflow-x: auto;
+  font-size: 0.85rem;
+  line-height: 1.55;
+  border-radius: 0.25rem;
+}
+.faq-page .faq-section-items .faq-item .faq-answer pre.astro-code code,
+.faq-page .faq-section-items .faq-item .faq-answer pre code {
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.faq-page .faq-cta {
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  background: radial-gradient(ellipse at top, rgba(var(--bs-primary-rgb), 0.08), transparent 60%), var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+}
+.faq-page .faq-cta-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-bottom: 1rem;
+  font-size: 1.6rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 50%;
+}
+.faq-page .faq-cta h2, .faq-page .faq-cta .h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--bs-emphasis-color);
+}
+.faq-page .faq-cta p {
+  max-width: 32rem;
+  margin: 0 auto 1.5rem;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-cta-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
 /*# sourceMappingURL=adminlte.css.map */

src/html/public/css/adminlte.rtl.css

@@ -14537,6 +14537,462 @@ body:not(.app-loaded) .app-footer {
   background: rgba(255, 255, 255, 0.08);
 }
 
+.faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
+  max-width: 64rem;
+}
+@media (min-width: 1400px) {
+  .faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
+    max-width: 72rem;
+  }
+}
+.faq-page .faq-hero {
+  position: relative;
+  padding: 3rem 1.5rem 2.5rem;
+  margin-top: 1rem;
+  overflow: hidden;
+  background: radial-gradient(ellipse at top right, rgba(var(--bs-primary-rgb), 0.12), transparent 60%), radial-gradient(ellipse at bottom left, rgba(var(--bs-info-rgb), 0.1), transparent 65%), var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+}
+.faq-page .faq-hero-eyebrow {
+  display: inline-flex;
+  gap: 0.4rem;
+  align-items: center;
+  padding: 0.35rem 0.85rem;
+  margin-bottom: 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--bs-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: var(--bs-primary-bg-subtle);
+  border: 1px solid var(--bs-primary-border-subtle);
+  border-radius: 50rem;
+}
+.faq-page .faq-hero-eyebrow .bi {
+  font-size: 0.9rem;
+}
+.faq-page .faq-hero-title {
+  margin: 0 0 0.5rem;
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.15;
+  color: var(--bs-emphasis-color);
+}
+@media (min-width: 768px) {
+  .faq-page .faq-hero-title {
+    font-size: 2.75rem;
+  }
+}
+.faq-page .faq-hero-lead {
+  max-width: 36rem;
+  margin: 0 auto 1.75rem;
+  font-size: 1.05rem;
+  line-height: 1.55;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-search {
+  position: relative;
+  max-width: 32rem;
+  margin: 0 auto;
+}
+.faq-page .faq-search .form-control {
+  height: 3rem;
+  padding-left: 3rem;
+  padding-right: 3rem;
+  font-size: 1rem;
+  background: var(--bs-body-bg);
+  border-radius: 50rem;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-search .form-control {
+    transition: none;
+  }
+}
+.faq-page .faq-search .form-control:focus {
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
+}
+.faq-page .faq-search-icon {
+  position: absolute;
+  top: 50%;
+  right: 1.2rem;
+  color: var(--bs-secondary-color);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+.faq-page .faq-search-clear {
+  position: absolute;
+  top: 50%;
+  left: 0.65rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border: 0;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-search-clear {
+    transition: none;
+  }
+}
+.faq-page .faq-search-clear:hover {
+  color: var(--bs-body-color);
+  background: var(--bs-secondary-bg);
+}
+.faq-page .faq-empty-state {
+  max-width: 32rem;
+  padding: 1rem;
+  margin: 1.5rem auto 0;
+  font-size: 0.95rem;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-empty-state .bi {
+  margin-left: 0.35rem;
+}
+.faq-page .faq-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+.faq-page .faq-chip {
+  display: inline-flex;
+  gap: 0.45rem;
+  align-items: center;
+  padding: 0.45rem 0.85rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--bs-body-color);
+  text-decoration: none;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 50rem;
+  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-chip {
+    transition: none;
+  }
+}
+.faq-page .faq-chip:hover {
+  color: var(--bs-emphasis-color);
+  background: var(--bs-tertiary-bg);
+  transform: translateY(-1px);
+}
+.faq-page .faq-chip .bi {
+  font-size: 1rem;
+}
+.faq-page .faq-chip-count {
+  padding: 0 0.45rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border-radius: 50rem;
+}
+.faq-page .faq-chip-primary:hover {
+  color: var(--bs-primary-text-emphasis);
+  background: var(--bs-primary-bg-subtle);
+  border-color: var(--bs-primary-border-subtle);
+}
+.faq-page .faq-chip-primary:hover .faq-chip-count {
+  color: var(--bs-primary-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-info:hover {
+  color: var(--bs-info-text-emphasis);
+  background: var(--bs-info-bg-subtle);
+  border-color: var(--bs-info-border-subtle);
+}
+.faq-page .faq-chip-info:hover .faq-chip-count {
+  color: var(--bs-info-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-warning:hover {
+  color: var(--bs-warning-text-emphasis);
+  background: var(--bs-warning-bg-subtle);
+  border-color: var(--bs-warning-border-subtle);
+}
+.faq-page .faq-chip-warning:hover .faq-chip-count {
+  color: var(--bs-warning-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-success:hover {
+  color: var(--bs-success-text-emphasis);
+  background: var(--bs-success-bg-subtle);
+  border-color: var(--bs-success-border-subtle);
+}
+.faq-page .faq-chip-success:hover .faq-chip-count {
+  color: var(--bs-success-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-danger:hover {
+  color: var(--bs-danger-text-emphasis);
+  background: var(--bs-danger-bg-subtle);
+  border-color: var(--bs-danger-border-subtle);
+}
+.faq-page .faq-chip-danger:hover .faq-chip-count {
+  color: var(--bs-danger-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-secondary:hover {
+  color: var(--bs-secondary-text-emphasis);
+  background: var(--bs-secondary-bg-subtle);
+  border-color: var(--bs-secondary-border-subtle);
+}
+.faq-page .faq-chip-secondary:hover .faq-chip-count {
+  color: var(--bs-secondary-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-section {
+  margin-bottom: 2.5rem;
+  scroll-margin-top: 5rem;
+}
+.faq-page .faq-section-header {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1rem;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-right: 4px solid var(--bs-primary);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-section-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  font-size: 1.35rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-section-title {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--bs-emphasis-color);
+}
+.faq-page .faq-section-count {
+  margin: 0.1rem 0 0;
+  font-size: 0.8rem;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-section-primary {
+  border-right-color: var(--bs-primary);
+}
+.faq-page .faq-section-primary .faq-section-icon {
+  color: var(--bs-primary-text-emphasis);
+  background: var(--bs-primary-bg-subtle);
+}
+.faq-page .faq-section-info {
+  border-right-color: var(--bs-info);
+}
+.faq-page .faq-section-info .faq-section-icon {
+  color: var(--bs-info-text-emphasis);
+  background: var(--bs-info-bg-subtle);
+}
+.faq-page .faq-section-warning {
+  border-right-color: var(--bs-warning);
+}
+.faq-page .faq-section-warning .faq-section-icon {
+  color: var(--bs-warning-text-emphasis);
+  background: var(--bs-warning-bg-subtle);
+}
+.faq-page .faq-section-success {
+  border-right-color: var(--bs-success);
+}
+.faq-page .faq-section-success .faq-section-icon {
+  color: var(--bs-success-text-emphasis);
+  background: var(--bs-success-bg-subtle);
+}
+.faq-page .faq-section-danger {
+  border-right-color: var(--bs-danger);
+}
+.faq-page .faq-section-danger .faq-section-icon {
+  color: var(--bs-danger-text-emphasis);
+  background: var(--bs-danger-bg-subtle);
+}
+.faq-page .faq-section-secondary {
+  border-right-color: var(--bs-secondary);
+}
+.faq-page .faq-section-secondary .faq-section-icon {
+  color: var(--bs-secondary-text-emphasis);
+  background: var(--bs-secondary-bg-subtle);
+}
+.faq-page .faq-section-items .faq-item {
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.375rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-section-items .faq-item {
+    transition: none;
+  }
+}
+.faq-page .faq-section-items .faq-item:hover {
+  border-color: var(--bs-primary-border-subtle);
+  transform: translateX(-2px);
+}
+.faq-page .faq-section-items .faq-item[open] {
+  border-color: var(--bs-primary-border-subtle);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transform: none;
+}
+.faq-page .faq-section-items .faq-item summary {
+  display: flex;
+  gap: 0.85rem;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--bs-emphasis-color);
+  list-style: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.faq-page .faq-section-items .faq-item summary::-webkit-details-marker {
+  display: none;
+}
+.faq-page .faq-section-items .faq-item summary::marker {
+  content: "";
+}
+.faq-page .faq-section-items .faq-item summary::after {
+  content: none;
+}
+.faq-page .faq-section-items .faq-item .faq-q-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: 0.85rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 50%;
+}
+.faq-page .faq-section-items .faq-item .faq-q-text {
+  flex-grow: 1;
+}
+.faq-page .faq-section-items .faq-item .faq-q-chevron {
+  flex-shrink: 0;
+  color: var(--bs-secondary-color);
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-section-items .faq-item .faq-q-chevron {
+    transition: none;
+  }
+}
+.faq-page .faq-section-items .faq-item[open] .faq-q-chevron {
+  color: var(--bs-primary);
+  transform: rotate(-180deg);
+}
+.faq-page .faq-section-items .faq-item[open] summary {
+  color: var(--bs-primary);
+  border-bottom: 1px solid var(--bs-border-color);
+}
+.faq-page .faq-section-items .faq-item .faq-answer {
+  padding: 1.1rem 3.85rem 1.1rem 1.25rem;
+  font-size: 0.95rem;
+  line-height: 1.65;
+  color: var(--bs-body-color);
+}
+.faq-page .faq-section-items .faq-item .faq-answer p:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer ul:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer ol:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer pre:last-child {
+  margin-bottom: 0;
+}
+.faq-page .faq-section-items .faq-item .faq-answer a {
+  color: var(--bs-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.faq-page .faq-section-items .faq-item .faq-answer a:hover {
+  text-decoration-thickness: 2px;
+}
+.faq-page .faq-section-items .faq-item .faq-answer code {
+  padding: 0.12em 0.35em;
+  font-size: 0.875em;
+  color: var(--bs-emphasis-color);
+  background: var(--bs-tertiary-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.25rem;
+}
+.faq-page .faq-section-items .faq-item .faq-answer pre.astro-code,
+.faq-page .faq-section-items .faq-item .faq-answer pre {
+  padding: 0.85rem 1rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  overflow-x: auto;
+  font-size: 0.85rem;
+  line-height: 1.55;
+  border-radius: 0.25rem;
+}
+.faq-page .faq-section-items .faq-item .faq-answer pre.astro-code code,
+.faq-page .faq-section-items .faq-item .faq-answer pre code {
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.faq-page .faq-cta {
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  background: radial-gradient(ellipse at top, rgba(var(--bs-primary-rgb), 0.08), transparent 60%), var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+}
+.faq-page .faq-cta-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-bottom: 1rem;
+  font-size: 1.6rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 50%;
+}
+.faq-page .faq-cta h2, .faq-page .faq-cta .h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--bs-emphasis-color);
+}
+.faq-page .faq-cta p {
+  max-width: 32rem;
+  margin: 0 auto 1.5rem;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-cta-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
 .progress {
   border-radius: 1px;
 }
@@ -16317,4 +16773,460 @@ fieldset legend {
 .docs-page[data-bs-theme=dark] .card > .card-body blockquote code, [data-bs-theme=dark] .docs-page .card > .card-body blockquote code {
   background: rgba(255, 255, 255, 0.08);
 }
+
+.faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
+  max-width: 64rem;
+}
+@media (min-width: 1400px) {
+  .faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
+    max-width: 72rem;
+  }
+}
+.faq-page .faq-hero {
+  position: relative;
+  padding: 3rem 1.5rem 2.5rem;
+  margin-top: 1rem;
+  overflow: hidden;
+  background: radial-gradient(ellipse at top right, rgba(var(--bs-primary-rgb), 0.12), transparent 60%), radial-gradient(ellipse at bottom left, rgba(var(--bs-info-rgb), 0.1), transparent 65%), var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+}
+.faq-page .faq-hero-eyebrow {
+  display: inline-flex;
+  gap: 0.4rem;
+  align-items: center;
+  padding: 0.35rem 0.85rem;
+  margin-bottom: 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--bs-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: var(--bs-primary-bg-subtle);
+  border: 1px solid var(--bs-primary-border-subtle);
+  border-radius: 50rem;
+}
+.faq-page .faq-hero-eyebrow .bi {
+  font-size: 0.9rem;
+}
+.faq-page .faq-hero-title {
+  margin: 0 0 0.5rem;
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.15;
+  color: var(--bs-emphasis-color);
+}
+@media (min-width: 768px) {
+  .faq-page .faq-hero-title {
+    font-size: 2.75rem;
+  }
+}
+.faq-page .faq-hero-lead {
+  max-width: 36rem;
+  margin: 0 auto 1.75rem;
+  font-size: 1.05rem;
+  line-height: 1.55;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-search {
+  position: relative;
+  max-width: 32rem;
+  margin: 0 auto;
+}
+.faq-page .faq-search .form-control {
+  height: 3rem;
+  padding-left: 3rem;
+  padding-right: 3rem;
+  font-size: 1rem;
+  background: var(--bs-body-bg);
+  border-radius: 50rem;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-search .form-control {
+    transition: none;
+  }
+}
+.faq-page .faq-search .form-control:focus {
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
+}
+.faq-page .faq-search-icon {
+  position: absolute;
+  top: 50%;
+  right: 1.2rem;
+  color: var(--bs-secondary-color);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+.faq-page .faq-search-clear {
+  position: absolute;
+  top: 50%;
+  left: 0.65rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border: 0;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-search-clear {
+    transition: none;
+  }
+}
+.faq-page .faq-search-clear:hover {
+  color: var(--bs-body-color);
+  background: var(--bs-secondary-bg);
+}
+.faq-page .faq-empty-state {
+  max-width: 32rem;
+  padding: 1rem;
+  margin: 1.5rem auto 0;
+  font-size: 0.95rem;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-empty-state .bi {
+  margin-left: 0.35rem;
+}
+.faq-page .faq-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+.faq-page .faq-chip {
+  display: inline-flex;
+  gap: 0.45rem;
+  align-items: center;
+  padding: 0.45rem 0.85rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--bs-body-color);
+  text-decoration: none;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 50rem;
+  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-chip {
+    transition: none;
+  }
+}
+.faq-page .faq-chip:hover {
+  color: var(--bs-emphasis-color);
+  background: var(--bs-tertiary-bg);
+  transform: translateY(-1px);
+}
+.faq-page .faq-chip .bi {
+  font-size: 1rem;
+}
+.faq-page .faq-chip-count {
+  padding: 0 0.45rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--bs-secondary-color);
+  background: var(--bs-tertiary-bg);
+  border-radius: 50rem;
+}
+.faq-page .faq-chip-primary:hover {
+  color: var(--bs-primary-text-emphasis);
+  background: var(--bs-primary-bg-subtle);
+  border-color: var(--bs-primary-border-subtle);
+}
+.faq-page .faq-chip-primary:hover .faq-chip-count {
+  color: var(--bs-primary-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-info:hover {
+  color: var(--bs-info-text-emphasis);
+  background: var(--bs-info-bg-subtle);
+  border-color: var(--bs-info-border-subtle);
+}
+.faq-page .faq-chip-info:hover .faq-chip-count {
+  color: var(--bs-info-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-warning:hover {
+  color: var(--bs-warning-text-emphasis);
+  background: var(--bs-warning-bg-subtle);
+  border-color: var(--bs-warning-border-subtle);
+}
+.faq-page .faq-chip-warning:hover .faq-chip-count {
+  color: var(--bs-warning-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-success:hover {
+  color: var(--bs-success-text-emphasis);
+  background: var(--bs-success-bg-subtle);
+  border-color: var(--bs-success-border-subtle);
+}
+.faq-page .faq-chip-success:hover .faq-chip-count {
+  color: var(--bs-success-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-danger:hover {
+  color: var(--bs-danger-text-emphasis);
+  background: var(--bs-danger-bg-subtle);
+  border-color: var(--bs-danger-border-subtle);
+}
+.faq-page .faq-chip-danger:hover .faq-chip-count {
+  color: var(--bs-danger-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-chip-secondary:hover {
+  color: var(--bs-secondary-text-emphasis);
+  background: var(--bs-secondary-bg-subtle);
+  border-color: var(--bs-secondary-border-subtle);
+}
+.faq-page .faq-chip-secondary:hover .faq-chip-count {
+  color: var(--bs-secondary-text-emphasis);
+  background: rgba(0, 0, 0, 0.06);
+}
+.faq-page .faq-section {
+  margin-bottom: 2.5rem;
+  scroll-margin-top: 5rem;
+}
+.faq-page .faq-section-header {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1rem;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-right: 4px solid var(--bs-primary);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-section-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  font-size: 1.35rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 0.375rem;
+}
+.faq-page .faq-section-title {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--bs-emphasis-color);
+}
+.faq-page .faq-section-count {
+  margin: 0.1rem 0 0;
+  font-size: 0.8rem;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-section-primary {
+  border-right-color: var(--bs-primary);
+}
+.faq-page .faq-section-primary .faq-section-icon {
+  color: var(--bs-primary-text-emphasis);
+  background: var(--bs-primary-bg-subtle);
+}
+.faq-page .faq-section-info {
+  border-right-color: var(--bs-info);
+}
+.faq-page .faq-section-info .faq-section-icon {
+  color: var(--bs-info-text-emphasis);
+  background: var(--bs-info-bg-subtle);
+}
+.faq-page .faq-section-warning {
+  border-right-color: var(--bs-warning);
+}
+.faq-page .faq-section-warning .faq-section-icon {
+  color: var(--bs-warning-text-emphasis);
+  background: var(--bs-warning-bg-subtle);
+}
+.faq-page .faq-section-success {
+  border-right-color: var(--bs-success);
+}
+.faq-page .faq-section-success .faq-section-icon {
+  color: var(--bs-success-text-emphasis);
+  background: var(--bs-success-bg-subtle);
+}
+.faq-page .faq-section-danger {
+  border-right-color: var(--bs-danger);
+}
+.faq-page .faq-section-danger .faq-section-icon {
+  color: var(--bs-danger-text-emphasis);
+  background: var(--bs-danger-bg-subtle);
+}
+.faq-page .faq-section-secondary {
+  border-right-color: var(--bs-secondary);
+}
+.faq-page .faq-section-secondary .faq-section-icon {
+  color: var(--bs-secondary-text-emphasis);
+  background: var(--bs-secondary-bg-subtle);
+}
+.faq-page .faq-section-items .faq-item {
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.375rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-section-items .faq-item {
+    transition: none;
+  }
+}
+.faq-page .faq-section-items .faq-item:hover {
+  border-color: var(--bs-primary-border-subtle);
+  transform: translateX(-2px);
+}
+.faq-page .faq-section-items .faq-item[open] {
+  border-color: var(--bs-primary-border-subtle);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transform: none;
+}
+.faq-page .faq-section-items .faq-item summary {
+  display: flex;
+  gap: 0.85rem;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--bs-emphasis-color);
+  list-style: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.faq-page .faq-section-items .faq-item summary::-webkit-details-marker {
+  display: none;
+}
+.faq-page .faq-section-items .faq-item summary::marker {
+  content: "";
+}
+.faq-page .faq-section-items .faq-item summary::after {
+  content: none;
+}
+.faq-page .faq-section-items .faq-item .faq-q-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: 0.85rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 50%;
+}
+.faq-page .faq-section-items .faq-item .faq-q-text {
+  flex-grow: 1;
+}
+.faq-page .faq-section-items .faq-item .faq-q-chevron {
+  flex-shrink: 0;
+  color: var(--bs-secondary-color);
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .faq-page .faq-section-items .faq-item .faq-q-chevron {
+    transition: none;
+  }
+}
+.faq-page .faq-section-items .faq-item[open] .faq-q-chevron {
+  color: var(--bs-primary);
+  transform: rotate(-180deg);
+}
+.faq-page .faq-section-items .faq-item[open] summary {
+  color: var(--bs-primary);
+  border-bottom: 1px solid var(--bs-border-color);
+}
+.faq-page .faq-section-items .faq-item .faq-answer {
+  padding: 1.1rem 3.85rem 1.1rem 1.25rem;
+  font-size: 0.95rem;
+  line-height: 1.65;
+  color: var(--bs-body-color);
+}
+.faq-page .faq-section-items .faq-item .faq-answer p:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer ul:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer ol:last-child,
+.faq-page .faq-section-items .faq-item .faq-answer pre:last-child {
+  margin-bottom: 0;
+}
+.faq-page .faq-section-items .faq-item .faq-answer a {
+  color: var(--bs-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.faq-page .faq-section-items .faq-item .faq-answer a:hover {
+  text-decoration-thickness: 2px;
+}
+.faq-page .faq-section-items .faq-item .faq-answer code {
+  padding: 0.12em 0.35em;
+  font-size: 0.875em;
+  color: var(--bs-emphasis-color);
+  background: var(--bs-tertiary-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.25rem;
+}
+.faq-page .faq-section-items .faq-item .faq-answer pre.astro-code,
+.faq-page .faq-section-items .faq-item .faq-answer pre {
+  padding: 0.85rem 1rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  overflow-x: auto;
+  font-size: 0.85rem;
+  line-height: 1.55;
+  border-radius: 0.25rem;
+}
+.faq-page .faq-section-items .faq-item .faq-answer pre.astro-code code,
+.faq-page .faq-section-items .faq-item .faq-answer pre code {
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.faq-page .faq-cta {
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  background: radial-gradient(ellipse at top, rgba(var(--bs-primary-rgb), 0.08), transparent 60%), var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+}
+.faq-page .faq-cta-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-bottom: 1rem;
+  font-size: 1.6rem;
+  color: var(--bs-primary);
+  background: var(--bs-primary-bg-subtle);
+  border-radius: 50%;
+}
+.faq-page .faq-cta h2, .faq-page .faq-cta .h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--bs-emphasis-color);
+}
+.faq-page .faq-cta p {
+  max-width: 32rem;
+  margin: 0 auto 1.5rem;
+  color: var(--bs-secondary-color);
+}
+.faq-page .faq-cta-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
 /*# sourceMappingURL=adminlte.rtl.css.map */