/* =====================================================================
   Frontend CSS — Wildex Visual Style on Tabler Base
   ===================================================================== */

/* Reserve the scrollbar gutter so Bootstrap modals don't cause a
   horizontal jump when they lock body scrolling on open.
   Also neutralize Bootstrap's compensating padding-right since the
   gutter already keeps the layout stable. */
html { scrollbar-gutter: stable; }
body.modal-open { padding-right: 0 !important; }

/* ---- Tokens ---- */
:root {
  --fe-primary:   #000000;
  --fe-accent:    #CBCA7B;
  --fe-accent-dark: #8a8936;
  /* Semantic colour for text links / inline actions on light backgrounds —
     darker than --fe-accent-dark for legible contrast (WCAG AA on --fe-bg). */
  --fe-link:        #8B8A3D;
  --fe-text:      #555555;
  --fe-muted:     #999999;
  --fe-bg:        #f2f2ef;
  --fe-bg-dark:   #0d0d0d;
  --fe-bg-subtle: #f5f5f5;
  --fe-border:    #e0e0e0;

  --tblr-font-sans-serif: 'Manrope', system-ui, sans-serif;
  --tblr-body-color:      #333;
  --tblr-body-bg:         #f2f2ef;
  --tblr-border-radius:   0;
  --tblr-body-font-weight: 500;
  /* Navbar-overlap braucht diese Variable um den negativen Margin zu setzen */
  --tblr-navbar-height:   92px;

  /* ---- Tone palette (related to olive accent) ---- */
  /* Each tone exposes a HEX, an RGB triple (for rgba()) and a "dark" hex
     for legible foreground text on light backgrounds. Use the helper
     classes `.fe-tone-{name}-bg`, `.fe-tone-{name}-soft`, `.fe-tone-{name}-text`
     and `.fe-tone-{name}-border` or address the variables directly. */
  --fe-tone-mustard:        #d4a843;   /* warm gold */
  --fe-tone-mustard-rgb:    212,168,67;
  --fe-tone-mustard-dark:   #9a7820;
  --fe-tone-sage:           #8fa875;   /* sage green */
  --fe-tone-sage-rgb:       143,168,117;
  --fe-tone-sage-dark:      #5d7a48;
  --fe-tone-earth:          #b8956a;   /* warm earth gold */
  --fe-tone-earth-rgb:      184,149,106;
  --fe-tone-earth-dark:     #7d6037;
  --fe-tone-olive:          #7a8c3d;   /* deeper olive green */
  --fe-tone-olive-rgb:      122,140,61;
  --fe-tone-olive-dark:     #536127;
  --fe-tone-champagne:      #d6cf9a;   /* light champagne */
  --fe-tone-champagne-rgb:  214,207,154;
  --fe-tone-champagne-dark: #766f3a;
  --fe-tone-copper:         #c08552;   /* warm copper / terracotta */
  --fe-tone-copper-rgb:     192,133,82;
  --fe-tone-copper-dark:    #8a4f25;
}

/* ---- Dark Mode ---- */
[data-theme="dark"] {
  --fe-primary:    #ffffff;
  --fe-text:       rgba(255,255,255,0.75);
  --fe-muted:      rgba(255,255,255,0.4);
  --fe-bg:         #111318;
  --fe-bg-subtle:  #1c1f26;
  --fe-border:     rgba(255,255,255,0.1);
  --tblr-body-color: rgba(255,255,255,0.75);
  --tblr-body-bg:    #111318;
  /* In dark mode, keep the bright accent for text links (it's legible on dark). */
  --fe-accent-dark:  var(--fe-accent);
  --fe-link:         var(--fe-accent);
}
[data-theme="dark"] body.fe-page { background: var(--fe-bg); color: var(--fe-text); }
[data-theme="dark"] .fe-section { background: var(--fe-bg); }
[data-theme="dark"] .fe-section-alt { background: var(--fe-bg-subtle); }
[data-theme="dark"] .fe-section-title { color: #fff; }
[data-theme="dark"] .fe-section-text { color: var(--fe-text); }
[data-theme="dark"] .fe-eyebrow { color: var(--fe-accent); }
[data-theme="dark"] .fe-service-card,
[data-theme="dark"] .fe-section-dark .fe-service-card { background: #1e2128; border: none; }
[data-theme="dark"] .fe-service-card h3 { color: #fff; }
[data-theme="dark"] .fe-service-card p { color: var(--fe-text); }
[data-theme="dark"] .fe-service-body { background: #1e2128; }
[data-theme="dark"] .fe-check-list li { color: var(--fe-text); }
[data-theme="dark"] .fe-about-images .fe-about-img-secondary { border-color: #1e2128; }
[data-theme="dark"] .fe-section-ink .fe-about-img-secondary { border-color: #111318; }
[data-theme="dark"] .fe-adventure-text { background: #1e2128; border: 1px solid rgba(255,255,255,0.08); }
[data-theme="dark"] .fe-adventure-text h3 { color: #fff; }
[data-theme="dark"] p, [data-theme="dark"] li { color: var(--fe-text); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: #fff; }
[data-theme="dark"] .fe-header.fe-header--scrolled { background: #0d0f14 !important; }
[data-theme="dark"] .fe-header:has(.navbar-collapse.show),
[data-theme="dark"] .fe-header:has(.navbar-collapse.collapsing) { background: #0d0f14 !important; }

/* Theme toggle slider */
.fe-switch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}
.fe-switch input { display: none; }
.fe-switch-track {
  position: relative;
  width: 38px;
  height: 22px;
  background: rgba(255,255,255,0.18);
  border-radius: 22px;
  flex-shrink: 0;
  transition: background 0.25s;
}
.fe-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transition: transform 0.25s, background 0.25s;
}
.fe-switch input:checked ~ .fe-switch-track {
  background: var(--fe-accent);
}
.fe-switch input:checked ~ .fe-switch-track::after {
  transform: translateX(16px);
  background: #fff;
}
.fe-switch-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 575px) {
  .container, .container-fluid {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* ---- Base ---- */
body.fe-page {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  background: var(--fe-bg);
  color: var(--fe-text);
}
body.fe-page p {
  font-size: 1rem;
}

body.fe-page a,
body.fe-page a:hover,
body.fe-page a:focus {
  text-decoration: none !important;
  color: var(--fe-link);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bricolage Grotesque', serif;
  color: var(--fe-primary);
  letter-spacing: -0.02em;
}

/* ---- Navbar ---- */
.fe-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(203, 202, 123, 0.3) !important;
  box-shadow: none !important;
  padding: 0.6rem 0;
  z-index: 100;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  --tblr-navbar-color: #fff;
}

/* Navbar scrolls off with the page (not sticky) — don't apply a solid
   dark background or shadow on scroll, otherwise it flashes black just
   before leaving the viewport. */

/* navbar-overlap::after würde die Hintergrundfarbe 9rem nach unten ziehen —
   für unser Bild-Hero wollen wir das nicht */
.fe-header.navbar-overlap::after {
  display: none;
}

/* White hamburger icon */
.fe-header .navbar-toggler {
  border-color: rgba(255,255,255,0.4);
  --tblr-navbar-toggler-icon-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.fe-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* Mobile: navbar solid black when menu is open or animating */
@media (max-width: 991px) {
  .fe-header:has(.navbar-collapse.show),
  .fe-header:has(.navbar-collapse.collapsing) {
    background: var(--fe-primary) !important;
    transition: none !important;
  }
}

/* Mobile: solid dark background when menu is expanded */
@media (max-width: 991px) {
  .fe-header .navbar-collapse.show,
  .fe-header .navbar-collapse.collapsing {
    background: rgba(0,0,0,0.96);
    padding: 0.5rem 1.5rem 1.25rem;
    margin-top: 0.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.1);
  }
  .fe-header .navbar-collapse .nav-item {
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .fe-header .navbar-collapse .nav-item:last-child {
    border-bottom: none;
    margin-bottom: 0.75rem;
  }
  .fe-header .navbar-collapse .nav-link {
    padding: 0.85rem 0 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
  }
  .fe-header .navbar-collapse .d-flex {
    padding-top: 0.5rem;
  }
}

/* Hero / Auth direkt hinter Navbar hochziehen (Tabler-Version ohne navbar-overlap+* Regel) */
.fe-header + .fe-hero,
.fe-header + .fe-auth-section {
  margin-top: calc(-1 * var(--tblr-navbar-height));
}

.fe-header .nav-link {
  color: rgba(255,255,255,0.92) !important;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.45rem 1rem !important;
  transition: color 0.2s;
}

.fe-header .nav-link:hover,
.fe-header .nav-link.active {
  color: var(--fe-accent) !important;
}

/* ---- Buttons ---- */
.fe-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  border-radius: 999px;
  padding: 0.6rem 1.6rem;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.fe-btn:hover, .fe-btn:focus { text-decoration: none !important; }

/* icon is first child (left) → reduce left padding */
.fe-btn:has(i:first-child) { padding-left: 0.5rem; }
/* icon is last child (right) → reduce right padding */
/* also covers icon-only (which is both first and last) */
.fe-btn:has(i:last-child)  { padding-right: 0.5rem; }

.fe-btn:hover { transform: translateY(-2px); }
.fe-btn:active { transform: translateY(0); }

.fe-btn i { transition: transform 0.25s ease, background-color 0.25s ease; }
.fe-btn:hover i { transform: scale(1.12); background: rgba(0,0,0,0.1); }
.fe-btn-outline:hover i { background: rgba(0,0,0,0.04); }
.fe-btn-spin:hover i { transform: rotate(45deg); }

.fe-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  font-size: 1.2em;
  flex-shrink: 0;
}

.fe-btn-outline i {
  background: rgba(0,0,0,0.08);
}
.fe-btn-outline-light i {
  background: rgba(255,255,255,0.2);
}
.fe-btn-sm i {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-size: 1em;
}

.fe-btn-accent {
  background: var(--fe-accent);
  border-color: var(--fe-accent);
  color: #000 !important;
}
.fe-btn-accent:hover {
  background: #dedd97;
  border-color: #dedd97;
  color: #000 !important;
}

.fe-btn-outline {
  background: rgba(203, 202, 123, 0.08);
  border-color: var(--fe-accent);
  color: #5a5900 !important;
}
.fe-btn-outline:hover {
  background: #dedd97;
  border-color: #dedd97;
  color: #000 !important;
}

.fe-btn-outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color: #fff !important;
}
.fe-btn-outline-light:hover {
  background: #fff;
  color: #000 !important;
}

.fe-btn-sm {
  padding: 0.5rem 1.2rem;
}

.fe-btn-block {
  width: 100%;
  justify-content: center;
}

/* ---- Eyebrow / section label ---- */
.fe-eyebrow {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fe-link);
  margin-bottom: 0.6rem;
}

.fe-section-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fe-primary);
  margin-bottom: 1rem;
}

.fe-section-text {
  color: var(--fe-text);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* ---- Sections ---- */
.fe-section {
  padding: 3.5rem 0;
}

.fe-section-dark {
  background: var(--fe-bg-subtle);
}

/* Truly dark section (navy) */
.fe-section-ink {
  background: #111318;
}
.fe-section-ink .fe-eyebrow { color: var(--fe-accent); }
.fe-section-ink .fe-section-title,
.fe-section-ink h2, .fe-section-ink h3 { color: #fff; }
.fe-section-ink .fe-section-text,
.fe-section-ink p, .fe-section-ink li { color: rgba(255,255,255,0.7); }
.fe-section-ink .fe-check-list li::before {
  background: var(--fe-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/16px no-repeat;
}
.fe-section-ink .fe-check-list li { color: rgba(255,255,255,0.75); }

.fe-section-alt {
  background: #f8f8f4;
}

/* ---- Hero ---- */
.fe-hero {
  position: relative;
  min-height: 100vh;
  background: url('/img/hero04.jpg') center center / cover no-repeat;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fe-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.10) 30%,
    rgba(0,0,0,0.45) 65%,
    rgba(0,0,0,0.75) 100%
  );
  z-index: 1;
}

/* Hero grid layout */
.fe-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  color: #fff;
}

.fe-hero-main {
  flex: 1;
  padding: 2rem 0 3rem;
}
@media (max-width: 991.98px) {
  .fe-hero-main { padding: 9rem 0 3rem; }
}

.fe-hero-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 700;
  line-height: 1.02;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 1.2rem;
}

.fe-hero-subtitle {
  color: rgba(255,255,255,0.7);
  font-size: 1.05rem;
  max-width: 560px;
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: 2rem;
}

.fe-hero-badge {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 1rem;
  color: #fff;
  padding: 1.5rem 2rem;
  width: 100%;
  max-width: 380px;
}

.fe-hero-badge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.fe-hero-badge-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--fe-accent);
}

.fe-hero-badge-title {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.fe-hero-badge-count {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--fe-accent);
  line-height: 1;
}

.fe-hero-badge p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}

.fe-hero-benefits {
  border-top: 1px solid rgba(203, 202, 123, 0.3);
}

.fe-hero-benefit {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 2.5rem 1rem 3rem;
  color: #fff;
}

@media (max-width: 767px) {
  .fe-hero-benefit {
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .fe-hero-benefit:last-child {
    border-bottom: none;
  }
}

.fe-hero-benefit:last-child { border-right: none; }

.fe-hero-benefit-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--fe-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #000;
  flex-shrink: 0;
}

.fe-hero-benefit-icon { font-size: 1.8rem; color: var(--fe-accent); flex-shrink: 0; line-height: 1; }

.fe-hero-benefit strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.3rem;
}

.fe-hero-benefit p { color: rgba(255,255,255,0.65); font-size: 1.05rem; }

/* ---- About section ---- */
@media (min-width: 1200px) {
  .fe-about-text { padding-left: 3rem !important; }
}

/* ---- About images ---- */
.fe-about-images {
  position: relative;
}

.fe-about-img-main {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}

.fe-about-img-main img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}


.fe-about-img-secondary {
  position: absolute;
  bottom: -10rem;
  right: -3rem;
  width: 55%;
  border: 7px solid #fff;
  border-radius: 0.75rem;
  overflow: hidden;
}
.fe-section-ink .fe-about-img-secondary {
  border-color: #111318;
}

.fe-about-img-secondary img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

@media (max-width: 575px) {
  .fe-about-img-secondary { display: none; }
}

/* ---- Checklist ---- */
.fe-check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.fe-check-list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.4rem 0;
  font-size: 1rem;
}

.fe-check-list li::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--fe-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CBCA7B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/16px no-repeat;
  clip-path: none;
  top: auto;
  left: auto;
  position: static;
}

/* ---- Blockquote ---- */
.fe-blockquote {
  border-left: 3px solid var(--fe-accent);
  padding: 0.5rem 1rem;
  margin: 0 0 1.5rem;
  font-style: italic;
  color: var(--fe-muted);
  font-size: 0.92rem;
}

/* ---- Service Cards ---- */
.fe-service-card {
  background: #fff;
  border: 1px solid var(--fe-border);
  border-radius: 1rem;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease;
}

.fe-section-dark .fe-service-card {
  background: #fff;
}

.fe-service-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.fe-service-img {
  position: relative;
}

.fe-service-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  clip-path: inset(0);
}

.fe-service-card:hover .fe-service-img img {
  transform: scale(1.04);
}

.fe-service-icon {
  position: absolute;
  bottom: -22px;
  right: 1.2rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--fe-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.fe-service-icon i { font-size: 1.6rem; color: #000; }

.fe-service-body {
  padding: 2rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.fe-service-body h3 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.fe-service-body p {
  font-size: 0.98rem;
  color: var(--fe-text);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 1rem;
}

/* Section footnote */
.fe-section-footnote {
  font-size: 0.88rem;
  color: var(--fe-muted);
}

.fe-section-footnote a {
  color: var(--fe-accent);
  font-weight: 700;
}

.fe-section-footnote a:hover {
  color: #dedd97;
}

.fe-badge {
  display: inline-block;
  background: var(--fe-accent);
  color: #000;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2em 0.6em;
  margin-right: 0.4rem;
  border-radius: 0;
}

/* ---- Adventure Grid ---- */
.fe-adventure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 1rem;
}

@media (max-width: 991px) {
  .fe-adventure-grid { grid-template-columns: 1fr 1fr; }
  .fe-adventure-text { grid-column: span 2; }
}

@media (max-width: 575px) {
  .fe-adventure-grid { grid-template-columns: 1fr; }
  .fe-adventure-text { grid-column: span 1; }
}

.fe-adventure-text {
  background: var(--fe-primary);
  color: #fff;
  padding: 3rem 2rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fe-adventure-text h3 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.fe-adventure-img {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}

.fe-adventure-img img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  display: block;
}

.fe-adventure-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

.fe-adventure-overlay p {
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 0.75rem;
}

.fe-adventure-overlay-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fe-accent);
}

.fe-adventure-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fe-accent);
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.fe-adventure-arrow:hover {
  background: #fff;
  transform: scale(1.08);
}

.fe-adventure-arrow i {
  font-size: 1.3rem;
  color: #000;
}

.fe-adventure-arrow:hover i {
  color: #000;
}

.fe-adventure-caption {
  background: var(--fe-bg-subtle);
  padding: 1rem 1.4rem;
  font-size: 1rem;
  color: var(--fe-text);
  border-top: 2px solid var(--fe-accent);
}

/* ---- Counter Strip ---- */
.fe-counter-strip {
  background: var(--fe-accent);
  padding: 5rem 0 7rem;
  color: var(--fe-primary);
}

.fe-counter-eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
  margin-bottom: 0.6rem;
}

.fe-counter-heading {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--fe-primary);
  letter-spacing: -0.02em;
  margin: 0;
}

.fe-counter-item {
  padding: 0.5rem;
}

.fe-counter-badge {
  background: rgba(0,0,0,0.12);
  border-radius: 1rem;
  padding: 1.5rem 1rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.fe-counter-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--fe-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--fe-primary);
  flex-shrink: 0;
}

.fe-counter-value {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--fe-primary);
  line-height: 1;
}

.fe-counter-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
}

/* ---- Footer ---- */
.fe-footer {
  position: relative;
  background: url('/img/dive09.jpg') center center / cover no-repeat;
  color: rgba(255,255,255,0.5);
  font-size: 1rem;
}

.fe-footer .container > .row {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}

.fe-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 0;
}

.fe-footer .container,
.fe-footer-copyright {
  position: relative;
  z-index: 1;
}

body.fe-page .fe-footer a {
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  transition: color 0.2s;
}

body.fe-page .fe-footer a:hover { color: var(--fe-accent); }

.fe-footer-slogan {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.fe-footer-contact {
  margin-top: 2rem !important;
}

.fe-footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.fe-footer-icon { font-size: 1.1rem; color: var(--fe-accent); flex-shrink: 0; }

.fe-footer-heading {
  font-family: 'Manrope', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fe-accent);
  margin-bottom: 1rem;
}

.fe-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fe-footer-links li { margin-bottom: 0.5rem; }

.fe-footer-social {
  display: flex;
  gap: 0.75rem;
}

.fe-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.92) !important;
  font-size: 1.1rem;
  transition: all 0.2s;
}

.fe-footer-social a:hover {
  border-color: var(--fe-accent);
  color: var(--fe-accent) !important;
}

.fe-footer-copyright {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 2.5rem 0;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.65);
}

.fe-footer-copyright p { margin: 0; }

/* ---- Page Header (sub-pages) ---- */
.fe-page-header {
  background: url('/img/hero05.jpg') center / cover no-repeat;
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: calc(var(--tblr-navbar-height) + 4.5rem) 0 4.75rem;
  color: #fff;
}

.fe-header + .fe-page-header {
  margin-top: calc(-1 * var(--tblr-navbar-height));
}

.fe-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,20,0.45);
}

.fe-page-header-box {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 100%;
}

/* About stat card (block1 image) */
.fe-about-stat-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 3/4;
  width: 100%;
}
.fe-about-stat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fe-about-stat-body {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  padding: 0.75rem 1.5rem;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 2rem;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.12);
}
.fe-about-stat-num {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.fe-about-stat-label { font-size: 0.78rem; opacity: 0.8; }

.fe-page-header h1 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #fff;
  font-weight: 700;
  margin: 0;
}

.fe-page-header .breadcrumb { background: none; padding: 0; margin: 0.25rem 0 0; justify-content: center; }
.fe-page-header .breadcrumb-item, .fe-page-header .breadcrumb-item a {
  color: rgba(255,255,255,0.6);
  font-size: 1rem;
}
.fe-page-header .breadcrumb-item.active { color: var(--fe-accent); }
.fe-page-header .breadcrumb-item + .fe-page-header .breadcrumb-item::before {
  color: rgba(255,255,255,0.3);
}

/* ---- Scroll animations ---- */
.fe-animate {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.fe-animate.fe-animate--img {
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.fe-animate.fe-animate--visible {
  opacity: 1;
  transform: none;
}

.fe-animate.fe-animate--delay-1 { transition-delay: 0.1s; }
.fe-animate.fe-animate--delay-2 { transition-delay: 0.2s; }
.fe-animate.fe-animate--delay-3 { transition-delay: 0.3s; }
.fe-animate.fe-animate--delay-4 { transition-delay: 0.4s; }

/* ---- Auth Pages (login, forgot-password, reset-password) ---- */
.fe-auth-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--tblr-navbar-height) + 2rem) 0 4rem;
  position: relative;
  background: url('/img/dive07.jpg') center/cover no-repeat;
}
.fe-auth-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,5,20,0.45);
}
.fe-auth-section .container { position: relative; z-index: 1; }
.fe-auth-card {
  background: rgba(0,5,20,0.45);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 1.25rem;
  padding: 2.5rem 3rem;
  color: #fff;
}
.fe-auth-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 1.75rem;
}
.fe-auth-subtitle {
  text-align: center;
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  margin-bottom: 1.75rem;
}
.fe-auth-alert {
  background: rgba(220,53,69,0.15);
  border: 1px solid rgba(220,53,69,0.4);
  border-radius: 0.6rem;
  color: #ff6b6b;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}
.fe-auth-success { text-align: center; }
.fe-auth-success-icon { font-size: 2.5rem; color: var(--fe-accent); margin-bottom: 1rem; }
.fe-auth-success h2 { color: #fff; margin-bottom: 0.75rem; }
.fe-auth-success p { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin-bottom: 1.5rem; }
.fe-auth-field { margin-bottom: 1.25rem; }
.fe-auth-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}
.fe-auth-input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 0.6rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: #fff;
  background: rgba(255,255,255,0.08);
  transition: border-color 0.2s, background 0.2s;
  outline: none;
  box-sizing: border-box;
}
.fe-auth-input::placeholder { color: rgba(255,255,255,0.35); }
.fe-auth-input:focus { border-color: var(--fe-accent); background: rgba(255,255,255,0.12); }
.fe-auth-check { margin-bottom: 1.5rem; }
.fe-auth-check label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
}
.fe-auth-links {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.fe-auth-links a { color: rgba(255,255,255,0.7); font-weight: 600; }
.fe-auth-links a:hover { color: var(--fe-accent); }

/* ---- About Page ---- */
.fe-feature-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  border-radius: 0.75rem;
  background: var(--fe-bg-subtle);
  border: 1px solid var(--fe-border);
  height: 100%;
}
.fe-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fe-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #000;
  flex-shrink: 0;
}
.fe-feature-item strong { display: block; margin-bottom: 0.3rem; color: var(--fe-primary); }
.fe-feature-item p { color: var(--fe-text); font-size: 1rem; }

.fe-rounded-img {
  width: 100%;
  border-radius: 1rem;
  object-fit: cover;
  aspect-ratio: 4/3;
  display: block;
}

.fe-info-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1rem;
  padding: 2rem;
  height: 100%;
}
.fe-info-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--fe-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #000;
  margin-bottom: 1.25rem;
}
.fe-info-card h3 { color: #fff; font-size: 1.15rem; margin-bottom: 0.75rem; }
.fe-info-card p { color: rgba(255,255,255,0.65); font-size: 1rem; margin: 0; }

.fe-why-card {
  background: var(--fe-bg-subtle);
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fe-border);
}
.fe-why-num {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--fe-accent);
  line-height: 1;
  margin-bottom: 1rem;
}
.fe-why-card h3 { font-size: 1.05rem; margin-bottom: 0.75rem; color: var(--fe-primary); }
.fe-why-card p { font-size: 1rem; color: var(--fe-text); flex: 1; margin: 0; }
.fe-why-card-footer { padding-top: 1.25rem; margin-top: auto; }

.fe-link {
  color: var(--fe-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  transition: opacity 0.2s, gap 0.2s;
}
.fe-link:hover { opacity: 0.75; }

.fe-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  padding: 2.5rem 0 0;
}

.fe-callout-card {
  position: relative;
}
.fe-callout-img {
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
}
.fe-callout-img img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
}
.fe-callout-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
}
.fe-callout-body {
  position: relative;
  z-index: 2;
  margin: -2.5rem 2rem 0 1.5rem;
  background: var(--fe-accent);
  width: fit-content;
  border-radius: 0.75rem;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.fe-callout-contact h3 { color: rgba(0,0,0,0.5); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.fe-callout-contact p { color: #000; margin: 0; font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
.fe-text-items { display: flex; flex-direction: column; }
.fe-text-item { padding: 2.5rem 0; }
.fe-text-item:not(:last-child) { border-bottom: 1px solid var(--fe-border); }
.fe-text-item-inner { display: flex; gap: 1rem; align-items: flex-start; }
.fe-text-item strong { display: block; margin-bottom: 0.3rem; color: var(--fe-primary); font-size: 1rem; }
.fe-callout-contacts { display: flex; align-items: center; gap: 0; }
.fe-callout-contacts .fe-callout-contact { flex: 1; }
.fe-callout-divider-v { width: 1px; align-self: stretch; background: rgba(0,0,0,0.3); margin: 0 1.25rem; }

.fe-team-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.fe-team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fe-team-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 55%);
}
.fe-team-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1.25rem;
  z-index: 1;
}
.fe-team-card h3 { font-size: 1.05rem; margin-bottom: 0.2rem; color: #fff; font-weight: 700; }
.fe-team-card p { font-size: 0.9rem; color: rgba(255,255,255,0.75); margin: 0; }

/* Auth bottom bar (replaces full footer on auth pages) */
.fe-auth-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 1.25rem 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.3);
}
.fe-auth-bar a { color: rgba(255,255,255,0.5); font-weight: 600; }
.fe-auth-bar a:hover { color: var(--fe-accent); }

/* ---- Imprint ---- */
.fe-imprint-sidebar {
  position: sticky;
  top: calc(var(--tblr-navbar-height) + 1.5rem);
}
.fe-imprint-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.fe-imprint-nav a {
  display: block;
  padding: 0.65rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  color: var(--fe-text);
  border-left: 3px solid transparent;
  transition: all 0.2s;
}
.fe-imprint-nav a:hover {
  background: var(--fe-bg-subtle);
  border-left-color: var(--fe-accent);
  color: var(--fe-primary);
}
.fe-imprint-cta {
  background: var(--fe-accent);
  border-radius: 1rem;
  padding: 1.5rem;
}
.fe-imprint-cta-text {
  font-weight: 700;
  font-size: 1.05rem;
  color: #000;
  margin-bottom: 1rem;
}
.fe-imprint-cta-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #000;
  font-weight: 600;
  padding: 0.4rem 0;
}
.fe-imprint-cta-link:hover { opacity: 0.7; }
.fe-imprint-cta-link + .fe-imprint-cta-link { border-top: 1px solid rgba(0,0,0,0.15); }

.fe-detail-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--fe-primary);
  letter-spacing: -0.02em;
}

.fe-imprint-section {
  margin-bottom: 1.5rem;
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--fe-border);
}
[data-theme="dark"] .fe-imprint-section {
  background: var(--fe-bg-subtle);
  border-color: var(--fe-border);
}
[data-theme="dark"] .fe-imprint-heading { color: var(--fe-accent); }
.fe-imprint-section:last-child { margin-bottom: 0; }

/* Markdown-rendered legal pages (terms, privacy): style bare h2/ol/ul/p
   inside .fe-imprint-content so authors can write plain Markdown. */
.fe-imprint-content > h2 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fe-accent);
  margin-bottom: 1rem;
}
.fe-imprint-content > h2:not(:first-child) { margin-top: 1.5rem; }
.fe-imprint-content > h3 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fe-text);
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
}
[data-theme="dark"] .fe-imprint-content > h2 { color: var(--fe-accent); }
[data-theme="dark"] .fe-imprint-content > h3 { color: var(--fe-text); }
.fe-imprint-content ol,
.fe-imprint-content ul { padding-left: 1.25rem; }
.fe-imprint-content ol li,
.fe-imprint-content ul li { margin-bottom: 0.25rem; }
.fe-imprint-content p { margin-bottom: 1rem; }
.fe-imprint-content > *:last-child { margin-bottom: 0; }
.fe-imprint-heading {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fe-accent);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.fe-imprint-heading-toggle {
  background: none;
  border: 0;
  color: var(--fe-accent);
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.fe-imprint-heading-toggle:hover { background-color: rgba(0,0,0,0.05); }
[data-theme="dark"] .fe-imprint-heading-toggle:hover { background-color: rgba(255,255,255,0.08); }
.fe-imprint-section.is-collapsed .fe-imprint-row.is-empty { display: none; }
.fe-imprint-sub { color: var(--fe-muted); font-size: 0.9rem; margin-bottom: 1.25rem; }
.fe-imprint-dl { margin: 0; }
.fe-imprint-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--fe-border);
}
.fe-imprint-row.is-first-visible { border-top: none; padding-top: 0; }
.fe-imprint-row.is-last-visible { padding-bottom: 0; }
.fe-imprint-row dt { font-weight: 400; color: var(--fe-text); }
.fe-imprint-row dd { margin: 0; color: var(--fe-text); }
.fe-imprint-row dd.text-muted { color: var(--fe-muted) !important; opacity: 0.5; }

/* ---- Contact ---- */
.fe-contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--fe-bg-subtle);
  border: 1px solid var(--fe-border);
  height: 100%;
}
.fe-contact-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--fe-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #000;
  flex-shrink: 0;
}
.fe-contact-item h3 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fe-muted); margin-bottom: 0.25rem; }
.fe-contact-item a, .fe-contact-item p { font-size: 1rem; font-weight: 600; color: var(--fe-primary); margin: 0; }
.fe-contact-item a:hover { color: var(--fe-accent); }
.fe-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--fe-border);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--fe-primary);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s;
}
[data-theme="dark"] .fe-input {
  background: var(--fe-bg-subtle);
}
.fe-input:focus { outline: none; border-color: var(--fe-accent); }
.fe-input::placeholder { color: var(--fe-muted); }
.fe-contact-map {
  border-radius: 1rem;
  overflow: hidden;
  height: 480px;
}
.fe-contact-map iframe { display: block; }

/* ---- Error pages ---- */
.fe-error-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  margin-top: calc(-1 * var(--tblr-navbar-height));
  padding: calc(var(--tblr-navbar-height) + 3rem) 0 5rem;
  position: relative;
  background: url('/img/turtle01.jpg') center / cover no-repeat;
}
.fe-error-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,5,20,0.35);
}
.fe-error-section .container { position: relative; z-index: 1; }
.fe-error-glass {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
}
.fe-error-code {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: 800;
  line-height: 1;
  color: var(--fe-accent);
  margin-bottom: 1.5rem;
}
.fe-error-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}
.fe-error-text {
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  margin-bottom: 2rem;
}
.fe-error-details {
  text-align: left;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}
.fe-error-details pre {
  background: rgba(0,0,0,0.5);
  border-radius: 0.5rem;
  padding: 1rem;
  overflow: auto;
  max-height: 50vh;
  margin-top: 0.75rem;
  color: #e0e0e0;
}
.fe-error-details pre p { color: #e0e0e0 !important; font-size: 0.85rem; }

/* ================================ OBSERVATION CARDS ================================ */
.fe-obs-card {
  background: #fff;
  border: 1px solid var(--fe-border);
  border-radius: 1rem;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
}
.fe-obs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  color: inherit;
  text-decoration: none;
}
.fe-obs-card-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--fe-bg-subtle);
  position: relative;
}
.fe-obs-card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fe-obs-card-play {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 2;
}
.fe-obs-card-badges {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: flex;
  gap: 0.3rem;
}
.fe-obs-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 1rem;
  backdrop-filter: blur(4px);
  line-height: 1;
  background: rgba(0,0,0,0.6);
}
.fe-obs-card-badge i { font-size: 0.78rem; }
.fe-badge-image { background: var(--fe-tone-sage-dark); }
.fe-badge-video { background: var(--fe-tone-copper-dark); }
.fe-badge-audio { background: var(--fe-tone-mustard-dark); }
.fe-obs-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s;
}
.fe-obs-card:hover .fe-obs-card-img img { transform: scale(1.04); }
.fe-obs-card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fe-muted);
  font-size: 3rem;
  background: var(--fe-bg-subtle);
}
[data-theme="dark"] .fe-obs-card-img-placeholder {
  background: #1c1f26;
}
.fe-obs-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fe-obs-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: var(--fe-text);
}
.fe-obs-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.75rem;
}
.fe-obs-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--fe-bg-subtle);
  border-radius: 2rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.8rem;
  color: var(--fe-muted);
  white-space: nowrap;
}
.fe-obs-tag.accent { background: var(--fe-accent); color: #000; }

/* Link-flavored chip: inherits normal chip styling but behaves as a hover-link. */
a.fe-obs-tag--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: filter 0.15s ease;
}
a.fe-obs-tag--link:hover,
a.fe-obs-tag--link:focus {
  filter: brightness(0.94);
  text-decoration: none;
}

/* Tinted palette variants for observation meta tags */
.fe-obs-tag--time {
  background: rgba(var(--fe-tone-champagne-rgb), 0.35);
  color: var(--fe-tone-champagne-dark);
}
.fe-obs-tag--user {
  background: rgba(var(--fe-tone-earth-rgb), 0.25);
  color: var(--fe-tone-earth-dark);
}
.fe-obs-tag--depth {
  background: rgba(var(--fe-tone-sage-rgb), 0.28);
  color: var(--fe-tone-sage-dark);
}
.fe-obs-tag--confirmed {
  background: rgba(var(--fe-tone-olive-rgb), 0.22);
  color: var(--fe-tone-olive-dark);
}
.fe-obs-tag--time i,
.fe-obs-tag--user i,
.fe-obs-tag--depth i,
.fe-obs-tag--confirmed i { opacity: 0.85; }

[data-theme="dark"] .fe-obs-card { background: var(--fe-bg-subtle); }
[data-theme="dark"] .fe-obs-tag { background: rgba(255,255,255,0.07); color: var(--fe-muted); }
[data-theme="dark"] .fe-obs-tag--time,
[data-theme="dark"] .fe-obs-tag--user,
[data-theme="dark"] .fe-obs-tag--depth,
[data-theme="dark"] .fe-obs-tag--confirmed { color: rgba(255,255,255,0.85); }

/* ---- Buttons: dark mode overrides ---- */
[data-theme="dark"] .fe-btn-outline {
  background: rgba(203, 202, 123, 0.1);
  border-color: var(--fe-accent);
  color: var(--fe-accent) !important;
}
[data-theme="dark"] .fe-btn-outline:hover {
  background: var(--fe-accent);
  color: #000 !important;
}
[data-theme="dark"] .fe-btn-outline i {
  background: rgba(255,255,255,0.12);
}
[data-theme="dark"] .fe-btn-outline:hover i {
  background: rgba(0,0,0,0.2);
}

/* ================================ OBSERVATION DETAIL ================================ */
.fe-obs-detail-img {
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--fe-bg-subtle);
}
.fe-obs-detail-img img { width: 100%; height: 100%; object-fit: cover; }

/* Detail page photo gallery (sidebar) */
.fe-detail-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fe-detail-gallery-img {
  width: 100%;
  border-radius: 1rem;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.fe-nav-marker, .fe-nav-marker a { pointer-events: auto; cursor: pointer; }
.fe-map-wrap { position: relative; }
.fe-map-expand {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 500;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: none;
  background: rgba(255,255,255,0.95);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
}
.fe-map-expand:hover { background: #fff; }
.fe-map-full { width: 100%; height: 80vh; }
.fe-lightbox-anchor { display: block; }
/* GLightbox footer/caption: solid black with white text */
.glightbox-clean .gslide-description,
.glightbox-clean .gdesc-inner,
.gslide-description,
.gdesc-inner {
  background: #000 !important;
}
.glightbox-clean .gslide-title,
.glightbox-clean .gslide-desc,
.gslide-title,
.gslide-desc,
.gslide-description * {
  color: #fff !important;
}
.fe-carousel-img {
  aspect-ratio: 16/9;
  object-fit: cover;
}
#org-carousel, #obs-carousel { border-radius: 1rem; overflow: hidden; }
#org-carousel .carousel-control-prev-icon,
#org-carousel .carousel-control-next-icon,
#obs-carousel .carousel-control-prev-icon,
#obs-carousel .carousel-control-next-icon {
  background-color: rgba(0,0,0,0.4);
  border-radius: 50%;
  padding: 1.25rem;
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
}

.fe-obs-detail-map {
  border-radius: 1rem;
  overflow: hidden;
  height: 420px;
  border: 1px solid var(--fe-border);
}
[data-theme="dark"] .fe-obs-detail-map {
  background: #1a1b26;
}
[data-theme="dark"] .fe-map-full {
  background: #1a1b26;
}

/* ---- Filter Bar (shared across list pages) ---- */
.fe-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.fe-filter-search {
  display: flex;
  gap: 0.5rem;
  flex: 0 1 auto;
  max-width: 280px;
  align-items: center;
}
.fe-filter-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}
.fe-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--fe-text);
  font-size: 0.88rem;
  white-space: nowrap;
}

/* Unified height for input, select, buttons in filter bar */
.fe-filter-bar .fe-input {
  height: 42px;
  padding: 0 0.85rem;
  font-size: 0.92rem;
  box-sizing: border-box;
}
/* fe-btn in filter bar: force perfect circle for button and inner icon */
.fe-filter-search .fe-btn {
  width: 62px;
  height: 62px;
  min-width: 62px;
  min-height: 62px;
  padding: 0;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fe-filter-search .fe-btn i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.25rem;
}

/* View Toggle */
.fe-view-toggle {
  display: inline-flex;
  gap: 0;
  border: 1.5px solid var(--fe-border);
  border-radius: 0.6rem;
  overflow: hidden;
  height: 42px;
  background: #fff;
}
[data-theme="dark"] .fe-view-toggle { background: var(--fe-bg-subtle); }
.fe-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  font-size: 1.15rem;
  color: var(--fe-muted);
  background: transparent;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.fe-view-btn:hover { color: var(--fe-accent) !important; background: rgba(0,0,0,0.04); }
.fe-view-btn.active { color: #000 !important; background: var(--fe-accent); }
.fe-view-btn.active:hover { color: #000 !important; background: var(--fe-accent); opacity: 0.85; }
[data-theme="dark"] .fe-view-btn:hover { color: var(--fe-accent) !important; background: rgba(255,255,255,0.06); }
[data-theme="dark"] .fe-view-btn.active { color: #000 !important; background: var(--fe-accent); }
[data-theme="dark"] .fe-view-btn.active:hover { color: #000 !important; opacity: 0.85; }

/* Sort Select */
select.fe-input {
  width: auto;
  padding-right: 2.2rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px;
  cursor: pointer;
}
select.fe-input:focus { border-color: var(--fe-accent); }
.fe-sort-select { min-width: 160px; }

/* ---- Frontend Table ---- */
/* ---- List View (compact card-rows with thumbnail) ---- */
.fe-list-view {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fe-list-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid var(--fe-border);
  border-radius: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
a.fe-list-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  color: inherit;
  text-decoration: none;
}
[data-theme="dark"] .fe-list-row { background: var(--fe-bg-subtle); }
[data-theme="dark"] a.fe-list-row:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.3); }

.fe-list-thumb {
  width: 72px;
  height: 54px;
  border-radius: 0.5rem;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--fe-bg-subtle);
  position: relative;
}
.fe-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fe-list-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fe-muted);
  font-size: 1.4rem;
}
.fe-list-thumb-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 0.75rem;
  line-height: 1;
  backdrop-filter: blur(4px);
}
.fe-list-thumb-badge i { font-size: 0.72rem; }

.fe-list-icon {
  width: 44px;
  height: 44px;
  border-radius: 0.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fe-bg-subtle);
  color: var(--fe-muted);
  font-size: 1.2rem;
}
[data-theme="dark"] .fe-list-icon { background: rgba(255,255,255,0.06); }

.fe-list-content {
  flex: 1;
  min-width: 0;
}
.fe-list-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--fe-primary);
  line-height: 1.3;
  margin-bottom: 0.25rem;
}
.fe-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.fe-list-row-sub { margin-left: 2rem; opacity: 0.8; }

/* ---- Advanced search (observations list) ---- */
.fe-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fe-link);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.35rem 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
}
.fe-advanced-toggle:hover { color: var(--fe-primary); }
.fe-filter-count {
  font-size: 0.88rem;
  white-space: nowrap;
  margin-right: 0.25rem;
}
.fe-advanced-toggle .fe-advanced-chevron {
  transition: transform 0.2s;
  font-size: 0.95rem;
}
.fe-advanced-toggle.is-open .fe-advanced-chevron { transform: rotate(180deg); }

.fe-advanced-panel {
  flex: 1 1 100%;
  display: none;
  background: #fff;
  border: 1.5px solid var(--fe-border);
  border-radius: 0.8rem;
  padding: 1.25rem;
  margin-top: 0.25rem;
}
[data-theme="dark"] .fe-advanced-panel { background: var(--fe-bg-subtle); }
.fe-advanced-panel.is-open { display: block; }

/* Avoid duplicate Suchen/Zurücksetzen buttons: when the advanced panel is
   open, the panel's own submit/reset take over, so hide the inline ones
   from the top search row. */
.fe-filter-bar:has(.fe-advanced-panel.is-open) .fe-filter-search .fe-btn {
  display: none;
}

.fe-advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem 1rem;
}
.fe-advanced-field { display: flex; flex-direction: column; gap: 0.3rem; }
.fe-advanced-field--wide { grid-column: 1 / -1; }
.fe-advanced-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fe-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
.fe-advanced-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 0.5rem;
}
.fe-advanced-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ---- Active filter chips ---- */
.fe-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.65rem 0.85rem;
  background: rgba(var(--fe-tone-champagne-rgb), 0.2);
  border-radius: 0.6rem;
}
.fe-filter-chips-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fe-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.25rem;
}
.fe-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #fff;
  border: 1px solid var(--fe-border);
  border-radius: 999px;
  padding: 0.2rem 0.35rem 0.2rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--fe-text);
}
[data-theme="dark"] .fe-filter-chip { background: var(--fe-bg-subtle); }
.fe-filter-chip-label { color: var(--fe-muted); font-weight: 500; }
.fe-filter-chip-value { font-weight: 600; color: var(--fe-text); }
.fe-filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--fe-muted);
  background: transparent;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.fe-filter-chip-remove:hover { background: var(--fe-accent); color: #000; }
.fe-filter-chips-clear {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--fe-muted);
  text-decoration: underline;
}
.fe-filter-chips-clear { color: var(--fe-link); }
.fe-filter-chips-clear:hover { color: var(--fe-primary); }

.fe-results-count { font-size: 0.88rem; }

/* ---- Map view ---- */
.fe-map-view {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fe-map-view-help {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
}
.fe-map-view-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 1rem;
  align-items: stretch;
}
@media (max-width: 900px) {
  .fe-map-view-split { grid-template-columns: 1fr; }
}
.fe-obs-map {
  width: 100%;
  height: 70vh;
  min-height: 480px;
  border-radius: 0.6rem;
  border: 1.5px solid var(--fe-border);
  overflow: hidden;
}
.fe-map-side {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}
.fe-map-view-count {
  font-size: 0.88rem;
  color: var(--fe-muted);
}
.fe-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  font-size: 0.78rem;
  color: var(--fe-muted);
  padding: 0.4rem 0.55rem;
  background: transparent;
  border-radius: 0.45rem;
}
.fe-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--fe-border);
  color: var(--fe-text);
  font-size: inherit;
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s;
  opacity: 0.45;
}
.fe-map-legend-item.is-active { opacity: 1; border-color: var(--fe-accent-dark); }
.fe-map-legend-item:hover { border-color: var(--fe-accent-dark); }
[data-theme="dark"] .fe-map-legend-item { background: var(--fe-bg); }
.fe-map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  border: 1.5px solid rgba(0,0,0,0.15);
}
.fe-rel-own        { background: var(--fe-tone-sage-dark); }
.fe-rel-confirmed  { background: var(--fe-tone-copper-dark); }
.fe-rel-organization { background: var(--fe-tone-mustard-dark); }
.fe-rel-foreign    { background: var(--fe-accent); }
.fe-map-list {
  overflow-y: auto;
  max-height: 70vh;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-right: 0.25rem;
}
.fe-map-list-empty {
  padding: 1rem;
  text-align: center;
  font-size: 0.88rem;
}
.fe-map-list-item {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0.5rem;
  background: transparent;
  border: 1px solid var(--fe-border);
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--fe-text);
  transition: border-color 0.15s, background 0.15s;
}
.fe-map-list-item:hover {
  border-color: var(--fe-accent-dark);
  background: rgba(var(--fe-tone-champagne-rgb), 0.2);
}
[data-theme="dark"] .fe-map-list-item { background: var(--fe-bg-subtle); }
.fe-map-list-thumb {
  width: 48px;
  height: 48px;
  border-radius: 0.35rem;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--fe-bg-subtle);
}
.fe-map-list-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fe-muted);
  font-size: 1.1rem;
}
.fe-map-list-body { min-width: 0; flex: 1 1 auto; }
.fe-map-list-title {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--fe-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fe-map-list-meta {
  font-size: 0.78rem;
  color: var(--fe-muted);
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.fe-map-list-item.is-selected {
  border-color: var(--fe-accent-dark);
  background: rgba(var(--fe-tone-champagne-rgb), 0.35);
  box-shadow: 0 0 0 2px var(--fe-accent);
}
[data-theme="dark"] .fe-map-list-item.is-selected {
  background: rgba(var(--fe-tone-champagne-rgb), 0.18);
}
.fe-map-list-item .fe-map-list-thumb {
  width: 60px;
  height: 60px;
}

/* Leaflet popup: rich content (mirrors grid card body) */
.fe-map-popup { min-width: 200px; max-width: 240px; }
.fe-map-popup-thumb-wrap {
  position: relative;
  margin-bottom: 0.5rem;
}
.fe-map-popup-thumb {
  width: 100%;
  border-radius: 0.35rem;
  display: block;
  max-height: 140px;
  object-fit: cover;
}
.fe-map-popup-thumb-wrap .fe-obs-card-badges {
  top: 0.4rem;
  right: 0.4rem;
}
.fe-map-popup-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--fe-primary);
  margin-bottom: 0.4rem;
}
.fe-map-popup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.55rem;
}
.fe-map-popup-btn {
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  margin-top: 0.75rem;
  margin-left: auto;
  align-self: flex-end;
}
.fe-map-popup { display: flex; flex-direction: column; }
.leaflet-popup-content { margin: 0.7rem 0.85rem; }

/* ---- Classification (observation detail sidebar) ---- */
/* ---- Avatars: always round ---- */
.fe-page .avatar {
  border-radius: 50% !important;
}

/* ---- Avatar in tags ---- */
.fe-avatar-tag {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ---- Media list (observation detail, stacked images) ---- */
.fe-media-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.fe-media-item { }
.fe-media-img {
  width: 100%;
  border-radius: 0.75rem;
  display: block;
  object-fit: cover;
  max-height: 400px;
}
video.fe-media-img {
  object-fit: contain;
  background: #000;
}
.fe-media-player-wrap { position: relative; }
.fe-media-thumb-overlay {
  position: relative;
  cursor: pointer;
}
.fe-media-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  backdrop-filter: blur(4px);
  transition: transform 0.15s;
}
.fe-media-thumb-overlay:hover .fe-media-play-btn { transform: translate(-50%, -50%) scale(1.1); }
.fe-media-hidden { display: none; }
.fe-media-audio-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--fe-bg-subtle);
  border-radius: 0.75rem;
}
.fe-media-audio-wrap audio { flex: 1; }
.fe-media-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.fe-media-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--fe-text);
  font-weight: 500;
}

.fe-content-label {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fe-accent);
  margin: 1.25rem 0 0.5rem;
}
.fe-img-caption {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--fe-muted);
  letter-spacing: 0.02em;
}
.fe-classification-img {
  width: 100%;
  border-radius: 0.75rem;
  display: block;
  object-fit: contain;
  max-height: 300px;
  background: var(--fe-bg-subtle);
}
/* Taxonomy tree (vertical, indented with connectors) */
.fe-taxonomy-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fe-taxonomy-node {
  position: relative;
  padding: 0.15rem 0 0.15rem 1.2rem;
  font-size: 0.88rem;
  color: var(--fe-text);
  line-height: 1.3;
}
.fe-taxonomy-node:nth-child(1) { margin-left: 0; }
.fe-taxonomy-node:nth-child(2) { margin-left: 1rem; }
.fe-taxonomy-node:nth-child(3) { margin-left: 2rem; }
.fe-taxonomy-node:nth-child(4) { margin-left: 3rem; }
.fe-taxonomy-node:nth-child(5) { margin-left: 4rem; }
.fe-taxonomy-node:nth-child(6) { margin-left: 5rem; }
.fe-taxonomy-node::before {
  content: '└';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fe-border);
  font-size: 0.85rem;
  line-height: 1;
}
.fe-taxonomy-node.fe-taxonomy-current {
  color: var(--fe-accent);
}
.fe-taxonomy-rank {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fe-muted);
  min-width: 4.5rem;
  margin-right: 0.35rem;
}

/* ---- Pricing Table (Tabler card-table pattern) ---- */
.fe-page .card {
  color: var(--fe-text);
  border-color: var(--fe-border);
  border-radius: 1rem;
}
[data-theme="dark"] .fe-page .card {
  background: var(--fe-bg-subtle);
  color: var(--fe-text);
}
[data-theme="dark"] .fe-page .card .table {
  color: var(--fe-text);
}
[data-theme="dark"] .fe-page .card .table td,
[data-theme="dark"] .fe-page .card .table th {
  border-color: var(--fe-border);
}
[data-theme="dark"] .fe-page .card h2 {
  color: var(--fe-text);
}
[data-theme="dark"] .fe-page .card .display-6 {
  color: var(--fe-text);
}
[data-theme="dark"] .fe-page .card .btn {
  color: var(--fe-text);
  border-color: var(--fe-border);
}
[data-theme="dark"] .fe-page .card .btn-primary {
  color: #000;
}

/* Dark mode overrides for generic Frontend .card / table styling */
[data-theme="dark"] .fe-page .fe-section .card,
[data-theme="dark"] .fe-page .card.card-table {
  background: var(--fe-bg-subtle);
  border-color: var(--fe-border);
  color: var(--fe-text);
}
[data-theme="dark"] .fe-page .fe-section .card-header,
[data-theme="dark"] .fe-page .fe-section .card-footer {
  border-color: var(--fe-border);
}
[data-theme="dark"] .fe-page .table td,
[data-theme="dark"] .fe-page .table th {
  background: transparent;
  color: var(--fe-text);
  border-color: var(--fe-border);
}
[data-theme="dark"] .fe-page .table h2,
[data-theme="dark"] .fe-page .table .display-6,
[data-theme="dark"] .fe-page .modal-title { color: #fff; }
[data-theme="dark"] .fe-page .text-secondary { color: rgba(255,255,255,0.55) !important; }

/* Form controls in dark mode */
[data-theme="dark"] .fe-page .form-control {
  background: var(--fe-bg);
  border-color: var(--fe-border);
  color: #eee;
}
[data-theme="dark"] .fe-page .form-control::placeholder { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .fe-page .form-label { color: rgba(255,255,255,0.8); }
[data-theme="dark"] .fe-page .form-hint { color: rgba(255,255,255,0.5); }

/* Modals in dark mode */
[data-theme="dark"] .fe-page .modal-content {
  background: var(--fe-bg-subtle);
  border-color: var(--fe-border);
  color: var(--fe-text);
}
[data-theme="dark"] .fe-page .modal-header,
[data-theme="dark"] .fe-page .modal-footer { border-color: var(--fe-border); }

/* ========================================================================
   USER DROPDOWN (frontend header)
   ======================================================================== */
.fe-user-dropdown { position: relative; }

.fe-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem 0.4rem 0.4rem;
  border: 2px solid var(--fe-accent);
  border-radius: 999px;
  background: var(--fe-accent);
  color: #000;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.fe-user-trigger:hover,
.fe-user-trigger[aria-expanded="true"] {
  background: #dedd97;
  border-color: #dedd97;
  color: #000;
}
.fe-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,0.1);
}
.fe-user-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fe-user-caret { font-size: 0.9rem; opacity: 0.7; }

.fe-user-menu.dropdown-menu {
  margin-top: 0.5rem;
  min-width: 220px;
  background: rgba(10,15,25,0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.75rem;
  padding: 0.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.fe-user-menu .dropdown-item {
  color: rgba(255,255,255,0.9);
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}
.fe-user-menu .dropdown-item:hover,
.fe-user-menu .dropdown-item:focus {
  background: rgba(203,202,123,0.15);
  color: #fff;
}
.fe-user-menu .dropdown-item i {
  color: var(--fe-accent);
  font-size: 1.1rem;
}
.fe-user-menu .dropdown-divider {
  border-color: rgba(255,255,255,0.1);
  margin: 0.35rem 0;
}

/* Project submenu (top nav dropdown) — matches user dropdown look */
.fe-nav-submenu.dropdown-menu {
  margin-top: 0.5rem;
  min-width: 200px;
  background: rgba(10,15,25,0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.75rem;
  padding: 0.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.fe-nav-submenu .dropdown-item {
  color: rgba(255,255,255,0.9);
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  background: transparent;
}
.fe-nav-submenu .dropdown-item:hover,
.fe-nav-submenu .dropdown-item:focus,
.fe-nav-submenu .dropdown-item.active {
  background: rgba(203,202,123,0.15);
  color: #fff;
}

/* Hide the dropdown name on very small screens */
@media (max-width: 420px) {
  .fe-user-name, .fe-user-caret { display: none; }
  .fe-user-trigger { padding: 0.35rem; }
}

/* ========================================================================
   FRONTEND CARDS (Tabler .card adapted to frontend look)
   Used on profile and future settings pages.
   ======================================================================== */
.fe-page .fe-section .card {
  background: #fff;
  border: 1px solid var(--fe-border);
  border-radius: 1rem;
  box-shadow: none;
  overflow: hidden;
}
.fe-page .fe-section .card-header {
  background: transparent;
  border-bottom: 1px solid var(--fe-border);
  padding: 1.1rem 1.4rem;
}
.fe-page .fe-section .card-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #8B8A3D;
  margin: 0;
}
.fe-page .fe-section .card-body { padding: 1.4rem; }
.fe-page .fe-section .card-footer {
  background: transparent;
  border-top: 1px solid var(--fe-border);
  padding: 1rem 1.4rem;
}
.fe-page .btn { border-radius: 999px; }
.fe-page .fe-section .btn-primary {
  background: #8B8A3D;
  border-color: #8B8A3D;
  color: #fff;
}
.fe-page .fe-section .btn-primary:hover,
.fe-page .fe-section .btn-primary:focus {
  background: #6b6a2e;
  border-color: #6b6a2e;
  color: #fff;
}
.fe-page .fe-section .btn-outline-primary {
  color: #6b6a2e;
  border-color: #8B8A3D;
  background: transparent;
}
.fe-page .fe-section .btn-outline-primary:hover,
.fe-page .fe-section .btn-outline-primary:focus {
  background: #8B8A3D;
  border-color: #8B8A3D;
  color: #fff;
}

/* Profile avatar with hover-overlay actions */
.fe-profile-avatar-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}
.fe-profile-avatar {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.fe-profile-avatar-actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
  padding-bottom: 1.1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 75%);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.fe-profile-avatar-wrap:hover .fe-profile-avatar-actions,
.fe-profile-avatar-wrap:focus-within .fe-profile-avatar-actions {
  opacity: 1;
}
.fe-profile-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  color: #333;
  border: 0;
  padding: 0;
  font-size: 1rem;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.fe-profile-avatar-btn:hover,
.fe-profile-avatar-btn:focus {
  background: #fff;
  color: #000;
  transform: scale(1.1);
}
/* Delete button: always red icon, red fill on hover */
.fe-profile-avatar-btn[type="submit"] {
  color: #b02a37;
}
.fe-profile-avatar-btn[type="submit"]:hover,
.fe-profile-avatar-btn[type="submit"]:focus {
  background: #b02a37;
  color: #fff;
}

/* Profile settings: sidebar nav + tab content */
.fe-profile-nav .list-group-item {
  color: #555;
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.65rem 0.85rem;
  font-weight: 500;
  margin-bottom: 0.15rem;
}
.fe-profile-nav .list-group-item:hover {
  background: rgba(139,138,61,0.08);
  color: #333;
}
.fe-profile-nav .list-group-item.active {
  background: rgba(139,138,61,0.15);
  color: #6b6a2e;
  font-weight: 700;
}
.fe-profile-nav .list-group-item i { color: #8B8A3D; }

/* Dominant tab-heading + breathing room below.
   Scoped to the direct child of .tab-pane so nested cards
   (e.g. the danger zone) keep their normal title styling. */
.fe-page .fe-section .tab-pane > .card-body > .card-title,
.fe-page .fe-section .tab-pane > form > .card-body > .card-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #6b6a2e;
  margin-bottom: 1.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--fe-border);
}

/* Dark mode tweaks */
[data-theme="dark"] .fe-profile-nav .list-group-item { color: rgba(255,255,255,0.75); }
[data-theme="dark"] .fe-profile-nav .list-group-item:hover {
  background: rgba(203,202,123,0.1);
  color: #fff;
}
[data-theme="dark"] .fe-profile-nav .list-group-item.active {
  background: rgba(203,202,123,0.18);
  color: #fff;
}
[data-theme="dark"] .fe-page .fe-section .tab-pane > .card-body > .card-title,
[data-theme="dark"] .fe-page .fe-section .tab-pane > form > .card-body > .card-title {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.1);
}

/* Favorite cards (profile / favorites tab) */
.fe-fav-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--fe-border);
  border-radius: 0.75rem;
  overflow: hidden;
}
.fe-fav-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--fe-bg-subtle);
  background-size: cover;
  background-position: center;
}
.fe-fav-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(139,138,61,0.35);
  font-size: 3rem;
}
.fe-fav-body {
  padding: 0.6rem 0.75rem 0.75rem;
}
.fe-fav-remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.fe-fav-card:hover .fe-fav-remove,
.fe-fav-card:focus-within .fe-fav-remove {
  opacity: 1;
}
.fe-fav-remove .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0;
  font-size: 1rem;
  background: rgba(255,255,255,0.85);
  border: 0;
  backdrop-filter: blur(6px);
  color: #b02a37;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.fe-fav-remove .btn:hover,
.fe-fav-remove .btn:focus {
  background: #b02a37;
  color: #fff;
  transform: scale(1.1);
}

[data-theme="dark"] .fe-fav-card { background: var(--fe-bg-subtle); border-color: var(--fe-border); }
[data-theme="dark"] .fe-fav-img { background-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .fe-fav-remove .btn { background: rgba(0,0,0,0.55); color: #ff8a95; }
[data-theme="dark"] .fe-fav-remove .btn:hover,
[data-theme="dark"] .fe-fav-remove .btn:focus { background: #b02a37; color: #fff; }

/* ===== Species picker: split layout inside modals ===== */
.modal-body:has(.fe-species-picker) {
  min-height: 560px;
}
.modal .fe-species-picker-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1.25rem;
  align-items: start;
}
.modal .fe-species-picker-pane-results {
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}
.modal .fe-species-picker-results > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
}
.modal .fe-species-picker-pane-details {
  min-height: 480px;
}
.modal .fe-species-picker-details {
  margin-top: 0;
  position: sticky;
  top: 0;
}
@media (max-width: 768px) {
  .modal-body:has(.fe-species-picker) { min-height: 0; }
  .modal .fe-species-picker-body { grid-template-columns: 1fr; }
  .modal .fe-species-picker-pane-details { min-height: 0; }
  .modal .fe-species-picker-details { position: static; }
}

/* Pricing: Individual hero card — earth tone */
.fe-pricing-hero--individual {
  border: 1px solid rgba(var(--fe-tone-earth-rgb), 0.25);
  border-radius: 1rem;
  overflow: hidden;
}
.fe-pricing-hero-top {
  background: rgba(var(--fe-tone-earth-rgb), 0.18);
  border-bottom: 1px solid rgba(var(--fe-tone-earth-rgb), 0.4);
}
[data-theme="dark"] .fe-pricing-hero-top {
  background: rgba(var(--fe-tone-earth-rgb), 0.22);
  border-bottom-color: rgba(var(--fe-tone-earth-rgb), 0.45);
}

/* Tier-Name (BASIC, PRO, PREMIUM) — bold + larger */
.fe-pricing-tier-name {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: #333;
}
[data-theme="dark"] .fe-pricing-tier-name { color: #fff; }

/* Recommended tier (Pro) highlighting */
.fe-pricing-recommended {
  position: relative;
  background: rgba(139,138,61,0.08);
  box-shadow: inset 0 0 0 2px #8B8A3D;
}
.fe-pricing-badge {
  display: inline-block;
  background: #8B8A3D;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
}
/* Carry the highlight through ALL rows (thead + tbody) */
.fe-pricing-table td:nth-child(3) {
  background: rgba(139,138,61,0.05);
  box-shadow: inset 2px 0 0 #8B8A3D, inset -2px 0 0 #8B8A3D;
}
.fe-pricing-table thead tr:first-child td:nth-child(3) {
  box-shadow: inset 2px 0 0 #8B8A3D, inset -2px 0 0 #8B8A3D, inset 0 2px 0 #8B8A3D;
}
.fe-pricing-table tbody tr:last-child td:nth-child(3) {
  box-shadow: inset 2px 0 0 #8B8A3D, inset -2px 0 0 #8B8A3D, inset 0 -2px 0 #8B8A3D;
}

[data-theme="dark"] .fe-pricing-recommended { background: rgba(203,202,123,0.12); box-shadow: inset 0 0 0 2px #CBCA7B; }
[data-theme="dark"] .fe-pricing-badge { background: #CBCA7B; color: #000; }
[data-theme="dark"] .fe-pricing-table td:nth-child(3) { background: rgba(203,202,123,0.06); box-shadow: inset 2px 0 0 #CBCA7B, inset -2px 0 0 #CBCA7B; }
[data-theme="dark"] .fe-pricing-table thead tr:first-child td:nth-child(3) { box-shadow: inset 2px 0 0 #CBCA7B, inset -2px 0 0 #CBCA7B, inset 0 2px 0 #CBCA7B; }
[data-theme="dark"] .fe-pricing-table tbody tr:last-child td:nth-child(3) { box-shadow: inset 2px 0 0 #CBCA7B, inset -2px 0 0 #CBCA7B, inset 0 -2px 0 #CBCA7B; }

/* Feature group heading rows in pricing table */
.fe-pricing-group-row td {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8B8A3D;
  padding: 0.75rem 1rem 0.4rem !important;
  background: rgba(139,138,61,0.06) !important;
  border-bottom: 1px solid rgba(139,138,61,0.2) !important;
}
[data-theme="dark"] .fe-pricing-group-row td {
  color: #CBCA7B;
  background: rgba(203,202,123,0.08) !important;
  border-bottom-color: rgba(203,202,123,0.25) !important;
}

/* Feature description column: narrower + allows line breaks */
.fe-pricing-feature-col {
  width: 40%;
  white-space: normal;
  line-height: 1.4;
}
.fe-pricing-table th, .fe-pricing-table td {
  white-space: normal;
}

/* Commercial pricing table header row — sage */
.fe-pricing-thead--commercial tr > td {
  background: rgba(var(--fe-tone-sage-rgb), 0.18);
  border-bottom: 2px solid rgba(var(--fe-tone-sage-rgb), 0.5) !important;
}
.fe-pricing-hero-icon--commercial {
  width: 64px;
  height: 64px;
  min-width: 64px;
  background: var(--fe-tone-earth);
  color: #fff;
  font-size: 2rem;
}
[data-theme="dark"] .fe-pricing-thead--commercial tr > td {
  background: rgba(var(--fe-tone-sage-rgb), 0.22);
  border-bottom-color: rgba(var(--fe-tone-sage-rgb), 0.5) !important;
}
[data-theme="dark"] .fe-pricing-hero-icon--commercial {
  background: var(--fe-tone-earth);
  color: #fff;
}
.fe-pricing-hero-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(var(--fe-tone-sage-rgb), 0.22);
  color: var(--fe-tone-sage-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}
.fe-pricing-hero-eyebrow {
  color: var(--fe-tone-earth-dark);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}
.fe-pricing-hero-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.4rem;
}
.fe-pricing-hero-desc {
  color: var(--fe-text);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Feature list with green check circles */
.fe-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--fe-text);
  line-height: 1.4;
}

/* Column flow variant: items fill column-by-column instead of row-by-row */
.fe-feature-list--columns {
  column-count: 1;
  column-gap: 2.5rem;
}
.fe-feature-list--columns li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
  .fe-feature-list--columns { column-count: 2; }
}
@media (min-width: 992px) {
  .fe-feature-list--columns { column-count: 3; }
}

/* Two-line entries: bold title + muted description */
.fe-feature-list--twoline li { margin-bottom: 1.75rem; }
.fe-feature-list--twoline li:last-child { margin-bottom: 0; }
.fe-feature-title {
  font-weight: 700;
  color: #1a1a1a;
  font-size: 1.05rem;
  line-height: 1.3;
}
.fe-feature-desc {
  display: block;
  color: var(--fe-text);
  font-size: 0.95rem;
  line-height: 1.45;
  margin-top: 0.25rem;
}
[data-theme="dark"] .fe-feature-title { color: #fff; }
[data-theme="dark"] .fe-feature-desc { color: rgba(255,255,255,0.65); }
.fe-feature-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: #8B8A3D;
  color: #fff;
  font-size: 1rem;
  margin-top: 1px;
}
[data-theme="dark"] .fe-feature-list li { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .fe-feature-check { background: #CBCA7B; color: #000; }

/* Red X in the same circle style */
.fe-feature-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: #dc3545;
  color: #fff;
  font-size: 1rem;
}
[data-theme="dark"] .fe-feature-x { background: #b02a37; color: #fff; }

/* Inline help button (question mark) */
.fe-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  min-width: 24px;
  background: transparent;
  border: 0;
  padding: 0;
  color: rgba(0,0,0,0.3);
  cursor: help;
  font-size: 1.1rem;
  line-height: 1;
  vertical-align: middle;
  transition: color 0.15s ease;
}
.fe-help-btn:hover, .fe-help-btn:focus {
  color: #6b6a2e;
  outline: none;
}
[data-theme="dark"] .fe-help-btn { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .fe-help-btn:hover, [data-theme="dark"] .fe-help-btn:focus { color: #CBCA7B; }

/* Pricing toggle button-group */
.fe-pricing-toggle {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--fe-border);
  background: #fff;
}
.fe-pricing-toggle .btn {
  padding: 0.85rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  border: 0;
  border-radius: 0 !important;
  color: #555;
  background: transparent;
  transition: background 0.2s, color 0.2s;
}
.fe-pricing-toggle--sm .btn {
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.fe-pricing-toggle .btn:hover { background: rgba(139,138,61,0.06); color: #333; }
.fe-pricing-toggle .btn.active {
  background: #8B8A3D;
  color: #fff;
}
[data-theme="dark"] .fe-pricing-toggle { background: var(--fe-bg-subtle); border-color: var(--fe-border); }
[data-theme="dark"] .fe-pricing-toggle .btn { color: rgba(255,255,255,0.7); }
[data-theme="dark"] .fe-pricing-toggle .btn:hover { background: rgba(203,202,123,0.1); color: #fff; }
[data-theme="dark"] .fe-pricing-toggle .btn.active { background: #CBCA7B; color: #000; }

/* Section backgrounds (full-width bands) */
.fe-pricing-section { padding: 3.5rem 0; }
.fe-pricing-section--private {
  background: #fafaf8;
}
.fe-pricing-section--commercial {
  background: #f5f5f2;
}
[data-theme="dark"] .fe-pricing-section--private {
  background: rgba(255,255,255,0.02);
}
[data-theme="dark"] .fe-pricing-section--commercial {
  background: rgba(255,255,255,0.04);
}

/* Section divider */
.fe-pricing-divider {
  position: relative;
  margin: 0;
}
.fe-pricing-divider-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fe-pricing-divider-inner::before,
.fe-pricing-divider-inner::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--fe-border);
}
.fe-pricing-divider-inner span {
  padding: 0 1rem;
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #6b6a2e;
  text-transform: uppercase;
}

/* Dark mode */
[data-theme="dark"] .fe-pricing-hero--individual {
  border-color: rgba(var(--fe-tone-earth-rgb), 0.4);
}
[data-theme="dark"] .fe-pricing-hero-icon { background: rgba(var(--fe-tone-sage-rgb), 0.25); color: var(--fe-tone-sage); }
[data-theme="dark"] .fe-pricing-hero-eyebrow { color: var(--fe-tone-earth); }
[data-theme="dark"] .fe-pricing-hero-title { color: #fff; }
[data-theme="dark"] .fe-pricing-divider-inner span { color: #CBCA7B; }
[data-theme="dark"] .fe-pricing-divider-inner::before,
[data-theme="dark"] .fe-pricing-divider-inner::after { background: rgba(255,255,255,0.1); }

/* Danger zone card (profile) */
.fe-page .fe-section .card.fe-danger-zone {
  border: 1px solid #e8c4c4;
}
.fe-page .fe-section .card.fe-danger-zone .card-header {
  background: #fbeeee;
  border-bottom: 1px solid #e8c4c4;
}
.fe-page .fe-section .card.fe-danger-zone .card-title { color: #b02a37; }
.fe-danger-zone-row {
  display: flex;
  align-items: center;
  padding: 1rem 1.4rem;
}
.fe-danger-zone-row + .fe-danger-zone-row { border-top: 1px solid var(--fe-border); }

/* Danger zone in dark mode */
[data-theme="dark"] .fe-page .fe-section .card.fe-danger-zone {
  background: rgba(176,42,55,0.08);
  border-color: rgba(176,42,55,0.4);
}
[data-theme="dark"] .fe-page .fe-section .card.fe-danger-zone .card-header {
  background: rgba(176,42,55,0.15);
  border-bottom-color: rgba(176,42,55,0.4);
}
[data-theme="dark"] .fe-page .fe-section .card.fe-danger-zone .card-title { color: #ff8a95; }
[data-theme="dark"] .fe-danger-zone-row + .fe-danger-zone-row { border-top-color: rgba(176,42,55,0.25); }

/* Password strength meter (used in profile password modal) */
.fe-pw-strength-bar {
  width: 100%;
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.fe-pw-strength-fill {
  height: 100%;
  width: 0;
  background: transparent;
  transition: width 0.25s ease, background 0.25s ease;
}
.fe-pw-strength-label {
  font-size: 0.8rem;
  font-weight: 600;
}

/* Match Frontend modal content to rest of app */
.fe-page .modal-content {
  border-radius: 1rem;
  border: 1px solid var(--fe-border);
}
.fe-page .modal-header {
  border-bottom: 1px solid var(--fe-border);
}
.fe-page .modal-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #8B8A3D;
}
.fe-page .modal .btn-primary {
  background: #8B8A3D;
  border-color: #8B8A3D;
}
.fe-page .modal .btn-primary:hover,
.fe-page .modal .btn-primary:focus {
  background: #6b6a2e;
  border-color: #6b6a2e;
}

/* Warm-beige secondary button (matches backend.css) */
.fe-page .btn-secondary {
  background-color: #dcdcd4;
  border-color: #b8b8ac;
  color: #333;
  font-weight: 600;
}
.fe-page .btn-secondary:hover,
.fe-page .btn-secondary:focus {
  background-color: #c9c9bf;
  border-color: #a5a597;
  color: #222;
}

/* Ghost-secondary: link-like by default, pill on hover (matches backend.css) */
.fe-page .btn-ghost-secondary {
  background: transparent;
  border-color: transparent;
  color: #999;
  font-weight: 500;
}
.fe-page .btn-ghost-secondary:hover,
.fe-page .btn-ghost-secondary:focus {
  background-color: #e8e8e3;
  border-color: #e8e8e3;
  color: #555;
}


/* ========================================================================
   TONE PALETTE — utility classes
   Use as: <div class="fe-tone-mustard-bg">…</div>
           <div class="fe-tone-sage-soft">…</div>
           <p class="fe-tone-copper-text">…</p>
   Each tone has 4 variants: -bg (solid filled),
                             -soft (translucent tint),
                             -text (foreground colour),
                             -border (border colour).
   ======================================================================== */
.fe-tone-mustard-bg     { background: var(--fe-tone-mustard); color: #fff; }
.fe-tone-mustard-soft   { background: rgba(var(--fe-tone-mustard-rgb), 0.18); color: var(--fe-tone-mustard-dark); }
.fe-tone-mustard-text   { color: var(--fe-tone-mustard-dark); }
.fe-tone-mustard-border { border-color: var(--fe-tone-mustard) !important; }

.fe-tone-sage-bg        { background: var(--fe-tone-sage); color: #fff; }
.fe-tone-sage-soft      { background: rgba(var(--fe-tone-sage-rgb), 0.18); color: var(--fe-tone-sage-dark); }
.fe-tone-sage-text      { color: var(--fe-tone-sage-dark); }
.fe-tone-sage-border    { border-color: var(--fe-tone-sage) !important; }

.fe-tone-earth-bg       { background: var(--fe-tone-earth); color: #fff; }
.fe-tone-earth-soft     { background: rgba(var(--fe-tone-sage-rgb), 0.18); color: var(--fe-tone-sage-dark); }
.fe-tone-earth-text     { color: var(--fe-tone-sage-dark); }
.fe-tone-earth-border   { border-color: var(--fe-tone-earth) !important; }

.fe-tone-olive-bg       { background: var(--fe-tone-olive); color: #fff; }
.fe-tone-olive-soft     { background: rgba(var(--fe-tone-olive-rgb), 0.18); color: var(--fe-tone-olive-dark); }
.fe-tone-olive-text     { color: var(--fe-tone-olive-dark); }
.fe-tone-olive-border   { border-color: var(--fe-tone-olive) !important; }

.fe-tone-champagne-bg     { background: var(--fe-tone-champagne); color: #333; }
.fe-tone-champagne-soft   { background: rgba(var(--fe-tone-champagne-rgb), 0.25); color: var(--fe-tone-champagne-dark); }
.fe-tone-champagne-text   { color: var(--fe-tone-champagne-dark); }
.fe-tone-champagne-border { border-color: var(--fe-tone-champagne) !important; }

.fe-tone-copper-bg      { background: var(--fe-tone-copper); color: #fff; }
.fe-tone-copper-soft    { background: rgba(var(--fe-tone-copper-rgb), 0.18); color: var(--fe-tone-copper-dark); }
.fe-tone-copper-text    { color: var(--fe-tone-copper-dark); }
.fe-tone-copper-border  { border-color: var(--fe-tone-copper) !important; }

/* Dark mode: lift the soft variants so the tint stays visible
   on dark backgrounds, and use the base colour for legible text */
[data-theme="dark"] .fe-tone-mustard-soft   { background: rgba(var(--fe-tone-mustard-rgb), 0.25);   color: var(--fe-tone-mustard); }
[data-theme="dark"] .fe-tone-mustard-text   { color: var(--fe-tone-mustard); }
[data-theme="dark"] .fe-tone-sage-soft      { background: rgba(var(--fe-tone-sage-rgb), 0.22);      color: var(--fe-tone-sage); }
[data-theme="dark"] .fe-tone-sage-text      { color: var(--fe-tone-sage); }
[data-theme="dark"] .fe-tone-earth-soft     { background: rgba(var(--fe-tone-sage-rgb), 0.22);     color: var(--fe-tone-sage); }
[data-theme="dark"] .fe-tone-earth-text     { color: var(--fe-tone-sage); }
[data-theme="dark"] .fe-tone-olive-soft     { background: rgba(var(--fe-tone-olive-rgb), 0.25);     color: var(--fe-tone-olive); }
[data-theme="dark"] .fe-tone-olive-text     { color: var(--fe-tone-olive); }
[data-theme="dark"] .fe-tone-champagne-soft { background: rgba(var(--fe-tone-champagne-rgb), 0.22); color: var(--fe-tone-champagne); }
[data-theme="dark"] .fe-tone-champagne-text { color: var(--fe-tone-champagne); }
[data-theme="dark"] .fe-tone-copper-soft    { background: rgba(var(--fe-tone-copper-rgb), 0.25);    color: var(--fe-tone-copper); }
[data-theme="dark"] .fe-tone-copper-text    { color: var(--fe-tone-copper); }


/* ========================================================================
   Frontend alerts — visible on earth-tone page backgrounds
   ======================================================================== */
.fe-page .alert {
  border-radius: 6px;
  padding: 1rem 1.25rem;
  font-weight: 500;
  border: 0;
  border-left: 6px solid transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.fe-page .alert-success {
  background: rgba(var(--fe-tone-sage-rgb), 0.20);
  border-left-color: var(--fe-tone-sage);
  color: var(--fe-tone-sage-dark);
}
.fe-page .alert-danger {
  background: rgba(var(--fe-tone-copper-rgb), 0.20);
  border-left-color: var(--fe-tone-copper);
  color: var(--fe-tone-copper-dark);
}
.fe-page .alert-warning {
  background: rgba(var(--fe-tone-mustard-rgb), 0.25);
  border-left-color: var(--fe-tone-mustard);
  color: var(--fe-tone-mustard-dark);
}
.fe-page .alert-info {
  background: rgba(var(--fe-tone-earth-rgb), 0.20);
  border-left-color: var(--fe-tone-earth);
  color: var(--fe-tone-earth-dark);
}

[data-theme="dark"] .fe-page .alert-success {
  background: rgba(var(--fe-tone-sage-rgb), 0.25);
  color: var(--fe-tone-sage);
}
[data-theme="dark"] .fe-page .alert-danger {
  background: rgba(var(--fe-tone-copper-rgb), 0.25);
  color: var(--fe-tone-copper);
}
[data-theme="dark"] .fe-page .alert-warning {
  background: rgba(var(--fe-tone-mustard-rgb), 0.30);
  color: var(--fe-tone-mustard);
}
[data-theme="dark"] .fe-page .alert-info {
  background: rgba(var(--fe-tone-earth-rgb), 0.25);
  color: var(--fe-tone-earth);
}


/* ========================================================================
   Hidden-observation indicator (top-right, frosted-glass backdrop)
   ======================================================================== */
.fe-hidden-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
          backdrop-filter: blur(8px) saturate(140%);
  color: #475569;
  font-size: 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  z-index: 2;
  pointer-events: none;
}
.fe-hidden-badge i { line-height: 1; }

/* list-row variant: slightly smaller on the compact thumbnail */
.fe-list-thumb .fe-hidden-badge {
  top: 6px; right: 6px;
  width: 24px; height: 24px;
  font-size: 14px;
}

/* ------------------ Organizer apply form ------------------ */
.fe-apply-section-title {
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fe-accent, #8B8A3D);
  margin-bottom: 1rem;
}
.fe-apply-section-title i { font-size: 1rem; }
.fe-apply-steps .fe-apply-step-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  margin-right: 12px;
  border-radius: 50%;
  background: rgba(139,138,61,0.12);
  color: #6b6a2e;
  font-size: 1.1rem;
}
.form-label.required::after {
  content: " *";
  color: #d63939;
}

/* ------------------ Organizer apply — wizard ------------------ */
.fe-wizard-steps {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
  flex-wrap: wrap;
}
.fe-wizard-steps li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  font-size: 0.875rem;
  color: #6a6b72;
  cursor: default;
  flex: 1 1 auto;
  min-width: 0;
}
.fe-wizard-steps li .fe-wizard-step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #eceadf;
  color: #6b6a2e;
  font-size: 0.8rem;
  font-weight: 600;
}
.fe-wizard-steps li .fe-wizard-step-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fe-wizard-steps li.is-active {
  border-color: var(--fe-accent, #8B8A3D);
  color: #3a3b1a;
  background: #fffef5;
  font-weight: 600;
}
.fe-wizard-steps li.is-active .fe-wizard-step-num {
  background: var(--fe-accent, #8B8A3D);
  color: #fff;
}
.fe-wizard-steps li.is-done {
  border-color: rgba(139,138,61,0.35);
  color: #6b6a2e;
  cursor: pointer;
}
.fe-wizard-steps li.is-done .fe-wizard-step-num::before {
  content: "✓";
  font-size: 0.9rem;
}
.fe-wizard-steps li.is-done .fe-wizard-step-num {
  background: rgba(139,138,61,0.18);
  color: #6b6a2e;
}
.fe-wizard-steps li.is-done .fe-wizard-step-num > * { display: none; }

.fe-wizard-step { display: none; }
.fe-wizard-step.is-active { display: block; }

.fe-apply-stars {
  display: inline-flex;
  gap: 1px;
  font-size: 1.05rem;
  line-height: 1;
}

[data-theme="dark"] .fe-wizard-steps li {
  background: #1c1f26;
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}
[data-theme="dark"] .fe-wizard-steps li.is-active {
  background: #23251a;
  color: #fff;
}

/* Tabler steps in frontend: accent color + kill the stray outer border-left
   that Tabler's "steps with headings" variant re-applies to every .steps. */
.fe-page .steps {
  --tblr-steps-color: var(--fe-accent, #8B8A3D);
  border-left: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}
.fe-page .steps-counter .step-item::before {
  background: var(--fe-accent, #8B8A3D) !important;
  color: #fff;
  font-weight: 700;
}
/* Upcoming steps: solid grey circle with white number,
   softer connector line so circle clearly covers it. */
.fe-page .steps .step-item.active ~ .step-item::before {
  background: #adafb5 !important;
  color: #fff !important;
}
.fe-page .steps .step-item.active ~ .step-item::after {
  background: #e2e4e8 !important;
}
.fe-page .steps .step-item.active ~ .step-item {
  color: #8b8c92;
}

/* Step headlines: match frontend section titles and align icon */
.fe-apply-step-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.fe-apply-step-title i {
  color: var(--fe-accent, #8B8A3D);
  font-size: 0.8em;
}

/* Wizard — success card */
.fe-apply-done {
  border: 1px solid rgba(139,138,61,0.25);
  background:
    radial-gradient(circle at top, rgba(139,138,61,0.08), transparent 60%),
    #fff;
  overflow: hidden;
}
.fe-apply-done-icon {
  font-size: 7rem;
  line-height: 1;
  color: var(--fe-accent, #8B8A3D);
  margin-bottom: 1.25rem;
  display: inline-flex;
  filter: drop-shadow(0 6px 20px rgba(139,138,61,0.25));
  animation: fe-apply-pop 0.5s ease-out;
}
@keyframes fe-apply-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.fe-apply-done-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  margin-right: 0.9rem;
  border-radius: 50%;
  background: rgba(139,138,61,0.14);
  color: var(--fe-accent, #8B8A3D);
  font-size: 1.1rem;
}
[data-theme="dark"] .fe-apply-done {
  background:
    radial-gradient(circle at top, rgba(203,202,123,0.12), transparent 60%),
    #1c1f26;
  border-color: rgba(203,202,123,0.18);
}

/* Profile — pending organizer registration card */
.fe-pending-card {
  border: 1px solid rgba(214,162,41,0.35);
  background: rgba(255,205,87,0.08);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}
.fe-pending-badge {
  flex-shrink: 0;
  width: 2.25rem; height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(214,162,41,0.2);
  color: #b0761e;
  font-size: 1.1rem;
}
[data-theme="dark"] .fe-pending-card {
  background: rgba(203,162,41,0.08);
}

/* --- Identification suggestion list ---------------------------------------
 * Shown inside an .fe-imprint-section on observation detail pages that are
 * still waiting for community classification. Each row is a single
 * suggestion; decided (non-pending) items are faded to keep focus on the
 * open ones.
 * ----------------------------------------------------------------------- */
.fe-suggest-list { display: flex; flex-direction: column; gap: .75rem; }
.fe-suggest-item {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: rgba(var(--fe-tone-sage-rgb), 0.08);
    border: 1px solid rgba(var(--fe-tone-sage-rgb), 0.25);
    border-radius: .75rem;
    padding: 1rem 1.25rem;
}
.fe-suggest-actions {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    gap: .4rem;
}
.fe-suggest-main { flex: 1 1 auto; min-width: 0; }
.fe-suggest-item--decided { opacity: 0.65; }
[data-theme="dark"] .fe-suggest-item {
    background: rgba(var(--fe-tone-sage-rgb), 0.14);
    border-color: rgba(var(--fe-tone-sage-rgb), 0.35);
}

.fe-suggest-thumb {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    object-fit: cover;
    border-radius: .5rem;
    background: rgba(var(--fe-tone-sage-rgb), 0.12);
}
.fe-suggest-title {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fe-accent);
    line-height: 1.25;
}

/* --- Circular icon-only action button (used in the suggestion list) --- */
.fe-btn-icon {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    border: none;
    outline: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
    background: rgba(var(--fe-tone-copper-rgb), 0.9);
    color: #fff;
}
.fe-btn-icon:hover { filter: brightness(1.1); transform: scale(1.05); }
.fe-btn-icon:focus,
.fe-btn-icon:focus-visible,
.fe-btn-icon:active {
    outline: none;
    box-shadow: none;
}
.fe-btn-icon--accent {
    background: var(--fe-accent);
    color: #000;
}


/* =============================================================
   NEWS PAGES
   ============================================================= */

/* ---- List card ---- */
.fe-news-card {
    position: relative;
    display: flex;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 18px rgba(0,0,0,0.03);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    color: inherit;
}
.fe-news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 10px 28px rgba(0,0,0,0.08);
}
.fe-news-card-stripe {
    width: 6px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.08);
    transition: background 0.18s ease;
}
.fe-news-card:hover .fe-news-card-stripe {
    background: var(--fe-accent);
}
.fe-news-card--unread .fe-news-card-stripe {
    background: var(--fe-accent);
}
.fe-news-card-body {
    flex: 1;
    padding: 1.25rem 1.5rem;
}
.fe-news-card-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.25;
    color: #222;
}
.fe-news-card-meta {
    font-size: 0.85rem;
    color: #8a8a8a;
}
.fe-news-card-excerpt {
    color: #555;
    line-height: 1.55;
    font-size: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fe-news-card-cta {
    color: var(--fe-accent);
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
}
.fe-news-card:hover .fe-news-card-cta i {
    transform: translateX(3px);
    transition: transform 0.18s ease;
}

/* ---- Detail article ---- */
.fe-news-article {
    background: #fff;
    border-radius: 14px;
    padding: 2rem 2.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 18px rgba(0,0,0,0.03);
}
.fe-news-article-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.2;
    color: #222;
    margin-bottom: 1rem;
}
.fe-news-article .s-markdown {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #333;
}
.fe-news-article .s-markdown h1,
.fe-news-article .s-markdown h2,
.fe-news-article .s-markdown h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    margin-top: 1.6rem;
    margin-bottom: 0.6rem;
    color: #222;
}
.fe-news-article .s-markdown h1 { font-size: 1.6rem; }
.fe-news-article .s-markdown h2 { font-size: 1.35rem; }
.fe-news-article .s-markdown h3 { font-size: 1.15rem; }
.fe-news-article .s-markdown p { margin-bottom: 1rem; }
.fe-news-article .s-markdown a { color: var(--fe-accent); }
.fe-news-article .s-markdown blockquote {
    border-left: 3px solid var(--fe-accent);
    padding: 0.25rem 1rem;
    color: #555;
    margin: 1rem 0;
    background: rgba(0,0,0,0.02);
}
.fe-news-article .s-markdown ul,
.fe-news-article .s-markdown ol {
    padding-left: 1.4rem;
    margin-bottom: 1rem;
}

/* ---- Sidebar ---- */
.fe-news-sidebar {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.fe-news-meta-card {
    background: #fff;
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 18px rgba(0,0,0,0.03);
}
.fe-news-meta-card-heading {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 0.75rem;
}
.fe-news-meta-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    color: #444;
    font-size: 0.95rem;
}
.fe-news-meta-row i {
    color: var(--fe-accent);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.fe-news-nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    color: #333;
    text-decoration: none;
    background: rgba(0,0,0,0.03);
    transition: background 0.15s ease, color 0.15s ease;
}
.fe-news-nav-link:hover {
    background: var(--fe-accent);
    color: #000;
}
.fe-news-nav-link--prev i { margin-right: 0.2rem; }
.fe-news-nav-link--next { justify-content: space-between; }
.fe-news-nav-link-label {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8a8a8a;
    display: block;
}
.fe-news-nav-link:hover .fe-news-nav-link-label { color: rgba(0,0,0,0.55); }
.fe-news-nav-link-title {
    font-weight: 600;
    font-size: 0.92rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fe-news-nav-empty {
    color: #aaa;
    font-size: 0.9rem;
    padding: 0.4rem 0;
}

@media (max-width: 991px) {
    .fe-news-sidebar { position: static; }
}