/* =========================
   FEELLIN SHARED LIGHT THEME
   Minimal shadows, soft borders, purple accent
   ========================= */

/* ===== Variables ===== */
:root {
  --fe-brand:            #6D4AFE;
  --fe-brand-600:        #5a3dfa;
  --fe-brand-50:         #f5f2ff;

  --fe-ink:              #0f172a;
  --fe-ink-muted:        #475569;
  --fe-hint:             #697386;

  --fe-bg-1:             #ffffff;
  --fe-bg-2:             #fbfbff;
  --fe-surface:          #ffffff;
  --fe-surface-subtle:   #f6f7fc;
  --fe-surface-tint:     #f3f4ff;

  --fe-border:           #e6e8f2;
  --fe-border-strong:    #dfe2ef;

  --fe-radius:           16px;
  --fe-radius-sm:        12px;
  --fe-radius-lg:        20px;
}

/* ===== Base ===== */
html, body {
  color-scheme: light;
  background: linear-gradient(180deg, #f9f6ff 0%, #ffffff 100%);
  color: var(--fe-ink);
  font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

button, .btn, a {
    font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.container { max-width: 1100px; margin-inline: auto; padding: 0 16px }

/* =========================
   Appbar
   ========================= */
.appbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, #ffffff 80%, transparent);
  border-bottom: 1px solid var(--fe-border);
}
.appbar .inner { height: 56px; display: flex; align-items: center; gap: 10px; justify-content: space-between }
.appbar .brand { display: flex; align-items: center; gap: 10px }
.appbar .logo { width: 28px; height: 28px }
.wordmark { font-weight: 700; font-size: 18px; letter-spacing: .2px; color: var(--fe-ink) }
.app-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.action-link {
  background: none; border: 0; color: var(--fe-ink-muted);
  font-size: 11px; padding: 0 0 2px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer;
  border-bottom: 1px solid transparent;
  font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.action-link:hover { color: var(--fe-ink); border-bottom-color: #cbd5e1 }

/* =========================
   Hero / Section header
   ========================= */
.brand { display: flex; align-items: center; gap: 10px }
.fe-hero {
  background: linear-gradient(180deg, var(--fe-surface-subtle), #fff 85%);
  border-bottom: 1px solid var(--fe-border);
}
.fe-hero h1 { color: var(--fe-ink); font-size: 28px; letter-spacing: .2px }

/* Badge / pill */
.fe-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--fe-surface-tint);
  color: #3b2ab8;
  border: 1px solid var(--fe-border);
  padding: 6px 10px; border-radius: 999px; font-size: 12px;
}

/* =========================
   Grid
   ========================= */
.fe-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .fe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fe-grid { grid-template-columns: repeat(3, 1fr); } }

/* =========================
   Cards
   ========================= */
.fe-card {
  border-radius: 20px;
  padding: 16px;
  border: 1px solid var(--fe-border);
  box-shadow: none;
  background: #ffffff;
}

/* =========================
   Topnav
   ========================= */
.topnav { margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.topnav .fe-btn {
  --_bg: #fff;
  border: 1px solid var(--fe-border);
  background: var(--_bg);
  color: var(--fe-ink);
  padding: 8px 14px; border-radius: 999px;
  font-weight: 600; font-size: 13px; text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.topnav .fe-btn:hover { border-color: var(--fe-border-strong) }
.topnav .fe-btn.active {
  --_bg: var(--fe-brand);
  color: #fff; border-color: var(--fe-brand);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
}

/* ===== Inputs ===== */
.fe-card input[type="text"],
.fe-card input[type="email"],
.fe-card input:not([type]) {
  width: 100%;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--fe-border);
  padding: 8px 12px;
  color: var(--fe-ink);
  outline: none;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fe-card input:focus {
  border-color: var(--fe-brand);
  box-shadow: 0 0 0 3px rgba(109,74,254,.18);
}

.form-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .form-two { grid-template-columns: 1fr }
}

/* =========================
   Cards & KPI’s
   ========================= */
.kpis { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px }
.kpi, .fe-card {
  background: linear-gradient(180deg, #fff, var(--fe-bg-2));
  border: 1px solid var(--fe-border);
  border-radius: var(--fe-radius);
  padding: 14px;
}
.kpi .title { color: var(--fe-hint); font-size: 12px; margin-bottom: 6px }
.kpi .value { font-weight: 700; font-size: 28px; color: #5d176a; letter-spacing: .2px }
.hint { color: var(--fe-hint); font-size: 13px }
.chart { min-height: 240px }

/* =========================
   Tour (shared)
   ========================= */
.tl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.35);
  backdrop-filter: blur(3px); /* blur alleen hier */
  z-index: 2147483640 !important;
}
.tl-pop {
  position: fixed;
  z-index: 2147483641 !important;
  background: #ffffff;
  border: 1px solid var(--fe-border);
  border-radius: 12px;
  padding: 12px;
  max-width: 360px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.tl-pop h3 { margin: 0 0 6px; font-size: 16px; color: var(--fe-ink) }
.tl-pop p { margin: 0 10px 10px 0; color: var(--fe-ink-muted); font-size: 14px; line-height: 1.4 }
.tl-pop .actions { display: flex; gap: 8px; justify-content: flex-end }
.tl-btn { border: 1px solid var(--fe-border); background: #fff; color: var(--fe-ink); border-radius: 10px; padding: 6px 10px; cursor: pointer }
.tl-btn.primary { background: var(--fe-brand); border-color: var(--fe-brand); color: #fff }

/* Focus highlight altijd boven alles */
.tl-focus {
  position: relative;
  z-index: 2147483643 !important; /* nog hoger dan overlay/pop */
  outline: 2px solid var(--fe-brand);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--fe-brand) 18%, transparent);
  border-radius: 12px;
  isolation: isolate;
}

/* =========================
   Footer
   ========================= */
.fe-footer { background: #fff; border-top: 1px solid var(--fe-border); margin-top: 32px }
.fe-footer .inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px }
.fe-footer .brand { display: flex; align-items: center; gap: 10px; color: var(--fe-ink-muted); font-size: 13px }
.fe-footer .brand .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--fe-brand); display: inline-block; margin-right: 6px; opacity: .9 }
.fe-footer .links { display: flex; flex-wrap: wrap; gap: 14px }
.fe-footer .links a { color: var(--fe-ink-muted); font-size: 13px; text-decoration: none; border-bottom: 1px solid transparent }
.fe-footer .links a:hover { color: var(--fe-ink); border-bottom-color: #cbd5e1 }
@media (max-width:640px) {
  .fe-footer .inner { flex-direction: column; align-items: flex-start; padding: 14px 0 }
  .fe-footer .links { gap: 10px }
  .kpis { grid-template-columns: repeat(2,minmax(0,1fr)) }
}

/* =========================
   AI-Actieboard
   ========================= */
.ai-board { margin-top: 14px; border-top: 1px dashed var(--fe-border); padding-top: 12px }
.ai-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.ai-headline { font-weight: 700 }
.ai-conf { display: flex; align-items: center; gap: 10px }
.ai-ring {
  --pct: 0; width: 34px; height: 34px; border-radius: 50%;
  background: conic-gradient(var(--fe-brand) calc(var(--pct)*1%), #e5e7eb 0);
  position: relative;
}
.ai-ring::after { content: attr(data-pct) "%"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; color: #111 }
.ai-why { border: 1px solid var(--fe-border); background: #fff; color: var(--fe-ink); border-radius: 10px; padding: 6px 10px; font-size: 12px }
.ai-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px }
.ai-chip { border: 1px solid var(--fe-border); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12px; display: inline-flex; gap: 6px; align-items: center }
.ai-chip.bump { animation: aiPulse .9s ease }
@keyframes aiPulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--fe-brand) 25%,transparent)} 100%{box-shadow:0 0 0 12px rgba(0,0,0,0)} }
.ai-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px }
.ai-card { border: 1px solid var(--fe-border); border-radius: 12px; padding: 10px; background: #fff }
.ai-card h4 { margin: 0 0 6px; font-size: 14px }
.ai-card ul { margin: 0; padding-left: 18px }
.ai-actions { display: grid; gap: 10px; margin-top: 10px }
.ai-actions .row { display: flex; gap: 8px; align-items: flex-start }
.ai-actions input[type="checkbox"] { margin-top: 2px }
.ai-copy { display: grid; gap: 8px; margin-top: 10px }
.ai-copy .btn { border: 1px solid var(--fe-border); background: #fff; border-radius: 10px; padding: 6px 10px; font-size: 12px; text-align: left }
.ai-ask { margin-top: 10px; display: grid; gap: 8px }
.ai-ask .bar { display: flex; gap: 8px }
.ai-ask input { flex: 1; border: 1px solid var(--fe-border); border-radius: 10px; padding: 8px }
.ai-ask button { border: 1px solid var(--fe-border); background: #fff; border-radius: 10px; padding: 8px 12px }
.ai-chat { border: 1px solid var(--fe-border); border-radius: 10px; padding: 8px; max-height: 180px; overflow: auto; background: #fafafa }
.ai-whatif { margin-top: 10px; display: grid; gap: 8px }
.ai-whatif .bar { display: flex; gap: 10px; align-items: center }
.ai-foot { margin-top: 10px; display: flex; gap: 8px; align-items: center; color: var(--fe-hint); font-size: 12px }
.ai-badge { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--fe-border); background: #fff; border-radius: 999px; padding: 3px 8px }

/* =========================
   Member Cards & Inputs (Teamleader)
   ========================= */
.badge-role { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; border: 1px solid #e0e7ff }
.member-card {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--fe-border); margin: 8px 0;
}
.member-card .meta { color: var(--fe-ink-muted); font-size: 12px }
.actions { display: flex; gap: 8px; flex-wrap: wrap }
.member-card .actions .fe-btn {
  height: 36px; padding: 0 12px; border-radius: 12px;
  background: #fff; color: var(--fe-ink);
  border: 1px solid #e5e7eb;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.member-card .actions .fe-btn:hover { background: #f8fafc; border-color: #e2e8f0; }
.member-card .actions .fe-btn:active { transform: translateY(1px) }
.member-card .actions .btn-invite {
  background: #6D4AFE; border-color: #6D4AFE; color: #fff;
}
.member-card .actions .btn-invite:hover { filter: brightness(.96) }
.member-card .actions .fe-btn.danger {
  background: #fff; color: #b91c1c; border-color: #fecaca;
}
.member-card .actions .fe-btn.danger:hover { background: #fef2f2 }

/* Compacte icon-only variant voor mobiel */
@media (max-width: 720px) {
  .member-card .actions { gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch }
  .member-card .actions .fe-btn {
    min-width: auto; padding: 8px; border-radius: 12px; gap: 0;
    font-size: 0; line-height: 0;
  }
  .member-card .actions .fe-btn i { font-size: 16px; margin: 0 }
  .member-card .actions .btn-invite .bar { display: none !important }
}

/* =========================
   Toasts
   ========================= */
.fe-toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 9999 }
.fe-toast {
  background: #fff; color: var(--fe-ink); border: 1px solid var(--fe-border);
  border-radius: 12px; padding: 10px 12px; font-size: 14px;
  display: flex; align-items: center; gap: 8px;
}
.fe-toast.ok { border-color: #86efac }
.fe-toast.err { border-color: #fecaca }

/* =========================
   KPI
   ========================= */
.kpi .value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #5d176a;
}
.kpi .title {
  font-size: 0.9rem;
  color: #555;
}

/* === Appbar action-links (modern style) === */
.app-actions .action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  background: rgba(99,102,241,0.08); /* subtiele achtergrond */
  transition: all 0.2s ease;
}

.app-actions .action-link i {
  font-size: 14px;
  color: #6366f1; /* paars icoon */
}

.app-actions .action-link:hover {
  background: rgba(93,23,106,0.12); /* jouw brand tint */
  color: #111827;
}

.app-actions .action-link:hover i {
  color: #5D176A;
}

/* 📱 Op mobiel: alleen icoon tonen */
@media (max-width: 640px) {
  .app-actions .action-link {
    padding: 6px;
    justify-content: center;
  }
  .app-actions .action-link span {
    display: none;
  }
}

  .tl-overlay{
    position:fixed; inset:0;
    background:rgba(2,6,23,.24);        /* iets lichter voor leesbaarheid */
    backdrop-filter:blur(1.5px);
    z-index:4000;
  }
  .tl-pop{
    position:fixed; z-index:4002;
    max-width:min(92vw,520px);
    border-radius:16px;
    box-shadow:0 20px 70px rgba(2,6,23,.18);
  }
  .tl-focus{
    position:relative !important;
    z-index:4001 !important;             /* zorgt dat nav boven de overlay ligt */
    outline:3px solid #7c3aed;
    border-radius:16px;
  }
/* Zorg dat donut charts altijd genoeg ruimte krijgen */
/* Forceer de containers zelf */
#kpiFillChart,
#kpiAvgChart {
  height: 200px !important;      /* container blijft 200px */
  min-height: 200px !important;
  max-height: 200px !important;
}

/* Zorg dat charts altijd volledig zichtbaar zijn */
.chart {
  min-height: 320px;     /* genoeg ruimte */
  height: 320px;         /* gefixeerd zodat Apex niet afbreekt */
  width: 100%;
}

.fe-card .chart {
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

/* Forceer alle Apex SVG’s voldoende hoogte */
svg.apexcharts-svg {
  height: 280px !important;
  width: 100% !important;
}

#radar-chart svg.apexcharts-svg {
    height: 450px !important;
}



.fe-dark .apexcharts-tooltip {
  background: #1e293b !important;   /* donker */
  color: #f1f5f9 !important;        /* licht tekst */
  border: 1px solid #334155 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.5) !important;
}

.fe-dark .apexcharts-tooltip-title {
  background: #0f172a !important;   /* nog donkerder voor header */
  border-bottom: 1px solid #334155 !important;
  color: #cbd5e1 !important;
}

/* === Feellin Coach styles === */
.fe-coach-fab{
  position:fixed; right:16px; bottom:18px; z-index:1040;
  width:56px;height:56px;border-radius:16px; display:flex;align-items:center;justify-content:center;
  background:#ffffff;border:1px solid #e5e7eb; box-shadow:0 10px 30px rgba(2,6,23,.15); cursor:pointer;
}
.fe-dark .fe-coach-fab{ background:#0b1220;border-color:#263043; box-shadow:0 10px 30px rgba(2,6,23,.45); }
.fe-coach-lottie{ width:36px;height:36px }

.fe-coach-mini{
  position:fixed; right:82px; bottom:26px; z-index:1039;
  background:#ffffff;border:1px solid #e5e7eb;border-radius:12px; padding:8px 10px;
  box-shadow:0 12px 32px rgba(2,6,23,.14); font-size:13px; color:#334155;
}
.fe-dark .fe-coach-mini{ background:#0b1220;border-color:#263043;color:#e2e8f0 }
.fe-coach-mini .txt{white-space:nowrap}

.fe-coach-overlay{
  position:fixed; inset:0; background:rgba(2,6,23,.28); z-index:1040; display:flex;align-items:end; justify-content:end;
  padding:18px;
}
.fe-coach-panel{
  width:min(720px, 96vw); max-height:min(82vh, 900px); background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #e5e7eb; box-shadow:0 18px 60px rgba(2,6,23,.22);
}
.fe-dark .fe-coach-panel{ background:#0b1220; border-color:#263043 }

.fe-coach-panel .head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--fe-border,#e5e7eb) }
.fe-coach-panel .title{ display:flex; align-items:center; gap:10px }
.fe-coach-panel .title .logo{ width:20px;height:20px; border-radius:6px; background:linear-gradient(135deg,#6D4AFE,#8b5cf6) }
.fe-coach-panel .title #coachTitle{ font-weight:800; font-size:16px }
.fe-coach-panel .title .sub{ opacity:.7 }
.fe-coach-panel .x{ background:transparent;border:0;font-size:26px;line-height:1;cursor:pointer;color:#334155 }
.fe-dark .fe-coach-panel .x{ color:#e2e8f0 }

.fe-coach-panel .body{ padding:14px 16px; overflow:auto; max-height:60vh }
.fe-coach-panel .foot{ padding:12px 16px; border-top:1px solid var(--fe-border,#e5e7eb); display:flex; gap:8px; justify-content:flex-end }

.fe-coach-panel .spinner{
  width:30px;height:30px; border:3px solid #e5e7eb; border-top-color:#6D4AFE; border-radius:50%; animation:spin 1s linear infinite; margin:18px auto;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.fe-coach-panel .error{ color:#ef4444; background:#fff1f2; border:1px solid #fecdd3; padding:10px; border-radius:10px }
.fe-dark .fe-coach-panel .error{ background:#2b152f; border-color:#4a1d70; color:#fda4af }

.fe-coach-panel .content h3{ font-size:18px; margin:8px 0 4px }
.fe-coach-panel .pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid currentColor }
.fe-coach-panel .list{ margin:10px 0 0; padding-left:18px }
.fe-coach-panel .list li{ margin:6px 0 }

/* === Feellin Coach – fixes / responsive === */
.fe-coach-fab{
  position:fixed; z-index:1040;
  right: max(12px, calc(env(safe-area-inset-right,0px) + 12px));
  bottom:max(12px, calc(env(safe-area-inset-bottom,0px) + 12px));
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #e5e7eb; box-shadow:0 10px 30px rgba(2,6,23,.15);
  overflow:hidden; /* voorkom uitrekken lottie op mobiel */
}
.fe-dark .fe-coach-fab{ background:#0b1220;border-color:#263043; box-shadow:0 10px 30px rgba(2,6,23,.45) }

.fe-coach-lottie{ width:28px; height:28px }
.fe-coach-fab svg{ width:100% !important; height:100% !important } /* lottie altijd passend */

.fe-coach-mini{
  position:fixed; z-index:1039;
  right: calc(56px + 18px); bottom: calc(10px + env(safe-area-inset-bottom,0px));
  background:#ffffff;border:1px solid #e5e7eb;border-radius:12px; padding:8px 10px;
  box-shadow:0 12px 32px rgba(2,6,23,.14); font-size:13px; color:#334155
}
.fe-dark .fe-coach-mini{ background:#0b1220;border-color:#263043;color:#e2e8f0 }

.fe-coach-overlay{ backdrop-filter: blur(2px) }

.fe-coach-panel{ margin:0 } /* geen onverwachte center-margins */

@media (max-width: 640px){
  .fe-coach-fab{ width:50px; height:50px; border-radius:14px }
  .fe-coach-lottie{ width:24px; height:24px }
  .fe-coach-mini{
    right: calc(50px + 18px + env(safe-area-inset-right,0px));
    bottom: calc(8px + env(safe-area-inset-bottom,0px));
  }
  .fe-coach-overlay{ align-items:flex-end }                  /* bottom-sheet gedrag */
  .fe-coach-panel{ width:100%; max-height:calc(100vh - 72px); border-radius:16px 16px 0 0 }
}

/* statusregel boven de spinner */
#feCoachStatus{ text-align:center; margin:8px 0 6px; opacity:.8; font-size:13px; color:#475569 }
.fe-dark #feCoachStatus{ color:#e2e8f0 }


/* Coach boven Tour */
.fe-coach-overlay { z-index: 10020 !important; }
.fe-coach-panel   { position: relative; z-index: 10021 !important; }
/* Verberg FAB tijdens tour */
.fe-tour-open .fe-coach-fab { display: none !important; }

/* Zorg dat [hidden] altijd echt verbergt (iOS/Safari quirks) */
[hidden]{ display:none !important; }

/* Coach altijd boven de Tour */
.fe-coach-overlay{ position:fixed; inset:0; z-index:10020; display:flex; align-items:center; justify-content:center; background:rgba(2,6,23,.28); }
.fe-coach-panel{ z-index:10021; width:min(720px,96vw); max-height:min(82vh,900px); background:#fff; border-radius:16px; overflow:hidden; border:1px solid #e5e7eb; box-shadow:0 18px 60px rgba(2,6,23,.22); }

/* Tijdens de Tour de FAB verbergen */
.fe-tour-open .fe-coach-fab{ display:none !important; }

/* Mobiel: bottom-sheet gedrag + safe area */
@media (max-width:640px){
  .fe-coach-overlay{ align-items:flex-end; padding: max(12px, env(safe-area-inset-bottom)); }
  .fe-coach-panel{ width:100%; max-height:calc(100vh - 72px); border-radius:16px 16px 0 0; }
}


/* FAB: lottie + mini label */
.fe-coach-fab { position:fixed; z-index:1040; right:max(12px, calc(env(safe-area-inset-right,0px) + 12px)); bottom:max(12px, calc(env(safe-area-inset-bottom,0px) + 12px)); width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #e5e7eb; box-shadow:0 10px 30px rgba(2,6,23,.15); overflow:hidden }
.fe-dark .fe-coach-fab{ background:#0b1220; border-color:#263043; box-shadow:0 10px 30px rgba(2,6,23,.45) }

.fe-coach-fab-inner{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center }
.fe-coach-lottie{ width:32px; height:32px }
.fe-coach-fab svg{ width:100% !important; height:100% !important } /* lottie svg altijd passend */

/* ieniemienie labeltje rechts-onder in de knop */
.fe-coach-label{
  position:absolute; right:6px; bottom:6px;
  font-size:9px; line-height:1; font-weight:700; letter-spacing:.2px;
  color:#6D4AFE; background:rgba(109,74,254,.08);
  border:1px solid #e5e7eb; padding:2px 4px; border-radius:6px;
}
.fe-dark .fe-coach-label{ color:#c7b8ff; background:rgba(109,74,254,.18); border-color:#3b2f5a }

@media (max-width:640px){
  .fe-coach-fab{ width:50px; height:50px; border-radius:14px }
  .fe-coach-lottie{ width:28px; height:28px }
  .fe-coach-label{ font-size:8px; right:5px; bottom:5px; padding:1px 4px }
}

/* Lottie smiley knoppen */
.smiley-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all .2s ease;
}

.smiley-btn:hover {
  border-color: var(--fe-brand-600);
  background: var(--fe-brand-50);
}

.smiley-btn.active {
  border-color: var(--fe-brand);
  background: var(--fe-brand-50);
}

/* Dark theme variant */
body.fe-dark .smiley-btn:hover {
  border-color: var(--fe-brand-600);
  background: rgba(109,74,254,.15);
}

body.fe-dark .smiley-btn.active {
  border-color: var(--fe-brand);
  background: rgba(109,74,254,.25);
}
/* Compacte header (na start) */
body.compact-header .fe-hero h1 {
  font-size: 20px;       /* kleiner */
  margin-bottom: 6px;
}

body.compact-header .fe-hero .hero-badges {
  gap: 4px;
}

body.compact-header .fe-badge {
  font-size: 12px;
  padding: 2px 8px;
}